/* --------------------------------------------------
   GLOBAL DARK MODE BASE
-------------------------------------------------- */
body {
    background: #1a1a1a;
    color: #eee;
}

.hero-container .container::before {
    background-color: rgba(0, 0, 0, 0) !important;
}

.ourpurpose-section,
.support-section {
    background: #f7f7f7 !important;
    color: #222 !important;
}

.ourpurpose-section p,
.support-section p {
    color: #333 !important;
}

.hero-container {
    background-color: #1a1a1a !important;
}


.container {
    background: #2a2a2a;
}

a {
    color: #9ecbff;
}

/* Fix home.php container so cards stay white */
.hero-container .container {
    background: transparent !important;
}



/* --------------------------------------------------
   HEADINGS & TEXT
-------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
    color: #f0f0f0;
}

p, span, li {
    color: #ddd;
}


/* --------------------------------------------------
   FORMS — GLOBAL FIX FOR JOIN, CONTACT, OURPEOPLE
-------------------------------------------------- */
form h2,
form label,
form .error,
form .validation-message,
form .yob-error {
    color: #f0f0f0 !important;
}


/* --------------------------------------------------
   INPUTS, TEXTAREAS, SELECTS
-------------------------------------------------- */
input,
textarea,
select {
    background-color: #111;
    color: #fff;
    border: 1px solid #444;
}

input::placeholder,
textarea::placeholder {
    color: #bbb;
}

/* Year of Birth dropdown */
select {
    background-color: #222;
    color: #fff;
}


/* --------------------------------------------------
   FORM CONTAINERS (JOIN + CONTACT + OTHERS)
-------------------------------------------------- */
.form-container,
.join-form,
.contact-form,
#ourpeople-gallery {
    background-color: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(4px);
    border-radius: 4px;
    padding: 20px;
}


/* --------------------------------------------------
   BUTTONS
-------------------------------------------------- */
button,
input[type="submit"] {
    background-color: #333;
    color: #fff;
    border: 1px solid #555;
}

button:hover,
input[type="submit"]:hover {
    background-color: #444;
}


/* --------------------------------------------------
   CARDS (OUR PEOPLE)
-------------------------------------------------- */
.card {
    background-color: #222;
    color: #fff;
    border: 1px solid #444;
}

.card:hover {
    background-color: #333;
}


/* --------------------------------------------------
   NAVIGATION
-------------------------------------------------- */
nav,
header,
footer {
    background-color: #111;
}

nav a,
header a,
footer a {
    color: #eee;
}

nav a:hover,
header a:hover,
footer a:hover {
    color: #9ecbff;
}

/* DARK MODE */


.burger {
    color: #9ecbff !important;
}




/* Cards stay white in dark mode */
.about-section,
.ourpurpose-section {
    background: #ffffff !important;
    color: #222 !important;
}

/* Headings inside cards */
.about-section h2,
.ourpurpose-section h2 {
    color: #222 !important;
}

/* Text inside cards */
.about-section p,
.ourpurpose-section p,
.ourpurpose-section .short-text,
.ourpurpose-section .full-text {
    color: #333 !important;
}

.purpose-support-wrapper {
    background: #1a1a1a !important;
}


/* Fix home.php background behind white cards */
.two-column-container {
    background: #1a1a1a !important;
}

/* Make BOTH columns dark in dark mode */
.two-column-container .column,
.two-column-container .purpose-support-wrapper {
    background: #1a1a1a !important;
}


/* Make the home.php container dark in dark mode */
body {
    background: #1a1a1a !important;
}




/* Donation Page — Dark Mode */

.dark-mode .page-body {
    background: #1a1a1a !important;
}

.dark-mode .donation-title,
.dark-mode .donation-transparency h2 {
    color: #f0f0f0 !important;
}

.dark-mode .donation-subtitle,
.dark-mode .bank-details p,
.dark-mode .donation-transparency li {
    color: #ddd !important;
}

/* Cards stay white in dark mode (consistent with your site) */
.dark-mode .donation-form,
.dark-mode .bank-card {
    background: #ffffff !important;
    border-color: #333 !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.25) !important;
}

/* Tier buttons */
.dark-mode .tier-card {
    background: #ffffff;
    border-color: #333;
    color: #2c3e50;
}

.dark-mode .tier-card:hover {
    background: #f0f0f0;
}

.dark-mode .tier-card.active {
    background: #2b6289;
    color: #ffffff;
    border-color: #2b6289;
}



/* Make donation form labels bolder in dark mode */
.dark-mode .donation-label {
    font-weight: 700 !important;
    color: #111 !important; /* stays dark on white cards */
}

/* Optional: also bold the bank detail labels */
.dark-mode .bank-details strong {
    font-weight: 700 !important;
    color: #111 !important;
}



/* DARK MODE FIX — ONLY FOR FORMS (team.php + join.php) */
.dark_theme .contact-form label,
.dark_theme .contact-form .char-counter,
.dark_theme .contact-form p,
.dark_theme .contact-form span {
    color: #eee !important;
}

.dark_theme .contact-form input,
.dark_theme .contact-form textarea,
.dark_theme .contact-form select {
    background: #111 !important;
    color: #fff !important;
    border-color: #555 !important;
}

.dark_theme .contact-section,
.dark_theme .join-compact .contact-box {
    background: rgba(0,0,0,0.55) !important;
    backdrop-filter: blur(4px);
    color: #eee !important;
}

/* External link to projects - about.php */


.ext-link {
    margin-top: 1rem;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--link-color, #2a7ae2);
    text-decoration: none;
    font-weight: 500;
    transition: color .25s ease;
}

.ext-link:hover {
    color: var(--link-hover, #1a5ac7);
}

.ext-icon {
    width: 14px;
    height: 14px;
    stroke: currentColor;
    stroke-width: 2;
    fill: none;
    transition: transform .25s ease, opacity .25s ease;
    opacity: 0.85;
}

.ext-link:hover .ext-icon {
    transform: translate(2px, -2px);
    opacity: 1;
}

/* Dark mode support */
body.dark .ext-link {
    color: var(--link-dark, #8ab4ff);
}

body.dark .ext-link:hover {
    color: var(--link-dark-hover, #a8c8ff);
}