/*
 * Additions to the original IPASLI styles (estilo.css / contraste.css).
 * Same look; accessibility, a single <h1> per page and the new components.
 */

/* Header texts that were <h1>/<h2> in the old frame (selectors moved to .hx1/.hx2) */
.hx1, .hx2 { display: block; margin-top: 0; margin-bottom: .5rem; font-weight: 500; line-height: 1.2; }
.menu ul li .hx1, .menu .sub-menu .hx2 { display: block; }
.top p.hx1, .top p.hx2 { margin-bottom: 0; }
.interna h1.secao, .interna h1.titulo { line-height: 1.2; }
.interna h1.titulo { margin-top: 0; }

/* Skip links: visible only on keyboard focus */
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 10000; background: #0a3a7c; color: #fff !important; padding: .6rem 1rem; font-weight: bold; }
.skip-link:focus { left: .5rem; top: .5rem; }

/* Visible focus for keyboard users */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, .accordion-button:focus-visible {
    outline: 3px solid #ffbf47 !important; outline-offset: 2px; box-shadow: none !important;
}
main:focus, footer:focus, nav:focus { outline: none; }

/* Mobile menu buttons (were <a href="javascript:;">) */
.btn-menu, .btn-menu-close { background: none; border: 0; padding: 0 .5rem; color: inherit; font-size: inherit; }

/* Accessibility toolbar (were <a> without href) */
.acessibilidade-footer button { background: none; border: 0; padding: 0; display: block; cursor: pointer; }

/* Side "button" items rendered as links */
.accordion-button.esconde-botao { text-decoration: none; }
.accordion-button.esconde-botao::after { display: none; }

/* Honeypot of the forms */
.hp-field { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; overflow: hidden; }

/* Responsive video */
.video-embed { position: relative; padding-top: 56.25%; margin-bottom: 1rem; }
.video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Files (PDFs) grouped by type and year */
.arquivos .accordion-button { font-family: 'Conv_GILROY-MEDIUM', sans-serif; }
.arquivos .lista-pdf ul { list-style: none; padding: 0; margin: 0; }
.arquivos .lista-pdf li { margin-bottom: .4rem; }
.arquivos .lista-pdf a.btn { display: flex; gap: .6rem; align-items: center; text-align: left; width: 100%; font-size: 15px; white-space: normal; }
.arquivos .lista-pdf a.btn i { font-size: 1.2rem; flex: 0 0 auto; }
.arquivos-sem-ano { margin-bottom: 1rem; }

/* Search results */
.resultados-busca { list-style: none; padding: 0; }
.resultados-busca li { padding: .8rem 0; border-bottom: 1px solid rgba(0,0,0,.1); }
.resultados-busca .rotulo { display: inline-block; font-size: 12px; text-transform: uppercase; opacity: .75; }
.resultados-busca h2 { font-size: 18px; margin: .2rem 0; border: 0 !important; padding: 0 !important; color: inherit !important; }

/* Site map */
.mapa-site ul { padding-left: 1.2rem; }

/* Cookie bar (LGPD) */
.cookie-bar { position: fixed; left: 1rem; right: 1rem; bottom: 1rem; z-index: 9999; max-width: 720px; margin: 0 auto; background: #0a3a7c; color: #fff; padding: 1rem 1.2rem; border-radius: 10px; box-shadow: 0 6px 24px rgba(0,0,0,.25); display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; }
.cookie-bar[hidden] { display: none; }
.cookie-bar p { margin: 0; flex: 1 1 320px; font-size: 14px; }
.cookie-bar a { color: #fff !important; text-decoration: underline !important; }

/* Footer address */
.contato-rodape { font-style: normal; font-size: 13px; margin: .6rem 0 0; }

/* Suspended section notice */
.aviso-suspensao { border-left: 4px solid #0a3a7c; background: rgba(10,58,124,.06); padding: 1rem; }

/* Contracts */
.contratos .list-group-item { background: transparent; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* Side "button" items (DIRETORIA, NOTÍCIAS...) are links now: keep the white label */
.menu_direita .accordion-header a.esconde-botao,
.menu_esquerda .accordion-header a.esconde-botao { color: #fff !important; }

/* Footer links on the dark background */
footer .direitos a { color: inherit; text-decoration: underline; }

/* The old site set 16px inline on .txtFonte links by script (accessibility font size); same size here, by CSS */
@media (min-width: 991px) {
    .menu a.txtFonte { font-size: 16px !important; }
}

/* Footer texts on the dark blue background: address and links were #093160 on #093160 (invisible) */
footer .contato-rodape,
footer .m .direitos,
footer .m .direitos a { color: #fff !important; }

/* Quick access cards (tablet/mobile): the fixed 80px height cut the label or pushed it over the icon */
@media only screen and (max-width: 990px) {
    .acesso-rapido-home li a {
        display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
        height: auto; min-height: 80px; line-height: 1.25;
    }
    .acesso-rapido-home li img { max-height: 40px; width: auto; margin: 0 auto; }
}

/* Top bar shortcuts: white only on desktop in estilo.css; on tablet they were #093160 on #093160 */
.top .informacao-top,
.top .transparencia-top,
.top .ouvidoria-top { color: #fff !important; }

/* =========================================================================
 * Mobile review (phones)
 * ========================================================================= */
@media only screen and (max-width: 579px) {
    /* Off-canvas menu: only #menu slides; its column (also ".menu") stays put.
       Before, both were pushed off-screen and the button only showed the white overlay. */
    /* z-index auto: the column is a flex item, so z-index 999 trapped the panel under the overlay */
    header .menu:not(#menu) { position: static; transform: none; width: auto; background: none; z-index: auto; }
    #menu {
        position: fixed; top: 0; bottom: 0; left: 0; z-index: 100002;
        width: min(85%, 320px); overflow-y: auto; overscroll-behavior: contain;
        visibility: hidden; transition: transform .3s ease-in-out, visibility 0s linear .3s;
    }
    #menu.open { visibility: visible; transform: translateX(0); transition: transform .3s ease-in-out; }
    .menu-bg { position: fixed; inset: 0; height: auto !important; z-index: 100001; background: rgba(0, 0, 0, .55); }
    body.menu-aberto { overflow: hidden; }
    #menu .close { margin: 8px; }
    .btn-menu-close { width: 44px; height: 44px; font-size: 24px; color: #fff; }
    .menu-icon .btn-menu { min-width: 44px; min-height: 44px; font-size: 22px; }
    #menu ul { width: 100%; }
    #menu li { padding-right: 10px !important; }
    #menu li .hx1 a, #menu .form-menu .button {
        display: block; width: 100%; padding: 10px 0; font-size: 15px !important; font-weight: bold;
        text-transform: uppercase; text-align: left; background: none !important; border: 0;
    }
    /* "Validar Documentos" was dark blue on the dark blue panel (invisible) */
    #menu .form-menu { display: block !important; }
    #menu .form-menu .button { color: #fff !important; }
    /* Portal do Segurado submenu: closed until tapped (aria-expanded matches) */
    #menu .sub-menu { display: none; margin: 0 0 6px !important; padding-left: 12px; border-left: 2px solid rgba(255, 255, 255, .35); }
    #menu .sub-menu li { margin-bottom: 0 !important; padding: 0 !important; }
    #menu .sub-menu .hx2 a { display: block; padding: 8px 0; font-size: 15px !important; text-align: left; text-transform: none; color: #fff !important; background: none !important; }
    #menu .has-sub > .hx1 > a::after { content: "\f078"; font-family: "Font Awesome 6 Free"; font-weight: 900; float: right; font-size: 12px; transition: transform .2s; }
    #menu .has-sub > .hx1 > a[aria-expanded="true"]::after { transform: rotate(180deg); }
    #menu .form-busca-mobile { display: flex; gap: 6px; margin-top: 8px; }
    #menu .form-busca-mobile input { flex: 1; width: auto !important; margin: 0; font-size: 16px; }

    /* Floating buttons: stacked in the bottom-right corner instead of covering the middle of the page */
    .icon-bar { top: auto; right: 15px; bottom: 126px; }
    .icon-bar a { width: 44px; height: 44px; }
    .acessibilidade-footer { top: auto; right: 15px; bottom: 70px; padding: 0; width: 44px; display: flex; flex-direction: column; align-items: center; }
    .acessibilidade-footer > :not(.acessibilidade-toggle) { display: none; }
    .acessibilidade-footer.aberto { padding-top: 8px; }
    .acessibilidade-footer.aberto > :not(.acessibilidade-toggle) { display: flex; align-items: center; justify-content: center; width: 44px; height: 40px; margin: 0; }
    .acessibilidade-footer .acessibilidade-toggle { display: flex !important; align-items: center; justify-content: center; width: 44px; height: 44px; }
    .acessibilidade-footer.aberto .acessibilidade-toggle { opacity: .75; }
    /* white ring: the dark button disappeared over the dark blue menus */
    .acessibilidade-footer { box-shadow: 0 0 0 2px #fff, 0 4px 14px rgba(0, 0, 0, .25); }
    .acessibilidade-footer.aberto { border-radius: 22px; }
    /* Share buttons (news): bigger touch targets */
    .compartilhar a { min-width: 40px; min-height: 40px; display: inline-flex !important; align-items: center; justify-content: center; }
    .scroll-top.active { bottom: 15px; }
}

/* Phones and small tablets (stacked columns) */
@media (max-width: 767.98px) {
    /* Blocks with padding-right:0 (made for the desktop grid) stuck out 12px past the right edge */
    .home .padding-right, .agenda-home .calendario, .acesso-a-informacao-home .acesso-a-informacao {
        padding-right: calc(var(--bs-gutter-x) * .5) !important;
    }
    /* Quick access: two cards per row instead of ten full-width cards */
    .acesso-rapido-home li a { height: 100%; min-height: 96px; font-size: 14px; padding: 10px 6px; }
    /* Banner dots: bigger touch area, same look */
    .banner .carousel-indicators [data-bs-target] {
        box-sizing: content-box; width: 14px !important; height: 14px !important; margin: 0 2px;
        border: 10px solid transparent !important; background-clip: padding-box; border-radius: 50%;
    }
}

/* Accordion headers inside pages are h2/h3: the section-title look (.interna h2: border,
   20px margin) left an empty strip under each one (Contratos, PDF groups) */
.interna .accordion-header { margin: 0 !important; padding: 0 !important; border: 0 !important; }

/* Tender pages: the section title sits on dark blue; .interna h1.secao made it light blue (unreadable) */
.licitacoes h1.secao { color: #fff !important; }

/* PDF buttons: 25px (tablet/phone) made each file name fill the screen */
@media only screen and (max-width: 990px) {
    .interna .lista-pdf a, .interna .lista-pdf a.btn { font-size: 15px !important; padding: 12px !important; }
}

@media (max-width: 767.98px) {
    /* Reading text and lists: left-aligned (the phone layout centred everything) */
    .interna .txt, .interna form, .interna .lista-links, .resultados-busca, .mapa-site { text-align: left; }
    /* Plain lists of pages (Transparência, Legislação...): one tappable row per item */
    .interna .lista-links { list-style: none; padding: 0; margin: 0 0 1rem; }
    .interna .lista-links li { border-bottom: 1px solid rgba(0, 0, 0, .1); }
    .interna .lista-links li a { display: inline-block; padding: 10px 0 2px; font-size: 16px; }
    .interna .lista-links li small { display: block; padding-bottom: 8px; }
    /* Nested PDF accordions: less padding, so the files keep the width */
    .interna .arquivos .accordion-body { padding: 10px; }
    .interna .arquivos .accordion-button { padding: 12px 14px; }
    /* Side menus: taller headers and links (were ~28px / ~19px tall) */
    .menu_esquerda .accordion-header .accordion-button,
    .menu_direita .accordion-header .accordion-button { min-height: 44px; padding-top: 10px; padding-bottom: 10px; }
    .menu_esquerda .accordion-collapse a,
    .menu_direita .accordion-collapse a { margin: 0 !important; padding: 9px 10px; }
    /* Footer: address and credits touched the screen edges; title too big for a phone */
    footer .m { padding-left: 15px; padding-right: 15px; }
    footer .m h2 { font-size: 24px; }
    footer .r { justify-content: center !important; padding-top: 10px; }
}