/* Unified Blended Theme (mid-contrast, dark-on-slate surfaces with soft light accents) */
:root {
  --bg-page:#121924;
  --bg-surface:#1c2531;
  --bg-alt:#202d3b;
  --bg-hero-gradient:linear-gradient(140deg,#16212d,#1f2e3d 45%,#243649);
  --text-primary:#e7eef5;
  --text-secondary:#9fb2c4;
  --text-faint:#6d7e8d;
  --border-soft:#2c3b4a;
  --shadow-sm:0 2px 6px rgba(0,0,0,.4);
  --shadow-lg:0 8px 28px -4px rgba(0,0,0,.55);
  --accent:#30b061;
  --accent-hover:#279350;
  --accent-fade:rgba(48,176,97,.18);
  --glow:0 0 0 3px rgba(48,176,97,.35);
  --timeline-ring:#0f161e;
  --avatar-ring:rgba(255,255,255,.18);
}
body {background:var(--bg-page);color:var(--text-primary);font-feature-settings:"rlig" 1,"calt" 0;} 
.hero {background:var(--bg-hero-gradient);color:var(--text-primary);border-bottom:1px solid var(--border-soft);} 
.navbar {background:rgba(18,25,36,.85)!important;backdrop-filter:saturate(140%) blur(10px);box-shadow:var(--shadow-sm);border-bottom:1px solid var(--border-soft);} 
.navbar .nav-link {color:var(--text-secondary);} 
.navbar .nav-link.active,.navbar .nav-link:hover {color:var(--text-primary);} 
.card {background:var(--bg-surface)!important;border:1px solid var(--border-soft);box-shadow:var(--shadow-lg);transition:transform .25s ease,box-shadow .25s ease;} 
.card:hover {transform:translateY(-4px);box-shadow:0 10px 34px -6px rgba(0,0,0,.65);} 
.metric {background:var(--bg-surface);border:1px solid var(--border-soft);} 
.logo-slider {background:var(--bg-alt);border:1px solid var(--border-soft);} 
.text-muted, .small.text-muted {color:var(--text-secondary)!important;} 
.btn-success {background:var(--accent);border-color:var(--accent);box-shadow:var(--glow);} 
.btn-success:hover {background:var(--accent-hover);border-color:var(--accent-hover);} 
.btn-outline-light {color:var(--text-secondary);border-color:var(--border-soft);} 
.btn-outline-light:hover {color:var(--text-primary);background:var(--border-soft);} 
.utility-btn {border:1px solid var(--border-soft);background:var(--bg-surface);color:var(--text-secondary);box-shadow:var(--shadow-sm);} 
.utility-btn:hover {color:var(--text-primary);background:var(--bg-alt);} 
.timeline-line{position:absolute;left:14px;top:0;bottom:0;width:2px;background:linear-gradient(var(--accent),var(--accent-hover))} 
.timeline-item:before{content:"";position:absolute;left:8px;top:6px;width:14px;height:14px;background:var(--accent);border:3px solid var(--timeline-ring);border-radius:50%;box-shadow:0 0 0 4px var(--timeline-ring)} 
.avatar-ring{border:4px solid var(--avatar-ring)!important;} 
/* Experience text balance */
.experience-wrapper .timeline-item {color:var(--text-secondary);} 
.experience-wrapper .timeline-item strong {color:var(--text-primary);} 
.experience-wrapper span.text-success {color:var(--accent)!important;} 
/* Scrollbar (WebKit) */
::-webkit-scrollbar {width:10px;} 
::-webkit-scrollbar-track {background:#111820;} 
::-webkit-scrollbar-thumb {background:#2a3948;border:2px solid #111820;border-radius:8px;} 
::-webkit-scrollbar-thumb:hover {background:#33495a;} 
/* Selection */
::selection {background:var(--accent);color:#fff;} 
/* Print Styles */
@media print {
  body { background:#fff !important; color:#000 !important; font-size:12px; }
  nav, .logo-slider, .hero .d-flex a.btn.btn-success, .hero .d-flex a.btn.btn-outline-light { display:none !important; }
  .hero { background:none !important; padding:20px 0 10px !important; color:#000 !important; }
  .metric { box-shadow:none !important; border:1px solid #ccc; }
  .card { box-shadow:none !important; border:1px solid #ddd; background:#fff !important; }
  a::after { content:" (" attr(href) ")"; font-size:10px; }
  footer { display:none !important; }
  .project-card img { display:none !important; }
}

/* Typography and readability adjustments */
html,body{font-family:Inter, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;line-height:1.45}
h1,h2,h3,h4,h5,h6{color:var(--text-primary);font-weight:700;margin-top:.25rem;margin-bottom:.5rem}
h1{font-size:2.4rem;letter-spacing:-0.02em}
h2{font-size:1.6rem}
.lead{color:var(--text-secondary);font-size:1.02rem}
.section-title{color:var(--text-primary);font-size:1.1rem}
a{color:var(--accent);text-decoration:none}
a:hover{color:var(--accent-hover);text-decoration:underline}
.small{color:var(--text-secondary)}
.display-5{font-weight:700;color:var(--text-primary)}
.rounded-circle.avatar-ring{background:linear-gradient(180deg,rgba(255,255,255,.02),transparent)}

/* Avatar image fit (moved from inline) */
.rounded-circle.avatar-ring { object-fit: cover; }

/* Small spacing utilities */
.mb-1{margin-bottom:.25rem!important}
.mb-2{margin-bottom:.5rem!important}
.mt-2{margin-top:.5rem!important}

/* Project carousel & lightbox */
.project-carousel { background:transparent; }
/* Let Bootstrap manage display of .carousel-item; avoid overriding display to prevent stacking */
.project-carousel .carousel-inner { position:relative; overflow:hidden; }
.project-carousel .carousel-item { position:relative; }
.project-carousel .carousel-item img { display:block; width:100%; height:auto; max-height:260px; object-fit:cover; aspect-ratio:16/9; margin:0 auto; }
@media(min-width:768px){ .project-carousel .carousel-item img { max-height:320px } }
.project-thumb { display:block; width:100%; height:100%; }
#projectImageModal .modal-body { background:linear-gradient(180deg, rgba(0,0,0,.6), rgba(0,0,0,.8)); padding:2rem; }
#projectImageModalImg{ max-height:80vh; object-fit:contain; }
#projectImageModalCaption{ color:var(--text-secondary); }

/* make carousel controls visible against dark surfaces */
.project-carousel .carousel-control-prev-icon, .project-carousel .carousel-control-next-icon { filter:invert(1) drop-shadow(0 2px 6px rgba(0,0,0,.6)); }

/* Improve contrast for outline buttons */
.btn-outline-light{border:1px solid rgba(255,255,255,.06);color:var(--text-secondary)}
.btn-outline-light:hover{background:rgba(255,255,255,.03);color:var(--text-primary)}

/* Utility: subtle divider */
.section-divider{height:1px;background:linear-gradient(90deg,transparent,var(--border-soft),transparent);margin:18px 0}
