/* ============================================================
   MAIN -- design tokens + shared components (nav, buttons, cards,
   footer, section shell) used by every CodeForge page. Tokens and
   component rules are copied directly from the live KloudData
   theme's assets/css/main.css (kd_enqueue_assets()), not
   re-derived, so this matches klouddata.com exactly rather than
   approximating it. Page-specific hero/section layouts live in
   home.css / pi-po-migration.css / custom-code-remediation.css /
   faq.css, enqueued conditionally per page template.
   ============================================================ */
:root{
  --bg-primary: #F5F8FF;
  --bg-secondary: #f5f8ff;
  --bg-tertiary: #E4EAFF;
  --bg-card: rgba(255,255,255,0.9);
  --accent-blue: #0055EE;
  --accent-teal: #00A888;
  --accent-purple: #6D28D9;
  --accent-blue-glow: rgba(0,85,238,0.10);
  --accent-teal-glow: rgba(0,168,136,0.10);
  --accent-purple-glow: rgba(109,40,217,0.10);
  --text-primary: #0A1128;
  --text-secondary: #3D5080;
  --text-muted: #8A97B8;
  --border: rgba(0,40,120,0.10);
  --border-active: rgba(0,85,238,0.35);
  --shadow-card: 0 4px 24px rgba(0,40,120,0.10);
  --shadow-glow: 0 0 40px rgba(0,85,238,0.10);

  /* Button color -- every filled/outline button on the site uses this
     pair (base / hover), per explicit direction, rather than the
     accent-blue/gradient treatment used elsewhere. */
  --btn-color: #004195;
  --btn-hover: #1B4DFF;
  --btn-glow: rgba(0,65,149,0.12);
  /* Single sitewide font -- no secondary/mono family. */
  --font-main: 'Geist', sans-serif;
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 32px;
  --transition: 0.22s cubic-bezier(0.4,0,0.2,1);

  /* Footer navy -- matches the live theme's footer background exactly. */
  --kd-navy: #0B1733;
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
:target, [id]{ scroll-margin-top: 110px; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior: auto; } }

body{
  margin: 0;
  font-family: var(--font-main);
  font-size: 16px;
  color: var(--text-primary);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  /* Site-wide ambient background, same asset as klouddata.com's own hero
     background -- copied into assets/images/ (see functions.php enqueue
     comment) rather than hotlinked, so it survives the source site
     changing or going down. Fixed + cover keeps it anchored as a subtle
     backdrop behind every page regardless of content height. */
  background-color: var(--bg-primary);
  background-image: url('../images/hero-background-1.png');
  background-repeat: no-repeat;
  background-position: top center;
  background-size: cover;
  background-attachment: fixed;
}
.footer-bottom p{
  color: #ffffffb8;
}
@media (max-width: 768px){
  /* iOS Safari handles background-attachment: fixed poorly (repaints on
     every scroll frame); scroll with the page instead below desktop. */
  body{ background-attachment: scroll; }
}

a{ color: var(--accent-blue); text-decoration: none; cursor: pointer; }
a:hover{ text-decoration: none; }
img{ max-width: 100%; display: block; }
p{ color: var(--text-secondary); line-height: 1.7; max-width: 100%; }
::selection{ background: var(--accent-blue); color: #fff; }

.screen-reader-text,
.visually-hidden{
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
.skip-link.screen-reader-text:focus{
  position: fixed; top: 8px; left: 8px; width: auto; height: auto;
  clip: auto; z-index: 100000; background: var(--kd-navy); color: #fff;
  padding: 10px 16px; border-radius: var(--radius-md); font-family: var(--font-main); font-weight: 600;
}

/* Gradient text utility -- matches the live theme's `em` treatment. */
em, .gradient-text{
  font-style: normal;
  background: linear-gradient(90deg, rgb(1, 74, 156) 6.73%, rgb(1, 174, 240) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ---------- typography scale ----------
   Desktop / tablet (<=1024px) / mobile (<=640px) sizes are explicit
   per-tier values (not clamp()), and font-family is pinned to Geist
   only on every heading -- this is the single source of truth for
   h1/h2/h3 sizing; no other rule in the theme should override
   font-size/line-height on a heading element (audited -- see the
   component files, which now inherit these instead of redeclaring
   their own sizes). */
h1{ font-family: var(--font-main); font-size: 60px; line-height: 70px; font-weight: 800; letter-spacing: -1.5px; margin: 0; }
h2{ font-family: var(--font-main); font-size: 48px; line-height: 58px; letter-spacing: -0.5px; font-weight: 800; margin: 0; }
h3{ font-family: var(--font-main); font-size: 22px; line-height: 32px; font-weight: 700; letter-spacing: -0.5px; margin: 0; }
h4{ font-family: var(--font-main); font-size: 16px; font-weight: 600; margin: 0; }
@media (max-width: 1024px){
  h1{ font-size: 45px; line-height: 55px; }
  h2{ font-size: 38px; line-height: 48px; }
}
@media (max-width: 640px){
  h1{ font-size: 30px; line-height: 40px; }
  h2{ font-size: 28px; line-height: 38px; }
  h3{ font-size: 20px; line-height: 30px; }
}

/* ---------- layout ---------- */
.container{ max-width: 1280px; margin: 0 auto; padding: 0 24px; }
main section, .cf-section{ padding: 96px 24px; }
@media (max-width: 768px){ main section, .cf-section{ padding: 64px 20px; } }

/* Two plain (no background of their own) sections stacked back to back
   were doubling up padding at the seam -- the first one's bottom (96px)
   plus the next one's top (96px) read as one oversized ~192px gap with
   nothing to visually justify it. Zero the top padding on any section
   that directly follows another section, so the seam is just the one
   96px gap. Sections that DO have their own background band
   (.proof-band, .why-now) restore their top padding below -- unlike a
   plain seam, a color change is a real visual break, so the fuller gap
   around it stays intentional rather than accidental. Higher specificity
   here wins over the `main section` rule above regardless of source
   order, so this doesn't need repeating inside the breakpoint below. */
main section + section{ padding-top: 0; }
.proof-band,
.why-now{ padding-top: 96px; }
@media (max-width: 768px){
  .proof-band,
  .why-now{ padding-top: 64px; }
}

.section-label{
  display: inline-block;
  font-family: var(--font-main);
  font-size: 12px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--accent-blue); margin: 0 0 16px;
}

/* ---------- nav (floating pill, matches #mainNav / .nav-inner exactly) ---------- */
#mainNav{
  position: sticky; top: 16px; z-index: 1000;
  display: flex; justify-content: center;
  padding: 0 20px;
  margin-bottom: -73px; /* pulls the light hero up under the floating pill, like the live site */
}
.nav-inner{
  width: 100%; max-width: 1280px; margin: 0 auto; /* matches .container's max-width exactly */
  padding: 13px 20px;
  border-radius: 999px;
  background: var(--bg-card);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  box-shadow: 0 10px 30px rgba(10,17,40,.10), 0 2px 10px rgba(10,17,40,.05);
  display: flex; align-items: center; gap: 0;
}
.nav-logo{
  font-family: var(--font-main); font-size: 20px; font-weight: 800; letter-spacing: -0.5px;
  color: var(--text-primary); display: flex; align-items: baseline; gap: 8px;
  flex-shrink: 0; text-decoration: none;
}
.nav-logo:hover{ text-decoration: none; }
.nav-logo .by{ font-weight: 500; font-size: 12px; color: var(--text-muted); letter-spacing: 0.03em; }
.nav-logo .dot{ color: var(--accent-blue); }
.nav-logo .kd-logo{ height: 20px; width: auto; display: block; transform: translateY(1px); }
footer .footer-brand-title .kd-logo{ height: auto; }

.nav-links{ display: flex; align-items: center; justify-content: center; gap: 4px; flex: 1; margin-left: 20px; }
.nav-link{
  padding: 8px 14px; font-size: 15px; font-weight: 500;
  color: var(--text-secondary); border-radius: var(--radius-sm);
  text-decoration: none; white-space: nowrap;
  transition: color var(--transition), background var(--transition);
}
.nav-link:hover{ color: var(--text-primary); background: var(--bg-secondary); text-decoration: none; }
.nav-link.current{ color: var(--text-primary); background: var(--bg-secondary); font-weight: 600; }
@media (max-width: 860px){ .nav-links{ display: none; } }

.nav-cta{
  margin-left: auto; flex-shrink: 0;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 8px 8px 22px;
  background: var(--btn-color); color: #fff;
  border-radius: 999px; font-size: 14px; font-weight: 600;
  white-space: nowrap; text-decoration: none;
  transition: background var(--transition), transform var(--transition);
}
.nav-cta:hover{ background: var(--btn-hover); transform: translateY(-1px); color: #fff; text-decoration: none; }
.nav-cta-icon{
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 50%;
  background: #fff; color: var(--btn-color); flex-shrink: 0;
}
.nav-cta-icon svg{ width: 15px; height: 15px; }
/* Hides after the base rule above (equal specificity, so source order
   decides) -- the hamburger's #mobileMenu has its own .mobile-cta copy
   of this same button, so showing both would duplicate it in the pill
   and the dropdown at once. */
@media (max-width: 860px){ .nav-cta{ display: none; } }

/* ---------- hamburger + mobile menu (same breakpoint as .nav-links
   hiding above, 860px) -- markup/classes follow the same pattern as the
   live KloudData theme's mobile nav, sized down for this site's flat
   4-link menu (no mega-menu/accordion needed). ---------- */
.hamburger{
  display: none; flex-direction: column; gap: 5px;
  padding: 8px; margin-left: auto; flex-shrink: 0;
  background: none; border: none; cursor: pointer;
}
.hamburger span{
  display: block; width: 22px; height: 2px;
  background: var(--text-primary); border-radius: 2px;
  transition: transform var(--transition), opacity var(--transition), background var(--transition);
}
.hamburger[aria-expanded="true"] span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.hamburger[aria-expanded="true"] span:nth-child(2){ opacity: 0; }
.hamburger[aria-expanded="true"] span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }
@media (max-width: 860px){ .hamburger{ display: flex; } }

/* Below ~407px, the full-size logo lockup ("CodeForge · by [121px-wide
   KloudData logo]") plus the hamburger no longer fit #mainNav/.nav-inner's
   combined padding on common phone widths (320-390px) -- .nav-logo has
   flex-shrink:0 by design (never squish mid-layout), so instead the
   lockup's own size steps down here, comfortably under any real device
   width in this range. */
@media (max-width: 480px){
  #mainNav{ padding: 0 12px; }
  .nav-inner{ padding: 10px 14px; }
  .nav-logo{ font-size: 16px; gap: 6px; }
  .nav-logo .by{ font-size: 11px; }
  .nav-logo .kd-logo{ height: 15px; }
  .hamburger{ padding: 6px; }
}

#mobileMenu{
  display: none; flex-direction: column; gap: 4px;
  position: fixed; top: 90px; left: 20px; right: 20px;
  max-height: calc(100vh - 110px); overflow-y: auto;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-card);
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  padding: 16px; z-index: 999;
}
#mobileMenu.open{ display: flex; }
.mobile-link{
  padding: 14px 16px; font-family: var(--font-main); font-size: 16px; font-weight: 500;
  color: var(--text-secondary); text-decoration: none;
  border-radius: var(--radius-md); border-bottom: 1px solid var(--border);
}
.mobile-link:last-of-type{ border-bottom: none; }
.mobile-link:hover{ background: var(--bg-secondary); color: var(--text-primary); text-decoration: none; }
.mobile-link.current{ color: var(--text-primary); font-weight: 700; }
.mobile-cta{
  margin-top: 12px; padding: 14px; text-align: center;
  background: var(--btn-color); color: #fff;
  border-radius: 999px; font-family: var(--font-main); font-size: 16px; font-weight: 600;
  text-decoration: none !important; transition: background var(--transition);
}
.mobile-cta:hover{ background: var(--btn-hover); color: #fff; }

/* ---------- buttons ---------- */
.btn{
  display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 28px; border-radius: 999px;
  font-family: var(--font-main); font-size: 15px; font-weight: 600;
  cursor: pointer; border: none; text-decoration: none !important;
  transition: all var(--transition);
}
.btn-primary{
  background: var(--btn-color);
  color: #fff;
}
.btn-primary:hover{ background: var(--btn-hover); transform: translateY(-2px); box-shadow: 0 8px 24px var(--btn-glow); color: #fff; }
.btn-outline{ background: transparent; color: var(--btn-color); border: 1.5px solid var(--border); }
.btn-outline:hover{ border-color: var(--btn-hover); color: var(--btn-hover); background: var(--btn-glow); }

.btn:focus-visible,
.nav-logo:focus-visible,
.faq-q:focus-visible{
  outline: 2px solid var(--btn-color);
  outline-offset: 2px;
}

/* entrance choreography (available for future use) */
.reveal{ opacity: 0; transform: translateY(28px); transition: opacity 0.6s ease, transform 0.6s ease; }
.reveal.in{ opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce){ .reveal{ opacity: 1; transform: none; transition: none; } }

/* ---------- section shell (kicker kept as class name for template
   compatibility; styled identically to the live theme's .section-label) --------- */
.section-head{ max-width: 940px; margin-bottom: 44px; }
@media (max-width: 1024px){ .section-head{ max-width: 720px; } }
@media (max-width: 640px){ .section-head{ max-width: 100%; } }
.kicker{
  font-family: var(--font-main); font-size: 12px; font-weight: 600;
  letter-spacing: 1.5px; text-transform: uppercase; color: var(--accent-blue); margin: 0 0 16px;
}
.section-head h2{ margin: 0 0 14px; }
.section-head p{ font-size: 16px; }

/* ---------- cards (matches the live theme's .card exactly) ---------- */
.cf-card{
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.cf-card:hover{ transform: translateY(-4px); box-shadow: 0 12px 40px rgba(0,40,120,0.15); border-color: var(--border-active); }

.stat-strip{ display: flex; gap: clamp(20px, 4vw, 44px); flex-wrap: wrap; }
.stat-strip .stat h3{
  display: block; font-size: clamp(1.1rem, 1.4vw, 1.5rem);
  color: var(--text-primary); font-weight: 700; line-height: 1.2;
  padding-bottom: 15px;
}
.stat-strip .stat span{ color: var(--text-muted); font-size: 16px; }

/* ---------- badge (matches .home-hero-badge / .badge) ---------- */
.hero-badge{
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 18px;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 40px; box-shadow: var(--shadow-card);
  font-family: var(--font-main); font-size: 13px; font-weight: 500; color: var(--text-secondary);
  margin: 0 0 28px;
}
.hero-badge-dot{
  width: 7px; height: 7px; border-radius: 50%; background: var(--accent-blue); flex-shrink: 0;
  box-shadow: 0 0 0 0 rgba(0,85,238,0.55);
  animation: cf-badge-pulse 2s infinite;
}
@keyframes cf-badge-pulse{
  0%{ box-shadow: 0 0 0 0 rgba(0,85,238,0.45); }
  70%{ box-shadow: 0 0 0 8px rgba(0,85,238,0); }
  100%{ box-shadow: 0 0 0 0 rgba(0,85,238,0); }
}
@media (prefers-reduced-motion: reduce){ .hero-badge-dot{ animation: none; } }

/* ============================================================
   CTA BAND -- dark rounded card with radial glow, copied directly
   from the live theme's home final-CTA component
   (template-parts/home-final-cta.php + assets/css/home.css's
   .kd-home-ctaband-card/-heading/-desc/-btn/-btn-icon), not
   re-derived. Shared across every page (home, both service pages,
   FAQ) as one component, same as the live site reuses it once
   rather than redefining it per page.
   ============================================================ */
.cta-band{
  position: relative; overflow: hidden;
  max-width: 1280px; margin-inline: auto;
  border-radius: var(--radius-xl);
  padding: 64px 48px;
  text-align: center;
  /* Full-bleed photo background -- same asset as klouddata.com's CTA
     section, copied into assets/images/ rather than hotlinked. It
     already bakes in the navy gradient + light-ray glow, so it's the
     only background layer needed (no separate radial-gradient/pattern
     overlay on top of it). var() stays overridable per the same
     convention used elsewhere in this file. */
  background: var(--kd-cta-bg-image, url(../images/Section-CTA.jpg)) var(--kd-cta-bg-pos, center) / var(--kd-cta-bg-size, cover) no-repeat;
  background-color: var(--kd-navy);
}
.cta-band h2{
  color: #fff; margin: 0 auto 20px; max-width: 720px;
}
.cta-band p{
  color: rgba(255,255,255,0.75); line-height: 1.7;
  max-width: 620px; margin: 0 auto 32px;
}
.cta-band-btn{
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 26px;
  background: #fff; color: #101C46;
  border-radius: 999px; font-family: var(--font-main); font-size: 17px; font-weight: 600;
  text-decoration: none !important;
  transition: opacity var(--transition);
}
.cta-band-btn:hover{ opacity: 0.9; color: #101C46; }
.cta-band-btn-icon{
  display: flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 50%;
  background: #101C46; color: #fff; flex-shrink: 0;
}
.cta-band-btn-icon svg{ width: 12px; height: 12px; }
@media (max-width: 1024px){
  .cta-band{ padding: 56px 40px; }
}
@media (max-width: 640px){
  .cta-band{ padding: 40px 24px; border-radius: 24px; }
}

/* ---------- footer (matches the live theme's footer exactly, trimmed to
   the columns CodeForge actually has content for) ---------- */
footer{
  background: var(--kd-navy); color: rgba(255,255,255,0.72);
  padding: 56px 24px 0;
}
.footer-inner{ max-width: 1280px; margin: 0 auto; }
.footer-grid{ display: flex; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
.footer-brand-title{
  font-family: var(--font-main); font-size: 22px; font-weight: 800; color: #fff;
  display: flex; align-items: baseline; gap: 8px; text-decoration: none; margin-bottom: 14px;
}
.footer-brand-title:hover{ text-decoration: none; }
.footer-brand-title .by{ font-weight: 500; font-size: 12px; color: rgba(255,255,255,0.55); }
.footer-brand-title .dot{ color: var(--accent-blue); }
.footer-brand-sub{ font-size: 16px; color: rgba(255,255,255,0.72); line-height: 24px; margin: 0; max-width: 420px; }
.footer-links{ display: flex; flex-wrap: wrap; gap: 8px 20px; }
.footer-links a{
  font-size: 16px; color: rgba(255,255,255,0.72); text-decoration: none;
  transition: color var(--transition);
}
.footer-links a:hover{ color: #fff; }
.footer-bottom{
  margin-top: 40px; padding: 22px 0;
  border-top: 1px solid rgba(255,255,255,.08);
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 12px;
  font-size: 16px; color: #ffffffb8; text-align: center;
}

/* ============================================================
   BACK TO TOP -- markup/behavior/CSS copied directly from the live
   KloudData theme (footer.php's #kdBackToTop + theme.js's scroll
   listener). Hidden by default; assets/js/main.js adds .is-visible
   once the page has scrolled past a threshold, and removes it near
   the top.
   ============================================================ */
.kd-back-to-top{
  position: fixed;
  bottom: 28px;
  right: 28px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--btn-color);
  color: #fff;
  border: none;
  box-shadow: 0 8px 24px rgba(0,40,120,0.28);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2000;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity .25s ease, transform .25s ease, background .2s ease, visibility 0s linear .25s;
}
.kd-back-to-top.is-visible{
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity .25s ease, transform .25s ease, background .2s ease;
}
.kd-back-to-top:hover{
  background: transparent;
  border: 2px solid var(--btn-hover);
  color: var(--btn-hover);
}
.kd-back-to-top:focus-visible{
  outline: 2px solid var(--btn-color);
  outline-offset: 2px;
}
@media (max-width: 640px){
  .kd-back-to-top{ bottom: 20px; right: 20px; width: 44px; height: 44px; }
}