/* ============================================================
   NAV / WORK DROPDOWN — shared component
   ============================================================
   Extracted from sandbox/nav-component.html (same version used
   inline on index.html). Load AFTER styles.css so it overrides
   the legacy nav rules still present there.

   Markup contract:
   .site-header > .header-inner
     ├─ a.header-logo
     ├─ nav.nav-work#nav-work
     │    ├─ button.nav-trigger#nav-trigger (+ .nav-trigger-chevron svg)
     │    └─ .nav-dropdown#nav-dropdown > .nav-items-list > a.nav-item[data-theme]
     └─ .header-disco > a.disco-pill (canvas + .lbl)
   Requires: lucide icons script + nav interaction JS (js/nav.js).
   ============================================================ */

/* ── Theme color scales (used by dropdown rings + icon accordion) ── */
:root {
  /* Crimson (Banking Products) */
  --crimson-1: #38040E;
  --crimson-2: #640D14;
  --crimson-3: #800E13;
  --crimson-4: #AD2831;

  /* Rust (Website Redesign) */
  --rust-1: #492109;
  --rust-2: #924311;
  --rust-3: #C95C18;
  --rust-4: #E7732D;

  /* Gold (UX Research) */
  --gold-1: #261B03;
  --gold-2: #725108;
  --gold-3: #D2940F;
  --gold-4: #EFAF21;

  /* Teal (AI Products) */
  --teal-1: #022127;
  --teal-2: #03303A;
  --teal-3: #055061;
  --teal-4: #076A7F;

  --radius-pill: 100px;

  /* Dropdown */
  --dropdown-gap: 8px;
  --dropdown-radius: 9px;
  --dropdown-shadow: 0 8px 32px rgba(42, 36, 32, 0.10),
                     0 2px  8px rgba(42, 36, 32, 0.06);
}

/* ── Header shell overrides ── */
.site-header { border-bottom: none; }

/* Match index.html's header geometry exactly (1440px, no gap)
   so the nav doesn't shift when switching pages. */
.header-inner {
  max-width: 1440px;
  gap: 0;
  position: relative;
  z-index: 1;
}

.header-logo img,
.header-logo .header-logo-svg {
  width: 44px;
  height: 44px;
  display: block;
}
.header-logo .header-logo-svg {
  overflow: visible;   /* let the outer ring breathe during the ripple */
}

/* ── Logo ring reveal (on page load) ───────────────────────────
   When you land on a case-study page, the logo rings appear
   one at a time, inside-out: the bright innermost ring fades in
   first, then each ring outward — the theme colors bloom from
   the DG mark. Staggered like the homepage card-frame reveal.
   Requires the logo SVG inlined with .lr-1…4 ring classes; each
   ring keeps its own stroke color, so this one keyframe serves
   every theme variant. */
@keyframes logo-ring-reveal {
  from { opacity: 0; }
}

/* inside-out: lr-4 (innermost/brightest) first → lr-1 (outermost) last */
.header-logo .lr-4 { animation: logo-ring-reveal 0.25s ease both 0.15s, lr-idle 0s; }
.header-logo .lr-3 { animation: logo-ring-reveal 0.25s ease both 0.23s, lr-idle 0s; }
.header-logo .lr-2 { animation: logo-ring-reveal 0.25s ease both 0.31s, lr-idle 0s; }
.header-logo .lr-1 { animation: logo-ring-reveal 0.25s ease both 0.39s, lr-idle 0s; }

/* ── Logo hover: the reveal replays (2026-09-09) ────────────────
   Hovering the DG resets the rings and runs the same bloom again,
   inside-out at the load timing (250ms a ring, 80ms apart). It rides
   a SECOND animation slot: slot 1 is the load reveal above, slot 2 is
   the empty lr-idle at rest and lr-replay (the same single keyframe)
   on hover. Leaving only swaps slot 2 back, so the load reveal is
   never restarted, and `both` fill holds each ring at 0 through its
   delay, which is the reset. Replaces the 75% opacity dim that
   styles.css used to apply (Daniel: "it just loses 50% of its
   opacity"). Chosen from sandbox/logo-hover/index.html (D); not a
   spin, which is settled: spinning says "this plays", the logo goes
   Home. index.html carries its own copy of this block (it does not
   load this file). Reduced motion: the rule below kills both slots. */
@keyframes lr-idle { }
@keyframes lr-replay { from { opacity: 0; } }
.header-logo:hover { opacity: 1; }   /* overrides styles.css's dim; the rings are the feedback */
.header-logo:hover .lr-4 { animation: logo-ring-reveal 0.25s ease both 0.15s, lr-replay 0.25s ease both 0s; }
.header-logo:hover .lr-3 { animation: logo-ring-reveal 0.25s ease both 0.23s, lr-replay 0.25s ease both .08s; }
.header-logo:hover .lr-2 { animation: logo-ring-reveal 0.25s ease both 0.31s, lr-replay 0.25s ease both .16s; }
.header-logo:hover .lr-1 { animation: logo-ring-reveal 0.25s ease both 0.39s, lr-replay 0.25s ease both .24s; }

@media (prefers-reduced-motion: reduce) {
  .header-logo .lr { animation: none !important; }
}

/* ── Composite hover zone ── */
.nav-work {
  position: relative;
  justify-self: center;
  /* Equal top/bottom padding keeps the trigger visually centred
     while still bridging the hover gap to the dropdown. */
  padding-top: var(--dropdown-gap);
  padding-bottom: var(--dropdown-gap);
}

/* ── Trigger pill ── */
.nav-trigger {
  position: relative;   /* anchors the ::before hit-area extension */
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 400;
  letter-spacing: 0.10em;
  color: var(--text-primary);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: 9px 20px 9px 22px;
  /* pointer, not default: on touch this button IS the control (2026-09-11) */
  cursor: pointer;
  white-space: nowrap;
  transition:
    background   0.18s ease,
    border-color 0.18s ease,
    color        0.18s ease;
}
/* Invisible hit-area extension — pill is 31px tall visually,
   this brings the touch target to ~44px without changing looks */
.nav-trigger::before {
  content: '';
  position: absolute;
  inset: -7px 0;
}

.nav-trigger[aria-expanded="true"] {
  background:   var(--text-primary);
  border-color: var(--text-primary);
  color:        var(--bg);
}
/* ⚑ Gated 2026-09-11: on touch this fired from the synthetic hover and made
   the pill look open when it was not. aria-expanded above carries the real
   state on every device. */
@media (hover: hover) and (pointer: fine) {
  .nav-work:hover .nav-trigger {
    background:   var(--text-primary);
    border-color: var(--text-primary);
    color:        var(--bg);
  }
}

.nav-trigger-chevron {
  width: 10px;
  height: 10px;
  flex-shrink: 0;
  transition: transform 0.22s var(--ease-out);
}

.nav-trigger[aria-expanded="true"] .nav-trigger-chevron {
  transform: rotate(180deg);
}

/* ── Dropdown panel ──
   Explicitly resets legacy .nav-dropdown rules from styles.css
   (top offset, min-width, padding, radius). */
.nav-dropdown {
  position: absolute;
  top: 100%;                     /* flush to bottom of .nav-work */
  left: 50%;
  transform: translateX(-50%) translateY(-4px);
  width: max-content;
  min-width: 0;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--dropdown-radius);
  padding: 5px;
  box-shadow: var(--dropdown-shadow);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity    0.18s ease,
    transform  0.22s var(--ease-out),
    visibility 0.18s ease;
  z-index: 200;
}

.nav-dropdown.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

/* ── Per-theme ring tokens ── */
.nav-item[data-theme="crimson"] { --ring-1: var(--crimson-1); --ring-2: var(--crimson-2); --ring-3: var(--crimson-3); --ring-4: var(--crimson-4); }
.nav-item[data-theme="rust"]    { --ring-1: var(--rust-1);    --ring-2: var(--rust-2);    --ring-3: var(--rust-3);    --ring-4: var(--rust-4);    }
.nav-item[data-theme="gold"]    { --ring-1: var(--gold-1);    --ring-2: var(--gold-2);    --ring-3: var(--gold-3);    --ring-4: var(--gold-4);    }
.nav-item[data-theme="teal"]    { --ring-1: var(--teal-1);    --ring-2: var(--teal-2);    --ring-3: var(--teal-3);    --ring-4: var(--teal-4);    }

/* ── Dropdown items ──
   .nav-dropdown .nav-item (0,2,0) outranks legacy
   `.nav-dropdown a` (0,1,1) from styles.css. */
.nav-items-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.nav-dropdown .nav-item {
  display: flex;
  align-items: center;
  gap: 15px;
  height: 51px;
  padding: 0 24px;
  border-radius: var(--radius-xs);
  overflow: hidden;
  white-space: nowrap;
  font-family: var(--font-sans);
  font-size: 1rem;       /* Figma: Text/Body/L */
  font-weight: 400;
  line-height: 1.65;
  color: var(--text-primary);
  text-decoration: none;
  transition:
    box-shadow 0.20s ease,
    background 0.20s ease;
}

/* Hover: cream bg + 4-ring inset border, darkest outermost */
.nav-dropdown .nav-item:hover,
.nav-dropdown .nav-item:focus-visible {
  background: var(--surface);
  color: var(--text-primary);
  box-shadow:
    inset 0 0 0 1px var(--ring-1),
    inset 0 0 0 2px var(--ring-2),
    inset 0 0 0 3px var(--ring-3),
    inset 0 0 0 4px var(--ring-4);
  outline: none;
}

/* ── Icon accordion ── */
.nav-icon-wrap {
  position: relative;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  overflow: visible;
}

.nav-ico {
  position: absolute;
  top: 0; left: 0;
  width: 20px; height: 20px;
  transition: transform 0.32s var(--ease-out), opacity 0.2s ease;
}

.nav-ico svg {
  width: 20px; height: 20px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  display: block;
}

/* Stacking — darkest (1) always in front */
.nav-ico-1 { z-index: 4; }
.nav-ico-2 { z-index: 3; opacity: 0; }
.nav-ico-3 { z-index: 2; opacity: 0; }
.nav-ico-4 { z-index: 1; opacity: 0; }

[data-theme="crimson"] .nav-ico-1 { color: var(--crimson-1); }
[data-theme="crimson"] .nav-ico-2 { color: var(--crimson-2); }
[data-theme="crimson"] .nav-ico-3 { color: var(--crimson-3); }
[data-theme="crimson"] .nav-ico-4 { color: var(--crimson-4); }

[data-theme="rust"] .nav-ico-1 { color: var(--rust-1); }
[data-theme="rust"] .nav-ico-2 { color: var(--rust-2); }
[data-theme="rust"] .nav-ico-3 { color: var(--rust-3); }
[data-theme="rust"] .nav-ico-4 { color: var(--rust-4); }

[data-theme="gold"] .nav-ico-1 { color: var(--gold-1); }
[data-theme="gold"] .nav-ico-2 { color: var(--gold-2); }
[data-theme="gold"] .nav-ico-3 { color: var(--gold-3); }
[data-theme="gold"] .nav-ico-4 { color: var(--gold-4); }

[data-theme="teal"] .nav-ico-1 { color: var(--teal-1); }
[data-theme="teal"] .nav-ico-2 { color: var(--teal-2); }
[data-theme="teal"] .nav-ico-3 { color: var(--teal-3); }
[data-theme="teal"] .nav-ico-4 { color: var(--teal-4); }

/* Hover: tight accordion — icons barely peek from behind each
   other; label bolds (width reserved by .nav-label below) */
.nav-dropdown .nav-item:hover,
.nav-dropdown .nav-item:focus-visible {
  font-weight: 700;
}
.nav-dropdown .nav-item:hover .nav-ico-2,
.nav-dropdown .nav-item:focus-visible .nav-ico-2 { opacity: 1; transform: translateX(-1px); transition-delay: 0s; }
.nav-dropdown .nav-item:hover .nav-ico-3,
.nav-dropdown .nav-item:focus-visible .nav-ico-3 { opacity: 1; transform: translateX(-2px); transition-delay: 0.05s; }
.nav-dropdown .nav-item:hover .nav-ico-4,
.nav-dropdown .nav-item:focus-visible .nav-ico-4 { opacity: 1; transform: translateX(-3px); transition-delay: 0.10s; }

/* Width reserve: an invisible zero-height bold twin stacked
   under the label locks the box at bold width, so bolding on
   hover can't resize the max-content dropdown. (Not the grid-
   overlay trick — an anonymous text box can't share the pseudo's
   cell and gets bumped to a second row.) */
.nav-label { display: inline-block; }
.nav-label::after {
  content: attr(data-text);
  display: block;
  height: 0;
  overflow: hidden;
  visibility: hidden;
  font-weight: 700;
}

/* Echo layers drop lucide's tiny dot-detail paths (e.g. eyes) —
   stacked dots read as mush; only the front icon keeps them */
.nav-ico-2 path[d$="h.01"],
.nav-ico-3 path[d$="h.01"],
.nav-ico-4 path[d$="h.01"] { display: none; }

/* The About affordance (the disco pill) lives in styles.css; the
   tooltip override that used to sit here went with the ball (2026-09-09). */

/* ══════════════════════════════════════════════════════════════
   SITE FOOTER — shared (matches index.html's footer)
   Rainbow transition band + dark bar with dotted link row.
   Overrides the legacy .site-footer/.footer-inner in styles.css.
   ══════════════════════════════════════════════════════════════ */
.rainbow-band {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  height: 20px;              /* matches homepage: 4 × 5px lines */
}
.rb { height: 5px; width: 100%; }
.rb--crimson { background: var(--crimson-4); }
.rb--rust    { background: var(--rust-4); }
.rb--gold    { background: var(--gold-4); }
.rb--teal    { background: var(--teal-4); }

.site-footer {
  position: relative;
  z-index: 10;
  background: #2a2420;
  height: 64px;
  padding: 0;
  border: none;
}

.footer-inner {
  max-width: 1440px;
  margin: 0 auto;
  height: 100%;
  padding: 0 var(--content-pad);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;   /* 12px visual — links' -6px hit-area margins eat 6px per side */
}

.footer-item { display: contents; }

.footer-dot {
  flex-shrink: 0;
  width: 5px; height: 5px;
  border-radius: 50%;
}
.footer-dot--crimson { background: var(--crimson-4); }
.footer-dot--rust    { background: var(--rust-4); }
.footer-dot--gold    { background: var(--gold-4); }
.footer-dot--teal    { background: var(--teal-4); }

.footer-link {
  display: inline-flex;
  align-items: center;
  gap: 1px;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.65;
  letter-spacing: 0;
  color: #eeedeb;
  text-decoration: none;
  opacity: 0.75;
  transition: opacity 0.18s ease;
  white-space: nowrap;
  /* Invisible hit-area extension to ~44px touch target — padding
     grows the tappable box, negative margin cancels the layout */
  padding: 12px 6px;
  margin: -12px -6px;
}
@media (hover: hover) { .footer-link:hover { opacity: 1; } }

.footer-link--email { background: none; border: none; cursor: pointer; }

/* Static footer text (the teal slot). Matches .footer-link's type exactly
   so the row reads as one line, but carries no hit-area padding, no hover
   and no cursor change: it is a fact, not an affordance, and giving it a
   44px tap target would promise a destination that does not exist. */
.footer-text {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.65;
  letter-spacing: 0;
  color: #eeedeb;
  opacity: 0.75;
  white-space: nowrap;
}

.footer-icon { display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.footer-icon img {
  width: 20px; height: 20px; display: block;
  filter: brightness(0) invert(1);
}

/* ── Collapsed header (≤1279px) ──
   Same point + values as index.html's tablet block, so the header
   doesn't change size when navigating between pages. */
@media (max-width: 1279px) {
  :root { --header-height: 56px; }

  .header-logo img,
  .header-logo .header-logo-svg { width: 32px; height: 32px; }
  /* 32px logo alone is under the 44px touch minimum — grow the
     tappable box invisibly, same trick as .footer-link */
  .header-logo { padding: 6px; margin: -6px; }

  .nav-trigger {
    font-size: 0.7rem;
    padding: 7px 14px 7px 16px;
    letter-spacing: 0.08em;
  }

  .nav-dropdown .nav-item {
    font-size: 0.88rem;
    height: 44px;
    padding: 0 16px;
  }

  .header-disco { display: none; }
  .header-about-link { display: inline-flex; }

  /* Stack the footer — same point + values as index.html, and the
     nowrap link row overflows narrow phones (<390px) if left inline */
  .site-footer  { height: auto; padding: 32px 0; }
  .footer-inner { flex-direction: column; align-items: center; gap: 20px; }
  .footer-item  { display: flex; align-items: center; gap: 10px; }
}