/* Revive Habitat — liquid-glass header material (v2.3).
   Shared by the homepage nav (.rh-nav) and the site header bar (.rv-header-bar); loaded after home.css / site.css.
   The material lives on ::before (not on the bar itself) so the bar is not a backdrop root: the dropdown panel
   inside it can blur the page behind it too. ::after carries the rim refraction and the pointer specular.
   Only surface and interaction change: layout, sizes, links and the mobile menu are untouched. */
@property --g-spec { syntax: '<number>'; inherits: true; initial-value: 0; }

.rh-nav, .rv-header-bar {
  --g-tint: 247 247 239;      /* paper */
  --g-a: .64;                 /* top of page: lighter, more open */
  --g-hi: .9;                 /* top-edge highlight */
  --g-sheen: .42;             /* vertical light falloff */
  --g-rim: 255 255 255;
  --g-blur: 20px;
  --gx: 50%; --gy: -40px;
  isolation: isolate;
  background: transparent !important;
  border-color: transparent !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  box-shadow: 0 1px 1px #1620270a, 0 12px 32px -10px #16202729;
}
.rv-header-bar { position: relative; }
.rh-nav::before, .rv-header-bar::before,
.rh-nav::after, .rv-header-bar::after {
  content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
}
/* Body of the glass: tinted, blurred, saturated (picks up the colour of what scrolls beneath), with a soft vertical
   light falloff, a bright top edge and a faint lower edge for thickness. */
.rh-nav::before, .rv-header-bar::before {
  background:
    radial-gradient(220px 120px at var(--gx) var(--gy), rgb(255 255 255 / calc(var(--g-spec) * .26)), transparent 70%),
    linear-gradient(180deg, rgb(255 255 255 / var(--g-sheen)), rgb(255 255 255 / calc(var(--g-sheen) * .2)) 52%, rgb(255 255 255 / 0) 70%, rgb(var(--g-tint) / .16)),
    rgb(var(--g-tint) / var(--g-a));
  -webkit-backdrop-filter: blur(var(--g-blur)) saturate(175%) brightness(1.06);
  backdrop-filter: blur(var(--g-blur)) saturate(175%) brightness(1.06);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / var(--g-hi)),
    inset 0 -1px 0 rgb(29 43 50 / .07),
    inset 0 0 0 1px rgb(255 255 255 / .34),
    inset 0 -10px 18px -14px rgb(255 255 255 / .55);
  transition: --g-spec .5s ease-out, box-shadow .6s;
}
/* Rim refraction (bright upper-left and lower-right edges, masked to a 1.2px ring) + pointer specular. */
.rh-nav::after, .rv-header-bar::after {
  padding: 1.2px;
  background:
    radial-gradient(160px 90px at var(--gx) var(--gy), rgb(255 255 255 / calc(var(--g-spec) * .55)), transparent 70%) border-box,
    linear-gradient(112deg, rgb(var(--g-rim) / .95), rgb(var(--g-rim) / .15) 22%, rgb(var(--g-rim) / 0) 50%, rgb(var(--g-rim) / .12) 78%, rgb(var(--g-rim) / .7)) border-box;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  transition: --g-spec .5s ease-out;
}
/* Pointer specular (desktop): glass.js sets --gx/--gy and toggles .is-lit; the sheen fades in and out. */
.rh-nav.is-lit, .rv-header-bar.is-lit { --g-spec: 1; }

/* Scrolled: slightly denser glass and a touch more depth (sizes are the existing compact sizes). */
.rh-nav.is-compact, .rv-header.is-compact .rv-header-bar { --g-a: .74; box-shadow: 0 1px 1px #1620270d, 0 16px 40px -12px #16202738; }

/* Over dark sections: smoked glass, the existing dark colours. */
.rh-nav.is-dark, .rv-header.is-dark .rv-header-bar { --g-tint: 27 42 47; --g-a: .7; --g-hi: .2; --g-sheen: .07; }
.rh-nav.is-dark::before, .rv-header.is-dark .rv-header-bar::before {
  box-shadow: inset 0 1px 0 rgb(255 255 255 / var(--g-hi)), inset 0 -1px 0 rgb(0 0 0 / .25), inset 0 0 0 1px rgb(255 255 255 / .08), inset 0 -10px 18px -14px rgb(255 255 255 / .06);
}
.rh-nav.is-dark::after, .rv-header.is-dark .rv-header-bar::after { opacity: .35; }
.rh-nav.is-dark.is-lit, .rv-header.is-dark .rv-header-bar.is-lit { --g-spec: .45; }

/* Nav items: a small glass lens under the hovered item; a slightly stronger one for the current page. */
.rv-nav-item > a, .rh-links a::before {
  transition: background-color .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s cubic-bezier(.2,.7,.2,1), opacity .35s cubic-bezier(.2,.7,.2,1);
}
.rv-nav-item > a:hover, .rv-nav-item > a:focus-visible, .rv-nav-item.has-sub:hover > a,
.rh-links a:hover::before, .rh-links a:focus-visible::before {
  background: rgb(255 255 255 / .5);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .9), inset 0 -1px 0 rgb(29 43 50 / .06), 0 1px 2px rgb(22 32 39 / .06), 0 4px 12px -4px rgb(22 32 39 / .12);
}
.rv-nav-item.is-current > a {
  background: rgb(255 255 255 / .62);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .95), inset 0 -1px 0 rgb(29 43 50 / .08), 0 1px 2px rgb(22 32 39 / .08), 0 6px 14px -6px rgb(22 32 39 / .16);
}
.rv-header.is-dark .rv-nav-item > a:hover, .rv-header.is-dark .rv-nav-item.is-current > a, .rv-header.is-dark .rv-nav-item.has-sub:hover > a,
.rh-nav.is-dark .rh-links a:hover::before {
  background: rgb(255 255 255 / .1);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .18), inset 0 -1px 0 rgb(0 0 0 / .2);
}
.rh-links a::before { content: ''; position: absolute; z-index: -1; inset: -9px -13px; border-radius: 30px; opacity: 0; }
.rh-links a:hover::before, .rh-links a:focus-visible::before { opacity: 1; }
.rh-links a:after { display: none; }   /* the lens replaces the old hover underline */
.rv-nav-item > a:focus-visible, .rh-links a:focus-visible, .rv-header-cta:focus-visible, .rh-nav-cta:focus-visible,
.rv-burger:focus-visible, .rh-menu:focus-visible, .rv-sub-toggle:focus-visible, .rv-logo:focus-visible, .rh-logo:focus-visible {
  outline: 2px solid #1d2b32; outline-offset: 3px;
}
.rv-header.is-dark :focus-visible, .rh-nav.is-dark :focus-visible { outline-color: #c9f27a; }
/* CTA keeps its colours; a hairline inner highlight makes it sit in the same material. */
.rv-header-cta, .rh-nav-cta { box-shadow: inset 0 1px 0 rgb(255 255 255 / .16), 0 6px 14px -8px rgb(22 32 39 / .5); }

/* Dropdown: a secondary floating glass panel. Hover bridge, delays and keyboard behaviour are unchanged. */
.rv-sub {
  background: rgb(247 247 239 / .8) !important;
  -webkit-backdrop-filter: blur(24px) saturate(170%) brightness(1.05);
  backdrop-filter: blur(24px) saturate(170%) brightness(1.05);
  border: 1px solid rgb(255 255 255 / .6);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .9), inset 0 -1px 0 rgb(29 43 50 / .05), 0 2px 4px rgb(22 32 39 / .05), 0 28px 56px -16px rgb(22 32 39 / .3);
}

/* Phones and tablets: same material, lighter blur, no pointer effect. */
@media (max-width: 1100px), (hover: none) {
  .rh-nav, .rv-header-bar { --g-blur: 14px; }
  .rh-nav.is-lit, .rv-header-bar.is-lit { --g-spec: 0; }
  .rh-menu { position: relative; }
  .rh-menu::before { content: ''; position: absolute; inset: -4px; }   /* 44px touch target, same visual size */
}

/* No backdrop-filter: an elegant near-opaque bar, fully readable. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .rh-nav, .rv-header-bar { --g-a: .95; }
  .rh-nav.is-dark, .rv-header.is-dark .rv-header-bar { --g-a: .95; }
  .rv-sub { background: rgb(247 247 239 / .98) !important; }
}
@media (prefers-reduced-motion: reduce) {
  .rh-nav::before, .rv-header-bar::before, .rh-nav::after, .rv-header-bar::after, .rv-nav-item > a, .rh-links a::before { transition: none; }
  .rh-nav.is-lit, .rv-header-bar.is-lit { --g-spec: 0; }
}
@media (prefers-contrast: more) {
  .rh-nav, .rv-header-bar { --g-a: .96; }
}