/*
  =====================================================
  SLEEK PORTFOLIO — DARK NAVY THEME OVERRIDE
  Solomon Thiong Garang Leek
  
  Apply this AFTER your main stylesheet.
  It converts every section to the deep navy theme
  from Skills & Vision sections, keeping footer intact.
  =====================================================
*/

/* ── DESIGN TOKENS ─────────────────────────────────── */
:root {
  --navy-900: #060d1a;
  --navy-800: #0a1628;
  --navy-700: #0e1f38;
  --navy-600: #132848;
  --navy-500: #1a3560;
  --navy-400: #1e3d6e;
  --navy-card: #0f1e35;
  --navy-card-hover: #152744;

  --orange-500: #ea580c;
  --orange-400: #f97316;
  --orange-300: #fb923c;
  --orange-200: #fed7aa;
  --orange-glow: rgba(234, 88, 12, 0.18);

  --white: #ffffff;
  --white-90: rgba(255,255,255,0.90);
  --white-70: rgba(255,255,255,0.70);
  --white-50: rgba(255,255,255,0.50);
  --white-20: rgba(255,255,255,0.20);
  --white-10: rgba(255,255,255,0.10);
  --white-06: rgba(255,255,255,0.06);
  --white-62: rgba(255,255,255,0.62);
  --white-60: rgba(255,255,255,0.60);
  --slate-400: #94a3b8;
  --slate-300: #cbd5e1;
  --slate-500: #64748b;
  --light-orange: #d95e0a;   /* desaturated orange for light mode */

  --border-subtle: rgba(255,255,255,0.08);
  --border-mid:    rgba(255,255,255,0.14);
  --border-accent: rgba(234, 88, 12, 0.35);

  --shadow-card: 0 8px 32px rgba(0,0,0,0.35);
  --shadow-hover: 0 16px 48px rgba(0,0,0,0.5);
  --shadow-orange: 0 8px 28px rgba(234,88,12,0.25);

  --radius-card: 18px;
  --radius-badge: 999px;
  --radius-icon: 12px;
}

/* ── HERO SUBTITLE ROLE PILLS ─────────────────────── */
.hero-subtitle {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 0.75rem 0 1.25rem;
}

.hero-role-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.4rem 1rem;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.14);
  color: rgba(255,255,255,0.85);
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease, transform 0.25s ease;
  cursor: default;
}

.hero-role-pill i {
  color: var(--orange-400);
  font-size: 0.78rem;
}

.hero-role-pill:hover {
  background: rgba(234,88,12,0.12);
  border-color: rgba(234,88,12,0.4);
  color: #ffffff;
  transform: translateY(-2px);
}

.hero-role-sep {
  display: inline-block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(255,255,255,0.25);
  flex-shrink: 0;
}

@media (max-width: 480px) {
  .hero-subtitle {
    gap: 0.4rem;
  }
  .hero-role-sep {
    display: none;
  }
}

/* ── GLOBAL BODY & BACKGROUND ──────────────────────── */
body {
  background: var(--navy-900) !important;
  color: var(--white-90) !important;
  position: relative;
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

/* ── NAVIGATION ────────────────────────────────────── */
nav {
  background: rgba(6,13,26,0.92) !important;
  border-bottom: 1px solid var(--border-subtle) !important;
  box-shadow: 0 4px 24px rgba(0,0,0,0.4) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
}

.nav-links a {
  color: var(--white-70) !important;
  font-weight: 500;
}

.nav-links a:hover,
.nav-links a.active-nav {
  color: var(--orange-400) !important;
}

.nav-more-toggle {
  color: var(--white-70) !important;
}

.nav-more-toggle:hover {
  color: var(--orange-400) !important;
}

.nav-more-menu {
  background: var(--navy-700) !important;
  border: 1px solid var(--border-mid) !important;
  box-shadow: 0 12px 32px rgba(0,0,0,0.5) !important;
}

.nav-more-menu a {
  color: var(--white-70) !important;
}

.nav-more-menu a:hover {
  background: var(--white-10) !important;
  color: var(--orange-400) !important;
}

/* ── HERO SECTION ──────────────────────────────────── */
.hero {
  background: linear-gradient(135deg, var(--navy-900) 0%, var(--navy-800) 60%, var(--navy-700) 100%) !important;
}

/* Trust bar → socials gap */
.hero-socials {
  margin-top: 1rem !important;
}

.hero-content h1 { color: var(--white) !important; }
.hero-content .highlight { color: var(--orange-400) !important; }
.hero-surname { color: rgba(255,255,255,0.75) !important; }
.hero-roles { color: var(--white-70) !important; }
.role-text { color: var(--orange-400) !important; border-color: var(--orange-400) !important; }
.description { color: var(--white-70) !important; max-width: 48ch; line-height: 1.75; }
.description strong { color: var(--white) !important; }

/* Badge */
.hero-badge { background: rgba(34,197,94,0.1) !important; border-color: rgba(34,197,94,0.25) !important; color: #86efac !important; }

/* Stats panel */
.hero-stats { background: rgba(255,255,255,0.04) !important; border-color: var(--border-subtle) !important; }
.hero-stat-num { color: var(--orange-400) !important; }
.hero-stat-label { color: var(--white-62) !important; }
.hero-stat-divider { background: var(--border-subtle) !important; }

/* Social icons */
.hero-social { border-color: var(--border-mid) !important; color: var(--white-50) !important; }
.hero-social:hover { border-color: var(--orange-500) !important; color: var(--orange-400) !important; background: var(--orange-glow) !important; }
.hero-social-divider { background: var(--border-mid) !important; }
.hero-resume-link { border-color: var(--border-accent) !important; color: var(--orange-400) !important; }
.hero-resume-link:hover { background: var(--orange-glow) !important; border-color: var(--orange-500) !important; }

/* Image ring */
.hero-image-ring {
  background:
    linear-gradient(var(--navy-900), var(--navy-900)) padding-box,
    conic-gradient(from 0deg, var(--orange-500) 0%, var(--orange-300) 25%, transparent 50%, var(--orange-500) 75%, var(--orange-300) 100%) border-box !important;
}
.hero-photo { border-color: rgba(234,88,12,0.3) !important; }

/* Chips */
.hero-chip { background: rgba(10,22,40,0.92) !important; border-color: var(--border-accent) !important; color: var(--white-90) !important; }
.hero-chip i { color: var(--orange-400) !important; }

/* Scroll hint */
.hero-scroll-hint { color: var(--white-20) !important; }

/* ── ALL SECTIONS — BASE DARK THEME ────────────────── */
section {
  background: var(--navy-900) !important;
  position: relative;
}

/* Alternating section depth for visual rhythm */
section:nth-child(even) {
  background: var(--navy-800) !important;
}

section:nth-child(odd) {
  background: var(--navy-900) !important;
}

/* Override specific section backgrounds */
.section-bg-white,
.section-bg-secondary,
#about {
  background: var(--navy-800) !important;
}

/* Section titles */
.section-title {
  color: var(--orange-400) !important;
}

.section-title::after {
  background: linear-gradient(90deg, var(--orange-500), var(--orange-300)) !important;
}

/* Keep skills and contact white titles (dark mode only) */
#skills .section-title,
.contact .section-title {
  color: var(--white) !important;
}
html.light-mode #skills .section-title,
html.light-mode .contact .section-title {
  color: #ea580c !important;
}

.section-subtitle {
  color: var(--white-70) !important;
}

/* ── ABOUT SECTION ─────────────────────────────────── */
/* #about background already set above */

.about-text {
  color: var(--white-70) !important;
}

.highlight-item {
  background: var(--navy-card) !important;
  border: 1px solid var(--border-mid) !important;
  box-shadow: var(--shadow-card) !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.highlight-item:hover {
  border-color: var(--border-accent) !important;
  box-shadow: var(--shadow-hover) !important;
}

.highlight-item h3,
.highlight-item p,
.highlight-item span {
  color: var(--white-90) !important;
}

.highlight-icon {
  background: linear-gradient(135deg, var(--orange-500), var(--orange-400)) !important;
  box-shadow: var(--shadow-orange) !important;
}

.about-seeking {
  background: rgba(234,88,12,0.1) !important;
  border-left: 4px solid var(--orange-500) !important;
  color: var(--white-70) !important;
}

.about-seeking i {
  color: var(--orange-400) !important;
}

/* Learning widget */
.learning-widget {
  background: var(--navy-card) !important;
  border: 1px solid var(--border-mid) !important;
  box-shadow: var(--shadow-card) !important;
}

.learning-title {
  color: var(--white-90) !important;
}

.learning-item {
  color: var(--white-70) !important;
}

.learning-item i {
  color: var(--orange-400) !important;
}

/* ── CARDS — UNIVERSAL ─────────────────────────────── */
.skill-category,
.project-card,
.award-card,
.testimonial-card,
.language-card,
.timeline-card {
  background: var(--navy-card) !important;
  border: 1px solid var(--border-mid) !important;
  box-shadow: var(--shadow-card) !important;
  border-radius: var(--radius-card) !important;
  transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease !important;
}

.skill-category:hover,
.project-card:hover,
.award-card:hover,
.testimonial-card:hover,
.language-card:hover {
  transform: translateY(-5px) !important;
  box-shadow: var(--shadow-hover) !important;
  border-color: var(--border-accent) !important;
  background: var(--navy-card-hover) !important;
}

/* Card text */
.skill-title,
.project-title,
.award-title,
.testimonial-name,
.timeline-title {
  color: var(--white-90) !important;
}

.project-description,
.award-description,
.testimonial-text,
.timeline-desc {
  color: var(--white-70) !important;
}

/* ── SKILLS GRID LAYOUT ───────────────────────────── */
.skills-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}

@media (max-width: 1024px) {
  .skills-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .skills-grid {
    grid-template-columns: 1fr;
  }
}

.skill-item {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}

/* ── SKILLS SECTION ────────────────────────────────── */
#skills {
  background: linear-gradient(135deg, var(--navy-700) 0%, var(--navy-900) 100%) !important;
}

#skills .section-subtitle {
  color: var(--white-62) !important;
}

#skills .skill-category {
  background: rgba(255,255,255,0.05) !important;
  border: 1px solid var(--border-mid) !important;
}

#skills .skill-category:hover {
  background: rgba(255,255,255,0.09) !important;
  border-color: var(--border-accent) !important;
}

#skills .skill-title {
  color: var(--white) !important;
}

#skills .skill-list {
  border-top-color: var(--border-subtle) !important;
}

#skills .skill-item {
  color: var(--white-70) !important;
  border-bottom-color: var(--border-subtle) !important;
}

#skills .skill-item::before {
  background: var(--slate-400) !important;
}

.skill-icon {
  background: linear-gradient(135deg, var(--orange-500), var(--orange-400)) !important;
  box-shadow: 0 4px 16px rgba(234,88,12,0.3) !important;
}

/* ── PROJECTS & PORTFOLIO ──────────────────────────── */
.projects-filter {
  gap: 0.75rem;
}

.filter-btn {
  background: var(--white-06) !important;
  border: 1px solid var(--border-mid) !important;
  color: var(--white-70) !important;
  border-radius: var(--radius-badge) !important;
}

.filter-btn.active,
.filter-btn:hover {
  background: var(--orange-500) !important;
  border-color: var(--orange-500) !important;
  color: var(--white) !important;
}

.tech-tag {
  background: rgba(234,88,12,0.12) !important;
  color: var(--orange-300) !important;
  border: 1px solid var(--border-accent) !important;
}

.project-overlay {
  background: linear-gradient(180deg, rgba(234,88,12,0.15) 0%, rgba(10,16,28,0.92) 100%) !important;
}

.project-link {
  background: var(--white) !important;
  color: var(--orange-500) !important;
}

/* Case study banner */
.case-study-banner {
  background: var(--navy-card) !important;
  border: 1px solid var(--border-mid) !important;
  border-left: 4px solid var(--orange-500) !important;
}

.case-study-banner-title {
  color: var(--white-90) !important;
}

.case-study-banner-desc {
  color: var(--white-70) !important;
}

.case-study-banner-btn { background: var(--orange-500) !important; color: var(--white) !important; box-shadow: var(--shadow-orange) !important; }
.case-study-banner-btn:hover { background: var(--orange-400) !important; }

/* ── AWARDS SECTION ────────────────────────────────── */
.award-badge {
  background: linear-gradient(135deg, var(--orange-500), var(--orange-400)) !important;
  box-shadow: 0 4px 18px rgba(234,88,12,0.3) !important;
}

.award-meta {
  color: var(--orange-300) !important;
}

.award-card {
  border-top: 3px solid var(--slate-400) !important;
}

/* ── LEADERSHIP CARDS ──────────────────────────────── */
.leadership-card,
[class*="leadership"] .project-card {
  background: var(--navy-card) !important;
  border: 1px solid var(--border-mid) !important;
}

#leadership .project-title {
  color: var(--orange-400) !important;
}

/* General white cards in light sections — override to dark */
.about-highlights .highlight-item,
section > .container > div > .award-card,
section > .container > .awards-grid > .award-card {
  background: var(--navy-card) !important;
  border: 1px solid var(--border-mid) !important;
}

/* ── JOURNEY / TIMELINE ────────────────────────────── */
.timeline::before {
  background: linear-gradient(180deg, var(--slate-400), var(--slate-300)) !important;
}

.timeline-dot {
  background: var(--slate-400) !important;
  border-color: var(--navy-900) !important;
  box-shadow: 0 0 0 3px var(--slate-400) !important;
}

.timeline-item--future .timeline-dot {
  background: var(--slate-300) !important;
  box-shadow: 0 0 0 3px var(--slate-300) !important;
}

.timeline-date {
  background: linear-gradient(135deg, var(--navy-600), var(--navy-500)) !important;
  border: 1px solid var(--border-mid) !important;
  color: var(--white) !important;
}

/* Active timeline custom styles removed to restore original look */

/* .timeline-card background/border/shadow already set in CARDS — UNIVERSAL above */

.timeline-card:hover {
  border-color: var(--border-accent) !important;
  box-shadow: var(--shadow-hover) !important;
}

/* .timeline-title and .timeline-desc already set in CARDS — UNIVERSAL above */

.timeline-tag {
  background: rgba(234,88,12,0.15) !important;
  color: var(--orange-300) !important;
}

.timeline-tag--future {
  background: rgba(251,146,60,0.15) !important;
  color: var(--orange-200) !important;
}

.timeline-quote {
  background: rgba(234,88,12,0.08) !important;
  border-left-color: var(--orange-500) !important;
  color: var(--white-70) !important;
}

.timeline-quote-author {
  color: var(--white-62) !important;
}

/* ── COMMUNITY SERVICE ─────────────────────────────── */
.community-stat,
[class*="community"] .highlight-item {
  background: var(--navy-card) !important;
  border: 1px solid var(--border-mid) !important;
}

/* Impact stat rows */
section .highlight-item {
  background: var(--navy-card) !important;
  border: 1px solid var(--border-mid) !important;
}

section .highlight-item h3 {
  color: var(--white-90) !important;
}

section .highlight-item p {
  color: var(--white-70) !important;
}

/* ── TESTIMONIALS ──────────────────────────────────── */
.testimonial-quote i {
  color: var(--orange-400) !important;
  opacity: 0.5;
}

.testimonial-author {
  border-top-color: var(--border-subtle) !important;
}

.testimonial-avatar {
  background: linear-gradient(135deg, var(--orange-500), var(--orange-400)) !important;
}

.testimonial-name {
  color: var(--white-90) !important;
}

.testimonial-role {
  color: var(--white-62) !important;
}

/* ── LANGUAGES ─────────────────────────────────────── */
.language-flag {
  background: linear-gradient(135deg, var(--orange-500), var(--orange-400)) !important;
}

.language-name {
  color: var(--white-90) !important;
}

.language-bar {
  background: var(--white-10) !important;
}

.language-fill {
  background: linear-gradient(90deg, var(--slate-400), var(--slate-300)) !important;
}

.level-native  { background: rgba(22,163,74,0.15) !important; color: #86efac !important; }
.level-fluent  { background: rgba(234,88,12,0.15) !important; color: var(--orange-300) !important; }
.level-conversational { background: rgba(251,191,36,0.12) !important; color: #fde68a !important; }

/* ── VISION SECTION ────────────────────────────────── */
.contact {
  background: linear-gradient(135deg, var(--navy-800) 0%, var(--navy-700) 54%, var(--navy-800) 100%) !important;
}

.contact .section-title {
  color: var(--white) !important;
}

.contact .section-subtitle {
  color: var(--white-62) !important;
}

.contact-heading {
  color: var(--white) !important;
}

.contact-muted {
  color: var(--white-70) !important;
}

.contact-highlight-card {
  background: var(--white-06) !important;
  border: 1px solid var(--border-mid) !important;
}

.contact-highlight-card h3,
.contact-highlight-card p {
  color: var(--white-90) !important;
}

.contact-icon {
  background: linear-gradient(135deg, var(--orange-500), var(--orange-400)) !important;
  box-shadow: var(--shadow-orange) !important;
}

.contact-link {
  color: var(--white-70) !important;
}

.contact-link:hover {
  color: var(--orange-300) !important;
}

/* Contact form */
.contact-form {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid var(--border-mid) !important;
  border-radius: 18px !important;
}

.contact-form label {
  color: var(--white-70) !important;
}

.form-group input,
.form-group textarea {
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid var(--border-mid) !important;
  color: var(--white) !important;
}

.form-group input:focus,
.form-group textarea:focus {
  border-color: var(--orange-500) !important;
  background: rgba(255,255,255,0.09) !important;
  outline: none;
  box-shadow: 0 0 0 3px rgba(234,88,12,0.15) !important;
}

.form-group input::placeholder,
.form-group textarea::placeholder {
  color: var(--white-30, rgba(255,255,255,0.3)) !important;
}

/* Social hub */
.social-hub {
  background: var(--white-06) !important;
  border: 1px solid var(--border-mid) !important;
}

.social-hub h3 {
  color: var(--white-90) !important;
}

.social-hub-note {
  color: var(--white-50) !important;
}

/* Contact social icons */
/* .contact-follow-label and .contact-follow-sub defined in VISION SECTION above */

.contact-social-icon:hover {
  border-color: var(--orange-400) !important;
  box-shadow: 0 8px 24px rgba(234,88,12,0.3) !important;
  transform: translateY(-3px) scale(1.08) !important;
}

/* ── BUTTONS ────────────────────────────────────────── */
.btn-primary {
  background: linear-gradient(135deg, var(--orange-500), var(--orange-400)) !important;
  border: none !important;
  color: var(--white) !important;
  box-shadow: 0 8px 24px rgba(234,88,12,0.3) !important;
}

.btn-primary:hover {
  background: linear-gradient(135deg, var(--orange-500), var(--orange-300)) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 12px 32px rgba(234,88,12,0.4) !important;
}

.btn-secondary {
  background: var(--white-10) !important;
  border: 1px solid var(--border-mid) !important;
  color: var(--white-90) !important;
}

.btn-secondary:hover {
  background: var(--white-20) !important;
  border-color: var(--orange-500) !important;
  color: var(--white) !important;
}

/* Case study button */
.case-study-banner-btn {
  background: var(--orange-500) !important;
  color: var(--white) !important;
  box-shadow: var(--shadow-orange) !important;
}

.case-study-banner-btn:hover {
  background: var(--orange-400) !important;
}

/* ── SECTION HEADINGS INLINE ───────────────────────── */
.section-heading-primary {
  color: var(--orange-400) !important;
}

h2, h3, h4 {
  color: var(--white-90) !important;
}

p {
  color: var(--white-70) !important;
}

a {
  color: var(--orange-400) !important;
}

a:hover {
  color: var(--orange-300) !important;
}

/* ── SCROLL PROGRESS BAR ───────────────────────────── */
.scroll-progress {
  background: linear-gradient(90deg, var(--orange-500), var(--orange-300)) !important;
}

/* ── FAB ────────────────────────────────────────────── */
.fab {
  background: linear-gradient(135deg, var(--orange-500), var(--orange-400)) !important;
  box-shadow: 0 8px 24px rgba(234,88,12,0.4) !important;
}

/* ── LOADING SCREEN ────────────────────────────────── */
.loading {
  background: var(--navy-900) !important;
}

/* Center and layout improvements for Academic Excellence section */
#academics .section-header {
  text-align: center !important;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

#academics .skills-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.25rem;
  justify-items: center;
  align-items: start;
  max-width: 1100px;
  margin: 0 auto;
  padding: 1rem 1rem 2rem;
}

#academics .skill-category {
  width: 100%;
  max-width: 420px;
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

#academics .skill-category-header {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

#academics .skill-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

#academics .skill-item {
  color: var(--white-70) !important;
  white-space: normal;
}

@media (max-width: 600px) {
  #academics .skills-grid {
    grid-template-columns: 1fr;
    padding: 0.5rem 0 1rem;
  }
}

/* Active timeline styling (visible in dark & light themes) */
.timeline-item--active .timeline-dot {
  background: linear-gradient(135deg, var(--orange-500), var(--orange-300)) !important;
  box-shadow: 0 0 0 6px rgba(234,88,12,0.08) !important;
  border-color: transparent !important;
}

.timeline-item--active .timeline-date {
  background: linear-gradient(90deg, rgba(234,88,12,0.12), rgba(234,88,12,0.06)) !important;
  color: var(--white) !important;
  border-color: rgba(234,88,12,0.12) !important;
}

.timeline-tag--active {
  background: rgba(234,88,12,0.10) !important;
  color: var(--orange-300) !important;
  border: 1px solid rgba(234,88,12,0.12) !important;
  font-weight: 600 !important;
  padding: 0.22rem 0.5rem !important;
  border-radius: 999px !important;
  display: inline-block !important;
}

/* Light mode overrides so active styling remains clear */
html.light-mode .timeline-item--active .timeline-dot {
  background: #ea580c !important;
  box-shadow: 0 0 0 6px rgba(234,88,12,0.12) !important;
}

html.light-mode .timeline-item--active .timeline-date {
  background: linear-gradient(90deg, #ea580c, #fb923c) !important;
  color: #ffffff !important;
  border-color: rgba(234,88,12,0.18) !important;
}

html.light-mode .timeline-tag--active {
  background: rgba(234,88,12,0.14) !important;
  color: #ea580c !important;
  border-color: rgba(234,88,12,0.18) !important;
}

/* Academics & Overview customizations removed to restore original layout */


.spinner {
  border-color: var(--border-mid) !important;
  border-top-color: var(--orange-500) !important;
}

/* ── MOBILE STICKY CTA ─────────────────────────────── */
.mobile-sticky-cta {
  background: linear-gradient(135deg, var(--orange-500), var(--orange-400)) !important;
  box-shadow: 0 8px 32px rgba(234,88,12,0.4) !important;
}

/* ── FOOTER — DO NOT CHANGE ────────────────────────── */
/*
  Footer styles are intentionally NOT overridden here.
  The footer keeps its original dark navy styling.
  Only apply changes below this comment if needed.
*/
/* footer background is set in the ── FOOTER ── block below */

/* ── SECTION DIVIDERS ──────────────────────────────── */
.section-bg-secondary::before {
  background: linear-gradient(90deg, transparent, var(--border-subtle), transparent) !important;
}

/* ── RESPONSIVE ADJUSTMENTS ────────────────────────── */
@media (max-width: 768px) {
  .nav-links {
    background: rgba(6,13,26,0.75) !important;
    border-left: 1px solid var(--border-mid) !important;
    box-shadow: -8px 0 32px rgba(0,0,0,0.5) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
  }

  .nav-links a, .nav-more-trigger, .nav-back-btn {
    color: var(--white-70) !important;
  }

  .nav-links a:hover, .nav-links a.active-nav,
  .nav-more-trigger:hover, .nav-back-btn:hover {
    background: var(--white-06) !important;
    color: var(--orange-400) !important;
  }

  .nav-back-btn { color: var(--orange-400) !important; }

  .nav-more-trigger { color: var(--white-70) !important; }
  .nav-more-trigger:hover { background: var(--white-06) !important; color: var(--orange-400) !important; }

  /* Submenu links — no border override on mobile */
  .nav-more-menu {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
  }
}

/* ── ORANGE ACCENT LINKS ────────────────────────────── */
.award-meta,
.timeline-tag,
.mission-card--primary .mission-link,
.contact-link:hover,
.hero-roles {
  color: var(--orange-400) !important;
}

/* ── BADGE OVERRIDES ───────────────────────────────── */
.availability-badge {
  color: #86efac !important;
}

.mission-card--primary .mission-badge {
  background: rgba(234,88,12,0.15) !important;
  color: var(--orange-300) !important;
}

.mission-card--secondary .mission-badge {
  background: var(--white-10) !important;
  color: var(--white-50) !important;
}

/* ── ORANGE HIGHLIGHT TEXT ─────────────────────────── */
strong,
b {
  color: var(--white-90) !important;
  font-weight: 700;
}

/* Orange-colored headings for named sections */
[class*="Digital Literacy"],
[class*="Youth Mentor"],
.about-content h3 {
  color: var(--orange-400) !important;
}

/* ── CONTACT SECTION ───────────────────────────────── */
/* Labels — bold and fully visible */
.contact-item h3 {
  color: var(--white-90) !important;
  font-weight: 700 !important;
  opacity: 1 !important;
  text-transform: uppercase;
  font-size: 0.75rem !important;
  letter-spacing: 0.06em;
}
.contact-item p, .contact-item a { color: var(--white-70) !important; }
.contact-follow { background: var(--navy-card) !important; border-color: var(--border-mid) !important; }

/* Contact icon brand colours */
.contact-icon--phone    { background: linear-gradient(135deg, #22c55e, #16a34a) !important; }
.contact-icon--email    { background: linear-gradient(135deg, #ea580c, #f97316) !important; }
.contact-icon--github   { background: linear-gradient(135deg, #24292e, #3d444d) !important; }
.contact-icon--linkedin { background: linear-gradient(135deg, #0A66C2, #0077b5) !important; }

/* ── FOOTER ────────────────────────────────────────── */
footer { background: var(--navy-800) !important; border-top: 1px solid var(--border-mid) !important; }
.footer-tagline { color: var(--orange-300) !important; font-weight: 600; }
.footer-bio { color: var(--white-90) !important; }
.footer-links-title { color: var(--orange-400) !important; font-weight: 700; letter-spacing: 0.04em; }
.footer-logo .logo-text,
.footer-brand .logo-text { color: var(--orange-400) !important; }
.footer-links-list li a { color: var(--white-90) !important; }
.footer-links-list li a:hover { color: var(--orange-400) !important; }
.footer-divider { background: var(--border-mid) !important; }
.footer-copy { color: var(--white-70) !important; }
.footer-top-link { color: var(--white-90) !important; font-weight: 600; }
.footer-top-link:hover { color: var(--orange-400) !important; }

/* ── CODE PREVIEW ──────────────────────────────────── */
.project-image--code { background: var(--navy-700) !important; }
.project-code-preview { color: var(--white-50) !important; }

/* Better syntax highlighting in code preview */
.project-image--code .code-tag  { color: #7dd3fc !important; }  /* blue — tags/labels */
.project-image--code .code-attr { color: #86efac !important; }  /* green — functions/keys */
.project-image--code .code-val  { color: #fca5a5 !important; }  /* red/pink — values */

/* ── PROJECTS STATS BAR ────────────────────────────── */
.projects-stats-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--white-06);
  border: 1px solid var(--border-mid);
  border-radius: 14px;
  padding: 1rem 2rem;
  margin-bottom: 2rem;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.projects-stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 1.5rem;
}
.projects-stat-num {
  font-family: 'Sora', sans-serif;
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--orange-400);
  line-height: 1;
}
.projects-stat-label {
  font-size: 0.72rem;
  color: var(--white-50);
  font-weight: 500;
  margin-top: 0.2rem;
  white-space: nowrap;
}
.projects-stat-divider {
  width: 1px;
  height: 2rem;
  background: var(--border-mid);
}

/* ── FILTER COUNT BADGE ────────────────────────────── */
.filter-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.12);
  color: inherit;
  font-size: 0.65rem;
  font-weight: 700;
  min-width: 1.2rem;
  height: 1.2rem;
  border-radius: 999px;
  padding: 0 0.3rem;
  margin-left: 0.25rem;
  transition: background 0.2s, opacity 0.15s;
}
.filter-btn.active .filter-count,
.filter-btn:hover .filter-count {
  background: rgba(255,255,255,0.25) !important;
}

/* ── PROJECT META ROW ──────────────────────────────── */
.project-meta-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 0.5rem;
}

/* ── CATEGORY CHIP ─────────────────────────────────── */
.project-category-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.65rem;
  font-weight: 700;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  background: rgba(99,102,241,0.12);
  border: 1px solid rgba(99,102,241,0.25);
  color: #a5b4fc;
  letter-spacing: 0.02em;
}

/* ── FEATURED BADGE ────────────────────────────────── */
.project-featured-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.65rem;
  font-weight: 700;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  background: rgba(234,88,12,0.12);
  border: 1px solid rgba(234,88,12,0.3);
  color: var(--orange-400);
}
.project-featured-badge i { font-size: 0.55rem; }

/* ── CASE STUDY BANNER ─────────────────────────────── */
/* (defined above near projects section — kept here for specificity) */

/* ── CONTACT VISION CARDS ──────────────────────────── */
/* (contact-heading, contact-muted defined in VISION SECTION above) */

/* ── SOCIAL ICON BRAND COLOURS ─────────────────────── */
.contact-social-icon {
  transition: color 0.2s, background 0.2s, border-color 0.2s, transform 0.2s !important;
}
/* :hover merged into Contact social icons block above */

/* LinkedIn — #0A66C2 */
.contact-social-icon--linkedin {
  color: #0A66C2 !important;
  border-color: rgba(10,102,194,0.35) !important;
}
.contact-social-icon--linkedin:hover {
  background: #0A66C2 !important;
  color: #fff !important;
  border-color: #0A66C2 !important;
}

/* GitHub — dark on dark, dark on light */
.contact-social-icon--github {
  color: #e6edf3 !important;
  border-color: rgba(230,237,243,0.25) !important;
}
.contact-social-icon--github:hover {
  background: #24292e !important;
  color: #fff !important;
  border-color: #24292e !important;
}
html.light-mode .contact-social-icon--github {
  color: #24292e !important;
  border-color: rgba(36,41,46,0.3) !important;
}
html.light-mode .contact-social-icon--github:hover {
  background: #24292e !important;
  color: #fff !important;
}

/* Email — orange */
.contact-social-icon--email {
  color: var(--orange-400) !important;
  border-color: var(--border-accent) !important;
}
.contact-social-icon--email:hover {
  background: var(--orange-500) !important;
  color: #fff !important;
  border-color: var(--orange-500) !important;
}

/* X / Twitter */
.contact-social-icon--twitter {
  color: #e7e9ea !important;
  border-color: rgba(231,233,234,0.25) !important;
}
.contact-social-icon--twitter:hover {
  background: #000 !important;
  color: #fff !important;
  border-color: #555 !important;
}
html.light-mode .contact-social-icon--twitter {
  color: #0f172a !important;
  border-color: rgba(0,0,0,0.25) !important;
}
html.light-mode .contact-social-icon--twitter:hover {
  background: #000 !important;
  color: #fff !important;
}

/* Instagram — pink/purple */
.contact-social-icon--instagram {
  color: #E1306C !important;
  border-color: rgba(225,48,108,0.35) !important;
}
.contact-social-icon--instagram:hover {
  background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%) !important;
  color: #fff !important;
  border-color: #d6249f !important;
}

/* Facebook — #1877F2 */
.contact-social-icon--facebook {
  color: #1877F2 !important;
  border-color: rgba(24,119,242,0.35) !important;
}
.contact-social-icon--facebook:hover {
  background: #1877F2 !important;
  color: #fff !important;
  border-color: #1877F2 !important;
}

/* TikTok — cyan */
.contact-social-icon--tiktok {
  color: #69C9D0 !important;
  border-color: rgba(105,201,208,0.35) !important;
}
.contact-social-icon--tiktok:hover {
  background: #010101 !important;
  color: #69C9D0 !important;
  border-color: #69C9D0 !important;
  box-shadow: 2px 0 0 #69C9D0, -2px 0 0 #EE1D52 !important;
}

/* ── SECTION WAVE DIVIDERS ─────────────────────────── */
/* Wave fill matches the section above it (hero = navy-900) */
#about .section-wave path { fill: var(--navy-900); }

/* ── ACTIVE NAV — stronger highlight ──────────────── */
.nav-links a.active-nav {
  color: var(--orange-400) !important;
  background: rgba(234,88,12,0.12) !important;
  border-radius: 6px;
  font-weight: 700 !important;
  box-shadow: inset 0 -2px 0 var(--orange-500);
}

/* ── FAB — more prominent ──────────────────────────── */
.fab {
  background: linear-gradient(135deg, var(--orange-500), var(--orange-400)) !important;
  box-shadow: 0 8px 28px rgba(234,88,12,0.45) !important;
  border-radius: 14px !important;
}
.fab:hover { transform: translateY(-3px) scale(1.05) !important; }

/* ── ABOUT PHOTO ───────────────────────────────────── */
.about-photo { border-color: rgba(234,88,12,0.3) !important; }

/* ── THEME TOGGLE BUTTON ───────────────────────────── */
.theme-toggle {
  border-color: var(--border-mid) !important;
  color: var(--white-70) !important;
  background: rgba(255,255,255,0.04) !important;
}
.theme-toggle:hover {
  border-color: var(--orange-500) !important;
  color: var(--orange-400) !important;
  background: var(--orange-glow) !important;
}

/* Light mode — make toggle visible on white background */
html.light-mode .theme-toggle {
  border-color: rgba(0,0,0,0.15) !important;
  color: #334155 !important;
  background: rgba(0,0,0,0.05) !important;
}
html.light-mode .theme-toggle:hover {
  border-color: #ea580c !important;
  color: #ea580c !important;
  background: rgba(234,88,12,0.08) !important;
}

/* ══════════════════════════════════════════════════════
   LIGHT MODE — FINAL OVERRIDES
   These must be at the end of the file to beat all the
   !important dark-theme rules above.
   ══════════════════════════════════════════════════════ */

/* Global text */
html.light-mode *                        { color: inherit; }
html.light-mode body                     { color: #0f172a !important; }
html.light-mode p                        { color: #334155 !important; }
html.light-mode h1,html.light-mode h2,
html.light-mode h3,html.light-mode h4,
html.light-mode h5,html.light-mode h6   { color: #0f172a !important; }
html.light-mode strong,html.light-mode b { color: #0f172a !important; }
html.light-mode span                     { color: inherit !important; }
html.light-mode li                       { color: #334155 !important; }

/* Nav */
html.light-mode nav                      { background: rgba(248,250,252,0.97) !important; border-bottom: 1px solid rgba(0,0,0,0.1) !important; }
html.light-mode .logo-icon               { background: linear-gradient(135deg, #ea580c, #f97316) !important; color: #ffffff !important; }
html.light-mode .logo-text               { color: #0f172a !important; }
html.light-mode .nav-links a             { color: #334155 !important; }
html.light-mode .nav-links a:hover       { color: #ea580c !important; }
html.light-mode .nav-links a.active-nav  { color: #ea580c !important; background: rgba(234,88,12,0.1) !important; }
html.light-mode .nav-more-toggle         { color: #334155 !important; }
html.light-mode .nav-more-menu           { background: #fff !important; }
html.light-mode .nav-more-menu a         { color: #334155 !important; }
html.light-mode .nav-drawer-title        { color: #0f172a !important; }
html.light-mode .nav-main-item > a,
html.light-mode .nav-more-trigger,
html.light-mode .nav-back-btn            { color: #334155 !important; }
html.light-mode .nav-links.active        { background: rgba(248,250,252,0.98) !important; }

/* Sections */
html.light-mode section                  { background: #fafaf9 !important; }
html.light-mode section:nth-child(even),
html.light-mode .section-bg-secondary,
html.light-mode .section-bg-white,
html.light-mode #about                   { background: #f1f5f9 !important; }
html.light-mode .section-title           { color: #ea580c !important; }
html.light-mode .section-subtitle        { color: #475569 !important; }

/* Cards — all white with border */
html.light-mode .skill-category,
html.light-mode .project-card,
html.light-mode .award-card,
html.light-mode .testimonial-card,
html.light-mode .highlight-item,
html.light-mode .timeline-card,
html.light-mode .learning-widget,
html.light-mode .contact-form,
html.light-mode .contact-follow,
html.light-mode .contact-highlight-card  { background: #ffffff !important; border-color: rgba(0,0,0,0.1) !important; box-shadow: 0 2px 12px rgba(0,0,0,0.06) !important; }

/* Card text */
html.light-mode .skill-title,
html.light-mode .project-title,
html.light-mode .award-title,
html.light-mode .timeline-title,
html.light-mode .testimonial-name,
html.light-mode .highlight-item h3,
html.light-mode .contact-heading         { color: #0f172a !important; }

html.light-mode .skill-item,
html.light-mode .project-description,
html.light-mode .award-description,
html.light-mode .timeline-desc,
html.light-mode .testimonial-text,
html.light-mode .highlight-item p,
html.light-mode .contact-muted,
html.light-mode .learning-item,
html.light-mode .about-text p            { color: #334155 !important; }

html.light-mode .award-meta,
html.light-mode .timeline-tag,
html.light-mode .testimonial-role,
html.light-mode .skill-bar-pct           { color: #64748b !important; }

/* Skill bars */
html.light-mode .skill-bar-track         { background: rgba(0,0,0,0.08) !important; }
html.light-mode .skill-bar-name          { color: #0f172a !important; }

/* Hero */
html.light-mode .hero                    { background: linear-gradient(135deg,#fafaf9 0%,#f1f5f9 60%,#e2e8f0 100%) !important; }
html.light-mode .hero-title              { color: #0f172a !important; }
html.light-mode .hero-surname            { color: #64748b !important; }
html.light-mode .description             { color: #334155 !important; }
html.light-mode .hero-stat-num           { color: #ea580c !important; }
html.light-mode .hero-stat-label         { color: #64748b !important; }
html.light-mode .hero-stats              { background: rgba(0,0,0,0.04) !important; border-color: rgba(0,0,0,0.1) !important; }
html.light-mode .hero-social             { border-color: rgba(0,0,0,0.12) !important; color: #475569 !important; }
html.light-mode .hero-badge              { background: rgba(34,197,94,0.1) !important; border-color: rgba(34,197,94,0.3) !important; color: #16a34a !important; }
html.light-mode .hero-resume-link        { color: #ea580c !important; border-color: rgba(234,88,12,0.4) !important; }
html.light-mode .hero-scroll-hint        { color: #94a3b8 !important; }

/* Contact form */
html.light-mode .form-group label        { color: #334155 !important; }
html.light-mode .form-group input,
html.light-mode .form-group textarea     { background: #f1f5f9 !important; border-color: rgba(0,0,0,0.12) !important; color: #0f172a !important; }
html.light-mode .form-group input::placeholder,
html.light-mode .form-group textarea::placeholder { color: #94a3b8 !important; }
html.light-mode .contact-item h3         { color: #64748b !important; }
html.light-mode .contact-item p,
html.light-mode .contact-link            { color: #334155 !important; }
html.light-mode .contact-follow-label    { color: #0f172a !important; }
html.light-mode .contact-follow-sub      { color: #64748b !important; }
html.light-mode .contact-social-icon     { border-color: rgba(0,0,0,0.12) !important; }
/* Keep brand colours visible on white background */
html.light-mode .contact-social-icon--linkedin  { color: #0A66C2 !important; border-color: rgba(10,102,194,0.3) !important; }
html.light-mode .contact-social-icon--instagram { color: #E1306C !important; border-color: rgba(225,48,108,0.3) !important; }
html.light-mode .contact-social-icon--facebook  { color: #1877F2 !important; border-color: rgba(24,119,242,0.3) !important; }
html.light-mode .contact-social-icon--tiktok    { color: #010101 !important; border-color: rgba(0,0,0,0.2) !important; }
html.light-mode .contact-social-icon--email     { color: #ea580c !important; border-color: rgba(234,88,12,0.3) !important; }

/* Timeline */
html.light-mode .timeline-date           { background: #f1f5f9 !important; border-color: rgba(0,0,0,0.1) !important; color: #0f172a !important; }
html.light-mode .timeline-quote          { background: rgba(234,88,12,0.05) !important; color: #334155 !important; }
html.light-mode .timeline-quote-author   { color: #64748b !important; }

/* About seeking */
html.light-mode .about-seeking           { background: rgba(234,88,12,0.06) !important; border-left-color: #ea580c !important; color: #334155 !important; }

/* Filter buttons */
html.light-mode .filter-btn              { background: rgba(0,0,0,0.05) !important; border-color: rgba(0,0,0,0.1) !important; color: #334155 !important; }
html.light-mode .filter-btn.active,
html.light-mode .filter-btn:hover        { background: #ea580c !important; color: #fff !important; border-color: #ea580c !important; }

/* Tech tags */
html.light-mode .tech-tag                { background: rgba(234,88,12,0.08) !important; color: #c2410c !important; border-color: rgba(234,88,12,0.2) !important; }

/* Footer stays dark */
html.light-mode footer                   { background: #1e293b !important; color: rgba(255,255,255,0.8) !important; }
html.light-mode footer *                 { color: inherit !important; }
html.light-mode footer h1,
html.light-mode footer h2,
html.light-mode footer h3,
html.light-mode footer h4,
html.light-mode footer p,
html.light-mode footer span,
html.light-mode footer li               { color: inherit !important; }
/* Footer titles — orange, must come after the wildcard rule */
html.light-mode footer .footer-links-title,
footer .footer-links-title              { color: #f97316 !important; opacity: 1 !important; }
/* Footer name — orange */
html.light-mode footer .footer-logo .logo-text,
html.light-mode footer .footer-brand .logo-text,
footer .footer-logo .logo-text,
footer .footer-brand .logo-text         { color: #f97316 !important; opacity: 1 !important; }
/* Footer tagline, bio, links — bright white */
footer .footer-tagline                  { color: #fb923c !important; opacity: 1 !important; }
footer .footer-bio                      { color: rgba(255,255,255,0.85) !important; opacity: 1 !important; }
footer .footer-links-list li a          { color: rgba(255,255,255,0.85) !important; opacity: 1 !important; }
footer .footer-links-list li a:hover    { color: #f97316 !important; }
footer .footer-copy                     { color: rgba(255,255,255,0.7) !important; opacity: 1 !important; }
footer .footer-top-link                 { color: rgba(255,255,255,0.85) !important; opacity: 1 !important; }
footer .footer-top-link:hover           { color: #f97316 !important; }
html.light-mode .footer-brand .logo-text,
html.light-mode .footer-logo .logo-text { color: #ffffff !important; }
html.light-mode .footer-tagline,
html.light-mode .footer-bio              { color: rgba(255,255,255,0.55) !important; }
html.light-mode .footer-links-title      { color: rgba(255,255,255,0.4) !important; }
html.light-mode .footer-links-list li a  { color: rgba(255,255,255,0.65) !important; }
html.light-mode .footer-copy             { color: rgba(255,255,255,0.35) !important; }
html.light-mode .footer-top-link         { color: rgba(255,255,255,0.5) !important; }
html.light-mode .footer-divider          { background: rgba(255,255,255,0.1) !important; }

/* ── Missing section backgrounds ── */
html.light-mode #skills                  { background: #f1f5f9 !important; }
html.light-mode .contact,
html.light-mode #contact                 { background: #f1f5f9 !important; }
html.light-mode #about                   { background: #f1f5f9 !important; }
html.light-mode .section-bg-white        { background: #ffffff !important; }
html.light-mode .section-bg-secondary    { background: #f1f5f9 !important; }
html.light-mode section:nth-child(odd)   { background: #fafaf9 !important; }
html.light-mode section:nth-child(even)  { background: #f1f5f9 !important; }

/* ── All card/widget dark backgrounds ── */
html.light-mode .skill-category,
html.light-mode .project-card,
html.light-mode .award-card,
html.light-mode .testimonial-card,
html.light-mode .highlight-item,
html.light-mode section .highlight-item,
html.light-mode [class*="community"] .highlight-item,
html.light-mode .timeline-card,
html.light-mode .learning-widget,
html.light-mode .language-card,
html.light-mode .contact-form,
html.light-mode .contact-follow,
html.light-mode .contact-highlight-card,
html.light-mode .case-study-banner,
html.light-mode [class*="leadership"] .project-card,
html.light-mode section > .container > div > .award-card,
html.light-mode section > .container > .awards-grid > .award-card { background: #ffffff !important; border-color: rgba(0,0,0,0.1) !important; box-shadow: 0 2px 12px rgba(0,0,0,0.06) !important; }

/* ── Timeline date pill ── */
html.light-mode .timeline-date           { background: #e2e8f0 !important; border-color: rgba(0,0,0,0.1) !important; color: #0f172a !important; }

/* ── Skills section specific ── */
html.light-mode #skills .skill-category  { background: #ffffff !important; border-color: rgba(0,0,0,0.1) !important; }
html.light-mode #skills .section-subtitle { color: #475569 !important; }
html.light-mode #skills .skill-title     { color: #0f172a !important; }
html.light-mode #skills .skill-list      { border-top-color: rgba(0,0,0,0.08) !important; }
html.light-mode #skills .skill-item      { color: #334155 !important; border-bottom-color: rgba(0,0,0,0.06) !important; }

/* ── Contact section specific ── */
html.light-mode .contact .section-title  { color: #ea580c !important; }
html.light-mode .contact .section-subtitle { color: #475569 !important; }
html.light-mode .contact-heading         { color: #0f172a !important; }
html.light-mode .contact-muted           { color: #334155 !important; }

/* ── Loading screen ── */
html.light-mode .loading                 { background: #fafaf9 !important; }

/* ── Code preview ── */
html.light-mode .project-image--code     { background: #1e293b !important; }

/* ── Projects stats bar & chips ── */
html.light-mode .projects-stats-bar      { background: #f1f5f9 !important; border-color: rgba(0,0,0,0.08) !important; }
html.light-mode .projects-stat-label     { color: #64748b !important; }
html.light-mode .projects-stat-divider   { background: rgba(0,0,0,0.1) !important; }
html.light-mode .project-category-chip   { background: rgba(99,102,241,0.08) !important; border-color: rgba(99,102,241,0.2) !important; color: #6366f1 !important; }
html.light-mode .project-featured-badge  { background: rgba(234,88,12,0.08) !important; border-color: rgba(234,88,12,0.2) !important; }
html.light-mode .filter-count            { background: rgba(0,0,0,0.1) !important; }

/* ── Nav more menu ── */
html.light-mode .nav-more-menu           { background: #ffffff !important; border-color: rgba(0,0,0,0.1) !important; box-shadow: 0 8px 24px rgba(0,0,0,0.12) !important; }

/* ── GITHUB WIDGET ─────────────────────────────────── */
.github-widget {
  background: var(--navy-card) !important;
  border: 1px solid var(--border-mid) !important;
}
.github-widget__icon { color: #e6edf3 !important; }
.github-widget__title { color: var(--white-90) !important; }
.github-widget__link { color: var(--orange-400) !important; }
.github-widget__link:hover { color: var(--orange-300) !important; }
.github-widget__stat { color: var(--white-70) !important; }
.github-widget__stat i { color: var(--orange-400) !important; }
.github-widget__cta {
  background: rgba(230,237,243,0.08) !important;
  border: 1px solid rgba(230,237,243,0.15) !important;
  color: var(--white-90) !important;
}
.github-widget__cta:hover { background: rgba(230,237,243,0.14) !important; }

/* Light mode */
html.light-mode .github-widget { background: #ffffff !important; border-color: rgba(0,0,0,0.1) !important; }
html.light-mode .github-widget__icon { color: #24292e !important; }
html.light-mode .github-widget__title { color: #0f172a !important; }
html.light-mode .github-widget__stat { color: #475569 !important; }
html.light-mode .github-widget__stat i { color: #ea580c !important; }
html.light-mode .github-widget__cta { background: #f1f5f9 !important; border-color: rgba(0,0,0,0.1) !important; color: #0f172a !important; }
html.light-mode .github-widget__cta:hover { background: #e2e8f0 !important; }

/* ── HERO CTA BUTTONS — always readable ───────────────── */
html.light-mode .btn-primary,
html.light-mode .btn { color: #ffffff !important; }
html.light-mode .btn-secondary { color: #0f172a !important; background: rgba(0,0,0,0.06) !important; border-color: rgba(0,0,0,0.15) !important; }
html.light-mode .btn-secondary:hover { background: rgba(0,0,0,0.1) !important; border-color: #ea580c !important; color: #ea580c !important; }

/* ── SECTION GRID PATTERN ──────────────────────────────
   Same subtle grid as the hero, applied to all sections.
   Uses ::after so it doesn't conflict with existing ::before.
   ─────────────────────────────────────────────────────── */
section {
  position: relative;
  overflow: hidden;
}
section::after {
  content: '';
  position: absolute; inset: 0;
  pointer-events: none; z-index: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.018) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse 90% 90% at 50% 50%, black 20%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 90% 90% at 50% 50%, black 20%, transparent 100%);
}

/* Make sure section content sits above the grid */
section > * { position: relative; z-index: 1; }

/* Slightly more visible on alternating sections for rhythm */
section:nth-child(even)::after {
  background-image:
    linear-gradient(rgba(255,255,255,0.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.022) 1px, transparent 1px);
  background-size: 60px 60px;
}

/* Light mode — use dark lines instead of white */
html.light-mode section::after {
  background-image:
    linear-gradient(rgba(0,0,0,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,0.04) 1px, transparent 1px) !important;
}
html.light-mode section:nth-child(even)::after {
  background-image:
    linear-gradient(rgba(0,0,0,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,0.05) 1px, transparent 1px) !important;
}

/* ══════════════════════════════════════════════════════
   VISUAL ENHANCEMENTS
   ══════════════════════════════════════════════════════ */

/* ── 1. FLOATING ACCENT ORBS removed ─────────────────── */

/* ── 2. SECTION TITLE — gradient underline ────────────── */
.section-title::after {
  background: linear-gradient(90deg, var(--orange-500), var(--orange-300), transparent) !important;
  width: 80px !important;
  height: 3px !important;
}

/* ── 3. CARD HOVER GLOW ───────────────────────────────── */
.skill-category:hover,
.project-card:hover,
.award-card:hover,
.testimonial-card:hover,
.timeline-card:hover {
  box-shadow:
    0 16px 48px rgba(0,0,0,0.5),
    0 0 0 1px rgba(234,88,12,0.2),
    0 0 20px rgba(234,88,12,0.06) !important;
}
html.light-mode .skill-category:hover,
html.light-mode .project-card:hover,
html.light-mode .award-card:hover,
html.light-mode .testimonial-card:hover,
html.light-mode .timeline-card:hover {
  box-shadow:
    0 8px 24px rgba(0,0,0,0.1),
    0 0 0 1px rgba(234,88,12,0.15),
    0 0 16px rgba(234,88,12,0.05) !important;
}

/* ── 4. REVEAL ANIMATIONS on more elements ────────────── */
.award-card,
.testimonial-card,
.highlight-item,
.timeline-card,
.language-card {
  transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease !important;
}

/* ── 5. SECTION DIVIDER — orange fade line ────────────── */
section + section::before {
  content: '';
  display: block;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(234,88,12,0.15), transparent);
  margin: 0 auto;
  width: 80%;
  position: relative; z-index: 2;
}

/* ── SCROLL ARROWS — always orange ───────────────────── */
.hero-scroll-arrow { color: #ea580c !important; }
html.light-mode .hero-scroll-hint { color: rgba(0,0,0,0.4) !important; }
html.light-mode .hero-scroll-arrow { color: #ea580c !important; filter: drop-shadow(0 0 4px rgba(234,88,12,0.4)) !important; }

/* ══════════════════════════════════════════════════════
   LIGHT MODE — MISSING SECTIONS (skills, timeline,
   community, awards, testimonials, languages, nav)
   ══════════════════════════════════════════════════════ */

/* ── Global body & text ─────────────────────────────── */
html.light-mode body                     { background: #fafaf9 !important; color: #0f172a !important; }
html.light-mode h2, html.light-mode h3,
html.light-mode h4                       { color: #0f172a !important; }
html.light-mode p                        { color: #334155 !important; }
html.light-mode a                        { color: #ea580c !important; }
html.light-mode strong, html.light-mode b { color: #0f172a !important; }

/* ── Section backgrounds ────────────────────────────── */
html.light-mode section                  { background: #fafaf9 !important; }
html.light-mode section:nth-child(even)  { background: #f1f5f9 !important; }
html.light-mode section:nth-child(odd)   { background: #fafaf9 !important; }
html.light-mode .section-bg-secondary,
html.light-mode #about                   { background: #f1f5f9 !important; }
html.light-mode #skills                  { background: #f1f5f9 !important; }
html.light-mode .contact,
html.light-mode #contact                 { background: #f1f5f9 !important; }

/* ── Section titles & subtitles ─────────────────────── */
html.light-mode .section-title           { color: #ea580c !important; }
html.light-mode .section-subtitle        { color: #475569 !important; }

/* ── Navigation ─────────────────────────────────────── */
html.light-mode nav                      { background: rgba(248,250,252,0.95) !important; border-bottom-color: rgba(0,0,0,0.08) !important; box-shadow: 0 2px 12px rgba(0,0,0,0.06) !important; }
html.light-mode nav.nav--scrolled        { background: rgba(248,250,252,0.99) !important; }
html.light-mode .nav-links a             { color: #334155 !important; }
html.light-mode .nav-links a:hover,
html.light-mode .nav-links a.active-nav  { color: #ea580c !important; background: rgba(234,88,12,0.06) !important; }
html.light-mode .nav-more-toggle         { color: #334155 !important; }
html.light-mode .nav-more-toggle:hover   { color: #ea580c !important; }
html.light-mode .logo-text               { color: #0f172a !important; }
html.light-mode .theme-toggle            { color: #334155 !important; }
html.light-mode .menu-toggle             { color: #334155 !important; }

/* ── Skills section ─────────────────────────────────── */
html.light-mode #skills .section-title   { color: #ea580c !important; }
html.light-mode #skills .section-subtitle { color: #475569 !important; }
html.light-mode #skills .skill-category  { background: #ffffff !important; border-color: rgba(0,0,0,0.1) !important; box-shadow: 0 2px 12px rgba(0,0,0,0.06) !important; }
html.light-mode #skills .skill-category:hover { background: #f8fafc !important; border-color: rgba(234,88,12,0.3) !important; }
html.light-mode #skills .skill-title     { color: #0f172a !important; }
html.light-mode #skills .skill-list      { border-top-color: rgba(0,0,0,0.08) !important; }
html.light-mode #skills .skill-item      { color: #334155 !important; border-bottom-color: rgba(0,0,0,0.06) !important; }
html.light-mode #skills .skill-item::before { background: #ea580c !important; }
html.light-mode .skill-bar-track         { background: rgba(0,0,0,0.08) !important; }
html.light-mode .skill-bar-name          { color: #0f172a !important; }
html.light-mode .skill-bar-pct           { color: #64748b !important; }

/* ── Timeline / Journey section ─────────────────────── */
html.light-mode #timeline                { background: #f8fafc !important; }
html.light-mode .timeline::before        { background: linear-gradient(180deg, #ea580c, #f97316) !important; }
html.light-mode .timeline-dot            { background: #ea580c !important; border-color: #f8fafc !important; box-shadow: 0 0 0 3px #ea580c !important; }
html.light-mode .timeline-item--future .timeline-dot { background: #fb923c !important; box-shadow: 0 0 0 3px #fb923c !important; }
html.light-mode .timeline-card           { background: #ffffff !important; border-color: rgba(0,0,0,0.1) !important; box-shadow: 0 2px 12px rgba(0,0,0,0.06) !important; }
html.light-mode .timeline-card:hover     { border-color: rgba(234,88,12,0.3) !important; box-shadow: 0 8px 24px rgba(0,0,0,0.1) !important; }
html.light-mode .timeline-title          { color: #0f172a !important; }
html.light-mode .timeline-desc           { color: #334155 !important; }
html.light-mode .timeline-date           { background: #e2e8f0 !important; border-color: rgba(0,0,0,0.1) !important; color: #0f172a !important; }
html.light-mode .timeline-tag            { background: rgba(234,88,12,0.1) !important; color: #c2410c !important; }
html.light-mode .timeline-tag--future    { background: rgba(251,146,60,0.1) !important; color: #ea580c !important; }
html.light-mode .timeline-quote          { background: rgba(234,88,12,0.05) !important; border-left-color: #ea580c !important; color: #334155 !important; }
html.light-mode .timeline-quote-author   { color: #64748b !important; }
html.light-mode .testimonial-card        { background: #ffffff !important; border-color: rgba(0,0,0,0.1) !important; box-shadow: 0 2px 12px rgba(0,0,0,0.06) !important; }
html.light-mode .testimonial-text        { color: #334155 !important; }
html.light-mode .testimonial-name        { color: #0f172a !important; }
html.light-mode .testimonial-role        { color: #64748b !important; }
html.light-mode .testimonial-author      { border-top-color: rgba(0,0,0,0.08) !important; }
html.light-mode .testimonial-quote i     { color: #ea580c !important; }

/* ── Languages section ──────────────────────────────── */
html.light-mode #languages               { background: #f1f5f9 !important; }
html.light-mode .language-card           { background: #ffffff !important; border-color: rgba(0,0,0,0.1) !important; box-shadow: 0 2px 12px rgba(0,0,0,0.06) !important; }

/* Strong overrides to ensure active timeline items are always clearly visible */
#timeline .timeline-item--active .timeline-dot,
html.light-mode #timeline .timeline-item--active .timeline-dot {
  width: 14px !important;
  height: 14px !important;
  background: linear-gradient(135deg, #ff7a2e, #ea580c) !important;
  border-radius: 50% !important;
  box-shadow: 0 0 0 8px rgba(234,88,12,0.18) !important;
  border: 2px solid rgba(255,255,255,0.95) !important;
  display: inline-block !important;
  transform: translateZ(0) !important;
}

#timeline .timeline-item--active .timeline-date,
html.light-mode #timeline .timeline-item--active .timeline-date {
  background: linear-gradient(90deg,#ff7a2e,#ea580c) !important;
  color: #ffffff !important;
  border-color: transparent !important;
  box-shadow: 0 8px 28px rgba(234,88,12,0.16) !important;
}

#timeline .timeline-tag--active,
html.light-mode #timeline .timeline-tag--active {
  background: linear-gradient(90deg,#ff7a2e,#ea580c) !important;
  color: #ffffff !important;
  border: none !important;
  font-weight: 700 !important;
  padding: 0.25rem 0.6rem !important;
  border-radius: 999px !important;
}

/* Ensure date and tag sit above decorative timeline lines */
#timeline .timeline-date,
#timeline .timeline-tag--active {
  position: relative !important;
  z-index: 3 !important;
}
html.light-mode .language-name           { color: #0f172a !important; }
html.light-mode .language-bar            { background: rgba(0,0,0,0.08) !important; }
html.light-mode .level-native            { background: rgba(22,163,74,0.1) !important; color: #16a34a !important; }
html.light-mode .level-fluent            { background: rgba(234,88,12,0.1) !important; color: #c2410c !important; }
html.light-mode .level-conversational    { background: rgba(202,138,4,0.1) !important; color: #a16207 !important; }

/* ── Leadership section ─────────────────────────────── */
html.light-mode #leadership              { background: #f8fafc !important; }
html.light-mode .leadership-card,
html.light-mode [class*="leadership"] .project-card { background: #ffffff !important; border-color: rgba(0,0,0,0.1) !important; }
html.light-mode #leadership .project-title { color: #ea580c !important; }

/* ── Academics section ──────────────────────────────── */
html.light-mode #academics               { background: #f1f5f9 !important; }
html.light-mode #academics .skill-category {
  background: #ffffff !important;
  border-color: rgba(0,0,0,0.1) !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06) !important;
}
html.light-mode #academics .skill-title  { color: #0f172a !important; }
html.light-mode #academics .skill-icon   { background: linear-gradient(135deg, #ea580c, #f97316) !important; }
html.light-mode #academics .skill-list   { border-top-color: rgba(0,0,0,0.1) !important; }
html.light-mode #academics .skill-item  {
  color: #1e293b !important;
  border-bottom-color: rgba(0,0,0,0.07) !important;
  font-weight: 500 !important;
}
html.light-mode #academics .skill-item::before { background: #ea580c !important; }
html.light-mode .cert-item               { border-bottom-color: rgba(0,0,0,0.06) !important; color: #1e293b !important; font-weight: 500 !important; }
html.light-mode .cert-item-name::before  { background: #ea580c !important; }
html.light-mode .cert-verify             { color: #ea580c !important; border-color: rgba(234,88,12,0.3) !important; }

/* ── About section ──────────────────────────────────── */
html.light-mode .about-text              { color: #334155 !important; }
html.light-mode .about-photo-badge       { background: #ffffff !important; color: #334155 !important; box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important; }
html.light-mode .highlight-item          { background: #ffffff !important; border-color: rgba(0,0,0,0.1) !important; }
html.light-mode .highlight-item h3       { color: #0f172a !important; }
html.light-mode .highlight-item p        { color: #475569 !important; }
html.light-mode .learning-widget         { background: #ffffff !important; border-color: rgba(0,0,0,0.1) !important; }
html.light-mode .learning-title          { color: #0f172a !important; }
html.light-mode .learning-item           { color: #334155 !important; }
html.light-mode .learning-item i         { color: #ea580c !important; }

/* ── About quick-stats card (replaces duplicate photo) ── */
.about-quick-stats {
  background: var(--navy-card);
  border: 1px solid var(--border-mid);
  border-radius: var(--radius-card);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.about-quick-stats__title {
  font-family: 'Sora', sans-serif;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--white-50);
  margin-bottom: 0.25rem;
}
.about-quick-stats__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}
.about-quick-stat {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.75rem;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  text-align: center;
}
.about-quick-stat__num {
  font-family: 'Sora', sans-serif;
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--orange-400);
  line-height: 1;
}
.about-quick-stat__label {
  font-size: 0.7rem;
  color: var(--white-50);
  font-weight: 500;
  white-space: nowrap;
}
.about-quick-stats__quote {
  padding: 0.75rem 1rem;
  border-left: 3px solid var(--orange-500);
  border-radius: 0 8px 8px 0;
  background: rgba(234,88,12,0.06);
  font-size: 0.82rem;
  font-style: italic;
  color: var(--white-70);
  line-height: 1.6;
}
.about-quick-stats__quote cite {
  display: block;
  font-style: normal;
  font-size: 0.72rem;
  color: var(--white-50);
  margin-top: 0.4rem;
  font-weight: 600;
}

/* Light mode */
html.light-mode .about-quick-stats       { background: #ffffff !important; border-color: rgba(0,0,0,0.1) !important; }
html.light-mode .about-quick-stats__title { color: #64748b !important; }
html.light-mode .about-quick-stat        { background: #f8fafc !important; border-color: rgba(0,0,0,0.08) !important; }
html.light-mode .about-quick-stat__num   { color: #ea580c !important; }
html.light-mode .about-quick-stat__label { color: #64748b !important; }
html.light-mode .about-quick-stats__quote { background: rgba(234,88,12,0.05) !important; color: #334155 !important; }
html.light-mode .about-quick-stats__quote cite { color: #64748b !important; }

/* ── Projects section ───────────────────────────────── */
html.light-mode #projects                { background: #f8fafc !important; }
html.light-mode .project-card            { background: #ffffff !important; border-color: rgba(0,0,0,0.1) !important; box-shadow: 0 2px 12px rgba(0,0,0,0.06) !important; }
html.light-mode .project-title           { color: #0f172a !important; }
html.light-mode .project-description     { color: #334155 !important; }
html.light-mode .case-study-banner       { background: #ffffff !important; border-color: rgba(0,0,0,0.1) !important; border-left-color: #ea580c !important; }
html.light-mode .case-study-banner-title { color: #0f172a !important; }
html.light-mode .case-study-banner-desc  { color: #334155 !important; }
html.light-mode .cs-stat-label           { color: #64748b !important; }

/* ── FAB & scroll progress ──────────────────────────── */
html.light-mode .fab                     { box-shadow: 0 8px 24px rgba(234,88,12,0.3) !important; }
html.light-mode .scroll-progress         { background: linear-gradient(90deg, #ea580c, #f97316) !important; }

/* ── Loading screen ─────────────────────────────────── */
html.light-mode .loading                 { background: #fafaf9 !important; }
html.light-mode .spinner                 { border-color: rgba(0,0,0,0.1) !important; border-top-color: #ea580c !important; }

/* ── Skip link ──────────────────────────────────────── */
html.light-mode .skip-link               { background: #ea580c !important; color: #fff !important; }

/* ── Hero section ───────────────────────────────────── */
html.light-mode .hero                    { background: linear-gradient(135deg, #fafaf9 0%, #f1f5f9 60%, #e2e8f0 100%) !important; }
html.light-mode .hero-content h1         { color: #0f172a !important; }
html.light-mode .hero-surname            { color: #64748b !important; opacity: 1 !important; }
html.light-mode .hero-role-pill          { background: rgba(0,0,0,0.05) !important; border-color: rgba(0,0,0,0.1) !important; color: #334155 !important; }
html.light-mode .hero-role-pill:hover    { background: rgba(234,88,12,0.08) !important; border-color: rgba(234,88,12,0.3) !important; color: #c2410c !important; }
html.light-mode .hero-image-ring         {
  background:
    linear-gradient(#fafaf9, #fafaf9) padding-box,
    conic-gradient(from 0deg, #ea580c 0%, #f97316 25%, transparent 50%, #ea580c 75%, #f97316 100%) border-box !important;
}
html.light-mode .hero-photo              { border-color: rgba(234,88,12,0.25) !important; box-shadow: 0 0 0 8px rgba(234,88,12,0.06), 0 24px 60px rgba(0,0,0,0.15) !important; }
html.light-mode .hero-chip               { background: rgba(255,255,255,0.95) !important; border-color: rgba(234,88,12,0.25) !important; color: #0f172a !important; box-shadow: 0 4px 16px rgba(0,0,0,0.1) !important; }
html.light-mode .hero-chip i             { color: #ea580c !important; }
html.light-mode .hero-trust__label       { color: #64748b !important; }
html.light-mode .hero-trust__item        { color: #334155 !important; }
html.light-mode .hero-social-divider     { background: rgba(0,0,0,0.12) !important; }
html.light-mode .hero-grid-lines         {
  background-image:
    linear-gradient(rgba(0,0,0,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,0.04) 1px, transparent 1px) !important;
}

/* ── MODULAR SECTION SPACING ──────────────────────── */
/* Lighter sections get less padding; heavier content sections get more */
#awards,
#languages,
#testimonials { padding: 4rem 0 !important; }

#projects,
#timeline,
#community { padding: 6rem 0 !important; }

/* ── SECTION HEADER MOTIF ─────────────────────────── */
/* Subtle left-border accent on section headers for visual system consistency */
.section-header {
  position: relative;
}
.section-header::before {
  content: '';
  display: block;
  width: 3px;
  height: 2rem;
  background: linear-gradient(180deg, var(--orange-500), transparent);
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  border-radius: 2px;
  opacity: 0.4;
}

/* Light mode — desaturated orange for a designed feel */
html.light-mode .btn-primary,
html.light-mode .btn-primary:hover { background: linear-gradient(135deg, #d95e0a, #e8650b) !important; }
html.light-mode .section-title { color: #d95e0a !important; }
html.light-mode .section-title::after { background: linear-gradient(90deg, #d95e0a, #e8650b) !important; }
html.light-mode .hero-content .highlight { color: #d95e0a !important; }
html.light-mode .fab { background: linear-gradient(135deg, #d95e0a, #e8650b) !important; }
html.light-mode .scroll-progress { background: linear-gradient(90deg, #d95e0a, #e8650b) !important; }
html.light-mode .about-seeking { border-left-color: #d95e0a !important; }
html.light-mode .hero-resume-link { color: #d95e0a !important; border-color: rgba(217,94,10,0.4) !important; }


/* ══════════════════════════════════════════════════════
   UI/UX IMPROVEMENTS — Solomon Portfolio
   ══════════════════════════════════════════════════════ */

/* ── 1. SMOOTHER GLOBAL TRANSITIONS ───────────────────── */
*, *::before, *::after {
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── 2. BETTER LINK UNDERLINES ────────────────────────── */
.footer-links-list li a,
.contact-link,
.hero-resume-link {
  text-underline-offset: 3px;
}

/* ── 3. IMPROVED BUTTON ACTIVE STATES ─────────────────── */
.btn:active,
.btn-primary:active {
  transform: translateY(0) scale(0.97) !important;
  box-shadow: 0 4px 12px rgba(234,88,12,0.2) !important;
}
.btn-secondary:active {
  transform: scale(0.97) !important;
}
.filter-btn:active {
  transform: scale(0.95) !important;
}

/* ── 4. NAV — active indicator line ───────────────────── */
.nav-links a.active-nav {
  box-shadow: inset 0 -2px 0 var(--orange-500) !important;
}

/* ── 5. HERO PHOTO — smoother white circle ─────────────── */
.hero-photo {
  transition: transform 0.4s cubic-bezier(0.4,0,0.2,1),
              box-shadow 0.4s ease !important;
}
.hero-image-wrap:hover .hero-photo {
  transform: scale(1.03);
  box-shadow:
    0 0 0 8px rgba(234,88,12,0.12),
    0 40px 100px rgba(0,0,0,0.7) !important;
}

/* ── 6. SECTION TITLES — tighter letter spacing ───────── */
.section-title {
  letter-spacing: -0.02em;
}

/* ── 7. PROJECT CARDS — image zoom on hover ────────────── */
.project-card {
  overflow: hidden;
}
.project-card .project-image img {
  transition: transform 0.5s cubic-bezier(0.4,0,0.2,1) !important;
}
.project-card:hover .project-image img {
  transform: scale(1.06) !important;
}

/* ── 8. SKILL BAR — animated fill on load ──────────────── */
.skill-bar-fill {
  transition: width 1.4s cubic-bezier(0.4,0,0.2,1) !important;
}

/* ── 9. TIMELINE DOTS — pulse on active ────────────────── */
.timeline-item--active .timeline-dot::after {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px solid rgba(234,88,12,0.3);
  animation: timeline-pulse 2s ease-in-out infinite;
}
@keyframes timeline-pulse {
  0%, 100% { transform: scale(1); opacity: 0.6; }
  50%       { transform: scale(1.4); opacity: 0; }
}

/* ── 10. CONTACT FORM — focus ring improvement ─────────── */
.form-group input:focus,
.form-group textarea:focus {
  box-shadow:
    0 0 0 3px rgba(234,88,12,0.15),
    0 2px 8px rgba(0,0,0,0.2) !important;
  transform: translateY(-1px);
}

/* ── 11. HIGHLIGHT ITEMS — icon animation ──────────────── */
.highlight-item:hover .highlight-icon {
  transform: scale(1.08) rotate(-3deg);
  transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1);
}
.highlight-icon {
  transition: transform 0.3s ease;
}

/* ── 12. SOCIAL ICONS — bounce effect ──────────────────── */
.hero-social:hover,
.contact-social-icon:hover {
  animation: icon-bounce 0.4s cubic-bezier(0.34,1.56,0.64,1);
}
@keyframes icon-bounce {
  0%   { transform: translateY(0); }
  40%  { transform: translateY(-6px); }
  70%  { transform: translateY(-2px); }
  100% { transform: translateY(-2px); }
}

/* ── 13. SECTION HEADER — fade-in underline ────────────── */
.section-title::after {
  transition: width 0.6s cubic-bezier(0.4,0,0.2,1) !important;
}

/* ── 14. TECH TAGS — subtle hover lift ─────────────────── */
.tech-tag {
  transition: transform 0.2s ease, background 0.2s ease !important;
  cursor: default;
}
.tech-tag:hover {
  transform: translateY(-2px);
}

/* ── 15. CARD CONTENT — better line heights ────────────── */
.project-description,
.award-description,
.testimonial-text,
.timeline-desc {
  line-height: 1.75 !important;
}

/* ── 16. FOOTER LINKS — hover slide effect ─────────────── */
.footer-links-list li a {
  position: relative;
  padding-left: 0;
  transition: padding-left 0.2s ease, color 0.2s ease, opacity 0.2s ease !important;
}
.footer-links-list li a:hover {
  padding-left: 6px !important;
}

/* ── 17. ABOUT PHOTO — hover tilt ──────────────────────── */
.about-photo {
  transition: transform 0.4s cubic-bezier(0.34,1.56,0.64,1),
              box-shadow 0.3s ease !important;
}
.about-photo-wrap:hover .about-photo {
  transform: rotate(-2deg) scale(1.03);
  box-shadow: 0 20px 50px rgba(0,0,0,0.5) !important;
}

/* ── 18. BADGE PULSE — hero availability badge ─────────── */
.hero-badge {
  position: relative;
  overflow: visible;
}

/* ── 19. IMPROVED SCROLLBAR ─────────────────────────────── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #060d1a; }
::-webkit-scrollbar-thumb {
  background: rgba(234,88,12,0.4);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(234,88,12,0.7);
}

/* ── 20. SELECTION COLOR ─────────────────────────────────── */
::selection {
  background: rgba(234,88,12,0.3);
  color: #fff;
}
html.light-mode ::selection {
  background: rgba(234,88,12,0.2);
  color: #0f172a;
}

/* ── 21. TESTIMONIAL CARDS — quote icon position ───────── */
.testimonial-card {
  position: relative;
  overflow: hidden;
}
.testimonial-card::before {
  content: '\201C';
  position: absolute;
  top: -0.5rem;
  right: 1rem;
  font-size: 6rem;
  line-height: 1;
  color: rgba(234,88,12,0.06);
  font-family: 'Sora', sans-serif;
  font-weight: 800;
  pointer-events: none;
}

/* ── 22. PROJECT CODE PREVIEW — glow effect ────────────── */
.project-image--code {
  position: relative;
}
.project-image--code::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 50%, rgba(234,88,12,0.04), transparent 70%);
  pointer-events: none;
}

/* ── 23. READING PROGRESS — thicker bar ────────────────── */
.scroll-progress {
  height: 3px !important;
  box-shadow: 0 0 8px rgba(234,88,12,0.5);
}

/* ── 24. INPUT LABELS — float animation ────────────────── */
.form-group {
  position: relative;
}
.form-group label {
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.02em;
}

/* ── 25. MOBILE — larger tap targets ───────────────────── */
@media (max-width: 768px) {
  .btn,
  .btn-primary,
  .btn-secondary {
    min-height: 48px;
    padding: 0.85rem 1.5rem !important;
  }
  .filter-btn {
    min-height: 44px;
    padding: 0.5rem 1.1rem !important;
  }
  .nav-links a {
    min-height: 48px;
    display: flex;
    align-items: center;
  }
}

/* ── 26. CARD FOCUS STATES for keyboard nav ─────────────── */
.project-card:focus-within {
  border-color: rgba(234,88,12,0.4) !important;
  box-shadow: 0 0 0 3px rgba(234,88,12,0.15) !important;
}

/* ── 27. EMPTY STATE ANIMATIONS ─────────────────────────── */
.b-feed__empty,
.g-empty {
  animation: fade-up 0.4s ease;
}
@keyframes fade-up {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── 28. HERO CHIPS — better shadow ────────────────────── */
.hero-chip {
  box-shadow:
    0 4px 16px rgba(0,0,0,0.4),
    0 0 0 1px rgba(234,88,12,0.1) !important;
}
.hero-chip:hover {
  transform: translateY(-3px) !important;
  box-shadow:
    0 8px 24px rgba(0,0,0,0.5),
    0 0 0 1px rgba(234,88,12,0.2) !important;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* ── 29. AWARD BADGE — glow ─────────────────────────────── */
.award-badge {
  transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1) !important;
}
.award-card:hover .award-badge {
  transform: scale(1.12) rotate(5deg);
}

/* ── 30. LOADING SPINNER — orange gradient ──────────────── */
.spinner {
  border: 3px solid rgba(234,88,12,0.15) !important;
  border-top-color: var(--orange-500) !important;
  box-shadow: 0 0 16px rgba(234,88,12,0.2);
}


/* ══════════════════════════════════════════════════════
   CONTACT SOCIAL ICONS — LIGHT MODE ANIMATION FIX
   Ensures icons remain visible with brand colors
   during the bounce animation in light mode.
   ══════════════════════════════════════════════════════ */

/* Base hover state — same bounce animation but keep colors visible */
html.light-mode .contact-social-icon:hover {
  animation: icon-bounce 0.4s cubic-bezier(0.34,1.56,0.64,1) !important;
  transform: translateY(-2px) scale(1.08) !important;
  box-shadow: 0 8px 24px rgba(234,88,12,0.15) !important;
}

/* LinkedIn */
html.light-mode .contact-social-icon--linkedin:hover {
  background: #0A66C2 !important;
  color: #fff !important;
  border-color: #0A66C2 !important;
}

/* GitHub */
html.light-mode .contact-social-icon--github:hover {
  background: #24292e !important;
  color: #fff !important;
  border-color: #24292e !important;
}

/* Email */
html.light-mode .contact-social-icon--email:hover {
  background: #ea580c !important;
  color: #fff !important;
  border-color: #ea580c !important;
}

/* X / Twitter */
html.light-mode .contact-social-icon--twitter:hover {
  background: #000 !important;
  color: #fff !important;
  border-color: #555 !important;
}

/* Instagram */
html.light-mode .contact-social-icon--instagram:hover {
  background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%) !important;
  color: #fff !important;
  border-color: #d6249f !important;
}

/* Facebook */
html.light-mode .contact-social-icon--facebook:hover {
  background: #1877F2 !important;
  color: #fff !important;
  border-color: #1877F2 !important;
}

/* TikTok */
html.light-mode .contact-social-icon--tiktok:hover {
  background: #010101 !important;
  color: #69C9D0 !important;
  border-color: #69C9D0 !important;
}

/* Ensure icon children inside the buttons also stay white on hover */
html.light-mode .contact-social-icon:hover i,
html.light-mode .contact-social-icon:hover svg,
html.light-mode .contact-social-icon:hover path {
  color: inherit !important;
  fill: currentColor !important;
}

/* ── BLOG PREVIEW CARDS (homepage) ─────────────────── */
.blog-preview-card {
  display: flex; flex-direction: column;
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--navy-card);
  border: 1px solid var(--border-mid);
  box-shadow: var(--shadow-card);
  transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease;
  text-decoration: none;
  color: inherit;
}
.blog-preview-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-hover);
  border-color: var(--border-accent);
  background: var(--navy-card-hover);
}
.blog-preview-card__img {
  height: 190px; overflow: hidden;
}
.blog-preview-card__img img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.5s cubic-bezier(0.4,0,0.2,1);
}
.blog-preview-card:hover .blog-preview-card__img img {
  transform: scale(1.06);
}
.blog-preview-card__body {
  padding: 1.25rem; display: flex; flex-direction: column; gap: 0.5rem; flex: 1;
}
.blog-preview-card__tag {
  display: inline-flex; align-items: center; gap: 0.3rem;
  font-size: 0.68rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--orange-300);
}
.blog-preview-card__title {
  font-family: 'Sora', sans-serif;
  font-size: 0.95rem; font-weight: 700;
  color: var(--white-90); line-height: 1.4;
}
.blog-preview-card__excerpt {
  font-size: 0.82rem; color: var(--white-60);
  line-height: 1.65; flex: 1;
}
.blog-preview-card__meta {
  font-size: 0.72rem; color: var(--white-50); margin-top: 0.25rem;
}

/* Light mode */
html.light-mode .blog-preview-card { background: #ffffff !important; border-color: rgba(0,0,0,0.1) !important; box-shadow: 0 2px 12px rgba(0,0,0,0.06) !important; }
html.light-mode .blog-preview-card:hover { border-color: rgba(234,88,12,0.3) !important; box-shadow: 0 8px 24px rgba(0,0,0,0.1) !important; }
html.light-mode .blog-preview-card__title { color: #0f172a !important; }
html.light-mode .blog-preview-card__excerpt { color: #475569 !important; }
html.light-mode .blog-preview-card__meta { color: #94a3b8 !important; }

@media (max-width: 900px) {
  #blog .projects-grid { grid-template-columns: repeat(2,1fr) !important; }
}
@media (max-width: 560px) {
  #blog .projects-grid { grid-template-columns: 1fr !important; }
}