/**
 * Lavisa Destinations Theme — Main Stylesheet
 *
 * Consolidated base styles: custom properties, reset, typography,
 * layout system, buttons, forms, utilities, RTL, animations, print.
 *
 * @package    Lavisa_Destinations_Theme
 * @since      1.0.0
 * @file       assets/css/ldt-main.css
 */


/* ═══════════════════════════════════════════════════════════════════
 * 1. CUSTOM PROPERTIES
 * ═══════════════════════════════════════════════════════════════════ */

:root {
    /* ── Brand Colors ──────────────────────────────────────────── */
    --ldt-primary:       #003580;
    --ldt-primary-light: #0057b8;
    --ldt-primary-dark:  #002560;
    --ldt-accent:        #ff8c00;
    --ldt-accent-dark:   #e07a00;
    --ldt-accent-light:  #ffaa33;

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

    /* ── 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', sans-serif;
    --ldt-font-mono: 'JetBrains Mono', 'Fira Code', monospace;

    --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.625;

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

    /* ── Borders & Radius ──────────────────────────────────────── */
    --ldt-radius-sm:   4px;
    --ldt-radius-md:   8px;
    --ldt-radius-lg:   12px;
    --ldt-radius-xl:   16px;
    --ldt-radius-2xl:  24px;
    --ldt-radius-full: 9999px;

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

    /* ── Transitions ───────────────────────────────────────────── */
    --ldt-transition-fast: 0.15s ease;
    --ldt-transition:      0.3s ease;
    --ldt-transition-slow: 0.5s ease;

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

    /* ── Layout ────────────────────────────────────────────────── */
    --ldt-container-max: 1280px;
    --ldt-container-pad: var(--ldt-space-xl);
    --ldt-header-height: 72px;
}


/* ═══════════════════════════════════════════════════════════════════
 * 2. RESET / NORMALIZE
 * ═══════════════════════════════════════════════════════════════════ */

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

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

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

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

img, video, svg { max-width: 100%; height: auto; display: block; }
a { color: var(--ldt-primary); text-decoration: none; transition: color var(--ldt-transition-fast); }
a:hover { color: var(--ldt-primary-light); text-decoration: underline; }

button, input, select, textarea {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    border: none;
    background: none;
    outline: none;
    cursor: pointer;
}

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); }


/* ═══════════════════════════════════════════════════════════════════
 * 3. TYPOGRAPHY
 * ═══════════════════════════════════════════════════════════════════ */

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);}

p { margin-bottom: var(--ldt-space-md); line-height: var(--ldt-line-relaxed); }
p:last-child { margin-bottom: 0; }

strong, b { font-weight: var(--ldt-weight-semibold); }
small { font-size: var(--ldt-text-sm); }

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

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

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


/* ═══════════════════════════════════════════════════════════════════
 * 4. LAYOUT
 * ═══════════════════════════════════════════════════════════════════ */

.ldt-container {
    width: 100%;
    max-width: var(--ldt-container-max);
    margin: 0 auto;
    padding: 0 var(--ldt-container-pad);
}

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

.ldt-grid {
    display: grid;
    gap: var(--ldt-space-lg);
}

.ldt-grid--2 { grid-template-columns: repeat(2, 1fr); }
.ldt-grid--3 { grid-template-columns: repeat(3, 1fr); }
.ldt-grid--4 { grid-template-columns: repeat(4, 1fr); }

.ldt-flex { display: flex; }
.ldt-flex--center { align-items: center; justify-content: center; }
.ldt-flex--between { align-items: center; justify-content: space-between; }
.ldt-flex--wrap { flex-wrap: wrap; }
.ldt-flex--col { flex-direction: column; }
.ldt-flex--gap-sm { gap: var(--ldt-space-sm); }
.ldt-flex--gap-md { gap: var(--ldt-space-md); }
.ldt-flex--gap-lg { gap: var(--ldt-space-lg); }


/* ═══════════════════════════════════════════════════════════════════
 * 5. BUTTONS
 * ═══════════════════════════════════════════════════════════════════ */

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

.ldt-btn:hover { text-decoration: none; transform: translateY(-1px); }
.ldt-btn:active { transform: translateY(0); }

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

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

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

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

.ldt-btn--ghost     { background: transparent; color: var(--ldt-dark); border-color: transparent; }
.ldt-btn--ghost:hover { background: var(--ldt-gray-200); }

.ldt-btn--danger    { background: var(--ldt-danger); color: var(--ldt-white); border-color: var(--ldt-danger); }
.ldt-btn--danger:hover { background: #dc2626; }

/* Sizes */
.ldt-btn--sm  { padding: var(--ldt-space-sm) var(--ldt-space-lg); font-size: var(--ldt-text-xs); }
.ldt-btn--lg  { padding: var(--ldt-space-lg) var(--ldt-space-2xl); font-size: var(--ldt-text-base); }

/* Shapes */
.ldt-btn--pill  { border-radius: var(--ldt-radius-full); }
.ldt-btn--block { width: 100%; }

/* States */
.ldt-btn--disabled, .ldt-btn:disabled { opacity: 0.5; pointer-events: none; }


/* ═══════════════════════════════════════════════════════════════════
 * 6. CARDS BASE
 * ═══════════════════════════════════════════════════════════════════ */

.ldt-card {
    background: var(--ldt-white);
    border-radius: var(--ldt-radius-lg);
    overflow: hidden;
    box-shadow: var(--ldt-shadow-sm);
    transition: box-shadow var(--ldt-transition), transform var(--ldt-transition);
}

.ldt-card:hover {
    box-shadow: var(--ldt-shadow-md);
}


/* ═══════════════════════════════════════════════════════════════════
 * 7. FORM ELEMENTS
 * ═══════════════════════════════════════════════════════════════════ */

.ldt-input, .ldt-select, .ldt-textarea {
    width: 100%;
    padding: var(--ldt-space-md) var(--ldt-space-lg);
    font-size: var(--ldt-text-sm);
    color: var(--ldt-dark);
    background: var(--ldt-white);
    border: 1px solid var(--ldt-gray-300);
    border-radius: var(--ldt-radius-md);
    transition: border-color var(--ldt-transition-fast), box-shadow var(--ldt-transition-fast);
}

.ldt-input:focus, .ldt-select:focus, .ldt-textarea:focus {
    border-color: var(--ldt-primary);
    box-shadow: 0 0 0 3px rgba(0, 53, 128, 0.1);
}

.ldt-input::placeholder { color: var(--ldt-gray-400); }

.ldt-textarea { min-height: 120px; resize: vertical; }

.ldt-label {
    display: block;
    font-size: var(--ldt-text-sm);
    font-weight: var(--ldt-weight-medium);
    color: var(--ldt-dark);
    margin-bottom: var(--ldt-space-xs);
}

.ldt-form-group { margin-bottom: var(--ldt-space-lg); }


/* ═══════════════════════════════════════════════════════════════════
 * 8. UTILITY CLASSES
 * ═══════════════════════════════════════════════════════════════════ */

/* Screen reader only */
.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-width: 0;
}

/* Text */
.ldt-text-center { text-align: center; }
.ldt-text-left   { text-align: left; }
.ldt-text-right  { text-align: right; }
.ldt-text-primary { color: var(--ldt-primary); }
.ldt-text-accent  { color: var(--ldt-accent); }
.ldt-text-muted   { color: var(--ldt-gray-500); }
.ldt-text-sm      { font-size: var(--ldt-text-sm); }
.ldt-text-xs      { font-size: var(--ldt-text-xs); }
.ldt-text-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Spacing */
.ldt-mb-0  { margin-bottom: 0; }
.ldt-mb-sm { margin-bottom: var(--ldt-space-sm); }
.ldt-mb-md { margin-bottom: var(--ldt-space-md); }
.ldt-mb-lg { margin-bottom: var(--ldt-space-lg); }
.ldt-mb-xl { margin-bottom: var(--ldt-space-xl); }
.ldt-mt-lg { margin-top: var(--ldt-space-lg); }
.ldt-mt-xl { margin-top: var(--ldt-space-xl); }
.ldt-p-lg  { padding: var(--ldt-space-lg); }
.ldt-p-xl  { padding: var(--ldt-space-xl); }

/* Display */
.ldt-hidden { display: none !important; }
.ldt-block  { display: block; }
.ldt-inline { display: inline; }

/* Background */
.ldt-bg-light   { background: var(--ldt-light); }
.ldt-bg-primary { background: var(--ldt-primary); color: var(--ldt-white); }
.ldt-bg-white   { background: var(--ldt-white); }

/* Rounded */
.ldt-rounded-md   { border-radius: var(--ldt-radius-md); }
.ldt-rounded-lg   { border-radius: var(--ldt-radius-lg); }
.ldt-rounded-full { border-radius: var(--ldt-radius-full); }

/* Shadows */
.ldt-shadow-sm { box-shadow: var(--ldt-shadow-sm); }
.ldt-shadow-md { box-shadow: var(--ldt-shadow-md); }
.ldt-shadow-lg { box-shadow: var(--ldt-shadow-lg); }

/* Aspect ratios */
.ldt-aspect-video  { aspect-ratio: 16 / 9; }
.ldt-aspect-square { aspect-ratio: 1 / 1; }
.ldt-aspect-photo  { aspect-ratio: 3 / 2; }

/* Object fit */
.ldt-cover { object-fit: cover; width: 100%; height: 100%; }


/* ═══════════════════════════════════════════════════════════════════
 * 9. HERO BASE
 * ═══════════════════════════════════════════════════════════════════ */

.ldt-hero {
    position: relative;
    overflow: hidden;
    color: var(--ldt-white);
}

.ldt-hero__bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
}

.ldt-hero__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.ldt-hero__content {
    position: relative;
    z-index: 2;
}


/* ═══════════════════════════════════════════════════════════════════
 * 10. ANIMATIONS
 * ═══════════════════════════════════════════════════════════════════ */

@keyframes ldt-spin {
    to { transform: rotate(360deg); }
}

@keyframes ldt-bounce {
    0%, 80%, 100% { transform: scale(0); }
    40% { transform: scale(1); }
}

@keyframes ldt-shimmer {
    0%   { opacity: 1; }
    50%  { opacity: 0.5; }
    100% { opacity: 1; }
}

@keyframes ldt-fadeIn {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes ldt-slideDown {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes ldt-scaleIn {
    from { opacity: 0; transform: scale(0.95); }
    to   { opacity: 1; transform: scale(1); }
}

.ldt-fade-in    { animation: ldt-fadeIn 0.4s ease forwards; }
.ldt-slide-down { animation: ldt-slideDown 0.3s ease forwards; }
.ldt-scale-in   { animation: ldt-scaleIn 0.3s ease forwards; }


/* ═══════════════════════════════════════════════════════════════════
 * 11. RTL OVERRIDES
 * ═══════════════════════════════════════════════════════════════════ */

body.ldt-rtl .ldt-text-left  { text-align: right; }
body.ldt-rtl .ldt-text-right { text-align: left; }


/* ═══════════════════════════════════════════════════════════════════
 * 12. RESPONSIVE BREAKPOINTS
 * ═══════════════════════════════════════════════════════════════════ */

/* Tablet landscape */
@media (max-width: 1199px) {
    :root { --ldt-container-pad: var(--ldt-space-lg); }
    .ldt-grid--4 { grid-template-columns: repeat(3, 1fr); }
}

/* Tablet portrait */
@media (max-width: 991px) {
    :root { --ldt-header-height: 64px; }
    h1 { font-size: var(--ldt-text-3xl); }
    h2 { font-size: var(--ldt-text-2xl); }
    .ldt-grid--3 { grid-template-columns: repeat(2, 1fr); }
    .ldt-grid--4 { grid-template-columns: repeat(2, 1fr); }
    .ldt-section { padding: var(--ldt-space-2xl) 0; }
}

/* Mobile landscape */
@media (max-width: 767px) {
    .ldt-section__title { font-size: var(--ldt-text-xl); }
}

/* Mobile portrait */
@media (max-width: 575px) {
    :root {
        --ldt-container-pad: var(--ldt-space-lg);
        --ldt-header-height: 56px;
    }
    h1 { font-size: var(--ldt-text-2xl); }
    h2 { font-size: var(--ldt-text-xl); }
    .ldt-grid--2,
    .ldt-grid--3,
    .ldt-grid--4 { grid-template-columns: 1fr; }
    .ldt-section { padding: var(--ldt-space-xl) 0; }
    .ldt-btn--lg { padding: var(--ldt-space-md) var(--ldt-space-xl); }
}

/* Small mobile */
@media (max-width: 479px) {
    :root { --ldt-container-pad: var(--ldt-space-md); }
}


/* ═══════════════════════════════════════════════════════════════════
 * 13. PRINT
 * ═══════════════════════════════════════════════════════════════════ */

@media print {
    body { font-size: 12pt; color: #000; background: #fff; }
    .ldt-hero, .ldt-sticky-nav, .ldt-back-top, .ldt-share,
    .ldt-map-canvas, .ldt-lightbox, .ldt-lb,
    .ldt-btn, nav, footer { display: none !important; }
    .ldt-container { max-width: 100%; padding: 0; }
    a { color: #000; text-decoration: underline; }
    a[href]::after { content: ' (' attr(href) ')'; font-size: 0.8em; }
    img { max-width: 100% !important; page-break-inside: avoid; }
    h2, h3 { page-break-after: avoid; }
}