/* =============================================================
   WordCountNow.com.au — Design System
   Single stylesheet for all 164 static pages
   Bright & Bold / Inter / Indigo + Pink + Green
   ============================================================= */

/* ─── DESIGN TOKENS ─────────────────────────────────────────── */
:root {
  /* Colour */
  --color-primary:          #6366f1;
  --color-primary-hover:    #4f46e5;
  --color-guide:            #be185d;
  --color-guide-bg:         #fdf2f8;
  --color-calc:             #047857;
  --color-calc-bg:          #ecfdf5;
  --color-surface:          #ffffff;
  --color-surface-alt:      #fafafa;
  --color-surface-hover:    #f4f4f5;
  --color-border:           #e4e4e7;
  --color-border-strong:    #d1d5db;
  --color-text:             #18181b;
  --color-text-secondary:   #52525b;
  --color-text-muted:       #71717a;
  --color-text-faint:       #a1a1aa;
  --color-footer-bg:        #18181b;
  --color-footer-text:      #a1a1aa;

  /* Typography */
  --font-body:    'Inter', sans-serif;
  --text-base:    clamp(1rem, 0.92rem + 0.4vw, 1.125rem);
  --text-sm:      clamp(0.875rem, 0.82rem + 0.25vw, 0.9375rem);
  --text-xs:      0.8125rem;
  --text-h1:      clamp(1.75rem, 1.2rem + 2.2vw, 2.5rem);
  --text-h2:      clamp(1.35rem, 1.1rem + 1vw, 1.75rem);
  --text-h3:      clamp(1.15rem, 1rem + 0.5vw, 1.35rem);
  --text-h4:      1.05rem;
  --lh-body:      1.7;
  --lh-heading:   1.2;
  --fw-normal:    400;
  --fw-medium:    500;
  --fw-semibold:  600;
  --fw-bold:      700;

  /* Spacing */
  --space-1:      0.25rem;
  --space-2:      0.5rem;
  --space-3:      0.75rem;
  --space-4:      1rem;
  --space-5:      1.25rem;
  --space-6:      1.5rem;
  --space-8:      2rem;
  --space-10:     2.5rem;
  --space-12:     3rem;
  --space-section: clamp(2rem, 1.5rem + 2.5vw, 4rem);

  /* Radius */
  --radius-sm:    4px;
  --radius-card:  8px;
  --radius-input: 12px;
  --radius-pill:  99px;

  /* Shadows */
  --shadow-xs:    0 1px 2px rgba(0,0,0,0.06);
  --shadow-sm:    0 1px 4px rgba(0,0,0,0.08);
  --shadow-md:    0 4px 16px rgba(0,0,0,0.10);
  --shadow-lg:    0 8px 32px rgba(0,0,0,0.12);

  /* Layout */
  --max-content:  680px;
  --max-tool:     600px;
  --max-page:     900px;
  --max-nav:      1200px;

  /* Transitions */
  --dur-fast:     150ms;
  --dur-normal:   250ms;
  --ease:         cubic-bezier(0.16, 1, 0.3, 1);
}

/* ─── RESET & BASE ───────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--lh-body);
  color: var(--color-text);
  background: var(--color-surface);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, video, svg {
  display: block;
  max-width: 100%;
}

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

a:hover {
  text-decoration: underline;
}

button, input, textarea, select {
  font: inherit;
}

/* ─── TYPOGRAPHY ─────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  line-height: var(--lh-heading);
  font-weight: var(--fw-bold);
  color: var(--color-text);
}

h1 { font-size: var(--text-h1); }
h2 { font-size: var(--text-h2); }
h3 { font-size: var(--text-h3); }
h4 { font-size: var(--text-h4); }

p { margin-bottom: var(--space-4); }
p:last-child { margin-bottom: 0; }

/* ─── LAYOUT UTILITIES ───────────────────────────────────────── */
.container {
  width: 100%;
  max-width: var(--max-nav);
  margin-inline: auto;
  padding-inline: var(--space-5);
}

.container--narrow {
  max-width: var(--max-page);
}

.container--content {
  max-width: var(--max-content);
}

.section {
  padding-block: var(--space-section);
}

/* ─── NAVIGATION ─────────────────────────────────────────────── */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  box-shadow: var(--shadow-xs);
}

.nav-inner {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  max-width: var(--max-nav);
  margin-inline: auto;
  padding: var(--space-3) var(--space-5);
  height: 60px;
}

.nav-logo {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  text-decoration: none;
  font-weight: var(--fw-bold);
  font-size: 1.1rem;
  color: var(--color-text);
  flex-shrink: 0;
}

.nav-logo:hover { text-decoration: none; }

.nav-logo svg,
.nav-logo img {
  width: 28px;
  height: 28px;
}

.nav-logo span {
  color: var(--color-primary);
}

.nav-links {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  list-style: none;
  margin-left: auto;
}

.nav-links a {
  display: block;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  color: var(--color-text-secondary);
  text-decoration: none;
  transition: background var(--dur-fast), color var(--dur-fast);
}

.nav-links a:hover {
  background: var(--color-surface-hover);
  color: var(--color-text);
  text-decoration: none;
}

.nav-links a.active,
.nav-links a[aria-current="page"] {
  background: #eef2ff;
  color: var(--color-primary);
}

.nav-cta {
  display: inline-flex;
  align-items: center;
  padding: var(--space-2) var(--space-4);
  background: var(--color-primary);
  color: #fff !important;
  border-radius: var(--radius-pill);
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  transition: background var(--dur-fast);
}

.nav-cta:hover {
  background: var(--color-primary-hover) !important;
  text-decoration: none;
}

/* Hamburger — visible on mobile only */
.nav-hamburger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: none;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  margin-left: auto;
  color: var(--color-text-secondary);
}

.nav-hamburger svg {
  width: 20px;
  height: 20px;
}

/* Mobile nav drawer */
.nav-drawer {
  display: none;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-3) var(--space-5) var(--space-5);
  border-top: 1px solid var(--color-border);
  background: var(--color-surface);
}

.nav-drawer.is-open {
  display: flex;
}

.nav-drawer a {
  display: block;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-card);
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  color: var(--color-text-secondary);
  text-decoration: none;
}

.nav-drawer a:hover {
  background: var(--color-surface-hover);
  color: var(--color-text);
  text-decoration: none;
}

/* ─── HERO AREAS ─────────────────────────────────────────────── */
.hero {
  padding-block: clamp(2.5rem, 2rem + 2.5vw, 5rem);
  text-align: center;
}

.hero__eyebrow {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: var(--space-3);
}

.hero__title {
  font-size: var(--text-h1);
  font-weight: var(--fw-bold);
  color: var(--color-text);
  margin-bottom: var(--space-4);
}

.hero__desc {
  font-size: clamp(1rem, 0.9rem + 0.5vw, 1.2rem);
  color: var(--color-text-secondary);
  max-width: 56ch;
  margin-inline: auto;
  margin-bottom: var(--space-6);
}

/* Home hero — light purple gradient */
.hero-home {
  background: linear-gradient(160deg, #f5f3ff 0%, #ffffff 60%);
}

.hero-home .hero__eyebrow { color: var(--color-primary); }

/* Tool hero — light indigo gradient */
.hero-tool {
  background: linear-gradient(160deg, #eef2ff 0%, #ffffff 60%);
}

.hero-tool .hero__eyebrow { color: var(--color-primary); }

/* Calculator hero — light green gradient */
.hero-calc {
  background: linear-gradient(160deg, #ecfdf5 0%, #ffffff 60%);
}

.hero-calc .hero__eyebrow { color: var(--color-calc); }
.hero-calc .hero__title   { color: var(--color-calc); }

/* Guide hero — light pink gradient */
.hero-guide {
  background: linear-gradient(160deg, #fdf2f8 0%, #ffffff 60%);
}

.hero-guide .hero__eyebrow { color: var(--color-guide); }
.hero-guide .hero__title   { color: var(--color-guide); }

/* ─── BUTTONS ────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 0.6em 1.4em;
  border: 2px solid transparent;
  border-radius: var(--radius-pill);
  font-weight: var(--fw-semibold);
  font-size: var(--text-sm);
  cursor: pointer;
  text-decoration: none;
  transition: background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast), box-shadow var(--dur-fast);
  white-space: nowrap;
}

.btn-primary {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
}

.btn-primary:hover {
  background: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
  text-decoration: none;
  color: #fff;
}

.btn-outline {
  background: transparent;
  color: var(--color-primary);
  border-color: var(--color-primary);
}

.btn-outline:hover {
  background: #eef2ff;
  text-decoration: none;
}

.btn-ghost {
  background: var(--color-surface-hover);
  color: var(--color-text-secondary);
  border-color: transparent;
}

.btn-ghost:hover {
  background: var(--color-border);
  color: var(--color-text);
  text-decoration: none;
}

.btn-lg {
  padding: 0.75em 2em;
  font-size: var(--text-base);
}

/* ─── CARDS ──────────────────────────────────────────────────── */
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  padding: var(--space-5);
  transition: box-shadow var(--dur-normal) var(--ease), transform var(--dur-normal) var(--ease);
}

.card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.card a {
  text-decoration: none;
  color: inherit;
}

.card__tag {
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: var(--space-2);
}

.card__title {
  font-size: var(--text-h3);
  font-weight: var(--fw-bold);
  margin-bottom: var(--space-2);
  color: var(--color-text);
}

.card__desc {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: 1.55;
}

/* Card grids */
.card-grid {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: repeat(3, 1fr);
}

.card-grid--2 {
  grid-template-columns: repeat(2, 1fr);
}

.card-grid--4 {
  grid-template-columns: repeat(4, 1fr);
}

/* ─── STAT CARDS ─────────────────────────────────────────────── */
.stat-row {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.stat-card {
  flex: 1 1 0;
  min-width: 120px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  padding: var(--space-5) var(--space-4);
  text-align: center;
}

.stat-number {
  display: block;
  font-size: clamp(1.5rem, 1.2rem + 1.5vw, 2.25rem);
  font-weight: var(--fw-bold);
  color: var(--color-primary);
  line-height: 1;
  margin-bottom: var(--space-1);
}

.stat-label {
  font-size: var(--text-xs);
  font-weight: var(--fw-medium);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ─── TOOL INTERFACE ─────────────────────────────────────────── */
.tool-box {
  background: var(--color-surface);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-input);
  padding: var(--space-6);
  max-width: var(--max-tool);
  margin-inline: auto;
  box-shadow: var(--shadow-sm);
}

.tool-box__label {
  display: block;
  font-weight: var(--fw-semibold);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-2);
}

.tool-box textarea,
.tool-box input[type="text"],
.tool-box input[type="number"] {
  width: 100%;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-base);
  color: var(--color-text);
  background: var(--color-surface-alt);
  resize: vertical;
  transition: border-color var(--dur-fast);
  line-height: var(--lh-body);
}

.tool-box textarea:focus,
.tool-box input[type="text"]:focus,
.tool-box input[type="number"]:focus {
  outline: none;
  border-color: var(--color-primary);
  background: var(--color-surface);
  box-shadow: 0 0 0 3px rgba(99,102,241,0.12);
}

.tool-box textarea {
  min-height: 180px;
}

.tool-actions {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-4);
  flex-wrap: wrap;
}

.tool-results {
  margin-top: var(--space-5);
}

/* ─── CATEGORY TAGS ──────────────────────────────────────────── */
.tag {
  display: inline-flex;
  align-items: center;
  padding: 0.2em 0.75em;
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}

.tag-tool {
  background: #eef2ff;
  color: var(--color-primary);
}

.tag-guide {
  background: #fdf2f8;
  color: var(--color-guide);
}

.tag-calc {
  background: var(--color-calc-bg);
  color: var(--color-calc);
}

.tag-doc {
  background: var(--color-calc-bg);
  color: var(--color-calc);
}

/* ─── QUICK ANSWER BOX ───────────────────────────────────────── */
.quick-answer {
  border: 2px solid var(--color-primary);
  border-radius: var(--radius-input);
  padding: var(--space-5) var(--space-6);
  background: #f5f3ff;
  margin-bottom: var(--space-6);
}

.quick-answer__label {
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-primary);
  margin-bottom: var(--space-2);
}

.quick-answer__number {
  font-size: clamp(2rem, 1.5rem + 2vw, 3rem);
  font-weight: var(--fw-bold);
  color: var(--color-text);
  line-height: 1;
  margin-bottom: var(--space-2);
}

.quick-answer__desc {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  margin-bottom: 0;
}

/* Calc variant */
.quick-answer--calc {
  border-color: var(--color-calc);
  background: var(--color-calc-bg);
}

.quick-answer--calc .quick-answer__label {
  color: var(--color-calc);
}

/* ─── DATA TABLES ────────────────────────────────────────────── */
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
  margin-bottom: var(--space-6);
}

.data-table thead tr {
  background: var(--color-surface-hover);
  border-bottom: 2px solid var(--color-border-strong);
}

.data-table th {
  padding: var(--space-3) var(--space-4);
  text-align: left;
  font-weight: var(--fw-semibold);
  color: var(--color-text-secondary);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

.data-table td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text);
  vertical-align: top;
}

.data-table tbody tr:last-child td {
  border-bottom: none;
}

.data-table tbody tr:hover {
  background: var(--color-surface-alt);
}

.table-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
}

.table-wrapper .data-table {
  margin-bottom: 0;
}

/* ─── CONTENT BODY ───────────────────────────────────────────── */
.content-body {
  max-width: var(--max-content);
  margin-inline: auto;
}

.content-body h2 {
  margin-top: var(--space-10);
  margin-bottom: var(--space-4);
}

.content-body h3 {
  margin-top: var(--space-8);
  margin-bottom: var(--space-3);
}

.content-body h4 {
  margin-top: var(--space-6);
  margin-bottom: var(--space-2);
  font-weight: var(--fw-semibold);
  color: var(--color-text-secondary);
}

.content-body p {
  color: var(--color-text-secondary);
  margin-bottom: var(--space-4);
}

.content-body ul,
.content-body ol {
  padding-left: var(--space-6);
  margin-bottom: var(--space-4);
  color: var(--color-text-secondary);
}

.content-body li {
  margin-bottom: var(--space-2);
  line-height: 1.65;
}

.content-body a {
  color: var(--color-primary);
  font-weight: var(--fw-medium);
}

.content-body a:hover {
  text-decoration: underline;
}

.content-body strong {
  color: var(--color-text);
  font-weight: var(--fw-semibold);
}

.content-body blockquote {
  border-left: 3px solid var(--color-primary);
  padding-left: var(--space-4);
  margin: var(--space-6) 0;
  color: var(--color-text-secondary);
  font-style: italic;
}

.content-body hr {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: var(--space-8) 0;
}

/* ─── INLINE SUGGESTIONS ─────────────────────────────────────── */
.suggestions-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-block: var(--space-5);
}

.suggestions-row__label {
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
  width: 100%;
  margin-bottom: var(--space-1);
}

.suggestions-row a,
.suggestions-row button {
  display: inline-flex;
  align-items: center;
  padding: 0.35em 0.9em;
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: var(--fw-medium);
  color: var(--color-primary);
  cursor: pointer;
  text-decoration: none;
  transition: background var(--dur-fast), border-color var(--dur-fast);
}

.suggestions-row a:hover,
.suggestions-row button:hover {
  background: #eef2ff;
  border-color: var(--color-primary);
  text-decoration: none;
}

/* ─── RELATED STRIP ──────────────────────────────────────────── */
.related-strip {
  background: var(--color-surface-alt);
  border-top: 1px solid var(--color-border);
  padding-block: var(--space-section);
}

.related-strip__title {
  font-size: var(--text-h2);
  font-weight: var(--fw-bold);
  margin-bottom: var(--space-6);
}

.related-strip .card-grid {
  grid-template-columns: repeat(4, 1fr);
}

/* ─── FILTER TABS ────────────────────────────────────────────── */
.filter-tabs {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-bottom: var(--space-6);
}

.filter-tabs--scroll {
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: var(--space-1);
}

.filter-tabs--scroll::-webkit-scrollbar {
  display: none;
}

.filter-tab {
  display: inline-flex;
  align-items: center;
  padding: 0.4em 1em;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  color: var(--color-text-secondary);
  background: var(--color-surface);
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  transition: background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast);
}

.filter-tab:hover {
  background: var(--color-surface-hover);
  color: var(--color-text);
  text-decoration: none;
}

.filter-tab.active,
.filter-tab.is-active,
.filter-tab[aria-pressed="true"] {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
}

/* ─── AD ZONES ───────────────────────────────────────────────── */
.ad-zone {
  margin-block: var(--space-8);
  text-align: center;
  min-height: 90px;
}

.ad-zone--sidebar {
  margin-block: var(--space-6);
  min-height: 250px;
}

.ad-zone--inline {
  margin-block: var(--space-6);
  min-height: 90px;
}

/* ─── FOOTER ─────────────────────────────────────────────────── */
.site-footer {
  background: var(--color-footer-bg);
  color: var(--color-footer-text);
  padding-block: var(--space-section);
}

.footer-inner {
  max-width: var(--max-nav);
  margin-inline: auto;
  padding-inline: var(--space-5);
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: var(--space-8);
}

.footer-brand {
  font-weight: var(--fw-bold);
  font-size: 1rem;
  color: #fff;
  margin-bottom: var(--space-3);
}

.footer-brand p {
  font-size: var(--text-sm);
  font-weight: var(--fw-normal);
  color: var(--color-footer-text);
  margin-top: var(--space-2);
}

.footer-col h4 {
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #fff;
  margin-bottom: var(--space-3);
}

.footer-col ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.footer-col a {
  font-size: var(--text-sm);
  color: var(--color-footer-text);
  text-decoration: none;
  transition: color var(--dur-fast);
}

.footer-col a:hover {
  color: #fff;
  text-decoration: none;
}

.footer-bottom {
  max-width: var(--max-nav);
  margin-inline: auto;
  padding-inline: var(--space-5);
  padding-top: var(--space-6);
  margin-top: var(--space-6);
  border-top: 1px solid #27272a;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3);
  font-size: var(--text-xs);
  color: var(--color-footer-text);
}

.footer-bottom a {
  color: var(--color-footer-text);
  text-decoration: none;
}

.footer-bottom a:hover {
  color: #fff;
}

/* ─── PAGE LAYOUT: SIDEBAR ───────────────────────────────────── */
.page-with-sidebar {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: var(--space-8);
  align-items: start;
  max-width: var(--max-nav);
  margin-inline: auto;
  padding-inline: var(--space-5);
  padding-block: var(--space-section);
}

.page-sidebar {
  position: sticky;
  top: 80px;
}

/* ─── BREADCRUMB ─────────────────────────────────────────────── */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-bottom: var(--space-4);
}

.breadcrumb a {
  color: var(--color-text-muted);
  text-decoration: none;
}

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

.breadcrumb__sep {
  color: var(--color-text-faint);
}

/* ─── TOC (TABLE OF CONTENTS) ────────────────────────────────── */
.toc {
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  padding: var(--space-4);
  font-size: var(--text-sm);
}

.toc__title {
  font-weight: var(--fw-semibold);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-3);
}

.toc ol, .toc ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.toc a {
  color: var(--color-text-secondary);
  text-decoration: none;
  display: block;
  padding: 0.15em 0;
  transition: color var(--dur-fast);
}

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

/* ─── NOTICE / ALERT BOX ─────────────────────────────────────── */
.notice {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-4);
  border-radius: var(--radius-card);
  border: 1px solid var(--color-border);
  background: var(--color-surface-alt);
  font-size: var(--text-sm);
  margin-bottom: var(--space-5);
}

.notice--info {
  background: #eef2ff;
  border-color: #c7d2fe;
  color: #3730a3;
}

.notice--tip {
  background: var(--color-calc-bg);
  border-color: #a7f3d0;
  color: #065f46;
}

.notice--warn {
  background: #fffbeb;
  border-color: #fde68a;
  color: #92400e;
}

/* ─── LEGACY CLASS OVERRIDES ─────────────────────────────────── */
/* Redefine old body-content classes so existing HTML renders
   correctly under the new design system. */

.content-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  padding: var(--space-5);
  margin-bottom: var(--space-5);
  box-shadow: var(--shadow-xs);
}

.content-card h2,
.content-card h3 {
  margin-top: 0;
  margin-bottom: var(--space-3);
}

.content-card p:last-child {
  margin-bottom: 0;
}

.example-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
  margin-bottom: var(--space-5);
}

.example-table th {
  background: var(--color-surface-hover);
  padding: var(--space-3) var(--space-4);
  text-align: left;
  font-weight: var(--fw-semibold);
  color: var(--color-text-secondary);
  border-bottom: 2px solid var(--color-border-strong);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.example-table td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text);
  vertical-align: top;
}

.example-table tr:last-child td {
  border-bottom: none;
}

.example-table tr:hover td {
  background: var(--color-surface-alt);
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

.info-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  padding: var(--space-4);
  box-shadow: var(--shadow-xs);
}

.info-card h3,
.info-card h4 {
  font-size: var(--text-h4);
  margin-bottom: var(--space-2);
}

.info-card p {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  margin-bottom: 0;
}

.faq-item {
  border-bottom: 1px solid var(--color-border);
  padding-block: var(--space-5);
}

.faq-item:last-child {
  border-bottom: none;
}

.faq-item__question {
  font-weight: var(--fw-semibold);
  color: var(--color-text);
  margin-bottom: var(--space-3);
  font-size: var(--text-h4);
}

.faq-item p {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  margin-bottom: 0;
}

/* ─── LAYOUT WRAPPERS ───────────────────────────────────────── */
.hero-inner {
  max-width: var(--max-page);
  margin-inline: auto;
  padding-inline: var(--space-5);
}

.hero-subtitle {
  font-size: clamp(1rem, 0.9rem + 0.5vw, 1.2rem);
  color: var(--color-text-secondary);
  max-width: 56ch;
  margin-inline: auto;
  margin-bottom: var(--space-6);
}

.section-inner {
  max-width: var(--max-page);
  margin-inline: auto;
  padding-inline: var(--space-5);
}

.content-section {
  padding-block: var(--space-section);
}

.content-inner {
  max-width: var(--max-content);
  margin-inline: auto;
  padding-inline: var(--space-5);
}

.tool-section {
  padding-block: var(--space-section);
}

.tool-inner {
  max-width: var(--max-tool);
  margin-inline: auto;
  padding-inline: var(--space-5);
}

/* ─── HOMEPAGE SECTIONS ─────────────────────────────────────── */
.counter-section {
  padding-block: var(--space-section);
}

.counter-inner {
  max-width: var(--max-content);
  margin-inline: auto;
  padding-inline: var(--space-5);
}

.counter-textarea {
  width: 100%;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-base);
  font-family: var(--font-body);
  color: var(--color-text);
  background: var(--color-surface-alt);
  resize: vertical;
  min-height: 200px;
  transition: border-color var(--dur-fast);
  line-height: var(--lh-body);
}

.counter-textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  background: var(--color-surface);
  box-shadow: 0 0 0 3px rgba(99,102,241,0.12);
}

.tools-section {
  background: var(--color-surface-alt);
  padding-block: var(--space-section);
}

.guides-section {
  padding-block: var(--space-section);
}

.guide-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.guide-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-primary);
  font-weight: var(--fw-medium);
  text-decoration: none;
  font-size: var(--text-base);
  transition: color var(--dur-fast);
}

.guide-link:hover {
  color: var(--color-primary-hover);
  text-decoration: underline;
}

.tool-card {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  text-decoration: none;
  color: var(--color-text);
  transition: box-shadow var(--dur-normal) var(--ease), transform var(--dur-normal) var(--ease);
}

.tool-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
  text-decoration: none;
}

.tool-card__emoji {
  font-size: 1.5rem;
  flex-shrink: 0;
}

.tool-card__name {
  font-weight: var(--fw-semibold);
  font-size: var(--text-sm);
}

/* ─── HUB PAGE ──────────────────────────────────────────────── */
.hub-hero {
  padding-block: clamp(2.5rem, 2rem + 2.5vw, 5rem);
  text-align: center;
  background: linear-gradient(160deg, #f5f3ff 0%, #ffffff 60%);
}

.hub-hero-inner {
  max-width: var(--max-page);
  margin-inline: auto;
  padding-inline: var(--space-5);
}

.hub-subtitle {
  font-size: clamp(1rem, 0.9rem + 0.5vw, 1.2rem);
  color: var(--color-text-secondary);
  max-width: 56ch;
  margin-inline: auto;
}

.hub-content {
  padding-block: var(--space-section);
}

.hub-inner {
  max-width: var(--max-nav);
  margin-inline: auto;
  padding-inline: var(--space-5);
}

.hub-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  transition: box-shadow var(--dur-normal) var(--ease), transform var(--dur-normal) var(--ease);
}

.hub-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.hub-card__title {
  font-size: var(--text-h4);
  font-weight: var(--fw-bold);
  color: var(--color-text);
  margin: 0;
}

.hub-card__title a {
  color: inherit;
  text-decoration: none;
}

.hub-card__title a:hover {
  color: var(--color-primary);
}

.hub-card__desc {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: 1.55;
  margin: 0;
}

.hub-card__cta {
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  color: var(--color-primary);
  text-decoration: none;
  margin-top: auto;
}

.hub-card__cta:hover {
  text-decoration: underline;
}

/* ─── RESPONSIVE — TABLET (640px–1023px) ─────────────────────── */
@media (min-width: 640px) and (max-width: 1023px) {
  .card-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .card-grid--4 {
    grid-template-columns: repeat(2, 1fr);
  }

  .related-strip .card-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .footer-inner {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-6);
  }

  .page-with-sidebar {
    grid-template-columns: 1fr;
  }

  .page-sidebar {
    position: static;
  }
}

/* ─── RESPONSIVE — MOBILE (max 640px) ───────────────────────── */
@media (max-width: 640px) {
  .container {
    padding-inline: var(--space-4);
  }

  .nav-links {
    display: none;
  }

  .nav-hamburger {
    display: flex;
  }

  .hero {
    text-align: left;
    padding-block: clamp(1.5rem, 1rem + 3vw, 3rem);
  }

  .hero__desc {
    margin-inline: 0;
  }

  .card-grid,
  .card-grid--2,
  .card-grid--4 {
    grid-template-columns: 1fr;
  }

  .related-strip .card-grid {
    grid-template-columns: 1fr;
  }

  .stat-row {
    flex-wrap: wrap;
  }

  .stat-card {
    flex: 1 1 calc(50% - var(--space-2));
  }

  .tool-box {
    padding: var(--space-4);
  }

  .tool-actions {
    flex-direction: column;
  }

  .tool-actions .btn {
    width: 100%;
    justify-content: center;
  }

  .page-with-sidebar {
    grid-template-columns: 1fr;
    padding-inline: var(--space-4);
  }

  .page-sidebar {
    position: static;
  }

  .footer-inner {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }

  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
  }

  .filter-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: var(--space-1);
  }

  .filter-tabs::-webkit-scrollbar {
    display: none;
  }

  .suggestions-row {
    gap: var(--space-2);
  }

  .info-grid {
    grid-template-columns: 1fr;
  }

  .quick-answer {
    padding: var(--space-4);
  }
}

/* ─── RESPONSIVE — DESKTOP (min 1024px) ─────────────────────── */
@media (min-width: 1024px) {
  .card-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .card-grid--2 {
    grid-template-columns: repeat(2, 1fr);
  }

  .card-grid--4 {
    grid-template-columns: repeat(4, 1fr);
  }

  .related-strip .card-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .page-with-sidebar {
    grid-template-columns: 1fr 300px;
  }

  .footer-inner {
    grid-template-columns: 2fr 1fr 1fr 1fr;
  }
}

/* ─── PRINT ──────────────────────────────────────────────────── */
@media print {
  .site-nav,
  .site-footer,
  .ad-zone,
  .related-strip,
  .suggestions-row,
  .filter-tabs {
    display: none !important;
  }

  body {
    font-size: 11pt;
    color: #000;
  }

  a {
    color: inherit;
    text-decoration: none;
  }

  .content-body {
    max-width: 100%;
  }
}