/* =========================================================================
   TalkTools Blog — main.css
   Built on the TalkTools brand design system tokens. Header/footer
   selectors intentionally match the class names from the Shopify
   storefront's header.liquid / footer.liquid so this theme feels like a
   direct continuation of talktools.com, not a re-skin.

   Font stack: Proxima Nova (licensed, loaded from assets/fonts if present)
   -> Poppins (Google Fonts fallback) -> Helvetica -> sans-serif. No Arial.
   ========================================================================= */

/* ── Proxima Nova (optional — drop licensed .woff2/.otf files in
   assets/fonts/ and these will start being used automatically) ────────── */
@font-face { font-family: 'Proxima Nova'; src: url('../fonts/ProximaNova-Regular.woff2') format('woff2'), url('../fonts/ProximaNova-Regular.otf') format('opentype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Proxima Nova'; src: url('../fonts/ProximaNova-Medium.woff2') format('woff2'), url('../fonts/ProximaNova-Medium.otf') format('opentype'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Proxima Nova'; src: url('../fonts/ProximaNova-Semibold.woff2') format('woff2'), url('../fonts/ProximaNova-Semibold.otf') format('opentype'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Proxima Nova'; src: url('../fonts/ProximaNova-Bold.woff2') format('woff2'), url('../fonts/ProximaNova-Bold.otf') format('opentype'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Proxima Nova'; src: url('../fonts/ProximaNova-Extrabld.woff2') format('woff2'), url('../fonts/ProximaNova-Extrabld.otf') format('opentype'); font-weight: 800; font-style: normal; font-display: swap; }

/* ═══════════════════════════════════════════════════════════════════════
   Design tokens
   ═══════════════════════════════════════════════════════════════════════ */
:root {
  /* Brand palette */
  --tt-purple:  #6361AA;
  --tt-aqua:    #86CBA4;
  --tt-magenta: #ED3877;
  --tt-yellow:  #FFD677;
  --tt-dark:    #242424;
  --tt-white:   #FFFFFF;

  --tt-purple-10: #f0f0f8;
  --tt-purple-20: #d9d9ef;
  --tt-purple-40: #b2b1d8;
  --tt-purple-60: #8b8ac1;
  --tt-aqua-10:   #f0f9f4;
  --tt-aqua-20:   #d3eede;
  --tt-aqua-40:   #b3ddc4;
  --tt-magenta-10:#fde8ef;
  --tt-yellow-10: #fff8e6;

  --color-fg-1: var(--tt-dark);
  --color-fg-2: #555555;
  --color-fg-3: #888888;
  --color-bg-base: var(--tt-white);
  --color-bg-subtle: #F7F7F7;
  --color-border: #E0E0E0;
  --color-border-strong: #CCCCCC;

  /* No Arial anywhere in the stack — Helvetica is the system fallback. */
  --font-family-sans: 'Proxima Nova', 'Poppins', Helvetica, sans-serif;

  --text-xs:   11px;
  --text-sm:   13px;
  --text-base: 16px;
  --text-md:   18px;
  --text-lg:   22px;
  --text-xl:   28px;
  --text-2xl:  36px;
  --text-3xl:  48px;
  --text-4xl:  64px;

  --leading-tight:   1.15;
  --leading-snug:    1.3;
  --leading-normal:  1.55;
  --leading-relaxed: 1.75;

  --tracking-tight:  -0.02em;
  --tracking-wide:    0.04em;
  --tracking-wider:   0.08em;

  --space-1: 4px;  --space-2: 8px;   --space-3: 12px;  --space-4: 16px;
  --space-5: 20px; --space-6: 24px;  --space-7: 28px;  --space-8: 32px;  --space-10: 40px;
  --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px;

  --radius-sm: 4px; --radius-md: 8px; --radius-lg: 16px; --radius-xl: 24px;
  --radius-pill: 999px;

  --shadow-sm:    0 1px 4px rgba(0,0,0,0.06);
  --shadow-md:    0 4px 16px rgba(0,0,0,0.08);
  --shadow-lg:    0 12px 32px rgba(0,0,0,0.10);
  --shadow-brand: 0 6px 20px rgba(99,97,170,0.22);

  --header-height: 76px;
  --page-max: 1200px;
}

/* ═══════════════════════════════════════════════════════════════════════
   Reset & base
   ═══════════════════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-family-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-fg-1);
  background: var(--color-bg-base);
}
img { max-width: 100%; height: auto; display: block; }
/* Links have NO underline anywhere by default — including on hover. Only
   two contexts deliberately opt back into underlines, each on its own
   specific selector below: inline prose links inside article body copy
   (.entry-content a / .post-body a, matching the canonical template's
   editorial style) and the author-name hover state in the byline. Every
   other link — nav, blog cards, buttons, footer, sidebar, tags, related
   posts — stays underline-free in every state. Do not reintroduce a bare
   `a:hover { text-decoration: underline; }` rule; that is what caused
   every element on a blog card to underline on hover previously. */
a { color: var(--tt-purple); text-decoration: none; }
a:hover { text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font-family: inherit; }
h1, h2, h3, h4, h5, h6 { margin: 0 0 var(--space-4); font-family: var(--font-family-sans); }
p { margin: 0 0 var(--space-4); }

.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px; overflow: hidden;
  clip: rect(1px,1px,1px,1px);
  white-space: nowrap;
}
.skip-link {
  position: absolute; top: -100px; left: var(--space-4);
  background: var(--tt-purple); color: var(--tt-white);
  padding: var(--space-2) var(--space-4); border-radius: var(--radius-md);
  z-index: 10000; transition: top .15s ease;
}
.skip-link:focus { top: var(--space-4); }
:focus-visible { outline: 2px solid var(--tt-magenta); outline-offset: 2px; }

.page-width { max-width: var(--page-max); margin: 0 auto; padding: 0 var(--space-6); }
.text-center { text-align: center; }
.hide { display: none !important; }

/* Debut-style visibility helpers, carried over from the Shopify theme */
@media (max-width: 767px) { .small--hide { display: none !important; } }
@media (min-width: 768px) { .medium-up--hide { display: none !important; } }
@media (min-width: 768px) { .small--text-left { text-align: left; } }

/* ═══════════════════════════════════════════════════════════════════════
   Type styles & utilities (from the TalkTools design system)
   ═══════════════════════════════════════════════════════════════════════ */
.tt-h1 { font-weight: 800; font-size: var(--text-3xl); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); color: var(--tt-purple); }
.tt-h2 { font-weight: 700; font-size: var(--text-2xl); line-height: var(--leading-snug); letter-spacing: var(--tracking-tight); color: var(--tt-purple); }
.tt-h3 { font-weight: 600; font-size: var(--text-xl); line-height: var(--leading-snug); color: var(--tt-purple); margin-bottom: var(--space-3); }
.tt-descriptor { font-weight: 600; font-size: var(--text-lg); line-height: var(--leading-snug); color: var(--tt-aqua); }
.tt-body { font-weight: 400; font-size: var(--text-base); line-height: var(--leading-normal); color: var(--tt-dark); }
.tt-body-sm { font-weight: 400; font-size: var(--text-sm); line-height: var(--leading-normal); color: var(--color-fg-2); }
.tt-label { font-weight: 600; font-size: var(--text-xs); letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--color-fg-3); }
.tt-eyebrow { display: inline-block; font-weight: 700; font-size: var(--text-xs); letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--tt-aqua); margin-bottom: var(--space-2); text-decoration: none; }
.tt-eyebrow:hover { text-decoration: none; }

.tt-text-purple { color: var(--tt-purple); } .tt-text-aqua { color: var(--tt-aqua); }
.tt-text-magenta { color: var(--tt-magenta); } .tt-text-dark { color: var(--tt-dark); }
.tt-bg-purple { background: var(--tt-purple); } .tt-bg-purple-10 { background: var(--tt-purple-10); }

.tt-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  font-weight: 600; font-size: var(--text-base); line-height: 1;
  border-radius: var(--radius-pill); padding: var(--space-3) var(--space-6);
  border: 2px solid transparent; cursor: pointer; text-decoration: none !important;
  transition: opacity .18s ease, transform .12s ease, box-shadow .18s ease;
}
.tt-btn:hover { opacity: .9; box-shadow: var(--shadow-brand); }
.tt-btn:active { transform: scale(.97); }
.tt-btn-primary { background: var(--tt-purple); color: var(--tt-white); box-shadow: var(--shadow-sm); }
.tt-btn-secondary { background: var(--tt-aqua); color: var(--tt-white); box-shadow: var(--shadow-sm); }
.tt-btn-outline-purple { background: transparent; color: var(--tt-purple); border-color: var(--tt-purple); }
.tt-btn-ghost { background: transparent; color: var(--tt-purple); border-color: transparent; padding-left: 0; padding-right: 0; }
.tt-btn-sm { font-size: var(--text-sm); padding: var(--space-2) var(--space-4); }

.tt-card { background: var(--tt-white); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); overflow: hidden; transition: box-shadow .2s ease, transform .2s ease; }

/* ═══════════════════════════════════════════════════════════════════════
   Header — ported from the Shopify header.liquid section
   ═══════════════════════════════════════════════════════════════════════ */
.site {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.header-wrapper { position: relative; z-index: 100; background: var(--tt-white); border-bottom: 1px solid var(--color-border); }
.has-sticky-header .header-wrapper { position: sticky; top: 0; }
.header-wrapper--overlay { position: absolute; top: 0; left: 0; right: 0; background: transparent; border-bottom-color: transparent; }
.header-wrapper--overlay.is-light .site-nav__link,
.header-wrapper--overlay.is-light .site-header__logo-text { color: var(--tt-white); }

.site-header__element--top .page-width { padding-top: var(--space-4); padding-bottom: var(--space-4); }

.header-layout {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
}
.header-layout[data-logo-align="center"] { justify-content: space-between; }
.header-item--logo { flex: 0 0 auto; }
.header-item--icons { display: flex; align-items: center; gap: var(--space-3); margin-left: auto; }
.header-item--navigation { flex: 1 1 auto; }
.header-item--search { display: flex; align-items: center; }
.header-item--compress-nav { display: flex; align-items: center; }

.site-header__logo-text,
.custom-logo-link { font-size: var(--text-xl); font-weight: 800; color: var(--tt-purple); }
.custom-logo { max-height: 56px; width: auto; }

.icon { width: 22px; height: 22px; display: block; }
.icon__fallback-text { display: none; }

.site-nav__link {
  display: inline-flex; align-items: center; gap: var(--space-1);
  font-size: var(--text-sm); font-weight: 600; text-transform: uppercase; letter-spacing: var(--tracking-wide);
  color: var(--tt-dark); padding: var(--space-2) var(--space-3); text-decoration: none !important;
  background: none; border: none; cursor: pointer;
}
.site-nav__link:hover { color: var(--tt-purple); }
.site-nav__link--icon { padding: var(--space-2); color: var(--tt-purple); }
.site-nav__link--icon .icon { width: 20px; height: 20px; }

/* Desktop nav row (nav-below layout) */
.site-header__element--sub[data-type="nav"] { border-top: 1px solid var(--color-border); background: var(--tt-purple-10); }
.site-nav { display: flex; flex-wrap: wrap; align-items: center; }
.site-nav__item { position: relative; }
.site-nav__item--has-dropdown:hover > .site-nav__dropdown,
.site-nav__item--has-dropdown:focus-within > .site-nav__dropdown { display: block; }
.site-nav__link-caret { display: inline-flex; width: 12px; height: 12px; }
.site-nav__link-caret .icon { width: 12px; height: 12px; }

.site-nav__dropdown {
  display: none;
  position: absolute; top: 100%; left: 0; min-width: 220px;
  background: var(--tt-white); border-radius: var(--radius-md); box-shadow: var(--shadow-lg);
  padding: var(--space-2) 0; z-index: 50;
}
.site-nav__dropdown .site-nav__link { display: flex; width: 100%; text-transform: none; letter-spacing: 0; font-weight: 500; padding: var(--space-2) var(--space-4); }
.site-nav__dropdown .site-nav__dropdown { top: 0; left: 100%; }

.site-nav__compress-menu { position: relative; }
.site-nav__more-dropdown { position: absolute; top: 100%; left: 0; background: var(--tt-white); box-shadow: var(--shadow-lg); border-radius: var(--radius-md); min-width: 200px; z-index: 60; }

/* Search overlay */
.site-header__search-container { border-top: 1px solid var(--color-border); background: var(--color-bg-subtle); }
.site-header__search-container.hide { display: none; }
.site-header__search { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-4) 0; }
.site-header__search-form { flex: 1 1 auto; display: flex; }
.site-header__search-input {
  flex: 1 1 auto; border: 1px solid var(--color-border-strong); border-radius: var(--radius-pill) 0 0 var(--radius-pill);
  padding: var(--space-3) var(--space-5); font-size: var(--text-base); font-family: inherit;
  border-right: none;
}
.site-header__search-btn { display: inline-flex; align-items: center; gap: var(--space-2); background: var(--tt-purple); color: var(--tt-white); border: none; border-radius: 0 var(--radius-pill) var(--radius-pill) 0; padding: 0 var(--space-5); cursor: pointer; }
.site-header__search-form + .site-header__search-btn--cancel,
.site-header__search-btn--cancel { background: transparent; color: var(--tt-purple); border-radius: var(--radius-pill); padding: var(--space-2) var(--space-4); border: none; cursor: pointer; }

/* Mobile drawer */
.site-header__drawers { position: relative; }
.site-header__drawer { position: fixed; top: 0; right: -100%; width: min(360px, 88vw); height: 100vh; background: var(--tt-white); box-shadow: var(--shadow-lg); z-index: 200; transition: right .25s ease; overflow-y: auto; }
.site-header__drawer.is-open { right: 0; }
.site-header__drawer-animate { padding: var(--space-16) var(--space-6) var(--space-8); }

.mobile-nav__list .site-nav__item { border-bottom: 1px solid var(--color-border); }
.mobile-nav__list .site-nav__link { display: flex; justify-content: space-between; width: 100%; padding: var(--space-4) 0; font-size: var(--text-base); }
.mobile-nav__list .site-nav__dropdown { display: none; position: static; box-shadow: none; padding-left: var(--space-4); }
.mobile-nav__list .site-nav__item--open > .site-nav__dropdown { display: block; }
.mobile-nav__footer { margin-top: var(--space-8); padding-top: var(--space-6); border-top: 1px solid var(--color-border); }
.mobile-nav__footer-list li { margin-bottom: var(--space-2); }
.mobile-nav__footer-list a { color: var(--color-fg-2); font-size: var(--text-sm); }

.nav-drawer-overlay { position: fixed; inset: 0; background: rgba(36,36,36,.5); z-index: 190; opacity: 0; pointer-events: none; transition: opacity .2s ease; }
.nav-drawer-overlay.is-open { opacity: 1; pointer-events: auto; }

/* ═══════════════════════════════════════════════════════════════════════
   Footer — ported from the Shopify footer.liquid section
   ═══════════════════════════════════════════════════════════════════════ */
.site-footer { background: var(--tt-dark); color: rgba(255,255,255,.85); margin-top: var(--space-20); }
.footer__section--border { border-top: 1px solid var(--color-border); background: var(--tt-purple-10); }

.footer__newsletter { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-6); padding: var(--space-10) 0; }
.footer__subscribe { max-width: 480px; }
.footer__subscribe p { margin: 0; color: var(--tt-dark); font-size: var(--text-md); font-weight: 600; }
.footer__newsletter-form { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; position: relative; flex: 1 1 360px; max-width: 480px; }
.footer__newsletter-input { flex: 1 1 240px; border: 1px solid var(--color-border-strong); border-radius: var(--radius-pill); padding: var(--space-3) var(--space-5); font-size: var(--text-base); font-family: inherit; }
.footer__newsletter-response { width: 100%; margin: 0; }
.footer__newsletter-response.is-success { color: var(--tt-purple); }
.footer__newsletter-response.is-error { color: var(--tt-magenta); }

.footer__section--menus { padding: var(--space-16) 0; }
.footer__blocks { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-10); }
.footer-block__heading { color: var(--tt-white); margin-bottom: var(--space-4); }
.footer__list li { margin-bottom: var(--space-2); }
.footer__list a { color: rgba(255,255,255,.75); font-size: var(--text-sm); }
.footer__list a:hover { color: var(--tt-white); }

.footer__contact-list { margin-bottom: var(--space-4); }
.footer__social { display: flex; gap: var(--space-3); }
.footer__social a { color: rgba(255,255,255,.75); }
.footer__social a:hover { color: var(--tt-aqua); }
.footer__social .icon { width: 20px; height: 20px; }

.footer-business-hub { margin-top: var(--space-6); padding-top: var(--space-6); border-top: 1px solid rgba(255,255,255,.15); }
.footer-business-hub__title { color: var(--tt-magenta); font-weight: 700; text-transform: uppercase; letter-spacing: var(--tracking-wide); display: block; margin-bottom: var(--space-2); font-size: var(--text-sm); }
.footer-business-hub__list li { margin-bottom: var(--space-1); }
.footer-business-hub__list a { color: rgba(255,255,255,.75); text-transform: uppercase; font-weight: 700; font-size: var(--text-xs); letter-spacing: var(--tracking-wide); }
.footer-business-hub__list a:hover { color: var(--tt-white); }

.footer_bottom_section { border-top: 1px solid rgba(255,255,255,.15); padding: var(--space-6) 0; }
.footer__base-links { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); align-items: center; font-size: var(--text-xs); color: rgba(255,255,255,.6); }
.footer__base-links a { color: rgba(255,255,255,.6); }
.footer__base-links a:hover { color: var(--tt-white); }

/* ═══════════════════════════════════════════════════════════════════════
   Homepage hero — ported from the "hero.html" mockup, blog index only.
   Sits in normal flow beneath the site header (our header can be
   position:sticky, never fixed, so no offset math is needed here).
   ═══════════════════════════════════════════════════════════════════════ */
@keyframes tt-hero-slide-up { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: translateY(0); } }

.tt-hero {
  background: linear-gradient(135deg, var(--tt-purple-10) 0%, var(--color-bg-subtle) 60%, var(--tt-aqua-10) 100%);
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--color-border);
}
.tt-hero::before {
  content: ''; position: absolute; top: -80px; right: 40%; width: 500px; height: 500px; border-radius: 50%;
  background: radial-gradient(circle, rgba(99,97,170,0.07) 0%, transparent 65%); pointer-events: none;
}
.tt-hero::after {
  content: ''; position: absolute; bottom: -60px; left: -80px; width: 400px; height: 400px; border-radius: 50%;
  background: radial-gradient(circle, rgba(134,203,164,0.08) 0%, transparent 65%); pointer-events: none;
}
.tt-hero__inner {
  display: grid; grid-template-columns: minmax(0, 580px) minmax(0, 1fr); align-items: stretch;
  min-height: 480px; position: relative; z-index: 1; max-width: 1440px; margin: 0 auto;
}
.tt-hero__content {
  display: flex; flex-direction: column; justify-content: center;
  padding: var(--space-16) var(--space-16) var(--space-16) clamp(var(--space-8), 5vw, var(--space-20));
  width: 100%; max-width: 580px; margin-left: auto;
}
.tt-hero__image-wrap { position: relative; overflow: hidden; }
.tt-hero__img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; display: block; min-height: 460px; }

.tt-hero__title { font-size: clamp(2rem, 4vw, 3rem); font-weight: 800; letter-spacing: -0.025em; line-height: 1.15; color: var(--tt-dark); margin-bottom: var(--space-5); animation: tt-hero-slide-up .7s ease-out .1s both; }
.tt-hero__title em { font-style: normal; color: var(--tt-purple); }
.tt-hero__sub { font-size: var(--text-base); font-weight: 300; color: var(--color-fg-2); max-width: 520px; margin-bottom: var(--space-8); line-height: 1.7; animation: tt-hero-slide-up .7s ease-out .2s both; }
.tt-hero__actions { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; margin-bottom: var(--space-10); animation: tt-hero-slide-up .7s ease-out .3s both; }
.tt-hero__ghost { color: var(--color-fg-2); font-weight: 500; font-size: var(--text-sm); text-decoration: none !important; display: inline-flex; align-items: center; gap: var(--space-2); transition: color .2s, gap .2s; }
.tt-hero__ghost:hover { color: var(--tt-purple); gap: var(--space-3); }
.tt-hero__ghost svg { transition: transform .2s; }
.tt-hero__ghost:hover svg { transform: translateX(3px); }
.tt-hero__stats { display: flex; gap: var(--space-8); animation: tt-hero-slide-up .7s ease-out .4s both; }
.tt-hero__stat { display: flex; flex-direction: column; }
.tt-hero__stat-number { font-size: 1.4rem; font-weight: 700; color: var(--tt-dark); letter-spacing: -0.02em; }
.tt-hero__stat-label { font-size: var(--text-xs); font-weight: 400; color: var(--color-fg-3); letter-spacing: 0.02em; }

@media (max-width: 900px) {
  .tt-hero__inner { grid-template-columns: 1fr; min-height: unset; }
  .tt-hero__content { padding: var(--space-10) var(--space-6) var(--space-8); max-width: 100%; margin-left: 0; }
  .tt-hero__image-wrap { height: 320px; order: -1; }
  .tt-hero__img { min-height: 320px; }
}
@media (max-width: 480px) {
  .tt-hero__image-wrap { height: 240px; }
  .tt-hero__img { min-height: 240px; }
  .tt-hero__stats { gap: var(--space-4); flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) {
  .tt-hero__title, .tt-hero__sub, .tt-hero__actions, .tt-hero__stats { animation: none; }
}

/* Section label above the post grid, same magazine-style eyebrow as the hero */
.section-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: var(--space-7); }
.section-title { font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-fg-3); }
.section-view-all { font-size: var(--text-sm); font-weight: 500; color: var(--tt-purple); text-decoration: none; display: inline-flex; align-items: center; gap: var(--space-1); }
.section-view-all:hover { opacity: .8; }

/* ═══════════════════════════════════════════════════════════════════════
   Category banner + chips-bar — shown at the top of every archive page
   (archive.php), driven entirely by real WordPress data (category name,
   the category's own "Description" field from wp-admin, and its actual
   post count) so it's identical in structure for all 12 categories.
   ═══════════════════════════════════════════════════════════════════════ */
.category-banner { background: linear-gradient(135deg, var(--tt-purple-10) 0%, var(--color-bg-subtle) 100%); border-bottom: 1px solid var(--color-border); padding: var(--space-10) 0; }
.category-banner__icon { width: 40px; height: 40px; border-radius: var(--radius-md); background: var(--tt-white); border: 1px solid var(--color-border); display: flex; align-items: center; justify-content: center; color: var(--tt-purple); margin-bottom: var(--space-4); }
.category-banner__eyebrow { margin-bottom: var(--space-2); }
.category-banner__title { margin-bottom: var(--space-3); }
.category-banner__desc { max-width: 640px; margin-bottom: var(--space-4); }
.category-banner__meta { display: flex; align-items: center; gap: var(--space-2); color: var(--color-fg-3); font-size: var(--text-sm); }

.chips-bar { background: var(--tt-white); border-bottom: 1px solid var(--color-border); position: sticky; top: 0; z-index: 40; }
.has-sticky-header .chips-bar { top: 0; }
.chips-inner { display: flex; align-items: center; gap: var(--space-2); overflow-x: auto; scrollbar-width: none; padding: var(--space-4) 0; }
.chips-inner::-webkit-scrollbar { display: none; }
.chip { white-space: nowrap; font-size: var(--text-sm); font-weight: 500; padding: var(--space-2) var(--space-4); border-radius: var(--radius-pill); border: 1px solid var(--color-border-strong); background: transparent; color: var(--color-fg-2); text-decoration: none !important; transition: background .18s, border-color .18s, color .18s; }
.chip:hover, .chip.is-active { background: var(--tt-purple-10); border-color: rgba(99,97,170,.25); color: var(--tt-purple); }
.chip.is-active { font-weight: 600; }

/* ═══════════════════════════════════════════════════════════════════════
   Post list — the uniform post-listing row used on the blog index,
   every category/tag archive, and search results, so all 12 categories
   render with exactly the same component (no per-category variation).
   ═══════════════════════════════════════════════════════════════════════ */
.posts-list { display: flex; flex-direction: column; gap: 1px; background: var(--color-border); border-radius: var(--radius-md); overflow: hidden; border: 1px solid var(--color-border); box-shadow: var(--shadow-sm); margin-bottom: var(--space-10); }

.post-card { background: var(--tt-white); display: grid; grid-template-columns: 4px 1fr; text-decoration: none !important; color: inherit; position: relative; transition: background .15s; }
.post-card:hover { background: var(--color-bg-subtle); }
.post-card-color { align-self: stretch; }
.post-card-inner { padding: var(--space-5) var(--space-6) var(--space-5) var(--space-5); display: flex; align-items: center; gap: var(--space-5); }
.post-card-text { flex: 1 1 auto; min-width: 0; display: block; }
.post-card-cat { display: block; font-size: var(--text-xs); font-weight: 600; letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--tt-purple); margin-bottom: var(--space-1); }
.post-card-title { display: block; font-size: var(--text-md); font-weight: 600; line-height: 1.4; color: var(--tt-dark); margin-bottom: var(--space-2); transition: color .15s; }
.post-card:hover .post-card-title { color: var(--tt-purple); }
.post-card-excerpt { font-size: var(--text-sm); font-weight: 300; color: var(--color-fg-3); line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.post-card-meta { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-2); flex-wrap: wrap; }
.post-card-date { font-size: var(--text-xs); color: var(--color-fg-3); }
.post-tag { font-size: 10px; font-weight: 600; letter-spacing: var(--tracking-wide); text-transform: uppercase; padding: 3px 10px; border-radius: var(--radius-pill); background: var(--tt-purple-10); color: var(--tt-purple); border: 1px solid rgba(99,97,170,.15); }
.post-tag.aqua { background: var(--tt-aqua-10); color: #3a9967; border-color: rgba(134,203,164,.3); }
.post-tag.magenta { background: var(--tt-magenta-10); color: var(--tt-magenta); border-color: rgba(237,56,119,.18); }
.post-tag.yellow { background: var(--tt-yellow-10); color: #8a6400; border-color: rgba(255,214,119,.35); }
.post-card-arrow { color: var(--color-fg-3); flex-shrink: 0; transition: transform .2s, color .2s; }
.post-card:hover .post-card-arrow { transform: translateX(4px); color: var(--tt-purple); }

.accent-purple { background: var(--tt-purple); }
.accent-aqua { background: var(--tt-aqua); }
.accent-magenta { background: var(--tt-magenta); }
.accent-yellow { background: var(--tt-yellow); }

@media (max-width: 640px) {
  .post-card-inner { padding: var(--space-4) var(--space-5); gap: var(--space-3); }
  .post-card-excerpt { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════════
   Blog sidebar widgets — search, categories-with-counts, newsletter,
   recent posts. Rendered directly by sidebar.php (not dependent on
   wp-admin widget setup) so every listing page shows the same sidebar.
   ═══════════════════════════════════════════════════════════════════════ */
.sidebar-widget { background: var(--tt-white); border-radius: var(--radius-md); border: 1px solid var(--color-border); box-shadow: var(--shadow-sm); overflow: hidden; margin-bottom: var(--space-6); }
.widget-head { padding: var(--space-4) var(--space-5) var(--space-3); border-bottom: 1px solid var(--color-border); }
.widget-title { font-size: var(--text-xs); font-weight: 600; letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--color-fg-3); }
.widget-body { padding: var(--space-4) var(--space-5); }

.search-wrap { position: relative; }
.search-input { width: 100%; font-size: var(--text-sm); color: var(--tt-dark); background: var(--color-bg-subtle); border: 1px solid var(--color-border-strong); border-radius: var(--radius-pill); padding: var(--space-3) 2.5rem var(--space-3) var(--space-4); }
.search-icon { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); color: var(--color-fg-3); pointer-events: none; }

.cat-list { display: flex; flex-direction: column; }
.cat-item { display: flex; align-items: center; justify-content: space-between; padding: var(--space-3) 0; border-bottom: 1px solid var(--color-border); }
.cat-item:last-child { border-bottom: none; }
.cat-link { font-size: var(--text-sm); color: var(--color-fg-2); text-decoration: none !important; display: flex; align-items: center; gap: var(--space-2); }
.cat-link:hover { color: var(--tt-purple); }
.cat-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.cat-count { font-size: var(--text-xs); color: var(--color-fg-3); font-weight: 500; background: var(--color-bg-subtle); padding: 1px 8px; border-radius: var(--radius-pill); }

.newsletter-widget { background: linear-gradient(135deg, var(--tt-purple) 0%, #8280cc 100%); border-radius: var(--radius-md); padding: var(--space-6); color: #fff; position: relative; overflow: hidden; margin-bottom: var(--space-6); }
.newsletter-widget::before { content: ''; position: absolute; top: -40px; right: -40px; width: 140px; height: 140px; border-radius: 50%; background: rgba(255,255,255,.07); }
.newsletter-title { font-size: var(--text-md); font-weight: 700; margin-bottom: var(--space-2); position: relative; z-index: 1; }
.newsletter-desc { font-size: var(--text-sm); opacity: .85; margin-bottom: var(--space-4); position: relative; z-index: 1; line-height: 1.5; }
.newsletter-form { display: flex; flex-direction: column; gap: var(--space-2); position: relative; z-index: 1; }
.newsletter-input { font-size: var(--text-sm); padding: var(--space-3) var(--space-4); border-radius: var(--radius-pill); border: 1.5px solid rgba(255,255,255,.3); background: rgba(255,255,255,.12); color: #fff; }
.newsletter-input::placeholder { color: rgba(255,255,255,.7); }
.newsletter-btn { font-size: var(--text-sm); font-weight: 600; padding: var(--space-3) var(--space-4); border-radius: var(--radius-pill); border: none; background: var(--tt-yellow); color: #4a3800; cursor: pointer; }
.newsletter-btn:hover { background: #ffe899; }
.newsletter-response { font-size: var(--text-xs); position: relative; z-index: 1; margin: 0; }
.newsletter-response.is-success { color: #fff; font-weight: 600; }
.newsletter-response.is-error { color: var(--tt-yellow); font-weight: 600; }

.recent-list { display: flex; flex-direction: column; }
.recent-item { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-3) 0; border-bottom: 1px solid var(--color-border); text-decoration: none !important; color: inherit; }
.recent-item:last-child { border-bottom: none; }
.recent-item:hover .recent-title { color: var(--tt-purple); }
.recent-num { width: 22px; height: 22px; border-radius: 6px; background: var(--tt-purple-10); color: var(--tt-purple); font-size: var(--text-xs); font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.recent-title { font-size: var(--text-sm); font-weight: 500; line-height: 1.4; color: var(--tt-dark); margin-bottom: var(--space-1); transition: color .15s; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.recent-date { font-size: 11px; color: var(--color-fg-3); }

/* ═══════════════════════════════════════════════════════════════════════
   Blog layout
   ═══════════════════════════════════════════════════════════════════════ */
.blog-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--space-12); padding: var(--space-12) var(--space-6) var(--space-20); }
.blog-layout--single-column { grid-template-columns: 1fr; max-width: 760px; }
.blog-main { min-width: 0; }
.blog-header { margin-bottom: var(--space-8); max-width: 640px; }
.blog-header .tt-h1 { margin-bottom: var(--space-3); }

.tt-breadcrumbs { display: block; margin-bottom: var(--space-6); color: var(--color-fg-3); }
.tt-breadcrumbs a { color: var(--color-fg-3); }
.tt-breadcrumbs__sep { margin: 0 var(--space-2); }

/* Belt-and-suspenders: every card-shaped, nav, or UI link across the
   theme stays underline-free in every state, regardless of what a more
   generic rule elsewhere might otherwise apply. Article body prose links
   (.entry-content a / .post-body a) are intentionally exempt — see the
   base `a` rule above. */
.related-card,
.post-cat,
.rel-tag, .rel-title,
.toc-list a,
.tag-cloud a, a.tag,
.footer__list a,
.footer-business-hub__list a,
.footer__base-links a,
.footer__social a,
.social-link,
.cta-widget a,
.site-nav__link,
.recent-item,
.cat-link,
.chip,
.page-numbers,
.post-card,
.post-card * {
  text-decoration: none !important;
}

.tt-pagination { display: flex; justify-content: center; gap: var(--space-2); margin-top: var(--space-12); }
.tt-pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; border-radius: var(--radius-pill); color: var(--tt-purple); font-weight: 600; }
.tt-pagination .page-numbers.current { background: var(--tt-purple); color: var(--tt-white); }
.tt-pagination .page-numbers.dots { color: var(--color-fg-3); }
.tt-pagination svg { width: 18px; height: 18px; }

.no-results__card { padding: var(--space-10); }

/* ── Single post — canonical TalkTools blog template ────────────────────
   Ported from the talktools-blog-formatter skill's shared component CSS.
   Two extra purple shades are added here (not in the base design-system
   tokens) for hover states and the expert-box background; --tt-magenta /
   --tt-magenta-10 stand in for that template's "orange" clinical-note
   accent so the whole theme stays on the 4-color brand palette.
   ───────────────────────────────────────────────────────────────────── */
:root {
  --tt-purple-dark: #4f4d8a;
  --tt-purple-xdk:  #3a3870;
}

/* Force the brand font everywhere inside post/page content, including on
   every descendant. This is a deliberate !important: content pasted into
   the editor from Word/Google Docs/other sites commonly carries inline
   `style="font-family:…"` or wrapping <span>/<font> tags with their own
   font, which is exactly the kind of per-post inconsistency reported —
   some posts render in the brand font, others in whatever font they were
   copied from. This guarantees every post and page reads in the same
   typeface, regardless of how the content was authored. */
.entry-content, .entry-content *,
.post-body, .post-body * {
  font-family: var(--font-family-sans) !important;
}

.entry-content { max-width: 760px; }
.entry-content h2 { font-size: var(--text-2xl); font-weight: 700; color: var(--tt-purple); margin-top: var(--space-10); }
.entry-content h3 { font-size: var(--text-xl); font-weight: 600; color: var(--tt-purple); margin-top: var(--space-8); }
.entry-content p { margin-bottom: var(--space-5); }
.entry-content ul, .entry-content ol { margin: 0 0 var(--space-5); padding-left: var(--space-6); list-style: revert; }
.entry-content a { text-decoration: underline; }
.entry-content img { border-radius: var(--radius-md); margin: var(--space-6) 0; }
.entry-content blockquote { margin: var(--space-8) 0; padding: var(--space-2) 0 var(--space-2) var(--space-6); border-left: 4px solid var(--tt-aqua); color: var(--color-fg-2); font-style: italic; font-size: var(--text-md); }

/* Post header */
.post-header { max-width: 760px; padding-bottom: var(--space-6); border-bottom: 1px solid var(--color-border); margin-bottom: var(--space-7); }
.post-cat { display: inline-block; font-size: var(--text-xs); font-weight: 800; letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--tt-purple); text-decoration: none !important; margin-bottom: var(--space-3); }
.post-cat:hover { color: var(--tt-purple-dark); }
.post-title { font-size: 2.05rem; font-weight: 800; line-height: 1.22; color: var(--tt-dark); letter-spacing: -0.02em; margin-bottom: var(--space-4); max-width: 700px; }
@media (max-width: 640px) { .post-title { font-size: 1.55rem; } }
.post-deck { font-size: 1.02rem; font-weight: 300; color: var(--color-fg-2); line-height: 1.7; max-width: 640px; margin-bottom: var(--space-5); }
.post-meta { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; font-size: var(--text-sm); color: var(--color-fg-3); }
.author-chip { display: flex; align-items: center; gap: var(--space-2); }
.author-chip:hover .author-name { color: var(--tt-purple); text-decoration: underline; }
.author-avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--tt-purple-10); border: 1.5px solid var(--tt-purple-40); display: flex; align-items: center; justify-content: center; font-size: var(--text-xs); font-weight: 800; color: var(--tt-purple-dark); flex-shrink: 0; }
.author-name { font-weight: 700; color: var(--tt-dark); font-size: var(--text-sm); line-height: 1.2; }
.author-cred { font-size: var(--text-xs); color: var(--color-fg-3); }
.meta-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--color-border-strong); flex-shrink: 0; }

/* Direct Answer */
.direct-answer { max-width: 760px; border: 1.5px solid var(--tt-purple); border-radius: var(--radius-md); padding: var(--space-5) var(--space-6); margin-bottom: var(--space-7); position: relative; background: var(--tt-white); }
.da-label { position: absolute; top: -10px; left: 14px; background: var(--tt-purple); color: #fff; font-size: 10px; font-weight: 800; letter-spacing: var(--tracking-wider); text-transform: uppercase; padding: 2px 10px; border-radius: var(--radius-pill); }
.direct-answer p { font-size: 0.94rem; color: var(--color-fg-2); margin: 0; line-height: 1.72; }

/* Key Takeaways */
.takeaways { max-width: 760px; background: var(--tt-purple-10); border-left: 4px solid var(--tt-purple); border-radius: 0 var(--radius-md) var(--radius-md) 0; padding: var(--space-5) var(--space-6); margin-bottom: var(--space-7); }
.tk-label { font-size: var(--text-xs); font-weight: 800; letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--tt-purple-dark); margin-bottom: var(--space-3); }
.takeaways ul { list-style: none; margin: 0; padding: 0; }
.takeaways li { display: grid; grid-template-columns: 18px 1fr; gap: var(--space-2); align-items: start; font-size: 0.9rem; color: var(--tt-dark); line-height: 1.6; padding: var(--space-2) 0; border-bottom: 1px solid var(--tt-purple-40); }
.takeaways li:last-child { border-bottom: none; padding-bottom: 0; }
.tk-icon { flex-shrink: 0; width: 18px; height: 18px; margin-top: 1px; color: var(--tt-purple); }

/* post-body typography (mirrors the canonical template's `.post-body` rules) */
.post-body p { margin-bottom: var(--space-5); font-size: var(--text-base); color: var(--color-fg-2); line-height: 1.76; }
.post-body ul, .post-body ol { margin: 0 0 var(--space-5) 22px; color: var(--color-fg-2); font-size: var(--text-base); line-height: 1.85; }
.post-body li { margin-bottom: 4px; }
.post-body a { color: var(--tt-purple); }
.post-body a:hover { color: var(--tt-purple-dark); }
.post-body h2 { font-size: 1.45rem; font-weight: 800; color: var(--tt-dark); letter-spacing: -0.02em; margin: var(--space-12) 0 var(--space-4); padding-top: var(--space-5); border-top: 2px solid var(--tt-purple); }
.post-body h3 { font-size: 1.05rem; font-weight: 700; color: var(--tt-purple-dark); margin: var(--space-7) 0 var(--space-3); }
.post-body h4 { font-size: 0.95rem; font-weight: 700; color: var(--color-fg-1); margin: var(--space-6) 0 var(--space-2); }

/* Expert Box */
.expert-box { max-width: 760px; background: var(--tt-purple-xdk); color: #fff; border-radius: var(--radius-md); padding: var(--space-6); margin: var(--space-5) 0 var(--space-6); }
.eb-label { font-size: 10px; font-weight: 800; letter-spacing: var(--tracking-wider); text-transform: uppercase; opacity: .55; margin-bottom: var(--space-3); }
.expert-box p { color: rgba(255,255,255,.87); font-size: 0.96rem; margin-bottom: var(--space-3); line-height: 1.7; }
.expert-box p:last-of-type { margin-bottom: 0; }
.expert-sig { display: block; margin-top: var(--space-4); font-size: var(--text-xs); opacity: .55; font-style: italic; }

/* Clinical Note (uses the magenta "hot accent" in place of the reference's orange) */
.clinical-note { max-width: 760px; background: var(--tt-magenta-10); border-left: 4px solid var(--tt-magenta); border-radius: 0 var(--radius-md) var(--radius-md) 0; padding: var(--space-4) var(--space-5); margin: var(--space-5) 0; font-size: 0.9rem; color: var(--tt-dark); line-height: 1.65; }
.clinical-note strong { color: #a0195a; }

/* Framework & Review grids */
.framework-grid, .review-grid { max-width: 760px; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--space-4); margin: var(--space-4) 0 var(--space-6); }
.framework-card, .review-card { border: 1px solid var(--color-border); border-top: 3px solid var(--tt-purple); border-radius: 0 0 var(--radius-md) var(--radius-md); padding: var(--space-5); background: var(--tt-white); }
.fc-step { font-size: 10px; font-weight: 800; letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--tt-purple); margin-bottom: var(--space-2); }
.fc-title, .rc-title { font-size: 0.92rem; font-weight: 700; color: var(--tt-dark); margin-bottom: var(--space-2); line-height: 1.35; }
.fc-desc, .rc-desc { font-size: 0.8rem; color: var(--color-fg-2); line-height: 1.6; }
.rc-icon { color: var(--tt-purple); margin-bottom: var(--space-2); }

/* Example Box */
.example-box { max-width: 760px; background: var(--color-bg-subtle); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-5); margin: var(--space-4) 0 var(--space-6); }
.ex-label { font-size: 10px; font-weight: 800; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-fg-3); margin-bottom: var(--space-3); }
.example-box p { font-size: 0.9rem; color: var(--color-fg-2); margin-bottom: var(--space-2); line-height: 1.68; }
.example-box p:last-child { margin-bottom: 0; }
.example-box ul { margin: 0 0 0 18px; color: var(--color-fg-2); font-size: 0.9rem; line-height: 1.75; }
.example-box li { margin-bottom: 3px; }

/* Checklist */
.checklist { max-width: 760px; list-style: none; margin: 0 0 var(--space-5); padding: 0; }
.checklist li { display: grid; grid-template-columns: 16px 1fr; gap: var(--space-2); align-items: start; font-size: 0.92rem; color: var(--color-fg-2); line-height: 1.65; padding: var(--space-2) 0; border-bottom: 1px solid var(--color-border); }
.checklist li:last-child { border-bottom: none; }
.cl-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--tt-purple); margin-top: 7px; flex-shrink: 0; }

/* Course Card */
.course-card { max-width: 760px; border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; background: var(--tt-white); margin: var(--space-4) 0; }
.cc-head { background: var(--tt-purple); color: #fff; padding: var(--space-2) var(--space-5); font-size: 10px; font-weight: 800; letter-spacing: var(--tracking-wider); text-transform: uppercase; }
.cc-body { padding: var(--space-5); }
.cc-title { font-size: 0.96rem; font-weight: 700; color: var(--tt-dark); margin-bottom: var(--space-2); }
.cc-desc { font-size: 0.84rem; color: var(--color-fg-2); line-height: 1.65; margin-bottom: var(--space-3); }
.cc-ceus { font-size: 0.73rem; color: var(--color-fg-3); margin-bottom: var(--space-3); }

/* Buttons used inside post-body/sidebar components (distinct from .tt-btn-*) */
.btn, .btn-outline, .btn-white { font-family: var(--font-family-sans); font-size: 0.82rem; font-weight: 700; padding: 11px 22px; border-radius: 6px; text-decoration: none !important; display: inline-block; transition: background .18s, color .18s; }
.btn { background: var(--tt-purple); color: #fff !important; }
.btn:hover { background: var(--tt-purple-dark); }
.btn-outline { border: 1.5px solid var(--tt-purple); color: var(--tt-purple) !important; padding: 10px 22px; }
.btn-outline:hover { background: var(--tt-purple); color: #fff !important; }
.btn-white { background: #fff; color: var(--tt-purple) !important; font-size: 0.8rem; padding: 10px 20px; }
.btn-white:hover { background: var(--tt-purple-10); }

/* FAQ accordion */
.faq-group { max-width: 760px; margin-bottom: var(--space-6); }
.faq-group-title { font-size: var(--text-xs); font-weight: 800; letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--tt-purple-dark); margin-bottom: var(--space-3); }
.post-body details, .entry-content details { border: 1px solid var(--color-border); border-radius: var(--radius-md); margin-bottom: var(--space-2); overflow: hidden; }
.post-body summary, .entry-content summary { font-size: 0.93rem; font-weight: 700; color: var(--tt-dark); padding: var(--space-4); cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; }
.post-body summary::-webkit-details-marker, .entry-content summary::-webkit-details-marker { display: none; }
.post-body summary::after, .entry-content summary::after { content: '+'; font-size: 1.1rem; font-weight: 400; color: var(--tt-purple); flex-shrink: 0; margin-left: var(--space-3); }
.post-body details[open] summary::after, .entry-content details[open] summary::after { content: '\2212'; }
.post-body details[open] summary, .entry-content details[open] summary { border-bottom: 1px solid var(--color-border); }
.faq-ans { padding: var(--space-4); font-size: 0.88rem; color: var(--color-fg-2); line-height: 1.7; }

/* Related Articles */
.related { max-width: 760px; margin-top: var(--space-12); padding-top: var(--space-7); border-top: 2px solid var(--tt-purple); }
.rel-h { font-size: 1.1rem; font-weight: 800; color: var(--tt-dark); margin-bottom: var(--space-5); letter-spacing: -0.01em; }
.related-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--space-4); }
.related-card { display: block; text-decoration: none !important; border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-4); background: var(--tt-white); transition: border-color .18s, box-shadow .18s; }
.related-card:hover { border-color: var(--tt-purple); box-shadow: 0 2px 12px rgba(99,97,170,.10); }
.rel-tag { font-size: 10px; font-weight: 800; letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--tt-purple); margin-bottom: var(--space-2); }
.rel-title { font-size: 0.9rem; font-weight: 700; color: var(--tt-dark); line-height: 1.4; margin-bottom: var(--space-2); }
.rel-date { font-size: 0.73rem; color: var(--color-fg-3); }

.single-post__comments { max-width: 760px; }

/* Single-post sidebar widgets (TOC / CTA / About / Tags) */
.blog-layout > .sidebar { position: sticky; top: var(--space-6); align-self: start; }
.sw { border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-5); background: var(--tt-white); margin-bottom: var(--space-5); }
.sw-title { font-size: var(--text-xs); font-weight: 800; letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--tt-dark); margin-bottom: var(--space-4); }
.toc-list { list-style: none; padding: 0; margin: 0; }
.toc-list li { padding: 5px 0; border-bottom: 1px solid var(--color-border); }
.toc-list li:last-child { border-bottom: none; }
.toc-list a { font-size: 0.82rem; color: var(--color-fg-2); text-decoration: none !important; display: block; }
.toc-list a:hover { color: var(--tt-purple); }
.toc-list a.sub { padding-left: var(--space-3); font-size: 0.77rem; color: var(--color-fg-3); }

.cta-widget { background: var(--tt-purple); border-radius: var(--radius-md); padding: var(--space-5); color: #fff; margin-bottom: var(--space-5); }
.cta-eye { display: flex; align-items: center; gap: var(--space-2); font-size: 10px; font-weight: 800; letter-spacing: var(--tracking-wider); text-transform: uppercase; opacity: .65; margin-bottom: var(--space-3); }
.cta-title { font-size: var(--text-base); font-weight: 800; color: #fff; margin-bottom: var(--space-2); line-height: 1.3; }
.cta-desc { font-size: 0.8rem; color: rgba(255,255,255,.8); margin-bottom: var(--space-4); line-height: 1.6; }

.tag-cloud { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: 4px; }
.tag-cloud .tag, .tag { font-size: 0.72rem; font-weight: 600; background: var(--tt-purple-10); color: var(--tt-purple-dark); border-radius: var(--radius-pill); padding: 3px 10px; text-decoration: none !important; }
a.tag:hover { background: var(--tt-purple-20); }

/* ── Sidebar / widgets ───────────────────────────────────────────────── */
/* Extra widgets a site owner adds via the "Blog Sidebar" widget area
   (Appearance → Widgets) render below the four built-in ones above and
   pick up the same card treatment automatically (register_sidebar()
   wraps each one in .widget.tt-card — see functions.php). */
.widget-area .widget { padding: var(--space-6); margin-bottom: var(--space-6); }
.widget-area .widget ul li { margin-bottom: var(--space-2); }

/* ── Comments ────────────────────────────────────────────────────────── */
.comments-area { max-width: 760px; margin-top: var(--space-16); }
.comment-list .comment { display: flex; gap: var(--space-4); padding: var(--space-6) 0; border-bottom: 1px solid var(--color-border); }
.comment-list .avatar { border-radius: 50%; }
.comment-form { padding: var(--space-8); margin-top: var(--space-8); }
.comment-form p { margin-bottom: var(--space-4); }
.comment-form input[type="text"], .comment-form input[type="email"], .comment-form input[type="url"], .comment-form textarea {
  width: 100%; border: 1px solid var(--color-border-strong); border-radius: var(--radius-md); padding: var(--space-3); font-family: inherit; font-size: var(--text-base);
}

/* ── Page content ────────────────────────────────────────────────────── */
.page-content__header { margin-bottom: var(--space-6); }
.page-content__thumb { margin-bottom: var(--space-8); border-radius: var(--radius-lg); overflow: hidden; }

/* ═══════════════════════════════════════════════════════════════════════
   Responsive
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 999px) {
  .footer__blocks { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 767px) {
  .page-width { padding: 0 var(--space-4); }
  .blog-layout { grid-template-columns: 1fr; padding: var(--space-8) var(--space-4) var(--space-12); }
  .related-grid { grid-template-columns: 1fr; }
  .category-banner { padding: var(--space-8) 0; }
  .footer__blocks { grid-template-columns: 1fr; gap: var(--space-8); }
  .footer__newsletter { flex-direction: column; align-items: flex-start; }
  .site-header__element--sub[data-type="nav"] { display: none; }
  .site-nav__dropdown { position: static; box-shadow: none; }
  .header-item--compress-nav { display: none; }
}

@media (min-width: 768px) {
  .site-header__drawer.medium-up--hide,
  .site-header__mobile-nav { display: none; }
}