/**
 * 03-typography.css — Typography System
 * YDC Child Enterprise Theme
 *
 * Font: Google Sans (fallback: Sen) across all elements (both body and headings).
 * Scale: 7-step modular scale.
 * No Lora. No monospace unless explicitly required by content.
 * No hardcoded values — all from tokens.
 */

/* ─── Global font assignment ─────────────────── */
html,
body,
h1, h2, h3, h4, h5, h6,
p, a, span, li, dt, dd,
button, input, select, textarea,
blockquote, figcaption, label, caption {
  font-family: var(--font-sans) !important;
}

/* ─── Headings ───────────────────────────────── */
h1, h2, h3,
.ydc-section-title {
  font-family: var(--font-display);
  font-weight: var(--font-weight-regular);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--text-primary);
  text-decoration: none !important;
  border-bottom: none !important;
  text-transform: uppercase;
  padding-top: 0.12em;
  padding-bottom: 0.08em;
  overflow: visible;
}

h4, h5, h6,
.wp-block-heading {
  font-family: var(--font-display);
  font-weight: var(--font-weight-bold);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--text-primary);
  text-decoration: none !important;
  border-bottom: none !important;
  text-transform: uppercase;
  padding-top: 0.12em;
  padding-bottom: 0.08em;
  overflow: visible;
}

h1 { font-size: var(--text-5xl); }
h2 { font-size: var(--text-4xl); }
h3 { font-size: var(--text-3xl); }
h4 { font-size: var(--text-xl);  font-weight: var(--font-weight-regular); }
h5 { font-size: var(--text-lg);  font-weight: var(--font-weight-regular); }
h6 { font-size: var(--text-md);  font-weight: var(--font-weight-medium);  letter-spacing: var(--tracking-normal); }

/* ─── Body text ──────────────────────────────── */
p {
  font-size: var(--text-base);
  font-weight: var(--font-weight-light);
  line-height: var(--leading-normal);
  color: var(--text-secondary);
}

/* ─── Links ──────────────────────────────────── */
a {
  color: inherit;
  text-decoration: none !important;
  border-bottom: none !important;
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--text-primary);
}

/* ─── Small / label text ─────────────────────── */
small,
.text-sm {
  font-size: var(--text-sm);
  font-weight: var(--font-weight-regular);
}

.text-xs {
  font-size: var(--text-xs);
  font-weight: var(--font-weight-regular);
  letter-spacing: 0.04em;
}

/* ─── Utility text colors ────────────────────── */
.text-primary   { color: var(--text-primary);   }
.text-secondary { color: var(--text-secondary); }
.text-muted     { color: var(--text-muted);     }
.text-accent    { color: var(--accent-primary); }

/* ─── Section label (e.g. "Trusted by —") ────── */
.label-mono {
  font-size: var(--text-xs);
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* ─── Blockquote ─────────────────────────────── */
blockquote {
  font-size: var(--text-lg);
  font-weight: var(--font-weight-light);
  color: var(--text-secondary);
  line-height: var(--leading-snug);
  border-left: 2px solid var(--border-normal);
  padding-left: var(--space-6);
  margin-left: 0;
}

/* ─── Hero headline shine animation ─────────────
   A subtle shimmer sweep on the hero heading.
   Pure CSS, no JS required.
   Uses ambient color only — not neon.
─────────────────────────────────────────────── */
@keyframes ydcShine {
  0%   { background-position: 200% center; }
  100% { background-position: -200% center; }
}

.ydc-hero-linear-wipe {
  display: inline-block;
  max-width: 100%;
  text-align: center !important;
  line-height: 1.5;
  padding-top: 0.12em;
  padding-bottom: 0.12em;
  overflow: visible;
  background: linear-gradient(
    to right,
    var(--text-primary) 20%,
    var(--accent-primary-hov) 40%,
    var(--accent-primary-hov) 60%,
    var(--text-primary) 80%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: ydcShine 5s linear infinite;
}