/* ==========================================================================
   Egypt Vibe Tours — Brand Design Tokens
   Single source of truth. Derived from the official brand sheet.
   Nothing in this file should reference a component; only tokens + primitives.
   ========================================================================== */

:root {
    /* ---- Core brand palette (from brand sheet) ---------------------------- */
    --evt-blue: #0077B6;          /* Royal Blue — primary */
    --evt-gold: #F4B400;          /* Gold — accent only */
    --evt-white: #FFFFFF;

    /* ---- Derived blue ramp ------------------------------------------------ */
    --evt-blue-900: #002A44;
    --evt-blue-800: #003F63;
    --evt-blue-700: #005F92;
    --evt-blue-600: #006BA4;
    --evt-blue-500: #0077B6;
    --evt-blue-400: #3494C6;
    --evt-blue-300: #6DB3D8;
    --evt-blue-200: #A9D3E9;
    --evt-blue-100: #D4E9F4;
    --evt-blue-050: #E6F2F9;

    /* ---- Derived gold ramp ------------------------------------------------ */
    --evt-gold-800: #8A6600;
    --evt-gold-700: #B58500;
    --evt-gold-600: #D89E00;
    --evt-gold-500: #F4B400;
    --evt-gold-400: #F7C63C;
    --evt-gold-300: #FAD974;
    --evt-gold-200: #FCE9AE;
    --evt-gold-100: #FEF3D6;
    --evt-gold-050: #FEF9EC;

    /* ---- Neutrals --------------------------------------------------------- */
    --evt-navy: #0B2545;          /* dark panels, footer, business-card ground */
    --evt-navy-700: #143257;
    --evt-navy-600: #1D4068;
    --evt-ink: #10233F;           /* body text on light */
    --evt-body: #33455F;
    --evt-muted: #5A6B84;
    --evt-soft: #8695AB;
    --evt-line: #E4E8EF;
    --evt-line-strong: #CFD6E1;
    --evt-sand: #F7F4EF;          /* off-white page ground from the sheet */
    --evt-cloud: #F4F7FA;
    --evt-surface: #FFFFFF;

    /* ---- Semantic --------------------------------------------------------- */
    --evt-success: #1A8B5F;
    --evt-success-bg: #E7F5EF;
    --evt-warning: #B77400;
    --evt-warning-bg: #FDF3E2;
    --evt-danger: #C2372F;
    --evt-danger-bg: #FBEDEC;
    --evt-info: var(--evt-blue-600);
    --evt-info-bg: var(--evt-blue-050);

    /* ---- Typography ------------------------------------------------------- */
    --font-head: "Montserrat", "Segoe UI", system-ui, -apple-system, sans-serif;
    --font-body: "Montserrat", "Segoe UI", system-ui, -apple-system, sans-serif;
    --font-script: "Dancing Script", "Segoe Script", cursive; /* tagline only */

    /* Fluid editorial scale. Hero is intentionally large; body stays readable. */
    --fs-hero: clamp(2.5rem, 1.6rem + 3.9vw, 4.25rem);
    --fs-h1: clamp(2rem, 1.45rem + 2.4vw, 3.125rem);
    --fs-h2: clamp(1.625rem, 1.3rem + 1.45vw, 2.375rem);
    --fs-h3: clamp(1.3rem, 1.14rem + 0.7vw, 1.75rem);
    --fs-h4: clamp(1.125rem, 1.05rem + 0.33vw, 1.3125rem);
    --fs-lead: clamp(1.0625rem, 1rem + 0.28vw, 1.1875rem);
    --fs-body: 1rem;
    --fs-sm: 0.9375rem;
    --fs-xs: 0.8125rem;
    --fs-2xs: 0.75rem;

    --lh-tight: 1.08;
    --lh-head: 1.18;
    --lh-body: 1.7;

    --ls-eyebrow: 0.14em;
    --ls-head: -0.02em;

    /* ---- Radii ------------------------------------------------------------ */
    --radius-xs: 6px;
    --radius-sm: 10px;
    --radius: 14px;
    --radius-lg: 22px;
    --radius-xl: 30px;
    --radius-pill: 999px;

    /* ---- Elevation -------------------------------------------------------- */
    --shadow-xs: 0 1px 2px rgba(11, 37, 69, .06);
    --shadow-sm: 0 1px 3px rgba(11, 37, 69, .07), 0 4px 10px rgba(11, 37, 69, .04);
    --shadow-card: 0 2px 4px rgba(11, 37, 69, .04), 0 12px 28px rgba(11, 37, 69, .08);
    --shadow-lift: 0 6px 12px rgba(11, 37, 69, .07), 0 22px 48px rgba(11, 37, 69, .14);
    --shadow-pop: 0 18px 60px rgba(11, 37, 69, .22);
    --shadow-gold: 0 8px 24px rgba(244, 180, 0, .28);

    /* ---- Spacing ---------------------------------------------------------- */
    --space-1: .25rem;
    --space-2: .5rem;
    --space-3: .75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 3rem;
    --space-8: 4rem;
    --space-9: 6rem;
    --section-y: clamp(3.5rem, 2.2rem + 5vw, 6.5rem);

    /* ---- Layout ----------------------------------------------------------- */
    --container-max: 1240px;
    --container-wide: 1400px;
    --header-h: 84px;
    --header-h-scrolled: 68px;
    /* Utility bar height. The overlay header is taken out of flow and has to
       offset against this, so .topbar pins its line-height to keep it exact. */
    --topbar-h: 36px;

    /* ---- Motion ----------------------------------------------------------- */
    --ease-out: cubic-bezier(.22, .61, .36, 1);
    --ease-in-out: cubic-bezier(.65, .05, .36, 1);
    --ease-spring: cubic-bezier(.34, 1.4, .64, 1);
    --dur-fast: 140ms;
    --dur: 220ms;
    --dur-slow: 420ms;

    /* ---- Z-index scale ---------------------------------------------------- */
    --z-sticky: 100;
    --z-header: 1030;
    --z-drawer: 1045;
    --z-fab: 1050;
    --z-modal: 1055;
    --z-toast: 1080;

    /* ---- Bootstrap 5 bridge ----------------------------------------------
       Bootstrap reads these CSS vars, so overriding them here re-skins the
       framework without recompiling any Sass. Keeps us build-step free.       */
    --bs-primary: var(--evt-blue);
    --bs-primary-rgb: 0, 119, 182;
    --bs-secondary: var(--evt-navy);
    --bs-secondary-rgb: 11, 37, 69;
    --bs-body-color: var(--evt-body);
    --bs-body-color-rgb: 51, 69, 95;
    --bs-body-bg: var(--evt-white);
    --bs-body-font-family: var(--font-body);
    --bs-body-font-size: var(--fs-body);
    --bs-body-line-height: var(--lh-body);
    --bs-heading-color: var(--evt-ink);
    --bs-border-color: var(--evt-line);
    --bs-border-radius: var(--radius-sm);
    --bs-border-radius-sm: var(--radius-xs);
    --bs-border-radius-lg: var(--radius);
    --bs-border-radius-xl: var(--radius-lg);
    --bs-link-color: var(--evt-blue-600);
    --bs-link-color-rgb: 0, 107, 164;
    --bs-link-hover-color: var(--evt-blue-800);
    --bs-emphasis-color: var(--evt-ink);
    --bs-focus-ring-color: rgba(0, 119, 182, .28);
    --bs-focus-ring-width: 3px;
}

/* ==========================================================================
   Self-hosted webfonts
   Montserrat carries the whole brand (headings at 700/800, body at 400/500).
   `font-display: swap` keeps first paint fast — deliberate LCP choice.
   ========================================================================== */

/* Latin is loaded first and covers English. Latin-ext is a separate face so it
   only downloads when an accented character actually appears (reviewer names
   from Europe, place names) — it never costs us on a normal English page. */

@font-face {
    font-family: "Montserrat";
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url("../fonts/montserrat-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                   U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
                   U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Montserrat";
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url("../fonts/montserrat-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
                   U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF,
                   U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
                   U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: "Dancing Script";
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url("../fonts/dancing-script-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                   U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
                   U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Dancing Script";
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url("../fonts/dancing-script-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
                   U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF,
                   U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
                   U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ==========================================================================
   Brand primitives
   Small, reusable pieces that express the identity. Components compose these.
   ========================================================================== */

/* --- Gold swoosh underline, echoing the logo's arc ------------------------ */
.evt-swoosh {
    position: relative;
    display: inline-block;
}

.evt-swoosh::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -.35em;
    height: .28em;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'%3E%3Cpath d='M2 9C40 3 78 1 100 1s60 2 98 8' fill='none' stroke='%23F4B400' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
    pointer-events: none;
}

/* --- Eyebrow label -------------------------------------------------------- */
.evt-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    font-family: var(--font-head);
    font-size: var(--fs-2xs);
    font-weight: 700;
    letter-spacing: var(--ls-eyebrow);
    text-transform: uppercase;
    color: var(--evt-blue-600);
    margin-bottom: .75rem;
}

.evt-eyebrow::before {
    content: "";
    width: 26px;
    height: 2px;
    border-radius: 2px;
    background: var(--evt-gold);
    flex: none;
}

.evt-eyebrow--light { color: var(--evt-gold-400); }
.evt-eyebrow--center { justify-content: center; }

/* --- Gold accent rule ----------------------------------------------------- */
.evt-rule {
    width: 62px;
    height: 3px;
    border: 0;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--evt-gold), var(--evt-gold-300));
    opacity: 1;
    margin: 0;
}

.evt-rule--center { margin-inline: auto; }

/* --- Brand pattern watermark ---------------------------------------------
   The hieroglyph / pyramid / felucca icon grid from the brand sheet, used at
   very low opacity behind section headers and the footer. Inline SVG so it
   costs no extra request and inherits currentColor for theming.
   ------------------------------------------------------------------------- */
.evt-pattern {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: .035;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%230B2545' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 44 34 20l14 24z'/%3E%3Cpath d='M72 44 86 20l14 24z'/%3E%3Cpath d='M22 96h24M34 74v22M34 74l14 16H34'/%3E%3Cpath d='M74 78c4-6 12-6 16 0s-2 14-8 14-12-8-8-14z'/%3E%3Ccircle cx='82' cy='85' r='3'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 120px 120px;
}

.evt-pattern--light { filter: invert(1); opacity: .05; }

/* --- Star rating ---------------------------------------------------------- */
.evt-stars {
    --pct: 0%;
    display: inline-block;
    position: relative;
    font-size: 1em;
    line-height: 1;
    white-space: nowrap;
    color: var(--evt-line-strong);
}

.evt-stars__fill {
    position: absolute;
    inset: 0;
    width: var(--pct);
    overflow: hidden;
    color: var(--evt-gold);
    white-space: nowrap;
}

/* --- Focus ---------------------------------------------------------------
   One visible, consistent focus treatment. Never remove it.
   ------------------------------------------------------------------------- */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 3px solid rgba(0, 119, 182, .45);
    outline-offset: 2px;
    border-radius: var(--radius-xs);
}

/* --- Skip link ------------------------------------------------------------ */
.evt-skip {
    position: absolute;
    left: 1rem;
    top: -100px;
    z-index: var(--z-toast);
    padding: .75rem 1.25rem;
    background: var(--evt-navy);
    color: #fff;
    border-radius: var(--radius-sm);
    font-weight: 600;
    transition: top var(--dur) var(--ease-out);
}

.evt-skip:focus { top: 1rem; color: #fff; }

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

/* ==========================================================================
   Motion preferences — honoured globally, not per-component.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
}