/* =========================================================
   LUXE PARAGON — PREMIUM UI (GLOBAL)
   File: /wp-content/themes/astra-child-luxeparagon/lp-premium-ui.css
========================================================= */

/* ---------------------------
   TOKENS
--------------------------- */
:root{
  --lp-font:
    -apple-system,
    BlinkMacSystemFont,
    "SF Pro Display",
    "SF Pro Text",
    "Helvetica Neue",
    Helvetica,
    "Segoe UI",
    Roboto,
    Arial,
    sans-serif;

  --lp-ink: rgba(26,27,31,.88);
  --lp-ink-soft: rgba(26,27,31,.68);
  --lp-ink-faint: rgba(26,27,31,.52);

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

  --lp-glass-1: rgba(255,255,255,.22);
  --lp-glass-2: rgba(255,255,255,.14);

  --lp-line-1: rgba(26,27,31,.10);
  --lp-line-2: rgba(26,27,31,.14);

  --lp-r-xs: 12px;
  --lp-r-sm: 16px;
  --lp-r-md: 18px;
  --lp-r-lg: 22px;
  --lp-r-xl: 26px;
  --lp-r-pill: 999px;

  --lp-shadow-soft: 0 12px 28px rgba(0,0,0,.08);
  --lp-shadow-float: 0 16px 36px rgba(0,0,0,.10);
  --lp-shadow-deep: 0 22px 60px rgba(0,0,0,.12);
  --lp-inset: inset 0 1px 0 rgba(255,255,255,.70);
}

/* ---------------------------
   GLOBAL FONT (UNIFORM)
   - Fixes heading font mismatch from theme
--------------------------- */
html, body,
button, input, select, textarea,
h1,h2,h3,h4,h5,h6,
.site-title, .site-description,
.entry-title, .page-title, .wp-block-heading,
.wp-block-site-title, .wp-block-site-tagline{
  font-family: var(--lp-font) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html, body{
  color: var(--lp-ink) !important;
  font-weight: 500;
  letter-spacing: -0.01em;
}

/* Typography hierarchy (Apple-like) */
h1,h2,h3,h4,h5,h6,
.entry-title, .page-title, .wp-block-heading{
  color: var(--lp-ink) !important;
  font-weight: 850 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.12;
}

h1{ font-size: clamp(32px, 3.6vw, 54px); }
h2{ font-size: clamp(22px, 2.4vw, 34px); }
h3{ font-size: clamp(18px, 2.0vw, 26px); }
h4{ font-size: clamp(16px, 1.7vw, 20px); }
h5{ font-size: 15px; }
h6{ font-size: 13px; letter-spacing: .02em; }

p, li{
  color: var(--lp-ink-soft);
  line-height: 1.75;
}

/* Links: no forced blue */
a{ color: var(--lp-ink); }
a:hover{ color: var(--lp-ink); }

/* ---------------------------
   GLASS COMPONENT SYSTEM
--------------------------- */

/* Stage background behind glass (optional utility class) */
.lp-stage{
  background: linear-gradient(180deg, var(--lp-stage-1), var(--lp-stage-2));
  border: 1px solid rgba(26,27,31,.08);
  border-radius: 34px;
  box-shadow: 0 22px 64px rgba(0,0,0,.08);
}

/* Glass panel */
.lp-glass{
  background: linear-gradient(180deg, var(--lp-glass-1), var(--lp-glass-2));
  border: 1px solid var(--lp-line-1);
  border-radius: var(--lp-r-xl);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  box-shadow: var(--lp-shadow-deep), var(--lp-inset);
}

/* Glass card */
.lp-card{
  background: linear-gradient(180deg, var(--lp-glass-1), var(--lp-glass-2));
  border: 1px solid var(--lp-line-1);
  border-radius: var(--lp-r-xl);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  box-shadow: var(--lp-shadow-deep), var(--lp-inset);
}

/* Glass pill (safe for small screens) */
.lp-pill{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px 12px;

  border-radius: var(--lp-r-pill);
  border: 1px solid var(--lp-line-2);
  background: rgba(255,255,255,.18);

  box-shadow: var(--lp-shadow-soft), var(--lp-inset);

  color: rgba(26,27,31,.82);
  font-weight: 800;
  font-size: 13px;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Glass buttons (use your existing classes too) */
.lp-btn-solid,
.lp-btn-ghost,
.lp-btn-glass{
  font-family: var(--lp-font) !important;
  border-radius: var(--lp-r-pill) !important;
  min-height: 44px !important;
  padding: 12px 16px !important;

  background: rgba(255,255,255,.22) !important;
  border: 1px solid var(--lp-line-2) !important;
  color: rgba(26,27,31,.86) !important;

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

  box-shadow: var(--lp-shadow-float), var(--lp-inset) !important;
  text-decoration: none !important;
}

/* ---------------------------
   COOKIE MODAL (YOUR CUSTOM SYSTEM)
   HTML is injected in functions.php with id="lpCookie"
--------------------------- */

/* Hidden by default */
#lpCookie{
  position: fixed !important;
  inset: 0 !important;
  z-index: 999999 !important;
  display: none !important;
}

/* Show when JS adds .is-open */
#lpCookie.is-open{
  display: block !important;
}

/* Backdrop */
#lpCookie .lp-cookie__backdrop{
  position: absolute !important;
  inset: 0 !important;
  background: rgba(10,10,12,.35) !important;
  backdrop-filter: blur(10px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(10px) saturate(140%) !important;
}

/* Center panel */
#lpCookie .lp-cookie__panel{
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;

  width: min(560px, calc(100vw - 28px)) !important;
  max-width: 560px !important;

  border-radius: 22px !important;
  overflow: hidden !important;

  background: linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,.14)) !important;
  border: 1px solid rgba(26,27,31,.14) !important;
  box-shadow: 0 28px 90px rgba(0,0,0,.25), var(--lp-inset) !important;

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

#lpCookie .lp-cookie__content{
  padding: 18px !important;
}

#lpCookie .lp-cookie__title{
  margin: 0 0 8px !important;
  font-weight: 850 !important;
  font-size: 16px !important;
  color: rgba(26,27,31,.88) !important;
}

#lpCookie .lp-cookie__desc{
  margin: 0 0 12px !important;
  color: rgba(26,27,31,.68) !important;
  line-height: 1.65 !important;
  font-size: 13.5px !important;
}

#lpCookie .lp-cookie__links{
  display: flex !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
  margin-bottom: 14px !important;
  color: rgba(26,27,31,.62) !important;
  font-size: 13px !important;
}

#lpCookie .lp-cookie__link{
  color: rgba(26,27,31,.78) !important;
  text-decoration: none !important;
  border-bottom: 1px solid rgba(26,27,31,.18) !important;
  padding-bottom: 1px !important;
}

#lpCookie .lp-cookie__actions{
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 10px !important;
}

#lpCookie .lp-cookie__btn{
  width: 100% !important;
}

/* Lock scroll when open (your JS toggles html.lp-cookie-lock) */
html.lp-cookie-lock,
html.lp-cookie-lock body{
  overflow: hidden !important;
}

/* Mobile: stack cookie buttons */
@media (max-width: 420px){
  #lpCookie .lp-cookie__actions{
    grid-template-columns: 1fr !important;
  }
  .lp-pill{ font-size: 12px; }
}