/* ==========================================================================
   CEDARS DESIGN SYSTEM v2 — light, warm, card-based luxury.
   Lebanese waterfront dining: ivory & sand surfaces, cedar green,
   warm gold, rounded panels, floating cards, soft shadows.
   ========================================================================== */

:root {
    /* Colors — light theme */
    --cds-bg: #FAF7F0;            /* page ivory */
    --cds-bg-alt: #F2EBDE;        /* warm sand */
    --cds-panel: #FFFFFF;         /* cards / panels */
    --cds-ink: #23201A;           /* near-black warm text */
    --cds-ink-soft: #55503F;      /* secondary text */
    --cds-muted: #8A8271;         /* tertiary text */
    --cds-gold: #B08A3C;          /* warm gold (AA on ivory) */
    --cds-gold-light: #C9A45C;
    --cds-gold-tint: #F3E7CD;     /* gold wash background */
    --cds-cedar: #2F4A3A;         /* cedar green — primary dark accent */
    --cds-cedar-deep: #24382C;
    --cds-cedar-tint: #E4EBE2;    /* green wash background */
    --cds-terra: #B96A45;         /* terracotta accent, sparing */
    --cds-line: rgba(35, 32, 26, 0.12);
    --cds-line-gold: rgba(176, 138, 60, 0.35);

    /* Dark panel tokens (for frame-in-frame media panels) */
    --cds-dark: #1E2B22;
    --cds-dark-ivory: #F4EDE1;

    /* Typography */
    --cds-font-display: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
    --cds-font-body: 'Jost', 'Karla', -apple-system, sans-serif;

    /* Shape & elevation */
    --cds-r-lg: 32px;
    --cds-r-md: 20px;
    --cds-r-sm: 12px;
    --cds-shadow-soft: 0 6px 30px rgba(35, 32, 26, 0.07);
    --cds-shadow-lift: 0 18px 60px rgba(35, 32, 26, 0.13);

    /* Spacing rhythm */
    --cds-section-pad: clamp(72px, 9vw, 140px);
    --cds-gutter: clamp(20px, 4.5vw, 72px);

    /* Motion */
    --cds-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --cds-dur: 0.8s;

    /* Z-scale */
    --cds-z-nav: 900;
    --cds-z-mega: 910;
    --cds-z-float: 950;
    --cds-z-lightbox: 1000;
}

/* Full-bleed light section wrapper */
.cds-section {
    width: 100%;
    max-width: 100%;
    margin: 0;
    position: relative;
    overflow: hidden;
    background: var(--cds-bg);
    color: var(--cds-ink);
    font-family: var(--cds-font-body);
    box-sizing: border-box;
}

.cds-section--alt { background: var(--cds-bg-alt); }
.cds-section--cedar { background: var(--cds-cedar); color: var(--cds-dark-ivory); }

.cds-section *,
.cds-section *::before,
.cds-section *::after {
    box-sizing: border-box;
}

/* Inner container: spacing lives INSIDE widgets */
.cds-inner {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding-left: var(--cds-gutter);
    padding-right: var(--cds-gutter);
}

.cds-inner--wide { max-width: 1760px; }

/* --------------------------------------------------------------------------
   Typography primitives
   -------------------------------------------------------------------------- */
.cds-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-family: var(--cds-font-body);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--cds-gold);
}

.cds-eyebrow svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.5;
}

.cds-eyebrow--chip {
    gap: 10px;
    padding: 0;
    color: var(--cds-gold);
    letter-spacing: 0.22em;
    font-size: 12px;
}

/* Cedars merkteken (geanimeerd, geïnjecteerd door cedars.js) */
.cds-eyebrow--chip svg.cds-brandmark {
    width: 26px;
    height: 26px;
    flex-shrink: 0;
    stroke: none;
    fill: none;
    overflow: visible;
}

.cds-h1,
.cds-h2,
.cds-h3 {
    font-family: var(--cds-font-display);
    font-weight: 500;
    line-height: 1.06;
    color: var(--cds-ink);
    margin: 0;
}

.cds-h1 { font-size: clamp(42px, 6.4vw, 96px); letter-spacing: -0.01em; }
.cds-h2 { font-size: clamp(34px, 4.4vw, 60px); letter-spacing: -0.005em; }
.cds-h3 { font-size: clamp(23px, 2.4vw, 32px); }

.cds-h1 em,
.cds-h2 em,
.cds-h3 em {
    font-style: italic;
    color: var(--cds-gold);
}

.cds-section--cedar .cds-h1,
.cds-section--cedar .cds-h2,
.cds-section--cedar .cds-h3 { color: var(--cds-dark-ivory); }

.cds-section--cedar .cds-h1 em,
.cds-section--cedar .cds-h2 em { color: var(--cds-gold-light); }

.cds-lead {
    font-size: clamp(17px, 1.35vw, 20px);
    line-height: 1.7;
    font-weight: 300;
    color: var(--cds-ink-soft);
    max-width: 62ch;
}

.cds-body {
    font-size: 16px;
    line-height: 1.75;
    font-weight: 300;
    color: var(--cds-ink-soft);
}

.cds-section--cedar .cds-lead,
.cds-section--cedar .cds-body { color: rgba(244, 237, 225, 0.82); }

/* --------------------------------------------------------------------------
   Buttons — pill shaped, light-theme
   -------------------------------------------------------------------------- */
.cds-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 54px;
    padding: 15px 36px;
    font-family: var(--cds-font-body);
    font-size: 13.5px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    border: 1px solid transparent;
    border-radius: 999px;
    position: relative;
    transition: background-color 0.35s var(--cds-ease), color 0.35s var(--cds-ease),
        border-color 0.35s var(--cds-ease), box-shadow 0.35s var(--cds-ease), transform 0.35s var(--cds-ease);
    white-space: nowrap;
}

.cds-btn svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.6;
}

.cds-btn--solid {
    background: var(--cds-cedar);
    color: #FCFAF4;
    box-shadow: 0 10px 26px rgba(47, 74, 58, 0.28);
}

.cds-btn--solid:hover {
    background: var(--cds-cedar-deep);
    color: #FFFFFF;
    box-shadow: 0 14px 34px rgba(47, 74, 58, 0.34);
    transform: translateY(-1px);
}

.cds-btn--gold {
    background: var(--cds-gold);
    color: #FFFDF6;
    box-shadow: 0 10px 26px rgba(176, 138, 60, 0.32);
}

.cds-btn--gold:hover {
    background: #9C7A33;
    transform: translateY(-1px);
}

.cds-btn--ghost {
    background: transparent;
    color: var(--cds-ink);
    border-color: rgba(35, 32, 26, 0.28);
}

.cds-btn--ghost:hover {
    border-color: var(--cds-gold);
    color: var(--cds-gold);
}

.cds-btn--light {
    background: #FFFFFF;
    color: var(--cds-ink);
    box-shadow: var(--cds-shadow-soft);
}

.cds-btn--light:hover { color: var(--cds-gold); transform: translateY(-1px); }

.cds-btn:focus-visible {
    outline: 2px solid var(--cds-gold);
    outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   Cards & chips
   -------------------------------------------------------------------------- */
.cds-card {
    background: var(--cds-panel);
    border-radius: var(--cds-r-md);
    box-shadow: var(--cds-shadow-soft);
    border: 1px solid rgba(35, 32, 26, 0.05);
}

.cds-chip {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 22px;
    background: var(--cds-panel);
    border-radius: 999px;
    box-shadow: var(--cds-shadow-soft);
    font-size: 12.5px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--cds-ink);
}

.cds-chip svg {
    width: 18px;
    height: 18px;
    stroke: var(--cds-gold);
    fill: none;
    stroke-width: 1.5;
}

/* Icon badge — round tinted holder for custom Lebanese icons */
.cds-icon-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 18px;
    background: var(--cds-gold-tint);
    flex-shrink: 0;
}

.cds-icon-badge svg {
    width: 26px;
    height: 26px;
    stroke: var(--cds-gold);
    fill: none;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.cds-icon-badge--cedar { background: var(--cds-cedar-tint); }
.cds-icon-badge--cedar svg { stroke: var(--cds-cedar); }

/* --------------------------------------------------------------------------
   Reveal system (GSAP hooks — cedars.js)
   -------------------------------------------------------------------------- */
html.cds-js [data-cds-reveal] {
    opacity: 0;
    transform: translateY(48px);
    will-change: transform, opacity;
}

html.cds-js [data-cds-reveal="fade"] { transform: none; }
html.cds-js [data-cds-reveal="left"] { transform: translateX(-60px); }
html.cds-js [data-cds-reveal="right"] { transform: translateX(60px); }
html.cds-js [data-cds-reveal="scale"] { transform: scale(0.94); }

@media (prefers-reduced-motion: reduce) {
    html.cds-js [data-cds-reveal] {
        opacity: 1 !important;
        transform: none !important;
    }
}

/* Image media block with hover zoom */
.cds-media {
    position: relative;
    overflow: hidden;
    display: block;
    border-radius: var(--cds-r-md);
}

.cds-media--flat { border-radius: 0; }

.cds-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 1.2s var(--cds-ease);
}

/* Elementor's `.elementor img { height: auto }` heeft gelijke specificiteit
   en laadt later; deze regel wint zodat media-afbeeldingen hun kader vullen. */
.elementor .cds-media img {
    height: 100%;
}

.cds-media:hover img,
a:hover .cds-media img {
    transform: scale(1.05);
}

@media (prefers-reduced-motion: reduce) {
    .cds-media img { transition: none; }
    .cds-media:hover img { transform: none; }
}

/* Gold star row */
.cds-stars {
    display: inline-flex;
    gap: 4px;
    color: var(--cds-gold);
}

.cds-stars svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
}

/* Thin divider */
.cds-divider {
    width: 64px;
    height: 1px;
    background: var(--cds-gold);
    opacity: 0.7;
    border: 0;
    margin: 0;
}

/* --------------------------------------------------------------------------
   Lightbox (gallery)
   -------------------------------------------------------------------------- */
.cds-lightbox {
    position: fixed;
    inset: 0;
    z-index: var(--cds-z-lightbox);
    background: rgba(24, 21, 16, 0.94);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 5vh 5vw;
}

.cds-lightbox.is-open { display: flex; }

.cds-lightbox img {
    max-width: 100%;
    max-height: 90vh;
    object-fit: contain;
    border-radius: var(--cds-r-sm);
    box-shadow: 0 40px 120px rgba(0, 0, 0, 0.6);
}

.cds-lightbox__close,
.cds-lightbox__prev,
.cds-lightbox__next {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    color: #F4EDE1;
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s;
}

.cds-lightbox__close:hover,
.cds-lightbox__prev:hover,
.cds-lightbox__next:hover {
    background: rgba(255, 255, 255, 0.25);
    color: #fff;
}

.cds-lightbox__close { top: 24px; right: 24px; }
.cds-lightbox__prev { left: 24px; top: 50%; transform: translateY(-50%); }
.cds-lightbox__next { right: 24px; top: 50%; transform: translateY(-50%); }

.cds-lightbox svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.5; }

/* Scrollbar-less horizontal scroll rows */
.cds-hscroll {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.cds-hscroll::-webkit-scrollbar { display: none; }
.cds-hscroll > * { scroll-snap-align: start; }

/* Utility */
.cds-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

html {
    scroll-behavior: smooth;
    background: var(--cds-bg, #FAF7F0);
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
}