/* ---------- Header / nav ---------- */
.site-header {
  position: fixed;
  top: 1rem;
  /* Centered via left:0;right:0;margin-inline:auto rather than the more
     common left:50%;transform:translateX(-50%) — deliberately, not a style
     preference. #mobile-nav is a `position:fixed` DESCENDANT of this header
     (site-header.php), and any transform on an ancestor becomes that
     descendant's containing block per spec. With translateX(-50%) always
     applied here, #mobile-nav's `right:0` was resolving against THIS box's
     right edge (itself inset ~1rem short of the real viewport edge) instead
     of the viewport — a permanent gap down the drawer's right side that no
     amount of z-index/positioning on the drawer itself could fix. Only a
     transform-free base state removes that containing-block side effect;
     the width is already capped by width below, so this centers identically. */
  left: 0;
  right: 0;
  margin-inline: auto;
  z-index: 100;
  width: min(100rem, calc(100% - 2rem));
  background: rgba(250,247,242,0.95);
  backdrop-filter: blur(22px);
  border: 1px solid rgba(27,27,27,0.08);
  border-radius: 0.3rem;
  box-shadow: 0 1rem 2.125rem rgba(17,14,12,0.12);
  transition: transform 0.28s ease, background 0.28s ease, border-color 0.28s ease, box-shadow 0.28s ease;
}
.site-header .a-wrap {
  padding-right: clamp(0.5rem, 1.6vw, 0.75rem);
}
/* Only translateY now — the horizontal centering above no longer goes
   through transform, so hiding/showing on scroll doesn't need an X
   component either (and re-introducing one here would bring back the same
   containing-block bug the comment above describes, only intermittently). */
.site-header.is-hidden { transform: translateY(-120%); }
.site-header.is-visible { transform: translateY(0); }

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 74px;
  gap: 1.5rem;
  position: relative;
}
.logo { display: flex; align-items: center; }
.logo-img { height: 3rem; width: auto; }
.logo-word { display: flex; flex-direction: column; line-height: 1; }
.logo-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.logo-sub {
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 0.2em;
}
.site-nav { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2; }
.site-nav ul { display: flex; gap: 1.75rem; }
.site-nav a {
  font-size: var(--small);
  font-weight: 500;
  color: var(--ink);
  padding: 0.35em 0;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.site-nav a:hover,
.site-nav a:focus-visible { color: var(--terracotta); border-color: var(--terracotta); }
.header-actions { display: flex; align-items: center; gap: 0.85rem; }

.btn-header-cta {
  background: var(--terracotta);
  color: #fff;
  border: 1px solid transparent;
  border-radius: var(--radius);
  padding: 0.95em 1.55em;
    /* box-shadow removed for flat style */
}
.btn-header-cta:hover {
  background: var(--terracotta-hover);
  border-color: transparent;
    /* box-shadow removed for flat style */
}

/* Secondary tools (Duty Calculator / Create Order) as a nav dropdown item - matches
   the typography/hover language of every other .site-nav link instead of reading as
   a separate bolted-on utility. */
.nav-dropdown { position: relative; }
.nav-dropdown-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  background: none;
  border: none;
  padding: 0.35em 0;
  border-bottom: 2px solid transparent;
  font-family: inherit;
  font-size: var(--small);
  font-weight: 500;
  color: var(--ink);
  transition: color 0.2s ease, border-color 0.2s ease;
}
.nav-dropdown-trigger:hover,
.nav-dropdown-trigger:focus-visible,
.nav-dropdown-trigger[aria-expanded="true"] {
  color: var(--terracotta);
  border-color: var(--terracotta);
}
.nav-dropdown-caret {
  font-size: 0.75em;
  transition: transform 0.2s ease;
}
.nav-dropdown-trigger[aria-expanded="true"] .nav-dropdown-caret { transform: rotate(180deg); }

/* Shadow alone for elevation, no border - a 1px border plus a soft wide shadow on
   the same element is an indecisive "ghost card" combo. Pick one. */
/* `.site-nav .nav-dropdown-menu`, not a bare `.nav-dropdown-menu`. This <ul>
   is a descendant of .site-nav, so `.site-nav ul` above matches it too - and
   at (0,1,1) that selector OUTWEIGHS a single class at (0,1,0), which meant
   its `gap: 1.75rem` (correct for spacing top-level nav links) won here and
   pushed 28px of dead space between every menu row. Two classes take it back
   at (0,2,0) without touching the base rule, which the top-level links still
   need. Same reason `.site-nav .nav-dropdown-item` is qualified below. */
.site-nav .nav-dropdown-menu {
  position: absolute;
  top: calc(100% + 0.9rem);
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  background: var(--bg);
  border-radius: var(--radius);
  box-shadow: 0 1.25rem 3rem rgba(17, 14, 12, 0.16);
  padding: 0.4rem;
  display: flex;
  /* One item per row at EVERY breakpoint. This was a row that only became a
     column under 640px - which never fired, because .site-nav (and with it
     this whole menu) is display:none from 1080px down, so the menu was in
     practice always horizontal. Three tools side by side made a wide, flat
     slab that read as a toolbar rather than a menu, and each new tool
     widened it further. */
  flex-direction: column;
  gap: 0.15rem;
  /* Wide enough that the longest label ("Estimate import duty" plus its
     icon) sits on one line. The items are already white-space:nowrap, so
     without this the menu would size to content and jump in width as the
     label set changes; with it, the width is stable and set by the design
     rather than by whichever string happens to be longest. */
  min-width: 15rem;
  z-index: 5;
}
/* Small gap above the menu (rather than a hard edge against the trigger) still
   needs to stay hoverable - see script.js's mouseleave delay, which covers the
   gap so moving the cursor from trigger to menu doesn't close it prematurely. */
.nav-dropdown-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  white-space: nowrap;
  background: transparent;
  border: none;
  padding: 0.6rem 0.85rem;
  border-radius: var(--radius);
  font-size: var(--small);
  font-weight: 500;
  color: var(--ink);
  transition: background 0.15s ease, color 0.15s ease;
}
/* Full-width rows, so the hover tint spans the menu instead of hugging the
   label - in a column the ragged right edge of a shrink-to-fit highlight is
   what makes a stacked list look unfinished. */
.site-nav .nav-dropdown-item {
  width: 100%;
  justify-content: flex-start;
  text-align: left;
}
.nav-dropdown-item i { font-size: 1.05rem; }
.nav-dropdown-item:hover,
.nav-dropdown-item:focus-visible {
  background: color-mix(in srgb, var(--terracotta) 8%, transparent);
  color: var(--terracotta);
}

/* ---------- Account menu (logged-in only) ----------
 * Same interaction shape as .nav-dropdown above (hover-open, click-toggle,
 * outside-click/Escape-close via initAccountMenu() in chrome.js) - kept as
 * its own rule set since an avatar trigger and a name+logout dropdown don't
 * share markup with the Tools menu. */
.account-menu { position: relative; }
.account-trigger {
  display: flex;
  background: none;
  border: none;
  padding: 0;
  border-radius: 50%;
}
.account-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: var(--terracotta);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1;
}
.account-trigger:hover .account-avatar,
.account-trigger[aria-expanded="true"] .account-avatar {
  background: var(--terracotta-hover);
}
.account-menu-dropdown {
  position: absolute;
  top: calc(100% + 0.9rem);
  right: 0;
  width: max-content;
  min-width: 11rem;
  background: var(--bg);
  border-radius: var(--radius);
  box-shadow: 0 1.25rem 3rem rgba(17, 14, 12, 0.16);
  padding: 0.85rem 1rem;
  z-index: 5;
}
.account-menu-name {
  font-size: var(--small);
  font-weight: 500;
  color: var(--ink);
  margin: 0 0 0.6rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.account-menu-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  font-size: var(--small);
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 0.5rem;
}
.account-menu-link:hover { color: var(--terracotta); }
.account-menu-link:hover .btn-arrow { transform: translateX(0.2em); }
.account-menu-logout {
  display: block;
  font-size: var(--small);
  font-weight: 500;
  color: var(--terracotta);
}
.account-menu-logout:hover { text-decoration: underline; }

.hamburger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: none;
  border: none;
  padding: 0;
  color: var(--ink);
  font-size: 1.5rem;
}

/* Out of the flex flow, sitting in the floating header's own band directly
   over the hamburger it stands in for (chrome.js swaps that icon to an X as
   well, and the drawer covers it). Absolute — NOT sticky or in-flow — is
   what keeps it there while .mobile-nav-body scrolls underneath, and what
   keeps it out of the content's top spacing, which is the header's business
   (see --asta-header-clearance below), not the button's. */
.mobile-nav .mobile-nav-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 1;
}

.mobile-nav {
  position: fixed;
  inset: 0 0 0 auto;
  width: min(320px, 85vw);
  height: 100dvh;
  background: var(--bg);
  z-index: 90;
  /* The top padding clears the FLOATING HEADER, which paints over this
     drawer (z-index 100 vs 90) — it is not spacing around the close button.
     .site-header is `top: 1rem` over a 74px min-height content row plus its
     1px borders, so its bottom edge lands at ~92px — the first two terms
     below are that edge and are NOT negotiable; only the third is spacing.
     Anything less than the first two renders "Home" behind the header card.
     Written as a calc naming its three parts because the flat `6rem` it
     replaces looked arbitrary enough to "tidy up" — which is exactly how
     Home ended up hidden behind the header once already. Change
     .header-inner's min-height and the 76px must move with it. */
  --asta-header-clearance: calc(1rem + 76px + 1.5rem);
  padding: var(--asta-header-clearance) 1.5rem 2rem;
  transform: translateX(100%);
  transition: transform 0.3s ease;
  display: flex;
  flex-direction: column;
}
/* min-height:0 is the load-bearing line, not overflow-y — a flex item's
   default "min-height: auto" refuses to shrink below its content, so the box
   would grow past the drawer and never overflow anything to scroll. With it,
   the body takes the leftover height and scrolls, which is what keeps "Past
   Orders" (the last item, and only present for signed-in visitors) reachable
   on a short viewport. overscroll-behavior stops a scroll that reaches the
   end here from chaining to the page behind the drawer. */
.mobile-nav-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  /* Styling a scrollbar AT ALL is what opts the box out of the platform's
     overlay scrollbar and into a classic, always-painted one — an overlay
     bar fades out a moment after scrolling stops, leaving nothing on screen
     to say the menu continues below the fold. This pair is the standard
     path (Chrome 121+, Firefox); the ::-webkit- rules below are the same
     intent for Safari before 18.2, which doesn't support these two.
     Do not expect both to apply at once: once `scrollbar-width` or
     `scrollbar-color` is set, Chrome ignores ::-webkit-scrollbar entirely,
     so the widths below are Safari's only — hence the two not matching. */
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--ink) 25%, transparent) color-mix(in srgb, var(--ink) 6%, transparent);
}
/* `overflow-y: auto` still gates all of this on there actually being an
   overflow, so a drawer whose contents fit shows no bar and no empty track —
   the indicator appears exactly when there is something to scroll to.
   Touch browsers are the one place this cannot be honoured: iOS/Android
   scrollbars are overlay-only and ignore both mechanisms, so on a phone the
   bar still appears only while a drag is in progress. */
.mobile-nav-body::-webkit-scrollbar {
  width: 6px;
}
.mobile-nav-body::-webkit-scrollbar-track {
  background: color-mix(in srgb, var(--ink) 6%, transparent);
  border-radius: 3px;
}
.mobile-nav-body::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--ink) 25%, transparent);
  border-radius: 3px;
}
.mobile-nav-body::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--ink) 40%, transparent);
}
.mobile-nav.is-open { transform: translateX(0); }
.mobile-nav ul { display: flex; flex-direction: column; gap: 1.25rem; }
.mobile-nav a { font-size: 1.1rem; font-weight: 500; }
.mobile-nav-tools { display: flex; flex-direction: column; gap: 0.85rem; margin-top: 0.5rem; }
.mobile-nav-tools button {
  text-align: left;
  background: transparent;
  border: none;
  padding: 0;
  font-size: var(--small);
  font-weight: 500;
  color: var(--muted);
}
.mobile-nav-tools button:hover { color: var(--terracotta); }

.mobile-nav-account {
  margin-top: 0.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
}
.mobile-nav-account-name { font-size: var(--small); color: var(--muted); margin: 0 0 0.6rem; }
.mobile-nav-account a { display: block; font-size: var(--small); font-weight: 500; }
.mobile-nav-account-link { display: inline-flex; align-items: center; gap: 0.35em; color: var(--ink); margin-bottom: 0.6rem; }
.mobile-nav-account-link:hover { color: var(--terracotta); }
.mobile-nav-account-link:hover .btn-arrow { transform: translateX(0.2em); }
.mobile-nav-account-logout { color: var(--terracotta); }

/* 768px used to be the cutoff here, but the desktop nav's 6 links + logo +
   CTA don't actually fit down to 768px — "Why Us" starts wrapping onto 2
   lines around ~1060px (measured directly, varies slightly by font
   rendering). 1080px gives it margin instead of matching that exactly. */
@media (max-width: 1080px) {
  .site-nav, .header-actions .btn-primary, .account-menu { display: none; }
  /* Duplicated inside #mobile-nav - hidden here so it doesn't sit next to the
     hamburger with nowhere obvious to go. Note this breakpoint is 1080px, not
     the static prototype's 768px: the account menu needs the extra room. */
  .header-auth-link { display: none; }
  .hamburger { display: flex; }
}