/* ========================================================================== 
   Public website theme — dark (default) and light.

   Loaded after app.css and the page-level <style> blocks, so every rule here
   is scoped to html[data-theme="dark"] (or adds a new class) and only changes
   what the dark theme needs. Visitors can switch to the light presentation.
   ========================================================================== */

/* ---------- Light-only additions (shared by both themes) ---------------- */

.site-page-hero {
    background: linear-gradient(135deg, #f8d9bd, #fce4cd);
}

/* Theme switch button in the header */
.theme-toggle {
    width: 42px;
    height: 42px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    border: 1px solid rgba(23, 19, 15, 0.22);
    background: transparent;
    color: #17130f;
    font-size: 1.05rem;
    line-height: 1;
}
.theme-toggle:hover,
.theme-toggle:focus-visible {
    background: rgba(23, 19, 15, 0.06);
    border-color: #17130f;
    color: #17130f;
    outline: none;
    box-shadow: 0 0 0 3px rgba(243, 153, 63, 0.3);
}
.theme-toggle .theme-icon--sun { display: none; }

/* ---------- Dark theme --------------------------------------------------- */

html[data-theme="dark"] {
    color-scheme: dark;

    /* Shared design tokens (app.css components read these) */
    --color-bg: #14100c;
    --color-surface: #1e1914;
    --color-surface-alt: #27201a;
    --color-surface-hover: #2a221b;
    --color-border: #3a3027;
    --color-border-strong: #4d4034;
    --color-text-primary: #f4ede3;
    --color-text-secondary: #cdc3b6;
    --color-text-muted: #9d9284;

    /* Bootstrap variables */
    --bs-body-bg: #14100c;
    --bs-body-color: #f4ede3;
    --bs-border-color: #3a3027;
    --bs-link-color: #f5a455;
    --bs-link-hover-color: #f8b76d;
    --bs-box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);

    /* Home page variables */
    --primary-color: #f3993f;
    --dark-blue: #f4ede3;
    --light-gray: #27201a;
    --text-color: #f4ede3;
}

/* Base ------------------------------------------------------------------- */
html[data-theme="dark"],
html[data-theme="dark"] body {
    background-color: #14100c;
    color: #f4ede3;
}
html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] h5,
html[data-theme="dark"] h6 { color: #f4ede3; }
html[data-theme="dark"] a { color: #f5a455; }
html[data-theme="dark"] a:hover { color: #f8b76d; }
html[data-theme="dark"] hr { border-color: #3a3027; opacity: 1; }
html[data-theme="dark"] ::selection { background: rgba(245, 164, 85, 0.35); color: #ffffff; }
html[data-theme="dark"] ::-webkit-scrollbar-track { background: #1e1914; }
html[data-theme="dark"] ::-webkit-scrollbar-thumb { background: #4d4034; }
html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: #f3993f; }

html[data-theme="dark"] .site-page-hero {
    background: linear-gradient(135deg, #2a2118, #14100c);
}

/* Text utilities --------------------------------------------------------- */
html[data-theme="dark"] .text-dark,
html[data-theme="dark"] .text-primary,
html[data-theme="dark"] .link-dark { color: #f4ede3 !important; }
html[data-theme="dark"] .text-secondary,
html[data-theme="dark"] small,
html[data-theme="dark"] .small { color: #cdc3b6; }
html[data-theme="dark"] .text-muted { color: #9d9284 !important; }
html[data-theme="dark"] .text-success { color: #4ade80 !important; }
html[data-theme="dark"] .text-info { color: #f5a455 !important; }
html[data-theme="dark"] .text-warning { color: #fbbf24 !important; }
html[data-theme="dark"] .text-danger { color: #f87171 !important; }

/* Header & navigation ---------------------------------------------------- */
html[data-theme="dark"] .site-navbar {
    background: rgba(20, 16, 12, 0.92) !important;
    border-bottom: 1px solid #3a3027;
}
html[data-theme="dark"] .site-navbar .brand-logo {
    filter: brightness(0) invert(1);
}
html[data-theme="dark"] .navbar { background-color: #14100c !important; border-bottom-color: #3a3027; }
html[data-theme="dark"] .primary-nav-links .nav-link,
html[data-theme="dark"] .navbar .nav-link { color: #cdc3b6; }
html[data-theme="dark"] .primary-nav-links .nav-link:hover,
html[data-theme="dark"] .primary-nav-links .nav-link:focus,
html[data-theme="dark"] .navbar .nav-link:hover,
html[data-theme="dark"] .navbar .nav-link:focus { color: #f8b76d; }
html[data-theme="dark"] .primary-nav-links .nav-link.active,
html[data-theme="dark"] .navbar .nav-link.active { color: #f5a455 !important; }
html[data-theme="dark"] .site-navbar .navbar-toggler-square {
    color: #f4ede3;
    border-color: rgba(244, 237, 227, 0.25);
}
html[data-theme="dark"] .site-navbar .navbar-toggler-square:hover { color: #f5a455; }
html[data-theme="dark"] .navbar-toggler.navbar-toggler-square {
    background-color: #f4ede3;
    color: #14100c;
}
html[data-theme="dark"] .navbar-toggler.navbar-toggler-square:hover { background-color: #ffffff; }
html[data-theme="dark"] .primary-nav-actions { border-top-color: #3a3027; }
html[data-theme="dark"] .theme-toggle {
    border-color: rgba(244, 237, 227, 0.25);
    color: #f4ede3;
}
html[data-theme="dark"] .theme-toggle:hover,
html[data-theme="dark"] .theme-toggle:focus-visible {
    background: rgba(255, 255, 255, 0.08);
    border-color: #f4ede3;
    color: #f4ede3;
}
html[data-theme="dark"] .theme-toggle .theme-icon--moon { display: none; }
html[data-theme="dark"] .theme-toggle .theme-icon--sun { display: inline-block; color: #f5a455; }

/* Buttons ---------------------------------------------------------------- */
html[data-theme="dark"] .btn-primary {
    background-color: #f3993f;
    border-color: #f3993f;
    color: #14100c;
    box-shadow: none;
}
html[data-theme="dark"] .btn-primary:hover,
html[data-theme="dark"] .btn-primary:focus,
html[data-theme="dark"] .btn-primary:active {
    background-color: #f5a455 !important;
    border-color: #f5a455 !important;
    color: #14100c !important;
}
html[data-theme="dark"] .btn-outline-primary {
    color: #f4ede3;
    border-color: #f4ede3;
}
html[data-theme="dark"] .btn-outline-primary:hover {
    background-color: rgba(255, 255, 255, 0.08);
    border-color: #ffffff;
    color: #ffffff;
}
html[data-theme="dark"] .btn-outline-light {
    color: #f4ede3;
    border-color: rgba(244, 237, 227, 0.35);
}
html[data-theme="dark"] .btn-outline-light:hover {
    background-color: rgba(255, 255, 255, 0.08);
    border-color: #f4ede3;
    color: #ffffff;
}
html[data-theme="dark"] .btn-outline-secondary { color: #cdc3b6; border-color: #4d4034; }
html[data-theme="dark"] .btn-outline-secondary:hover { background-color: #27201a; color: #f4ede3; border-color: #4d4034; }
html[data-theme="dark"] .btn-light { background-color: #27201a; border-color: #3a3027; color: #f4ede3; }
html[data-theme="dark"] .btn-light:hover { background-color: #2f271f; color: #f4ede3; }
html[data-theme="dark"] .btn-close { filter: invert(1) grayscale(100%) brightness(200%); }

/* Surfaces & sections ---------------------------------------------------- */
html[data-theme="dark"] .bg-light,
html[data-theme="dark"] .bg-white { background-color: #1e1914 !important; }
html[data-theme="dark"] .bg-primary { background-color: #f3993f !important; color: #14100c; }
html[data-theme="dark"] .bg-primary.text-white { color: #14100c !important; }
html[data-theme="dark"] .bg-success { background-color: #16a34a !important; }

html[data-theme="dark"] .card {
    background-color: #1e1914;
    border-color: #3a3027;
    color: #f4ede3;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}
html[data-theme="dark"] .card-header,
html[data-theme="dark"] .card-footer {
    background-color: rgba(255, 255, 255, 0.02);
    border-color: #3a3027;
}
html[data-theme="dark"] .card.hover-lift:hover {
    border-color: #4d4034;
    box-shadow: 0 16px 32px rgba(0, 0, 0, 0.45);
}
html[data-theme="dark"] .card-title { color: #f4ede3; }
html[data-theme="dark"] .card-text { color: #cdc3b6; }

html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-select {
    background-color: #14100c;
    border-color: #4d4034;
    color: #f4ede3;
}
html[data-theme="dark"] .form-control:focus,
html[data-theme="dark"] .form-select:focus {
    background-color: #14100c;
    border-color: #f5a455;
    color: #f4ede3;
    box-shadow: 0 0 0 3px rgba(243, 153, 63, 0.25);
}
html[data-theme="dark"] .form-control::placeholder { color: #7d7366; }
html[data-theme="dark"] .form-label,
html[data-theme="dark"] .form-check-label { color: #cdc3b6; }
html[data-theme="dark"] .form-check-input { background-color: #14100c; border-color: #4d4034; }
html[data-theme="dark"] .form-check-input:checked { background-color: #f3993f; border-color: #f3993f; }
html[data-theme="dark"] .input-group-text { background-color: #27201a; border-color: #4d4034; color: #cdc3b6; }
html[data-theme="dark"] .form-floating > label { color: #9d9284; }
html[data-theme="dark"] .form-floating > .form-control:focus ~ label,
html[data-theme="dark"] .form-floating > .form-control:not(:placeholder-shown) ~ label { color: #f5a455; }

html[data-theme="dark"] .table { color: #f4ede3; }
html[data-theme="dark"] .table > :not(caption) > * > * { border-bottom-color: #3a3027; color: #f4ede3; }
html[data-theme="dark"] .table thead th { background-color: #27201a; color: #9d9284; border-bottom-color: #3a3027; }
html[data-theme="dark"] .table tbody tr:hover td { background-color: rgba(245, 164, 85, 0.06); }
html[data-theme="dark"] .table-responsive { border-color: #3a3027; }

html[data-theme="dark"] .list-group-item {
    background-color: #1e1914;
    border-color: #3a3027;
    color: #f4ede3;
}
html[data-theme="dark"] .list-group-item.list-group-item-action:hover,
html[data-theme="dark"] .list-group-item.list-group-item-action:focus {
    background-color: #27201a;
    color: #f4ede3;
}
html[data-theme="dark"] .list-group-item.active {
    background-color: #f3993f !important;
    border-color: #f3993f;
    color: #14100c !important;
}

html[data-theme="dark"] .modal-content {
    background-color: #1e1914;
    border-color: #3a3027;
    color: #f4ede3;
}
html[data-theme="dark"] .modal-header,
html[data-theme="dark"] .modal-footer { border-color: #3a3027; }

html[data-theme="dark"] .dropdown-menu {
    background-color: #1e1914;
    border-color: #3a3027;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
}
html[data-theme="dark"] .dropdown-item { color: #cdc3b6; }
html[data-theme="dark"] .dropdown-item:hover,
html[data-theme="dark"] .dropdown-item:focus { background-color: #27201a; color: #f4ede3; }
html[data-theme="dark"] .dropdown-divider { border-color: #3a3027; }

html[data-theme="dark"] .accordion-item { background-color: #1e1914; border-color: #3a3027; }
html[data-theme="dark"] .accordion-button { background-color: #1e1914; color: #f4ede3; }
html[data-theme="dark"] .accordion-button:not(.collapsed) { background-color: #27201a; color: #f5a455; }
html[data-theme="dark"] .accordion-button::after { filter: invert(1) brightness(1.4); }
html[data-theme="dark"] .accordion-body { color: #cdc3b6; }

html[data-theme="dark"] .alert-info { background-color: rgba(245, 164, 85, 0.12); color: #f8b76d; border-color: rgba(245, 164, 85, 0.3); }
html[data-theme="dark"] .alert-success { background-color: rgba(74, 222, 128, 0.1); color: #86efac; border-color: rgba(74, 222, 128, 0.25); }
html[data-theme="dark"] .alert-warning { background-color: rgba(251, 191, 36, 0.1); color: #fcd34d; border-color: rgba(251, 191, 36, 0.25); }
html[data-theme="dark"] .alert-danger { background-color: rgba(248, 113, 113, 0.1); color: #fca5a5; border-color: rgba(248, 113, 113, 0.25); }

html[data-theme="dark"] .badge.bg-primary { background-color: #f3993f !important; color: #14100c !important; }
html[data-theme="dark"] .badge.bg-secondary { background-color: #3a3027 !important; color: #cdc3b6 !important; }
html[data-theme="dark"] .badge.bg-info { background-color: rgba(245, 164, 85, 0.18) !important; color: #f8b76d !important; }
html[data-theme="dark"] .badge.bg-success { background-color: rgba(74, 222, 128, 0.15) !important; color: #4ade80 !important; }
html[data-theme="dark"] .badge.bg-warning { background-color: rgba(251, 191, 36, 0.15) !important; color: #fbbf24 !important; }
html[data-theme="dark"] .badge.bg-danger { background-color: rgba(248, 113, 113, 0.15) !important; color: #f87171 !important; }

html[data-theme="dark"] .pagination .page-link { background-color: #1e1914; border-color: #3a3027; color: #cdc3b6; }
html[data-theme="dark"] .pagination .page-link:hover { background-color: #27201a; color: #f4ede3; }
html[data-theme="dark"] .pagination .page-item.active .page-link { background-color: #f3993f; border-color: #f3993f; color: #14100c; }
html[data-theme="dark"] .pagination .page-item.disabled .page-link { background-color: #1e1914; color: #5a5046; }

html[data-theme="dark"] .breadcrumb-item.active { color: #9d9284; }
html[data-theme="dark"] .breadcrumb-item + .breadcrumb-item::before { color: #5a5046; }

html[data-theme="dark"] .nav-tabs { border-color: #3a3027; }
html[data-theme="dark"] .nav-tabs .nav-link { color: #cdc3b6; }
html[data-theme="dark"] .nav-tabs .nav-link.active,
html[data-theme="dark"] .nav-tabs .nav-link:hover {
    color: #f4ede3;
    background-color: #1e1914;
    border-color: #3a3027 #3a3027 transparent;
}
html[data-theme="dark"] .nav-pills .nav-link { color: #cdc3b6; }
html[data-theme="dark"] .nav-pills .nav-link.active { background-color: #f3993f; color: #14100c; }

html[data-theme="dark"] .progress { background-color: #3a3027; }
html[data-theme="dark"] .progress-bar { background-color: #f3993f; color: #14100c; }

html[data-theme="dark"] .toast { background-color: #1e1914; border-color: #3a3027; color: #f4ede3; }
html[data-theme="dark"] .toast-header { background-color: #27201a; color: #f4ede3; border-color: #3a3027; }

html[data-theme="dark"] footer,
html[data-theme="dark"] footer.bg-dark { background-color: #0b0907 !important; color: #cdc3b6; }

/* Home page -------------------------------------------------------------- */
html[data-theme="dark"] .hero-header {
    background:
        radial-gradient(ellipse at 82% 48%, rgba(243, 153, 63, 0.16), transparent 35%),
        linear-gradient(135deg, #1a1510 0%, #14100c 100%);
}
html[data-theme="dark"] .hero-brand-mark {
    border-color: rgba(244, 237, 227, 0.16);
    background: rgba(30, 25, 20, 0.76);
    box-shadow: none;
}
html[data-theme="dark"] .hero-brand-mark img {
    filter: brightness(0) invert(1);
}
html[data-theme="dark"] .hero-visual::before {
    background: radial-gradient(ellipse at 60% 42%, rgba(243,153,63,.32), rgba(243,153,63,.07) 54%, transparent 72%);
}
html[data-theme="dark"] .hero-portrait-card {
    border-color: rgba(244, 237, 227, 0.14);
    box-shadow: 0 2rem 4.5rem rgba(0, 0, 0, .42);
}
html[data-theme="dark"] .hero-header::after {
    background: linear-gradient(90deg, transparent, rgba(243, 153, 63, 0.3), transparent);
}
html[data-theme="dark"] .hero-eyebrow,
html[data-theme="dark"] .hero-stat-chip {
    background: #1e1914;
    border-color: #3a3027;
    color: #f4ede3;
    box-shadow: none;
}
html[data-theme="dark"] .hero-title__highlight {
    background: linear-gradient(100deg, #f8b76d, #f5a455 60%, #f3993f);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
html[data-theme="dark"] .hero-description,
html[data-theme="dark"] .hero-proof-points { color: #cdc3b6; }
html[data-theme="dark"] .hero-proof-points i { color: #f5a455; }

html[data-theme="dark"] .company-logo {
    background: #1e1914;
    border-color: #3a3027;
    color: #f4ede3;
    box-shadow: none;
}
html[data-theme="dark"] .company-logo__mark img { filter: invert(1) brightness(0.95); }
html[data-theme="dark"] .company-logo__wordmark { color: #f4ede3; }

html[data-theme="dark"] .about-panel {
    background: #1e1914;
    border-color: #3a3027;
    box-shadow: none;
}
html[data-theme="dark"] .about-panel__image { background: #27201a; }
html[data-theme="dark"] .about-benefit { color: #f4ede3; }
html[data-theme="dark"] .about-benefit i { background: #2f271f; color: #f5a455; }

html[data-theme="dark"] .learning-step {
    background: #1e1914;
    border-color: #3a3027;
    box-shadow: none;
}
html[data-theme="dark"] .learning-step__icon { background: #2f271f; color: #f5a455; }
html[data-theme="dark"] .learning-step__number { color: #4d4034; }

html[data-theme="dark"] .featured-course-card {
    background: #1e1914;
    border-color: #3a3027;
    box-shadow: none;
}
html[data-theme="dark"] .featured-course-card__media { background: linear-gradient(135deg, #2f271f, #1e1914); }
html[data-theme="dark"] .featured-course-card__category { background: #2f271f; color: #f8b76d; }
html[data-theme="dark"] .featured-course-card__title { color: #f4ede3; }
html[data-theme="dark"] .featured-course-card__price { color: #f5a455; }
html[data-theme="dark"] .hover-lift:hover {
    border-color: #4d4034 !important;
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.5) !important;
}

html[data-theme="dark"] .section-eyebrow { color: #f5a455; }
html[data-theme="dark"] .badge-new { background: #f5a455; color: #14100c; }

html[data-theme="dark"] .instructor-panel {
    background: #1e1914;
    border: 1px solid #3a3027;
}

html[data-theme="dark"] #faqAccordion .accordion-item {
    background: #1e1914;
    border-color: #3a3027;
    box-shadow: none;
}
html[data-theme="dark"] #faqAccordion .accordion-button { background: #1e1914; color: #f4ede3; }
html[data-theme="dark"] #faqAccordion .accordion-button:not(.collapsed) { background: #27201a; color: #f5a455; }
html[data-theme="dark"] #faqAccordion .accordion-body { color: #cdc3b6; }

html[data-theme="dark"] .faq-aside { background: #1e1914; border-color: #3a3027; }
html[data-theme="dark"] .faq-aside__icon { background: #2f271f; color: #f5a455; }

html[data-theme="dark"] .ui-empty-state { background: #1e1914; border-color: #4d4034; color: #cdc3b6; }