/**
 * @file
 * The page shell: header, navigation, regions, footer.
 *
 * The wrapper ids come from page.html.twig, which kept the Drupal 7 structure
 * so the migration did not have to touch markup and styling at once.
 */

#page-wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  /* .band--tint breaks out with calc(50% - 50vw), and 100vw counts the
     scrollbar, so without this the tint adds a horizontal scrollbar of its
     own. clip rather than hidden: hidden would make this a scroll container
     and break position: sticky anywhere inside it. */
  overflow-x: clip;
}

#page { flex: 1 0 auto; }

/* One shared measure for every full-width band. */
#header > .section,
#main,
#footer > .section,
.region-highlighted {
  width: min(100% - (var(--gutter) * 2), var(--maxw));
  margin-inline: auto;
}

/* Header --------------------------------------------------------------- */

#header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--header-grad);
  border-bottom: 1px solid var(--header-line);
  box-shadow: var(--sh-md);
}

/* The header is a dark band, so everything inside it inverts. */
#header,
#header a {
  color: var(--on-dark);
}

#header :focus-visible {
  outline-color: var(--focus-on-dark);
}

#header > .section {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
  min-height: 4.5rem;
  flex-wrap: wrap;
}

.site-branding__logo img,
#header img {
  max-height: 2.5rem;
  width: auto;
}

.site-branding__name,
#site-name {
  font-family: var(--font-display);
  font-size: var(--t-lg);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.site-branding__name a,
#site-name a {
  color: var(--on-dark);
  text-decoration: none;
}

/* Site slogan, if the block shows one. */
#header .site-branding__slogan {
  color: var(--on-dark-2);
  font-size: var(--t-sm);
}

/* Navigation ----------------------------------------------------------- */

#main-navigation ul,
.region-primary-menu ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

#main-navigation li,
.region-primary-menu li { margin: 0; }

#main-navigation a,
.region-primary-menu a {
  display: inline-block;
  padding: var(--s-2) var(--s-3);
  border-radius: var(--r-pill);
  color: var(--on-dark-2);
  font-size: var(--t-sm);
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}

#main-navigation a:hover,
.region-primary-menu a:hover {
  background: var(--header-hover);
  color: var(--on-dark);
}

#main-navigation a.is-active,
.region-primary-menu a.is-active {
  background: var(--header-active);
  color: var(--accent-bright);
  font-weight: 600;
}

/* Main ----------------------------------------------------------------- */

#main {
  display: block;
  padding-block: var(--s-7) var(--s-8);
}

#content { min-width: 0; }

#main-content {
  display: block;
  scroll-margin-top: 6rem;
}

/* Under-slider: the marketing band beneath the hero. */
#under-slider {
  background: var(--bg-2);
  border-block: 1px solid var(--line);
  padding-block: var(--s-8);
  margin-top: var(--s-8);
}

#under-slider > .section {
  width: min(100% - (var(--gutter) * 2), var(--maxw));
  margin-inline: auto;
}

/*
 * One column. The band was written for two, but the grid-template-columns
 * that would have made them sat on #under-slider > .section, which is not the
 * grid container - so the band has always stacked. Kept stacked on purpose
 * now: the login card is centred, and a centred card in a two-column grid
 * reads as neither.
 */
#under-slider .region--under-slider {
  display: grid;
  gap: var(--s-7);
}

/*
 * Only the login block carries a class; the migrated content blocks render as
 * a bare <div id="block-...">. Without this their text runs straight into the
 * login card's edge with nothing between them.
 */
#under-slider [id^='block-'] {
  min-width: 0;
  padding: var(--s-5) 0;
}

#under-slider [id^='block-'] h2 {
  margin-bottom: var(--s-4);
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--line);
  font-size: var(--t-lg);
  letter-spacing: -0.01em;
}

#under-slider [id^='block-'] p:last-child {
  margin-bottom: 0;
}

/* The login block is a card, so it brings its own padding. */
#under-slider .imd-login-block {
  padding: var(--s-6);
}

/* Footer --------------------------------------------------------------- */

#footer {
  flex-shrink: 0;
  background: var(--ink);
  color: var(--on-dark-2);
  padding-block: var(--s-7);
  font-size: var(--t-sm);
}

#footer a { color: var(--on-dark); }

.copyright {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
}

.brand-dev { color: var(--brand-dev); font-weight: 700; }
.brand-loops { color: var(--brand-loops); font-weight: 700; }

/* Small screens: stack the header, let the nav wrap under the brand. */
@media (max-width: 47.99rem) {
  #header > .section {
    justify-content: center;
    padding-block: var(--s-3);
  }

  #main { padding-block: var(--s-6) var(--s-7); }
}