/* ============================================================
   FAMILA | Apple-inspired Floating Frosted Header · V1.2.3
   Scoped to the New Landing Page only.
   Original landing page, FAMILA Leads and signup handler remain unchanged.
   ============================================================ */
:root {
  --glass-ink: #103e39;
  --glass-main: #0f4c46;
  --glass-ease: cubic-bezier(.22, 1, .36, 1);
}

/* Fixed floating glass: translucency reveals and blurs content underneath. */
body.famila-new-landing .site-header {
  position: fixed;
  inset-inline: auto;
  left: 50%;
  right: auto;
  top: 16px;
  transform: translateX(-50%) translateZ(0);
  isolation: isolate;
  width: min(1190px, calc(100% - 44px));
  max-width: none;
  z-index: 1000;
  border: 1px solid rgba(255,255,255,.73);
  border-radius: 23px;
  background: rgba(252,253,251,.56);
  -webkit-backdrop-filter: saturate(180%) blur(22px);
  backdrop-filter: saturate(180%) blur(22px);
  box-shadow:
    0 12px 35px rgba(22,60,51,.065),
    0 2px 10px rgba(22,60,51,.025),
    inset 0 1px 0 rgba(255,255,255,.70);
  transition:
    top .42s var(--glass-ease),
    width .48s var(--glass-ease),
    background-color .38s ease,
    border-color .38s ease,
    border-radius .38s var(--glass-ease),
    box-shadow .38s ease;
  will-change: top, width;
}
/* Airy specular highlight, not a heavy artificial gradient. */
body.famila-new-landing .site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(135deg,
    rgba(255,255,255,.33) 0%,
    rgba(255,255,255,.06) 37%,
    rgba(255,255,255,0) 70%);
  z-index: -1;
}
body.famila-new-landing .site-header.is-scrolled {
  top: 9px;
  width: min(1060px, calc(100% - 56px));
  border-radius: 19px;
  border-color: rgba(255,255,255,.85);
  background: rgba(249,252,250,.76);
  -webkit-backdrop-filter: saturate(200%) blur(30px);
  backdrop-filter: saturate(200%) blur(30px);
  box-shadow:
    0 18px 55px rgba(9,52,45,.16),
    0 4px 15px rgba(9,52,45,.055),
    inset 0 1px 0 rgba(255,255,255,.91);
}
body.famila-new-landing .site-header .nav-inner {
  width: calc(100% - 36px);
  max-width: none;
  min-height: 76px;
  padding: 0 4px;
  gap: 18px;
  transition: min-height .42s var(--glass-ease);
}
body.famila-new-landing .site-header.is-scrolled .nav-inner {
  min-height: 62px;
}
body.famila-new-landing .logo-link img {
  width: 164px;
  transition: width .4s var(--glass-ease);
}
body.famila-new-landing .site-header.is-scrolled .logo-link img { width: 149px; }
body.famila-new-landing .desktop-nav {
  gap: clamp(10px, 1.35vw, 26px);
  margin-inline: auto;
}
body.famila-new-landing .desktop-nav a {
  color: rgba(37,61,56,.70);
  font-size: 12px;
  font-weight: 700;
  border-radius: 10px;
  padding: 8px 2px;
  transition: color .2s ease, background .2s ease;
}
body.famila-new-landing .desktop-nav a:is(:hover, :focus-visible),
body.famila-new-landing .desktop-nav a.active { color: var(--glass-main); }
body.famila-new-landing .site-header .nav-side { gap: 9px; }
body.famila-new-landing .site-header .language {
  appearance:none;
  -webkit-appearance:none;
  background: rgba(255,255,255,.37) !important;
  border: 1px solid rgba(46,100,77,.16) !important;
  border-radius: 10px !important;
  color: var(--glass-main) !important;
  min-height: 39px;
  min-width: 56px;
  padding: 8px 12px;
  font-weight: 750;
  font-size: 12px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.64);
}
body.famila-new-landing .site-header .language:hover { background: rgba(232,241,235,.8) !important; }
body.famila-new-landing .site-header .btn-dark {
  border-radius: 10px;
  background: #104c45;
  min-height: 40px;
  font-size: 12px;
  box-shadow: 0 4px 12px rgba(10,57,49,.1);
}
body.famila-new-landing .site-header .btn-dark:hover {
  background: #176258;
  box-shadow: 0 7px 16px rgba(10,57,49,.15);
}
body.famila-new-landing .site-header .menu-button {
  flex: 0 0 auto;
  background: rgba(255,255,255,.35);
  border: 1px solid rgba(46,100,77,.18);
  border-radius: 11px;
}
body.famila-new-landing .site-header .mobile-menu {
  position: absolute;
  inset-inline: 0;
  top: calc(100% + 8px);
  padding: 12px 16px 18px;
  border: 1px solid rgba(255,255,255,.82);
  border-radius: 18px;
  background: rgba(250,253,250,.87);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  backdrop-filter: blur(24px) saturate(180%);
  box-shadow: 0 18px 40px rgba(15,60,50,.16);
}
body.famila-new-landing .site-header .mobile-menu[hidden] { display: none; }
/* Floating navbar doesn't occupy layout space: ensure content starts below it. */
body.famila-new-landing .announcement { display: none; }
body.famila-new-landing .hero { padding-top: 47px; }
html:has(body.famila-new-landing) { scroll-padding-top: 115px; }

/* Fine fallback for browsers not supporting backdrop-filter. */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  body.famila-new-landing .site-header { background: rgba(250,252,250,.95); }
  body.famila-new-landing .site-header.is-scrolled { background: rgba(250,252,250,.97); }
}
@media(max-width: 1080px) {
  body.famila-new-landing .site-header .nav-inner { width: calc(100% - 24px); gap: 10px; }
  body.famila-new-landing .logo-link img { width: 148px; }
  body.famila-new-landing .desktop-nav a { font-size: 11px; }
}
@media(max-width: 820px) {
  body.famila-new-landing .site-header { width: calc(100% - 28px); top: 12px; }
  body.famila-new-landing .site-header.is-scrolled { width: calc(100% - 36px); top: 8px; }
  body.famila-new-landing .site-header .nav-inner { min-height: 66px; }
  body.famila-new-landing .site-header.is-scrolled .nav-inner { min-height: 58px; }
  body.famila-new-landing .logo-link img { width: 145px; }
  body.famila-new-landing .site-header.is-scrolled .logo-link img { width: 134px; }
  body.famila-new-landing .site-header .menu-button { display:flex; }
  body.famila-new-landing .hero { padding-top: 68px; }
}
@media(max-width:620px) {
  body.famila-new-landing .site-header { width: calc(100% - 20px); border-radius: 17px; top: 9px; }
  body.famila-new-landing .site-header.is-scrolled { width: calc(100% - 22px); border-radius: 16px; top: 7px; }
  body.famila-new-landing .site-header .nav-inner { min-height: 60px; width: calc(100% - 18px); gap: 6px; }
  body.famila-new-landing .site-header.is-scrolled .nav-inner { min-height: 54px; }
  body.famila-new-landing .logo-link img { width: clamp(112px,33vw,136px); }
  body.famila-new-landing .site-header.is-scrolled .logo-link img { width: clamp(108px,30vw,127px); }
  body.famila-new-landing .site-header .nav-side { gap: 5px; }
  body.famila-new-landing .site-header .language { min-width: 43px; min-height: 36px; padding: 7px 8px; font-size: 10px; }
  body.famila-new-landing .site-header .btn-dark { min-height: 36px; font-size: 10px; padding: 8px 11px; }
  body.famila-new-landing .site-header .menu-button { min-width: 36px; width: 36px; height: 36px; }
  body.famila-new-landing .hero { padding-top: 70px; }
}
@media(max-width:370px) {
  body.famila-new-landing .site-header .nav-side .btn-sm { display: none; }
  body.famila-new-landing .site-header .nav-inner { width: calc(100% - 22px); }
  body.famila-new-landing .logo-link img { width: 131px; }
}
@media(prefers-reduced-motion:reduce) {
  body.famila-new-landing .site-header,
  body.famila-new-landing .site-header .nav-inner,
  body.famila-new-landing .logo-link img { transition: none; }
}

/* WordPress signed-in preview: avoid overlapping the top admin toolbar. */
@media (min-width: 783px) {
  body.admin-bar.famila-new-landing .site-header { top: 48px; }
  body.admin-bar.famila-new-landing .site-header.is-scrolled { top: 41px; }
}
@media (min-width: 601px) and (max-width: 782px) {
  body.admin-bar.famila-new-landing .site-header { top: 58px; }
  body.admin-bar.famila-new-landing .site-header.is-scrolled { top: 54px; }
}