/*
Theme Name:   North 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.0.3
Text Domain:  twentytwentyfivechild
*/

#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;
}

.sticky {
  position: sticky;
  top: 20px;
}

/* News — label "Anno" stacked above buttons (not inline) */
.wp-block-ensoul-filter:has(.ensoul-tax-wrapper[data-taxonomy="news_year"]) {
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 8px;
}
.wp-block-ensoul-filter:has(.ensoul-tax-wrapper[data-taxonomy="news_year"])
  .filter_string {
  align-self: flex-start;
}
.wp-block-ensoul-filter:has(.ensoul-tax-wrapper[data-taxonomy="news_year"])
  .ensoul-tax-wrapper {
  justify-content: flex-start !important;
}

/* Pill-shape filter terms — primary-500 border/text, white bg; active = filled primary.
   Applied to News (news_year), Calendario (meeting_year/meeting_organization) and
   Video Gallery (video_category), so all Media filters match the Comunicati style.
   (Comunicati/Press use the same look via press-filters.css scoped to .press-filters-box.) */
.ensoul-tax-wrapper[data-taxonomy="news_year"] .ensoul-filter-term,
.ensoul-tax-wrapper[data-taxonomy="meeting_year"] .ensoul-filter-term,
.ensoul-tax-wrapper[data-taxonomy="meeting_organization"] .ensoul-filter-term,
.ensoul-tax-wrapper[data-taxonomy="video_category"] .ensoul-filter-term {
  display: inline-flex;
  align-items: center;
  padding: 8px 24px;
  border: 1px solid var(--color-primary-500);
  border-radius: 9999px;
  color: var(--color-primary-500);
  background: var(--color-white);
  transition:
    background-color 250ms ease,
    color 250ms ease,
    border-color 250ms ease;
  cursor: pointer;
  line-height: 1.2;
}
.ensoul-tax-wrapper[data-taxonomy="news_year"] .ensoul-filter-term:hover,
.ensoul-tax-wrapper[data-taxonomy="meeting_year"] .ensoul-filter-term:hover,
.ensoul-tax-wrapper[data-taxonomy="meeting_organization"] .ensoul-filter-term:hover,
.ensoul-tax-wrapper[data-taxonomy="video_category"] .ensoul-filter-term:hover {
  background: var(--color-primary-500);
  color: var(--color-white);
}
.ensoul-tax-wrapper[data-taxonomy="news_year"] .ensoul-filter-term.active-term,
.ensoul-tax-wrapper[data-taxonomy="meeting_year"] .ensoul-filter-term.active-term,
.ensoul-tax-wrapper[data-taxonomy="meeting_organization"] .ensoul-filter-term.active-term,
.ensoul-tax-wrapper[data-taxonomy="video_category"] .ensoul-filter-term.active-term {
  background: var(--color-primary-500);
  color: var(--color-white);
  border-color: var(--color-primary-500);
}

/* Gap between the pills (they sit in the ensoul-tax-wrapper flex row) on Media pages */
.ensoul-tax-wrapper[data-taxonomy="meeting_year"],
.ensoul-tax-wrapper[data-taxonomy="meeting_organization"],
.ensoul-tax-wrapper[data-taxonomy="video_category"] {
  gap: 12px;
}

/* Filter label "Anno" on News page — normal case, no uppercase transform */
.news-query .wp-block-ensoul-filter .filter_string {
  text-transform: none;
  letter-spacing: 0;
}

.ensoul-tax-wrapper[data-taxonomy="category"]
  .ensoul-filter-term[data-term="all"],
.ensoul-tax-wrapper[data-taxonomy="category"]
  .ensoul-filter-term:not([data-term="all"]):not([style*="--icon-url"]) {
  display: none;
}

.ensoul-tax-wrapper[data-taxonomy="category"]
  .ensoul-filter-term[style*="--icon-url"] {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.sticky-coima {
  position: sticky;
  top: 150px;
}

.ensoul-tax-wrapper[data-taxonomy="category"]
  .ensoul-filter-term[style*="--icon-url"]::before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  background-image: var(--icon-url);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  flex-shrink: 0;
  opacity: 0.65;
  transition: opacity 0.2s ease;
}

.ensoul-tax-wrapper[data-taxonomy="category"]
  .ensoul-filter-term.active-term::before,
.ensoul-tax-wrapper[data-taxonomy="category"]
  .ensoul-filter-term:hover::before {
  opacity: 1;
}

/* Post card category icons — icon via inline --icon-url, text hidden */
.wp-block-post-terms.post-category-icons {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding-left: 0;
}

.wp-block-post-terms.post-category-icons a[style*="--icon-url"] {
  display: inline-block;
  width: 22px;
  height: 22px;
  font-size: 0;
  color: transparent;
  text-indent: -9999px;
  overflow: hidden;
  background-image: var(--icon-url);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: 0.7;
  transition: opacity 0.2s ease;
}
.wp-block-post-terms.post-category-icons a:hover {
  opacity: 1;
}
.wp-block-post-terms.post-category-icons a:not([style*="--icon-url"]) {
  display: none;
}
.wp-block-post-terms.post-category-icons .wp-block-post-terms__separator {
  display: none;
}

/* In repeater-loop related-posts context: icons sit below the title,
   within the anchor's border-b, with breathing room above/below. */
.wp-block-ensoul-repeater-loop
  > a.block
  > .wp-block-post-terms.post-category-icons {
  display: flex;
  padding-top: 8px;
  padding-bottom: 16px;
}

/* Urban Stories — scoped styles (filter center, post card padding, column borders) */

/* Center the filter row on Urban Stories */
.urban-stories-query .wp-block-ensoul-filter {
  justify-content: center !important;
}

/* Mobile: filters on 2 columns (skip the inline "all" entry) — Urban Stories only */
@media (max-width: 767px) {
  .urban-stories-query .wp-block-ensoul-filter .ensoul-tax-wrapper {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    width: 100%;
    align-items: start !important; /* top-align rows (override Tailwind items-end → no ragged bottom-align) */
    justify-items: start; /* left-align each cell */
    row-gap: 18px;
    column-gap: 12px;
  }
  /* The "all"/"Tutti" entry is hidden on Urban Stories; hide its empty <li>
     too so it doesn't occupy a grid cell and offset the whole grid by one. */
  .urban-stories-query
    .wp-block-ensoul-filter
    .ensoul-tax-wrapper
    li:has(.ensoul-filter-term[data-term="all"]) {
    display: none;
  }
  /* Icon aligns to the first line of a wrapping label, not its vertical centre. */
  .urban-stories-query
    .wp-block-ensoul-filter
    .ensoul-tax-wrapper
    .ensoul-filter-term[style*="--icon-url"] {
    align-items: flex-start;
    text-align: left;
    line-height: 1.25;
  }
}

/* Vertical borders between cards on desktop (3-col) */
@media (min-width: 768px) {
  .urban-stories-query .wp-block-post-template.is-layout-grid,
  .news-query .wp-block-post-template.is-layout-grid {
    grid-column-gap: 0;
    /* Middle track +24px: side cards lose 24px to one padding, middle loses
       48px to two — equal-width tracks would render the middle IMAGE (and its
       natural-ratio height) smaller, misaligning the row. */
    grid-template-columns:
      calc((100% - 96px) / 3 + 24px)
      calc((100% - 96px) / 3 + 48px)
      calc((100% - 96px) / 3 + 24px);
  }
  .urban-stories-query .wp-block-post-template.is-layout-grid > li,
  .news-query .wp-block-post-template.is-layout-grid > li {
    padding-left: 24px;
    padding-right: 24px;
    border-right: 1px solid var(--color-neutral-200, #d8d8d8);
  }
  .urban-stories-query
    .wp-block-post-template.is-layout-grid
    > li:nth-child(3n),
  .news-query .wp-block-post-template.is-layout-grid > li:nth-child(3n) {
    border-right: none;
    padding-right: 0;
  }
  .urban-stories-query
    .wp-block-post-template.is-layout-grid
    > li:nth-child(3n + 1),
  .news-query .wp-block-post-template.is-layout-grid > li:nth-child(3n + 1) {
    padding-left: 0;
  }
}

/* Leadership grid — 3-col on desktop, 2-col on tablet, 1-col on mobile */
.leadership-query .wp-block-post-template.is-layout-grid {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}
@media (min-width: 640px) {
  .leadership-query .wp-block-post-template.is-layout-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1024px) {
  .leadership-query .wp-block-post-template.is-layout-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.leadership-query .leadership-card {
  background: var(--color-neutral-100, #f1f1f1);
}
.leadership-query .leadership-card img {
  filter: grayscale(100%);
  transition: filter 0.3s ease;
}
.leadership-query .leadership-card:hover img {
  filter: grayscale(0);
}

/* Leadership accordion — separator between rows, heading emphasis */
.leadership-accordion .wp-block-ensoul-accordion-item {
  border-bottom: 1px solid var(--color-neutral-200, #d8d8d8);
}
.leadership-accordion .wp-block-ensoul-accordion-item:first-child {
  border-top: 1px solid var(--color-neutral-200, #d8d8d8);
}
.leadership-accordion .wp-block-ensoul-accordion-item > *:first-child {
  padding: 16px 0;
}

/* ============================================================
 * La nostra storia — content-slider with timeline mode
 * ============================================================ */

/* 1) Year heading — design wants 128px desktop. Override the CSS variable
 *    in scope so North/Tailwind's `text-heading-3xl!` rule
 *    (font-size: var(--text-heading-3xl) !important) computes to our value
 *    instead of fighting specificity. */
.wp-block-ensoul-heading.year-huge {
  --text-heading-3xl: 96px; /* mobile baseline (north default) */
  --text-heading-3xl--line-height: 1;
  font-weight: 300;
  letter-spacing: -0.02em;
}
@media (min-width: 768px) {
  .wp-block-ensoul-heading.year-huge {
    --text-heading-3xl: 128px; /* desktop target */
  }
}

/* 2) Move timeline ABOVE the slider content using CSS grid.
 *    NOTE: we MUST set `min-width: 0` on the slider grid item, otherwise
 *    Swiper's width calculation explodes (slides become millions of px wide
 *    because grid items default to min-content min-width = the natural width
 *    of all 26 slides combined). */
.slider-section:has(.p-timeline) {
  display: grid;
  grid-template-areas: "timeline" "slider";
  grid-template-rows: auto 1fr;
  row-gap: var(--spacing-3xl, 56px);
}
@media (max-width: 767px) {
  .slider-section:has(.p-timeline) {
    row-gap: var(--spacing-l, 32px); /* tighter on mobile */
  }
}
.slider-section:has(.p-timeline) > .p-timeline {
  grid-area: timeline;
  margin: 0 !important;
  padding: 0;
  display: block !important;
  visibility: visible;
  opacity: 1;
  min-width: 0; /* CRITICAL: lets the timeline be narrower than its content */
  max-width: 100%;
  overflow: hidden; /* default — overridden on mobile to overflow-x: auto */
}
.slider-section:has(.p-timeline) > .content-slider {
  grid-area: slider;
  min-width: 0; /* CRITICAL: lets Swiper compute slide width correctly */
  width: 100%;
  position: relative;
  overflow: hidden;
}

/* Robust override of Tailwind `max-md:hidden` on .p-timeline on mobile.
 * High-specificity selectors that don't rely on :has() (broader browser compat). */
@media (max-width: 767px) {
  body section.slider-section div.p-timeline,
  body section.slider-section div.p-timeline.max-md\:hidden {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
}

/* Hide swiper bullets when timeline mode is on (timeline IS the nav). Scoped
 * via :has() so non-timeline sliders still show their bullets normally. */
section.slider-section:has(.content-slider-timeline) .swiper-pagination,
section.slider-section:has(.content-slider-timeline) .swiper-pagination-bullet,
section.slider-section:has(.content-slider-timeline)
  .swiper-pagination-bullets {
  display: none !important;
}

/* Timeline structure as built by frontend.js:
 *   <div class="content-slider-timeline">
 *     <div class="timeline-marker [timeline-marker-current]">
 *       <div class="timeline-marker-wrap">
 *         <div class="timeline-marker-dot"></div>
 *         <div class="timeline-marker-title">YEAR</div>
 *       </div>
 *     </div>
 *     ...
 *   </div>
 */
/* Desktop layout: anni distribuiti uniformemente sopra una linea blu COIMA */
.slider-section .content-slider-timeline {
  border-top: none;
  border-bottom: 1px solid var(--color-primary-500, #23527c);
  padding: 10px 20px 14px 20px; /* no horizontal padding — border-bottom matches the year row exactly */
  margin: 0;
  scrollbar-width: none;
  min-height: 32px;
  width: 100%;
  box-sizing: border-box;
  overflow: visible;
}
.slider-section .content-slider-timeline::-webkit-scrollbar {
  display: none;
}

/* All year markers — COIMA blue */
.slider-section .content-slider-timeline .timeline-marker {
  display: inline-flex !important;
  align-items: center;
  font-size: 14px;
  color: var(--color-primary-500, #23527c);
  font-weight: 400;
  cursor: pointer;
  position: relative;
  white-space: nowrap;
  transition: opacity 0.2s ease;
  flex: 0 0 auto;
  padding: 0;
}
.slider-section .content-slider-timeline .timeline-marker-wrap {
  display: inline-flex;
  align-items: center;
  gap: 0;
}
.slider-section .content-slider-timeline .timeline-marker-dot {
  display: none;
}
.slider-section .content-slider-timeline .timeline-marker-title {
  display: inline-block;
  font-size: 14px;
  line-height: 1;
  color: inherit;
}
.slider-section .content-slider-timeline .timeline-marker:hover {
  opacity: 0.7;
}
.slider-section
  .content-slider-timeline
  .timeline-marker-current
  .timeline-marker-title,
.slider-section .content-slider-timeline .timeline-marker-current {
  font-weight: 700;
}

/* Mobile: timeline scrollabile orizzontalmente */
@media (max-width: 767px) {
  body section.slider-section div.p-timeline {
    overflow-x: scroll !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
  body section.slider-section div.p-timeline::-webkit-scrollbar {
    display: none;
  }

  body section.slider-section div.content-slider-timeline {
    display: inline-flex !important;
    justify-content: flex-start !important;
    gap: 2.25rem;
    width: max-content !important;
    min-width: max-content !important;
    padding: 0 16px 12px 16px !important;
    overflow: visible !important;
    flex-wrap: nowrap !important;
  }

  body section.slider-section div.content-slider-timeline .timeline-marker {
    flex: 0 0 auto !important;
  }
}

/* Timeline slider (mobile): keep the prev/next nav arrows BELOW the slide text.
 * On long-text slides the last lines used to render under the vertically-centered
 * arrows; pin them to the bottom and reserve space on the slide. The small
 * horizontal inset stops the arrow tips being clipped by content-slider's
 * overflow:hidden. */
@media (max-width: 767px) {
  .slider-section:has(.p-timeline) .content-slider-prev,
  .slider-section:has(.p-timeline) .content-slider-next {
    top: auto !important;
    bottom: 0 !important;
    transform: none !important;
  }
  .slider-section:has(.p-timeline) .content-slider-prev {
    left: 4px !important;
  }
  .slider-section:has(.p-timeline) .content-slider-next {
    right: 4px !important;
  }
  .slider-section:has(.p-timeline) .swiper-slide {
    padding-bottom: calc(
      var(--slider-arrow-icon-size-mobile, 35px) + 1.5rem
    ) !important;
  }
}

/* 3) Hide the dot pagination when timeline is present (both mobile + desktop) */
.slider-section:has(.p-timeline) .swiper-pagination {
  display: none !important;
}

/* ============================================================
 * Search overlay — full-viewport modal
 * ============================================================ */
#coima-search-overlay {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  z-index: 99999 !important;
  background: rgba(255, 255, 255, 0.98);
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: coima-search-fade 0.25s ease;
}
#coima-search-overlay[hidden] {
  display: none !important;
}
@keyframes coima-search-fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

#coima-search-overlay .coima-search-close {
  position: absolute;
  top: 32px;
  right: 40px;
  width: 48px;
  height: 48px;
  font-size: 40px;
  line-height: 1;
  background: none;
  border: none;
  color: var(--wp--preset--color--accent-2, #23527c);
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.2s ease;
}
#coima-search-overlay .coima-search-close:hover {
  opacity: 0.6;
}

#coima-search-overlay .coima-search-inner {
  width: 100%;
  max-width: 920px;
  padding: 0 32px;
}

#coima-search-overlay form {
  display: flex;
  align-items: center;
  gap: 16px;
  border-bottom: 2px solid var(--wp--preset--color--accent-2, #23527c);
  padding-bottom: 16px;
}

#coima-search-overlay input[type="search"] {
  flex: 1;
  background: none;
  border: none;
  outline: none;
  font-size: clamp(24px, 5vw, 48px);
  line-height: 1.1;
  color: var(--wp--preset--color--accent-2, #23527c);
  padding: 8px 0;
  font-family: inherit;
  text-transform: none;
}
#coima-search-overlay input[type="search"]::placeholder {
  color: var(--wp--preset--color--neutral-400, #8c8c8c);
  opacity: 0.7;
}
#coima-search-overlay input[type="search"]::-webkit-search-cancel-button,
#coima-search-overlay input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

#coima-search-overlay button[type="submit"] {
  background: none;
  border: none;
  color: var(--wp--preset--color--accent-2, #23527c);
  cursor: pointer;
  padding: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.2s ease;
}
#coima-search-overlay button[type="submit"] svg {
  width: 32px;
  height: 32px;
}
#coima-search-overlay button[type="submit"]:hover {
  opacity: 0.6;
}

@media (max-width: 640px) {
  #coima-search-overlay .coima-search-close {
    top: 16px;
    right: 16px;
  }
  #coima-search-overlay .coima-search-inner {
    padding: 0 20px;
  }
  #coima-search-overlay button[type="submit"] svg {
    width: 24px;
    height: 24px;
  }
}

/* ============================================================
 * Search results — list styling (template #3888)
 * ============================================================ */
.search-results-list .wp-block-post {
  border-bottom: 1px solid var(--wp--preset--color--neutral-200, #d8d8d8);
  padding: 24px 0;
}
.search-results-list .wp-block-post:first-child {
  padding-top: 0;
}
.search-results-list .wp-block-post-title {
  margin: 0 0 8px;
  font-size: var(--wp--preset--font-size--h4, 24px);
  line-height: 1.2;
  text-transform: uppercase;
}
.search-results-list .wp-block-post-title a {
  color: var(--wp--preset--color--accent-2, #23527c);
  text-decoration: none;
}
.search-results-list .wp-block-post-title a:hover {
  text-decoration: underline;
}
.search-results-list .wp-block-post-excerpt {
  margin: 0;
  font-size: 15px;
  color: var(--wp--preset--color--neutral-700, #3b3b3b);
}
.search-results-list .wp-block-post-excerpt__excerpt {
  margin: 4px 0 0;
}
.search-results-list .wp-block-post-excerpt__more-link {
  display: inline-block;
  margin-top: 8px;
  color: var(--wp--preset--color--accent-2, #23527c);
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
}

/* Video Gallery — YouTube modal (centered iframe overlay) */
.video-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 99999;
}
.video-modal.is-open {
  display: block;
}
.video-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
}
.video-modal__dialog {
  position: relative;
  width: min(1200px, 92vw);
  margin: 0 auto;
  top: 50%;
  transform: translateY(-50%);
  aspect-ratio: 16 / 9;
}
.video-modal__player {
  width: 100%;
  height: 100%;
  background: #000;
}
.video-modal__player iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.video-modal__close {
  position: absolute;
  top: -44px;
  right: 0;
  width: 36px;
  height: 36px;
  background: transparent;
  color: #fff;
  border: 0;
  font-size: 32px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}
.video-modal__close:hover {
  opacity: 0.7;
}
body.video-modal-open {
  overflow: hidden;
}

/* Horizontal-scroll shell — JS injects a `.h-scroll-row` flex container
   inside the host wrapper, moves the original track inside it together
   with prev/next chevrons, and inline-styles the row's flex layout so no
   upstream Tailwind utility can override it.
   This file only styles appearance (chevron skin, hidden scrollbars,
   grab cursor); layout-critical sizing is set inline by coima-frontend.js. */
.h-scroll-row .h-scroll-chevron {
  width: 32px;
  height: 32px;
  padding: 8px;
  background: transparent;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  color: currentColor;
  display: none;
  align-items: center;
  justify-content: center;
  transition: opacity 0.2s ease;
}
.h-scroll-shell.h-scroll-overflowing .h-scroll-chevron {
  display: inline-flex;
  opacity: 0.7;
}
.h-scroll-shell.h-scroll-overflowing .h-scroll-chevron:hover {
  opacity: 1;
}
.h-scroll-shell.h-scroll-overflowing .h-scroll-chevron[disabled] {
  opacity: 0.2;
  cursor: default;
}
.h-scroll-row .h-scroll-chevron svg {
  width: 14px;
  height: 14px;
  display: block;
}

/* Track behavior — hide scrollbar, grab cursor while dragging. Sizing
   (flex/min-width/overflow-x) is set inline by JS. */
.h-scroll-shell .content-slider-timeline,
.h-scroll-shell .wp-block-navigation__container {
  scrollbar-width: none;
  scroll-behavior: smooth;
}
.h-scroll-shell .content-slider-timeline::-webkit-scrollbar,
.h-scroll-shell .wp-block-navigation__container::-webkit-scrollbar {
  display: none;
}
.h-scroll-shell.h-scroll-overflowing .content-slider-timeline,
.h-scroll-shell.h-scroll-overflowing .wp-block-navigation__container {
  cursor: grab;
}
.h-scroll-shell .content-slider-timeline.is-dragging,
.h-scroll-shell .wp-block-navigation__container.is-dragging {
  cursor: grabbing;
  scroll-behavior: auto;
  user-select: none;
}

/* Sub-nav: keep items on a single line so overflow-x can scroll them. */
.h-scroll-shell .wp-block-navigation__container {
  flex-wrap: nowrap;
  display: flex;
}
.h-scroll-shell .wp-block-navigation__container > .wp-block-navigation-item {
  flex: 0 0 auto;
  white-space: nowrap;
}
/* When the sub-nav actually overflows (mobile), left-align the items so they
 * are reachable from the first voice. The block is justify-content:center by
 * design (desktop), but centred flex overflow pushes the leading items off to
 * a negative offset that scrollLeft can't reach — the menu looked "opened in
 * the middle". Only override while overflowing, so the centred desktop bar is
 * untouched. */
.sub-nav-bar
  nav.h-scroll-shell.h-scroll-overflowing
  .wp-block-navigation__container {
  justify-content: flex-start !important;
}

/* Timeline senza overflow — north scrive `justify-between` nel markup
   (content-slider/render.php), che con pochi marker incolla il primo anno al
   bordo sinistro e l'ultimo al destro. Il gruppo va centrato.
   ATTENZIONE: `justify-content: center` da solo NON basta. north àncora
   `.timeline-marker-wrap` in `position: absolute`, quindi ogni `.timeline-marker`
   è largo 0px: centrandoli si impilano tutti sullo stesso punto (gli anni
   diventano "202220192018…"). Serve lo stesso trattamento del ramo overflow qui
   sotto — larghezza naturale del marker e wrap rimesso in-flow — solo centrato
   invece che a sinistra. north è un pacchetto composer: l'override vive qui. */
.h-scroll-shell:not(.h-scroll-overflowing) .content-slider-timeline {
  justify-content: center;
}
.h-scroll-shell:not(.h-scroll-overflowing)
  .content-slider-timeline
  .timeline-marker {
  flex: 0 0 max-content;
  min-width: max-content;
  position: relative;
  display: flex;
  justify-content: center;
  padding: 0 8px;
}
.h-scroll-shell:not(.h-scroll-overflowing)
  .content-slider-timeline
  .timeline-marker-wrap {
  position: static;
  transform: none;
}

/* Timeline only — when JS detects overflow (real or visual via edge labels)
   switch from `justify-between` (which squeezes 0-width markers and lets edge
   labels spill) to a real horizontal carousel: marker has natural width and
   the wrap is restored to in-flow (north's CSS pins wrap absolute so each
   timeline-marker is otherwise 0px wide and would collapse to the left). */
/* In flex-row layout the chevrons sit alongside the track (not over it),
 * so the track no longer needs internal padding to clear them. */
.h-scroll-shell.h-scroll-overflowing .content-slider-timeline {
  justify-content: flex-start;
}
.h-scroll-shell.h-scroll-overflowing .content-slider-timeline {
  /* Drop the upstream `gap-4` (16px) when overflowing — combined with the
   * per-marker padding it leaves too much air between adjacent labels. */
  gap: 0 !important;
}
.h-scroll-shell.h-scroll-overflowing .content-slider-timeline .timeline-marker {
  /* `max-content` sizes each marker to its label's natural width — no
   * arbitrary min-width that puffs short years like "1974" out to 80px and
   * leaves them swimming in whitespace. Padding 8px gives just enough
   * breathing room between adjacent labels. */
  flex: 0 0 max-content;
  min-width: max-content;
  position: relative;
  display: flex;
  justify-content: center;
  padding: 0 8px;
}
.h-scroll-shell.h-scroll-overflowing
  .content-slider-timeline
  .timeline-marker-wrap {
  position: static;
  transform: none;
}

/* ──────────────────────────────────────────────────────────────────────
 * Query pagination — applied to wp:query-pagination block (numbers row).
 * Uniformato su tutti i 4 temi coima-welcome. Spacing + simple chip look.
 * ────────────────────────────────────────────────────────────────────── */
.wp-block-query-pagination {
  margin-top: 3rem;
  margin-bottom: 4rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}
.wp-block-query-pagination .wp-block-query-pagination-numbers {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem;
}
.wp-block-query-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.25rem;
  height: 2.25rem;
  padding: 0 0.55rem;
  border: 1px solid var(--color-primary-500, #87764f);
  border-radius: 2px;
  color: var(--color-primary-500, #87764f);
  text-decoration: none;
  font-size: 0.875rem;
  line-height: 1;
  transition:
    background-color 0.15s ease,
    color 0.15s ease;
}
.wp-block-query-pagination .page-numbers:hover,
.wp-block-query-pagination .page-numbers:focus-visible {
  background-color: var(--color-primary-500, #87764f);
  color: #fff;
}
.wp-block-query-pagination .page-numbers.current,
.wp-block-query-pagination .page-numbers[aria-current="page"] {
  background-color: var(--color-primary-500, #87764f);
  color: #fff;
  cursor: default;
}
.wp-block-query-pagination .page-numbers.dots {
  border: none;
  color: inherit;
  background: transparent;
  min-width: auto;
  padding: 0 0.25rem;
}
.wp-block-query-pagination .wp-block-query-pagination-previous,
.wp-block-query-pagination .wp-block-query-pagination-next {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  text-decoration: none;
  color: var(--color-primary-500, #87764f);
  font-size: 0.875rem;
  font-weight: 500;
}
.wp-block-query-pagination .wp-block-query-pagination-previous:hover,
.wp-block-query-pagination .wp-block-query-pagination-next:hover {
  text-decoration: underline;
}
@media (max-width: 600px) {
  .wp-block-query-pagination {
    margin-top: 2rem;
    margin-bottom: 3rem;
    gap: 0.35rem;
  }
  .wp-block-query-pagination .page-numbers {
    min-width: 2rem;
    height: 2rem;
    font-size: 0.8125rem;
  }
}

/* =========================================================================
   Accordion toggle icon: +/- instead of chevron (figma) — global.
   The block renders a chevron <svg> in the trigger's last child div and
   rotates it 180° on .is-open. We hide that svg and draw a + (closed) /
   - (open) with two pseudo-element bars.
   ========================================================================= */
[data-accordion-trigger] > :has(> svg) {
  position: relative;
  width: var(--spacing-dimension-icon-accordion-dk, 20px);
  height: var(--spacing-dimension-icon-accordion-dk, 20px);
  transform: none !important; /* cancel the block's rotate-180 on open */
  flex: 0 0 auto;
}
[data-accordion-trigger] > :has(> svg) > svg {
  display: none !important;
}
[data-accordion-trigger] > :has(> svg)::before,
[data-accordion-trigger] > :has(> svg)::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background: currentColor;
  transition:
    opacity 0.25s ease,
    transform 0.25s ease;
}
[data-accordion-trigger] > :has(> svg)::before {
  /* horizontal bar (the minus) */
  width: 100%;
  height: 2px;
  transform: translate(-50%, -50%);
}
[data-accordion-trigger] > :has(> svg)::after {
  /* vertical bar (completes the plus) */
  width: 2px;
  height: 100%;
  transform: translate(-50%, -50%);
}
/* Open state: the <li.group> gets .is-open → hide vertical bar = minus */
.wp-block-ensoul-accordion-item.is-open
  [data-accordion-trigger]
  > :has(> svg)::after,
.group.is-open [data-accordion-trigger] > :has(> svg)::after {
  opacity: 0;
}

/* #54 — Insight (urban story) dynamic summary box: hide the bordered box and
   collapse empty rows when the ACF "riassunti" field has no content, so empty
   posts don't render an empty bordered section. */
.insight-summary-box:not(:has(p:not(:empty))) {
  display: none;
}
.insight-summary-box [class*="border-b"]:not(:has(p:not(:empty))) {
  border: 0;
  padding: 0;
  margin: 0;
}

/* #61 — press release "Documenti" section: hide when no downloadable (empty dynamic title). */
.press-documenti:not(:has(p:not(:empty))) {
  display: none;
}

/* Press release "Documenti" wrapper: hide heading and all when the repeater renders no row. */
.news-documenti-section:not(:has(.press-documenti)) {
  display: none;
}

/* #64 — Newsletter slider: make every slide as tall as the fullest one, with the
   transparent overlay column full-height and vertically centered on the left
   (desktop). On mobile the slide keeps its fixed height with the text box below
   (handled by the block's mobileJustifyContent:end / mobileHeight). */
@media (min-width: 768px) {
  .newsletter-slider .swiper-wrapper {
    align-items: stretch;
  }
  .newsletter-slider .swiper-slide {
    height: auto;
  }
  /* Fill the whole wrapper chain so the bg-image + overlay reach the tallest
     slide's height (height:100% needs every ancestor to carry a height). */
  .newsletter-slider .swiper-slide > *,
  .newsletter-slider .swiper-slide .wp-block-ensoul-spacing-wrapper,
  .newsletter-slider .swiper-slide .wp-block-ensoul-spacing-wrapper > *,
  .newsletter-slider .swiper-slide .ensoul-columns-section,
  .newsletter-slider .swiper-slide .ensoul-columns-block {
    height: 100%;
  }
  .newsletter-slider .swiper-slide .ensoul-columns-block {
    align-items: stretch;
  }
  .newsletter-slider .swiper-slide .ensoul-column-wrapper {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}

/* North list with square icon: replace the hollow □ glyph with a filled
   square in the site accent colour. Scoped to .coima-list-square so other
   north lists (e.g. dot bullets on Privacy pages) are unaffected. */
.coima-list-square .wp-block-ensoul-list-element > span[aria-hidden="true"] {
  color: transparent;
  position: relative;
}
.coima-list-square
  .wp-block-ensoul-list-element
  > span[aria-hidden="true"]::before {
  content: "";
  position: absolute;
  top: 0.62em;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 0.55em;
  height: 0.55em;
  background: var(--color-primary-500);
}
/* Push the text 8px away from the square; block display so wrapped lines
   keep the same indent (the floated icon has zero effective outer width). */
.coima-list-square
  .wp-block-ensoul-list-element
  > span[aria-hidden="true"]
  + span {
  display: block;
  padding-left: 8px;
}

/* News listing: thin vertical separators between the 3 desktop columns
   (figma); equal-height cards so images align across the row. */
@media (min-width: 768px) {
  .news-query .wp-block-post-template > li {
    border-right: 1px solid var(--color-primary-200, #d9d9d9);
    padding-right: var(--wp--preset--spacing--m, 24px);
  }
  .news-query .wp-block-post-template > li:nth-child(3n),
  .news-query .wp-block-post-template > li:last-child {
    border-right: none;
  }
}

/* Legal/data tables converted from the live site (privacywifiapp, privacypnapp,
   in-sintesi, at-a-glance): replicate the live rendering — collapsed 1px black
   borders, 15px cell padding (live td computed style). Scoped to .coima-table
   so other markup is unaffected. */
.coima-table {
  border-collapse: collapse;
  width: 100%;
  margin: 1.5rem auto;
  max-width: var(--container-content, 960px);
}
.coima-table td,
.coima-table th {
  border: 1px solid #2d2d2d;
  padding: 15px;
  vertical-align: baseline;
  font-size: 16px;
  text-align: left;
}
.coima-table p {
  margin: 0;
}

/* Newsletter-era tables (nasce-il-gruppo-coima IT/EN — story removed from the
   live, local copy kept richer): same look as .coima-table, plus horizontal
   scroll on small screens. */
.wrapper-table-newsletter {
  overflow-x: auto;
  margin: 1.5rem auto;
  max-width: var(--container-content, 960px);
}
.wrapper-table-newsletter table {
  border-collapse: collapse;
  width: 100%;
}
.wrapper-table-newsletter th,
.wrapper-table-newsletter td {
  border: 1px solid #2d2d2d;
  padding: 12px 15px;
  font-size: 16px;
  text-align: left;
}
.wrapper-table-newsletter th {
  font-weight: 700;
}
.wrapper-table-newsletter .text-center,
.wrapper-table-newsletter th.text-center,
.wrapper-table-newsletter td.text-center {
  text-align: center;
}
.wrapper-list-newsletter ul {
  list-style: square;
  padding-left: 1.5em;
  max-width: var(--container-content, 960px);
  margin: 1rem auto;
}
.wrapper-list-newsletter li {
  margin-bottom: 0.6em;
}

/* Tipografia figma: body/paragrafi 300 (wp_global_styles), h1 400, h2-h6 300.
   Con body a 300 il "bolder" nativo di strong/b risolverebbe 400 → 700 esplicito. */
strong,
b {
  font-weight: 700;
}

/* coima-content-link — link nei testi di content e template (ensoul paragraph/
   heading/list): colore accent, peso 400, underline animata che si riempie da
   sinistra a destra in hover. Esclusi i bottoni. Il colore non viene forzato
   dove l'editor ha impostato un text color esplicito (es. testi bianchi su
   bande scure): lì resta currentColor, ma l'animazione vale comunque. */
p[id^="paragraph-"] a:not([role="button"]),
[id^="heading-"] a:not([role="button"]),
.wp-block-ensoul-list-element a:not([role="button"]) {
  font-weight: 400;
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0 1px;
  transition: background-size 0.3s ease;
}
p[id^="paragraph-"]:not(.has-text-color) a:not([role="button"]),
[id^="heading-"]:not(.has-text-color) a:not([role="button"]),
.wp-block-ensoul-list-element:not(.has-text-color) a:not([role="button"]) {
  color: var(--color-primary-500);
}
p[id^="paragraph-"] a:not([role="button"]):hover,
[id^="heading-"] a:not([role="button"]):hover,
.wp-block-ensoul-list-element a:not([role="button"]):hover {
  background-size: 100% 1px;
}

/* Header e footer (template parts): NIENTE coima-content-link — no underline
   animata né colore blu forzato. I link lì seguono il colore del template
   (es. base/bianco nella fascia grigia superiore). Esclusi i bottoni. */
.wp-block-template-part p[id^="paragraph-"] a:not([role="button"]),
.wp-block-template-part [id^="heading-"] a:not([role="button"]),
.wp-block-template-part .wp-block-ensoul-list-element a:not([role="button"]) {
  background-image: none;
  color: inherit;
  font-weight: inherit;
}

/* Barra top (animated-header): le voci inter-sito (COIMA / SGR / REM / RES)
   riprendono l'underline animata su hover — il colore resta ereditato, torna
   attivo solo il background-image (repeat/position/size/transition arrivano
   già dalla regola coima-content-link sopra). */
.wp-block-template-part
  .animated-header
  p[id^="paragraph-"]
  a:not([role="button"]) {
  background-image: linear-gradient(currentColor, currentColor);
}

/* KEY FIGURES — vertical divider bars between stat columns (figma).
   A border-right would sit flush on the column's right edge, i.e. the LEFT side
   of the inter-column gap, so the line reads off-centre (worst on the mobile
   2-col grid). Instead a 1px pseudo-element is pushed right by half the gap so
   it lands dead centre. --spacing-columns auto-switches 20px→50px at the 768px
   breakpoint, so calc(var(--spacing-columns) / -2) stays correct on both.
   Desktop 3-col: bar after cols 1,2 of each row; on mobile the grid is a single
   column, so every bar is hidden. The block carries className "key-figures-grid". */
.key-figures-grid .wp-block-ensoul-column {
  position: relative;
}
.key-figures-grid .wp-block-ensoul-column::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: calc(var(--spacing-columns) / -2);
  width: 1px;
  background: var(
    --wp--preset--color--accent-2,
    var(--color-primary-500, #23527c)
  );
}
/* Mobile (1-col grid): no dividers at all — bars are desktop-only. */
@media (max-width: 767px) {
  .key-figures-grid .wp-block-ensoul-column::after {
    content: none;
  }
  /* Filler cells (kept empty on purpose to complete the desktop 3-col grid)
     would add an empty row + row-gap in the 1-col flow — drop them. */
  .key-figures-grid .wp-block-ensoul-column:not(:has(.column > *)) {
    display: none;
  }
}
/* Desktop 3-col: no divider on the last column of each row. */
@media (min-width: 768px) {
  .key-figures-grid .wp-block-ensoul-column:nth-child(3n)::after {
    content: none;
  }
}

/* ============================================================
 * Download / CTA buttons on mobile.
 * Auto-width buttons (e.g. the "Scarica PDF" download CTAs on the
 * sostenibilità disclosure pages) stay on one line — they wrapped to two
 * lines because the container was ~1px short.
 * Full-width buttons (w-full, e.g. the "Leggi anche / Read also"
 * related-content CTAs on Urban Stories) must be allowed to wrap: their
 * long labels overflowed the mobile viewport when forced onto one line.
 * ============================================================ */
@media (max-width: 767px) {
  .button-container [role="button"]:not(.w-full) {
    white-space: nowrap;
  }
  .button-container [role="button"].w-full {
    text-align: center; /* wrapped long labels stay centred */
  }
}

/* ============================================================
 * Header top bar — vertically centre the "EN" language toggle
 * on mobile so it lines up with the COIMA group links. Its column
 * was pinned to the top (align-self:flex-start, the pt-xxs nudge is
 * desktop-only) leaving EN ~6px higher than the other links.
 * ============================================================ */
@media (max-width: 767px) {
  .ensoul-column-wrapper:has(.ensoul-lang-toggle) {
    align-self: center;
  }
}

/* ============================================================
 * Image-gallery slider — white nav arrows on mobile for visibility
 * over the photos (default COIMA-blue gets lost on dark images).
 * Scoped to sliders with image slides; the timeline keeps its blue
 * arrows (it is excluded via :not(:has(.p-timeline))).
 * ============================================================ */
@media (max-width: 767px) {
  .slider-section:has(.swiper-slide img):not(:has(.p-timeline))
    .content-slider-prev,
  .slider-section:has(.swiper-slide img):not(:has(.p-timeline))
    .content-slider-next {
    color: #fff !important;
  }
}

/* ============================================================
 * Page titles (H1) on mobile — a long single word (e.g.
 * "Regolamentazione") is ~17px wider than the ~330px mobile column
 * and the browser orphans its last letter onto a second line.
 * the word would otherwise drop a single letter onto the next line.
 * Hyphenate it at a syllable boundary instead (trattino), using the
 * device hyphenation dictionary (Android/iOS for it-IT); a too-long
 * word without a dictionary still falls back to a normal break.
 * ============================================================ */
@media (max-width: 767px) {
  h1.wp-block-ensoul-heading {
    -webkit-hyphens: auto;
    hyphens: auto;
  }
}

/* A11y — visible keyboard focus (CSV accessibilità: menu, contenuti, footer) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[role="button"]:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--color-primary-500, #87764f) !important;
  outline-offset: 2px;
}

/* ── Focus solo da tastiera (revisione: niente focus su click/hover) ──────
 * TwentyTwentyFive (parent) applica un outline su :focus, che compare anche
 * al click/hover. Lo annulliamo quando il focus NON è da tastiera; l'outline
 * dorato di :focus-visible (sopra) resta per l'accessibilità/navigazione. */
.wp-site-blocks *:focus:not(:focus-visible) {
  outline: none !important;
}

/* Campi di ricerca: nessun box di focus nemmeno da mouse (gli input testuali
 * attivano :focus-visible anche al click, quindi vanno soppressi a parte). */
#coima-search-overlay input[type="search"]:focus,
#coima-search-overlay input[type="search"]:focus-visible,
.press-search__input:focus,
.press-search__input:focus-visible,
.press-search__date:focus,
.press-search__date:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

/* ──────────────────────────────────────────────────────────────────────
 * Urban Stories / contenuti da metafield WYSIWYG
 * ────────────────────────────────────────────────────────────────────── */

/* north/global.css ha una regola NUDA `p { font-size: var(--text-paragraph-xs) }`
 * (12px), portata a 16px solo da 48rem in su. Colpisce ogni <p> che esce da un
 * campo WYSIWYG (riassunti, citazioni), perché quello NON riceve le classi
 * `text-paragraph-*` del blocco: risultato, 12px su mobile in mezzo a testo da 16px.
 * Il <p> annidato deve ereditare la dimensione del blocco ensoul che lo contiene.
 * L'aggancio è `.font-paragraph`: il wrapper del blocco NON ha `wp-block-ensoul-paragraph`. */
.font-paragraph p {
  font-size: inherit;
  line-height: inherit;
}

/* Box riassunto degli insight: ogni riga ha un `border-b`, e quello dell'ultima
 * riga si somma al bordo del box. Via l'ultimo. */
.insight-summary-box .border-b:last-of-type {
  border-bottom-width: 0;
}

/* Icona PDF inline nelle righe Documenti / Rassegna stampa: l'SVG dichiara
 * 40.6×48.9px e il markup porta uno `style="width: NaNpx"` non valido (ignorato dal
 * browser), quindi l'icona è alta 49px e il testo lungo va a capo SOTTO di essa.
 * `float` la fa avvolgere di fianco. Ristretto agli SVG di proposito: nei paragrafi
 * di press_release e insight ci sono 19 immagini raster inline che NON vanno toccate. */
.font-paragraph > img[src$=".svg"] {
  float: left;
  width: 22px;
  height: auto;
  margin: 3px 10px 0 0;
}