/* base.css - Reset, variabili e tipografia */

/* Skip to content — visibile solo con Tab (accessibilità) */
.skip-to-content {
    position: absolute;
    top: -100%;
    left: 16px;
    z-index: 9999;
    padding: 12px 24px;
    background: var(--gray-900, #1c1917);
    color: var(--white, #fff);
    border-radius: 0 0 8px 8px;
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    transition: top 0.2s ease;
}
.skip-to-content:focus {
    top: 0;
    outline: 2px solid var(--blue-500, #3b82f6);
    outline-offset: 2px;
}

:root {
    /* Sistema neutro - caldo, coerente con article/rumors */
    --white: #ffffff;
    --gray-50: #fafaf9;
    --gray-100: #f5f5f4;
    --gray-200: #e7e5e4;
    --gray-300: #d6d3d1;
    --gray-400: #847e76; /* gerarchia meta distinta da gray-500 (16 giu, ≈4.0:1, un filo sotto AA — scelta estetica del proprietario). Storia: 10 giu portato a #78716c=gray-500 per WCAG (era #a8a29e, 2.6:1 illeggibile) */
    --gray-500: #78716c;
    --gray-600: #57534e;
    --gray-700: #44403c;
    --gray-800: #292524;
    --gray-900: #1c1917;

    /* Colori funzionali - palette flat/muted */
    --blue-400: #60a5fa;
    --blue-500: #3b82f6;
    --blue-600: #2563eb;
    --blue-700: #1d4ed8;
    --green-50: #f0fdf4;
    --green-400: #4ade80;
    --green-500: #22c55e;
    --green-600: #16a34a;
    --red-50: #fef2f2;
    --red-400: #f87171;
    --red-500: #ef4444;
    --amber-400: #fbbf24;
    --amber-500: #f59e0b;
    --amber-600: #d97706;
    --teal-600: #0d9488; /* accent teal globale (prima viveva solo in scheda-tecnica.css) — usato anche dal bollino "Provato" */
    --teal-700: #0f766e;

    /* Mapping legacy variables per retrocompatibilita */
    --primary: var(--blue-500);
    --primary-container: rgba(59, 130, 246, 0.1);
    --tertiary: var(--green-500);
    --error: var(--red-500);
    --surface: var(--white);
    /* Sfondo pagina: un soffio sotto gray-50 (#fafaf9) per staccare le card bianche
       senza ingrigire — taratura a video col proprietario, 7 lug 2026 (provati e
       scartati: foglio-canvas, liquid glass, dot-grid, ombre dure; scelto il tocco
       minimo). Usata SOLO da html/body. */
    --surface-dim: #f6f4f1;
    --surface-container: var(--gray-100);
    --surface-container-high: var(--gray-200);
    --on-surface: var(--gray-900);
    --on-surface-variant: var(--gray-500);
    --outline: var(--gray-200);
    --outline-variant: var(--gray-300);

    /* Forme - sistema coerente */
    --radius-sm: 8px;
    --radius-md: 16px;
    --radius-lg: 24px;
    --radius-xl: 28px;
    --radius-full: 9999px;

    /* Ombre */
    --shadow-sm: 0 1px 2px rgba(28, 25, 23, 0.04);
    --shadow-md: 0 4px 12px rgba(28, 25, 23, 0.05), 0 1px 3px rgba(28, 25, 23, 0.03);
    --shadow-lg: 0 8px 30px rgba(28, 25, 23, 0.07), 0 2px 8px rgba(28, 25, 23, 0.03);

    /* Mapping legacy elevations */
    --elevation-1: var(--shadow-sm);
    --elevation-2: var(--shadow-md);
    --elevation-3: var(--shadow-lg);

    /* Spacing - legacy compatibility */
    --space-xs: 8px;
    --space-sm: 12px;
    --space-md: 20px;
    --space-lg: 32px;
    --space-xl: 48px;

    /* Legacy color */
    --on-primary-container: var(--blue-600);
}

/* Bollino "Provato" — marcatore discreto sui prodotti testati di persona (confronto, guida).
   Sobrio: tinta teal, niente sfondo. L'ASSENZA del bollino = prodotto non provato. */
.provato-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: var(--teal-600);
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 80px;
    background: var(--surface-dim); /* evita gap bianco durante overscroll-bounce macOS */
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Immagini fluide: senza, la prima foto vera sfonda lo schermo su mobile */
img {
    max-width: 100%;
    height: auto;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    background: var(--surface-dim);
    color: var(--on-surface);
    line-height: 1.5;
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
}

/* Score ring color classes */
.score-ring--high { color: var(--green-500); }
.score-ring--medium { color: var(--amber-500); }
.score-ring--low { color: var(--red-500); }

/* Iubenda: bottone preferenze flottante nascosto — al suo posto c'è il link
   "Preferenze privacy" nel footer (reperto 3 valutazione-design, 11 giu).
   Cerotto: la disattivazione vera è su app.iubenda.com (config remota);
   quando il proprietario la fa, questa regola resta innocua. */
/* classi ripetute = specificita 0-4-0, sopra la 0-3-0 del CSS iniettato da iubenda */
.iubenda-tp-btn.iubenda-tp-btn.iubenda-cs-preferences-link.iubenda-cs-preferences-link {
    display: none !important;
}

/* ── Cornice incastonata: filo di bordo auto-adattante (Opzione 3, 16 giu) ──
   Definisce il bordo dell'immagine sulle cover a SFONDO BIANCO (dove la cornice
   bianca altrimenti sparisce); quasi-invisibile sulle cover scure/colorate, dove
   il contrasto già c'è. Vale su TUTTE le superfici incastonate del sito.
   Convenzione e mappa superfici: memoria/regole/cornice-incastonata.md
   (esclusa di proposito .related-thumb img: sidebar correlati = piatta). */
.hero-product-img,
.hero-image > img,
.hero-small-thumb > img,
.trending-thumb > img,
.article-image > img,
.rumor-card-image > img,
.card-thumb img,
.ft-img > img,
.card-img > img,
.rumor-img img {
    border: 1px solid rgba(0, 0, 0, 0.08);
}