/* ==========================================================================
   GRANDVANTAGE TOURS — DESIGN SYSTEM
   CSS Custom Properties, Reset, Base Styles, Typography, and Utilities
   ========================================================================== */

/* ---------- Custom Properties (pulled from homepage/tour/destination mockups) ---------- */
:root {
    /* GrandVantage Warm Luxury Palette (from approved mockups) */
    --brown-deep:        #3B2314;    /* Deep espresso/chocolate brown */
    --brown-rich:        #5C3D2E;    /* Warm roast brown */
    --brown-mid:         #8B6B4A;    /* Artisan leather brown */
    --brown-warm:        #A0825C;    /* Warm ochre brown */
    --gold:              #C9982E;    /* Handcrafted metallic gold */
    --gold-light:        #E8C767;    /* Radiant golden hour */
    --gold-pale:         #F5E6B8;    /* Soft champagne gold */
    --amber:             #D4943A;    /* Warm glowing amber */
    --cream:             #F5EDE0;    /* Warm sandstone cream */
    --cream-light:       #FAF6EE;    /* Soft parchment white */
    --cream-dark:        #E8DCC8;    /* Muted linen cream */
    --white:             #FFFFFF;
    --body:              #3D3530;    /* Charcoal earth body text */
    --muted:             #6B6058;    /* Warm stone muted text */
    --dark:              #1E1410;    /* Charcoal dark */
    --teal:              #2A7B6F;    /* Glacial lake teal */
    --success:           #2E7D4F;    /* Sage evergreen */

    /* Backwards-Compatible Aliases for Existing Widgets */
    --clr-primary:       var(--brown-deep);
    --clr-primary-light: var(--brown-rich);
    --clr-primary-dark:  var(--dark);
    --clr-primary-rgb:   59, 35, 20;

    --clr-accent:        var(--gold);
    --clr-accent-dark:   var(--amber);
    --clr-accent-light:  var(--gold-light);
    --clr-accent-rgb:    201, 152, 46;

    --clr-gold:          var(--gold);
    --clr-gold-rgb:      201, 152, 46;

    --clr-white:         var(--white);
    --clr-light:         var(--cream-light);
    --clr-off-white:     var(--cream);
    --clr-body:          var(--body);
    --clr-muted:         var(--muted);
    --clr-dark:          var(--dark);
    --clr-border:        var(--cream-dark);

    --clr-success:       var(--success);
    --clr-warning:       var(--amber);
    --clr-error:         #C94C4C;
    --clr-info:          var(--teal);

    /* Typography System (matching all approved mockups) */
    --ff-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
    --ff-heading: 'Marcellus', Georgia, serif;
    --ff-body:    'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --ff-script:  'Dancing Script', cursive;

    --fs-xs:   0.75rem;    /* 12px */
    --fs-sm:   0.875rem;   /* 14px */
    --fs-base: 1rem;       /* 16px */
    --fs-md:   1.125rem;   /* 18px */
    --fs-lg:   1.25rem;    /* 20px */
    --fs-xl:   1.5rem;     /* 24px */
    --fs-2xl:  2rem;       /* 32px */
    --fs-3xl:  2.5rem;     /* 40px */
    --fs-4xl:  3rem;       /* 48px */
    --fs-5xl:  3.5rem;     /* 56px */

    --fw-light:    300;
    --fw-regular:  400;
    --fw-medium:   500;
    --fw-semibold: 600;
    --fw-bold:     700;
    --fw-extrabold:800;

    --lh-tight:  1.2;
    --lh-normal: 1.6;
    --lh-loose:  1.8;

    /* Spacing */
    --sp-xs:   0.25rem;
    --sp-sm:   0.5rem;
    --sp-md:   1rem;
    --sp-lg:   1.5rem;
    --sp-xl:   2rem;
    --sp-2xl:  3rem;
    --sp-3xl:  4rem;
    --sp-4xl:  6rem;

    --section-py:     80px;
    --section-py-sm:  50px;
    --container-max:  1280px;
    --container-px:   24px;

    /* Borders */
    --radius:      10px;
    --radius-sm:   6px;
    --radius-lg:   16px;
    --radius-xl:   24px;
    --radius-pill:  50px;
    --radius-full: 50%;

    /* Shadows */
    --shadow-xs:  0 1px 3px rgba(0, 0, 0, 0.04);
    --shadow-sm:  0 2px 12px rgba(0, 0, 0, 0.06);
    --shadow-md:  0 4px 24px rgba(0, 0, 0, 0.08);
    --shadow-lg:  0 8px 40px rgba(0, 0, 0, 0.12);
    --shadow-xl:  0 12px 60px rgba(0, 0, 0, 0.16);

    /* Transitions */
    --transition-fast:  150ms ease;
    --transition:       300ms ease;
    --transition-slow:  500ms ease;

    /* Z-Index Stack */
    --z-dropdown:  100;
    --z-sticky:    200;
    --z-fixed:     300;
    --z-overlay:   400;
    --z-modal:     500;
    --z-toast:     600;
}

/* ---------- CSS Reset ---------- */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--ff-body);
    font-size: var(--fs-base);
    font-weight: var(--fw-regular);
    line-height: var(--lh-normal);
    color: var(--clr-body);
    background-color: var(--clr-white);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    color: inherit;
    text-decoration: none;
    transition: color var(--transition-fast);
}

ul, ol {
    list-style: none;
}

button {
    cursor: pointer;
    border: none;
    background: none;
    font-family: inherit;
    font-size: inherit;
}

/* ---------- Typography ---------- */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--ff-heading);
    font-weight: var(--fw-bold);
    line-height: var(--lh-tight);
    color: var(--clr-dark);
}

h1 { font-size: var(--fs-4xl); }
h2 { font-size: var(--fs-3xl); }
h3 { font-size: var(--fs-2xl); }
h4 { font-size: var(--fs-xl);  }
h5 { font-size: var(--fs-lg);  }
h6 { font-size: var(--fs-md);  }

p {
    margin-bottom: var(--sp-md);
    line-height: var(--lh-normal);
}

.text-accent {
    color: var(--clr-accent);
}

.text-muted {
    color: var(--clr-muted);
}

.section-label {
    font-family: var(--ff-body);
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--clr-accent);
    margin-bottom: var(--sp-sm);
}

.section-title {
    font-size: var(--fs-3xl);
    margin-bottom: var(--sp-md);
}

.section-subtitle {
    font-size: var(--fs-md);
    color: var(--clr-muted);
    max-width: 620px;
}

/* ---------- Layout Utilities ---------- */
.grandvantage-container {
    width: 100%;
    max-width: var(--container-max);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--container-px);
    padding-right: var(--container-px);
}

.grandvantage-section {
    padding-top: var(--section-py);
    padding-bottom: var(--section-py);
}

.grandvantage-section--light {
    background-color: var(--clr-light);
}

.grandvantage-section--dark {
    background-color: var(--clr-primary-dark);
    color: var(--clr-white);
}

.grandvantage-section--dark h2,
.grandvantage-section--dark h3,
.grandvantage-section--dark h4 {
    color: var(--clr-white);
}

/* ---------- Button System ---------- */
.grandvantage-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-sm);
    padding: 14px 32px;
    font-family: var(--ff-body);
    font-size: var(--fs-base);
    font-weight: var(--fw-semibold);
    border-radius: var(--radius-pill);
    text-decoration: none;
    cursor: pointer;
    transition: all var(--transition);
    border: 2px solid transparent;
    line-height: 1;
}

.grandvantage-btn--primary {
    background: var(--clr-accent);
    color: var(--clr-white);
    border-color: var(--clr-accent);
}

.grandvantage-btn--primary:hover {
    background: var(--clr-accent-dark);
    border-color: var(--clr-accent-dark);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.grandvantage-btn--secondary {
    background: var(--clr-primary);
    color: var(--clr-white);
    border-color: var(--clr-primary);
}

.grandvantage-btn--secondary:hover {
    background: var(--clr-primary-light);
    border-color: var(--clr-primary-light);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.grandvantage-btn--outline {
    background: transparent;
    color: var(--clr-primary);
    border-color: var(--clr-primary);
}

.grandvantage-btn--outline:hover {
    background: var(--clr-primary);
    color: var(--clr-white);
}

.grandvantage-btn--whatsapp {
    background: #25D366;
    color: var(--clr-white);
    border-color: #25D366;
}

.grandvantage-btn--whatsapp:hover {
    background: #1EBE5A;
    border-color: #1EBE5A;
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

/* Mockup Compatibility Button Utilities */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 28px;
    font-family: var(--ff-body);
    font-size: 0.88rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-radius: 4px;
    border: 2px solid transparent;
    transition: all var(--transition);
    cursor: pointer;
    text-decoration: none;
    line-height: 1.2;
}
.btn-gold {
    background: var(--gold);
    color: var(--white);
    border-color: var(--gold);
}
.btn-gold:hover {
    background: var(--amber);
    border-color: var(--amber);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}
.btn-brown {
    background: var(--brown-deep);
    color: var(--cream);
    border-color: var(--brown-deep);
}
.btn-brown:hover {
    background: var(--brown-rich);
    transform: translateY(-2px);
}
.btn-whatsapp {
    background: #25D366;
    color: #fff;
    border-color: #25D366;
}
.btn-whatsapp:hover {
    background: #1EBE5A;
    transform: translateY(-2px);
}
.btn-outline-gold {
    background: transparent;
    color: var(--gold);
    border: 2px solid var(--gold);
}
.btn-outline-gold:hover {
    background: var(--gold);
    color: var(--white);
    transform: translateY(-2px);
}

.accent {
    color: var(--gold);
    font-style: normal;
}

/* Scroll reveal matching mockups & Playbook */
.reveal, [data-animate="fade-up"] {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal.visible, [data-animate="fade-up"].animated, [data-animate="fade-up"].is-visible {
    opacity: 1;
    transform: translateY(0);
}

.grandvantage-btn--sm {
    padding: 10px 22px;
    font-size: var(--fs-sm);
}

.grandvantage-btn--lg {
    padding: 18px 42px;
    font-size: var(--fs-md);
}

/* ---------- Badge System ---------- */
.grandvantage-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 12px;
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: var(--radius-pill);
}

.grandvantage-badge--popular {
    background: linear-gradient(135deg, #FF6B35, #F7931E);
    color: var(--clr-white);
}

.grandvantage-badge--budget {
    background: var(--clr-success);
    color: var(--clr-white);
}

.grandvantage-badge--luxury {
    background: linear-gradient(135deg, var(--clr-gold), #B8860B);
    color: var(--clr-white);
}

.grandvantage-badge--midrange {
    background: var(--clr-info);
    color: var(--clr-white);
}

.grandvantage-badge--flying {
    background: #6A5ACD;
    color: var(--clr-white);
}

.grandvantage-badge--transport {
    background: rgba(var(--clr-primary-rgb), 0.1);
    color: var(--clr-primary);
}

/* ---------- Scroll Animation Classes ---------- */
.grandvantage-fade-in {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.grandvantage-fade-in.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.grandvantage-fade-in-left {
    opacity: 0;
    transform: translateX(-30px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.grandvantage-fade-in-left.is-visible {
    opacity: 1;
    transform: translateX(0);
}

.grandvantage-fade-in-right {
    opacity: 0;
    transform: translateX(30px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.grandvantage-fade-in-right.is-visible {
    opacity: 1;
    transform: translateX(0);
}

.grandvantage-scale-in {
    opacity: 0;
    transform: scale(0.9);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.grandvantage-scale-in.is-visible {
    opacity: 1;
    transform: scale(1);
}

/* Elementor editor: make all animated elements visible in the canvas */
.elementor-editor-active .grandvantage-fade-in,
.elementor-editor-active .grandvantage-fade-in-left,
.elementor-editor-active .grandvantage-fade-in-right,
.elementor-editor-active .grandvantage-scale-in,
.elementor-editor-preview .grandvantage-fade-in,
.elementor-editor-preview .grandvantage-fade-in-left,
.elementor-editor-preview .grandvantage-fade-in-right,
.elementor-editor-preview .grandvantage-scale-in {
    opacity: 1 !important;
    transform: none !important;
}

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
    :root {
        --section-py: 60px;
    }

    h1 { font-size: var(--fs-3xl); }
    h2 { font-size: var(--fs-2xl); }
    h3 { font-size: var(--fs-xl);  }
}

@media (max-width: 768px) {
    :root {
        --section-py: 40px;
        --container-px: 16px;
    }

    h1 { font-size: var(--fs-2xl); }
    h2 { font-size: var(--fs-xl);  }
    h3 { font-size: var(--fs-lg);  }

    .section-title {
        font-size: var(--fs-2xl);
    }
}

@media (max-width: 480px) {
    h1 { font-size: var(--fs-xl); }
}