/* =============================================================
   UTILITIES.CSS — Helper, spacing, animazioni
   ============================================================= */

/* --- Flex --- */
.flex        { display: flex; }
.flex-col    { display: flex; flex-direction: column; }
.items-start { align-items: flex-start; }
.items-center{ align-items: center; }
.items-end   { align-items: flex-end; }
.justify-start  { justify-content: flex-start; }
.justify-center { justify-content: center; }
.justify-between{ justify-content: space-between; }
.flex-wrap   { flex-wrap: wrap; }
.gap-2  { gap: var(--sp-2); }
.gap-3  { gap: var(--sp-3); }
.gap-4  { gap: var(--sp-4); }
.gap-5  { gap: var(--sp-5); }
.gap-6  { gap: var(--sp-6); }
.gap-8  { gap: var(--sp-8); }
.gap-10 { gap: var(--sp-10); }

/* --- Margin --- */
.mt-0  { margin-top: 0; }
.mt-4  { margin-top: var(--sp-4); }
.mt-6  { margin-top: var(--sp-6); }
.mt-8  { margin-top: var(--sp-8); }
.mt-12 { margin-top: var(--sp-12); }
.mt-16 { margin-top: var(--sp-16); }
.mb-0  { margin-bottom: 0; }
.mb-4  { margin-bottom: var(--sp-4); }
.mb-6  { margin-bottom: var(--sp-6); }
.mb-8  { margin-bottom: var(--sp-8); }
.mb-12 { margin-bottom: var(--sp-12); }

/* --- Padding --- */
.p-4  { padding: var(--sp-4); }
.p-6  { padding: var(--sp-6); }
.p-8  { padding: var(--sp-8); }
.py-4 { padding-block: var(--sp-4); }
.py-6 { padding-block: var(--sp-6); }
.px-4 { padding-inline: var(--sp-4); }

/* --- Display --- */
.hidden  { display: none; }
.block   { display: block; }
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* --- Larghezze --- */
.w-full { width: 100%; }
.max-w-text { max-width: var(--max-w-text); }

/* --- Bordi --- */
.rounded-sm { border-radius: var(--r-sm); }
.rounded    { border-radius: var(--r-md); }
.rounded-lg { border-radius: var(--r-lg); }
.rounded-xl { border-radius: var(--r-xl); }

/* --- Animazioni entrata (Intersection Observer) --- */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}
.animate-on-scroll.is-visible {
    opacity: 1;
    transform: translateY(0);
}
.animate-delay-1 { transition-delay: 0.1s; }
.animate-delay-2 { transition-delay: 0.2s; }
.animate-delay-3 { transition-delay: 0.3s; }
.animate-delay-4 { transition-delay: 0.4s; }

/* --- Divider --- */
.divider {
    height: 1px;
    background: var(--c-border-lt);
    border: none;
    margin-block: var(--sp-8);
}

/* --- Highlight box informativo --- */
.info-box {
    background: rgba(26, 58, 92, 0.05);
    border: 1px solid rgba(26, 58, 92, 0.12);
    border-radius: var(--r-md);
    padding: var(--sp-6);
    font-size: var(--t-sm);
    color: var(--c-brand);
    line-height: 1.7;
}
.info-box strong { font-weight: 700; }

/* --- Link con freccia --- */
.link-arrow {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: var(--t-sm);
    font-weight: 600;
    color: var(--c-accent);
    transition: gap var(--tr-fast), color var(--tr-fast);
}
.link-arrow::after {
    content: '→';
    font-size: 1em;
    transition: transform var(--tr-fast);
}
.link-arrow:hover { color: var(--c-accent-dk); gap: var(--sp-3); }
.link-arrow:hover::after { transform: translateX(2px); }

/* --- Spinner loading --- */
.spinner {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 2px solid rgba(255,255,255,0.4);
    border-top-color: white;
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* --- Notifica top-of-page --- */
.site-notice {
    background: var(--c-brand);
    color: rgba(255,255,255,0.9);
    text-align: center;
    font-size: var(--t-xs);
    padding: var(--sp-2) var(--sp-4);
    font-weight: 500;
}
.site-notice a { color: var(--c-accent-lt); font-weight: 600; }