:root{
  --icon-size: 20pt;
  --spacing: 2.5rem 1.25rem;
  --text-font-size: 13pt;
  --heading-spacing: 2rem 0;
  --heading-font-size: 22pt;
  --selector-gap: .75rem;
  --selector-size: 12pt;
  --item-gap: 28pt;
  --button-font-size: 15pt;
  --input-font-size: 14pt;
}

/* ---- Hamburger nav ---- */

#nav-burger {
  display: flex;
  align-items: center;
  font-size: 1.75rem;
  line-height: 1;
  cursor: pointer;
  user-select: none;
  color: var(--fg);
  padding: 0.1rem 0.4rem;
  transition: color .2s;
}

/* Keep the header bar as a single row: title left, burger right */
header > div {
  flex-direction: row;
  align-items: center;
}

/* Dropdown: hidden by default */
#links {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  flex-direction: column;
  background: black;
  padding: 1.25rem 1.5rem;
  gap: 1.25rem;
  z-index: 100;
  border-top: 1px solid #1a1a1a;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.7);
}

#links > a {
  font-size: 1.1rem;
  padding: 0.35rem 0;
  border-bottom: 1px solid #111;
}

#links > a:last-child {
  border-bottom: none;
}

/* Show dropdown when checkbox is checked */
#nav-toggle:checked ~ div #links {
  display: flex;
}

/* Tint burger red when menu is open */
#nav-toggle:checked ~ div #nav-burger {
  color: var(--red);
}

/* ---- Content layout ---- */

#project-container {
  grid-template-columns: 1fr !important;
}

@media (min-width: 600px) {
  #project-container {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

.gallery-grid {
  columns: 1 !important;
}

.repo-cards {
  grid-template-columns: 1fr !important;
}

@media (min-width: 600px) {
  .repo-cards {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* Stack form inputs vertically */
form > div {
  flex-direction: column;
}

form > div > input {
  width: 100% !important;
  box-sizing: border-box;
}

form > textarea {
  width: 100%;
  box-sizing: border-box;
}

/* Graph: render at natural size and scroll horizontally */
#codeberg-graph {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

#codeberg-graph svg {
  width: auto !important;
  height: auto;
}

/* Stats: wrap on narrow screens */
#stats-numbers {
  flex-wrap: wrap;
  gap: 1.5rem;
}

/* Commit feed: show repo + message only, hide sha and timestamp */
.commit-entry {
  grid-template-columns: 8rem 1fr;
}

.commit-sha,
.commit-time {
  display: none;
}

/* Socials: 3-column grid */
.socials {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  margin: 0 !important;
}

.socials > a {
  width: auto !important;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Horizontal scroll for wide tables */
.section-spacer > table,
main > table {
  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}