/*
Theme Name: GER Theme
Theme URI: https://geroundtable.com/ger-theme/
Author: GER Theme
Author URI: https://geroundtable.com/
Description: GER Theme is an ultra-fast, lightweight WordPress magazine and publishing theme with a newsroom-style interface and an enterprise-grade, plugin-free native framework. Includes a 14-Tab Built-in Options Panel, modular front page, Schema.org JSON-LD (Article, BlogPosting, BreadcrumbList, Person, WebSite), author & fact-checker signals, Reading Progress Bar, Native Post Views, AJAX Live Search, In-Article Ad & Related Post Injector, Related Articles grid, Core Web Vitals Speed Engine, and Built-in Security Hardening.
Version: 10.0.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: GPL v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: tinyfaheem
Tags: news, blog, magazine, seo, dark-mode, custom-menu, custom-logo, featured-images, threaded-comments, translation-ready, grid-layout, three-columns
*/

:root {
  --tf-primary: #54BAB9;
  --tf-primary-strong: #2F6B6B; /* WCAG AA text teal (light mode) */
  --tf-primary-deep: #357F7E; /* background teal behind white text */
  --tf-primary-hover: #2F6B6B;
  --tf-primary-soft: rgba(84, 186, 185, 0.12);
  --tf-bg: #ffffff;
  --tf-bg-alt: #f8fafc;
  --tf-surface: #ffffff;
  --tf-text: #10201E;
  --tf-text-gray: #4b5563;
  --tf-text-muted: #6b7280;
  --tf-border: #e5e7eb;
  --tf-dark-gray: #333333;
  --tf-light-gray: #666666;
  --tf-search-gray: #2d2d2d;
  --tf-max-w: 1280px;
  --tf-sidebar-w: 380px;
  --tf-font: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

html.dark {
  --tf-primary-strong: #93DAD9; /* dark mode: light teal already passes on dark backgrounds */
  --tf-primary-deep: #357F7E;
  --tf-bg: #000000;
  --tf-bg-alt: #111111;
  --tf-surface: #121212;
  --tf-text: #f9fafb;
  --tf-text-gray: #d1d5db;
  --tf-text-muted: #9ca3af;
  --tf-border: #262626;
}

*, *::before, *::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  font-family: var(--tf-font);
  background-color: var(--tf-bg);
  color: var(--tf-text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  transition: background-color 0.2s ease, color 0.2s ease;
}

a {
  color: inherit;
  text-decoration: none;
  transition: color 0.15s ease;
}

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

img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Reading Position Progress Bar */
#tf-reading-progress {
  position: fixed;
  left: 0;
  top: 0;
  height: 4px;
  width: 0%;
  background: var(--tf-primary);
  z-index: 9999;
  transition: width 0.1s linear;
}
#tf-reading-progress.pos-bottom {
  top: auto;
  bottom: 0;
}

/* Accessibility Skip Link */
.skip-link {
  position: absolute;
  top: -100px;
  left: 1rem;
  background: var(--tf-primary-deep);
  color: #fff;
  padding: 0.5rem 1rem;
  z-index: 9999;
  border-radius: 0.375rem;
  font-weight: 700;
}
.skip-link:focus {
  top: 1rem;
}

/* Layout Wrapper (.lg-wrapper) */
.lg-wrapper {
  width: 100%;
  max-width: var(--tf-max-w);
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}

/* Top Breaking / Community Pulse Ticker Bar */
.tf-pulse-ticker {
  background: var(--tf-bg-alt);
  border-bottom: 1px solid var(--tf-border);
  font-size: 0.82rem;
  padding: 0.35rem 0;
}
.tf-pulse-ticker-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.tf-ticker-badge {
  background: var(--tf-primary-deep);
  color: #fff;
  padding: 0.15rem 0.55rem;
  border-radius: 0.25rem;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  flex-shrink: 0;
}

/* Header & Top Navigation */
.site-header {
  border-bottom: 2px solid var(--tf-border);
  background-color: var(--tf-bg);
  z-index: 70;
}
.site-header.is-sticky {
  position: sticky;
  top: 0;
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 5rem;
  gap: 1rem;
}

.brand-logo {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-weight: 700;
  font-size: 1.35rem;
  letter-spacing: -0.02em;
}

.brand-logo-mark {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 0.5rem;
  background: var(--tf-primary-deep);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 1.15rem;
  flex-shrink: 0;
}

.brand-subtitle {
  display: block;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--tf-primary-strong);
}

.top-nav-list {
  display: flex;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
}

.top-nav-list li {
  padding: 0 0.9rem;
  border-right: 2px solid var(--tf-border);
}

.top-nav-list li:last-child {
  border-right: none;
  padding-right: 0;
}

.top-nav-list a,
.top-nav-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--tf-text);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.25rem 0;
  font-family: inherit;
}

.top-nav-list a:hover,
.top-nav-btn:hover {
  color: var(--tf-primary);
}

.icon-primary {
  color: var(--tf-primary);
  width: 1.1rem;
  height: 1.1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.icon-primary svg {
  width: 100%;
  height: 100%;
  fill: currentColor;
}

.mobile-menu-trigger {
  display: none;
}

/* Off-Canvas Side Navigation (#sideNav) */
.side-nav-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 90;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.side-nav-backdrop.open {
  opacity: 1;
  pointer-events: auto;
}

#sideNav {
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  max-width: var(--tf-sidebar-w);
  height: 100vh;
  background-color: #000000;
  color: #ffffff;
  z-index: 100;
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  padding: 1.25rem 1.75rem 2.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}

#sideNav.open {
  transform: translateX(0);
}

.sidenav-close-bar {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  margin-bottom: 0.5rem;
}

.sidenav-close-btn {
  background: transparent;
  border: none;
  color: #ffffff;
  font-size: 1.5rem;
  cursor: pointer;
  padding: 0.25rem;
}

.pulse-box {
  background: #000000;
  color: #ffffff;
  border-radius: 0.5rem;
  padding: 1.25rem;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

html.dark .sidebar-pulse-box {
  background: #ffffff;
  color: #000000;
}

.pulse-heading {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.95rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0 0 1rem;
  text-align: left;
  max-width: 260px;
}

.social-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 1rem;
}

.social-pill {
  width: 2rem;
  height: 2rem;
  border-radius: 9999px;
  background: var(--tf-primary-deep);
  color: #ffffff !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.15s ease, background-color 0.15s ease;
}

.social-pill:hover {
  transform: translateY(-2px);
  background: var(--tf-primary-hover);
}

.social-pill svg {
  width: 0.95rem;
  height: 0.95rem;
  fill: currentColor;
}

.subscribe-inline-form,
.sidenav-search-form {
  display: flex;
  width: 100%;
  margin-top: 0.5rem;
}

.subscribe-inline-form input {
  flex: 1;
  padding: 0.55rem 0.75rem;
  border: 2px solid var(--tf-primary);
  border-right: none;
  border-radius: 0.5rem 0 0 0.5rem;
  font-size: 0.9rem;
  color: #000;
  background: #fff;
}

.subscribe-inline-form button {
  background: var(--tf-primary-deep);
  color: #fff;
  border: none;
  padding: 0.55rem 1rem;
  font-weight: 700;
  border-radius: 0 0.5rem 0.5rem 0;
  cursor: pointer;
}

.sidenav-search-form input {
  flex: 1;
  padding: 0.6rem 0.85rem;
  background: var(--tf-search-gray);
  border: 1px solid #444;
  border-right: none;
  color: #fff;
  border-radius: 0.5rem 0 0 0.5rem;
}

.sidenav-search-form input::placeholder {
  color: #d1d5db;
}

.sidenav-search-form button {
  background: var(--tf-search-gray);
  border: 1px solid #444;
  border-left: none;
  color: #fff;
  padding: 0.6rem 0.85rem;
  border-radius: 0 0.5rem 0.5rem 0;
  cursor: pointer;
}

/* AJAX Live Search Results Dropdown */
.tf-live-search-results {
  width: 100%;
  background: #171717;
  border: 1px solid #333;
  border-radius: 0.5rem;
  margin-top: 0.5rem;
  padding: 0.5rem;
  display: none;
}
.tf-live-search-results.active {
  display: block;
}

.browse-by-section {
  width: 100%;
  margin-top: 1.5rem;
}

.browse-by-title {
  color: var(--tf-primary);
  text-transform: uppercase;
  font-size: 1rem;
  font-weight: 700;
  margin: 0 0 0.5rem;
}

.browse-by-link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: #ffffff;
  padding: 0.65rem 0;
  border-bottom: 2px solid var(--tf-primary);
  font-size: 1.05rem;
}

.browse-by-link:last-child {
  border-bottom: none;
}

/* Mode Switcher in SideNav */
.mode-switcher-box {
  width: 100%;
  margin-top: 1.5rem;
  text-align: center;
}

.mode-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
  margin-top: 0.75rem;
}

.mode-btn {
  background: #171717;
  border: 1px solid #2e2e2e;
  border-radius: 0.5rem;
  padding: 0.65rem 0.35rem;
  color: #ffffff;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.72rem;
  text-transform: uppercase;
  font-weight: 600;
}

.mode-btn svg {
  width: 1.35rem;
  height: 1.35rem;
  fill: currentColor;
}

.mode-btn.active {
  color: var(--tf-primary);
  border-color: var(--tf-primary);
}

/* Ad Slots */
.billboard-slot {
  max-width: 970px;
  margin: 1.25rem auto 2rem;
  text-align: center;
}
.tf-ad-slot {
  margin: 1.5rem 0;
  text-align: center;
}

/* Featured Story Section (Hero Grid) */
.featured-section {
  margin-top: 1.5rem;
  margin-bottom: 2.25rem;
}

.featured-grid {
  display: grid;
  grid-template-columns: 1.15fr 1.15fr var(--tf-sidebar-w);
  gap: 1.75rem;
  align-items: start;
}

.featured-main {
  grid-column: 1 / 3;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 1.5rem;
}

.featured-headline {
  grid-column: 1 / -1;
  font-size: clamp(1.65rem, 2.6vw, 2.35rem);
  font-weight: 700;
  line-height: 1.2;
  margin: 0;
}

.featured-media img {
  width: 100%;
  border-radius: 0.5rem;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border: 1px solid var(--tf-border);
}

.featured-body {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.cat-kicker {
  display: inline-block;
  color: var(--tf-primary-strong);
  font-weight: 700;
  font-size: 0.92rem;
  margin-bottom: 0.35rem;
}

/* v4.0.5: category description under the archive title (SEO intro line) */
.cat-description {
  color: var(--tf-text-gray);
  font-size: 1.02rem;
  line-height: 1.65;
  max-width: 780px;
}

.cat-description p {
  margin: 0;
}

.excerpt-text {
  color: var(--tf-text-gray);
  font-size: 1.06rem;
  line-height: 1.7;
  margin: 0.35rem 0 1rem;
}

.post-meta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem;
  font-size: 0.875rem;
  color: var(--tf-text-muted);
}

.comment-count-link,
.views-count-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  color: var(--tf-text);
  font-weight: 600;
}
.views-count-badge.is-hot {
  color: #ef4444;
}

.author-byline {
  color: var(--tf-text);
  font-weight: 700;
}

/* Section Headers */
.section-divider-header {
  border-bottom: 2px solid var(--tf-border);
  margin-bottom: 1.75rem;
  padding-bottom: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.section-divider-header h2,
.section-divider-header h3 {
  font-size: 1.3rem;
  font-weight: 700;
  margin: 0;
}

/* Latest Articles 3-Column Grid + Highlight Widgets */
.articles-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.75rem;
  margin-bottom: 2.5rem;
}

.article-card {
  display: flex;
  flex-direction: column;
  padding-bottom: 1.25rem;
}

.article-card h2 {
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.35;
  margin: 0.15rem 0 0.65rem;
}

.article-card-thumb {
  margin-bottom: 0.75rem;
  overflow: hidden;
  border-radius: 0.375rem;
  border: 1px solid var(--tf-border);
}

.article-card-thumb img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  transition: transform 0.25s ease;
}

.article-card-thumb:hover img {
  transform: scale(1.02);
}

/* Green Border Feature Boxes */
.green-feature-box {
  border: 2px solid var(--tf-primary);
  border-radius: 0.5rem;
  padding: 1.5rem;
  background-color: var(--tf-surface);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.green-feature-box h2 {
  font-size: 1.45rem;
  font-weight: 700;
  margin: 0 0 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.action-bar-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.7rem 0.95rem;
  border-radius: 0.375rem;
  color: #ffffff !important;
  font-weight: 600;
  font-size: 0.95rem;
  margin-bottom: 0.6rem;
}

.action-bar-btn:last-child {
  margin-bottom: 0;
}

.action-bar-primary {
  background-color: var(--tf-primary-deep);
}

.action-bar-light-gray {
  background-color: var(--tf-light-gray);
}

.action-bar-dark-gray {
  background-color: var(--tf-dark-gray);
}

/* Archives + Picture of the Day Row */
.archives-potd-row {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 2rem;
  margin-bottom: 2.5rem;
  align-items: start;
}

.archives-mini-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}

.archive-mini-item {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-bottom: 2px solid var(--tf-border);
  padding-bottom: 0.65rem;
}

.archive-mini-item h4 {
  font-size: 1rem;
  font-weight: 500;
  margin: 0 0 0.5rem;
  line-height: 1.4;
}

.archive-mini-date {
  color: var(--tf-primary-strong);
  font-size: 0.88rem;
  font-weight: 600;
}

/* Breadcrumbs (Schema Ready) */
.tf-breadcrumbs {
  font-size: 0.875rem;
  color: var(--tf-text-muted);
  margin: 1rem 0 1.25rem;
  padding: 0.55rem 0.85rem;
  background: var(--tf-bg-alt);
  border-radius: 0.375rem;
  border-left: 3px solid var(--tf-primary);
}

.tf-breadcrumbs ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
}

.tf-breadcrumbs .bc-sep {
  margin: 0 0.25rem;
  color: var(--tf-primary);
  font-weight: 700;
}

/* v4.0.3: on phones the breadcrumb trail stays on ONE row — smaller type,
   no wrapping; the current-page crumb truncates with an ellipsis. */
@media (max-width: 768px) {
  .tf-breadcrumbs {
    font-size: 0.78rem;
    padding: 0.45rem 0.7rem;
    margin: 0.75rem 0 1rem;
  }
  .tf-breadcrumbs ol {
    flex-wrap: nowrap;
    overflow: hidden;
    gap: 0.3rem;
  }
  .tf-breadcrumbs li {
    flex: 0 0 auto;
    white-space: nowrap;
  }
  .tf-breadcrumbs li:last-child {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .tf-breadcrumbs .bc-sep {
    margin: 0 0.15rem;
  }
}

/* E-E-A-T Trust Bar & Author Credentials */
.eeat-trust-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 1.1rem;
  background: var(--tf-bg-alt);
  border: 1px solid var(--tf-border);
  border-radius: 0.5rem;
  margin: 1rem 0 1.5rem;
  font-size: 0.88rem;
}

.eeat-badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem;
}

.eeat-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.65rem;
  border-radius: 9999px;
  background: var(--tf-primary-soft);
  color: var(--tf-primary-strong);
  font-weight: 700;
  font-size: 0.78rem;
}

/* v4.0.4: on phones, pack the trust bar — the meta row and the badges group
   dissolve (display:contents) so By / date / Filed Under / Human Verified /
   views / comments flow as single items and the badge, views and comments
   sit right after "Filed Under" instead of taking a whole new row. */
@media (max-width: 768px) {
  .eeat-trust-bar {
    justify-content: flex-start;
    gap: 0.45rem 0.6rem;
    padding: 0.7rem 0.85rem;
    font-size: 0.82rem;
    color: var(--tf-text-muted);
  }
  .eeat-trust-bar .post-meta-row,
  .eeat-trust-bar .eeat-badges {
    display: contents;
  }
  .eeat-badge {
    font-size: 0.74rem;
    padding: 0.2rem 0.55rem;
  }
}

/* Auto Table of Contents */
.tf-toc {
  background: var(--tf-bg-alt);
  border: 1px solid var(--tf-border);
  border-left: 4px solid var(--tf-primary);
  border-radius: 0.5rem;
  padding: 1rem 1.25rem;
  margin: 1.5rem 0;
}

.tf-toc-title {
  font-weight: 700;
  font-size: 1rem;
  margin: 0 0 0.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  /* v6.0.0: the title is a <button> (keyboard accessible) — reset UA styles. */
  background: none;
  border: 0;
  padding: 0;
  width: 100%;
  font-family: inherit;
  color: inherit;
  text-align: left;
}

.tf-toc ol {
  margin: 0.5rem 0 0;
  padding-left: 1.25rem;
  font-size: 0.92rem;
}

.tf-toc li {
  margin-bottom: 0.3rem;
}

/* Single Article Layout & Typography */
.single-layout-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--tf-sidebar-w);
  gap: 2.5rem;
  margin-bottom: 3rem;
  align-items: start;
}

.entry-content {
  font-size: 1.1rem;
  line-height: 1.8;
  color: var(--tf-text);
}

/* Optional Drop Cap (Post Setting) */
.entry-content.has-dropcap > p:first-of-type::first-letter {
  float: left;
  font-size: 3.4rem;
  line-height: 0.85;
  padding-right: 0.6rem;
  padding-top: 0.15rem;
  font-weight: 800;
  color: var(--tf-primary);
}

.entry-content h2,
.entry-content h3 {
  margin-top: 1.85rem;
  margin-bottom: 0.75rem;
  line-height: 1.3;
}

.entry-content blockquote {
  border-left: 4px solid var(--tf-primary);
  background: var(--tf-bg-alt);
  margin: 1.5rem 0;
  padding: 1rem 1.25rem;
  border-radius: 0 0.5rem 0.5rem 0;
  font-style: italic;
}

/* Inline Read Also / Related Box */
.tf-inline-related {
  border: 1px solid var(--tf-border);
  border-left: 4px solid var(--tf-primary);
  background: var(--tf-bg-alt);
  padding: 1rem 1.25rem;
  border-radius: 0.5rem;
  margin: 1.5rem 0;
}
.tf-inline-related-label {
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--tf-primary-strong);
  letter-spacing: 0.05em;
  display: block;
  margin-bottom: 0.35rem;
}

/* Source / Via Citation Pills & Shortlink Bar */
.tf-source-via-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--tf-border);
}
.tf-source-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.75rem;
  border-radius: 0.375rem;
  background: var(--tf-bg-alt);
  border: 1px solid var(--tf-border);
  font-size: 0.85rem;
  font-weight: 600;
}
.tf-shortlink-btn {
  background: var(--tf-bg-alt);
  border: 1px solid var(--tf-border);
  color: var(--tf-text);
  padding: 0.35rem 0.75rem;
  border-radius: 0.375rem;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
}

/* E-E-A-T Author Bio Box */
.eeat-author-box {
  border: 2px solid var(--tf-primary);
  border-radius: 0.5rem;
  padding: 1.5rem;
  background: var(--tf-bg-alt);
  margin: 2.25rem 0;
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: 1.25rem;
  align-items: start;
}

.eeat-author-avatar {
  width: 88px;
  height: 88px;
  border-radius: 9999px;
  object-fit: cover;
  border: 3px solid var(--tf-primary);
}

.eeat-author-role {
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--tf-primary-strong);
  letter-spacing: 0.04em;
}

.eeat-author-credentials {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.65rem;
}

.eeat-cred-tag {
  font-size: 0.78rem;
  padding: 0.2rem 0.55rem;
  border-radius: 0.25rem;
  background: var(--tf-surface);
  border: 1px solid var(--tf-border);
  font-weight: 600;
}

/* Next / Prev Post Navigation */
.tf-post-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin: 2rem 0;
}
.tf-post-nav-card {
  padding: 1rem;
  border: 1px solid var(--tf-border);
  border-radius: 0.5rem;
  background: var(--tf-bg-alt);
}

/* Google News Preferred Source Badge Row */
.google-news-strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  margin: 1.5rem auto 2rem;
}

.gnews-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 1.1rem;
  border-radius: 0.5rem;
  border: 1px solid var(--tf-border);
  background: var(--tf-bg-alt);
  font-weight: 700;
  font-size: 0.9rem;
}

/* Footer */
.site-footer {
  border-top: 2px solid var(--tf-border);
  margin-top: 2rem;
  padding-top: 1.5rem;
  padding-bottom: 2.5rem;
}

.footer-top-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  border-bottom: 2px solid var(--tf-border);
  padding-bottom: 1rem;
  margin-bottom: 1.25rem;
  gap: 1rem;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.9rem;
  color: var(--tf-text-muted);
}

.footer-legal {
  text-align: center;
  font-size: 0.86rem;
  color: var(--tf-text-muted);
  line-height: 1.8;
}

.footer-legal a {
  text-decoration: underline;
}

/* Pagination */
.tf-pagination {
  display: flex;
  gap: 0.5rem;
  margin: 2rem 0;
  flex-wrap: wrap;
}

.tf-pagination .page-numbers {
  padding: 0.5rem 0.9rem;
  border: 1px solid var(--tf-border);
  border-radius: 0.375rem;
  font-weight: 600;
}

.tf-pagination .page-numbers.current {
  background: var(--tf-primary-deep);
  color: #fff;
  border-color: var(--tf-primary);
}

/* Responsive Breakpoints */
@media (max-width: 1100px) {
  .featured-grid,
  .single-layout-grid,
  .archives-potd-row {
    grid-template-columns: 1fr;
  }
  .featured-main {
    grid-column: 1 / -1;
  }
  .articles-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .top-nav-desktop {
    display: none;
  }
  .mobile-menu-trigger {
    display: block;
  }
  .featured-main,
  .articles-grid,
  .archives-mini-grid,
  .tf-post-nav {
    grid-template-columns: 1fr;
  }
  .eeat-author-box {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .eeat-author-avatar {
    margin: 0 auto;
  }
  .eeat-author-credentials {
    justify-content: center;
  }
}


/* ==========================================================================
   21-Plugin Compatibility & Co-Existence Rules (Zero Function Reduction)
   - SVG Support (`img.style-svg`), MathJax-LaTeX (`mjx-container`),
     wpDataTables (`.wpdt-c`, `.wpDataTable`), Monarch (`.et_social_inline`),
     Ad Inserter (`.code-block`), Elementor (`.elementor-page`)
   ========================================================================== */
img.style-svg, svg.style-svg {
  display: inline-block;
  vertical-align: middle;
}
mjx-container, .MathJax, .MathJax_Display {
  overflow-x: auto;
  overflow-y: hidden;
  max-width: 100%;
}
.wpdt-c, .wpDataTablesWrapper {
  max-width: 100%;
  overflow-x: auto;
  margin: 1.5rem 0;
}
.code-block {
  margin: 1.25rem auto;
  text-align: center;
}

/* v3.1 additions */
.tf-adblock-notice { position:fixed; left:50%; transform:translateX(-50%); bottom:1rem; z-index:9999; max-width:92vw; background:#10201E; color:#fff; padding:0.8rem 1rem; border-radius:0.5rem; border-left:4px solid var(--tf-primary); align-items:center; gap:1rem; box-shadow:0 8px 30px rgba(0,0,0,.35); font-size:.9rem; }
.tf-adblock-notice button { background:none; border:none; color:#fff; font-size:1.2rem; cursor:pointer; }
.browse-by-menu { list-style:none; margin:0; padding:0; }
.browse-by-menu li a { display:flex; gap:.75rem; align-items:center; padding:.6rem 0; color:#fff; border-bottom:2px solid var(--tf-primary); font-size:1.05rem; }
.tf-toc-title { cursor:pointer; }

/* v3.1.3: styled internal links (Tab 4 toggle: post_internal_link_style) */
.entry-content a.tf-int-link {
  color: var(--tf-primary-strong);
  font-weight: 700;
  text-decoration-line: underline;
  text-decoration-color: rgba(84, 186, 185, 0.45);
  text-decoration-color: color-mix(in srgb, var(--tf-primary) 45%, transparent);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
.entry-content a.tf-int-link:hover {
  text-decoration-color: var(--tf-primary-strong);
}

/* v3.1.3: mobile responsiveness repair (live audit 2026-10-17, ~375px iPhone).
   Root cause: grid/flex children could not shrink below their content size,
   so the fixed-width subscribe/search form rows forced whole columns — and
   the page — wider than the phone screen (horizontal scroll, clipped UI). */
body { overflow-x: hidden; overflow-x: clip; }
.featured-grid > *, .single-layout-grid > *, .articles-grid > *, .archives-potd-row > * { min-width: 0; }
.subscribe-inline-form input, .sidenav-search-form input { min-width: 0; }
.entry-content { overflow-wrap: break-word; }
.entry-content pre { overflow-x: auto; max-width: 100%; }
.entry-content iframe, .entry-content video, .entry-content embed { max-width: 100%; }

@media (max-width: 1100px) {
  .featured-grid, .single-layout-grid, .archives-potd-row { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 768px) {
  #sideNav { max-width: 92vw; }
  .subscribe-inline-form { flex-wrap: wrap; }
  .subscribe-inline-form input { flex: 1 1 150px; font-size: 1rem; }
  .sidenav-search-form input { font-size: 1rem; }
  .tf-pulse-ticker-inner > div { min-width: 0; overflow: hidden; }
}

@media (max-width: 600px) {
  .tf-pulse-ticker-inner > span { display: none; }
  .subscribe-inline-form input { flex-basis: 100%; border-right: 2px solid var(--tf-primary); border-radius: 0.5rem; margin-bottom: 0.5rem; }
  .subscribe-inline-form button { width: 100%; border-radius: 0.5rem; }
}

/* v3.1.5: "Filed Under" category line inside the article meta box (SER style) */
.post-filed-under { margin-top: 0.4rem; font-size: 0.95rem; }
.post-filed-under a { font-weight: 700; text-decoration: underline; color: var(--tf-text); }

/* v3.1.9: links inside the article meta bar use the theme colour */
.eeat-trust-bar a { color: var(--tf-primary-strong); }
.eeat-trust-bar .post-filed-under a { color: var(--tf-primary-strong); }
.eeat-trust-bar a:hover { text-decoration: underline; }

/* v3.1.11: meta bar = one evenly spaced row; Filed Under sits inline in the meta row */
.eeat-trust-bar { gap: 0.5rem 1.25rem; }
.post-filed-under { margin: 0; font-size: inherit; white-space: nowrap; }

/* v3.1.12: prose links inside article content are visibly underlined.
   The base theme style removes underlines from all anchors, which left
   external content links indistinguishable from plain text. Internal
   links keep their bold + theme colour + soft shaded underline above. */
.entry-content p a,
.entry-content li a,
.entry-content blockquote a,
.entry-content td a,
.entry-content figcaption a {
  text-decoration-line: underline;
  text-underline-offset: 3px;
}
.entry-content .tf-toc a,
.entry-content a:has(img) { text-decoration: none; }

/* v3.1.15: tighter meta bar packing on phones (less height, even rhythm) */
@media (max-width: 768px) {
  .eeat-trust-bar { padding: 0.65rem 0.8rem; gap: 0.35rem 0.6rem; font-size: 0.82rem; margin: 0.75rem 0 1rem; }
  .post-meta-row { gap: 0.45rem; font-size: 0.82rem; }
  .eeat-badges { gap: 0.45rem; }
}

/* ===== GER Comments (v6.4.1) =====
   SER-style discussion system on native WordPress comments (Tab 12).
   Colours come only from the theme variables so dark mode (html.dark)
   works automatically; the one exception is the white text that sits on
   coloured surfaces, matching the rest of the theme. */
.tf-pinned-wrap .tf-badge-pin { display: none; }
.tf-comments { margin-top: 2.5rem; border-top: 2px solid var(--tf-border); padding-top: 1.5rem; }
.tf-comments-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.6rem 1rem; margin-bottom: 1rem; }
.tf-comments-title { font-size: 1.35rem; margin: 0; color: var(--tf-text); }
.tf-sort-links a { margin-left: 0.6rem; font-size: 0.85rem; color: var(--tf-primary-strong); }

/* Composer (native comment_form, restyled) */
.tf-comments #respond { margin-bottom: 1.75rem; }
.tf-comments .comment-reply-title { font-size: 1.05rem; margin: 0 0 0.6rem; }
.tf-comments .comment-form label { font-size: 0.85rem; font-weight: 600; color: var(--tf-text-gray); }
.tf-comments .comment-form textarea,
.tf-comments .comment-form input[type="text"],
.tf-comments .comment-form input[type="email"],
.tf-comments .comment-form input[type="url"] { width: 100%; box-sizing: border-box; background: var(--tf-surface); color: var(--tf-text); border: 1px solid var(--tf-border); border-radius: 0.5rem; padding: 0.6rem 0.75rem; font: inherit; font-size: 0.95rem; }
.tf-comments .comment-form textarea:focus,
.tf-comments .comment-form input:focus { outline: 2px solid var(--tf-primary); outline-offset: 0; }
.tf-comments .comment-form p { margin: 0 0 0.7rem; }
.tf-comments .comment-form-tf-notify label { display: inline-flex; align-items: center; gap: 0.45rem; font-weight: 400; cursor: pointer; }
.tf-comments .form-submit .submit { background: var(--tf-primary-deep); color: #fff; border: none; border-radius: 0.5rem; padding: 0.6rem 1.4rem; font-weight: 700; font-size: 0.92rem; cursor: pointer; }
.tf-comments .form-submit .submit:hover { background: var(--tf-primary-hover); }
.tf-comments .no-comments { color: var(--tf-text-muted); font-style: italic; }

/* Thread list */
.tf-comment-list,
.tf-comments ul.children { list-style: none; padding: 0; margin: 0; }
.tf-comments ul.children { margin-left: 1.4rem; padding-left: 1.1rem; border-left: 2px solid var(--tf-border); }
.tf-comments ul.children.tf-flat { margin-left: 0; padding-left: 0; border-left: none; }
.tf-comments li.tf-flat { margin-left: 0; }
.tf-comment { display: flex; gap: 0.75rem; padding: 1rem 0; border-bottom: 1px solid var(--tf-border); }
.tf-comment-list > li:last-child > .tf-comment { border-bottom: none; }
.tf-cavatar { flex: 0 0 40px; width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 1.05rem; line-height: 1; }
.tf-comment-main { flex: 1 1 auto; min-width: 0; }
.tf-comment-head { display: flex; align-items: center; flex-wrap: wrap; gap: 0.3rem 0.55rem; margin-bottom: 0.3rem; font-size: 0.88rem; }
.tf-cauthor { font-weight: 700; color: var(--tf-text); text-decoration: none; }
a.tf-cauthor:hover { color: var(--tf-primary-strong); }
.tf-reply-to { color: var(--tf-primary-strong); font-size: 0.8rem; font-weight: 600; text-decoration: none; }
.tf-reply-to:hover { text-decoration: underline; }
.tf-ctime { color: var(--tf-text-muted); font-size: 0.8rem; }
.tf-badge { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.02em; padding: 0.12rem 0.5rem; border-radius: 999px; text-transform: uppercase; }
.tf-badge-pin { background: var(--tf-primary-deep); color: #fff; }
.tf-badge-editor { background: transparent; color: var(--tf-primary-strong); border: 1px solid var(--tf-primary-strong); }
.tf-comment-text { color: var(--tf-text); font-size: 0.95rem; line-height: 1.55; overflow-wrap: break-word; }
.tf-comment-text p { margin: 0 0 0.6rem; }
.tf-comment-text p:last-child { margin-bottom: 0; }

/* Actions row */
.tf-comment-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 0.4rem 1rem; margin-top: 0.45rem; font-size: 0.8rem; color: var(--tf-text-muted); }
.tf-comment-actions a { color: var(--tf-text-muted); font-weight: 600; text-decoration: none; }
.tf-comment-actions a:hover { color: var(--tf-primary-strong); }
.tf-votes { display: inline-flex; gap: 0.3rem; }
.tf-vote { background: var(--tf-bg-alt); border: 1px solid var(--tf-border); color: var(--tf-text-gray); border-radius: 999px; padding: 0.14rem 0.6rem; font-size: 0.78rem; cursor: pointer; }
.tf-vote b { font-weight: 700; }
.tf-vote:hover { color: var(--tf-primary-strong); border-color: var(--tf-primary); }
.tf-vote[data-vote="1"][aria-pressed="true"] { background: var(--tf-primary-deep); border-color: var(--tf-primary-deep); color: #fff; }
.tf-vote[data-vote="-1"][aria-pressed="true"] { background: var(--tf-dark-gray); border-color: var(--tf-dark-gray); color: #fff; }
.tf-creport,
.tf-cpin { background: none; border: none; padding: 0; font-size: 0.8rem; font-weight: 600; color: var(--tf-text-muted); cursor: pointer; }
.tf-creport:hover,
.tf-cpin:hover { color: var(--tf-primary-strong); }
.tf-creport[disabled] { color: var(--tf-text-muted); cursor: default; opacity: 0.7; }
.tf-review-note { font-size: 0.8rem; color: var(--tf-text-muted); font-style: italic; }

/* Collapsed deep threads + pinned block */
.tf-comments ul.tf-collapsed { display: none; }
.tf-comments ul.tf-collapsed.tf-expanded { display: block; }
.tf-view-replies { background: none; border: none; padding: 0.35rem 0; margin-left: 3.4rem; font-size: 0.82rem; font-weight: 700; color: var(--tf-primary-strong); cursor: pointer; }
.tf-view-replies:hover { text-decoration: underline; }
.tf-pinned-wrap { background: var(--tf-primary-soft); border: 1px solid var(--tf-border); border-radius: 0.6rem; padding: 0.4rem 1rem 0.6rem; margin-bottom: 1.25rem; }
.tf-pinned-heading { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--tf-primary-strong); margin: 0.6rem 0 0; }
.tf-pinned-wrap .tf-comment { border-bottom: none; }

/* Load more */
#tf-load-more { display: block; width: 100%; margin-top: 1.25rem; background: var(--tf-surface); color: var(--tf-primary-strong); border: 1.5px solid var(--tf-primary); border-radius: 0.5rem; padding: 0.7rem 1rem; font-weight: 700; font-size: 0.92rem; cursor: pointer; }
#tf-load-more:hover { background: var(--tf-primary-soft); }
#tf-load-more[disabled] { opacity: 0.6; cursor: wait; }

@media (max-width: 640px) {
  .tf-cavatar { flex-basis: 32px; width: 32px; height: 32px; font-size: 0.9rem; }
  .tf-comment { gap: 0.55rem; }
  .tf-comments ul.children { margin-left: 0.6rem; padding-left: 0.7rem; }
  .tf-view-replies { margin-left: 2.4rem; }
  .tf-comments-head { flex-direction: column; align-items: flex-start; }
  .tf-pinned-wrap { padding: 0.3rem 0.7rem 0.5rem; }
}

/* ===== GER Comments additions (v6.4.1) =====
   Tier-1 features: expand-on-focus composer, new-since-visit dots,
   Top Regular badge, Auto Top Take, parent preview popup, per-branch
   collapse and the sticky mobile discussion pill. Same variable-only
   colour rule as the section above. */

/* Expand-on-focus composer: the compact class is added by JS only, so
   a no-JS render always shows the full form. */
.tf-comments .comment-form textarea.tf-composer { transition: height 0.25s ease; }
.tf-comments #respond.tf-composer-compact textarea.tf-composer { height: 2.9rem; min-height: 0; resize: none; overflow: hidden; }
.tf-comments #respond.tf-composer-compact .comment-notes,
.tf-comments #respond.tf-composer-compact .logged-in-as,
.tf-comments #respond.tf-composer-compact .comment-form-author,
.tf-comments #respond.tf-composer-compact .comment-form-email,
.tf-comments #respond.tf-composer-compact .comment-form-url,
.tf-comments #respond.tf-composer-compact .comment-form-tf-notify,
.tf-comments #respond.tf-composer-compact .comment-form-cookies-consent,
.tf-comments #respond.tf-composer-compact .form-submit { display: none; }
.tf-comments #respond.tf-composer-open .comment-form-author,
.tf-comments #respond.tf-composer-open .comment-form-email,
.tf-comments #respond.tf-composer-open .comment-form-url,
.tf-comments #respond.tf-composer-open .comment-form-tf-notify,
.tf-comments #respond.tf-composer-open .comment-form-cookies-consent,
.tf-comments #respond.tf-composer-open .form-submit { animation: tf-composer-in 0.3s ease; }
@keyframes tf-composer-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* "New since your last visit": accent edge + green dot by the time. */
.tf-comments .tf-comment.tf-is-new { box-shadow: inset 3px 0 0 var(--tf-primary); }
.tf-comments .tf-comment.tf-is-new .tf-ctime::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--tf-primary); margin-right: 0.35rem; vertical-align: 1px; }

/* Top Regular badge */
.tf-badge-regular { background: var(--tf-bg-alt); color: var(--tf-primary-strong); border: 1px solid var(--tf-primary); }

/* Auto Top Take wrap (mirrors the Editor's Pick wrap) */
.tf-toptake-wrap { background: var(--tf-primary-soft); border: 1px solid var(--tf-border); border-radius: 0.6rem; padding: 0.4rem 1rem 0.6rem; margin-bottom: 1.25rem; }
.tf-toptake-wrap .tf-comment { border-bottom: none; }

/* Parent preview popup (element is created by JS, fixed-positioned) */
.tf-parent-preview { position: fixed; z-index: 1000; width: 320px; max-width: calc(100vw - 16px); box-sizing: border-box; background: var(--tf-surface); border: 1px solid var(--tf-border); border-radius: 0.6rem; box-shadow: 0 8px 28px rgba(0, 0, 0, 0.18); padding: 0.7rem 0.85rem; display: none; }
.tf-parent-preview-head { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.35rem; }
.tf-parent-preview-head .tf-cavatar { flex-basis: 28px; width: 28px; height: 28px; font-size: 0.8rem; }
.tf-parent-preview-name { font-weight: 700; font-size: 0.88rem; color: var(--tf-text); }
.tf-parent-preview-text { margin: 0; font-size: 0.85rem; line-height: 1.45; color: var(--tf-text-gray); }

/* Per-branch collapse */
.tf-comments ul.children.tf-branch-closed { display: none; }
.tf-branch-toggle { background: none; border: none; padding: 0; font-size: 0.8rem; font-weight: 600; color: var(--tf-text-muted); cursor: pointer; }
.tf-branch-toggle:hover { color: var(--tf-primary-strong); }

/* Sticky mobile discussion pill: mobile only, JS toggles visibility. */
.tf-discussion-pill { display: none; }
@media (max-width: 768px) {
  .tf-discussion-pill { display: block; position: fixed; left: 50%; transform: translateX(-50%); bottom: 1rem; z-index: 999; background: var(--tf-primary-deep); color: #fff; border: none; border-radius: 999px; padding: 0.65rem 1.3rem; font-weight: 700; font-size: 0.9rem; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25); cursor: pointer; transition: opacity 0.25s ease, transform 0.25s ease; }
  .tf-discussion-pill.tf-pill-hide { opacity: 0; pointer-events: none; transform: translateX(-50%) translateY(8px); }
  .tf-toptake-wrap { padding: 0.3rem 0.7rem 0.5rem; }
}

/* ===== GER Comments additions (v6.4.1) =====
   SERP signal tags + composer picker, Community SERP Pulse bar, signal
   filter chips, Bento spotlight pairing, quote-selection and the report
   feedback notes. Same variable-only colour rule as the sections above;
   the four signal accents are fixed hues (red / green / amber / blue)
   with lighter dark-mode variants. */

/* Signal tag pill on a comment */
.tf-signal { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.01em; padding: 0.14rem 0.55rem; border-radius: 999px; border: 1px solid var(--tf-border); background: var(--tf-bg-alt); color: var(--tf-text-gray); white-space: nowrap; }
.tf-signal-drop { border-color: #dc2626; color: #dc2626; }
.tf-signal-gain { border-color: var(--tf-primary-deep); color: var(--tf-primary-strong); }
.tf-signal-bug { border-color: #d97706; color: #d97706; }
.tf-signal-take { border-color: #2563eb; color: #2563eb; }
html.dark .tf-signal-drop { border-color: #f87171; color: #f87171; }
html.dark .tf-signal-bug { border-color: #fbbf24; color: #fbbf24; }
html.dark .tf-signal-take { border-color: #60a5fa; color: #60a5fa; }

/* Composer signal picker (radio pills inside the comment form) */
.tf-comments .comment-form-tf-signal { margin: 0 0 0.7rem; }
.tf-signal-label { display: block; font-size: 0.85rem; font-weight: 600; color: var(--tf-text-gray); margin-bottom: 0.4rem; }
.tf-signal-picker { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.tf-signal-choice { position: relative; display: inline-flex; align-items: center; padding: 0.32rem 0.8rem; border: 1px solid var(--tf-border); border-radius: 999px; background: var(--tf-bg-alt); color: var(--tf-text-gray); font-size: 0.82rem; font-weight: 600; cursor: pointer; }
.tf-signal-choice:hover { border-color: var(--tf-primary); color: var(--tf-primary-strong); }
.tf-signal-choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.tf-signal-choice:has(> input:checked) { background: var(--tf-primary-deep); border-color: var(--tf-primary-deep); color: #fff; }
.tf-signal-choice:has(> input:focus-visible) { outline: 2px solid var(--tf-primary); outline-offset: 2px; }
.tf-signal-choice-drop:has(> input:checked) { background: #dc2626; border-color: #dc2626; }
.tf-signal-choice-bug:has(> input:checked) { background: #d97706; border-color: #d97706; }
.tf-signal-choice-take:has(> input:checked) { background: #2563eb; border-color: #2563eb; }

/* The picker folds away with the rest of the compact composer. */
.tf-comments #respond.tf-composer-compact .comment-form-tf-signal { display: none; }
.tf-comments #respond.tf-composer-open .comment-form-tf-signal { animation: tf-composer-in 0.3s ease; }

/* Signal filter chips (beside the sort bar) */
.tf-filter-bar { display: inline-flex; gap: 0.35rem; flex-wrap: wrap; }
.tf-filter-chip { background: var(--tf-surface); color: var(--tf-text-gray); border: 1px solid var(--tf-border); border-radius: 999px; padding: 0.3rem 0.8rem; font-size: 0.82rem; font-weight: 600; cursor: pointer; }
.tf-filter-chip:hover { color: var(--tf-primary-strong); border-color: var(--tf-primary); }
.tf-filter-chip.is-active { background: var(--tf-primary-deep); border-color: var(--tf-primary-deep); color: #fff; }
.tf-filter-chip-drop.is-active { background: #dc2626; border-color: #dc2626; }
.tf-filter-chip-bug.is-active { background: #d97706; border-color: #d97706; }
.tf-filter-chip-take.is-active { background: #2563eb; border-color: #2563eb; }

/* Community SERP Pulse bar */
.tf-pulse { background: var(--tf-primary-soft); border: 1px solid var(--tf-border); border-radius: 0.6rem; padding: 0.8rem 1rem 0.9rem; margin-bottom: 1.5rem; }
.tf-pulse-heading { font-size: 0.82rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--tf-primary-strong); margin: 0 0 0.55rem; }
.tf-pulse-bar { display: flex; gap: 2px; height: 0.55rem; border-radius: 999px; overflow: hidden; background: var(--tf-bg-alt); }
.tf-pulse-seg { display: block; height: 100%; }
.tf-pulse-seg-drop { background: #dc2626; }
.tf-pulse-seg-gain { background: var(--tf-primary-deep); }
.tf-pulse-seg-bug { background: #d97706; }
.tf-pulse-seg-take { background: #2563eb; }
html.dark .tf-pulse-seg-drop { background: #f87171; }
html.dark .tf-pulse-seg-bug { background: #fbbf24; }
html.dark .tf-pulse-seg-take { background: #60a5fa; }
.tf-pulse-legend { margin: 0.55rem 0 0; font-size: 0.85rem; font-weight: 600; color: var(--tf-text-gray); }

/* Bento spotlight pairing: Editor's Pick + Top Take side by side. */
.tf-spotlight-grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem; margin-bottom: 1.25rem; align-items: stretch; } /* v6.4.1: cards stretch to equal width + height */
.tf-spotlight-grid .tf-pinned-wrap,
.tf-spotlight-grid .tf-toptake-wrap { margin-bottom: 0; }
@media (min-width: 769px) {
  .tf-spotlight-grid { grid-template-columns: 1fr 1fr; }
}

/* Report feedback (v6.4.1): replaces / accompanies the Report button. */
.tf-reported-note { font-size: 0.8rem; font-weight: 600; color: var(--tf-primary-strong); }
.tf-report-hint { font-size: 0.8rem; font-weight: 600; color: #dc2626; }
html.dark .tf-report-hint { color: #f87171; }

/* Quote-selection floating button (element is created by JS). */
.tf-quote-btn { position: absolute; z-index: 1001; display: none; background: var(--tf-primary-deep); color: #fff; border: none; border-radius: 999px; padding: 0.42rem 0.95rem; font-size: 0.82rem; font-weight: 700; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25); cursor: pointer; }
.tf-quote-btn:hover { background: var(--tf-primary-hover); }

/* ===== Privacy Embeds (v6.4.1) =====
   Click-to-load consent gates for X / YouTube embeds (Tab 13). The
   placeholder card makes zero external requests; theme.js injects the
   real embed from the card's <template> only after a click (or on
   later visits when the reader chose "Always show external content").
   Provider accent colours are fixed (X blue / YouTube red); everything
   else comes from the theme variables so dark mode works as-is. */
.tf-embed { position: relative; margin: 1.5rem 0; padding: 1.15rem 1.25rem; background: var(--tf-bg-alt); border: 1px solid var(--tf-border); border-radius: 12px; }
.tf-embed-x { border-left: 4px solid #1d9bf0; }
.tf-embed-youtube { border-left: 4px solid #ff0000; }
.tf-embed-x .tf-embed-body::before { content: '❝'; display: block; font-size: 2rem; line-height: 1; color: #1d9bf0; margin-bottom: 0.35rem; }
.tf-embed-body blockquote { margin: 0; padding: 0; border: 0; background: none; box-shadow: none; font-size: 1rem; line-height: 1.65; color: var(--tf-text-gray); }
.tf-embed-body blockquote p { margin: 0 0 0.5rem; }
.tf-embed-body blockquote p:last-child { margin-bottom: 0; }
.tf-embed-body blockquote a { color: var(--tf-primary-strong); }
.tf-embed-yt { display: flex; align-items: center; gap: 1rem; }
.tf-embed-play { flex: 0 0 auto; position: relative; width: 52px; height: 36px; border-radius: 9px; background: #ff0000; }
.tf-embed-play::after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-40%, -50%); border-style: solid; border-width: 7px 0 7px 12px; border-color: transparent transparent transparent #fff; }
.tf-embed-title { margin: 0; font-weight: 700; line-height: 1.4; color: var(--tf-text); }
.tf-embed-source { margin: 0.2rem 0 0; font-size: 0.85rem; color: var(--tf-text-muted); }
.tf-embed-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1rem; }
.tf-embed-show, .tf-embed-always { appearance: none; background: #10201E; border: 1px solid #10201E; color: #fff; border-radius: 8px; padding: 0.62rem 1.15rem; font-size: 0.88rem; font-weight: 700; letter-spacing: 0.02em; cursor: pointer; transition: background 0.15s, border-color 0.15s; }
.tf-embed-show:hover, .tf-embed-always:hover { background: #1f2937; border-color: #1f2937; }
html.dark .tf-embed-show, html.dark .tf-embed-always { border-color: #374151; }
.tf-embed-note { margin: 0.75rem 0 0; font-size: 0.8rem; color: var(--tf-text-muted); }
.tf-embed-note a { color: var(--tf-primary-strong); }
.tf-embed-live { padding: 0; border: 0; background: none; border-radius: 0; }
.tf-embed-live iframe { max-width: 100%; }

/* ===== Fancy Card Composer (v6.4.1) =====
   The approved card design for the comment form (Tab 12 → "Fancy Card
   Composer"). #respond itself carries the card (PHP sets the core
   class_container arg to add .tf-composer-card), so every rule below
   is scoped to #respond.tf-composer-card: with the toggle off none of
   this exists and the form renders exactly as before. Variable-only
   colours, like the sections above. */

/* Visually hidden but screen-reader available (composer Comment label). */
.tf-visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* The card. */
.tf-comments #respond.tf-composer-card { background: var(--tf-surface); border: 1.5px solid var(--tf-primary); border-radius: 14px; padding: 1rem 1.1rem 1.1rem; }
.tf-comments #respond.tf-composer-card #reply-title { font-size: 1.05rem; margin: 0 0 0.8rem; }

/* The form becomes a stack of full-width rows; Name + Email share one. */
.tf-composer-card form.comment-form { display: flex; flex-wrap: wrap; gap: 0.75rem 0.8rem; }
.tf-composer-card form.comment-form > * { flex: 0 0 100%; min-width: 0; margin: 0; }
.tf-composer-card form.comment-form > .comment-form-author,
.tf-composer-card form.comment-form > .comment-form-email { flex: 1 1 0; position: relative; }
@media (max-width: 560px) {
  .tf-composer-card form.comment-form > .comment-form-author,
  .tf-composer-card form.comment-form > .comment-form-email { flex-basis: 100%; }
}
/* Placeholders carry the field names inside the card; labels stay in
   the markup for screen readers but are visually hidden. */
.tf-composer-card .comment-form-author label,
.tf-composer-card .comment-form-email label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Avatar + textarea row. */
.tf-composer-top { display: flex; align-items: flex-start; gap: 0.8rem; }
.tf-composer-avatar { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: 1.05rem; font-weight: 700; }
.tf-composer-input { flex: 1 1 auto; min-width: 0; }
.tf-composer-input textarea.tf-composer { width: 100%; box-sizing: border-box; }

/* Take-tag row: inline label + pills under a divider; the selected pill
   takes a soft tint of its accent instead of the solid fill it gets
   outside the card. */
.tf-composer-card .comment-form-tf-signal { display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem 0.6rem; border-top: 1px solid var(--tf-border); padding-top: 0.85rem; }
.tf-composer-card .tf-signal-label { display: inline; margin: 0; font-size: 0.9rem; font-weight: 700; color: var(--tf-text); }
.tf-composer-card .tf-signal-choice { background: var(--tf-surface); }
.tf-composer-card .tf-signal-choice:has(> input:checked) { background: var(--tf-primary-soft); border-color: var(--tf-primary); color: var(--tf-primary-strong); font-weight: 700; }
.tf-composer-card .tf-signal-choice-drop:has(> input:checked) { background: rgba(220, 38, 38, 0.10); border-color: #dc2626; color: #dc2626; }
.tf-composer-card .tf-signal-choice-bug:has(> input:checked) { background: rgba(217, 119, 6, 0.12); border-color: #d97706; color: #b45309; }
.tf-composer-card .tf-signal-choice-take:has(> input:checked) { background: rgba(37, 99, 235, 0.10); border-color: #2563eb; color: #2563eb; }
html.dark .tf-composer-card .tf-signal-choice-drop:has(> input:checked) { border-color: #f87171; color: #f87171; }
html.dark .tf-composer-card .tf-signal-choice-bug:has(> input:checked) { border-color: #fbbf24; color: #fbbf24; }
html.dark .tf-composer-card .tf-signal-choice-take:has(> input:checked) { border-color: #60a5fa; color: #60a5fa; }

/* Notify + cookies: one slim muted row each. */
.tf-composer-card .comment-form-tf-notify,
.tf-composer-card .comment-form-cookies-consent { font-size: 0.85rem; color: var(--tf-text-gray); }

/* Toolbar: format helpers + shield note left, green submit far right. */
.tf-composer-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 0.55rem 0.7rem; }
.tf-format-btns { display: inline-flex; gap: 0.35rem; }
.tf-fmt-btn { min-width: 2rem; height: 2rem; padding: 0 0.55rem; display: inline-flex; align-items: center; justify-content: center; background: var(--tf-bg-alt); border: 1px solid var(--tf-border); border-radius: 6px; color: var(--tf-text-gray); font: inherit; font-size: 0.82rem; font-weight: 700; cursor: pointer; }
.tf-fmt-btn:hover { border-color: var(--tf-primary); color: var(--tf-primary-strong); }
.tf-shield-note { font-size: 0.8rem; font-weight: 600; color: var(--tf-text-muted); }
.tf-composer-toolbar input[type="submit"] { margin-left: auto; background: var(--tf-primary-deep); color: #fff; border: none; border-radius: 0.5rem; padding: 0.6rem 1.4rem; font: inherit; font-weight: 700; font-size: 0.92rem; cursor: pointer; }
.tf-composer-toolbar input[type="submit"]:hover { background: var(--tf-primary-hover); }

/* Compact state (JS-applied): the card collapses to avatar + textarea.
   The base compact rules already hide the identity fields, tag row,
   notify, cookies and notes; the toolbar row is the fancy-mode
   equivalent of .form-submit and folds away / animates in with them. */
.tf-comments #respond.tf-composer-compact .tf-composer-toolbar { display: none; }
.tf-comments #respond.tf-composer-open .tf-composer-toolbar { animation: tf-composer-in 0.3s ease; }

/* ==========================================================================
   v7.0.0 — Generalization: primary menu, icon row, front-page modules,
   related grid, per-post layouts, footer widgets
   ========================================================================== */

/* Header: real primary menu + action list side by side (desktop only —
   the base stylesheet hides .top-nav-desktop on mobile and that must win) */
@media (min-width: 769px) { .top-nav-desktop { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; } }
.tf-primary-menu { margin: 0; }
.tf-primary-menu .sub-menu { list-style: none; margin: 0; padding: 0.4rem 0; position: absolute; background: var(--tf-surface); border: 1px solid var(--tf-border); border-radius: 0.5rem; box-shadow: 0 10px 30px rgba(0,0,0,0.12); display: none; min-width: 12rem; z-index: 60; }
.tf-primary-menu li { position: relative; }
.tf-primary-menu li:hover > .sub-menu, .tf-primary-menu li:focus-within > .sub-menu { display: block; }
.tf-primary-menu .sub-menu li { display: block; }
.top-nav-actions { margin: 0; }

/* Optional icon quick-link strip under the header bar */
.top-nav-icon-row { border-top: 1px solid var(--tf-border); padding: 0.3rem 1rem 0.5rem; }
.top-nav-icon-row .top-nav-list { margin: 0; flex-wrap: wrap; }
@media (max-width: 768px) { .top-nav-icon-row { display: none; } }

/* Front page: hero secondary headlines */
.tf-hero-more { margin-top: 1.25rem; }
.tf-hero-more-title { font-size: 1rem; margin: 0 0 0.5rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--tf-primary-strong); }
.tf-hero-more-list { list-style: none; margin: 0; padding: 0; }
.tf-hero-more-list li { padding: 0.55rem 0; border-bottom: 1px solid var(--tf-border); display: flex; flex-direction: column; gap: 0.15rem; }
.tf-hero-more-list a { font-weight: 700; color: var(--tf-text); text-decoration: none; }
.tf-hero-more-list a:hover { color: var(--tf-primary-strong); }

/* Front page: custom-content module + widget strip */
.tf-home-custom { margin: 0 0 2rem; }
.tf-home-widgets { margin-bottom: 1.5rem; }

/* Related Articles grid at the end of single posts */
.tf-related { margin-top: 2.5rem; }

/* Per-post layouts (_tf_layout) */
.single-layout-grid.tf-layout-narrow, .single-layout-grid.tf-layout-fullwidth { grid-template-columns: minmax(0, 1fr); }
.single-layout-grid.tf-layout-narrow > article { max-width: 46rem; margin: 0 auto; width: 100%; }

/* Footer widget columns */
.footer-widgets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; padding: 2rem 0 0.5rem; }
.footer-widgets .widget-title { font-size: 1rem; margin: 0 0 0.75rem; }
@media (max-width: 768px) { .footer-widgets { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; } }

/* ===== GER Theme 7.0.4: sticky footer ad, after-comments slot, in-content Pin buttons =====
   Appended as a new section; nothing above this line was restructured. */

/* Sticky footer bar ad (Tab 9). Rendered hidden via .tf-sticky-ad-pending
   until theme.js confirms the reader has not dismissed it this session. */
.tf-sticky-ad { position: fixed; left: 0; right: 0; bottom: 0; z-index: 900; background: var(--tf-surface, #fff); border-top: 1px solid var(--tf-border, #e5e7eb); box-shadow: 0 -4px 18px rgba(0, 0, 0, 0.10); padding: 0.5rem 1rem calc(0.5rem + env(safe-area-inset-bottom)); }
.tf-sticky-ad-pending { display: none; }
.tf-sticky-ad-inner { display: flex; justify-content: center; align-items: center; max-width: 970px; margin: 0 auto; overflow: hidden; }
.tf-sticky-ad-close { position: absolute; top: 0.2rem; right: 0.45rem; width: 1.6rem; height: 1.6rem; padding: 0; border: none; border-radius: 50%; background: transparent; color: var(--tf-text, #10201E); font-size: 1.15rem; line-height: 1; cursor: pointer; opacity: 0.65; }
.tf-sticky-ad-close:hover, .tf-sticky-ad-close:focus-visible { opacity: 1; }

/* After Comments ad slot (Tab 9, single posts) */
.tf-ad-after-comments { margin: 2rem 0; text-align: center; }

/* ==========================================================================
   v7.0.9 (GER Edition): Colour Header Icons
   The eight colour header icons (.tf-cicon) carry their own fills, so the
   monochrome fill: currentColor inheritance from .icon-primary svg must
   not reach them. Scoped to these icons only; all other icons keep the
   inherited currentColor behaviour.
   ========================================================================== */
.icon-primary svg.tf-cicon { fill: none; }


/* ================================================================
   v7.1.0 — GER Rail Data integration + homepage body columns
   Below the hero, the homepage body becomes a content column plus
   the standard sidebar. When the sidebar holds the plugin rail,
   the sidebar column sticks under the sticky header; the rail
   caps its own height and scrolls internally.
   ================================================================ */
.home-body-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--tf-sidebar-w);
  gap: 2.5rem;
  align-items: start;
}
.home-body-main { min-width: 0; }
.home-body-main .articles-grid { grid-template-columns: repeat(2, 1fr); }
.single-layout-grid > #secondary:has(.ger-rail),
.home-body-grid > #secondary:has(.ger-rail) {
  position: sticky;
  top: 70px;
  align-self: start;
}
@media (max-width: 1100px) {
  .home-body-grid { grid-template-columns: minmax(0, 1fr); }
  .single-layout-grid > #secondary:has(.ger-rail),
  .home-body-grid > #secondary:has(.ger-rail) { position: static; }
}
@media (max-width: 700px) {
  .home-body-main .articles-grid { grid-template-columns: 1fr; }
}

/* ================================================================
   v7.1.1 — homepage columns start at the hero
   The hero now lives inside the body grid's content column, so the
   featured grid collapses to a single column and the retired hero
   sidebar's More Headlines list runs as a two-column strip under
   the hero story.
   ================================================================ */
.home-body-main .featured-grid { grid-template-columns: 1fr; }
.home-body-main .featured-main { grid-column: auto; }
.tf-hero-more--strip { grid-column: 1 / -1; margin-top: 0.25rem; }
.tf-hero-more--strip .tf-hero-more-list { columns: 2; column-gap: 2.5rem; }
.tf-hero-more--strip .tf-hero-more-list li { break-inside: avoid; }
@media (max-width: 700px) {
  .tf-hero-more--strip .tf-hero-more-list { columns: 1; }
}

/* ================================================================
   v7.1.5 — More drawer (search on top, platform grid, editor card)
   + share bar brand colours
   ================================================================ */
#sideNav .sidenav-search-form--top { margin: 0 0 1.1rem; }
#sideNav .sidenav-search-form--top input { font-size: 1.05rem; padding: 0.95rem 1rem; }
#sideNav .sidenav-search-form--top button { padding: 0 1.15rem; }
.tf-platform-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.6rem; }
.tf-platform-tile { display: flex; flex-direction: column; align-items: center; gap: 0.45rem; padding: 0.85rem 0.4rem; border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 0.7rem; color: #fff; text-decoration: none; font-size: 0.82rem; font-weight: 600; text-align: center; }
.tf-platform-tile:hover { background: rgba(255, 255, 255, 0.08); }
.tf-platform-tile .icon-primary { width: 1.5rem; height: 1.5rem; }
.tf-editor-card { margin-top: 1.1rem; }
.tf-editor-card-link { display: flex; align-items: center; gap: 0.8rem; padding: 0.8rem; border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 0.7rem; color: #fff; text-decoration: none; }
.tf-editor-card-link:hover { background: rgba(255, 255, 255, 0.08); }
.tf-editor-avatar { width: 48px; height: 48px; border-radius: 50%; flex: none; }
.tf-editor-meta { display: flex; flex-direction: column; gap: 0.15rem; }
.tf-editor-meta strong { font-size: 0.95rem; }
.tf-editor-meta small { opacity: 0.75; font-size: 0.78rem; }

/* ================================================================
   v7.1.6 — Archives row width fix (homepage)
   Inside the body column, the old 2fr/1fr archives+POTD row left
   the archives list ~530px and its 3-across mini-grid squeezed
   each headline to ~165px — far narrower than the Latest cards
   above it. Archives now spans the full content column with the
   mini-grid 2-across (same measure as Latest Articles), and the
   Featured Picture card sits below it at full width.
   ================================================================ */
.home-body-main .archives-potd-row { grid-template-columns: 1fr; }
.home-body-main .archives-mini-grid { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 700px) {
  .home-body-main .archives-mini-grid { grid-template-columns: 1fr; }
}

/* ================================================================
   v7.1.9 — Mobile composer: stop the iOS focus-zoom blowout
   Comment fields sat at 0.95rem (15.2px). iOS Safari auto-zooms
   the page when a focused field is under 16px: tap the composer
   and the layout scales out of proportion, spills sideways, and
   stays zoomed so scrolling feels unresponsive. The subscribe
   and drawer-search inputs were already guarded at 1rem on
   mobile; the comment form now gets the same guard, plus an
   overflow clip so no wide comment content can stretch the page.
   ================================================================ */
@media (max-width: 768px) {
  .tf-comments .comment-form textarea,
  .tf-comments .comment-form input[type="text"],
  .tf-comments .comment-form input[type="email"],
  .tf-comments .comment-form input[type="url"] { font-size: 1rem; }
  .tf-comments { overflow-x: clip; }
}

/* === GER 7.2.1: share line (single posts) — "Share to: X, Reddit and
   Copy Shortlink" as plain text links under the article. The seven-cell
   horizontal share bar retires; its CSS above is now unused. === */
.tf-share-line { margin: 1rem 0 0; font-size: 0.95rem; color: var(--tf-text-gray); }
.tf-share-line .tf-share-link { appearance: none; background: none; border: none; padding: 0; font: inherit; color: var(--tf-primary-strong); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.tf-share-line .tf-share-link:hover { color: var(--tf-primary-deep); }

/* === GER 7.2.2: share line placements — the 'top' placement (before the
   featured image) is a padded horizontal bar on phones only; the 'bottom'
   placement (under the article) is hidden on phones so mobile gets the
   one bar and desktop the one line. === */
.tf-share-line--top { display: none; }
@media (max-width: 768px) {
  .tf-share-line--bottom { display: none; }
  .tf-share-line--top { display: flex; align-items: center; flex-wrap: wrap; gap: 0.35rem 0.5rem; margin: 0 0 1rem; padding: 0.55rem 0.8rem; background: var(--tf-primary-soft); border-radius: 0.55rem; }
}

/* === GER 7.2.2: share line icons — each action is icon + name === */
.tf-share-line .tf-share-link { display: inline-flex; align-items: center; gap: 0.32rem; }
.tf-share-line .tf-share-link svg { width: 0.95rem; height: 0.95rem; flex: none; }

/* ============================================================
   GER 7.3.0 — Cookie consent banner (Tab 14). The card starts
   hidden (the `hidden` attribute) and theme.js reveals it only
   for visitors with no stored choice; the gated sticky ad bar
   stays display:none until its template is promoted on accept.
   ============================================================ */
.tf-consent { position: fixed; left: 1rem; bottom: 1rem; z-index: 10050; max-width: 26rem; background: var(--tf-surface); color: var(--tf-text); border: 1px solid var(--tf-border); border-radius: .8rem; box-shadow: 0 12px 40px rgba(0,0,0,.25); padding: 1rem 1.1rem; transform: translateY(1rem); opacity: 0; transition: transform .3s ease, opacity .3s ease; }
.tf-consent[hidden] { display: none !important; }
.tf-consent.tf-consent-show { transform: none; opacity: 1; }
.tf-consent-text { margin: 0 0 .8rem; font-size: .9rem; line-height: 1.5; color: var(--tf-text-gray); }
.tf-consent-more { color: var(--tf-primary-strong); text-decoration: underline; }
.tf-consent-actions { display: flex; gap: .5rem; justify-content: flex-end; }
.tf-consent-btn { appearance: none; border: 1px solid var(--tf-border); background: transparent; color: var(--tf-text); border-radius: .55rem; padding: .5rem 1rem; font-size: .9rem; font-weight: 600; cursor: pointer; }
.tf-consent-accept { background: linear-gradient(135deg, var(--tf-primary), var(--tf-primary-deep)); border-color: transparent; color: #fff; }
.tf-consent-reopen { appearance: none; background: none; border: none; padding: 0; font: inherit; color: inherit; text-decoration: underline; cursor: pointer; }
.tf-sticky-ad-gated { display: none !important; }
@media (max-width: 768px) {
    .tf-consent { left: .6rem; right: .6rem; bottom: .6rem; max-width: none; }
}

/* ============================================================
   GER 7.4.0 — WordPress core content classes (Theme Unit Test
   canon: floated/captioned media in classic content) + larger
   mobile tap targets for comment actions and the share line.
   ============================================================ */
.alignleft { float: left; margin: 0.4rem 1.5rem 1rem 0; }
.alignright { float: right; margin: 0.4rem 0 1rem 1.5rem; }
.aligncenter { display: block; margin-left: auto; margin-right: auto; }
.alignnone { margin: 0.4rem 0 1rem; }
.wp-caption { max-width: 100%; }
.wp-caption-text, .gallery-caption { font-size: 0.85rem; color: var(--tf-text-gray); text-align: center; margin-top: 0.35rem; }
.bypostauthor { /* marker class for the post author's comments */ }
.sticky { /* marker class for sticky posts in listings */ }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.entry-content::after { content: ""; display: table; clear: both; }
.tf-page-links { display: flex; gap: 0.5rem; align-items: center; margin: 1.5rem 0; font-weight: 600; }
.tf-page-links a, .tf-page-links .post-page-numbers { padding: 0.35rem 0.7rem; border: 1px solid var(--tf-border); border-radius: 0.45rem; }
@media (max-width: 768px) {
    .tf-vote { min-height: 2.25rem; padding: 0.35rem 0.6rem; }
    .tf-creport, .tf-cpin, .tf-branch-toggle { min-height: 2.25rem; padding: 0.35rem 0.5rem; display: inline-flex; align-items: center; }
    .tf-share-line .tf-share-link { min-height: 2.25rem; padding: 0.35rem 0.4rem; display: inline-flex; align-items: center; }
}

/* ============================================================
   GER 7.4.1 — Mobile share bar: one row, no wrap.
   The bar wrapped "Copy Shortlink" onto a second line on phones
   (flex-wrap: wrap plus the 7.4.0 tap-target padding widened the
   row past the viewport). The bar is now nowrap with a tighter
   rhythm; link padding inside the bar is slimmed horizontally
   (vertical tap height is unchanged).
   ============================================================ */
@media (max-width: 768px) {
    .tf-share-line--top { flex-wrap: nowrap; gap: 0.3rem 0.4rem; padding: 0.5rem 0.7rem; font-size: 0.92rem; white-space: nowrap; overflow: hidden; }
    .tf-share-line--top .tf-share-link { flex: none; padding-left: 0.1rem; padding-right: 0.1rem; }
}
@media (max-width: 400px) {
    .tf-share-line--top { gap: 0.25rem 0.3rem; padding: 0.45rem 0.55rem; font-size: 0.88rem; }
    .tf-share-line--top .tf-share-link { gap: 0.25rem; padding-left: 0.05rem; padding-right: 0.05rem; }
}

/* ============================================================
   GER 9.0.0 — Core Web Vitals (content-visibility), WCAG 2.2
   keyboard focus-visible rings, and reduced-motion safeguards.
   ============================================================ */
.tf-comments,
.tf-related,
.site-footer {
    content-visibility: auto;
    contain-intrinsic-size: 1px 500px;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--tf-primary);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}