/*
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;
}

/* News — year filter: pill-shape, primary-500 border/text, white bg; active = filled primary. */
.ensoul-tax-wrapper[data-taxonomy="news_year"] .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 {
  background: var(--color-primary-500);
  color: var(--color-white);
}
.ensoul-tax-wrapper[data-taxonomy="news_year"] .ensoul-filter-term.active-term {
  background: var(--color-primary-500);
  color: var(--color-white);
  border-color: var(--color-primary-500);
}

/* 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%;
  }
  .urban-stories-query
    .wp-block-ensoul-filter
    .ensoul-tax-wrapper
    .ensoul-filter-term[data-term="all"] {
    grid-column: 1 / -1;
  }
}

/* Vertical padding on each post card + spacing for icons at bottom */
.urban-stories-query .wp-block-post-template.is-layout-grid > li,
.news-query .wp-block-post-template.is-layout-grid > li {
  padding-top: 24px !important;
  padding-bottom: 32px !important;
}

/* 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;
  }
  .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, #8e9090);
  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, #8e9090);
  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, #8e9090);
  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, #8e9090);
  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, #8e9090);
  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, #8e9090);
  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, #8e9090);
  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, #8e9090);
  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 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: .5rem;
}
.wp-block-query-pagination .wp-block-query-pagination-numbers {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .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 .55rem;
  border: 1px solid var(--color-primary-500, #87764f);
  border-radius: 2px;
  color: var(--color-primary-500, #87764f);
  text-decoration: none;
  font-size: .875rem;
  line-height: 1;
  transition: background-color .15s ease, color .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 .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: .35rem;
  text-decoration: none;
  color: var(--color-primary-500, #87764f);
  font-size: .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: .35rem; }
  .wp-block-query-pagination .page-numbers { min-width: 2rem; height: 2rem; font-size: .8125rem; }
}

/* 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);
}

/* All North list bullets: filled square in the site accent colour
   (--color-primary-500 → SGR accent), replacing the hollow □ glyph.
   Requested: tutti i bullet col quadrato pieno del colore accent SGR. */
.wp-block-ensoul-list-element > span[aria-hidden="true"] {
  color: transparent;
  position: relative;
}
.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, #8e9090);
}

/* Staff card portraits (tall) are cropped to a square via object-fit:cover; the
   centred crop (50% 50%) cut off heads. Anchor to the top so faces stay in
   frame. (#33 contatti / staff cards) */
.wp-block-post.type-staff .wp-block-ensoul-image img {
  object-position: 50% top !important;
}

/* 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;
  }
}

/* ============================================================
 * 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, leaving EN ~6px higher).
 * ============================================================ */
@media (max-width: 767px) {
  .ensoul-column-wrapper:has(.ensoul-lang-toggle) {
    align-self: center;
  }
}

/* ============================================================
 * 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;
  }
}

/* =========================================================================
   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. (Aligned to coimacom.)
   ========================================================================= */
[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 .25s ease, transform .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;
}

/* 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;
}

/* 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;
}

/* Icone copy/PDF/condividi (ensoul/icon) col fill sorgente #23527c — l'accento di
 * coimacom — cablato nello svgMarkup: sui satelliti l'icona resta blu coimacom invece
 * dell'accento del sito. La CSS batte l'attributo di presentazione `fill` (specificità 0),
 * quindi override pulito verso --color-primary-500. Su coimacom (accent=#23527c) è no-op. */
.icon-svg-wrapper svg[fill="#23527c" i],
.icon-svg-wrapper svg path[fill="#23527c" i] {
  fill: var(--color-primary-500, #23527c);
}

/* =======================================================================
   ALLINEAMENTO DESIGN a coimacom (fix di luglio non ancora sui satelliti).
   I colori usano var(--color-primary-500 …) definite per-sito in
   ensoul-blocks-variables.css, quindi si adattano da soli.
   ======================================================================= */

/* Timeline senza overflow — north scrive `justify-between`, che con pochi
   marker incolla il primo anno a sinistra e l'ultimo a destra. Va centrato.
   `justify-content:center` da solo NON basta: north àncora .timeline-marker-wrap
   in absolute (marker 0px → si impilano). Serve larghezza naturale + wrap in-flow. */
.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;
}

/* Liste square: 8px di respiro fra il quadratino e il testo; block display così
   le righe a capo mantengono lo stesso rientro. Sia scoped (.coima-list-square,
   contenuti proxati dal master) sia generico (pagine locali col vecchio markup). */
.coima-list-square
  .wp-block-ensoul-list-element
  > span[aria-hidden="true"]
  + span,
.wp-block-ensoul-list-element > span[aria-hidden="true"] + span {
  display: block;
  padding-left: 8px;
}

/* press release "Documenti" / insight summary: nascondi la sezione/riga quando
   il campo dinamico è vuoto (niente box/righe vuote). */
.press-documenti:not(:has(p:not(:empty))) {
  display: none;
}
.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;
}

/* Tabelle dati legali (.coima-table) — bordi 1px collassati, padding 15px come
   sul live. Scoped, non tocca altro markup. */
.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;
}

/* News/urban grid: traccia centrale +24px così le immagini della riga si allineano
   (le card laterali perdono 24px a un padding, la centrale 48px a due — tracce uguali
   rimpiccioliscono l'immagine centrale). Allineamento a coimacom. */
@media (min-width: 768px) {
  .urban-stories-query .wp-block-post-template.is-layout-grid,
  .news-query .wp-block-post-template.is-layout-grid {
    grid-template-columns:
      calc((100% - 96px) / 3 + 24px)
      calc((100% - 96px) / 3 + 48px)
      calc((100% - 96px) / 3 + 24px);
  }
}

/* === ALLINEAMENTO FILTRI a coimacom: news/calendario/video-gallery come i comunicati (pill, anno sopra i bottoni). Colori via var per-sito. === */
/* 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;
}

/* Titolo accordion: 20px (heading-xs) su mobile come coimacom. I satelliti rendono il
   titolo dall'attr `heading` (span a heading-sm=24px); coimacom usa un heading figlio a
   20px. Override solo mobile per allineare la dimensione visibile del titolo. */
@media (max-width: 767px) {
  .wp-block-ensoul-accordion-item [data-accordion-trigger] .flex-grow {
    font-size: var(--text-heading-xs, 20px);
    line-height: 1.2;
  }
}

/* Titolo singolo comunicato/news: stacco sotto il titolo prima dell'hero come
   coimacom (sui satelliti il titolo toccava/sovrapponeva l'immagine). */
.single-press_release h1,
.single-post h1 {
  margin-bottom: 48px;
}
@media (max-width: 767px) {
  .single-press_release h1,
  .single-post h1 {
    margin-bottom: 24px;
  }
}