/* ============================================================
   Australind Dental, site shell (header / footer / mobile menu)
   ============================================================ */

/* ---- Floating pill header ---- */
.site-header {
  position: fixed;
  top: 16px;
  /* Centred with auto margins rather than translateX(-50%): a transform on the
     header would make it a backdrop-root in Chromium, trapping the ::before
     glass layer's backdrop-filter so it could never see, or refract, the page
     behind it. No transform here = the refraction actually works. */
  left: 0;
  right: 0;
  margin-inline: auto;
  opacity: 0;
  z-index: 60;
  width: min(1240px, calc(100% - 32px));
  background: rgba(245, 241, 235, 0.55);
  /* Frosting + refraction live on the ::before glass layer (see the liquid-glass
     section below) so the SVG displacement filter has a backdrop to bend. */
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 999px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.7) inset,
    0 20px 50px -20px rgba(18, 54, 53, 0.28),
    0 0 0 1px rgba(46, 95, 96, 0.04);
  transition:
    opacity .9s var(--ease-out),
    top .4s var(--ease),
    width .4s var(--ease),
    background .4s var(--ease),
    box-shadow .4s var(--ease),
    border-color .4s var(--ease);
}
.site-header.ready {
  opacity: 1;
}
.site-header.scrolled {
  top: 12px;
  width: min(1140px, calc(100% - 32px));
  background: rgba(245, 241, 235, 0.78);
  border-color: rgba(255, 255, 255, 0.7);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.8) inset,
    0 24px 60px -16px rgba(18, 54, 53, 0.32),
    0 0 0 1px rgba(46, 95, 96, 0.06);
}

/* Header inner, full width within the pill (sits above the glass layers) */
.site-header .site-header-inner {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 8px 10px 8px 22px;
  position: relative;
  z-index: 1;
}

/* Brand inside the pill */
.site-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--sage-900);
  transition: transform .35s var(--ease);
}
.site-brand:hover { transform: translateY(-1px); }
.site-brand-mark {
  width: 36px; height: 36px;
  background: var(--sage-800);
  color: var(--cream);
  border-radius: 50%;
  display: grid; place-items: center;
  transition: transform .5s var(--ease), background .35s var(--ease);
  box-shadow: 0 4px 10px -4px rgba(18, 54, 53, 0.3);
}
.site-brand:hover .site-brand-mark { transform: rotate(-8deg); background: var(--sage-900); }
.site-brand-mark.light { background: var(--tan-500); color: var(--sage-900); }
/* Brand mark (swoosh + sparkle) sits inside the circular badge. currentColor = badge icon colour. */
.site-brand-mark svg { width: 24px; height: auto; display: block; }
/* Header lockup: the full horizontal logo (mark + wordmark). currentColor follows .site-brand. */
.brand-logo { display: flex; align-items: center; }
.brand-logo svg { display: block; height: 38px; width: auto; }
.site-brand:hover .brand-logo { transform: none; }
.site-brand-text { display: flex; flex-direction: column; line-height: 1.05; }
.site-brand-text .bn {
  font-family: var(--font-serif);
  font-size: 19px;
  font-weight: 500;
  letter-spacing: -0.015em;
}
.site-brand-text .bs {
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.55;
  margin-top: 2px;
  font-weight: 400;
}

/* Nav, magnetic hover pill */
.site-nav {
  position: relative;
  display: block;
}
.nav-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: 0;
  font-size: 14px;
  position: relative;
}
.nav-item { position: relative; }
.nav-item > a {
  display: inline-block;
  padding: 10px 18px;
  color: var(--ink-2);
  font-weight: 500;
  border-radius: 999px;
  position: relative;
  transition: color .25s var(--ease);
  z-index: 2;
}
.nav-item > a:hover { color: var(--sage-900); }
.nav-item.is-active > a { color: var(--sage-900); }

/* Hover pill background, a single element that slides between items */
.nav-hover-pill {
  position: absolute;
  top: 50%;
  height: 38px;
  width: 0;
  background: rgba(46, 95, 96, 0.08);
  border-radius: 999px;
  transform: translateY(-50%);
  opacity: 0;
  pointer-events: none;
  transition:
    opacity .25s var(--ease),
    width .35s var(--ease),
    left .35s var(--ease);
  z-index: 1;
}
.site-nav.has-hover .nav-hover-pill { opacity: 1; }

/* Submenu */
.submenu {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  min-width: 240px;
  background: rgba(245, 241, 235, 0.85);
  /* The submenu centres itself with a transform, which traps a nested
     backdrop-filter, so it frosts on the element directly and skips the
     displaced rim (the ::before layer is disabled below). */
  backdrop-filter: saturate(180%) blur(24px);
  -webkit-backdrop-filter: saturate(180%) blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 22px;
  padding: 10px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.7) inset,
    0 24px 60px -20px rgba(18, 54, 53, 0.32);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity .3s var(--ease),
    transform .3s var(--ease),
    visibility .3s;
  z-index: 10;
}
.has-submenu:hover .submenu,
.has-submenu:focus-within .submenu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
.submenu a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  font-size: 13.5px;
  color: var(--ink-2);
  border-radius: 999px;
  transition: background .2s var(--ease), color .2s var(--ease), padding-left .25s var(--ease);
  font-weight: 400;
}
.submenu a:hover {
  background: rgba(46, 95, 96, 0.08);
  color: var(--sage-900);
  padding-left: 18px;
}
.submenu a[aria-current="page"] {
  color: var(--sage-900);
  background: rgba(46, 95, 96, 0.08);
}

.site-cta { display: flex; align-items: center; gap: 10px; }

/* Call pill, micro-shimmer on hover */
.site-header .call-pill {
  padding: 8px 18px 8px 10px;
  font-size: 14px;
  position: relative;
  overflow: hidden;
}
.site-header .call-pill::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.25) 50%, transparent 70%);
  transform: translateX(-100%);
  transition: transform .8s var(--ease);
}
.site-header .call-pill:hover::before { transform: translateX(100%); }
.site-header .call-pill .ic {
  width: 26px; height: 26px;
}

/* Mobile menu toggle */
.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 12px 10px;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  transition: background .25s var(--ease);
}
.nav-toggle:hover { background: rgba(46, 95, 96, 0.06); }
.nav-toggle span {
  display: block;
  width: 18px;
  height: 1.5px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform .35s var(--ease), opacity .25s var(--ease);
}
.nav-toggle.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* Mobile fullscreen menu */
.mobile-menu {
  position: fixed;
  inset: 0;
  background: var(--cream);
  z-index: 55;
  padding: 110px 28px 36px;
  overflow-y: auto;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-12px);
  transition: opacity .4s var(--ease), transform .4s var(--ease);
}
.mobile-menu.open { opacity: 1; pointer-events: auto; transform: none; }
.mobile-menu-inner { max-width: 480px; margin: 0 auto; }
.mobile-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; }
.mobile-top {
  display: block;
  font-family: var(--font-serif);
  font-size: 32px;
  font-weight: 400;
  color: var(--sage-900);
  padding: 14px 0;
  letter-spacing: -0.015em;
}
.mobile-sub { list-style: none; padding: 0 0 12px 4px; margin: 0; display: flex; flex-direction: column; gap: 4px; }
.mobile-sub a { display: block; padding: 6px 0; color: var(--ink-2); font-size: 15px; }

@media (max-width: 1020px) {
  .site-nav { display: none; }
  .nav-toggle { display: flex; }
  .site-brand-text .bs { display: none; }
}
@media (max-width: 600px) {
  .site-header { top: 10px; width: calc(100% - 16px); }
  .site-header.scrolled { top: 8px; width: calc(100% - 16px); }
  /* Small screens sit over busier backdrops with no nav to fill the bar, so the
     glass carries a slightly denser floor for legibility, but still graduated
     and translucent so it reads as glass, not a painted bar. */
  .site-header.glass-surface {
    background: linear-gradient(
      180deg,
      rgba(247, 244, 240, 0.52) 0%,
      rgba(244, 240, 234, 0.60) 55%,
      rgba(240, 235, 228, 0.68) 100%
    );
  }
  .site-header.glass-surface.scrolled {
    background: linear-gradient(
      180deg,
      rgba(247, 244, 240, 0.70) 0%,
      rgba(244, 240, 234, 0.78) 55%,
      rgba(240, 235, 228, 0.84) 100%
    );
  }
  .site-header .site-header-inner { padding: 6px 6px 6px 14px; gap: 8px; }
  .brand-logo svg { height: 30px; }
  /* Label is hidden at this width (icon-only pill), keep the padding even */
  .site-header .call-pill {
    padding: 7px 8px;
    font-size: 13px;
  }
  .site-header .call-pill .ic { width: 24px; height: 24px; }
  .site-header .call-pill .label-hide-sm { display: none; }
  .nav-toggle { width: 38px; height: 38px; }

  /* Mobile menu, bigger, more premium type */
  .mobile-menu { padding: 96px 24px 32px; }
  .mobile-top { font-size: 30px; padding: 12px 0; }
  .mobile-sub a { font-size: 14.5px; }
}

/* Reduced motion for the entrance */
@media (prefers-reduced-motion: reduce) {
  .site-header { opacity: 1 !important; transition: none; }
}

/* ---- Footer ---- */
.site-footer {
  background: var(--sage-900);
  color: rgba(245,241,235,0.72);
  padding: 96px 0 32px;
  margin-top: 0;
}
.site-footer .site-brand { color: var(--cream); }
.site-footer .site-brand-mark { background: var(--tan-500); color: var(--sage-900); }
/* Full brand lockup in the footer. currentColor (cream) keeps it readable on the dark footer. */
.site-brand--logo { display: inline-flex; }
.site-brand--logo:hover { transform: translateY(-1px); }
.site-logo { display: block; width: 208px; max-width: 62vw; color: var(--cream); }
.site-logo svg { display: block; width: 100%; height: auto; }
.site-footer h5 {
  font-family: var(--font-sans);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tan-300);
  margin: 0 0 18px;
  font-weight: 500;
}
.footer-top {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.1fr;
  gap: 48px;
  padding-bottom: 64px;
  border-bottom: 1px solid rgba(245,241,235,0.1);
}
.footer-brand p {
  font-size: 14px;
  line-height: 1.65;
  max-width: 340px;
  margin: 22px 0;
  color: rgba(245,241,235,0.6);
}
.footer-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.footer-col a {
  font-size: 14.5px;
  color: rgba(245,241,235,0.7);
  transition: color .25s var(--ease);
  line-height: 1.55;
}
.footer-col a:hover { color: var(--cream); }
.footer-bottom {
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  font-size: 12.5px;
  color: rgba(245,241,235,0.45);
  flex-wrap: wrap;
  gap: 16px;
}
.footer-llms a {
  color: rgba(245,241,235,0.45);
  text-decoration: none;
  transition: color .2s ease;
}
.footer-llms a:hover { color: rgba(245,241,235,0.7); }
@media (max-width: 900px) {
  .footer-top { grid-template-columns: 1fr 1fr; gap: 36px 40px; padding-bottom: 48px; }
  .footer-brand { grid-column: 1 / -1; }
  .site-footer { padding: 64px 0 32px; }
}
@media (max-width: 560px) {
  .site-footer { padding: 48px 0 28px; }
  .footer-top {
    grid-template-columns: 1fr;
    gap: 32px;
    padding-bottom: 36px;
    text-align: center;
  }
  .footer-brand { display: flex; flex-direction: column; align-items: center; }
  .footer-brand p { margin: 18px 0; max-width: none; }
  .footer-brand .call-pill { align-self: center; }
  .footer-col h5 { margin-bottom: 14px; }
  .footer-col ul { align-items: center; gap: 12px; }
  .footer-bottom {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
    padding-top: 28px;
  }
}

/* Floating call FAB (mobile) */
.floating-call {
  display: none;
  position: fixed;
  right: 14px;
  bottom: 14px;
  z-index: 50;
  background: var(--sage-900);
  color: var(--cream);
  padding: 14px 22px 14px 18px;
  border-radius: 999px;
  box-shadow:
    0 18px 38px -12px rgba(0,0,0,0.45),
    0 0 0 1px rgba(245,241,235,0.08);
  font-weight: 500;
  font-size: 15px;
  align-items: center;
  gap: 10px;
  transition: transform .25s var(--ease), background .25s var(--ease);
}
.floating-call:active { transform: scale(0.96); }
.floating-call svg { color: var(--tan-300); }
@media (max-width: 700px) { .floating-call { display: inline-flex; } }

/* ============================================================
   Liquid glass, method per aave.com/design/building-glass-for-the-web
   ------------------------------------------------------------
   Three stacked ingredients on each translucent surface:
     1. refraction , ::before bends the backdrop with a per-surface SVG
                       feDisplacementMap (see Glass.apply in site.js)
     2. specular rim, ::after paints a thin light→shadow gradient border
                       so the edge catches light like a real bevel
     3. inner glow  , inset highlights/shadows that give the glass depth
   The displacement is applied through the standard `filter:` property (works in
   Safari, Firefox and Chrome), so the refraction is cross-browser; the frosted
   `backdrop-filter: blur()` on the same layer is what it bends, and also the
   fallback before JS assigns a filter. The rim needs mask-composite.
   ============================================================ */

/* Establish a positioning context for the glass layers WITHOUT clobbering the
   fixed/absolute positions the surfaces already rely on (the header pill,
   submenus, mobile panel and call FAB are all positioned already, overriding
   them with `relative` un-pins the header and opens a gap below it). */
.glass-surface:not(.site-header):not(.submenu):not(.mobile-menu):not(.floating-call) {
  position: relative;
}

/* Keep real content above the glass layers */
.glass-surface > .site-header-inner,
.submenu > a,
.mobile-menu > .mobile-menu-inner,
.floating-call > * { position: relative; z-index: 1; }

/* 1 + 2, refraction layer (::before) and specular rim (::after) */
.glass-surface::before,
.glass-surface::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
}
.glass-surface::before { z-index: 0; }          /* refraction sits behind content */
.glass-surface::after  { z-index: 2; }          /* rim catches light above content */

/* 1, refraction. This is the crux of the aave technique and why it works in
   Safari, Firefox AND Chrome: the displacement is applied through the standard
   CSS `filter` property (universally supported with SVG url() references), NOT
   through `backdrop-filter: url()` (which only Chromium accepts).

   Each glass layer carries its OWN `backdrop-filter: blur()` so it actually has
   frosted backdrop pixels as its source graphic; the per-surface SVG filter, 
   built from the layer's real size + radius in JS (see Glass.apply in site.js)
   and pointed at via --glass-refract, then bends that frosted backdrop. Because
   `filter` is composited over the layer's backdrop-filter output, the whole
   frosted pane (and especially its rim) refracts everywhere, not just Chrome.

   `filter: none` is the natural fallback before JS assigns a real filter id. */
@supports ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
  .glass-surface::before {
    -webkit-backdrop-filter: blur(6px) saturate(165%) brightness(1.05);
    backdrop-filter: blur(6px) saturate(165%) brightness(1.05);
    filter: var(--glass-refract, none);
  }
  /* The sliding nav "menu pill" refracts the page glass beneath it the same way. */
  .nav-hover-pill {
    filter: var(--glass-refract, none);
  }
}

/* The mobile panel and transform-centred submenus stay plain frosted glass, 
   no displaced ::before rim (their transforms would trap its backdrop anyway). */
.mobile-menu.glass-surface::before,
.submenu.glass-surface::before { content: none; }

/* 2, specular rim: a 1px gradient border drawn via mask-composite */
@supports ((mask-composite: exclude) or (-webkit-mask-composite: xor)) {
  .glass-surface::after {
    padding: 1.25px;
    /* A convex lens catches light along its top crown, goes near-invisible
       through the middle, then a cooler highlight wraps under the bottom edge
       where light bends through the glass. The faint diagonal sheen keeps the
       top-left corner reading as the brightest point. */
    background:
      linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0.95) 0%,
        rgba(255, 255, 255, 0.45) 14%,
        rgba(255, 255, 255, 0.06) 42%,
        rgba(255, 255, 255, 0.06) 58%,
        rgba(190, 222, 218, 0.35) 86%,
        rgba(212, 236, 230, 0.6) 100%
      ),
      linear-gradient(
        125deg,
        rgba(255, 255, 255, 0.55) 0%,
        rgba(255, 255, 255, 0) 30%,
        rgba(255, 255, 255, 0) 70%,
        rgba(255, 255, 255, 0.3) 100%
      );
    -webkit-mask:
      linear-gradient(#000 0 0) content-box,
      linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask:
      linear-gradient(#000 0 0) content-box,
      linear-gradient(#000 0 0);
    mask-composite: exclude;
  }
}

/* ---- Apply the system to the nav surfaces ---- */

/* Header pill, graduated tint (lighter at the lit top, denser toward the
   bottom so the glass reads as having real thickness) kept transparent enough
   that the backdrop refracts through rather than being painted over. */
.site-header.glass-surface {
  background: linear-gradient(
    180deg,
    rgba(247, 244, 240, 0.40) 0%,
    rgba(244, 240, 234, 0.48) 55%,
    rgba(240, 235, 228, 0.56) 100%
  );
  box-shadow:
    /* crisp lit crown */
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    /* soft top sheen, like light pooling on a domed surface */
    0 9px 18px -12px rgba(255, 255, 255, 0.6) inset,
    /* denser glass + light wrapping under the bottom edge */
    0 -10px 20px -12px rgba(18, 54, 53, 0.20) inset,
    /* ambient drop + tight contact shadow ground the floating pill */
    0 22px 48px -22px rgba(18, 54, 53, 0.30),
    0 3px 10px -5px rgba(18, 54, 53, 0.14),
    0 0 0 1px rgba(46, 95, 96, 0.05);
}
.site-header.glass-surface.scrolled {
  background: linear-gradient(
    180deg,
    rgba(247, 244, 240, 0.60) 0%,
    rgba(244, 240, 234, 0.68) 55%,
    rgba(240, 235, 228, 0.74) 100%
  );
}

/* Submenu dropdowns */
.submenu.glass-surface { background: rgba(245, 241, 235, 0.62); }

/* Mobile menu panel, frosted glass over the page (no rim on a full panel) */
.mobile-menu.glass-surface {
  background: rgba(244, 242, 238, 0.80);
  -webkit-backdrop-filter: saturate(160%) blur(28px);
  backdrop-filter: saturate(160%) blur(28px);
}
.mobile-menu.glass-surface::after { content: none; }

/* Floating call FAB, dark glass with a lit rim (opaque fill, so no refraction
   layer: a displaced backdrop would never show through it). */
.floating-call.glass-surface::before { content: none; }
.floating-call.glass-surface {
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.18) inset,
    0 18px 38px -12px rgba(0, 0, 0, 0.45),
    0 0 0 1px rgba(245, 241, 235, 0.08);
}

/* Nav hover pill, a small glass lozenge that slides between items */
.nav-hover-pill {
  background: rgba(255, 255, 255, 0.16);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.6) inset,
    0 -3px 6px -4px rgba(18, 54, 53, 0.25) inset,
    0 4px 10px -6px rgba(18, 54, 53, 0.25);
  -webkit-backdrop-filter: blur(4px) saturate(140%);
  backdrop-filter: blur(4px) saturate(140%);
}

/* The refraction is cosmetic, drop just the displacement for reduced-motion
   preferences while keeping the frosted glass intact. */
@media (prefers-reduced-motion: reduce) {
  .glass-surface::before,
  .nav-hover-pill { filter: none; }
}