/* ============================================================================
   EGW LUXE — v3.0.0 visual upgrade layer (Ephesus Accounts Hub)
   Loaded after all theme CSS. Restyles existing markup only — no PHP changes.

   Driven by the member palette engine (EGW_Appearance):
     --egw-accent / --egw-accent-text / --egw-accent-subtle / --egw-border*
     --egw-font-display / --egw-font-body / --egw-display-case  (new tokens,
     emitted per-palette; absent = current Jost/Barlow/Cinzel look).
   Logged-out pages fall back to the theme defaults via var() chains.

   Capture/print safety rule: entrance animations are transform-only —
   visibility is never animated.
   ============================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Marcellus&family=Cormorant+Garamond:wght@500;600;700&family=Albert+Sans:wght@400;500;600;700&display=swap');

:root {
  --luxe-accent: var(--egw-accent, var(--color-primary, #1A1A1A));
  --luxe-on-accent: var(--egw-accent-text, var(--color-text-on-accent, #FFFFFF));
  --luxe-accent-soft: var(--egw-accent-subtle, rgba(17,17,17,0.06));
  --luxe-border: var(--egw-border, var(--color-border, rgba(17,17,17,0.10)));
  --luxe-border-strong: var(--egw-border-strong, var(--color-border-strong, rgba(17,17,17,0.18)));
  --luxe-display: var(--egw-font-display, var(--font-heading, 'Jost', sans-serif));
  --luxe-body-font: var(--egw-font-body, var(--font-body, 'Barlow', sans-serif));
  --luxe-case: var(--egw-display-case, none); /* v3.1.62 — sentence-case display type site-wide (owner-approved; palettes may still set their own case) */
  --luxe-ring: 0 0 0 4px var(--egw-accent-subtle, rgba(17,17,17,0.12));
  --luxe-r-card: 22px;
  --luxe-r-field: 12px;
  --luxe-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --luxe-spring: cubic-bezier(0.34, 1.45, 0.5, 1);
}

/* ---------------------------------------------------------------------------
   1. TYPE — display serif binds to the palette's pairing
   --------------------------------------------------------------------------- */
.eah-body { font-family: var(--luxe-body-font); }

.eah-body .auth-intro-title,
.eah-body .auth-hero h1,
.eah-body .auth-form-header h2,
.eah-body .eah-already-title,
.eah-body .auth-reg-success h3,
.prof-container h1, .prof-container h2, .prof-container h3,
.prof-container .prof-section-title,
.eah-body .eah-wordmark strong {
  font-family: var(--luxe-display) !important;
  text-transform: var(--luxe-case) !important;
  letter-spacing: 0.02em;
}
.eah-body .auth-intro-title { font-weight: 500; line-height: 1.1; }

.eah-body .auth-intro-label,
.eah-body .auth-hero-label {
  color: var(--luxe-accent);
  letter-spacing: 0.22em;
  font-weight: 600;
}
.eah-body .auth-intro-label::before,
.eah-body .auth-hero-label::before,
.eah-body .auth-hero-label::after { background: var(--luxe-accent); opacity: .6; }

/* ---------------------------------------------------------------------------
   2. CHROME — header / footer
   --------------------------------------------------------------------------- */
.eah-header {
  position: sticky;
  top: 0;
  z-index: 90;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  background: color-mix(in srgb, var(--color-bg, #fff) 86%, transparent);
}
@supports not (background: color-mix(in srgb, red 50%, blue)) {
  .eah-header { background: var(--color-bg, #fff); }
}
.eah-body .eah-theme-toggle {
  transition: background var(--motion-fast, 150ms) var(--luxe-ease),
              border-color var(--motion-fast, 150ms) var(--luxe-ease),
              transform var(--motion-fast, 150ms) var(--luxe-ease);
}
.eah-body .eah-theme-toggle:hover { background: var(--luxe-accent-soft); border-color: var(--luxe-border-strong); }
.eah-body .eah-theme-toggle:active { transform: scale(0.92); }

.eah-body .eah-btn {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 13.5px;
  transition: transform var(--motion-fast, 150ms) var(--luxe-ease),
              box-shadow var(--motion-base, 220ms) var(--luxe-ease),
              filter var(--motion-base, 220ms) var(--luxe-ease);
}
.eah-body .eah-btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-2, 0 6px 18px rgba(0,0,0,.14)); }
.eah-body .eah-btn:active { transform: translateY(0) scale(0.99); }

/* ---------------------------------------------------------------------------
   3. AUTH CARD — the centrepiece
   --------------------------------------------------------------------------- */
.eah-body .auth-form-card {
  border-radius: var(--luxe-r-card) !important;
  border: 1px solid var(--luxe-border) !important;
  box-shadow: 0 1px 0 var(--luxe-accent-soft) inset,
              0 10px 30px rgba(0, 0, 0, 0.10),
              0 30px 80px rgba(0, 0, 0, 0.14) !important;
}
/* gold/accent hairline across the top of the card */
.eah-body .auth-form-card::before {
  height: 1px !important;
  left: 8% !important;
  right: 8% !important;
  background: linear-gradient(90deg, transparent, var(--luxe-accent), transparent) !important;
  opacity: .55;
}

/* tab toggle — pill segmented control */
.eah-body .auth-tab-toggle {
  padding: 4px;
  background: var(--egw-hover, var(--color-bg-alt, rgba(127,127,127,.08)));
  border-color: var(--egw-border-subtle, var(--color-border, rgba(127,127,127,.15)));
}
.eah-body .auth-tab-btn {
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-weight: 600;
  border-radius: 999px;
  transition: background var(--motion-base, 220ms) var(--luxe-ease),
              color var(--motion-base, 220ms) var(--luxe-ease),
              box-shadow var(--motion-base, 220ms) var(--luxe-ease);
}
.eah-body .auth-tab-btn.active {
  background: var(--luxe-accent) !important;
  color: var(--luxe-on-accent) !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
}

/* ---------------------------------------------------------------------------
   4. FIELDS — refined inputs, soft focus ring, luxe labels
   --------------------------------------------------------------------------- */
.eah-body .auth-field label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--egw-text-2, var(--color-text-muted, #5C5C58));
}
.eah-body .auth-field label .required,
.eah-body .auth-field label .auth-required { color: var(--luxe-accent); }

.eah-body .auth-field input,
.eah-body .auth-field select {
  border-radius: var(--luxe-r-field) !important;
  padding-block: 13px;
  background: var(--egw-input, var(--color-bg, #fff));
  border-color: var(--luxe-border);
  box-shadow: none !important;
  transition: border-color var(--motion-base, 220ms) var(--luxe-ease),
              box-shadow var(--motion-base, 220ms) var(--luxe-ease),
              background var(--motion-base, 220ms) var(--luxe-ease);
}
.eah-body .auth-field input:hover,
.eah-body .auth-field select:hover { border-color: var(--luxe-border-strong); }
.eah-body .auth-field input:focus,
.eah-body .auth-field select:focus {
  border-color: var(--luxe-accent) !important;
  box-shadow: var(--luxe-ring) !important;
  outline: none;
}
.eah-body .auth-password-toggle { transition: color var(--motion-fast, 150ms) var(--luxe-ease); }

/* error text slides in (transform-only) */
.eah-body .auth-field-error { animation: luxe-in var(--motion-base, 220ms) var(--luxe-ease) backwards; }

/* ---------------------------------------------------------------------------
   5. BUTTONS — pill, tracking, shimmer sweep, lift
   --------------------------------------------------------------------------- */
.eah-body .auth-submit-btn {
  border-radius: 999px !important;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  font-weight: 600;
  background: var(--luxe-accent) !important;
  color: var(--luxe-on-accent) !important;
  position: relative;
  overflow: hidden;
  transition: filter var(--motion-base, 220ms) var(--luxe-ease),
              box-shadow var(--motion-base, 220ms) var(--luxe-ease),
              transform var(--motion-fast, 150ms) var(--luxe-ease);
}
.eah-body .auth-submit-btn:hover:not([disabled]) {
  filter: brightness(1.12);
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}
.eah-body .auth-submit-btn:active:not([disabled]) { transform: translateY(0) scale(0.99); }
.eah-body .auth-submit-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, 0.22) 50%, transparent 70%);
  transform: translateX(-110%);
}
.eah-body .auth-submit-btn:hover:not([disabled])::after {
  transition: transform var(--motion-slower, 480ms) var(--luxe-ease);
  transform: translateX(110%);
}
.eah-body .auth-wiz-back {
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  font-weight: 600;
  transition: border-color var(--motion-base, 220ms) var(--luxe-ease),
              color var(--motion-base, 220ms) var(--luxe-ease),
              background var(--motion-base, 220ms) var(--luxe-ease);
}
.eah-body .auth-wiz-back:hover:not([disabled]) {
  border-color: var(--luxe-accent);
  color: var(--luxe-accent);
  background: var(--luxe-accent-soft);
}

/* ---------------------------------------------------------------------------
   6. OTP — large tabular cells with ring focus
   --------------------------------------------------------------------------- */
.eah-body .auth-otp-digit {
  width: 52px !important;
  height: 62px !important;
  font-size: 26px !important;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  border-radius: var(--luxe-r-field) !important;
  caret-color: var(--luxe-accent);
  transition: border-color var(--motion-base, 220ms) var(--luxe-ease),
              box-shadow var(--motion-base, 220ms) var(--luxe-ease),
              transform var(--motion-fast, 150ms) var(--luxe-ease);
}
.eah-body .auth-otp-digit:focus {
  border-color: var(--luxe-accent) !important;
  box-shadow: var(--luxe-ring) !important;
}
@media (max-width: 480px) {
  .eah-body .auth-otp-digit { width: 42px !important; height: 52px !important; font-size: 22px !important; }
}
.eah-body #auth-2fa-code {
  border-radius: var(--luxe-r-field) !important;
  caret-color: var(--luxe-accent);
}

/* ---------------------------------------------------------------------------
   7. SIGNUP EXTRAS — membership cards, strength bar, consent
   --------------------------------------------------------------------------- */
.eah-body .auth-membership-type-card {
  border-radius: var(--luxe-r-field);
  transition: border-color var(--motion-base, 220ms) var(--luxe-ease),
              background var(--motion-base, 220ms) var(--luxe-ease),
              box-shadow var(--motion-base, 220ms) var(--luxe-ease),
              transform var(--motion-fast, 150ms) var(--luxe-ease);
}
.eah-body .auth-membership-type-option:hover .auth-membership-type-card { transform: translateY(-1px); }
.eah-body .auth-membership-type-option input:checked + .auth-membership-type-card,
.eah-body .auth-membership-type-option input:checked ~ .auth-membership-type-card {
  border-color: var(--luxe-accent) !important;
  background: var(--luxe-accent-soft) !important;
  box-shadow: 0 0 0 1px var(--luxe-accent) !important;
}
.eah-body .auth-membership-type-icon { color: var(--luxe-accent); }

.eah-body .auth-strength-fill { border-radius: 999px; transition: width var(--motion-slow, 320ms) var(--luxe-ease), background var(--motion-slow, 320ms) var(--luxe-ease); }
.eah-body .auth-wiz-bar-fill { background: var(--luxe-accent); }

.eah-body .eah-cross-link a { color: var(--luxe-accent); }

/* ---------------------------------------------------------------------------
   8. MEMBER DASHBOARD — sidebar + sections
   --------------------------------------------------------------------------- */
.prof-container, .prof-sidebar { font-family: var(--luxe-body-font); }

.prof-sidebar-item {
  border-radius: var(--radius-md, 8px);
  position: relative;
  transition: background var(--motion-fast, 150ms) var(--luxe-ease),
              color var(--motion-fast, 150ms) var(--luxe-ease);
}
.prof-sidebar-item::before {
  background: var(--prof-primary, var(--luxe-accent)) !important;
  width: 3px !important;
  border-radius: 999px;
}
.prof-sidebar-item:hover { background-color: var(--egw-accent-subtle, rgba(0,0,0,.05)) !important; }
.prof-sidebar-item.active {
  background: var(--egw-accent-subtle, rgba(127,127,127,.10)) !important;
  font-weight: 600;
}
.prof-sidebar-item:hover svg { transform: scale(1.08); }

/* section cards: consistent radius + hover lift on interactive cards */
.prof-container .prof-content-section { border-radius: var(--radius-xl, 16px); }

/* focus ring across the member area */
.prof-container :focus-visible,
.eah-body :focus-visible {
  outline: 2px solid var(--luxe-accent) !important;
  outline-offset: 2px;
}

/* ---------------------------------------------------------------------------
   9. APPEARANCE PICKER — make the new palettes feel at home
   --------------------------------------------------------------------------- */
.egw-appr__demo-h { font-family: var(--luxe-display); text-transform: var(--luxe-case); }

/* ---------------------------------------------------------------------------
   10. MOTION — entrance (transform-only), reduced-motion safe
   --------------------------------------------------------------------------- */
@keyframes luxe-in {
  from { transform: translateY(8px); }
  to   { transform: translateY(0); }
}
@keyframes luxe-pop {
  from { transform: scale(.6); }
  to   { transform: scale(1); }
}
.eah-body .auth-form-card { animation: luxe-in var(--motion-slower, 480ms) var(--luxe-ease) backwards; }
.eah-body .auth-reg-success-icon { animation: luxe-pop var(--motion-slow, 320ms) var(--luxe-spring) backwards; }

@media (prefers-reduced-motion: reduce) {
  .eah-body .auth-form-card,
  .eah-body .auth-reg-success-icon,
  .eah-body .auth-field-error { animation: none; }
}


/* ═════════════════════════════════════════════════════════════════
   v3.1.62 — SITE-WIDE POLISH (header, footer, focus, motion)
   ═════════════════════════════════════════════════════════════════ */
.eah-body a:focus-visible,
.eah-body button:focus-visible,
.eah-body [role="button"]:focus-visible {
  outline: 2px solid var(--luxe-accent, var(--color-accent, #1A1A1A));
  outline-offset: 2px;
  border-radius: 6px;
}
.eah-header .eah-wordmark { letter-spacing: 0.12em; }
.eah-header a { transition: opacity var(--motion-fast,150ms) var(--luxe-ease, ease); }
.eah-header a:hover { opacity: .8; }
.eah-header nav a, .eah-header .nav-links a { position: relative; }
.eah-header nav a::after, .eah-header .nav-links a::after {
  content: ''; position: absolute; left: 0; right: 100%; bottom: -3px; height: 1.5px;
  background: currentColor; transition: right var(--motion-base,220ms) var(--luxe-ease, ease);
}
.eah-header nav a:hover::after, .eah-header .nav-links a:hover::after { right: 0; }
.eah-footer { font-family: var(--font-body, inherit); }
.eah-footer a { color: var(--color-text, inherit); text-decoration: none; border-bottom: 1px solid transparent; transition: border-color var(--motion-fast,150ms) ease; }
.eah-footer a:hover { border-bottom-color: currentColor; }
.eah-footer-copy { color: var(--color-text-muted, #6E6E73); }
@media (prefers-reduced-motion: reduce) {
  .eah-header nav a::after, .eah-header .nav-links a::after { transition: none; }
}


/* v3.1.67 — Material dark depth: ambient page glow (transparent in light mode) */
.eah-body {
  background-image:
    radial-gradient(1100px 560px at 16% 6%, var(--page-glow-1, transparent), transparent 60%),
    radial-gradient(900px 520px at 88% 96%, var(--page-glow-2, transparent), transparent 55%);
  background-attachment: fixed;
}


/* ═════════════════════════════════════════════════════════════════
   v3.1.71 — SITE-WIDE autofill neutralizer. Chrome/Edge paint saved-
   credential fields with their own tint (steel-blue in dark mode) that
   no background rule can beat; the 1000px inset shadow trick repaints
   the field with the theme's own input surface.
   ═════════════════════════════════════════════════════════════════ */
.eah-body input:-webkit-autofill,
.eah-body input:-webkit-autofill:hover,
.eah-body input:-webkit-autofill:focus,
.eah-body select:-webkit-autofill,
.eah-body textarea:-webkit-autofill {
  -webkit-box-shadow: inset 0 0 0 1000px var(--input-bg, var(--color-surface-2, #fff)) !important;
  box-shadow: inset 0 0 0 1000px var(--input-bg, var(--color-surface-2, #fff)) !important;
  -webkit-text-fill-color: var(--color-text, #1a1a1a) !important;
  caret-color: var(--color-text, #1a1a1a);
  background-clip: content-box !important;
  transition: background-color 999999s ease-out !important;
}
.eah-body input:autofill {
  box-shadow: inset 0 0 0 1000px var(--input-bg, var(--color-surface-2, #fff)) !important;
  -webkit-text-fill-color: var(--color-text, #1a1a1a) !important;
}


/* v3.2.11 — reduced-motion guard for the luxe layer */
@media (prefers-reduced-motion: reduce) {
  .eah-body .auth-submit-btn::after { display: none !important; }
  .eah-body * { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}