/*
Theme Name: Inside Creators
Theme URI: https://insidecreators.pt
Description: Identidade Analógico + Digital em pinhal. Tema-filho do Twenty Twenty-Five. A dualidade da marca é sólido contra granular — um círculo contínuo que se decompõe em grelha.
Author: Ruben Félix e Inês Camilo
Template: twentytwentyfive
Version: 3.4.0
Requires at least: 6.7
Tested up to: 6.9
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: inside-creators
Tags: block-patterns, full-site-editing
*/

/* ==========================================================================
   As cores, tamanhos e fontes vivem no theme.json — não aqui.
   Este ficheiro trata só do que o theme.json não consegue exprimir:
   a variante escura e o dispositivo da dissolução.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Variante escura
   O pinhal a #2F6B52 dá 5,96:1 sobre papel mas não passa sobre tinta.
   Em fundo escuro sobe para #63A886, que dá 6,53:1 sobre #131513.
   -------------------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
  :root {
    --wp--preset--color--papel: #131513;
    --wp--preset--color--tinta: #EFEEEA;
    --wp--preset--color--pinhal: #63A886;
    --wp--preset--color--pinhal-fundo: #7FBD9D;
    --wp--preset--color--pinhal-lavado: #1E2620;
    --wp--preset--color--pedra: #85837D;
  }

  /* O botão inverte: verde claro sobre texto escuro, para manter contraste. */
  .wp-element-button,
  .wp-block-button__link {
    color: #131513;
  }
}

/* --------------------------------------------------------------------------
   O dispositivo: a dissolução, viva
   Os quadrados atravessam a linha — uns para a direita, outros para a
   esquerda — desvanecem, dão o mesmo "pop" de chegada do logótipo e voltam.
   São elementos posicionados em % (para se espalharem por qualquer largura)
   com lado em px (para ficarem sempre quadrados). Cada um tem a sua duração,
   sem divisor comum: o conjunto não se repete em tempo humano.
   -------------------------------------------------------------------------- */
.ic-sep {
  position: relative;
  height: 24px;
  width: 100%;
  margin: 0;
  pointer-events: none;
  filter: blur(0.4px);
  /* Um quadrado que parte dos 93% e viaja 62px para a direita aterra fora da
     página. Num ecrã de 375px isso dava 25px de scroll lateral em todo o site.
     Uma faixa decorativa nunca deve alargar o documento: corta-se aqui. */
  overflow: hidden;
}

.ic-sep .sq {
  position: absolute;
  display: block;
  background: var(--wp--preset--color--pinhal);
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  will-change: transform, opacity;
}

.ic-sep .sq.r { animation-name: ic-sep-r; }
.ic-sep .sq.l { animation-name: ic-sep-l; }

@keyframes ic-sep-r {
  0%        { transform: translateX(0) scale(1);       opacity: 0; }
  10%       { transform: translateX(6px) scale(1);     opacity: 1; }
  62%       { transform: translateX(46px) scale(1);    opacity: 1; }
  70%       { transform: translateX(54px) scale(1.55); opacity: .8; }
  78%, 100% { transform: translateX(62px) scale(.2);   opacity: 0; }
}

@keyframes ic-sep-l {
  0%        { transform: translateX(0) scale(1);        opacity: 0; }
  10%       { transform: translateX(-6px) scale(1);     opacity: 1; }
  62%       { transform: translateX(-46px) scale(1);    opacity: 1; }
  70%       { transform: translateX(-54px) scale(1.55); opacity: .8; }
  78%, 100% { transform: translateX(-62px) scale(.2);   opacity: 0; }
}

/* Sem movimento para quem o pediu: os quadrados ficam quietos e visíveis. */
@media (prefers-reduced-motion: reduce) {
  .ic-sep .sq { animation: none; opacity: 1; }
}

/* --------------------------------------------------------------------------
   Corpo em Spectral 300
   Numa serifa leve, o `bolder` do browser resolve para 400 — peso que não
   carregamos, pelo que o negrito não se via. Fixa-se em 600, que é o que
   está auto-alojado.
   -------------------------------------------------------------------------- */
strong,
b,
.has-corpo-font-family strong {
  font-weight: 600;
}


/* --------------------------------------------------------------------------
   Etiquetas em mono
   O registo do ecrã. Um título em Fraunces sem uma etiqueta em mono ao lado
   é a marca meio vestida — daí esta classe existir.
   -------------------------------------------------------------------------- */
p.is-style-ic-label {
  font-family: var(--wp--preset--font-family--mono);
  /* Herdava o 300 do corpo, peso que a Plex Mono não traz — o browser
     sintetizava. 400 é o que está auto-alojado. */
  font-weight: 400;
  font-size: var(--wp--preset--font-size--xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--wp--preset--color--pedra);
}

/* Números e métricas alinham em coluna. */
.ic-metric,
table td,
table th {
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   Sistema gráfico: ícones dos serviços
   Os SVG usam currentColor, por isso herdam a cor do contexto e funcionam
   nos dois temas sem ficheiros duplicados.
   -------------------------------------------------------------------------- */
.ic-icon {
  color: var(--wp--preset--color--pinhal);
  line-height: 0;
  margin-bottom: 0.9rem;
}

.ic-icon svg {
  display: block;
  height: auto;
}

/* --------------------------------------------------------------------------
   A marca animada do hero
   Os quadrados do logótipo NÃO são fixos: cada um assenta, solta-se da massa,
   viaja para a direita — para o cliente — desvanece e regressa ao seu lugar.
   O atraso cresce a partir da massa, o que faz a onda. Só transform e opacity,
   em tempo linear, para o compositor tratar delas sem recalcular layout.
   -------------------------------------------------------------------------- */
.ic-mark-live {
  color: var(--wp--preset--color--pinhal);
  line-height: 0;
  display: block;
}

.ic-mark-live svg {
  display: block;
  width: 100%;
  height: auto;
  max-width: 560px;
  margin-inline: auto;
  overflow: visible;
  /* Arestas suavizadas — desfoque por CSS, não por filtro SVG, para o
     compositor o tratar no GPU sem repintar a cada quadro da animação. */
  filter: blur(0.5px);
}

.ic-mark-live .pc {
  transform-box: fill-box;
  transform-origin: center;
  animation-name: ic-emit;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  will-change: transform, opacity;
}

@keyframes ic-emit {
  0%, 34%   { transform: translateX(0) scale(1);        opacity: 1; }
  56%       { transform: translateX(92px) scale(1);     opacity: 1; }
  61%       { transform: translateX(104px) scale(1.5);  opacity: .85; }
  66%       { transform: translateX(114px) scale(.25);  opacity: 0; }
  67%       { transform: translateX(0) scale(1);        opacity: 0; }
  80%, 100% { transform: translateX(0) scale(1);        opacity: 1; }
}

/* Sem movimento para quem o pediu: a marca fica inteira e parada. */
@media (prefers-reduced-motion: reduce) {
  .ic-mark-live .pc { animation: none; opacity: 1; }
}

/* --------------------------------------------------------------------------
   Formulário de contacto (Fluent Forms)
   O plugin traz o seu próprio aspecto. Isto veste-o com a marca: cantos
   rectos, etiquetas em mono, pinhal no foco e no botão.
   -------------------------------------------------------------------------- */
.fluentform .ff-el-group {
  margin-bottom: 1.5rem;
}

.fluentform .ff-el-input--label label {
  font-family: var(--wp--preset--font-family--mono);
  font-size: var(--wp--preset--font-size--xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--wp--preset--color--pedra);
  font-weight: 500;
  margin-bottom: 0.5rem;
}

.fluentform input[type="text"],
.fluentform input[type="email"],
.fluentform input[type="tel"],
.fluentform textarea.ff-el-form-control {
  font-family: var(--wp--preset--font-family--corpo);
  font-size: var(--wp--preset--font-size--md);
  color: var(--wp--preset--color--tinta);
  background: transparent;
  border: 1px solid var(--wp--preset--color--pedra);
  border-radius: 0;
  padding: 0.7rem 0.85rem;
  width: 100%;
  box-shadow: none;
  transition: border-color 0.15s ease;
}

.fluentform input[type="text"]:hover,
.fluentform input[type="email"]:hover,
.fluentform input[type="tel"]:hover,
.fluentform textarea.ff-el-form-control:hover {
  border-color: var(--wp--preset--color--tinta);
}

.fluentform input[type="text"]:focus,
.fluentform input[type="email"]:focus,
.fluentform input[type="tel"]:focus,
.fluentform textarea.ff-el-form-control:focus {
  border-color: var(--wp--preset--color--pinhal);
  outline: 2px solid var(--wp--preset--color--pinhal);
  outline-offset: 1px;
}

.fluentform ::placeholder {
  color: var(--wp--preset--color--pedra);
  opacity: 0.7;
}

.fluentform .ff-btn-submit {
  font-family: var(--wp--preset--font-family--corpo);
  font-size: var(--wp--preset--font-size--sm);
  font-weight: 600;
  background: var(--wp--preset--color--pinhal);
  color: var(--wp--preset--color--papel);
  border: 0;
  border-radius: 0;
  padding: 0.8rem 1.6rem;
  cursor: pointer;
}

.fluentform .ff-btn-submit:hover {
  background: var(--wp--preset--color--pinhal-fundo);
}

/* Erros: encarnado só aqui, e nunca como cor de marca. */
.fluentform .error,
.fluentform .text-danger,
.fluentform .ff-el-is-error .error {
  font-family: var(--wp--preset--font-family--corpo);
  font-size: var(--wp--preset--font-size--sm);
  color: #A6301C;
}

.fluentform .ff-el-is-error input,
.fluentform .ff-el-is-error textarea {
  border-color: #A6301C;
}

.ff-message-success {
  font-family: var(--wp--preset--font-family--corpo);
  background: var(--wp--preset--color--pinhal-lavado);
  border-left: 3px solid var(--wp--preset--color--pinhal);
  color: var(--wp--preset--color--tinta);
  padding: 1.1rem 1.3rem;
}

/* No modo escuro o botão inverte, como os outros. */
@media (prefers-color-scheme: dark) {
  .fluentform .ff-btn-submit {
    color: #131513;
  }
  .fluentform .error,
  .fluentform .text-danger,
  .fluentform .ff-el-is-error .error {
    color: #E88E7A;
  }
  .fluentform .ff-el-is-error input,
  .fluentform .ff-el-is-error textarea {
    border-color: #E88E7A;
  }
}

/* --------------------------------------------------------------------------
   Acessibilidade
   -------------------------------------------------------------------------- */
:where(a, button, input, textarea, select, [tabindex]):focus-visible {
  outline: 2px solid var(--wp--preset--color--pinhal);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* O logótipo do site nunca deve ficar esmagado no cabeçalho. */
.wp-block-site-logo img {
  min-width: 28px;
}

/* ==========================================================================
   TELEMÓVEL
   O site nasceu ao largo e só depois foi visto ao estreito. Isto é a correcção
   dessa ordem. O corte é aos 781px, o mesmo ponto em que o WordPress passa o
   menu a sobreposição — usar outro deixaria um intervalo com dois desenhos.
   ========================================================================== */
@media (max-width: 781px) {

  /* --- Definição da marca ------------------------------------------------
     O `filter: blur()` que suaviza as arestas obriga o browser a rasterizar o
     SVG numa camada — e no telemóvel essa camada sai a menos resolução do que
     o ecrã tem. O resultado não é suavizado, é desfocado: o «ic» ficava ilegível.
     Some-se a isso o desfoque ser fixo em px de CSS enquanto a marca encolhe de
     560 para 353px, o que o faz pesar 1,6× mais aqui do que no monitor.

     Ao estreito não é preciso: com 2 a 3 pixels por ponto, o anti-aliasing do
     vector já entrega arestas que não parecem cortadas — e de borda nítida. */
  .ic-mark-live svg,
  .ic-sep {
    filter: none;
  }

  /* --- Ritmo vertical ----------------------------------------------------
     As secções pedem o espaçamento por variável, sempre. Redefinir as
     variáveis aqui encurta o site inteiro de uma vez, sem tocar no conteúdo.
     8rem entre secções é respiração num monitor; num telemóvel é uma tela
     vazia que se atravessa com o polegar. */
  :root {
    --wp--preset--spacing--30: 1.25rem;  /* 28 -> 20: margem lateral e cabeçalho */
    --wp--preset--spacing--40: 2.25rem;  /* 48 -> 36 */
    --wp--preset--spacing--50: 3.25rem;  /* 80 -> 52 */
    --wp--preset--spacing--60: 4.5rem;   /* 128 -> 72 */
  }

  /* --- Menu de sobreposição ---------------------------------------------
     Abria com os links colados ao x=0 e a 14px. Um menu que ocupa o ecrã
     todo tem espaço de sobra — usa-se a fonte dos títulos, ao tamanho a que
     se lê de relance, com altura de toque a sério.

     O prefixo .wp-block-navigation não é decorativo. O core traz
     `…is-menu-open:not(.disable-default-overlay)`, que ganha por uma classe
     e pede `clamp(1rem, var(--wp--style--root--padding-top), 20rem)` — uma
     variável que este tema não emite. Uma var() indefinida invalida a
     declaração inteira, e o padding cai para o valor inicial: zero. Era daí
     que vinham os links encostados ao x=0, antes de eu mexer em nada. Para
     lá chegar é preciso passar-lhe à frente na especificidade. */
  .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) {
    padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--30);
  }

  .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation-item__content {
    font-family: var(--wp--preset--font-family--display);
    font-size: 1.6rem;
    font-weight: 350;
    line-height: 1.25;
    padding-block: 0.45rem;
  }

  .wp-block-navigation__responsive-container-close svg,
  .wp-block-navigation__responsive-container-open svg {
    width: 28px;
    height: 28px;
  }

  /* --- Alvos de toque ----------------------------------------------------
     44px é o mínimo do guia da Apple e a medida de uma ponta de dedo; o
     hambúrguer e o X tinham 24. A área sensível cresce por pseudo-elemento e
     não por padding: assim o botão não se desloca nem empurra o cabeçalho.

     Só o hambúrguer leva `position`: o X já é `absolute` por obra do core, que
     é o que o encosta ao canto. Redeclarar `relative` nele devolvia-o ao fluxo
     e atirava-o para o lado esquerdo. Absoluto já ancora o pseudo-elemento. */
  .wp-block-navigation__responsive-container-open {
    position: relative;
  }

  .wp-block-navigation__responsive-container-open::after,
  .wp-block-navigation__responsive-container-close::after {
    content: "";
    position: absolute;
    inset: -11px;
  }

  /* Os links do rodapé são linhas de um parágrafo separadas por <br>, por isso
     tinham a altura da linha — 22px. Em bloco, aceitam folga em cima e baixo.
     0,6rem leva-os aos 43px: entre eles está o telefone e o email, que são
     para tocar e não para ler. */
  footer .has-sm-font-size a {
    display: inline-block;
    padding-block: 0.6rem;
  }

  /* --- A dissolução ao estreito ------------------------------------------
     O corte no .ic-sep já impede o scroll, mas um quadrado que desaparecia a
     meio do voo ficava truncado em vez de desvanecido. Encurta-se o lance:
     mesmo gesto, menos distância. */
  .ic-sep .sq.r { animation-name: ic-sep-r-curto; }
  .ic-sep .sq.l { animation-name: ic-sep-l-curto; }
}

@keyframes ic-sep-r-curto {
  0%        { transform: translateX(0) scale(1);       opacity: 0; }
  10%       { transform: translateX(3px) scale(1);     opacity: 1; }
  62%       { transform: translateX(25px) scale(1);    opacity: 1; }
  70%       { transform: translateX(29px) scale(1.55); opacity: .8; }
  78%, 100% { transform: translateX(34px) scale(.2);   opacity: 0; }
}

@keyframes ic-sep-l-curto {
  0%        { transform: translateX(0) scale(1);        opacity: 0; }
  10%       { transform: translateX(-3px) scale(1);     opacity: 1; }
  62%       { transform: translateX(-25px) scale(1);    opacity: 1; }
  70%       { transform: translateX(-29px) scale(1.55); opacity: .8; }
  78%, 100% { transform: translateX(-34px) scale(.2);   opacity: 0; }
}