/* ─── 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"] {
  white-space: nowrap;
  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;
}

/* Shown on mouse hover, or when the trigger has opened it (data-open, which
   also drives aria-expanded). Not on :focus-within: Escape and a second click
   closed the menu in state (aria-expanded="false") while focus inside kept it
   visible. */
[data-component="top"] [data-slot="nav-dropdown"]:hover [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"] {
  white-space: nowrap;
  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"] {
  white-space: nowrap;
  background: var(--cos-btn-primary-bg);
  color: var(--cos-btn-primary-text);
  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 {
  background: var(--cos-btn-primary-bg-hover);
  color: var(--cos-btn-primary-text);
}

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

@media (max-width: 1180px) {
  [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);
  }

  /* The open menu is a full-width panel under the header bar (the sticky header
     anchors it), scrolling when taller than the screen. Unpositioned, it sat in
     the header's centred flex row: once Product, Solutions and Resources were
     added it grew to ~510px and its top half, those three groups, was drawn
     above the screen. */
  [data-component="top"] #nav-mobile-menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 50;
    max-height: calc(100vh - 80px);
    max-height: calc(100dvh - 80px);
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--cos-bg-surface);
    border-bottom: 1px solid var(--cos-border);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.35);
  }

  /* Group labels line up with the links. */
  [data-component="top"] [data-component="nav-mobile-menu-list"] summary {
    padding: 12px 16px;
    border-radius: 8px;
    color: var(--cos-text-primary);
    font-weight: 500;
  }

  /* A group's links are part of the panel, not a second boxed list inside it. */
  [data-component="top"] [data-component="nav-mobile-menu-list"] details ul {
    padding: 0 0 4px 12px;
    background: none;
    border: 0;
  }
}

/* Menus with two sections (lib/nav.ts) show them side by side (IA-1). */
[data-component="top"] [data-slot="dropdown-menu"][data-columns="2"] {
  display: grid;
  grid-template-columns: repeat(2, minmax(200px, 1fr));
  gap: 4px 12px;
  min-width: 480px;
}

[data-component="top"]
  [data-slot="dropdown-menu"][data-columns="2"]
  [data-slot="dropdown-section"]
  + [data-slot="dropdown-section"] {
  border-top: 0;
  margin-top: 0;
  padding-top: 4px;
}

[data-component="top"] [data-slot="nav-link"] {
  white-space: nowrap;
  color: var(--cos-text-secondary);
  text-decoration: none;
  font-size: 0.875rem;
  padding: 6px 10px;
  border-radius: 6px;
}

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

/* "Book a demo": the secondary call to action, between Sign in and Start free. */
[data-component="top"] [data-slot="nav-demo-cta"] {
  color: var(--cos-text-primary);
  text-decoration: none;
  font-size: 0.875rem;
  padding: 7px 12px;
  border: 1px solid var(--cos-border-strong, rgba(255, 255, 255, 0.18));
  border-radius: 8px;
  white-space: nowrap;
}

[data-component="top"] [data-slot="nav-demo-cta"]:hover {
  background: rgba(255, 255, 255, 0.05);
}

[data-component="nav-mobile-menu-list"] details > summary {
  cursor: pointer;
  list-style: none;
}

[data-component="nav-mobile-menu-list"] details > summary::after {
  content: " ▾";
}

[data-component="nav-mobile-menu-list"] details[open] > summary::after {
  content: " ▴";
}

[data-component="nav-mobile-menu-list"] details ul {
  list-style: none;
  padding-left: 12px;
}

/* ─── Full page (owner, 2026-10-26) ───────────────────────────────────────
 * Every public page spans the window: they were a 67.5rem column centred in
 * it, set once per page stylesheet (brand, enterprise, changelog, go, legal,
 * privacy, terms). Here, with the header that every public page renders, and
 * more specific than those (element + two attributes), so one rule covers
 * them all. The side borders went with the column.
 * ───────────────────────────────────────────────────────────────────────── */
main[data-page] > [data-component="container"] {
  max-width: none;
  border-left: none;
  border-right: none;
}
/*
 * 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;
}

/* Columns (lib/footer-links.ts): Product, Compare, Integrations, Resources, Company. */
[data-component="footer"] [data-slot="footer-inner"] {
  flex: 1 1 100%;
  width: 100%;
  /* Full page (owner, 2026-10-26): the columns span the page, aligned with
     its content, instead of a 1200px block centred in it. */
  padding: 40px clamp(24px, 5vw, 80px) 28px;
  text-align: left;
}

[data-component="footer"] [data-slot="columns"] {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 24px;
}

[data-component="footer"] [data-slot="column-title"] {
  margin: 0 0 8px;
  color: var(--cos-text-primary, #f4f4f5);
  font-size: 0.8125rem;
  font-weight: 600;
}

[data-component="footer"] [data-slot="column"] ul {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.8125rem;
}

[data-component="footer"] [data-slot="footer-bottom"] {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  margin: 28px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--cos-border, rgba(255, 255, 255, 0.06));
  font-size: 0.8125rem;
}

[data-component="footer"] [data-slot="newsletter"] label {
  display: block;
  margin-bottom: 6px;
  color: var(--cos-text-primary, #f4f4f5);
  font-weight: 600;
}

[data-component="footer"] [data-slot="newsletter"] div {
  display: flex;
  gap: 8px;
}

[data-component="footer"] [data-slot="newsletter"] input {
  min-width: 220px;
  padding: 7px 10px;
  border: 1px solid var(--cos-border, rgba(255, 255, 255, 0.12));
  border-radius: 6px;
  background: transparent;
  color: inherit;
  font: inherit;
}

[data-component="footer"] [data-slot="newsletter"] button {
  padding: 7px 12px;
  border: 1px solid var(--cos-border-strong, rgba(255, 255, 255, 0.18));
  border-radius: 6px;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

[data-component="footer"] [data-slot="newsletter"] p {
  margin: 6px 0 0;
}

[data-component="footer"] [data-slot="rss"] {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

[data-component="footer"] [data-slot="badges"] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-top: 16px;

  img {
    display: block;
    height: auto;
    max-width: 100%;
  }

  [data-slot="ph-badge"] {
    color: var(--cos-text-secondary, #a1a1aa);
    font-size: 0.8125rem;
    text-decoration: none;
  }
}

[data-component="footer"] [data-slot="social"] {
  display: flex;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;

  a {
    display: inline-flex;
    padding: 6px;
    border-radius: 6px;
    color: var(--cos-text-secondary, #a1a1aa);
  }

  a:hover {
    color: var(--cos-text-primary, #f4f4f5);
  }

  a:focus-visible {
    outline: 2px solid var(--cos-border-focus, #a1a1aa);
    outline-offset: 2px;
  }
}

@media (max-width: 1000px) {
  [data-component="footer"] [data-slot="columns"] {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 600px) {
  [data-component="footer"] [data-slot="columns"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
/* The share bar and code-copy buttons (component/share-bar.tsx), and the in-page newsletter box (email-signup.tsx). */

[data-component="share-bar"] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 32px 0 8px;
  font-size: 0.8125rem;
}

[data-component="share-bar"] [data-slot="share-label"] {
  color: var(--cos-text-tertiary);
  margin-right: 4px;
}

[data-component="share-bar"] a,
[data-component="share-bar"] button {
  padding: 4px 10px;
  border: 1px solid var(--cos-border);
  border-radius: 999px;
  background: transparent;
  color: var(--cos-text-secondary);
  font: inherit;
  text-decoration: none;
  cursor: pointer;
}

[data-component="share-bar"] a:hover,
[data-component="share-bar"] button:hover {
  border-color: var(--cos-border-strong);
  color: var(--cos-text-primary);
}

[data-component="content-body"] pre {
  position: relative;
}

[data-component="content-body"] pre [data-slot="code-copy"] {
  position: absolute;
  top: 6px;
  right: 6px;
  padding: 2px 8px;
  border: 1px solid var(--cos-border);
  border-radius: 6px;
  background: var(--cos-bg-subtle, rgba(255, 255, 255, 0.03));
  color: var(--cos-text-secondary);
  font: inherit;
  font-size: 0.75rem;
  cursor: pointer;
}

[data-component="newsletter-box"] {
  margin: 40px 0 0;
  padding: 20px 24px;
  border: 1px solid var(--cos-border);
  border-radius: 12px;
}

[data-component="newsletter-box"] h2 {
  margin: 0 0 4px;
  font-size: 1.0625rem;
}

[data-component="newsletter-box"] p {
  margin: 0 0 12px;
  color: var(--cos-text-secondary);
}

[data-component="newsletter-box"] form > div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

[data-component="newsletter-box"] input {
  flex: 1 1 220px;
  padding: 8px 12px;
  border: 1px solid var(--cos-border);
  border-radius: 8px;
  background: transparent;
  color: var(--cos-text-primary);
  font: inherit;
}

[data-component="newsletter-box"] button {
  padding: 8px 16px;
  border: 0;
  border-radius: 8px;
  background: var(--cos-text-primary);
  color: var(--cos-bg-base, #161616);
  font: inherit;
  cursor: pointer;
}