/*
 * Theme Name:        Lavisa Destinations
 * Theme URI:         https://lavisatravel.com
 * Description:       Travel destination showcase theme for Lavisa Travel & Tourism. Multi-page portal with interactive maps, booking CTAs, galleries, travel guides, and bilingual EN/AR support. Companion theme for the WPRAD Lavisa Destinations plugin.
 * Version:           3.1.20
 * Author:            Radwan — WPRAD
 * Author URI:        https://lavisatravel.com
 * License:           GPL-2.0+
 * License URI:       http://www.gnu.org/licenses/gpl-2.0.txt
 * Text Domain:       lavisa-destinations-theme
 * Domain Path:       /languages
 * Requires at least: 5.8
 * Requires PHP:      7.4
 * Tags:              travel, destinations, tourism, multilingual, rtl-language-support
 */


/* ═══════════════════════════════════════════════════════════════════════════════
 * CSS CUSTOM PROPERTIES
 * ═══════════════════════════════════════════════════════════════════════════════ */

:root {

    /* ── Brand Colors ─────────────────────────────────────────────────────── */
    --ldt-primary:          #003580;
    --ldt-primary-light:    #0057b8;
    --ldt-primary-dark:     #002560;
    --ldt-accent:           #ff8c00;
    --ldt-accent-light:     #ffa333;
    --ldt-accent-dark:      #e07800;

    /* ── Neutrals ─────────────────────────────────────────────────────────── */
    --ldt-dark:             #1e293b;
    --ldt-dark-soft:        #334155;
    --ldt-gray-700:         #475569;
    --ldt-gray-600:         #64748b;
    --ldt-gray-500:         #94a3b8;
    --ldt-gray-400:         #cbd5e1;
    --ldt-gray-300:         #e2e8f0;
    --ldt-gray-200:         #f1f5f9;
    --ldt-light:            #f8fafc;
    --ldt-white:            #ffffff;

    /* ── Semantic ──────────────────────────────────────────────────────────── */
    --ldt-success:          #22c55e;
    --ldt-success-light:    #dcfce7;
    --ldt-warning:          #f59e0b;
    --ldt-warning-light:    #fef3c7;
    --ldt-danger:           #ef4444;
    --ldt-danger-light:     #fee2e2;
    --ldt-info:             #3b82f6;
    --ldt-info-light:       #dbeafe;

    /* ── Typography ────────────────────────────────────────────────────────── */
    --ldt-font-en:          'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --ldt-font-ar:          'Tajawal', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --ldt-font-family:      var(--ldt-font-en);

    --ldt-text-xs:          0.75rem;    /* 12px */
    --ldt-text-sm:          0.875rem;   /* 14px */
    --ldt-text-base:        1rem;       /* 16px */
    --ldt-text-lg:          1.125rem;   /* 18px */
    --ldt-text-xl:          1.25rem;    /* 20px */
    --ldt-text-2xl:         1.5rem;     /* 24px */
    --ldt-text-3xl:         1.875rem;   /* 30px */
    --ldt-text-4xl:         2.25rem;    /* 36px */
    --ldt-text-5xl:         3rem;       /* 48px */

    --ldt-weight-regular:   400;
    --ldt-weight-medium:    500;
    --ldt-weight-semibold:  600;
    --ldt-weight-bold:      700;

    --ldt-line-tight:       1.25;
    --ldt-line-normal:      1.5;
    --ldt-line-relaxed:     1.75;

    /* ── Spacing ───────────────────────────────────────────────────────────── */
    --ldt-space-xs:         0.25rem;    /* 4px  */
    --ldt-space-sm:         0.5rem;     /* 8px  */
    --ldt-space-md:         1rem;       /* 16px */
    --ldt-space-lg:         1.5rem;     /* 24px */
    --ldt-space-xl:         2rem;       /* 32px */
    --ldt-space-2xl:        3rem;       /* 48px */
    --ldt-space-3xl:        4rem;       /* 64px */
    --ldt-space-4xl:        6rem;       /* 96px */

    /* ── Layout ─────────────────────────────────────────────────────────────── */
    --ldt-container:        1320px;
    --ldt-container-narrow: 960px;
    --ldt-container-wide:   1440px;
    --ldt-gutter:           1.5rem;

    /* ── Borders & Radius ──────────────────────────────────────────────────── */
    --ldt-radius-sm:        0.25rem;    /* 4px  */
    --ldt-radius-md:        0.5rem;     /* 8px  */
    --ldt-radius-lg:        0.75rem;    /* 12px */
    --ldt-radius-xl:        1rem;       /* 16px */
    --ldt-radius-full:      9999px;
    --ldt-border-color:     var(--ldt-gray-300);

    /* ── Shadows ────────────────────────────────────────────────────────────── */
    --ldt-shadow-sm:        0 1px 2px rgba(0, 0, 0, 0.05);
    --ldt-shadow-md:        0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
    --ldt-shadow-lg:        0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
    --ldt-shadow-xl:        0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);

    /* ── Transitions ───────────────────────────────────────────────────────── */
    --ldt-transition-fast:  150ms ease;
    --ldt-transition:       250ms ease;
    --ldt-transition-slow:  400ms ease;

    /* ── Z-Index Scale ─────────────────────────────────────────────────────── */
    --ldt-z-dropdown:       100;
    --ldt-z-sticky:         200;
    --ldt-z-overlay:        300;
    --ldt-z-modal:          400;
    --ldt-z-toast:          500;
}

/* ── RTL Override ─────────────────────────────────────────────────────────────── */

body.ldt-rtl {
    --ldt-font-family: var(--ldt-font-ar);
    direction: rtl;
    text-align: right;
}


/* ═══════════════════════════════════════════════════════════════════════════════
 * BASE RESET
 * ═══════════════════════════════════════════════════════════════════════════════ */

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 100%;
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    font-family: var(--ldt-font-family);
    font-size: var(--ldt-text-base);
    font-weight: var(--ldt-weight-regular);
    line-height: var(--ldt-line-normal);
    color: var(--ldt-dark);
    background-color: var(--ldt-white);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

img,
picture,
video,
canvas,
svg {
    display: block;
    max-width: 100%;
    height: auto;
}

a {
    color: var(--ldt-primary-light);
    text-decoration: none;
    transition: color var(--ldt-transition-fast);
}

a:hover,
a:focus {
    color: var(--ldt-primary);
    text-decoration: underline;
}

button,
input,
select,
textarea {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    color: inherit;
}

button {
    cursor: pointer;
    border: none;
    background: none;
}

ul,
ol {
    list-style: none;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: var(--ldt-weight-bold);
    line-height: var(--ldt-line-tight);
    color: var(--ldt-dark);
}

h1 { font-size: var(--ldt-text-4xl); }
h2 { font-size: var(--ldt-text-3xl); }
h3 { font-size: var(--ldt-text-2xl); }
h4 { font-size: var(--ldt-text-xl);  }
h5 { font-size: var(--ldt-text-lg);  }
h6 { font-size: var(--ldt-text-base); font-weight: var(--ldt-weight-semibold); }

p {
    margin-bottom: var(--ldt-space-md);
}

p:last-child {
    margin-bottom: 0;
}


/* ═══════════════════════════════════════════════════════════════════════════════
 * UTILITY CLASSES
 * ═══════════════════════════════════════════════════════════════════════════════ */

.ldt-container {
    width: 100%;
    max-width: var(--ldt-container);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--ldt-gutter);
    padding-right: var(--ldt-gutter);
}

.ldt-container--narrow {
    max-width: var(--ldt-container-narrow);
}

.ldt-container--wide {
    max-width: var(--ldt-container-wide);
}

/* ── Full-Bleed — force full viewport width regardless of parent ── */
.ldt-hero,
[class*="ldt-hero--"],
.ldt-full-bleed {
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    overflow-x: hidden;
}

.ldt-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.ldt-section {
    padding-top: var(--ldt-space-3xl);
    padding-bottom: var(--ldt-space-3xl);
}

.ldt-section--alt {
    background-color: var(--ldt-light);
}

.ldt-section__title {
    font-size: var(--ldt-text-3xl);
    font-weight: var(--ldt-weight-bold);
    margin-bottom: var(--ldt-space-sm);
    color: var(--ldt-dark);
}

.ldt-section__subtitle {
    font-size: var(--ldt-text-lg);
    color: var(--ldt-gray-600);
    margin-bottom: var(--ldt-space-xl);
}

/* ── Button Base ──────────────────────────────────────────────────────────────── */

.ldt-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--ldt-space-sm);
    padding: 0.625rem 1.5rem;
    font-size: var(--ldt-text-sm);
    font-weight: var(--ldt-weight-semibold);
    line-height: 1;
    border-radius: var(--ldt-radius-md);
    transition: all var(--ldt-transition-fast);
    text-decoration: none;
    cursor: pointer;
    border: 2px solid transparent;
    white-space: nowrap;
}

.ldt-btn:hover {
    text-decoration: none;
}

.ldt-btn--primary {
    background-color: var(--ldt-primary);
    color: var(--ldt-white);
}

.ldt-btn--primary:hover {
    background-color: var(--ldt-primary-light);
    color: var(--ldt-white);
}

.ldt-btn--accent {
    background-color: var(--ldt-accent);
    color: var(--ldt-white);
}

.ldt-btn--accent:hover {
    background-color: var(--ldt-accent-dark);
    color: var(--ldt-white);
}

.ldt-btn--outline {
    background-color: transparent;
    color: var(--ldt-primary);
    border-color: var(--ldt-primary);
}

.ldt-btn--outline:hover {
    background-color: var(--ldt-primary);
    color: var(--ldt-white);
}

.ldt-btn--white {
    background-color: var(--ldt-white);
    color: var(--ldt-primary);
}

.ldt-btn--white:hover {
    background-color: var(--ldt-gray-200);
    color: var(--ldt-primary);
}

.ldt-btn--lg {
    padding: 0.875rem 2rem;
    font-size: var(--ldt-text-base);
}

.ldt-btn--sm {
    padding: 0.375rem 1rem;
    font-size: var(--ldt-text-xs);
}

.ldt-btn--pill {
    border-radius: var(--ldt-radius-full);
}

/* ── Card Base ────────────────────────────────────────────────────────────────── */

/* 2.3.3 — card hover uses a bespoke 320ms easing instead of the generic
 * `--ldt-transition` (250ms ease). The longer duration + `cubic-bezier
 * (0.4, 0, 0.2, 1)` (Material standard curve) produces a smoother,
 * decelerating motion that reads as deliberate rather than abrupt. The
 * hover lift is bumped from -2px to -4px for a more perceptible rise
 * matching the slower transition, and the shadow upgrade goes from sm
 * → lg instead of sm → md so the depth shift matches the motion. */
.ldt-card {
    background: var(--ldt-white);
    border-radius: var(--ldt-radius-lg);
    overflow: hidden;
    box-shadow: var(--ldt-shadow-sm);
    transition: box-shadow 320ms cubic-bezier(0.4, 0, 0.2, 1),
                transform   320ms cubic-bezier(0.4, 0, 0.2, 1);
}

.ldt-card:hover {
    box-shadow: var(--ldt-shadow-lg);
    transform: translateY(-4px);
}

@media (prefers-reduced-motion: reduce) {
    .ldt-card { transition: none; }
    .ldt-card:hover { transform: none; }
}


/* ═══════════════════════════════════════════════════════════════════════════════
 * LDT-1 ADDITIONS — 2.0.0-alpha.1
 * Skip link, focus ring, language binding, plugin-state, RTL mirror.
 * ═══════════════════════════════════════════════════════════════════════════════ */

/* ── Accessibility: Skip Link ─────────────────────────────────────────────────── */

.ldt-skip-link {
    position: absolute;
    left: -9999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
    z-index: var(--ldt-z-tooltip, 600);
}

.ldt-skip-link:focus,
.ldt-skip-link:focus-visible {
    position: fixed;
    left: 1rem;
    top: 1rem;
    width: auto;
    height: auto;
    padding: 0.625rem 1.25rem;
    background: var(--ldt-dark);
    color: var(--ldt-white);
    font-weight: var(--ldt-weight-semibold);
    border-radius: var(--ldt-radius-md);
    box-shadow: var(--ldt-shadow-lg);
    text-decoration: none;
    outline: 2px solid var(--ldt-accent);
    outline-offset: 2px;
}


/* ── Accessibility: Consistent Focus Ring (groundwork for LDT-41) ────────────── */

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: var(--ldt-focus-outline, 2px solid var(--ldt-primary-light));
    outline-offset: var(--ldt-focus-outline-offset, 3px);
    border-radius: var(--ldt-radius-sm);
}

/* Don't suppress browser default for non-keyboard focus */
:where(a, button, input, select, textarea, [tabindex]):focus:not(:focus-visible) {
    outline: none;
}


/* ── Language Binding: Arabic Font via Body Class ─────────────────────────────── */

body.ldt-lang-ar,
[dir="rtl"] body {
    font-family: var(--ldt-font-ar);
}

body.ldt-lang-ar h1,
body.ldt-lang-ar h2,
body.ldt-lang-ar h3,
body.ldt-lang-ar h4,
body.ldt-lang-ar h5,
body.ldt-lang-ar h6,
[dir="rtl"] h1,
[dir="rtl"] h2,
[dir="rtl"] h3,
[dir="rtl"] h4,
[dir="rtl"] h5,
[dir="rtl"] h6 {
    font-family: var(--ldt-font-ar);
}


/* ── JS Hydration Marker ──────────────────────────────────────────────────────── */

/* Set by ldt-shared.js once boot() runs. Anything that should only exist
   after JS hydrates (scroll animations, sticky nav, lightbox) hides first,
   then becomes visible via this flag. */
html:not(.ldt-js) [data-ldt-needs-js] {
    visibility: hidden;
}


/* ── Image Lazy-Load Transition ───────────────────────────────────────────────── */

img[data-ldt-lazy] {
    opacity: 0;
    transition: opacity var(--ldt-duration-slow, 400ms) var(--ldt-ease-out, ease-out);
}

img.ldt-lazy-loaded {
    opacity: 1;
}


/* ── Reduced Motion ──────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}


/* ═══════════════════════════════════════════════════════════════════════════════
 * RTL MIRROR OVERRIDES
 *
 * Minimal set for LDT-1 — covers buttons, cards, containers, utility atoms.
 * Section- and component-level mirror rules land with each respective
 * stage's section file (island-per-file CSS). Full RTL audit at LDT-39.
 * ═══════════════════════════════════════════════════════════════════════════════ */

[dir="rtl"] body,
body.ldt-rtl {
    text-align: right;
}

[dir="rtl"] .ldt-container,
body.ldt-rtl .ldt-container {
    /* symmetric padding — no flip needed */
    padding-left: var(--ldt-gutter);
    padding-right: var(--ldt-gutter);
}

[dir="rtl"] .ldt-btn,
body.ldt-rtl .ldt-btn {
    /* gap handles both directions; nothing to flip at atom level */
}

/* Card internal alignment — kept left-start by default, flips to right-start in RTL */
[dir="rtl"] .ldt-card,
body.ldt-rtl .ldt-card {
    text-align: right;
}

/* Utility: start/end aware alignment helpers for sections to consume */
.ldt-text-start { text-align: left; }
.ldt-text-end   { text-align: right; }
[dir="rtl"] .ldt-text-start { text-align: right; }
[dir="rtl"] .ldt-text-end   { text-align: left;  }


/* ═══════════════════════════════════════════════════════════════════════════════
 * PLUGIN-STATE FALLBACKS
 *
 * When the paired plugin (wprad-lavisa-destinations) is inactive or outdated,
 * the theme still renders — but desaturates marketing CTAs and shows inline
 * "plugin missing" notes for any plugin-dependent section that happens to
 * render its shell before being suppressed.
 * ═══════════════════════════════════════════════════════════════════════════════ */

body.ldt-no-plugin .ldt-btn--primary,
body.ldt-no-plugin .ldt-btn--accent {
    background-color: var(--ldt-gray-500);
    cursor: not-allowed;
}

body.ldt-no-plugin .ldt-btn--outline {
    color: var(--ldt-gray-500);
    border-color: var(--ldt-gray-500);
}

body.ldt-no-plugin [data-ldt-plugin-required] {
    position: relative;
    opacity: 0.55;
    pointer-events: none;
    filter: grayscale(0.3);
}

body.ldt-no-plugin [data-ldt-plugin-required]::after {
    content: attr(data-ldt-plugin-required-label);
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.75);
    color: var(--ldt-gray-800);
    font-size: var(--ldt-text-sm);
    font-weight: var(--ldt-weight-semibold);
    pointer-events: auto;
}

/* Outdated plugin — subtle marker only, everything still functional */
body.ldt-plugin-outdated .ldt-plugin-outdated-notice {
    display: block;
}
.ldt-plugin-outdated-notice { display: none; }


/* ═══════════════════════════════════════════════════════════════════════════════
 * END OF LDT-1 ADDITIONS
 * ═══════════════════════════════════════════════════════════════════════════════ */