/* ===================================================
   MA'TOUR GUIDE MADAGASCAR — BASE / DESIGN SYSTEM
   Shared on every page: reset, typography, header,
   navigation, buttons.

   Loaded FIRST, before the page-specific stylesheet
   (style.css, east-coast.css, ...).
=================================================== */

:root{

    /* -- Brand palette (sunset over the baobabs) -- */
    --dusk:        #1F1830;   /* deep indigo-plum — header/footer dark states */
    --dusk-2:      #402541;   /* transitional plum                             */
    --ember:       #C1552B;   /* burnt sunset orange — primary action color    */
    --gold:        #E0A83E;   /* baobab gold-hour light — hover / secondary    */
    --sand:        #F4ECDB;   /* warm sand — default page background           */
    --sand-deep:   #EADFC7;   /* darker sand for alternating sections          */
    --bark:        #3B2A20;   /* deep bark brown — headings                    */
    --bark-soft:   #6B5644;   /* softened bark — body copy                     */
    --white:       #FFFFFF;

    --display: 'Fraunces', serif;
    --body: 'Work Sans', sans-serif;

    --radius-pill: 50px;
    --radius-card: 20px;
    --shadow: 0 25px 60px rgba(43,26,10,.16);
    --shadow-soft: 0 12px 30px rgba(43,26,10,.10);

}

/* ===============================
   RESET
=============================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
    overflow-x:hidden;
}

body{
    font-family:var(--body);
    background:var(--sand);
    color:var(--bark-soft);
    overflow-x:hidden;
}

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

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

@media (prefers-reduced-motion: reduce){
    *{
        animation-duration:.001ms !important;
        transition-duration:.001ms !important;
        scroll-behavior:auto !important;
    }
}

.eyebrow{
    display:inline-block;
    color:var(--ember);
    text-transform:uppercase;
    letter-spacing:3px;
    font-size:12.5px;
    font-weight:600;
}

.eyebrow-light{
    color:var(--gold);
}

/* ===============================
   HEADER
=============================== */

header{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    padding:26px 70px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    z-index:999;
    transition:.4s;
}

header.scrolled{
    background:rgba(244,236,219,.92);
    backdrop-filter:blur(10px);
    box-shadow:0 5px 25px rgba(43,26,10,.10);
    padding:18px 70px;
}

.logo{
    color:var(--white);
    font-family:var(--display);
    font-size:23px;
    font-weight:600;
    letter-spacing:.3px;
}

.logo span{
    font-style:italic;
    font-weight:500;
    opacity:.85;
}

header.scrolled .logo{
    color:var(--bark);
}

nav{
    display:flex;
    align-items:center;
}

nav a{
    text-decoration:none;
    color:rgba(255,255,255,.9);
    margin-left:38px;
    transition:.3s;
    font-weight:500;
    font-size:15px;
    position:relative;
}

nav a::after{
    content:"";
    position:absolute;
    left:0;
    bottom:-6px;
    width:0;
    height:2px;
    background:var(--gold);
    transition:.3s;
}

nav a:hover::after{
    width:100%;
}

header.scrolled nav a{
    color:var(--bark);
}

nav a:hover{
    color:var(--gold);
}

header.scrolled nav a:hover{
    color:var(--ember);
}

.nav-toggle{
    display:none;
}

/* Burger — larger touch target without shifting layout */
.nav-burger{
    display:none;
    width:30px;
    height:22px;
    position:relative;
    cursor:pointer;
    z-index:1001;
    padding:11px;
    margin:-11px;
}

.nav-burger span,
.nav-burger span::before,
.nav-burger span::after{
    content:"";
    position:absolute;
    left:0;
    width:100%;
    height:2px;
    background:var(--white);
    transition:.3s;
}

header.scrolled .nav-burger span,
header.scrolled .nav-burger span::before,
header.scrolled .nav-burger span::after{
    background:var(--bark);
}

.nav-burger span{ top:10px; }
.nav-burger span::before{ top:-9px; }
.nav-burger span::after{ top:9px; }

/* Landscape phones still get the burger */
@media(max-width:900px) and (orientation:landscape){

    nav{
        position:fixed;
        top:0;
        right:0;
        height:100vh;
        width:min(60vw,320px);
        background:var(--dusk);
        flex-direction:column;
        justify-content:center;
        align-items:flex-start;
        padding:40px;
        transform:translateX(100%);
        transition:.4s ease;
    }

    nav a{
        margin:0 0 22px;
        font-size:18px;
        color:var(--white);
    }

    .nav-burger{
        display:block;
    }

    .nav-toggle:checked ~ nav{
        transform:translateX(0);
    }
}

@media(max-width:600px){

    header{
        padding:20px 24px;
    }

    header.scrolled{
        padding:16px 24px;
    }

    nav{
        position:fixed;
        top:0;
        right:0;
        height:100vh;
        width:min(78vw,320px);
        background:var(--dusk);
        flex-direction:column;
        justify-content:center;
        align-items:flex-start;
        padding:40px;
        transform:translateX(100%);
        transition:.4s ease;
    }

    nav a{
        margin:0 0 26px;
        font-size:19px;
        color:var(--white);
    }

    .nav-burger{
        display:block;
    }

    .nav-toggle:checked ~ nav{
        transform:translateX(0);
    }
}

/* ===============================
   BUTTONS
=============================== */

.btn{
    display:inline-block;
    width:fit-content;
    padding:17px 36px;
    border-radius:var(--radius-pill);
    background:var(--ember);
    color:var(--white);
    text-decoration:none;
    font-weight:600;
    font-size:15px;
    transition:.35s;
    border:1px solid var(--ember);
}

.btn:hover{
    background:var(--gold);
    border-color:var(--gold);
    color:var(--dusk);
    transform:translateY(-2px);
}

.btn-ghost{
    background:transparent;
    border:1px solid rgba(255,255,255,.4);
    color:var(--white);
}

.btn-ghost:hover{
    background:rgba(255,255,255,.12);
    border-color:var(--white);
    color:var(--white);
}

.btn-outline{
    background:transparent;
    border:2px solid var(--bark);
    color:var(--bark);
}

.btn-outline:hover{
    background:var(--bark);
    border-color:var(--bark);
    color:var(--white);
}

@media(max-width:600px){

    .btn{
        width:100%;
        max-width:320px;
        text-align:center;
    }
}

/* Language switcher and quote CTA */
.language-link { font-size: .78rem; font-weight: 700; letter-spacing: .04em; margin-left: .35rem; opacity: .85; }
.nav-quote-btn { background: #c85d2e; color: #fff !important; border-radius: 999px; padding: .65rem 1rem !important; margin-left: .5rem; }
.hero-actions { display: flex; gap: .8rem; justify-content: center; flex-wrap: wrap; }
@media (max-width: 760px) { .nav-quote-btn { display: inline-block; margin: .5rem 0; } .hero-actions .btn { width: min(100%, 260px); } }

/* SEO-friendly accessibility helpers */
.skip-link { position:absolute; left:-9999px; top:auto; }
.skip-link:focus { left:1rem; top:1rem; z-index:9999; padding:.75rem 1rem; background:#fff; color:#191325; border-radius:8px; }

/* Premium editorial navigation and language marks */
.language-label{font-size:10px!important;letter-spacing:.16em;text-transform:uppercase;opacity:.65;margin-left:26px}
.language-icon{width:28px;height:28px;margin-left:8px!important;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;overflow:hidden;opacity:.9!important}
.language-icon::after{display:none!important}.language-icon img{width:24px;height:16px;object-fit:cover;border-radius:3px;display:block}.language-icon:hover{transform:translateY(-2px);opacity:1!important}
.nav-quote-btn{font-size:.78rem!important;padding:.52rem .8rem!important;margin-left:14px!important;letter-spacing:.01em}
@media(max-width:600px){.language-label{margin:4px 0 10px!important}.language-icon{width:32px;height:32px;margin:0 0 14px 0!important}.language-icon img{width:27px;height:18px}.nav-quote-btn{font-size:.9rem!important;padding:.65rem .9rem!important;margin-top:2px!important}}

/* ===============================
   SHORT LEAD FORM
   (destination pages with no
   existing quote form)
=============================== */
.lead-form-section{padding:90px 6%;background:var(--sand-deep)}
.lead-form-wrapper{max-width:640px;margin:0 auto;text-align:center}
.lead-form-wrapper .section-heading{margin-bottom:34px}
.lead-form-wrapper .section-heading h2{font-family:var(--display);color:var(--bark);font-size:clamp(26px,3.4vw,36px);margin:10px 0 12px}
.lead-form-wrapper .section-heading p{color:var(--bark-soft);font-size:15.5px;margin:0}
.lead-form{display:grid;gap:16px;text-align:left;background:var(--white);border-radius:var(--radius-card);padding:36px 32px;box-shadow:var(--shadow-soft)}
.lead-field{display:grid;gap:6px}
.lead-field label{font-size:13px;font-weight:600;color:var(--bark)}
.lead-field input,.lead-field textarea{font:inherit;padding:13px 16px;border-radius:12px;border:1px solid rgba(59,42,32,.18);background:var(--sand);color:var(--bark);resize:vertical;width:100%}
.lead-field input:focus,.lead-field textarea:focus{outline:2px solid var(--gold);outline-offset:1px}
.lead-submit{margin-top:4px;display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.lead-submit-btn{border:none;cursor:pointer;font-family:inherit}
.lead-note{font-size:12.5px;color:var(--bark-soft);margin:0}
.lead-whatsapp-alt{display:flex;align-items:center;justify-content:center;gap:8px;font-size:13.5px;color:var(--bark-soft);margin:18px 0 0}
.lead-whatsapp-alt a{display:inline-flex;align-items:center;gap:6px;color:#168c5b;font-weight:600;text-decoration:none}
.lead-whatsapp-alt a:hover{text-decoration:underline}
@media(max-width:600px){.lead-form-section{padding:60px 6%}.lead-form{padding:28px 22px}.lead-whatsapp-alt{flex-direction:column;gap:4px}}