/**
 * KAIZEN GRID SYSTEM & SCROLL ANIMATIONS
 * Forge Creation Digital
 * 
 * @package Kaizen_Child_Theme
 * @since 1.0.0
 * 
 * COLOR SYSTEM:
 * - Default: white background, dark text
 * - Use section-dark class to trigger light logo
 * - Use section-light class (or none) to trigger dark logo
 * - Use --section-bg and --section-text CSS variables for custom colors
 * 
 * USAGE:
 * <section class="kaizen-section">Default white</section>
 * <section class="kaizen-section section-dark" style="--section-bg: #1a1a2e; --section-text: #fff;">Custom dark</section>
 * <section class="kaizen-section section-dark" style="--section-bg: #2d5a27; --section-text: #f0f0f0;">Different dark</section>
 * <section class="kaizen-section section-light" style="--section-bg: #f5f0e6; --section-text: #333;">Custom light</section>
 */

/* ===== CSS VARIABLES - DEFAULTS ===== */
:root {
    --kaizen-bg-light: #ffffff;
    --kaizen-text-light: #000000;
    --kaizen-bg-dark: #000000;
    --kaizen-text-dark: #ffffff;
    --kaizen-transition-speed: 0.6s;
}

/* Force headings to inherit section color */
.kaizen-section h1,
.kaizen-section h2,
.kaizen-section h3,
.kaizen-section h4,
.kaizen-section h5,
.kaizen-section h6,
.kaizen-section a {
    color: inherit;
    text-decoration: none;
}

/* ===== PAGE CONTAINER & COLOR SWITCHING ===== */
body {
    background-color: var(--kaizen-bg-light);
    color: var(--kaizen-text-light);
    transition: background-color var(--kaizen-transition-speed) ease, 
                color var(--kaizen-transition-speed) ease;
}

/* When a dark section is active - JS adds this class + sets CSS vars */
body.color-switch-dark {
    background-color: var(--active-bg, var(--kaizen-bg-dark));
    color: var(--active-text, var(--kaizen-text-dark));
}

/* When a custom light section is active */
body.color-switch-light {
    background-color: var(--active-bg, var(--kaizen-bg-light));
    color: var(--active-text, var(--kaizen-text-light));
}

/* ==============================================
   KAIZEN COLOR SLOTS
   Named color states (1-4) driven by
   data-kaizen-color="N" on .kaizen-section.
   Background colors set via inline CSS from
   Customizer (enqueue.php). These rules ensure
   smooth transitions and CSS variable availability.
   Add data-kaizen-color="N" to any .kaizen-section.
   ============================================== */
body.kaizen-color-1,
body.kaizen-color-2,
body.kaizen-color-3,
body.kaizen-color-4 {
    transition: background-color var(--kaizen-transition-speed) ease,
                color var(--kaizen-transition-speed) ease;
}

/* Page container is layout-only */
.page-container {
    max-width: 100%;
    padding: 0;
    box-sizing: border-box;
    min-height: 100vh;
}

/* ===== SECTION COLOR CLASSES ===== */
/* Dark sections - will use light logo */
.kaizen-section.section-dark {
    background-color: var(--section-bg, var(--kaizen-bg-dark));
    color: var(--section-text, var(--kaizen-text-dark));
}

/* Light sections - will use dark logo */
.kaizen-section.section-light {
    background-color: var(--section-bg, var(--kaizen-bg-light));
    color: var(--section-text, var(--kaizen-text-light));
}

/* Sections are always transparent */
.kaizen-section,
.section-dark,
.section-light {
  background-color: transparent !important;
}

/* ===== RESPONSIVE DESKTOP/MOBILE VISIBILITY ===== */
.kaizen-mobile {
    display: none;
}

@media (max-width: 900px) {
    .kaizen-mobile {
        display: block !important;
    }
    .kaizen-desktop {
        display: none !important;
    }
}

/* ===== KAIZEN SECTION LAYOUT ===== */
.kaizen-section {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    max-width: 1500px;
    margin: 0 auto;
    padding: 0 20px;
    transition: background-color var(--kaizen-transition-speed) ease,
                color var(--kaizen-transition-speed) ease;
}

/* ===== STICKY SCROLL SECTIONS ===== */
.kaizen-section-sticky {
    position: sticky;
    top: 0;
    min-height: 100vh;
    z-index: 10;
    transition: opacity var(--kaizen-transition-speed) ease;
    overflow: hidden;
}

.kaizen-section-sticky .fade-overlay {
    position: absolute;
    inset: 0;
    background: var(--section-bg, var(--kaizen-bg-dark));
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--kaizen-transition-speed) ease;
    z-index: 50;
    mix-blend-mode: normal;
}

/* Top section variant */
.kaizen-section-top {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    max-width: 1500px;
    margin: 0 auto;
    padding: 100px 20px 80px 20px;
    min-height: auto !important;
}

/* Last section utility */
.last-section {
    min-height: 600px !important;
}

@media (max-width: 1200px) {
    .last-section { min-height: 400px !important; }
}

@media (max-width: 1024px) {
    .last-section { min-height: 300px !important; }
}

@media (max-width: 767px) {
    .last-section { min-height: 250px !important; }
}

/* ===== TYPOGRAPHY STYLES ===== */
.title {
    font-size: clamp(2rem, 5vw, 7.5rem);
    margin-bottom: 2rem;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
    line-height: 1.2;
}

@media (max-width: 1200px) {
    .title { font-size: clamp(2rem, 4.5vw, 6rem); }
}

@media (max-width: 900px) {
    .title {
        font-size: clamp(1.5rem, 4vw, 4.5rem);
        padding: 0 10px;
    }
}

@media (max-width: 600px) {
    .title {
        font-size: clamp(1.25rem, 3.5vw, 3.5rem);
        padding: 0 5px;
        white-space: normal;
    }
}

.kaizen-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
    text-align: center;
}

.kaizen-col h3 {
    font-size: 5rem;
    margin-bottom: 1rem;
}

@media (max-width: 900px) {
    .kaizen-col h3 {
        font-size: 3.5rem;
        margin-bottom: 0.75rem;
    }
}

.kaizen-title {
    color: inherit;
    font-size: 2.5em;
}

@media (max-width: 1024px) and (min-width: 768px) {
    .kaizen-title { font-size: 2em; }
}

@media (max-width: 767px) {
    .kaizen-title { font-size: 1.5em; }
}

/* ===== KAIZEN GRID SETTINGS ===== */
.kaizen-group {
    display: grid;
    grid-gap: 10px;
}

.kaizen-grid-1 { grid-template-columns: 1fr; min-height: 1000px; }
.kaizen-grid-2 { grid-template-columns: repeat(2, 1fr); min-height: 1000px; }
.kaizen-grid-3 { grid-template-columns: repeat(3, 1fr); min-height: 1000px; }
.kaizen-grid-4 { grid-template-columns: repeat(4, 1fr); min-height: 1000px; }
.kaizen-grid-5 { grid-template-columns: repeat(5, 1fr); min-height: 1000px; }
.kaizen-grid-6 { grid-template-columns: repeat(6, 1fr); min-height: 1000px; }

/* Laptop adjustments */
@media (max-width: 1200px) {
    .kaizen-grid-1, .kaizen-grid-2, .kaizen-grid-3,
    .kaizen-grid-4, .kaizen-grid-5, .kaizen-grid-6 {
        min-height: 800px;
    }
    .kaizen-grid-2, .kaizen-grid-3, .kaizen-grid-4,
    .kaizen-grid-5, .kaizen-grid-6 {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Tablet adjustments */
@media (max-width: 1024px) {
    .kaizen-grid-1, .kaizen-grid-2, .kaizen-grid-3,
    .kaizen-grid-4, .kaizen-grid-5, .kaizen-grid-6 {
        grid-template-columns: 1fr;
        min-height: 600px;
    }
    .kaizen-col {
        width: 100%;
        padding: 0px !important;
    }
    .kaizen-col img {
        max-width: 90%;
    }
}

/* Mobile adjustments */
@media (max-width: 767px) {
    .kaizen-grid-1, .kaizen-grid-2, .kaizen-grid-3,
    .kaizen-grid-4, .kaizen-grid-5, .kaizen-grid-6 {
        min-height: 450px;
        grid-template-columns: 1fr;
    }
    .kaizen-col {
        width: 100%;
        padding: 0px !important;
    }
    .kaizen-col img {
        max-width: 90%;
    }
}

/* ===== KAIZEN SCROLL LOGO — scoped to scroll logo only ===== */
/* The drop-down animation is handled entirely by header.css + header.js.
   This block intentionally left empty to avoid bleeding onto footer logo. */

/* ===== KAIZEN SCROLL ANIMATIONS ===== */
.anime {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.anime.fade-in-up {
    opacity: 1;
    transform: translateY(-10px);
}

.anime.fade-out-up {
    opacity: 0;
    transform: translateY(10px);
}

.anime.fade-in-down {
    opacity: 1;
    transform: translateY(10px);
}

.anime.fade-out-down {
    opacity: 0;
    transform: translateY(-10px);
}

.animeimage {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.animeimage.fade-in-up {
    opacity: 1;
    transform: translateY(-10px);
}

.animeimage.fade-out-up {
    opacity: 0;
    transform: translateY(10px);
}

.animeimage.fade-in-down {
    opacity: 1;
    transform: translateY(10px);
}

.animeimage.fade-out-down {
    opacity: 0;
    transform: translateY(-10px);
}

/* ===== PERFORMANCE ===== */
.anime,
.animeimage {
    will-change: transform, opacity;
}

/* ===== REDUCED MOTION ===== */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        transition: none !important;
        animation: none !important;
    }
    .anime, .animeimage {
        opacity: 1 !important;
        transform: none !important;
    }
}