/* ============================================================
   HEADER — header.css
   Loaded after style.css. Styles for .hdr, .logo, .nav and .menu.
   ============================================================ */

.hdr{
  position:-webkit-sticky;position:sticky;top:0;z-index:50;
  background:rgba(255,255,255,.9);
  border-bottom:1px solid transparent;
  transition:background .3s ease,border-color .3s ease,box-shadow .35s var(--ease);
}
/* OceanWP (and many themes) set `overflow-x:hidden` on <body>, which turns it
   into a scroll container and stops the header from sticking. Override it. */
body.wcic-page{overflow-x:clip}
@supports not (overflow:clip){
  body.wcic-page{overflow-x:visible}
}
/* Keep the sticky header below the WordPress admin bar when logged in.
   At <=600px the admin bar is position:absolute (scrolls away), so no offset. */
body.admin-bar .hdr{top:32px}
@media (min-width:601px) and (max-width:782px){
  body.admin-bar .hdr{top:46px}
}
@supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  .hdr{
    background:rgba(255,255,255,.72);
    -webkit-backdrop-filter:blur(18px) saturate(180%);
    backdrop-filter:blur(18px) saturate(180%);
  }
  .hdr.scrolled{background:rgba(255,255,255,.9)}
}
.hdr.scrolled{border-bottom-color:var(--bd);box-shadow:0 10px 30px -18px rgba(26,26,44,.28)}
.hdr-in{display:flex;align-items:center;gap:16px;min-height:68px}
.hdr-prog{position:absolute;left:0;right:0;bottom:-1px;height:2px;background:rgba(128,105,191,.1);pointer-events:none}
.hdr-prog span{display:block;height:100%;width:100%;background:linear-gradient(90deg,var(--p),var(--s));transform:scaleX(0);transform-origin:0 50%;transition:transform .1s linear}

/* logo */
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--tx);flex:0 0 auto;min-width:0;border-radius:12px}
.logo-mark{
  display:grid;place-items:center;width:38px;height:38px;border-radius:11px;
  background:linear-gradient(135deg,var(--p) 0%,#9d85d8 55%,var(--s) 100%);color:#fff;
  box-shadow:0 8px 18px -9px rgba(128,105,191,.9),inset 0 1px 0 rgba(255,255,255,.28);
  transition:transform .35s var(--ease),box-shadow .35s var(--ease);
}
.logo-mark svg{width:20px;height:20px}
.logo:hover .logo-mark{transform:rotate(-8deg) scale(1.06);box-shadow:0 12px 22px -9px rgba(128,105,191,1),inset 0 1px 0 rgba(255,255,255,.32)}
.logo-txt{display:flex;flex-direction:column;justify-content:center;line-height:1.15;min-width:0}
.logo-txt b{font-size:17px;font-weight:700;letter-spacing:-.02em;background:linear-gradient(90deg,var(--p-d),var(--p-l));-webkit-background-clip:text;background-clip:text;color:transparent}
.logo-txt span{font-size:11.5px;font-weight:500;color:var(--mu);letter-spacing:.04em;white-space:nowrap}

/* logo image set in Customizer → Site Identity (replaces the icon tile) */
.logo-mark.has-custom-logo{
  width:auto;height:auto;display:block;place-items:initial;
  background:none;box-shadow:none;border-radius:0;
}
.logo-mark.has-custom-logo .logo-img{
  display:block;width:auto;height:auto;
  max-width:min(46vw,220px);max-height:42px;object-fit:contain;
}
.logo:hover .logo-mark.has-custom-logo{transform:none;box-shadow:none}
.ft-logo .logo-mark.has-custom-logo .logo-img{max-height:46px}

/* desktop nav */
.nav{margin-inline:auto}
.nav-inner{overflow:hidden;min-height:0}
.nav-list{list-style:none;display:flex;align-items:center;gap:2px;margin:0;padding:0}
.nav-list a{
  position:relative;display:block;padding:8px 14px;border-radius:999px;
  font-size:14.5px;font-weight:500;color:var(--mu);text-decoration:none;white-space:nowrap;
  transition:color .22s ease,background .22s ease,box-shadow .25s ease;
}
.nav-list a:hover{color:var(--p-d);background:rgba(128,105,191,.08)}
.nav-list a[aria-current="true"]{
  color:var(--p-d);font-weight:600;background:rgba(128,105,191,.12);
  box-shadow:inset 0 0 0 1px rgba(128,105,191,.1);
}

/* header actions */
.hdr-act{display:flex;align-items:center;gap:10px;flex:0 0 auto}
.btn.hdr-cta{
  display:inline-flex;align-items:center;gap:8px;padding:9px 18px;border-radius:999px;
  background:linear-gradient(135deg,var(--p),var(--p-l));border-color:transparent;color:#fff;
  font-size:14px;font-weight:600;box-shadow:0 10px 20px -12px rgba(128,105,191,.95);
  transition:transform .22s var(--ease),box-shadow .25s var(--ease),filter .2s ease;
}
.hdr-cta svg{width:16px;height:16px;flex:0 0 auto}
.btn.hdr-cta:hover{background:linear-gradient(135deg,var(--p),var(--p-l));transform:translateY(-2px);filter:saturate(1.08);box-shadow:0 16px 26px -12px rgba(128,105,191,1)}
.btn.hdr-cta:active{transform:translateY(0) scale(.985)}

/* burger */
.menu{
  display:none;width:42px;height:42px;align-items:center;justify-content:center;
  border:1px solid var(--bd);border-radius:12px;background:#fff;cursor:pointer;
  box-shadow:var(--sh-xs);
  transition:border-color .22s ease,background .22s ease,box-shadow .25s ease;
}
.menu:hover{border-color:var(--bd-strong);background:var(--tint);box-shadow:var(--sh-sm)}
.burger{display:block;position:relative;width:18px;height:12px}
.burger i{position:absolute;left:0;width:100%;height:2px;border-radius:2px;background:var(--tx);transition:top .3s var(--ease-soft),transform .3s var(--ease-soft),opacity .2s ease}
.burger i:nth-child(1){top:0}
.burger i:nth-child(2){top:5px}
.burger i:nth-child(3){top:10px}
.menu[aria-expanded="true"] .burger i:nth-child(1){top:5px;transform:rotate(45deg)}
.menu[aria-expanded="true"] .burger i:nth-child(2){opacity:0;transform:scaleX(.2)}
.menu[aria-expanded="true"] .burger i:nth-child(3){top:5px;transform:rotate(-45deg)}

/* header — collapsed / mobile layout */
@media (max-width:960px){
  .menu{display:inline-flex}
  .nav{
    position:absolute;left:0;right:0;top:100%;margin:0;
    display:grid;grid-template-rows:0fr;opacity:0;visibility:hidden;overflow:hidden;
    background:#fff;
    border-bottom:1px solid var(--bd);
    box-shadow:0 26px 50px -30px rgba(26,26,44,.32);
    transition:grid-template-rows .34s var(--ease-soft),opacity .24s ease,visibility .34s;
  }
  .nav.open{grid-template-rows:1fr;opacity:1;visibility:visible}
  .nav-inner{overflow:hidden;min-height:0}
  .nav-list{flex-direction:column;align-items:stretch;gap:2px;padding:10px 20px 16px}
  .nav-list li{width:100%}
  .nav-list a{padding:12px 14px;border-radius:10px;font-size:15px}
  .nav-list a[aria-current="true"]{background:rgba(128,105,191,.13);box-shadow:none}
}
@media (max-width:640px){
  :root{--hdr-anchor:76px}
  .hdr-in{min-height:62px;gap:10px}
  .logo-txt span{display:none}
  .hdr-cta{padding:9px 14px}
  .hdr-cta span{display:none}
  .hdr-cta svg{width:18px;height:18px}
 
}
.logo-custom {
  display: inline-flex;
  align-items: center;
  background: none;
  box-shadow: none;
  border-radius: 0;
  padding: 0;
  width: auto;
  height: auto;
}

.logo-custom img.logo-img {
  display: block;
  width: auto;
  height: 44px;       /* change to make the logo bigger or smaller */
  max-width: 180px;
  object-fit: contain;
}