/* ==========================================================================
   THEME.CSS — AT STUDIO
   Active Client: SAIRAN & MARIEN — Marine + Vibrant Sunset Palette
   Watercolor washes: wc-warm (sunset), wc-cool (marine), wc-flower (editorial)
   ========================================================================== */
:root {
    --accent:               #E8756A;
    --accent-light:         #F4B8C8;
    --accent-dark:          #C4574D;
    --accent-glow:          rgba(232, 117, 106, 0.3);
    --accent-glow-soft:     rgba(232, 117, 106, 0.15);
    --accent-glow-faint:    rgba(232, 117, 106, 0.05);
    --accent-border:        rgba(232, 117, 106, 0.2);
    --accent-border-mid:    rgba(232, 117, 106, 0.3);
    --accent-border-strong: rgba(232, 117, 106, 0.5);
    --accent-bg:            rgba(232, 117, 106, 0.1);
    --secondary:            #E8934A;
    --hero-gate-color:      #E8934A;
    --hero-gate-glow:       rgba(232, 147, 74, 0.3);
    --ampersand-color:      #F4B8C8;
    --bg-darkest:           #000000;
    --bg-dark:              #0e0e0e;
    --bg-dark-2:            #050505;
    --bg-dark-3:            #0a0a0a;
    --bg-light:             #faf4ee;
    --bg-light-overlay:     #f5ede0;
    --bg-cinema-image:      url('assets/images/std-marine.webp');
    --bg-schedule-image:    url('assets/images/flap-board.webp');
    --bg-gate-overlay:      linear-gradient(rgba(0,0,0,0.55), rgba(0,0,0,0.65));
    --bg-gate-image:        url('assets/images/login.webp');
    --section-decorator-color: #E8457A;
    --success:              #00ff88;
    --error:                #ff4b4b;
}

/*
   RESTORE GOLD THEME (Alex & Eloi):
   --accent: #d4af37; --accent-light: #f1d592; --accent-dark: #b08d2b;
   --accent-glow: rgba(212,175,55,0.3); --accent-glow-soft: rgba(212,175,55,0.15);
   --accent-glow-faint: rgba(212,175,55,0.05); --accent-border: rgba(212,175,55,0.2);
   --accent-border-mid: rgba(212,175,55,0.3); --accent-border-strong: rgba(212,175,55,0.5);
   --accent-bg: rgba(212,175,55,0.1); --secondary: #f6b6c1;
   --hero-gate-color: #f6b6c1; --hero-gate-glow: rgba(157,124,253,0.3);
   --ampersand-color: #f6b6c1; --bg-light: #f9f9f7; --bg-light-overlay: #fdfdfb;
   --section-decorator-color: #f6b6c1;
*/
/* ==========================================================================
   SECTION BACKGROUNDS — Sairan & Marien (Marine + Vibrant Sunset)
   Strategy: real watercolor image backgrounds, three washes for variety.
   ========================================================================== */

:root {
    /* Watercolor washes — extracted from client's own invitation assets.
       wc-warm.webp  = sandy/golden sunset wash (Voyage Logs, RSVP)
       wc-cool.webp  = sky/ocean marine wash (Sailing Schedule)
       wc-flower.webp = floral corner wash (Magazine / editorial pages) — desktop/landscape
       wc-flower-portrait.webp = same wash, portrait-cropped so flowers stay in frame on phones */
    --wc-bg-warm:   url('assets/images/wc-warm.webp');
    --wc-bg-cool:   url('assets/images/wc-cool.webp');
    --wc-bg-flower: url('assets/images/magazine-bg.webp');
    --wc-bg-flower-portrait: url('assets/images/magazine-bg.webp');
}

/* ── Voyage Logs ──────────────────────────────────────────────────────────── */
.flight-path-section {
    background-color: #f5e8d8 !important;
    background-image:
        linear-gradient(rgba(249, 240, 232, 0.22), rgba(249, 240, 232, 0.22)),
        var(--wc-bg-warm) !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}
.flight-path-section .container { text-align: center; }
.flight-path-section .radar-timeline { text-align: left; }
.flight-path-section .milestone-content {
    background: rgba(255, 252, 248, 0.88) !important;
    border: 1px solid rgba(200, 150, 100, 0.18) !important;
    box-shadow: 0 4px 20px rgba(180, 110, 70, 0.10) !important;
}
.flight-path-section .milestone:hover .milestone-content {
    background: rgba(255, 255, 255, 0.96) !important;
    border-color: rgba(232, 117, 106, 0.30) !important;
}
.flight-path-section .radar-node {
    background: #f5e8d8 !important;
    border-color: var(--secondary) !important;
    box-shadow: 0 0 8px rgba(232, 147, 74, 0.35) !important;
}
.flight-path-section .milestone-date { color: #C4574D !important; }
.flight-path-section .milestone-title { color: #2a1a10 !important; }
.flight-path-section .milestone-text  { color: rgba(42, 26, 16, 0.68) !important; }

/* ── Sailing Schedule ─────────────────────────────────────────────────────── */
.logistics-section {
    background-color: #e8f3f8 !important;
    background-image:
        linear-gradient(rgba(230, 244, 250, 0.48), rgba(230, 244, 250, 0.48)),
        var(--wc-bg-cool) !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}
.logistics-section .split-flap-board {
    background: rgba(249, 228, 210, 0.35) !important;
    border-color: rgba(135, 190, 220, 0.25) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
}
.logistics-section .split-flap-board::before {
    background: linear-gradient(90deg, var(--accent-light), var(--accent), var(--secondary)) !important;
    height: 3px !important;
}

/* ── RSVP ─────────────────────────────────────────────────────────────────── */
.rsvp-section {
    background-color: #f8e8ee !important;
    background-image:
        linear-gradient(rgba(252, 235, 242, 0.48), rgba(252, 235, 242, 0.48)),
        var(--wc-bg-warm) !important;
    background-size: cover !important;
    background-position: center bottom !important;
    background-repeat: no-repeat !important;
}

/* Gate overlay */
:root {
    --bg-gate-overlay: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.45));
}

/* ── Magazine Section (teaser — outside overlay) ─────────────────────────── */
.magazine-section {
    background-color: #fff5ee !important;
    background-image:
        linear-gradient(160deg, rgba(244, 184, 200, 0.4) 0%, rgba(232, 147, 74, 0.22) 50%, rgba(232, 117, 106, 0.28) 100%),
        var(--wc-bg-flower) !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}

.magazine-section .section-badge {
    color: var(--accent-dark);
    border-color: var(--accent-border-strong);
    background: rgba(255, 255, 255, 0.55);
}

/* ── Magazine Overlay (open reader) ──────────────────────────────────────── */
.magazine-overlay {
    background-color: #fdf0e5 !important;
    background-image:
        linear-gradient(160deg, rgba(244, 184, 200, 0.38) 0%, rgba(232, 147, 74, 0.2) 50%, rgba(232, 117, 106, 0.26) 100%),
        var(--wc-bg-flower) !important;
    background-size: cover !important;
    background-position: center top !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
}
.mag-page {
    background: #fae3e1 !important;
    border: 1px solid rgba(232, 117, 106, 0.22) !important;
    box-shadow: 0 8px 32px rgba(196, 87, 77, 0.10) !important;
}
.welcome-letter {
    background: #fbe9e7 !important;
}
.welcome-letter .letter-content {
    background: #fdf1f0 !important;
}

/* ── Magazine: swap to portrait-cropped wash on phones ───────────────────────
   The landscape wash's floral corners get cropped out by `cover` on narrow
   viewports. The portrait version keeps both flowers in frame, anchored
   toward the bottom where they live in the source image.                    */
@media (max-width: 768px) {
    .magazine-section,
    .magazine-overlay {
        background-position: center bottom !important;
    }
    .magazine-section {
        background-image:
            linear-gradient(160deg, rgba(244, 184, 200, 0.4) 0%, rgba(232, 147, 74, 0.22) 50%, rgba(232, 117, 106, 0.28) 100%),
            var(--wc-bg-flower-portrait) !important;
    }
    .magazine-overlay {
        background-image:
            linear-gradient(160deg, rgba(244, 184, 200, 0.38) 0%, rgba(232, 147, 74, 0.2) 50%, rgba(232, 117, 106, 0.26) 100%),
            var(--wc-bg-flower-portrait) !important;
        background-attachment: scroll !important; /* fixed + portrait can jitter on mobile Safari */
    }
}

/* ── Entourage column headers ─────────────────────────────────────────────── */
.entourage-column h3 {
    color: #C4574D !important;
    border-bottom: 1px solid rgba(200, 150, 100, 0.25);
    padding-bottom: 6px;
    margin-bottom: 10px;
}
.page-title { color: #1a1a1a; }
.page-title::after { color: var(--accent) !important; opacity: 1 !important; }

/*
   RESTORE GOLD THEME (Alex & Eloi) — section backgrounds:
   .flight-path-section { background-color: #0a0a08; }
   .rsvp-section { background-color: #090909; }
*/
/* ── Maps Button — force pill style on all viewports ─────────────────────── */
.logistics-section a.maps-btn,
.logistics-section .maps-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 0.68rem !important;
    font-weight: 700 !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    color: var(--accent-dark) !important;
    background: rgba(255, 255, 255, 0.95) !important;
    border: 1.5px solid var(--accent) !important;
    border-radius: 999px !important;
    padding: 10px 24px !important;
    box-shadow: 0 2px 14px rgba(196,87,77,0.22) !important;
    margin-top: 6px !important;
    cursor: pointer !important;
}

.logistics-section a.maps-btn:hover,
.logistics-section .maps-btn:hover {
    background: var(--accent) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 16px rgba(196,87,77,0.35) !important;
    transform: translateY(-1px) !important;
}