/*==========================================================
  TABERNA IOSEPHI - ACESSIBILIDADE 1.4.1d
  FOCO VISIVEL PARA NAVEGACAO POR TECLADO
==========================================================*/

/*
   O foco precisa permanecer perceptivel tanto sobre madeira clara
   quanto sobre as cenas noturnas. Para os hotspots transparentes,
   combinamos preenchimento leve + contorno claro + halo escuro.
*/
.hotspot-area:focus-visible,
body.taberna-navegacao-teclado .hotspot-area:focus {
    outline:4px solid #fff3a6 !important;
    outline-offset:2px;
    background:rgba(255,224,82,.30) !important;
    box-shadow:
        inset 0 0 0 3px rgba(61,32,8,.95),
        inset 0 0 0 6px rgba(255,239,154,.92),
        0 0 0 3px rgba(39,20,6,.92),
        0 0 16px 7px rgba(255,222,78,.88) !important;
    filter:brightness(1.16) drop-shadow(0 0 5px rgba(255,230,105,.95));
}

/*
   Rede de seguranca: alguns recortes por clip-path escondem parte do
   outline da area. O contorno do recipiente garante que o objeto
   continue localizavel mesmo nesses casos.
*/
body.taberna-navegacao-teclado .hotspot:focus-within {
    box-shadow:
        0 0 0 3px rgba(42,21,6,.96),
        0 0 0 7px rgba(255,226,84,.98),
        0 0 18px 9px rgba(255,221,75,.72);
    border-radius:4px;
}

/*
   PRANCHETA - MENU e MAPA sao dois botoes recortados por clip-path.
   O contorno generico do .hotspot:focus-within desenhava a moldura da
   prancheta inteira. Aqui ele e desligado somente para a prancheta.
*/
body.taberna-navegacao-teclado #prancheta1.hotspot:focus-within {
    box-shadow:none !important;
    border-radius:0;
}

/*
   O foco de MENU/MAPA preserva a sombra amarela aprovada.
   O contorno vetorial verdadeiro de cada terco e desenhado pelo SVG
   criado em mapa-taberna.js.
*/
#prancheta1 .prancheta-acao:focus-visible,
body.taberna-navegacao-teclado #prancheta1 .prancheta-acao:focus {
    outline:none !important;
    box-shadow:none !important;
    background:rgba(255,224,82,.18);
    color:#4f260e;
    filter:
        drop-shadow(0 0 1px rgba(45,23,7,1))
        drop-shadow(0 0 3px rgba(255,244,174,1))
        drop-shadow(0 0 7px rgba(255,220,69,.96))
        brightness(1.14);
}

/* Itens do MENU passam a ter um marcador inequivoco de foco. */
#pranchetaMenu .menuItem:focus-visible,
body.taberna-navegacao-teclado #pranchetaMenu .menuItem:focus {
    outline:4px solid #ffe36e !important;
    outline-offset:2px;
    border-radius:5px;
    box-shadow:0 0 0 2px rgba(48,25,7,.92);
}

/*
   Controles da mesa que nao sao .hotspot-area: capas, panfletos,
   frase do dia e botoes de zoom.
*/
body.taberna-navegacao-teclado :where(
    .recem-lancado-capa,
    #fraseDiaCampo,
    #zoomSalaControles button
):focus {
    outline:4px solid #fff3a6 !important;
    outline-offset:3px;
    box-shadow:
        0 0 0 3px rgba(42,21,6,.96),
        0 0 16px 8px rgba(255,221,75,.82) !important;
}

/*
   Rede de seguranca para controles HTML sem estilo de foco proprio.
*/
body.taberna-navegacao-teclado :where(
    button,
    a[href],
    input,
    select,
    textarea,
    [tabindex]:not([tabindex="-1"])
):focus {
    outline:4px solid #fff3a6;
    outline-offset:3px;
    box-shadow:0 0 0 2px rgba(42,21,6,.90);
}

/* Nao desenha foco em elementos desabilitados. */
body.taberna-navegacao-teclado :where(button, input, select, textarea):disabled {
    outline:none;
    box-shadow:none;
}