/* =========================================================
   Luxe Paragon — HEADER (Premium Light Liquid Glass)
   File: /wp-content/themes/YOUR-CHILD-THEME/header.css
   Notes:
   - No animations
   - Glass buttons + glass nav
   - Premium dark-gray text
   - Mobile drawer uses .lp-header.is-open (toggle via JS)
========================================================= */

/* ---------- Design tokens (header-scoped) ---------- */
.lp-header{
  --ink: rgba(26,27,31,.88);
  --muted: rgba(26,27,31,.68);

  --stage-1: rgba(32,33,36,.12);
  --stage-2: rgba(255,255,255,.22);

  --glass: rgba(255,255,255,.22);
  --glass2: rgba(255,255,255,.16);

  --line: rgba(26,27,31,.10);
  --line2: rgba(26,27,31,.14);

  --shadow: 0 18px 50px rgba(0,0,0,.08);
  --shadow-float: 0 16px 36px rgba(0,0,0,.10);
  --inset: inset 0 1px 0 rgba(255,255,255,.70);

  --r-pill: 999px;
  --r-md: 18px;
  --r-lg: 22px;
}

/* ---------- Hard stop: no movement / no animations ---------- */
.lp-header *,
.lp-header *::before,
.lp-header *::after{
  animation: none !important;
  transition: none !important;
}
.lp-header *:hover,
.lp-header *:active,
.lp-header *:focus{
  transform: none !important;
}

/* ---------- Header bar “stage” ---------- */
.lp-header{
  position: sticky;
  top: 0;
  z-index: 9999;

  background: linear-gradient(180deg, var(--stage-1) 0%, var(--stage-2) 100%) !important;
  border-bottom: 1px solid rgba(26,27,31,.08) !important;
  box-shadow: var(--shadow) !important;

  backdrop-filter: blur(18px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(140%) !important;
}

/* ---------- Inner layout ---------- */
.lp-header-inner{
  max-width: 1120px;
  margin: 0 auto;
  padding: 14px 16px;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

/* ---------- Brand ---------- */
.lp-brand{
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none !important;
  transform: none !important;
}

.lp-logo{
  width: 44px;
  height: 44px;

  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

.lp-brand-text{
  font-weight: 900;
  letter-spacing: .28em;
  text-transform: uppercase;
  font-size: 14px;

  /* Apple-style premium graphite */
  color: rgba(60,64,72,.88);

  /* subtle premium sharpness */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---------- Burger (glass) ---------- */
.lp-burger{
  display: none; /* shown on mobile via media query */
  width: 46px;
  height: 46px;
  border-radius: 16px;

  background: linear-gradient(180deg, rgba(255,255,255,.26), rgba(255,255,255,.16));
  border: 1px solid var(--line2);
  box-shadow: var(--shadow-float), var(--inset);

  padding: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.lp-burger span{
  display: block;
  width: 20px;
  height: 2px;
  background: rgba(26,27,31,.70);
  margin: 4px auto;
  border-radius: 2px;
}

/* ---------- Nav (desktop) ---------- */
.lp-nav{
  display: flex;
  align-items: center;
  gap: 14px;
}

/* Menu capsule */
.lp-menu{
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;

  margin: 0;
  padding: 6px;

  background: linear-gradient(180deg, rgba(255,255,255,.24), rgba(255,255,255,.14));
  border: 1px solid var(--line);
  border-radius: var(--r-pill);

  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);

  box-shadow: var(--shadow-float), var(--inset);
}

.lp-menu li{ margin: 0; padding: 0; }

.lp-menu a{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 10px 14px;
  border-radius: var(--r-pill);

  color: rgba(26,27,31,.76);
  font-weight: 850;
  font-size: 13px;
  text-decoration: none !important;

  background: transparent;
  border: 1px solid transparent;
}

/* Active */
.lp-menu li.is-active > a{
  background: rgba(255,255,255,.22);
  border-color: rgba(26,27,31,.10);
  box-shadow: var(--inset);
  color: rgba(26,27,31,.88);
}

/* ---------- Submenu ---------- */
.lp-has-submenu{ position: relative; }

.lp-submenu{
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  min-width: 260px;

  list-style: none;
  margin: 0;
  padding: 10px;

  border-radius: var(--r-lg);
  background: linear-gradient(180deg, rgba(255,255,255,.26), rgba(255,255,255,.16));
  border: 1px solid var(--line2);

  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);

  box-shadow: 0 18px 50px rgba(0,0,0,.12), var(--inset);
  display: none;
}

.lp-has-submenu:hover .lp-submenu,
.lp-has-submenu:focus-within .lp-submenu,
.lp-has-submenu.is-open .lp-submenu{
  display: block;
}

.lp-submenu a{
  width: 100%;
  justify-content: flex-start;
  border-radius: 14px;
  padding: 10px 12px;
  color: rgba(26,27,31,.80);
}

/* ---------- Auth area ---------- */
.lp-auth{
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Glass button */
.lp-auth-btn,
.lp-header-logout{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 12px 16px;
  border-radius: var(--r-pill);

  background: linear-gradient(180deg, rgba(255,255,255,.26), rgba(255,255,255,.16));
  border: 1px solid var(--line2);
  color: rgba(26,27,31,.84);
  font-weight: 900;
  font-size: 13px;
  text-decoration: none !important;

  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);

  box-shadow: var(--shadow-float), var(--inset);
}

.lp-header-user{
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.lp-header-avatar img{
  width: 38px;
  height: 38px;
  border-radius: 999px;

  background: rgba(255,255,255,.18);
  border: 1px solid var(--line2);
  box-shadow: var(--shadow-float), var(--inset);
}

/* =========================================================
   MOBILE DRAWER
   - The HTML stays the same
   - When burger is clicked, add .is-open to .lp-header
========================================================= */
@media (max-width: 980px){
  .lp-burger{
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* Drawer */
  .lp-nav{
    position: fixed;
    top: 74px;
    left: 16px;
    right: 16px;

    flex-direction: column;
    align-items: stretch;
    gap: 12px;

    padding: 14px;
    border-radius: 22px;

    background: linear-gradient(180deg, rgba(255,255,255,.26), rgba(255,255,255,.16));
    border: 1px solid var(--line2);

    backdrop-filter: blur(18px) saturate(150%);
    -webkit-backdrop-filter: blur(18px) saturate(150%);

    box-shadow: 0 22px 60px rgba(0,0,0,.12), var(--inset);

    display: none;
  }

  .lp-header.is-open .lp-nav{
    display: flex;
  }

  .lp-menu{
    flex-direction: column;
    border-radius: 18px;
    padding: 10px;
    gap: 6px;
  }

  .lp-menu a{
    width: 100%;
    justify-content: flex-start;
    padding: 12px 12px;
  }

  
 /* Submenu (mobile): hidden until Authenticate is tapped */
.lp-submenu{
  position: static;
  display: none;
  margin-top: 8px;

  padding: 8px;
  border-radius: 16px;

  box-shadow: none;
  background: rgba(255,255,255,.18);
  border: 1px solid rgba(26,27,31,.10);
}

/* Show submenu only when opened (tap) */
.lp-has-submenu.is-open .lp-submenu{
  display: block;
}

/* Make submenu links full-width and neat on mobile */
.lp-submenu a{
  display: block;
  width: 100%;
  padding: 12px 12px;
  border-radius: 14px;
}

  .lp-auth{
    justify-content: stretch;
  }

  .lp-auth-btn,
  .lp-header-logout{
    width: 100%;
  }
}


/* =========================================================
   FIX BURGER ICON — force vertical stacked lines
========================================================= */

.lp-burger{
  /* base (desktop): hidden */
  display: none;

  width: 46px;
  height: 46px;
  border-radius: 16px;

  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;

  -webkit-tap-highlight-color: transparent;
}

.lp-burger span{
  display: block !important;
  width: 22px !important;
  height: 2px !important;
  margin: 0 !important;
  background: rgba(26,27,31,.75) !important;
  border-radius: 2px !important;
}

/* =========================================================
   MOBILE: show burger + darker glass drawer (still transparent)
========================================================= */
@media (max-width: 980px){

  .lp-burger{
    display: flex !important;
  }

    .lp-nav{
  /* stronger glass — more solid, still premium */
  background: linear-gradient(
    180deg,
    rgba(28,29,32,.46) 0%,
    rgba(255,255,255,.42) 100%
  ) !important;

  border: 1px solid rgba(26,27,31,.24) !important;

  backdrop-filter: blur(22px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(22px) saturate(140%) !important;

  box-shadow:
    0 32px 90px rgba(0,0,0,.24),
    inset 0 1px 0 rgba(255,255,255,.38) !important;
}
}

/* =========================================================
   MOBILE DRAWER: make Sign In/Create Account readable (still glass)
========================================================= */
@media (max-width: 980px){

  /* stronger glass for auth area inside drawer */
  .lp-nav .lp-auth-btn,
  .lp-nav .lp-header-logout{
    background: linear-gradient(
      180deg,
      rgba(28,29,32,.22) 0%,
      rgba(255,255,255,.18) 100%
    ) !important;

    border: 1px solid rgba(26,27,31,.20) !important;

    box-shadow:
      0 18px 46px rgba(0,0,0,.18),
      inset 0 1px 0 rgba(255,255,255,.60) !important;

    color: rgba(26,27,31,.90) !important;
  }

  /* add a tiny “stage” behind the auth block (subtle) */
  .lp-nav .lp-auth{
    padding: 10px !important;
    border-radius: 18px !important;
    background: rgba(28,29,32,.10) !important;
    border: 1px solid rgba(26,27,31,.10) !important;
  }
}

/* =========================================
   Sticky header — Desktop + Mobile (Astra)
   Paste at END of header.css
========================================= */

/* 1) Make ALL Astra header wrappers sticky */
#masthead,
.site-header,
.ast-primary-header-bar,
.ast-mobile-header,
.ast-mobile-header-wrap,
.ast-mobile-header-bar,
.ast-builder-layout-element.ast-header-row,
.ast-builder-layout-element.ast-header-row *{
  position: sticky !important;
  top: 0 !important;
  z-index: 999999 !important;
}

/* 2) If Astra uses a separate "main header bar" container */
.ast-main-header-bar-wrap,
.ast-primary-header-bar-wrap,
.ast-mobile-header-bar-wrap{
  position: sticky !important;
  top: 0 !important;
  z-index: 999999 !important;
}

/* 3) Sticky breaks if any parent has overflow hidden/auto */
html, body,
#page, .site, .site-content{
  overflow: visible !important;
}

/* 4) iOS Safari sticky reliability */
.ast-header-break-point #masthead,
.ast-header-break-point .site-header,
.ast-header-break-point .ast-mobile-header-wrap,
.ast-header-break-point .ast-mobile-header-bar-wrap{
  position: -webkit-sticky !important;
  position: sticky !important;
}

/* =========================================
   Luxe Paragon Header — Fix squished avatar (mobile)
========================================= */

@media (max-width: 768px){

  /* Force avatar size + perfect circle */
  .site-header img.avatar,
  .ast-header-account-wrap img.avatar,
  .ast-header-account img.avatar,
  .site-header .ast-header-account-wrap img{
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;

    border-radius: 50% !important;
    object-fit: cover !important;
    object-position: center !important;

    flex: 0 0 36px !important;
    display: inline-block !important;
  }

  /* Keep profile + signout aligned */
  .ast-header-account-wrap a,
  .ast-header-account a{
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
  }

}