/* ========================================================================
   Suffah Foundation - Beige Theme Override
   Modern, elegant beige color scheme for frontend pages
   ======================================================================== */

/* Color Palette Definition
   ========================================================================
   Primary Beige: #E8DCC4 (warm beige)
   Secondary Beige: #D4C5A9 (soft brown-beige)
   Light Beige: #F5F0E8 (off-white/ivory)
   Warm Beige: #C9B89A (warm tan)
   Accent Brown: #8B7355 (muted brown)
   Dark Text: #3E3127 (dark brown/charcoal)
   Medium Text: #5C4D3E (medium brown)
   ======================================================================== */

:root {
  --beige-primary: #d4c5a9;
  --beige-secondary: #c9b89a;
  --beige-light: #f5f0e8;
  --beige-warm: #e8dcc4;
  --beige-accent: #b8a485;
  --brown-dark: #3e3127;
  --brown-medium: #5c4d3e;
  --brown-light: #8b7355;
  --beige-hover: #bda887;
  --beige-gradient-start: #f5f0e8;
  --beige-gradient-end: #e8dcc4;
}

/* Dark Mode Variables */
[data-theme="dark"] {
  --beige-primary: #3e3127;
  --beige-secondary: #4a3d2f;
  --beige-light: #2a2318;
  --beige-warm: #362e21;
  --beige-accent: #6b5a42;
  --brown-dark: #f5f0e8;
  --brown-medium: #d4c5a9;
  --brown-light: #c9b89a;
  --beige-hover: #5c4d3e;
  --beige-gradient-start: #2a2318;
  --beige-gradient-end: #362e21;
}

/* Theme Toggle Button in Navigation */
.navbar .theme-toggle {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 10px !important;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  margin-left: 10px;
}

.navbar .theme-toggle:hover {
  transform: scale(1.1);
  background: transparent !important;
}

.navbar .theme-toggle svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
  transition: all 0.3s ease;
}

.navbar .theme-toggle:active {
  transform: scale(0.95);
}

.navbar .theme-toggle:focus {
  outline: none;
  box-shadow: none;
}

/* Ensure theme toggle is visible in navbar */
.navbar-nav .nav-item .theme-toggle {
  color: rgba(255, 255, 255, 0.7);
}

.navbar-nav .nav-item .theme-toggle:hover {
  color: rgba(255, 255, 255, 1);
}

[data-theme="dark"] .navbar-nav .nav-item .theme-toggle {
  color: var(--beige-light);
}

@media (max-width: 991px) {
  .navbar .theme-toggle {
    margin-left: 0;
    justify-content: flex-start;
  }
}

/* Override Bootstrap Primary Colors */
.bg-primary,
.btn-primary,
.badge-primary,
.alert-primary {
  background-color: var(--beige-primary) !important;
  border-color: var(--beige-secondary) !important;
  color: var(--brown-dark) !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
  background-color: var(--beige-hover) !important;
  border-color: var(--brown-light) !important;
  color: var(--brown-dark) !important;
}

.text-primary {
  color: var(--beige-accent) !important;
}

/* Body and General Background */
body {
  background-color: var(--beige-light);
  color: var(--brown-dark);
}

/* Navbar Styling */
.ftco_navbar,
.ftco-navbar-light,
.bg-dark {
  background: linear-gradient(
    135deg,
    var(--beige-warm) 0%,
    var(--beige-primary) 100%
  ) !important;
  border-bottom: 2px solid var(--beige-secondary);
}

.ftco-navbar-light .navbar-brand {
  color: var(--brown-dark) !important;
}

.ftco-navbar-light .navbar-brand small {
  color: var(--brown-light) !important;
}

.ftco-navbar-light .navbar-brand i {
  color: var(--brown-light) !important;
}

.ftco-navbar-light .navbar-nav > .nav-item > .nav-link {
  color: var(--brown-dark) !important;
  font-weight: 500;
}

.ftco-navbar-light .navbar-nav > .nav-item > .nav-link:hover {
  color: var(--brown-light) !important;
}

.ftco-navbar-light .navbar-nav > .nav-item.active > a {
  color: var(--brown-light) !important;
}

.ftco-navbar-light.scrolled {
  background: var(--beige-light) !important;
  box-shadow: 0 2px 10px rgba(62, 49, 39, 0.1);
}

.ftco-navbar-light.scrolled .nav-link {
  color: var(--brown-dark) !important;
}

.ftco-navbar-light.scrolled .nav-link.active {
  color: var(--brown-light) !important;
}

.ftco-navbar-light.scrolled .navbar-brand {
  color: var(--brown-dark) !important;
}

.navbar-toggler {
  border-color: var(--beige-secondary) !important;
}

/* Hero Section */
.hero-wrap .overlay {
  background: linear-gradient(
    135deg,
    rgba(62, 49, 39, 0.4) 0%,
    rgba(139, 115, 85, 0.3) 100%
  );
  opacity: 1 !important;
}

.slider-text h1 {
  color: var(--beige-light) !important;
  text-shadow: 2px 2px 4px rgba(62, 49, 39, 0.5);
}

.slider-text p,
.slider-text p a {
  color: var(--beige-light) !important;
}

/* Counter/Intro Blocks */
.ftco-intro .block-18 {
  color: var(--brown-dark) !important;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(62, 49, 39, 0.1);
  transition: all 0.3s ease;
}

.ftco-intro .block-18:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 20px rgba(62, 49, 39, 0.15);
}

/* Override default orange/green colors with beige gradients */
section.ftco-intro .block-18.color-1,
.ftco-intro .block-18.color-1 {
  background: linear-gradient(
    135deg,
    var(--beige-primary) 0%,
    var(--beige-warm) 100%
  ) !important;
}

section.ftco-intro .block-18.color-2,
.ftco-intro .block-18.color-2 {
  background: linear-gradient(
    135deg,
    var(--beige-secondary) 0%,
    var(--beige-primary) 100%
  ) !important;
}

section.ftco-intro .block-18.color-3,
.ftco-intro .block-18.color-3 {
  background: linear-gradient(
    135deg,
    var(--beige-secondary) 0%,
    #c9b89a 100%
  ) !important;
}

.ftco-intro .block-18 .text strong,
.ftco-intro .block-18 .text span {
  color: var(--brown-dark) !important;
}

/* Buttons */
.btn-white {
  background-color: var(--beige-light) !important;
  border-color: var(--beige-secondary) !important;
  color: var(--brown-dark) !important;
  font-weight: 500;
}

.btn-white:hover {
  background-color: var(--beige-primary) !important;
  border-color: var(--beige-accent) !important;
  color: var(--brown-dark) !important;
}

.btn-outline-white {
  border-color: var(--beige-light) !important;
  color: var(--beige-light) !important;
}

.btn-outline-white:hover {
  background-color: var(--beige-light) !important;
  color: var(--brown-dark) !important;
}

/* Services Section */
.services .icon span {
  color: var(--brown-light) !important;
}

.services h3 {
  color: var(--brown-dark);
}

.block-6 {
  background-color: var(--beige-light);
  border: 1px solid var(--beige-secondary);
  border-radius: 8px;
  transition: all 0.3s ease;
}

.block-6:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 20px rgba(62, 49, 39, 0.1);
  background-color: var(--beige-warm);
}

.block-6 .heading {
  color: var(--brown-dark);
}

/* Sections */
.ftco-section {
  background-color: var(--beige-light);
}

section {
  background-color: var(--beige-light);
}

/* Volunteer section overlay - remove orange background */
.ftco-section-3 .overlay {
  background: linear-gradient(
    135deg,
    rgba(212, 197, 169, 0.92) 0%,
    rgba(201, 184, 154, 0.92) 100%
  ) !important;
  opacity: 0.95 !important;
}

/* Background Light Override */
.bg-light {
  background-color: var(--beige-light) !important;
}

/* White backgrounds override */
.bg-white {
  background-color: var(--beige-light) !important;
}

/* Ensure section text visibility */
.ftco-section,
section,
.bg-light {
  color: var(--brown-dark) !important;
}

.ftco-section p,
section p,
.bg-light p {
  color: var(--brown-dark) !important;
}

.ftco-section h1,
.ftco-section h2,
.ftco-section h3,
.ftco-section h4,
.ftco-section h5,
.ftco-section h6,
section h1,
section h2,
section h3,
section h4,
section h5,
section h6 {
  color: var(--brown-dark) !important;
}

/* Heading Section */
.heading-section {
  color: var(--brown-dark) !important;
}

.heading-section h2,
.heading-section h3 {
  color: var(--brown-dark) !important;
}

.heading-section p {
  color: var(--brown-medium) !important;
}

/* Cause Entry Cards */
.cause-entry {
  background: var(--beige-light) !important;
  border: 1px solid var(--beige-secondary) !important;
  box-shadow: 0px 3px 20px rgba(62, 49, 39, 0.1) !important;
  border-radius: 8px;
  overflow: hidden;
  transition: all 0.3s ease;
}

.cause-entry:hover {
  transform: translateY(-5px);
  box-shadow: 0px 6px 30px rgba(62, 49, 39, 0.15) !important;
}

.cause-entry .text {
  background-color: var(--beige-light);
}

.cause-entry h3 a {
  color: var(--brown-dark);
}

.cause-entry h3 a:hover {
  color: var(--brown-light);
}

/* Progress Bars */
.progress {
  background-color: var(--beige-secondary) !important;
}

.progress-bar {
  background-color: var(--beige-accent) !important;
}

/* Donation Goal */
.donated strong,
.goal strong {
  color: var(--brown-dark);
}

/* Links */
a {
  color: var(--brown-light);
  transition: color 0.3s ease;
}

a:hover {
  color: var(--brown-medium);
}

/* Ensure all paragraph text is visible */
p {
  color: var(--brown-dark) !important;
}

/* Span elements */
span {
  color: inherit;
}

/* Text content in various sections */
.text p,
.media-body p,
.content p {
  color: var(--brown-dark) !important;
}

/* White text override for better visibility */
.text-white {
  color: var(--beige-light) !important;
}

/* Staff/Team sections */
.staff .text p {
  color: var(--brown-dark) !important;
}

.staff .position {
  color: var(--brown-medium) !important;
}

.staff h3 a {
  color: var(--brown-dark) !important;
}

/* Info sections */
.info h3,
.info h3 a {
  color: var(--brown-dark) !important;
}

.info span {
  color: var(--brown-medium) !important;
}

.info .text p {
  color: var(--brown-dark) !important;
}

/* Headings */
h1,
h2,
h3,
h4,
h5,
h6,
.heading {
  color: var(--brown-dark) !important;
}

/* Footer */
.footer {
  background: var(--beige-secondary) !important;
  color: var(--brown-dark) !important;
}

.ftco-footer {
  background: var(--beige-secondary) !important;
}

.footer .ftco-heading-2 {
  color: var(--brown-dark) !important;
}

.footer a {
  color: var(--brown-medium);
}

.footer a:hover {
  color: var(--brown-light);
}

.footer .ftco-footer-social li a {
  background-color: var(--beige-accent);
  color: var(--beige-light);
  border-radius: 50%;
  transition: all 0.3s ease;
}

.footer .ftco-footer-social li a:hover {
  background-color: var(--brown-light);
  transform: translateY(-3px);
}

/* Contact Form */
.form-control {
  background-color: var(--beige-light) !important;
  border: 1px solid var(--beige-secondary) !important;
  color: var(--brown-dark) !important;
}

.form-control:focus {
  background-color: #fff !important;
  border-color: var(--beige-accent) !important;
  box-shadow: 0 0 0 0.2rem rgba(212, 197, 169, 0.25) !important;
}

.form-control::placeholder {
  color: var(--brown-medium) !important;
  opacity: 0.6;
}

/* Volunteer Section */
.ftco-section-3 {
  position: relative;
  overflow: hidden;
}

.ftco-section-3 .row {
  align-items: stretch !important;
}

.ftco-section-3 .col-md-6 {
  display: flex !important;
  flex-direction: column !important;
}

.volunteer {
  background-color: transparent !important;
  padding: 40px 30px !important;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
}

.volunteer h3 {
  color: var(--brown-dark) !important;
  font-weight: 600;
  margin-bottom: 25px;
}

.volunteer .img,
.ftco-section-3 .img-2 {
  border: 3px solid var(--beige-secondary);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(62, 49, 39, 0.15);
  height: 100%;
  min-height: 500px;
}

/* Volunteer Form Styling */
.volunter-form {
  background-color: rgba(245, 240, 232, 0.95) !important;
  padding: 30px;
  border-radius: 12px;
  box-shadow: 0 8px 25px rgba(62, 49, 39, 0.15);
  margin-bottom: 0 !important;
}

.volunter-form .form-group {
  margin-bottom: 20px;
}

.volunter-form .form-control {
  border: 2px solid var(--beige-secondary) !important;
  height: 58px !important;
  background: var(--beige-light) !important;
  color: var(--brown-dark) !important;
  font-size: 16px;
  border-radius: 8px !important;
  padding: 15px 20px;
  transition: all 0.3s ease;
}

.volunter-form .form-control:focus,
.volunter-form .form-control:active {
  border-color: var(--beige-accent) !important;
  background: #fff !important;
  box-shadow: 0 0 0 3px rgba(184, 164, 133, 0.1) !important;
}

.volunter-form .form-control::-webkit-input-placeholder {
  color: var(--brown-medium) !important;
}

.volunter-form .form-control::-moz-placeholder {
  color: var(--brown-medium) !important;
}

.volunter-form .form-control:-ms-input-placeholder {
  color: var(--brown-medium) !important;
}

.volunter-form .form-control:-moz-placeholder {
  color: var(--brown-medium) !important;
}

.volunter-form textarea.form-control {
  height: 120px !important;
  resize: vertical;
}

/* Submit button styling - outside form */
.volunteer .form-group .btn-white,
.volunter-form .btn-primary,
.volunteer .btn-white {
  background: linear-gradient(
    135deg,
    var(--beige-secondary),
    var(--beige-accent)
  ) !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 15px 40px !important;
  font-weight: 600;
  color: var(--brown-dark) !important;
  transition: all 0.3s ease;
  display: inline-block;
  width: 100%;
  text-align: center;
}

.volunteer .form-group .btn-white:hover,
.volunter-form .btn-primary:hover,
.volunteer .btn-white:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(139, 115, 85, 0.3) !important;
  background: linear-gradient(
    135deg,
    var(--beige-accent),
    var(--brown-light)
  ) !important;
}

/* Status message */
.volunteer p#status {
  display: none !important;
  color: var(--brown-dark) !important;
  background-color: rgba(245, 240, 232, 0.8);
  padding: 10px;
  border-radius: 6px;
  margin-top: 15px;
}

.volunteer p#status:not(:empty) {
  display: block !important;
}

/* Blog/Event Cards */
.blog-entry,
.event-entry {
  background-color: var(--beige-light);
  border: 1px solid var(--beige-secondary);
  border-radius: 8px;
  transition: all 0.3s ease;
}

.blog-entry:hover,
.event-entry:hover {
  box-shadow: 0 6px 20px rgba(62, 49, 39, 0.1);
  transform: translateY(-5px);
}

/* Counters */
.ftco-counter {
  background: linear-gradient(
    135deg,
    var(--beige-warm) 0%,
    var(--beige-primary) 100%
  );
}

.counter-wrap .text strong {
  color: var(--brown-dark) !important;
}

.counter-wrap .text span {
  color: var(--brown-medium) !important;
}

/* About Section */
.about-author {
  background-color: var(--beige-light);
  border: 1px solid var(--beige-secondary);
  border-radius: 8px;
  padding: 20px;
}

/* Gallery */
.gallery-item {
  border: 2px solid var(--beige-secondary);
  border-radius: 8px;
  overflow: hidden;
  transition: all 0.3s ease;
}

.gallery-item:hover {
  border-color: var(--beige-accent);
  box-shadow: 0 4px 15px rgba(62, 49, 39, 0.15);
}

/* Testimonials */
.testimony-wrap {
  background-color: var(--beige-light);
  border: 1px solid var(--beige-secondary);
  border-radius: 8px;
}

.testimony-wrap .text {
  color: var(--brown-dark);
}

.testimony-wrap .name {
  color: var(--brown-medium);
}

/* Pricing Tables */
.pricing-entry {
  background-color: var(--beige-light);
  border: 2px solid var(--beige-secondary);
  border-radius: 8px;
  transition: all 0.3s ease;
}

.pricing-entry:hover {
  border-color: var(--beige-accent);
  box-shadow: 0 6px 25px rgba(62, 49, 39, 0.15);
  transform: translateY(-5px);
}

.pricing-entry.active {
  background: linear-gradient(
    135deg,
    var(--beige-warm) 0%,
    var(--beige-primary) 100%
  );
  border-color: var(--beige-accent);
}

/* Tables */
.table {
  color: var(--brown-dark);
}

.table thead th {
  background-color: var(--beige-primary);
  color: var(--brown-dark);
  border-color: var(--beige-secondary);
}

.table-striped tbody tr:nth-of-type(odd) {
  background-color: var(--beige-light);
}

.table-hover tbody tr:hover {
  background-color: var(--beige-warm);
}

/* Alerts */
.alert {
  border-radius: 8px;
  border: 1px solid var(--beige-secondary);
}

.alert-success {
  background-color: #e8f5e9;
  border-color: #a5d6a7;
  color: #2e7d32;
}

.alert-info {
  background-color: var(--beige-light);
  border-color: var(--beige-secondary);
  color: var(--brown-dark);
}

/* Breadcrumbs */
.breadcrumbs {
  color: var(--beige-light) !important;
}

.breadcrumbs span {
  color: var(--beige-light) !important;
}

/* Pagination */
.pagination .page-link {
  background-color: var(--beige-light);
  border-color: var(--beige-secondary);
  color: var(--brown-dark);
}

.pagination .page-link:hover {
  background-color: var(--beige-primary);
  border-color: var(--beige-accent);
  color: var(--brown-dark);
}

.pagination .page-item.active .page-link {
  background-color: var(--beige-accent);
  border-color: var(--beige-accent);
  color: var(--beige-light);
}

/* Modal */
.modal-content {
  background-color: var(--beige-light);
  border: 2px solid var(--beige-secondary);
}

.modal-header {
  background-color: var(--beige-primary);
  border-bottom: 1px solid var(--beige-secondary);
}

.modal-header .modal-title {
  color: var(--brown-dark);
}

.modal-footer {
  border-top: 1px solid var(--beige-secondary);
}

/* Dropdown */
.dropdown-menu {
  background-color: var(--beige-light);
  border: 1px solid var(--beige-secondary);
  box-shadow: 0 4px 12px rgba(62, 49, 39, 0.1);
}

.dropdown-item {
  color: var(--brown-dark);
}

.dropdown-item:hover,
.dropdown-item:focus {
  background-color: var(--beige-warm);
  color: var(--brown-dark);
}

/* Sidebar */
.sidebar-box {
  background-color: var(--beige-light);
  border: 1px solid var(--beige-secondary);
  border-radius: 8px;
  padding: 30px;
}

/* Contact Info */
.contact-info {
  background-color: var(--beige-light);
  border-left: 3px solid var(--beige-accent);
  padding: 20px;
}

/* Icon Boxes */
.icon-box {
  background-color: var(--beige-light);
  border: 1px solid var(--beige-secondary);
  border-radius: 8px;
  transition: all 0.3s ease;
}

.icon-box:hover {
  background-color: var(--beige-warm);
  box-shadow: 0 4px 15px rgba(62, 49, 39, 0.1);
}

/* Video Player */
.video-popup {
  border: 3px solid var(--beige-secondary);
  border-radius: 8px;
  overflow: hidden;
}

/* Special Text Styles */
.subheading {
  color: var(--brown-light) !important;
}

.meta {
  color: var(--brown-medium) !important;
}

/* Request Callback / CTA */
.request-callback {
  background: linear-gradient(
    135deg,
    var(--beige-primary) 0%,
    var(--beige-warm) 100%
  );
  border-radius: 8px;
}

/* Social Icons */
.ftco-social li a {
  background-color: var(--beige-accent);
  color: var(--beige-light);
  transition: all 0.3s ease;
}

.ftco-social li a:hover {
  background-color: var(--brown-light);
  transform: translateY(-3px);
}

/* Loading Spinner */
#ftco-loader {
  background-color: rgba(245, 240, 232, 0.95) !important;
}

#ftco-loader .path {
  stroke: var(--beige-accent) !important;
}

/* Scrollbar Styling (Webkit browsers) */
::-webkit-scrollbar {
  width: 12px;
}

::-webkit-scrollbar-track {
  background: var(--beige-light);
}

::-webkit-scrollbar-thumb {
  background: var(--beige-accent);
  border-radius: 6px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--brown-light);
}

/* Selection Color */
::selection {
  background-color: var(--beige-primary);
  color: var(--brown-dark);
}

::-moz-selection {
  background-color: var(--beige-primary);
  color: var(--brown-dark);
}

/* Accessibility - Focus States */
a:focus,
button:focus,
input:focus,
textarea:focus,
select:focus {
  outline: 2px solid var(--beige-accent) !important;
  outline-offset: 2px;
}

/* Ensure Proper Contrast for WCAG Compliance */
.text-muted {
  color: var(--brown-medium) !important;
}

.text-light {
  color: var(--beige-light) !important;
}

.text-dark {
  color: var(--brown-dark) !important;
}

/* Card Hover Effects */
.card {
  background-color: var(--beige-light);
  border: 1px solid var(--beige-secondary);
  border-radius: 8px;
  transition: all 0.3s ease;
}

.card:hover {
  box-shadow: 0 6px 20px rgba(62, 49, 39, 0.1);
  transform: translateY(-3px);
}

.card-header {
  background-color: var(--beige-primary);
  border-bottom: 1px solid var(--beige-secondary);
  color: var(--brown-dark);
}

/* List Group */
.list-group-item {
  background-color: var(--beige-light);
  border: 1px solid var(--beige-secondary);
  color: var(--brown-dark);
}

.list-group-item:hover {
  background-color: var(--beige-warm);
}

.list-group-item.active {
  background-color: var(--beige-accent);
  border-color: var(--beige-accent);
  color: var(--beige-light);
}

/* Badges */
.badge {
  background-color: var(--beige-accent);
  color: var(--beige-light);
}

.badge-light {
  background-color: var(--beige-light);
  color: var(--brown-dark);
  border: 1px solid var(--beige-secondary);
}

/* Animation on Scroll Elements */
.aos-animate {
  transition-timing-function: ease-in-out;
}

/* Custom Background Patterns (Optional) */
.bg-pattern {
  background-image: linear-gradient(
      45deg,
      var(--beige-secondary) 25%,
      transparent 25%
    ),
    linear-gradient(-45deg, var(--beige-secondary) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, var(--beige-secondary) 75%),
    linear-gradient(-45deg, transparent 75%, var(--beige-secondary) 75%);
  background-size: 20px 20px;
  background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
  opacity: 0.05;
}

/* ========================================================================
   Additional Visibility Fixes
   Ensures all content is visible with proper contrast
   ======================================================================== */

/* Fix white text that might be invisible on light backgrounds */
.ftco-section .text-white,
section .text-white,
.bg-light .text-white {
  color: var(--brown-dark) !important;
}

/* Override any white colored text in sections */
.ftco-section [style*="color: white"],
.ftco-section [style*="color:#fff"],
.ftco-section [style*="color: #fff"] {
  color: var(--brown-dark) !important;
}

/* Ensure button text is always visible */
.btn {
  color: var(--brown-dark) !important;
}

.btn-primary,
.btn-success,
.btn-info,
.btn-warning {
  color: var(--brown-dark) !important;
}

.btn-dark {
  background-color: var(--brown-dark) !important;
  color: var(--beige-light) !important;
}

/* Media elements text visibility */
.media .text p {
  color: var(--brown-dark) !important;
}

.media h3,
.media h3 a {
  color: var(--brown-dark) !important;
}

.media span {
  color: var(--brown-medium) !important;
}

/* Block elements text visibility */
.block-6 .heading,
.block-18 .text {
  color: var(--brown-dark) !important;
}

.block-6 p,
.block-18 p {
  color: var(--brown-dark) !important;
}

/* Carousel and slider content */
.owl-carousel .item h3,
.owl-carousel .item h3 a {
  color: var(--brown-dark) !important;
}

.owl-carousel .item p {
  color: var(--brown-dark) !important;
}

/* Donation info visibility */
.donated,
.goal {
  color: var(--brown-dark) !important;
}

.donated span,
.goal span {
  color: var(--brown-medium) !important;
}

/* Position and meta text */
.position {
  color: var(--brown-medium) !important;
}

.meta {
  color: var(--brown-medium) !important;
}

/* Subheading visibility */
.subheading {
  color: var(--brown-light) !important;
}

/* Breadcrumbs - special case, should stay light on dark hero */
.hero-wrap .breadcrumbs,
.hero-wrap .breadcrumbs span,
.hero-wrap .slider-text {
  color: var(--beige-light) !important;
}

/* Ensure event/blog entry text is visible */
.event-entry .text,
.blog-entry .text {
  color: var(--brown-dark) !important;
}

.event-entry h3 a,
.blog-entry h3 a {
  color: var(--brown-dark) !important;
}

/* Testimony/Quote sections */
.testimony-wrap .text,
.testimony-wrap .name {
  color: var(--brown-dark) !important;
}

/* Author info */
.about-author {
  color: var(--brown-dark) !important;
}

.about-author h3,
.about-author p {
  color: var(--brown-dark) !important;
}

/* Contact info blocks */
.contact-info {
  color: var(--brown-dark) !important;
}

.contact-info a {
  color: var(--brown-light) !important;
}

/* Icon boxes */
.icon-box {
  color: var(--brown-dark) !important;
}

.icon-box h3 {
  color: var(--brown-dark) !important;
}

/* Pricing entries */
.pricing-entry {
  color: var(--brown-dark) !important;
}

.pricing-entry h3,
.pricing-entry .price {
  color: var(--brown-dark) !important;
}

/* Volunteer section */
.volunteer .text {
  color: var(--brown-dark) !important;
}

/* Categories and side links */
.categories li a,
.sidelink li a {
  color: var(--brown-dark) !important;
}

.categories li a:hover,
.sidelink li a:hover {
  color: var(--brown-light) !important;
}

/* Make sure all section content has proper text color */
.container p,
.container-fluid p {
  color: var(--brown-dark) !important;
}

/* Force all headings to use theme colors */
* h1,
* h2,
* h3,
* h4,
* h5,
* h6 {
  color: var(--brown-dark) !important;
}

/* All anchor tags default color */
* a:not(.btn) {
  color: var(--brown-light) !important;
  text-decoration: none;
}

* a:not(.btn):hover {
  color: var(--brown-medium) !important;
}

/* Ensure no white text on light backgrounds */
.bg-light *:not(.hero-wrap *):not(.slider-text *) {
  color: var(--brown-dark) !important;
}

/* Fix any inline white color styles */
[style*="color:white"],
[style*="color: white"],
[style*="color:#fff"],
[style*="color: #fff"],
[style*="color:#FFF"],
[style*="color: #FFF"] {
  color: var(--brown-dark) !important;
}

/* Exception for hero/slider areas - keep white text */
.hero-wrap [style*="color:white"],
.hero-wrap [style*="color: white"],
.hero-wrap [style*="color:#fff"],
.slider-text [style*="color:white"],
.slider-text [style*="color:#fff"] {
  color: var(--beige-light) !important;
}

/* ========================================================================
   Smooth Theme Transitions
   ======================================================================== */

html {
  transition: background-color 0.3s ease, color 0.3s ease;
}

body,
.ftco-section,
section,
.bg-light,
.bg-white,
.card,
.modal-content,
.dropdown-menu,
.navbar,
.footer,
.form-control,
.btn,
.block-18,
.block-6,
.cause-entry,
.blog-entry,
.event-entry {
  transition: background-color 0.3s ease, color 0.3s ease,
    border-color 0.3s ease;
}

/* ========================================================================
   Dark Mode Specific Adjustments
   ======================================================================== */

[data-theme="dark"] body {
  background-color: var(--beige-light);
}

[data-theme="dark"] .hero-wrap .overlay {
  background: linear-gradient(
    135deg,
    rgba(245, 240, 232, 0.1) 0%,
    rgba(212, 197, 169, 0.05) 100%
  );
}

[data-theme="dark"] .shadow,
[data-theme="dark"] .card,
[data-theme="dark"] .cause-entry,
[data-theme="dark"] .block-18 {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5) !important;
}

[data-theme="dark"] .form-control {
  background-color: var(--beige-warm) !important;
  border-color: var(--beige-accent) !important;
}

[data-theme="dark"] .form-control:focus {
  background-color: var(--beige-primary) !important;
}

[data-theme="dark"] img {
  opacity: 0.9;
  transition: opacity 0.3s ease;
}

[data-theme="dark"] img:hover {
  opacity: 1;
}

/* Dark mode scrollbar */
[data-theme="dark"] ::-webkit-scrollbar-track {
  background: var(--beige-light);
}

[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background: var(--beige-accent);
}

[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
  background: var(--brown-light);
}

/* ========================================================================
   Contact Information Visibility Fix
   ======================================================================== */

.block-23 ul li,
.block-23 ul li a,
.block-23 ul li span {
  color: var(--brown-dark) !important;
}

.footer .block-23 ul li a:hover {
  color: var(--brown-light) !important;
}

.footer .text,
.footer p,
.footer span {
  color: var(--brown-dark) !important;
}

/* Phone and email links in footer */
.footer a[href^="tel"],
.footer a[href^="mailto"] {
  color: var(--brown-medium) !important;
}

.footer a[href^="tel"]:hover,
.footer a[href^="mailto"]:hover {
  color: var(--brown-light) !important;
}

/* Icon visibility in footer */
.footer .icon {
  color: var(--brown-medium) !important;
}

/* ========================================================================
   Additional Text Visibility Enhancements
   ======================================================================== */

/* Ensure all text is visible by default */
* {
  color: var(--brown-dark);
}

/* Reset for specific elements that should keep custom colors */
.btn-primary,
.btn-success,
.btn-info,
.btn-warning,
.btn-danger,
.badge,
.alert {
  color: var(--brown-dark) !important;
}

/* Navigation items */
.nav-link,
.navbar-nav .nav-item .nav-link {
  color: var(--brown-dark) !important;
}

/* Dropdown items */
.dropdown-item {
  color: var(--brown-dark) !important;
}

.dropdown-item:hover,
.dropdown-item:focus {
  background-color: var(--beige-warm) !important;
  color: var(--brown-dark) !important;
}

/* Table text */
.table td,
.table th {
  color: var(--brown-dark) !important;
}

/* List items */
li {
  color: var(--brown-dark) !important;
}

/* Strong and emphasis */
strong,
b,
em,
i {
  color: inherit;
}

/* Labels */
label,
.form-label {
  color: var(--brown-dark) !important;
}

/* ========================================================================
   Print Styles
   ======================================================================== */

@media print {
  [data-theme="dark"] {
    --beige-primary: #d4c5a9;
    --beige-secondary: #c9b89a;
    --beige-light: #f5f0e8;
    --beige-warm: #e8dcc4;
    --beige-accent: #b8a485;
    --brown-dark: #3e3127;
    --brown-medium: #5c4d3e;
    --brown-light: #8b7355;
  }

  .theme-toggle {
    display: none !important;
  }

  body {
    background: white !important;
  }
}

/* ========================================================================
   Accessibility Improvements
   ======================================================================== */

/* High contrast mode support */
@media (prefers-contrast: high) {
  :root {
    --brown-dark: #000000;
    --brown-medium: #4a3d2f;
    --brown-light: #6b5a42;
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .theme-toggle {
    transition: none !important;
  }
}

/* ========================================================================
   Final Overrides - Maximum Specificity
   ======================================================================== */

/* Force text visibility on all sections */
html body .ftco-section *:not(.hero-wrap *):not(.slider-text *):not(.btn),
html body section *:not(.hero-wrap *):not(.slider-text *):not(.btn),
html body .bg-light *:not(.hero-wrap *):not(.slider-text *):not(.btn) {
  color: var(--brown-dark) !important;
}

/* Exception for icons and images */
html body .ftco-section img,
html body section img,
html body .ftco-section svg,
html body section svg {
  color: inherit !important;
  fill: currentColor;
}

/* Ensure buttons remain styled correctly */
html body .btn {
  color: var(--brown-dark) !important;
}

html body .btn-white,
html body .btn-outline-white {
  color: var(--brown-dark) !important;
  background-color: var(--beige-light) !important;
}

/* Hero section exceptions maintained */
html body .hero-wrap *,
html body .slider-text * {
  color: var(--beige-light) !important;
}

html body .hero-wrap .btn,
html body .slider-text .btn {
  color: var(--brown-dark) !important;
  background-color: var(--beige-light) !important;
}

/* ========================================================================
   Gallery Styles
   ======================================================================== */

.gallery-item {
  margin-bottom: 30px;
  transition: all 0.3s ease;
}

.example-image {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  border-radius: 15px;
  box-shadow: 0 10px 30px -15px rgba(0, 0, 0, 0.3);
  transition: all 0.4s ease;
}

.gallery-item:hover .example-image {
  transform: translateY(-5px) scale(1.02);
  box-shadow: 0 15px 35px -15px rgba(0, 0, 0, 0.4);
}

.video-container {
  position: relative;
  width: 100%;
  border-radius: 15px;
  overflow: hidden;
  background: #000;
  box-shadow: 0 10px 30px -15px rgba(0, 0, 0, 0.3);
  transition: all 0.4s ease;
}

.video-container:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 35px -15px rgba(0, 0, 0, 0.4);
}

.video-container video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4/3;
  object-fit: cover;
}

.plyr {
  border-radius: 15px;
  --plyr-color-main: #b8a485;
  --plyr-video-controls-background: linear-gradient(
    rgba(0, 0, 0, 0),
    rgba(0, 0, 0, 0.8)
  );
}

.plyr__controls {
  background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8));
}

.gallery-title {
  position: relative;
  display: inline-block;
}

.gallery-title::after {
  content: "";
  position: absolute;
  width: 60%;
  height: 2px;
  background: #8b7355;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
}

.lightbox-caption {
  font-size: 1.1rem;
  color: #fff;
  text-align: center;
  padding: 1rem;
  background: rgba(0, 0, 0, 0.8);
  border-radius: 0 0 15px 15px;
}

/* Bootstrap Pills Custom Styling */
.nav-pills .nav-link {
  background: linear-gradient(135deg, #f8f6f2 0%, #f5f1ed 100%);
  color: #3d3d3d;
  border: 2px solid #e8dcc4;
  border-radius: 25px;
  padding: 10px 18px;
  font-weight: 600;
  font-size: 0.95rem;
  transition: all 0.3s ease;
  white-space: nowrap;
  margin: 5px;
  display: block;
  text-decoration: none;
}

.nav-pills .nav-link:hover {
  border-color: #8b7355;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(139, 115, 85, 0.2);
  text-decoration: none;
}

.nav-pills .nav-link.active {
  background: linear-gradient(135deg, #8b7355 0%, #a0886b 100%);
  color: #fff;
  border-color: #8b7355;
  box-shadow: 0 6px 15px rgba(139, 115, 85, 0.3);
}

.nav-pills .badge {
  background: rgba(255, 255, 255, 0.3);
  color: currentColor;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: 500;
}

.nav-pills .nav-link.active .badge {
  background: rgba(255, 255, 255, 0.5);
}

@media (max-width: 768px) {
  .nav-pills .nav-link {
    padding: 8px 14px;
    font-size: 0.85rem;
  }
}