/* =====================================================================
   responsive.css (v7) – adattamento del registro (template Artisteer 3.1)
   Va caricato DOPO style.css, Style2.css, StileNuovo.css e gli altri CSS.

   v3: nelle master "Profilo" (menu verticale) il menu è a comparsa su
   TUTTI gli schermi, desktop compreso, e l'area dati usa tutta la
   larghezza con un margine laterale. Le master vecchie (menu
   orizzontale) restano com'erano su desktop.
   ===================================================================== */

:root {
    --rm-testo: #14191A;
    --rm-testo-sub: #3F5A59;
    --rm-accento: #1D6877;
    --rm-sfondo: #ffffff;
    --rm-sfondo-sub: #EEF3F3;
    --rm-bordo: #C9D6D5;
    --rm-margine: clamp(12px, 3vw, 40px);   /* margine a destra e sinistra dell'area dati */
}

/* ---------------------------------------------------------------------
   Pulsante "Menu" (stile comune)
   --------------------------------------------------------------------- */
.menu-toggle {
    display: none;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 8px 18px 8px 14px;
    border: 1px solid var(--rm-bordo);
    border-radius: 6px;
    background: var(--rm-sfondo);
    color: var(--rm-testo);
    font: bold 16px Arial, Helvetica, sans-serif;
    text-align: left;
    cursor: pointer;
}
.menu-toggle:hover { border-color: var(--rm-accento); color: var(--rm-accento); }
.menu-toggle:focus-visible { outline: 2px solid var(--rm-accento); outline-offset: 2px; }

.menu-toggle-icona,
.menu-toggle-icona:before,
.menu-toggle-icona:after {
    display: block;
    width: 22px;
    height: 2px;
    background: currentColor;
    position: relative;
}
.menu-toggle-icona:before,
.menu-toggle-icona:after { content: ""; position: absolute; left: 0; }
.menu-toggle-icona:before { top: -7px; }
.menu-toggle-icona:after  { top: 7px; }

/* =====================================================================
   v4 – Barra superiore (master con <div id="art-main" class="con-testata">):
   sostituisce l'intestazione Artisteer. Menu, logo, profilo, docente, Esci.
   ===================================================================== */
#art-main.con-testata { overflow: visible; }            /* altrimenti la barra non resta ferma scorrendo */
.con-testata #art-page-background-glare-wrapper,
.con-testata .art-header { display: none !important; }
.con-testata .art-sheet-body { padding: 0 !important; }
.con-testata .art-layout-wrapper > .art-content-layout > .art-content-layout-row > .art-sidebar1 { padding: 0 !important; }

.testata {
    position: sticky;
    top: 0;
    z-index: 900;
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 64px;
    padding: 8px var(--rm-margine);
    box-sizing: border-box;
    background: #FFFFFF;
    border-bottom: 1px solid #D5DDE0;
    font-family: Arial, Helvetica, sans-serif;
    text-align: left;
}
.testata .menu-toggle { display: inline-flex !important; width: auto !important; flex: 0 0 auto; }
.testata-logo { display: block; height: 54px; width: auto; }    /* logo 2025 ad alta risoluzione: nitido anche ingrandito */
.testata-separatore { width: 1px; height: 32px; background: #D5DDE0; }
.testata-titolo { font-size: 18px; font-weight: bold; color: #1E2A30; white-space: nowrap; }
.testata-destra { margin-left: auto; display: flex; align-items: center; gap: 16px; min-width: 0; }
.testata-profilo { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.testata-utente { color: #1E2A30; font-size: 15px; font-weight: bold; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.testata-liceo { display: block; height: 22px; width: auto; }   /* banda "Liceo internazionale" del logo */
.testata-esci {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 0 16px;
    border: 1px solid #C9D6D5;
    border-radius: 6px;
    color: #1D6877 !important;
    font-size: 14px;
    font-weight: bold;
    text-decoration: none !important;
    white-space: nowrap;
}
.testata-esci:hover { border-color: #1D6877; }
.testata-esci:focus-visible { outline: 2px solid #1D6877; outline-offset: 2px; }

@media screen and (max-width: 1100px) {
    .testata-utente { display: none; }
}
@media screen and (max-width: 900px) {
    .testata-separatore, .testata-profilo { display: none; }
    .testata-logo { height: 44px; }
}
@media screen and (max-width: 768px) {
    .testata { gap: 10px; min-height: 56px; padding: 6px 10px; }
    .testata .menu-toggle { padding: 8px 10px; }
    .testata .menu-toggle-testo { display: none; }
    .testata-logo { height: auto; width: auto; max-height: 38px; max-width: calc(100vw - 150px); min-width: 0; }
    .testata-esci { padding: 0 12px; }
}

/* =====================================================================
   Master "Profilo" (menu verticale): colonna unica e menu a comparsa
   a tutte le larghezze. I selettori ">" colpiscono solo l'impaginazione
   della master, non eventuali layout dentro le pagine.
   ===================================================================== */
.art-layout-wrapper > .art-content-layout,
.art-layout-wrapper > .art-content-layout > .art-content-layout-row,
.art-layout-wrapper > .art-content-layout > .art-content-layout-row > .art-layout-cell {
    display: block !important;
    width: auto !important;
}
.art-layout-wrapper > .art-content-layout > .art-content-layout-row > .art-sidebar1 {
    padding: 12px var(--rm-margine) 0 !important;
    text-align: left !important;
}
.art-layout-wrapper > .art-content-layout > .art-content-layout-row > .art-content {
    padding: 8px var(--rm-margine) 24px !important;
    box-sizing: border-box;
}

.art-sidebar1 .menu-toggle { display: inline-flex; }

/* Pannello del menu: scorre da sinistra sopra la pagina */
.art-sidebar1 #menu-principale { display: none !important; }
.art-sidebar1 #menu-principale.aperto {
    display: block !important;
    position: fixed !important;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 1001;
    width: min(340px, 88vw) !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow-y: auto;
    background: var(--rm-sfondo);
    box-shadow: 0 0 24px rgba(20, 25, 26, 0.28);
}
.art-sidebar1 #menu-principale.aperto:before,
.art-sidebar1 #menu-principale.aperto:after,
.art-sidebar1 #menu-principale .art-box-body:before,
.art-sidebar1 #menu-principale .art-box-body:after { display: none !important; }

/* Sfondo scuro dietro al pannello (creato da menu-mobile.js) */
.menu-sfondo { display: none; }
.menu-sfondo.visibile {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(20, 25, 26, 0.45);
}
html.menu-bloccato, html.menu-bloccato body { overflow: hidden; }

/* Testata del pannello: titolo del profilo + pulsante di chiusura */
.art-sidebar1 .art-vmenublockheader {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    min-height: 56px;
    height: auto !important;
    padding: 0 6px 0 16px !important;
    margin: 0 !important;
    background: none !important;
    border-bottom: 1px solid var(--rm-bordo);
}
.art-sidebar1 .art-vmenublockheader:before,
.art-sidebar1 .art-vmenublockheader:after { display: none !important; }
.art-sidebar1 .art-vmenublockheader h3,
.art-sidebar1 .art-vmenublockheader .t {
    margin: 0 !important;
    padding: 0 !important;
    font: bold 17px Arial, Helvetica, sans-serif !important;
    color: var(--rm-testo) !important;
    background: none !important;
}
.menu-chiudi {
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--rm-testo);
    font: 28px/1 Arial, Helvetica, sans-serif;
    cursor: pointer;
}
.menu-chiudi:hover { background: var(--rm-sfondo-sub); }
.menu-chiudi:focus-visible { outline: 2px solid var(--rm-accento); outline-offset: -2px; }

/* Voci del menu */
.art-sidebar1 ul.art-vmenu,
.art-sidebar1 ul.art-vmenu ul,
.art-sidebar1 ul.art-vmenu li {
    line-height: 1.3 !important;
    margin: 0 !important;
    padding: 0 !important;
}
.art-sidebar1 ul.art-vmenu a {
    display: flex !important;
    align-items: center;
    height: auto !important;
    min-height: 44px;
    box-sizing: border-box;
    line-height: 1.3 !important;
    white-space: normal !important;
    border-top: 1px solid var(--rm-bordo);
    font-size: 15px !important;
}
.art-sidebar1 ul.art-vmenu > li > a {                 /* voci principali */
    padding: 8px 16px !important;
    font-weight: bold !important;
    color: var(--rm-testo) !important;
    background: var(--rm-sfondo) !important;
}
.art-sidebar1 ul.art-vmenu ul a {                     /* sottovoci */
    padding: 8px 16px 8px 30px !important;
    font-weight: normal !important;
    color: var(--rm-testo-sub) !important;
    background: var(--rm-sfondo-sub) !important;
}
.art-sidebar1 ul.art-vmenu ul ul a { padding-left: 44px !important; }
.art-sidebar1 ul.art-vmenu a:hover,
.art-sidebar1 ul.art-vmenu a.active { color: var(--rm-accento) !important; text-decoration: underline; }
.art-sidebar1 ul.art-vmenu a:before,
.art-sidebar1 ul.art-vmenu a:after { display: none !important; }   /* sfondi a immagine di Artisteer */

/* ---------------------------------------------------------------------
   Fino a 1024 px (tablet e telefoni): via le larghezze minime fisse
   --------------------------------------------------------------------- */
@media screen and (max-width: 1024px) {

    /* style.css e StileNuovo.css impongono min-width: 700px */
    body,
    .art-sheet {
        min-width: 0 !important;
    }

    /* Riflesso decorativo in alto */
    #art-page-background-glare-wrapper { display: none !important; }

    /* Immagini e campi mai più larghi del contenitore */
    img { max-width: 100%; height: auto; }
    input, select, textarea { max-width: 100%; box-sizing: border-box; }
    .TxtNote { width: 100% !important; max-width: 400px; }

    /* Le griglie larghe scorrono dentro l'area contenuti, non tutta la pagina */
    .art-content,
    .art-layout-cell.art-content {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* ---------------------------------------------------------------------
   Fino a 768 px (telefoni)
   --------------------------------------------------------------------- */
@media screen and (max-width: 768px) {

    .art-sheet-body { padding: 2px !important; }

    /* --- Intestazione: logo ridimensionato --- */
    div.art-header,
    .art-header:after {
        height: 64px !important;
    }
    .art-header:after { background-size: cover; }
    div.art-headerobject {
        left: 8px !important;
        top: 6px !important;
        width: calc(100% - 16px) !important;
        max-width: 444px;
        height: 52px !important;
        background-size: contain !important;
        background-position: left center !important;
    }
    .art-logo-name,
    .art-logo-name a {
        font-size: 18px !important;
        white-space: normal !important;
    }

    /* Pulsante "Menu" a tutta larghezza sul telefono */
    .menu-toggle { display: flex; width: 100%; }

    /* --- Master vecchie (menu orizzontale): a scomparsa solo sul telefono --- */
    ul.art-hmenu#menu-principale { display: none !important; }
    ul.art-hmenu#menu-principale.aperto { display: block !important; }

    /* --- Menu orizzontale delle master vecchie (art-hmenu) --- */
    .art-nav { height: auto !important; }
    .art-nav-outer { position: static !important; }
    ul.art-hmenu {
        float: none !important;
        width: 100% !important;
        margin: 4px 0 0 0 !important;
        padding: 0 !important;
        position: static !important;
        background: var(--rm-sfondo);
        border: 1px solid var(--rm-bordo);
    }
    ul.art-hmenu li {
        float: none !important;
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        position: static !important;
    }
    ul.art-hmenu a {
        display: block !important;
        float: none !important;
        height: auto !important;
        line-height: 1.3 !important;
        padding: 12px 14px !important;
        margin: 0 !important;
        background: none !important;
        color: var(--rm-testo) !important;
        text-align: left !important;
        border-top: 1px solid var(--rm-bordo);
        white-space: normal !important;
    }
    ul.art-hmenu .art-hmenu-separator,
    ul.art-hmenu a:before,
    ul.art-hmenu a:after,
    ul.art-hmenu ul:before,
    ul.art-hmenu ul:after { display: none !important; }
    ul.art-hmenu ul {
        display: none !important;
        visibility: visible !important;
        position: static !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        background: var(--rm-sfondo-sub) !important;
        box-shadow: none !important;
    }
    ul.art-hmenu ul a { padding-left: 28px !important; color: var(--rm-testo-sub) !important; }
    ul.art-hmenu li.sottomenu-aperto > ul { display: block !important; }
    ul.art-hmenu li.ha-sottomenu > a:after {
        display: inline !important;
        content: " \25BE";
        position: static !important;
        background: none !important;
    }
    ul.art-hmenu li.sottomenu-aperto > a:after { content: " \25B4"; }

    /* --- Popup di Style2.css (foto, voto, nomi): centrati nello schermo --- */
    #popup,
    #popupvoto,
    #popupnomi {
        position: fixed !important;
        left: 50% !important;
        top: 50% !important;
        transform: translate(-50%, -50%);
        margin: 0 !important;
        width: calc(100vw - 32px) !important;
        height: auto !important;
        max-height: calc(100vh - 32px);
        overflow-y: auto;
        box-sizing: border-box;
        z-index: 1000;
    }
    #popup     { max-width: 440px; }
    #popupvoto { max-width: 440px; }
    #popupnomi { max-width: 640px; }
    #hover, #hovervoto {
        position: fixed !important;
        inset: 0;
        z-index: 999;
    }
    /* pulsanti di chiusura più facili da toccare */
    #close, #closevoto, #closenomi {
        right: 4px !important;
        top: 4px !important;
        width: 32px !important;
        height: 32px !important;
        line-height: 32px !important;
        font-size: 14px !important;
    }

    /* --- Campi e pulsanti più comodi al tocco --- */
    input[type="text"],
    input[type="password"],
    input[type="email"],
    input[type="number"],
    input[type="date"],
    select,
    textarea {
        font-size: 16px !important;   /* sotto i 16px iPhone fa zoom */
    }
    input[type="submit"],
    input[type="button"] {
        min-height: 40px;
    }

    /* Calendario jQuery UI: non oltre il bordo dello schermo */
    .ui-datepicker { max-width: calc(100vw - 16px); }
}