/*
Theme Name: Las Palomas
Theme URI: https://laspalomas.com
Author: Las Palomas Studio
Author URI: https://laspalomas.com
Description: Thème sur mesure pour la maison d'hôtes Las Palomas à Turís, Communauté Valencienne. Minimalisme méditerranéen haut de gamme — "The Sun-Drenched Minimalist".
Version: 0.1.0
Requires at least: 6.4
Tested up to: 6.7
Requires PHP: 8.1
License: Proprietary
Text Domain: las-palomas
Tags: custom-theme, mediterranean, hospitality, tailwind
*/

/* === Variables CSS — Palette Las Palomas === */
:root {
    /* Surfaces */
    --color-surface:                    #fbf9f4;
    --color-surface-dim:                #dbdad5;
    --color-surface-bright:             #fbf9f4;
    --color-surface-container-lowest:   #ffffff;
    --color-surface-container-low:      #f5f3ee;
    --color-surface-container:          #f0eee9;
    --color-surface-container-high:     #eae8e3;
    --color-surface-container-highest:  #e4e2dd;
    --color-surface-variant:            #e4e2dd;

    /* Primaire — Terracotta */
    --color-primary:                    #894b36;
    --color-primary-container:          #a6634d;
    --color-primary-fixed:              #ffdbd0;
    --color-primary-fixed-dim:          #ffb59d;
    --color-on-primary:                 #ffffff;
    --color-on-primary-container:       #fffbff;
    --color-on-primary-fixed:           #380d01;
    --color-on-primary-fixed-variant:   #6f3723;
    --color-inverse-primary:            #ffb59d;
    --color-surface-tint:               #8c4e39;

    /* Secondaire — Olive */
    --color-secondary:                  #5b623e;
    --color-secondary-container:        #e0e7ba;
    --color-secondary-fixed:            #e0e7ba;
    --color-secondary-fixed-dim:        #c3cb9f;
    --color-on-secondary:               #ffffff;
    --color-on-secondary-container:     #616844;
    --color-on-secondary-fixed:         #181e03;
    --color-on-secondary-fixed-variant: #434a29;

    /* Tertiaire — Sable */
    --color-tertiary:                   #68594a;
    --color-tertiary-container:         #827261;
    --color-tertiary-fixed:             #f4dfcb;
    --color-tertiary-fixed-dim:         #d7c3b0;
    --color-on-tertiary:                #ffffff;
    --color-on-tertiary-container:      #fffbff;
    --color-on-tertiary-fixed:          #241a0e;
    --color-on-tertiary-fixed-variant:  #524436;

    /* Neutres & Texte */
    --color-background:                 #fbf9f4;
    --color-on-background:              #1b1c19;
    --color-on-surface:                 #1b1c19;
    --color-on-surface-variant:         #53433e;
    --color-outline:                    #86736d;
    --color-outline-variant:            #d8c2bb;
    --color-inverse-surface:            #30312e;
    --color-inverse-on-surface:         #f2f1ec;

    /* Erreur */
    --color-error:                      #ba1a1a;
    --color-error-container:            #ffdad6;
    --color-on-error:                   #ffffff;
    --color-on-error-container:         #93000a;

    /* Typographie */
    --font-primary: 'Plus Jakarta Sans', sans-serif;

    /* Border radius */
    --radius-sm:    0.125rem;
    --radius-md:    0.375rem;
    --radius-lg:    0.25rem;
    --radius-xl:    0.5rem;
    --radius-full:  0.75rem;

    /* Shadows */
    --shadow-float: 0px 12px 32px rgba(83, 67, 62, 0.06);
}

/* === Base === */
*, *::before, *::after {
    box-sizing: border-box;
}

html {
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--font-primary);
    background-color: var(--color-surface);
    color: var(--color-on-surface);
    line-height: 1.6;
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: antialiased;
}

/* === Utilitaires spéciaux (non-couverts par Tailwind CDN) === */
.hero-gradient {
    background: linear-gradient(135deg, #894b36 0%, #a6634d 100%);
}

.glass-card {
    background: rgba(251, 249, 244, 0.8);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

.shadow-float {
    box-shadow: var(--shadow-float);
}

/* Icônes Material Symbols */
.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
}


/* ============================================================
   MARQUEE
   ============================================================ */
.lp-marquee {
    overflow: hidden;
    padding: 1.25rem 0;
    border-top: 1px solid rgba(134, 115, 109, 0.18);
    border-bottom: 1px solid rgba(134, 115, 109, 0.18);
    background: #f5f3ee;
}

.lp-marquee-track {
    display: flex;
    align-items: center;
    white-space: nowrap;
    will-change: transform;
}

.lp-marquee-word {
    display: inline-flex;
    align-items: center;
    gap: 2rem;
    padding: 0 2.5rem;
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    font-weight: 700;
    color: #86736d;
}

.lp-marquee-word .sep {
    width: 4px; height: 4px;
    background: #894b36;
    border-radius: 50%;
    display: inline-block;
}

/* ============================================================
   CAROUSEL AVIS
   ============================================================ */
.lp-reviews-carousel {
    position: relative;
    overflow: hidden;
}

.lp-reviews-track {
    display: flex;
    gap: 1.5rem;
    will-change: transform;
}

.lp-review-card {
    width: calc((100% - 3rem) / 3);
    min-width: 280px;
}

@media (max-width: 900px) {
    .lp-review-card { width: calc(100% - 1.5rem); }
}

.lp-carousel-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--color-outline-variant);
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 0;
}
.lp-carousel-dot.active {
    width: 24px;
    border-radius: 3px;
    background: var(--color-primary);
}

/* ============================================================
   WORD SPLIT (overflow clip pour reveal)
   ============================================================ */
.lp-line {
    overflow: hidden;
    display: inline-block;
    vertical-align: bottom;
    line-height: 1.3;
}

/* ============================================================
   ÉLÉMENTS INITIALEMENT INVISIBLES (anti-FOUC)
   ============================================================ */
[data-hero-content] > *,
[data-hero-img] {
    will-change: transform, opacity;
}