/* Duca Tarocco — client.css override
   Parity visiva con ducatarocco.it/menu + WCAG 2.1 AA + full responsive
   Generato da: php artisan import:duca-tarocco */

/* ================================================================
   1. FONT FACES
   ================================================================ */
@font-face {
    font-family: 'FontCategorie';
    src: url('/client-assets/TAN-MEMORIES-Regular.woff2') format('woff2'),
         url('/client-assets/TAN-MEMORIES-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'FontNomePiatto';
    src: url('/client-assets/Monterchi-Sans-Bold.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* ================================================================
   2. PAGE BACKGROUND
   ================================================================ */
body {
    background-color: #000 !important;
}

/* ================================================================
   3. ACCORDION HEADER
   Tipografia fluida: 16px (320px) → 25px (525px+)
   Touch target: min-height 48px
   ================================================================ */
.accordion__item summary {
    background: #237754 !important;
    color: #000 !important;
    font-family: 'FontCategorie', Arial, sans-serif !important;
    font-size: 20px !important;
    font-size: clamp(16px, 4vw + 4px, 25px) !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    padding: 15px 24px !important;
    min-height: 48px !important;
    letter-spacing: normal !important;
    border-bottom: none !important;
    transition: none !important;
}
.accordion__item summary:hover {
    background: #2a8a62 !important;
}
.accordion__item[open] summary {
    background: #E3401A !important;
    color: #000 !important;
    transition: none !important;
}

/* ================================================================
   4. ACCORDION ARROW: nascosta (originale usa icona ❂)
   ================================================================ */
.accordion__arrow {
    display: none !important;
}

/* ================================================================
   5. ICON ❂ a destra — scala con il testo
   ================================================================ */
.accordion__item summary::after {
    content: '❂';
    font-size: 0.9em;
    margin-left: auto;
    padding-left: 12px;
    flex-shrink: 0;
}

/* ================================================================
   6. ACCORDION BODY: beige pergamena
   ================================================================ */
.accordion__body {
    background: #F2EDE4 !important;
}
.accordion__content {
    background: #F2EDE4 !important;
    color: #000 !important;
}

/* ================================================================
   7. ACCORDION CONTAINER + DIVIDER
   ================================================================ */
.accordion {
    box-shadow: none !important;
    border-radius: 0 !important;
    overflow: visible !important;
}
.accordion__item {
    border-bottom: 3px solid #000 !important;
}
.accordion__item:last-child {
    border-bottom: none !important;
}

/* ================================================================
   8. MENU ITEM: nome, descrizione, prezzo
   ================================================================ */
.menu-item__name {
    font-family: 'FontNomePiatto', 'Poppins', sans-serif;
    font-weight: 600;
    color: #000;
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
}
.menu-item__desc {
    color: #444 !important;
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
}
.menu-item__price {
    color: #000 !important;
    font-weight: 600 !important;
}
.menu-item + .menu-item {
    border-top: 1px solid rgba(0,0,0,0.08) !important;
}

/* ================================================================
   9. TYPE HEADER (sottocategorie)
   WCAG: #C93615 su #F2EDE4 = ~4.7:1 (AA normal text)
   Tipografia fluida: 14px → 18px
   ================================================================ */
h3.type-header, h4.type-header {
    color: #C93615 !important;
    font-family: 'FontCategorie', Arial, sans-serif !important;
    font-size: 16px !important;
    font-size: clamp(14px, 2.5vw + 6px, 18px) !important;
    padding: 14px 0 6px !important;
}

/* ================================================================
   10. HEADER + LOGO
   ================================================================ */
.menu-header__name {
    color: #fff !important;
}
.menu-header__logo {
    max-width: 234px !important;
    height: auto !important;
}

/* ================================================================
   11. INFO SECTIONS su sfondo nero
   WCAG: #F05A2A su ~#0F0F0F = ~5.2:1 (AA)
   ================================================================ */
.info-section,
.info-accordion {
    background: rgba(255,255,255,0.05) !important;
}
.info-section__title {
    color: #F05A2A !important;
}
.info-accordion__trigger .info-section__title {
    color: #F05A2A !important;
}

/* ================================================================
   12. ALLERGEN: contrasto + touch target + affordance
   WCAG: #444 su #F2EDE4 = ~5.8:1 (AA)
   Touch: padding aumentato per area tap
   ================================================================ */
.allergen-num {
    color: #444 !important;
}
.allergen-label {
    color: #444 !important;
}
.menu-item__allergens {
    gap: 4px !important;
}

/* ================================================================
   13. BADGE CONSIGLIATO
   ================================================================ */
.menu-item__badge {
    background: #E3401A !important;
    color: #fff !important;
}

/* ================================================================
   14. FOOTER: fix contrasto WCAG
   Attuale rgba(255,255,255,0.4) = ~2.2:1 → FAIL
   Fix: rgba(255,255,255,0.65) = ~7.5:1 → PASS AA
   ================================================================ */
.menu-footer {
    color: rgba(255,255,255,0.65) !important;
}
.menu-footer p {
    color: rgba(255,255,255,0.65) !important;
}
.menu-footer a {
    color: rgba(255,255,255,0.65) !important;
}

/* ================================================================
   15. LANGUAGE SWITCHER: contrasto + touch target 44px
   WCAG: rgba(255,255,255,0.65) su #000 = ~7.5:1 (AA)
   ================================================================ */
.lang-switcher__btn {
    color: rgba(255,255,255,0.65) !important;
    min-height: 44px !important;
    min-width: 44px !important;
}
.lang-switcher__btn--active {
    color: #fff !important;
}

/* ================================================================
   16. FOCUS-VISIBLE: indicatori visibili su tutti i bg
   ================================================================ */
.accordion__item summary:focus-visible {
    outline: 3px solid #000 !important;
    outline-offset: -3px !important;
}
.allergen-num:focus-visible {
    outline: 2px solid #E3401A !important;
    outline-offset: 1px !important;
}
.lang-switcher__btn:focus-visible {
    outline: 2px solid #E3401A !important;
    outline-offset: 2px !important;
}

/* ================================================================
   17. ALLERGEN LEGEND (nella info-accordion su sfondo nero)
   ================================================================ */
.allergen-legend__item {
    color: rgba(255,255,255,0.75) !important;
}
.allergen-legend__num {
    color: #F05A2A !important;
}

/* ================================================================
   RESPONSIVE — BREAKPOINTS
   ================================================================ */

/* --- max-width: 480px (telefoni standard) --- */
@media (max-width: 480px) {
    .menu-header__logo {
        max-width: 180px !important;
    }
    .accordion__item summary {
        padding: 14px 18px !important;
    }
    .accordion__content {
        padding: 12px 16px 18px !important;
    }
}

/* --- max-width: 360px (telefoni piccoli) --- */
@media (max-width: 360px) {
    .menu-header__logo {
        max-width: 140px !important;
    }
    .accordion__item summary {
        padding: 14px 16px !important;
    }
    .accordion__content {
        padding: 10px 14px 16px !important;
    }
}

/* --- max-width: 320px (iPhone SE, ultra-compact) --- */
@media (max-width: 320px) {
    .menu-header {
        padding: 20px 12px 16px !important;
    }
    .menu-header__logo {
        max-width: 120px !important;
    }
    .accordion__item summary {
        padding: 12px 14px !important;
    }
    .accordion__content {
        padding: 10px 12px 14px !important;
    }
    .menu-item__row {
        gap: 8px !important;
    }
}

/* --- min-width: 768px (tablet) --- */
@media (min-width: 768px) {
    .menu-container {
        max-width: 700px !important;
    }
    .menu-header {
        padding: 48px 24px 32px !important;
    }
    .menu-header__logo {
        max-width: 280px !important;
    }
    .accordion__item summary {
        font-size: 26px !important;
        padding: 18px 28px !important;
    }
    .accordion__content {
        padding: 20px 28px 28px !important;
    }
    .menu-item {
        padding: 14px 0 !important;
    }
    h3.type-header, h4.type-header {
        font-size: 20px !important;
    }
}

/* --- Landscape phones (altezza limitata) --- */
@media (max-height: 500px) and (orientation: landscape) {
    .menu-header {
        padding: 16px 20px 12px !important;
    }
    .menu-header__logo {
        max-width: 120px !important;
    }
    .accordion__item summary {
        min-height: 44px !important;
        padding: 10px 20px !important;
    }
    .accordion__content {
        padding: 12px 18px 16px !important;
    }
    .menu-footer {
        padding: 8px 20px 12px !important;
    }
}