/* ═══════════════════════════════════════════════════════════════════════════
   DISCURSA SITE NAV — single source of truth
   ═══════════════════════════════════════════════════════════════════════════

   Every page links this file and carries the same markup, so the bar is the
   same height, the same type size and the same seven items everywhere. Only
   the colour changes, via a skin class on <nav> itself:

       <nav class="d-nav">              paper pages  (default)
       <nav class="d-nav d-nav--dark">  the dark homepage hero

   Load this AFTER the page's own <style> block, and do not redeclare .d-nav*
   rules in the page — that is exactly how the bar drifted apart before.

   Tokens are namespaced --nav-* on purpose. Pages disagree about what --gold
   and --ink-60 mean (on the paper theme --gold is actually teal), so the nav
   deliberately reads none of them.
   ═══════════════════════════════════════════════════════════════════════════ */

/* The drawer is a SIBLING of .d-nav, not a child, so it cannot inherit tokens
   declared on .d-nav — the type tokens live here, on both. */
.d-nav, .d-nav-drawer {
  --nav-serif: 'Playfair Display', Georgia, serif;
  --nav-sans:  'DM Sans', 'Helvetica Neue', Arial, sans-serif;
}

.d-nav {
  --nav-bg:        rgba(250, 248, 243, 0.92);
  --nav-border:    rgba(26, 26, 23, 0.1);
  --nav-ink:       #1a1a17;
  --nav-ink-dim:   #544f43;
  --nav-dot:       #c9a96e;
  --nav-cta-bg:    #0e6b64;
  --nav-cta-hover: #0c5a54;
  --nav-cta-ink:   #faf8f3;
  --nav-menu-bg:   #ffffff;
  --nav-menu-line: #e7e1d2;
  --nav-menu-shadow: 0 18px 40px rgba(84, 79, 67, 0.14);
  --nav-pad:       100px;

  position: sticky; top: 0; z-index: 100;
  background: var(--nav-bg);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--nav-border);
}

.d-nav--dark {
  --nav-bg:        rgba(23, 23, 20, 0.9);
  --nav-border:    #2c2c27;
  --nav-ink:       #e5e1d8;
  --nav-ink-dim:   rgba(229, 225, 216, 0.72);
  --nav-menu-bg:   #1b1913;
  --nav-menu-line: rgba(200, 169, 110, 0.2);
  --nav-menu-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
}

/* Not every page ships a global border-box reset — the legal pages do not.
   Scoped tightly so it cannot reach the page's own elements. */
.d-nav, .d-nav *, .d-nav-drawer, .d-nav-drawer * { box-sizing: border-box; }

.d-nav-inner {
  max-width: 1300px; margin: 0 auto; padding: 0 var(--nav-pad);
  height: 56px; display: flex; align-items: center; justify-content: space-between;
}

.d-nav-logo {
  font-family: var(--nav-serif); font-size: 22px; font-weight: 700;
  color: var(--nav-ink); text-decoration: none; border-bottom: none;
}
.d-nav-logo span, .d-nav-logo i { color: var(--nav-dot); font-style: normal; }

.d-nav-links { display: flex; align-items: center; gap: 2px; list-style: none; margin: 0; padding: 0; }
.d-nav-links li { margin: 0; }

.d-nav-link, .d-nav-links a {
  font-family: var(--nav-sans); font-size: 16px; font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--nav-ink-dim); text-decoration: none; border-bottom: none;
  padding: 6px 14px; white-space: nowrap; transition: color 0.2s;
}
.d-nav-link:hover, .d-nav-links a:hover,
.d-nav-link.active, .d-nav-links a.active { color: var(--nav-ink); }

.d-nav-cta {
  font-family: var(--nav-sans); font-size: 13px; font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase; line-height: 1.75;
  color: var(--nav-cta-ink); text-decoration: none; border-bottom: none;
  background: var(--nav-cta-bg); border: 1px solid var(--nav-cta-bg);
  padding: 10px 22px; white-space: nowrap;
  transition: background 0.2s, border-color 0.2s;
}
.d-nav-cta:hover { background: var(--nav-cta-hover); border-color: var(--nav-cta-hover); }

.d-nav-back {
  font-family: var(--nav-sans); font-size: 13px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--nav-ink-dim);
  text-decoration: none; border-bottom: none;
}
.d-nav-back:hover { color: var(--nav-ink); }

/* PRODUCTS DROPDOWN */
.nav-dd { position: relative; display: flex; align-items: center; }
.nav-dd-caret { display: inline-block; font-size: 11px; margin-left: 3px; transition: transform 0.2s ease; }
.nav-dd-menu {
  position: absolute; top: 100%; left: 14px; list-style: none; margin: 0;
  padding: 8px 0; min-width: 190px;
  background: var(--nav-menu-bg); border: 1px solid var(--nav-menu-line);
  box-shadow: var(--nav-menu-shadow);
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s; z-index: 60;
}
.nav-dd:hover .nav-dd-menu, .nav-dd:focus-within .nav-dd-menu {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.nav-dd-menu li a {
  display: block; padding: 9px 20px; font-size: 14px; letter-spacing: 0.06em;
  color: var(--nav-ink-dim); text-decoration: none; text-transform: none; white-space: nowrap;
}
.nav-dd-menu li a:hover { color: var(--nav-cta-bg); }
.d-nav--dark .nav-dd-menu li a:hover { color: var(--nav-dot); }

/* HAMBURGER + DRAWER */
.d-nav-hamburger {
  display: none; flex-direction: column; justify-content: center; gap: 5px;
  width: 36px; height: 36px; background: none; border: none; cursor: pointer;
  padding: 4px; flex-shrink: 0;
}
.d-nav-hamburger span {
  display: block; height: 1.5px; background: var(--nav-ink); border-radius: 2px;
  transition: transform 0.3s ease, opacity 0.3s ease; transform-origin: center;
}
.d-nav-hamburger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.d-nav-hamburger.open span:nth-child(2) { opacity: 0; }
.d-nav-hamburger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

.d-nav-drawer {
  position: fixed; inset: 0; background: #faf8f3; z-index: 998;
  display: flex; flex-direction: column; padding: 88px 40px 48px;
  transform: translateX(100%); transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.d-nav-drawer.drawer-dark { background: #12110d; }
.d-nav-drawer.open { transform: translateX(0); }
.d-nav-drawer ul {
  list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column;
  flex: 1; justify-content: center;
}
.d-nav-drawer ul li { margin: 0; }
.d-nav-drawer ul li a {
  display: block; font-family: var(--nav-serif); font-size: clamp(28px, 8vw, 42px);
  font-weight: 600; color: #1a1a17; text-decoration: none; border-bottom: 1px solid rgba(26, 26, 23, 0.1);
  padding: 18px 0; transition: color 0.2s;
}
.d-nav-drawer.drawer-dark ul li a { color: #e5e1d8; border-bottom-color: rgba(229, 225, 216, 0.1); }
.d-nav-drawer ul li:last-child a { border-bottom: none; }
.d-nav-drawer ul li a:hover { color: #0e6b64; }
.d-nav-drawer.drawer-dark ul li a:hover { color: #c9a96e; }
.d-nav-drawer .drawer-cta {
  display: block; margin-top: 40px; font-family: var(--nav-sans); font-size: 13px;
  letter-spacing: 0.12em; text-transform: uppercase; text-align: center;
  padding: 16px 24px; border: 1px solid #0e6b64; color: #0e6b64;
  text-decoration: none; transition: background 0.2s, border-color 0.2s;
}
.d-nav-drawer.drawer-dark .drawer-cta { border-color: rgba(200, 169, 110, 0.5); color: #c9a96e; }
.d-nav-drawer .drawer-cta:hover { background: rgba(14, 107, 100, 0.08); }
.d-nav-drawer.drawer-dark .drawer-cta:hover { background: rgba(200, 169, 110, 0.08); border-color: #c9a96e; }

body.nav-locked { overflow: hidden; }

/* ── Fitting the bar ───────────────────────────────────────────────────────
   Seven items at 16px need about 1,480px of window. Above that the bar sits
   at full size; below it the gutters close first and then the type steps
   down, and under 1000px the row is swapped for the drawer rather than
   letting it overflow. Before this file existed the bar simply ran past the
   right edge — on the sticky pages that showed as a horizontal scrollbar,
   and on the fixed homepage nav it quietly clipped "Get in touch".
   ────────────────────────────────────────────────────────────────────────── */
@media (max-width: 1500px) { .d-nav { --nav-pad: 56px; } }

@media (max-width: 1400px) {
  .d-nav { --nav-pad: 40px; }
  .d-nav-link, .d-nav-links a { font-size: 14.5px; padding: 6px 10px; }
  .d-nav-cta { font-size: 12px; padding: 9px 18px; }
}

@media (max-width: 1200px) {
  .d-nav { --nav-pad: 20px; }
  .d-nav-link, .d-nav-links a { font-size: 13px; letter-spacing: 0.06em; padding: 6px 7px; }
  .d-nav-logo { font-size: 20px; }
  .d-nav-cta { padding: 9px 14px; }
}

@media (max-width: 1000px) {
  .d-nav-links, .nav-dd { display: none; }
  .d-nav-hamburger { display: flex; }
  .d-nav { --nav-pad: 40px; }
  .d-nav-link, .d-nav-links a { font-size: 16px; padding: 6px 14px; }
  .d-nav-cta { font-size: 13px; padding: 10px 22px; }
  .d-nav-logo { font-size: 22px; }
}

@media (max-width: 540px) {
  .d-nav { --nav-pad: 24px; }
  .d-nav-cta { display: none; }
}