/* ===== Theme (blue/teal on dark; switches to light if user prefers) ===== */
:root{ --bg:#0a0f14; --panel:#0f1620; --card:#0b131a; --border:#13202b; --ring:#1ea1a1; --brand:#2ca6d9; --accent:#2ca6d9; --text:#e6eef5; --muted:#9fb3c8 }
@media (prefers-color-scheme: light){ :root{ --bg:#f6fbff; --panel:#ffffff; --card:#ffffff; --border:#d9e2ec; --text:#0b1a2b; --muted:#4b5b6a; --brand:#1e88e5; --accent:#1e88e5; --ring:#1ba7a7 } }

.archive-banner{position:relative;z-index:1000;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;padding:8px clamp(12px,3vw,28px);color:#e9f0ff;background:#132b44;border-bottom:1px solid rgba(255,255,255,.2);font-size:14px;font-weight:600}
.archive-banner a{color:#63dfca;white-space:nowrap}
@media (max-width:520px){.archive-banner{align-items:flex-start;flex-direction:column}}

/* Base resets */
*{box-sizing:border-box;margin:0;padding:0}
/* Global focus indicator — applies to all interactive elements */
:focus-visible{outline:2px solid var(--ring);outline-offset:3px;border-radius:4px}
/* Skip link — visible only on focus for keyboard users */
.skip-link{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip-link:focus-visible{position:fixed;top:12px;left:12px;width:auto;height:auto;overflow:visible;z-index:999;background:var(--panel);color:var(--text);padding:10px 16px;border-radius:10px;font-weight:700;border:2px solid var(--ring)}
html{scroll-behavior:smooth}
body{font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial; background:var(--bg); color:var(--text); line-height:1.65}
img{max-width:100%; display:block}
@keyframes fadein{to{opacity:1}}
.fade-in{opacity:1}
@media (prefers-reduced-motion: no-preference){ .fade-in{opacity:0; animation:fadein .35s ease forwards} }

/* Sticky page layout so footer stays at bottom */
html,body{height:100%}
body{min-height:100vh; display:flex; flex-direction:column}
main{flex:1}

/* Nav */
.nav{position:sticky; top:0; z-index:50; background:#0e1a24; border-bottom:1px solid rgba(255,255,255,.06); box-shadow:0 2px 10px rgba(0,0,0,.35)}
.nav-inner{max-width:1200px;margin:auto;display:flex;align-items:center;justify-content:space-between;padding:12px 20px}
.brand{font-weight:800;letter-spacing:.4px;color:#eaf4ff;text-decoration:none}
.menu{display:flex;gap:22px;list-style:none}
.menu a{color:#cfe0ef;text-decoration:none;font-weight:700}
.menu a.active, .menu a:hover{color:#ffffff}
.hamb{display:none;background:none;border:0;color:#eaf4ff;font-size:22px;cursor:pointer;padding:8px}
@media (max-width:768px){ .menu{display:none;position:absolute;right:0;top:56px;background:#13202b;border:1px solid rgba(255,255,255,.06);border-radius:0;padding:12px 16px;flex-direction:column;min-width:200px;box-shadow:0 8px 20px rgba(0,0,0,.5)} .menu.open{display:flex} .hamb{display:block} }
.menu a.active{position:relative}
.menu a.active::after{content:''; position:absolute; left:0; right:0; bottom:-6px; height:2px; background:linear-gradient(90deg,var(--brand),var(--ring)); border-radius:2px}

/* Sections & utilities */
.container{max-width:1200px;margin:0 auto;padding:0 20px}
.section{max-width:1200px;margin:0 auto;padding:64px 20px}
@media (max-width:640px){ .section{padding:40px 16px} }
@media (max-width:480px){ .section{padding:32px 12px} }
.panel{background:var(--panel);border:1px solid var(--border);border-radius:16px;padding:24px}
.center{text-align:center} .small{font-size:14px} .muted{color:var(--muted)} .spacer{height:12px}
.btn{display:inline-block;background:linear-gradient(135deg,var(--brand),var(--ring)); color:#fff; padding:10px 16px; border-radius:12px; text-decoration:none; font-weight:700; box-shadow:0 10px 30px rgba(46,166,217,.25)}
.btn.ghost{background:transparent;border:1px solid var(--border); color:var(--text); box-shadow:none}
.btn.outline{background:transparent;border:1px solid var(--brand); color:var(--brand); box-shadow:none}
.btn.outline:hover{background:var(--brand); color:#fff}
.text-link{color:var(--brand); text-decoration:none}

/* Hero (subtle glows, parallax) */
.hero{position:relative;background: radial-gradient(1200px 400px at 50% -10%, rgba(44,166,217,.35), transparent 60%), radial-gradient(1000px 500px at 90% 10%, rgba(30,161,161,.25), transparent 60%)}
.hero-inner{max-width:1200px;margin:0 auto;padding:72px 20px; text-align:center}
.hero h1{font-size:clamp(24px,5vw,48px)} .hero p{color:var(--muted); margin:8px 0 16px}
@media (max-width:480px){ .hero h1{font-size:clamp(20px,6.5vw,28px)} .hero p{font-size:14px} }
.parallax{background-attachment:fixed}

/* About */
.about{display:grid;grid-template-columns:40% 60%;gap:24px;align-items:center}
.about-photo{width:100%;height:auto;max-width:520px;border-radius:16px;object-fit:cover;border:2px solid var(--border)}
.about-copy h2{margin-bottom:8px}
@media (max-width:900px){ .about{grid-template-columns:1fr} }
@media (max-width:640px){ .about{gap:16px} .about-photo{max-width:100%} }

/* Scrolling logo ticker */
.ticker-wrap{overflow:hidden;border:1px solid var(--border);border-radius:16px;background:#fff}
.ticker{display:flex;gap:28px;align-items:center;padding:18px 24px;width:max-content}
.ticker img{height:56px;object-fit:contain;filter:grayscale(.05);opacity:.95}
@media (max-width:640px){ .ticker{gap:20px;padding:14px 16px} .ticker img{height:48px} }
@media (max-width:480px){ .ticker{gap:16px;padding:12px 12px} .ticker img{height:40px} }
@keyframes scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion: no-preference){ .ticker{animation:scroll 28s linear infinite} }

/* Project grid & cards */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:24px;margin-bottom:8px;justify-content:center}
@media (max-width:640px){ .grid{grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px} }
@media (max-width:480px){ .grid{grid-template-columns:1fr;gap:12px} }
.grid + .center{margin-top:28px} /* spacing before the All Projects button */
.card{background:var(--panel);border:1px solid var(--border);border-radius:14px;overflow:hidden;transition:transform .2s, box-shadow .2s;display:flex;flex-direction:column}
.card:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(0,0,0,.25)}
.card img{width:100%;height:240px;object-fit:contain;background:#fff;padding:16px;border-bottom:1px solid var(--border)}
.card-photo img{height:240px;object-fit:cover;background:none;padding:0}
.card .body{padding:18px;flex:1;display:flex;flex-direction:column} .card h3{font-size:18px;margin-bottom:6px} .card p{color:var(--muted);font-size:14px}
.card .body p:last-child{margin-top:auto;padding-top:10px}
@media (max-width:480px){ .card .body{padding:14px} .card h3{font-size:16px} .card p{font-size:13px} .card img{height:180px;padding:12px} }
/* Nice spacing for lists inside project cards */
.card .body ul { margin: 8px 0 0 18px; color: var(--muted); }
.card .body li { margin-bottom: 6px; }




/* ===== CONTACT STUFF  ===== */
/* Contact page only (scoped, won't affect other pages) */
.contact-section{ max-width:1200px; width:100%; margin:0 auto; padding:64px 20px; }

.contact-wrap{ max-width:640px; margin:0 auto; }

.contact-panel{ max-width:640px; margin:0 auto; }

.req{ color:var(--ring); font-weight:700 }
.optional{ font-weight:400; color:var(--muted); font-size:.85em }


.contact-form{
  display:grid;
  gap:12px;
  width:100%;
  max-width:960px;       /* width of the form column */
  margin:0 auto;         /* center it */
}

.contact-form label{
  display:flex; flex-direction:column; gap:6px;
}
.contact-form label > span{
  font-weight:600;
}

.contact-form input,
.contact-form textarea{
  width:100%; margin:0;
  padding:10px 12px;
  border:1px solid rgba(255,255,255,.15);
  background:var(--card);
  color:var(--text);
  border-radius:10px;
  font-size:16px;
}
@media (max-width:640px){ .contact-form input, .contact-form textarea{padding:12px 10px} }
@media (max-width:480px){ .contact-form input, .contact-form textarea{font-size:16px;padding:12px 10px} .contact-form textarea{height:auto;min-height:120px} }

.contact-form .btn{
    width:100%;
    text-align:center;
    font-size:1rem;
    padding:12px 20px;
}

.contact-form input:focus,
.contact-form textarea:focus{
  outline:none; box-shadow:0 0 0 3px rgba(30,161,161,.25);
}

.btn[disabled]{opacity:.7; cursor:not-allowed}
.form-status{ margin-top:6px; font-weight:600; }
.form-status.success{ color:#27c281; }
.form-status.error{   color:#ff6b6b; }








/* Footer (black bar) */
.footer{background:#0b0b0b;color:#f2f2f2;text-align:center;padding:48px 20px}
.footer .icons{display:flex;justify-content:center;gap:18px;margin:16px 0}
.footer .icons a{color:#f2f2f2;text-decoration:none;font-weight:600}
.footer small{color:#c9c9c9}

/* Reveal-on-scroll */
.reveal-on-scroll{opacity:.001; transform:translateY(8px); transition:opacity .5s ease, transform .5s ease}
.reveal-on-scroll.is-visible{opacity:1; transform:none}
.delay-1{transition-delay:.08s} .delay-2{transition-delay:.16s}

.page-title{font-size:clamp(26px,4vw,40px); margin-bottom:16px}
@media (max-width:480px){ .page-title{font-size:clamp(20px,5.5vw,28px)} }



/* ===== Certification filters (chips) ===== */
.filters{ display:flex; flex-wrap:wrap; gap:10px }
@media (max-width:480px){ .filters{gap:8px} .chip{font-size:1rem;padding:6px 10px} }
.chip{
    font-size: 1.25rem;
    appearance:none;
    background:transparent;
    border:1px solid rgba(255,255,255,.2);
    color:var(--text);
    padding:8px 12px;
    border-radius:999px;
    font-weight:700;
    cursor:pointer
}
.chip:hover{ border-color: var(--brand) }
.chip.active{ background: linear-gradient(135deg, var(--brand), var(--ring)); color:#fff; border-color: transparent }
.cert-actions{ margin-top:10px }


/* Certifications grid: lock proportions and keep slots when filtering */
.grid.cert-grid{
  max-width: 1100px;
  margin: 16px auto 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(360px, 1fr)); /* always 2 columns on desktop */
  gap: 24px;
  align-items: start;
  justify-content: center; /* center the two columns */
}

/* When filtered out, hide without collapsing the grid slot */
.grid.cert-grid .card.is-hidden{
  visibility: hidden;
  pointer-events: none;
}

/* Tablet: fall back to one column */
@media (max-width: 900px){
  .grid.cert-grid{ grid-template-columns: 1fr; }
}

/* Mobile: compact spacing */
@media (max-width: 640px){
  .grid.cert-grid{ gap: 16px; }
}

@media (max-width: 480px){
  .grid.cert-grid{ gap: 12px; }
}




/* ===== In-page PDF modal viewer ===== */
.pdf-modal{ position: fixed; inset: 0; background: rgba(0,0,0,.6); display: none; align-items: center; justify-content: center; z-index: 100 }
.pdf-modal.open{ display:flex }
.pdf-modal .panel{ width: min( calc(100vw - 32px), 1100px ); height: min(90vh, 1200px); background: var(--panel); border: 1px solid var(--border); border-radius: 12px; display:flex; flex-direction: column; overflow: hidden }
.pdf-toolbar{ display:flex; align-items:center; gap:8px; padding:10px 12px; border-bottom:1px solid var(--border); background: rgba(10,15,20,.9); color:var(--text) }
.pdf-toolbar .spacer{ flex:1 }
.pdf-btn{ appearance:none; border:1px solid var(--border); background: var(--card); color: var(--text); padding:6px 10px; border-radius:8px; cursor:pointer }
.pdf-btn:hover{ border-color: var(--brand) }
.pdf-canvas-wrap{ flex:1; overflow:auto; background:#fff; padding:12px }
#pdfPages canvas{ display:block; width:100%; height:auto; margin:0 auto 12px }

/* Markdown Documentation Styling */
#mdContent { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif; line-height: 1.6; color: var(--text); }
#mdContent h1 { font-size: 2rem; margin: 1.5rem 0 1rem; color: var(--brand); border-bottom: 2px solid var(--brand); padding-bottom: 0.5rem; }
#mdContent h2 { font-size: 1.5rem; margin: 1.5rem 0 0.75rem; color: var(--accent); border-bottom: 1px solid var(--border); padding-bottom: 0.3rem; }
#mdContent h3 { font-size: 1.25rem; margin: 1.25rem 0 0.5rem; color: var(--text); }
#mdContent p { margin: 0.75rem 0; }
#mdContent code { background: rgba(0,0,0,0.05); padding: 2px 6px; border-radius: 4px; font-family: 'Courier New', monospace; font-size: 0.9em; }
#mdContent pre { background: var(--card); border: 1px solid var(--border); border-radius: 8px; padding: 1rem; overflow-x: auto; margin: 1rem 0; }
#mdContent pre code { background: none; padding: 0; }
#mdContent ul, #mdContent ol { margin: 0.75rem 0; padding-left: 2rem; }
#mdContent li { margin: 0.25rem 0; }
#mdContent a { color: var(--brand); text-decoration: none; }
#mdContent a:hover { text-decoration: underline; }
#mdContent blockquote { border-left: 4px solid var(--brand); padding-left: 1rem; margin: 1rem 0; color: var(--muted); }
#mdContent hr { border: none; border-top: 1px solid var(--border); margin: 2rem 0; }
#mdContent strong { font-weight: 600; }
#mdContent table { border-collapse: collapse; width: 100%; margin: 1rem 0; }
#mdContent th, #mdContent td { border: 1px solid var(--border); padding: 0.5rem; text-align: left; }
#mdContent th { background: var(--card); font-weight: 600; }

/* ===== IMDB project page polish ===== */
.imdb-page .report-hero { margin: .5rem 0 1.25rem; }
.imdb-page .report-title { margin: 0 0 .25rem; }
.imdb-page .report-intro { margin: .5rem 0 0.75rem; max-width: 80ch; }
.imdb-page .report-links .sep { color: var(--muted, #666); margin: 0 .35rem; }

/* small stats row */
.imdb-page .stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
  margin: 0 0 1rem;
}
.imdb-page .stat {
  padding: .6rem .7rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--card);
}
.imdb-page .stat-label { margin-bottom: .2rem; }
.imdb-page .stat-value { font-weight: 600; }

/* sections & lists */
.imdb-page .section { margin: 1.25rem 0; }
.imdb-page .tight-list { margin: .4rem 0 0; padding-left: 1rem; }
.imdb-page .tight-list li { margin: .25rem 0; }

/* responsive iframe */
.imdb-page .imdb-embed-wrap { position: relative; width: 100%; max-width: 1200px; margin: .5rem auto 1rem; }
.imdb-page .imdb-embed-16x9 { position: relative; padding-top: 56.25%; }
.imdb-page .imdb-embed-16x9 iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* gallery */
.imdb-page .imdb-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 12px;
}
.imdb-page .imdb-gallery img { width: 100%; height: auto; display: block; border-radius: 8px; }

/* IMDB utilities */
.btn-row { display: flex; gap: .5rem; flex-wrap: wrap; }
.btn-row.center { justify-content: center; }