/* ============================================================
   SkyGlobal Holidays — Brand Identity v2.0 (Unified Override Layer)
   Apply this AS THE LAST stylesheet on every page. It enforces:
   - 6-color palette (Teal, Deep, Pearl, Sand, Gold, Slate)
   - Wordmark (SkyGlobal Cormorant 500 + HOLIDAYS Jost 300 @ 22%)
   - Typography system (Cormorant + Jost + Cairo)
   - No gradients / no shadows / no 3D / 1px hairlines
   - Preserves all existing tracking, forms, and functionality

   Author: SkyGlobal design system v2.0 (2026)
   ============================================================ */

/* Ensure brand fonts are loaded regardless of page's own @import order */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600&family=Jost:wght@200;300;400;500;600&family=Cairo:wght@300;400;500;600;700;800&display=swap');

/* ============ TOKENS ============ */
:root {
  /* Approved palette — 6 values, no variations */
  --v2-teal:     #0B7D6F;
  --v2-teal-ink: #07574d;
  --v2-deep:     #102E3A;
  --v2-slate:    #4A5D6A;
  --v2-pearl:    #FAF7F3;
  --v2-sand:     #F3EAE0;
  --v2-gold:     #D9A84E;
  --v2-gold-hv:  #C9982D;
  --v2-white:    #FFFFFF;
  --v2-hairline: rgba(16, 46, 58, 0.10);
  --v2-hairline-strong: rgba(16, 46, 58, 0.22);

  /* Override existing page tokens where present (no !important so local customizations still win) */
  --teal: var(--v2-teal);
  --teal-light: var(--v2-teal-ink);
  --deep: var(--v2-deep);
  --deep-light: #1A4050;
  --pearl: var(--v2-pearl);
  --sand: var(--v2-sand);
  --slate: var(--v2-slate);
  --muted: #7A8D99;
  --gold: var(--v2-gold);
  --white: var(--v2-white);
  --border: var(--v2-hairline);
}

/* ============ WORDMARK NORMALIZATION ============
   Converts ANY existing logo (stacked or otherwise) to the v2.0 baseline-aligned wordmark.
   Works with these HTML patterns:
   - <a><div class="logo-main">SkyGlobal</div><div class="logo-sub">HOLIDAYS</div></a>  (landing + destinations — parentless anchor)
   - <a class="logo"><span class="logo-main">...</span><span class="logo-sub">...</span></a>
   - <a class="g-logo"><span class="g-logo-main">...</span><span class="g-logo-sub">...</span></a>  (guides)
   - footer variants (.footer-logo + .footer-tag — BLOCK by default in current pages)
============================================================ */

/* Force ANY parent that contains .logo-main to render as inline baseline-aligned wordmark.
   Uses :has() (Chrome 105+, Safari 15.4+, Firefox 121+ — full support 2024). */
a:has(> .logo-main),
a:has(> .g-logo-main),
a:has(> .footer-logo),
.logo, .g-logo, a.logo, a.g-logo,
.nav-brand, .foot-brand .wm-stack,
.header-inner > a:first-child,
.g-header-inner > a:first-child,
.footer .footer-logo-wrap {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: baseline !important;
  gap: 0.55em;
  line-height: 1;
  color: var(--v2-teal);
}

/* Main wordmark text — force inline so divs don't break the line */
.logo-main,
.g-logo-main,
.footer-logo {
  font-family: 'Cormorant Garamond', serif !important;
  font-weight: 500 !important;
  font-size: 1.95rem !important;
  letter-spacing: -0.01em !important;
  line-height: 1 !important;
  color: var(--v2-teal) !important;
  margin: 0 !important;
  padding: 0 !important;
  display: inline-block !important;
  direction: ltr;
  white-space: nowrap;
}

/* "HOLIDAYS" subtitle inline at ~22% size */
.logo-sub,
.g-logo-sub,
.footer-tag {
  font-family: 'Jost', sans-serif !important;
  font-weight: 300 !important;
  font-size: 0.43rem !important;
  letter-spacing: 0.42em !important;
  text-transform: uppercase !important;
  color: var(--v2-teal) !important;
  transform: translateY(-0.18em) !important;
  margin: 0 !important;
  margin-inline-start: 0.15em !important;
  padding: 0 !important;
  line-height: 1 !important;
  display: inline-block !important;
  direction: ltr;
  white-space: nowrap;
}

/* On-dark variants (footer + dark navs) */
.footer .footer-logo,
.g-footer .g-logo-main,
.foot-brand .wm-stack .main,
footer .logo-main,
footer .g-logo-main {
  color: var(--v2-pearl) !important;
}
.footer .footer-tag,
.g-footer .g-logo-sub,
.foot-brand .wm-stack .sub,
footer .logo-sub,
footer .g-logo-sub {
  color: var(--v2-pearl) !important;
  opacity: 0.85;
}

/* ============ TYPOGRAPHY BASE ============ */
body {
  font-family: 'Cairo', 'Jost', sans-serif;
  color: var(--v2-deep);
  background: var(--v2-pearl);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Keep existing page H1 hero styles but harmonize font stacks */
h1, h2, h3, h4, h5 {
  font-family: 'Cairo', 'Jost', sans-serif;
  color: var(--v2-deep);
}

.page-hero h1 {
  color: var(--v2-pearl) !important;
}

/* Display headings on hero sections — ensure Cormorant fallback for Latin */
.display, h1.display {
  font-family: 'Cairo', 'Cormorant Garamond', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em;
}

/* Section eyebrows — unified style */
.section-eyebrow, .eyebrow, .hero-eyebrow, .hero-kicker, .g-hero-eyebrow {
  font-family: 'Jost', sans-serif !important;
  letter-spacing: 0.32em !important;
  text-transform: uppercase !important;
  color: var(--v2-slate) !important;
}
/* On dark backgrounds, keep gold accent */
.hero .hero-eyebrow,
.solution .section-eyebrow,
.testimonials .eyebrow,
.testimonials .section-eyebrow,
.trust .section-eyebrow,
.proof .section-eyebrow,
.urgency .section-eyebrow,
section.testimonials .eyebrow-line .eyebrow,
.consequences ~ * .section-eyebrow.gold,
.hero .hero-kicker {
  color: var(--v2-gold) !important;
}

/* ============ BUTTONS — unified v2.0 style ============ */
.btn, .btn-primary, .btn-secondary, .btn-gold, .btn-outline,
.nav-cta, .g-cta-header, .g-cta-primary, .form-submit, .btn-submit,
.header-cta, .nav-cta-link {
  border-radius: 2px !important;
  letter-spacing: 0.02em !important;
  font-weight: 600 !important;
}
/* Remove shadows from buttons */
.btn-primary, .btn-gold, .g-cta-primary, .form-submit, .btn-submit,
.header-cta, .nav-cta, .hero-actions .btn-primary, .hero-actions .btn-gold,
.cta-row .btn-primary {
  box-shadow: none !important;
}
/* Solid teal primary buttons (not gold unless hero CTA) */
.nav-cta, .header-cta, .g-cta-header {
  background: var(--v2-teal) !important;
  color: var(--v2-pearl) !important;
}
.nav-cta:hover, .header-cta:hover, .g-cta-header:hover {
  background: var(--v2-teal-ink) !important;
}

/* ============ BRAND RULE ENFORCEMENT — NO GOLD BUTTONS ============
   Brand Identity v2.0 §04 Color Rules + §07 Do/Don't:
   "Gold is accent only — never a background, never dominant, never in the wordmark."
   Gold remains valid ONLY for small tags, accents, dividers, dots — never for CTA surfaces.
   These overrides flip any legacy gold-button surface back to teal. */
.btn-gold,
.form-submit,
.btn-submit,
button.form-submit,
input[type="submit"].form-submit,
.sticky-cta-primary,
section.final .btn,
.final-cta .btn,
.g-final-cta .btn {
  background: var(--v2-teal) !important;
  color: var(--v2-pearl) !important;
  border-color: transparent !important;
}
.btn-gold:hover,
.form-submit:hover,
.btn-submit:hover,
.sticky-cta-primary:hover,
section.final .btn:hover,
.final-cta .btn:hover,
.g-final-cta .btn:hover {
  background: var(--v2-teal-ink) !important;
  color: var(--v2-pearl) !important;
}

/* Gold remains valid for TAGS/BADGES/ACCENTS only (brand §07 permits).
   Whitelist common tag/accent classes so they are never affected by the no-gold-button rule. */
.sample-tag, .stack-badge, .dest .badge.gold,
.hero-visual .tag, .kicker-row .line,
.eyebrow-line .dot, .testimonials .dot, .review-pill .dot {
  /* intentionally unrestricted — these are brand-approved accent uses of gold */
}

/* ============ LINKS ============ */
a { color: inherit; }
a:hover { color: var(--v2-teal); }
.nav a, .g-nav a, .footer-links a, .g-foot-links a {
  color: var(--v2-deep) !important;
}
.footer a, footer a, .g-footer a {
  color: rgba(250,247,243,0.78) !important;
}
.footer a:hover, footer a:hover, .g-footer a:hover {
  color: var(--v2-pearl) !important;
}

/* ============ REMOVE GRADIENTS on heroes (brand discipline) ============
   Target only the most prominent hero gradient backgrounds.
   Pages can still use solid colors or image backgrounds. */
.hero,
.page-hero {
  /* keep existing image or linear overlay but flatten purely-synthetic gradients */
  /* We don't override if the page uses an image (`url(...)`) — only pure linear-gradients look
     decorative. Detecting this in pure CSS is hard, so we only flatten VERY specific class combos. */
}

/* Flatten the multi-color gradients specifically used on old destination heros */
/* (commented out for safety — individual page designs may legitimately use gradients) */

/* ============ DARK SECTIONS (footers + testimonials) ============ */
.testimonials, section.testimonials, .footer, footer, .g-footer, .g-final-cta {
  background: var(--v2-deep);
  color: var(--v2-pearl);
}

/* ============ CARDS: 2px max corner radius (brand spec) ============ */
.sample-card, .offer-card, .dest-card, .pkg-card, .dest, .t-card,
.tlanding-card, .test-card, .why-card, .hotel-card, .benefit-card,
.service-card, .how-step, .faq-item, .g-faq-item, .g-mini,
.stack-box, .urgency-list, .form-box, .form, .inquiry-form {
  border-radius: 2px !important;
}

/* ============ HAIRLINES: 1px on all borders (brand spec) ============ */
.stat, .triptype, .dest, .nav, .header, .g-header,
.contact-row, .pay-chip, .field input, .field select, .field textarea,
.t-card, .faq-item, .g-faq-item {
  border-width: 1px !important;
}

/* ============ FORMS — unified underline style (subtle, consistent) ============ */
.field input, .field select, .field textarea,
.form-group input, .form-group select, .form-group textarea {
  border-radius: 0 !important;
}
.field input:focus, .field select:focus, .field textarea:focus,
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
  border-color: var(--v2-teal) !important;
  outline: none !important;
}

/* ============ SAFE-AREA — ensure sufficient contrast on pearl ============ */
.muted, .kicker, .section-header p, .sample-meta, .t-card .top {
  color: var(--v2-slate);
}

/* ============ RESPONSIVE: wordmark scales on mobile ============ */
@media (max-width: 540px) {
  .logo-main, .g-logo-main, .footer-logo { font-size: 1.55rem; }
  .logo-sub, .g-logo-sub, .footer-tag { font-size: 0.36rem !important; }
}
/* ============================================================
   SkyGlobal Holidays — Identity v2.5 Overrides
   ============================================================ */

:root {
  --sg-teal-mist:   oklch(0.96 0.018 178);
  --sg-teal-soft:   oklch(0.88 0.045 178);
  --sg-teal-bright: oklch(0.62 0.110 178);
  
  --sg-teal: var(--v2-teal);
  --sg-pearl: var(--v2-pearl);
  --sg-slate: var(--v2-slate);
  --sg-gold: var(--v2-gold);
  --sg-hairline: var(--v2-hairline);
  --fg-1: var(--v2-deep);
  
  --font-arabic: 'Cairo', 'Jost', sans-serif;
  --font-display: 'Cormorant Garamond', serif;
  --font-sans: 'Jost', sans-serif;
}

/* CHANGE 2: Bilingual lockup */
.sg-lockup { display:flex; align-items:center; gap:26px; direction:rtl; }
.sg-lockup__text { display:flex; flex-direction:column; align-items:flex-end; gap:6px; }
.sg-lockup__ar { font-family:var(--font-arabic); font-weight:700; font-size:22px; color:var(--fg-1); }
.sg-lockup__ar .t { font-weight:300; color:var(--sg-slate); font-size:15px; }
.sg-lockup__rule { width:1px; align-self:stretch; min-height:64px; background:var(--sg-hairline); }

/* CHANGE 4: Refined wordmark */
.sg-wordmark { display:inline-flex; flex-direction:column; line-height:1; }
.sg-wordmark__main { font-family:var(--font-display); font-weight:500; letter-spacing:-0.01em; font-size:40px; color:var(--sg-teal); }
.sg-wordmark__sub { display:flex; justify-content:space-between; direction:ltr; font-family:var(--font-sans); font-weight:300; font-size:11px; text-transform:uppercase; color:var(--sg-slate); margin-top:8px; }

/* Inverse variants for dark sections */
.sg-lockup--inverse .sg-wordmark__main,
.sg-lockup--inverse .sg-lockup__ar { color: var(--sg-pearl); }
.sg-lockup--inverse .sg-wordmark__sub { color: var(--sg-gold); }
.sg-lockup--inverse .sg-lockup__ar .t { color: rgba(250,247,243,.6); }
.sg-lockup--inverse .sg-lockup__rule { background: rgba(250,247,243,.18); }

/* CHANGE 5: Typographic icon set */
.sg-icon { font-family:var(--font-display); font-weight:500; color:var(--sg-teal); display:inline-grid; place-items:center; width:1.4em; height:1.4em; line-height:1; }
.sg-icon--gold { color:var(--sg-gold); }

/* Fix the Header layout specifically */
.header-inner .sg-lockup, .lp-header-inner .sg-lockup {
    transform: scale(0.7);
    transform-origin: right center;
}