/* Aula Events — brand system (Jutiland v2 visual system, Aula sub-brand)
   Ported from the Astro site. theme.json defines the WP presets; this file
   carries the fixed tokens + component classes used by block patterns.
   Dark (default): Deep Violet ground · Cream type · Orange highlight.
   Light: Cream ground · Deep Violet type · Orange highlight (darkened for small text). */

:root {
  color-scheme: light;
  /* fixed brand tokens */
  --violet: #110025;
  --cream: #FFFACD;
  --orange: #F0943B;
  --orange-dark: #B35D0C;
  --white: #FFFFFF;
  --maxw: 1120px;
  --radius: 18px;

  /* light theme (default — Aula's cream house) */
  --bg: var(--cream);
  --panel: var(--white);
  --ink: var(--violet);
  --ink-04: rgba(17, 0, 37, 0.045);
  --ink-08: rgba(17, 0, 37, 0.10);
  --ink-15: rgba(17, 0, 37, 0.18);
  --ink-60: rgba(17, 0, 37, 0.62);
  --ink-75: rgba(17, 0, 37, 0.78);
  --accent-text: var(--orange-dark);
  --nav-bg: rgba(255, 250, 205, 0.85);
  --glow-a: rgba(240, 148, 59, 0.13);
  --glow-b: rgba(17, 0, 37, 0.05);
  --deco-dot: rgba(17, 0, 37, 0.05);
  --deco-tri: rgba(240, 148, 59, 0.12);
  --display-shadow: none;
  /* raised panel — a confident orange field with a whisper of deep violet pooled in two
     opposite corners for depth. Stays orange (never washed to white) so it pops off cream. */
  --card:
    radial-gradient(78% 78% at 0% 0%, rgba(17, 0, 37, 0.11), transparent 46%),
    radial-gradient(82% 82% at 100% 100%, rgba(17, 0, 37, 0.13), transparent 48%),
    linear-gradient(150deg, #F2A144 0%, #F5BB63 52%, #FBDD98 100%);
  --card-lift: inset 0 1px 0 rgba(255, 255, 255, 0.72), 0 34px 72px -28px rgba(17, 0, 37, 0.46), 0 12px 30px -16px rgba(17, 0, 37, 0.28);
  /* soft violet depth pool dropped behind a section so it feels recessed under the content */
  --section-depth: radial-gradient(1200px 720px at 50% 42%, rgba(17, 0, 37, 0.055), transparent 62%);
}

[data-theme='dark'] {
  color-scheme: dark;
  --bg: var(--violet);
  --panel: #1a0b33;
  --ink: var(--cream);
  --ink-04: rgba(255, 250, 205, 0.04);
  --ink-08: rgba(255, 250, 205, 0.08);
  --ink-15: rgba(255, 250, 205, 0.15);
  --ink-60: rgba(255, 250, 205, 0.60);
  --ink-75: rgba(255, 250, 205, 0.75);
  --accent-text: var(--orange);
  --nav-bg: rgba(17, 0, 37, 0.82);
  --glow-a: rgba(255, 250, 205, 0.10);
  --glow-b: rgba(240, 148, 59, 0.08);
  --deco-dot: rgba(255, 250, 205, 0.055);
  --deco-tri: rgba(240, 148, 59, 0.10);
  --display-shadow: 0 2px 4px rgba(0, 0, 0, 0.6), 0 6px 20px rgba(0, 0, 0, 0.45);
  --card: linear-gradient(180deg, var(--ink-08), var(--ink-04));
  --card-lift: inset 0 1px 0 rgba(255, 255, 255, 0.10), 0 44px 90px -42px rgba(0, 0, 0, 0.9);
  --section-depth: none;
}

/* theme-dependent artwork (logos) — light default shows the violet lockup */
:root:not([data-theme='dark']) .dark-only { display: none !important; }
[data-theme='dark'] .light-only { display: none !important; }

/* headings carry no browser-default margin — components set their own spacing. Without this the
   feature icon (a marginless span) sat ~22px above its title, whose <h3> has a UA top margin:
   the exact mismatch vs the Astro build, which resets heading margins. */
h1, h2, h3, h4 { margin: 0; }

.accent { color: var(--accent-text); }

.kicker {
  font-family: 'Tanker', 'General Sans', sans-serif;
  color: var(--accent-text);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 17px;
  margin-bottom: 18px;
}

/* ambient field — ONE continuous gradient on the page ground so every section blends into
   the next with zero seams (no per-section backgrounds anywhere). Painted as background-image
   only, so theme.json's cream background-color stays the base. Scroll-anchored (default), so the
   glows pass by rather than sitting fixed. Gently deepens toward the page floor via the closing
   linear layer — a color shift, never a line. */
body {
  background-image:
    radial-gradient(1100px 780px at 88% -8%, rgba(240, 148, 59, 0.17), transparent 60%),
    radial-gradient(780px 560px at 5% 4%, rgba(17, 0, 37, 0.05), transparent 62%),
    /* warm glow straddling the hero -> platform seam, dripping down into the platform section */
    radial-gradient(1150px 1250px at 50% 20%, rgba(240, 148, 59, 0.17), transparent 62%),
    radial-gradient(900px 760px at 63% 32%, rgba(240, 148, 59, 0.09), transparent 60%),
    radial-gradient(1300px 900px at 52% 58%, rgba(17, 0, 37, 0.05), transparent 64%),
    radial-gradient(1120px 780px at 84% 80%, rgba(240, 148, 59, 0.11), transparent 62%),
    radial-gradient(1000px 720px at 8% 102%, rgba(17, 0, 37, 0.06), transparent 64%),
    linear-gradient(180deg, transparent 0%, rgba(240, 148, 59, 0.05) 46%, rgba(17, 0, 37, 0.035) 100%);
  background-repeat: no-repeat;
  background-attachment: scroll;
}
[data-theme='dark'] body {
  background-image:
    radial-gradient(940px 640px at 90% -12%, rgba(255, 250, 205, 0.12), transparent 60%),
    radial-gradient(940px 580px at 50% 16%, rgba(240, 148, 59, 0.12), transparent 64%),
    radial-gradient(1200px 760px at 56% 50%, rgba(240, 148, 59, 0.08), transparent 62%),
    radial-gradient(1080px 560px at 50% 82%, rgba(0, 0, 0, 0.24), transparent 72%),
    radial-gradient(1020px 480px at 50% 99%, rgba(240, 148, 59, 0.08), transparent 64%),
    radial-gradient(840px 560px at 5% 102%, rgba(240, 148, 59, 0.11), transparent 60%);
  background-repeat: no-repeat;
}

/* buttons — primary keeps the fixed brand recipe in both themes */
.btn {
  display: inline-block;
  white-space: nowrap;
  font-weight: 600;
  font-size: 16px;
  padding: 13px 26px;
  border-radius: 999px;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: transform 0.12s ease, background 0.12s ease, color 0.12s ease;
  text-decoration: none !important;
}
.btn:active { transform: scale(0.98); }
.btn-primary { background: var(--orange); color: var(--violet); box-shadow: 0 16px 34px -12px rgba(240, 148, 59, 0.62), 0 8px 18px -8px rgba(17, 0, 37, 0.34); }
.btn-primary:hover { background: #f5a558; }
.btn-ghost { border-color: var(--ink-15); color: var(--ink); }
.btn-ghost:hover { border-color: var(--ink-60); }

/* cards — raised cream panel on cream (light); tinted panel on violet (dark) */
.card {
  background: var(--card);
  border: 1px solid var(--ink-08);
  border-radius: var(--radius);
  padding: 32px;
  box-shadow: var(--card-lift);
}

/* long-form text (blog posts, privacy, event bodies) */
.prose { max-width: 720px; }
.prose h1 { font-size: clamp(30px, 4.5vw, 42px); margin-bottom: 18px; }
.prose h2 { font-size: 24px; margin: 40px 0 12px; }
.prose h3 { font-size: 19px; margin: 28px 0 10px; }
.prose p { margin-bottom: 16px; color: var(--ink-75); }
.prose ul, .prose ol { margin: 0 0 16px 22px; color: var(--ink-75); }
.prose li { margin-bottom: 8px; }
.prose strong { color: var(--ink); }
.prose blockquote {
  border-left: 3px solid var(--accent-text);
  padding-left: 18px;
  margin: 24px 0;
  color: var(--ink);
  font-weight: 500;
}
.prose hr { border: 0; border-top: 1px solid var(--ink-08); margin: 34px 0; }
.prose table { width: 100%; border-collapse: collapse; margin: 22px 0; font-size: 14.5px; line-height: 1.5; }
.prose th, .prose td { border: 1px solid var(--ink-15); padding: 9px 12px; text-align: left; vertical-align: top; }
.prose thead th { background: var(--ink-04); color: var(--ink); font-weight: 600; }
.prose tbody td { color: var(--ink-75); }
@media (max-width: 680px) {
  .prose table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

::selection { background: var(--orange); color: var(--violet); }

/* site navigation */
.site-nav { position: sticky; top: 0; z-index: 50; background: var(--nav-bg); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.site-nav .container { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
.nav-in { display: flex; align-items: center; justify-content: space-between; height: 72px; }
.nav-logo img { height: 32px; display: block; }
.nav-links { display: flex; align-items: center; gap: 22px; }
.nav-links a { color: var(--ink); font-weight: 500; font-size: 15.5px; text-decoration: none; }
.nav-links a:hover { color: var(--accent-text); text-decoration: none; }
/* top-level nav CTA: the orange pill already sets it apart — no drop shadow needed here */
.nav-cta { color: var(--violet) !important; box-shadow: none; }
.nav-cta:hover { color: var(--violet) !important; text-decoration: none !important; }

/* theme toggle — lives in the nav (top), leaving the bottom corners free for chat + cookie consent.
   Light shows the moon (go dark); dark shows the sun (go light). */
.theme-toggle { display: inline-grid; place-items: center; width: 40px; height: 40px; padding: 0; border-radius: 50%; border: 1px solid var(--ink-15); background: transparent; color: var(--ink); cursor: pointer; transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease; }
.theme-toggle:hover { border-color: var(--ink-60); color: var(--accent-text); background: var(--ink-04); }
.theme-toggle svg { display: block; }
/* Dark mode temporarily disabled until it's reliable — hide the toggle (site is light-only). */
.theme-toggle { display: none !important; }
.theme-toggle .ic-sun { display: none; }
[data-theme='dark'] .theme-toggle .ic-sun { display: block; }
[data-theme='dark'] .theme-toggle .ic-moon { display: none; }

@media (max-width: 620px) {
  .nav-links { gap: 12px; }
  .nav-links a:not(.nav-cta) { display: none; }
  .nav-in { height: 62px; }
}

/* site footer */
.site-footer { padding: 64px 0 40px; margin-top: 40px; }
.site-footer .container { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
.footer-in { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 32px; }
.footer-logo { height: 30px; display: block; margin-bottom: 14px; }
.footer-tagline { color: var(--ink-60); font-size: 14.5px; max-width: 34ch; }
.footer-links { display: flex; flex-wrap: wrap; gap: 20px; }
.footer-links a { color: var(--ink-75); font-size: 14.5px; font-weight: 500; text-decoration: none; }
.footer-links a:hover { color: var(--accent-text); text-decoration: none; }
.footer-legal { color: var(--ink-60); font-size: 13px; margin-top: 32px; }
.footer-legal a { color: var(--ink-60); }
.footer-legal a:hover { color: var(--accent-text); }

/* ============================================================================
   Card + section treatment (Viko): uniform "mostly violet" card, dark ending, button rules
   ============================================================================ */

/* UNIFORM CARD — Viko picked option 2 ("mostly violet"): every .card is a calm cream↔deep-violet
   gradient with a whisper of cream in the top-left, cream text, orange pill. The card carries its
   own fixed colour + pinned ink tokens, so it renders identically in light AND dark — no variants. */
.card {
  /* soft cream glow (top-left) + a faint warm glow (bottom-right) so BOTH corners are soothed, over a
     dark, uniform violet base. Glows are diffuse and pulled inward — no harsh edge into the page. */
  --card:
    radial-gradient(115% 95% at 20% 0%, rgba(255, 250, 205, 0.10), transparent 60%),
    radial-gradient(100% 90% at 100% 100%, rgba(240, 148, 59, 0.06), transparent 58%),
    linear-gradient(168deg, #211040 0%, #1b0d35 60%, #17092e 100%);
  /* no hard border — a top highlight + big soft shadow give the premium lift (as on the Astro cards) */
  --card-lift:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 40px 82px -40px rgba(6, 0, 18, 0.58),
    0 16px 38px -20px rgba(6, 0, 18, 0.42);
  --ink: var(--cream); --ink-60: rgba(255, 250, 205, 0.60); --ink-75: rgba(255, 250, 205, 0.82);
  --ink-08: rgba(255, 250, 205, 0.10); --ink-15: rgba(255, 250, 205, 0.22);
  --accent-text: var(--orange);
  color: var(--cream);
  border-color: transparent;
}

/* button lift (Viko): ONLY the nav pill is flat (see .nav-cta) — the hero pill and every other
   orange/cream pill stays lifted. */

/* audiences statement stays on the light ground — no violet band here; it read too busy sitting
   right between the cards above and the pricing below. */

/* the page ends dark — the last section fades into violet over a long, gradual run; the footer is
   fully violet. Generous top space sets "Let's plan your next event" apart from the pricing above. */
:root:not([data-theme='dark']) #book.section { padding-top: 196px; padding-bottom: 104px; }
/* the cream ground sinks into solid violet high up (title sits fully on solid). A faint warm glow
   in the transition keeps it a warm dusk rather than a grey, washed-out band. */
:root:not([data-theme='dark']) #book {
  background:
    /* straight cream -> violet (Viko's intent). Quick eased ramp of violet over the cream so the
       desaturated mid-tone is a thin soft edge, not a lingering grey band. No orange. */
    linear-gradient(180deg,
      transparent 0%,
      transparent 16%,
      rgba(17, 0, 37, 0.28) 22%,
      rgba(17, 0, 37, 0.72) 27%,
      #110025 32%);
}
:root:not([data-theme='dark']) #book .booking-title { color: var(--cream); }
/* Kill WordPress's 24px blockGap gap above the footer. The gap sits on the TEMPLATE-PART WRAPPER
   (footer.wp-block-template-part), which is transparent — so the cream body showed through it.
   Targeting .site-footer alone (the inner element) did NOT fix it; the wrapper carries the margin. */
footer.wp-block-template-part { margin-top: 0 !important; }
:root:not([data-theme='dark']) .site-footer { background: #110025; color: var(--cream); margin-top: 0 !important; }
:root:not([data-theme='dark']) .site-footer .footer-tagline { color: rgba(255, 250, 205, 0.62); }
:root:not([data-theme='dark']) .site-footer .footer-links a { color: rgba(255, 250, 205, 0.80); }
:root:not([data-theme='dark']) .site-footer .footer-links a:hover { color: var(--orange); }
:root:not([data-theme='dark']) .site-footer .footer-legal { color: rgba(255, 250, 205, 0.55); }
:root:not([data-theme='dark']) .site-footer .footer-legal a { color: rgba(255, 250, 205, 0.70); }
:root:not([data-theme='dark']) .site-footer .footer-legal a:hover { color: var(--orange); }
/* on the violet footer show the cream lockup, not the violet one */
:root:not([data-theme='dark']) .site-footer .light-only { display: none !important; }
:root:not([data-theme='dark']) .site-footer .dark-only { display: block !important; }

/* ============================================================================
   Blog index — each post is a dark "mostly violet" card (matches the site cards).
   The opened post (single.html) stays a light, readable .prose page.
   ============================================================================ */
.blog-post-card { margin-bottom: 20px; }
.blog-post-card .wp-block-post-title { font-weight: 700; line-height: 1.22; margin: 0; }
.blog-post-card .wp-block-post-title a { color: var(--cream); text-decoration: none; }
.blog-post-card .wp-block-post-title a:hover { color: var(--orange); }
.blog-post-card .wp-block-post-excerpt { margin: 0; }
.blog-post-card .wp-block-post-excerpt p,
.blog-post-card .wp-block-post-excerpt__excerpt { color: rgba(255, 250, 205, 0.75); font-size: 16px; line-height: 1.6; margin: 12px 0 0; }
.blog-post-card .wp-block-post-excerpt__more-link { display: inline-block; margin-top: 12px; color: var(--orange); text-decoration: none; font-weight: 600; font-size: 15px; }
.blog-post-card .wp-block-post-excerpt__more-link:hover { text-decoration: underline; }
/* archive title ("Blog") + pagination sit on the cream ground, so use the page ink */
.wp-block-query-pagination { gap: 8px; }
.wp-block-query-pagination a, .wp-block-query-pagination .wp-block-query-pagination-numbers { color: var(--ink-75); }
.wp-block-query-pagination a:hover, .wp-block-query-pagination .current { color: var(--accent-text); }

/* ===================================================================
   De-chrome the Eventin SUB-pages (speaker / booking / checkout / receipt):
   plain white, no glow, no Aula top nav, slim footer — so the whole event
   journey matches, not just the event landing (which is styled inline in
   functions.php on is_singular('etn')).

   Scoped with :has() on single-surface markers that never appear on the
   marketing pages (home/pricing/blog) — a non-matching marker is simply inert,
   so listing booking/receipt candidates is harmless if a class name differs.
   Confirmed live: .etn-speaker-page-container. WooCommerce cart/checkout via
   their own body classes.
   =================================================================== */
body:has(.etn-speaker-page-container),
body:has(.etn-single-speaker),
body:has(.etn-event-booking),
body:has(.etn-booking-form),
body:has(.etn-attendee-form),
body:has(.etn-payment-summary),
body:has(.etn-payment-receipt),
body:has(.etn-booking-receipt),
body:has(.etn-receipt-wrapper),
body.woocommerce-checkout,
body.woocommerce-cart{
  background-color:#fff !important;
  background-image:none !important;
}
body:has(.etn-speaker-page-container) header.site-nav,
body:has(.etn-single-speaker) header.site-nav,
body:has(.etn-event-booking) header.site-nav,
body:has(.etn-booking-form) header.site-nav,
body:has(.etn-attendee-form) header.site-nav,
body:has(.etn-payment-summary) header.site-nav,
body:has(.etn-payment-receipt) header.site-nav,
body:has(.etn-booking-receipt) header.site-nav,
body:has(.etn-receipt-wrapper) header.site-nav,
body.woocommerce-checkout header.site-nav,
body.woocommerce-cart header.site-nav{ display:none !important; }
body:has(.etn-speaker-page-container) footer.site-footer,
body:has(.etn-single-speaker) footer.site-footer,
body:has(.etn-event-booking) footer.site-footer,
body:has(.etn-booking-form) footer.site-footer,
body:has(.etn-attendee-form) footer.site-footer,
body:has(.etn-payment-receipt) footer.site-footer,
body:has(.etn-booking-receipt) footer.site-footer,
body.woocommerce-checkout footer.site-footer,
body.woocommerce-cart footer.site-footer{ padding:30px 0 24px !important; }
body:has(.etn-speaker-page-container) .footer-tagline,
body:has(.etn-single-speaker) .footer-tagline,
body:has(.etn-event-booking) .footer-tagline,
body:has(.etn-attendee-form) .footer-tagline,
body:has(.etn-payment-receipt) .footer-tagline,
body.woocommerce-checkout .footer-tagline,
body.woocommerce-cart .footer-tagline{ display:none !important; }