/*
Theme Name: Innave Tech Blog
Theme URI: https://innavetecnologia.com/blog/
Author: Paulo Fernando
Description: Tema customizado integrado com Elementor Pro.
Version: 1.0
Text Domain: innavetech
*/

/* =============================================================
   VARIÁVEIS
   ============================================================= */
:root {
  /* brand palette */
  --c-bg: #0A1A2F;
  --c-deep: #000915;
  --c-text: #F4F6F8;
  --c-silver: #C9D3DD;
  --c-titanium: #A7B0BA;
  --c-cyan: #00C4FF;
  --c-cyan-hover: #4AD7FF;
  --c-cyan-bright: #74F2FF;
  --c-line: rgba(199, 211, 221, .12);
  --c-line-strong: rgba(199, 211, 221, .22);
  --c-cyan-fade: rgba(0, 196, 255, .14);

  /* type */
  --f-display: 'Anton', 'Bebas Neue', sans-serif;
  --f-headline: 'Bebas Neue', 'Anton', sans-serif;
  --f-body: 'Manrope', system-ui, sans-serif;
  --f-mono: 'JetBrains Mono', 'Courier New', monospace;

  /* spacing */
  --gutter: clamp(1.25rem, 4vw, 4rem);
  --section-y: clamp(3.5rem, 10vw, 9rem);

  /* misc */
  --ease: cubic-bezier(.2, .8, .2, 1);
}

/* =============================================================
   RESET & BASE
   ============================================================= */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--f-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: 0.005em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;

  /* radial atmosphere on body */
  background:
    radial-gradient(ellipse at 50% -10%, rgba(0,196,255,.08), transparent 55%),
    radial-gradient(ellipse at 80% 110%, rgba(116,242,255,.05), transparent 50%),
    linear-gradient(180deg, #0A1A2F 0%, #061226 50%, #03091A 100%);
}

img { max-width: 100%; display: block; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; background: transparent; border: 0; color: inherit; cursor: pointer; }

::selection { background: var(--c-cyan); color: var(--c-deep); }

/* scrollbar */
html::-webkit-scrollbar { width: 10px; }
html::-webkit-scrollbar-track { background: var(--c-deep); }
html::-webkit-scrollbar-thumb { background: rgba(0,196,255,.25); border-radius: 0; }
html::-webkit-scrollbar-thumb:hover { background: var(--c-cyan); }

/* =============================================================
   TYPOGRAPHY UTILITIES
   ============================================================= */
.mono { font-family: var(--f-mono); font-weight: 500; }
em { font-style: normal; color: var(--c-cyan); }

/* =============================================================
   GLOBAL HUD — STATUS BAR
   ============================================================= */
.hud-bar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 60;
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  background: rgba(0,9,21,.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--c-line);
  color: var(--c-titanium);
}
.hud-bar__inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 8px var(--gutter);
  gap: 1.5rem;
}
.hud-bar__group { display: inline-flex; align-items: center; gap: 1rem; }