/* 1) Definizione dei layer globali */
@layer base, components, utilities, override;

/* 2) Layer BASE: variabili e reset */
@layer base {
    /* Pulizia: mantieni solo l'ultima versione delle variabili */
    :root {
        --shadow-offset: 2px;
        --shadow-blur: 4px;
        --shadow-light: rgba(0, 0, 0, 0.07);
        --shadow-dark: rgba(0, 0, 0, 0.15);
        --base-bar-height: 60px;
        --scale: 1;
        --bar-height: calc(var(--base-bar-height) * var(--scale));
        --accent-color: #6C1548;
        --accent-rgb: 108, 21, 72;
        --alpha: 0.92;
        --cat-bg: #F3D2E0;
        --text-light: #fff;
        --text-dark: #000;
        --gap: 0.9rem;
        --link-gap: 1.2rem;
        --base-gap: 1rem;
        --left-width: 88px;
        --max-width: 1280px;
        --button-height: 42px;
        --drawer-w: 320px !important;
        --base-drawer-width: 320px;
        --base-font-size: 1rem;
        --base-icon-size: 28px;
        --base-logo-size: 35px;
        --font-size: calc(var(--base-font-size) * var(--scale));
        --icon-size: calc(var(--base-icon-size) * var(--scale));
        --logo-size: calc(var(--base-logo-size) * var(--scale));
    }

    .top-bar,
    .cat-bar {
        font-family: "Poppins", sans-serif;
        font-weight: 500;
        letter-spacing: 0.04em;
        /*text-transform: uppercase;*/
    }


    @media (min-width: 601px) {
        /* === Alza icone di 2px nella top-bar e cat-bar.sticky === */
        header.top-bar .icon-menu,
        header.top-bar .icon-search,
        header.top-bar .icon-user,
        header.top-bar .logo,
        .cat-bar.sticky .menu-sticky,
        .cat-bar.sticky .icon-search,
        .cat_bar.sticky .icon-user,
        header.top-bar .icon-menu,
        .side-menu .side-nav a,
        .side-menu .side-item.has-sub,
        aside.sub-menu .sub-nav a {
            font-size: clamp(0.8rem, 1.2vw, 1rem) !important;
        }

        :root {
            --base-logo-size: 35px;
            --logo-size: calc(var(--base-logo-size) * var(--scale));
        }
    }
    /* Applica la dimensione coerente a entrambi i loghi */
    .logo,
    .logo-sticky {
        width: var(--logo-size) !important;
        height: auto !important;
        max-height: var(--bar-height) !important;
        display: block !important;
        object-fit: contain !important;
    }


    /* Nasconde i separatori ovunque */
    .top-separator,
    .divider {
        display: none !important;
    }

    .top-links a::before,
    .top-actions a::before {
        content: none !important;
    }


    /* applica le variabili */
    .top-bar,
    .cat-bar,
    .cat-bar.sticky {
        height: var(--bar-height) !important;
    }

        .top-bar .wrap,
        .cat-bar > .wrap {
            height: var(--bar-height) !important;
        }

    .top-links a,
    .top-actions a,
    .categories a,
    .cat-actions a,
    .menu-label {
        font-size: var(--font-size) !important;
    }


    /* 1) Spaziatura maggiore tra le voci */
    .sub-nav {
        display: flex !important;
        flex-direction: column !important;
        /*gap: 1rem !important;*/ /* prima era 0.6rem, qui lo allunghiamo */
    }

        /* 2) Stessi padding, rounding e transizione del menu laterale principale */
        .sub-nav a {
            padding: 0.2rem 0.2rem !important; /* stesso padding verticale/orizzontale */
            border-radius: 5px !important; /* arrotondamento identico */
            transition: background-color 0.25s !important; /* stessa transizione */
        }

    /* === SEPARATORI TRA SEZIONI – PERFETTAMENTE ALLINEATI === */
    .categories .divider {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0rem;
        font-size: 0.95rem;
        opacity: 0.4;
        line-height: 1;
        height: 100%;
        position: relative;
        top: 1px;
    }


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

    body {
        font-family: "Roboto", system-ui, sans-serif;
    }

    .wrap {
        max-width: var(--max-width);
        margin: 0 auto;
        padding: 0 var(--gap);
        display: flex;
        align-items: center;
        height: 100%;
    }

    /* === PAGE CONTENT === */
    main {
        padding: 2rem 1rem;
        max-width: var(--max-width);
        margin: 0 auto;
        line-height: 1.6;
    }

    .bar-gap {
        max-width: var(--max-width);
        margin: 1.2rem auto;
        padding: 0 var(--gap);
        font-size: 1rem;
        color: #444;
        text-align: center;
    }



    /* Aggiorna l'altezza delle barre */
    .top-bar,
    .cat-bar {
        height: var(--bar-height);
    }


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

    body {
        font-family: "Roboto", system-ui, sans-serif;
    }

    .wrap {
        max-width: var(--max-width);
        margin: 0 auto;
        padding: 0 var(--gap);
        display: flex;
        align-items: center;
        height: 100%;
    }

    :root {
        --accent-color: #6C1548;
        --accent-rgb: 108, 21, 72;
    }

    @media (max-width: 768px) {
        :root {
            --brand-rgb: 108, 21, 72;
            --brand-alpha: .93;
            --cat-bg: #F3D2E0;
            --text-light: #fff;
            --bar-h: 65px; /* top-bar mobile */
            --bar-height: var(--bar-h);
            --logo-h: 50px;
            --ico-sz: 30px; /* hamburger · user · search */
            --cat-h: 55px; /* barra categorie mobile */
        }

    }
}