/* Shared theme components ported from the approved mockup. */

/* Buttons --------------------------------------------------------------- */
.btn:not(.wp-block-button) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  padding: var(--space-2xs) var(--space-m);
  border: var(--rule) solid transparent;
  border-radius: var(--radius);
  font-weight: 800;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
}

.btn--small:not(.wp-block-button) {
  min-height: 2.5rem;
  padding-inline: var(--space-s);
  font-size: var(--step--1);
}

.btn--primary:not(.wp-block-button) {
  background: var(--crimson);
  color: var(--paper);
}

.btn--primary:hover:not(.wp-block-button) {
  background: var(--amaranto);
}

.btn--solid:not(.wp-block-button) {
  background: var(--blue-ink);
  color: var(--paper);
}

.btn--solid:hover:not(.wp-block-button) {
  background: var(--ink);
}

.btn--outline:not(.wp-block-button) {
  background: var(--paper);
  border-color: var(--blue-ink);
  color: var(--blue-ink);
}

.btn--outline:hover:not(.wp-block-button) {
  background: var(--blue-wash);
}

.btn--on-dark:not(.wp-block-button) {
  border-color: var(--paper);
  color: var(--paper);
}

.btn--on-dark-solid:not(.wp-block-button) {
  background: var(--paper);
  color: var(--amaranto);
}

.btn:hover:not(.wp-block-button) {
  text-decoration: none;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-top: var(--space-m);
}

.more {
  margin-top: var(--space-xs);
}

.service > .more {
  margin-block-start: var(--space-xs);
}

.link-button {
  padding: 0;
  border: 0;
  background: none;
  color: var(--blue-light);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 0.2em;
  cursor: pointer;
}

/* Site identity ---------------------------------------------------------- */
.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  color: var(--crimson);
  text-decoration: none;
}

.brand__logo img {
  width: 3.5rem;
  height: 3.5rem;
}

.brand__name {
  font-size: var(--step-1);
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.05;
  max-width: 7.5em;
}

@media (min-width: 40rem) {
  .brand__logo img {
    width: 4.5rem;
    height: 4.5rem;
  }

  .brand__name {
    max-width: none;
  }
}

.lock {
  display: inline-flex;
  color: var(--muted);
}

.lock svg {
  width: 0.85em;
  height: 0.85em;
}

body.logged-in .lock,
body.logged-in .lock + .visually-hidden {
  display: none;
}

/* Homepage hero text ---------------------------------------------------- */
/* One h1, the association's name, never animated: it is the largest text of the first screen.
   Its size follows the width of the text column (container units): below 64rem the name sits on
   two lines, "Agorà / Veterinaria" ("Veterinaria" is 5.15 em wide, so 18cqi fills about 93 % of
   the column); from 64rem on one line ("Agorà Veterinaria" is 8.33 em, 11.5cqi about 96 %).
   The first declarations are for browsers without container units. */
.hero__title {
  color: var(--ink);
  font-size: clamp(2.6rem, 1.4rem + 5vw, 4.4rem);
  font-size: min(4.4rem, 18cqi);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.035em;
}

.site-main .hero__title {
  color: var(--ink);
  font-size: clamp(2.6rem, 1.4rem + 5vw, 4.4rem);
  font-size: min(4.4rem, 18cqi);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.035em;
}

@media (min-width: 64rem) {
  .hero__title {
    font-size: 3.5rem;
    font-size: min(4.4rem, 11.5cqi);
  }

  .site-main .hero__title {
    font-size: 3.5rem;
    font-size: min(4.4rem, 11.5cqi);
  }
}

.hero__lead {
  max-width: 34ch;
  margin-top: var(--space-m);
  color: var(--text);
  font-size: var(--step-1);
  font-weight: 600;
  line-height: 1.35;
}

.hero__byline {
  margin-top: var(--space-xs);
  color: var(--muted);
  font-size: var(--step--1);
}

/* Chi siamo ------------------------------------------------------------- */
.pull-quote {
  display: grid;
  gap: var(--space-s);
  padding-left: var(--space-l);
  border-left: var(--ring) solid var(--blue);
}

.pull-quote blockquote p,
.pull-quote > p {
  color: var(--ink);
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem);
  line-height: 1.35;
}

.pull-quote figcaption,
.pull-quote cite {
  color: var(--muted);
  font-size: var(--step--1);
}

/* Iscrizione ------------------------------------------------------------ */
.fees {
  display: grid;
  gap: var(--space-xl);
  margin-top: var(--space-xl);
}

@media (min-width: 48rem) {
  .fees {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 64rem) {
  .fees {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.fee {
  display: grid;
  align-content: start;
  gap: var(--space-xs);
  padding-top: var(--space-m);
  border-top: var(--ring) solid var(--blue);
  max-width: 34rem;
}

.fee__title {
  font-size: var(--step-1);
}

.fee__amount {
  color: var(--crimson);
  font-size: var(--step-5);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.03em;
}

.fee__member-badge {
  display: inline-flex;
  justify-self: start;
  width: fit-content;
  margin: 0;
  padding: var(--space-3xs) var(--space-xs);
  border-radius: 999px;
  background: var(--blue-wash);
  color: var(--blue-ink);
  font-size: var(--step--1);
  font-weight: 700;
  line-height: 1.35;
}

/* Services -------------------------------------------------------------- */
.service {
  display: grid;
  align-content: start;
  gap: var(--space-s);
  max-width: var(--measure);
}

.service__label {
  font-weight: 800;
  color: var(--ink);
}

.names {
  display: grid;
  gap: var(--space-3xs) var(--space-m);
  padding: 0;
  list-style: none;
  font-size: var(--step--1);
}

@media (min-width: 30rem) {
  .names {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.placeholder {
  justify-self: start;
  padding: var(--space-3xs) var(--space-2xs);
  border: var(--rule) dashed var(--crimson);
  color: var(--crimson);
  font-weight: 800;
  font-size: var(--step--1);
}

/* Webinar --------------------------------------------------------------- */
.band__intro {
  color: var(--muted);
}

.band__intro .lock {
  vertical-align: -0.1em;
}

.videos {
  display: grid;
  gap: var(--space-xl);
  padding: 0;
  list-style: none;
}

@media (min-width: 48rem) {
  .videos {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.video {
  display: grid;
  gap: var(--space-2xs);
}

.video__link {
  display: grid;
  grid-template-columns: minmax(0, 9rem) minmax(0, 1fr);
  gap: var(--space-m);
  align-items: center;
  color: var(--ink);
  text-decoration: none;
}

.video__poster {
  position: relative;
  display: block;
}

.video__poster > a {
  position: relative;
  display: block;
}

.video__poster > a::before {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 3.25rem;
  height: 3.25rem;
  margin: -1.625rem 0 0 -1.625rem;
  border: 4px solid var(--blue);
  border-radius: 50%;
  background: var(--paper);
  content: "";
}

.video__poster > a::after {
  position: absolute;
  left: calc(50% + 0.15rem);
  top: 50%;
  margin: -0.6rem 0 0 -0.45rem;
  border: 0.6rem solid transparent;
  border-left: 1rem solid var(--ink);
  content: "";
}

.video__poster img {
  width: 100%;
  aspect-ratio: 5 / 7;
  object-fit: cover;
  object-position: top;
}

.video__poster--pending {
  aspect-ratio: 5 / 7;
  background: var(--stone);
}

.video__play {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 3.25rem;
  height: 3.25rem;
  margin: -1.625rem 0 0 -1.625rem;
  border-radius: 50%;
  border: 4px solid var(--blue);
  background: var(--paper);
}

.video-stage {
  position: relative;
}

.video-facade {
  display: grid;
  gap: var(--space-s);
  max-width: 48rem;
  margin: 0;
}

.video-stage {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--ink);
}

.video-stage picture,
.video-stage img {
  width: 100%;
  height: 100%;
}

.video-stage img {
  object-fit: contain;
}

.video-stage iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.video-play {
  position: absolute;
  inset: 0;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.video-play:hover .video__play {
  border-color: var(--crimson);
}

.video-play:focus-visible {
  outline: 3px solid var(--blue-ink);
  outline-offset: -3px;
  box-shadow: inset 0 0 0 6px var(--paper);
}

.video-play__label {
  position: absolute;
  left: 50%;
  top: calc(50% + 2.25rem);
  transform: translateX(-50%);
  padding: var(--space-3xs) var(--space-xs);
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--ink);
  font-size: var(--step--1);
  font-weight: 800;
  white-space: nowrap;
}

.video-notice {
  max-width: var(--measure);
  color: var(--muted);
  font-size: var(--step--1);
}

.video-notice[hidden] {
  display: none;
}

.video__play::after {
  content: "";
  position: absolute;
  left: 1.15rem;
  top: 0.8rem;
  border-style: solid;
  border-width: 0.6rem 0 0.6rem 1rem;
  border-color: transparent transparent transparent var(--ink);
}

.video__title {
  font-size: var(--step-1);
  font-weight: 800;
  line-height: 1.25;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

.video__link:hover .video__title {
  color: var(--blue-ink);
}

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

/* Documents and cards --------------------------------------------------- */
.docs {
  display: grid;
  margin-top: var(--space-xl);
  padding: 0;
  list-style: none;
  border-top: var(--rule) solid var(--blue);
}

.doc {
  display: grid;
  gap: var(--space-2xs) var(--space-l);
  padding-block: var(--space-m);
  border-bottom: 1px solid var(--line);
}

@media (min-width: 48rem) {
  .doc {
    grid-template-columns: 11rem minmax(0, 1fr) 8rem;
    align-items: start;
  }
}

.doc__kind {
  display: block;
}

.doc__body {
  display: grid;
  gap: var(--space-2xs);
  max-width: var(--measure);
}

.doc h3 a {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  color: var(--ink);
}

.doc h3 a:hover {
  color: var(--blue-ink);
}

.doc__thumb img {
  width: 8rem;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 50%;
}

.doc__thumb {
  width: 8rem;
  margin: 0;
}

/* Members' band --------------------------------------------------------- */
.members > * {
  max-width: 44rem;
}

.band--amaranto p {
  max-width: 40ch;
  margin-top: var(--space-s);
}

.band--amaranto .actions {
  margin-top: var(--space-l);
}

/* Gallery --------------------------------------------------------------- */
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
  gap: var(--space-s);
  padding: 0;
  list-style: none;
}

.gallery li:first-child {
  grid-column: 1 / -1;
}

.gallery img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.gallery li:first-child img {
  aspect-ratio: 1600 / 596;
}

.wp-block-gallery.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
  gap: var(--space-s);
  padding: 0;
}

.wp-block-gallery.gallery > .wp-block-image:first-child {
  grid-column: 1 / -1;
}

.wp-block-gallery.gallery > .wp-block-image {
  width: 100%;
  max-width: none;
  flex-basis: auto;
  margin: 0;
}

.wp-block-gallery.has-nested-images.gallery > .wp-block-image {
  width: 100%;
  max-width: none;
  flex-basis: auto;
}

.wp-block-gallery.has-nested-images.gallery figure.wp-block-image:not(#individual-image),
.wp-block-gallery.has-nested-images.figure-grid figure.wp-block-image:not(#individual-image) {
  width: 100%;
  max-width: none;
  flex-basis: auto;
}

.wp-block-gallery.gallery img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.wp-block-gallery.gallery > .wp-block-image:first-child img {
  aspect-ratio: 1600 / 596;
}

.wp-block-gallery.figure-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr));
  gap: var(--space-m);
  justify-content: start;
}

.wp-block-gallery.figure-grid > .wp-block-image {
  width: 100%;
  max-width: none;
  flex-basis: auto;
  margin: 0;
}

.wp-block-gallery.has-nested-images.figure-grid > .wp-block-image {
  width: 100%;
  max-width: none;
  flex-basis: auto;
}

.wp-block-gallery.has-nested-images.is-cropped.figure-grid > figure.wp-block-image:not(#individual-image) {
  display: block;
  height: auto;
  align-self: start;
  flex: none;
}

.wp-block-gallery.has-nested-images.is-cropped.figure-grid > figure.wp-block-image:not(#individual-image) > a {
  display: block;
  height: auto;
  flex: none;
}

.wp-block-gallery.has-nested-images.is-cropped.figure-grid > figure.wp-block-image:not(#individual-image) > a > img {
  height: auto;
  flex: none;
  aspect-ratio: auto;
  object-fit: contain;
}

.wp-block-gallery.figure-grid img {
  width: 100%;
  height: auto;
  aspect-ratio: auto;
  object-fit: contain;
}

.wp-block-gallery.has-nested-images.is-cropped.figure-grid figure.wp-block-image:not(#individual-image) img {
  height: auto;
  aspect-ratio: auto;
  object-fit: contain;
}

@media (max-width: 39.999rem) {
  .wp-block-gallery.figure-grid {
    grid-template-columns: minmax(0, 14rem);
  }
}

/* Footer ---------------------------------------------------------------- */
.site-footer a {
  color: var(--blue-light);
}

.site-footer :focus-visible {
  outline-color: var(--blue-light);
}

.site-footer .brand--footer {
  color: var(--paper);
  text-decoration: none;
}

/* The logo PNG is transparent inside the ring: on dark surfaces it sits on its own white disc. */
.brand--footer .brand__logo img {
  width: 4.5rem;
  height: 4.5rem;
  background: var(--paper);
  border-radius: 50%;
}

.site-footer__tagline {
  margin-top: var(--space-s);
}

.site-footer__contacts,
.site-footer__legal ul,
.footer-menu,
.footer-menu ul {
  padding: 0;
  list-style: none;
}

.site-footer__contacts {
  display: grid;
  gap: var(--space-3xs);
  margin-top: var(--space-s);
  overflow-wrap: anywhere;
}

.site-footer__title {
  margin-bottom: var(--space-s);
  color: var(--paper);
  font-size: var(--step-0);
}

.footer-menu .wp-block-navigation__container {
  columns: 2 12rem;
  column-gap: var(--space-l);
}

.footer-menu li {
  break-inside: avoid;
  padding-block: var(--space-3xs);
}

.footer-menu ul {
  padding-left: var(--space-s);
}

.footer-menu .lock {
  color: var(--on-dark);
}

.site-footer__legal ul {
  display: grid;
  gap: var(--space-2xs);
}

/* Breadcrumbs ---------------------------------------------------------- */
.breadcrumb {
  color: var(--muted);
  font-size: var(--step--1);
}

.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

.breadcrumb li {
  display: inline-flex;
  align-items: center;
}

.field-list {
  display: grid;
  gap: var(--space-3xs);
  padding-left: var(--space-m);
}

/* Inner-page content ---------------------------------------------------- */
.richtext {
  display: grid;
  gap: var(--space-s);
  max-width: var(--measure);
  align-content: start;
  overflow-wrap: anywhere;
}

.richtext h2 {
  margin-top: var(--space-m);
  font-size: var(--step-2);
}

.richtext h3 {
  margin-top: var(--space-s);
  font-size: var(--step-1);
}

.richtext h4,
.richtext h5 {
  margin: var(--space-2xs) 0 0;
  color: var(--ink);
  font-size: var(--step-0);
  font-weight: 800;
  line-height: 1.3;
}

.richtext ul {
  display: grid;
  gap: var(--space-3xs);
  padding-left: var(--space-m);
}

.richtext [id] {
  scroll-margin-top: var(--space-m);
}

.richtext__lead {
  max-width: var(--measure);
  color: var(--ink);
  font-size: var(--step-1);
  font-weight: 600;
  line-height: 1.45;
}

.richtext__coda {
  padding-left: var(--space-m);
  border-left: var(--ring) solid var(--blue);
  color: var(--ink);
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--step-1);
  line-height: var(--leading-serif);
}

.wp-block-post-content.richtext:has(> .richtext__coda) {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-s);
  align-items: start;
}

.wp-block-post-content.richtext:has(> .richtext__coda) > p:not(.richtext__coda) {
  grid-column: 1;
	max-width: var(--measure);
}

.wp-block-post-content.richtext:has(> .richtext__coda) > .richtext__coda {
  grid-column: 1;
  grid-row: auto;
  align-self: start;
  margin: var(--space-s) 0;
  max-width: var(--measure);
}

.wp-block-post-content.richtext:has(> .richtext__coda) > .page-section {
  grid-column: 1 / -1;
}

.iban {
  color: var(--ink);
  font-weight: 800;
  letter-spacing: 0.03em;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.fees--page {
  display: grid;
  gap: var(--space-xl);
  margin-top: 0;
}

@media (min-width: 48rem) {
  .fees--page {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 64rem) {
  .fees--page {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.fee-notices {
  display: grid;
  gap: var(--space-l);
  margin-top: var(--space-xl);
  width: 100%;
  min-width: 0;
}

@media (min-width: 48rem) {
  .fee-notices {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.fee-notice {
  display: grid;
  align-content: start;
  align-self: start;
  gap: var(--space-2xs);
  min-width: 0;
  padding: var(--space-m);
  background: var(--blue-wash);
  border-left: var(--ring) solid var(--blue);
}

.fee-notice__title {
  color: var(--ink);
  font-size: var(--step-1);
  font-weight: 800;
}

.fee-notice__text {
  margin: 0;
}

.fee-notice__text a[href^="mailto:"] {
  overflow-wrap: normal;
  word-break: normal;
}

/* Figures ---------------------------------------------------------------- */
.figure-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
  gap: var(--space-m);
  align-items: start;
  padding: 0;
  list-style: none;
}

.figure-link {
  display: block;
  border: 1px solid var(--line);
}

.figure-link:hover {
  border-color: var(--blue-ink);
}

.figure-link img,
.photo img {
  width: 100%;
}

.photo--poster {
  max-width: 27rem;
}

.photo--pending {
  width: 100%;
  aspect-ratio: 4 / 3;
}

.video-facade--pending {
  width: 100%;
  aspect-ratio: 16 / 9;
}

/* Asides ----------------------------------------------------------------- */
.aside-box {
  display: grid;
  gap: var(--space-xs);
  align-content: start;
  padding: var(--space-m);
  background: var(--stone);
  border-top: var(--ring) solid var(--blue);
}

.aside-box--wide {
  max-width: var(--measure);
  width: 100%;
  justify-self: start;
}

.aside-box__title {
  font-size: var(--step-1);
}

.aside-box__list,
.toc__list,
.steps {
  display: grid;
  gap: var(--space-2xs);
  padding-left: var(--space-m);
}

.toc__list {
  padding-left: 0;
  list-style: none;
  font-size: var(--step--1);
}

/* Placeholders inside cards and captions wrap as one block, not line by line. */
span.placeholder {
  display: inline-block;
}

/* Document card (patterns/document-card.php) ----------------------------- */
.doc-card {
  display: grid;
  gap: var(--space-2xs);
  align-content: start;
  max-width: var(--measure);
  padding: var(--space-m);
  background: var(--blue-wash);
  border-left: var(--ring) solid var(--blue);
}

.doc-card__kind,
.doc-card__meta {
  color: var(--muted);
  font-size: var(--step--1);
}

.doc-card__kind {
  font-weight: 700;
}

.doc-card__title {
  font-size: var(--step-1);
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.doc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr));
  gap: var(--space-m);
  padding: 0;
  list-style: none;
}

/* Committee (patterns/committee.php) ------------------------------------- */
.committee {
  display: grid;
  gap: var(--space-m) var(--space-l);
  padding: 0;
  list-style: none;
}

@media (min-width: 36rem) {
  .committee {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.committee__item {
  display: grid;
  gap: var(--space-3xs);
  align-content: start;
  padding-top: var(--space-s);
  border-top: var(--rule) solid var(--blue);
}

.committee__name {
  color: var(--ink);
  font-weight: 800;
}

/* Members' template layout blocks -------------------------------------- */
.video-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr));
  gap: var(--space-l);
}

.video-grid--single {
  grid-template-columns: minmax(0, 36rem);
}

.video-slot {
  display: grid;
  gap: var(--space-2xs);
}

.video-slot__stage {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--stone);
  border: var(--rule) dashed var(--line);
}

.video-slot__bar {
  position: absolute;
  inset: auto 0 0;
  height: 2.25rem;
  background: var(--line);
}

.poster-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 12rem), 1fr));
  gap: var(--space-m);
  padding: 0;
  list-style: none;
}

.poster-slot {
  display: grid;
  place-items: center;
  aspect-ratio: 5 / 7;
  padding: var(--space-s);
  background: var(--stone);
  border: var(--rule) dashed var(--line);
}

.widget-layout {
  display: grid;
  gap: var(--space-l);
}

@media (min-width: 56rem) {
  .widget-layout {
    grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
  }
}

.widget-layout__note {
  max-width: var(--measure);
  color: var(--muted);
}

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

.widget {
  display: grid;
  gap: var(--space-xs);
  padding: var(--space-m);
  background: var(--stone);
  border-top: var(--rule) solid var(--blue);
}

.widget__title {
  color: var(--ink);
  font-weight: 800;
}

/* Members' hub patterns ------------------------------------------------ */

.page-body--members-hub .members-hub__welcome {
  margin: 0;
  font-size: var(--step-1);
}

/* Imported Columns wrappers are layout-only here; let every destination card share one responsive grid. */
.page-body--members-hub .members-hub__content {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr));
  gap: var(--space-m) var(--space-l);
}

.page-body--documents .doc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr));
  gap: var(--space-m) var(--space-l);
}

.page-body--documents .doc-grid .wp-block-columns,
.page-body--documents .doc-grid .wp-block-columns > .wp-block-column {
  display: contents;
}

.page-body--documents .doc-grid .doc-card {
  display: grid;
  gap: var(--space-xs);
  align-content: start;
  height: 100%;
  max-width: none;
  margin-block-start: 0;
  padding: var(--space-l);
  border: 1px solid var(--line);
  border-top: var(--ring) solid var(--amaranto);
  background: transparent;
}

.page-body--documents .doc-grid .doc-card:focus-within {
  outline: 3px solid var(--blue-ink);
  outline-offset: 3px;
}

.page-body--documents .doc-grid .hub-card:focus-within {
  outline: 3px solid var(--blue-ink);
  outline-offset: 3px;
}

.page-body--documents .doc-grid .wp-block-file.doc-card__title {
  margin: 0;
  font-size: var(--step-1);
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.page-body--documents .doc-card__title a {
  color: var(--blue-ink);
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.14em;
}

.page-body--documents .doc-card__title a:hover {
  color: var(--crimson);
}

.page-body--members-hub .members-hub__content > :not(.hub-card),
.page-body--members-hub .members-hub__content .wp-block-column > :not(.hub-card) {
  grid-column: 1 / -1;
}

.page-body--members-hub .members-hub__content .wp-block-columns,
.page-body--members-hub .members-hub__content .wp-block-columns > .wp-block-column {
  display: contents;
}

.card-grid,
.index-groups {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
  gap: var(--space-m) var(--space-l);
  padding: 0;
  list-style: none;
}

.hub-card {
  display: grid;
  gap: var(--space-xs);
  align-content: start;
  height: 100%;
  margin-block-start: 0;
  padding: var(--space-l);
  border: 1px solid var(--line);
  border-top: var(--ring) solid var(--amaranto);
}

.hub-card__title {
  font-size: var(--step-1);
}

.page-body--members-hub .hub-card__title a {
  color: var(--blue-ink);
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.14em;
}

.page-body--members-hub .hub-card__title a:hover {
  color: var(--crimson);
}

.page-body--documents .hub-card__title a {
  color: var(--blue-ink);
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.14em;
}

.page-body--documents .hub-card__title a:hover {
  color: var(--crimson);
}

.page-body--members-hub .hub-card:focus-within {
  outline: 3px solid var(--blue-ink);
  outline-offset: 3px;
}

.denied {
  display: grid;
  gap: var(--space-m);
  max-width: var(--measure);
  padding: var(--space-l);
  background: var(--stone);
  border-left: var(--ring) solid var(--amaranto);
}

.denied__text {
  color: var(--ink);
  font-size: var(--step-1);
  font-weight: 700;
}

.denied .actions {
  margin-top: 0;
}

.index-groups ul {
  display: grid;
  gap: var(--space-3xs);
  padding-left: var(--space-m);
}

.index-group__name {
  color: var(--ink);
  font-weight: 800;
}

/* PDF reader slots remain empty until the C4 media seed is available. */
.pdf-readers {
  display: grid;
  gap: var(--space-l);
}

@media (min-width: 56rem) {
  .pdf-readers {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.pdf-reader {
  border: var(--rule) solid var(--ink);
}

.pdf-reader__bar {
  padding: var(--space-xs) var(--space-s);
  background: var(--stone);
  border-bottom: 1px solid var(--line);
}

.pdf-reader__page {
  display: grid;
  place-items: center;
  min-height: 20rem;
  padding: var(--space-l);
  text-align: center;
}

/* Form controls and validation states. */
.form {
  display: grid;
  gap: var(--space-m);
  max-width: 32rem;
}

.form--wide {
  max-width: 44rem;
}

.form--closed {
  max-width: var(--measure);
  padding: var(--space-m);
  border-left: var(--ring) solid var(--amaranto);
  background: var(--stone);
  color: var(--ink);
}

.form--closed > p {
  margin: 0;
}

.form__grid {
  display: grid;
  gap: var(--space-m);
}

.page-body__main .wpcf7-form > label {
  display: grid;
  gap: var(--space-3xs);
  align-content: start;
  margin: 0;
}

.page-body__main .wpcf7-form label {
  display: grid;
  gap: var(--space-3xs);
  align-content: start;
  color: var(--ink);
  font-weight: 700;
}

.page-body__main .wpcf7-form label:has(> .required-marker) {
  grid-template-columns: auto 1fr;
  column-gap: 0.25em;
}

.page-body__main .wpcf7-form label:has(> .required-marker) > .wpcf7-form-control-wrap {
  grid-column: 1 / -1;
}

.page-body__main .wpcf7-form-control-wrap {
  display: block;
}

.page-body__main .wpcf7-form-control-wrap :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
  width: 100%;
  min-height: 2.75rem;
  padding: var(--space-2xs) var(--space-xs);
  border: var(--rule) solid var(--muted);
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--text);
  font: inherit;
}

.page-body__main .wpcf7-form-control-wrap textarea {
  min-height: 9rem;
}

.page-body__main .wpcf7-form > p {
  grid-column: 1 / -1;
  display: grid;
  gap: var(--space-m);
  margin: 0;
}

.page-body__main .wpcf7-form > p > br {
  display: none;
}

.page-body__main .wpcf7-form > p > .wpcf7-form-control-wrap[data-name="acceptance-792"],
.page-body__main .wpcf7-form > p > a,
.page-body__main .wpcf7-form > p > input[type="submit"] {
  grid-column: 1 / -1;
}

.page-body__main .wpcf7-form .wpcf7-submit {
  width: fit-content;
  min-width: 8rem;
  min-height: 3rem;
  padding: var(--space-s) var(--space-l);
  border: 0;
  border-radius: var(--radius);
  background: var(--crimson);
  color: var(--paper);
  font-weight: 800;
  font-size: var(--step-0);
  line-height: 1.2;
  cursor: pointer;
}

.page-body__main .wpcf7-form .wpcf7-list-item {
  margin: 0;
}

.page-body__main .wpcf7-form .wpcf7-list-item label {
  display: flex;
  align-items: flex-start;
  gap: var(--space-xs);
}

.page-body__main .wpcf7-form .wpcf7-list-item input[type="checkbox"] {
  flex: 0 0 auto;
  width: 1.25rem;
  height: 1.25rem;
  margin: 0.15rem 0 0;
  accent-color: var(--blue-ink);
}

.page-body__main .wpcf7-form .wpcf7-list-item-label {
  display: block;
}

.page-body__main .wpcf7-form > p:has(.wpcf7-acceptance),
.page-body__main .wpcf7-form > p:has(input[type="submit"]),
.page-body__main .wpcf7-form > p:has(a[href*="privacy-policy"]) {
  grid-column: 1 / -1;
}

@media (min-width: 40rem) {
  .page-body__main .wpcf7-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-m);
  }

  .page-body__main .wpcf7-form > p {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 40rem) {
  .form--wide .form__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.field {
  display: grid;
  gap: var(--space-3xs);
  align-content: start;
}

.field label {
  color: var(--ink);
  font-weight: 700;
}

.required-marker {
  font-weight: 800;
}

.field__label {
  color: var(--ink);
  font-weight: 700;
}

.field__control-slot {
  width: 100%;
  min-height: 2.75rem;
  border: var(--rule) solid var(--muted);
  border-radius: var(--radius);
  background: var(--paper);
}

.field__checkbox-slot {
  width: 1.25rem;
  height: 1.25rem;
  border: var(--rule) solid var(--muted);
  background: var(--paper);
}

.form__submit-slot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  padding: var(--space-2xs) var(--space-m);
  border: var(--rule) solid transparent;
  border-radius: var(--radius);
  background: var(--crimson);
  color: var(--paper);
  font-weight: 800;
}

.field input:not([type="checkbox"]),
.field select {
  width: 100%;
  min-height: 2.75rem;
  padding: var(--space-2xs) var(--space-xs);
  border: var(--rule) solid var(--muted);
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--text);
  font: inherit;
}

.field [aria-invalid="true"] {
  border-color: var(--crimson);
}

.field--check {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  column-gap: var(--space-xs);
}

.field--check input {
  width: 1.5rem;
  height: 1.5rem;
  margin: 0.1rem 0 0;
  accent-color: var(--blue-ink);
}

.field--check .field__error {
  grid-column: 1 / -1;
}

.field__error {
  color: var(--crimson);
  font-size: var(--step--1);
  font-weight: 700;
}

.form__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}

.form__privacy {
  font-size: var(--step--1);
}

.form-errors {
  display: grid;
  gap: var(--space-2xs);
  padding: var(--space-m);
  border: var(--rule) solid var(--crimson);
  background: var(--paper);
}

.form-errors[hidden] {
  display: none;
}

.form-errors__title {
  color: var(--crimson);
  font-weight: 800;
}

.form-errors__list {
  display: grid;
  gap: var(--space-3xs);
  padding-left: var(--space-m);
}

.form-status {
  padding: var(--space-s) var(--space-m);
  background: var(--blue-wash);
  border-left: var(--ring) solid var(--blue);
  color: var(--ink);
  font-weight: 700;
}

.form-status:empty {
  display: none;
}
