/* =============================================================================
   Leicester Salaah Times — public site theme
   Shared across index.php, mosque.php, mosques.php, events.php, event.php,
   resources.php and the public header/footer.

   Goal: bring the website's visual language in line with the iOS app.
   - Ivory page background (sits behind pure-white cards)
   - Deep teal nav / chrome
   - Copper accent for CTAs and highlights ("NEXT", jama'ah)
   - Per-prayer hero gradients + landscape imagery
   - Rounded cards (14-18px), soft shadows, pill badges
   - Modern system font stack with Inter as a primary

   These tokens layer on top of the existing brand custom properties emitted by
   `outputBrandingStyles()` (site-branding.php). Brand colours from that helper
   continue to drive nav background / primary heading colour / page bg, so an
   admin's per-site customisation is still respected. The iOS palette below is
   used for the hero, accent details, badges and friendly empty states which
   the brand system doesn't define.
   ============================================================================= */

:root {
    /* iOS app palette — used for the visual language additions */
    --ios-ivory:        #F7F5EF;
    --ios-card:         #FFFFFF;
    --ios-card-darker:  #F5F3ED;
    --ios-teal:         #0F4C5C;
    --ios-teal-2:       #1E6C6E;
    --ios-copper:       #E36414;
    --ios-copper-deep:  #CA560F;
    --ios-emerald:      #16903C;
    --ios-text:         #1C2026;
    --ios-text-muted:   #596870;
    --ios-text-faint:   #8A95A0;
    --ios-border:       rgba(15, 76, 92, 0.10);
    --ios-shadow:       0 4px 12px rgba(15, 32, 38, 0.06);
    --ios-shadow-lift:  0 8px 24px rgba(15, 32, 38, 0.10);

    /* Per-prayer gradient pairs (top → bottom). Mirrors HomeHeroTheme.swift. */
    --hero-fajr-top:    #11193F;
    --hero-fajr-bot:    #4D3373;
    --hero-dhuhr-top:   #6BB0DB;
    --hero-dhuhr-bot:   #DBE8F2;
    --hero-asr-top:     #EDB55C;
    --hero-asr-bot:     #BC7233;
    --hero-maghrib-top: #D95B33;
    --hero-maghrib-bot: #5C2143;
    --hero-isha-top:    #0D1433;
    --hero-isha-bot:    #212E51;
}

/* =============================================================================
   Hero — next-prayer banner
   Used at the top of index.php. The PHP picks one of these classes based on
   which slot is next; each one stretches a landscape JPG/PNG with a soft
   bottom-darken scrim so white text stays legible.
   ============================================================================= */
.lst-hero {
    position: relative;
    border-radius: 18px;
    overflow: hidden;
    color: #ffffff;
    box-shadow: var(--ios-shadow-lift);
    margin: 0 0 18px;
    background-color: var(--ios-teal);
}
.lst-hero-image {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 0;
}
.lst-hero-scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0.10) 0%, rgba(0,0,0,0.55) 100%);
    z-index: 1;
}
.lst-hero-body {
    position: relative;
    z-index: 2;
    padding: 22px 20px 22px;
    min-height: 200px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 14px;
}
.lst-hero-eyebrow {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: rgba(255,255,255,0.85);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.lst-hero-eyebrow .dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--ios-copper);
    box-shadow: 0 0 0 4px rgba(227,100,20,0.18);
    animation: lst-hero-pulse 2.4s ease-in-out infinite;
}
@keyframes lst-hero-pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50%      { transform: scale(1.15); opacity: 0.75; }
}
.lst-hero-title {
    font-size: 2.05rem;
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.02em;
    margin: 0;
    text-shadow: 0 1px 2px rgba(0,0,0,0.25);
    display: flex;
    align-items: center;
    gap: 10px;
}
.lst-hero-title i { font-size: 1.6rem; opacity: 0.95; }
.lst-hero-time {
    font-size: 1.15rem;
    font-weight: 600;
    margin: 4px 0 0;
    text-shadow: 0 1px 2px rgba(0,0,0,0.25);
    font-variant-numeric: tabular-nums;
}
.lst-hero-time strong {
    color: #ffd9b8;
    font-weight: 700;
}
.lst-hero-foot {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    font-size: 0.78rem;
    color: rgba(255,255,255,0.92);
}
.lst-hero-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(255,255,255,0.16);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    font-weight: 600;
}
.lst-hero-pill.is-copper {
    background: var(--ios-copper);
    color: #fff;
    box-shadow: 0 2px 6px rgba(202,86,15,0.4);
}

/* Per-slot fallback gradient (used when image missing or slow to load). */
.lst-hero[data-slot="fajr"]    { background: linear-gradient(180deg, var(--hero-fajr-top), var(--hero-fajr-bot)); }
.lst-hero[data-slot="dhuhr"]   { background: linear-gradient(180deg, var(--hero-dhuhr-top), var(--hero-dhuhr-bot)); }
.lst-hero[data-slot="asr"]     { background: linear-gradient(180deg, var(--hero-asr-top), var(--hero-asr-bot)); }
.lst-hero[data-slot="maghrib"] { background: linear-gradient(180deg, var(--hero-maghrib-top), var(--hero-maghrib-bot)); }
.lst-hero[data-slot="isha"]    { background: linear-gradient(180deg, var(--hero-isha-top), var(--hero-isha-bot)); }

/* Dhuhr is a bright sky — the white text needs a harder scrim. */
.lst-hero[data-slot="dhuhr"] .lst-hero-scrim {
    background: linear-gradient(180deg, rgba(0,0,0,0.18) 0%, rgba(0,0,0,0.48) 100%);
}

@media (min-width: 720px) {
    .lst-hero-body { padding: 30px 28px; min-height: 240px; }
    .lst-hero-title { font-size: 2.5rem; }
    .lst-hero-title i { font-size: 1.9rem; }
}

/* =============================================================================
   Pill badges — match the iOS NEXT pill, jama'ah pill, Eid emerald
   ============================================================================= */
.lst-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 3px 9px;
    border-radius: 999px;
    line-height: 1.4;
}
.lst-pill-next       { background: var(--ios-copper);     color: #fff; box-shadow: 0 2px 4px rgba(227,100,20,0.35); }
.lst-pill-jamaah     { background: rgba(202,86,15,0.10);  color: var(--ios-copper-deep); border: 1px solid rgba(202,86,15,0.22); }
.lst-pill-jummah     { background: rgba(22,144,60,0.10);  color: #0f7a2e; border: 1px solid rgba(22,144,60,0.25); }
.lst-pill-eid        { background: var(--ios-emerald);    color: #fff; box-shadow: 0 2px 4px rgba(22,144,60,0.30); }
.lst-pill-teal       { background: rgba(15,76,92,0.10);   color: var(--ios-teal); border: 1px solid rgba(15,76,92,0.18); }
.lst-pill-soft       { background: var(--ios-card-darker); color: var(--ios-text-muted); }

/* =============================================================================
   Friendly empty state — used when a list returns no rows
   ============================================================================= */
.lst-empty {
    text-align: center;
    padding: 36px 18px;
    background: var(--ios-card);
    border-radius: 14px;
    box-shadow: var(--ios-shadow);
    color: var(--ios-text-muted);
}
.lst-empty .lst-empty-icon {
    font-size: 2.2rem;
    color: var(--ios-copper);
    opacity: 0.55;
    margin-bottom: 10px;
}
.lst-empty .lst-empty-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--ios-text);
    margin: 0 0 6px;
}
.lst-empty .lst-empty-body {
    font-size: 0.9rem;
    line-height: 1.5;
    max-width: 360px;
    margin: 0 auto;
}

/* =============================================================================
   Cards — soft white surface used by mosque profile, mosque directory, events
   ============================================================================= */
.lst-card {
    background: var(--ios-card);
    border-radius: 14px;
    box-shadow: var(--ios-shadow);
    border: 1px solid var(--ios-border);
}

/* =============================================================================
   Page chrome additions — the deep-teal nav already inherits --brand-primary,
   but we tighten its contrast and active-link colour to match the iOS look.
   ============================================================================= */
.site-nav,
nav.site-nav {
    background: var(--ios-teal);
}
.site-nav .nav-links a.active,
nav.site-nav .nav-links a.active {
    color: #fff;
    background: rgba(227,100,20,0.18);
}
.site-nav .nav-links a:hover,
nav.site-nav .nav-links a:hover {
    color: #fff;
    background: rgba(255,255,255,0.10);
}

/* Body/page bg — keep the brand admin override but render ivory by default. */
body { background: var(--brand-page-bg, var(--ios-ivory)); }

/* Section heading helper — used on mosques.php / events.php / resources.php
   to replace the pale-blue banner with a clean ivory header. */
.lst-page-head {
    background: linear-gradient(180deg, #ffffff 0%, var(--ios-ivory) 100%);
    border-bottom: 1px solid var(--ios-border);
    padding: 36px 20px 28px;
}
.lst-page-head-inner {
    max-width: 1100px;
    margin: 0 auto;
    text-align: center;
}
.lst-page-head h1 {
    font-size: 1.9rem;
    font-weight: 700;
    color: var(--ios-teal);
    margin: 0 0 8px;
    letter-spacing: -0.02em;
}
.lst-page-head .lst-page-sub {
    font-size: 0.95rem;
    color: var(--ios-text-muted);
    margin: 0;
    line-height: 1.5;
}

@media (min-width: 720px) {
    .lst-page-head h1 { font-size: 2.2rem; }
}