/*
 * W1Network Pro — SEO & Typography Enhancement Layer v8.0
 * File: css/seo-typography.css
 *
 * PURPOSE: Drop-in CSS enhancement that:
 *  1. Upgrades font stack to Poppins (headings) + Inter (body)
 *  2. Enforces strict heading hierarchy & sizes per spec
 *  3. Optimises single-post content for readability & low bounce
 *  4. Adds utility classes for content formatting
 *  5. Provides USA fashion/lifestyle magazine aesthetic
 *
 * HOW TO INSTALL:
 *  Enqueue via functions.php AFTER w1network-pro-style.
 *  See: w1network_pro_scripts() — add seo-typography enqueue there.
 *
 * STYLE GUIDE:
 *  --ff-heading : Poppins, 700/800 weight, letter-spacing -0.02em
 *  --ff-body    : Inter, 400/500 weight, line-height 1.7
 *  H1  : clamp(2rem, 5vw, 2.5rem)   — 32–40px
 *  H2  : clamp(1.5rem, 4vw, 1.875rem) — 24–30px
 *  H3  : clamp(1.25rem, 3vw, 1.5rem)  — 20–24px
 *  Body: 1rem–1.125rem (16–18px)
 *  Line-height: 1.7 body, 1.25 headings
 *  Content max-width: 700px
 */

/* ─── 1. FONT IMPORTS ───────────────────────────────────────────────────── */
/* Loaded via wp_enqueue in functions-seo.php — no @import needed here.    */
/* Fallback declaration ensures no FOUT if enqueue fails.                  */

/* ─── 2. DESIGN TOKEN OVERRIDES ──────────────────────────────────────────
   Overrides only the typography tokens. Brand colours, spacing, z-index
   tokens remain exactly as defined in the parent style.css.
   ──────────────────────────────────────────────────────────────────────── */
:root {
  /* Font families */
  --ff-heading: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --ff-body:    'Inter',   -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --ff-sans:    var(--ff-body); /* keeps existing --ff-sans token working */

  /* Type scale — fluid, mobile-first */
  --fs-h1:   clamp(2rem,     5vw,  2.5rem);    /* 32–40px */
  --fs-h2:   clamp(1.5rem,   4vw,  1.875rem);  /* 24–30px */
  --fs-h3:   clamp(1.25rem,  3vw,  1.5rem);    /* 20–24px */
  --fs-h4:   clamp(1.0625rem,2.5vw,1.25rem);   /* 17–20px */
  --fs-body: clamp(1rem,     1.5vw, 1.125rem); /* 16–18px */
  --fs-sm:   0.875rem;  /* 14px — captions, labels */
  --fs-xs:   0.75rem;   /* 12px — badges, meta */

  /* Line heights */
  --lh-heading: 1.25;
  --lh-body:    1.72;
  --lh-loose:   1.85;

  /* Content width for readability */
  --content-w: 700px;

  /* Letter-spacing */
  --ls-heading:  -0.025em;
  --ls-wide:      0.06em;

  /* Paragraph spacing */
  --para-gap: 1.4em;
}

/* ─── 3. GLOBAL BASE TYPOGRAPHY ──────────────────────────────────────────── */
body {
  font-family: var(--ff-body);
  font-size:   var(--fs-body);
  line-height: var(--lh-body);
  font-weight: 400;
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing:  antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ─── 4. HEADING HIERARCHY ────────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  font-family:    var(--ff-heading);
  line-height:    var(--lh-heading);
  letter-spacing: var(--ls-heading);
  font-weight:    700;
  color:          var(--tx-0);
  margin-top:     0;
}

h1 { font-size: var(--fs-h1); font-weight: 800; }
h2 { font-size: var(--fs-h2); font-weight: 700; }
h3 { font-size: var(--fs-h3); font-weight: 700; }
h4 { font-size: var(--fs-h4); font-weight: 600; }
h5 { font-size: var(--fs-body); font-weight: 600; }
h6 { font-size: var(--fs-sm);   font-weight: 600; }

p { margin-bottom: var(--para-gap); }
p:last-child { margin-bottom: 0; }

/* ─── 5. SINGLE POST — ARTICLE BODY ──────────────────────────────────────── */
.single-post-content {
  max-width:   var(--content-w);
  font-size:   var(--fs-body);
  line-height: var(--lh-body);
  color:       var(--tx-1);
  /* Smooth word wrap for long compound words / URLs */
  overflow-wrap: break-word;
  word-break:    break-word;
  hyphens:       auto;
}

/* Heading rhythm inside post content */
.single-post-content h2 {
  font-size:     var(--fs-h2);
  font-family:   var(--ff-heading);
  font-weight:   700;
  letter-spacing: var(--ls-heading);
  margin-top:    2.5em;
  margin-bottom: 0.6em;
  padding-top:   0.5em;
  color:         var(--tx-0);
  /* Subtle left accent line for visual hierarchy */
  border-left:   3px solid var(--clr-primary);
  padding-left:  0.75em;
}

.single-post-content h3 {
  font-size:      var(--fs-h3);
  font-family:    var(--ff-heading);
  font-weight:    700;
  letter-spacing: var(--ls-heading);
  margin-top:     2em;
  margin-bottom:  0.5em;
  color:          var(--tx-0);
}

.single-post-content h4 {
  font-size:      var(--fs-h4);
  font-family:    var(--ff-heading);
  font-weight:    600;
  margin-top:     1.75em;
  margin-bottom:  0.4em;
  color:          var(--tx-0);
}

/* ─── Paragraph spacing ─────────────────────────────────────────────────── */
.single-post-content p {
  margin-bottom: var(--para-gap);
  max-width:     var(--content-w);
}

/* ─── Lists ─────────────────────────────────────────────────────────────── */
.single-post-content ul,
.single-post-content ol {
  padding-left:  1.75em;
  margin-bottom: var(--para-gap);
  list-style:    revert;
}

.single-post-content ul { list-style-type: disc; }
.single-post-content ol { list-style-type: decimal; }

.single-post-content li {
  margin-bottom: 0.55em;
  line-height:   var(--lh-body);
}

/* Nested lists */
.single-post-content li > ul,
.single-post-content li > ol {
  margin-top:    0.4em;
  margin-bottom: 0.4em;
}

/* ─── Blockquote ────────────────────────────────────────────────────────── */
.single-post-content blockquote {
  border-left:    4px solid var(--clr-primary);
  padding:        1.2em 1.6em;
  margin:         2em 0;
  background:     var(--bg-2);
  border-radius:  0 var(--radius-md) var(--radius-md) 0;
  font-size:      1.08em;
  font-style:     italic;
  color:          var(--tx-0);
  line-height:    var(--lh-loose);
  position:       relative;
}
.single-post-content blockquote::before {
  content:      '\201C';
  font-family:  Georgia, serif;
  font-size:    4rem;
  line-height:  1;
  color:        var(--clr-primary);
  opacity:      0.25;
  position:     absolute;
  top:         -0.2em;
  left:         0.4em;
  pointer-events: none;
}
.single-post-content blockquote p { margin-bottom: 0; }
.single-post-content blockquote cite {
  display:     block;
  margin-top:  0.8em;
  font-size:   var(--fs-sm);
  font-style:  normal;
  font-weight: 600;
  color:       var(--tx-2);
}
.single-post-content blockquote cite::before { content: '— '; }

/* ─── Images & Figures ──────────────────────────────────────────────────── */
.single-post-content figure {
  margin:    2em 0;
  max-width: 100%;
}
.single-post-content figure img {
  width:         100%;
  height:        auto;
  border-radius: var(--radius-md);
  display:       block;
}
.single-post-content figcaption {
  margin-top:  0.6em;
  font-size:   var(--fs-sm);
  color:       var(--tx-2);
  text-align:  center;
  line-height: 1.5;
}

/* ─── Links inside content ──────────────────────────────────────────────── */
.single-post-content a {
  color:           var(--clr-primary);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset:     2px;
  transition:      color var(--dur-fast) ease, text-decoration-color var(--dur-fast) ease;
}
.single-post-content a:hover {
  text-decoration-thickness: 2px;
}

/* ─── Horizontal rule ───────────────────────────────────────────────────── */
.single-post-content hr {
  border:      none;
  border-top:  1px solid var(--bd-2);
  margin:      2.5em 0;
}

/* ─── Inline code ───────────────────────────────────────────────────────── */
.single-post-content code {
  font-family:  var(--ff-mono);
  font-size:    0.875em;
  background:   var(--bg-2);
  border:       1px solid var(--bd-1);
  border-radius:4px;
  padding:      0.15em 0.4em;
  white-space:  nowrap;
}
.single-post-content pre {
  background:    var(--bg-2);
  border:        1px solid var(--bd-1);
  border-radius: var(--radius-sm);
  padding:       1.25em 1.5em;
  overflow-x:    auto;
  margin-bottom: var(--para-gap);
  line-height:   1.65;
}
.single-post-content pre code {
  background: none;
  border:     none;
  padding:    0;
  font-size:  0.875em;
  white-space: pre;
}

/* ─── Table ─────────────────────────────────────────────────────────────── */
.single-post-content table {
  width:           100%;
  border-collapse: collapse;
  margin-bottom:   var(--para-gap);
  font-size:       var(--fs-sm);
  overflow:        hidden;
  border-radius:   var(--radius-sm);
}
.single-post-content th,
.single-post-content td {
  padding:     0.75em 1em;
  border:      1px solid var(--bd-1);
  text-align:  left;
  line-height: 1.5;
}
.single-post-content th {
  background:  var(--bg-2);
  font-weight: 700;
  font-family: var(--ff-heading);
  color:       var(--tx-0);
}
.single-post-content tr:nth-child(even) td {
  background: color-mix(in srgb, var(--bg-2) 55%, transparent);
}
.single-post-content tr:hover td {
  background: var(--bg-3);
  transition: background var(--dur-fast) ease;
}

/* ─── 6. POST TITLE (H1 on single post pages) ────────────────────────────── */
.single-post-title {
  font-family:    var(--ff-heading);
  font-size:      var(--fs-h1);
  font-weight:    800;
  line-height:    1.2;
  letter-spacing: -0.03em;
  color:          var(--tx-0);
  margin-bottom:  0.75em;
  /* Ensure title wraps cleanly on mobile */
  overflow-wrap:  break-word;
  hyphens:        auto;
}

/* ─── 7. CONTENT FORMATTING UTILITY CLASSES ──────────────────────────────── */
/*
 * Use these classes in the WordPress editor (Classic or Block)
 * by adding them as custom CSS classes to paragraphs or divs.
 */

/* Highlighted intro / lead paragraph */
.post-lead,
.entry-lead {
  font-size:   1.15em;
  font-weight: 400;
  color:       var(--tx-0);
  line-height: var(--lh-loose);
  margin-bottom: 2em;
  border-left: none;
  padding:     0;
}

/* Key takeaway / info box */
.post-callout {
  background:    rgba(255, 0, 80, 0.07);
  border:        1px solid rgba(255, 0, 80, 0.2);
  border-radius: var(--radius-md);
  padding:       1.25em 1.5em;
  margin:        2em 0;
  font-size:     var(--fs-body);
  line-height:   var(--lh-body);
}
.post-callout strong { color: var(--clr-primary); }

/* Tip / Pro-tip box */
.post-tip {
  background:    rgba(0, 242, 234, 0.07);
  border:        1px solid rgba(0, 242, 234, 0.2);
  border-radius: var(--radius-md);
  padding:       1em 1.4em 1em 3.2em;
  margin:        1.8em 0;
  position:      relative;
  font-size:     var(--fs-body);
}
.post-tip::before {
  content:    '💡';
  position:   absolute;
  left:       1em;
  top:        1em;
  font-size:  1.2em;
}

/* Warning box */
.post-warning {
  background:    rgba(255, 145, 0, 0.07);
  border:        1px solid rgba(255, 145, 0, 0.25);
  border-radius: var(--radius-md);
  padding:       1em 1.4em 1em 3.2em;
  margin:        1.8em 0;
  position:      relative;
  font-size:     var(--fs-body);
}
.post-warning::before { content: '⚠️'; position: absolute; left: 1em; top: 1em; font-size: 1.2em; }

/* Highlighted / hero quote */
.post-highlight {
  font-size:      clamp(1.25rem, 3.5vw, 1.75rem);
  font-family:    var(--ff-heading);
  font-weight:    700;
  line-height:    1.35;
  text-align:     center;
  color:          var(--tx-0);
  margin:         2.5em auto;
  max-width:      580px;
  position:       relative;
  padding:        0.5em 1em;
}
.post-highlight::before,
.post-highlight::after {
  content:    '';
  display:    block;
  height:     2px;
  background: linear-gradient(90deg, transparent, var(--clr-primary), transparent);
  margin:     0.6em 0;
}

/* CTA block at end of posts */
.post-cta {
  background:    linear-gradient(135deg, rgba(255,0,80,0.08) 0%, rgba(0,242,234,0.05) 100%);
  border:        1px solid var(--bd-2);
  border-radius: var(--radius-lg);
  padding:       2em 2em;
  margin:        3em 0 1em;
  text-align:    center;
}
.post-cta h3, .post-cta h4 {
  font-family:   var(--ff-heading);
  font-size:     var(--fs-h3);
  margin-top:    0;
  margin-bottom: 0.5em;
  color:         var(--tx-0);
}
.post-cta p { color: var(--tx-1); max-width: 480px; margin: 0 auto 1.25em; }
.post-cta a,
.post-cta .btn {
  display:        inline-flex;
  align-items:    center;
  gap:            0.5em;
  padding:        0.7em 1.8em;
  background:     linear-gradient(135deg, var(--clr-primary), var(--clr-primary-dim));
  color:          #fff;
  border-radius:  var(--radius-full);
  font-weight:    700;
  font-size:      0.95rem;
  text-decoration:none;
  transition:     transform var(--dur-fast) ease, box-shadow var(--dur-fast) ease;
  box-shadow:     0 4px 14px rgba(255,0,80,0.35);
}
.post-cta a:hover,
.post-cta .btn:hover {
  transform:  translateY(-2px);
  box-shadow: 0 6px 20px rgba(255,0,80,0.45);
}

/* ─── 8. ARCHIVE / LISTING PAGE TYPOGRAPHY ───────────────────────────────── */
.post-title {
  font-family:    var(--ff-heading);
  font-size:      clamp(0.9rem, 2vw, 1rem);
  font-weight:    700;
  line-height:    1.35;
  letter-spacing: -0.01em;
}

.archive-title {
  font-family:    var(--ff-heading);
  font-size:      var(--fs-h1);
  font-weight:    800;
  letter-spacing: -0.03em;
}

.category-title {
  font-family:    var(--ff-heading);
  font-size:      var(--fs-h3);
  font-weight:    700;
  letter-spacing: var(--ls-heading);
}

/* ─── 9. RESPONSIVE TYPOGRAPHY ───────────────────────────────────────────── */
@media (max-width: 767px) {
  .single-post-content {
    font-size: 1rem;
  }
  .single-post-title {
    font-size: clamp(1.625rem, 6.5vw, 2rem);
  }
  .single-post-content h2 {
    font-size: 1.375rem;
    padding-left: 0.6em;
  }
  .single-post-content h3 {
    font-size: 1.2rem;
  }
  .single-post-content blockquote {
    padding: 1em 1.2em;
    font-size: 1em;
  }
  .post-highlight {
    font-size: 1.2rem;
    padding: 0.4em 0.6em;
  }
}

@media (max-width: 479px) {
  .single-post-title {
    font-size: 1.5rem;
    letter-spacing: -0.02em;
  }
  .single-post-content h2 {
    font-size: 1.25rem;
  }
  .single-post-content h3 {
    font-size: 1.125rem;
  }
  .single-post-content table {
    font-size: 0.8125rem;
  }
  .single-post-content th,
  .single-post-content td {
    padding: 0.5em 0.7em;
  }
}

/* ─── 10. READING EXPERIENCE POLISH ──────────────────────────────────────── */

/* Drop cap for first paragraph of posts */
.single-post-content > p:first-of-type::first-letter {
  float:        left;
  font-family:  var(--ff-heading);
  font-size:    3.4em;
  font-weight:  800;
  line-height:  0.78;
  margin-right: 0.12em;
  margin-top:   0.08em;
  color:        var(--clr-primary);
}

/* "Share" nudge — pulse the share button after 60s dwell */
@keyframes sharePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(0,242,234,0); }
  50%       { box-shadow: 0 0 0 6px rgba(0,242,234,0.22); }
}
.share-btn.pulse-hint {
  animation: sharePulse 2s ease 3;
}

/* ─── 11. PRINT STYLES ────────────────────────────────────────────────────── */
@media print {
  body {
    font-family: Georgia, 'Times New Roman', serif;
    font-size:   12pt;
    line-height: 1.6;
    color:       #000;
  }
  h1, h2, h3, h4, h5, h6 {
    font-family: Arial, Helvetica, sans-serif;
    color:       #000;
  }
  .single-post-content {
    max-width: 100%;
    color:     #111;
  }
  .post-callout,
  .post-tip,
  .post-warning {
    border:     1px solid #ccc;
    background: #f9f9f9;
  }
}

/* ─── 12. HIGH CONTRAST / FORCED COLOURS ─────────────────────────────────── */
@media (forced-colors: active) {
  .single-post-content h2 { border-left-color: Highlight; }
  .post-callout           { border-color: Highlight; }
  .post-cta a             { background: Highlight; color: HighlightText; }
}