/*=========  CHIPS COMPONENT  ===============*/

/* ---- Setup */
:root {
--header-h: 100px;
--chip-h: 44px;
--gap: 20px;

--c-primary: #05365F; /* attiva */
--c-outline: #05365F; /* bordo chips */
--c-text: #05365F;
--c-bg: #fff;
--c-active-bg: #05365F;
--c-active-text: #fff;
}

/* ---- Chips */
.chips {
position: sticky;
top: var(--header-h);
z-index: 2;
display: flex;
align-items: center;
gap: var(--gap);
padding: 12px var(--gap);
background: var(--c-bg);
border-bottom: 1px solid #e9edf2;

/* mobile: orizzontale con overflow */
overflow-x: auto;
overscroll-behavior-inline: contain;
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* IE/Edge legacy */
white-space: nowrap;
}

@media (min-width: 751px) {
.chips {justify-content: center;}
}


.chips::-webkit-scrollbar { display: none; }

.chips a {
flex: 0 0 auto;
height: var(--chip-h);
line-height: calc(var(--chip-h) - 2px);
padding: 0 22px;
border-radius: 12px;
border: 1.5px solid var(--c-outline);
color: var(--c-text);
text-decoration: none;
font-weight: 500;
display: inline-block;
transition: background .2s, color .2s, border-color .2s, transform .2s;
}
.chips a:hover { transform: translateY(-1px); }

/* Stato attivo di default (prima del click): usa aria-current */
.chips a[aria-current="true"] {
background: var(--c-active-bg);
color: var(--c-active-text);
border-color: var(--c-active-bg);
}

/* Stato attivo via :target (senza aria-current) */
:root:has(#section-1:target) .chips a[href="#section-1"],
:root:has(#section-2:target) .chips a[href="#section-2"],
:root:has(#section-3:target) .chips a[href="#section-3"],
:root:has(#section-4:target) .chips a[href="#section-4"],
:root:has(#section-5:target) .chips a[href="#section-5"] {
background: var(--c-primary);
color: #fff;
border-color: var(--c-primary);
}

/* rende sticky il parent solo se contiene le chips */
.pimcore_area_custom-html:has(.chips) {
position: sticky;
top: 100px; /* altezza del menu */
z-index: 1;
}

/* opzionale: neutralizza cose che rompono lo sticky */
.pimcore_area_custom-html {
overflow: visible; /* se possibile */
transform: none; /* se impostato da temi/effects */
filter: none;
contain: initial;
}