/* Tomosu AI — shared header chrome stylesheet.
   Nav, dropdowns, and the announcement modal, extracted from site.css so
   pages with their own base stylesheet (blogs, legal, about) ship the same
   header as the home page without importing the whole site CSS. Burger and
   mobile-drawer rules already live in responsive.css, which every page loads. */

/* Tokens this file needs that a page's own stylesheet may not define.
   Declared with a fallback-friendly :root block so site.css (loaded after on
   full-chrome pages) still wins where it defines the same names. */
:root {
  --brand-deep: #115e59;
  --brand-soft: #5eead4;
  --good: #16a34a;
}

/* ── NAV ── */
    .nav {
      position: sticky;
      top: 0;
      z-index: 50;
      background: rgba(255, 255, 255, 0.78);
      backdrop-filter: saturate(180%) blur(14px);
      -webkit-backdrop-filter: saturate(180%) blur(14px);
      border-bottom: 1px solid transparent;
    }

    .nav-inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 16px 24px;
      max-width: none;
      margin: 0;
    }

    .nav-brand {
      display: flex;
      align-items: center;
      gap: 12px;
      text-decoration: none;
    }

    .nav-mark {
      height: 40px;
      width: auto;
      display: block;
      flex-shrink: 0;
      mix-blend-mode: multiply;
      filter: contrast(1.4) saturate(0.4);
    }

    .nav-name {
      font-family: 'Space Grotesk', var(--sans);
      font-size: 21px;
      font-weight: 700;
      color: #000;
      letter-spacing: -0.02em;
      line-height: 1;
    }

    .nav-name .nav-name-ai {
      color: inherit;
      font-weight: inherit;
    }

    .nav-brand-text {
      display: flex;
      flex-direction: column;
    }

    .nav-tagline {
      font-size: 10px;
      font-weight: 500;
      color: var(--muted);
      letter-spacing: 0.04em;
      line-height: 1;
      margin-top: 3px;
      white-space: nowrap;
    }

    @media (max-width: 720px) {
      .nav-inner {
        padding: 14px 18px;
      }

      .nav-mark {
        height: 32px;
      }

      .nav-name {
        font-size: 18px;
      }

      .nav-tagline {
        font-size: 8.5px;
      }
    }

    .nav-links {
      display: flex;
      align-items: center;
      gap: 28px;
      margin-left: auto;
      margin-right: 28px;
    }

    .nav-link {
      font-size: 13.5px;
      font-weight: 500;
      color: var(--text-soft);
      text-decoration: none;
      transition: color 0.15s;
      white-space: nowrap;
    }

    .nav-link:hover {
      color: var(--ink);
    }

    /* highlighted so the calculator reads as a tool, not another nav item */
    .nav-link-tco {
      background: #dcfce7;
      color: #15803d;
      border: 1px solid rgba(22, 163, 74, 0.3);
      padding: 6px 12px;
      border-radius: 100px;
      transition: background 0.15s, border-color 0.15s;
    }

    /* Free PRI Scan — same "tool link" treatment as TCO / Governance Impact. */
    .nav-link-scan {
      background: var(--brand-bg);
      color: var(--brand-deep);
      border: 1px solid var(--brand-soft);
      padding: 6px 12px;
      border-radius: 100px;
      font-weight: 600;
      transition: background 0.15s, border-color 0.15s;
    }

    .nav-link-scan:hover {
      background: #d7f7ee;
      border-color: var(--brand);
      color: var(--brand-deep);
    }

    .nav-link-tco:hover {
      background: #bbf7d0;
      border-color: var(--good);
      color: #15803d;
    }

    /* clear the 73px sticky nav when jumping to the simulator */
    #governance-impact {
      scroll-margin-top: 92px;
    }

    .nav-link-gov {
      background: var(--accent-bg);
      color: var(--accent-deep);
      border: 1px solid rgba(109, 95, 209, 0.3);
      padding: 6px 12px;
      border-radius: 100px;
      transition: background 0.15s, border-color 0.15s;
    }

    .nav-link-gov:hover {
      background: #e0e3f7;
      border-color: var(--accent);
      color: var(--accent-deep);
    }

    /* About dropdown */
    .nav-dropdown {
      position: relative;
    }

    .nav-caret {
      color: var(--muted);
      transition: transform 0.15s;
      display: inline-block;
      vertical-align: 1px;
      line-height: 0;
    }

    .nav-dropdown:hover .nav-caret {
      transform: rotate(180deg);
    }

    .nav-dropdown-menu {
      position: absolute;
      top: 100%;
      left: 50%;
      transform: translateX(-50%);
      padding-top: 12px;
      display: none;
      z-index: 200;
    }

    .nav-dropdown:hover .nav-dropdown-menu,
    .nav-dropdown:focus-within .nav-dropdown-menu {
      display: block;
    }

    .nav-dropdown-menu a {
      display: block;
      background: var(--bg-card, #fff);
      font-size: 13px;
      font-weight: 500;
      color: var(--text-soft);
      text-decoration: none;
      padding: 10px 18px;
      white-space: nowrap;
      transition: background 0.15s, color 0.15s;
    }

    .nav-dropdown-menu a:first-child {
      border-radius: 12px 12px 0 0;
    }

    .nav-dropdown-menu a:last-child {
      border-radius: 0 0 12px 12px;
    }

    .nav-dropdown-menu a:hover {
      background: var(--bg-soft);
      color: var(--ink);
    }

    /* menu container border/shadow via wrapper trick: apply to the box formed by links */
    .nav-dropdown-menu a {
      border: 1px solid var(--border);
      border-bottom: none;
    }

    .nav-dropdown-menu a:last-child {
      border-bottom: 1px solid var(--border);
      box-shadow: 0 14px 34px rgba(15, 23, 42, 0.12);
    }

    /* Nested submenu (Docs -> Integrations) */
    .nav-submenu {
      position: relative;
    }

    .nav-dropdown-menu .nav-submenu>a {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 18px;
      border-radius: 0;
      border-bottom: none;
      box-shadow: none;
    }

    .nav-submenu-caret {
      color: var(--muted);
      line-height: 0;
      display: inline-block;
    }

    .nav-submenu-menu {
      position: absolute;
      top: -1px;
      left: 100%;
      padding-left: 8px;
      display: none;
      z-index: 210;
    }

    .nav-submenu:hover>.nav-submenu-menu,
    .nav-submenu:focus-within>.nav-submenu-menu {
      display: block;
    }

    .nav-submenu:hover>a,
    .nav-submenu:focus-within>a {
      background: var(--bg-soft);
      color: var(--ink);
    }

    .nav-dropdown-menu .nav-submenu-menu a:first-child {
      border-radius: 12px 12px 0 0;
    }

    .nav-dropdown-menu .nav-submenu-menu a:last-child {
      border-radius: 0 0 12px 12px;
      border-bottom: 1px solid var(--border);
      box-shadow: 0 14px 34px rgba(15, 23, 42, 0.12);
    }

    @media (max-width: 980px) {
      .nav-dropdown {
        display: none;
      }
    }

    .nav-cta {
      background: var(--ink);
      color: #fff;
      font-size: 13px;
      font-weight: 600;
      padding: 10px 20px;
      border-radius: 100px;
      text-decoration: none;
      transition: background 0.15s;
      white-space: nowrap;
    }

    .nav-cta:hover {
      background: var(--accent);
    }

    /* The desktop nav carries five text links, three tool pills, a download
       button and the CTA — it needs ~1800px to lay out without clipping, so it
       already overflowed on a 1440px laptop before the PRI Scan pill was added.
       Below 1600px, drop the promotional announce pill (still present in the
       mobile drawer and reachable from the modal) to buy that width back. */
    @media (max-width: 1300px) {

      /* Compound selector: .announce-btn sets display:inline-flex further down
         the sheet, so an equal-specificity .nav-announce rule would lose. */
      .announce-btn.nav-announce {
        display: none;
      }
    }

    @media (max-width: 1550px) {
      .nav-inner {
        padding: 16px 12px;
      }

      .nav-links {
        gap: 14px;
        margin-right: 14px;
      }

      .nav-link {
        font-size: 12px;
      }

      .nav-cta {
        font-size: 12px;
        padding: 8px 14px;
      }

      .nav-link-gov,
      .nav-link-scan,
      .nav-link-tco {
        padding: 5px 9px;
        font-size: 12px;
      }
    }

    @media (max-width: 1280px) {
      .nav-links {
        gap: 12px;
      }

      .nav-link {
        font-size: 12px;
      }

      .nav-link-gov,
      .nav-link-scan,
      .nav-link-tco {
        padding: 5px 9px;
      }
    }

    @media (max-width: 1080px) {
      .nav-links {
        gap: 22px;
      }

      .nav-link {
        font-size: 13px;
      }
    }

    @media (max-width: 980px) {
      .nav-links .nav-link {
        display: none;
      }
    }


/* ── NAV DOWNLOAD BUTTON ── */
    .nav-download {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      background: transparent;
      border: 1.5px solid var(--brand);
      color: var(--brand);
      font-size: 13px;
      font-weight: 600;
      padding: 8px 17px;
      border-radius: 100px;
      text-decoration: none;
      transition: background 0.15s, color 0.15s;
      white-space: nowrap;
      margin-right: 10px;
    }

    .nav-download:hover {
      background: var(--brand);
      color: #fff;
    }

    .nav-download svg {
      flex-shrink: 0;
    }

    @media (max-width: 980px) {
      .nav-download {
        display: none;
      }
    }

/* ── ANNOUNCEMENT BUTTON + MODAL ── */
    .announce-btn {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      background: var(--accent);
      color: #fff;
      border: none;
      border-radius: 100px;
      padding: 8px 16px;
      font-family: var(--sans);
      font-size: 12px;
      font-weight: 600;
      letter-spacing: 0.01em;
      cursor: pointer;
      animation: announce-glow 2.2s ease-in-out infinite;
      transition: transform 0.18s;
    }

    .announce-btn:hover {
      transform: translateY(-1px);
    }

    .announce-spark {
      font-size: 11px;
      animation: pulse 2.2s infinite;
    }

    @keyframes announce-glow {

      0%,
      100% {
        box-shadow: 0 0 6px rgba(109, 95, 209, 0.45), 0 0 18px rgba(109, 95, 209, 0.25);
      }

      50% {
        box-shadow: 0 0 14px rgba(109, 95, 209, 0.85), 0 0 36px rgba(109, 95, 209, 0.45);
      }
    }

    @media (prefers-reduced-motion: reduce) {

      .announce-btn,
      .announce-spark {
        animation: none;
      }
    }

    /* compact variant for the nav */
    .nav-announce {
      font-size: 11px;
      padding: 7px 13px;
      white-space: nowrap;
    }

    /* between the mobile drawer and full width the bar is tight — close the
       gaps rather than dropping a destination */
    @media (max-width: 1460px) {
      .nav-links {
        gap: 18px;
        margin-right: 18px;
      }
    }

    /* the badge is the first thing to go when the bar runs out of room; it
       already hid below 1180, now it hides while the bar is still crowded */
    @media (max-width: 1500px) {
      .nav-announce {
        display: none;
      }
    }

    @media (max-width: 980px) {
      .nav-announce {
        display: none;
      }
    }

    .announce-modal {
      position: fixed;
      inset: 0;
      background: rgba(15, 23, 42, 0.55);
      backdrop-filter: blur(6px);
      display: none;
      align-items: center;
      justify-content: center;
      padding: 24px;
      z-index: 1000;
    }

    .announce-modal.open {
      display: flex;
    }

    .announce-modal-box {
      position: relative;
      width: 100%;
      max-width: 500px;
      max-height: 90vh;
      overflow: auto;
      border-radius: 20px;
      background: #fff;
      box-shadow: 0 24px 80px rgba(15, 23, 42, 0.4);
    }

    .announce-modal-box img {
      display: block;
      width: 100%;
      height: auto;
    }

    .announce-close {
      position: absolute;
      top: 12px;
      right: 12px;
      width: 32px;
      height: 32px;
      border: none;
      border-radius: 50%;
      background: rgba(15, 23, 42, 0.65);
      color: #fff;
      font-size: 18px;
      line-height: 1;
      cursor: pointer;
      z-index: 1;
      transition: background 0.15s;
    }

    .announce-close:hover {
      background: rgba(15, 23, 42, 0.9);
    }


/* ── nav density between the mobile drawer (<=980px) and full width ── */
    @media (max-width: 1300px) {
      .nav-links {
        gap: 11px;
        margin-right: 11px;
      }

      .nav-link {
        font-size: 11.5px;
      }

      .nav-link-gov,
      .nav-link-scan,
      .nav-link-tco {
        padding: 5px 8px;
        font-size: 11.5px;
      }

      .nav-cta {
        font-size: 11.5px;
        padding: 7px 12px;
      }

      .nav-tagline {
        display: none;
      }
    }