/*
Theme Name: Zee Tech
Theme URI: https://www.zeetech.co.mz
Description: Tema-filho da Zee Tech — identidade visual escura e técnica derivada do logótipo: cantos chanfrados a 45°, contornos hairline em gradiente, traços de circuito e ciano como única cor de acento. Tema-pai: Extendable.
Author: Zee Tech
Author URI: https://www.zeetech.co.mz
Template: extendable
Version: 1.0.0
Requires at least: 6.6
Tested up to: 6.8
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: zeetech
*/

/* =========================================================
   ZEE TECH — SISTEMA VISUAL
   As cores e os tipos de letra vivem em theme.json.
   Este ficheiro trata do que o WordPress não sabe fazer sozinho:
   chanfros, contornos em gradiente, grelha de fundo e circuitos.
   ========================================================= */

:root{
  --zt-preto:#000000;
  --zt-navy:#0C173D;
  --zt-ciano:#31C3E7;
  --zt-ciano-hover:#7FD8F0;
  --zt-cinza:#444545;
  --zt-gelo:#F1F0F0;
  --zt-card:#05070E;
  --zt-faixa:#04060C;
  --zt-topo:#060B1C;
  --zt-suave:rgba(241,240,240,.62);
  --zt-linha:rgba(241,240,240,.12);
  --zt-chanfro:22px;
  --zt-chanfro-btn:14px;
}

/* ---------- Base ---------- */

body{ -webkit-font-smoothing:antialiased; }

a{ text-decoration:none; }
a:hover{ color:var(--zt-ciano-hover); }

:where(.wp-site-blocks) a:focus-visible,
:where(.wp-site-blocks) button:focus-visible,
:where(.wp-site-blocks) input:focus-visible,
:where(.wp-site-blocks) textarea:focus-visible{
  outline:2px solid var(--zt-ciano);
  outline-offset:3px;
}

/* ---------- Chanfro: a assinatura geométrica ---------- */

.zt-cut{
  clip-path:polygon(
    0 0,
    calc(100% - var(--zt-chanfro)) 0,
    100% var(--zt-chanfro),
    100% 100%,
    var(--zt-chanfro) 100%,
    0 calc(100% - var(--zt-chanfro))
  );
}

.zt-cut-sm{ --zt-chanfro:12px; }
.zt-cut-lg{ --zt-chanfro:32px; }

/* ---------- Card com contorno hairline em gradiente ----------
   Estrutura: um Grupo exterior .zt-frame com um Grupo interior
   .zt-frame__in. O gradiente do exterior é visível só no 1px
   de padding — é isso que faz o contorno.                      */

.zt-frame{
  padding:1px;
  background:linear-gradient(150deg,
    rgba(49,195,231,.48),
    rgba(68,69,69,.30) 48%,
    rgba(49,195,231,.10));
  clip-path:polygon(
    0 0, calc(100% - 22px) 0, 100% 22px,
    100% 100%, 22px 100%, 0 calc(100% - 22px));
}

.zt-frame > .zt-frame__in,
.zt-frame > .wp-block-group{
  background:var(--zt-card);
  height:100%;
  clip-path:polygon(
    0 0, calc(100% - 21px) 0, 100% 21px,
    100% 100%, 21px 100%, 0 calc(100% - 21px));
}

.zt-frame:hover{
  background:linear-gradient(150deg,
    rgba(49,195,231,.75),
    rgba(68,69,69,.35) 48%,
    rgba(49,195,231,.18));
}

@media (prefers-reduced-motion:no-preference){
  .zt-frame{ transition:background .28s ease; }
}

/* ---------- Botões ---------- */

.wp-block-button.is-style-zt-chanfro .wp-block-button__link,
.wp-block-button__link.zt-cut-btn{
  clip-path:polygon(
    0 0, calc(100% - var(--zt-chanfro-btn)) 0, 100% var(--zt-chanfro-btn),
    100% 100%, var(--zt-chanfro-btn) 100%, 0 calc(100% - var(--zt-chanfro-btn)));
  border-radius:0;
  font-weight:600;
  letter-spacing:.005em;
  padding:1rem 1.75rem;
  min-height:54px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.6rem;
}

.wp-block-button.is-style-zt-chanfro.is-style-outline .wp-block-button__link,
.wp-block-button.is-style-zt-chanfro .wp-block-button__link.is-style-outline{
  border:1px solid rgba(49,195,231,.55);
}

@media (prefers-reduced-motion:no-preference){
  .wp-block-button__link{ transition:background-color .2s ease,color .2s ease; }
}

/* ---------- Etiqueta de secção (eyebrow) ---------- */

.zt-eyebrow{
  font-family:var(--wp--preset--font-family--plex-mono);
  font-size:12px !important;
  font-weight:500;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--zt-ciano) !important;
  display:flex;
  align-items:center;
  gap:14px;
  margin-bottom:1.4rem !important;
}

.zt-eyebrow::after{
  content:"";
  height:1px;
  flex-grow:1;
  background:linear-gradient(90deg,rgba(49,195,231,.5),rgba(49,195,231,0));
}

/* Número de secção ou de fase */
.zt-num{
  font-family:var(--wp--preset--font-family--plex-mono);
  font-size:12px !important;
  letter-spacing:.2em;
  color:rgba(49,195,231,.85) !important;
  text-transform:uppercase;
}

/* ---------- Grelha técnica de fundo ---------- */

.zt-grid-bg{ position:relative; isolation:isolate; }

.zt-grid-bg::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background-image:
    linear-gradient(rgba(49,195,231,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(49,195,231,.05) 1px,transparent 1px);
  background-size:96px 96px;
}

/* Halo ciano — usar com moderação, um por página */
.zt-glow{ position:relative; isolation:isolate; overflow:hidden; }

.zt-glow::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:radial-gradient(760px 480px at 76% 22%,
    rgba(49,195,231,.18), rgba(12,23,61,.32) 45%, transparent 72%);
}

/* ---------- Traços de circuito (SVG inline num bloco HTML) ---------- */

.zt-circuit{
  position:absolute;
  top:0;
  right:0;
  z-index:0;
  pointer-events:none;
  opacity:.5;
  max-width:55%;
}

.zt-circuit svg{ display:block; width:100%; height:auto; }

@media (max-width:781px){
  .zt-circuit{ opacity:.28; max-width:80%; }
}

/* ---------- Listas com marcador losango ---------- */

.wp-block-list.is-style-zt-losango{
  list-style:none;
  padding-left:0;
  margin-left:0;
}

.wp-block-list.is-style-zt-losango li{
  position:relative;
  padding-left:1.35rem;
  margin-bottom:.7rem;
}

.wp-block-list.is-style-zt-losango li::before{
  content:"";
  position:absolute;
  left:0;
  top:.62em;
  width:5px;
  height:5px;
  background:var(--zt-ciano);
  transform:rotate(45deg);
}

/* ---------- Etiquetas de tecnologia ---------- */

.zt-tags{ display:flex; flex-wrap:wrap; gap:8px; }

.zt-tags span,
.zt-tag{
  display:inline-flex;
  align-items:center;
  height:34px;
  padding:0 14px;
  border:1px solid rgba(241,240,240,.16);
  font-family:var(--wp--preset--font-family--plex-mono);
  font-size:12px;
  letter-spacing:.05em;
  color:rgba(241,240,240,.78);
}

/* ---------- Ícone em moldura chanfrada ---------- */

.zt-ico{
  width:54px;
  height:54px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(49,195,231,.4);
  color:var(--zt-ciano);
  clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,12px 100%,0 calc(100% - 12px));
}

.zt-ico svg{ width:24px; height:24px; }

/* ---------- Linha do tempo do processo ---------- */

.zt-processo{ position:relative; }

.zt-processo::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:26px;
  height:1px;
  background:linear-gradient(90deg,
    rgba(49,195,231,.6), rgba(49,195,231,.25) 70%, rgba(49,195,231,0));
}

.zt-fase-marca{
  width:14px;
  height:14px;
  background:var(--zt-preto);
  border:1px solid var(--zt-ciano);
  transform:rotate(45deg);
  margin:20px 0 28px;
}

.zt-fase-marca.is-ativa{ background:var(--zt-ciano); }

@media (max-width:781px){
  .zt-processo::before{ display:none; }
}

/* ---------- Placeholder de imagem, enquanto não há fotografias ---------- */

.zt-placeholder{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:180px;
  background:linear-gradient(140deg,rgba(49,195,231,.16),rgba(12,23,61,.75));
  border-bottom:1px solid var(--zt-linha);
  font-family:var(--wp--preset--font-family--plex-mono);
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:rgba(241,240,240,.34);
}

/* ---------- Cabeçalho ---------- */

.zt-nav-lang{
  font-family:var(--wp--preset--font-family--plex-mono);
  font-size:12px;
  letter-spacing:.1em;
  color:rgba(241,240,240,.42);
}

.zt-nav-lang .current-lang,
.zt-nav-lang strong{ color:var(--zt-ciano); font-weight:500; }

/* ---------- Formulários ---------- */

.zt-form input[type="text"],
.zt-form input[type="email"],
.zt-form input[type="tel"],
.zt-form textarea,
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 textarea{
  width:100%;
  background:rgba(241,240,240,.03);
  border:1px solid rgba(241,240,240,.18);
  border-radius:0;
  color:var(--zt-gelo);
  padding:0 16px;
  height:52px;
  font-family:inherit;
  font-size:15px;
}

.zt-form textarea,
.wpcf7 textarea{ height:auto; min-height:132px; padding:15px 16px; }

.zt-form ::placeholder,
.wpcf7 ::placeholder{ color:rgba(241,240,240,.35); }

.zt-form label,
.wpcf7 label{
  font-family:var(--wp--preset--font-family--plex-mono);
  font-size:11px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:rgba(241,240,240,.55);
  display:block;
  margin-bottom:9px;
}

.wpcf7 input[type="submit"]{
  background:var(--zt-ciano);
  color:#04060C;
  border:0;
  border-radius:0;
  font-weight:600;
  font-size:15px;
  min-height:54px;
  padding:0 28px;
  cursor:pointer;
  clip-path:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,14px 100%,0 calc(100% - 14px));
}

/* ---------- Rodapé ---------- */

.zt-rodape{ border-top:1px solid var(--zt-linha); }

.zt-social a{
  width:40px;
  height:40px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(241,240,240,.18);
  color:rgba(241,240,240,.7);
}

.zt-social a:hover{ border-color:var(--zt-ciano); color:var(--zt-ciano); }

/* ---------- Telemóvel: áreas de toque nunca abaixo de 44px ---------- */

@media (max-width:781px){
  .wp-block-navigation__container a,
  .zt-social a,
  .wp-block-button__link{ min-height:44px; }

  .zt-frame > .zt-frame__in,
  .zt-frame > .wp-block-group{ padding:24px !important; }

  :root{ --zt-chanfro:16px; }
}

/* ---------- Impressão ---------- */

@media print{
  .zt-circuit,.zt-grid-bg::before,.zt-glow::after{ display:none !important; }
  body{ background:#fff !important; color:#000 !important; }
}