/* ═══════════════════════════════════════════════════════
   SITE THEME — Dark by default / Light mode toggle
   Applied via html[data-theme="dark|light"] + body.dark-mode / body.light-mode
   ═══════════════════════════════════════════════════════ */

/* ── DARK (default) ── */
:root {
  --mw-bg:       #111111;
  --mw-bg-2:     #181818;
  --mw-card:     #1e1e20;
  --mw-card-2:   #252527;
  --mw-text:     #e0e0e0;
  --mw-muted:    #888;
  --mw-accent:   #3ea86a;
  --mw-accent-d: #287a4a;
  --mw-border:   rgba(255,255,255,0.08);
  --mw-shadow:   0 10px 40px rgba(0,0,0,0.55);
  --mw-header:   rgba(10,10,10,0.96);

  /* Override main.css global color system */
  --background-color:              #111111;
  --default-color:                 #d8d8d8;
  --heading-color:                 #f0f0f0;
  --accent-color:                  #3ea86a;
  --surface-color:                 #1e1e20;
  --contrast-color:                #ffffff;
  --nav-color:                     #c8c8c8;
  --nav-hover-color:               #3ea86a;
  --nav-mobile-background-color:   #111111;
  --nav-dropdown-background-color: #1e1e20;
  --nav-dropdown-color:            #e0e0e0;
  --nav-dropdown-hover-color:      #3ea86a;
}

/* ── LIGHT ── */
html[data-theme="light"] {
  --mw-bg:       #fafafa;
  --mw-bg-2:     #f0f4f0;
  --mw-card:     #ffffff;
  --mw-card-2:   #f5f7f5;
  --mw-text:     #232a25;
  --mw-muted:    #5a6a5f;
  --mw-accent:   #295233;
  --mw-accent-d: #1a3622;
  --mw-border:   rgba(0,0,0,0.09);
  --mw-shadow:   0 10px 40px rgba(0,0,0,0.10);
  --mw-header:   rgba(250,250,250,0.97);

  --background-color:              #fafafa;
  --default-color:                 #232a25;
  --heading-color:                 #1a2e1e;
  --accent-color:                  #295233;
  --surface-color:                 #f0f4f1;
  --contrast-color:                #ffffff;
  --nav-color:                     #232a25;
  --nav-hover-color:               #295233;
  --nav-mobile-background-color:   #ffffff;
  --nav-dropdown-background-color: #ffffff;
  --nav-dropdown-color:            #232a25;
  --nav-dropdown-hover-color:      #295233;
}

/* ══════════════════════════════════
   GLOBAL
   ══════════════════════════════════ */
html, body {
  background-color: var(--mw-bg) !important;
  color: var(--mw-text);
}

section, .section {
  background: var(--mw-bg) !important;
  color: var(--mw-text);
}

/* Only set color on body-level text — don't override footer/dark-section spans */
body > .main p,
body > .main li {
  color: var(--mw-text);
}

h1, h2, h3, h4, h5, h6 { color: var(--heading-color); }

a { color: var(--mw-accent); }
a:hover { color: var(--mw-accent-d); }

/* ══════════════════════════════════
   HEADER
   ══════════════════════════════════ */
#header,
#header.light-background,
.scrolled #header {
  background: var(--mw-header) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border-bottom: 1px solid var(--mw-border) !important;
  box-shadow: none !important;
}

/* Logo: whiteback in dark (same proportions as greenback), greenback in light */
.logo .logo-dark  { display: block; }
.logo .logo-light { display: none;  }

html[data-theme="light"] .logo .logo-dark  { display: none;  }
html[data-theme="light"] .logo .logo-light { display: block; }

/* Both logos must have identical sizing so spacing matches */
.logo img.logo-dark,
.logo img.logo-light {
  max-height: 60px;
  width: auto;
}

/* Nav links */
.navmenu a,
.navmenu a:focus {
  color: var(--nav-color) !important;
}

.navmenu a:hover,
.navmenu .active,
.navmenu .active:focus,
.navmenu li:hover > a {
  color: var(--nav-hover-color) !important;
}

/* Nav pill hover background — override hardcoded white gradient */
html[data-theme="dark"] .navmenu > ul > li > a:before {
  background: linear-gradient(180deg, rgba(32,32,34,0.98), rgba(24,24,26,0.96)) !important;
  border-color: rgba(255,255,255,0.09) !important;
  box-shadow: 0 10px 22px rgba(0,0,0,0.35) !important;
}

/* Desktop dropdown */
.navmenu .dropdown ul {
  background: var(--nav-dropdown-background-color) !important;
  border: 1px solid var(--mw-border) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.4) !important;
}

.navmenu .dropdown ul li a {
  color: var(--nav-dropdown-color) !important;
}

.navmenu .dropdown ul li a:hover {
  color: var(--nav-dropdown-hover-color) !important;
}

/* Mobile nav */
.mobile-nav-toggle {
  color: var(--mw-text) !important;
}

html[data-theme="dark"] .navmenu ul {
  background-color: rgba(16,16,18,0.99) !important;
  border-color: var(--mw-border) !important;
}

/* Header social icons */
.header-social-links a { color: var(--mw-muted) !important; }
.header-social-links a i { color: var(--mw-muted) !important; }
.header-social-links a:hover { color: var(--mw-accent) !important; }
.header-social-links a:hover i { color: var(--mw-accent) !important; }

/* ══════════════════════════════════
   SECTION TITLES
   ══════════════════════════════════ */
.section-title h2 {
  color: var(--mw-accent) !important;
}

.section-title h2::after {
  background: var(--mw-accent) !important;
}

.section-title p {
  color: var(--mw-muted) !important;
}

/* ══════════════════════════════════
   HERO (index)
   ══════════════════════════════════ */
.hero.section {
  background-color: var(--mw-bg) !important;
}

.hero .hero-content h1 { color: var(--heading-color); }
.hero .hero-content h1 .highlight { color: var(--mw-accent); }
.hero .hero-content h2 { color: var(--mw-text); }
.hero .hero-content p  { color: var(--mw-muted); }

.typed-cursor { color: var(--mw-accent); }

/* Hero floating cards */
.hero .hero-image .floating-elements .floating-card {
  background: var(--mw-card) !important;
  color: var(--mw-text) !important;
  border: 1px solid var(--mw-border) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4) !important;
}

.hero .hero-image .floating-elements .floating-card i {
  color: var(--mw-accent) !important;
}

.hero .hero-image .floating-elements .floating-card span {
  color: var(--mw-text) !important;
}

/* Hero social links */
.hero .social-links a {
  background: var(--mw-card) !important;
  color: var(--mw-text) !important;
  border: 1px solid var(--mw-border) !important;
}

.hero .social-links a:hover {
  background: var(--mw-accent) !important;
  color: #fff !important;
}

/* Hero CTA buttons */
.hero .hero-actions .btn.btn-primary {
  background: var(--mw-accent) !important;
  border-color: var(--mw-accent) !important;
  color: #fff !important;
}

.hero .hero-actions .btn.btn-primary:hover {
  background: var(--mw-accent-d) !important;
  border-color: var(--mw-accent-d) !important;
}

.hero .hero-actions .btn.btn-outline {
  background: transparent !important;
  color: var(--mw-accent) !important;
  border-color: var(--mw-accent) !important;
}

/* ══════════════════════════════════
   HOME PAGE — App Icons Grid
   ══════════════════════════════════ */
/* Apps section: keep dark green bg from main.css in both modes, just ensure text readable */
html[data-theme="dark"] .apps-section {
  background: var(--mw-card) !important;  /* dark card instead of green in dark mode */
}

/* In light mode keep the dark-green accent background from main.css — white title looks good on it */

.apps-section .apps-title {
  color: #ffffff;  /* always white — apps section bg is always dark (green or card) */
  text-align: center;
}

/* App icon card text: white on dark bg */
html[data-theme="dark"] .app-icon-card strong {
  color: rgba(255,255,255,0.85) !important;
}

html[data-theme="light"] .app-icon-card strong {
  color: #fff !important;  /* still on dark green bg in light mode */
}

/* Dark/light icon swap — !important needed to beat main.css img { display: block } */
.app-icon-card .icon-dark  { display: block !important; }
.app-icon-card .icon-light { display: none  !important; }

html[data-theme="light"] .app-icon-card .icon-dark  { display: none  !important; }
html[data-theme="light"] .app-icon-card .icon-light { display: block !important; }

/* App icon card — let main.css grid handle layout; just ensure text color */
.app-icon-card strong {
  color: var(--mw-text) !important;
}

/* ══════════════════════════════════
   HOME PAGE — Other landing sections
   ══════════════════════════════════ */
/* Landing sections — use background shorthand to clear any gradient images */
.landing-section {
  background: var(--mw-bg) !important;
}

/* Old Chief section — override main.css white gradient */
html[data-theme="dark"] .index-page .landing-section.old-chief-section {
  background: var(--mw-bg) !important;
}

/* Canada spotlight — do NOT override, let main.css handle its layout */

.brand-logo-card {
  background: var(--mw-card);
  border: 1px solid var(--mw-border);
  border-radius: 18px;
}

.brand-strip {
  background: var(--mw-card);
  border: 1px solid var(--mw-border);
  border-radius: 18px;
}

.brand-center-copy h3 { color: var(--heading-color); }

.home-link { color: var(--mw-accent); }
.home-link:hover { color: var(--mw-accent-d); }

/* ══════════════════════════════════
   ABOUT PAGE
   ══════════════════════════════════ */
.about .intro-content .eyebrow {
  color: var(--mw-accent) !important;
}

.about .intro-content .headline { color: var(--heading-color); }
.about .intro-content .lead     { color: var(--mw-muted); }
.about .intro-content p         { color: var(--mw-muted); }

/* Skill items */
.about .skill-item {
  background: var(--mw-card) !important;
  border: 1px solid var(--mw-border) !important;
}

.about .skill-item i   { color: var(--mw-accent) !important; }
.about .skill-item h3  { color: var(--heading-color) !important; }
.about .skill-item p   { color: var(--mw-muted) !important; }

/* Timeline */
.about .timeline-item {
  background: var(--mw-card);
  border: 1px solid var(--mw-border);
  border-radius: 14px;
  padding: 20px 20px 20px 32px;
}

.about .timeline-item .dot {
  background: var(--mw-accent) !important;
  box-shadow: 0 0 0 6px rgba(62,168,106,0.18) !important;
}

.about .timeline-item time { color: var(--mw-accent) !important; }
.about .timeline-item h4   { color: var(--heading-color) !important; }
.about .timeline-item p    { color: var(--mw-muted) !important; }

/* Quote */
.about .personal-quote p {
  color: var(--mw-text) !important;
}

/* Fact pills */
.about .fact-pill {
  background: var(--mw-card) !important;
  border: 1px solid var(--mw-border) !important;
  color: var(--mw-text) !important;
}

.about .fact-pill i    { color: var(--mw-accent) !important; }
.about .fact-pill span { color: var(--mw-text) !important; }

/* ══════════════════════════════════
   ABOUT PAGE — kill hardcoded white gradients
   ══════════════════════════════════ */
html[data-theme="dark"] .about-page #about,
html[data-theme="dark"] .about-page .about.section {
  background: var(--mw-bg) !important;
}

html[data-theme="dark"] .about-page #skills,
html[data-theme="dark"] .about-page .skills.section {
  background: var(--mw-bg-2) !important;
}

html[data-theme="dark"] .about-page #testimonials,
html[data-theme="dark"] .about-page .testimonials.section {
  background: var(--mw-bg) !important;
}

/* ══════════════════════════════════
   SKILLS SECTION
   ══════════════════════════════════ */
.skills.section {
  background: var(--mw-bg-2) !important;
}

.skills .skill-box {
  background: var(--mw-card) !important;
  border: 1px solid var(--mw-border);
  border-radius: 12px;
  color: var(--mw-text) !important;
}

.skills .skill-box h3 { color: var(--heading-color) !important; }
.skills .skill-box p  { color: var(--mw-muted) !important; }
.skills .skill-box span { color: var(--mw-accent) !important; }

.skills .skill-box .progress {
  background-color: rgba(255,255,255,0.06) !important;
}

.skills .skill-box .progress .progress-bar {
  background-color: var(--mw-accent) !important;
}

/* ══════════════════════════════════
   STATS SECTION
   ══════════════════════════════════ */
.stats.section,
.dark-background {
  background: var(--mw-card) !important;
}

html[data-theme="light"] .stats.section,
html[data-theme="light"] .dark-background {
  background: #1a2e1e !important;
}

.stats h2, .dark-background h2,
.stats .counters h2 {
  color: #fff !important;
}

.stats p, .dark-background p,
.stats .counters p {
  color: rgba(255,255,255,0.8) !important;
}

.stats .avatars i {
  color: rgba(255,255,255,0.85) !important;
}

/* ══════════════════════════════════
   TESTIMONIALS / CURRENTLY WORKING ON
   ══════════════════════════════════ */
.testimonials.section {
  background-color: var(--mw-bg) !important;
}

/* Work style section — override hardcoded #8c948c */
.work-style-section {
  background: var(--mw-bg-2) !important;
  border-radius: 0;
}

html[data-theme="light"] .work-style-section {
  background: #e8ede9 !important;
}

.testimonials .testimonial-item {
  background: var(--mw-card) !important;
  border: 1px solid var(--mw-border) !important;
}

.testimonials .testimonial-item i {
  color: var(--mw-accent) !important;
}

.testimonials .testimonial-item p,
.testimonials .testimonial-item p span {
  color: var(--mw-muted) !important;
}

.testimonials .testimonial-item h3 { color: var(--heading-color) !important; }
.testimonials .testimonial-item h4 { color: var(--mw-accent) !important; }

.testimonials .swiper-pagination-bullet {
  background: var(--mw-muted) !important;
  opacity: 1;
}
.testimonials .swiper-pagination-bullet-active {
  background: var(--mw-accent) !important;
}

/* ══════════════════════════════════
   RESUME PAGE
   ══════════════════════════════════ */

/* Override the hardcoded white/light gradient on the resume page body */
html[data-theme="dark"] .resume-page {
  background: var(--mw-bg) !important;
}

html[data-theme="light"] .resume-page {
  background: linear-gradient(180deg, #f5f7f3 0%, #f0f4f0 100%) !important;
}

.resume.section {
  background-color: var(--mw-bg) !important;
}

html[data-theme="dark"] .resume-page .resume.section {
  background-color: var(--mw-bg) !important;
}

/* Resume section title */
html[data-theme="dark"] .resume-page .resume .section-title h2 {
  color: var(--mw-accent) !important;
}

/* Download button */
.resume-page .resume-download-btn {
  background: var(--mw-accent) !important;
  color: #fff !important;
  box-shadow: none;
}

.resume-page .resume-download-btn:hover {
  background: var(--mw-accent-d) !important;
  color: #fff !important;
}

/* Resume item cards — override hardcoded rgba(255,255,255,0.94) */
html[data-theme="dark"] .resume-page .resume .resume-item {
  background: var(--mw-card) !important;
  border-color: var(--mw-border) !important;
  box-shadow: 0 8px 28px rgba(0,0,0,0.4) !important;
}

/* Left border stripe on resume content */
html[data-theme="dark"] .resume-page .resume .resume-item .resume-content {
  border-left-color: var(--mw-border) !important;
}

/* Timeline dot inside resume items — hardcoded white circle */
html[data-theme="dark"] .resume-page .resume .resume-item article::before {
  background: var(--mw-card) !important;
  border-color: var(--mw-accent) !important;
  box-shadow: 0 0 0 6px rgba(62,168,106,0.12) !important;
}

/* Resume title underline bar */
html[data-theme="dark"] .resume-page .resume .resume-item .resume-title {
  color: var(--mw-accent) !important;
}

html[data-theme="dark"] .resume-page .resume .resume-item .resume-title::after {
  background: var(--mw-accent) !important;
}

/* Resume text */
.resume-page .resume h4,
.resume-page .resume h5 {
  color: var(--heading-color);
}

html[data-theme="dark"] .resume-page .resume h4 { color: var(--heading-color) !important; }
html[data-theme="dark"] .resume-page .resume h5 { color: var(--mw-accent) !important; }

html[data-theme="dark"] .resume-page .resume .institution,
html[data-theme="dark"] .resume-page .resume .company {
  color: var(--mw-muted) !important;
}

html[data-theme="dark"] .resume-page .resume p,
html[data-theme="dark"] .resume-page .resume li {
  color: var(--mw-muted) !important;
}

/* Progress bars on resume */
html[data-theme="dark"] .resume-page .resume .progress {
  background: rgba(255,255,255,0.06) !important;
}

html[data-theme="dark"] .resume-page .resume .progress-bar {
  background: var(--mw-accent) !important;
}

/* Skill item text on resume */
html[data-theme="dark"] .resume-page .resume .skill-item h4 {
  color: var(--mw-text) !important;
}

/* ══════════════════════════════════
   CONTACT PAGE
   ══════════════════════════════════ */
.contact.section {
  background-color: var(--mw-bg) !important;
}

.contact .info-box {
  background: var(--mw-card) !important;
  border: 1px solid var(--mw-border) !important;
  border-radius: 18px;
}

.contact .info-box h3        { color: var(--heading-color) !important; }
.contact .info-box > p       { color: var(--mw-muted) !important; }
.contact .info-item .content h4 { color: var(--heading-color) !important; }
.contact .info-item .content p  { color: var(--mw-muted) !important; }

.contact .info-item .icon-box {
  background: var(--mw-accent) !important;
  color: #fff !important;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  flex-shrink: 0;
}

html[data-theme="dark"] .contact .info-item .icon-box {
  background: rgba(62,168,106,0.15) !important;
}

.contact .info-item .icon-box i {
  color: var(--mw-accent) !important;
}

.contact .contact-form {
  background: var(--mw-card) !important;
  border: 1px solid var(--mw-border) !important;
  border-radius: 18px;
}

.contact .contact-form h3 { color: var(--heading-color) !important; }
.contact .contact-form > p { color: var(--mw-muted) !important; }

.form-control,
input.form-control,
textarea.form-control {
  background: var(--mw-bg) !important;
  border: 1px solid var(--mw-border) !important;
  color: var(--mw-text) !important;
  border-radius: 10px;
}

.form-control:focus,
input.form-control:focus,
textarea.form-control:focus {
  background: var(--mw-bg) !important;
  border-color: var(--mw-accent) !important;
  color: var(--mw-text) !important;
  box-shadow: 0 0 0 3px rgba(62,168,106,0.15) !important;
}

.form-control::placeholder { color: var(--mw-muted) !important; }

.contact .contact-form .btn,
.php-email-form button[type="submit"],
.contact-form button {
  background: var(--mw-accent) !important;
  border-color: var(--mw-accent) !important;
  color: #fff !important;
  border-radius: 999px;
  padding: 12px 32px;
  font-weight: 600;
}

.contact .contact-form .btn:hover,
.php-email-form button[type="submit"]:hover {
  background: var(--mw-accent-d) !important;
  border-color: var(--mw-accent-d) !important;
}

/* ══════════════════════════════════
   APPS PAGE
   ══════════════════════════════════ */
.apps.section {
  background-color: var(--mw-bg) !important;
}

/* App cards sit on a dark-green background — all text must be white regardless of theme */
.app-card,
.app-card h3,
.app-card h4,
.app-card p,
.app-card li,
.app-card span,
.app-card .app-title,
.app-card .app-subtitle,
.app-card .muted,
.app-card .small {
  color: rgba(255, 255, 255, 0.90) !important;
}

.app-card h3,
.app-card .app-title {
  color: #ffffff !important;
}

.app-card .app-subtitle,
.app-card p,
.app-card .muted {
  color: rgba(255, 255, 255, 0.82) !important;
}

/* App badge (iOS pill) on green card */
.app-card .app-badge {
  background: rgba(255, 255, 255, 0.18) !important;
  color: #ffffff !important;
}

/* Support box */
.support-box {
  background: var(--mw-card) !important;
  border: 1px solid var(--mw-border) !important;
  border-radius: 18px;
}

.support-box h3   { color: var(--heading-color) !important; }
.support-box p    { color: var(--mw-muted) !important; }
.support-box code { color: var(--mw-accent) !important; }
.support-box a    { color: var(--mw-accent) !important; }

/* Contact Support button — dark bg with white text, always readable */
.btn-accent,
a.btn-accent {
  background: var(--mw-accent-d, #287a4a) !important;
  border-color: var(--mw-accent-d, #287a4a) !important;
  color: #ffffff !important;
  font-weight: 700;
}

.btn-accent:hover,
a.btn-accent:hover {
  background: #1f6038 !important;
  border-color: #1f6038 !important;
  color: #ffffff !important;
  filter: none !important;
}

/* Fitness tracker screenshot on apps page — update to v2 */
.fitness-shot-frame img[alt="Fitness Tracker app screenshot"] {
  content: url('/assets/img/apps/FitnessTracker Screenshots/v2.0/Simulator Screenshot - iPhone 17 Pro - 2026-06-02 at 22.36.27.png');
}

/* ══════════════════════════════════
   FOOTER
   ══════════════════════════════════ */
.footer {
  background: #0a0a0a !important;
  border-top: 1px solid rgba(255,255,255,0.07) !important;
  color: rgba(255,255,255,0.55) !important;
}

html[data-theme="light"] .footer {
  background: #1a2e1e !important;
}

.footer .copyright p         { color: rgba(255,255,255,0.50) !important; }
.footer .credits             { color: rgba(255,255,255,0.40) !important; }
.footer .sitename            { color: rgba(255,255,255,0.80) !important; }

.footer .footer-nav a {
  color: rgba(255,255,255,0.55) !important;
  text-decoration: none;
  transition: color 0.2s;
}

.footer .footer-nav a:hover  { color: #fff !important; }

.footer .social-links a {
  color: rgba(255,255,255,0.55) !important;
  background: rgba(255,255,255,0.07) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  transition: background 0.2s, color 0.2s;
}

.footer .social-links a:hover {
  background: var(--mw-accent) !important;
  color: #fff !important;
  border-color: var(--mw-accent) !important;
}

/* Footer logo — always white shape version since footer is always dark */
.footer .footer-logo img {
  filter: brightness(1);
}

/* ── Theme toggle button ── */
.theme-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 20px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.65);
  font-size: 0.88rem;
  font-family: inherit;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s, color 0.2s;
  margin-top: 18px;
}

.theme-toggle-btn:hover {
  border-color: rgba(255,255,255,0.35);
  background: rgba(255,255,255,0.12);
  color: #fff;
}

.theme-toggle-btn i {
  font-size: 1rem;
  color: inherit !important;
}

/* ══════════════════════════════════
   SCROLL TOP
   ══════════════════════════════════ */
.scroll-top {
  background-color: var(--mw-accent) !important;
}

.scroll-top:hover {
  background-color: var(--mw-accent-d) !important;
}

/* ══════════════════════════════════
   PRELOADER
   ══════════════════════════════════ */
#preloader {
  background-color: var(--mw-bg) !important;
}

/* ══════════════════════════════════
   LIGHT MODE — restore specific overrides
   that were aggressively set for dark
   ══════════════════════════════════ */
html[data-theme="light"] section,
html[data-theme="light"] .section {
  background-color: var(--mw-bg) !important;
}

html[data-theme="light"] .apps-section {
  background-color: var(--mw-bg-2) !important;
}

html[data-theme="light"] .skills.section {
  background-color: var(--mw-bg-2) !important;
}

html[data-theme="light"] .stats.section {
  background: #1a2e1e !important;
}

html[data-theme="light"] .testimonials.section {
  background-color: var(--mw-bg) !important;
}

html[data-theme="light"] .landing-section {
  background-color: var(--mw-bg) !important;
}

html[data-theme="light"] .canada-spotlight {
  background-color: var(--mw-bg-2) !important;
}

html[data-theme="light"] .about .skill-item {
  background: var(--mw-card) !important;
  border-color: var(--mw-border) !important;
}

html[data-theme="light"] .about .skill-item i { color: var(--mw-accent) !important; }
html[data-theme="light"] .about .skill-item h3 { color: var(--heading-color) !important; }
html[data-theme="light"] .about .skill-item p  { color: var(--mw-muted) !important; }

html[data-theme="light"] .testimonials .testimonial-item {
  background: var(--mw-card) !important;
}

html[data-theme="light"] .contact .info-box {
  background: var(--mw-card) !important;
}

html[data-theme="light"] .contact .contact-form {
  background: var(--mw-card) !important;
}

html[data-theme="light"] .contact .info-item .icon-box {
  background: var(--mw-accent) !important;
}

html[data-theme="light"] .contact .info-item .icon-box i {
  color: #fff !important;
}

html[data-theme="light"] .support-box {
  background: #f5f7f5 !important;
  border-color: var(--mw-border) !important;
}

html[data-theme="light"] .form-control,
html[data-theme="light"] input.form-control,
html[data-theme="light"] textarea.form-control {
  background: #fff !important;
  border-color: rgba(0,0,0,0.12) !important;
  color: var(--mw-text) !important;
}

html[data-theme="light"] .form-control::placeholder {
  color: #999 !important;
}

/* Light mode resume */
html[data-theme="light"] .resume-page .resume .resume-item {
  background: rgba(255,255,255,0.94) !important;
  border-color: rgba(41,82,51,0.10) !important;
}

html[data-theme="light"] .resume-page .resume .resume-item article::before {
  background: #ffffff !important;
  border-color: #295233 !important;
}

html[data-theme="light"] .resume-page .resume .resume-item .resume-title {
  color: #1f3527 !important;
}

html[data-theme="light"] .resume-page .resume h4 { color: #1a2e1e !important; }
html[data-theme="light"] .resume-page .resume h5 { color: #295233 !important; }
html[data-theme="light"] .resume-page .resume p,
html[data-theme="light"] .resume-page .resume li {
  color: #3a4a3e !important;
}

html[data-theme="light"] .resume-page .resume .institution,
html[data-theme="light"] .resume-page .resume .company {
  color: #5a6a5f !important;
}

/* ══════════════════════════════════
   MOBILE NAV overlay background
   ══════════════════════════════════ */
@media (max-width: 1199.98px) {
  html[data-theme="dark"] .navmenu ul {
    background-color: rgba(14,14,16,0.99) !important;
  }
}

/* ══════════════════════════════════
   FOOTER — text always white (footer is always dark)
   ══════════════════════════════════ */
.footer,
.footer p,
.footer span,
.footer li,
.footer strong,
.footer small {
  color: rgba(255,255,255,0.55) !important;
}

.footer .sitename,
.footer strong.sitename {
  color: rgba(255,255,255,0.90) !important;
  font-weight: 700;
}

.footer .copyright p {
  color: rgba(255,255,255,0.50) !important;
}

/* ══════════════════════════════════
   OLD CHIEF LEATHER CO — home page card
   ══════════════════════════════════ */
.old-chief-section {
  background-color: var(--mw-bg) !important;
  padding: 60px 0;
}

.oclc-card {
  display: flex;
  align-items: center;
  gap: 40px;
  background: var(--mw-card);
  border: 1px solid var(--mw-border);
  border-radius: 24px;
  padding: 40px 44px;
  box-shadow: var(--mw-shadow);
  transition: border-color 0.25s;
}

.oclc-card:hover {
  border-color: var(--mw-accent);
}

.oclc-logo-wrap {
  flex-shrink: 0;
  width: 110px;
  height: 110px;
}

.oclc-logo-wrap img {
  width: 100%;
  height: 100%;
  border-radius: 22px;
  display: block;
  object-fit: cover;
}

.oclc-copy {
  flex: 1;
  min-width: 0;
}

.oclc-eyebrow {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mw-accent) !important;
  margin-bottom: 8px;
}

.oclc-name {
  font-size: clamp(1.4rem, 2.5vw, 2rem);
  font-weight: 700;
  color: var(--heading-color) !important;
  margin-bottom: 10px;
}

.oclc-desc {
  font-size: 0.97rem;
  color: var(--mw-muted) !important;
  line-height: 1.65;
  margin-bottom: 20px;
  max-width: 560px;
}

.oclc-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 22px;
  border-radius: 999px;
  background: var(--mw-accent);
  color: #fff !important;
  font-weight: 700;
  font-size: 0.9rem;
  text-decoration: none;
  transition: background 0.2s, transform 0.2s;
}

.oclc-link:hover {
  background: var(--mw-accent-d);
  color: #fff !important;
  transform: translateY(-2px);
}

@media (max-width: 600px) {
  .oclc-card {
    flex-direction: column;
    align-items: flex-start;
    padding: 28px 24px;
    gap: 24px;
  }
}

/* ══════════════════════════════════
   LEGIBILITY — comprehensive pass
   ══════════════════════════════════ */

/* Ensure all headings in dark sections are visible */
html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] h5 {
  color: var(--heading-color);
}

/* Body text in dark mode */
html[data-theme="dark"] .main p,
html[data-theme="dark"] .main li {
  color: var(--mw-muted);
}

/* Light mode body text — ensure good contrast on light backgrounds */
html[data-theme="light"] .main p,
html[data-theme="light"] .main li {
  color: #3a4a3e;
}

html[data-theme="light"] h1,
html[data-theme="light"] h2,
html[data-theme="light"] h3,
html[data-theme="light"] h4,
html[data-theme="light"] h5 {
  color: #1a2e1e;
}

/* Section title eyebrow text */
html[data-theme="light"] .section-title h2 {
  color: #295233 !important;
}

/* About page — eyebrow labels in light mode */
html[data-theme="light"] .ab-section-label,
html[data-theme="light"] .ab-eyebrow,
html[data-theme="light"] .oclc-eyebrow {
  color: #295233 !important;
}

/* About page hero text in light mode */
html[data-theme="light"] .ab-hero h1 { color: #1a2e1e; }
html[data-theme="light"] .ab-lead,
html[data-theme="light"] .ab-body    { color: #4a5a4f; }

/* About cards in light mode */
html[data-theme="light"] .ab-capability-card,
html[data-theme="light"] .ab-timeline-card,
html[data-theme="light"] .ab-project-card,
html[data-theme="light"] .ab-principle-card {
  background: #ffffff !important;
  border-color: rgba(0,0,0,0.09) !important;
}

html[data-theme="light"] .ab-capability-card h3,
html[data-theme="light"] .ab-timeline-card h4,
html[data-theme="light"] .ab-project-card h3,
html[data-theme="light"] .ab-principle-card h3 {
  color: #1a2e1e !important;
}

html[data-theme="light"] .ab-capability-card p,
html[data-theme="light"] .ab-timeline-card p,
html[data-theme="light"] .ab-project-card p,
html[data-theme="light"] .ab-principle-card p {
  color: #5a6a5f !important;
}

html[data-theme="light"] .ab-timeline-year { color: #295233 !important; }
html[data-theme="light"] .ab-project-tag   { background: rgba(41,82,51,0.10) !important; color: #295233 !important; }

html[data-theme="light"] .ab-hobby-pill {
  background: #ffffff !important;
  border-color: rgba(0,0,0,0.10) !important;
  color: #232a25 !important;
}

html[data-theme="light"] .ab-hobby-pill i { color: #295233 !important; }

html[data-theme="light"] .ab-what-section  { background: #f0f4f0 !important; }
html[data-theme="light"] .ab-building-section { background: #f0f4f0 !important; }
html[data-theme="light"] .ab-hobbies-section { background: #f0f4f0 !important; }
html[data-theme="light"] .ab-journey-section { background: #fafafa !important; }
html[data-theme="light"] .ab-workstyle-section { background: #fafafa !important; }
html[data-theme="light"] .ab-quote-section  { background: #fafafa !important; }

html[data-theme="light"] .ab-quote-text { color: #1a2e1e !important; }
html[data-theme="light"] .ab-quote-attr { color: #5a6a5f !important; }

html[data-theme="light"] .ab-photo-badge {
  background: #ffffff !important;
  border-color: rgba(0,0,0,0.10) !important;
}

html[data-theme="light"] .ab-photo-badge .badge-label { color: #1a2e1e !important; }
html[data-theme="light"] .ab-photo-badge .badge-sub   { color: #5a6a5f !important; }

/* Old Chief card in light mode */
html[data-theme="light"] .oclc-card {
  background: #ffffff !important;
  border-color: rgba(0,0,0,0.09) !important;
}

html[data-theme="light"] .oclc-name { color: #1a2e1e !important; }
html[data-theme="light"] .oclc-desc { color: #5a6a5f !important; }

/* Hero floating cards — light mode */
html[data-theme="light"] .hero .hero-image .floating-elements .floating-card {
  background: #ffffff !important;
  border-color: rgba(0,0,0,0.10) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12) !important;
}

html[data-theme="light"] .hero .hero-image .floating-elements .floating-card span {
  color: #232a25 !important;
}

/* Hero social links — light mode */
html[data-theme="light"] .hero .social-links a {
  background: rgba(41,82,51,0.08) !important;
  border-color: rgba(41,82,51,0.20) !important;
  color: #295233 !important;
}

/* About stats strip — always dark regardless of mode */
.ab-stats-strip p,
.ab-stats-strip span,
.ab-stats-strip div { /* intentionally left to the .ab-stat-* classes */ }

/* Canada spotlight — layout fully handled by main.css */

/* Apps section title text in light mode */
html[data-theme="light"] .apps-section .apps-title {
  color: #1a2e1e !important;
}

html[data-theme="light"] .app-icon-card strong {
  color: #232a25 !important;
}

/* Skills section text in light mode */
html[data-theme="light"] .skills.section {
  background: #f0f4f0 !important;
}

html[data-theme="light"] .skill-box {
  background: #ffffff !important;
}

html[data-theme="light"] .skill-box h3 { color: #1a2e1e !important; }
html[data-theme="light"] .skill-box p  { color: #5a6a5f !important; }
html[data-theme="light"] .skill-box span { color: #295233 !important; }

/* Ensure contact page legibility in light mode */
html[data-theme="light"] .contact.section { background: #fafafa !important; }
html[data-theme="light"] .contact .info-box h3 { color: #1a2e1e !important; }
html[data-theme="light"] .contact .info-box > p { color: #5a6a5f !important; }
html[data-theme="light"] .contact .info-item .content h4 { color: #1a2e1e !important; }
html[data-theme="light"] .contact .info-item .content p  { color: #5a6a5f !important; }
html[data-theme="light"] .contact .contact-form h3 { color: #1a2e1e !important; }
html[data-theme="light"] .contact .contact-form > p { color: #5a6a5f !important; }

/* Apps page legibility */
html[data-theme="light"] .apps.section { background: #fafafa !important; }
html[data-theme="light"] .support-box h3 { color: #1a2e1e !important; }
html[data-theme="light"] .support-box p  { color: #5a6a5f !important; }