body.public-page {
  --bg: #fbfcfa;
  --panel: #ffffff;
  --panel-soft: #f5f8f5;
  --ink: #102a25;
  --muted: #5d6763;
  --line: #dfe4df;
  --brand: #0c6a57;
  --brand-strong: #064d42;
  --brand-soft: #edf6f1;
  --focus: #b87900;
  --shadow: 0 5px 14px rgb(20 56 45 / 10%);
  color-scheme: light;
  background: #fbfcfa;
  color: var(--ink);
  font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.ui-icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  flex: 0 0 auto;
  overflow: visible;
  vertical-align: -.125em;
}

.link-icon { width: .9em; height: .9em; }

.public-page .wrap {
  width: min(92rem, calc(100% - 4rem));
}

.public-page header.site {
  min-height: 74px;
  border-color: #e3e6e2;
  background: #fff;
}

.public-page header.site .wrap {
  min-height: 74px;
}

.site-brand {
  display: inline-flex;
  align-items: center;
  gap: .8rem;
  color: var(--ink);
  text-decoration: none;
}

.brand-name {
  color: var(--ink);
  font-size: 1.72rem;
  font-weight: 680;
  letter-spacing: -.025em;
  white-space: nowrap;
}

.brand-mark {
  display: block;
  width: 2rem;
  height: 3rem;
  object-fit: contain;
}


.public-page .site-nav {
  gap: clamp(1.8rem, 4vw, 3.7rem);
  font-size: .98rem;
}

.public-page .site-nav a {
  color: #171b19;
  font-weight: 620;
  text-decoration: none;
  white-space: nowrap;
}

.public-page .site-nav a:hover {
  color: var(--brand-strong);
}

.directory-home main.wrap,
.mosques-page main.wrap {
  width: 100%;
  max-width: none;
  padding: 0 0 1.1rem;
}

.home-hero {
  position: relative;
  min-height: 409px;
  z-index: 2;
  padding: 2rem max(1rem, calc((100vw - 72rem) / 2)) 1.7rem;
  border-bottom: 1px solid var(--line);
  background:
    radial-gradient(circle, rgb(22 95 75 / 5%) 1px, transparent 1.5px) 0 0 / 18px 18px,
    #fdfdfa;
  text-align: center;
  overflow: visible;
}


.hero-copy,
.home-search {
  position: relative;
}

.hero-ornament {
  display: block;
  width: 2rem;
  height: 2rem;
  margin: 0 auto .25rem;
  color: #d79b18;
}

body.directory-home .hero-copy h1 {
  max-width: none;
  margin: 0;
  color: #053f35;
  font-size: clamp(2.45rem, 3.3vw, 2.85rem);
  font-weight: 650;
  line-height: 1.1;
  letter-spacing: -.035em;
}

body.directory-home .hero-copy p {
  max-width: none;
  margin: .7rem auto 0;
  color: #464f4b;
  font-size: 1.06rem;
  line-height: 1.55;
}

.home-search {
  max-width: 63rem;
  margin: 1.45rem auto 0;
}

.search-bar,
.directory-search-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  min-height: 83px;
  padding: .65rem;
  border: 1px solid #d6dbd7;
  border-radius: 13px;
  background: #fff;
  box-shadow: var(--shadow);
  text-align: left;
}

body.directory-home .search-field,
body.mosques-page .search-field {
  position: relative;
  display: flex;
  align-items: center;
  min-width: 0;
  grid-column: auto;
  padding-left: .8rem;
}

.search-field label,
.filter-pill label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.search-field input[type="search"] {
  width: 100%;
  min-width: 0;
  min-height: 3.5rem;
  padding: .6rem .85rem;
  border: 0;
  background: transparent;
  color: #28312e;
  font-size: 1rem;
}

.search-field input[type="search"]:focus {
  outline: 0;
}

.search-bar:focus-within,
.directory-search-row:focus-within {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

.search-suggestions {
  position: absolute;
  top: calc(100% + 1.1rem);
  right: 0;
  left: 0;
  z-index: 8;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 12px 32px rgb(20 56 45 / 16%);
}

.search-suggestions:empty { display: none; }

.suggestion-list {
  margin: 0;
  padding: .4rem;
  list-style: none;
}

.suggestion-list li + li { border-top: 1px solid var(--line); }

.suggestion-list a {
  display: grid;
  gap: .12rem;
  padding: .65rem .75rem;
  color: var(--ink);
  text-decoration: none;
}

.suggestion-list a:hover,
.suggestion-list a:focus-visible { background: var(--brand-soft); }
.suggestion-list strong { font-size: .88rem; font-weight: 620; }
.suggestion-list span,
.suggestion-empty { color: var(--muted); font-size: .76rem; }
.suggestion-empty { margin: 0; padding: .8rem; }


.search-leading-icon {
  width: 1.4rem;
  height: 1.4rem;
  flex: 0 0 auto;
  color: #34423d;
}

.filter-leading-icon { width: 1rem; height: 1rem; }

body.directory-home .location-button,
body.directory-home .search-button,
body.mosques-page .location-button,
body.mosques-page .search-button {
  display: inline-flex;
  min-height: 3.65rem;
  align-self: center;
  align-items: center;
  justify-content: center;
  gap: .65rem;
  padding: .7rem 1.35rem;
  border-radius: 10px;
  font-weight: 720;
  white-space: nowrap;
}

body.directory-home .location-button,
body.mosques-page .location-button {
  margin-right: .65rem;
  border: 0;
  border-left: 1px solid #d5dad6;
  border-radius: 0;
  background: #fff;
  color: #0a5447;
}

body.directory-home .search-button,
body.mosques-page .search-button {
  min-width: 8.9rem;
  border: 1px solid #064d42;
  background: #064d42;
  color: #fff;
}

.location-button:active,
.search-button:active {
  transform: translateY(1px);
}

.action-icon { width: 1.35rem; height: 1.35rem; }

body.directory-home .location-status,
body.mosques-page .location-status {
  min-height: 0;
  margin: .25rem 0 0;
  color: var(--muted);
  font-size: .82rem;
}

body.directory-home .location-status:empty,
body.mosques-page .location-status:empty { display: none; }

.home-filters,
.directory-page-filters {
  display: flex;
  justify-content: center;
  gap: 1.4rem;
  margin-top: 1.55rem;
}

.filter-pill {
  position: relative;
  display: flex;
  min-width: 16rem;
  min-height: 2.8rem;
  align-items: center;
  padding-left: 1.05rem;
  border: 1px solid #d8ddda;
  border-radius: 999px;
  background: #fff;
  color: #21302b;
}

.filter-pill select {
  width: 100%;
  min-height: 2.7rem;
  padding: .4rem 2.5rem .4rem .75rem;
  border: 0;
  appearance: none;
  background: transparent;
  color: inherit;
  font-weight: 650;
  cursor: pointer;
}

.select-icon {
  position: absolute;
  top: 50%;
  right: 1rem;
  width: 1rem;
  height: 1rem;
  pointer-events: none;
  transform: translateY(-50%);
}


.home-dashboard,
.home-support {
  display: grid;
  width: min(92rem, calc(100% - 4rem));
  margin: 1.15rem auto 0;
  gap: 1.8rem;
}

.home-dashboard {
  position: relative;
  z-index: 1;
  grid-template-columns: minmax(0, 1.55fr) minmax(21rem, 1fr);
  gap: 2rem;
}

.featured-panel,
.coverage-panel,
.value-panel {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
}

.featured-panel {
  padding: .85rem .9rem .9rem;
}

.panel-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0 .45rem .7rem;
}

.panel-title-row h2,
.coverage-panel h2 {
  margin: 0;
  color: #0a493e;
  font-size: 1.08rem;
  letter-spacing: -.015em;
}

.panel-title-row a {
  color: #0b6655;
  font-size: .86rem;
  font-weight: 620;
  text-decoration: none;
}

.featured-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .75rem;
}

.featured-card {
  display: flex;
  min-width: 0;
  min-height: 236px;
  flex-direction: column;
  padding: .9rem .75rem .65rem;
  border: 1px solid #dfe3e0;
  border-radius: 10px;
  background: #fff;
}

.featured-heading {
  display: grid;
  min-height: 112px;
  grid-template-columns: 2.9rem minmax(0, 1fr);
  gap: .65rem;
}

.card-icon {
  width: 2.5rem;
  height: 2.5rem;
  margin-top: .25rem;
  color: #08604f;
  stroke-width: 1.6;
}

.address-icon {
  width: .75rem;
  height: .75rem;
  margin-right: .25rem;
}

.featured-heading h3 {
  margin: 0;
  font-size: .93rem;
  line-height: 1.18;
}

.featured-heading h3 a {
  color: #12342e;
  text-decoration: none;
}

.featured-heading h3 {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.featured-heading p {
  display: -webkit-box;
  min-height: 2.7em;
  margin: .4rem 0 0;
  overflow: hidden;
  color: #5f6865;
  font-size: .72rem;
  line-height: 1.35;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.featured-heading > div > strong {
  display: block;
  margin-top: .2rem;
  color: #59635f;
  font-size: .72rem;
  font-weight: 550;
}

.featured-times {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .35rem;
  margin-top: .3rem;
}

.featured-times > div {
  display: grid;
  min-height: 62px;
  place-items: center;
  padding: .35rem .2rem;
  border: 1px solid #e2e6e3;
  border-radius: 8px;
  font-size: .67rem;
  line-height: 1.15;
}

.featured-times strong { font-size: .76rem; }
.time-icon { width: .95rem; height: .95rem; color: #d99d1a; }

.featured-next {
  display: grid;
  min-height: 62px;
  place-items: center;
  margin-top: .3rem;
  border: 1px solid #e2e6e3;
  border-radius: 8px;
  color: var(--muted);
  font-size: .7rem;
}

.featured-next strong { color: var(--ink); font-size: .82rem; }

.timetable-link {
  margin-top: auto;
  padding-top: .65rem;
  color: #0b5f50;
  font-size: .75rem;
  font-weight: 720;
  text-align: center;
  text-decoration: none;
}

.coverage-panel {
  display: grid;
  grid-template-columns: minmax(11rem, .8fr) minmax(13rem, 1fr);
  align-items: center;
  padding: 1.3rem 1.4rem;
  overflow: hidden;
}

.coverage-panel p {
  margin: .7rem 0 0;
  color: #3f4a46;
  font-size: .84rem;
  line-height: 1.5;
}

.coverage-panel img {
  display: block;
  width: 100%;
  height: 250px;
  object-fit: contain;
}

.home-support {
  grid-template-columns: 1fr;
}

.value-panel {
  display: grid;
  min-height: 155px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  gap: 0;
  padding: 1.15rem;
}

.service-value strong {
  display: block;
  color: #183d35;
  font-size: .82rem;
  font-weight: 620;
}

.service-value p {
  max-width: 25rem;
  margin: .3rem auto 0;
  color: #5c6562;
  font-size: .74rem;
  line-height: 1.5;
}

.service-value {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: .45rem;
  padding: .3rem 1rem;
  text-align: center;
}

.service-value + .service-value {
  min-height: 100%;
  align-content: center;
  padding-left: 1rem;
  border-left: 1px solid #e0e4e1;
}

.value-icon {
  width: 2.5rem;
  height: 2.5rem;
  padding: .35rem;
  color: #08604f;
}
.people-value-icon { color: #d29a19; }

.home-disclaimer {
  width: min(92rem, calc(100% - 4rem));
  margin: 1rem auto 0;
  padding: .65rem .85rem;
  border-radius: 8px;
  background: #fff9ee;
  color: #4f554f;
  font-size: .72rem;
}

.notice-icon {
  width: 1rem;
  height: 1rem;
  margin-right: .35rem;
  color: #b77d08;
  vertical-align: -.2rem;
}

.directory-home footer.site {
  margin-top: .8rem;
}

/* About */
body.about-page main.wrap {
  width: 100%;
  max-width: none;
  padding: 0 0 3rem;
}

.about-hero {
  padding: 4rem max(1.25rem, calc((100vw - 72rem) / 2)) 3.5rem;
  border-bottom: 1px solid var(--line);
  background:
    radial-gradient(circle at 82% 24%, rgb(13 106 87 / 8%) 0 2px, transparent 2.5px) 0 0 / 24px 24px,
    #f7fbf8;
}

.about-hero-copy { max-width: 47rem; }
.about-hero h1 {
  max-width: 44rem;
  margin: .55rem 0 1rem;
  color: #073f35;
  font-size: clamp(2.6rem, 6vw, 4.8rem);
  letter-spacing: -.05em;
  line-height: 1;
}
.about-hero p:not(.page-kicker) {
  max-width: 43rem;
  margin: 0;
  color: #52615c;
  font-size: clamp(1rem, 1.8vw, 1.18rem);
  line-height: 1.7;
}

.about-shell {
  display: grid;
  width: min(72rem, calc(100% - 2.5rem));
  gap: 1.2rem;
  margin: 2rem auto 0;
}

.about-intro,
.about-card,
.about-next {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
}

.about-intro {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(16rem, .65fr);
  gap: 2rem;
  padding: clamp(1.4rem, 4vw, 2.5rem);
}
.about-intro h2,
.about-next h2 {
  margin: 0 0 .75rem;
  color: #123c34;
  font-size: clamp(1.4rem, 2.5vw, 2rem);
}
.about-intro p,
.about-card p,
.about-next p { margin: 0; color: var(--muted); line-height: 1.7; }
.about-intro-note {
  align-self: start;
  padding: 1.2rem;
  border-radius: 9px;
  background: var(--brand-soft);
  color: #31554c;
  font-size: .88rem;
}

.about-principles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.2rem;
}
.about-card { padding: 1.5rem; }
.about-card-icon {
  width: 2.35rem;
  height: 2.35rem;
  margin-bottom: 1rem;
  color: var(--brand);
  stroke-width: 1.6;
}
.about-card h2 {
  margin: 0 0 .55rem;
  color: #153e35;
  font-size: 1.05rem;
}

.about-next {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding: clamp(1.4rem, 4vw, 2rem);
}
.about-links { display: flex; flex-wrap: wrap; gap: .65rem; }
.about-links a {
  display: inline-flex;
  min-height: 2.7rem;
  align-items: center;
  padding: .6rem .9rem;
  border: 1px solid var(--brand-strong);
  border-radius: 8px;
  color: var(--brand-strong);
  font-size: .84rem;
  font-weight: 620;
  text-decoration: none;
}
.about-links a:first-child { background: var(--brand-strong); color: #fff; }

@media (max-width: 48rem) {
  .about-hero { padding: 2.6rem 1.25rem 2.2rem; }
  .about-shell { width: min(100% - 1.25rem, 72rem); }
  .about-intro,
  .about-principles { grid-template-columns: 1fr; }
  .about-next { align-items: flex-start; flex-direction: column; }
}

/* All-mosques directory */
.mosques-hero {
  padding: 3.2rem max(1.25rem, calc((100vw - 76rem) / 2)) 2rem;
  border-bottom: 1px solid var(--line);
  background:
    radial-gradient(circle at 85% 20%, rgb(17 100 80 / 7%) 0 2px, transparent 2.5px) 0 0 / 22px 22px,
    #fdfdfa;
}

.page-kicker {
  margin: 0 0 .35rem;
  color: #aa7410;
  font-size: .78rem;
  font-weight: 750;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.mosques-hero h1 {
  margin: 0;
  color: #073f35;
  font-size: clamp(2.4rem, 5vw, 4rem);
  line-height: 1;
  letter-spacing: -.045em;
}

.mosques-hero > p:not(.page-kicker) {
  margin: .8rem 0 1.6rem;
  color: var(--muted);
  font-size: 1.02rem;
}

.directory-page-search {
  max-width: 76rem;
}

.directory-search-row {
  min-height: 76px;
}

.directory-page-filters {
  justify-content: flex-start;
  gap: .75rem;
  margin-top: .9rem;
}

.directory-page-filters .filter-pill {
  min-width: 13.5rem;
}

.clear-filters {
  align-self: center;
  color: #0b6655;
  font-size: .85rem;
  font-weight: 700;
}

.all-mosques-shell {
  width: min(92rem, calc(100% - 4rem));
  margin: 1.4rem auto 3rem;
}

.mosques-page .directory-results {
  padding: 1.3rem;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: #fff;
}

.mosques-page .results-heading {
  margin-bottom: 1.1rem;
  padding: 0 .25rem;
}

.mosques-page .results-heading h2 {
  color: #0a493e;
  font-size: 1.35rem;
}

.mosques-page .mosque-list {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  gap: .85rem;
}

.mosques-page .mosque-card {
  display: flex;
  min-height: 232px;
  flex-direction: column;
  gap: .8rem;
  padding: 1.1rem;
  border-radius: 10px;
  box-shadow: 0 1px 2px rgb(20 56 45 / 4%);
}

.mosques-page .mosque-card h3 {
  display: -webkit-box;
  min-height: 2.5em;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.mosques-page .mosque-card-heading {
  display: grid;
  grid-template-columns: 2.9rem minmax(0, 1fr);
  gap: .65rem;
}

.mosques-page .mosque-card-main {
  min-height: 6.67rem;
}

.mosques-page .mosque-location {
  display: -webkit-box;
  min-height: 3.75em;
  margin: .42rem 0 0;
  overflow: hidden;
  line-height: 1.25;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.mosques-page .timetable-summary {
  display: grid;
  grid-template-columns: 1fr auto;
  min-width: 0;
  padding: .75rem;
  border-radius: 8px;
  background: #f1f7f3;
  text-align: left;
}

.mosques-page .next-jamaat {
  margin: 0;
  text-align: right;
}

.mosques-page .mosque-actions {
  margin-top: auto;
  justify-content: space-between;
  padding-top: .75rem;
}

.mosques-page .primary-link {
  padding: 0;
  background: transparent;
}

.mosques-page .pagination {
  display: grid;
  grid-template-columns: 6rem minmax(0, 1fr) 6rem;
  align-items: center;
  gap: .75rem;
}

.mosques-page .pagination-pages {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .35rem;
}

.mosques-page .pagination a,
.mosques-page .pagination-page {
  border-color: #cfd8d2;
  border-radius: 8px;
  color: #075447;
}

.mosques-page .pagination-page {
  display: inline-grid;
  min-width: 2.35rem;
  min-height: 2.35rem;
  place-items: center;
  padding: .35rem;
  border: 1px solid #cfd8d2;
  background: #fff;
  font-weight: 600;
  text-decoration: none;
}

.mosques-page .pagination-page.current {
  border-color: var(--brand-strong);
  background: var(--brand-strong);
  color: #fff;
}

/* Mosque detail */
body.mosque-detail-page {
  --bg: #fbfcfa;
  --panel: #fff;
  --panel-soft: #f3f7f4;
  --ink: #102a25;
  --muted: #5d6763;
  --line: #dfe4df;
  --brand: #0c6a57;
  --brand-strong: #064d42;
  --brand-soft: #edf6f1;
  color-scheme: light;
  background: #fbfcfa;
  color: var(--ink);
  font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

body.mosque-detail-page .wrap { width: min(92rem, calc(100% - 4rem)); }
body.mosque-detail-page header.site { min-height: 74px; background: #fff; }
body.mosque-detail-page header.site .wrap { min-height: 74px; }
body.mosque-detail-page main.wrap { padding-bottom: 1.2rem; }
body.mosque-detail-page .site-nav a { font-weight: 620; }

.detail-breadcrumb {
  display: flex;
  width: min(72rem, 100%);
  align-items: center;
  gap: .75rem;
  margin: 1.15rem auto 0;
  color: var(--muted);
  font-size: .8rem;
}

.detail-breadcrumb a { color: var(--brand-strong); font-weight: 600; text-decoration: none; }

.detail-hero {
  display: grid;
  width: min(72rem, 100%);
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 2rem;
  margin: 1.3rem auto 1.5rem;
  padding: 1rem 0 1.6rem;
  border-bottom: 1px solid var(--line);
}

.detail-identity {
  display: grid;
  min-width: 0;
  grid-template-columns: 6.3rem minmax(0, 1fr);
  align-items: center;
  gap: 1.6rem;
}

.detail-mosque-mark {
  display: grid;
  width: 6.3rem;
  height: 6.3rem;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
}
.detail-identity-icon {
  width: 3.4rem;
  height: 3.4rem;
  color: var(--brand-strong);
  stroke-width: 1.5;
}

.detail-identity h1 {
  max-width: none;
  margin: 0;
  color: #073f36;
  font-size: clamp(2rem, 3.2vw, 3rem);
  font-weight: 650;
  letter-spacing: -.035em;
  line-height: 1.08;
}

.detail-identity > div > p {
  margin: .55rem 0 0;
  color: #48534f;
  font-size: 1rem;
}

.detail-statuses {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem 1.4rem;
  margin-top: 1rem;
  color: var(--muted);
  font-size: .78rem;
}

.detail-statuses > span { display: inline-flex; align-items: center; gap: .4rem; }
.status-icon { width: 1rem; height: 1rem; color: var(--brand-strong); }

.detail-actions {
  display: grid;
  min-width: 12.5rem;
  gap: .65rem;
}

.detail-primary-action,
.detail-secondary-action {
  display: inline-flex;
  min-height: 2.9rem;
  align-items: center;
  justify-content: center;
  padding: .65rem 1rem;
  border: 1px solid var(--brand-strong);
  border-radius: 8px;
  font-size: .86rem;
  font-weight: 620;
  text-align: center;
  text-decoration: none;
}
.detail-primary-action { background: var(--brand-strong); color: #fff; }
.detail-secondary-action { background: #fff; color: var(--brand-strong); }

.detail-grid {
  display: grid;
  width: min(72rem, 100%);
  grid-template-columns: minmax(0, 2fr) minmax(17rem, .82fr);
  align-items: start;
  gap: 1.25rem;
  margin: 0 auto;
}

.detail-main-column,
.detail-aside { display: grid; gap: 1rem; }

.detail-panel {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
}

.detail-panel-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.2rem .65rem;
}
.detail-panel-heading h2,
.detail-aside h2 {
  display: flex;
  align-items: center;
  gap: .55rem;
  margin: 0;
  color: #123c34;
  font-size: 1rem;
  font-weight: 620;
}
.detail-panel-heading p { margin: .2rem 0 0 1.75rem; color: var(--muted); font-size: .76rem; }

.daily-time-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  padding: .4rem 1rem 1rem;
}

.daily-time.next-prayer .prayer-name { margin-top: .85rem; }
.daily-time {
  position: relative;
  display: grid;
  min-height: 8.4rem;
  align-content: center;
  justify-items: center;
  gap: .55rem;
  padding: .7rem .45rem;
  border-left: 1px solid var(--line);
  text-align: center;
}
.daily-time:first-child { border-left: 0; }
.daily-time.next-prayer {
  border: 1px solid #dce9e1;
  border-radius: 9px;
  background: var(--brand-soft);
}
.next-label { position: absolute; top: .45rem; color: var(--brand-strong); font-size: .65rem; font-weight: 600; }
.prayer-name { color: #34403c; font-size: .74rem; }
.daily-time strong { color: #101916; font-size: 1.2rem; font-weight: 620; }
.daily-time.next-prayer strong { color: #087642; }
.daily-time small { color: var(--muted); font-size: .62rem; }

.prayer-glyph {
  width: 1.7rem;
  height: 1.7rem;
  color: #0a6554;
  stroke-width: 1.7;
}
.daily-time:nth-child(2) .prayer-glyph { color: #d59612; }

.detail-notice {
  margin: .5rem 1rem 1rem;
  padding: 1rem;
  border-radius: 8px;
  background: var(--panel-soft);
  color: var(--muted);
  text-align: center;
}

.jumuah-strip {
  display: grid;
  grid-template-columns: minmax(8rem, 1.2fr) repeat(2, minmax(6rem, .7fr)) minmax(10rem, 1.2fr);
  align-items: center;
  gap: .75rem;
  margin: 0 1rem 1rem;
  padding: .85rem 1rem;
  border: 1px solid var(--line);
  border-radius: 8px;
}
.jumuah-strip > strong { color: #153e35; font-size: .86rem; }
.jumuah-strip div { display: grid; justify-items: center; border-left: 1px solid var(--line); }
.jumuah-strip b { font-size: .98rem; font-weight: 620; }
.jumuah-strip span,
.jumuah-strip p { color: var(--muted); font-size: .65rem; }
.jumuah-strip p { margin: 0; }

.detail-panel-meta {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: .8rem 1rem;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: .67rem;
}

.weekly-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  padding: .25rem 1rem 1rem;
}
.weekly-grid article {
  display: grid;
  gap: .12rem;
  padding: .65rem .45rem;
  border-left: 1px solid var(--line);
  text-align: center;
}
.weekly-grid article:first-child { border-left: 0; }
.weekly-grid article.today { border: 1px solid #dce9e1; border-radius: 8px; background: var(--brand-soft); }
.weekly-grid article > strong { font-size: .72rem; font-weight: 620; }
.weekly-grid article > span { color: var(--muted); font-size: .62rem; }
.weekly-grid dl { display: grid; gap: .25rem; margin: .45rem 0 0; }
.weekly-grid dl div { display: grid; gap: .05rem; }
.weekly-grid dt { color: var(--muted); font-size: .58rem; }
.weekly-grid dd { margin: 0; font-size: .67rem; font-weight: 600; }

.detail-aside .detail-panel { padding: 1rem; }
.detail-aside h2 { margin-bottom: .8rem; }
.guidance-panel ul {
  margin: .2rem 1.2rem 1rem;
  padding-left: 1.1rem;
  color: var(--muted);
  font-size: .76rem;
}
.guidance-panel li + li { margin-top: .35rem; }

.location-map {
  position: relative;
  display: grid;
  min-height: 13rem;
  place-items: center;
  overflow: hidden;
  border: 1px solid #e2e6e2;
  border-radius: 8px;
  background:
    linear-gradient(28deg, transparent 47%, rgb(255 255 255 / 85%) 48% 51%, transparent 52%),
    linear-gradient(115deg, transparent 42%, rgb(255 255 255 / 90%) 43% 46%, transparent 47%),
    repeating-linear-gradient(0deg, #eff3ea 0 2.2rem, #e6eee3 2.2rem 2.35rem);
}
.location-map.mapbox-active { display: block; }
.location-map.mapbox-active .mapboxgl-map,
.location-map.mapbox-active .mapboxgl-canvas { width: 100%; height: 100%; }
.map-fallback-marker { display: contents; }
.map-marker {
  width: 3rem;
  height: 3rem;
  padding: .5rem;
  border-radius: 50%;
  background: var(--brand-strong);
  color: #fff;
  box-shadow: 0 4px 12px rgb(6 77 66 / 22%);
}
.location-panel > p { margin: .65rem 0; color: var(--muted); font-size: .68rem; text-align: center; }
.location-panel .detail-secondary-action { width: 100%; }
.show-map-button { margin-top: .65rem; }
.show-map-button[hidden] { display: none; }
.map-status { min-height: 1rem; }

.information-panel dl { display: grid; gap: .65rem; margin: 0; }
.information-panel dl div { display: grid; gap: .12rem; padding-top: .65rem; border-top: 1px solid var(--line); }
.information-panel dl div:first-child { padding-top: 0; border-top: 0; }
.information-panel dt { color: var(--muted); font-size: .66rem; }
.information-panel dd { margin: 0; font-size: .78rem; overflow-wrap: anywhere; }
.source-detail-panel p { margin: .45rem 0 0; color: var(--muted); font-size: .75rem; line-height: 1.5; }

.detail-disclaimer {
  width: min(72rem, 100%);
  margin: 1rem auto 0;
  padding: .7rem .85rem;
  border-radius: 8px;
  background: #fff9ee;
  color: #4f554f;
  font-size: .72rem;
}

@media (max-width: 64rem) {
  .detail-grid { grid-template-columns: 1fr; }
  .detail-aside { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .location-map { min-height: 9rem; }
}


/* City and town landing pages */
body.city-page main.wrap {
 width: min(92rem, calc(100% - 4rem));
 max-width: none;
 padding: 0 0 3rem;
}
.city-hero {
 position: relative;
 overflow: hidden;
 padding: 2rem max(1rem, calc((100vw - 92rem) / 2)) 2.5rem;
 border-bottom: 1px solid var(--line);
 background:
   radial-gradient(circle, rgb(214 155 24 / 7%) 1px, transparent 1.5px) 0 0 / 18px 18px,
   #fdfdfa;
}
.city-breadcrumb {
 display: flex;
 gap: .6rem;
 align-items: center;
 margin-bottom: 2rem;
 color: var(--muted);
 font-size: .78rem;
}
.city-breadcrumb a { color: var(--brand); text-decoration: none; }
.city-hero-copy {
 display: flex;
 justify-content: space-between;
 gap: 2rem;
 align-items: end;
}
.city-hero h1 {
 margin: 0;
 color: var(--ink);
 font-size: clamp(2.5rem, 5vw, 4.5rem);
 font-weight: 700;
 letter-spacing: -.055em;
 line-height: .95;
}
.city-hero-copy > div > p { margin: .7rem 0 0; color: var(--muted); }
.city-facts { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 1.5rem; }
.city-facts > span { display: inline-flex; align-items: center; gap: .45rem; color: var(--muted); font-size: .72rem; }
.fact-icon { width: .9rem; height: .9rem; color: var(--brand); }
.city-silhouette { display: flex; gap: .35rem; align-items: end; min-width: 15rem; height: 6rem; opacity: .2; }
.city-silhouette span { flex: 1; height: 45%; border-radius: 50% 50% 2px 2px; background: #d69b18; }
.city-silhouette span:nth-child(2) { height: 82%; }
.city-silhouette span:nth-child(3) { height: 62%; }
.city-silhouette span:nth-child(4) { height: 100%; }
.city-silhouette span:nth-child(5) { height: 55%; }
.city-directory-layout {
 display: grid;
 grid-template-columns: minmax(0, 2.1fr) minmax(18rem, .9fr);
 gap: 2rem;
 width: min(92rem, calc(100% - 4rem));
 margin: 2rem auto 0;
}
.city-results-heading { display: flex; justify-content: space-between; gap: 1rem; align-items: end; margin-bottom: 1rem; }
.city-results-heading h2 { margin: 0; font-size: 1.1rem; }
.city-results-heading p { margin: .2rem 0 0; color: var(--muted); font-size: .7rem; }
.city-results-heading > a { color: var(--brand); font-size: .72rem; font-weight: 650; }
.city-mosque-list { display: grid; gap: .7rem; }
.city-mosque-card {
 display: grid;
 grid-template-columns: minmax(13rem, 1.3fr) minmax(22rem, 1fr) auto;
 gap: 1rem;
 align-items: center;
 min-height: 7rem;
 padding: 1rem 1.15rem;
 border: 1px solid var(--line);
 border-radius: 9px;
 background: var(--panel);
 box-shadow: 0 3px 12px rgb(31 45 38 / 4%);
}
.city-mosque-copy h3 { margin: 0; font-size: .95rem; }
.city-mosque-copy h3 a { color: var(--ink); text-decoration: none; }
.city-mosque-copy p { margin: .35rem 0 0; color: var(--muted); font-size: .7rem; line-height: 1.4; }
.city-time-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.city-time-grid div { padding: .2rem .45rem; border-left: 1px solid var(--line); text-align: center; }
.city-time-grid span, .city-time-grid strong { display: block; }
.city-time-grid span { color: var(--muted); font-size: .58rem; }
.city-time-grid strong { margin-top: .25rem; color: var(--ink); font-size: .7rem; }
.city-timetable-link {
 padding: .6rem .7rem;
 border: 1px solid var(--brand);
 border-radius: 6px;
 color: var(--brand);
 font-size: .68rem;
 font-weight: 650;
 text-decoration: none;
 white-space: nowrap;
}
.city-aside { display: grid; align-content: start; gap: 1rem; }
.city-info-panel, .city-update-panel {
 padding: 1.25rem;
 border: 1px solid var(--line);
 border-radius: 9px;
 background: var(--panel);
}
.city-panel-icon { display: block; width: 2.2rem; height: 2.2rem; margin-bottom: .9rem; color: var(--brand); }
.city-aside h2 { margin: 0; font-size: .95rem; }
.city-aside p { color: var(--muted); font-size: .72rem; line-height: 1.55; }
.city-accuracy-note { margin: 1rem -1.25rem -1.25rem; padding: .85rem 1.25rem; border-top: 1px solid #eadfbf; background: #fff9e9; }
.city-update-panel a { display: inline-block; margin-top: .4rem; color: var(--brand); font-size: .72rem; font-weight: 650; }
@media (max-width: 70rem) {
 .city-directory-layout { grid-template-columns: 1fr; }
 .city-aside { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 48rem) {
 body.city-page main.wrap, .city-directory-layout { width: min(100% - 1.25rem, 92rem); }
 .city-hero { padding: 1.4rem .7rem 1.8rem; }
 .city-silhouette { display: none; }
 .city-mosque-card { grid-template-columns: 1fr; }
 .city-time-grid div:first-child { border-left: 0; }
 .city-timetable-link { justify-self: start; }
 .city-aside { grid-template-columns: 1fr; }
}
@media (max-width: 48rem) {
  body.mosque-detail-page .wrap { width: min(100% - 1.25rem, 92rem); }
  .detail-breadcrumb { overflow: hidden; white-space: nowrap; }
  .detail-breadcrumb span[aria-current="page"] { overflow: hidden; text-overflow: ellipsis; }
  .detail-hero { grid-template-columns: 1fr; }
  .detail-identity { grid-template-columns: 4.5rem minmax(0, 1fr); align-items: start; }
  .detail-mosque-mark { width: 4.5rem; height: 4.5rem; }
  .detail-mosque-mark::before { right: .9rem; bottom: .8rem; left: .9rem; height: 1.7rem; }
  .detail-mosque-mark::after { bottom: .8rem; }
  .detail-identity h1 { font-size: clamp(1.8rem, 9vw, 2.5rem); }
  .detail-actions { grid-template-columns: 1fr 1fr; }
  .detail-actions .detail-primary-action { grid-column: 1 / -1; }
  .daily-time-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .35rem; }
  .daily-time { border: 1px solid var(--line); border-radius: 8px; }
  .jumuah-strip { grid-template-columns: 1fr 1fr; }
  .jumuah-strip p { grid-column: 1 / -1; text-align: center; }
  .weekly-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .35rem; }
  .weekly-grid article { border: 1px solid var(--line); border-radius: 8px; }
  .detail-aside { grid-template-columns: 1fr; }
}

.pagination-gap { align-self: center; padding: 0 .2rem; color: var(--muted); }

@media (max-width: 70rem) {
  .home-dashboard { grid-template-columns: 1fr; }
  .coverage-panel { grid-template-columns: 1fr 1fr; }
  .mosques-page .mosque-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 48rem) {
  .public-page .wrap { width: min(100% - 1.25rem, 92rem); }

  .public-page header.site .wrap {
    align-items: center;
    flex-direction: row;
    justify-content: space-between;
    padding-block: .65rem;
  }

  .brand-name { font-size: 1.25rem; }
  .brand-mark { width: 1.55rem; height: 2.5rem; }

  .public-page .site-nav { gap: .8rem; font-size: .76rem; }
  .public-page .site-nav a:not(:first-child) { display: none; }

  .home-hero {
    min-height: auto;
    padding: 2rem .7rem 1.4rem;
  }

  .hero-copy h1 { font-size: clamp(2.3rem, 11vw, 3.2rem); }
  .desktop-break { display: none; }

  .search-bar,
  .directory-search-row {
    grid-template-columns: 1fr;
    gap: .5rem;
    padding: .65rem;
  }

  .location-button {
    margin: 0;
    border: 1px solid var(--line);
    border-radius: 9px;
  }

  .search-button { width: 100%; }

  .home-filters,
  .directory-page-filters { flex-direction: column; gap: .55rem; }
  .filter-pill,
  .directory-page-filters .filter-pill { width: 100%; min-width: 0; }

  .home-dashboard,
  .home-support,
  .home-disclaimer,
  .all-mosques-shell { width: min(100% - 1.25rem, 92rem); }

  .featured-grid,
  .value-panel,
  .mosques-page .mosque-list { grid-template-columns: 1fr; }

  .coverage-panel { grid-template-columns: 1fr; }
  .coverage-panel img { height: 180px; }
  .service-value + .service-value { padding: .8rem 0 0; border-top: 1px solid var(--line); border-left: 0; }
  .value-panel { padding: 1rem; }
  .mosques-hero { padding: 2.5rem .8rem 1.5rem; }
}