/* Cave Adullam Media — small custom styles on top of Tailwind CDN */

html { scroll-behavior: smooth; }

/* ----------------------------------------------------------------
 * Public light/dark theme
 * ---------------------------------------------------------------- */
:root {
  color-scheme: light;
  --theme-bg: #fafafa;
  --theme-bg-subtle: #f5f5f4;
  --theme-surface: #ffffff;
  --theme-surface-elevated: #fafaf9;
  --theme-text: #18181b;
  --theme-text-soft: #44403c;
  --theme-text-muted: #78716c;
  --theme-text-faint: #a8a29e;
  --theme-border: #e7e5e4;
  --theme-border-strong: #d6d3d1;
  --theme-overlay: rgb(0 0 0 / .55);
}

html.dark {
  color-scheme: dark;
  --theme-bg: #0a0a0a;
  --theme-bg-subtle: #111111;
  --theme-surface: #171717;
  --theme-surface-elevated: #1c1c1c;
  --theme-text: #f5f5f5;
  --theme-text-soft: #d6d3d1;
  --theme-text-muted: #a8a29e;
  --theme-text-faint: #78716c;
  --theme-border: #2a2a2a;
  --theme-border-strong: #404040;
  --theme-overlay: rgb(0 0 0 / .72);
}

html.dark body {
  background: var(--theme-bg);
  color: var(--theme-text);
}

/* Icon state is correct on first paint, before the footer utility binds. */
html.dark [data-theme-icon="moon"] { display: none; }
html.dark [data-theme-icon="sun"] { display: block; }
html:not(.dark) [data-theme-icon="moon"] { display: block; }
html:not(.dark) [data-theme-icon="sun"] { display: none; }
[data-theme-toggle]:focus-visible {
  outline: 2px solid var(--theme-text);
  outline-offset: 2px;
}

/* Tailwind CDN utility palette bridge. Keeping this centralized themes every
   existing public route and reusable PHP component without changing layout. */
html.dark .bg-cream { background-color: var(--theme-bg); }
html.dark .bg-cream\/95 { background-color: rgb(10 10 10 / .95); }
html.dark .bg-white { background-color: var(--theme-surface); }
html.dark .bg-white\/95 { background-color: rgb(23 23 23 / .95); }
html.dark .bg-white\/90 { background-color: rgb(23 23 23 / .92); }
html.dark .bg-white\/70 { background-color: rgb(23 23 23 / .74); }
html.dark .bg-stone-50 { background-color: #111111; }
html.dark .bg-stone-100 { background-color: #242424; }
html.dark .bg-stone-200 { background-color: #303030; }
html.dark .bg-stone-300 { background-color: #404040; }

html.dark .text-ink,
html.dark .text-stone-900,
html.dark .text-stone-800 { color: var(--theme-text); }
html.dark .text-stone-700,
html.dark .text-stone-600 { color: var(--theme-text-soft); }
html.dark .text-stone-500 { color: var(--theme-text-muted); }
html.dark .text-stone-400,
html.dark .text-stone-300 { color: var(--theme-text-faint); }

html.dark .border-stone-100,
html.dark .border-stone-200,
html.dark .border-stone-200\/70 { border-color: var(--theme-border); }
html.dark .border-stone-300,
html.dark .border-stone-400,
html.dark .border-stone-500 { border-color: var(--theme-border-strong); }
html.dark .divide-stone-100 > :not([hidden]) ~ :not([hidden]) { border-color: var(--theme-border); }
html.dark .decoration-stone-300 { text-decoration-color: var(--theme-border-strong); }

html.dark .ring-white { --tw-ring-color: #404040; }
html.dark .ring-stone-900,
html.dark .ring-stone-500,
html.dark .ring-stone-400 { --tw-ring-color: #d6d3d1; }
html.dark .focus\:ring-stone-400:focus,
html.dark .focus\:ring-stone-500:focus,
html.dark .focus-visible\:ring-stone-900:focus-visible { --tw-ring-color: #d6d3d1; }
html.dark * { --tw-ring-offset-color: var(--theme-bg); }

html.dark input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
html.dark textarea,
html.dark select {
  background-color: var(--theme-surface);
  border-color: var(--theme-border-strong);
  color: var(--theme-text);
}
html.dark input::placeholder,
html.dark textarea::placeholder { color: #737373; opacity: 1; }
html.dark select option { background: var(--theme-surface); color: var(--theme-text); }
html.dark input:-webkit-autofill,
html.dark textarea:-webkit-autofill,
html.dark select:-webkit-autofill {
  -webkit-text-fill-color: var(--theme-text);
  box-shadow: 0 0 0 1000px var(--theme-surface) inset;
}

html.dark .hover\:bg-white:hover { background-color: #242424; }
html.dark .hover\:bg-white\/70:hover { background-color: rgb(38 38 38 / .78); }
html.dark .hover\:bg-stone-100:hover { background-color: #2a2a2a; }
html.dark .hover\:bg-stone-200:hover { background-color: #383838; }
html.dark .hover\:bg-stone-300:hover { background-color: #484848; }
html.dark .hover\:border-stone-500:hover,
html.dark .hover\:border-stone-900:hover { border-color: #d6d3d1; }
html.dark .hover\:text-ink:hover,
html.dark .hover\:text-stone-900:hover,
html.dark .hover\:text-stone-800:hover,
html.dark .hover\:text-stone-700:hover,
html.dark .hover\:text-stone-600:hover { color: #ffffff; }
html.dark .group:hover .group-hover\:text-stone-900,
html.dark .group:hover .group-hover\:text-stone-800,
html.dark .group:hover .group-hover\:text-stone-700,
html.dark .group:hover .group-hover\:text-stone-600 { color: #ffffff; }
html.dark .group:hover .group-hover\:bg-white { background-color: #f5f5f5; }
html.dark .group:hover .group-hover\:bg-white.group-hover\:text-stone-900 { color: #171717; }

/* High-contrast light actions inside intentionally dark hero/player surfaces. */
html.dark .theme-light-action,
html.dark .theme-light-action:hover {
  background-color: #f5f5f5;
  color: #171717;
}
html.dark .giving-qr {
  background-color: #ffffff;
  border-color: #404040;
}

html.dark .bg-red-50 { background-color: rgb(127 29 29 / .22); }
html.dark .border-red-200 { border-color: rgb(185 28 28 / .5); }
html.dark .text-red-600,
html.dark .text-red-700,
html.dark .text-red-800 { color: #fca5a5; }
html.dark .bg-green-50,
html.dark .bg-green-100 { background-color: rgb(20 83 45 / .28); }
html.dark .border-green-200 { border-color: rgb(22 101 52 / .6); }
html.dark .text-green-700,
html.dark .text-green-800 { color: #86efac; }
html.dark .bg-amber-50 { background-color: rgb(120 53 15 / .25); }
html.dark .border-amber-200 { border-color: rgb(146 64 14 / .6); }
html.dark .text-amber-700,
html.dark .text-amber-800 { color: #fcd34d; }

/* Apply restrained color transitions only after the no-flash theme bootstrap. */
html.theme-ready body,
html.theme-ready .sidebar-shell,
html.theme-ready .minister-rail-panel,
html.theme-ready .rail-viewall,
html.theme-ready .bg-white,
html.theme-ready .bg-cream,
html.theme-ready .bg-stone-50,
html.theme-ready .bg-stone-100,
html.theme-ready input,
html.theme-ready textarea,
html.theme-ready select {
  transition-property: background-color, border-color, color;
  transition-duration: 180ms;
  transition-timing-function: ease;
}

/* line-clamp fallback (Tailwind CDN includes the plugin, this is belt & braces) */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Hero carousel */
.hero-slide { display: none; }
.hero-slide.active { display: block; animation: heroFade .45s ease; }
@keyframes heroFade { from { opacity: 0; } to { opacity: 1; } }

.hero-thumb.active { outline: 2px solid #fff; outline-offset: 2px; }

/* Conference cards: details stay readable on touch devices. On devices with
   a real hover state, the image remains clean until hover or keyboard focus. */
.conference-card-shade {
  background: linear-gradient(to top, rgb(0 0 0 / .76), rgb(0 0 0 / .16) 58%, transparent);
  transition: background .3s ease;
}

.conference-card-details {
  opacity: 1;
  transform: translateY(0);
  transition: opacity .3s ease, transform .3s ease;
}

@media (hover: hover) and (pointer: fine) {
  .conference-card-shade { background: rgb(0 0 0 / 0); }

  .conference-card-details {
    opacity: 0;
    transform: translateY(8px);
  }

  .conference-card:hover .conference-card-shade,
  .conference-card:focus-visible .conference-card-shade {
    background: linear-gradient(to top, rgb(0 0 0 / .82), rgb(0 0 0 / .22) 58%, transparent);
  }

  .conference-card:hover .conference-card-details,
  .conference-card:focus-visible .conference-card-details {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Hide scrollbars on horizontal thumb strips */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* ----------------------------------------------------------------
 * Sidebar shell — three responsive modes
 *   <640px (below sm) : off-canvas mobile drawer (burger opens;
 *                       close button / backdrop / Escape / nav click close)
 *   640-1535px (sm to below 2xl) : 80px icon-only rail; expands over the
 *                       content on hover or keyboard focus-within
 *   >=1536px (2xl+)   : full 256px sidebar, expanded by default
 * ---------------------------------------------------------------- */

/* Mobile drawer size */
.sidebar-shell { width: 82vw; max-width: 340px; }

/* Compact logo mark only exists in the collapsed icon rail */
.sidebar-logo-mark { display: none; }

/* Drawer open state (mobile) + scroll lock */
body.sidebar-open #sidebar { transform: translateX(0); }
body.sidebar-open #sidebarOverlay { display: block; }
@media (max-width: 639.98px) {
  body.sidebar-open { overflow: hidden; }
}

/* --- sm to below 2xl: collapsed icon rail, hover/focus expands --- */
@media (min-width: 640px) and (max-width: 1535.98px) {
  .sidebar-shell {
    width: 80px;
    max-width: none;
    overflow-x: hidden;
    background: var(--theme-bg);
    transition: width .24s ease, margin-right .24s ease, box-shadow .24s ease;
  }

  /* Text fades out; icons stay put (labels are nowrap, shell clips them) */
  .sidebar-label,
  .sidebar-logo-text,
  .sidebar-quick-links {
    opacity: 0;
    pointer-events: none;
    transform: translateX(-0.25rem);
    transition: opacity .18s ease, transform .18s ease;
  }
  .sidebar-quick-links { width: 248px; } /* keep the card's shape while hidden */
  .sidebar-shell .sidebar-logo-mark { display: block; }
  .sidebar-shell .sidebar-logo-text { display: none; }

  /* Expanded: width grows while margin-right shrinks by the same amount,
     so the layout column stays 80px and the panel overlays the page
     instead of reflowing it */
  .sidebar-shell:hover,
  .sidebar-shell:focus-within {
    width: 280px;
    margin-right: -200px;
    z-index: 60;
    box-shadow: 20px 0 48px rgb(0 0 0 / 0.12);
    border-right-color: var(--theme-border);
  }

  .sidebar-shell:hover .sidebar-label,
  .sidebar-shell:focus-within .sidebar-label,
  .sidebar-shell:hover .sidebar-quick-links,
  .sidebar-shell:focus-within .sidebar-quick-links {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(0);
    transition: opacity .18s ease .06s, transform .18s ease .06s;
  }
  .sidebar-shell:hover .sidebar-logo-text,
  .sidebar-shell:focus-within .sidebar-logo-text { display: block; opacity: 1; transform: translateX(0); transition: opacity .18s ease .06s; }
  .sidebar-shell:hover .sidebar-logo-mark,
  .sidebar-shell:focus-within .sidebar-logo-mark { display: none; }
}

/* --- 2xl and above: full sidebar, expanded by default --- */
@media (min-width: 1536px) {
  .sidebar-shell { width: 16rem; max-width: none; background: transparent; }
}

/* ----------------------------------------------------------------
 * MinisterRail
 *
 * <640px (below sm): a static horizontal scroll strip below the main
 * content with names always visible — touch-friendly, no hover.
 *
 * 640-1023px (sm to below lg): a slim vertical rail of portraits that
 * expands over the content on hover or keyboard focus-within.
 *
 * >=1024px (lg+): a permanently expanded right-hand panel — heading,
 * portraits, names/titles and View All always visible. No hover.
 * ---------------------------------------------------------------- */

/* --- Base / touch layout: horizontal strip --- */
.minister-rail-panel { width: 100%; }

.rail-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.rail-head-line { flex: 1; height: 1px; background: var(--theme-border-strong); }

.rail-list {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  padding-bottom: 8px;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.rail-list::-webkit-scrollbar { display: none; }

.rail-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  flex-shrink: 0;
  width: 84px;
}

.rail-viewall {
  display: block;
  margin-top: 12px;
  text-align: center;
  border: 1px solid var(--theme-border-strong);
  background: var(--theme-surface);
  border-radius: 12px;
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 600;
  color: var(--theme-text);
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.05);
  transition: box-shadow .2s;
}
.rail-viewall:hover { box-shadow: 0 4px 10px rgb(0 0 0 / 0.08); }

/* --- lg and above: permanently expanded rail, no hover required --- */
@media (min-width: 1024px) {
  .minister-rail {
    width: 260px;
    flex-shrink: 0;
    margin-top: 0;
  }

  .minister-rail-panel {
    position: sticky;
    top: 24px;
    width: 100%;
    padding: 18px 16px 16px;
    border-radius: 20px;
    border: 1px solid var(--theme-border);
    background: var(--theme-surface);
    box-shadow: 0 1px 2px rgb(0 0 0 / 0.05);
  }

  .rail-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
    overflow: visible;
    padding-bottom: 0;
  }

  .rail-item {
    flex-direction: row;
    text-align: left;
    align-items: center;
    gap: 12px;
    width: 100%;
  }

  .rail-text { white-space: nowrap; }
  .rail-viewall { margin-top: 16px; }
}

/* --- sm to below lg: slim thumbnail rail, hover/focus expands --- */
@media (min-width: 640px) and (max-width: 1023.98px) {
  .minister-rail {
    position: relative;
    width: 80px;
    flex-shrink: 0;
    margin-top: 0;
  }

  /* Absolute panel expands over the content — no reflow */
  .minister-rail-panel {
    position: absolute;
    top: 0;
    right: 0;
    width: 80px;
    padding: 12px 10px 14px;
    border-radius: 20px;
    border: 1px solid transparent;
    background: transparent;
    overflow: hidden;
    transition: width .24s ease, background-color .24s ease,
                border-color .24s ease, box-shadow .24s ease;
    z-index: 30;
  }

  .minister-rail-panel:hover,
  .minister-rail-panel:focus-within {
    width: 252px;
    background: var(--theme-surface);
    border-color: var(--theme-border);
    box-shadow: 0 16px 40px rgb(0 0 0 / 0.10);
  }

  .rail-head {
    height: 0;
    margin: 0;
    opacity: 0;
    overflow: hidden;
    transition: opacity .18s ease .06s, height .18s ease, margin .18s ease;
  }
  .minister-rail-panel:hover .rail-head,
  .minister-rail-panel:focus-within .rail-head {
    height: auto;
    margin-bottom: 14px;
    opacity: 1;
  }

  .rail-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
    overflow: visible;
    padding-bottom: 0;
  }

  .rail-item {
    flex-direction: row;
    text-align: left;
    align-items: center;
    gap: 12px;
    width: 100%;
  }

  .rail-text {
    opacity: 0;
    pointer-events: none;
    transform: translateX(0.25rem);
    white-space: nowrap;
    transition: opacity .18s ease .06s, transform .18s ease .06s;
  }
  .minister-rail-panel:hover .rail-text,
  .minister-rail-panel:focus-within .rail-text {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(0);
  }

  .rail-viewall {
    margin-top: 16px;
    opacity: 0;
    pointer-events: none;
    transform: translateY(4px);
    transition: opacity .18s ease .06s, transform .18s ease .06s, box-shadow .2s;
  }
  .minister-rail-panel:hover .rail-viewall,
  .minister-rail-panel:focus-within .rail-viewall {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
  }
}