/* footer-meta.css — shared styling for the blocks under the timetable on every
   mosque page: the meta strip (timetable source + Jumu'ah facts) and the
   "Explore more" nearby-mosque panel injected by scripts/patch_seo.py.

   Every page keeps its own theme by setting four custom properties on the
   .wq-meta wrapper. The generators read them from the page's existing footer
   chip colour, so nothing here hard-codes a mosque palette:

     --wq-accent        light-mode accent (hex)
     --wq-accent-rgb    same colour as "r,g,b" so rgba() tints work
     --wq-dark          dark-mode accent (hex)
     --wq-dark-rgb      same colour as "r,g,b"

   Loaded after each page's inline <style> so these rules win ties. Source
   names are rendered as themed chips, never as UA-default blue links. */

.wq-meta {
    --wq-accent: #1f4d3a;
    --wq-accent-rgb: 31, 77, 58;
    --wq-dark: #a9cfc1;
    --wq-dark-rgb: 169, 207, 193;

    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 14px 15px 18px;
    background: transparent;
    border-top: 1px solid rgba(var(--wq-accent-rgb), 0.14);
    text-align: left;
    font-size: 13px;
    line-height: 1.45;
}

.wq-meta-item {
    flex: 1 1 240px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 7px;
    padding: 12px 14px;
    border-radius: 14px;
    background: rgba(var(--wq-accent-rgb), 0.05);
    border: 1px solid rgba(var(--wq-accent-rgb), 0.1);
}

.wq-meta-key {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: rgba(var(--wq-accent-rgb), 0.75);
}

.wq-meta-val {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    color: #24303a;
}

.wq-meta-time {
    font-size: 15px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--wq-accent);
}

.wq-meta-note {
    font-size: 13px;
    font-weight: 500;
    color: rgba(36, 48, 58, 0.75);
}

.wq-meta-updated {
    font-size: 12px;
    font-weight: 500;
    color: rgba(36, 48, 58, 0.6);
}

/* Source chips. Deliberately not link-blue: themed pill, no underline. */
.wq-meta .wq-meta-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    border-radius: 999px;
    background: rgba(var(--wq-accent-rgb), 0.1);
    border: 1px solid rgba(var(--wq-accent-rgb), 0.16);
    color: var(--wq-accent);
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: 0.2px;
    text-decoration: none;
}

.wq-meta a.wq-meta-chip {
    color: var(--wq-accent);
    text-decoration: none;
    transition: background 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

.wq-meta a.wq-meta-chip::after {
    content: "\2197";
    font-size: 0.85em;
    line-height: 1;
    opacity: 0.55;
}

.wq-meta a.wq-meta-chip:hover,
.wq-meta a.wq-meta-chip:focus-visible {
    background: rgba(var(--wq-accent-rgb), 0.18);
    border-color: rgba(var(--wq-accent-rgb), 0.28);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(var(--wq-accent-rgb), 0.18);
}

.wq-meta a.wq-meta-chip:focus-visible {
    outline: 2px solid var(--wq-accent);
    outline-offset: 2px;
}

/* Plain (non-clickable) source names such as "manual transcription". */
.wq-meta .wq-meta-chip-plain {
    background: rgba(var(--wq-accent-rgb), 0.07);
    border-style: dashed;
    font-weight: 600;
}

/* The legacy `.footer` band is a padded flex row. Once the source cell moved
   out of it, pages whose remaining cells are all hidden (Ramadan-only notes out
   of season, for instance) were left showing a bare strip of padding above the
   meta strip. Collapse it when every child is inline-hidden. */
.footer:not(:has(> :not([style*="display: none"]):not([style*="display:none"]))) {
    display: none;
}

/* --- Footer notices ---------------------------------------------------- */
/* The remaining `.footer` cells hold year-round notices (parking, Jumu'ah and
   Maghrib jamā'ah offsets, phone numbers). They were bulky white cards with
   dark-red headings; these rules give them the same quiet themed cell as the
   meta strip below. Each page's `.wq-meta` sets the accent properties, so the
   selectors reach for them on `body` too and fall back to a neutral. */
body .footer {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 14px 15px 4px;
    background: transparent;
    border: 0;
}

body .footer .footer-section {
    --wq-notice-accent: var(--wq-accent, #1f4d3a);
    --wq-notice-rgb: var(--wq-accent-rgb, 31, 77, 58);

    flex: 1 1 240px;
    min-width: 0;
    padding: 12px 14px;
    border-radius: 14px;
    background: rgba(var(--wq-notice-rgb), 0.05);
    border: 1px solid rgba(var(--wq-notice-rgb), 0.1);
    text-align: left;
    font-size: 13px;
    line-height: 1.5;
    color: #24303a;
    box-shadow: none;
}

body .footer .footer-section strong {
    color: var(--wq-notice-accent);
    font-weight: 700;
}

/* Notices are authored in <em> but read as plain guidance, not emphasis. */
body .footer .footer-section em {
    font-style: normal;
    color: rgba(36, 48, 58, 0.82);
}

/* Pages hide individual seasonal fragments at runtime (iftar notes, and
   `.ramadan-only` outside Ramadan) by setting display on the fragment itself.
   Drop the line break that followed one, so nothing is left as a blank line. */
body .footer .footer-section em[style*="display: none"] + br,
body .footer .footer-section .ramadan-only[style*="display: none"] + br,
body .footer .footer-section br:has(+ em[style*="display: none"]),
body .footer .footer-section br:has(+ .ramadan-only[style*="display: none"]) {
    display: none;
}

body.dark-mode .footer {
    background: transparent;
}

body.dark-mode .footer .footer-section {
    --wq-notice-accent: var(--wq-dark, #a9cfc1);
    --wq-notice-rgb: var(--wq-dark-rgb, 169, 207, 193);

    background: rgba(var(--wq-notice-rgb), 0.07);
    border-color: rgba(var(--wq-notice-rgb), 0.15);
    color: #e9eff3;
}

body.dark-mode .footer .footer-section em {
    color: rgba(233, 239, 243, 0.82);
}

/* --- Dark mode ------------------------------------------------------- */
body.dark-mode .wq-meta {
    border-top-color: rgba(var(--wq-dark-rgb), 0.18);
}

body.dark-mode .wq-meta-item {
    background: rgba(var(--wq-dark-rgb), 0.07);
    border-color: rgba(var(--wq-dark-rgb), 0.15);
}

body.dark-mode .wq-meta-key {
    color: rgba(var(--wq-dark-rgb), 0.85);
}

body.dark-mode .wq-meta-val {
    color: #e9eff3;
}

body.dark-mode .wq-meta-time {
    color: var(--wq-dark);
}

body.dark-mode .wq-meta-note {
    color: rgba(233, 239, 243, 0.75);
}

body.dark-mode .wq-meta-updated {
    color: rgba(233, 239, 243, 0.6);
}

body.dark-mode .wq-meta .wq-meta-chip,
body.dark-mode .wq-meta a.wq-meta-chip {
    background: rgba(var(--wq-dark-rgb), 0.14);
    border-color: rgba(var(--wq-dark-rgb), 0.24);
    color: var(--wq-dark);
}

body.dark-mode .wq-meta a.wq-meta-chip:hover,
body.dark-mode .wq-meta a.wq-meta-chip:focus-visible {
    background: rgba(var(--wq-dark-rgb), 0.22);
    border-color: rgba(var(--wq-dark-rgb), 0.34);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}

body.dark-mode .wq-meta a.wq-meta-chip:focus-visible {
    outline-color: var(--wq-dark);
}

body.dark-mode .wq-meta .wq-meta-chip-plain {
    background: rgba(var(--wq-dark-rgb), 0.08);
}

/* --- "Explore more" nearby-mosque panel ------------------------------ */
/* Markup comes from scripts/patch_seo.py, which passes the same four theme
   properties in on the wrapper. The panel sits outside `.container`, so it used
   to inherit the body text colour — which stays light-mode dark even in dark
   mode, leaving near-black labels on a dark navy page. Every colour here is
   therefore explicit, and dark mode never relies on `inherit` or on stacked
   opacity. Selectors are one level deeper than the legacy inline block that
   patch_seo used to emit so they win regardless of source order. */
.waqt-nearby {
    --wq-accent: #1f4d3a;
    --wq-accent-rgb: 31, 77, 58;
    --wq-dark: #a9cfc1;
    --wq-dark-rgb: 169, 207, 193;

    margin: 28px auto 0;
    padding: 14px 20px 40px;
    max-width: 860px;
    border-top: 1px solid rgba(var(--wq-accent-rgb), 0.14);
    font-family: inherit;
}

.waqt-nearby .waqt-nearby-title {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(36, 48, 58, 0.62);
    opacity: 1;
    margin: 0 0 12px;
}

.waqt-nearby .waqt-nearby-section {
    margin-bottom: 14px;
}

.waqt-nearby .waqt-nearby-heading {
    font-size: 13px;
    font-weight: 700;
    color: var(--wq-accent);
    opacity: 1;
    margin: 0 0 7px;
}

.waqt-nearby .waqt-nearby-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

/* Sized in px, not rem, and with an explicit line-height: `line-height: normal`
   left descender slack that made one-word chips look like tall bars. */
.waqt-nearby .waqt-nearby-card {
    display: inline-block;
    padding: 4px 11px;
    border-radius: 999px;
    font-size: 12.5px;
    line-height: 1.3;
    font-weight: 600;
    text-decoration: none;
    background: rgba(var(--wq-accent-rgb), 0.07);
    border: 1px solid rgba(var(--wq-accent-rgb), 0.18);
    color: var(--wq-accent);
    opacity: 1;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.waqt-nearby .waqt-nearby-card:hover,
.waqt-nearby .waqt-nearby-card:focus-visible {
    background: rgba(var(--wq-accent-rgb), 0.15);
    border-color: rgba(var(--wq-accent-rgb), 0.3);
    transform: translateY(-1px);
}

.waqt-nearby .waqt-nearby-card:focus-visible {
    outline: 2px solid var(--wq-accent);
    outline-offset: 2px;
}

.waqt-nearby .waqt-nearby-see-all {
    display: inline-block;
    margin-top: 8px;
    font-size: 12.5px;
    font-weight: 600;
    text-decoration: none;
    color: rgba(var(--wq-accent-rgb), 0.85);
    opacity: 1;
}

.waqt-nearby .waqt-nearby-see-all:hover,
.waqt-nearby .waqt-nearby-see-all:focus-visible {
    text-decoration: underline;
}

body.dark-mode .waqt-nearby {
    border-top-color: rgba(var(--wq-dark-rgb), 0.2);
}

body.dark-mode .waqt-nearby .waqt-nearby-title {
    color: rgba(233, 239, 243, 0.72);
}

body.dark-mode .waqt-nearby .waqt-nearby-heading {
    color: var(--wq-dark);
}

/* Near-white labels: the mosque name is the thing being read, so it gets the
   contrast and the theme shows in the pill tint and border. */
body.dark-mode .waqt-nearby .waqt-nearby-card {
    background: rgba(var(--wq-dark-rgb), 0.12);
    border-color: rgba(var(--wq-dark-rgb), 0.32);
    color: #eef3f7;
}

body.dark-mode .waqt-nearby .waqt-nearby-card:hover,
body.dark-mode .waqt-nearby .waqt-nearby-card:focus-visible {
    background: rgba(var(--wq-dark-rgb), 0.22);
    border-color: rgba(var(--wq-dark-rgb), 0.45);
}

body.dark-mode .waqt-nearby .waqt-nearby-card:focus-visible {
    outline-color: var(--wq-dark);
}

body.dark-mode .waqt-nearby .waqt-nearby-see-all {
    color: var(--wq-dark);
}

/* --- Narrow screens -------------------------------------------------- */
@media (max-width: 560px) {
    .wq-meta {
        gap: 8px;
        padding: 12px 12px 16px;
    }

    .wq-meta-item {
        flex: 1 1 100%;
        padding: 11px 13px;
    }

    .waqt-nearby {
        padding-left: 14px;
        padding-right: 14px;
    }
}

/* The chat and qibla buttons are fixed to the bottom-left and stack up to 190px
   above the viewport floor. This panel ends the page, so once the viewport is
   narrow enough for those buttons to sit over it, leave them room — otherwise
   the last few chips and the "See all" link are permanently covered. */
@media (max-width: 1000px) {
    .waqt-nearby {
        padding-bottom: 200px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .wq-meta a.wq-meta-chip,
    .waqt-nearby .waqt-nearby-card {
        transition: none;
    }

    .wq-meta a.wq-meta-chip:hover,
    .wq-meta a.wq-meta-chip:focus-visible,
    .waqt-nearby .waqt-nearby-card:hover,
    .waqt-nearby .waqt-nearby-card:focus-visible {
        transform: none;
    }
}

@media print {
    .wq-meta {
        border-top-color: #ddd;
        padding: 8px 0 0;
    }

    .wq-meta-item {
        background: transparent;
        border-color: #e0e0e0;
    }

    .wq-meta a.wq-meta-chip::after {
        content: "";
    }
}