/*
 * Pelso Camping Landing Page – Custom CSS
 * Complements Tailwind utility classes.
 * Build: npm run build  (or: npm run watch for development)
 */

/* ── Design tokens ─────────────────────────────────────────────── */
:root {
    --pelso-bg:     #FFF8E8;
    --pelso-blue:   #1E88A8;
    --pelso-light:  #A7D8F0;
    --pelso-yellow: #FFD166;
    --pelso-coral:  #EF767A;
    --pelso-green:  #80CFA9;
    --pelso-dark:   #17324D;
}

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

body.pelso-landing-page {
    background-color: var(--pelso-bg);
    color: var(--pelso-dark);
    font-family: 'Nunito Sans', Inter, system-ui, sans-serif;
    margin: 0;
    padding: 0;
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
}

/* ── Sticky nav ────────────────────────────────────────────────── */
.pelso-nav {
    background: transparent;
}

.pelso-nav--scrolled {
    background: rgba(23, 50, 77, 0.97);
    backdrop-filter: blur(12px);
    box-shadow: 0 2px 20px rgba(23, 50, 77, .25);
}

.pelso-nav__brand {
    text-shadow: 0 1px 4px rgba(0,0,0,.3);
}

/* ── Hero overlay & USP strip ──────────────────────────────────── */
.pelso-hero-overlay {
    background: linear-gradient(
        to bottom,
        rgba(23, 50, 77, .40) 0%,
        rgba(23, 50, 77, .30) 40%,
        rgba(23, 50, 77, .72) 100%
    );
}

.pelso-usp-strip {
    background: rgba(255, 209, 102, .92);
    backdrop-filter: blur(8px);
}

/* ── Buttons ───────────────────────────────────────────────────── */
.pelso-btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .75rem 1.75rem;
    border-radius: 9999px;
    background-color: var(--pelso-yellow);
    color: var(--pelso-dark);
    font-weight: 700;
    font-size: 1rem;
    text-decoration: none;
    border: 2px solid transparent;
    cursor: pointer;
    transition: background-color .2s, transform .1s, box-shadow .2s;
    box-shadow: 0 4px 15px rgba(255, 209, 102, .45);
    white-space: nowrap;
}

.pelso-btn-primary:hover {
    background-color: #ffc833;
    box-shadow: 0 6px 20px rgba(255, 209, 102, .6);
    transform: translateY(-1px);
}

.pelso-btn-primary:active { transform: scale(.97); }

.pelso-btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .75rem 1.75rem;
    border-radius: 9999px;
    background-color: var(--pelso-blue);
    color: #fff;
    font-weight: 700;
    font-size: 1rem;
    text-decoration: none;
    border: 2px solid transparent;
    cursor: pointer;
    transition: background-color .2s, transform .1s;
    box-shadow: 0 4px 15px rgba(30, 136, 168, .35);
    white-space: nowrap;
}

.pelso-btn-secondary:hover {
    background-color: #1a7a9a;
    transform: translateY(-1px);
}

.pelso-btn-outline-white {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .75rem 1.75rem;
    border-radius: 9999px;
    background-color: transparent;
    color: #fff;
    font-weight: 700;
    font-size: 1rem;
    text-decoration: none;
    border: 2px solid rgba(255,255,255,.6);
    cursor: pointer;
    transition: background-color .2s, border-color .2s, transform .1s;
    white-space: nowrap;
}

.pelso-btn-outline-white:hover {
    background-color: rgba(255,255,255,.15);
    border-color: #fff;
    transform: translateY(-1px);
}

/* ── Wave section dividers ─────────────────────────────────────── */
.pelso-wave {
    display: block;
    line-height: 0;
    overflow: hidden;
}

.pelso-wave svg {
    display: block;
    width: 100%;
    height: 60px;
}

.pelso-wave--from-hero svg { background: transparent; }
.pelso-wave--from-blue  svg { background: var(--pelso-blue); }

/* ── Horizontal tab scroll (mobile) ───────────────────────────── */
.pelso-tab-scroll {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.pelso-tab-scroll::-webkit-scrollbar { display: none; }

/* ── Form elements ─────────────────────────────────────────────── */
.pelso-label {
    display: block;
    font-weight: 600;
    font-size: .875rem;
    margin-bottom: .35rem;
    color: var(--pelso-dark);
}

.pelso-input {
    display: block;
    width: 100%;
    padding: .65rem .9rem;
    border: 2px solid #e2e8f0;
    border-radius: .75rem;
    font-size: .9375rem;
    font-family: inherit;
    color: var(--pelso-dark);
    background: #fff;
    transition: border-color .2s, box-shadow .2s;
    -webkit-appearance: none;
}

.pelso-input:focus {
    outline: none;
    border-color: var(--pelso-blue);
    box-shadow: 0 0 0 3px rgba(30, 136, 168, .15);
}

.pelso-input::placeholder { color: #b0bec5; }

/* ── Image placeholder when src 404s ──────────────────────────── */
.pelso-img-placeholder {
    background: linear-gradient(135deg, var(--pelso-light) 0%, var(--pelso-bg) 100%);
    min-height: 120px;
}

/* ── Sticky mobile CTA ─────────────────────────────────────────── */
.pelso-sticky-cta {
    transform: translateY(0);
    transition: transform .35s cubic-bezier(.4, 0, .2, 1);
}

/* ── Smooth section padding offset for fixed nav ──────────────── */
#intro,
#services,
#accommodation,
#restaurants,
#booking {
    scroll-margin-top: 72px;
}

/* ── Screen-reader only ────────────────────────────────────────── */
.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}

/* ── Focus ring (accessibility) ───────────────────────────────── */
:focus-visible {
    outline: 3px solid var(--pelso-yellow);
    outline-offset: 2px;
    border-radius: 4px;
}

/* ── Print: hide decorative elements ──────────────────────────── */
@media print {
    .pelso-nav,
    .pelso-sticky-cta,
    .pelso-wave { display: none !important; }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   CALCULATOR PLUGIN INTEGRATION OVERRIDES
   The plugin (dani_calculator_2024.php) injects a global <style>
   block. The rules below neutralise the ones that conflict with
   the landing page layout. No plugin files are modified.
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* Plugin sets `body { padding-top: 90px }` – cancel it on the landing page */
body.pelso-landing-page {
    padding-top: 0 !important;
}

/* Wrapper: give the calculator its own scroll context and contained padding */
.pelso-booking-calculator {
    position: relative;
    border-radius: 1.5rem;
    overflow: hidden;
}

.pelso-calc-inner {
    padding: 1.5rem;
    /* Ensure the plugin's Bootstrap grid stays inside the wrapper */
    overflow-x: hidden;
}

/* The plugin's `.button` glowing animation is intentional for the payment CTA.
   Scope it so it doesn't leak to our own buttons. */
body.pelso-landing-page .pelso-btn-primary,
body.pelso-landing-page .pelso-btn-secondary,
body.pelso-landing-page .pelso-btn-outline-white {
    animation: none !important;
    -webkit-animation: none !important;
}

/* Plugin uses Bootstrap's `.container` at full width – constrain it */
.pelso-calc-inner > .container {
    max-width: 100% !important;
    padding-left: 0;
    padding-right: 0;
}

/* ── Booking unavailable fallback ─────────────────────────────── */
.pelso-booking-unavailable {
    padding: 3rem 1.5rem;
    text-align: center;
}

.pelso-booking-unavailable__inner {
    max-width: 480px;
    margin: 0 auto;
}

/* ── FAQ accordion icon rotation ──────────────────────────────── */
.pelso-faq-item[open] .pelso-faq-icon {
    transform: rotate(180deg);
}

.pelso-faq-item summary::-webkit-details-marker { display: none; }
.pelso-faq-item summary::marker { display: none; }

/* ── Decorative illustrations ──────────────────────────────── */
.pelso-illustration {
    position: absolute;
    pointer-events: none;
    user-select: none;
    z-index: 0;
}

/* Ensure content sits above illustrations */
#accommodation .max-w-7xl,
#experience .max-w-3xl {
    position: relative;
    z-index: 2;
}


@media (max-width: 768px) {
   .parallax-section{
        background-attachment: scroll !important;
        background-size: 130% auto !important;
        background-position: center top !important;
    }
}

/* Hero offer box: full-width on mobile, auto-width on desktop */
.pelso-hero-offer-box {
    display: block;
    width: 100%;
}
@media (min-width: 640px) {
    .pelso-hero-offer-box {
        display: inline-block;
        width: auto;
    }
}

/* Language switcher in hero: hidden on mobile, visible on desktop */
.pelso-lang-switcher {
    display: none;
}
@media (min-width: 640px) {
    .pelso-lang-switcher {
        display: flex;
    }
}