/* ============================================================
   Angel Vazquez — Aurora theme layer
   Site-wide brand consistency with the 3D hero (green → blue).
   Load AFTER style.css on every page. Self-contained: defines its
   own tokens so it works on pages that don't load hero3d.css.
   ============================================================ */

:root {
  --av-green: #34d399;
  --av-blue: #5b9bf5;
  --av-teal: #45b8c4;
  --av-grad: linear-gradient(120deg, #34d399 0%, #45b8c4 55%, #5b9bf5 100%);
}

/* ---------- Logo ----------
   The source PNG is a flat grey mark. Rather than ship a second image,
   its alpha channel is used as a mask and the gradient shows through —
   so the logo always matches the hero palette exactly, and retinting it
   later is a one-line change here instead of a new export. */
/* A mask alone can't recolor an <img>: the replaced image paints over its own
   background. So the img goes invisible (keeping layout and alt text for
   screen readers) and the parent paints the gradient through the mask. */
.navbar-brand img[src*="avlogo"] { opacity: 0; }
.navbar-brand { position: relative; display: inline-block; }
.navbar-brand::after {
  content: "";
  position: absolute; inset: 0;
  background: var(--av-grad);
  -webkit-mask-image: url("../images/avlogo.png");
  mask-image: url("../images/avlogo.png");
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
  pointer-events: none;
}

/* ---------- Accent sweep ----------
   A handful of template spots hardcode their own colors inline or via
   utility classes that the style.css retheme doesn't reach. */
.ftco-footer .icon-heart,
.color-danger { color: var(--av-green) !important; }

/* NOTE: deliberately no global `a { color }` override here. The accent
   retheme in style.css already recolored every link that used the brand
   color; a blanket rule would also repaint links the template had set
   for contrast against specific backgrounds, which risks silent AA
   regressions on pages that aren't visually checked. */

/* Primary buttons / CTAs */
.btn-primary,
.btn-custom {
  background: var(--av-green) !important;
  border-color: var(--av-green) !important;
  color: #06140e !important;
}
.btn-primary:hover,
.btn-custom:hover {
  background: var(--av-teal) !important;
  border-color: var(--av-teal) !important;
  color: #06140e !important;
}

/* Section eyebrow / subheading accents */
.heading-section .subheading { color: var(--av-green); }

/* The stat counters on the index page */
.block-18 .number,
#section-counter .number { color: var(--av-green); }

/* ---------- Services icon circles ----------
   The template painted these a slate blue-grey (#385564) that predates the
   aurora palette. A gradient fill ties them to the hero; the glyph stays
   white for contrast against the saturated green end. */
.services .icon {
  background: var(--av-grad) !important;
  box-shadow: 0 10px 28px -12px rgba(52, 211, 153, 0.45);
}
.services .icon span { color: #06140e !important; }

/* ---------- Stats banner ----------
   The markup points at images/bg_1.jpg, which does not exist in this folder
   (only bg_1.png) — so the image 404s and the band fell back to a flat slate.
   Rather than depend on a missing file, it gets a deep aurora wash that reads
   as a deliberate dark band between the two light sections. */
#section-counter.ftco-counter {
  /* Flat black, matching the hero and AI section exactly so the three dark
     bands read as one system rather than three near-blacks. */
  background-image: none !important;
  background-color: #070b09 !important;
  position: relative;
}
/* The actual slate came from an ::after pseudo-element the template layers
   over the whole section (z-index:-1, background:#385564) — not from the
   section's own background, which is why setting background-color alone
   never changed what was visible. */
#section-counter::after,
#section-counter:after {
  background: #070b09 !important;
  opacity: 1 !important;
}
#section-counter .number,
#section-counter strong.number {
  color: var(--av-green) !important;
  font-weight: 600;
}
#section-counter .text span { color: rgba(236, 236, 234, 0.72) !important; }

/* Nav active state */
.ftco_navbar .navbar-nav > .nav-item.active > .nav-link,
.ftco_navbar .navbar-nav > .nav-item > .nav-link:hover { color: var(--av-green) !important; }

/* Focus visibility — the template had none in places */
a:focus-visible, button:focus-visible, .btn:focus-visible {
  outline: 2px solid var(--av-green);
  outline-offset: 3px;
}

/* ---------- Case study hero ----------
   The template's .hero-wrap is 300px with a 20%-black overlay, which let the
   background screenshot's own headline compete with the page. This replaces it
   for case studies: taller, a heavy left-weighted scrim so the screenshot reads
   as texture, and the page's real title sitting on top. */
.av3d-case-hero {
  position: relative;
  min-height: 460px;
  display: flex;
  align-items: center;
  background-size: cover;
  background-position: top center;
  background-repeat: no-repeat;
  overflow: hidden;
}
.av3d-case-scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(100deg, rgba(7,11,9,0.96) 0%, rgba(7,11,9,0.88) 38%, rgba(7,11,9,0.6) 70%, rgba(7,11,9,0.45) 100%),
    linear-gradient(180deg, rgba(7,11,9,0.85) 0%, transparent 35%, transparent 60%, rgba(7,11,9,0.95) 100%);
}
.av3d-case-inner {
  position: relative; z-index: 2;
  width: min(1240px, 100% - 3rem);
  margin-inline: auto;
  /* Extra top padding clears the transparent fixed navbar, which otherwise
     sits on top of the eyebrow and logo. */
  padding: 6.5rem 0 3.5rem;
}
.av3d-case-eyebrow {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-family: var(--av3d-mono, "JetBrains Mono", monospace);
  font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--av-green); margin-bottom: 0.9rem;
}
.av3d-case-eyebrow::before {
  content: ""; width: 1.9rem; height: 1px;
  background: linear-gradient(90deg, var(--av-green), transparent);
}
.av3d-case-hero h1 {
  font-family: "Poppins", sans-serif;
  font-size: clamp(2.1rem, 5vw, 3.6rem);
  font-weight: 700; line-height: 1.06; letter-spacing: -0.02em;
  color: #ececea; margin: 0 0 1rem;
}
.av3d-case-sub {
  font-size: clamp(1rem, 1.6vw, 1.18rem);
  line-height: 1.6; color: #a2a4ae;
  max-width: 40rem; margin: 0 0 2rem;
}
.av3d-case-meta {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px; margin: 0;
  background: rgba(236,236,234,0.1);
  border: 1px solid rgba(236,236,234,0.1);
  border-radius: 10px; overflow: hidden;
  max-width: 54rem;
}
.av3d-case-meta > div { background: rgba(7,11,9,0.82); padding: 0.85rem 1.1rem; }
.av3d-case-meta dt {
  font-family: var(--av3d-mono, monospace);
  font-size: 0.64rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: #6d6f7a; margin-bottom: 0.3rem; font-weight: 400;
}
.av3d-case-meta dd { font-size: 0.9rem; color: #ececea; margin: 0; }
.av3d-case-meta dd a { color: var(--av-green); text-decoration: none; }
.av3d-case-meta dd a:hover { text-decoration: underline; }
@media (max-width: 860px) {
  .av3d-case-hero { min-height: 380px; }
  .av3d-case-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* On narrow screens the background screenshot's own headline lands right
     behind the subtitle, so the scrim goes near-opaque — the image is texture
     here, never content. */
  .av3d-case-scrim {
    background: linear-gradient(180deg, rgba(7,11,9,0.97) 0%, rgba(7,11,9,0.96) 45%, rgba(7,11,9,0.98) 100%);
  }
}


/* ---------- Case study screenshot ----------
   Framed as a browser window so it reads as a real shipped site rather than
   a floating image. Fixed aspect from the source file, so no layout shift. */
.av3d-shot { margin: 0 0 2rem; }
.av3d-browser {
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.14);
  box-shadow: 0 28px 70px -30px rgba(0, 0, 0, 0.6);
  background: #0b120f;
}
.av3d-browser-bar {
  display: flex; align-items: center; gap: 0.45rem;
  padding: 0.6rem 0.9rem;
  background: #16211c;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.av3d-browser-bar i { width: 10px; height: 10px; border-radius: 50%; display: block; }
.av3d-browser-bar i:nth-child(1) { background: #ff5f57; }
.av3d-browser-bar i:nth-child(2) { background: #febc2e; }
.av3d-browser-bar i:nth-child(3) { background: #28c840; }
.av3d-browser-bar span {
  margin-left: 0.7rem;
  font-family: var(--av3d-mono, monospace);
  font-size: 0.72rem; color: #8b9690;
}
.av3d-browser img { width: 100%; height: auto; display: block; }
.av3d-shot figcaption {
  margin-top: 0.8rem;
  font-family: var(--av3d-mono, monospace);
  font-size: 0.76rem; line-height: 1.6; color: #6d6f7a;
}