/*
Theme Name: PortugueseFlow Child
Template: portugueseflow
Version: 1.0.0
Text Domain: portugueseflow-child
*/

/* CSS RESET */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
	margin:0;
	padding: 0;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

body { background-color: transparent; }


/* CSS ÚNICO — continuidade perfeita menu/overlay + wrapper 100% e conteúdo centrado */
:root{
  --basalt:#151515;
  --deep:#0C2238;
  --lava:#D04E1E;
  --sand:#F3EFE8;

  --nav-h:64px;

  /* cor sólida (fonte de verdade para a junção menu/hero) */
  --nav-bg:rgba(12,34,56,1);

  --nav-link:rgba(255,255,255,.92);
  --nav-link-hover:#ffffff;

  --hero-bg:var(--basalt);
  --hero-shade:rgba(21,21,21,.34);

  /* overlay azul do hero (topo tem de ser EXACTAMENTE igual ao menu) */
  --hero-o1:var(--nav-bg);
  --hero-o2:rgba(12,34,56,.78);
  --hero-o3:rgba(12,34,56,.40);
  --hero-o4:rgba(21,21,21,.14);
  --hero-o5:rgba(21,21,21,0);

  /* lava do hero (mancha suave) */
  --hero-l1:rgba(208,78,30,.28);
  --hero-l2:rgba(208,78,30,.14);
  --hero-l3:rgba(208,78,30,0);

  --overlay-sat:1.55;
  --overlay-con:1.12;

  /* HERO BOX: gradiente laranja animado (substitui o cinzento) */
  --box-glow-1:rgba(208,78,30,.22);
  --box-glow-2:rgba(255,140,60,.12);
  --box-glow-3:rgba(208,78,30,.08);
  --box-glass:rgba(12,34,56,.14); /* base fria só para dar profundidade */

  --box-border:rgba(255,255,255,.12);
  --box-shadow:rgba(0,0,0,.48);

  --text:#ffffff;
  --text-shadow-1:rgba(0,0,0,.75);
  --text-shadow-2:rgba(0,0,0,.65);
  --accent:var(--sand);

  --btn-primary-bg:var(--lava);
  --btn-primary-shadow:rgba(208,78,30,.25);
  --btn-ghost-bg:rgba(12,34,56,.26);
  --btn-ghost-border:rgba(255,255,255,.14);
  --btn-ghost-hover-border:rgba(255,255,255,.24);

  /* conteúdo centrado (ajusta aqui) */
  --content-w:80%;
  --content-max:1200px;

  /* elimina a “junta” (faixa sólida extra abaixo do menu) */
  --seam-fix:10px;
}

/* evita regras globais que estragam */
.header{ width:100%; }
nav{ width:auto; margin:0; }

/* MENU FIXO (wrapper 100%) */
#main-menu.main-nav{
  position:fixed;
  top:0; left:0; right:0;
  height:var(--nav-h);
  z-index:99999;
  background:var(--nav-bg);
  display:flex;
  align-items:center;
  padding:0 18px;
  box-sizing:border-box;

  /* iguala o “look” ao hero (o hero tem filter no overlay) */
  filter:saturate(var(--overlay-sat)) contrast(var(--overlay-con));
}

/* CONTEÚDO DO MENU (centrado) */
.main-nav__inner{
  width:min(var(--content-w), var(--content-max));
  margin:0 auto;
  display:flex;
  align-items:center;
}

/* lista do menu */
#main-menu .menu{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  gap:22px;
  align-items:center;
}

#main-menu .menu a{
  color:var(--nav-link);
  text-decoration:none;
  font-weight:650;
  font-size:14px;
  line-height:1;
}
#main-menu .menu a:hover{ color:var(--nav-link-hover); }

#main-menu .current-menu-item > a,
#main-menu .current_page_item > a{ color:var(--nav-link-hover); }

/* HERO (wrapper 100%) */
.hero{
  position:relative;
  min-height:82vh;
  width:100%;
  margin:0;
  overflow:hidden;
  isolation:isolate;
  display:flex;
  align-items:center;

  background-color:var(--hero-bg);
  background-image:var(--hero-img);
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;

  /* garante que o conteúdo não fica “por baixo” do menu fixo */
  padding-top:var(--nav-h);
  box-sizing:border-box;
}

/* CONTEÚDO DO HERO (centrado) */
.hero__inner{
  position:relative;
  z-index:2;
  width:min(var(--content-w), var(--content-max));
  margin:0 auto;
  padding:0 18px;
  box-sizing:border-box;
  margin-top:-5%;
}

/* base: faixa sólida igual ao menu + sombreado basalto */
.hero::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:linear-gradient(180deg,
    var(--nav-bg) 0px,
    var(--nav-bg) calc(var(--nav-h) + var(--seam-fix)),
    var(--hero-shade) calc(var(--nav-h) + var(--seam-fix) + 50px),
    var(--hero-shade) 100%);
}

/* overlay: topo sólido igual ao menu + drift lento */
.hero::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;

  background:
    linear-gradient(180deg,
      var(--nav-bg) 0px,
      var(--nav-bg) calc(var(--nav-h) + var(--seam-fix)),
      var(--hero-o2) calc(var(--nav-h) + var(--seam-fix) + 140px),
      var(--hero-o3) 100%,
      var(--hero-o4) 100%,
      var(--hero-o5) 100%),
    radial-gradient(1200px 900px at 22% 18%,
      var(--hero-l1) 0%,
      var(--hero-l2) 40%,
      var(--hero-l3) 72%);

  filter:saturate(var(--overlay-sat)) contrast(var(--overlay-con));
  background-size:100% 100%, 140% 140%;
  background-position:0 0, 50% 20%;
  animation:overlayDrift 28s ease-in-out infinite alternate;
}

@keyframes overlayDrift{
  0%   { background-position:0 0, 48% 18%; }
  100% { background-position:0 0, 55% 26%; }
}

/* BOX DO HERO: gradiente laranja animado (no próprio box) */
.hero__box{
  color:var(--text);
}

@keyframes heroBoxLava{
  0%{
    background-position: 0% 0%, 100% 10%, 42% 100%, 0 0, 0 0;
  }
  50%{
    background-position: 18% 12%, 78% 26%, 55% 88%, 0 0, 0 0;
  }
  100%{
    background-position: 30% 22%, 62% 34%, 66% 72%, 0 0, 0 0;
  }
}

.hero__title{
  margin:0 0 14px;
  line-height:1.02;
  font-weight:700;
  font-size:clamp(34px,4.2vw,58px);
  letter-spacing:-0.02em;
  text-shadow:0 2px 8px var(--text-shadow-1), 0 18px 44px var(--text-shadow-2);
  text-align: center;
}

.hero__accent{
  color:var(--accent);
  font-style:italic;
  font-weight:800;
}

.hero__actions{
  gap:12px;
  text-align: center;
}

/* botões */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:40px;
  padding:0 14px;
  border-radius:10px;
  font-size:12px;
  font-weight:700;
  text-decoration:none;
  white-space:nowrap;
  border:1px solid transparent;
  transition:transform .15s ease, filter .15s ease, border-color .15s ease;
}
.btn:active{ transform:translateY(1px); }

.btn--primary{
  background:var(--btn-primary-bg);
  color:var(--text);
  box-shadow:0 12px 26px var(--btn-primary-shadow);
}
.btn--primary:hover{ filter:brightness(1.05); }

.btn--ghost{
  background:var(--btn-ghost-bg);
  border-color:var(--btn-ghost-border);
  color:var(--text);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
.btn--ghost:hover{ border-color:var(--btn-ghost-hover-border); }

@media (max-width:700px){
  :root{
    --nav-h:58px;
    --content-w:100%;
    --seam-fix:8px;
  }

  #main-menu.main-nav{ padding:0 14px; }
  #main-menu .menu{ gap:14px; }

  .hero{ min-height:86vh; align-items:flex-end; }
  .hero__inner{ padding:0 14px 16px;  }
  .hero__box{ border-radius:16px; }

  /* opcional: ligeiramente mais “vivo” em mobile */
  .hero__box{ animation-duration:26s; }
}

@media (prefers-reduced-motion: reduce){
  .hero::after,
  .hero__box{ animation:none !important; }
}