/**
 * Masjid profile styling — the page-specific pieces only.
 *
 * The shared landing components (breadcrumb band, centred hero, search pill,
 * prose column, directory cards, FAQ, Scholar Verified, app card + phone,
 * donate CTA) and the font/tokens live in the parent design system
 * (assets/css/design-system.css, enqueued before this file). This file keeps
 * what is unique to a masjid profile: the left-aligned hero with the live
 * countdown, today/Jamaah/fasting cards, the monthly table, facilities,
 * Qibla box, the contact form and the masjid card list.
 */

.spt-masjid {
    --spt-primary: #204C93;
    --spt-primary-dark: #16305c;
    --spt-primary-mid: #265aad;
    --spt-accent: #e0902a;
    --spt-accent-light: #f2c14e;
    --spt-ink: #1c2431;
    --spt-heading: #16305c;
    --spt-body: #3a465c;
    --spt-muted: #7a8699;
    --spt-line: #e6e9f0;
    --spt-line-soft: #eef1f6;
    --spt-bg-soft: #fafbfd;

    font-family: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    color: var(--spt-ink);
    -webkit-font-smoothing: antialiased;
}

/* Force Plus Jakarta Sans on every element — the host theme (WoodMart) sets its
   own display font on h1/h2/h3 etc. with higher specificity, which otherwise
   makes masjid headings render in the wrong font and not match the city/hub
   pages. Mirrors how the .sptg hub CSS forces the font. */
.spt-masjid,
.spt-masjid h1, .spt-masjid h2, .spt-masjid h3, .spt-masjid h4,
.spt-masjid p, .spt-masjid a, .spt-masjid span, .spt-masjid div,
.spt-masjid button, .spt-masjid input, .spt-masjid select, .spt-masjid textarea, .spt-masjid li {
    font-family: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif !important;
}

.spt-masjid *,
.spt-masjid *::before,
.spt-masjid *::after { box-sizing: border-box; }

.spt-masjid a { color: var(--spt-primary); text-decoration: none; }

.spt-masjid-inner { max-width: 1120px; margin: 0 auto; padding: 0 24px; }
.spt-masjid-inner--narrow { max-width: 900px; }

/* ===================================================================== *
 *  Hero (mirrors .spt-hdr) — the left-aligned profile hero with the live
 *  countdown card. The directory landing uses the design-system hero.
 * ===================================================================== */
.spt-masjid-hero {
    position: relative; overflow: hidden; color: #fff;
    background: linear-gradient(160deg, var(--spt-primary-mid) 0%, var(--spt-primary) 55%, var(--spt-primary-dark) 100%);
}
.spt-masjid-hero::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(circle at 85% 12%, rgba(255,255,255,0.10), transparent 45%);
}
.spt-masjid-hero .spt-masjid-inner { position: relative; padding-top: 46px; padding-bottom: 52px; }
.spt-masjid-hero-row {
    display: flex; justify-content: space-between; align-items: flex-start;
    flex-wrap: wrap; gap: 28px;
}
.spt-masjid-hero-col { max-width: 620px; flex: 1 1 420px; }
.spt-masjid-badge {
    display: inline-flex !important; align-items: center; gap: 8px;
    background: rgba(255,255,255,0.14); padding: 6px 14px; border-radius: 999px;
    font-size: 13px !important; font-weight: 600 !important; line-height: 1.2 !important;
    color: #fff !important; text-transform: none !important; letter-spacing: normal !important;
}
.spt-masjid-badge svg { width: 16px !important; height: 16px !important; flex: none !important; }
.spt-masjid-name {
    margin: 16px 0 10px; font-size: 40px; font-weight: 800;
    letter-spacing: -0.02em; line-height: 1.06; color: #fff;
}
.spt-masjid-address {
    margin: 0; font-size: 16px; line-height: 1.55; color: rgba(255,255,255,0.82);
    display: flex; align-items: flex-start; gap: 8px;
}
.spt-masjid-address svg { width: 18px; height: 18px; flex: none; margin-top: 3px; opacity: 0.8; }
.spt-masjid-links { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 22px; }
.spt-masjid-links .spt-masjid-btn,
.spt-masjid-links a.spt-masjid-btn {
    display: inline-flex !important; align-items: center !important; gap: 8px !important;
    height: 46px !important; padding: 0 20px !important; border-radius: 13px !important;
    font-size: 14.5px !important; font-weight: 800 !important; line-height: 1 !important;
    text-transform: none !important; letter-spacing: normal !important; cursor: pointer;
    text-decoration: none !important; transition: transform 0.15s, background 0.15s;
}
.spt-masjid-links .spt-masjid-btn svg { width: 18px !important; height: 18px !important; flex: none !important; }
.spt-masjid-links a.spt-masjid-btn--primary,
.spt-masjid-btn--primary { background: #fff !important; color: var(--spt-primary) !important; border: 0 !important; box-shadow: 0 6px 18px rgba(12,28,60,0.24) !important; }
.spt-masjid-btn--primary:hover { background: #eef3fc !important; transform: translateY(-1px); }
.spt-masjid-links a.spt-masjid-btn--ghost,
.spt-masjid-btn--ghost { background: rgba(255,255,255,0.16) !important; color: #fff !important; border: 1px solid rgba(255,255,255,0.26) !important; }
.spt-masjid-btn--ghost:hover { background: rgba(255,255,255,0.26) !important; }

/* Hero dateline (gregorian · hijri) */
.spt-masjid-dateline { margin: 14px 0 0; font-size: 14px; color: rgba(255,255,255,0.7); }

/* Hero countdown card — exact match of the city header countdown */
@keyframes sptmpulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
.spt-masjid-cd {
    text-align: center; background: rgba(255,255,255,0.10); border: 1px solid rgba(255,255,255,0.18);
    border-radius: 22px; padding: 22px 26px 24px; min-width: 290px; flex: 0 1 320px;
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.spt-masjid-cd-head { display: flex; align-items: center; justify-content: center; gap: 8px; }
.spt-masjid-cd-dot { width: 8px; height: 8px; border-radius: 50%; background: #4ade80; box-shadow: 0 0 0 0 rgba(74,222,128,0.6); animation: sptmpulse 1.6s infinite; }
.spt-masjid-cd-label { font-size: 12.5px; color: rgba(255,255,255,0.82); font-weight: 700; text-transform: uppercase; letter-spacing: 0.11em; }
.spt-masjid-cd-clocks { display: flex; gap: 10px; margin-top: 16px; justify-content: center; }
.spt-masjid-cd-clock { background: rgba(255,255,255,0.13); border: 1px solid rgba(255,255,255,0.10); border-radius: 14px; padding: 12px 16px; min-width: 66px; }
.spt-masjid-cd-num { font-size: 34px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.spt-masjid-cd-clock--sec { border-color: rgba(242,193,78,0.35); }
.spt-masjid-cd-clock--sec .spt-masjid-cd-num { color: var(--spt-accent-light); }
.spt-masjid-cd-unit { font-size: 10.5px; color: rgba(255,255,255,0.65); margin-top: 6px; letter-spacing: 0.1em; }
.spt-masjid-cd-colon { display: flex; align-items: center; font-size: 26px; font-weight: 800; color: rgba(255,255,255,0.4); padding-bottom: 14px; }
.spt-masjid-cd-progress { margin-top: 18px; }
.spt-masjid-cd-track { height: 5px; border-radius: 999px; background: rgba(255,255,255,0.14); overflow: hidden; }
.spt-masjid-cd-fill { height: 100%; background: linear-gradient(90deg, #f2c14e, #ffd97a); border-radius: 999px; transition: width 0.9s linear; }
.spt-masjid-cd-ends { display: flex; justify-content: space-between; margin-top: 8px; font-size: 11px; font-weight: 600; color: rgba(255,255,255,0.62); }

/* ===================================================================== *
 *  Sections
 * ===================================================================== */
.spt-masjid-section { padding: 40px 0; }
.spt-masjid-section + .spt-masjid-section { padding-top: 0; }
.spt-masjid-h {
    margin: 0 0 6px; font-size: 24px; font-weight: 800; color: var(--spt-heading);
    letter-spacing: -0.01em;
}
.spt-masjid-sub { margin: 0 0 20px; font-size: 14px; color: var(--spt-muted); }
.spt-masjid-sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 4px; }
.spt-masjid-sec-head .spt-masjid-h { margin: 0; }
.spt-masjid-date { font-size: 14px; font-weight: 600; color: var(--spt-muted); }

/* Today's begins times — full-width tinted band (exact match of .spt-today) */
.spt-masjid-today { background: var(--spt-bg-soft); border-bottom: 1px solid var(--spt-line-soft); }
.spt-masjid-today .spt-masjid-inner { padding: 34px 24px 40px; }
.spt-masjid-today-head { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.spt-masjid-today-heading { margin: 0; font-size: 22px; font-weight: 800; line-height: 1.25; color: var(--spt-heading); }
.spt-masjid-today-date { font-size: 13.5px; font-weight: 600; color: var(--spt-muted); }
.spt-masjid-today-cards { display: flex; gap: 14px; flex-wrap: wrap; }
.spt-masjid-today-card { flex: 1 1 110px; min-width: 100px; background: #fff; border: 1.5px solid var(--spt-line); border-radius: 16px; padding: 18px 10px 15px; text-align: center; position: relative; }
.spt-masjid-today-card.is-next { background: #eef3fc; border-color: var(--spt-primary); }
.spt-masjid-today-badge { position: absolute; top: -9px; left: 50%; transform: translateX(-50%); background: var(--spt-primary); color: #fff; font-size: 9px; font-weight: 700; letter-spacing: 0.06em; padding: 3px 10px; border-radius: 999px; white-space: nowrap; }
.spt-masjid-today-icon { width: 46px; height: 46px; margin: 0 auto; border-radius: 50%; background: #eef3fc; color: var(--spt-primary); display: flex; align-items: center; justify-content: center; }
.spt-masjid-today-card.is-next .spt-masjid-today-icon { background: #dfeafb; }
.spt-masjid-today-icon svg { width: 26px; height: 26px; }
.spt-masjid-today-name { font-weight: 600; color: var(--spt-primary); margin-top: 8px; font-size: 14.5px; }
.spt-masjid-today-time { font-weight: 800; color: var(--spt-heading); font-size: 19px; margin-top: 3px; font-variant-numeric: tabular-nums; }

/* Jamaah (congregation) times row — the masjid-specific addition */
.spt-masjid-jamaah-row { display: flex; gap: 12px; flex-wrap: wrap; }
.spt-masjid-jcard { flex: 1 1 96px; min-width: 90px; background: #fff; border: 1.5px solid var(--spt-line); border-radius: 14px; padding: 14px 10px; text-align: center; }
.spt-masjid-jcard-name { font-size: 12.5px; font-weight: 700; color: var(--spt-primary); text-transform: uppercase; letter-spacing: 0.04em; }
.spt-masjid-jcard-time { margin-top: 5px; font-size: 20px; font-weight: 800; color: var(--spt-accent); font-variant-numeric: tabular-nums; line-height: 1; }
.spt-masjid-jcard-time.is-empty { color: var(--spt-line); }
.spt-masjid-jamaah-empty { color: var(--spt-muted); font-size: 15px; margin: 0; }

/* Jumu'ah panel (gold-accented) */
.spt-masjid-jumuah {
    display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
    background: linear-gradient(135deg, #fff, #fffaf0);
    border: 1.5px solid #f2e2c0; border-radius: 16px; padding: 20px 24px;
}
.spt-masjid-jumuah-icon {
    width: 46px; height: 46px; flex: none; border-radius: 13px;
    background: rgba(224,144,42,0.12); color: var(--spt-accent);
    display: flex; align-items: center; justify-content: center;
}
.spt-masjid-jumuah-icon svg { width: 24px; height: 24px; }
.spt-masjid-jumuah-label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--spt-muted); }
.spt-masjid-jumuah-times { margin-top: 3px; font-size: 22px; font-weight: 800; color: var(--spt-heading); font-variant-numeric: tabular-nums; }
.spt-masjid-jumuah-times span + span::before { content: "·"; margin: 0 10px; color: var(--spt-accent); }

/* Monthly table (mirrors monthly-v2) */
.spt-masjid-table-frame { border: 1.5px solid var(--spt-line); border-radius: 16px; overflow: hidden; }
.spt-masjid-monthly-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.spt-masjid-monthly-table thead th {
    background: #f4f6fb; color: var(--spt-heading); font-weight: 700; font-size: 12px;
    text-transform: uppercase; letter-spacing: 0.05em; padding: 12px 10px; text-align: center;
}
.spt-masjid-monthly-table thead th:first-child { text-align: left; padding-left: 18px; }
.spt-masjid-monthly-table tbody td { padding: 10px; text-align: center; font-variant-numeric: tabular-nums; color: var(--spt-body); border-top: 1px solid var(--spt-line-soft); }
.spt-masjid-monthly-table tbody td:first-child { text-align: left; padding-left: 18px; font-weight: 600; color: var(--spt-heading); }
.spt-masjid-monthly-table tbody tr:nth-child(odd) td { background: #fbfcfe; }
.spt-masjid-monthly-table tbody tr.is-today td { background: #eef3fc; font-weight: 700; color: var(--spt-primary-dark); }

/* Facilities chips */
.spt-masjid-facilities-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.spt-masjid-facilities-list li {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--spt-bg-soft); border: 1px solid var(--spt-line);
    border-radius: 999px; padding: 8px 16px; font-size: 14px; font-weight: 600; color: var(--spt-body);
}
.spt-masjid-facilities-list li::before {
    content: ""; width: 16px; height: 16px; flex: none; border-radius: 50%;
    background: rgba(32,76,147,0.12) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23204C93' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/11px no-repeat;
}

/* About (prose) */
.spt-masjid-about { color: var(--spt-body); font-size: 16px; line-height: 1.7; }
.spt-masjid-about h2, .spt-masjid-about h3 { color: var(--spt-heading); }

/* Intro paragraph (mirrors .spt-intro) */
.spt-masjid-intro-p { font-size: 17px; line-height: 1.7; color: var(--spt-body); margin: 0; max-width: 820px; }

/* Fasting cards (mirrors .spt-fast) */
.spt-masjid-fast-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
.spt-masjid-fast-card { background: linear-gradient(155deg, var(--spt-primary-mid), var(--spt-primary)); color: #fff; border-radius: 16px; padding: 22px 24px; }
.spt-masjid-fast-lab { font-size: 12.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.85; margin: 0 0 6px; }
.spt-masjid-fast-time { font-size: 34px; font-weight: 800; margin: 0; line-height: 1; color: #fff; font-variant-numeric: tabular-nums; }
.spt-masjid-fast-jumuah { font-size: 14.5px; line-height: 1.6; color: var(--spt-body); background: var(--spt-bg-soft); border: 1px solid var(--spt-line); border-radius: 12px; padding: 14px 18px; margin: 16px 0 0; }

/* Article (mirrors .spt-article) */
.spt-masjid-article-p { font-size: 16.5px; line-height: 1.72; color: var(--spt-body); margin: 0 0 16px; max-width: 820px; }
.spt-masjid-article-p:last-child { margin-bottom: 0; }
.spt-masjid-article-p a { font-weight: 700; color: var(--spt-primary); }
.spt-masjid-article-p a:hover { text-decoration: underline; }

/* Qibla box (mirrors .spt-qibla) */
.spt-masjid-qibla { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; background: var(--spt-bg-soft); border: 1px solid #eaedf3; border-radius: 18px; padding: 26px 30px; }
.spt-masjid-qibla-compass { flex: none; }
.spt-masjid-qibla-compass .ring { fill: #fff; stroke: #dfe4ee; stroke-width: 2; }
.spt-masjid-qibla-compass .center { fill: var(--spt-heading); }
.spt-masjid-qibla-compass .needle { stroke: var(--spt-accent); stroke-width: 4; stroke-linecap: round; }
.spt-masjid-qibla-compass .lab { text-anchor: middle; font-size: 12px; font-weight: 700; fill: var(--spt-muted); }
.spt-masjid-qibla-content { flex: 1 1 320px; min-width: 240px; }
.spt-masjid-qibla-h { font-size: 22px; font-weight: 800; color: var(--spt-heading); margin: 0 0 6px; }
.spt-masjid-qibla-body { font-size: 16.5px; line-height: 1.65; color: var(--spt-body); margin: 0; }
.spt-masjid-qibla-body .deg { color: var(--spt-primary); font-weight: 800; }

/* Contact / claim — clean light card (a form reads better light than on the
   dark CTA gradient). All field rules carry !important to neutralise the host
   theme's global form styling, the same way the header widget does. */
.spt-masjid-contact {
    background: var(--spt-bg-soft);
    border: 1.5px solid var(--spt-line);
    border-radius: 20px;
    padding: 32px;
}
.spt-masjid-contact-head { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 22px; }
.spt-masjid-contact-icon {
    width: 48px; height: 48px; flex: none; border-radius: 14px;
    background: #eef3fc; color: var(--spt-primary);
    display: flex; align-items: center; justify-content: center;
}
.spt-masjid-contact-icon svg { width: 26px; height: 26px; }
.spt-masjid-contact h2 { margin: 0 0 4px; font-size: 22px; font-weight: 800; color: var(--spt-heading); }
.spt-masjid-contact-lead { margin: 0; font-size: 15px; line-height: 1.55; color: var(--spt-muted); max-width: 620px; }

.spt-masjid-form { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.spt-masjid-form label {
    display: flex !important; flex-direction: column !important; gap: 7px !important;
    margin: 0 !important; font-size: 12px !important; font-weight: 700 !important;
    text-transform: uppercase !important; letter-spacing: 0.06em !important;
    color: var(--spt-muted) !important; text-align: left !important;
}
.spt-masjid-form label.spt-masjid-form-full { grid-column: 1 / -1; }
.spt-masjid-form label > span { display: block; }
.spt-masjid-form input,
.spt-masjid-form select,
.spt-masjid-form textarea {
    font-family: inherit !important; font-size: 15px !important; font-weight: 500 !important;
    color: var(--spt-ink) !important; background: #fff !important;
    border: 1.5px solid var(--spt-line) !important; border-radius: 11px !important;
    padding: 12px 14px !important; width: 100% !important; height: auto !important;
    min-height: 0 !important; box-shadow: none !important; margin: 0 !important;
    line-height: 1.3 !important; -webkit-appearance: none !important; appearance: none !important;
    text-transform: none !important; letter-spacing: normal !important;
}
.spt-masjid-form select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237a8699' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important; background-position: right 14px center !important;
    background-size: 16px !important; padding-right: 40px !important;
}
.spt-masjid-form input:focus,
.spt-masjid-form select:focus,
.spt-masjid-form textarea:focus {
    border-color: var(--spt-primary) !important; outline: none !important;
    box-shadow: 0 0 0 3px rgba(32,76,147,0.12) !important;
}
.spt-masjid-form input::placeholder,
.spt-masjid-form textarea::placeholder { color: #9aa6ba !important; opacity: 1; }
.spt-masjid-form textarea { resize: vertical !important; min-height: 110px !important; }
.spt-masjid-form .spt-masjid-submit,
.spt-masjid-form button.spt-masjid-submit {
    grid-column: 1 / -1; justify-self: start; display: inline-flex !important;
    align-items: center !important; height: 50px !important; padding: 0 34px !important;
    background: var(--spt-accent) !important; color: #fff !important; border: 0 !important;
    border-radius: 999px !important; font-family: inherit !important; font-size: 15px !important;
    font-weight: 700 !important; line-height: 1 !important; text-transform: none !important;
    letter-spacing: normal !important; box-shadow: 0 6px 16px rgba(224,144,42,0.28) !important;
    cursor: pointer !important; transition: background 0.15s, transform 0.15s;
}
.spt-masjid-form .spt-masjid-submit:hover { background: #cf8020 !important; transform: translateY(-1px); }
.spt-masjid-form .spt-masjid-submit:disabled { opacity: 0.6 !important; cursor: default !important; transform: none; }
.spt-masjid-form-status { grid-column: 1 / -1; margin: 0; font-size: 14px; font-weight: 600; color: var(--spt-primary-dark); }
.spt-masjid-hp { position: absolute; left: -9999px; }

/* ===================================================================== *
 *  "Mosques in [City]" card list (mirrors .spt-dir / .spt-nearby cards)
 * ===================================================================== */
.spt-masjid-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.spt-masjid-card {
    display: block; background: #fff; border: 1.5px solid var(--spt-line); border-radius: 16px;
    overflow: hidden; color: inherit; transition: box-shadow 0.15s, transform 0.15s, border-color 0.15s;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
}
.spt-masjid-card:hover { box-shadow: 0 12px 30px rgba(16,28,54,0.12); transform: translateY(-2px); border-color: #cdd8ec; }
.spt-masjid-card-img { height: 150px; background: #eef3fc; }
.spt-masjid-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.spt-masjid-card-body { padding: 16px 18px; }
.spt-masjid-card-body h3 { margin: 0 0 4px; font-size: 17px; font-weight: 800; color: var(--spt-heading); }
.spt-masjid-card-area { margin: 0; font-size: 13px; color: var(--spt-muted); }
.spt-masjid-card-jamaah {
    margin: 12px 0 0; display: inline-flex; align-items: center; gap: 6px;
    background: #eef3fc; color: var(--spt-primary); font-size: 12.5px; font-weight: 700;
    padding: 5px 12px; border-radius: 999px; font-variant-numeric: tabular-nums;
}
.spt-masjid-empty { color: var(--spt-muted); font-size: 15px; padding: 8px 0; }

/* OpenStreetMap ODbL attribution (imported masjids) */
.spt-masjid-credit { margin: 14px 0 0; font-size: 12px; color: var(--spt-muted); }
.spt-masjid-credit a { color: var(--spt-muted); text-decoration: underline; }

/* City-page "Mosques in [City]" section wrapper */
.spt-masjid-city-section { margin-top: 40px; }
.spt-masjid-section-title { font-size: 24px; font-weight: 800; color: var(--spt-heading); margin: 0 0 18px; }

/* ===================================================================== *
 *  Full-width host — let the profile span the page like the city pages.
 *  The plugin single/archive templates keep the theme header/footer but the
 *  theme still wraps content in a centred, padded `.container`. Neutralise
 *  it on masjid pages only (scoped to the body classes, so other themes are
 *  unaffected) so the hero/crumbs go edge-to-edge and inner sections
 *  re-centre via .spt-masjid-inner / the design-system containers.
 * ===================================================================== */
.single-prayer_masjid main#main-content.container,
.single-prayer_masjid #main-content.container,
.post-type-archive-prayer_masjid main#main-content.container,
.post-type-archive-prayer_masjid #main-content.container {
    max-width: 100%;
    padding-left: 0;
    padding-right: 0;
    padding-top: 0;
    padding-bottom: 0;
}
.spt-masjid { overflow-x: hidden; }

/* ===================================================================== *
 *  Masjid directory promo card — the internal link into /masjid/ that the
 *  hub, country and UK landing pages carry. WoodMart styles bare <a> so the
 *  colour/decoration rules need !important, as everywhere else in this file.
 * ===================================================================== */
.spt-masjid-promo { margin: 8px auto 40px; }
.spt-masjid-promo-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px 22px;
    background: #fff;
    border: 1px solid #e6e9f0;
    border-radius: 18px;
    box-shadow: 0 10px 30px rgba(16, 28, 54, .08);
    text-decoration: none !important;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.spt-masjid-promo-card:hover {
    border-color: #204C93;
    box-shadow: 0 16px 40px rgba(16, 28, 54, .16);
    transform: translateY(-2px);
}
.spt-masjid-promo-icon {
    flex: none;
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #eef3fc;
    border-radius: 12px;
    color: #204C93 !important;
}
.spt-masjid-promo-icon svg { width: 24px; height: 24px; }
.spt-masjid-promo-text { flex: 1; min-width: 0; display: block; }
.spt-masjid-promo-text strong {
    display: block;
    font-size: 17px;
    font-weight: 800;
    color: #16305c !important;
    margin-bottom: 3px;
}
.spt-masjid-promo-text span {
    display: block;
    font-size: 14.5px;
    line-height: 1.5;
    color: #5a6a85 !important;
}
.spt-masjid-promo-arrow {
    flex: none;
    font-size: 20px;
    font-weight: 700;
    color: #204C93 !important;
}

/* "Full monthly timetable" link under the 7-day table. */
.spt-masjid-monthly-more { margin: 16px 0 0; }
.spt-masjid-monthly-more a {
    font-size: 15px;
    font-weight: 700;
    color: #204C93 !important;
    text-decoration: none !important;
}
.spt-masjid-monthly-more a:hover { text-decoration: underline !important; }

/* City-page masjid block (auto-injected CPT list). */
.spt-masjid-city-intro {
    font-size: 15.5px;
    line-height: 1.65;
    color: #5a6a85;
    margin: 0 0 18px;
    max-width: 760px;
}
.spt-masjid-city-all { margin: 18px 0 0; }
.spt-masjid-city-all a {
    font-size: 15px;
    font-weight: 700;
    color: #204C93 !important;
    text-decoration: none !important;
}
.spt-masjid-city-all a:hover { text-decoration: underline !important; }

/* ===================================================================== *
 *  Responsive
 * ===================================================================== */
@media (max-width: 620px) {
    .spt-masjid-promo-card { padding: 16px 16px; gap: 12px; }
    .spt-masjid-promo-arrow { display: none; }
}
@media (max-width: 860px) {
    .spt-masjid-times-grid { grid-template-columns: repeat(2, 1fr); }
    .spt-masjid-name { font-size: 30px; }
    .spt-masjid-hero .spt-masjid-inner { padding-top: 34px; padding-bottom: 38px; }
    .spt-masjid-form { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
    .spt-masjid-times-grid { grid-template-columns: 1fr; }
}