/* ================================================================
   CITY PAGE — Additional Styles
   Appended to main style.css or loaded separately
   ================================================================ */

/* ---- City Hero ---- */
.city-hero {
    background: linear-gradient(135deg, #083b32 0%, #0c6b58 40%, #0e7d66 100%);
    color: #fff;
    padding: 2rem 0 3.5rem;
    position: relative;
}
.city-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    opacity: .04;
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 0L60 30L30 60L0 30Z' fill='none' stroke='white' stroke-width='.5'/%3E%3C/svg%3E");
    background-size: 60px 60px;
    pointer-events: none;
}

/* Breadcrumb */
.city-breadcrumb {
    margin-bottom: 1.5rem;
}
.city-breadcrumb .breadcrumb {
    background: none;
    padding: 0;
    margin: 0;
    font-size: .8125rem;
}
.city-breadcrumb .breadcrumb-item a {
    color: rgba(255,255,255,.55);
    text-decoration: none;
}
.city-breadcrumb .breadcrumb-item a:hover { color: #fff; }
.city-breadcrumb .breadcrumb-item.active { color: rgba(255,255,255,.8); }
.city-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
    color: rgba(255,255,255,.3);
}

.city-hero__title {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -.02em;
    margin-bottom: .75rem;
}
.city-hero__subtitle {
    font-size: .9375rem;
    color: rgba(255,255,255,.7);
    margin-bottom: 1.5rem;
    max-width: 540px;
}

/* Prayer card on city page — reuse main styles but with fixed bg */
.prayer-card--city {
    box-shadow: 0 12px 48px rgba(0,0,0,.25);
}


/* ---- City Stats sidebar ---- */
.city-stats {
    background: rgba(255,255,255,.06);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: var(--radius-xl, 28px);
    padding: 1.75rem;
}
.city-stats__title {
    font-size: 1.125rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 1.25rem;
}
.city-stats__grid {
    display: flex;
    flex-direction: column;
    gap: .75rem;
}
.city-stat {
    display: grid;
    grid-template-columns: 32px 1fr;
    grid-template-rows: auto auto;
    column-gap: .75rem;
    row-gap: .1rem;
    align-items: center;
    padding: .6rem .75rem;
    background: rgba(255,255,255,.04);
    border-radius: var(--radius-sm, 8px);
    border: 1px solid rgba(255,255,255,.06);
}
.city-stat__icon {
    grid-row: 1 / 3;
    font-size: 1.125rem;
    color: var(--clr-accent, #c8992c);
    display: flex;
    align-items: center;
    justify-content: center;
}
.city-stat__label {
    font-size: .6875rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: rgba(255,255,255,.4);
    font-weight: 600;
}
.city-stat__value {
    font-size: .875rem;
    font-weight: 600;
    color: rgba(255,255,255,.9);
}


/* ================================================================
   WEEKLY TIMETABLE
   ================================================================ */
.section-weekly {
    padding: var(--section-py, 5rem) 0;
    background: var(--clr-surface, #f5f6f9);
}

.weekly-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--clr-white, #fff);
    border-radius: var(--radius-lg, 20px);
    overflow: hidden;
    box-shadow: var(--shadow-sm, 0 1px 3px rgba(26,30,44,.06));
    border: 1px solid var(--clr-border, #e2e4ea);
}
.weekly-table thead th {
    background: var(--clr-primary, #0c6b58);
    color: #fff;
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    font-weight: 700;
    padding: .875rem .75rem;
    border: none;
    white-space: nowrap;
}
.weekly-table tbody td {
    padding: .75rem;
    font-size: .875rem;
    font-weight: 500;
    color: var(--clr-body, #3d4255);
    border-bottom: 1px solid var(--clr-border, #e2e4ea);
    font-variant-numeric: tabular-nums;
}
.weekly-table tbody tr:last-child td {
    border-bottom: none;
}

.weekly-table__date {
    font-weight: 700;
    color: var(--clr-dark, #1a1e2c);
    white-space: nowrap;
}
.weekly-table__day {
    white-space: nowrap;
}

/* Today highlight */
.weekly-table__today {
    background: var(--clr-primary-light, #e8f5f1) !important;
}
.weekly-table__today td {
    color: var(--clr-primary-dark, #094d40);
    font-weight: 700;
}

/* Friday highlight */
.badge-jummah {
    display: inline-block;
    background: var(--clr-accent, #c8992c);
    color: #fff;
    font-size: .625rem;
    font-weight: 700;
    padding: .15rem .4rem;
    border-radius: 100px;
    text-transform: uppercase;
    letter-spacing: .04em;
    vertical-align: middle;
    margin-left: .25rem;
}


/* ================================================================
   PRAYER NOTE CARD
   ================================================================ */
.section-prayer-note {
    padding: 2rem 0;
}
.prayer-note-card {
    display: flex;
    gap: 1.25rem;
    align-items: flex-start;
    padding: 1.5rem 1.75rem;
    background: var(--clr-accent-light, #fdf6e3);
    border: 1px solid rgba(200,153,44,.2);
    border-radius: var(--radius-lg, 20px);
    border-left: 4px solid var(--clr-accent, #c8992c);
}
.prayer-note-card__icon {
    flex-shrink: 0;
    font-size: 1.5rem;
    color: var(--clr-accent, #c8992c);
    margin-top: .15rem;
}
.prayer-note-card__title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--clr-dark, #1a1e2c);
    margin-bottom: .5rem;
}
.prayer-note-card__content p {
    font-size: .875rem;
    color: var(--clr-body, #3d4255);
    line-height: 1.7;
    margin: 0;
}


/* ================================================================
   MOSQUE CARDS
   ================================================================ */
.section-mosques {
    padding: var(--section-py, 5rem) 0;
    background: var(--clr-surface, #f5f6f9);
}

.mosque-card {
    display: flex;
    gap: 1.25rem;
    padding: 1.5rem;
    background: var(--clr-white, #fff);
    border: 1px solid var(--clr-border, #e2e4ea);
    border-radius: var(--radius-lg, 20px);
    height: 100%;
    transition: border-color .2s, box-shadow .2s;
}
.mosque-card:hover {
    border-color: var(--clr-primary, #0c6b58);
    box-shadow: var(--shadow-md, 0 4px 16px rgba(26,30,44,.08));
}
.mosque-card__icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--clr-primary-light, #e8f5f1);
    color: var(--clr-primary, #0c6b58);
    border-radius: var(--radius-md, 12px);
    font-size: 1.25rem;
}
.mosque-card__name {
    font-size: 1rem;
    font-weight: 700;
    color: var(--clr-dark, #1a1e2c);
    margin: 0 0 .35rem;
}
.mosque-card__address {
    font-size: .8125rem;
    color: var(--clr-muted, #7c8194);
    margin: 0 0 .75rem;
}
.mosque-card__address i { color: var(--clr-primary, #0c6b58); }
.mosque-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}
.mosque-card__tag {
    font-size: .75rem;
    font-weight: 600;
    color: var(--clr-body, #3d4255);
    background: var(--clr-surface, #f5f6f9);
    padding: .25rem .6rem;
    border-radius: 100px;
    border: 1px solid var(--clr-border, #e2e4ea);
}
.mosque-card__tag i {
    font-size: .6875rem;
    opacity: .6;
}


/* ================================================================
   CITY ABOUT SECTION
   ================================================================ */
.section-city-about {
    padding: var(--section-py, 5rem) 0;
}
.section-city-about p {
    font-size: .9375rem;
    line-height: 1.75;
    color: var(--clr-body, #3d4255);
}


/* ---- Ramadan CTA card ---- */
.city-ramadan-card {
    background: linear-gradient(135deg, #3b1a70 0%, #4c2882 100%);
    color: #fff;
    border-radius: var(--radius-xl, 28px);
    padding: 2rem;
    position: relative;
    overflow: hidden;
}
.city-ramadan-card::before {
    content: '';
    position: absolute;
    inset: 0;
    opacity: .06;
    background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='20' cy='20' r='6' fill='none' stroke='white' stroke-width='.3'/%3E%3C/svg%3E");
    pointer-events: none;
}
.city-ramadan-card__header {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-bottom: .75rem;
}
.city-ramadan-card__header i {
    font-size: 1.5rem;
    color: var(--clr-accent, #c8992c);
}
.city-ramadan-card__header h3 {
    font-size: 1.25rem;
    font-weight: 800;
    margin: 0;
}
.city-ramadan-card p {
    font-size: .875rem;
    color: rgba(255,255,255,.7);
    margin-bottom: 1.25rem;
}
.city-ramadan-card__stats {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    margin-bottom: 1.25rem;
}
.city-ramadan-stat {
    display: flex;
    justify-content: space-between;
    padding: .5rem .75rem;
    background: rgba(255,255,255,.08);
    border-radius: var(--radius-sm, 8px);
}
.city-ramadan-stat__label {
    font-size: .8125rem;
    color: rgba(255,255,255,.5);
    font-weight: 500;
}
.city-ramadan-stat__value {
    font-size: .875rem;
    font-weight: 700;
    color: #fff;
    font-variant-numeric: tabular-nums;
}


/* ================================================================
   CITY FAQ
   ================================================================ */
.section-city-faq {
    padding: var(--section-py, 5rem) 0;
    background: var(--clr-surface, #f5f6f9);
}


/* ================================================================
   NEARBY CITIES
   ================================================================ */
.section-nearby {
    padding: var(--section-py, 5rem) 0;
}
.city-card__offset {
    display: block;
    font-size: .6875rem;
    color: var(--clr-accent, #c8992c);
    font-weight: 600;
    margin-top: .15rem;
}


/* ================================================================
   RESPONSIVE — City page overrides
   ================================================================ */
@media (max-width: 991.98px) {
    .city-hero { padding: 1.5rem 0 2.5rem; }
    .city-stats { margin-top: 1rem; }
}

@media (max-width: 575.98px) {
    .city-hero__title { font-size: 1.5rem; }
    .prayer-note-card { flex-direction: column; gap: .75rem; }
    .mosque-card { flex-direction: column; gap: .75rem; }
    .city-ramadan-stat { flex-direction: column; gap: .15rem; }
}


/* ================================================================
   ALL CITIES HUB — /prayer-times/
   ================================================================ */
.all-cities__country {
    margin-bottom: 3rem;
}
.all-cities__country-title {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--clr-dark, #1a1e2c);
    margin-bottom: 1.5rem;
    padding-bottom: .75rem;
    border-bottom: 2px solid var(--clr-border, #e2e4ea);
}
.all-cities__region {
    margin-bottom: 2rem;
}
.all-cities__region-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--clr-primary, #0c6b58);
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-bottom: .75rem;
}

/* ============================================================
   v3 — month timetable, method switcher, info pages, print
   ============================================================ */
.city-hero--compact { padding: 2.25rem 0 2.75rem; }

.city-hero__today { max-width: 620px; font-size: 1rem; line-height: 1.65; color: rgba(255,255,255,.82); }
.city-hero__today strong { color: #fff; font-weight: 700; }
.city-hero__today .link-light { color: var(--clr-accent, #c8992c) !important; white-space: nowrap; }

.timetable-actions { display: flex; flex-wrap: wrap; gap: .5rem; }

.month-table { font-variant-numeric: tabular-nums; }
.month-table tbody td { padding-top: .6rem; padding-bottom: .6rem; }
.month-table__hijri {
    display: block;
    font-size: .6875rem;
    font-weight: 500;
    color: var(--clr-muted, #7c8194);
}
.month-table tr.weekly-table__today .month-table__hijri { color: var(--clr-primary-dark, #094d40); }

.timetable-note {
    font-size: .8125rem;
    color: var(--clr-muted, #7c8194);
    margin: 1rem 0 0;
}

.month-links {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem .9rem;
    margin-top: 1.25rem;
    font-size: .875rem;
}
.month-links__label { color: var(--clr-muted, #7c8194); font-weight: 600; }

.method-box {
    margin-top: 2rem;
    padding: 1.25rem 1.5rem;
    background: var(--clr-white, #fff);
    border: 1px solid var(--clr-border, #e2e4ea);
    border-radius: 14px;
}
.method-box__title { font-size: 1rem; font-weight: 700; color: var(--clr-dark, #1a1e2c); margin-bottom: .35rem; }
.method-box__text { font-size: .875rem; color: var(--clr-body, #3d4255); margin-bottom: 1rem; }

.method-switcher { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .75rem 1rem; }
.method-switcher__field { display: flex; flex-direction: column; gap: .25rem; min-width: 220px; flex: 1 1 260px; }
.method-switcher__field label { font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--clr-muted, #7c8194); }

.method-notice {
    font-size: .875rem;
    background: var(--clr-accent-light, #fdf6e3);
    border-left: 3px solid var(--clr-accent, #c8992c);
    padding: .6rem .9rem;
    border-radius: 6px;
    margin-bottom: 1rem;
}

/* Info pages (About, Contact, Privacy) */
.info-page { padding: 3rem 0 4rem; }
.info-page h2 { font-size: 1.25rem; font-weight: 700; color: var(--clr-dark, #1a1e2c); margin: 2rem 0 .75rem; }
.info-page h2:first-child { margin-top: 0; }
.info-page p, .info-page li { color: var(--clr-body, #3d4255); line-height: 1.7; }
.info-page__email { font-size: 1.125rem; font-weight: 600; }
.info-page__table { font-size: .875rem; }

/* Print: just the timetable */
@media print {
    .site-header, .site-footer, .city-breadcrumb, .timetable-actions, .method-box, .month-links,
    .section-prayer-note, .section-mosques, .section-city-about, .section-city-faq, .section-nearby,
    .city-stats, .prayer-card, .cookie-banner { display: none !important; }
    .city-hero { background: none !important; color: #000 !important; padding: 0 0 .5rem !important; }
    .city-hero::before { display: none !important; }
    .city-hero__title, .city-hero__today, .city-hero__today strong { color: #000 !important; }
    .section-weekly { background: none !important; padding: 0 !important; }
    .weekly-table { border: 1px solid #999 !important; font-size: 10pt; }
    .weekly-table thead th { background: #eee !important; color: #000 !important; }
    .weekly-table tbody td { padding: 2px 6px !important; }
    .weekly-table__today { background: #e8f5f1 !important; }
    a[href]::after { content: none !important; }
}

/* v4 — Ramadan, mosques, year overview */
.ramadan-hero { background: linear-gradient(135deg, #2a1650 0%, #4c2882 45%, #5d3497 100%); }
.ramadan-table tbody tr.ramadan-table__last10 td { background: var(--clr-ramadan-light, #f3edfc); }
.ramadan-table tbody tr.weekly-table__today td { background: var(--clr-primary-light, #e8f5f1); }
.section-year { padding: 3rem 0; }
.year-table td, .year-table th { white-space: nowrap; }
.mosque-hero__note { font-size: .8125rem; color: rgba(255,255,255,.7); margin-top: .75rem; }
.mosque-card__text { font-size: .875rem; color: var(--clr-body, #3d4255); margin: .25rem 0 .75rem; }
.mosque-card__name a { color: inherit; }
.mosque-card__name a:hover { color: var(--clr-primary, #0c6b58); }
@media print {
    .section-year, .ramadan-hero::before { display: none !important; }
    .ramadan-hero { background: none !important; }
    .ramadan-table tbody tr.ramadan-table__last10 td { background: #f3edfc !important; }
}