/* ==========================================================================
   Christ World Church - Global stylesheet
   Palette: deep blue, white, gold, soft gray
   Structure: 1) tokens  2) base  3) layout  4) header/nav  5) hero
              6) components  7) forms  8) footer  9) utilities  10) responsive
   ========================================================================== */

/* 1) DESIGN TOKENS ======================================================== */
:root {
  /* Brand colours */
  --blue-900: #071A32;
  --blue-800: #0B2545;
  --blue-700: #123A63;
  --blue-600: #1B4E86;
  --blue-100: #E8EEF6;
  --blue-050: #F3F7FC;

  /* gold-600 is the accent used for text on light backgrounds; this value
     clears WCAG AA (5.49:1 on white, 4.77:1 on gold-100). */
  --gold-600: #856410;
  --gold-500: #C9A227;
  --gold-400: #DCBB55;
  --gold-100: #F7EFD6;

  --gray-900: #1B2430;
  --gray-700: #414B5A;
  --gray-500: #5F6874;   /* 5.65:1 on white - safe for small meta text */
  --gray-300: #D3D8E0;
  --gray-200: #E7EAEF;
  --gray-100: #F4F6F9;
  --white: #FFFFFF;

  /* Added for the community upgrade: a warm cream ground and a gentle sky
     accent, used to separate interactive areas from teaching content. */
  --cream-50:  #FBF8F1;
  --cream-100: #F5EFE2;
  --sky-050:   #EFF6FC;
  --sky-100:   #D9E9F7;
  --sky-600:   #2F6F9F;
  --sky-700:   #235A83;

  /* Semantic */
  --bg: var(--white);
  --bg-alt: var(--gray-100);
  --bg-warm: var(--cream-50);
  --bg-deep: var(--blue-800);
  --text: var(--gray-900);
  --text-muted: var(--gray-700);
  --accent: var(--gold-500);
  --accent-strong: var(--gold-600);
  --line: var(--gray-200);

  /* Typography */
  --font-display: "Cormorant Garamond", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --step--1: clamp(0.86rem, 0.83rem + 0.15vw, 0.94rem);
  --step-0:  clamp(1rem, 0.96rem + 0.2vw, 1.09rem);
  --step-1:  clamp(1.2rem, 1.12rem + 0.4vw, 1.4rem);
  --step-2:  clamp(1.5rem, 1.34rem + 0.8vw, 2rem);
  --step-3:  clamp(1.9rem, 1.6rem + 1.5vw, 2.9rem);
  --step-4:  clamp(2.3rem, 1.8rem + 2.5vw, 4rem);

  /* Space + shape */
  --sp-1: .35rem;  --sp-2: .7rem;   --sp-3: 1.1rem;  --sp-4: 1.6rem;
  --sp-5: 2.4rem;  --sp-6: 3.4rem;  --sp-7: 5rem;    --sp-8: 7rem;

  --radius: 14px;
  --radius-sm: 9px;
  --shadow-sm: 0 1px 2px rgba(11, 37, 69, .06), 0 3px 10px rgba(11, 37, 69, .05);
  --shadow-md: 0 6px 18px rgba(11, 37, 69, .09), 0 2px 6px rgba(11, 37, 69, .05);
  --shadow-lg: 0 18px 44px rgba(11, 37, 69, .16);

  --wrap: 1180px;
  --wrap-narrow: 760px;
  --header-h: 76px;
}

/* 2) BASE ================================================================= */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.15;
  color: var(--blue-800);
  margin: 0 0 var(--sp-3);
  letter-spacing: -0.005em;
}
h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-2); }
h4 { font-size: var(--step-1); }

p { margin: 0 0 var(--sp-3); }
p:last-child { margin-bottom: 0; }

a { color: var(--blue-600); text-decoration-color: rgba(27, 78, 134, .35); text-underline-offset: 3px; }
a:hover { color: var(--blue-800); text-decoration-color: currentColor; }

img { max-width: 100%; height: auto; display: block; }
ul, ol { margin: 0 0 var(--sp-3); padding-left: 1.25rem; }
li { margin-bottom: .4rem; }
li:last-child { margin-bottom: 0; }

strong { font-weight: 650; color: var(--blue-800); }
hr { border: 0; border-top: 1px solid var(--line); margin: var(--sp-5) 0; }

:focus-visible {
  outline: 3px solid var(--gold-500);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link {
  /* Hidden by clipping rather than by left: -9999px. A negative offset works
     left-to-right, but on an Arabic page it sits outside the inline start and
     inflates the document scrollWidth. Clipping keeps the link in the flow at
     zero size, which behaves identically in both directions. */
  position: absolute; top: 0; inset-inline-start: 0; z-index: 999;
  width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
  background: var(--blue-800); color: #fff; padding: .8rem 1.2rem; border-radius: 0 0 8px 0;
}
.skip-link:focus {
  width: auto; height: auto; overflow: visible; clip-path: none;
}

/* 3) LAYOUT =============================================================== */
.wrap { width: min(100% - 2.4rem, var(--wrap)); margin-inline: auto; }
.wrap-narrow { width: min(100% - 2.4rem, var(--wrap-narrow)); margin-inline: auto; }

.section { padding: var(--sp-7) 0; }
.section--tight { padding: var(--sp-6) 0; }
.section--alt { background: var(--bg-alt); }
.section--blue { background: var(--blue-800); color: #DDE6F1; }
.section--blue h2, .section--blue h3 { color: #fff; }
.section--tint { background: linear-gradient(180deg, var(--blue-050), var(--white)); }

.section-head { max-width: 780px; margin-bottom: var(--sp-5); }
.section-head--center { margin-inline: auto; text-align: center; }

.eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: .76rem;
  font-weight: 650;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent-strong);
  margin-bottom: var(--sp-2);
}
.section--blue .eyebrow { color: var(--gold-400); }

.lede { font-size: var(--step-1); color: var(--text-muted); line-height: 1.6; }
.section--blue .lede { color: #C6D4E5; }

.grid { display: grid; gap: var(--sp-4); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

/* 4) HEADER + NAVIGATION ================================================== */
.site-header {
  position: sticky; top: 0; z-index: 60;
  background: var(--white);
  border-bottom: 1px solid var(--line);
  /* No backdrop-filter here on purpose. It made the header a containing block
     and its own compositing layer, and the dropdowns hang outside the header's
     box; Chrome could leave a closed menu's pixels painted on screen. */
}
.site-header::after {
  content: ""; display: block; height: 3px;
  background: linear-gradient(90deg, var(--gold-500), var(--gold-400) 40%, transparent);
}

.header-inner {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  min-height: var(--header-h);
}

.brand { display: flex; align-items: center; gap: .65rem; text-decoration: none; flex-shrink: 0; }
.brand:hover { text-decoration: none; }
.brand-mark { width: 40px; height: 40px; flex: none; }
.brand-text { display: flex; flex-direction: column; line-height: 1.05; }
.brand-name {
  font-family: var(--font-display); font-size: 1.32rem; font-weight: 700;
  color: var(--blue-800); letter-spacing: .01em;
}
.brand-sub {
  font-size: .63rem; letter-spacing: .17em; text-transform: uppercase;
  color: var(--gold-600); font-weight: 650;
}

.nav-toggle {
  display: none; align-items: center; gap: .5rem;
  background: var(--blue-800); color: #fff; border: 0; cursor: pointer;
  font: inherit; font-size: .9rem; font-weight: 600;
  padding: .6rem .9rem; border-radius: var(--radius-sm);
}
.nav-toggle svg { width: 18px; height: 18px; }

.nav { display: flex; align-items: center; gap: .15rem; }
.nav > ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: .1rem; }
.nav li { margin: 0; position: relative; }

.nav-link {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .55rem .7rem; border-radius: var(--radius-sm);
  color: var(--gray-900); font-size: .93rem; font-weight: 550;
  text-decoration: none; white-space: nowrap; background: none; border: 0;
  font-family: inherit; cursor: pointer;
}
.nav-link:hover { background: var(--blue-050); color: var(--blue-800); text-decoration: none; }
.nav-link[aria-current="page"] { color: var(--blue-800); }
.nav-link[aria-current="page"]::after {
  content: ""; position: absolute; left: .7rem; right: .7rem; bottom: .2rem;
  height: 2px; background: var(--gold-500); border-radius: 2px;
}
.nav-link .caret { width: 10px; height: 10px; transition: transform .18s ease; opacity: .6; }
.nav-link[aria-expanded="true"] .caret { transform: rotate(180deg); }

.nav-submenu {
  list-style: none; margin: 0;
  position: absolute; top: calc(100% + .4rem); left: 0; min-width: 250px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-lg); padding: .45rem; display: none; flex-direction: column; gap: .1rem;
}
.nav-submenu.is-open { display: flex; }
/* Invisible bridge across the 6px gap between the nav item and its dropdown.
   Without it the pointer leaves the item's hover area on the way down and the
   menu closes before the visitor can reach a link. */
.nav-submenu::before {
  content: ""; position: absolute; left: 0; right: 0; top: -10px; height: 10px;
}
.nav-submenu a {
  display: block; padding: .58rem .7rem; border-radius: var(--radius-sm);
  font-size: .91rem; color: var(--gray-900); text-decoration: none;
}
.nav-submenu a:hover { background: var(--blue-050); color: var(--blue-800); }

.nav-cta { margin-left: .5rem; }

/* 5) HERO ================================================================= */
.hero { position: relative; isolation: isolate; color: #fff; }
.hero picture, .hero img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2;
}
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(7, 26, 50, .70) 0%, rgba(7, 26, 50, .55) 45%, rgba(7, 26, 50, .82) 100%),
    linear-gradient(90deg, rgba(7, 26, 50, .55), transparent 70%);
}
.hero-inner { padding: var(--sp-8) 0; max-width: 760px; }
.hero--tall .hero-inner { padding: calc(var(--sp-8) + 2rem) 0; }
.hero--short .hero-inner { padding: var(--sp-6) 0; }

.hero h1 { color: #fff; text-shadow: 0 2px 24px rgba(0, 0, 0, .35); margin-bottom: var(--sp-3); }
.hero .eyebrow { color: var(--gold-400); }
.hero-sub {
  font-family: var(--font-display); font-size: var(--step-2); font-weight: 500;
  color: var(--gold-400); margin-bottom: var(--sp-3); line-height: 1.25;
}
.hero-text { font-size: var(--step-1); color: #E4EBF4; max-width: 60ch; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: var(--sp-4); }

.hero-badge {
  display: inline-flex; align-items: center; gap: .55rem;
  background: rgba(255, 255, 255, .13); border: 1px solid rgba(255, 255, 255, .28);
  padding: .38rem .85rem; border-radius: 999px; font-size: .8rem; font-weight: 600;
  letter-spacing: .04em; margin-bottom: var(--sp-3); backdrop-filter: blur(6px);
}
.pulse-dot {
  width: 9px; height: 9px; border-radius: 50%; background: var(--gold-400);
  box-shadow: 0 0 0 0 rgba(220, 187, 85, .8); animation: pulse 2.4s infinite;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(220, 187, 85, .75); }
  70%  { box-shadow: 0 0 0 12px rgba(220, 187, 85, 0); }
  100% { box-shadow: 0 0 0 0 rgba(220, 187, 85, 0); }
}

/* 6) COMPONENTS =========================================================== */

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .8rem 1.4rem; border-radius: 999px; border: 2px solid transparent;
  font-family: var(--font-body); font-size: .95rem; font-weight: 650; line-height: 1;
  text-decoration: none; cursor: pointer; transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn--primary { background: var(--gold-500); color: var(--blue-900); box-shadow: var(--shadow-md); }
.btn--primary:hover { background: var(--gold-400); color: var(--blue-900); }
.btn--blue { background: var(--blue-800); color: #fff; box-shadow: var(--shadow-md); }
.btn--blue:hover { background: var(--blue-700); color: #fff; }
.btn--ghost { background: rgba(255, 255, 255, .1); color: #fff; border-color: rgba(255, 255, 255, .6); }
.btn--ghost:hover { background: rgba(255, 255, 255, .2); color: #fff; }
.btn--outline { background: transparent; color: var(--blue-800); border-color: var(--blue-800); }
.btn--outline:hover { background: var(--blue-800); color: #fff; }
.btn--sm { padding: .55rem 1rem; font-size: .86rem; }
.btn--block { width: 100%; }
.btn[disabled], .btn.is-busy { opacity: .65; pointer-events: none; }

.link-arrow { font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; gap: .35rem; }
.link-arrow::after { content: "\2192"; transition: transform .15s ease; }
.link-arrow:hover::after { transform: translateX(3px); }

/* Cards */
.card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-sm); padding: var(--sp-4);
  display: flex; flex-direction: column; gap: var(--sp-2);
}
.card--flush { padding: 0; overflow: hidden; }
.card--link { transition: transform .18s ease, box-shadow .18s ease; }
.card--link:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.card h3 { margin-bottom: 0; }
.card-body { padding: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-2); flex: 1; }
.card-media { aspect-ratio: 3 / 2; overflow: hidden; background: var(--gray-100); }
.card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.card--link:hover .card-media img { transform: scale(1.04); }
.card-actions { margin-top: auto; padding-top: var(--sp-2); display: flex; flex-wrap: wrap; gap: .5rem; }

.chip {
  display: inline-block; align-self: flex-start;
  background: var(--blue-050); color: var(--blue-700);
  border: 1px solid var(--blue-100);
  font-size: .72rem; font-weight: 650; letter-spacing: .09em; text-transform: uppercase;
  padding: .25rem .6rem; border-radius: 999px;
}
.chip--gold { background: var(--gold-100); color: var(--gold-600); border-color: #EEDFB0; }
.chip--sample { background: #FFF4E5; color: #8A5B00; border-color: #F3DDB8; }

/* Scripture card */
.scripture-card {
  background: #fff; border: 1px solid var(--line); border-left: 5px solid var(--gold-500);
  border-radius: var(--radius); padding: var(--sp-4); box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column; gap: var(--sp-2); height: 100%;
}
.scripture-card blockquote {
  margin: 0; font-family: var(--font-display); font-size: var(--step-1);
  line-height: 1.45; color: var(--blue-800);
}
.scripture-ref {
  font-size: .82rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--accent-strong);
}
.scripture-reflection { font-size: .95rem; color: var(--text-muted); margin: 0; }
.scripture-card .card-actions { border-top: 1px solid var(--line); margin-top: auto; }

/* Big scripture banner */
.verse-banner {
  background:
    linear-gradient(rgba(7, 26, 50, .88), rgba(11, 37, 69, .93)),
    var(--banner-img, none) center/cover no-repeat;
  color: #fff; text-align: center; padding: var(--sp-7) 0;
}
.verse-banner blockquote {
  margin: 0 auto; max-width: 22ch;
  font-family: var(--font-display); font-size: var(--step-3); line-height: 1.28; color: #fff;
}
.verse-banner .scripture-ref { color: var(--gold-400); display: block; margin-top: var(--sp-3); }
.verse-banner--wide blockquote { max-width: 34ch; }

/* Sermon card */
.sermon-card { height: 100%; }
.sermon-card .verse-inline {
  border-left: 3px solid var(--gold-400); padding-left: .8rem; margin: 0;
  font-family: var(--font-display); font-size: 1.05rem; color: var(--blue-700); line-height: 1.4;
}
.sermon-meta { font-size: .82rem; color: var(--gray-500); display: flex; gap: .8rem; flex-wrap: wrap; }

/* Prayer card */
.prayer-card { border-top: 4px solid var(--blue-700); height: 100%; }
.prayer-text {
  background: var(--blue-050); border-radius: var(--radius-sm);
  padding: var(--sp-3); font-size: .97rem; color: var(--blue-800); line-height: 1.75;
  border: 1px solid var(--blue-100);
}
.prayer-note {
  font-size: .85rem; color: var(--gray-500); border-left: 3px solid var(--gray-300);
  padding-left: .7rem; margin: 0;
}

/* Feature / icon list */
.feature { display: flex; gap: var(--sp-3); align-items: flex-start; }
.feature-icon {
  flex: none; width: 46px; height: 46px; border-radius: 50%;
  background: var(--gold-100); color: var(--gold-600);
  display: grid; place-items: center; font-weight: 700; font-family: var(--font-display); font-size: 1.15rem;
}
.section--blue .feature-icon { background: rgba(201, 162, 39, .2); color: var(--gold-400); }
.feature h3 { font-size: var(--step-1); margin-bottom: .3rem; }
.feature p { font-size: .95rem; color: var(--text-muted); margin: 0; }
.section--blue .feature p { color: #BCCBDE; }

/* Split image + text */
.split { display: grid; gap: var(--sp-5); align-items: center; grid-template-columns: 1fr 1fr; }
.split--reverse .split-media { order: 2; }
.split-media img { border-radius: var(--radius); box-shadow: var(--shadow-md); width: 100%; }

/* CTA band */
.cta-band {
  background: linear-gradient(135deg, var(--blue-800), var(--blue-600));
  color: #fff; border-radius: var(--radius); padding: var(--sp-5);
  display: flex; gap: var(--sp-4); align-items: center; justify-content: space-between; flex-wrap: wrap;
}
.cta-band h2, .cta-band h3 { color: #fff; margin-bottom: .4rem; }
.cta-band p { color: #C9D8EA; margin: 0; max-width: 58ch; }
.cta-band .btn-row { display: flex; gap: .6rem; flex-wrap: wrap; }

/* Accordion (topics / FAQ) */
.accordion { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: #fff; }
.accordion + .accordion { margin-top: var(--sp-3); }
.accordion summary {
  cursor: pointer; list-style: none; padding: var(--sp-4);
  font-family: var(--font-display); font-size: var(--step-1); font-weight: 600; color: var(--blue-800);
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-3);
}
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary::after {
  content: "+"; font-size: 1.5rem; line-height: 1; color: var(--gold-600); flex: none; transition: transform .2s ease;
}
.accordion[open] summary::after { content: "\2013"; }
.accordion summary:hover { background: var(--blue-050); }
.accordion-body { padding: 0 var(--sp-4) var(--sp-4); border-top: 1px solid var(--line); padding-top: var(--sp-3); }

/* Media placeholder (stream / video) */
.media-placeholder {
  position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden;
  background: linear-gradient(135deg, var(--blue-800), var(--blue-600));
  display: grid; place-items: center; text-align: center; color: #fff; padding: var(--sp-4);
  border: 1px solid var(--blue-700);
}
.media-placeholder .play {
  width: 74px; height: 74px; border-radius: 50%; background: rgba(255, 255, 255, .14);
  border: 2px solid rgba(255, 255, 255, .5); display: grid; place-items: center; margin: 0 auto var(--sp-3);
}
.media-placeholder .play svg { width: 26px; height: 26px; margin-left: 4px; fill: #fff; }
.media-placeholder p { color: #C9D8EA; font-size: .92rem; max-width: 46ch; margin: 0 auto; }
.media-note {
  background: var(--gold-100); border: 1px solid #EEDFB0; border-radius: var(--radius-sm);
  padding: var(--sp-3); font-size: .89rem; color: #6B5210; margin-top: var(--sp-3);
}

/* Steps / numbered guide */
.step-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--sp-3); }
.step {
  display: grid; grid-template-columns: 52px 1fr; gap: var(--sp-3); align-items: start;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: var(--sp-4); box-shadow: var(--shadow-sm); margin: 0;
}
.step-num {
  width: 44px; height: 44px; border-radius: 50%; background: var(--blue-800); color: var(--gold-400);
  display: grid; place-items: center; font-family: var(--font-display); font-size: 1.3rem; font-weight: 700;
}
.step h3 { font-size: var(--step-1); margin-bottom: .25rem; }
.step .minutes { font-size: .78rem; color: var(--gray-500); font-weight: 600; letter-spacing: .05em; text-transform: uppercase; }

/* Tag filter row */
.filter-row { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: var(--sp-5); }
.filter-btn {
  font: inherit; font-size: .86rem; font-weight: 600; cursor: pointer;
  background: #fff; color: var(--gray-700); border: 1px solid var(--gray-300);
  padding: .45rem .95rem; border-radius: 999px;
}
.filter-btn:hover { border-color: var(--blue-600); color: var(--blue-700); }
.filter-btn.is-active { background: var(--blue-800); border-color: var(--blue-800); color: #fff; }

/* Stat strip */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--sp-4); text-align: center; }
.stat-num { font-family: var(--font-display); font-size: var(--step-3); color: var(--gold-400); line-height: 1; }
.stat-label { font-size: .85rem; letter-spacing: .1em; text-transform: uppercase; color: #B8C8DC; }

/* Notices */
.notice {
  border-radius: var(--radius); padding: var(--sp-4); border: 1px solid;
  font-size: .93rem;
}
.notice--info { background: var(--blue-050); border-color: var(--blue-100); color: var(--blue-800); }
.notice--warm { background: var(--gold-100); border-color: #EEDFB0; color: #6B5210; }
.notice strong { color: inherit; }

/* Table of contents / jump links */
.jump-links { display: flex; flex-wrap: wrap; gap: .5rem; }
.jump-links a {
  font-size: .85rem; font-weight: 600; text-decoration: none;
  background: #fff; border: 1px solid var(--gray-300); color: var(--gray-700);
  padding: .4rem .85rem; border-radius: 999px;
}
.jump-links a:hover { border-color: var(--blue-600); color: var(--blue-700); }

/* Breadcrumb */
.crumbs { font-size: .85rem; color: var(--gray-500); margin-bottom: var(--sp-3); }
.crumbs a { color: var(--gray-700); text-decoration: none; }
.crumbs a:hover { color: var(--blue-700); text-decoration: underline; }

/* Prose (sermon body, long text) */
.prose { max-width: 68ch; }
.prose p { font-size: 1.06rem; line-height: 1.8; }
.prose h2 { margin-top: var(--sp-5); }
.prose h3 { margin-top: var(--sp-4); }
.prose blockquote {
  margin: var(--sp-4) 0; padding: var(--sp-3) var(--sp-4);
  border-left: 4px solid var(--gold-500); background: var(--blue-050); border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-family: var(--font-display); font-size: var(--step-1); color: var(--blue-800);
}
.prose blockquote cite { display: block; margin-top: .5rem; font-family: var(--font-body); font-size: .82rem;
  font-style: normal; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--accent-strong); }

/* 7) FORMS ================================================================ */
.form-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-md); padding: var(--sp-5);
}
.form-grid { display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.field { display: flex; flex-direction: column; gap: .35rem; }
.field--full { grid-column: 1 / -1; }

label { font-size: .88rem; font-weight: 620; color: var(--blue-800); }
.req { color: #B4232A; }
.hint { font-size: .82rem; color: var(--gray-500); font-weight: 400; }

input[type="text"], input[type="email"], input[type="tel"], input[type="url"],
select, textarea {
  font: inherit; font-size: .97rem; color: var(--text);
  background: #fff; border: 1px solid var(--gray-300); border-radius: var(--radius-sm);
  padding: .72rem .9rem; width: 100%;
  transition: border-color .15s ease, box-shadow .15s ease;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--blue-600); box-shadow: 0 0 0 3px rgba(27, 78, 134, .14); outline: none;
}
textarea { min-height: 150px; resize: vertical; line-height: 1.65; }
select { appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%236B7684' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .9rem center; background-size: 12px; padding-right: 2.4rem;
}

.checkbox { display: flex; gap: .6rem; align-items: flex-start; }
.checkbox input { margin-top: .28rem; width: 18px; height: 18px; flex: none; accent-color: var(--blue-700); }
.checkbox label { font-weight: 500; font-size: .92rem; color: var(--text-muted); }

fieldset { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: var(--sp-3); margin: 0; }
legend { font-size: .88rem; font-weight: 620; color: var(--blue-800); padding: 0 .4rem; }

.form-footer { margin-top: var(--sp-4); display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; }
.form-privacy { font-size: .84rem; color: var(--gray-500); margin: 0; }

.hp-field { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }

.form-status { margin-top: var(--sp-3); border-radius: var(--radius-sm); padding: var(--sp-3); font-size: .93rem; display: none; }
.form-status.is-visible { display: block; }
.form-status--ok { background: #ECF7EE; border: 1px solid #BEE3C6; color: #1E5B2C; }
.form-status--err { background: #FDF0EF; border: 1px solid #F3C9C6; color: #8A2B25; }

.form-success {
  display: none; text-align: center; padding: var(--sp-5);
  background: #ECF7EE; border: 1px solid #BEE3C6; border-radius: var(--radius);
}
.form-success.is-visible { display: block; }
.form-success h3 { color: #1E5B2C; }
.form-success .tick {
  width: 58px; height: 58px; border-radius: 50%; background: #2E7D43; color: #fff;
  display: grid; place-items: center; margin: 0 auto var(--sp-3); font-size: 1.7rem;
}

/* 8) FOOTER =============================================================== */
.site-footer { background: var(--blue-900); color: #A9BBD1; padding: var(--sp-7) 0 var(--sp-4); font-size: .93rem; }
.site-footer a { color: #C9D8EA; text-decoration: none; }
.site-footer a:hover { color: var(--gold-400); text-decoration: underline; }
.footer-grid { display: grid; gap: var(--sp-5); grid-template-columns: 1.6fr 1fr 1fr 1.3fr; }
.footer-col h2 { color: #fff; font-family: var(--font-body); font-size: .82rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; margin-bottom: var(--sp-3); }
.footer-col ul { list-style: none; padding: 0; margin: 0; }
.footer-col li { margin-bottom: .55rem; }
.footer-brand .brand-name { color: #fff; font-size: 1.5rem; }
.footer-brand .brand-sub { color: var(--gold-400); }
.footer-about { margin-top: var(--sp-3); max-width: 42ch; line-height: 1.7; }

.social-row { display: flex; gap: .55rem; flex-wrap: wrap; margin-top: var(--sp-3); }
.social-link {
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .14);
}
.social-link:hover { background: var(--gold-500); border-color: var(--gold-500); }
.social-link svg { width: 18px; height: 18px; fill: #C9D8EA; }
.social-link:hover svg { fill: var(--blue-900); }

.footer-bottom {
  margin-top: var(--sp-6); padding-top: var(--sp-4); border-top: 1px solid rgba(255, 255, 255, .12);
  display: flex; flex-wrap: wrap; gap: var(--sp-3); justify-content: space-between; font-size: .85rem;
}
.footer-scripture {
  font-family: var(--font-display); font-size: 1.15rem; color: #D6E2F0; font-style: italic;
  border-left: 3px solid var(--gold-500); padding-left: var(--sp-3); margin: 0 0 var(--sp-4);
}

/* 9) UTILITIES ============================================================ */
.text-center { text-align: center; }
.mt-0 { margin-top: 0; } .mt-3 { margin-top: var(--sp-3); } .mt-4 { margin-top: var(--sp-4); }
.mt-5 { margin-top: var(--sp-5); } .mb-4 { margin-bottom: var(--sp-4); } .mb-5 { margin-bottom: var(--sp-5); }
.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;
}
.is-hidden { display: none !important; }

/* 10) RESPONSIVE ========================================================== */
@media (max-width: 1040px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

/* The navigation switches to the drawer at 1100px, not at the general layout
   breakpoint. Eight top-level items plus the brand and the Request Prayer
   button need about 1040px; below that the last items were running past the
   edge of the header and off the screen. */
@media (max-width: 1100px) {
  :root { --header-h: 66px; }

  .nav-toggle { display: inline-flex; }

  .nav {
    position: fixed; inset: var(--header-h) 0 0 auto; width: min(360px, 88vw);
    background: #fff; border-left: 1px solid var(--line); box-shadow: var(--shadow-lg);
    flex-direction: column; align-items: stretch; gap: 0;
    padding: var(--sp-3); overflow-y: auto;
    transform: translateX(102%); transition: transform .25s ease; visibility: hidden;
  }
  .nav.is-open { transform: translateX(0); visibility: visible; }
  .nav > ul { flex-direction: column; align-items: stretch; gap: .1rem; width: 100%; }
  .nav-link { width: 100%; justify-content: space-between; padding: .8rem .8rem; font-size: 1rem; }
  .nav-link[aria-current="page"]::after { left: .8rem; right: auto; width: 22px; bottom: .45rem; }
  .nav-submenu {
    position: static; display: none; box-shadow: none; border: 0;
    border-left: 2px solid var(--gold-500); border-radius: 0; margin: 0 0 .4rem .8rem; padding: 0 0 0 .5rem;
  }
  .nav-submenu.is-open { display: flex; }
  .nav-submenu::before { display: none; }   /* no hover bridge needed in the drawer */
  .nav-cta { margin: var(--sp-3) 0 0; }
  .nav-cta .btn { width: 100%; }
}

/* Page layout stacks later than the navigation does: a two-column split still
   reads well at 1000px, so it is kept until 900px. */
@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; }
  .split--reverse .split-media { order: 0; }
  .hero-inner, .hero--tall .hero-inner { padding: var(--sp-6) 0; }
  .section { padding: var(--sp-6) 0; }
}

@media (max-width: 620px) {
  .wrap, .wrap-narrow { width: min(100% - 1.6rem, var(--wrap)); }
  .footer-grid { grid-template-columns: 1fr; }
  .cta-band { padding: var(--sp-4); }
  .form-card { padding: var(--sp-4); }
  .hero-actions .btn { width: 100%; }
  .step { grid-template-columns: 1fr; }
  .verse-banner blockquote { max-width: none; }
}

/* Print */
@media print {
  .site-header, .site-footer, .hero-actions, .card-actions, .nav-toggle, .filter-row { display: none !important; }
  .hero { color: #000; } .hero::before { display: none; }
  body { font-size: 11pt; }
}


/* ==========================================================================
   11) COMMUNITY UPGRADE COMPONENTS
   Media library, short sermons, community posts, filters and moderation.
   ========================================================================== */

.section--cream { background: var(--bg-warm); }
.section--sky   { background: var(--sky-050); }

/* -- Toolbar: search + filters + sort ------------------------------------ */
.toolbar {
  display: grid; gap: var(--sp-3); margin-bottom: var(--sp-5);
  grid-template-columns: minmax(220px, 1.6fr) repeat(auto-fit, minmax(160px, 1fr));
  align-items: end;
}
.toolbar .field { gap: .3rem; }
.toolbar label { font-size: .8rem; letter-spacing: .04em; text-transform: uppercase; color: var(--gray-500); }

.searchbar { position: relative; }
.searchbar input { padding-left: 2.5rem; }
.searchbar svg {
  position: absolute; left: .85rem; top: 50%; transform: translateY(-50%);
  width: 16px; height: 16px; fill: none; stroke: var(--gray-500); stroke-width: 2; pointer-events: none;
}

.result-count { font-size: .88rem; color: var(--gray-500); margin: 0 0 var(--sp-3); }

/* -- Media card (worship, prayer, sermon) -------------------------------- */
.media-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-sm); overflow: hidden; height: 100%;
  display: flex; flex-direction: column;
  transition: transform .18s ease, box-shadow .18s ease;
}
.media-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }

.media-thumb { position: relative; aspect-ratio: 16 / 10; background: var(--blue-800); overflow: hidden; }
.media-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.media-card:hover .media-thumb img { transform: scale(1.05); }
.media-thumb::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(7,26,50,.05) 40%, rgba(7,26,50,.65));
}
.media-play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2;
  width: 58px; height: 58px; border-radius: 50%;
  background: rgba(255,255,255,.22); border: 2px solid rgba(255,255,255,.75);
  display: grid; place-items: center;
}
.media-play svg { width: 20px; height: 20px; fill: #fff; margin-left: 3px; }
.media-card:hover .media-play { background: var(--gold-500); border-color: var(--gold-500); }
.media-card:hover .media-play svg { fill: var(--blue-900); }

.media-duration {
  position: absolute; right: .6rem; bottom: .6rem; z-index: 2;
  background: rgba(7,26,50,.82); color: #fff; font-size: .74rem; font-weight: 650;
  padding: .18rem .5rem; border-radius: 6px; letter-spacing: .03em;
}
.media-type {
  position: absolute; left: .6rem; top: .6rem; z-index: 2;
  background: rgba(255,255,255,.92); color: var(--blue-800);
  font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  padding: .2rem .5rem; border-radius: 999px;
}

.media-body { padding: var(--sp-3) var(--sp-4) var(--sp-4); display: flex; flex-direction: column; gap: .55rem; flex: 1; }
.media-body h3 { font-size: 1.22rem; margin: 0; line-height: 1.25; }
.media-body h3 a { text-decoration: none; color: var(--blue-800); }
.media-body h3 a:hover { color: var(--blue-600); }
.media-desc { font-size: .92rem; color: var(--text-muted); margin: 0; }
.media-verse {
  font-family: var(--font-display); font-size: 1rem; line-height: 1.4; color: var(--blue-700);
  border-left: 3px solid var(--gold-400); padding-left: .75rem; margin: 0;
}
.media-actions { margin-top: auto; padding-top: .6rem; display: flex; flex-wrap: wrap; gap: .4rem; }

/* -- Small icon button --------------------------------------------------- */
.icon-btn {
  display: inline-flex; align-items: center; gap: .35rem;
  font: inherit; font-size: .82rem; font-weight: 600; cursor: pointer;
  background: #fff; color: var(--gray-700); border: 1px solid var(--gray-300);
  padding: .4rem .75rem; border-radius: 999px; text-decoration: none;
}
.icon-btn:hover { border-color: var(--blue-600); color: var(--blue-700); background: var(--blue-050); text-decoration: none; }
.icon-btn svg { width: 14px; height: 14px; }
.icon-btn[aria-pressed="true"] { background: var(--gold-100); border-color: var(--gold-400); color: var(--gold-600); }

/* -- Status + moderation badges ------------------------------------------ */
.badge {
  display: inline-flex; align-items: center; gap: .3rem;
  font-size: .7rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  padding: .2rem .55rem; border-radius: 999px; border: 1px solid;
}
.badge--pending  { background: #FFF6E5; color: #8A5B00; border-color: #F0DCB4; }
.badge--approved { background: #ECF7EE; color: #1E5B2C; border-color: #BEE3C6; }
.badge--rejected { background: #FDF0EF; color: #8A2B25; border-color: #F3C9C6; }
.badge--featured { background: var(--gold-100); color: var(--gold-600); border-color: #EEDFB0; }
.badge--preview  { background: var(--sky-100); color: var(--sky-700); border-color: #BCD8EE; }
.badge--private  { background: var(--gray-100); color: var(--gray-700); border-color: var(--gray-300); }

/* -- Community post card -------------------------------------------------- */
.post-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-sm); padding: var(--sp-4);
  display: flex; flex-direction: column; gap: var(--sp-2); height: 100%;
}
.post-head { display: flex; align-items: center; gap: .7rem; }
.avatar {
  width: 42px; height: 42px; border-radius: 50%; flex: none;
  background: var(--blue-800); color: var(--gold-400);
  display: grid; place-items: center;
  font-family: var(--font-display); font-size: 1.05rem; font-weight: 700;
}
.avatar--anon { background: var(--gray-300); color: var(--gray-700); }
.post-meta { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.post-author { font-weight: 650; color: var(--blue-800); font-size: .95rem; }
.post-sub { font-size: .78rem; color: var(--gray-500); }
.post-card h3 { font-size: 1.18rem; margin: 0; }
.post-card h3 a { text-decoration: none; color: var(--blue-800); }
.post-card h3 a:hover { color: var(--blue-600); }
.post-body { font-size: .95rem; color: var(--text-muted); margin: 0; }
.post-foot {
  margin-top: auto; padding-top: var(--sp-2); border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: .4rem; align-items: center;
}
.post-foot .spacer { margin-left: auto; }

/* -- Comment thread ------------------------------------------------------- */
.comment { display: flex; gap: .8rem; padding: var(--sp-3) 0; border-top: 1px solid var(--line); }
.comment:first-child { border-top: 0; }
.comment .avatar { width: 34px; height: 34px; font-size: .85rem; }
.comment-body { min-width: 0; }
.comment-body p { font-size: .93rem; margin: .2rem 0 0; }

/* -- Tabs ----------------------------------------------------------------- */
.tabs { display: flex; gap: .3rem; border-bottom: 2px solid var(--line); margin-bottom: var(--sp-4); flex-wrap: wrap; }
.tab {
  font: inherit; font-size: .93rem; font-weight: 620; cursor: pointer;
  background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -2px;
  padding: .6rem .9rem; color: var(--gray-700);
}
.tab:hover { color: var(--blue-700); }
.tab.is-active { color: var(--blue-800); border-bottom-color: var(--gold-500); }

/* -- States --------------------------------------------------------------- */
.state {
  text-align: center; padding: var(--sp-6) var(--sp-4);
  border: 1px dashed var(--gray-300); border-radius: var(--radius); background: var(--gray-100);
}
.state h3 { margin-bottom: .4rem; }
.state p { color: var(--text-muted); margin: 0 auto; max-width: 46ch; }
.state--error { background: #FDF0EF; border-color: #F3C9C6; }
.state--error h3 { color: #8A2B25; }

.spinner {
  width: 34px; height: 34px; margin: 0 auto var(--sp-3);
  border: 3px solid var(--gray-300); border-top-color: var(--blue-600);
  border-radius: 50%; animation: spin 1s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* -- Header sign-in ------------------------------------------------------- */
.nav-account {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .9rem; font-weight: 600; text-decoration: none; color: var(--blue-800);
  padding: .5rem .6rem; border-radius: var(--radius-sm); white-space: nowrap;
}
.nav-account:hover { background: var(--blue-050); text-decoration: none; }
.nav-account svg { width: 17px; height: 17px; fill: currentColor; }

/* -- Guideline / rule list ------------------------------------------------ */
.rule-list { list-style: none; padding: 0; margin: 0; }
.rule {
  display: grid; grid-template-columns: 34px 1fr; gap: var(--sp-3); align-items: start;
  margin: 0; padding: var(--sp-3) 0; border-bottom: 1px solid var(--line);
}
.rule:last-child { border-bottom: 0; }
.rule-mark {
  width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  font-size: .9rem; font-weight: 700;
}
.rule--do  .rule-mark { background: #ECF7EE; color: #1E5B2C; }
.rule--dont .rule-mark { background: #FDF0EF; color: #8A2B25; }
.rule h3 { font-size: 1.05rem; margin: 0 0 .2rem; font-family: var(--font-body); font-weight: 650; }
.rule p { font-size: .93rem; color: var(--text-muted); margin: 0; }

/* -- Emergency notice ----------------------------------------------------- */
.emergency {
  background: #FDF4EC; border: 1px solid #F0D3B4; border-left: 5px solid #C2691A;
  border-radius: var(--radius); padding: var(--sp-4); color: #6B3B0E;
}
.emergency strong { color: #6B3B0E; }
.emergency p:last-child { margin-bottom: 0; }

/* -- Metrics -------------------------------------------------------------- */
.metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--sp-3); }
.metric {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: var(--sp-3) var(--sp-4); text-align: center;
}
.metric-num { font-family: var(--font-display); font-size: 2rem; color: var(--blue-800); line-height: 1.1; }
.metric-label { font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; color: var(--gray-500); }

@media (max-width: 620px) {
  .toolbar { grid-template-columns: 1fr; }
  .rule { grid-template-columns: 1fr; }
  .rule-mark { display: none; }
}


/* ==========================================================================
   12) LANGUAGE SWITCHER AND RIGHT-TO-LEFT SUPPORT
   ========================================================================== */

.lang-switch { position: relative; margin-inline-start: .4rem; }
.lang-switch > summary {
  list-style: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .5rem .75rem; border-radius: 999px;
  border: 1px solid var(--gray-300); background: #fff;
  font-size: .88rem; font-weight: 600; color: var(--gray-900); white-space: nowrap;
}
.lang-switch > summary::-webkit-details-marker { display: none; }
.lang-switch > summary:hover { border-color: var(--blue-600); color: var(--blue-700); background: var(--blue-050); }
.lang-switch > summary svg { width: 17px; height: 17px; flex: none; }
.lang-switch[open] > summary { border-color: var(--blue-600); background: var(--blue-050); }

.lang-list {
  position: absolute; top: calc(100% + .4rem); inset-inline-end: 0; z-index: 70;
  min-width: 210px; max-height: 60vh; overflow-y: auto;
  list-style: none; margin: 0; padding: .4rem;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
}
.lang-list li { margin: 0; }
.lang-list a {
  display: block; padding: .55rem .7rem; border-radius: var(--radius-sm);
  font-size: .93rem; color: var(--gray-900); text-decoration: none;
}
.lang-list a:hover { background: var(--blue-050); color: var(--blue-800); }
.lang-list a[aria-current="true"] {
  background: var(--gold-100); color: var(--gold-600); font-weight: 650;
}

/* The footer switcher sits inline under the columns. */
.site-footer .lang-switch { margin: var(--sp-4) 0 0; }
.site-footer .lang-switch > summary {
  background: rgba(255, 255, 255, .07); border-color: rgba(255, 255, 255, .18); color: #C9D8EA;
}
.site-footer .lang-switch > summary:hover { background: rgba(255, 255, 255, .13); color: #fff; }
.site-footer .lang-list { inset-inline-end: auto; inset-inline-start: 0; bottom: calc(100% + .4rem); top: auto; }

@media (max-width: 1100px) {
  .lang-switch { margin: var(--sp-3) 0 0; width: 100%; }
  .lang-switch > summary { width: 100%; justify-content: center; }
  .lang-list { position: static; box-shadow: none; margin-top: .4rem; max-height: none; }
}

/* -- Right-to-left ---------------------------------------------------------
   Logical properties (margin-inline, padding-inline, inset-inline) handle most
   of the flip automatically. These are the few places that needed a physical
   value and therefore need mirroring. */
[dir="rtl"] .scripture-card { border-left: 1px solid var(--line); border-right: 5px solid var(--gold-500); }
[dir="rtl"] .prayer-note,
[dir="rtl"] .media-verse,
[dir="rtl"] .verse-inline { border-left: 0; border-right: 3px solid var(--gold-400); padding-left: 0; padding-right: .8rem; }
[dir="rtl"] .prose blockquote { border-left: 0; border-right: 4px solid var(--gold-500); border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
[dir="rtl"] .footer-scripture { border-left: 0; border-right: 3px solid var(--gold-500); padding-left: 0; padding-right: var(--sp-3); }
[dir="rtl"] .emergency { border-left: 1px solid #F0D3B4; border-right: 5px solid #C2691A; }
[dir="rtl"] .prayer-card { }
[dir="rtl"] .nav-submenu { left: auto; right: 0; }
[dir="rtl"] .media-type { left: auto; right: .6rem; }
[dir="rtl"] .media-duration { right: auto; left: .6rem; }
[dir="rtl"] .searchbar input { padding-left: .9rem; padding-right: 2.5rem; }
[dir="rtl"] .searchbar svg { left: auto; right: .85rem; }
[dir="rtl"] select {
  background-position: left .9rem center;
  padding-right: .9rem; padding-left: 2.4rem;
}
[dir="rtl"] .link-arrow::after { content: "\2190"; }
[dir="rtl"] .link-arrow:hover::after { transform: translateX(-3px); }
[dir="rtl"] .hero::before {
  background:
    linear-gradient(180deg, rgba(7, 26, 50, .70) 0%, rgba(7, 26, 50, .55) 45%, rgba(7, 26, 50, .82) 100%),
    linear-gradient(270deg, rgba(7, 26, 50, .55), transparent 70%);
}
[dir="rtl"] .site-header::after {
  background: linear-gradient(270deg, var(--gold-500), var(--gold-400) 40%, transparent);
}
[dir="rtl"] .step { grid-template-columns: 52px 1fr; }
[dir="rtl"] .crumbs { direction: rtl; }

/* Arabic reads more comfortably with slightly more line height. */
[lang="ar"] body, [dir="rtl"] body { line-height: 1.85; }
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4 { line-height: 1.35; }

/* Scripts whose glyphs do not suit the display serif fall back to the body face. */
[lang="ar"] h1, [lang="ar"] h2, [lang="ar"] h3, [lang="ar"] h4,
[lang="ar"] .hero-sub, [lang="ar"] blockquote,
[lang="zh-CN"] h1, [lang="zh-CN"] h2, [lang="zh-CN"] h3, [lang="zh-CN"] h4,
[lang="zh-CN"] .hero-sub, [lang="zh-CN"] blockquote,
[lang="hi"] h1, [lang="hi"] h2, [lang="hi"] h3, [lang="hi"] h4,
[lang="hi"] .hero-sub, [lang="hi"] blockquote {
  font-family: var(--font-body);
  font-weight: 600;
  letter-spacing: 0;
}
[lang="hi"] body { line-height: 1.85; }

/* -- "EN" marker ----------------------------------------------------------
   Shown beside a navigation link whose page is not translated yet, so that
   leaving your language is expected rather than a surprise. */
.en-tag {
  display: inline-block; margin-inline-start: .35rem;
  font-size: .58rem; font-weight: 700; letter-spacing: .06em;
  padding: .08rem .28rem; border-radius: 4px; vertical-align: middle;
  background: var(--gray-200); color: var(--gray-700); border: 1px solid var(--gray-300);
}
.nav-submenu .en-tag, .nav-link .en-tag { opacity: .75; }
/* The Bible-edition badge beside a verse. Styled like .en-tag but a separate
   class: .en-tag means "this link leaves your language", which is a different
   thing, and restyling one must not silently restyle the other. */
.src-tag {
  display: inline-block; margin-inline-start: .35rem;
  font-size: .58rem; font-weight: 700; letter-spacing: .06em;
  padding: .08rem .28rem; border-radius: 4px; vertical-align: middle;
  background: var(--gray-200); color: var(--gray-700); border: 1px solid var(--gray-300);
}
.site-footer .en-tag {
  background: rgba(255, 255, 255, .10); color: #9FB3CB; border-color: rgba(255, 255, 255, .16);
}