/* ═══════════════════════════════════════════
   Al Hayat Kirche — Main Stylesheet
   Clean · Minimal · Elegant
═══════════════════════════════════════════ */

/* ── Brand Fonts — Al Hayat Kirche Guidelines ─────────────────────────────
   GE Flow        → Arabic text  (regular + bold)
   Myriad Pro     → German / Latin text
   Arial / Arial Bold → system fallback
─────────────────────────────────────────────────────────────────────────── */
@font-face {
  font-family: 'GE Flow';
  src: url('fonts/GEFlow.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'GE Flow';
  src: url('fonts/GEFlow-Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ── Latin-Digit override ────────────────────────────────────────────────────
   GE Flow (Arabic font) substitutes Western digits (0–9) with Eastern
   Arabic-Indic digits (٠–٩) in RTL/Arabic mode via its OpenType locl feature.
   Fix: a virtual @font-face limited to digit + numeric-punctuation codepoints,
   sourced from the system's Latin font (Arial). Placed FIRST in the RTL body
   font stack so browsers use Arial for digit chars, GE Flow for Arabic letters.
   No file download — local() resolves to the already-installed system font.
─────────────────────────────────────────────────────────────────────────── */
@font-face {
  font-family: 'Latin-Digits';
  src: local('Arial'), local('Helvetica Neue'), local('sans-serif');
  unicode-range:
    U+0030-0039,   /* 0–9  digits */
    U+002B,        /* +    plus sign */
    U+002D,        /* -    hyphen/minus */
    U+002E,        /* .    full stop */
    U+003A,        /* :    colon (used in 10:30) */
    U+0025,        /* %    percent */
    U+002F,        /* /    slash */
    U+0028-0029;   /* ( )  parentheses */
}

@font-face {
  font-family: 'Myriad Pro';
  src: url('fonts/MyriadPro-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Myriad Pro';
  src: url('fonts/Arial-Bold.ttf') format('truetype');  /* bold variant from brand font set */
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Arial Brand';
  src: url('fonts/Arial.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Arial Brand';
  src: url('fonts/Arial-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ── Variables ────────────────────────────── */
:root {
  /* ── Brand greens — Al Hayat Kirche logo guidelines ─────────────
     PANTONE 349C  →  --green-primary / --green-dark   (dark forest green)
     PANTONE 369C  →  --green-medium                   (medium green)
     PANTONE 390C  →  --green-lime                     (lime/yellow-green, leaf accents)
  ── */
  --green-primary: #006633;   /* PANTONE 349C — main text, buttons, icons   */
  --green-dark:    #004D25;   /* PANTONE 349C deeper — hover, dark surfaces */
  --green-medium:  #57A628;   /* PANTONE 369C — secondary elements           */
  --green-light:   #8DC833;   /* between 369C–390C — borders, subtle accents */
  --green-lime:    #C4D600;   /* PANTONE 390C — leaf/highlight accents only  */
  --green-pale:    #EEF8E8;   /* light tinted background                     */
  --green-soft:    #F5FAF2;   /* very light tinted background                */
  --yellow-accent: #EEF8C0;   /* lime-tinted accent panel                    */
  /* ── Complementary blue — brand guidelines page 2 ── */
  --accent-blue:       #2B4DA0;   /* deep complementary blue — section labels */
  --accent-blue-light: #E8EDF8;   /* light blue tint for backgrounds          */
  /* Warm amber accent — Nature Distilled palette for emotional warmth */
  --amber: #d97706;
  --amber-pale: #fef3c7;
  --amber-light: #fcd34d;
  --text-primary: #1a1a1a;
  --text-secondary: #4a4a4a;
  --text-muted: #888;
  --white: #ffffff;
  --border: #D8EDD0;
  --radius: 6px;
  --radius-lg: 12px;
  --radius-full: 100px;
  --shadow-card: 0 2px 12px rgba(0, 102, 51, 0.08);
  --shadow-lift: 0 8px 28px rgba(0, 102, 51, 0.13);
  --nav-h: 68px;
  --transition: 0.22s ease;
  --font-main:    'Myriad Pro', 'Arial Brand', Arial, 'Segoe UI', sans-serif;  /* German / Latin */
  --font-arabic:  'GE Flow', 'Arial Brand', Arial, sans-serif;               /* Arabic          */
  --max-w: 1180px;
}

/* ── Reset ────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Touch: eliminate 300ms tap delay on all interactive elements (skill: touch-tap-delay) */
a, button, [role="button"], [tabindex] {
  touch-action: manipulation;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
}

body {
  font-family: var(--font-main);
  color: var(--text-primary);
  background: var(--white);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  cursor: pointer;
  font-family: inherit;
  border: none;
  background: none;
}

ul,
ol {
  list-style: none;
}

/* Arabic RTL — Latin-Digits must come FIRST so digits render in Western form */
html[dir="rtl"] body {
  font-family: 'Latin-Digits', var(--font-arabic);
}

html[dir="rtl"] .nav-container {
  flex-direction: row-reverse;
}

/* In RTL, flex row already flows right→left; row-reverse would undo that and give wrong LTR order */
html[dir="rtl"] .nav-links {
  flex-direction: row;
}

html[dir="rtl"] .nav-right {
  flex-direction: row-reverse;
}

html[dir="rtl"] .logo-text {
  text-align: right;
}

html[dir="rtl"] .lang-dropdown {
  right: auto;
  left: 0;
}

html[dir="rtl"] .lang-option {
  text-align: right;
}

/* RTL: flex-direction row is correct here — in RTL, main axis starts from the right, so the
   first child (icon) naturally lands on the right. row-reverse would push it back to the left. */
html[dir="rtl"] .contact-block {
  flex-direction: row;
  text-align: right;
}

html[dir="rtl"] .footer-brand {
  flex-direction: row-reverse;
}

html[dir="rtl"] .calendar-grid {
  direction: rtl;
}

html[dir="rtl"] blockquote {
  border-left: none;
  border-right: 3px solid var(--green-primary);
  padding-left: 0;
  padding-right: 20px;
}

/* ── Utilities ────────────────────────────── */
.container {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 24px;
}

.content-narrow {
  max-width: 780px;
  margin: 0 auto;
}

.hidden {
  display: none !important;
}

.text-center {
  text-align: center;
}

.mt-40 {
  margin-top: 40px;
}

.mt-60 {
  margin-top: 60px;
}

.bg-soft {
  background: var(--green-soft);
}

/* ── Logo Image (real PNG) ─────────────────── */
.nav-logo-img {
  width: 44px;
  height: 44px;
  object-fit: contain;
  flex-shrink: 0;
}

.footer-logo-img {
  width: 32px;
  height: 32px;
  object-fit: contain;
  /* Invert to white for dark footer background */
  filter: brightness(0) invert(1);
  opacity: 0.75;
}

/* Hero watermark: large logo centered, faded in background */
.hero-logo-watermark {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 380px;
  pointer-events: none;
  z-index: 1;
}

.hero-logo-watermark img {
  width: 100%;
  height: auto;
  opacity: 0.06;
}

/* ── Logo mark (kept for backwards compat) ── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 28px;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  border-radius: var(--radius);
  transition: var(--transition);
  cursor: pointer;
}

.btn-primary {
  background: var(--green-dark);
  color: var(--white);
  box-shadow: 0 2px 8px rgba(27, 94, 32, 0.35);
  font-weight: 700;
}

.btn-primary:hover {
  background: #143d16;
  box-shadow: 0 4px 12px rgba(27, 94, 32, 0.45);
}

.btn-outline {
  border: 1.5px solid var(--green-primary);
  color: var(--green-primary);
}

.btn-outline:hover {
  background: var(--green-pale);
}

/* ── Navbar ───────────────────────────────── */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  height: var(--nav-h);
  background: rgba(255, 255, 255, 0.88);
  border-bottom: 1px solid var(--border);
  transition: background 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.navbar.scrolled {
  background: rgba(255, 255, 255, 0.97);
  box-shadow: 0 2px 24px rgba(0, 0, 0, 0.08);
  border-bottom-color: transparent;
}

.nav-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 24px;
}

.nav-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}

.logo-mark {
  display: flex;
  align-items: center;
}

.logo-text {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

/* ── Church name typography — exact logo match ────────────────────────────
   Layout (top → bottom):
     كنيسة الحياة   GE Flow Bold · brand green
     ─────────────  thin green divider line
     ALHAYAT KIRCHE  ALHAYAT = Myriad Pro Bold · KIRCHE = Myriad Pro Regular
────────────────────────────────────────────────────────────────────────── */
.name-bold {
  font-family: var(--font-main);
  font-weight: 700;
}
.name-regular {
  font-family: var(--font-main);
  font-weight: 400;
}

/* Thin green divider — shared by navbar, hero, footer */
.church-name-divider {
  display: block;
  height: 1.5px;
  /* Lighter gradient: PANTONE 390C (lime) → PANTONE 369C (medium green) — matches logo line */
  background: linear-gradient(90deg, var(--green-lime) 0%, var(--green-medium) 100%);
  margin: 3px 0;
  width: 100%;
}
html[dir="rtl"] .church-name-divider {
  background: linear-gradient(270deg, var(--green-lime) 0%, var(--green-medium) 100%);
}

/* Arabic word-weight split — exact match to logo:
   كنيسة = GE Flow Regular (lighter)
   الحياة  = GE Flow Bold   (heavier)  */
.ar-word-light {
  font-weight: 400;   /* كنيسة — regular */
  font-family: var(--font-arabic);
}
.ar-word-bold {
  font-weight: 700;   /* الحياة — bold */
  font-family: var(--font-arabic);
}

.logo-ar {
  font-size: 1.05rem;
  font-weight: 400;                  /* base weight — bold applied via .ar-word-bold */
  color: var(--green-primary);
  font-family: var(--font-arabic);
  line-height: 1.25;
}

.logo-de {
  font-size: 0.72rem;
  font-weight: 400;
  color: var(--green-primary);
  font-family: var(--font-main);
  text-transform: uppercase;         /* ALHAYAT KIRCHE — all caps, like logo */
  letter-spacing: 0.06em;
  line-height: 1.3;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: nowrap;   /* never wrap onto a second row */
}
html[dir="rtl"] .nav-links { gap: 2px; }

.nav-link {
  padding: 6px 10px;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-secondary);
  border-radius: var(--radius);
  transition: var(--transition);
  position: relative;
  white-space: nowrap;   /* prevent text from breaking across lines */
}
/* Arabic nav labels are longer — scope to ONLY links inside .nav-links container.
   This prevents the rule from shrinking .btn.nav-link (hero CTA, etc). */
html[dir="rtl"] .nav-links .nav-link {
  font-size: 0.78rem;
  padding: 6px 8px;
}

.nav-link:hover,
.nav-link.active {
  color: var(--green-primary);
  background: var(--green-pale);
}

/* A .btn that also carries .nav-link (e.g. hero CTA) must keep .btn sizing/colour.
   Two-class specificity (0,2,0) beats single-class .nav-link (0,1,0). */
.btn.nav-link {
  padding: 12px 28px;
  font-size: 0.9rem;
  font-weight: 600;
}

.btn-primary.nav-link {
  color: var(--white);
}

.nav-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Lang Switcher */
.lang-switcher {
  position: relative;
}

.lang-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  font-size: 0.82rem;
  font-weight: 600;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-secondary);
  transition: var(--transition);
}

.lang-btn:hover {
  border-color: var(--green-primary);
  color: var(--green-primary);
}

/* Lang switcher — use main font (Myriad Pro); GE Flow applies when RTL is active */
.lang-btn,
.lang-option {
  font-family: var(--font-main);
}

.lang-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  min-width: 140px;
  overflow: hidden;
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: var(--transition);
  z-index: 200;
}

.lang-dropdown.open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.lang-option {
  display: block;
  width: 100%;
  padding: 10px 16px;
  font-size: 0.85rem;
  text-align: left;
  transition: var(--transition);
  cursor: pointer;
}

html[dir="rtl"] .lang-option {
  text-align: right;
}

.lang-option:hover {
  background: var(--green-pale);
  color: var(--green-primary);
}

/* Menu Toggle (mobile) */
.menu-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  width: 28px;
  padding: 4px;
}

.menu-toggle span {
  display: block;
  height: 2px;
  background: var(--text-primary);
  border-radius: 2px;
  transition: var(--transition);
}

/* ── Pages / Routing ──────────────────────── */
.page {
  display: none;
  padding-top: var(--nav-h);
  min-height: 100vh;
}

.page.active {
  display: block;
}

/* ── Hero ─────────────────────────────────── */
.hero {
  position: relative;
  min-height: calc(100vh - var(--nav-h));
  display: flex;
  align-items: center;
  overflow: hidden;
}

.hero-bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, var(--green-pale) 0%, var(--white) 60%);
  z-index: -1;
}

.hero-content {
  position: relative;
  z-index: 2;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 80px 24px;
}

.hero-event-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 20px;
  padding: 8px 18px;
  background: rgba(0, 102, 51, 0.08);
  border: 1.5px solid var(--green-light);
  border-radius: 100px;
  font-size: 0.88rem;
  color: var(--green-dark);
  font-weight: 600;
}

html[dir="rtl"] .hero-event-badge {
  flex-direction: row-reverse;
}

.hero-eyebrow {
  font-size: 1rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--green-medium);
  font-weight: 600;
  margin-bottom: 12px;
}

html[dir="rtl"] .hero-eyebrow {
  letter-spacing: 0;
  text-transform: none;
  font-size: 1.05rem;
}

/* Arabic name — top, large, BOLD (like the logo) */
.hero-sub {
  font-size: clamp(2.6rem, 5.5vw, 4.4rem);
  font-weight: 400;                  /* base weight — bold via .ar-word-bold inside */
  color: var(--green-dark);
  line-height: 1.15;
  margin-bottom: 0;
  font-family: var(--font-arabic);
}

/* Thin green line between Arabic and Latin in the hero */
.hero-name-divider {
  display: block;
  width: clamp(200px, 55%, 420px);
  height: 2px;
  /* Same lighter gradient as logo: 390C lime → 369C medium green */
  background: linear-gradient(90deg, var(--green-lime) 0%, var(--green-medium) 100%);
  margin: 10px 0;
}
html[dir="rtl"] .hero-name-divider {
  background: linear-gradient(270deg, var(--green-lime) 0%, var(--green-medium) 100%);
}

/* Latin name — bottom, smaller, ALHAYAT bold / KIRCHE regular, ALL CAPS */
.hero-title {
  font-size: clamp(1.15rem, 2.2vw, 1.85rem);
  font-weight: 400;
  color: var(--green-dark);
  line-height: 1.2;
  margin-bottom: 28px;
  font-family: var(--font-main);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.hero-verse {
  border-left: 3px solid var(--green-primary);
  padding: 8px 20px;
  margin-bottom: 40px;
  font-size: 1.05rem;
  color: var(--text-secondary);
  font-style: italic;
  max-width: 520px;
}

.hero-verse cite {
  display: block;
  font-size: 0.8rem;
  font-style: normal;
  color: var(--green-medium);
  margin-top: 4px;
  font-weight: 600;
}

/* ── Page Hero Banner ─────────────────────── */
.page-hero {
  background: linear-gradient(145deg, var(--green-soft) 0%, var(--green-pale) 60%, var(--green-pale) 100%);
  padding: 64px 0 52px;
  border-bottom: 1px solid var(--border);
  position: relative;
  overflow: hidden;
}

.page-hero::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--green-light), transparent);
}

.page-hero h1 {
  font-size: clamp(1.9rem, 3.2vw, 2.8rem);
  color: var(--green-dark);
  font-weight: 800;
  margin-bottom: 8px;
  line-height: 1.15;
}

.page-hero p {
  color: var(--text-muted);
  font-size: 1.02rem;
  max-width: 520px;
}

/* ── Section ──────────────────────────────── */
.section {
  padding: 72px 0;
}

.section-header {
  text-align: center;
  margin-bottom: 52px;
}

.section-header h2 {
  font-size: 1.9rem;
  font-weight: 700;
  color: var(--green-dark);
  margin-bottom: 8px;
}

.section-header p {
  color: var(--text-muted);
}

.section-label {
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-blue);   /* complementary blue — brand guidelines */
  font-weight: 700;
  margin-bottom: 24px;
  display: block;
  text-align: center;
}

html[dir="rtl"] .section-label {
  text-transform: none;
  letter-spacing: 0;
}

.welcome-text {
  font-size: 1.15rem;
  color: var(--text-secondary);
  line-height: 1.8;
  text-align: center;
  max-width: 680px;
  margin: 0 auto;
}

.divider-line {
  width: 40px;
  height: 2px;
  background: var(--green-pale);
  margin: 40px auto;
}

.body-text {
  font-size: 1rem;
  color: var(--text-secondary);
  line-height: 1.85;
}

/* Multi-paragraph content rendered via JS */
.content-para {
  display: block;
  margin-bottom: 1.1em;
}
.content-para:last-child {
  margin-bottom: 0;
}

/* ── Main Event Highlight ─────────────────────── */
.main-event-section {
  padding: 0 0 48px;
}

.main-event-card {
  display: flex;
  align-items: center;
  gap: 20px;
  background: linear-gradient(135deg, var(--green-dark) 0%, var(--green-primary) 100%);
  color: var(--white);
  border-radius: var(--radius-lg);
  padding: 28px 36px;
  max-width: 680px;
  margin: 0 auto;
  box-shadow: 0 4px 20px rgba(27, 94, 32, 0.25);
}

.main-event-icon {
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.main-event-label {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.8;
  margin-bottom: 4px;
}

.main-event-text {
  font-size: 1.15rem;
  font-weight: 600;
}

html[dir="rtl"] .main-event-card {
  flex-direction: row-reverse;
  text-align: right;
}

/* ── Custom Sections ──────────────────────────── */
.custom-sections-wrapper {
  padding: 0;
}

.custom-section {
  margin-bottom: 32px;
}

.custom-section-text .body-text {
  max-width: 780px;
  margin: 0 auto;
}

.custom-section-image {
  text-align: center;
}

.custom-section-image img {
  max-width: 100%;
  border-radius: var(--radius-lg);
  margin: 0 auto;
}

.custom-section-caption {
  color: var(--text-muted);
  font-size: 0.85rem;
  margin-top: 8px;
}

/* ── Services Grid (Home) ─────────────────── */
.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 24px;
}

.service-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px 24px;
  transition: border-color 0.22s ease, transform 0.22s ease, box-shadow 0.22s ease;
  cursor: pointer;
}

.service-card:hover {
  border-color: var(--green-light);
  transform: translateY(-3px);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.08);
}

.service-day {
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--green-medium);
  font-weight: 700;
  margin-bottom: 8px;
}

.service-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--green-dark);
  margin-bottom: 6px;
}

.service-time {
  font-size: 0.85rem;
  color: var(--text-muted);
}

/* ── Calendar ─────────────────────────────── */
.calendar-wrapper {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.calendar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 28px;
  background: var(--green-primary);
}

.cal-month {
  color: var(--white);
  font-size: 1.1rem;
  font-weight: 600;
}

.cal-nav {
  color: var(--white);
  font-size: 1.6rem;
  padding: 0 8px;
  opacity: 0.8;
  transition: var(--transition);
  background: none;
  border: none;
  cursor: pointer;
}

.cal-nav:hover {
  opacity: 1;
}

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}

.cal-day-header {
  text-align: center;
  padding: 10px 4px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  background: var(--green-soft);
  border-bottom: 1px solid var(--border);
}

.cal-day {
  min-height: 90px;
  padding: 8px;
  border: 0.5px solid var(--border);
  cursor: pointer;
  transition: var(--transition);
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.cal-day:hover {
  background: var(--green-pale);
}

.cal-day.empty {
  background: var(--green-soft);
  opacity: 0.5;
  cursor: default;
}

.cal-day.today {
  background: var(--green-pale);
}

.cal-day.today .cal-day-num {
  color: var(--green-primary);
  font-weight: 700;
}

.cal-day.selected {
  background: var(--green-primary);
}

.cal-day.selected .cal-day-num {
  color: var(--white);
}

.cal-day-num {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-secondary);
}

.cal-event-dot {
  font-size: 0.62rem;
  padding: 1px 5px;
  border-radius: 3px;
  color: var(--white);
  background: var(--green-medium);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* "+N more" overflow badge on calendar days */
.cal-more-badge {
  font-size: 0.58rem;
  font-weight: 700;
  color: var(--text-muted);
  padding: 1px 4px;
  border-radius: 3px;
  background: rgba(0,0,0,0.06);
  align-self: flex-start;
  letter-spacing: 0.02em;
  cursor: pointer;
}

.events-sidebar {
  /* base — overridden in Kalender upgrade block below */
  margin-top: 32px;
}

.events-sidebar h3 {
  font-size: 1rem;
  color: var(--green-dark);
  margin-bottom: 16px;
}

.day-event-item {
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}

.day-event-item:last-child {
  border-bottom: none;
}

.day-event-title {
  font-weight: 600;
  color: var(--green-dark);
  margin-bottom: 2px;
}

.day-event-time {
  font-size: 0.82rem;
  color: var(--green-medium);
}

.day-event-desc {
  font-size: 0.88rem;
  color: var(--text-muted);
  margin-top: 4px;
}

/* ── Media Filter Tabs ───────────────────── */
.media-filter-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 28px;
}

.media-filter-btn {
  padding: 8px 20px;
  border: 1.5px solid var(--green-light);
  border-radius: 20px;
  background: transparent;
  color: var(--green-primary);
  font-family: var(--font);
  font-size: 0.88rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.media-filter-btn:hover {
  background: var(--green-light);
}

.media-filter-btn.active {
  background: var(--green-primary);
  border-color: var(--green-primary);
  color: #fff;
}

#mediaVideosSection {
  margin-top: 32px;
}

/* ── Special Events ──────────────────────── */
.special-events-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 16px;
}

.special-event-card {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  background: var(--white);
  border: 1.5px solid var(--green-light);
  border-radius: var(--radius-lg);
  padding: 24px;
  transition: box-shadow 0.22s ease, transform 0.22s ease;
}

.special-event-card:hover {
  box-shadow: 0 6px 24px rgba(0, 102, 51, 0.12);
  transform: translateY(-2px);
}

.special-event-img-wrap {
  flex-shrink: 0;
  width: 140px;
  height: 140px;
  border-radius: var(--radius);
  overflow: hidden;
  position: relative;
}

.special-event-card--clickable {
  cursor: pointer;
}

.special-event-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.22s ease;
}

.special-event-card--clickable:hover .special-event-img-wrap img {
  transform: scale(1.05);
}

.special-event-body {
  flex: 1;
}

.special-event-date {
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--green-medium);
  font-weight: 700;
  margin-bottom: 6px;
}

html[dir="rtl"] .special-event-date {
  text-transform: none;
  letter-spacing: 0;
}

.special-event-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--green-dark);
  margin-bottom: 4px;
}

.special-event-time {
  font-size: 0.88rem;
  color: var(--green-medium);
  margin-bottom: 8px;
}

.special-event-desc {
  font-size: 0.92rem;
  color: var(--text-secondary);
  line-height: 1.6;
}

/* Day-event sidebar: special event with image */
.day-event-special {
  border-bottom: 1.5px solid var(--green-light);
  background: var(--green-pale);
  border-radius: var(--radius);
  padding: 12px;
  margin-bottom: 4px;
}

.day-event-img {
  width: 100%;
  max-height: 120px;
  object-fit: cover;
  border-radius: calc(var(--radius) - 2px);
  margin-bottom: 8px;
}

@media (max-width: 640px) {
  .special-event-card {
    flex-direction: column;
  }
  .special-event-img-wrap {
    width: 100%;
    height: 180px;
  }
}

.events-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 16px;
}

.event-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px 24px;
  display: flex;
  gap: 20px;
  align-items: flex-start;
  cursor: pointer;
  transition: border-color 0.22s ease, transform 0.22s ease, box-shadow 0.22s ease;
}

.event-card:hover {
  border-color: var(--green-light);
  transform: translateY(-2px);
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.07);
}

.event-card-highlighted {
  border-color: var(--green-primary);
  background: var(--green-pale);
  box-shadow: 0 0 0 2px rgba(0, 102, 51, 0.15);
}

.event-color-bar {
  width: 4px;
  border-radius: 4px;
  background: var(--green-medium);
  flex-shrink: 0;
  align-self: stretch;
}

.event-body {
  flex: 1;
}

.event-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--green-dark);
  margin-bottom: 4px;
}

.event-meta {
  font-size: 0.82rem;
  color: var(--text-muted);
}

.event-desc {
  font-size: 0.88rem;
  color: var(--text-secondary);
  margin-top: 6px;
}

/* ── Gallery ──────────────────────────────── */
.album-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 36px;
}

.album-tab {
  padding: 8px 18px;
  border-radius: 100px;
  border: 1.5px solid var(--border);
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-muted);
  transition: var(--transition);
  cursor: pointer;
  background: none;
}

.album-tab.active,
.album-tab:hover {
  border-color: var(--green-primary);
  color: var(--green-primary);
  background: var(--green-pale);
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}

.gallery-item {
  aspect-ratio: 4/3;
  overflow: hidden;
  border-radius: var(--radius);
  cursor: pointer;
  position: relative;
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.35s ease;
}

.gallery-item:hover img {
  transform: scale(1.04);
}

.gallery-empty {
  text-align: center;
  padding: 60px 24px;
  color: var(--text-muted);
  font-size: 1rem;
}

/* ── Lightbox ─────────────────────────────── */
.lightbox {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(0, 0, 0, 0.92);
  align-items: center;
  justify-content: center;
}

.lightbox.open {
  display: flex;
}

.lightbox-img {
  max-width: 90vw;
  max-height: 85vh;
  border-radius: var(--radius);
}

.lightbox-close,
.lightbox-prev,
.lightbox-next {
  position: absolute;
  background: rgba(255, 255, 255, 0.12);
  color: var(--white);
  border: none;
  cursor: pointer;
  transition: var(--transition);
  border-radius: 50%;
}

.lightbox-close {
  top: 20px;
  right: 24px;
  left: auto;
  font-size: 1.8rem;
  width: 44px;
  height: 44px;
}

.lightbox-prev,
.lightbox-next {
  font-size: 2rem;
  width: 52px;
  height: 52px;
  top: 50%;
  transform: translateY(-50%);
}

.lightbox-prev {
  left: 16px;
}

.lightbox-next {
  right: 16px;
}

html[dir="rtl"] .lightbox-close {
  right: 24px;
  left: auto;
}

html[dir="rtl"] .lightbox-prev {
  right: auto;
  left: 16px;
}

html[dir="rtl"] .lightbox-next {
  left: auto;
  right: 16px;
}

.lightbox-close:hover,
.lightbox-prev:hover,
.lightbox-next:hover {
  background: rgba(255, 255, 255, 0.25);
}

/* ── Videos ───────────────────────────────── */
.video-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 24px;
}

.video-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color 0.22s ease, transform 0.22s ease, box-shadow 0.22s ease;
  cursor: pointer;
}

.video-card:hover {
  border-color: var(--green-light);
  transform: translateY(-3px);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.08);
}

.video-thumb {
  aspect-ratio: 16/9;
  background: var(--green-pale);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.video-thumb video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.video-play-icon {
  position: absolute;
  width: 52px;
  height: 52px;
  background: var(--green-primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
}

.video-card:hover .video-play-icon {
  transform: scale(1.1);
}

.video-play-icon svg {
  margin-left: 3px;
}

/* ── YouTube / Vimeo embed card ── */
.video-thumb--embed { background: #1a1a2e; }
.video-embed-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  opacity: 0.6;
}

.video-info {
  padding: 16px;
}

.video-title {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--green-dark);
  margin-bottom: 4px;
}

.video-desc {
  font-size: 0.82rem;
  color: var(--text-muted);
}

/* ── Video Modal ──────────────────────────── */
.modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 900;
  align-items: center;
  justify-content: center;
}

.modal.open {
  display: flex;
}

.modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
}

.modal-content {
  position: relative;
  z-index: 1;
  background: #000;
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.video-modal-content {
  width: 90vw;
  max-width: 860px;
}

.modal-close {
  position: absolute;
  top: 12px;
  right: 16px;
  font-size: 1.6rem;
  color: var(--white);
  background: rgba(0, 0, 0, 0.5);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
}

.modal-close:hover {
  background: rgba(255, 255, 255, 0.2);
}

/* ── Vision ───────────────────────────────── */
.vision-block {
  padding: 44px 0;
  border-bottom: 1px solid var(--border);
  position: relative;
}

.vision-block:last-child {
  border-bottom: none;
}

.vision-block::before {
  content: '';
  position: absolute;
  left: -24px;
  top: 44px;
  width: 3px;
  height: 28px;
  background: var(--green-primary);
  border-radius: 2px;
}

html[dir="rtl"] .vision-block::before {
  left: auto;
  right: -24px;
}

.vision-block h3 {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--green-dark);
  margin-bottom: 14px;
  letter-spacing: -0.01em;
}

.vision-block p {
  color: var(--text-secondary);
  line-height: 1.9;
  font-size: 0.97rem;
}

/* ── Contact ──────────────────────────────── */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
}

.contact-info {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.contact-block {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 18px 20px;
  transition: box-shadow 0.18s ease, border-color 0.18s ease;
}

.contact-block:hover {
  box-shadow: 0 4px 16px rgba(46,125,50,0.08);
  border-color: var(--green-light);
}

.contact-icon {
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  background: var(--green-pale);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--green-light);
}

.contact-block h4 {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--green-medium);
  margin-bottom: 4px;
}

html[dir="rtl"] .contact-block h4 {
  text-transform: none;
  letter-spacing: 0;
}

.contact-block p,
.contact-block a {
  font-size: 0.92rem;
  color: var(--text-secondary);
  line-height: 1.55;
}

.contact-block a:hover {
  color: var(--green-primary);
  text-decoration: underline;
}

.contact-map {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.contact-map iframe {
  width: 100%;
  height: 380px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  display: block;
}

.map-open-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.82rem;
  color: var(--green-primary);
  font-weight: 500;
  text-decoration: none;
  padding: 2px 0;
}

.map-open-link:hover {
  text-decoration: underline;
}

html[dir="rtl"] .map-open-link {
  flex-direction: row-reverse;
}

.map-note {
  margin-top: 32px;
  font-size: 0.82rem;
  color: var(--text-muted);
  text-align: center;
  padding: 0 24px;
}

/* ── Footer ───────────────────────────────── */
.footer {
  background: var(--green-dark);
  color: var(--white);
  padding: 48px 0 32px;
}

.footer-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

.footer-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.9rem;
  opacity: 0.85;
  font-family: var(--font-main);
  margin-bottom: 24px;
}

/* Footer church name block — same logo layout: Arabic bold top, divider, Latin caps below */
.footer-church-name {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
}
.footer-ar-name {
  font-family: var(--font-arabic);
  font-weight: 400;               /* base — bold via .ar-word-bold inside */
  color: var(--green-lime);       /* PANTONE 390C — bright lime, visible on dark footer */
  font-size: 1rem;
  line-height: 1.3;
}
.footer-de-name {
  font-family: var(--font-main);
  font-weight: 400;
  color: var(--green-medium);     /* PANTONE 369C — medium green, slightly less bright */
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  line-height: 1.3;
}

/* Footer contact info grid */
.footer-info {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 24px;
  width: 100%;
  padding: 28px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  margin-bottom: 24px;
}

.footer-info-label {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.45);
  margin-bottom: 6px;
}
/* In Arabic, labels are Arabic words — uppercase & letter-spacing break Arabic */
html[dir="rtl"] .footer-info-label {
  text-transform: none;
  letter-spacing: 0;
  text-align: right;
}
html[dir="rtl"] .footer-info-text { text-align: right; }

.footer-info-text {
  font-size: 0.84rem;
  color: rgba(255, 255, 255, 0.78);
  line-height: 1.65;
}

.footer-info-text a {
  color: rgba(255, 255, 255, 0.78);
  text-decoration: none;
}

.footer-info-text a:hover {
  color: var(--white);
  text-decoration: underline;
}

/* Facebook social link */
.footer-social {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: rgba(255, 255, 255, 0.65);
  font-size: 0.88rem;
  font-weight: 600;
  text-decoration: none;
  padding: 8px 16px;
  border: 1.5px solid rgba(255, 255, 255, 0.2);
  border-radius: 100px;
  transition: var(--transition);
  margin-bottom: 20px;
}

.footer-social:hover {
  color: var(--white);
  border-color: rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.08);
}

.footer-copy {
  font-size: 0.78rem;
  opacity: 0.45;
  margin-top: 4px;
}

@media (max-width: 640px) {
  .footer-info {
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }
}

@media (max-width: 400px) {
  .footer-info {
    grid-template-columns: 1fr;
  }
}

/* ── Very small screens (< 380px) ─────────── */
@media (max-width: 380px) {
  .container {
    padding: 0 16px;   /* tighter side gutters on tiny phones */
  }
  .hero-content {
    padding-left: 16px;
    padding-right: 16px;
  }
  .nav-container {
    padding: 0 12px;
  }
}

/* ── Children: 2-col on tablet (641–900px) ── */
@media (min-width: 641px) and (max-width: 900px) {
  .children-features-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ── Responsive ───────────────────────────── */
@media (max-width: 900px) {
  .nav-links {
    display: none;
    flex-direction: column;
    align-items: stretch;       /* items fill full width */
    position: fixed;
    top: var(--nav-h);
    left: 0;
    right: 0;
    background: var(--white);
    padding: 8px 0 16px;
    border-bottom: 1px solid var(--border);
    box-shadow: 0 6px 24px rgba(0,0,0,0.08);
    z-index: 99;
    max-height: calc(100vh - var(--nav-h));
    overflow-y: auto;
  }

  .nav-links.open {
    display: flex;
  }

  /* Mobile nav items: full-width, taller tap targets */
  .nav-links .nav-link {
    padding: 13px 20px;
    font-size: 0.95rem !important;  /* override the RTL 0.78rem shrink on mobile */
    white-space: normal;
    border-bottom: 1px solid var(--border);
    border-radius: 0;
    text-align: left;
    border-left: 3px solid transparent;  /* placeholder for active accent */
  }
  .nav-links .nav-link:last-child { border-bottom: none; }

  /* Active state: use left-border accent instead of dot/underline */
  .nav-links .nav-link.active {
    border-left-color: var(--green-primary);
    background: var(--green-pale);
    color: var(--green-primary);
    font-weight: 600;
  }
  /* Suppress desktop dot + underline pseudo-elements in mobile list */
  .nav-links .nav-link.active::before,
  .nav-links .nav-link.active::after { display: none; }

  .menu-toggle {
    display: flex;
  }

  .contact-grid {
    grid-template-columns: 1fr;
  }

  .contact-map {
    height: 280px;
  }

  /* ── RTL (Arabic) mobile nav: fix direction + alignment ── */
  /* The global html[dir="rtl"] .nav-links rule sets flex-direction:row which
     overrides the column layout above. Re-apply column here with higher
     cascade position (same specificity, later in file = wins). */
  html[dir="rtl"] .nav-links {
    flex-direction: column;   /* ← critical fix */
    align-items: stretch;
    left: 0;
    right: 0;
  }

  html[dir="rtl"] .nav-links .nav-link {
    text-align: right;
    direction: rtl;
    border-left: none;
    border-right: 3px solid transparent;  /* RTL: active accent on right side */
  }
  html[dir="rtl"] .nav-links .nav-link.active {
    border-right-color: var(--green-primary);
    border-left-color: transparent;
  }
}

@media (max-width: 640px) {
  .hero-title {
    font-size: 2rem;
  }

  .hero-logo-watermark {
    display: none;
  }

  .section {
    padding: 52px 0;
  }

  .calendar-grid {
    font-size: 0.7rem;
  }

  .cal-day {
    min-height: 60px;
    padding: 4px;
  }

  .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .video-grid {
    grid-template-columns: 1fr;
  }
}

/* ══════════════════════════════════════════
   Animations & Micro-interactions
══════════════════════════════════════════ */

/* ── Keyframes ───────────────────────────── */
@keyframes pageEnter {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ── Page transitions ────────────────────── */
/* Animate in every time a page becomes active (display switches from none → block) */
.page.active {
  animation: pageEnter 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

/* ── Button scale interactions ───────────── */
.btn:hover {
  transform: scale(1.03);
}

.btn:active {
  transform: scale(0.97);
  transition-duration: 0.08s;
}

/* Nav items and logout should not scale */
.nav-links .nav-link:hover,
.btn-logout:hover {
  transform: none;
}

/* ── Gallery image overlay on hover ─────── */
.gallery-item::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(27, 94, 32, 0.18);
  opacity: 0;
  transition: opacity 0.28s ease;
  pointer-events: none;
  border-radius: var(--radius);
}

.gallery-item:hover::after {
  opacity: 1;
}

/* ── Scroll reveal animations ────────────── */
.animate-on-scroll {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.animate-on-scroll.is-visible {
  opacity: 1;
  transform: none;
}

/* Natural stagger for sibling scroll-reveal elements */
.animate-on-scroll:nth-child(2) { transition-delay: 0.07s; }
.animate-on-scroll:nth-child(3) { transition-delay: 0.14s; }
.animate-on-scroll:nth-child(4) { transition-delay: 0.21s; }
.animate-on-scroll:nth-child(n+5) { transition-delay: 0.28s; }

/* ── Reduced motion: honour system preference ── */
@media (prefers-reduced-motion: reduce) {
  .page.active            { animation: none; }
  .animate-on-scroll      { opacity: 1; transform: none; transition: none; }
  .btn:hover,
  .btn:active             { transform: none; }
  .service-card:hover,
  .event-card:hover,
  .video-card:hover       { transform: none; box-shadow: none; }
  .gallery-item img       { transition: none; }
  .gallery-item::after    { display: none; }
}

/* ── Admin Builder: Edit Mode ─────────────── */
body.editing-mode .custom-section {
  position: relative;
  outline: 2px dashed transparent;
  outline-offset: 4px;
  cursor: pointer;
  transition: outline-color 0.15s, box-shadow 0.15s;
  border-radius: 4px;
}

body.editing-mode .custom-section.sec-hover {
  outline-color: var(--green-primary);
  box-shadow: 0 0 0 4px rgba(0, 102, 51, 0.08);
}

body.editing-mode .custom-section.sec-active {
  outline-color: var(--green-primary);
  outline-style: solid;
  box-shadow: 0 0 0 4px rgba(0, 102, 51, 0.12);
}

body.editing-mode .custom-section.sec-hover::after {
  content: 'Click to edit';
  position: absolute;
  top: 6px;
  right: 6px;
  background: var(--green-primary);
  color: #fff;
  font-size: 11px;
  font-family: Arial, sans-serif;
  padding: 2px 8px;
  border-radius: 4px;
  pointer-events: none;
  z-index: 10;
  white-space: nowrap;
}

/* ══════════════════════════════════════════
   PREMIUM ENHANCEMENTS
   Layered on top — safe overrides only.
   All changes are additive or refinements.
══════════════════════════════════════════ */

/* ── Extra shadow tokens ─────────────────── */
:root {
  --shadow-card: 0 1px 4px rgba(0,0,0,0.05), 0 3px 10px rgba(0,0,0,0.06);
  --shadow-card-hover: 0 8px 28px rgba(0,0,0,0.10), 0 3px 8px rgba(0,0,0,0.05);
  --shadow-green-sm: 0 4px 18px rgba(46,125,50,0.14);
}

/* ── Hero: richer gradient background ────── */
.hero-bg {
  background: linear-gradient(
    148deg,
    #dceede 0%,
    #eaf4ea 28%,
    #f5fbf5 60%,
    #ffffff 100%
  );
}

/* ── Hero: staggered entrance for children ── */
/* Uses animation-fill-mode:both so elements start invisible
   and stay at final state. Respects prefers-reduced-motion. */
.page#home.active .hero-eyebrow { animation: heroFadeUp 0.48s ease 0.08s both; }
.page#home.active .hero-title   { animation: heroFadeUp 0.48s ease 0.18s both; }
.page#home.active .hero-sub     { animation: heroFadeUp 0.48s ease 0.24s both; }
.page#home.active .hero-verse   { animation: heroFadeUp 0.48s ease 0.32s both; }
.page#home.active .hero-content > .btn  { animation: heroFadeUp 0.48s ease 0.40s both; }
.page#home.active .hero-event-badge     { animation: heroFadeUp 0.48s ease 0.46s both; }

@keyframes heroFadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Navbar: active link underline indicator ── */
/* Adds a small green dot beneath the active nav item */
.nav-links .nav-link {
  position: relative;
}
.nav-links .nav-link.active::before {
  content: '';
  position: absolute;
  bottom: 2px;
  left: 50%;
  transform: translateX(-50%);
  width: 5px;
  height: 5px;
  background: var(--green-primary);
  border-radius: 50%;
}
html[dir="rtl"] .nav-links .nav-link.active::before {
  left: auto;
  right: 50%;
  transform: translateX(50%);
}

/* ── Mobile nav: slide-in entrance ────────── */
@media (max-width: 900px) {
  .nav-links.open {
    animation: mobileNavIn 0.22s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
  }
}

@keyframes mobileNavIn {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Hamburger → X morph ─────────────────── */
.menu-toggle span {
  transform-origin: center;
  transition: transform 0.24s ease, opacity 0.2s ease;
}
.menu-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-toggle.open span:nth-child(2) { opacity: 0; transform: scaleX(0.1); }
.menu-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── Service cards: top accent + elevation ── */
.service-card {
  border-top: 2px solid var(--green-light);
  box-shadow: var(--shadow-card);
}
.service-card:hover {
  border-top-color: var(--green-primary);
  box-shadow: var(--shadow-card-hover);
}

/* ── Event cards: elevation ─────────────── */
.event-card {
  box-shadow: var(--shadow-card);
}
.event-card:hover {
  box-shadow: var(--shadow-card-hover);
}

/* ── Special event cards: elevation ──────── */
.special-event-card {
  box-shadow: var(--shadow-card);
}
.special-event-card:hover {
  box-shadow: var(--shadow-green-sm);
}

/* ── Video cards: elevation ──────────────── */
.video-card {
  box-shadow: var(--shadow-card);
}
.video-card:hover {
  box-shadow: var(--shadow-card-hover);
}

/* ── Gallery: zoom cursor hint ───────────── */
.gallery-item {
  cursor: zoom-in;
}
/* Slightly richer overlay tint */
.gallery-item::after {
  background: rgba(27, 94, 32, 0.24);
}

/* ── Calendar & sidebar: subtle elevation ── */
.calendar-wrapper {
  box-shadow: var(--shadow-card);
}
.events-sidebar {
  box-shadow: var(--shadow-card);
}

/* ── Page-hero banner: richer gradient ────── */
.page-hero {
  background: linear-gradient(160deg, #dceede 0%, #f0f9f0 100%);
}

/* ── Buttons: deeper hover shadow ────────── */
.btn-primary:hover {
  box-shadow: 0 6px 22px rgba(27, 94, 32, 0.38), 0 2px 6px rgba(0,0,0,0.10);
}

/* ── Contact icon: rounded + subtle lift ──── */
.contact-icon {
  border-radius: var(--radius-lg);
  box-shadow: 0 2px 8px rgba(46,125,50,0.10);
}

/* ── Divider line: gradient fade ─────────── */
.divider-line {
  background: linear-gradient(90deg, transparent, var(--green-light), transparent);
  width: 80px;
  height: 1px;
}

/* ── Footer: richer dark gradient ────────── */
.footer {
  background: linear-gradient(180deg, #004D25 0%, #003318 100%);  /* PANTONE 349C dark */
}

/* ── Scroll reveal: premium easing curve ─── */
.animate-on-scroll {
  transition:
    opacity  0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    transform 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* ── Stagger: service cards ─────────────── */
.services-grid > .service-card:nth-child(1) { transition-delay: 0.04s; }
.services-grid > .service-card:nth-child(2) { transition-delay: 0.10s; }
.services-grid > .service-card:nth-child(3) { transition-delay: 0.16s; }
.services-grid > .service-card:nth-child(4) { transition-delay: 0.22s; }
.services-grid > .service-card:nth-child(n+5) { transition-delay: 0.28s; }

/* ── Stagger: recurring event cards ─────── */
.events-list > .event-card:nth-child(1) { transition-delay: 0.04s; }
.events-list > .event-card:nth-child(2) { transition-delay: 0.10s; }
.events-list > .event-card:nth-child(3) { transition-delay: 0.16s; }
.events-list > .event-card:nth-child(4) { transition-delay: 0.22s; }
.events-list > .event-card:nth-child(n+5) { transition-delay: 0.28s; }

/* ── Stagger: special event cards ────────── */
.special-events-list > .special-event-card:nth-child(1) { transition-delay: 0.04s; }
.special-events-list > .special-event-card:nth-child(2) { transition-delay: 0.11s; }
.special-events-list > .special-event-card:nth-child(3) { transition-delay: 0.18s; }

/* ── Stagger: vision blocks ──────────────── */
.content-narrow > .vision-block:nth-child(1) { transition-delay: 0.04s; }
.content-narrow > .vision-block:nth-child(2) { transition-delay: 0.12s; }
.content-narrow > .vision-block:nth-child(3) { transition-delay: 0.20s; }

/* ── Stagger: contact blocks ─────────────── */
.contact-info > .contact-block:nth-child(1) { transition-delay: 0.04s; }
.contact-info > .contact-block:nth-child(2) { transition-delay: 0.11s; }
.contact-info > .contact-block:nth-child(3) { transition-delay: 0.18s; }
.contact-info > .contact-block:nth-child(4) { transition-delay: 0.25s; }

/* ── Gallery items stagger ───────────────── */
.gallery-grid > .gallery-item:nth-child(1)  { transition-delay: 0.03s; }
.gallery-grid > .gallery-item:nth-child(2)  { transition-delay: 0.07s; }
.gallery-grid > .gallery-item:nth-child(3)  { transition-delay: 0.11s; }
.gallery-grid > .gallery-item:nth-child(4)  { transition-delay: 0.15s; }
.gallery-grid > .gallery-item:nth-child(5)  { transition-delay: 0.19s; }
.gallery-grid > .gallery-item:nth-child(6)  { transition-delay: 0.23s; }
.gallery-grid > .gallery-item:nth-child(n+7) { transition-delay: 0.27s; }

/* ── Extend reduced-motion to new additions ── */
@media (prefers-reduced-motion: reduce) {
  .page#home.active .hero-eyebrow,
  .page#home.active .hero-title,
  .page#home.active .hero-sub,
  .page#home.active .hero-verse,
  .page#home.active .hero-content > .btn,
  .page#home.active .hero-event-badge {
    animation: none;
    opacity: 1;
    transform: none;
  }
  .menu-toggle span { transition: none; }
  .nav-links.open   { animation: none; }
  .btn-primary:hover {
    box-shadow: 0 2px 8px rgba(27,94,32,0.35);
  }
  .service-card:hover,
  .event-card:hover,
  .video-card:hover {
    box-shadow: var(--shadow-card);
    transform: none;
  }
}

/* ══════════════════════════════════════════
   VISITOR CONVERSION SECTIONS
   Phases 1–6: hero actions, trust bar,
   expect cards, mobile CTA bar, RTL parity
══════════════════════════════════════════ */

/* ── Hero: dual CTA group ────────────────── */
.hero-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 28px;
  flex-wrap: wrap;
}

html[dir="rtl"] .hero-actions {
  flex-direction: row-reverse;
}

/* Outline / ghost button that lives on the hero gradient */
.btn-outline-hero {
  border: 1.5px solid rgba(27, 94, 32, 0.45);
  color: var(--green-dark);
  background: rgba(255, 255, 255, 0.60);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.btn-outline-hero:hover {
  background: var(--green-pale);
  border-color: var(--green-primary);
}

@media (max-width: 640px) {
  .hero-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .hero-actions .btn {
    min-height: 50px;
    justify-content: center;
    width: 100%;
    font-size: 1rem;
    letter-spacing: 0.01em;
  }
}

/* ── Trust Bar ───────────────────────────── */
.trust-bar {
  background: var(--white);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.trust-pillars {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.trust-pillar {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 22px 28px;
  border-right: 1px solid var(--border);
  transition: background var(--transition);
}
.trust-pillar:last-child {
  border-right: none;
}
.trust-pillar:hover {
  background: var(--green-soft);
}

/* RTL: icon on right, border flips */
html[dir="rtl"] .trust-pillar {
  flex-direction: row-reverse;
  text-align: right;
  border-right: none;
  border-left: 1px solid var(--border);
}
html[dir="rtl"] .trust-pillar:last-child {
  border-left: none;
}

.trust-pillar-icon {
  width: 44px;
  height: 44px;
  background: var(--green-pale);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--green-primary);
}

.trust-pillar-title {
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--green-dark);
  margin-bottom: 3px;
}
.trust-pillar-desc {
  font-size: 0.78rem;
  color: var(--text-muted);
  line-height: 1.45;
}

/* Trust pillar stagger */
.trust-pillars > .trust-pillar:nth-child(1) { transition-delay: 0.04s; }
.trust-pillars > .trust-pillar:nth-child(2) { transition-delay: 0.10s; }
.trust-pillars > .trust-pillar:nth-child(3) { transition-delay: 0.16s; }
.trust-pillars > .trust-pillar:nth-child(4) { transition-delay: 0.22s; }

@media (max-width: 900px) {
  .trust-pillars { grid-template-columns: repeat(2, 1fr); }
  .trust-pillar:nth-child(2)                         { border-right: none; }
  html[dir="rtl"] .trust-pillar:nth-child(2)         { border-left: none; }
  .trust-pillar:nth-child(3),
  .trust-pillar:nth-child(4)                         { border-top: 1px solid var(--border); }
  .trust-pillar:nth-child(4)                         { border-right: none; }
  html[dir="rtl"] .trust-pillar:nth-child(4)         { border-left: none; }
  /* re-add missing right border for 2-col grid */
  html[dir="rtl"] .trust-pillar:nth-child(odd)  { border-left: 1px solid var(--border); }
  html[dir="rtl"] .trust-pillar:nth-child(even) { border-left: none; }
  .trust-pillar:nth-child(odd)  { border-right: 1px solid var(--border); }
  .trust-pillar:nth-child(even) { border-right: none; }
}

@media (max-width: 640px) {
  .trust-pillars                   { grid-template-columns: 1fr; }
  .trust-pillar,
  html[dir="rtl"] .trust-pillar   {
    border: none !important;
    border-bottom: 1px solid var(--border) !important;
    padding: 18px 0;
  }
  .trust-pillar:last-child,
  html[dir="rtl"] .trust-pillar:last-child { border-bottom: none !important; }
}

/* ── What to Expect Section ──────────────── */
.expect-section {
  background: var(--green-soft);
}

.expect-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.expect-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 32px 24px;
  text-align: center;
  box-shadow: var(--shadow-card);
  transition: transform 0.28s ease, box-shadow 0.28s ease;
}
.expect-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card-hover);
}

.expect-card-icon {
  width: 58px;
  height: 58px;
  background: var(--green-pale);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 18px;
  color: var(--green-primary);
}

.expect-card-title {
  font-weight: 700;
  font-size: 1rem;
  color: var(--green-dark);
  margin-bottom: 10px;
}
.expect-card-desc {
  font-size: 0.88rem;
  color: var(--text-secondary);
  line-height: 1.65;
}

/* Expect card stagger */
.expect-grid > .expect-card:nth-child(1) { transition-delay: 0.04s; }
.expect-grid > .expect-card:nth-child(2) { transition-delay: 0.10s; }
.expect-grid > .expect-card:nth-child(3) { transition-delay: 0.16s; }
.expect-grid > .expect-card:nth-child(4) { transition-delay: 0.22s; }

@media (max-width: 900px) {
  .expect-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .expect-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .expect-card {
    padding: 20px 18px;
    display: flex;
    align-items: center;
    gap: 16px;
    text-align: left;
  }
  .expect-card-icon {
    flex-shrink: 0;
    margin: 0;
  }
  html[dir="rtl"] .expect-card {
    flex-direction: row-reverse;
    text-align: right;
  }
}

/* ── Mobile Sticky CTA Bar ───────────────── */
/* Desktop: hidden; mobile (≤640px): fixed at bottom */
.mobile-sticky-cta {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 95;
  display: none;
  gap: 10px;
  padding: 10px 16px;
  /* Respect iPhone notch safe area */
  padding-bottom: max(10px, env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--border);
  box-shadow: 0 -4px 18px rgba(0, 0, 0, 0.08);
}

@media (max-width: 640px) {
  .mobile-sticky-cta { display: flex; }
  /* Push page body up so footer content isn't hidden behind bar */
  body { padding-bottom: 80px; }
}

.mobile-cta-btn {
  flex: 1;
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius);
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  text-decoration: none;
  gap: 5px;
  transition: var(--transition);
  /* Touch-target compliance (min 44×44) */
  padding: 6px 12px;
}

.mobile-cta-primary {
  background: var(--green-primary);
  color: var(--white);
  box-shadow: 0 2px 8px rgba(46,125,50,0.25);
}
.mobile-cta-primary:hover,
.mobile-cta-primary:focus {
  background: var(--green-dark);
  color: var(--white);
}
.mobile-cta-primary:active {
  transform: scale(0.97);
}

.mobile-cta-secondary {
  border: 1.5px solid var(--green-primary);
  color: var(--green-primary);
  background: transparent;
}
.mobile-cta-secondary:hover,
.mobile-cta-secondary:focus {
  background: var(--green-pale);
}
.mobile-cta-secondary:active {
  transform: scale(0.97);
}

/* RTL: reverse button order */
html[dir="rtl"] .mobile-sticky-cta {
  flex-direction: row-reverse;
}

/* ── Reduced motion: extend to new sections ── */
@media (prefers-reduced-motion: reduce) {
  .expect-card:hover { transform: none; }
  .trust-pillar { transition: background var(--transition); }
  .mobile-cta-btn:active { transform: none; }
}

/* ══════════════════════════════════════════
   KALENDER PAGE — Full Upgrade
   Premium hero, modal, cards, visitor block
══════════════════════════════════════════ */

/* ── Events Hero ─────────────────────────── */
/* ── Events Hero — matches .page-hero style ── */
.events-hero {
  position: relative;
  background: linear-gradient(160deg, #dceede 0%, #f0f9f0 100%);
  padding: 64px 0 52px;
  border-bottom: 1px solid var(--border);
  overflow: hidden;
  color: var(--text);
}

.events-hero::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--green-light), transparent);
}

.events-hero-bg-deco {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.18;   /* subtle — not the white-on-dark contrast it used to be */
}

.events-hero-deco-svg {
  position: absolute;
  right: 0;
  top: 0;
  width: 600px;
  height: 200px;
}

.events-hero-inner {
  position: relative;
  z-index: 1;
  animation: heroFadeUp 0.5s ease both;
}

.page#events.active .events-hero-inner {
  animation: heroFadeUp 0.48s ease 0.06s both;
}

.events-hero-icon {
  color: var(--green-medium);
  margin-bottom: 12px;
}

.events-hero-label {
  color: var(--green-medium) !important;
  letter-spacing: 0.12em;
  font-size: 0.75rem;
  margin-bottom: 10px;
}

.events-hero-title {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 800;
  color: var(--green-dark);
  margin-bottom: 10px;
  line-height: 1.1;
}

.events-hero-sub {
  color: var(--text-muted);
  font-size: 1.05rem;
  margin-bottom: 32px;
  max-width: 560px;
}

.events-hero-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

/* Reuse site's standard button styles — hero-specific overrides removed */
.btn-white-outline {
  background: var(--white);
  border: 1.5px solid var(--green-primary);
  color: var(--green-primary);
  font-weight: 600;
  padding: 11px 24px;
  border-radius: var(--radius-full);
  transition: background 0.18s ease, color 0.18s ease, transform 0.14s ease, box-shadow 0.18s ease;
}

.btn-white-outline:hover {
  background: var(--green-primary);
  color: var(--white);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(0,102,51,0.22);
}

.btn-ghost-hero {
  background: transparent;
  border: 1.5px solid var(--border);
  color: var(--text-secondary);
  padding: 11px 22px;
  border-radius: var(--radius-full);
  font-weight: 500;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.btn-ghost-hero:hover {
  background: var(--green-pale);
  border-color: var(--green-medium);
  color: var(--green-dark);
}

html[dir="rtl"] .events-hero-sub {
  max-width: 560px;
}

/* ── Events section: tighter top so filter bar connects to hero ── */
.events-section {
  padding-top: 40px;
}

/* ── Events Filter Bar ───────────────────────── */
.events-filter-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 28px;
  flex-wrap: wrap;
}

.filter-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 22px;
  border-radius: var(--radius-full);
  border: 1.5px solid var(--border);
  background: var(--white);
  color: var(--text-muted);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.12s ease, box-shadow 0.15s ease;
  font-family: inherit;
  letter-spacing: 0.01em;
}

.filter-btn:hover {
  border-color: var(--green-medium);
  color: var(--green-medium);
  transform: translateY(-1px);
  box-shadow: 0 3px 10px rgba(0,102,51,0.12);
}

.filter-btn.active {
  background: var(--green-primary);
  border-color: var(--green-primary);
  color: var(--white);
  box-shadow: 0 4px 14px rgba(0,102,51,0.25);
}

.filter-btn.active:hover {
  background: var(--green-medium);
  border-color: var(--green-medium);
  color: var(--white);
}

.filter-count {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 500;
  opacity: 0.72;
  margin-left: 2px;
  letter-spacing: 0;
}

.filter-btn.active .filter-count {
  opacity: 0.88;
}

html[dir="rtl"] .events-filter-bar {
  flex-direction: row-reverse;
}

/* ── Section header row (label + optional right) ─── */
.section-header-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 20px;
}

.section-header-row .section-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--green-medium);
  margin-bottom: 0;
}

html[dir="rtl"] .section-header-row .section-label {
  text-transform: none;
  letter-spacing: 0;
}

/* ── Calendar: improved nav arrows ──────── */
.cal-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,0.15);
  transition: background 0.15s ease, transform 0.12s ease;
}

.cal-nav:hover {
  background: rgba(255,255,255,0.3);
  transform: scale(1.08);
  opacity: 1;
}

.cal-nav:active {
  transform: scale(0.94);
}

/* ── RTL: mirror calendar nav arrows so they point the correct direction ── */
html[dir="rtl"] .cal-nav svg {
  transform: scaleX(-1);
}

/* ── Add to Calendar button ────────────────────────────────────────────── */
/* No extra styles needed — .cal-add-btn uses the same classes as other
   action buttons (.event-action-btn / .btn .btn-outline .btn-sm). */

/* ── Calendar: day cells improved ───────── */
.cal-day {
  min-height: 80px;
  padding: 8px 6px;
  position: relative;
}

.cal-day-num {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-secondary);
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background 0.15s ease, color 0.15s ease;
}

.cal-day.today .cal-day-num {
  background: var(--green-primary);
  color: var(--white);
  font-weight: 700;
}

.cal-day.selected .cal-day-num {
  background: var(--green-dark);
  color: var(--white);
}

.cal-day.selected {
  background: var(--green-pale);
}

.cal-day.today {
  background: rgba(46,125,50,0.06);
}

.cal-day:hover:not(.empty):not(.today) {
  background: var(--green-soft);
}

/* Events: dots inside calendar cells */
.cal-event-dot {
  font-size: 0.58rem;
  padding: 2px 6px;
  border-radius: 4px;
  color: var(--white);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.4;
}

/* Calendar grid fade transitions */
@keyframes calGridFadeIn  { from { opacity: 0; transform: translateX(6px); } to { opacity: 1; transform: none; } }
@keyframes calGridFadeOut { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateX(-6px); } }

.cal-grid-fade-out { animation: calGridFadeOut 0.15s ease forwards; }
.cal-grid-fade-in  { animation: calGridFadeIn  0.22s ease forwards; }

/* ── Events Sidebar: upgraded ────────────── */
.events-sidebar {
  margin-top: 28px;
  background: var(--white);
  border: 1.5px solid var(--green-light);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(46,125,50,0.07);
}

.events-sidebar-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 20px;
  background: var(--green-soft);
  border-bottom: 1px solid var(--border);
}

.events-sidebar-date-icon {
  color: var(--green-medium);
  flex-shrink: 0;
}

.events-sidebar-header h3 {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--green-dark);
  margin: 0;
}

#dayEventsList {
  padding: 8px 0;
}

.day-events-empty {
  color: var(--text-muted);
  font-size: 0.9rem;
  padding: 20px 20px;
}

.day-event-item {
  padding: 0;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background 0.15s ease;
}

.day-event-item:last-child {
  border-bottom: none;
}

.day-event-item:hover {
  background: var(--green-pale);
}

.day-event-item-inner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
}

.day-event-color-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.day-event-content {
  flex: 1;
  min-width: 0;
}

.day-event-title {
  font-weight: 600;
  color: var(--green-dark);
  margin-bottom: 2px;
  font-size: 0.92rem;
}

.day-event-time {
  font-size: 0.79rem;
  color: var(--green-medium);
  font-weight: 500;
}

.day-event-desc {
  font-size: 0.82rem;
  color: var(--text-muted);
  margin-top: 3px;
}

.day-event-open-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  padding: 4px;
  border-radius: 4px;
  flex-shrink: 0;
  transition: color 0.15s ease, background 0.15s ease;
}

.day-event-open-btn:hover {
  color: var(--green-primary);
  background: var(--green-pale);
}

html[dir="rtl"] .day-event-open-btn svg {
  transform: scaleX(-1);
}

/* ── Recurring Event Cards: upgraded ─────── */
.event-card-recurring {
  flex-direction: row;
  align-items: flex-start;
}

.event-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.event-recurring-badge {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--green-primary);
  background: var(--green-pale);
  border: 1px solid var(--green-light);
  border-radius: 100px;
  padding: 3px 10px;
  white-space: nowrap;
  flex-shrink: 0;
}

html[dir="rtl"] .event-recurring-badge {
  text-transform: none;
  letter-spacing: 0;
}

.event-meta-rich {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.event-meta-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.79rem;
  color: var(--text-muted);
  background: var(--green-soft);
  border-radius: 100px;
  padding: 3px 10px;
}

.event-card-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  flex-wrap: wrap;
}

.event-action-btn {
  font-size: 0.78rem;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 100px;
  border: 1.5px solid var(--green-light);
  background: transparent;
  color: var(--green-primary);
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  font-family: var(--font-main);
}

.event-action-btn:hover {
  background: var(--green-pale);
  border-color: var(--green-primary);
}

.event-action-details {
  background: var(--green-primary);
  color: var(--white);
  border-color: var(--green-primary);
}

.event-action-details:hover {
  background: var(--green-dark);
  border-color: var(--green-dark);
  color: var(--white);
}

/* ── Special Event Cards: upgraded ─────────── */
.special-event-img-wrap {
  position: relative;
}

.special-event-img-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(27,94,32,0.35) 0%, transparent 60%);
  border-radius: var(--radius) var(--radius) 0 0;
  pointer-events: none;
}

.special-event-badge-wrap {
  position: absolute;
  top: 10px;
  left: 10px;
}

html[dir="rtl"] .special-event-badge-wrap {
  left: auto;
  right: 10px;
}

.special-event-badge {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 4px 10px;
  border-radius: 100px;
}

html[dir="rtl"] .special-event-badge {
  letter-spacing: 0;
}

.special-event-badge--soon {
  background: rgba(255,152,0,0.92);
  color: var(--white);
}

.special-event-badge--upcoming {
  background: rgba(46,125,50,0.92);
  color: var(--white);
}

.special-event-badge--live {
  background: rgba(211,47,47,0.92);
  color: var(--white);
}

.special-event-time {
  display: flex;
  align-items: center;
  gap: 5px;
}

.special-event-cta-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
  flex-wrap: wrap;
}

.btn-sm {
  padding: 8px 18px;
  font-size: 0.83rem;
}

/* ── Visitor Conversion Block ────────────── */
.kalender-visitor-block {
  margin-top: 72px;
  background: linear-gradient(135deg, var(--green-dark) 0%, var(--green-primary) 100%);
  border-radius: var(--radius-lg);
  padding: 40px 40px;
  color: var(--white);
  overflow: hidden;
  position: relative;
}

.kalender-visitor-block::before {
  content: '';
  position: absolute;
  top: -40px;
  right: -40px;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: rgba(255,255,255,0.06);
  pointer-events: none;
}

.kalender-visitor-inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 28px;
  align-items: center;
  position: relative;
  z-index: 1;
}

.kalender-visitor-icon {
  color: rgba(255,255,255,0.65);
  flex-shrink: 0;
}

.kalender-visitor-text .section-label {
  color: rgba(255,255,255,0.65) !important;
  letter-spacing: 0.1em;
  font-size: 0.68rem;
  margin-bottom: 6px;
}

html[dir="rtl"] .kalender-visitor-text .section-label {
  letter-spacing: 0;
}

.kalender-visitor-text h3 {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 6px;
  line-height: 1.2;
}

.kalender-visitor-text p {
  color: rgba(255,255,255,0.82);
  font-size: 0.92rem;
  margin: 0;
}

.kalender-visitor-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex-shrink: 0;
}

.kalender-visitor-actions .btn-primary {
  background: var(--white);
  color: var(--green-dark);
  border-color: var(--white);
}

.kalender-visitor-actions .btn-primary:hover {
  background: rgba(255,255,255,0.9);
  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
}

.kalender-visitor-actions .btn-outline {
  border-color: rgba(255,255,255,0.5);
  color: var(--white);
  background: transparent;
}

.kalender-visitor-actions .btn-outline:hover {
  background: rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.85);
}

@media (max-width: 768px) {
  .kalender-visitor-inner {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 20px;
  }
  .kalender-visitor-icon {
    display: none;
  }
  .kalender-visitor-actions {
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
  }
  .kalender-visitor-block {
    padding: 32px 24px;
  }
  html[dir="rtl"] .kalender-visitor-inner {
    text-align: center;
  }
}

/* ── Event Detail Modal ───────────────────── */
.event-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

.event-modal-overlay.modal-open {
  opacity: 1;
  pointer-events: all;
}

.event-modal-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  max-width: 480px;
  width: 100%;
  position: relative;
  box-shadow: 0 24px 64px rgba(0,0,0,0.22);
  transform: translateY(16px) scale(0.97);
  transition: transform 0.24s cubic-bezier(0.34,1.56,0.64,1), opacity 0.22s ease;
  opacity: 0;
  overflow: hidden;
}

.event-modal-overlay.modal-open .event-modal-card {
  transform: none;
  opacity: 1;
}

.event-modal-color-bar {
  height: 5px;
  width: 100%;
  background: var(--green-primary);
}

.event-modal-close {
  position: absolute;
  top: 12px;
  right: 14px;
  background: var(--green-soft);
  border: none;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text-secondary);
  transition: background 0.15s ease, color 0.15s ease;
  z-index: 1;
}

.event-modal-close:hover {
  background: var(--green-pale);
  color: var(--green-dark);
}

html[dir="rtl"] .event-modal-close {
  right: auto;
  left: 14px;
}

.event-modal-body {
  padding: 24px 28px 28px;
}

.event-modal-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--green-dark);
  margin-bottom: 16px;
  padding-right: 32px;
  line-height: 1.3;
}

html[dir="rtl"] .event-modal-title {
  padding-right: 0;
  padding-left: 32px;
}

.event-modal-meta {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}

.event-modal-meta-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.event-modal-meta-row svg {
  color: var(--green-medium);
  flex-shrink: 0;
}

.event-modal-desc {
  font-size: 0.9rem;
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: 20px;
  border-top: 1px solid var(--border);
  padding-top: 16px;
}

.event-modal-desc:empty {
  display: none;
}

.event-modal-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

@media (max-width: 480px) {
  .event-modal-card {
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    max-width: 100%;
  }
  .event-modal-overlay {
    align-items: flex-end;
    padding: 0;
  }
  .event-modal-body {
    padding: 20px 20px 32px;
  }
}

/* ── Kalender: Events Hero mobile ──────── */
@media (max-width: 768px) {
  .events-hero {
    padding: 52px 0 44px;
  }
  .events-hero-title {
    font-size: 2rem;
  }
  .events-hero-actions {
    gap: 8px;
  }
  .btn-white-outline,
  .btn-ghost-hero {
    padding: 10px 18px;
    font-size: 0.88rem;
  }
  .events-section {
    padding-top: 28px;
  }
  .events-filter-bar {
    gap: 6px;
    margin-bottom: 20px;
  }
  .filter-btn {
    padding: 7px 16px;
    font-size: 0.82rem;
  }
}

@media (max-width: 640px) {
  .cal-day {
    min-height: 54px;
    padding: 4px 3px;
  }
  .cal-day-num {
    font-size: 0.7rem;
    width: 20px;
    height: 20px;
  }
  .cal-event-dot {
    display: none; /* too cramped — dots only visible on tap */
  }
  .event-card-actions {
    flex-wrap: wrap;
  }
  .special-event-cta-row {
    flex-direction: column;
    align-items: flex-start;
  }
  html[dir="rtl"] .special-event-cta-row {
    align-items: flex-end;
  }
}

/* ── Kalender: RTL adjustments ─────────── */
html[dir="rtl"] .events-hero-sub {
  direction: rtl;
}

html[dir="rtl"] .event-meta-chip {
  direction: rtl;
}

html[dir="rtl"] .kalender-visitor-text h3,
html[dir="rtl"] .kalender-visitor-text p {
  direction: rtl;
}

html[dir="rtl"] .events-hero-deco-svg {
  right: auto;
  left: 0;
  transform: scaleX(-1);
}

/* ── Reduced motion: Kalender additions ─── */
@media (prefers-reduced-motion: reduce) {
  .cal-grid-fade-out,
  .cal-grid-fade-in { animation: none; }
  .event-modal-card { transition: opacity 0.15s ease; transform: none; }
  .event-modal-overlay { transition: opacity 0.15s ease; }
  .btn-white-outline:hover,
  .btn-ghost-hero:hover { transform: none; }
}

/* ══════════════════════════════════════════
   REMAINING PAGES — Quick Win Upgrades
   Vision · Kinderdienste · Medien
   Geschichte · Kontakt · Global polish
══════════════════════════════════════════ */

/* ── Body text: improved reading ─────────── */
.body-text {
  color: var(--text-secondary);
  line-height: 1.9;
  font-size: 0.97rem;
  max-width: 680px;
}

.divider-line {
  border: none;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--green-light), transparent);
  margin: 36px 0;
}

html[dir="rtl"] .body-text {
  max-width: 100%;
  text-align: right;
}

/* ── Vision: accent sidebar ─────────────── */
.content-narrow {
  position: relative;
  padding-left: 24px;
}

html[dir="rtl"] .content-narrow {
  padding-left: 0;
  padding-right: 24px;
}

/* ── Geschichte: timeline-feel ───────────── */
#about .body-text {
  position: relative;
  padding-left: 20px;
}

#about .body-text::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green-primary);
  border: 2px solid var(--green-pale);
  box-shadow: 0 0 0 3px var(--green-light);
}

html[dir="rtl"] #about .body-text {
  padding-left: 0;
  padding-right: 20px;
}

html[dir="rtl"] #about .body-text::before {
  left: auto;
  right: 0;
}

/* ── Kinderdienste: features bar ─────────── */
.children-features-bar {
  background: var(--green-soft);
  padding: 48px 0 44px;
  border-bottom: 1px solid var(--border);
}

.children-features-bar .section-label {
  text-align: center;
  display: block;
  margin-bottom: 28px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--green-medium);
}

html[dir="rtl"] .children-features-bar .section-label {
  text-transform: none;
  letter-spacing: 0;
}

.children-features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.children-feat-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px 24px;
  text-align: center;
  transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}

.children-feat-card:hover {
  box-shadow: 0 8px 28px rgba(46,125,50,0.1);
  transform: translateY(-3px);
  border-color: var(--green-light);
}

.children-feat-icon {
  width: 56px;
  height: 56px;
  background: var(--green-pale);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
  color: var(--green-primary);
  border: 1.5px solid var(--green-light);
}

.children-feat-card h4 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--green-dark);
  margin-bottom: 8px;
}

.children-feat-card p {
  font-size: 0.85rem;
  color: var(--text-muted);
  line-height: 1.6;
}

@media (max-width: 640px) {
  .children-features-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .children-feat-card {
    text-align: left;
    display: flex;
    gap: 16px;
    align-items: flex-start;
    padding: 20px;
  }
  html[dir="rtl"] .children-feat-card {
    text-align: right;
    flex-direction: row-reverse;
  }
  .children-feat-icon {
    margin: 0;
    flex-shrink: 0;
    width: 44px;
    height: 44px;
  }
}

/* ── Kinderdienste: CTA block ─────────────── */
.children-cta-block {
  margin-top: 56px;
  background: linear-gradient(135deg, var(--green-dark) 0%, var(--green-primary) 100%);
  border-radius: var(--radius-lg);
  padding: 40px 36px;
  color: var(--white);
  text-align: center;
}

.children-cta-block .section-label {
  color: rgba(255,255,255,0.65) !important;
  letter-spacing: 0.1em;
  font-size: 0.68rem;
  margin-bottom: 10px;
  display: block;
}

html[dir="rtl"] .children-cta-block .section-label {
  letter-spacing: 0;
}

.children-cta-block h3 {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 10px;
}

.children-cta-block p {
  color: rgba(255,255,255,0.82);
  font-size: 0.95rem;
  margin-bottom: 24px;
}

.children-cta-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

.children-cta-actions .btn-primary {
  background: var(--white);
  color: var(--green-dark);
  border-color: var(--white);
}

.children-cta-actions .btn-primary:hover {
  background: rgba(255,255,255,0.9);
}

.children-cta-actions .btn-outline {
  border-color: rgba(255,255,255,0.5);
  color: var(--white);
  background: transparent;
}

.children-cta-actions .btn-outline:hover {
  background: rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.85);
}

/* ── Kontakt: warm header ─────────────────── */
.contact-warm-header {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 32px;
  align-items: center;
  margin-bottom: 48px;
  padding: 36px 40px;
  background: var(--green-soft);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
}

.contact-warm-text .section-label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--green-medium);
  margin-bottom: 8px;
  display: block;
}

html[dir="rtl"] .contact-warm-text .section-label {
  text-transform: none;
  letter-spacing: 0;
}

.contact-warm-text h2 {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--green-dark);
  margin-bottom: 8px;
}

.contact-warm-text p {
  color: var(--text-secondary);
  font-size: 0.92rem;
  max-width: 420px;
  line-height: 1.65;
}

html[dir="rtl"] .contact-warm-text p {
  max-width: 100%;
}

.contact-quick-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex-shrink: 0;
}

/* .contact-btn-call / .contact-btn-whatsapp — now use .btn-primary / .btn-whatsapp base classes */
.contact-btn-call {
  /* inherits from .btn-primary — no overrides needed */
}

.contact-btn-whatsapp {
  /* inherits from .btn-whatsapp — no overrides needed */
}

@media (max-width: 768px) {
  .contact-warm-header {
    grid-template-columns: 1fr;
    padding: 28px 24px;
    gap: 24px;
  }
  .contact-quick-actions {
    flex-direction: row;
    flex-wrap: wrap;
  }
}

html[dir="rtl"] .contact-warm-header {
  direction: rtl;
}

/* ── Map: slightly larger ─────────────────── */
.contact-map iframe {
  height: 420px;
}

/* ── Medien: gallery hover improve ──────── */
.gallery-item {
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  transition: box-shadow 0.22s ease, transform 0.22s ease;
}

.gallery-item:hover {
  box-shadow: 0 8px 28px rgba(0,0,0,0.14);
  transform: translateY(-2px);
}

.gallery-item img {
  transition: transform 0.3s ease;
}

.gallery-item:hover img {
  transform: scale(1.04);
}

/* ── Video cards: improve appearance ───── */
.video-card {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border);
  transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}

.video-card:hover {
  box-shadow: 0 8px 28px rgba(0,0,0,0.1);
  transform: translateY(-2px);
  border-color: var(--green-light);
}

/* ── Empty states: elegant ───────────────── */
.gallery-empty {
  text-align: center;
  padding: 60px 20px;
  color: var(--text-muted);
  font-size: 0.9rem;
  background: var(--green-soft);
  border-radius: var(--radius-lg);
  border: 1.5px dashed var(--green-light);
}

/* ── Global: link hover underline ────────── */
.contact-block a,
.footer-info-text a,
.map-open-link {
  transition: color 0.15s ease;
}

/* ── Global: stronger section-label ─────── */
.section-label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-blue);   /* complementary blue — brand guidelines */
  margin-bottom: 10px;
}

html[dir="rtl"] .section-label {
  text-transform: none;
  letter-spacing: 0;
}

/* ── Footer: minor polish ─────────────────── */
.footer {
  border-top: 3px solid var(--green-primary);
}

.footer-brand {
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  margin-bottom: 0;
  width: 100%;
  justify-content: center;
}

.footer-social {
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.12s ease;
}

.footer-social:hover {
  transform: translateY(-1px);
}

/* ── Micro interactions: link underline ──── */
a:focus-visible {
  outline: 2px solid var(--green-primary);
  outline-offset: 3px;
  border-radius: 3px;
}

/* ── Reduced motion: remaining pages ─────── */
@media (prefers-reduced-motion: reduce) {
  .children-feat-card:hover,
  .contact-block:hover,
  .gallery-item:hover,
  .video-card:hover { transform: none; }
  .contact-btn-call:hover,
  .contact-btn-whatsapp:hover,
  .footer-social:hover { transform: none; }
}

/* ══════════════════════════════════════════
   SKILL-DERIVED FINAL POLISH
   Source: ui-ux-pro-max · Nature Distilled
   Trust & Authority · Touch Optimisation
══════════════════════════════════════════ */

/* ── Warm amber accent spots ─────────────── */
/* Used for: badges, highlights, special event "soon" states */
.badge-amber,
.special-event-badge--soon {
  background: var(--amber);
  color: var(--white);
}

/* Amber dot on upcoming events admin card */
.upcoming-admin-card {
  border-left-color: var(--amber);
}

/* ── Cursor: pointer on all clickable cards ── */
/* Skill: hover-states — change cursor on interactive elements */
.event-card,
.special-event-card,
.gallery-item,
.video-card,
.children-feat-card,
.contact-block,
.service-card,
.expect-card {
  cursor: pointer;
}

/* ── Gallery item: ensure correct img behavior ── */
.gallery-item {
  display: block;
  position: relative;
  overflow: hidden;
}

/* ── Contact: trust stats row ─────────────── */
/* Skill: Trust & Authority pattern — show proof before contact info */
.contact-trust-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  margin-bottom: 36px;
  overflow: hidden;
}

.contact-trust-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 20px 32px;
  flex: 1;
  text-align: center;
}

.contact-trust-num {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--green-dark);
  line-height: 1;
}

.contact-trust-label {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

html[dir="rtl"] .contact-trust-label {
  text-transform: none;
  letter-spacing: 0;
}

.contact-trust-divider {
  width: 1px;
  height: 48px;
  background: var(--border);
  flex-shrink: 0;
}

@media (max-width: 640px) {
  .contact-trust-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .contact-trust-divider {
    display: none;
  }
  .contact-trust-stat {
    padding: 16px;
    border: 0.5px solid var(--border);
  }
}

/* ── Vision: pull-quote accent on h3 ─────── */
/* Skill: weight-hierarchy — Bold headings reinforce hierarchy */
.vision-block h3 {
  padding-left: 14px;
  border-left: 3px solid var(--green-primary);
}

html[dir="rtl"] .vision-block h3 {
  padding-left: 0;
  padding-right: 14px;
  border-left: none;
  border-right: 3px solid var(--green-primary);
}

/* Remove the ::before pseudo since we now use border on h3 */
.vision-block::before {
  display: none;
}

/* ── Service cards: cursor + elevated shadow ── */
.service-card {
  box-shadow: var(--shadow-card);
  transition: box-shadow 0.22s ease, transform 0.22s ease;
}

.service-card:hover {
  box-shadow: var(--shadow-lift);
}

/* ── Expect cards: warm hover ─────────────── */
.expect-card:hover {
  border-color: var(--green-light);
}

/* ── Nav: active link underline (skill: visual-hierarchy) ── */
.nav-links .nav-link.active {
  position: relative;
}

.nav-links .nav-link.active::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 4px;
  right: 4px;
  height: 2px;
  background: var(--green-primary);
  border-radius: 2px;
}

html[dir="rtl"] .nav-links .nav-link.active::after {
  left: 4px;
  right: 4px;
}

/* ── Btn: consistent focus ring (skill: focus-states) ── */
.btn:focus-visible,
.cal-nav:focus-visible,
.event-action-btn:focus-visible {
  outline: 2px solid var(--green-primary);
  outline-offset: 3px;
}

/* ── Page hero: RTL alignment ─────────────── */
html[dir="rtl"] .page-hero h1,
html[dir="rtl"] .page-hero p {
  text-align: right;
}

/* ── Body: line-length control (skill: line-length-control) ── */
/* 60–75 chars/line = ~650px at 16px — prevent overly wide paragraphs */
.content-narrow .body-text,
.content-narrow p {
  max-width: 65ch;
}

html[dir="rtl"] .content-narrow .body-text,
html[dir="rtl"] .content-narrow p {
  max-width: 100%;
}

/* ── Skeleton loading: shimmer for gallery (skill: progressive-loading) ── */
@keyframes shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}

.gallery-loading-placeholder {
  background: linear-gradient(90deg, var(--green-soft) 25%, #e8f0e8 50%, var(--green-soft) 75%);
  background-size: 800px 100%;
  animation: shimmer 1.4s ease infinite;
  border-radius: var(--radius);
  aspect-ratio: 4/3;
}

/* ── Elevation scale: consistent card shadows ── */
/* Skill: elevation-consistent — use consistent shadow scale */
.card-elevation-0 { box-shadow: none; border: 1px solid var(--border); }
.card-elevation-1 { box-shadow: 0 1px 4px rgba(0,0,0,0.06); }
.card-elevation-2 { box-shadow: var(--shadow-card); }
.card-elevation-3 { box-shadow: var(--shadow-lift); }

/* ── Reduced motion: final additions ─────── */
@media (prefers-reduced-motion: reduce) {
  @keyframes shimmer { from, to { background-position: 0 0; } }
  .contact-trust-stat,
  .vision-block h3 { transition: none; }
}
/* ══════════════════════════════════════════
   PREMIUM WOW PASS — Global + Kontakt
   Contact intro, pill buttons, gradients,
   motion system, visual rhythm
══════════════════════════════════════════ */

/* ── Buttons: pill variant (radius-full) ── */
.btn {
  border-radius: var(--radius-full);
  transition:
    background 0.22s ease,
    box-shadow 0.22s ease,
    transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1),
    border-color 0.22s ease;
}

/* Primary button: rich gradient for premium feel */
.btn-primary {
  background: linear-gradient(135deg, var(--green-dark) 0%, var(--green-medium) 100%);
  box-shadow: 0 3px 12px rgba(27, 94, 32, 0.38), 0 1px 3px rgba(0,0,0,0.12);
}
.btn-primary:hover {
  background: linear-gradient(135deg, #143d16 0%, var(--green-dark) 100%);
  box-shadow: 0 6px 22px rgba(27, 94, 32, 0.45), 0 2px 6px rgba(0,0,0,0.14);
  transform: translateY(-1px);
}
.btn-primary:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(27, 94, 32, 0.32);
}

/* WhatsApp button */
.btn-whatsapp {
  background: linear-gradient(135deg, #25d366 0%, #128c7e 100%);
  color: #fff;
  box-shadow: 0 3px 12px rgba(37, 211, 102, 0.32);
}
.btn-whatsapp:hover {
  background: linear-gradient(135deg, #20b857 0%, #0e6b61 100%);
  box-shadow: 0 6px 20px rgba(37, 211, 102, 0.40);
  transform: translateY(-1px);
  color: #fff;
}

/* Outline button polish */
.btn-outline {
  border-radius: var(--radius-full);
}
.btn-outline:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(46,125,50,0.12);
}

/* ── Kontakt: clean intro ────────────────── */
.contact-intro {
  text-align: center;
  padding: 56px 24px 44px;
  max-width: 600px;
  margin: 0 auto 48px;
}

.contact-intro .section-label {
  margin-bottom: 12px;
}

.contact-intro-title {
  font-size: clamp(1.6rem, 4vw, 2.2rem);
  font-weight: 800;
  color: var(--green-dark);
  line-height: 1.25;
  margin-bottom: 16px;
  letter-spacing: -0.02em;
}

.contact-intro-sub {
  font-size: 1.05rem;
  color: var(--text-secondary);
  line-height: 1.7;
  max-width: 480px;
  margin: 0 auto 32px;
}

.contact-intro-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

.contact-intro-actions .btn {
  padding: 13px 28px;
  font-size: 0.92rem;
  font-weight: 700;
  min-height: 48px;
}

html[dir="rtl"] .contact-intro {
  text-align: center;
}
html[dir="rtl"] .contact-intro-sub {
  direction: rtl;
}
html[dir="rtl"] .contact-intro-actions {
  flex-direction: row-reverse;
}

@media (max-width: 540px) {
  .contact-intro {
    padding: 40px 16px 32px;
    margin-bottom: 32px;
  }
  .contact-intro-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .contact-intro-actions .btn {
    justify-content: center;
    width: 100%;
  }
}

/* ── Homepage hero: stronger impact ─────── */
.hero {
  background: linear-gradient(160deg, var(--green-pale) 0%, var(--green-pale) 40%, var(--green-soft) 80%, #fff 100%);
  position: relative;
  overflow: hidden;
}

.hero::before {
  content: '';
  position: absolute;
  top: -80px;
  left: -80px;
  width: 420px;
  height: 420px;
  background: radial-gradient(circle, rgba(46,125,50,0.07) 0%, transparent 70%);
  pointer-events: none;
}

.hero::after {
  content: '';
  position: absolute;
  bottom: -60px;
  right: -60px;
  width: 320px;
  height: 320px;
  background: radial-gradient(circle, rgba(46,125,50,0.05) 0%, transparent 70%);
  pointer-events: none;
}

/* hero-title: stronger weight but keep solid readable color */
.hero-title {
  font-size: clamp(2.2rem, 7vw, 3.8rem);
  font-weight: 900;
  letter-spacing: -0.03em;
  color: var(--green-dark);
  line-height: 1.1;
}

/* hero-verse: transparent, elegant — no background box */
.hero-verse {
  background: none;
  border: none;
  border-left: 3px solid var(--green-primary);
  border-radius: 0;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

html[dir="rtl"] .hero-verse {
  border-left: none;
  border-right: 3px solid var(--green-primary);
}

/* ── Section rhythm: breathing room ─────── */
.section {
  padding-top: 80px;
  padding-bottom: 80px;
}

@media (max-width: 768px) {
  .section {
    padding-top: 56px;
    padding-bottom: 56px;
  }
}

/* ── Section headers: stronger hierarchy ─── */
.section-header h2 {
  font-size: clamp(1.5rem, 3.5vw, 2.1rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--green-dark);
}

/* ── Page hero accent line ───────────────── */
.page-hero {
  position: relative;
  overflow: hidden;
}

.page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 0%, rgba(46,125,50,0.06) 0%, transparent 70%);
  pointer-events: none;
}

/* ── Cards: premium hover lift ───────────── */
.service-card,
.expect-card,
.children-feat-card,
.contact-block,
.event-card {
  transition:
    transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.28s ease,
    border-color 0.22s ease;
}

.service-card:hover,
.expect-card:hover,
.children-feat-card:hover {
  transform: translateY(-5px) scale(1.005);
}

/* ── Section label: scoped pill for light-bg contexts only ─── */
/* Do NOT apply pill globally — causes beige+white contrast issues
   on dark backgrounds (events-hero, visitor-block, cta-block, etc.) */
.contact-intro .section-label,
.expect-section .section-label,
.children-features-bar .section-label {
  display: inline-block;
  background: var(--green-pale);
  color: var(--green-dark);
  padding: 4px 14px;
  border-radius: var(--radius-full);
  border: 1px solid rgba(46,125,50,0.15);
  margin-bottom: 12px;
}

/* Labels on dark green backgrounds: white, no opaque pill */
.events-hero .section-label,
.kalender-visitor-block .section-label,
.children-cta-block .section-label {
  background: rgba(255,255,255,0.15);
  color: rgba(255,255,255,0.92) !important;
  border-color: rgba(255,255,255,0.25);
  display: inline-block;
  padding: 3px 12px;
  border-radius: var(--radius-full);
  border: 1px solid rgba(255,255,255,0.2);
}

/* ── Dividers: refined gradient ─────────── */
.section::before {
  display: none; /* don't auto-add top rule to all sections */
}

/* ── Vision: manifesto feel ──────────────── */
.vision-block {
  padding: 24px 0 24px 24px;
  border-left: none;
  position: relative;
}

.vision-block::before {
  content: '';
  position: absolute;
  left: 0;
  top: 4px;
  bottom: 4px;
  width: 3px;
  background: linear-gradient(180deg, var(--green-light) 0%, var(--green-primary) 100%);
  border-radius: 3px;
}

html[dir="rtl"] .vision-block {
  padding: 24px 24px 24px 0;
  border-left: none;
}

html[dir="rtl"] .vision-block::before {
  left: auto;
  right: 0;
}

.vision-block h3 {
  border-left: none !important;
  padding-left: 0 !important;
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--green-dark);
  margin-bottom: 10px;
  letter-spacing: -0.01em;
}

/* ── Footer: refined polish ──────────────── */
.footer-top {
  padding: 56px 0 40px;
}

/* ── Reduced motion: new additions ──────── */
@media (prefers-reduced-motion: reduce) {
  .btn,
  .btn-primary,
  .btn-outline,
  .btn-whatsapp {
    transition: background 0.22s ease, box-shadow 0.22s ease;
  }
  .btn:hover,
  .btn-primary:hover,
  .btn-outline:hover,
  .btn-whatsapp:hover {
    transform: none;
  }
  .service-card:hover,
  .expect-card:hover,
  .children-feat-card:hover {
    transform: none;
  }
  .hero::before,
  .hero::after {
    display: none;
  }
}

/* ═══════════════════════════════════════════════
   FAQ PAGE
═══════════════════════════════════════════════ */
.faq-list {
  max-width: 780px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.faq-item {
  border-bottom: 1px solid var(--border);
}
.faq-item:first-child {
  border-top: 1px solid var(--border);
}

.faq-question {
  width: 100%;
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 4px;
  text-align: left;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text);
  font-family: inherit;
  transition: color 0.18s;
}
html[dir="rtl"] .faq-question {
  text-align: right;
  flex-direction: row-reverse;
}
.faq-question:hover {
  color: var(--green);
}
.faq-q-text {
  flex: 1;
  line-height: 1.45;
}

.faq-chevron {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  color: var(--green);
  transition: transform 0.28s cubic-bezier(.4,0,.2,1);
}
.faq-item.faq-open .faq-chevron {
  transform: rotate(180deg);
}

.faq-answer-wrap {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.32s cubic-bezier(.4,0,.2,1);
}

.faq-answer {
  padding: 0 4px 22px;
  font-size: 0.97rem;
  color: var(--text-muted);
  line-height: 1.75;
}
html[dir="rtl"] .faq-answer {
  text-align: right;
}

.faq-empty {
  text-align: center;
  color: var(--text-muted);
  padding: 48px 0;
}

/* CTA block below FAQ list */
.faq-cta-block {
  max-width: 780px;
  margin: 56px auto 0;
  text-align: center;
  background: linear-gradient(135deg, #f4f9f0 0%, #edf5e8 100%);
  border-radius: 16px;
  padding: 40px 32px;
}
.faq-cta-block p {
  font-size: 1.1rem;
  color: var(--text);
  margin: 0 0 20px;
  font-weight: 500;
}
html[dir="rtl"] .faq-cta-block {
  text-align: center;
}

@media (max-width: 600px) {
  .faq-question {
    font-size: 0.97rem;
    padding: 18px 4px;
  }
  .faq-cta-block {
    padding: 32px 20px;
  }
}