/* =========================
   THEME TOKENS
   ========================= */
/* ===========================
   CSS Variables for Theming
   =========================== */
:root {
  /* Brand Colors */
  --gh-blue-dark: #042d62;
  --gh-blue-dark-hover: #05418a;
  --gh-blue-light: #bfe4f9;
  --gh-blue-light-hover: #a8d9f5;
  
  /* Typography Scale */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --text-4xl: 2.25rem;
  --text-5xl: 3rem;
  --text-6xl: 3.75rem;
  
  /* Light Mode Colors */
  --bg-primary: #fafafa;
  --bg-secondary: #ffffff;
  --bg-tertiary: #bfe4f9;
  --text-primary: #111827;
  --text-secondary: #374151;
  --text-muted: #9ca3af;
  --text-on-dark: #ffffff;
  --border-subtle: #e5e7eb;
  --shadow-color: rgba(4, 45, 98, 0.1);
  --shadow-color-md: rgba(4, 45, 98, 0.15);
  --shadow-color-lg: rgba(4, 45, 98, 0.2);
  
  /* Legacy Variables */
  --gh-text-on-dark: #ffffff;
  --gh-shadow: rgba(4, 45, 98, 0.1);
  --gh-shadow-md: rgba(4, 45, 98, 0.15);
  --gh-shadow-lg: rgba(4, 45, 98, 0.2);
}

.dark-mode {
  /* Dark Mode Colors - Warm Evening Palette */
  --bg-primary: #1c1815;
  --bg-secondary: #2a2622;
  --bg-tertiary: #3d3832;
  --text-primary: #f5f1e8;
  --text-secondary: #d4cfc3;
  --text-muted: #9a938a;
  --text-on-dark: #f5f1e8;
  --border-subtle: #4a4540;
  --shadow-color: rgba(0, 0, 0, 0.3);
  --shadow-color-md: rgba(0, 0, 0, 0.4);
  --shadow-color-lg: rgba(0, 0, 0, 0.5);
  
  /* Adjusted Brand Colors for Dark Mode */
  --gh-blue-dark: #7aa5c9;
  --gh-blue-dark-hover: #92b6d5;
  --gh-blue-light: #3d3832;
  --gh-blue-light-hover: #4a4540;
  
  /* Legacy Variables for Dark Mode */
  --gh-text-on-dark: #f5f1e8;
  --gh-shadow: rgba(0, 0, 0, 0.3);
  --gh-shadow-md: rgba(0, 0, 0, 0.4);
  --gh-shadow-lg: rgba(0, 0, 0, 0.5);
}

/* ===========================
   BASE STYLES
   =========================== */
html,
body {
  overflow-x: hidden;
  max-width: 100vw;
}

/* ===========================
   HERO & LAYOUT COMPONENTS
   =========================== */
.hero-section {
  background: linear-gradient(to right, rgba(4, 45, 98, 0.9) 50%, rgba(4, 45, 98, 0.5)),
              url('/images/tribute_slideshow_web/001.jpg');
  background-size: cover;
  background-position: center top 30%;
  background-blend-mode: multiply;
}

.section-divider {
  height: 100px;
  background: linear-gradient(to bottom, var(--gh-blue-light), #8acff2);
}

.youtube-container {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
}

.youtube-container iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Dark Mode Hero & Layout */
.dark-mode .hero-section {
  background: linear-gradient(to right, rgba(28, 24, 21, 0.9) 50%, rgba(28, 24, 21, 0.5)),
              url('/images/tribute_slideshow_web/001.jpg');
  background-size: cover;
  background-position: center top 30%;
  background-blend-mode: multiply;
}

.dark-mode .section-divider {
  background: linear-gradient(to bottom, var(--bg-tertiary), var(--bg-secondary));
}

/* ===========================
   ANIMATIONS & TRANSITIONS
   =========================== */
/* Prevent AOS flash - hide elements until AOS initializes */
[data-aos] {
  opacity: 0;
  transition-property: opacity;
}

[data-aos].aos-animate {
  opacity: 1;
}

/* ===========================
   ACCESSIBILITY UTILITIES
   =========================== */
/* Screen reader only - visually hidden but accessible to assistive tech */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* Skip to main content link */
.skip-to-content {
  position: absolute;
  top: -100px;
  left: 0;
  background: var(--gh-blue-dark);
  color: white;
  padding: 0.75rem 1.5rem;
  text-decoration: none;
  font-weight: 600;
  z-index: 9999;
  border-radius: 0 0 0.375rem 0;
}

.skip-to-content:focus {
  top: 0;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .btn {
    border-width: 2px;
  }
  
  .theme-toggle {
    border-width: 3px;
  }
  
  :focus-visible {
    outline-width: 3px;
  }
}

/* Shared theme utilities */
.bg-blue-dark { background-color: var(--gh-blue-dark); }
.bg-blue-light { background-color: var(--gh-blue-light); }
.text-blue-dark { color: var(--gh-text-on-light); }
.text-blue-light { color: var(--gh-blue-light); }
.border-blue-dark { border-color: var(--gh-blue-dark); }
.border-blue-light { border-color: var(--gh-blue-light); }
.border-subtle { border-color: var(--border-subtle); }

/* Hover + focus helpers */
.hover-lift { transition: transform .2s ease, box-shadow .2s ease; }
.hover-lift:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(4,45,98,.2); }
:focus-visible { outline: 2px solid var(--gh-focus); outline-offset: 3px; }

/* =========================
   BUTTON SYSTEM (global)
   ========================= */
.btn {
  appearance: none; -webkit-appearance: none;
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-weight: 600; line-height: 1;
  border-radius: .5rem; /* 8px */
  border: 1px solid transparent;
  padding: .625rem 1rem; /* 10px 16px */
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: transform .15s ease, box-shadow .15s ease, background-color .2s ease, border-color .2s ease, color .2s ease;
}
.btn:focus-visible { outline: 2px solid var(--gh-focus); outline-offset: 3px; }
.btn:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(4,45,98,.15); }
.btn:active { transform: translateY(0); box-shadow: none; }
.btn[disabled], .btn.disabled { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }

.btn > i, .btn > svg { width: 1rem; height: 1rem; display: inline-block; }

/* Variants */
.btn-primary {
  background-color: var(--gh-blue-dark);
  color: var(--gh-text-on-dark);
  border-color: var(--gh-blue-dark);
}
.btn-primary:hover {
  background-color: var(--gh-blue-dark-hover);
  border-color: var(--gh-blue-dark-hover);
}

/* A11y-first outline: high-contrast hover retains white background */
.btn-outline {
  background-color: #ffffff;
  color: var(--gh-text-on-light);
  border-color: var(--gh-blue-dark);
}
.btn-outline:hover {
  background-color: #ffffff;
  color: var(--gh-blue-dark-hover);
  border-color: var(--gh-blue-dark-hover);
  box-shadow: 0 6px 16px rgba(4,45,98,.12);
}

/* Tertiary */
.btn-ghost {
  background: transparent;
  color: var(--gh-text-on-light);
  border-color: transparent;
}
.btn-ghost:hover { background-color: rgba(191, 228, 249, 0.35); }

/* Sizes */
.btn-sm { padding: .5rem .75rem; font-size: .875rem; border-radius: .375rem; }
.btn-lg { padding: .75rem 1.25rem; font-size: 1rem; }

/* =========================
   CARD MEDIA NORMALIZATION
   ========================= */
.media-slot {
  position: relative;
  width: 100%;
  height: 18rem;               /* ~h-72 */
  border-radius: 0.5rem;
  overflow: hidden;
  background: #f3f4f6;         /* gray-100 */
}
@media (min-width: 768px) {
  .media-slot { height: 20rem; } /* ~h-80 */
}
.media-slot > img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: top; 
}

/* Optional two-line clamp to keep card bodies aligned */
.clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* =========================
   GALLERY STYLES
   ========================= */
.gh-gallery-container { background: linear-gradient(to bottom, #bfe4f9, #ffffff); min-height: 100vh; }
.gh-gallery-card { transition: all 0.3s ease; background: #fff; border-radius: 8px; overflow: hidden; box-shadow: 0 4px 6px rgba(4,45,98,.1); }
.gh-gallery-card:hover { transform: translateY(-5px); box-shadow: 0 10px 25px rgba(4,45,98,.2); }
.gh-gallery-img { width: 100%; aspect-ratio: 4/3; object-fit: cover; background: #f7fafc; }
.gh-gallery-caption { padding: 1rem; color: var(--gh-text-on-light); }
.gh-gallery-title { font-weight: 600; margin-bottom: .5rem; }
.gh-gallery-date { color: #6b7280; font-size: .875rem; }

/* Pagination styled to match button system */
.gh-gallery-pagination { display: flex; justify-content: center; gap: .5rem; margin-top: 2rem; }
.gh-gallery-page-btn {
  padding: .5rem .75rem; font-size: .875rem; border-radius: .375rem;
  border:1px solid var(--gh-blue-dark); background:#fff; color: var(--gh-text-on-light);
  font-weight:600; cursor:pointer;
  transition: transform .15s ease, box-shadow .15s ease, background-color .2s ease, border-color .2s ease, color .2s ease;
}
.gh-gallery-page-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(4,45,98,.15);
  background: #ffffff;
  color: var(--gh-blue-dark-hover);
  border-color: var(--gh-blue-dark-hover);
}
.gh-gallery-page-btn.active { background: var(--gh-blue-dark); color:#fff; border-color: var(--gh-blue-dark); }
.gh-gallery-page-btn:disabled { opacity:.5; cursor:not-allowed; }

/* LightGallery overrides */
.lg-outer .lg-thumb-item.active,
.lg-outer .lg-thumb-item:hover { border-color: var(--gh-blue-dark); }
.lg-actions .lg-next, .lg-actions .lg-prev { background-color: rgba(4,45,98,.8); }
.lg-toolbar { background-color: rgba(4,45,98,.9); }

/* Motion + A11y */
@media (prefers-reduced-motion) { .gh-gallery-card { transition: none; } }
.gh-gallery-card:focus-within { outline: 2px solid var(--gh-focus); outline-offset: 4px; }

/* Responsive */
@media (max-width: 640px) { 
  .gh-gallery-grid { 
    grid-template-columns: 1fr; 
  }
  
  /* Reduce gap on mobile to prevent overflow */
  .gap-6 {
    gap: 1rem;
  }
  
  .gap-8 {
    gap: 1.5rem;
  }
}

/* ===========================
   DARK MODE OVERRIDES
   =========================== */

/* Base Elements */
.dark-mode body {
  background-color: var(--bg-primary);
  color: var(--text-secondary);
}

.dark-mode h1,
.dark-mode h2,
.dark-mode h3,
.dark-mode h4,
.dark-mode h5,
.dark-mode h6 {
  color: var(--text-primary);
}

/* Navigation */
.dark-mode nav {
  background-color: var(--bg-secondary);
}

.dark-mode nav a {
  color: var(--text-primary);
}

.dark-mode nav a:hover {
  color: var(--gh-blue-dark);
}

/* Footer */
.dark-mode footer {
  background-color: var(--bg-secondary);
}

.dark-mode footer p,
.dark-mode footer a {
  color: var(--text-secondary);
}

.dark-mode footer a:hover {
  color: var(--gh-blue-dark);
}

/* ===========================
   PRAYER CARD STYLES
   =========================== */
.prayer-card {
  background: var(--bg-secondary);
  box-shadow: 0 10px 30px var(--shadow-color-lg);
  border-radius: 8px;
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 500px;
}

.prayer-card-content {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  line-height: 1.8;
}

.prayer-card-content h2 {
  line-height: 1.3;
}

.prayer-card-content h3 {
  line-height: 1.4;
}

.prayer-card-content p {
  line-height: 1.8;
}

.prayer-card-poem {
  max-width: 100%;
  margin: 0 auto;
  line-height: 1.7;
}

/* Dark Mode Prayer Card */
.dark-mode .prayer-card {
  background: var(--bg-secondary);
  box-shadow: 0 10px 30px var(--shadow-color-lg);
}

.dark-mode .prayer-card-content {
  color: var(--text-secondary);
}

.dark-mode .prayer-card-content h2,
.dark-mode .prayer-card-content h3,
.dark-mode .prayer-card-content h4,
.dark-mode .prayer-card-content strong {
  color: var(--text-primary);
}

/* Buttons */
.dark-mode .btn-primary {
  background-color: var(--gh-blue-dark);
  border-color: var(--gh-blue-dark);
  color: var(--bg-primary);
}

.dark-mode .btn-primary:hover {
  background-color: var(--gh-blue-dark-hover);
  border-color: var(--gh-blue-dark-hover);
  box-shadow: 0 6px 16px var(--shadow-color-md);
}

.dark-mode .btn-outline {
  background-color: transparent;
  border-color: var(--gh-blue-dark);
  color: var(--gh-blue-dark);
}

.dark-mode .btn-outline:hover {
  background-color: var(--gh-blue-dark);
  color: var(--bg-primary);
}

/* Cards and Sections */
.dark-mode .bg-white {
  background-color: var(--bg-secondary) !important;
}

.dark-mode .bg-gray-50 {
  background-color: var(--bg-primary) !important;
}

.dark-mode .bg-blue-light {
  background-color: var(--bg-tertiary) !important;
}

/* Text Colors */
.dark-mode .text-gray-700 {
  color: var(--text-secondary) !important;
}

.dark-mode .text-gray-800 {
  color: var(--text-primary) !important;
}

.dark-mode .text-gray-900 {
  color: var(--text-primary) !important;
}

.dark-mode .text-gray-400 {
  color: var(--text-muted) !important;
}

/* Gallery */
.dark-mode .gh-gallery-container {
  background: linear-gradient(to bottom, var(--bg-tertiary), var(--bg-primary));
}

.dark-mode .gh-gallery-card {
  background: var(--bg-secondary);
  box-shadow: 0 4px 6px var(--shadow-color);
}

.dark-mode .gh-gallery-card:hover {
  box-shadow: 0 10px 25px var(--shadow-color-lg);
}

.dark-mode .gh-gallery-img {
  background: var(--bg-tertiary);
  filter: brightness(0.95) sepia(0.05);
}

.dark-mode .gh-gallery-caption {
  color: var(--text-secondary);
}

.dark-mode .gh-gallery-date {
  color: var(--text-muted);
}

/* Hero Section */
.dark-mode .hero-overlay {
  background: linear-gradient(
    to right,
    rgba(28, 24, 21, 0.85) 0%,
    rgba(28, 24, 21, 0.6) 50%,
    rgba(28, 24, 21, 0.4) 100%
  ) !important;
}

/* Images - Subtle sepia warmth */
.dark-mode img:not(.gh-gallery-img) {
  filter: brightness(0.9) sepia(0.08);
}

/* Borders and Dividers */
.dark-mode .border-gray-200 {
  border-color: var(--border-subtle) !important;
}

.dark-mode .border-gray-300 {
  border-color: var(--border-subtle) !important;
}

/* Shadows */
.dark-mode .shadow {
  box-shadow: 0 1px 3px var(--shadow-color), 0 1px 2px var(--shadow-color);
}

.dark-mode .shadow-md {
  box-shadow: 0 4px 6px var(--shadow-color-md);
}

.dark-mode .shadow-lg {
  box-shadow: 0 10px 15px var(--shadow-color-lg);
}

/* LightGallery Dark Mode */
.dark-mode .lg-outer .lg-thumb-item.active,
.dark-mode .lg-outer .lg-thumb-item:hover {
  border-color: var(--gh-blue-dark);
}

.dark-mode .lg-backdrop {
  background-color: rgba(28, 24, 21, 0.95);
}

.dark-mode .lg-toolbar,
.dark-mode .lg-actions .lg-next,
.dark-mode .lg-actions .lg-prev {
  background-color: rgba(42, 38, 34, 0.9);
}

/* ===========================
   THEME TOGGLE BUTTON
   =========================== */
.theme-toggle-label {
  color: inherit;
}

.dark-mode .theme-toggle-label {
  color: var(--text-secondary);
}

.theme-toggle {
  position: relative;
  width: 60px;
  height: 30px;
  background-color: var(--bg-tertiary);
  border: none;
  border-radius: 15px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  display: flex;
  align-items: center;
  padding: 0 4px;
}

.theme-toggle:focus {
  outline: none;
}

.theme-toggle:focus-visible {
  outline: 2px solid var(--gh-blue-dark);
  outline-offset: 2px;
}

.theme-toggle-slider {
  position: absolute;
  width: 22px;
  height: 22px;
  background-color: var(--gh-blue-dark);
  border-radius: 50%;
  transition: transform 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 4px var(--shadow-color);
  left: 4px;
}

.dark-mode .theme-toggle {
  background-color: var(--bg-tertiary);
}

.dark-mode .theme-toggle-slider {
  transform: translateX(30px);
  background-color: var(--gh-blue-dark);
}

.theme-toggle-icon {
  width: 14px;
  height: 14px;
  color: var(--text-on-dark);
}

@media (prefers-reduced-motion: reduce) {
  .theme-toggle,
  .theme-toggle-slider {
    transition: none;
  }
}

/* ===========================
   SCROLL TO TOP BUTTON
   =========================== */
.page-top-btn {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  width: 48px;
  height: 48px;
  background-color: var(--gh-blue-dark);
  color: #ffffff;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6);
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
  transition: all 0.3s ease;
  z-index: 1000;
}

.page-top-btn:hover {
  background-color: var(--gh-blue-dark-hover);
  color: #ffffff;
  transform: translateY(0) scale(1.1);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.7);
}

.page-top-btn:active {
  transform: translateY(0) scale(0.95);
}

.page-top-btn.visible {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0) !important;
}

.page-top-btn svg {
  width: 24px;
  height: 24px;
  stroke-width: 2.5;
}

.dark-mode .page-top-btn {
  background-color: var(--gh-blue-dark);
  color: var(--text-on-dark);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6);
}

.dark-mode .page-top-btn:hover {
  background-color: var(--gh-blue-dark-hover);
  color: var(--text-on-dark);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.7);
}

@media (prefers-reduced-motion: reduce) {
  .page-top-btn {
    transition: opacity 0.3s ease, visibility 0.3s ease;
    transform: none !important;
  }
}

@media (max-width: 768px) {
  .page-top-btn {
    bottom: 1rem;
    right: 1rem;
    width: 44px;
    height: 44px;
  }
  
  .page-top-btn svg {
    width: 22px;
    height: 22px;
  }
}