/* Theme tokens */
:root {
  /* Required palette */
  --blue-1: #011f4b; /* darkest */
  --blue-2: #03396c;
  --blue-3: #005b96;
  --blue-4: #6497b1;
  --blue-5: #b3cde0; /* lightest */

  /* Mapped tokens */
  --bg: var(--blue-1);
  --bg-elev: var(--blue-2);
  --text: var(--blue-5);
  --muted: var(--blue-4);
  --accent: var(--blue-4);
  --accent-600: var(--blue-3);
  --border: var(--blue-3);
  --shadow: none;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font: 16px/1.6 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  color: var(--text);
  background: var(--bg);
}

.skip-link {
  position: absolute; left: -999px; top: auto; width: 1px; height: 1px; overflow: hidden;
}
.skip-link:focus { position: static; width: auto; height: auto; padding: .5rem .75rem; background: var(--accent); color: var(--blue-1); }

.container { width: min(1100px, 92%); margin-inline: auto; }
.section { padding: 5rem 0; }
.section-hero { padding: 7rem 0 5rem; }

h1, h2, h3 { line-height: 1.2; margin: 0 0 1rem; }
 h1 { font-size: clamp(2rem, 3vw + 1rem, 3rem); }
 h2 { font-size: clamp(1.5rem, 2vw + .75rem, 2.25rem); }
 h3 { font-size: 1.15rem; }
 p { color: var(--text); margin: 0 0 1rem; }
 .lead { color: var(--muted); font-size: 1.125rem; }
 .accent { color: var(--accent); }

/* Header */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: var(--bg-elev);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--blue-3);
}
.header-inner { display: flex; align-items: center; justify-content: space-between; padding: .75rem 0; }
.brand { display: inline-flex; align-items: center; gap: .5rem; text-decoration: none; color: var(--text); font-weight: 600; }
.brand-mark { color: var(--accent); }
.nav ul { list-style: none; display: flex; gap: 1rem; padding: 0; margin: 0; }
.nav a { color: var(--blue-5); text-decoration: none; padding: .5rem .25rem; border-radius: .25rem; }
.nav a:hover, .nav a:focus { color: var(--text); }

/* Mobile nav */
.nav-toggle { display: none; background: none; border: 0; cursor: pointer; }
.nav-toggle .bar { display: block; width: 24px; height: 2px; background: var(--text); margin: 5px 0; transition: transform .2s ease; }
@media (max-width: 760px) {
  .nav-toggle { display: inline-block; }
  .nav { position: absolute; inset: 60px 0 auto 0; background: var(--bg); border-bottom: 1px solid var(--blue-3); display: none; }
  .nav.open { display: block; }
  .nav ul { flex-direction: column; gap: .5rem; padding: .75rem 1rem 1rem; }
}

/* Hero */
.hero-inner { text-align: center; }
.actions { display: inline-flex; gap: .75rem; margin-top: 1.25rem; }

/* Hero image: smaller and aligned left */
.hero-image {
  display: block;           /* ignore parent text-align */
  width: clamp(280px, 48vw, 480px); 
  height: auto;
  margin: .75rem auto 0;    /* center */
  border: 1px solid var(--blue-3);
  border-radius: 12px;
  object-fit: cover;
}

.btn { display: inline-block; color: var(--text); background: transparent; border: 1px solid var(--blue-3); padding: .6rem .95rem; border-radius: .5rem; text-decoration: none; transition: background .2s ease, border-color .2s ease; }
.btn:hover, .btn:focus { border-color: var(--accent); }
.btn-accent { background: var(--accent); color: var(--blue-1); border-color: var(--accent-600); box-shadow: var(--shadow); }
.btn-accent:hover, .btn-accent:focus { background: var(--accent-600); }
.btn-sm { padding: .45rem .7rem; font-size: .9rem; }

/* Grid & Cards */
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
@media (max-width: 980px) { .grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .grid { grid-template-columns: 1fr; } }
.card { background: var(--bg-elev); border: 1px solid var(--blue-3); border-radius: .75rem; box-shadow: var(--shadow); }
.card-body { padding: 1rem; }
.card-actions { display: flex; gap: .5rem; margin-top: .75rem; }

/* Certificates */
.cert-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .75rem; }
.cert-list li { background: var(--bg-elev); border: 1px solid var(--border); border-radius: .5rem; padding: .75rem; }
.cert-list p { margin: 0; font-weight: 500; }
.cert-list .card-actions { margin-top: .5rem; flex-wrap: wrap; }
.cert-list a { word-break: break-word; overflow-wrap: anywhere; }

/* Education layout */
.edu-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
@media (max-width: 760px) { .edu-grid { grid-template-columns: 1fr; } }
.col-span-2 { grid-column: 1 / -1; }
.card-lg .card-body { padding: 1.25rem; }

/* Chips */
.chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .5rem; }
.chip { display: inline-block; background: var(--bg-elev); border: 1px solid var(--blue-4); color: var(--text); padding: .25rem .5rem; border-radius: 999px; font-size: .9rem; }

/* Contact */
.contact-list { list-style: none; padding: 0; margin: .5rem 0 0; }
.contact-list a { color: var(--accent); text-decoration: none; }
.contact-list a:hover, .contact-list a:focus { text-decoration: underline; }

/* Footer */
.site-footer { border-top: 1px solid var(--blue-3); padding: 2rem 0; color: var(--muted); }

/* Accessibility & polish */
:focus-visible { outline: 2px solid var(--blue-4); outline-offset: 2px; }
::selection { background: var(--blue-4); color: var(--blue-1); }

/* 404 page */
.center { min-height: calc(100vh - 140px); display: grid; place-items: center; text-align: center; }