/* =============================================================
   COMPONENTS.CSS — Standardized Components for All 4 Brands
   MAH Design System v1.0 | 2026-03-27
   Import base.css + brand token file before this file
   ============================================================= */

/* =============================================================
   BUTTONS
   5 states: default / hover / active / disabled / focus
   ============================================================= */

/* ── Base Button ─────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 12px 24px;
  border: none;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
  user-select: none;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
  transform: none !important;
  box-shadow: none !important;
}

/* ── MAH Buttons ─────────────────────────────────────────────── */
.theme-mah .btn-primary,
.mah-btn-primary {
  background: var(--mah-color-primary, #D45A7A);
  color: #FFFFFF;
  border-radius: var(--mah-btn-radius, 9999px);
  font-family: var(--mah-font-body);
  font-size: var(--mah-btn-font-size, 15px);
  font-weight: var(--mah-btn-font-weight, 600);
  box-shadow: var(--mah-shadow-sm);
  border: 2px solid transparent;
  min-height: var(--mah-btn-min-height, 44px);
  padding: var(--mah-btn-padding-y, 12px) var(--mah-btn-padding-x, 24px);
  transition: var(--mah-btn-transition, all 0.2s ease);
}

.theme-mah .btn-primary:hover,
.mah-btn-primary:hover {
  background: var(--mah-color-primary-hover, #C24870);
  box-shadow: var(--mah-shadow-md);
  transform: translateY(-1px);
}

.theme-mah .btn-primary:active,
.mah-btn-primary:active {
  background: var(--mah-color-primary-active, #A83B60);
  transform: scale(0.96);
  box-shadow: var(--mah-shadow-xs);
}

.theme-mah .btn-primary:focus-visible,
.mah-btn-primary:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 2px var(--mah-bg-page, #FFFCF5),
    0 0 0 4px var(--mah-color-primary, #D45A7A);
}

.theme-mah .btn-secondary,
.mah-btn-secondary {
  background: transparent;
  color: var(--mah-color-primary, #D45A7A);
  border: 1.5px solid var(--mah-color-primary, #D45A7A);
  border-radius: var(--mah-btn-radius, 9999px);
  min-height: 44px;
  padding: 12px 24px;
  font-family: var(--mah-font-body);
  font-weight: 600;
  transition: all 0.2s ease;
}

.theme-mah .btn-secondary:hover,
.mah-btn-secondary:hover {
  background: var(--mah-bg-soft, #FFF0F3);
  transform: translateY(-1px);
}

.theme-mah .btn-secondary:active,
.mah-btn-secondary:active {
  background: var(--mah-bg-muted, #FFE4EC);
  transform: scale(0.97);
}

.theme-mah .btn-secondary:focus-visible,
.mah-btn-secondary:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px #FFFCF5, 0 0 0 4px #D45A7A;
}

/* ── VEZALIA Buttons ─────────────────────────────────────────── */
.theme-vezalia .btn-primary,
.vez-btn-primary {
  background: transparent;
  color: var(--vez-color-primary, #8B5CF6);
  border: 1px solid var(--vez-color-primary, #8B5CF6);
  box-shadow:
    0 0 8px rgba(139, 92, 246, 0.4),
    inset 0 0 8px rgba(139, 92, 246, 0.05);
  border-radius: var(--vez-radius-sm, 2px);
  min-height: 44px;
  padding: 12px 24px;
  font-family: var(--vez-font-display);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: all 0.2s var(--vez-ease-snap, cubic-bezier(0.25, 0.46, 0.45, 0.94));
}

.theme-vezalia .btn-primary:hover,
.vez-btn-primary:hover {
  background: rgba(139, 92, 246, 0.12);
  box-shadow:
    0 0 16px rgba(139, 92, 246, 0.6),
    inset 0 0 16px rgba(139, 92, 246, 0.1);
  transform: translateY(-1px);
}

.theme-vezalia .btn-primary:active,
.vez-btn-primary:active {
  transform: scale(0.97);
  background: rgba(139, 92, 246, 0.20);
  box-shadow: 0 0 4px rgba(139, 92, 246, 0.3);
}

.theme-vezalia .btn-primary:focus-visible,
.vez-btn-primary:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 2px var(--vez-bg-page, #0A0A12),
    0 0 0 4px var(--vez-color-primary, #8B5CF6),
    0 0 12px rgba(139, 92, 246, 0.5);
}

.theme-vezalia .btn-secondary,
.vez-btn-secondary {
  background: rgba(139, 92, 246, 0.10);
  color: var(--vez-text-100, #F0EEFF);
  border: 1px solid var(--vez-border-subtle, rgba(139, 92, 246, 0.15));
  border-radius: var(--vez-radius-sm, 2px);
  min-height: 44px;
  padding: 12px 24px;
  font-family: var(--vez-font-display);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.08em;
  transition: all 0.2s ease;
}

.theme-vezalia .btn-secondary:hover,
.vez-btn-secondary:hover {
  background: rgba(139, 92, 246, 0.18);
  border-color: var(--vez-border-default, rgba(139, 92, 246, 0.35));
}

.theme-vezalia .btn-secondary:active,
.vez-btn-secondary:active {
  transform: scale(0.97);
  background: rgba(139, 92, 246, 0.26);
  border-color: var(--vez-purple-400, #A78BFA);
  box-shadow: 0 0 4px rgba(139, 92, 246, 0.3);
}

/* ── MAH TRAINEE Buttons ─────────────────────────────────────── */
.theme-mah-trainee .btn-primary,
.mt-btn-primary {
  background: var(--mt-color-primary, #0058A3);
  color: #FFFFFF;
  border-radius: var(--mt-radius-md, 8px);
  min-height: 44px;
  padding: 12px 24px;
  font-family: var(--mt-font-body);
  font-size: 15px;
  font-weight: 700;
  border: none;
  transition: var(--mt-btn-transition, background 0.15s ease, transform 0.1s ease);
}

.theme-mah-trainee .btn-primary:hover,
.mt-btn-primary:hover {
  background: var(--mt-color-primary-hover, #004A8C);
  transform: translateY(-1px);
  box-shadow: var(--mt-shadow-md);
}

.theme-mah-trainee .btn-primary:active,
.mt-btn-primary:active {
  background: var(--mt-color-primary-active, #003F7A);
  transform: scale(0.97);
  box-shadow: none;
}

.theme-mah-trainee .btn-primary:focus-visible,
.mt-btn-primary:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 4px var(--mt-color-primary, #0058A3);
}

/* MAH TRAINEE Yellow CTA Button */
.mt-btn-yellow {
  background: var(--mt-color-secondary, #FFDB00);
  color: var(--mt-text-on-yellow-alt, #003F7A);  /* Dark blue = 9.8:1 AAA */
  border-radius: var(--mt-radius-md, 8px);
  min-height: 44px;
  padding: 12px 24px;
  font-family: var(--mt-font-body);
  font-size: 15px;
  font-weight: 700;
  border: none;
  transition: background 0.15s ease, transform 0.1s ease;
}

.mt-btn-yellow:hover {
  background: var(--mt-color-secondary-hover, #E6C400);
  transform: translateY(-1px);
}

.mt-btn-yellow:active {
  background: #BFA000;
  transform: scale(0.97);
}

.mt-btn-yellow:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 4px var(--mt-color-primary, #0058A3);
}

/* ── RAION Buttons ───────────────────────────────────────────── */
.theme-raion .btn-primary,
.raion-btn-primary {
  background: transparent;
  color: var(--raion-color-accent, #8B1A1A);
  border: 1px solid var(--raion-border-strong, rgba(92, 74, 56, 0.50));
  border-radius: var(--raion-radius-md, 4px);
  min-height: 44px;
  padding: 12px 32px;
  font-family: var(--raion-font-body);
  font-size: var(--raion-font-base, 16px);
  font-weight: var(--raion-weight-medium, 500);
  letter-spacing: var(--raion-tracking-wide, 0.05em);
  transition: all 0.26s var(--raion-ease-elegant, cubic-bezier(0.25, 0.1, 0.25, 1));
  position: relative;
}

.theme-raion .btn-primary::after,
.raion-btn-primary::after {
  content: '';
  position: absolute;
  bottom: 8px;
  left: 32px;
  right: 32px;
  height: 1px;
  background: var(--raion-color-accent, #8B1A1A);
  transform: scaleX(0);
  transition: transform 0.26s ease;
}

.theme-raion .btn-primary:hover,
.raion-btn-primary:hover {
  background: rgba(139, 105, 20, 0.05);
  border-color: var(--raion-color-accent, #8B1A1A);
  color: var(--raion-p-lacquer, #8B1A1A);
}

.theme-raion .btn-primary:hover::after,
.raion-btn-primary:hover::after {
  transform: scaleX(1);
}

.theme-raion .btn-primary:active,
.raion-btn-primary:active {
  transform: scale(0.97);
  background: rgba(139, 26, 26, 0.07);
}

.theme-raion .btn-primary:disabled::after,
.raion-btn-primary:disabled::after {
  display: none;
}

.theme-raion .btn-primary:focus-visible,
.raion-btn-primary:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 2px var(--raion-bg-page, #F0EEE9),
    0 0 0 4px var(--raion-color-primary, #8B6914);
}

/* =============================================================
   CARDS
   ============================================================= */

/* ── Base Card ───────────────────────────────────────────────── */
.card {
  border-radius: 12px;
  padding: 24px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.card:hover {
  transform: translateY(-2px);
}

/* ── MAH Card ────────────────────────────────────────────────── */
.theme-mah .card,
.mah-card {
  background: var(--mah-card-bg, #FFFFFF);
  border-radius: var(--mah-card-radius, 20px);
  padding: var(--mah-card-padding, 24px);
  box-shadow: var(--mah-card-shadow, 0 2px 8px rgba(212, 90, 122, 0.10));
  border: var(--mah-card-border, 1px solid rgba(212, 90, 122, 0.12));
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.theme-mah .card:hover,
.mah-card:hover {
  box-shadow: var(--mah-shadow-md);
  transform: translateY(-2px);
}

/* ── VEZALIA Card ────────────────────────────────────────────── */
.theme-vezalia .card,
.vez-card {
  background: var(--vez-card-bg, #12121F);
  border-radius: var(--vez-card-radius, 8px);
  padding: var(--vez-card-padding, 24px);
  border: var(--vez-card-border, 1px solid rgba(139, 92, 246, 0.35));
  box-shadow: var(--vez-glow-purple-sm, 0 0 8px rgba(139, 92, 246, 0.4));
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.theme-vezalia .card:hover,
.vez-card:hover {
  box-shadow: var(--vez-glow-purple-md);
  transform: translateY(-2px);
}

/* ── MAH TRAINEE Card ────────────────────────────────────────── */
.theme-mah-trainee .card,
.mt-card {
  background: var(--mt-card-bg, #FFFFFF);
  border-radius: var(--mt-card-radius, 12px);
  padding: var(--mt-card-padding, 24px);
  box-shadow: var(--mt-card-shadow, 0 2px 6px rgba(0,0,0,0.08));
  border: var(--mt-card-border, 1px solid #D0D9E6);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.theme-mah-trainee .card:hover,
.mt-card:hover {
  box-shadow: var(--mt-shadow-md);
  transform: translateY(-2px);
}

/* ── RAION Card ──────────────────────────────────────────────── */
.theme-raion .card,
.raion-card {
  background: var(--raion-card-bg, #F7F4EE);
  border-radius: var(--raion-card-radius, 8px);
  padding: var(--raion-card-padding, 32px);
  box-shadow: var(--raion-card-shadow, 0 2px 8px rgba(28, 20, 16, 0.08));
  border: var(--raion-card-border, 1px solid rgba(92, 74, 56, 0.25));
  transition: box-shadow 0.26s ease, transform 0.26s ease;
}

.theme-raion .card:hover,
.raion-card:hover {
  box-shadow: var(--raion-shadow-md);
  transform: translateY(-2px);
}

/* =============================================================
   INPUTS / FORMS
   ============================================================= */

/* ── Base Form Group ─────────────────────────────────────────── */
.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.form-label {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
}

.form-helper {
  font-size: 12px;
  line-height: 1.4;
  opacity: 0.7;
}

.form-error {
  font-size: 12px;
  font-weight: 500;
  color: #DC2626;
}

/* ── Base Input ──────────────────────────────────────────────── */
.input {
  width: 100%;
  min-height: 44px;
  padding: 12px 16px;
  border: 1.5px solid #ccc;
  border-radius: 8px;
  font-size: 15px;
  line-height: 1.5;
  background: #fff;
  color: inherit;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  appearance: none;
}

.input:focus-visible {
  outline: none;
  border-color: var(--color-focus-ring, #000);
  box-shadow: 0 0 0 3px rgba(0,0,0,0.1);
}

.input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ── MAH Input ───────────────────────────────────────────────── */
.theme-mah .input,
.mah-input {
  background: var(--mah-bg-page, #FFFCF5);
  border: var(--mah-input-border, 1.5px solid rgba(212, 90, 122, 0.25));
  border-radius: var(--mah-input-radius, 12px);
  color: var(--mah-text-body, #5C1A2E);
  font-family: var(--mah-font-body);
  min-height: var(--mah-input-min-height, 44px);
}

.theme-mah .input::placeholder,
.mah-input::placeholder {
  color: var(--mah-text-placeholder, #C4929F);
}

.theme-mah .input:focus-visible,
.mah-input:focus-visible {
  outline: none;
  border: var(--mah-input-border-focus, 1.5px solid #D45A7A);
  box-shadow: 0 0 0 3px rgba(212, 90, 122, 0.12);
}

.theme-mah .input--error,
.mah-input--error,
.mah-input.input--error {
  border: 1.5px solid var(--mah-color-error, #DC2626);
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.10);
}

/* ── VEZALIA Input ───────────────────────────────────────────── */
.theme-vezalia .input,
.vez-input {
  background: var(--vez-bg-input, #252540);
  border: 1px solid var(--vez-border-default, rgba(139, 92, 246, 0.35));
  border-radius: var(--vez-radius-sm, 2px);
  color: var(--vez-text-body, #F0EEFF);
  font-family: var(--vez-font-body);
  min-height: 44px;
}

.theme-vezalia .input::placeholder,
.vez-input::placeholder {
  color: var(--vez-text-muted, #8B83A8);
}

.theme-vezalia .input:focus-visible,
.vez-input:focus-visible {
  outline: none;
  border-color: var(--vez-color-primary, #8B5CF6);
  box-shadow:
    0 0 0 2px var(--vez-bg-page, #0A0A12),
    0 0 0 4px var(--vez-color-primary, #8B5CF6),
    0 0 8px rgba(139, 92, 246, 0.3);
}

/* ── MAH TRAINEE Input ───────────────────────────────────────── */
.theme-mah-trainee .input,
.mt-input {
  background: var(--mt-bg-card, #FFFFFF);
  border: var(--mt-input-border, 1.5px solid #A8B5C8);
  border-radius: var(--mt-input-radius, 8px);
  color: var(--mt-text-body, #111827);
  font-family: var(--mt-font-body);
  min-height: 44px;
}

.theme-mah-trainee .input::placeholder,
.mt-input::placeholder {
  color: var(--mt-text-placeholder, #7B8FA8);
}

.theme-mah-trainee .input:focus-visible,
.mt-input:focus-visible {
  outline: none;
  border: var(--mt-input-border-focus, 1.5px solid #0058A3);
  box-shadow: 0 0 0 3px rgba(0, 88, 163, 0.12);
}

/* ── RAION Input ─────────────────────────────────────────────── */
.theme-raion .input,
.raion-input {
  background: var(--raion-bg-card, #F7F4EE);
  border: var(--raion-input-border, 1px solid rgba(92, 74, 56, 0.25));
  border-radius: var(--raion-input-radius, 4px);
  color: var(--raion-text-body, #3D2E22);
  font-family: var(--raion-font-body);
  min-height: 44px;
}

.theme-raion .input::placeholder,
.raion-input::placeholder {
  color: var(--raion-p-ink-trace, #B0998A);
}

.theme-raion .input:focus-visible,
.raion-input:focus-visible {
  outline: none;
  border: var(--raion-input-border-focus, 1px solid #8B6914);
  box-shadow:
    0 0 0 2px var(--raion-bg-page, #F0EEE9),
    0 0 0 4px var(--raion-color-primary, #8B6914);
}

/* =============================================================
   BADGES / TAGS
   ============================================================= */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 9999px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  min-height: 24px;
}

/* MAH Badges */
.mah-badge {
  background: var(--mah-bg-soft, #FFF0F3);
  color: var(--mah-color-primary, #D45A7A);
  border: 1px solid var(--mah-border-default, rgba(212, 90, 122, 0.25));
  border-radius: var(--mah-radius-full, 9999px);
  font-family: var(--mah-font-body);
  font-size: 12px;
  font-weight: 600;
  padding: 4px 12px;
  min-height: 24px;
}

.mah-badge-filled {
  background: var(--mah-color-primary, #D45A7A);
  color: #FFFFFF;
  border: none;
}

/* VEZALIA Badges */
.vez-badge {
  background: rgba(139, 92, 246, 0.12);
  color: var(--vez-color-primary, #8B5CF6);
  border: 1px solid var(--vez-border-default, rgba(139, 92, 246, 0.35));
  border-radius: var(--vez-radius-sm, 2px);
  font-family: var(--vez-font-display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 4px 10px;
  min-height: 24px;
}

/* MAH TRAINEE Badges */
.mt-badge-blue {
  background: var(--mt-blue-50, #EBF3FC);
  color: var(--mt-blue-700, #003F7A);
  border: 1px solid var(--mt-blue-100, #C8D8EF);
  border-radius: var(--mt-radius-full, 9999px);
  font-family: var(--mt-font-body);
  font-size: 12px;
  font-weight: 600;
  padding: 4px 10px;
  min-height: 24px;
}

.mt-badge-yellow {
  background: var(--mt-yellow-300, #FFDB00);
  color: var(--mt-text-on-yellow, #1A1200);  /* AAA contrast */
  border: none;
  border-radius: var(--mt-radius-full, 9999px);
  font-family: var(--mt-font-body);
  font-size: 12px;
  font-weight: 700;
  padding: 4px 10px;
  min-height: 24px;
}

/* RAION Badges */
.raion-badge {
  background: rgba(139, 105, 20, 0.08);
  color: var(--raion-color-primary, #8B6914);
  border: 1px solid var(--raion-border-bronze, rgba(139, 105, 20, 0.40));
  border-radius: var(--raion-radius-xs, 1px);
  font-family: var(--raion-font-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  padding: 4px 10px;
  min-height: 24px;
}

/* =============================================================
   NAVIGATION
   ============================================================= */

/* ── Base Nav ────────────────────────────────────────────────── */
.nav {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 16px;
  height: 64px;
}

.nav-brand {
  font-size: 18px;
  font-weight: 700;
  margin-right: auto;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
}

.nav-link {
  display: inline-flex;
  align-items: center;
  padding: 8px 12px;
  min-height: 44px;
  font-size: 14px;
  font-weight: 500;
  border-radius: 6px;
  transition: background 0.15s ease, color 0.15s ease;
  cursor: pointer;
}

/* MAH Nav */
.mah-nav {
  background: var(--mah-bg-page, #FFFCF5);
  border-bottom: 1px solid var(--mah-border-subtle, rgba(212, 90, 122, 0.12));
  box-shadow: var(--mah-shadow-xs);
}

.mah-nav .nav-brand {
  color: var(--mah-text-heading, #5C1A2E);
  font-family: var(--mah-font-display);
}

.mah-nav .nav-link {
  color: var(--mah-text-secondary, #8B3A52);
  font-family: var(--mah-font-body);
  border-radius: var(--mah-radius-md, 12px);
}

.mah-nav .nav-link:hover {
  background: var(--mah-bg-soft, #FFF0F3);
  color: var(--mah-text-heading, #5C1A2E);
}

.mah-nav .nav-link.active,
.mah-nav .nav-link[aria-current="page"] {
  background: var(--mah-bg-muted, #FFE4EC);
  color: var(--mah-color-primary, #D45A7A);
  font-weight: 600;
}

/* VEZALIA Nav */
.vez-nav {
  background: var(--vez-bg-elevated, #1A1A2E);
  border-bottom: 1px solid var(--vez-border-default, rgba(139, 92, 246, 0.35));
}

.vez-nav .nav-brand {
  color: var(--vez-color-primary, #8B5CF6);
  font-family: var(--vez-font-display);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.vez-nav .nav-link {
  color: var(--vez-text-secondary, #B8B0D0);
  font-family: var(--vez-font-display);
  font-size: 13px;
  letter-spacing: 0.06em;
  border-radius: var(--vez-radius-sm, 2px);
}

.vez-nav .nav-link:hover {
  background: rgba(139, 92, 246, 0.10);
  color: var(--vez-text-100, #F0EEFF);
}

.vez-nav .nav-link.active,
.vez-nav .nav-link[aria-current="page"] {
  background: rgba(139, 92, 246, 0.15);
  color: var(--vez-color-primary, #8B5CF6);
  box-shadow: 0 0 8px rgba(139, 92, 246, 0.2);
}

/* MAH TRAINEE Nav */
.mt-nav {
  background: var(--mt-color-primary, #0058A3);
  color: #FFFFFF;
}

.mt-nav .nav-brand {
  color: #FFFFFF;
  font-family: var(--mt-font-display);
  font-weight: 800;
}

.mt-nav .nav-link {
  color: rgba(255, 255, 255, 0.85);
  font-family: var(--mt-font-body);
  border-radius: var(--mt-radius-md, 8px);
}

.mt-nav .nav-link:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #FFFFFF;
}

.mt-nav .nav-link.active,
.mt-nav .nav-link[aria-current="page"] {
  background: rgba(255, 255, 255, 0.18);
  color: #FFFFFF;
  font-weight: 700;
}

/* P0 FIX: Override global focus ring for .mt-nav dark-blue context.
   Default --color-focus-ring: #000000 is near-invisible on #0058A3 bg.
   Use yellow #FFDB00 which passes 11.3:1 on the nav background. */
.mt-nav {
  --color-focus-ring: #FFDB00;
}

/* RAION Nav */
.raion-nav {
  background: var(--raion-bg-card, #F7F4EE);
  border-bottom: 1px solid var(--raion-border-default, rgba(92, 74, 56, 0.25));
}

.raion-nav .nav-brand {
  color: var(--raion-text-heading, #1C1410);
  font-family: var(--raion-font-heading);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.05em;
}

.raion-nav .nav-link {
  color: var(--raion-text-secondary, #5C4A38);
  font-family: var(--raion-font-body);
  border-radius: var(--raion-radius-sm, 2px);
}

.raion-nav .nav-link:hover {
  background: rgba(92, 74, 56, 0.06);
  color: var(--raion-text-heading, #1C1410);
}

.raion-nav .nav-link.active,
.raion-nav .nav-link[aria-current="page"] {
  color: var(--raion-color-accent, #8B1A1A);
  font-weight: 600;
  border-bottom: 1px solid var(--raion-color-accent, #8B1A1A);
}

/* =============================================================
   UTILITY: Color Warning
   Prevent accidental white-on-yellow in MAH TRAINEE
   ============================================================= */
/*
   DANGER ZONE: Never do this in MAH TRAINEE:
   background: #FFDB00;
   color: #FFFFFF;  ← 1.1:1 contrast — invisible!

   ALWAYS use:
   color: #1A1200;  ← 16.2:1 AAA
   or:
   color: #003F7A;  ← 9.8:1 AAA (brand blue)
*/