/* ================================================
   BOMBEIROS VOLUNTÁRIOS DE ARRIFANA
   CABEÇALHO RESPONSIVO — V2
   ================================================ */

:root {
  --bva-preto: #111111;
  --bva-preto-superior: #171717;
  --bva-vermelho: #a71e35;
  --bva-dourado: #c6a15b;
  --bva-branco: #ffffff;
  --bva-cinzento: #dedede;
}

/* ========================================
   CABEÇALHO PRINCIPAL
   ======================================== */

#masthead,
#masthead.site-header {
  background-color: var(--bva-preto) !important;
  color: var(--bva-branco) !important;
  box-shadow: none !important;
}

/* ========================================
   BARRA SUPERIOR
   ======================================== */

#masthead .header_top,
#masthead .header_top.padding_row {
  background-color: var(--bva-preto-superior) !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 6px !important;
  padding-bottom: 6px !important;
  border-bottom: 1px solid rgba(255,255,255,.12) !important;
}

#masthead .header_top .header_add {
  background: transparent !important;
}

#masthead .header_top > .header_add:last-child {
  text-align: right !important;
}

#masthead .header_top > .header_add:last-child
.smue-service-box-obj {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 8px !important;
}

#masthead .header_top > .header_add:last-child
.smue-service-box-text-heading-wrapper,
#masthead .header_top > .header_add:last-child
.smue-service-box-heading-section,
#masthead .header_top > .header_add:last-child
.smue-service-box-heading-section h6 {
  text-align: right !important;
}

/* ========================================
   CONTACTOS
   ======================================== */

#masthead .header_top .smue-service-box-obj {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

#masthead .header_top
.smue-service-box-icon-section {
  color: var(--bva-dourado) !important;
  vertical-align: middle !important;
}

#masthead .header_top
.smue-service-box-icon-section i,
#masthead .header_top
.smue-service-box-icon-section span,
#masthead .header_top
.smue-service-box-icon-section svg {
  color: var(--bva-dourado) !important;
  font-size: 16px !important;
}

#masthead .header_top
.smue-service-box-heading-section h1,
#masthead .header_top
.smue-service-box-heading-section h2,
#masthead .header_top
.smue-service-box-heading-section h3,
#masthead .header_top
.smue-service-box-heading-section h4,
#masthead .header_top
.smue-service-box-heading-section h5,
#masthead .header_top
.smue-service-box-heading-section h6 {
  color: var(--bva-cinzento) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  text-transform: none !important;
  letter-spacing: .1px !important;
}

#masthead .header_top
.smue-service-box-heading-section a {
  color: var(--bva-cinzento) !important;
  text-decoration: none !important;
}

#masthead .header_top
.smue-service-box-heading-section a:hover {
  color: var(--bva-dourado) !important;
}

#masthead .header_top
.smue-service-box-content-section:empty {
  display: none !important;
}

/* ========================================
   BRASÃO E NAVEGAÇÃO
   ======================================== */

#masthead .menu_row,
#masthead .menu_row.padding_row {
  background-color: var(--bva-preto) !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}

#masthead .site-title-container {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

#masthead .site-title-container > a {
  color: var(--bva-branco) !important;
  font-size: clamp(21px, 1.8vw, 27px) !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
  letter-spacing: -.4px !important;
  text-decoration: none !important;
}

/* BRASÃO ORIGINAL */

#masthead .logo img,
#masthead .site-title-container img {
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: 60px !important;
  object-fit: contain !important;
}

/* ========================================
   MENU PRINCIPAL
   ======================================== */

#masthead .menu nav > ul > li > a,
#masthead .menu .navbar-nav > li > a {
  color: var(--bva-branco) !important;
  font-size: clamp(12px, 0.95vw, 14px) !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  letter-spacing: .15px !important;
  text-decoration: none !important;
  white-space: nowrap !important;
}

/* REDUZIR ESPAÇAMENTO ENTRE OPÇÕES */

#masthead .menu nav > ul > li > a,
#masthead .menu .navbar-nav > li > a {
  padding-left: 8px !important;
  padding-right: 8px !important;
}

#masthead .menu nav > ul > li > a:hover,
#masthead .menu .navbar-nav > li > a:hover {
  color: var(--bva-dourado) !important;
}

/* PÁGINA ATIVA */

#masthead .menu nav > ul >
li.current-menu-item > a,
#masthead .menu nav > ul >
li.current_page_item > a,
#masthead .menu nav > ul >
li.active > a,
#masthead .menu .navbar-nav >
li.active > a {
  color: var(--bva-vermelho) !important;
}

/* ========================================
   OCULTAR BLOG APENAS NA NAVEGAÇÃO
   Não interfere com a página nem os artigos.
   ======================================== */

#masthead .menu nav > ul > li:has(> a[href$="/blog.html"]),
#masthead .menu nav > ul > li:has(> a[href$="/blog"]),
#masthead .menu nav > ul > li:has(> a[href$="/blog/"]),
#masthead .menu .navbar-nav > li:has(> a[href$="/blog.html"]),
#masthead .menu .navbar-nav > li:has(> a[href$="/blog"]),
#masthead .menu .navbar-nav > li:has(> a[href$="/blog/"]) {
  display: none !important;
}

/* ========================================
   ACESSIBILIDADE
   ======================================== */

#masthead a:focus-visible {
  outline: 2px solid var(--bva-dourado) !important;
  outline-offset: 3px !important;
}

/* ========================================
   ECRÃS MÉDIOS / PORTÁTEIS
   ======================================== */

@media (min-width: 768px) and (max-width: 1366px) {

  #masthead .site-title-container > a {
    font-size: 21px !important;
  }

  #masthead .logo img,
  #masthead .site-title-container img {
    max-height: 52px !important;
  }

  #masthead .menu nav > ul > li > a,
  #masthead .menu .navbar-nav > li > a {
    font-size: 12px !important;
    padding-left: 5px !important;
    padding-right: 5px !important;
    letter-spacing: 0 !important;
  }

  #masthead .menu_row,
  #masthead .menu_row.padding_row {
    padding-top: 7px !important;
    padding-bottom: 7px !important;
  }
}

/* ========================================
   TABLET
   ======================================== */

@media (min-width: 768px) and (max-width: 1100px) {

  #masthead .site-title-container > a {
    font-size: 19px !important;
  }

  #masthead .logo img,
  #masthead .site-title-container img {
    max-height: 48px !important;
  }
}

/* ========================================
   TELEMÓVEL
   ======================================== */

@media (max-width: 767px) {

  #masthead .header_top,
  #masthead .header_top.padding_row {
    padding-top: 6px !important;
    padding-bottom: 6px !important;
  }

  #masthead .header_top > .header_add:last-child
  .smue-service-box-obj {
    justify-content: flex-start !important;
  }

  #masthead .header_top > .header_add:last-child,
  #masthead .header_top > .header_add:last-child
  .smue-service-box-heading-section h6 {
    text-align: left !important;
  }

  #masthead .header_top
  .smue-service-box-heading-section h1,
  #masthead .header_top
  .smue-service-box-heading-section h2,
  #masthead .header_top
  .smue-service-box-heading-section h3,
  #masthead .header_top
  .smue-service-box-heading-section h4,
  #masthead .header_top
  .smue-service-box-heading-section h5,
  #masthead .header_top
  .smue-service-box-heading-section h6 {
    font-size: 12px !important;
    overflow-wrap: anywhere !important;
  }

  #masthead .menu_row,
  #masthead .menu_row.padding_row {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }

  #masthead .site-title-container > a {
    font-size: 21px !important;
  }

  #masthead .logo img,
  #masthead .site-title-container img {
    max-height: 52px !important;
  }

  /* Não interferir com a abertura do menu móvel */
  #masthead .menu nav > ul > li > a,
  #masthead .menu .navbar-nav > li > a {
    font-size: 14px !important;
    white-space: normal !important;
    padding-top: 9px !important;
    padding-bottom: 9px !important;
  }
}

/* ========================================
   MOVIMENTO REDUZIDO
   ======================================== */

@media (prefers-reduced-motion: reduce) {
  #masthead a {
    transition: none !important;
  }
}