/* Navy & Electric Blue theme, loaded last.
   Re-points the compiled theme's tokens and softens its neo-brutalist styling
   (thick black borders, hard offset shadows, italic caps headings) into a clean, light look. */

:root {
  --bg: #F7F9FC;          /* page */
  --bg2: #EEF2F8;         /* subtle panels, menu overlay */
  --fg: #0B1B33;          /* deep navy: text, dark panels */
  --accent1: #2563EB;     /* electric blue: primary */
  --accent2: #E8F0FE;     /* pale blue tint */
  --accent3: #D5F5F0;     /* pale teal tint */
  --accent4: #14B8A6;     /* teal */
  --surface: #FFFFFF;
  --line: #DCE3EE;
  --line-strong: #C5D0E0;
  --blue-700: #1D4ED8;
  --shadow-sm: 0 1px 2px rgba(11, 27, 51, .05), 0 2px 8px rgba(11, 27, 51, .05);
  --shadow: 0 1px 2px rgba(11, 27, 51, .06), 0 8px 24px rgba(11, 27, 51, .08);
  --shadow-lg: 0 2px 4px rgba(11, 27, 51, .06), 0 20px 48px rgba(11, 27, 51, .12);

  /* typography.css ink scale */
  --ink: #0B1B33;
  --ink-2: #3A4A63;
  --ink-3: #5B6B84;
}

::selection { background: #BFD3FB; color: var(--ink); }

/* ---------- headings: clean, upright, sentence case ---------- */
h1 { font-style: normal; letter-spacing: -.01em; }
h2, h3 {
  font-family: var(--read);
  font-style: normal;
  text-transform: none;
  font-weight: 700;
  letter-spacing: -.025em;
  line-height: 1.15;
  color: var(--ink);
}
h2 { font-size: clamp(2rem, 4.2vw, 3.25rem); }
h3 { font-size: 1.35rem; }
.section-header p.mn { color: var(--accent1); font-weight: 600; }

/* ---------- nav ---------- */
/* the nav badge is just the LinkedIn mark: no tile, border or padding around it */
nav .logo { padding: 0; background: none; border-radius: 0; }
nav .logo .nav-li { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; color: #0A66C2; transition: transform .15s, color .15s; }
nav .logo .nav-li svg { width: 2rem; height: 2rem; fill: currentColor; } /* white rect behind keeps the "in" letters white over any content */
@media (hover: hover) { nav .logo .nav-li:hover { color: #004182; transform: translateY(-1px); } }
nav .logo .nav-li:focus-visible { outline: 3px solid var(--accent1); outline-offset: 3px; border-radius: .3em; }
nav .menu-toggle-btn { background: var(--surface); box-shadow: var(--shadow-sm); border: 1px solid var(--line); }
nav .menu-toggle-btn.menu-open { background: var(--fg); border-color: var(--fg); }
.nav-overlay .nav-items .nav-item { box-shadow: var(--shadow-sm); }
.nav-overlay .nav-items .nav-item.active { background: var(--accent1); }

/* ---------- hero ---------- */
.hero-img-holder .hero-img { border: 1px solid var(--line); box-shadow: var(--shadow-lg); }
.btn { border: 1px solid var(--line-strong); background: var(--surface); box-shadow: var(--shadow-sm); }
.btn:hover { background: var(--bg2); color: var(--ink); border-color: var(--line-strong); }
.btn--solid { background: var(--accent1); border-color: var(--accent1); color: #fff; }
.btn--solid:hover { background: var(--blue-700); border-color: var(--blue-700); color: #fff; }

/* ---------- about ---------- */
.about-hero .about-hero-portrait { border: .35em solid var(--surface); outline: 0; box-shadow: var(--shadow-lg); }

/* ---------- stats ---------- */
.stats .stats-item-1, .stats .stats-item-2, .stats .stats-item-3 { box-shadow: var(--shadow); }
.stats .stats-item-1 { background: var(--accent1); color: #fff; }
.stats .stats-item-2 { background: var(--surface); border: 1px solid var(--line); }
.stats .stats-item-1 p.mn, .stats .stats-item-3 p.mn { color: rgba(255, 255, 255, .85); }

/* ---------- services ---------- */
.services-header .services-profile-icon { outline: 0; border: .25rem solid var(--surface); box-shadow: var(--shadow); }
.services .service-card-inner { border: 1px solid var(--line); box-shadow: var(--shadow); }
.services #service-card-1 .service-card-inner { background: var(--accent1); color: #fff; border-color: var(--accent1); }
.services #service-card-2 .service-card-inner { background: var(--surface); }
.services #service-card-3 .service-card-inner { background: var(--accent2); }
.services #service-card-4 .service-card-inner { background: var(--fg); border-color: var(--fg); }
.services .service-card-img { border: 1px solid var(--line); }

/* ---------- case study ---------- */
.case-study .case-study-item { border: 1px solid var(--line); box-shadow: var(--shadow-sm); background: var(--surface); }
.case-study .case-study-item:nth-child(1) { background: var(--accent1); border-color: var(--accent1); color: #fff; }
.case-study .case-study-item:nth-child(1) .mn { color: rgba(255, 255, 255, .85); }
.case-study .case-study-item:nth-child(2) { background: var(--surface); }
.case-study .case-study-item:nth-child(3) { background: var(--accent2); border-color: #D3E1FB; }
.case-study .case-study-item:nth-child(4) { background: var(--fg); border-color: var(--fg); }
.case-study .case-study-item:nth-child(4) .mn { color: #93C5FD; }

/* ---------- engagements ---------- */
.engagements .engagement-row { border-bottom: 1px solid var(--line); }
.engagements .engagement-row:first-child { border-top: 1px solid var(--line); }
.engagements .engagement-row .engagement-logo { border: 1px solid var(--line); box-shadow: var(--shadow-sm); }

/* ---------- expertise ---------- */
.expertise .expertise-grid { border: 1px solid var(--line); box-shadow: var(--shadow); }
.expertise .expertise-card { border-bottom: 1px solid var(--line); }
.expertise .expertise-card h3 { font-size: 1.15rem; }
.pill-list.pills span { border: 1px solid var(--line); background: var(--bg); }

/* ---------- timeline ---------- */
.timeline .timeline-item { border-left: 2px solid var(--line-strong); }
.timeline .timeline-item:before { background: var(--accent1); border: 3px solid var(--surface); box-shadow: 0 0 0 1px var(--accent1); }
.timeline .timeline-card { border: 1px solid var(--line); box-shadow: var(--shadow); }
.timeline .timeline-role { font-size: 1.3rem; }
.timeline .timeline-list-items p::before { color: var(--accent1); opacity: 1; }
.timeline-toggle { color: var(--accent1); border-bottom-color: var(--accent1); }

/* ---------- credentials ---------- */
.credentials .credentials-col { border: 1px solid var(--line); background: var(--surface); box-shadow: var(--shadow-sm); }
.credentials .credentials-col h3 { font-size: 1.15rem; color: var(--accent1); }

/* ---------- code showcase + terminal (dark navy panels) ---------- */
.win {
  --term: #0B1B33; --term-2: #11264A; --term-dim: #8597B3; --term-fg: #E6EDF7;
  --accent1: #7AA2FF; --accent2: #F9D58C; --accent3: #5EEAD4;
  border: 1px solid #1B3158; box-shadow: var(--shadow-lg);
}
.win-bar { border-bottom-color: #1B3158; }
.win-dot:nth-child(1) { background: #F87171; } .win-dot:nth-child(2) { background: #FBBF24; } .win-dot:nth-child(3) { background: #34D399; }
.code-tab { border-color: #24406E; }
.code-tab[aria-selected="true"] { background: #2563EB; border-color: #2563EB; color: #fff; }
.code-note, .code-panel pre .ln::before { border-color: #1B3158; }
.code-panel pre .ln::before { color: #3C5478; }
.term-hints button { border: 1px solid var(--line-strong); background: var(--surface); box-shadow: var(--shadow-sm); }
.term-hints button:hover { background: var(--fg); color: #fff; border-color: var(--fg); }

/* ---------- contact CTA ---------- */
.contact-cta .contact-button {
  border: 0; box-shadow: var(--shadow-lg); animation: none;
  background: linear-gradient(135deg, #2563EB 0%, #1D4ED8 55%, #0B1B33 100%);
}
.contact-cta .contact-button:before { background: repeating-linear-gradient(45deg, rgba(255, 255, 255, .05) 0 15px, transparent 15px 30px); }
.contact-cta .contact-text-small p, .contact-cta .contact-text-large h1 { color: #fff; }

/* ---------- contact page ---------- */
.contact-info-item { background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.contact-info-item:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.contact-info-item .label { background: var(--accent2); color: var(--accent1); font-weight: 600; }
.contact .trail-img { border: 1px solid var(--line); box-shadow: var(--shadow); }

/* ---------- products section (assets/products.css) ---------- */
.products, .side {
  --prod-ink: var(--ink);
  --prod-ink-2: var(--ink-2);
  --prod-line: 1px solid var(--line);
  --prod-shadow: var(--shadow);
}
.prod-card:hover, .side-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.prod-title, .side-title, .prod-stats dt { font-family: var(--read); font-style: normal; text-transform: none; letter-spacing: -.02em; }
.prod-ar, .prod-stats > div, .side .prod-chips li, .products .prod-chips li { border: 1px solid var(--line); }
.prod-list li::before { border: 0; background: var(--accent1); }
.prod-feature { background: var(--surface); }
.prod-mini { border: 1px solid rgba(255, 255, 255, .08); }
.side-card:nth-child(1) .side-media { background: var(--accent2); }
.side-card:nth-child(2) .side-media { background: var(--accent3); }
.side-card:nth-child(3) .side-media { background: var(--bg2); }

/* ---------- footer ---------- */
footer .footer-container { box-shadow: var(--shadow-lg); }

@media (max-width: 1000px) {
  .services .service-card-inner { border: 1px solid var(--line); }
  .prod-card, .side-card, .win { box-shadow: var(--shadow); }
}

/* ---------- profile photo (images/profile/, graded to the palette) ---------- */
.about-hero .about-hero-portrait img { object-fit: cover; object-position: 50% 30%; }
.services-header .services-profile-icon img { object-fit: cover; object-position: 50% 38%; }

/* ---------- review fixes ---------- */
/* Skills now live in "Core expertise" + the stack strip; the big service cards stay in the DOM for the scroll script. */
.services-header, .services { display: none !important; }
/* Keep the name readable over the floating hero card on first paint. */
.hero { position: relative; z-index: 2; pointer-events: none; }
.hero a, .hero .btn { pointer-events: auto; }
.hero-img-holder { position: relative; z-index: 1; }
/* Visible keyboard focus everywhere. */
:focus-visible { outline: 3px solid var(--accent1); outline-offset: 3px; border-radius: 4px; }

/* contact page: availability + CV */
.contact-card-header-main p.contact-avail { font-family: var(--read); font-size: .95rem; font-weight: 600; color: var(--accent1); }
.contact-card-header-main p.contact-ctas { margin-top: .25em; }
.contact-cv { display: inline-block; font-family: var(--read); font-weight: 600; font-size: .95rem; color: #fff; background: var(--accent1);
  padding: .7em 1.2em; border-radius: 999px; box-shadow: var(--shadow-sm); }
.contact-cv:hover { background: var(--blue-700); color: #fff; }

/* contact page: keep heading clear of the fixed logo on small screens */
@media (max-width: 768px) { .contact-page .contact { padding-top: 7em; } }