/* ==========================================================================
   ONS Custom Styles - Portal de Dados Abertos
   Overrides for CKAN 2.11 (Bootstrap 5)
   Migrated from CKAN 2.9 compiled main.css
   ========================================================================== */

/* ==========================================================================
   1. TYPOGRAPHY & BASE
   ========================================================================== */
html {
  font-family: 'Arial', sans-serif;
}

body {
  font-family: "Arial", "Roboto", sans-serif;
  font-size: 16px;
  color: #656266;
  background-color: #fff;
  -webkit-font-smoothing: antialiased;
}

a {
  color: #656266;
}

a:hover {
  color: #187794;
}

p {
  font-size: 16px;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: normal;
  color: #656266;
}

h1 {
  font-family: 'Neutra Display Thin Alt', sans-serif !important;
  text-transform: uppercase;
  font-style: normal !important;
  font-weight: normal !important;
  color: #f4700e !important;
  font-size: 28px;
  line-height: 1.5;
  margin: 0.67em 0;
}

h2, .h2 {
  font-size: 30px;
}

h3, .h3 {
  font-size: 24px;
}

/* ==========================================================================
   2. ACCOUNT MASTHEAD (top bar)
   ========================================================================== */
.account-masthead {
  min-height: 30px;
  color: #fff;
  background: #002247;
  position: relative;
  z-index: 10;
}

.account-masthead .account ul li {
  border-left: 1px solid #002247;
}

.account-masthead .account ul li a,
.account-masthead .account ul li button.btn-link {
  color: #fff;
  font-size: 13px;
  font-weight: bold;
  padding: 0 10px;
  line-height: 31px;
  text-decoration: none;
}

.account-masthead .account ul li a:hover,
.account-masthead .account ul li button.btn-link:hover {
  color: #fff;
  background-color: #4d89d854;
  text-decoration: none;
}

.account-masthead .account ul li a .text {
  position: absolute;
  top: -9999px;
  left: -9999px;
}

.account-masthead .account ul li a span.username {
  margin: 0 2px 0 4px;
}

.account-masthead .account .notifications a span.badge {
  font-size: 12px;
  margin-left: 3px;
  padding: 1px 6px;
  background-color: #002247;
  border-radius: 4px;
  color: #bfd7de;
}

.account-masthead .account .notifications.notifications-important a span.badge {
  color: #fff;
  background-color: #C9403A;
}

.account-masthead nav.not-authed ul li a {
  color: #fff;
  font-size: 13px;
  font-weight: bold;
  padding: 0 10px;
  line-height: 31px;
}

.account-masthead nav.not-authed ul li a:hover {
  color: #fff;
  background-color: #4d89d854;
  text-decoration: none;
}

/* ==========================================================================
   3. MASTHEAD (main header with logo + navigation)
   ========================================================================== */
.masthead {
  margin-bottom: initial;
  padding: 10px 0;
  color: #fff;
  background: #27456b;
  position: relative;
  z-index: 10;
}

/* Transparent header on homepage - stays in normal flow, just transparent */
.masthead.nocolor {
  background: transparent !important;
  position: relative;
  z-index: 10;
}

.masthead.nocolor .navbar {
  background: transparent !important;
}

.masthead a {
  color: #fff;
}

.masthead .logo {
  display: inline-block;
}

.masthead .logo img {
  max-height: 60px;
  max-width: 100%;
  height: auto;
  background-size: cover;
}

.masthead .container {
  position: relative;
  display: block;
}

/* Override the global h1 orange color inside masthead */
.masthead hgroup h1,
.masthead hgroup h2 {
  float: left;
  font-size: 30px;
  line-height: 1.5;
}

.masthead hgroup h1 {
  font-family: inherit !important;
  font-weight: 900;
  letter-spacing: -1px;
  margin: 3px 0;
  color: #fff !important;
  text-transform: none;
}

/* ==========================================================================
   4. NAVIGATION
   h.build_nav_main() generates <li><a> WITHOUT nav-item/nav-link classes
   so we target .masthead .navbar-nav li a directly
   ========================================================================== */
.navigation,
.masthead .navbar-nav {
  font-family: "Neutra Display Thin Alt", "Roboto", sans-serif;
  font-size: 14px;
  color: #ffffff;
  text-transform: uppercase;
}

.masthead .navbar-nav li {
  margin-right: 10px;
}

.masthead .navbar-nav li a {
  display: block;
  color: #fff !important;
  text-shadow: none;
  font-family: "Neutra Display Thin Alt", "Roboto", sans-serif;
  font-size: 14px;
  text-transform: uppercase;
  padding: 6px 12px;
  text-decoration: none;
}

.masthead .navbar-nav li a:hover,
.masthead .navbar-nav li a:focus {
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 4px;
  color: #fff !important;
  text-decoration: none;
}

/* Active nav item - CKAN 2.11 build_nav_main adds .active class to <li> */
.masthead .navbar-nav li.active a {
  background-color: #fff;
  color: #5d627c !important;
  font-weight: bold;
  background: linear-gradient(180deg, #ffffff 32.05%, #e5eaec 100%);
  border: 1px solid rgba(0, 0, 0, 0.16);
  box-shadow: 0px 2px 7px rgb(0 0 0 / 14%);
  border-radius: 4px;
}

/* Navbar toggler for mobile */
.masthead .navbar-toggler {
  border: none;
  box-shadow: none;
  color: #fff;
  padding: 4px 8px;
}

.masthead .navbar-toggler .fa,
.masthead .navbar-toggler .fa-bars {
  color: #fff;
  font-size: 20px;
}

/* Navbar collapse alignment - use flexbox for right alignment */
@media (min-width: 992px) {
  .masthead .navbar-collapse {
    display: flex !important;
    justify-content: flex-end;
  }
}

@media (max-width: 991px) {
  .masthead .section {
    float: none;
  }
}

/* ==========================================================================
   5. HOMEPAGE
   ========================================================================== */
.homepage {
  background-color: #f4f6f9;
}

/* Páginas internas - .main wrapper */
.main {
  padding-top: 20px;
  padding-bottom: 40px;
  min-height: 350px;
  background: none;
}

[role="main"] {
  min-height: 350px;
}

.main .wrapper {
  margin-top: 10px;
}

/* Carousel / Webdoor - position: absolute com margin-top negativo para subir
   atrás do header transparente, exatamente como o .slide no CKAN 2.9.
   O valor deve cobrir: navegacao-global (~40px) + account-masthead (~30px) + masthead (~80px) = ~150px
   Ajuste fino conforme a altura real do header no seu ambiente. */
.homepage .carousel {
  position: absolute;
  margin-top: -150px;
  width: 100%;
  z-index: 0;
}

.carousel-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Search positioning - fica no fluxo normal, ocupa o espaço "vazio"
   deixado pelo carousel absoluto, com padding-top para descer sobre a imagem */
.position-cont {
  position: relative;
  padding-top: 20px;
  z-index: 10;
}

/* role="main" precisa de z-index para ficar na frente do carousel absoluto */
.homepage [role="main"] {
  position: relative;
  z-index: 1;
}

/* Module search on homepage */
.homepage .module-search {
  padding: 0px;
  color: #fff;
}

/* Neutraliza borda/sombra e background do .card do Bootstrap 5 no module-search da homepage.
   O background real vem do .acrylic abaixo. */
.homepage .module-search.box,
.homepage .module-search.card,
.homepage .module-search {
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* Acrylic precisa sobrescrever o transparent acima — usa seletor mais específico */
.homepage .module-search.acrylic {
  background: rgba(0, 128, 214, 0.356) !important;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.homepage .module-search .module-content,
.homepage .module-search .search-form {
  border-radius: 3px 3px 0 0;
  background-color: #00000059;
  border-bottom: none;
  color: #fff;
  padding: 15px 20px;
}

.homepage .module-search .module-content .heading,
.homepage .module-search .search-form .heading {
  margin-top: 0;
  margin-bottom: 7px;
  font-size: 24px;
  line-height: 40px;
  text-transform: uppercase;
  font-family: "Neutra Display Thin Alt", sans-serif;
  font-weight: normal;
  color: #fff;
}

.homepage .module-search .search-giant input {
  border-color: #003f521e;
  font-size: 16px;
  padding: 15px;
}

.homepage .module-search .tags {
  padding: 5px 10px 10px 10px;
  background-color: #74747457;
  border-radius: 0 0 3px 3px;
}

.homepage .module-search .tags h3,
.homepage .module-search .tags .tag {
  display: block;
  float: left;
  margin: 5px 10px 0 0;
}

.homepage .module-search .tags h3 {
  font-size: 14px;
  line-height: 1.42857143;
  padding: 2px 8px;
  text-transform: uppercase;
  font-family: "Neutra Display Thin Alt", sans-serif;
  font-weight: normal;
  color: #fff;
}

.homepage .module-search .tags .tag {
  color: #fff;
  background-color: #30778d;
  border: 1px solid #235767;
  box-shadow: inset 0 1px 0 #3d97b3;
}

.homepage .module-search .tags .tag:hover {
  text-decoration: none;
  color: #30778d;
  background-color: #fff;
  border: 1px solid #235767;
  box-shadow: none;
}

.homepage .module-search .tags:before,
.homepage .module-search .tags:after {
  display: table;
  content: " ";
}

.homepage .module-search .tags:after {
  clear: both;
}

/* Promoted section - uses module-content box in old template */
.box {
  background-color: #F4F4F4;
  border-radius: 4px;
}

.homepage .box .inner,
.homepage .module-content.box > div {
  padding: 20px 25px;
}

/* Override Bootstrap 5 .card styles on promoted section */
.homepage .module-promotion.card {
  background-color: #F4F4F4;
  border: none !important;
  box-shadow: none !important;
}

/* Shadow utility class */
.shadow {
  border-radius: 1px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1), 0 1px 8px rgba(0, 0, 0, 0.2);
}

/* Acrylic effect - azul semi-transparente com blur, igual ao 2.9 */
.acrylic {
  padding: 4em 6em;
  position: relative;
  background: rgba(0, 128, 214, 0.356);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  margin: 7px;
}

/* col-md-6-plus / col-full - full width on homepage, igual ao 2.9 */
.homepage .col-full,
.homepage .col-md-6-plus {
  width: 100%;
}

/* ==========================================================================
   6. MODULES (general)
   ========================================================================== */

/* Neutraliza borda, sombra e fundo do .box e .wrapper do CKAN 2.11
   apenas nas páginas internas (não afeta a homepage) */
.main .box,
.main .wrapper {
  background-color: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
}

.module-heading {
  margin: 0;
  padding: 10px 25px;
  font-size: 18px;
  line-height: 1.3;
  background-color: #fff;
  border-top: 1px solid #ddd;
  color: #4D8AD8;
}

/* Sem traço separativo nos módulos do sidebar de filtros (border-bottom vem do CKAN 2.11) */
.filters .module-heading {
  border-bottom: none;
}

.module-content {
  padding: 30px;
}

.module .read-more,
.module .read-more > a {
  font-weight: normal;
  font-size: 16px;
  color: #F4700E;
}

/* ==========================================================================
   7. FOOTER
   ========================================================================== */
.site-footer {
  margin-bottom: initial;
  padding: 20px 0;
  background: #fff;
}

.site-footer,
.site-footer label,
.site-footer small {
  color: #73787D;
}

.site-footer a {
  color: #73787D;
}

.site-footer a:hover {
  text-decoration: underline;
}

.footer-itens {
  display: flex;
  justify-content: space-between;
  width: calc(100% - 160px);
  font-family: "Neutra Display Thin Alt", "Roboto", sans-serif;
  color: #969696;
  font-size: 16px;
  flex-wrap: wrap;
}

.footer-itens li {
  display: inline-block;
  margin: 0px 5px;
}

.footer-itens li::before {
  content: " | ";
}

.footer-itens li:first-child::before {
  content: none;
}

.footer-itens a:hover {
  text-decoration: underline;
}

.footer-links ul li {
  margin-bottom: 5px;
}

.attribution {
  width: 150px;
  float: right;
}

.attribution small {
  color: #73787D;
  font-size: 12px;
}

.attribution strong {
  font-size: 12px;
}

.attribution .ckan-footer-logo {
  filter: brightness(0.50);
}

@media (max-width: 768px) {
  .attribution {
    display: flex;
    justify-content: center;
    width: 100%;
  }
  .footer-links {
    display: block;
    text-align: center;
    width: 100%;
  }
  .footer-itens {
    width: 100%;
    justify-content: center;
  }
}

/* ==========================================================================
   8. TOOLBAR & BREADCRUMB
   ========================================================================== */
.toolbar .breadcrumb a {
  color: #656266;
}

.toolbar .breadcrumb .active a,
.toolbar .breadcrumb a.active {
  font-weight: normal;
  color: rgb(231, 152, 47);
}

/* ==========================================================================
   8b. BUTTONS
   ========================================================================== */
.btn-primary {
  color: #fff;
  background-color: #FC9000;
  border-color: #FC9000;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
  color: #fff;
  background-color: #e08000;
  border-color: #e08000;
}

/* ==========================================================================
   9. BADGES & LABELS
   ========================================================================== */
.item-label {
  font-size: 16px;
  font-weight: normal;
}

/* ==========================================================================
   10. DATASET LIST
   ========================================================================== */
.dataset-heading {
  font-size: 16px;
  margin-top: 0;
  margin-bottom: 8px;
}

/* Resource format badges - no 2.11 usa class="badge badge-default"
   As cores por formato já vêm do CSS base do CKAN 2.11 (.badge[data-format=...])
   Aqui apenas ajustamos o estilo visual (tamanho, uppercase, margem) sem sobrescrever background */
.dataset-resources li a.badge,
.dataset-resources li a.badge-default {
  display: inline-block;
  padding: 2px 8px;
  font-size: 12px;
  font-weight: bold;
  line-height: 1.5;
  color: #fff !important;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: 3px;
  text-decoration: none;
  text-transform: uppercase;
  margin-right: 2px;
}

/* Fallback para formatos sem cor definida no CSS base (ex: parquet, xlsx) */
.dataset-resources li a.badge:not([data-format]),
.dataset-resources li a[data-format=parquet],
.dataset-resources li a[data-format*=parquet] { background-color: #5B4A9E; }

.dataset-resources li a[data-format=xlsx],
.dataset-resources li a[data-format*=xlsx] { background-color: #207E42; }

/* Dataset private label - no 2.11 usa badge bg-secondary */
.dataset-private.badge {
  background-color: #333 !important;
  color: #fff;
  padding: 2px 8px;
  border-radius: 3px;
  font-size: 12px;
  margin-right: 5px;
}

/* ==========================================================================
   10b. SIDEBAR / FACETS (páginas internas)
   ========================================================================== */

/* Ocultar ícone fa-filter no module-heading (no 2.9 estava comentado no HTML) */
.module-heading .fa.fa-filter {
  display: none;
}

/* Nav facet - lista de filtros no sidebar */
.nav-facet .nav-item a,
.nav-simple > li a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #656266;
  text-decoration: none;
  font-size: 14px;
}

.nav-facet .nav-item a:hover,
.nav-simple > li a:hover {
  background-color: #f5f5f5;
  color: #187794;
}

.nav-facet .nav-item a .item-label,
.nav-simple > li a .item-label {
  font-size: 16px;
  font-weight: normal;
  line-height: 1;
  color: #636266;
}

/* Badge de contagem nas facetas - sobrescreve Bootstrap 5 .badge */
.nav-facet .item-count.badge,
.nav-simple .item-count.badge {
  font-size: 11px !important;
  font-weight: normal !important;
  background-color: #6e6e6e !important;
  color: #fff !important;
  padding: 1px 6px !important;
  border-radius: 10px !important;
  line-height: 1.5 !important;
}

/* Faceta ativa (filtro selecionado) */
.nav-facet .nav-item.active a,
.nav-simple > li.active a {
  font-weight: bold;
  color: #187794;
}

/* Botão "Mostrar mais" no rodapé do módulo */
.module-footer a.read-more {
  font-size: 13px;
  color: #F4700E;
  padding: 5px 10px;
  display: block;
}

/* Botão "Filtrar Resultados" mobile */
.show-filters {
  display: none;
}

@media (max-width: 767px) {
  .show-filters {
    display: inline-block;
    margin-bottom: 10px;
  }
}

/* ==========================================================================
   11. SEARCH FORM (internal pages)
   ========================================================================== */
.search-form .search-input.search-giant input {
  font-size: 16px;
  padding: 15px;
}

/* ==========================================================================
   12. TABLE OVERRIDES
   ========================================================================== */
.table-striped tbody tr:nth-child(even) th {
  background-color: #F4F4F4;
  color: #656266;
}

/* ==========================================================================
   13. CONTEXT INFO (dataset/org sidebar)
   ========================================================================== */
.context-info .nums dl dd .smaller {
  font-size: 16px;
}

/* ==========================================================================
   14. PAGINATION
   ========================================================================== */
.pagination-wrapper {
  text-align: center;
  border-top: 1px solid #eeeeee;
  padding-top: 10px;
}

/* ==========================================================================
   14. RESPONSIVO — tabelas roláveis (F-1) e header em telas mínimas (F-2)
   ========================================================================== */
@media (max-width: 767px) {
  /* Tabelas do conteúdo não empurram a página: ganham scroll horizontal próprio */
  .main .table,
  .primary .table,
  .module-content table.table,
  .additional-info table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  /* Conteúdo longo sem espaços (URLs, nomes de recurso, títulos) quebra em vez
     de empurrar a página. overflow-wrap é herdado → cobre a/h1/h2/p/li/dd.
     break-word (não anywhere) só quebra quando a palavra realmente não cabe,
     evitando cortar palavras normais no meio (ex.: "tra nsmissão"). */
  .main,
  .primary,
  .homepage,
  [role="main"] {
    overflow-wrap: break-word;
  }
  /* URL do recurso tem white-space:nowrap no core, que impede a quebra;
     forçamos normal + break-all para o URL longo não empurrar a página */
  a.resource-url-analytics {
    white-space: normal !important;
    word-break: break-all;
  }
}

@media (max-width: 360px) {
  /* Header/logo cabem em telas de 320px */
  .masthead .logo,
  .masthead .logo img { max-width: 100%; }
  .masthead .navbar-left { max-width: 100%; overflow: hidden; }
}

/* ==========================================================================
   15. HOMEPAGE HERO — cover responsivo + scrim + elevação do card de busca
   ========================================================================== */
/* Altura responsiva do hero: cobre atrás de todo o bloco de busca, sem vão. */
.homepage .carousel,
.homepage .carousel-inner,
.homepage .carousel-item {
  height: clamp(340px, 40vw, 480px);
}

/* Scrim: gradiente navy sutil sobre o webdoor p/ contraste do texto branco.
   z-index 1 fica acima da imagem (carousel z-index:0) e abaixo do search (z-index:10). */
.homepage .carousel::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(0,34,71,0.45) 0%, rgba(0,34,71,0.15) 55%, rgba(0,34,71,0.05) 100%);
  pointer-events: none;
}

/* Card de busca (painel acrylic) com elevação — !important p/ vencer o
   box-shadow:none !important definido acima no module-search. */
.homepage .module-search.acrylic {
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18) !important;
  border-radius: 10px;
  overflow: hidden;
}

/* Botão de busca: hover no laranja da marca (foco do hero). */
.homepage .module-search .search-form .btn:hover,
.homepage .module-search .search-form .btn:focus {
  background-color: #f4700e;
  color: #fff;
}

/* ==========================================================================
   16. HOMEPAGE — card de conteúdo + fix do menu mobile
   ========================================================================== */
/* Conteúdo promovido vira um card branco com elevação sobre o fundo neutro. */
.homepage .row2 .module-content.box {
  background: #fff;
  border: 1px solid rgba(0, 34, 71, 0.06);
  border-radius: 10px;
  box-shadow: 0 4px 18px rgba(0, 34, 71, 0.08);
  padding: 28px 32px;
}

/* Fix menu mobile: na homepage o masthead é transparente (nocolor); ao abrir o
   hambúrguer, o menu ficava "solto" e o logo branco sumia no branco.
   Quando o collapse abre (<992px), o header ganha fundo navy sólido. */
@media (max-width: 991px) {
  .masthead:has(.navbar-collapse.show),
  .masthead.nocolor:has(.navbar-collapse.show),
  .masthead:has(.navbar-collapse.show) .navbar {
    background: #27456b !important;
  }
  /* Fallback (navegadores sem :has): ao menos o painel do nav ganha fundo navy. */
  .masthead .navbar-collapse.show {
    background: #27456b;
    padding: 6px 12px 12px;
    border-radius: 0 0 6px 6px;
  }
}

/* ==========================================================================
   17. FACETS / DATASET — fix do separador + painel de filtros mobile
   ========================================================================== */
/* Bootstrap 5 removeu a utilitária .hidden do Bootstrap 3, mas o CKAN 2.11
   ainda emite <span class="hidden separator"> - </span> entre o rótulo e a
   contagem de cada faceta. Sem a regra, o traço " - " aparece solto em todas
   as facetas (dando aparência de "quebrado"). Restauramos o comportamento
   pretendido: oculto. */
.hidden {
  display: none !important;
}

/* O CKAN core aplica word-break:break-all em p.description (texto do órgão na
   sidebar context-info), o que parte palavras normais no meio (ex.: "tra
   nsmissão", "ON S"). Normalizamos: só quebra quando o token realmente não
   cabe. !important vence a regra do core. */
.context-info .description,
p.description {
  word-break: normal !important;
  overflow-wrap: break-word !important;
}

/* --- Painel de filtros no mobile -----------------------------------------
   Abaixo de 768px, "Filtrar Resultados" adiciona body.filters-modal e abre o
   .filters como painel full-screen. Damos cara de painel legível: respiro,
   títulos de grupo destacados e itens com boa área de toque. */
@media (max-width: 767px) {
  body.filters-modal .filters {
    padding: 14px 16px 32px;
    background: #fff;
  }
  /* Título de cada grupo (Organizações / Grupos / Etiquetas / Formatos). */
  body.filters-modal .filters .module-heading {
    padding: 16px 4px 8px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #27456b;
    border-top: 1px solid #e6e9ef;
  }
  body.filters-modal .filters .module:first-child .module-heading,
  body.filters-modal .filters > .module-heading:first-child {
    border-top: none;
  }
  /* Itens de faceta: mais área de toque e alinhamento consistente. */
  body.filters-modal .filters .nav-facet .nav-item a,
  body.filters-modal .filters .nav-simple > li a {
    padding: 10px 4px;
    border-radius: 6px;
    font-size: 15px;
  }
  body.filters-modal .filters .nav-facet .nav-item a .item-label,
  body.filters-modal .filters .nav-simple > li a .item-label {
    line-height: 1.3;
  }
}

/* --- 18. Selo "NOVO" nos itens de menu de novidades ----------------------
   Pill vermelha ao lado do texto do item, sinalizando funcionalidade nova.
   Dois itens usam o mesmo estilo (visual idêntico):
   - CONECTE SUA IA (MCP): <span class="ons-nav-new"> real, no header.html.
   - TIAGO: item injetado em runtime pelo plugin tiagopda (a#tiago-menu-btn);
     o tema pendura o selo via ::after (sem tocar no repo tiagopda). */
.ons-nav-new,
#tiago-menu-btn::after {
  display: inline-block;
  margin-left: 0.4em;
  padding: 0.12em 0.45em;
  background: #d9232d;
  color: #fff;
  font-size: 0.58rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: 999px;
  vertical-align: middle;
}
#tiago-menu-btn::after {
  content: "NOVO";
}