/* CRITICAL: Force light mode on ALL devices including Android */
/* This must be at the top to take precedence */
html {
  color-scheme: light only !important;
  -webkit-color-scheme: light only !important;
}

body {
  color-scheme: light only !important;
  -webkit-color-scheme: light only !important;
}

/* Override Android WebView dark mode */
@media (prefers-color-scheme: dark) {
  html, body {
    background: #ffffff !important;
    background-color: #ffffff !important;
    color: #111111 !important;
  }
  
  * {
    background-color: initial !important;
    color: initial !important;
  }
}

:root {
  color-scheme: light only !important;
  -webkit-color-scheme: light only !important;
  forced-color-adjust: none !important; /* <- THIS disables Android auto dark mode */  
  --brand: #2b6c4a; /* fallback until extracted from logo */
  --brand-600: var(--brand);
  --brand-100: color-mix(in oklab, var(--brand) 12%, white);
  --brand-50: color-mix(in oklab, var(--brand) 6%, white);
  --nav-offset: 72px; /* default navbar height */
}

/* Force light mode: prevent browser or OS forced dark mode from inverting colors.
   Uses color-scheme and explicit background/text overrides with !important where necessary. */
:root { 
  color-scheme: light only !important;
  -webkit-color-scheme: light only !important;
  forced-color-adjust: none !important;
}

/* Comprehensive light mode enforcement for all elements */
html, body { 
  background: #ffffff !important; 
  background-color: #ffffff !important;
  color: #111111 !important; 
  color-scheme: light only !important;
  -webkit-color-scheme: light only !important;
}

/* Prevent any element from being inverted or adjusted by OS */
* {
  color-scheme: light only !important;
  -webkit-color-scheme: light only !important;
  forced-color-adjust: none !important;
}

/* Common containers - explicit white backgrounds */
.bg-body, 
.bg-body-tertiary,
.bg-white,
.card, 
footer, 
.navbar, 
.p-4, 
.p-3, 
.p-5,
.support-card,
section { 
  background: #ffffff !important; 
  background-color: #ffffff !important;
  color: #111111 !important; 
}

/* Explicit backgrounds for all main sections */
#about,
#programs,
#leadership,
#membership,
#support,
#contact,
main {
  background: #ffffff !important;
  background-color: #ffffff !important;
}

/* Navbar specific */
.navbar-collapse {
  background: #ffffff !important;
  background-color: #ffffff !important;
}

/* Cards and containers */
.card-body,
.container,
.row,
.col,
[class*="col-"] {
  background-color: transparent !important;
}

.text-muted, .support-meta { color: #6c757d !important; }
.btn-outline-light { 
  color: #ffffff !important; 
  border-color: #ffffff !important; 
  background: transparent !important; 
}
.btn-outline-light:hover {
  background: #ffffff !important;
  color: var(--brand-600) !important;
}

/* Additional overrides for common Bootstrap and generic elements */
div, section, article, aside, main, header, nav { 
  color-scheme: light only !important;
  -webkit-color-scheme: light only !important;
}

/* Ensure inputs and forms stay light */
input, textarea, select, button {
  background: #ffffff !important;
  color: #111111 !important;
  color-scheme: light only !important;
  -webkit-color-scheme: light only !important;
}


.text-brand { color: var(--brand-600) !important; }
.bg-brand { background-color: var(--brand-600) !important; }
.bg-brand-ghost { background-color: var(--brand-50) !important; }
.btn-brand { background-color: var(--brand-600); color: #fff; border: 1px solid var(--brand-600); }
.btn-brand:hover { filter: brightness(0.95); color: #fff; }
.btn-outline-brand { color: var(--brand-600); border: 1px solid var(--brand-600); }
.btn-outline-brand:hover { background-color: var(--brand-600); color: #fff; }

.bg-gradient-hero {
  background: linear-gradient(135deg, var(--brand-600), color-mix(in oklab, var(--brand-600), #000 15%));
}

.section-title { font-weight: 700; margin-bottom: 0.75rem; }
.icon-circle { width: 44px; height: 44px; border-radius: 50%; display: inline-grid; place-items: center; background: var(--brand-50); color: var(--brand-600); font-size: 1.2rem; }
.logo-frame { max-width: 340px; }

/* Improve readability */
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

/* Smooth anchor scrolling and offset for sticky navbar */
html { scroll-behavior: smooth; }
/* Apply a top margin for scroll targeting so titles aren’t hidden under sticky nav */
[id] { scroll-margin-top: calc(var(--nav-offset) + 16px); }

/* Skip link for keyboard users */
.skip-link {
  position: absolute;
  left: -999px;
  top: -999px;
  background: #fff;
  color: #000;
  padding: 8px 12px;
  border-radius: 6px;
  box-shadow: 0 2px 6px rgba(0,0,0,.15);
  z-index: 10000;
}
.skip-link:focus { left: 12px; top: 12px; }

/* Navbar tweaks */
.navbar-brand img { object-fit: cover; }

footer { 
  background: #fafafa !important; 
  background-color: #fafafa !important;
  color: #111111 !important;
}

/* Accessibility */
a:focus, button:focus, input:focus, textarea:focus { outline: 3px solid color-mix(in oklab, var(--brand-600), #fff 70%); outline-offset: 2px; }

/* Dark mode disabled: removed prefers-color-scheme overrides so the site always uses the light theme.
   If you want to re-enable dark mode later, restore the original rules below or provide an explicit
   dark-theme stylesheet. */

/* Leadership / people cards */
.person-card { display: inline-block; text-align: center; }
.person-photo {
  width: 160px; /* base size */
  height: 160px;
  object-fit: cover;
  display: inline-block;
}
@media (min-width: 768px) {
  .person-photo { width: 180px; height: 180px; }
}
@media (min-width: 1200px) {
  .person-photo { width: 200px; height: 200px; }
}

.person-name { margin-top: 0.25rem; }