/* ==========================================================================
   EduSphere design system
   Built on Bootstrap 5.3 by overriding its CSS custom properties rather than
   fighting its selectors, so components stay consistent and the stylesheet
   stays small. Supports light and dark themes via [data-bs-theme].
   ========================================================================== */

/* --- tokens --------------------------------------------------------------- */
:root {
    --es-brand-50:  #eaf3f5;
    --es-brand-100: #cfe3e8;
    --es-brand-400: #2b7f93;
    --es-brand-500: #14647a;
    --es-brand-600: #0f4c5c;
    --es-brand-700: #0a3642;
    --es-accent:    #e09f3e;
    --es-accent-600:#c4842a;

    --es-radius-sm: .5rem;
    --es-radius:    .875rem;
    --es-radius-lg: 1.25rem;

    --es-shadow-sm: 0 1px 2px rgba(13, 38, 45, .06), 0 1px 3px rgba(13, 38, 45, .04);
    --es-shadow:    0 4px 12px rgba(13, 38, 45, .08), 0 1px 3px rgba(13, 38, 45, .04);
    --es-shadow-lg: 0 12px 32px rgba(13, 38, 45, .14);

    --es-transition: 160ms cubic-bezier(.4, 0, .2, 1);

    /* Bootstrap overrides */
    --bs-primary: var(--es-brand-600);
    --bs-primary-rgb: 15, 76, 92;
    --bs-link-color: var(--es-brand-500);
    --bs-link-hover-color: var(--es-brand-700);
    --bs-border-radius: var(--es-radius-sm);
    --bs-border-radius-lg: var(--es-radius);
    --bs-body-color: #16242a;
    --bs-body-bg: #f6f8f9;
    --bs-secondary-bg: #eef2f4;
    --bs-border-color: #dde5e8;
    --bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

    --es-surface: #ffffff;
}

[data-bs-theme="dark"] {
    --bs-body-color: #dfe7ea;
    --bs-body-bg: #10181c;
    --bs-secondary-bg: #18232a;
    --bs-border-color: #27363e;
    --bs-link-color: #6fb3c4;
    --bs-link-hover-color: #9ad0dd;
    --bs-emphasis-color: #f2f7f9;

    --es-surface: #162126;

    --es-shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
    --es-shadow:    0 4px 12px rgba(0, 0, 0, .45);
    --es-shadow-lg: 0 12px 32px rgba(0, 0, 0, .55);
}

/* --- base ----------------------------------------------------------------- */
html { scroll-behavior: smooth; }

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

body.edusphere-body {
    background-color: var(--bs-body-bg);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

body.edusphere-body > main { flex: 1 0 auto; }

/* Fluid headings: readable on a phone, confident on a desktop, no breakpoints. */
h1, .h1 { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.35rem); letter-spacing: -.02em; }
h2, .h2 { font-size: clamp(1.35rem, 1.1rem + 1vw, 1.8rem); letter-spacing: -.015em; }
h3, .h3 { font-size: clamp(1.15rem, 1rem + .6vw, 1.4rem); }
.display-6 { font-size: clamp(1.9rem, 1.3rem + 2.6vw, 3rem); letter-spacing: -.03em; }

/* Visible focus for keyboard users, invisible for mouse users. */
:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--es-brand-400) 60%, transparent);
    outline-offset: 2px;
    border-radius: var(--es-radius-sm);
}

.skip-link {
    position: absolute;
    left: -9999px;
    top: .5rem;
    z-index: 1080;
    padding: .6rem 1rem;
    background: var(--es-brand-600);
    color: #fff;
    border-radius: var(--es-radius-sm);
}
.skip-link:focus { left: .5rem; }

/* --- navigation ----------------------------------------------------------- */
.bg-brand {
    background-color: var(--es-brand-600) !important;
    background-image: linear-gradient(135deg, var(--es-brand-600), var(--es-brand-700));
}

.navbar.sticky-top {
    backdrop-filter: saturate(140%) blur(8px);
    box-shadow: var(--es-shadow-sm);
}

.navbar .nav-link {
    border-radius: var(--es-radius-sm);
    padding-inline: .7rem;
    transition: background-color var(--es-transition);
}
.navbar .nav-link:hover,
.navbar .nav-link:focus-visible { background-color: rgba(255, 255, 255, .12); }

.navbar-brand { font-weight: 650; letter-spacing: -.01em; }

.dropdown-menu { box-shadow: var(--es-shadow); border-color: var(--bs-border-color); }
.dropdown-header { font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; }

/* --- surfaces ------------------------------------------------------------- */
.card {
    border-radius: var(--es-radius);
    background-color: var(--es-surface);
}

.shadow-sm { box-shadow: var(--es-shadow-sm) !important; }
.shadow { box-shadow: var(--es-shadow) !important; }

/* Cards that link somewhere lift slightly; static cards do not move. */
.card:has(.stretched-link),
.card.is-interactive {
    transition: transform var(--es-transition), box-shadow var(--es-transition);
}
.card:has(.stretched-link):hover,
.card.is-interactive:hover {
    transform: translateY(-3px);
    box-shadow: var(--es-shadow-lg) !important;
}

a.card { transition: transform var(--es-transition), box-shadow var(--es-transition); }
a.card:hover { transform: translateY(-3px); box-shadow: var(--es-shadow-lg) !important; }

/* --- buttons and controls ------------------------------------------------- */
.btn {
    --bs-btn-font-weight: 550;
    border-radius: var(--es-radius-sm);
    transition: background-color var(--es-transition), border-color var(--es-transition), transform var(--es-transition);
}
.btn:active { transform: translateY(1px); }

.btn-primary {
    --bs-btn-bg: var(--es-brand-600);
    --bs-btn-border-color: var(--es-brand-600);
    --bs-btn-hover-bg: var(--es-brand-700);
    --bs-btn-hover-border-color: var(--es-brand-700);
    --bs-btn-active-bg: var(--es-brand-700);
}

.btn-outline-primary {
    --bs-btn-color: var(--es-brand-600);
    --bs-btn-border-color: var(--es-brand-600);
    --bs-btn-hover-bg: var(--es-brand-600);
    --bs-btn-hover-border-color: var(--es-brand-600);
}

/* Comfortable tap targets on touch screens without bulking up the desktop UI. */
@media (hover: none) and (pointer: coarse) {
    .btn-sm { --bs-btn-padding-y: .4rem; --bs-btn-padding-x: .75rem; min-height: 2.35rem; }
    .list-group-item-action { padding-block: .8rem; }
}

.form-control, .form-select {
    border-radius: var(--es-radius-sm);
    transition: border-color var(--es-transition), box-shadow var(--es-transition);
}
.form-control:focus, .form-select:focus {
    border-color: var(--es-brand-400);
    box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--es-brand-400) 22%, transparent);
}

.form-label { font-weight: 550; font-size: .9rem; }

/* --- hero ----------------------------------------------------------------- */
.hero {
    border-radius: var(--es-radius-lg);
    background-image:
        radial-gradient(circle at 88% 12%, rgba(224, 159, 62, .35), transparent 45%),
        linear-gradient(135deg, var(--es-brand-600), var(--es-brand-700) 70%);
    color: #fff;
    position: relative;
    overflow: hidden;
}
.hero::after {
    content: "";
    position: absolute;
    inset-block-start: -40%;
    inset-inline-end: -10%;
    width: 46%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: rgba(255, 255, 255, .05);
}
.hero > * { position: relative; }

/* --- course cards --------------------------------------------------------- */
/* A fixed-ratio frame the image fills. Setting aspect-ratio on the <img>
   alone is not enough: inside a stretched flex card the box grows taller and
   object-fit crops the sides off the artwork. */
.course-thumb-frame {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    flex: 0 0 auto;
    background-color: var(--bs-secondary-bg);
    border-start-start-radius: var(--es-radius);
    border-start-end-radius: var(--es-radius);
}

.course-thumb-frame > img,
.course-thumb-frame > .course-thumb-placeholder {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Kept for pages that still use a plain image, such as checkout. */
.course-thumb {
    aspect-ratio: 16 / 9;
    object-fit: cover;
    width: 100%;
    border-start-start-radius: var(--es-radius);
    border-start-end-radius: var(--es-radius);
    background-color: var(--bs-secondary-bg);
}

.course-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.card-text-clamp {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.category-tile i { transition: transform var(--es-transition); }
.category-tile:hover i { transform: scale(1.12); }

/* --- tables --------------------------------------------------------------- */
.table > :not(caption) > * > * { padding-block: .7rem; }
.table thead th {
    font-size: .78rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--bs-secondary-color);
    font-weight: 650;
}

/* On narrow screens, tables scroll inside their card instead of the page. */
.table-responsive { border-radius: var(--es-radius); }

/* --- misc ----------------------------------------------------------------- */
.progress-thin { height: .4rem; border-radius: 999px; }
.badge { font-weight: 600; letter-spacing: .01em; }

/* Latin-only content such as emails, codes and URLs. */
.force-ltr { direction: ltr; text-align: start; unicode-bidi: isolate; }

.empty-state { padding-block: clamp(2rem, 6vw, 4rem); }
.empty-state i { opacity: .45; }

footer { background-color: var(--bs-body-bg); }

@media print {
    .navbar, footer, .btn, .pagination, form { display: none !important; }
    body.edusphere-body { background: #fff; }
    .card { box-shadow: none !important; border: 1px solid #ccc !important; }
}