/* 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; }