/* Additions on top of main.css. Tokens, panels, cards, header and footer all
   come from the reference stylesheet; this file only adds the layout pieces the
   reference template doesn't ship with. */

main > section + section {
  margin-top: 1.5rem;
}

/* The header sits fixed on top of the page, so without this an anchored
   section starts underneath it. Leave the header's height plus a little air. */
main [id] {
  scroll-margin-top: 4rem;
}

@media (min-width: 64rem) {
  main [id] {
    scroll-margin-top: 5rem;
  }
}

/* main.css points at /static/images/noise.png — absolute, so it breaks as soon
   as the site isn't served from the host root. Same file, relative to this css. */
body {
  background-image: url("../images/noise.png");
}

/* main.css has no base link colour, so bare links (the contact email) fell back
   to the browser default, which is #9e9eff on dark and failed contrast. */
a {
  color: var(--accent-primary);
}

a:hover {
  color: var(--accent-secondary);
}

/* main.css hides the skip link with display:none, which also takes it out of
   the tab order, so its :focus-visible reveal rule could never run. Clip it
   out of sight instead and let focus bring it back. */
.skip-link {
  display: block;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link:focus-visible {
  width: auto;
  height: auto;
  clip-path: none;
  top: 0.5rem;
  left: 0.5rem;
  z-index: 1000;
  padding: 0.5rem 0.75rem;
}

/* ---------- hero ---------- */

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 0.9fr);
  gap: 1.5rem 2.5rem;
  align-items: center;
  margin-bottom: 1.5rem;
}

/* Two-column hero reads better left-aligned than the reference's centred block. */
.hero .hero-container {
  text-align: left;
}

.hero .hero-title {
  margin-bottom: 0.4em;
}

.hero .hero-subtitle {
  margin-bottom: 1.25rem;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.btn {
  display: inline-block;
  padding: 0.55rem 1.25rem;
  border-radius: 5px;
  border: 1px solid var(--accent-primary);
  background-color: var(--accent-primary);
  color: var(--text-on-accent);
  font-weight: bold;
  text-decoration: none;
  box-shadow: 0 2px 4px rgb(0 0 0 / 25%);
}

.btn:hover {
  background-color: var(--accent-secondary);
  border-color: var(--accent-secondary);
  color: var(--text-on-accent);
}

.btn--ghost {
  background-color: transparent;
  color: var(--accent-primary);
}

.btn--ghost:hover {
  background-color: var(--bg-secondary);
  color: var(--accent-secondary);
}

.portrait {
  margin: 0;
}

.portrait img {
  width: 100%;
  height: auto;
  background-color: var(--bg-secondary);
  border-radius: 8px;
  box-shadow: 0 2px 4px rgb(0 0 0 / 30%);
}

@media (max-width: 55rem) {
  .hero {
    grid-template-columns: 1fr;
  }

  .portrait {
    max-width: 16rem;
  }
}

/* Skill cards are two-up: four of them would leave an orphan in the
   reference's 3-column entry grid. min() keeps the column from overflowing
   narrow viewports. */
#skills .entry-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(24rem, 100%), 1fr));
}

/* main.css only sets a bottom margin on card paragraphs, so the user agent's
   1em top margin survives and doubles the gap in a two-paragraph card. */
#skills .entry-card p {
  margin-top: 0;
}

/* Likewise, every paragraph carries flex-grow, so a stretched row would spread
   the card apart. Only the last paragraph needs to absorb the slack. */
#skills .entry-card p:not(:last-of-type) {
  flex-grow: 0;
}

/* ---------- service grid inside a panel ---------- */

/* main.css ships panels with 8px 14px padding, which crowds the heading and
   leaves the text almost touching the edges. */
.portfolio-overview-container {
  padding: 1.25rem clamp(1.25rem, 3vw, 2rem) 1.5rem;
}

/* Two blurbs per row. Four columns at the panel's inner width gave about
   24 characters a line, which read like a stack of sticky notes. */
.service-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr));
  gap: 1.5rem 2.5rem;
}

.service-grid h3 {
  margin-bottom: 0.35rem;
  font-size: 1.35rem;
  color: var(--accent-primary);
}

.service-grid p {
  margin: 0;
  color: var(--text-secondary);
}

.stack {
  display: grid;
  gap: 0.9rem;
  max-width: 62ch;
  margin: 1.25rem 0 0;
  padding: 0;
  list-style: none;
}

.stack li {
  border-left: 3px solid var(--accent-primary);
  padding-left: 0.9rem;
  color: var(--text-secondary);
}

.stack strong {
  display: block;
  color: var(--text-primary);
}

.social {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.25rem;
  margin: 1.25rem 0 0;
  padding: 0;
  list-style: none;
}

.social a {
  font-weight: bold;
}

/* ---------- icons ---------- */

/* Inline sprite lives at the top of each page; keep it out of the layout. */
.icon-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.icon {
  width: 1.15em;
  height: 1.15em;
  flex: none;
  fill: currentColor;
}

.social a,
.footer-social a,
.contact-legal a,
.footer-legal a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--text-primary);
  font-weight: bold;
  text-decoration: none;
}

.social a:hover,
.footer-social a:hover,
.contact-legal a:hover,
.footer-legal a:hover {
  color: var(--accent-primary);
  text-decoration: underline;
}

.contact-legal {
  margin: 0.75rem 0 0;
}

.footer-social {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.35rem 1rem;
}

.footer-legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.35rem 1rem;
}

/* ---------- legal page ---------- */

.legal {
  max-width: 56rem;
  margin-inline: auto;
}

.legal .prose {
  padding: 0.5rem 0.25rem 0;
}

.legal .lead {
  margin-bottom: 1.5rem;
  color: var(--text-primary);
  font-size: 1.1rem;
}

.legal .prose h2 {
  padding-top: 1.25rem;
  border-top: 1px solid var(--border-default);
}

.legal .prose h2:first-of-type {
  padding-top: 0;
  border-top: 0;
}

.legal .prose a {
  color: var(--accent-primary);
}

.legal .prose address {
  background-color: var(--bg-main);
  border-left: 3px solid var(--accent-primary);
  border-radius: 6px;
  padding: 0.75rem 1rem;
  color: var(--text-primary);
}

.legal-actions {
  margin-top: 2rem;
}

/* ---------- bilingual legal page ---------- */

/* Two clear buttons above both notices, centred over the column. The element
   is a nav, so main.css's bare `nav` rule (flex + 10px padding) applies too. */
.lang-switch {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  margin: 0 0 1.75rem;
  padding: 0;
}

.lang-switch a {
  display: inline-block;
  padding: 0.5rem 1.25rem;
  border: 1px solid var(--accent-primary);
  border-radius: 5px;
  color: var(--accent-primary);
  font-weight: bold;
  text-decoration: none;
}

.lang-switch a:hover {
  background-color: var(--accent-primary);
  color: var(--text-on-accent);
}

/* The English block repeats the same notice, so mark where it starts. */
.lang-block {
  margin-top: 2.5rem;
}

/* main.css's `h2:first-of-type` strips the divider from each article's first
   heading; the translation still needs one to separate it from the German. */
.legal .prose h2.lang-heading {
  padding-top: 1.5rem;
  border-top: 1px solid var(--border-default);
}

.legal .prose h3 {
  margin: 1.75rem 0 0.35rem;
  font-size: 1.1rem;
  color: var(--text-secondary);
}

.eyebrow {
  margin: 0 0 0.25rem;
  color: var(--accent-primary);
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ---------- theme switches ---------- */

/* main.css ships a 38x22 switch, under the 24px target-size guidance. Grow it
   to 24px and re-seat the knob: the track's padding box is 22px high and the
   knob is 16px, so 3px above and below centres it. Travel is 36 - 4 - 4 - 16. */
.toggle-switch {
  height: 1.5rem;
}

.toggle-switch-handle {
  width: 1rem;
  height: 1rem;
  top: calc(50% - 0.5rem);
  left: 0.25rem;
}

input[type="checkbox"]:checked + .toggle-switch .toggle-switch-handle {
  transform: translateX(0.75rem);
}

.nav-links .toggle-switch-wrapper {
  padding-block: 0.35rem;
}

/* Inline nav anchors were only ~17px tall. */
@media (min-width: 64rem) {
  .nav-links a {
    padding-block: 0.45rem;
  }
}

.nav-links .reset-button {
  padding: 0.35rem 0.6rem;
}

.toggle-label svg {
  width: 100%;
  height: 100%;
}

/* ---------- mobile nav ---------- */

@media (max-width: 63.99rem) {
  header nav {
    min-height: 3.25rem;
  }

  /* main.css positions the open menu at top:2rem under a 29px header and never
     resets the ul margin, so it floated free of the bar. Attach it instead.
     The height cap matters on landscape phones, where the open menu is taller
     than the viewport and, being inside a fixed header, cannot be scrolled
     into view by the page. */
  header .nav-links {
    top: 100%;
    margin: 0;
    width: 100%;
    max-height: calc(100vh - 3.25rem);
    max-height: calc(100dvh - 3.25rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    text-align: left;
    padding: 0.25rem 1rem 0.5rem;
    gap: 0;
    border-top: 1px solid var(--border-default);
    border-bottom: 1px solid var(--border-default);
  }

  header .nav-links li + li {
    border-top: 1px solid var(--border-default);
  }

  header .nav-links a {
    display: block;
    padding: 0.75rem 0;
    font-size: 1.25rem;
  }

  header .nav-links a:hover {
    color: var(--accent-primary);
  }

  header .nav-links .toggle-switch-wrapper {
    padding-block: 0.55rem;
  }

  header .nav-links .reset-button {
    width: 100%;
    margin-block: 0.4rem;
    padding: 0.55rem;
  }

  .hamburger-menu {
    min-width: 2.75rem;
    min-height: 2.75rem;
  }

  /* the taller header needs a little more clearance than main.css allows */
  main {
    padding-top: 4rem;
  }
}

/* ---------- brand ---------- */

.logo a {
  color: var(--text-primary);
  font-size: 1.2rem;
  font-weight: bold;
  text-decoration: none;
}

.logo a:hover {
  color: var(--accent-primary);
}

/* ---------- legal page ---------- */

.prose {
  max-width: 68ch;
  margin-inline: auto;
  padding-bottom: 2rem;
}

.prose h1 {
  color: var(--accent-primary);
}

.prose h2 {
  margin-top: 2rem;
  font-size: 1.4rem;
  color: var(--text-secondary);
}

.prose p,
.prose address {
  margin: 0 0 0.9rem;
  color: var(--text-secondary);
  font-style: normal;
}

.prose strong {
  color: var(--text-primary);
}