/* Maps the mockup stylesheets onto the markup of core blocks. The blocks carry the
   mockup's class names; the rules here cover what core renders differently:
   the navigation block, the button block, definition lists written as headings and
   paragraphs, and core's own default margins. */

/* Core layout and default margins ----------------------------------------------------- */

.wp-site-blocks > * {
  margin-block: 0;
}

:where(.is-layout-flow) > * {
  margin-block: 0;
}

figure.wp-block-image {
  margin: 0;
}

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

/* Sticky at every width: core's navigation needs no script of ours to collapse. */
.site-header {
  position: sticky;
}

.site-header__bar .wp-block-sivet-brand-link {
  margin-right: auto;
}

@media (width < 60em) {
  .home .brand__logo {
    display: none;
  }
}

/* layout.css gives the mockup's <nav class="site-nav"> display: block and a full-width
   row; core's navigation block is its own flex container. */
.site-header__bar .site-nav,
.nav-ready .site-header__bar .site-nav {
  display: flex;
  flex-basis: auto;
  order: 3;
}

.site-header__bar .site-header__cta {
  order: 2;
}

@media (min-width: 60em) {
  .site-header__bar .site-nav {
    order: 0;
  }

  .site-header__bar .site-header__cta {
    order: 0;
  }
}

.site-nav .wp-block-navigation__container {
  flex-direction: row;
  gap: var(--sp-6);
}

/* Core gives the links display: block; the mockup centres them in a 44 px target. */
.site-nav .wp-block-navigation-item__content {
  display: inline-flex;
  align-items: center;
  padding: 0;
}

/* Below 60em the navigation collapses behind "Menu", as in the mockup (core alone
   switches at 600 px). */
@media (width < 60em) {
  .site-nav .wp-block-navigation__responsive-container-open:not(.always-shown) {
    display: inline-flex;
  }

  .site-nav .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
    display: none;
  }
}

/* "Menu" button: the mockup's toggle, its three-line icon drawn in CSS. */
.site-header .site-nav .wp-block-navigation__responsive-container-open {
  align-items: center;
  gap: var(--sp-2);
  min-height: 2.75rem;
  padding: 0 var(--sp-3);
  border: 2px solid var(--c-field);
  border-radius: var(--radius-pill);
  background: var(--c-white);
  color: var(--c-ink);
  font-size: var(--fs-16);
  font-weight: 500;
  line-height: 1.2;
  cursor: pointer;
}

.site-header .site-nav .wp-block-navigation__responsive-container-open::before {
  content: "";
  display: block;
  width: 1.125rem;
  height: 14px;
  background:
    linear-gradient(currentColor 0 0) top / 100% 2px no-repeat,
    linear-gradient(currentColor 0 0) center / 100% 2px no-repeat,
    linear-gradient(currentColor 0 0) bottom / 100% 2px no-repeat;
}

/* The open drawer: the page's own colours and the mockup's list. */
.site-nav .wp-block-navigation__responsive-container.is-menu-open {
  padding: var(--sp-4) var(--gutter) var(--sp-8);
  background: var(--c-white);
  color: var(--c-ink);
}

.site-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
  padding-top: calc(var(--header-h) - var(--sp-4));
}

.site-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
  gap: 0;
  width: 100%;
}

.site-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
  width: 100%;
}

.site-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
  width: 100%;
  font-size: var(--fs-18);
  border-bottom: 1px solid var(--c-rule);
}

.site-nav .wp-block-navigation__responsive-container-close {
  top: var(--sp-6);
  right: var(--gutter);
}

/* Buttons (core/button with the theme's block styles) ---------------------------------- */

.wp-block-button .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  padding: 0 var(--sp-6);
  border: 2px solid transparent;
  border-radius: var(--radius-pill);
  font-size: var(--fs-16);
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--dur-ui) ease, color var(--dur-ui) ease;
}

.wp-block-button.is-style-primary .wp-block-button__link {
  background: var(--c-red);
  color: var(--c-white);
}

.wp-block-button.is-style-primary .wp-block-button__link:hover {
  background: var(--c-red-deep);
  color: var(--c-white);
}

.wp-block-button.is-style-secondary .wp-block-button__link {
  background: transparent;
  border-color: var(--c-red);
  color: var(--c-red);
}

.wp-block-button.is-style-secondary .wp-block-button__link:hover {
  background: var(--c-veil);
  color: var(--c-red-deep);
}

.wp-block-button.is-style-on-dark .wp-block-button__link {
  background: var(--c-white);
  color: var(--c-red-deep);
}

.wp-block-button.is-style-on-dark .wp-block-button__link:hover {
  background: var(--c-on-deep);
}

.site-header__cta .wp-block-button .wp-block-button__link {
  min-height: 2.75rem;
  padding: 0 var(--sp-4);
}

/* Links ---------------------------------------------------------------------------- */

/* `text-link` sits on the paragraph or list (rich text keeps no class on a link),
   so the weight goes to the links inside it. */
p.text-link,
ul.text-link {
  font-weight: inherit;
}

.text-link a {
  font-weight: 600;
}

.band--red .text-link a {
  color: var(--c-white);
}

.band--red .text-link a:hover {
  color: var(--c-on-deep);
}

/* Conditions sheet and contacts: <dl> rows written as heading/paragraph rows -------- */

.sheet__term {
  letter-spacing: normal;
  text-wrap: wrap;
}

/* The mockup's inline placeholders (<span>) are paragraphs here. */
.sheet__validity .placeholder,
.contacts__row .placeholder {
  padding-block: var(--sp-1);
}

/* Core zeroes the top margin of a first child in a flow layout. */
.prose > .wp-block-group.qa {
  margin-top: var(--sp-4);
}

.contacts__term {
  color: var(--c-muted);
  font-size: var(--fs-16);
  font-weight: 600;
}

/* Page header: the page excerpt is the introduction ---------------------------------- */

.page-header__intro .wp-block-post-excerpt__excerpt {
  max-width: none;
}

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

.site-footer__nav .wp-block-navigation__container {
  gap: var(--sp-1);
}

.site-footer__nav .wp-block-navigation-item__content {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0;
  font-weight: 500;
  text-decoration: underline;
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.18em;
}

.site-footer__nav a[aria-current] {
  font-weight: 600;
  text-decoration-thickness: 2px;
}

/* Placeholders that are blocks (a group holding a paragraph) ------------------------ */

.placeholder--image p {
  max-width: none;
}

/* Skip link: core prints its own, styled like the mockup's. */
.skip-link.screen-reader-text:focus {
  clip-path: none;
  width: auto;
  height: auto;
  top: var(--sp-2);
  left: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  background: var(--c-ink);
  color: var(--c-white);
  font-weight: 600;
  border-radius: var(--radius-field);
}

/* Current page: core's link colour rule outranks the mockup's .site-nav a[aria-current]. */
.site-nav .wp-block-navigation-item__content[aria-current] {
  color: var(--c-red);
}

/* Single video: the summary sits in the post content, one level below the heading. */
.video-single__text .video-text__subtitle + .wp-block-post-content > .placeholder:first-child {
  margin-top: calc(-1 * var(--sp-1));
}

/* Contatti page: the shared contact rows (a synced pattern, itself a contacts list)
   continue in the page's list, which draws the closing rule. */
.contacts__list--page > .contacts__list {
  border-bottom: 0;
}

/* layout.css: a white band right under the page header continues it. Here the band is
   the first block of the post content, not the header's sibling. */
.page-header + .wp-block-post-content > .band:first-child:not(.band--veil):not(.band--red) {
  padding-top: 0;
}