/*
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, #87764f);
  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, #87764f);
  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;
  }
}

/* 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, #87764f);
  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, #87764f);
  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, #87764f);
  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, #87764f);
  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, #87764f);
  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, #87764f);
  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;
}

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

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

/* Home: la home non mostra il titolo-hero della pagina (come il live) */
body.home .page-template-default h1,
body.home h1.wp-block-ensoul-heading { display: none; }

/* Home Insights + Portafoglio sliders — card con backgroundColor. */
.home-insights-slider .wp-block-ensoul-columns.has-background,
.home-portfolio-slider .wp-block-ensoul-columns.has-background { box-shadow: 0 4px 14px rgba(0,0,0,.10); }

/* Insights desktop: la colonna vuota di sinistra resta solo "spazio";
   le slide hanno il content limitato a content-width tramite columns 50-50. */
@media (max-width: 768px) {
  /* Mobile: la colonna vuota dell'Insights sparisce */
  .home-insights-slider .insights-empty-col { display: none !important; }
  /* Le slide scendono di altezza per non occupare tutto lo screen */
  .home-insights-slider .wp-block-ensoul-spacing-wrapper,
  .home-portfolio-slider .wp-block-ensoul-spacing-wrapper { min-height: 50vh; }
}

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

/* INSIGHTS home slider: equalize slide heights so the vertical "border-r"
   separators between cards align at the bottom. Swiper otherwise sizes each
   slide to its own content, leaving the divider lines at different heights
   (segnalazione: linee separatori del content-slider non allineate). The inner
   flex-col fills the slide and the last block (CTA button) is pushed to the
   bottom, so the buttons align across cards and the divider doesn't dangle past
   the shorter card's content. */
.home-insights-slider .swiper-wrapper { align-items: stretch; }
.home-insights-slider .swiper-slide { height: auto; }
.home-insights-slider .swiper-slide > .flex.flex-col { height: 100%; }
.home-insights-slider .swiper-slide > .flex.flex-col > *:last-child { margin-top: auto; }

/* Accordion document lists (Assemblee, Archivio, …): each accordion-item already
   draws its own bottom border, and the last download row inside also has a
   border-b — producing two thin lines stacked at the bottom of an open accordion
   (segnalazione #22). Drop the last row's border so only the accordion separator
   shows. */
.wp-block-ensoul-accordion-item .press-release-row:last-child { border-bottom: 0 !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;
  }
}

/* ============================================================
 * Header top bar — vertically centre the "EN/IT" 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 the toggle ~6px higher than the other links.
 * ============================================================ */
@media (max-width: 767px) {
  .ensoul-column-wrapper:has(.ensoul-lang-toggle) {
    align-self: center;
  }
}

/* ============================================================
 * Governance tables (Consiglio di Amministrazione, Collegio Sindacale,
 * …) on mobile (#72). After adding the "Ruolo" column (#25) the 6-column
 * table is wider than the ~360px viewport and pushed the WHOLE page into
 * horizontal scroll. Make the table its own horizontal-scroll container
 * so only the table scrolls, not the page. white-space:nowrap keeps the
 * cells from collapsing into unreadable stacks.
 * ============================================================ */
@media (max-width: 767px) {
  .coima-gov-tbl {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }
}

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

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

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