/* style */
/* Thisai design system (4 Oct 2026)
   One set of fonts, corners, shadows and spacing on top of all the other Thisai snippets.
   Loads last in the header. Set Inactive to undo; nothing else depends on it. */

:root {
  --t-ink: #141418;
  --t-muted: #6b6875;
  --t-line: #e7e5e0;
  --t-soft: #f4f3f0;
  --t-accent: #ff6b3d;
  --t-accent-ink: #b8431c;
  --t-r-sm: 10px;   /* small icon buttons */
  --t-r-md: 12px;   /* thumbnails */
  --t-r-btn: 14px;  /* big buttons and tabs */
  --t-r-lg: 16px;   /* panels and boxes */
  --t-sh-1: 0 1px 2px rgba(20,20,24,.05), 0 2px 8px rgba(20,20,24,.05);
  --t-sh-2: 0 2px 4px rgba(20,20,24,.06), 0 12px 28px rgba(20,20,24,.10);
  --t-font: 'Plus Jakarta Sans', 'Noto Sans Tamil', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --t-gutter: clamp(16px, 3.5vw, 40px);
}

/* ---------- 1. One font family everywhere (admin bar left alone) ---------- */
html:root { --theme-font-family: var(--t-font); }
html body,
html body button, html body input, html body select, html body textarea,
html body small,
html body .bb-promo-card, html body .bb-promo-card *,
html body .thisai-ex-wa small, html body button.thisai-ex-report small,
html body .thisai-ex-report-note, html body .thisai-topbar-close,
html body .entry-content, html body .entry-excerpt, html body .page-description,
html body .ct-footer, html body .tbp-wrap, html body .tbp-pill {
  font-family: var(--t-font);
}
html body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
/* Headings: same family, firm weight, tight spacing */
html body h1, html body h2, html body h3, html body .page-title, html body .entry-title {
  font-family: var(--t-font);
  letter-spacing: -0.01em;
}

/* ---------- 2. Side margins: homepage content no longer touches the screen edge ---------- */
body.home .ct-container-full .entry-content.is-layout-constrained {
  padding-left: var(--t-gutter);
  padding-right: var(--t-gutter);
}

/* ---------- 3. Thumbnails: one corner size, flat ---------- */
html body .thisai-row-thumb,
html body .thisai-promo-more-art,
html body .ct-media-container,
html body .wp-block-post-featured-image,
html body .wp-block-post-featured-image img {
  border-radius: var(--t-r-md) !important;
}
html body .thisai-row-thumb { box-shadow: none !important; }

/* ---------- 4. Panels and boxes: one corner, one border, one shadow ---------- */
html body .thisai-ex-newest,
html body .thisai-ex-next,
html body a.thisai-epnav-prev,
html body a.thisai-epnav-next,
html body .seo-info-box,
html body aside.thisai-wach,
html body ol.thisai-today-list,
html body a.bb-promo-card {
  border-radius: var(--t-r-lg) !important;
  box-shadow: var(--t-sh-1) !important;
}
html body .thisai-ex-newest,
html body a.thisai-epnav-prev,
html body a.thisai-epnav-next,
html body .seo-info-box,
html body aside.thisai-wach,
html body ol.thisai-today-list {
  border: 1px solid var(--t-line) !important;
}
html body a.thisai-epnav-prev:hover,
html body a.thisai-epnav-next:hover { box-shadow: var(--t-sh-2) !important; }
html body .bb-promo-card-inner { border-radius: calc(var(--t-r-lg) - 2px) !important; }

/* ---------- 5. Big buttons and tabs: one corner size, soft shadows instead of glows ---------- */
html body a.thisai-days-older,
html body a.thisai-ex-wa,
html body button.thisai-ex-report,
html body a.thisai-ex-newest-btn,
html body .thisai-ex-next,
html body .bb-promo-cta,
html body button.thisai-days-tab,
html body button.thisai-today-tab {
  border-radius: var(--t-r-btn) !important;
}
html body a.thisai-days-older { box-shadow: 0 6px 16px -6px rgba(255,107,61,.55) !important; }
html body a.thisai-wach-btn { box-shadow: 0 4px 12px -4px rgba(37,211,102,.55) !important; }
html body .bb-promo-cta { box-shadow: 0 4px 12px -4px rgba(214,40,74,.5) !important; }
html body .thisai-promo-more-art { box-shadow: var(--t-sh-1) !important; }
/* "Video not working?" matches "Send to family": filled, no hard outline */
html body button.thisai-ex-report {
  background: var(--t-soft) !important;
  border: 1px solid var(--t-line) !important;
  color: var(--t-ink) !important;
}
html body button.thisai-ex-report[disabled] { border-color: #1a7f37 !important; color: #1a7f37 !important; background: #e6f4ea !important; }

/* ---------- 6. Episode page: no author name, quieter hero line ---------- */
body.single-post .entry-meta .meta-author,
body.single-post .entry-meta li.meta-author,
body.single-post .hero-section .ct-author-avatar,
body.single-post .entry-meta .ct-meta-element-author {
  display: none !important;
}


/* ---------- 8. Keyboard focus that is easy to see ---------- */
html body a:focus-visible,
html body button:focus-visible,
html body input:focus-visible,
html body select:focus-visible {
  outline: 3px solid var(--t-accent) !important;
  outline-offset: 2px !important;
}

/* ---------- 9. Category pill list on channel pages ---------- */
html body .tbp-heading { font-size: 17px; font-weight: 800; letter-spacing: -0.01em; color: var(--t-ink); }
html body .tbp-pill { padding: 8px 15px; font-size: 13.5px; border-color: var(--t-line); }

/* ---------- No Tamil labels (owner, 14 Oct 2026): every Tamil label is marked lang="ta". Show names, song titles and
   the pictures keep their Tamil. Delete this rule to bring the Tamil labels back. ---------- */
html body [lang="ta"] { display: none !important; }