/*
Theme Name: Consterapia
Theme URI: https://consterapia.com
Author: Consterapia
Author URI: https://consterapia.com
Description: Theme WordPress Block (FSE) pour Consterapia — Constellations familiales & therapies de l'ame. Design elegant avec palette or/brun, polices Marcellus + Nunito Sans, mode sombre, carrousel hero, animations scroll, panneau admin complet.
Version: 2.4.7
Requires at least: 6.4
Tested up to: 6.7
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: consterapia-theme
Tags: full-site-editing, block-patterns, custom-colors, custom-logo, editor-style, one-column, wide-blocks, block-styles, translation-ready
*/

/* ============================================================================
   CSS VARIABLE BRIDGE
   Maps WordPress theme.json generated variables back to short-hand names
   used throughout the existing CSS components.
   ============================================================================ */

:root {
    /* --- Color Bridge --- */
    --gold: var(--wp--preset--color--gold);
    --gold-dark: var(--wp--preset--color--gold-dark);
    --gold-light: var(--wp--preset--color--gold-light);
    --gold-rgb: 229, 183, 32;
    --brown: var(--wp--preset--color--brown);
    --brown-light: var(--wp--preset--color--brown-light);
    --brown-dark: var(--wp--preset--color--brown-dark);
    --brown-rgb: 93, 64, 55;
    --cream: var(--wp--preset--color--cream);
    --cream-dark: var(--wp--preset--color--cream-dark);

    /* --- Semantic Color Tokens --- */
    --bg-primary: #FFFDF5;
    --bg-secondary: #fff;
    --bg-tertiary: #FFF8E1;
    --bg-card: #fff;
    --bg-nav: linear-gradient(135deg, #e5b720, #C9A227);
    --bg-footer: #3E2723;
    --bg-overlay: rgba(0, 0, 0, 0.5);

    --text-primary: var(--wp--preset--color--text-primary);
    --text-secondary: var(--wp--preset--color--text-secondary);
    --text-heading: var(--wp--preset--color--brown);
    --text-light: var(--wp--preset--color--text-light);
    --text-on-gold: #fff;
    --text-on-dark: #FFF8E1;

    --border-color: rgba(93, 64, 55, 0.1);
    --border-light: rgba(93, 64, 55, 0.06);

    /* --- Shadow Bridge --- */
    --shadow-sm: var(--wp--preset--shadow--sm);
    --shadow-md: var(--wp--preset--shadow--md);
    --shadow-lg: var(--wp--preset--shadow--lg);
    --shadow-gold: var(--wp--preset--shadow--gold);

    /* --- Typography Bridge --- */
    --font-body: var(--wp--preset--font-family--body);
    --font-heading: var(--wp--preset--font-family--heading);

    --font-size-xs: var(--wp--preset--font-size--xs);
    --font-size-sm: var(--wp--preset--font-size--small);
    --font-size-base: 1rem;
    --font-size-md: var(--wp--preset--font-size--medium);
    --font-size-lg: var(--wp--preset--font-size--large);
    --font-size-xl: var(--wp--preset--font-size--x-large);
    --font-size-2xl: var(--wp--preset--font-size--xx-large);
    --font-size-3xl: var(--wp--preset--font-size--3xl);
    --font-size-4xl: var(--wp--preset--font-size--4xl);
    --font-size-hero: var(--wp--preset--font-size--hero);

    --line-height: 1.7;
    --line-height-heading: 1.25;

    /* --- Spacing Bridge --- */
    --space-xs: var(--wp--preset--spacing--xs);
    --space-sm: var(--wp--preset--spacing--sm);
    --space-md: var(--wp--preset--spacing--md);
    --space-lg: var(--wp--preset--spacing--lg);
    --space-xl: var(--wp--preset--spacing--xl);
    --space-2xl: var(--wp--preset--spacing--2-xl);
    --space-3xl: var(--wp--preset--spacing--3-xl);
    --space-4xl: var(--wp--preset--spacing--4-xl);
    --space-section: var(--wp--preset--spacing--section);

    /* --- Layout Bridge --- */
    --container-max: 1200px;
    --container-narrow: var(--wp--custom--container-narrow);
    --container-wide: 1400px;
    --header-height: var(--wp--custom--header-height);
    --nav-height: var(--wp--custom--nav-height);
    --sidebar-width: 320px;

    /* --- Border Radius Bridge --- */
    --border-radius-sm: var(--wp--custom--border-radius--sm);
    --border-radius-md: var(--wp--custom--border-radius--md);
    --border-radius-lg: var(--wp--custom--border-radius--lg);
    --border-radius-xl: var(--wp--custom--border-radius--xl);
    --border-radius-full: var(--wp--custom--border-radius--full);

    /* --- Transition Bridge --- */
    --ease-out: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);
    --duration-fast: 0.2s;
    --duration-base: 0.35s;
    --duration-slow: 0.6s;
    --transition: var(--wp--custom--transition--base);
    --transition-fast: var(--wp--custom--transition--fast);
    --transition-slow: var(--wp--custom--transition--slow);

    /* --- Z-Index Scale --- */
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-overlay: 300;
    --z-modal: 400;
    --z-toast: 500;
    --z-preloader: 9999;
}

/* ============================================================================
   DARK MODE OVERRIDES (via data-theme attribute)
   ============================================================================ */

[data-theme="dark"] {
    --bg-primary: #1a1210;
    --bg-secondary: #241c18;
    --bg-tertiary: #2d2320;
    --bg-card: #2d2320;
    --bg-nav: linear-gradient(135deg, #3E2723, #5D4037);
    --bg-footer: #0d0a08;
    --bg-overlay: rgba(0, 0, 0, 0.7);

    --text-primary: #e8ddd5;
    --text-secondary: #bcaaa4;
    --text-heading: #FFF8E1;
    --text-light: #8d6e63;
    --text-on-gold: #1a1210;
    --text-on-dark: #FFF8E1;

    --border-color: rgba(255, 248, 225, 0.1);
    --border-light: rgba(255, 248, 225, 0.05);
    --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.2);
    --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.4);
    --shadow-gold: 0 4px 20px rgba(229, 183, 32, 0.15);
}

/* Dark mode — composants avec background #fff hardcodé */
[data-theme="dark"] .contact-form,
[data-theme="dark"] .faq-item,
[data-theme="dark"] .timeline__card,
[data-theme="dark"] .booking-popup-wrap {
    background: var(--bg-card);
    color: var(--text-primary);
    border-color: rgba(255, 248, 225, 0.08);
}

/* Flèches timeline en mode sombre */
[data-theme="dark"] .timeline__item--left  .timeline__card::after {
    border-left-color: var(--bg-card);
}
[data-theme="dark"] .timeline__item--right .timeline__card::after {
    border-right-color: var(--bg-card);
}

/* Carte "À propos" — badge doré reste inchangé */
[data-theme="dark"] .about__badge {
    box-shadow: 0 4px 20px rgba(229, 183, 32, 0.25);
}

/* Scrolled header en mode sombre */
[data-theme="dark"] .header.scrolled {
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.4), 0 1px 4px rgba(0, 0, 0, 0.3);
    background: var(--bg-secondary);
}

/* FAQ items — titres et texte */
[data-theme="dark"] .faq-item__question {
    color: var(--text-heading);
}
[data-theme="dark"] .faq-item__answer {
    color: var(--text-secondary);
}

/* Formulaire contact — inputs */
[data-theme="dark"] .contact-form input,
[data-theme="dark"] .contact-form textarea,
[data-theme="dark"] .contact-form select {
    background: var(--bg-secondary);
    color: var(--text-primary);
    border-color: var(--border-color);
}

/* Bouton hamburger — lignes toujours blanches (déjà sur fond sombre) */
[data-theme="dark"] .hamburger__line {
    background: var(--text-on-dark);
}

/* ============================================================================
   DARK MODE — NAVIGATION
   La barre nav passe de dorée (#e5b720) à brun foncé (#3E2723).
   Les liens nav restent blancs/crème dans les deux cas, mais les dropdowns
   et le panneau mobile nécessitent des surcharges explicites.
   ============================================================================ */

/* Nav bar desktop: liens toujours blancs sur fond doré ou brun foncé */
[data-theme="dark"] .nav__link,
[data-theme="dark"] .nav__social a {
    color: var(--text-on-dark);
    opacity: 1;
}
[data-theme="dark"] .nav__link:hover,
[data-theme="dark"] .nav__link.active {
    opacity: 0.8;
    color: var(--text-on-dark);
}

/* Dropdown desktop en mode sombre */
[data-theme="dark"] .nav__dropdown {
    background: var(--bg-tertiary);
    border-color: var(--border-color);
}
[data-theme="dark"] .nav__dropdown-link {
    color: var(--text-primary);
}
[data-theme="dark"] .nav__dropdown-link:hover {
    background: var(--bg-secondary);
    color: var(--gold);
}
[data-theme="dark"] .nav__subdropdown {
    background: var(--bg-secondary);
}

/* Panneau mobile slide-out en mode sombre — fond brun foncé */
@media screen and (max-width: 767px) {
    [data-theme="dark"] .nav__menu {
        background: linear-gradient(180deg, #3E2723 0%, #5D4037 100%) !important;
        border-right: 1px solid rgba(255, 248, 225, 0.1) !important;
    }
    [data-theme="dark"] .nav__menu .nav__link,
    [data-theme="dark"] .nav__menu .nav__list .nav__link {
        color: #FFF8E1 !important;
        border-bottom-color: rgba(255, 248, 225, 0.15) !important;
    }
    [data-theme="dark"] .nav__menu .nav__link:hover,
    [data-theme="dark"] .nav__menu .nav__link:active {
        color: #fff !important;
    }
    [data-theme="dark"] .nav__menu .nav__dropdown {
        background: rgba(0, 0, 0, 0.25) !important;
    }
    [data-theme="dark"] .nav__menu .nav__dropdown-link {
        color: rgba(255, 248, 225, 0.85) !important;
    }
    [data-theme="dark"] .nav__menu .nav__dropdown-link:hover,
    [data-theme="dark"] .nav__menu .nav__dropdown-link:active {
        color: #fff !important;
    }
}