/* ============================================
   TOURISM MORONA — DESIGN TOKENS
   ============================================
   Single source of truth for colors, spacing,
   typography, z-index, and radii.
   ============================================ */

:root {
    /* --- Color Palette --- */
    --primary:         #1a8a6a;
    --primary-hover:   #148060;
    --primary-dark:    #147055;
    --primary-darker:  #0d7a5a;
    --primary-darkest: #065f46;
    --primary-light:   #e6f5f0;
    --primary-accent:  #2ec4a0;
    --primary-mint:    #34d399;
    --primary-pale:    #6ee7b7;
    --primary-pastel:  #a7f3d0;

    --heading:         #1a1a2e;
    --body-text:       #6b7280;
    --text-muted:      #9ca3af;
    --text-dark:       #374151;

    --bg-white:        #fff;
    --bg-light:        #f8faf9;
    --bg-section:      #f8faf9;
    --border-light:    #f0f0f0;
    --border-default:  #e5e7eb;
    --border-card:     rgba(0,0,0,0.04);

    --gold:            #fbbf24;
    --gold-empty:      rgba(255,255,255,0.35);

    --hero-gradient:   linear-gradient(135deg, var(--primary) 0%, var(--primary-darker) 50%, var(--primary-darkest) 100%);

    /* --- Card System --- */
    --card-radius:     16px;
    --card-radius-sm:  14px;
    --card-radius-lg:  20px;
    --card-shadow:     0 2px 16px rgba(0,0,0,0.06);
    --card-shadow-hover: 0 8px 28px rgba(0,0,0,0.12);

    /* --- Z-Index Scale --- */
    --z-base:          0;
    --z-content:       1;
    --z-card:          2;
    --z-badge:         3;
    --z-sticky:        10;
    --z-video:         5;
    --z-tags:          7;
    --z-dropdown:      50;
    --z-navbar:        100;
    --z-overlay:       500;
    --z-modal:         1000;

    /* --- Typography Scale (1.2 ratio) --- */
    --text-xs:         0.65rem;   /* 10.4px */
    --text-sm:         0.78rem;   /* 12.5px */
    --text-base:       0.88rem;   /* 14px   */
    --text-md:         0.95rem;   /* 15.2px */
    --text-lg:         1.1rem;    /* 17.6px */
    --text-xl:         1.3rem;    /* 20.8px */
    --text-2xl:        1.6rem;    /* 25.6px */
    --text-3xl:        2rem;      /* 32px   */
    --text-4xl:        2.5rem;    /* 40px   */

    /* --- Spacing Scale (8px base) --- */
    --space-1:         0.25rem;   /* 4px  */
    --space-2:         0.5rem;    /* 8px  */
    --space-3:         0.75rem;   /* 12px */
    --space-4:         1rem;      /* 16px */
    --space-5:         1.25rem;   /* 20px */
    --space-6:         1.5rem;    /* 24px */
    --space-8:         2rem;      /* 32px */
    --space-10:        2.5rem;    /* 40px */
    --space-12:        3rem;      /* 48px */
    --space-16:        4rem;      /* 64px */

    /* --- Typography --- */
    --font-primary:    'Jost', 'Jost-Book', sans-serif;
    --font-heading:    'Jost', sans-serif;

    /* --- Transitions --- */
    --ease-out:        cubic-bezier(0.16, 1, 0.3, 1);
    --transition-fast: 0.2s ease;
    --transition-base: 0.3s ease;
    --transition-slow: 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ============================================
   GLOBAL TYPOGRAPHY OVERRIDE
   ============================================ */
html {
    font-family: var(--font-primary);
}
body,
button,
input,
select,
textarea {
    font-family: var(--font-primary) !important;
}
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading) !important;
}
a,
p,
span,
li,
label,
small,
strong {
    font-family: inherit;
}

/* ============================================
   ACCESSIBILITY
   ============================================ */

/* Skip link — hidden until focused */
.skip-link {
    position: absolute;
    top: -100%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--primary);
    color: #fff;
    padding: 0.75rem 1.5rem;
    border-radius: 0 0 8px 8px;
    font-size: 0.85rem;
    font-weight: 700;
    text-decoration: none;
    z-index: 10000;
    transition: top 0.2s ease;
}
.skip-link:focus {
    top: 0;
    color: #fff;
    text-decoration: none;
}

/* ============================================
   IMAGE LOADING SKELETON
   ============================================ */
img[loading="lazy"],
img[data-img-loading] {
    background: linear-gradient(110deg, #e8ece9 30%, #f4f7f5 50%, #e8ece9 70%);
    background-size: 200% 100%;
    animation: imgShimmer 1.4s ease-in-out infinite;
    min-height: 40px;
}
img.img-loaded {
    animation: none;
    background: none;
}
@keyframes imgShimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Reduced motion — disable all animations and transitions */
@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;
    }
}

/* ============================================
   MOBILE COMPACT — Global overrides
   ============================================ */
@media (max-width: 991px) {
    /* Tighter section spacing */
    section { padding-top: 2rem !important; padding-bottom: 2rem !important; }
    .container { padding-left: 16px; padding-right: 16px; }

    /* Smaller headings */
    h1 { font-size: 1.5rem !important; }
    h2 { font-size: 1.25rem !important; }
    h3 { font-size: 1.05rem !important; }
}

@media (max-width: 575px) {
    /* Even tighter */
    section { padding-top: 1.2rem !important; padding-bottom: 1.2rem !important; }
    .container { padding-left: 12px; padding-right: 12px; }

    /* Compact headings */
    h1 { font-size: 1.3rem !important; }
    h2 { font-size: 1.1rem !important; }
    h3 { font-size: 0.95rem !important; }
    h4 { font-size: 0.88rem !important; }

    /* Compact body text */
    p, li, span, a { font-size: inherit; }
    body { font-size: 0.85rem; }

    /* Compact cards & panels */
    .card, [class*="-card"], [class*="-panel"] {
        border-radius: 14px !important;
    }

    /* Reduce row gutters */
    .row { margin-left: -6px; margin-right: -6px; }
    .row > [class*="col"] { padding-left: 6px; padding-right: 6px; }

    /* Tighter margins on mb-* bootstrap classes */
    .mb-3 { margin-bottom: 0.6rem !important; }
    .mb-4 { margin-bottom: 0.8rem !important; }
    .mb-5 { margin-bottom: 1rem !important; }

    /* Compact hero sections */
    .explore-hero, .news-hero, .servers-hero, .routes-hero,
    .ev-hero, .ed-hero { padding: 1.4rem 0 1.2rem !important; }
    .ev-hero h1, .explore-hero h1, .news-hero h1,
    .servers-hero h1, .routes-hero h1 { font-size: 1.2rem !important; margin-bottom: 0.15rem !important; }
    .explore-hero p, .news-hero p, .servers-hero p,
    .routes-hero p, .ev-hero-sub { font-size: 0.78rem !important; line-height: 1.5 !important; }

    /* Hero decorative blobs — hide on small screens */
    .explore-hero::before, .explore-hero::after,
    .news-hero::before, .news-hero::after,
    .servers-hero::before, .servers-hero::after,
    .routes-hero::before, .routes-hero::after,
    .ev-hero::before, .ev-hero::after { display: none !important; }

    /* Event detail hero */
    .ed-hero { min-height: 280px !important; }
    .ed-hero-body { min-height: 280px !important; padding-top: 3.5rem !important; padding-bottom: 1.2rem !important; }
    .ed-hero h1 { font-size: 1.2rem !important; }

    /* Explore detail hero */
    .event-hero, .ed-hero-hero { min-height: 300px !important; }

    /* Compact map heights */
    .ev-map-wrap, .ed-map { height: 180px !important; }

    /* Compact event calendar */
    .ev-cal-split, .ev-cal-body { grid-template-columns: 1fr !important; }
    .ev-cal-right, .ev-cal-detail { border-left: none !important; border-top: 1px solid #eef2f0; }

    /* Compact event cards */
    .ev-card-img, .ev-card-media { height: 100px !important; }
    .ev-card-body { padding: 0.5rem 0.65rem 0.6rem !important; }

    /* Compact past events */
    .ev-past-list, .ev-upcoming-grid, .ev-grid { grid-template-columns: 1fr !important; gap: 0.5rem !important; }
}