/* ============================================================
   Safari Hero Readability Enhancements
   Target: .elementor-element-d0fa59a (hero container)
   Applies to ALL itinerary pages via the shared template
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700;800&family=Montserrat:wght@400;500;600&display=swap');

/* ------------------------------------------------------------------
   1. OVERLAY — dark charcoal/navy at ~60% base, gradient up to 68%
      where text sits (bottom portion)
------------------------------------------------------------------ */
.elementor-element-d0fa59a {
    position: relative;
}

.elementor-element-d0fa59a::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(18, 23, 40, 0.60) 0%,
        rgba(18, 23, 40, 0.64) 50%,
        rgba(18, 23, 40, 0.68) 75%,
        rgba(18, 23, 40, 0.68) 100%
    );
    z-index: 1;
    pointer-events: none;
}

/* Keep all children above the overlay */
.elementor-element-d0fa59a > *,
.elementor-element-d0fa59a > .e-con-inner > * {
    position: relative;
    z-index: 2;
}

/* ------------------------------------------------------------------
   2. HERO TITLE — luxury bold serif, pure white
------------------------------------------------------------------ */
.elementor-element-d0fa59a .elementor-heading-title,
.elementor-element-d0fa59a h1,
.elementor-element-d0fa59a h2 {
    font-family: 'Playfair Display', Georgia, serif !important;
    font-weight: 800 !important;
    color: #FFFFFF !important;
    line-height: 1.08 !important;
    letter-spacing: -0.02em;

    /* Desktop: 56–68px */
    font-size: clamp(56px, 5vw, 68px) !important;
}

/* ------------------------------------------------------------------
   3. SUPPORTING TEXT — clean sans-serif, warm ivory
------------------------------------------------------------------ */
.elementor-element-d0fa59a p,
.elementor-element-d0fa59a .elementor-text-editor,
.elementor-element-d0fa59a .elementor-widget-text-editor p {
    font-family: 'Montserrat', sans-serif !important;
    color: #F5F1E8 !important;
    line-height: 1.5 !important;

    /* Desktop: 18–20px */
    font-size: clamp(18px, 1.5vw, 20px) !important;
    font-weight: 400 !important;
}

/* ------------------------------------------------------------------
   4. LABEL / TAG / SMALL TEXT (e.g. category/itinerary label)
------------------------------------------------------------------ */
.elementor-element-d0fa59a .hero-label,
.elementor-element-d0fa59a span.label,
.elementor-element-d0fa59a .itinerary-label,
.elementor-element-d0fa59a .elementor-tag {
    font-family: 'Montserrat', sans-serif !important;
    color: #F5F1E8 !important;
    font-size: clamp(18px, 1.4vw, 20px) !important;
    font-weight: 500 !important;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* ------------------------------------------------------------------
   5. PRICE / KEY HIGHLIGHT — muted safari gold
------------------------------------------------------------------ */
.elementor-element-d0fa59a .hero-price,
.elementor-element-d0fa59a .price,
.elementor-element-d0fa59a strong,
.elementor-element-d0fa59a b,
.elementor-element-d0fa59a .elementor-text-editor strong,
.elementor-element-d0fa59a .elementor-text-editor b {
    color: #D9A441 !important;
    font-weight: 700 !important;

    /* Desktop: 24–30px */
    font-size: clamp(24px, 2vw, 30px) !important;
    font-family: 'Montserrat', sans-serif !important;
}

/* ------------------------------------------------------------------
   6. BUTTON TEXT
------------------------------------------------------------------ */
.elementor-element-d0fa59a .elementor-button,
.elementor-element-d0fa59a a.elementor-button,
.elementor-element-d0fa59a .wcf--button a,
.elementor-element-d0fa59a .wcf--button {
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 600 !important;
    font-size: clamp(16px, 1.2vw, 18px) !important;
    letter-spacing: 0.04em;
}

/* ------------------------------------------------------------------
   7. SHORTCODE HERO [sds_luxury_hero] — typography inside HTML widget
------------------------------------------------------------------ */
.elementor-element-d0fa59a .elementor-widget-html h1,
.elementor-element-d0fa59a .elementor-widget-html h2 {
    font-family: 'Playfair Display', Georgia, serif !important;
    font-weight: 800 !important;
    color: #FFFFFF !important;
    font-size: clamp(56px, 5vw, 68px) !important;
    line-height: 1.08 !important;
}

.elementor-element-d0fa59a .elementor-widget-html p,
.elementor-element-d0fa59a .elementor-widget-html span {
    font-family: 'Montserrat', sans-serif !important;
    color: #F5F1E8 !important;
    font-size: clamp(18px, 1.5vw, 20px) !important;
    line-height: 1.5 !important;
}

/* ------------------------------------------------------------------
   8. CTA SECTION (container #66a10e4) — bottom CTA strip
      Bold serif title, ivory body, gold price, readable button
------------------------------------------------------------------ */
.elementor-element-66a10e4 .elementor-heading-title {
    font-family: 'Playfair Display', Georgia, serif !important;
    font-weight: 700 !important;
    color: #FFFFFF !important;
    line-height: 1.1 !important;
    font-size: clamp(36px, 3.5vw, 52px) !important;
}

.elementor-element-66a10e4 p,
.elementor-element-66a10e4 .elementor-text-editor p {
    font-family: 'Montserrat', sans-serif !important;
    color: #F5F1E8 !important;
    font-size: clamp(18px, 1.5vw, 20px) !important;
    line-height: 1.5 !important;
}

.elementor-element-66a10e4 strong,
.elementor-element-66a10e4 b {
    color: #D9A441 !important;
    font-weight: 700 !important;
}

/* ------------------------------------------------------------------
   9. RESPONSIVE — Tablet (≤1024px)
------------------------------------------------------------------ */
@media (max-width: 1024px) {
    .elementor-element-d0fa59a .elementor-heading-title,
    .elementor-element-d0fa59a h1,
    .elementor-element-d0fa59a h2 {
        font-size: clamp(44px, 6vw, 56px) !important;
    }

    .elementor-element-d0fa59a p,
    .elementor-element-d0fa59a .elementor-text-editor p {
        font-size: clamp(17px, 2vw, 19px) !important;
    }

    .elementor-element-d0fa59a strong,
    .elementor-element-d0fa59a b {
        font-size: clamp(22px, 2.5vw, 26px) !important;
    }
}

/* ------------------------------------------------------------------
   10. RESPONSIVE — Mobile (≤767px)
------------------------------------------------------------------ */
@media (max-width: 767px) {
    .elementor-element-d0fa59a .elementor-heading-title,
    .elementor-element-d0fa59a h1,
    .elementor-element-d0fa59a h2,
    .elementor-element-d0fa59a .elementor-widget-html h1,
    .elementor-element-d0fa59a .elementor-widget-html h2 {
        font-size: clamp(36px, 9vw, 44px) !important;
        line-height: 1.1 !important;
    }

    .elementor-element-d0fa59a p,
    .elementor-element-d0fa59a .elementor-widget-html p,
    .elementor-element-d0fa59a .elementor-text-editor p {
        font-size: clamp(16px, 4vw, 18px) !important;
    }

    .elementor-element-d0fa59a .hero-label,
    .elementor-element-d0fa59a span.label,
    .elementor-element-d0fa59a .elementor-tag {
        font-size: clamp(14px, 3.5vw, 16px) !important;
    }

    .elementor-element-d0fa59a strong,
    .elementor-element-d0fa59a b,
    .elementor-element-d0fa59a .elementor-text-editor strong,
    .elementor-element-d0fa59a .elementor-text-editor b {
        font-size: clamp(20px, 5vw, 24px) !important;
    }

    .elementor-element-d0fa59a .elementor-button,
    .elementor-element-d0fa59a .wcf--button a,
    .elementor-element-d0fa59a .wcf--button {
        font-size: 16px !important;
    }

    .elementor-element-66a10e4 .elementor-heading-title {
        font-size: clamp(28px, 7vw, 38px) !important;
    }
}