/* ==========================================================
   Smiles To Miles — MASTER PUBLIC HEADER V6.6
   The homepage/landing-page header is the geometry master for
   every public page that includes nav.php.

   Desktop master:
   - 32px outer left/right gutter
   - 116px header shell height
   - 26px top offset
   - 28px radius
   - Grey glass + Orange branding
   ========================================================== */

:root{
  --stm-header-gutter:24px;
  --stm-header-top:18px;
  --stm-header-height:92px;
  --stm-header-radius:20px;
  --stm-header-pad-x:20px;

  --stm-header-grey:var(--stm-grey-850);
  --stm-header-grey-dark:var(--stm-grey-950);
  --stm-header-orange:var(--stm-orange);
  --stm-header-orange-dark:var(--stm-orange-dark);
}

/* One consistent header canvas on every public page */
body .stm-public-header{
  position:absolute!important;
  z-index:900!important;
  top:var(--stm-header-top)!important;
  left:0!important;
  right:0!important;
  width:100%!important;
  margin:0!important;
  padding:0!important;
  pointer-events:none;
}

/* Same width + same height as the approved landing-page header */
body .stm-public-header .stm-nav-shell{
  position:relative!important;
  width:calc(100% - (var(--stm-header-gutter) * 2))!important;
  max-width:none!important;
  min-width:0!important;

  height:var(--stm-header-height)!important;
  min-height:var(--stm-header-height)!important;
  max-height:var(--stm-header-height)!important;

  margin:0 auto!important;
  padding:0 var(--stm-header-pad-x)!important;

  display:grid!important;
  grid-template-columns:max-content minmax(0,1fr) max-content!important;
  align-items:center!important;
  column-gap:28px!important;

  border:1px solid rgba(255,255,255,.18)!important;
  border-radius:var(--stm-header-radius)!important;
  background:
    linear-gradient(120deg,rgba(75,75,80,.96),rgba(61,61,66,.93))!important;
  box-shadow:0 18px 52px rgba(26,26,30,.22)!important;

  backdrop-filter:blur(18px)!important;
  -webkit-backdrop-filter:blur(18px)!important;

  overflow:visible!important;
  pointer-events:auto;
}

/* Brand lock-up — logo + Smiles To Miles, one line */
body .stm-public-header .stm-brand{
  display:inline-flex!important;
  flex-direction:row!important;
  flex-wrap:nowrap!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:14px!important;

  width:max-content!important;
  min-width:max-content!important;
  max-width:none!important;

  margin:0!important;
  padding:0!important;
  color:#fff!important;
  text-decoration:none!important;
  white-space:nowrap!important;
  overflow:visible!important;
}
body .stm-public-header .stm-brand img{
  display:block!important;
  flex:0 0 68px!important;
  width:68px!important;
  height:68px!important;
  min-width:68px!important;
  max-width:68px!important;
  object-fit:contain!important;
  object-position:center!important;
  margin:0!important;
}
body .stm-public-header .stm-brand-copy{
  display:inline-flex!important;
  flex:0 0 auto!important;
  align-items:center!important;
  width:max-content!important;
  min-width:max-content!important;
  max-width:none!important;
  margin:0!important;
  padding:0!important;
  white-space:nowrap!important;
}
body .stm-public-header .stm-brand-copy strong{
  display:inline-block!important;
  width:max-content!important;
  min-width:max-content!important;
  margin:0!important;
  padding:0!important;

  font-family:"Shrikhand",cursive!important;
  font-size:1.72rem!important;
  font-weight:400!important;
  line-height:1!important;
  letter-spacing:0!important;

  color:var(--stm-header-orange)!important;
  white-space:nowrap!important;
  word-break:normal!important;
  overflow-wrap:normal!important;
  hyphens:none!important;
}
body .stm-public-header .stm-brand-copy small{
  display:none!important;
}

/* Navigation */
body .stm-public-header .stm-primary-nav{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:8px!important;
  min-width:0!important;
  margin:0!important;
  padding:0!important;
}
body .stm-public-header .stm-primary-nav a{
  position:relative!important;
  display:inline-flex!important;
  align-items:center!important;
  min-height:46px!important;
  padding:0 13px!important;
  margin:0!important;

  color:#fff!important;
  background:transparent!important;
  border:0!important;
  text-decoration:none!important;
  white-space:nowrap!important;

  font-size:.82rem!important;
  font-weight:750!important;
  line-height:1!important;
}
body .stm-public-header .stm-primary-nav a::after{
  content:""!important;
  position:absolute!important;
  left:13px!important;
  right:13px!important;
  bottom:2px!important;
  height:2px!important;
  border-radius:2px!important;
  background:var(--stm-header-orange)!important;
  transform:scaleX(0);
  transform-origin:center;
  transition:transform .18s ease;
}
body .stm-public-header .stm-primary-nav a:hover::after,
body .stm-public-header .stm-primary-nav a.is-active::after{
  transform:scaleX(1);
}

/* Actions */
body .stm-public-header .stm-nav-actions{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:12px!important;
  width:max-content!important;
  min-width:max-content!important;
  margin:0!important;
  padding:0!important;
}
body .stm-public-header .stm-nav-quote{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-height:68px!important;
  height:68px!important;
  padding:0 27px!important;
  margin:0!important;

  color:#fff!important;
  background:var(--stm-header-orange)!important;
  border:1px solid var(--stm-header-orange)!important;
  border-radius:17px!important;
  box-shadow:0 12px 28px rgba(247,148,0,.20)!important;

  font-size:.86rem!important;
  font-weight:900!important;
  line-height:1!important;
  white-space:nowrap!important;
  cursor:pointer!important;
}
body .stm-public-header .stm-nav-quote:hover{
  background:var(--stm-header-orange-dark)!important;
  border-color:var(--stm-header-orange-dark)!important;
}
body .stm-public-header .stm-account-wrap{
  position:relative!important;
  margin:0!important;
}
body .stm-public-header .stm-account-button{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:10px!important;

  min-height:68px!important;
  height:68px!important;
  padding:0 14px 0 10px!important;
  margin:0!important;

  color:#fff!important;
  background:rgba(255,255,255,.06)!important;
  border:1px solid rgba(255,255,255,.22)!important;
  border-radius:17px!important;
  white-space:nowrap!important;
  cursor:pointer!important;
}
body .stm-public-header .stm-account-avatar{
  display:grid!important;
  place-items:center!important;
  flex:0 0 46px!important;
  width:46px!important;
  height:46px!important;
  border-radius:50%!important;
  background:var(--stm-header-orange)!important;
  color:#fff!important;
}
body .stm-public-header .stm-account-label{
  font-size:.78rem!important;
  font-weight:850!important;
  color:#fff!important;
}

/* Scrolled state: retain SAME width and height so the header does not jump */
body .stm-public-header.is-scrolled{
  position:fixed!important;
  top:12px!important;
}
body .stm-public-header.is-scrolled .stm-nav-shell{
  width:calc(100% - (var(--stm-header-gutter) * 2))!important;
  height:var(--stm-header-height)!important;
  min-height:var(--stm-header-height)!important;
  max-height:var(--stm-header-height)!important;
  background:rgba(61,61,66,.97)!important;
  box-shadow:0 15px 44px rgba(26,26,30,.25)!important;
}

/* Mobile toggle is hidden on desktop */
body .stm-public-header .stm-nav-toggle{
  display:none!important;
}

/* Large tablets / smaller laptops */
@media(max-width:1280px){
  :root{
    --stm-header-gutter:24px;
    --stm-header-height:102px;
    --stm-header-top:20px;
    --stm-header-pad-x:20px;
  }
  body .stm-public-header .stm-brand img{
    flex-basis:58px!important;
    width:58px!important;
    height:58px!important;
    min-width:58px!important;
    max-width:58px!important;
  }
  body .stm-public-header .stm-brand-copy strong{
    font-size:1.40rem!important;
  }
  body .stm-public-header .stm-primary-nav{
    gap:2px!important;
  }
  body .stm-public-header .stm-primary-nav a{
    padding-left:9px!important;
    padding-right:9px!important;
    font-size:.75rem!important;
  }
  body .stm-public-header .stm-nav-quote{
    min-height:58px!important;
    height:58px!important;
    padding:0 18px!important;
    font-size:.76rem!important;
  }
  body .stm-public-header .stm-account-button{
    min-height:58px!important;
    height:58px!important;
  }
  body .stm-public-header .stm-account-avatar{
    flex-basis:40px!important;
    width:40px!important;
    height:40px!important;
  }
}

/* Tablet / mobile */
@media(max-width:991px){
  :root{
    --stm-header-gutter:16px;
    --stm-header-height:82px;
    --stm-header-top:12px;
    --stm-header-radius:22px;
    --stm-header-pad-x:14px;
  }

  body .stm-public-header .stm-nav-shell{
    grid-template-columns:max-content 1fr max-content!important;
    column-gap:10px!important;
  }

  body .stm-public-header .stm-brand{
    gap:9px!important;
  }
  body .stm-public-header .stm-brand img{
    flex-basis:50px!important;
    width:50px!important;
    height:50px!important;
    min-width:50px!important;
    max-width:50px!important;
  }
  body .stm-public-header .stm-brand-copy strong{
    font-size:1.18rem!important;
  }

  body .stm-public-header .stm-nav-toggle{
    display:block!important;
    justify-self:end!important;
    width:42px!important;
    height:42px!important;
    padding:7px!important;
    margin:0!important;
    border:0!important;
    border-radius:11px!important;
    background:rgba(255,255,255,.08)!important;
  }
  body .stm-public-header .stm-nav-toggle span{
    display:block!important;
    width:24px!important;
    height:2px!important;
    margin:5px auto!important;
    background:#fff!important;
  }

  body .stm-public-header .stm-primary-nav{
    position:absolute!important;
    left:14px!important;
    right:14px!important;
    top:calc(var(--stm-header-height) + 8px)!important;

    display:none!important;
    flex-direction:column!important;
    align-items:stretch!important;
    gap:2px!important;

    padding:10px!important;
    border:1px solid rgba(255,255,255,.15)!important;
    border-radius:18px!important;
    background:rgba(61,61,66,.98)!important;
    box-shadow:0 18px 45px rgba(25,25,28,.24)!important;
    backdrop-filter:blur(18px)!important;
    -webkit-backdrop-filter:blur(18px)!important;
  }
  body .stm-public-header .stm-primary-nav.is-open{
    display:flex!important;
  }
  body .stm-public-header .stm-primary-nav a{
    min-height:44px!important;
    justify-content:flex-start!important;
    padding:0 13px!important;
    font-size:.78rem!important;
  }
  body .stm-public-header .stm-primary-nav a::after{
    left:13px!important;
    right:auto!important;
    bottom:4px!important;
    width:28px!important;
  }

  body .stm-public-header .stm-nav-quote{
    display:none!important;
  }
  body .stm-public-header .stm-account-button{
    min-height:50px!important;
    height:50px!important;
    padding:0 8px!important;
  }
  body .stm-public-header .stm-account-avatar{
    flex-basis:36px!important;
    width:36px!important;
    height:36px!important;
  }
  body .stm-public-header .stm-account-label{
    display:none!important;
  }
}

/* Small phones */
@media(max-width:480px){
  :root{
    --stm-header-gutter:10px;
    --stm-header-height:72px;
    --stm-header-top:9px;
    --stm-header-radius:18px;
    --stm-header-pad-x:10px;
  }

  body .stm-public-header .stm-nav-shell{
    column-gap:7px!important;
  }
  body .stm-public-header .stm-brand{
    gap:7px!important;
  }
  body .stm-public-header .stm-brand img{
    flex-basis:43px!important;
    width:43px!important;
    height:43px!important;
    min-width:43px!important;
    max-width:43px!important;
  }
  body .stm-public-header .stm-brand-copy strong{
    font-size:1rem!important;
  }
  body .stm-public-header .stm-account-wrap{
    display:none!important;
  }
}