/*
 * Base Typography
 * Sets global type styles using design tokens from variables.css.
 * Tekvera Initiative Theme
 */

/* ── Body ────────────────────────────────────────────────────────────────── */
body {
  font-family: var(--tv-font-sans);
  font-size: var(--tv-text-md);
  font-weight: 400;
  line-height: var(--tv-leading-relaxed);
  color: var(--tv-text-primary);
  background-color: var(--tv-bg-page);
}

/* ── Headings ────────────────────────────────────────────────────────────── */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--tv-font-serif);
  line-height: var(--tv-leading-tight);
  color: var(--tv-text-primary);
  letter-spacing: var(--tv-tracking-tight);
}

h1 {
  font-size: clamp(2.5rem, 5.5vw, 5rem);
  font-weight: 300;
}
h2 {
  font-size: clamp(1.75rem, 3.5vw, 3rem);
  font-weight: 300;
}
h3 {
  font-size: clamp(1.25rem, 2vw, 1.875rem);
  font-weight: 400;
}
h4 {
  font-size: var(--tv-text-xl);
  font-weight: 500;
}
h5 {
  font-size: var(--tv-text-lg);
  font-weight: 500;
}
h6 {
  font-size: var(--tv-text-base);
  font-weight: 600;
}

/* Italic modifier (Fraunces has a beautiful italic) */
h1 em,
h2 em,
.tv-title-italic {
  font-style: italic;
  color: var(--tv-amber-300);
}

/* Strong in display headings */
h1 strong,
h2 strong,
.tv-title-bold {
  font-weight: 600;
}

/* ── Eyebrow label ───────────────────────────────────────────────────────── */
.tv-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--tv-font-sans);
  font-size: var(--tv-text-xs);
  font-weight: 700;
  letter-spacing: var(--tv-tracking-widest);
  text-transform: uppercase;
  color: var(--tv-green-600);
  margin-bottom: 1rem;
}

.tv-eyebrow::before {
  content: "";
  display: block;
  width: 14px;
  height: 1.5px;
  background: currentColor;
  flex-shrink: 0;
}

/* Dark-section eyebrow */
.tv-section--dark .tv-eyebrow,
.tv-eyebrow--light {
  color: var(--tv-green-400);
}

.tv-eyebrow--amber {
  color: var(--tv-amber-400);
}
.tv-eyebrow--amber-dark {
  color: var(--tv-amber-600);
}

/* ── Body text ───────────────────────────────────────────────────────────── */
p {
  font-size: var(--tv-text-base);
  line-height: var(--tv-leading-normal);
  color: var(--tv-text-secondary);
  margin-bottom: 12px;
}

.tv-lead {
  font-size: var(--tv-text-lg);
  line-height: var(--tv-leading-relaxed);
  color: var(--tv-text-secondary);
}

.tv-caption {
  font-size: var(--tv-text-md);
  color: var(--tv-text-secondary);
  line-height: var(--tv-leading-normal);
}

/* ── Links ───────────────────────────────────────────────────────────────── */
a {
  color: var(--tv-green-600);
  transition: color var(--tv-duration-base) var(--tv-ease-default);
}

a:hover {
  color: var(--tv-green-500);
}

.tv-content p {
  font-size: 1.05rem;
}

/* Content area links (in wysiwyg output) */
.tv-content a {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--tv-green-300);
}

.tv-content a:hover {
  text-decoration-color: var(--tv-green-600);
}

/* ── Lists ───────────────────────────────────────────────────────────────── */
.tv-content ul,
.tv-content ol {
  padding-left: 1.5rem;
}

.tv-content ul {
  list-style: disc;
}
.tv-content ol {
  list-style: decimal;
}

.tv-content li {
  margin-bottom: 0.4rem;
  line-height: var(--tv-leading-relaxed);
}

/* ── Blockquote ──────────────────────────────────────────────────────────── */
blockquote,
.tv-blockquote {
  font-family: var(--tv-font-serif);
  font-size: clamp(1.2rem, 2vw, 1.6rem);
  font-weight: 300;
  font-style: italic;
  line-height: var(--tv-leading-snug);
  color: var(--tv-text-primary);
  border-left: 3px solid var(--tv-amber-400);
  padding-left: 2rem;
  margin: 2rem 0;
}

/* ── WordPress alignment helpers ─────────────────────────────────────────── */
.alignleft {
  float: left;
  margin: 0 1.5rem 1rem 0;
}
.alignright {
  float: right;
  margin: 0 0 1rem 1.5rem;
}
.aligncenter {
  display: block;
  margin: 0 auto 1rem;
}
.alignwide {
  max-width: var(--tv-max-width-lg);
  margin-left: auto;
  margin-right: auto;
}
.alignfull {
  max-width: 100%;
}

.wp-caption {
  max-width: 100%;
}
.wp-caption-text {
  font-size: var(--tv-text-sm);
  color: var(--tv-text-tertiary);
  margin-top: 0.4rem;
}

/* ── Utility text modifiers ──────────────────────────────────────────────── */
.tv-text-center {
  text-align: center;
}
.tv-text-right {
  text-align: right;
}
.tv-text-serif {
  font-family: var(--tv-font-serif);
}
.tv-text-sans {
  font-family: var(--tv-font-sans);
}
.tv-text-italic {
  font-style: italic;
}
.tv-text-bold {
  font-weight: 600;
}
.tv-text-light {
  font-weight: 300;
}

/* Colour utilities */
.tv-text-green {
  color: var(--tv-green-600);
}
.tv-text-amber {
  color: var(--tv-amber-400);
}
.tv-text-white {
  color: var(--tv-white);
}
.tv-text-muted {
  color: var(--tv-text-tertiary);
}