/* ============================================================
   THEME OVERRIDE v4.0 — COMPLETE FIX

   Fixes THREE issues:
   1. 12 undefined CSS variables (--ok-red, --ok-card-bg, etc.)
   2. Hero text fading (generic p !important was overriding hero white text)
   3. Proof strip "Trusted by creators worldwide" misalignment

   Dark  = pure near-black #111111 (YouTube dark mode feel)
   Light = warm off-white #FAFAFA (Apple.com feel)
   Accent red #E63946 stays in both modes.
   Footer follows theme: dark #141414 / light #E8E8EC.
   ============================================================ */
/* ---------- DARK MODE (default) ---------- */
:root,
html[data-theme="dark"] {
    /* Core variables (overriding style.css navy values with pure blacks) */
    --ok-bg:            #111111 !important;
    --ok-surface:       #1A1A1A !important;
    --ok-surface-alt:   #222222 !important;
    --ok-text:          #EEEEEE !important;
    --ok-text-muted:    #999999 !important;
    --ok-accent:        #E63946 !important;
    --ok-accent-hover:  #C0303B !important;
    --ok-link:          #4A9EE0 !important;
    --ok-border:        #333333 !important;
    --ok-card:          #1A1A1A !important;
    --ok-input-bg:      #222222 !important;
    --ok-input-border:  #444444 !important;
    --ok-footer-bg:     #141414 !important;
    --ok-proof-strip:   #1A1A1A !important;
    --ok-hero-overlay:  rgba(0,0,0,0.6) !important;
    --ok-sun-display:   block !important;
    --ok-moon-display:  none !important;
    /* MISSING ALIASES — used in style.css but never defined */
    --ok-red:           #E63946 !important;
    --ok-blue:          #4A9EE0 !important;
    --ok-bg-alt:        #222222 !important;
    --ok-bg-accent:     #1A1A1A !important;
    --ok-bg-footer:     #141414 !important;
    --ok-card-bg:       #1A1A1A !important;
    --ok-card-border:   #333333 !important;
    --ok-text-faint:    #777777 !important;
    --ok-font:          'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
    --ok-header-bg:     rgba(17,17,17,0.95) !important;
    --ok-header-blur:   blur(12px) !important;
    --ok-shadow:        rgba(0,0,0,0.4) !important;
}
/* ---------- LIGHT MODE ---------- */
html[data-theme="light"] {
    /* Core variables */
    --ok-bg:            #FAFAFA !important;
    --ok-surface:       #FFFFFF !important;
    --ok-surface-alt:   #F2F2F2 !important;
    --ok-text:          #111111 !important;
    --ok-text-muted:    #555555 !important;
    --ok-accent:        #E63946 !important;
    --ok-accent-hover:  #C0303B !important;
    --ok-link:          #2B6CB0 !important;
    --ok-border:        #DDDDDD !important;
    --ok-card:          #FFFFFF !important;
    --ok-input-bg:      #FFFFFF !important;
    --ok-input-border:  #CCCCCC !important;
    --ok-footer-bg:     #E8E8EC !important;
    --ok-proof-strip:   #F0F0F0 !important;
    --ok-hero-overlay:  rgba(0,0,0,0.3) !important;
    --ok-sun-display:   none !important;
    --ok-moon-display:  block !important;
    /* MISSING ALIASES */
    --ok-red:           #E63946 !important;
    --ok-blue:          #2B6CB0 !important;
    --ok-bg-alt:        #F2F2F2 !important;
    --ok-bg-accent:     #F0F0F0 !important;
    --ok-bg-footer:     #E8E8EC !important;
    --ok-card-bg:       #FFFFFF !important;
    --ok-card-border:   #DDDDDD !important;
    --ok-text-faint:    #888888 !important;
    --ok-font:          'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
    --ok-header-bg:     rgba(250,250,250,0.95) !important;
    --ok-header-blur:   blur(12px) !important;
    --ok-shadow:        rgba(0,0,0,0.1) !important;
}
/* ============================================================
   SMOOTH TRANSITIONS
   ============================================================ */
body,
#page,
.site,
.ast-separate-container,
.site-content,
.entry-content,
.ok-section,
.ok-section-dark,
.ok-section-alt,
.ok-proof-strip,
.ok-hero,
.ok-product-card,
.ok-blog-card,
.ok-category-card,
.ok-email-section,
.ok-footer,
.ok-about,
.ok-header,
.site-header,
input, textarea, select {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease !important;
}
/* ============================================================
   ASTRA BODY/ROOT OVERRIDES
   Hardcoded fallback values so Astra wrappers always respond
   ============================================================ */
html[data-theme="dark"] body,
html[data-theme="dark"] #page,
html[data-theme="dark"] .site,
html[data-theme="dark"] .ast-separate-container,
html[data-theme="dark"] .ast-page-builder-template,
html[data-theme="dark"] #content,
html[data-theme="dark"] .site-content,
html[data-theme="dark"] main,
html[data-theme="dark"] .ast-container {
    background-color: #111111 !important;
    color: #EEEEEE !important;
}
html[data-theme="light"] body,
html[data-theme="light"] #page,
html[data-theme="light"] .site,
html[data-theme="light"] .ast-separate-container,
html[data-theme="light"] .ast-page-builder-template,
html[data-theme="light"] #content,
html[data-theme="light"] .site-content,
html[data-theme="light"] main,
html[data-theme="light"] .ast-container {
    background-color: #FAFAFA !important;
    color: #111111 !important;
}
/* ---------- ASTRA SPECIFIC CLASSES ---------- */
html[data-theme="dark"] .ast-separate-container .ast-article-single,
html[data-theme="dark"] .ast-separate-container .ast-article-post,
html[data-theme="dark"] .ast-plain-container,
html[data-theme="dark"] .ast-no-sidebar,
html[data-theme="dark"] .ast-full-width-layout {
    background-color: #111111 !important;
}
html[data-theme="light"] .ast-separate-container .ast-article-single,
html[data-theme="light"] .ast-separate-container .ast-article-post,
html[data-theme="light"] .ast-plain-container,
html[data-theme="light"] .ast-no-sidebar,
html[data-theme="light"] .ast-full-width-layout {
    background-color: #FAFAFA !important;
}
/* ============================================================
   SECTIONS — Hardcoded overrides for custom sections
   ============================================================ */
html[data-theme="dark"] .ok-section       { background-color: #1A1A1A !important; }
html[data-theme="dark"] .ok-section-dark  { background-color: #111111 !important; }
html[data-theme="dark"] .ok-section-alt   { background-color: #222222 !important; }
html[data-theme="dark"] .ok-proof-strip   { background-color: #1A1A1A !important; }
html[data-theme="dark"] .ok-email-section { background-color: #1A1A1A !important; }
html[data-theme="dark"] .ok-about         { background-color: #111111 !important; }
html[data-theme="light"] .ok-section       { background-color: #FFFFFF !important; }
html[data-theme="light"] .ok-section-dark  { background-color: #FAFAFA !important; }
html[data-theme="light"] .ok-section-alt   { background-color: #F2F2F2 !important; }
html[data-theme="light"] .ok-proof-strip   { background-color: #F0F0F0 !important; }
html[data-theme="light"] .ok-email-section { background-color: #F2F2F2 !important; }
html[data-theme="light"] .ok-about         { background-color: #FAFAFA !important; }
/* ============================================================
   HEADER
   ============================================================ */
html[data-theme="dark"] .site-header,
html[data-theme="dark"] .ast-primary-header-bar,
html[data-theme="dark"] #masthead,
html[data-theme="dark"] .ok-header {
    background-color: #111111 !important;
}
html[data-theme="light"] .site-header,
html[data-theme="light"] .ast-primary-header-bar,
html[data-theme="light"] #masthead,
html[data-theme="light"] .ok-header {
    background-color: #FAFAFA !important;
}
html[data-theme="dark"] .main-header-bar a,
html[data-theme="dark"] .ok-nav a {
    color: #EEEEEE !important;
}
html[data-theme="light"] .main-header-bar a,
html[data-theme="light"] .ok-nav a {
    color: #111111 !important;
}
/* ============================================================
   TEXT — Generic text colors per theme
   IMPORTANT: These must NOT override .ok-hero text (which is
   always white regardless of theme). The hero-specific rules
   below have higher specificity to prevent that.
   ============================================================ */
html[data-theme="dark"] h1, html[data-theme="dark"] h2,
html[data-theme="dark"] h3, html[data-theme="dark"] h4,
html[data-theme="dark"] h5, html[data-theme="dark"] h6 {
    color: #EEEEEE !important;
}
html[data-theme="dark"] p,
html[data-theme="dark"] li,
html[data-theme="dark"] span:not(.ok-accent-text):not(.ok-counter) {
    color: #CCCCCC !important;
}
html[data-theme="dark"] .ok-text-muted { color: #999999 !important; }
html[data-theme="light"] h1, html[data-theme="light"] h2,
html[data-theme="light"] h3, html[data-theme="light"] h4,
html[data-theme="light"] h5, html[data-theme="light"] h6 {
    color: #111111 !important;
}
html[data-theme="light"] p,
html[data-theme="light"] li,
html[data-theme="light"] span:not(.ok-accent-text):not(.ok-counter) {
    color: #333333 !important;
}
html[data-theme="light"] .ok-text-muted { color: #555555 !important; }
/* ============================================================
   HERO TEXT — Always white regardless of theme
   The hero has a dark overlay, so text must stay white in both
   dark and light modes. These rules are MORE specific than the
   generic p/h1 rules above so they win.
   ============================================================ */
html[data-theme="dark"] .ok-hero h1,
html[data-theme="dark"] .ok-hero h1 span,
html[data-theme="dark"] .ok-hero p,
html[data-theme="dark"] .ok-hero .ok-subtitle,
html[data-theme="dark"] .ok-hero-content h1,
html[data-theme="dark"] .ok-hero-content p,
html[data-theme="light"] .ok-hero h1,
html[data-theme="light"] .ok-hero h1 span,
html[data-theme="light"] .ok-hero p,
html[data-theme="light"] .ok-hero .ok-subtitle,
html[data-theme="light"] .ok-hero-content h1,
html[data-theme="light"] .ok-hero-content p {
    color: #FFFFFF !important;
}
/* Hero subtitle and tagline — visible but slightly softer */
html[data-theme="dark"] .ok-hero .ok-subtitle,
html[data-theme="dark"] .ok-hero-content .ok-subtitle,
html[data-theme="light"] .ok-hero .ok-subtitle,
html[data-theme="light"] .ok-hero-content .ok-subtitle {
    color: #FFFFFF !important;
}
/* Hero "Filmmaker. Creator. Educator." line */
html[data-theme="dark"] .ok-hero-content > p:first-of-type,
html[data-theme="light"] .ok-hero-content > p:first-of-type {
    color: rgba(255,255,255,0.95) !important;
}
/* Hero red accent text (KOVALOV) stays red */
html[data-theme="dark"] .ok-hero h1 span,
html[data-theme="light"] .ok-hero h1 span {
    color: #E63946 !important;
}
/* Hero buttons — keep white text on both modes */
html[data-theme="dark"] .ok-hero .ok-btn,
html[data-theme="light"] .ok-hero .ok-btn {
    color: #FFFFFF !important;
}
html[data-theme="dark"] .ok-hero .ok-btn-outline,
html[data-theme="light"] .ok-hero .ok-btn-outline {
    color: #E63946 !important;
    border-color: #E63946 !important;
}
html[data-theme="dark"] .ok-hero .ok-btn-outline:hover,
html[data-theme="light"] .ok-hero .ok-btn-outline:hover {
    color: #FFFFFF !important;
}
/* ============================================================
   FIX: PROOF STRIP ALIGNMENT
   "Trusted by creators worldwide" was sitting higher than the
   number stats because the flex items weren't baseline-aligned.
   ============================================================ */
.ok-proof-strip .ok-stats-inline {
    align-items: center !important;
}
.ok-proof-strip .ok-stat-item {
    display: flex !important;
    align-items: baseline !important;
    gap: 6px !important;
    line-height: 1.4 !important;
}
/* Counter numbers in proof strip */
html[data-theme="dark"] .ok-proof-strip .ok-stat-item,
html[data-theme="dark"] .ok-proof-strip .ok-stat-item span {
    color: #EEEEEE !important;
}
html[data-theme="light"] .ok-proof-strip .ok-stat-item,
html[data-theme="light"] .ok-proof-strip .ok-stat-item span {
    color: #111111 !important;
}
html[data-theme="dark"] .ok-proof-strip .ok-counter,
html[data-theme="light"] .ok-proof-strip .ok-counter {
    color: #E63946 !important;
}
/* Trust phrase in proof strip — matches other stat items */
.ok-proof-strip .ok-stat-trust,
.ok-proof-strip .ok-stats-inline .ok-stat-item.ok-stat-trust,
.ok-stat-trust {
    font-style: normal !important;
    font-family: inherit !important;
    opacity: 1 !important;
    letter-spacing: 0 !important;
}
/* ============================================================
   READABILITY — Bumped +0.20rem total from base for accessibility
   ============================================================ */

/* Navigation links: 0.85 → 1.05rem */
.ok-nav a {
    font-size: 1.1rem !important;
}

/* Proof strip stats: 0.9 → 1.1rem */
.ok-proof-strip .ok-stat-item {
    font-size: 1.1rem !important;
}

/* Proof strip counter numbers: 1.1 → 1.3rem */
.ok-proof-strip .ok-stat-item span {
    font-size: 1.3rem !important;
}

/* Section subtitles: 1.1 → 1.3rem */
.ok-section-subtitle {
    font-size: 1.3rem !important;
}

/* Product card titles: 1rem → 1.2rem */
.ok-product-info h3 {
    font-size: 1.2rem !important;
}

/* Product card descriptions / details: 0.8 → 1rem */
.ok-product-info p,
.ok-product-details {
    font-size: 1rem !important;
}

/* Product card price: 1.3 → 1.5rem */
.ok-product-price {
    font-size: 1.5rem !important;
}

/* Category card titles: 1rem → 1.2rem */
.ok-category-card h3 {
    font-size: 1.2rem !important;
}

/* Category card descriptions: 0.85 → 1.05rem */
.ok-category-card p {
    font-size: 1.05rem !important;
}

/* Blog card titles: 1rem → 1.2rem */
.ok-blog-content h3 {
    font-size: 1.2rem !important;
}

/* Blog card descriptions: 0.85 → 1.05rem */
.ok-blog-content p {
    font-size: 1.05rem !important;
}

/* Blog card meta (date, etc.): 0.8 → 1rem */
.ok-blog-meta {
    font-size: 1rem !important;
}

/* Gear card titles: 1rem → 1.2rem */
.ok-gear-card h3 {
    font-size: 1.2rem !important;
}

/* Gear card descriptions: 0.85 → 1.05rem */
.ok-gear-card p {
    font-size: 1.05rem !important;
}

/* Affiliate buttons: 0.75 → 0.95rem */
.ok-affiliate-btns a {
    font-size: 0.95rem !important;
}

/* Footer headings: 0.85 → 1.05rem */
.ok-footer h4 {
    font-size: 1.05rem !important;
}

/* Footer links: 0.9 → 1.1rem */
.ok-footer a {
    font-size: 1.1rem !important;
}

/* Footer copyright: 0.8 → 1rem */
.ok-footer-bottom {
    font-size: 1rem !important;
}

/* About section body text */
.ok-about-text p,
.ok-about p {
    font-size: 1.2rem !important;
    line-height: 1.7 !important;
}

/* Form inputs & buttons: 1rem → 1.15rem */
.ok-form input,
.ok-form textarea,
.ok-form select {
    font-size: 1.2rem !important;
}

/* General card & section body text catch-all */
.ok-section p:not(.ok-hero-tagline):not(.ok-hero-subtitle):not(.ok-section-subtitle) {
    font-size: 1.15rem !important;
    line-height: 1.7 !important;
}

/* ============================================================
   CARDS — Hardcoded overrides
   ============================================================ */
html[data-theme="dark"] .ok-product-card,
html[data-theme="dark"] .ok-blog-card,
html[data-theme="dark"] .ok-category-card,
html[data-theme="dark"] .ok-gear-card {
    background-color: #1A1A1A !important;
    border-color: #333333 !important;
}
html[data-theme="light"] .ok-product-card,
html[data-theme="light"] .ok-blog-card,
html[data-theme="light"] .ok-category-card,
html[data-theme="light"] .ok-gear-card {
    background-color: #FFFFFF !important;
    border-color: #DDDDDD !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06) !important;
}
/* ============================================================
   INPUTS / FORMS
   ============================================================ */
html[data-theme="dark"] input,
html[data-theme="dark"] textarea,
html[data-theme="dark"] select {
    background-color: #222222 !important;
    border-color: #444444 !important;
    color: #EEEEEE !important;
}
html[data-theme="light"] input,
html[data-theme="light"] textarea,
html[data-theme="light"] select {
    background-color: #FFFFFF !important;
    border-color: #CCCCCC !important;
    color: #111111 !important;
}
/* ============================================================
   FOOTER — Follows theme: dark #141414 / light #E8E8EC
   ============================================================ */
/* --- Dark footer --- */
html[data-theme="dark"] .ok-footer,
html[data-theme="dark"] .site-footer,
html[data-theme="dark"] footer {
    background-color: #141414 !important;
    background-image:
        radial-gradient(ellipse at 20% 50%, rgba(40,35,45,0.6) 0%, transparent 60%),
        radial-gradient(ellipse at 80% 20%, rgba(35,30,40,0.4) 0%, transparent 50%),
        radial-gradient(ellipse at 60% 80%, rgba(30,28,35,0.5) 0%, transparent 55%) !important;
}
html[data-theme="dark"] .ok-footer,
html[data-theme="dark"] .ok-footer p,
html[data-theme="dark"] .ok-footer a,
html[data-theme="dark"] .ok-footer li,
html[data-theme="dark"] .ok-footer span {
    color: rgba(255,255,255,0.7) !important;
}
html[data-theme="dark"] .ok-footer h4 {
    color: #E63946 !important;
}
html[data-theme="dark"] .ok-footer h1,
html[data-theme="dark"] .ok-footer h2,
html[data-theme="dark"] .ok-footer h3,
html[data-theme="dark"] .ok-footer h4,
html[data-theme="dark"] .ok-footer h5,
html[data-theme="dark"] .ok-footer h6 {
    color: rgba(255,255,255,0.7) !important;
}
html[data-theme="dark"] .ok-footer-bottom {
    color: rgba(255,255,255,0.5) !important;
}
html[data-theme="dark"] .ok-footer .ok-logo {
    color: #FFFFFF !important;
}
/* --- Light footer --- */
html[data-theme="light"] .ok-footer,
html[data-theme="light"] .site-footer,
html[data-theme="light"] footer {
    background-color: #E8E8EC !important;
    background-image: none !important;
}
html[data-theme="light"] .ok-footer,
html[data-theme="light"] .ok-footer p,
html[data-theme="light"] .ok-footer a,
html[data-theme="light"] .ok-footer li,
html[data-theme="light"] .ok-footer span {
    color: rgba(30,30,50,0.7) !important;
}
html[data-theme="light"] .ok-footer h4 {
    color: #E63946 !important;
}
html[data-theme="light"] .ok-footer h1,
html[data-theme="light"] .ok-footer h2,
html[data-theme="light"] .ok-footer h3,
html[data-theme="light"] .ok-footer h4,
html[data-theme="light"] .ok-footer h5,
html[data-theme="light"] .ok-footer h6 {
    color: rgba(30,30,50,0.7) !important;
}
html[data-theme="light"] .ok-footer-bottom {
    color: rgba(30,30,50,0.5) !important;
}
html[data-theme="light"] .ok-footer .ok-logo {
    color: #111111 !important;
}
/* ============================================================
   SUN / MOON ICONS
   ============================================================ */
html[data-theme="dark"]  .ok-icon-sun  { display: block !important; }
html[data-theme="dark"]  .ok-icon-moon { display: none  !important; }
html[data-theme="light"] .ok-icon-sun  { display: none  !important; }
html[data-theme="light"] .ok-icon-moon { display: block !important; }

/* ============================================================
   GEAR PAGE — Layout fixes
   ============================================================ */

/* 1) Reduce hero height on gear page (subpage, not homepage) */
.page-id-69 .ok-hero {
    min-height: 28vh !important;
    padding-top: 100px !important;
    padding-bottom: 40px !important;
}

/* 2) Reduce gap between hero and first section */
.page-id-69 .ok-section {
    padding-top: 2.5rem !important;
}

/* 3) Gear cards — flexbox column so buttons pin to bottom */
.ok-gear-card {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    height: 100% !important;
}

/* Push affiliate buttons to the bottom of each card */
.ok-gear-card .ok-affiliate-btns {
    margin-top: auto !important;
    padding-top: 16px !important;
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    gap: 10px !important;
}

/* Consistent button sizing */
.ok-affiliate-btns a {
    padding: 10px 20px !important;
    min-width: 100px !important;
    text-align: center !important;
}

/* Gear card description — let it grow but push buttons down */
.ok-gear-card p {
    flex-grow: 1 !important;
    margin-bottom: 0 !important;
}

/* Gear card title — consistent spacing */
.ok-gear-card h3 {
    margin: 12px 0 8px !important;
}

/* Gear card thumbnail — consistent */
.ok-gear-card .ok-product-thumb {
    width: 100% !important;
    flex-shrink: 0 !important;
}