@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;600&display=swap');

/* ---------- Fonts ---------- */
body,
h1, h2, h3, h4, h5, h6,
.navbar-custom .navbar-brand,
.navbar-custom .nav-link {
  font-family: 'IBM Plex Mono', monospace;
}

body {
  font-size: 15px;
}

/* ---------- Layout variables ---------- */
:root {
  --content-width: 730px;  /* width of the text column; try 800px for wider */
  --gutter: 12px;          /* inner padding of the column */
}

/* ---------- Body column ---------- */
.container-md {
  max-width: var(--content-width);
}

.col-xl-8,
.col-lg-10 {
  flex: 0 0 100%;
  max-width: 100%;
  margin-left: 0;
  padding-left: 0;
  padding-right: 0;
}

/* ---------- Navbar ---------- */
/* Navbar edges follow the same column as the body text */
.navbar-custom {
  padding-left: max(15px, calc((100% - var(--content-width)) / 2 + var(--gutter)));
  padding-right: max(15px, calc((100% - var(--content-width)) / 2 + var(--gutter)));
}

/* In case the navbar has its own inner container, neutralise it */
.navbar-custom > .container-md,
.navbar-custom > .container {
  max-width: none;
  padding-left: 0;
  padding-right: 0;
}

.navbar-custom .navbar-brand {
  font-weight: 600;
  margin-left: -12px !important;
  padding-left: 0;
}

.navbar-custom .nav-link,
.navbar-custom .navbar-nav .nav-link {
  text-transform: none !important;
  font-size: 14px !important;
}

/* ---------- Mid-size screens: avoid logo overlapping the menu ---------- */
@media (max-width: 1000px) {
  .navbar-custom .nav-link {
    font-size: 13px !important;
    padding-left: 6px !important;
    padding-right: 6px !important;
  }
}

/* ---------- Phones ---------- */
@media (max-width: 700px) {
  /* side padding that the wide-column rule removed */
  .container-md {
    padding-left: 15px;
    padding-right: 15px;
  }

  div[role="main"] {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  .navbar-custom {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  /* slightly smaller text so monospace lines fit */
  body {
    font-size: 14px;
  }

  /* let long words, URLs and emails wrap instead of stretching the page */
  p, li, td, a, h1, h2, h3 {
    overflow-wrap: anywhere;
  }

  img, table {
    max-width: 100%;
  }

  pre, code {
    overflow-x: auto;
    max-width: 100%;
  }

  /* let the CV / Publications / Projects / Contact buttons wrap */
  .btn-group,
  .button-row {
    flex-wrap: wrap;
  }

  /* stop any leftover wide element from making the page scroll sideways */
  html, body {
    max-width: 100%;
    overflow-x: hidden;
  }
}

.profile-photo {
  object-position: center 30%;
  float: right;
  width: 200px;
  aspect-ratio: 1 / 1;      /* square crop; remove for the original proportions */
  object-fit: cover;
  border-radius: 8px;       /* use 50% for a circular photo */
  margin: 4px 0 16px 24px;  /* space between the photo and the text */
}

@media (max-width: 700px) {
  .profile-photo {
    float: none;
    display: block;
    width: 60%;
    max-width: 220px;
    margin: 0 auto 20px;
  }
}