/* Containers, header and footer grids, hero, bands and splits. */
.container {
  width: 100%;
  max-width: calc(var(--container) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

body .wp-site-blocks > * + *,
body .wp-site-blocks .page-body > * + *,
body .wp-site-blocks .page-body__main > * + *,
body .wp-site-blocks .page-body__aside > * + *,
body .wp-site-blocks .page-body--aside > * + * {
  margin-block-start: 0;
}

body .wp-site-blocks :is(
  .page-head__inner,
  .page-body,
  .page-body__main,
  .page-body__aside,
  .page-body--aside,
  .page-section,
  .richtext,
  .pull-quote,
  .split,
  .band__head,
  .fees,
  .fee,
  .fee-notices,
  .fee-notice,
  .service,
  .videos,
  .video,
  .video__link,
  .video-grid,
  .poster-row,
  .docs,
  .doc,
  .doc-card,
  .committee,
  .committee__item,
  .form,
  .form__grid,
  .field,
  .aside-box,
  .widget-layout,
  .widget-area,
  .widget,
  .site-footer__grid,
  .site-footer__id,
  .site-footer__nav,
  .site-footer__legal,
  .card-grid,
  .index-groups,
  .hub-card,
  .denied,
  .pdf-readers,
  .pdf-reader
) > * + * {
  margin-block-start: 0;
}

body .wp-site-blocks .page-body__main > .fee-notices {
  margin-block-start: var(--space-xl);
}

.site-main > * + * {
  margin-block-start: 0;
}

/* Header ---------------------------------------------------------------- */
.site-header {
  background: var(--paper);
  border-bottom: 1px solid var(--stone);
}

.site-header__inner {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-s) var(--space-m);
  max-width: calc(var(--container) + 2 * var(--gutter));
  margin-inline: auto;
  padding: var(--space-xs) var(--gutter);
}

.site-header .site-header__inner > .site-header__utility {
  display: flex;
  justify-self: end;
  align-items: center;
  gap: var(--space-xs);
  margin-block-start: 0;
  padding-inline-end: 3.5rem;
}

@media (min-width: 40rem) and (max-width: 69.999rem) {
  .site-header .site-header__inner > .site-header__utility {
    padding-inline-end: calc(5.625rem + var(--space-s));
  }
}

.site-header__utility .agora-auth-actions,
.site-header__utility .header-actions {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: var(--space-2xs);
  margin: 0;
}

.site-header__utility .agora-auth-actions .wp-block-button__link {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  white-space: nowrap;
}

.site-header .site-header__utility .header-actions > .wp-block-button.btn {
  display: none;
}

.site-nav {
  grid-column: 3;
  grid-row: 1;
  justify-self: end;
}

@media (min-width: 40rem) {
  .site-header .site-header__utility .header-actions > .wp-block-button.btn {
    display: inline-flex;
  }
}

/* Homepage below 40rem: the hero's h1 already shows the site name, so the header shows the logo
   and Menu only. The wordmark stays in the link as its accessible name (the logo's alt is empty),
   visually hidden and out of the flex flow, so no gap is left. */
@media (width < 40rem) {
  .site-header--home .brand__name {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }
}

@media (min-width: 70rem) {
  .site-header__inner {
    padding-block: var(--space-s) 0;
    row-gap: var(--space-2xs);
  }

  .site-header__utility {
    padding-inline-end: 0;
  }

  .site-nav {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-self: stretch;
    border-top: var(--rule) solid var(--blue);
  }

  .site-header__utility {
    grid-column: 2;
    grid-row: 1;
  }
}

/* Hero ------------------------------------------------------------------ */
/* Text first in the DOM; on narrow screens the emblem sits above it, beside it from 48rem. */
.hero {
  padding-block: var(--space-m) var(--space-xl);
  overflow: hidden;
  background: var(--blue-wash);
}

.hero__inner {
  display: grid;
  gap: var(--space-m);
  align-items: center;
}

.hero__text {
  min-width: 0;
  container-type: inline-size; /* the h1 is sized to this column (components.css) */
}

.hero-emblem {
  order: -1;
  justify-self: center;
  width: min(72vw, 20rem);
  width: min(72vw, 20rem, 36svh);
  aspect-ratio: 1;
}

@media (min-width: 48rem) {
  .hero {
    padding-block: var(--space-xl);
  }

  .hero__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-xl);
  }

  .hero-emblem {
    order: 0;
    justify-self: end;
    width: min(100%, 36rem);
    width: min(100%, 36rem, 70svh);
  }
}

@media (min-width: 64rem) {
  .hero__inner {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: var(--space-2xl);
  }

  .hero-emblem {
    width: min(100%, 36rem, 75svh);
  }
}

/* Bands ----------------------------------------------------------------- */
.band {
  padding-block: var(--space-2xl);
}

@media (min-width: 56rem) {
  .band {
    padding-block: var(--space-3xl);
  }
}

.band--paper { background: var(--paper); }
.band--stone { background: var(--stone); }
.band--wash { background: var(--blue-wash); }

.band--amaranto {
  background: var(--amaranto);
  color: var(--paper);
}

.band--amaranto h2 {
  color: var(--paper);
}

.band--amaranto :focus-visible {
  outline-color: var(--paper);
}

.band__head {
  display: grid;
  gap: var(--space-xs);
  margin-bottom: var(--space-xl);
  max-width: var(--measure);
}

/* Splits ---------------------------------------------------------------- */
.split {
  display: grid;
  gap: var(--space-xl);
}

@media (min-width: 56rem) {
  .split--text-quote {
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    gap: var(--space-2xl);
    align-items: center;
  }

  .split--even {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
  }

  .split--even > * + * {
    border-left: var(--rule) solid var(--blue);
    padding-left: var(--space-2xl);
  }

  .split--even > :first-child {
    padding-right: var(--space-2xl);
  }
}

.prose {
  display: grid;
  gap: var(--space-s);
  max-width: var(--measure);
}

/* Footer ---------------------------------------------------------------- */
.site-footer {
  background: var(--ink);
  color: var(--on-dark);
  padding-block: var(--space-2xl) var(--space-l);
  font-size: var(--step--1);
}

.site-footer__grid {
  display: grid;
  gap: var(--space-xl);
}

@media (min-width: 56rem) {
  .site-footer__grid {
    grid-template-columns: minmax(0, 4fr) minmax(0, 5fr) minmax(0, 3fr);
  }

  .site-footer__id {
    grid-column: 1;
  }

  .site-footer__nav {
    grid-column: 2;
  }

  .site-footer__legal {
    grid-column: 3;
  }
}

/* Inner pages: title band and body grid --------------------------------- */
.page-head {
  background: var(--stone);
  padding-block: var(--space-l) var(--space-xl);
}

.page-head__inner {
  display: grid;
  gap: var(--space-s);
}

.page-head__title {
  max-width: 24ch;
  font-size: var(--step-4);
}

.page-head__lead {
  max-width: 40ch;
  color: var(--ink);
  font-size: var(--step-1);
  font-weight: 600;
  line-height: 1.35;
}

.page-head__meta {
  color: var(--muted);
  font-size: var(--step--1);
}

.page-head__published {
  display: flex;
  align-items: baseline;
  gap: var(--space-3xs);
}

.page-head__published-label,
.page-head__meta {
  margin: 0;
}

.page-head__meta time {
  text-transform: lowercase;
}

/* Members' area: the amaranto of the live page headers and of the homepage members' band. */
.page-head--members {
  background: var(--amaranto);
  color: var(--paper);
}

.page-head--members .page-head__title,
.page-head--members .breadcrumb,
.page-head--members .breadcrumb a {
  color: var(--paper);
}

.page-head--members :focus-visible {
  outline-color: var(--paper);
}

.page-body {
  margin-block-start: 0;
  display: grid;
  gap: var(--space-xl);
  align-content: start;
  padding-block: var(--space-xl) var(--space-3xl);
}

.page-body__main,
.page-body__aside {
  display: grid;
  gap: var(--space-xl);
  align-content: start;
  min-width: 0;
}

.page-body__main > .alignwide {
  width: 100%;
  max-width: 100%;
  margin-inline: 0;
}

.page-body__main > .alignwide.richtext {
  max-width: var(--measure);
}

.page-body__main > .alignwide.aside-box--wide,
.page-body > .alignwide.aside-box--wide {
  width: 100%;
  max-width: var(--measure);
  margin-inline: 0;
  justify-self: start;
}

.page-body > .alignwide {
  width: 100%;
  max-width: 100%;
  margin-inline: 0;
}

.page-body__aside {
  gap: var(--space-m);
}

.page-body--aside {
  display: grid;
  gap: var(--space-xl);
  align-items: start;
}

.page-body--profile {
  max-width: calc(var(--container) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.agora-profile {
  width: 100%;
  min-width: 0;
}

.agora-profile__notice {
  max-width: var(--measure);
  padding: var(--space-s) var(--space-m);
  border-inline-start: var(--rule) solid var(--blue);
  background: var(--blue-wash);
}

.agora-profile__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-2xl);
}

.agora-profile__section {
  min-width: 0;
  padding-block-start: var(--space-m);
  border-block-start: var(--rule) solid var(--blue);
}

.agora-profile__section h2 {
  margin-block: 0 var(--space-m);
}

.agora-profile__form {
  max-width: var(--measure);
}

.agora-profile__details {
  display: grid;
  gap: var(--space-s);
  margin: 0;
}

.agora-profile__detail {
  display: grid;
  grid-template-columns: minmax(8rem, 1fr) minmax(0, 2fr);
  gap: var(--space-xs) var(--space-m);
  padding-block: var(--space-xs);
  border-block-end: 1px solid var(--stone);
}

.agora-profile__detail dt {
  font-weight: 700;
}

.agora-profile__detail dd {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
}

.agora-profile__application {
  padding-block-end: var(--space-m);
}

.drawer .agora-auth-actions {
  margin: var(--space-m);
}

@media (min-width: 56rem) {
  .agora-profile__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--space-2xl);
    row-gap: var(--space-3xl);
    align-items: start;
  }

  .agora-profile__application {
    grid-column: 1 / -1;
  }
}

@media (min-width: 56rem) {
  .page-body--aside {
    grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
    gap: var(--space-2xl);
    align-items: start;
  }

  .page-body--aside > aside {
    position: sticky;
    top: var(--space-m);
  }
}

.page-section {
  display: grid;
  gap: var(--space-m);
  align-content: start;
}