/**
 * MTB de Zeeleeuw — content grid, sidebars & footer wrapper
 *
 * The footer's actual visual treatment (background, contour motif, text
 * color) comes entirely from its rows' own settings now (see
 * css/layout-builder.css's .lb-row--bg-* classes) — .site-footer here is
 * just a plain structural wrapper, not a fixed navy/contour look, since
 * the footer zone is fully builder-configurable and might not be navy at
 * all depending on what an admin builds.
 */
.page-body {
  padding-block: var(--space-16);
}

.layout-grid {
  display: grid;
  gap: var(--space-12);
  grid-template-columns: 1fr;
}

.layout-grid.has-left {
  grid-template-columns: 260px 1fr;
}

.layout-grid.has-right {
  grid-template-columns: 1fr 300px;
}

.layout-grid.has-both {
  grid-template-columns: 240px 1fr 280px;
}

/* Every grid item defaults to min-width: auto, which makes it respect
   its *content's* intrinsic width — a wide child (a chart, a table, a
   long unbroken URL) can silently force its whole track wider than the
   1fr/300px sizing above ever intended, squeezing sibling columns in
   the process. Overriding min-width to 0 here is what actually makes
   1fr behave like "the rest of the space" rather than "at least as wide
   as my widest child". overflow-x gives a genuinely too-wide child (e.g.
   a wide SVG/canvas chart) its own scrollbar instead of blowing out the
   grid when even min-width: 0 isn't enough. */
.layout-grid > * {
  min-width: 0;
  overflow-x: auto;
}

@media (max-width: 900px) {
  .layout-grid.has-left,
  .layout-grid.has-right,
  .layout-grid.has-both {
    grid-template-columns: 1fr;
  }
}

/* .layout-grid > * (above) sets overflow-x: auto so a genuinely too-wide
   child (a chart, a wide table) gets its own scrollbar instead of
   blowing out the grid - but with zero horizontal padding on the
   sidebar itself, that same overflow rule was also clipping anything
   merely *decorative* that a focused field paints outside its own box
   (an outline, then a box-shadow focus ring - neither ever actually
   fixed the "gap" reported for the login form, because there was
   nothing wrong with either ring's shape: the sidebar's own left edge
   was cutting it off before it could render at all). A few pixels of
   padding gives that room back without meaningfully weakening the
   too-wide-content protection above. */
.sidebar {
  padding-inline: 4px;
}

.sidebar-module {
  margin-bottom: var(--space-8);
}

.sidebar-module h3 {
  font-size: var(--step-base);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-bottom: 2px solid var(--z-gold);
  padding-bottom: var(--space-2);
}

/* Grassveld-preset: het vaste goud past niet bij de zachtere, groenere
   richting — hier volgt de onderstreping de (nu groene) sitebrede
   accentkleur in plaats van een los kleurtoken. */
body.theme-grassfeld .sidebar-module h3 {
  border-bottom-color: var(--z-accent);
}

.breadcrumbs {
  background: var(--z-paper-alt);
  border-bottom: 1px solid var(--z-line);
  padding-block: var(--space-3);
  font-size: var(--step-sm);
  color: var(--z-ink-soft);
}

.breadcrumbs a {
  color: var(--z-ink-soft);
}

.breadcrumbs a:hover {
  color: var(--z-navy);
}

body.theme-grassfeld .breadcrumbs a:hover {
  color: var(--z-accent);
}

.site-footer {
  display: block;
}