/**
 * phpMyFAQ 4.0 default theme
 *
 * This Source Code Form is subject to the terms of the Mozilla Public License,
 * v. 2.0. If a copy of the MPL was not distributed with this file, You can
 * obtain one at https://mozilla.org/MPL/2.0/.
 *
 * @package   phpMyFAQ
 * @author    Thorsten Rinne <thorsten@phpmyfaq.de>
 * @copyright 2024-2025 phpMyFAQ Team
 * @license   https://www.mozilla.org/MPL/2.0/ Mozilla Public License Version 2.0
 * @link      https://www.phpmyfaq.de
 * @since     2024-09-01
 */

/* Font -Atkinson Hyperlegible Next- from Braille Institute for high-contrast mode to achieve better A11y */
@font-face {
  font-family: 'Atkinson Hyperlegible Next';
  src: url('../../fonts/AtkinsonHyperlegibleNext-VariableFont_wght.ttf') format('truetype-variations');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Atkinson Hyperlegible Next';
  src: url('../../fonts/AtkinsonHyperlegibleNext-Italic-VariableFont_wght.ttf') format('truetype-variations');
  font-weight: 200 800;
  font-style: italic;
  font-display: swap;
}

:root,
[data-bs-theme='light'] {
  --bs-light: #eceff9;
  --bs-dark: #060508;
  --bs-primary: #083c83;
  --bs-secondary: #1d646a;
  --bs-info: #40b0ae;
  --bs-success: #0aa05c;
  --bs-warning: #e1ca0a;
  --bs-danger: #f01704;
  --bs-pmf-nav: #2f3035;
  --bs-pmf-footer: #142f48;
  --bs-pmf-background: #9eb6c9;

  /* Bootstrap body variables for light mode */
  --bs-body-bg: #ffffff;
  --bs-body-color: #212529;
}

[data-bs-theme='dark'] {
  --bs-light: #eceff9;
  --bs-dark: #060508;
  --bs-primary: #083c83;
  --bs-secondary: #1d646a;
  --bs-info: #40b0ae;
  --bs-success: #0aa05c;
  --bs-warning: #e1ca0a;
  --bs-danger: #f01704;
  --bs-pmf-nav: #2f3035;
  --bs-pmf-footer: #142f48;
  --bs-pmf-background: #9eb6c9;

  /* Bootstrap body variables for dark mode */
  --bs-body-bg: var(--bs-dark);
  --bs-body-color: var(--bs-light);
}

[data-bs-theme='high-contrast'] {
  --bs-light: #ffffff;
  --bs-dark: #000000;
  --bs-primary: #ffff00;
  --bs-secondary: #00ffff;
  --bs-info: #00ffff;
  --bs-success: #00ff00;
  --bs-warning: #ffff00;
  --bs-danger: #ff0000;
  --bs-pmf-nav: #000000;
  --bs-pmf-footer: #000000;
  --bs-pmf-background: #000000;

  /* Bootstrap body variables for high contrast mode */
  --bs-body-bg: #000000;
  --bs-body-color: #ffffff;
  --bs-border-color: #ffffff;
  --bs-link-color: #ffff00;
  --bs-link-hover-color: #ffff66;

  /* Individual high-contrast adjustments */

  body {
    font-family: 'Atkinson Hyperlegible Next' !important;
    font-size: 1.3rem;
    font-optical-sizing: auto;
    font-weight: 800;
    font-style: normal;
  }
}


/* ============================================================
   ToniSport RC Wissen v0.3
   Built as a safe overlay on the user's original phpMyFAQ 4.1.8
   templates. Child Twig templates remain untouched.
   ============================================================ */

:root {
  --ts-red: #e20916;
  --ts-red-dark: #b70712;
  --ts-dark: #111214;
  --ts-dark-2: #2c292a;
  --ts-blue: #2b65ae;
  --ts-blue-light: #2ca8e0;
  --ts-yellow: #ffdf00;
  --ts-bg: #f4f5f7;
  --ts-card: #fff;
  --ts-text: #191a1d;
  --ts-muted: #6a6f76;
  --ts-border: #e1e4e8;
  --ts-radius: 14px;
  --ts-shadow: 0 9px 28px rgba(16,18,20,.075);
}

body {
  background: var(--ts-bg);
  color: var(--ts-text);
  font-family: "Titillium Web", "Arial Narrow", Arial, sans-serif;
}

a { text-underline-offset: 2px; }

.navbar {
  background: #090a0b !important;
  border-bottom: 0 !important;
  min-height: 66px;
  box-shadow: 0 1px 0 rgba(255,255,255,.07);
}

.navbar .container { max-width: 1180px; }

.ts-brand {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  line-height: .88;
  min-width: 148px;
  color: #fff !important;
  text-decoration: none !important;
}

.ts-brand-main {
  font-weight: 900;
  font-style: italic;
  font-size: 1.35rem;
  letter-spacing: -.025em;
}

.ts-brand-main::first-letter { color: var(--ts-red); }

.ts-brand-sub {
  margin-top: 4px;
  color: rgba(255,255,255,.68);
  font-size: .66rem;
  font-weight: 800;
  letter-spacing: .22em;
}

.navbar .pmf-nav-link,
.navbar .nav-link {
  color: rgba(255,255,255,.86) !important;
  font-weight: 650;
  text-decoration: none;
}

.navbar .pmf-nav-link:hover,
.navbar .nav-link:hover {
  color: #fff !important;
}

.navbar .pmf-nav-link.active {
  color: #fff !important;
  position: relative;
}

.navbar .pmf-nav-link.active::after {
  content: "";
  position: absolute;
  left: .5rem;
  right: .5rem;
  bottom: -.25rem;
  height: 3px;
  border-radius: 3px;
  background: var(--ts-red);
}

/* Hero */
.ts-hero {
  position: relative;
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(circle at 82% 34%, rgba(226,9,22,.22), transparent 25%),
    radial-gradient(circle at 68% 120%, rgba(44,168,224,.14), transparent 35%),
    linear-gradient(118deg,#090a0b 0%,#17191c 55%,#292c30 100%);
}

.ts-hero::after {
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(118deg,transparent 0 67%,rgba(255,255,255,.035) 67% 67.5%,transparent 67.5%),
    linear-gradient(118deg,transparent 0 78%,rgba(226,9,22,.10) 78% 78.5%,transparent 78.5%);
}

.ts-hero-inner {
  position: relative;
  z-index: 1;
  max-width: 1180px;
  padding-top: 54px;
  padding-bottom: 38px;
}

.ts-kicker {
  display: inline-flex;
  padding: .3rem .58rem;
  border-radius: 5px;
  background: var(--ts-red);
  color: #fff;
  font-size: .76rem;
  font-weight: 900;
  letter-spacing: .055em;
  text-transform: uppercase;
}

.ts-hero h1 {
  margin: 12px 0 9px;
  color: #fff;
  font-size: clamp(2.9rem,6.5vw,5rem);
  line-height: .93;
  letter-spacing: -.045em;
  font-weight: 900;
}

.ts-hero-copy {
  margin: 0 0 24px;
  max-width: 720px;
  color: rgba(255,255,255,.9);
  font-size: clamp(1rem,2vw,1.28rem);
  line-height: 1.42;
}

.ts-hero-search { max-width: 850px; }

.ts-hero-search .search,
.ts-hero-search form {
  position: relative;
  width: 100%;
}

.ts-hero-search form {
  display: flex;
  align-items: center;
}

.ts-hero-search form > i {
  position: absolute;
  left: 20px;
  z-index: 2;
  color: #73777d;
}

.ts-hero-search input {
  height: 58px;
  padding-left: 52px !important;
  border: 0 !important;
  border-radius: 30px 0 0 30px !important;
  font-size: 1.05rem;
  box-shadow: none !important;
}

.ts-hero-search button {
  height: 58px;
  min-width: 68px;
  border: 0 !important;
  border-radius: 0 30px 30px 0 !important;
  background: var(--ts-red) !important;
}

.ts-hero-search button:hover { background: var(--ts-red-dark) !important; }

.ts-hero-examples {
  margin-top: 9px;
  color: rgba(255,255,255,.58);
  font-size: .82rem;
}

/* Trust bar */
.ts-trust-strip {
  background: #fff;
  border-bottom: 1px solid var(--ts-border);
}

.ts-trust-grid {
  max-width: 1180px;
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 12px;
  padding-top: 17px;
  padding-bottom: 17px;
}

.ts-trust-item {
  display: flex;
  align-items: center;
  gap: 10px;
}

.ts-trust-icon {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(226,9,22,.07);
  border: 1px solid rgba(226,9,22,.16);
  color: var(--ts-red);
  font-size: .74rem;
  font-weight: 900;
}

.ts-trust-item strong,
.ts-trust-item small {
  display: block;
}

.ts-trust-item strong {
  color: var(--ts-text);
  line-height: 1.1;
  font-size: .94rem;
}

.ts-trust-item small {
  margin-top: 2px;
  color: var(--ts-muted);
  line-height: 1.1;
  font-size: .74rem;
}

/* Main / typography */
#wrapper > .container { max-width: 1180px; }

.pmf-start-page {
  margin-top: 1rem !important;
  font-size: clamp(1.8rem,3vw,2.5rem);
  letter-spacing: -.02em;
}

h1,h2,h3,h4,h5 { font-weight: 800; }

/* Existing category cards: turn phpMyFAQ markup into ToniSport topic tiles */
.pmf-start-page + .row .card,
#wrapper .card {
  border: 1px solid var(--ts-border);
  border-radius: var(--ts-radius) !important;
  box-shadow: none !important;
  overflow: hidden;
}

#wrapper .card:hover {
  border-color: #d3d6da;
  box-shadow: var(--ts-shadow) !important;
}

.pmf-start-page + .row .card-cover {
  min-height: 180px;
  position: relative;
  background-color: #fff !important;
  background-blend-mode: luminosity;
}

.pmf-start-page + .row .card-cover::before {
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(180deg,rgba(255,255,255,.18),rgba(255,255,255,.92));
}

.pmf-start-page + .row .card-cover > * {
  position:relative;
  z-index:1;
}

.pmf-start-page + .row .card-cover h3 {
  margin-top: 0 !important;
  padding-top: 42px !important;
  font-size: 1.35rem;
}

.btn-primary {
  background: var(--ts-red) !important;
  border-color: var(--ts-red) !important;
  font-weight: 700;
}

.btn-primary:hover {
  background: var(--ts-red-dark) !important;
  border-color: var(--ts-red-dark) !important;
}

/* Homepage content cards */
.masonry-grid .card {
  background: #fff;
}

.masonry-grid .card-title {
  text-align: left !important;
  font-size: 1.12rem;
}

.masonry-grid .list-group-item {
  border-color: var(--ts-border);
  background: #fff;
}

.masonry-grid .list-group-item:hover { background: #fafafa; }

/* Search */
.search input:focus,
.form-control:focus,
.form-select:focus {
  border-color: rgba(226,9,22,.5);
  box-shadow: 0 0 0 .2rem rgba(226,9,22,.10);
}

body:not(.pmf-template-default) .badge {
  border-radius: 999px;
}

/* FAQ / text pages */
#wrapper article,
#wrapper .pmf-faq {
  background: #fff;
  border-radius: var(--ts-radius);
}

#wrapper p,
#wrapper li {
  line-height: 1.6;
}

/* Knowledge bridge added via JS */
.ts-knowledge-bridge {
  margin: 24px 0;
  padding: 17px 19px;
  border: 1px solid rgba(43,101,174,.2);
  border-left: 4px solid var(--ts-blue);
  border-radius: 10px;
  background: linear-gradient(135deg,rgba(44,168,224,.07),rgba(43,101,174,.035));
}

.ts-knowledge-bridge::before {
  content: "Wissensbrücke";
  display: block;
  margin-bottom: 4px;
  color: var(--ts-blue);
  font-weight: 900;
  font-size: .82rem;
  letter-spacing: .03em;
  text-transform: uppercase;
}

/* Footer */
footer.footer {
  margin-top: 50px;
  background: #101112 !important;
  border-top: 3px solid var(--ts-red);
}

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

@media (max-width: 575.98px) {
  .navbar { min-height: 58px; }
  .ts-brand { min-width: 118px; }
  .ts-brand-main { font-size: 1.12rem; }
  .ts-hero-inner { padding-top: 35px; padding-bottom: 26px; }
  .ts-hero h1 { font-size: 3.05rem; }
  .ts-hero-copy { font-size: 1rem; }
  .ts-hero-search input,
  .ts-hero-search button { height: 52px; }
  .ts-trust-grid { padding-top: 12px; padding-bottom: 12px; gap: 9px; }
  .ts-trust-item { align-items: flex-start; }
  .ts-trust-icon { width: 34px; height: 34px; flex-basis: 34px; }
  .ts-trust-item strong { font-size: .86rem; }
  .ts-trust-item small { font-size: .7rem; }
}


/* ============================================================
   ToniSport RC Wissen v0.4 — UI refinement from live iPhone review
   ============================================================ */

body {
  overflow-x: hidden;
}

.ts-navbar .container {
  min-height: 78px;
}

.ts-brand {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  width: 190px;
  min-width: 190px;
}

.ts-brand-logo {
  display: block;
  width: 185px;
  height: auto;
  max-height: 51px;
}

.ts-brand-sub {
  margin: 3px 0 0 2px;
  color: #b6b9be;
  font-size: .66rem;
  line-height: 1;
  font-weight: 700;
  letter-spacing: .30em;
}

.navbar-toggler {
  border: 1px solid #303338 !important;
  border-radius: 11px;
  padding: .62rem .72rem;
}

#pmf-top-navbar {
  padding-top: .85rem;
  padding-bottom: .75rem;
}

#pmf-top-navbar .pmf-nav-link,
#pmf-top-navbar .nav-link {
  padding: .55rem .3rem;
}

/* Slightly tighter hero on phones while retaining its character. */
.ts-hero-inner {
  padding-top: 44px;
  padding-bottom: 30px;
}

.ts-hero h1 {
  margin-top: 10px;
}

.ts-trust-strip {
  box-shadow: 0 1px 0 rgba(0,0,0,.03);
}

/* Compact search away from the homepage */
.ts-sub-search-wrap {
  max-width: 1180px;
  margin-top: 24px;
  margin-bottom: 22px;
}

.ts-sub-search {
  position: relative;
  display: flex;
  max-width: 680px;
  margin: 0 auto;
}

.ts-sub-search > i {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 17px;
  transform: translateY(-50%);
  color: #73777d;
}

.ts-sub-search input {
  min-width: 0;
  height: 48px;
  padding-left: 45px;
  border-radius: 24px 0 0 24px !important;
  border-right: 0;
}

.ts-sub-search button {
  width: 58px;
  height: 48px;
  border-radius: 0 24px 24px 0 !important;
}

/* Homepage */
.ts-home-section,
.ts-home-grid {
  margin-top: 22px;
}

.ts-section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  margin-bottom: 16px;
}

.ts-section-heading h2,
.ts-card-heading h2 {
  margin: 0;
  font-size: clamp(1.35rem, 2vw, 1.72rem);
  letter-spacing: -.02em;
}

.ts-section-kicker,
.ts-card-heading small {
  display: block;
  color: var(--ts-red);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.ts-topic-card {
  position: relative;
  min-height: 128px;
  display: flex;
  align-items: end;
  justify-content: space-between;
  padding: 20px;
  border-radius: 14px;
  overflow: hidden;
  background:
    linear-gradient(135deg, #181a1d, #2d3034);
  background-size: cover;
  background-position: center;
  color: #fff !important;
  text-decoration: none !important;
  font-size: 1.2rem;
  font-weight: 800;
  box-shadow: 0 6px 18px rgba(0,0,0,.08);
}

.ts-topic-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 9px 22px rgba(0,0,0,.12);
}

.ts-content-card {
  height: 100%;
  padding: 22px;
  background: #fff;
  border: 1px solid var(--ts-border);
  border-radius: 16px;
}

.ts-card-heading {
  display: flex;
  gap: 12px;
  align-items: center;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--ts-border);
}

.ts-card-icon {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: rgba(226,9,22,.075);
  color: var(--ts-red);
  font-size: 1.15rem;
}

.ts-entry-list {
  display: flex;
  flex-direction: column;
}

.ts-entry {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  padding: 15px 2px;
  border-bottom: 1px solid var(--ts-border);
  color: var(--ts-text) !important;
  text-decoration: none !important;
}

.ts-entry:last-child {
  border-bottom: 0;
  padding-bottom: 2px;
}

.ts-entry:hover .ts-entry-title {
  color: var(--ts-red);
}

.ts-entry-title {
  display: block;
  font-size: 1.03rem;
  line-height: 1.25;
  font-weight: 700;
}

.ts-entry-meta {
  display: block;
  margin-top: 5px;
  color: var(--ts-muted);
  font-size: .78rem;
}

.ts-entry > i {
  flex: 0 0 auto;
  color: #a2a6ac;
}

.ts-empty {
  margin: 16px 0 0;
  color: var(--ts-muted);
}

/* No classic blue link forest in the public knowledge UI */
#wrapper a:not(.btn):not(.ts-tag):not(.ts-topic-card):not(.ts-entry):not(.ts-meta-action) {
  color: var(--ts-text);
  text-decoration-color: #c9cdd2;
  text-decoration-thickness: 1px;
}

#wrapper a:not(.btn):not(.ts-tag):not(.ts-topic-card):not(.ts-entry):not(.ts-meta-action):hover {
  color: var(--ts-red);
  text-decoration-color: var(--ts-red);
}

/* Tag palette */
.ts-tag-cloud,
.ts-rendered-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ts-tag {
  display: inline-flex !important;
  align-items: center;
  gap: 7px;
  padding: 7px 11px !important;
  border: 0 !important;
  border-radius: 999px !important;
  text-decoration: none !important;
  font-size: .82rem;
  line-height: 1;
  font-weight: 700;
}

.ts-tag span {
  opacity: .7;
  font-size: .72rem;
}

.ts-tag-1 { background: rgba(226,9,22,.10) !important; color: #b50711 !important; }
.ts-tag-2 { background: rgba(43,101,174,.11) !important; color: #23538f !important; }
.ts-tag-3 { background: rgba(44,168,224,.13) !important; color: #187ba9 !important; }
.ts-tag-4 { background: rgba(255,223,0,.22) !important; color: #6f6200 !important; }

.ts-tag:hover {
  filter: brightness(.96);
  transform: translateY(-1px);
}

/* Search */
.ts-page {
  max-width: 1060px;
  margin: 0 auto;
}

.ts-page-head {
  margin: 12px 0 22px;
}

.ts-page-head h1 {
  margin: 4px 0 0;
  font-size: clamp(2rem,5vw,3.25rem);
}

.ts-search-panel {
  margin-bottom: 28px;
  padding: 16px;
  border: 1px solid var(--ts-border);
  border-radius: 14px;
  background: #fff;
}

.ts-results-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 13px;
}

.ts-results-head h2 {
  margin: 0;
  font-size: 1.5rem;
}

.ts-results-head span {
  display: inline-grid;
  place-items: center;
  min-width: 30px;
  height: 25px;
  padding: 0 8px;
  border-radius: 999px;
  background: #eceef1;
  color: #656a70;
  font-size: .78rem;
  font-weight: 800;
}

.ts-result-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ts-result-card {
  padding: 18px;
  background: #fff;
  border: 1px solid var(--ts-border);
  border-radius: 13px;
}

.ts-result-path {
  margin-bottom: 5px;
  color: var(--ts-blue);
  font-size: .74rem;
  font-weight: 700;
}

.ts-result-card h3 {
  margin: 0 0 7px;
  font-size: 1.18rem;
}

.ts-result-card h3 a {
  color: var(--ts-text) !important;
  text-decoration: none !important;
}

.ts-result-card p {
  margin: 0 0 10px;
  color: var(--ts-muted);
  font-size: .94rem;
}

.ts-result-more {
  color: var(--ts-red) !important;
  text-decoration: none !important;
  font-size: .86rem;
  font-weight: 800;
}

.ts-side-card {
  margin-bottom: 15px;
  padding: 18px;
  background: #fff;
  border: 1px solid var(--ts-border);
  border-radius: 13px;
}

.ts-side-card h3 {
  margin: 0 0 13px;
  font-size: 1.05rem;
}

.ts-empty-state {
  padding: 24px;
  border-radius: 13px;
  background: #fff;
  color: var(--ts-muted);
}

/* FAQ detail */
.ts-faq-page {
  max-width: 900px;
  margin: 0 auto;
}

.ts-breadcrumb {
  margin: 6px 0 24px;
  color: var(--ts-muted);
  font-size: .88rem;
}

.ts-breadcrumb a {
  color: var(--ts-muted) !important;
}

.ts-faq-head {
  margin-bottom: 20px;
}

.ts-content-type {
  display: inline-flex;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(226,9,22,.10);
  color: var(--ts-red);
  font-size: .74rem;
  line-height: 1;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.ts-faq-head h1 {
  margin: 10px 0 0;
  font-size: clamp(2rem,5vw,3.5rem);
  line-height: 1.05;
  letter-spacing: -.035em;
}

.ts-answer {
  padding: 24px 26px;
  border: 1px solid var(--ts-border);
  border-radius: 16px;
  background: #fff;
  font-size: 1.07rem;
  line-height: 1.65;
  overflow-wrap: anywhere;
}

.ts-answer > :first-child { margin-top: 0; }
.ts-answer > :last-child { margin-bottom: 0; }

.ts-responsive-content {
  max-width: 100% !important;
}

table.ts-responsive-content {
  display: block;
  overflow-x: auto;
}

.ts-knowledge-bridge {
  position: relative;
  margin: 22px 0 !important;
  padding: 44px 18px 18px !important;
  border: 1px solid rgba(43,101,174,.20);
  border-left: 4px solid var(--ts-blue);
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(44,168,224,.08), rgba(43,101,174,.035));
}

.ts-knowledge-bridge::before {
  content: "Wissensbrücke";
  position: absolute;
  top: 15px;
  left: 18px;
  color: var(--ts-blue);
  font-size: .75rem;
  font-weight: 900;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.ts-faq-section {
  margin-top: 28px;
}

.ts-faq-section h2,
.ts-vote h2 {
  margin-bottom: 13px;
  font-size: 1.3rem;
}

.ts-faq-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  align-items: center;
  margin-top: 30px;
  padding: 13px 0;
  border-top: 1px solid var(--ts-border);
  border-bottom: 1px solid var(--ts-border);
  color: var(--ts-muted);
  font-size: .84rem;
}

.ts-meta-action {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ts-muted) !important;
  text-decoration: none !important;
  font: inherit;
}

.ts-meta-action:hover {
  color: var(--ts-red) !important;
}

.ts-vote {
  margin-top: 28px;
  padding: 18px 20px;
  border-radius: 13px;
  background: #fff;
  border: 1px solid var(--ts-border);
}

.ts-vote form {
  display: flex;
  align-items: center;
  gap: 15px;
}

.ts-rating {
  color: var(--ts-muted);
  font-size: .85rem;
}

.ts-comments {
  margin-top: 30px;
}

.ts-related-block {
  padding: 13px 0;
  border-top: 1px solid var(--ts-border);
}

.ts-note {
  padding: 18px;
  border-left: 4px solid var(--ts-yellow);
  border-radius: 10px;
  background: rgba(255,223,0,.10);
}

/* Hide legacy homepage/header artefacts if a plugin injects them. */
.pmf-start-page {
  display: none !important;
}

@media (max-width: 767.98px) {
  .ts-navbar .container {
    min-height: 68px;
  }

  .ts-brand {
    width: 154px;
    min-width: 154px;
  }

  .ts-brand-logo {
    width: 150px;
  }

  .ts-brand-sub {
    font-size: .60rem;
  }

  .ts-hero-inner {
    padding-top: 32px;
    padding-bottom: 24px;
  }

  .ts-hero h1 {
    font-size: 3.4rem;
  }

  .ts-hero-copy {
    margin-bottom: 20px;
  }

  .ts-trust-grid {
    grid-template-columns: repeat(2, minmax(0,1fr));
  }

  .ts-content-card {
    padding: 17px;
  }

  .ts-entry {
    padding-top: 13px;
    padding-bottom: 13px;
  }

  .ts-sub-search-wrap {
    margin-top: 18px;
    margin-bottom: 18px;
  }

  .ts-sub-search {
    max-width: none;
  }

  .ts-faq-page {
    width: 100%;
  }

  .ts-breadcrumb {
    margin-bottom: 18px;
  }

  .ts-faq-head h1 {
    font-size: 2.35rem;
  }

  .ts-answer {
    padding: 20px 18px;
    font-size: 1rem;
  }

  .ts-faq-meta {
    align-items: flex-start;
  }
}


/* ============================================================
   v0.4.1 — mobile hotfix + cache-safe refinement
   ============================================================ */

/* Force the brand to remain compact even if phpMyFAQ/custom CSS has broader img rules. */
#phpmyfaq-logo.ts-brand {
  width: 145px !important;
  min-width: 145px !important;
  max-width: 145px !important;
  padding: 0 !important;
  margin-right: 0 !important;
}

#phpmyfaq-logo.ts-brand > img.ts-brand-logo {
  display: block !important;
  width: 145px !important;
  min-width: 0 !important;
  max-width: 145px !important;
  height: auto !important;
  max-height: none !important;
  object-fit: contain !important;
}

.ts-navbar .container {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: space-between !important;
}

.ts-navbar .navbar-toggler {
  margin-left: auto !important;
}

/* Keep compact search icon, field and button on ONE line. */
form.ts-sub-search {
  position: relative !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 52px !important;
  align-items: stretch !important;
  gap: 0 !important;
  width: 100% !important;
  max-width: 680px !important;
  margin: 0 auto !important;
  flex-wrap: nowrap !important;
}

form.ts-sub-search > i {
  position: absolute !important;
  z-index: 3 !important;
  left: 17px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  margin: 0 !important;
  font-size: 1rem !important;
  line-height: 1 !important;
  pointer-events: none !important;
}

form.ts-sub-search > input.form-control {
  grid-column: 1 !important;
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 48px !important;
  margin: 0 !important;
  padding: 0 14px 0 45px !important;
  border-radius: 24px 0 0 24px !important;
  border-right: 0 !important;
}

form.ts-sub-search > button {
  grid-column: 2 !important;
  width: 52px !important;
  min-width: 52px !important;
  height: 48px !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 0 24px 24px 0 !important;
}

/* Breadcrumbs: quiet navigation, not classic blue links. */
.ts-faq-page .ts-breadcrumb,
.ts-faq-page .ts-breadcrumb a {
  color: #7a7f86 !important;
  text-decoration: none !important;
}

.ts-faq-page .ts-breadcrumb a:hover {
  color: var(--ts-red) !important;
}

/* Related knowledge: dark, clean links with red hover. */
.ts-faq-page .ts-related-block a,
.ts-faq-page .ts-related-block a:visited {
  color: var(--ts-text) !important;
  text-decoration: none !important;
  font-weight: 700 !important;
}

.ts-faq-page .ts-related-block a:hover {
  color: var(--ts-red) !important;
}

/* phpMyFAQ may render related items as lists; make them look intentional. */
.ts-faq-page .ts-related-block ul,
.ts-faq-page .ts-related-block ol {
  list-style: none !important;
  padding-left: 0 !important;
  margin: 0 !important;
}

.ts-faq-page .ts-related-block li {
  position: relative;
  padding: 11px 28px 11px 0 !important;
  border-bottom: 1px solid var(--ts-border);
}

.ts-faq-page .ts-related-block li:last-child {
  border-bottom: 0;
}

.ts-faq-page .ts-related-block li::after {
  content: "→";
  position: absolute;
  right: 2px;
  top: 10px;
  color: var(--ts-red);
  font-weight: 800;
}

/* The content-type chip must stay a chip even if generic span rules exist. */
.ts-faq-page .ts-content-type {
  display: inline-flex !important;
  width: auto !important;
  padding: 6px 10px !important;
  border-radius: 999px !important;
  background: rgba(226,9,22,.10) !important;
  color: var(--ts-red) !important;
  font-size: .74rem !important;
  line-height: 1 !important;
  font-weight: 900 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
}

/* Protect answer/related content from accidental horizontal overflow. */
.ts-faq-page,
.ts-answer,
.ts-related-block {
  min-width: 0 !important;
  max-width: 100% !important;
}

.ts-faq-page img,
.ts-faq-page iframe,
.ts-faq-page video {
  max-width: 100% !important;
  height: auto;
}

@media (max-width: 767.98px) {
  .ts-navbar .container {
    min-height: 64px !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }

  #phpmyfaq-logo.ts-brand {
    width: 125px !important;
    min-width: 125px !important;
    max-width: 125px !important;
  }

  #phpmyfaq-logo.ts-brand > img.ts-brand-logo {
    width: 125px !important;
    max-width: 125px !important;
  }

  .ts-brand-sub {
    margin-top: 2px !important;
    font-size: .52rem !important;
    letter-spacing: .24em !important;
  }

  .ts-navbar .navbar-toggler {
    padding: .48rem .58rem !important;
    border-radius: 9px !important;
  }

  .ts-sub-search-wrap {
    margin-top: 14px !important;
    margin-bottom: 16px !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  form.ts-sub-search {
    grid-template-columns: minmax(0,1fr) 48px !important;
  }

  form.ts-sub-search > input.form-control {
    height: 46px !important;
    font-size: 1rem !important;
  }

  form.ts-sub-search > button {
    width: 48px !important;
    min-width: 48px !important;
    height: 46px !important;
  }

  .ts-breadcrumb {
    font-size: .78rem !important;
    line-height: 1.45 !important;
    margin-bottom: 14px !important;
  }

  .ts-faq-head {
    margin-bottom: 16px !important;
  }

  .ts-faq-head h1 {
    font-size: 2.2rem !important;
    line-height: 1.04 !important;
  }

  .ts-answer {
    border-radius: 14px !important;
    padding: 18px 16px !important;
  }

  .ts-faq-section h2 {
    font-size: 1.45rem !important;
  }
}