/*
 * ═══════════════════════════════════════════════════════════════════════════════
 * Lavisa Destinations Theme — ENHANCED BASE TYPOGRAPHY (E2)
 * ═══════════════════════════════════════════════════════════════════════════════
 *
 * @file        assets/css/ldt-enhanced-base.css
 * @package     Lavisa_Destinations_Theme
 * @since       2.9.3  (E2 — Visual Enhancement Roadmap v2)
 * @depends     ldt-tokens-enhanced.css (E1 — for gradients, shadows, ease tokens)
 *
 *   Reusable typographic & section-header primitives that lavisatravel.com
 *   uses across Hotels / Flights / Cars modules. NO section-specific CSS,
 *   NO component CSS — only opt-in primitives that other sessions consume.
 *
 *   PHILOSOPHY:
 *     - Every class is opt-in. The theme renders pixel-identically to E1
 *       output unless a template explicitly adds one of these classes.
 *     - Class naming is .ldt-{primitive} — flat, no BEM unless the primitive
 *       has structural children (.ldt-section-decoration__line).
 *     - Variants use BEM modifier (.ldt-section-title--solid).
 *
 *   PROVIDED:
 *     1. .ldt-section-header           Centered block container
 *     2. .ldt-section-decoration       [line] [icon] [line] row
 *     3. .ldt-section-title            Gradient-fill heading (clamp scale)
 *     4. .ldt-section-subtitle         Muted centered support copy
 *     5. .ldt-eyebrow                  Uppercase tracked label
 *     6. .ldt-hero-title               Fluid hero heading (white default)
 *     7. .ldt-prose                    Article/legal/guide reading style
 *     8. .ldt-bg-shapes                Floating animated background blobs
 *     9. Scoped @keyframes ldt-pulse-glow (mirrored canonically in E3)
 *
 *   CO-EXISTS WITH:
 *     - style.css (existing typography rules)
 *     - ldt-main.css (existing layout primitives)
 *     - ldt-components.css (existing card/badge styles)
 *     - rtl.css (existing RTL overrides)
 *     None of those files use the .ldt-section-*, .ldt-eyebrow, .ldt-prose,
 *     .ldt-hero-title or .ldt-bg-shape selectors today (verified).
 *
 *   CANONICAL ANIMATION HOME:
 *     The full motion library — including the canonical @keyframes
 *     ldt-pulse-glow — lands in E3 (ldt-enhanced-animations.css). E2 ships
 *     a single inline copy of the keyframe so .ldt-section-decoration__icon
 *     animates correctly even before E3 is installed. Both definitions are
 *     identical, so co-existing in the cascade is harmless.
 *
 * ═══════════════════════════════════════════════════════════════════════════════
 */


/* ═══════════════════════════════════════════════════════════════════════════════
 * 1. SECTION HEADER — centered container above section content
 * ═══════════════════════════════════════════════════════════════════════════════ */

.ldt-section-header {
    text-align: center;
    margin: 0 auto clamp(40px, 6vw, 80px);
    max-width: 760px;
    padding: 0 var(--ldt-section-px-mobile, 20px);
}

@media (min-width: 768px) {
    .ldt-section-header {
        padding: 0 var(--ldt-section-px-tablet, 40px);
    }
}

/* Variant: left-aligned (used in editorial / about / guide intro blocks) */
.ldt-section-header--left {
    text-align: left;
    margin-left: 0;
    margin-right: 0;
    max-width: none;
}

/* Variant: tight — used directly above carousels / rails where 80px feels heavy */
.ldt-section-header--tight {
    margin-bottom: clamp(24px, 4vw, 48px);
}


/* ═══════════════════════════════════════════════════════════════════════════════
 * 2. SECTION DECORATION — [line] [icon] [line] row above titles
 * ═══════════════════════════════════════════════════════════════════════════════ */

.ldt-section-decoration {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-bottom: 20px;
}

/* Decorative gradient line — 80px × 3px, fades to transparent at both ends */
.ldt-section-decoration__line {
    width: 80px;
    height: 3px;
    border-radius: 999px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        var(--ldt-accent, #ff8c00) 50%,
        transparent 100%
    );
    flex-shrink: 0;
}

/* Single-sided fade variants — for asymmetric layouts (e.g. left-aligned headers) */
.ldt-section-decoration__line--left {
    background: linear-gradient(
        90deg,
        transparent 0%,
        var(--ldt-accent, #ff8c00) 100%
    );
}

.ldt-section-decoration__line--right {
    background: linear-gradient(
        90deg,
        var(--ldt-accent, #ff8c00) 0%,
        transparent 100%
    );
}

/* Center icon — 36px, accent color, with a subtle pulse-glow animation.
   Works with: <i class="ldt-section-decoration__icon fas fa-globe-americas"></i>
   or: <span class="ldt-section-decoration__icon">🌐</span>
   or any inline SVG with class set. */
.ldt-section-decoration__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    line-height: 1;
    color: var(--ldt-accent, #ff8c00);
    animation: ldt-pulse-glow 2s ease-in-out infinite;
    will-change: transform, filter;
}

/* SVG icon support — inherit color and sizing */
.ldt-section-decoration__icon svg {
    width: 32px;
    height: 32px;
    fill: currentColor;
}

/* Variant: brand-colored icon (for sections without orange accent) */
.ldt-section-decoration__icon--brand {
    color: var(--ldt-primary, #003580);
}

/* Variant: no animation (calmer sections — about, legal pages) */
.ldt-section-decoration__icon--still {
    animation: none;
}

/* Honour reduced-motion at the primitive level too */
@media (prefers-reduced-motion: reduce) {
    .ldt-section-decoration__icon {
        animation: none;
    }
}


/* ═══════════════════════════════════════════════════════════════════════════════
 * 3. SECTION TITLE — gradient-fill heading
 * ═══════════════════════════════════════════════════════════════════════════════ */

.ldt-section-title {
    /* Fluid type — clamp(min, preferred, max) keeps phones readable, scales up */
    font-size: clamp(1.875rem, 4vw, 3rem);  /* 30px → 48px */
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.01em;
    margin: 0 0 15px;

    /* The signature 3-stop gradient text. Falls back to --ldt-primary when
       background-clip: text isn't supported (very old Edge / IE — basically
       no-one in our audience, but cheap insurance). */
    color: var(--ldt-primary, #003580);
    background: var(--ldt-gradient-text);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    /* Better rendering on retina */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Variant: solid — drops the gradient (use inside accent-bg sections where
   gradient text would clash with the background) */
.ldt-section-title--solid {
    color: var(--ldt-primary, #003580);
    background: none;
    -webkit-background-clip: initial;
    -webkit-text-fill-color: initial;
}

/* Variant: white — for use on dark/image backgrounds */
.ldt-section-title--white {
    color: #ffffff;
    background: none;
    -webkit-background-clip: initial;
    -webkit-text-fill-color: initial;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

/* Variant: brand-only gradient (drops the orange end-stop — for sections that
   already include orange in their background imagery / accents) */
.ldt-section-title--brand {
    background: var(--ldt-gradient-text-brand);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Variant: large (for tools index, about hero adjacency) */
.ldt-section-title--lg {
    font-size: clamp(2.25rem, 5vw, 3.75rem);  /* 36px → 60px */
}

/* Variant: small (for sub-sections inside larger content blocks) */
.ldt-section-title--sm {
    font-size: clamp(1.5rem, 3vw, 2rem);  /* 24px → 32px */
    margin-bottom: 12px;
}


/* ═══════════════════════════════════════════════════════════════════════════════
 * 4. SECTION SUBTITLE — muted centered support copy
 * ═══════════════════════════════════════════════════════════════════════════════ */

.ldt-section-subtitle {
    font-size: clamp(1rem, 1.4vw, 1.25rem);  /* 16px → 20px */
    line-height: 1.6;
    color: var(--ldt-gray-600, #64748b);
    margin: 0 auto;
    max-width: 700px;
    font-weight: 400;
}

/* Variant: left-aligned (paired with .ldt-section-header--left) */
.ldt-section-header--left .ldt-section-subtitle {
    margin-left: 0;
    margin-right: 0;
    max-width: 720px;
}

/* Variant: light — for use on dark backgrounds */
.ldt-section-subtitle--light {
    color: rgba(255, 255, 255, 0.85);
}


/* ═══════════════════════════════════════════════════════════════════════════════
 * 5. EYEBROW — uppercase tracked label
 *    Used above titles ("DISCOVER", "FROM AED", "FEATURED"), or as small
 *    metadata labels above content blocks.
 * ═══════════════════════════════════════════════════════════════════════════════ */

.ldt-eyebrow {
    display: inline-block;
    font-size: 0.75rem;            /* 12px */
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ldt-accent, #ff8c00);
    margin-bottom: 10px;
    line-height: 1;
}

/* Variant: small (10px) */
.ldt-eyebrow--sm {
    font-size: 0.6875rem;          /* 11px */
}

/* Variant: large (14px) */
.ldt-eyebrow--lg {
    font-size: 0.875rem;           /* 14px */
}

/* Variant: brand color (blue eyebrows for non-deal contexts) */
.ldt-eyebrow--brand {
    color: var(--ldt-primary, #003580);
}

/* Variant: muted (gray eyebrows for tertiary metadata) */
.ldt-eyebrow--muted {
    color: var(--ldt-gray-500, #94a3b8);
}

/* Variant: with leading bullet — eyebrow + dot + text pattern */
.ldt-eyebrow--bullet::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    margin-right: 8px;
    vertical-align: middle;
    transform: translateY(-1px);
}


/* ═══════════════════════════════════════════════════════════════════════════════
 * 6. HERO TITLE — fluid hero heading
 *    Default white (heroes have dark image backgrounds). Override via variant
 *    when used on light backgrounds.
 * ═══════════════════════════════════════════════════════════════════════════════ */

.ldt-hero-title {
    font-size: clamp(2.25rem, 6vw, 4rem);  /* 36px → 64px */
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: #ffffff;
    margin: 0 0 16px;
    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

/* Variant: extra-large (landing hero) — clamp 48px → 80px */
.ldt-hero-title--xl {
    font-size: clamp(3rem, 7vw, 5rem);
}

/* Variant: dark (when hero is on light bg, e.g. about/contact alt layouts) */
.ldt-hero-title--dark {
    color: var(--ldt-dark, #1e293b);
    text-shadow: none;
}

/* Variant: gradient (rare — used for deep-brand heroes) */
.ldt-hero-title--gradient {
    background: var(--ldt-gradient-text);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: none;
}


/* ═══════════════════════════════════════════════════════════════════════════════
 * 7. PROSE — article reading style
 *    Used by travel guides, About, legal pages, single-post body. Constrains
 *    width to 680px for comfortable reading and applies a generous heading
 *    hierarchy + accent link styling.
 * ═══════════════════════════════════════════════════════════════════════════════ */

.ldt-prose {
    max-width: var(--ldt-container-prose, 680px);
    margin: 0 auto;
    font-size: 1.0625rem;          /* 17px */
    line-height: 1.72;
    color: var(--ldt-gray-700, #475569);
}

.ldt-prose > * + * {
    margin-top: 1.25em;
}

.ldt-prose h2,
.ldt-prose h3,
.ldt-prose h4 {
    color: var(--ldt-dark, #1e293b);
    font-weight: 700;
    line-height: 1.3;
    scroll-margin-top: 80px;       /* sticky-nav offset for anchor links */
    margin-top: 2em;
    margin-bottom: 0.6em;
}

.ldt-prose h2 {
    font-size: clamp(1.5rem, 2.5vw, 1.875rem);  /* 24px → 30px */
}

.ldt-prose h3 {
    font-size: clamp(1.25rem, 2vw, 1.5rem);     /* 20px → 24px */
}

.ldt-prose h4 {
    font-size: 1.125rem;           /* 18px */
}

.ldt-prose p {
    margin: 0 0 1.25em;
}

.ldt-prose a {
    color: var(--ldt-primary-light, #0057b8);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    transition: color var(--ldt-duration-fast, 150ms) var(--ldt-ease-portal, ease);
}

.ldt-prose a:hover,
.ldt-prose a:focus-visible {
    color: var(--ldt-accent, #ff8c00);
    text-decoration-thickness: 2px;
}

.ldt-prose ul,
.ldt-prose ol {
    padding-left: 1.5em;
    margin: 1em 0 1.25em;
}

.ldt-prose ul li::marker {
    color: var(--ldt-accent, #ff8c00);
}

.ldt-prose ol li::marker {
    color: var(--ldt-primary, #003580);
    font-weight: 700;
}

.ldt-prose li {
    margin-bottom: 0.4em;
}

.ldt-prose blockquote {
    margin: 1.5em 0;
    padding: 0.5em 0 0.5em 1.25em;
    border-left: 4px solid var(--ldt-accent, #ff8c00);
    color: var(--ldt-gray-700, #475569);
    font-style: italic;
    font-size: 1.125rem;
}

.ldt-prose img {
    border-radius: var(--ldt-radius-card, 1.25rem);
    margin: 1.5em 0;
}

.ldt-prose hr {
    margin: 2.5em auto;
    border: none;
    height: 1px;
    width: 60%;
    background: linear-gradient(
        90deg,
        transparent 0%,
        var(--ldt-gray-300, #cbd5e1) 50%,
        transparent 100%
    );
}

.ldt-prose code {
    font-family: var(--ldt-font-mono, 'JetBrains Mono', monospace);
    font-size: 0.9em;
    padding: 0.15em 0.4em;
    background: var(--ldt-gray-200, #e2e8f0);
    border-radius: var(--ldt-radius-sm, 0.25rem);
    color: var(--ldt-dark, #1e293b);
}

.ldt-prose pre {
    background: var(--ldt-dark, #1e293b);
    color: #e2e8f0;
    padding: 1em 1.25em;
    border-radius: var(--ldt-radius-input, 0.75rem);
    overflow-x: auto;
    font-size: 0.9rem;
    line-height: 1.6;
}

.ldt-prose pre code {
    background: none;
    padding: 0;
    color: inherit;
}

/* Variant: drop-cap on the first paragraph
   Use case: editorial articles, travel guides where the lead paragraph
   should feel "magazine". Apply with .ldt-prose.ldt-prose--dropcap or
   add the class only on the section that needs it. */
.ldt-prose--dropcap > p:first-of-type::first-letter {
    float: left;
    font-size: 3.2em;
    line-height: 0.9;
    font-weight: 800;
    color: var(--ldt-accent, #ff8c00);
    padding: 0.1em 0.12em 0 0;
    font-family: inherit;
}

/* Variant: light text on dark bg (rare — for "stories" or hero-prose blocks) */
.ldt-prose--light {
    color: rgba(255, 255, 255, 0.88);
}

.ldt-prose--light h2,
.ldt-prose--light h3,
.ldt-prose--light h4 {
    color: #ffffff;
}

.ldt-prose--light a {
    color: var(--ldt-accent-light, #ffaa33);
}

.ldt-prose--light a:hover {
    color: #ffffff;
}


/* ═══════════════════════════════════════════════════════════════════════════════
 * 8. BACKGROUND BLOBS — animated decorative wash
 *    Drop .ldt-bg-shapes as the FIRST child of any positioned (relative) section
 *    to get the portal's signature soft-blur backdrop. Three blobs sized + tinted
 *    to feel intentional rather than busy.
 *
 *    USAGE:
 *      <section style="position:relative; overflow:hidden;">
 *        <div class="ldt-bg-shapes" aria-hidden="true">
 *          <span class="ldt-bg-shape ldt-bg-shape--1"></span>
 *          <span class="ldt-bg-shape ldt-bg-shape--2"></span>
 *          <span class="ldt-bg-shape ldt-bg-shape--3"></span>
 *        </div>
 *        <!-- section content -->
 *      </section>
 *
 *    Note: the parent section MUST have position:relative and overflow:hidden
 *    or the blobs will overflow and degrade scroll performance.
 *
 *    The float-shape keyframe used here is also defined in E3 (canonical home).
 *    Identical definitions in both files are harmless.
 * ═══════════════════════════════════════════════════════════════════════════════ */

.ldt-bg-shapes {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: var(--ldt-z-shapes, 2);
    overflow: hidden;
}

.ldt-bg-shape {
    position: absolute;
    border-radius: 50%;
    filter: blur(var(--ldt-blob-blur, 100px));
    opacity: var(--ldt-blob-opacity, 0.05);
    will-change: transform;
}

/* Shape 1 — large brand blob, top-left */
.ldt-bg-shape--1 {
    width: 600px;
    height: 600px;
    background: linear-gradient(135deg, var(--ldt-primary, #003580), var(--ldt-primary-light, #0057b8));
    top: -300px;
    left: -300px;
    animation: ldt-float-shape 22s ease-in-out infinite;
}

/* Shape 2 — accent blob, bottom-right */
.ldt-bg-shape--2 {
    width: 400px;
    height: 400px;
    background: linear-gradient(135deg, var(--ldt-accent, #ff8c00), var(--ldt-accent-dark, #e07a00));
    bottom: -200px;
    right: -200px;
    animation: ldt-float-shape 18s ease-in-out infinite reverse;
}

/* Shape 3 — success-tinted blob, center (subtler) */
.ldt-bg-shape--3 {
    width: 300px;
    height: 300px;
    background: linear-gradient(135deg, #22c55e, #16a34a);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: ldt-float-shape 26s ease-in-out infinite;
}

/* Variant: ldt-bg-shapes--subtle — half opacity for sections where blobs
   would compete with content imagery */
.ldt-bg-shapes--subtle .ldt-bg-shape {
    opacity: calc(var(--ldt-blob-opacity, 0.05) * 0.5);
}

/* Variant: ldt-bg-shapes--strong — for sections with no other backdrop where
   we want the blobs to have more presence */
.ldt-bg-shapes--strong .ldt-bg-shape {
    opacity: var(--ldt-blob-opacity-strong, 0.08);
}

/* Mobile: hide blobs entirely — they bloat layer count and rarely add value
   on a phone screen where content fills the viewport anyway */
@media (max-width: 768px) {
    .ldt-bg-shapes {
        display: none;
    }
}

/* Reduced motion: keep the blobs but stop them moving */
@media (prefers-reduced-motion: reduce) {
    .ldt-bg-shape {
        animation: none;
    }
}


/* ═══════════════════════════════════════════════════════════════════════════════
 * 9. POPPINS DIRECT FORCERS  (paired with body.ldt-poppins from E1)
 *    These rules let an individual element opt into Poppins even when the
 *    global Customizer toggle is off. Useful for one-off marketing modules.
 *    Note: requires ldt-fonts-poppins.css to also be loaded — without that,
 *    Poppins isn't on the page and the rule falls back to Inter.
 * ═══════════════════════════════════════════════════════════════════════════════ */

.ldt-portal-type {
    font-family:
        'Poppins',
        -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* RTL preservation — Tajawal stays for Arabic content even when .ldt-portal-type
   is applied. Mirrors the rule in ldt-fonts-poppins.css. */
[dir="rtl"] .ldt-portal-type,
.ldt-rtl .ldt-portal-type {
    font-family: var(--ldt-font-ar, 'Tajawal', 'Inter', sans-serif);
}


/* ═══════════════════════════════════════════════════════════════════════════════
 * KEYFRAMES — minimal subset needed by E2 primitives
 *
 * The full motion library lands in E3 (ldt-enhanced-animations.css) with
 * canonical definitions. These two keyframes are duplicated here so E2's
 * primitives animate correctly even when E3 isn't installed yet. Both
 * definitions match E3 exactly — the cascade just uses whichever loads last.
 * ═══════════════════════════════════════════════════════════════════════════════ */

/* Used by .ldt-section-decoration__icon */
@keyframes ldt-pulse-glow {
    0%, 100% {
        transform: scale(1);
        filter: brightness(1);
    }
    50% {
        transform: scale(1.1);
        filter: brightness(1.2);
    }
}

/* Used by .ldt-bg-shape--1/2/3 */
@keyframes ldt-float-shape {
    0%, 100% {
        transform: translate(0, 0) scale(1);
    }
    33% {
        transform: translate(30px, -30px) scale(1.1);
    }
    66% {
        transform: translate(-30px, 30px) scale(0.9);
    }
}

/* Shape 3 has its own transform: translate(-50%, -50%) for centering — its
   keyframe variant adds the float on top of the centering. */
@keyframes ldt-float-shape-centered {
    0%, 100% {
        transform: translate(-50%, -50%) scale(1);
    }
    33% {
        transform: translate(calc(-50% + 30px), calc(-50% - 30px)) scale(1.1);
    }
    66% {
        transform: translate(calc(-50% - 30px), calc(-50% + 30px)) scale(0.9);
    }
}

/* Apply the centered variant to shape-3 specifically (shape-3 sits at
   top: 50%, left: 50% with its base transform). */
.ldt-bg-shape--3 {
    animation-name: ldt-float-shape-centered;
}


/* ─── END OF ldt-enhanced-base.css ────────────────────────────────────────── */