/* Fix horizontal scrollbar from Bootstrap row margins */
html, body {
  overflow-x: hidden;
}

/* Always reserve room for the vertical scrollbar, even on pages short enough
   not to need one. Blog and Research overflow the viewport while Projects,
   Contact and Education do not, so without this the centred .nav-container and
   .container shift sideways by the scrollbar width (~15px) every time you move
   between the two groups — the nav appears to jump on those transitions only. */
html {
  scrollbar-gutter: stable;
}

/* Safari below 18.2 has no scrollbar-gutter; force a permanent scrollbar. */
@supports not (scrollbar-gutter: stable) {
  html {
    overflow-y: scroll;
  }
}

/* ========== Site Navigation ========== */
.site-nav {
  padding: 1rem 0;
  border-bottom: 1px solid #dee2e6;
  margin-bottom: 2rem;
}

.nav-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
}

/* Brand mark: a ring, not a wordmark. The hostname already says whose site
   this is, so the brand only has to be a home affordance — sized to match the
   burger opposite it so the two ends of the bar balance. currentColor keeps it
   correct in both themes without a dark-mode override. */
.nav-brand {
  display: block;
  flex: none;
  width: 1.5rem;
  height: 1.5rem;
  border: 3px solid currentColor;
  border-radius: 50%;
  color: inherit;
  text-decoration: none;
  transition: color 0.2s ease;
}

.nav-brand:hover {
  color: var(--bs-link-color, #0d6efd);
}

.nav-brand:focus-visible {
  outline: 2px solid var(--bs-link-color, #0d6efd);
  outline-offset: 3px;
}

.nav-links {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 0.5rem;
}

.nav-links .nav-link {
  padding: 0.25rem 0.75rem;
  text-decoration: none;
  border-radius: 4px;
  transition: background-color 0.2s ease;
}

.nav-links .nav-link:hover {
  background-color: rgba(0, 0, 0, 0.05);
}

/* Hamburger — CSS only, no JavaScript. Hidden above the mobile breakpoint. */
.nav-toggle {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
}

.nav-burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 1.6rem;
  padding: 0.4rem 0;
  margin: 0;
  cursor: pointer;
}

.nav-burger span {
  display: block;
  width: 100%;
  height: 2px;
  background-color: currentColor;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.nav-toggle:focus-visible + .nav-burger {
  outline: 2px solid var(--bs-link-color, #0d6efd);
  outline-offset: 3px;
}

@media (max-width: 600px) {
  .nav-burger {
    display: flex;
  }

  /* Anchor for the absolutely-positioned dropdown below. */
  .nav-container {
    position: relative;
  }

  /* Open menu is an overlay panel, not part of the flow: absolute positioning
     means opening it drops a menu OVER the page rather than growing the nav bar
     and pushing the content down. Kept in the layer via visibility/opacity (not
     display:none) so it can fade instead of snapping. */
  .nav-links {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    position: absolute;
    top: calc(100% + 0.5rem);
    right: 0;
    z-index: 100;
    min-width: 11rem;
    padding: 0.5rem;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    /* Frosted glass: semi-transparent so the page shows through, with a blur
       of the content behind it. NB: NO transform on this element — an element
       carrying both `transform` and `backdrop-filter` drops the blur in Chrome
       and Safari and paints a flat, solid-looking fill instead. So the open
       menu fades in with opacity alone, and the backdrop blur actually renders. */
    background-color: rgba(255, 255, 255, 0.6);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s ease, visibility 0.15s;
  }

  .nav-toggle:checked ~ .nav-links {
    opacity: 1;
    visibility: visible;
  }

  .nav-links .nav-link {
    display: block;
    padding: 0.5rem 0.75rem;
  }

  /* Bars fold into an X while open */
  .nav-toggle:checked + .nav-burger span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }

  .nav-toggle:checked + .nav-burger span:nth-child(2) {
    opacity: 0;
  }

  .nav-toggle:checked + .nav-burger span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }
}

/* ========== Profile photo ========== */

/* Contain the float: without this a short bio lets the portrait escape its
   block, and the next section rides up beside it. */
.bio,
.contact-info {
  display: flow-root;
}

.profile-photo {
  width: 160px;
  height: 160px;
  /* 6px matches the radius used by the featured-post box and the crawl toy,
     so the portrait reads as part of the same set rather than a stray asset. */
  border-radius: 6px;
  float: left;
  margin: 0 1.25rem 0.75rem 0;
}

/* Narrow screens: floating a 160px block beside body text leaves a column too
   thin to read, so it stacks instead. */
@media (max-width: 480px) {
  .profile-photo {
    float: none;
    display: block;
    margin: 0 0 1rem;
  }
}

/* ========== Main Content ========== */
.container {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 1rem;
}

.content-wrapper {
  max-width: 650px;
  margin: 0 auto;
}

/* ========== Landing Page ========== */
.landing-header {
  text-align: center;
  margin-bottom: 2rem;
}

/* Two-line header: the plain label first, the sharper claim under it. The rule
   sits on the lower line and hugs it (inline-block), keeping the original
   short-centred-underline idiom rather than a full-width divider. */
.landing-header .subtitle {
  /* block, so the line below starts fresh rather than flowing beside it */
  display: block;
  margin-bottom: 0.15rem;
  padding-bottom: 0;
}

.landing-header .subtitle-secondary {
  /* inline-block, so the rule is only as wide as the words above it */
  display: inline-block;
  margin: 0;
  padding-bottom: 0.5rem;
  font-size: 0.9rem;
  letter-spacing: 0.5px;
  /* Subordinate to the label above without needing a second colour token. */
  opacity: 0.7;
}

.bio {
  text-align: left;
}

.contact-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0;
  list-style: none;
}

/* ========== Blog ========== */
.blog-list {
  margin-top: 1.5rem;
}

.blog-preview {
  margin-bottom: 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid #dee2e6;
}

.blog-preview h2 {
  font-size: 1.25rem;
  margin-bottom: 0.25rem;
}

.blog-preview h2 a {
  text-decoration: none;
}

.blog-preview time {
  font-size: 0.875rem;
  color: #6c757d;
}

.blog-preview p {
  margin-top: 0.5rem;
  margin-bottom: 0;
}

/* Blog Post */
.blog-post .post-header {
  margin-bottom: 2rem;
}

.blog-post h1 {
  margin-bottom: 0.5rem;
}

.blog-post .post-date {
  font-size: 0.875rem;
  color: #6c757d;
}

.blog-post .post-content {
  line-height: 1.7;
}

.blog-post .post-content h2 {
  margin-top: 2rem;
  margin-bottom: 1rem;
}

.blog-post .post-nav {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid #dee2e6;
}

/* ========== Projects ========== */
/* The Python exposé leads the page; the rule under it matches the separator
   between individual projects so it reads as part of the same rhythm. */
.projects-intro {
  margin-bottom: 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid #dee2e6;
}

.projects-list .project {
  margin-bottom: 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid #dee2e6;
}

.projects-list .project h2 {
  font-size: 1.25rem;
  margin-bottom: 0.5rem;
}

.project-link {
  font-size: 0.875rem;
}

/* ========== Education ========== */
.education-item {
  margin-bottom: 2rem;
}

.publications {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid #dee2e6;
}

/* ========== Contact ========== */
.contact-methods {
  list-style: none;
  padding: 0;
  margin-top: 1.5rem;
}

.contact-methods li {
  margin-bottom: 0.75rem;
}

.contact-methods a {
  margin-left: 0.5rem;
}

/* ========== Code Blocks ========== */
.code-block {
  position: relative;
  background-color: #2d2d2d;
  border: 1px solid #444;
  border-radius: 6px;
  margin: 1.5rem 0;
  overflow: hidden;
}

.code-block .code-lang {
  display: block;
  padding: 0.4rem 1rem 0;
  font-size: 0.75rem;
  color: #888;
  font-family: monospace;
}

.code-block pre {
  margin: 0;
  padding: 0.75rem 1rem 1rem;
  overflow-x: auto;
}

.code-block code {
  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
  font-size: 0.875rem;
  line-height: 1.5;
  color: #e0e0e0;
  background: none;
}

/* Inline code */
code {
  background-color: #f0f0f0;
  color: #333;
  padding: 0.15rem 0.4rem;
  border-radius: 3px;
  font-size: 0.875em;
}

/* Code inside code blocks should not get inline styling */
.code-block code {
  background: none;
  padding: 0;
  border-radius: 0;
}

/* Dark mode - respects OS preference, no JavaScript */
@media (prefers-color-scheme: dark) {
  :root {
    --bs-body-bg: #1a1a1a;
    --bs-body-color: #e0e0e0;
    --bs-link-color: #6ea8fe;
    --bs-link-hover-color: #9ec5fe;
    --bs-border-color: #3a3a3a;
  }

  body {
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
  }

  /* Invert SVG icons for visibility on dark background */
  p a img[src$=".svg"] {
    filter: invert(0.85) hue-rotate(180deg);
  }

  /* Adjust border colors */
  .border-top, .border-bottom {
    border-color: var(--bs-border-color) !important;
  }

  /* Nav links */
  .nav-link {
    color: var(--bs-link-color);
  }
  .nav-link:hover {
    color: var(--bs-link-hover-color);
  }

  /* Site navigation dark mode */
  .site-nav {
    border-bottom-color: var(--bs-border-color);
  }

  .nav-links .nav-link:hover {
    background-color: rgba(255, 255, 255, 0.05);
  }

  /* Blog preview dark mode */
  .blog-preview {
    border-bottom-color: var(--bs-border-color);
  }

  .blog-preview time,
  .blog-post .post-date {
    color: #9a9a9a;
  }

  /* Project borders dark mode */
  .projects-intro,
  .projects-list .project,
  .publications,
  .blog-post .post-nav {
    border-color: var(--bs-border-color);
  }

  /* Code dark mode */
  code {
    background-color: #2d2d2d;
    color: #e0e0e0;
  }

  .code-block {
    border-color: #555;
  }

  /* Dark scrollbar */
  ::-webkit-scrollbar {
    width: 8px;
  }
  ::-webkit-scrollbar-track {
    background: #1a1a1a;
  }
  ::-webkit-scrollbar-thumb {
    background: #3a3a3a;
    border-radius: 4px;
  }
  ::-webkit-scrollbar-thumb:hover {
    background: #4a4a4a;
  }
  /* Firefox */
  * {
    scrollbar-width: thin;
    scrollbar-color: #3a3a3a #1a1a1a;
  }
}

/* Dark frosted panel for the mobile overlay menu. Combined query so the dark
   translucent background only applies to the mobile dropdown, never to the
   desktop horizontal nav, where .nav-links has no panel. */
@media (prefers-color-scheme: dark) and (max-width: 600px) {
  .nav-links {
    background-color: rgba(26, 26, 26, 0.6);
    border-color: var(--bs-border-color);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  }
}