/* Khả Văn public accessibility layer.
   Loaded last so brand colors remain fresh while text and controls meet WCAG AA. */
:root {
  --kv-a11y-green: #047857;
  --kv-a11y-green-hover: #065f46;
  --kv-a11y-green-text: #047857;
  --kv-a11y-green-text-on-soft: #065f46;
  --kv-a11y-ink: #102a24;
  --kv-a11y-muted: #475569;
  --kv-a11y-dark: #0d1117;
  --kv-a11y-dark-surface: #161b22;
  --kv-a11y-dark-text: #f8fafc;
  --kv-a11y-dark-muted: #cbd5e1;
  --kv-a11y-focus: #0f766e;

  /* Keep the recognizable Khả Văn green for decorative accents, while
     mapping interactive and text roles to the accessible shade. */
  --green-dark: var(--kv-a11y-green-hover) !important;
  --green-primary: var(--kv-a11y-green) !important;
  --text-muted: var(--kv-a11y-muted) !important;
  --kv-green-dark: var(--kv-a11y-green-hover) !important;
  --kv-muted: var(--kv-a11y-muted) !important;
}

/* Primary actions: white on #047857 is above WCAG AA for normal text. */
body.kv-redesign .kvx-btn--primary,
body.kv-redesign .kvp-btn--primary,
body.kv-redesign .kvp-submit,
body.kv-redesign .kv-desktop-cta,
body.kv-public .kv-desktop-cta {
  background: var(--kv-a11y-green) !important;
  color: #fff !important;
}

body.kv-redesign .kvx-btn--primary:hover,
body.kv-redesign .kvp-btn--primary:hover,
body.kv-redesign .kvp-submit:hover,
body.kv-redesign .kv-desktop-cta:hover,
body.kv-public .kv-desktop-cta:hover {
  background: var(--kv-a11y-green-hover) !important;
  color: #fff !important;
}

/* Yellow is an accent surface, so it always receives dark ink. */
body.kv-redesign .kvx-btn--accent,
body.kv-redesign a.kvx-btn--accent,
body.kv-redesign .kvp-btn--accent,
body.kv-redesign a.kvp-btn--accent,
body.kv-public .bg-kv-yellow {
  color: var(--kv-a11y-ink) !important;
}

body.kv-redesign .kvx-btn--accent *,
body.kv-redesign .kvp-btn--accent * {
  color: inherit !important;
}

/* Small labels need the darker semantic green, not the decorative green. */
body.kv-redesign .kvx-kicker,
body.kv-redesign .kvp-kicker,
body.kv-redesign .kh-filter-label,
body.kv-redesign .kvx-gv-card__role,
body.kv-redesign .kvp-card__link,
body.kv-redesign .kvp-info-card h3,
body.kv-public .kh-filter-label {
  color: var(--kv-a11y-green-text-on-soft) !important;
}

/* Banner kickers sit on media, so keep high-contrast light text there. */
body.kv-redesign .bv-hero--banner .kvp-kicker,
body.kv-redesign .lt-hero--banner .kvp-kicker {
  background: rgb(2 44 34 / 72%) !important;
  border-color: rgb(255 255 255 / 62%) !important;
  color: #fff !important;
}

body.kv-redesign .kvp-head p,
body.kv-redesign .kvp-lead,
body.kv-redesign .kh-testimonial p,
body.kv-redesign .bv-card span:not(.bv-card__cat),
body.kv-redesign .kvx-lead {
  color: var(--kv-a11y-muted) !important;
}

/* Media CTA: one stable dark surface instead of a bright three-stop gradient. */
body.kv-redesign .kvp-cta {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(circle at 88% 15%, rgb(16 185 129 / 18%), transparent 38%),
    linear-gradient(135deg, #064e3b 0%, #047857 100%) !important;
  color: var(--kv-a11y-dark-text) !important;
}

body.kv-redesign .kvp-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgb(2 44 34 / 18%);
  pointer-events: none;
}

body.kv-redesign .kvp-cta h2,
body.kv-redesign .kvp-cta p {
  color: var(--kv-a11y-dark-text) !important;
}

body.kv-redesign .kvp-cta .kvp-btn--light {
  background: #fff !important;
  border-color: #fff !important;
  color: var(--kv-a11y-green-hover) !important;
}

/* Home dark/media sections keep readable secondary copy and form labels. */
body.kv-redesign .kvx-section--dark,
body.kv-redesign .kvx-contact.kvx-section--dark {
  background-color: #064e3b !important;
  color: var(--kv-a11y-dark-text) !important;
}

body.kv-redesign .kvx-section--dark .kvx-lead,
body.kv-redesign .kvx-section--dark .kvx-commit p,
body.kv-redesign .kvx-contact.kvx-section--dark .kvx-contact__list li,
body.kv-redesign .kvx-contact.kvx-section--dark .kvx-contact__empty {
  color: #e2e8f0 !important;
}

body.kv-redesign .kvx-section--dark .kvx-kicker {
  background: #fef3c7 !important;
  border-color: #fde68a !important;
  color: var(--kv-a11y-green-hover) !important;
}

body.kv-redesign .kvx-contact__card h3,
body.kv-redesign .kvx-contact__side .kvx-contact__card h3 {
  color: var(--kv-a11y-dark-text) !important;
}

body.kv-redesign .kvx-contact .kvx-form .kvx-field-group label {
  color: #334155 !important;
}

body.kv-redesign .kvx-commit__idx {
  color: rgb(253 230 138 / 72%) !important;
}

/* Keyboard focus must be visible on both page themes. */
body.kv-public :where(a, button, input, select, textarea):focus-visible,
body.kv-redesign :where(a, button, input, select, textarea):focus-visible {
  outline: 3px solid var(--kv-a11y-focus) !important;
  outline-offset: 3px !important;
}

[data-theme="dark"] body.kv-redesign,
[data-theme="dark"] body.kv-public {
  --text-muted: var(--kv-a11y-dark-muted) !important;
  --kv-muted: var(--kv-a11y-dark-muted) !important;
  --kvd-ink: var(--kv-a11y-dark-text) !important;
  --kvd-ink-muted: var(--kv-a11y-dark-muted) !important;
  --kvd-green: #6ee7b7 !important;
}

[data-theme="dark"] body.kv-redesign .kh-filter-label,
[data-theme="dark"] body.kv-redesign .kvx-gv-card__role,
[data-theme="dark"] body.kv-redesign .kvp-info-card h3,
[data-theme="dark"] body.kv-public .kh-filter-label {
  color: #a7f3d0 !important;
}

[data-theme="dark"] body.kv-redesign .kvp-head p,
[data-theme="dark"] body.kv-redesign .kvp-lead,
[data-theme="dark"] body.kv-redesign .kvx-lead,
[data-theme="dark"] body.kv-redesign .kh-testimonial p,
[data-theme="dark"] body.kv-redesign .bv-card span:not(.bv-card__cat) {
  color: var(--kv-a11y-dark-muted) !important;
}

[data-theme="dark"] body.kv-public :where(a, button, input, select, textarea):focus-visible,
[data-theme="dark"] body.kv-redesign :where(a, button, input, select, textarea):focus-visible {
  outline-color: #fbbf24 !important;
}

/* The branded header deliberately remains a light surface in both themes. */
[data-theme="dark"] .kv-site-header,
[data-theme="dark"] body.kv-public .kv-site-header,
[data-theme="dark"] body.kv-redesign .kv-site-header {
  background: rgb(255 255 255 / 96%) !important;
  border-bottom-color: #dbe7e1 !important;
  color: var(--kv-a11y-ink) !important;
}

[data-theme="dark"] .kv-site-header .kv-desktop-nav a,
[data-theme="dark"] .kv-site-header .kv-desktop-nav a:hover,
[data-theme="dark"] .kv-site-header .kv-desktop-nav a.text-kv-yellow,
[data-theme="dark"] .kv-site-header .kv-theme-toggle {
  color: var(--kv-a11y-ink) !important;
}

[data-theme="dark"] .kv-site-header .kv-theme-toggle {
  border-color: #94a3b8 !important;
  background: #fff !important;
}

[data-theme="dark"] body.kv-redesign .kvx-section--dark .kvx-kicker {
  color: var(--kv-a11y-green-hover) !important;
}

[data-theme="dark"] body.kv-redesign .kvx-contact .kvx-form .kvx-field-group label {
  color: var(--kv-a11y-dark-text) !important;
}

[data-theme="dark"] body.kv-redesign .kvx-contact .kvx-form .kvx-req {
  color: #fde68a !important;
}

/* Why choose: the source stylesheet hardcodes white rows while dark mode
   switches the text token to light. Keep the entire component in one theme. */
[data-theme="dark"] body.kv-redesign .kvx-why-section {
  background:
    radial-gradient(circle at 15% 0%, rgb(4 120 87 / 16%), transparent 34%),
    var(--kv-a11y-dark) !important;
}

[data-theme="dark"] body.kv-redesign .kvx-why__grid {
  background: var(--kv-a11y-dark-surface) !important;
  border-color: #334155 !important;
  box-shadow: 0 20px 55px -34px rgb(0 0 0 / 72%) !important;
}

[data-theme="dark"] body.kv-redesign .kvx-why__item,
[data-theme="dark"] body.kv-redesign .kvx-why__item:nth-child(4),
[data-theme="dark"] body.kv-redesign .kvx-why__item:nth-child(5) {
  background: var(--kv-a11y-dark-surface) !important;
  border-color: #334155 !important;
}

[data-theme="dark"] body.kv-redesign .kvx-why__item:first-child {
  background: var(--kv-a11y-green) !important;
}

[data-theme="dark"] body.kv-redesign .kvx-why__item:not(:first-child):hover {
  background: #1f2937 !important;
}

[data-theme="dark"] body.kv-redesign .kvx-why__item:first-child:hover {
  background: var(--kv-a11y-green-hover) !important;
}

[data-theme="dark"] body.kv-redesign .kvx-why__copy h3 {
  color: var(--kv-a11y-dark-text) !important;
}

[data-theme="dark"] body.kv-redesign .kvx-why__copy p {
  color: var(--kv-a11y-dark-muted) !important;
}

[data-theme="dark"] body.kv-redesign .kvx-why__ic {
  background: rgb(110 231 183 / 14%) !important;
  color: #6ee7b7 !important;
}

[data-theme="dark"] body.kv-redesign .kvx-why__item:first-child .kvx-why__ic {
  background: #fbbf24 !important;
  color: #064e3b !important;
}

/* Preserve dark text on the yellow action, including nested label and icons. */
[data-theme="dark"] body.kv-redesign .kvx-commit__cta,
[data-theme="dark"] body.kv-redesign .kvx-commit__cta * {
  color: #064e3b !important;
}

body.kv-redesign .kvp-mile__year {
  color: var(--kv-a11y-green-hover) !important;
}

/* Course and news metadata are content, not decoration. */
body.kv-public .kh-testimonial__meta p,
body.kv-redesign .kh-testimonial__meta p,
body.kv-redesign .bv-fcard__meta,
body.kv-redesign .bv-card__foot {
  color: var(--kv-a11y-muted) !important;
}

body.kv-redesign .bv-fcard__cat,
body.kv-redesign .bv-card__cat {
  color: var(--kv-a11y-green-hover) !important;
}

/* Footer text previously relied on 42-55% opacity and failed on green. */
.kv-footer .kv-footer__social-label,
.kv-footer .kv-footer__contact-row b,
.kv-footer .kv-footer__copy {
  color: #e2e8f0 !important;
}

body.kv-redesign .kv-footer .kv-footer__col h3,
body.kv-public .kv-footer .kv-footer__col h3,
.kv-footer.kv-footer .kv-footer__col h3 {
  color: #e2e8f0 !important;
}

.kv-footer .kv-footer__tagline,
.kv-footer .kv-footer__col a,
.kv-footer .kv-footer__course,
.kv-footer .kv-footer__contact-row,
.kv-footer .kv-footer__addr-line {
  color: #f8fafc !important;
}

body.kv-redesign .kvx-req {
  color: #b91c1c !important;
}

@media (prefers-contrast: more) {
  body.kv-redesign .kvp-cta::before { background: rgb(2 44 34 / 34%); }
  body.kv-redesign .kvp-kicker,
  body.kv-redesign .kvx-kicker { border-width: 2px; }
}