/* ============================================================
   Ziatan — Base & Design Tokens
   Source-of-truth :root variables for the FCC search template.
   ============================================================ */

:root {
    /* Backgrounds */
    --bg-primary:         #0c0820;
    --bg-secondary:       #15083a;
    --bg-tertiary:        #1f0e4a;
    --bg-surface:         rgba(255,255,255,0.04);
    --bg-surface-hover:   rgba(255,255,255,0.07);
    --bg-glass:           rgba(115,6,78,0.14);
    --bg-glass-strong:    rgba(115,6,78,0.28);

    /* Borders */
    --border-glass:        rgba(255,255,255,0.08);
    --border-glass-hover:  rgba(243,107,31,0.40);
    --border-glass-soft:   rgba(255,255,255,0.05);

    /* Brand accents — ziatan palette */
    --accent-primary:     #F36B1F;     /* warm orange — CTA / headline highlight */
    --accent-primary-hi:  #ff8c4d;
    --accent-primary-glow:rgba(243,107,31,0.55);

    --accent-magenta:     #73064E;     /* hero gradient start, ambient orbs */
    --accent-magenta-hi:  #a30e6e;

    --accent-blue:        #0004AA;     /* hero gradient end */
    --accent-blue-hi:     #1a1ed4;

    --accent-cyan:        #3769B2;     /* secondary CTA / muted button */
    --accent-purple:      #3F2463;

    /* Text — muted/faint nudged lighter to clear WCAG AA 4.5:1 on --bg-primary */
    --text-primary:    #FFFFFF;
    --text-secondary:  #c4bdd6;
    --text-muted:      #988fac;
    --text-faint:      #726b88;

    /* Gradients */
    --gradient-hero:        linear-gradient(151deg, #73064E 0%, #0004AA 70%);
    --gradient-hero-soft:   linear-gradient(151deg, rgba(115,6,78,0.92) 0%, rgba(0,4,170,0.92) 70%);
    --gradient-cta:         linear-gradient(135deg, #F36B1F 0%, #ff8c4d 100%);
    --gradient-cta-hover:   linear-gradient(135deg, #ff7d33 0%, #ffa066 100%);
    --gradient-text-brand:  linear-gradient(135deg, #ff8c4d 0%, #F36B1F 50%, #ffb98a 100%);
    --gradient-pill-active: linear-gradient(135deg, #F36B1F 0%, #ff8c4d 100%);
    --gradient-glow-orange: radial-gradient(ellipse at center, rgba(243,107,31,0.32) 0%, transparent 70%);
    --gradient-glow-magenta:radial-gradient(ellipse at center, rgba(115,6,78,0.45) 0%, transparent 70%);
    --gradient-glow-blue:   radial-gradient(ellipse at center, rgba(0,4,170,0.45) 0%, transparent 70%);

    /* Fonts */
    --font-display: 'Sora', system-ui, -apple-system, sans-serif;
    --font-body:    'Sora', system-ui, -apple-system, sans-serif;

    /* Radii */
    --radius-xs:   8px;
    --radius-sm:   12px;
    --radius-md:   16px;
    --radius-card: 24px;
    --radius-lg:   32px;
    --radius-pill: 999px;

    /* Shadows */
    --shadow-sm:         0 2px 8px rgba(0,0,0,0.24);
    --shadow-md:         0 8px 28px rgba(0,0,0,0.32);
    --shadow-card:       0 10px 40px rgba(115,6,78,0.22), 0 2px 8px rgba(0,0,0,0.18);
    --shadow-card-hover: 0 18px 60px rgba(243,107,31,0.28), 0 0 0 1px rgba(243,107,31,0.45);
    --shadow-cta:        0 6px 28px rgba(243,107,31,0.45);
    --shadow-cta-hover:  0 10px 36px rgba(243,107,31,0.60);
    --shadow-glow-input: 0 0 0 4px rgba(243,107,31,0.18), 0 10px 40px rgba(115,6,78,0.32);

    /* Transitions */
    --t-fast:    0.2s cubic-bezier(0.4, 0, 0.2, 1);
    --t-smooth:  0.45s cubic-bezier(0.4, 0, 0.2, 1);
    --t-spring:  0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
    --t-power:   0.6s cubic-bezier(0.16, 1, 0.3, 1);

    /* Layout */
    --container-max: 1120px;
    --container-pad: 24px;
}

/* ============================================================
   Reset (scoped to the ziatan-search body to avoid bleed)
   ============================================================ */
body.ziatan-search,
body.ziatan-search *,
body.ziatan-search *::before,
body.ziatan-search *::after {
    box-sizing: border-box;
}

body.ziatan-search {
    margin: 0;
    padding: 0;
    background: var(--bg-primary);
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
    min-height: 100vh;
}

body.ziatan-search a {
    color: inherit;
    text-decoration: none;
    transition: color var(--t-fast);
}

body.ziatan-search img,
body.ziatan-search svg {
    max-width: 100%;
    display: block;
}

body.ziatan-search h1,
body.ziatan-search h2,
body.ziatan-search h3,
body.ziatan-search h4 {
    font-family: var(--font-display);
    font-weight: 800;
    line-height: 1.12;
    margin: 0;
    color: var(--text-primary);
}

body.ziatan-search p { margin: 0; }

/* ============================================================
   Utility classes
   ============================================================ */
.zt-container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--container-pad);
    width: 100%;
}

.zt-gradient-text {
    /* Solid fallback first — iOS Safari fails background-clip:text when
       reveal.js wraps the chars in nested transformed <span class="word">
       <span class="char-inner"> spans, leaving the gradient invisible.
       Solid color guarantees the text is always readable. */
    color: var(--accent-primary-hi, #ff8c4d);
    display: inline-block;
    /* Progressive enhancement: gradient clip applies on browsers/contexts
       that support it AND where it actually renders. */
    background: var(--gradient-text-brand);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
/* When split-text wraps content in nested spans, the inner spans need their
   own gradient backdrop so background-clip:text has something to clip to. */
.zt-gradient-text .word,
.zt-gradient-text .word .char-inner {
    background: var(--gradient-text-brand);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--accent-primary-hi, #ff8c4d);  /* fallback if clip fails */
}
/* Mobile: skip the gradient-clip entirely — render as solid orange.
   Avoids iOS Safari's known issue with clip + transformed nested children. */
@media (max-width: 768px) {
    .zt-gradient-text,
    .zt-gradient-text .word,
    .zt-gradient-text .word .char-inner {
        background: none !important;
        -webkit-text-fill-color: currentColor !important;
        color: var(--accent-primary-hi, #ff8c4d) !important;
    }
}

.zt-orange { color: var(--accent-primary); }
.zt-magenta { color: var(--accent-magenta); }

/* Hidden visually but readable by SR */
.zt-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}

/* Hide attribute support — modern browsers honor [hidden] but Divi parent might leak `display: block`. */
body.ziatan-search [hidden] { display: none !important; }

/* Reduced motion — opt-in animations should short-circuit via JS feature detection.
   This block kills any CSS-only animations that linger. */
@media (prefers-reduced-motion: reduce) {
    body.ziatan-search *,
    body.ziatan-search *::before,
    body.ziatan-search *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}