/**
 * GT header — de-crowd metrics without clipping brand / SEOAI
 * Mini embed + non-mini web (production patch hdr5).
 *
 * DOM: header > [wrapper] > .flex.flex-wrap.items-stretch
 *   [brand] [metric…] [utility: clock · SEOAI · Language · Mini]
 */

/* ---- Main row: one band; never clip brand or utility chrome ---- */
#root header .flex.flex-wrap.items-stretch {
  align-items: center !important;
  flex-wrap: nowrap !important;
  gap: 0.2rem 0.3rem !important;
  min-width: 0 !important;
  overflow: visible !important;
  padding-top: 0.35rem !important;
  padding-bottom: 0.35rem !important;
  box-sizing: border-box !important;
}

#root header {
  overflow: visible !important;
}

/* Brand — full logo / wordmark, never cropped at top */
#root header .flex.flex-wrap.items-stretch > .flex.items-center.gap-3 {
  align-self: center !important;
  align-items: center !important;
  flex: 0 0 auto !important;
  min-height: 44px;
  padding-top: 0.15rem !important;
  padding-bottom: 0.15rem !important;
  margin-right: 0.15rem !important;
  overflow: visible !important;
}

#root header .flex.flex-wrap.items-stretch > .flex.items-center.gap-3 img {
  height: 1.85rem !important;
  width: auto !important;
  max-height: 1.85rem !important;
  display: block !important;
  object-fit: contain !important;
  overflow: visible !important;
}

/* Metric cards — shrink + truncate so 4 commodities cards fit */
#root header .flex.flex-wrap.items-stretch > .px-4.py-2 {
  align-self: center !important;
  justify-content: center !important;
  flex: 1 1 0 !important;
  min-width: 0 !important;
  max-width: 10.5rem !important;
  min-height: 40px !important;
  max-height: 48px !important;
  padding: 0.2rem 0.4rem !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

#root header .flex.flex-wrap.items-stretch > .px-4.py-2 .text-xl,
#root header .flex.flex-wrap.items-stretch > .px-4.py-2 .text-lg {
  font-size: 0.8rem !important;
  line-height: 1.15 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 100% !important;
}

#root header .flex.flex-wrap.items-stretch > .px-4.py-2 .text-\[10px\],
#root header .flex.flex-wrap.items-stretch > .px-4.py-2 .uppercase {
  font-size: 0.55rem !important;
  line-height: 1.1 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 100% !important;
  display: block !important;
}

#root header .flex.flex-wrap.items-stretch > .px-4.py-2 > div,
#root header .flex.flex-wrap.items-stretch > .px-4.py-2 p,
#root header .flex.flex-wrap.items-stretch > .px-4.py-2 span {
  max-width: 100%;
}

/* Utility cluster: clock · SEOAI · Language · Mini */
#root header .flex.items-center.gap-2.px-2.ml-auto {
  align-items: center !important;
  align-self: center !important;
  flex: 0 0 auto !important;
  flex-shrink: 0 !important;
  gap: 0.35rem !important;
  min-height: 40px;
  margin-left: auto !important;
  padding-top: 0.1rem !important;
  padding-bottom: 0.1rem !important;
  padding-left: 0.35rem !important;
  white-space: nowrap !important;
  overflow: visible !important;
}

#root header .header-live-clock,
#root header .seoai-checker-trigger,
#root header .gt-lang-trigger,
#root header .wead-auth-bar,
#root header .wead-auth-bar__pill,
#root header .wead-auth-bar__signin {
  box-sizing: border-box !important;
  flex-shrink: 0 !important;
}

/* Buttons: min-height + vertical padding so glyphs are not sliced */
#root header .seoai-checker-trigger,
#root header .gt-lang-trigger,
#root header .wead-auth-bar__pill,
#root header .wead-auth-bar__signin {
  min-height: 34px !important;
  height: auto !important;
  max-height: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0.35rem 0.55rem !important;
  line-height: 1.2 !important;
  overflow: visible !important;
}

#root header .seoai-checker-trigger {
  max-width: none !important;
  font-size: 0.68rem !important;
  letter-spacing: 0.01em;
  white-space: nowrap !important;
}

#root header .gt-lang-trigger {
  max-width: 9.5rem !important;
}

#root header .header-live-clock {
  min-height: 34px !important;
  height: auto !important;
  max-height: none !important;
  max-width: 7.25rem !important;
  padding: 0.2rem 0.4rem !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 0 !important;
  line-height: 1.1 !important;
  overflow: visible !important;
}

#root header .header-live-clock-date {
  font-size: 0.48rem !important;
  line-height: 1.1 !important;
  white-space: nowrap !important;
}

#root header .header-live-clock-time {
  font-size: 0.65rem !important;
  line-height: 1.1 !important;
  white-space: nowrap !important;
}

#root header .header-live-clock-countdown {
  display: none !important;
}

#root header .wead-auth-bar {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 34px !important;
  height: auto !important;
  overflow: visible !important;
}

#root header .wead-auth-bar__logout {
  width: 34px !important;
  height: 34px !important;
  min-height: 34px !important;
}

/* ---- Mid desktop: drop metric subtitles, tighten cards ---- */
@media (max-width: 1480px) {
  #root header .flex.flex-wrap.items-stretch > .px-4.py-2 {
    max-width: 8.5rem !important;
    max-height: 44px !important;
  }

  #root header .flex.flex-wrap.items-stretch > .px-4.py-2 .text-\[10px\]:not(.uppercase),
  #root header .flex.flex-wrap.items-stretch > .px-4.py-2 .opacity-60,
  #root header .flex.flex-wrap.items-stretch > .px-4.py-2 .opacity-50,
  #root header .flex.flex-wrap.items-stretch > .px-4.py-2 .opacity-70 {
    display: none !important;
  }
}

/* ---- Laptop: keep first 2 metrics, hide 3rd+; shorten SEOAI label ---- */
@media (max-width: 1280px) {
  #root header .flex.flex-wrap.items-stretch > .px-4.py-2:nth-child(n + 4) {
    display: none !important;
  }

  #root header .seoai-checker-trigger {
    font-size: 0 !important;
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
    min-width: 2.4rem !important;
  }

  #root header .seoai-checker-trigger::after {
    content: "AI";
    font-size: 0.7rem !important;
    line-height: 1.2 !important;
    letter-spacing: 0.02em;
  }
}

/* ---- Tablet / Mini hub iframe ---- */
@media (max-width: 980px) {
  #root header .flex.flex-wrap.items-stretch > .px-4.py-2:nth-child(n + 3) {
    display: none !important;
  }

  #root header .header-live-clock-date {
    display: none !important;
  }

  #root header .header-live-clock {
    max-width: 5.5rem !important;
  }
}

/* Mini embed — tighter metrics, still no brand/SEOAI crop */
html.wead-mini-embed #root header .flex.flex-wrap.items-stretch,
html[data-wead-mini-embed="1"] #root header .flex.flex-wrap.items-stretch {
  flex-wrap: nowrap !important;
  gap: 0.15rem 0.25rem !important;
  overflow: visible !important;
  padding-top: 0.4rem !important;
  padding-bottom: 0.4rem !important;
}

html.wead-mini-embed #root header,
html[data-wead-mini-embed="1"] #root header {
  overflow: visible !important;
}

html.wead-mini-embed #root header .flex.flex-wrap.items-stretch > .flex.items-center.gap-3,
html[data-wead-mini-embed="1"] #root header .flex.flex-wrap.items-stretch > .flex.items-center.gap-3 {
  overflow: visible !important;
}

html.wead-mini-embed #root header .flex.flex-wrap.items-stretch > .flex.items-center.gap-3 img,
html[data-wead-mini-embed="1"] #root header .flex.flex-wrap.items-stretch > .flex.items-center.gap-3 img {
  height: 1.75rem !important;
  max-height: 1.75rem !important;
}

html.wead-mini-embed #root header .flex.flex-wrap.items-stretch > .px-4.py-2,
html[data-wead-mini-embed="1"] #root header .flex.flex-wrap.items-stretch > .px-4.py-2 {
  max-width: 7.5rem !important;
  padding: 0.2rem 0.35rem !important;
}

html.wead-mini-embed #root header .flex.flex-wrap.items-stretch > .px-4.py-2:nth-child(n + 4),
html[data-wead-mini-embed="1"] #root header .flex.flex-wrap.items-stretch > .px-4.py-2:nth-child(n + 4) {
  display: none !important;
}

html.wead-mini-embed #root header .flex.flex-wrap.items-stretch > .px-4.py-2 .text-\[10px\]:not(.uppercase),
html[data-wead-mini-embed="1"] #root header .flex.flex-wrap.items-stretch > .px-4.py-2 .text-\[10px\]:not(.uppercase) {
  display: none !important;
}

html.wead-mini-embed #root header .seoai-checker-trigger,
html[data-wead-mini-embed="1"] #root header .seoai-checker-trigger {
  overflow: visible !important;
  height: auto !important;
  padding: 0.35rem 0.5rem !important;
  line-height: 1.2 !important;
}

@media (max-width: 720px) {
  #root header .flex.flex-wrap.items-stretch {
    min-height: 0 !important;
    overflow: visible !important;
  }

  #root header .flex.items-center.gap-2.px-2.ml-auto {
    min-height: 0 !important;
    overflow: visible !important;
  }

  #root header .flex.flex-wrap.items-stretch > .px-4.py-2 {
    display: none !important;
  }
}

/* Phone: hide SEOAI entirely (hdr5 AI stub was beating mobile-shell display:none) */
@media (max-width: 720px) {
  #root header .seoai-checker-trigger,
  #root header .seoai-checker-trigger::after {
    display: none !important;
    content: none !important;
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
    font-size: 0 !important;
  }

  #root header {
    padding-left: 0.45rem !important;
    padding-right: 0.4rem !important;
    box-sizing: border-box !important;
  }

  #root header .flex.flex-wrap.items-stretch {
    padding-left: 0.15rem !important;
    overflow: hidden !important;
  }

  #root header .flex.flex-wrap.items-stretch > .flex.items-center.gap-3 {
    padding-left: 0.15rem !important;
    margin-left: 0 !important;
    overflow: visible !important;
    min-width: 0 !important;
  }

  #root header .flex.flex-wrap.items-stretch > .flex.items-center.gap-3 img {
    height: 1.6rem !important;
    max-height: 1.6rem !important;
    margin-left: 0 !important;
    display: block !important;
  }

  #root header .flex.flex-wrap.items-stretch > .flex.items-center.gap-3 a {
    display: inline-flex !important;
    align-items: center !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }
}