/* ─── The header bar ───────────────────────────────────────────────────────
 * One header for every page: the landing page, enterprise, brand, changelog,
 * status, trust, legal… Pages used to carry their own copies of these rules
 * (enterprise, brand, changelog and go copied them from index.css and drifted),
 * so the logo, the font and the CTA changed from page to page. The font is set
 * here because a page's own font (monospace on several) would otherwise reach
 * the header by inheritance. Scoped to the site header (data-site-header):
 * the 404 page reuses data-component="top" for its own centred logo.
 * ───────────────────────────────────────────────────────────────────────── */
[data-component="top"][data-site-header] {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 32px;
  height: 64px;
  background: rgba(22, 22, 22, 0.8);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-bottom: 1px solid var(--cos-border);
  font-family: var(--cos-font-sans, "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
}

/* ─── Header dropdown navigation ──────────────────────────────────────────
 * Owned by the Header component so the styles travel with it to EVERY page it
 * renders on. Previously these rules lived only in routes/index.css scoped to
 * [data-page="codeopsstudio"], so pages with a different data-page (e.g. /zen
 * uses data-page="zen") rendered the Product/Solutions mega-menus unhidden —
 * the dropdown contents dumped inline at the top of the page. Scoping to
 * [data-component="top"] (the Header's root element) fixes it everywhere and
 * stops the per-page CSS duplication from drifting again.
 *
 * --cos-* variables resolve from the global styles/design-tokens.css.
 * ───────────────────────────────────────────────────────────────────────── */

[data-component="top"] [data-slot="nav-dropdown"] {
  position: relative;
}

[data-component="top"] [data-slot="nav-trigger"] {
  background: none;
  border: none;
  color: var(--cos-text-secondary);
  font-size: 0.875rem;
  padding: 8px 14px;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
  transition:
    color 0.2s,
    background 0.2s;
  font-family: inherit;
}

[data-component="top"] [data-slot="nav-trigger"]:hover {
  color: var(--cos-text-primary);
  background: rgba(255, 255, 255, 0.05);
}

[data-component="top"] [data-slot="dropdown-menu"] {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  min-width: 280px;
  background: var(--cos-bg-surface);
  border: 1px solid rgb(var(--cos-accent-rgb) / 0.15);
  border-radius: 12px;
  padding: 8px;
  box-shadow:
    0 20px 40px rgba(0, 0, 0, 0.4),
    0 0 40px rgb(var(--cos-accent-rgb) / 0.05);
  opacity: 0;
  visibility: hidden;
  transform: translateX(-50%) translateY(4px);
  transition:
    opacity 0.2s,
    visibility 0.2s,
    transform 0.2s;
  z-index: 200;
}

[data-component="top"] [data-slot="nav-dropdown"]:hover [data-slot="dropdown-menu"],
[data-component="top"] [data-slot="nav-dropdown"]:focus-within [data-slot="dropdown-menu"],
[data-component="top"] [data-slot="nav-dropdown"][data-open] [data-slot="dropdown-menu"] {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

[data-component="top"] [data-slot="dropdown-section"] {
  padding: 4px 0;
}

[data-component="top"] [data-slot="dropdown-section"] + [data-slot="dropdown-section"] {
  border-top: 1px solid var(--cos-border);
  margin-top: 4px;
  padding-top: 8px;
}

[data-component="top"] [data-slot="dropdown-label"] {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--cos-text-muted);
  padding: 4px 12px 8px;
}

[data-component="top"] [data-slot="dropdown-item"] {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 8px;
  text-decoration: none;
  color: var(--cos-text-primary);
  transition: background 0.15s;
}

[data-component="top"] [data-slot="dropdown-item"]:hover {
  background: rgb(var(--cos-accent-rgb) / 0.08);
}

[data-component="top"] [data-slot="dropdown-icon"] {
  font-size: 1.2rem;
  flex-shrink: 0;
  margin-top: 2px;
}

[data-component="top"] [data-slot="dropdown-item"] strong {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 2px;
}

[data-component="top"] [data-slot="dropdown-item"] span {
  display: block;
  font-size: 0.8125rem;
  color: var(--cos-text-muted);
  line-height: 1.3;
}

/* Nav CTA wrapper (Sign In + Get Started) */
[data-component="top"] [data-slot="nav-cta-wrapper"] {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: 8px;
}

[data-component="top"] [data-slot="nav-login"] {
  color: var(--cos-text-secondary);
  font-size: 0.875rem;
  padding: 8px 16px;
  border-radius: 8px;
  text-decoration: none;
  transition: color 0.2s;
}

[data-component="top"] [data-slot="nav-login"]:hover {
  color: var(--cos-text-primary);
}

/* ─── Logo wordmark ────────────────────────────────────────────────────────
 * The Header renders text spans (logo-text / logo-accent), but several page
 * CSS files only styled an old <img> logo — leaving the wordmark as unstyled
 * default text on those pages. Style it here so it renders consistently
 * everywhere. The home page's higher-specificity [data-page] rules still win.
 * ───────────────────────────────────────────────────────────────────────── */
/* The logo: the mark followed by the wordmark, one link. The link's own
   underline would run through both (a child cannot cancel it), so it has none. */
[data-component="top"] [data-slot="logo-link"] {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}

[data-component="top"] [data-slot="logo-mark"] {
  width: 30px;
  height: 30px;
  flex: none;
}

[data-component="top"] [data-slot="logo-text"] {
  font-size: 1.5rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.03em;
  text-decoration: none;
  display: flex;
  align-items: center;
}

/* Two-tone grey wordmark, as OpenCode's: no colour, no animation. */
[data-component="top"] [data-slot="logo-accent"] {
  color: var(--cos-accent-400, #a2bcff);
}

/* ─── Desktop nav baseline ─────────────────────────────────────────────────
 * Low-specificity defaults so EVERY page that renders the Header gets a sane
 * top nav (flex row, styled links + CTA). Pages with their own intentional
 * header design (home's [data-page="codeopsstudio"], zen's nested rules) have
 * higher specificity and override these — so this only fills the gap on pages
 * that previously had no nav styling at all (e.g. legal pages).
 * ───────────────────────────────────────────────────────────────────────── */
[data-component="top"] [data-component="nav-desktop"] ul {
  display: flex;
  align-items: center;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}

[data-component="top"] [data-component="nav-desktop"] a {
  color: var(--cos-text-secondary);
  text-decoration: none;
  font-size: 0.875rem;
  padding: 8px 14px;
  border-radius: 8px;
  transition:
    color 0.2s,
    background 0.2s;
}

[data-component="top"] [data-component="nav-desktop"] a:hover {
  color: var(--cos-text-primary);
  background: rgba(255, 255, 255, 0.05);
}

[data-component="top"] [data-component="nav-desktop"] [data-slot="cta-button"] {
  background: linear-gradient(135deg, var(--cos-accent-500), var(--cos-violet-500));
  color: #fff;
  font-weight: 600;
  padding: 8px 20px;
  border-radius: 8px;
  transition:
    transform 0.2s,
    box-shadow 0.2s;
}

[data-component="top"] [data-component="nav-desktop"] [data-slot="cta-button"]:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 20px rgb(var(--cos-accent-rgb) / 0.35);
}

/* ─── Mobile nav ───────────────────────────────────────────────────────── */
[data-component="top"] [data-component="nav-mobile"] {
  display: none;
}

@media (max-width: 768px) {
  [data-component="top"] [data-component="nav-desktop"] {
    display: none;
  }
  [data-component="top"] [data-component="nav-mobile"] {
    display: block;
  }

  [data-component="top"] [data-component="nav-mobile"] > button {
    background: none;
    border: none;
    color: var(--cos-text-primary);
    cursor: pointer;
    padding: 8px;
  }

  [data-component="top"] [data-component="nav-mobile-menu-list"] ul {
    list-style: none;
    padding: 16px;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    background: var(--cos-bg-surface);
    border-bottom: 1px solid var(--cos-border);
  }

  [data-component="top"] [data-component="nav-mobile-menu-list"] a {
    display: block;
    padding: 12px 16px;
    color: var(--cos-text-secondary);
    text-decoration: none;
    border-radius: 8px;
    transition: background 0.2s;
  }

  [data-component="top"] [data-component="nav-mobile-menu-list"] a:hover {
    background: var(--cos-bg-surface-hover);
  }
}
/*
 * Baseline styling for the shared footer.
 *
 * This component had no stylesheet of its own, unlike its sibling `header.tsx`
 * which imports `./header.css`. Its appearance was supplied entirely by whichever
 * page rendered it — ten separate page stylesheets each carry a
 * `[data-page="…"] [data-component="footer"] a` rule. Any page that did not
 * (e.g. `/demo`) rendered the footer's links in the browser default `#0000ee`,
 * which measures 2.1:1 on the dark background: unreadable, and shipped.
 *
 * Everything here is deliberately ONE specificity step below those page rules
 * (`[data-component="footer"] a` is 0-2-1 against their 0-3-1), so this is a
 * floor that pages keep overriding exactly as they do today — not a restyle.
 */
[data-component="footer"] a {
  color: var(--cos-text-muted, #a1a1aa);
  text-decoration: none;
}

[data-component="footer"] a:hover {
  color: var(--cos-text-primary, #f4f4f5);
}

/*
 * WCAG 2.5.8 asks for a 24x24 target. These links render at 18px tall, so they
 * get 3px of vertical padding rather than a larger font, which would change the
 * footer's typography on all ten pages. `inline-block` is required for the
 * block padding to affect the hit area at all.
 */
[data-component="footer"] a {
  display: inline-block;
  padding-block: 3px;
}