/*
Theme Name: SingularData
Theme URI: https://singulardata.com.pt/
Author: SingularData
Author URI: https://singulardata.com.pt/
Description: Tema custom para SingularData - replica fielmente o site Next.js original. Inclui mega menu de Soluções, header sticky, integração GA4/GTM/Ads, formulário de contacto SMTP, widget WhatsApp. Conteúdo de cada página gerido pelo editor do WordPress.
Version: 2.4.0
Requires at least: 6.0
Tested up to: 6.9.4
Requires PHP: 7.4
License: Proprietário
License URI: https://singulardata.com.pt/termos-de-servico
Text Domain: singulardata
*/

/* ===== Sticky header ===== */
.singulardata-header-sticky {
    position: sticky;
    top: 0;
    z-index: 100;
    background: #fff;
    transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.singulardata-header-sticky.is-scrolled {
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}

/* Quando admin bar do WP está visível, header não pode tapá-la */
.admin-bar .singulardata-header-sticky {
    top: 32px;
}
@media screen and (max-width: 782px) {
    .admin-bar .singulardata-header-sticky {
        top: 46px;
    }
}

/* ===== Mega menu - aparecer no hover ===== */
header.menu.-style-1 .navigator > ul > li {
    position: relative;
}
header.menu.-style-1 .navigator > ul > li > a {
    padding: 16px 14px;
    display: inline-flex;
    align-items: center;
    font-weight: 600;
    color: #1B1C20;
    text-decoration: none;
    transition: color 0.2s;
}
header.menu.-style-1 .navigator > ul > li.active > a,
header.menu.-style-1 .navigator > ul > li > a:hover {
    color: #0097D6;
}

/* Dropdown padrão (Sobre Nós) */
header.menu.-style-1 .navigator > ul > li .dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    background: #fff;
    min-width: 240px;
    box-shadow: 0 12px 32px rgba(0,0,0,0.08);
    border-radius: 8px;
    padding: 8px 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
    z-index: 50;
    list-style: none;
    margin: 0;
}
header.menu.-style-1 .navigator > ul > li:hover > .dropdown-menu,
header.menu.-style-1 .navigator > ul > li:focus-within > .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
header.menu.-style-1 .navigator .dropdown-menu li a {
    display: block;
    padding: 10px 18px;
    color: #1B1C20;
    text-decoration: none;
    font-size: 14px;
    transition: background 0.15s, color 0.15s;
}
header.menu.-style-1 .navigator .dropdown-menu li a:hover {
    background: #F2F4F7;
    color: #0097D6;
}

/* Mega menu (wide) - escapa o contexto do li e centra-se na header */
.singulardata-header-sticky { position: sticky; }
header.menu.-style-1 { position: relative; }

/* O li que tem mega menu não deve ser positioning context: dropdown ancora à .menu */
header.menu.-style-1 .navigator > ul > li:has(.dropdown-menu.-wide) {
    position: static;
}

header.menu.-style-1 .navigator > ul > li .dropdown-menu.-wide {
    position: absolute;
    top: 100%;
    left: 50%;
    right: auto;
    transform: translateX(-50%) translateY(8px);
    width: min(1100px, calc(100vw - 60px));
    padding: 28px 32px;
    gap: 0;
    margin: 0;
}
header.menu.-style-1 .navigator > ul > li:hover > .dropdown-menu.-wide,
header.menu.-style-1 .navigator > ul > li:focus-within > .dropdown-menu.-wide {
    transform: translateX(-50%) translateY(0);
}
header.menu.-style-1 .dropdown-menu.-wide .service-cate {
    display: block;
    color: #1B1C20;
    font-weight: 700;
    font-size: 16px;
    margin-top: 18px;
    text-decoration: none;
    border-bottom: 1px solid #EBEEF2;
    padding-bottom: 6px;
}
header.menu.-style-1 .dropdown-menu.-wide .service-cate:first-child { margin-top: 0; }
header.menu.-style-1 .dropdown-menu.-wide .service-cate:hover { color: #0097D6; }
header.menu.-style-1 .dropdown-menu.-wide ul {
    list-style: none;
    padding: 0;
    margin: 8px 0 0 0;
}
header.menu.-style-1 .dropdown-menu.-wide ul li a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 4px;
    color: #494D55;
    text-decoration: none;
    font-size: 14px;
    transition: color 0.15s;
}
header.menu.-style-1 .dropdown-menu.-wide ul li a:hover { color: #0097D6; }
header.menu.-style-1 .dropdown-menu.-wide ul li a [class^="icon-"] { font-size: 22px; color: #0097D6; flex-shrink: 0; }
header.menu.-style-1 .dropdown-menu.-wide .right {
    border-left: 1px solid #EBEEF2;
    padding-left: 24px;
    margin-left: 16px;
}
header.menu.-style-1 .dropdown-menu.-wide .right .content {
    background: linear-gradient(135deg, #F8FBFE 0%, #EDF6FB 100%);
    border-radius: 12px;
    padding: 20px;
}

/* ===== Header layout ===== */
header.menu.-style-1 .menu__wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 12px 0;
}
header.menu.-style-1 .navigator > ul {
    display: flex;
    gap: 4px;
    list-style: none;
    padding: 0;
    margin: 0;
}
header.menu.-style-1 .menu__wrapper__functions {
    display: flex;
    align-items: center;
    gap: 16px;
}
header.menu.-style-1 .button-main {
    background: #0097D6;
    color: #fff;
    padding: 10px 20px;
    border-radius: 999px;
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
    transition: background 0.2s, transform 0.1s;
    display: inline-flex;
    align-items: center;
    border: none;
    cursor: pointer;
}
header.menu.-style-1 .button-main:hover { background: #007BB0; }
header.menu.-style-1 .button-main:active { transform: scale(0.98); }
header.menu.-style-1 .bg-grey { background: #F2F4F7; }
header.menu.-style-1 .text-blue { color: #0097D6; }

/* Container */
header.menu.-style-1 .container,
.footer .container { max-width: 1320px; margin: 0 auto; padding: 0 24px; }

/* ===== Mobile menu ===== */
.menu__wrapper__functions__hamburger {
    background: transparent;
    border: none;
    padding: 8px;
    cursor: pointer;
    color: #1B1C20;
}
@media (max-width: 1023px) {
    .navigator { display: none; }
    body.menu-open .navigator {
        display: block;
        position: fixed;
        top: 80px; left: 0; right: 0; bottom: 0;
        background: #fff;
        z-index: 9000;
        overflow-y: auto;
        padding: 20px;
    }
    body.menu-open .navigator ul {
        flex-direction: column;
        gap: 0;
    }
    body.menu-open .navigator > ul > li > a {
        display: block;
        padding: 16px 0;
        border-bottom: 1px solid #EBEEF2;
    }
    body.menu-open .navigator .dropdown-menu {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        padding: 8px 0 8px 16px;
        background: transparent;
        width: auto !important;
        left: auto !important;
        transform: none !important;
    }
}
@media (min-width: 1024px) {
    .menu__wrapper__functions__hamburger { display: none; }
}

/* ===== Footer helpers ===== */
.footer-links { list-style: none; padding: 0; margin: 0; }
.footer-links li { margin-bottom: 8px; }
.footer-links a { color: #646570; text-decoration: none; font-size: 14px; transition: color 0.2s; }
.footer-links a:hover { color: #0097D6; }
.footer-links--sm a { font-size: 13px; }

/* ===== WordPress alignments e ajustes ===== */
.alignwide { max-width: 1200px; margin-left: auto; margin-right: auto; }
.alignfull { width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }
.aligncenter { display: block; margin-left: auto; margin-right: auto; }

.singulardata-widget-area { padding: 20px 0; }

/* Conteúdo Gutenberg dentro de páginas: garantir prose legível por defeito */
.entry-content > *:first-child { margin-top: 0; }
.entry-content > *:last-child  { margin-bottom: 0; }

/* WhatsApp float (já incluído via PHP) */
.whatsapp-float:hover { transform: scale(1.05); transition: transform 0.2s; }

/* Form de contactos: estilo do botão e mensagens */
#singulardata-contact-form button[disabled] { opacity: 0.6; cursor: not-allowed; }
#singulardata-contact-form .form-message:empty { display: none; }

/* Notificação admin para o importador */
.singulardata-import-notice { padding: 16px; background: #E7F4FB; border-left: 4px solid #0097D6; margin: 20px 0; }
.singulardata-import-notice .button { margin-left: 8px; }

/* Editor (Gutenberg): mostrar avisos quando o utilizador edita uma página com conteúdo HTML rico */
.editor-styles-wrapper .singulardata-editor-hint {
    background: #FFF3CD;
    border: 1px solid #FFE08A;
    padding: 12px 16px;
    border-radius: 6px;
    margin-bottom: 16px;
    font-size: 13px;
    color: #664D03;
}

/* ==============================================================
 * Smart Slider 3 — Slide "Como podemos ajudá-lo?" (banner home)
 * --------------------------------------------------------------
 * Classes para colar nos LAYERS do Smart Slider 3.
 * Ver manual abaixo para saber onde colar cada uma.
 * ============================================================== */

/* 1) Fundo do slide — gradiente lavanda claro (mesmo do site original) */
.n2-ss-slide.sd-hero-slide,
.sd-hero-slide,
.sd-hero-slide .n2-ss-slide-background,
.sd-hero-slide .n2-ss-slide-background-image,
.sd-hero-slide .n2-ss-slide-background-color {
  background: linear-gradient(0deg, #ffffff 0%, #e5eaff 100%) !important;
}

/* 2) Heading principal — "Como podemos ajudá-lo?" */
.sd-hero-heading,
.sd-hero-heading > *,
.sd-hero-heading h1,
.sd-hero-heading h2,
.sd-hero-heading h3,
.sd-hero-heading .n2-ss-layer-content {
  color: #0C1228 !important;
  font-family: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  font-size: clamp(36px, 4.5vw, 44px) !important;
  font-weight: 600 !important;
  line-height: 1.12 !important;
  letter-spacing: -0.02em !important;
  margin: 0 !important;
  text-transform: none !important;
}

/* 3) Texto descritivo abaixo do heading */
.sd-hero-desc,
.sd-hero-desc > *,
.sd-hero-desc p,
.sd-hero-desc .n2-ss-layer-content {
  color: #646570 !important;
  font-family: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 1.6 !important;
  margin: 0 !important;
}

/* 4) Botão "Fale connosco" — estado normal (pale lavender / texto escuro) */
.sd-hero-btn,
.sd-hero-btn .n2-ss-button-container-inside,
a.sd-hero-btn,
.sd-hero-btn > a {
  display: inline-block !important;
  background-color: #eaedf6 !important;
  color: #0C1228 !important;
  font-family: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  /*padding: 14px 30px !important;*/
  border: none !important;
  border-radius: 10px !important;
  text-decoration: none !important;
  text-shadow: none !important;
  box-shadow: none !important;
  transition: background-color 0.25s ease, color 0.25s ease, transform 0.15s ease !important;
  cursor: pointer !important;
  letter-spacing: 0 !important;
}

/* 4b) Botão "Fale connosco" — hover (indigo forte + texto branco) */
.sd-hero-btn:hover,
.sd-hero-btn:focus,
a.sd-hero-btn:hover,
a.sd-hero-btn:focus,
.sd-hero-btn:hover .n2-ss-button-container-inside,
.sd-hero-btn:focus .n2-ss-button-container-inside,
.sd-hero-btn > a:hover {
  background-color: #2E1FE5 !important;
  color: #ffffff !important;
}

/* 5) Imagem do slide — cantos arredondados */
.sd-hero-image,
.sd-hero-image img,
.sd-hero-image .n2-ss-layer-image,
.sd-hero-image .n2-ss-layer-image img {
  border-radius: 16px !important;
  overflow: hidden !important;
}

/* Todas as imagens do banner Hero ficam com o mesmo tamanho */
.hero-slider-row .n2-ss-layer-image,
.hero-slider-row .n2-ss-layer-image img,
.hero-slider-row .n2-ss-section-main-content img {
  width: 700px !important;
  height: 460px !important;
  max-width: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  border-radius: 16px !important;
  overflow: hidden !important;
}

/* 6) Botão "Fale connosco" — wrapper exterior = botão visível */
.hero-slider-row .n2-ss-button-container,
.hero-slider-row a.n2-ss-button-container {
  background-color: #eaedf6 !important;
  background: #eaedf6 !important;
  background-image: none !important;
  color: #0C1228 !important;
  font-family: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  /*padding: 14px 30px !important;*/
  border: none !important;
  border-radius: 10px !important;
  text-decoration: none !important;
  text-shadow: none !important;
  box-shadow: none !important;
  letter-spacing: 0 !important;
  display: inline-block !important;
  transition: background-color 0.25s ease, color 0.25s ease !important;
}

/* 6b) Botão interior — FORÇADO a transparente (para o verde do SS3 desaparecer) */
.hero-slider-row .n2-ss-button-container .n2-ss-button-container-inside,
.hero-slider-row .n2-ss-button-container-inside,
.hero-slider-row .n2-ss-button-container span.n2-ss-button-container-inside {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
  color: inherit !important;
  font: inherit !important;
}

/* 6c) Texto dentro do botão */
.hero-slider-row .n2-ss-button-container .n2-ss-button-text,
.hero-slider-row .n2-ss-button-text {
  background: transparent !important;
  color: inherit !important;
  text-decoration: none !important;
}

/* 7) Botão — estado hover (indigo forte + texto branco) */
.hero-slider-row .n2-ss-button-container:hover,
.hero-slider-row .n2-ss-button-container:focus,
.hero-slider-row a.n2-ss-button-container:hover,
.hero-slider-row a.n2-ss-button-container:focus {
  background-color: #2E1FE5 !important;
  background: #2E1FE5 !important;
  color: #ffffff !important;
}

/* 7b) Garantir que o interior continua transparente em hover */
.hero-slider-row .n2-ss-button-container:hover .n2-ss-button-container-inside,
.hero-slider-row .n2-ss-button-container:focus .n2-ss-button-container-inside,
.hero-slider-row .n2-ss-button-container:hover .n2-ss-button-text {
  background: transparent !important;
  background-color: transparent !important;
  color: inherit !important;
}


.entry-header .entry-title,
.page-header .entry-title {
    text-align: center;
}
.entry-header h1.heading2 {
    text-align: center !important;
}