/*
 * North frontend rules that are not tokens: scrollbar and selection
 * styling, the container width utilities the editor canvas relies on, and
 * component fixes (figure, header, maps, slider). Loaded after global.css on
 * the front end and in the editor canvas; the values come from the tokens.
 */

/* Scrollbar & selection styling */
::-webkit-scrollbar {
  width: var(--scrollbar-width);
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--color-mid-black);
}

::selection {
  background-color: var(--color-soft-black);
  color: var(--color-soft-gray);
}

::-moz-selection {
  background-color: var(--color-soft-black);
}

::-webkit-selection {
  background-color: var(--color-soft-black);
  color: var(--color-soft-gray);
}

/* Page gutter. theme.json's root padding is the same token, so core's
   .has-global-padding and .alignfull maths agree with it. The root carries the
   gutter once: constrained core groups directly inside it add none, while a
   full-bleed group keeps its padding (= gutter) so its content stays aligned. */
.wp-site-blocks {
  padding-inline: var(--north-gutter);
}

.wp-site-blocks > .has-global-padding:not(.alignfull) {
  padding-inline: 0;
}

.wp-site-blocks > .alignfull {
  margin-inline: calc(var(--north-gutter) * -1);
}

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

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

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

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

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

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

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

/* The image would otherwise keep its aspect-ratio height and spill out of the
   clamped figure, over whatever follows (tags, titles). */
.content-slider.autoscroll .swiper-slide figure :is(img, video) {
  max-height: inherit;
  object-fit: cover;
}

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

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

/* Leaflet controls for the maps block (formerly injected by an inline script). */
.leaflet-control-zoom {
  display: none;
}
.leaflet-control-attribution {
  background: rgba(255, 255, 255, 0.7);
  padding: 0 5px;
  font-size: 9px;
  opacity: 0.6;
}