/* ============================================================
   Tiago Portfolio Core — estilos do formulário e banner RGPD
   Alinhado com o Manual de Branding (Tiago Dias):
   - Cores: Noir #07080D · Papel #F7F5F0 · Azul elétrico #536DFE
            Roxo #8B5CF6 · Dourado #D6AD60 · Ciano #44D0DB
   - Tipografia: Manrope (títulos) / DM Sans (texto e interface)
     Fallback: Arial, sans-serif — SEM carregar fontes de terceiros
     (privacidade por conceção). Para render 100% fiel, as famílias
     devem ser auto-alojadas via @font-face no tema/theme.json.
   ============================================================ */
:root {
  --tdp-noir: #07080D;
  --tdp-noir-2: #10131d;
  --tdp-paper: #F7F5F0;
  --tdp-muted: #aeb4c4;
  --tdp-blue: #536DFE;
  --tdp-purple: #8B5CF6;
  --tdp-gold: #D6AD60;
  --tdp-cyan: #44D0DB;
  --tdp-line: rgba(247, 245, 240, .14);
  --tdp-font-display: 'Manrope', Arial, sans-serif;
  --tdp-font-body: 'DM Sans', Arial, sans-serif;
}

/* ---------- Formulário ---------- */
.tdp-form {
  display: grid;
  gap: 22px;
  padding: clamp(24px, 5vw, 48px);
  background: var(--tdp-noir);
  border: 1px solid var(--tdp-line);
  border-radius: 24px;
  color: var(--tdp-paper);
  font-family: var(--tdp-font-body);
}
.tdp-form-title {
  margin: 0;
  font-family: var(--tdp-font-display);
  font-weight: 700;
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1.05;
  color: var(--tdp-paper);
}
.tdp-form-intro {
  margin: -6px 0 2px;
  font-size: clamp(16px, 1.4vw, 19px);
  line-height: 1.5;
  color: var(--tdp-muted);
}
.tdp-form label {
  display: grid;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--tdp-muted);
}
.tdp-form input,
.tdp-form textarea {
  width: 100%;
  padding: 13px 2px;
  border: 0;
  border-bottom: 1px solid rgba(247, 245, 240, .2);
  background: transparent;
  color: var(--tdp-paper);
  font-family: var(--tdp-font-body);
  font-size: 16px;
  text-transform: none;
  letter-spacing: normal;
}
.tdp-form input::placeholder,
.tdp-form textarea::placeholder { color: rgba(174, 180, 196, .6); }
.tdp-form input:focus,
.tdp-form textarea:focus {
  outline: none;
  border-bottom-color: var(--tdp-blue);
  box-shadow: 0 1px 0 0 var(--tdp-blue);
}

/* Botão — Azul elétrico = ação primária (manual); dourado fica p/ acentos */
.tdp-form button,
.tdp-privacy button {
  padding: 14px 22px;
  border: 1px solid var(--tdp-blue);
  border-radius: 999px;
  background: var(--tdp-blue);
  color: var(--tdp-paper);
  font-family: var(--tdp-font-body);
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
  transition: filter .18s ease, transform .18s ease;
}
.tdp-form button:hover,
.tdp-privacy button:hover { filter: brightness(1.08); }
.tdp-form button:focus-visible,
.tdp-privacy button:focus-visible { outline: 2px solid var(--tdp-cyan); outline-offset: 3px; }

/* Consentimento */
.tdp-consent {
  grid-template-columns: 20px 1fr !important;
  align-items: start;
  text-transform: none !important;
  letter-spacing: normal !important;
  font-size: 13px !important;
  color: var(--tdp-muted) !important;
}
.tdp-consent input { width: 18px; margin-top: 3px; accent-color: var(--tdp-blue); }
.tdp-consent a,
.tdp-privacy a { color: var(--tdp-gold); text-decoration: underline; }

/* Honeypot */
.tdp-hp { position: absolute !important; left: -9999px !important; }

/* Aviso */
.tdp-notice {
  padding: 12px 16px;
  border: 1px solid var(--tdp-cyan);
  border-radius: 10px;
  color: var(--tdp-cyan);
  font-size: 14px;
}

/* ---------- Banner de privacidade / RGPD ---------- */
.tdp-privacy[hidden] { display: none; }
.tdp-privacy {
  position: fixed;
  z-index: 1000;
  left: clamp(14px, 3vw, 40px);
  right: clamp(14px, 3vw, 40px);
  bottom: clamp(14px, 3vw, 30px);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 28px;
  align-items: end;
  padding: 26px 28px;
  background: rgba(7, 8, 13, .97);
  color: var(--tdp-paper);
  border: 1px solid rgba(214, 173, 96, .5);
  border-radius: 20px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, .55);
  font-family: var(--tdp-font-body);
}
.tdp-privacy h2 {
  margin: 4px 0 8px;
  font-family: var(--tdp-font-display);
  font-weight: 700;
  color: var(--tdp-paper);
}
.tdp-privacy p { margin: 5px 0; color: #c4c8d2; }
.tdp-kicker {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .16em;
  color: var(--tdp-gold) !important;
}
.tdp-privacy-actions { display: flex; gap: 10px; flex-wrap: wrap; }
/* Botão secundário: contorno, sem preenchimento */
.tdp-privacy-actions button:last-child {
  background: transparent;
  color: var(--tdp-paper);
  border-color: var(--tdp-line);
}

/* Pré-visualização no editor de blocos */
.tdp-block-preview,
.tdp-form-preview {
  font-family: var(--tdp-font-body);
}
.tdp-editor-wrap .tdp-form-preview input,
.tdp-editor-wrap .tdp-form-preview textarea { pointer-events: none; }

@media (max-width: 760px) {
  .tdp-privacy {
    grid-template-columns: 1fr;
    max-height: calc(100vh - 28px);
    overflow: auto;
  }
}

/* ============================================================
   Hover DIGITAL animado dos botões — substitui o amarelo do tema.
   Gradiente azul → ciano → roxo a "fluir", com brilho e leve elevação.
   ============================================================ */
.wp-block-button__link,
.wp-element-button {
  transition: color .25s ease, box-shadow .3s ease, transform .2s ease, background-color .3s ease;
}
.wp-block-button__link:hover,
.wp-block-button__link:focus,
.wp-block-button__link:focus-visible,
.wp-block-button__link:active,
.wp-element-button:hover,
.wp-element-button:focus,
.wp-element-button:focus-visible,
.wp-element-button:active {
  background-color: #536DFE !important;
  background-image: linear-gradient(110deg, #536DFE 0%, #44D0DB 45%, #8B5CF6 100%) !important;
  background-size: 220% auto;
  color: #F7F5F0 !important;
  border-color: #44D0DB !important;
  box-shadow: 0 10px 28px rgba(83, 109, 254, .45), inset 0 0 0 1px rgba(68, 208, 219, .55);
  transform: translateY(-2px);
  animation: tdp-btn-flow 1.2s linear infinite;
  -webkit-tap-highlight-color: transparent;
}
@keyframes tdp-btn-flow { to { background-position: 220% center; } }
@media (prefers-reduced-motion: reduce) {
  .wp-block-button__link:hover,
  .wp-element-button:hover { animation: none; transform: none; }
}

/* ============================================================
   Hover DIGITAL dos links do menu de navegação — sublinhado em
   gradiente animado (azul → ciano → roxo) + brilho no texto.
   ============================================================ */
/* Remover qualquer fundo/realce amarelo do tema no hover/foco/clique do menu. */
.wp-block-navigation .wp-block-navigation-item__content {
  -webkit-tap-highlight-color: transparent;
}
.wp-block-navigation .wp-block-navigation-item,
.wp-block-navigation .wp-block-navigation-item:hover,
.wp-block-navigation .wp-block-navigation-item:focus-within,
.wp-block-navigation .wp-block-navigation-item:active,
.wp-block-navigation .wp-block-navigation-item__content,
.wp-block-navigation .wp-block-navigation-item__content:hover,
.wp-block-navigation .wp-block-navigation-item__content:focus,
.wp-block-navigation .wp-block-navigation-item__content:focus-visible,
.wp-block-navigation .wp-block-navigation-item__content:active,
.wp-block-navigation .wp-block-navigation-item__label,
.wp-block-navigation .wp-block-navigation-item:hover .wp-block-navigation-item__label,
.wp-block-navigation .wp-block-navigation-item__content:hover .wp-block-navigation-item__label,
.wp-block-navigation .wp-block-navigation-item__content:focus .wp-block-navigation-item__label,
.wp-block-navigation .wp-block-navigation__container.has-bg-light-color .wp-block-navigation-item:not(.button):hover .wp-block-navigation-item__content {
  background: none !important;
  background-color: transparent !important;
  box-shadow: none !important;
}
.wp-block-navigation .wp-block-navigation-item__content {
  position: relative;
  transition: color .25s ease, text-shadow .25s ease;
}
.wp-block-navigation .wp-block-navigation-item__content::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -5px;
  height: 3px; border-radius: 3px;
  background: linear-gradient(90deg, #536DFE, #44D0DB, #8B5CF6);
  background-size: 200% auto;
  box-shadow: 0 0 12px rgba(68, 208, 219, .6);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .32s cubic-bezier(.2, .7, .2, 1);
  pointer-events: none;
}
.wp-block-navigation .wp-block-navigation-item__content:hover,
.wp-block-navigation .wp-block-navigation-item__content:focus-visible {
  color: #FFFFFF !important;
  text-shadow: 0 0 16px rgba(68, 208, 219, .75), 0 0 4px rgba(83, 109, 254, .6);
}
.wp-block-navigation .wp-block-navigation-item__content:hover::after,
.wp-block-navigation .wp-block-navigation-item__content:focus-visible::after {
  transform: scaleX(1);
  animation: tdp-nav-flow 1.4s linear infinite;
}
@keyframes tdp-nav-flow { to { background-position: 200% center; } }
@media (prefers-reduced-motion: reduce) {
  .wp-block-navigation .wp-block-navigation-item__content::after { transition: none; }
  .wp-block-navigation .wp-block-navigation-item__content:hover::after { animation: none; }
}

/* ============================================================
   AQUI ESTAVA O AMARELO: o tema desenha uma "pílula" de hover via ::after com
   background: var(--wp--preset--color--accent-primary) (amarelo neste esquema).
   Recolorimos para o gradiente digital e mantemos UM só efeito limpo.
   ============================================================ */
.wp-block-navigation:not(.social-menu) .wp-block-navigation-item:not(.button)::after,
.header-big .wp-block-navigation .wp-block-navigation-item:not(.button) a::after {
  background: linear-gradient(110deg, #536DFE, #44D0DB, #8B5CF6) !important;
  border-radius: 8px !important;
}
.wp-block-navigation:not(.social-menu) .wp-block-navigation-item:not(.button):hover .wp-block-navigation-item__content,
.wp-block-navigation:not(.social-menu) .wp-block-navigation-item:not(.button):hover .wp-block-navigation-item__label,
.wp-block-navigation:not(.social-menu) .wp-block-navigation-item:not(.button):focus-within .wp-block-navigation-item__content,
.wp-block-navigation:not(.social-menu) .wp-block-navigation-item:not(.button):focus-within .wp-block-navigation-item__label {
  color: #ffffff !important;
  text-shadow: none !important;
}
/* Um só efeito: a pílula já preenche, por isso escondo o meu sublinhado separado. */
.wp-block-navigation .wp-block-navigation-item__content::after { display: none !important; }

/* ============================================================
   Termos do artigo (Tags/Categorias) — o tema usa pílulas pálidas com texto
   dourado (leitura forçada). Passamos a fundo escuro translúcido + texto claro,
   hover azul. Separador redundante escondido (as pílulas já têm espaçamento).
   ============================================================ */
.wp-block-post-terms a {
  background-color: rgba(83, 109, 254, .14) !important;
  color: #F7F5F0 !important;
  border: 1px solid rgba(68, 208, 219, .30);
  border-radius: 999px !important;
  padding: 4px 12px !important;
  margin: 4px 4px 0 0 !important;
  text-decoration: none !important;
  transition: background .2s ease, border-color .2s ease, transform .15s ease, box-shadow .2s ease;
}
.wp-block-post-terms a:hover,
.wp-block-post-terms a:focus-visible {
  background: linear-gradient(110deg, #536DFE, #44D0DB, #8B5CF6) !important;
  color: #ffffff !important;
  border-color: transparent !important;
  text-decoration: none !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(83, 109, 254, .4);
}
.wp-block-post-terms .wp-block-post-terms__prefix {
  color: #aeb4c4;
  margin-right: 8px;
}
.wp-block-post-terms__separator { display: none !important; }

/* ============================================================
   Fundo animado fixo na página de Artigos (blog). Camada por trás do conteúdo,
   com sobreposição escura para manter a leitura confortável.
   ============================================================ */
.tdp-fixed-bg { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.tdp-fixed-bg object { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.tdp-fixed-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(2,6,13,.55), rgba(2,6,13,.80)); }
body.blog { background: transparent !important; }
body.blog .site-header,
body.blog .site-main,
body.blog .site-footer { position: relative; z-index: 1; }

/* Fundo em imagem por artigo (post individual) */
.tdp-fixed-bg--img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
body.single { background: transparent !important; }
body.single .site-header,
body.single .site-main,
body.single .site-footer { position: relative; z-index: 1; }