/* yalldigital.com redesign mockup — shared custom CSS
   Handles things the Tailwind Play CDN utility set can't express as a plain
   class: clamp() type sizes, the hero text-shadow pair, the scrim gradient,
   accordion open/close transitions, focus-visible rings, and reduced-motion.
   Design tokens live in assets/js/tailwind-config.js — this file only adds
   what utilities can't do; do not duplicate token values here. */

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;700&family=Poppins:wght@400;500;600;700&display=swap');

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Open Sans', sans-serif;
  color: #0B1753;
  background-color: #FFFFFF;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Poppins', sans-serif;
}

/* Type scale — clamp() per spec Section 2, fixes the live-site mid-word
   headline break bug. */
.text-display {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: clamp(2.25rem, 5vw + 1rem, 3.5rem);
  line-height: 1.1;
  overflow-wrap: normal;
}
.text-h2 {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: clamp(1.75rem, 3vw + 1rem, 2.5rem);
  line-height: 1.15;
  overflow-wrap: normal;
}
.text-h3 {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: clamp(1.375rem, 1.5vw + 1rem, 1.75rem);
  line-height: 1.2;
}
.text-h4 {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: clamp(1.125rem, 1vw + 0.9rem, 1.25rem);
  line-height: 1.3;
}
.text-eyebrow {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 0.8125rem;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.text-lede {
  font-family: 'Open Sans', sans-serif;
  font-weight: 400;
  font-size: clamp(1.125rem, 0.5vw + 1rem, 1.1875rem);
  line-height: 1.55;
}

/* Text-over-image rule, Section 5: scrim + text-shadow, always together. */
.hero-scrim {
  background-image: linear-gradient(105deg, rgba(1,24,88,0.88) 0%, rgba(1,24,88,0.55) 55%, rgba(1,24,88,0.15) 100%);
}
.hero-text-shadow {
  text-shadow: 0 2px 12px rgba(1,24,88,0.4);
}

/* Connecting line between step badges (3-Step Process Gallery), desktop only, decorative. */
.step-connector {
  display: none;
}
@media (min-width: 1024px) {
  .step-connector {
    display: block;
  }
}

/* FAQ accordion answer — measured-height transition, not opacity-only. */
.faq-answer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 250ms ease-out;
}
.faq-answer > div {
  overflow: hidden;
}
.faq-item[data-open="true"] .faq-answer {
  grid-template-rows: 1fr;
}
.faq-chevron {
  transition: transform 200ms ease;
}
.faq-item[data-open="true"] .faq-chevron {
  transform: rotate(180deg);
}

/* Mobile nav drawer */
.nav-drawer {
  transform: translateX(100%);
  transition: transform 250ms ease-out;
}
.nav-drawer[data-open="true"] {
  transform: translateX(0);
}

/* Scroll-reveal, Section 11 — fade-up, one-time. */
/* Reveal-on-scroll only hides content once we know JS is running (html.js,
   set synchronously by main.js before paint). If JS fails to load or errors,
   .reveal elements stay at their default visible state -- motion is a
   progressive enhancement, it must never be able to hide real content. */
.js .reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 250ms ease-out, transform 250ms ease-out;
}
.reveal.reveal-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Focus-visible ring, consistent token everywhere interactive. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 2px solid #2667FF;
  outline-offset: 2px;
}

/* Buttons get a heavier 3px ring per spec Section 9 (Buttons), distinct from
   the 2px default used for nav links/inputs elsewhere. */
.btn:focus-visible {
  outline: 3px solid #2667FF;
  outline-offset: 2px;
}

/* Sticky nav: white bg + hairline appears after 40px scroll, height compresses
   88px -> 72px (spec Section 9, Nav). */
.nav-scrolled {
  box-shadow: 0 1px 0 #DDE6F5;
}
.nav-scrolled .nav-inner {
  height: 72px;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .faq-answer,
  .faq-chevron,
  .nav-drawer,
  * {
    transition-duration: 0.001ms !important;
    animation-duration: 0.001ms !important;
  }
}