/* ==========================================================================
   Light Generation Ministry — Component Styles
   Location: assets/css/main.css
   Depends on: assets/css/variables.css only. .container is defined
   below (no Bootstrap grid).
   ========================================================================== */

/* ==========================================================================
   Reset — the browser's default box model and body margin were never
   zeroed out anywhere in the theme; that default 8px body margin was
   the real source of the gap between the fixed header and the hero.
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
}

img, picture, video, svg {
  max-width: 100%;
  display: block;
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

body {
  font-family: var(--lgm-font-body);
  font-size: var(--lgm-body-size);
  color: var(--lgm-dark-grey);
  line-height: var(--lgm-body-line-height);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--lgm-font-heading);
  color: var(--lgm-heading-color);
  line-height: 1.15;
  margin-top: 0;
}

h1 {
  font-size: var(--lgm-heading-size); /* clamp: 42px \u2192 72px */
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -2px;
}

h2 {
  font-size: clamp(2rem, 4vw + 1rem, 3.5rem); /* \u2192 56px */
  font-weight: 700;
  letter-spacing: -1.5px;
}

h3 {
  font-size: clamp(1.75rem, 3vw + 1rem, 2.5rem); /* \u2192 40px */
  font-weight: 700;
}

h4 {
  font-size: clamp(1.375rem, 2vw + 1rem, 1.875rem); /* \u2192 30px */
  font-weight: 700;
}

h5, h6 {
  font-size: clamp(1.125rem, 1.5vw + 1rem, 1.5rem); /* \u2192 24px */
  font-weight: 600;
}

/* Italic accent — for kicker lines or short editorial accents above a
   headline. Inter, not a separate serif face, per the single-typeface
   system; italic weight is browser-synthesized from Inter's roman cut. */
.lgm-accent-italic {
  font-family: var(--lgm-font-body);
  font-style: italic;
  font-weight: 500;
  color: inherit;
}

/* ==========================================================================
   Section rhythm primitives — shared building blocks for every homepage
   section (Hero, Mission, Bible Verse, About, Donation, Impact Stats,
   Video, Ministries, Gallery, Testimonials, Events, Prayer CTA), so each
   section is built from the same label → heading → paragraph → CTA
   rhythm rather than reinventing spacing per section.
   ========================================================================== */

.lgm-section {
  padding-block: var(--lgm-section-padding);
}

.lgm-section-label {
  display: block;
  margin-bottom: var(--lgm-space-sm);
  color: var(--lgm-orange);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: var(--lgm-label-letter-spacing);
  text-transform: uppercase;
}

.lgm-section-text {
  max-width: var(--lgm-text-width);
}

a {
  color: var(--lgm-navy);
  transition: color var(--lgm-transition-fast);
}

a:hover {
  color: var(--lgm-gold);
}

a:visited {
  color: var(--lgm-dark-grey);
}

.container {
  max-width: var(--lgm-container-max);
  margin-inline: auto;
  padding-inline: var(--lgm-space-md);
}

/* Skip link — visible on keyboard focus only */
.lgm-skip-link {
  position: absolute;
  top: -60px;
  left: var(--lgm-space-sm);
  background: var(--lgm-dark-blue);
  color: var(--lgm-white);
  padding: var(--lgm-space-xs) var(--lgm-space-sm);
  border-radius: var(--lgm-radius-sm);
  z-index: 10000;
  transition: top var(--lgm-transition-fast);
}

.lgm-skip-link:focus {
  top: var(--lgm-space-sm);
  color: var(--lgm-white);
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Global focus ring — smooth fade, used everywhere via :focus-visible */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: none;
  box-shadow: var(--lgm-shadow-focus);
  border-radius: var(--lgm-radius-sm);
  transition: box-shadow var(--lgm-transition-fast);
}

/* ==========================================================================
   Buttons — LGM brand button + micro-interaction system
   ========================================================================== */

.lgm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 28px;
  border-radius: var(--lgm-radius-pill);
  font-weight: 700;
  font-size: 0.9rem;
  white-space: nowrap;
  border: 2px solid transparent;
  cursor: pointer;
  transition:
    transform var(--lgm-transition-fast),
    box-shadow var(--lgm-transition-fast),
    background-color var(--lgm-transition-fast),
    color var(--lgm-transition-fast);
}

.lgm-btn-icon {
  transition: transform var(--lgm-transition-fast);
}

.lgm-btn:hover {
  transform: translateY(-3px) scale(1.03);
}

.lgm-btn:hover .lgm-btn-icon {
  transform: translateX(4px);
}

.lgm-btn:active {
  transform: translateY(0) scale(0.97);
  box-shadow: none;
}

.lgm-btn-primary {
  background: var(--lgm-orange);
  border-color: var(--lgm-orange);
  color: var(--lgm-white);
  box-shadow: var(--lgm-shadow-btn);
}

.lgm-btn-primary:hover {
  background: var(--lgm-orange-hover);
  border-color: var(--lgm-orange-hover);
  color: var(--lgm-white);
}

/* Secondary — transparent with a white outline, meant for dark
   (navy/gradient) section backgrounds like the hero. */
.lgm-btn-secondary {
  background: transparent;
  border-color: var(--lgm-white);
  color: var(--lgm-white);
}

.lgm-btn-secondary:hover {
  background: var(--lgm-white);
  color: var(--lgm-navy);
}

.lgm-btn-danger {
  background: var(--lgm-red);
  border-color: var(--lgm-red);
  color: var(--lgm-white);
  box-shadow: var(--lgm-shadow-sm);
}

.lgm-btn-danger:hover {
  box-shadow: var(--lgm-shadow-md);
}

/* ==========================================================================
   Mobile bottom navigation
   ========================================================================== */

.lgm-mobile-bottom-nav {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: var(--lgm-white);
  box-shadow: 0 -4px 16px rgba(107, 30, 30, 0.10);
}

.lgm-mobile-nav-list {
  list-style: none;
  display: flex;
  justify-content: space-between;
  margin: 0;
  padding: 8px var(--lgm-space-sm);
}

.lgm-mobile-nav-list li {
  flex: 1;
  text-align: center;
}

.lgm-mobile-nav-list a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  font-size: 0.7rem;
  color: var(--lgm-dark-blue);
}

.lgm-mobile-nav-list i {
  font-size: 1.1rem;
  color: var(--lgm-gold);
}

/* ==========================================================================
   Hero
   ========================================================================== */

:root {
  /* Hero-specific tokens, kept together for easy tuning. */
  --lgm-hero-radius: 20px;
  --lgm-hero-inset: var(--lgm-space-md);          /* gap to the viewport edge */
  --lgm-hero-height: clamp(420px, 70vh, 720px);   /* 60-75vh, capped both ends */
  --lgm-hero-overlay: linear-gradient(
    180deg,
    rgba(11, 15, 20, 0.35) 0%,
    rgba(11, 15, 20, 0.55) 100%
  );
}

/* Light neutral page background shows through the inset margin around
   the rounded hero card — matches the reference's framed-photo look. */
body {
  background: var(--lgm-off-white);
}

.lgm-hero {
  position: relative;
  margin: var(--lgm-hero-inset);
  border-radius: var(--lgm-hero-radius);
  overflow: hidden;
}

/* Gradient fallback (no photo uploaded): fixed, capped height. */
.lgm-hero:not(.lgm-hero--photo) {
  height: var(--lgm-hero-height);
  background: linear-gradient(160deg, var(--lgm-ancient-red) 0%, #4a1616 45%, #7a3a2e 100%);
}

/* Photo mode: no forced height at all — the <img> below sits in normal
   flow at its natural aspect ratio, so the section is exactly as tall
   as the image and nothing more. That's what makes "no letterbox
   bars" possible: there's no box for the image to be contained within,
   the image IS the box. */
.lgm-hero--photo .lgm-hero-img {
  display: block;
  width: 100%;
  height: auto;
}

.lgm-hero-overlay {
  position: absolute;
  inset: 0;
  background: var(--lgm-hero-overlay);
}

.lgm-hero-content {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  max-width: 800px;
  margin-inline: auto;
  padding: var(--lgm-space-lg) var(--lgm-space-md);
  color: var(--lgm-white);
  text-align: center;
}

.lgm-eyebrow {
  color: var(--lgm-gold);
  font-weight: 600;
  letter-spacing: 0.08em;
  font-size: 0.85rem;
  margin-bottom: var(--lgm-space-sm);
}

.lgm-hero h1 {
  color: var(--lgm-white);
  font-size: clamp(2.25rem, 5vw, 3.75rem);
  margin-bottom: var(--lgm-space-sm);
}

.lgm-hero-desc {
  color: rgba(255, 255, 255, 0.9);
  font-size: 1.1rem;
  margin: 0 auto var(--lgm-space-lg);
  max-width: 560px;
}

.lgm-hero-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--lgm-space-sm);
}

/* Tablet: tighter inset (gradient-mode height still applies). */
@media (max-width: 991.98px) {
  :root {
    --lgm-hero-height: clamp(380px, 65vh, 620px);
    --lgm-hero-inset: var(--lgm-space-sm);
  }
}

/* Mobile: buttons stack full-width for easy tapping, corners soften
   slightly rather than disappear (keeps the "framed photo" feel
   without wasting vertical space on a phone). */
@media (max-width: 575.98px) {
  :root {
    --lgm-hero-height: clamp(360px, 60vh, 520px);
    --lgm-hero-radius: 14px;
    --lgm-hero-inset: 10px;
  }

  .lgm-hero-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .lgm-hero-actions .lgm-btn {
    width: 100%;
  }
}

/* ==========================================================================
   Sections
   ========================================================================== */

.lgm-bg-white { background: var(--lgm-white); }
.lgm-bg-light-blue { background: var(--lgm-light-blue); }
.lgm-bg-light-grey { background: var(--lgm-light-grey); }

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

.lgm-section-cta {
  text-align: center;
  margin-top: var(--lgm-space-lg);
}

/* CTA sections (e.g. the "Ready to Take the Next Step?" banner) are
   deliberately slimmer than a regular content section — elegant, not
   oversized. Padding comes from --lgm-cta-padding (see variables.css),
   trimmed further in the final UI-refinement pass; internal spacing
   between the heading and the button row is tightened to match. */
.lgm-final-cta {
  padding-block: var(--lgm-cta-padding);
  display: flex;
  align-items: center;
}

.lgm-final-cta .container {
  text-align: center;
}

.lgm-final-cta h2 {
  margin-bottom: var(--lgm-space-sm);
}

.lgm-final-cta .lgm-hero-actions {
  justify-content: center;
}

/* This section's slim, pill-shaped button footprint: ~40-44px tall. */
.lgm-final-cta .lgm-btn {
  padding: 12px 24px;
  border-radius: 999px;
  font-size: 0.85rem;
  line-height: 1.2;
}

/* .lgm-btn-secondary is a white-outline style built for dark
   backgrounds (e.g. the hero). This section now has a light-grey
   background, so its secondary button needs a dark outline instead —
   otherwise it's white-on-near-white and unreadable. */
.lgm-final-cta .lgm-btn-secondary {
  border-color: var(--lgm-navy);
  color: var(--lgm-navy);
}

.lgm-final-cta .lgm-btn-secondary:hover {
  background: var(--lgm-navy);
  color: var(--lgm-white);
}

.lgm-welcome,
.lgm-about-preview {
  max-width: 760px;
  margin-inline: auto;
  text-align: center;
}

.lgm-about-preview .lgm-btn {
  margin-top: var(--lgm-space-sm);
}

/* Ministries grid */
.lgm-ministries-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--lgm-space-md);
}

.lgm-card {
  background: var(--lgm-white);
  border-radius: var(--lgm-radius-card);
  box-shadow: var(--lgm-shadow-card);
  border: 1px solid var(--lgm-border);
  transition: transform var(--lgm-transition-fast), box-shadow var(--lgm-transition-fast);
}

.lgm-ministry-card {
  padding: var(--lgm-space-lg) var(--lgm-space-md);
  text-align: center;
}

.lgm-ministry-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--lgm-shadow-lg);
}

.lgm-ministry-card i {
  font-size: 1.75rem;
  color: var(--lgm-gold);
  margin-bottom: var(--lgm-space-sm);
}

.lgm-ministry-card h3 {
  font-size: 1rem;
  margin: 0;
}

/* Scripture */
.lgm-scripture {
  background: var(--lgm-dark-blue);
  text-align: center;
}

.lgm-scripture blockquote {
  color: var(--lgm-white);
  font-family: var(--lgm-font-body);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  line-height: 1.3;
  max-width: 760px;
  margin: 0 auto;
}

.lgm-scripture cite {
  display: block;
  margin-top: var(--lgm-space-sm);
  color: var(--lgm-gold);
  font-style: normal;
  font-size: 1rem;
}

/* ==========================================================================
   Generic content area (index.php / page.php fallback)
   ========================================================================== */

.lgm-content-area {
  padding: var(--lgm-space-2xl) 0;
}

.lgm-page-title {
  margin-bottom: var(--lgm-space-md);
}

.lgm-page-thumbnail {
  border-radius: var(--lgm-radius-lg);
  overflow: hidden;
  margin-bottom: var(--lgm-space-lg);
  box-shadow: var(--lgm-shadow-md);
}

.lgm-article-content {
  max-width: 760px;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 991px) {
  .lgm-mobile-bottom-nav {
    display: block;
  }

  .lgm-content-area,
  body {
    padding-bottom: 0;
  }

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

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