/* ============================================================================
   EGKits Public — Color Contrast & Readability Enforcement
   WCAG 2.1 AA: 4.5:1 body text, 3:1 large text, 4.5:1 interactive controls.
   All values derive from tokens.css — never hardcode colors in components.
   ========================================================================== */

/* ── Base readability ───────────────────────────────────────────────────── */
.public-app,
.egk-app-public {
  color: var(--egk-text-primary);
  background-color: var(--egk-bg-primary);
}

.public-app .mud-typography-body1,
.public-app .mud-typography-body2,
.public-app .mud-typography-subtitle1,
.public-app .mud-typography-subtitle2 {
  color: var(--egk-text-primary);
}

.public-app .mud-typography-caption,
.public-app .mud-input-label {
  color: var(--egk-text-secondary);
}

.doc-content-area,
.egk-prose {
  color: var(--egk-text-primary);
}

.doc-content-area a,
.egk-prose a {
  color: var(--egk-color-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}

.doc-content-area a:hover,
.egk-prose a:hover {
  color: var(--mud-palette-primary-darken, var(--egk-color-primary));
  text-decoration-thickness: 2px;
}

/* ── Links (distinct from body text) ────────────────────────────────────── */
.public-app a.mud-link:not(.mud-button-root) {
  color: var(--egk-color-primary);
  font-weight: var(--egk-weight-medium, 500);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.public-app a.mud-link:not(.mud-button-root):hover {
  color: var(--mud-palette-primary-darken, var(--egk-color-primary));
}

/* ── Buttons ────────────────────────────────────────────────────────────── */
.public-app .mud-button-filled.mud-button-filled-primary,
.public-app .mud-button-filled.mud-button-filled-primary .mud-button-label,
.public-app .mud-button-filled.mud-button-filled-primary .mud-icon-root {
  color: var(--egk-color-primary-text) !important;
}

.public-app .mud-button-outlined.mud-button-outlined-primary,
.public-app .mud-button-outlined.mud-button-outlined-primary .mud-button-label {
  color: var(--egk-color-primary);
  border-color: rgba(var(--egk-color-primary-rgb), 0.55);
}

.public-app .mud-button-outlined.mud-button-outlined-primary:hover {
  background: rgba(var(--egk-color-primary-rgb), 0.08);
  border-color: var(--egk-color-primary);
}

.public-app .mud-button-root.mud-button-disabled,
.public-app .mud-button-root:disabled {
  opacity: 1 !important;
  color: var(--egk-text-disabled) !important;
}

.public-app .mud-button-root.mud-button-disabled .mud-button-label,
.public-app .mud-button-root:disabled .mud-button-label {
  color: var(--egk-text-disabled) !important;
}

/* Header CTA on brand appbar — beat MudBlazor filled-primary (white-on-white) */
.showcase-appbar .header-nav__cta-primary.mud-button-root {
  background: var(--egk-cta-surface) !important;
  color: var(--egk-cta-on-surface-label) !important;
  font-weight: var(--egk-weight-bold, 700);
  border-radius: var(--egk-radius-sm, 8px);
  border: 1px solid var(--egk-cta-surface) !important;
}

.showcase-appbar .header-nav__cta-primary .mud-button-label,
.showcase-appbar .header-nav__cta-primary .mud-button-start-icon,
.showcase-appbar .header-nav__cta-primary .mud-icon-root,
.showcase-appbar .header-nav__cta-primary svg {
  color: var(--egk-cta-on-surface-label) !important;
  fill: currentColor !important;
}

.showcase-appbar .header-nav__cta-primary:hover {
  background: rgba(255, 255, 255, 0.92) !important;
  filter: none;
}

.showcase-appbar .header-nav__cta-primary:hover .mud-button-label,
.showcase-appbar .header-nav__cta-primary:hover .mud-button-start-icon,
.showcase-appbar .header-nav__cta-primary:hover .mud-icon-root,
.showcase-appbar .header-nav__cta-primary:hover svg {
  color: var(--egk-cta-on-surface-label) !important;
  fill: currentColor !important;
}

/* Appbar search field — force light text on dark appbar */
.showcase-appbar .header-nav__search-input .mud-input-control,
.showcase-appbar .header-nav__search-input .mud-input-slot,
.showcase-appbar .header-nav__search-input input,
.showcase-appbar .header-nav__search-input textarea {
  color: var(--egk-on-brand) !important;
  -webkit-text-fill-color: var(--egk-on-brand) !important;
}

.showcase-appbar .header-nav__search-input input::placeholder,
.showcase-appbar .header-nav__search-input textarea::placeholder {
  color: var(--egk-on-brand-subtle) !important;
  opacity: 1 !important;
  -webkit-text-fill-color: var(--egk-on-brand-subtle) !important;
}

.showcase-appbar .header-nav__search-input .mud-input-adornment .mud-icon-root,
.showcase-appbar .header-nav__search-input .mud-input-adornment svg {
  color: var(--egk-on-brand-muted) !important;
  fill: currentColor !important;
}

.showcase-appbar .header-nav__search-input .mud-input-outlined-border {
  border-color: var(--egk-cta-on-gradient-border) !important;
}

.showcase-appbar .header-nav__search-input .mud-input-root {
  background: var(--egk-cta-on-gradient-hover-bg) !important;
}

/* Appbar text/outline action buttons (exclude filled header CTA) */
.showcase-appbar .header-nav__action-btn:not(.header-nav__cta-primary).mud-button-root,
.showcase-appbar .header-nav__action-btn:not(.header-nav__cta-primary) .mud-button-label,
.showcase-appbar .header-nav__action-btn:not(.header-nav__cta-primary) .mud-icon-root,
.showcase-appbar .header-nav__button,
.showcase-appbar .header-nav__button .mud-button-label,
.showcase-appbar .header-nav__button .mud-icon-root {
  color: var(--egk-on-brand-muted) !important;
}

.showcase-appbar .header-nav__button--active,
.showcase-appbar .header-nav__button--active .mud-button-label {
  color: var(--egk-on-brand) !important;
}

.showcase-appbar .header-nav__action-btn--secondary {
  border: 1px solid var(--egk-cta-on-gradient-border) !important;
}

.showcase-appbar .header-nav__action-btn--secondary .mud-button-label,
.showcase-appbar .header-nav__action-btn--secondary .mud-icon-root {
  color: var(--egk-on-brand) !important;
}

/* Marketing CTAs on gradient bands */
.public-app .marketing-cta-btn--primary {
  background-color: var(--egk-cta-surface) !important;
  border: 1px solid var(--egk-cta-surface) !important;
}

.public-app .marketing-cta-btn--primary,
.public-app .marketing-cta-btn--primary .mud-button-label,
.public-app .marketing-cta-btn--primary .mud-icon-root,
.public-app .marketing-cta-btn--primary svg {
  color: var(--egk-cta-on-surface-label) !important;
  fill: currentColor !important;
}

.public-app .marketing-cta-btn--secondary {
  border: 1px solid var(--egk-cta-on-gradient-border) !important;
  background-color: transparent !important;
}

.public-app .marketing-cta-btn--secondary,
.public-app .marketing-cta-btn--secondary .mud-button-label,
.public-app .marketing-cta-btn--secondary .mud-icon-root,
.public-app .marketing-cta-btn--secondary svg {
  color: var(--egk-cta-on-gradient-fg) !important;
  fill: currentColor !important;
}

.public-app .marketing-cta-btn--secondary:hover {
  background-color: var(--egk-cta-on-gradient-hover-bg) !important;
  border-color: var(--egk-on-brand) !important;
}

/* Hero / docs hub CTAs on dark gradients (site-wide; beats MudBlazor label colors) */
.public-app .hero-section .hero-cta-btn--primary.mud-button-root,
.public-app .hero-section .public-hero-cta-primary.mud-button-root,
.public-app .docs-hero .hero-cta-btn--primary.mud-button-root,
.public-app .docs-quick-actions .hero-cta-btn--primary.mud-button-root,
.public-app .hero-section .mud-button-filled.mud-button-root,
.public-app .docs-hero .mud-button-filled.mud-button-root,
.public-app .docs-quick-actions .mud-button-filled.mud-button-root,
.public-app .cta-gradient .mud-button-filled.mud-button-root,
.public-app .docs-cta .mud-button-filled.mud-button-root,
.public-app .marketing-cta-panel .mud-button-filled.mud-button-root,
.public-app .security-cta .mud-button-filled.mud-button-root,
.public-app .emergency-support .mud-button-filled.mud-button-root,
.public-app .demo-intro .mud-button-filled.mud-button-root {
  background-color: var(--egk-cta-surface) !important;
  color: var(--egk-cta-on-surface-label) !important;
  border: 1px solid var(--egk-cta-surface) !important;
  font-weight: var(--egk-weight-bold, 700);
  text-transform: none;
}

.public-app .hero-section .hero-cta-btn--primary .mud-button-label,
.public-app .hero-section .hero-cta-btn--primary .mud-button-start-icon,
.public-app .hero-section .hero-cta-btn--primary .mud-icon-root,
.public-app .hero-section .public-hero-cta-primary .mud-button-label,
.public-app .hero-section .public-hero-cta-primary .mud-button-start-icon,
.public-app .hero-section .public-hero-cta-primary .mud-icon-root,
.public-app .docs-hero .hero-cta-btn--primary .mud-button-label,
.public-app .docs-hero .hero-cta-btn--primary .mud-button-start-icon,
.public-app .docs-hero .hero-cta-btn--primary .mud-icon-root,
.public-app .docs-quick-actions .hero-cta-btn--primary .mud-button-label,
.public-app .docs-quick-actions .hero-cta-btn--primary .mud-button-start-icon,
.public-app .docs-quick-actions .hero-cta-btn--primary .mud-icon-root,
.public-app .hero-section .mud-button-filled .mud-button-label,
.public-app .hero-section .mud-button-filled .mud-button-start-icon,
.public-app .hero-section .mud-button-filled .mud-icon-root,
.public-app .docs-hero .mud-button-filled .mud-button-label,
.public-app .docs-hero .mud-button-filled .mud-button-start-icon,
.public-app .docs-hero .mud-button-filled .mud-icon-root,
.public-app .docs-quick-actions .mud-button-filled .mud-button-label,
.public-app .docs-quick-actions .mud-button-filled .mud-button-start-icon,
.public-app .docs-quick-actions .mud-button-filled .mud-icon-root,
.public-app .cta-gradient .mud-button-filled .mud-button-label,
.public-app .cta-gradient .mud-button-filled .mud-button-start-icon,
.public-app .cta-gradient .mud-button-filled .mud-icon-root,
.public-app .docs-cta .mud-button-filled .mud-button-label,
.public-app .docs-cta .mud-button-filled .mud-icon-root,
.public-app .marketing-cta-panel .mud-button-filled .mud-button-label,
.public-app .marketing-cta-panel .mud-button-filled .mud-icon-root,
.public-app .hero-section .mud-button-filled svg,
.public-app .docs-hero .mud-button-filled svg,
.public-app .docs-quick-actions .mud-button-filled svg,
.public-app .cta-gradient .mud-button-filled svg {
  color: var(--egk-cta-on-surface-label) !important;
  fill: currentColor !important;
}

.public-app .hero-section .hero-cta-btn--secondary.mud-button-root,
.public-app .hero-section .public-hero-cta-secondary.mud-button-root,
.public-app .docs-hero .hero-cta-btn--secondary.mud-button-root,
.public-app .docs-quick-actions .hero-cta-btn--secondary.mud-button-root,
.public-app .hero-section .mud-button-outlined.mud-button-root,
.public-app .docs-hero .mud-button-outlined.mud-button-root,
.public-app .docs-quick-actions .mud-button-outlined.mud-button-root {
  background-color: transparent !important;
  border-color: var(--egk-cta-on-gradient-border) !important;
  color: var(--egk-on-brand) !important;
  text-transform: none;
}

.public-app .hero-section .hero-cta-btn--secondary .mud-button-label,
.public-app .hero-section .hero-cta-btn--secondary .mud-icon-root,
.public-app .hero-section .public-hero-cta-secondary .mud-button-label,
.public-app .hero-section .public-hero-cta-secondary .mud-icon-root,
.public-app .docs-hero .hero-cta-btn--secondary .mud-button-label,
.public-app .docs-hero .hero-cta-btn--secondary .mud-icon-root,
.public-app .docs-quick-actions .hero-cta-btn--secondary .mud-button-label,
.public-app .docs-quick-actions .hero-cta-btn--secondary .mud-icon-root,
.public-app .hero-section .mud-button-outlined .mud-button-label,
.public-app .hero-section .mud-button-outlined .mud-icon-root,
.public-app .docs-hero .mud-button-outlined .mud-button-label,
.public-app .docs-hero .mud-button-outlined .mud-icon-root,
.public-app .docs-quick-actions .mud-button-outlined .mud-button-label,
.public-app .docs-quick-actions .mud-button-outlined .mud-icon-root {
  color: var(--egk-on-brand) !important;
  fill: currentColor !important;
}

.public-app .hero-section .hero-cta-btn--text.mud-button-root,
.public-app .hero-section .public-hero-cta-tertiary.mud-button-root,
.public-app .docs-hero .hero-cta-btn--text.mud-button-root,
.public-app .docs-quick-actions .hero-cta-btn--text.mud-button-root,
.public-app .hero-section .mud-button-text.mud-button-root,
.public-app .docs-hero .mud-button-text.mud-button-root,
.public-app .docs-quick-actions .mud-button-text.mud-button-root {
  background: transparent !important;
  color: var(--egk-on-brand-muted) !important;
  text-transform: none;
}

.public-app .hero-section .hero-cta-btn--text .mud-button-label,
.public-app .hero-section .hero-cta-btn--text .mud-icon-root,
.public-app .hero-section .public-hero-cta-tertiary .mud-button-label,
.public-app .hero-section .public-hero-cta-tertiary .mud-icon-root,
.public-app .docs-hero .hero-cta-btn--text .mud-button-label,
.public-app .docs-hero .hero-cta-btn--text .mud-icon-root,
.public-app .docs-quick-actions .hero-cta-btn--text .mud-button-label,
.public-app .docs-quick-actions .hero-cta-btn--text .mud-icon-root,
.public-app .hero-section .mud-button-text .mud-button-label,
.public-app .hero-section .mud-button-text .mud-icon-root,
.public-app .docs-hero .mud-button-text .mud-button-label,
.public-app .docs-hero .mud-button-text .mud-icon-root,
.public-app .docs-quick-actions .mud-button-text .mud-button-label,
.public-app .docs-quick-actions .mud-button-text .mud-icon-root {
  color: var(--egk-on-brand-muted) !important;
  fill: currentColor !important;
}

.public-app .hero-section .hero-cta-btn--text:hover,
.public-app .hero-section .public-hero-cta-tertiary:hover,
.public-app .docs-hero .hero-cta-btn--text:hover,
.public-app .docs-quick-actions .hero-cta-btn--text:hover,
.public-app .hero-section .mud-button-text:hover,
.public-app .docs-hero .mud-button-text:hover,
.public-app .docs-quick-actions .mud-button-text:hover {
  background: var(--egk-cta-on-gradient-hover-bg) !important;
}

.public-app .hero-section .hero-cta-btn--text:hover .mud-button-label,
.public-app .hero-section .hero-cta-btn--text:hover .mud-icon-root,
.public-app .docs-hero .hero-cta-btn--text:hover .mud-button-label,
.public-app .docs-hero .hero-cta-btn--text:hover .mud-icon-root,
.public-app .docs-quick-actions .hero-cta-btn--text:hover .mud-button-label,
.public-app .docs-quick-actions .hero-cta-btn--text:hover .mud-icon-root,
.public-app .hero-section .mud-button-text:hover .mud-button-label,
.public-app .docs-hero .mud-button-text:hover .mud-button-label,
.public-app .docs-quick-actions .mud-button-text:hover .mud-button-label {
  color: var(--egk-on-brand) !important;
}

/* Text-style CTA on gradient (e.g. Talk to Sales) */
.public-app .home-final-cta__sales.mud-button-root,
.public-app .home-final-cta__sales .mud-button-label,
.public-app .home-final-cta__sales .mud-icon-root {
  color: var(--egk-on-brand-muted) !important;
  border: none !important;
  background: transparent !important;
}

.public-app .home-final-cta__sales:hover {
  background: var(--egk-cta-on-gradient-hover-bg) !important;
}

.public-app .home-final-cta__sales:hover .mud-button-label,
.public-app .home-final-cta__sales:hover .mud-icon-root {
  color: var(--egk-on-brand) !important;
}

.public-app .home-final-cta__title {
  color: var(--egk-on-brand);
}

.public-app .home-final-cta__lead {
  color: var(--egk-on-brand-muted);
}

/* ── On-brand surfaces (appbar, heroes) ─────────────────────────────────── */
.showcase-appbar,
.showcase-appbar .mud-button-root:not(.header-nav__cta-primary),
.showcase-appbar .mud-icon-button,
.showcase-appbar .brand-title {
  color: var(--egk-on-brand);
}

.showcase-appbar .brand-subtitle {
  color: var(--egk-on-brand-muted);
  opacity: 1;
}

.showcase-appbar .header-nav__search-input input {
  color: var(--egk-on-brand);
}

.showcase-appbar .header-nav__search-input input::placeholder {
  color: var(--egk-on-brand-subtle);
  opacity: 1;
}

/* Language switcher on dark appbar — MudText defaults to theme body color */
.showcase-appbar .language-selector-trigger,
.showcase-appbar .language-selector-trigger .mud-button-label,
.showcase-appbar .language-selector-trigger .language-code,
.showcase-appbar .language-selector-trigger .language-display .mud-typography,
.showcase-appbar .language-selector-trigger .language-display .mud-typography-body2,
.showcase-appbar .language-selector-trigger .dropdown-arrow,
.showcase-appbar .language-selector-trigger .dropdown-arrow .mud-icon-root,
.showcase-appbar .language-selector-trigger .mud-icon-root,
.showcase-appbar .language-selector-trigger svg {
  color: var(--egk-on-brand) !important;
}

.showcase-appbar .language-selector-trigger:hover .language-code,
.showcase-appbar .language-selector-trigger:hover .dropdown-arrow,
.showcase-appbar .language-selector-trigger:hover .dropdown-arrow .mud-icon-root {
  color: var(--egk-on-brand) !important;
}

.hero-section,
.docs-search-hero,
.doc-page-header--hero,
.cta-gradient,
.docs-cta,
.marketing-cta-panel {
  color: var(--egk-on-brand);
}

.hero-section .mud-typography-h1,
.hero-section .mud-typography-h2,
.hero-section .mud-typography-h3,
.hero-section .mud-typography-h4,
.hero-section .mud-typography-h5,
.docs-search-hero .mud-typography-h1,
.cta-gradient .mud-typography-h3,
.cta-gradient .mud-typography-h4,
.docs-cta .mud-typography-h3,
.docs-cta__title,
.doc-page-header__title {
  color: var(--egk-on-brand) !important;
}

.doc-page-header--hero .mud-breadcrumbs,
.doc-page-header--hero .mud-breadcrumb-item,
.doc-page-header--hero .mud-breadcrumb-item a,
.doc-page-header--hero .mud-breadcrumbs-separator,
.doc-page-header__breadcrumbs,
.doc-page-header__breadcrumbs .mud-breadcrumb-item,
.doc-page-header__breadcrumbs .mud-breadcrumb-item a,
.doc-page-header__subtitle,
.doc-page-header--hero .mud-typography-body1 {
  color: var(--egk-on-brand-muted) !important;
}

.doc-page-header__breadcrumbs .mud-breadcrumb-item:last-child,
.doc-page-header__breadcrumbs .mud-breadcrumb-item:last-child .mud-typography,
.doc-page-header--hero .mud-typography-h3 {
  color: var(--egk-on-brand) !important;
}

.hero-section .mud-typography-body1,
.hero-section .mud-typography-body2,
.hero-section .mud-typography-h5,
.docs-search-hero .docs-search-hero__subtitle,
.docs-cta .mud-typography-body1,
.docs-cta__lead {
  color: var(--egk-on-brand-muted) !important;
}

.doc-page-header__meta-chip,
.doc-page-header__meta-chip .mud-chip-content,
.doc-page-header__meta-chip .mud-icon-root {
  color: var(--egk-on-brand-muted) !important;
}

.doc-page-header__tag-chip {
  color: var(--egk-on-brand-muted) !important;
  border-color: var(--egk-cta-on-gradient-border);
}

.doc-page-header__avatar {
  background: rgba(255, 255, 255, 0.18);
  color: var(--egk-on-brand) !important;
}

/* Hero search panel — dark text on light input surface */
.doc-search-panel--on-hero .doc-search-panel__surface {
  background: var(--egk-bg-secondary);
  color: var(--egk-text-primary);
}

.doc-search-panel--on-hero .doc-search-panel__input input,
.doc-search-panel--on-hero .doc-search-panel__input .mud-input-slot {
  color: var(--egk-text-primary);
}

.doc-search-panel--on-hero .doc-search-panel__input input::placeholder {
  color: var(--egk-text-secondary);
  opacity: 1;
}

.doc-search-panel--on-hero .doc-search-panel__filters {
  background: var(--egk-bg-primary);
  color: var(--egk-text-primary);
}

.doc-search-panel--on-hero .doc-search-panel__filters .mud-input-label,
.doc-search-panel--on-hero .doc-search-panel__filters .mud-input-slot,
.doc-search-panel--on-hero .doc-search-panel__filters .mud-select-input {
  color: var(--egk-text-primary);
}

.docs-topic-card__desc {
  color: var(--egk-text-secondary);
}

/* ── Portal shell ───────────────────────────────────────────────────────── */
.portal-shell {
  color: var(--egk-text-primary);
  background: var(--egk-bg-primary);
}

.portal-hero,
.portal-plan-card {
  color: var(--egk-on-brand);
}

.portal-hero__subtitle,
.portal-stat__suffix {
  color: var(--egk-on-brand-muted);
  opacity: 1;
}

/* ── High-contrast accessibility mode ───────────────────────────────────── */
.high-contrast.public-app,
.public-app.high-contrast {
  --egk-text-secondary: var(--egk-text-primary);
  --egk-on-brand-muted: var(--egk-on-brand);
  --egk-on-brand-subtle: var(--egk-on-brand-muted);
}

.high-contrast .mud-typography-caption {
  color: var(--egk-text-primary);
}

/* ── Eliminate illegible opacity fades on text ──────────────────────────── */
.public-app .mud-typography-body1,
.public-app .mud-typography-body2,
.public-app .mud-typography-subtitle1,
.public-app .mud-typography-subtitle2,
.public-app p,
.public-app li {
  opacity: 1;
}