/*
Theme Name: OlegKovalov Child
Template: astra
Description: Dark cinematic creator hub for OlegKovalov.com
Version: 2.0
*/

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;600;700&display=swap');

/* ============================================================
   THEME SYSTEM v2.0 — Single source of truth.
   Dark mode is default. All colors use var() only.
   JS sets data-theme on <html>. CSS does the rest.
   NO !important anywhere on element rules.
   ============================================================ */
:root,
html[data-theme="dark"] {
  --ok-bg:            #0D0D0D;
  --ok-surface:       #1A1A2E;
  --ok-surface-alt:   #12122A;
  --ok-text:          #F0F0F0;
  --ok-text-muted:    #A0A0B0;
  --ok-accent:        #E63946;
  --ok-accent-hover:  #C0303B;
  --ok-link:          #2B6CB0;
  --ok-border:        #2A2A4A;
  --ok-card:          #1E1E38;
  --ok-proof-strip:   #1A1A2E;
  --ok-hero-overlay:  rgba(0,0,0,0.65);
  --ok-input-bg:      #12122A;
  --ok-input-border:  #3A3A5A;
  --ok-footer-bg:     #0D0D0D;
  --ok-footer-text:   rgba(255,255,255,0.7);
  --ok-footer-border: rgba(255,255,255,0.06);
  --ok-footer-muted:  rgba(255,255,255,0.5);
  --ok-sun-display:   none;
  --ok-moon-display:  block;
}
html[data-theme="light"] {
  --ok-bg:            #FAFAFA;
  --ok-surface:       #FFFFFF;
  --ok-surface-alt:   #F2F2F2;
  --ok-text:          #1A1A1A;
  --ok-text-muted:    #555566;
  --ok-accent:        #E63946;
  --ok-accent-hover:  #C0303B;
  --ok-link:          #2B6CB0;
  --ok-border:        #DDDDEE;
  --ok-card:          #FFFFFF;
  --ok-proof-strip:   #F0F0F0;
  --ok-hero-overlay:  rgba(0,0,0,0.35);
  --ok-input-bg:      #FFFFFF;
  --ok-input-border:  #CCCCDD;
  --ok-footer-bg:     #E8E8EC;
  --ok-footer-text:   rgba(30,30,50,0.7);
  --ok-footer-border: rgba(0,0,0,0.08);
  --ok-footer-muted:  rgba(30,30,50,0.5);
  --ok-sun-display:   block;
  --ok-moon-display:  none;
}
/* Base elements — use variables, never hardcoded hex */
body {
  background-color: var(--ok-bg);
  color: var(--ok-text);
  transition: background-color 0.3s ease, color 0.3s ease;
}
h1, h2, h3, h4, h5, h6 {
  color: var(--ok-text);
}
p {
  color: var(--ok-text-muted);
}
a {
  color: var(--ok-link);
}
/* Sections */
.ok-section {
  background-color: var(--ok-surface);
}
.ok-section-dark {
  background-color: var(--ok-surface-alt);
}
.ok-section-alt {
  background-color: var(--ok-surface-alt);
}
.ok-proof-strip {
  background-color: var(--ok-proof-strip);
}
/* Hero */
.ok-hero {
  background-color: var(--ok-surface-alt);
}
.ok-hero-overlay {
  background: var(--ok-hero-overlay);
}
/* Cards */
.ok-product-card,
.ok-blog-card,
.ok-category-card {
  background-color: var(--ok-card);
  border-color: var(--ok-border);
}
/* Email / Lead magnet */
.ok-email-section {
  background-color: var(--ok-surface-alt);
}
.ok-email-form input,
.ok-email-form textarea {
  background-color: var(--ok-input-bg);
  border-color: var(--ok-input-border);
  color: var(--ok-text);
}
/* Footer */
.ok-footer {
  background-color: var(--ok-footer-bg);
}
/* About section */
.ok-about {
  background-color: var(--ok-surface);
}
/* Sun/moon icons — controlled by CSS variable, not JS visibility tricks */
.ok-icon-sun  { display: var(--ok-sun-display); }
.ok-icon-moon { display: var(--ok-moon-display); }
/* Smooth theme transition on all themed elements */
.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 {
  transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}


/* ============================================
   BASE STYLES
   ============================================ */
* { margin:0; padding:0; box-sizing:border-box; }

body {
  font-family: var(--ok-font);
  font-weight: 300;
  background: var(--ok-bg);
  color: var(--ok-text);
  line-height: 1.7;
  overflow-x: hidden;
  transition: background 0.35s ease, color 0.35s ease;
}

h1,h2,h3,h4,h5,h6 {
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 0.5em;
  color: var(--ok-text);
}

a {
  color: var(--ok-red);
  text-decoration: none;
  transition: color 0.3s;
}
a:hover { color: var(--ok-blue); }

img { max-width:100%; height:auto; }

.ok-container { max-width:1200px; margin:0 auto; padding:0 24px; }

/* ============================================
   BUTTONS
   ============================================ */
.ok-btn {
  display: inline-block;
  padding: 14px 36px;
  background: var(--ok-red);
  color: #FFFFFF;
  font-family: var(--ok-font);
  font-weight: 600;
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: transform 0.3s, box-shadow 0.3s;
}
.ok-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(230,57,70,0.3);
  color: #FFFFFF;
}
.ok-btn-outline {
  background: transparent;
  border: 2px solid var(--ok-red);
  color: var(--ok-red);
}
.ok-btn-outline:hover {
  background: var(--ok-red);
  color: #FFFFFF;
}

/* ============================================
   HEADER
   ============================================ */
.ok-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  padding: 20px 0;
  transition: background 0.3s, padding 0.3s;
  background: transparent;
}
.ok-header.scrolled {
  background: var(--ok-header-bg);
  padding: 12px 0;
  backdrop-filter: var(--ok-header-blur);
  box-shadow: 0 2px 20px var(--ok-shadow);
}
.ok-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}
.ok-logo {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--ok-text);
  letter-spacing: -0.5px;
}
.ok-logo span { color: var(--ok-red); }

.ok-nav {
  display: flex;
  gap: 28px;
  align-items: center;
}
.ok-nav a {
  color: var(--ok-text);
  font-weight: 600;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.ok-nav a:hover { color: var(--ok-red); }

/* Header Actions (toggle + hamburger) */
.ok-header-actions {
  display: flex;
  align-items: center;
  gap: 16px;
}

/* ============================================
   DARK/LIGHT TOGGLE BUTTON
   ============================================ */
.ok-theme-toggle {
  background: none;
  border: 2px solid var(--ok-card-border);
  border-radius: 50%;
  width: 42px;
  height: 42px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ok-text);
  transition: border-color 0.3s, color 0.3s, transform 0.3s, background 0.3s;
  padding: 0;
}
.ok-theme-toggle:hover {
  border-color: var(--ok-red);
  color: var(--ok-red);
  transform: rotate(15deg);
  background: var(--ok-card-bg);
}


/* Hamburger */
.ok-hamburger {
  display: none;
  cursor: pointer;
  flex-direction: column;
  gap: 5px;
}
.ok-hamburger span {
  width: 28px;
  height: 2px;
  background: var(--ok-text);
  transition: 0.3s;
}

/* ============================================
   HERO
   ============================================ */
.ok-hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: var(--ok-bg);
  overflow: hidden;
}
.ok-hero-overlay {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: linear-gradient(180deg, rgba(26,26,46,0.6) 0%, rgba(26,26,46,0.9) 100%);
}
.ok-hero-content {
  position: relative;
  z-index: 2;
  padding: 0 24px;
}
.ok-hero h1 {
  font-size: 3.5rem;
  font-weight: 700;
  margin-bottom: 0.3em;
  color: #FFFFFF;
}
.ok-hero h1 span { color: var(--ok-red); }
.ok-hero p {
  font-size: 1.2rem;
  font-weight: 300;
  margin-bottom: 0.5rem;
  opacity: 0.9;
  color: #FFFFFF;
}
.ok-hero .ok-subtitle {
  font-size: 1rem;
  opacity: 0.7;
  margin-bottom: 2rem;
  color: #FFFFFF;
}
.ok-hero .ok-btn { margin: 0 8px; }

/* ============================================
   SECTIONS
   ============================================ */
.ok-section { padding: 100px 0; }
.ok-section-dark { background: var(--ok-bg); }
.ok-section-alt { background: var(--ok-bg-alt); }
.ok-section-accent { background: var(--ok-bg-accent); }

.ok-section-title {
  font-size: 2.2rem;
  text-align: center;
  margin-bottom: 1rem;
  color: var(--ok-text);
}
.ok-section-subtitle {
  text-align: center;
  font-weight: 300;
  color: var(--ok-text-muted);
  max-width: 600px;
  margin: 0 auto 3rem;
  font-size: 1.1rem;
}

/* ============================================
   SOCIAL PROOF STRIP
   ============================================ */
.ok-proof-strip {
  background: var(--ok-bg-alt);
  padding: 20px 0;
  text-align: center;
}
.ok-proof-strip .ok-stats-inline {
  display: flex;
  justify-content: center;
  gap: 40px;
  flex-wrap: wrap;
}
.ok-proof-strip .ok-stat-item {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ok-text);
}
.ok-proof-strip .ok-stat-item span {
  color: var(--ok-red);
  font-size: 1.1rem;
}

/* ============================================
   PRODUCT CARDS
   ============================================ */
.ok-products-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.ok-product-card {
  background: var(--ok-card-bg);
  border: 1px solid var(--ok-card-border);
  border-radius: 8px;
  overflow: hidden;
  transition: transform 0.3s, border-color 0.3s, box-shadow 0.3s;
}
.ok-product-card:hover {
  transform: translateY(-4px);
  border-color: var(--ok-red);
  box-shadow: 0 8px 30px var(--ok-shadow);
}
.ok-product-thumb {
  width: 100%;
  aspect-ratio: 16/10;
  background: var(--ok-bg-alt);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ok-text-faint);
  font-size: 0.8rem;
}
.ok-product-info { padding: 20px; }
.ok-product-info h3 {
  font-size: 1rem;
  margin-bottom: 8px;
  color: var(--ok-text);
}
.ok-product-price {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--ok-red);
}

/* ============================================
   CATEGORY CARDS
   ============================================ */
.ok-categories-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.ok-category-card {
  background: var(--ok-card-bg);
  border: 1px solid var(--ok-card-border);
  border-radius: 8px;
  padding: 40px 20px;
  text-align: center;
  transition: transform 0.3s, border-color 0.3s;
  cursor: pointer;
}
.ok-category-card:hover {
  transform: translateY(-4px);
  border-color: var(--ok-red);
}
.ok-category-card h3 {
  font-size: 1rem;
  margin-bottom: 8px;
  color: var(--ok-text);
}
.ok-category-card p {
  font-size: 0.85rem;
  color: var(--ok-text-faint);
}

/* ============================================
   YOUTUBE SECTION
   ============================================ */
.ok-youtube-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.ok-youtube-placeholder {
  aspect-ratio: 16/9;
  background: var(--ok-bg-alt);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  color: var(--ok-text-faint);
}

/* ============================================
   EMAIL CAPTURE
   ============================================ */
.ok-email-section {
  background: linear-gradient(135deg, var(--ok-bg-accent), var(--ok-bg));
  text-align: center;
  padding: 80px 24px;
}
.ok-email-form {
  display: flex;
  gap: 12px;
  max-width: 500px;
  margin: 2rem auto 0;
}
.ok-email-form input {
  flex: 1;
  padding: 14px 16px;
  background: var(--ok-input-bg);
  border: 1px solid var(--ok-input-border);
  border-radius: 4px;
  color: var(--ok-text);
  font-family: var(--ok-font);
  font-size: 1rem;
}
.ok-email-form input::placeholder {
  color: var(--ok-text-faint);
}
.ok-email-form input:focus {
  outline: none;
  border-color: var(--ok-red);
}
.ok-email-form button { padding: 14px 24px; }

/* ============================================
   BLOG CARDS
   ============================================ */
.ok-blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.ok-blog-card {
  background: var(--ok-card-bg);
  border: 1px solid var(--ok-card-border);
  border-radius: 8px;
  overflow: hidden;
  transition: transform 0.3s, box-shadow 0.3s;
}
.ok-blog-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 30px var(--ok-shadow);
}
.ok-blog-thumb {
  width: 100%;
  aspect-ratio: 16/9;
  background: var(--ok-bg-alt);
}
.ok-blog-content { padding: 20px; }
.ok-blog-content h3 {
  font-size: 1rem;
  margin-bottom: 8px;
  color: var(--ok-text);
}
.ok-blog-content p {
  font-size: 0.85rem;
  color: var(--ok-text-faint);
  line-height: 1.6;
}

/* ============================================
   ABOUT TEASER
   ============================================ */
.ok-about-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}
.ok-about-photo {
  width: 100%;
  aspect-ratio: 1;
  background: var(--ok-bg-alt);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ok-text-faint);
  font-size: 1rem;
}

/* ============================================
   FOOTER (theme-aware)
   ============================================ */
.ok-footer {
  background: var(--ok-footer-bg);
  padding: 60px 0 30px;
  border-top: 1px solid var(--ok-footer-border);
}
.ok-footer-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 40px;
}
.ok-footer h4 {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 20px;
  color: var(--ok-red);
}
.ok-footer a {
  color: var(--ok-footer-text);
  font-size: 0.9rem;
}
.ok-footer a:hover { color: var(--ok-red); }
.ok-footer ul { list-style: none; }
.ok-footer li { margin-bottom: 10px; }
.ok-footer-bottom {
  text-align: center;
  padding-top: 30px;
  border-top: 1px solid var(--ok-footer-border);
  font-size: 0.8rem;
  color: var(--ok-footer-muted);
}

/* ============================================
   GEAR REVIEW CARDS
   ============================================ */
.ok-gear-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.ok-gear-card {
  background: var(--ok-card-bg);
  border: 1px solid var(--ok-card-border);
  border-radius: 8px;
  padding: 24px;
  text-align: center;
  transition: transform 0.3s;
}
.ok-gear-card:hover { transform: translateY(-4px); }
.ok-gear-card h3 {
  font-size: 1rem;
  margin: 12px 0 8px;
  color: var(--ok-text);
}
.ok-gear-card p {
  font-size: 0.85rem;
  color: var(--ok-text-faint);
  margin-bottom: 16px;
}
.ok-affiliate-btns {
  display: flex;
  gap: 8px;
  justify-content: center;
}
.ok-affiliate-btns a {
  padding: 8px 16px;
  font-size: 0.75rem;
  border-radius: 4px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.ok-amazon-btn { background: #FF9900; color: #000; }
.ok-bh-btn { background: var(--ok-blue); color: #FFFFFF; }

/* ============================================
   CONTACT FORM
   ============================================ */
.ok-form-group { margin-bottom: 20px; }
.ok-form-group label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 8px;
  color: var(--ok-blue);
}
.ok-form-group input,
.ok-form-group textarea {
  width: 100%;
  padding: 14px 16px;
  background: var(--ok-input-bg);
  border: 1px solid var(--ok-input-border);
  border-radius: 4px;
  color: var(--ok-text);
  font-family: var(--ok-font);
  font-size: 1rem;
}
.ok-form-group input:focus,
.ok-form-group textarea:focus {
  outline: none;
  border-color: var(--ok-red);
}
.ok-form-group textarea {
  min-height: 140px;
  resize: vertical;
}

/* ============================================
   SCROLL ANIMATIONS
   ============================================ */
.ok-reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.ok-reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 968px) {
  .ok-nav { display: none; }
  .ok-hamburger { display: flex; }
  .ok-nav.open {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 100%; left: 0; right: 0;
    background: var(--ok-header-bg);
    backdrop-filter: var(--ok-header-blur);
    padding: 24px;
    gap: 16px;
  }
  .ok-hero h1 { font-size: 2.2rem; }
  .ok-products-grid,
  .ok-blog-grid,
  .ok-youtube-grid,
  .ok-gear-grid { grid-template-columns: repeat(2, 1fr); }
  .ok-categories-grid { grid-template-columns: repeat(2, 1fr); }
  .ok-about-split { grid-template-columns: 1fr; }
  .ok-footer-grid { grid-template-columns: 1fr; text-align: center; }
}

@media (max-width: 600px) {
  .ok-section { padding: 60px 0; }
  .ok-products-grid,
  .ok-blog-grid,
  .ok-youtube-grid,
  .ok-gear-grid,
  .ok-categories-grid { grid-template-columns: 1fr; }
  .ok-hero h1 { font-size: 1.8rem; }
  .ok-email-form { flex-direction: column; }
  .ok-hero .ok-btn { display: block; margin: 8px auto; max-width: 260px; }
}

/* ============================================
   ASTRA OVERRIDES
   ============================================ */
.ast-container { max-width: 100%; padding: 0; }
.site-content .ast-container { padding: 0; }
#page { background: var(--ok-bg); transition: background 0.35s ease; }
.entry-content { margin: 0; padding: 0; }
.ast-separate-container .ast-article-single { background: transparent; padding: 0; }
#primary { margin: 0; padding: 0; }