/**
 * phpMyFAQ - evalue8 brand theme
 *
 * Primary: #e51b24 (evalue8 red)
 * Hover:   #ce1820
 *
 * Custom CSS is intentionally minimal — only where Bootstrap utilities
 * or CSS variables cannot reach (PHP-generated HTML, category tree, etc.)
 */

/* Atkinson Hyperlegible Next — high-contrast a11y font */
@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;
}

/* =============================================================
 * CSS custom properties — Bootstrap 5 theming
 * ============================================================= */
:root,
[data-bs-theme='light'] {
  --bs-light: #eceff9;
  --bs-dark: #1a0001;

  /* Brand */
  --bs-primary: #e51b24;
  --bs-primary-rgb: 229, 27, 36;
  --bs-secondary: #ce1820;
  --bs-info: #f4747a;
  --bs-success: #0aa05c;
  --bs-warning: #e1ca0a;
  --bs-danger: #a00008;

  /* phpMyFAQ theme colors */
  --bs-pmf-nav: #b81219;
  --bs-pmf-footer: #8c0d13;
  --bs-pmf-background: #f5c6c8;

  /* Links — Bootstrap 5 needs both color AND rgb for rgba() computation */
  --bs-link-color: #e51b24;
  --bs-link-color-rgb: 229, 27, 36;
  --bs-link-hover-color: #ce1820;
  --bs-link-hover-color-rgb: 206, 24, 32;

  /* Typography */
  --bs-body-color: #808080;
  --bs-heading-color: #495057;  /* Bootstrap gray-700 — dark gray, not black */
}

[data-bs-theme='dark'] {
  --bs-light: #eceff9;
  --bs-dark: #1a0001;
  --bs-primary: #e51b24;
  --bs-primary-rgb: 229, 27, 36;
  --bs-secondary: #ce1820;
  --bs-info: #f4747a;
  --bs-success: #0aa05c;
  --bs-warning: #e1ca0a;
  --bs-danger: #a00008;
  --bs-pmf-nav: #8c0d13;
  --bs-pmf-footer: #6a090f;
  --bs-pmf-background: #3d0005;
  --bs-link-color: #f4747a;
  --bs-link-color-rgb: 244, 116, 122;
  --bs-link-hover-color: #f79499;
  --bs-link-hover-color-rgb: 247, 148, 153;
  --bs-heading-color: #dee2e6;
  --bs-body-bg: var(--bs-dark);
  --bs-body-color: var(--bs-light);
}

/* =============================================================
 * Headings — bold, dark gray (Bootstrap < 5.3 fallback for
 * --bs-heading-color which 5.3+ handles via the variable above)
 * ============================================================= */
h1, h2, h3, h4, h5, h6 {
  color: #495057;
  font-weight: 700;
}

/* =============================================================
 * Category sidebar panel
 * Custom CSS required: phpMyFAQ renders <ul class="pmf-category-overview">
 * via PHP — we cannot add Bootstrap utility classes to that output.
 * ============================================================= */
.pmf-category-panel {
  background-color: #e51b24;
  border-radius: 4px;
  overflow: hidden;
}

.pmf-category-header {
  color: #fff;
  padding: 10px 14px 8px;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

/* renderCategoryTree() output:
   <li><a href>Name</a> <span class="badge">N</span><br><small>desc</small></li> */
.pmf-category-panel .pmf-category-overview {
  list-style: none;
  padding: 0;
  margin: 0;
}

.pmf-category-panel .pmf-category-overview li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  padding: 5px 14px;
  color: #fff;
}

.pmf-category-panel .pmf-category-overview li:hover {
  background-color: rgba(0, 0, 0, 0.1);
}

.pmf-category-panel .pmf-category-overview a,
.pmf-category-panel .pmf-category-overview a:visited {
  flex: 1 1 0;
  color: #fff;
  font-size: 0.95rem;
  text-decoration: none;
  line-height: 1.4;
}

.pmf-category-panel .pmf-category-overview a:hover {
  text-decoration: underline;
}

.pmf-category-panel .pmf-category-overview .badge {
  flex-shrink: 0;
  font-size: 0.68em;
  font-weight: 500;
  background-color: rgba(0, 0, 0, 0.28) !important;
  color: #fff !important;
}

/* Hide the <br> phpMyFAQ inserts between badge and description */
.pmf-category-panel .pmf-category-overview br {
  display: none;
}

.pmf-category-panel .pmf-category-overview small {
  flex: 0 0 100%;
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.72em;
  margin-top: 1px;
}

/* PHP-generated "no category in this language" message + language links */
.pmf-category-panel p {
  color: #fff;
  font-size: 0.85rem;
  padding: 5px 14px;
  margin: 0;
}

.pmf-category-panel .pmf-category-overview strong {
  color: #fff;
  font-weight: 600;
}

/* Subcategories: hidden by default; JS expands the active branch */
.pmf-category-panel .pmf-category-overview ul {
  display: none;
  list-style: none;
  padding: 0;
  width: 100%;
}

.pmf-category-panel .pmf-category-overview ul li {
  padding-left: 20px;
}

.pmf-category-panel .pmf-category-overview ul a {
  font-size: 0.88rem;
}

/* Copyright sits below the red panel, not inside it */
.pmf-category-copyright {
  color: rgba(0, 0, 0, 0.4);
  font-size: 0.68rem;
  padding: 4px 0;
}

.pmf-category-copyright a {
  color: inherit;
  text-decoration: underline;
}

/* =============================================================
 * Article body — PHP-rendered content, cannot add BS classes
 * ============================================================= */
.pmf-faq-body img {
  max-width: 100%;
  height: auto;
}

.pmf-faq-body a {
  text-decoration: underline;
}

/* Blockquotes inserted via the WYSIWYG editor come as bare <blockquote> tags with no
   Bootstrap classes -- style them to match Bootstrap's own .blockquote component
   (https://getbootstrap.com/docs/5.3/content/typography/#blockquotes) instead of the
   browser default, which renders as plain unstyled indented text. */
.pmf-faq-body blockquote {
  margin: 1.5rem 0;
  padding: 0.75rem 1.25rem;
  border-left: 0.25rem solid var(--bs-primary);
  background-color: var(--bs-tertiary-bg);
  font-size: 1rem;
}

.pmf-faq-body blockquote > *:last-child {
  margin-bottom: 0;
}

.pmf-faq-body blockquote footer,
.pmf-faq-body blockquote cite {
  display: block;
  margin-top: 0.5rem;
  font-size: 0.875em;
  font-style: normal;
  color: var(--bs-secondary-color);
}

.pmf-faq-body blockquote footer::before {
  content: '\2014\00A0'; /* em dash + nbsp, matches Bootstrap's own .blockquote-footer::before */
}

/* =============================================================
 * Breadcrumb — phpMyFAQ renders <ol class="breadcrumb"> via PHP;
 * suppress its default bottom margin so the wrapper controls spacing
 * ============================================================= */
.breadcrumb {
  margin-bottom: 0;
}

/* =============================================================
 * High-contrast mode (a11y)
 * ============================================================= */
[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;
  --bs-body-bg: #000000;
  --bs-body-color: #ffffff;
  --bs-border-color: #ffffff;
  --bs-link-color: #ffff00;
  --bs-link-hover-color: #ffff66;
  --bs-heading-color: #ffffff;

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