/*
 * VextaLearn public shell
 *
 * This is the last public stylesheet loaded by base.html. It is intentionally
 * small and token-led: page-specific files can still shape a page, but shared
 * text contrast, controls, cards and responsive behaviour have one source of
 * truth. Dashboard layouts do not load base.html and are not affected.
 */

:root {
  --vexta-primary: #6D28D9;
  --vexta-primary-dark: #5B21B6;
  --vexta-primary-light: #F5F3FF;
  --vexta-gold: #F59E0B;
  --vexta-gold-light: #FFFBEB;
  --vexta-text: #17121F;
  --vexta-text-secondary: #5F5668;
  --vexta-bg: #FFFFFF;
  --vexta-surface: #F8F7FC;
  --vexta-border: #E9E4F0;
  --vexta-success: #16A34A;
  --vexta-error: #DC2626;
  --vexta-warning: #D97706;
  --vexta-radius-sm: 10px;
  --vexta-radius-md: 14px;
  --vexta-radius-lg: 18px;
  --vexta-radius-xl: 24px;
  --vexta-shadow-sm: 0 1px 2px rgba(23, 18, 31, .05);
  --vexta-shadow-md: 0 8px 24px rgba(23, 18, 31, .08);
  --vexta-transition: 180ms ease;
  --text-secondary: var(--vexta-text-secondary);
  --text-muted: #776D82;
  --border: var(--vexta-border);
  --border-light: #F1EDF7;
  --public-max-width: 1240px;
}

html[data-theme="dark"] body {
  --text-secondary: #C7B9D9;
  --text-muted: #A997BF;
  --border: #3E2D61;
  --border-light: #2F224A;

  /* Dark counterparts for the --vexta-* tokens declared in :root above.
     body.courses-catalog / body.course-detail / body.instructor-profile-page
     (and home.css's --vl-* chain) read var(--vexta-bg)/var(--vexta-surface)/
     var(--vexta-text)/var(--vexta-text-secondary)/var(--vexta-border)/
     var(--vexta-primary-light)/var(--vexta-gold-light) directly for page
     background, body text, borders and tints. Only the plain --text-secondary/
     --border above were ever redefined here, so those three pages stayed on
     their light-mode colors with dark mode toggled on. Values mirror main.css's
     html[data-theme="dark"] tokens exactly - no new palette introduced. */
  --vexta-bg: #120D1F;
  --vexta-surface: #1C1430;
  --vexta-text: #F7F2FF;
  --vexta-text-secondary: #C7B9D9;
  --vexta-border: #3E2D61;
  --vexta-primary-light: rgba(109, 40, 217, 0.16);
  --vexta-gold-light: rgba(245, 158, 11, 0.16);
}

body > main,
body > main > .sc-body,
body > main > .jb-body {
  min-width: 0;
}

body .text-muted,
body .text-secondary,
body .cd-muted,
body .cc-muted,
body .sc-muted,
body .jb-empty-copy,
body .job-company-location {
  color: var(--text-muted) !important;
}

body .form-control::placeholder,
body .form-select::placeholder,
body textarea::placeholder,
body input::placeholder {
  color: var(--text-muted);
  opacity: 1;
}

body .form-control,
body .form-select,
body textarea,
body input {
  border-color: var(--border);
  color: var(--text-primary);
}

body .form-control:focus,
body .form-select:focus,
body textarea:focus,
body input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-a15);
}

body .vxt-navbar {
  border-bottom: 1px solid var(--border);
}

body .vxt-navbar .vxt-mobile-menu-primary .nav-link::after,
body .vxt-navbar .vxt-mobile-menu-primary .nav-link.active::after {
  background: var(--vexta-primary);
}

body .vxt-navbar .vx-navbar-wordmark-learn,
body .vxt-navbar .vxt-mobile-menu-primary .nav-link:hover,
body .vxt-navbar .vxt-mobile-menu-primary .nav-link.active {
  color: var(--vexta-primary);
}

body .vxt-navbar .vxt-mobile-menu-cta,
body .vxt-navbar .vxt-mobile-login-btn {
  border-color: var(--vexta-primary-dark);
  background: var(--vexta-primary);
}

body .vxt-navbar .vxt-mobile-menu-cta:hover,
body .vxt-navbar .vxt-mobile-menu-cta:focus-visible,
body .vxt-navbar .vxt-mobile-login-btn:hover {
  border-color: var(--vexta-primary-dark);
  background: var(--vexta-primary-dark);
}

body .vxt-btn-primary,
body .btn-primary {
  border-color: var(--vexta-primary);
  background: var(--vexta-primary);
}

body .vxt-btn-primary:hover,
body .vxt-btn-primary:focus-visible,
body .btn-primary:hover,
body .btn-primary:focus-visible {
  border-color: var(--vexta-primary-dark);
  background: var(--vexta-primary-dark);
}

body .vxt-navbar .nav-link:focus-visible,
body .vxt-navbar .navbar-brand:focus-visible,
body a:focus-visible,
body button:focus-visible,
body input:focus-visible,
body textarea:focus-visible,
body select:focus-visible {
  outline: 3px solid var(--primary-a35);
  outline-offset: 2px;
}

/* One compact internal-page header language. */
body .pg-hero {
  border-radius: 0;
  padding: 56px 0 52px;
}

body .pg-hero h1 {
  font-size: clamp(2rem, 4vw, 3.25rem);
  font-weight: 700;
  letter-spacing: -0.045em;
}

body .pg-hero p {
  color: rgba(255, 255, 255, .86) !important;
}

body .pg-card,
body .cd-panel,
body .course-purchase-card {
  border-color: var(--border);
  box-shadow: 0 8px 24px rgba(15, 23, 42, .06);
}

/* Shared course card geometry: equal image, body and CTA rhythm across
   catalogue, instructor profiles and related course surfaces. */
body .course-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-width: 0;
  overflow: hidden;
}

body .course-thumbnail {
  position: relative;
  height: auto;
  aspect-ratio: 16 / 9;
  padding-top: 0;
  overflow: hidden;
  flex: 0 0 auto;
}

body .course-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

body .course-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
}

body .course-title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  min-height: 2.7em;
}

body .course-desc {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  min-height: 2.9em;
}

body .course-instructor-row {
  min-height: 42px;
}

body .course-footer {
  margin-top: auto;
  min-height: 68px;
}

body .course-footer .vxt-btn-primary {
  white-space: nowrap;
}

/* Make the public job surface data-led: optional facts disappear rather than
   being replaced with guessed values. */
body .jb-job-sub {
  color: var(--text-secondary);
}

body .jb-empty-copy,
body .job-company-location {
  font-size: .85rem;
}

body .jb-detail-section .content,
body .sc-post-body,
body .sc-comment-text {
  color: var(--text-secondary);
}

body .cd-empty-copy {
  padding: 12px 0;
  color: var(--text-secondary);
}

body .cd-accordion .accordion-button,
body .cd-accordion .lesson-row {
  border-color: var(--border-light) !important;
}

body .cd-related-card {
  border-color: var(--border);
}

/* Full footer is now the default public footer. Keep links and metadata
   comfortably readable in both themes. */
body .vxt-ft__links a,
body .vxt-ft__meta,
body .vxt-ft__cta-text,
body .vxt-ft__legal a {
  color: #c4d0dc;
}

body .vxt-footer-simple {
  color: var(--text-secondary);
  border-top-color: var(--border);
}

@media (max-width: 991.98px) {
  body .course-card .course-title {
    font-size: 1rem;
  }

  body .pg-hero {
    padding: 46px 0 42px;
  }
}

@media (max-width: 575.98px) {
  body .pg-hero h1 {
    font-size: 2rem;
  }

  body .course-card .course-footer {
    min-height: 64px;
  }

  body .course-footer .vxt-btn-primary {
    padding-inline: 12px;
    font-size: .78rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  body *,
  body *::before,
  body *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* Phase 2 finish: keep every public surface on the same purple/gold system.
   A few page templates carry older visual-direction blocks for their local
   layout. These final, loaded-last rules intentionally normalize only those
   public surfaces; data, markup and dashboard styling remain untouched. */
body.courses-catalog,
body.course-detail,
body.instructor-profile-page {
  background: var(--vexta-surface);
  color: var(--vexta-text);
}

body.courses-catalog .cc-hero,
body.course-detail .cd-hero,
body.instructor-profile-page .ip-hero {
  background:
    radial-gradient(circle at 88% 10%, rgba(245, 158, 11, .16), transparent 24rem),
    linear-gradient(125deg, var(--vexta-primary-dark), var(--vexta-primary));
}

body.courses-catalog .cc-hero h1,
body.course-detail .cd-title,
body.instructor-profile-page .ip-name {
  letter-spacing: -.04em;
}

body.courses-catalog .pg-eyebrow {
  border-left-color: var(--vexta-gold);
  color: #FEF3C7;
}

body.courses-catalog .catalog-filterbar {
  border-color: rgba(255, 255, 255, .72);
  box-shadow: 0 18px 42px rgba(45, 16, 94, .22);
}

body.courses-catalog .catalog-filterbar .form-control,
body.courses-catalog .catalog-filterbar .form-select {
  background: var(--vexta-surface);
  border-color: var(--vexta-border);
  color: var(--vexta-text);
}

body.courses-catalog .catalog-filterbar .form-control:focus,
body.courses-catalog .catalog-filterbar .form-select:focus {
  border-color: var(--vexta-primary);
  box-shadow: 0 0 0 3px rgba(109, 40, 217, .16);
}

body.courses-catalog .catalog-filterbar .vxt-btn-primary,
body.courses-catalog .course-footer .vxt-btn-primary {
  background: var(--vexta-primary);
  box-shadow: 0 8px 18px rgba(109, 40, 217, .18);
}

body.courses-catalog .catalog-filterbar .vxt-btn-primary:hover,
body.courses-catalog .course-footer .vxt-btn-primary:hover {
  background: var(--vexta-primary-dark);
}

body.courses-catalog .catalog-toolbar,
body.courses-catalog .course-card,
body.courses-catalog .catalog-empty {
  border-color: var(--vexta-border);
  background: var(--vexta-bg);
}

body.courses-catalog .course-card:hover {
  border-color: rgba(109, 40, 217, .36);
  box-shadow: 0 16px 34px rgba(45, 16, 94, .12);
}

body.courses-catalog .course-category,
body.courses-catalog .catalog-results-count i,
body.courses-catalog .catalog-filter-chip {
  color: var(--vexta-primary);
}

body.courses-catalog .course-title,
body.courses-catalog .price-current,
body.courses-catalog .course-footer {
  color: var(--vexta-text);
}

body.courses-catalog .course-desc,
body.courses-catalog .course-instructor-row span,
body.courses-catalog .course-meta {
  color: var(--vexta-text-secondary);
}

body.courses-catalog .price-free {
  color: var(--vexta-primary) !important;
}

body.courses-catalog .catalog-empty-icon {
  background: var(--vexta-primary-light);
  color: var(--vexta-primary);
}

body.course-detail .cd-hero {
  padding: 52px 0 84px;
}

body.course-detail .cd-category-badge {
  background: rgba(245, 158, 11, .13);
  border-color: rgba(245, 158, 11, .34);
  color: #FEF3C7;
}

body.course-detail .course-purchase-card {
  border-color: var(--vexta-border);
  box-shadow: 0 20px 48px rgba(45, 16, 94, .16);
}

body.course-detail .cd-price-current,
body.course-detail .cd-price-free {
  color: var(--vexta-primary) !important;
}

body.course-detail .course-purchase-card .vxt-btn-primary {
  background: var(--vexta-primary);
  box-shadow: 0 10px 18px rgba(109, 40, 217, .18);
}

body.course-detail .course-purchase-card .vxt-btn-primary:hover {
  background: var(--vexta-primary-dark);
}

body.course-detail .cd-panel,
body.course-detail .cd-related-card {
  border-color: var(--vexta-border);
  background: var(--vexta-bg);
}

body.course-detail .cd-panel:hover,
body.course-detail .cd-related-card:hover {
  border-color: rgba(109, 40, 217, .3);
}

body.course-detail .cd-panel-title,
body.course-detail .cd-related-title,
body.course-detail .cd-related-sidebar > h5 {
  color: var(--vexta-text);
}

body.course-detail .cd-panel-title i,
body.course-detail .cd-inclusions i,
body.course-detail .cd-accordion .accordion-button:not(.collapsed) {
  color: var(--vexta-primary) !important;
}

body.course-detail .cd-accordion .accordion-button:not(.collapsed) {
  background: var(--vexta-primary-light);
}

body.course-detail .cd-preview-badge {
  border-color: rgba(109, 40, 217, .24);
  background: var(--vexta-primary-light);
  color: var(--vexta-primary);
}

body.instructor-profile-page {
  --ip-bg: var(--vexta-surface);
  --ip-surface: var(--vexta-bg);
  --ip-surface-raised: #FCFBFF;
  --ip-line: var(--vexta-border);
  --ip-ink: var(--vexta-text);
  --ip-muted: var(--vexta-text-secondary);
  --ip-soft: var(--text-muted);
  --ip-accent: var(--vexta-gold);
  --ip-accent-strong: var(--vexta-primary);
  --ip-success: var(--vexta-primary);
  color: var(--vexta-text);
}

body.instructor-profile-page .vxt-navbar,
body.instructor-profile-page .vxt-footer-simple {
  background: var(--vexta-bg) !important;
  border-color: var(--vexta-border);
}

body.instructor-profile-page main {
  background: var(--vexta-surface);
}

body.instructor-profile-page .ip-headline,
body.instructor-profile-page .ip-bio-preview,
body.instructor-profile-page .ip-stat span,
body.instructor-profile-page .ip-breadcrumb a {
  color: rgba(255, 255, 255, .82) !important;
}

body.instructor-profile-page .ip-panel,
body.instructor-profile-page .course-card {
  background: var(--vexta-bg);
  border-color: var(--vexta-border);
  box-shadow: var(--vexta-shadow-md);
}

body.instructor-profile-page .course-card .course-title,
body.instructor-profile-page .ip-section-title {
  color: var(--vexta-text);
}

body.instructor-profile-page .course-card .course-category,
body.instructor-profile-page .course-card .course-meta i,
body.instructor-profile-page .ip-empty i {
  color: var(--vexta-primary);
}

body.instructor-profile-page .course-card .price-current,
body.instructor-profile-page .course-card .price-free {
  color: var(--vexta-primary);
}

body.instructor-profile-page .ip-expertise-tag {
  color: var(--vexta-primary);
  background: var(--vexta-primary-light);
  border-color: rgba(109, 40, 217, .2);
}

body.instructor-profile-page .ip-body {
  margin-top: -36px;
}

/* About and legal pages share the same compact public rhythm. */
body:has(.ap-hero) .ap-hero,
body:has(.vxt-page-hero) .vxt-page-hero {
  background:
    radial-gradient(ellipse 58% 90% at 10% 50%, rgba(245, 158, 11, .12), transparent 70%),
    linear-gradient(125deg, var(--vexta-primary-dark), var(--vexta-primary));
}

body:has(.ap-hero) .ap-audience__panel--blue {
  background: var(--vexta-primary-dark);
}

body:has(.ap-hero) .ap-quality-card:hover {
  border-color: rgba(109, 40, 217, .28);
}

body:has(.ap-hero) .ap-cta-band {
  background: var(--vexta-primary-dark);
}

body:has(.ap-hero) .ap-cta-band::before {
  background: radial-gradient(ellipse 60% 100% at 50% 0%, rgba(245, 158, 11, .18), transparent 70%);
}

@media (max-width: 767.98px) {
  body.courses-catalog .cc-hero,
  body.course-detail .cd-hero {
    padding-top: 40px;
  }

  body.courses-catalog .catalog-toolbar {
    margin-top: -34px;
  }

  body.course-detail .cd-title {
    font-size: clamp(2rem, 9vw, 2.65rem);
  }
}

@media (max-width: 991.98px) {
  body .vxt-bottom-nav {
    border-top-color: var(--vexta-border);
    box-shadow: 0 -8px 24px rgba(45, 16, 94, .08);
  }

  body .vxt-bottom-nav__item {
    color: var(--text-muted);
  }

  body .vxt-bottom-nav__item.active {
    color: var(--vexta-primary);
  }

  body .vxt-bottom-nav__item:focus-visible {
    outline: 3px solid rgba(109, 40, 217, .25);
    outline-offset: -3px;
  }
}