/* ==========================================================================
   header.css  —  Site navbar (shared across all pages)
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid transparent;
  transition: box-shadow var(--transition), border-color var(--transition),
              background var(--transition);
}
.site-header.scrolled {
  border-color: var(--border);
  box-shadow: var(--shadow-sm);
}

.header-inner {
  display: flex;
  align-items: center;
  gap: 20px;
  height: var(--header-h);
}

/* ------------------------------------------------------------------ Brand */
.brand { display: inline-flex; align-items: center; gap: 10px; }
.brand-logo { height: 46px; width: auto; }
.brand-name {
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.015em;
  line-height: 1;
  color: var(--primary-dark); /* fallback if background-clip unsupported */
  background: var(--primary-grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.brand-name span { color: var(--primary); }

/* ----------------------------------------------------------- Navigation */
.main-nav { flex: 1; display: flex; justify-content: center; }
.nav-list { display: flex; align-items: center; gap: 4px; }

.nav-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 9px 14px;
  border-radius: var(--r-sm);
  font-size: .94rem;
  font-weight: 500;
  color: var(--text);
  position: relative;
}
.nav-link:hover { color: var(--primary); }

.nav-link.active { color: var(--primary); font-weight: 600; }
.nav-link.active::after {
  content: "";
  position: absolute;
  left: 14px; right: 14px; bottom: 2px;
  height: 2px;
  border-radius: 2px;
  background: var(--primary);
}

.dd-toggle { font-family: inherit; }
.chev { width: 15px; height: 15px; transition: transform var(--transition); }

/* Dropdown */
.has-dropdown { position: relative; }
.dd-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 230px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
  padding: 8px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
  /* Use every pixel between the header and the bottom of the window. The
     column rules below are tuned so the list fits inside this without
     scrolling; the cap is only a last resort on a very short window. */
  max-height: calc(100vh - var(--header-h) - 24px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.has-dropdown.open .dd-menu { opacity: 1; visibility: visible; transform: none; }
.has-dropdown.open .chev { transform: rotate(180deg); }

/* Desktop: dropdowns also open on hover (kept click/tap for touch) */
@media (hover: hover) and (min-width: 861px) {
  .has-dropdown:hover .dd-menu { opacity: 1; visibility: visible; transform: none; }
  .has-dropdown:hover .chev { transform: rotate(180deg); }
}

/* Invisible bridge across the dead strip between a nav item and its panel.
   The nav item's box is only as tall as the link (~42px) and sits centred in a
   76px header, while the wide panels are position:fixed at header-h + 8px — so
   roughly 25px of the pointer's path belongs to neither, and :hover drops.

   It hangs off .has-dropdown rather than .dd-menu because the panel has
   overflow-y:auto, which clipped the previous bridge (a .dd-menu::before at
   top:-10px) out of existence. ::before also paints before .dd-menu, so where
   the two overlap the panel stays on top and its first row is still hoverable.

   Only present while the item is hovered, so it never swallows clicks on the
   page underneath. common.js adds a close delay on top of this, which is what
   covers a diagonal path out of the item's own width. */
@media (hover: hover) and (min-width: 861px) {
  /* Inside the header, directly under the item. Kept to the item's own width so
     it can never sit on top of the neighbouring nav links. */
  .has-dropdown::before {
    content: "";
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: calc(var(--header-h) / 2);
    display: none;
  }

  /* Below the header, full width. The panels are centred on the viewport, not on
     the item, so the pointer usually travels diagonally and leaves the item's
     own column almost immediately — a bridge only as wide as the item drops it
     over the page (measured: it lands on .hero around y=85). Nothing
     interactive lives in this 10px band, and it only exists while a dropdown is
     hovered, so spanning the full width here is safe.

     It starts 15px above the header's bottom edge rather than at it, because the
     nav items end there (a 42px link centred in a 76px header bottoms out at
     y=59) and the strip has to meet them — starting at the header's edge left a
     17px band where a diagonal run still fell through. Measured against the
     header's own contents: the tallest thing beside the nav is the 46px brand
     logo, which bottoms out at y=61, so this clears every control.

     position:fixed matches .dd-menu.dd-wide: .site-header's backdrop-filter
     makes it the containing block, so `top` is measured from the header's top.
     Fixed also keeps it out of scrollable overflow — an absolutely positioned
     full-width strip here would add a horizontal scrollbar. */
  .has-dropdown::after {
    content: "";
    position: fixed;
    top: calc(var(--header-h) - 15px);
    left: 0;
    right: 0;
    height: 25px;
    display: none;
  }

  .has-dropdown:hover::before,
  .has-dropdown:hover::after { display: block; }
}
.dd-menu a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--r-sm);
  font-size: .9rem;
  font-weight: 500;
  color: var(--text);
}
.dd-menu a:hover { background: var(--tint-purple); color: var(--primary); }

/* Icon shown beside each calculator/tool in the dropdown. */
.dd-menu .dd-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border-radius: 7px;
}
.dd-menu .dd-icon img {
  width: 15px;
  height: 15px;
  display: block;
}

/* Wide multi-column dropdown — both Calculators and Tools use it. */
.dd-menu.dd-wide {
  min-width: 470px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 4px;
}

/* Both wide panels are centred on the page rather than on their own nav item.
   Anchored at left:0 a 470–960px panel is dragged sideways with its link and
   ends up jammed against a viewport edge. Fixed positioning takes it out of
   the li's flow so it sits in the middle of the screen at every width and
   every column count, and the two menus line up with each other.

   (.site-header has a backdrop-filter, which makes it the containing block for
   fixed children — it spans the full viewport width, so 50% is still the middle
   of the screen, and `top` is measured from the header's own top.)

   Scoped to desktop: below 861px the dropdown becomes a static inline accordion
   and must keep position:static / transform:none. */
@media (min-width: 861px) {
  .dd-menu.dd-wide {
    position: fixed;
    top: calc(var(--header-h) + 8px);
    left: 50%;
    transform: translate(-50%, 8px);
  }
  .has-dropdown.open .dd-menu.dd-wide { transform: translate(-50%, 0); }
}
@media (hover: hover) and (min-width: 861px) {
  .has-dropdown:hover .dd-menu.dd-wide { transform: translate(-50%, 0); }
}

/* Only the Calculators list is long enough to earn extra columns. Thirty-six
   entries at two across would be eighteen rows — taller than most windows and
   the reason the panel used to need a scrollbar. Three columns from the moment
   the panel is centred, four once there is room, keeps every entry on screen. */
@media (min-width: 861px) {
  .dd-menu.dd-mega {
    min-width: 660px;
    grid-template-columns: repeat(3, 1fr);
  }
  /* Slightly tighter rows than the short Tools list needs — twelve rows of the
     default height would not fit a 768px-tall laptop screen. */
  .dd-menu.dd-mega a { padding: 8px 10px; }
  .dd-menu.dd-mega .dd-icon { width: 24px; height: 24px; }
}
@media (min-width: 1180px) {
  .dd-menu.dd-mega {
    min-width: 900px;
    grid-template-columns: repeat(4, 1fr);
  }
}

/* --------------------------------------------------------- Header actions */
.header-actions { display: flex; align-items: center; gap: 12px; }

.header-search {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 240px;
  padding: 9px 14px;
  border-radius: var(--r-pill);
  background: var(--bg-soft);
  border: 1px solid var(--border);
  color: var(--muted);
}
.header-search .micon { width: 17px; height: 17px; flex-shrink: 0; }
.header-search input {
  border: none;
  background: none;
  outline: none;
  width: 100%;
  font-family: inherit;
  font-size: .88rem;
  color: var(--heading);
}
.header-search input::placeholder { color: var(--muted); }

/* Round icon buttons */
.theme-toggle, .nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  transition: background var(--transition), transform var(--transition);
}
.theme-toggle {
  background: var(--bg-soft);
  border: 1px solid var(--border);
  color: var(--heading);
}
.theme-toggle:hover { transform: translateY(-1px); }
.theme-toggle .micon { width: 20px; height: 20px; }
/* show sun in light mode, moon in dark mode */
.icon-moon { display: none; }
[data-theme="dark"] .icon-sun  { display: none; }
[data-theme="dark"] .icon-moon { display: inline-block; }

/* Hamburger — hidden on desktop */
.nav-toggle { background: var(--bg-soft); border: 1px solid var(--border); color: var(--heading); display: none; }
.nav-toggle .micon { width: 22px; height: 22px; }
.nav-close { display: none; }
.nav-overlay { display: none; }

/* =============================== RESPONSIVE ============================== */
@media (max-width: 992px) {
  .header-search { width: 180px; }
}

@media (max-width: 860px) {
  .header-search { display: none; }
  .nav-toggle { display: inline-flex; }
  .header-actions { margin-left: auto; }   /* push actions right once nav is a drawer */

  /* The drawer lives inside .site-header, and `position: sticky + z-index`
     makes the header its own stacking context — so the drawer can never rise
     above a sibling that outranks the header, no matter how high its own
     z-index is. The header itself has to clear the overlay, otherwise the
     overlay sits on top of the open drawer and swallows every tap. */
  .site-header { z-index: 130; }

  /* Slide-in mobile nav */
  .main-nav {
    display: block;                         /* not the centered desktop flex */
    position: fixed;
    top: 0; right: 0;
    height: 100dvh;
    width: min(320px, 84vw);
    background: var(--card);
    box-shadow: var(--shadow-lg);
    padding: 76px 20px 24px;
    transform: translateX(105%);
    transition: transform .3s ease;
    z-index: 120;
    margin: 0;
    overflow-y: auto;
  }
  .main-nav.open { transform: none; }

  .nav-list { flex-direction: column; align-items: stretch; gap: 4px; }
  .nav-link { padding: 12px 14px; font-size: 1rem; }
  .nav-link.active::after { display: none; }

  .nav-close {
    display: inline-flex;
    position: absolute;
    top: 18px; right: 18px;
    width: 40px; height: 40px;
    align-items: center; justify-content: center;
    border-radius: 50%;
    background: var(--bg-soft);
    color: var(--heading);
  }
  .nav-close .micon { width: 20px; height: 20px; }

  /* Dropdown becomes inline accordion on mobile */
  .dd-menu {
    position: static;
    opacity: 1; visibility: visible; transform: none;
    box-shadow: none;
    border: none;
    background: var(--bg-soft);
    max-height: 0;
    padding: 0 8px;
    overflow: hidden;
    transition: max-height var(--transition), padding var(--transition);
  }
  .has-dropdown.open .dd-menu { max-height: 320px; padding: 8px; overflow-y: auto; }
  .dd-menu.dd-wide { min-width: 0; }
  .has-dropdown.open .dd-menu.dd-wide { max-height: 520px; }

  .nav-overlay {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(15, 12, 30, .5);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition), visibility var(--transition);
    /* Below the header (130) so it dims the page but never the drawer;
       still far above any page content, which tops out around z-index 4. */
    z-index: 110;
  }
  .nav-overlay.show { opacity: 1; visibility: visible; }
}

@media (max-width: 420px) {
  .brand-name { font-size: 1.15rem; }
  .header-actions { gap: 8px; }
}