/* ----------------------------------------------------------
 * Espazo Ollie Child — extra styles for Jetpack Forms + WPSL
 * Source of truth: Espazo-Ollie-Design-Specs (2025-10-03).
 * Color tokens come from theme.json:
 *   --wp--preset--color--primary    #9BCA3C  Espazo Green
 *   --wp--preset--color--primary  #6EA826  Espazo Green Dark (hover)
 *   --wp--preset--color--primary-alt   #12433A  Espazo Accent
 *   --wp--preset--color--main      #1F2937  Espazo Dark
 *   --wp--preset--color--secondary    #394252  Espazo Neutral
 *   --wp--preset--color--border-light   #E5E7EB  Espazo Border
 *   --wp--preset--color--tertiary  #F0F5FA  Espazo Gray BG
 * ---------------------------------------------------------- */

/* ----------------------------------------------------------
 * Cards (16px radius, soft border, hover lift)
 * Apply via class .espazo-card on any group/cover/column.
 * ---------------------------------------------------------- */
.espazo-card {
  border: 1px solid var(--wp--preset--color--border-light);
  border-radius: 16px;
  padding: 1.5rem;
  background: var(--wp--preset--color--base);
  transition: box-shadow 0.2s ease-in-out, transform 0.2s ease-in-out;
}

.espazo-card:hover {
  box-shadow: 0 10px 25px rgba(31, 41, 55, 0.12);
}

/* ----------------------------------------------------------
 * Badges (pill shape, inline or absolute top-left)
 * ---------------------------------------------------------- */
.espazo-badge {
  display: inline-flex;
  align-items: center;
  border-radius: 9999px;
  font-family: Inter, system-ui, sans-serif;
  font-weight: 600;
  font-size: 0.75rem;
  line-height: 1;
  padding: 0.25rem 0.625rem;
  white-space: nowrap;
}

.espazo-badge--novo {
  background: var(--wp--preset--color--primary);
  color: var(--wp--preset--color--main);
}

.espazo-badge--meta {
  background: var(--wp--preset--color--tertiary);
  color: var(--wp--preset--color--primary-alt);
}

.espazo-badge--absolute {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 10;
  box-shadow: 0 1px 2px rgba(31, 41, 55, 0.08);
}

/* ----------------------------------------------------------
 * Forms (Jetpack Contact Form)
 * ---------------------------------------------------------- */
.wp-block-jetpack-contact-form input,
.wp-block-jetpack-contact-form select,
.wp-block-jetpack-contact-form textarea {
  border: 1px solid var(--wp--preset--color--border-light);
  border-radius: 10px;
  padding: 0.625rem 0.75rem;
  font-family: Inter, system-ui, sans-serif;
  font-size: 1rem;
  color: var(--wp--preset--color--main);
  background: var(--wp--preset--color--base);
}

.wp-block-jetpack-contact-form input:focus,
.wp-block-jetpack-contact-form select:focus,
.wp-block-jetpack-contact-form textarea:focus {
  outline: 2px solid var(--wp--preset--color--primary);
  outline-offset: 1px;
  border-color: var(--wp--preset--color--primary);
}

.wp-block-jetpack-contact-form label {
  font-weight: 600;
  color: var(--wp--preset--color--main);
}

.wp-block-jetpack-contact-form .wp-block-button__link {
  background: var(--wp--preset--color--primary);
  color: var(--wp--preset--color--main);
  border-radius: 16px;
  padding: 0.75rem 1.25rem;
  font-weight: 600;
}

.wp-block-jetpack-contact-form .wp-block-button__link:hover {
  background: var(--wp--preset--color--primary);
}

/* ----------------------------------------------------------
 * Cabeçalho sobreposto, com estado de repouso e estado reduzido
 *
 * Medido no produtivo a 1440px:
 *            altura   logótipo   fundo
 *   repouso    80px    134x43    rgba(54,59,72,0.84)
 *   reduzido   54px     91x29    rgba(66,69,79,0.84)
 * A troca dá-se entre 105 e 110px de scroll, com transição de 0.4s ease-in-out
 * (no cabeçalho e no logótipo). Sem sombra.
 *
 * Duas notas de implementação:
 *   1. O suporte nativo de posição dos blocos só oferece "sticky", que ocupa
 *      espaço no fluxo. Daí o position:fixed aqui. Por isso o grupo do
 *      cabeçalho também não declara "sticky": se declarasse, a regra do Ollie
 *      `header:has(> .is-position-sticky)` ganhava a esta por especificidade.
 *   2. O fundo e a folga vêm do bloco, como estilo inline, que nenhum CSS
 *      consegue substituir sem !important. Em vez disso, o bloco escreve
 *      `var(--espazo-cabecalho-*)` com o valor de repouso por omissão, e o
 *      estado reduzido só redefine a propriedade. Zero !important.
 * ---------------------------------------------------------- */
header.wp-block-template-part {
  position: fixed;
  right: 0;
  left: 0;
  bottom: auto;
  /* Com sessão iniciada, a barra do WordPress ocupa o topo e é `fixed`.
     O core define `--wp-admin--admin-bar--position-offset` apenas em
     elementos com `.is-position-sticky` — e este cabeçalho não é sticky, de
     propósito (ver nota 1). Usa-se por isso a altura da barra, que o core
     define em `html` sempre que a barra aparece: 32px, 46px abaixo de 782px.
     Abaixo de 600px o core passa a barra a `absolute`, ou seja ela sai com o
     scroll, e aí o desvio tem de ser zero. */
  top: var(--wp-admin--admin-bar--height, 0px);
  z-index: 20;
}

@media screen and (max-width: 600px) {
  header.wp-block-template-part {
    top: 0;
  }
}

header.wp-block-template-part > .wp-block-group {
  transition: background-color 0.4s ease-in-out, padding 0.4s ease-in-out;
}

header.wp-block-template-part .wp-block-site-logo img {
  width: var(--espazo-cabecalho-logo, 134px);
  height: auto;
  transition: width 0.4s ease-in-out;
}

header.wp-block-template-part.espazo-cabecalho-reduzido {
  --espazo-cabecalho-fundo: rgba(66, 69, 79, 0.84);
  --espazo-cabecalho-folga: 12.5px;
  --espazo-cabecalho-logo: 91px;
}

/* No produtivo o item do menu da página actual fica verde (#9BCA3C). Sobre o
   fundo do cabeçalho dá 4,6:1, passa AA para texto normal. O WordPress marca
   esse item com aria-current, que é o seletor certo — não é preciso classe. */
header.wp-block-template-part .wp-block-navigation a[aria-current="page"],
header.wp-block-template-part .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content,
header.wp-block-template-part .wp-block-navigation-item.current-menu-ancestor > .wp-block-navigation-item__content,
header.wp-block-template-part .wp-block-navigation-item.current-menu-parent > .wp-block-navigation-item__content {
  /* Com openSubmenusOnClick o item de topo é um <button>, não um <a>: o alvo
     é a classe do conteúdo, que o core põe nos dois. */
  color: var(--wp--preset--color--primary);
}

@media (prefers-reduced-motion: reduce) {
  header.wp-block-template-part > .wp-block-group,
  header.wp-block-template-part .wp-block-site-logo img {
    transition: none;
  }
}

/* ----------------------------------------------------------
 * WP Store Locator — lista de lojas
 *
 * Portado do divi-child do produtivo e confirmado por medição a 1440px:
 * cartão com raio 9px sobre #363b48 (border-dark), padding 20px, imagem a
 * sangrar sobre esse padding (margin:-20px) e esbatida a 30% para o texto
 * ler por cima, dados em position:absolute, nome numa "pílula" de 26px e,
 * nas lojas em destaque, o selo "Novo" no canto superior direito.
 *
 * Duas divergências assumidas, por contraste (WCAG AA, texto pequeno):
 *   pílula do nome  produtivo #fff sobre #9BCA3C = 1,93:1  ->  texto "main"  7,6:1
 *   selo "Novo"     produtivo #fff sobre #F92C8B = 3,97:1  ->  texto "main"  6,4:1
 * ---------------------------------------------------------- */
#wpsl-wrap {
  font-family: var(--wp--preset--font-family--heading);
  font-size: 12px;
  line-height: 1.7em;
}

/* Auditoria 2026-09-19, ID M-03 — barra de pesquisa do WPSL.
 * Medido no produtivo: a barra tem 64px de altura, fundo #f4f3f3 e padding
 * 12px 12px 0; as etiquetas cabem numa linha (32px); o botão é escuro
 * (#393E4A), 16px/700, padding 9.6px 25.6px. No staging a barra tinha 120px
 * porque as etiquetas partiam em duas linhas, e o botão era verde. */
#wpsl-wrap .wpsl-search {
  padding: 12px 12px 0;
  background: #f4f3f3;
  border: 0;
}

#wpsl-wrap .wpsl-input label,
#wpsl-wrap #wpsl-radius label {
  width: auto;
  white-space: nowrap;
}

/* O botão de "usar a minha localização" é uma célula da mesma linha no
   produtivo (display:table-cell); aqui vinha em bloco flutuante e caía para
   baixo do campo, o que fazia a barra passar de 64px para 98px. */
#wpsl-wrap .wpsl-icon-direction {
  display: table-cell;
  float: none;
}

#wpsl-search-btn {
  padding: 9.6px 25.6px;
  background: #393e4a;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  border: 1px solid #d2d2d2;
  border-radius: 3px;
  cursor: pointer;
  transition: background-color 0.15s ease-in-out;
}

/* Medido no produtivo: lista 384px (40%) e mapa 571px (59.5%) de 960, mapa com
 * 400px de altura e sem borda. */
#wpsl-wrap #wpsl-result-list {
  width: 40%;
  margin-right: 0.5%;
}

/* Medido no produtivo: mapa a 59.5% de largura, 400px de altura, sem borda.
 * Até 2026-09-23 os templates custom (wpsl-templates/) eram "v2" e o wpsl.js
 * da 3.0 tinha de RENOMEAR em runtime o id do contentor de #wpsl-gmap para
 * #wpsl-map (assets/src/frontend/js/wpsl.js, bloco "Deal with v2 legacy
 * custom templates"), daí este selector ter sido duplo durante a auditoria
 * WPSL 3.0 (2026-09-22). Reescritos os templates ao estilo nativo da 3.0
 * (N-60, 2026-09-23), o id sai já correcto na primeira renderização — o JS
 * de compatibilidade nunca chega a correr — e o selector volta a ser só
 * #wpsl-map (confirmado: #wpsl-gmap deixou de existir no DOM). */
#wpsl-wrap #wpsl-map {
  float: right;
  width: 59.5%;
  height: 400px;
  margin-bottom: 0;
  border: 0;
}

/* O plugin fixa 350px e o seu JS reescreve a altura em linha; o produtivo
   resolve-o com !important e aqui é igual, senão a lista fica com scroll
   interno em vez de crescer (medido: 662px no produtivo, 350 sem isto).
 *
 * Achado 2026-09-23 (relatado pelo João por captura de ecrã: o bloco "Onde
 * Estamos" aparecia cortado a meio da grelha de cartões): esta correcção só
 * incluía "#wpsl-stores" (a lista) e "#wpsl-direction-details", mas nunca
 * "#wpsl-result-list" — o contentor À VOLTA deles, também fixado a 350px
 * pelo próprio plugin (com "!important"), e também flutuante ("float").
 * Com "#wpsl-stores" a crescer mas "#wpsl-result-list" preso a 350px, o
 * conteúdo extravasava por baixo da própria caixa que o continha, invisível
 * para o "wpsl-clearfix" recém-acrescentado ao #wpsl-wrap (que só consegue
 * medir a caixa de "#wpsl-result-list", não o que transborda dela) — e era
 * esse transbordo, mais alto do que qualquer ancestral calculava, que o
 * bloco Cover WordPress à volta (com "overflow: clip") cortava lá em baixo.
 * Acrescentado aqui: agora cresce a par com o conteúdo que envolve. */
#wpsl-wrap #wpsl-stores,
#wpsl-wrap #wpsl-direction-details,
#wpsl-wrap #wpsl-result-list,
#wpsl-wrap.wpsl-store-below #wpsl-stores,
#wpsl-wrap.wpsl-store-below #wpsl-direction-details,
#wpsl-wrap.wpsl-store-below #wpsl-result-list {
  height: auto !important;
}

/* Tamanho e entrelinha do bloco #wpsl-stores (cartao de loja em destaque
 * em /self-storage/ e /self-offices/): #wpsl-wrap fixa 12px/1.7em (=20.4px
 * fixos, ja resolvidos em px e por isso nao recalculados por baixo) para
 * o formulario de pesquisa, mas o produtivo sobrepoe 14px/26px neste
 * bloco especifico (medido directamente no <li>: 14px/26px no produtivo,
 * 12px/20.4px herdados de #wpsl-wrap no staging antes desta regra). Sem
 * isto o <li> e os textos de morada sem classe propria (rua, codigo-
 * postal) saiam a 12px/20.4px em vez de 14px/26px. Auditoria 2026-09-18,
 * ID I-01. */
#wpsl-wrap #wpsl-stores {
  font-size: 14px;
  line-height: 26px;
}

#wpsl-wrap #wpsl-result-list li {
  position: relative;
  padding: 20px;
  border: 0;
  border-radius: 9px;
  overflow: hidden;
  background: rgba(54, 59, 72, 0.6);   /* border-dark a 60%, como no produtivo */
  color: var(--wp--preset--color--base);
  list-style: none;
}

#wpsl-wrap #wpsl-result-list li.wpsl-featured-dealer {
  background: var(--wp--preset--color--border-dark);
}

#wpsl-wrap #wpsl-result-list li .espazo-loja-imagem {
  position: relative;
  margin: -20px;
  opacity: 0.3;
  line-height: 0;
}

#wpsl-wrap #wpsl-result-list li .espazo-loja-imagem img {
  float: none;
  margin: 0;
  min-width: 100%;
  max-width: 100%;
  vertical-align: bottom;
  border-radius: 0;
  /* Auditoria 2026-09-20, ID N-40: os cartões não tinham todos a mesma altura
   * porque a altura vinha do rácio de cada fotografia. Medido a 1440px: oito
   * cartões a 122.9px (fotografias 3:2) e o de Odivelas a 138.2px (fotografia
   * 4:3). O produtivo tem exactamente o mesmo defeito (123 vs 138), por isso
   * esta é uma correcção, não uma diferença de migração. Fixar o rácio em 3:2
   * — o da maioria — mantém a altura medida e recorta a que destoa. */
  aspect-ratio: 3 / 2;
  height: auto;
  object-fit: cover;
}

/* Auditoria 2026-09-18, ID I-05: no produtivo este contentor não é esticado —
 * tem `right: auto` e encolhe até à largura do conteúdo (medido: 118px em
 * ALVALADE, 172px em PARQUE DAS NAÇÕES, com o tecto de 174.3px = 184.3 do <li>
 * menos os 10px da esquerda, que ALFRAGIDE atinge). Com `right: 10px` ficava
 * fixo em 164.3px e "PARQUE DAS NAÇÕES" deixava de caber: o título passava de
 * 26px para 52px. Repor o `auto` reproduz o comportamento medido em todos os
 * nove cartões, sem número mágico. */
#wpsl-wrap #wpsl-result-list li .espazo-loja-dados {
  position: absolute;
  top: 20px;
  left: 10px;
  right: auto;
}

/* Nome da loja no card de destaque (auditoria 2026-09-18, ID I-01): medido a
 * 14px no produtivo (.more-info-wrap), não 12px. O 12px era o valor certo
 * para outro ecrã (o resultado de pesquisa em /stores/, que hoje nem existe
 * em staging) mas errado para este card, a única coisa que usa esta classe
 * hoje. Se um dia houver uma página de resultados de pesquisa separada,
 * medir esse ecrã também antes de mexer aqui outra vez. */
#wpsl-wrap #wpsl-result-list li .espazo-loja-titulo {
  display: block;
  margin: 10px auto;
  padding: 0;
  font-size: 14px;
  line-height: 26px;
  text-align: center;
  /* Auditoria 2026-09-18, ID I-05: medido no produtivo (.more-info-wrap) a
   * font-weight 400 e letter-spacing normal. O tema aplica 700 e -0.01em a
   * todos os h4; com esse peso "PARQUE DAS NAÇÕES" deixava de caber na linha
   * e o título passava de 26px para 52px (duas linhas). Não é decoração: é a
   * altura do card inteiro que muda. */
  font-weight: 400;
  letter-spacing: normal;
}

#wpsl-wrap #wpsl-result-list li .espazo-loja-titulo::after {
  content: "";
  display: block;
  clear: both;
}

#wpsl-wrap #wpsl-result-list li a.espazo-loja-ligacao {
  display: inline-block;
  float: left;
  margin: 0;
  padding: 0 9px;
  border-radius: 30px;
  background: var(--wp--preset--color--primary);
  color: var(--wp--preset--color--main);
  font-size: 14px;
  font-weight: 600;
  line-height: 26px;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  transition: background-color 0.3s ease;
}

#wpsl-wrap #wpsl-result-list li a.espazo-loja-ligacao:hover,
#wpsl-wrap #wpsl-result-list li a.espazo-loja-ligacao:focus-visible {
  background: var(--wp--preset--color--border-dark);
  color: var(--wp--preset--color--base);
}

#wpsl-wrap #wpsl-result-list li .espazo-loja-nova {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
  padding: 0 20px;
  border-bottom-left-radius: 30px;
  /* Cor do selo "Novo" do produtivo. Não pertence ao sistema de cores dos
     blocos — vive só nesta saída do plugin, por isso fica aqui. */
  background: #f92c8b;
  color: var(--wp--preset--color--main);
  font-size: 12px;
  font-weight: 600;
  line-height: 26px;
  text-transform: uppercase;
}

/* Auditoria 2026-09-19, ID M-03: medido no produtivo, a rua é um bloco com
 * line-height 0.5em (6px) e o código postal fica INLINE — é essa mistura que
 * separa as duas linhas em ~11px. Com os dois em `display:block` ficavam a 6px
 * um do outro e o texto sobrepunha-se.
 *
 * Achado 2026-09-23 (relatado pelo João por captura de ecrã: morada e
 * localidade sobrepostas dentro do cartão): a própria WPSL 3.0 traz uma
 * regra sua sempre activa (não depende de nenhuma definição da Espazo),
 * ".wpsl-v3-css #wpsl-result-list li *{font-size:var(--wpsl-font-size-base,
 * 14px)!important}", que força 14px com "!important" em TUDO dentro de cada
 * cartão da lista — incluindo estes dois elementos, que ficam então com um
 * texto maior (14px) dentro de uma "line-height" pensada para 12px (6px),
 * e é essa descoordenação que faz o texto sobrepor-se visualmente. Como a
 * regra do plugin usa "!important", só se lhe responde com "!important"
 * também; a nossa especificidade aqui (2 ids + 1 classe + 1 elemento) já é
 * maior do que a do plugin (1 id + 1 classe + 1 elemento), por isso basta
 * acrescentar "!important" ao "font-size" para voltar a ganhar. */
#wpsl-wrap #wpsl-result-list li .wpsl-street {
  display: block;
  clear: both;
  font-size: 12px !important;
  line-height: 0.5em;
  color: var(--wp--preset--color--base);
}

#wpsl-wrap #wpsl-result-list li .wpsl-zip,
#wpsl-wrap #wpsl-result-list li .wpsl-country {
  display: inline;
  font-size: 12px !important;
  line-height: 0.5em;
  color: var(--wp--preset--color--base);
}

/* Ecrãs grandes: dois cartões por linha e mapa mais largo (produtivo). */
@media only screen and (min-width: 1405px) {
  #wpsl-wrap #wpsl-result-list {
    width: 40%;
  }

  #wpsl-wrap #wpsl-map {
    width: 59.5%;
    height: 400px;
  }

  /* Achado 2026-09-23 (relatado pelo João por captura de ecrã: cartões sem
   * espaço nenhum entre si): a própria WPSL 3.0 acrescenta ".wpsl-v3-css" ao
   * <body> e traz uma regra sua, ".wpsl-v3-css #wpsl-wrap #wpsl-result-list
   * ul li{margin:0}", com mais especificidade (1 classe + 2 ids + os
   * elementos "ul" e "li") do que a nossa original ("#wpsl-wrap
   * #wpsl-result-list li", só 2 ids + o elemento "li") — por isso ganhava
   * sempre, independentemente da ordem de carregamento das folhas de estilo.
   * O selector abaixo iguala essa especificidade elemento a elemento
   * (repete o "ul" que faltava na primeira tentativa desta correcção) para
   * que o nosso "margin: 1%" (carregado depois do CSS do plugin) volte a
   * ganhar. */
  .wpsl-v3-css #wpsl-wrap #wpsl-result-list ul li {
    float: left;
    width: 48%;
    margin: 1%;
  }

  #wpsl-wrap.wpsl-store-below #wpsl-result-list li {
    width: 31%;
  }
}

@media only screen and (min-width: 1100px) and (max-width: 1405px) {
  #wpsl-wrap #wpsl-result-list {
    width: 50%;
  }

  #wpsl-wrap #wpsl-map {
    width: 49.5%;
    height: 400px;
  }
}

/* ----------------------------------------------------------
 * Reduced motion respect (per WCAG 2.1 AA)
 * ---------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .wp-element-button,
  .wp-block-button .wp-block-button__link,
  .espazo-card,
  #wpsl-search-btn {
    transition: none;
  }
}

/* ----------------------------------------------------------
 * Conteúdo convertido do Divi
 *
 * O Ollie aplica :root :where(.wp-block-group){padding-block:clamp(4rem,6vw,6rem)}
 * a todos os grupos. O conteúdo convertido tem secção > linha > grupo, e o
 * padding somava-se em cada nível — daí os blocos de 400px vazios. A secção
 * de topo (alignfull) mantém o ritmo; os grupos aninhados ficam a zero.
 * ---------------------------------------------------------- */
.wp-block-post-content .wp-block-group .wp-block-group,
.wp-block-post-content .wp-block-columns .wp-block-group,
.wp-block-post-content .wp-block-cover .wp-block-group {
  padding-top: 0;
  padding-bottom: 0;
}

/* Imagem que era fundo de coluna: preenche a coluna, como no original.
   Sem height:100% — numa coluna sem altura definida isso colapsa a imagem. */
.wp-block-column > .wp-block-image:only-child {
  margin: 0;
  height: 100%;
}
.wp-block-column > .wp-block-image:only-child img {
  width: 100%;
  height: 100%;
  min-height: 320px;
  object-fit: cover;
  display: block;
}
/* Colunas com imagem de fundo ao lado de texto: alinhar ao centro. */
.wp-block-post-content .wp-block-columns {
  align-items: stretch;
}

/* ----------------------------------------------------------
 * Botão de ampliar imagem (lightbox do core, 6.4+)
 *
 * O core desenha-o com rgba(90,90,90,.25) sobre a imagem: 3,04:1, falha o AA
 * para controlos. Como fomos nós que ligámos o lightbox no theme.json, a
 * correcção é nossa. Fundo sólido escuro + ícone claro: 14,7:1.
 * ---------------------------------------------------------- */
.wp-block-image .components-button.lightbox-trigger,
.wp-block-image button.lightbox-trigger {
  background: var(--wp--preset--color--main);
  color: var(--wp--preset--color--base, #fff);
  border-radius: 8px;
  opacity: 1;
}

.wp-block-image button.lightbox-trigger svg {
  fill: var(--wp--preset--color--base, #fff);
}

.wp-block-image button.lightbox-trigger:focus-visible {
  outline: 3px solid var(--wp--preset--color--primary);
  outline-offset: 2px;
}

/* ----------------------------------------------------------
 * Tabelas do calculador de espaço no /self-storage/ (auditoria 2026-09-18,
 * fase 5): HTML em bruto dentro de uma coluna (algumas com classes
 * "table table-bordered" do Bootstrap do produtivo, outras sem classe
 * nenhuma — no produtivo têm todas o mesmo padding). Sem CSS a acompanhá-las
 * no staging, ficavam com o padding mínimo por omissão do browser (1px) em
 * vez do padding do produtivo. Medido em produtivo com getComputedStyle:
 * célula 6px/24px, cabeçalho 9px/24px, borda 1px solid #eee, sem contorno
 * interno de célula. Aplicado a todas as tabelas de conteúdo, não só às
 * classificadas "table", porque no produtivo o padding é igual com ou sem
 * a classe.
 * ---------------------------------------------------------- */
/* Auditoria 2026-09-18, ID J-01 (fecho): copiado da folha do Divi, que é o que
 * o produtivo mostra —
 *   .entry-content table:not(.variations){border:1px solid #eee;margin:0 0 15px;
 *                                         text-align:left;width:100%}
 *   .entry-content thead th,.entry-content tr th{color:#555;font-weight:700;
 *                                                padding:9px 24px}
 *   .entry-content tr td{border-top:1px solid #eee;padding:6px 24px}
 * Faltavam a largura de 100% (as tabelas do calculador encolhiam ao conteúdo e
 * ficavam 30px mais largas do que os 280px do produtivo), a margem inferior de
 * 15px (era a "DISTANCIA 20 -> 1"), a risca de 1px entre linhas e a entrelinha
 * de 1.8em do módulo (25.2px medidos contra os 23.8px do tema).
 *
 * O selector limita-se às tabelas que vieram do conversor (core/table, que
 * envolve a tabela num <figure class="wp-block-table">). A tabela de horários
 * das fichas de loja é marcação do template do WPSL, tem estilo próprio
 * (padding 8px, entrelinha 16px, risca em baixo) e com a regra aberta ficava
 * 180px mais alta do que no produtivo. */
.wp-block-post-content .wp-block-table table {
  width: 100%;
  margin: 0 0 15px;
  border: 1px solid #eee;
  border-collapse: collapse;
  text-align: left;
  line-height: 1.8em;
}

.wp-block-post-content .wp-block-table td {
  padding: 6px 24px;
  text-align: left;
  border: 0;
  border-top: 1px solid #eee;
}

.wp-block-post-content .wp-block-table th {
  padding: 9px 24px;
  font-weight: 700;
  color: #555;
  background: transparent;
  border: 0;
  text-align: left;
}

/* ------------------------------------------------------------
 * Auditoria 2026-09-18, ID K-07 — listas dentro de listas.
 *
 * As listas de topo levam a caixa do Divi em atributo de bloco (ver
 * `divi-para-blocos.py`), mas uma lista aninhada vive dentro do HTML do bloco
 * e não tem atributos onde a pôr. Medido no produtivo (política de
 * privacidade, lista de 18px): a lista aninhada tem `padding: 0 0 1em 1em` e
 * margem zero, exactamente como a de topo. No staging trazia os 32px à
 * esquerda e 16px de margem em cima, do tema.
 * ---------------------------------------------------------- */
.wp-block-post-content li > ul,
.wp-block-post-content li > ol {
  margin: 0;
  padding: 0 0 1em 1em;
}

/* ------------------------------------------------------------
 * Auditoria 2026-09-19, ID M-01 — menu do cabeçalho.
 *
 * Medido no produtivo (1440px, /self-storage/):
 *   item de topo   li padding-right 22px; a 14px/700 MAIÚSCULAS,
 *                  letter-spacing normal, line-height 14px
 *                  · página actual: #9BCA3C + text-shadow 0 0 4px #000
 *                  · restantes:     rgba(255,255,255,0.6)
 *                  · hover:         opacity .7, transição .4s
 *   submenu        240px, padding 20px 0, fundo rgba(54,59,72,0.84),
 *                  border-top 3px solid #9BCA3C, sombra 0 2px 5px rgba(0,0,0,.1),
 *                  sem cantos arredondados, alinhado à esquerda, topo a y=80
 *                  (ou seja, encostado à base do cabeçalho)
 *   item do submenu  li padding 0 20px · a padding 6px 20px, largura 200px,
 *                  14px/700 MAIÚSCULAS, line-height 28px
 *
 * O tipo de letra e o peso vêm do bloco (parts/header.html), que também passou
 * a `openSubmenusOnClick: false` — é isso que faz o core abrir o submenu ao
 * passar o rato, como o Divi, em vez de exigir um clique.
 *
 * A "ponte": no produtivo a ligação de topo tem 33px de padding inferior, o que
 * faz o rato chegar ao submenu sem passar por um vão. Aqui o cabeçalho é flex e
 * o item fica centrado, por isso a ponte é um pseudo-elemento transparente com
 * a altura medida entre a base do item e a base do cabeçalho (27.2px em
 * repouso, 14.1px no estado reduzido).
 * ---------------------------------------------------------- */
header.wp-block-template-part {
  --espazo-menu-ponte: 27.2px;
}

header.wp-block-template-part.espazo-cabecalho-reduzido {
  --espazo-menu-ponte: 14.1px;
}

header.wp-block-template-part .wp-block-navigation__container > .wp-block-navigation-item {
  position: relative;
}

/* Ponte invisível entre o item e o submenu (ver nota acima). Os 2px a mais
   sobrepõem-se à aresta do submenu para não sobrar um vão de arredondamento. */
header.wp-block-template-part .wp-block-navigation .wp-block-navigation-item.has-child::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  width: 240px;
  height: calc(var(--espazo-menu-ponte) + 2px);
}

header.wp-block-template-part .wp-block-navigation .wp-block-navigation-item.has-child:not(:hover):not(:focus-within)::after {
  display: none;
}

/* Os `!important` desta regra e da seguinte não são preferência: o próprio
 * WordPress imprime, em linha, `border-style:none!important`,
 * `border-top-width:medium!important` e `padding:…!important` para
 * `.wp-block-navigation__responsive-container:not(.is-menu-open) …`, a partir
 * do suporte de espaçamento do bloco de navegação. Não há atributo de bloco que
 * produza a caixa do Divi (240px, risca verde de 3px, 20px de folga vertical),
 * por isso não há caminho sem `!important` — só o `!important` do core é que se
 * bate com ele. As restantes propriedades ficam sem. */
header.wp-block-template-part .wp-block-navigation .has-child > .wp-block-navigation__submenu-container {
  top: calc(100% + var(--espazo-menu-ponte));
  left: 0;
  width: 240px;
  min-width: 240px;
  padding: 20px 0 !important;
  background-color: var(--espazo-cabecalho-fundo, rgba(54, 59, 72, 0.84));
  border: 0 !important;
  border-top: 3px solid var(--wp--preset--color--primary) !important;
  border-radius: 0;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  text-align: left;
}

header.wp-block-template-part .wp-block-navigation .wp-block-navigation__submenu-container > .wp-block-navigation-item {
  padding: 0 20px;
  background: transparent;
  border-radius: 0;
}

header.wp-block-template-part .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
  width: 200px;
  padding: 6px 20px !important;   /* ver nota acima: o core impõe 16px 32px */
  line-height: 28px;
}

/* Cor dos itens: a página actual a verde com o mesmo halo do produtivo, o resto
   a branco a 60%. O `espazo-item-actual` é posto em PHP (ver functions.php):
   as ligações do submenu apontam para âncoras da própria página e o core não
   lhes põe `current-menu-item`, ao contrário do menu clássico do WordPress. */
header.wp-block-template-part .wp-block-navigation .wp-block-navigation-item__content {
  /* No produtivo as ligações do menu não têm sublinhado em estado nenhum. */
  color: rgba(255, 255, 255, 0.6);
  text-decoration: none;
  transition: opacity 0.4s ease-in-out;
}

header.wp-block-template-part .wp-block-navigation .wp-block-navigation-item__content:hover,
header.wp-block-template-part .wp-block-navigation .wp-block-navigation-item__content:focus {
  text-decoration: none;
}

header.wp-block-template-part .wp-block-navigation .wp-block-navigation-item__content:hover {
  opacity: 0.7;
}

header.wp-block-template-part .wp-block-navigation a[aria-current="page"],
header.wp-block-template-part .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content,
header.wp-block-template-part .wp-block-navigation-item.current-menu-ancestor > .wp-block-navigation-item__content,
header.wp-block-template-part .wp-block-navigation-item.espazo-item-actual > .wp-block-navigation-item__content {
  color: var(--wp--preset--color--primary);
  text-shadow: 0 0 4px #000;
}

/* ------------------------------------------------------------
 * Auditoria 2026-09-19, ID M-02 — acordeão das Perguntas Frequentes.
 *
 * Medido no produtivo: `.et_pb_toggle_title` a 18px/500, line-height 23.4px,
 * padding 25px 20px 25px 0 e border-bottom 1px solid #e7e7e7; a pergunta aberta
 * fica verde (#9BCA3C) e as fechadas brancas; o conteúdo a 16px/28.8px, #b3b3b3.
 * O ícone é um sinal de mais/menos de 16px a #b3b3b3, encostado à direita e
 * centrado na altura do título.
 *
 * O comportamento (um aberto de cada vez) vem do atributo `name` do <details>,
 * posto pelo conversor. Aqui só se tira o triângulo nativo e se desenha o
 * ícone: o tipo de letra de ícones do Divi (ETmodules) não existe no staging,
 * por isso o sinal é desenhado em CSS — é a única aproximação assumida.
 * ---------------------------------------------------------- */
.wp-block-post-content .espazo-acordeao > summary {
  color: var(--espazo-toggle-fechado, var(--wp--preset--color--base));
  position: relative;
  padding: 25px 20px 25px 0;   /* igual ao produtivo: o ícone fica por cima dos 20px */
  border-bottom: 1px solid #e7e7e7;
  list-style: none;
  cursor: pointer;
}

.wp-block-post-content .espazo-acordeao > summary::-webkit-details-marker {
  display: none;
}

/* Ícone: um mais dentro de um círculo, à direita, 16px — e nada quando o item
 * está aberto, tal como no produtivo. O tipo de letra de ícones do Divi
 * (ETmodules) não existe aqui, por isso o sinal é desenhado em CSS. */
.wp-block-post-content .espazo-acordeao > summary::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  width: 16px;
  height: 16px;
  margin-top: -8px;
  border: 1px solid var(--espazo-toggle-icone, #b3b3b3);
  border-radius: 50%;
}

.wp-block-post-content .espazo-acordeao > summary::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 3px;
  width: 10px;
  height: 10px;
  margin-top: -5px;
  background:
    linear-gradient(var(--espazo-toggle-icone, #b3b3b3), var(--espazo-toggle-icone, #b3b3b3))
      center / 10px 1px no-repeat,
    linear-gradient(var(--espazo-toggle-icone, #b3b3b3), var(--espazo-toggle-icone, #b3b3b3))
      center / 1px 10px no-repeat;
}

.wp-block-post-content .espazo-acordeao[open] > summary::before,
.wp-block-post-content .espazo-acordeao[open] > summary::after {
  display: none;
}

/* As duas cores da pergunta vêm do módulo Divi, em propriedades personalizadas
   postas pelo conversor (ver `divi-para-blocos.py`). */
.wp-block-post-content .espazo-acordeao[open] > summary {
  color: var(--espazo-toggle-aberto, var(--wp--preset--color--primary));
}

/* ------------------------------------------------------------
 * Auditoria 2026-09-19, ID N-03 — Gravity Forms.
 *
 * O produtivo usa a marcação "legacy" do Gravity Forms (o export das cinco
 * fichas não traz `markupVersion`, o que no plugin significa legacy) com a
 * folha do Divi por cima. No staging o importador tinha posto
 * `markupVersion=2`: marcação nova, grelha nova, aspecto diferente. Repôs-se
 * o valor nas fichas — por isso a estrutura aqui já é a mesma do produtivo — e
 * o que falta é a camada que no produtivo vinha do Divi e aqui não existe.
 *
 * Medido no produtivo (1440px, /self-storage/): caixa 750px; campos com
 * margem de topo de 16px e 16px de folga à direita; controlos a 16px Poppins,
 * cor #4e4e4e, moldura 1px #bbb sem cantos redondos nem sombra; input com
 * 5px 4px de espaço interior (37px de altura), textarea 6px 8px (160px),
 * select 16px (57px); etiqueta do consentimento a 16px/24px em #666 com o
 * link a #9BCA3C; botão verde, Poppins 600 14px, maiúsculas, 2px de
 * espaçamento entre letras.
 * ------------------------------------------------------------ */
.wp-block-post-content .gform_wrapper {
  font-family: var(--wp--preset--font-family--heading);
  font-size: 16px;
}

.wp-block-post-content .gform_wrapper input[type="text"],
.wp-block-post-content .gform_wrapper input[type="email"],
.wp-block-post-content .gform_wrapper input[type="tel"],
.wp-block-post-content .gform_wrapper input[type="url"],
.wp-block-post-content .gform_wrapper input[type="number"],
.wp-block-post-content .gform_wrapper textarea,
.wp-block-post-content .gform_wrapper select {
  font-family: inherit;
  font-size: 16px;
  line-height: normal;
  color: #4e4e4e;
  background-color: #fff;
  border: 1px solid #bbb;
  border-radius: 0;
  box-shadow: none;
}

.wp-block-post-content .gform_wrapper input[type="text"],
.wp-block-post-content .gform_wrapper input[type="email"],
.wp-block-post-content .gform_wrapper input[type="tel"],
.wp-block-post-content .gform_wrapper input[type="url"],
.wp-block-post-content .gform_wrapper input[type="number"] {
  padding: 5px 4px;
}

.wp-block-post-content .gform_wrapper textarea {
  padding: 6px 8px;
}

.wp-block-post-content .gform_wrapper select {
  padding: 16px;
}

/* Lista de opções (o consentimento e a newsletter): no produtivo a etiqueta
   fica a 16px/24px e o link para a política a verde. */
.wp-block-post-content .gform_wrapper .gfield_checkbox label,
.wp-block-post-content .gform_wrapper .gfield_radio label {
  font-size: 16px;
  line-height: 24px;
  color: #666;
}

.wp-block-post-content .gform_wrapper .gfield_checkbox label a,
.wp-block-post-content .gform_wrapper .gfield_radio label a {
  color: var(--wp--preset--color--primary);
}

.wp-block-post-content .gform_wrapper .gfield_checkbox input[type="checkbox"] {
  margin: 6px 0 0 1px;
}

/* Botão de envio — auditoria 2026-09-19, ID N-04.
 *
 * DESVIO DELIBERADO DO PRODUTIVO, decidido pelo João.
 *
 * No produtivo este botão ficou sem estilo e herda o biselado do navegador
 * (`border: 8px outset`), que é um defeito e não uma escolha. Aqui usa-se
 * exactamente o mesmo estilo dos outros botões do sítio, medido no staging:
 * fundo verde da marca, texto escuro (é a decisão H-01 de contraste AA, que
 * vale para todos os botões), 14px/600 em maiúsculas com 2px de espaçamento de
 * letras, `padding: 12px 20px`, sem moldura e sem cantos redondos.
 */
.wp-block-post-content .gform_wrapper .gform_footer input[type="submit"],
.wp-block-post-content .gform_wrapper .gform_footer button.gform_button {
  font-family: var(--wp--preset--font-family--heading);
  font-size: 14px;
  font-weight: 600;
  line-height: 23.8px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--wp--preset--color--main);
  background-color: var(--wp--preset--color--primary);
  border: 0;
  border-radius: 0;
  padding: 12px 20px;
  cursor: pointer;
}

/* Espaçamentos internos: o tema dá 8px de topo a cada `.ginput_container` e
   12px de margem vertical a cada controlo; no produtivo é 0 (2px só na lista
   de opções), e era daí que vinham os 26px a mais no primeiro campo. */
.wp-block-post-content .gform_wrapper {
  line-height: 26px;
}

.wp-block-post-content .gform_wrapper .ginput_container {
  margin-top: 0;
}

.wp-block-post-content .gform_wrapper .ginput_container_checkbox,
.wp-block-post-content .gform_wrapper .ginput_container_radio {
  margin-top: 2px;
}

.wp-block-post-content .gform_wrapper .ginput_container input,
.wp-block-post-content .gform_wrapper .ginput_container textarea,
.wp-block-post-content .gform_wrapper .ginput_container select {
  margin-top: 0;
  margin-bottom: 0;
}

.wp-block-post-content .gform_wrapper .ginput_complex .name_first,
.wp-block-post-content .gform_wrapper .ginput_complex .name_last {
  padding-top: 0;
}

/* Caixa de selecção. No produtivo o `input` está a `visibility:hidden` e o
   quadrado é um glifo do tipo de letra de ícones do Divi (ETmodules, "V"
   vazio e "Z" com visto), que não existe no staging — logo, desenha-se em
   CSS, como no acordeão (M-02). Medido no produtivo a 3x: quadrado de 29.3px
   com traço de 2px em #666, 7.2px de folga até ao texto, descido 10.8px.
   Diferença deliberada: o produtivo esconde o `input` com `visibility:hidden`,
   o que o retira da navegação por teclado; aqui fica com opacidade zero — não
   se vê, mas continua focável, e o foco desenha-se no quadrado. */
.wp-block-post-content .gform_wrapper .gfield_checkbox input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
}

.wp-block-post-content .gform_wrapper .gfield_checkbox label {
  position: relative;
  margin-left: 1px;   /* o `input` do produtivo fica no fluxo com 1px de margem */
}

.wp-block-post-content .gform_wrapper .gfield_checkbox label::before {
  content: "";
  display: inline-block;
  box-sizing: border-box;
  width: 29.3px;
  height: 29.3px;
  border: 2px solid #666;
  margin-right: 7.2px;
  position: relative;
  top: 10.8px;
}

/* O glifo do produtivo tem 36px de corpo: a caixa de linha que ele cria deixa
   o item da lista com 54px de altura, contra os 36px do quadrado desenhado em
   CSS. Os 18px que faltam repõem-se aqui — 10px acima e 8px abaixo, que é como
   estão distribuídos no produtivo — para que o campo tenha a mesma altura e o
   texto fique à mesma cota. Vão na etiqueta e não no <li> (que o Gravity Forms
   fixa a `padding:0!important`) nem no contentor (onde o espaço interior
   impediria as margens de colapsarem e somaria mais 20px). */
.wp-block-post-content .gform_legacy_markup_wrapper .gfield_checkbox li label {
  padding-top: 10px;
  padding-bottom: 8px;
}

/* As quatro regras seguintes existem só para ganhar em especificidade às do
   Gravity Forms clássico, que são mais específicas do que as de cima (o
   selector está copiado do plugin com os nossos prefixos à frente). Sem isto o
   primeiro campo ficava 14px mais alto do que no produtivo. */
body .wp-block-post-content .gform_legacy_markup_wrapper .top_label div.ginput_container {
  margin-top: 0;
}

body .wp-block-post-content .gform_legacy_markup_wrapper .top_label div.ginput_container_checkbox,
body .wp-block-post-content .gform_legacy_markup_wrapper .top_label div.ginput_container_radio {
  margin-top: 2px;
}

.wp-block-post-content .gform_legacy_markup_wrapper.gf_browser_chrome ul.gform_fields li.gfield span.name_first,
.wp-block-post-content .gform_legacy_markup_wrapper.gf_browser_chrome ul.gform_fields li.gfield span.name_middle,
.wp-block-post-content .gform_legacy_markup_wrapper.gf_browser_chrome ul.gform_fields li.gfield span.name_last {
  padding-top: 0;
}

.wp-block-post-content .gform_legacy_markup_wrapper .field_sublabel_hidden_label .ginput_complex.ginput_container input,
.wp-block-post-content .gform_legacy_markup_wrapper .field_sublabel_below .ginput_complex.ginput_container input {
  margin-bottom: 0;
}

.wp-block-post-content .gform_wrapper .gfield_checkbox input[type="checkbox"]:checked + label::after {
  content: "";
  position: absolute;
  left: -2px;
  top: 15px;
  width: 40px;
  height: 40px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M6 22 L15 31 L36 6' fill='none' stroke='%23666666' stroke-width='5'/%3E%3C/svg%3E") no-repeat center / 40px 40px;
}

.wp-block-post-content .gform_wrapper .gfield_checkbox input[type="checkbox"]:focus-visible + label::before {
  outline: 2px solid var(--wp--preset--color--primary);
  outline-offset: 2px;
}

/* Auditoria 2026-09-19, ID N-05 — lista de opções nas páginas de loja.
 *
 * Nas páginas de loja o produtivo não isola a lista do Gravity Forms das
 * regras gerais de <ul> do Divi: ganham `.entry-content ul li ul`
 * (padding:2px 0 2px 20px) e `.et_pb_text ul` (padding-bottom:1em), e o
 * resultado medido é `2px 0 16px 20px` — a caixa de selecção fica 20px para
 * dentro e o campo com 80px em vez de 54px. Nas outras páginas isso não
 * acontece, porque aí o conteúdo não está dentro de `.entry-content`.
 * Reproduz-se para o staging ser igual ao produtivo; é um efeito indesejado do
 * produtivo, e basta apagar este bloco para o corrigir (ver N-05 no registo).
 */
body.single-wpsl_stores .wp-block-post-content .gform_wrapper ul.gfield_checkbox {
  padding: 2px 0 16px 20px;
}

/* Auditoria 2026-09-19, ID N-08 — área de toque do botão de submenu.
 *
 * O WordPress põe um <button aria-label="Submenu..."> ao lado dos itens com
 * submenu; é o que permite abrir o submenu com o teclado (no produtivo o menu
 * só responde ao rato, portanto isto é melhor e não pior). Medido: 8x8px, bem
 * abaixo dos 24px mínimos das WCAG 2.2. Aumenta-se só a área de toque, com uma
 * camada por cima que não ocupa espaço no fluxo — a geometria do menu, medida
 * contra o produtivo em M-01, fica exactamente na mesma.
 */
.wp-block-navigation .wp-block-navigation__submenu-icon {
  position: relative;
}

.wp-block-navigation .wp-block-navigation__submenu-icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 24px;
  height: 24px;
  transform: translate(-50%, -50%);
}

/* ------------------------------------------------------------
 * Auditoria 2026-09-19, ID N-09 — tipografia por tamanho de ecrã.
 *
 * O Divi guarda as variantes de tamanho de letra em atributos com sufixo
 * (`header_font_size_phone="40px"`) e aplica-as numa media query: tablet até
 * 980px, telemóvel até 767px. Medido a 390px, o produtivo põe o H1 a 40px/48px
 * e o staging mantinha os 60px/72px do computador.
 *
 * Os `!important` desta secção não são preferência: o tamanho de letra vem de
 * um estilo em linha, escrito pelo próprio bloco (é assim que o Gutenberg
 * guarda `style.typography.fontSize`), e um estilo em linha ganha sempre a uma
 * regra de folha, por mais específica que seja. Um bloco não sabe exprimir uma
 * media query, por isso não há maneira de pôr a variante no próprio bloco. A
 * alternativa — uma propriedade personalizada no estilo em linha — perde-se
 * assim que a página é aberta no editor, que reescreve o estilo a partir dos
 * atributos; esta não.
 *
 * As classes são geradas por `scripts/divi-para-blocos.py`
 * (`classe_responsiva`), que as imprime no fim de cada conversão — se aparecer
 * uma classe que não esteja aqui, falta a regra.
 * ------------------------------------------------------------ */
@media (max-width: 980px) {
  .espazo-tab-40-56 { font-size: 40px !important; line-height: 56px !important; }
  .espazo-tab-46    { font-size: 46px !important; }
  .espazo-tab-46-55 { font-size: 46px !important; line-height: 55.2px !important; }
}

@media (max-width: 767px) {
  .espazo-tel-40-48 { font-size: 40px !important; line-height: 48px !important; }
}

/* ------------------------------------------------------------
 * Auditoria 2026-09-19, ID N-10 — recuo lateral dos módulos em ecrã pequeno.
 *
 * DESVIO DELIBERADO DO PRODUTIVO, assinalado para decisão.
 *
 * O módulo de texto que contém o formulário tem `custom_margin="|165px||165px"`
 * e o Divi não lhe deu variante para telemóvel. Medido a 390px, no PRODUTIVO o
 * formulário fica com ~60px de largura (390 - 330) e os campos aparecem com
 * uma letra por linha: é impossível preenchê-lo num telemóvel. O staging
 * reproduzia o mesmo defeito, por ser fiel ao original.
 *
 * Aqui, abaixo dos 767px (a fronteira de telemóvel do Divi), o recuo passa a
 * zero e o formulário ocupa a coluna toda. Para voltar ao comportamento do
 * produtivo basta apagar este bloco. O `!important` é preciso porque a margem
 * e a largura vêm de um estilo em linha escrito pelo bloco (ver N-09).
 * ------------------------------------------------------------ */
@media (max-width: 767px) {
  .wp-block-post-content .espazo-recuo-modulo {
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: 100% !important;
  }
}

/* ------------------------------------------------------------
 * Auditoria 2026-09-22 — cartão "Onde estamos" do Self-Storage.
 *
 * As 9 ligações com o nome de cada centro (Telheiras, Sacavém, Parque das
 * Nações...) estão dentro de um título (`h4.wp-block-heading`) com a cor
 * "main" (quase preto, #1E1D1C) — mas o `theme.json` define uma cor global
 * para TODAS as ligações do site (`styles.elements.link`, cor "primary",
 * verde), que tem prioridade sobre a cor herdada do título, porque uma regra
 * que atinge directamente o elemento `<a>` ganha sempre à cor herdada do pai,
 * independentemente da especificidade. No produtivo (Divi) o mesmo
 * título/ligação não tem essa regra global e fica na cor de texto normal
 * (~#2a2a2a). Resultado, só aqui: os 9 nomes de centro apareciam a verde em
 * vez de quase pretos.
 *
 * Confirmado por pesquisa em todo o conteúdo publicado (regex por título com
 * uma ligação a abrir o texto): é o único sítio no site com este padrão —
 * corrigir aqui não muda a cor de nenhuma outra ligação.
 * ------------------------------------------------------------ */
.wp-block-heading a {
  color: inherit;
}
.wp-block-heading a:hover {
  color: var(--wp--preset--color--primary-hover);
}