/*
 * ras-layout-fixes.css — Riso Acqua e Sole
 * Fix di layout dall'audit 2026-06-15. CSS ADDITIVO, scoped, reversibile.
 * Disattivabile rimuovendo il mu-plugin wp-content/mu-plugins/as-layout-fixes.php.
 * Caricato DOPO woodmart-style + child-style (prio 10020), con cache-bust su filemtime.
 * Regola di lavoro: ogni blocco è verificato empiricamente su browser reale (Playwright)
 * PRIMA del deploy. Niente blind-apply delle raccomandazioni d'audit.
 */

/* ============================================================
 * P0-1 — Template ricette/guide (.ras-recipe-*): hero non responsive < 1024px
 *
 * CAUSA REALE (misurata, non quella ipotizzata dall'audit):
 *   .ras-recipe-hero ha aspect-ratio:16/9 + min-height:55vh. Sotto ~1024px il
 *   browser calcola la LARGHEZZA dall'altezza (min-height 464px * 16/9 ≈ 825px),
 *   che eccede il viewport (390px) ed è tagliata da body{overflow-x:clip}.
 *   Risultato: titolo, breadcrumb, sottotitolo e info-bar CLIPPATI su mobile/tablet.
 *   Non esiste alcun "width:880px" (ipotesi d'audit errata).
 *
 * FIX: neutralizzare aspect-ratio sotto 1024px così l'hero prende la larghezza
 *   del contenitore (min-height resta per l'altezza visiva). + cap max-width:100%
 *   sui wrapper interni con width fissa (es. .ras-recipe-hero-content width:720px).
 *
 * VERIFICATO (viewport 390): 5 elementi fuori-viewport -> 0; hero 825px -> 382px;
 *   titolo "RISOTTO ALLA MILANESE CLASSICO" interamente leggibile.
 *   Desktop (>=1025px) non toccato. Vale IT + EN (stesso template).
 * ============================================================ */
@media (max-width: 1024px) {
  .ras-recipe-hero {
    aspect-ratio: auto !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  .ras-recipe-hero-content {
    max-width: 100% !important;
    padding-left: 20px;
    padding-right: 20px;
    box-sizing: border-box;
  }
  .ras-info-bar,
  .ras-info-bar-inner,
  .ras-recipe,
  .ras-inner,
  .ras-section,
  .ras-recipe-card,
  .ras-product-cta {
    max-width: 100% !important;
  }
}

/* ============================================================
 * P0-4 — Hero "Il mio account": titolo illeggibile
 *
 * CAUSA REALE (misurata): il titolo h2 dell'hero ha colore rgb(117,153,185),
 * IDENTICO al colore mediano del gradient blu di .ras-hero-account
 * (linear-gradient 107,145,179 -> 117,153,185 -> ...) => invisibile.
 * Il sottotitolo .ras-subtitle era gia bianco (corretto su blu).
 * I titoli "Login"/"Register" stanno invece sul blocco CREMA sotto l'hero
 * (rgb(245,241,235)) in azzurro chiaro => ratio 2.66 (illeggibili).
 *
 * FIX: hero (su blu) -> bianco + ombra leggera (alto contrasto, premium);
 *      Login/Register (su crema) -> navy scuro #2c3e50 (ratio ~9.7).
 * Scoped a .ras-hero-account e .woocommerce-account: zero impatto altrove.
 * Verificato live 1440 + 390.
 * ============================================================ */
.ras-hero-account h2,
.ras-hero-account .ras-subtitle {
  color: #ffffff !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .30);
}
.woocommerce-account .wd-login-title { color: #2c3e50 !important; }

/* ============================================================
 * P1-1 — Menu desktop va a capo nella fascia 1025-1179px (iPad Mini landscape)
 *
 * CAUSA: la nav Woodmart .wd-nav-main ha flex-wrap:wrap; in quella fascia la
 * colonna menu e' di pochi px troppo stretta e l'ultima voce va a capo (nav 89px).
 * <=1024 c'e' il burger (ok), >=1180 torna 1 riga.
 *
 * FIX (rete di sicurezza CSS, scoped alla sola fascia): nowrap + gap ridotto +
 * no-wrap sui link. Verificato client-side IT (5 voci) ed EN (label piu' lunghe,
 * es. "Our Supply Chain"): 2 righe -> 1 riga, zero overflow, fino a 1025px.
 * (L'opzione "burger a 1200px" via Woodmart Header Builder e' decisione separata,
 * setting DB, da applicare a parte.)
 * ============================================================ */
@media (min-width: 1025px) and (max-width: 1199px) {
  .wd-nav-main { flex-wrap: nowrap !important; }
  .wd-nav-main.wd-gap-m > li { margin-right: 16px !important; }
  .wd-nav-main > li > a { white-space: nowrap !important; }
}