/* ============================================================
   jg-header — universal cross-property header
   ------------------------------------------------------------
   CHANGELOG
   #01  Base header — glass blur, fixed position, full width
   #02  Desktop/mobile switch + mobile dropdown (checkbox hack)
   #03  Mobile breakpoint aligned to Bricks (781px)
   #04  Wordmark → Source Serif 4; nav links → Inter
   #05  Active site styled: teal (#3a5a57) + 600 weight
   #06  Glass opacity 0.82→0.55; bar slimmed 60→48 / 54→44
   #07  Mobile toggle vertical-centre fix (relative top nudge)
   #08  Per-site theming via body class (.jg-site-NAME)
   #09  Dropdown bg tokenised (--jg-menu-bg)
   #10  Colour site: dark warm glass, light text, dark dropdown
   #11  Photography interior pages dark; homepage stays light
   #12  Universal bar shrunk: wordmark 18, links 12, bar 38px
        so it reads as secondary to each site's own nav
   #13  Removed white top-highlight line from default bar
   ============================================================ */

.jg-header {
  --jg-ink: #211f1b;
  --jg-mut: rgba(33,31,27,0.65);
  --jg-line: rgba(33,31,27,0.10);
  --jg-glass: rgba(253,251,247,0.55);
  --jg-active: #3a5a57;
  --jg-menu-bg: rgba(253,251,247,0.92);
  --jg-serif: "Outfit", system-ui, sans-serif;
  --jg-sans:  "Inter", system-ui, sans-serif;
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 1000; height: 38px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 clamp(18px, 4vw, 32px); box-sizing: border-box;
  background: var(--jg-glass);
  -webkit-backdrop-filter: blur(20px) saturate(1.5) brightness(1.04);
  backdrop-filter: blur(20px) saturate(1.5) brightness(1.04);
  border-bottom: 1px solid var(--jg-line);
  box-shadow: 0 6px 26px rgba(0,0,0,0.10);
}

/* Colour site — dark warm glass, light text, visible edge */
.jg-site-colour .jg-header {
  --jg-glass: rgba(18,14,13,0.86);
  --jg-menu-bg: rgba(18,14,13,0.96);
  --jg-ink:  #f4f1ea;
  --jg-mut:  rgba(244,241,234,0.78);
  --jg-line: rgba(244,241,234,0.10);
  box-shadow: 0 10px 30px rgba(0,0,0,0.50);
}


/* Photography interior pages (dark) — homepage keeps light glass */
.jg-site-photography:not(.home) .jg-header {
  --jg-glass: rgba(18,14,13,0.86);
  --jg-menu-bg: rgba(18,14,13,0.96);
  --jg-ink:  #f4f1ea;
  --jg-mut:  rgba(244,241,234,0.78);
  --jg-line: rgba(244,241,234,0.10);
  box-shadow: 0 10px 30px rgba(0,0,0,0.55);
}
.jg-site-colour .jg-header__toggle,
.jg-site-photography:not(.home) .jg-header__toggle {
  color: rgba(244,241,234,0.82);
}

.jg-site-colour .jg-header__toggle:hover,
.jg-site-colour .jg-header__toggle:focus-visible,
.jg-site-photography:not(.home) .jg-header__toggle:hover,
.jg-site-photography:not(.home) .jg-header__toggle:focus-visible {
  color: #f4f1ea;
}

.jg-header__mark {
  font-family: var(--jg-serif);
  font-size: 16px; font-weight: 300; line-height: 1;
  color: var(--jg-ink); text-decoration: none; white-space: nowrap;
}

.jg-header__nav {
  position: relative; display: flex; align-items: center;
  gap: clamp(14px, 2.5vw, 22px);
  list-style: none; margin: 0; padding: 0 0 4px;
}
.jg-header__nav li {
  list-style: none; margin: 0; padding: 0; display: inline-flex;
}
.jg-header__nav a {
  font-family: var(--jg-sans); font-size: 12px; font-weight: 450;
  letter-spacing: 0.02em;
  color: var(--jg-mut); text-decoration: none; white-space: nowrap;
  transition: color .16s;
}
.jg-header__nav a:hover { color: var(--jg-ink); }
.jg-header__nav a[aria-current="page"] { color: var(--jg-active); font-weight: 600; }

.jg-header__ind {
  position: absolute; left: 0; bottom: 0; height: 2px; border-radius: 2px;
  background: var(--jg-ink); pointer-events: none;
  transition: transform .36s cubic-bezier(.34,1.35,.5,1), width .36s cubic-bezier(.34,1.35,.5,1), background .2s ease;
}
.jg-header__ind.is-home { background: var(--jg-active); }

.jg-header a:focus-visible {
  outline: 2px solid var(--jg-ink); outline-offset: 4px; border-radius: 2px;
}

.jg-header__desktop { display: flex; }
.jg-header__mobile { display: none; }
.jg-header__mobile #nav-toggle {
  position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; margin: 0;
}

@media (max-width: 781px) {
  .jg-header { height: 36px; padding: 0 16px; }
  .jg-header__mark { font-size: 14px; }

  .jg-header__desktop { display: none; }
  .jg-header__mobile { display: flex; align-items: center; height: 100%; position: relative; }

  .jg-header__toggle {
  cursor: pointer;
  font-size: 10px;
  color: var(--jg-ink);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 100%;
  padding: 0 4px;
  line-height: 1;
  position: relative;
  top: 2px;
}
.jg-header__chev {
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  transform: translateY(1px);
  opacity: 0.9;
}

.jg-header__toggle:hover,
.jg-header__toggle:focus-visible {
  color: #f4f1ea;
}



  .jg-header__dropdown-menu {
    display: none; position: absolute; top: 100%; right: 0;
    margin: 0; padding: 10px 14px; min-width: 180px; list-style: none;
    background: var(--jg-menu-bg);
    -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
    border: 1px solid var(--jg-line); border-radius: 8px;
  }
  .jg-header__dropdown-menu li { margin: 0; padding: 6px 0; list-style: none; }
  .jg-header__dropdown-menu a { color: var(--jg-ink); font-size: 14px; text-decoration: none; }

  #nav-toggle:checked ~ .jg-header__dropdown-menu { display: block; }
}

@media (prefers-reduced-motion: reduce) {
  .jg-header__ind, .jg-header__nav a { transition: none !important; }
}