/* style */
/* Thisai header fit (2026-10-04)
   Desktop (1000 px and up): the 9 menu items need ~800–930 px but only ~480 px was left between the logo and
   ThisaiPlay, so the menu wrapped onto 3 lines and overlapped (or the theme folded half of it into "More").
   Here logo, A+ and ThisaiPlay share the top line and the menu gets its own full-width line underneath, on one
   row. Phones are unchanged. Goes with "Thisai header menu: show all items" (footer script that turns off
   Blocksy's fold-into-More).
   The search button moves from the blue top strip into the header line (next to A+) and the strip is hidden,
   on desktop and (v3) on phones and tablets.
   Also: the current menu item (e.g. Home) was white text on a pale pink pill (two older rules fighting);
   it is now coral text on a soft coral pill, at every width.
   Settings: CSS Snippet · Auto Insert · Site Wide Header · Active. Undo: set Inactive. */
@media (min-width: 1000px) {
  html body #header [data-device="desktop"] [data-row="middle"] > .ct-container {
    display: grid !important;
    grid-template-columns: auto 1fr auto auto auto !important;
    grid-template-areas: "logo . search aplus cta" "nav nav nav nav nav";
    column-gap: 14px; row-gap: 6px; align-items: center;
    min-height: 0 !important; height: auto !important; padding-block: 10px 8px;
  }
  html body #header [data-device="desktop"] [data-row="middle"] { height: auto !important; min-height: 0 !important; }
  html body #header [data-device="desktop"] [data-row="middle"] [data-column="start"] { grid-area: logo; }
  html body #header [data-device="desktop"] [data-row="middle"] [data-column="end"],
  html body #header [data-device="desktop"] [data-row="middle"] [data-column="end"] > div { display: contents !important; }
  html body #header [data-device="desktop"] button.thisai-textsize { grid-area: aplus; margin: 0 !important; }
  html body #header [data-device="desktop"] .ct-header-cta { grid-area: cta; }
  /* Search: moved into the header line by the footer script; the top strip that only held it is hidden */
  html.thisai-search-moved body #header [data-device="desktop"] [data-row="top"] { display: none !important; }
  html body #header [data-device="desktop"] [data-row="middle"] [data-id="search"] {
    grid-area: search; display: inline-flex; align-items: center; justify-content: center;
    width: 44px !important; height: 40px !important; margin: 0 !important; padding: 0 !important;
    border: 1.5px solid rgba(20,20,24,.2) !important; border-radius: 10px !important; background: #fff !important; color: #141418;
    --theme-icon-color: #141418; --theme-icon-size: 18px;
  }
  html body #header [data-device="desktop"] [data-row="middle"] [data-id="search"] svg { width: 18px; height: 18px; fill: #141418 !important; }
  html body #header [data-device="desktop"] [data-row="middle"] [data-id="search"]:hover { border-color: #141418 !important; }
  html body #header [data-device="desktop"] nav#header-menu-1 {
    grid-area: nav; justify-content: center; width: 100%; height: auto !important;
    border-top: 1px solid rgba(20,20,24,.08); padding-top: 8px;
  }
  html body #header [data-device="desktop"] nav#header-menu-1 > ul { flex-wrap: nowrap !important; justify-content: center; gap: 2px; }
  html body #header [data-device="desktop"] nav#header-menu-1 .ct-menu-link { padding: 8px 10px !important; white-space: nowrap; }
  html body #header [data-device="desktop"] .site-branding img { max-height: 72px; width: auto; }
}
html body #header #menu-main-menu > .menu-item.current-menu-item > .ct-menu-link,
html body #header #menu-main-menu-1 > .menu-item.current-menu-item > .ct-menu-link {
  background: rgba(255,107,61,.14) !important; border-color: transparent !important; color: #B8431C !important;
}

/* Phones and tablets (mobile header, under 1000 px): search moved next to A+ and the menu button by the footer
   script; the blue top strip that only held it is hidden */
html.thisai-msearch-moved body #header [data-device="mobile"] [data-row="top"] { display: none !important; }
html body #header [data-device="mobile"] [data-row="middle"] [data-id="search"] {
  order: -1; display: inline-flex; align-items: center; justify-content: center;
  width: 44px !important; height: 40px !important; margin: 0 8px 0 0 !important; padding: 0 !important;
  border: 1.5px solid rgba(20,20,24,.2) !important; border-radius: 10px !important; background: #fff !important; color: #141418;
  --theme-icon-color: #141418; --theme-icon-size: 18px;
}
html body #header [data-device="mobile"] [data-row="middle"] [data-id="search"] svg { width: 18px; height: 18px; fill: #141418 !important; }


/* v4 (2026-10-16): phones. Logo (about 170 px wide) plus search, A+, moon and menu (about 200 px) did not fit
   at 390 px, so the search button sat on the logo's "TV". The logo is capped so everything fits down to 340 px. */
@media (max-width: 999px) {
  html body #header [data-device="mobile"] [data-row="middle"] [data-column="start"] { min-width: 0; flex: 0 1 auto; }
  html body #header [data-device="mobile"] .site-logo-container img { width: auto !important; height: auto !important; max-width: 126px !important; max-height: 48px !important; }
}
@media (max-width: 370px) {
  html body #header [data-device="mobile"] .site-logo-container img { max-width: 104px !important; }
}