/* Custom overrides for Markdown for AI Tester on top of Bootstrap 5.3. */

:root,
[data-bs-theme="light"] {
  --bs-primary: #f38020;
  --bs-primary-rgb: 243, 128, 32;
  --bs-primary-text-emphasis: #b95a0a;
  --bs-primary-bg-subtle: #fde8d4;
  --bs-primary-border-subtle: #f8c38a;
  --bs-link-color: #b95a0a;
  --bs-link-color-rgb: 185, 90, 10;
  --bs-link-hover-color: #8a4208;
  --bs-link-hover-color-rgb: 138, 66, 8;
  --brand-gradient: linear-gradient(135deg, #f38020, #ff9a3c);
}

[data-bs-theme="dark"] {
  --bs-primary: #f38020;
  --bs-primary-rgb: 243, 128, 32;
  --bs-primary-text-emphasis: #ffb77a;
  --bs-primary-bg-subtle: #3a2108;
  --bs-primary-border-subtle: #5e3410;
  --bs-link-color: #ffb77a;
  --bs-link-color-rgb: 255, 183, 122;
  --bs-link-hover-color: #ffcea0;
  --bs-link-hover-color-rgb: 255, 206, 160;
  --bs-body-bg: #0b0d12;
  --bs-body-bg-rgb: 11, 13, 18;
  --bs-body-color: #e6e8ee;
  --bs-body-color-rgb: 230, 232, 238;
  --bs-tertiary-bg: #12151c;
  --bs-tertiary-bg-rgb: 18, 21, 28;
  --bs-secondary-bg: #1a1f2b;
  --bs-secondary-bg-rgb: 26, 31, 43;
  --bs-border-color: #242a36;
  --bs-border-color-translucent: rgba(36, 42, 54, 0.9);
}

html,
body {
  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    "Inter",
    Roboto,
    "Helvetica Neue",
    Arial,
    "Noto Sans",
    "Noto Sans Arabic",
    "Noto Sans Bengali",
    "Noto Sans Devanagari",
    "Noto Sans JP",
    "Noto Sans SC",
    sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  font-size: 1rem;
  line-height: 1.55;
}

/* Bootstrap primary button: white text for contrast on orange */
.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: #f38020;
  --bs-btn-border-color: #f38020;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #dd6e14;
  --bs-btn-hover-border-color: #d16810;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #c8640f;
  --bs-btn-active-border-color: #bb5d0e;
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #f38020;
  --bs-btn-disabled-border-color: #f38020;
  font-weight: 600;
}

/* Brand tile */
.brand-mark {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  background: var(--brand-gradient);
  color: #fff;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.5px;
}

/* Numbered step circle used in "How it works" */
.step-num {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--bs-primary-bg-subtle);
  color: var(--bs-primary-text-emphasis);
  font-weight: 700;
  font-size: 14px;
}

/* Hero spacing on large screens */
.py-md-6 {
  padding-top: 5rem !important;
  padding-bottom: 5rem !important;
}

/* Compact example-URL pills wrap nicely on mobile */
.example-btn {
  font-size: 12px;
  padding: 0.15rem 0.6rem;
  border-style: dashed;
}

/* Accordion styling in dark mode needs slight contrast bump */
[data-bs-theme="dark"] .accordion {
  --bs-accordion-bg: var(--bs-tertiary-bg);
  --bs-accordion-border-color: var(--bs-border-color);
  --bs-accordion-active-bg: rgba(243, 128, 32, 0.08);
  --bs-accordion-active-color: var(--bs-primary-text-emphasis);
  --bs-accordion-btn-focus-box-shadow: 0 0 0 0.2rem rgba(243, 128, 32, 0.25);
}

/* The result preview `<pre>` must scroll horizontally on small screens */
#result pre {
  white-space: pre;
  word-break: normal;
}

/* Subtle background accent on the hero */
.hero {
  background:
    radial-gradient(
      1200px 400px at 50% -10%,
      rgba(243, 128, 32, 0.15),
      transparent 60%
    );
}
[data-bs-theme="dark"] .hero {
  background:
    radial-gradient(
      1200px 500px at 50% -10%,
      rgba(243, 128, 32, 0.12),
      transparent 60%
    );
}

/* Larger dropdown font for language switcher */
.dropdown-menu {
  min-width: 10rem;
}

/* Ensure code tags in result row remain readable */
code {
  word-break: break-all;
}

/* RTL fine-tuning: dropdown-toggle chevron flip is already handled by Bootstrap RTL. */

/* Noscript language fallback: render inline links with spacing */
noscript nav a {
  margin-inline-end: 0.5rem;
  color: var(--bs-link-color);
}