/*
 * QUEST - Issues in Contemporary Jewish History
 * quest-cdecjournal.it
 *
 * Correzioni Responsive — Maggio 2026
 * File da includere DOPO il foglio di stile principale del tema.
 *
 * Struttura:
 *   1. Fix globali (tutte le dimensioni)
 *   2. Header mobile — logo + menu toggle (colore #ac214b)
 *   3. Tablet — max-width: 910px
 *   4. Tablet stretto — max-width: 812px
 *   5. Mobile — max-width: 600px
 *   6. Mobile piccolo — max-width: 480px
 *   7. Mobile stretto — max-width: 375px
 */


/* =========================================================
   1. FIX GLOBALI
   ========================================================= */

/* Previene overflow orizzontale globale */
html,
body {
    overflow-x: hidden;
    max-width: 100%;
}

/* Immagini sempre contenute nel proprio elemento padre */
img {
    max-width: 100%;
    height: auto;
}


/* =========================================================
   2. HEADER MOBILE — Logo + Menu Toggle
   Colore menu toggle: #ac214b
   Logo: ridimensionato e allineato verticalmente al bottone
   ========================================================= */

@media screen and (max-width: 910px) {

    /* Header: flex container bilanciato */
    .site-header-main {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        flex-wrap: nowrap !important;
        min-height: 72px;
        padding: 10px 16px !important;
        box-sizing: border-box;
    }

    /* Logo QUEST: altezza fissa per garantire leggibilità
       e allineamento verticale con il bottone menu */
    .site-branding {
        display: flex;
        align-items: center;
        flex: 1 1 auto;
        min-width: 0; /* permette al flex item di restringersi */
    }

    .site-branding .custom-logo-link,
    .site-branding a.custom-logo-link {
        display: block;
        line-height: 0;
    }

    .site-branding .custom-logo-link img,
    .site-branding img.custom-logo {
        height: 52px !important;   /* altezza fissa: logo sempre leggibile */
        width: auto !important;
        max-width: none !important; /* non viene schiacciato dalla max-width: 220px */
    }

    /* Menu toggle button: colore #ac214b per testo e icona */
    button.menu-toggle,
    .menu-toggle {
        color: #ac214b !important;
        border-color: #ac214b !important;
        background: transparent !important;
        flex-shrink: 0;
        margin-left: 12px;
        padding: 8px 10px;
        font-size: 0.85em;
        font-weight: 700;
        letter-spacing: 0.05em;
        line-height: 1;
    }

    button.menu-toggle:hover,
    button.menu-toggle:focus,
    .menu-toggle:hover,
    .menu-toggle:focus {
        color: #8a1a3b !important;
        border-color: #8a1a3b !important;
        outline: none;
    }

    /* Icona hamburger ☰ — menu chiuso */
    .menu-toggle::before {
        content: "\2630";
        margin-right: 5px;
        font-size: 1.15em;
        color: #ac214b;
        vertical-align: middle;
    }

    /* --------------------------------------------------
       BOTTONE ✕ — menu aperto
       Posizione fissa in alto a destra, sopra l'overlay,
       così è sempre visibile indipendentemente dallo stacking
       -------------------------------------------------- */
    button.menu-toggle.toggled-on {
        position: fixed !important;
        top: 14px !important;
        right: 16px !important;
        z-index: 100000 !important;
        background: #ffffff !important;
        border: 1px solid #ac214b !important;
        padding: 6px 12px !important;
        margin: 0 !important;
    }

    /* Offset per admin bar WordPress (46px su mobile) */
    .admin-bar button.menu-toggle.toggled-on {
        top: 60px !important;
    }

    /* Icona ✕ quando aperto */
    button.menu-toggle.toggled-on::before {
        content: "\00D7";
        font-size: 1.6em;
        color: #ac214b;
        margin-right: 5px;
        vertical-align: middle;
    }

    /* --------------------------------------------------
       MENU APERTO: overlay full-width su tutto lo schermo
       -------------------------------------------------- */

    /* L'header con logo + bottone MENU resta sopra l'overlay */
    .site-header-main {
        position: relative;
        z-index: 10000;
        background: #ffffff;
    }

    /* Il pannello di navigazione, quando aperto (.toggled-on),
       diventa un overlay a schermo intero */
    #site-header-menu.toggled-on {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        min-height: 100vh;
        background: #ffffff;
        z-index: 9999;
        overflow-y: auto;
        /* padding-top: lascia spazio all'header che sta sopra (z-index > 9999) */
        padding: 84px 32px 40px;
        box-sizing: border-box;
    }

    /* Corregge posizione se l'admin bar di WP è visibile (mobile: 46px) */
    .admin-bar #site-header-menu.toggled-on {
        top: 46px;
        min-height: calc(100vh - 46px);
        padding-top: 24px;
    }

    /* Lista voci di menu: a piena larghezza, ben spaziata */
    #site-header-menu.toggled-on .main-navigation ul {
        margin: 0;
        padding: 0;
        list-style: none;
        width: 100%;
    }

    #site-header-menu.toggled-on .main-navigation ul li {
        display: block;
        width: 100%;
        border-bottom: 1px solid #e8e8e8;
    }

    #site-header-menu.toggled-on .main-navigation ul li:first-child {
        border-top: 1px solid #e8e8e8;
    }

    /* Link singola voce: area di tap comoda */
    #site-header-menu.toggled-on .main-navigation ul li a {
        display: block;
        width: 100%;
        padding: 16px 0;
        font-size: 1em;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: #222222;
        text-decoration: none;
        box-sizing: border-box;
    }

    #site-header-menu.toggled-on .main-navigation ul li a:hover {
        color: #ac214b;
    }

    /* Voce attiva: colore brand */
    #site-header-menu.toggled-on .main-navigation ul li.current-menu-item > a,
    #site-header-menu.toggled-on .main-navigation ul li.current_page_item > a {
        color: #ac214b;
        font-weight: 700;
    }

    /* Search bar in fondo al menu aperto */
    #site-header-menu.toggled-on .search-form {
        margin-top: 28px;
        display: flex;
        gap: 8px;
    }

    #site-header-menu.toggled-on .search-form input[type="search"] {
        flex: 1;
        width: 100%;
        box-sizing: border-box;
        padding: 10px 12px;
        border: 1px solid #ccc;
        font-size: 0.95em;
    }
}


/* =========================================================
   3. CAROUSEL "ALL ISSUES" (SiteOrigin) — fix responsive
   Problemi rilevati:
   - Container fisso a ~1189px → frecce fuori viewport su mobile
   - Font icon "carousel-arrows" color bianco su bianco → invisibili
   - Soluzione: container responsive + frecce ridisegnate in CSS puro
   ========================================================= */

@media screen and (max-width: 910px) {

    /* 1. Widget: larghezza piena con margini laterali per non toccare i bordi */
    .widget_wpqissues,
    #wpqissues-2 {
        width: auto !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        margin-left: 16px !important;
        margin-right: 16px !important;
    }

    /* 2. Container: responsive e overflow visible per le frecce assolute */
    .sow-carousel-title {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow: visible !important;
        position: relative !important;
    }

    /* 3. Frecce: pulsanti circolari #ac214b, sempre visibili.
          NOTA: .sow-carousel-title ha height:0 quindi top:50% = 0.
          Usiamo top calcolato in px (stessa logica del plugin: 95px
          = metà dell'altezza degli item, che su desktop sono 250px).
          Su mobile gli item scalano proporzionalmente quindi 95px
          resta approssimativente centrato. */
    .widget_wpqissues .sow-carousel-title a.sow-carousel-previous,
    .widget_wpqissues .sow-carousel-title a.sow-carousel-next {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        overflow: visible !important;
        position: absolute !important;
        top: 95px !important;
        transform: translateY(-50%) !important;
        width: 44px !important;
        height: 44px !important;
        border-radius: 50% !important;
        background: #ac214b !important;
        color: transparent !important;
        border: none !important;
        z-index: 100 !important;
        cursor: pointer !important;
        font-size: 0 !important;
        text-decoration: none !important;
    }

    .widget_wpqissues .sow-carousel-title a.sow-carousel-previous {
        left: 8px !important;
        right: auto !important;
    }

    .widget_wpqissues .sow-carousel-title a.sow-carousel-next {
        right: 8px !important;
        left: auto !important;
    }

    /* 4. Frecce CSS pure via ::before — sostituisce il font icon
          con caratteri Unicode che funzionano senza font esterni */
    .widget_wpqissues .sow-carousel-title a.sow-carousel-previous::before {
        content: "\2039" !important; /* ‹ */
        font-family: Arial, Helvetica, sans-serif !important;
        font-size: 26px !important;
        line-height: 1 !important;
        color: #ffffff !important;
        display: block !important;
        font-weight: 700 !important;
    }

    .widget_wpqissues .sow-carousel-title a.sow-carousel-next::before {
        content: "\203A" !important; /* › */
        font-family: Arial, Helvetica, sans-serif !important;
        font-size: 26px !important;
        line-height: 1 !important;
        color: #ffffff !important;
        display: block !important;
        font-weight: 700 !important;
    }

    /* 5. Hover: feedback visivo */
    .widget_wpqissues .sow-carousel-title a.sow-carousel-previous:hover,
    .widget_wpqissues .sow-carousel-title a.sow-carousel-next:hover {
        background: #8a1a3b !important;
    }
}


/* =========================================================
   4. TABLET — max-width: 910px
   Layout contenuto e sidebar (header già gestito nella sezione 2)
   ========================================================= */

@media screen and (max-width: 910px) {

    /* Contenitore principale: una sola colonna */
    .site-content .wrap {
        display: flex;
        flex-direction: column;
    }

    /* Sidebar si sposta sotto il contenuto principale
       con un separatore visivo */
    #secondary {
        width: 100%;
        margin-top: 40px;
        padding-top: 24px;
        border-top: 2px solid #e0e0e0;
    }
}


/* =========================================================
   4. TABLET STRETTO — max-width: 812px
   ========================================================= */

@media screen and (max-width: 812px) {

    /* Logo CDEC: il tema lo nasconde a 812px, ma è troppo presto.
       Lo mostriamo ridimensionato fino a 480px (vedi sezione 5). */
    .logo-cdec {
        display: block !important;
    }

    .logo-cdec img {
        display: block !important;
        max-width: 80px;
        height: auto;
    }

    /* Rimuove il margine fisso che causa spazio bianco
       nell'header quando la finestra si restringe */
    .logo-cdec {
        margin-left: 0 !important;
        margin-right: 16px;
    }

    /* Header: evita che logo QUEST e logo CDEC si sovrappongano */
    .site-branding {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 12px;
        padding: 12px 16px;
    }
}


/* =========================================================
   4. MOBILE — max-width: 600px
   ========================================================= */

@media screen and (max-width: 600px) {

    /* Social share floating bar (AddToAny):
       solleva il widget sopra la barra di navigazione del browser
       invece di sovrapporsi al contenuto */
    .a2a_floating_style.a2a_default_style {
        bottom: 56px !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        background: rgba(255, 255, 255, 0.97);
        border-top: 1px solid #ddd;
        padding: 4px 0;
        z-index: 9999 !important;
    }

    /* Aggiunge padding inferiore al body per compensare
       lo spazio occupato dal widget fisso */
    body {
        padding-bottom: 110px;
    }

    /* Frecce navigazione articolo (SiteOrigin Panels):
       corregge il left negativo che causa overflow */
    .mojo-sp-button {
        left: 0 !important;
        right: 0 !important;
    }

    /* Carousel homepage: evita il troncamento delle label */
    .sow-carousel-item .overlay,
    .sow-carousel-item .title {
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
        font-size: 0.85em;
    }

    /* Titoli delle sezioni: riduce dimensione su schermi piccoli */
    h1.entry-title,
    h1.page-title {
        font-size: 1.6em;
        line-height: 1.3;
    }

    /* Navigazione interna articoli: evita overflow */
    .post-navigation .nav-links {
        flex-direction: column;
    }

    .post-navigation .nav-previous,
    .post-navigation .nav-next {
        width: 100%;
        text-align: left;
    }
}


/* =========================================================
   5. MOBILE PICCOLO — max-width: 480px
   ========================================================= */

@media screen and (max-width: 480px) {

    /* Logo CDEC: a questa dimensione lo nasconde davvero
       (lo spazio è troppo ridotto per mostrarlo leggibile) */
    .logo-cdec {
        display: none !important;
    }

    /* Logo QUEST: su schermi da 480px riduce leggermente l'altezza */
    .site-branding .custom-logo-link img,
    .site-branding img.custom-logo {
        height: 42px !important;
    }

    /* Header: padding laterale più stretto */
    .site-header-main {
        padding: 8px 12px !important;
    }

    /* Voci di menu nel pannello aperto: più spazio verticale
       per tap facili da mobile */
    #site-navigation .main-navigation ul li a {
        padding: 12px 16px;
        font-size: 0.95em;
        display: block;
    }

    /* Sidebar widget: rimuove padding eccessivo */
    #secondary .widget {
        padding: 0;
        margin-bottom: 24px;
    }

    /* Footer: impila le colonne */
    .site-footer .wrap,
    footer .widget-area {
        flex-direction: column !important;
    }

    footer .widget {
        width: 100% !important;
        margin-bottom: 20px;
    }
}


/* =========================================================
   6. MOBILE STRETTO — max-width: 375px
   ========================================================= */

@media screen and (max-width: 375px) {

    /* Riduce ulteriormente i font per schermi strettissimi */
    body {
        font-size: 15px;
    }

    h1.entry-title,
    h1.page-title {
        font-size: 1.4em;
    }

    /* Contenuto articolo: riduce il padding laterale */
    .entry-content,
    .entry-summary {
        padding-left: 12px;
        padding-right: 12px;
    }
}


/* =========================================================
   PRIORITÀ CRITICA — COOKIE MODAL (CookieYes)
   Applicato a tutti i breakpoint: il modal ha larghezza
   fissa 845px che causa overflow severo su mobile.
   ========================================================= */

.cky-preference-center {
    max-width: 100% !important;
    width: auto !important;
    left: 0 !important;
    right: 0 !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
}

.cky-preference-content-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
}

.cky-preference-body-wrapper {
    flex-direction: column !important;
}

.cky-btn-revisit-wrapper,
.cky-footer-shadow {
    flex-wrap: wrap !important;
    gap: 8px !important;
}

.cky-btn {
    min-width: unset !important;
    flex: 1 1 auto !important;
}

@media screen and (max-width: 600px) {
    .cky-preference-center {
        padding: 16px !important;
        border-radius: 0 !important;
        top: 0 !important;
        bottom: 0 !important;
        overflow-y: auto !important;
    }

    .cky-footer-shadow {
        position: static !important;
        padding: 12px 0 0 !important;
    }

    .cky-btn-accept,
    .cky-btn-reject,
    .cky-btn-preferences {
        width: 100% !important;
        text-align: center !important;
        left: auto !important;
        right: auto !important;
        position: static !important;
    }
}