/* ===========================================================
   TABERNA IOSEPHI - PRANCHETA RESPONSIVA
   Carregar DEPOIS de css/estilo.css
   =========================================================== */

#pranchetaMenu{
    position:absolute;
    display:none;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);

    width:min(460px,92vw);
    height:min(720px,92vh);
    height:min(720px,92dvh);

    padding:52px 58px 46px;

    background-image:url("../imagens/menu.png");
    background-repeat:no-repeat;
    background-position:center;
    background-size:100% 100%;

    overflow:hidden;
    z-index:5000;

    flex-direction:column;
    color:#3d2b18;

    animation:abreMenu .25s ease-out;
}

#pranchetaMenu .menuCabecalho{
    flex:0 0 auto;
    min-height:76px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:0 8px 12px;
}

#pranchetaMenu .menuCabecalho h2,
#pranchetaMenu h2{
    margin:0;
    padding:0;
    text-align:center;
    font-family:Georgia,"Times New Roman",serif;
    font-size:clamp(22px,2.2vw,30px);
    line-height:1.15;
    letter-spacing:1.5px;
    color:#3d2b18;
}

#pranchetaMenu .menuLista{
    flex:1 1 auto;
    min-height:0;

    display:grid;
    grid-template-columns:minmax(0,1fr);
    align-content:start;
    gap:2px;

    overflow-y:auto;
    overflow-x:hidden;

    padding:4px 10px 8px 4px;
    scrollbar-width:thin;
    scrollbar-color:#8b6336 transparent;
}

#pranchetaMenu .menuLista::-webkit-scrollbar{
    width:7px;
}

#pranchetaMenu .menuLista::-webkit-scrollbar-track{
    background:transparent;
}

#pranchetaMenu .menuLista::-webkit-scrollbar-thumb{
    background:rgba(107,76,42,.58);
    border-radius:10px;
}

#pranchetaMenu .menuRodape{
    flex:0 0 auto;
    min-height:54px;
    display:flex;
    align-items:flex-end;
    padding:10px 4px 0;
    border-top:1px solid rgba(107,76,42,.18);
}

#pranchetaMenu .menuItem{
    position:static;
    left:auto;
    right:auto;
    top:auto;
    bottom:auto;

    display:flex;
    align-items:center;
    gap:4px;

    width:100%;
    min-width:0;
    margin:0;
    padding:7px 8px;

    background:transparent;
    border:0;

    cursor:pointer;
    text-align:left;

    font-family:Georgia,"Times New Roman",serif;
    font-size:18px;
    font-weight:bold;
    line-height:1.25;
    letter-spacing:.2px;
    color:#3d2b18;

    transition:color .18s ease, transform .18s ease, background-color .18s ease;
}

#pranchetaMenu .menuItem:first-of-type,
#pranchetaMenu .menuItem:last-of-type{
    position:static;
    left:auto;
    bottom:auto;
    margin:0;
}

#pranchetaMenu .menuItem:hover,
#pranchetaMenu .menuItem:focus-visible{
    color:#7a3d12;
    transform:translateX(5px);
    background:rgba(139,69,19,.055);
    outline:none;
}

#pranchetaMenu .menuIcone{
    flex:0 0 1.15em;
    width:1.15em;
    min-width:1.15em;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    font-size:.92em;
    line-height:1;
}

#pranchetaMenu .menuIconeImagem{
    display:block;
    width:1em;
    height:auto;
    transform:translateX(0.02em);
}

#pranchetaMenu .menuTexto{
    min-width:0;
    flex:1 1 auto;
    overflow-wrap:anywhere;
    padding-top:0;
}

#pranchetaMenu .menuRodape .menuItem{
    width:auto;
    padding:7px 8px 5px;
}

/* Celular em pe */
@media (orientation:portrait) and (max-width:600px){
    #pranchetaMenu{
        width:94vw;
        height:94vh;
        height:94dvh;
        padding:42px 34px 34px;
    }

    #pranchetaMenu .menuCabecalho{
        min-height:64px;
        padding-bottom:8px;
    }

    #pranchetaMenu .menuCabecalho h2,
    #pranchetaMenu h2{
        font-size:22px;
    }

    #pranchetaMenu .menuItem{
        padding:6px 5px;
        font-size:16.5px;
    }

    #pranchetaMenu .menuRodape{
        min-height:48px;
        padding-top:7px;
    }
}

/* Celular e tablet deitados */
@media (orientation:landscape) and (max-height:700px),
       (orientation:landscape) and (pointer:coarse){
    #pranchetaMenu{
        width:min(920px,94vw);
        height:91vh;
        height:91dvh;
        padding:26px 48px 24px;
    }

    #pranchetaMenu .menuCabecalho{
        min-height:48px;
        padding-bottom:6px;
    }

    #pranchetaMenu .menuCabecalho h2,
    #pranchetaMenu h2{
        font-size:20px;
        letter-spacing:1px;
    }

    #pranchetaMenu .menuLista{
        grid-template-columns:repeat(2,minmax(0,1fr));
        column-gap:28px;
        row-gap:0;
        padding:2px 8px 4px 2px;
    }

    #pranchetaMenu .menuItem{
        padding:4px 5px;
        font-size:15.5px;
        line-height:1.2;
    }

    #pranchetaMenu .menuRodape{
        min-height:40px;
        padding-top:5px;
    }
}

/* Telas muito baixas */
@media (max-height:430px) and (orientation:landscape){
    #pranchetaMenu{
        width:96vw;
        height:94vh;
        height:94dvh;
        padding:18px 36px 16px;
    }

    #pranchetaMenu .menuCabecalho{
        min-height:38px;
    }

    #pranchetaMenu .menuCabecalho h2,
    #pranchetaMenu h2{
        font-size:18px;
    }

    #pranchetaMenu .menuItem{
        padding:3px 4px;
        font-size:14px;
    }

    #pranchetaMenu .menuRodape{
        min-height:34px;
    }
}

/* ===========================================================
   20/08/2026 - PORTRAIT/LANDSCAPE + SAIDA FIXA
   Portrait : maior tamanho que cabe inteiro na viewport.
   Landscape: largura de leitura; a prancheta pode ultrapassar
              a altura e o overlay passa a rolar verticalmente.
   A portinha fixa fica fora deste elemento.
   =========================================================== */

#pranchetaOverlay {
    position:fixed;
    inset:0;
    z-index:4900;
    display:none;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    padding:10px;
    background:transparent;
    overscroll-behavior:contain;
}

#pranchetaOverlay.aberto {
    display:flex;
}

#pranchetaOverlay #pranchetaMenu {
    position:relative;
    left:auto;
    top:auto;
    transform:none;
    flex:0 0 auto;
    margin:0;
    transform-origin:center center;
    will-change:transform;
}

@media (pointer:coarse) and (orientation:portrait) {
    #pranchetaOverlay {
        align-items:center;
        justify-content:center;
        overflow:hidden;
        padding:10px;
    }
}

@media (pointer:coarse) and (orientation:landscape) {
    #pranchetaOverlay {
        align-items:center;
        justify-content:flex-start;
        flex-direction:column;
        overflow-y:auto;
        overflow-x:hidden;
        padding:10px 10px 86px;
        -webkit-overflow-scrolling:touch;
    }

    #pranchetaOverlay #pranchetaMenu {
        margin:0 auto 24px;
    }
}

/* Classes aplicadas pelo JS tambem cobrem tablets com mouse/caneta. */
#pranchetaOverlay.prancheta-portrait-fit {
    align-items:center;
    justify-content:center;
    overflow:hidden;
    padding:10px;
}

#pranchetaOverlay.prancheta-landscape-leitura {
    align-items:center;
    justify-content:flex-start;
    flex-direction:column;
    overflow-y:auto;
    overflow-x:hidden;
    padding:10px 10px 86px;
    -webkit-overflow-scrolling:touch;
}

#pranchetaOverlay.prancheta-landscape-leitura #pranchetaMenu {
    margin:0 auto 24px;
}

#pranchetaMenu .menuRodape:empty {
    display:none;
}


/* 20/08/2026 - zoom touch landscape: o navegador nao assume a pincada. */
#pranchetaOverlay,
#pranchetaMenu { touch-action:none; }