/*!
 * Custom NationBuilder Theme for Bootstrap 5.3.2
 * Extends Bootstrap 5.3.2 (https://getbootstrap.com/)
 * Copyright 2011-2023 The Bootstrap Authors
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
 */

/* Import Inter font */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

/* Custom theme colors */
:root {
  /* Your custom brand colors */
  --bs-primary: #004079;
  --bs-danger: #c4304f;
  
  /* Override Bootstrap's default link color with brand color */
  --bs-link-color: #004079;
  --bs-link-hover-color: #003366;
  --bs-link-color-rgb: 0, 64, 121;
  
  /* Override heading color */
  --bs-heading-color: #004079;
  
  /* Social media colors */
  --bs-facebook: #3b5998;
  --bs-twitter: #4099ff;
  --bs-whatsapp: #25d366;
  --bs-instagram: #E4405F;
  --bs-x: #000000;
  
  /* Custom grid system - 12 columns, 74px each, 24px gutter */
  --bs-gutter-width: 24px;
  --bs-gutter-x: 24px;
  --bs-gutter-y: 0;
}

/* ========================================
   GLOBAL BUTTON AND FORM FIELD BORDER RADIUS
   ======================================== */

/* Apply 3px border radius to all buttons and button-like elements */
.btn,
button,
input[type="button"],
input[type="submit"],
input[type="reset"],
.nav-link,
.navbar-nav .nav-link,
.dropdown-toggle,
.page-link,
.pagination .page-link {
  border-radius: 3px !important;
}

/* Apply 3px border radius to all form fields - comprehensive selectors */
.form-control,
.form-control:focus,
.form-control-sm,
.form-control-lg,
.form-select,
.form-select:focus,
.form-select-sm,
.form-select-lg,
.form-check-input,
.form-check-input:checked,
.input-group-text,
.input-group > .form-control,
.input-group > .form-select,
textarea,
textarea:focus,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="url"],
input[type="search"],
input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="month"],
input[type="week"],
input[type="file"],
input[type="color"],
select,
select:focus {
  border-radius: 3px !important;
}

/* Override Bootstrap link colors - MUST come before other rules */
a,
a:link,
a:visited {
  color: #004079 !important;
  text-decoration: none !important;
}

a:hover,
a:focus {
  color: #003366 !important;
  text-decoration: none !important;
}

/* Override Bootstrap heading colors */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  color: #004079 !important;
}

/* Override heading links */
h1 a, h1 a:link, h1 a:visited,
h2 a, h2 a:link, h2 a:visited,
h3 a, h3 a:link, h3 a:visited,
h4 a, h4 a:link, h4 a:visited,
h5 a, h5 a:link, h5 a:visited,
h6 a, h6 a:link, h6 a:visited,
.h1 a, .h1 a:link, .h1 a:visited,
.h2 a, .h2 a:link, .h2 a:visited,
.h3 a, .h3 a:link, .h3 a:visited,
.h4 a, .h4 a:link, .h4 a:visited,
.h5 a, .h5 a:link, .h5 a:visited,
.h6 a, .h6 a:link, .h6 a:visited {
  color: #004079 !important;
  text-decoration: none !important;
}

h1 a:hover, h1 a:focus,
h2 a:hover, h2 a:focus,
h3 a:hover, h3 a:focus,
h4 a:hover, h4 a:focus,
h5 a:hover, h5 a:focus,
h6 a:hover, h6 a:focus,
.h1 a:hover, .h1 a:focus,
.h2 a:hover, .h2 a:focus,
.h3 a:hover, .h3 a:focus,
.h4 a:hover, .h4 a:focus,
.h5 a:hover, .h5 a:focus,
.h6 a:hover, .h6 a:focus {
  color: #003366 !important;
}

/* Override card header and title colors */
.card-header,
.card-header h1,
.card-header h2,
.card-header h3,
.card-header h4,
.card-header h5,
.card-header h6,
.card-header .h1,
.card-header .h2,
.card-header .h3,
.card-header .h4,
.card-header .h5,
.card-header .h6 {
  color: #004079 !important;
}

.card-header a,
.card-header a:link,
.card-header a:visited,
.card-header h1 a,
.card-header h2 a,
.card-header h3 a,
.card-header h4 a,
.card-header h5 a,
.card-header h6 a,
.card-header .h1 a,
.card-header .h2 a,
.card-header .h3 a,
.card-header .h4 a,
.card-header .h5 a,
.card-header .h6 a,
.card-title,
.card-title a,
.card-title a:link,
.card-title a:visited {
  color: #004079 !important;
  text-decoration: none !important;
}

.card-header a:hover,
.card-header a:focus,
.card-header h1 a:hover,
.card-header h2 a:hover,
.card-header h3 a:hover,
.card-header h4 a:hover,
.card-header h5 a:hover,
.card-header h6 a:hover,
.card-title a:hover,
.card-title a:focus {
  color: #003366 !important;
  text-decoration: none !important;
}

/* Override excerpt title colors */
.excerpt-title,
.excerpt-type,
.excerpt-title a,
.excerpt-title a:link,
.excerpt-title a:visited,
.excerpt-type a,
.excerpt-type a:link,
.excerpt-type a:visited,
.card-title.excerpt-title,
.card-title.excerpt-title a,
.card-title.excerpt-title a:link,
.card-title.excerpt-title a:visited {
  color: #004079 !important;
  text-decoration: none !important;
}

.excerpt-title a:hover,
.excerpt-title a:focus,
.excerpt-type a:hover,
.excerpt-type a:focus,
.card-title.excerpt-title a:hover,
.card-title.excerpt-title a:focus {
  color: #003366 !important;
  text-decoration: none !important;
}

/* Members portal cards */
.members-portal-excerpt .card-header,
.members-portal-excerpt .card-header a,
.members-portal-excerpt .card-header a:link,
.members-portal-excerpt .card-header a:visited,
.members-portal-excerpt .excerpt-title,
.members-portal-excerpt .excerpt-title a,
.members-portal-excerpt .excerpt-title a:link,
.members-portal-excerpt .excerpt-title a:visited,
.members-portal-excerpt .card-title,
.members-portal-excerpt .card-title a,
.members-portal-excerpt .card-title a:link,
.members-portal-excerpt .card-title a:visited {
  color: #004079 !important;
  text-decoration: none !important;
}

.members-portal-excerpt .card-header a:hover,
.members-portal-excerpt .card-header a:focus,
.members-portal-excerpt .excerpt-title a:hover,
.members-portal-excerpt .excerpt-title a:focus,
.members-portal-excerpt .card-title a:hover,
.members-portal-excerpt .card-title a:focus {
  color: #003366 !important;
  text-decoration: none !important;
}

/* Excerpt block cards */
.excerpt-block.card .card-header,
.excerpt-block.card .card-header a,
.excerpt-block.card .card-header a:link,
.excerpt-block.card .card-header a:visited,
.excerpt-block.card .excerpt-title,
.excerpt-block.card .excerpt-title a,
.excerpt-block.card .excerpt-title a:link,
.excerpt-block.card .excerpt-title a:visited,
.excerpt-block.card .card-title,
.excerpt-block.card .card-title a,
.excerpt-block.card .card-title a:link,
.excerpt-block.card .card-title a:visited {
  color: #004079 !important;
  text-decoration: none !important;
}

.excerpt-block.card .card-header a:hover,
.excerpt-block.card .card-header a:focus,
.excerpt-block.card .excerpt-title a:hover,
.excerpt-block.card .excerpt-title a:focus,
.excerpt-block.card .card-title a:hover,
.excerpt-block.card .card-title a:focus {
  color: #003366 !important;
  text-decoration: none !important;
}

/* Card styling - remove header background and border, style headlines */
.card-header {
  background-color: transparent !important;
  border-bottom: none !important;
  padding-bottom: 0 !important;
}

/* Card headlines - larger and thicker */
.card-header h1,
.card-header h2,
.card-header h3,
.card-header h4,
.card-header h5,
.card-header h6,
.card-header .h1,
.card-header .h2,
.card-header .h3,
.card-header .h4,
.card-header .h5,
.card-header .h6,
.card-title,
.excerpt-title,
.members-portal-excerpt .card-header h3,
.members-portal-excerpt .excerpt-title,
.excerpt-block.card .card-header h3,
.excerpt-block.card .excerpt-title {
  font-size: 1.25rem !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
}

/* Dark buttons - white text */
.btn-dark,
.btn-dark:hover,
.btn-dark:focus,
.btn-dark:active,
.btn-dark.active {
  color: #ffffff !important;
}

/* Light cards styling */
.excerpt-block.card,
.excerpt-block.card.shadow-sm {
  border-radius: 10px !important;
  background: rgba(255, 255, 255, 0.5) !important;
  backdrop-filter: blur(50px) !important;
  -webkit-backdrop-filter: blur(50px) !important;
  border: none !important;
  border-width: 0 !important;
}

/* Members portal cards - specific styling */
.members-portal-excerpt .excerpt-block.card,
.members-portal-excerpt .card {
  border-radius: 10px !important;
  border: 1px solid rgba(0, 0, 0, 0.07) !important;
  background: #FFF !important;
  padding: 20px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 9px !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  position: relative !important;
}

.members-portal-excerpt .excerpt-block.card .card-header,
.members-portal-excerpt .card .card-header {
  padding: 0 !important;
  margin-bottom: 0 !important;
  width: 100% !important;
  position: relative !important;
}

/* Follow button - positioned in top-right of entire card */
.members-portal-excerpt .excerpt-block.card .card-header .position-absolute,
.members-portal-excerpt .card .card-header .position-absolute {
  position: absolute !important;
  top: -20px !important;
  right: -20px !important;
  z-index: 10 !important;
}

.members-portal-excerpt .excerpt-block.card .card-body,
.members-portal-excerpt .card .card-body {
  padding: 0 !important;
  width: 100% !important;
}

/* Remove uppercase from members portal card headlines */
.members-portal-excerpt .excerpt-title,
.members-portal-excerpt .excerpt-title a {
  text-transform: none !important;
}

/* Members portal list items - styled containers for blog posts, events, suggestions */
.members-portal-list-item {
  border-radius: 5px !important;
  background: #F8F9FB !important;
  display: flex !important;
  padding: 10px !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 5px !important;
  align-self: stretch !important;
  margin-bottom: 8px !important;
  border: none !important;
}

.members-portal-list-item:last-child {
  margin-bottom: 0 !important;
}

/* Members portal card badge - page type indicator */
.members-portal-card-badge {
  display: flex !important;
  padding: 3px 6px !important;
  align-items: center !important;
  gap: 4px !important;
  border-radius: 2px !important;
  background: #AE3951 !important;
  color: #FFF !important;
  font-family: Inter, sans-serif !important;
  font-size: 11px !important;
  font-style: normal !important;
  font-weight: 600 !important;
  line-height: normal !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  margin-bottom: 0 !important;
}

.members-portal-card-badge i {
  color: #FFF !important;
  font-size: 11px !important;
  line-height: 1 !important;
}

/* Members portal follow badge - blue outline style */
.members-portal-follow-badge {
  display: flex !important;
  padding: 3px 6px !important;
  align-items: center !important;
  gap: 4px !important;
  border-radius: 2px !important;
  background: transparent !important;
  border: 1px solid #004079 !important;
  color: #004079 !important;
  font-family: Inter, sans-serif !important;
  font-size: 11px !important;
  font-style: normal !important;
  font-weight: 600 !important;
  line-height: normal !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  margin-bottom: 0 !important;
}

.members-portal-follow-badge svg {
  color: #004079 !important;
  width: 14px !important;
  height: 14px !important;
  display: block !important;
}

/* Remove borders from all cards */
.card {
  border: none !important;
  border-width: 0 !important;
}

/* Global checkbox style with checkmark icon */
.form-check {
  position: relative;
  display: flex;
  align-items: flex-start;
}

.form-check-input[type="checkbox"] {
  position: relative;
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 0.125rem;
  margin-right: 0.5rem;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  border: 2px solid #004079;
  border-radius: 0.25rem;
  background-color: transparent;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.form-check-input[type="checkbox"]:checked {
  background-color: #004079;
  border-color: #004079;
}

.form-check-input[type="checkbox"]:checked::after {
  content: "✓";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-size: 0.875rem;
  font-weight: bold;
  line-height: 1;
}

.form-check-input[type="checkbox"]:focus {
  outline: none;
  box-shadow: 0 0 0 0.2rem rgba(0, 64, 121, 0.25);
}

.form-check-input[type="checkbox"]:hover {
  border-color: #003366;
}

.form-check-input[type="checkbox"]:checked:hover {
  background-color: #003366;
  border-color: #003366;
}

.form-check-label {
  cursor: pointer;
  user-select: none;
  color: #004079;
  line-height: 1.5;
}

/* Global font family */
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  color: rgb(68, 68, 68);
}

/* Remove underline from all link hovers while keeping color change */
a:hover,
a:focus {
  text-decoration: none !important;
}

/* Social media color utilities */
.text-facebook { color: #3b5998 !important; }
.text-twitter { color: #4099ff !important; }
.text-whatsapp { color: #25d366 !important; }
.text-instagram { color: #E4405F !important; }
.text-x { color: #000000 !important; }

.bg-facebook { background-color: #3b5998 !important; }
.bg-twitter { background-color: #4099ff !important; }
.bg-whatsapp { background-color: #25d366 !important; }
.bg-instagram { background-color: #E4405F !important; }
.bg-x { background-color: #000000 !important; }

/* Social media buttons */
.btn-facebook,
.btn-facebook:link,
.btn-facebook:visited {
  color: #fff !important;
  background-color: #3b5998;
  border-color: #3b5998;
  text-decoration: none !important;
}

.btn-facebook i,
.btn-facebook span,
.btn-facebook svg,
.btn-facebook:link i,
.btn-facebook:link span,
.btn-facebook:link svg,
.btn-facebook:visited i,
.btn-facebook:visited span,
.btn-facebook:visited svg {
  color: #fff !important;
}

.btn-facebook:hover,
.btn-facebook:focus,
.btn-facebook:active {
  color: #fff !important;
  background-color: #2d4373;
  border-color: #2d4373;
  text-decoration: none !important;
}

.btn-facebook:hover i,
.btn-facebook:hover span,
.btn-facebook:hover svg,
.btn-facebook:focus i,
.btn-facebook:focus span,
.btn-facebook:focus svg,
.btn-facebook:active i,
.btn-facebook:active span,
.btn-facebook:active svg {
  color: #fff !important;
}

.btn-twitter,
.btn-twitter:link,
.btn-twitter:visited {
  color: #fff !important;
  background-color: #4099ff;
  border-color: #4099ff;
  text-decoration: none !important;
}

.btn-twitter i,
.btn-twitter span,
.btn-twitter svg,
.btn-twitter:link i,
.btn-twitter:link span,
.btn-twitter:link svg,
.btn-twitter:visited i,
.btn-twitter:visited span,
.btn-twitter:visited svg {
  color: #fff !important;
}

.btn-twitter:hover,
.btn-twitter:focus,
.btn-twitter:active {
  color: #fff !important;
  background-color: #1a8bff;
  border-color: #1a8bff;
  text-decoration: none !important;
}

.btn-twitter:hover i,
.btn-twitter:hover span,
.btn-twitter:hover svg,
.btn-twitter:focus i,
.btn-twitter:focus span,
.btn-twitter:focus svg,
.btn-twitter:active i,
.btn-twitter:active span,
.btn-twitter:active svg {
  color: #fff !important;
}

.btn-whatsapp,
.btn-whatsapp:link,
.btn-whatsapp:visited {
  color: #fff !important;
  background-color: #25d366;
  border-color: #25d366;
  text-decoration: none !important;
}

.btn-whatsapp i,
.btn-whatsapp span,
.btn-whatsapp svg,
.btn-whatsapp:link i,
.btn-whatsapp:link span,
.btn-whatsapp:link svg,
.btn-whatsapp:visited i,
.btn-whatsapp:visited span,
.btn-whatsapp:visited svg {
  color: #fff !important;
}

.btn-whatsapp:hover,
.btn-whatsapp:focus,
.btn-whatsapp:active {
  color: #fff !important;
  background-color: #1ea952;
  border-color: #1ea952;
  text-decoration: none !important;
}

.btn-whatsapp:hover i,
.btn-whatsapp:hover span,
.btn-whatsapp:hover svg,
.btn-whatsapp:focus i,
.btn-whatsapp:focus span,
.btn-whatsapp:focus svg,
.btn-whatsapp:active i,
.btn-whatsapp:active span,
.btn-whatsapp:active svg {
  color: #fff !important;
}

.btn-instagram,
.btn-instagram:link,
.btn-instagram:visited {
  color: #fff !important;
  background-color: #E4405F;
  border-color: #E4405F;
  text-decoration: none !important;
}

.btn-instagram i,
.btn-instagram span,
.btn-instagram svg,
.btn-instagram:link i,
.btn-instagram:link span,
.btn-instagram:link svg,
.btn-instagram:visited i,
.btn-instagram:visited span,
.btn-instagram:visited svg {
  color: #fff !important;
}

.btn-instagram:hover,
.btn-instagram:focus,
.btn-instagram:active {
  color: #fff !important;
  background-color: #d32e4a;
  border-color: #d32e4a;
  text-decoration: none !important;
}

.btn-instagram:hover i,
.btn-instagram:hover span,
.btn-instagram:hover svg,
.btn-instagram:focus i,
.btn-instagram:focus span,
.btn-instagram:focus svg,
.btn-instagram:active i,
.btn-instagram:active span,
.btn-instagram:active svg {
  color: #fff !important;
}

.btn-x,
.btn-x:link,
.btn-x:visited {
  color: #fff !important;
  background-color: #000000;
  border-color: #000000;
  text-decoration: none !important;
}

.btn-x i,
.btn-x span,
.btn-x svg,
.btn-x:link i,
.btn-x:link span,
.btn-x:link svg,
.btn-x:visited i,
.btn-x:visited span,
.btn-x:visited svg {
  color: #fff !important;
}

.btn-x:hover,
.btn-x:focus,
.btn-x:active {
  color: #fff !important;
  background-color: #1a1a1a;
  border-color: #1a1a1a;
  text-decoration: none !important;
}

.btn-x:hover i,
.btn-x:hover span,
.btn-x:hover svg,
.btn-x:focus i,
.btn-x:focus span,
.btn-x:focus svg,
.btn-x:active i,
.btn-x:active span,
.btn-x:active svg {
  color: #fff !important;
}

/* Custom navigation styling */
#header {
  z-index: 1030;
  background: transparent;
  transition: all 0.3s ease;
}

/* Remove top padding from container within header */
#header .container {
  padding-top: 0 !important;
}

/* Make header transparent on desktop when heroes are present (before scrolling) */
/* Make header transparent on pages with hero (before scrolling) */
/* Works on both mobile and desktop */
.homepage-with-hero #header:not(.scrolled) {
  background: transparent !important;
}

/* Pages with page hero (no no-page-hero class) - header should be transparent when not scrolled */
body:not(.no-page-hero) #header:not(.scrolled) {
  background: transparent !important;
}

#header.scrolled {
  background: white !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1) !important;
}

#header.scrolled .navbar-brand {
  color: var(--bs-primary) !important;
}

#header.scrolled .navbar-nav .nav-link {
  color: var(--bs-primary) !important;
  text-transform: uppercase;
  display: inline-flex;
  padding: 14px 20px 16px 20px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  position: relative;
  transition: all 0.15s ease;
}

#header.scrolled .navbar-nav .nav-link::after {
  content: '';
  position: absolute;
  bottom: 4px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 6px;
  background-color: #AE3951;
  transition: width 0.15s ease;
}

#header.scrolled .navbar-nav .nav-link:hover::after {
  width: calc(100% - 40px);
}

/* Don't show underline on nav_button items */
#header.scrolled .navbar-nav .nav-link[data-tag="nav_button"]::after {
  display: none;
}

/* Remove dropdown arrow/caret from dropdown-toggle */
#header.scrolled .navbar-nav .dropdown-toggle::after {
  display: none !important;
}

/* Navigation button styling for scrolled state */
#header.scrolled .navbar-nav .nav-link[data-tag="nav_button"] {
  border-radius: 5px;
  border: 1px solid #9E2D44;
  background: linear-gradient(180deg, #AE3951 0%, #9A3247 100%);
  color: white !important;
  margin-left: 0.5rem;
  border-bottom: none !important;
  justify-content: center;
}

#header.scrolled .navbar-nav .nav-link[data-tag="nav_button"]:hover {
  background: linear-gradient(180deg, #9A3247 0%, #8B2D42 100%);
  color: white !important;
  border-bottom: none !important;
}

/* Sign-in icon button styling - icon only, no outline */
.nav-signin-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 8px 16px 8px !important;
  border: none !important;
  background: transparent !important;
  color: white !important;
  margin-left: 0.25rem;
  min-width: auto;
  width: auto;
  height: auto;
  line-height: 1;
}

.nav-signin-icon:hover {
  background: transparent !important;
  border: none !important;
  color: white !important;
  opacity: 0.7;
}

.nav-signin-icon i {
  font-size: 1.5rem;
  color: white !important;
}

.nav-signin-icon:hover i {
  color: white !important;
}

/* Sign-in text (shown on mobile only) - inherit link color */
.nav-signin-icon span {
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Sign-in icon for scrolled state (white header) */
#header.scrolled .nav-signin-icon {
  border: none !important;
  background: transparent !important;
  color: #004079 !important;
}

#header.scrolled .nav-signin-icon:hover {
  background: transparent !important;
  border: none !important;
  color: #004079 !important;
  opacity: 0.7;
}

#header.scrolled .nav-signin-icon i {
  color: #004079 !important;
  font-size: 1.5rem;
}

#header.scrolled .nav-signin-icon:hover i {
  color: #004079 !important;
}

#header.scrolled .nav-signin-icon span {
  color: #004079 !important;
}

/* Profile icon/avatar in navigation */
.nav-profile-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px !important;
  border: none !important;
  background: transparent !important;
  color: white !important;
  margin-left: 0.25rem;
  min-width: auto;
  width: auto;
  height: auto;
  line-height: 1;
}

.nav-profile-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.3);
  object-fit: cover;
}

.nav-profile-icon i {
  font-size: 1.75rem;
  color: white !important;
}

.nav-profile-icon:hover {
  opacity: 0.8;
}

/* Scrolled state for profile icon */
#header.scrolled .nav-profile-icon {
  color: #004079 !important;
}

#header.scrolled .nav-profile-icon i {
  color: #004079 !important;
}

#header.scrolled .nav-profile-avatar {
  border-color: rgba(0, 64, 121, 0.3);
}

/* Profile dropdown menu */
.nav-profile-dropdown {
  width: 320px;
  max-width: calc(100vw - 2rem);
  padding: 0 !important;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15) !important;
  border: none !important;
  margin-top: 0.5rem;
  background: #fff !important;
  overflow: hidden;
  right: 0 !important;
  left: auto !important;
  transform: translateX(0) !important;
}

/* Override general dropdown-menu styles for profile dropdown */
.nav-profile-dropdown.dropdown-menu {
  background: #fff !important;
  border: none !important;
  padding: 0 !important;
  right: 0 !important;
  left: auto !important;
}

/* Ensure dropdown aligns to right edge of profile icon */
#navProfileDropdown + .dropdown-menu,
.nav-profile-icon + .dropdown-menu {
  right: 0 !important;
  left: auto !important;
}

.nav-profile-dropdown-header {
  background: rgba(20, 40, 80, 0.85);
  padding: 20px;
  color: #fff !important;
  border-radius: 0;
}

.nav-profile-dropdown-header * {
  color: white !important;
}

.nav-profile-dropdown-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.3);
  object-fit: cover;
}

.nav-profile-dropdown-header h6 {
  color: white !important;
  margin: 0;
}

.nav-profile-dropdown-header small {
  color: rgba(255, 255, 255, 0.8) !important;
}

.nav-profile-dropdown-body {
  padding: 16px 20px;
}

.nav-profile-dropdown-item {
  display: flex;
  align-items: center;
  padding: 8px 0;
  font-size: 0.9rem;
  color: #444;
  border-bottom: 1px solid #f0f0f0;
}

.nav-profile-dropdown-item:last-child {
  border-bottom: none;
}

.nav-profile-dropdown-item i {
  color: #004079;
  font-size: 1rem;
  width: 20px;
  flex-shrink: 0;
}

.nav-profile-dropdown-nav {
  padding: 8px 20px;
  border-top: 1px solid #f0f0f0;
  border-bottom: 1px solid #f0f0f0;
  background: #f8f9fa;
}

.nav-profile-dropdown-nav-item {
  display: flex;
  align-items: center;
  padding: 10px 0;
  font-size: 0.9rem;
  color: #444;
  text-decoration: none;
  transition: color 0.2s ease;
  border-bottom: 1px solid #e9ecef;
}

.nav-profile-dropdown-nav-item:last-child {
  border-bottom: none;
}

.nav-profile-dropdown-nav-item:hover {
  color: #004079;
  text-decoration: none;
}

.nav-profile-dropdown-nav-item i {
  color: #004079;
  font-size: 0.95rem;
  width: 20px;
  flex-shrink: 0;
}

.nav-profile-dropdown-footer {
  padding: 16px 20px;
  border-top: 1px solid #f0f0f0;
  background: #f8f9fa;
  border-radius: 0;
}

.nav-profile-dropdown-footer .btn-outline-primary {
  color: #004079 !important;
  border-color: #004079 !important;
}

.nav-profile-dropdown-footer .btn-outline-primary:hover,
.nav-profile-dropdown-footer .btn-outline-primary:focus {
  color: #fff !important;
  background-color: #004079 !important;
  border-color: #004079 !important;
}

/* Remove dropdown arrow and underline from profile dropdown */
.nav-profile-icon.dropdown-toggle::after {
  display: none !important;
}

.nav-profile-icon::after {
  display: none !important;
}

#header.scrolled .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%280, 64, 121, 0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}

#header .navbar-brand {
  padding: 0;
  color: white;
  transition: color 0.3s ease;
  position: relative;
  margin-top: -0.25rem;
}

#header .navbar-brand img {
  max-height: 2.25rem;
  width: auto;
}

#header .navbar-brand .default-logo {
  opacity: 1;
  transition: opacity 0.3s ease;
}

#header .navbar-brand .scrolled-logo {
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  transition: opacity 0.3s ease;
}

#header.scrolled .navbar-brand .default-logo {
  opacity: 0;
}

#header.scrolled .navbar-brand .scrolled-logo {
  opacity: 1;
}

/* Mobile: Show dark logo when menu is open (white background) */
@media (max-width: 991.98px) {
  #header:has(.navbar-collapse.show) {
    background: white !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1) !important;
  }
  
  #header:has(.navbar-collapse.show) .navbar-brand .default-logo {
    opacity: 0 !important;
  }
  
  #header:has(.navbar-collapse.show) .navbar-brand .scrolled-logo {
    opacity: 1 !important;
  }
  
  /* Update text colors and borders for white background when menu is open */
  #header:has(.navbar-collapse.show) .navbar-collapse {
    border-top: 1px solid #dee2e6 !important;
  }
  
  #header:has(.navbar-collapse.show) .navbar-collapse .navbar-nav .nav-link {
    color: var(--bs-primary) !important;
    border-bottom: 1px solid #f8f9fa;
  }
  
  #header:has(.navbar-collapse.show) .navbar-collapse .dropdown-menu .dropdown-item {
    color: var(--bs-primary) !important;
  }
  
  #header:has(.navbar-collapse.show) .navbar-collapse .dropdown-menu .dropdown-item:hover,
  #header:has(.navbar-collapse.show) .navbar-collapse .dropdown-menu .dropdown-item:focus {
    background: #f8f9fa !important;
    color: #AE3951 !important;
  }
}

/* Desktop navigation - horizontal layout */
@media (min-width: 992px) {
  #header .navbar-nav {
    flex-direction: row;
    margin-left: auto;
    justify-content: flex-end;
  }
  
  #header .navbar-nav .nav-item {
    margin-left: 0.25rem;
  }
  
  #header .navbar-nav .nav-link {
    display: inline-flex;
    padding: 14px 12px 16px 12px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    color: white !important;
    text-transform: uppercase;
    transition: all 0.15s ease;
    position: relative;
    white-space: nowrap;
  }
  
  #header .navbar-nav .nav-link::after {
    content: '';
    position: absolute;
    bottom: 4px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 6px;
    background-color: #AE3951;
    transition: width 0.15s ease;
  }
  
  #header .navbar-nav .nav-link:hover::after {
    width: calc(100% - 40px);
  }
  
  /* Don't show underline on nav_button items */
  #header .navbar-nav .nav-link[data-tag="nav_button"]::after {
    display: none;
  }
  
  /* Remove dropdown arrow/caret from dropdown-toggle */
  #header .navbar-nav .dropdown-toggle::after {
    display: none !important;
  }
  
  /* Ensure underline works on pages with page hero (non-scrolled state) */
  body:not(.no-page-hero) #header:not(.scrolled) .navbar-nav .nav-link::after {
    content: '';
    position: absolute;
    bottom: 4px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 6px;
    background-color: #AE3951;
    transition: width 0.15s ease;
  }
  
  body:not(.no-page-hero) #header:not(.scrolled) .navbar-nav .nav-link:hover::after {
    width: calc(100% - 40px);
  }
  
  /* Don't show underline on nav_button items for page hero pages */
  body:not(.no-page-hero) #header:not(.scrolled) .navbar-nav .nav-link[data-tag="nav_button"]::after {
    display: none;
  }
  
  /* Remove dropdown arrow for page hero pages */
  body:not(.no-page-hero) #header:not(.scrolled) .navbar-nav .dropdown-toggle::after {
    display: none !important;
  }
  
  /* Navigation button styling for pages with "nav_button" tag */
  #header .navbar-nav .nav-link[data-tag="nav_button"] {
    border-radius: 5px;
    border: 1px solid #9E2D44;
    background: linear-gradient(180deg, #AE3951 0%, #9A3247 100%);
    margin-left: 0.5rem;
    border-bottom: none !important;
    justify-content: center;
  }
  
  #header .navbar-nav .nav-link[data-tag="nav_button"]:hover {
    background: linear-gradient(180deg, #9A3247 0%, #8B2D42 100%);
    border-bottom: none !important;
  }
}

/* Dropdown/Sub-menu styling */
#header .navbar-nav .dropdown {
  position: relative;
}

/* Create hover zone by adding padding to dropdown parent on desktop */
@media (min-width: 992px) {
  #header .navbar-nav .dropdown {
    padding-bottom: 15px;
  }
  
  /* Create invisible hover bridge between parent and submenu */
  #header .navbar-nav .dropdown::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 15px;
    background: transparent;
    z-index: 1001;
    pointer-events: auto;
  }
}

#header .navbar-nav .dropdown-menu {
  background: white;
  border: 1px solid #dee2e6;
  border-radius: 3px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  padding: 0.5rem 0;
  margin-top: 0;
  min-width: 200px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: all 0.3s ease;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
}

#header .navbar-nav .dropdown:hover .dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  display: block;
}

/* Keep dropdown open when hovering over the menu itself */
#header .navbar-nav .dropdown-menu:hover {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  display: block;
}

#header .navbar-nav .dropdown-menu .dropdown-item {
  padding: 0.75rem 1.25rem 1rem 1.25rem;
  color: var(--bs-primary);
  font-weight: 500;
  text-transform: uppercase;
  font-size: 0.9rem;
  transition: all 0.15s ease;
  background: transparent;
  position: relative;
  display: block;
  width: 100%;
  max-width: 100%;
  text-align: left;
}

#header .navbar-nav .dropdown-menu .dropdown-item::after {
  content: '';
  position: absolute;
  bottom: 4px;
  left: 1.25rem;
  width: 0;
  height: 6px;
  background-color: #AE3951;
  transition: width 0.3s ease;
}

#header .navbar-nav .dropdown-menu .dropdown-item:hover {
  background: transparent;
  color: #AE3951;
  padding-left: 1.25rem;
}

#header .navbar-nav .dropdown-menu .dropdown-item:hover::after {
  width: calc(100% - 2.5rem);
}

/* Scrolled state dropdown styling */
#header.scrolled .navbar-nav .dropdown-menu {
  background: white;
  border: 1px solid #dee2e6;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

#header.scrolled .navbar-nav .dropdown-menu .dropdown-item {
  color: var(--bs-primary);
  font-weight: 500;
  background: transparent;
  position: relative;
  display: block;
  width: 100%;
  max-width: 100%;
  text-align: left;
  padding-bottom: 1rem;
}

#header.scrolled .navbar-nav .dropdown-menu .dropdown-item::after {
  content: '';
  position: absolute;
  bottom: 4px;
  left: 1.25rem;
  width: 0;
  height: 6px;
  background-color: #AE3951;
  transition: width 0.3s ease;
}

#header.scrolled .navbar-nav .dropdown-menu .dropdown-item:hover {
  background: transparent;
  color: #AE3951;
}

#header.scrolled .navbar-nav .dropdown-menu .dropdown-item:hover::after {
  width: calc(100% - 2.5rem);
}

/* Mobile dropdown styling */
@media (max-width: 991.98px) {
  #header .navbar-collapse .dropdown-menu {
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
    margin: 0;
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    display: none;
  }
  
  #header .navbar-collapse .dropdown.show .dropdown-menu {
    display: block;
  }
  
  #header .navbar-collapse .dropdown-menu .dropdown-item {
    padding: 0.5rem 1rem;
    color: var(--bs-primary);
    font-weight: 500;
    text-transform: uppercase;
    font-size: 0.85rem;
    margin-left: 1rem;
    transition: all 0.15s ease;
    background: transparent;
  }
  
  #header .navbar-collapse .dropdown-menu .dropdown-item:hover {
    background: #f8f9fa;
    color: #AE3951;
    padding-left: 1.25rem;
  }
  
  /* Scrolled mobile dropdown */
  #header.scrolled .navbar-collapse .dropdown-menu .dropdown-item {
    color: var(--bs-primary);
    background: transparent;
  }
  
  #header.scrolled .navbar-collapse .dropdown-menu .dropdown-item:hover {
    background: #f8f9fa;
    color: #AE3951;
  }
}

/* Mobile navigation - vertical layout */
@media (max-width: 991.98px) {
  #header .navbar-collapse {
    margin-top: 1rem;
    padding-top: 1rem;
    padding-bottom: 1.5rem;
    border-top: 1px solid #dee2e6;
  }
  
  #header .navbar-collapse .navbar-nav .nav-item {
    margin-bottom: 0.25rem;
  }
  
  #header .navbar-collapse .navbar-nav .nav-link {
    padding: 0.75rem 0;
    border-bottom: 1px solid #f8f9fa;
    color: var(--bs-primary) !important;
    text-transform: uppercase;
    font-weight: 600;
    width: 100%;
    display: block;
  }
  
  #header .navbar-collapse .navbar-nav .nav-item:last-child .nav-link {
    border-bottom: none;
  }
  
  #header.scrolled .navbar-collapse {
    border-top: 1px solid #dee2e6;
  }
  
  #header.scrolled .navbar-collapse .navbar-nav .nav-item .nav-link {
    border-bottom: 1px solid #f8f9fa;
    color: var(--bs-primary) !important;
    text-transform: uppercase;
    font-weight: 600;
  }
  
  /* Mobile navigation button styling */
  #header .navbar-collapse .navbar-nav .nav-link[data-tag="nav_button"] {
    border-radius: 5px;
    border: 1px solid #9E2D44;
    background: linear-gradient(180deg, #AE3951 0%, #9A3247 100%);
    color: white !important;
    margin: 0.25rem 0;
    text-align: center;
    border-bottom: none !important;
    justify-content: center;
    width: 100%;
    display: block;
    padding: 0.75rem 1rem;
  }
  
  #header.scrolled .navbar-collapse .navbar-nav .nav-link[data-tag="nav_button"] {
    border-radius: 5px;
    border: 1px solid #9E2D44;
    background: linear-gradient(180deg, #AE3951 0%, #9A3247 100%);
    color: white !important;
    margin: 0.25rem 0;
    text-align: center;
    border-bottom: none !important;
    justify-content: center;
    width: 100%;
    display: block;
    padding: 0.75rem 1rem;
  }
  
  /* Mobile sign-in: show as nav-link style button with "Sign in" text */
  #header .navbar-collapse .navbar-nav .nav-signin-icon {
    width: 100%;
    display: block !important;
    padding: 14px 20px 16px 20px !important;
    margin: 0;
    margin-left: 0;
    text-align: left;
    border: none !important;
    background: transparent !important;
    color: white !important;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    position: relative;
  }
  
  #header .navbar-collapse .navbar-nav .nav-signin-icon span {
    color: white !important;
  }
  
  #header .navbar-collapse .navbar-nav .nav-signin-icon:hover {
    background: transparent !important;
    border: none !important;
    color: white !important;
    opacity: 0.85;
  }
  
  #header .navbar-collapse .navbar-nav .nav-signin-icon:hover span {
    color: white !important;
  }
  
  #header.scrolled .navbar-collapse .navbar-nav .nav-signin-icon {
    width: 100%;
    display: block !important;
    padding: 14px 20px 16px 20px !important;
    margin: 0;
    margin-left: 0;
    text-align: left;
    border: none !important;
    background: transparent !important;
    color: #004079 !important;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }
  
  #header.scrolled .navbar-collapse .navbar-nav .nav-signin-icon span {
    color: #004079 !important;
  }
  
  #header.scrolled .navbar-collapse .navbar-nav .nav-signin-icon:hover {
    background: transparent !important;
    border: none !important;
    color: #004079 !important;
    opacity: 0.85;
  }
  
  #header.scrolled .navbar-collapse .navbar-nav .nav-signin-icon:hover span {
    color: #004079 !important;
  }
  
  /* Mobile profile dropdown styling */
  .nav-profile-dropdown {
    width: 100%;
    max-width: 100%;
    margin-top: 0.5rem;
  }
  
  .nav-profile-icon {
    padding: 0.75rem 0 !important;
    margin: 0.25rem 0;
    margin-left: 0;
  }
  
  .nav-profile-avatar {
    width: 40px;
    height: 40px;
  }
  
  .nav-profile-icon i {
    font-size: 1.5rem;
  }
}

/* Hamburger button styling */
#header .navbar-toggler {
  border: none;
  padding: 0.25rem 0.5rem;
}

#header .navbar-toggler:focus {
  box-shadow: none;
}

#header .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
  transition: background-image 0.3s ease;
}

/* Override Bootstrap button colors with custom brand colors */
/* Fix outline buttons to match regular button sizes - ensure borders don't add to total size */
.btn,
.btn-primary,
.btn-secondary,
.btn-danger,
.btn-success,
.btn-outline-primary,
.btn-outline-secondary,
.btn-outline-danger,
.btn-outline-light,
.btn-outline-success {
  box-sizing: border-box !important;
}

/* Fix outline buttons to match regular button sizes */
/* Use inset box-shadow instead of border so it doesn't add to total size */
.btn-outline-primary {
  border: 1px solid transparent !important;
  box-shadow: inset 0 0 0 1px var(--bs-primary) !important;
  color: var(--bs-primary) !important;
  background-color: transparent !important;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active {
  box-shadow: inset 0 0 0 1px var(--bs-primary) !important;
  color: #fff !important;
  background-color: var(--bs-primary) !important;
  border-color: var(--bs-primary) !important;
}

.btn-outline-secondary {
  border: 1px solid transparent !important;
  box-shadow: inset 0 0 0 1px #6c757d !important;
}

.btn-outline-secondary:hover,
.btn-outline-secondary:focus,
.btn-outline-secondary:active {
  box-shadow: inset 0 0 0 1px #6c757d !important;
}

.btn-outline-danger {
  border: 1px solid transparent !important;
  box-shadow: inset 0 0 0 1px var(--bs-danger) !important;
}

.btn-outline-danger:hover,
.btn-outline-danger:focus,
.btn-outline-danger:active {
  box-shadow: inset 0 0 0 1px var(--bs-danger) !important;
}

.btn-outline-light {
  color: white !important;
  border: 1px solid transparent !important;
  box-shadow: inset 0 0 0 1px #f8f9fa !important;
}

.btn-outline-light:hover,
.btn-outline-light:focus,
.btn-outline-light:active {
  color: white !important;
  box-shadow: inset 0 0 0 1px #f8f9fa !important;
}

.btn-outline-success {
  border: 1px solid transparent !important;
  box-shadow: inset 0 0 0 1px #198754 !important;
}

.btn-outline-success:hover,
.btn-outline-success:focus,
.btn-outline-success:active {
  box-shadow: inset 0 0 0 1px #198754 !important;
}

.btn-primary,
.btn-primary:link,
.btn-primary:visited,
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active {
  color: #ffffff !important;
  background-color: var(--bs-primary) !important;
  border-color: var(--bs-primary) !important;
}

.btn-primary:hover,
.btn-primary:focus {
  color: #ffffff !important;
  background-color: #003366 !important;
  border-color: #003366 !important;
  box-shadow: none !important;
}

/* Remove Bootstrap's focus box-shadow from all btn-primary buttons */
.btn-primary:focus,
.btn-primary:focus-visible,
.btn-primary.focus {
  outline: none !important;
  box-shadow: none !important;
}

/* Global fix: Remove browser default focus outline from all buttons */
button:focus:not(.btn),
button:focus-visible:not(.btn) {
  outline: none !important;
}

/* Remove browser default focus outline from all .btn buttons */
.btn:focus,
.btn:focus-visible,
.btn.focus {
  outline: none !important;
  /* Remove Bootstrap's focus box-shadow that creates blue border effect */
  box-shadow: none !important;
}

.btn:not(:disabled):not(.disabled):focus,
.btn:not(:disabled):not(.disabled):focus-visible {
  outline: none !important;
  /* Remove Bootstrap's focus box-shadow that creates blue border effect */
  box-shadow: none !important;
}

/* Fix outline buttons to match regular button sizes */
.btn-outline-primary,
.btn-outline-secondary,
.btn-outline-danger,
.btn-outline-light {
  box-sizing: border-box;
  /* Ensure border is included in total size calculation */
}

.btn-danger {
  color: #fff;
  background-color: var(--bs-danger);
  border-color: var(--bs-danger);
}

.btn-danger:hover {
  color: #fff;
  background-color: #a0263a;
  border-color: #a0263a;
}

/* Custom form error styles */
.form-control.is-invalid {
  border-color: var(--bs-danger);
}

.invalid-feedback {
  color: var(--bs-danger);
}

/* Flash container z-index fix for Bootstrap 5 */
#flash_container {
  z-index: 1055;
}

#flash {
  margin-bottom: 0;
}

/* Custom grid system overrides */
.container-fluid {
  --bs-gutter-x: 24px;
}

.row {
  --bs-gutter-x: 24px;
  --bs-gutter-y: 0;
}

.container {
  max-width: 1152px; /* 12 * 74px + 11 * 24px */
}

@media (min-width: 576px) {
  .container {
    max-width: 1152px;
  }
}

@media (min-width: 768px) {
  .container {
    max-width: 1152px;
  }
}

@media (min-width: 992px) {
  .container {
    max-width: 1152px;
  }
}

@media (min-width: 1200px) {
  .container {
    max-width: 1152px;
  }
}

@media (min-width: 1400px) {
  .container {
    max-width: 1152px;
  }
}

/* Blog Components - Horizontal Scroll */
.blog-feed-horizontal {
  .blog-scroll-container {
    position: relative;
    width: 100vw;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;

    /* Hide scrollbar but keep functionality */
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .blog-scroll-container::-webkit-scrollbar {
    display: none;
  }

  .blog-scroll-wrapper {
    position: relative;
    width: 100%;
    padding: 2rem 0;
  }

  .blog-scroll-content {
    display: flex !important;
    flex-direction: row !important;
    gap: 1.5rem !important;
    padding-left: calc((100vw - 1152px) / 2 + 15px); /* Start aligned with grid */
    padding-right: 0; /* No right padding - let cards flow naturally */
    min-width: max-content;
    align-items: stretch;
    background-color: rgba(0, 255, 0, 0.1) !important; /* Debug: green background for container */
    border: 2px solid green !important; /* Debug: green border for container */

    /* Add pseudo-element to create right offset space */
    &::after {
      content: '';
      flex: 0 0 calc((100vw - 1152px) / 2 + 15px);
      min-width: calc((100vw - 1152px) / 2 + 15px);
    }

    /* Responsive padding adjustments */
    @media (max-width: 1200px) {
      padding-left: calc((100vw - 1152px) / 2 + 15px);
      &::after {
        flex: 0 0 calc((100vw - 1152px) / 2 + 15px);
        min-width: calc((100vw - 1152px) / 2 + 15px);
      }
    }

    @media (max-width: 992px) {
      padding-left: calc((100vw - 1152px) / 2 + 15px);
      &::after {
        flex: 0 0 calc((100vw - 1152px) / 2 + 15px);
        min-width: calc((100vw - 1152px) / 2 + 15px);
      }
    }

    @media (max-width: 768px) {
      padding-left: calc((100vw - 1152px) / 2 + 15px);
      &::after {
        flex: 0 0 calc((100vw - 1152px) / 2 + 15px);
        min-width: calc((100vw - 1152px) / 2 + 15px);
      }
    }

    @media (max-width: 576px) {
      padding-left: 1rem; /* Fallback for very small screens */
      &::after {
        flex: 0 0 1rem;
        min-width: 1rem;
      }
    }
  }

  .blog-card-item {
    flex: 0 0 25% !important; /* col-4 equivalent (25% of container width) */
    max-width: 25% !important;
    width: 25% !important;
    scroll-snap-align: start;
    box-sizing: border-box;
    background-color: rgba(255, 0, 0, 0.1) !important; /* Debug: red background */
    border: 2px solid red !important; /* Debug: red border */
    min-width: 0 !important;

    .card {
      height: 100%;
      width: 100% !important;
      max-width: 100% !important;
      transition: all 0.3s ease;
      border: 1px solid rgba(0, 64, 121, 0.1);
      box-sizing: border-box;
    }

    .card:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 25px rgba(0, 64, 121, 0.15);
      border-color: rgba(0, 64, 121, 0.2);
    }
  }

  /* Responsive adjustments for horizontal scrolling */
  @media (max-width: 992px) {
    .blog-card-item {
      flex: 0 0 33.333% !important; /* col-4 equivalent on tablet */
      max-width: 33.333% !important;
      width: 33.333% !important;
    }
  }

  @media (max-width: 768px) {
    .blog-card-item {
      flex: 0 0 50% !important; /* col-6 equivalent on mobile */
      max-width: 50% !important;
      width: 50% !important;
    }

    .blog-post-card .card-img-top-container {
      height: 150px;
    }
  }

  @media (max-width: 576px) {
    .blog-card-item {
      flex: 0 0 80% !important; /* Almost full width on small mobile */
      max-width: 80% !important;
      width: 80% !important;
    }
  }
}

/* Force horizontal layout - simplified selector */
.blog-card-item {
  flex: 0 0 25% !important;
  max-width: 25% !important;
  width: 25% !important;
  min-width: 0 !important;
  background-color: rgba(255, 0, 0, 0.1) !important; /* Debug: red background */
  border: 2px solid red !important; /* Debug: red border */
  box-sizing: border-box !important;
}

/* Override any Bootstrap column classes that might be interfering */
.blog-feed-horizontal .blog-scroll-content .blog-card-item[class*="col-"] {
  flex: 0 0 25% !important;
  max-width: 25% !important;
  width: 25% !important;
}

/* Blog post card specific styles */
.blog-post-card .card-img-top-container {
  height: 200px;
  overflow: hidden;
  position: relative;
}

.blog-post-card .card-img-top {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.blog-post-card:hover .card-img-top {
  transform: scale(1.05);
}

.blog-post-meta {
  font-size: 0.875rem;
  color: #6c757d;
  margin-bottom: 0.5rem;
}

.blog-post-meta i {
  margin-right: 0.5rem;
  color: #204073;
}

.event-meta {
  font-size: 0.875rem;
  color: #6c757d;
  margin-bottom: 0.5rem;
}

.event-meta i {
  margin-right: 0.5rem;
  color: #204073;
}

/* Video Background Styles for Donation Pages */
.donation-video-background {
  position: relative;
  overflow: hidden;
  min-height: 100vh;
  margin-top: -109px; /* Pull content up to overlay under sticky header */
}

.donation-video-background .container {
  padding-top: 120px; /* Add padding to account for overlaid sticky header */
  overflow-x: hidden;
  box-sizing: border-box;
}

.donation-video-background video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: -1;
  transform: translateX(-50%) translateY(-50%);
  object-fit: cover;
}

.donation-video-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
  z-index: 0;
}

/* Blue to transparent gradient overlay */
.donation-video-gradient {
  position: absolute;
  top: 0;
  left: 0;
  width: 75%;
  height: 100%;
  background: linear-gradient(to right, rgba(0, 64, 121, 0.8), transparent);
  z-index: 0;
}

/* Mobile Background Image */
.donation-mobile-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  min-height: 100vh;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: -1;
}

/* Mobile: Hide gradient and use background image instead */
@media (max-width: 767.98px) {
  .donation-video-gradient {
    display: none;
  }
  
  .donation-video-background {
    /* Remove default gradient background - use mobile background image instead */
    background-image: none;
  }
  
  /* Mobile donation form container - full width with small margins */
  .donation-video-background .container.d-flex {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: auto;
    margin-right: auto;
    justify-content: center; /* Center content horizontally */
  }
  
  /* Ensure row takes full width and is centered */
  .donation-video-background .container.d-flex .row {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    min-width: 0;
    overflow-x: hidden;
  }
  
  .donation-video-background .container.d-flex {
    overflow-x: hidden;
  }
  
  .donation-video-background .col-12.col-lg-6 {
    min-width: 0;
    overflow-x: hidden;
  }
  
  /* Reduce padding on columns and card on mobile */
  .donation-video-background .col-12.col-lg-6 {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  
  .donation-video-background .col-12.col-lg-6.p-4 {
    padding: 0.5rem 0 !important;
  }
  
  /* Massively reduce card padding on mobile */
  .donation-video-background .card.bg-primary {
    padding: 0.5rem !important;
    margin: 0 0 1.5rem 0 !important; /* Add bottom margin on mobile too */
    border-radius: 0;
  }
  
  .donation-video-background .card-body.p-4 {
    padding: 0.5rem !important;
  }
  
  /* Responsive font sizes for headlines at zoom levels */
  .donation-video-background .col-12.col-lg-6:first-child h1 {
    font-size: 32px;
  }
  
  .donation-video-background .col-12.col-lg-6:first-child h2 {
    font-size: 28px;
  }
  
  .donation-video-background .col-12.col-lg-6:first-child h3 {
    font-size: 24px;
  }
  
  /* Step indicators - reduce size and spacing on mobile/zoom */
  .step-circle {
    width: 32px;
    height: 32px;
    font-size: 14px;
  }
  
  .step-label {
    font-size: 10px;
  }
  
  .step-line {
    margin: 0 5px;
  }
  
  /* Additional zoom-specific adjustments */
  .donation-form-container {
    padding: 0;
    margin: 0;
  }
  
  .donation-form-container .mb-4 {
    margin-bottom: 1rem !important;
  }
  
  .donation-form-container .mb-3 {
    margin-bottom: 0.75rem !important;
  }
  
  .donation-form-container .gap-2 {
    gap: 0.5rem !important;
  }
  
  .donation-step {
    min-height: auto;
    padding: 0.5rem 0;
  }
  
  .donation-form-container h4 {
    font-size: 1.25rem;
    margin-bottom: 1rem !important;
  }
  
  .donation-form-container .btn {
    font-size: 0.875rem;
    padding: 0.5rem 1rem;
    white-space: normal;
    word-wrap: break-word;
  }
  
  .donation-form-container .form-control,
  .donation-form-container input,
  .donation-form-container textarea,
  .donation-form-container select {
    font-size: 16px; /* Prevent zoom on iOS */
    padding: 0.5rem;
    width: 100% !important;
    display: block;
    box-sizing: border-box;
  }
  
  /* Exception: Keep donation-other-input-container input inline */
  .donation-form-container .donation-other-input-container input {
    width: auto !important;
    flex: 1 1 auto !important;
    display: block !important;
  }
  
  /* Make all buttons full-width on mobile */
  .donation-form-container .btn,
  .donation-form-container button {
    width: 100% !important;
    display: block;
    margin-bottom: 0.5rem;
  }
  
  .donation-form-container .d-flex.gap-2 {
    flex-direction: column !important;
  }
  
  .donation-form-container .d-flex.gap-2 .btn {
    margin-bottom: 0.5rem;
  }
  
  /* Make form groups and labels full-width */
  .donation-form-container .form-group,
  .donation-form-container .mb-3,
  .donation-form-container .mb-4 {
    width: 100%;
    display: block;
  }
  
  .donation-form-container .form-label,
  .donation-form-container label {
    display: block;
    width: 100%;
  }
  
  /* Make frequency options full-width */
  .donation-form-container .frequency-option {
    width: 100% !important;
    display: block !important;
  }
  
  .donation-form-container .frequency-option .form-check-label {
    display: block;
    width: 100%;
  }
  
  /* Make custom amount input full-width */
  .donation-form-container #custom-amount,
  .donation-form-container input[id*="amount"],
  .donation-form-container input[type="text"],
  .donation-form-container input[type="email"],
  .donation-form-container input[type="tel"],
  .donation-form-container input[type="number"] {
    width: 100% !important;
    display: block;
  }
  
  /* Exception: Keep donation-other-input-container inline on mobile */
  .donation-form-container .donation-other-input-container {
    display: flex !important;
    width: 100% !important;
  }
  
  .donation-form-container .donation-other-input-container .input-group {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
    align-items: stretch !important;
  }
  
  .donation-form-container .donation-other-input-container .input-group-prepend {
    display: flex !important;
    flex-shrink: 0 !important;
  }
  
  .donation-form-container .donation-other-input-container input[id*="amount"],
  .donation-form-container .donation-other-input-container input[type="number"],
  .donation-form-container .donation-other-input-container input[type="text"] {
    width: auto !important;
    flex: 1 1 auto !important;
    display: block !important;
    min-width: 0 !important;
  }
  
  /* Make payment info container full-width */
  .donation-form-container .payment-info-container {
    width: 100%;
  }
  
  /* Ensure all form rows are full-width */
  .donation-form-container .row {
    margin-left: 0;
    margin-right: 0;
  }
  
  .donation-form-container .row > * {
    width: 100% !important;
    padding-left: 0;
    padding-right: 0;
  }
  
  .donation-form-container .frequency-option {
    margin-bottom: 0.75rem !important;
  }
  
  .donation-amounts {
    margin: 0.75rem 0 !important;
  }
  
  /* Make donation amount buttons full-width on mobile */
  .donation-amounts .row {
    display: block !important;
    margin: 0;
  }
  
  .donation-amounts .row > .radio,
  .donation-amounts .row > .radio-inline,
  .donation-amounts .row > div,
  .donation-amounts .row > * {
    width: 100% !important;
    flex: none !important;
    padding: 0;
    margin-bottom: 0.5rem;
    display: block;
  }
  
  .donation-amounts label {
    display: block !important;
    width: 100% !important;
  }
  
  .payment-info-container {
    padding: 1rem !important;
  }
}

.donation-content-overlay {
  position: relative;
  z-index: 1;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border-radius: 0.5rem;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

/* Fallback for when video doesn't load */
.donation-video-fallback {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: -1;
}

/* Glass-morphism card styles for all cards */
.card {
  border-radius: 10px !important;
  background: rgba(32, 64, 115, 0.70);
  box-shadow: 0 -1px 1px 0 rgba(255, 255, 255, 0.10) inset, 0 1px 1px 0 rgba(255, 255, 255, 0.25) inset, 0 8px 6px 0 rgba(0, 0, 0, 0.05);
  backdrop-filter: blur(50px);
  border: none;
}

/* Override for light cards - ensure they use light background */
.card.bg-light {
  background: #f8f9fa !important;
  backdrop-filter: none !important;
}

/* Ensure activity-content items in light cards use light background */
.card.bg-light .activity-content,
.card.bg-light #stream .activity-content,
#stream .card.bg-light .activity-content,
.content-list .activity-content {
  background-color: transparent !important;
  background: transparent !important;
  color: #212529 !important;
}

/* Ensure any nested cards within light card streams use light background */
.card.bg-light .card,
.card.bg-light #stream .card,
#stream .card.bg-light .card,
.content-list .card {
  background: #f8f9fa !important;
  backdrop-filter: none !important;
}

/* Hide empty activity-content areas */
.activity-content:empty {
  display: none !important;
}

/* Hide activity-content that only contains whitespace or minimal content */
.activity-content-empty {
  display: none !important;
}

/* Donation form card background override */
.donation-video-background .card.bg-primary {
  background: rgba(0, 64, 121, 0.70) !important;
  border-radius: 10px;
  box-shadow: 0 -1px 1px 0 rgba(255, 255, 255, 0.10) inset, 0 1px 1px 0 rgba(255, 255, 255, 0.25) inset, 0 8px 6px 0 rgba(0, 0, 0, 0.05);
  backdrop-filter: blur(50px);
  position: relative;
  z-index: 2;
  padding: 2rem !important; /* Added more padding to the donation card */
  margin-bottom: 2rem !important; /* Add bottom margin for breathing room */
  overflow-x: hidden;
  max-width: 100%;
  box-sizing: border-box;
}

.donation-video-background .card-body {
  overflow-x: hidden;
  max-width: 100%;
  box-sizing: border-box;
}

/* New Donation Form Styles */
.donation-form-container {
  overflow-x: hidden;
  max-width: 100%;
  box-sizing: border-box;
}

/* Step indicators container - make scrollable on mobile/zoom */
.donation-form-container .d-flex.justify-content-between {
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 0.5rem;
}

.donation-form-container .d-flex.justify-content-between::-webkit-scrollbar {
  height: 4px;
}

.donation-form-container .d-flex.justify-content-between::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 2px;
}

.donation-form-container .d-flex.justify-content-between::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.3);
  border-radius: 2px;
}

.step-indicator {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  min-width: 0;
  flex-shrink: 0;
}

.step-circle {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  margin-bottom: 8px;
  transition: all 0.3s ease;
}

.step-indicator.active .step-circle {
  background: white;
  color: #004079 !important;
}

.step-label {
  color: white;
  font-size: 12px;
  font-weight: 500;
  word-wrap: break-word;
  overflow-wrap: break-word;
  text-align: center;
  max-width: 100%;
}

.step-line {
  flex: 1;
  height: 2px;
  background: rgba(255, 255, 255, 0.3);
  margin: 0 10px;
  align-self: flex-start;
  min-width: 0;
  flex-shrink: 1;
  /* Center vertically relative to step-circle (20px from top = half of 40px circle) */
  margin-top: 20px;
}

.amount-btn {
  transition: all 0.3s ease;
  border: 2px solid rgba(255, 255, 255, 0.5);
  margin-bottom: 10px;
}

.amount-btn:hover {
  background-color: rgba(255, 255, 255, 0.1);
  border-color: white;
  transform: translateY(-2px);
}

.amount-btn.selected {
  background-color: white;
  color: #004079;
  border-color: white;
}

.donation-step {
  min-height: 400px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow-x: hidden;
  max-width: 100%;
  box-sizing: border-box;
}

/* Darken button text in donation form */
.donation-form-container .btn-light,
.donation-form-container .btn.btn-light,
.donation-form-container .btn.btn-light.btn-lg,
.donation-form-container .btn.btn-light.btn-lg.w-100 {
  color: #004079 !important;
}

/* Darken icons and arrows within donation form buttons */
.donation-form-container .btn-light *,
.donation-form-container .btn.btn-light *,
.donation-form-container .btn.btn-light.btn-lg *,
.donation-form-container .btn.btn-light.btn-lg.w-100 *,
.donation-form-container .btn-light .arrow,
.donation-form-container .btn.btn-light .arrow,
.donation-form-container .btn.btn-light.btn-lg .arrow,
.donation-form-container .btn.btn-light.btn-lg.w-100 .arrow,
.donation-form-container .btn-light i,
.donation-form-container .btn.btn-light i,
.donation-form-container .btn.btn-light.btn-lg i,
.donation-form-container .btn.btn-light.btn-lg.w-100 i,
.donation-form-container .btn-light svg,
.donation-form-container .btn.btn-light svg,
.donation-form-container .btn.btn-light.btn-lg svg,
.donation-form-container .btn.btn-light.btn-lg.w-100 svg {
  color: #004079 !important;
  fill: #004079 !important;
}

/* Ensure icons stay dark on hover */
.donation-form-container .btn-light:hover *,
.donation-form-container .btn.btn-light:hover *,
.donation-form-container .btn.btn-light.btn-lg:hover *,
.donation-form-container .btn.btn-light.btn-lg.w-100:hover *,
.donation-form-container .btn-light:hover .arrow,
.donation-form-container .btn.btn-light:hover .arrow,
.donation-form-container .btn.btn-light.btn-lg:hover .arrow,
.donation-form-container .btn.btn-light.btn-lg.w-100:hover .arrow,
.donation-form-container .btn-light:hover i,
.donation-form-container .btn.btn-light:hover i,
.donation-form-container .btn.btn-light.btn-lg:hover i,
.donation-form-container .btn.btn-light.btn-lg.w-100:hover i,
.donation-form-container .btn-light:hover svg,
.donation-form-container .btn.btn-light:hover svg,
.donation-form-container .btn.btn-light.btn-lg:hover svg,
.donation-form-container .btn.btn-light.btn-lg.w-100:hover svg {
  color: #004079 !important;
  fill: #004079 !important;
}

.donation-form-container .btn-outline-light {
  color: #004079 !important;
  border-color: #004079 !important;
}

.donation-form-container .btn-outline-light:hover {
  background-color: #004079 !important;
  color: white !important;
  border-color: #004079 !important;
}

/* Form elements overflow prevention */
.donation-form-container .form-control,
.donation-form-container input,
.donation-form-container textarea,
.donation-form-container select,
.donation-form-container button,
.donation-form-container .btn {
  max-width: 100%;
  box-sizing: border-box;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.donation-form-container label,
.donation-form-container .form-label {
  max-width: 100%;
  word-wrap: break-word;
  overflow-wrap: break-word;
  word-break: break-word;
}

.donation-form-container h4,
.donation-form-container h5,
.donation-form-container h6 {
  word-wrap: break-word;
  overflow-wrap: break-word;
  max-width: 100%;
}

/* Staged Form Styles */
.form-step {
  text-align: center;
  flex: 1;
  position: relative;
}

.form-step:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 15px;
  right: -50%;
  width: 100%;
  height: 2px;
  background-color: rgba(255, 255, 255, 0.3);
  z-index: 1;
}

.form-step.active::after {
  background-color: rgba(255, 255, 255, 0.8);
}

.step-number {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.3);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 8px;
  font-weight: bold;
  font-size: 14px;
}

.form-step.active .step-number {
  background-color: white;
  color: var(--bs-primary);
}

.step-label {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.8);
  font-weight: 500;
}

.form-step.active .step-label {
  color: white;
  font-weight: 600;
}

/* Consolidated: donation-amount-btn styles merged into .amount-btn above */

.form-step-content {
  min-height: 400px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.form-step-content h4 {
  color: white;
  font-weight: 600;
}

/* Form Theme System - Light Theme (Default for light backgrounds) */
/* Default light theme styles (applied when no theme class is present) */
.form-wrap:not(.form-theme-dark) .form-label,
.form-wrap:not(.form-theme-dark) label,
.form:not(.form-theme-dark) .form-label,
.form:not(.form-theme-dark) label,
.form-theme-light .form-label,
.form-theme-light label {
  color: #212529;
  font-weight: 500;
  margin-bottom: 8px;
}

.form-wrap:not(.form-theme-dark) .form-control,
.form:not(.form-theme-dark) .form-control,
.form-theme-light .form-control {
  background-color: #fff;
  border: 1px solid #dee2e6;
  color: #212529;
}

.form-wrap:not(.form-theme-dark) .form-control::placeholder,
.form:not(.form-theme-dark) .form-control::placeholder,
.form-theme-light .form-control::placeholder {
  color: #6c757d;
}

.form-wrap:not(.form-theme-dark) .form-control:focus,
.form:not(.form-theme-dark) .form-control:focus,
.form-theme-light .form-control:focus {
  background-color: #fff;
  border-color: #204073;
  color: #212529;
  box-shadow: 0 0 0 0.2rem rgba(32, 64, 115, 0.25);
}

.form-wrap:not(.form-theme-dark) .input-group-text,
.form:not(.form-theme-dark) .input-group-text,
.form-theme-light .input-group-text {
  background-color: #f8f9fa;
  border: 1px solid #dee2e6;
  color: #212529;
}

.form-wrap:not(.form-theme-dark) .form-check-input:checked,
.form:not(.form-theme-dark) .form-check-input:checked,
.form-theme-light .form-check-input:checked {
  background-color: #204073;
  border-color: #204073;
}

.form-wrap:not(.form-theme-dark) .form-check-label,
.form:not(.form-theme-dark) .form-check-label,
.form-theme-light .form-check-label {
  color: #212529;
}

.form-wrap:not(.form-theme-dark) .form-errors,
.form:not(.form-theme-dark) .form-errors,
.form-theme-light .form-errors {
  background-color: #f8d7da;
  border: 1px solid #f5c2c7;
  color: #842029;
  border-radius: 0.25rem;
  padding: 0.75rem;
  margin-bottom: 1rem;
}

.form-wrap:not(.form-theme-dark) .form-errors:not(:empty),
.form:not(.form-theme-dark) .form-errors:not(:empty),
.form-theme-light .form-errors:not(:empty) {
  display: block;
}

/* Form Theme System - Dark Theme (For dark backgrounds) */
.form-theme-dark .form-label,
.form-theme-dark label {
  color: white;
  font-weight: 500;
  margin-bottom: 8px;
}

.form-theme-dark .form-control {
  background-color: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: white;
}

.form-theme-dark .form-control::placeholder {
  color: rgba(255, 255, 255, 0.6);
}

.form-theme-dark .form-control:focus {
  background-color: rgba(255, 255, 255, 0.2);
  border-color: white;
  color: white;
  box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.25);
}

.form-theme-dark .input-group-text {
  background-color: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: white;
}

.form-theme-dark .form-check-input:checked {
  background-color: white;
  border-color: white;
}

.form-theme-dark .form-check-label {
  color: white;
}

.form-theme-dark .form-errors {
  background-color: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: white;
  border-radius: 0.25rem;
  padding: 0.75rem;
  margin-bottom: 1rem;
}

.form-theme-dark .form-errors:not(:empty) {
  display: block;
}

/* Auto-apply dark theme to donation forms and other dark contexts */
/* Note: Dark theme styles are applied via specific selectors below */

/* Apply dark theme styles to donation and dark contexts */
.donation-video-background .form-label,
.donation-video-background label,
.donation-form-container .form-label,
.donation-form-container label,
.blog-post-survey-box .form-label,
.blog-post-survey-box label,
.homepage-signup-form .form-label,
.homepage-signup-form label {
  color: white;
  font-weight: 500;
  margin-bottom: 8px;
}

.donation-video-background .form-control,
.donation-form-container .form-control,
.blog-post-survey-box .form-control,
.homepage-signup-form .form-control {
  background-color: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: white;
}

/* Override for select elements in donation form - ensure proper styling */
.donation-form-container select.form-control,
.donation-form-container select {
  background-color: rgba(255, 255, 255, 0.95) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.5) !important;
  color: #212529 !important;
  padding: 0.5rem 0.75rem !important;
  font-size: 1rem !important;
}

.donation-form-container select.form-control:focus,
.donation-form-container select:focus {
  background-color: #fff !important;
  border-color: #004079 !important;
  color: #212529 !important;
  box-shadow: 0 0 0 0.2rem rgba(0, 64, 121, 0.25) !important;
}

.donation-form-container select option {
  background-color: #fff !important;
  color: #212529 !important;
}

.donation-video-background .form-control::placeholder,
.donation-form-container .form-control::placeholder,
.blog-post-survey-box .form-control::placeholder,
.homepage-signup-form .form-control::placeholder {
  color: rgba(255, 255, 255, 0.6);
}

.donation-video-background .form-control:focus,
.donation-form-container .form-control:focus,
.blog-post-survey-box .form-control:focus,
.homepage-signup-form .form-control:focus {
  background-color: rgba(255, 255, 255, 0.2);
  border-color: white;
  color: white;
  box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.25);
}

.donation-video-background .input-group-text,
.donation-form-container .input-group-text,
.blog-post-survey-box .input-group-text,
.homepage-signup-form .input-group-text {
  background-color: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: white;
}

/* Fix currency symbol input group - make icon black and match input height */
.donation-form-container .donation-other-input-container .input-group-text,
.donation-video-background .donation-other-input-container .input-group-text,
.donation-form-container .donation-other-input-container .input-group-prepend .input-group-text,
.donation-video-background .donation-other-input-container .input-group-prepend .input-group-text {
  background-color: rgba(255, 255, 255, 0.95) !important;
  border: 1px solid rgba(255, 255, 255, 0.5) !important;
  border-right: none !important;
  color: #212529 !important;
  padding: 0.5rem 0.75rem !important;
  font-size: 1rem !important;
  line-height: 1.5 !important;
  height: calc(1.5em + 0.75rem + 2px) !important;
  min-height: calc(1.5em + 0.75rem + 2px) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 0.375rem 0 0 0.375rem !important;
  box-sizing: border-box !important;
}

.donation-form-container .donation-other-input-container .input-group-text.currency-symbol,
.donation-video-background .donation-other-input-container .input-group-text.currency-symbol {
  color: #212529 !important;
  font-weight: 500 !important;
}

.donation-form-container .donation-other-input-container .input-group:focus-within .input-group-text,
.donation-video-background .donation-other-input-container .input-group:focus-within .input-group-text {
  border-color: #fff !important;
  background-color: #fff !important;
  color: #212529 !important;
}

/* Ensure the input field matches the prepend height */
.donation-form-container .donation-other-input-container input[type="number"],
.donation-form-container .donation-other-input-container input[type="text"],
.donation-video-background .donation-other-input-container input[type="number"],
.donation-video-background .donation-other-input-container input[type="text"] {
  height: calc(1.5em + 0.75rem + 2px) !important;
  min-height: calc(1.5em + 0.75rem + 2px) !important;
  border-left: none !important;
  border-radius: 0 0.375rem 0.375rem 0 !important;
}

/* Ensure input-group stays inline and doesn't wrap */
.donation-form-container .donation-other-input-container .input-group,
.donation-video-background .donation-other-input-container .input-group {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  width: 100% !important;
}

.donation-form-container .donation-other-input-container .input-group-prepend,
.donation-video-background .donation-other-input-container .input-group-prepend {
  display: flex !important;
  flex-shrink: 0 !important;
}

.donation-video-background .form-check-input:checked,
.donation-form-container .form-check-input:checked,
.blog-post-survey-box .form-check-input:checked,
.homepage-signup-form .form-check-input:checked {
  background-color: white;
  border-color: white;
}

.donation-video-background .form-check-label,
.donation-form-container .form-check-label,
.blog-post-survey-box .form-check-label,
.homepage-signup-form .form-check-label {
  color: white;
}

/* Make checked radio button labels dark when background is white/light */
.form-check-input[type="radio"]:checked + .form-check-label,
.form-check-input[type="radio"]:checked ~ .form-check-label,
.custom-control-input[type="radio"]:checked ~ .custom-control-label,
input[type="radio"]:checked + .custom-control-label,
input[type="radio"]:checked ~ .custom-control-label {
  color: #004079 !important;
}

.form-check-input[type="radio"]:checked + .form-check-label *,
.form-check-input[type="radio"]:checked ~ .form-check-label *,
.custom-control-input[type="radio"]:checked ~ .custom-control-label *,
input[type="radio"]:checked + .custom-control-label *,
input[type="radio"]:checked ~ .custom-control-label * {
  color: #004079 !important;
}

.form-check-input[type="radio"]:checked + .form-check-label strong,
.form-check-input[type="radio"]:checked ~ .form-check-label strong,
.custom-control-input[type="radio"]:checked ~ .custom-control-label strong,
input[type="radio"]:checked + .custom-control-label strong,
input[type="radio"]:checked ~ .custom-control-label strong {
  color: #004079 !important;
}

.form-check-input[type="radio"]:checked + .form-check-label small,
.form-check-input[type="radio"]:checked ~ .form-check-label small,
.custom-control-input[type="radio"]:checked ~ .custom-control-label small,
input[type="radio"]:checked + .custom-control-label small,
input[type="radio"]:checked ~ .custom-control-label small {
  color: rgba(0, 64, 121, 0.8) !important;
}

/* Left column content styling for video background */
.donation-video-background .col-12.col-lg-6:first-child {
  background: none !important;
  position: relative;
  z-index: 2;
}

.donation-video-background .col-12.col-lg-6:first-child h4,
.donation-video-background .col-12.col-lg-6:first-child h5,
.donation-video-background .col-12.col-lg-6:first-child h6 {
  color: white;
}

/* Red bottom border for headings h1, h2, h3 */
.donation-video-background .col-12.col-lg-6:first-child h1 {
  padding-bottom: 25px; /* Increased spacing between text and border */
  margin-bottom: 40px; /* Added more padding underneath */
  display: block !important;
  width: 100%;
  max-width: 100%;
  font-size: 64px;
  font-weight: 900;
  color: white;
  position: relative;
  word-wrap: break-word;
  overflow-wrap: break-word;
  box-sizing: border-box;
}

/* Ensure headline is always visible even without donation-video-background class */
#content .col-12.col-lg-6:first-child h1,
#content .col-12.col-lg-6.p-4 h1,
.container-fluid .col-12.col-lg-6:first-child h1,
.container-fluid .col-12.col-lg-6.p-4 h1 {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.donation-video-background .col-12.col-lg-6:first-child h1::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 50%;
  height: 27px;
  background-color: #c4304f;
}

.donation-video-background .col-12.col-lg-6:first-child h2 {
  padding-bottom: 25px; /* Increased spacing between text and border */
  margin-bottom: 40px; /* Added more padding underneath */
  display: block;
  width: 100%;
  max-width: 100%;
  font-size: 48px;
  font-weight: 800;
  color: white;
  position: relative;
  word-wrap: break-word;
  overflow-wrap: break-word;
  box-sizing: border-box;
}

.donation-video-background .col-12.col-lg-6:first-child h2::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 50%;
  height: 27px;
  background-color: #c4304f;
}

.donation-video-background .col-12.col-lg-6:first-child h3 {
  padding-bottom: 25px; /* Increased spacing between text and border */
  margin-bottom: 40px; /* Added more padding underneath */
  display: block;
  width: 100%;
  max-width: 100%;
  font-size: 36px;
  font-weight: 700;
  color: white;
  position: relative;
  word-wrap: break-word;
  overflow-wrap: break-word;
  box-sizing: border-box;
}

.donation-video-background .col-12.col-lg-6:first-child h3::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 50%;
  height: 27px;
  background-color: #c4304f;
}

.donation-video-background .col-12.col-lg-6:first-child p,
.donation-video-background .col-12.col-lg-6:first-child div,
.donation-video-background .col-12.col-lg-6:first-child span {
  color: white;
  word-wrap: break-word;
  overflow-wrap: break-word;
  max-width: 100%;
}

.donation-video-background .col-12.col-lg-6:first-child a,
.donation-video-background .col-12.col-lg-6:first-child a:link,
.donation-video-background .col-12.col-lg-6:first-child a:visited {
  color: #dc3545 !important; /* Red color for links */
}

.donation-video-background .col-12.col-lg-6:first-child a:hover,
.donation-video-background .col-12.col-lg-6:first-child a:focus {
  color: #c82333 !important; /* Darker red on hover */
  text-decoration: underline;
}

/* General overflow prevention for images and media */
.donation-video-background img,
.donation-video-background video {
  max-width: 100%;
  height: auto;
  box-sizing: border-box;
}

/* Ensure all flex containers prevent overflow */
.donation-video-background .d-flex {
  min-width: 0;
}

.donation-video-background .row {
  min-width: 0;
}

/* Additional utility classes */
.mw-100 {
  max-width: 100% !important;
}

/* Hide elements that should not be displayed */
#submitted-payment-method,
#demographics-read-only,
#address-read-only,
#apple-pay-notice,
#your-info,
#cc-info {
  display: none;
}

#edit-demographics,
#edit-address {
  float: right;
}

.address-line {
  display: block;
}

/* Continue button with animated arrow */
#continue-to-amount,
#continue-to-details,
#continue-to-payment {
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
}

#continue-to-amount .arrow,
#continue-to-details .arrow,
#continue-to-payment .arrow {
  opacity: 0;
  transform: translateX(-10px);
  transition: all 0.3s ease;
  margin-left: 8px;
  display: inline-block;
}

#continue-to-amount:hover .arrow,
#continue-to-details:hover .arrow,
#continue-to-payment:hover .arrow {
  opacity: 1;
  transform: translateX(0);
}

/* Frequency selection styling */
.frequency-option {
  padding: 1rem;
  border: 2px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  margin-bottom: 0.5rem;
  transition: all 0.3s ease;
  cursor: pointer;
  position: relative;
}

.frequency-option * {
  pointer-events: none;
}

.frequency-option:hover {
  border-color: rgba(255, 255, 255, 0.4);
  background: rgba(255, 255, 255, 0.05);
}

.frequency-option input[type="radio"] {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  pointer-events: none;
}

.frequency-option:has(input[type="radio"]:checked),
.frequency-option.selected {
  border-color: #c4304f;
  background: white;
}

/* Make text dark when frequency option is checked (white background) */
.frequency-option:has(input[type="radio"]:checked) .form-check-label,
.frequency-option.selected .form-check-label {
  color: #004079 !important;
}

.frequency-option:has(input[type="radio"]:checked) .form-check-label *,
.frequency-option.selected .form-check-label * {
  color: #004079 !important;
}

.frequency-option:has(input[type="radio"]:checked) .form-check-label strong,
.frequency-option.selected .form-check-label strong {
  color: #004079 !important;
}

.frequency-option:has(input[type="radio"]:checked) .form-check-label small,
.frequency-option.selected .form-check-label small {
  color: rgba(0, 64, 121, 0.8) !important;
}

.frequency-option .form-check-label {
  cursor: pointer;
  margin-left: 0;
  padding-left: 0;
  color: white !important;
  display: block;
  width: 100%;
  min-height: 100%;
}

.frequency-option .form-check-label strong {
  color: white !important;
}

.frequency-option .form-check-label small {
  color: rgba(255, 255, 255, 0.8) !important;
}

/* Tier option checked state - make text dark when background is white/light */
.tier-option:has(input[type="radio"]:checked) .form-check-label,
.tier-option.selected .form-check-label,
.tier-option input[type="radio"]:checked + .form-check-label,
.tier-option input[type="radio"]:checked ~ .form-check-label {
  color: #004079 !important;
}

.tier-option:has(input[type="radio"]:checked) .form-check-label *,
.tier-option.selected .form-check-label *,
.tier-option input[type="radio"]:checked + .form-check-label *,
.tier-option input[type="radio"]:checked ~ .form-check-label * {
  color: #004079 !important;
}

.tier-option:has(input[type="radio"]:checked) .form-check-label strong,
.tier-option.selected .form-check-label strong,
.tier-option input[type="radio"]:checked + .form-check-label strong,
.tier-option input[type="radio"]:checked ~ .form-check-label strong {
  color: #004079 !important;
}

.tier-option:has(input[type="radio"]:checked) .form-check-label small,
.tier-option.selected .form-check-label small,
.tier-option input[type="radio"]:checked + .form-check-label small,
.tier-option input[type="radio"]:checked ~ .form-check-label small {
  color: rgba(0, 64, 121, 0.8) !important;
}

/* Mobile fullscreen form */
@media (max-width: 767.98px) {
  .donation-form-fullscreen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 9999;
    background: rgba(0, 64, 121, 0.95);
    backdrop-filter: blur(10px);
    overflow-y: auto;
  }
  
  .donation-form-fullscreen .container {
    min-height: 100vh;
    padding: 1rem;
  }
  
  .donation-form-fullscreen .row {
    margin: 0;
  }
  
  .donation-form-fullscreen .col-12 {
    padding: 0;
  }
  
  .donation-form-fullscreen .card {
    margin: 0;
    border-radius: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
  }
  
  .donation-form-fullscreen .card-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  
  .form-close-btn {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 10000;
    background: rgba(255, 255, 255, 0.2);
    border: 2px solid rgba(255, 255, 255, 0.3);
    color: white;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    cursor: pointer;
    transition: all 0.3s ease;
  }
  
  .form-close-btn:hover {
    background: rgba(255, 255, 255, 0.3);
    border-color: rgba(255, 255, 255, 0.5);
  }
}

/* Homepage with Hero Section - Header Overlay */
.homepage-with-hero {
  position: relative;
}

.homepage-with-hero #header {
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  background: transparent;
  backdrop-filter: none;
  transition: all 0.3s ease;
}

.homepage-with-hero #header.scrolled {
  position: sticky;
  top: 0;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20px);
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
}

/* Homepage Hero Section Styles */
.homepage-hero-section {
  position: relative;
  overflow: hidden;
  min-height: 75vh;
  display: flex;
  align-items: center;
  padding-top: 0; /* Remove any top padding since header is overlaid */
  margin-top: -109px; /* Pull hero up to overlay under sticky header (matches header height) */
}

@media (min-width: 768px) {
  .homepage-hero-section {
    margin-top: -126px; /* Push hero up 126px on desktop */
    min-height: 85vh;
  }
}

/* Add padding-top to homepage-hero-section when it's also a page-hero-section to offset negative margin */
.homepage-hero-section.page-hero-section {
  padding-top: 109px; /* Add padding to account for negative margin on mobile */
}

@media (min-width: 768px) {
  .homepage-hero-section.page-hero-section {
    padding-top: 96px; /* Add padding to match header height on desktop */
  }
}

.homepage-hero-section video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: -1;
  transform: translateX(-50%) translateY(-50%);
  object-fit: cover;
  /* Hide controls and prevent interaction */
  pointer-events: none;
}

/* Hide video controls in Safari and other browsers */
.homepage-hero-section video::-webkit-media-controls {
  display: none !important;
}

.homepage-hero-section video::-webkit-media-controls-enclosure {
  display: none !important;
}

.homepage-hero-section video::-webkit-media-controls-panel {
  display: none !important;
}

.homepage-hero-section video::-webkit-media-controls-play-button {
  display: none !important;
}

.homepage-hero-section video::-webkit-media-controls-start-playback-button {
  display: none !important;
}

.homepage-hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* Modern brand blue-to-red gradient overlay */
  background: linear-gradient(135deg, 
    rgba(0, 64, 121, 0.75) 0%, 
    rgba(0, 64, 121, 0.65) 30%,
    rgba(196, 48, 79, 0.55) 70%,
    rgba(196, 48, 79, 0.65) 100%);
  z-index: 0;
}

.homepage-hero-gradient {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* Additional radial gradient overlay for modern depth effect */
  background: radial-gradient(ellipse at top left, 
    rgba(0, 64, 121, 0.5) 0%, 
    transparent 50%),
    radial-gradient(ellipse at bottom right, 
    rgba(196, 48, 79, 0.4) 0%, 
    transparent 50%);
  z-index: 1;
}

/* Page hero sections (non-homepage) - same modern gradient overlay */
.page-hero-section .homepage-hero-gradient {
  /* Same modern blue-to-red gradient pattern */
  background: radial-gradient(ellipse at top left, 
    rgba(0, 64, 121, 0.5) 0%, 
    transparent 50%),
    radial-gradient(ellipse at bottom right, 
    rgba(196, 48, 79, 0.4) 0%, 
    transparent 50%);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  mask-image: none;
  -webkit-mask-image: none;
}

/* Fallback for when video doesn't load */
.homepage-hero-fallback {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.homepage-hero-mobile-fallback {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
}

/* Hero content styling */
.homepage-hero-section .container {
  position: relative;
  z-index: 2;
  padding-top: 120px; /* Add padding to account for overlaid sticky header */
}

.homepage-hero-title {
  font-size: 3.5rem;
  font-weight: 900;
  color: white !important;
  margin-bottom: 1.5rem;
  line-height: 1.2;
}

.homepage-hero-content {
  font-size: 1.25rem;
  color: white !important;
  margin-bottom: 2rem;
  line-height: 1.6;
}

.homepage-hero-content * {
  color: white !important;
}

.homepage-hero-content h2,
.homepage-hero-content h3,
.homepage-hero-content h4,
.homepage-hero-content h5,
.homepage-hero-content h6 {
  color: white;
}

.homepage-hero-content p {
  color: white;
}

/* Style links in homepage hero content as buttons */
.homepage-hero-content a {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  background-color: white;
  color: var(--bs-primary) !important;
  border: 2px solid white;
  border-radius: 0.375rem;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s ease;
  margin-top: 1rem;
}

.homepage-hero-content a:hover {
  background-color: transparent;
  color: white !important;
  border-color: white;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  text-decoration: none;
}

.homepage-hero-actions {
  position: relative;
  z-index: 2;
}

/* No video background styling */
.homepage-hero-no-video {
  background: linear-gradient(135deg, var(--bs-primary) 0%, var(--bs-danger) 100%);
  min-height: 60vh;
}

.homepage-hero-no-video .homepage-hero-title {
  color: white !important;
}

.homepage-hero-no-video .homepage-hero-content {
  color: white !important;
}

.homepage-hero-no-video .homepage-hero-content * {
  color: white !important;
}

.homepage-hero-no-video .homepage-hero-content h2,
.homepage-hero-no-video .homepage-hero-content h3,
.homepage-hero-no-video .homepage-hero-content h4,
.homepage-hero-no-video .homepage-hero-content h5,
.homepage-hero-no-video .homepage-hero-content h6 {
  color: white;
}

.homepage-hero-no-video .homepage-hero-content p {
  color: white;
}

/* Press Release Hero Section - Shorter version */
.press-release-hero {
  min-height: 50vh;
  text-align: center;
}

@media (min-width: 768px) {
  .press-release-hero {
    min-height: 60vh;
  }
}

.press-release-hero .container {
  padding-top: 140px; /* Account for header + some spacing */
  padding-bottom: 60px;
}

.press-release-hero-title {
  font-size: 2.5rem;
  font-weight: 700;
  color: white !important;
  margin-bottom: 1.5rem;
  line-height: 1.3;
  text-align: center;
  position: relative;
  display: inline-block;
  padding-bottom: 1.5rem;
}

.press-release-hero-title::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 50%;
  height: 8px;
  background-color: #c4304f;
}

.press-release-hero-intro {
  font-size: 1.1rem;
  color: white !important;
  line-height: 1.6;
  text-align: center;
  max-width: 800px;
  margin: 0 auto;
}

.press-release-hero-intro * {
  color: white !important;
}

/* Ensure all headings in press release hero are white */
.press-release-hero h1,
.press-release-hero h2,
.press-release-hero h3,
.press-release-hero h4,
.press-release-hero h5,
.press-release-hero h6,
.press-release-hero .h1,
.press-release-hero .h2,
.press-release-hero .h3,
.press-release-hero .h4,
.press-release-hero .h5,
.press-release-hero .h6,
.press-release-hero-title,
.press-release-hero .press-release-hero-title {
  color: white !important;
}

/* Ensure all headings in all page hero sections are white */
.page-hero-section h1,
.page-hero-section h2,
.page-hero-section h3,
.page-hero-section h4,
.page-hero-section h5,
.page-hero-section h6,
.page-hero-section .h1,
.page-hero-section .h2,
.page-hero-section .h3,
.page-hero-section .h4,
.page-hero-section .h5,
.page-hero-section .h6,
.blog-hero-headline,
.blog-hero-content h1,
.blog-hero-content h2,
.blog-hero-content h3,
.blog-hero-content h4,
.blog-hero-content h5,
.blog-hero-content h6,
.blog-post-hero h1,
.blog-post-hero h2,
.blog-post-hero h3,
.blog-post-hero h4,
.blog-post-hero h5,
.blog-post-hero h6,
.blog-post-hero-title,
.blog-post-hero .blog-post-hero-title {
  color: white !important;
}

/* Blog Post Hero Section - Shorter version */
.blog-post-hero {
  min-height: 50vh;
  text-align: center;
}

@media (min-width: 768px) {
  .blog-post-hero {
    min-height: 60vh;
  }
}

/* Standard Page Hero Section - Shorter height when only headline */
.page-hero-headline-only {
  height: 40vh !important;
  min-height: 300px !important;
}

@media (min-width: 768px) {
  .page-hero-headline-only {
    height: 50vh !important;
    min-height: 400px !important;
  }
}

/* Page hero section container - add padding to account for negative margin */
/* More specific selector to override homepage-hero-section .container when both classes are present */
.homepage-hero-section.page-hero-section .container,
.page-hero-section .container {
  padding-top: 109px; /* Add padding to account for negative margin on mobile */
}

@media (min-width: 768px) {
  .homepage-hero-section.page-hero-section .container,
  .page-hero-section .container {
    padding-top: 96px; /* Add padding to match header height on desktop */
  }
}

.blog-post-hero .container {
  padding-top: 140px; /* Account for header + some spacing */
  padding-bottom: 60px;
}

.blog-post-hero-title {
  font-size: 2.5rem;
  font-weight: 700;
  color: white !important;
  margin-bottom: 1.5rem;
  line-height: 1.;
  text-align: center;
  position: relative;
  display: inline-block;
  padding-bottom: 1.5rem;
}

.blog-post-hero-title::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 50%;
  height: 14px;
  background-color: #c4304f;
}

.blog-post-hero-intro {
  font-size: 1.1rem;
  color: white !important;
  line-height: 1.6;
  text-align: center;
  max-width: 800px;
  margin: 0 auto;
}

.blog-post-hero-intro * {
  color: white !important;
}

/* Content area spacing for pages with hero sections */
.press-release #intro,
.press-release .intro,
.press-release #content,
.press-release .container #intro {
  margin-top: 3rem;
}

/* Content area spacing for blog post pages with hero */
.blog-post-hero + * #content,
.blog-post-hero ~ .row #content,
.blog-post-hero ~ * .intro,
.blog-post-hero ~ * #intro {
  margin-top: 1.5rem;
}

/* Content area spacing for basic pages with hero */
.page-hero-section ~ main#content,
.page-hero-section ~ * #content {
  margin-top: 2rem;
}

/* Content area spacing for press release pages with hero */
.press-release-hero ~ .press-release #intro,
.press-release-hero ~ * .intro,
.press-release-hero ~ * #intro {
  margin-top: 3rem;
}

/* Hide duplicate page headline in content when page hero is present */
/* When page hero exists (body doesn't have .no-page-hero class), hide duplicate headlines */
body:not(.no-page-hero) h1.headline,
body:not(.no-page-hero) h2.headline {
  display: none !important;
}

/* Hide headlines in specific page templates when hero is present */
body:not(.no-page-hero) .press-release header h2.headline,
body:not(.no-page-hero) .press-release h2.headline {
  display: none !important;
}

/* Hide first h1 or h2 that appears at the start of content in certain contexts when hero is present */
body:not(.no-page-hero) main#content > .container > .row > div > h1:first-child,
body:not(.no-page-hero) main#content > .container > .row > div > h2:first-child,
body:not(.no-page-hero) #content > .container > .row > div > h1:first-child,
body:not(.no-page-hero) #content > .container > .row > div > h2:first-child {
  display: none !important;
}

/* Remove negative margins but add proper spacing on pages without page hero */
.no-page-hero main#content,
.no-page-hero #content {
  margin-top: 2rem !important;
  padding-top: 0 !important;
}

.no-page-hero .container {
  margin-top: 0 !important;
  padding-top: 2rem !important;
}

/* Profile page card - white/light text */
.page-profiles-show .card,
.page-profiles-show-wide .card {
  color: white !important;
}

.page-profiles-show .card *,
.page-profiles-show-wide .card * {
  color: white !important;
}

.page-profiles-show .card a,
.page-profiles-show-wide .card a {
  color: white !important;
}

.page-profiles-show .card a:hover,
.page-profiles-show-wide .card a:hover {
  color: rgba(255, 255, 255, 0.8) !important;
}

.page-profiles-show .card .name,
.page-profiles-show-wide .card .name {
  color: white !important;
}

.page-profiles-show .card .badge,
.page-profiles-show-wide .card .badge {
  background-color: rgba(255, 255, 255, 0.2) !important;
  color: white !important;
}

.page-profiles-show .card .badge a,
.page-profiles-show-wide .card .badge a {
  color: white !important;
}

/* Homepage Signup Form Overlay */
.homepage-signup-form-overlay {
  margin-top: -75px; /* Pull form up to overlap hero */
  position: relative;
  z-index: 5;
}

/* Calendar Search Form Overlay (matching homepage hero form) */
.calendar-search-form-overlay {
  margin-top: -100px; /* Pull form up to overlap map (less aggressive than -150px) */
  position: relative;
  z-index: 15; /* Higher than map z-index: 10 */
}

/* Petition Content Emphasis */
#petition-content {
  font-size: 1.15rem;
  line-height: 1.75;
  font-weight: 400;
  color: #212529;
  margin-bottom: 1.5rem;
}

#petition-content p {
  margin-bottom: 1rem;
}

#petition-content p:last-child {
  margin-bottom: 0;
}

#petition-content h1,
#petition-content h2,
#petition-content h3,
#petition-content h4,
#petition-content h5,
#petition-content h6 {
  margin-top: 1.5rem;
  margin-bottom: 1rem;
  color: var(--bs-primary);
}

/* Petition Form Overlay (overlapping hero banner) */
.petition-form-overlay {
  margin-top: -120px; /* Pull form up further to overlap hero */
  position: relative;
  z-index: 10;
}

@media (max-width: 991.98px) {
  .petition-form-overlay {
    margin-top: 0; /* No overlap on mobile */
    margin-bottom: 2rem;
  }
}

.petition-signup-form {
  width: 100%;
  max-width: 100%;
  padding: 35px 33px 25px 33px;
  border-radius: 10px;
  background: rgba(32, 64, 115, 0.50);
  box-shadow: 0 -1px 1px 0 rgba(255, 255, 255, 0.10) inset, 0 1px 1px 0 rgba(255, 255, 255, 0.25) inset, 0 8px 6px 0 rgba(0, 0, 0, 0.05);
  backdrop-filter: blur(50px);
  -webkit-backdrop-filter: blur(50px);
  transition: all 0.4s ease;
  color: white;
}

.petition-signup-form .petition-form-header {
  color: white !important;
  margin-bottom: 1.5rem;
  font-size: 1.5rem;
  font-weight: 600;
}

.petition-signup-form h3,
.petition-signup-form h4 {
  color: white;
  margin-bottom: 1.5rem;
}

.petition-signup-form p {
  color: rgba(255, 255, 255, 0.9);
}

.petition-signup-form label,
.petition-signup-form .form-label {
  color: white !important;
  font-weight: 500;
  margin-bottom: 0.5rem;
}

.petition-signup-form label[for],
.petition-signup-form .form-group label,
.petition-signup-form .form-check-label {
  color: white !important;
}

.petition-signup-form .form-control {
  background-color: rgba(255, 255, 255, 0.95);
  border-color: rgba(255, 255, 255, 0.5);
  color: #212529;
}

.petition-signup-form .form-control::placeholder {
  color: rgba(33, 37, 41, 0.6);
}

/* Email opt-in toggle switch */
.petition-signup-form .email-opt-in-toggle {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.petition-signup-form .email-opt-in-toggle .toggle-radio {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.petition-signup-form .email-opt-in-toggle .toggle-radio:checked + .toggle-label {
  background-color: var(--bs-primary);
  color: white;
  border-color: var(--bs-primary);
}

.petition-signup-form .email-opt-in-toggle .toggle-radio:required:invalid + .toggle-label {
  border-color: rgba(255, 255, 255, 0.5);
}

.petition-signup-form .email-opt-in-toggle .toggle-label {
  flex: 1;
  padding: 0.75rem 1.5rem;
  text-align: center;
  background-color: rgba(255, 255, 255, 0.1);
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 0.5rem;
  color: white;
  cursor: pointer;
  transition: all 0.3s ease;
  font-weight: 500;
  user-select: none;
}

.petition-signup-form .email-opt-in-toggle .toggle-label:hover {
  background-color: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.5);
}

.petition-signup-form .email-opt-in-toggle .toggle-label.toggle-yes {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.petition-signup-form .email-opt-in-toggle .toggle-label.toggle-no {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

/* Email opt-in toggle for donation forms */
.donation-form-container .email-opt-in-toggle,
.donation-video-background .email-opt-in-toggle {
  display: flex;
  border: 2px solid rgba(255, 255, 255, 0.8);
  border-radius: 0.375rem;
  overflow: hidden;
  background: transparent;
  width: 100%;
}

.donation-form-container .email-opt-in-toggle .toggle-radio,
.donation-video-background .email-opt-in-toggle .toggle-radio {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  margin: 0;
  padding: 0;
}

.donation-form-container .email-opt-in-toggle .toggle-radio:checked + .toggle-label,
.donation-video-background .email-opt-in-toggle .toggle-radio:checked + .toggle-label {
  background: white;
  color: #004079 !important;
}

.donation-form-container .email-opt-in-toggle .toggle-label,
.donation-video-background .email-opt-in-toggle .toggle-label {
  flex: 1;
  padding: 0.75rem 1rem;
  text-align: center;
  cursor: pointer;
  background: transparent;
  color: white;
  border: none;
  transition: all 0.3s ease;
  font-weight: 600;
  margin: 0;
  display: block;
  position: relative;
  z-index: 1;
  user-select: none;
}

.donation-form-container .email-opt-in-toggle .toggle-label:hover,
.donation-video-background .email-opt-in-toggle .toggle-label:hover {
  background: rgba(255, 255, 255, 0.1);
}

.donation-form-container .email-opt-in-toggle .toggle-label.toggle-yes,
.donation-video-background .email-opt-in-toggle .toggle-label.toggle-yes {
  border-right: 1px solid rgba(255, 255, 255, 0.3);
}

.donation-form-container .email-opt-in-toggle .toggle-label.toggle-no,
.donation-video-background .email-opt-in-toggle .toggle-label.toggle-no {
  border-left: 1px solid rgba(255, 255, 255, 0.3);
}

.petition-signup-form label.d-block {
  color: white;
}

.petition-signup-form .btn-outline-light {
  color: white !important;
  border-color: rgba(255, 255, 255, 0.5);
}

.petition-signup-form .btn-outline-light:hover {
  color: var(--bs-primary) !important;
  background-color: white;
  border-color: white;
}

.petition-signup-form .form-control:focus {
  background-color: white;
  border-color: white;
  box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.25);
}

.petition-signup-form .btn-primary {
  background-color: white;
  color: #004079;
  border-color: white;
}

.petition-signup-form .btn-primary:hover {
  background-color: rgba(255, 255, 255, 0.9);
  border-color: rgba(255, 255, 255, 0.9);
  color: #004079;
}

.petition-signup-form .form-errors {
  display: none;
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: 0.25rem;
  padding: 0.75rem;
  margin-bottom: 1rem;
  color: white;
}

.petition-signup-form .form-errors:not(:empty) {
  display: block;
}

.petition-signup-form a {
  color: white;
  text-decoration: underline;
}

.petition-signup-form a:hover {
  color: rgba(255, 255, 255, 0.9);
}

.petition-signup-form .form-group {
  margin-bottom: 0;
}

.petition-signup-form .form-row {
  margin-bottom: 15px;
}

.petition-signup-form .form-row:last-child {
  margin-bottom: 0;
}

/* Modern progress bar styling for petition form */
.petition-signup-form .petition-progress .progress {
  height: 2.5rem;
  background-color: rgba(255, 255, 255, 0.15);
  border-radius: 1.25rem;
  overflow: hidden;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}

.petition-signup-form .petition-progress .progress-bar {
  background: var(--bs-primary);
  animation: progress-fill 1.5s ease-out;
  border-top-left-radius: 1.25rem;
  border-bottom-left-radius: 1.25rem;
  border-top-right-radius: 1.5rem;
  border-bottom-right-radius: 1.5rem;
  box-shadow: 0 2px 8px rgba(0, 64, 121, 0.3);
  position: relative;
  overflow: hidden;
}

.petition-signup-form .petition-progress .petition-progress-text {
  color: white;
  font-size: 0.95rem;
  text-align: center;
}

.petition-signup-form .petition-progress .petition-progress-text strong {
  color: white;
  font-weight: 600;
}

.petition-signup-form .petition-progress .lead {
  color: white;
  text-align: center;
}

.petition-signup-form .petition-progress .lead strong {
  color: white;
  font-weight: 600;
}

.petition-signup-form .text-muted {
  color: rgba(255, 255, 255, 0.7) !important;
}

.petition-signup-form .submit-button {
  font-weight: 600;
  font-size: 1.1rem;
}

.petition-signup-form .submit-button .bi {
  font-size: 1.1rem;
}

/* Progress bar animations */
@keyframes progress-fill {
  from {
    width: 0%;
  }
}

.calendar-search-form {
  width: 100%;
  max-width: 100%;
  padding: 35px 33px;
  border-radius: 10px;
  background: rgba(32, 64, 115, 0.50); /* Blue background matching homepage form */
  box-shadow: 0 -1px 1px 0 rgba(255, 255, 255, 0.10) inset, 0 1px 1px 0 rgba(255, 255, 255, 0.25) inset, 0 8px 6px 0 rgba(0, 0, 0, 0.05);
  backdrop-filter: blur(50px);
  -webkit-backdrop-filter: blur(50px); /* Safari support */
  margin: 0 auto;
  transition: all 0.4s ease;
  color: white;
}

.calendar-search-form label,
.calendar-search-form .form-label {
  color: white;
  font-weight: 500;
  margin-bottom: 0.5rem;
}

.calendar-search-form .btn-primary {
  background-color: white;
  color: #004079;
  border-color: white;
}

.calendar-search-form .btn-primary:hover {
  background-color: rgba(255, 255, 255, 0.9);
  border-color: rgba(255, 255, 255, 0.9);
  color: #004079;
}

.calendar-search-form .form-control {
  background-color: rgba(255, 255, 255, 0.95);
  border-color: rgba(255, 255, 255, 0.5);
  color: #212529;
}

.calendar-search-form .form-control:focus {
  background-color: white;
  border-color: white;
  box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.25);
}

.calendar-search-form .form-control::placeholder {
  color: rgba(33, 37, 41, 0.6);
}

.calendar-search-form .btn-primary {
  background-color: white;
  color: #004079;
  border-color: white;
}

.calendar-search-form .btn-primary:hover {
  background-color: rgba(255, 255, 255, 0.9);
  border-color: rgba(255, 255, 255, 0.9);
  color: #004079;
}

.calendar-search-form p.lead {
  color: white;
}

.calendar-search-form a {
  color: white;
  text-decoration: underline;
}

.calendar-search-form a:hover {
  color: rgba(255, 255, 255, 0.9);
}

/* Ensure input-group fields are flush - remove any gaps */
.calendar-search-form .input-group {
  gap: 0;
}

.calendar-search-form .input-group .form-control.rounded-end-0 {
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  border-right: none;
}

.calendar-search-form .input-group .form-control.rounded-end-0:focus {
  border-right: none;
  z-index: 3;
}

.calendar-search-form .input-group .btn {
  border-left: none;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  margin-left: -1px;
}

/* Ensure Show all events button has white text */
.calendar-search-form .btn-outline-light {
  color: white !important;
  border-color: white;
}

.calendar-search-form .btn-outline-light:hover {
  color: #212529 !important;
  background-color: white;
  border-color: white;
}

/* Principles PDF Download Box Overlay */
.principles-pdf-download-overlay {
  margin-top: -75px; /* Pull box up to overlap hero */
  margin-bottom: 3rem; /* Add space before main content */
  position: relative;
  z-index: 5;
}

.principles-pdf-download-box {
  width: 100%;
  max-width: 500px;
  padding: 25px;
  border-radius: 10px;
  background: rgba(217, 217, 217, 0.50);
  box-shadow: 0 -1px 1px 0 rgba(255, 255, 255, 0.10) inset, 0 1px 1px 0 rgba(255, 255, 255, 0.25) inset, 0 8px 6px 0 rgba(0, 0, 0, 0.05);
  backdrop-filter: blur(50px);
  margin: 0 auto;
}

.principles-pdf-download-link {
  text-decoration: none;
  color: inherit;
  display: block;
}

.principles-pdf-download-link:hover {
  text-decoration: none;
  color: inherit;
}

.principles-pdf-download-content {
  display: flex;
  align-items: flex-start;
  gap: 1.5rem;
}

.principles-pdf-cover-image {
  flex-shrink: 0;
  width: 120px;
  border-radius: 5px;
  overflow: hidden;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  background: rgba(255, 255, 255, 0.1);
}

.principles-pdf-cover-image img {
  width: 100%;
  height: auto;
  display: block;
}

.principles-pdf-download-text {
  flex: 1;
  color: rgb(68, 68, 68);
}

.principles-pdf-title {
  color: rgb(68, 68, 68) !important;
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  text-transform: uppercase;
}

.principles-pdf-description {
  color: rgb(68, 68, 68);
  font-size: 0.95rem;
  margin-bottom: 1rem;
}

.principles-pdf-download-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 10px 20px;
  background: linear-gradient(180deg, #AE3951 0%, #9A3247 100%);
  border: 1px solid #9E2D44;
  border-radius: 5px;
  color: white;
  font-weight: 600;
  font-size: 0.95rem;
  transition: all 0.2s ease;
}

.principles-pdf-download-link:hover .principles-pdf-download-btn {
  background: linear-gradient(180deg, #9A3247 0%, #8B2D42 100%);
  border-color: #8B2D42;
}

.principles-pdf-download-btn .arrow {
  font-size: 1.2rem;
  line-height: 1;
  opacity: 0;
  transform: translateY(-5px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.principles-pdf-download-link:hover .principles-pdf-download-btn .arrow {
  opacity: 1;
  transform: translateY(0);
}

/* Gated Content Form Styles */
.principles-pdf-form-group {
  margin-bottom: 1rem;
}

.principles-pdf-form-label {
  display: block;
  color: rgb(68, 68, 68);
  font-weight: 600;
  font-size: 0.9rem;
  margin-bottom: 0.5rem;
}

.principles-pdf-form-control {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.8);
  color: rgb(68, 68, 68);
  font-size: 0.95rem;
  transition: all 0.2s ease;
}

.principles-pdf-form-control:focus {
  outline: none;
  border-color: var(--bs-danger);
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 0 0 3px rgba(196, 48, 79, 0.1);
}

.principles-pdf-form-control::placeholder {
  color: rgba(68, 68, 68, 0.5);
}

.principles-pdf-submit-btn {
  width: 100%;
  padding: 12px 20px;
  background: linear-gradient(180deg, #AE3951 0%, #9A3247 100%);
  border: 1px solid #9E2D44;
  border-radius: 5px;
  color: white;
  font-weight: 600;
  font-size: 0.95rem;
  transition: all 0.2s ease;
  cursor: pointer;
  margin-bottom: 1rem;
}

.principles-pdf-submit-btn:hover {
  background: linear-gradient(180deg, #9A3247 0%, #8B2D42 100%);
  border-color: #8B2D42;
  color: white;
}

.principles-pdf-privacy {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.principles-pdf-privacy small {
  color: rgba(68, 68, 68, 0.8);
  font-size: 0.85rem;
  line-height: 1.4;
}

.principles-pdf-privacy a {
  color: var(--bs-danger);
  text-decoration: underline;
}

.principles-pdf-privacy a:hover {
  color: #8B2D42;
}

.principles-pdf-direct-download {
  text-align: center;
}

.principles-pdf-direct-link {
  color: rgb(68, 68, 68);
  font-size: 0.9rem;
  text-decoration: underline;
  transition: color 0.2s ease;
}

.principles-pdf-direct-link:hover {
  color: var(--bs-danger);
  text-decoration: none;
}

.principles-pdf-success-message {
  padding: 1rem;
  background: rgba(40, 167, 69, 0.1);
  border: 1px solid rgba(40, 167, 69, 0.3);
  border-radius: 5px;
  margin-bottom: 1rem;
}

.principles-pdf-success-message p {
  color: rgb(68, 68, 68);
  margin: 0;
  font-weight: 500;
}

/* Responsive adjustments for PDF download box */
@media (max-width: 768px) {
  .principles-pdf-download-overlay {
    margin-top: -50px; /* Less overlap on mobile */
  }
  
  .principles-pdf-download-box {
    padding: 20px;
  }
  
  .principles-pdf-download-content {
    flex-direction: column;
    text-align: center;
    gap: 1rem;
  }
  
  .principles-pdf-cover-image {
    width: 100px;
    margin: 0 auto;
  }
  
  .principles-pdf-title {
    font-size: 1.1rem;
  }
}

@media (max-width: 576px) {
  .principles-pdf-download-overlay {
    margin-top: -40px;
  }
  
  .principles-pdf-download-box {
    padding: 15px;
  }
  
  .principles-pdf-cover-image {
    width: 80px;
  }
  
  .principles-pdf-download-overlay {
    margin-bottom: 2rem;
  }
}

/* Mobile form top bar */
.mobile-form-top-bar {
  display: none;
  width: 100%;
  position: relative;
  min-height: 50px;
  margin-bottom: 20px;
}

/* Mobile close button */
.btn-mobile-close {
  display: none;
  position: absolute;
  top: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.5);
  color: white;
  border: none;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  font-size: 24px;
  font-weight: bold;
  cursor: pointer;
  z-index: 1000;
  transition: all 0.3s ease;
}

.btn-mobile-close:hover {
  background: rgba(0, 0, 0, 0.7);
  transform: scale(1.1);
}

/* Mobile signup button */
.btn-mobile-signup {
  display: none;
  width: 100%;
  padding: 16px 24px;
  font-size: 18px;
  font-weight: 600;
  color: white;
  background: rgba(255, 255, 255, 0.2);
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  margin-top: 20px;
  margin-bottom: 0;
  text-align: center;
  backdrop-filter: blur(10px);
}

.btn-mobile-signup:hover {
  background: rgba(255, 255, 255, 0.3);
  border-color: rgba(255, 255, 255, 0.5);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.btn-mobile-signup:active {
  transform: translateY(0);
}

.btn-mobile-signup:focus,
.btn-mobile-signup:focus-visible,
.btn-mobile-signup.focus {
  outline: none !important;
  border: 2px solid rgba(255, 255, 255, 0.3) !important;
  box-shadow: none !important;
  /* Override any btn-primary focus styles if button has both classes */
  background-color: rgba(255, 255, 255, 0.2) !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
  color: white !important;
}

.btn-mobile-signup:active:focus {
  outline: none !important;
  border: 2px solid rgba(255, 255, 255, 0.3) !important;
  box-shadow: none !important;
  background-color: rgba(255, 255, 255, 0.2) !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
  color: white !important;
}

/* Responsive adjustments for smaller viewports */
@media (max-width: 768px) {
  .homepage-signup-form-overlay {
    margin-top: -50px; /* Less overlap on mobile */
  }
  
  main#content[style*="padding-top: 75px"] {
    padding-top: 50px !important;
  }
  
  /* Hide header when mobile form is expanded */
  body.mobile-form-open #header {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    z-index: -1 !important;
  }
  
  /* Ensure overlay container is above header when form is expanded */
  body.mobile-form-open .homepage-signup-form-overlay {
    z-index: 10000 !important;
  }
  
  /* Mobile form expansion styles */
  .homepage-signup-form.mobile-expanded {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    height: 100vh;
    margin: 0;
    z-index: 10000 !important; /* Higher than header (1030) */
    background: rgba(0, 0, 0, 0.9);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 20px;
    padding-top: 20px; /* No need for extra padding since header is hidden */
    border-radius: 0;
    overflow-y: auto;
  }
  
  /* Ensure overlay container stacks vertically on mobile when expanded */
  .homepage-signup-form.mobile-expanded ~ *,
  .homepage-signup-form-overlay .homepage-signup-form.mobile-expanded ~ * {
    display: block !important;
  }
  
  /* Show top bar when mobile form is expanded */
  .homepage-signup-form.mobile-expanded .mobile-form-top-bar {
    display: block !important;
    width: 100% !important;
    flex-shrink: 0;
  }
  
  .homepage-signup-form.mobile-expanded .btn-mobile-close {
    display: block !important;
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    left: auto !important;
    bottom: auto !important;
    margin: 0 !important;
    z-index: 10001 !important; /* Higher than expanded form */
    transform: none !important;
    align-self: auto !important;
  }
  
  .homepage-signup-form.mobile-expanded .form-essential-fields {
    display: block !important;
  }
  
  .homepage-signup-form.mobile-expanded .form-expanded-fields {
    display: block !important;
    max-height: none !important;
    opacity: 1 !important;
  }
  
  /* Hide form fields on mobile by default */
  .homepage-signup-form .form-essential-fields {
    display: none;
  }
  
  .homepage-signup-form .form-expanded-fields {
    display: none;
  }
  
  /* Mobile collapsed state - show only intro text */
  .homepage-signup-form.mobile-collapsed {
    cursor: default;
    background: rgba(32, 64, 115, 0.8);
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
  }
  
  .homepage-signup-form.mobile-collapsed:hover {
    background: rgba(32, 64, 115, 0.9);
  }
  
  .homepage-signup-form.mobile-collapsed .form-essential-fields,
  .homepage-signup-form.mobile-collapsed .form-expanded-fields {
    display: none !important;
  }
  
  /* Hide top bar when collapsed */
  .homepage-signup-form.mobile-collapsed .mobile-form-top-bar {
    display: none !important;
  }
  
  /* Show mobile signup button only when collapsed on mobile */
  .homepage-signup-form.mobile-collapsed .btn-mobile-signup {
    display: block;
  }
  
  /* Hide mobile signup button when expanded */
  .homepage-signup-form.mobile-expanded .btn-mobile-signup {
    display: none !important;
  }
  
  /* Ensure intro text and button are visible when collapsed */
  .homepage-signup-form.mobile-collapsed .lead {
    margin-bottom: 20px;
  }
  
  /* Clean up form layout on mobile when expanded */
  .homepage-signup-form.mobile-expanded .lead {
    margin-bottom: 25px;
  }
  
  .homepage-signup-form.mobile-expanded .form-essential-fields,
  .homepage-signup-form.mobile-expanded .form-expanded-fields {
    width: 100%;
  }
  
  /* Mobile expanded state improvements */
  .homepage-signup-form.mobile-expanded {
    background: rgba(0, 0, 0, 0.95);
    backdrop-filter: blur(20px);
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  
  .homepage-signup-form.mobile-expanded .container {
    max-width: 100% !important;
    padding: 0 !important;
    width: 100% !important;
    display: block !important;
  }
  
  .homepage-signup-form.mobile-expanded .row {
    margin: 0;
    flex-direction: column;
  }
  
  .homepage-signup-form.mobile-expanded .col-12 {
    padding: 0;
    width: 100%;
    flex: 0 0 100%;
    max-width: 100%;
  }
  
  /* Force all form fields to full width on mobile when expanded */
  .homepage-signup-form.mobile-expanded .form-row .col-6,
  .homepage-signup-form.mobile-expanded .form-group.col-6 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
  }
  
  .homepage-signup-form.mobile-expanded .form-row {
    flex-direction: column !important;
    display: flex !important;
    margin: 0;
  }
  
  .homepage-signup-form.mobile-expanded .form-group {
    width: 100% !important;
    margin-bottom: 1rem;
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
  
  /* Ensure form fields container stacks vertically */
  .homepage-signup-form.mobile-expanded .form-essential-fields,
  .homepage-signup-form.mobile-expanded .form-expanded-fields {
    width: 100% !important;
    display: block !important;
  }
  
  /* Ensure intro text and form content stack vertically */
  .homepage-signup-form.mobile-expanded > * {
    width: 100% !important;
    flex: 0 0 auto !important;
    display: block !important;
  }
  
  /* Override Bootstrap grid for mobile expanded form */
  .homepage-signup-form-overlay .homepage-signup-form.mobile-expanded ~ .container,
  .homepage-signup-form.mobile-expanded ~ .container,
  .homepage-signup-form.mobile-expanded .container {
    display: block !important;
  }
  
  .homepage-signup-form-overlay .homepage-signup-form.mobile-expanded ~ .row,
  .homepage-signup-form.mobile-expanded ~ .row,
  .homepage-signup-form.mobile-expanded .row {
    display: block !important;
    flex-direction: column !important;
  }
  
  /* Ensure all direct children of form stack vertically */
  .homepage-signup-form.mobile-expanded .lead,
  .homepage-signup-form.mobile-expanded form,
  .homepage-signup-form.mobile-expanded .form-essential-fields,
  .homepage-signup-form.mobile-expanded .form-expanded-fields,
  .homepage-signup-form.mobile-expanded h4,
  .homepage-signup-form.mobile-expanded .form-errors {
    display: block !important;
    width: 100% !important;
    float: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  
  /* Ensure form container content flows vertically */
  .homepage-signup-form.mobile-expanded {
    align-items: stretch !important;
  }
  
  .homepage-signup-form.mobile-expanded > * {
    flex-shrink: 0;
  }
  
  /* Prevent body scroll when mobile form is open */
  body.mobile-form-open {
    overflow: hidden !important;
    position: fixed;
    width: 100%;
  }
}

.homepage-signup-form {
  width: 760px;
  max-width: 100%;
  padding: 35px 33px;
  border-radius: 10px;
  background: rgba(32, 64, 115, 0.50);
  box-shadow: 0 -1px 1px 0 rgba(255, 255, 255, 0.10) inset, 0 1px 1px 0 rgba(255, 255, 255, 0.25) inset, 0 8px 6px 0 rgba(0, 0, 0, 0.05);
  backdrop-filter: blur(50px);
  -webkit-backdrop-filter: blur(50px);
  margin: 0 auto;
  transition: all 0.4s ease;
  overflow: hidden;
  color: white;
}

.homepage-signup-form .form-control {
  background-color: rgba(255, 255, 255, 0.95);
  border-color: rgba(255, 255, 255, 0.5);
  color: #212529;
}

.homepage-signup-form .form-control::placeholder {
  color: rgba(33, 37, 41, 0.6);
}

.homepage-signup-form .form-control:focus {
  background-color: white;
  border-color: white;
  box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.25);
}

.homepage-signup-form label,
.homepage-signup-form .form-label {
  color: white;
  font-weight: 500;
  margin-bottom: 0.5rem;
}

.homepage-signup-form .btn-primary {
  background-color: white;
  color: #004079;
  border-color: white;
}

.homepage-signup-form .btn-primary:hover {
  background-color: rgba(255, 255, 255, 0.9);
  border-color: rgba(255, 255, 255, 0.9);
  color: #004079;
}

.homepage-signup-form p.lead {
  color: white;
}

.homepage-signup-form a {
  color: white;
  text-decoration: underline;
}

.homepage-signup-form a:hover {
  color: rgba(255, 255, 255, 0.9);
}

/* Social share buttons in homepage signup form - white outline and text, respective brand color on hover */
.homepage-signup-form .share-btns .btn {
  background-color: transparent !important;
  border: 1px solid white !important;
  color: white !important;
  transition: all 0.3s ease;
}

.homepage-signup-form .share-btns .btn i,
.homepage-signup-form .share-btns .btn span,
.homepage-signup-form .share-btns .btn svg {
  color: white !important;
}

/* Facebook button - Facebook blue on hover */
.homepage-signup-form .share-btns .btn-facebook:hover,
.homepage-signup-form .share-btns .btn-facebook:focus,
.homepage-signup-form .share-btns .btn-facebook:active {
  background-color: #3b5998 !important;
  border-color: #3b5998 !important;
  color: white !important;
}

.homepage-signup-form .share-btns .btn-facebook:hover i,
.homepage-signup-form .share-btns .btn-facebook:hover span,
.homepage-signup-form .share-btns .btn-facebook:hover svg,
.homepage-signup-form .share-btns .btn-facebook:focus i,
.homepage-signup-form .share-btns .btn-facebook:focus span,
.homepage-signup-form .share-btns .btn-facebook:focus svg,
.homepage-signup-form .share-btns .btn-facebook:active i,
.homepage-signup-form .share-btns .btn-facebook:active span,
.homepage-signup-form .share-btns .btn-facebook:active svg {
  color: white !important;
}

/* Twitter/X button - X black on hover */
.homepage-signup-form .share-btns .btn-twitter:hover,
.homepage-signup-form .share-btns .btn-twitter:focus,
.homepage-signup-form .share-btns .btn-twitter:active {
  background-color: #000000 !important;
  border-color: #000000 !important;
  color: white !important;
}

.homepage-signup-form .share-btns .btn-twitter:hover i,
.homepage-signup-form .share-btns .btn-twitter:hover span,
.homepage-signup-form .share-btns .btn-twitter:hover svg,
.homepage-signup-form .share-btns .btn-twitter:focus i,
.homepage-signup-form .share-btns .btn-twitter:focus span,
.homepage-signup-form .share-btns .btn-twitter:focus svg,
.homepage-signup-form .share-btns .btn-twitter:active i,
.homepage-signup-form .share-btns .btn-twitter:active span,
.homepage-signup-form .share-btns .btn-twitter:active svg {
  color: white !important;
}

/* WhatsApp button - WhatsApp green on hover */
.homepage-signup-form .share-btns .btn-whatsapp:hover,
.homepage-signup-form .share-btns .btn-whatsapp:focus,
.homepage-signup-form .share-btns .btn-whatsapp:active {
  background-color: #25d366 !important;
  border-color: #25d366 !important;
  color: white !important;
}

.homepage-signup-form .share-btns .btn-whatsapp:hover i,
.homepage-signup-form .share-btns .btn-whatsapp:hover span,
.homepage-signup-form .share-btns .btn-whatsapp:hover svg,
.homepage-signup-form .share-btns .btn-whatsapp:focus i,
.homepage-signup-form .share-btns .btn-whatsapp:focus span,
.homepage-signup-form .share-btns .btn-whatsapp:focus svg,
.homepage-signup-form .share-btns .btn-whatsapp:active i,
.homepage-signup-form .share-btns .btn-whatsapp:active span,
.homepage-signup-form .share-btns .btn-whatsapp:active svg {
  color: white !important;
}

/* Email button (btn-info) - site brand color on hover */
.homepage-signup-form .share-btns .btn-info:hover,
.homepage-signup-form .share-btns .btn-info:focus,
.homepage-signup-form .share-btns .btn-info:active {
  background-color: var(--bs-primary) !important;
  border-color: var(--bs-primary) !important;
  color: white !important;
}

.homepage-signup-form .share-btns .btn-info:hover i,
.homepage-signup-form .share-btns .btn-info:hover span,
.homepage-signup-form .share-btns .btn-info:hover svg,
.homepage-signup-form .share-btns .btn-info:focus i,
.homepage-signup-form .share-btns .btn-info:focus span,
.homepage-signup-form .share-btns .btn-info:focus svg,
.homepage-signup-form .share-btns .btn-info:active i,
.homepage-signup-form .share-btns .btn-info:active span,
.homepage-signup-form .share-btns .btn-info:active svg {
  color: white !important;
}

.homepage-signup-form.collapsed {
  height: auto;
  min-height: 160px;
  cursor: pointer;
}

.homepage-signup-form.expanded {
  height: auto;
  min-height: 280px;
  cursor: default;
}

.homepage-signup-form .form-group {
  margin-bottom: 0;
}

/* Form sections */
.form-essential-fields {
  display: block;
}

/* Hide email field row in collapsed state - show name fields only */
/* Target the row containing the email field */
.homepage-signup-form.collapsed .form-essential-fields .row.form-row:has(input[type="email"]),
.homepage-signup-form.collapsed .form-essential-fields .row.form-row:has(label[for="signup_email"]) {
  display: none !important;
}

/* Fallback for browsers without :has() support - hide the second row (email row) */
.homepage-signup-form.collapsed .form-essential-fields .row.form-row:nth-child(2) {
  display: none !important;
}

/* Show email field when expanded */
.homepage-signup-form.expanded .form-essential-fields .row.form-row:has(input[type="email"]),
.homepage-signup-form.expanded .form-essential-fields .row.form-row:has(label[for="signup_email"]),
.homepage-signup-form.expanded .form-essential-fields .row.form-row:nth-child(2) {
  display: flex !important;
}

.form-expanded-fields {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: all 0.4s ease;
}

.homepage-signup-form.expanded .form-expanded-fields {
  max-height: 1000px;
  opacity: 1;
  margin-top: 20px;
}

/* Form rows with proper spacing */
.homepage-signup-form .form-row {
  margin-bottom: 15px;
}

.homepage-signup-form .form-row:last-child {
  margin-bottom: 0;
}

/* Privacy policy styling */
.privacy-policy {
  margin-top: 15px;
  padding-top: 15px;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}

/* Donation Homepage Excerpt Styles */
.donation-homepage-excerpt-section {
  position: relative;
  overflow: hidden;
  min-height: 500px;
  display: flex;
  align-items: center;
  margin: 0;
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
}

.donation-excerpt-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 1;
}

.donation-homepage-excerpt-section .container {
  position: relative;
  z-index: 2;
}

.donation-excerpt-card {
  border-radius: 10px;
  background: rgba(28, 56, 106, 0.80);
  box-shadow: 0 -1px 1px 0 rgba(255, 255, 255, 0.10) inset, 0 1px 1px 0 rgba(255, 255, 255, 0.25) inset, 0 8px 6px 0 rgba(0, 0, 0, 0.05);
  backdrop-filter: blur(50px);
  padding: 2rem 1.5rem;
  text-align: left;
  min-height: 300px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: 3rem 0;
}

/* Petition Homepage Excerpt Styles (matching donation v2 style) */
.petition-homepage-excerpt-section {
  position: relative;
  overflow: hidden;
  min-height: 500px;
  display: flex;
  align-items: center;
  margin: 0;
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
}

.petition-excerpt-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 1;
}

.petition-homepage-excerpt-section .container {
  position: relative;
  z-index: 2;
}

.petition-excerpt-card {
  border-radius: 10px;
  background: rgba(28, 56, 106, 0.80);
  box-shadow: 0 -1px 1px 0 rgba(255, 255, 255, 0.10) inset, 0 1px 1px 0 rgba(255, 255, 255, 0.25) inset, 0 8px 6px 0 rgba(0, 0, 0, 0.05);
  backdrop-filter: blur(50px);
  padding: 2rem 1.5rem;
  text-align: left;
  min-height: 300px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.petition-excerpt-title {
  text-transform: uppercase;
  color: white !important;
  font-weight: 600;
  margin-bottom: 1rem;
  font-size: 1.5rem;
}

.petition-excerpt-intro {
  color: rgba(255, 255, 255, 0.9);
  font-size: 1rem;
  line-height: 1.6;
}

.petition-excerpt-intro * {
  color: rgba(255, 255, 255, 0.9);
}

.petition-excerpt-progress .progress {
  height: 2rem;
  background-color: rgba(255, 255, 255, 0.15);
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}

.petition-excerpt-progress .progress-bar {
  background: var(--bs-primary);
  border-radius: 1rem;
  border-top-right-radius: 1.5rem;
  border-bottom-right-radius: 1.5rem;
}

.petition-excerpt-progress .petition-progress-text {
  color: white;
  font-size: 0.9rem;
  text-align: center;
}

.petition-excerpt-progress .petition-progress-text strong {
  color: white;
  font-weight: 600;
}

.petition-excerpt-count .lead {
  color: white;
  text-align: center;
}

.petition-excerpt-count .lead strong {
  color: white;
  font-weight: 600;
}

.petition-excerpt-action {
  margin-top: auto;
}

/* Recent signers feed */
.petition-signup-form .recent-signers-feed {
  text-align: center;
  padding: 0.75rem 0;
}

.petition-signup-form .recent-signers-feed .recent-signers-label {
  font-size: 0.85rem;
  opacity: 0.8;
  margin-bottom: 0.5rem;
}

.petition-signup-form .recent-signers-feed .recent-signers-container {
  position: relative;
  min-height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.petition-signup-form .recent-signers-feed .recent-signer-item {
  position: absolute;
  width: 100%;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.petition-signup-form .recent-signers-feed .recent-signer-item.active {
  position: relative;
  opacity: 1;
  transform: translateY(0);
}

.petition-signup-form .recent-signers-feed .recent-signer-item .signer-name {
  color: white;
  font-weight: 600;
  margin-right: 0.5rem;
}

.petition-signup-form .recent-signers-feed .recent-signer-item .signer-time {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.85rem;
}

.petition-excerpt-action .btn {
  color: white !important;
}

.petition-excerpt-action .btn .bi {
  color: white !important;
}

.petition-excerpt-action .btn:hover {
  color: white !important;
}

.petition-excerpt-action .btn:hover .bi {
  color: white !important;
}

.petition-excerpt-action .btn-danger {
  color: white !important;
}

.petition-excerpt-action .btn-danger:hover {
  color: white !important;
}

.petition-excerpt-action .btn-outline-light {
  color: white !important;
  border-color: rgba(255, 255, 255, 0.5);
}

.petition-excerpt-action .btn-outline-light:hover {
  color: var(--bs-primary) !important;
  background-color: white;
  border-color: white;
}

.donation-excerpt-title {
  color: white !important;
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
}

.donation-excerpt-btn {
  background: #f8f9fa;
  border: 1px solid #dee2e6;
  color: #212529;
  padding: 0.75rem 1.5rem;
  font-weight: 600;
  font-size: 1.1rem;
  border-radius: 8px;
  transition: all 0.3s ease;
  text-decoration: none;
  display: inline-block;
}

.donation-excerpt-btn:hover {
  background: #e9ecef;
  color: #212529;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  text-decoration: none;
}

/* Amount buttons styling */
.donation-amounts .amount-btn {
  background: transparent;
  border: 2px solid rgba(255, 255, 255, 0.8);
  /* Override global link color rules */
  color: white !important;
  font-weight: 600;
  padding: 0.75rem 1rem;
  font-size: 1rem;
  transition: all 0.3s ease;
  min-height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.donation-amounts .amount-btn:visited {
  color: white !important;
}

.donation-amounts .amount-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: white;
  color: white !important;
  transform: translateY(-2px);
}

.donation-amounts .amount-btn:focus {
  color: white !important;
}

.donation-amounts .amount-btn.active {
  background: white;
  color: #212529 !important;
  border-color: white;
}

/* Style NationBuilder radio buttons as buttons */
.donation-amounts input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.donation-amounts label,
.donation-amounts .radio,
.donation-amounts .radio-inline {
  display: block;
  margin: 0;
  padding: 0;
  cursor: pointer;
}

.donation-amounts label {
  background: transparent;
  border: 2px solid rgba(255, 255, 255, 0.8);
  color: white;
  font-weight: 600;
  padding: 0;
  font-size: 1.125rem;
  transition: all 0.3s ease;
  min-height: 3rem;
  height: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.375rem;
  width: 100%;
  margin: 0;
  box-sizing: border-box;
  cursor: pointer;
  text-align: center;
}

.donation-amounts label * {
  margin: 0;
  padding: 0;
  line-height: 1;
  display: inline;
  vertical-align: baseline;
}

.donation-amounts label br {
  display: none;
}

.donation-amounts .radio,
.donation-amounts .radio-inline {
  padding: 0;
  margin: 0;
  width: 100%;
}

/* Add top padding to custom-control-label radio buttons in donation-amounts */
.donation-amounts .custom-control-label {
  padding-top: 8px;
}

/* Two column grid layout with spacing */
.donation-amounts .row {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -0.5rem;
}

.donation-amounts .row > .radio,
.donation-amounts .row > .radio-inline,
.donation-amounts .row > div {
  flex: 0 0 auto;
  width: calc(50% - 1rem);
  padding: 0 0.5rem;
  margin-bottom: 0.75rem;
}

/* Ensure direct children of row are also styled */
.donation-amounts .row > * {
  flex: 0 0 auto;
  width: calc(50% - 1rem);
  padding: 0 0.5rem;
  margin-bottom: 0.75rem;
}

.donation-amounts label:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: white;
  color: white;
  transform: translateY(-2px);
}

.donation-amounts input[type="radio"]:checked + label,
.donation-amounts input[type="radio"]:checked ~ label,
.donation-amounts .radio:has(input[type="radio"]:checked) label,
.donation-amounts .radio-inline:has(input[type="radio"]:checked) label,
.donation-amounts label.selected {
  background: white;
  color: #212529;
  border-color: white;
}

/* Add spacing around the entire amount buttons container */
.donation-amounts {
  margin: 1rem 0;
  padding: 0;
}



.privacy-policy small {
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.8rem;
  line-height: 1.4;
}

/* Blog Homepage Excerpt Styles */
.blog-homepage-excerpt-section {
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
  background: white;
  padding: 0;
}

.blog-excerpt-container {
  position: relative;
  width: 100%;
}

.blog-excerpt-inner {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  padding: 3rem 15px;
}

.blog-posts-scroll {
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
  padding-left: calc(50vw - 50% + 15px);
  padding-right: 15px;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.blog-excerpt-title {
  color: #204073;
  font-family: Inter, sans-serif;
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 2rem;
  text-align: left;
}

.blog-posts-scroll::-webkit-scrollbar {
  display: none;
}

.blog-posts-container {
  display: flex;
  gap: 1.5rem;
  padding-bottom: 1rem;
  min-width: max-content;
}

.blog-post-card {
  border-radius: 10px;
  background: #FFF;
  box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.10);
  display: flex;
  width: 368px;
  height: 450px;
  padding: 15px;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  flex-shrink: 0;
  justify-content: space-between;
  transition: all 0.3s ease;
  cursor: pointer;
}

.blog-post-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 25px 0 rgba(0, 0, 0, 0.15);
}

.blog-post-image {
  border-radius: 8px;
  background-color: lightgray;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  flex: 1 1 auto;
  align-self: stretch;
  min-height: 200px;
  margin-bottom: 20px;
}

.blog-post-image-placeholder {
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #666;
  font-size: 0.9rem;
}

.blog-post-text {
  display: flex;
  flex-direction: column;
  gap: 0;
  flex-shrink: 0;
  transition: all 0.3s ease;
}

.blog-post-date {
  color: #000;
  font-family: Inter, sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  margin: 0 0 10px 0;
  transition: all 0.3s ease;
  opacity: 1;
  max-height: 20px;
  overflow: hidden;
}

.blog-post-headline {
  color: #204073;
  font-family: Inter, sans-serif;
  font-size: 24px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  margin: 0 0 10px 0;
  display: flex;
  align-items: flex-start;
  transition: all 0.3s ease;
}

.blog-post-excerpt {
  color: #666;
  font-family: Inter, sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 1.4;
  margin: 0 0 10px 0;
  transition: all 0.3s ease;
  opacity: 0;
  max-height: 0;
  overflow: hidden;
}

.blog-post-read-more {
  margin: 0;
  transition: all 0.3s ease;
  opacity: 0;
  max-height: 0;
  overflow: hidden;
}

.blog-post-read-more a {
  color: #204073;
  font-family: Inter, sans-serif;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: all 0.3s ease;
}

.blog-post-read-more a:hover {
  color: #1a3559;
  text-decoration: none;
}

.blog-post-read-more .arrow {
  transition: transform 0.3s ease;
}

.blog-post-read-more a:hover .arrow {
  transform: translateX(3px);
}

/* Hover states for blog post cards */
.blog-post-card:hover .blog-post-date {
  display: none;
}

.blog-post-card:hover .blog-post-excerpt {
  opacity: 1;
  max-height: 60px;
  margin: 0 0 10px 0;
}

.blog-post-headline a {
  color: inherit;
  text-decoration: none;
  display: block;
  width: 100%;
}

.blog-post-headline a:hover {
  color: #1a3559;
  text-decoration: none;
}

.blog-navigation {
  display: flex;
  justify-content: flex-end;
  gap: 1rem;
  margin: 2rem 0;
  padding-right: 15px;
}

.blog-nav-btn,
.blog-navigation .btn-nav,
.blog-navigation .btn,
.blog-nav-prev,
.blog-nav-next {
  background: transparent;
  color: #204073;
  border: 2px solid #204073;
  border-radius: 50% !important;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 1.2rem;
}

.blog-nav-btn:hover,
.blog-navigation .btn-nav:hover,
.blog-nav-prev:hover,
.blog-nav-next:hover {
  background: #204073;
  color: white;
  border-color: #204073;
  transform: scale(1.1);
}

.blog-nav-btn:disabled,
.blog-navigation .btn-nav:disabled {
  background: #ccc;
  color: #666;
  border-color: #ccc;
  cursor: not-allowed;
  transform: none;
}

.blog-view-all {
  text-align: center;
  margin-top: 2rem;
}

.blog-view-all .btn {
  background: #204073;
  border: none;
  padding: 0.75rem 2rem;
  font-weight: 600;
  border-radius: 5px;
}

.blog-view-all .btn:hover {
  background: #1a3559;
}

/* Calendar Homepage Excerpt Styles */
.calendar-homepage-excerpt-section {
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
  background: white;
  padding: 0;
}

.calendar-excerpt-container {
  position: relative;
  width: 100%;
}

.calendar-excerpt-inner {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  padding: 3rem 15px;
}

.calendar-events-scroll {
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
  padding-left: calc(50vw - 50% + 15px);
  padding-right: 15px;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.calendar-excerpt-title {
  color: #204073;
  font-family: Inter, sans-serif;
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 2rem;
  text-align: left;
}

.calendar-events-scroll::-webkit-scrollbar {
  display: none;
}

.calendar-events-container {
  display: flex;
  gap: 1.5rem;
  padding-bottom: 1rem;
  min-width: max-content;
}

/* Shared Event Card Styles */
.event-card-shared {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  width: 100%;
  height: 100%;
  justify-content: flex-start;
}

.event-card-image {
  border-radius: 8px;
  background-color: lightgray;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  align-self: stretch;
  height: 180px;
  margin-bottom: 15px;
  flex-shrink: 0;
}

.event-card-image-placeholder {
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #666;
  font-size: 0.9rem;
}

.event-card-content {
  display: flex;
  flex-direction: column;
  gap: 0;
  flex: 1;
  width: 100%;
  min-height: 0;
}

/* ========================================
   GLOBAL CARD ELEMENT UTILITIES
   ======================================== */

/* Headline Elements */
.card-headline {
  color: #204073 !important;
  font-family: Inter, sans-serif;
  font-size: 24px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  margin: 0 0 10px 0;
  display: flex;
  align-items: flex-start;
  transition: all 0.3s ease;
}

.card-headline a,
.card-headline a:link,
.card-headline a:visited,
.card-headline a:hover,
.card-headline a:active,
.card-headline a:focus {
  color: #204073 !important;
  text-decoration: none !important;
  display: block;
  width: 100%;
  border: none !important;
  box-shadow: none !important;
}

.card-headline a:hover,
.card-headline a:focus {
  color: #1a3559 !important;
  text-decoration: none !important;
  outline: none;
}

.card-headline-sm {
  color: #204073 !important;
  font-family: Inter, sans-serif;
  font-size: 20px;
  font-style: normal;
  font-weight: 700;
  line-height: 1.3;
  margin: 0 0 12px 0;
  display: flex;
  align-items: flex-start;
  transition: all 0.3s ease;
  flex-shrink: 0;
}

.card-headline-sm a,
.card-headline-sm a:link,
.card-headline-sm a:visited,
.card-headline-sm a:hover,
.card-headline-sm a:active,
.card-headline-sm a:focus {
  color: #204073 !important;
  text-decoration: none !important;
  display: block;
  width: 100%;
  border: none !important;
  box-shadow: none !important;
}

.card-headline-sm a:hover,
.card-headline-sm a:focus {
  color: #204073 !important;
  text-decoration: none !important;
  outline: none;
}

.card-headline-xs {
  color: #204073 !important;
  font-family: Inter, sans-serif;
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.3;
  margin: 0;
}

.card-headline-xs a,
.card-headline-xs a:link,
.card-headline-xs a:visited,
.card-headline-xs a:hover,
.card-headline-xs a:active,
.card-headline-xs a:focus {
  color: #204073 !important;
  text-decoration: none !important;
  border: none !important;
  box-shadow: none !important;
}

.card-headline-xs a:hover,
.card-headline-xs a:focus {
  color: #204073 !important;
  text-decoration: none !important;
  outline: none;
}

.card-headline-xs:hover {
  color: #204073 !important;
  text-decoration: none;
}

.card-headline-white {
  color: white !important;
  font-family: Inter, sans-serif;
  font-size: 24px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  margin: 0 0 10px 0;
  display: flex;
  align-items: flex-start;
  transition: all 0.3s ease;
  text-transform: uppercase;
  text-decoration: none;
}

.card-headline-white a,
.card-headline-white a:link,
.card-headline-white a:visited,
.card-headline-white a:hover,
.card-headline-white a:active,
.card-headline-white a:focus {
  color: white !important;
  text-decoration: none !important;
}

.card-headline-white:hover {
  color: white !important;
  text-decoration: none;
}

/* Date Elements */
.card-date {
  color: #000;
  font-family: Inter, sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: normal;
  margin: 0 0 10px 0;
  transition: all 0.3s ease;
}

.card-date-with-icon {
  color: #000;
  font-family: Inter, sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: normal;
  margin: 0 0 10px 0;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 8px;
}

.card-date-with-icon i {
  color: #204073;
  font-size: 16px;
  flex-shrink: 0;
}

.card-date-badge {
  position: absolute;
  top: 1rem;
  left: 1rem;
  background: #204073;
  color: white;
  padding: 0.5rem 1rem;
  border-radius: 0.25rem;
  font-weight: 600;
  font-size: 0.875rem;
  z-index: 10;
}

/* Excerpt Elements */
.card-excerpt {
  color: #666;
  font-family: Inter, sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 1.4;
  margin: 0 0 10px 0;
  transition: all 0.3s ease;
  opacity: 0;
  max-height: 0;
  overflow: hidden;
}

.card-excerpt-white {
  color: white;
  font-family: Inter, sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 1.4;
  margin: 0;
  transition: all 0.3s ease;
  opacity: 0;
  max-height: 0;
  overflow: hidden;
}

/* Read More Links */
.card-read-more {
  margin: 0;
  transition: all 0.3s ease;
  opacity: 0;
  max-height: 0;
  overflow: hidden;
}

.card-read-more a {
  color: #204073;
  font-family: Inter, sans-serif;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: all 0.3s ease;
}

.card-read-more a:hover {
  color: #1a3559;
  text-decoration: none;
}

.card-read-more .arrow {
  transition: transform 0.3s ease;
}

.card-read-more a:hover .arrow {
  transform: translateX(3px);
}

/* Meta Information */
.card-meta {
  font-size: 0.875rem;
  color: #6c757d;
  margin-bottom: 0.5rem;
}

.card-meta i {
  margin-right: 0.5rem;
  color: #204073;
}

/* Image Containers */
.card-image {
  border-radius: 8px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  transition: all 0.3s ease;
}

.card-image-placeholder {
  background: linear-gradient(135deg, #e9ecef 0%, #dee2e6 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.card-image-placeholder::after {
  content: "";
  font-size: 2rem;
  opacity: 0.5;
}

/* Detail Sections */
.card-details {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 10px;
}

.card-detail-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  color: #666;
  font-family: Inter, sans-serif;
  font-size: 14px;
  line-height: 1.4;
}

.card-detail-item i {
  font-size: 16px;
  color: #204073;
  flex-shrink: 0;
  margin-top: 2px;
}

.card-detail-item span {
  flex: 1;
}

.card-detail-item a {
  color: #204073;
  text-decoration: none;
}

.card-detail-item a:hover {
  color: #1a3559;
  text-decoration: underline;
}

/* Backward compatibility for old element class names */
.blog-post-date,
.event-card-date {
  color: #000;
  font-family: Inter, sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: normal;
  margin: 0 0 10px 0;
  transition: all 0.3s ease;
}

.blog-post-headline,
.event-card-headline {
  color: #204073 !important;
  font-family: Inter, sans-serif;
  font-size: 24px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  margin: 0 0 10px 0;
  display: flex;
  align-items: flex-start;
  transition: all 0.3s ease;
}

.blog-post-headline a,
.blog-post-headline a:link,
.blog-post-headline a:visited,
.blog-post-headline a:hover,
.blog-post-headline a:active,
.blog-post-headline a:focus,
.event-card-headline a,
.event-card-headline a:link,
.event-card-headline a:visited,
.event-card-headline a:hover,
.event-card-headline a:active,
.event-card-headline a:focus {
  color: #204073 !important;
  text-decoration: none !important;
  display: block;
  width: 100%;
  border: none !important;
  box-shadow: none !important;
}

.blog-post-headline a:hover,
.blog-post-headline a:focus,
.event-card-headline a:hover,
.event-card-headline a:focus {
  color: #1a3559 !important;
  text-decoration: none !important;
  outline: none;
}

.policies-post-headline {
  color: white !important;
  font-family: Inter, sans-serif;
  font-size: 24px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  margin: 0 0 10px 0;
  display: flex;
  align-items: flex-start;
  transition: all 0.3s ease;
  text-transform: uppercase;
  text-decoration: none;
}

.policies-post-headline a,
.policies-post-headline a:link,
.policies-post-headline a:visited,
.policies-post-headline a:hover,
.policies-post-headline a:active,
.policies-post-headline a:focus {
  color: white !important;
  text-decoration: none !important;
}

.policies-post-headline:hover {
  color: white !important;
  text-decoration: none;
}

.principles-post-headline {
  color: #204073 !important;
  font-family: Inter, sans-serif;
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.3;
  margin: 0;
}

.principles-post-headline a,
.principles-post-headline a:link,
.principles-post-headline a:visited,
.principles-post-headline a:hover,
.principles-post-headline a:active,
.principles-post-headline a:focus {
  color: #204073 !important;
  text-decoration: none !important;
  border: none !important;
  box-shadow: none !important;
}

.principles-post-headline a:hover,
.principles-post-headline a:focus {
  color: #204073 !important;
  text-decoration: none !important;
  outline: none;
}

.principles-post-headline:hover {
  color: #204073 !important;
  text-decoration: none;
}

.blog-post-excerpt,
.policies-post-excerpt {
  color: #666;
  font-family: Inter, sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 1.4;
  margin: 0 0 10px 0;
  transition: all 0.3s ease;
  opacity: 0;
  max-height: 0;
  overflow: hidden;
}

.policies-post-excerpt {
  color: white;
  margin: 0;
}

.blog-post-read-more {
  margin: 0;
  transition: all 0.3s ease;
  opacity: 0;
  max-height: 0;
  overflow: hidden;
}

.blog-post-read-more a {
  color: #204073;
  font-family: Inter, sans-serif;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: all 0.3s ease;
}

.blog-post-read-more a:hover {
  color: #1a3559;
  text-decoration: none;
}

.blog-post-read-more .arrow {
  transition: transform 0.3s ease;
}

.blog-post-read-more a:hover .arrow {
  transform: translateX(3px);
}

.blog-post-image,
.policies-post-image,
.principles-post-image,
.event-card-image {
  border-radius: 8px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  transition: all 0.3s ease;
}

.blog-post-image-placeholder,
.policies-post-image-placeholder,
.principles-post-image-placeholder {
  background: linear-gradient(135deg, #e9ecef 0%, #dee2e6 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.blog-post-image-placeholder::after,
.policies-post-image-placeholder::after,
.principles-post-image-placeholder::after {
  content: "";
  font-size: 2rem;
  opacity: 0.5;
}

/* Backward compatibility for event detail items */
.event-card-time,
.event-card-venue {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  color: #666;
  font-family: Inter, sans-serif;
  font-size: 14px;
  line-height: 1.4;
}

.event-card-time {
  align-items: center;
}

.event-card-time i,
.event-card-venue i {
  font-size: 16px;
  color: #204073;
  flex-shrink: 0;
  margin-top: 2px;
}

.event-card-time i {
  font-size: 14px;
  margin-top: 0;
}

.event-card-venue span {
  flex: 1;
}

.event-card-venue a {
  color: #204073;
  text-decoration: none;
}

.event-card-venue a:hover {
  color: #1a3559;
  text-decoration: underline;
}

.event-card-location {
  color: #999;
}

.event-card-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}

/* Hover states for blog post cards */
.blog-post-card:hover .blog-post-date {
  display: none;
}

.blog-post-card:hover .blog-post-excerpt {
  opacity: 1;
  max-height: 60px;
  margin: 0 0 10px 0;
}

/* Hover states for policies post cards */
.policies-post-card:hover .policies-post-image {
  height: 200px; /* Compress image height on hover */
}

.policies-post-card:hover .policies-post-excerpt {
  opacity: 1;
  max-height: 150px;
  margin: 0;
  overflow: visible;
}

.policies-post-card:nth-child(odd):hover .policies-post-excerpt {
  margin-top: 10px; /* Add space above excerpt for top-image cards */
}

.policies-post-card:nth-child(even):hover .policies-post-excerpt {
  margin-bottom: 10px; /* Add space below excerpt for bottom-image cards */
}

.event-card-date {
  color: #000;
  font-family: Inter, sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  margin: 0 0 10px 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.event-card-date i {
  color: #204073;
  font-size: 16px;
  flex-shrink: 0;
}

.event-card-headline {
  color: #204073;
  font-family: Inter, sans-serif;
  font-size: 24px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  margin: 0 0 10px 0;
  display: flex;
  align-items: flex-start;
}

.event-card-headline a {
  color: inherit;
  text-decoration: none;
  display: block;
  width: 100%;
}

.event-card-headline a:hover {
  color: #1a3559;
  text-decoration: none;
}

.event-card-details {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 10px;
  width: 100%;
}

.event-card-time {
  color: #666;
  font-family: Inter, sans-serif;
  font-size: 14px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 8px;
}

.event-card-time i {
  color: #204073;
  font-size: 14px;
  flex-shrink: 0;
}

.event-card-venue {
  color: #666;
  font-family: Inter, sans-serif;
  font-size: 14px;
  font-weight: 400;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.event-card-venue i {
  color: #204073;
  font-size: 14px;
  flex-shrink: 0;
  margin-top: 2px;
}

.event-card-venue span {
  flex: 1;
}

.event-card-venue a {
  color: #204073;
  text-decoration: none;
}

.event-card-venue a:hover {
  color: #1a3559;
  text-decoration: underline;
}

.event-card-location {
  color: #999;
}

.event-card-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}


.event-card-rsvp-button {
  margin-top: auto;
  padding-top: 15px;
  width: 100%;
}

.event-card-rsvp-button .btn {
  border-width: 2px;
  font-weight: 600;
  padding: 0.75rem 1rem;
  transition: all 0.3s ease;
}

.event-card-rsvp-button .btn-outline-primary {
  border-color: #204073;
  color: #204073;
}

.event-card-rsvp-button .btn-outline-primary:hover {
  background-color: #204073;
  border-color: #204073;
  color: white;
}

.event-card-rsvp-button .btn-outline-danger {
  border-color: #dc3545;
  color: #dc3545;
}

.event-card-rsvp-button .btn-outline-danger:hover {
  background-color: #dc3545;
  border-color: #dc3545;
  color: white;
}

/* Calendar Event Card Wrapper (Horizontal Scroll Context) */
.calendar-event-card {
  border-radius: 10px;
  background: #FFF;
  box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.10);
  display: flex;
  width: 368px;
  height: auto;
  min-height: 300px;
  padding: 15px;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  flex-shrink: 0;
  justify-content: flex-start;
  transition: all 0.3s ease;
  cursor: pointer;
}

.calendar-event-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 25px 0 rgba(0, 0, 0, 0.15);
}

/* Event Card Wrapper (Grid Context) */
.event-card-wrapper {
  border-radius: 10px;
  background: #FFF;
  box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.10);
  padding: 15px;
  height: 100%;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
}

.event-card-wrapper:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 25px 0 rgba(0, 0, 0, 0.15);
}


.calendar-navigation {
  display: flex;
  justify-content: flex-end;
  gap: 1rem;
  margin: 2rem 0;
  padding-right: 15px;
}

.calendar-nav-btn {
  background: #204073;
  color: white;
  border: none;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 1.2rem;
}

.calendar-nav-btn:hover {
  background: #1a3559;
  transform: scale(1.1);
}

.calendar-nav-btn:disabled {
  background: #ccc;
  cursor: not-allowed;
  transform: none;
}

.calendar-view-all {
  text-align: center;
  margin-top: 2rem;
}

.calendar-view-all .btn {
  background: #204073;
  border: none;
  padding: 0.75rem 2rem;
  font-weight: 600;
  border-radius: 5px;
}

.calendar-view-all .btn:hover {
  background: #1a3559;
}

.calendar-view-all .btn-outline-primary {
  border: 2px solid #204073;
  color: #204073;
  background: transparent;
}

.calendar-view-all .btn-outline-primary:hover {
  background: #204073;
  color: white;
}

/* Press Homepage Excerpt Styles */
.press-homepage-excerpt-section {
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
  padding: 0;
}

.press-excerpt-container {
  position: relative;
  width: 100%;
}

.press-excerpt-inner {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  padding: 3rem 15px;
}

.press-posts-scroll {
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
  padding-left: calc(50vw - 50% + 15px);
  padding-right: 15px;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.press-posts-scroll::-webkit-scrollbar {
  display: none;
}

.press-posts-container {
  display: flex;
  gap: 1.5rem;
  padding-bottom: 1rem;
  min-width: max-content;
}

/* ========================================
   POST CARD - Reusable Card Component
   Works in both horizontal scroll and grid layouts
   ======================================== */

.post-card {
  display: flex;
  flex-direction: column;
  width: 320px;
  max-width: 320px;
  height: 400px;
  background: #FFF;
  border-radius: 10px;
  box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.10);
  overflow: hidden;
  transition: all 0.3s ease;
  cursor: pointer;
  text-decoration: none !important;
  color: inherit;
  position: relative;
  flex-shrink: 0;
  flex-grow: 0;
  padding: 15px;
  gap: 0;
  box-sizing: border-box;
}

/* Grid layout override - make cards fill grid cells */
.blog-posts-grid .post-card {
  width: 100%;
  max-width: 100%;
  height: 100%;
  min-height: 400px;
}

/* Policies page - 20% shorter cards */
.policies-blog-grid .post-card {
  min-height: 320px; /* 400px * 0.8 = 320px (20% reduction) */
}

.post-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
  text-decoration: none !important;
  color: inherit;
}

.post-card:focus,
.post-card:visited {
  text-decoration: none !important;
  color: inherit;
}

/* Image wrapper with date badge - fills remaining space */
.post-card-image-wrapper {
  position: relative;
  width: 100%;
  max-width: 100%;
  flex: 1 1 auto;
  min-height: 200px;
  max-height: 250px;
  margin-bottom: 12px;
  overflow: hidden;
}

/* Policies page - reorder so headline is first, image fills remaining space */
.policies-blog-grid .post-card-content {
  order: -1; /* Move content (headline) to top */
  min-height: 0; /* Remove min-height so it only takes space needed for headline */
  flex-shrink: 0; /* Don't shrink */
  margin-bottom: 12px; /* Add spacing between headline and image */
}

.policies-blog-grid .post-card-image-wrapper {
  order: 1; /* Move image below headline */
  min-height: 0; /* Remove min-height constraint */
  max-height: none; /* Remove max-height constraint */
  flex: 1 1 auto; /* Fill all remaining space after headline */
  margin-bottom: 0; /* Remove bottom margin */
}

.post-card-image {
  width: 100%;
  max-width: 100%;
  height: 100%;
  min-height: 0;
  background-color: lightgray;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.post-card-image-placeholder {
  background: linear-gradient(135deg, #e9ecef 0%, #dee2e6 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.post-card-image-placeholder::after {
  content: "";
  font-size: 3rem;
  opacity: 0.5;
}

.post-card-date-badge {
  position: absolute;
  top: 1rem;
  left: 1rem;
  background: #204073;
  color: white;
  padding: 0.5rem 1rem;
  border-radius: 0.25rem;
  font-weight: 600;
  font-size: 0.875rem;
  z-index: 10;
  transition: opacity 0.3s ease;
}

/* Content wrapper */
.post-card-content {
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
  width: 100%;
  max-width: 100%;
  padding: 0;
  gap: 0;
  position: relative;
  z-index: 1;
  min-height: 100px;
}

/* Date badge in content (between image and headline) */
.post-card-content .blog-hero-date {
  margin: 0 0 8px 0;
  flex-shrink: 0;
  transition: opacity 0.3s ease;
}

.post-card:hover .blog-hero-date {
  opacity: 0;
  max-height: 0;
  margin: 0;
  overflow: hidden;
}

/* Headline - always visible */
.post-card-headline {
  color: #204073 !important;
  font-family: Inter, sans-serif;
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.3;
  margin: 0 0 8px 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 0;
  width: 100%;
  max-width: 100%;
  word-wrap: break-word;
  word-break: break-word;
}

/* Excerpt - hidden by default, shows on hover */
.post-card-excerpt {
  color: #666;
  font-family: Inter, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  margin: 0;
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: all 0.3s ease;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  width: 100%;
  max-width: 100%;
  word-wrap: break-word;
  word-break: break-word;
}

/* Read more - hidden by default, shows on hover */
.post-card-read-more {
  color: #204073;
  font-family: Inter, sans-serif;
  font-size: 14px;
  font-weight: 600;
  margin: 0;
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: all 0.3s ease;
  flex-shrink: 0;
}

.post-card-read-more .arrow {
  display: inline-block;
  transition: transform 0.3s ease;
}

/* Hover states */
.post-card:hover .post-card-image-wrapper {
  flex: 0 0 150px;
  min-height: 150px;
  max-height: 150px;
  margin-bottom: 15px;
}

.post-card:hover .post-card-date-badge {
  opacity: 0;
  pointer-events: none;
}

.post-card:hover .post-card-excerpt {
  opacity: 1;
  max-height: 70px;
  margin-top: 8px;
  margin-bottom: 8px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  /* Only apply full width to cards in grid layouts, not horizontal scroll */
  .blog-posts-grid .post-card {
    width: 100%;
    max-width: 100%;
    min-height: 380px;
  }
  
  /* Keep fixed width for cards in horizontal scroll containers */
  .press-posts-container .post-card {
    width: 280px;
    max-width: 280px;
    min-height: 380px;
  }
  
  .post-card-image-wrapper {
    min-height: 180px;
    max-height: 240px;
  }
  
  .post-card:hover .post-card-image-wrapper {
    max-height: 120px;
  }
  
  .post-card-headline {
    font-size: 1rem;
  }
}

/* ========================================
   PODCAST POST CARD - Landscape YouTube-style Variant
   Compact card with 16:9 landscape thumbnail
   ======================================== */

/* Base podcast card (horizontal scroll layout) */
.post-card-podcast {
  width: 320px;
  height: 320px;
  min-height: 320px;
  max-height: 320px;
}

.post-card-podcast .post-card-image-wrapper {
  flex: 0 0 180px;
  min-height: 180px;
  max-height: 180px;
  aspect-ratio: 16 / 9;
  margin-bottom: 12px;
}

.post-card-podcast:hover .post-card-image-wrapper {
  flex: 0 0 130px;
  min-height: 130px;
  max-height: 130px;
  margin-bottom: 15px;
}

/* Grid layout overrides for podcast cards */
.blog-posts-grid .post-card-podcast {
  width: 100%;
  max-width: 100%;
  height: 320px;
  min-height: 320px;
  max-height: 320px;
}

.blog-posts-grid .post-card-podcast .post-card-image-wrapper {
  flex: 0 0 180px;
  min-height: 180px;
  max-height: 180px;
}

.blog-posts-grid .post-card-podcast:hover .post-card-image-wrapper {
  flex: 0 0 130px;
  min-height: 130px;
  max-height: 130px;
}

/* Mobile responsive for podcast cards */
@media (max-width: 768px) {
  .post-card-podcast {
    width: 100%;
    height: 280px;
    min-height: 280px;
    max-height: 280px;
  }
  
  .post-card-podcast .post-card-image-wrapper {
    flex: 0 0 150px;
    min-height: 150px;
    max-height: 150px;
  }
  
  .post-card-podcast:hover .post-card-image-wrapper {
    flex: 0 0 110px;
    min-height: 110px;
    max-height: 110px;
  }
  
  .blog-posts-grid .post-card-podcast {
    height: 280px;
    min-height: 280px;
    max-height: 280px;
  }
}

/* Backward compatibility - press-post-card uses same styles as post-card */
.press-post-card {
  display: flex;
  flex-direction: column;
  width: 320px;
  height: 400px;
  background: #FFF;
  border-radius: 10px;
  box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.10);
  overflow: hidden;
  transition: all 0.3s ease;
  cursor: pointer;
  text-decoration: none !important;
  color: inherit;
  position: relative;
  flex-shrink: 0;
  padding: 15px;
}

.blog-posts-grid .press-post-card {
  width: 100%;
  max-width: 100%;
  height: 100%;
  min-height: 400px;
}

.press-post-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
  text-decoration: none !important;
  color: inherit;
}

.press-post-image {
  border-radius: 8px;
  background-color: lightgray;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  flex: 1 1 auto;
  align-self: stretch;
  min-height: 200px;
  max-height: 280px;
  margin-bottom: 12px;
  transition: all 0.3s ease;
}

/* Backward compatibility - press-post-content */
.press-post-content {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  width: 100%;
  min-height: 100px;
}

.press-post-image-placeholder {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 0.9rem;
  font-weight: 600;
}

.press-post-text {
  display: flex;
  flex-direction: column;
  gap: 0;
  flex-shrink: 0;
  transition: all 0.3s ease;
}

.press-post-date {
  display: inline-block;
  width: auto;
  align-self: flex-start;
  background-color: var(--bs-danger);
  color: white;
  font-family: Inter, sans-serif;
  font-size: 10px;
  font-weight: 500;
  padding: 5px 10px;
  border-radius: 2px;
  margin-top: 0;
  margin-bottom: 12px;
  text-transform: uppercase;
}

.press-post-headline {
  color: #204073;
  font-family: Inter, sans-serif;
  font-size: 20px;
  font-style: normal;
  font-weight: 700;
  line-height: 1.3;
  margin: 0 0 12px 0;
  display: flex;
  align-items: flex-start;
  transition: all 0.3s ease;
  flex-shrink: 0;
}

.press-post-excerpt {
  color: #666;
  font-family: Inter, sans-serif;
  font-size: 13px;
  font-style: normal;
  font-weight: 400;
  line-height: 1.4;
  margin: 0 0 10px 0;
  transition: all 0.3s ease;
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  flex-shrink: 0;
}

.press-post-read-more {
  margin: 0;
  margin-top: auto;
  transition: all 0.3s ease;
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  flex-shrink: 0;
}

.press-post-read-more a {
  color: #204073;
  font-family: Inter, sans-serif;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: all 0.3s ease;
}

.press-post-read-more a:hover {
  color: #1a3559;
  text-decoration: none;
}

.press-post-read-more .arrow {
  transition: transform 0.3s ease;
}

.press-post-read-more a:hover .arrow {
  transform: translateX(3px);
}

/* Post card styles are now defined above in the main .post-card section */

/* Backward compatibility - Press hover states */
.press-post-card:hover .press-post-date {
  display: none;
}

.press-post-card:hover .press-post-image {
  min-height: 120px;
  max-height: 150px;
  margin-bottom: 15px;
  flex-shrink: 1;
}

.press-post-card:hover .press-post-excerpt {
  opacity: 1;
  max-height: 80px;
  margin: 0 0 12px 0;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
}

.press-excerpt-title {
  color: #204073;
  font-family: Inter, sans-serif;
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 2rem;
  text-align: left;
}

.press-navigation-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 2rem 0;
  padding: 0 15px;
}

.press-navigation {
  display: flex;
  justify-content: center;
  gap: 1rem;
  flex: 1;
}

.press-nav-btn,
.press-navigation .btn-nav,
.press-navigation .btn,
.press-nav-prev,
.press-nav-next {
  background: transparent;
  color: #204073;
  border: 2px solid #204073;
  border-radius: 50% !important;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 1.2rem;
}

.press-nav-btn:hover,
.press-navigation .btn-nav:hover,
.press-nav-prev:hover,
.press-nav-next:hover {
  background: #204073;
  color: white;
  border-color: #204073;
  transform: scale(1.1);
}

.press-view-all {
  margin: 0;
}

.press-view-all .btn {
  background: transparent;
  color: #204073;
  border: 2px solid #204073;
  padding: 0.75rem 2rem;
  font-weight: 600;
  border-radius: 5px;
  transition: all 0.3s ease;
}

.press-view-all .btn:hover {
  background: #204073;
  color: white;
  border-color: #204073;
}

/* Updates Post Card Styles (Text-only cards for 'updates' tagged blogs) */
.blog-posts-grid .updates-post-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 100%;
  height: 100%;
  min-height: 250px;
  background: #FFF;
  border-radius: 10px;
  box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.10);
  overflow: hidden;
  transition: all 0.3s ease;
  cursor: pointer;
  text-decoration: none !important;
  color: inherit;
  position: relative;
}

.updates-post-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
  text-decoration: none !important;
  color: inherit;
}

.updates-post-content {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 1.5rem;
  height: 100%;
  min-height: 100%;
}

.updates-post-content .card-headline-xs {
  margin-bottom: 0.75rem;
  margin-top: 0;
  flex-shrink: 0;
}

.updates-post-content .card-date-badge {
  position: relative;
  top: 0;
  left: 0;
  align-self: flex-start;
  margin-bottom: 1rem;
  margin-top: 0;
  background-color: var(--bs-danger);
  color: white;
  font-family: Inter, sans-serif;
  font-size: 12px;
  font-weight: 500;
  padding: 0.5rem 1rem;
  border-radius: 2px;
  text-transform: uppercase;
}

.updates-post-content .card-excerpt {
  opacity: 1;
  max-height: none;
  margin-bottom: 1rem;
  margin-top: 0;
  display: block;
  overflow: visible;
  flex: 1;
  min-height: 0;
}

.updates-post-content .card-read-more {
  opacity: 1;
  max-height: none;
  margin-top: auto;
  margin-bottom: 0;
  overflow: visible;
  flex-shrink: 0;
  padding-top: 0.5rem;
  color: #204073;
  font-family: Inter, sans-serif;
  font-size: 14px;
  font-weight: 600;
}

.updates-post-content .card-read-more span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: all 0.3s ease;
}

.updates-post-card:hover .card-read-more {
  color: #1a3559;
}

.updates-post-content .card-read-more .arrow {
  transition: transform 0.3s ease;
}

.updates-post-card:hover .card-read-more .arrow {
  transform: translateX(3px);
}

/* Blog Feed Grid Layout */
.blog-feed-grid {
  width: 100%;
}

/* Blog Featured Banner Section */
.blog-featured-banner-section {
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
  padding: 3rem 0;
  background: #204073;
  margin-bottom: 3rem;
  margin-top: -114px;
  padding-top: calc(3rem + 114px);
  position: relative;
  z-index: 1;
}

.blog-hero-banner {
  margin: 0 auto;
  max-width: 1200px;
  padding: 0 15px;
}

.blog-hero-card {
  display: block;
  text-decoration: none;
  color: inherit;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
  transition: all 0.3s ease;
}

.blog-hero-card:hover {
  text-decoration: none;
  color: inherit;
  box-shadow: none;
  transform: none;
}

.blog-hero-image {
  width: 100%;
  height: 300px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 0;
}

@media (min-width: 768px) {
  .blog-hero-image {
    height: 350px;
    border-radius: 0;
  }
}

.blog-hero-image-placeholder {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 0.9rem;
  font-weight: 600;
}

.blog-hero-content {
  padding: 2rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
}

.blog-hero-date {
  display: inline-block;
  width: auto;
  align-self: flex-start;
  background-color: var(--bs-danger);
  color: white;
  font-family: Inter, sans-serif;
  font-size: 12px;
  font-weight: 500;
  padding: 0.5rem 1rem;
  border-radius: 2px;
  margin-top: 0.25rem;
  margin-bottom: 1rem;
  text-transform: uppercase;
}

.blog-hero-headline {
  color: white !important;
  font-family: Inter, sans-serif;
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.3;
  margin: 0 0 0.25rem 0;
}

@media (min-width: 768px) {
  .blog-hero-headline {
    font-size: 2.25rem;
  }
}

.blog-hero-excerpt {
  color: rgba(255, 255, 255, 0.9);
  font-family: Inter, sans-serif;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.6;
  margin: 0 0 1.5rem 0;
}

.blog-hero-read-more {
  color: #FFF;
  font-family: Inter, sans-serif;
  font-size: 14px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: all 0.3s ease;
}

.blog-hero-read-more .arrow {
  transition: transform 0.3s ease;
}

.blog-hero-card:hover .blog-hero-read-more .arrow {
  transform: translateX(3px);
}

/* More from blog section - horizontal scroller with light gray background */
.more-from-blog-section {
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
  background: #f8f9fa;
  padding: 3rem 0 3rem 0;
  margin-top: 3rem;
  margin-bottom: 0;
}

/* Remove spacing when more-from-blog-section comes after blog-post-footer-image */
.blog-post-footer-image + .more-from-blog-section,
.blog-post-footer-image ~ .more-from-blog-section {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

.more-from-blog-section .container {
  margin-bottom: 0;
  padding-bottom: 0;
}

.more-from-blog-section .row {
  margin-bottom: 0;
}

.more-from-blog-section .col-12 {
  margin-bottom: 0;
  padding-bottom: 0;
}

/* Remove footer top margin when more-from-blog-section exists */
.page-pages-show-blog-post main:has(.more-from-blog-section) ~ footer,
.page-pages-show-blog-post-wide main:has(.more-from-blog-section) ~ footer {
  margin-top: 0 !important;
}

.more-from-blog-title {
  color: #204073;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 2rem;
  font-size: 1.75rem;
}

.more-from-blog-scroll {
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
  padding-left: calc(50vw - 50% + 15px);
  padding-right: 15px;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.more-from-blog-scroll::-webkit-scrollbar {
  display: none;
}

.more-from-blog-container {
  display: flex;
  gap: 1.5rem;
  padding-bottom: 1rem;
  min-width: max-content;
}

.more-from-blog-container .press-post-card {
  flex-shrink: 0;
}

/* Policies "More from" section - match homepage excerpt styling */
.policies-more-from-section {
  background: #204073 !important;
  padding: 3rem 0 3rem 0;
}

.policies-more-from-title {
  color: white !important;
  font-family: Inter, sans-serif;
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 2rem;
  text-align: left;
}

.policies-more-from-section .more-from-blog-container {
  display: flex;
  gap: 1.5rem;
  padding-bottom: 1rem;
  min-width: max-content;
}

.blog-posts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 2rem;
  margin-bottom: 2rem;
  margin-top: 2rem;
}

@media (min-width: 768px) {
  .blog-posts-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 992px) {
  .blog-posts-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Responsive adjustments for blog post cards */
@media (max-width: 768px) {
  .blog-post-card-grid {
    min-height: 400px;
  }
  
  .blog-post-card-image {
    height: 200px;
  }
  
  .blog-post-card-grid:hover .blog-post-card-image {
    height: 150px;
  }
  
  .blog-post-card-content {
    padding: 1rem;
  }
  
  .blog-post-card-headline {
    font-size: 1.1rem;
  }
}

/* Blog Post Card Grid Styles */
.blog-post-card-grid {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  min-height: 450px;
  background: #FFF;
  border-radius: 10px;
  box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.10);
  overflow: hidden;
  transition: all 0.3s ease;
  cursor: pointer;
  text-decoration: none !important;
  color: inherit;
  position: relative;
}

.blog-post-card-grid:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
  text-decoration: none !important;
  color: inherit;
}

.blog-post-card-image {
  width: 100%;
  height: 250px;
  background-color: lightgray;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  flex-shrink: 0;
  transition: all 0.3s ease;
}

.blog-post-card-grid:hover .blog-post-card-image {
  height: 200px;
}

.blog-post-card-image-placeholder {
  background: linear-gradient(135deg, #e9ecef 0%, #dee2e6 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.blog-post-card-image-placeholder::after {
  content: "";
  font-size: 3rem;
  opacity: 0.5;
}

.blog-post-card-content {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 1.5rem;
  gap: 0.75rem;
}

.blog-post-card-date-badge {
  position: absolute;
  top: 1rem;
  left: 1rem;
  background: var(--bs-primary);
  color: white;
  padding: 0.5rem 1rem;
  border-radius: 0.25rem;
  font-weight: 600;
  font-size: 0.875rem;
  z-index: 10;
}

.blog-post-card-headline {
  color: #204073 !important;
  font-family: Inter, sans-serif;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.3;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.blog-post-card-excerpt {
  color: #666;
  font-family: Inter, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  margin: 0;
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: all 0.3s ease;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.blog-post-card-grid:hover .blog-post-card-excerpt {
  opacity: 1;
  max-height: 80px;
  margin-top: 0.5rem;
}

.blog-post-card-read-more {
  margin: 0;
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: all 0.3s ease;
  color: var(--bs-primary);
  font-family: Inter, sans-serif;
  font-size: 14px;
  font-weight: 600;
}

.blog-post-card-read-more .arrow {
  transition: transform 0.3s ease;
  display: inline-block;
}

/* Basic Endorsement Excerpt Styles (full-width with background image and blue overlay) */
.basic-endorsement-excerpt-section {
  position: relative;
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
  margin-top: 4rem;
  margin-bottom: 4rem;
  overflow: visible;
  min-height: 500px;
  background: transparent !important;
}

/* Override card background for basic endorsement section */
.basic-endorsement-excerpt-section.card,
.basic-endorsement-excerpt-section .card,
.excerpt-block.card.basic-endorsement-excerpt-section,
.excerpt-block.card:has(.basic-endorsement-excerpt-section),
.excerpt-block.card .basic-endorsement-excerpt-section {
  background: transparent !important;
}

/* Override any parent card that contains basic endorsement */
.card:has(.basic-endorsement-excerpt-section),
.card .basic-endorsement-excerpt-section {
  background: transparent !important;
}

/* Override excerpt-block card when it contains basic endorsement */
.excerpt-block.card:has(.basic-endorsement-excerpt-section) {
  background: transparent !important;
  box-shadow: none !important;
}

/* Fallback for browsers without :has() support */
.excerpt-block.card .basic-endorsement-excerpt-section {
  background: transparent !important;
}

.basic-endorsement-excerpt-section .basic-endorsement-wrapper .basic-endorsement-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 0;
}

.basic-endorsement-excerpt-section .basic-endorsement-wrapper .basic-endorsement-background:not([style*="background-image"]) {
  background: linear-gradient(135deg, var(--bs-primary) 0%, #1e3a8a 100%);
}

@media (max-width: 768px) {
  .basic-endorsement-excerpt-section {
    margin-top: 2rem;
    margin-bottom: 2rem;
  }
}

.basic-endorsement-excerpt-section .basic-endorsement-wrapper .basic-endorsement-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(32, 64, 115, 0.7);
  z-index: 1;
}

.basic-endorsement-excerpt-section .basic-endorsement-wrapper {
  position: relative;
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
  z-index: 2;
  min-height: 500px;
  display: flex;
  align-items: flex-end;
  padding-bottom: 0;
  overflow: hidden;
}

.basic-endorsement-excerpt-section .basic-endorsement-wrapper .container {
  position: relative;
  z-index: 2;
  padding: 3rem 15px 0 15px;
  width: 100%;
}

.basic-endorsement-excerpt-section .basic-endorsement-wrapper .row {
  position: relative;
  min-height: 400px;
}

@media (min-width: 992px) {
  .basic-endorsement-excerpt-section .basic-endorsement-wrapper .row {
    display: flex;
    align-items: stretch;
  }
}

.basic-endorsement-excerpt-section .basic-endorsement-content {
  color: white;
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.basic-endorsement-excerpt-section .basic-endorsement-content .excerpt-type a,
.basic-endorsement-excerpt-section .basic-endorsement-content .excerpt-title a {
  color: white !important;
  text-decoration: none;
}

.basic-endorsement-excerpt-section .basic-endorsement-content .excerpt-type a:hover,
.basic-endorsement-excerpt-section .basic-endorsement-content .excerpt-title a:hover {
  color: rgba(255, 255, 255, 0.9) !important;
  text-decoration: none;
}

.basic-endorsement-excerpt-section .basic-endorsement-content .basic-endorsement-text {
  color: rgba(255, 255, 255, 0.95);
  line-height: 1.6;
  font-size: 1.5rem !important;
}

@media (max-width: 768px) {
  .basic-endorsement-excerpt-section .basic-endorsement-content .basic-endorsement-text {
    font-size: 1.25rem !important;
  }
}

.basic-endorsement-excerpt-section .basic-endorsement-content .basic-endorsement-text * {
  color: rgba(255, 255, 255, 0.95) !important;
}

.basic-endorsement-excerpt-section .basic-endorsement-content .basic-endorsement-text p {
  margin-bottom: 1rem;
}

.basic-endorsement-excerpt-section .basic-endorsement-content .btn-light {
  background: white;
  color: var(--bs-primary);
  border: none;
  font-weight: 600;
}

.basic-endorsement-excerpt-section .basic-endorsement-content .btn-light:hover {
  background: rgba(255, 255, 255, 0.9);
  color: var(--bs-primary);
}

.basic-endorsement-excerpt-section .basic-endorsement-headshot-col {
  position: relative;
  display: flex;
  align-items: flex-end;
  padding: 0;
  margin: 0;
  z-index: 4;
}

.basic-endorsement-excerpt-section .basic-endorsement-headshot {
  position: relative;
  width: 100%;
  z-index: 4;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  margin-top: -5rem;
  margin-bottom: 0;
  padding: 0;
  transform: scale(1.2);
  transform-origin: bottom center;
}

.basic-endorsement-excerpt-section .basic-endorsement-headshot img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
  object-position: bottom;
}

@media (max-width: 991.98px) {
  .basic-endorsement-excerpt-section .basic-endorsement-headshot {
    margin-top: -3rem;
    transform: scale(1.1);
  }
  
  .basic-endorsement-excerpt-section .basic-endorsement-headshot-col {
    margin-top: 2rem;
  }
}

.basic-endorsement-headshot-col {
  position: relative;
  display: flex;
  align-items: stretch;
  
  @media (max-width: 991.98px) {
    display: none !important;
  }
}

.press-view-all .btn:hover {
  background: #1a3559;
}

/* Policies Homepage Excerpt Styles */
.policies-homepage-excerpt-section {
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
  background: #204073;
  padding: 0;
}

.policies-excerpt-container {
  position: relative;
  width: 100%;
}

.policies-excerpt-inner {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  padding: 3rem 15px;
}

.policies-posts-wrapper {
  min-height: 450px;
  position: relative;
}

.policies-posts-scroll {
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
  padding-left: calc(50vw - 50% + 15px);
  padding-right: 15px;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.policies-posts-scroll::-webkit-scrollbar {
  display: none;
}

.policies-posts-container {
  display: flex;
  gap: 1.5rem;
  padding-bottom: 1rem;
  min-width: max-content;
}

.policies-post-card {
  display: flex;
  width: 300px;
  height: auto;
  padding: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  flex-shrink: 0;
  justify-content: flex-start;
  transition: all 0.3s ease;
  cursor: pointer;
  background: transparent;
  border: none;
  box-shadow: none;
  text-decoration: none;
  color: inherit;
}

.policies-post-card:hover {
  transform: none;
  box-shadow: none;
  background: transparent;
}

.policies-post-image {
  border-radius: 10px;
  background-color: lightgray;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  width: 100%;
  height: 300px; /* Square aspect ratio */
  margin-bottom: 15px;
  transition: all 0.3s ease;
}

.policies-post-image-placeholder {
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 0.9rem;
  font-weight: 600;
}

.policies-post-text {
  display: flex;
  flex-direction: column;
  gap: 0;
  flex-shrink: 0;
  transition: all 0.3s ease;
}

.policies-post-headline {
  color: white !important;
  font-family: Inter, sans-serif;
  font-size: 24px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  margin: 0 0 10px 0;
  display: flex;
  align-items: flex-start;
  transition: all 0.3s ease;
  text-transform: uppercase;
  text-decoration: none;
}

.policies-post-headline:hover {
  color: white !important;
  text-decoration: none;
}

.policies-post-excerpt {
  color: white;
  font-family: Inter, sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 1.4;
  margin: 0;
  transition: all 0.3s ease;
  opacity: 0;
  max-height: 0;
  overflow: hidden;
}

/* Policies hover states */
.policies-post-card:hover .policies-post-image {
  height: 200px; /* Compress image height on hover */
}

.policies-post-card:hover .policies-post-excerpt {
  opacity: 1;
  max-height: 150px;
  margin: 0;
  overflow: visible;
}

/* Text content order is controlled by Liquid template - no CSS reordering needed */

/* Ensure hover states work for both layouts */
.policies-post-card:nth-child(odd):hover .policies-post-excerpt {
  margin-top: 10px; /* Add space above excerpt for top-image cards */
}

.policies-post-card:nth-child(even):hover .policies-post-excerpt {
  margin-bottom: 10px; /* Add space below excerpt for bottom-image cards */
}

.policies-excerpt-title {
  color: white;
  font-family: Inter, sans-serif;
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 2rem;
  text-align: left;
}

.policies-navigation-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 2rem 0;
  padding: 0 15px;
}

.policies-navigation {
  display: flex;
  justify-content: center;
  gap: 1rem;
  flex: 1;
}

.policies-nav-btn,
.policies-navigation .btn-nav,
.policies-navigation .btn,
.policies-nav-prev,
.policies-nav-next {
  background: transparent;
  color: white !important;
  border: 2px solid rgba(255, 255, 255, 0.8);
  border-radius: 50% !important;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 1.2rem;
}

.policies-nav-btn:hover,
.policies-navigation .btn-nav:hover,
.policies-nav-prev:hover,
.policies-nav-next:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: white;
  transform: scale(1.1);
}

/* Ensure navigation arrows are white */
.policies-navigation .btn-nav,
.policies-navigation .btn,
.policies-nav-prev,
.policies-nav-next {
  color: white !important;
}

.policies-navigation .btn-nav span,
.policies-navigation .btn span,
.policies-nav-prev span,
.policies-nav-next span {
  color: white !important;
}

.policies-view-all {
  margin: 0;
}

.policies-view-all .btn {
  background: transparent;
  color: white !important;
  border: 2px solid white;
  padding: 0.75rem 2rem;
  font-weight: 600;
  border-radius: 5px;
  transition: all 0.3s ease;
}

.policies-view-all .btn:hover {
  background: white;
  color: var(--bs-primary) !important;
  border-color: white;
}

/* Principles Homepage Excerpt Styles */
.principles-homepage-excerpt-section {
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
  background: white;
  padding: 0;
}

.principles-excerpt-container {
  position: relative;
  width: 100%;
}

.principles-excerpt-inner {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  padding: 3rem 15px;
}

.principles-posts-container {
  margin-bottom: 3rem;
}

/* Hero Post Styles */
.principles-hero-post {
  display: block;
  text-decoration: none;
  color: inherit;
  margin-bottom: 3rem;
  transition: opacity 0.3s ease;
}

.principles-hero-post:hover {
  opacity: 0.9;
  text-decoration: none;
  color: inherit;
}

@media (min-width: 768px) {
  .principles-hero-post .col-md-4 {
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
  }
  
  .principles-hero-post .col-md-8 {
    flex: 0 0 66.666667%;
    max-width: 66.666667%;
  }
}

.principles-hero-image {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 10px;
  margin-bottom: 1rem;
  box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.15);
}

.principles-hero-image-placeholder {
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 0.9rem;
  font-weight: 600;
  box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.15);
}

@media (min-width: 768px) {
  .principles-hero-image {
    margin-bottom: 0;
  }
}

.principles-hero-content {
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: center;
}

@media (min-width: 768px) {
  .principles-hero-content {
    padding-left: 2rem;
  }
}

.principles-hero-headline {
  color: #204073 !important;
  font-family: Inter, sans-serif;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 1rem 0;
}

@media (min-width: 768px) {
  .principles-hero-headline {
    font-size: 2.5rem;
    padding-left: 0;
  }
}

.principles-hero-excerpt {
  color: #666;
  font-family: Inter, sans-serif;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.6;
  margin: 0 0 1.5rem 0;
}

@media (min-width: 768px) {
  .principles-hero-excerpt {
    padding-left: 0;
    font-size: 1.1rem;
  }
}

.principles-hero-button {
  align-self: flex-start;
  margin-top: 0;
}

/* Mobile Scroll Container */
.principles-posts-scroll {
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
  padding-left: calc(50vw - 50% + 15px);
  padding-right: 15px;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  margin-top: 2rem;
}

.principles-posts-scroll::-webkit-scrollbar {
  display: none;
}

.principles-posts-scroll-container {
  display: flex;
  gap: 1.5rem;
  padding-bottom: 1rem;
  min-width: max-content;
}

.principles-post-card-scroll {
  flex-shrink: 0;
  width: 280px;
}

/* Grid Posts Styles */
.principles-posts-grid {
  margin-top: 2rem;
}

.principles-post-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  transition: opacity 0.3s ease;
  margin-bottom: 1.5rem;
}

.principles-post-card:hover {
  opacity: 0.9;
  text-decoration: none;
  color: inherit;
}

.principles-post-image {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 10px;
  margin-bottom: 1rem;
  box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.15);
}

.principles-post-image-placeholder {
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 0.9rem;
  font-weight: 600;
  box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.15);
}

.principles-post-headline {
  color: #204073 !important;
  font-family: Inter, sans-serif;
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.3;
  margin: 0;
}

.principles-post-headline:hover {
  color: #204073 !important;
  text-decoration: none;
}

.principles-excerpt-title {
  color: #204073 !important;
  font-family: Inter, sans-serif;
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 2rem;
  text-align: left;
}

.principles-navigation-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 2rem 0;
  padding: 0 15px;
}

.principles-navigation {
  display: flex;
  justify-content: center;
  gap: 1rem;
  flex: 1;
  margin: 0;
}

@media (min-width: 768px) {
  .principles-navigation-container {
    justify-content: flex-end;
  }
  
  .principles-navigation {
    display: none;
  }
}

.principles-nav-btn,
.principles-navigation .btn-nav,
.principles-navigation .btn,
.principles-nav-prev,
.principles-nav-next {
  background: transparent;
  color: #204073;
  border: 2px solid #204073;
  border-radius: 50% !important;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 1.2rem;
}

.principles-nav-btn:hover,
.principles-navigation .btn-nav:hover,
.principles-nav-prev:hover,
.principles-nav-next:hover {
  background: #204073;
  color: white;
  border-color: #204073;
  transform: scale(1.1);
}

.principles-view-all {
  margin: 0;
}

.principles-view-all .btn { 
  background: transparent;
  color: #204073;
  border: 2px solid #204073;
  padding: 0.75rem 2rem;
  font-weight: 600;
  border-radius: 5px;
  transition: all 0.3s ease;
}

.principles-view-all .btn:hover {
  background: #204073;
  color: white;
  border-color: #204073;
}

.privacy-policy a {
  color: white;
  text-decoration: underline;
}

.privacy-policy a:hover {
  color: #f8f9fa;
}

.homepage-signup-form .form-group label {
  color: white;
  font-weight: 500;
  margin-bottom: 5px;
  display: block;
}

.homepage-signup-form .form-control {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: white;
  border-radius: 5px;
}

.homepage-signup-form .form-control:focus {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.4);
  color: white;
  box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.25);
}

.homepage-signup-form .form-control::placeholder {
  color: rgba(255, 255, 255, 0.7);
}

.homepage-signup-form .form-check-label {
  color: white;
  font-size: 0.9rem;
}

.homepage-signup-form .btn-primary {
  background: var(--bs-danger);
  border: 1px solid var(--bs-danger);
  border-radius: 5px;
  font-weight: 600;
  padding: 10px 20px;
  width: 100%;
  color: white;
}

.homepage-signup-form .btn-primary:hover {
  background: var(--bs-danger-dark, #a0263f);
  border-color: var(--bs-danger-dark, #a0263f);
  color: white;
}

.homepage-signup-form h4 {
  color: white !important;
  font-weight: 600;
  margin-bottom: 15px;
  grid-column: 1 / -1;
}

.homepage-signup-form small {
  color: rgba(255, 255, 255, 0.8);
  grid-column: 1 / -1;
}

.homepage-signup-form .form-errors {
  grid-column: 1 / -1;
  color: #ff6b6b;
  margin-bottom: 15px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .homepage-hero-title {
    font-size: 2.5rem;
  }
  
  .homepage-hero-content {
    font-size: 1.1rem;
  }
  
  .homepage-hero-section {
    min-height: 75vh;
  }
  
  .homepage-hero-no-video {
    min-height: 30vh;
  }
  
  .homepage-hero-section .container {
    padding-top: 80px; /* Reduce padding on mobile */
  }
  
  .homepage-signup-form {
    width: 100%;
    max-width: 500px;
    padding: 25px 20px;
  }
  
  .homepage-signup-form.collapsed {
    min-height: 140px;
  }
  
  .homepage-signup-form.expanded {
    min-height: 220px;
  }
  
  .homepage-signup-form-overlay {
    margin-top: -100px;
  }
}

@media (max-width: 576px) {
  .homepage-hero-title {
    font-size: 2rem;
  }
  
  .homepage-hero-content {
    font-size: 1rem;
  }
  
  .homepage-hero-section .container {
    padding-top: 70px; /* Further reduce padding on small mobile */
  }
  
  .homepage-signup-form {
    padding: 20px 15px;
  }
  
  .homepage-signup-form.collapsed {
    min-height: 120px;
  }
  
  .homepage-signup-form.expanded {
    min-height: 180px;
  }
  
  .homepage-signup-form-overlay {
    margin-top: -80px;
  }
}

/* Blog Post Survey Box */
.blog-post-survey-box {
  margin-bottom: -60px; /* Negative margin to nestle into footer image */
  position: relative;
  z-index: 2;
  padding: 0;
}

.blog-post-survey-box .blog-post-survey-form {
  background: rgba(32, 64, 115, 0.7); /* Semi-transparent blue matching hero form */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px); /* Safari support */
  color: white;
  border-radius: 0.5rem;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  padding: 1.5rem;
  transition: all 0.3s ease;
}

.blog-post-survey-box .survey-intro {
  margin-bottom: 1rem;
  color: rgba(255, 255, 255, 0.95);
  font-size: 0.95rem;
}

.blog-post-survey-box .survey-question {
  color: white !important;
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 0.75rem;
}

.blog-post-survey-box .survey-question-intro {
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.9rem;
  margin-bottom: 1rem;
}

.blog-post-survey-box .survey-confirmation-message {
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.95rem;
  margin-bottom: 1rem;
}

.blog-post-survey-box .survey-confirmation-message p {
  margin-bottom: 0.5rem;
  color: rgba(255, 255, 255, 0.9);
}

.blog-post-survey-box .survey-signout-link {
  color: rgba(255, 255, 255, 0.9);
  text-decoration: underline;
}

.blog-post-survey-box .survey-signout-link:hover {
  color: white;
  text-decoration: underline;
}

.blog-post-survey-box .survey-choices.survey-button-choices {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.blog-post-survey-box .survey-choices .survey-choice-button-wrapper {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
}

.blog-post-survey-box .survey-choices .survey-choice-radio {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.blog-post-survey-box .survey-choices .survey-choice-radio:checked + .survey-choice-button {
  background-color: white;
  color: var(--bs-primary);
  border-color: white;
  font-weight: 600;
}

.blog-post-survey-box .survey-choices .survey-choice-button {
  display: block;
  width: 100%;
  padding: 0.75rem 1rem;
  background-color: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 0.375rem;
  color: white;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 0.95rem;
  white-space: nowrap;
}

.blog-post-survey-box .survey-choices .survey-choice-button:hover {
  background-color: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.5);
  transform: translateY(-1px);
}

@media (max-width: 576px) {
  .blog-post-survey-box .survey-choices.survey-button-choices {
    flex-direction: column;
  }
}

/* Fallback for non-button choices (if needed elsewhere) */
.blog-post-survey-box .survey-choices .form-check {
  margin-bottom: 0.5rem;
}

.blog-post-survey-box .survey-choices .form-check-input {
  border-color: rgba(255, 255, 255, 0.5);
}

.blog-post-survey-box .survey-choices .form-check-input:checked {
  background-color: white;
  border-color: white;
  color: var(--bs-primary);
}

.blog-post-survey-box .survey-choices .form-check-label {
  color: white;
  cursor: pointer;
  padding-left: 0.25rem;
}

.blog-post-survey-box .form-control {
  background-color: rgba(255, 255, 255, 0.95);
  border-color: rgba(255, 255, 255, 0.5);
}

.blog-post-survey-box .form-control:focus {
  background-color: white;
  border-color: white;
  box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.25);
}

.blog-post-survey-box label {
  color: rgba(255, 255, 255, 0.95);
  font-weight: 500;
  margin-bottom: 0.5rem;
}

.blog-post-survey-box .btn-primary {
  background-color: white;
  color: var(--bs-primary);
  border-color: white;
}

.blog-post-survey-box .btn-primary:hover {
  background-color: rgba(255, 255, 255, 0.9);
  border-color: rgba(255, 255, 255, 0.9);
  color: var(--bs-primary);
}

.blog-post-survey-box .btn-submit-gradient {
  border-radius: 0 0.375rem 0.375rem 0;
  padding: 0.75rem 1.5rem;
  white-space: nowrap;
}

.blog-post-survey-box .input-group .form-control {
  border-radius: 0.375rem 0 0 0.375rem;
  border-right: none;
}

.blog-post-survey-box .input-group .btn {
  margin-left: 0;
}

.blog-post-survey-box .survey-complete {
  color: white;
  margin: 0;
  font-weight: 500;
}

.blog-post-survey-box .form-errors {
  display: none;
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: 0.25rem;
  padding: 0.75rem;
  margin-bottom: 1rem;
  color: white;
}

.blog-post-survey-box .form-errors:not(:empty) {
  display: block;
}

.blog-post-survey-box .survey-slider-container {
  position: relative;
  overflow: hidden;
  width: 100%;
}

.blog-post-survey-box .survey-slide {
  display: none;
  width: 100%;
  opacity: 0;
  transform: translateX(30px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.blog-post-survey-box .survey-slide.active {
  display: block;
  opacity: 1;
  transform: translateX(0);
}

.blog-post-survey-box .survey-slider-container.slide-to-email .survey-slide-question {
  opacity: 0;
  transform: translateX(-30px);
}

.blog-post-survey-box .survey-slider-container.slide-to-email .survey-slide-email {
  display: block;
  opacity: 1;
  transform: translateX(0);
}

.blog-post-survey-box .survey-email-field {
  animation: fadeIn 0.3s ease;
}

.blog-post-survey-box .survey-email-field input.is-invalid {
  border-color: rgba(255, 200, 200, 0.8);
  box-shadow: 0 0 0 0.2rem rgba(255, 200, 200, 0.25);
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 991.98px) {
  .blog-post-survey-box {
    margin-bottom: -40px;
  }
  
  .blog-post-survey-box .blog-post-survey-form {
    padding: 1.25rem;
  }
  
  .blog-post-survey-box .survey-question {
    font-size: 1rem;
  }
}

/* Blog Post Footer Image */
.blog-post-footer-image {
  margin-bottom: 0; /* No margin between image and footer */
  margin-top: 0;
  width: 100%; /* Fill the parent column */
  max-width: 100% !important; /* Don't exceed the parent column */
}

.blog-post-footer-image .footer-image {
  width: 100%;
  max-width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  border-radius: 0.5rem 0.5rem 0 0; /* Rounded top corners */
}

@media (min-width: 992px) {
  .blog-post-footer-image .footer-image {
    height: 500px;
    object-fit: cover;
  }
}

/* Remove footer top margin on blog post pages when footer image exists */
.page-pages-show-blog-post main:has(.blog-post-footer-image) ~ footer,
.page-pages-show-blog-post-wide main:has(.blog-post-footer-image) ~ footer {
  margin-top: 0 !important;
}

/* Style bullet points in unordered lists to brand red color - global */
ul {
  list-style-type: square;
}

ul li::marker {
  color: var(--bs-danger) !important;
  font-size: 1.3em;
}

/* Ensure list item text color is not affected and add spacing between items */
ul li {
  color: inherit;
  margin-bottom: 0.75rem;
}

ul li:last-child {
  margin-bottom: 0;
}

/* Additional specificity for blog post pages */
.page-pages-show-blog-post ul li::marker,
.page-pages-show-blog-post-wide ul li::marker,
.page-pages-show-blog-post .content ul li::marker,
.page-pages-show-blog-post-wide .content ul li::marker,
.page-pages-show-blog-post #intro ul li::marker,
.page-pages-show-blog-post-wide #intro ul li::marker {
  color: var(--bs-danger) !important;
  font-size: 1.3em;
}

/* Style blog post and policy page content headings */
.page-pages-show-blog-post .content h1,
.page-pages-show-blog-post .content h2,
.page-pages-show-blog-post .content h3,
.page-pages-show-blog-post .content h4,
.page-pages-show-blog-post .content h5,
.page-pages-show-blog-post .content h6,
.page-pages-show-blog-post-wide .content h1,
.page-pages-show-blog-post-wide .content h2,
.page-pages-show-blog-post-wide .content h3,
.page-pages-show-blog-post-wide .content h4,
.page-pages-show-blog-post-wide .content h5,
.page-pages-show-blog-post-wide .content h6,
.page-pages-show-blog-post #intro .content h1,
.page-pages-show-blog-post #intro .content h2,
.page-pages-show-blog-post #intro .content h3,
.page-pages-show-blog-post #intro .content h4,
.page-pages-show-blog-post #intro .content h5,
.page-pages-show-blog-post #intro .content h6,
.page-pages-show-blog-post-wide #intro .content h1,
.page-pages-show-blog-post-wide #intro .content h2,
.page-pages-show-blog-post-wide #intro .content h3,
.page-pages-show-blog-post-wide #intro .content h4,
.page-pages-show-blog-post-wide #intro .content h5,
.page-pages-show-blog-post-wide #intro .content h6,
.page-pages-show-blog-post #content #intro .content h1,
.page-pages-show-blog-post #content #intro .content h2,
.page-pages-show-blog-post #content #intro .content h3,
.page-pages-show-blog-post #content #intro .content h4,
.page-pages-show-blog-post #content #intro .content h5,
.page-pages-show-blog-post #content #intro .content h6,
.page-pages-show-blog-post-wide #content #intro .content h1,
.page-pages-show-blog-post-wide #content #intro .content h2,
.page-pages-show-blog-post-wide #content #intro .content h3,
.page-pages-show-blog-post-wide #content #intro .content h4,
.page-pages-show-blog-post-wide #content #intro .content h5,
.page-pages-show-blog-post-wide #content #intro .content h6,
/* Policy pages - ensure headings in content areas are styled */
#content .content h1,
#content .content h2,
#content .content h3,
#content .content h4,
#content .content h5,
#content .content h6,
#intro .content h1,
#intro .content h2,
#intro .content h3,
#intro .content h4,
#intro .content h5,
#intro .content h6,
#content #intro .content h1,
#content #intro .content h2,
#content #intro .content h3,
#content #intro .content h4,
#content #intro .content h5,
#content #intro .content h6 {
  color: #204073 !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  position: relative;
  display: inline-block;
  padding-bottom: 0.5rem;
  margin-bottom: 1rem;
}

.page-pages-show-blog-post .content h1::after,
.page-pages-show-blog-post .content h2::after,
.page-pages-show-blog-post .content h3::after,
.page-pages-show-blog-post .content h4::after,
.page-pages-show-blog-post .content h5::after,
.page-pages-show-blog-post .content h6::after,
.page-pages-show-blog-post-wide .content h1::after,
.page-pages-show-blog-post-wide .content h2::after,
.page-pages-show-blog-post-wide .content h3::after,
.page-pages-show-blog-post-wide .content h4::after,
.page-pages-show-blog-post-wide .content h5::after,
.page-pages-show-blog-post-wide .content h6::after,
.page-pages-show-blog-post #intro .content h1::after,
.page-pages-show-blog-post #intro .content h2::after,
.page-pages-show-blog-post #intro .content h3::after,
.page-pages-show-blog-post #intro .content h4::after,
.page-pages-show-blog-post #intro .content h5::after,
.page-pages-show-blog-post #intro .content h6::after,
.page-pages-show-blog-post-wide #intro .content h1::after,
.page-pages-show-blog-post-wide #intro .content h2::after,
.page-pages-show-blog-post-wide #intro .content h3::after,
.page-pages-show-blog-post-wide #intro .content h4::after,
.page-pages-show-blog-post-wide #intro .content h5::after,
.page-pages-show-blog-post-wide #intro .content h6::after,
.page-pages-show-blog-post #content #intro .content h1::after,
.page-pages-show-blog-post #content #intro .content h2::after,
.page-pages-show-blog-post #content #intro .content h3::after,
.page-pages-show-blog-post #content #intro .content h4::after,
.page-pages-show-blog-post #content #intro .content h5::after,
.page-pages-show-blog-post #content #intro .content h6::after,
.page-pages-show-blog-post-wide #content #intro .content h1::after,
.page-pages-show-blog-post-wide #content #intro .content h2::after,
.page-pages-show-blog-post-wide #content #intro .content h3::after,
.page-pages-show-blog-post-wide #content #intro .content h4::after,
.page-pages-show-blog-post-wide #content #intro .content h5::after,
.page-pages-show-blog-post-wide #content #intro .content h6::after,
#content .content h1::after,
#content .content h2::after,
#content .content h3::after,
#content .content h4::after,
#content .content h5::after,
#content .content h6::after,
#intro .content h1::after,
#intro .content h2::after,
#intro .content h3::after,
#intro .content h4::after,
#intro .content h5::after,
#intro .content h6::after,
#content #intro .content h1::after,
#content #intro .content h2::after,
#content #intro .content h3::after,
#content #intro .content h4::after,
#content #intro .content h5::after,
#content #intro .content h6::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 50%;
  height: 6px;
  background-color: var(--bs-danger);
}

/* Set default text color for content areas */
#content,
.content,
#intro,
p {
  color: rgb(68, 68, 68);
}

/* Blockquote styling - light gray box with brand blue border */
blockquote,
.blockquote {
  background-color: #f8f9fa;
  border-left: 4px solid var(--bs-primary);
  padding: 1.5rem 1.5rem 3.5rem 2rem;
  margin: 1.5rem 0;
  font-style: italic;
  color: rgb(68, 68, 68);
  position: relative;
}

blockquote p,
.blockquote p {
  margin-bottom: 0.75rem;
  color: rgb(68, 68, 68);
}

blockquote p:last-child,
.blockquote p:last-child {
  margin-bottom: 0;
}

.blockquote-footer {
  margin-top: 0.75rem;
  font-size: 0.875rem;
  color: #6c757d;
  font-style: normal;
}

.blockquote-footer::before {
  content: "\2014\00A0"; /* em dash, nbsp */
}

/* Blockquote share - positioned underneath quote */
.blockquote-share-toggle {
  position: absolute;
  bottom: 1rem;
  right: 1rem;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: white;
  border: 1px solid #dee2e6;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  z-index: 10;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.blockquote-share-toggle:hover {
  background: #f8f9fa;
  border-color: var(--bs-primary);
  color: var(--bs-primary);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.blockquote-share-toggle svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

/* Share options dropdown */
.blockquote-share {
  position: absolute;
  bottom: 3.5rem;
  right: 1rem;
  display: none;
  flex-direction: column;
  gap: 0.5rem;
  background: white;
  border: 1px solid #dee2e6;
  border-radius: 0.5rem;
  padding: 0.5rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  z-index: 20;
  min-width: 120px;
}

.blockquote-share.active {
  display: flex;
}

.blockquote-share-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  border-radius: 0.25rem;
  border: none;
  background: transparent;
  color: #6c757d;
  text-decoration: none;
  transition: all 0.2s ease;
  font-size: 0.875rem;
  white-space: nowrap;
}

.blockquote-share-btn:hover {
  background: #f8f9fa;
  color: var(--bs-primary);
  text-decoration: none;
}

.blockquote-share-btn.twitter:hover {
  background: #1da1f2;
  color: white;
}

.blockquote-share-btn.facebook:hover {
  background: #3b5998;
  color: white;
}

.blockquote-share-btn.whatsapp:hover {
  background: #25d366;
  color: white;
}

.blockquote-share-btn.email:hover {
  background: var(--bs-primary);
  color: white;
}

.blockquote-share-btn svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
  flex-shrink: 0;
}

/* Team/Directory page styling */
.team-grid-container {
  margin-top: 3rem;
  margin-bottom: 3rem;
}

.team-directory-row {
  row-gap: 2rem !important;
}

.team-directory-row > .col-12,
.team-directory-row > .col-sm-6,
.team-directory-row > .col-md-4,
.team-directory-row > .col-lg-3 {
  margin-bottom: 2rem;
}

.team-member-card {
  background: white;
  border-radius: 0.5rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  transition: all 0.3s ease;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.team-member-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.team-member-image {
  width: 100%;
  padding-top: 140%;
  position: relative;
  overflow: hidden;
  background: #f8f9fa;
}

.team-member-image .team-member-avatar {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.team-member-placeholder {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #dee2e6;
  background: #f8f9fa;
}

.team-member-placeholder svg {
  width: 80px;
  height: 80px;
}

/* Gradient overlay for card content */
.team-member-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.7) 50%, rgba(0, 0, 0, 0) 100%);
  padding: 1.5rem 1.25rem 1.25rem;
  z-index: 2;
}

.team-member-overlay-content {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.team-member-name {
  font-size: 1.25rem;
  font-weight: 700;
  color: #ffffff !important;
  margin: 0;
  line-height: 1.2;
}

.team-member-name a {
  color: #ffffff !important;
  text-decoration: none;
}

.team-member-name a:hover {
  color: #ffffff !important;
  text-decoration: underline;
}

.team-member-title {
  color: #ffffff;
  font-size: 0.875rem;
  font-weight: 600;
  margin: 0;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.team-member-priority {
  color: var(--bs-danger);
  font-size: 0.75rem;
  font-weight: 600;
  margin: 0 0 0.5rem 0;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.team-member-actions {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-top: 0.75rem;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.team-member-social {
  display: flex;
  gap: 0.5rem;
}

.team-social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #004079;
  color: #ffffff;
  text-decoration: none;
  transition: all 0.2s ease;
}

.team-social-link:hover {
  background: #0056b3;
  color: #ffffff;
  transform: translateY(-2px);
  text-decoration: none;
}

.team-social-link svg {
  width: 18px;
  height: 18px;
  fill: #ffffff;
}

.team-member-info-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  min-width: 32px;
  min-height: 32px;
  border-radius: 50%;
  background: #004079;
  color: #ffffff;
  border: none;
  padding: 0;
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.team-member-info-btn:hover {
  background: #0056b3;
  color: #ffffff;
  transform: translateY(-2px);
}

.team-member-info-btn svg {
  width: 18px;
  height: 18px;
  fill: #ffffff;
}

.team-member-info-btn:focus {
  outline: 2px solid rgba(255, 255, 255, 0.5);
  outline-offset: 2px;
}

/* Bio modal content - ensure full text is displayed */
#bioModal .modal-body .bio-content,
.bio-content {
  overflow: visible !important;
  max-height: none !important;
  text-overflow: clip !important;
  white-space: normal !important;
  display: block !important;
  -webkit-line-clamp: none !important;
  line-clamp: none !important;
}

#bioModal .modal-body {
  overflow-y: auto;
  max-height: 70vh;
}

/* Constrain images and media in all blog post content - ensure they don't overflow containers */
.page-pages-show-blog-post #content .content img,
.page-pages-show-blog-post #intro .content img,
.page-pages-show-blog-post #content #intro .content img,
.page-pages-show-blog-post-wide #content .content img,
.page-pages-show-blog-post-wide #intro .content img,
.page-pages-show-blog-post-wide #content #intro .content img {
  max-width: 100%;
  height: auto;
  display: block;
  box-sizing: border-box;
}

/* Also constrain iframes, videos, and other media elements */
.page-pages-show-blog-post #content .content iframe,
.page-pages-show-blog-post #content .content video,
.page-pages-show-blog-post #content .content embed,
.page-pages-show-blog-post #content .content object,
.page-pages-show-blog-post #intro .content iframe,
.page-pages-show-blog-post #intro .content video,
.page-pages-show-blog-post #intro .content embed,
.page-pages-show-blog-post #intro .content object,
.page-pages-show-blog-post #content #intro .content iframe,
.page-pages-show-blog-post #content #intro .content video,
.page-pages-show-blog-post #content #intro .content embed,
.page-pages-show-blog-post #content #intro .content object,
.page-pages-show-blog-post-wide #content .content iframe,
.page-pages-show-blog-post-wide #content .content video,
.page-pages-show-blog-post-wide #content .content embed,
.page-pages-show-blog-post-wide #content .content object,
.page-pages-show-blog-post-wide #intro .content iframe,
.page-pages-show-blog-post-wide #intro .content video,
.page-pages-show-blog-post-wide #intro .content embed,
.page-pages-show-blog-post-wide #intro .content object,
.page-pages-show-blog-post-wide #content #intro .content iframe,
.page-pages-show-blog-post-wide #content #intro .content video,
.page-pages-show-blog-post-wide #content #intro .content embed,
.page-pages-show-blog-post-wide #content #intro .content object {
  max-width: 100%;
  height: auto;
  box-sizing: border-box;
}

/* Ensure content containers handle overflow properly */
.page-pages-show-blog-post #content .content,
.page-pages-show-blog-post #intro .content,
.page-pages-show-blog-post #content #intro .content,
.page-pages-show-blog-post-wide #content .content,
.page-pages-show-blog-post-wide #intro .content,
.page-pages-show-blog-post-wide #content #intro .content {
  overflow-x: auto;
  overflow-y: visible;
}

/* Fix Embedly YouTube iframe height - override Embedly's inline max-height restriction */
/* Embedly adds inline styles with max-height: 210px and the class .embedly-embed */
/* This rule uses !important to override the inline style */
.page-pages-show-blog-post #content .content .embedly-embed,
.page-pages-show-blog-post #intro .content .embedly-embed,
.page-pages-show-blog-post #content #intro .content .embedly-embed,
.page-pages-show-blog-post-wide #content .content .embedly-embed,
.page-pages-show-blog-post-wide #intro .content .embedly-embed,
.page-pages-show-blog-post-wide #content #intro .content .embedly-embed,
#content .content .embedly-embed,
#intro .content .embedly-embed,
.page-pages-show-blog-post #content .content .embed-container iframe,
.page-pages-show-blog-post #intro .content .embed-container iframe,
.page-pages-show-blog-post #content #intro .content .embed-container iframe,
.page-pages-show-blog-post-wide #content .content .embed-container iframe,
.page-pages-show-blog-post-wide #intro .content .embed-container iframe,
.page-pages-show-blog-post-wide #content #intro .content .embed-container iframe,
#content .content .embed-container iframe,
#intro .content .embed-container iframe {
  height: auto !important;
  max-height: none !important;
  min-height: 315px !important; /* Minimum height for YouTube videos (16:9 aspect ratio at 560px width) */
  aspect-ratio: 16 / 9 !important; /* Maintain YouTube's 16:9 aspect ratio */
}

/* Ensure embed-container itself allows proper sizing */
.embed-container {
  position: relative;
  width: 100%;
  max-width: 100%;
}

.embed-container iframe,
.embedly-embed,
iframe.embedly-embed {
  width: 100% !important;
  height: auto !important;
  max-height: none !important;
  min-height: 315px !important;
  aspect-ratio: 16 / 9 !important;
}

/* Additional rule to catch Embedly iframes in any content area - override inline styles */
.content .embedly-embed,
#content .embedly-embed,
#intro .embedly-embed,
.content iframe.embedly-embed,
#content iframe.embedly-embed,
#intro iframe.embedly-embed {
  max-height: none !important;
  height: auto !important;
  min-height: 315px !important;
  aspect-ratio: 16 / 9 !important;
}

/* Maximum specificity rule to override inline max-height: 210px on Embedly iframes */
body .content .embedly-embed[style],
body #content .embedly-embed[style],
body #intro .embedly-embed[style],
body .content iframe.embedly-embed[style],
body #content iframe.embedly-embed[style],
body #intro iframe.embedly-embed[style] {
  max-height: none !important;
  height: auto !important;
  min-height: 315px !important;
  aspect-ratio: 16 / 9 !important;
}

/* Table of Contents styles for principles pages */
.principles-toc {
  background-color: #f8f9fa;
  border-left: 4px solid var(--bs-danger);
  padding: 1.5rem;
  border-radius: 0.25rem;
  margin-bottom: 2rem;
}

.principles-toc-title {
  color: #204073 !important;
  font-size: 1.25rem;
  font-weight: 700 !important;
  text-transform: uppercase;
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid #dee2e6;
}

.principles-toc-table {
  width: 100%;
  border-collapse: collapse;
  margin: 0;
}

.principles-toc-table tbody {
  display: table-row-group;
}

.principles-toc-table tr {
  border-bottom: 1px solid #dee2e6;
}

.principles-toc-table tr:last-child {
  border-bottom: none;
}

.principles-toc-table td {
  padding: 0.5rem 0;
  vertical-align: top;
}

.principles-toc-table td:first-child {
  padding-right: 1rem;
  width: auto;
}

.principles-toc-table td:last-child {
  text-align: right;
  white-space: nowrap;
  padding-left: 1rem;
  width: 60px;
}

.principles-toc-table a {
  color: #204073;
  text-decoration: none;
  font-size: 0.95rem;
  transition: color 0.2s ease;
  display: inline-block;
}

.principles-toc-table a:hover {
  color: var(--bs-danger);
  text-decoration: none;
}

.principles-toc-table tr.toc-h2 td:first-child a {
  font-weight: 700;
  color: #204073;
}

.principles-toc-table tr.toc-h3 {
  display: table-row;
}

.principles-toc-table tr.toc-h3 td:first-child {
  padding-left: 1.5rem;
}

.principles-toc-table tr.toc-h3 td:first-child a {
  font-weight: 400;
  color: rgba(32, 64, 115, 0.7);
  font-size: 0.9rem;
}

.principles-toc-table tr.toc-h3 td:last-child a {
  color: rgba(32, 64, 115, 0.7);
}

.principles-toc-table tr.toc-h3 td:first-child a:hover {
  color: var(--bs-danger);
}

.principles-toc-toggle-btn {
  background: none;
  border: none;
  padding: 0;
  margin-left: 0.5rem;
  cursor: pointer;
  color: #204073;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease, color 0.2s ease;
  vertical-align: middle;
}

.principles-toc-toggle-btn:hover {
  color: var(--bs-danger);
}

.principles-toc-toggle-btn.expanded {
  transform: rotate(45deg);
}

.principles-toc-toggle-btn svg {
  width: 12px;
  height: 12px;
}

/* Make all headings thicker and use brand blue color */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-weight: 700 !important;
  color: #204073 !important;
}

/* Preserve white headings in hero sections and other specific contexts */
.homepage-hero-title,
.homepage-hero-content h1,
.homepage-hero-content h2,
.homepage-hero-content h3,
.homepage-hero-content h4,
.homepage-hero-content h5,
.homepage-hero-content h6,
.homepage-hero-no-video .homepage-hero-title,
.homepage-hero-no-video .homepage-hero-content h1,
.homepage-hero-no-video .homepage-hero-content h2,
.homepage-hero-no-video .homepage-hero-content h3,
.homepage-hero-no-video .homepage-hero-content h4,
.homepage-hero-no-video .homepage-hero-content h5,
.homepage-hero-no-video .homepage-hero-content h6,
.press-release-hero-title,
.blog-post-hero-title,
.donation-video-background .col-12.col-lg-6:first-child h1,
.donation-video-background .col-12.col-lg-6:first-child h2,
.donation-video-background .col-12.col-lg-6:first-child h3,
.donation-video-background .col-12.col-lg-6:first-child h4,
.donation-video-background .col-12.col-lg-6:first-child h5,
.donation-video-background .col-12.col-lg-6:first-child h6,
.donation-video-background .col-12.col-lg-6:first-child .h1,
.donation-video-background .col-12.col-lg-6:first-child .h2,
.donation-video-background .col-12.col-lg-6:first-child .h3,
.donation-video-background .col-12.col-lg-6:first-child .h4,
.donation-video-background .col-12.col-lg-6:first-child .h5,
.donation-video-background .col-12.col-lg-6:first-child .h6 {
  color: white !important;
}

/* Make all homepage excerpt titles/headlines uppercase */
.excerpt-title,
.excerpt-type,
.blog-excerpt-title,
.press-excerpt-title,
.policies-excerpt-title,
.principles-excerpt-title,
.donation-excerpt-title,
.card-title.excerpt-title,
.excerpt-title a,
.excerpt-type a {
  text-transform: uppercase !important;
}

/* Ensure all text and headings are white in blue containers */
.bg-primary,
.bg-primary *,
.card.bg-primary,
.card.bg-primary *,
.donation-excerpt-card,
.donation-excerpt-card *,
.donation-excerpt-card h1,
.donation-excerpt-card h2,
.donation-excerpt-card h3,
.donation-excerpt-card h4,
.donation-excerpt-card h5,
.donation-excerpt-card h6,
.donation-excerpt-card .h1,
.donation-excerpt-card .h2,
.donation-excerpt-card .h3,
.donation-excerpt-card .h4,
.donation-excerpt-card .h5,
.donation-excerpt-card .h6,
.bg-primary h1,
.bg-primary h2,
.bg-primary h3,
.bg-primary h4,
.bg-primary h5,
.bg-primary h6,
.bg-primary .h1,
.bg-primary .h2,
.bg-primary .h3,
.bg-primary .h4,
.bg-primary .h5,
.bg-primary .h6,
.card.bg-primary h1,
.card.bg-primary h2,
.card.bg-primary h3,
.card.bg-primary h4,
.card.bg-primary h5,
.card.bg-primary h6,
.card.bg-primary .h1,
.card.bg-primary .h2,
.card.bg-primary .h3,
.card.bg-primary .h4,
.card.bg-primary .h5,
.card.bg-primary .h6 {
  color: white !important;
}

/* Members Portal Profile Card */
.members-portal-profile .card {
  background-color: white !important;
  border: 1px solid #dee2e6;
}

.members-portal-profile .card-body {
  background-color: white;
}

/* Members Portal Profile Overlay - overlaps page hero like calendar map */
.members-portal-profile-overlay {
  position: relative;
  margin-top: -75px; /* Pull profile up to overlap hero (matches .calendar-map-section) */
  z-index: 10;
}

.members-portal-profile-overlay {
  .card {
    background: rgba(32, 64, 115, 0.50) !important;
    box-shadow: 0 -1px 1px 0 rgba(255, 255, 255, 0.10) inset, 0 1px 1px 0 rgba(255, 255, 255, 0.25) inset, 0 8px 6px 0 rgba(0, 0, 0, 0.05);
    backdrop-filter: blur(50px);
    -webkit-backdrop-filter: blur(50px);
    border-radius: 10px;
    border: none;
    transition: all 0.4s ease;
    padding: 35px 33px;
    color: white;
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
  }
}

.members-portal-profile-overlay .card-body {
  background: transparent !important;
  color: white;
  padding: 0;
}

.members-portal-profile-overlay .card h3,
.members-portal-profile-overlay .card h5 {
  color: white !important;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
}

.members-portal-profile-overlay .card h3 a {
  color: white !important;
  text-decoration: none;
}

.members-portal-profile-overlay .card h3 a:hover {
  color: rgba(255, 255, 255, 0.9) !important;
}

.members-portal-profile-overlay .card .text-muted {
  color: rgba(255, 255, 255, 0.8) !important;
}

.members-portal-profile-overlay .card p {
  color: rgba(255, 255, 255, 0.95);
}

.members-portal-profile-overlay .card .badge {
  background-color: rgba(255, 255, 255, 0.2) !important;
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.members-portal-profile-overlay .card .badge a {
  color: white !important;
}

.members-portal-profile-overlay .card .btn-outline-primary {
  background-color: white;
  color: #004079;
  border-color: white;
}

.members-portal-profile-overlay .card .btn-outline-primary:hover {
  background-color: rgba(255, 255, 255, 0.9);
  border-color: rgba(255, 255, 255, 0.9);
  color: #004079;
}

.members-portal-profile-overlay .card .btn-outline-secondary {
  background-color: rgba(255, 255, 255, 0.2);
  color: white;
  border-color: rgba(255, 255, 255, 0.3);
}

.members-portal-profile-overlay .card .btn-outline-secondary:hover {
  background-color: rgba(255, 255, 255, 0.3);
  border-color: rgba(255, 255, 255, 0.5);
  color: white;
}

.members-portal-profile-overlay .card small {
  color: rgba(255, 255, 255, 0.8) !important;
}

.members-portal-profile-overlay .card strong {
  color: white;
}

.members-portal-profile-overlay .members-portal-districts-toggle {
  color: white !important;
  text-decoration: none;
  transition: all 0.3s ease;
}

.members-portal-profile-overlay .members-portal-districts-toggle:hover {
  color: rgba(255, 255, 255, 0.8) !important;
  text-decoration: none;
}

.members-portal-profile-overlay .members-portal-districts-toggle .toggle-icon {
  transition: transform 0.3s ease;
}

.members-portal-profile-overlay .members-portal-districts-additional {
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  padding-top: 0.75rem;
  margin-top: 0.5rem;
}

@media (max-width: 768px) {
  .members-portal-profile-overlay {
    margin-top: -100px; /* More overlap on mobile */
  }
  
  .members-portal-profile-overlay .card {
    padding: 25px 20px; /* Smaller padding on mobile */
  }
}

@media (max-width: 576px) {
  .members-portal-profile-overlay {
    margin-top: -80px; /* Less overlap on small mobile */
  }
  
  .members-portal-profile-overlay .card {
    padding: 20px 15px; /* Even smaller padding on small mobile */
  }
}

/* Members Portal Profile Card (styled like floating profile orb) */
.members-portal-profile-card {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  overflow: hidden;
}

.members-portal-profile-header {
  background: rgba(20, 40, 80, 0.85);
  padding: 24px 28px;
  color: #fff;
}

.members-portal-profile-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.3);
  object-fit: cover;
}

.members-portal-profile-header img {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.3);
  object-fit: cover;
}

.members-portal-profile-body {
  padding: 20px 28px;
}

.members-portal-profile-detail-item {
  display: flex;
  align-items: center;
  padding: 10px 0;
  font-size: 0.95rem;
  color: #444;
  border-bottom: 1px solid #f0f0f0;
}

.members-portal-profile-detail-item:last-child {
  border-bottom: none;
}

.members-portal-profile-detail-item i {
  color: #004079;
  font-size: 1.1rem;
  width: 24px;
  flex-shrink: 0;
}

.members-portal-profile-nav {
  padding: 12px 28px;
  border-top: 1px solid #f0f0f0;
  border-bottom: 1px solid #f0f0f0;
  background: #f8f9fa;
}

.members-portal-profile-nav-item {
  display: flex;
  align-items: center;
  padding: 12px 0;
  font-size: 0.95rem;
  color: #444;
  text-decoration: none;
  transition: color 0.2s ease;
  border-bottom: 1px solid #e9ecef;
}

.members-portal-profile-nav-item:last-child {
  border-bottom: none;
}

.members-portal-profile-nav-item:hover {
  color: #004079;
  text-decoration: none;
}

.members-portal-profile-nav-item i {
  color: #004079;
  font-size: 1rem;
  width: 24px;
  flex-shrink: 0;
}

.members-portal-profile-footer {
  padding: 20px 28px;
  border-top: 1px solid #f0f0f0;
  background: #f8f9fa;
}

.members-portal-profile-footer .btn-outline-primary {
  color: #004079 !important;
  border-color: #004079 !important;
}

.members-portal-profile-footer .btn-outline-primary:hover,
.members-portal-profile-footer .btn-outline-primary:focus {
  color: #fff !important;
  background-color: #004079 !important;
  border-color: #004079 !important;
}

/* Volunteer Profile Modal Styling */
#volunteerProfileModal .modal-content {
  border-radius: 12px;
  border: none;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.volunteer-modal-header {
  background: rgba(20, 40, 80, 0.95) !important;
  color: white !important;
  border-bottom: none !important;
  border-radius: 12px 12px 0 0 !important;
  padding: 20px 24px !important;
}

.volunteer-modal-header .modal-title {
  color: white !important;
  font-weight: 600;
  font-size: 1.25rem;
}

.volunteer-modal-header .btn-close-white {
  filter: invert(1) grayscale(100%) brightness(200%);
}

.volunteer-modal-body {
  padding: 28px !important;
  color: #333;
}

.volunteer-status-section {
  border-bottom: 1px solid #e9ecef;
}

.volunteer-status-icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #d4edda;
  border-radius: 50%;
  flex-shrink: 0;
}

.volunteer-status-icon i {
  font-size: 1.75rem;
  color: #28a745;
}

.volunteer-roles-section h6 {
  color: #004079;
  font-size: 1rem;
}

.volunteer-role-badge {
  background-color: #004079 !important;
  color: white !important;
  font-weight: 500;
  font-size: 0.9rem;
  padding: 0.65rem 1.1rem;
  border-radius: 6px;
}

.volunteer-actions-section {
  background-color: #f8f9fa;
  margin: 0 -28px;
  padding: 20px 28px !important;
}

.volunteer-modal-footer {
  border-top: 1px solid #e9ecef;
  padding: 16px 24px;
  background-color: #f8f9fa;
}

/* Homepage excerpt cards - White background (override blue card style) */
.excerpt-block.card,
.excerpt-block.card.shadow-sm {
  border: none !important;
  border-width: 0 !important;
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important;
}

/* Recruiting excerpt social share buttons */
.recruiting-social-share .btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

/* Hide empty form-errors containers */
.form-errors:empty {
  display: none;
}

/* Recruiting social share buttons */
.recruiting-social-share .btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.recruiting-social-share .fb-share-button-wrapper {
  display: inline-block;
  vertical-align: top;
}


.members-portal-map-container-small {
  width: 100%;
  height: 200px;
  border-radius: 0.375rem;
  overflow: hidden;
  margin-top: 0.5rem;
}

/* Floating Profile Orb */
.floating-profile-orb-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 1050;
}

/* Override global button border-radius for circular orb */
.floating-profile-orb,
button.floating-profile-orb,
.floating-profile-orb-container button.floating-profile-orb,
.floating-profile-orb-container button {
  width: 56px;
  height: 56px;
  min-width: 56px;
  min-height: 56px;
  max-width: 56px;
  max-height: 56px;
  border-radius: 50% !important;
  border: 3px solid #fff;
  background: #fff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  cursor: pointer;
  padding: 0 !important;
  margin: 0;
  overflow: hidden !important;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
}

.floating-profile-orb:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}

.floating-profile-orb-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50% !important;
  display: block;
}

.floating-profile-orb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50% !important;
  display: block;
}

/* Floating Login Button (when not logged in) */
.floating-login-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 3px solid #fff;
  background: #fff;
  color: #004079;
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transition: all 0.3s ease;
  padding: 0;
}

.floating-login-button:hover {
  background: #f8f9fa;
  color: #003366;
  text-decoration: none;
  transform: scale(1.1);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}

.floating-login-button i {
  font-size: 1.5rem;
  color: #004079;
}

.floating-login-button:hover i {
  color: #003366;
}

/* Profile Card */
.floating-profile-card {
  position: absolute;
  bottom: 72px;
  right: 0;
  width: 320px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: all 0.3s ease;
  overflow: hidden;
}

.floating-profile-card.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.floating-profile-card-header {
  background: rgba(20, 40, 80, 0.85);
  padding: 20px;
  color: #fff;
}

.floating-profile-card-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.3);
  object-fit: cover;
}

.floating-profile-card-header img {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.3);
  object-fit: cover;
}

.btn-floating-close {
  background: transparent !important;
  border: none !important;
  color: #fff !important;
  font-size: 1.25rem;
  cursor: pointer;
  padding: 4px 8px;
  line-height: 1;
  opacity: 0.8;
  transition: opacity 0.2s ease;
  box-shadow: none !important;
  outline: none !important;
}

.btn-floating-close:hover,
.btn-floating-close:focus,
.btn-floating-close:active {
  background: transparent !important;
  border: none !important;
  color: #fff !important;
  opacity: 1;
  box-shadow: none !important;
  outline: none !important;
}

.btn-floating-close i {
  color: #fff !important;
}

.floating-profile-card-body {
  padding: 16px 20px;
}

.floating-profile-detail-item {
  display: flex;
  align-items: center;
  padding: 8px 0;
  font-size: 0.9rem;
  color: #444;
  border-bottom: 1px solid #f0f0f0;
}

.floating-profile-detail-item:last-child {
  border-bottom: none;
}

.floating-profile-detail-item i {
  color: #004079;
  font-size: 1rem;
  width: 20px;
  flex-shrink: 0;
}

.floating-profile-card-nav {
  padding: 8px 20px;
  border-top: 1px solid #f0f0f0;
  border-bottom: 1px solid #f0f0f0;
  background: #f8f9fa;
}

.floating-profile-nav-item {
  display: flex;
  align-items: center;
  padding: 10px 0;
  font-size: 0.9rem;
  color: #444;
  text-decoration: none;
  transition: color 0.2s ease;
  border-bottom: 1px solid #e9ecef;
}

.floating-profile-nav-item:last-child {
  border-bottom: none;
}

.floating-profile-nav-item:hover {
  color: #004079;
  text-decoration: none;
}

.floating-profile-nav-item.active {
  color: #004079;
  font-weight: 600;
}

.floating-profile-nav-item i {
  color: #004079;
  font-size: 0.95rem;
  width: 20px;
  flex-shrink: 0;
}

.floating-profile-card-footer {
  padding: 16px 20px;
  border-top: 1px solid #f0f0f0;
  background: #f8f9fa;
}

.floating-profile-card-footer .btn-outline-primary {
  color: #004079 !important;
  border-color: #004079 !important;
}

.floating-profile-card-footer .btn-outline-primary:hover,
.floating-profile-card-footer .btn-outline-primary:focus {
  color: #fff !important;
  background-color: #004079 !important;
  border-color: #004079 !important;
}

/* Mobile Responsive */
@media (max-width: 576px) {
  .floating-profile-orb-container {
    bottom: 20px;
    right: 20px;
  }
  
  .floating-profile-card {
    width: calc(100vw - 40px);
    max-width: 320px;
    right: 0;
  }
  
  .floating-profile-orb {
    width: 52px;
    height: 52px;
  }
  
  .floating-login-button {
    width: 52px;
    height: 52px;
  }
  
  .floating-login-button i {
    font-size: 1.4rem;
  }
}

/* ============================================
   Modern Form Input Design System
   ============================================ */

/* Form Input CSS Custom Properties */
:root {
  --form-border-default: 1.5px solid #dee2e6;
  --form-border-focus: 2px solid #004079;
  --form-border-error: 2px solid #c4304f;
  --form-border-filled: 1.5px solid #ced4da;
  --form-focus-shadow: 0 0 0 3px rgba(0, 64, 121, 0.1);
  --form-error-shadow: 0 0 0 3px rgba(196, 48, 79, 0.1);
  --form-border-radius: 3px;
  --form-transition: all 0.2s ease;
}

/* Modern Text Inputs (text, email, phone, number) */
.form-control:not(select):not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]) {
  border: var(--form-border-default) !important;
  border-radius: 3px !important;
  padding: 0.75rem 1rem !important;
  font-size: 1rem !important;
  background-color: #fff !important;
  box-shadow: none !important;
  transition: var(--form-transition) !important;
  color: #495057 !important;
}

.form-control:not(select):not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):focus {
  border: var(--form-border-focus) !important;
  box-shadow: var(--form-focus-shadow) !important;
  outline: none !important;
  background-color: #fff !important;
}

.form-control:not(select):not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not(:placeholder-shown):not(:focus) {
  border: var(--form-border-filled) !important;
}

/* Textarea Styling */
textarea.form-control {
  border: var(--form-border-default) !important;
  border-radius: 3px !important;
  padding: 0.75rem 1rem !important;
  font-size: 1rem !important;
  background-color: #fff !important;
  box-shadow: none !important;
  transition: var(--form-transition) !important;
  min-height: 120px;
  resize: vertical;
}

textarea.form-control:focus {
  border: var(--form-border-focus) !important;
  box-shadow: var(--form-focus-shadow) !important;
  outline: none !important;
  background-color: #fff !important;
}

textarea.form-control:not(:placeholder-shown):not(:focus) {
  border: var(--form-border-filled) !important;
}

/* Placeholder Styling */
.form-control::placeholder {
  color: #6c757d !important;
  opacity: 1 !important;
}

/* Form Labels - Enhanced Styling */
.form-group label,
.form-label {
  font-weight: 500;
  color: #495057;
  margin-bottom: 0.5rem;
  display: block;
  font-size: 0.95rem;
}

/* Floating Label Support (for forms that use floating labels) */
.form-floating {
  position: relative;
}

.form-floating > .form-control,
.form-floating > .form-select {
  height: calc(3.5rem + 2px);
  padding: 1rem 0.75rem;
}

.form-floating > label {
  position: absolute;
  top: 0;
  height: 100%;
  padding: 1rem 0.75rem;
  pointer-events: none;
  border: 1px solid transparent;
  transform-origin: 0 0;
  transition: opacity 0.1s ease-in-out, transform 0.1s ease-in-out;
  color: #6c757d;
}

.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label,
.form-floating > .form-select ~ label {
  opacity: 0.65;
  transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem);
  color: #004079;
}

/* Modern Select Dropdowns */
select.form-control,
.form-select {
  border: var(--form-border-default) !important;
  border-radius: 3px !important;
  padding: 0.75rem 2.5rem 0.75rem 1rem !important;
  font-size: 1rem !important;
  background-color: #fff !important;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23004079' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e") !important;
  background-repeat: no-repeat !important;
  background-position: right 0.75rem center !important;
  background-size: 16px 12px !important;
  appearance: none !important;
  box-shadow: none !important;
  transition: var(--form-transition) !important;
  color: #495057 !important;
  cursor: pointer;
}

select.form-control:focus,
.form-select:focus {
  border: var(--form-border-focus) !important;
  box-shadow: var(--form-focus-shadow) !important;
  outline: none !important;
  background-color: #fff !important;
}

select.form-control:not([value=""]):not(:focus),
.form-select:not([value=""]):not(:focus) {
  border: var(--form-border-filled) !important;
}

/* Custom Checkbox Styling */
.form-check-input[type="checkbox"] {
  width: 1.25rem !important;
  height: 1.25rem !important;
  margin-top: 0.125em !important;
  vertical-align: top;
  background-color: #fff !important;
  border: 2px solid #ced4da !important;
  border-radius: 0.25rem !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  cursor: pointer;
  transition: var(--form-transition) !important;
  position: relative;
  flex-shrink: 0;
}

.form-check-input[type="checkbox"]:checked {
  background-color: #004079 !important;
  border-color: #004079 !important;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e") !important;
  background-size: 100% 100% !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

.form-check-input[type="checkbox"]:focus {
  border-color: #004079 !important;
  box-shadow: var(--form-focus-shadow) !important;
  outline: none !important;
}

.form-check-input[type="checkbox"]:hover:not(:disabled) {
  border-color: #adb5bd !important;
}

.form-check-input[type="checkbox"]:checked:hover:not(:disabled) {
  background-color: #003366 !important;
  border-color: #003366 !important;
}

.form-check-input[type="checkbox"]:disabled {
  background-color: #e9ecef !important;
  border-color: #ced4da !important;
  cursor: not-allowed;
  opacity: 0.6;
}

.form-check-input[type="checkbox"]:disabled:checked {
  background-color: rgba(0, 64, 121, 0.5) !important;
  border-color: rgba(0, 64, 121, 0.5) !important;
}

/* Custom Radio Button Styling */
.form-check-input[type="radio"] {
  width: 1.25rem !important;
  height: 1.25rem !important;
  margin-top: 0.125em !important;
  vertical-align: top;
  background-color: #fff !important;
  border: 2px solid #ced4da !important;
  border-radius: 50% !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  cursor: pointer;
  transition: var(--form-transition) !important;
  position: relative;
  flex-shrink: 0;
}

.form-check-input[type="radio"]:checked {
  background-color: #fff !important;
  border-color: #004079 !important;
  background-image: radial-gradient(circle, #004079 0%, #004079 40%, transparent 40%, transparent 100%) !important;
  background-size: 100% 100% !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

.form-check-input[type="radio"]:focus {
  border-color: #004079 !important;
  box-shadow: var(--form-focus-shadow) !important;
  outline: none !important;
}

.form-check-input[type="radio"]:hover:not(:disabled) {
  border-color: #adb5bd !important;
}

.form-check-input[type="radio"]:checked:hover:not(:disabled) {
  border-color: #003366 !important;
  background-image: radial-gradient(circle, #003366 0%, #003366 40%, transparent 40%, transparent 100%) !important;
}

.form-check-input[type="radio"]:disabled {
  background-color: #e9ecef !important;
  border-color: #ced4da !important;
  cursor: not-allowed;
  opacity: 0.6;
}

.form-check-input[type="radio"]:disabled:checked {
  background-image: radial-gradient(circle, rgba(0, 64, 121, 0.5) 0%, rgba(0, 64, 121, 0.5) 40%, transparent 40%, transparent 100%) !important;
  border-color: rgba(0, 64, 121, 0.5) !important;
}

/* Form Check Label Styling */
.form-check-label {
  cursor: pointer;
  user-select: none;
  color: #495057;
  font-size: 0.95rem;
  margin-left: 0.5rem;
}

.form-check-input:disabled ~ .form-check-label {
  color: #6c757d;
  cursor: not-allowed;
}

/* Form Validation States */
.form-control.is-invalid,
.form-control:invalid {
  border: var(--form-border-error) !important;
  box-shadow: var(--form-error-shadow) !important;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23c4304f'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath d='m5.8 3.6 .4.4.4-.4m0 4.8-.4-.4-.4.4'/%3e%3c/svg%3e") !important;
  background-repeat: no-repeat !important;
  background-position: right calc(0.375em + 0.1875rem) center !important;
  background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem) !important;
  padding-right: calc(1.5em + 0.75rem) !important;
}

.form-control.is-invalid:focus,
.form-control:invalid:focus {
  border: var(--form-border-error) !important;
  box-shadow: var(--form-error-shadow) !important;
}

.form-control.is-valid {
  border: 2px solid #28a745 !important;
  box-shadow: 0 0 0 3px rgba(40, 167, 69, 0.1) !important;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%2328a745' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e") !important;
  background-repeat: no-repeat !important;
  background-position: right calc(0.375em + 0.1875rem) center !important;
  background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem) !important;
  padding-right: calc(1.5em + 0.75rem) !important;
}

.form-control.is-valid:focus {
  border: 2px solid #28a745 !important;
  box-shadow: 0 0 0 3px rgba(40, 167, 69, 0.1) !important;
}

.invalid-feedback {
  display: block;
  width: 100%;
  margin-top: 0.25rem;
  font-size: 0.875rem;
  color: #c4304f;
}

.valid-feedback {
  display: block;
  width: 100%;
  margin-top: 0.25rem;
  font-size: 0.875rem;
  color: #28a745;
}

/* File Input Styling */
.form-control[type="file"] {
  padding: 0.5rem !important;
}

.form-control[type="file"]::file-selector-button {
  padding: 0.5rem 1rem;
  margin: -0.5rem -0.5rem -0.5rem 0;
  margin-inline-end: 1rem;
  color: #fff;
  background-color: #004079;
  pointer-events: none;
  border-color: inherit;
  border-style: solid;
  border-width: 0;
  border-inline-end-width: 1px;
  border-radius: 0.5rem 0 0 0.5rem;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  font-weight: 500;
  cursor: pointer;
}

.form-control[type="file"]:hover::file-selector-button:not(:disabled) {
  background-color: #003366;
}

.form-control[type="file"]:focus::file-selector-button {
  outline: 2px solid #004079;
  outline-offset: 2px;
}

/* Disabled Input States */
.form-control:disabled,
.form-control[readonly] {
  background-color: #e9ecef !important;
  opacity: 1;
  cursor: not-allowed;
  border-color: #ced4da !important;
}

/* Pagination Styles - Brand Colors */
.pagination {
  display: flex;
  padding-left: 0;
  list-style: none;
}

.pagination .page-item.active .page-link {
  background-color: #004079 !important;
  color: #fff !important;
  z-index: 1;
}

.pagination .page-link {
  position: relative;
  display: block;
  padding: 0.375rem 0.75rem;
  margin-left: 0;
  color: #004079 !important;
  text-decoration: none;
  background-color: #fff;
  border: none;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.pagination .page-link:hover {
  z-index: 2;
  color: #003366 !important;
  background-color: rgba(0, 64, 121, 0.1) !important;
  text-decoration: none;
}

.pagination .page-link:focus {
  z-index: 3;
  color: #003366 !important;
  background-color: #e9ecef;
  outline: 0;
  box-shadow: 0 0 0 0.25rem rgba(0, 64, 121, 0.25);
}

.pagination .page-item.disabled .page-link {
  pointer-events: none;
  cursor: auto;
  background-color: #fff;
  opacity: 0.5;
}

.pagination .page-item.disabled .page-link::before {
  color: #6c757d;
  opacity: 0.5;
}

.pagination .page-item:first-child .page-link {
  margin-left: 0;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: #fff;
  font-size: 0;
  overflow: hidden;
  position: relative;
  color: transparent;
}

.pagination .page-item:first-child .page-link::before {
  content: "←";
  position: absolute;
  font-size: 1.25rem;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  color: #004079;
}

.pagination .page-item:first-child .page-link:hover {
  background-color: rgba(0, 64, 121, 0.1) !important;
}

.pagination .page-item:first-child .page-link:hover::before {
  color: #003366;
}

.pagination .page-item:last-child .page-link {
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: #fff;
  font-size: 0;
  overflow: hidden;
  position: relative;
  color: transparent;
}

.pagination .page-item:last-child .page-link::before {
  content: "→";
  position: absolute;
  font-size: 1.25rem;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  color: #004079;
}

.pagination .page-item:last-child .page-link:hover {
  background-color: rgba(0, 64, 121, 0.1) !important;
}

.pagination .page-item:last-child .page-link:hover::before {
  color: #003366;
}

/* Input Group Enhancements */
.input-group .form-control:focus {
  z-index: 3;
}

.input-group-text {
  border: var(--form-border-default);
  border-radius: 3px;
  background-color: #f8f9fa;
  color: #495057;
  transition: var(--form-transition);
}

.input-group:focus-within .input-group-text {
  border-color: #004079;
}

/* Input Group Border Radius Rules - Ensure flush connections */
/* When form-control is not first child, remove left border radius */
.input-group > .form-control:not(:first-child),
.input-group > .custom-select:not(:first-child),
.input-group > .input-group-prepend + .form-control,
.input-group > .input-group-prepend ~ .form-control {
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
}

/* When form-control is not last child, remove right border radius */
.input-group > .form-control:not(:last-child),
.input-group > .custom-select:not(:last-child) {
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

/* Input-group-text should have no right radius when followed by input */
.input-group > .input-group-text:not(:last-child),
.input-group > .input-group-prepend > .input-group-text,
.input-group > .input-group-prepend:not(:last-child) > .input-group-text {
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

/* Input-group-text should have no left radius when preceded by input */
.input-group > .input-group-append > .input-group-text,
.input-group > .input-group-append:not(:first-child) > .input-group-text {
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
}

/* Form Row Spacing */
.form-row .form-group,
.form-row > [class*="col-"] .form-group {
  margin-bottom: 1rem;
}

/* Responsive Adjustments */
@media (max-width: 576px) {
  .form-control:not(select):not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]) {
    padding: 0.625rem 0.875rem !important;
    font-size: 16px !important; /* Prevents zoom on iOS */
  }
  
  textarea.form-control {
    padding: 0.625rem 0.875rem !important;
    font-size: 16px !important;
  }
  
  select.form-control,
  .form-select {
    padding: 0.625rem 2rem 0.625rem 0.875rem !important;
    font-size: 16px !important;
  }
}

/* Override specific form contexts that need special handling */
.homepage-signup-form .form-control:not(select):not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]) {
  background-color: rgba(255, 255, 255, 0.95) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.5) !important;
  color: #212529 !important;
}

.homepage-signup-form .form-control:not(select):not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):focus {
  background-color: #fff !important;
  border: 2px solid #004079 !important;
  box-shadow: 0 0 0 3px rgba(0, 64, 121, 0.2) !important;
}

.donation-form-container .form-control:not(select):not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]) {
  background-color: rgba(255, 255, 255, 0.95) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.5) !important;
  color: #212529 !important;
}

.donation-form-container .form-control:not(select):not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):focus {
  background-color: #fff !important;
  border: 2px solid #004079 !important;
  box-shadow: 0 0 0 3px rgba(0, 64, 121, 0.2) !important;
}

/* Custom Amount Field Styling - Complete Rebuild */
.donation-form-container .custom-amount-wrapper {
  display: flex;
  gap: 0;
  width: 100%;
  align-items: stretch;
}

.donation-form-container .custom-amount-wrapper .input-group {
  display: flex !important;
  width: 100% !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  position: relative !important; /* For box-shadow positioning */
  border-radius: 0.375rem !important; /* Match Bootstrap default */
  transition: box-shadow 0.15s ease-in-out !important;
}

/* Ensure input-group children stretch to same height */
.donation-form-container .custom-amount-wrapper .input-group > * {
  display: flex !important;
  align-items: stretch !important;
}

.donation-form-container .custom-amount-wrapper .input-group > select,
.donation-form-container .custom-amount-wrapper .input-group > input {
  align-self: stretch !important;
}

/* Base styles for both select and input - matching Bootstrap's input height calculation */
.donation-form-container .custom-amount-wrapper select,
.donation-form-container .custom-amount-wrapper select.form-control,
.donation-form-container .custom-amount-wrapper input[type="text"],
.donation-form-container .custom-amount-wrapper input[type="number"],
.donation-form-container .custom-amount-wrapper input.form-control {
  /* Bootstrap 5 default input height: calc(1.5em + 0.75rem + 2px) = ~38px */
  /* Using explicit height to ensure perfect matching */
  height: calc(1.5em + 0.75rem + 2px) !important;
  box-sizing: border-box !important;
  padding: 0.375rem 0.75rem !important;
  font-size: 1rem !important;
  line-height: 1.5 !important;
  background-color: rgba(255, 255, 255, 0.95) !important;
  border: 1px solid rgba(255, 255, 255, 0.5) !important;
  color: #212529 !important;
  margin: 0 !important;
  vertical-align: middle !important;
}

/* Select-specific styles */
.donation-form-container .custom-amount-wrapper select,
.donation-form-container .custom-amount-wrapper select.form-control {
  border-right: none !important;
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 80px !important;
  border-radius: 0.375rem 0 0 0.375rem !important;
  appearance: auto !important;
  -webkit-appearance: menulist !important;
  -moz-appearance: menulist !important;
}

/* Input-specific styles */
.donation-form-container .custom-amount-wrapper input[type="text"],
.donation-form-container .custom-amount-wrapper input[type="number"],
.donation-form-container .custom-amount-wrapper input.form-control {
  border-left: none !important;
  flex: 1 1 auto !important;
  border-radius: 0 0.375rem 0.375rem 0 !important;
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  box-shadow: none !important; /* Remove individual shadow - will be on container */
}

/* Make input-group act as one cohesive unit - unified focus state */
.donation-form-container .custom-amount-wrapper .input-group:focus-within {
  box-shadow: 0 0 0 0.2rem rgba(0, 64, 121, 0.25) !important;
  border-radius: 0.375rem !important;
}

/* When input-group is focused, update borders on all children to match */
.donation-form-container .custom-amount-wrapper .input-group:focus-within select,
.donation-form-container .custom-amount-wrapper .input-group:focus-within select.form-control,
.donation-form-container .custom-amount-wrapper .input-group:focus-within input[type="text"],
.donation-form-container .custom-amount-wrapper .input-group:focus-within input[type="number"],
.donation-form-container .custom-amount-wrapper .input-group:focus-within input.form-control,
.donation-form-container .custom-amount-wrapper .input-group:focus-within .input-group-text {
  border-color: #004079 !important;
  background-color: #fff !important;
  box-shadow: none !important; /* Remove individual shadows */
  z-index: 1 !important;
}

/* Ensure select keeps right border removed when focused */
.donation-form-container .custom-amount-wrapper .input-group:focus-within select,
.donation-form-container .custom-amount-wrapper .input-group:focus-within select.form-control {
  border-right: none !important;
}

/* Ensure input keeps left border removed when focused */
.donation-form-container .custom-amount-wrapper .input-group:focus-within input[type="text"],
.donation-form-container .custom-amount-wrapper .input-group:focus-within input[type="number"],
.donation-form-container .custom-amount-wrapper .input-group:focus-within input.form-control {
  border-left: none !important;
}

/* Individual focus states (fallback) - but without box-shadow */
.donation-form-container .custom-amount-wrapper select:focus,
.donation-form-container .custom-amount-wrapper select.form-control:focus {
  background-color: #fff !important;
  border-color: #004079 !important;
  border-right: none !important;
  color: #212529 !important;
  box-shadow: none !important; /* Shadow handled by parent input-group */
  outline: none !important;
  z-index: 1 !important;
}

/* Ensure input is flush when it follows a prepend element (currency icon/select) */
.donation-form-container .custom-amount-wrapper .input-group-prepend + input,
.donation-form-container .custom-amount-wrapper .input-group-prepend ~ input,
.donation-form-container .custom-amount-wrapper .input-group > .input-group-text + input,
.donation-form-container .custom-amount-wrapper .input-group > select + input,
.donation-form-container .custom-amount-wrapper .input-group > .input-group-prepend + .form-control,
.donation-form-container .custom-amount-wrapper .input-group > .input-group-text ~ input[type="text"],
.donation-form-container .custom-amount-wrapper .input-group > .input-group-text ~ input[type="number"],
.donation-form-container .custom-amount-wrapper .input-group > select ~ input[type="text"],
.donation-form-container .custom-amount-wrapper .input-group > select ~ input[type="number"],
.donation-form-container .custom-amount-wrapper .input-group input[type="text"]:not(:first-child),
.donation-form-container .custom-amount-wrapper .input-group input[type="number"]:not(:first-child),
.donation-form-container .custom-amount-wrapper .input-group .form-control:not(:first-child) {
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  border-left: none !important;
}

/* Override any general border-radius rules for input-group inputs in donation form */
.donation-form-container .custom-amount-wrapper .input-group input.form-control,
.donation-form-container .custom-amount-wrapper .input-group input[type="text"],
.donation-form-container .custom-amount-wrapper .input-group input[type="number"] {
  /* If this input is not the first element, remove left radius */
}

.donation-form-container .custom-amount-wrapper .input-group > *:first-child ~ input,
.donation-form-container .custom-amount-wrapper .input-group > *:first-child ~ .form-control {
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
}

/* Ultimate override - any input in input-group that's not first child gets no left radius */
.donation-form-container .custom-amount-wrapper .input-group input:not(:first-child),
.donation-form-container .custom-amount-wrapper .input-group .form-control:not(:first-child),
.donation-form-container .custom-amount-wrapper .input-group input[id*="amount_other"]:not(:first-child) {
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  border-left: none !important;
}

/* Handle case where NationBuilder generates the input with specific ID */
.donation-form-container .custom-amount-wrapper #donation_amount_other_input,
.donation-form-container .custom-amount-wrapper input[id*="donation_amount_other"] {
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  border-left: none !important;
}

/* Ensure input-group structure removes left radius from inputs following prepend */
.donation-form-container .custom-amount-wrapper .input-group .input-group-prepend ~ * input,
.donation-form-container .custom-amount-wrapper .input-group .input-group-text ~ input,
.donation-form-container .custom-amount-wrapper .input-group select ~ input {
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  border-left: none !important;
}

.donation-form-container .custom-amount-wrapper input[type="text"]:focus,
.donation-form-container .custom-amount-wrapper input[type="number"]:focus,
.donation-form-container .custom-amount-wrapper input.form-control:focus {
  background-color: #fff !important;
  border-color: #004079 !important;
  border-left: none !important;
  color: #212529 !important;
  box-shadow: none !important; /* Shadow handled by parent input-group */
  outline: none !important;
  z-index: 1 !important;
}

.donation-form-container .custom-amount-wrapper input[type="text"]::placeholder,
.donation-form-container .custom-amount-wrapper input[type="number"]::placeholder,
.donation-form-container .custom-amount-wrapper input.form-control::placeholder {
  color: rgba(33, 37, 41, 0.5) !important;
}

/* Ensure select options are visible */
.donation-form-container .custom-amount-wrapper select option {
  background-color: #fff !important;
  color: #212529 !important;
}

/* Fix for input-group-text if present */
.donation-form-container .custom-amount-wrapper .input-group-text {
  background-color: rgba(255, 255, 255, 0.95) !important;
  border: 1px solid rgba(255, 255, 255, 0.5) !important;
  border-right: none !important;
  color: #212529 !important;
  padding: 0.375rem 0.75rem !important;
  font-size: 1rem !important;
  line-height: 1.5 !important;
  height: calc(1.5em + 0.75rem + 2px) !important;
  display: flex !important;
  align-items: center !important;
  border-radius: 0.375rem 0 0 0.375rem !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  box-shadow: none !important; /* No individual shadow */
  z-index: 1 !important;
}

/* When input-group is focused, input-group-text should match */
.donation-form-container .custom-amount-wrapper .input-group:focus-within .input-group-text {
  border-color: #004079 !important;
  background-color: #fff !important;
  border-right: none !important;
}

/* Mobile responsive adjustments - keep inline on mobile */
@media (max-width: 575.98px) {
  .donation-form-container .custom-amount-wrapper .input-group {
    flex-direction: row !important; /* Keep inline on mobile */
    flex-wrap: nowrap !important; /* Prevent wrapping */
  }
  
  .donation-form-container .custom-amount-wrapper select,
  .donation-form-container .custom-amount-wrapper select.form-control {
    width: auto !important; /* Auto width for currency select */
    min-width: 80px !important; /* Minimum width for currency select */
    border-right: none !important; /* Remove right border to connect with input */
    border-radius: 0.375rem 0 0 0.375rem !important; /* Left rounded only */
    margin-bottom: 0 !important; /* No margin between elements */
    /* Maintain same height */
    height: calc(1.5em + 0.75rem + 2px) !important;
  }
  
  .donation-form-container .custom-amount-wrapper select:focus {
    border-right: none !important; /* Keep border removed on focus */
  }
  
  .donation-form-container .custom-amount-wrapper input[type="text"],
  .donation-form-container .custom-amount-wrapper input[type="number"],
  .donation-form-container .custom-amount-wrapper input.form-control {
    border-left: none !important; /* Remove left border to connect with select */
    border-radius: 0 0.375rem 0.375rem 0 !important; /* Right rounded only */
    flex: 1 1 auto !important; /* Allow input to take remaining space */
    /* Maintain same height */
    height: calc(1.5em + 0.75rem + 2px) !important;
  }
  
  .donation-form-container .custom-amount-wrapper input[type="text"]:focus,
  .donation-form-container .custom-amount-wrapper input[type="number"]:focus,
  .donation-form-container .custom-amount-wrapper input.form-control:focus {
    border-left: none !important; /* Keep border removed on focus */
  }
}

/* Date picker input field styling - minimal styling to keep default Flatpickr appearance */
#event_start_datetime,
#event_start_datetime_edit,
#event_page_start_at_chronic,
input[name="event_page[start_at_chronic]"] {
  cursor: pointer;
}

#event_start_datetime:focus,
#event_start_datetime_edit:focus,
#event_page_start_at_chronic:focus,
input[name="event_page[start_at_chronic]"]:focus {
  border-color: #004079;
  box-shadow: 0 0 0 0.2rem rgba(0, 64, 121, 0.25);
}

/* ========================================
   LIKE PAGE SHARE COMPONENT
   ======================================== */

/* Modern like-page share component */
.like-page .btn {
  transition: all 0.2s ease;
  font-weight: 500;
  white-space: nowrap;
}

.like-page .btn i {
  font-size: 1rem;
  flex-shrink: 0;
}

.like-page .btn.btn-facebook i,
.like-page .btn.btn-facebook span {
  color: #fff !important;
}

.like-page .btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.like-page .btn:active {
  transform: translateY(0);
}

@media (max-width: 576px) {
  .like-page .d-flex {
    gap: 0.5rem !important;
  }
  
  .like-page .btn {
    font-size: 0.875rem;
    padding: 0.375rem 0.625rem;
  }
}

@media (max-width: 360px) {
  .like-page .btn span {
    display: none;
  }
  
  .like-page .btn i {
    margin: 0;
  }
}

/* ========================================
   SHARE SECTION COMPACT COMPONENT
   ======================================== */

/* Modern compact share section with expandable functionality */
.share-section-compact {
  padding: 1rem 0;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  position: relative;
  width: 100%;
  clear: both;
}

.share-section-compact::after {
  content: "";
  display: table;
  clear: both;
}

.share-section-compact .share-section-header {
  width: 100%;
  position: relative;
}

.share-section-compact .share-section-header p {
  font-size: 1rem;
  line-height: 1.5;
  margin-bottom: 0.75rem;
}

@media (min-width: 768px) {
  .share-section-compact .share-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
  }
  
  .share-section-compact .share-section-header p {
    margin-bottom: 0;
    flex-shrink: 0;
  }
}

.share-section-compact .share-primary-buttons {
  width: 100%;
  position: relative;
  flex-wrap: wrap;
}

@media (min-width: 768px) {
  .share-section-compact .share-primary-buttons {
    flex: 0 0 auto;
    width: auto;
  }
}

/* Unified share button style - all buttons use the same style */
.share-section-compact .share-btn-unified {
  transition: all 0.2s ease;
  font-weight: 500;
  white-space: nowrap;
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
  background-color: #fff;
  border: 1px solid #dee2e6;
  color: var(--bs-primary);
}

.share-section-compact .share-btn-unified i {
  font-size: 1rem;
  flex-shrink: 0;
  color: var(--bs-primary);
  transition: color 0.2s ease;
}

.share-section-compact .share-btn-unified span {
  color: var(--bs-primary);
  transition: color 0.2s ease;
}

.share-section-compact .share-btn-unified .share-btn-text {
  /* Inherits from parent */
}

@media (max-width: 576px) {
  .share-section-compact .share-btn-unified .share-btn-text {
    display: none;
  }
}

.share-section-compact .share-btn-unified:hover,
.share-section-compact .share-btn-unified:focus {
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 64, 121, 0.25);
}

.share-section-compact .share-btn-unified:hover i,
.share-section-compact .share-btn-unified:hover span,
.share-section-compact .share-btn-unified:focus i,
.share-section-compact .share-btn-unified:focus span {
  color: #fff !important;
}

.share-section-compact .share-btn-unified:active {
  transform: translateY(0);
  background-color: var(--bs-primary-dark);
  border-color: var(--bs-primary-dark);
}

.share-section-compact .share-btn-unified:focus {
  box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.25);
}

/* Expand toggle button - inherits unified style, just add icon animation */
.share-section-compact .share-expand-toggle .share-expand-icon {
  transition: transform 0.3s ease;
  font-size: 0.875rem;
}

/* Expandable section */
.share-section-compact .share-expandable {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1), 
              opacity 0.3s ease 0.05s, 
              margin-top 0.3s ease;
  margin-top: 0;
  width: 100%;
  position: relative;
  clear: both;
}

.share-section-compact .share-expandable.expanded {
  max-height: 300px; /* Enough for buttons + spacing */
  opacity: 1;
  margin-top: 1rem;
  transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), 
              opacity 0.3s ease, 
              margin-top 0.3s ease;
}

.share-section-compact .share-expandable .share-expandable-content {
  padding-top: 0.5rem;
  width: 100%;
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* Copy URL button - inherits unified style, add success state */
.share-section-compact .copy-url-btn.copy-success {
  background-color: var(--bs-success) !important;
  border-color: var(--bs-success) !important;
  color: #fff !important;
}

.share-section-compact .copy-url-btn.copy-success i,
.share-section-compact .copy-url-btn.copy-success span {
  color: #fff !important;
}

.share-section-compact .copy-url-btn.copy-success:hover {
  background-color: #218838 !important;
  border-color: #218838 !important;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(40, 167, 69, 0.25);
}

/* Ensure all buttons stay within container */
.share-section-compact .btn {
  position: relative;
  float: none;
  display: inline-flex;
}

/* Footer section for Blog Post/Suggestion share button */
.share-section-compact .share-section-footer {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(0, 0, 0, 0.05);
  width: 100%;
  clear: both;
  position: relative;
}

/* Responsive adjustments */
@media (max-width: 767px) {
  .share-section-compact .share-section-header p {
    margin-bottom: 0.75rem;
  }
  
  .share-section-compact .share-primary-buttons {
    gap: 0.5rem !important;
  }
}

@media (max-width: 576px) {
  .share-section-compact {
    padding: 0.75rem 0;
  }
  
  .share-section-compact .share-section-header p {
    font-size: 0.9375rem;
    margin-bottom: 0.75rem;
  }
  
  .share-section-compact .share-primary-buttons {
    width: 100%;
    gap: 0.5rem !important;
  }
  
  .share-section-compact .share-primary-buttons .btn {
    font-size: 0.875rem;
    padding: 0.375rem 0.625rem;
    flex: 1 1 auto;
    min-width: 0;
    max-width: 100%;
    justify-content: center;
  }
  
  .share-section-compact .share-expandable.expanded {
    max-height: 250px; /* Slightly less on mobile */
  }
  
  .share-section-compact .share-expandable-content {
    gap: 0.5rem !important;
  }
  
  .share-section-compact .share-expandable-content .btn {
    font-size: 0.875rem;
    padding: 0.375rem 0.625rem;
    flex: 1 1 auto;
    min-width: 0;
    justify-content: center;
  }
}

/* Very small screens - icon only for primary buttons */
@media (max-width: 360px) {
  .share-section-compact .share-btn-primary .share-btn-text,
  .share-section-compact .share-expand-toggle .share-btn-text {
    display: none;
  }
  
  .share-section-compact .share-btn-primary i,
  .share-section-compact .share-expand-toggle i {
    margin: 0;
  }
  
  .share-section-compact .share-expandable-content .btn span {
    display: inline; /* Keep text in expanded section even on small screens */
  }
}

/* ========================================
   CUSTOM UTILITY CLASSES
   ======================================== */

/* Cursor utilities */
.cursor-pointer {
  cursor: pointer;
}

/* Avatar/Image sizing utilities */
.avatar-size {
  width: 120px;
  height: 120px;
  object-fit: cover;
}

.avatar-size-placeholder {
  width: 120px;
  height: 120px;
}

/* Width utilities (for cases where Bootstrap's w-100 isn't sufficient) */
.width-full {
  width: 100%;
}

/* Content padding for fixed header */
.content-with-header {
  padding-top: 75px;
}

/* ========================================
   FINAL OVERRIDE: 3px BORDER RADIUS FOR ALL BUTTONS AND FORM FIELDS
   This ensures all buttons and form fields use 3px border radius
   ======================================== */

/* All buttons and button-like elements */
.btn,
.btn-sm,
.btn-lg,
button:not([type]),
button[type="button"],
button[type="submit"],
button[type="reset"],
input[type="button"],
input[type="submit"],
input[type="reset"],
.nav-link,
.navbar-nav .nav-link,
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus,
.dropdown-toggle,
.dropdown-item,
.page-link,
.pagination .page-link,
.pagination .page-item .page-link {
  border-radius: 3px !important;
}

/* All form fields - comprehensive override */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="url"],
input[type="search"],
input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="month"],
input[type="week"],
input[type="color"],
textarea,
select,
.form-control,
.form-control:focus,
.form-control-sm,
.form-control-lg,
.form-select,
.form-select:focus,
.form-select-sm,
.form-select-lg,
.form-check-input[type="checkbox"],
.form-check-input[type="radio"],
.input-group-text,
.input-group > .form-control,
.input-group > .form-select,
.input-group > .input-group-text {
  border-radius: 3px !important;
}
/* Petition Signed Button with Hover Tooltip */
.petition-signed-button {
  position: relative;
  cursor: pointer;
  transition: all 0.2s ease;
}

.petition-signed-button:hover {
  transform: translateY(-1px);
}

.petition-signed-button[title]:hover::after {
  content: attr(title);
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-bottom: 8px;
  padding: 6px 12px;
  background-color: rgba(0, 0, 0, 0.9);
  color: white;
  font-size: 0.875rem;
  white-space: nowrap;
  border-radius: 4px;
  pointer-events: none;
  z-index: 1000;
  opacity: 0;
  animation: tooltipFadeIn 0.2s ease forwards;
}

.petition-signed-button[title]:hover::before {
  content: '';
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-bottom: 2px;
  border: 5px solid transparent;
  border-top-color: rgba(0, 0, 0, 0.9);
  pointer-events: none;
  z-index: 1000;
  opacity: 0;
  animation: tooltipFadeIn 0.2s ease forwards;
}

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

/* Fix modal z-index to appear above other elements */
#petitionShareModal {
  z-index: 9999 !important;
}

#petitionShareModal .modal-dialog {
  z-index: 10000 !important;
}

.modal-backdrop {
  z-index: 9998 !important;
}

/* Bootstrap 4 Modal Z-Index Fix for Petition Share Modal */
#petitionShareModal {
  z-index: 1050 !important;
}

#petitionShareModal .modal-dialog {
  z-index: 1051 !important;
}

.modal-backdrop {
  z-index: 1040 !important;
}

/* Ensure modal appears above petition form overlay */
.petition-form-overlay {
  z-index: 10;
}

#petitionShareModal.modal {
  z-index: 1050 !important;
}

#petitionShareModal.modal.show {
  z-index: 1050 !important;
}

/* Petition Share Modal - Manual Implementation */
#petitionShareModal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1050;
  overflow-x: hidden;
  overflow-y: auto;
}

#petitionShareModal.show {
  display: block;
}

#petitionShareModal .modal-dialog {
  position: relative;
  width: auto;
  margin: 1.75rem auto;
  max-width: 500px;
  z-index: 1051;
}

.petition-share-modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1040;
}

/* Petition Share Modal Styling */
#petitionShareModal .modal-content {
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 -1px 1px 0 rgba(255, 255, 255, 0.10) inset, 0 1px 1px 0 rgba(255, 255, 255, 0.25) inset, 0 8px 6px 0 rgba(0, 0, 0, 0.05);
  backdrop-filter: blur(50px);
  -webkit-backdrop-filter: blur(50px);
  border: none;
}

#petitionShareModal .modal-header {
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  padding: 1rem 1.25rem;
}

#petitionShareModal .modal-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: #212529;
  margin: 0;
}

#petitionShareModal .btn-close {
  padding: 0.5rem;
  margin: -0.5rem -0.5rem -0.5rem auto;
  background-size: 1em;
  opacity: 0.5;
  transition: opacity 0.2s ease;
}

#petitionShareModal .btn-close:hover {
  opacity: 1;
}

#petitionShareModal .modal-body {
  padding: 1.5rem;
  color: #212529;
}

#petitionShareModal .petition-share-preview-image {
  border-radius: 8px;
  overflow: hidden;
}

#petitionShareModal .petition-share-preview-image img {
  width: 100%;
  height: auto;
  display: block;
  max-width: 100%;
}

#petitionShareModal .petition-share-buttons {
  margin-bottom: 1rem;
}

#petitionShareModal .petition-share-button {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  color: #212529;
  transition: transform 0.2s ease;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

#petitionShareModal .petition-share-button:hover {
  transform: translateY(-2px);
  text-decoration: none;
  color: #212529;
}

#petitionShareModal .petition-share-button:focus {
  outline: none;
  box-shadow: none;
}

#petitionShareModal .petition-share-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.5rem;
  font-size: 1.5rem;
  color: white;
  transition: all 0.2s ease;
}

#petitionShareModal .petition-share-icon i {
  color: white;
}

#petitionShareModal .petition-share-label {
  font-size: 0.75rem;
  font-weight: 500;
  text-align: center;
  color: #212529;
  transition: color 0.2s ease;
}

#petitionShareModal .petition-share-button-facebook .petition-share-icon {
  background-color: #3b5998;
}

#petitionShareModal .petition-share-button-facebook:hover .petition-share-icon {
  background-color: #2d4373;
}

#petitionShareModal .petition-share-button-twitter .petition-share-icon {
  background-color: #000000;
}

#petitionShareModal .petition-share-button-twitter:hover .petition-share-icon {
  background-color: #333333;
}

#petitionShareModal .petition-share-button-linkedin .petition-share-icon {
  background-color: #0077b5;
}

#petitionShareModal .petition-share-button-linkedin:hover .petition-share-icon {
  background-color: #005885;
}

#petitionShareModal .petition-share-button-whatsapp .petition-share-icon {
  background-color: #25d366;
}

#petitionShareModal .petition-share-button-whatsapp:hover .petition-share-icon {
  background-color: #1da851;
}

#petitionShareModal .petition-share-button-email .petition-share-icon {
  background-color: #6c757d;
}

#petitionShareModal .petition-share-button-email:hover .petition-share-icon {
  background-color: #5a6268;
}

#petitionShareModal .petition-share-button-copy .petition-share-icon {
  background-color: #6c757d;
  border: 2px solid #6c757d;
}

#petitionShareModal .petition-share-button-copy:hover .petition-share-icon {
  background-color: #5a6268;
  border-color: #5a6268;
}

#petitionShareModal .petition-share-button-copy.copy-success .petition-share-icon {
  background-color: #28a745;
  border-color: #28a745;
}

#petitionShareModal .modal-body p {
  color: #6c757d;
  margin-bottom: 1.25rem;
}

/* Fix button text colors - ensure all text is white on colored buttons */
#petitionShareModal .btn-primary,
#petitionShareModal .btn-dark,
#petitionShareModal .btn-success,
#petitionShareModal .btn-secondary {
  color: white !important;
}

#petitionShareModal .btn-primary:hover,
#petitionShareModal .btn-dark:hover,
#petitionShareModal .btn-success:hover,
#petitionShareModal .btn-secondary:hover {
  color: white !important;
}

/* Ensure icons have proper spacing */
#petitionShareModal .btn i {
  margin-right: 0.5rem;
  flex-shrink: 0;
}

#petitionShareModal .btn span {
  white-space: nowrap;
}

/* Fix input group styling */
#petitionShareModal .input-group {
  display: flex;
  align-items: stretch;
  width: 100%;
}

#petitionShareModal .input-group .form-control {
  flex: 1 1 auto;
  min-width: 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-right: none;
}

#petitionShareModal .input-group .btn {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-left: 1px solid #ced4da;
  padding: 0.375rem 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  white-space: nowrap;
}

#petitionShareModal .input-group .btn i {
  margin: 0;
}

#petitionShareModal .input-group:focus-within {
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
  border-radius: 0.375rem;
}

#petitionShareModal .input-group:focus-within .form-control,
#petitionShareModal .input-group:focus-within .btn {
  border-color: #80bdff;
  z-index: 3;
}

#petitionShareModal .input-group-sm .form-control {
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
}

#petitionShareModal .input-group-sm .btn {
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
}

/* Additional fixes for petition share modal */
#petitionShareModal .btn-secondary {
  background-color: #6c757d;
  border-color: #6c757d;
  color: white !important;
}

#petitionShareModal .btn-secondary:hover {
  background-color: #5a6268;
  border-color: #545b62;
  color: white !important;
}

/* Ensure input group looks cohesive */
#petitionShareModal .input-group .form-control {
  border: 1px solid #ced4da;
}

#petitionShareModal .input-group .btn {
  border: 1px solid #ced4da;
  background-color: #f8f9fa;
  color: #495057;
}

#petitionShareModal .input-group .btn:hover {
  background-color: #e9ecef;
  border-color: #adb5bd;
  color: #212529;
}

/* Make sure input and button are same height */
#petitionShareModal .input-group-sm .form-control,
#petitionShareModal .input-group-sm .btn,
#petitionShareModal .input-group-sm .input-group-text {
  height: calc(1.5em + 0.5rem + 2px);
  line-height: 1.5;
  display: flex;
  align-items: center;
}

/* Petition Share Modal Input Group - Bootstrap 4 Format */
#petitionShareModal .input-group {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  width: 100%;
  border-radius: 0.375rem;
}

#petitionShareModal .input-group .form-control:first-child {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

#petitionShareModal .input-group-append:last-child .input-group-text {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

#petitionShareModal .input-group .form-control {
  position: relative;
  flex: 1 1 auto;
  width: 1%;
  min-width: 0;
  margin-bottom: 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-right: none;
}

#petitionShareModal .input-group-append {
  display: flex;
}

#petitionShareModal .input-group-append .input-group-text {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.375rem 0.75rem;
  margin-bottom: 0;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #495057;
  text-align: center;
  white-space: nowrap;
  background-color: #f8f9fa;
  border: 1px solid #ced4da;
  border-left: none;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  min-height: calc(1.5em + 0.75rem + 2px);
}

#petitionShareModal .input-group-sm .form-control {
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
  line-height: 1.5;
  border-radius: 0.2rem;
}

#petitionShareModal .input-group-sm .input-group-append .input-group-text {
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
  line-height: 1.5;
  border-radius: 0.2rem;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  height: calc(1.5em + 0.5rem + 2px);
  display: flex;
  align-items: center;
  justify-content: center;
}

#petitionShareModal .input-group-append .input-group-text:hover {
  background-color: #e9ecef;
  border-color: #adb5bd;
}

#petitionShareModal .input-group:focus-within .form-control {
  border-color: #80bdff;
  z-index: 3;
}

#petitionShareModal .input-group:focus-within .input-group-append .input-group-text {
  border-color: #80bdff;
  z-index: 3;
}

#petitionShareModal .input-group-append .input-group-text i {
  margin: 0;
}

/* ========================================
   RECRUITING SHARE BUTTONS (Members Portal)
   ======================================== */

.recruiting-share-buttons {
  margin-bottom: 1rem;
}

.recruiting-share-button {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  color: #212529;
  transition: transform 0.2s ease;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

.recruiting-share-button:hover {
  transform: translateY(-2px);
  text-decoration: none;
  color: #212529;
}

.recruiting-share-button:focus {
  outline: none;
  box-shadow: none;
}

.recruiting-share-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.5rem;
  font-size: 1.5rem;
  color: white;
  transition: all 0.2s ease;
}

.recruiting-share-icon i {
  color: white;
}

.recruiting-share-label {
  font-size: 0.75rem;
  font-weight: 500;
  text-align: center;
  color: #212529;
  transition: color 0.2s ease;
}

.recruiting-share-button-facebook .recruiting-share-icon {
  background-color: #3b5998;
}

.recruiting-share-button-facebook:hover .recruiting-share-icon {
  background-color: #2d4373;
}

.recruiting-share-button-twitter .recruiting-share-icon {
  background-color: #000000;
}

.recruiting-share-button-twitter:hover .recruiting-share-icon {
  background-color: #333333;
}

.recruiting-share-button-linkedin .recruiting-share-icon {
  background-color: #0077b5;
}

.recruiting-share-button-linkedin:hover .recruiting-share-icon {
  background-color: #005885;
}

.recruiting-share-button-whatsapp .recruiting-share-icon {
  background-color: #25d366;
}

.recruiting-share-button-whatsapp:hover .recruiting-share-icon {
  background-color: #1da851;
}

/* ========================================
   DONATION FORM STYLES
   ======================================== */

/* Style frequency radio buttons as full buttons - comprehensive selectors for all NationBuilder structures */
.donation-form-container .donation-v2-occurence-radio,
.donation-video-background .donation-v2-occurence-radio {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.75rem !important;
}

.donation-form-container .donation-v2-occurence-radio .radio,
.donation-form-container .donation-v2-occurence-radio .radio-inline,
.donation-video-background .donation-v2-occurence-radio .radio,
.donation-video-background .donation-v2-occurence-radio .radio-inline,
.donation-form-container .donation-v2-occurence-radio .custom-control,
.donation-video-background .donation-v2-occurence-radio .custom-control {
  margin: 0 0 0.75rem 0 !important;
  padding: 0 !important;
}

.donation-form-container .donation-v2-occurence-radio .radio:last-child,
.donation-form-container .donation-v2-occurence-radio .radio-inline:last-child,
.donation-video-background .donation-v2-occurence-radio .radio:last-child,
.donation-video-background .donation-v2-occurence-radio .radio-inline:last-child,
.donation-form-container .donation-v2-occurence-radio .custom-control:last-child,
.donation-video-background .donation-v2-occurence-radio .custom-control:last-child {
  margin-bottom: 0 !important;
}

/* Hide "Donation frequency" text if NationBuilder adds it */
.donation-form-container .donation-v2-occurence-radio > legend,
.donation-video-background .donation-v2-occurence-radio > legend,
.donation-form-container .donation-v2-occurence-radio > label:not([for]),
.donation-video-background .donation-v2-occurence-radio > label:not([for]) {
  display: none !important;
}

.donation-form-container .donation-v2-occurence-radio input[type="radio"],
.donation-video-background .donation-v2-occurence-radio input[type="radio"],
.donation-form-container .donation-v2-occurence-radio .radio input[type="radio"],
.donation-form-container .donation-v2-occurence-radio .radio-inline input[type="radio"],
.donation-form-container .donation-v2-occurence-radio .custom-control-input[type="radio"] {
  position: absolute !important;
  opacity: 0 !important;
  pointer-events: none !important;
  width: 0 !important;
  height: 0 !important;
}

.donation-form-container .donation-v2-occurence-radio label,
.donation-video-background .donation-v2-occurence-radio label,
.donation-form-container .donation-v2-occurence-radio .radio label,
.donation-form-container .donation-v2-occurence-radio .radio-inline label,
.donation-form-container .donation-v2-occurence-radio .custom-control-label,
.donation-video-background .donation-v2-occurence-radio .custom-control-label {
  display: block !important;
  padding: 1rem 1.5rem !important;
  background-color: rgba(255, 255, 255, 0.1) !important;
  border: 2px solid rgba(255, 255, 255, 0.3) !important;
  border-radius: 0.375rem !important;
  color: #fff !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  text-align: center !important;
  font-weight: 500 !important;
  width: 100% !important;
  box-sizing: border-box !important;
  margin: 0 !important;
}

@media (max-width: 576px) {
  .donation-form-container .donation-v2-occurence-radio label,
  .donation-video-background .donation-v2-occurence-radio label,
  .donation-form-container .donation-v2-occurence-radio .radio label,
  .donation-form-container .donation-v2-occurence-radio .radio-inline label,
  .donation-form-container .donation-v2-occurence-radio .custom-control-label {
    padding: 0.875rem 1.25rem !important;
    font-size: 0.95rem !important;
  }
}

.donation-form-container .donation-v2-occurence-radio label:hover,
.donation-video-background .donation-v2-occurence-radio label:hover,
.donation-form-container .donation-v2-occurence-radio .radio label:hover,
.donation-form-container .donation-v2-occurence-radio .radio-inline label:hover,
.donation-form-container .donation-v2-occurence-radio .custom-control-label:hover {
  background-color: rgba(255, 255, 255, 0.2) !important;
  border-color: rgba(255, 255, 255, 0.5) !important;
}

.donation-form-container .donation-v2-occurence-radio input[type="radio"]:checked + label,
.donation-form-container .donation-v2-occurence-radio input[type="radio"]:checked ~ label,
.donation-video-background .donation-v2-occurence-radio input[type="radio"]:checked + label,
.donation-video-background .donation-v2-occurence-radio input[type="radio"]:checked ~ label,
.donation-form-container .donation-v2-occurence-radio .radio input[type="radio"]:checked + label,
.donation-form-container .donation-v2-occurence-radio .radio input[type="radio"]:checked ~ label,
.donation-form-container .donation-v2-occurence-radio .radio-inline input[type="radio"]:checked + label,
.donation-form-container .donation-v2-occurence-radio .radio-inline input[type="radio"]:checked ~ label,
.donation-form-container .donation-v2-occurence-radio .custom-control-input[type="radio"]:checked ~ .custom-control-label {
  background-color: rgba(255, 255, 255, 0.25) !important;
  border-color: #fff !important;
  font-weight: 600 !important;
  color: #fff !important;
}

/* Ensure text stays white when selected - override any dark text rules */
.donation-form-container .donation-v2-occurence-radio input[type="radio"]:checked + label *,
.donation-form-container .donation-v2-occurence-radio input[type="radio"]:checked ~ label *,
.donation-video-background .donation-v2-occurence-radio input[type="radio"]:checked + label *,
.donation-video-background .donation-v2-occurence-radio input[type="radio"]:checked ~ label *,
.donation-form-container .donation-v2-occurence-radio .radio input[type="radio"]:checked + label *,
.donation-form-container .donation-v2-occurence-radio .radio input[type="radio"]:checked ~ label *,
.donation-form-container .donation-v2-occurence-radio .radio-inline input[type="radio"]:checked + label *,
.donation-form-container .donation-v2-occurence-radio .radio-inline input[type="radio"]:checked ~ label *,
.donation-form-container .donation-v2-occurence-radio .custom-control-input[type="radio"]:checked ~ .custom-control-label * {
  color: #fff !important;
}

/* Style amount selection radio buttons as full buttons - comprehensive selectors */
.donation-form-container .donation-v2-amounts,
.donation-video-background .donation-v2-amounts {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.75rem !important;
}

.donation-form-container .donation-v2-amounts .radio,
.donation-form-container .donation-v2-amounts .radio-inline,
.donation-video-background .donation-v2-amounts .radio,
.donation-video-background .donation-v2-amounts .radio-inline,
.donation-form-container .donation-v2-amounts .custom-control,
.donation-video-background .donation-v2-amounts .custom-control {
  margin: 0 !important;
  padding: 0 !important;
  flex: 1 1 auto !important;
  min-width: 100px !important;
}

@media (max-width: 576px) {
  .donation-form-container .donation-v2-amounts .radio,
  .donation-form-container .donation-v2-amounts .radio-inline,
  .donation-video-background .donation-v2-amounts .radio,
  .donation-video-background .donation-v2-amounts .radio-inline,
  .donation-form-container .donation-v2-amounts .custom-control {
    flex: 1 1 calc(50% - 0.375rem) !important;
    min-width: auto !important;
  }
}

.donation-form-container .donation-v2-amounts input[type="radio"],
.donation-video-background .donation-v2-amounts input[type="radio"],
.donation-form-container .donation-v2-amounts .radio input[type="radio"],
.donation-form-container .donation-v2-amounts .radio-inline input[type="radio"],
.donation-form-container .donation-v2-amounts .custom-control-input[type="radio"] {
  position: absolute !important;
  opacity: 0 !important;
  pointer-events: none !important;
  width: 0 !important;
  height: 0 !important;
}

.donation-form-container .donation-v2-amounts label,
.donation-video-background .donation-v2-amounts label,
.donation-form-container .donation-v2-amounts .radio label,
.donation-form-container .donation-v2-amounts .radio-inline label,
.donation-form-container .donation-v2-amounts .custom-control-label,
.donation-video-background .donation-v2-amounts .custom-control-label {
  display: block !important;
  padding: 1rem 1.5rem !important;
  background-color: rgba(255, 255, 255, 0.1) !important;
  border: 2px solid rgba(255, 255, 255, 0.3) !important;
  border-radius: 0.375rem !important;
  color: #fff !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  text-align: center !important;
  font-weight: 500 !important;
  font-size: 1rem !important;
  width: 100% !important;
  box-sizing: border-box !important;
  margin: 0 !important;
}

@media (max-width: 576px) {
  .donation-form-container .donation-v2-amounts label,
  .donation-video-background .donation-v2-amounts label,
  .donation-form-container .donation-v2-amounts .radio label,
  .donation-form-container .donation-v2-amounts .radio-inline label,
  .donation-form-container .donation-v2-amounts .custom-control-label {
    padding: 0.75rem 1rem !important;
    font-size: 0.9rem !important;
  }
}

.donation-form-container .donation-v2-amounts label:hover,
.donation-video-background .donation-v2-amounts label:hover,
.donation-form-container .donation-v2-amounts .radio label:hover,
.donation-form-container .donation-v2-amounts .radio-inline label:hover,
.donation-form-container .donation-v2-amounts .custom-control-label:hover {
  background-color: rgba(255, 255, 255, 0.2) !important;
  border-color: rgba(255, 255, 255, 0.5) !important;
}

.donation-form-container .donation-v2-amounts input[type="radio"]:checked + label,
.donation-form-container .donation-v2-amounts input[type="radio"]:checked ~ label,
.donation-video-background .donation-v2-amounts input[type="radio"]:checked + label,
.donation-video-background .donation-v2-amounts input[type="radio"]:checked ~ label,
.donation-form-container .donation-v2-amounts .radio input[type="radio"]:checked + label,
.donation-form-container .donation-v2-amounts .radio input[type="radio"]:checked ~ label,
.donation-form-container .donation-v2-amounts .radio-inline input[type="radio"]:checked + label,
.donation-form-container .donation-v2-amounts .radio-inline input[type="radio"]:checked ~ label,
.donation-form-container .donation-v2-amounts .custom-control-input[type="radio"]:checked ~ .custom-control-label {
  background-color: rgba(255, 255, 255, 0.25) !important;
  border-color: #fff !important;
  font-weight: 600 !important;
}

/* Fix text colors in donation summary (white box) - override white text rules */
.donation-summary {
  background-color: #fff !important;
}

.donation-summary * {
  color: #212529 !important;
}

.donation-summary .text-muted {
  color: #6c757d !important;
}

.donation-summary .nb_donation_v2_amount,
.donation-summary .nb_donation_v2_amount *,
.donation-form-container .donation-summary .nb_donation_v2_amount,
.donation-form-container .donation-summary .nb_donation_v2_amount * {
  color: #212529 !important;
}

.donation-summary .nb_donation_v2_interval,
.donation-summary .nb_donation_v2_interval * {
  color: #6c757d !important;
}

.donation-summary h3,
.donation-summary .h3 {
  color: #212529 !important;
}

.donation-summary span.text-dark,
.donation-summary .text-dark {
  color: #212529 !important;
}

/* Ensure apple-pay-notice is dark in payment info container */
.payment-info-container #apple-pay-notice {
  color: #212529 !important;
}

.payment-info-container #submitted-payment-method p {
  color: #212529 !important;
}

/* Universal radio button styling for donation forms - catch all possible structures */
.donation-form-container .donation-v2-amounts > *,
.donation-video-background .donation-v2-amounts > *,
.donation-form-container .donation-v2-occurence-radio > *,
.donation-video-background .donation-v2-occurence-radio > * {
  position: relative;
}

/* Target any label inside donation-v2-amounts or donation-v2-occurence-radio */
.donation-form-container .donation-v2-amounts label:not([for*="other"]):not([for*="amount_other"]),
.donation-video-background .donation-v2-amounts label:not([for*="other"]):not([for*="amount_other"]),
.donation-form-container .donation-v2-occurence-radio label,
.donation-video-background .donation-v2-occurence-radio label {
  display: block !important;
  padding: 1rem 1.5rem !important;
  background-color: rgba(255, 255, 255, 0.1) !important;
  border: 2px solid rgba(255, 255, 255, 0.3) !important;
  border-radius: 0.375rem !important;
  color: #fff !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  text-align: center !important;
  font-weight: 500 !important;
  width: 100% !important;
  box-sizing: border-box !important;
  margin: 0 !important;
}

.donation-form-container .donation-v2-amounts label:not([for*="other"]):not([for*="amount_other"]):hover,
.donation-video-background .donation-v2-amounts label:not([for*="other"]):not([for*="amount_other"]):hover,
.donation-form-container .donation-v2-occurence-radio label:hover,
.donation-video-background .donation-v2-occurence-radio label:hover {
  background-color: rgba(255, 255, 255, 0.2) !important;
  border-color: rgba(255, 255, 255, 0.5) !important;
}

.donation-form-container .donation-v2-amounts input[type="radio"]:checked ~ label:not([for*="other"]):not([for*="amount_other"]),
.donation-video-background .donation-v2-amounts input[type="radio"]:checked ~ label:not([for*="other"]):not([for*="amount_other"]),
.donation-form-container .donation-v2-occurence-radio input[type="radio"]:checked ~ label,
.donation-video-background .donation-v2-occurence-radio input[type="radio"]:checked ~ label {
  background-color: rgba(255, 255, 255, 0.25) !important;
  border-color: #fff !important;
  font-weight: 600 !important;
}