/* =====================================================================
   Liquid glass UI layer - Apple-style frosted glass.
   Applied on top of the original styles via higher-specificity selectors
   (#mainNav, #mobMenu, body .x) so nothing in the shared/page CSS needs
   editing. Pure CSS backdrop-filter - no WebGL, mobile-friendly, and it
   degrades gracefully where backdrop-filter is unsupported.
   ===================================================================== */

/* ---- Navigation: frosted glass bar ---- */
#mainNav {
  background: linear-gradient(180deg, rgba(10, 24, 40, 0.38), rgba(10, 24, 40, 0.24));
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 10px 34px rgba(8, 20, 35, 0.18),
              inset 0 1px 0 rgba(255, 255, 255, 0.26),
              inset 0 -1px 0 rgba(255, 255, 255, 0.06);
  transition: background .35s ease, box-shadow .35s ease, backdrop-filter .35s ease;
}
/* keep the white nav text legible even when the glass is more see-through
   (the nav sits over dark heroes and light pages alike) */
#mainNav .nav-links a,
#mainNav .nav-logo-name,
#mainNav .nav-logo-sub { text-shadow: 0 1px 6px rgba(0, 0, 0, 0.38); }
#mainNav.opaque {
  background: linear-gradient(180deg, rgba(10, 24, 40, 0.70), rgba(10, 24, 40, 0.60));
  -webkit-backdrop-filter: blur(26px) saturate(195%);
  backdrop-filter: blur(26px) saturate(195%);
  box-shadow: 0 12px 38px rgba(8, 20, 35, 0.30),
              inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

/* ---- Mobile menu: deep frosted overlay ---- */
#mobMenu {
  background: rgba(11, 24, 40, 0.55);
  -webkit-backdrop-filter: blur(28px) saturate(160%);
  backdrop-filter: blur(28px) saturate(160%);
}

/* ---- Floating action buttons: solid brand discs ----
   Base position/size lives here (not per-page CSS) so every page gets the
   same buttons. Solid, full-contrast brand colours matching the original
   site: WhatsApp green and the Instagram gradient (the gradient is painted
   by the SVG, so the IG disc itself stays transparent). No frosted blur -
   these read as opaque brand discs, not glass. */
body .float-ig,
body .float-wa {
  position: fixed;
  right: 20px;
  z-index: 400;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .22s ease;
  will-change: transform;
  transform: translateZ(0);
}
body .float-wa {
  bottom: 20px;
  background: #25D366;
  box-shadow: 0 4px 20px rgba(37, 211, 102, 0.40);
}
body .float-ig {
  bottom: 82px;
  background: transparent;
  box-shadow: 0 4px 18px rgba(188, 24, 136, 0.32);
}
body .float-ig:hover,
body .float-wa:hover {
  transform: scale(1.10);
}
body .float-ig svg,
body .float-wa svg {
  width: 52px;
  height: 52px;
  border-radius: 50%;
}

/* ---- Ghost / outline buttons: subtle liquid glass ---- */
body .btn-ghost {
  background: rgba(255, 255, 255, 0.10);
  -webkit-backdrop-filter: blur(10px) saturate(150%);
  backdrop-filter: blur(10px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, 0.30);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22);
  transition: background .25s ease, transform .2s ease, box-shadow .25s ease;
}
body .btn-ghost:hover {
  background: rgba(255, 255, 255, 0.18);
  transform: translateY(-1px);
}

/* ---- Reduced motion / unsupported: solid fallbacks already apply via the
        original opaque colours, so no extra handling needed. ---- */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  #mainNav { background: rgba(13, 30, 50, 0.92); }
  #mobMenu { background: rgba(11, 24, 40, 0.97); }
}