/*
Theme Name: De Groene Keuken
Theme URI: https://paperclicks.nl
Author: Paperclicks AI Builder
Author URI: https://paperclicks.nl
Description: Automatisch gegenereerd WordPress Block Theme vanuit Google Stitch MCP. Geoptimaliseerd voor ACF Pro.
Version: 1.0.1777894441307
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 8.0
License: Proprietary
License URI: https://paperclicks.nl/licentie
Text Domain: de_groene_keuken
Tags: full-site-editing, block-theme, custom-colors, custom-fonts
*/

/* ═══ Google Fonts ═══ */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,400;500;700&family=Inter:wght@400;500;600;700&family=Dm+Sans:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap');

/* ═══ GLOBAL LAYOUT — Enforced Container & Spacing ═══ */

/* Fixed header clearance — prevent content from hiding behind sticky nav */
body {
  padding-top: 80px; /* height of fixed header */
}
/* WP Admin bar active — add extra offset */
body.admin-bar {
  padding-top: calc(80px + 32px);
}
@media screen and (max-width: 782px) {
  body.admin-bar {
    padding-top: calc(80px + 46px);
  }
}

/* Global container constraint — every section respects max-width */
.stitch-main {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}
.stitch-main > section,
.stitch-main > div {
  max-width: 100%;
  overflow-x: hidden;
}

/* P3 FIX: Section spacing is handled by Stitch Tailwind classes (pt-32, py-24, etc.)
   Do NOT add global padding — it overrides the designed per-section rhythm. */

/* Inner container — enforce consistent page width on all inner content */
.stitch-main section > .max-w-7xl,
.stitch-main section > div > .max-w-7xl,
.stitch-main > section > .max-w-6xl,
.stitch-main > section > .max-w-5xl {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

/* Full-bleed sections still respect viewport */
.stitch-main section[class*="bg-"] {
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  padding-left: max(1.5rem, calc((100vw - 80rem) / 2));
  padding-right: max(1.5rem, calc((100vw - 80rem) / 2));
}

/* Image containment */
.stitch-main img {
  max-width: 100%;
  height: auto;
}

/* ═══ Stitch Design System Styles (deduplicated) ═══ */

@layer utilities {
            .prem-gradient-text {
                @apply bg-clip-text text-transparent bg-gradient-to-r from-accent to-[#E8C36B];
            }

.material-symbols-outlined {
                font-family: 'Material Symbols Outlined';
                font-weight: normal;
                font-style: normal;
                font-size: 24px;
                line-height: 1;
                letter-spacing: normal;
                text-transform: none;
                display: inline-block;
                white-space: nowrap;
                word-wrap: normal;
                direction: ltr;
                -webkit-font-feature-settings: 'liga';
                -webkit-font-smoothing: antialiased;
            }
        }

body {
            @apply bg-bg-cream text-text-dark font-body selection:bg-primary selection:text-white;
        }

@layer utilities {
            .prem-reveal {
                opacity: 0;
                transform: translateY(20px);
                transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
            }

.prem-reveal-left {
                opacity: 0;
                transform: translateX(-20px);
                transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
            }

.prem-reveal-right {
                opacity: 0;
                transform: translateX(20px);
                transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
            }

.prem-stagger > * {
                opacity: 0;
                transform: translateY(20px);
                transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
            }

.prem-gradient-text {
                background: linear-gradient(to right, #D4A843, #E6C26A);
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
            }
        }

body {
            @apply selection:bg-primary selection:text-white;
        }

body {
            background-color: #FEFDF8;
            color: #1E293B;
        }

.prem-gradient-text {
            background-clip: text;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-image: linear-gradient(to right, #D4A843, #2D6A4F);
        }
        ::selection {
            background-color: #2D6A4F;
            color: #ffffff;
        }

/* ═══ Scroll Reveal Animation System (Bulletproof) ═══ */
/* 
 * Strategy: CSS-first with JS enhancement.
 * 1. Elements start hidden (opacity:0, transform offset)
 * 2. A CSS @keyframes fallback auto-reveals after 1.5s — NO JS NEEDED
 * 3. When JS works, it adds .prem-visible on scroll for a nicer effect
 * 4. Once .prem-js-ready is on <html>, the CSS fallback is disabled
 *    so JS controls the timing instead.
 */

/* Fallback keyframes — auto-reveal content after 1.5s */
@keyframes premRevealFallback {
  to { opacity: 1; transform: translate(0, 0); }
}

/* Initial state: hidden */
.prem-reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  animation: premRevealFallback 0.6s ease forwards 1.5s;
}
.prem-reveal-left {
  opacity: 0;
  transform: translateX(-20px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  animation: premRevealFallback 0.6s ease forwards 1.5s;
}
.prem-reveal-right {
  opacity: 0;
  transform: translateX(20px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  animation: premRevealFallback 0.6s ease forwards 1.5s;
}
.prem-stagger > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  animation: premRevealFallback 0.6s ease forwards 1.8s;
}

/* When JS is active, DISABLE the CSS fallback animation —
   JS will control visibility via .prem-visible class instead */
html.prem-js-ready .prem-reveal,
html.prem-js-ready .prem-reveal-left,
html.prem-js-ready .prem-reveal-right,
html.prem-js-ready .prem-stagger > * {
  animation: none;
}

/* Visible state: triggered by IntersectionObserver JS */
.prem-reveal.prem-visible,
.prem-reveal-left.prem-visible,
.prem-reveal-right.prem-visible {
  opacity: 1 !important;
  transform: translate(0, 0) !important;
}
.prem-stagger.prem-visible > * {
  opacity: 1 !important;
  transform: translateY(0) !important;
}
/* Stagger delay for child elements */
.prem-stagger.prem-visible > *:nth-child(1) { transition-delay: 0s; }
.prem-stagger.prem-visible > *:nth-child(2) { transition-delay: 0.1s; }
.prem-stagger.prem-visible > *:nth-child(3) { transition-delay: 0.2s; }
.prem-stagger.prem-visible > *:nth-child(4) { transition-delay: 0.3s; }
.prem-stagger.prem-visible > *:nth-child(5) { transition-delay: 0.4s; }
.prem-stagger.prem-visible > *:nth-child(6) { transition-delay: 0.5s; }

/* ═══ WordPress Compatibility ═══ */
.stitch-block { max-width: 100%; }
.stitch-block img { max-width: 100%; height: auto; }

/* ACF Block Preview Mode */
.acf-block-preview .stitch-block {
  pointer-events: none;
}

/* ═══ Light Text Fix (Stitch → dark text on light bg) ═══ */
/* Strategy: A small JS snippet (injected via stitch-animations.js) detects 
   sections with dark backgrounds and marks them [data-theme="dark"].
   CSS only applies dark text overrides to unmarked (light) sections. */
.stitch-main section:not([data-theme="dark"]) .text-slate-300,
.stitch-main section:not([data-theme="dark"]) .text-slate-400,
.stitch-main section:not([data-theme="dark"]) .text-slate-500,
.stitch-main section:not([data-theme="dark"]) .text-gray-300,
.stitch-main section:not([data-theme="dark"]) .text-gray-400,
.stitch-main section:not([data-theme="dark"]) .text-gray-500,
.stitch-main section:not([data-theme="dark"]) .text-neutral-300,
.stitch-main section:not([data-theme="dark"]) .text-neutral-400,
.stitch-main section:not([data-theme="dark"]) .text-neutral-500,
.stitch-main section:not([data-theme="dark"]) .text-zinc-400,
.stitch-main section:not([data-theme="dark"]) .text-zinc-500 {
  color: #334155 !important;
}
.stitch-main section:not([data-theme="dark"]) [class*="text-on-surface-variant"],
.stitch-main section:not([data-theme="dark"]) [class*="text-on-surface/"],
.stitch-main section:not([data-theme="dark"]) .text-on-surface-variant {
  color: #334155 !important;
}
.stitch-main section:not([data-theme="dark"]) .text-on-surface {
  color: #1e293b !important;
}
.stitch-main section:not([data-theme="dark"]) .text-on-background {
  color: #0f172a !important;
}
.stitch-main section:not([data-theme="dark"]) [class*="text-on-secondary-container"] {
  color: #334155 !important;
}
.stitch-main section:not([data-theme="dark"]) p,
.stitch-main section:not([data-theme="dark"]) li,
.stitch-main section:not([data-theme="dark"]) dd {
  color: #334155;
}
/* ═══ Dark Section Text — Override body color inheritance ═══ */
/* On dark sections, body's dark text color is wrong. Force light text. */
.stitch-main section[data-theme="dark"] {
  color: rgba(255, 255, 255, 0.95);
}
.stitch-main section[data-theme="dark"] p,
.stitch-main section[data-theme="dark"] li,
.stitch-main section[data-theme="dark"] dd,
.stitch-main section[data-theme="dark"] span:not([class*="material"]):not([class*="icon"]) {
  color: rgba(255, 255, 255, 0.9);
}
.stitch-main section[data-theme="dark"] h1,
.stitch-main section[data-theme="dark"] h2,
.stitch-main section[data-theme="dark"] h3,
.stitch-main section[data-theme="dark"] h4 {
  color: rgb(255, 255, 255);
}
.stitch-main section[data-theme="dark"] .text-white,
.stitch-main section[data-theme="dark"] [class*="text-white"] {
  color: rgb(255, 255, 255) !important;
}

/* WooCommerce */
.woocommerce .button,
.woocommerce .button.alt {
  border-radius: var(--wp--custom--border-radius, 8px);
}

/* ═══ WPForms — Match Stitch Design System ═══ */
/* Container */
div.wpforms-container-full .wpforms-form {
  max-width: 100%;
}
/* Field inputs */
div.wpforms-container-full .wpforms-form input[type="text"],
div.wpforms-container-full .wpforms-form input[type="email"],
div.wpforms-container-full .wpforms-form input[type="tel"],
div.wpforms-container-full .wpforms-form input[type="url"],
div.wpforms-container-full .wpforms-form input[type="number"],
div.wpforms-container-full .wpforms-form select,
div.wpforms-container-full .wpforms-form textarea {
  border: 1px solid #e2e8f0;
  border-radius: 1rem;
  padding: 1rem 1.25rem;
  font-family: inherit;
  font-size: 1rem;
  background-color: var(--md-sys-color-surface-bright, #f8fafc);
  color: #1e293b;
  transition: all 0.2s ease;
  width: 100%;
  box-sizing: border-box;
}
div.wpforms-container-full .wpforms-form input:focus,
div.wpforms-container-full .wpforms-form select:focus,
div.wpforms-container-full .wpforms-form textarea:focus {
  border-color: var(--md-sys-color-primary, #0095eb);
  box-shadow: 0 0 0 3px rgba(0, 149, 235, 0.15);
  outline: none;
}
/* Labels */
div.wpforms-container-full .wpforms-form .wpforms-field-label {
  font-weight: 500;
  font-size: 0.875rem;
  color: #334155;
  margin-bottom: 0.5rem;
}
/* Submit button */
div.wpforms-container-full .wpforms-form .wpforms-submit-container button[type="submit"],
div.wpforms-container-full .wpforms-form button.wpforms-submit {
  width: 100%;
  padding: 1.25rem 2rem;
  border-radius: 1rem;
  font-weight: 700;
  font-size: 1.125rem;
  font-family: inherit;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
  background: var(--md-sys-color-primary, #0095eb);
  color: white;
  box-shadow: 0 8px 24px rgba(0, 149, 235, 0.3);
}
div.wpforms-container-full .wpforms-form button[type="submit"]:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(0, 149, 235, 0.4);
}
/* Field spacing */
div.wpforms-container-full .wpforms-form .wpforms-field {
  padding: 0.5rem 0;
}
/* Required asterisk */
div.wpforms-container-full .wpforms-form .wpforms-required-label {
  color: #ef4444;
}
/* Textarea min height */
div.wpforms-container-full .wpforms-form textarea {
  min-height: 150px;
  resize: vertical;
}
/* Two-column layout on desktop */
@media (min-width: 768px) {
  div.wpforms-container-full .wpforms-form .wpforms-field-layout .wpforms-layout-column {
    padding: 0 0.75rem;
  }
}