/*
Theme Name:        Love Beyond Borders NM Custom Theme
Theme URI:         https://lbbnm.org
Author:            ABQ Finest Web Design, LLC
Author URI:        https://abqfinestwebdesign.com
Description:       Custom WordPress theme for Love Beyond Borders New Mexico. Lightweight rebuild preserving the existing site look while replacing the broken Elementor/ThemeREX stack.
Version:           1.0.35
Requires at least: 6.0
Tested up to:      6.9
Requires PHP:      7.4
License:           Private - All Rights Reserved
License URI:       https://lbbnm.org
Text Domain:       lbbnm-custom-theme
Tags:              custom-menu, custom-logo, post-thumbnails, threaded-comments, responsive-layout
*/

/* ============================================
   CSS VARIABLES
   ============================================ */
:root {
  --yellow: #FFBB00;
  --yellow-dark: #e6a800;
  --red: #f42a2a;
  --black: #000000;
  --dark: #2C2C2C;
  --gray-bg: #F2F1EC;
  --gray-border: #e0dfdb;
  --white: #ffffff;
  --text-light: #909090;

  --font-heading: 'Permanent Marker', cursive;
  --font-body: 'Titillium Web', sans-serif;

  --max-width: 1140px;
  --header-height: 80px;
}

/* ============================================
   RESET & BASE
   ============================================ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--dark);
  background: var(--white);
  overflow-x: hidden;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

a:hover {
  color: var(--red);
}

ul {
  list-style: none;
}

/* ============================================
   TYPOGRAPHY
   ============================================ */
h1, h2, h3, h4, h5, h6,
.site-title,
.entry-title,
.widget-title {
  font-family: var(--font-heading);
  line-height: 1.1;
}

h1 { font-size: 4.375rem; }
h2 { font-size: 3rem; }
h3 { font-size: 2.875rem; }
h4 { font-size: 2rem; }
h5 { font-size: 1.5rem; }
h6 { font-size: 1rem; font-family: var(--font-body); font-weight: 700; text-transform: uppercase; letter-spacing: 1px; }

p {
  margin-bottom: 1em;
}

p:last-child {
  margin-bottom: 0;
}

/* ============================================
   LAYOUT UTILITIES
   ============================================ */
.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 30px;
}

.container-wide {
  max-width: 100%;
  padding: 0;
}

.section-padded {
  padding: 80px 0;
}

.text-center {
  text-align: center;
}

/* ============================================
   BUTTONS
   ============================================ */
.btn {
  display: inline-block;
  padding: 12px 28px;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  cursor: pointer;
  transition: all 0.25s ease;
  border: none;
  text-decoration: none;
}

.btn-primary {
  background: var(--red);
  color: var(--white);
  border-radius: 30px;
}

.btn-primary:hover {
  background: #d42020;
  color: var(--white);
}

.btn-outline-dark {
  background: transparent;
  color: var(--white);
  border: 2px solid var(--white);
  border-radius: 4px;
}

.btn-outline-dark:hover {
  background: var(--white);
  color: var(--dark);
}

.btn-donate-header {
  background: var(--dark);
  color: var(--white);
  border-radius: 30px;
  padding: 10px 24px;
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.btn-donate-header:hover {
  background: var(--red);
  color: var(--white);
}

/* ============================================
   HEADER
   ============================================ */
#site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  background: var(--white);
  box-shadow: 0 2px 10px rgba(0,0,0,0.08);
  height: var(--header-height);
  display: flex;
  align-items: center;
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 30px;
}

.site-logo img,
.site-logo .custom-logo {
  max-height: 3.6em;
  width: auto;
  display: block;
}

/* Main Nav */
.main-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.main-nav > ul {
  display: flex;
  align-items: center;
  gap: 32px;
}

.main-nav li {
  position: relative;
}

.main-nav a {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--dark);
  transition: color 0.2s, background-color 0.2s;
  position: relative;
  padding-bottom: 4px;
}

.main-nav a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--red);
  transition: width 0.25s ease;
}

.main-nav a:hover,
.main-nav .current-menu-item > a,
.main-nav .current-menu-ancestor > a {
  color: var(--red);
}

.main-nav a:hover::after,
.main-nav .current-menu-item > a::after,
.main-nav .current-menu-ancestor > a::after {
  width: 100%;
}

.main-nav .menu-item-has-children > a {
  padding-right: 14px;
}

.main-nav .menu-item-has-children > a::before {
  content: '\f107';
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-58%);
  font-size: 0.68rem;
  line-height: 1;
  color: currentColor;
}

.main-nav .sub-menu {
  position: absolute;
  top: calc(100% + 14px);
  left: 0;
  z-index: 1050;
  min-width: 230px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  padding: 10px 0;
  background: var(--white);
  border-top: 3px solid var(--yellow);
  box-shadow: 0 12px 30px rgba(0,0,0,0.14);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
}

.main-nav .sub-menu::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: -17px;
  height: 17px;
}

.main-nav li:hover > .sub-menu,
.main-nav li:focus-within > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

.main-nav .sub-menu li {
  width: 100%;
}

.main-nav .sub-menu a {
  display: block;
  padding: 11px 18px;
  font-size: 0.78rem;
  line-height: 1.35;
  white-space: nowrap;
  color: var(--dark);
}

.main-nav .sub-menu a::after,
.main-nav .sub-menu a::before {
  display: none;
}

.main-nav .sub-menu a:hover,
.main-nav .sub-menu .current-menu-item > a {
  color: var(--red);
  background: rgba(251, 191, 36, 0.16);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 16px;
}

.header-search-toggle {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.1rem;
  color: var(--dark);
  padding: 4px;
  transition: color 0.2s;
}

.header-search-toggle:hover {
  color: var(--red);
}

/* Mobile menu toggle */
.mobile-menu-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  flex-direction: column;
  gap: 5px;
  padding: 4px;
}

.mobile-menu-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--dark);
  transition: all 0.3s;
}

/* Body offset for fixed header */
body {
  padding-top: var(--header-height);
}

/* ============================================
   MOBILE MENU
   ============================================ */
.mobile-menu-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 1100;
}

.mobile-menu {
  position: fixed;
  top: 0;
  right: -100%;
  width: 300px;
  height: 100%;
  background: var(--dark);
  z-index: 1200;
  transition: right 0.35s ease;
  padding: 60px 30px 40px;
  overflow-y: auto;
}

.mobile-menu.is-open {
  right: 0;
}

.mobile-menu-close {
  position: absolute;
  top: 20px;
  right: 20px;
  background: none;
  border: none;
  color: var(--white);
  font-size: 1.5rem;
  cursor: pointer;
  line-height: 1;
}

.mobile-menu .site-logo {
  margin-bottom: 40px;
}

.mobile-menu .site-logo img,
.mobile-menu .site-logo .custom-logo {
  max-height: 50px;
  width: auto;
  display: block;
}

.mobile-nav ul {
  display: flex;
  flex-direction: column;
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
}

.mobile-nav li {
  border-bottom: 1px solid rgba(255,255,255,0.1);
}

.mobile-nav a {
  display: block;
  padding: 14px 0;
  color: var(--white);
  font-family: var(--font-body);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 0.9rem;
  transition: color 0.2s;
}

.mobile-nav a:hover,
.mobile-nav .current-menu-item > a,
.mobile-nav .current-menu-ancestor > a {
  color: var(--yellow);
}

.mobile-nav .sub-menu {
  margin: 0 0 8px 14px;
  padding-left: 14px;
  border-left: 2px solid rgba(251, 191, 36, 0.45);
}

.mobile-nav .sub-menu li {
  border-bottom: 0;
}

.mobile-nav .sub-menu a {
  padding: 9px 0;
  font-size: 0.82rem;
  color: rgba(255,255,255,0.78);
}

.mobile-nav .sub-menu a:hover,
.mobile-nav .sub-menu .current-menu-item > a {
  color: var(--yellow);
}

.mobile-menu-socials {
  display: flex;
  gap: 16px;
  margin-top: 40px;
}

.mobile-menu-socials a {
  color: var(--white);
  font-size: 1.2rem;
  transition: color 0.2s;
}

.mobile-menu-socials a:hover {
  color: var(--yellow);
}

/* ============================================
   HERO SECTION
   ============================================ */
.hero-section {
  display: flex;
  min-height: 540px;
}

.hero-content-col {
  flex: 0 0 50%;
  background-color: var(--yellow);
  background-image: var(--lbbnm-white-decoration);
  background-size: cover;
  background-position: center;
  padding: 10%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.hero-content-col h1 {
  font-size: 4.7rem;
  line-height: 1em;
  margin-bottom: 20px;
  text-align: center;
  color: var(--dark);
}

.hero-content-col h1 span {
  display: block;
}

.hero-tagline {
  text-align: center;
  font-size: 1.125em;
  line-height: 1.5em;
  color: var(--dark);
  margin-bottom: 20px;
}

.hero-cta {
  text-align: center;
}

.hero-slider-col {
  flex: 0 0 50%;
  position: relative;
  overflow: hidden;
  min-height: 400px;
}

.hero-slider {
  width: 100%;
  height: 100%;
  position: relative;
}

.hero-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 0.6s ease;
}

.hero-slide.active {
  opacity: 1;
}

.hero-slider-controls {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding: 0 10px;
  z-index: 10;
}

.slider-btn {
  background: rgba(0,0,0,0.4);
  color: var(--white);
  border: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}

.slider-btn:hover {
  background: rgba(0,0,0,0.7);
}

/* ============================================
   OUR MISSION SECTION
   ============================================ */
.mission-section {
  padding: 80px 30px;
  background: var(--white);
}

.mission-title-wrap {
  text-align: center;
  margin-bottom: 50px;
}

.section-title {
  font-family: var(--font-heading);
  font-size: 2.875rem;
  position: relative;
  display: inline-block;
  isolation: isolate;
}

.section-title .underline-svg {
  position: absolute;
  bottom: 0px;
  left: -5%;
  width: 110%;
  height: 75px;
  fill: var(--yellow);
  opacity: 0.82;
  z-index: -1;
  pointer-events: none;
  overflow: visible;
  /* Start clipped — JS adds .marker-animate to draw left to right */
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1.4s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.section-title.marker-animate .underline-svg {
  clip-path: inset(0 0% 0 0);
}

.mission-desc {
  max-width: 600px;
  margin: 30px auto 0;
  text-align: center;
  font-size: 1rem;
  color: var(--text-light);
}

.mission-posts {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 24px;
  max-width: var(--max-width);
  margin: 0 auto;
}

/* Blog post cards */
/* ── Blog Post Cards — matches live site exactly ── */
.post-card {
  background: var(--white);
  border-top: 4px solid var(--yellow);
  transition: box-shadow 0.2s, transform 0.2s;
}

.post-card:hover {
  box-shadow: 0 4px 20px rgba(0,0,0,0.1);
  transform: translateY(-2px);
}

/* Image card — has featured image */
.post-card.has-thumb .post-card-image {
  overflow: hidden;
  aspect-ratio: 16/10;
  background: #f0f0f0;
}

.post-card.has-thumb .post-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

/* Hide broken image containers — image assigned but file missing */
.post-card.has-thumb .post-card-image img[src=""],
.post-card.has-thumb .post-card-image img:not([src]) {
  display: none;
}

.post-card:hover .post-card-image img {
  transform: scale(1.04);
}

/* No image card — hide completely, no empty space */
.post-card.no-thumb .post-card-image {
  display: none !important;
  height: 0 !important;
  overflow: hidden !important;
}

.post-card-body {
  padding: 24px 20px 20px;
}


/* Category pills */
.post-category-pills,
.post-card-categories,
.related-post-categories {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.post-category-pills {
  margin-top: 16px;
}

.post-card-categories,
.related-post-categories {
  margin-bottom: 12px;
}

.post-category-pills a,
.post-card-categories a,
.related-post-categories a {
  display: inline-block;
  padding: 5px 11px;
  border-radius: 999px;
  background: var(--yellow);
  color: var(--dark);
  font-size: 0.68rem;
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-decoration: none;
}

.post-category-pills a:hover,
.post-card-categories a:hover,
.related-post-categories a:hover {
  background: var(--red);
  color: var(--white);
}

.post-hero .post-category-pills a {
  background: rgba(246, 195, 67, 0.96);
}

.post-hero .post-category-pills a:hover {
  background: var(--red);
}

.related-post-categories a {
  font-size: 0.62rem;
}

.post-card-title {
  font-family: var(--font-heading);
  font-size: 1.2rem;
  margin-bottom: 10px;
  line-height: 1.3;
}

.post-card-title a {
  color: var(--dark);
  text-decoration: none;
}

.post-card-title a:hover {
  color: var(--red);
}

/* Meta — date and comments with icons */
.post-card-meta {
  display: flex;
  gap: 16px;
  font-size: 0.82rem;
  color: var(--red);
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.post-card-meta i {
  margin-right: 4px;
}

/* Excerpt */
.post-card-excerpt {
  font-size: 0.88rem;
  line-height: 1.65;
  color: #555;
  margin-bottom: 16px;
}

.post-card-excerpt p {
  margin: 0;
}

/* Read More button — black, sharp, uppercase */
.post-card-btn {
  display: inline-block;
  padding: 8px 20px;
  background: var(--dark);
  color: var(--white);
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  border-radius: 2px;
  text-decoration: none;
  transition: background 0.2s;
}

.post-card-btn:hover {
  background: var(--red);
  color: var(--white);
}

/* Load More button — matches live site */
.blog-load-more {
  text-align: center;
  padding: 20px 0 60px;
}

.load-more-btn {
  display: inline-block;
  color: var(--red);
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  text-decoration: none;
  line-height: 1.8;
  transition: color 0.2s;
}

.load-more-btn:hover {
  color: var(--dark);
}

.load-more-btn i {
  font-size: 1rem;
  display: block;
  margin-bottom: 4px;
}

/* Help CTA card — the 3rd item with background image */
.post-card-cta {
  position: relative;
  overflow: hidden;
  min-height: 280px;
  display: flex;
  align-items: flex-end;
  border-bottom: 7px solid var(--yellow);
}

.post-card-cta-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
}

.post-card-cta-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,0.85) 100%);
}

.post-card-cta-content {
  position: relative;
  z-index: 2;
  padding: 30px;
  color: var(--white);
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  width: 100%;
}

.post-card-cta-title {
  font-family: var(--font-body);
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.3;
  max-width: 55%;
}

/* ============================================
   PEOPLE + PLANET SECTION
   ============================================ */
.planet-section {
  position: relative;
  background-color: var(--black);
  background-image: var(--lbbnm-rolling-mountains);
  background-size: cover;
  background-position: center;
  padding: 80px 30px;
  color: var(--white);
}

.planet-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.72) 100%);
}

.planet-section .container {
  position: relative;
  z-index: 1;
}

.planet-section .section-title {
  color: var(--white);
  margin-bottom: 10px;
}

.planet-desc {
  text-align: center;
  font-size: 1.125rem;
  margin-bottom: 50px;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.planet-section .section-title .underline-svg {
  fill: var(--yellow);
}

.icons-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px 30px;
  max-width: 900px;
  margin: 0 auto;
}

.icon-item {
  text-align: center;
}

.icon-item-icon {
  font-size: 2.5rem;
  color: var(--yellow);
  margin-bottom: 14px;
  display: block;
}

.icon-item-title {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.icon-item-desc {
  font-size: 0.875rem;
  color: rgba(255,255,255,0.75);
  line-height: 1.5;
}

/* ============================================
   JOIN US SECTION
   ============================================ */
.joinus-section {
  display: flex;
  min-height: 560px;
}

.joinus-image-col {
  flex: 0 0 50%;
  background-image: var(--lbbnm-plant-in-hand);
  background-size: cover;
  background-position: center;
  min-height: 400px;
}

.joinus-content-col {
  flex: 0 0 50%;
  background-color: var(--yellow);
  background-image: var(--lbbnm-white-decoration);
  background-size: cover;
  background-position: center;
  padding: 48px 10%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow-y: auto;
}

.joinus-title {
  font-family: var(--font-heading);
  font-size: 3.5rem;
  color: var(--dark);
  margin-bottom: 12px;
  line-height: 1;
}

.joinus-subtitle {
  font-family: var(--font-body);
  font-size: 1.2rem;
  font-weight: 400;
  color: var(--dark);
  margin-bottom: 28px;
  line-height: 1.4;
}

.joinus-subtitle b {
  font-weight: 700;
}

/* Volunteer form fallback */
.volunteer-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* CF7 form inside Join Us yellow section */
.joinus-content-col .wpcf7 {
  width: 100%;
}

.joinus-content-col .wpcf7 p {
  margin-bottom: 10px;
}

.joinus-content-col .wpcf7 label {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--dark);
  margin-bottom: 4px;
}

.joinus-content-col .wpcf7 input[type="text"],
.joinus-content-col .wpcf7 input[type="email"],
.joinus-content-col .wpcf7 textarea {
  width: 100%;
  padding: 10px 14px;
  font-family: var(--font-body);
  font-size: 0.9rem;
  border: 2px solid rgba(0,0,0,0.15);
  background: rgba(255,255,255,0.85);
  border-radius: 4px;
  transition: border-color 0.2s, background 0.2s;
  box-sizing: border-box;
  color: var(--dark);
}

.joinus-content-col .wpcf7 input:focus,
.joinus-content-col .wpcf7 textarea:focus {
  outline: none;
  border-color: var(--dark);
  background: var(--white);
}

.joinus-content-col .wpcf7 textarea {
  min-height: 100px;
  resize: vertical;
}

.joinus-content-col .wpcf7 input[type="submit"] {
  padding: 12px 32px;
  background: var(--red);
  color: var(--white);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.88rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  border: none;
  border-radius: 30px;
  cursor: pointer;
  transition: background 0.2s;
  margin-top: 4px;
}

.joinus-content-col .wpcf7 input[type="submit"]:hover {
  background: #c41f1f;
}

/* Tighten the joinus content padding when form is present */
.joinus-content-col {
  overflow-y: auto;
}

/* ============================================
   FINANCIAL CONTRIBUTIONS / DONATE SECTION
   ============================================ */
.donate-section {
  background: var(--black);
  color: var(--white);
  padding: 80px 30px;
}

.donate-section .section-title {
  color: var(--white);
}

.donate-section .section-title .underline-svg {
  fill: var(--yellow);
}

.donate-desc {
  text-align: center;
  max-width: 560px;
  margin: 30px auto 40px;
  font-size: 1rem;
  color: rgba(255,255,255,0.8);
}

/* Donation amount buttons */
.donation-amounts {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 30px;
}

.donation-input-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: 24px;
}

.donation-input-wrap .currency {
  display: flex;
  align-items: center;
  background: rgba(255,255,255,0.1);
  padding: 0 12px;
  border: 1px solid rgba(255,255,255,0.2);
  border-right: none;
  color: var(--white);
  font-size: 1rem;
}

.donation-input-wrap input {
  padding: 10px 16px;
  width: 120px;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.2);
  color: var(--white);
  font-family: var(--font-body);
  font-size: 1rem;
}

.donation-input-wrap input:focus {
  outline: none;
  background: rgba(255,255,255,0.15);
}

.amount-btn {
  padding: 9px 20px;
  background: transparent;
  color: var(--white);
  border: 2px solid rgba(255,255,255,0.5);
  border-radius: 30px;
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.amount-btn:hover,
.amount-btn.active {
  background: var(--yellow);
  border-color: var(--yellow);
  color: var(--dark);
}

.donate-now-btn {
  display: block;
  width: fit-content;
  margin: 0 auto;
  padding: 14px 48px;
  background: var(--red);
  color: var(--white);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  border-radius: 30px;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.2s;
}

.donate-now-btn:hover {
  background: #d42020;
  color: var(--white);
}

/* ============================================
   FOOTER
   ============================================ */
#site-footer {
  background: var(--gray-bg);
  padding: 60px 30px 30px;
}

.footer-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr 2fr;
  gap: 40px;
  align-items: start;
  padding-bottom: 40px;
  border-bottom: 1px solid var(--gray-border);
  margin-bottom: 30px;
}

.footer-logo img,
.footer-logo .custom-logo {
  max-height: 3.6em;
  width: auto;
  display: block;
  margin-bottom: 16px;
}

.footer-nav-col h6 {
  margin-bottom: 12px;
  color: var(--dark);
}

.footer-nav-col ul {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.footer-nav-col a {
  font-size: 0.9rem;
  color: var(--dark);
  transition: color 0.2s;
}

.footer-nav-col a:hover {
  color: var(--red);
}

.footer-socials h6 {
  margin-bottom: 12px;
  text-transform: uppercase;
  font-size: 0.8rem;
}

.social-icons {
  display: flex;
  gap: 14px;
}

.social-icons a {
  color: var(--dark);
  font-size: 1.2rem;
  transition: color 0.2s;
}

.social-icons a:hover {
  color: var(--red);
}

.footer-copyright {
  text-align: center;
  font-size: 0.85rem;
  color: var(--text-light);
  max-width: var(--max-width);
  margin: 0 auto;
}

.footer-copyright a {
  color: var(--yellow);
  text-decoration: none;
  font-weight: 600;
}

.footer-copyright a:hover { color: #fff; }

/* ============================================
   SCROLL TO TOP
   ============================================ */
.scroll-top {
  position: fixed;
  bottom: 30px;
  right: 30px;
  width: 42px;
  height: 42px;
  background: var(--dark);
  color: var(--white);
  border: none;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s, background 0.2s;
  z-index: 500;
  font-size: 1rem;
}

.scroll-top.visible {
  opacity: 1;
  pointer-events: all;
}

.scroll-top:hover {
  background: var(--red);
}

/* ============================================
   INNER PAGE CONTENT
   ============================================ */
.page-hero {
  background: var(--lbbnm-rolling-mountains) center center / cover no-repeat;
  padding: 80px 30px;
  text-align: center;
  position: relative;
}

.page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.45);
}

.page-hero .container { position: relative; }

.page-hero h1 {
  font-size: 3rem;
  color: #fff;
}

/* Breadcrumb under hero title */
.page-hero .breadcrumb {
  color: rgba(255,255,255,0.7);
  font-size: 0.9rem;
  margin-top: 8px;
}

.page-hero .breadcrumb a {
  color: rgba(255,255,255,0.7);
  text-decoration: none;
}

.page-hero .breadcrumb a:hover { color: #fff; }

.page-content-wrap {
  max-width: var(--max-width);
  margin: 60px auto;
  padding: 0 30px;
}

/* Blog archive */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  margin-bottom: 60px;
}

/* Contact page */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
}

.contact-info h3 {
  font-size: 1.5rem;
  margin-bottom: 20px;
}

.contact-info p {
  font-size: 1rem;
  color: var(--text-light);
  margin-bottom: 12px;
}

/* CF7 form styling */
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form textarea {
  width: 100%;
  padding: 12px 16px;
  font-family: var(--font-body);
  font-size: 0.95rem;
  border: 1px solid var(--gray-border);
  background: var(--white);
  border-radius: 4px;
  margin-bottom: 16px;
  transition: border-color 0.2s;
}

.wpcf7-form input:focus,
.wpcf7-form textarea:focus {
  outline: none;
  border-color: var(--dark);
}

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

.wpcf7-form input[type="submit"] {
  padding: 13px 36px;
  background: var(--red);
  color: var(--white);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  border: none;
  border-radius: 30px;
  cursor: pointer;
  transition: background 0.2s;
}

.wpcf7-form input[type="submit"]:hover {
  background: #d42020;
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 1024px) {
  h1 { font-size: 3.5rem; }

  .hero-content-col h1 { font-size: 3.5rem; }

  .mission-posts {
    grid-template-columns: 1fr 1fr;
  }

  .footer-inner {
    grid-template-columns: 1fr 1fr 1fr;
  }

  .footer-socials {
    grid-column: 1 / -1;
  }

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

@media (max-width: 768px) {
  :root {
    --header-height: 65px;
  }

  h1 { font-size: 2.5rem; }

  .main-nav,
  .header-search-toggle {
    display: none;
  }

  .mobile-menu-toggle {
    display: flex;
  }

  .hero-section {
    flex-direction: column;
  }

  .hero-content-col {
    flex: unset;
    padding: 8% 9%;
    order: 1;
  }

  .hero-content-col h1 {
    font-size: 3rem;
  }

  .hero-slider-col {
    flex: unset;
    min-height: 280px;
    order: 0;
  }

  .mission-posts {
    grid-template-columns: 1fr;
  }

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

  .joinus-section {
    flex-direction: column;
  }

  .joinus-image-col {
    flex: unset;
    min-height: 260px;
  }

  .joinus-content-col {
    flex: unset;
    padding: 8% 9%;
  }

  .footer-inner {
    grid-template-columns: 1fr 1fr;
    gap: 30px;
  }

  .footer-logo {
    grid-column: 1 / -1;
  }

  .blog-grid {
    grid-template-columns: 1fr;
  }

  .contact-grid {
    grid-template-columns: 1fr;
  }
}

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

  .donation-amounts {
    gap: 8px;
  }

  .amount-btn {
    padding: 8px 14px;
    font-size: 0.85rem;
  }
}

/* ============================================================
   INNER PAGE TEMPLATES — About, What We Do, Donate, Contact
   ============================================================ */

/* --- Two-Column Split (About Us, Contact Us) --- */
.about-split-section {
    padding: 80px 0;
    background: var(--gray-bg);
}

.about-split-wrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: start;
}

.about-text-col {
    display: flex;
    flex-direction: column;
}

.about-image-col {
    display: flex;
    flex-direction: column;
}

.about-text-card {
    background: #fff;
    padding: 13% 13%;
    box-shadow: 0 4px 20px rgba(0,0,0,0.06);
}

.about-text-card h3 {
    font-family: var(--font-heading);
    font-size: 1.8rem;
    color: var(--dark);
    margin-bottom: 20px;
}

.about-text-card p {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--dark);
    margin-bottom: 14px;
}

.about-text-card p:last-child { margin-bottom: 0; }

.about-text-card a {
    color: var(--red);
    text-decoration: none;
}

.about-banner-img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

/* Contact form col fills the right side */
.contact-form-col {
    display: flex;
    align-items: stretch;
}

.contact-form-wrap {
    width: 100%;
    padding: 40px;
    background: #fff;
}

/* CF7 form styling */
.contact-form-wrap .wpcf7 input[type="text"],
.contact-form-wrap .wpcf7 input[type="email"],
.contact-form-wrap .wpcf7 textarea {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-family: var(--font-body);
    font-size: 1rem;
    margin-bottom: 16px;
    box-sizing: border-box;
}

.contact-form-wrap .wpcf7 textarea {
    min-height: 160px;
    resize: vertical;
}

.contact-form-wrap .wpcf7 input[type="submit"] {
    background: var(--color-yellow);
    color: var(--dark);
    border: none;
    padding: 14px 36px;
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    border-radius: 4px;
    transition: background 0.2s;
}

.contact-form-wrap .wpcf7 input[type="submit"]:hover {
    background: var(--red);
    color: #fff;
}

/* --- Donate Intro Section (501c3) --- */
.donate-intro-section {
    padding: 80px 0;
    background: var(--gray-bg);
}

.donate-intro-inner {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}

.donate-intro-inner h2 {
    font-family: var(--font-heading);
    font-size: 2.5rem;
    color: var(--dark);
    margin-bottom: 30px;
}

.donate-intro-inner p {
    font-size: 1.05rem;
    line-height: 1.8;
    color: var(--dark);
    margin-bottom: 20px;
}

/* --- People & Planet Section (What We Do) --- */
.people-planet-section {
    padding: 80px 0;
    background: var(--lbbnm-rolling-mountains) center center / cover no-repeat;
    position: relative;
}

.people-planet-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.55);
}

.people-planet-section .container { position: relative; }

.people-planet-section .section-intro {
    text-align: center;
    margin-bottom: 50px;
}

.people-planet-section .section-intro h2 {
    font-family: var(--font-heading);
    font-size: 2.5rem;
    color: #fff;
    margin-bottom: 12px;
}

.people-planet-section .section-intro p {
    color: rgba(255,255,255,0.8);
    font-size: 1.1rem;
}

.icons-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    max-width: 900px;
    margin: 0 auto;
}

.icon-item {
    text-align: center;
    color: #fff;
}

.icon-item i {
    font-size: 2.4rem;
    color: var(--color-yellow);
    margin-bottom: 16px;
    display: block;
}

.icon-item h4 {
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 8px;
}

.icon-item p {
    font-size: 0.9rem;
    color: rgba(255,255,255,0.75);
    line-height: 1.6;
}

/* --- Responsive: Inner Page Templates --- */
@media (max-width: 900px) {
    .about-split-wrap {
        grid-template-columns: 1fr;
    }
    .icons-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .about-text-card {
        padding: 8% 9%;
    }
    .contact-form-wrap {
        padding: 24px;
    }
    .icons-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    .donate-intro-inner h2 {
        font-size: 1.8rem;
    }
}

/* ============================================================
   WHAT WE DO PAGE — Two-card layout matching live site
   ============================================================ */

.wwd-mission-intro {
    padding: 60px 30px 30px;
    text-align: center;
    background: var(--gray-bg);
}

.wwd-mission-heading {
    font-family: var(--font-heading);
    font-size: 2.8rem;
    color: var(--dark);
    margin-bottom: 16px;
}

.wwd-mission-sub {
    font-size: 1.05rem;
    color: var(--dark);
    max-width: 680px;
    margin: 0 auto;
    line-height: 1.7;
}

.wwd-cards-section {
    padding: 20px 0 60px;
    background: var(--gray-bg);
}

.wwd-cards-grid {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* Each card is a bordered box, two halves */
.wwd-card {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border: 1px solid #e0dfdb;
    margin-bottom: 30px;
}

.wwd-card-text {
    padding: 50px 50px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.wwd-card-text h3 {
    font-family: var(--font-body);
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--dark);
    margin-bottom: 18px;
    line-height: 1.3;
}

.wwd-card-text p {
    font-size: 0.95rem;
    line-height: 1.75;
    color: var(--dark);
    margin-bottom: 24px;
}

.btn-wwd-read-more {
    display: inline-block;
    background: var(--dark);
    color: #fff;
    padding: 10px 28px;
    font-family: var(--font-body);
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-decoration: none;
    border-radius: 2px;
    transition: background 0.2s;
    align-self: flex-start;
}

.btn-wwd-read-more:hover {
    background: var(--red);
}

.wwd-card-image {
    overflow: hidden;
}

.wwd-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    min-height: 320px;
}

/* Reverse card: image left, text right */
.wwd-card-reverse {
    /* already reversed by DOM order — image col comes first */
}

@media (max-width: 768px) {
    .wwd-card {
        grid-template-columns: 1fr;
    }
    .wwd-card-image img {
        min-height: 220px;
    }
    .wwd-card-text {
        padding: 32px 24px;
    }
    .wwd-mission-heading {
        font-size: 2rem;
    }
}

/* ============================================================
   FINANCIAL SECTION — inner page version (aliases + fixes)
   ============================================================ */

/* The inner page templates use .financial-section — wire it to
   the same black background as the homepage .donate-section    */
.financial-section {
  background: var(--black);
  color: var(--white);
  padding: 80px 30px;
  text-align: center;
}

.financial-inner {
  max-width: 700px;
  margin: 0 auto;
}

/* ── Marker / highlighter heading ─────────────────────────── */
/*
   Uses the EXACT SVG path from lbbnm.org (sc_item_title_text_wrap).
   The SVG is injected via PHP helper lbbnm_marker_title() as a
   sibling element. JS (IntersectionObserver) adds .marker-animate
   when the heading scrolls into view, which triggers the stroke-
   dashoffset draw from 0→full length. No page-load firing.
*/

/* Wrapper that makes the heading + SVG stack correctly */
.marker-title-wrap {
  display: inline-block;
  position: relative;
  isolation: isolate;
}

/* The SVG sits absolutely behind the text */
.marker-title-wrap .marker-svg {
  position: absolute;
  left: -5%;
  bottom: -8px;
  width: 110%;
  height: 75px;
  overflow: visible;
  z-index: -1;
  pointer-events: none;
}

.marker-title-wrap .marker-svg path {
  fill: var(--yellow);
  opacity: 0.82;
}

/* SVG itself gets the clip-path animation (not the path element) */
.marker-title-wrap .marker-svg {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1.4s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.marker-title-wrap.marker-animate .marker-svg {
  clip-path: inset(0 0% 0 0);
}

.financial-desc {
  font-size: 1rem;
  color: rgba(255,255,255,0.8);
  line-height: 1.7;
  margin: 20px auto 40px;
  max-width: 560px;
}

/* ── Donate amount buttons (inner pages use .btn-donate-amount) */
.donate-buttons-wrap {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 28px;
}

.btn-donate-amount {
  padding: 9px 22px;
  background: transparent;
  color: var(--white);
  border: 2px solid rgba(255,255,255,0.5);
  border-radius: 30px;
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-donate-amount:hover,
.btn-donate-amount.active {
  background: var(--yellow);
  border-color: var(--yellow);
  color: var(--dark);
}

/* ── Donate Now CTA button (inner pages use .btn-donate-now) */
.btn-donate-now {
  display: inline-block;
  padding: 14px 48px;
  background: var(--red);
  color: var(--white);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  border-radius: 30px;
  border: none;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.2s;
  margin-top: 8px;
}

.btn-donate-now:hover {
  background: #c41f1f;
  color: var(--white);
}

/* ── 501c3 heading on Donate page ─────────────────────────── */
.donate-intro-section {
  padding: 80px 30px;
  background: var(--gray-bg);
}

.donate-intro-inner {
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
}

.donate-intro-inner h2 {
  font-family: var(--font-heading);
  font-size: 2.8rem;
  color: var(--dark);
  margin-bottom: 30px;
}

.donate-intro-inner p {
  font-size: 1.05rem;
  line-height: 1.8;
  color: var(--dark);
  margin-bottom: 20px;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

/* ── What We Do mission heading ───────────────────────────── */
.wwd-mission-heading {
  font-family: var(--font-heading);
  font-size: 2.8rem;
  color: var(--dark);
  margin-bottom: 16px;
}

/* ── Financial Contributions heading ─────────────────────── */
.financial-title {
  font-family: var(--font-heading);
  font-size: 3rem;
  color: var(--white);
  margin-bottom: 24px;
}

@media (max-width: 600px) {
  .financial-title   { font-size: 2rem; }
  .donate-intro-inner h2 { font-size: 1.8rem; }
  .btn-donate-now    { padding: 12px 32px; }
}

/* ── Admin bar offset — prevents header hiding behind WP admin bar ─── */
.admin-bar #site-header {
  top: 32px;
}
@media screen and (max-width: 782px) {
  .admin-bar #site-header {
    top: 46px;
  }
}
/* Push page content down when admin bar is showing */
.admin-bar body {
  padding-top: 32px;
}
@media screen and (max-width: 782px) {
  .admin-bar body {
    padding-top: 46px;
  }
}

/* ============================================================
   DONATE PAGE — interactive amount picker
   ============================================================ */

/* Amount buttons on donate page are <button> not <a> */
#donateAmountPicker .btn-donate-amount {
  cursor: pointer;
  font-family: var(--font-body);
}

/* Custom amount row */
.donate-custom-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin-bottom: 24px;
}

.donate-custom-currency {
  background: rgba(255,255,255,0.15);
  border: 2px solid rgba(255,255,255,0.4);
  border-right: none;
  color: var(--white);
  padding: 10px 14px;
  font-size: 1.1rem;
  line-height: 1;
  border-radius: 30px 0 0 30px;
}

.donate-custom-input {
  background: rgba(255,255,255,0.1);
  border: 2px solid rgba(255,255,255,0.4);
  border-left: none;
  color: var(--white);
  padding: 10px 18px;
  font-family: var(--font-body);
  font-size: 1rem;
  width: 140px;
  border-radius: 0 30px 30px 0;
  outline: none;
}

.donate-custom-input::placeholder { color: rgba(255,255,255,0.45); }
.donate-custom-input:focus { background: rgba(255,255,255,0.18); }

/* Remove number spinners */
.donate-custom-input::-webkit-outer-spin-button,
.donate-custom-input::-webkit-inner-spin-button { -webkit-appearance: none; }
.donate-custom-input[type=number] { -moz-appearance: textfield; }

/* Secure note under button */
.donate-secure-note {
  margin-top: 16px;
  font-size: 0.8rem;
  color: rgba(255,255,255,0.5);
}

.donate-secure-note .fa-lock {
  margin-right: 4px;
}

/* No PayPal configured notice */
.donate-no-paypal {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 8px;
  padding: 20px 28px;
  margin-top: 24px;
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
}

.donate-no-paypal p {
  color: rgba(255,255,255,0.7);
  font-size: 0.9rem;
  line-height: 1.6;
  margin: 0;
}

.donate-no-paypal .fa-info-circle {
  color: var(--yellow);
  margin-right: 6px;
}

.donate-no-paypal strong {
  color: var(--white);
}

/* ============================================================
   SINGLE POST PAGE
   ============================================================ */

/* Hero — featured image bg, dark overlay, white text */
.post-hero {
  background-size: cover;
  background-position: center top;
  position: relative;
  padding: 120px 30px 60px;
  min-height: 420px;
  display: flex;
  align-items: flex-end;
}

.post-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.52);
}

.post-hero .container { position: relative; }

.post-hero-title {
  font-family: var(--font-heading);
  font-size: 2.6rem;
  color: var(--white);
  margin-bottom: 12px;
  line-height: 1.15;
  max-width: 780px;
}

.post-hero-meta {
  display: flex;
  gap: 24px;
  font-size: 0.85rem;
  color: rgba(255,255,255,0.75);
}

.post-hero-meta i { margin-right: 5px; color: var(--red); }
.post-hero-meta a { color: rgba(255,255,255,0.75); text-decoration: none; }
.post-hero-meta a:hover { color: var(--white); }

/* Body — two-column: content card + sidebar */
.post-body-section {
  padding: 50px 0 60px;
  background: var(--gray-bg);
}

.post-body-wrap {
  display: grid;
  grid-template-columns: minmax(0, 2.5fr) minmax(0, 1fr);
  gap: 30px;
  align-items: start;
}

/* Content card */
.post-content-card {
  background: var(--white);
  padding: 40px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}

.post-featured-img {
  margin-bottom: 28px;
}

.post-featured-img img {
  width: 100%;
  height: auto;
  display: block;
  max-height: 420px;
  object-fit: cover;
}

.post-entry-content {
  font-size: 0.97rem;
  line-height: 1.8;
  color: var(--dark);
  /* Reset any inherited link styles */
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.post-entry-content a {
  color: var(--red);
  text-decoration: underline;
}

.post-entry-content p { margin-bottom: 1.2em; }
.post-entry-content h2,
.post-entry-content h3 {
  font-family: var(--font-heading);
  margin: 1.5em 0 0.5em;
}

/* Tags */
.post-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid #e8e7e2;
}

.post-tag {
  display: inline-block;
  padding: 5px 14px;
  background: transparent;
  border: 1px solid #ccc;
  color: var(--dark);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-decoration: none;
  transition: all 0.2s;
}

.post-tag:hover {
  background: var(--dark);
  border-color: var(--dark);
  color: var(--white);
}

/* Social share */
.post-share {
  display: flex;
  gap: 10px;
  margin-top: 24px;
  justify-content: flex-end;
}

.share-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  font-size: 0.85rem;
  text-decoration: none;
  transition: opacity 0.2s;
}

.share-btn:hover { opacity: 0.8; color: var(--white); }
.share-twitter  { background: #000; }
.share-facebook { background: #1877f2; }
.share-email    { background: #555; }

/* Prev / Next nav */
.post-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid #e8e7e2;
}

.post-nav-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--red);
  margin-bottom: 6px;
}

.post-nav-title {
  display: block;
  font-family: var(--font-heading);
  font-size: 1rem;
  color: var(--dark);
  text-decoration: none;
  line-height: 1.3;
}

.post-nav-title:hover { color: var(--red); }

.post-nav-next {
  text-align: right;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.post-nav-thumb {
  margin-top: 8px;
}

.post-nav-thumb img {
  width: 70px;
  height: 50px;
  object-fit: cover;
  display: block;
}

/* Leave a Comment button */
.post-comments-wrap {
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid #e8e7e2;
}

.btn-leave-comment {
  width: 100%;
  padding: 16px 24px;
  background: var(--red);
  color: var(--white);
  border: none;
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  border-radius: 30px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: background 0.2s;
}

.btn-leave-comment:hover { background: #c41f1f; }

.btn-leave-comment .fa-chevron-down {
  transition: transform 0.25s;
}

.comments-collapse {
  display: none;
  padding-top: 20px;
}

.comments-collapse.is-open { display: block; }

/* Sidebar */
.post-sidebar {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.post-sidebar-widget {
  background: var(--white);
  padding: 24px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
  border-top: 4px solid var(--red);
}

.post-sidebar-widget .widget-title {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  color: var(--dark);
  margin: 0 0 14px;
}

.post-sidebar-widget p {
  font-size: 0.95rem;
  line-height: 1.55;
  color: #6f6f6f;
  margin: 0 0 14px;
}

.post-sidebar-widget ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.post-sidebar-widget li {
  border-bottom: 1px solid #ecebe6;
  padding: 9px 0;
}

.post-sidebar-widget li:last-child {
  border-bottom: 0;
}

.post-sidebar-widget a {
  color: var(--dark);
  text-decoration: none;
  font-weight: 700;
}

.post-sidebar-widget a:hover {
  color: var(--red);
}

.post-sidebar .wp-block-button__link,
.lbb-sidebar-donate-button {
  display: inline-block;
  background: var(--red);
  color: var(--white) !important;
  padding: 11px 22px;
  border-radius: 30px;
  font-size: 0.82rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-decoration: none;
}

.post-sidebar .wp-block-button__link:hover,
.lbb-sidebar-donate-button:hover {
  background: #c41f1f;
  color: var(--white) !important;
}

.lbb-sidebar-small-links a {
  display: block;
  padding: 8px 0;
  border-bottom: 1px solid #ecebe6;
}

/* Related posts */
.related-posts-section {
  padding: 60px 0;
  background: var(--gray-bg);
  border-top: 1px solid #e0dfdb;
}

.related-posts-heading {
  font-family: var(--font-heading);
  font-size: 2rem;
  color: var(--dark);
  margin-bottom: 28px;
}

.related-posts-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.related-post-card {
  background: var(--white);
  box-shadow: 0 2px 10px rgba(0,0,0,0.06);
}

.related-post-thumb {
  display: block;
  overflow: hidden;
}

.related-post-thumb img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  display: block;
  transition: transform 0.3s;
}

.related-post-thumb:hover img {
  transform: scale(1.03);
}

.related-post-body {
  padding: 20px;
}

.related-post-title {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  margin-bottom: 10px;
  line-height: 1.3;
}

.related-post-title a {
  color: var(--dark);
  text-decoration: none;
}

.related-post-title a:hover { color: var(--red); }

.related-post-meta {
  font-size: 0.8rem;
  color: #909090;
  margin-bottom: 14px;
  line-height: 1.8;
}

.related-post-meta i {
  color: var(--red);
  margin-right: 4px;
}

.btn-read-more {
  display: inline-block;
  padding: 8px 20px;
  background: var(--dark);
  color: var(--white);
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  text-decoration: none;
  border-radius: 2px;
  transition: background 0.2s;
}

.btn-read-more:hover { background: var(--red); color: var(--white); }

/* Responsive */
@media (max-width: 900px) {
  .post-body-wrap {
    grid-template-columns: 1fr;
  }
  .related-posts-grid { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  .post-hero-title { font-size: 1.8rem; }
  .post-content-card { padding: 24px 20px; }
  .post-nav { grid-template-columns: 1fr; }
  .post-nav-next { text-align: left; align-items: flex-start; }
}

/* ============================================================
   PRIVACY POLICY PAGE
   ============================================================ */

.privacy-section {
  padding: 60px 0 80px;
  background: var(--gray-bg);
}

.privacy-content {
  max-width: 860px;
  margin: 0 auto;
  background: var(--white);
  padding: 50px 60px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}

.privacy-updated {
  font-size: 0.85rem;
  color: #909090;
  margin-bottom: 32px;
  font-style: italic;
}

.privacy-content h2 {
  font-family: var(--font-heading);
  font-size: 1.6rem;
  color: var(--dark);
  margin: 36px 0 12px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--yellow);
}

.privacy-content h2:first-of-type {
  margin-top: 0;
}

.privacy-content h3 {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 700;
  color: var(--dark);
  margin: 20px 0 8px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.privacy-content p {
  font-size: 0.95rem;
  line-height: 1.8;
  color: #444;
  margin-bottom: 16px;
}

.privacy-content ul {
  margin: 0 0 16px 24px;
  padding: 0;
}

.privacy-content ul li {
  font-size: 0.95rem;
  line-height: 1.8;
  color: #444;
  margin-bottom: 6px;
}

.privacy-content a {
  color: var(--red);
  text-decoration: underline;
}

.privacy-content a:hover {
  color: var(--dark);
}

.privacy-contact {
  background: var(--gray-bg);
  border-left: 4px solid var(--yellow);
  padding: 20px 24px;
  margin-top: 8px;
  border-radius: 0 4px 4px 0;
}

.privacy-contact p {
  margin-bottom: 8px;
}

.privacy-contact p:last-child {
  margin-bottom: 0;
}

@media (max-width: 768px) {
  .privacy-content {
    padding: 32px 24px;
  }
  .privacy-content h2 {
    font-size: 1.3rem;
  }
}

/* ============================================================
   AFWD POLISH PASS v1.0.2
   Page comparison cleanup: header, icons, blog masonry, forms,
   What We Do spacing, and donation button labels.
   ============================================================ */

/* Header/logo closer to original scale */
.site-logo img,
.site-logo .custom-logo {
  max-height: 48px;
}

.header-inner {
  padding-left: 26px;
  padding-right: 26px;
}

/* Keep People + Planet icons yellow, including duplicate icon rules */
.planet-section .icon-item-icon,
.planet-section .icon-item i,
.icons-grid .icon-item-icon,
.icons-grid .icon-item i {
  color: var(--yellow) !important;
}

/* Slightly cleaner breathing room for donation sections */
.financial-section {
  padding-top: 74px;
  padding-bottom: 78px;
}

.financial-desc {
  margin-bottom: 30px;
}

/* What We Do: tighten accidental gaps and move closer to original staggered card feel */
.wwd-cards-section {
  padding-top: 22px;
  padding-bottom: 72px;
}

.wwd-cards-grid {
  max-width: 1040px;
  margin-left: auto;
  margin-right: auto;
  gap: 28px;
}

.wwd-card {
  background: var(--white);
  margin-bottom: 0;
  box-shadow: none;
}

.wwd-card + .wwd-card {
  margin-top: 0;
}

.wwd-card-text {
  min-height: 300px;
}

.wwd-card-image img {
  min-height: 330px;
}

/* Blog archive: closer to the old staggered/masonry card layout */
.blog-grid {
  display: block;
  column-count: 3;
  column-gap: 42px;
  max-width: 1040px;
  margin-left: auto;
  margin-right: auto;
}

.blog-grid .post-card {
  display: inline-block;
  width: 100%;
  margin: 0 0 46px;
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
}

.blog-grid .post-card-body {
  padding: 24px 20px 24px;
}

.blog-grid .post-card-title {
  font-size: 1.25rem;
}

.blog-grid .post-card.no-thumb {
  min-height: 245px;
}

.blog-grid .post-card.has-thumb .post-card-image {
  aspect-ratio: 16 / 9.8;
}

.blog-load-more {
  clear: both;
  padding-top: 12px;
}

/* Contact Form 7: closer to old rounded contact form while keeping CF7 flexibility */
.contact-form-wrap {
  background: transparent;
  padding: 28px 34px;
}

.contact-form-wrap .wpcf7 form,
.contact-form-wrap .wpcf7-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px 18px;
  align-items: start;
}

.contact-form-wrap .wpcf7 form > p,
.contact-form-wrap .wpcf7-form > p {
  margin: 0;
}

.contact-form-wrap .wpcf7 form > p:nth-of-type(n+3),
.contact-form-wrap .wpcf7-form > p:nth-of-type(n+3),
.contact-form-wrap .wpcf7-response-output {
  grid-column: 1 / -1;
}

.contact-form-wrap .wpcf7 label {
  display: block;
  color: transparent;
  font-size: 0;
  line-height: 0;
}

.contact-form-wrap .wpcf7 input[type="text"],
.contact-form-wrap .wpcf7 input[type="email"],
.contact-form-wrap .wpcf7 input[type="tel"],
.contact-form-wrap .wpcf7 input[type="url"],
.contact-form-wrap .wpcf7 input[type="number"],
.contact-form-wrap .wpcf7 textarea {
  border: 1px solid #d9d7d0;
  border-radius: 28px;
  background: #fff;
  min-height: 54px;
  padding: 14px 24px;
  margin: 0;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.03);
}

.contact-form-wrap .wpcf7 textarea {
  border-radius: 24px;
  min-height: 178px;
  padding-top: 20px;
}

.contact-form-wrap .wpcf7 input[type="submit"] {
  background: #9b9b9b;
  color: #fff;
  border-radius: 28px;
  padding: 14px 32px;
  min-width: 145px;
  font-size: 0.86rem;
  letter-spacing: 1px;
}

.contact-form-wrap .wpcf7 input[type="submit"]:hover {
  background: var(--red);
  color: #fff;
}

.contact-form-wrap .wpcf7 .wpcf7-list-item {
  margin-left: 0;
}

.contact-form-wrap .wpcf7 input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin-right: 8px;
}

/* Join Us form: keep it functional but closer to the polished site style */
.joinus-content-col .wpcf7 p {
  margin-bottom: 13px;
}

.joinus-content-col .wpcf7 input[type="text"],
.joinus-content-col .wpcf7 input[type="email"],
.joinus-content-col .wpcf7 textarea {
  border: 1px solid rgba(0,0,0,0.16);
  border-radius: 2px;
  background: rgba(255,255,255,0.92);
  padding: 12px 15px;
}

.joinus-content-col .wpcf7 textarea {
  min-height: 128px;
}

.joinus-content-col .wpcf7 input[type="submit"] {
  background: var(--red);
  color: #fff;
  border-radius: 24px;
  padding: 11px 30px;
}

@media (max-width: 1024px) {
  .blog-grid { column-count: 2; }
  .wwd-cards-grid { max-width: 92%; }
}

@media (max-width: 768px) {
  .site-logo img,
  .site-logo .custom-logo { max-height: 42px; }

  .blog-grid { column-count: 1; }

  .contact-form-wrap .wpcf7 form,
  .contact-form-wrap .wpcf7-form {
    display: block;
  }

  .contact-form-wrap .wpcf7 form > p,
  .contact-form-wrap .wpcf7-form > p {
    margin-bottom: 18px;
  }

  .wwd-card-text { min-height: auto; }
  .wwd-card-image img { min-height: 250px; }
}


/* ============================================================
   v1.0.3 CONTACT PAGE WIDTH FIX
   Forces the contact page to use the original-style wide form layout.
   ============================================================ */

body.page-template-page-contact .about-split-section {
  padding: 90px 0 88px;
  background: var(--gray-bg);
}

body.page-template-page-contact .about-split-section .container {
  max-width: 1120px;
}

body.page-template-page-contact .about-split-wrap {
  display: grid !important;
  grid-template-columns: minmax(360px, 1fr) minmax(520px, 1.1fr) !important;
  gap: 56px !important;
  align-items: start !important;
}

body.page-template-page-contact .about-text-col,
body.page-template-page-contact .about-image-col,
body.page-template-page-contact .contact-form-col {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
}

body.page-template-page-contact .contact-form-wrap {
  width: 100% !important;
  max-width: none !important;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.page-template-page-contact .contact-form-wrap .wpcf7 {
  width: 100% !important;
  max-width: none !important;
}

body.page-template-page-contact .contact-form-wrap form.wpcf7-form,
body.page-template-page-contact .lbbnm-contact-form-grid {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
}

body.page-template-page-contact .lbbnm-contact-form-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 24px !important;
  align-items: start !important;
}

body.page-template-page-contact .lbbnm-contact-form-grid .lbbnm-form-field {
  width: 100% !important;
  min-width: 0 !important;
}

body.page-template-page-contact .lbbnm-contact-form-grid .lbbnm-form-field-full {
  grid-column: 1 / -1 !important;
}

body.page-template-page-contact .contact-form-wrap .wpcf7 p {
  margin: 0 !important;
}

body.page-template-page-contact .contact-form-wrap .wpcf7 input[type="text"],
body.page-template-page-contact .contact-form-wrap .wpcf7 input[type="email"],
body.page-template-page-contact .contact-form-wrap .wpcf7 textarea,
body.page-template-page-contact .lbbnm-contact-form-grid input[type="text"],
body.page-template-page-contact .lbbnm-contact-form-grid input[type="email"],
body.page-template-page-contact .lbbnm-contact-form-grid textarea {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  border: 1px solid #d8d8d8 !important;
  border-radius: 28px !important;
  background: #fff !important;
  padding: 17px 28px !important;
  font-family: var(--font-body) !important;
  font-size: 16px !important;
  line-height: 1.4 !important;
  color: #333 !important;
  box-shadow: none !important;
  outline: none !important;
}

body.page-template-page-contact .contact-form-wrap .wpcf7 textarea,
body.page-template-page-contact .lbbnm-contact-form-grid textarea {
  min-height: 220px !important;
  resize: vertical !important;
}

body.page-template-page-contact .lbbnm-form-consent {
  margin-top: 4px !important;
}

body.page-template-page-contact .lbbnm-form-consent label,
body.page-template-page-contact .lbbnm-form-consent .wpcf7-list-item-label {
  font-size: 15px !important;
  line-height: 1.5 !important;
  color: #666 !important;
}

body.page-template-page-contact .lbbnm-form-consent .wpcf7-list-item {
  margin: 0 !important;
  display: inline-flex !important;
  gap: 12px !important;
  align-items: flex-start !important;
}

body.page-template-page-contact .lbbnm-form-consent input[type="checkbox"] {
  width: auto !important;
  height: auto !important;
  margin: 5px 0 0 0 !important;
}

body.page-template-page-contact .contact-form-wrap .wpcf7-submit,
body.page-template-page-contact .lbbnm-contact-form-grid .wpcf7-submit {
  display: inline-block !important;
  width: auto !important;
  max-width: none !important;
  border: none !important;
  border-radius: 28px !important;
  background: #999 !important;
  color: #fff !important;
  padding: 16px 34px !important;
  font-family: var(--font-body) !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  box-shadow: none !important;
}

body.page-template-page-contact .contact-form-wrap .wpcf7-submit:hover,
body.page-template-page-contact .lbbnm-contact-form-grid .wpcf7-submit:hover {
  background: var(--red) !important;
}

/* Keep the left contact card close to the old layout but not cramped. */
body.page-template-page-contact .about-text-card {
  padding: 13% 13% !important;
}

/* Mobile contact stack */
@media (max-width: 900px) {
  body.page-template-page-contact .about-split-wrap {
    grid-template-columns: 1fr !important;
    gap: 36px !important;
  }

  body.page-template-page-contact .lbbnm-contact-form-grid {
    grid-template-columns: 1fr !important;
  }

  body.page-template-page-contact .contact-form-wrap .wpcf7 textarea,
  body.page-template-page-contact .lbbnm-contact-form-grid textarea {
    min-height: 170px !important;
  }
}


/* ============================================================
   v1.0.4 CONTACT PAGE CF7 WRAPPER FIX
   CF7 wraps each field in inline spans. Without forcing those
   wrappers to block/full-width, fields stay narrow.
   ============================================================ */

.contact-form-col .wpcf7,
.contact-form-col .wpcf7 form,
.contact-form-col .wpcf7-form,
.contact-form-col .lbbnm-contact-form-grid,
.contact-form-wrap .wpcf7,
.contact-form-wrap .wpcf7 form,
.contact-form-wrap .wpcf7-form,
.contact-form-wrap .lbbnm-contact-form-grid {
  width: 100% !important;
  max-width: none !important;
}

.contact-form-col .lbbnm-contact-form-grid,
.contact-form-wrap .lbbnm-contact-form-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  gap: 24px !important;
  align-items: start !important;
}

/* This is the key missing piece: Contact Form 7 field wrappers are inline by default. */
.contact-form-col .wpcf7-form-control-wrap,
.contact-form-wrap .wpcf7-form-control-wrap,
.lbbnm-contact-form-grid .wpcf7-form-control-wrap {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
}

.contact-form-col .lbbnm-form-field,
.contact-form-wrap .lbbnm-form-field,
.lbbnm-contact-form-grid .lbbnm-form-field {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
}

.contact-form-col .lbbnm-form-field-full,
.contact-form-wrap .lbbnm-form-field-full,
.lbbnm-contact-form-grid .lbbnm-form-field-full {
  grid-column: 1 / -1 !important;
}

.contact-form-col .wpcf7 input[type="text"],
.contact-form-col .wpcf7 input[type="email"],
.contact-form-col .wpcf7 textarea,
.contact-form-wrap .wpcf7 input[type="text"],
.contact-form-wrap .wpcf7 input[type="email"],
.contact-form-wrap .wpcf7 textarea,
.lbbnm-contact-form-grid input[type="text"],
.lbbnm-contact-form-grid input[type="email"],
.lbbnm-contact-form-grid textarea {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  box-sizing: border-box !important;
}

.contact-form-col .wpcf7 textarea,
.contact-form-wrap .wpcf7 textarea,
.lbbnm-contact-form-grid textarea {
  min-height: 220px !important;
}

/* Give the contact right column more room even if the WP body template class changes. */
.about-split-wrap .contact-form-col {
  min-width: 0 !important;
}

.about-split-wrap:has(.contact-form-col) {
  grid-template-columns: minmax(360px, 0.95fr) minmax(560px, 1.25fr) !important;
}

@media (max-width: 900px) {
  .contact-form-col .lbbnm-contact-form-grid,
  .contact-form-wrap .lbbnm-contact-form-grid {
    grid-template-columns: 1fr !important;
  }

  .about-split-wrap:has(.contact-form-col) {
    grid-template-columns: 1fr !important;
  }
}


/* ============================================================
   v1.0.9 MOBILE HOMEPAGE HERO FIX
   On small screens, show the yellow hero text first and the image slider below.
   Also gives the slider a real height so background-image slides render correctly.
   ============================================================ */
@media (max-width: 768px) {
  .hero-section {
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
  }

  .hero-content-col {
    order: 0 !important;
    width: 100% !important;
    flex: 0 0 auto !important;
    min-height: 360px !important;
    padding: 64px 28px 48px !important;
  }

  .hero-content-col h1 {
    font-size: clamp(3rem, 16vw, 4.5rem) !important;
    line-height: 0.95 !important;
    margin-bottom: 18px !important;
  }

  .hero-slider-col {
    order: 1 !important;
    width: 100% !important;
    flex: 0 0 auto !important;
    height: 300px !important;
    min-height: 300px !important;
    position: relative !important;
    overflow: hidden !important;
  }

  .hero-slider {
    position: relative !important;
    width: 100% !important;
    height: 300px !important;
    min-height: 300px !important;
  }

  .hero-slide {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 300px !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
  }

  .hero-slider-controls {
    top: 50% !important;
    transform: translateY(-50%) !important;
  }
}

@media (max-width: 480px) {
  .hero-content-col {
    min-height: 330px !important;
    padding: 56px 22px 42px !important;
  }

  .hero-slider-col,
  .hero-slider,
  .hero-slide {
    height: 260px !important;
    min-height: 260px !important;
  }
}


/* ============================================================
   v1.0.10 404 PAGE
   Branded not-found page for mistyped or old URLs.
   ============================================================ */
.lbbnm-404-section {
  padding: 90px 30px;
  background: var(--gray-bg);
}

.lbbnm-404-card {
  max-width: 820px;
  margin: 0 auto;
  padding: clamp(36px, 6vw, 70px);
  background: #fff;
  text-align: center;
  box-shadow: 0 8px 28px rgba(0,0,0,.06);
  border-radius: 6px;
}

.lbbnm-404-title {
  margin-bottom: 24px;
}

.lbbnm-404-card p {
  max-width: 620px;
  margin: 0 auto 32px;
  font-size: 1.05rem;
  line-height: 1.75;
  color: var(--text-light);
}

.lbbnm-404-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
}

.lbbnm-404-actions .btn {
  min-width: 130px;
}

.btn-dark {
  display: inline-block;
  padding: 13px 30px;
  border-radius: 30px;
  background: var(--dark);
  color: #fff;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: .9rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  text-decoration: none;
  transition: background .2s, color .2s;
}

.btn-dark:hover {
  background: var(--red);
  color: #fff;
}

@media (max-width: 600px) {
  .lbbnm-404-section {
    padding: 60px 20px;
  }

  .lbbnm-404-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .lbbnm-404-actions .btn,
  .lbbnm-404-actions .btn-dark {
    width: 100%;
    text-align: center;
  }
}


/* ============================================================
   v1.0.11 404 POLISH
   Keeps the 404 page aligned with the other inner pages.
   ============================================================ */
.error404 .site-header {
  position: relative;
  z-index: 50;
}

.error404 .inner-hero.lbbnm-404-hero {
  min-height: 260px;
  height: 260px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-size: cover !important;
  background-position: center center !important;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.error404 .lbbnm-404-hero .inner-hero-content {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 24px;
  text-align: center;
}

.error404 .lbbnm-404-hero h1 {
  margin: 0 0 8px;
  color: #fff;
  font-size: clamp(3.2rem, 8vw, 5.2rem);
  line-height: .95;
  text-align: center;
}

.error404 .lbbnm-404-hero .breadcrumb,
.error404 .lbbnm-404-hero .breadcrumb a,
.error404 .lbbnm-404-hero .breadcrumb span {
  color: #fff;
}

.error404 .lbbnm-404-section {
  padding: 80px 30px;
}

.error404 .lbbnm-404-card {
  max-width: 820px;
}

.error404 .lbbnm-404-card .marker-title-wrap {
  font-size: clamp(2.1rem, 5vw, 3.2rem);
  line-height: 1.05;
}

@media (max-width: 768px) {
  .error404 .inner-hero.lbbnm-404-hero {
    min-height: 220px;
    height: 220px;
  }

  .error404 .lbbnm-404-section {
    padding: 58px 20px;
  }

  .error404 .lbbnm-404-card {
    padding: 34px 22px;
  }
}


/* ============================================================
   v1.0.15 HOMEPAGE HERO SOURCE MATCH
   Matches the original ThemeREX/Swiper hero behavior more closely.
   The old slider used an 848px-wide right slide, 635px slider height,
   background-size: cover, and centered background positioning.
   ============================================================ */
@media (min-width: 1025px) {
  .hero-section {
    display: flex !important;
    height: 635px !important;
    min-height: 635px !important;
    max-height: 635px !important;
    overflow: hidden !important;
  }

  .hero-content-col {
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    min-height: 635px !important;
    height: 635px !important;
  }

  .hero-slider-col {
    flex: 0 0 848px !important;
    width: 848px !important;
    max-width: 848px !important;
    height: 635px !important;
    min-height: 635px !important;
    overflow: hidden !important;
    position: relative !important;
  }

  .hero-slider {
    width: 100% !important;
    height: 635px !important;
    min-height: 635px !important;
    position: relative !important;
    overflow: hidden !important;
  }

  .hero-slide {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 635px !important;
    min-height: 635px !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
  }
}


/* ============================================================
   v1.0.17 HERO FIXED-WIDTH ORIGINAL SLIDER RENDER
   Important: functions.php now enqueues style.css as 1.0.16.
   The previous builds could look unchanged if GoDaddy/browser cache
   was still receiving style.css?ver=1.0.11.
   ============================================================ */
@media (min-width: 1025px) {
  body.home .hero-section {
    display: flex !important;
    width: 100% !important;
    max-width: 1440px !important;
    height: 635px !important;
    min-height: 635px !important;
    max-height: 635px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    overflow: hidden !important;
  }

  body.home .hero-content-col {
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    height: 635px !important;
    min-height: 635px !important;
    padding: 0 6.5vw !important;
  }

  body.home .hero-slider-col {
    flex: 0 0 848px !important;
    width: 848px !important;
    max-width: 848px !important;
    height: 635px !important;
    min-height: 635px !important;
    position: relative !important;
    overflow: hidden !important;
    background: transparent !important;
  }

  body.home .hero-slider {
    width: 100% !important;
    height: 635px !important;
    min-height: 635px !important;
    position: relative !important;
    overflow: hidden !important;
  }

  body.home .hero-slide {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 635px !important;
    min-height: 635px !important;
    background-size: cover !important;
    background-position: center top !important;
    background-repeat: no-repeat !important;
    image-rendering: auto !important;
  }
}


/* ============================================================
   v1.0.19 FULL-BLEED CRISP HERO
   Goal: restore the original full-width hero feel while avoiding
   forced enlargement of the 1470x547 slider photos.

   Important change: desktop hero height is capped at 547px, matching
   the native image height, so the browser does not have to scale the
   photo taller than the source file. The slide now uses a real <img>
   with object-fit: cover instead of a CSS background image.
   ============================================================ */
@media (min-width: 1025px) {
  body.home .hero-section {
    display: flex !important;
    width: 100vw !important;
    max-width: none !important;
    height: 547px !important;
    min-height: 547px !important;
    max-height: 547px !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    overflow: hidden !important;
  }

  body.home .hero-content-col,
  body.home .hero-slider-col {
    flex: 0 0 50% !important;
    width: 50% !important;
    max-width: 50% !important;
    height: 547px !important;
    min-height: 547px !important;
  }

  body.home .hero-content-col {
    padding: 0 6vw !important;
    background-size: cover !important;
    background-position: center center !important;
  }

  body.home .hero-slider-col,
  body.home .hero-slider {
    position: relative !important;
    overflow: hidden !important;
    background: transparent !important;
  }

  body.home .hero-slider {
    width: 100% !important;
    height: 547px !important;
    min-height: 547px !important;
  }

  body.home .hero-slide {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 547px !important;
    min-height: 547px !important;
    background-image: none !important;
    background: none !important;
    opacity: 0;
    transition: opacity 0.6s ease;
  }

  body.home .hero-slide.active {
    opacity: 1 !important;
  }

  body.home .hero-slide img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
    max-width: none !important;
    min-width: 100% !important;
    min-height: 100% !important;
    image-rendering: auto !important;
    transform: translateZ(0);
  }
}

@media (min-width: 1441px) {
  body.home .hero-content-col h1 {
    font-size: 4.8rem !important;
  }
}


/* ============================================================
   v1.0.19 FULL-WIDTH NATIVE-RES HERO REFINEMENT
   Keeps the hero full-width while avoiding the 100vw breakout math.
   The slider uses real <img> tags at the source image's native height.
   ============================================================ */
@media (min-width: 1025px) {
  html,
  body {
    overflow-x: clip !important;
  }

  body.home #page-wrap {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  body.home .hero-section {
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    width: 100% !important;
    max-width: none !important;
    height: 547px !important;
    min-height: 547px !important;
    max-height: 547px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  body.home .hero-content-col,
  body.home .hero-slider-col {
    flex: 0 0 50% !important;
    width: 50% !important;
    max-width: 50% !important;
    height: 547px !important;
    min-height: 547px !important;
    max-height: 547px !important;
    margin: 0 !important;
  }

  body.home .hero-content-col {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 0 5vw !important;
    background-size: cover !important;
    background-position: center center !important;
  }

  body.home .hero-slider-col,
  body.home .hero-slider,
  body.home .hero-slide {
    position: relative !important;
    overflow: hidden !important;
    background: transparent !important;
  }

  body.home .hero-slider {
    width: 100% !important;
    height: 547px !important;
    min-height: 547px !important;
    max-height: 547px !important;
  }

  body.home .hero-slide {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 547px !important;
    min-height: 547px !important;
    max-height: 547px !important;
    background: none !important;
    background-image: none !important;
    opacity: 0 !important;
    transition: opacity 0.6s ease !important;
  }

  body.home .hero-slide.active {
    opacity: 1 !important;
  }

  body.home .hero-slide img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: cover !important;
    object-position: center center !important;
    image-rendering: auto !important;
    transform: translateZ(0) !important;
    backface-visibility: hidden !important;
  }
}

@media (min-width: 1025px) and (max-width: 1300px) {
  body.home .hero-section,
  body.home .hero-content-col,
  body.home .hero-slider-col,
  body.home .hero-slider,
  body.home .hero-slide {
    height: 500px !important;
    min-height: 500px !important;
    max-height: 500px !important;
  }
}


/* ============================================================
   v1.0.23 FINAL HOMEPAGE POLISH
   - Makes "New Mexico" white in the yellow homepage hero.
   - Balances the stacked mobile hero so the yellow text panel does
     not overpower the photo below it.
   - Gives the right-side donation/CTA card in Our Mission a little
     more visual weight on desktop.
   ============================================================ */
body.home .hero-content-col h1 span {
  color: var(--white) !important;
}

@media (min-width: 1025px) {
  body.home .mission-posts {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.35fr) !important;
    align-items: stretch !important;
  }

  body.home .post-card-cta {
    min-height: 300px !important;
  }
}

@media (max-width: 768px) {
  body.home .hero-content-col {
    min-height: 270px !important;
    padding: 44px 24px 34px !important;
  }

  body.home .hero-content-col h1 {
    font-size: clamp(2.55rem, 13vw, 3.8rem) !important;
    line-height: 0.96 !important;
    margin-bottom: 12px !important;
  }

  body.home .hero-tagline {
    font-size: 1rem !important;
    line-height: 1.45 !important;
    margin-bottom: 16px !important;
    max-width: 360px !important;
  }

  body.home .hero-slider-col,
  body.home .hero-slider,
  body.home .hero-slide {
    height: 320px !important;
    min-height: 320px !important;
  }

  body.home .hero-slide img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
  }
}

@media (max-width: 480px) {
  body.home .hero-content-col {
    min-height: 245px !important;
    padding: 38px 20px 30px !important;
  }

  body.home .hero-content-col h1 {
    font-size: clamp(2.25rem, 12vw, 3.15rem) !important;
  }

  body.home .hero-slider-col,
  body.home .hero-slider,
  body.home .hero-slide {
    height: 285px !important;
    min-height: 285px !important;
  }
}