/* ==========================================================================
   VILLAS-BOAS — CSS do child theme
   --------------------------------------------------------------------------
   1. BASE
   2. HEADER / MENU PRINCIPAL
   3. MENU DO FOOTER
   4. BOTÕES (CTA do Salient)
   5. TABS E ACORDEÕES
   6. BACKGROUNDS E GRADIENTES
   7. UTILITÁRIOS
   8. FORMCRAFT (formulário de contacto)
   ========================================================================== */

/* ==========================================================================
   1. BASE
   ========================================================================== */

html {
  scrollbar-gutter: auto;
  overflow-y: auto;
}

/* ==========================================================================
   2. HEADER / MENU PRINCIPAL
   ========================================================================== */

/* ---------- Barra secundária (myVILLAS-BOAS) ----------
   Salient → Header → Secondary Navigation, com "secondary nav text".
   Markup: #header-secondary-outer > .container > nav > .nectar-center-text
           > .secondary-nav > a.secondary-nav--link
   -------------------------------------------------------- */

body #header-secondary-outer {
  background: #d9d9d9 !important;
  border: 0 !important;
}

body #header-secondary-outer,
body #header-secondary-outer .container,
body #header-secondary-outer nav,
body #header-secondary-outer .secondary-nav {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  height: auto !important;
  min-height: 0 !important;
}

body #header-secondary-outer .container {
  display: flex !important;
  justify-content: flex-end;
  align-items: center;
  min-height: 36px !important;
}

body #header-secondary-outer nav {
  float: none !important;
  width: auto !important;
  display: flex;
  align-items: center;
}

/* o Salient põe isto em absolute com um translateY de animação */
body #header-secondary-outer .nectar-center-text {
  position: static !important;
  transform: none !important;
  width: auto !important;
  text-align: right !important;
  opacity: 1 !important;
}

body #header-secondary-outer .secondary-nav {
  float: none !important;
  display: flex;
  align-items: center;
}

body #header-secondary-outer a.secondary-nav--link {
  display: inline-flex !important;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
  padding: 0 !important;
  color: #001e62 !important;
  font-size: 14px !important;
  line-height: 1 !important;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  opacity: 1 !important;
  transition: opacity 0.25s ease;
}

body #header-secondary-outer a.secondary-nav--link:hover {
  color: #001e62 !important;
  opacity: 0.7;
}

/* ícone de conta */
body #header-secondary-outer a.secondary-nav--link::after {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  background: url("/wp-content/uploads/2026/09/account_circle_re.svg") no-repeat
    center / contain;
  transform: scale(1);
  transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

body #header-secondary-outer a.secondary-nav--link:hover::after {
  transform: scale(1.15);
}

@media only screen and (max-width: 1000px) {
  body #header-secondary-outer {
    display: none !important;
  }
}

div#header-space,
div#header-outer {
  border-bottom-left-radius: 25px !important;
  border-bottom-right-radius: 25px !important;
}

ul.sf-menu.sf-js-enabled.sf-arrows {
  gap: 50px;
}

#header-outer .sf-menu > li > a,
#header-outer .sf-menu > li > a > .menu-title-text {
  font-size: 18px !important;
}

/* último item do menu como botão (pill branco) */
#header-outer .sf-menu > li:last-child > a,
#header-secondary-outer .sf-menu > li:last-child > a {
  position: relative !important;
  display: inline-flex !important;
  align-items: center;
  background: #fff !important;
  color: #0e33ca !important;
  border-radius: 100px !important;
  padding: 10px 46px 10px 26px !important;
  line-height: 1 !important;
  margin-left: 14px;
  transition: opacity 0.25s ease;
}

#header-outer .sf-menu > li:last-child > a:hover,
#header-outer .sf-menu > li:last-child.current-menu-item > a {
  background: #fff !important;
  color: #0e33ca !important;
}

/* o texto do Salient tem cor própria — tem de ser forçada aqui */
#header-outer .sf-menu > li:last-child > a .menu-title-text,
#header-outer .sf-menu > li:last-child > a:hover .menu-title-text,
#header-outer .sf-menu > li:last-child.current-menu-item > a .menu-title-text {
  color: #0e33ca !important;
  opacity: 1 !important;
}

/* bolinha azul do botão */
#header-outer .sf-menu > li:last-child > a::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  top: 50%;
  right: 22px;
  width: 6px;
  height: 6px;
  margin: -3px 0 0 0;
  border-radius: 50%;
  background: #0e33ca !important;
  opacity: 1 !important;
  transform: scale(1);
  transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

#header-outer .sf-menu > li:last-child > a:hover::after {
  transform: scale(2);
}

/* mata o sublinhado/animação do Salient neste item */
#header-outer .sf-menu > li:last-child > a > .menu-title-text::after,
#header-outer .sf-menu > li:last-child > a > .menu-title-text::before,
#header-outer .sf-menu > li:last-child > a::before {
  display: none !important;
  content: none !important;
}

@media (prefers-reduced-motion: reduce) {
  #header-outer .sf-menu > li:last-child > a::after {
    transition: none;
  }
}
body:not([data-header-format="left-header"])
  #header-outer
  .sf-menu
  li
  ul.sub-menu {
  background: #fff !important;
  border-radius: 20px;
  text-align: center;
}
/* centrar o dropdown debaixo do item do menu
   (o Salient alinha-o pela esquerda do item) */
body
  #header-outer:not([data-format="left-header"])
  #top
  nav
  > ul
  > li:not(.megamenu)
  > ul.sub-menu {
  width: 220px !important;
  left: 50% !important;
  right: auto !important;
  margin-left: -110px !important; /* metade da largura */
  padding-left: 0 !important;
  padding-right: 0 !important;
}

#header-outer:not([data-format="left-header"])
  #top
  nav
  > ul
  > li:not(.megamenu)
  ul.sub-menu
  a {
  color: #001e62 !important;
}

#header-outer:not([data-format="left-header"])
  #top
  nav
  > ul
  > li:not(.megamenu)
  ul.sub-menu
  a:hover {
  background: transparent !important;
  text-decoration: underline;
}

#header-outer:not([data-format="left-header"])
  #top
  nav
  > ul
  > li:not(.megamenu)
  ul.sub-menu
  .current-menu-item
  > a {
  background: transparent !important;
  text-decoration: underline;
}

body
  #header-outer:not([data-format="left-header"])
  #top
  nav
  > ul
  > li:not(.megamenu)
  .sfHover
  > a,
body
  #header-outer:not([data-format="left-header"])
  #top
  nav
  > ul
  > li:not(.megamenu)
  ul
  a:hover,
body
  #header-outer:not([data-format="left-header"])
  #top
  nav
  > ul
  > li:not(.megamenu)
  ul
  a:focus,
body
  #header-outer:not([data-format="left-header"])
  #top
  nav
  > ul
  > li:not(.megamenu)
  ul
  a:active,
body
  #header-outer:not([data-format="left-header"])
  #top
  nav
  > ul
  > li:not(.megamenu)
  ul
  .current-menu-item
  > a,
body
  #header-outer:not([data-format="left-header"])
  #top
  nav
  > ul
  > li:not(.megamenu)
  ul
  .current-menu-ancestor
  > a {
  background: transparent !important;
  background-color: transparent !important;
  color: #001e62 !important;
}
/* ==========================================================================
   3. MENU DO FOOTER — sem bullets e sem hover azul
   ========================================================================== */

body #menu-footer-menu,
body #menu-footer-menu li,
body #menu-footer-menu ul,
body #menu-footer-menu ul li,
#footer-outer #menu-footer-menu,
#footer-outer #menu-footer-menu li {
  list-style: none !important;
  list-style-type: none !important;
  list-style-image: none !important;
  background-image: none !important;
  margin-left: 0 !important;
  padding-left: 0 !important;
  text-indent: 0 !important;
}

body #menu-footer-menu li::marker {
  content: "" !important;
  color: transparent !important;
  font-size: 0 !important;
}

body #menu-footer-menu li::before,
body #menu-footer-menu li::after,
body #menu-footer-menu li a::before,
body #menu-footer-menu li a::after,
#footer-outer #menu-footer-menu li::before,
#footer-outer #menu-footer-menu li::after {
  display: none !important;
  content: none !important;
  background: none !important;
}

body #menu-footer-menu li a,
body #menu-footer-menu li a:hover,
body #menu-footer-menu li a:focus,
body #menu-footer-menu li.current-menu-item a,
body #menu-footer-menu li:hover > a {
  color: inherit !important;
  text-decoration: none !important;
  transition: opacity 0.25s ease;
}

body #menu-footer-menu li a:hover {
  opacity: 0.7;
}

/* ==========================================================================
   4. BOTÕES (CTA do Salient)
   --------------------------------------------------------------------------
   .btn-circle  -> bolinha à direita, cresce no hover
   .blue        -> variante com bolinha azul (botão branco)
   .btn-account -> ícone de conta em vez da bolinha
   .w-100       -> botão a 100% da largura
   ========================================================================== */

/* ---------- CTA com bolinha (dot) ---------- */

.nectar-cta.btn-circle .nectar-button-type .link_wrap {
  position: relative !important;
  display: inline-block !important;
  padding-right: 46px !important; /* espaço para a bolinha */
}

.nectar-cta.btn-circle .nectar-button-type .link_wrap::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  top: 50%;
  right: 22px;
  width: 6px;
  height: 6px;
  margin: -3px 0 0 0;
  border-radius: 50%;
  background-color: #fff;
  opacity: 1;
  pointer-events: none;
  transform: scale(1);
  transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.nectar-cta.btn-circle.blue .nectar-button-type .link_wrap::after {
  background-color: #0e33ca;
}

/* hover: a bolinha cresce suavemente */
.nectar-cta.btn-circle:hover .nectar-button-type .link_wrap::after,
.nectar-cta.btn-circle .link_text:focus-visible ~ .link_wrap::after {
  transform: scale(2);
}

@media (prefers-reduced-motion: reduce) {
  .nectar-cta.btn-circle .nectar-button-type .link_wrap::after {
    transition: none;
  }
}

/* ---------- CTA com ícone de conta (login) ---------- */

.nectar-cta.btn-account .nectar-button-type .link_wrap {
  position: relative !important;
  display: inline-block !important;
  padding-right: 52px !important; /* espaço para o ícone */
}

.nectar-cta.btn-account .nectar-button-type .link_wrap::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  top: 50%;
  right: 20px;
  width: 20px;
  height: 20px;
  margin: -10px 0 0 0;
  border-radius: 0;
  background-color: currentColor; /* segue a cor do texto do botão */
  -webkit-mask: url("/wp-content/uploads/2026/08/account_circle_login_blue.svg")
    no-repeat center / contain;
  mask: url("/wp-content/uploads/2026/08/account_circle_login_blue.svg")
    no-repeat center / contain;
  pointer-events: none;
  transform: scale(1);
  transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.nectar-cta.btn-account.blue .nectar-button-type .link_wrap::after {
  background-color: #0e33ca;
}

/* hover: o ícone cresce ligeiramente */
.nectar-cta.btn-account:hover .nectar-button-type .link_wrap::after,
.nectar-cta.btn-account .link_text:focus-visible ~ .link_wrap::after {
  transform: scale(1.18);
}

@media (prefers-reduced-motion: reduce) {
  .nectar-cta.btn-account .nectar-button-type .link_wrap::after {
    transition: none;
  }
}

/* ---------- Botão a toda a largura ---------- */

.btn-circle.w-100,
.btn-circle.w-100 span {
  width: 100% !important;
}

/* ==========================================================================
   5. TABS E ACORDEÕES
   ========================================================================== */

ul.wpb_tabs_nav.ui-tabs-nav.clearfix {
  display: flex;
  gap: 50px;
  justify-content: center;
}

li.tab-item {
  background: transparent !important;
  border: none !important;
}

li.tab-item a {
  background: transparent !important;
  border-radius: 25px !important;
  border: none !important;
  color: #0e33ca !important;
  font-size: 22px !important;
  font-weight: 600 !important;
}

li.tab-item.active-tab {
  border-radius: 25px !important;
  border: none !important;
}

li.tab-item.active-tab a {
  background: #d7181f !important;
  color: #fff !important;
  border-radius: 25px !important;
  border: none !important;
}

@media only screen and (max-width: 999px) {
  ul.wpb_tabs_nav.ui-tabs-nav.clearfix {
    gap: 0px;
    flex-wrap: wrap;
  }
}

/* ---------- Acordeões ---------- */

.toggles.accordion a {
  color: #0e33ca !important;
  font-weight: 600;
  font-size: 26px;
  line-height: 36px;
}

.toggle.accent-color {
  border-bottom: none !important;
  border: 1px solid #d9d9d9 !important;
  border-radius: 20px;
  padding: 10px;
  margin-bottom: 15px !important;
}

.servicos-tab .toggle.default {
  background: #fff;
  padding: 0px 35px;
  border-radius: 20px;
  margin: 10px;
}

/* ==========================================================================
   6. BACKGROUNDS E GRADIENTES
   ========================================================================== */

.blue-gradient {
  background: linear-gradient(
    90deg,
    var(--AZUL-1, #001e62) 0%,
    var(--AZUL-2, #0e33ca) 100%
  );
  padding: 10px;
  border-radius: 20px;
  color: #fff;
  font-size: 24px;
  margin-bottom: 10px !important;
}

.gradient-hero-blue .row-bg.using-bg-color {
  background: linear-gradient(
    180deg,
    var(--AZUL-1, #001e62) 0%,
    var(--AZUL-2, #0e33ca) 100%
  ) !important;
}

.bg-gray-gradient {
  background:
    linear-gradient(
      78deg,
      var(--CINZA, #dedede) -3.04%,
      var(--BRANCO, #fff) 111.85%
    ),
    linear-gradient(90deg, var(--CINZA, #dedede) 0%, var(--BRANCO, #fff) 100%) !important;
}

.bg-gray-gradient .row-bg.using-bg-color {
  background: linear-gradient(
    66deg,
    var(--CINZA, #dedede) 18.36%,
    var(--BRANCO, #fff) 116.74%
  ) !important;
}

.bg-nor .column-image-bg {
  background-repeat: no-repeat !important;
  background-size: cover !important;
}

/* ---------- Hero em telemóvel (inclui iOS) ----------
   - svh em vez de vh: o iOS conta a barra do Safari nos vh e a imagem
     ficava mais alta do que o ecrã, a mostrar só a zona clara da foto
   - véu azul por cima da foto, para o texto branco ter contraste
   -------------------------------------------------------- */

@media only screen and (max-width: 690px) {
  .wpb_row.top-level.vc_row-o-full-height[style*="vh"] {
    min-height: 88svh !important;
  }

  .wpb_row.top-level.vc_row-o-full-height .row-bg-wrap::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    background: linear-gradient(
      180deg,
      rgba(0, 30, 98, 0.35) 0%,
      rgba(0, 30, 98, 0.45) 40%,
      rgba(0, 30, 98, 0.7) 100%
    );
  }
}

/* ==========================================================================
   7. UTILITÁRIOS
   ========================================================================== */

.white {
  color: white !important;
}

.footer-img img {
  width: 75% !important;
}

/* número grande responsive — uso: <span class="num-big">80</span> */
.num-big {
  display: inline-block;
  font-size: clamp(48px, 7vw, 100px) !important;
  line-height: 1 !important;
}

@media (max-width: 1000px) {
  .num-big {
    font-size: 70px !important;
  }
}

@media (max-width: 690px) {
  .num-big {
    font-size: 48px !important;
  }
}

/* ==========================================================================
   8. FORMCRAFT — formulário de contacto
   ========================================================================== */

.fc-form {
  --fcc-azul: #0e33ca;
  --fcc-navy: #001e62;
  --fcc-borda: #e3e3e3;
  --fcc-raio: 14px;
  --fcc-gap: 14px;
}

/* ---------- Grelha ---------- */

.fc-form .form-page-content {
  display: flex;
  flex-wrap: wrap;
  margin: 0 calc(var(--fcc-gap) / -2);
}

.fc-form .form-element {
  padding: 0 calc(var(--fcc-gap) / 2) var(--fcc-gap);
  box-sizing: border-box;
  margin: 0 !important;
}

@media only screen and (max-width: 690px) {
  .fc-form .form-element {
    width: 100% !important;
  }
}

/* ---------- Caixas dos campos ---------- */

/* as labels não são usadas: o texto vem do placeholder */
.fc-form .field-cover .main-label,
.fc-form .field-cover .sub-label,
.fc-form .field-cover .sub-label-false {
  display: none !important;
}

/* caixa branca só nos campos (não no bloco do botão nem nos radios) */
.fc-form .oneLineText-cover,
.fc-form .dropdown-cover,
.fc-form .textarea-cover,
.fc-form .email-cover,
.fc-form .phone-cover,
.fc-form .number-cover {
  position: relative;
  display: block;
  background: #fff;
  border: 1px solid var(--fcc-borda);
  border-radius: var(--fcc-raio);
  padding: 16px 20px;
  margin: 0 !important;
  box-sizing: border-box;
}

.fc-form .submit-cover,
.fc-form .checkbox-cover {
  border: 0 !important;
  background: none !important;
  padding: 0 !important;
}

/* ---------- Inputs ---------- */

.fc-form input[type="text"],
.fc-form input[type="email"],
.fc-form input[type="tel"],
.fc-form input[type="number"],
.fc-form textarea,
.fc-form select {
  width: 100% !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  outline: none !important;
  min-height: 0 !important;
  color: var(--fcc-navy) !important;
  text-transform: uppercase;
}

.fc-form input::placeholder,
.fc-form textarea::placeholder {
  color: var(--fcc-azul) !important;
  opacity: 1 !important;
  text-transform: uppercase;
  font-weight: 600 !important;
}

.fc-form textarea {
  resize: none;
  min-height: 200px !important;
}

.fc-form .count- {
  display: none !important;
}

/* ---------- Select ---------- */

.fc-form select {
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  padding-right: 30px !important;
  color: var(--fcc-azul) !important;
  font-weight: 600 !important;
}

.fc-form .dropdown-cover::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 22px;
  width: 14px;
  height: 9px;
  margin-top: -4px;
  background-color: var(--fcc-azul);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 9'><path d='M1 1l6 6 6-6' fill='none' stroke='black' stroke-width='2'/></svg>")
    no-repeat center / contain;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 9'><path d='M1 1l6 6 6-6' fill='none' stroke='black' stroke-width='2'/></svg>")
    no-repeat center / contain;
  pointer-events: none;
}

.fc-form .dropdown-cover input[type="text"] {
  display: none !important;
}

/* ---------- Radios (Particular / Empresas) ---------- */

.fc-form .checkbox-cover label {
  display: inline-flex !important;
  align-items: center;
  gap: 10px;
  margin: 0 34px 0 0 !important;
  width: auto !important;
  cursor: pointer;
  color: var(--fcc-navy);
}

.fc-form .checkbox-cover label img {
  display: none !important;
}

.fc-form .checkbox-cover input[type="radio"] {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  margin: 0 !important;
  border: 2px solid var(--fcc-azul);
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
  transition: background 0.2s ease;
}

.fc-form .checkbox-cover input[type="radio"]:checked {
  background: var(--fcc-navy);
  border-color: var(--fcc-navy);
  box-shadow: inset 0 0 0 3px #fff;
}

/* ---------- Nota + botão de envio ---------- */

.fc-form .form-element-type-submit::before {
  content: "*Campos obrigatórios";
  display: block;
  color: var(--fcc-navy);
  font-size: 17px;
  margin: 0 0 14px;
}

.fc-form .submit-cover {
  text-align: center;
}

body .fc-form .submit-cover button.submit-button,
body .fc-form button.submit-button,
body .fc-form button.submit-button:hover,
body .fc-form button.submit-button:focus,
body .fc-form input[type="submit"] {
  background: var(--fcc-navy) !important;
  background-image: none !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 100px !important;
  padding: 10px 34px !important;
  font-size: 16px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  box-shadow: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  cursor: pointer;
  transition: opacity 0.25s ease;
}

body .fc-form button.submit-button .text {
  font-size: 16px !important;
  text-transform: uppercase !important;
}

body .fc-form button.submit-button:hover {
  opacity: 0.85;
}

/* ---------- Erros e créditos ---------- */

.fc-form .error {
  color: #d7181f;
}

.powered-by {
  display: none !important;
}
.cmplz-cookiebanner .cmplz-links ul li {
  list-style: none !important;
  list-style-type: none !important;
}