/**
 * Page shell: header, main column with optional sidebar, footer.
 * Subthemes replace the header (Tramalia: app bar) but keep this grid.
 */

.skip-link:focus {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
  z-index: 50;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--surface-raised);
  box-shadow: var(--shadow-lg);
}

.dl-page {
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
  min-height: 100dvh;
}

.dl-container {
  width: 100%;
  max-width: 1320px;
  margin-inline: auto;
  padding-inline: var(--space-4);
}
@media (min-width: 760px) {
  .dl-container { padding-inline: var(--space-8); }
}

.dl-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  gap: var(--space-6);
  padding-block: var(--space-6) var(--space-12);
}

.dl-main__body {
  display: grid;
  /* minmax(0, 1fr), not the implicit auto track: wide children (tabs, tables)
     would otherwise stretch the track and the whole page on narrow screens. */
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-6);
  align-items: start;
}
@media (min-width: 1000px) {
  .dl-main__body--sidebar { grid-template-columns: minmax(0, 1fr) 320px; }
}

.dl-site-header {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.dl-site-header__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
  min-height: 64px;
}

.dl-site-footer {
  padding-block: var(--space-8);
  border-top: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 14px;
  line-height: 22px;
}

/* Page head: title on the left, primary actions together on the right. The
   title takes the free space, so several actions ("New wiki page", "New
   issue") stay side by side instead of being spread across the row. */
.dl-page-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-4) var(--space-2);
}
.dl-page-head > :first-child { margin-inline-end: auto; }
.dl-page-head h1 { margin: 0; }

/* On phones the title gets its own line, so the actions, however many blocks
   they come from, wrap together underneath instead of one staying beside the
   title and the rest dropping to the left. */
@media (max-width: 560px) {
  .dl-page-head > :first-child { flex: 1 0 100%; }
}

/* Blocks inside the main regions are spaced by the region, not by margins. */
.region:empty { display: none; }
.region-content,
.region-sidebar { display: grid; gap: var(--space-6); min-width: 0; }
.region-content > *,
.region-sidebar > * { min-width: 0; }

/* Local actions from several blocks ("New issue", "Add wiki page") sit on one
   row, side by side, instead of stacked with the region gap between them. */
.region:has(> .action-links) {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--space-6) var(--space-2);
}
.region:has(> .action-links) > * { flex: 1 1 100%; min-width: 0; }
.region:has(> .action-links) > .action-links { flex: 0 0 auto; }