/*
Theme Name:   Ensoul Theme
Description:  North is a child theme of Twenty Twenty-Five designed to deliver a visually advanced and seamless site-building experience. Built exclusively for Ensoul clients, North extends the WordPress Site Editor with pre-built layouts, custom patterns, and a consistent, modular Tailwind-based design system. Ideal for corporate websites, portfolios, landing pages, and editorial projects, North combines creative flexibility with structural solidity while maintaining full compatibility with the parent theme and its support for international typography, accessibility, and advanced customization.
Tags: Tailwind, Accessibility, Custom Menu, Custom Logo, Editor Style, Featured Images, Site Editor, Block Editor Patterns, Wide Blocks, Block Editor Styles, Style Variations, Accessible, Blog, Portfolio, Corporate, Blocks
Author:       Ensoul
Template:     twentytwentyfive
Version:      1.1.0
Text Domain:  twentytwentyfivechild
*/

/* ─── Legacy block content width system ───
   Legacy ACF blocks manage their own width/padding (not WP constrained layout).
   This variable mirrors the theme.json root padding so legacy blocks always have
   consistent edge padding, even on fullwidth pages where --wp--style--root--padding
   is zeroed out for ensoul compatibility. */
:root {
  --fantoni-content-padding: 2rem; /* 32px — production mobile default */
  --fantoni-content-width: 1600px;
}
@media (min-width: 768px) {
  :root {
    --fantoni-content-padding: 3rem;
  }
}
@media (min-width: 1024px) {
  :root {
    --fantoni-content-padding: 4rem;
  }
}
@media (min-width: 1280px) {
  :root {
    --fantoni-content-padding: 5rem;
  }
}

/* ─── Legacy block compatibility ─── */

/* UIKit classes used in old wp:html blocks */
.uk-width-3-4 {
  width: min(100%, 1200px);
  margin-inline: auto;
}
.uk-width-1-1 {
  width: 100%;
}
.uk-width-5-6 { width: 83.333%; }
.uk-margin-auto { margin-left: auto; margin-right: auto; }
.uk-margin-large-bottom { margin-bottom: 3rem; }
.uk-margin-large-top { margin-top: 3rem; }
/* Only the education page form uses this UIkit class; production did not load UIkit, so the
   column was full width and the form a centred 36rem. */
.uk-width-1-3\@m .gform_wrapper {
  max-width: 36rem;
  margin-inline: auto;
}
/* GF form inputs: consistent height, centered text, uniform sizing */
.gform_wrapper .ginput_container input,
.gform_wrapper .ginput_container select,
.gform_wrapper .ginput_container textarea {
  height: 3rem;
  padding: 0 1rem !important;
  font-size: 0.9375rem !important;
  font-family: inherit;
  border: 1px solid #d5d5d0;
  border-radius: 4px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
}
.gform_wrapper .ginput_container select {
  appearance: none;
  background: #f5f5f5 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23666' stroke-width='1.5' fill='none'/%3E%3C/svg%3E") no-repeat right 1rem center;
  padding-right: 2.5rem !important;
}
.gform_wrapper .gform-grid-row {
  display: flex;
  gap: 0.75rem;
}
.gform_wrapper .gform-grid-col--size-auto {
  flex: 1;
}
.gform_wrapper .ginput_container textarea {
  height: auto;
  min-height: 6rem;
  padding: 0.75rem 1rem !important;
}

/* Legacy ACF blocks and the project/contact archives against North's global element styles:
   a:hover { color: var(--color-secondary-400) !important } would recolour their links, which
   carry inline colours, and the North heading scale would resize headings that have no inline
   font-size and no block-specific class (bare headings in textcenter, textstatic, textrow).
   The roots below are the outer wrappers printed by blocks/acf and inc/*-filters.php. */
:is(
    .fantoni-accordion,
    .fantoni-contatti-ricerca,
    .fantoni-contatti-wrapper,
    .fantoni-decori-grid,
    .fantoni-dl-catalog,
    .fantoni-download,
    .fantoni-fm-section,
    .fantoni-gridtwo,
    .fantoni-gridtwo-full,
    .fantoni-hero-section-half,
    .fantoni-hero-wrapper,
    .fantoni-panel-grid,
    .fantoni-progetti-ricerca,
    .fantoni-progetti-wrapper,
    .fantoni-slider-track,
    .fantoni-textcenter,
    .fantoni-textrow,
    .fantoni-textstatic,
    .fantoni-threecol-grid,
    .fantoni-threecolvar,
    .fantoni-varianti-grid
  ) {
  & a:hover {
    color: inherit !important;
  }

  & .gform_wrapper {
    width: 100%;
    max-width: none;
  }

  & h1:not([style*="font-size"]):not(.fantoni-gt-heading):not(.fantoni-tc-heading):not(.fantoni-ts-heading):not(.fantoni-tcv-heading, .fantoni-tcv-section-title):not(.fantoni-prose *):not(.fantoni-panel-title) {
    font-size: 1.875rem !important;
    line-height: 1 !important;

    @media (min-width: 768px) {
      font-size: 3rem !important;
    }
    @media (min-width: 1024px) {
      font-size: 3.75rem !important;
    }
    @media (min-width: 1280px) {
      font-size: 4.5rem !important;
    }
  }

  & h2:not([style*="font-size"]):not(.fantoni-gt-heading):not(.fantoni-tc-heading):not(.fantoni-ts-heading):not(.fantoni-tcv-heading, .fantoni-tcv-section-title):not(.fantoni-progetto-title):not(.fantoni-dl-section-title):not(.fantoni-prose *):not(.fantoni-panel-title) {
    font-size: 1.875rem !important;
    line-height: 1 !important;

    @media (min-width: 768px) {
      font-size: 3rem !important;
    }
  }

  & h3:not([style*="font-size"]):not(.fantoni-gt-heading):not(.fantoni-tc-heading):not(.fantoni-ts-heading):not(.fantoni-tcv-heading, .fantoni-tcv-section-title):not(.fantoni-prose *):not(.fantoni-panel-title) {
    font-size: 1.875rem !important;
    line-height: 2.25rem !important;

    @media (min-width: 1024px) {
      font-size: 2.25rem !important;
      line-height: 2.5rem !important;
    }
  }

  & h4 {
    line-height: 1;
  }
}

/* Video container (responsive iframe wrapper) — scoped to legacy contexts only.
   .uk-width-3-4 wraps videos in legacy pages. The ensoul video-slider also uses
   .video-container but with position:sticky — the uk-width parent prevents collision. */
.uk-width-3-4 .video-container,
.uk-width-1-1 .video-container,
.fantoni-gridtwo-full .video-container,
.wp-block-post-content > .video-container {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  height: 0;
  overflow: hidden;
}
.uk-width-3-4 .video-container iframe,
.uk-width-1-1 .video-container iframe,
.fantoni-gridtwo-full .video-container iframe,
.wp-block-post-content > .video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* ─── Admin bar: offset header when logged in ─── */
body.admin-bar {
  --wp-admin-bar-h: 32px;
}
@media (max-width: 782px) {
  body.admin-bar {
    --wp-admin-bar-h: 46px;
  }
}

/* ─── Utility: full-height hero section under fixed header ───
   Usage: add class "fantoni-hero-section" to any element.
   - margin-top pushes it below the fixed header
   - min-height fills exactly the remaining viewport
   - Works with admin bar (logged in) and without (incognito) */
.fantoni-hero-section {
  margin-top: var(--header-h, 70px);
  min-height: calc(100dvh - var(--header-h, 70px) - var(--wp-admin-bar-h, 0px));
}

/* Pages without hero (page-no-title template): push content below fixed header */
body.page-template-page-no-title .wp-site-blocks {
  padding-top: var(--header-h, 70px) !important;
}
/* page-no-title: content left-aligned, not centered */
body.page-template-page-no-title .wp-block-ensoul-content {
  margin-left: 0 !important;
  margin-right: auto !important;
  text-align: left !important;
}
.uk-padding-large { padding: 2rem; }
.fantoni-hero-section-half {
  margin-top: var(--header-h, 70px);
  min-height: calc(60dvh - var(--header-h, 70px) - var(--wp-admin-bar-h, 0px));
}
/* ─── page-fullwidth template ─── */

/* Remove ALL WP padding/margins from root */
body.home,
body.page-template-page-fullwidth,
body.single-prodotto,
body.page-template-page-download,
body.post-type-archive-progetto {
  --wp--style--root--padding-right: 0px !important;
  --wp--style--root--padding-left: 0px !important;
}

/* Remove padding from site-blocks and any global-padding containers */
body.home .wp-site-blocks,
body.home .has-global-padding,
body.home .wp-block-group,
body.home .wp-block-post-content,
body.home .wp-block-ensoul-content,
body.page-template-page-fullwidth .wp-site-blocks,
body.page-template-page-fullwidth .has-global-padding,
body.page-template-page-fullwidth .wp-block-group,
body.page-template-page-fullwidth .wp-block-post-content,
body.page-template-page-download .wp-site-blocks,
body.page-template-page-download .has-global-padding,
body.page-template-page-download .wp-block-group,
body.page-template-page-download .wp-block-ensoul-content,
body.post-type-archive-progetto .wp-site-blocks,
body.post-type-archive-progetto .has-global-padding,
body.post-type-archive-progetto .wp-block-group,
body.single-prodotto .wp-site-blocks,
body.single-prodotto .has-global-padding,
body.single-prodotto .wp-block-group,
body.single-prodotto .wp-block-post-content {
  padding-left: 0 !important;
  padding-right: 0 !important;
  max-width: none !important;
}

/* Allow blocks to manage their own width — only remove WP's constrained layout max-width
   Blocks like textstatic, textcenter have their own max-width inline.
   Blocks like gridtwo, hero are naturally full-width. */
body.home .wp-block-post-content,
body.home .wp-block-ensoul-content,
body.page-template-page-fullwidth .wp-block-post-content,
body.page-template-page-download .wp-block-ensoul-content,
body.single-prodotto .wp-block-post-content {
  max-width: none !important;
}
body.home .is-layout-constrained > *,
body.page-template-page-fullwidth .is-layout-constrained > *,
body.page-template-page-download .is-layout-constrained > *,
body.post-type-archive-progetto .is-layout-constrained > *,
body.single-prodotto .is-layout-constrained > * {
  max-width: none !important;
}

/* ensoul blocks with dimension "content" placed directly in the post content
   of full-width pages: the theme removes every root padding there, so their
   max-width: 1600px alone lets them touch the viewport edges under ~1680px.
   Give them the same fluid width the legacy blocks use. */
body.page-template-page-fullwidth .wp-block-post-content > .max-w-container-content,
body.single-prodotto .wp-block-post-content > .max-w-container-content {
  width: min(100% - 2 * var(--fantoni-content-padding, 5rem), var(--fantoni-content-width, 1600px)) !important;
}

/* The decori template keeps the root padding (its grid relies on it), so legacy blocks
   in its content must not add their own side gutter on top of it. Production centres
   them at 960px on these pages. */
body.page-template-page-decori main {
  --fantoni-content-padding: 0px;
  --fantoni-content-width: 960px;
}

/* Text blocks dropped straight into the content of full-width pages have no container of
   their own, and the root padding is zeroed there: give them the page gutter. */
body:is(.page-template-page-fullwidth, .single-prodotto) .wp-block-post-content > :is(p, h1, h2, h3, h4, h5, h6, ul, ol, .button-container) {
  padding-inline: var(--fantoni-content-padding, 2rem);
}

/* Core image blocks migrated from the previous site: there every image had 2rem above and
   below, which kept stacked photos and text apart. */
body:is(.page-template-page-fullwidth, .single-prodotto) .wp-block-post-content > .wp-block-image img {
  margin-block: 2rem;
}

/* Blocks that should stay constrained within full-width pages */
body.home .wp-block-post-content > .fantoni-threecolvar,
body.home .wp-block-ensoul-content > .fantoni-threecolvar,
body.page-template-page-fullwidth .wp-block-post-content > .fantoni-threecolvar,
body.single-prodotto .wp-block-post-content > .fantoni-threecolvar {
  margin-inline: auto !important;
}

/* page-fullwidth: first block gets header clearance when there's no hero */
body.page-template-page-fullwidth .wp-block-post-content > *:first-child:not(.fantoni-hero) {
  padding-top: var(--header-h, 106px);
}

/* Product pages: the legacy hero gets the same header clearance as on page-fullwidth, so its
   title sits 15vh below the header as on production. */
body.single-prodotto .wp-block-post-content > .fantoni-hero-wrapper:first-child {
  padding-top: var(--header-h, 106px);
}

/* Below the header the hero fills the rest of the screen (production min-h-top-screen), so the
   designer credit at its bottom stays in view. */
:is(body.page-template-page-fullwidth, body.single-prodotto) .wp-block-post-content > .fantoni-hero-wrapper:first-child > div:first-child {
  min-height: calc(100dvh - var(--header-h, 106px) - var(--wp-admin-bar-h, 0px)) !important;
}

/* A LayerSlider hero comes after its init script, so the rule above misses it. Margin, not
   padding: the slider sets its own height inline. The !important beats the zeroed margins
   between full-width blocks below. */
:is(body.page-template-page-fullwidth, body.single-prodotto) .wp-block-post-content > script:first-child + :is(.ls-fullscreen-wrapper, .ls-wp-container) {
  margin-top: var(--header-h, 106px) !important;
}

/* Getwid advanced heading: keep at body text size (not heading scale) */
.wp-block-getwid-advanced-heading__content {
  font-size: 1.125rem !important;
  line-height: 1.75 !important;
}

/* Remove default WP block spacing — legacy blocks have zero gap in production */
body.home .wp-block-post-content > * + *,
body.home .wp-block-ensoul-content > * + *,
body.page-template-page-fullwidth .wp-block-post-content > * + *,
body.page-template-page-download .wp-block-ensoul-content > * + *,
body.single-prodotto .wp-block-post-content > * + * {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* Textrow prose: override ALL global heading/paragraph overrides. */
.fantoni-textrow .fantoni-prose h1 { font-size: 2em !important; line-height: 1.2 !important; }
.fantoni-textrow .fantoni-prose h2 { font-size: 1.5em !important; line-height: 1.33 !important; }
.fantoni-textrow .fantoni-prose h3 { font-size: 1.25em !important; line-height: 1.4 !important; }
.fantoni-textrow .fantoni-prose p { font-size: inherit !important; line-height: inherit !important; }

/* Legacy paragraphs: match production Tailwind leading-snug + prose margins.
   Scoped to ACF block containers only — not header/footer/menu elements. */
.fantoni-textstatic p,
.fantoni-textrow p,
.fantoni-threecolvar p,
.fantoni-download p,
.fantoni-gridtwo-full p,
.fantoni-gt-text p,
.fantoni-textcenter p {
  line-height: 1.375;
  letter-spacing: normal;
  margin-bottom: 1.25em;
}
.fantoni-textstatic p:last-child,
.fantoni-textrow p:last-child,
.fantoni-threecolvar p:last-child,
.fantoni-download p:last-child,
.fantoni-gridtwo-full p:last-child,
.fantoni-gt-text p:last-child,
.fantoni-textcenter p:last-child {
  margin-bottom: 0;
}
/* Inline images in text fields */
.fantoni-textstatic p img,
.fantoni-gt-text p img {
  max-width: 100%;
  height: auto;
  margin-top: 1em;
}
/* Fullwidth images: remove WP figure margins */
body.page-template-page-fullwidth .wp-block-post-content > figure,
body.home .wp-block-post-content > figure {
  margin: 0 !important;
}

/* Ensure body text in legacy blocks isn't grey from ensoul vars */
.fantoni-textstatic,
.fantoni-textrow,
.fantoni-threecolvar,
.fantoni-download {
  color: inherit;
}

/* ─── Pages with hero under fixed header ─── */
/* Covers: home, all custom templates (page-template-*), product and variant pages, every archive,
   search results and the 404 page */
body.home,
body[class*="single-prodotto"],
body[class*="single-variante"],
body[class*="page-template-page-"],
body.archive,
body.search,
body.error404 {
  padding-top: 0 !important;
}
body.home .wp-site-blocks > *,
body[class*="single-prodotto"] .wp-site-blocks > *,
body[class*="single-variante"] .wp-site-blocks > *,
body[class*="page-template-page-"] .wp-site-blocks > *,
body.archive .wp-site-blocks > *,
body.search .wp-site-blocks > *,
body.error404 .wp-site-blocks > * {
  margin-block-start: 0 !important;
}
/* Hero section: pad-top = header height so content starts below fixed header */
body:not(.home)
  .wp-site-blocks
  > header
  + section
  .wp-block-ensoul-spacing-wrapper[style*="vh"] {
  padding-top: var(--header-h, 106px) !important;
}

/* ─── Taxonomy archive: hero fallback bg when no featured image ─── */
.wp-block-query
  ~ .wp-block-ensoul-spacing-wrapper[style*="background-image: url"],
.wp-block-ensoul-spacing-wrapper[style*="80vh"] {
  background-color: var(--color-primary-500, #1a2d4e);
}

/* ─── Variante cards: light bg for transparent PNGs ─── */
.ensoul-image-block img[src$=".png"] {
  background-color: #f8f8f8;
}

/* ─── Textrow prose: heading sizes like Tailwind prose-xl ─── */
.fantoni-prose h1 {
  font-size: 2em !important;
  line-height: 1.15 !important;
  margin-bottom: 0.75em;
}
.fantoni-prose h2 {
  font-size: 1.5em !important;
  line-height: 1.2 !important;
  margin-bottom: 0.65em;
}
.fantoni-prose h3 {
  font-size: 1.25em !important;
  line-height: 1.3 !important;
  margin-bottom: 0.5em;
}
.fantoni-prose p {
  margin-bottom: 1.25em;
}

/* ─── ACF blocks inside ensoul/content: remove self-contained width ───
   The width:min() approach is for page-fullwidth (no parent constraint).
   Inside ensoul/content the parent already constrains to 1600px. */
/* Textrow inside ensoul/content: remove self-contained width (parent already constrains) */
.wp-block-ensoul-content .fantoni-textrow {
  width: 100% !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* ─── Varianti grid — rollover effect ─── */
.fantoni-variante-card:hover .fantoni-img-default {
  opacity: 0;
}
.fantoni-variante-card:hover .fantoni-img-rollover {
  opacity: 1 !important;
}
/* Fallback hover when no rollover image */
.fantoni-variante-card:hover
  .fantoni-rollover-wrap:not(:has(.fantoni-img-rollover))
  .fantoni-img-default {
  opacity: 0.85;
}
/* Rollover on ensoul image blocks in query loops */
.fantoni-has-rollover {
  position: relative;
  overflow: hidden;
}
.fantoni-has-rollover .fantoni-img-default {
  transition: opacity 300ms ease;
}
.fantoni-has-rollover:hover .fantoni-img-default,
[data-dynamic-link]:hover .fantoni-has-rollover .fantoni-img-default {
  opacity: 0;
}
.fantoni-has-rollover:hover .fantoni-img-rollover,
[data-dynamic-link]:hover .fantoni-has-rollover .fantoni-img-rollover {
  opacity: 1 !important;
}

/* ─── end page-fullwidth ─── */

/* ─── Gravity Forms styling ─── */
/* Search form used by the 404 and search result templates, styled like the site buttons. */
.fantoni-search-form .wp-block-search__inside-wrapper {
  gap: var(--spacing-xs, 8px);
  max-width: 40rem;
}
.fantoni-search-form .wp-block-search__input {
  border: 1px solid #d5d5d0;
  border-radius: 4px;
  padding: 0.75rem 1rem;
  font-family: inherit;
  font-size: 1rem;
}
.fantoni-search-form .wp-block-search__button {
  margin-left: 0;
  border-radius: 4px;
  background-color: var(--color-primary-500, #1a2d4e);
  color: #fff;
  padding: 0.75rem 1.5rem;
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  text-transform: uppercase;
}

.gform_wrapper {
  width: min(100% - 2 * var(--fantoni-content-padding, 5rem), var(--fantoni-content-width, 1600px));
  margin-inline: auto;
  padding: clamp(2rem, 4vw, 4rem) 0;
}
.gform_wrapper input[type="text"],
.gform_wrapper input[type="email"],
.gform_wrapper input[type="tel"],
.gform_wrapper input[type="url"],
.gform_wrapper input[type="number"],
.gform_wrapper textarea,
.gform_wrapper select {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1px solid #d5d5d0;
  border-radius: 4px;
  font-family: inherit;
  font-size: 1rem;
}
.gform_wrapper input[type="submit"],
.gform_wrapper .gform_button {
  background: #1a2d4e !important;
  color: #fff !important;
  border: none !important;
  padding: 0.5rem 1.5rem !important;
  font-weight: 600 !important;
  font-family: inherit !important;
  font-size: 0.75rem !important;
  cursor: pointer;
  border-radius: 4px !important;
  height: 2.5rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.gform_wrapper input[type="submit"]:hover,
.gform_wrapper .gform_button:hover {
  background: rgba(26, 45, 78, 0.9);
}
.gform_wrapper .gfield_label {
  font-weight: 600;
  margin-bottom: 0.5rem;
  display: block;
}
.gform_wrapper .gfield {
  margin-bottom: 1.5rem;
}

#inactivity_message {
  display: flex;
  align-items: center;
  justify-content: center;
  background: black;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 999;
  color: #999;
  padding: 0 2rem;
  text-align: center;
}

/* Search results: one row per result, separated by a rule. */
.fantoni-search-result {
  border-bottom: 1px solid #d5d5d0;
}

/* Contact team columns: the column gaps North 1.4 accepts are 0 or the 5px mobile row gap,
   so the spacing of the production page (16px under a heading, 32px between groups) is set here. */
.fantoni-contatti-team .column {
  row-gap: 1rem;
}

.fantoni-contatti-team .column > h4:not(:first-child) {
  margin-top: 1rem;
}

@media (max-width: 767px) {
  .fantoni-contatti-team .ensoul-columns-block {
    row-gap: 2rem;
  }
}

/* Variante pages: on mobile the hero (hidden on desktop) already shows the back links and the
   title, so the desktop copies below it are hidden there. */
@media (max-width: 767px) {
  body.single-variante .wp-site-blocks > .wp-block-template-part:has(.fantoni-back-prodotto) {
    display: none;
  }

  /* Variante content opens with its own spacer; the two template spacers under the hero
     stacked on it and left three times more room above the intro than below it. */
  body.single-variante:has(main.content-section > .ensoul-spacer:first-child) .wp-site-blocks > .ensoul-spacer {
    display: none;
  }

  /* The collection banner before the footer spaces its button only from md up. */
  body.single-variante .ensoul-group[style*="background-image"] .wp-block-ensoul-button {
    margin-top: var(--spacing-s, 16px);
  }
}

/* Privacy and cookie policies: iubenda embeds the text without its own styles (iub-no-markup),
   so the headings took the North display scale and nothing had any vertical rhythm. The
   wrapper is the policy pages' own, since the privacy and cookie embeds use different roots. */
.fantoni-policy {
  max-width: 960px;
  font-size: 1rem;
  line-height: 1.6;

  & h1 {
    font-size: 1.875rem !important;
    line-height: 1.15 !important;
    margin: 0 0 1.5rem;
  }

  & h2 {
    font-size: 1.5rem !important;
    line-height: 1.2 !important;
    margin: 3rem 0 1rem;
  }

  & h3 {
    font-size: 1.25rem !important;
    line-height: 1.3 !important;
    margin: 2rem 0 0.75rem;
  }

  & h4 {
    font-size: 1.0625rem !important;
    line-height: 1.4 !important;
    margin: 1.5rem 0 0.5rem;
  }

  & p {
    line-height: 1.6;
    margin: 0 0 0.75rem;
  }

  & ul {
    list-style: disc;
    padding-left: 1.25rem;
    margin: 0 0 1rem;
  }

  & li {
    line-height: 1.6;
    margin-bottom: 0.25rem;
  }

  @media (min-width: 768px) {
    & h1 {
      font-size: 2.25rem !important;
    }

    & h2 {
      font-size: 1.75rem !important;
    }
  }
}

/* Query loop cards built with North blocks set their spacing for desktop only. On phones they
   get the rhythm of the legacy "Vedi anche" cards: 32px between cards, 16px under the image,
   and a smaller title. */
@media (max-width: 767px) {
  .wp-block-query .wp-block-post-template {
    gap: 2rem !important;
  }

  .wp-block-post-template :is(.wp-block-ensoul-image, .wp-block-post-featured-image) + * {
    margin-top: 1rem !important;
  }

  /* North sizes come from layered !important utilities, which plain CSS cannot override,
     so the card title is resized through the token they read. */
  .wp-block-post-template {
    --text-heading-base: 1.5rem;
    --text-heading-base--line-height: 1.2;
  }

  .wp-block-post-template :is(h1, h2, h3, h4) {
    padding-bottom: 0.5rem !important;
  }
}

/* Variante pages: captions under the photos in a column sat right against the image. */
body.single-variante .ensoul-column-wrapper .image-section + p {
  margin-top: 1rem;
}

/* Award badge placed in a hero (e.g. ADI Design Index on Atelier): bottom left, on the gutter. */
.fantoni-hero-badge {
  position: absolute !important;
  left: var(--spacing-content-padding, 2rem);
  bottom: 2rem;
  width: 110px !important;
  z-index: 20;

  & img {
    width: 100%;
    height: auto;
  }

  @media (min-width: 768px) {
    bottom: 3rem;
    width: 200px !important;
  }
}