/* layout.css — Grid system, containers, and section spacing. */

.container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-padding);
  width: 100%;
}

/*
 * Legal page container — wider than the default container
 * to make better use of available screen space on desktop.
 * Text-heavy pages like Datenschutz and Impressum benefit
 * from a longer line length for readability.
 * Max-width kept at 800px for comfortable reading length
 * (optimal: 60-80 characters per line).
 */
.container--legal {
  max-width: 800px;
  width: 100%;
  margin: 0 auto;
  padding: var(--space-16) var(--container-padding);
}

@media (max-width: 768px) {
  .container--legal {
    padding: var(--space-8) var(--container-padding);
  }
}

.section {
  padding-block: var(--space-16);
}

@media (max-width: 768px) {
  .section {
    padding-block: var(--space-12);
  }
}

.section--alt {
  background-color: var(--color-bg-alt);
}

.section--primary {
  background-color: var(--color-primary);
  color: var(--color-bg);
}

/*
 * Offset all anchor targets by the header height plus
 * extra breathing room so the sticky header never covers
 * the top of a section when navigating via anchor links.
 * --header-height is set dynamically by JS on load.
 * The 24px adds visual breathing room above the section.
 */
* {
  scroll-margin-top: calc(var(--header-height, 72px) + 24px);
}

/*
 * Sections have their own top padding (--space-16 desktop /
 * --space-12 mobile). Without correction it would appear as a
 * visible coloured stripe between header and content title when
 * anchor-scrolled — especially obvious on .section--alt blocks.
 * Subtract the section's own padding from the offset so the
 * title — not the section edge — lands below the header.
 */
.section[id] {
  scroll-margin-top: calc(var(--header-height, 72px) + 24px - var(--space-16));
}

@media (max-width: 768px) {
  .section[id] {
    scroll-margin-top: calc(var(--header-height, 72px) + 24px - var(--space-12));
  }
}