/* -------------------------------- 

TIPOGRAFIA

-------------------------------- */

:root {
    /* ESCALA TIPOGRÁFICA */
        /* Displays */
        /* --ifht-sys-display1: var(--ifht-ref-escala-1);
        --ifht-sys-display2: var(--ifht-ref-escala-2);
        --ifht-sys-display3: var(--ifht-ref-escala-3);
        --ifht-sys-display4: var(--ifht-ref-escala-4);
        --ifht-sys-display5: var(--ifht-ref-escala-5);
        --ifht-sys-display6: var(--ifht-ref-escala-6); */
        --ifht-sys-display1: var(--ifht-ref-escala-3);
        --ifht-sys-display2: var(--ifht-ref-escala-4);
        --ifht-sys-display3: var(--ifht-ref-escala-5);
        --ifht-sys-display4: var(--ifht-ref-escala-6);
        --ifht-sys-display5: var(--ifht-ref-escala-7);
        --ifht-sys-display6: var(--ifht-ref-escala-8);


        --ifht-sys-display1-mobile: var(--ifht-ref-escala-3);
        --ifht-sys-display2-mobile: var(--ifht-ref-escala-4);
        --ifht-sys-display3-mobile: var(--ifht-ref-escala-5);
        --ifht-sys-display4-mobile: var(--ifht-ref-escala-6);
        --ifht-sys-display5-mobile: var(--ifht-ref-escala-7);
        --ifht-sys-display6-mobile: var(--ifht-ref-escala-8);


        /* Títulos */
        /* --ifht-sys-h1: var(--ifht-ref-escala-2);
        --ifht-sys-h2: var(--ifht-ref-escala-3);
        --ifht-sys-h3: var(--ifht-ref-escala-4);
        --ifht-sys-h4: var(--ifht-ref-escala-5);
        --ifht-sys-h5: var(--ifht-ref-escala-6);
        --ifht-sys-h6: var(--ifht-ref-escala-8);
        --ifht-sys-antetitulo: var(--ifht-ref-escala-7); */

        --ifht-sys-h1: var(--ifht-ref-escala-2);
        --ifht-sys-h2: var(--ifht-ref-escala-3);
        --ifht-sys-h3: var(--ifht-ref-escala-4);
        --ifht-sys-h4: var(--ifht-ref-escala-5);
        --ifht-sys-h5: var(--ifht-ref-escala-6);
        --ifht-sys-h6: var(--ifht-ref-escala-7);
        --ifht-sys-antetitulo: var(--ifht-ref-escala-6);

        --ifht-sys-h1-mobile: var(--ifht-ref-escala-3);
        --ifht-sys-h2-mobile: var(--ifht-ref-escala-4);
        --ifht-sys-h3-mobile: var(--ifht-ref-escala-5);
        --ifht-sys-h4-mobile: var(--ifht-ref-escala-6);
        --ifht-sys-h5-mobile: var(--ifht-ref-escala-7);
        --ifht-sys-h6-mobile: var(--ifht-ref-escala-8);
        --ifht-sys-antetitulo-mobile: var(--ifht-ref-escala-8);
        


        /* Texto corrido*/
        --ifht-sys-lead: var(--ifht-ref-escala-6);
        --ifht-sys-paragrafo: var(--ifht-ref-escala-7);
        --ifht-sys-paragrafo-small: var(--ifht-ref-escala-9);

        --ifht-sys-lead-mobile: var(--ifht-ref-escala-7);
        --ifht-sys-paragrafo-mobile: var(--ifht-ref-escala-8);
        --ifht-sys-paragrafo-small-mobile: var(--ifht-ref-escala-10);

        /* Line Height */
        --ifht-sys-line-height-normal: var(--ifht-ref-line-height-1);
        --ifht-sys-line-height-title:var(--ifht-ref-line-height-4);
        --ifht-sys-line-height-display:var(--ifht-ref-line-height-4);
        --ifht-sys-line-height-antetitulo:var(--ifht-ref-line-height-4);
        --ifht-sys-line-height-lead:var(--ifht-ref-line-height-3);
        --ifht-sys-line-height-paragrafo:var(--ifht-ref-line-height-5);

        /* FONT-FAMILY */
        --ifht-sys-txt-familia-menu-lateral:var(--ifht-ref-familia-5);
        --ifht-sys-txt-familia-titulo:var(--ifht-ref-familia-3);
        --ifht-sys-txt-familia-display:var(--ifht-ref-familia-13);
        --ifht-sys-txt-familia-antetitulo: var(--ifht-ref-familia-9);
        --ifht-sys-txt-familia-lead: var(--ifht-ref-familia-7);
        --ifht-sys-txt-familia-paragrafo:var(--ifht-ref-familia-7);
        --ifht-sys-txt-familia-paragrafo-semibold:var(--ifht-ref-familia-11);
    
     /* CORES */

      /* Títulos */
      --ifht-sys-cor-titulos: var(--ifht-sys-cor-primaria-extradark);
      --ifht-sys-cor-titulos-default: var(--ifht-sys-cor-titulos); /*Nome de variável antiga! Substituir depois*/

      /* Displays */
      --ifht-sys-cor-display: var(--ifht-sys-cor-primaria-extradark);

      /* Texto corrido */
      --ifht-sys-cor-texto: var(--ifht-sys-cor-primaria-normal-contrast);
  
      /* Links */
      --ifht-sys-cor-link-default: var(--ifht-sys-cor-secundaria-dark);
      --ifht-sys-cor-link-hover: var(--ifht-sys-cor-secundaria-normal);
      --ifht-sys-cor-link-visited: var(--ifht-sys-cor-secundaria-light-contrast);
}

/*FAMÍLIAS, HIERARQUIA DAS FONTES E AJUSTES */

.material-symbols-rounded {
    /* font-family: var(--ifht-ref-familia-2); */
    font-family: 'Material Symbols Rounded';
    font-weight: normal;
    font-style: normal;
    font-size: 1.2rem;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-feature-settings: 'liga';
    vertical-align: text-bottom;
    font-variation-settings: 'FILL' 0, 'GRAD' 0, 'opsz' 48;
}

html, body {
    color: var(--ifht-sys-cor-texto);
    font-family: var(--ifht-sys-txt-familia-paragrafo), sans-serif;
    font-style:normal;
    font-size:18px; /* 1rem */
} 

strong, b {
    font-family: var(--ifht-ref-familia-15), sans-serif;
    font-style: normal;
}

em strong, em b,
strong em, b em {
    font-family: var(--ifht-ref-familia-16), sans-serif;
    font-style: normal;
}

em, i {
    font-family:  var(--ifht-ref-familia-12), sans-serif;
    font-style:italic;
}

i.fi {
    vertical-align: text-top;
}
small,
.small {
    font-size:70%;
}


/* HIERARQUIA */
.display1,
.display2,
.display3,
.display4,
.display5,
.display6 {
    color: var(--ifht-sys-cor-display);
    font-family: var(--ifht-sys-txt-familia-display), sans-serif;
    /* line-height: 1.1; */
    line-height: inherit;
}

.display1 {font-size:var(--ifht-sys-display1) !important;} /*96px*/
.display2 {font-size:var(--ifht-sys-display2) !important;} /*80px*/
.display3 {font-size:var(--ifht-sys-display3) !important;} /*64px*/
.display4 {font-size:var(--ifht-sys-display4) !important;} /*56px*/
.display5 {font-size:var(--ifht-sys-display5) !important;} /*40x*/
.display6 {font-size:var(--ifht-sys-display6) !important;} /*40x*/

h1 {font-size:var(--ifht-sys-h1);} /*64px*/
h2 {font-size:var(--ifht-sys-h2);} /*56px*/
h3 {font-size:var(--ifht-sys-h3);} /*40px*/
h4 {font-size:var(--ifht-sys-h4);} /*32px*/
h5 {font-size:var(--ifht-sys-h5);} /*24px*/
h6 {font-size:var(--ifht-sys-h6);} /*20px*/

.h1 {font-size:var(--ifht-sys-h1) !important;} /*64px*/
.h2 {font-size:var(--ifht-sys-h2) !important;} /*56px*/
.h3 {font-size:var(--ifht-sys-h3) !important;} /*40px*/
.h4 {font-size:var(--ifht-sys-h4) !important;} /*32px*/
.h5 {font-size:var(--ifht-sys-h5) !important;} /*24px*/
.h6 {font-size:var(--ifht-sys-h6) !important;} /*20px*/

.h1,h1,
.h2,h2,
.h3,h3,
.h4,h4,
.h5,h5,
.h6,h6 {
    color: var(--ifht-sys-cor-titulos);
    font-family: var(--ifht-sys-txt-familia-titulo), sans-serif;
    line-height: var(--ifht-sys-line-height-title);
    text-transform: uppercase;
    margin-bottom:var(--ifht-sys-spacing-padding-lg);
}

h1 strong, .h1 strong,
h2 strong, .h2 strong,
h3 strong, .h3 strong,
h4 strong, .h4 strong,
h5 strong, .h5 strong,
h6 strong, .h6 strong {
    font-family: "Rubik ExtraBold";
}

.h1 i,.h1 em, h1 i,h1 em,
.h2 i,.h2 em, h2 i,h2 em,
.h3 i,.h3 em, h3 i,h3 em,
.h4 i,.h4 em, h4 i,h4 em,
.h5 i,.h5 em, h5 i,h5 em,
.h6 i,.h6 em, h6 i,h6 em {
    font-family: var(--ifht-ref-familia-4), sans-serif;
    /* font-style: italic; */
}

.antetitulo {
    font-family: var(--ifht-sys-txt-familia-antetitulo), sans-serif;
    font-size:var(--ifht-sys-antetitulo);
    font-weight: 500;
    letter-spacing: 0.1em;
    line-height: var(--ifht-ref-line-height-5);
    margin-bottom: 1rem;
}

.lead { 
    font-family: var(--ifht-sys-txt-familia-lead), sans-serif;
    font-size:var(--ifht-sys-lead);
    font-weight: 400;
    line-height: var(--ifht-ref-line-height-5);
    margin-bottom: 1rem;
}

p {
    font-family: var(--ifht-sys-txt-familia-paragrafo), sans-serif;
    font-size:var(--ifht-sys-paragrafo);
    font-weight: 400;
    line-height: var(--ifht-sys-line-height-paragrafo);
    margin-bottom: var(--ifht-sys-spacing-md);
}

a {
    color: var(--ifht-sys-cor-link-default);
    word-wrap: break-word;

}

a:hover, a:focus {
    color: var(--ifht-sys-cor-link-hover);
    text-decoration: underline;
    outline: none;
}

a[target='_blank']:after {
	font-family: "uicons-regular-straight";
    font-size: 70%;
    font-weight: 700;
    content: '\e0ea';
    vertical-align: text-bottom;
    margin-left: 5px;
    margin-right: 5px;
    text-decoration: none;
    bottom: 0;
    position: relative;
    /* display: flex;
    align-content: center;
    flex-wrap: wrap; */    
}

a[target='_blank']:after :hover {
	text-decoration: none;
}

a.btn[target='_blank']:after {
    display: none;
}

/* Somente os links que fazem parte de conteúdo (aulas, postagens de blogs e outras páginas com conteúdo implementado)*/
.page-content p > a, 
.page-content p > a:visited
.list li a,
.main_blog_post_content .ccn-blog-post-content-surround a {
    /* background-color: var(--ifht-sys-cor-primaria-light); */
    background-color:var(--ifht-sys-cor-secundaria-extradark-contrast);
    font-weight: bold;
    padding: 0 10px;
}

.page-content p > a:hover,
.list li a:hover,
.main_blog_post_content .ccn-blog-post-content-surround a:hover {
    /* background-color: var(--ifht-sys-cor-primaria-normal); */
    background-color: var(--ifht-sys-cor-secundaria-light);
    color: var(--ifht-sys-cor-primaria-extradark);
}

/* Configura a cor dos links que fazem parte de conteúdo*/
/* p > a, p > a:visited, 
strong a, strong a:visited, 
em a, em a:visited, 
li a, li a:visited, li a, li a:visited {
    background-color: var(--ifht-sys-cor-link-default);
    color: #fff;
    padding: 1px 8px;
} */

/* LISTAS  !!! Regra removida pois estava colapsando o Menu em todo sistema 
ul li {
    margin-bottom: var(--ifht-ref-espaçamento-3);
}
*/

/* HEADING BLOCK - Padronização dos títulos */
.heading__block {
    margin-bottom: var(--ifht-sys-spacing-sm);
}

.heading__block .heading__element:last-child {
    margin-bottom: 0;
}

.heading__block .heading__intro{
    color: var(--ifht-sys-cor-terciaria-1-dark);
    display: block;
    font-family: var(--ifht-sys-txt-familia-paragrafo), sans-serif;
    font-size: var(--ifht-sys-antetitulo) !important;
    margin-bottom: var(--ifht-sys-spacing-padding-xs);
}

.heading__block .heading__title {
    display: inline-block;
    margin-bottom: var(--ifht-sys-spacing-padding-md);
    text-decoration-thickness: 10px;
    text-decoration-skip-ink: none;
    text-underline-offset: -4px;
}

.heading__element.heading__title.heading__border::after{
    content: '';
    display: block;
    position: relative;
    background-color: var(--ifht-sys-cor-secundaria-normal);
    width: 120px;
    height: 8px;
    margin-top: 2px;
}

.heading__block .heading__leading {
    color: var(--ifht-sys-cor-neutra-normal);
    display: block;
    font-family: var(--ifht-sys-txt-familia-paragrafo), sans-serif;
    font-size: var(--ifht-sys-display6) !important;
    margin-bottom: var(--ifht-sys-spacing-lg);
}

/* LEGENDAS */
.figure-caption {
    font-size: var(--ifht-sys-txt-botao-sm);
    display: block;
    white-space: inherit;
    word-wrap: break-word;
    margin:0;
    text-align: center;
    width: 100%;
}


/* EXIBIÇÃO DE TRECHO DE CÓDIGO */
code {
    font-size: var(--ifht-sys-txt-botao-md);
    color: #e83e8c;
    word-break: normal;
    white-space: pre-wrap;
}

/*Textos lidos somente por leitores de tela*/
.screen-reader-only {
    position: absolute;
    width: 1px;
    clip: rect(0 0 0 0);
    overflow: hidden;
    white-space: nowrap;
}

/* Títulos das sessões */
.main-title h3 {
    display: inline-block;
    font-family: var(--ifht-sys-txt-familia-titulo), sans-serif;
    font-size: var(--ifht-sys-h3);
    margin-bottom: 10px;
    margin-top: 0;
    text-transform: uppercase;
  }

  .main-title h5 {
    display: inline-block;
    font-family: var(--ifht-sys-txt-familia-titulo), sans-serif;
    font-size: var(--ifht-sys-h5);
    margin-bottom: 10px;
    margin-top: 0;
    text-transform: uppercase;
  }

/* TAMANHO DE FONTES EXCLUSIVO PARA MOBILE */
@media (max-width: 767px) {
    h1 {font-size:var(--ifht-sys-h1-mobile);} /*64px*/
    h2 {font-size:var(--ifht-sys-h2-mobile);} /*56px*/
    h3 {font-size:var(--ifht-sys-h3-mobile);} /*40px*/
    h4 {font-size:var(--ifht-sys-h4-mobile);} /*32px*/
    h5 {font-size:var(--ifht-sys-h5-mobile);} /*24px*/
    h6 {font-size:var(--ifht-sys-h6-mobile);} /*20px*/

    .h1 {font-size:var(--ifht-sys-h1-mobile) !important;} /*64px*/
    .h2 {font-size:var(--ifht-sys-h2-mobile) !important;} /*56px*/
    .h3 {font-size:var(--ifht-sys-h3-mobile) !important;} /*40px*/
    .h4 {font-size:var(--ifht-sys-h4-mobile) !important;} /*32px*/
    .h5 {font-size:var(--ifht-sys-h5-mobile) !important;} /*24px*/
    .h6 {font-size:var(--ifht-sys-h6-mobile) !important;} /*18px*/

    .display1 {font-size:var(--ifht-sys-display1-mobile) !important;} /*96px*/
    .display2 {font-size:var(--ifht-sys-display2-mobile) !important;} /*80px*/
    .display3 {font-size:var(--ifht-sys-display3-mobile) !important;} /*64px*/
    .display4 {font-size:var(--ifht-sys-display4-mobile) !important;} /*56px*/
    .display5 {font-size:var(--ifht-sys-display5-mobile) !important;} /*40x*/
    .display6 {font-size:var(--ifht-sys-display6-mobile) !important;} /*40x*/

    .antetitulo {font-size:var(--ifht-sys-antetitulo-mobile);}

    .lead { font-size:var(--ifht-sys-lead-mobile);}

    p {font-size:var(--ifht-sys-paragrafo-mobile); }

    .heading__block .heading__intro{ font-size: var(--ifht-sys-antetitulo-mobile) !important;}

    .heading__block .heading__leading {font-size: var(--ifht-sys-display6) !important;}
}

/* Divisores */
#apresentacao span.divisor-texto::after {
    transform: translate(-50%, 0);
}