/* ===========================================================
   TABERNA IOSEPHI - AJUDA E MAPA DO SITE
   Modulo de ajuda da Taberna Iosephi
   =========================================================== */

body.ajuda-aberta
{
    overflow:hidden;
}

#ajudaOverlay
{
    position:fixed;
    inset:0;
    z-index:30000;
    display:flex;
    align-items:center;
    justify-content:center;
    width:100vw;
    height:100vh;
    height:100dvh;
    padding:1vh 0;
    overflow:hidden;
    background:rgba(13,8,4,.78);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    isolation:isolate;
    contain:layout paint;
    transition:opacity .20s ease, visibility .20s ease;
}

#ajudaOverlay[hidden]
{
    display:none !important;
}

#ajudaOverlay.aberto
{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
}

.ajuda-pergaminho
{
    position:relative;
    width:min(106vw, calc(98dvh * 2 / 3), 530px);
    aspect-ratio:2 / 3;
    max-width:none;
    max-height:98dvh;
    overflow:visible;
    color:#382416;
    background:transparent;
    transform:scale(.94);
    opacity:0;
    transition:transform .25s ease-out, opacity .22s ease-out;
}

/*
   O PNG possui margens transparentes. A imagem cresce 15%,
   sem alterar o tamanho nem a posição dos textos e botões.
*/
.ajuda-pergaminho::before
{
    content:"";
    position:absolute;
    inset:0;
    z-index:0;
    pointer-events:none;
    background:url("../imagens/pergaminho-help.png") center / 100% 100% no-repeat;
    filter:drop-shadow(0 18px 34px rgba(0,0,0,.72));
    transform:scale(1.15);
    transform-origin:center;
}

#ajudaOverlay.aberto .ajuda-pergaminho
{
    transform:scale(1);
    opacity:1;
}

.ajuda-conteudo
{
    position:absolute;
    inset:17.5% 12.5% 8.5%;
    z-index:1;
    display:flex;
    flex-direction:column;
    min-width:0;
    min-height:0;
    text-align:center;
}

.ajuda-titulo
{
    margin:0 0 4.5%;
    color:#4b2c17;
    font:700 clamp(1.04rem, 4.5vw, 1.48rem)/1.08 Georgia,"Times New Roman",serif;
    letter-spacing:.035em;
    text-wrap:balance;
}

.ajuda-boas-vindas
{
    flex:1 1 auto;
    display:flex;
    flex-direction:column;
    justify-content:center;
    min-height:0;
    padding:0 1%;
    font:600 clamp(.72rem, 2.85vw, .98rem)/1.28 Georgia,"Times New Roman",serif;
}

.ajuda-boas-vindas p
{
    margin:0 0 .68em;
}

.ajuda-boas-vindas p:last-child
{
    margin-bottom:0;
}

.ajuda-destaque
{
    font-weight:700;
}

.ajuda-acoes-boas-vindas
{
    flex:0 0 auto;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:6px;
    width:100%;
    margin-top:4%;
}

.ajuda-acoes-boas-vindas .ajuda-botao-principal
{
    grid-column:1 / -1;
}

.ajuda-botao,
.mapa-item-acao
{
    border:1px solid rgba(74,40,18,.76);
    border-radius:5px;
    color:#f8eac9;
    background:linear-gradient(#84542b,#603817);
    box-shadow:
        0 2px 4px rgba(0,0,0,.23),
        inset 0 1px 0 rgba(255,239,197,.20);
    font-family:Georgia,"Times New Roman",serif;
    font-weight:700;
    cursor:pointer;
    touch-action:manipulation;
}

.ajuda-botao
{
    min-height:34px;
    padding:6px 7px;
    font-size:clamp(.58rem, 2.1vw, .75rem);
    line-height:1.08;
}

.ajuda-botao:hover,
.ajuda-botao:focus-visible,
.mapa-item-acao:hover,
.mapa-item-acao:focus-visible
{
    filter:brightness(1.15);
    outline:2px solid #f2d797;
    outline-offset:2px;
}

.ajuda-botao:disabled
{
    cursor:default;
    opacity:.38;
    filter:grayscale(.35);
}

/* MAPA */

.ajuda-mapa
{
    flex:1 1 auto;
    display:flex;
    flex-direction:column;
    min-height:0;
}

.mapa-cabecalho
{
    flex:0 0 auto;
}

.mapa-subtitulo
{
    margin:-1% 0 3.5%;
    font:italic 600 clamp(.70rem, 2.65vw, .90rem)/1.15 Georgia,"Times New Roman",serif;
}

.mapa-lista
{
    flex:1 1 auto;
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:6px;
    min-height:0;
}

.mapa-item-acao,
.mapa-item-informativo
{
    width:100%;
    min-height:0;
    padding:7px 9px;
    box-sizing:border-box;
    overflow-wrap:break-word;
    text-align:left;
}

.mapa-item-acao
{
    display:block;
}

.mapa-item-informativo
{
    border:1px solid rgba(93,57,29,.38);
    border-radius:5px;
    background:rgba(255,247,214,.24);
}

.mapa-item-titulo
{
    display:block;
    font-size:clamp(.70rem, 2.75vw, .93rem);
    line-height:1.05;
}

.mapa-item-descricao
{
    display:block;
    margin-top:2px;
    font-size:clamp(.59rem, 2.15vw, .74rem);
    font-weight:400;
    line-height:1.12;
}

.mapa-item-informativo .mapa-item-titulo,
.mapa-item-informativo .mapa-item-descricao
{
    color:#4c2d19;
}

.mapa-rodape
{
    flex:0 0 auto;
    margin-top:3.5%;
}

.mapa-pagina
{
    margin-bottom:4px;
    font:700 clamp(.58rem, 2vw, .72rem)/1 Georgia,"Times New Roman",serif;
    letter-spacing:.08em;
}

.mapa-navegacao
{
    display:grid;
    grid-template-columns:1fr .82fr 1fr;
    gap:5px;
}

.mapa-navegacao .ajuda-botao
{
    padding-left:3px;
    padding-right:3px;
}

/* A caneca, a tecla F1 e a primeira visita reacendem os pontos interativos. */
body.ajuda-hotspots-temporarios .hotspot:not(.sem-aladim)::before,
body.ajuda-hotspots-temporarios .hotspot:not(.sem-aladim)::after
{
    animation:ajudaPulsoHotspot .72s ease-in-out infinite alternate !important;
    opacity:1 !important;
}

body.ajuda-hotspots-temporarios .hotspot:not(.sem-aladim) .hotspot-area
{
    box-shadow:
        inset 0 0 0 2px rgba(255,226,125,.62),
        0 0 14px rgba(255,199,84,.36);
}

@keyframes ajudaPulsoHotspot
{
    from { opacity:.62; filter:brightness(.95); }
    to   { opacity:1; filter:brightness(1.24); }
}

/* Destaque dos três cartões de recém-lançados chamado pelo mapa. */
.recem-lancado-capa.mapa-destaque-recem-lancado img
{
    animation:mapaPulsoRecemLancado .72s ease-in-out infinite alternate !important;
}

@keyframes mapaPulsoRecemLancado
{
    from
    {
        filter:brightness(1.02) contrast(1.02) drop-shadow(0 0 3px rgba(255,213,112,.68));
    }

    to
    {
        filter:brightness(1.28) contrast(1.08) drop-shadow(0 0 12px rgba(255,202,75,.98));
    }
}

@media (prefers-reduced-motion:reduce)
{
    #ajudaOverlay,
    .ajuda-pergaminho
    {
        transition:none;
    }

    body.ajuda-hotspots-temporarios .hotspot:not(.sem-aladim)::before,
    body.ajuda-hotspots-temporarios .hotspot:not(.sem-aladim)::after,
    .recem-lancado-capa.mapa-destaque-recem-lancado img
    {
        animation:none !important;
    }
}

@media (max-height:620px)
{
    #ajudaOverlay
    {
        padding:0;
    }

    .ajuda-pergaminho
    {
        width:min(96vw, calc(98dvh * 2 / 3), 530px);
        max-height:98dvh;
    }

    .ajuda-conteudo
    {
        inset:15.5% 12% 6.5%;
    }

    .ajuda-titulo
    {
        margin-bottom:2.2%;
        font-size:clamp(.68rem, 3.6dvh, 1rem);
        line-height:1.02;
        letter-spacing:.02em;
    }

    .ajuda-boas-vindas
    {
        font-size:clamp(.50rem, 2.65dvh, .76rem);
        line-height:1.14;
    }

    .ajuda-boas-vindas p
    {
        margin-bottom:.34em;
    }

    .ajuda-acoes-boas-vindas
    {
        gap:3px;
        margin-top:2.2%;
    }

    .ajuda-botao
    {
        min-height:22px;
        padding:3px 4px;
        font-size:clamp(.46rem, 2.15dvh, .62rem);
        line-height:1.02;
    }
}


/* ===========================================================
   CANECA "QUER AJUDA?" - DICAS DO JORNALEIRO
   =========================================================== */
.ajuda-jornaleiro
{
    flex:1 1 auto;
    display:flex;
    flex-direction:column;
    min-height:0;
}

.jornaleiro-introducao
{
    margin:-1% 0 3%;
    font:600 clamp(.70rem, 2.55vw, .88rem)/1.2 Georgia,"Times New Roman",serif;
}

.jornaleiro-modos
{
    display:grid;
    grid-template-columns:1fr;
    gap:7px;
    width:100%;
}

.jornaleiro-modo
{
    width:100%;
    padding:8px 11px;
    border:1px solid rgba(74,40,18,.52);
    border-radius:7px;
    color:#4b2c17;
    background:rgba(255,247,214,.30);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.28);
    font-family:Georgia,"Times New Roman",serif;
    text-align:left;
    cursor:pointer;
    touch-action:manipulation;
}

.jornaleiro-modo > span
{
    display:block;
    font-size:clamp(.67rem, 2.55vw, .86rem);
    font-weight:700;
    line-height:1.05;
}

.jornaleiro-modo > small
{
    display:block;
    margin-top:2px;
    font-size:clamp(.56rem, 2.05vw, .70rem);
    font-weight:400;
    line-height:1.12;
}

.jornaleiro-modo:hover,
.jornaleiro-modo:focus-visible
{
    filter:brightness(1.08);
    outline:2px solid #9a6632;
    outline-offset:1px;
}

.jornaleiro-modo.ativo
{
    border-color:rgba(74,40,18,.88);
    background:rgba(132,84,43,.22);
    box-shadow:
        inset 0 0 0 2px rgba(96,56,23,.28),
        0 1px 3px rgba(0,0,0,.12);
}

.jornaleiro-status
{
    margin:3.5% 0 0;
    min-height:2.3em;
    color:#5b3a20;
    font:italic 600 clamp(.60rem, 2.20vw, .76rem)/1.16 Georgia,"Times New Roman",serif;
}

.ajuda-acoes-caneca
{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:6px;
    margin-top:auto;
    padding-top:3.5%;
}

@media (max-height:620px)
{
    .jornaleiro-modos
    {
        gap:4px;
    }

    .jornaleiro-modo
    {
        padding:5px 8px;
    }

    .jornaleiro-status
    {
        margin-top:2%;
    }

    .ajuda-acoes-caneca
    {
        padding-top:2%;
    }
}