/* ============================================================
   MELECH HA OLAM — Design System
   Ancient Middle Eastern Luxury × Cutting-Edge Interactive
   ============================================================ */



/* ── CSS Variables ──────────────────────────────────────── */
:root {
  /* Color Palette */
  --color-obsidian:    #0d0b08;
  --color-charcoal:    #1a1510;
  --color-earth:       #2c1f12;
  --color-sand:        #8b6f47;
  --color-clay:        #a07850;
  --color-terra:       #b08060;
  --color-linen:       #d4b896;
  --color-cream:       #f0e6d3;
  --color-parchment:   #faf3e8;
  --color-gold:        #c9a227;
  --color-gold-light:  #e8c84a;
  --color-gold-dark:   #8b6914;
  --color-white:       #ffffff;

  /* Typography */
  --font-display:   'Cinzel Decorative', serif;
  --font-heading:   'Cinzel', serif;
  --font-body:      'EB Garamond', serif;
  --font-hebrew:    'Noto Serif Hebrew', serif;

  /* Spacing */
  --space-xs:  0.5rem;
  --space-sm:  1rem;
  --space-md:  2rem;
  --space-lg:  4rem;
  --space-xl:  8rem;

  /* Transitions */
  --ease-elegant: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-dramatic: cubic-bezier(0.76, 0, 0.24, 1);

  /* Borders */
  --border-gold: 1px solid rgba(201, 162, 39, 0.4);
  --border-gold-strong: 1px solid rgba(201, 162, 39, 0.8);

  /* Shadows */
  --shadow-gold: 0 0 40px rgba(201, 162, 39, 0.15);
  --shadow-deep: 0 20px 60px rgba(0, 0, 0, 0.6);

  /* Live header height — measured by JS (components.js) so the hero clearance
     and anchor offset can never desync from the real header, even when the
     announcement bar wraps or fonts reflow. 94px is the desktop fallback
     used before JS runs / if JS is disabled. */
  --header-h: 94px;
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-h, 94px);
  font-size: 18px;
  -webkit-text-size-adjust: 100%;
}

body {
  background-color: var(--color-obsidian);
  color: var(--color-cream);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.7;
  overflow-x: hidden;
  min-height: 100vh;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }

/* Scrollbar */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--color-obsidian); }
::-webkit-scrollbar-thumb { background: var(--color-gold-dark); border-radius: 3px; }

/* Selection */
::selection { background: rgba(201, 162, 39, 0.3); color: var(--color-parchment); }

/* ── Typography ─────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0.05em;
}

.display-title {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.08em;
}

.hebrew-text {
  font-family: var(--font-hebrew);
  direction: rtl;
  letter-spacing: 0.02em;
}

.gold-text { color: var(--color-gold); }
.linen-text { color: var(--color-linen); }
.cream-text { color: var(--color-cream); }

/* ── Ornamental Dividers ────────────────────────────────── */
.ornament {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 1.5rem 0;
  justify-content: center;
}
.ornament::before,
.ornament::after {
  content: '';
  flex: 1;
  max-width: 120px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--color-gold), transparent);
}
.ornament-inner {
  color: var(--color-gold);
  font-size: 1.2rem;
  letter-spacing: 0.4em;
}

.section-divider {
  width: 100%;
  height: 60px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60'%3E%3Cpath fill='%230d0b08' d='M0,30 Q360,60 720,30 Q1080,0 1440,30 L1440,60 L0,60 Z'/%3E%3C/svg%3E") no-repeat center/cover;
}

/* ── Navigation — positioning handled by #site-header in pass 6 ── */
#navbar {
  position: relative;
  z-index: 998;
  background: transparent;
  transition: background 0.35s ease, backdrop-filter 0.35s ease, box-shadow 0.35s ease;
}

#navbar.scrolled {
  background: rgba(13, 11, 8, 0.98);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(201,162,39,0.25);
  box-shadow: 0 2px 28px rgba(0,0,0,0.65);
}

.nav-container {
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

.nav-logo {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
  flex-shrink: 0;
}

.nav-logo img {
  height: 52px;
  width: auto;
  object-fit: contain;
  transition: transform 0.3s var(--ease-elegant);
}

.nav-logo:hover img { transform: scale(1.05); }

.nav-logo-text {
  display: flex;
  flex-direction: column;
}

.nav-logo-name {
  font-family: var(--font-heading);
  font-size: 1rem;
  letter-spacing: 0.12em;
  color: var(--color-gold);
  white-space: nowrap;
}

.nav-logo-hebrew {
  font-family: var(--font-hebrew);
  font-size: 0.75rem;
  color: var(--color-linen);
  letter-spacing: 0.05em;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.nav-link {
  font-family: var(--font-heading);
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-linen);
  padding: 0.5rem 0.75rem;
  position: relative;
  transition: color 0.3s;
  white-space: nowrap;
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 1px;
  background: var(--color-gold);
  transition: width 0.3s var(--ease-elegant);
}

.nav-link:hover,
.nav-link.active {
  color: var(--color-gold);
}

.nav-link:hover::after,
.nav-link.active::after { width: 80%; }

.nav-donate {
  font-family: var(--font-heading);
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-obsidian);
  background: var(--color-gold);
  padding: 0.5rem 1.2rem;
  border-radius: 2px;
  transition: background 0.3s ease, transform 0.3s ease, opacity 0.3s ease, box-shadow 0.3s ease;
  white-space: nowrap;
  flex-shrink: 0;
}

.nav-donate:hover {
  background: var(--color-gold-light);
  transform: translateY(-1px);
  box-shadow: 0 4px 20px rgba(201, 162, 39, 0.4);
}

/* Hamburger */
.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 0.5rem;
  cursor: pointer;
  z-index: 1001;
}
.hamburger span {
  display: block;
  width: 24px;
  height: 1.5px;
  background: var(--color-gold);
  transition: background 0.3s ease, transform 0.3s ease, opacity 0.3s ease, box-shadow 0.3s ease;
  transform-origin: center;
}
.hamburger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* Mobile Menu */
.mobile-menu {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(13, 11, 8, 0.98);
  backdrop-filter: blur(20px);
  z-index: 999;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s var(--ease-elegant);
}
.mobile-menu.open {
  display: flex;
  opacity: 1;
  pointer-events: all;
}
.mobile-menu .nav-link {
  font-size: 1.1rem;
  letter-spacing: 0.25em;
  padding: 0.75rem;
}
.mobile-menu .nav-donate {
  font-size: 0.9rem;
  padding: 0.8rem 2rem;
  margin-top: 1rem;
}
.mobile-menu-ornament {
  color: var(--color-gold);
  font-size: 1.5rem;
  letter-spacing: 0.5em;
}

/* ── Hero Section ───────────────────────────────────────── */
.hero {
  position: relative;
  height: 100vh;
  min-height: 700px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.hero-video-container {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.4;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    160deg,
    rgba(13, 11, 8, 0.7) 0%,
    rgba(44, 31, 18, 0.4) 50%,
    rgba(13, 11, 8, 0.85) 100%
  );
  z-index: 1;
}

.hero-content {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 2rem;
  max-width: 900px;
}

.hero-eyebrow {
  font-family: var(--font-heading);
  font-size: 0.7rem;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--color-gold);
  margin-bottom: 1.5rem;
  opacity: 0;
  animation: fadeUp 0.8s var(--ease-elegant) 0.3s forwards;
}

.hero-title {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 7vw, 5.5rem);
  font-weight: 700;
  color: var(--color-parchment);
  line-height: 1.1;
  margin-bottom: 0.5rem;
  opacity: 0;
  animation: fadeUp 0.8s var(--ease-elegant) 0.5s forwards;
  text-shadow: 0 4px 30px rgba(0,0,0,0.6);
}

.hero-hebrew {
  font-family: var(--font-hebrew);
  font-size: clamp(1.2rem, 3vw, 2rem);
  color: var(--color-gold);
  letter-spacing: 0.05em;
  margin-bottom: 1.5rem;
  opacity: 0;
  animation: fadeUp 0.8s var(--ease-elegant) 0.7s forwards;
}

.hero-subtitle {
  font-size: clamp(1rem, 2vw, 1.2rem);
  color: var(--color-linen);
  margin-bottom: 2.5rem;
  font-style: italic;
  opacity: 0;
  animation: fadeUp 0.8s var(--ease-elegant) 0.9s forwards;
}

.hero-ctas {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
  opacity: 0;
  animation: fadeUp 0.8s var(--ease-elegant) 1.1s forwards;
}

.hero-scroll {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  opacity: 0;
  animation: fadeIn 1s ease 2s forwards;
}

.hero-scroll-label {
  font-family: var(--font-heading);
  font-size: 0.55rem;
  letter-spacing: 0.3em;
  color: var(--color-gold);
  text-transform: uppercase;
}

.hero-scroll-line {
  width: 1px;
  height: 40px;
  background: linear-gradient(to bottom, var(--color-gold), transparent);
  animation: scrollPulse 2s ease-in-out infinite;
}

/* ── Buttons ────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-heading);
  font-size: 0.65rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 0.9rem 2rem;
  border-radius: 2px;
  transition: background 0.35s ease, transform 0.35s ease, opacity 0.35s ease, box-shadow 0.35s ease;
  position: relative;
  overflow: hidden;
}

.btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.1);
  transform: translateX(-100%);
  transition: transform 0.4s var(--ease-elegant);
}
.btn:hover::before { transform: translateX(0); }

.btn-gold {
  background: var(--color-gold);
  color: var(--color-obsidian);
}
.btn-gold:hover {
  background: var(--color-gold-light);
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(201, 162, 39, 0.5);
}

.btn-outline {
  border: var(--border-gold-strong);
  color: var(--color-gold);
  background: transparent;
}
.btn-outline:hover {
  background: rgba(201, 162, 39, 0.1);
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(201, 162, 39, 0.2);
}

.btn-dark {
  background: var(--color-charcoal);
  color: var(--color-cream);
  border: var(--border-gold);
}
.btn-dark:hover {
  background: var(--color-earth);
  border-color: var(--color-gold);
  transform: translateY(-2px);
}

/* ── Section Base ───────────────────────────────────────── */
.section {
  padding: var(--space-xl) var(--space-md);
}

.section-inner {
  max-width: 1300px;
  margin: 0 auto;
}

.section-header {
  text-align: center;
  margin-bottom: var(--space-lg);
}

.section-label {
  font-family: var(--font-heading);
  font-size: 0.6rem;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--color-gold);
  margin-bottom: 0.75rem;
  display: block;
}

.section-title {
  font-size: clamp(1.8rem, 4vw, 3rem);
  color: var(--color-parchment);
  margin-bottom: 0.5rem;
}

.section-subtitle {
  font-size: 1.1rem;
  color: var(--color-linen);
  max-width: 600px;
  margin: 0 auto;
  font-style: italic;
}

/* ── Schedule Strip ─────────────────────────────────────── */
.schedule-strip {
  background: var(--color-charcoal);
  border-top: var(--border-gold);
  border-bottom: var(--border-gold);
  padding: 3rem 2rem;
}

.schedule-grid {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}

.schedule-item {
  text-align: center;
  padding: 2rem 1.5rem;
  border-right: var(--border-gold);
  position: relative;
  transition: background 0.3s;
}
.schedule-item:last-child { border-right: none; }
.schedule-item:hover { background: rgba(201, 162, 39, 0.05); }

.schedule-icon {
  width: 48px;
  height: 48px;
  margin: 0 auto 1rem;
  object-fit: contain;
  filter: invert(1) sepia(1) saturate(2) hue-rotate(5deg);
  opacity: 0.85;
}

.schedule-day {
  font-family: var(--font-display);
  font-size: 1rem;
  color: var(--color-parchment);
  margin-bottom: 0.25rem;
}

.schedule-event {
  font-family: var(--font-heading);
  font-size: 0.55rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--color-gold);
  margin-bottom: 0.75rem;
}

.schedule-time {
  font-size: 0.9rem;
  color: var(--color-linen);
  font-style: italic;
}

.schedule-location {
  font-size: 0.8rem;
  color: var(--color-sand);
  margin-top: 0.5rem;
  line-height: 1.4;
}

/* ── About / Charter Section ────────────────────────────── */
.about-section {
  background: linear-gradient(135deg, var(--color-earth) 0%, var(--color-charcoal) 100%);
  position: relative;
  overflow: hidden;
}

.about-section::before {
  content: '✡';
  position: absolute;
  right: -2rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 20rem;
  color: rgba(201, 162, 39, 0.03);
  pointer-events: none;
  line-height: 1;
}

.about-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 5rem;
  align-items: center;
}

.about-image-stack {
  position: relative;
}

.about-img-main {
  width: 100%;
  border-radius: 2px;
  box-shadow: var(--shadow-deep);
  object-fit: cover;
  aspect-ratio: 4/5;
}

.about-img-accent {
  position: absolute;
  bottom: -2rem;
  right: -2rem;
  width: 55%;
  border-radius: 2px;
  border: 3px solid var(--color-charcoal);
  box-shadow: var(--shadow-deep);
  object-fit: cover;
  aspect-ratio: 1;
}

.about-badge {
  position: absolute;
  top: 2rem;
  left: -1.5rem;
  background: var(--color-gold);
  color: var(--color-obsidian);
  padding: 0.75rem 1.25rem;
  font-family: var(--font-heading);
  font-size: 0.55rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  box-shadow: var(--shadow-deep);
  writing-mode: vertical-rl;
  text-orientation: mixed;
  transform: rotate(180deg);
}

.about-content { padding-right: 1rem; }

.about-text {
  color: var(--color-linen);
  margin-bottom: 1.5rem;
  font-size: 1.05rem;
}

.charter-accordion { margin-top: 2rem; }

.accordion-item {
  border-bottom: var(--border-gold);
}

.accordion-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 0;
  cursor: pointer;
  font-family: var(--font-heading);
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-parchment);
  transition: color 0.3s;
}
.accordion-header:hover { color: var(--color-gold); }

.accordion-icon {
  color: var(--color-gold);
  font-size: 1rem;
  transition: transform 0.4s var(--ease-elegant);
  flex-shrink: 0;
}
.accordion-item.open .accordion-icon { transform: rotate(45deg); }

.accordion-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s var(--ease-elegant), padding 0.3s;
}
.accordion-item.open .accordion-body { max-height: 500px; padding-bottom: 1rem; }

.accordion-body p {
  color: var(--color-linen);
  font-size: 0.95rem;
  line-height: 1.8;
}

/* ── Camel Silhouette Divider ───────────────────────────── */
.camel-divider {
  width: 100%;
  height: 100px;
  background: url('../images/camel-silhouette.png') repeat-x bottom center / auto 100%;
  opacity: 0.6;
  margin: 0;
  pointer-events: none;
}

/* ── Partners Section ───────────────────────────────────── */
.partners-section {
  background: var(--color-obsidian);
}

.partner-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
  margin-bottom: 3rem;
}

.partner-card {
  background: var(--color-charcoal);
  border: var(--border-gold);
  padding: 2.5rem;
  text-align: center;
  transition: background 0.35s ease, transform 0.35s ease, opacity 0.35s ease, box-shadow 0.35s ease;
  position: relative;
  overflow: hidden;
}

.partner-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(201,162,39,0.05) 0%, transparent 60%);
  opacity: 0;
  transition: opacity 0.3s;
}
.partner-card:hover::before { opacity: 1; }
.partner-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-gold);
  border-color: var(--color-gold);
}

.partner-logo {
  height: 60px;
  width: auto;
  max-width: 200px;
  margin: 0 auto 1.5rem;
  object-fit: contain;
  filter: brightness(0) invert(1);
  opacity: 0.85;
  transition: opacity 0.3s;
}
.partner-card:hover .partner-logo { opacity: 1; }

.partner-name {
  font-family: var(--font-heading);
  font-size: 0.9rem;
  letter-spacing: 0.15em;
  color: var(--color-parchment);
  margin-bottom: 0.75rem;
}

.partner-desc {
  font-size: 0.85rem;
  color: var(--color-linen);
  margin-bottom: 1.5rem;
  line-height: 1.7;
}

.partner-icons {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1.5rem;
  margin-top: 3rem;
  padding-top: 3rem;
  border-top: var(--border-gold);
}

.partner-icon-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  opacity: 0.7;
  transition: background 0.3s ease, transform 0.3s ease, opacity 0.3s ease;
}
.partner-icon-link:hover { opacity: 1; transform: translateY(-3px); }

.partner-icon-img {
  width: 60px;
  height: 60px;
  object-fit: contain;
  border-radius: 12px;
}

.partner-icon-label {
  font-family: var(--font-heading);
  font-size: 0.5rem;
  letter-spacing: 0.15em;
  color: var(--color-linen);
  text-transform: uppercase;
}

/* ── News Section ───────────────────────────────────────── */
.news-section {
  background: var(--color-obsidian);
  padding-top: 0;
}

.news-logos {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 2rem;
}

.news-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  opacity: 0.7;
  transition: background 0.3s ease, transform 0.3s ease, opacity 0.3s ease, box-shadow 0.3s ease;
}
.news-link:hover { opacity: 1; transform: translateY(-4px); }

.news-icon {
  width: 70px;
  height: 70px;
  border-radius: 16px;
  object-fit: contain;
  box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}

.news-name {
  font-family: var(--font-heading);
  font-size: 0.5rem;
  letter-spacing: 0.15em;
  color: var(--color-linen);
  text-transform: uppercase;
}

/* ── Leadership Section ─────────────────────────────────── */
.leadership-section {
  background: linear-gradient(180deg, var(--color-earth) 0%, var(--color-charcoal) 100%);
}

.leadership-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

.leader-card {
  background: rgba(13, 11, 8, 0.5);
  border: var(--border-gold);
  padding: 2rem;
  text-align: center;
  transition: background 0.35s ease, box-shadow 0.35s ease, transform 0.35s ease;
  position: relative;
  overflow: hidden;
}

.leader-card::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--color-gold), transparent);
  transform: scaleX(0);
  transition: transform 0.4s var(--ease-elegant);
}
.leader-card:hover::after { transform: scaleX(1); }
.leader-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-gold);
  border-color: var(--color-gold);
}

.leader-photo-wrap {
  position: relative;
  width: 140px;
  height: 140px;
  margin: 0 auto 1.5rem;
}

.leader-photo {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--color-gold-dark);
  transition: border-color 0.3s;
}
.leader-card:hover .leader-photo { border-color: var(--color-gold); }

.leader-photo-ring {
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 1px solid rgba(201, 162, 39, 0.3);
  transition: border-color 0.3s;
}
.leader-card:hover .leader-photo-ring { border-color: rgba(201, 162, 39, 0.6); }

.leader-name {
  font-family: var(--font-heading);
  font-size: 1rem;
  color: var(--color-parchment);
  margin-bottom: 0.25rem;
}

.leader-role {
  font-family: var(--font-heading);
  font-size: 0.55rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-gold);
  margin-bottom: 1rem;
}

.leader-bio {
  font-size: 0.85rem;
  color: var(--color-linen);
  line-height: 1.7;
  margin-bottom: 1.25rem;
}

/* ── Contact Section ────────────────────────────────────── */
.contact-section {
  background: var(--color-charcoal);
  position: relative;
  overflow: hidden;
}

.contact-section::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: url('../images/western-wall.jpg') center/cover no-repeat;
  opacity: 0.06;
  pointer-events: none;
}

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  align-items: start;
}

.contact-info h3 {
  font-size: 1.5rem;
  color: var(--color-parchment);
  margin-bottom: 1rem;
}

.contact-info p {
  color: var(--color-linen);
  margin-bottom: 2rem;
}

.contact-details {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.contact-detail {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.contact-icon {
  color: var(--color-gold);
  font-size: 1.1rem;
  margin-top: 0.1rem;
  flex-shrink: 0;
}

.contact-detail-text {
  font-size: 0.95rem;
  color: var(--color-linen);
  line-height: 1.5;
}

.contact-detail-text a {
  color: var(--color-gold);
  transition: color 0.3s;
}
.contact-detail-text a:hover { color: var(--color-gold-light); }

/* ── Forms ──────────────────────────────────────────────── */
.form-group {
  margin-bottom: 1.25rem;
}

.form-label {
  display: block;
  font-family: var(--font-heading);
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-gold);
  margin-bottom: 0.5rem;
}

.form-input,
.form-textarea,
.form-select {
  width: 100%;
  background: rgba(255,255,255,0.04);
  border: var(--border-gold);
  border-radius: 2px;
  padding: 0.85rem 1rem;
  color: var(--color-cream);
  font-family: var(--font-body);
  font-size: 0.95rem;
  transition: background 0.3s ease, transform 0.3s ease, opacity 0.3s ease, box-shadow 0.3s ease;
  -webkit-appearance: none;
  appearance: none;
}

.form-input:focus,
.form-textarea:focus,
.form-select:focus {
  outline: none;
  border-color: var(--color-gold);
  background: rgba(201, 162, 39, 0.05);
  box-shadow: 0 0 0 3px rgba(201, 162, 39, 0.1);
}

.form-input::placeholder,
.form-textarea::placeholder { color: rgba(212, 184, 150, 0.4); }

.form-textarea { resize: vertical; min-height: 120px; }

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.form-check {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  cursor: pointer;
}

.form-check input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--color-gold);
  flex-shrink: 0;
}

.form-check-label {
  font-size: 0.85rem;
  color: var(--color-linen);
}

/* ── Calendar Section ───────────────────────────────────── */
.calendar-section {
  background: var(--color-obsidian);
}

.calendar-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  margin-bottom: 2.5rem;
}

.calendar-nav-btn {
  width: 44px;
  height: 44px;
  border: var(--border-gold);
  border-radius: 2px;
  color: var(--color-gold);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  transition: background 0.3s ease, transform 0.3s ease, opacity 0.3s ease;
  cursor: pointer;
  background: transparent;
}
.calendar-nav-btn:hover {
  background: rgba(201, 162, 39, 0.1);
}

.calendar-month-label {
  font-family: var(--font-heading);
  font-size: 1.2rem;
  letter-spacing: 0.1em;
  color: var(--color-parchment);
  min-width: 220px;
  text-align: center;
}

.calendar-grid-header {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  margin-bottom: 2px;
}

.cal-weekday {
  text-align: center;
  font-family: var(--font-heading);
  font-size: 0.55rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-gold);
  padding: 0.75rem 0;
}

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

.cal-day {
  background: var(--color-charcoal);
  border: 1px solid rgba(139, 111, 71, 0.15);
  min-height: 90px;
  padding: 0.5rem;
  transition: background 0.2s;
  cursor: pointer;
  position: relative;
}
.cal-day:hover { background: rgba(201, 162, 39, 0.05); }
.cal-day.other-month { opacity: 0.3; }
.cal-day.today {
  border-color: var(--color-gold);
  background: rgba(201, 162, 39, 0.08);
}

.cal-day-num {
  font-family: var(--font-heading);
  font-size: 0.8rem;
  color: var(--color-linen);
  margin-bottom: 0.25rem;
}
.cal-day.today .cal-day-num {
  color: var(--color-gold);
  font-weight: 700;
}

.cal-event {
  font-size: 0.6rem;
  padding: 2px 4px;
  border-radius: 2px;
  margin-bottom: 2px;
  line-height: 1.3;
  background: rgba(201, 162, 39, 0.2);
  color: var(--color-gold-light);
  border-left: 2px solid var(--color-gold);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.upcoming-events {
  margin-top: 3rem;
}

.event-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.event-item {
  display: grid;
  grid-template-columns: 80px 1fr auto;
  gap: 1.5rem;
  align-items: center;
  background: var(--color-charcoal);
  border: var(--border-gold);
  padding: 1.25rem 1.5rem;
  transition: background 0.3s ease, transform 0.3s ease, opacity 0.3s ease, box-shadow 0.3s ease;
}
.event-item:hover {
  border-color: var(--color-gold);
  transform: translateX(4px);
}

.event-date-badge {
  text-align: center;
  border-right: var(--border-gold);
  padding-right: 1.5rem;
}

.event-date-day {
  font-family: var(--font-display);
  font-size: 1.8rem;
  color: var(--color-gold);
  line-height: 1;
}

.event-date-month {
  font-family: var(--font-heading);
  font-size: 0.55rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-linen);
}

.event-title {
  font-family: var(--font-heading);
  font-size: 0.9rem;
  color: var(--color-parchment);
  margin-bottom: 0.25rem;
}

.event-time {
  font-size: 0.8rem;
  color: var(--color-linen);
  font-style: italic;
}

/* ── Footer ─────────────────────────────────────────────── */
footer {
  background: var(--color-obsidian);
  border-top: var(--border-gold);
}

.footer-upper {
  padding: 4rem 2rem;
  max-width: 1300px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.5fr;
  gap: 3rem;
}

.footer-brand p {
  font-size: 0.9rem;
  color: var(--color-linen);
  margin: 1rem 0;
  line-height: 1.7;
}

.footer-old-logo {
  margin-top: 1.5rem;
}

.footer-old-logo img {
  height: 70px;
  width: auto;
  opacity: 0.75;
  transition: opacity 0.3s;
  filter: brightness(0.9);
}
.footer-old-logo:hover img { opacity: 1; }

.footer-old-logo-label {
  font-family: var(--font-heading);
  font-size: 0.5rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-sand);
  margin-top: 0.5rem;
}

.footer-col h4 {
  font-family: var(--font-heading);
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-gold);
  margin-bottom: 1.25rem;
}

.footer-links {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.footer-link {
  font-size: 0.85rem;
  color: var(--color-linen);
  transition: color 0.3s;
}
.footer-link:hover { color: var(--color-gold); }

.footer-newsletter { }

.footer-newsletter p {
  font-size: 0.85rem;
  color: var(--color-linen);
  margin-bottom: 1rem;
}

.newsletter-form {
  display: flex;
  gap: 0;
}

.newsletter-input {
  flex: 1;
  background: rgba(255,255,255,0.04);
  border: var(--border-gold);
  border-right: none;
  border-radius: 2px 0 0 2px;
  padding: 0.75rem 1rem;
  color: var(--color-cream);
  font-family: var(--font-body);
  font-size: 0.85rem;
}
.newsletter-input:focus {
  outline: none;
  background: rgba(201,162,39,0.05);
}
.newsletter-input::placeholder { color: rgba(212,184,150,0.4); }

.newsletter-btn {
  background: var(--color-gold);
  color: var(--color-obsidian);
  border: none;
  padding: 0.75rem 1.25rem;
  font-family: var(--font-heading);
  font-size: 0.6rem;
  letter-spacing: 0.15em;
  cursor: pointer;
  border-radius: 0 2px 2px 0;
  transition: background 0.3s;
  white-space: nowrap;
}
.newsletter-btn:hover { background: var(--color-gold-light); }

.footer-social {
  display: flex;
  gap: 0.75rem;
  margin-top: 1.25rem;
}

.social-link {
  width: 38px;
  height: 38px;
  border: var(--border-gold);
  border-radius: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-gold);
  font-size: 0.9rem;
  transition: background 0.3s ease, transform 0.3s ease, opacity 0.3s ease;
}
.social-link:hover {
  background: rgba(201,162,39,0.1);
  transform: translateY(-2px);
}

.footer-lower {
  border-top: var(--border-gold);
  padding: 1.5rem 2rem;
  max-width: 1300px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.footer-copy {
  font-size: 0.8rem;
  color: var(--color-sand);
}

.footer-legal {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.footer-legal a {
  font-size: 0.75rem;
  color: var(--color-sand);
  transition: color 0.3s;
}
.footer-legal a:hover { color: var(--color-gold); }

/* ── Page Hero (inner pages) ────────────────────────────── */
.page-hero {
  height: 50vh;
  min-height: 400px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.page-hero-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0.35;
  transform: scale(1.05);
  transition: transform 8s ease;
}
.page-hero:hover .page-hero-bg { transform: scale(1); }

.page-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(13,11,8,0.5) 0%, rgba(13,11,8,0.8) 100%);
}

.page-hero-content {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 2rem;
}

.page-breadcrumb {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--font-heading);
  font-size: 0.55rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-linen);
  margin-bottom: 1rem;
}
.page-breadcrumb a { color: var(--color-gold); transition: color 0.2s; }
.page-breadcrumb a:hover { color: var(--color-gold-light); }
.page-breadcrumb span { color: var(--color-sand); }

.page-hero-title {
  font-size: clamp(2rem, 5vw, 4rem);
  color: var(--color-parchment);
}

/* ── Jerusalem Footer Banner ────────────────────────────── */
.jerusalem-banner {
  width: 100%;
  height: 200px;
  overflow: hidden;
  position: relative;
}

.jerusalem-banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 60%;
  opacity: 0.7;
}

.jerusalem-banner-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(13,11,8,0.6) 0%, transparent 50%, rgba(13,11,8,0.8) 100%);
}

/* ── Scroll Reveal Animations ───────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s var(--ease-elegant), transform 0.7s var(--ease-elegant);
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }

/* ── Keyframes ──────────────────────────────────────────── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes scrollPulse {
  0%, 100% { opacity: 1; height: 40px; }
  50% { opacity: 0.3; height: 24px; }
}
@keyframes shimmer {
  0% { background-position: -200% center; }
  100% { background-position: 200% center; }
}

/* ── Gold Shimmer Text ──────────────────────────────────── */
.shimmer-gold {
  background: linear-gradient(90deg, var(--color-gold-dark), var(--color-gold-light), var(--color-gold), var(--color-gold-light), var(--color-gold-dark));
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shimmer 4s linear infinite;
}

/* ── Utility Classes ────────────────────────────────────── */
.text-center { text-align: center; }
.mt-1 { margin-top: 1rem; }
.mt-2 { margin-top: 2rem; }
.mt-3 { margin-top: 3rem; }
.mb-1 { margin-bottom: 1rem; }
.mb-2 { margin-bottom: 2rem; }
.d-flex { display: flex; }
.align-center { align-items: center; }
.justify-center { justify-content: center; }
.gap-1 { gap: 1rem; }
.gap-2 { gap: 2rem; }

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 1100px) {
  .about-grid { grid-template-columns: 1fr; gap: 3rem; }
  .about-image-stack { max-width: 500px; margin: 0 auto; }
  .about-img-accent { display: none; }
  .about-badge { left: 1rem; }
  .footer-upper { grid-template-columns: 1fr 1fr; }
  .leadership-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  .nav-donate { display: none; }
  .schedule-grid { grid-template-columns: repeat(2, 1fr); }
  .schedule-item { border-right: none; border-bottom: var(--border-gold); }
  .schedule-item:nth-child(2n) { border-right: none; }
  .partner-cards { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr; gap: 3rem; }
  .form-row { grid-template-columns: 1fr; }
  .footer-upper { grid-template-columns: 1fr; gap: 2rem; }
  html { font-size: 16px; }
}

@media (max-width: 600px) {
  .schedule-grid { grid-template-columns: 1fr; }
  .leadership-grid { grid-template-columns: 1fr; }
  .hero-ctas { flex-direction: column; align-items: center; }
  .footer-lower { flex-direction: column; text-align: center; }
  .event-item { grid-template-columns: 60px 1fr; }
  .event-item .btn { display: none; }
  .calendar-grid .cal-day { min-height: 60px; }
  .section { padding: var(--space-lg) var(--space-sm); }
  html { font-size: 15px; }
}

/* ── Support / Donate Strip ─────────────────────────────── */
.support-strip {
  background: linear-gradient(135deg, var(--color-earth) 0%, var(--color-charcoal) 100%);
  border-top: var(--border-gold);
  border-bottom: var(--border-gold);
  padding: 3rem 2rem;
  text-align: center;
}

.support-strip h2 {
  font-size: 1.8rem;
  color: var(--color-parchment);
  margin-bottom: 0.5rem;
}

.support-strip p {
  color: var(--color-linen);
  margin-bottom: 2rem;
  font-style: italic;
}

/* ── Watch / Stream Section ─────────────────────────────── */
.watch-section {
  background: var(--color-charcoal);
}

.watch-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

.watch-card {
  background: var(--color-obsidian);
  border: var(--border-gold);
  padding: 2rem;
  text-align: center;
  transition: background 0.35s ease, transform 0.35s ease, opacity 0.35s ease, box-shadow 0.35s ease;
}
.watch-card:hover {
  border-color: var(--color-gold);
  transform: translateY(-4px);
  box-shadow: var(--shadow-gold);
}

.watch-icon {
  font-size: 2.5rem;
  margin-bottom: 1rem;
}

.watch-platform {
  font-family: var(--font-heading);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-gold);
  margin-bottom: 0.5rem;
}

.watch-desc {
  font-size: 0.9rem;
  color: var(--color-linen);
  margin-bottom: 1.5rem;
}

@media (max-width: 700px) {
  .watch-cards { grid-template-columns: 1fr; }
}

/* ── Resources Cards ────────────────────────────────────── */
.resources-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.resource-card {
  background: var(--color-charcoal);
  border: var(--border-gold);
  padding: 1.75rem;
  transition: background 0.3s ease, transform 0.3s ease, opacity 0.3s ease, box-shadow 0.3s ease;
  text-decoration: none;
  display: block;
}

.resource-card:hover {
  border-color: var(--color-gold);
  transform: translateY(-3px);
  box-shadow: var(--shadow-gold);
}

.resource-icon {
  font-size: 1.8rem;
  margin-bottom: 0.75rem;
}

.resource-title {
  font-family: var(--font-heading);
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  color: var(--color-parchment);
  margin-bottom: 0.5rem;
}

.resource-desc {
  font-size: 0.8rem;
  color: var(--color-linen);
  line-height: 1.6;
}

@media (max-width: 700px) {
  .resources-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  .resources-grid { grid-template-columns: 1fr; }
}

/* ── Crown Logo Display ─────────────────────────────────── */
.crown-display {
  display: flex;
  justify-content: center;
  margin: 3rem 0;
}
.crown-display img {
  width: 300px;
  max-width: 80%;
  height: auto;
  filter: drop-shadow(0 8px 40px rgba(201, 162, 39, 0.25));
  transition: filter 0.4s;
}
.crown-display:hover img {
  filter: drop-shadow(0 8px 60px rgba(201, 162, 39, 0.5));
}

/* ── Success / Error States ─────────────────────────────── */
.form-success {
  background: rgba(201, 162, 39, 0.1);
  border: var(--border-gold);
  padding: 1.25rem 1.5rem;
  text-align: center;
  color: var(--color-gold);
  font-family: var(--font-heading);
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  display: none;
}
.form-success.show { display: block; }

/* ── Back to Top ────────────────────────────────────────── */
#back-to-top {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  width: 44px;
  height: 44px;
  background: var(--color-gold);
  color: var(--color-obsidian);
  border: none;
  border-radius: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: background 0.3s ease, transform 0.3s ease, opacity 0.3s ease, box-shadow 0.3s ease;
  z-index: 500;
  box-shadow: 0 4px 20px rgba(201, 162, 39, 0.4);
}
#back-to-top.visible {
  opacity: 1;
  pointer-events: all;
}
#back-to-top:hover {
  background: var(--color-gold-light);
  transform: translateY(-3px);
}


/* ── Map / Directions ───────────────────────────────────── */
.map-embed {
  border: var(--border-gold);
  border-radius: 2px;
  overflow: hidden;
  height: 300px;
}
.map-embed iframe {
  width: 100%;
  height: 100%;
  border: none;
}

/* ── Cookie Banner ──────────────────────────────────────── */
#cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(26, 21, 16, 0.97);
  backdrop-filter: blur(10px);
  border-top: var(--border-gold);
  padding: 1.25rem 2rem;
  z-index: 900;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
  transform: translateY(100%);
  transition: transform 0.5s var(--ease-elegant);
}
#cookie-banner.show { transform: translateY(0); }

.cookie-text {
  font-size: 0.85rem;
  color: var(--color-linen);
  flex: 1;
  min-width: 200px;
}

.cookie-text a { color: var(--color-gold); }

.cookie-btns {
  display: flex;
  gap: 0.75rem;
  flex-shrink: 0;
}

/* ============================================================
   MEGA MENU & NAV OVERHAUL
   ============================================================ */

/* Announcement bar */
.announcement-bar {
  background: var(--color-earth);
  color: var(--color-linen);
  text-align: center;
  padding: 0.5rem 1.5rem;
  font-family: var(--font-heading);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  flex-wrap: wrap;
  z-index: 999;
  position: relative;
}
.announcement-bar a { color: var(--color-gold); font-weight: 700; text-decoration: underline; }

/* Nav container layout */
.nav-container {
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 1.5rem;
  height: 58px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.nav-logo { display: flex; align-items: center; gap: 0.75rem; text-decoration: none; flex-shrink: 0; }
.nav-logo img { height: 44px; width: auto; }
.nav-logo-name { font-family: var(--font-heading); font-size: 1rem; color: var(--color-cream); display: block; }
.nav-logo-hebrew { font-family: var(--font-hebrew); font-size: 0.75rem; color: var(--color-gold); display: block; }

.nav-links { display: flex; align-items: center; gap: 0.25rem; }
.nav-link {
  font-family: var(--font-heading);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-linen);
  text-decoration: none;
  padding: 0.5rem 0.75rem;
  background: none;
  border: none;
  cursor: pointer;
  transition: color 0.3s;
  white-space: nowrap;
}
.nav-link:hover, .nav-link.active-link { color: var(--color-gold); }
.nav-link-mega { display: flex; align-items: center; gap: 0.3rem; }
.mega-caret { font-size: 0.6rem; transition: transform 0.3s; }
.nav-item-mega.active .mega-caret { transform: rotate(180deg); }

/* Mega dropdown */
.nav-item-mega { position: relative; }
.mega-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: rgba(13,11,8,0.97);
  backdrop-filter: blur(20px);
  border: 1px solid var(--color-gold-dark);
  border-top: 2px solid var(--color-gold);
  min-width: 260px;
  padding: 0.5rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  transform: translateX(-50%) translateY(-8px);
  box-shadow: 0 20px 60px rgba(0,0,0,0.6);
}
.nav-item-mega.active .mega-dropdown {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.mega-dropdown-inner { display: flex; flex-direction: column; }
.mega-item {
  display: flex;
  flex-direction: column;
  padding: 0.75rem 1rem;
  text-decoration: none;
  border-bottom: 1px solid rgba(201,162,39,0.1);
  transition: background 0.2s;
}
.mega-item:last-child { border-bottom: none; }
.mega-item:hover { background: rgba(201,162,39,0.08); }
.mega-item-label {
  font-family: var(--font-heading);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  color: var(--color-cream);
  text-transform: uppercase;
}
.mega-item-desc { font-size: 0.8rem; color: var(--color-sand); margin-top: 0.2rem; font-family: var(--font-body); }
.mega-item:hover .mega-item-label { color: var(--color-gold); }

/* Donate button */
.nav-actions { display: flex; align-items: center; gap: 0.75rem; flex-shrink: 0; }
.nav-donate {
  font-family: var(--font-heading);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: var(--color-gold);
  color: var(--color-obsidian);
  padding: 0.55rem 1.2rem;
  text-decoration: none;
  transition: background 0.3s, transform 0.2s;
  font-weight: 700;
}
.nav-donate:hover { background: var(--color-gold-light); transform: translateY(-1px); }

/* Hamburger */
.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.4rem;
}
.hamburger span { display: block; width: 22px; height: 2px; background: var(--color-linen); transition: background 0.3s ease, transform 0.3s ease, opacity 0.3s ease; }

/* Mobile menu */
.mobile-menu {
  position: fixed;
  top: 0; right: -100%;
  width: min(340px, 90vw);
  height: 100vh;
  background: var(--color-charcoal);
  border-left: 1px solid var(--color-gold-dark);
  z-index: 1100;
  transition: right 0.35s ease;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  gap: 0;
}
.mobile-menu.open { right: 0; }
.mobile-menu-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1.2rem 1.5rem;
  border-bottom: 1px solid var(--color-gold-dark);
}
.mobile-menu-header span { font-family: var(--font-heading); color: var(--color-cream); font-size: 0.9rem; flex: 1; }
.mobile-menu-close { background: none; border: none; color: var(--color-linen); font-size: 1.2rem; cursor: pointer; padding: 0.3rem; }
.mobile-menu-links { padding: 1rem 0; flex: 0 0 auto; overflow-y: auto; max-height: calc(100vh - 80px - 68px); }
.mobile-menu .nav-link { display: block; padding: 0.9rem 1.5rem; border-bottom: 1px solid rgba(201,162,39,0.1); font-size: 0.8rem; }
.mobile-nav-group { border-bottom: 1px solid rgba(201,162,39,0.1); }
.mobile-nav-parent {
  display: flex; width: 100%; align-items: center; justify-content: space-between;
  padding: 0.9rem 1.5rem;
  background: none; border: none; color: var(--color-linen);
  font-family: var(--font-heading); font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase;
  cursor: pointer;
}
.mobile-nav-parent:hover { color: var(--color-gold); }
.mobile-nav-children { display: none; background: rgba(0,0,0,0.2); }
.mobile-nav-group.open .mobile-nav-children { display: block; }
.mobile-sub-link { display: block; padding: 0.7rem 2rem; color: var(--color-sand); font-family: var(--font-body); font-size: 0.88rem; text-decoration: none; }
.mobile-sub-link:hover { color: var(--color-gold); }
.mobile-donate-btn {
  display: block; margin: 1rem 1.5rem 1.5rem;
  background: var(--color-gold); color: var(--color-obsidian);
  text-align: center; padding: 1rem; font-family: var(--font-heading);
  font-size: 0.8rem; letter-spacing: 0.12em; text-decoration: none; font-weight: 700;
}

/* Social links */
.social-link {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  border: 1px solid var(--color-gold-dark);
  color: var(--color-linen);
  text-decoration: none;
  transition: background 0.3s ease, transform 0.3s ease, opacity 0.3s ease;
  border-radius: 4px;
}
.social-link:hover { border-color: var(--color-gold); }
.social-link.social-yt:hover { color: #FF0000; border-color: #FF0000; }
.social-link.social-tw:hover { color: #9146FF; border-color: #9146FF; }
.social-link.social-email:hover { color: var(--color-gold); }

/* Directions modal */
#directions-modal { display: none; position: fixed; inset: 0; z-index: 9999; align-items: center; justify-content: center; }
#directions-modal.open { display: flex; }
.dir-modal-overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.7); backdrop-filter: blur(4px); }
.dir-modal-box {
  position: relative; z-index: 1;
  background: var(--color-charcoal); border: 1px solid var(--color-gold);
  padding: 2.5rem 2rem; min-width: 280px; text-align: center;
}
.dir-modal-title { font-family: var(--font-heading); color: var(--color-gold); letter-spacing: 0.15em; text-transform: uppercase; font-size: 0.9rem; margin-bottom: 1.5rem; }
.dir-modal-btns { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
.dir-btn {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.9rem 1.5rem; text-decoration: none;
  font-family: var(--font-heading); font-size: 0.8rem; letter-spacing: 0.1em;
  border: 1px solid var(--color-gold-dark); color: var(--color-cream);
  transition: background 0.3s ease, transform 0.3s ease, opacity 0.3s ease; background: var(--color-earth);
}
.dir-btn:hover { background: var(--color-gold); color: var(--color-obsidian); border-color: var(--color-gold); }
.dir-close {
  position: absolute; top: 0.75rem; right: 0.75rem;
  background: none; border: none; color: var(--color-sand); cursor: pointer; font-size: 1rem; padding: 0.3rem;
}
.dir-close:hover { color: var(--color-gold); }

/* Animated donate button */
.btn-donate-animated {
  display: inline-block;
  background: var(--color-gold);
  color: var(--color-obsidian);
  font-family: var(--font-heading);
  font-size: 0.85rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 1rem 2.5rem;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  font-weight: 700;
  transition: transform 0.3s;
  box-shadow: 0 0 0 0 rgba(201,162,39,0.5);
  animation: donateGlow 2.5s ease-in-out infinite;
}
@keyframes donateGlow {
  0%,100% { box-shadow: 0 0 0 0 rgba(201,162,39,0.5); }
  50% { box-shadow: 0 0 24px 6px rgba(201,162,39,0.3); }
}
.btn-donate-animated:hover { transform: translateY(-3px); background: var(--color-gold-light); }
.btn-donate-animated::before {
  content: '';
  position: absolute; top: 0; left: -100%; width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent);
  animation: shimmerSlide 2.5s ease-in-out infinite;
}
@keyframes shimmerSlide { 0% { left: -100%; } 50%,100% { left: 150%; } }

/* Schedule icon SVG styles */
.schedule-svg-icon {
  width: 52px; height: 52px;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 0.75rem;
  color: var(--color-gold);
}
.schedule-svg-icon svg { width: 100%; height: 100%; }

/* Mobile responsive */
@media (max-width: 1024px) {
  .nav-links { display: none; }
  .hamburger { display: flex; }
}
@media (max-width: 640px) {
  .announcement-bar { font-size: 0.65rem; gap: 0.75rem; }
  .nav-container { height: 60px; }
}

/* ── Event list with day-of-week + Hebrew date ── */
.event-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.2rem;
  border-bottom: 1px solid rgba(201,162,39,0.12);
  flex-wrap: wrap;
}
.event-item:last-child { border-bottom: none; }
.event-date-badge { flex-shrink: 0; text-align: center; min-width: 60px; }
.event-date-day { font-family: var(--font-display); font-size: 2rem; color: var(--color-gold); line-height: 1; }
.event-date-month { font-family: var(--font-heading); font-size: 0.65rem; letter-spacing: 0.1em; color: var(--color-sand); }
.event-date-dow {
  font-family: var(--font-heading); font-size: 0.7rem; letter-spacing: 0.1em;
  color: var(--color-gold-light); text-transform: uppercase;
  border: 1px solid var(--color-gold-dark); padding: 0.2rem 0.6rem;
  flex-shrink: 0;
}
.event-heb-date {
  font-family: var(--font-hebrew); font-size: 0.9rem; color: var(--color-sand);
  direction: rtl; flex-shrink: 0; white-space: nowrap;
}
.event-title { font-family: var(--font-heading); color: var(--color-cream); font-size: 0.95rem; letter-spacing: 0.05em; }
.event-time { font-size: 0.82rem; color: var(--color-sand); margin-top: 0.2rem; }

/* ── Directions button on address text ── */
.address-link {
  background: none; border: none; cursor: pointer;
  font-family: inherit; font-size: inherit;
  color: var(--color-gold); text-decoration: underline;
  text-align: center; line-height: 1.6;
}
.address-link:hover { color: var(--color-gold-light); }

/* ============================================================
   FIXES PASS 2 — All 44 items
   ============================================================ */

/* ── Fix: Pillars force 4 columns, responsive ── */
.pillars-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 2rem !important;
}
@media (max-width: 1100px) { .pillars-grid { grid-template-columns: repeat(2, 1fr) !important; } }
@media (max-width: 600px) { .pillars-grid { grid-template-columns: 1fr !important; } }

/* ── Fix: Leadership cards wider ── */
.leaders-grid {
  grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)) !important;
}
@media (max-width: 860px) { .leaders-grid { grid-template-columns: 1fr !important; } }

.leader-info p { font-size: 1rem !important; line-height: 1.8 !important; }

/* ── Fix: Large animated CTA buttons (leadership page) ── */
.btn-large-animated {
  display: inline-flex; align-items: center; gap: 0.6rem;
  padding: 1.1rem 2.5rem;
  font-family: var(--font-heading); font-size: 0.85rem; letter-spacing: 0.15em; text-transform: uppercase;
  text-decoration: none; border: none; cursor: pointer;
  position: relative; overflow: hidden;
  transition: transform 0.3s, box-shadow 0.3s;
}
.btn-large-animated::before {
  content: ''; position: absolute; top: 0; left: -100%; width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
  animation: shimmerSlide 2.5s ease-in-out infinite;
}
.btn-large-animated:hover { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(0,0,0,0.3); }
.btn-large-animated.gold { background: var(--color-gold); color: var(--color-obsidian); }
.btn-large-animated.outline { background: transparent; color: var(--color-gold); border: 1px solid var(--color-gold); }
.btn-large-animated.outline:hover { background: var(--color-gold); color: var(--color-obsidian); }

/* ── Fix: Calendar view toggle ── */
.cal-view-tabs { display: flex; gap: 0; border: 1px solid var(--color-gold-dark); max-width: fit-content; margin: 0 auto 2rem; }
.cal-view-tab {
  padding: 0.65rem 1.5rem; font-family: var(--font-heading); font-size: 0.75rem;
  letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer;
  background: transparent; border: none; color: var(--color-sand);
  border-right: 1px solid var(--color-gold-dark); transition: background 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease, opacity 0.25s ease;
}
.cal-view-tab:last-child { border-right: none; }
.cal-view-tab.active { background: var(--color-gold); color: var(--color-obsidian); }
.cal-view-tab:not(.active):hover { color: var(--color-gold); }

.cal-view-panel { display: none; }
.cal-view-panel.active { display: block; }

/* Calendar legend collapsible */
.cal-legend { border: 1px solid var(--color-gold-dark); margin-bottom: 2rem; }
.cal-legend-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.85rem 1.5rem; cursor: pointer; background: var(--color-earth);
  font-family: var(--font-heading); font-size: 0.8rem; letter-spacing: 0.1em; color: var(--color-gold);
}
.cal-legend-header:hover { background: rgba(201,162,39,0.08); }
.cal-legend-body { padding: 1rem 1.5rem; display: flex; flex-wrap: wrap; gap: 1rem; }
.cal-legend.collapsed .cal-legend-body { display: none; }
.cal-legend-item { display: flex; align-items: center; gap: 0.6rem; font-size: 0.85rem; color: var(--color-linen); }
.cal-legend-dot { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; }

/* Calendar search + filter bar */
.cal-controls {
  display: flex; gap: 1rem; flex-wrap: wrap; align-items: center;
  margin-bottom: 1.5rem; padding: 1.2rem 1.5rem;
  background: var(--color-charcoal); border: 1px solid var(--color-gold-dark);
}
.cal-search {
  flex: 1; min-width: 200px; padding: 0.65rem 1rem;
  background: var(--color-obsidian); border: 1px solid var(--color-gold-dark);
  color: var(--color-cream); font-family: var(--font-body); font-size: 0.95rem;
}
.cal-search::placeholder { color: var(--color-sand); }
.cal-search:focus { outline: none; border-color: var(--color-gold); }
.cal-filter-select {
  padding: 0.65rem 1rem; background: var(--color-obsidian);
  border: 1px solid var(--color-gold-dark); color: var(--color-cream);
  font-family: var(--font-body); font-size: 0.9rem; cursor: pointer;
}
.cal-filter-select:focus { outline: none; border-color: var(--color-gold); }

/* Print CSS */
@media print {
  .announcement-bar, #navbar, .mobile-menu, #cookie-banner,
  #back-to-top, .hero, .camel-divider, .ornament-divider,
  .cal-controls, .cal-view-tabs, footer, .btn, .btn-outline, .btn-gold { display: none !important; }
  body { background: white !important; color: #000 !important; font-size: 10pt; }
  .calendar-grid { display: block !important; }
  .calendar-grid .cal-day { break-inside: avoid; border: 1px solid #ccc; margin: 2px; padding: 4px; float: left; width: 13%; font-size: 8pt; }
  .event-badge { display: block; font-size: 7pt; margin: 1px 0; padding: 1px 3px; border-radius: 2px; }
  h1,h2,h3 { color: #000 !important; }
  .section-label, .event-title, .event-heb-date { color: #333 !important; }
  * { box-shadow: none !important; text-shadow: none !important; }
}

/* Zmanim section */
.zmanim-section { background: var(--color-obsidian); padding: 5rem 2rem; }
.zmanim-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1.2rem; max-width: 1000px; margin: 0 auto; }
.zmanim-card { background: var(--color-charcoal); border: 1px solid rgba(201,162,39,.2); padding: 1.2rem; text-align: center; }
.zmanim-card h5 { font-family: var(--font-heading); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-gold); margin-bottom: 0.3rem; }
.zmanim-time { font-family: var(--font-display); font-size: 1.4rem; color: var(--color-cream); margin: 0.3rem 0; }
.zmanim-note { font-size: 0.78rem; color: var(--color-sand); line-height: 1.4; }
.zmanim-location { font-family: var(--font-heading); font-size: 0.7rem; letter-spacing: 0.1em; color: var(--color-sand); text-align: center; margin-top: 1rem; }

/* Siddur / prayer sections */
.siddur-section { background: var(--color-earth); padding: 5rem 2rem; }
.siddur-tabs { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 2rem; }
.siddur-tab {
  padding: 0.55rem 1.2rem; font-family: var(--font-heading); font-size: 0.72rem;
  letter-spacing: 0.1em; cursor: pointer; background: transparent;
  border: 1px solid rgba(201,162,39,.3); color: var(--color-sand); transition: background 0.2s ease, transform 0.2s ease, opacity 0.2s ease;
}
.siddur-tab.active, .siddur-tab:hover { background: var(--color-gold); color: var(--color-obsidian); border-color: var(--color-gold); }
.siddur-panel { display: none; }
.siddur-panel.active { display: block; }
.prayer-block {
  background: var(--color-charcoal); border-left: 3px solid var(--color-gold);
  padding: 1.5rem 2rem; margin-bottom: 1.2rem;
}
.prayer-block h5 { font-family: var(--font-heading); color: var(--color-gold); font-size: 0.85rem; letter-spacing: 0.1em; margin-bottom: 0.3rem; }
.prayer-block .prayer-hebrew { font-family: var(--font-hebrew); direction: rtl; font-size: 1.1rem; color: var(--color-cream); margin-bottom: 0.5rem; line-height: 1.9; }
.prayer-block .prayer-english { color: var(--color-linen); font-style: italic; font-size: 0.95rem; line-height: 1.7; }
.prayer-block .prayer-time { font-size: 0.75rem; color: var(--color-sand); font-family: var(--font-heading); letter-spacing: 0.08em; margin-top: 0.5rem; }

/* Bracha index */
.bracha-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.2rem; max-width: 1000px; margin: 0 auto; }
.bracha-card { background: var(--color-charcoal); border: 1px solid rgba(201,162,39,.2); padding: 1.5rem; }
.bracha-card h5 { color: var(--color-gold); font-family: var(--font-heading); font-size: 0.8rem; letter-spacing: 0.1em; margin-bottom: 0.4rem; }
.bracha-card .bracha-heb { font-family: var(--font-hebrew); direction: rtl; color: var(--color-cream); font-size: 1rem; margin-bottom: 0.4rem; line-height: 1.8; }
.bracha-card .bracha-eng { color: var(--color-linen); font-size: 0.88rem; line-height: 1.6; }
.bracha-card .bracha-when { font-size: 0.75rem; color: var(--color-sand); margin-top: 0.5rem; font-style: italic; }

/* Custom select / dropdown */
.custom-select-wrap { position: relative; }
.custom-select-wrap select {
  appearance: none; -webkit-appearance: none;
  width: 100%; padding: 0.85rem 3rem 0.85rem 1rem;
  background: var(--color-obsidian); border: 1px solid rgba(201,162,39,0.3);
  color: var(--color-cream); font-family: var(--font-body); font-size: 1rem;
  cursor: pointer; transition: border-color 0.3s;
}
.custom-select-wrap select:focus { outline: none; border-color: var(--color-gold); }
.custom-select-wrap::after {
  content: '▾'; position: absolute; right: 1rem; top: 50%;
  transform: translateY(-50%); color: var(--color-gold);
  pointer-events: none; font-size: 0.85rem;
}
.custom-select-wrap select option { background: var(--color-charcoal); color: var(--color-cream); }

/* Resources interactive DB */
.resource-db-controls {
  display: flex; gap: 1rem; flex-wrap: wrap; align-items: center;
  margin-bottom: 2rem; padding: 1.2rem 1.5rem;
  background: var(--color-charcoal); border: 1px solid var(--color-gold-dark);
  position: sticky; top: 140px; z-index: 40;
}
.resource-search {
  flex: 1; min-width: 200px; padding: 0.65rem 1rem;
  background: var(--color-obsidian); border: 1px solid var(--color-gold-dark);
  color: var(--color-cream); font-family: var(--font-body); font-size: 0.95rem;
}
.resource-search::placeholder { color: var(--color-sand); }
.resource-search:focus { outline: none; border-color: var(--color-gold); }
.resource-filter {
  padding: 0.65rem 1rem; background: var(--color-obsidian);
  border: 1px solid var(--color-gold-dark); color: var(--color-cream);
  font-family: var(--font-body); font-size: 0.88rem; cursor: pointer;
  appearance: none; -webkit-appearance: none;
}
.resource-filter:focus { outline: none; border-color: var(--color-gold); }
.resource-count { font-family: var(--font-heading); font-size: 0.72rem; letter-spacing: 0.1em; color: var(--color-sand); white-space: nowrap; }
.resource-card.hidden { display: none !important; }

/* Blog post cards */
.post-read-time { font-size: 0.78rem; color: var(--color-sand); font-family: var(--font-heading); letter-spacing: 0.08em; }
.post-card-img { width: 100%; height: 180px; object-fit: cover; display: block; background: var(--color-obsidian); }

/* About page — interactive timeline */
.timeline::before {
  background: linear-gradient(to bottom, var(--color-gold), rgba(201,162,39,0.1)) !important;
  transition: none;
}
.timeline-dot {
  transition: transform 0.4s, box-shadow 0.4s;
  background: var(--color-charcoal) !important;
  border: 2px solid var(--color-gold) !important;
}
.timeline-dot.lit {
  background: var(--color-gold) !important;
  box-shadow: 0 0 20px var(--color-gold), 0 0 40px rgba(201,162,39,0.4) !important;
  transform: scale(1.3);
}
.timeline-item { opacity: 0.4; transition: opacity 0.5s; }
.timeline-item.lit { opacity: 1; }

/* Mobile universal fixes */
@media (max-width: 768px) {
  .partner-cards { grid-template-columns: 1fr !important; }
  .watch-cards { grid-template-columns: 1fr !important; }
  .shamoshim-grid { grid-template-columns: 1fr !important; }
  .contact-grid { grid-template-columns: 1fr !important; }
  .about-grid { grid-template-columns: 1fr !important; }
  .about-image-stack { display: none; }
  .partner-tiles { grid-template-columns: repeat(3, 1fr) !important; }
  .news-tiles { grid-template-columns: repeat(3, 1fr) !important; }
  .zmanim-grid { grid-template-columns: repeat(2, 1fr); }
  .bracha-grid { grid-template-columns: 1fr; }
  .featured-grid { grid-template-columns: 1fr !important; }
  .movement-inner { grid-template-columns: 1fr !important; }
  .cal-controls { flex-direction: column; }
  .resource-db-controls { flex-direction: column; }
  .schedule-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .btn-large-animated { width: 100%; justify-content: center; }
}
@media (max-width: 480px) {
  .partner-tiles, .news-tiles { grid-template-columns: repeat(2, 1fr) !important; }
  .schedule-grid { grid-template-columns: 1fr !important; }
  .pillars-grid { grid-template-columns: 1fr !important; }
}

/* ============================================================
   GLOBAL FIXES — PASS 3 (91 items)
   ============================================================ */

/* #2 — Replace ornament dividers with simple line */
.ornament-divider {
  display: flex !important;
  align-items: center !important;
  padding: 0 !important;
  margin: 0 !important;
  height: 1px !important;
  background: rgba(201,162,39,0.25) !important;
  overflow: hidden !important;
}
.ornament-line, .ornament-symbol { display: none !important; }

/* Also kill any stray ✦ · ✦ text rendered as dividers */
.ornament { display: none !important; }

/* Simple gold rule helper */
.gold-rule {
  width: 100%; height: 1px;
  background: rgba(201,162,39,0.25);
  border: none; margin: 0;
}

/* #5 — Universal animated button base */
.btn, .btn-primary, .btn-secondary, .btn-outline, .btn-gold,
.btn-large-animated, .shamosh-btn, .partner-link, .dir-btn {
  position: relative;
  overflow: hidden;
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease, color 0.25s ease !important;
  cursor: pointer;
}
.btn::after, .btn-primary::after, .btn-secondary::after,
.btn-gold::after, .btn-outline::after, .btn-large-animated::after,
.shamosh-btn::after, .partner-link::after {
  content: '';
  position: absolute;
  top: 0; left: -100%; width: 50%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
  transition: left 0.5s ease;
  pointer-events: none;
}
.btn:hover::after, .btn-primary:hover::after, .btn-secondary:hover::after,
.btn-gold:hover::after, .btn-outline:hover::after, .btn-large-animated:hover::after,
.shamosh-btn:hover::after, .partner-link:hover::after { left: 150%; }
.btn:hover, .btn-primary:hover, .btn-secondary:hover,
.btn-gold:hover, .btn-large-animated:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,0.3); }

/* Remove camel-divider */
.camel-divider { display: none !important; }

/* Partner & news tiles — standardized square rounded */
.partner-tile, .news-tile {
  aspect-ratio: 1 !important;
  border-radius: 16px !important;
  min-height: 110px !important;
  max-height: 130px !important;
  border: 1px solid rgba(201,162,39,0.3) !important;
  background: var(--color-charcoal) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.4rem !important;
  padding: 0.8rem !important;
  text-decoration: none !important;
  transition: background 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease, opacity 0.3s ease !important;
}
.partner-tile:hover, .news-tile:hover {
  border-color: var(--color-gold) !important;
  transform: translateY(-4px) !important;
  box-shadow: 0 12px 30px rgba(0,0,0,0.4) !important;
}
.partner-tile-abbr {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-align: center;
  line-height: 1.2;
}
.news-tile-logo {
  font-family: var(--font-heading) !important;
  font-weight: 900 !important;
  font-size: 1.2rem !important;
  text-align: center !important;
  line-height: 1.2 !important;
}
/* Remove redundant name under tiles that use abbr */
.partner-tile-name, .news-tile-name, .news-tile-desc { display: none !important; }

/* Leader photo — vertical oval portrait */
.shamosh-photo {
  width: 100px !important;
  height: 130px !important;
  border-radius: 50px !important;
  overflow: hidden !important;
  border: 2px solid var(--color-gold) !important;
  margin-bottom: 1rem !important;
  flex-shrink: 0 !important;
}
.shamosh-photo img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center top !important;
}
.leader-photo {
  width: 100% !important;
  height: 260px !important;
}
.leader-photo img {
  clip-path: none !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center top !important;
}

/* Event row in upcoming list */
.event-item {
  display: grid !important;
  grid-template-columns: 70px 1px auto 1px 1fr !important;
  gap: 0 1rem !important;
  align-items: center !important;
  padding: 1rem 1.5rem !important;
  border-bottom: 1px solid rgba(201,162,39,0.1) !important;
  cursor: pointer !important;
  transition: background 0.2s !important;
}
.event-item:hover { background: rgba(201,162,39,0.05) !important; }
.event-divider { width: 1px; height: 40px; background: rgba(201,162,39,0.3); flex-shrink: 0; }
.event-date-col { display: flex; flex-direction: column; align-items: center; text-align: center; }
.event-date-dow { font-family: var(--font-heading); font-size: 0.65rem; letter-spacing: 0.15em; color: var(--color-gold); text-transform: uppercase; }
.event-date-greg { font-family: var(--font-heading); font-size: 0.78rem; color: var(--color-linen); }
.event-heb-col { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; }
.event-heb-date { font-family: var(--font-hebrew); font-size: 0.9rem; color: var(--color-sand); direction: rtl; }
.event-info-col { display: flex; flex-direction: column; justify-content: center; }
.event-title { font-family: var(--font-heading); font-size: 0.9rem; color: var(--color-cream); letter-spacing: 0.04em; }
.event-time { font-size: 0.8rem; color: var(--color-sand); margin-top: 0.2rem; }

/* Quick-view popup */
.quick-view-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.75);
  backdrop-filter: blur(6px); z-index: 5000;
  display: flex; align-items: center; justify-content: center; padding: 2rem;
}
.quick-view-overlay.hidden { display: none; }
.quick-view-box {
  background: var(--color-charcoal); border: 1px solid var(--color-gold);
  max-width: 500px; width: 100%; padding: 2.5rem; position: relative;
  animation: fadeInUp 0.25s ease;
}
@keyframes fadeInUp { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:translateY(0); } }
.quick-view-close {
  position: absolute; top: 1rem; right: 1rem;
  background: none; border: none; color: var(--color-sand);
  font-size: 1.2rem; cursor: pointer; padding: 0.25rem;
}
.quick-view-close:hover { color: var(--color-gold); }
.quick-view-cat { font-family: var(--font-heading); font-size: 0.68rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--color-gold); margin-bottom: 0.5rem; }
.quick-view-title { font-family: var(--font-heading); font-size: 1.4rem; color: var(--color-cream); margin-bottom: 0.5rem; }
.quick-view-dates { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; margin-bottom: 0.75rem; }
.quick-view-greg { font-size: 0.9rem; color: var(--color-linen); }
.quick-view-heb { font-family: var(--font-hebrew); font-size: 1rem; color: var(--color-gold); direction: rtl; }
.quick-view-time { font-family: var(--font-heading); font-size: 0.82rem; color: var(--color-sand); margin-bottom: 1rem; }
.quick-view-desc { color: var(--color-linen); line-height: 1.8; font-size: 0.93rem; margin-bottom: 1.5rem; }
.quick-view-actions { display: flex; gap: 0.75rem; flex-wrap: wrap; }

/* Inline newsletter subscribe */
.inline-newsletter { display: flex; gap: 0; max-width: 420px; margin: 1.5rem auto 0; }
.inline-newsletter input {
  flex: 1; padding: 0.85rem 1rem;
  background: var(--color-obsidian); border: 1px solid var(--color-gold-dark);
  border-right: none; color: var(--color-cream);
  font-family: var(--font-body); font-size: 0.95rem;
}
.inline-newsletter input::placeholder { color: var(--color-sand); }
.inline-newsletter input:focus { outline: none; border-color: var(--color-gold); }
.inline-newsletter button {
  padding: 0.85rem 1.5rem; background: var(--color-gold);
  color: var(--color-obsidian); font-family: var(--font-heading);
  font-size: 0.75rem; letter-spacing: 0.1em; border: none; cursor: pointer;
  transition: background 0.25s;
}
.inline-newsletter button:hover { background: var(--color-gold-light); }

/* Resources DB sticky fix */
.resource-db-controls {
  position: sticky !important;
  top: 70px !important;
  z-index: 100 !important;
}
.resource-tabs-section { display: none !important; } /* Remove non-functional tabs */

/* Calendar month grid fix */
.calendar-grid {
  display: grid !important;
  grid-template-columns: repeat(7,1fr) !important;
}
.cal-day { min-height: 85px !important; }

/* Compliance pages contact block */
.compliance-contact {
  background: var(--color-earth);
  border: 1px solid var(--color-gold-dark);
  border-left: 3px solid var(--color-gold);
  padding: 1.5rem 2rem;
  margin-top: 1.5rem;
}
.compliance-contact p { color: var(--color-linen); line-height: 1.8; margin-bottom: 0.4rem; font-size: 0.95rem; }
.compliance-contact a { color: var(--color-gold); }

/* ============================================================
   PASS 4 — Final polish
   ============================================================ */

/* Resource DB controls — not full bleed */
.resource-db-controls {
  position: sticky !important;
  top: 60px !important;
  z-index: 90 !important;
  max-width: 1100px !important;
  margin: 0 auto 2rem !important;
  border-radius: 4px !important;
  left: 0; right: 0;
}

/* All selects custom-styled */
select, .custom-select-wrap select, .cal-filter-select, .sid-select, .resource-filter {
  appearance: none !important;
  -webkit-appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23c9a227' stroke-width='1.5' fill='none'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 0.9rem center !important;
  padding-right: 2.5rem !important;
  cursor: pointer !important;
}

/* Service times in footer */
.footer-service-times {
  font-size: 0.78rem;
  color: var(--color-sand);
  line-height: 1.8;
  margin-top: 0.5rem;
}
.footer-service-times span {
  display: inline-block;
  color: var(--color-gold);
  font-family: var(--font-heading);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  margin-right: 0.3rem;
}

/* Upcoming events — fluid card style (restored) */
#upcoming-events-list .event-item {
  display: flex !important;
  align-items: center !important;
  gap: 1.5rem !important;
  padding: 1.2rem 1.8rem !important;
  border-bottom: 1px solid rgba(201,162,39,0.12) !important;
  cursor: pointer !important;
  transition: background 0.2s !important;
  grid-template-columns: unset !important;
}
#upcoming-events-list .event-item:hover { background: rgba(201,162,39,0.05) !important; }
#upcoming-events-list .event-date-col {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 68px;
}
#upcoming-events-list .event-date-num {
  font-family: var(--font-display);
  font-size: 2.4rem;
  color: var(--color-gold);
  line-height: 1;
}
#upcoming-events-list .event-date-month {
  font-family: var(--font-heading);
  font-size: 0.65rem;
  letter-spacing: 0.12em;
  color: var(--color-sand);
  text-transform: uppercase;
}
#upcoming-events-list .event-date-dow {
  font-family: var(--font-heading);
  font-size: 0.6rem;
  letter-spacing: 0.15em;
  color: var(--color-gold-light);
  text-transform: uppercase;
  margin-top: 0.15rem;
}

/* Partner / news tiles — identical square, text only */
.partner-tile, .news-tile {
  width: 110px !important;
  height: 110px !important;
  min-height: unset !important;
  max-height: unset !important;
  flex-shrink: 0 !important;
  padding: 0.6rem !important;
}
.partner-tile-abbr {
  font-size: 0.72rem !important;
  line-height: 1.3 !important;
  word-break: break-word !important;
  hyphens: auto !important;
}

/* Leadership photo — vertical oval portrait */
.shamosh-photo {
  width: 90px !important;
  height: 120px !important;
  border-radius: 45px !important;
}

/* Visit page layout */
.visit-page-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  max-width: 1100px;
  margin: 0 auto;
  align-items: start;
}
@media (max-width: 768px) { .visit-page-grid { grid-template-columns: 1fr; } }

/* Partners page cards */
.partner-list-card {
  background: var(--color-earth);
  border: 1px solid var(--color-gold-dark);
  padding: 1.5rem 2rem;
  display: flex;
  align-items: flex-start;
  gap: 1.5rem;
  transition: border-color 0.3s, transform 0.3s;
}
.partner-list-card:hover { border-color: var(--color-gold); transform: translateX(4px); }
.partner-list-card.local-badge::before {
  content: 'LOCAL';
  display: inline-block;
  font-family: var(--font-heading);
  font-size: 0.6rem;
  letter-spacing: 0.15em;
  background: var(--color-gold);
  color: var(--color-obsidian);
  padding: 0.2rem 0.5rem;
  margin-bottom: 0.5rem;
}
.plc-category {
  font-family: var(--font-heading);
  font-size: 0.65rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-gold);
  margin-bottom: 0.25rem;
}
.plc-name { font-size: 1.2rem; color: var(--color-cream); margin-bottom: 0.4rem; }
.plc-desc { color: var(--color-linen); font-size: 0.92rem; line-height: 1.7; flex: 1; }

/* Contact / Prayer form layout */
.form-page-grid {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 4rem;
  max-width: 1100px;
  margin: 0 auto;
  align-items: start;
  padding: 4rem 2rem;
}
@media (max-width: 800px) { .form-page-grid { grid-template-columns: 1fr; gap: 2rem; } }

/* Page hero — compact, no weirdness */
.page-hero-compact {
  background: var(--color-obsidian);
  padding: 6rem 2rem 3rem;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.page-hero-compact::before {
  content: '';
  position: absolute; inset: 0;
  opacity: 0.15;
  background-size: cover;
  background-position: center;
}
.page-hero-compact > * { position: relative; z-index: 1; }

/* Compliance contact block — clean, no yellow box */
.compliance-contact {
  background: var(--color-charcoal) !important;
  border: 1px solid var(--color-gold-dark) !important;
  border-left: 3px solid var(--color-gold) !important;
  padding: 1.5rem 2rem !important;
  margin-top: 2rem !important;
}

/* Print improvements */
@media print {
  * { -webkit-print-color-adjust: exact !important; color-adjust: exact !important; }
  .page-hero-compact, .page-hero-compact::before, #navbar, .announcement-bar,
  footer, #back-to-top, #cookie-banner, .btn, .btn-gold, .btn-outline,
  .cal-controls, .cal-view-tabs, .zmanim-section, .siddur-section,
  .camel-divider, .crown-display, .support-strip { display: none !important; }
  .calendar-grid { page-break-inside: avoid; }
  .cal-day { page-break-inside: avoid; min-height: 60px !important; font-size: 8pt; }
  .event-badge { font-size: 6pt !important; padding: 1px 2px !important; }
  h1,h2,h3,h4 { page-break-after: avoid; color: #000 !important; }
  .prayer-section { page-break-inside: avoid; }
  @page { margin: 1.5cm; size: A4; }
  @page landscape { size: A4 landscape; }
}

/* Sitemap consistent styling */
.sitemap-link { font-family: var(--font-body) !important; font-weight: normal !important; }

/* ============================================================
   PASS 5 — All remaining fixes + Light/Dark Mode
   ============================================================ */

/* ── LIGHT/DARK MODE ── */
:root {
  --color-obsidian: #0d0b08;
  --color-charcoal: #1a1510;
  --color-earth:    #2c1f12;
  --color-sand:     #8b6f47;
  --color-clay:     #a07850;
  --color-linen:    #d4b896;
  --color-cream:    #f0e6d3;
  --color-gold:     #c9a227;
  --color-gold-light: #e8c84a;
  --color-gold-dark: #8b6914;
  --color-bg-primary:   var(--color-obsidian);
  --color-bg-secondary: var(--color-charcoal);
  --color-bg-tertiary:  var(--color-earth);
  --color-text-primary: var(--color-cream);
  --color-text-secondary: var(--color-linen);
  --border-gold: 1px solid var(--color-gold-dark);
}

[data-theme="light"] {
  --color-obsidian:  #f5f0e8;
  --color-charcoal:  #ece4d4;
  --color-earth:     #e0d4be;
  --color-sand:      #7a5c35;
  --color-clay:      #6b4f2e;
  --color-linen:     #4a3520;
  --color-cream:     #1a0f05;
  --color-gold:      #8b6400;
  --color-gold-light:#a07800;
  --color-gold-dark: #c9a227;
  --color-bg-primary:   #f5f0e8;
  --color-bg-secondary: #ece4d4;
  --color-bg-tertiary:  #e0d4be;
  --color-text-primary: #1a0f05;
  --color-text-secondary: #4a3520;
  --border-gold: 1px solid #c9a227;
}

[data-theme="light"] body { background: #f5f0e8; color: #1a0f05; }
/* light-mode navbar at top: handled by v8.0 block (transparent) */
[data-theme="light"] #navbar.scrolled { background: rgba(235,228,210,0.97) !important; backdrop-filter: blur(18px) !important; box-shadow: 0 2px 20px rgba(0,0,0,0.1) !important; border-bottom: 1px solid #c9a227 !important; }
[data-theme="light"] .nav-link { color: #4a3520 !important; }
[data-theme="light"] .nav-link:hover { color: #8b6400 !important; }
[data-theme="light"] .hero-overlay { background: rgba(245,240,232,0.55) !important; }
[data-theme="light"] .hero-title, [data-theme="light"] .section-title, [data-theme="light"] .shimmer-text { color: #1a0f05 !important; }
[data-theme="light"] .hero-subtitle, [data-theme="light"] .section-subtitle { color: #4a3520 !important; }
[data-theme="light"] .section-label { color: #8b6400 !important; }
[data-theme="light"] .about-text, [data-theme="light"] .partner-desc, [data-theme="light"] .watch-desc { color: #4a3520 !important; }
[data-theme="light"] .accordion-header { background: #ece4d4 !important; color: #1a0f05 !important; border-color: #c9a227 !important; }
[data-theme="light"] .accordion-body { background: #f0e8d8 !important; }
[data-theme="light"] .schedule-strip { background: #e8dfc8 !important; }
[data-theme="light"] .schedule-item { border-color: rgba(139,100,0,0.2) !important; }
[data-theme="light"] .watch-card { background: #ece4d4 !important; border-color: #c9a227 !important; }
[data-theme="light"] .upcoming-wrapper { background: #ece4d4 !important; border-color: #c9a227 !important; }
[data-theme="light"] .shamosh-card { background: #e8dfc8 !important; border-color: #c9a227 !important; }
[data-theme="light"] .partner-tile, [data-theme="light"] .news-tile { background: #ece4d4 !important; border-color: #c9a227 !important; }
[data-theme="light"] footer { background: #e0d4be !important; }
[data-theme="light"] .footer-upper { background: #e0d4be !important; }
[data-theme="light"] .footer-lower { background: #d4c8a8 !important; border-color: #c9a227 !important; }
[data-theme="light"] .footer-copy, [data-theme="light"] .footer-link { color: #4a3520 !important; }
[data-theme="light"] .mega-dropdown { background: rgba(245,240,232,0.98) !important; }
[data-theme="light"] .mega-item-label { color: #1a0f05 !important; }
[data-theme="light"] .mega-item-desc { color: #7a5c35 !important; }
[data-theme="light"] .cal-day { background: #ece4d4 !important; border-color: rgba(139,100,0,0.15) !important; }
[data-theme="light"] .cal-day.today { background: rgba(139,100,0,0.12) !important; border-color: #8b6400 !important; }
[data-theme="light"] .prayer-card { background: #ece4d4 !important; border-color: rgba(139,100,0,0.2) !important; }
[data-theme="light"] .resource-card { background: #e8dfc8 !important; }
[data-theme="light"] .gold-rule { background: rgba(139,100,0,0.3) !important; }
[data-theme="light"] .gold-rule { background: rgba(139,100,0,0.3) !important; }

/* Theme toggle button */
.theme-toggle {
  display: flex; align-items: center; gap: 0.4rem;
  background: none; border: 1px solid rgba(201,162,39,0.4);
  color: var(--color-linen); cursor: pointer;
  padding: 0.35rem 0.75rem; font-size: 0.7rem;
  font-family: var(--font-heading); letter-spacing: 0.08em;
  transition: background 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease, opacity 0.25s ease; border-radius: 2px; flex-shrink: 0;
}
.theme-toggle:hover { border-color: var(--color-gold); color: var(--color-gold); }
[data-theme="light"] .theme-toggle { color: #4a3520; border-color: rgba(139,100,0,0.4); }
[data-theme="light"] .theme-toggle:hover { border-color: #8b6400; color: #8b6400; }
.theme-toggle-icon { font-size: 0.85rem; }

/* ── UPCOMING EVENTS: fluid, no box ── */
.upcoming-wrapper {
  max-width: 860px !important;
  margin: 0 auto !important;
  background: transparent !important;
  border: none !important;
}

/* ── PARTNER/NEWS TILES: strict equal size ── */
.partner-tiles-row, .news-tiles-row {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.75rem !important;
  justify-content: center !important;
}
.partner-tile, .news-tile {
  width: 100px !important;
  height: 100px !important;
  min-height: unset !important;
  max-height: unset !important;
  aspect-ratio: unset !important;
  border-radius: 12px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0.5rem !important;
  flex-shrink: 0 !important;
}
.partner-tile-abbr {
  font-family: var(--font-heading) !important;
  font-size: 0.6rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
  text-align: center !important;
  line-height: 1.35 !important;
  word-break: break-word !important;
  overflow: hidden !important;
  max-width: 88px !important;
}

/* ── DIRECTIONS: fix URL ── */
/* Fixed in JS below */

/* ── LEADERSHIP: vertical oval on .leader-photo ── */
.leader-photo {
  width: 120px !important;
  height: 160px !important;
  border-radius: 60px !important;
  overflow: hidden !important;
  margin: 0 auto 1.2rem !important;
  border: 2px solid var(--color-gold) !important;
  flex-shrink: 0 !important;
}
.leader-photo img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center top !important;
  clip-path: none !important;
}
.leader-photo-overlay { display: none !important; }
.leader-card { text-align: center !important; display: flex !important; flex-direction: column !important; align-items: center !important; }

/* ── FOUR PILLARS: Visual redesign ── */
.pillar-card {
  background: var(--color-earth) !important;
  border: none !important;
  border-radius: 4px !important;
  padding: 0 !important;
  overflow: hidden !important;
  transition: transform 0.3s ease, box-shadow 0.3s ease !important;
  display: flex !important;
  flex-direction: column !important;
}
.pillar-card:hover { transform: translateY(-8px) !important; box-shadow: 0 24px 60px rgba(0,0,0,0.4) !important; }
.pillar-card-top {
  background: linear-gradient(135deg, var(--color-gold-dark), var(--color-gold));
  padding: 1.5rem 2rem 1rem;
  display: flex; align-items: flex-start; justify-content: space-between;
}
.pillar-card-num {
  font-family: var(--font-display);
  font-size: 3rem;
  color: rgba(255,255,255,0.25);
  line-height: 1;
}
.pillar-card-icon { font-size: 2rem; }
.pillar-card-bottom { padding: 1.5rem 2rem 2rem; flex: 1; }
.pillar-card .pillar-label {
  font-family: var(--font-heading) !important;
  font-size: 0.68rem !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  color: var(--color-gold) !important;
  margin-bottom: 0.3rem !important;
  display: block !important;
}
.pillar-card h3 { font-size: 1.3rem !important; color: var(--color-cream) !important; margin-bottom: 0.75rem !important; }
.pillar-card p { color: var(--color-linen) !important; line-height: 1.8 !important; font-size: 0.95rem !important; }

/* ── TIMELINE: restore track line ── */
.timeline { position: relative !important; padding-left: 3rem !important; }
.timeline-track {
  position: absolute !important;
  left: 0.55rem !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 3px !important;
  background: rgba(201,162,39,0.15) !important;
  border-radius: 2px !important;
}
.timeline-track-fill {
  width: 100% !important;
  height: 0% !important;
  background: var(--color-gold) !important;
  border-radius: 2px !important;
  transition: height 0.05s linear !important;
}
.timeline-dot {
  position: absolute !important;
  left: -2.55rem !important;
  top: 0.4rem !important;
  width: 1.2rem !important;
  height: 1.2rem !important;
  border-radius: 50% !important;
  background: var(--color-charcoal) !important;
  border: 2px solid var(--color-gold) !important;
  z-index: 1 !important;
  transition: background 0.4s, box-shadow 0.4s, transform 0.4s !important;
}
.timeline-dot.lit {
  background: var(--color-gold) !important;
  box-shadow: 0 0 20px var(--color-gold), 0 0 40px rgba(201,162,39,0.4) !important;
  transform: scale(1.3) !important;
}
.timeline-item { opacity: 0.45 !important; transition: opacity 0.5s !important; }
.timeline-item.lit { opacity: 1 !important; }

/* ── RESOURCES: view toggles + controls styling ── */
/* Sticky outer shell — full-width, sits under navbar */
.res-controls-sticky-wrap {
  position: sticky;
  top: 94px;
  z-index: 90;
  background: var(--color-charcoal);
  padding: 1.25rem 2rem;
  border-bottom: 1px solid var(--color-gold-dark);
  box-shadow: 0 4px 20px rgba(0,0,0,0.4);
}
/* Inner widget — max-width box, no longer sticky itself */
.res-controls-wrap {
  max-width: 1100px;
  margin: 0 auto;
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center;
  position: static;
  box-shadow: none;
}
.res-search {
  flex: 1; min-width: 180px;
  padding: 0.6rem 1rem;
  background: var(--color-earth); border: 1px solid var(--color-gold-dark);
  color: var(--color-cream); font-family: var(--font-body); font-size: 0.9rem;
  border-radius: 3px;
}
.res-search:focus { outline: none; border-color: var(--color-gold); }
.res-search::placeholder { color: var(--color-sand); }
.res-select {
  padding: 0.6rem 2.2rem 0.6rem 0.9rem;
  background: var(--color-earth) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='0 0 10 7'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23c9a227' stroke-width='1.5' fill='none'/%3E%3C/svg%3E") no-repeat right 0.7rem center;
  border: 1px solid var(--color-gold-dark);
  color: var(--color-cream); font-family: var(--font-body); font-size: 0.85rem;
  appearance: none; -webkit-appearance: none; cursor: pointer; border-radius: 3px;
}
.res-select:focus { outline: none; border-color: var(--color-gold); }
.res-view-btns { display: flex; border: 1px solid var(--color-gold-dark); border-radius: 3px; overflow: hidden; }
.res-view-btn {
  padding: 0.55rem 0.85rem; background: transparent; border: none;
  color: var(--color-sand); font-size: 0.8rem; cursor: pointer;
  border-right: 1px solid var(--color-gold-dark); transition: background 0.2s ease, transform 0.2s ease, opacity 0.2s ease;
  display: flex; align-items: center; gap: 0.3rem;
}
.res-view-btn:last-child { border-right: none; }
.res-view-btn.active, .res-view-btn:hover { background: var(--color-gold); color: var(--color-obsidian); }
.res-count { font-family: var(--font-heading); font-size: 0.68rem; letter-spacing: 0.1em; color: var(--color-sand); white-space: nowrap; }

/* Resource grid/table/list views */
#res-view-grid .resource-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px,1fr)); gap: 1.5rem; }
#res-view-table { width: 100%; border-collapse: collapse; }
#res-view-table th { font-family: var(--font-heading); font-size: 0.72rem; letter-spacing: 0.12em; color: var(--color-gold); padding: 0.85rem 1rem; border-bottom: 2px solid var(--color-gold-dark); text-align: left; }
#res-view-table td { padding: 0.75rem 1rem; border-bottom: 1px solid rgba(201,162,39,0.1); color: var(--color-linen); font-size: 0.88rem; vertical-align: top; }
#res-view-table tr:hover td { background: rgba(201,162,39,0.04); }
#res-view-list .res-list-item { display: flex; gap: 1.5rem; padding: 0.9rem 0; border-bottom: 1px solid rgba(201,162,39,0.1); align-items: flex-start; }
#res-view-list .res-list-cat { font-family: var(--font-heading); font-size: 0.65rem; letter-spacing: 0.12em; color: var(--color-gold); text-transform: uppercase; width: 110px; flex-shrink: 0; padding-top: 0.1rem; }
#res-view-list .res-list-title { color: var(--color-cream); font-family: var(--font-heading); font-size: 0.88rem; margin-bottom: 0.2rem; }
#res-view-list .res-list-desc { color: var(--color-linen); font-size: 0.82rem; line-height: 1.5; }
.res-view-panel { display: none; }
.res-view-panel.active { display: block; }

/* ── PRAYER REQUEST page: two-column layout ── */
.pr-body { background: var(--color-charcoal); }
.pr-inner { max-width: 1100px; margin: 0 auto; padding: 4rem 2rem; display: grid; grid-template-columns: 1fr 1.5fr; gap: 4rem; align-items: start; }
@media(max-width:800px){ .pr-inner { grid-template-columns: 1fr; gap: 2rem; padding: 2.5rem 1.5rem; } }

/* ── SIDDUR: tradition filter ── */
.prayer-card[data-tradition="ashkenazi"],
.prayer-card[data-tradition="sephardic"] { display: none; }
[data-siddur-tradition="ashkenazi"] .prayer-card[data-tradition="ashkenazi"] { display: block; }
[data-siddur-tradition="sephardic"] .prayer-card[data-tradition="sephardic"] { display: block; }
[data-siddur-tradition="all"] .prayer-card { display: block; }

/* ── TORAH TABLE hero ── */
.tt-hero {
  min-height: 44vh; background: var(--color-obsidian);
  display: flex; align-items: center; justify-content: center;
  text-align: center; padding: 7rem 2rem 3.5rem;
  position: relative; overflow: hidden;
}
.tt-hero::before { content: ''; position: absolute; inset: 0; background: url('images/talit-torah.jpg') center/cover no-repeat; opacity: 0.18; }
.tt-hero-content { position: relative; z-index: 1; max-width: 760px; }
.tt-controls {
  display: flex; gap: 0.75rem; flex-wrap: wrap; align-items: center;
  max-width: 900px; margin: 0 auto 2rem; padding: 1rem 1.25rem;
  background: var(--color-earth); border: 1px solid var(--color-gold-dark); border-radius: 4px;
}
.tt-search {
  flex: 1; min-width: 180px; padding: 0.6rem 0.9rem;
  background: var(--color-obsidian); border: 1px solid var(--color-gold-dark);
  color: var(--color-cream); font-family: var(--font-body); font-size: 0.9rem; border-radius: 2px;
}
.tt-search:focus { outline: none; border-color: var(--color-gold); }
.tt-search::placeholder { color: var(--color-sand); }
.tt-filter-btn {
  padding: 0.5rem 1rem; background: transparent; border: 1px solid var(--color-gold-dark);
  color: var(--color-sand); font-family: var(--font-heading); font-size: 0.68rem;
  letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; transition: background 0.2s ease, transform 0.2s ease, opacity 0.2s ease; border-radius: 2px;
}
.tt-filter-btn.active, .tt-filter-btn:hover { background: var(--color-gold); color: var(--color-obsidian); border-color: var(--color-gold); }
.tt-sort {
  padding: 0.55rem 2rem 0.55rem 0.9rem;
  background: var(--color-earth) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='0 0 10 7'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23c9a227' stroke-width='1.5' fill='none'/%3E%3C/svg%3E") no-repeat right 0.6rem center;
  border: 1px solid var(--color-gold-dark); color: var(--color-cream);
  font-family: var(--font-body); font-size: 0.82rem; appearance: none; -webkit-appearance: none; cursor: pointer; border-radius: 2px;
}
.post-card.hidden { display: none !important; }

/* ── CALENDAR: print improvements ── */
@media print {
  * { -webkit-print-color-adjust: exact !important; color-adjust: exact !important; }
  .announcement-bar, #navbar, footer, .cal-controls, .cal-view-tabs,
  .zmanim-section, .siddur-section, #back-to-top, #cookie-banner,
  .cal-print-btn, .cal-month-btn, #zmanim-locate-btn { display: none !important; }
  .calendar-grid { page-break-inside: auto !important; }
  .cal-day { page-break-inside: avoid !important; min-height: 70px !important; font-size: 7.5pt !important; border: 0.5pt solid #ccc !important; }
  .event-badge { font-size: 6pt !important; padding: 1px 2px !important; margin: 1px 0 !important; page-break-inside: avoid !important; }
  .cal-days-header { page-break-after: avoid !important; }
  h1,h2,h3 { page-break-after: avoid !important; }
  @page { margin: 1.5cm; size: A4 portrait; }
  @page landscape { margin: 1cm; size: A4 landscape; }
  body.print-landscape { }
}

/* ============================================================
   PASS 6 — NAVBAR FINAL FIX + SITE-HEADER + THEME TOGGLE
   ============================================================ */

/* Fixed site-header wraps announcement bar + navbar */
#site-header {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 1000 !important;
}

/* Announcement bar inside fixed header */
#site-header .announcement-bar {
  position: relative !important;
  background: var(--color-earth) !important;
  color: var(--color-linen) !important;
  text-align: center !important;
  padding: 0.4rem 1.5rem !important;
  font-family: var(--font-heading) !important;
  font-size: 0.72rem !important;
  letter-spacing: 0.09em !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 1.5rem !important;
  flex-wrap: wrap !important;
  z-index: 999 !important;
}

/* Navbar inside fixed header — transparent by default, glass on scroll */
#site-header #navbar {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  z-index: 998 !important;
  background: transparent !important;
  transition: background 0.35s ease, backdrop-filter 0.35s ease, box-shadow 0.35s ease !important;
}

#site-header #navbar.scrolled {
  background: rgba(13,11,8,0.98) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  box-shadow: 0 2px 28px rgba(0,0,0,0.65) !important;
  border-bottom: 1px solid rgba(201,162,39,0.3) !important;
}

/* [v8.1] dead body padding-top removed — offset now lives in --header-h */
/* Hero gets full viewport height minus header */
.hero {
  height: calc(100vh - 88px) !important;
  min-height: 600px !important;
}

/* Nav container height */
#site-header .nav-container {
  height: 58px !important;
}

/* Theme toggle — matches donate button height */
.theme-toggle {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: none !important;
  border: 1px solid rgba(201,162,39,0.45) !important;
  color: var(--color-linen) !important;
  cursor: pointer !important;
  padding: 0 0.75rem !important;
  height: 32px !important;
  width: 38px !important;
  transition: background 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease, opacity 0.25s ease !important;
  border-radius: 2px !important;
  flex-shrink: 0 !important;
}
.theme-toggle:hover {
  border-color: var(--color-gold) !important;
  color: var(--color-gold) !important;
}
.theme-icon-svg {
  width: 16px !important;
  height: 16px !important;
  display: block !important;
  flex-shrink: 0 !important;
}

/* Donate button height to match */
.nav-donate {
  height: 32px !important;
  display: inline-flex !important;
  align-items: center !important;
  padding: 0 1.2rem !important;
}

/* Light mode nav overrides */
[data-theme="light"] #site-header #navbar {
  background: transparent !important;
}
[data-theme="light"] #site-header #navbar.scrolled {
  background: rgba(245,240,232,0.96) !important;
  backdrop-filter: blur(18px) !important;
  box-shadow: 0 2px 20px rgba(0,0,0,0.12) !important;
  border-bottom: 1px solid rgba(201,162,39,0.4) !important;
}
[data-theme="light"] #site-header .announcement-bar {
  background: var(--color-earth) !important;
}

/* Page-hero sections that used to need top padding — now handled by body padding-top */
.page-hero, .page-hero-compact, .watch-hero, .min-hero, .pr-hero,
.contact-hero, .about-hero, .lead-hero, .visit-hero, .resource-hero,
.cal-hero, .siddur-hero, .tt-hero {
  margin-top: 0 !important;
}

/* Mobile: collapse announcement bar */
@media (max-width: 640px) {
  #site-header .announcement-bar { display: none !important; }
  .hero { height: calc(100vh - 58px) !important; }
}

/* ============================================================
   PERFORMANCE PASS — GPU hints, paint optimization
   ============================================================ */

/* Promote navbar to own GPU layer - prevents repaints of page content */
#site-header {
  will-change: transform;
  transform: translateZ(0);
}

/* Hero video - GPU composited layer */
.hero-video {
  will-change: transform;
  transform: translateZ(0);
}

/* Page hero background for parallax - own layer */
.page-hero-bg {
  will-change: transform;
  transform: translateZ(0);
}

/* Reduce backdrop-filter to only the scrolled navbar state
   (backdrop-filter on static elements forces GPU composite) */
.mega-dropdown,
.mobile-menu,
.directions-modal-box,
.cookie-banner {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Below-fold sections - defer paint until needed */
footer,
.partners-section,
.news-section,
.siddur-section,
.resource-db-section {
  content-visibility: auto;
  contain-intrinsic-size: 0 500px;
}

/* Reduce paint area on cards - they don't need to trigger full-page repaints */
.partner-card,
.news-card,
.leader-card,
.resource-card,
.event-card {
  contain: layout style;
  will-change: auto;
}

/* Scrollbar optimization */
* {
  -webkit-overflow-scrolling: touch;
}

/* ── Performance: respect reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ── Performance: pause infinite animations by default, play on visible ── */
.shimmer-gold {
  animation-play-state: paused;
}
.shimmer-gold.visible, .hero .shimmer-gold, h1.shimmer-gold, h2.shimmer-gold {
  animation-play-state: running;
}

.btn-donate-animated {
  animation-play-state: paused;
}
.btn-donate-animated:hover, .btn-donate-animated:focus,
section:not(.reveal) .btn-donate-animated,
.support-strip .btn-donate-animated {
  animation-play-state: running;
}

/* ══════════════════════════════════════════════
   HOMEPAGE FIXES — v7.4
   ══════════════════════════════════════════════ */

/* ── Navbar: solid on scroll, proper padding ── */
#navbar {
  padding: 0 2rem !important;
}
#site-header .nav-container {
  padding: 0 !important;
  height: 62px !important;
}
/* [v8.1] dead body padding-top removed — offset now lives in --header-h */
.hero {
  height: calc(100vh - 92px) !important;
  min-height: 580px !important;
}

/* ── Event cards: spacing between each card ── */
#upcoming-events-list .event-item {
  margin-bottom: 0.65rem !important;
  border-radius: 6px !important;
  border: 1px solid rgba(201,162,39,0.12) !important;
  background: var(--color-earth) !important;
  padding: 1rem 1.25rem !important;
  gap: 1.25rem !important;
  display: flex !important;
  align-items: center !important;
  cursor: pointer !important;
  transition: border-color 0.2s, background 0.2s !important;
}
#upcoming-events-list .event-item:last-child {
  margin-bottom: 0 !important;
}
#upcoming-events-list .event-item:hover {
  border-color: rgba(201,162,39,0.4) !important;
  background: rgba(44,31,18,0.9) !important;
}

/* ── Hebrew date column in event cards ── */
.event-heb-col {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 120px;
  flex-shrink: 0;
}
.event-heb-script {
  font-family: var(--font-hebrew);
  font-size: 0.85rem;
  color: var(--color-sand);
  direction: rtl;
  line-height: 1.3;
}
.event-heb-en {
  font-family: var(--font-heading);
  font-size: 0.68rem;
  color: var(--color-clay);
  letter-spacing: 0.06em;
  line-height: 1.3;
}

/* ── Partner & news tiles: larger, no word-break ── */
.partner-tiles-row,
.news-tiles-row {
  gap: 1rem !important;
}
.partner-tile,
.news-tile {
  width: 140px !important;
  height: 80px !important;
  min-height: unset !important;
  max-height: unset !important;
  aspect-ratio: unset !important;
  border-radius: 8px !important;
  padding: 0.75rem 1rem !important;
  flex-shrink: 0 !important;
}
.partner-tile-abbr {
  font-family: var(--font-heading) !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  text-align: center !important;
  line-height: 1.4 !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
  hyphens: none !important;
  white-space: normal !important;
  max-width: 128px !important;
}

/* ── Leadership section label update ── */
#leadership-heading ~ p.section-subtitle {
  /* Subtitle stays, just ensuring spacing */
}

/* ── Light mode: partner/news tiles ── */
[data-theme="light"] .partner-tile,
[data-theme="light"] .news-tile {
  background: #e0d4be !important;
  border-color: rgba(139,100,0,0.3) !important;
}

/* ── Hero video: ensure it fills without gap ── */
.hero-video-container {
  position: absolute !important;
  inset: 0 !important;
  overflow: hidden !important;
}
.hero-video {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

/* ══════════════════════════════════════════════
   HOMEPAGE FIXES — v7.5 (OVERRIDES EVERYTHING ABOVE)
   ══════════════════════════════════════════════ */

/* ── NAVBAR: transparent at top, solid on scroll ─────── */
/* The whole site-header is fixed; only the navbar bar itself animates */
#site-header {
  position: fixed !important;
  top: 0 !important; left: 0 !important; right: 0 !important;
  z-index: 1000 !important;
}

/* Announcement bar: always visible, always its own solid color */
#site-header .announcement-bar {
  background: var(--color-earth) !important;
  padding: 0.45rem 2rem !important;
  font-size: 0.72rem !important;
}

/* Navbar: fully transparent at top */
#site-header #navbar {
  background: transparent !important;
  transition: background 0.3s ease, box-shadow 0.3s ease !important;
  padding: 0 2rem !important;
}

/* Navbar inner container height + horizontal padding */
#site-header .nav-container {
  height: 64px !important;
  padding: 0 !important;
  max-width: 1400px !important;
  margin: 0 auto !important;
}

/* Scrolled: fully opaque solid black — no transparency */
#site-header #navbar.scrolled {
  background: #0d0b08 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: 0 2px 24px rgba(0,0,0,0.8) !important;
  border-bottom: 1px solid rgba(201,162,39,0.28) !important;
}

/* Light mode scrolled */
[data-theme="light"] #site-header #navbar.scrolled {
  background: #f5f0e8 !important;
  backdrop-filter: none !important;
  box-shadow: 0 2px 16px rgba(0,0,0,0.15) !important;
  border-bottom: 1px solid rgba(139,100,0,0.35) !important;
}

/* Body offset: announcement bar (~30px) + navbar (64px) = 94px */
.hero { height: calc(100vh - 94px) !important; min-height: 580px !important; }

/* Mobile: hide announcement bar, shorter offset */
@media (max-width: 768px) {
  #site-header .announcement-bar { display: none !important; }
  .hero { height: calc(100vh - 64px) !important; }
}

/* ── HERO VIDEO & FALLBACK ───────────────────────────── */
.hero-video-container {
  position: absolute !important;
  inset: 0 !important;
  overflow: hidden !important;
  background: #0d0b08 url('../images/jerusalem.jpg') center/cover no-repeat !important;
}
.hero-video {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
}

/* ── ONEG CHALICE ICON ───────────────────────────────── */
/* No CSS needed — SVG is inline; just ensuring sched-svg size is right */
.sched-svg {
  width: 48px !important;
  height: 48px !important;
}

/* ── EVENT CARDS: spacing + Hebrew date column ───────── */
#upcoming-events-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.6rem !important;
}
#upcoming-events-list .event-item {
  margin-bottom: 0 !important;
  border-radius: 6px !important;
  border: 1px solid rgba(201,162,39,0.15) !important;
  background: var(--color-earth) !important;
  padding: 1rem 1.25rem !important;
  gap: 1rem !important;
  display: flex !important;
  align-items: center !important;
  cursor: pointer !important;
  transition: border-color 0.2s, background 0.2s !important;
}
#upcoming-events-list .event-item:hover {
  border-color: rgba(201,162,39,0.45) !important;
  background: rgba(44,31,18,0.95) !important;
}

/* Hebrew date column styling */
.event-heb-col {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.12rem !important;
  min-width: 110px !important;
  flex-shrink: 0 !important;
}
.event-heb-script {
  font-family: var(--font-hebrew) !important;
  font-size: 0.82rem !important;
  color: var(--color-sand) !important;
  direction: rtl !important;
  line-height: 1.25 !important;
}
.event-heb-en {
  font-family: var(--font-heading) !important;
  font-size: 0.66rem !important;
  color: var(--color-clay) !important;
  letter-spacing: 0.05em !important;
  line-height: 1.25 !important;
}

/* ── PARTNER & NEWS TILES: larger, even grid, no orphans ── */
.partner-tiles-row,
.news-tiles-row {
  display: grid !important;
  gap: 0.9rem !important;
  justify-content: center !important;
  max-width: 860px !important;
  margin: 2rem auto !important;
}

/* Partners: 5 tiles, flexbox centered → natural centering, no orphan */
.partner-tiles-row {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  grid-template-columns: unset !important;
}

/* News: 6 tiles → strict 3-col grid, 2 even rows */
.news-tiles-row {
  grid-template-columns: repeat(3, 160px) !important;
}
@media (max-width: 700px) {
  .partner-tiles-row { gap: 0.65rem !important; }
  .news-tiles-row { grid-template-columns: repeat(2, 1fr) !important; }
  .partner-tile, .news-tile { width: 140px !important; }
}
@media (max-width: 480px) {
  .news-tiles-row { grid-template-columns: repeat(2, 1fr) !important; }
  .partner-tile, .news-tile { width: 100% !important; }
}

/* Tile base: uniform size, large enough to read */
.partner-tile,
.news-tile {
  width: 160px !important;
  height: 72px !important;
  min-height: unset !important;
  max-height: unset !important;
  aspect-ratio: unset !important;
  border-radius: 8px !important;
  padding: 0 1rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  border: 1px solid rgba(201,162,39,0.3) !important;
  background: var(--color-earth) !important;
  text-decoration: none !important;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s !important;
}
.partner-tile:hover,
.news-tile:hover {
  border-color: var(--color-gold) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.35) !important;
  transform: translateY(-3px) !important;
}

/* Tile text: readable size, no breaking */
.partner-tile-abbr {
  font-family: var(--font-heading) !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.03em !important;
  text-align: center !important;
  line-height: 1.45 !important;
  word-break: normal !important;
  overflow-wrap: break-word !important;
  hyphens: none !important;
  white-space: normal !important;
  max-width: 140px !important;
}

[data-theme="light"] .partner-tile,
[data-theme="light"] .news-tile {
  background: #e0d4be !important;
  border-color: rgba(139,100,0,0.25) !important;
}


/* ╔══════════════════════════════════════════════════════════╗
   ║  DEFINITIVE OVERRIDES — v7.6 — LAST RULES WIN           ║
   ╚══════════════════════════════════════════════════════════╝ */

/* ── NAVBAR: transparent at top, solid on scroll ─────────────
   These MUST be last to win over every prior rule.           */

/* Always transparent when NOT scrolled — dark mode */
html #site-header #navbar:not(.scrolled) {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
}
/* Always transparent when NOT scrolled — light mode */
html[data-theme="light"] #site-header #navbar:not(.scrolled),
[data-theme="light"] #navbar:not(.scrolled) {
  background: transparent !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
}

/* Solid when scrolled — dark mode */
html #site-header #navbar.scrolled {
  background: #0d0b08 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: 0 2px 20px rgba(0,0,0,0.85) !important;
  border-bottom: 1px solid rgba(201,162,39,0.3) !important;
}
/* Solid when scrolled — light mode */
html[data-theme="light"] #site-header #navbar.scrolled,
[data-theme="light"] #site-header #navbar.scrolled {
  background: #f0e6d3 !important;
  backdrop-filter: none !important;
  box-shadow: 0 2px 14px rgba(0,0,0,0.12) !important;
  border-bottom: 1px solid rgba(139,100,0,0.35) !important;
}

/* Navbar inner layout */
#site-header #navbar { padding: 0 2rem !important; }
#site-header .nav-container {
  height: 64px !important;
  padding: 0 !important;
  max-width: 1400px !important;
  margin: 0 auto !important;
}

/* Body offset = announcement bar height (~30px) + navbar (64px) */
.hero { height: calc(100vh - 94px) !important; min-height: 560px !important; }
@media (max-width: 768px) {
  #site-header .announcement-bar { display: none !important; }
  .hero { height: calc(100vh - 64px) !important; }
}

/* ── HERO: CSS background is ONLY a color fallback, not an image ─ */
.hero-video-container {
  position: absolute !important;
  inset: 0 !important;
  overflow: hidden !important;
  background: #0d0b08 !important;   /* dark color only, no image here */
}
.hero-video {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  opacity: 0.55 !important;
}

/* ── PARTNER & NEWS TILES: big, even grid, never orphaned ────── */

/* Both rows: strict 3-column grid → 3+3 always */
.partner-tiles-row,
.news-tiles-row {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 1rem !important;
  max-width: 780px !important;
  margin: 2rem auto !important;
  width: 100% !important;
}
@media (max-width: 680px) {
  .partner-tiles-row,
  .news-tiles-row {
    grid-template-columns: repeat(2, 1fr) !important;
    max-width: 480px !important;
  }
}

/* Tiles: large enough to read comfortably */
.partner-tile,
.news-tile {
  width: 100% !important;
  height: 80px !important;
  min-height: unset !important;
  max-height: unset !important;
  aspect-ratio: unset !important;
  flex-shrink: unset !important;
  border-radius: 8px !important;
  padding: 0 1.25rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid rgba(201,162,39,0.3) !important;
  background: var(--color-earth) !important;
  text-decoration: none !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease !important;
  cursor: pointer !important;
}
.partner-tile:hover,
.news-tile:hover {
  border-color: rgba(201,162,39,0.7) !important;
  box-shadow: 0 6px 20px rgba(0,0,0,0.4) !important;
  transform: translateY(-3px) !important;
}

/* Tile text: large, readable, never broken */
.partner-tile-abbr {
  font-family: var(--font-heading) !important;
  font-size: 0.88rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.03em !important;
  text-align: center !important;
  line-height: 1.4 !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
  hyphens: none !important;
  white-space: normal !important;
}

[data-theme="light"] .partner-tile,
[data-theme="light"] .news-tile {
  background: #e0d4be !important;
  border-color: rgba(139,100,0,0.25) !important;
}

/* ── YOUTUBE LOGO in Watch section ───────────────────────────── */
/* Already set via inline SVG width/height on the element */


/* ╔══════════════════════════════════════════════════════════╗
   ║  PARTNER TILES + NAVBAR FINAL FIX — v7.7               ║
   ╚══════════════════════════════════════════════════════════╝ */

/* Partner outer wrapper */
.partner-tiles-outer {
  max-width: 780px;
  margin: 2rem auto;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: center;
}

/* Each row of partner tiles */
.partner-tiles-row {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 1rem !important;
  justify-content: center !important;
  width: 100% !important;
  max-width: 780px !important;
  margin: 0 !important;
}

/* News tiles: strict 3-col grid, 6 tiles = 2 even rows */
.news-tiles-row {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 1rem !important;
  max-width: 780px !important;
  margin: 2rem auto !important;
  width: 100% !important;
}
@media (max-width: 600px) {
  .news-tiles-row {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .partner-tiles-row {
    flex-wrap: wrap !important;
  }
}

/* All tiles: large and readable */
.partner-tile,
.news-tile {
  flex: 0 0 240px !important;
  width: 240px !important;
  height: 80px !important;
  min-height: unset !important;
  max-height: unset !important;
  aspect-ratio: unset !important;
  border-radius: 8px !important;
  padding: 0 1.25rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid rgba(201,162,39,0.3) !important;
  background: var(--color-earth) !important;
  text-decoration: none !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease !important;
}
.news-tile {
  flex: unset !important;
  width: 100% !important;
}
.partner-tile:hover,
.news-tile:hover {
  border-color: rgba(201,162,39,0.7) !important;
  box-shadow: 0 6px 20px rgba(0,0,0,0.4) !important;
  transform: translateY(-3px) !important;
}
.partner-tile-abbr {
  font-family: var(--font-heading) !important;
  font-size: 0.88rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.03em !important;
  text-align: center !important;
  line-height: 1.4 !important;
  word-break: normal !important;
  hyphens: none !important;
}
[data-theme="light"] .partner-tile,
[data-theme="light"] .news-tile {
  background: #e0d4be !important;
}



/* ╔══════════════════════════════════════════════════════════╗
   ║  GLOBAL TRANSPARENT NAVBAR — v8.0                      ║
   ╚══════════════════════════════════════════════════════════╝

   PRINCIPLE: body has NO padding-top. Every hero section
   (homepage and interior) starts at the true top of the page
   and bleeds behind the fixed transparent header. Each hero's
   own top padding is set to clear the header height (94px).   */

/* ── 1. Remove body padding — hero sections own their offset ── */
body {
  padding-top: 0 !important;
}

/* ── 2. Homepage hero: full viewport, bleeds to true top ──── */
.hero {
  height: 100vh !important;
  min-height: 600px !important;
  margin-top: 0 !important;
}
.hero-content {
  padding-top: var(--header-h, 94px) !important;
}

/* ── 3. Interior page heroes: top padding clears the header ── */
/* Each already has ~7-8rem top padding; we ensure minimum 94px + breathing room */
.about-hero,
.cal-hero,
.cm-hero,
.contact-hero,
.leadership-hero,
.lead-hero,
.min-hero,
.partners-hero,
.page-hero,
.pr-hero,
.resources-hero,
.resource-hero,
.sid-hero,
.sit-hero,
.tt-hero,
.visit-hero,
.watch-hero {
  padding-top: calc(var(--header-h, 94px) + 3.5rem) !important;
}

/* ── 4. Mobile: --header-h is auto-measured smaller (announcement bar hidden),
       so we only trim the breathing room; clearance tracks the real header ── */
@media (max-width: 768px) {
  .about-hero, .cal-hero, .cm-hero, .contact-hero, .leadership-hero,
  .lead-hero, .min-hero, .partners-hero, .page-hero, .pr-hero,
  .resources-hero, .resource-hero, .sid-hero, .sit-hero, .tt-hero,
  .visit-hero, .watch-hero {
    padding-top: calc(var(--header-h, 64px) + 2rem) !important;
  }
}

/* ── Light mode: support strip text legibility ── */
[data-theme="light"] .support-strip h2,
[data-theme="light"] .support-strip p {
  color: #1a0f05 !important;
}
[data-theme="light"] .support-strip .section-label {
  color: #6b4c00 !important;
}

/* ── Light mode: btn-gold text always dark (visible on gold bg) ── */
[data-theme="light"] .btn-gold,
[data-theme="light"] .btn-donate-animated {
  color: #1a0f05 !important;
}

/* ── Light mode: partner card text ── */
[data-theme="light"] .partner-card {
  background: #e8dfc8 !important;
  border-color: rgba(139,100,0,0.3) !important;
}
[data-theme="light"] .partner-name {
  color: #1a0f05 !important;
}
[data-theme="light"] .partner-cat {
  color: #6b4c00 !important;
}

/* ── Light mode: upcoming sacred dates — text legibility on hover ── */
[data-theme="light"] #upcoming-events-list .event-item {
  background: #e8dfc8 !important;
  border-color: rgba(139,100,0,0.2) !important;
}
[data-theme="light"] #upcoming-events-list .event-item:hover {
  background: #d4c9a8 !important;
  border-color: rgba(139,100,0,0.5) !important;
}
[data-theme="light"] #upcoming-events-list .event-item .event-name {
  color: #1a0f05 !important;
}
[data-theme="light"] #upcoming-events-list .event-item .event-time,
[data-theme="light"] #upcoming-events-list .event-item .event-date-month,
[data-theme="light"] #upcoming-events-list .event-item .event-heb-latin {
  color: #4a3520 !important;
}
[data-theme="light"] #upcoming-events-list .event-item .event-date-num {
  color: #6b4c00 !important;
}


/* ╔══════════════════════════════════════════════════════════════════════════╗
   ║  v8.1 — RESPONSIVE SYSTEM CONSOLIDATION  (last block — these rules win)    ║
   ╠══════════════════════════════════════════════════════════════════════════╣
   ║  Goal: one intentional layout at EVERY width — phones, landscape phones,   ║
   ║  tablets (portrait + landscape), dragged desktop windows, and ultra-wide.  ║
   ║                                                                            ║
   ║  CANONICAL BREAKPOINT SCALE (migrate future work onto these):              ║
   ║     480px  → large phone / small-phone ceiling                             ║
   ║     768px  → tablet portrait / phone ceiling (nav already hamburger)       ║
   ║    1024px  → tablet landscape & small laptop (nav → hamburger switch)      ║
   ║    1280px  → desktop                                                       ║
   ║    1536px  → large desktop / ultra-wide treatment                          ║
   ║                                                                            ║
   ║  The legacy breakpoints above (420/580/600/640/680/700/800/860/900/1100)   ║
   ║  still resolve; this block re-asserts the multi-column → single-column     ║
   ║  collapses on the scale above so the in-between "dead zones" (e.g. one      ║
   ║  grid collapsed at 800 while its neighbour waited for 860) are eliminated.  ║
   ╚══════════════════════════════════════════════════════════════════════════╝ */

/* ── 1. Nav: hide the inline Donate at the same point the links become the
       hamburger (≤1024), so the navbar can't show Donate next to a hamburger ── */
@media (max-width: 1024px) {
  .nav-links { display: none !important; }
  .hamburger { display: flex !important; }
  .nav-donate { display: none !important; }
}

/* ── 2. Directions modal: never exceed a small viewport (was min-width:280px
       with no max, so it clipped at ≤320px under body{overflow-x:hidden}) ── */
.dir-modal-box {
  min-width: 0;
  width: min(92vw, 360px);
  max-width: 92vw;
  padding: 2.25rem 1.75rem;
}
@media (max-width: 380px) {
  .dir-modal-box { padding: 2rem 1.15rem; }
  .dir-modal-btns { gap: 0.65rem; }
  .dir-btn { width: 100%; justify-content: center; }
}

/* ── 3. Resource library "Table" view: make it scroll on small screens instead
       of crushing 4 columns into noise (Week view already does this right) ── */
@media (max-width: 768px) {
  #res-view-table { padding: 2rem 1rem !important; }
  #res-view-table > div { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  #res-table-el { min-width: 600px; }
  #res-view-list { padding: 2rem 1.25rem !important; }
  /* List rows: let the fixed-width category label wrap above the title on phones */
  #res-view-list .res-list-item { flex-wrap: wrap; gap: 0.35rem 1.25rem; }
  #res-view-list .res-list-cat { width: auto; }
}

/* ── 4. Partner / News tiles: 3 → 2 → 1 on the scale (were stuck at 3 down to
       360px). Also catch the generic 3-up tile grids on the same widths. ── */
@media (min-width: 601px) and (max-width: 768px) {
  .partner-tiles, .news-tiles { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 600px) {
  .partner-tiles, .news-tiles { grid-template-columns: 1fr !important; }
}

/* ── 5. 3-up CARD grids → 2 → 1 uniformly (fixes .leaders-grid jumping 3→1 at
       an off-scale 860 with no intermediate step) ── */
@media (max-width: 1024px) {
  .leaders-grid, .leadership-grid, .pillars-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
@media (max-width: 600px) {
  .leaders-grid, .leadership-grid, .pillars-grid, .partner-cards {
    grid-template-columns: 1fr !important;
  }
}

/* ── 6. 2-up CONTENT/LAYOUT grids → stack at tablet-portrait, so the awkward
       769–800 band (one side already narrow) resolves cleanly at one point ── */
@media (max-width: 768px) {
  .about-grid, .contact-grid, .form-row, .form-page-grid, .visit-page-grid,
  .pr-inner, .movement-inner, .featured-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ── 7. Touch targets ≥44px on touch-sized screens (several controls were ~32–41px) ── */
@media (max-width: 768px) {
  .theme-toggle { height: 40px !important; width: 44px !important; }
  .hamburger {
    min-width: 44px; min-height: 44px;
    display: flex !important; align-items: center; justify-content: center;
  }
  .cal-view-btn, .res-view-btn {
    min-height: 44px; display: inline-flex; align-items: center;
  }
  .mobile-nav-parent, .mobile-sub-link { min-height: 44px; display: flex; align-items: center; }
  .dir-close { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; }
  .footer-social .social-link { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
}

/* ── 8. Fluid card titles & large sub-heads — extend clamp() so they scale on a
       continuous curve like the hero/section titles (no fixed-px step). The
       hero/section 768 clamp "kink" was removed above; nothing re-introduces it. ── */
.card-title, .featured-title, .min-card h3, .resource-card h3,
.watch-card h3, .pillar-title, .leader-name {
  font-size: clamp(1.05rem, 1.4vw, 1.35rem);
  line-height: 1.25;
}
.support-strip h2 { font-size: clamp(1.5rem, 3vw, 1.8rem); }

/* ── 9. Ultra-wide (≥1536px): the existing section containers already cap at
       1100–1400px, which keeps line-lengths sane; we only widen the page gutters
       a touch and nudge base size up so huge displays don't feel sparse. ── */
@media (min-width: 1536px) {
  html { font-size: 19px; }
  .section { padding-left: max(2rem, 4vw); padding-right: max(2rem, 4vw); }
}

/* ── 10. Universal small-screen safety: kill any horizontal overflow source and
        keep wide media/embeds fluid (belt-and-suspenders over body{overflow-x:hidden}) ── */
iframe, video, table { max-width: 100%; }
@media (max-width: 480px) {
  .section { padding-left: 1.1rem; padding-right: 1.1rem; }
}


/* ╔══════════════════════════════════════════════════════════════════════════╗
   ║  v8.2 — ADA / MOBILE LEGIBILITY + MOBILE MENU  (last block — wins)         ║
   ╠══════════════════════════════════════════════════════════════════════════╣
   ║  Readability pass for small screens & older readers (WCAG-minded).         ║
   ║  KEY CHOICE: we improve legibility by flooring small TEXT sizes and        ║
   ║  extending the existing 16px base (already used 601–900px) down to phones  ║
   ║  — we do NOT inflate the rem spacing grid, so layouts are preserved.       ║
   ╚══════════════════════════════════════════════════════════════════════════╝ */

/* ── Base size: phones inherit the same 16px regime the 601–900px range already
      renders at (was dropping to 15px ≤600). Gentle, layout-tested legibility. ── */
@media (max-width: 600px) {
  html { font-size: 16px; }
}

/* ── Mobile menu: roomier + legible, and the dropdown caret can never crowd the
      label (it now has its own flex slot with guaranteed spacing) ── */
@media (max-width: 1024px) {
  .mobile-menu { width: min(360px, 92vw); }
  .mobile-menu-links { padding: 0.6rem 0; }
  .mobile-nav-parent {
    padding: 1.05rem 1.4rem;
    font-size: 0.95rem;
    letter-spacing: 0.05em;          /* tighter than 0.1em: frees room + reads cleaner */
    gap: 1rem;
  }
  .mobile-nav-parent-label { flex: 1 1 auto; text-align: left; min-width: 0; }
  .mobile-nav-caret {
    flex: 0 0 auto; margin-left: 0.85rem;
    font-size: 1.05rem; line-height: 1; color: var(--color-gold);
    transition: transform 0.25s ease;
  }
  .mobile-nav-group.open .mobile-nav-caret { transform: rotate(180deg); }
  .mobile-menu .nav-link  { font-size: 0.95rem; padding: 1.05rem 1.4rem; }
  .mobile-sub-link        { font-size: 0.92rem; padding: 0.85rem 1.4rem 0.85rem 1.9rem; }
  .mobile-menu-header span { font-size: 1.05rem; }
  .mobile-donate-btn       { font-size: 0.9rem; padding: 1rem; letter-spacing: 0.1em; }
}

/* ── Form fields ≥16px on mobile: legible AND prevents iOS auto-zoom on focus ── */
@media (max-width: 768px) {
  input, select, textarea,
  .sid-search, .cal-search, .newsletter-input, .resource-db-search,
  .cal-filter-select, .sid-select, .cal-filter-select option { font-size: 16px !important; }
}

/* ── Floor the smallest functional labels so nothing reads below ~12px ── */
@media (max-width: 768px) {
  .cal-view-btn, .res-view-btn, .view-btn, .lang-btn { font-size: 0.8rem; }
  .cal-legend-item            { font-size: 0.8rem; }
  .cal-legend-toggle-label    { font-size: 0.8rem; }
  .lang-toggle-label          { font-size: 0.75rem; }
  .agenda-date, .agenda-day, .agenda-heb, .agenda-time { font-size: 0.82rem; }
  .agenda-title               { font-size: 0.95rem; }
  .agenda-month-hdr           { font-size: 0.85rem; }
  .footer-link, .footer-legal a { font-size: 0.9rem; }
  .footer-service-times       { font-size: 0.85rem; }
  .cookie-text                { font-size: 0.86rem; line-height: 1.6; }
  .mega-item-desc             { font-size: 0.82rem; }
  .tradition-note, .p-when    { font-size: 0.85rem; }
  .prayer-tag, .cal-legend-toggle-label { letter-spacing: 0.08em; }
}

/* ── Reading text inside the siddur/posts stays comfortable on phones ── */
@media (max-width: 600px) {
  .p-english, .prayer-card-body p { font-size: 1rem; line-height: 1.75; }
  .p-transliteration { font-size: 0.95rem; }
}


/* ╔══════════════════════════════════════════════════════════════════════════╗
   ║  SPRINT FIXES — All 13 items from audit                                ║
   ╚══════════════════════════════════════════════════════════════════════════╝ */

/* ── FIX 1: Logo — never squished, always natural proportions ── */
.nav-logo img,
.footer-old-logo img {
  width: auto !important;
  height: auto !important;
  max-height: 52px !important;
  max-width: 200px !important;
  object-fit: contain !important;
  object-position: center !important;
}
/* Footer brand logo */
.footer-brand-logo img {
  width: auto !important;
  height: auto !important;
  max-height: 70px !important;
  max-width: 220px !important;
  object-fit: contain !important;
}
/* Crown display on homepage */
.crown-display img {
  width: auto !important;
  height: auto !important;
  max-width: min(300px, 80%) !important;
  max-height: 200px !important;
  object-fit: contain !important;
}

/* ── FIX 2: Favicon — handled via HTML (see components.js patch),
   here we ensure any inline logo-crown img rendered at fixed px is freed ── */

/* ── FIX 3: Footer service times — one line each, never wrap ── */
.footer-service-times {
  font-size: 0.82rem !important;
  color: var(--color-sand) !important;
  line-height: 2 !important;
}
.footer-service-times .svc-row {
  display: flex !important;
  align-items: baseline !important;
  gap: 0.35rem !important;
  white-space: nowrap !important;
  flex-wrap: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.footer-service-times span {
  color: var(--color-gold) !important;
  font-family: var(--font-heading) !important;
  font-size: 0.7rem !important;
  letter-spacing: 0.08em !important;
  flex-shrink: 0 !important;
}

/* ── FIX 4: Newsletter placeholder visible in light mode ── */
[data-theme="light"] .newsletter-input::placeholder,
[data-theme="light"] .newsletter-input::-webkit-input-placeholder {
  color: rgba(74, 53, 32, 0.65) !important;
}
[data-theme="light"] .newsletter-input {
  background: rgba(0,0,0,0.06) !important;
  border-color: rgba(139,100,0,0.5) !important;
  color: #1a0f05 !important;
}

/* ── FIX 5: Light mode contrast — siddur prayer time tags ── */
[data-theme="light"] .tag-morning {
  background: rgba(160, 90, 0, 0.15) !important;
  color: #7a4500 !important;
  border-color: rgba(160, 90, 0, 0.4) !important;
}
[data-theme="light"] .tag-afternoon {
  background: rgba(0, 80, 160, 0.12) !important;
  color: #004494 !important;
  border-color: rgba(0, 80, 160, 0.3) !important;
}
[data-theme="light"] .tag-evening {
  background: rgba(80, 30, 160, 0.12) !important;
  color: #4a1a90 !important;
  border-color: rgba(80, 30, 160, 0.3) !important;
}
[data-theme="light"] .tag-bracha {
  background: rgba(0, 110, 50, 0.12) !important;
  color: #005a28 !important;
  border-color: rgba(0, 110, 50, 0.3) !important;
}

/* Light mode: prayer card backgrounds ── */
[data-theme="light"] .prayer-card,
[data-theme="light"] .siddur-card {
  background: #ece4d4 !important;
  color: #1a0f05 !important;
}
[data-theme="light"] .prayer-card .p-english,
[data-theme="light"] .prayer-card .prayer-english,
[data-theme="light"] .prayer-card .p-when,
[data-theme="light"] .prayer-card .p-instruction,
[data-theme="light"] .prayer-card .p-transliteration,
[data-theme="light"] .prayer-card .prayer-time {
  color: #3a2a12 !important;
}
[data-theme="light"] .prayer-card .p-hebrew,
[data-theme="light"] .prayer-card .prayer-hebrew {
  color: #1a0f05 !important;
}
/* Siddur tab buttons in light mode */
[data-theme="light"] .siddur-tab:not(.active) {
  color: #3a2a12 !important;
  border-color: rgba(139,100,0,0.35) !important;
}
[data-theme="light"] .siddur-tab.active {
  background: #8b6400 !important;
  color: #fff !important;
  border-color: #8b6400 !important;
}

/* ── FIX 6: Big purple ✡ emoji on mobile — contain it ── */
.about-section::before {
  /* Don't display a full 20rem emoji character floating on small screens */
  font-size: clamp(8rem, 25vw, 20rem) !important;
  right: -1rem !important;
  overflow: hidden !important;
  /* Desaturate it so it reads as decorative, not an Android colored emoji */
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  background: radial-gradient(ellipse at center, rgba(201,162,39,0.04) 0%, transparent 70%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
}
@media (max-width: 768px) {
  .about-section::before {
    display: none !important;
  }
}

/* ── FIX 7: General mobile overflow / elements running off screen ── */
@media (max-width: 768px) {
  /* Prevent any section content from escaping viewport */
  .section-inner,
  .footer-upper,
  .cal-inner,
  .cal-controls-row,
  .tt-controls,
  .resource-db-controls,
  .res-controls-wrap {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }

  /* Tables inside calendar on mobile */
  #res-view-table,
  .cal-days-header,
  .calendar-grid {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* Schedule grid: never forced side-by-side below 480 */
  .schedule-grid {
    grid-template-columns: 1fr 1fr !important;
  }

  /* Event items stack gracefully */
  #upcoming-events-list .event-item {
    flex-wrap: wrap !important;
    gap: 0.6rem 1rem !important;
  }

  /* Large hero titles: never clip */
  .hero-title,
  .page-hero-title {
    font-size: clamp(1.8rem, 8vw, 3.5rem) !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
  }

  /* Footer: stacked, no horizontal bleed */
  .footer-upper {
    grid-template-columns: 1fr !important;
    padding: 2.5rem 1.25rem !important;
  }
  .footer-lower {
    padding: 1.25rem !important;
    flex-direction: column !important;
    text-align: center !important;
  }

  /* Form rows: always single column */
  .form-row {
    grid-template-columns: 1fr !important;
  }

  /* Buttons: full-width on small phones */
  .hero-ctas {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0.75rem !important;
  }
  .hero-ctas .btn {
    justify-content: center !important;
    width: 100% !important;
  }
}

@media (max-width: 480px) {
  .schedule-grid {
    grid-template-columns: 1fr !important;
  }

  /* Section padding tighter on very small phones */
  .section {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  /* Nav logo: smaller on tiny screens */
  .nav-logo img {
    max-height: 38px !important;
  }
  .nav-logo-name {
    font-size: 0.85rem !important;
  }
}

/* ── FIX 8–9: Calendar print — layout selector + legible output ── */
/* Print layout selector modal (injected by JS) */
.cal-print-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.75);
  backdrop-filter: blur(4px);
}
.cal-print-modal.open {
  display: flex;
}
.cal-print-modal-box {
  background: var(--color-charcoal);
  border: 1px solid var(--color-gold);
  padding: 2.5rem 2rem;
  max-width: 420px;
  width: 92vw;
  text-align: center;
}
.cal-print-modal-box h3 {
  font-family: var(--font-heading);
  font-size: 0.9rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-gold);
  margin-bottom: 1.5rem;
}
.cal-print-options {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}
.cal-print-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 1.2rem 1.6rem;
  border: 1px solid rgba(201,162,39,0.4);
  cursor: pointer;
  background: var(--color-earth);
  color: var(--color-linen);
  font-family: var(--font-heading);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: background 0.2s, border-color 0.2s;
}
.cal-print-option:hover,
.cal-print-option.selected {
  background: var(--color-gold);
  color: var(--color-obsidian);
  border-color: var(--color-gold);
}
.cal-print-option-icon {
  font-size: 2rem;
  display: block;
  margin-bottom: 0.25rem;
}
.cal-print-modal-btns {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
}
.cal-print-confirm {
  background: var(--color-gold);
  color: var(--color-obsidian);
  border: none;
  font-family: var(--font-heading);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.75rem 1.5rem;
  cursor: pointer;
  transition: background 0.2s;
}
.cal-print-confirm:hover { background: var(--color-gold-light); }
.cal-print-cancel {
  background: transparent;
  color: var(--color-sand);
  border: 1px solid rgba(201,162,39,0.3);
  font-family: var(--font-heading);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.75rem 1.25rem;
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s;
}
.cal-print-cancel:hover { border-color: var(--color-gold); color: var(--color-gold); }

/* ── Print output: fully legible calendar ── */
@media print {
  /* Hide all chrome */
  #site-header, .announcement-bar, #navbar, footer, #back-to-top,
  #cookie-banner, .cal-controls-sticky, .cal-view-btns, .cal-countdown-strip,
  .cal-legend-wrap, .cal-weekly-service, .zmanim-section, .siddur-section,
  .cal-print-modal, .quick-view-overlay, #directions-modal,
  .cal-modal-overlay, .page-hero, .cal-hero { display: none !important; }

  /* Page setup */
  @page { margin: 1.5cm; size: A4 portrait; }
  @page landscape { margin: 1cm; size: A4 landscape; }

  html, body {
    background: #ffffff !important;
    color: #000000 !important;
    font-size: 10pt !important;
    -webkit-print-color-adjust: exact !important;
    color-adjust: exact !important;
  }

  /* Print title */
  .cal-print-title {
    display: block !important;
    text-align: center;
    font-size: 16pt;
    font-weight: bold;
    color: #000 !important;
    margin-bottom: 0.5cm;
    padding-bottom: 0.3cm;
    border-bottom: 2pt solid #999;
  }

  /* ── CALENDAR (month grid) view ── */
  body.print-mode-calendar #view-agenda { display: none !important; }
  body.print-mode-calendar #view-month  { display: block !important; }

  body.print-mode-calendar .calendar-grid {
    display: grid !important;
    grid-template-columns: repeat(7, 1fr) !important;
    gap: 1px !important;
    border: 1px solid #ccc !important;
    width: 100% !important;
    table-layout: fixed !important;
  }
  body.print-mode-calendar .cal-days-header {
    display: grid !important;
    grid-template-columns: repeat(7, 1fr) !important;
    margin-bottom: 0 !important;
  }
  body.print-mode-calendar .cal-day-name {
    text-align: center;
    font-size: 8pt !important;
    font-weight: bold;
    color: #000 !important;
    padding: 4px 2px !important;
    border-bottom: 1pt solid #999;
  }
  body.print-mode-calendar .cal-day {
    background: #ffffff !important;
    border: 0.5pt solid #ccc !important;
    min-height: 80px !important;
    padding: 3px 4px !important;
    page-break-inside: avoid !important;
    vertical-align: top;
  }
  body.print-mode-calendar .cal-day.other-month {
    background: #f5f5f5 !important;
    opacity: 1 !important;
  }
  body.print-mode-calendar .cal-day.today {
    background: #fffde8 !important;
    border: 1pt solid #999 !important;
  }
  body.print-mode-calendar .cal-day-num {
    font-size: 9pt !important;
    font-weight: bold !important;
    color: #000 !important;
    display: block;
    margin-bottom: 2px;
  }
  body.print-mode-calendar .cal-day-heb {
    font-size: 7pt !important;
    color: #666 !important;
    display: block;
    margin-bottom: 2px;
  }
  body.print-mode-calendar .event-badge {
    display: block !important;
    font-size: 6.5pt !important;
    padding: 1px 2px !important;
    margin: 1px 0 !important;
    line-height: 1.3 !important;
    border-radius: 1px !important;
    color: #000 !important;
    background: #e8e8e8 !important;
    border: none !important;
    border-left: 2.5pt solid #999 !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }
  body.print-mode-calendar .ev-holiday    { border-left-color: #5a8a3a !important; background: #f0f8e8 !important; }
  body.print-mode-calendar .ev-congregation { border-left-color: #c9a227 !important; background: #fdf8e8 !important; }
  body.print-mode-calendar .ev-parashat  { border-left-color: #4472aa !important; background: #eef3fc !important; }
  body.print-mode-calendar .ev-fast      { border-left-color: #c04040 !important; background: #fceaea !important; }

  /* ── AGENDA (list) view ── */
  body.print-mode-agenda #view-month  { display: none !important; }
  body.print-mode-agenda #view-agenda { display: block !important; }

  body.print-mode-agenda .agenda-month-hdr {
    font-size: 12pt !important;
    font-weight: bold !important;
    color: #000 !important;
    border-bottom: 1pt solid #999;
    padding: 6pt 0 3pt;
    margin: 12pt 0 4pt;
    page-break-after: avoid;
  }
  body.print-mode-agenda .agenda-day-block {
    page-break-inside: avoid;
    margin-bottom: 8pt;
  }
  body.print-mode-agenda .agenda-date-row {
    display: flex;
    align-items: baseline;
    gap: 8pt;
    padding: 4pt 0;
    border-bottom: 0.5pt solid #ddd;
    page-break-after: avoid;
  }
  body.print-mode-agenda .agenda-date {
    font-size: 11pt !important;
    font-weight: bold !important;
    color: #000 !important;
    min-width: 24pt;
  }
  body.print-mode-agenda .agenda-day {
    font-size: 9pt !important;
    color: #555 !important;
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }
  body.print-mode-agenda .agenda-heb {
    font-size: 9pt !important;
    color: #777 !important;
    margin-left: auto;
  }
  body.print-mode-agenda .agenda-event-row {
    padding: 2pt 0 2pt 12pt;
    display: flex;
    align-items: flex-start;
    gap: 6pt;
  }
  body.print-mode-agenda .agenda-event-cat {
    font-size: 7pt !important;
    color: #666 !important;
    min-width: 48pt;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding-top: 1pt;
  }
  body.print-mode-agenda .agenda-title {
    font-size: 10pt !important;
    color: #000 !important;
    flex: 1;
  }
  body.print-mode-agenda .agenda-time {
    font-size: 8pt !important;
    color: #555 !important;
  }

  /* Common print: all text-fill should be black */
  h1, h2, h3, h4, h5, h6 {
    color: #000 !important;
    -webkit-text-fill-color: #000 !important;
  }
  * {
    box-shadow: none !important;
    text-shadow: none !important;
    animation: none !important;
  }

  /* Shimmer text: strip gradient, show flat color */
  .shimmer-text, .shimmer-gold {
    background: none !important;
    -webkit-background-clip: initial !important;
    background-clip: initial !important;
    -webkit-text-fill-color: #000 !important;
    color: #000 !important;
    animation: none !important;
  }
}

/* ── Light mode: general card / section text legibility audit ── */
[data-theme="light"] .cal-day { background: #f5f0e8 !important; color: #1a0f05 !important; }
[data-theme="light"] .cal-day-num { color: #1a0f05 !important; }
[data-theme="light"] .cal-day-heb { color: #6b4c00 !important; }
[data-theme="light"] .event-badge {
  background: rgba(139,100,0,0.12) !important;
  color: #3a2a00 !important;
  border-left-color: #8b6400 !important;
}
[data-theme="light"] .zmanim-card { background: #ece4d4 !important; }
[data-theme="light"] .zmanim-card h5 { color: #6b4c00 !important; }
[data-theme="light"] .zmanim-time { color: #1a0f05 !important; }
[data-theme="light"] .zmanim-note { color: #4a3520 !important; }
[data-theme="light"] .section-title { color: #1a0f05 !important; }
[data-theme="light"] .section-subtitle { color: #3a2a12 !important; }
[data-theme="light"] .about-text { color: #3a2a12 !important; }
[data-theme="light"] .accordion-body p { color: #3a2a12 !important; }
[data-theme="light"] .resource-title { color: #1a0f05 !important; }
[data-theme="light"] .resource-desc { color: #3a2a12 !important; }
[data-theme="light"] .leader-name { color: #1a0f05 !important; }
[data-theme="light"] .leader-bio { color: #3a2a12 !important; }
[data-theme="light"] .contact-detail-text { color: #3a2a12 !important; }
[data-theme="light"] .event-title { color: #1a0f05 !important; }
[data-theme="light"] .event-time { color: #4a3520 !important; }
[data-theme="light"] .watch-card h3 { color: #1a0f05 !important; }
[data-theme="light"] .pillar-card h3 { color: #1a0f05 !important; }
[data-theme="light"] .pillar-card p { color: #3a2a12 !important; }
[data-theme="light"] .bracha-card h5 { color: #6b4c00 !important; }
[data-theme="light"] .bracha-card .bracha-eng { color: #3a2a12 !important; }
[data-theme="light"] .bracha-card .bracha-when { color: #6b4c00 !important; }
[data-theme="light"] .bracha-card .bracha-heb { color: #1a0f05 !important; }
[data-theme="light"] .partner-desc { color: #3a2a12 !important; }
[data-theme="light"] .partner-name { color: #1a0f05 !important; }

/* ── Light mode: schedule strip ── */
[data-theme="light"] .schedule-day { color: #1a0f05 !important; }
[data-theme="light"] .schedule-time { color: #3a2a12 !important; }
[data-theme="light"] .schedule-location { color: #6b4c00 !important; }
[data-theme="light"] .schedule-item { background: #ece4d4 !important; }

/* ── Light mode: mobile menu ── */
[data-theme="light"] .mobile-menu {
  background: #ece4d4 !important;
  border-left-color: rgba(139,100,0,0.4) !important;
}
[data-theme="light"] .mobile-menu .nav-link { color: #3a2a12 !important; }
[data-theme="light"] .mobile-nav-parent { color: #3a2a12 !important; }
[data-theme="light"] .mobile-sub-link { color: #6b4c00 !important; }
[data-theme="light"] .mobile-menu-header { border-bottom-color: rgba(139,100,0,0.3) !important; }
[data-theme="light"] .mobile-menu-header span { color: #1a0f05 !important; }
[data-theme="light"] .mobile-menu-close { color: #6b4c00 !important; }



/* ╔══════════════════════════════════════════════════════════════════════════╗
   ║  PRINT SYSTEM v2 — Complete rewrite. Hides the entire live site        ║
   ║  and shows only #print-output, which is built from ALL_EVENTS data.    ║
   ╚══════════════════════════════════════════════════════════════════════════╝ */

/* ── SCREEN: hide the print output container ── */
#print-output { display: none !important; }

@media print {

  /* ── 1. Hide absolutely everything on the page ── */
  body > *:not(#print-output) { display: none !important; }
  #site-header, #navbar, .announcement-bar, footer,
  #back-to-top, #cookie-banner, .cal-print-modal,
  .quick-view-overlay, #directions-modal,
  .cal-controls-sticky, .cal-countdown-strip,
  .cal-hero, .cal-view-btns, .cal-legend-wrap,
  .cal-weekly-service, .zmanim-section, .siddur-section,
  .cal-main, .cal-modal-overlay { display: none !important; }

  /* ── 2. Show the print container ── */
  #print-output {
    display: block !important;
    position: static !important;
    visibility: visible !important;
  }

  /* ── 3. Page setup ── */
  html, body {
    background: #ffffff !important;
    color: #000000 !important;
    font-family: Georgia, 'Times New Roman', serif !important;
    font-size: 10pt !important;
    margin: 0 !important;
    padding: 0 !important;
    -webkit-print-color-adjust: exact !important;
    color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  /* Calendar grid → landscape A4 */
  body.print-mode-calendar {
    /* @page is set below */
  }
  /* Agenda → portrait A4 */
  body.print-mode-agenda {
    /* @page is set below */
  }

  @page {
    margin: 1.2cm 1.4cm;
  }

  /* ── 4. Print header ── */
  .p-header {
    text-align: center;
    margin-bottom: 0.6cm;
    padding-bottom: 0.3cm;
    border-bottom: 1.5pt solid #c9a227;
  }
  .p-title {
    font-size: 16pt;
    font-weight: bold;
    color: #1a0f05 !important;
    letter-spacing: 0.04em;
  }
  .p-subtitle {
    font-size: 8pt;
    color: #6b4c00 !important;
    margin-top: 2pt;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  /* ══════════════════════════════════════════════
     CALENDAR GRID VIEW
  ══════════════════════════════════════════════ */
  .p-cal-month {
    page-break-after: always;
  }
  .p-cal-month:last-child {
    page-break-after: auto;
  }
  .p-cal-month-hdr {
    font-size: 13pt;
    font-weight: bold;
    color: #1a0f05 !important;
    text-align: center;
    margin-bottom: 0.3cm;
    padding: 4pt 0;
    border-bottom: 1pt solid #c9a227;
    letter-spacing: 0.06em;
  }

  /* 7-column grid */
  .p-cal-grid {
    display: grid !important;
    grid-template-columns: repeat(7, 1fr) !important;
    gap: 1pt !important;
    border: 0.5pt solid #bbb !important;
    width: 100% !important;
  }

  /* Day-of-week header row */
  .p-cal-dow {
    text-align: center !important;
    font-size: 7.5pt !important;
    font-weight: bold !important;
    color: #1a0f05 !important;
    padding: 3pt 2pt !important;
    background: #f5f0e0 !important;
    border: 0.5pt solid #bbb !important;
    letter-spacing: 0.05em;
  }
  /* Shabbat column header */
  .p-cal-dow:last-child {
    background: #f5ebc8 !important;
    color: #7a4500 !important;
  }

  /* Day cells */
  .p-cal-day {
    border: 0.5pt solid #ccc !important;
    min-height: 65pt !important;
    padding: 2pt 3pt !important;
    vertical-align: top !important;
    background: #ffffff !important;
    page-break-inside: avoid !important;
  }
  .p-cal-empty {
    background: #fafafa !important;
    min-height: 65pt !important;
  }
  .p-cal-today {
    background: #fffde0 !important;
    border: 1pt solid #c9a227 !important;
  }
  /* Shabbat column (7th column) */
  .p-cal-grid > .p-cal-day:nth-child(7n) {
    background: #fffbee !important;
  }

  .p-cal-daynum {
    font-size: 9pt !important;
    font-weight: bold !important;
    color: #1a0f05 !important;
    display: block !important;
    margin-bottom: 1pt !important;
  }
  .p-cal-today .p-cal-daynum {
    color: #7a4500 !important;
  }
  .p-cal-heb {
    font-size: 6pt !important;
    color: #888 !important;
    display: block !important;
    margin-bottom: 2pt !important;
    font-family: 'Noto Serif Hebrew', serif !important;
    direction: rtl !important;
  }

  /* Event chips */
  .p-cal-evt {
    font-size: 6pt !important;
    line-height: 1.35 !important;
    padding: 1pt 2pt !important;
    margin-bottom: 1pt !important;
    border-radius: 1pt !important;
    display: block !important;
    page-break-inside: avoid !important;
    word-break: break-word !important;
    color: #1a0f05 !important;
    background: #eeeeee !important;
    border-left: 2pt solid #999 !important;
    white-space: normal !important;
    overflow: visible !important;
  }
  .p-cat-holiday     { background: #eef6e8 !important; border-left-color: #5a8a3a !important; }
  .p-cat-congregation{ background: #fdf8e8 !important; border-left-color: #c9a227 !important; }
  .p-cat-parashat    { background: #eef0fa !important; border-left-color: #4472aa !important; }
  .p-cat-fast        { background: #fdeaea !important; border-left-color: #c04040 !important; }
  .p-cat-candles     { background: #fffbee !important; border-left-color: #c9a035 !important; }
  .p-cat-havdalah    { background: #f5eef8 !important; border-left-color: #7a5a9a !important; }
  .p-cat-shabbat     { background: #eef0fa !important; border-left-color: #4472aa !important; }
  .p-cat-omer        { background: #f5f5f5 !important; border-left-color: #999 !important; }

  /* ══════════════════════════════════════════════
     AGENDA / LIST VIEW
  ══════════════════════════════════════════════ */
  .p-ag-month {
    margin-bottom: 0.5cm;
    page-break-inside: avoid;
  }
  .p-ag-month-hdr {
    font-size: 13pt !important;
    font-weight: bold !important;
    color: #1a0f05 !important;
    border-bottom: 1.5pt solid #c9a227 !important;
    padding: 4pt 0 3pt !important;
    margin-bottom: 4pt !important;
    letter-spacing: 0.05em !important;
    page-break-after: avoid !important;
  }
  .p-ag-day-block {
    page-break-inside: avoid !important;
    margin-bottom: 6pt !important;
    border-bottom: 0.5pt solid #ddd !important;
    padding-bottom: 4pt !important;
  }
  .p-ag-date-row {
    display: flex !important;
    align-items: baseline !important;
    gap: 6pt !important;
    padding: 2pt 0 3pt !important;
    page-break-after: avoid !important;
  }
  .p-ag-daynum {
    font-size: 13pt !important;
    font-weight: bold !important;
    color: #7a4500 !important;
    min-width: 20pt !important;
    line-height: 1 !important;
  }
  .p-ag-dow {
    font-size: 9pt !important;
    font-weight: bold !important;
    color: #1a0f05 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    flex: 1 !important;
  }
  .p-ag-heb {
    font-size: 8pt !important;
    color: #888 !important;
    font-family: 'Noto Serif Hebrew', serif !important;
    direction: rtl !important;
    margin-left: auto !important;
  }
  .p-ag-evt {
    display: flex !important;
    align-items: flex-start !important;
    gap: 5pt !important;
    padding: 1pt 0 1pt 10pt !important;
    page-break-inside: avoid !important;
  }
  .p-ag-dot {
    width: 6pt !important;
    height: 6pt !important;
    border-radius: 50% !important;
    flex-shrink: 0 !important;
    margin-top: 2pt !important;
    display: inline-block !important;
  }
  .p-ag-title {
    font-size: 9.5pt !important;
    color: #1a0f05 !important;
    flex: 1 !important;
    line-height: 1.4 !important;
  }
  .p-ag-time {
    font-size: 8.5pt !important;
    color: #6b4c00 !important;
    white-space: nowrap !important;
    margin-left: 6pt !important;
    font-style: italic !important;
  }

  /* ── Force all text black / strip gradients ── */
  * {
    box-shadow: none !important;
    text-shadow: none !important;
    animation: none !important;
    transition: none !important;
  }
  h1, h2, h3, h4, h5, h6 { color: #1a0f05 !important; }
  .shimmer-text, .shimmer-gold {
    background: none !important;
    -webkit-background-clip: initial !important;
    background-clip: initial !important;
    -webkit-text-fill-color: #1a0f05 !important;
    color: #1a0f05 !important;
  }
}

/* ── Separate landscape @page for calendar grid ── */
@media print {
  body.print-mode-calendar { }
  body.print-mode-agenda { }
}


/* ── Logo wide-format fix (logo-crown-wide is 1172×782, 3:2 ratio) ── */
.crown-display img,
.crown-display picture img {
  width: auto !important;
  height: auto !important;
  max-width: min(420px, 85%) !important;
  max-height: 280px !important;
  object-fit: contain !important;
  display: block !important;
  margin: 0 auto !important;
}

/* Nav logo: set a fixed height, let width breathe */
.nav-logo picture,
.nav-logo picture img {
  display: block;
  height: 50px !important;
  width: auto !important;
  max-width: 220px !important;
  object-fit: contain !important;
}

/* Footer brand logo */
.footer-brand-logo picture,
.footer-brand-logo picture img,
.footer-brand picture img {
  display: block;
  height: auto !important;
  max-height: 80px !important;
  width: auto !important;
  max-width: 260px !important;
  object-fit: contain !important;
}


/* ╔══════════════════════════════════════════════════════════════════════
   ║  SPRINT FIXES — 12 items from mobile audit
   ╚══════════════════════════════════════════════════════════════════════ */

/* ── FIX 1: Logo squished on mobile navbar ──────────────────────────── */
/* The wide logo (1172×782) needs height capped, width always auto      */
.nav-logo picture { display: flex; align-items: center; }
.nav-logo picture img {
  height: 44px !important;
  width: auto !important;
  max-width: 180px !important;
  object-fit: contain !important;
}
/* Mobile: slightly shorter so it doesn't crowd the hamburger */
@media (max-width: 768px) {
  .nav-logo picture img { height: 36px !important; max-width: 140px !important; }
}
/* Footer brand logo */
.footer-brand picture,
.footer-brand-logo picture { display: block; }
.footer-brand picture img,
.footer-brand-logo picture img {
  height: auto !important;
  max-height: 72px !important;
  width: auto !important;
  max-width: 220px !important;
  object-fit: contain !important;
}

/* ── FIX 2: Home event items — consistent single-column layout ────────
   The Kol Nidre card differed because the inline flex broke when the
   event-title was longer. Force all items to the same grid regardless
   of content length.                                                    */
#upcoming-events-list .event-item {
  display: grid !important;
  grid-template-columns: 68px 1px auto 1px 1fr !important;
  gap: 0 0.9rem !important;
  align-items: center !important;
  min-height: 0 !important;
  flex-wrap: unset !important;
}
#upcoming-events-list .event-item > div:last-child {
  min-width: 0; /* let it shrink without overflow */
}
#upcoming-events-list .event-item > div:last-child > div:first-child {
  white-space: normal !important;
  word-break: break-word !important;
  overflow-wrap: break-word !important;
}
@media (max-width: 480px) {
  #upcoming-events-list .event-item {
    grid-template-columns: 54px 1px auto 1px 1fr !important;
    gap: 0 0.6rem !important;
    padding: 0.75rem 0.9rem !important;
  }
}

/* ── FIX 3: Timeline — track line centred on dots + fills on scroll ────
   The track was at left:1.05rem but dots were at left:-2.55rem relative
   to .timeline-item. The dot centre relative to .timeline is:
     padding-left(3rem) + dot-left(-2.55rem) + half-dot(0.6rem) = 1.05rem
   The track left was already 1.05rem - 1.5px which is correct.
   The real issue on mobile was the main.css pass-5 override moving
   the dot to left:-2.55rem !important and track to left:0.55rem.
   We realign both to agree on the same centreline.                     */
.timeline {
  position: relative !important;
  padding-left: 2.8rem !important;
}
.timeline-track {
  position: absolute !important;
  /* centreline = padding(2.8rem) - dot-half-width(0.6rem) = 2.2rem,
     then shift left half-track-width(1.5px)                          */
  left: calc(2.2rem - 1.5px) !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 3px !important;
  background: rgba(201,162,39,0.15) !important;
  border-radius: 2px !important;
  z-index: 0 !important;
}
.timeline-track-fill {
  position: absolute !important;
  top: 0 !important; left: 0 !important;
  width: 100% !important;
  height: 0% !important; /* animated by JS */
  background: var(--color-gold) !important;
  border-radius: 2px !important;
  transition: height 0.08s linear !important;
}
.timeline-dot {
  position: absolute !important;
  /* same centreline: 2.2rem from left of .timeline, minus full dot width(1.2rem) = 1rem,
     then negate padding: left = -(2.8rem - 1rem) = -1.8rem                             */
  left: -1.8rem !important;
  top: 0.35rem !important;
  width: 1.2rem !important;
  height: 1.2rem !important;
  border-radius: 50% !important;
  background: var(--color-charcoal) !important;
  border: 2px solid var(--color-gold) !important;
  z-index: 2 !important;
  transition: background 0.35s ease, box-shadow 0.35s ease, transform 0.35s ease !important;
}
.timeline-dot.lit {
  background: var(--color-gold) !important;
  box-shadow: 0 0 14px rgba(201,162,39,0.75), 0 0 28px rgba(201,162,39,0.35) !important;
  transform: scale(1.25) !important;
}
.timeline-item {
  position: relative !important;
  margin-bottom: 3.5rem !important;
  opacity: 1 !important; /* don't dim — handled by .lit now */
}
/* Content indented past track+dot */
.timeline-content { padding-left: 0.4rem; }

/* ── FIX 4+5: Watch page — table scrollable, buttons stack on mobile ── */
.schedule-table-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
/* Ensure the table wrapper exists even if only the table is in the HTML */
.schedule-table {
  min-width: 560px; /* forces scroll before crushing */
}
/* Stack the YouTube/Twitch buttons on mobile */
@media (max-width: 600px) {
  .notify-btns {
    flex-direction: column !important;
    align-items: stretch !important;
    flex-wrap: wrap !important;
  }
  .notify-btns .yt-btn,
  .notify-btns .twitch-btn {
    width: 100% !important;
    box-sizing: border-box !important;
    text-align: center !important;
    white-space: normal !important;
  }
}

/* ── FIX 6: Mobile menu donate button — never cut off ───────────────── */
.mobile-menu {
  display: flex !important;
  flex-direction: column !important;
  /* pb ensures the donate btn is never behind iOS home-bar */
  padding-bottom: env(safe-area-inset-bottom, 16px) !important;
}
.mobile-menu-links {
  flex: 1 1 auto !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
}
.mobile-donate-btn {
  flex-shrink: 0 !important;
  margin: 1rem 1.25rem 1.25rem !important;
  display: block !important;
  /* Make sure it's always visible by keeping it out of the scroll area */
  position: relative !important;
  z-index: 2 !important;
}

/* ── FIX 7-9: Sticky filter widgets — flush to navbar, no gap ──────── */
/* The gap is caused by top:94px being too large when the announcement
   bar is gone (mobile) or when --header-h is measured smaller.
   Use var(--header-h) which JS sets to the real header height.        */
.res-controls-sticky-wrap,
.sid-controls-sticky-wrap,
.cal-controls-sticky {
  top: var(--header-h, 94px) !important;
}
@media (max-width: 768px) {
  .res-controls-sticky-wrap,
  .sid-controls-sticky-wrap,
  .cal-controls-sticky {
    top: var(--header-h, 58px) !important;
    padding: 0.75rem 1rem !important;
  }
}

/* ── FIX 8: Blog post chapter nav — flush to navbar ─────────────────── */
.post-toc-sticky {
  top: var(--header-h, 94px) !important;
}
@media (max-width: 768px) {
  .post-toc-sticky {
    top: var(--header-h, 58px) !important;
  }
}

/* ── FIX 10: Featured blog card on mobile — proportional, not giant ─── */
@media (max-width: 700px) {
  .featured-post {
    grid-template-columns: 1fr !important;
    grid-column: 1 !important;
  }
  .featured-post .post-card-img {
    aspect-ratio: 16/9 !important;
    height: auto !important;
    max-height: 240px !important;
    width: 100% !important;
    object-fit: cover !important;
  }
  .featured-post .post-card-body {
    padding: 1.4rem !important;
  }
  .featured-post .post-title {
    font-size: 1.15rem !important;
  }
}

/* ── FIX 11: Calendar list/agenda on mobile — readable layout ──────── */
/* List table: scroll horizontally rather than crushing columns          */
#view-list {
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
}
.cal-list-table {
  min-width: 520px !important;
}

/* Agenda rows on mobile: stack date + event on two lines */
@media (max-width: 600px) {
  .agenda-row {
    display: grid !important;
    grid-template-columns: 64px 1fr !important;
    grid-template-rows: auto auto !important;
    gap: 0.15rem 0.75rem !important;
    align-items: start !important;
    padding: 0.75rem 0.85rem !important;
  }
  .agenda-date {
    grid-row: 1 !important;
    grid-column: 1 !important;
    width: auto !important;
    font-size: 0.85rem !important;
  }
  .agenda-day {
    grid-row: 2 !important;
    grid-column: 1 !important;
    width: auto !important;
    font-size: 0.7rem !important;
  }
  .agenda-heb {
    grid-row: 1 !important;
    grid-column: 2 !important;
    min-width: 0 !important;
    font-size: 0.78rem !important;
    direction: rtl !important;
    text-align: right !important;
  }
  .agenda-title {
    grid-row: 2 !important;
    grid-column: 2 !important;
    font-size: 0.9rem !important;
    word-break: break-word !important;
  }
  .agenda-time {
    grid-row: 3 !important;
    grid-column: 2 !important;
    font-size: 0.75rem !important;
    white-space: normal !important;
  }

  /* Calendar controls: don't get lost behind sticky bar on mobile */
  .cal-controls-sticky {
    position: sticky !important;
    padding: 0.65rem 0.85rem !important;
  }
  .cal-controls-row {
    flex-wrap: wrap !important;
    gap: 0.5rem !important;
  }
  .cal-view-btns {
    width: 100% !important;
    display: flex !important;
    justify-content: stretch !important;
  }
  .cal-view-btn {
    flex: 1 !important;
    text-align: center !important;
    padding: 0.55rem 0.4rem !important;
    font-size: 0.7rem !important;
  }
}

/* ── FIX 12: Blog post tables — horizontal scroll, never overflow ───── */
.post-body table,
.post-body .table-wrap,
article table {
  display: block !important;
  width: 100% !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
  /* Restore table rendering inside the scroll block */
  white-space: nowrap !important;
}
/* But let cell text wrap so it's still readable */
.post-body table td,
.post-body table th,
article table td,
article table th {
  white-space: normal !important;
  min-width: 80px !important;
}


/* ╔══════════════════════════════════════════════════════════════════════
   ║  FINAL 3 FIXES — targeted surgical overrides
   ╚══════════════════════════════════════════════════════════════════════ */

/* ── FIX A: Mobile menu donate button — remove scroll from whole panel ─
   The original .mobile-menu had overflow-y:auto which let the whole
   panel scroll, pushing donate off the bottom.
   Solution: panel is overflow:hidden, only .mobile-menu-links scrolls. */
.mobile-menu {
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  padding-bottom: env(safe-area-inset-bottom, 0px) !important;
}
.mobile-menu-links {
  flex: 1 1 0 !important;          /* take all remaining height */
  min-height: 0 !important;        /* required for flex children to shrink */
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
}
.mobile-donate-btn {
  flex: 0 0 auto !important;       /* never shrink, never grow */
  display: block !important;
  margin: 0.85rem 1.25rem 1.1rem !important;
}

/* ── FIX B: Calendar sticky controls — no bleed on mobile ─────────────
   The inline style margin:0 -2rem was bleeding past the screen edge.
   On mobile we cancel the negative margin and let the box stay inside. */
@media (max-width: 768px) {
  .cal-controls-sticky {
    margin: 0 !important;           /* cancel the -2rem bleed */
    padding: 0.65rem 0.85rem !important;
    overflow: hidden !important;
  }
  .cal-controls-row {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.5rem !important;
    width: 100% !important;
  }
  /* Search + filter on same row */
  .cal-controls-row .cal-search,
  .cal-controls-row .cal-filter-select {
    width: 100% !important;
    box-sizing: border-box !important;
    flex-shrink: 1 !important;
  }
  /* View buttons: full width, equal tabs */
  .cal-view-btns {
    width: 100% !important;
    display: flex !important;
    border-radius: 3px !important;
  }
  .cal-view-btn {
    flex: 1 !important;
    text-align: center !important;
    padding: 0.6rem 0.25rem !important;
    font-size: 0.68rem !important;
    letter-spacing: 0.06em !important;
    white-space: nowrap !important;
  }
  /* Export/Print row */
  .cal-action-btns {
    display: flex !important;
    gap: 0.5rem !important;
    width: 100% !important;
  }
  .cal-ctrl-btn {
    flex: 1 !important;
    text-align: center !important;
  }
  /* Jump-to-month select */
  #cal-month-jump {
    width: 100% !important;
    box-sizing: border-box !important;
  }
}

/* ── FIX C: Timeline — authoritative single calculation ───────────────
   about.html inline CSS:  padding-left:3rem, dot left:-2.55rem, dot w/h:1.2rem
   Dot centre from .timeline left edge = 3rem - 2.55rem + 0.6rem = 1.05rem
   Track must be at: left = 1.05rem - 1.5px (half track width)
   This is exactly what the inline CSS already says. Our main.css sprint
   fix changed padding to 2.8rem which broke the alignment. Reset it.   */
#scroll-timeline.timeline {
  padding-left: 3rem !important;
}
#scroll-timeline .timeline-track {
  left: calc(1.05rem - 1.5px) !important;
  width: 3px !important;
}
#scroll-timeline .timeline-dot {
  left: -2.55rem !important;
  width: 1.2rem !important;
  height: 1.2rem !important;
}



/* ╔══════════════════════════════════════════════════════════════════════
   ║  DEFINITIVE FINAL OVERRIDES — donate + calendar mobile
   ╚══════════════════════════════════════════════════════════════════════ */

/* ── Donate button: sits right below nav items, no gap ──────────────── */
/* Nuke all flex:1 on the links wrapper — set it at every specificity   */
.mobile-menu { overflow: hidden !important; display: flex !important; flex-direction: column !important; }
.mobile-menu > .mobile-menu-links,
.mobile-menu-links {
  flex: 0 0 auto !important;
  flex-grow: 0 !important;
  flex-shrink: 0 !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  max-height: calc(100vh - 80px - 64px) !important;
  padding: 0.5rem 0 !important;
}
.mobile-menu > .mobile-donate-btn,
.mobile-donate-btn {
  flex: 0 0 auto !important;
  flex-grow: 0 !important;
  flex-shrink: 0 !important;
  display: block !important;
  margin: 0.75rem 1.25rem 1rem !important;
}

/* ── Calendar controls on mobile: compact 2-row layout ──────────────── */
@media (max-width: 768px) {
  .cal-controls-sticky {
    margin: 0 !important;
    padding: 0.6rem 0.85rem !important;
    overflow: visible !important;
  }
  /* Search: full width — handled by grid-column: 1/-1 below */
  .cal-controls-row .cal-search {
    box-sizing: border-box !important;
    min-width: 0 !important;
  }
  /* All Events + Jump to month: side by side.
     Switch controls-row to a 2-column grid on mobile so the two selects
     naturally share one row without any wrapper div.                   */
  .cal-controls-row {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    grid-template-rows: auto !important;
    gap: 0.45rem !important;
  }
  .cal-controls-row .cal-search    { grid-column: 1 / -1 !important; }
  .cal-controls-row #cal-cat-filter { grid-column: 1 !important; }
  .cal-controls-row #cal-month-jump { grid-column: 2 !important; }
  .cal-controls-row .cal-view-btns  { grid-column: 1 / -1 !important; }
  .cal-controls-row .cal-action-row { grid-column: 1 / -1 !important; align-self: start !important; }
  .cal-controls-row .cal-loading-badge { grid-column: 1 / -1 !important; }
  /* View tabs: full width, centered text */
  .cal-controls-row .cal-view-btns {
    width: 100% !important;
    display: flex !important;
  }
  .cal-controls-row .cal-view-btn {
    flex: 1 !important;
    text-align: center !important;
    justify-content: center !important;
    padding: 0.55rem 0.15rem !important;
    font-size: 0.62rem !important;
    letter-spacing: 0.04em !important;
    white-space: nowrap !important;
  }
  /* ICS + Print: side by side, auto width */
  .cal-action-row {
    display: flex !important;
    gap: 0.5rem !important;
    align-self: flex-start !important;
  }
  .cal-action-row .cal-ctrl-btn {
    width: auto !important;
    flex: 0 0 auto !important;
    padding: 0.5rem 0.85rem !important;
    font-size: 0.68rem !important;
    white-space: nowrap !important;
  }
}


/* ── Calendar view buttons: text always centered ── */
.cal-view-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}

/* ── Orphan / widow prevention ── */
h1, h2, h3, h4, h5, h6 { text-wrap: balance; }
p, li, blockquote { text-wrap: pretty; }