/* =========================================================
   LUXE PARAGON — GLOBAL DESIGN SYSTEM (Premium Light Glass)
   - Uniform font everywhere (including headings)
   - Typography scale (Apple-like hierarchy)
   - Glass components: panels, cards, buttons, pills
   - Premium dark gray text
   - No animations by default
========================================================= */

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

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

  /* Surfaces (stage behind glass) */
  --lp-stage-1: rgba(32,33,36,.12);
  --lp-stage-2: rgba(255,255,255,.22);

  /* Glass */
  --lp-glass-1: rgba(255,255,255,.22);
  --lp-glass-2: rgba(255,255,255,.16);
  --lp-line-1: rgba(26,27,31,.10);
  --lp-line-2: rgba(26,27,31,.14);

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

  /* Spacing */
  --lp-space-1: 8px;
  --lp-space-2: 12px;
  --lp-space-3: 16px;
  --lp-space-4: 18px;
  --lp-space-5: 22px;
  --lp-space-6: 28px;

  /* Shadows (floating glass) */
  --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);
}

/* ---------------------------
   2) GLOBAL TYPOGRAPHY (Uniform)
--------------------------- */

/* Force the font everywhere, including headings and WP theme selectors */
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;
  color: var(--lp-ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

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

/* Apple-like scale (responsive) */
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; }

/* Body text */
p, li{
  color: var(--lp-ink-soft);
  line-height: 1.75;
  margin: 0 0 1em;
}

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

/* ---------------------------
   3) NO MOTION DEFAULTS
--------------------------- */
*{
  animation: none !important;
}
a, button, .button,
.wp-element-button,
.wp-block-button__link{
  transition: none !important;
  transform: none !important;
}
a:hover, button:hover, .button:hover,
a:active, button:active{
  transform: none !important;
}

/* ---------------------------
   4) GLASS COMPONENT SYSTEM
   Use these classes anywhere:
   - .lp-stage (darker surface behind glass)
   - .lp-glass (standard glass panel)
   - .lp-card (glass card)
   - .lp-pill (glass pill)
   - .lp-btn-glass (glass button)
--------------------------- */

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

/* Base 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 (same as glass but with standard padding) */
.lp-card{
  padding: var(--lp-space-4);
}

/* Glass pill */
.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,.20);

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

  box-shadow: var(--lp-shadow-soft), var(--lp-inset);
  color: rgba(26,27,31,.82);
  font-weight: 800;
  font-size: 13px;

  /* never spill */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Glass button */
.lp-btn-glass,
.wp-element-button,
.wp-block-button__link,
button, .button{
  font-family: var(--lp-font) !important;

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

  border-radius: var(--lp-r-pill);
  padding: 12px 16px;
  min-height: 44px;

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

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

/* If some themes force button hover colors */
.lp-btn-glass:hover,
.wp-element-button:hover,
.wp-block-button__link:hover,
button:hover, .button:hover{
  background: rgba(255,255,255,.22) !important;
  color: rgba(26,27,31,.86) !important;
}

/* ---------------------------
   5) SMALL SCREEN TYPO TUNING
--------------------------- */
@media (max-width: 420px){
  h1{ font-size: clamp(28px, 9vw, 40px); }
  .lp-pill{ font-size: 12px; padding: 10px 10px; }
}

/* =========================================================
   DO NOT override cookie plugin UI positioning
========================================================= */
.cookie-notice,
.cookie-notice-container,
.cky-consent-container,
.cmplz-cookiebanner,
#cookie-law-info-bar{
  position: fixed !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  top: auto !important;
}