/* SPR Header Styles Override - MINIMAL */
/* Only styles that need to override padrao.css or add missing functionality */

/* ============================================
   Force Montserrat Font Family
   ============================================ */
body,
#siteHeader,
#menuPrincipal,
#topBar {
    font-family: 'Montserrat', sans-serif !important;
}

/* Bootstrap Icons styling for iconBar */
.iconBar .bi {
    font-family: 'bootstrap-icons' !important;
}

/* ============================================
   TopBar Container Styles
   ============================================ */

/* TopBar content layout */
#topBar>div {
    display: flex;
    justify-content: flex-end !important;
    align-items: center;
}

/* TopBar inherits font from body - adjust size */
#topBar {
    font-size: 14px;
}

/* Menu items font weight - match original (lighter weight) */
#menuPrincipal a,
#menuPrincipal .subMenuTitle,
#siteHeader {
    font-weight: 400 !important;
}

/* TopBar buttons text should be bold like original */
#topBar .topBarBtn>div,
#topBar .sprNoticias>div,
#topBar .areaAssociado>div,
#topBar .areaAssociado>div>div,
#topBar .associese>div,
.topBarBtn>div,
.sprNoticias,
a.sprNoticias.topBarBtn {
    font-weight: 600 !important;
}

/* Separador vertical da topBar */
.separadorTopBar {
    width: 1px;
    height: 24px;
    border-left: 1px solid #c9c9c9;
    margin-left: 20px;
    flex-shrink: 0;
}

/* ============================================
   TopBar Dropdown Buttons - Visibility Control
   The original site uses inline CSS on cabecalho.ascx
   ============================================ */

/* TopBar button icons styling */
#topBar .topBarBtn {
    align-items: center;
    display: flex;
    border-radius: 18px;
    height: 36px;
    margin-left: 25px;
    padding: 2px;
    position: relative;
    cursor: pointer;
}

#topBar .topBarBtn.ativo {
    border-radius: 18px 18px 0 0;
}

#topBar .topBarBtn>i {
    align-items: center;
    background: #fff;
    display: flex;
    border-radius: 16px;
    height: 32px;
    width: 32px;
    justify-content: center;
}

#topBar .topBarBtn>div {
    align-items: center;
    display: flex;
    font-weight: 600 !important;
    font-size: 16px;
    padding: 0 15px;
}

/* CRITICAL: Hide dropdowns by default */
#topBar .topBarBtn .topBarBtnDD {
    display: none !important;
    font-weight: 400;
    list-style: none;
    left: 0;
    margin: 0;
    padding: 0;
    position: absolute;
    top: 36px;
    z-index: 70;
    border-radius: 0 0 18px 18px;
    width: 100%;
}

/* Show dropdown only when .ativo class is present */
#topBar .topBarBtn.ativo .topBarBtnDD {
    display: block !important;
}

#topBar .topBarBtn .topBarBtnDD li {
    list-style: none;
}

#topBar .topBarBtn .topBarBtnDD a {
    color: #fff;
    display: block;
    padding: 4px 15px;
}

/* Language flags container - white background with rounded corners */
#topBar .areaAssociado .topBarBtnDD .idiomas {
    background: #fff;
    border-radius: 0 0 16px 16px;
    display: flex;
    font-size: 0;
    margin: 2px;
    justify-content: center;
    padding: 4px 15px;
}

/* Language flags - use sprites */
#topBar .areaAssociado .topBarBtnDD .idiomas a {
    background-image: url(/img/sprites@2x.png);
    background-size: 181px 199px;
    display: inline-block;
    height: 21px;
    width: 21px;
    padding: 0;
}

#topBar .areaAssociado .topBarBtnDD .idiomas .pt {
    background-position: 0 -109px;
}

#topBar .areaAssociado .topBarBtnDD .idiomas .en {
    background-position: -21px -109px;
    margin: 0 10px;
}

#topBar .areaAssociado .topBarBtnDD .idiomas .es {
    background-position: -42px -109px;
}

#topBar .areaAssociado .topBarBtnDD .idiomas .pt-2 {
    background-position: -63px -109px;
    margin: 0 10px;
}

/* SPR Notícias Button - Dark gray */
#topBar .sprNoticias {
    background: #2b333d;
    color: #fff;
}

#topBar .sprNoticias>i {
    color: #2b333d;
}

#topBar .sprNoticias>div img {
    display: block;
    margin-left: 10px;
}

/* Área do Associado Button - Blue */
#topBar .areaAssociado {
    background: #004379;
    color: #fff;
}

#topBar .areaAssociado>i {
    color: #004379;
}

#topBar .areaAssociado .topBarBtnDD {
    background: #004379;
}

/* Associe-se Button - Teal */
#topBar .associese {
    background: #18a7b5;
    color: #fff;
}

#topBar .associese>i {
    color: #18a7b5;
}

#topBar .associese .topBarBtnDD {
    background: #18a7b5;
    border-radius: 18px 0 18px 18px;
    left: auto;
    right: 0;
    width: auto;
    white-space: nowrap;
}

/* Bandeiras (Flags) */
.bandeiras {
    display: flex;
    gap: 0.5rem;
    margin-left: 25px;
}

.bandeiras img {
    width: 24px;
    height: auto;
}

/* Social Icons in TopBar */
#topBar .iconBar {
    align-items: center;
    border-right: 1px solid #c9c9c9;
    display: flex;
    font-size: 20px;
    height: 25px;
    padding-right: 20px;
}

#topBar .iconBar a {
    background: transparent;
    color: #636363;
    margin: 0 5px;
}

/* Search Field - Override for form element */
/* padrao.css targets > div but we have > form */
#siteHeader #busca>#buscaTextSubmit>form {
    background: #fff;
    border-radius: 10px 10px 0 0;
    display: flex;
    height: 38px;
    width: 100%;
    border: 1px solid #ddd;
    border-bottom: 0;
}

#siteHeader #busca button {
    background: transparent;
    border: 0;
    height: 36px;
    outline: 0;
    padding: 8px;
    width: 36px;
    cursor: pointer;
}

#siteHeader #busca button img {
    width: 20px;
    height: 20px;
}

/* Back to Top Button - uses padrao.css positioning (absolute in footer) */
#topo img {
    width: 30px;
    filter: brightness(0) invert(1);
}

/* ============================================ */
/* Main Menu Submenus                           */
/* ============================================ */

/* Hide submenus by default */
#menuPrincipal .subMenu {
    visibility: hidden;
    opacity: 0;
    transition: .1s ease;
}

/* Desktop submenu positioning */
body:not(.mob) #menuPrincipal .subMenu {
    padding-top: 15px;
    position: absolute;
    left: 0;
    right: initial;
    z-index: 10;
}

/* Show submenu when parent li has .ativo class */
body:not(.mob) #menuPrincipal li.ativo .subMenu {
    visibility: visible;
    opacity: 1;
}

/* Submenu container - gray background */
body:not(.mob) #menuPrincipal .subMenu>div {
    background: #ddd;
    border: 1px solid #ccc;
    border-radius: 10px;
    display: flex;
    justify-content: space-between;
    padding: 20px;
    width: 100%;
}

body:not(.mob) #menuPrincipal .subMenu>div>div {
    margin-left: 25px;
}

body:not(.mob) #menuPrincipal .subMenu>div>div:first-child {
    display: flex;
    justify-content: space-between;
    margin-left: 0;
}

body:not(.mob) #menuPrincipal .subMenu>div>div .voltar {
    display: none;
}

body:not(.mob) #menuPrincipal .subMenu>div>div>ul {
    margin-left: 25px;
}

body:not(.mob) #menuPrincipal .subMenu>div>div>ul:first-of-type {
    margin-left: 0;
}

/* Primeiro nível do submenu - TEM bold */
.subSubMenuTitle,
body:not(.mob) #menuPrincipal .subMenu>div>div>ul>li>a,
body:not(.mob) #menuPrincipal .subMenu .coluna1>ul>li>a,
body:not(.mob) #menuPrincipal .subMenu .coluna1 ul li a:not(.subSubMenu a) {
    border-bottom: 1px solid #ccc;
    font-weight: 600 !important;
    padding: 5px 10px;
    display: block;
}

body:not(.mob) #menuPrincipal .subMenu>div>div>ul>li>a:hover,
body:not(.mob) #menuPrincipal .subMenu .coluna1>ul>li>a:hover {
    background: #004379;
    color: #fff;
}

/* SubSubMenu (itens internos) - SEM bold, fonte menor, com » */
body:not(.mob) #menuPrincipal .subSubMenu ul {
    border-bottom: 1px solid #ccc;
    font-size: .9em;
    padding: 5px 15px 0;
}

body:not(.mob) #menuPrincipal .subSubMenu ul li {
    margin-bottom: 5px;
}

body:not(.mob) #menuPrincipal .subSubMenu ul li a {
    font-weight: normal !important;
    border-bottom: none;
    padding: 2px 0;
}

body:not(.mob) #menuPrincipal .subSubMenu ul li a:hover {
    background: transparent;
    color: #004379;
}

body:not(.mob) #menuPrincipal .subSubMenu ul li a:before {
    content: '» ';
}

body:not(.mob) #menuPrincipal .subSubMenu ul.column2 {
    column-count: 2;
    column-gap: 20px;
    padding-bottom: 5px;
}

/* Ad image in submenu */
#menuPrincipal .adsense {
    color: #999;
    font-size: .7em;
    text-align: right;
}

#menuPrincipal .adsense img {
    border-radius: 8px;
    max-width: 280px;
    margin-bottom: 5px;
}

/* Right-side menus: align to right to avoid viewport overflow */
body:not(.mob) #menuPrincipal #subMenuPublicacoes.subMenu,
body:not(.mob) #menuPrincipal #subMenuConcursos.subMenu,
body:not(.mob) #menuPrincipal #subCertificados.subMenu {
    left: initial;
    right: 0;
}

/* ============================================ */
/* STICKY HEADER — Two-Row Layout               */
/* ============================================ */

/* 0. CRITICAL: Override padrao.css which sets
      nth-child(1)=order:1 (sends topBar to bottom)
      nth-child(2)=order:0 (puts logo first).
   We must force topBar to the top with order:-1 */
.sticky #siteHeader>div>div:nth-child(1) {
    order: -1 !important;
    /* #topBar → top row */
}

.sticky #siteHeader>div>div:nth-child(2) {
    order: 0 !important;
    /* logo+menu → below topBar */
}

/* Also fix padrao.css which sets max-width:1290px + justify-content:space-between
   on .sticky #siteHeader > div — breaks our column layout */
.sticky #siteHeader>div {
    justify-content: flex-start !important;
    flex-direction: column !important;
    max-width: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Fix subMenu in sticky: reset padrao.css overrides (left:0, width:calc(100%+342px))
   back to normal-mode behavior so it drops below its parent menu item.
   top:101px = 36px topBar + 65px logo/menu row (relative to the fixed #siteHeader) */
body.sticky:not(.mob) #menuPrincipal .subMenu {
    position: absolute !important;
    /* same as normal mode */
    top: 28px !important;
    /* below full sticky header (anchored to fixed siteHeader) */
    left: 0 !important;
    /* align to left of parent menu item */
    right: initial !important;
    /* undo padrao.css right:0 */
    width: auto !important;
    /* undo padrao.css calc(100%+342px) */
}

/* Right-side menus in sticky: align to right to avoid viewport overflow */
body.sticky:not(.mob) #menuPrincipal #subMenuPublicacoes.subMenu,
body.sticky:not(.mob) #menuPrincipal #subMenuConcursos.subMenu,
body.sticky:not(.mob) #menuPrincipal #subCertificados.subMenu {
    left: initial !important;
    right: 0 !important;
}

/* 1. body offset */
.sticky {
    padding-top: 101px !important;
}

/* 2. siteHeader: column container */
.sticky #siteHeader {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
    z-index: 999;
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.14);
}

/* Outermost wrapper div: full viewport width, column stack */
.sticky #siteHeader>div {
    width: 100%;
    max-width: none !important;
    /* break free from padrao.css max-width */
    padding: 0 !important;
    margin: 0 !important;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

/* ── ROW 1: #topBar — full width dark blue ── */
.sticky #topBar {
    order: -1 !important;
    /* force above logo row */
    background: #004379 !important;
    height: 44px;
    display: flex !important;
    align-items: center;
    flex-shrink: 0;
    width: 100%;
    box-sizing: border-box;
}

/* Inner content of topBar: constrained to body width, items right-aligned */
.sticky #topBar>div {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0;
    max-width: 1280px;
    width: 100%;
    margin: 0 auto;
    padding: 0 20px !important;
    box-sizing: border-box;
}

/* Hide social icons, portal, área do associado */
.sticky #topBar .iconBar,
.sticky #topBar .sprNoticias,
.sticky #topBar .areaAssociado {
    display: none !important;
}

/* Show ASSOCIE-SE, bandeiras, pmWrapper */
.sticky #topBar .associese {
    display: flex !important;
    align-items: center;
    white-space: nowrap;
    margin-left: 0;
    font-size: 12px !important;
}

.sticky #topBar .associese>div {
    font-size: 12px !important;
}

.sticky #topBar .bandeiras {
    display: flex !important;
    align-items: center;
    margin-left: 14px;
}

.sticky #topBar .pmWrapper {
    display: flex !important;
    align-items: center;
    margin-left: 14px;
}

.sticky #topBar .profileMenu {
    font-size: 12px !important;
}

/* ── ROW 2: logo + menu — full width white bar ── */
.sticky #siteHeader>div>div:nth-child(2) {
    order: 0 !important;
    display: flex;
    align-items: center;
    background: #ffffff;
    height: 65px;
    border-bottom: none;
    padding: 0;
    box-sizing: border-box;
    width: 100%;
}

/* Inner content: constrained to body width */
.sticky #siteHeader>div>div:nth-child(2)>div {
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
}

/* Logo compact */
.sticky #siteHeader #logo {
    padding: 0 20px 0 0 !important;
    margin: 0;
    display: flex !important;
    align-items: center;
    flex-shrink: 0;
}

.sticky #siteHeader #logo img {
    height: 48px;
    width: auto;
}

/* Menu inline — DESKTOP ONLY */
@media screen and (min-width: 981px) {
    .sticky #menuPrincipal {
        display: flex !important;
        align-items: center;
    }

    .sticky #menuPrincipal>ul {
        display: flex;
        align-items: center;
        margin: 0;
        padding: 0;
    }

    .sticky #menuPrincipal>ul>li {
        white-space: nowrap;
        display: flex;
        align-items: center;
    }
}

/* Hide Fale Conosco (last li) - no space 
.sticky #siteHeader nav>ul>li:last-child {
    display: none !important;
}*/

/* Hide search icon and hamburger on sticky — DESKTOP ONLY */
@media screen and (min-width: 981px) {
    .sticky #buscaOverlay,
    .sticky .menuMobIco {
        display: none !important;
    }
}

/* Dropdown: below the full sticky header */
.sticky .profileMenuDropdown {
    top: 111px;
}


@media screen and (max-width: 980px) {

    #topBar .iconBar,
    #topBar .topBarBtn {
        display: none;
    }

    .bandeiras {
        display: none;
    }

    /* CRITICAL: Keep menu hidden on mobile sticky — hamburger toggle controls it */
    .sticky #menuPrincipal {
        display: none !important;
    }

    /* When user toggles the hamburger menu, it must be visible */
    body.mob.sticky #menuPrincipal {
        display: block !important;
    }

    /* Sticky header: reduced height on mobile */
    .sticky #siteHeader {
        height: 85px !important;
    }

    .sticky {
        padding-top: 85px !important;
    }

    /* Hide topbar entirely on mobile sticky */
    .sticky #topBar {
        display: none !important;
    }

    /* Hide Fale Conosco on mobile sticky — no space */
    .sticky #siteHeader nav>ul>li:last-child {
        display: none !important;
    }
}

/* ============================================ */
/* Profile / Login Menu                         */
/* ============================================ */

/* Wrapper: flex container, does NOT need position:relative anymore */
/* The dropdown is positioned fixed relative to the viewport */
.pmWrapper {
    display: flex;
    align-items: center;
    height: 36px;
/*    margin-left: 25px;*/
}

/* Button: same style as .associese (teal) */
#topBar .profileMenu {
    background: #004379;
    color: #fff;
    white-space: nowrap;
    /* No position:relative here — pmWrapper is the container */
}

#topBar .profileMenu>i.bi-person-circle {
    color: #004379;
    font-size: 18px;
}

#topBar .profileMenu>div {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 14px;
    font-weight: 600 !important;
    padding: 0 12px 0 8px;
}

.profileArrow {
    font-size: 11px;
    transition: transform 0.2s ease;
}

#topBar .pmWrapper.ativo .profileArrow {
    transform: rotate(180deg);
}

/* Dropdown panel — fixed to viewport, anchored to right of screen just below topBar */
.profileMenuDropdown {
    display: none;
    position: fixed;
    top: 70px;
    /* measured height of #topBar */
    right: 20px;
    min-width: 290px;
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.18);
    z-index: 1000;
    overflow: hidden;
    border: 1px solid #e8edf3;
}

#topBar .pmWrapper.ativo .profileMenuDropdown {
    display: block;
    animation: pmFadeIn 0.15s ease;
}

@keyframes pmFadeIn {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Alerts (error/info) */
.pmAlert {
    font-size: 13px;
    padding: 8px 15px;
    margin: 10px 12px 0;
    border-radius: 8px;
    font-weight: 500;
}

.pmAlertError {
    background: #fde8e8;
    color: #c0392b;
    border: 1px solid #f5c6cb;
}

.pmAlertInfo {
    background: #e8f4fd;
    color: #0077c0;
    border: 1px solid #b8daff;
}

/* === Logged-in state === */
.pmUser {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 20px 18px 18px;
    border-bottom: 1px solid #edf0f5;
}

.pmAvatar {
    background: #1a73e8;
    color: #fff;
    border-radius: 50%;
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(26, 115, 232, .35);
}

.pmUserInfo strong {
    display: block;
    font-size: 15px;
    font-weight: 700;
    color: #1a1a2e;
    letter-spacing: 0.1px;
}

.pmUserInfo small {
    display: block;
    font-size: 12px;
    color: #1a73e8;
    font-weight: 500;
    margin-top: 2px;
}

.pmLinks {
    padding: 6px 0 8px;
}

.pmLink {
    display: flex !important;
    align-items: center;
    gap: 13px;
    padding: 12px 20px;
    color: #2d3748 !important;
    font-size: 14px;
    font-weight: 500 !important;
    text-decoration: none !important;
    transition: background 0.12s;
    border-bottom: 1px solid #f2f4f8;
}

.pmLink:last-child {
    border-bottom: none;
}

.pmLink:hover {
    background: #f5f7fb;
    color: #004379 !important;
}

.pmLink i {
    font-size: 17px;
    color: #6b7a99;
    width: 20px;
    text-align: center;
    flex-shrink: 0;
}

.pmLink:hover i {
    color: #004379;
}

.pmSair {
    color: #e53935 !important;
    border-bottom: none !important;
}

.pmSair:hover {
    background: #fff5f5 !important;
    color: #e53935 !important;
}

.pmSair i {
    color: #e53935 !important;
}

/* === Panels (Login / Cadastro) === */
.pmPanel {
    padding: 20px 18px 16px;
}

.pmPanelTitle {
    font-size: 11px;
    font-weight: 700;
    color: #8896b3;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 14px;
}

.pmHidden {
    display: none !important;
}

/* Form inputs */
.pmForm {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.pmForm input[type="text"],
.pmForm input[type="email"],
.pmForm input[type="password"] {
    border: 1.5px solid #dde2ec;
    border-radius: 9px;
    font-size: 13.5px;
    font-family: 'Montserrat', sans-serif;
    padding: 11px 14px;
    outline: none;
    width: 100%;
    box-sizing: border-box;
    color: #2d3748;
    background: #fafbfd;
    transition: border-color 0.2s, background 0.2s;
}

.pmForm input::placeholder {
    color: #a0aec0;
}

.pmForm input:focus {
    border-color: #1a73e8;
    background: #fff;
}

/* Error state — mismatched password etc */
.pmForm input.pmInputError {
    border-color: #e53935;
    background: #fff5f5;
}

.pmFieldError {
    font-size: 11.5px;
    color: #e53935;
    margin-top: -4px;
    padding-left: 2px;
    display: none;
}

.pmFieldError.visible {
    display: block;
}

.pmFormLinks {
    text-align: right;
    margin: 2px 0;
}

.pmFormLinks a {
    color: #004379;
    font-size: 12px;
    text-decoration: none;
}

.pmFormLinks a:hover {
    text-decoration: underline;
}

/* Buttons */
.pmBtn {
    background: linear-gradient(135deg, #1a73e8, #004379);
    color: #fff;
    border: none;
    border-radius: 9px;
    padding: 12px;
    font-size: 14px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    cursor: pointer;
    width: 100%;
    transition: opacity 0.2s, transform 0.1s;
    letter-spacing: 0.3px;
}

.pmBtn:hover {
    opacity: 0.92;
    transform: translateY(-1px);
}

.pmBtn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.pmSeparator {
    display: flex;
    align-items: center;
    text-align: center;
    color: #aaa;
    font-size: 12px;
    margin: 10px 0;
}

.pmSeparator::before,
.pmSeparator::after {
    content: '';
    flex: 1;
    border-top: 1px solid #e8e8e8;
}

.pmSeparator span {
    padding: 0 10px;
}

.pmBtnOutline {
    background: transparent;
    color: #004379;
    border: 1px solid #004379;
    border-radius: 8px;
    padding: 9px 10px;
    font-size: 14px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    cursor: pointer;
    width: 100%;
    transition: background 0.2s, color 0.2s;
}

.pmBtnOutline:hover {
    background: #004379;
    color: #fff;
}

.pmBtnLink {
    background: none;
    border: none;
    color: #777;
    font-size: 13px;
    font-family: 'Montserrat', sans-serif;
    cursor: pointer;
    padding: 8px 0 4px;
    width: 100%;
    text-align: left;
}

.pmBtnLink:hover {
    color: #004379;
}

/* Sticky: keep wrapper visible like .bandeiras */
.sticky #topBar .pmWrapper {
    display: flex !important;
    align-items: center;
    margin-left: 10px;
}

.sticky #topBar .pmWrapper .profileMenu>div {
    font-size: 12px !important;
}

/* Mobile: hide below 980px */
@media screen and (max-width: 980px) {
    #topBar .pmWrapper {
        display: none !important;
    }
}