/*==========================================================
  TABERNA IOSEPHI - MAPA DA TABERNA - VERSAO 1.3.3
==========================================================*/

#prancheta1 .hotspot-area {
    pointer-events:none !important;
}

/*
   Composicao da prancheta em tres tercos:
     superior -> selo oficial
     central  -> MENU
     inferior -> MAPA
*/
#prancheta1 .prancheta-selo {
    position:absolute;
    z-index:6;
    left:55%;
    top:24.7%;
    width:57%;
    height:auto;
    aspect-ratio:1 / 1;
    object-fit:cover;
    border-radius:50%;
    pointer-events:none;
    user-select:none;
    transform:
        translate(-50%, -50%)
        rotate(var(--prancheta-angulo, 7deg));
    transform-origin:center center;
    box-shadow:0 1px 2px rgba(36,21,11,.22);
}

#prancheta1 .prancheta-acao {
    position:absolute;
    inset:0;
    display:block;
    margin:0;
    padding:0;
    border:0;
    background:transparent;
    color:#24150b;
    font-family:Georgia,"Times New Roman",serif;
    font-weight:900;
    letter-spacing:.045em;
    text-shadow:
        0 1px 0 rgba(255,248,220,.92),
        0 0 1px rgba(255,248,220,.72),
        0 1px 2px rgba(36,21,11,.28);
    cursor:pointer;
    pointer-events:auto;
    z-index:7;
    -webkit-tap-highlight-color:transparent;
}

#prancheta1 .prancheta-acao:hover,
#prancheta1 .prancheta-acao:focus-visible {
    color:#5e2f14;
    background:rgba(126,73,29,.055);
    outline:none;
}

#prancheta1 .prancheta-acao:focus-visible {
    filter:drop-shadow(0 0 2px rgba(238,203,94,.95));
}


/* Contorno vetorial verdadeiro para o foco de MENU e MAPA.
   O SVG usa exatamente os mesmos pontos que geram os clip-paths dos botoes,
   por isso o contorno acompanha a perspectiva real de cada terco. */
#prancheta1 .prancheta-foco-contornos {
    position:absolute;
    inset:0;
    z-index:9;
    width:100%;
    height:100%;
    overflow:visible;
    pointer-events:none;
}

#prancheta1 .prancheta-foco-poligono {
    fill:none;
    opacity:0;
    pointer-events:none;
}

#prancheta1 .prancheta-foco-externo {
    stroke:rgba(48,25,7,.98);
    stroke-width:7;
}

#prancheta1 .prancheta-foco-interno {
    stroke:#fff3a6;
    stroke-width:3;
    filter:drop-shadow(0 0 4px rgba(255,220,69,.98));
}

#prancheta1[data-prancheta-foco="menu"] .prancheta-foco-menu,
#prancheta1[data-prancheta-foco="mapa"] .prancheta-foco-mapa {
    opacity:1;
}

#prancheta1 .prancheta-acao span {
    position:absolute;
    left:50%;
    display:block;
    font-size:clamp(18px, 2.00vw, 30px);
    line-height:1;
    white-space:nowrap;
    pointer-events:none;
    transform-origin:center center;
}

/* Centro geometrico do terco central. */
#prancheta1 .prancheta-acao-menu span {
    top:58%;
	left:51%;
    transform:
        translate(-50%, -50%)
        rotate(var(--prancheta-angulo, 7deg));
}

/* Centro geometrico do terco inferior. */
#prancheta1 .prancheta-acao-mapa span {
    top:76%;
	left:47%;
    transform:
        translate(-50%, -50%)
        rotate(var(--prancheta-angulo, 7deg));
}

@media (max-width:760px) {
    #prancheta1 .prancheta-selo {
        width:60%;
    }

    #prancheta1 .prancheta-acao span {
        font-size:clamp(16px, 4.40vw, 25px);
    }
}


/*==========================================================
  VISUALIZADOR PDF.JS DO MAPA
==========================================================*/

body.mapa-taberna-aberto {
    overflow:hidden;
}

.mapa-taberna-overlay {
    position:fixed;
    inset:0;
    z-index:15000;
    display:none;
    align-items:center;
    justify-content:center;
    padding:18px;
    box-sizing:border-box;
    background:rgba(18,12,8,.80);
    backdrop-filter:blur(2px);
}

.mapa-taberna-overlay.aberto {
    display:flex;
}

.mapa-taberna-moldura {
    position:relative;
    display:flex;
    flex-direction:column;
    width:min(96vw, 1120px);
    height:min(94vh, 920px);
    min-height:360px;
    overflow:hidden;
    border:2px solid #8c6734;
    border-radius:12px;
    background:#262421;
    box-shadow:
        0 18px 55px rgba(0,0,0,.55),
        inset 0 0 0 2px rgba(238,203,94,.20);
}

.mapa-taberna-barra {
    position:relative;
    z-index:8;
    flex:0 0 auto;
    min-height:56px;
    display:flex;
    align-items:center;
    gap:14px;
    padding:8px 64px 8px 16px;
    box-sizing:border-box;
    background:#373531;
    color:#f4e7c5;
    border-bottom:1px solid rgba(238,203,94,.22);
}

.mapa-taberna-titulo {
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font:700 15px/1.2 Georgia,"Times New Roman",serif;
    letter-spacing:.035em;
}

.mapa-taberna-pagina {
    flex:0 0 auto;
    color:#e8d9b8;
    font:700 13px/1.2 Arial,sans-serif;
}

.mapa-taberna-controles {
    margin-left:auto;
    display:flex;
    align-items:center;
    gap:5px;
}

.mapa-taberna-zoom {
    width:34px;
    height:34px;
    padding:0;
    border:1px solid rgba(255,244,210,.22);
    border-radius:6px;
    background:#494641;
    color:#fff3d3;
    font:700 23px/30px Arial,sans-serif;
    cursor:pointer;
}

.mapa-taberna-zoom-valor {
    min-width:48px;
    text-align:center;
    font:700 12px/1 Arial,sans-serif;
    color:#f5e4bc;
}

.mapa-taberna-fechar {
    position:absolute;
    top:8px;
    right:10px;
    z-index:10;
    width:42px;
    height:42px;
    padding:0;
    border:1px solid rgba(255,244,210,.38);
    border-radius:50%;
    background:#70451f;
    color:#fff3d3;
    font:700 30px/36px Georgia,"Times New Roman",serif;
    text-align:center;
    cursor:pointer;
    box-shadow:0 2px 8px rgba(0,0,0,.28);
}

.mapa-taberna-fechar:hover,
.mapa-taberna-fechar:focus-visible,
.mapa-taberna-zoom:hover,
.mapa-taberna-zoom:focus-visible {
    background:#805329;
    outline:2px solid #eecb5e;
    outline-offset:2px;
}

.mapa-taberna-rolagem {
    position:relative;
    flex:1 1 auto;
    min-height:0;
    overflow:auto;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
    background:#222;
    scrollbar-gutter:stable;
}

.mapa-taberna-estado {
    position:absolute;
    z-index:20;
    left:50%;
    top:28px;
    transform:translateX(-50%);
    padding:10px 14px;
    border-radius:7px;
    background:rgba(38,29,20,.90);
    color:#f5e4bc;
    font:600 14px/1.25 Arial,sans-serif;
    text-align:center;
    box-shadow:0 2px 8px rgba(0,0,0,.30);
}

.mapa-taberna-estado.erro {
    color:#fff4e5;
    background:#6a2c22;
}

.mapa-taberna-paginas {
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:16px;
    width:max-content;
    min-width:100%;
    padding:16px;
    box-sizing:border-box;
}

.mapa-pdf-pagina {
    position:relative;
    width:min(560px, 88vw);
    max-width:none;
    flex:0 0 auto;
    background:#fff;
    box-shadow:0 3px 12px rgba(0,0,0,.42);
}

.mapa-pdf-superficie {
    position:relative;
    width:100% !important;
    height:auto !important;
    aspect-ratio:var(--pagina-proporcao);
}

.mapa-pdf-canvas {
    display:block;
    width:100% !important;
    height:100% !important;
}

.mapa-pdf-link {
    position:absolute;
    z-index:5;
    display:block;
    opacity:0;
    cursor:pointer;
    -webkit-tap-highlight-color:rgba(238,203,94,.30);
}

.mapa-pdf-link:focus-visible {
    opacity:1;
    outline:2px solid #eecb5e;
    background:rgba(238,203,94,.16);
}

@media (max-width:760px) {
    .mapa-taberna-overlay {
        padding:4px;
    }

    .mapa-taberna-moldura {
        width:100%;
        height:calc(100% - 2px);
        min-height:0;
        border-radius:8px;
    }

    .mapa-taberna-barra {
        min-height:52px;
        gap:8px;
        padding:6px 58px 6px 10px;
    }

    .mapa-taberna-titulo {
        font-size:12px;
    }

    .mapa-taberna-pagina {
        font-size:12px;
    }

    .mapa-taberna-controles {
        gap:2px;
    }

    .mapa-taberna-zoom {
        width:30px;
        height:30px;
        font-size:21px;
        line-height:26px;
    }

    .mapa-taberna-zoom-valor {
        min-width:42px;
        font-size:11px;
    }

    .mapa-taberna-fechar {
        top:6px;
        right:7px;
        width:40px;
        height:40px;
        font-size:29px;
        line-height:34px;
    }

    .mapa-taberna-paginas {
        gap:10px;
        padding:8px 4px 18px;
    }

    .mapa-pdf-pagina {
        width:96vw;
    }

}

/* Destaque curto para destinos do mapa que nao abrem uma janela. */
.mapa-destino-pulso {
    animation:mapaDestinoPulso .72s ease-in-out 4;
    filter:drop-shadow(0 0 5px rgba(238,203,94,.95))
           brightness(1.18);
}

@keyframes mapaDestinoPulso {
    0%,100% {
        filter:drop-shadow(0 0 2px rgba(238,203,94,.25))
               brightness(1);
    }
    50% {
        filter:drop-shadow(0 0 8px rgba(238,203,94,1))
               brightness(1.30);
    }
}

@media (prefers-reduced-motion:reduce) {
    .mapa-destino-pulso {
        animation:none;
        filter:drop-shadow(0 0 7px rgba(238,203,94,.95))
               brightness(1.18);
    }
}

/* Índice e gavetas com texto acessível e conteúdo do catálogo. */
.mapa-categorias { box-sizing:border-box; padding:6%; color:#34251b; font-family:Georgia,serif; }
.mapa-categorias h2 { text-align:center; font-size:1.5em; }
.mapa-categorias nav { display:grid; gap:8px; }
.mapa-categorias-link { display:block; padding:10px 12px; color:inherit; background:#f5f0e7; border:1px solid #c5b392; text-decoration:none; }
.mapa-categorias-link:hover, .mapa-categorias-link:focus-visible { outline:3px solid #775224; outline-offset:1px; }
.mapa-categorias p { line-height:1.4; }

/* 1.5 - índice dos objetos históricos no Mapa. */
.mapa-objetos nav {
    grid-template-columns:repeat(2, minmax(0, 1fr));
}
.mapa-objetos .mapa-categorias-link {
    padding:8px 10px;
    font-size:.94em;
}
@media (max-width:520px) {
    .mapa-objetos nav {
        grid-template-columns:1fr;
    }
}