/*
Theme Name: Open finance
Template: hello-elementor
Description: Tema filho do Hello Elementor para o projeto Open Finance.
Author: Arthur Ervas
Version: 1.0.0
Text Domain: open-finance
*/

:root {
    --site-grafite: #3C3C3C;
    --site-amarelo: #FFE191;
    --site-azul-claro: #147D96;
    --site-azul-escuro: #005F78;
    --site-size-type-14: 0.875rem;
    --site-size-type-16: 1rem;
    --site-size-type-18: 1.125rem;
    --site-size-type-20: clamp(1rem, 0.9176rem + 0.3518vw, 1.25rem);
    --site-size-type-24: clamp(1.125rem, 1.0013rem + 0.5277vw, 1.5rem);
    --site-size-type-48: clamp(2rem, 1.6702rem + 1.4072vw, 3rem);
    --font-sans-10-regular: 'blogger_sansregular', sans-serif;
    --font-sans-10-medium: 'blogger_sansmedium', sans-serif;
}

#hfe-promo-notice {display: none !important;}

.align-selft-stretch {align-self: stretch !important;}

.footer-col-social .elementor-grid-item:first-child {margin-left: -12px;}

.wrapper {
    max-width: 1284px;
    position: static;
    padding-block-start: 0px;
    padding-block-end: 0px;
    padding-inline-start: 30px;
    padding-inline-end: 30px;
    margin-block-start: 0px;
    margin-block-end: 0px;
    margin-inline-start: auto;
    margin-inline-end: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: start;
}

body,
.elementor .elementor-widget-text-editor {
    color: var(--site-grafite);
    font-family: var(--font-sans-10-regular);
    font-size: var(--site-size-type-16);
    font-weight: 400;
}

.elementor .elementor-widget-text-editor a {
    color: var(--site-azul-escuro);
    text-decoration: none;
    border-bottom: 1px dotted var(--site-azul-escuro);
    cursor: pointer;
    outline: 2px solid transparent;
    outline-offset: .5rem;
}

.elementor .elementor-widget-text-editor p+p {
    margin-top: 1em;
}

.elementor .elementor-widget-text-editor ul:not(:first-child),
.elementor .elementor-widget-text-editor ol:not(:first-child) {
    margin-top: 1em;
}


.elementor .elementor-widget-text-editor ul,
.elementor .elementor-widget-text-editor ol {
    padding-left: 1.25rem;
    margin-left: 2rem;
}

.elementor .box-list-ml-0 .elementor-widget-text-editor ul,
.elementor .box-list-ml-0 .elementor-widget-text-editor ol {
    margin-left: 0;
}

.elementor .elementor-widget-text-editor ul li + li,
.elementor .elementor-widget-text-editor ol li + li {
    margin-top: .5em;
}

header .hfe-search-form__container { overflow: visible; }
header .hfe-search-form__input,
header .hfe-search-submit { z-index: 1; }
header .hfe-search-form__input:focus-visible,
header #clear-with-button:focus-visible,
header .hfe-search-submit:focus-visible { z-index: 10; }
header .hfe-search-form__input:focus-visible + #clear-with-button {z-index: 10;}
header .hfe-nav-menu nav { width: auto !important; }
header .hfe-nav-menu nav a { color: var(--site-grafite); }
header .hfe-nav-menu nav a:hover { color: var(--site-azul-claro); }
header .elementor-icon.elementor-social-icon { --icon-size: 22px; }
header .elementor-icon.elementor-social-icon { --icon-padding: 4px; }
header .sub-menu .hfe-sub-menu-item:focus-visible { position: relative; z-index: 50; }

@keyframes focus-contract {
    from { outline-offset: 10px; }
    to   { outline-offset: 2px; }
}

[tabindex]:not([tabindex="-1"]):focus-visible, a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: 2px solid var(--site-azul-escuro) !important;
    animation: focus-contract 0.25s ease-out;
}

footer [tabindex]:not([tabindex="-1"]):focus-visible, footer a:focus-visible, footer button:focus-visible, footer input:focus-visible, footer select:focus-visible, footer textarea:focus-visible {
    box-shadow: 0 0 0 4px #fff !important;
    outline: 2px solid var(--site-amarelo) !important;
}

@media (prefers-reduced-motion: reduce) {
    [tabindex]:not([tabindex="-1"]):focus-visible, a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
        animation: none;
    }
}

footer .footer-col-links a {text-decoration: underline;}
footer .footer-col-menus {gap:20px;}
footer .footer-col-menus a.hfe-menu-item {line-height: 1.1em;}
footer .footer-col-menus a.hfe-menu-item:hover {text-decoration: underline;}
footer .footer-col-menus .footer-col-menu {width: calc(50% - 10px);min-width: calc(50% - 10px);}

@media screen and (max-width: 1024px) {
    body header .elementor-element-6d08232 .hfe-nav-menu {
        max-width: 100%;
    }
    header .hfe-dropdown .hfe-nav-menu > li {
        position: relative;
    }
    header .hfe-dropdown .hfe-nav-menu > li:not(:first-child):before {
        content: '';
        position: absolute;
        top: 0;
        left: 12px;
        display: block;
        width: calc(100% - 24px);
        height: 1px;
        background: var(--site-grafite);
        opacity: .25;
    }
    body .elementor-39 .elementor-element.elementor-element-6d08232 .menu-item a.hfe-menu-item {
        padding-left: 12px;
        padding-right: 12px;
    }
    body .elementor-39 .elementor-element.elementor-element-6d08232 .menu-item .sub-menu a.hfe-sub-menu-item {
        padding-left: 16px;
        padding-right: 16px;
    }
}

@media screen and (min-width: 1025px) {
    header .hfe-search-form__input { min-width: 175px; }
    footer .footer-col-menus {gap:clamp(20px,4.36vw,66px);}
    footer .footer-col-menus .footer-col-menu {min-width: clamp(100px,11.57vw,175px);width: clamp(100px,11.57vw,175px);}
}

@media screen and (max-width: 1024px) and (min-width: 768px) {
    header .elementor-element-6d08232 { order: 10; }
    header .elementor-element-6d08232 .hfe-nav-menu { max-width: 44px; }
    header .elementor-widget-image a { max-width: 180px; }
    footer .footer-col-links .elementor-widget-text-editor p {width:100%;white-space: nowrap;overflow: clip;overflow-clip-margin: 14px;text-overflow: ellipsis;}
}

@media screen and (min-width: 1025px) and (max-width: 1200px) {
    header .elementor-39 .elementor-element.elementor-element-6d08232 a.hfe-menu-item { font-size: 16px; }
    header .hfe-nav-menu { min-width: 525px; }
    header .elementor-widget-image a { max-width: 180px; }
}

/*
 * Entre 1025px e 1049px os ícones das redes sociais ficam lado a lado (+70px de largura); para o cabeçalho
 * continuar em uma linha, o menu e a busca ficam um pouco mais estreitos.
 */
@media screen and (min-width: 1025px) and (max-width: 1049px) {
    header .hfe-nav-menu { min-width: 430px; }
    header .elementor-element-6d08232 { flex: 0 1 450px; width: 450px; }
    header .elementor-39 .elementor-element.elementor-element-6d08232 .menu-item a.hfe-menu-item { padding-inline: 6px; }
    header .elementor-widget-hfe-search-button { flex: 0 1 180px; width: 180px; }
    header .elementor-widget-hfe-search-button .hfe-search-form__input { min-width: 0; width: 100%; }
    header .elementor-widget-hfe-search-button .hfe-search-submit { min-width: 56px; width: 56px; }
}

/* Ícones das redes sociais empilhados só a partir de 1050px; entre 1025px e 1049px ficam lado a lado. */
@media screen and (min-width: 1050px) and (max-width: 1200px) {
    header .elementor-widget-social-icons .elementor-grid.elementor-social-icons-wrapper { display: flex; flex-direction: column; }
}


/* Botão (lupa) que mostra/esconde a busca no mobile — criado por assets/js/header-search-toggle.js */
header .of-search-toggle { display: none; }

@media screen and (max-width: 767px) {
    .wrapper {
        padding-inline-start: 15px;
        padding-inline-end: 15px;
    }

    header .elementor-widget-image a { min-width: 180px; }

    header .of-search-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
        width: 44px;
        height: 44px;
        margin: 0;
        padding: 0;
        border: 0;
        border-radius: 4px;
        background: transparent;
        color: var(--site-grafite);
        cursor: pointer;
    }
    header .of-search-toggle:hover,
    header .of-search-toggle:focus,
    header .of-search-toggle[aria-expanded="true"] { background: transparent; color: var(--site-azul-claro); }
    header .of-search-toggle svg { display: block; width: 22px; height: 22px; }

    header .e-137e060.of-search-toggle-ready .elementor-element-8d709d0:not(.of-search-open) { display: none; }
}

body.home .ofpl-post-list-destaques {
    margin-top: 28px;
}

body.home .ofpl-post-list-destaques * {
    text-decoration: none;
}

body.home .ofpl-post-list-destaques.ofpl-post-list--horizontal {
    gap: 0;
}


body.home .ofpl-post-list-destaques .ofpl-post__link {
    color: var(--site-grafite);
}

body.home .ofpl-post-list-destaques .ofpl-post__link:hover .ofpl-post__title {
    color: var(--site-azul-claro);
}

body.home .ofpl-post-list-destaques .ofpl-post__meta {
    color: var(--site-grafite);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
    font-family: var(--font-sans-10-medium);
    font-size: var(--site-size-type-14);
    font-weight: 500;
    line-height: 1.15em;
}

body.home .ofpl-post-list-destaques .ofpl-post__title {
    font-family: var(--font-sans-10-regular);
    font-size: var(--site-size-type-18);
    line-height: 1.35em;
}

body.home .ofpl-post-list-consumidor {
    font-family: var(--font-sans-10-regular);
    color: var(--site-grafite);
    gap: 70px;
}

body.home .ofpl-post-list-consumidor * {
    text-decoration: none;
}

body.home .ofpl-post-list-consumidor .ofpl-post__meta {
    text-transform: none;
    font-family: var(--font-sans-10-medium);
    font-size: var(--site-size-type-16);
    gap: 0;
}

body.home .ofpl-post-list-consumidor .ofpl-post__taxonomy {
    text-transform: none;
    font-family: var(--font-sans-10-medium);
    color: var(--site-grafite);
}

body.home .ofpl-post-list-consumidor .ofpl-post__date {
    margin-left: 10px;
}

body.home .ofpl-post-list-consumidor .ofpl-post__date:before {
    content: '/';
    margin-right: 10px;
}

body.home .ofpl-post-list-consumidor .ofpl-post__link:hover .ofpl-post__title {
    color: var(--site-azul-claro);
}

@media screen and (min-width: 1025px) {
    
    body.home .ofpl-post-list-destaques .ofpl-post:not(:first-child) {
        border-left: 1px solid var(--site-azul-claro);
        padding-left: 15px;
    }

    body.home .ofpl-post-list-destaques .ofpl-post:not(:last-child) {
        padding-right: 15px;
    }

}

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

    html body.home .ofpl-post-list.ofpl-post-list--horizontal.ofpl-post-list-destaques {
        --ofpl-columns: 1;
    }

    body.home .ofpl-post-list-destaques .ofpl-post:not(:first-child) {
        border-top: 1px solid var(--site-azul-claro);
        padding-top: 15px;
    }

    body.home .ofpl-post-list-destaques .ofpl-post:not(:last-child) {
        padding-bottom: 15px;
    }

    body.home .ofpl-post-list-consumidor {
        gap: 35px;
    }

}


body.home #home-numero-clientes-unicos-final,
body.home #home-numero-clientes-unicoss-final,
body.home #home-numero-chamadas-final,
body.home #home-numero-instituicoes-final,
body.page-id-1211 #qsm-chamadas-api-final,
body.page-id-1211 #qsm-consent-ativ-opf-final,
body.page-id-1211 #qsm-consent-uni-rep-final,
body.page-id-1211 #qsm-ins-ass-opf-final,
body.page-id-1211 #qsm-con-pru-fin-final,
body.page-id-1211 #qsm-ins-coo-cad-par-final,
body.page-id-2071 #qmp-icccp-final,
body.page-id-2071 #qmp-cpf-final,
body.page-id-2071 #qmp-iaopf-final {
    pointer-events: none;
}

/* Números animados: escondidos até o home-numeros-animacao.js zerá-los (html.of-numeros-js é
   adicionada no <head> pelo functions.php; o script libera cada um com .of-num-ready).
   Sem o script, mostra o número depois de 3s. O espaço continua reservado (visibility). */
html.of-numeros-js :is(
    #home-numero-clientes-unicos,
    #home-numero-clientes-unicoss,
    #home-numero-chamadas,
    #home-numero-instituicoes,
    #qsm-chamadas-api,
    #qsm-consent-ativ-opf,
    #qsm-consent-uni-rep,
    #qsm-ins-ass-opf,
    #qsm-con-pru-fin,
    #qsm-ins-coo-cad-par,
    #qmp-icccp,
    #qmp-cpf,
    #qmp-iaopf
):not(.of-num-ready) {
    visibility: hidden;
    animation: of-num-failsafe 0s 3s forwards;
}

@keyframes of-num-failsafe {
    to { visibility: visible; }
}

#content.site-main-secondary {
    display: flex;
    flex-wrap: wrap;
}

#content.site-main-secondary > .wrapper {
    column-gap: 40px;
    column-gap: clamp(40px,8.92vw,135px);
    padding-bottom: 6.25rem;
}

#content.site-main-secondary .page-breadcrumbs {
    width: 100%;
    margin-bottom: 50px;
}

#content.site-main-secondary .col-full-width {
    width: 100%;
}

#content.site-main-secondary .col-content {
    width: 805px;
    width: clamp(600px,53.24vw,805px);
    flex: 1;
    /* Sem isso o flex item não encolhe abaixo do min-content do conteúdo (ex.: o carrossel de cards, com
       os slides em uma linha) e a sidebar quebra para baixo da coluna de conteúdo. */
    min-width: 0;
}

#content.site-main-secondary .col-sidebar {
    width: 285px;
    width: clamp(200px, 18.91vw, 285px);
    min-width: clamp(200px, 18.91vw, 285px);
    margin-left: auto;
}

.col-sidebar .hfe-nav-menu,
.col-sidebar .menu-item {
    width: 100%;
}

.col-sidebar .elementor-widget-navigation-menu .menu-item + .menu-item {
    margin-top: 4px;
}

.col-sidebar .elementor-widget-navigation-menu .menu-item a.hfe-menu-item {
    display: block;
    border-bottom: 1px solid transparent;
    box-shadow: 0 1px 0 var(--site-grafite);
    padding: 4px 0 !important;
}

.col-sidebar .elementor-widget-navigation-menu .menu-item:not(.current-menu-item) a.hfe-menu-item:hover {
    display: block;
    border-bottom: 1px solid var(--site-azul-claro);
    box-shadow: 0 2px 0 var(--site-azul-claro);
}

.col-sidebar .elementor-widget-navigation-menu .menu-item.current-menu-item a.hfe-menu-item {
    color: var(--site-grafite);
    box-shadow: 0 1px 0 var(--site-grafite);
}

.col-content .page-content p:not([class^="site-size-type-"], [class*=" site-size-type-"]) {
    line-height: 1.5em; /* 150% */
}

.col-content .page-content p.e-default-p + p.e-default-p:not([class^="site-size-type-"], [class*=" site-size-type-"]) {
    margin-top: 1em;
}

.col-content .page-content p.e-paragraph-base a,
.elementor .elementor-widget-text-editor a {
    color: var(--site-azul-escuro);
    text-decoration: none;
    border-bottom: 1px dotted var(--site-azul-escuro);
    cursor: pointer;
    outline: 2px solid transparent;
    outline-offset: .5rem;
}

.col-content .page-content p.e-paragraph-base a:hover,
.elementor .elementor-widget-text-editor a:hover {
    color: var(--site-azul-escuro);
    border-bottom: 1px solid var(--site-azul-escuro);
    text-decoration: none;
}

.col-content .elementor-element-d6c2c80 svg {
    width: 100%;
    height: auto;
}

/*
 * SVGs exportados do Figma (ex.: o organograma da Associação) trazem o texto com font-family="Blogger Sans",
 * nome da fonte instalada no computador de quem desenhou, que não existe na web: sem a fonte instalada o
 * Safari (e qualquer navegador) cai numa fonte com serifa. Aqui o nome vira a fonte web do site, pelo peso.
 */
.elementor svg text[font-family="Blogger Sans"] {
    font-family: var(--font-sans-10-regular);
}

.elementor svg text[font-family="Blogger Sans"][font-weight="500"] {
    font-family: var(--font-sans-10-medium);
}

.elementor svg text[font-family="Blogger Sans"][font-weight="700"] {
    font-family: 'blogger_sansbold', sans-serif;
}

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

    #content.site-main-secondary .col-content {
        width: 100%;
    }

    #content.site-main-secondary .col-sidebar {
        display: none;
    }
}

.ofew-participants__letter:hover {
    color: var(--site-azul-escuro);
}