/*
Theme Name: River Valley Church
Theme URI: https://myrivervalley.church
Author: Full Stack Tactical
Author URI: https://fullstacktactical.com
Description: A warm, welcoming WordPress block theme for River Valley Christian Fellowship in Bastrop, TX. Golden Hour aesthetic with Shadow Grey, Sunset Orange, and Floral White brand colors.
Version: 15.0.0
Requires at least: 6.4
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: rivervalley-theme
Tags: full-site-editing, block-patterns, custom-colors, custom-logo
*/

/* ============================================================
   RESET & BASE
   ============================================================ */

.wp-site-blocks > footer {
  margin-block-start: 0;
}

/* ============================================================
   GOLDEN CARD COMPONENT
   Used across all pages for content cards
   ============================================================ */

.golden-card {
  background: #FFF5E6;
  color: #231F20;
  border-radius: 12px;
  border: 1px solid rgba(252, 135, 0, 0.12);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.golden-card h2,
.golden-card h3,
.golden-card h4,
.golden-card p {
  color: #231F20;
}

.golden-card:hover {
  box-shadow: 0 4px 16px rgba(252, 135, 0, 0.08);
}

/* ============================================================
   CARD LAYOUTS
   ============================================================ */

.equal-cards > .wp-block-column {
  display: flex;
  flex-direction: column;
  flex-grow: 0;
}

.equal-cards > .wp-block-column > .wp-block-group {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.equal-cards .cta-bottom {
  margin-top: auto;
  justify-content: center;
}

/* ============================================================
   BADGE COMPONENT
   ============================================================ */

.rvc-badge {
  display: inline-block;
  background: #FC8700;
  color: #ffffff;
  font-family: var(--wp--preset--font-family--heading);
  font-weight: 600;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0.35em 1em;
  border-radius: 99px;
}

/* ============================================================
   HEADER STYLES
   ============================================================ */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  background: rgba(35, 31, 32, 0.95);
}

.site-header .wp-block-navigation a {
  color: #FFF8F0;
  font-size: 0.9375rem;
}

.site-header .wp-block-navigation a:hover {
  color: #FC8700;
}

.nav-new-here a {
  color: #FC8700 !important;
  font-weight: 600;
}

/* Mobile PYV button */
.mobile-pyv-cta {
  display: none;
}

@media (max-width: 781px) {
  .mobile-pyv-cta {
    display: block;
  }
  .desktop-nav-items {
    display: none;
  }
}

/* ============================================================
   FOOTER STYLES
   ============================================================ */

.site-footer a {
  color: rgba(255, 248, 240, 0.7);
  text-decoration: none;
  transition: color 0.2s ease;
}

.site-footer a:hover {
  color: #FC8700;
}

.footer-social-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 248, 240, 0.1);
  transition: background 0.2s ease, transform 0.2s ease;
}

.footer-social-icon:hover {
  background: #FC8700;
  transform: scale(1.1);
}

/* ============================================================
   HOVER EFFECTS
   ============================================================ */

.hover-lift {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.hover-lift:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
}

/* ============================================================
   ANIMATION — ENTRANCE
   ============================================================ */

.fade-up {
  opacity: 0;
  transform: translateY(30px);
  animation: fadeUp 0.6s ease forwards;
}

.fade-in {
  opacity: 0;
  animation: fadeIn 0.6s ease forwards;
}

.slide-in-left {
  opacity: 0;
  transform: translateX(-40px);
  animation: slideInX 0.7s ease forwards;
}

.slide-in-right {
  opacity: 0;
  transform: translateX(40px);
  animation: slideInX 0.7s ease forwards;
}

@keyframes fadeUp {
  to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
  to { opacity: 1; }
}

@keyframes slideInX {
  to { opacity: 1; transform: translateX(0); }
}

/* Staggered children */
.stagger-children > * {
  opacity: 0;
  transform: translateY(20px);
  animation: fadeUp 0.5s ease forwards;
}
.stagger-children > *:nth-child(1) { animation-delay: 0.1s; }
.stagger-children > *:nth-child(2) { animation-delay: 0.2s; }
.stagger-children > *:nth-child(3) { animation-delay: 0.3s; }
.stagger-children > *:nth-child(4) { animation-delay: 0.4s; }
.stagger-children > *:nth-child(5) { animation-delay: 0.5s; }
.stagger-children > *:nth-child(6) { animation-delay: 0.6s; }

/* ============================================================
   ANIMATION — SCROLL-TRIGGERED
   ============================================================ */

.animate-on-scroll {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.animate-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================================
   ANIMATION — REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  .animate-on-scroll {
    opacity: 1;
    transform: none;
  }
}

/* ============================================================
   TABLE STYLES
   ============================================================ */

.wp-block-table.is-style-stripes tbody tr:nth-child(odd) {
  background: rgba(252, 135, 0, 0.08);
}

.wp-block-table th {
  font-family: var(--wp--preset--font-family--heading);
  font-weight: 600;
  background: #231F20;
  color: #FFF8F0;
}

.wp-block-table td, .wp-block-table th {
  padding: 0.75rem 1rem;
}

/* ============================================================
   DETAILS / ACCORDION
   ============================================================ */

.wp-block-details summary {
  font-family: var(--wp--preset--font-family--heading);
  font-weight: 600;
  font-size: 1.0625rem;
  cursor: pointer;
  padding: 1rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  list-style: none;
  transition: color 0.2s ease;
}

.wp-block-details summary:hover {
  color: #FC8700;
}

.wp-block-details summary::marker,
.wp-block-details summary::-webkit-details-marker {
  display: none;
}

.wp-block-details summary::after {
  content: "+";
  float: right;
  font-size: 1.25rem;
  font-weight: 400;
  color: #FC8700;
  transition: transform 0.2s ease;
}

.wp-block-details[open] summary::after {
  content: "-";
}

/* ============================================================
   FORM EMBEDS
   ============================================================ */

iframe[data-form-id] {
  max-width: 100%;
  border-radius: 8px;
}

/* ============================================================
   VIDEO WRAPPER
   ============================================================ */

.rvc-video-wrapper {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  border-radius: 12px;
}

.rvc-video-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}

/* ============================================================
   BUTTON OUTLINE STYLE OVERRIDE
   ============================================================ */

.wp-block-button.is-style-outline .wp-block-button__link {
  border: 2px solid currentColor;
  background: transparent;
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
  background: #FC8700;
  border-color: #FC8700;
  color: #ffffff;
}

/* ============================================================
   LIGHT BACKGROUND — TEXT READABILITY FIX
   theme.json defaults to dark bg + white text. Headings inherit.
   JS adds .rvc-light-bg to any .has-background element with a
   computed light background, regardless of preset vs custom hex.
   These rules ensure all text is dark and readable on light sections.
   ============================================================ */

/* Base: set dark text color on light background sections */
.rvc-light-bg {
  color: #231F20;
}

/* Headings — must override inherited white from body */
.rvc-light-bg h1,
.rvc-light-bg h2,
.rvc-light-bg h3,
.rvc-light-bg h4,
.rvc-light-bg h5,
.rvc-light-bg h6,
.rvc-light-bg .wp-block-heading {
  color: #231F20;
}

/* Body text, lists, spans */
.rvc-light-bg p,
.rvc-light-bg li,
.rvc-light-bg span,
.rvc-light-bg td,
.rvc-light-bg label {
  color: #231F20;
}

/* FAQ / Details accordion on light backgrounds */
.rvc-light-bg .wp-block-details summary {
  color: #231F20;
  border-bottom-color: rgba(35, 31, 32, 0.15);
}

/* Muted text — higher contrast on light backgrounds */
.rvc-light-bg .has-muted-color {
  color: #7a726c !important;
}

/* Preserve explicit color overrides */
.rvc-light-bg .has-accent-color {
  color: var(--wp--preset--color--accent) !important;
}

.rvc-light-bg .has-light-color,
.rvc-light-bg .has-white-color {
  color: #ffffff !important;
}

/* Also catch preset light backgrounds (for pattern-only pages) */
.has-surface-background-color,
.has-golden-background-color,
.has-kids-icy-background-color {
  color: #231F20;
}

.has-surface-background-color h1,
.has-surface-background-color h2,
.has-surface-background-color h3,
.has-surface-background-color h4,
.has-surface-background-color p,
.has-surface-background-color li,
.has-golden-background-color h1,
.has-golden-background-color h2,
.has-golden-background-color h3,
.has-golden-background-color h4,
.has-golden-background-color p,
.has-golden-background-color li,
.has-kids-icy-background-color h1,
.has-kids-icy-background-color h2,
.has-kids-icy-background-color h3,
.has-kids-icy-background-color h4,
.has-kids-icy-background-color p,
.has-kids-icy-background-color li {
  color: #231F20;
}

.has-surface-background-color .has-accent-color,
.has-golden-background-color .has-accent-color,
.has-kids-icy-background-color .has-accent-color {
  color: #FC8700;
}

.has-surface-background-color .wp-block-details summary,
.has-golden-background-color .wp-block-details summary,
.has-kids-icy-background-color .wp-block-details summary {
  color: #231F20;
  border-bottom-color: rgba(35, 31, 32, 0.15);
}

.has-surface-background-color .has-muted-color,
.has-golden-background-color .has-muted-color,
.has-kids-icy-background-color .has-muted-color {
  color: #7a726c !important;
}

/* Give way cards on dark theme */
.has-primary-background-color .golden-card,
.has-dark-background-color .golden-card {
  border: 2px solid rgba(252, 135, 0, 0.25);
}

/* ============================================================
   RESPONSIVE ADJUSTMENTS
   ============================================================ */

@media (max-width: 781px) {
  .wp-block-columns.equal-cards {
    gap: 1rem !important;
  }
  .wp-block-columns.equal-cards > .wp-block-column {
    flex-basis: 100% !important;
  }
}

/* ============================================================
   STAFF GRID
   ============================================================ */

.staff-grid > .wp-block-column,
.staff-grid-support > .wp-block-column {
  display: flex;
  flex-direction: column;
  flex-grow: 0;
}

.staff-grid > .wp-block-column > .wp-block-group,
.staff-grid-support > .wp-block-column > .wp-block-group {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.staff-card .wp-block-image img,
.staff-card-compact .wp-block-image img {
  width: 100%;
  object-fit: cover;
  border-radius: 12px;
}

.staff-card .wp-block-image {
  margin-bottom: 0;
}

.staff-card-compact .wp-block-image {
  margin-bottom: 0;
}

.staff-card-compact {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.staff-card-compact:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(252, 135, 0, 0.12);
}

@media (max-width: 781px) {
  .wp-block-columns.staff-grid,
  .wp-block-columns.staff-grid-support {
    gap: 1.5rem !important;
  }
  .wp-block-columns.staff-grid > .wp-block-column,
  .wp-block-columns.staff-grid-support > .wp-block-column {
    flex-basis: 100% !important;
  }
}


/* ============================================================
   RELATED EVENTS — TEC Single Event Page
   ============================================================ */

/* Padding below Related Events section */
.tribe-related-events {
  padding-bottom: 2rem;
}

/* Make time dash visible on related event cards */
.tribe-related-event-info {
  color: #c0c0c0 !important;
}


/* ============================================================
   FOOTER — Reduce spacing below headers
   ============================================================ */

/* Tighten gap between footer headings and their content */
.rvc-footer .wp-block-column > h4.wp-block-heading + p,
.rvc-footer .wp-block-column > h4.wp-block-heading + ul,
.rvc-footer .wp-block-column > h4.wp-block-heading + .wp-block-social-links {
  margin-top: 6px !important;
}


/* Extra space above non-first footer section headings (section separation) */
.rvc-footer .wp-block-column > h4.wp-block-heading ~ h4.wp-block-heading {
  margin-top: 1.5rem !important;
}