/* ==========================================================================
   OpsyLab — components.css
   Header (topbar) com hamburger mobile, footer, botões, status badge.
   Carregar DEPOIS de core.css.
   ========================================================================== */

/* === Buttons === */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:14px 22px; border-radius:999px;
  font-family:'Inter', sans-serif; font-weight:600; font-size:14.5px; letter-spacing:.01em;
  border:1px solid transparent; transition:.2s;
  cursor:pointer; text-decoration:none;
  line-height:1.2;
}
.btn-primary{background:var(--orange); color:#fff}
.btn-primary:hover{background:#c96f14; transform:translateY(-1px)}
.btn-ghost{background:transparent; color:inherit; border-color:currentColor}
.btn-ghost:hover{background:rgba(19,35,73,.06)}
.btn-dark{background:var(--ink); color:#fff}
.btn-dark:hover{background:#0c1730}
.btn-wa{background:#25D366; color:#fff}
.btn-wa:hover{background:#1eb858}
.btn svg{width:14px; height:14px; flex:0 0 auto}

/* Hit-target generoso no mobile */
@media (max-width:959.98px){
  .btn,button,[role="button"]{min-height:44px}
}

/* === Status badge (NOC 24/7) === */
.status{
  display:inline-flex; align-items:center; gap:8px;
  font-family:'JetBrains Mono', monospace; font-size:11.5px; color:var(--muted);
  border:1px solid var(--line); padding:6px 10px; border-radius:999px; background:#fff;
  white-space:nowrap;
}
.dot{
  width:8px; height:8px; border-radius:50%; background:#22c55e;
  box-shadow:0 0 0 0 rgba(34,197,94,.5);
  animation:pulse 2s infinite;
}
.dot--red{background:#ef4444; box-shadow:0 0 0 0 rgba(239,68,68,.5); animation:pulse-red 2s infinite}
.dot--orange{background:var(--orange); box-shadow:0 0 0 0 rgba(229,134,36,.5); animation:pulse-orange 2s infinite}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(34,197,94,.45)}
  70%{box-shadow:0 0 0 10px rgba(34,197,94,0)}
  100%{box-shadow:0 0 0 0 rgba(34,197,94,0)}
}
@keyframes pulse-red{
  0%{box-shadow:0 0 0 0 rgba(239,68,68,.45)}
  70%{box-shadow:0 0 0 10px rgba(239,68,68,0)}
  100%{box-shadow:0 0 0 0 rgba(239,68,68,0)}
}
@keyframes pulse-orange{
  0%{box-shadow:0 0 0 0 rgba(229,134,36,.45)}
  70%{box-shadow:0 0 0 10px rgba(229,134,36,0)}
  100%{box-shadow:0 0 0 0 rgba(229,134,36,0)}
}

/* === Topbar / Nav (mobile-first) === */
.topbar{
  position:sticky; top:0; z-index:50;
  background:rgba(246,244,239,.92);
  backdrop-filter:saturate(140%) blur(12px);
  -webkit-backdrop-filter:saturate(140%) blur(12px);
  border-bottom:1px solid var(--line);
}
.topbar .wrap{
  padding-top:max(0px, env(safe-area-inset-top));
}
.nav{
  display:flex; align-items:center; gap:16px;
  height:var(--header-h);
}
.brand{
  display:flex; align-items:center; gap:10px;
  font-weight:700; font-size:19px; letter-spacing:-.01em;
  flex:0 0 auto;
}
.brand img{height:44px; width:auto; display:block}

/* Nav menu — drawer mobile, inline desktop */
.nav ul#primary-nav,
.nav ul.nav-list{
  list-style:none; padding:0; margin:0;
  /* Mobile: drawer fora da tela */
  position:fixed;
  inset:var(--header-h) 0 0 0;
  background:var(--ink);
  z-index:99;
  display:flex; flex-direction:column;
  gap:8px;
  padding:32px max(20px, env(safe-area-inset-left));
  padding-bottom:max(32px, env(safe-area-inset-bottom));
  transform:translateX(100%);
  transition:transform .3s cubic-bezier(.2,.7,.2,1);
  overflow-y:auto;
}
.nav ul#primary-nav.is-open,
.nav ul.nav-list.is-open{transform:translateX(0)}

.nav ul#primary-nav li,
.nav ul.nav-list li{margin:0}

.nav ul#primary-nav a,
.nav ul.nav-list a{
  display:flex; align-items:center;
  padding:14px 4px;
  min-height:44px;
  color:#fff; opacity:.85;
  font-size:18px; font-weight:500;
  border-bottom:1px solid rgba(255,255,255,.08);
  transition:opacity .15s, color .15s;
}
.nav ul#primary-nav a:hover,
.nav ul#primary-nav a:focus-visible,
.nav ul.nav-list a:hover,
.nav ul.nav-list a:focus-visible{opacity:1; color:var(--teal-soft)}

/* aria-current — página ativa */
.nav ul a[aria-current="page"]{
  color:var(--teal); opacity:1; font-weight:600;
}
@media (max-width:959.98px){
  .nav ul#primary-nav a[aria-current="page"],
  .nav ul.nav-list a[aria-current="page"]{
    border-left:3px solid var(--teal);
    padding-left:12px; color:var(--teal-soft);
  }
}

/* Status + CTA do header escondem no mobile dentro do drawer ou recolhem */
.nav .status{display:none}
.nav > .btn{display:none}

/* === Hamburger toggle === */
.nav-toggle{
  display:flex; flex-direction:column; justify-content:center; align-items:center;
  width:44px; height:44px; padding:10px;
  margin-left:auto;
  background:transparent; border:1px solid var(--line); border-radius:8px;
  cursor:pointer; gap:5px;
  -webkit-appearance:none; appearance:none;
}
.nav-toggle span{
  display:block; width:22px; height:2px; background:var(--ink); border-radius:1px;
  transition:transform .25s, opacity .15s;
  transform-origin:center;
}
.nav-toggle[aria-expanded="true"]{
  position:fixed; top:22px; right:20px;
  background:var(--ink); border-color:rgba(255,255,255,.2); z-index:101;
}
.nav-toggle[aria-expanded="true"] span{background:#fff}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* Trava scroll quando menu aberto */
body.nav-open{overflow:hidden}

/* === Desktop nav (≥960px) === */
@media (min-width:960px){
  .nav-toggle{display:none}
  .nav ul#primary-nav,
  .nav ul.nav-list{
    position:static; inset:auto;
    background:transparent;
    flex-direction:row; gap:28px;
    padding:0;
    margin:0 auto 0 16px;
    transform:none; transition:none;
    overflow:visible;
  }
  .nav ul#primary-nav a,
  .nav ul.nav-list a{
    color:var(--ink); opacity:.8;
    font-size:14.5px; padding:0;
    min-height:auto;
    border-bottom:none;
  }
  .nav ul#primary-nav a:hover,
  .nav ul.nav-list a:hover{opacity:1; color:var(--teal)}
  .nav ul#primary-nav a[aria-current="page"],
  .nav ul.nav-list a[aria-current="page"]{
    border-left:none; padding-left:0;
    color:var(--teal);
  }
  .nav .status{display:inline-flex}
  .nav > .btn{display:inline-flex}
  .brand img{height:52px}
}

/* === Site footer (compartilhado entre as 5 páginas principais) === */
.site-footer{background:var(--ink-2); color:rgba(255,255,255,.7); padding:64px 0 28px}
.site-footer .f-grid{
  display:grid; grid-template-columns:1fr; gap:36px;
  padding-bottom:36px; border-bottom:1px solid rgba(255,255,255,.08);
}
.site-footer h5{
  color:#fff; font-size:13px; text-transform:uppercase; letter-spacing:.14em;
  margin:0 0 14px; font-family:'JetBrains Mono', monospace; font-weight:500;
}
.site-footer ul{
  list-style:none; padding:0; margin:0;
  display:flex; flex-direction:column; gap:10px; font-size:14px;
}
.site-footer ul a:hover{color:var(--teal)}
.site-footer .f-brand img{width:140px; margin-bottom:18px}
.site-footer .f-brand p{font-size:14px; max-width:32ch; color:rgba(255,255,255,.55); margin:0}

.f-compliance{
  padding:24px 0; border-top:1px solid rgba(255,255,255,.08);
  display:grid; gap:8px;
  font-family:'JetBrains Mono', monospace; font-size:11.5px; line-height:1.55;
  color:rgba(255,255,255,.55); letter-spacing:.04em;
  overflow-wrap:break-word;
}
.f-compliance .row{display:flex; flex-wrap:wrap; gap:6px 22px; align-items:baseline}
.f-compliance strong{color:#fff; font-weight:500; letter-spacing:.04em}
.f-compliance a{color:rgba(255,255,255,.7); transition:.15s}
.f-compliance a:hover{color:var(--teal)}

.f-base{
  display:flex; flex-direction:column; align-items:flex-start;
  gap:14px;
  font-family:'JetBrains Mono', monospace; font-size:11px; letter-spacing:.1em;
  text-transform:uppercase; margin-top:24px; color:rgba(255,255,255,.4);
}
.f-base .legal-links{display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px}
.f-base a:hover{color:var(--teal)}
.f-base .legal-links a.active{color:var(--teal-soft)}

@media (min-width:640px){
  .site-footer{padding:72px 0 32px}
  .site-footer .f-grid{grid-template-columns:1fr 1fr; gap:48px; padding-bottom:48px}
  .site-footer .f-grid > .f-brand{grid-column:span 2}
  .f-base{flex-direction:row; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:14px}
}
@media (min-width:960px){
  .site-footer .f-grid{grid-template-columns:1.4fr 1fr 1fr 1fr; gap:48px}
  .site-footer .f-grid > .f-brand{grid-column:span 1}
}