/* sentinela.css — camada de marca "Sentinela do Norte"
   Adaptação pt-PT (vigilância humana · Norte de Portugal) do clone garda.com.
   Paleta da marca: amarelo #F9F811 · vermelho #EA0808 · preto #000 · branco #fff.
   Estratégia: as superfícies que eram vermelhas (theme-red-1) passam a amarelo com
   texto preto; os blocos [data-sn="quote"] e [data-sn="fmain"] (marcados no build)
   passam a preto premium com acentos amarelos. Carregado DEPOIS de clone.css. */

:root {
  --sn-yellow: #F9F811;
  --sn-red: #EA0808;
  --sn-red-deep: #B00606; /* vermelho p/ texto pequeno sobre amarelo (≥4.5:1) */

  /* token global vermelho → vermelho da marca (bordas, realces, erros, hovers) */
  --color-red-1: var(--sn-red);
  --color-red-2: var(--sn-red-deep);

  /* ---- superfícies amarelas (header, mega-menu, pane móvel, newsletter) ---- */
  --theme-red-1-bg-color: var(--sn-yellow);
  --theme-red-1-active-color: #000;
  --theme-red-1-border-color: rgba(0, 0, 0, 0.25);
  --theme-red-1-h1-color: #000;
  --theme-red-1-h2-color: #000;
  --theme-red-1-h3-color: #000;
  --theme-red-1-h4-color: #000;
  --theme-red-1-h5-color: #000;
  --theme-red-1-h6-color: #000;
  --theme-red-1-p-color: #000;
  --theme-red-1-span-color: #000;
  --theme-red-1-quote-color: #000;
  --theme-red-1-display-lg-color: #000;
  --theme-red-1-uppertitle-color: #000;
  --theme-red-1-body-lg-color: #000;
  --theme-red-1-body-sm-color: #000;
  --theme-red-1-caption-lg-color: #000;
  --theme-red-1-caption-sm-color: #000;
  --theme-red-1-list-bullet-color: #000;
  --theme-red-1-list-text-color: #000;
  --theme-red-1-link-color: rgba(0, 0, 0, 0.72);
  --theme-red-1-link-hover-color: #000;

  --theme-red-1-btn-primary-bg-color: transparent;
  --theme-red-1-btn-primary-text-color: #000;
  --theme-red-1-btn-primary-icon-bg-color: #000;
  --theme-red-1-btn-primary-icon-color: var(--sn-yellow);
  --theme-red-1-btn-primary-hover-bg-color: #000;
  --theme-red-1-btn-primary-hover-text-color: var(--sn-yellow);
  --theme-red-1-btn-primary-hover-icon-bg-color: #000;
  --theme-red-1-btn-primary-hover-icon-color: var(--sn-yellow);

  --theme-red-1-btn-secondary-bg-color: transparent;
  --theme-red-1-btn-secondary-border-color: rgba(0, 0, 0, 0.55);
  --theme-red-1-btn-secondary-text-color: #000;
  --theme-red-1-btn-secondary-hover-bg-color: #000;
  --theme-red-1-btn-secondary-hover-border-color: #000;
  --theme-red-1-btn-secondary-hover-text-color: var(--sn-yellow);

  --theme-red-1-btn-tertiary-text-color: #000;
  --theme-red-1-btn-tertiary-icon-color: #000;
  --theme-red-1-btn-tertiary-hover-text-color: var(--sn-red-deep);

  --theme-red-1-form-field-bg-color: #fff;
  --theme-red-1-form-field-text-color: #000;
  --theme-red-1-form-field-border-color: rgba(0, 0, 0, 0.45);
  --theme-red-1-form-field-focus-color: #000;
  --theme-red-1-form-field-placeholder-color: rgba(0, 0, 0, 0.55);
  --theme-red-1-form-checkbox-active-color: #000;
  --theme-red-1-form-select-active-color: #f5f5f5;
  --theme-red-1-form-error-color: var(--sn-red-deep);
}

/* ---- blocos escuros premium: citação de cliente + rodapé principal ---- */
[data-sn="quote"],
[data-sn="fmain"] {
  --theme-red-1-bg-color: var(--color-black);
  --theme-red-1-active-color: #fff;
  --theme-red-1-border-color: rgba(255, 255, 255, 0.28);
  --theme-red-1-h1-color: #fff;
  --theme-red-1-h2-color: #fff;
  --theme-red-1-h3-color: #fff;
  --theme-red-1-h4-color: #fff;
  --theme-red-1-h5-color: #fff;
  --theme-red-1-h6-color: #fff;
  --theme-red-1-p-color: #fff;
  --theme-red-1-span-color: #fff;
  --theme-red-1-quote-color: #fff;
  --theme-red-1-display-lg-color: #fff;
  --theme-red-1-uppertitle-color: var(--sn-yellow);
  --theme-red-1-body-lg-color: #fff;
  --theme-red-1-body-sm-color: #fff;
  --theme-red-1-caption-lg-color: rgba(255, 255, 255, 0.85);
  --theme-red-1-caption-sm-color: rgba(255, 255, 255, 0.85);
  --theme-red-1-list-bullet-color: var(--sn-yellow);
  --theme-red-1-list-text-color: #fff;
  --theme-red-1-link-color: rgba(255, 255, 255, 0.75);
  --theme-red-1-link-hover-color: var(--sn-yellow);
}

/* barra global (era theme-black) → cinza escuro para separar camadas do rodapé */
[data-sn="gbar"] { background-color: var(--color-grey-6); }

/* mega-menu reconstruído → amarelo com texto preto */
.clone-menu-panel {
  background-color: var(--sn-yellow);
  border-top: 1px solid rgba(0, 0, 0, 0.2);
  color: #000;
}
.clone-menu-panel .Link_link__C_PGU { color: #000; }
.clone-menu-grid .Link_external__gqXka .Link_icon__PtGsQ path { fill: #000; }

/* ícones desenhados a branco que agora vivem sobre amarelo → pretos */
.Header_header__fR3A5 svg [stroke="white"] { stroke: #000; }
.Header_header__fR3A5 svg [fill="white"] { fill: #000; }
.MobileMenu_menuPane__aPHNx svg [stroke="white"] { stroke: #000; }
.MobileMenu_menuPane__aPHNx svg [fill="white"] { fill: #000; }

/* logótipo (SVG inline do build) */
.Header_header__fR3A5 .Header_logo__WDNpE svg { width: 100%; height: auto; display: block; }
.sn-logo text { text-rendering: geometricPrecision; }

/* rótulo do cliente na citação (substitui o logo Spotify) */
.sn-client-label {
  width: auto !important;
  height: auto !important;
  margin: 6px 0 10px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sn-yellow);
}

/* brasão da marca no lugar da foto do cliente */
.sn-crest {
  width: 100%;
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  background: #0e0e0e;
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.sn-crest svg { width: 46%; height: auto; }

/* rodapé móvel sobre fundo preto: os ícones +/× do original eram preto/branco
   para o rodapé vermelho da Garda; aqui passam ao amarelo da marca (18.5:1) */
.Footer_mobileFooter__xwRPV .Collapsible_trigger__XPoDX svg path { fill: var(--sn-yellow); }

/* rodapé móvel: os painéis clonados do mega-menu herdavam margin:0 auto +
   max-width e colapsavam para ~169px dentro do acordeão (links quebravam
   palavra a palavra); aqui o painel fica à largura total e cada link é uma
   linha tátil (≥44px) */
.Footer_mobileFooter__xwRPV .clone-collapsible-content .clone-menu-grid {
  width: 100%;
  max-width: none;
  margin: 0;
  row-gap: 2px;
  padding: 0 0 10px;
}
.Footer_mobileFooter__xwRPV .clone-collapsible-content .DesktopMenu_subMenuItem { margin: 0; }
.Footer_mobileFooter__xwRPV .clone-collapsible-content a.Link_link__C_PGU {
  display: block;
  width: 100%;
  padding: 10px 0;
}

/* foco sempre visível também sobre amarelo */
.theme-red-1 a:focus-visible,
.theme-red-1 button:focus-visible,
.theme-red-1 [role="button"]:focus-visible,
.theme-red-1 input:focus-visible {
  outline: 2px solid #000;
  outline-offset: 2px;
}