/* ════════════════════════════════════════════════════════════════
   Refinery.co · Shared nav v2 (CR #34)
   Strictly scoped — only styles nav elements. Uses the page's
   existing tokens (--black, --cream, --orange, --rule, --nav-h,
   --space-xl) declared in each page's inline <style>.
   ════════════════════════════════════════════════════════════════ */

/* ─── Nav-only locals ─────────────────────────────── */
:root {
  /* easings */
  --nav-t-soft: cubic-bezier(0.34, 1.56, 0.64, 1);
  --nav-t-flat: cubic-bezier(0.4, 0, 0.2, 1);
  /* font fallback chains (preserves existing inline @font-face fallbacks) */
  --nav-font-body: 'Urbanist', 'Urbanist Fallback', Arial, sans-serif;
  --nav-font-display: 'DM Serif Display', 'DM Serif Display Fallback', Georgia, serif;
  --nav-font-th: 'Noto Sans Thai', 'Urbanist', sans-serif;
  --nav-menu-bg: var(--black);
  --nav-menu-shadow: 0 16px 40px rgba(0, 0, 0, 0.38);
}

/* ════════════════ SKIP LINK (a11y · P0 WP-CL-VW-001) ════════════════
   Visually hidden until focused — first focusable element on every page.
   Jumps keyboard/screen-reader users straight to <main id="main-content">. */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 300;
  padding: 10px 18px;
  background: var(--orange, #C94A1A);
  color: var(--cream, #F0ECE4);
  font-family: var(--nav-font-body);
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  border-radius: 0 0 6px 0;
}
.skip-link:focus {
  left: 0;
  outline: 2px solid var(--cream, #F0ECE4);
  outline-offset: 2px;
}

/* ════════════════ NAV ════════════════ */
.nav {
  /* override existing inline nav rules — use Grid */
  display: grid !important;
  grid-template-columns: 220px 1fr 360px;
  grid-template-areas: "brand links tools";
  align-items: center;
  /* sticky + !important · BF-Sticky-Nav-2026-05-30 — wins against any page inline override.
     NOTE: pages that set `overflow-x: hidden` on <body> break sticky descendants —
     overflow trap must live on <html> only (per-page inline; nav.css can't touch html/body). */
  position: -webkit-sticky !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 200 !important;
  height: var(--nav-h, 56px);
  padding: 0 var(--space-xl, 36px);
  background: var(--black) !important;
  border-bottom: 1px solid var(--rule);
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  view-transition-name: refinery-nav;
}
.nav::after {
  content: ""; position: absolute; bottom: -1px; left: var(--space-xl, 36px);
  width: 100px; height: 1px;
  background: linear-gradient(90deg, var(--orange), transparent);
}

/* ─── Wordmark ─── */
.nav-wordmark {
  grid-area: brand;
  font-family: var(--nav-font-display) !important;
  font-size: 22px;
  letter-spacing: -0.02em;
  color: var(--cream);
  width: 140px;
  white-space: nowrap;
  text-decoration: none;
}
.nav-wordmark .dot { color: var(--orange); }

/* ─── Nav links ─── */
.nav-links {
  grid-area: links;
  position: relative;
  display: flex;
  justify-content: center;
  gap: 0 !important;
  margin: 0; padding: 0;
  list-style: none;
}
.nav-links li { display: block; }
.nav-links a {
  display: block;
  width: 130px;
  text-align: center;
  padding: 18px 0 !important;
  font-family: var(--nav-font-body) !important;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cream-dim);
  transition: color 140ms var(--nav-t-flat);
  text-decoration: none;
}
.nav-links a:hover { color: var(--cream); }
.nav-links a.active { color: var(--cream); }

/* KILL the legacy orange dot indicator — replaced by sliding underline */
.nav-links a.active::before { content: none !important; display: none !important; }

/* ─── Sliding underline indicator ─── */
.nav-indicator {
  position: absolute;
  bottom: -1px;
  height: 2px;
  background: var(--orange);
  transition:
    left .42s var(--nav-t-soft),
    width .42s var(--nav-t-soft);
  pointer-events: none;
}

/* ════════════════ TOOLS slot ════════════════ */
.nav-tools {
  grid-area: tools;
  display: flex; align-items: center; justify-content: flex-end;
  gap: 10px;
}

/* ─── Pill switches (lang + theme) ─── */
.pill {
  display: inline-flex; align-items: center; justify-content: center;
  height: 30px;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.pill:focus-visible {
  outline: 2px solid var(--orange); outline-offset: 3px; border-radius: 999px;
}
.pill-track {
  position: relative; display: inline-block;
  width: 80px; height: 30px;
  border: 1px solid var(--cream-dim);
  border-radius: 999px;
  background: transparent;
  overflow: hidden;
  transition: border-color 220ms var(--nav-t-flat);
}
.pill:hover .pill-track { border-color: var(--cream); }

.pill-thumb {
  position: absolute; top: 2px; left: 2px;
  width: calc(50% - 2px); height: calc(100% - 4px);
  background: var(--cream);
  border-radius: 999px;
  transform: translate3d(0, 0, 0);
  transition: transform .42s var(--nav-t-soft);
  z-index: 2;
}
.pill:active .pill-thumb { transition: transform 90ms ease; transform: translate3d(0,0,0) scale(0.92); }

.pill-zone {
  position: absolute; top: 0; bottom: 0;
  width: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--nav-font-body) !important;
  font-size: 10px; font-weight: 700; letter-spacing: 0.14em;
  color: var(--cream-dim);
  transition: color .26s var(--nav-t-flat);
  pointer-events: none; z-index: 3;
}
.pill-zone-a { left: 0; }
.pill-zone-b { right: 0; }
.pill-zone svg { width: 14px; height: 14px; display: block; }

/* Default: A active (EN / sun) — inverted color so it reads on the thumb */
.pill .pill-zone-a { color: var(--black); }
.pill .pill-zone-b { color: var(--cream-dim); }

/* Toggled states: thumb slides 100% width to the right */
html[lang="th"] .pill-lang .pill-thumb         { transform: translate3d(100%, 0, 0); }
html[lang="th"] .pill-lang:active .pill-thumb  { transform: translate3d(100%, 0, 0) scale(0.92); }
html[lang="th"] .pill-lang .pill-zone-a        { color: var(--cream-dim); }
html[lang="th"] .pill-lang .pill-zone-b        { color: var(--black); }

html[data-theme="dark"] .pill-theme .pill-thumb         { transform: translate3d(100%, 0, 0); }
html[data-theme="dark"] .pill-theme:active .pill-thumb  { transform: translate3d(100%, 0, 0) scale(0.92); }
html[data-theme="dark"] .pill-theme .pill-zone-a        { color: var(--cream-dim); }
html[data-theme="dark"] .pill-theme .pill-zone-b        { color: var(--black); }

/* ─── CTA button ─── */
.nav-cta {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 150px; height: 36px;
  padding: 0 18px;
  font-family: var(--nav-font-body) !important;
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--orange);
  border: 1px solid var(--orange-rule);
  border-radius: 10px;
  background: transparent;
  text-decoration: none;
  transition: background 140ms var(--nav-t-flat), border-color 140ms var(--nav-t-flat);
}
.nav-cta:hover { background: rgba(201, 74, 26, 0.08); border-color: var(--orange); }
html[lang="th"] .nav-cta { font-family: var(--nav-font-th); letter-spacing: 0.08em; }

/* ─── nav-status (live indicator on get_refined.html) ─── */
.nav-status {
  display: inline-flex; align-items: center; gap: 8px;
  min-width: 150px; height: 36px;
  padding: 0 18px;
  font-family: var(--nav-font-body) !important;
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--cream-dim);
  border: 1px solid var(--rule);
  border-radius: 10px;
  background: transparent;
  white-space: nowrap;
}
.nav-status-dot {
  width: 6px; height: 6px;
  border-radius: 999px;
  background: var(--orange);
  box-shadow: 0 0 0 0 rgba(201, 74, 26, 0.5);
  animation: nav-status-pulse 1.8s ease-out infinite;
}
@keyframes nav-status-pulse {
  0%   { box-shadow: 0 0 0 0  rgba(201, 74, 26, 0.5); }
  100% { box-shadow: 0 0 0 10px rgba(201, 74, 26, 0); }
}
html[lang="th"] .nav-status { font-family: var(--nav-font-th); letter-spacing: 0.08em; }

/* ════════════════ Products dropdown ════════════════ */
.nav-dropdown { position: relative; display: flex; }
.nav-dropbtn {
  display: inline-flex; align-items: center; gap: 6px;
  width: 130px; justify-content: center;
  padding: 18px 0;
  background: transparent; border: 0; cursor: pointer;
  font-family: var(--nav-font-body) !important;
  font-size: 11px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--cream-dim);
  transition: color 140ms var(--nav-t-flat);
}
.nav-dropbtn:hover,
.nav-dropbtn.active-parent,
.nav-dropbtn[aria-expanded="true"] { color: var(--cream); }
.nav-dropbtn:focus-visible { outline: 2px solid var(--orange); outline-offset: -4px; }
.nav-chev { transition: transform 200ms var(--nav-t-flat); }
.nav-dropbtn[aria-expanded="true"] .nav-chev { transform: rotate(180deg); }

.nav-menu {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(6px);
  min-width: 248px;
  background: var(--nav-menu-bg);
  border: 1px solid var(--teal-border);
  box-shadow: var(--nav-menu-shadow);
  border-radius: 10px;
  padding: 6px;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 160ms var(--nav-t-flat), transform 200ms var(--nav-t-soft), visibility 0s linear 160ms;
  z-index: 210;
}
.nav-dropdown:hover .nav-menu,
.nav-menu.open {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateX(-50%) translateY(6px);
  transition: opacity 160ms var(--nav-t-flat), transform 200ms var(--nav-t-soft);
}
.nav-menu a {
  display: flex; flex-direction: column; gap: 2px;
  width: auto; text-align: left;
  padding: 10px 12px !important;
  border-radius: 7px;
  text-transform: none; letter-spacing: 0;
}
.nav-menu a:hover { background: var(--teal-bg); }
.nav-menu a b {
  font-family: var(--nav-font-body) !important;
  font-size: 13px; font-weight: 600; color: var(--cream);
}
.nav-menu a i {
  font-style: normal; font-size: 11px; color: var(--cream-dim);
}
.nav-menu-alloy b { color: var(--orange); }
.nav-new {
  font-size: 8px; font-weight: 700; letter-spacing: 0.12em;
  padding: 2px 6px; margin-left: 6px; border-radius: 4px;
  background: rgba(201, 74, 26, 0.16); color: var(--orange);
  vertical-align: middle;
}
.nav-menu-sep { display: block; height: 1px; margin: 4px 8px; background: var(--rule); }
.nav-drawer-alloy { color: var(--orange) !important; }

/* ════════════════ Mobile (≤900px) ════════════════ */
.nav-hamburger {
  display: none;
  grid-area: tools;
  justify-self: end;
  width: 40px; height: 40px;
  flex-direction: column;
  justify-content: center; align-items: center;
  gap: 5px;
  background: transparent; border: 0; padding: 0;
  cursor: pointer;
}
.nav-hamburger:focus-visible {
  outline: 2px solid var(--orange); outline-offset: 2px; border-radius: 6px;
}
.nav-hamburger span {
  display: block; width: 22px; height: 2px;
  background: var(--cream);
  transition: transform .28s var(--nav-t-soft), opacity .18s var(--nav-t-flat);
}
.nav-hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav-drawer {
  display: none;
  position: fixed;
  top: var(--nav-h, 56px); left: 0; right: 0;
  background: var(--black);
  border-bottom: 1px solid var(--rule);
  padding: 24px var(--space-xl, 36px) 32px;
  z-index: 199;
  flex-direction: column; gap: 0;
  transform: translateY(-12px); opacity: 0;
  transition: transform .32s var(--nav-t-soft), opacity .26s var(--nav-t-flat);
}
.nav-drawer.open { display: flex; transform: translateY(0); opacity: 1; }
.nav-drawer a {
  display: block; padding: 16px 0;
  border-bottom: 1px solid var(--rule);
  font-family: var(--nav-font-body) !important;
  font-size: 13px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--cream-dim);
  text-decoration: none;
}
.nav-drawer a.active { color: var(--cream); }
.nav-drawer a:last-of-type { color: var(--orange); border-bottom: 0; margin-top: 12px; }

/* ════════════════ Compact desktop · foldables & tablets (901–1200px) ════════════════
   BF-Foldable-2026-05-30 (#35) — Between the 900px hamburger breakpoint and full
   desktop, the fixed 220px/360px columns + 4×130px links need ~1172px and
   overflow on foldables/tablets, clipping the .nav-cta off the right edge.
   Make the bar fluid in this range so everything fits WITHOUT collapsing to
   the hamburger — the drawer doesn't carry the lang/theme pills, so collapsing
   early would hide them on every tablet/foldable. */
@media (min-width: 901px) and (max-width: 1320px) {
  /* Fluid/compact tier. Upper bound raised 1200 -> 1320 when the 5th nav link
     (About, CR #26) landed: five fixed 130px links + nav padding need a
     viewport >= ~1302px, so below that width the links flex to content here
     instead of overflowing (extends the BF-Foldable fix to 5 links). */
  .nav {
    grid-template-columns: auto 1fr auto;
    padding: 0 20px;
    column-gap: 12px;
  }
  .nav-wordmark { width: auto; }
  .nav-links a,
  .nav-dropbtn {
    width: auto;
    padding: 18px 13px !important;
    letter-spacing: 0.1em;
  }
  .nav-tools { gap: 8px; }
  .nav-cta { min-width: 0; padding: 0 14px; }
}

@media (max-width: 900px) {
  .nav { grid-template-columns: auto 1fr auto; grid-template-areas: "brand . tools"; }
  .nav-links, .nav-tools { display: none; }
  .nav-hamburger { display: flex; }
}

/* ════════════════ View Transitions API ════════════════ */
@view-transition { navigation: auto; }

::view-transition-old(root) {
  animation: refinery-out .35s var(--nav-t-flat) forwards;
}
::view-transition-new(root) {
  animation: refinery-in .42s var(--nav-t-soft) .05s backwards;
}
@keyframes refinery-out {
  to { opacity: 0; transform: translateY(-6px); }
}
@keyframes refinery-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
::view-transition-old(refinery-nav),
::view-transition-new(refinery-nav) {
  animation: none;
  mix-blend-mode: normal;
}

/* Alloy theme sync: during a theme reveal we drive a circular clip manually — kill the default fade. */
html.alloy-theme-reveal::view-transition-old(root),
html.alloy-theme-reveal::view-transition-new(root) {
  animation: none;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .nav-indicator, .pill-thumb, .pill-zone,
  .pill-track, .nav-cta, .nav-hamburger span, .nav-drawer,
  .nav-chev,
  .nav-links a {
    transition-duration: 0ms !important;
    animation-duration: 0ms !important;
  }
}

/* ── Cohesive top bar + product-menu dots (v0.1.43) ── */
.nav::after{background:linear-gradient(90deg,#C94A1A,transparent)!important;}
.nav-wordmark .dot{color:#C94A1A!important;}
.nav-indicator{background:#C94A1A!important;}
.nav-cta{color:#C94A1A!important;border-color:rgba(201,74,26,0.32)!important;}
.nav-cta:hover{background:rgba(201,74,26,0.08)!important;border-color:#C94A1A!important;}
.nav-menu a:hover{background:rgba(201,74,26,0.06)!important;}
.nav-menu-alloy b{color:inherit!important;}
.nav-new{background:rgba(201,74,26,0.16)!important;color:#C94A1A!important;}
.nav-menu a b{display:flex;align-items:center;gap:9px;}
.nm-dot{width:7px;height:7px;border-radius:50%;display:inline-block;flex:none;}
