/* ============================================================
   tips.co.za Sprint 3
   - Type scale unification (7-step)
   - Guides metadata chips (reading time, difficulty, last-updated)
   - Payment-method chip links on review pages
   - Newsletter form upgrade (taller, repositioned, brand)
   Last updated: June 2026
   ============================================================ */

:root{
  /* 7-step single source of truth (px). Components opt in via these. */
  --t3-text-xs: 13px;
  --t3-text-sm: 15px;
  --t3-text-base: 17px;
  --t3-text-lg: 19px;
  --t3-text-xl: 22px;
  --t3-text-2xl: 28px;
  --t3-text-3xl: 36px;

  --t3-lh-tight: 1.25;
  --t3-lh-normal: 1.5;
  --t3-lh-relaxed: 1.65;
}

/* ============================================================
   A. Body and global type baseline (mobile-first, scoped)
   Only adjust ambient body size + headings - DO NOT touch
   already styled inline buttons or CTAs.
   ============================================================ */
body{
  font-size: var(--t3-text-base);
  line-height: var(--t3-lh-normal);
}
@media (min-width: 768px){
  body{ font-size: var(--t3-text-base); }
}

/* Headings - opt in via .t3-h* utility classes, applied selectively */
.t3-h1{ font-size: var(--t3-text-3xl) !important; line-height: var(--t3-lh-tight); }
.t3-h2{ font-size: var(--t3-text-2xl) !important; line-height: var(--t3-lh-tight); }
.t3-h3{ font-size: var(--t3-text-xl) !important; line-height: var(--t3-lh-tight); }
.t3-h4{ font-size: var(--t3-text-lg) !important; line-height: var(--t3-lh-tight); }
.t3-meta{ font-size: var(--t3-text-xs) !important; color: var(--color-text-muted); }

/* Tighten a couple of legacy heading uses to the new scale on small screens */
@media (max-width: 640px){
  .promo-hero-card h1,
  .review-hero h1,
  .hero h1{
    font-size: var(--t3-text-3xl);
    line-height: var(--t3-lh-tight);
  }
  .section h2,
  main h2{
    font-size: var(--t3-text-2xl);
    line-height: var(--t3-lh-tight);
  }
  .info-card h3,
  .promo-step h3,
  .review-section h3{
    font-size: var(--t3-text-lg);
    line-height: var(--t3-lh-tight);
  }
}

/* ============================================================
   B. Guides metadata chips
   Renders reading time + difficulty + last updated below the
   guide card body. Uses data-* attributes - no per-card markup.
   ============================================================ */
.info-card{
  position: relative;
  display: flex;
  flex-direction: column;
}
.info-card .guide-meta{
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 8px 0 12px;
  font-size: var(--t3-text-xs);
}
.info-card .guide-meta .chip{
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--color-surface-2, #f0f2f5);
  color: var(--color-text-muted, #4b5563);
  border: 1px solid var(--color-border, #e2e5eb);
  font-weight: 600;
  white-space: nowrap;
}
.info-card .guide-meta .chip-diff-beginner{ background:#e8f5ee; color:#0a6331; border-color:rgba(13,124,61,0.25); }
.info-card .guide-meta .chip-diff-intermediate{ background:#fef6e0; color:#92400e; border-color:rgba(217,119,6,0.25); }
.info-card .guide-meta .chip-diff-advanced{ background:#fee2e2; color:#991b1b; border-color:rgba(220,38,38,0.25); }

/* ============================================================
   C. Payment-method chip links on review pages
   .pay-pill becomes an anchor when wrapped, hover treatment.
   ============================================================ */
.pay-pill{
  font-size: var(--t3-text-xs) !important;
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  padding: 6px 12px !important;
  text-decoration: none;
  transition: background 150ms ease, color 150ms ease, border-color 150ms ease;
}
a.pay-pill,
.pay-pill a,
.payment-pills-wrap a{
  text-decoration: none;
  color: inherit;
}
a.pay-pill:hover,
.payment-pills-wrap a:hover .pay-pill,
a:hover > .pay-pill{
  background: var(--color-primary-light, #e8f5ee) !important;
  color: var(--color-primary, #0d7c3d) !important;
  border-color: var(--color-primary, #0d7c3d) !important;
}
.payment-pills-wrap{ display: flex; flex-wrap: wrap; gap: 8px; }

/* ============================================================
   D. Newsletter form upgrade
   Taller input (48px), brand border, prominent button.
   ============================================================ */
.newsletter-form{
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 480px;
  margin: 0 auto;
}
@media (min-width: 540px){
  .newsletter-form{ flex-direction: row; gap: 8px; }
}
.newsletter-input{
  flex: 1;
  height: 48px;
  min-height: 48px;
  padding: 0 16px;
  font-size: var(--t3-text-base) !important;
  border-radius: 10px !important;
  border: 1.5px solid var(--color-border, #e2e5eb) !important;
  background: var(--color-surface, #fff) !important;
  color: var(--color-text, #111827);
  width: 100%;
  box-sizing: border-box;
}
.newsletter-input:focus{
  border-color: var(--color-primary, #0d7c3d) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(13,124,61,0.15) !important;
}
.newsletter-btn{
  height: 48px;
  min-height: 48px;
  padding: 0 22px;
  font-size: var(--t3-text-base) !important;
  font-weight: 700 !important;
  border-radius: 10px !important;
  background: var(--color-primary, #0d7c3d) !important;
  color: #fff !important;
  border: 0 !important;
  cursor: pointer;
  white-space: nowrap;
  letter-spacing: 0.01em;
}
.newsletter-btn:hover{
  background: var(--color-primary-hover, #0a6331) !important;
}
@media (max-width: 540px){
  .newsletter-form{ max-width: 100%; }
  .newsletter-btn{ width: 100%; }
}

/* ============================================================
   E. Cross-cutting tap-target hardening
   ============================================================ */
.guide-meta .chip{ min-height: 24px; }
a.pay-pill, .payment-pills-wrap a{ min-height: 32px; }