/* ===== Design tokens ===== */
:root {
  --bg: #fbfaf7;
  --surface: #ffffff;
  --tint: #f2f5f1;
  --text: #1d2420;
  --muted: #637068;
  --border: #e3e7e2;
  --primary: #2f6b4f;
  --primary-dark: #24543e;
  --primary-soft: #e3efe8;
  --accent: #e8a33d;
  --gold: #a8956b;
  --danger: #c0392b;
  --radius: 16px;
  --radius-sm: 10px;
  --shadow: 0 1px 2px rgba(20, 30, 25, .04), 0 8px 24px rgba(20, 30, 25, .06);
  --font: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Fraunces", Georgia, serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #121614;
    --surface: #1a201d;
    --tint: #161b18;
    --text: #e8ece9;
    --muted: #97a39c;
    --border: #2a322e;
    --primary: #5fb388;
    --primary-dark: #7cc7a0;
    --primary-soft: #1f3329;
    --gold: #c9b88f;
    --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .25);
  }
}

/* ===== Base ===== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; }
body {
  margin: 0;
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img, iframe { max-width: 100%; display: block; }
a { color: var(--primary); }
h1, h2, h3 { line-height: 1.2; margin: 0 0 .5em; }
h1, h2 { font-family: var(--font-display); letter-spacing: -.01em; }
h3 { font-size: 1.1rem; }
p { margin: 0 0 1em; }
.muted { color: var(--muted); }

.container { width: min(1140px, 100% - 32px); margin-inline: auto; }
.section { padding: 88px 0; }
main > .section:first-child { padding-top: 44px; } /* inner pages: half the space above the page heading */
.section-tint { background: var(--tint); }
.section-head { margin-bottom: 36px; }
.section-head h1, .section-head h2 { font-size: clamp(1.8rem, 3.5vw, 2.4rem); }
.section-intro { color: var(--muted); max-width: 44em; margin: 0; font-size: 1.05rem; }
.history h3 { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.section-head-row { display: flex; justify-content: space-between; align-items: end; gap: 16px; flex-wrap: wrap; }
.eyebrow {
  text-transform: uppercase; letter-spacing: .12em; font-size: .75rem;
  font-weight: 600; color: var(--primary); margin-bottom: .6em;
}

/* ===== Buttons ===== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--primary); color: #fff; border: 0; border-radius: 999px;
  padding: 14px 26px; font: 600 1rem var(--font); text-decoration: none;
  cursor: pointer; transition: background .2s, transform .1s;
}
.btn:hover { background: var(--primary-dark); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .6; cursor: progress; }
.btn-sm { padding: 9px 18px; font-size: .9rem; }
.btn-block { width: 100%; }
.btn-ghost { background: transparent; color: var(--text); box-shadow: inset 0 0 0 1.5px var(--border); }
.btn-ghost:hover { background: var(--surface); }
@media (prefers-color-scheme: dark) { .btn { color: #0f1a14; } .btn-ghost { color: var(--text); } }

.icon-btn {
  width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--border);
  background: var(--surface); color: var(--text); font-size: 1.3rem; cursor: pointer;
}
.icon-btn:hover { background: var(--primary-soft); }

/* ===== Header ===== */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--bg) 85%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}
.nav { display: flex; align-items: center; gap: 20px; height: 68px; }
.nav-links { margin-left: auto; }

/* EN | BS language switch */
.lang-switch {
  display: flex; flex: none; padding: 3px; gap: 2px;
  border: 1px solid var(--border); border-radius: 999px; background: var(--surface);
}
.lang-switch button {
  border: 0; background: none; cursor: pointer; color: var(--muted);
  font: 700 .75rem var(--font); letter-spacing: .06em; padding: 6px 10px; border-radius: 999px;
}
.lang-switch button { display: inline-flex; align-items: center; gap: 6px; }
.lang-switch .flag {
  width: 20px; height: auto; flex: none; border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .12); opacity: .7; transition: opacity .2s;
}
.lang-switch button:hover .flag, .lang-switch button[aria-pressed="true"] .flag { opacity: 1; }
.lang-switch button[aria-pressed="true"] .flag { box-shadow: 0 0 0 1px rgba(255, 255, 255, .7); }
.lang-switch button:hover { color: var(--text); }
.lang-switch button[aria-pressed="true"] { background: var(--primary); color: #fff; }
@media (prefers-color-scheme: dark) { .lang-switch button[aria-pressed="true"] { color: #0f1a14; } }
@media (max-width: 480px) {
  /* Fit logo, language switch and menu button on small phones */
  .nav { gap: 10px; }
  .logo { gap: 8px; font-size: 1rem; }
  .logo .logo-mark { width: 38px; height: 38px; }
  .lang-switch button { padding: 5px 8px; }
  .nav .nav-toggle { padding: 6px 2px; }
}
@media (max-width: 400px) {
  .logo { gap: 6px; }
  .logo .logo-mark { width: 36px; height: 36px; } /* smaller logo so it still fits beside the title */
  .lang-switch button { padding: 6px 7px; }
  .lang-switch button span { display: none; } /* flags only on small phones */
  .nav .nav-toggle { padding: 6px 0; }
}
@media (max-width: 350px) {
  .logo .logo-mark { display: none; } /* the narrowest phones: no room beside the switch and menu */
}
.logo { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 1.1rem; color: var(--text); text-decoration: none; }
.logo-mark { display: block; flex: none; width: 44px; height: 44px; object-fit: contain; }
.logo-text { display: grid; line-height: 1.15; white-space: nowrap; }
.logo-text small { font-size: .72rem; font-weight: 500; color: var(--muted); letter-spacing: .02em; }
/* The header row runs a little wider than the page content so the whole menu fits */
.site-header .container { width: min(1300px, 100% - 32px); }
@media (min-width: 1281px) and (max-width: 1360px) {
  /* Narrow desktops: tighter menu spacing so the one-line subtitle still fits */
  .site-header .nav { gap: 14px; }
  .nav .nav-links { gap: 16px; }
}
@media (max-width: 1280px) {
  /* Menu-button widths: wrap the long subtitle onto two short lines */
  .logo-text small { white-space: normal; max-width: 13em; line-height: 1.25; }
}
@media (max-width: 480px) {
  .logo-text small { font-size: .64rem; max-width: 12.5em; }
}
.nav-links { display: flex; align-items: center; gap: 24px; }
.nav-links a:not(.btn) { color: var(--text); text-decoration: none; font-weight: 500; font-size: .95rem; white-space: nowrap; }
.nav-links a:not(.btn):hover, .nav-links a:not(.btn)[aria-current="page"] { color: var(--primary); }
.nav-links a[aria-current="page"]:not(.btn) { font-weight: 600; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
/* No grey box flashing over the menu button when it's tapped on a phone; keyboard users still get an outline */
.nav-toggle { display: none; background: none; border: 0; padding: 8px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.nav-toggle:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
.nav-toggle span { display: block; width: 22px; height: 2px; background: var(--text); margin: 5px 0; border-radius: 2px; }

@media (max-width: 1280px) {
  .nav-toggle { display: block; order: 3; }
  .lang-switch { margin-left: auto; }
  .nav-links {
    position: absolute; top: 68px; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--surface); border-bottom: 1px solid var(--border);
    padding: 8px 16px 16px; display: none;
  }
  .nav-links.open { display: flex; }
  html.nav-open { overflow: hidden; } /* the page stays still behind the open menu */
  .nav-links a { padding: 12px 0; }
  .nav-links .btn { margin-top: 8px; }
}

/* ===== Hero ===== */
.hero {
  position: relative; overflow: hidden; isolation: isolate;
  /* Same shape as the entrance photo, so it shows in full without bands */
  width: 100%; aspect-ratio: 1400 / 786; max-height: min(76vh, 680px);
  min-height: 620px; /* room for the welcome text and buttons on short laptop screens */
  color: #fff; background: #13241b;
}
.slide {
  position: absolute; inset: 0; display: flex; align-items: center;
  padding: 40px 0 90px;
  opacity: 0; visibility: hidden; transition: opacity 1.2s ease, visibility 0s linear 1.2s;
}
.slide.is-active { opacity: 1; visibility: visible; transition: opacity 1.2s ease; }
.hero-bg {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover; object-position: center 45%;
  transform: scale(1.08); transition: transform 8s ease-out;
}
.slide.is-active .hero-bg { transform: scale(1); }
.slide::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(ellipse at center, rgba(10, 28, 19, .45) 0%, rgba(10, 28, 19, .72) 100%),
    linear-gradient(0deg, rgba(10, 28, 19, .6), transparent 45%);
}
.hero-copy { text-align: center; max-width: 860px; }

/* Welcome slide: the welcome text centered on white */
.slide-logo { background: #fff; padding: 24px 0 110px; }
.slide-logo::after { display: none; }
.slide-logo-inner { display: flex; align-items: center; justify-content: center; gap: clamp(24px, 6vw, 80px); height: 100%; }
.slide-logo .hero-copy { max-width: 680px; margin: 0 auto; }
.hero .slide-logo .eyebrow { color: var(--primary); }
@media (prefers-color-scheme: dark) { .hero .slide-logo .eyebrow { color: #2f6b4f; } }
.hero .slide-logo-title {
  font-size: clamp(2.8rem, 7vw, 5rem); color: #154f8d; text-shadow: none; margin-bottom: .35em;
}
.slide-logo .hero-actions { margin-top: 30px; }
@media (prefers-color-scheme: dark) { .slide-logo .btn { background: #2f6b4f; color: #fff; } }
.btn-outline { background: transparent; color: var(--primary); box-shadow: inset 0 0 0 2px var(--primary); }
.btn-outline:hover { background: var(--primary-soft); }
@media (prefers-color-scheme: dark) { .slide-logo .btn-outline { background: transparent; color: #2f6b4f; box-shadow: inset 0 0 0 2px #2f6b4f; } }

/* First slide: the Islamic Community emblem and names (as real text) above the logo and welcome */
.slide-combo {
  flex-direction: column; align-items: stretch; justify-content: flex-start;
  gap: clamp(8px, 2vw, 26px); padding-top: clamp(14px, 3vw, 40px); background: none;
}
.slide-combo::before {
  content: ""; position: absolute; inset: 0; z-index: -3;
  background:
    radial-gradient(900px 420px at 50% 0%, rgba(0, 118, 58, .07), transparent 70%),
    radial-gradient(700px 360px at 85% 100%, rgba(176, 152, 100, .10), transparent 70%),
    #fdfdfb;
}
.combo-emblem {
  display: flex; align-items: center; justify-content: center; gap: clamp(10px, 1.6vw, 20px); flex: none;
  padding-bottom: clamp(8px, 1.6vw, 20px); position: relative;
}
.combo-emblem::after { /* thin gold rule under the names */
  content: ""; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
  width: min(60%, 520px); height: 1px;
  background: linear-gradient(90deg, transparent, #b09864 20%, #b09864 80%, transparent);
}
.combo-crescent { width: clamp(34px, 6vw, 76px); height: auto; flex: none; }
.combo-org {
  display: grid; margin: 0; line-height: 1.12; text-align: left;
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  font-size: clamp(.5rem, 1.75vw, 1.3rem); letter-spacing: .01em; color: #00763a;
}
.combo-org-local {
  margin-top: .15em; text-transform: none; font-style: italic; font-weight: 600;
  font-size: 1.12em; letter-spacing: .01em; color: #a68b55;
}
.slide-combo .slide-logo-inner { flex: 1; min-height: 0; height: auto; }
.hero .slide-combo .eyebrow { color: #a68b55; }
.combo-lead { margin: 0 auto; max-width: 30em; color: #44514a; font-size: clamp(.95rem, 1.3vw, 1.1rem); line-height: 1.55; }
.slide-combo .hero-actions { margin-top: clamp(14px, 2vw, 26px); }
@media (prefers-color-scheme: dark) {
  /* Dark mode: the slide turns deep green, and the emblem and names are lightened to suit it */
  .slide-combo::before {
    background:
      radial-gradient(900px 420px at 50% 0%, rgba(95, 179, 136, .16), transparent 70%),
      radial-gradient(700px 360px at 85% 100%, rgba(176, 152, 100, .14), transparent 70%),
      #12241a;
  }
  .combo-crescent { filter: brightness(1.9) saturate(.8); } /* the dark green crescent and gold stars, lightened */
  .combo-org { color: #9fd8b8; }
  .combo-org-local { color: #d9c08a; }
  .combo-emblem::after { background: linear-gradient(90deg, transparent, #c9ad6e 20%, #c9ad6e 80%, transparent); }
  .hero .slide-logo-title { color: #f4f1e8; }
  .hero .slide-combo .eyebrow { color: var(--gold); }
  .combo-lead { color: #c3cdc7; }
  .slide-logo .btn { background: var(--primary); color: #0f1a14; }
  .slide-logo .btn-outline { background: transparent; color: var(--primary); box-shadow: inset 0 0 0 2px var(--primary); }
}
@media (max-width: 1100px) {
  /* Tablets: a larger emblem and names, and enough height for the welcome text and buttons */
  .hero { min-height: 575px; }
  .combo-crescent { width: clamp(40px, 8vw, 76px); }
  .combo-org { font-size: clamp(.5rem, 2.3vw, 1.3rem); }
}
@media (max-width: 760px) {
  /* Phones: as large as the longest name allows on one line */
  .combo-crescent { width: clamp(36px, 11vw, 60px); }
  .combo-org { font-size: clamp(.5rem, 2.5vw, 1.05rem); letter-spacing: 0; }
}

/* Dark arrows and dots while a white slide is showing */
.hero.on-light .hero-arrow { background: rgba(21, 79, 141, .1); color: #154f8d; }
.hero.on-light .hero-arrow:hover { background: rgba(21, 79, 141, .2); }
.hero.on-light .hero-dots button { background: rgba(21, 79, 141, .3); }
.hero.on-light .hero-dots button[aria-current="true"] { background: #154f8d; }
.hero-copy > * { opacity: 0; transform: translateY(14px); transition: opacity .8s ease .5s, transform .8s ease .5s; }
.slide.is-active .hero-copy > * { opacity: 1; transform: none; }
.hero .eyebrow { color: #a9dcc0; letter-spacing: .16em; }
.hero h1, .hero h2 {
  font-size: clamp(2.2rem, 5.2vw, 3.7rem); color: #fff; margin-bottom: .35em;
  text-shadow: 0 2px 24px rgba(0, 0, 0, .35);
}
.lead { font-size: 1.15rem; max-width: 36em; }
.hero .lead { color: rgba(255, 255, 255, .88); margin-inline: auto; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-top: 24px; }

.hero-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 48px; height: 48px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(255, 255, 255, .14); color: #fff; font-size: 1.9rem; line-height: 1;
  backdrop-filter: blur(6px); transition: background .2s;
}
.hero-arrow:hover { background: rgba(255, 255, 255, .28); }
.hero-arrow.prev { left: 20px; }
.hero-arrow.next { right: 20px; }
.hero-controls {
  position: absolute; left: 0; right: 0; bottom: 100px; z-index: 2;
  display: flex; justify-content: center; align-items: center; gap: 14px;
}
.hero-dots { display: flex; gap: 14px; }
.hero-dots button {
  position: relative; width: 10px; height: 10px; padding: 0; border: 0; border-radius: 999px; cursor: pointer;
  background: rgba(255, 255, 255, .45); transition: width .3s, background .3s;
}
.hero-dots button::after { content: ""; position: absolute; inset: -7px; } /* a 24px tap area around the small dot */
.hero-dots button[aria-current="true"] { width: 28px; background: #fff; }
.hero-pause {
  display: grid; place-items: center; min-width: 30px; min-height: 30px; padding: 0;
  border: 0; border-radius: 50%; background: none; color: rgba(255, 255, 255, .75); cursor: pointer;
  font-size: .9rem; letter-spacing: .12em; padding-left: .12em; /* a gap between the two bars, still centred */
}
.hero-pause:hover { color: #fff; }
@media (prefers-reduced-motion: reduce) {
  .slide, .hero-bg, .hero-copy > * { transition: none !important; }
  .hero-bg { transform: none; }
}
.btn-light { background: rgba(255, 255, 255, .14); color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .5); backdrop-filter: blur(6px); }
.btn-light:hover { background: rgba(255, 255, 255, .24); }
@media (prefers-color-scheme: dark) { .btn-light { color: #fff; } }

/* Key facts, between Explore and Membership: the band's top half has Explore's tint and its
   bottom half the page color, so the cards sit on the line between the two sections */
.stats-band { background: linear-gradient(var(--tint) 50%, var(--bg) 50%); }
/* The prayer times card overlaps the bottom of the slideshow (its dots sit 100px up, clear of the card) */
.hero-overlap { position: relative; z-index: 2; margin-top: -64px; padding-bottom: 64px; }
@media (max-width: 760px) { .hero-overlap { margin-top: 0; padding-top: 24px; } } /* phones: the dots sit at the very bottom, so the card sits below with a gap */
#explore { padding-bottom: 48px; }
.stats-band + #membership { padding-top: 64px; }
.hero-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.stat {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 20px 24px; box-shadow: var(--shadow);
}
.stat strong { display: block; font-family: var(--font-display); font-size: 2rem; color: var(--primary); }
.stat span { color: var(--muted); font-size: .95rem; }
@media (max-width: 760px) {
  /* Narrow phones: never shorter than the first slide needs for its logo, text and button */
  .hero { aspect-ratio: auto; min-height: 0; height: max(calc(100vw * 786 / 1400), calc(100vw * .22 + 175px)); }
  .slide { padding: 8px 0 34px; }
  .hero-arrow { display: none; }
  .hero-controls { bottom: 10px; }
  .hero .eyebrow { font-size: .62rem; margin-bottom: .4em; }
  .hero h1, .hero h2 { font-size: clamp(1.35rem, 6vw, 2rem); }
  .hero-actions { margin-top: 8px; }
  .hero .btn { padding: 8px 18px; font-size: .88rem; }
  .slide-logo { padding: 12px 0 34px; }
  .slide-combo { padding-top: 12px; gap: 8px; }
  .combo-lead { display: none; } /* not enough height on small screens */
  .slide-logo-inner { gap: 16px; }
  .hero .slide-logo-title { font-size: clamp(1.8rem, 9vw, 2.6rem); margin-bottom: .1em; }
  .slide-logo .hero-actions { margin-top: 14px; }
  .hero-stats { grid-template-columns: 1fr; gap: 12px; }
  .stat { padding: 16px 20px; }
  .stat strong { font-size: 1.6rem; }
}
@media (max-width: 480px) {
  .hero .slide-logo-title { font-size: 2.1rem; }
  .slide-logo .hero-actions { margin-top: 8px; }
  .hero .btn { white-space: nowrap; padding: 8px 14px; }
}

/* ===== Gallery ===== */
.gallery { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 240px; grid-auto-flow: dense; gap: 16px; }
.g-item { position: relative; margin: 0; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); background: var(--tint); cursor: zoom-in; }
.g-wide { grid-column: span 2; }
.g-tall { grid-row: span 2; }
.g-wide img { object-position: center 30%; }

/* Lightbox */
.lightbox {
  width: 100vw; height: 100vh; max-width: none; max-height: none; margin: 0; padding: 0;
  border: 0; background: rgba(8, 14, 11, .94); color: #fff;
}
.lightbox[open] { display: flex; align-items: center; justify-content: center; }
.lightbox::backdrop { background: transparent; }
.lightbox figure { margin: 0; max-width: min(1400px, 92vw); text-align: center; }
.lightbox img { max-width: 100%; max-height: 82vh; margin: 0 auto; border-radius: 8px; }
.lightbox figcaption { margin-top: 12px; font-weight: 500; opacity: .9; }
.lightbox button {
  position: absolute; border: 0; cursor: pointer; color: #fff;
  background: rgba(255, 255, 255, .12); border-radius: 50%;
  width: 48px; height: 48px; font-size: 1.8rem; line-height: 1;
}
.lightbox button:hover { background: rgba(255, 255, 255, .24); }
.lightbox-close { top: 16px; right: 16px; }
.lightbox-nav.prev { left: 16px; top: 50%; transform: translateY(-50%); }
.lightbox-nav.next { right: 16px; top: 50%; transform: translateY(-50%); }
@media (max-width: 560px) { .lightbox-nav { top: auto !important; bottom: 20px; transform: none !important; } }

/* Imam biography & book */
.imam-layout { display: grid; grid-template-columns: minmax(260px, 400px) 1fr; gap: 56px; align-items: start; }
.imam-photo { margin: 0; }
.imam-photo img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius); box-shadow: var(--shadow); background: #fff; }
.imam-photo figcaption { display: grid; margin-top: 14px; text-align: center; }
.imam-photo figcaption span { color: var(--muted); font-size: .9rem; }
.imam-bio h2 { font-size: clamp(1.8rem, 3.5vw, 2.4rem); }
.imam-bio > p { color: var(--muted); font-size: 1.04rem; }
.imam-quote {
  margin: 28px 0 0; padding: 20px 24px; border-left: 4px solid var(--gold);
  background: var(--tint); border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.imam-quote p { margin: 0 0 6px; font-family: var(--font-display); font-size: 1.3rem; line-height: 1.4; }
.imam-quote footer { color: var(--muted); font-size: .9rem; }

.book { display: grid; grid-template-columns: minmax(220px, 340px) 1fr; gap: 40px; align-items: center; margin-top: 56px; padding: 32px; }
.book-cover { width: 100%; border-radius: var(--radius-sm); box-shadow: 0 18px 40px rgba(0, 0, 0, .25); }
.book-info h3 { font-family: var(--font-display); font-size: clamp(1.5rem, 3vw, 2rem); margin-bottom: 4px; }
.book-info h3 em { font-style: normal; }
.book-sub { color: var(--gold); font-weight: 600; font-size: .95rem; }
.book-info > p:not(.eyebrow):not(.book-sub) { color: var(--muted); }
.book-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 22px 0 24px; }
.book-facts div { background: var(--tint); border-radius: var(--radius-sm); padding: 12px 14px; }
.book-facts dt { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 600; }
.book-facts dd { margin: 2px 0 0; font-weight: 600; font-size: .92rem; }
@media (max-width: 860px) {
  .imam-layout, .book { grid-template-columns: 1fr; gap: 28px; }
  .imam-photo { max-width: 360px; margin-inline: auto; }
  /* The home page's "Our imam" link (about.html#imam) stops with the photo just below the
     sticky header instead of at the section's top padding */
  #imam { scroll-margin-top: -80px; }
  .book { padding: 22px; }
  .book-cover { max-width: 340px; margin-inline: auto; }
  .book-facts { grid-template-columns: 1fr; }
}

/* Construction projects */
.project-visuals { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 24px; }
.project-visual {
  position: relative; margin: 0; border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--shadow); aspect-ratio: 16 / 10; background: var(--tint);
}
@media (max-width: 760px) { .project-visuals { grid-template-columns: 1fr; gap: 16px; } }
.project-visual img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
.project-visual figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; display: grid; gap: 2px;
  padding: 40px 22px 16px; color: #fff;
  background: linear-gradient(transparent, rgba(10, 28, 19, .75));
}
.project-visual figcaption strong { font-size: 1.05rem; }
.project-visual figcaption span { font-size: .85rem; opacity: .9; }
@media (max-width: 560px) {
  .project-visual { aspect-ratio: 16 / 10; }
  .project-visual figcaption { padding: 28px 14px 12px; }
}
.project-top { display: flex; justify-content: space-between; align-items: flex-start; }
.tag.project-status { background: color-mix(in srgb, var(--accent) 22%, transparent); color: #8a5a0f; }
@media (prefers-color-scheme: dark) { .tag.project-status { color: var(--accent); } }
.projects-cta {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px;
  margin-top: 28px; padding: 20px 24px; border-radius: var(--radius); background: var(--primary-soft);
}
.projects-cta p { margin: 0; font-weight: 600; }

/* About intro with photo */
.about-intro { display: grid; grid-template-columns: 1.2fr 1fr; gap: 48px; align-items: start; margin-bottom: 40px; }
.about-intro .section-head { margin: 0; display: grid; gap: 14px; }
.about-intro .section-head h1, .about-intro .section-head h2 { margin: 0; }
.about-photo { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); box-shadow: var(--shadow); }
@media (max-width: 860px) { .about-intro { grid-template-columns: 1fr; gap: 28px; } }
.g-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.g-item:hover img { transform: scale(1.04); }
.g-item figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 28px 16px 12px;
  color: #fff; font-weight: 600; font-size: .9rem;
  background: linear-gradient(transparent, rgba(0, 0, 0, .6));
}
@media (max-width: 900px) { .gallery { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 200px; } }
@media (max-width: 900px) { .g-wide-sm { grid-column: span 2; } }
@media (max-width: 560px) { .g-tall { grid-row: span 1; } }
@media (max-width: 480px) { .gallery { grid-auto-rows: 160px; gap: 10px; } }

/* ===== Prayer times ===== */
.card.prayer-card { max-width: 640px; margin-inline: auto; padding: 40px 0 16px; }
#prayer-times { scroll-margin-top: 8px; } /* with the page's 80px scroll padding: the Prayer times link stops with the card just below the sticky header */
.prayer-head { text-align: center; margin-bottom: 28px; padding-inline: 24px; }
.prayer-city {
  display: inline-flex; align-items: center; gap: 12px; margin: 0 0 6px;
  font-family: var(--font); font-size: 1.9rem; font-weight: 700;
}
.prayer-date { color: var(--muted); margin: 0; }
.prayer-list { list-style: none; margin: 0; padding: 0; }
.prayer {
  display: grid; grid-template-columns: 28px 1fr auto; align-items: center; gap: 12px;
  padding: 18px 40px 18px 12px;
}
.prayer-arrow { visibility: hidden; color: var(--muted); font-size: 1.4rem; text-align: center; }
.prayer-name { font-size: 1.6rem; font-weight: 700; line-height: 1.2; }
.prayer-rel { font-style: italic; color: var(--muted); font-size: 1rem; }
.prayer-time {
  font-size: 2.4rem; font-weight: 700; color: var(--muted);
  font-variant-numeric: tabular-nums; letter-spacing: -.01em; white-space: nowrap;
}
.prayer-time small { font-size: .42em; font-weight: 600; letter-spacing: .04em; margin-left: .1em; }
.prayer-download {
  display: flex; align-items: center; gap: 16px;
  max-width: 640px; margin: 20px auto 0; padding: 18px 20px;
  background: var(--primary); color: #fff; text-decoration: none;
  border-radius: var(--radius); box-shadow: var(--shadow);
  transition: background .2s;
}
.prayer-download:hover { background: var(--primary-dark); }
.prayer-download:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.prayer-download-icon {
  flex: none; display: grid; place-items: center; width: 52px; height: 52px;
  border-radius: 14px; background: rgba(255, 255, 255, .16);
}
.prayer-download-text { flex: 1; min-width: 0; display: grid; gap: 2px; }
.prayer-download-text strong { font-size: 1.1rem; line-height: 1.3; }
.prayer-download-text small { font-size: .875rem; opacity: .85; }
.prayer-download-cta {
  flex: none; display: grid; place-items: center; width: 40px; height: 40px;
  border-radius: 50%; background: #fff; color: var(--primary);
}
@media (prefers-color-scheme: dark) {
  .prayer-download { color: #0f1a14; }
  .prayer-download-icon { background: rgba(0, 0, 0, .12); }
  .prayer-download-cta { background: #0f1a14; }
}
@media (max-width: 480px) {
  .prayer-download { gap: 12px; padding: 16px; }
  .prayer-download-icon { width: 44px; height: 44px; }
  .prayer-download-text strong { font-size: 1rem; }
}
.prayer.next { background: var(--tint); }
.prayer.next .prayer-arrow { visibility: visible; }
.prayer.next .prayer-name { color: var(--gold); padding-left: 24px; }
.prayer.next .prayer-rel {
  font-style: normal; font-weight: 700; color: var(--text); font-size: 1.3rem;
  font-variant-numeric: tabular-nums; padding-left: 24px;
}
.prayer.next .prayer-time { color: var(--text); }
@media (max-width: 480px) {
  .prayer { padding-right: 20px; gap: 8px; }
  .prayer-name { font-size: 1.3rem; }
  .prayer-time { font-size: 1.9rem; }
  .prayer.next .prayer-name, .prayer.next .prayer-rel { padding-left: 8px; }
  .prayer.next .prayer-rel { font-size: 1.1rem; }
}
@media (max-width: 400px) {
  /* Small phones: keep each prayer's name, countdown and time on their own single lines */
  .prayer { grid-template-columns: 18px 1fr auto; gap: 6px; padding: 14px 14px 14px 8px; }
  .prayer-arrow { font-size: 1.15rem; }
  .prayer-name { font-size: 1.2rem; }
  .prayer-rel { font-size: .9rem; white-space: nowrap; }
  .prayer-time { font-size: 1.6rem; }
  .prayer.next .prayer-name, .prayer.next .prayer-rel { padding-left: 4px; }
  .prayer.next .prayer-rel { font-size: 1rem; }
}

/* ===== Cards & grids ===== */
.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow); padding: 28px;
}
.grid-3 { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 24px; }
.program-icon {
  width: 52px; height: 52px; border-radius: 14px; background: var(--primary-soft);
  display: grid; place-items: center; font-size: 1.6rem; margin-bottom: 18px;
}
.program p { color: var(--muted); margin: 0; }

/* ===== Forms ===== */
.form { display: grid; gap: 18px; }
.field { display: grid; gap: 6px; align-content: start; } /* label and box stay at the top when the field beside it has a longer error */
.field > span, legend { font-size: .875rem; font-weight: 600; }
/* No grey box flashing over a label (field names, checkboxes, the payment and amount options) when
   it's tapped on a phone; the field it belongs to still shows its focus outline */
label { -webkit-tap-highlight-color: transparent; }
input, select, textarea {
  width: 100%; font: inherit; color: var(--text);
  background: var(--bg); border: 1.5px solid var(--border);
  border-radius: var(--radius-sm); padding: 12px 14px; transition: border-color .15s, box-shadow .15s;
}
textarea { resize: vertical; }
select { min-height: calc(1.6em + 27px); } /* same height as text boxes: one line of text, 12px padding and 1.5px border top and bottom */
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--primary);
  box-shadow: 0 0 0 4px var(--primary-soft);
}
.field.invalid input, .field.invalid select, .field.invalid textarea { border-color: var(--danger); transition: border-color .4s, box-shadow .15s; }
/* An error message fades in and slides down a little each time it appears (the animation reruns
   whenever it goes from hidden to shown). Its space opens at once, so the scroll to the first
   error (scrollToField in script.js) still lands exactly. */
.error { color: var(--danger); font-size: .8rem; min-height: 0; animation: error-in .35s ease-out; }
.error:empty { display: none; }
@keyframes error-in { from { opacity: 0; translate: 0 -4px; } }
@media (prefers-reduced-motion: reduce) { .error { animation: none; } }
.row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
/* Address suggestions under the street field (address-search.js) */
.field:has(> .addr-list) { position: relative; }
.addr-list {
  position: absolute; left: 0; right: 0; z-index: 20; overflow: hidden;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: var(--shadow);
}
.addr-option { display: grid; gap: 1px; padding: 10px 14px; cursor: pointer; font-weight: 400; }
.addr-option strong { font-weight: 600; }
.addr-option span { color: var(--muted); font-size: .85rem; }
.addr-option:hover, .addr-option[aria-selected="true"] { background: var(--primary-soft); }
.addr-attribution { padding: 6px 14px; text-align: right; font: 500 .75rem Roboto, Arial, sans-serif; color: #5e5e5e; border-top: 1px solid var(--border); }
.row-3 { display: grid; grid-template-columns: 2fr 1.4fr 1fr; gap: 16px; } /* city, state, ZIP */
@media (max-width: 560px) { .row-2 { grid-template-columns: 1fr; } .row-3 { grid-template-columns: 1fr 1fr; } .row-3 > :first-child { grid-column: 1 / -1; } }
/* Fields side by side share rows (label, box, error), so their boxes stay level even when one
   label or error message wraps onto two lines (e.g. "Poštanski broj (ZIP)" in Bosnian) */
@supports (grid-template-rows: subgrid) {
  .row-3 { row-gap: 0; }
  .row-3 > .field { grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; }
  .row-3 > .field > span { margin-bottom: 6px; }
  .row-3 > .field > .error { margin-top: 6px; }
  @media (min-width: 561px) { /* on phones .row-2 fields are stacked, so they don't need it */
    .row-2 { row-gap: 0; }
    .row-2 > .field { grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; }
    .row-2 > .field > span { margin-bottom: 6px; }
    .row-2 > .field > .error { margin-top: 6px; }
  }
  @media (max-width: 560px) { .row-3 > :first-child { margin-bottom: 16px; } } /* City sits alone above State and ZIP */
}

.check { display: flex; align-items: center; gap: 10px; font-size: .95rem; cursor: pointer; }
.check input { width: 18px; height: 18px; accent-color: var(--primary); }

/* Cloudflare's "not a robot" check (script.js): invisible unless it needs a click, so until then
   it's taken out of the form's layout (no empty row or gap above the button) */
.captcha { position: absolute; width: 1px; height: 0; overflow: hidden; }
.captcha.is-visible { position: static; width: auto; height: auto; overflow: visible; }
.form-status { margin: 0; font-weight: 500; }
.form-status:empty { display: none; }
.form-status.success { color: var(--primary); }
.form-status.fail { color: var(--danger); }
.fine-print { font-size: .8rem; color: var(--muted); margin: 0; text-align: center; }

/* Amount picker */
fieldset.amounts { border: 0; padding: 0; margin: 0; display: grid; gap: 14px; }
legend { margin-bottom: 10px; padding: 0; }
.amount-options { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.amount-options label { cursor: pointer; position: relative; }
.amount-options input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; pointer-events: none; }
.amount-options span {
  display: block; text-align: center; padding: 12px 0; font-weight: 600;
  border: 1.5px solid var(--border); border-radius: var(--radius-sm); transition: all .15s;
}
.amount-options input:checked + span { border-color: var(--primary); background: var(--primary-soft); color: var(--primary); }
.amount-options input:focus-visible + span { box-shadow: 0 0 0 4px var(--primary-soft); }

/* Stripe's card box (the Payment Element draws its own fields inside) */
.payment-element { min-height: 52px; }
.payment-loading {
  margin: 0; padding: 14px 16px; border: 1px dashed var(--border); border-radius: var(--radius-sm);
  color: var(--muted); font-size: .92rem;
}
/* Shown above the card box while the site uses Stripe's sandbox keys */
.test-mode-note {
  margin: 0 0 10px; padding: 8px 12px; border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--text);
  font-size: .88rem; font-weight: 600;
}

/* ===== Donate layout ===== */
.donate-layout { display: grid; grid-template-columns: 1.2fr 1fr; gap: 24px; align-items: start; }
.donate-side { display: grid; gap: 24px; }
@media (max-width: 900px) { .donate-layout { grid-template-columns: 1fr; } }

.donation-list { list-style: none; margin: 0; padding: 0; max-height: 340px; overflow-y: auto; }
.donation-list li {
  /* Room on the right so the scroll bar (drawn over the list on phones and Macs) misses the amounts */
  display: flex; align-items: center; gap: 12px; padding: 12px 16px 12px 0;
  border-bottom: 1px solid var(--border);
}
.donation-list li:last-child { border-bottom: 0; }
.donation-list li.new { animation: flash 1.5s ease; }
.donation-list li.donation-note { color: var(--muted); font-size: .92rem; }
.donation-count { margin: 12px 0 0; padding-top: 10px; border-top: 1px solid var(--border); color: var(--muted); font-size: .85rem; text-align: center; }
/* Placeholder rows while the list loads: the same layout, as grey bars that pulse */
.donation-skeleton .avatar, .donation-skeleton .donor span, .donation-skeleton .donation-amt {
  background: var(--border); animation: pulse 1.2s ease-in-out infinite alternate;
}
.donation-skeleton .donor span { display: block; height: 12px; width: 55%; border-radius: 6px; }
.donation-skeleton .donor span + span { width: 35%; margin-top: 8px; }
.donation-skeleton .donation-amt { width: 44px; height: 14px; border-radius: 6px; }
.donation-skeleton:nth-child(3) .donor span:first-child { width: 42%; }
.donation-skeleton:nth-child(4) .donor span:first-child { width: 65%; }
@keyframes pulse { from { opacity: 1; } to { opacity: .45; } }
@media (prefers-reduced-motion: reduce) { .donation-skeleton * { animation: none; } }
@keyframes flash { from { background: var(--primary-soft); } to { background: transparent; } }
.avatar {
  flex: none; width: 38px; height: 38px; border-radius: 50%;
  background: var(--primary-soft); color: var(--primary);
  display: grid; place-items: center; font-weight: 700; font-size: .85rem;
}
.donor { flex: 1; min-width: 0; }
.donor strong { display: block; font-size: .95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.donor small { color: var(--muted); }
.donation-amt { font-weight: 700; color: var(--primary); }

/* ===== News ===== */
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip {
  border: 1.5px solid var(--border); background: var(--surface); color: var(--text);
  padding: 7px 16px; border-radius: 999px; font: 500 .875rem var(--font); cursor: pointer;
}
.chip.active { background: var(--primary); border-color: var(--primary); color: #fff; }
@media (prefers-color-scheme: dark) { .chip.active { color: #0f1a14; } }

.news-card { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.news-thumb { aspect-ratio: 16 / 9; display: grid; place-items: center; font-size: 3rem; overflow: hidden; background: var(--thumb, none); }
/* News without a photo: the item's pastel colour (--thumb), as a dark tint of it in dark mode */
@media (prefers-color-scheme: dark) { .news-thumb { background: color-mix(in srgb, var(--thumb, transparent) 16%, var(--surface)); } }
.news-thumb img { width: 100%; height: 100%; object-fit: cover; }
.news-body { padding: 22px 24px 26px; display: flex; flex-direction: column; flex: 1; }
.news-meta { display: flex; gap: 10px; align-items: center; font-size: .8rem; color: var(--muted); margin-bottom: 10px; }
.tag { background: var(--primary-soft); color: var(--primary); padding: 2px 10px; border-radius: 999px; font-weight: 600; }
.news-body p { color: var(--muted); font-size: .95rem; }
.news-body .more { margin-top: auto; font-weight: 600; text-decoration: none; background: none; border: 0; padding: 0; font: 600 .95rem var(--font); color: var(--primary); cursor: pointer; text-align: left; }
.news-body .full { display: none; }
.news-card.expanded .full { display: block; }

/* ===== Calendar ===== */
.calendar-layout { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 24px; align-items: start; }
@media (max-width: 900px) { .calendar-layout { grid-template-columns: minmax(0, 1fr); } }
.cal-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; }
.cal-head h3 { margin: 0; font-size: 1.2rem; }
.cal-weekdays, .cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.cal-weekdays span { text-align: center; font-size: .75rem; font-weight: 600; color: var(--muted); text-transform: uppercase; padding-bottom: 6px; }
.cal-day {
  aspect-ratio: 1; border: 0; border-radius: var(--radius-sm); background: transparent;
  font: 500 .95rem var(--font); color: var(--text); cursor: pointer; position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
}
.cal-day:hover { background: var(--primary-soft); }
.cal-day.other { color: var(--muted); opacity: .45; }
.cal-day.today { box-shadow: inset 0 0 0 1.5px var(--primary); font-weight: 700; }
.cal-day.selected { background: var(--primary); color: #fff; }
@media (prefers-color-scheme: dark) { .cal-day.selected { color: #0f1a14; } }
@media (max-width: 480px) {
  /* Let the month fit small phones */
  .calendar, .event-panel { padding: 20px 14px; }
  .cal-weekdays, .cal-grid { gap: 2px; }
  .cal-weekdays span { font-size: .68rem; }
  .event-item { padding: 12px; gap: 10px; }
  .event-date { width: 46px; }
}
.dots { display: flex; gap: 3px; height: 6px; }
.dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.cal-day.selected .dot { background: currentColor; }

.event-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.event-item { display: flex; gap: 14px; padding: 14px; border-radius: var(--radius-sm); background: var(--tint); }
.event-date {
  flex: none; width: 52px; text-align: center; border-radius: 10px; background: var(--surface);
  padding: 6px 0; border: 1px solid var(--border);
}
.event-date small { display: block; font-size: .7rem; text-transform: uppercase; color: var(--accent); font-weight: 700; }
.event-date strong { font-size: 1.3rem; line-height: 1; }
.event-item h4 { margin: 0 0 2px; font-size: .98rem; }
.event-item p { margin: 0; font-size: .85rem; color: var(--muted); }
.empty { color: var(--muted); font-size: .95rem; }

/* ===== Contact ===== */
.contact-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }
@media (max-width: 900px) { .contact-layout { grid-template-columns: 1fr; gap: 48px; } }
.map-wrap { position: relative; padding: 0; overflow: hidden; height: 340px; container-type: inline-size; }
.map-wrap iframe { display: block; width: 100%; height: 340px; border: 0; }
/* Google shows the mosque's place card (name, rating, directions) only on maps at least 520px
   wide. In a narrower box the map is always drawn at 520 × 518px, from the first moment (resizing
   it after it starts loading makes the card fail), and shrunk to fit: script.js sets --map-scale
   and .scaled, which gives the box the same shape so the whole map shows */
@container (max-width: 519.98px) {
  .map-wrap iframe { position: absolute; top: 0; left: 0; width: 520px; max-width: none; height: 518px; transform: scale(var(--map-scale, 1)); transform-origin: 0 0; }
}
.map-wrap.scaled { height: auto; aspect-ratio: 520 / 518; }
.contact-info { list-style: none; padding: 0; margin: 20px 0 0; display: grid; gap: 12px; }
.contact-info li { display: flex; gap: 12px; align-items: center; }
.contact-info a { color: var(--text); text-decoration: none; }
.contact-info a:hover { color: var(--primary); }

/* ===== FAQ ===== */
.faq-container { max-width: 820px; }
.faq-list { display: grid; gap: 12px; }
.faq-item { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
.faq-item summary {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 18px 22px; cursor: pointer; list-style: none; font-weight: 600; font-size: 1.05rem;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; flex-shrink: 0; color: var(--primary); font-size: 1.5rem; font-weight: 400; line-height: 1; transition: transform .2s ease; }
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item summary:hover { color: var(--primary); }
.faq-item summary:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: var(--radius); }
.faq-answer { padding: 0 22px 18px; color: var(--muted); }
.faq-answer p, .faq-answer ul { margin: 0 0 10px; }
.faq-answer > :last-child { margin-bottom: 0; }
.faq-answer ul { padding-left: 1.2em; }
.faq-answer li + li { margin-top: 6px; }
.faq-answer strong { color: var(--text); }
@media (prefers-reduced-motion: reduce) { .faq-item summary::after { transition: none; } }

/* ===== Monthly prayer calendar ===== */
.print-only { display: none; }
.pcal-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.pcal-nav { display: flex; align-items: center; gap: 12px; }
.pcal-nav h2 { margin: 0; min-width: 9em; text-align: center; font-size: 1.4rem; text-transform: capitalize; }
.pcal-nav .icon-btn:disabled { opacity: .35; cursor: default; }
.pcal-card { padding: 0; overflow-x: auto; }
.pcal-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.pcal-table th, .pcal-table td { padding: 9px 12px; text-align: center; white-space: nowrap; border-bottom: 1px solid var(--border); }
.pcal-table thead th { position: sticky; top: 0; background: var(--primary); color: #fff; font-size: .85rem; font-weight: 600; }
.pcal-table tbody th { font-weight: 600; text-align: right; }
.pcal-table tbody td:nth-child(2) { text-align: left; color: var(--muted); }
.pcal-table tbody tr:last-child > * { border-bottom: 0; }
.pcal-table tr.friday { background: var(--primary-soft); }
.pcal-table tr.today { box-shadow: inset 4px 0 0 var(--accent); font-weight: 700; }
.pcal-jummah { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px; background: var(--primary); color: #fff; font-size: .75rem; font-weight: 600; }
@media (prefers-color-scheme: dark) { .pcal-table thead th, .pcal-jummah { color: #0f1a14; } } /* the green is light in dark mode */
.pcal-note { margin: 12px 0 0; color: var(--muted); font-size: .9rem; }
@media (max-width: 640px) {
  .pcal-table { font-size: .8rem; }
  .pcal-table th, .pcal-table td { padding: 8px 3px; }
  .pcal-table thead th { font-size: .66rem; white-space: normal; line-height: 1.2; vertical-align: bottom; }
  .pcal-jummah { display: none; } /* the shading and the note below mark Fridays */
}
@media (max-width: 360px) {
  /* All eight columns fit on the narrowest phones */
  .pcal-table { font-size: .74rem; }
  .pcal-table th, .pcal-table td { padding: 7px 2px; }
  .pcal-table thead th { font-size: .6rem; }
}

@media print {
  @page { size: letter portrait; margin: 2.5mm 12mm 10mm; } /* top, sides, bottom */
  .site-header, .site-footer, .screen-only { display: none !important; }
  .print-only { display: block; }
  body { background: #fff; color: #000; }
  .pcal.section { padding: 0; }
  main { margin: 0; padding: 0; }
  .pcal .container { width: 100%; }
  main > .pcal.section:first-child { padding-top: 66px; } /* space above the heading */
  .pcal-print-head { display: flex; align-items: center; gap: 16px; margin-bottom: 15px; }
  .pcal-print-head img { width: 72px; height: 72px; }
  .pcal-print-head h1 { margin: -2.7px 0 2px; font-size: 22pt; line-height: 1.15; color: #000; } /* the gaps above and below the title look the same */
  .pcal-print-head p { margin: 0; font-size: 11pt; color: #333; }
  .pcal-print-head .pcal-print-org { font-weight: 600; color: #2f6b4f; }
  .pcal-card { border: 1px solid #999; box-shadow: none; border-radius: 0; overflow: visible; }
  .pcal-table { font-size: 11.5pt; line-height: 18.69px; } /* fixed line height: rows 23.69px tall */
  .pcal-table th, .pcal-table td { padding: 2px 6px; border-color: #bbb; }
  .pcal-table thead th { position: static; font-size: 11pt; padding: 4px 6px; background: #2f6b4f !important; color: #fff !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .pcal-table tbody td:nth-child(2) { color: #000; }
  .pcal-table tr.friday { background: #e3efe8 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .pcal-table tr.today { box-shadow: none; font-weight: inherit; }
  .pcal-jummah { background: none; color: #2f6b4f; padding: 0; font-size: 10pt; line-height: 1; }
  .pcal-note { margin-top: 8px; font-size: 10.5pt; color: #333; }
}
@media print and (max-width: 600px) {
  /* iPhone prints the page at the phone's width and scales it up to the paper, so spacing that
     suits a computer printout comes out much larger there */
  main > .pcal.section:first-child { padding-top: 0; }
  .pcal-print-head { margin-bottom: 10px; }
  .pcal-print-head h1 { font-size: 19.25pt; margin-top: -2.7px; } /* 12.5% smaller than on a computer printout; gaps above and below stay equal */
  .pcal-table { line-height: 17.09px; } /* rows 22.09px tall */
  .pcal-note { font-size: 9.975pt; } /* 5% smaller than on a computer printout */
}

/* ===== Page not found (404) ===== */
.not-found { min-height: 50vh; }
.not-found-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }

/* Membership fees under the Become a member intro */
.member-fees { margin: 14px 0 0; max-width: 44em; color: var(--muted); font-size: 1rem; }
.member-fees strong { color: var(--text); }

/* ===== Footer ===== */
.site-footer { border-top: 1px solid var(--border); padding: 36px 0; font-size: .9rem; }
.footer-inner { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.footer-inner p { margin: 0; }
.footer-links { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 8px 20px; padding-bottom: 16px; margin-bottom: 4px; border-bottom: 1px solid var(--border); }
.footer-links a { color: var(--text); text-decoration: none; font-weight: 500; }
.footer-links a:hover { color: var(--primary); }
.footer-contact { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 6px 20px; font-style: normal; color: var(--muted); }
.footer-contact a { color: var(--muted); }
.footer-contact a:hover { color: var(--primary); }
.footer-contact strong { color: var(--text); }

/* Home page: photo cards linking to the other pages */
.explore-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
@media (max-width: 1000px) { .explore-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .explore-grid { grid-template-columns: 1fr; gap: 14px; } }
.explore-card {
  position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: flex-end;
  min-height: 240px; border-radius: var(--radius, 16px); color: #fff; text-decoration: none;
  background: #1f3b2f; box-shadow: 0 6px 18px rgba(0, 0, 0, .08); transition: transform .25s, box-shadow .25s;
}
.explore-bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.explore-card::before { /* darken the lower part so the white text stays readable */
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(10, 40, 25, .05) 20%, rgba(10, 40, 25, .55) 55%, rgba(8, 32, 20, .9) 100%);
}
.explore-body { display: block; padding: 22px; }
.explore-card h3 { margin: 0 0 6px; color: #fff; font-size: 1.15rem; }
.explore-card h3::after { content: "→"; display: inline-block; margin-left: .35em; transition: transform .25s; }
.explore-card p { margin: 0; color: rgba(255, 255, 255, .88); font-size: .93rem; line-height: 1.45; }
.explore-card:hover, .explore-card:focus-visible { transform: translateY(-4px); box-shadow: 0 16px 34px rgba(0, 0, 0, .18); }
.explore-card:hover .explore-bg, .explore-card:focus-visible .explore-bg { transform: scale(1.06); }
.explore-card:hover h3::after { transform: translateX(4px); }
.explore-imam .explore-bg { object-position: 50% 20%; } /* keep the imam's face in view */
@media (max-width: 520px) { .explore-card { min-height: 180px; } }
@media (prefers-reduced-motion: reduce) { .explore-card, .explore-bg, .explore-card h3::after { transition: none; } }

/* Contact form spam trap: kept off-screen, invisible to people */
.honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* ===== Bosnian Food Festival: slide, calendar highlight, flyers pop-up ===== */
.slide-festival { background: #0b1f7a; padding: 24px 0 90px; isolation: isolate; }
.slide-festival::before { /* yellow corner, after the flag of Bosnia and Herzegovina */
  content: ""; position: absolute; inset: 0; z-index: -1; background: #fecb00;
  clip-path: polygon(84% 0, 100% 0, 100% 100%);
}
.slide-festival::after { display: none; }
.festival-inner { display: flex; align-items: center; justify-content: center; gap: clamp(20px, 5vw, 64px); height: 100%; }
.festival-flyer {
  display: block; flex: none; height: 100%; max-height: 460px; padding: 0; border: 0; background: none;
  border-radius: 12px; overflow: hidden; box-shadow: 0 18px 40px rgba(0, 0, 0, .35); transform: rotate(-2deg);
  transition: transform .3s ease;
}
.festival-flyer:hover { transform: rotate(0) scale(1.02); }
.festival-flyer img { height: 100%; width: auto; }
.festival-copy { text-align: left; max-width: 520px; margin: 0; }
.festival-copy .eyebrow { color: #fecb00; }
/* The festival date, large and in yellow, under the "Upcoming event" label */
.festival-date { margin: 0 0 .35em; color: #fecb00; font-family: var(--font-display); font-weight: 700; font-size: clamp(1.1rem, 2.2vw, 1.6rem); line-height: 1.2; }
.festival-copy .hero-actions { justify-content: flex-start; }
.festival-details { color: rgba(255, 255, 255, .88); margin: 0; font-size: 1.05rem; }
.btn-gold { background: #fecb00; color: #0b1f7a; }
.btn-gold:hover { background: #ffd83a; }
@media (prefers-color-scheme: dark) { .btn-gold { color: #0b1f7a; } }
.hero.on-light .hero-pause { color: rgba(21, 79, 141, .7); }
@media (prefers-color-scheme: dark) {
  /* The welcome slide is dark in dark mode, so its arrows, dots and pause button stay light */
  .hero.on-light .hero-arrow { background: rgba(255, 255, 255, .12); color: #fff; }
  .hero.on-light .hero-arrow:hover { background: rgba(255, 255, 255, .22); }
  .hero.on-light .hero-dots button { background: rgba(255, 255, 255, .45); }
  .hero.on-light .hero-dots button[aria-current="true"] { background: #fff; }
  .hero.on-light .hero-pause { color: rgba(255, 255, 255, .75); }
}
@media (min-width: 761px) and (max-width: 1280px) {
  /* Tablets and small laptops: keep the flyer and text clear of the slide arrows and dots */
  .slide-festival .festival-inner { width: calc(100% - 168px); gap: clamp(20px, 3.5vw, 48px); }
  .festival-flyer { height: auto; }
  .festival-flyer img { height: clamp(240px, 34vw, 420px); }
}
@media (max-width: 760px) {
  .slide-festival { padding: 10px 0 34px; }
  .festival-inner { gap: 16px; }
  .festival-details { font-size: .85rem; }
}
@media (max-width: 560px) {
  .festival-details, .festival-sponsor { display: none; }
  .slide-festival::before { clip-path: polygon(93% 0, 100% 0, 100% 100%); }
  .festival-copy { min-width: 0; padding-right: 10px; }
  .festival-copy .eyebrow { font-size: .58rem; letter-spacing: .06em; overflow-wrap: anywhere; }
  .festival-copy .festival-date { font-size: .95rem; }
}

/* Calendar: blue dot and highlighted card for featured events */
.dot.dot-featured { width: 8px; height: 8px; background: #1f4fd6; box-shadow: 0 0 0 2px rgba(31, 79, 214, .2); }
.cal-day.selected .dot.dot-featured { background: #fecb00; }
.event-item.event-featured {
  background: linear-gradient(135deg, #0b1f7a, #1f4fd6); color: #fff;
  box-shadow: 0 8px 20px rgba(11, 31, 122, .25);
}
.event-featured .event-date { border-color: transparent; background: #fecb00; color: #0b1f7a; }
.event-featured .event-date small { color: #0b1f7a; }
.event-featured h4 { color: #fff; }
.event-featured p { color: rgba(255, 255, 255, .85); }
.event-actions { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px; margin-top: 10px; }

/* Add to calendar: a button that opens a small menu */
.add-cal { position: relative; display: inline-block; }
.add-cal summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px;
  background: var(--surface); color: var(--primary); box-shadow: inset 0 0 0 1.5px var(--primary);
}
.add-cal summary::-webkit-details-marker { display: none; }
.add-cal summary:hover, .add-cal[open] summary { background: var(--primary-soft); }
.add-cal summary svg { flex: none; }
.add-cal-chevron { margin-left: -2px; transition: transform .2s ease; }
.add-cal[open] .add-cal-chevron { transform: rotate(180deg); }
/* On the blue festival boxes: white outline on the blue */
.add-cal-dark summary { background: rgba(255, 255, 255, .12); color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .6); }
.add-cal-dark summary:hover, .add-cal-dark[open] summary { background: rgba(255, 255, 255, .24); }
.add-cal-menu {
  position: absolute; z-index: 20; top: calc(100% + 8px); left: 0; min-width: 100%; padding: 6px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
  box-shadow: 0 12px 32px rgba(20, 30, 25, .16);
}
.add-cal-menu a {
  display: flex; align-items: center; gap: 12px; padding: 10px 14px 10px 10px; white-space: nowrap; border-radius: 10px;
  color: var(--text); text-decoration: none; font-size: .92rem; font-weight: 600;
}
.add-cal-menu a svg {
  flex: none; width: 32px; height: 32px; padding: 7px; border-radius: 8px; background: var(--primary-soft); color: var(--primary);
}
.add-cal-menu a span { display: grid; }
.add-cal-menu a small { color: var(--muted); font-size: .78rem; font-weight: 500; }
.add-cal-menu a:hover, .add-cal-menu a:focus-visible { background: var(--tint); }
.add-cal-menu a:hover svg, .add-cal-menu a:focus-visible svg { background: var(--primary); color: #fff; }
@media (prefers-color-scheme: dark) { .add-cal-menu a:hover svg, .add-cal-menu a:focus-visible svg { color: #0f1a14; } }
@media (prefers-reduced-motion: reduce) { .add-cal-chevron { transition: none; } }
/* Phones: the events list's menus line up with the button's right edge, so they stay on screen */
@media (max-width: 520px) {
  #event-list .add-cal-menu { left: auto; right: 0; }
  #event-list .add-cal summary { white-space: nowrap; gap: 6px; padding-inline: 14px; }
}
@media (max-width: 360px) { #event-list .add-cal summary { padding-inline: 10px; } }
/* The festival box hides overflow, so its menu opens upward */
.festival-feature .add-cal-menu { top: auto; bottom: calc(100% + 6px); }

/* Events page: the festival at the bottom, in the colors of the flag of Bosnia and Herzegovina */
/* Links to events.html#festival stop with the festival card just below the sticky header
   instead of at the section's 88px top padding */
#festival { scroll-margin-top: -80px; }
.festival-feature {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(24px, 4vw, 56px); align-items: center;
  padding: clamp(24px, 4vw, 56px); border-radius: var(--radius); background: #0b1f7a; color: rgba(255, 255, 255, .88);
  box-shadow: 0 18px 40px rgba(11, 31, 122, .25);
}
.festival-feature::before { /* yellow corner, as on the slide */
  content: ""; position: absolute; inset: 0; z-index: -1; background: #fecb00;
  clip-path: polygon(88% 0, 100% 0, 100% 100%, 96% 100%);
}
.festival-feature .eyebrow { color: #fecb00; }
.festival-feature .festival-date { font-size: clamp(1.3rem, 2.6vw, 1.8rem); }
.festival-feature h2 { color: #fff; font-size: clamp(1.8rem, 3.5vw, 2.4rem); }
.festival-feature-details { color: #fff; font-weight: 600; }
.festival-feature-copy p { margin: 0 0 14px; line-height: 1.6; }
.festival-feature-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.festival-feature-flyers { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.festival-feature-flyers figure { margin: 0; }
.festival-feature-flyer {
  display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in;
  border-radius: 10px; overflow: hidden; box-shadow: 0 12px 28px rgba(0, 0, 0, .35); transition: transform .25s;
}
.festival-feature-flyer:hover, .festival-feature-flyer:focus-visible { transform: scale(1.03); }
.festival-feature-flyer img { display: block; width: 100%; height: auto; }
.festival-feature-flyers figcaption { margin-top: 10px; text-align: center; font-size: .9rem; font-weight: 600; color: #fff; }
@media (max-width: 900px) {
  .festival-feature { grid-template-columns: 1fr; }
  .festival-feature::before { clip-path: polygon(94% 0, 100% 0, 100% 100%, 98% 100%); }
}
@media (max-width: 420px) { .festival-feature-flyers { gap: 10px; } }

/* Flyers pop-up */
.flyer-dialog {
  width: min(1000px, 94vw); max-height: 92vh; padding: 0; border: 0; border-radius: var(--radius);
  background: var(--surface); color: var(--text); box-shadow: 0 30px 80px rgba(0, 0, 0, .4);
}
.flyer-dialog::backdrop { background: rgba(8, 14, 30, .75); }
.flyer-dialog-head {
  position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between;
  padding: 14px 20px; background: var(--surface); border-bottom: 1px solid var(--border);
}
.flyer-dialog-head h3 { margin: 0; font-family: var(--font-display); }
.flyer-close {
  width: 40px; height: 40px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--tint); color: var(--text); font-size: 1.6rem; line-height: 1;
}
.flyer-close:hover { background: var(--primary-soft); }
.flyer-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; padding: 20px; }
.flyer-grid figure { margin: 0; }
.flyer-grid img { width: 100%; height: auto; border-radius: 10px; box-shadow: var(--shadow); }
.flyer-grid figcaption { margin-top: 8px; text-align: center; font-weight: 600; color: var(--muted); }
@media (max-width: 700px) { .flyer-grid { grid-template-columns: 1fr; padding: 14px; } }

/* ===== About: timeline ===== */
.timeline { list-style: none; margin: 0; padding: 0; max-width: 1040px; position: relative; }
.timeline::before { content: ""; position: absolute; top: 12px; bottom: 12px; left: 9px; width: 2px; background: var(--border); }
.tl-item { position: relative; padding-left: 44px; }
.tl-item + .tl-item { margin-top: 24px; }
.tl-item::before {
  content: ""; position: absolute; left: 2px; top: 26px; width: 16px; height: 16px; border-radius: 50%;
  background: var(--primary); box-shadow: 0 0 0 4px var(--bg);
}
.tl-upcoming::before { background: var(--accent); }
.tl-card { padding: 0; overflow: hidden; display: grid; grid-template-columns: 340px 1fr; }
.tl-photo { width: 100%; height: 100%; min-height: 200px; object-fit: cover; display: block; }
.tl-photo-contain { object-fit: contain; background: var(--tint); padding: 12px; height: 260px; min-height: 100%; }
.tl-body { padding: 24px 28px; align-self: center; }
.tl-body h3 { margin: 0 0 8px; font-size: 1.2rem; }
.tl-body p { margin: 0; color: var(--muted); }
.tl-body .tl-date {
  margin: 0 0 6px; color: var(--primary); font-family: var(--font-display);
  font-weight: 700; font-size: 1.35rem; line-height: 1.2;
}
.tl-upcoming .tl-card { border-color: var(--accent); }
.tl-upcoming .tl-date { color: #a8610a; }
@media (prefers-color-scheme: dark) { .tl-upcoming .tl-date { color: var(--accent); } }
.tl-link { display: inline-block; margin-top: 12px; font-weight: 600; color: var(--primary); text-decoration: none; }
.tl-link:hover { text-decoration: underline; }
.tl-card-icon { grid-template-columns: auto 1fr; }
.tl-icon {
  width: 64px; height: 64px; margin: 24px 0 24px 28px; border-radius: 16px; background: var(--primary-soft);
  display: grid; place-items: center; font-size: 1.9rem; align-self: center;
}
@media (max-width: 680px) {
  .tl-card { grid-template-columns: 1fr; }
  .tl-photo { aspect-ratio: 16 / 9; height: auto; min-height: 0; }
  .tl-photo-contain { aspect-ratio: 4 / 3; }
  .tl-body { padding: 18px 20px 22px; }
  .tl-card-icon { grid-template-columns: auto 1fr; }
  .tl-icon { width: 44px; height: 44px; margin: 22px 0 0 18px; border-radius: 12px; font-size: 1.3rem; align-self: start; }
  .tl-card-icon .tl-body { padding-left: 16px; }
}

/* ===== Home: membership form ===== */
#membership { scroll-margin-top: -64px; } /* the Become a member button stops at the "Join the džemat" heading, not at the section's padding */
.membership-layout { display: grid; grid-template-columns: 1fr 1.35fr; gap: 48px; align-items: start; }
.membership-layout .section-head { margin: 0; position: sticky; top: 100px; }
@media (max-width: 900px) {
  .membership-layout { grid-template-columns: 1fr; gap: 28px; }
  .membership-layout .section-head { position: static; }
}

/* Thank-you pop-up after a membership application */
.thanks-dialog {
  width: min(460px, 92vw); padding: 40px 32px 32px; border: 0; border-radius: var(--radius); text-align: center;
  background: var(--surface); color: var(--text); box-shadow: 0 30px 80px rgba(0, 0, 0, .4);
}
.thanks-dialog::backdrop { background: rgba(8, 14, 30, .65); }
.thanks-close { position: absolute; top: 12px; right: 12px; }
.thanks-icon {
  width: 64px; height: 64px; margin: 0 auto 16px; border-radius: 50%; display: grid; place-items: center;
  background: var(--primary-soft); color: var(--primary); font-size: 2rem; font-weight: 700;
}
.thanks-dialog h3 { margin: 0 0 12px; font-family: var(--font-display); font-size: 1.6rem; line-height: 1.25; }
.thanks-dialog p { margin: 0 0 10px; color: var(--muted); }
.thanks-dialog .thanks-ask { color: var(--text); font-weight: 600; margin-top: 18px; }
.thanks-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 20px; }
@media (max-width: 420px) { .thanks-actions .btn { flex: 1 1 100%; } }

/* Thank-you pop-up after a card payment (donate.html) */
.paid-dialog { width: min(480px, 92vw); }
.paid-dialog .paid-lead { color: var(--text); }
.paid-lead strong { color: var(--primary); }
.paid-summary {
  margin: 18px 0; padding: 4px 16px; text-align: left;
  background: var(--tint); border-radius: var(--radius-sm);
}
.paid-summary div { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; border-bottom: 1px solid var(--border); }
.paid-summary div:last-child { border-bottom: 0; }
.paid-summary dt { color: var(--muted); font-size: .9rem; white-space: nowrap; }
.paid-summary dd { margin: 0; font-weight: 600; text-align: right; }
/* The reference (pi_ + 24 characters) stays on one line with a copy button on the right.
   When it doesn't fit it scrolls sideways, passing under the button. */
.paid-summary div:has(.paid-ref) { align-items: center; padding: 5px 0; }
.paid-summary .paid-ref { position: relative; flex: 1; min-width: 0; }
.paid-ref-text {
  display: block; overflow-x: auto; white-space: nowrap; text-align: right; padding: 4px 38px 4px 0;
  font: 500 .8rem/1.6 ui-monospace, "SF Mono", Menlo, monospace; scrollbar-width: thin;
}
.paid-ref .pay-copy-btn {
  position: absolute; right: 0; top: 50%; translate: 0 -50%; width: 30px; height: 30px;
  box-shadow: -10px 0 8px -2px var(--tint); /* fades the scrolled text out before the button */
}
.paid-dialog .paid-receipt, .paid-dialog .paid-help { font-size: .92rem; }
.paid-receipt strong { color: var(--text); overflow-wrap: anywhere; }
.paid-help { margin-top: 14px; }
@media (max-width: 420px) { .paid-dialog { padding: 36px 20px 24px; } }

/* Pop-up when a card payment fails (donate.html); wide enough for its two Bosnian buttons side by side */
.pay-error-dialog { width: min(500px, 92vw); }
.pay-error-dialog .thanks-icon { background: color-mix(in srgb, var(--danger) 14%, transparent); color: var(--danger); }
.pay-error-dialog .pay-error-reason { color: var(--text); font-weight: 600; }
.pay-error-dialog p:empty { display: none; }

/* Very narrow phones: the two welcome buttons wrap onto two rows, so the slide needs more height */
@media (max-width: 359px) { .hero { height: calc(100vw * .22 + 215px); } }

/* Donate page: choose between a donation and the membership fee */
#donation-form [hidden] { display: none !important; } /* fieldsets and the checkbox row set their own display */
fieldset.pay-type { border: 0; padding: 0; margin: 0; display: grid; gap: 10px; }
.pay-type-options {
  display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px;
  background: var(--tint); border: 1.5px solid var(--border); border-radius: 999px;
}
/* Both options stay as tall as the taller one (when a label wraps on phones), text centered */
.pay-type-options label { position: relative; cursor: pointer; display: grid; }
.pay-type-options input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; pointer-events: none; }
.pay-type-options span {
  display: grid; place-items: center; padding: 10px 12px; border-radius: 999px; text-align: center;
  font-weight: 600; line-height: 1.3; color: var(--muted); transition: background .15s, color .15s;
}
.pay-type-options input:checked + span { background: var(--primary); color: #fff; }
@media (max-width: 420px) { .pay-type-options span { padding-inline: 6px; font-size: .94rem; } } /* keeps "Membership fee" on one line */
.pay-type-options input:focus-visible + span { box-shadow: 0 0 0 4px var(--primary-soft); }
@media (prefers-color-scheme: dark) { .pay-type-options input:checked + span { color: #0f1a14; } }
.fee-options { grid-template-columns: 1fr 1fr; }
.fee-options span { display: grid; gap: 2px; padding-block: 14px; }
.fee-options strong { font-size: 1.25rem; }
.fee-options small { font-size: .8rem; font-weight: 500; color: var(--muted); }

/* Donate page: ways to pay */
.donate-member { margin-top: 20px; }
.pay-ways-title { font-size: clamp(1.3rem, 2.4vw, 1.6rem); margin: 0 0 18px; }
.pay-ways { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-bottom: 48px; }
.pay-way { display: flex; flex-direction: column; padding: 24px; }
/* Zelle: the preferred way to pay (no fees), with a badge in the corner and a green outline */
.pay-way-preferred {
  position: relative; border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary), var(--shadow);
}
/* The Zelle email in a box with a copy button (an icon; it turns into a checkmark once copied) */
.pay-copy {
  display: flex; align-items: center; gap: 8px; margin-top: 6px; padding: 8px 8px 8px 12px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
}
.pay-copy .pay-zelle { flex: 1; min-width: 0; margin: 0; font-size: .9rem; line-height: 1.35; }
.pay-copy-btn {
  flex: none; display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 8px;
  background: var(--primary-soft); color: var(--primary); cursor: pointer;
}
.pay-copy-btn .icon-copied, .pay-copy-btn.copied .icon-copy { display: none; }
.pay-copy-btn.copied .icon-copied { display: block; }
.pay-copy-btn:hover, .pay-copy-btn.copied { background: var(--primary); color: #fff; }
@media (prefers-color-scheme: dark) { .pay-copy-btn:hover, .pay-copy-btn.copied { color: #0f1a14; } }
.pay-copy-btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.pay-way-preferred .pay-note { display: flex; align-items: center; gap: 6px; }
.pay-way-preferred .pay-note::before {
  content: "✓"; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%;
  background: var(--primary); color: #fff; font-size: .7rem;
}
.pay-preferred { position: absolute; top: 16px; right: 16px; font-size: .78rem; background: var(--primary); color: #fff; }
@media (prefers-color-scheme: dark) { .pay-preferred { color: #0f1a14; } }
/* Information pop-ups (like How to use Zelle): the thank-you pop-up's look, with a left-aligned list */
.info-dialog ol { margin: 0; padding-left: 1.3em; text-align: left; color: var(--muted); }
.info-dialog li + li { margin-top: 10px; }
.info-dialog strong { color: var(--text); }
.pay-way .program-icon { margin-bottom: 14px; }
.pay-way h3 { margin: 0 0 6px; }
.pay-way p, .pay-way address { margin: 0; color: var(--muted); font-style: normal; font-size: .95rem; }
.pay-way address, .pay-zelle { color: var(--text); font-weight: 600; margin-top: 4px; }
.pay-zelle { overflow-wrap: break-word; }
.pay-note { margin-top: 10px !important; color: var(--primary) !important; font-weight: 600; font-size: .85rem !important; }
.pay-way .btn { margin-top: auto; align-self: flex-start; }
.pay-way p + .btn { margin-top: 16px; }
.pay-card-fees { margin: 8px 0 0; padding: 0; list-style: none; font-size: .95rem; color: var(--muted); }
.pay-card-fees li + li { margin-top: 2px; }
.pay-card-fees strong { color: var(--text); }
@media (max-width: 1000px) { .pay-ways { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .pay-ways { grid-template-columns: 1fr; gap: 14px; } }
#pay-by-card { scroll-margin-top: 12px; } /* with the page's 80px scroll padding: the Pay by card button stops with the "Pay by credit card" heading just below the sticky header */
.fee-note { margin: 2px 0 0; color: var(--primary); font-weight: 600; font-size: .9rem; }

/* ===== Blog ===== */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.blog-empty { color: var(--muted); }
.blog-card .news-thumb { background: var(--primary-soft); }
.blog-card h3 a { color: inherit; text-decoration: none; }
.blog-card h3 a:hover { color: var(--primary); }
.blog-card .more { margin-top: auto; }
.news-blog-link { margin: 32px 0 0; text-align: center; }
.news-blog-link a { color: var(--primary); font-weight: 600; }

/* One post: blog.html and the editor share these, so the editor looks like the published post */
.post { max-width: 760px; margin: 0 auto; }
.post-back { display: inline-block; margin-bottom: 28px; font-weight: 600; text-decoration: none; }
.post-date { color: var(--muted); font-size: .9rem; margin: 0 0 10px; }
.post-title { font-size: clamp(2rem, 4.5vw, 2.9rem); margin: 0 0 14px; }
.post-summary { font-size: 1.2rem; line-height: 1.55; color: var(--muted); margin: 0 0 28px; }
.post-photo { margin: 0 0 32px; border-radius: var(--radius); overflow: hidden; background: var(--primary-soft); }
.post-photo img { display: block; width: 100%; max-height: 520px; object-fit: cover; }
.post-body { font-size: 1.08rem; line-height: 1.75; overflow-wrap: break-word; }
.post-body > :first-child { margin-top: 0; }
.post-body p, .post-body ul, .post-body ol, .post-body blockquote { margin: 0 0 1.1em; }
.post-body h2 { font-size: 1.6rem; margin: 1.6em 0 .5em; }
.post-body h3 { font-size: 1.25rem; margin: 1.4em 0 .4em; }
.post-body ul, .post-body ol { padding-left: 1.4em; }
.post-body li + li { margin-top: .3em; }
.post-body blockquote { border-left: 4px solid var(--primary); padding: 4px 0 4px 18px; color: var(--muted); font-style: italic; }
.post-body hr { border: 0; border-top: 1px solid var(--border); margin: 2em 0; }
/* Photos in the text: centered, width set per photo in the editor (style="width: 50%") */
.post-body img { display: block; max-width: 100%; height: auto; margin: 1.6em auto; border-radius: var(--radius-sm); }
.post-body p:has(> img:only-child) { margin: 0; }

/* Editor (blog-admin.html) */
.editor-page [hidden] { display: none !important; } /* the photo slot and buttons set their own display */
.editor-page .container { max-width: 900px; }
.editor-bar { padding: 20px 24px; margin-bottom: 20px; }
.editor-bar-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.editor-bar .eyebrow { margin: 0 0 2px; }
.editor-user { margin: 0; color: var(--muted); font-size: .92rem; }
.editor-pick { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: .92rem; }
.editor-pick select, .post-date input {
  font: inherit; font-weight: 500; color: var(--text); background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 8px 12px;
}
.editor-pick select { max-width: min(360px, 60vw); }
.editor-draft { margin: 14px 0 0; padding: 10px 14px; border-radius: var(--radius-sm); background: var(--primary-soft); font-size: .92rem; }
.link-btn { background: none; border: 0; padding: 0; font: inherit; font-weight: 600; color: var(--primary); cursor: pointer; text-decoration: underline; }
.editor-card { padding: clamp(20px, 5vw, 56px); }
.post-editor .field { gap: 4px; }
.post-editor .post-title, .post-editor .post-summary { margin-bottom: 8px; }
.post-editor .post-photo { margin-bottom: 8px; }
.post-editor .field + .field { margin-top: 14px; }
.post-date input { padding: 6px 10px; color: var(--muted); width: auto; }
.editable { position: relative; outline: none; border-radius: 6px; transition: box-shadow .15s; }
.editable:focus { box-shadow: 0 0 0 2px var(--primary-soft), 0 0 0 4px color-mix(in srgb, var(--primary) 35%, transparent); }
.editable.is-empty::before { content: attr(data-placeholder); position: absolute; left: 0; color: var(--muted); opacity: .7; pointer-events: none; font-style: normal; }
.post-body.editable { min-height: 260px; padding: 14px 4px 4px; cursor: text; }
.post-body.editable.is-empty::before { top: 14px; left: 4px; }
.field.invalid .editable, .field.invalid .photo-drop { box-shadow: 0 0 0 2px var(--danger); }

.photo-drop { position: relative; }
.photo-drop.dragging { box-shadow: 0 0 0 3px var(--primary); }
.photo-empty {
  width: 100%; aspect-ratio: 16 / 7; display: grid; place-content: center; justify-items: center; gap: 6px;
  border: 2px dashed color-mix(in srgb, var(--primary) 40%, transparent); border-radius: var(--radius);
  background: var(--primary-soft); color: var(--primary); font: inherit; cursor: pointer;
}
.photo-empty small { color: var(--muted); }
.photo-empty:hover { border-color: var(--primary); }
.photo-actions { position: absolute; right: 14px; bottom: 14px; display: flex; gap: 8px; }
.photo-actions .btn-light { background: rgba(20, 30, 25, .55); }
.photo-actions .btn-light:hover { background: rgba(20, 30, 25, .75); }

.rte { position: relative; margin-top: 8px; }
.rte-sticky { position: sticky; top: 76px; z-index: 5; display: grid; gap: 6px; }
.rte-toolbar {
  display: flex; flex-wrap: wrap; gap: 4px;
  padding: 6px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface);
  box-shadow: var(--shadow);
}
.rte-group { display: flex; gap: 2px; padding-right: 4px; margin-right: 2px; border-right: 1px solid var(--border); }
.rte-group:last-child { border-right: 0; }
.rte-toolbar button {
  min-width: 34px; height: 34px; padding: 0 6px; display: grid; place-items: center;
  border: 0; border-radius: 8px; background: none; color: var(--text); font: 600 .95rem var(--font); cursor: pointer;
}
.rte-toolbar button:hover { background: var(--tint); }
.rte-toolbar button[aria-pressed="true"] { background: var(--primary-soft); color: var(--primary); }
.rte-toolbar .rte-text { font-size: .85rem; }
.rte-toolbar b, .rte-toolbar i, .rte-toolbar u, .rte-toolbar s { font-size: 1rem; }

.editor-submit { max-width: 760px; margin: 32px auto 0; padding-top: 22px; border-top: 1px solid var(--border); display: grid; gap: 12px; }
.editor-submit-row { display: flex; align-items: center; justify-content: flex-end; gap: 12px; flex-wrap: wrap; }
.editor-file { margin-right: auto; color: var(--muted); font-size: .85rem; overflow-wrap: anywhere; }
@media (max-width: 560px) {
  .editor-submit-row .btn { flex: 1; }
  .rte-sticky { top: 64px; }
  .rte-toolbar { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; } /* one row you can swipe */
  .link-box input { flex-basis: 100%; }
  .rte-group { flex: none; }
}

/* Link box, under the toolbar */
.link-box {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px;
  border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); box-shadow: var(--shadow);
}
.link-box input {
  flex: 1 1 220px; min-width: 0; font: inherit; color: var(--text); background: var(--bg);
  border: 1px solid var(--border); border-radius: 8px; padding: 9px 12px;
}
.link-box input:focus { outline: 2px solid var(--primary); outline-offset: -1px; }

/* Photos in the text, while editing */
.post-body.editable img { cursor: pointer; }
.post-body.editable img.is-selected { outline: 3px solid var(--primary); outline-offset: 2px; }
.img-tools { position: absolute; z-index: 4; pointer-events: none; }
.img-tools-bar {
  position: absolute; top: 10px; left: 50%; transform: translateX(-50%); pointer-events: auto;
  display: flex; gap: 2px; padding: 4px; border-radius: 999px; background: rgba(20, 30, 25, .82);
  box-shadow: 0 4px 16px rgba(0, 0, 0, .25); max-width: calc(100% - 16px); overflow-x: auto; scrollbar-width: none;
}
.img-tools-bar button {
  flex: none; border: 0; border-radius: 999px; padding: 6px 12px; background: none; color: #fff;
  font: 600 .8rem var(--font); cursor: pointer; white-space: nowrap;
}
.img-tools-bar button:hover { background: rgba(255, 255, 255, .15); }
.img-tools-bar button[aria-pressed="true"] { background: #fff; color: #1d2420; }
.img-tools-bar .img-remove { color: #ffb4a8; }
.img-handle {
  position: absolute; right: -11px; bottom: -11px; width: 22px; height: 22px; pointer-events: auto;
  border-radius: 50%; background: var(--primary); border: 3px solid #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .35);
  cursor: nwse-resize; touch-action: none;
}
.img-size-label {
  position: absolute; left: 10px; bottom: 10px; padding: 2px 8px; border-radius: 999px;
  background: rgba(20, 30, 25, .75); color: #fff; font: 600 .75rem var(--font);
}