/*
 * typography.css -- heading scale, body scale, link styles,
 *                   list styles, blockquote, code, eyebrow tags
 * Depends on: tokens.css
 * Load order: 3 of 4
 */

/* ============================================================
   GOOGLE FONTS IMPORT
   Geist (display + headings), Inter (body), Source Serif 4 (editorial)
   Variable fonts where available for performance.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Inter:ital,opsz,wght@0,14..32,400;0,14..32,500;0,14..32,600;0,14..32,700;1,14..32,400&family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,600;1,8..60,400;1,8..60,600&display=swap');

/* ============================================================
   HEADING SCALE
   Font family: Geist (display/headings) per brand brief.
   Weights: 600 (semibold) throughout.
   ============================================================ */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--gp-font-display);
  font-weight: var(--gp-weight-semibold);
  color: var(--gp-ink);
  text-wrap: balance;
}

/* Display: hero H1 only -- .display class applied via template */
.display,
.wp-display {
  font-size: var(--gp-text-display);
  line-height: var(--gp-leading-display);
  font-weight: var(--gp-weight-semibold);
  font-family: var(--gp-font-display);
  letter-spacing: 0;
}

h1 {
  font-size: var(--gp-text-h1);
  line-height: var(--gp-leading-h1);
  letter-spacing: 0;
}

h2 {
  font-size: var(--gp-text-h2);
  line-height: var(--gp-leading-h2);
  letter-spacing: 0;
}

h3 {
  font-size: var(--gp-text-h3);
  line-height: var(--gp-leading-h3);
  letter-spacing: 0;
}

h4 {
  font-size: var(--gp-text-h4);
  line-height: var(--gp-leading-h4);
}

h5 {
  font-size: var(--gp-text-h5);
  line-height: var(--gp-leading-h5);
}

h6 {
  font-size: var(--gp-text-eyebrow);
  line-height: var(--gp-leading-h5);
  font-weight: var(--gp-weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--gp-tracking-eyebrow);
  color: var(--gp-slate-700);
}

/* Responsive heading scale (mobile-first shrink) */
@media (max-width: 767px) {
  .display     { font-size: clamp(2.25rem, 8vw, 4rem); }
  h1           { font-size: clamp(2rem, 7vw, 3rem); }
  h2           { font-size: clamp(1.5rem, 5vw, 2.25rem); }
  h3           { font-size: clamp(1.25rem, 4vw, 1.75rem); }
}

/* ============================================================
   EYEBROW TAG
   Used above H1/H2 for section labels and category signals.
   ============================================================ */

.eyebrow {
  display: inline-block;
  font-family: var(--gp-font-body);
  font-size: var(--gp-text-eyebrow);
  font-weight: var(--gp-weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--gp-tracking-eyebrow);
  color: var(--gp-slate-700);
  margin-bottom: var(--gp-space-2);
}

.eyebrow--primary {
  color: var(--gp-primary);
}

.eyebrow--white {
  color: rgba(255, 255, 255, 0.85);
}

/* ============================================================
   BODY SCALE
   ============================================================ */

p {
  font-size: var(--gp-text-body);
  line-height: var(--gp-leading-body);
  color: var(--gp-ink);
  max-width: 72ch; /* Optimal line length for readability */
}

/* Remove max-width inside full-bleed containers */
.full-width p,
.entry-content p {
  max-width: none;
}

.body-lg {
  font-size: var(--gp-text-body-lg);
  line-height: var(--gp-leading-body-lg);
}

.body-sm {
  font-size: var(--gp-text-body-sm);
  line-height: var(--gp-leading-body-sm);
}

.caption {
  font-size: var(--gp-text-caption);
  line-height: var(--gp-leading-caption);
  color: var(--gp-slate-700);
  font-weight: var(--gp-weight-medium);
}

/* Lead paragraph (first p in entry-content or .lead) */
.lead,
.entry-content > p:first-of-type {
  font-size: var(--gp-text-body-lg);
  line-height: var(--gp-leading-body-lg);
  color: var(--gp-ink);
}

/* ============================================================
   LINK STYLES
   ============================================================ */

/* Inline content links -- underline by default */
.entry-content a,
.prose a {
  color: var(--gp-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color var(--gp-transition-base),
              text-decoration-color var(--gp-transition-base);
}

.entry-content a:hover,
.prose a:hover {
  color: var(--gp-primary-700);
  text-decoration-color: var(--gp-primary-700);
}

/* Nav and UI links -- no underline by default */
.nav-link,
.ui-link {
  color: var(--gp-ink);
  text-decoration: none;
  transition: color var(--gp-transition-base);
}

.nav-link:hover,
.ui-link:hover {
  color: var(--gp-primary);
}

/* ============================================================
   LIST STYLES
   ============================================================ */

/* Prose lists inside entry-content or .prose */
.entry-content ul,
.prose ul {
  list-style: none;
  padding-left: var(--gp-space-5);
  display: flex;
  flex-direction: column;
  gap: var(--gp-space-2);
}

.entry-content ul li,
.prose ul li {
  position: relative;
  padding-left: var(--gp-space-4);
  font-size: var(--gp-text-body);
  line-height: var(--gp-leading-body);
}

/* Custom bullet: 6px Plasma Magenta circle */
.entry-content ul li::before,
.prose ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 6px;
  height: 6px;
  border-radius: var(--gp-radius-full);
  background-color: var(--gp-primary);
  flex-shrink: 0;
}

.entry-content ol,
.prose ol {
  list-style: none;
  padding-left: var(--gp-space-5);
  counter-reset: gp-list;
  display: flex;
  flex-direction: column;
  gap: var(--gp-space-2);
}

.entry-content ol li,
.prose ol li {
  position: relative;
  padding-left: var(--gp-space-5);
  counter-increment: gp-list;
  font-size: var(--gp-text-body);
  line-height: var(--gp-leading-body);
}

.entry-content ol li::before,
.prose ol li::before {
  content: counter(gp-list) '.';
  position: absolute;
  left: 0;
  top: 0;
  font-weight: var(--gp-weight-semibold);
  color: var(--gp-primary);
  font-size: var(--gp-text-body-sm);
}

/* Feature check-list variant */
.checklist {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--gp-space-2);
}

.checklist li {
  display: flex;
  align-items: flex-start;
  gap: var(--gp-space-2);
  font-size: var(--gp-text-body);
  line-height: var(--gp-leading-body);
}

/* Icon slot -- Lucide check icon goes here via ::before or inline SVG */
.checklist li::before {
  content: '';
  display: inline-block;
  width: 18px;
  height: 18px;
  min-width: 18px;
  margin-top: 0.2em;
  background-color: var(--gp-secondary);
  border-radius: var(--gp-radius-full);
  /* Checkmark drawn via mask; replace with inline SVG in PHP templates */
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: 12px;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: 12px;
}

/* ============================================================
   BLOCKQUOTE
   Pull quotes use Source Serif 4 italic -- editorial register.
   ============================================================ */

blockquote,
.pullquote {
  position: relative;
  font-family: var(--gp-font-editorial);
  font-size: 1.75rem; /* 28px */
  font-style: italic;
  line-height: 1.4;
  color: var(--gp-ink);
  padding: var(--gp-space-6) var(--gp-space-6) var(--gp-space-6) var(--gp-space-7);
  margin-block: var(--gp-space-6);
  background-color: var(--gp-primary-50);
  border-radius: var(--gp-radius-lg);
  border-left: 4px solid var(--gp-primary);
}

/* Large decorative quote mark behind the text */
blockquote::before,
.pullquote::before {
  content: '\201C'; /* Left double quotation mark */
  position: absolute;
  top: var(--gp-space-3);
  left: var(--gp-space-4);
  font-size: 5rem;
  line-height: 1;
  color: var(--gp-primary);
  opacity: 0.15;
  font-family: var(--gp-font-editorial);
  pointer-events: none;
  user-select: none;
}

blockquote cite,
.pullquote cite,
.pullquote .attribution {
  display: block;
  margin-top: var(--gp-space-4);
  font-family: var(--gp-font-body);
  font-style: normal;
  font-size: var(--gp-text-body-sm);
  font-weight: var(--gp-weight-medium);
  color: var(--gp-slate-700);
}

blockquote cite::before,
.pullquote .attribution::before {
  content: '\2014\0020'; /* em-dash space -- decorative only, not brand copy */
}

@media (max-width: 767px) {
  blockquote,
  .pullquote {
    font-size: 1.25rem;
    padding: var(--gp-space-5);
    padding-left: var(--gp-space-6);
  }
}

/* ============================================================
   CODE
   ============================================================ */

code,
kbd,
samp {
  font-family: 'Geist Mono', 'Fira Code', 'Cascadia Code', ui-monospace,
               'SF Mono', Menlo, monospace;
  font-size: 0.9em;
  background-color: var(--gp-primary-50);
  color: var(--gp-primary-700);
  padding: 0.15em 0.4em;
  border-radius: var(--gp-radius-sm);
}

pre {
  background-color: var(--gp-ink);
  color: var(--gp-bone);
  padding: var(--gp-space-5);
  border-radius: var(--gp-radius-lg);
  overflow-x: auto;
  margin-block: var(--gp-space-5);
  font-size: var(--gp-text-body-sm);
  line-height: 1.7;
}

pre code {
  background: none;
  color: inherit;
  padding: 0;
  font-size: inherit;
  border-radius: 0;
}

/* ============================================================
   HORIZONTAL RULE
   ============================================================ */

hr {
  border: none;
  border-top: 1px solid var(--gp-slate-200);
  margin-block: var(--gp-space-7);
}

/* ============================================================
   STAT / PROOF-POINT TYPOGRAPHY
   Used in stat cards and proof bars.
   ============================================================ */

.stat-number {
  font-family: var(--gp-font-display);
  font-size: var(--gp-text-display);
  font-weight: var(--gp-weight-semibold);
  line-height: 1;
  letter-spacing: 0;
  color: var(--gp-ink);
}

.stat-label {
  font-size: var(--gp-text-body-sm);
  line-height: var(--gp-leading-body-sm);
  color: var(--gp-slate-700);
  font-weight: var(--gp-weight-medium);
  margin-top: var(--gp-space-1);
}

/* On dark / primary surfaces */
.surface--ink .stat-number,
.surface--primary .stat-number {
  color: var(--gp-white);
}

.surface--ink .stat-label,
.surface--primary .stat-label {
  color: rgba(255, 255, 255, 0.75);
}

/* ============================================================
   ENTRY CONTENT (WordPress post/page body)
   Applies prose spacing to the_content() output.
   ============================================================ */

.entry-content > * + * {
  margin-top: var(--gp-space-5);
}

.entry-content h2,
.entry-content h3,
.entry-content h4 {
  margin-top: var(--gp-space-7);
  margin-bottom: var(--gp-space-3);
}

.entry-content img {
  border-radius: var(--gp-radius-lg);
}

.entry-content table {
  margin-block: var(--gp-space-6);
}