/* ============================================================
   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);
}

/* 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;
}

/* ============ 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; }
}