/* ==========================================================================
   computingleap.com — site-specific styles
   Loaded AFTER css/main.css. See FIXPLAN.md Phase 5.
   ========================================================================== */

/* The nav is fixed-top (~74px tall), so an in-page anchor jump (menu click,
   URL hash, back/forward) lands the target section right under it, hiding
   the heading. scroll-padding-top reserves that space for every anchor
   scroll, not just clicks handled by JS. */
html { scroll-padding-top: 90px; }

/* The active carousel slide's headline is a real <h1> (see FIXPLAN P4-T1);
   #carousel-area .carousel-caption h2 in main-2.css only styles <h2>, so
   give the promoted <h1> the same treatment here. */
#carousel-area .carousel-item .carousel-caption h1 {
  font-size: 80px;
  font-weight: 700;
  color: #fff;
  margin: 0;
}

/* --- brand (moved out of an inline <style> block, P5-T5) --------------- */
.brandfont {
  font-family: 'Montserrat', 'Open', serif;
  color: #F97794;
}

/* --- backgrounds (moved out of main.css, P5-T2) ------------------------ */
.hero-area {
  background: url(../img/hero-area.jpg) no-repeat;
  background-image: image-set(url(../img/hero-area.webp) type("image/webp"), url(../img/hero-area.jpg) type("image/jpeg"));
  background-repeat: no-repeat;
}
.video-promo {
  background: url(../img/bg/video.jpg);
  background-image: image-set(url(../img/bg/video.webp) type("image/webp"), url(../img/bg/video.jpg) type("image/jpeg"));
}
#subscribe {
  background: url(../img/bg/bg-subs.jpg);
  background-image: image-set(url(../img/bg/bg-subs.webp) type("image/webp"), url(../img/bg/bg-subs.jpg) type("image/jpeg"));
}
.collapse.show { background: #3e3a3a; }

.cta {
  background-image: url(../img/bg/whisper.jpg);
  background-position-x: 50% !important;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  text-align: center;
  opacity: 1.0;
  position: relative;
}
/* Dark scrim so the white ghost button/text stays readable no matter which
   part of the photo sits behind it. */
.cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  pointer-events: none;
}
.cta > .container { position: relative; z-index: 1; }
/* jquery.stellar.min.js (removed — see FIXPLAN.md) threw on every scroll
   under jQuery 3's stricter .offset(); background-attachment: fixed gives
   the same parallax effect with no JS. Doesn't animate on iOS Safari, which
   silently falls back to a normal static background there. */
@media (prefers-reduced-motion: reduce) {
  .cta { background-attachment: scroll; }
}
#cta1 {
  background-image: url(../img/bg/whisper.jpg);
  background-image: image-set(url(../img/bg/whisper.webp) type("image/webp"), url(../img/bg/whisper.jpg) type("image/jpeg"));
}

/* --- deferred backgrounds (FIXPLAN P3-T4) ------------------------------ */
#cta6 { background-image: none; }
body.bg-ready #cta6 {
  background-image: url(../img/bg/zoomcall.jpg);
  background-image: image-set(url(../img/bg/zoomcall.webp) type("image/webp"), url(../img/bg/zoomcall.jpg) type("image/jpeg"));
}

/* --- readability (FIXPLAN P7-T2) --------------------------------------- */
.services-item p,
.services-item ul { text-align: left; }

/* --- keyboard focus indicators (FIXPLAN P4-T2) ------------------------- */
/* Negative outline-offset draws the ring inside the element's own box
   instead of outside it. Several ancestor containers (.contact-block,
   .section) use overflow:hidden, which clipped an outward-facing outline
   on form fields near the container's edge. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid #190e6d !important;
  outline-offset: -3px !important;
  border-radius: 2px;
}