/* DSR Liquid Glass (iOS-style) — V1.2 2025-11-06
   Classes:
   - .liquid-glass  (core frosted material)
   - .liquid-folder (folder/tile preset)
   - .liquid-btn    (icon button preset)
   - .lg-hover      (soft lift on hover)
   Notes:
   - Backdrop blur for true frost, sheen + grain for depth
   - Optional SVG displacement (refraction) if filter present
*/

:root{
  --lg-blur: 24px;
  --lg-sat: 185%;
  --lg-contrast: 112%;
  --lg-bright: 108%;
  --lg-top: rgba(255,255,255,.22);
  --lg-base: rgba(255,255,255,.14);
  --lg-edge: rgba(255,255,255,.40);
  --lg-inner: rgba(255,255,255,.28);
  --lg-shadow: rgba(0,0,0,.42);
  --lg-radius: 22px;

  /* dynamic tint & wallpaper proxy (set by JS; safe if unused) */
  --lg-tint: transparent;
  --lg-wallpaper: none;
}

/* Core token */
.liquid-glass{
  position: relative;
  border-radius: var(--lg-radius);
  background:
    linear-gradient(180deg, var(--lg-top), var(--lg-base)),
    var(--lg-tint);
  border: 1px solid var(--lg-edge);
  backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-sat))
                   contrast(var(--lg-contrast)) brightness(var(--lg-bright));
  -webkit-backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-sat))
                           contrast(var(--lg-contrast)) brightness(var(--lg-bright));
  box-shadow: 0 0 0 1px var(--lg-inner) inset, 0 22px 48px var(--lg-shadow);
  overflow: hidden;
  isolation: isolate;

  /* optional refraction (SVG filter defined once in HTML) */
  filter: url(#dsrLiquidDisplace);
}

/* Backdrop proxy (helps browsers that struggle with backdrop + filter combo) */
.liquid-glass::before{
  content:"";
  position:absolute; inset:-10%;
  background: var(--lg-wallpaper);
  background-attachment: fixed;
  background-size: cover; background-position:center;
  filter: blur(calc(var(--lg-blur) * .4));
  opacity: .5;
  z-index: -1;
  pointer-events:none;
}

/* Sheen + micro-grain */
.liquid-glass::after{
  content:"";
  position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(255,255,255,.35) 0%, rgba(255,255,255,0) 14%),
    radial-gradient(120% 90% at 50% -10%, rgba(255,255,255,.12) 0%, rgba(255,255,255,0) 70%);
  mix-blend-mode: screen;
  opacity:.9;
}
.liquid-glass::after{
  /* add subtle grain via an extra layer */
  background-image:
    linear-gradient(180deg, rgba(255,255,255,.35) 0%, rgba(255,255,255,0) 14%),
    radial-gradient(120% 90% at 50% -10%, rgba(255,255,255,.12) 0%, rgba(255,255,255,0) 70%),
    url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'>\
<filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/>\
<feColorMatrix type='saturate' values='0'/><feComponentTransfer><feFuncA type='table' tableValues='0 0 0 .02 .04 .06 .07 .06 .04 .02 0 0 0 0 0'/></feComponentTransfer></filter>\
<rect width='120' height='120' filter='url(%23n)'/></svg>");
  background-size: auto, auto, 120px 120px;
  mix-blend-mode: soft-light, soft-light, soft-light;
  opacity:.35;
}

/* Hover polish (no teal) */
.lg-hover{ transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; }
.lg-hover:hover{
  transform: translateY(-1px);
  border-color: rgba(255,255,255,.48);
  box-shadow: 0 0 0 1px rgba(255,255,255,.36) inset, 0 30px 60px rgba(0,0,0,.52);
}

/* Folder/tile preset (square, centered content) */
.liquid-folder{
  display:flex; align-items:center; justify-content:center;
  aspect-ratio: 1 / 1; width: 100%; max-width: 520px;
  text-align:center; color:#EAF2FF; font-weight:700;
  font-size: clamp(16px, 2.1vw, 22px);
  text-shadow: 0 1px 0 rgba(255,255,255,.18), 0 10px 30px rgba(0,0,0,.28);
}

/* Icon button preset — smoothed, no filter changes on hover */
.liquid-btn{
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px;
  border-radius: 14px;
  border: 1px solid var(--lg-edge);

  /* keep these constant to avoid repaint jank */
  background: linear-gradient(180deg, var(--lg-top), var(--lg-base));
  backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-sat))
                   contrast(var(--lg-contrast)) brightness(var(--lg-bright));
  -webkit-backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-sat))
                           contrast(var(--lg-contrast)) brightness(var(--lg-bright));

  /* IMPORTANT: no refraction filter on small buttons (prevents edge wobble) */
  filter: none;

  box-shadow:
    0 2px 4px rgba(255,255,255,.12) inset,
    0 14px 28px rgba(0,0,0,.45);
  transition:
    transform .18s ease,
    box-shadow .18s ease,
    border-color .18s ease,
    background-color .18s ease;
  will-change: transform;
  transform: translateZ(0); /* promote to its own layer */
}

/* subtle top highlight + grain, but keep opacity steady (no flicker) */
.liquid-btn::before,
.liquid-btn::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
}
.liquid-btn::before{
  background:
    linear-gradient(180deg, rgba(255,255,255,.30) 0%, rgba(255,255,255,0) 14%),
    radial-gradient(120% 90% at 50% -10%, rgba(255,255,255,.10) 0%, rgba(255,255,255,0) 70%);
  mix-blend-mode: screen;
  opacity:.9;
}
.liquid-btn::after{
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/><feComponentTransfer><feFuncA type='table' tableValues='0 0 0 .02 .04 .06 .07 .06 .04 .02 0 0 0 0 0'/></feComponentTransfer></filter><rect width='120' height='120' filter='url(%23n)'/></svg>");
  background-size:120px 120px;
  mix-blend-mode: soft-light;
  opacity:.28;
}

/* Hover — only lift/lighten; no backdrop/filter changes */
.liquid-btn:hover{
  transform: translateY(-2px);
  border-color: rgba(255,255,255,.55);
  box-shadow:
    0 2px 6px rgba(255,255,255,.20) inset,
    0 18px 38px rgba(0,0,0,.55);
}

/* Focus visible ring (keyboard) */
.liquid-btn:focus-visible{
  outline: 2px solid rgba(255,255,255,.6);
  outline-offset: 2px;
}

/* keep icon colours */
.liquid-btn svg *{ fill: initial !important }


/* Reduced transparency fallback */
@media (prefers-reduced-transparency: reduce){
  .liquid-glass, .liquid-folder, .liquid-btn{
    backdrop-filter:none !important; -webkit-backdrop-filter:none !important;
    background: rgba(255,255,255,.86) !important;
    filter:none !important;
  }
  .liquid-glass::before, .liquid-glass::after{ display:none !important }
}


/* optional: ensure size & centering remain tidy */
#location .acc-col .square.liquid-glass.liquid-folder{
  display:flex; align-items:center; justify-content:center;
  aspect-ratio: 1 / 1; width:100%; max-width:520px;
  text-align:center; color:#EAF2FF; font-weight:700;
  font-size:clamp(16px,2.1vw,22px);
  text-shadow:0 1px 0 rgba(255,255,255,.18), 0 10px 30px rgba(0,0,0,.28);
}
/* --- Accreditations tile: pure transparent liquid glass --- */
#location .acc-col .square.liquid-glass{
  background: transparent !important;         /* remove all fill */
  border: 1px solid rgba(255,255,255,0.25);   /* subtle glass edge */
  border-radius: 12px;
  backdrop-filter: blur(18px) saturate(140%) contrast(105%) brightness(120%);
  -webkit-backdrop-filter: blur(18px) saturate(140%) contrast(105%) brightness(120%);
  box-shadow:
  inset 0 2px 6px rgba(255,255,255,0.25),
  0 10px 30px rgba(0,0,0,0.45);
  filter: none !important;                    /* ensure no SVG displacement */
  overflow: hidden;
  position: relative;
}

/* Remove any proxy/tint layers */
#location .acc-col .square.liquid-glass::before,
#location .acc-col .square.liquid-glass::after{
  display: none !important;
}
/* =========================
   Clear variant: pure frosted glass (no color fill)
   ========================= */
.liquid-clear{
  background: transparent !important;                 /* kill all fills/gradients */
  border-color: rgba(255,255,255,0.25) !important;    /* subtle rim */
  box-shadow:
    inset 0 2px 6px rgba(255,255,255,0.25),
    0 10px 30px rgba(0,0,0,0.45) !important;          /* floating feel */
}

/* remove sheen/tint/grain layers for perfectly transparent look */
.liquid-clear::before,
.liquid-clear::after{ display: none !important; }

/* make sure backdrop stays strong for the frosted effect */
.liquid-glass.liquid-clear{
  backdrop-filter: blur(18px) saturate(140%) contrast(105%) brightness(120%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(140%) contrast(105%) brightness(120%) !important;
  filter: none !important; /* no displacement wobble on clear panels */
}
/* --- Coming-soon tile: pure transparent frost (no tint) --- */
#location .acc-col .square.liquid-glass.liquid-clear{
  /* kill any fills/tints */
  background: transparent !important;
  /* keep frosted physics */
  backdrop-filter: blur(18px) saturate(140%) contrast(105%) brightness(120%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(140%) contrast(105%) brightness(120%) !important;
  /* subtle rim + float */
  border: 1px solid rgba(255,255,255,.25) !important;
  box-shadow:
    inset 0 2px 6px rgba(255,255,255,.25),
    0 10px 30px rgba(0,0,0,.45) !important;
  /* NO refraction/grain/tint overlays on this large flat tile */
  filter: none !important;
}
#location .acc-col .square.liquid-glass.liquid-clear::before,
#location .acc-col .square.liquid-glass.liquid-clear::after{
  display: none !important;
}
/* ===== Wizard choices = Liquid Glass buttons (match map buttons) ===== */
.wizard .wiz-card{
  position: relative;
  display: flex; align-items: center; justify-content: center;
  gap: 8px;
  min-height: 52px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.40);
  /* pure glass: no tint fill */
  background: transparent;
  backdrop-filter: blur(18px) saturate(140%) contrast(105%) brightness(120%);
  -webkit-backdrop-filter: blur(18px) saturate(140%) contrast(105%) brightness(120%);
  box-shadow:
    inset 0 2px 4px rgba(255,255,255,.12),
    0 14px 28px rgba(0,0,0,.45);
  color: #EAF2FF;
  font-weight: 600;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.wizard .wiz-card:hover{
  transform: translateY(-2px);
  border-color: rgba(255,255,255,.55);
  box-shadow:
    inset 0 2px 6px rgba(255,255,255,.20),
    0 18px 38px rgba(0,0,0,.55);
}
.wizard .wiz-card .wiz-icon{ width:22px; height:22px; }

 /* --- Accreditations tile: pure transparent outline, matches map shape --- */
#location .acc-col .acc-tile {
  width: 100%;
  max-width: 520px;
  aspect-ratio: 1 / 1;
  border-radius: 12px;
  background: none !important;             /* no fill, no tint, no blur */
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #EAF2FF;
  font-weight: 600;
  text-shadow: 0 1px 2px rgba(0,0,0,0.3);
  transition: border-color .2s ease, box-shadow .2s ease;
}

#location .acc-col .acc-tile:hover {
  border-color: rgba(255, 255, 255, 0.4);
  box-shadow:
    0 0 10px rgba(255, 255, 255, 0.1),
    0 6px 24px rgba(0, 0, 0, 0.4);
}
/* Social icons — no box, no tint, no blur */
.glass-icon{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 12px;   /* keeps same hit area shape, but invisible */
  overflow: visible;
  transition: transform .18s ease;
}

.glass-icon::before,
.glass-icon::after{ content:none; }  /* ensure no leftover overlays */

/* Icon stays exactly as-is */
.glass-icon img{
  width: 70%;
  height: 70%;
  filter: none !important;
  mix-blend-mode: normal !important;
  opacity: 1 !important;
}

/* Optional: tiny lift on hover (no color shift) */
.glass-icon img { transition: transform 160ms ease; }
.glass-icon:hover img { transform: scale(1.03); }  /* optional tiny lift */


/* Optional, very subtle edge specular (no tint, no box) */
.glass-icon .specular{ display:none; } /* placeholder if you want later */

/* Enable a little 3D space for the tilt */
.site-header,
.site-header-inner { perspective: 800px; }

.glass-icon {
  transform-style: preserve-3d;
  transition: transform 160ms ease;
  will-change: transform;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .glass-icon { transition: none !important; transform: none !important; }
}