/* ============================================================
   queendombyqueenbeaute.com — shared stylesheet.

   Info site for the Queendom by Queen Beauté brand. This is NOT
   The Queendom app — it's the marketing/info site that lives
   alongside it. Design shares the dark luxury palette and
   Cormorant Garamond typography with thequeendom.app for
   ecosystem coherence, but does NOT copy app-specific ceremony
   (no shimmer wordmarks, no giant centered Queendom Emblem
   heroes, no star field, no ceremonial arrival animation).

   No italics anywhere by design — Queen's convention.
   ============================================================ */

/* ============================================================
   Design tokens
   ============================================================ */
:root {
  --ink-void:     #050505;
  --ink-deep:     #0a0a0a;
  --ink:          #111111;
  --ink-veil:     #1a1a1a;
  --ink-raised:   #1c1c1c;

  --gold:         #c6a667;
  --gold-deep:    #a6864a;
  --gold-soft:    #d8c08a;
  --gold-whisper: rgba(198, 166, 103, 0.16);
  --gold-edge:    rgba(198, 166, 103, 0.32);
  --gold-faint:   rgba(198, 166, 103, 0.22);

  --cream:        #f7f4ef;
  --cream-soft:   #e4ddd0;
  --cream-mute:   #a89c84;

  --serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;

  --ease:      cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-slow: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ============================================================
   Base
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html, body {
  margin: 0;
  padding: 0;
  background: var(--ink-void);
  color: var(--cream);
  font-family: var(--serif);
  font-weight: 400;
  font-style: normal;
  letter-spacing: 0.01em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
img { max-width: 100%; height: auto; display: block; }

/* No italics anywhere — override the browser default for
   <em> and <i>. If Queen wants an italic emphasis somewhere
   in the future, re-enable per element. */
em, i, cite, address, dfn, var { font-style: normal; }

/* Subtle atmospheric backdrop — a whisper of gold radial glow
   over the deep charcoal void. */
.atmosphere {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse at 50% -20%, rgba(198, 166, 103, 0.08) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 120%, rgba(198, 166, 103, 0.04) 0%, transparent 50%),
    var(--ink-void);
}

/* ============================================================
   Header — fixed top-left pinned Queendom Emblem + fixed
   top-right "ENTER THE QUEENDOM" gold CTA + hamburger.
   ============================================================ */
.top-nav-brand {
  position: fixed;
  top: 22px;
  left: 28px;
  z-index: 40;
  width: 84px;
  height: 84px;
  background-image: url('/queendom-emblem.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0.95;
  display: block;
  transition: opacity 0.18s;
}
.top-nav-brand:hover, .top-nav-brand:focus-visible { opacity: 1; outline: none; }

.top-nav-right {
  position: fixed;
  top: 22px;
  right: 28px;
  z-index: 40;
  display: inline-flex;
  align-items: center;
  gap: 18px;
}

/* Persistent gold ENTER THE QUEENDOM CTA — solid gold with a
   slow polished-metal highlight sweeping across it on a loop.
   Uses a ::before pseudo-element positioned absolutely inside
   an overflow:hidden container, animating left position so a
   bright cream band travels smoothly from off-screen-left to
   off-screen-right, then rests off-screen for a beat before
   sweeping again. No background-position gradient tricks — this
   is cleaner and doesn't glitch at the loop boundary. */
.enter-queendom-btn {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 22px;
  font-family: var(--serif);
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-void);
  background: var(--gold);
  border: 0.5px solid var(--gold);
  border-radius: 2px;
  text-decoration: none;
  box-shadow: 0 0 10px rgba(198, 166, 103, 0.22);
  transition: background 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.enter-queendom-btn::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: -100%;
  width: 100%;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(247, 244, 239, 0.10) 25%,
    rgba(247, 244, 239, 0.42) 45%,
    rgba(247, 244, 239, 0.60) 50%,
    rgba(247, 244, 239, 0.42) 55%,
    rgba(247, 244, 239, 0.10) 75%,
    transparent 100%);
  transform: skewX(-22deg);
  animation: enter-queendom-sweep 12s linear infinite;
  pointer-events: none;
}
@keyframes enter-queendom-sweep {
  0%   { left: -100%; }
  100% { left: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .enter-queendom-btn::before { animation: none; display: none; }
}
.enter-queendom-btn:hover,
.enter-queendom-btn:focus-visible {
  background: var(--gold-soft);
  box-shadow: 0 0 22px rgba(216, 192, 138, 0.55), 0 0 46px rgba(198, 166, 103, 0.35);
  outline: none;
}
.enter-queendom-btn:active {
  background: var(--gold);
  box-shadow: 0 0 12px rgba(198, 166, 103, 0.35);
}

/* Menu button — three thin gold lines */
.menu-btn {
  background: transparent;
  border: 0;
  padding: 12px 6px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  color: var(--cream);
}
.menu-btn .ico {
  position: relative;
  width: 26px;
  height: 18px;
  display: inline-block;
}
.menu-btn .ico span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--gold);
  transition: background 0.3s ease;
}
.menu-btn .ico span:nth-child(1) { top: 0; }
.menu-btn .ico span:nth-child(2) { top: 50%; }
.menu-btn .ico span:nth-child(3) { bottom: 0; }
.menu-btn:hover .ico span,
.menu-btn:focus-visible .ico span { background: var(--gold-soft); }
.menu-btn:focus-visible { outline: none; }

@media (max-width: 700px) {
  .top-nav-brand {
    top: 14px;
    left: 16px;
    width: 56px;
    height: 56px;
  }
  .top-nav-right {
    top: 14px;
    right: 16px;
    gap: 10px;
  }
  .enter-queendom-btn {
    padding: 8px 14px;
    font-size: 0.7rem;
    letter-spacing: 0.18em;
  }
  .menu-btn { padding: 8px 4px; }
}

/* ============================================================
   Drawer — slides in from the right with the full nav tree.

   Queendom Meditations and Live Experiences are now direct
   parent links (clickable, go to their hub page). Their sub
   items are always visible underneath — no expand/collapse
   toggle, no duplicate parent-in-sub.
   ============================================================ */
.drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(5, 5, 5, 0.72);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s var(--ease);
  z-index: 50;
  backdrop-filter: blur(6px);
}
.drawer-backdrop.open {
  opacity: 1;
  pointer-events: auto;
}
.drawer {
  position: fixed;
  top: 0;
  right: 0;
  height: 100vh;
  width: min(420px, 88vw);
  background: linear-gradient(180deg, var(--ink-veil) 0%, var(--ink-deep) 100%);
  border-left: 0.5px solid var(--gold-edge);
  transform: translateX(100%);
  transition: transform 0.45s var(--ease-slow);
  z-index: 60;
  overflow-y: auto;
  padding: 88px 32px 40px;
  box-shadow: -12px 0 40px rgba(0, 0, 0, 0.45);
}
.drawer.open { transform: translateX(0); }
.drawer-close {
  position: absolute;
  top: 18px;
  right: 20px;
  background: none;
  border: 0;
  color: var(--gold);
  font-family: var(--serif);
  font-size: 2rem;
  line-height: 1;
  padding: 6px 12px;
  cursor: pointer;
  transition: color 0.2s, transform 0.25s var(--ease);
}
.drawer-close:hover, .drawer-close:focus-visible {
  color: var(--gold-soft);
  transform: scale(1.2);
  outline: none;
}

.drawer-nav {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.drawer-nav > li > a,
.drawer-nav > li > .drawer-nav-label {
  display: block;
  width: 100%;
  padding: 14px 4px;
  font-family: var(--serif);
  font-size: 1.1rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--cream);
  background: none;
  border: 0;
  border-bottom: 0.5px solid var(--gold-whisper);
  transition: color 0.18s;
}
.drawer-nav > li > a:hover,
.drawer-nav > li > a:focus-visible {
  color: var(--gold-soft);
  outline: none;
}
/* Non-clickable label (e.g., The Queendom is just an expand
   group header — its children are the actual pages). */
.drawer-nav > li > .drawer-nav-label {
  cursor: default;
}
/* Expandable rows: parent link + gold +/− toggle on the right.
   Sub-items collapsed by default; JS toggles .expanded on the
   parent <li>. Tap the parent link to go to its page, tap the
   toggle to reveal/hide children. Matches Queen's WordPress
   nav interaction pattern. */
.drawer-nav .expandable {
  position: relative;
}
.drawer-nav .expand-toggle {
  position: absolute;
  top: 4px;
  right: 0;
  width: 44px;
  height: 44px;
  background: none;
  border: 0;
  color: var(--gold);
  font-family: var(--serif);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s;
}
.drawer-nav .expand-toggle:hover,
.drawer-nav .expand-toggle:focus-visible {
  color: var(--gold-soft);
  outline: none;
}
.drawer-nav .expand-toggle::before {
  content: '+';
}
.drawer-nav .expandable.expanded > .expand-toggle::before {
  content: '−';
}

.drawer-nav .sub,
.drawer-nav .sub-sub {
  list-style: none;
  margin: 0;
  padding: 0 0 0 22px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s var(--ease), padding 0.35s var(--ease), margin 0.35s var(--ease);
}
.drawer-nav .expandable.expanded > .sub,
.drawer-nav .expandable.expanded > .sub-sub {
  max-height: 800px;
  margin: 0 0 8px;
  padding: 0 0 4px 22px;
}
.drawer-nav .sub li,
.drawer-nav .sub-sub li { margin: 0; }
.drawer-nav .sub > li > a {
  display: block;
  padding: 10px 4px;
  font-family: var(--serif);
  font-size: 0.98rem;
  font-weight: 400;
  letter-spacing: 0.05em;
  color: var(--cream-soft);
  border-bottom: 0.5px solid var(--gold-whisper);
  transition: color 0.18s;
}
.drawer-nav .sub > li > a:hover,
.drawer-nav .sub > li > a:focus-visible {
  color: var(--gold-soft);
  outline: none;
}
.drawer-nav .sub-sub {
  padding-left: 18px;
}
.drawer-nav .expandable.expanded > .sub-sub {
  padding: 0 0 2px 18px;
}
.drawer-nav .sub-sub a {
  display: block;
  padding: 8px 4px;
  font-family: var(--serif);
  font-size: 0.9rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--cream-mute);
  border-bottom: 0.5px solid var(--gold-whisper);
  transition: color 0.18s;
}
.drawer-nav .sub-sub a:hover,
.drawer-nav .sub-sub a:focus-visible {
  color: var(--gold-soft);
  outline: none;
}

/* ============================================================
   Page layout
   ============================================================ */
main {
  position: relative;
  z-index: 1;
  max-width: 900px;
  margin: 0 auto;
  padding: 140px 28px 96px;
  min-height: calc(100vh - 200px);
}

/* ============================================================
   Typography — no italics anywhere.
   ============================================================ */
h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 400;
  color: var(--cream);
  margin: 0 0 24px;
  letter-spacing: 0.02em;
}
h1 {
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: 0.02em;
}
h2 {
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 500;
  color: var(--gold-soft);
  margin: 44px 0 18px;
}
h3 {
  font-size: clamp(1.15rem, 2.2vw, 1.35rem);
  font-weight: 500;
  color: var(--gold);
  margin: 32px 0 12px;
}
h4 {
  font-size: 1.05rem;
  color: var(--cream-soft);
  margin: 22px 0 10px;
}
p {
  font-size: 1.05rem;
  line-height: 1.72;
  margin: 0 0 20px;
  color: var(--cream);
}
strong { color: var(--cream); font-weight: 600; letter-spacing: 0.02em; }

a.inline-link {
  color: var(--gold);
  border-bottom: 0.5px solid var(--gold-faint);
  transition: color 0.18s, border-color 0.18s;
}
a.inline-link:hover { color: var(--gold-soft); border-color: var(--gold); }

hr {
  border: 0;
  border-top: 0.5px solid var(--gold-edge);
  margin: 44px auto;
  max-width: 200px;
}

ul, ol {
  padding-left: 22px;
  margin: 0 0 24px;
}
li {
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--cream);
  margin-bottom: 8px;
}
li::marker { color: var(--gold); }

.page-eyebrow {
  display: inline-block;
  font-size: 0.9rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 16px;
}

.hero-image {
  width: 100%;
  max-width: 720px;
  margin: 0 auto 32px;
  border-radius: 2px;
  border: 0.5px solid var(--gold-faint);
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.4);
}

/* ============================================================
   Homepage — matches the current About page structure.
   ============================================================ */
.home {
  max-width: 780px;
  margin: 20px auto 0;
}
.home h1 {
  text-align: center;
  margin: 0 0 32px;
}
.home .hero-image {
  margin: 0 auto 40px;
}
.home h2 {
  text-align: center;
  color: var(--gold-soft);
  margin: 0 0 28px;
  font-weight: 500;
}
.home p {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 20px;
}

/* ============================================================
   Interior CTA — used on Queendom Compass, Queendom
   Meditations volume pages, Immersion, VIP Day, Contact,
   Keynote when a primary in-page action is needed.
   ============================================================ */
.cta-primary {
  display: inline-block;
  padding: 15px 36px;
  font-family: var(--serif);
  font-weight: 600;
  font-size: 0.92rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-void);
  background: var(--gold);
  border: 0.5px solid var(--gold);
  border-radius: 2px;
  text-decoration: none;
  box-shadow: 0 0 12px rgba(198, 166, 103, 0.24);
  transition: background 0.3s var(--ease), box-shadow 0.3s var(--ease);
  margin: 8px 0;
}
.cta-primary:hover, .cta-primary:focus-visible {
  background: var(--gold-soft);
  box-shadow: 0 0 26px rgba(216, 192, 138, 0.55), 0 0 52px rgba(198, 166, 103, 0.35);
  outline: none;
}

.cta-secondary {
  display: inline-block;
  padding: 12px 28px;
  font-family: var(--serif);
  font-size: 0.88rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  background: transparent;
  border: 0.5px solid var(--gold-edge);
  border-radius: 2px;
  text-decoration: none;
  transition: color 0.25s var(--ease), border-color 0.25s var(--ease), background 0.25s var(--ease);
}
.cta-secondary:hover, .cta-secondary:focus-visible {
  color: var(--gold-soft);
  border-color: var(--gold);
  background: var(--gold-whisper);
  outline: none;
}

.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  margin: 28px 0 20px;
}
/* Center variant — used on The Queendom page for the hero CTA.
   Replaces an inline style="justify-content: center;" so the
   site can drop 'unsafe-inline' from style-src later if the
   Calendly widget is ever removed. */
.cta-row-center { justify-content: center; }

/* Honeypot field for Netlify Forms — visually hidden but still
   present in the DOM. Bots that auto-fill every input will fill
   this too, which Netlify then rejects. Replaces an inline
   style="display:none;" for the same CSP hardening reason. */
.honeypot { display: none; }

/* Calendly inline embed container on the VIP page. Sized generously
   so the widget's ceremony breathes. Height accommodates the full
   week-view calendar on desktop; the widget itself is responsive
   inside this box. */
.calendly-embed {
  min-width: 320px;
  height: 720px;
  margin: 20px 0 40px;
}

/* Error notice below a Stripe checkout CTA. Shown only when the
   Edge Function call fails and the visitor needs to try again.
   Muted cream tone so it reads as informational, not alarming. */
.checkout-error {
  color: var(--cream-mute);
  font-size: 0.95rem;
  text-align: center;
  margin: 16px 0 0;
  letter-spacing: 0.02em;
}

/* ============================================================
   Forms — Contact + Keynote inquiry.
   ============================================================ */
.form-wrap {
  max-width: 600px;
  margin: 32px auto 0;
}
.form-field {
  margin-bottom: 22px;
}
.form-field label {
  display: block;
  font-size: 0.9rem;
  letter-spacing: 0.12em;
  color: var(--cream-mute);
  margin-bottom: 8px;
}
.form-field input,
.form-field textarea,
.form-field select {
  width: 100%;
  padding: 12px 14px;
  background: rgba(28, 28, 28, 0.6);
  border: 0.5px solid var(--gold-edge);
  border-radius: 2px;
  color: var(--cream);
  font-family: var(--serif);
  font-size: 1rem;
  letter-spacing: 0.02em;
  transition: border-color 0.2s ease;
}
.form-field textarea {
  min-height: 140px;
  resize: vertical;
}
.form-field input:focus,
.form-field textarea:focus,
.form-field select:focus {
  outline: none;
  border-color: var(--gold);
  background: rgba(28, 28, 28, 0.85);
}
.form-field select option {
  background: var(--ink-veil);
  color: var(--cream);
}
.form-submit {
  display: inline-block;
  padding: 14px 40px;
  font-family: var(--serif);
  font-weight: 600;
  font-size: 0.92rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-void);
  background: var(--gold);
  border: 0.5px solid var(--gold);
  border-radius: 2px;
  cursor: pointer;
  box-shadow: 0 0 12px rgba(198, 166, 103, 0.24);
  transition: background 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.form-submit:hover, .form-submit:focus-visible {
  background: var(--gold-soft);
  box-shadow: 0 0 26px rgba(216, 192, 138, 0.55), 0 0 52px rgba(198, 166, 103, 0.35);
  outline: none;
}

/* ============================================================
   Footer — thin gold divider above legal + contact links.
   Larger, non-italic per Queen's spec.
   ============================================================ */
.site-footer {
  position: relative;
  z-index: 1;
  max-width: 1100px;
  margin: 0 auto;
  padding: 40px 28px 60px;
  border-top: 0.5px solid var(--gold-whisper);
  text-align: center;
}
.footer-copyright {
  font-size: 0.98rem;
  color: var(--cream-mute);
  letter-spacing: 0.05em;
  margin: 0 0 18px;
}
.footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 26px;
}
.footer-links a {
  font-size: 0.98rem;
  color: var(--cream-mute);
  letter-spacing: 0.05em;
  transition: color 0.2s;
}
.footer-links a:hover { color: var(--gold-soft); }