/* ERT site rules for the North blocks. Colours, type scale, spacing scale,
   buttons and dark mode come from the North design tokens (plugin panel,
   source north-tokens.json in this theme). */

:root {
  /* ERT: content size for the blocks (the Sage theme.json does not generate it) */
  --wp--style--global--content-size: 1200px;
  --wp--style--global--wide-size: 1920px;

  /* Steps of the old North scale that are not token names; the rules below use them */
  --spacing-sm: 12px;
  --spacing-md: 16px;
  --spacing-lg: 20px;

  --spacing-container-columns: 768px;
  --spacing-container-content-padded: var(--spacing-container-content);

  /* Mobile lateral padding for fullwidth blocks inner content */
  --mobile-lateral-padding: 30px !important;

  /* Font sizes used by the button rules */
  --text-xs: 12px;
  --text-sm: 14px;
  --text-base: 16px;
  --text-lg: 18px;
  --text-xl: 20px;
  --text-2xl: 24px;
  --text-3xl: 30px;
  --text-4xl: 36px;
  --text-5xl: 48px;

  --leading-tight: 1.25;
  --leading-normal: 1.5;
  --leading-loose: 1.75;

  --container-xs: 480px;
  --container-sm: 640px;
  --container-md: 768px;
  --container-lg: 1024px;
  --container-xl: 1280px;
  --container-2xl: 1536px;

  --btn-padding-x: 16px;

  --gap-xs: 8px;
  --gap-sm: 12px;
  --gap-md: 16px;
  --gap-lg: 20px;
  --gap-xl: 24px;
  --gap-2xl: 32px;

  --border-radius-sm: 4px;
  --border-radius-md: 8px;
  --border-radius-lg: 16px;
  --border-radius-full: 9999px;

  --transition-fast: 150ms;
  --transition-base: 300ms;
  --transition-slow: 500ms;
  --transition-ease: ease-in-out;
}








/* Container width utilities - use !important to override WordPress editor defaults */
.max-w-container-columns {
  max-width: var(--spacing-container-columns) !important;
}

.max-w-container-content {
  max-width: var(--spacing-container-content);
  width: 100%;
}

/* Mobile lateral padding for inner content of top-level full-width blocks */
@media (max-width: 767px) {
  .mobile-content-padding {
    padding-left: var(--mobile-lateral-padding, 30px) !important;
    padding-right: var(--mobile-lateral-padding, 30px) !important;
  }
}

/* Filter: xs on mobile */
@media (max-width: 767px) {
  .wp-block-ensoul-filter {
    --text-paragraph-base: var(--text-paragraph-xs);
    --text-paragraph-base--line-height: var(--text-paragraph-xs--line-height);
    --text-filter-size: var(--text-paragraph-xs);
  }
}

/* Fix nested fullwidth sections inside query loops */
section[class*='fullwidth-section-'] section[class*='fullwidth-section-'],
.mobile-content-padding
  .wp-block-post-template
  section[class*='fullwidth-section-'] {
  width: 100% !important;
  position: static !important;
  left: auto !important;
  right: auto !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
@media (max-width: 767px) {
  .mobile-content-padding .mobile-content-padding {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* Sync editor mobile preview lateral padding */
html.view-as-mobile
  .editor-styles-wrapper
  .is-root-container.has-global-padding,
html.view-as-mobile .editor-styles-wrapper .is-root-container {
  --mobile-lateral-padding: 30px;
}

/* Column gap */
.column {
  gap: 10px 20px !important;
}





:where(.wp-site-blocks *:focus) {
  outline: none !important;
}
.icon-style svg {
  width: 100px;
  height: 100px;
}
.icon-style path {
  fill: white;
}

.video-embed-container {
  z-index: 0 !important;
}

.ensoul-group-block {
  z-index: 1 !important;
}

body {
  overflow-x: hidden;
}

/* Landing page: structural padding so content-width blocks align with the header
   (which has padding: 0 var(--spacing-l) on .header-content).
   Full-width blocks break out via w-screen/left-1/2/-ml-[50vw] and are unaffected.
   Make .wp-site-blocks act as the header .wrapper: same max-width +
   responsive padding. Inner blocks are constrained by the parent,
   so they line up with the header automatically. */
.landing-page.wp-site-blocks {
  max-width: var(--wrapper-width) !important;
  padding-left: var(--wrapper-padding) !important;
  padding-right: var(--wrapper-padding) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}
/* Zero inner block padding — the outer .wp-site-blocks already provides it */
.landing-page {
  --spacing-content-padding: 0px;
}
/* content-section fills its parent without extra constraints */
.landing-page .content-section {
  max-width: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
/* Fullwidth sections break out of the wrapper, so their inner content
   needs its own padding to match the header. Set --spacing-content-padding
   back to --wrapper-padding, and cap the padded container at --wrapper-width
   so inner content = wrapper-width minus 2 × wrapper-padding = header content. */
.landing-page section.w-screen,
.landing-page section[class*='fullwidth-section-'],
.landing-page section.ensoul-breakout {
  --spacing-content-padding: var(--wrapper-padding);
  --spacing-container-content-padded: var(--wrapper-width);
}

/* North 1.4 has no .mobile-content-padding class: its 30px now come from the
   content padding the breakout sections read. */
@media (max-width: 767px) {
  .landing-page section.ensoul-breakout {
    --spacing-content-padding: var(--mobile-lateral-padding);
  }
}

/* Fullwidth sections: break out of any constrained parent */
section[class*='fullwidth-section-'] {
  width: 100vw;
  position: relative;
  left: 50%;
  margin-left: -50vw;
  box-sizing: border-box;
}

/* =============================================
   Ensoul Tailwind 4 Utility Classes (Frontend)
   The ensoul plugin uses TW4 syntax (! suffix for important).
   The theme runs TW3 (! prefix) so these classes are never
   generated. We define them here as plain CSS.
   ============================================= */

/* --- Layout / Display (! important) --- */
.block\! {
  display: block !important;
}
.flex\! {
  display: flex !important;
}
.inline-flex\! {
  display: inline-flex !important;
}
.grid\! {
  display: grid !important;
}
.hidden\! {
  display: none !important;
}

/* --- Position (! important) --- */
.relative\! {
  position: relative !important;
}
.absolute\! {
  position: absolute !important;
}
.fixed\! {
  position: fixed !important;
}
.sticky\! {
  position: sticky !important;
}
.inset-0\! {
  inset: 0 !important;
}

/* --- Sizing (! important) --- */
.w-full\! {
  width: 100% !important;
}
.h-full\! {
  height: 100% !important;
}
.max-w-none\! {
  max-width: none !important;
}

/* --- Overflow (! important) --- */
.overflow-hidden\! {
  overflow: hidden !important;
}
.overflow-visible\! {
  overflow: visible !important;
}

/* --- Z-index (! important) --- */
.z-0\! {
  z-index: 0 !important;
}
.z-10\! {
  z-index: 10 !important;
}
.z-20\! {
  z-index: 20 !important;
}
.z-50\! {
  z-index: 50 !important;
}
.z-\[1\] {
  z-index: 1;
}

/* --- Object Fit (! important) --- */
.object-cover\! {
  object-fit: cover !important;
}

/* --- Pointer Events --- */
.pointer-events-none\! {
  pointer-events: none !important;
}

/* --- Spacing (! important) --- */
.m-0\! {
  margin: 0 !important;
}
.p-0\! {
  padding: 0 !important;
}

/* --- Focus --- */
.focus\:outline-none\!:focus {
  outline: none !important;
}

/* --- Responsive: max-md (max-width: 767px) --- */
@media (max-width: 767px) {
  .max-md\:hidden {
    display: none;
  }
  .max-md\:\!hidden {
    display: none !important;
  }
  .max-md\:flex-col {
    flex-direction: column;
  }
  .max-md\:block {
    display: block;
  }
}

/* --- Responsive: md (min-width: 768px) --- */
@media (min-width: 768px) {
  .md\:hidden {
    display: none;
  }
  .md\:\!hidden {
    display: none !important;
  }
  .md\:block {
    display: block;
  }
  .md\:grid {
    display: grid;
  }
  .md\:w-full {
    width: 100%;
  }
  .md\:max-w-none {
    max-width: none;
  }
  .md\:max-w-none\! {
    max-width: none !important;
  }
  .md\:mx-auto {
    margin-left: auto;
    margin-right: auto;
  }
  .md\:mx-0 {
    margin-left: 0;
    margin-right: 0;
  }
  .md\:max-w-container-content {
    max-width: var(--spacing-container-content) !important;
  }
}

/* --- Container Queries --- */
.\@container\/inner {
  container-type: inline-size;
  container-name: inner;
}

/* --- Button Utilities --- */
.text-button\! {
  color: var(--color-button) !important;
}
.hover\:text-button-hover\!:hover {
  color: var(--color-button-hover) !important;
}
.text-button-font-size {
  font-size: var(--text-button-font-size);
}
.font-button {
  font-family: var(--font-button);
}
.bg-button-background {
  background-color: var(--color-button-background);
}
.hover\:bg-button-background-hover:hover {
  background-color: var(--color-button-background-hover);
}
.rounded-button {
  border-radius: var(--radius-button);
}
.p-padding-button {
  padding: var(--spacing-padding-button);
}
.border-button-width {
  border-width: var(--border-width-button-width);
  border-style: solid;
}
.border-button-color {
  border-color: var(--border-color-button-color);
}
.gap-button {
  gap: var(--gap-button);
}
.\[text-decoration\:var\(--decoration-button\)\]\! {
  text-decoration: var(--decoration-button) !important;
}
.hover\:\[text-decoration\:var\(--decoration-button-hover\)\]\!:hover {
  text-decoration: var(--decoration-button-hover) !important;
}
.\[\&_path\]\:fill-button path {
  fill: var(--color-button);
}
.\[\&_path\]\:group-hover\:fill-button-hover:hover path,
.group:hover .\[\&_path\]\:group-hover\:fill-button-hover path {
  fill: var(--color-button-hover);
}
.\[\&_svg\]\:w-button-icon-width svg {
  width: var(--sizing-button-icon-width);
}
.\[\&_svg\]\:h-auto svg {
  height: auto;
}
.w-button-default {
  width: var(--sizing-button-default);
}
.transition-color {
  transition-property: color, background-color, border-color;
  transition-timing-function: ease-in-out;
}

/* --- Group / Spacing Wrapper Utilities --- */
.gap-group {
  gap: var(--spacing-group);
}
.px-\[var\(--spacing-content-padding-left\)\] {
  padding-left: var(--spacing-content-padding-left);
  padding-right: var(--spacing-content-padding-left);
}
.px-\[var\(--mobile-lateral-padding\)\] {
  padding-left: var(--mobile-lateral-padding);
  padding-right: var(--mobile-lateral-padding);
}
.pt-content-top {
  padding-top: var(--spacing-content-top);
}

/* --- Typography Theme Utilities --- */
.text-paragraph-base\! {
  font-size: var(--text-paragraph-base) !important;
}
.text-paragraph-xs\! {
  font-size: var(--text-paragraph-xs) !important;
}
.text-heading-base\! {
  font-size: var(--text-heading-base) !important;
}
.text-heading-xs\! {
  font-size: var(--text-heading-xs) !important;
}
.text-heading-sm\! {
  font-size: var(--text-heading-sm) !important;
}
.text-heading-lg\! {
  font-size: var(--text-heading-lg) !important;
}
.text-heading-xl\! {
  font-size: var(--text-heading-xl) !important;
}
.max-w-container-heading\! {
  max-width: var(--spacing-container-heading) !important;
}
.max-w-container-columns\! {
  max-width: var(--spacing-container-columns) !important;
}
.max-w-container-paragraph {
  max-width: var(--spacing-container-paragraph);
}
.max-w-container-image {
  max-width: var(--spacing-container-image);
}
.max-w-container-gallery {
  max-width: var(--spacing-container-gallery);
}
.max-w-container-list {
  max-width: var(--spacing-container-list);
}
.max-w-container-video {
  max-width: var(--spacing-container-video);
}
.max-w-container-slider {
  max-width: var(--spacing-container-slider);
}
.max-w-container-accordion {
  max-width: var(--spacing-container-accordion);
}
.max-w-container-divider {
  max-width: var(--spacing-container-divider);
}
.max-w-container-content-padded {
  max-width: var(--spacing-container-content-padded);
}
.font-heading {
  font-family: var(--font-heading);
}
.font-paragraph {
  font-family: var(--font-paragraph);
}
.leading-line-height-heading {
  line-height: var(--leading-heading);
}
.tracking-heading {
  letter-spacing: var(--tracking-heading);
}
.text-caption {
  font-size: var(--text-caption);
}
@media (min-width: 768px) {
  .md\:text-paragraph-base\! {
    font-size: var(--text-paragraph-base) !important;
  }
  .md\:text-paragraph-xs\! {
    font-size: var(--text-paragraph-xs) !important;
  }
  .md\:text-heading-base\! {
    font-size: var(--text-heading-base) !important;
  }
  .md\:text-heading-xs\! {
    font-size: var(--text-heading-xs) !important;
  }
  .md\:text-heading-sm\! {
    font-size: var(--text-heading-sm) !important;
  }
  .md\:text-heading-lg\! {
    font-size: var(--text-heading-lg) !important;
  }
  .md\:text-heading-xl\! {
    font-size: var(--text-heading-xl) !important;
  }
}

/* --- Accordion Utilities --- */
.gap-gap-accordion {
  gap: var(--gap-accordion);
}
.px-accordion-x {
  padding-left: var(--spacing-accordion-x);
  padding-right: var(--spacing-accordion-x);
}
.py-accordion-y {
  padding-top: var(--spacing-accordion-y);
  padding-bottom: var(--spacing-accordion-y);
}
.border-accordion {
  border-width: var(--border-width-accordion);
  border-style: solid;
}
.border-border-accordion {
  border-color: var(--border-color-accordion);
}
.w-dimension-icon-accordion {
  width: var(--sizing-dimension-icon-accordion);
}
.\[\&_svg\]\:w-dimension-icon-accordion svg {
  width: var(--sizing-dimension-icon-accordion);
}

/* --- Filter Utilities --- */
.gap-gap-filter {
  gap: var(--gap-filter);
}
.text-filter-size {
  font-size: var(--text-filter-size);
}
.text-filter-hover {
  color: var(--color-filter-hover);
}
.text-filter-active {
  color: var(--color-filter-active);
}
.\[\&\.active-term\]\:text-filter-active.active-term {
  color: var(--color-filter-active);
}

/* --- List Utilities --- */
.w-dimension-icon-list {
  width: var(--sizing-dimension-icon-list);
}

/* --- Progress Bar --- */
.bg-fill-progress-bar {
  background-color: var(--color-fill-progress-bar);
}

/* --- Transition Utilities --- */
.transition-\[grid-template-rows\] {
  transition-property: grid-template-rows;
}
.transition-width {
  transition-property: width;
}
.delay-50 {
  transition-delay: 50ms;
}
.delay-120 {
  transition-delay: 120ms;
}
.duration-350 {
  transition-duration: 350ms;
}

/* --- Accordion Group State --- */
.group.is-open .group-\[\.is-open\]\:opacity-0 {
  opacity: 0;
}
.group.is-open .group-\[\.is-open\]\:opacity-100 {
  opacity: 1;
}
.group.is-open .group-\[\.is-open\]\:rotate-90 {
  transform: rotate(90deg);
}
.group.is-open .group-\[\.is-open\]\:rotate-180 {
  transform: rotate(180deg);
}
.group.is-open .group-\[\.is-open\]\:translate-y-0 {
  transform: translateY(0);
}
.group.is-open .group-\[\.is-open\]\:grid-rows-\[1fr\] {
  grid-template-rows: 1fr;
}

.ens-btn.ens-btn-primary {
  --decoration-button: none;
  --decoration-button-hover: none;
  --text-button-font-size: var(--text-sm);
  /* The token rule sets font-size from --btn-font-size on this same selector */
  font-size: var(--text-button-font-size);
  line-height: 1.25rem;
  transition: transform 300ms ease-in-out;
}
.ens-btn.ens-btn-primary:hover {
  transform: scale(1.1);
}
@media (min-width: 768px) {
  .ens-btn.ens-btn-primary {
    --text-button-font-size: var(--text-base);
    --spacing-padding-button: 1rem 2rem;
  }
}

.ens-btn.ens-btn-secondary {
  --text-button-font-size: var(--text-sm);
  /* The token rule sets font-size from --btn-font-size on this same selector */
  font-size: var(--text-button-font-size);
}

/* fix default style */
/* eventualmente modificare da theme.json */
:where(figure) {
  margin-bottom: 0;
}

:where(.wp-site-blocks) > main {
  margin-top: 0;
}

.header-wrapper .header-content {
  padding: 0 var(--spacing-l);
}

.header-block-wrapper .header-main-row {
  max-width: var(--spacing-container-content);
  margin: 0 auto;
  border-radius: var(--border-radius-md);
  padding: var(--spacing-md) var(--spacing-m);
  margin-top: var(--spacing-m);
}

/* Maps */
.image-location-maps,
.text-location-maps {
  display: none !important;
}
.leaflet-popup-content {
  width: var(--container-xs);
  max-width: 160px;
}

/* Slider */
@media (width <= 48rem) {
  .content-slider {
    padding-bottom: var(--spacing-2xl);
  }
  .content-slider-next,
  .content-slider-prev {
    top: auto;
    bottom: 0;
  }
}

.content-slider.autoscroll .swiper-slide figure {
  max-height: 60vh;
}

@media (max-width: 1024px) {
  .content-slider.autoscrol .swiper-slide figure {
    height: 45vh;
  }
}

/* rimuovi questa parte per mostrare gli index sulle slide */
.slide-index-display {
  display: none;
}

/* Content slider: arrow flip when hovering left side — target SVG directly
   to avoid composition issues with TW4 individual transform properties */
.navigation-arrow.flip-x > .content-slider-prev-next svg {
  transform: scaleX(-1) !important;
}

/* Content slider: red arrow */
.navigation-arrow svg,
.navigation-arrow svg path,
.content-slider-prev svg,
.content-slider-prev svg path,
.content-slider-next svg,
.content-slider-next svg path {
  fill: #bf0e0e !important;
}

/* utility per aspect ratio dei video "embeddati". aggiungi questa classe al gruppo che ha come sfondo il video */
.aspect-ratio-group {
  position: relative;
  width: 100%;
  height: 0;
  padding-top: 56.25%;
  iframe {
    height: auto !important;
  }
}

/* ERT: YouTube video cover fix
   Le classi Tailwind per transform e dimensioni arbitrary non esistono
   nel vecchio Tailwind, le definiamo qui */

/* Transform classes mancanti */
.-translate-x-1\/2 {
  --tw-translate-x: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y));
}

.-translate-y-1\/2 {
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y));
}

/* Applica stili completi al video iframe */
.video-embed-container iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, 0%);
  min-width: 100%;
  min-height: 100%;
  width: max(100vw, 240vh);
  height: max(100vh, 56.25vw);
  border: 0;
  z-index: 2;
}

/* The token engine maps its paragraph scale onto WordPress's small, medium,
   large and x-large presets; ERT content picked those sizes when they were the
   core defaults, so they keep the core values. */
:root {
  --wp--preset--font-size--small: 13px;
  --wp--preset--font-size--medium: 20px;
  --wp--preset--font-size--large: 36px;
  --wp--preset--font-size--x-large: 42px;
}

/* Plain elements in the Blade templates take their line height from the page,
   as before the token engine: its h1 (mobile), h4-h6 and p rules must not
   reach them. Block classes set their own line height and are unaffected. */
@media (max-width: 767px) {
  h1,
  .h1 {
    line-height: inherit;
  }
}

h4,
.h4,
h5,
.h5,
h6,
.h6,
p {
  line-height: inherit;
}

/* Dark mode switches the North colour variables, not the colours editors picked
   in content (white text on red backgrounds must stay white). */
.dark {
  --wp--preset--color--white: #ffffff;
  --wp--preset--color--black: #000000;
}