/* =================================
   base font size (desktop first)
=================================== */
html {  /*XXL screens and above (≥1400px) */ 
  font-size: 100%; /* 16px base */
}

@media (max-width: 1399.98px) { /* XL screens: 1200px – 1399px */
  html { 
    font-size: 93.75%; /* 15px */
  }
}

@media (max-width: 1199.98px) { /* LG screens: 992px – 1199px */
  html {
    font-size: 87.5%; /* 14px */
  }
}

@media (max-width: 991.98px) { /* MD screens: 768px – 991px */
  html {
    font-size: 81.25%; /* 13px */
  }
}

@media (max-width: 767.98px) { /* SM screens: 576px – 767px */
  html {
    font-size: 75%; /* 12px */
  }
}

@media (max-width: 575.98px) { /* XS screens: <576px */
  html {
    font-size: 68.75%; /* 11px */
  }
}



/* =================================
   base width size
=================================== */
.narrow-block,
p,
h1,
h2,
h3,
h4,
ul,
ol,
figcaption {
  max-width: 990px;
  margin-left: auto;
  margin-right: auto;
}
@media (max-width: 1199.98px) {
  .narrow-block,
  p,
  h1,
  h2,
  h3,
  h4,
  ul,
  ol,
  figcaption {
    max-width: 855px;
  }
}
@media (max-width: 991.98px) {
  .narrow-block,
  p,
  h1,
  h2,
  h3,
  h4,
  ul,
  ol,
  figcaption {
    max-width: 720px;
  }
}
@media (max-width: 767.98px) {
  .narrow-block,
  p,
  h1,
  h2,
  h3,
  h4,
  ul,
  ol,
  figcaption {
    max-width: 540px;
  }
}
@media (max-width: 575.98px) {
  .narrow-block,
  p,
  h1,
  h2,
  h3,
  h4,
  ul,
  ol,
  figcaption {
    width: 90%;
  }
}



/* =================================
   tags
=================================== */
main {
  margin-top: 3rem;
  margin-bottom: 8rem;
}

#main-content {
  scroll-margin-top: 5rem;
}

figure {
  margin: 0;
  padding: 0;
}



/* =================================
   general configuration
=================================== */
.nojs {
  display: none;
}
.with-js {
  display: block;
}
.fade-in {
  opacity: 0;
}
.fade-in.active {
  opacity: 1;
  transition: 3.5s;
}
.text-uppercase {
  text-transform: uppercase;
}



/* =================================
   general elements
=================================== */
.visual-block {
  margin-top: 2em;
  margin-bottom: 2em;
  padding-left: 1rem;
  padding-right: 1rem;
}
.visual-block-small-margin {
  margin-top: 1em;
  margin-bottom: 1em;
  padding-left: 1rem;
  padding-right: 1rem;
}
.copy-code-button:hover {
  color: var(--red-700);
}
#appToast {
  position: fixed;
  left: 1rem;
  bottom: 1rem;
  opacity: 0;
  transition: transform 0.4s ease, opacity 0.4s ease;
  transform: translateY(40px);
  z-index: 2000;
  background-color: var(--red-700);
  color: var(--color-white);
  padding: 0.5em 1.5em;
  border-radius: 8px;
}
#appToast.showing {
  opacity: 1;
  transform: translateY(0);
}



/* =================================
   tooltips
=================================== */
.red-tooltip {
  --bs-tooltip-bg: var(--red-700);
  --bs-tooltip-color: var(--color-white);
}
.link-tooltip {
  --bs-tooltip-bg: var(--color-link);
  --bs-tooltip-color: var(--color-white);
}



/* =================================
   horizontal dividers
=================================== */
.bottom-border-thin {
  border-bottom: solid 1px var(--gray-600);
}
.top-border-thin {
  border-top: solid 1px var(--gray-600);
}
.bottom-border-thick {
 border-bottom: 2px solid var(--gray-700);
}

.editorial-divider::before,
.editorial-divider::after {
  content: "";
  display: block;

  /* total drawing area height (must match the thick segment) */
  height: 5px;

  background:
    /* top layer: thick centered accent segment */
    linear-gradient(
      to right,
      transparent 0%,
      transparent 42.5%,
      #0078a4 42.5%,
      #0078a4 57.5%,
      transparent 57.5%,
      transparent 100%
    ),
    /* bottom layer: thin base line */
    linear-gradient(#d0d0d0, #d0d0d0);

  background-size:
    100% 5px,  /* top layer (thick segment) */
    100% 1px;  /* bottom layer (thin line) */
  
  background-repeat: no-repeat;
}

.editorial-divider::before {
  margin-bottom: 1.5rem;
  background-position: top, top;
}

.editorial-divider::after {
  margin-top: 1.5rem;
  background-position: bottom, bottom;
}



/* =================================
  NavBar
=================================== */
.navbar {
  font-size: 16px;
}
.navbar-brand {
  font-size: 18px;
}
.navbar .navbar-brand,
.navbar .navbar-toggler {
  font-size: 1.2em;
}

a.skip-to-content {
  position: absolute;
  top: 0.4rem;
  left: 1rem;
  z-index: 2000;

  display: inline-block;
  padding: 0.8rem 1rem;
  background: #FFFF00;
  font-size: 0.9rem;  
  color:#000;

  border-radius: 0.5rem;
  text-decoration: none;

  transform: translateY(-150%);
  transition: transform 0.2s ease;
}

a.skip-to-content:focus {
  transform: translateY(0);
}

a.skip-to-content:hover {
  text-decoration: underline;
}

.logo-container {  
  font-family: 'Segoe UI', Arial, Helvetica, sans-serif;
  /* font-size: 1.1em; */
  font-size: 0.9em;
  text-align: center;
  width: 7em;
  margin: 0;  
  padding-bottom: 4px;  
  /* border: solid 1px white; */
}
.social-media-container {
  /* width: 11.8em; */ width: 10em;
  height: 1.3em;
  margin-top: 0.4em;
  margin-bottom: 0.4em; 
  /* margin-left: 1.6em; */ margin-left: 1.4em;
  /* margin-right: 1.6em; */ margin-right: 1.4em;
  padding-left: 0.8em;
  padding-right: 0.8em;  
  border-left: solid 1px white;
  border-right: solid 1px white;
}
.flag-container {
    display: flex;
    justify-content: center;
    width: 8em;
    /* border: solid 1px white; */
}
@media (max-width: 767.98px) {
  .logo-container {
    /* width: 11.8em; */ width: 11em;
    margin-left: 1.6em;

  }
  .flag-container {
    /* width: 11.8em; */ width: 10em;
    margin-left: 1.5em;
  }
}
@media (max-width: 575.98px) {
  .logo-container {
    margin-left: 0; 
  }
  .social-media-container {
    margin-left: 0;
  }
  .flag-container {
    margin-left: 0;
  }
}

/* hamburger button */
.navbar-brand {
  min-width: 170px;
}
.custom-hamburger-button {
  margin-top: 0.5em;
  margin-bottom: 0.5em;
}
.navbar .navbar-toggler-icon {
  /* font-size: 1.1rem */
}
@media (max-width: 293px) {
  .navbar-brand {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
  }
  .logo-container, .social-media-container, .flag-container {
    margin-left: auto;
    margin-right: auto;    
  }
  .custom-hamburger-button {
    margin-left: auto;
    margin-right: auto;
  }
}

.social-media-container a.social-media-icon {
  /* font-size: 1.1em; */
  font-size: 0.9em;
  color: white;
  opacity: 0.8;
}
.social-media-container a.social-media-icon:hover {
  opacity: 1;
}

.flag-container .country-wrapper {
  padding: 4px 0;
}
.flag-container .country-flag {
  
}
.flag-container .country-name {
  /* font-size: 0.8em; */ font-size: 0.7em;
  /*margin-left: 0.4em;  distance between the flag and the name */
  margin-left: 0.5em;
}
.flag-container .second-flag {
  margin-left: 0.8em; /* distance between the United States flag and the name of the Brazilian flag */
}
.flag-container a {
  color: white;
  text-decoration:none;
}
.flag-container a:hover {
  color: white;
  text-decoration:underline;
}
/*** flag animation (turn on/turn off) ***/
  .flag-container .brazil, .flag-container .us  {
    transition: opacity 0.3s ease;
  }

  /* initial state by language */
  html[lang="pt-BR"] .flag-container .brazil { opacity: 1;  }
  html[lang="pt-BR"] .flag-container .us { opacity: 0.7; }

  html[lang="en-US"] .flag-container .brazil {  opacity: 0.7; }
  html[lang="en-US"] .flag-container .us { opacity: 1; }

  /* the flag under the mouse turns on */
  html[lang="pt-BR"] .flag-container a:hover,
  html[lang="en-US"] .flag-container a:hover {
    opacity: 1;
  }

  /* turn off the other one */
  .flag-container:hover a:not(:hover) {
    opacity: 0.7;
  }
/*** end flag animation (turn on/turn off) ***/



/* =================================
   icons bar
=================================== */

.tec-icon-section-title {
  display: flex;
  justify-content: center;
  text-transform: uppercase;
  font-size: 1.4rem;
  font-weight:700;
  color: var(--red-700);  
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
.tec-icon {
  height: 2.35rem;
  width: auto;
  transition: transform .3s ease;
}
.tec-icon:hover {
		transform: scale(1.2);
}



/* =================================
   home page
=================================== */
.site-name {
  font-size: 0.7em;
  color: #c4100e;
  line-height: 1;
}
.site-category {
  font-size: 0.6em;
  color: var(--color-black);
  line-height: 1;
}



/* =================================
   article text container
=================================== */
.article-text {
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  color: var(--gray-800);
  font-size: 1.3rem;
}

.article-text a.btn {
  font-size: 1rem;
  color: var(--color-white);
}
.article-text a.btn:hover {
  color: var(--color-white);
  text-decoration: none;
}

/* paragraphs and lists inherit scaling automatically */
.article-text p,
.article-text ul,
.article-text ol,
.article-text li {  
  font-size: 1em;  /* relative to .article-text */
  line-height: 1.6;
}
.article-text p,
.article-text ul,
.article-text ol {
 margin-bottom: 1em;
}

/* lists */
.article-text ul,
.article-text ol {
  padding-left: 1em;
}
.article-text ul.list-indentation,
.article-text ol.list-indentation {
  margin-left: 2em;
}
.article-text ul li,
.article-text ul p,
.article-text ol li,
.article-text ol p {
  margin-bottom: 0.6em;
}
.article-text ul li {
  list-style-type: square;
}
.article-text ul li::marker {
  color: #0078a4;
}
.article-text ol li {
  list-style-type: lower-alpha;
}
.article-text ol li::marker {
  color: black;
  font-weight: bold;
}  
.article-text .second-level-bullet li {
  list-style-type: none;
}
.article-text .second-level-bullet li::marker {
  content: "▸ ";
}

/* headings */
.article-text h1 {
  font-family: 'Segoe UI', sans-serif;
  font-weight: 700;
}
.article-text h1.page-title {
  color: var(--gray-900);
  font-size: 1.5rem;
  text-align: center;
  text-transform: uppercase;  
  margin-bottom: 1.4em;
}

.article-text h1.post-title {
  font-size: 2.3rem;
  text-align: left;      /* remove center */
  text-transform: none;  /* remove uppercase */
  margin-bottom: 0.8em;
}

.article-text ul li.post-key-point {
  font-family: 'Segoe UI', sans-serif;
  font-weight: 400;
  color: var(--gray-700);
  font-size: 1.3rem;
  margin-bottom: 0.3em;
}

.article-text p.post-author {
  font-size: 1rem;
  margin-top: 1.6em;
  margin-bottom: 0;
}
.article-text p.post-author a {
  font-size: 1em;
}
.article-text p.posting-date {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-weight: 400;
  color:var(--gray-600);
  font-size: 1rem;
  letter-spacing: 0.10rem;
}

.article-text h2.page-section-title {
  font-family: 'Segoe UI', sans-serif;
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--gray-900);
  margin-bottom: 0.5em;
}

.article-text h2.post-section-title {  
  font-family: 'Segoe UI', sans-serif;
  font-weight: 600;
  font-size: 1.5rem;
  color: var(--red-700);
  margin-top: 3em;
  margin-bottom: 1em;
  scroll-margin-top: 5rem;
}

/* h3 */
.article-text .post-title-bar { 
  border-top: 1px solid var(--gray-600);
  border-bottom: 1px solid var(--gray-600);
  padding: 0.5rem 0;
  margin-top: 3em;
  margin-bottom: calc(1em + 0.5rem); 
}
.article-text .post-title-bar h3 {
  font-size: 1em;
  margin: 0;
}
@media (max-width: 991.98px) {
  .article-text .post-title-bar h3 {
    margin: 0;
  }
}
.post-title-bar .left-side {
  white-space: nowrap;
  color: var(--pink-400);
}
.post-title-bar .right-side {
  text-align: right;
}

.article-text .post-independent-tag-title {
  font-size: 1.2em;
  font-weight: 700;
  margin-top: 3rem;
  margin-bottom: 1rem;
}

.article-text .container-img-author {
  float:left;
  margin-right: 1.5rem;
  margin-bottom: 1rem;
}
.article-text .img-author {
  height: 11rem;
  width: auto;
}

/* links */
.article-text a {
  font-size: 0.95em;  /* relative to .article-text */
  font-weight: 600;
  color: var(--color-link);
  text-decoration: none;
  transition: color 0.2s ease;
}
.article-text a:hover {
  color: var(--color-link-hover);
}

.article-text .index-links a {
  font-weight: 400;
  color: var(--gray-800);
}
.article-text .index-links a:hover {
  color: var(--red-700);
}

.article-text a.link-back-to-index {
  color: var(--red-700);
}
.article-text a.link-back-to-index:hover {
  color: #A30D0B;
}

/* others */
.article-text .highlight-tag,
.article-text .highlight-value,
.article-text .highlight-attribute,
.article-text .highlight-text {
  font-family: var(--font-monospace);
  font-size: 0.8em;
  padding: 0.1em 0.3em;
  border-radius: 0.25rem;
}



/* =================================
   small text with no background
=================================== */
.article-text .small-mono {
  font-family: var(--font-monospace);
  font-size: 0.8em;
  color: var(--gray-900);
}



/* =================================
   highlight with background
=================================== */
.article-text .highlight-tag {
  color: var(--pink-500);
  background-color: var(--red-50);
}
.article-text .highlight-value {
  color: #4078f2;
  background-color: #E6F0FF;
}
.article-text .highlight-attribute {
  color: #2E7D32;
  background-color: #E9F7F0;
}
.article-text .highlight-text {
  background-color: var(--gray-200);
}



/* =================================
   text colors
=================================== */
.article-text .blue-value {
  color: #4078f2;
}
.article-text .blue-devtools-active {
  color: #0B5BD9;
}
.article-text .green-attribute {
  color: #2E7D32;
}
.article-text .green-caption {
  color: #228B22;
}
.article-text .pink-caption {
  color: #C02374;
}
.article-text .orange-caption {
 color: #E65729;
}
.article-text .violet-caption {
  color: #722CF5;
}
.article-text .dark-red-caption {
  color: #C4100E;
}
.article-text .bright-pink {
   color: #FE017E;
}
.article-text .wine {
  color: #990055;
}



/* =================================
   captions and borders
=================================== */
.caption {
  font-family: 'Segoe UI', sans-serif;
  font-size: 1.4rem;  
}
.green-caption-border-thick {
  border: 4px solid #228B22;;
}
.pink-caption-border-thick {
  border: 4px solid #C02374;
}
.orange-caption-border-thick {
  border: 4px solid #E65729;
}
.gray-border-thin {
  border: 1px solid var(--gray-600);
  border-radius: 0.375rem;
}



/* =================================
   captions line break
=================================== */
.caption-break-line-md p br, .caption-break-line-lg p br, .caption-break-line-xl p br {
  display: none;
}
@media (min-width: 768px) {
 .caption-break-line-md p br {
      display: block;
  }  
}
@media (min-width: 992px) {
 .caption-break-line-lg p br {
      display: block;
  }  
}
@media (min-width: 1200px) {
 .caption-break-line-xl p br {
      display: block;
  }  
}



/* =================================
   general code-block
   for code-block-prism-js and code-block-custom
=================================== */
.code-block .header {
  border-bottom: solid 1px var(--gray-600);
  width:100%;
}
.code-block .header span.with-js {
  font-size: 1rem;
}
.code-block .header i {
  cursor: pointer;
  font-size: 1.2rem;
}
.code-block .header span.nojs {
  font-size: 1rem;
  color: var(--red-700);
  width: 100%;
  text-align: center;
}



/* =================================
   code-block-prism-js
=================================== */
.code-block-prism-js {
    background-color: #f8f9fa;
    border: solid 1px var(--gray-600);
    border-radius: 0.375rem;
    
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    overflow: hidden;
}

.code-block-prism-js pre {
    background-color: #f8f9fa !important;
    width: 100%;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}
.code-block-prism-js pre[data-line] .line-highlight {  
  background-color: var(--red-100) !important;
  margin-top: 15px !important; /* centralize the highlight */
}
/* font size (numbers and code) */
.code-block-prism-js pre[class*="language-"],
.code-block-prism-js pre[class*="language-"] code,
.code-block-prism-js pre[class*="language-"].line-numbers .line-numbers-rows {
  font-size: 18px !important;
}
/* aligns the lines of code with the numbers */
.code-block-prism-js pre[class*="language-"] code { 
  /* background-color: orange; */
  padding-top: 3px !important; /* aligns the line number with the code line */
}
.code-block-prism-js mark.highlight-underline {
  /* background-color: var(--red-100); */
  background-color: transparent !important;
  margin: 0;
  border-bottom: 2px solid red;
}

/* =================================
   code-block-custom - for manual <span> markup
=================================== */
.code-block-custom {
  overflow: auto;
}
.code-block-custom-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, "Roboto Mono", "Courier New", monospace;
  font-size: 1.2rem;
  line-height: 1.4rem;
}
.code-block-custom pre {
    white-space: pre;
}
.code-block-custom .code-tag {
  color: var(--pink-500);
}
.code-block-custom .code-attr {
  color: #50a14f;
}
.code-block-custom .code-value {
  color: #4078f2;
}
.code-block-custom .code-text {
  color: #000;
}
.code-block-custom .code-comment {
  color: #6a737d;
  font-style: italic;
}