/* Baitur Rahman Mosque */
/* fonts hosted on the site itself (all SIL Open Font License), so no extra trip to Google */
@font-face { font-family: "Figtree"; src: url("../fonts/figtree-latin.woff2") format("woff2"); font-weight: 300 900; font-style: normal; font-display: swap; unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Figtree"; src: url("../fonts/figtree-latin-ext.woff2") format("woff2"); font-weight: 300 900; font-style: normal; font-display: swap; unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Manrope"; src: url("../fonts/manrope-latin.woff2") format("woff2"); font-weight: 200 800; font-style: normal; font-display: swap; unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Manrope"; src: url("../fonts/manrope-latin-ext.woff2") format("woff2"); font-weight: 200 800; font-style: normal; font-display: swap; unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Tajawal"; src: url("../fonts/tajawal-arabic-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; unicode-range: U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC; }

@font-face {
  font-family: "Noorehuda";
  src: url("../fonts/noorehuda.woff2") format("woff2");
  font-display: swap;
  size-adjust: 140%; /* draws small; this matches the old Arabic size */
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200F;
}
:root {
  --night: #072a22;          /* deep version of the photo's sky */
  --night-2: #0e3a2f;
  --dawn: #f0c27b;          /* the gold of the dome finial */
  --dawn-deep: #d9a252;
  --paper: #f4f5f8;
  --ink: #0c1424;
  --line-dark: rgba(255,255,255,.12);
  --line-light: rgba(7,42,34,.12);
  --muted-dark: rgba(255,255,255,.62);
  --muted-light: #586178;
  /* SF Pro on Apple devices (it can't be web-hosted), Figtree everywhere else */
  --display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Figtree", "Segoe UI", system-ui, sans-serif;
  /* prayer times and other numbers (SF Pro on Apple, Figtree elsewhere) */
  --nums: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Figtree", "Segoe UI", system-ui, sans-serif;
  --body: "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;
  --arabic: "Tajawal", "Geeza Pro", "Noto Sans Arabic", sans-serif;
  /* prayers and Quran text only (not the Baitur Rahman name) */
  --quran: "Noorehuda", "Geeza Pro", "Noto Naskh Arabic", serif;
}

html { scroll-behavior: smooth; scroll-padding-top: 84px; touch-action: manipulation; }
body {
  font-family: var(--body);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: #fff;
  background: var(--night);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
:focus-visible { outline: 2px solid var(--dawn); outline-offset: 3px; }

.skip-link { position: absolute; left: -9999px; top: 0; z-index: 2000; background: var(--dawn); color: var(--ink); padding: .5rem 1rem; }
.skip-link:focus { left: 0; }

/* ---------- nav ---------- */
.site-nav {
  padding: 1.1rem 0;
  padding-top: calc(1.1rem + env(safe-area-inset-top, 0px));
  transition: background-color .3s ease, padding .3s ease, backdrop-filter .3s ease;
}
/* In-app browsers (Telegram, Instagram) put their own toolbar over the top of the page,
   and the page scrolls underneath it, above our bar. This strip extends the bar's
   background upward so that space matches the bar instead of showing the photo.
   In normal browsers it sits off-screen. */
.site-nav::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 300px;
  background: transparent; pointer-events: none; transition: background-color .3s ease;
}
.site-nav.is-solid::before, .site-nav.menu-open::before { background: rgba(7,42,34,.97); }
.site-nav.is-solid, .site-nav.menu-open {
  background: rgba(7,42,34,.82);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  padding-bottom: .7rem;
  padding-top: calc(.7rem + env(safe-area-inset-top, 0px));
  border-bottom: 1px solid var(--line-dark);
}
.navbar-brand { display: flex; align-items: center; gap: .75rem; margin-right: 0; }
.brand-logo { height: 44px; width: 44px; }
.brand-text { font-family: var(--display); font-weight: 700; font-size: 1.1rem; line-height: 1.1; letter-spacing: -.02em; color: #fff; }
.brand-text span { display: block; font-family: var(--body); font-weight: 500; font-size: .72rem; letter-spacing: .01em; color: var(--muted-dark); margin-top: .15rem; }
.site-nav .nav-link {
  color: rgba(255,255,255,.8);
  font-weight: 600;
  font-size: .95rem;
  padding: .5rem 1rem !important;
}
.site-nav .nav-link:hover, .site-nav .nav-link:focus { color: #fff; }
.site-nav .nav-cta { border: 1px solid rgba(255,255,255,.35); border-radius: 999px; margin-left: .5rem; }
.site-nav .nav-cta:hover { background: #fff; color: var(--ink); }
.site-nav .navbar-toggler { border: 0; padding: .4rem; }
.site-nav .navbar-toggler:focus { box-shadow: none; }
@media (max-width: 991.98px) {
  .site-nav .navbar-nav { padding: 1rem 0 .5rem; }
  .site-nav .nav-link { padding: .8rem 0 !important; font-family: var(--display); font-size: 1.25rem; font-weight: 500; border-top: 1px solid var(--line-dark); }
  .site-nav .nav-cta { border: 0; border-top: 1px solid var(--line-dark); border-radius: 0; margin: 0; }
}

/* ---------- buttons ---------- */
.btn { font-weight: 700; font-size: .95rem; padding: .85rem 1.6rem; border-radius: 999px; transition: background-color .2s, color .2s, border-color .2s; }
.btn-dawn { background: var(--dawn); color: var(--ink); border: 1px solid var(--dawn); }
.btn-dawn:hover, .btn-dawn:focus-visible { background: #fff; border-color: #fff; color: var(--ink); }
.btn-ghost { background: rgba(255,255,255,.06); color: #fff; border: 1px solid rgba(255,255,255,.35); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.btn-ghost:hover, .btn-ghost:focus-visible { background: #fff; color: var(--ink); border-color: #fff; }
.btn-ink { background: var(--ink); color: #fff; border: 1px solid var(--ink); }
.btn-ink:hover, .btn-ink:focus-visible { background: var(--dawn); border-color: var(--dawn); color: var(--ink); }
.btn[hidden] { display: none; }

/* ---------- hero ---------- */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  padding: 8rem 0 3.5rem;
  padding-bottom: calc(3.5rem + env(safe-area-inset-bottom, 0px));
}
.hero-photo {
  position: absolute; inset: 0;
  background: url("../images/hero.jpg") 45% 30% / cover no-repeat,
              var(--night-2);
  background: image-set(url("../images/hero.avif") type("image/avif"), url("../images/hero.jpg") type("image/jpeg")) 45% 30% / cover no-repeat,
              var(--night-2);
  animation: hero-settle 2.4s cubic-bezier(.2,.7,.2,1) both;
}
.hero-shade {
  position: absolute; inset: 0;
  background:
    linear-gradient(0deg, var(--night) 0%, rgba(7,42,34,.85) 30%, rgba(7,42,34,.15) 65%, rgba(7,42,34,.35) 100%),
    linear-gradient(90deg, rgba(7,42,34,.6) 0%, rgba(7,42,34,0) 55%);
}
.hero-inner { position: relative; z-index: 1; width: 100%; }
@keyframes hero-settle { from { transform: scale(1.08); opacity: .4; } to { transform: scale(1); opacity: 1; } }

.hero-arabic {
  font-family: var(--arabic);
  font-size: clamp(1.9rem, 3.4vw, 2.8rem);
  font-weight: 700;
  color: var(--dawn);
  text-align: left;
  margin-bottom: .25rem;
  line-height: 1.4;
  text-shadow: 0 2px 14px rgba(7,42,34,.8);
}
.hero-title {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(3.2rem, 9vw, 7.5rem);
  line-height: .95;
  letter-spacing: -.045em;
  margin-bottom: 1.5rem;
  text-wrap: balance;
  text-shadow: 0 4px 30px rgba(7,42,34,.45);
}
.hero-motto {
  font-size: clamp(1.1rem, 1.8vw, 1.35rem);
  font-weight: 500;
  color: rgba(255,255,255,.85);
  margin-bottom: 2rem;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; }

/* glass prayer panel */
.today-panel {
  background: rgba(7,42,34,.5);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  backdrop-filter: blur(20px) saturate(140%);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 22px;
  padding: 1.6rem 1.6rem 1rem;
}
.today-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.today-heading { font-family: var(--display); font-weight: 500; font-size: 1rem; margin: 0; }
.today-date { margin: 0; color: var(--muted-dark); font-size: .9rem; text-align: right; }

.next-block {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "label label" "time time" "name count";
  align-items: baseline;
  padding: 1.25rem 0 1.1rem;
  border-bottom: 1px solid var(--line-dark);
}
.next-block[hidden] { display: none; }
.next-label { grid-area: label; margin: 0; font-size: .85rem; color: var(--muted-dark); font-weight: 600; }
.next-time {
  grid-area: time; margin: 0;
  font-family: var(--display); font-weight: 200;
  font-size: clamp(3.6rem, 6.5vw, 5.2rem);
  line-height: 1.05; letter-spacing: -.045em;
  color: var(--dawn);
  font-variant-numeric: tabular-nums;
}
.next-time .ampm { font-size: .3em; font-weight: 500; letter-spacing: 0; margin-left: .35rem; color: var(--dawn); }
.next-name { grid-area: name; margin: 0; font-family: var(--display); font-weight: 500; font-size: 1.15rem; }
.next-countdown { grid-area: count; margin: 0; color: var(--muted-dark); font-size: .95rem; text-align: right; }

.today-notice { margin: 1.25rem 0 .75rem; padding: 1rem 1.1rem; border-radius: 12px; background: rgba(255,255,255,.07); border-left: 3px solid var(--dawn); }

.today-list { list-style: none; margin: 0; padding: .25rem 0 0; }
.today-list.is-loading { opacity: .55; }
.next-block.is-loading .next-time { opacity: .25; }
.next-block.is-loading .next-countdown { opacity: .7; }
.prayer-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: .6rem 0;
  border-bottom: 1px solid var(--line-dark);
}
.prayer-row:last-child { border-bottom: 0; }
.prayer-name { font-weight: 600; }
.prayer-time { font-weight: 600; font-variant-numeric: tabular-nums; }
.ampm { font-size: .72em; margin-left: .25em; opacity: .6; font-weight: 600; }
.prayer-row.is-past { opacity: .4; }
.prayer-row.is-next { color: var(--dawn); }
.prayer-row.is-next .prayer-name::before {
  content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: var(--dawn); margin-right: .6rem; vertical-align: middle;
  box-shadow: 0 0 10px var(--dawn);
}
.combined-tag {
  font-size: .7rem; font-weight: 600; color: var(--muted-dark);
  border: 1px solid var(--line-dark); border-radius: 999px; padding: .05rem .5rem; margin-left: .4rem;
  vertical-align: middle;
}

/* ---------- sections ---------- */
.section { padding: 7rem 0; }
.section-night { background: var(--night); color: #fff; }
.section-light { background: var(--paper); color: var(--ink); }
.section-head { margin-bottom: 3rem; max-width: 46rem; }
.section-title {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(2.4rem, 5.5vw, 4.25rem);
  line-height: 1;
  letter-spacing: -.04em;
  margin-bottom: 1rem;
}
.section-lede { color: var(--muted-dark); font-size: 1.15rem; max-width: 56ch; margin: 0; }
.sub-title { font-family: var(--display); font-weight: 500; font-size: 1rem; margin-bottom: 1rem; }

/* ---------- day line ---------- */
.day-line { margin: 0 0 4.5rem; padding: 2.5rem 2.5rem 1rem; border: 1px solid var(--line-dark); border-radius: 22px; background: linear-gradient(180deg, var(--night-2), var(--night)); }
.day-line[hidden] { display: none; }
.day-line-inner { position: relative; height: 96px; }
.day-line-track { position: absolute; top: 34px; left: 0; right: 0; height: 2px; background: rgba(255,255,255,.12); }
.day-line-fill { height: 100%; background: linear-gradient(90deg, rgba(240,194,123,.15), var(--dawn)); box-shadow: 0 0 14px rgba(240,194,123,.7); }
.day-mark { position: absolute; top: 0; transform: translateX(-50%); text-align: center; }
.day-dot { display: block; width: 14px; height: 14px; margin: 28px auto 0; border-radius: 50%; background: var(--night); border: 2px solid rgba(255,255,255,.7); }
.day-mark.is-past .day-dot { background: var(--dawn); border-color: var(--dawn); }
.day-label { display: block; margin-top: .6rem; font-weight: 700; font-size: .85rem; line-height: 1.25; white-space: nowrap; }
.day-label-time { font-weight: 500; color: var(--muted-dark); font-size: .8rem; }
.day-now { position: absolute; top: 35px; width: 0; height: 0; }
/* the dot and its ring are sized up front and only scaled/faded, which Safari animates as smoothly as Chrome */
.day-now::before, .day-now::after {
  content: ""; position: absolute; border-radius: 50%; pointer-events: none;
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
}
.day-now::before { width: 12px; height: 12px; left: -6px; top: -6px; background: #fff; box-shadow: 0 0 16px var(--dawn); z-index: 1;
  -webkit-animation: now-glow 2.2s ease-in-out infinite; animation: now-glow 2.2s ease-in-out infinite; }
.day-now::after { width: 42px; height: 42px; left: -21px; top: -21px; border: 2px solid var(--dawn);
  -webkit-transform: scale(.3); transform: scale(.3); opacity: 0; will-change: transform, opacity;
  -webkit-animation: now-pulse 2.2s cubic-bezier(.2,.6,.3,1) infinite; animation: now-pulse 2.2s cubic-bezier(.2,.6,.3,1) infinite; }
.day-now span { position: absolute; bottom: 14px; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); font-size: .75rem; font-weight: 700; color: var(--dawn); white-space: nowrap; }
@-webkit-keyframes now-pulse { 0% { -webkit-transform: scale(.3); opacity: 1; } 100% { -webkit-transform: scale(1); opacity: 0; } }
@keyframes now-pulse { 0% { transform: scale(.3); opacity: 1; } 100% { transform: scale(1); opacity: 0; } }
@-webkit-keyframes now-glow { 0%, 100% { box-shadow: 0 0 10px rgba(240,194,123,.7); } 50% { box-shadow: 0 0 22px var(--dawn); } }
@keyframes now-glow { 0%, 100% { box-shadow: 0 0 10px rgba(240,194,123,.7); } 50% { box-shadow: 0 0 22px var(--dawn); } }

/* ---------- tables ---------- */
.times-table {
  --bs-table-bg: transparent; --bs-table-color: #fff; --bs-table-border-color: var(--line-dark);
  margin-bottom: 0; font-variant-numeric: tabular-nums;
}
.times-table thead th { color: var(--muted-dark); font-weight: 600; font-size: .85rem; padding: .75rem 1rem; white-space: nowrap; border-bottom-color: rgba(255,255,255,.3); }
.times-table td, .times-table tbody th { padding: 1rem; white-space: nowrap; font-weight: 600; vertical-align: bottom; }
.times-table tr.is-current > * { --bs-table-bg: rgba(240,194,123,.1); color: var(--dawn); }
.this-week { display: block; font-size: .7rem; font-weight: 700; letter-spacing: .02em; color: var(--dawn); }
.times-table .month-row th { font-family: var(--display); font-weight: 500; font-size: 1rem; padding-top: 1.5rem; color: var(--dawn); }
.times-table .ramadan-row td { color: var(--muted-dark); font-weight: 500; font-style: italic; }

.full-schedule { margin-top: 2rem; }
.full-schedule summary { cursor: pointer; font-weight: 700; display: inline-block; padding: .7rem 1.3rem; border: 1px solid rgba(255,255,255,.3); border-radius: 999px; list-style: none; }
.full-schedule summary::-webkit-details-marker { display: none; }
.full-schedule summary::after { content: "+"; margin-left: .6rem; font-size: 1.2rem; line-height: 1; color: var(--dawn); }
.full-schedule[open] summary::after { content: "\2212"; }
.full-schedule summary:hover { border-color: var(--dawn); }

.side-notes { display: flex; flex-direction: column; gap: 1rem; padding-top: .25rem; }
.side-note .sub-title { font-size: .76rem; margin-bottom: .2rem; }
.side-note p { color: var(--muted-dark); margin: 0; font-size: .72rem; line-height: 1.5; }
.side-note[hidden] { display: none; }
.jumuah-time { font-family: var(--display); font-weight: 200; font-size: 2.6rem; color: var(--dawn) !important; letter-spacing: -.03em; }

/* ---------- about ---------- */
.about-statement {
  font-family: var(--display); font-weight: 500;
  font-size: clamp(1.6rem, 3.4vw, 2.75rem);
  line-height: 1.15; letter-spacing: -.035em; margin: 0;
}
.about-text { color: var(--muted-light); font-size: 1.1rem; margin-bottom: 1.5rem; }

/* ---------- leadership ---------- */
.person { margin: 0; }
.person-photo { border-radius: 18px; overflow: hidden; background: var(--night-2); aspect-ratio: 4 / 5; }
.person-photo img {
  width: 100%; height: 100%; object-fit: cover; object-position: top; display: block;
  filter: grayscale(0); transition: filter .5s ease, transform .6s ease;
}
.person:hover .person-photo img { transform: scale(1.03); }
.person figcaption { padding-top: 1rem; }
.person-name { font-family: var(--display); font-weight: 500; font-size: 1.05rem; line-height: 1.3; margin-bottom: .35rem; }
.person-role { color: var(--muted-dark); font-size: .92rem; margin: 0; }

/* ---------- programs ---------- */
.program { display: grid; grid-template-columns: minmax(200px, 30%) 1fr; gap: 2rem; padding: 2.5rem 0; border-top: 1px solid var(--line-light); }
.program:last-child { border-bottom: 1px solid var(--line-light); }
.program-when { font-family: var(--display); font-weight: 700; font-size: clamp(1.7rem, 3.2vw, 2.6rem); letter-spacing: -.035em; line-height: 1; margin: 0; }
.program-when span { display: block; font-family: var(--body); font-weight: 600; font-size: .95rem; letter-spacing: 0; color: var(--muted-light); margin-top: .6rem; }
.program-title { font-family: var(--display); font-weight: 500; font-size: 1.35rem; margin-bottom: .5rem; }
.program-text { margin: 0; color: var(--muted-light); max-width: 56ch; }

/* ---------- visit / contact ---------- */
.visit-banner {
  position: relative;
  min-height: 78vh;
  display: flex; align-items: flex-end;
  padding: 8rem 0 3rem;
  overflow: hidden;
  background: var(--night);
}
.visit-photo {
  position: absolute; inset: -10% 0;   /* just enough room for the gentle scroll effect, so the photo isn't enlarged more than needed */
  background: url("../images/aerial.jpg") 50% 55% / cover no-repeat;
  transition: opacity .8s ease;
}
/* the aerial photo only downloads when the visitor scrolls near it */
/* desktops get a larger copy so it stays sharp on high-density screens; phones keep the smaller one */
@media (min-width: 992px) { .visit-photo { background-image: url("../images/aerial-large.jpg"); } }
html.js .visit-photo:not(.is-loaded) { background-image: none; opacity: 0; }
html.js .mta-screen-inner:not(.is-loaded) { background-image: none; }
/* melts into the sections above and below */
.visit-banner::after {
  /* a couple of pixels past each edge, so phones that round sizes never show a thin line of photo */
  content: ""; position: absolute; inset: -2px 0;
  background:
    linear-gradient(180deg, var(--night) 0%, var(--night) 2%, rgba(7,42,34,.35) 22%, rgba(7,42,34,.15) 45%, rgba(7,42,34,.75) 78%, var(--night) 97%, var(--night) 100%),
    linear-gradient(90deg, rgba(7,42,34,.65) 0%, rgba(7,42,34,0) 60%);
}
.visit-banner-inner { position: relative; z-index: 1; }
.visit-banner .section-title { color: #fff; font-size: clamp(3rem, 8vw, 6.5rem); text-shadow: 0 4px 30px rgba(7,42,34,.5); }
.visit-address { font-size: clamp(1.2rem, 2vw, 1.5rem); font-weight: 600; line-height: 1.5; margin-bottom: 1.75rem; text-shadow: 0 2px 14px rgba(7,42,34,.8); }
.visit-actions { display: flex; flex-wrap: wrap; gap: .75rem; }
.visit-body { padding-top: 4rem; }
.map-wrap { border-radius: 18px; overflow: hidden; aspect-ratio: 4 / 3; background: var(--night-2); border: 1px solid var(--line-dark); }
.map-wrap iframe { width: 100%; height: 100%; border: 0; display: block; filter: grayscale(.6) invert(.9) hue-rotate(180deg); }
@media (max-width: 991.98px) {
  .visit-banner { min-height: 0; padding-top: 52vw; }
  .visit-photo { background-position: 45% 60%; }
}

.contact-form .form-label { font-weight: 600; color: var(--muted-dark); font-size: .9rem; }
.contact-form .form-control {
  background: transparent; border: 0; border-bottom: 1px solid rgba(255,255,255,.3); border-radius: 0;
  color: #fff; padding: .7rem 0; font-size: 1.1rem;
}
.contact-form .form-control:focus { background: transparent; border-bottom-color: var(--dawn); box-shadow: 0 1px 0 0 var(--dawn); color: #fff; }
.contact-form .invalid-feedback { color: #ffb4a8; }
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-status { margin: 1.25rem 0 0; padding: .9rem 1.1rem; border-radius: 12px; font-weight: 600; }
.form-status.is-ok { background: rgba(240,194,123,.12); color: var(--dawn); }
.form-status.is-error { background: rgba(255,180,168,.1); color: #ffb4a8; }

/* ---------- footer ---------- */
.site-footer { background: var(--night); border-top: 1px solid var(--line-dark); padding: 5rem 0 2rem; padding-bottom: calc(2rem + env(safe-area-inset-bottom, 0px)); color: var(--muted-dark); font-size: .92rem; }
.footer-mark {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(2.6rem, 8vw, 7rem); line-height: .95; letter-spacing: -.045em;
  color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,.28);
  margin-bottom: 3.5rem;
}
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem; }
.social { list-style: none; display: flex; gap: .5rem; margin: 0; padding: 0; }
.social a { display: inline-flex; width: 42px; height: 42px; align-items: center; justify-content: center; color: #fff; border: 1px solid rgba(255,255,255,.25); border-radius: 50%; }
.social a:hover, .social a:focus { background: var(--dawn); border-color: var(--dawn); color: var(--ink); }

/* ---------- small screens ---------- */
/* on phones and tablets the photo gets the top of the screen to itself */
@media (max-width: 991.98px) {
  .hero { padding-top: 46vh; padding-top: 46svh; }
  /* tighter gap between today's card and the Prayer times section */
  .hero { padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px)); }
  #prayers { padding-top: 1.75rem; }
  .hero-photo { bottom: auto; height: 70svh; height: 70vh; background-position: 32% top, center, 0 0; }
  .hero-shade { bottom: auto; height: 78vh; height: 78svh; background: linear-gradient(0deg, var(--night) 0%, var(--night) 12%, rgba(7,42,34,.75) 30%, rgba(7,42,34,.1) 55%, rgba(7,42,34,.5) 100%); }
}
@media (max-width: 575.98px) {
  .brand-text span { display: none; }
  .section { padding: 4.5rem 0; }
  .today-panel { padding: 1.3rem 1.2rem .8rem; border-radius: 18px; }
  .day-line { display: none !important; }
  .program { grid-template-columns: 1fr; gap: .75rem; padding: 2rem 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-photo { animation: none; }
  .day-now::after { -webkit-animation: none; animation: none; opacity: 0; }
  .day-now::before { -webkit-animation: none; animation: none; }
  .person-photo img, .site-nav { transition: none; }
}


/* ---------- scroll animations ---------- */
/* only hidden when JavaScript is running, so content never disappears */
html.js [data-reveal] {
  opacity: 0;
  transform: translate3d(0, 28px, 0);
  transition: opacity .9s cubic-bezier(.2,.7,.2,1), transform 1s cubic-bezier(.2,.7,.2,1);
  transition-delay: var(--d, 0s);
}
html.js [data-reveal].is-in { opacity: 1; transform: none; }

/* hero: name and motto rise in on load, card slides up last */
html.js .hero-title[data-reveal] { transform: translate3d(0, 40px, 0); transition-duration: 1.1s, 1.2s; }
html.js .hero-title[data-reveal].is-in { transform: none; }
html.js .today-panel[data-reveal] { transform: translate3d(0, 48px, 0) scale(.98); }
html.js .today-panel[data-reveal].is-in { transform: none; }
/* phones: a quicker, shorter rise so sections don't feel slow while scrolling */
@media (max-width: 767.98px) {
  html.js [data-reveal] { transform: translate3d(0, 18px, 0); transition-duration: .6s, .7s; }
  html.js .today-panel[data-reveal] { transform: translate3d(0, 24px, 0); }
}

/* headshots: soft zoom settle as they appear */
html.js .person[data-reveal] .person-photo img { transform: scale(1.015); transition: transform 1.8s cubic-bezier(.2,.7,.2,1); transition-delay: var(--d, 0s); }
html.js .person[data-reveal].is-in .person-photo img { transform: scale(1); }
html.js .person[data-reveal].is-in:hover .person-photo img { transform: scale(1.03); }

/* coming weeks: rows cascade in */
html.js [data-rows] tbody tr { opacity: 0; transform: translate3d(0, 12px, 0); transition: opacity .6s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
html.js [data-rows].is-in tbody tr { opacity: 1; transform: none; }
html.js [data-rows].is-in tbody tr:nth-child(1) { transition-delay: .15s; }
html.js [data-rows].is-in tbody tr:nth-child(2) { transition-delay: .25s; }
html.js [data-rows].is-in tbody tr:nth-child(3) { transition-delay: .35s; }
html.js [data-rows].is-in tbody tr:nth-child(4) { transition-delay: .45s; }

/* day timeline: line draws across, then the prayer dots pop in */
.day-line-fill { transition: width 1.6s cubic-bezier(.3,.7,.2,1) .2s; }
html.js .day-line:not(.is-in) .day-line-fill { width: 0 !important; }
html.js .day-line .day-mark, html.js .day-line .day-now {
  opacity: 0; transition: opacity .5s ease, translate .6s cubic-bezier(.2,.7,.2,1); translate: 0 8px;
}
html.js .day-line.is-in .day-mark, html.js .day-line.is-in .day-now { opacity: 1; translate: 0 0; }
html.js .day-line.is-in .day-mark:nth-child(2) { transition-delay: .3s; }
html.js .day-line.is-in .day-mark:nth-child(3) { transition-delay: .5s; }
html.js .day-line.is-in .day-mark:nth-child(4) { transition-delay: .7s; }
html.js .day-line.is-in .day-mark:nth-child(5) { transition-delay: .9s; }
html.js .day-line.is-in .day-mark:nth-child(6) { transition-delay: 1.1s; }
html.js .day-line.is-in .day-now { transition-delay: .25s; }

/* footer motto: outline brightens as it arrives */
html.js .footer-mark[data-reveal] { transition: opacity 1.2s ease, transform 1.2s cubic-bezier(.2,.7,.2,1), -webkit-text-stroke-color 1.6s ease; -webkit-text-stroke-color: rgba(255,255,255,0); }
html.js .footer-mark[data-reveal].is-in { -webkit-text-stroke-color: rgba(255,255,255,.28); }

.hero-photo, .visit-photo { will-change: translate; }

@media (prefers-reduced-motion: reduce) {
  html.js [data-reveal], html.js [data-rows] tbody tr, html.js .day-line .day-mark, html.js .day-line .day-now {
    opacity: 1 !important; transform: none !important; translate: none !important; transition: none !important;
  }
}


/* ---------- motion, round two ---------- */
/* headings: words rise from behind a mask */
.split .w { display: inline-block; overflow: hidden; vertical-align: top; padding: 0 .04em .12em; margin: 0 -.04em -.12em; }
.split .wi { display: inline-block; transition: transform 1.05s cubic-bezier(.2,.75,.15,1); transition-delay: calc(var(--d, 0s) + var(--i, 0) * 70ms); }
html.js .split .wi { transform: translate3d(0, 110%, 0); }
html.js .is-in .split .wi, html.js .split.is-in .wi { transform: none; }
/* the heading's own fade is replaced by the word rise */
html.js .split[data-reveal] { opacity: 1; transform: none; }

/* headshots: wipe up into view */
/* leadership: a calm, slow fade in place, one portrait after another */
html.js .person[data-reveal] { transform: translate3d(0, 14px, 0); transition: opacity 1.4s ease, transform 1.6s cubic-bezier(.2,.7,.2,1); transition-delay: var(--d, 0s); }
html.js .person[data-reveal].is-in { transform: none; }


/* buttons: gentle lift, light sweep on gold */
.btn { transition: background-color .2s, color .2s, border-color .2s, transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); transition-duration: .1s; }
.btn-dawn { position: relative; overflow: hidden; }
.btn-dawn:hover { box-shadow: 0 10px 26px -10px rgba(240,194,123,.65); }
.btn-dawn::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent);
  transform: skewX(-20deg); pointer-events: none;
}
.btn-dawn:hover::after { left: 130%; transition: left .8s ease; }

/* back to top */
.to-top {
  position: fixed; right: 20px; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); z-index: 1040;
  width: 52px; height: 52px; border-radius: 50%; border: 0; padding: 0;
  display: grid; place-items: center; color: #fff;
  background: rgba(7,42,34,.72); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: 0 10px 30px -12px rgba(0,0,0,.6);
  opacity: 0; visibility: hidden; transform: translateY(14px) scale(.9);
  transition: opacity .35s ease, transform .45s cubic-bezier(.2,.7,.2,1), visibility .35s, background-color .2s;
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
/* out of the way while typing in a field (search, contact form) */
.to-top.is-visible.is-typing { opacity: 0; visibility: hidden; transform: translateY(14px) scale(.9); }
@media (max-width: 575.98px) {
  .to-top { width: 44px; height: 44px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
}
.to-top:hover { background: var(--dawn); color: var(--ink); }
.to-top:hover .to-top-arrow { transform: translateY(-2px); }
.to-top-arrow { position: relative; transition: transform .3s ease; }
.to-top-ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.to-top-ring circle { fill: none; stroke: rgba(255,255,255,.15); stroke-width: 2; }
.to-top-ring .to-top-progress { stroke: var(--dawn); stroke-linecap: round; transition: stroke-dashoffset .1s linear; }
.to-top:hover .to-top-progress { stroke: var(--ink); }

@media (prefers-reduced-motion: reduce) {
  html.js .person[data-reveal] .person-photo { clip-path: none !important; transition: none !important; }
  .btn:hover { transform: none; }
  .btn-dawn::after { display: none; }
}

/* ---------- responsive fixes ---------- */
/* match page padding to the wider grid spacing on laptops and iPad landscape */
@media (min-width: 992px) {
  .container-xl { padding-left: 1.5rem; padding-right: 1.5rem; }
}
/* phones: keep the dates column pinned while swiping the times table */
@media (max-width: 767.98px) {
  .times-table tbody th, .times-table thead th:first-child {
    position: sticky; left: 0; z-index: 2;
    background: var(--night);
    box-shadow: 8px 0 12px -8px rgba(0,0,0,.6);
  }
  .times-table tr.is-current > th { background: #2a3a2c; }
  .times-table .month-row th { position: sticky; left: 0; }
}
/* phones: the whole week fits without swiping (AM/PM drops, the order makes it clear) */
@media (max-width: 575.98px) {
  .times-table thead th { padding: .6rem .3rem; font-size: .72rem; text-align: center; }
  .times-table thead th:first-child { text-align: left; padding-left: .5rem; }
  .times-table td, .times-table tbody th { padding: .75rem .3rem; font-size: .95rem; text-align: center; }
  .times-table tbody th { text-align: left; padding-left: .5rem; line-height: 1.15; }
  .times-table tbody th, .times-table thead th:first-child { position: static; box-shadow: none; background: var(--bs-table-bg); }
  .times-table tr.is-current > th { background: var(--bs-table-bg); }
  .times-table td .ampm { display: none; }
  .wk-date { display: block; font-size: .75rem; font-weight: 500; opacity: .7; }
  .times-table .cell-tag { left: 0; right: 0; text-align: center; -webkit-transform: none; transform: none; bottom: .3rem; font-size: .5rem; letter-spacing: .03em; opacity: .9; }
  .times-table tr.note-row td { text-align: left; }
}
@media (max-width: 359.98px) {
  .times-table thead th { padding: .55rem .15rem; font-size: .64rem; }
  .times-table td, .times-table tbody th { padding: .7rem .15rem; font-size: .84rem; }
  .times-table tbody th { padding-left: .35rem; }
}

/* ---------- phones and tablets: seamless hero load ---------- */
/* photo and green fade are one layer here, so Safari can't show a seam while animating */
@media (max-width: 991.98px) {
  .hero-photo {
    height: 78vh; height: 78svh;
    background:
      linear-gradient(0deg, var(--night) 0%, var(--night) 12%, rgba(7,42,34,.75) 30%, rgba(7,42,34,.1) 55%, rgba(7,42,34,.5) 100%),
      url("../images/hero.jpg") 32% top / cover no-repeat,
      var(--night);
    background:
      linear-gradient(0deg, var(--night) 0%, var(--night) 12%, rgba(7,42,34,.75) 30%, rgba(7,42,34,.1) 55%, rgba(7,42,34,.5) 100%),
      image-set(url("../images/hero.avif") type("image/avif"), url("../images/hero.jpg") type("image/jpeg")) 32% top / cover no-repeat,
      var(--night);
    animation: hero-fade 1.4s ease both;
    will-change: auto;
  }
  .hero-shade { display: none; }
  /* card sits on solid green here, so no blur needed (avoids Safari flicker) */
  .today-panel { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(255,255,255,.04); }
  .hero-actions .btn-ghost { -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@keyframes hero-fade { from { opacity: 0; } to { opacity: 1; } }

/* ---------- prayer times where you are ---------- */
.home-times { margin-top: 5.5rem; padding-top: 4rem; border-top: 1px solid var(--line-dark); }
.home-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 1.5rem 2rem; }
.home-title { font-family: var(--display); font-weight: 700; font-size: clamp(1.9rem, 3.6vw, 2.75rem); letter-spacing: -.04em; line-height: 1; margin-bottom: .6rem; }
.home-lede { color: var(--muted-dark); margin: 0; max-width: 46ch; }
.home-find { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }
.home-find .btn { display: inline-flex; align-items: center; gap: .5rem; }
.home-search { display: flex; align-items: center; border: 1px solid rgba(255,255,255,.3); border-radius: 999px; padding: 0 .35rem 0 1.2rem; height: 48px; transition: border-color .2s; }
.home-search:focus-within { border-color: var(--dawn); }
.home-search input { background: transparent; border: 0; color: #fff; font: inherit; font-weight: 600; font-size: .95rem; width: 12.5rem; outline: none; }
.home-search input::placeholder { color: var(--muted-dark); font-weight: 500; }
.home-search input::-webkit-search-cancel-button { display: none; }
.home-search button { width: 38px; height: 38px; border-radius: 50%; border: 0; background: transparent; color: #fff; display: grid; place-items: center; }
.home-search button:hover { background: var(--dawn); color: var(--ink); }

.home-card { margin-top: 2.25rem; border: 1px solid var(--line-dark); border-radius: 22px; background: linear-gradient(180deg, var(--night-2), var(--night)); padding: 1.75rem 2rem 1.25rem; }
.home-card-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.home-place { font-family: var(--display); font-weight: 600; font-size: 1.2rem; letter-spacing: -.02em; margin: 0; }
.home-date { color: var(--muted-dark); margin: 0; font-size: .95rem; }
.home-status { margin: 0; font-size: .9rem; font-weight: 600; color: var(--dawn); text-align: right; }
.home-status.is-error { color: #ffb4a8; }

.home-body { display: grid; grid-template-columns: minmax(180px, 220px) 1fr auto; grid-template-areas: "next grid qibla"; gap: 2rem; align-items: center; margin: 1.75rem 0 1.5rem; }
.home-next { grid-area: next; }
.home-next-label { margin: 0; font-size: .85rem; font-weight: 600; color: var(--muted-dark); }
.home-next-name { margin: .1rem 0 0; font-family: var(--display); font-weight: 600; font-size: 1.15rem; }
.home-next-time { margin: 0; font-family: var(--display); font-weight: 200; font-size: clamp(2.8rem, 4.5vw, 3.6rem); letter-spacing: -.045em; line-height: 1.05; color: var(--dawn); font-variant-numeric: tabular-nums; }
.home-next-time .ampm { font-size: .32em; font-weight: 500; letter-spacing: 0; margin-left: .3rem; opacity: 1; }
.home-next-count { margin: .15rem 0 0; color: var(--muted-dark); font-size: .92rem; }

.home-grid { grid-area: grid; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, 1fr); }
.home-slot { padding: .35rem 1rem; border-left: 1px solid var(--line-dark); }
.home-slot-name { display: block; font-size: .85rem; font-weight: 600; color: var(--muted-dark); margin-bottom: .2rem; }
.home-slot-time { display: block; font-size: 1.3rem; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.home-slot.is-minor .home-slot-time { color: var(--muted-dark); font-weight: 500; }
.home-slot.is-past { opacity: .42; }
.home-slot.is-next { border-left-color: var(--dawn); }
.home-slot.is-next .home-slot-name, .home-slot.is-next .home-slot-time { color: var(--dawn); }

.home-qibla { grid-area: qibla; display: flex; align-items: center; gap: 1rem; padding-left: 2rem; border-left: 1px solid var(--line-dark); }
.qibla-dial { position: relative; width: 84px; height: 84px; border-radius: 50%; border: 1px solid rgba(255,255,255,.25); background: radial-gradient(circle, rgba(255,255,255,.04), transparent 70%); flex: none; }
.qibla-n { position: absolute; top: 4px; left: 50%; transform: translateX(-50%); font-size: .7rem; font-weight: 700; color: var(--muted-dark); }
.qibla-needle { position: absolute; left: 50%; top: 50%; width: 3px; height: 32px; border-radius: 3px; background: linear-gradient(0deg, rgba(240,194,123,.2), var(--dawn)); transform-origin: 50% 100%; transform: translate(-50%, -100%); transition: transform 1.2s cubic-bezier(.2,.7,.2,1); box-shadow: 0 0 10px rgba(240,194,123,.5); }
.qibla-center { position: absolute; left: 50%; top: 50%; width: 9px; height: 9px; border-radius: 50%; background: #fff; transform: translate(-50%, -50%); }
.qibla-deg { margin: 0; font-family: var(--display); font-weight: 600; font-size: 1.35rem; letter-spacing: -.02em; }
.qibla-note { margin: 0; color: var(--muted-dark); font-size: .85rem; }

.home-settings { border-top: 1px solid var(--line-dark); padding-top: 1rem; }
.home-settings summary { cursor: pointer; font-weight: 600; font-size: .92rem; color: var(--muted-dark); list-style: none; display: inline-block; }
.home-settings summary::-webkit-details-marker { display: none; }
.home-settings summary::after { content: "+"; margin-left: .5rem; color: var(--dawn); }
.home-settings[open] summary::after { content: "\2212"; }
.home-settings summary:hover { color: #fff; }
.home-settings-grid { display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; margin-top: 1rem; }
.home-settings label { display: flex; flex-direction: column; gap: .35rem; font-size: .85rem; font-weight: 600; color: var(--muted-dark); }
.home-settings select {
  background: var(--night) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='16' height='16'%3E%3Cpath d='m6 9 6 6 6-6' fill='none' stroke='%23f0c27b' stroke-width='2'/%3E%3C/svg%3E") right .8rem center no-repeat;
  color: #fff; border: 1px solid rgba(255,255,255,.25); border-radius: 12px; padding: .65rem 2.4rem .65rem .9rem; font: inherit; font-weight: 600; font-size: .95rem; appearance: none; -webkit-appearance: none; min-width: 16rem; max-width: 100%;
}
.home-settings select:focus { border-color: var(--dawn); outline: none; }
.home-fine { color: var(--muted-dark); font-size: .85rem; margin: 1rem 0 .25rem; max-width: 70ch; }

@media (max-width: 1199.98px) {
  .home-body { grid-template-columns: 1fr auto; grid-template-areas: "next qibla" "grid grid"; }
  .home-qibla { padding-left: 0; border-left: 0; }
}
@media (max-width: 767.98px) {
  .home-times { margin-top: 2.75rem; padding-top: 2.75rem; }
  .home-find { width: 100%; }
  .home-find .btn { flex: 1 1 auto; justify-content: center; }
  .home-search { flex: 1 1 100%; }
  .home-search input { width: 100%; }
  .home-card { padding: 1.4rem 1.25rem 1rem; }
  .home-card-top { flex-direction: column; gap: .4rem; }
  .home-status { text-align: left; }
  .home-grid { grid-template-columns: repeat(3, 1fr); row-gap: 1rem; }
  .home-slot { padding: .25rem .75rem; }
  .home-slot-time { font-size: 1.15rem; }
  .qibla-dial { width: 68px; height: 68px; }
  .qibla-needle { height: 26px; }
  .home-settings select { min-width: 0; width: 100%; }
  .home-settings label { flex: 1 1 100%; }
}
.home-qibla > div { white-space: nowrap; }
@media (min-width: 1200px) { .home-body { gap: 1.5rem; grid-template-columns: minmax(170px, 200px) 1fr auto; } .home-slot { padding: .35rem .85rem; } }
.home-grid { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.home-settings summary { padding: .45rem 0; }
.home-search button { width: 40px; height: 40px; }
@media (max-width: 767.98px) { .home-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 400px) {
  .home-slot { padding: .2rem .55rem; }
  .home-slot-time { font-size: 1.02rem; }
  .home-slot-time .ampm { margin-left: .15em; }
}
.home-search input { align-self: stretch; height: 100%; }
@media (max-width: 480px) {
  .home-body { grid-template-columns: minmax(0, 1fr); grid-template-areas: "next" "grid" "qibla"; gap: 1.5rem; }
  .home-qibla { border-top: 1px solid var(--line-dark); padding-top: 1.25rem; }
}
@media (min-width: 1200px) and (max-width: 1439.98px) {
  .home-body { grid-template-columns: 1fr auto; grid-template-areas: "next qibla" "grid grid"; gap: 1.75rem; }
  .home-qibla { padding-left: 0; border-left: 0; }
}

.home-fine { border-top: 1px solid var(--line-dark); padding-top: 1rem; margin-top: 0; }
.home-fine { max-width: none; }

/* ---------- latest from Facebook ---------- */
.fb-feed { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 520px); gap: 3rem; align-items: center; margin-top: 5rem; padding-top: 4rem; border-top: 1px solid var(--line-light); }
.fb-title { font-family: var(--display); font-weight: 700; font-size: clamp(1.9rem, 3.6vw, 2.75rem); letter-spacing: -.04em; line-height: 1; margin-bottom: .75rem; }
.fb-text { color: var(--muted-light); max-width: 40ch; margin-bottom: 1.5rem; }
.fb-follow { display: inline-flex; align-items: center; gap: .5rem; }
.fb-follow svg { width: 18px; height: 18px; }
.fb-frame { justify-self: end; width: 100%; max-width: 520px; }
.fb-gate {
  border-radius: 22px; padding: 3rem 2rem; text-align: center; color: #fff;
  background: radial-gradient(120% 90% at 50% 0%, var(--night-2), var(--night));
  box-shadow: 0 30px 60px -30px rgba(7,42,34,.55);
}
.fb-badge { display: inline-grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18); color: #fff; margin-bottom: 1.25rem; }
.fb-badge svg { width: 26px; height: 26px; }
.fb-gate-title { font-family: var(--display); font-weight: 600; font-size: 1.4rem; letter-spacing: -.02em; margin: 0 0 .5rem; }
.fb-gate-note { color: var(--muted-dark); font-size: .88rem; max-width: 34ch; margin: 0 auto 1.5rem; }
.fb-frame.is-loaded { background: #fff; border-radius: 18px; overflow: hidden; border: 1px solid var(--line-light); display: flex; justify-content: center; }
.fb-iframe { display: block; border: 0; max-width: 100%; }
@media (max-width: 991.98px) {
  .fb-feed { grid-template-columns: 1fr; gap: 2rem; margin-top: 4rem; padding-top: 3rem; }
  .fb-frame { justify-self: stretch; max-width: none; }
}
@media (max-width: 575.98px) { .fb-gate { padding: 2.25rem 1.25rem; } }
.btn-ink { background: var(--night); border-color: var(--night); }
.btn-ink:hover, .btn-ink:focus-visible { background: var(--dawn); border-color: var(--dawn); color: var(--ink); }
/* placeholder shown only until the feed loads */
.fb-frame:not(.is-loaded) { min-height: 640px; border-radius: 18px; background: rgba(7,42,34,.05); border: 1px solid var(--line-light); display: grid; place-items: center; }
.fb-fallback { font-weight: 600; color: var(--night); }
.fb-fallback { display: inline-block; padding: .7rem 1.1rem; }
.fb-follows { display: flex; flex-wrap: wrap; gap: .75rem; }
.fb-follow svg { flex: none; }
@media (max-width: 400px) { .fb-follows .btn { flex: 1 1 100%; justify-content: center; } }
.fb-frame:not(.is-loaded) { min-height: 520px; }
@media (max-width: 767.98px) { .fb-frame:not(.is-loaded) { min-height: 460px; } }

/* ---------- prayer times: view switcher, week/month tables ---------- */
.home-tools { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; margin-top: 1.4rem; }
.seg { display: inline-flex; padding: 4px; border-radius: 999px; background: rgba(255,255,255,.06); border: 1px solid var(--line-dark); }
.seg-btn { border: 0; background: transparent; color: var(--muted-dark); font: inherit; font-weight: 700; font-size: .9rem; padding: .5rem 1.05rem; border-radius: 999px; min-height: 38px; transition: background-color .25s, color .25s; }
.seg-btn:hover { color: #fff; }
.seg-btn.is-active { background: var(--dawn); color: var(--ink); }
.home-monthnav { display: inline-flex; align-items: center; gap: .25rem; font-weight: 700; }
.home-monthnav[hidden] { display: none; }
.home-monthnav span { min-width: 9.5rem; text-align: center; }
.home-monthnav button { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line-dark); background: transparent; color: #fff; display: grid; place-items: center; }
.home-monthnav button:hover { background: rgba(255,255,255,.1); }
.home-print { margin-left: auto; display: inline-flex; align-items: center; gap: .5rem; border: 1px solid rgba(255,255,255,.3); background: transparent; color: #fff; font: inherit; font-weight: 700; font-size: .9rem; padding: .55rem 1.1rem; border-radius: 999px; min-height: 40px; transition: background-color .2s, color .2s, border-color .2s; }
.home-print:hover { background: #fff; color: var(--ink); border-color: #fff; }
.home-body[hidden], .home-table-wrap[hidden] { display: none !important; }

.home-table-wrap { margin: 1.4rem 0 1.25rem; overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 14px; border: 1px solid var(--line-dark); max-height: 34rem; overflow-y: auto; }
.home-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; min-width: 640px; }
.home-table thead th { position: sticky; top: 0; z-index: 2; background: #0b3329; color: var(--muted-dark); font-size: .8rem; font-weight: 700; text-align: left; padding: .7rem .8rem; white-space: nowrap; border-bottom: 1px solid var(--line-dark); }
.home-table thead th.minor { opacity: .7; }
.home-table tbody th, .home-table td { padding: .55rem .8rem; white-space: nowrap; border-bottom: 1px solid var(--line-dark); font-weight: 600; }
.home-table tbody tr:last-child > * { border-bottom: 0; }
.home-table tbody th { font-weight: 700; text-align: left; }
.home-table td.minor { color: var(--muted-dark); font-weight: 500; }
.home-table .ampm { font-size: .72em; margin-left: .2em; opacity: .6; }
.ht-day { display: inline-block; min-width: 1.4rem; }
.ht-sub { color: var(--muted-dark); font-weight: 600; font-size: .85em; }
.home-table tr.is-fri > * { background: rgba(240,194,123,.07); }
.home-table tr.is-today > * { background: rgba(240,194,123,.16); color: var(--dawn); }
.home-table tr.is-today .ht-sub { color: var(--dawn); }
@media (max-width: 767.98px) {
  .home-print { margin-left: 0; }
  .home-tools { gap: .6rem; }
  .home-table thead th:first-child, .home-table tbody th { position: sticky; left: 0; z-index: 1; background: #0a3027; box-shadow: 8px 0 12px -8px rgba(0,0,0,.6); }
  .home-table thead th:first-child { z-index: 3; }
  .home-table tr.is-today > th { background: #3a4a33; }
}
@media (max-width: 400px) {
  .seg-btn { padding: .45rem .8rem; }
  .home-monthnav span { min-width: 8rem; }
}

/* ---------- printable timetable ---------- */
.print-sheet { display: none; }
@media print {
  @page { margin: .4in; }
  html, body { background: #fff !important; margin: 0 !important; padding: 0 !important; height: auto !important; min-height: 0 !important; }
  body > *:not(.print-sheet) { display: none !important; }
  .print-sheet {
    display: block !important; color: #14201c; font-family: var(--body);
    padding: 0; break-inside: avoid; page-break-inside: avoid; page-break-after: avoid;
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
    --ps-night: #072a22; --ps-gold: #c9963f; --ps-goldsoft: #f6ecd9; --ps-mint: #e9f1ee; --ps-muted: #6b7a75; --ps-line: #e2e8e5;
  }
  .print-sheet * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .ps-head { display: flex; justify-content: space-between; align-items: flex-start; padding-bottom: .14in; border-bottom: 2px solid var(--ps-night); }
  .ps-brand { display: flex; gap: 14px; align-items: center; }
  .ps-mark { width: 52px; height: 52px; border-radius: 50%; background: var(--ps-night); display: grid; place-items: center; }
  .ps-mark img { width: 44px; height: 44px; }
  .ps-name { font-family: var(--display); font-weight: 700; font-size: 26px; letter-spacing: -.035em; line-height: 1; margin: 0; color: var(--ps-night); }
  .ps-sub { margin: 5px 0 0; font-size: 11px; font-weight: 600; color: var(--ps-muted); }
  .ps-title { text-align: right; }
  .ps-ar { font-family: "Tajawal", var(--arabic); font-weight: 700; font-size: 20px; color: var(--ps-gold); margin: 0; line-height: 1.2; }
  .ps-month { font-family: var(--display); font-weight: 700; font-size: 26px; letter-spacing: -.035em; margin: 2px 0 0; line-height: 1.05; }
  .ps-place { margin: 4px 0 0; font-size: 11.5px; font-weight: 600; color: var(--ps-muted); }
  .ps-table { width: 100%; border-collapse: collapse; margin-top: .12in; page-break-inside: avoid; font-variant-numeric: tabular-nums; }
  .ps-table thead th { font-family: var(--display); font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #fff; background: var(--ps-night); padding: 6px 6px; text-align: center; }
  .ps-table thead th:first-child { text-align: left; padding-left: 12px; border-radius: 8px 0 0 8px; }
  .ps-table thead th:last-child { border-radius: 0 8px 8px 0; }
  .ps-table thead th.ps-minor { color: rgba(255,255,255,.6); font-weight: 600; }
  .ps-table tbody td { padding: 0 6px; height: 20px; line-height: 1; text-align: center; font-size: 12px; font-weight: 600; border-bottom: 1px solid var(--ps-line); color: #14201c; }
  .ps-table tbody td:first-child { text-align: left; padding-left: 12px; white-space: nowrap; }
  .ps-d { display: inline-block; width: 22px; font-family: var(--display); font-weight: 700; font-size: 12.5px; }
  .ps-wd { font-size: 10px; font-weight: 600; color: var(--ps-muted); text-transform: uppercase; letter-spacing: .05em; }
  .ps-table td.ps-minor { color: var(--ps-muted); font-weight: 500; }
  .ps-ap { font-size: 8.5px; font-weight: 600; color: var(--ps-muted); margin-left: 2px; }
  .ps-fri td { background: var(--ps-goldsoft); }
  .ps-fri .ps-wd { color: #9a6b1d; }
  .ps-today td { background: var(--ps-mint); }
  .ps-today td:first-child { box-shadow: inset 3px 0 0 var(--ps-night); }
  .ps-tag { font-size: 8px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #9a6b1d; margin-left: 6px; }
  .ps-today .ps-tag { color: var(--ps-night); }
  .ps-foot { margin-top: .1in; padding-top: .09in; border-top: 1px solid var(--ps-line); display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; font-size: 9.5px; color: var(--ps-muted); }
  .ps-foot b { color: #14201c; }
  .ps-legend { display: flex; gap: 14px; white-space: nowrap; }
  .ps-sw { display: inline-block; width: 10px; height: 10px; border-radius: 3px; vertical-align: -1px; margin-right: 5px; }
  .ps-sw-today { background: var(--ps-mint); box-shadow: inset 2px 0 0 var(--ps-night); }
  .ps-sw-fri { background: var(--ps-goldsoft); }
}

/* ---------- weekly times from the sheet ---------- */
.today-note { margin: .75rem 0 .25rem; padding: .7rem .9rem; border-radius: 12px; background: rgba(240,194,123,.1); color: var(--dawn); font-size: .92rem; font-weight: 600; }
.today-note[hidden], .today-notice[hidden] { display: none; }
.times-table td { position: relative; }
.cell-tag { position: absolute; left: 1rem; bottom: .2rem; font-size: .66rem; font-weight: 700; color: var(--dawn); letter-spacing: .02em; line-height: 1; }
.times-table tr.is-friday > * { background: rgba(240,194,123,.05); }
.times-table tr.note-row td { font-size: .85rem; font-weight: 500; font-style: italic; color: var(--muted-dark); white-space: normal; padding-top: 0; }
.times-table tr.note-row.is-current > * { --bs-table-bg: rgba(240,194,123,.1); color: var(--dawn); }
.times-table .week-empty { text-align: center; color: var(--muted-dark); padding: 1.5rem; white-space: normal; }
.times-table tr.note-row td { color: var(--dawn); font-style: normal; font-weight: 600; padding-top: .7rem; padding-bottom: .7rem; }

/* ---------- MTA live card ---------- */
.mta-card { position: relative; display: grid; grid-template-columns: 1fr 1.05fr; gap: 3.5rem; align-items: center; margin-top: 4rem; padding: 2.4rem; border-radius: 14px; text-decoration: none; color: #fff; overflow: hidden;
  background: linear-gradient(135deg, #0b3228 0%, var(--night) 60%, #051b15 100%); border: 1px solid rgba(7,42,34,.9);
  box-shadow: 0 1px 0 rgba(255,255,255,.06) inset, 0 24px 50px -28px rgba(7,42,34,.7); transition: transform .45s cubic-bezier(.2,.7,.2,1), box-shadow .45s ease; }
@media (hover: hover) { .mta-card:hover { transform: translateY(-3px); box-shadow: 0 1px 0 rgba(255,255,255,.06) inset, 0 34px 60px -28px rgba(7,42,34,.8); color: #fff; } }
.mta-live { display: inline-flex; align-items: center; gap: .55rem; font-size: .72rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: #fff; margin-bottom: 1.1rem; padding: .35rem .7rem; border: 1px solid rgba(255,255,255,.16); border-radius: 4px; }
.mta-title { font-family: var(--display); font-weight: 700; font-size: clamp(2rem, 3.6vw, 2.8rem); letter-spacing: -.045em; line-height: .95; margin-bottom: .35rem; }
.mta-kicker { font-family: var(--display); font-weight: 500; font-size: 1rem; color: var(--dawn); margin-bottom: 1.1rem; letter-spacing: -.01em; }
.mta-text { color: var(--muted-dark); max-width: 46ch; margin-bottom: 1.8rem; font-size: 1rem; }
.mta-actions { display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; }
.mta-btn { display: inline-flex; align-items: center; gap: .5rem; }
@media (hover: hover) { .mta-card:hover .mta-btn { background: #fff; border-color: #fff; } }
.mta-site { font-size: .9rem; color: var(--muted-dark); }
.mta-site a { color: #fff; font-weight: 700; text-underline-offset: 3px; display: inline-block; padding: .75rem .3rem; margin: -.75rem -.3rem; }
.mta-screen { display: block; }
.live-dot { position: relative; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #ff3b3b; flex: none; }
.live-dot::after { content: ""; position: absolute; left: -5px; top: -5px; width: 18px; height: 18px; border-radius: 50%; border: 2px solid #ff3b3b; opacity: 0;
  -webkit-transform: scale(.4); transform: scale(.4); -webkit-animation: live-ring 1.8s cubic-bezier(.2,.6,.3,1) infinite; animation: live-ring 1.8s cubic-bezier(.2,.6,.3,1) infinite; }
@-webkit-keyframes live-ring { 0% { -webkit-transform: scale(.4); opacity: .9; } 100% { -webkit-transform: scale(1.3); opacity: 0; } }
@keyframes live-ring { 0% { transform: scale(.4); opacity: .9; } 100% { transform: scale(1.3); opacity: 0; } }
.mta-screen { position: relative; border-radius: 10px; padding: 6px; background: #020d0a; border: 1px solid rgba(255,255,255,.12); box-shadow: 0 20px 40px -20px rgba(0,0,0,.8); }
.mta-screen-inner { position: relative; padding-top: 56.25%; border-radius: 6px; overflow: hidden;
  background: #163db5 url(../images/mta-ident.jpg) center / cover no-repeat; }
.mta-screen-inner::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0,0,0,.35), transparent 35%); pointer-events: none; }
.mta-screen-inner::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(115deg, transparent 38%, rgba(255,255,255,.09) 50%, transparent 62%); -webkit-transform: translateX(-100%); transform: translateX(-100%); transition: transform 1.1s cubic-bezier(.2,.7,.2,1); }
@media (hover: hover) { .mta-card:hover .mta-screen-inner::before { -webkit-transform: translateX(100%); transform: translateX(100%); } }
.mta-tag { position: absolute; z-index: 2; right: 12px; top: 12px; display: inline-flex; align-items: center; gap: .4rem; background: #ff3b3b; color: #fff; border-radius: 3px; padding: .22rem .5rem; font-size: .68rem; font-weight: 800; letter-spacing: .12em; }
.mta-tag .live-dot { background: #fff; width: 6px; height: 6px; }
.mta-tag .live-dot::after { display: none; }
.mta-play { position: absolute; z-index: 2; left: 12px; bottom: 12px; display: inline-flex; align-items: center; gap: .5rem; padding: .45rem .9rem .45rem .7rem; border-radius: 999px; background: rgba(0,0,0,.35); border: 1px solid rgba(255,255,255,.25); color: #fff; font-size: .8rem; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); font-weight: 700; transition: background .3s, color .3s; }
.mta-play svg { width: 16px; height: 16px; }
@media (hover: hover) { .mta-card:hover .mta-play { background: var(--dawn); color: var(--ink); border-color: var(--dawn); } }
@media (max-width: 991.98px) { .mta-card { grid-template-columns: 1fr; gap: 1.8rem; padding: 1.6rem; } .mta-screen { order: -1; } }
@media (max-width: 575.98px) { .mta-play { display: none; } }
@media (prefers-reduced-motion: reduce) { .live-dot::after { -webkit-animation: none; animation: none; } .mta-card, .mta-screen-inner::before { transition: none; } }

/* ---------- announcement banner (from the sheet) ---------- */
.announce { position: fixed; top: 0; left: 0; right: 0; z-index: 1031; color: var(--ink); font-size: .9375rem; line-height: 1.35;
  background: linear-gradient(90deg, var(--dawn-deep), var(--dawn));
  -webkit-transform: translateY(-100%); transform: translateY(-100%); transition: transform .45s cubic-bezier(.2,.7,.2,1); }
.announce.is-in { -webkit-transform: none; transform: none; }
.announce .container-xl { display: flex; align-items: center; gap: .75rem; min-height: 44px; padding-top: .5rem; padding-bottom: .5rem; }
.announce-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--night); flex: none; box-shadow: 0 0 0 4px rgba(7,42,34,.15); }
.announce-text { flex: 1; font-weight: 600; margin: 0; }
.announce-text a { font-weight: 700; color: var(--ink); text-underline-offset: 3px; white-space: nowrap; }
.announce-close { flex: none; border: 0; background: rgba(7,42,34,.1); color: var(--ink); width: 30px; height: 30px; border-radius: 50%; font-size: 1.15rem; line-height: 1; display: grid; place-items: center; transition: background .2s; }
.announce-close:hover { background: rgba(7,42,34,.2); }
body.has-announce .site-nav { top: var(--announce-h, 0px); }
body.has-announce { padding-top: var(--announce-h, 0px); }
html { scroll-padding-top: calc(84px + var(--announce-h, 0px)); }
@media print { .announce { display: none !important; } body.has-announce { padding-top: 0; } }
@media (prefers-reduced-motion: reduce) { .announce { transition: none; } }

.learn-link { display: flex; align-items: center; gap: 1.1rem; margin-top: 1.75rem; padding: 1.1rem 1.4rem; border: 1px solid rgba(240,194,123,.35); border-radius: 20px; background: linear-gradient(90deg, rgba(240,194,123,.10), rgba(240,194,123,.02)); text-decoration: none; transition: border-color .25s, transform .35s cubic-bezier(.2,.7,.2,1), background .25s; }
@media (hover: hover) { .learn-link:hover { border-color: var(--dawn); transform: translateY(-2px); background: linear-gradient(90deg, rgba(240,194,123,.16), rgba(240,194,123,.04)); } }
.learn-icon { flex: none; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: rgba(240,194,123,.12); }
.learn-text { flex: 1; display: flex; flex-direction: column; }
.learn-text b { font-family: var(--display); font-size: 1.1rem; color: #fff; }
.learn-text small { color: var(--muted-dark); font-size: .9rem; margin-top: .15rem; }
.learn-arrow { color: var(--dawn); font-size: 1.4rem; transition: transform .3s; }
/* phones: no hover state (it made iPhones need two taps), just a quick press effect */
.learn-link:active, .mta-card:active { transform: scale(.98); }
@media (hover: hover) { .learn-link:hover .learn-arrow { transform: translateX(4px); } }

/* ---------- weather at each prayer (today only) ---------- */
.prayer-right { display: inline-flex; align-items: center; gap: 1rem; }
.wx { display: inline-flex; align-items: center; gap: .3rem; font-size: .82rem; font-weight: 600; color: var(--muted-dark); font-variant-numeric: tabular-nums; min-width: 3.4rem; justify-content: flex-end; }
.wx:empty { min-width: 0; }
.wx svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; opacity: .9; }
.prayer-row.is-next .wx { color: rgba(240,194,123,.8); }
.wx-alert { display: flex; align-items: center; gap: .6rem; margin: .75rem 0 .25rem; padding: .65rem .9rem; border-radius: 12px; background: rgba(120,170,255,.1); border: 1px solid rgba(120,170,255,.22); color: #cfe0ff; font-size: .9rem; font-weight: 600; }
.wx-alert[hidden] { display: none; }
.wx-alert svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.footer-credit { display: block; margin-top: .3rem; font-size: .7rem; letter-spacing: .01em; opacity: .45; }
.footer-credit a { color: inherit; text-underline-offset: 2px; }
.footer-nap { display: block; margin-top: .35rem; font-size: .8rem; opacity: .7; }
.footer-nap a { color: inherit; text-underline-offset: 2px; }
/* small links get a larger tap area without changing how they look */
.footer-nap a, .footer-credit a, .fb-post-more a { display: inline-block; padding: 12px 6px; margin: -12px -6px; }


/* numbers keep the original look: SF Pro on Apple devices, Figtree everywhere else */
.next-time, .jumuah-time, .home-next-time, .prayer-time, .times-table td, .home-slot-time, .home-table td,
.day-label-time, .wx, .ps-table td { font-family: var(--nums); }

/* ---------- Add to Home Screen ---------- */
.a2hs { display: flex; align-items: center; gap: .65rem; width: 100%; margin: .7rem 0 .2rem; padding: .8rem 0 0; border: 0; border-top: 1px solid rgba(255,255,255,.1); background: none; color: var(--dawn); font: 600 .88rem/1.2 var(--body); text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.a2hs[hidden] { display: none; }
.a2hs svg { flex: none; width: 30px; height: 30px; padding: 6px; border-radius: 9px; background: rgba(240,194,123,.14); }
.a2hs small { display: block; margin-top: 2px; color: rgba(255,255,255,.55); font-weight: 500; font-size: .76rem; }
.a2hs:active { opacity: .7; }
.a2hs:focus-visible { outline: 2px solid var(--dawn); outline-offset: 4px; border-radius: 6px; }
.a2-back { position: fixed; inset: 0; z-index: 2000; background: rgba(2,14,11,.55); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); opacity: 0; transition: opacity .25s ease; }
.a2-sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 2001; max-width: 560px; margin: 0 auto; padding: .6rem 1.4rem calc(1.5rem + env(safe-area-inset-bottom, 0px)); border-radius: 22px 22px 0 0; background: #0d3a2f; color: #fff; font-family: var(--body); box-shadow: 0 -20px 60px rgba(0,0,0,.5); transform: translateY(105%); transition: transform .32s cubic-bezier(.2,.8,.2,1); }
.a2-back.open { opacity: 1; }
.a2-sheet.open { transform: none; }
.a2-grab { width: 40px; height: 5px; margin: 0 auto 1rem; border-radius: 3px; background: rgba(255,255,255,.25); }
.a2-head { display: flex; align-items: center; gap: .9rem; margin-bottom: 1rem; }
.a2-head img { width: 52px; height: 52px; border-radius: 12px; flex: none; }
.a2-head b { display: block; font: 700 1.08rem/1.25 var(--display); }
.a2-head span { color: rgba(255,255,255,.6); font-size: .85rem; }
.a2-steps { list-style: none; margin: 0; padding: 0; counter-reset: a2; }
.a2-steps li { display: flex; align-items: center; gap: .8rem; padding: .75rem 0; border-top: 1px solid rgba(255,255,255,.08); font-size: .95rem; line-height: 1.4; }
.a2-steps li::before { counter-increment: a2; content: counter(a2); flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--dawn); color: #0c1424; font: 700 .8rem/26px var(--nums); text-align: center; }
.a2-steps em { display: block; margin-top: 2px; color: rgba(255,255,255,.55); font-style: normal; font-size: .8rem; }
.a2-ico { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; margin: 0 1px; border-radius: 7px; background: rgba(255,255,255,.12); vertical-align: middle; }
.a2-ico svg { width: 15px; height: 15px; }
.a2-steps em .a2-ico { width: 18px; height: 18px; } .a2-steps em .a2-ico svg { width: 12px; height: 12px; }
.a2-done { display: block; width: 100%; margin-top: 1rem; padding: .85rem; border: 0; border-radius: 999px; background: rgba(255,255,255,.1); color: #fff; font: 600 .95rem var(--body); }
@media (prefers-reduced-motion: reduce) { .a2-sheet, .a2-back { transition: none; } }

/* links to the two prayer apps */
.app-promo { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--line-dark); font-size: .88rem; color: var(--muted-dark); }
.app-promo a { display: inline-flex; align-items: center; gap: .5rem; color: #fff; font-weight: 600; text-decoration: none; padding: .35rem .8rem .35rem .35rem; border-radius: 999px; border: 1px solid var(--line-dark); }
.app-promo a img { border-radius: 8px; }
@media (hover: hover) { .app-promo a:hover { border-color: var(--dawn); color: var(--dawn); } }

/* live Qibla compass (phones): the dial turns with the phone and locks green when facing the Qibla */
.qibla-rotor { position: absolute; inset: 0; border-radius: 50%; will-change: transform; }
.qibla-tick { display: none; position: absolute; top: -9px; left: 50%; width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 8px solid #fff; transform: translateX(-50%); }
.qibla-live-btn { display: inline-flex; margin-top: .55rem; padding: .45rem .9rem; border-radius: 999px; border: 1px solid rgba(240,194,123,.4); background: rgba(240,194,123,.1); color: var(--dawn); font: 600 .82rem/1.2 var(--body); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.qibla-live-btn[hidden] { display: none; }
.qibla-live-btn:focus-visible { outline: 2px solid var(--dawn); outline-offset: 3px; }
.home-qibla.is-live { flex-wrap: wrap; }
.qibla-tip { flex: 1 1 100%; margin: 0; color: var(--muted-dark); font-size: .78rem; line-height: 1.4; white-space: normal; }
.qibla-tip[hidden] { display: none; }
.home-qibla.is-live .qibla-dial { width: 150px; height: 150px; margin-top: 6px; transition: border-color .2s, box-shadow .2s; }
.home-qibla.is-live .qibla-needle { height: 60px; width: 4px; }
.home-qibla.is-live .qibla-n { top: 7px; font-size: .85rem; color: #fff; }
.home-qibla.is-live .qibla-tick { display: block; }
.home-qibla.is-live .qibla-note { color: #fff; font-weight: 600; }
.home-qibla.is-locked .qibla-dial { border-color: #5fd38d; box-shadow: 0 0 0 3px rgba(95,211,141,.25), 0 0 26px rgba(95,211,141,.35); }
.home-qibla.is-locked .qibla-needle { background: linear-gradient(0deg, rgba(95,211,141,.2), #5fd38d); box-shadow: 0 0 12px rgba(95,211,141,.6); }
.home-qibla.is-locked .qibla-tick { border-top-color: #5fd38d; }
.home-qibla.is-locked .qibla-note { color: #5fd38d; }

/* install guide on computers: a centered card instead of a bottom sheet */
.a2-sheet.is-desktop { left: 50%; right: auto; top: 50%; bottom: auto; width: min(460px, 92vw); padding: 1.5rem 1.6rem 1.4rem; border-radius: 22px; opacity: 0; transform: translate(-50%, -46%); transition: opacity .2s ease, transform .25s ease; }
.a2-sheet.is-desktop.open { opacity: 1; transform: translate(-50%, -50%); }
.a2-sheet.is-desktop .a2-grab { display: none; }
.a2-sheet.is-desktop .a2-done { cursor: pointer; }
body.app .a2hs { cursor: pointer; }

/* "Praying at home" times: a little more room so wide times like 12:59 PM don't run into the next divider */
.home-slot-time .ampm { font-size: .64em; margin-left: .18em; }
.home-slot { padding-right: .5rem; }
@media (max-width: 400px) { .home-slot { padding-right: .3rem; } .home-slot-time .ampm { font-size: .6em; margin-left: .12em; } }

/* latest update: a featured Facebook post shown as a card (no Facebook code on the page) */
.fb-post { justify-self: end; width: 100%; max-width: 520px; background: #fff; border: 1px solid var(--line-light); border-radius: 20px; overflow: hidden; box-shadow: 0 18px 50px -24px rgba(7,42,34,.35); }
.fb-post-img { display: block; aspect-ratio: 16 / 9; background: var(--night); }
.fb-post-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.fb-post-body { padding: 1.25rem 1.4rem 1.35rem; color: var(--night); }
.fb-post-head { display: flex; align-items: center; gap: .7rem; margin-bottom: .9rem; line-height: 1.2; }
.fb-post-avatar { flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--night); display: grid; place-items: center; }
.fb-post-head b { display: block; font-family: var(--display); font-size: .98rem; letter-spacing: -.01em; }
.fb-post-head span { font-size: .8rem; color: var(--muted-light); }
.fb-post-text { font-family: var(--display); font-weight: 600; font-size: 1.22rem; line-height: 1.35; letter-spacing: -.015em; margin: 0 0 .45rem; }
.fb-post-sub { font-size: .85rem; color: var(--muted-light); margin: 0 0 .8rem; }
.fb-post-sub sup { font-size: .65em; }
.fb-post-more { font-size: .9rem; margin: 0 0 .3rem; }
.fb-post-more a { color: var(--night); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.fb-post-tags { font-size: .85rem; color: var(--dawn-deep); font-weight: 600; margin: 0 0 1.1rem; }
.fb-post-link { display: inline-flex; align-items: center; gap: .4rem; padding: .65rem 1.1rem; border-radius: 999px; background: var(--night); color: #fff; font-weight: 600; font-size: .9rem; text-decoration: none; }
.fb-post-link:hover { background: #0e3a2f; color: #fff; }
.fb-post-link:focus-visible { outline: 2px solid var(--dawn-deep); outline-offset: 3px; }
@media (max-width: 991.98px) { .fb-post { justify-self: stretch; max-width: 560px; } }

/* latest update, v2: heading and follow buttons on the left, the post card beside them.
   On wide screens the card itself runs sideways (image left, text right). */
.fb-feed { grid-template-columns: minmax(0, 1fr) minmax(0, 520px); align-items: center; }
.fb-intro .fb-text { margin-bottom: 1.5rem; }
.fb-post { border-radius: 12px; box-shadow: 0 1px 2px rgba(7,42,34,.05), 0 8px 24px -16px rgba(7,42,34,.25); }
@media (min-width: 1200px) {
  .fb-feed { grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 3.5rem; }
  .fb-post { max-width: none; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: center; }
  .fb-post-img { height: 100%; aspect-ratio: auto; display: flex; align-items: center; }
  .fb-post-img img { height: auto; aspect-ratio: 16 / 9; }
  .fb-post-body { padding: 1.5rem 1.75rem; }
}
@media (max-width: 991.98px) { .fb-feed { grid-template-columns: minmax(0, 1fr); } .fb-post { max-width: 560px; } }
/* post card button: outline only, so the solid follow buttons stay the main call to action */
.fb-post-link { background: transparent; color: var(--night); border: 1.5px solid var(--night); }
.fb-post-link:hover { background: var(--night); color: #fff; }
/* tags on the left, button on the right (stacked again on wide screens, where the card is sideways) */
.fb-post-foot { display: flex; align-items: center; justify-content: space-between; gap: .75rem 1rem; flex-wrap: wrap; }
.fb-post-foot .fb-post-tags { margin: 0; }
.fb-post-foot .fb-post-link { margin-left: auto; flex: none; }
@media (max-width: 575.98px) { .fb-post-body { padding: 1.15rem 1.1rem 1.2rem; } .fb-post-foot { gap: .75rem; } .fb-post-foot .fb-post-link { padding: .5rem .85rem; font-size: .82rem; } }
.fb-post-foot .fb-post-more { margin-bottom: .25rem; }

/* phones: the two hero buttons stretch to line up with the edges of the prayer box below */
@media (max-width: 575.98px) { .hero-actions .btn { flex: 1 1 auto; text-align: center; justify-content: center; } }
/* iPhone zooms the whole page into any text box smaller than 16px; keep them at 16px on touch screens */
.home-search input { font-size: 16px; }
@media (pointer: coarse) { input, select, textarea { font-size: max(16px, 1em); } }
.fb-post-tags { color: var(--night); }
/* phones: tighter spacing under the hero name and motto */
@media (max-width: 575.98px) { .hero-title { margin-bottom: .9rem; } .hero-motto { margin-bottom: 1.35rem; } }
/* phones: tighter spacing under the hero name and motto */
@media (max-width: 575.98px) { .hero-title { margin-bottom: .9rem; } .hero-motto { margin-bottom: 1.35rem; } }
/* phones with room for it: "Use live compass" sits on the right, centered beside the dial
   (very small phones keep it under the text; while the compass is running it goes back under too) */
@media (min-width: 385px) and (max-width: 480px) {
  .home-qibla:not(.is-live) { position: relative; }
  .home-qibla:not(.is-live) .qibla-live-btn { position: absolute; right: 0; top: calc(50% + .625rem); transform: translateY(-50%); margin-top: 0; }
}
/* phones: tighter gaps under section headings, and between Programs and the MTA box */
@media (max-width: 575.98px) {
  .section-head { margin-bottom: 1.75rem; }
  .program { padding: 1.6rem 0; }
  .mta-card { margin-top: 2rem; }
}

/* map: a drawn map that opens directions (replaces the Google Maps embed) */
.map-static { position: relative; display: block; color: #fff; text-decoration: none; }
.map-static svg { display: block; width: 100%; height: 100%; }
.map-static .map-road { font: 700 15px var(--body); letter-spacing: .14em; fill: rgba(255,255,255,.62); }
.map-static .map-small { font: 600 14px var(--body); fill: rgba(255,255,255,.55); }
.map-static .map-name { font: 700 24px var(--display); letter-spacing: -.01em; fill: #fff; }
.map-static .map-addr { font: 500 16px var(--body); fill: rgba(255,255,255,.7); }
.map-static .map-north path { fill: rgba(255,255,255,.55); }
.map-static .map-north text { font: 700 14px var(--body); fill: rgba(255,255,255,.55); }
.map-cta { position: absolute; right: 14px; bottom: 14px; display: inline-flex; align-items: center; gap: .4rem; padding: .55rem .95rem; border-radius: 999px; background: var(--dawn); color: var(--ink); font-weight: 700; font-size: .88rem; transition: transform .2s ease; }
@media (hover: hover) { .map-static:hover .map-cta { transform: translateY(-2px); } }
.map-static:focus-visible { outline: 2px solid var(--dawn); outline-offset: 4px; }
/* light map */
.map-static { background: #f2eee5; border-color: rgba(255,255,255,.12); }
.map-static .map-road { fill: #6b7a75; }
.map-static .map-small { fill: #6b7a75; }
.map-static .map-name { fill: #072a22; }
.map-static .map-addr { fill: #4f5f59; }
.map-static .map-north path, .map-static .map-north text { fill: #8a968f; }
.map-static .map-cta { background: #072a22; color: #fff; box-shadow: 0 6px 16px -6px rgba(7,42,34,.5); }
@media (max-width: 991.98px) { .map-static { margin-top: 2.75rem; } }
/* iPhone: choose Apple Maps or Google Maps */
.map-pick-title { margin: 0 0 .8rem; text-align: center; font: 600 .95rem var(--body); color: rgba(255,255,255,.65); }
.map-pick-btn { display: block; margin-bottom: .6rem; padding: .95rem; border-radius: 14px; background: rgba(255,255,255,.08); color: #fff; text-align: center; font: 700 1.05rem var(--body); text-decoration: none; }
.map-pick-btn:active { background: rgba(255,255,255,.16); }
.map-pick .a2-done { margin-top: .4rem; background: transparent; color: rgba(255,255,255,.7); }

/* ---------- upcoming events (new design) ---------- */
.events-section { background: #ffffff; color: var(--ink); }
.events-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 3rem 5rem; align-items: start; }
.events-side { position: sticky; top: 7rem; }
.events-side .section-lede { color: var(--muted-light); margin-top: 1rem; font-size: 1.1rem; }
.events-visit { display: flex; gap: 1rem; align-items: flex-start; margin-top: 2.25rem; padding: 1.25rem 1.4rem; border-radius: 14px; background: var(--paper); }
.events-visit svg { flex: none; margin-top: .1rem; color: var(--night); }
.events-visit b { display: block; font-weight: 700; margin-bottom: .2rem; }
.events-visit span { color: var(--muted-light); font-size: .95rem; line-height: 1.5; }
.events-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .75rem; }
.event { display: flex; align-items: center; gap: 1.5rem; padding: 1rem 1.25rem 1rem 1rem; border-radius: 16px; border: 1px solid rgba(7,42,34,.1); background: #fff; transition: border-color .2s ease, transform .2s ease; }
.event:hover { border-color: rgba(7,42,34,.28); transform: translateY(-1px); }
.event-date { flex: none; width: 5.5rem; height: 5.5rem; margin: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .15rem; border-radius: 12px; background: var(--paper); font-family: var(--display); text-align: center; }
.event-date span { font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #9a6a1f; }
.event-date b { font-size: 2rem; font-weight: 700; letter-spacing: -.03em; line-height: 1; }
.event-date b.is-range { font-size: 1.35rem; letter-spacing: -.02em; }
.event-date i { font-style: normal; font-size: .7rem; font-weight: 600; letter-spacing: .1em; color: var(--muted-light); }
.event.is-now { border-color: var(--night); }
.event.is-now .event-date { background: var(--night); color: #fff; }
.event.is-now .event-date span { color: var(--dawn); }
.event.is-now .event-date i { color: rgba(255,255,255,.7); }
.event-body { flex: 1; min-width: 0; }
.event-title { margin: 0 0 .45rem; font-family: var(--display); font-size: 1.35rem; font-weight: 600; letter-spacing: -.015em; line-height: 1.25; }
.event-when { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .75rem; font-size: .98rem; color: var(--muted-light); }
.event-time { display: inline-flex; align-items: center; gap: .35rem; font-weight: 600; color: var(--ink); }
.event-time::before { content: ""; width: 14px; height: 14px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E") center/contain no-repeat; }
.event-now { display: inline-flex; align-items: center; gap: .45rem; padding: .3rem .7rem; border-radius: 999px; background: var(--night); color: #fff; font-size: .8rem; font-weight: 600; }
.event-now::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--dawn); }
.events-empty { margin: 0; padding: 2.5rem 1.5rem; border: 1px dashed rgba(7,42,34,.2); border-radius: 16px; text-align: center; color: var(--muted-light); }
.events-count { display: inline-flex; align-items: center; gap: .5rem; margin: 0 0 1rem; padding: .35rem .8rem .35rem .65rem; border-radius: 999px; background: rgba(176,125,46,.12); color: #7d5617; font-size: .85rem; font-weight: 700; }
.events-count::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #b07d2e; animation: evPulse 2s ease-in-out infinite; }
@keyframes evPulse { 50% { opacity: .35; } }
.event-soon { display: inline-flex; align-items: center; padding: .28rem .65rem; border-radius: 999px; background: rgba(176,125,46,.13); color: #7d5617; font-size: .78rem; font-weight: 700; }
.event-cal { flex: none; display: inline-flex; align-items: center; gap: .45rem; padding: .55rem .9rem; border: 1px solid rgba(7,42,34,.18); border-radius: 999px; background: #fff; color: var(--night); font: 600 .88rem var(--body); cursor: pointer; transition: background .2s ease, color .2s ease, border-color .2s ease; }
.event-cal:hover, .event-cal:focus-visible { background: var(--night); color: #fff; border-color: var(--night); }
.event.is-now .event-cal { border-color: var(--night); }
.events-list.is-collapsed .is-extra { display: none; }
.when-short { display: none; }
.events-more { display: block; width: 100%; margin-top: .75rem; padding: .9rem; border: 1px solid rgba(7,42,34,.14); border-radius: 14px; background: var(--paper); color: var(--night); font: 600 .95rem var(--body); cursor: pointer; }
.events-more:hover { border-color: rgba(7,42,34,.35); }
.events-main.in .event, .events-main.is-in .event { animation: evIn .5s cubic-bezier(.2,.7,.2,1) both; animation-delay: calc(var(--i, 0) * 70ms + .15s); }
@keyframes evIn { from { opacity: 0; transform: translateY(10px); } }
@media (prefers-reduced-motion: reduce) { .events-main .event { animation: none !important; } .events-count::before { animation: none; } }
.media-section .mta-card { margin-top: 0; }
@media (max-width: 991.98px) {
  .events-grid { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
  .events-side { display: contents; }
  .events-side .section-lede { margin-bottom: 0; }
  .events-main { order: 2; margin-top: 1.75rem; }
  .events-visit { order: 3; margin-top: 1.25rem; padding: 1.1rem 1.2rem; gap: .85rem; }
}
@media (max-width: 575.98px) {
  .events-list { gap: .6rem; }
  .event { gap: 1rem; padding: .8rem; border-radius: 14px; align-items: flex-start; }
  .event-date { width: 4.4rem; height: 4.6rem; border-radius: 10px; }
  .event-date span { font-size: .7rem; }
  .event-date b { font-size: 1.6rem; }
  .event-date b.is-range { font-size: 1.1rem; }
  .event-date i { font-size: .68rem; }
  .event-body { padding-top: .2rem; }
  .event-title { font-size: 1.1rem; margin-bottom: .35rem; }
  .event-when { font-size: .88rem; gap: .35rem .6rem; }
  .event-now { font-size: .74rem; padding: .25rem .6rem; }
  .events-empty { padding: 1.75rem 1.25rem; }
  .event { position: relative; }
  .when-long { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .when-short { display: inline; }
  .event-body { padding-right: 2.4rem; }
  .event-cal { position: absolute; top: .7rem; right: .7rem; width: 2.25rem; height: 2.25rem; padding: 0; justify-content: center; }
  .event-cal span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .event-soon { font-size: .72rem; padding: .22rem .55rem; }
}

/* Pray at Home in its own section, after Upcoming events */
.home-section .home-times { margin-top: 0; padding-top: 0; border-top: 0; }

/* =====================================================================
   Polish pass: tighter, even spacing across the site, plus small fixes
   ===================================================================== */
/* section rhythm */
.section { padding: 5.5rem 0; }
.section-head { margin-bottom: 2.25rem; }
.section-title { margin-bottom: .85rem; }
.day-line { margin-bottom: 3rem; }
.visit-body { padding-top: 3rem; }
.fb-feed { margin-top: 3.5rem; padding-top: 3rem; }
.site-footer { padding-top: 4rem; }
.footer-mark { margin-bottom: 2.5rem; }
@media (max-width: 991.98px) { .fb-feed { margin-top: 3rem; padding-top: 2.5rem; } }
@media (max-width: 575.98px) {
  .section { padding: 3.5rem 0; }
  .section-head { margin-bottom: 1.5rem; }
  .fb-feed { margin-top: 2.5rem; padding-top: 2rem; gap: 1.5rem; }
  .site-footer { padding-top: 3rem; }
  .footer-mark { margin-bottom: 2rem; }
  .visit-body { padding-top: 2.5rem; }
}

/* Upcoming events: title stays on one line next to the cards */
@media (min-width: 992px) { .events-side .section-title { font-size: clamp(2.6rem, 3.7vw, 3.5rem); white-space: nowrap; } }

/* follow buttons: side by side, same width */
.fb-follows { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; max-width: 22rem; }
.fb-follows .btn { min-width: 0; padding-left: .9rem; padding-right: .9rem; }
.fb-follows .btn { justify-content: center; white-space: nowrap; }
@media (max-width: 400px) { .fb-follows .btn { flex: none; } }

/* phones: map right after the address and buttons, then the form */
@media (max-width: 991.98px) {
  .map-static { margin-top: 0; }
  .visit-form-col { margin-top: 2.5rem; }
}

/* footer motto a little easier to see */
html.js .footer-mark[data-reveal].is-in, .footer-mark { -webkit-text-stroke-color: rgba(255,255,255,.4); }

/* phones: shorter landing photo and a compact Today card, so the times come sooner */
@media (max-width: 575.98px) {
  .hero { padding-top: 36vh; padding-top: 36svh; }
  .hero-photo { height: 60vh; height: 60svh; }
  .hero-shade { height: 66vh; height: 66svh; }
  .hero-arabic { font-size: 1.6rem; margin-bottom: 0; }
  .hero-title { font-size: 3rem; margin-bottom: .6rem; }
  .hero-motto { font-size: 1.02rem; margin-bottom: 1.1rem; }
  .hero-actions { flex-wrap: nowrap; gap: .5rem; }
  .hero-actions .btn { flex: 1 1 0; padding: .78rem .6rem; font-size: .9rem; white-space: nowrap; }
  .today-panel { padding: 1rem 1.1rem .5rem; }
  .next-block { padding: .7rem 0 .75rem; }
  .next-time { font-size: 3.1rem; }
  .prayer-row { padding: .5rem 0; }
}
/* phones: the first hero button reads "Prayer times" so both buttons fit on one line */
@media (max-width: 575.98px) {
  .hide-xs { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media (min-width: 576px) { .show-xs { display: none; } }
/* times sit in the middle of each row (the "Today" label makes today's row taller) */
.times-table td, .times-table tbody th { vertical-align: middle; }
/* "Jumuʻah" sits right under Friday's Zuhr time, now that the times are centered in the row */
.times-table .cell-tag { top: calc(50% + .8rem); bottom: auto; }
@media (max-width: 575.98px) { .times-table .cell-tag { top: calc(50% + .72rem); bottom: auto; } }
body.app .times-table .cell-tag { top: calc(50% + .62rem); bottom: auto; }
/* phones and tablets: the two follow buttons stretch to the same width as the post card below */
@media (max-width: 991.98px) { .fb-follows { max-width: 560px; } }
/* the gold dot beside the next prayer: same dot and glow as before, the glow gently breathes */
.prayer-row.is-next .prayer-name::before { -webkit-animation: next-glow 2.2s ease-in-out infinite; animation: next-glow 2.2s ease-in-out infinite; }
@-webkit-keyframes next-glow { 0%, 100% { box-shadow: 0 0 4px 0 rgba(240,194,123,.5); } 50% { box-shadow: 0 0 12px 3px rgba(240,194,123,.65); } }
@keyframes next-glow { 0%, 100% { box-shadow: 0 0 4px 0 rgba(240,194,123,.5); } 50% { box-shadow: 0 0 12px 3px rgba(240,194,123,.65); } }
@media (prefers-reduced-motion: reduce) { .prayer-row.is-next .prayer-name::before { -webkit-animation: none; animation: none; } }
/* phones and tablets: a tapped button doesn't stay highlighted (touch screens keep "hover" after a tap);
   it lights up only while your finger is on it */
@media (hover: none) {
  .btn-dawn:hover { background: var(--dawn); border-color: var(--dawn); color: var(--ink); box-shadow: none; }
  .btn-ghost:hover { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.35); color: #fff; }
  .btn-ink:hover { background: var(--night); border-color: var(--night); color: #fff; }
  .btn:hover { transform: none; }
  .btn-dawn:hover::after { left: -60%; transition: none; }
  .btn-dawn:active { background: #fff; border-color: #fff; }
  .btn-ghost:active { background: #fff; border-color: #fff; color: var(--ink); }
  .btn-ink:active { background: var(--dawn); border-color: var(--dawn); color: var(--ink); }
}

/* events: happening now and ended */
.events-list.no-anim .event { animation: none !important; }
.event.is-live { border-color: var(--night); box-shadow: 0 10px 30px -18px rgba(7,42,34,.45); }
.event-now.is-pulse::before { animation: ev-live 1.8s ease-in-out infinite; }
@keyframes ev-live { 0%, 100% { box-shadow: 0 0 0 0 rgba(240,194,123,.7); } 50% { box-shadow: 0 0 0 5px rgba(240,194,123,0); } }
a.event-go { background: var(--night); color: #fff; border-color: var(--night); text-decoration: none; }
a.event-go:hover, a.event-go:focus-visible { background: #0e3a2f; color: #fff; }
.event.is-over { background: #fafbfa; border-color: rgba(7,42,34,.07); }
.event.is-over:hover { transform: none; border-color: rgba(7,42,34,.07); }
.event.is-over .event-date { background: #f1f3f2; }
.event.is-over .event-date, .event.is-over .event-title, .event.is-over .event-when { opacity: .55; }
.event-done { cursor: default; background: transparent; color: #5f6f69; border-color: transparent; padding-left: .4rem; padding-right: .4rem; }
.event-done:hover, .event-done:focus-visible { background: transparent; color: #5f6f69; border-color: transparent; }
@media (max-width: 575.98px) { .event-done { border-color: rgba(7,42,34,.1); } }
@media (prefers-reduced-motion: reduce) { .event-now.is-pulse::before { animation: none; } }