.dash-wrap {
    padding: 60px 0 100px;
    background: var(--ed-color-grey-1, #F2F4F7);
}
.dash-sidebar {
    background: #fff;
    border-radius: 14px;
    padding: 24px 0;
    box-shadow: 0 10px 30px rgba(22, 38, 90, 0.06);
    position: sticky;
    top: 20px;
}
.dash-sidebar .dash-user {
    text-align: center;
    padding: 0 20px 20px;
    border-bottom: 1px solid #eef1f0;
    margin-bottom: 10px;
}
.dash-sidebar .dash-user img {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 10px;
}
.dash-sidebar .dash-user h4 {
    font-size: 16px;
    margin-bottom: 2px;
    color: var(--ed-color-heading-primary, #16265A);
}
.dash-sidebar .dash-user span {
    font-size: 13px;
    color: var(--ed-color-theme-primary, #D6A029);
    text-transform: capitalize;
}
.dash-nav a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 24px;
    color: var(--ed-color-heading-primary, #16265A);
    font-weight: 500;
    font-size: 15px;
    text-decoration: none;
    border-left: 3px solid transparent;
    transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.dash-nav a:hover, .dash-nav a.active {
    background: rgba(214, 160, 41, 0.1);
    border-left-color: var(--ed-color-theme-primary, #D6A029);
    color: var(--ed-color-heading-primary, #16265A);
}
.dash-card {
    background: #fff;
    border-radius: 14px;
    padding: 28px;
    box-shadow: 0 10px 30px rgba(22, 38, 90, 0.06);
    margin-bottom: 24px;
}
.dash-card h3 {
    font-size: 18px;
    margin-bottom: 18px;
    color: var(--ed-color-heading-primary, #16265A);
}
.stat-tile {
    background: #fff;
    border-radius: 14px;
    padding: 24px;
    box-shadow: 0 10px 30px rgba(22, 38, 90, 0.06);
    text-align: center;
    margin-bottom: 24px;
}
.stat-tile .num {
    font-size: 30px;
    font-weight: 700;
    color: var(--ed-color-heading-primary, #16265A);
}
.stat-tile .label {
    color: var(--ed-color-text-body, #6C706F);
    font-size: 14px;
}
.progress-track {
    background: #eef1f0;
    border-radius: 20px;
    height: 8px;
    overflow: hidden;
}
.progress-track .bar {
    background: var(--ed-color-theme-primary, #D6A029);
    height: 100%;
}
.dash-table {
    width: 100%;
}
.dash-table th {
    color: var(--ed-color-text-body, #6C706F);
    font-weight: 600;
    font-size: 13px;
    text-transform: uppercase;
    padding: 10px 12px;
    border-bottom: 2px solid #eef1f0;
    text-align: left;
}
.dash-table td {
    padding: 14px 12px;
    border-bottom: 1px solid #eef1f0;
    vertical-align: middle;
}
.badge-status {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
}
.badge-success { background: rgba(27, 156, 110, .12); color: #1B9C6E; }
.badge-pending { background: rgba(214, 160, 41, .14); color: #A87A16; }
.badge-danger { background: rgba(220, 53, 69, .12); color: #dc3545; }

/* ---- Dashboard buttons ----
   The theme's .ed-primary-btn is a landing-page call to action: 17px/40px
   padding at 16px type, built to stand alone in a hero. The dashboards reuse
   the same class for row-level actions ("Manage", "Edit", "View") and card
   headers ("+ Schedule Live Class", "+ Post Announcement"), where a button
   that size is taller than the table row it sits in — and two in one cell
   ("Manage" + "Edit") wrap onto a second line. Trim it inside .dash-wrap
   only, so heroes, forms and course cards keep the theme's sizing. */
.dash-wrap .ed-primary-btn {
    padding: 10px 20px;
    font-size: 13px;
    gap: 6px;
}
.dash-wrap .ed-primary-btn i {
    font-size: 15px;
}
/* Action cells hold one or two buttons on a single line; letting the label
   itself break ("Watch / Recording") reads as broken rather than compact.
   Scoped to .text-end, which is what every action cell in these tables uses —
   applying it to all cells would stop long titles and announcement copy from
   wrapping. */
.dash-wrap .dash-table td.text-end {
    white-space: nowrap;
}
.dash-wrap .dash-table td.text-end a + a,
.dash-wrap .dash-table td.text-end a + form,
.dash-wrap .dash-table td.text-end form + form {
    margin-left: 6px;
}

.lesson-sidebar {
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 10px 30px rgba(22, 38, 90, 0.06);
    max-height: 80vh;
    overflow-y: auto;
}
.lesson-sidebar .module-title {
    background: var(--ed-color-heading-primary, #16265A);
    color: #fff;
    padding: 14px 20px;
    font-weight: 600;
    font-size: 14px;
}
.lesson-sidebar .lesson-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 20px;
    border-bottom: 1px solid #eef1f0;
    color: var(--ed-color-heading-primary, #16265A);
    text-decoration: none;
    font-size: 14px;
}
.lesson-sidebar .lesson-link.active {
    background: rgba(214, 160, 41, .1);
    color: var(--ed-color-heading-primary, #16265A);
    font-weight: 600;
}
.lesson-sidebar .lesson-link .fa-circle-check { color: #1B9C6E; }

.gateway-option {
    border: 1px solid #eef1f0;
    border-radius: 12px;
    padding: 18px;
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    margin-bottom: 12px;
}
.gateway-option input { width: 18px; height: 18px; }
.gateway-option:has(input:checked) { border-color: var(--ed-color-theme-primary, #D6A029); background: rgba(214, 160, 41, .06); }

.star-rate { color: #D6A029; }

@media (max-width: 991px) {
    .dash-sidebar {
        position: static;
        margin-bottom: 24px;
    }
    .dash-card, .stat-tile {
        padding: 20px;
    }
}

@media (max-width: 575px) {
    .dash-wrap { padding: 32px 0 60px; }
    .dash-table { display: block; overflow-x: auto; white-space: nowrap; }
    .gateway-option { flex-wrap: wrap; }
}

/* Aspire Nations logo is a square icon+wordmark lockup, not a wide wordmark —
   constrain by height so it fits the header/side-menu row instead of the
   default max-width rule stretching it to a 224px-tall square. */
.header .primary-header-inner .header-logo img,
.header .primary-header-inner .header-right .header-logo img {
    max-height: 58px;
    width: auto;
}
.mobile-side-menu .side-menu-head img {
    max-height: 84px;
    width: auto;
}
@media (max-width: 575px) {
    .header .primary-header-inner .header-logo img {
        max-height: 46px;
    }
}

/* The theme's page-header expects bg-img to be a contained photo pinned
   top-right, fading under a light overlay; our gradient is decorative, not a
   photo, so cover the whole banner instead of leaving a hard-edged box. */
.page-header .bg-img {
    background-size: cover !important;
}

/* .hero-bg-wrap has no width of its own in the theme's CSS, so it stretches
   to the photo's unconstrained natural size (~83% of the viewport at our
   image's aspect ratio) instead of the narrower, contained panel this
   template's hero is meant to show. Give it a real width/height and make
   the photo fill it with object-fit so nothing distorts. */
.hero-section-2 .hero-bg-wrap {
    width: 42%;
    height: 700px;
}
.hero-section-2 .hero-bg-wrap .hero-bg,
.hero-section-2 .hero-bg-wrap .hero-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
@media (max-width: 1399px) {
    .hero-section-2 .hero-bg-wrap {
        width: 46%;
        height: 620px;
        right: 0;
    }
}
@media (max-width: 1200px) {
    .hero-section-2 .hero-bg-wrap {
        width: 50%;
        height: 560px;
        right: 0;
    }
}
@media (max-width: 767px) {
    .hero-section-2 .shapes .shape-1 {
        display: none;
    }
}

/* The theme's .hero-text-box has no left/right of its own (the original
   template set it via inline JS), so it falls back to its in-flow static
   position — which lands on top of the headline. Anchor it onto the photo,
   matching the "floating stat card" pattern used elsewhere in this theme. */
.hero-section-2 .hero-bg-wrap .hero-text-box {
    top: 8%;
    right: 12%;
    left: auto;
}
@media (max-width: 1600px) {
    .hero-section-2 .hero-bg-wrap .hero-text-box {
        right: 6%;
    }
}

/* Preloader shows the full Aspire Nations logo instead of the theme's tiny
   favicon-in-a-ring; the logo itself pulses gently as the loading cue. */
#preloader .spinner-logo img {
    width: 200px;
    height: 200px;
    object-fit: contain;
    animation: sc-logo-pulse 1.6s ease-in-out infinite;
}
@keyframes sc-logo-pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(0.92); opacity: 0.7; }
}
@media (max-width: 575px) {
    #preloader .spinner-logo img {
        width: 140px;
        height: 140px;
    }
}

/* Belt-and-braces: if JS never runs (blocked, disabled, or an embedding
   context strips it) the preloader must still not cover the page forever.
   The inline script in base.html hides it as soon as the page loads; this
   pure-CSS fallback hides it a few seconds later regardless. */
#preloader {
    animation: sc-preloader-autohide 0.01s 4s forwards;
}
@keyframes sc-preloader-autohide {
    to { opacity: 0; visibility: hidden; pointer-events: none; }
}

/* Same reasoning for data-background: it's applied by JS, so give the
   sections it targets a sane solid-color fallback that needs no script. */
.footer-section {
    background-color: #0E1730;
}
.page-header .bg-img {
    background-color: #16265A;
}

/* Gold (--ed-color-theme-primary) replaced the theme's original dark teal.
   Teal was dark enough to carry white text as a full-bleed section
   background; gold is a light, warm hue and fails contrast with white text
   at that scale. Keep full-bleed accent blocks navy (still on-brand) and
   only use gold as a light-background accent: buttons, badges, icons. */
.testimonial-section,
.counter-section {
    background-color: var(--ed-color-heading-primary) !important;
}

/* Small badges/buttons that sit ON gold need dark text, not white, for
   the same contrast reason. */
.ed-primary-btn,
.header .primary-header-inner .header-right .header-right-icon .number,
.hero-section-2 .hero-bg-wrap .faq-text-box .faq-thumb-list-wrap .faq-thumb-list li.number,
.scroll-to-top {
    color: var(--ed-color-heading-primary) !important;
}

/* Text placeholder shown instead of a course thumbnail image when a course
   has none (legacy courses only — new ones require a thumbnail). Fills
   whatever box the theme's own .course-thumb/.course-thumb-wrap markup gives
   an <img> in that spot, so it drops in without layout changes. */
.course-thumb-placeholder {
    width: 100%;
    height: 100%;
    min-height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 16px;
    background: linear-gradient(135deg, var(--ed-color-heading-primary, #16265A), #1B9C6E);
    border-radius: inherit;
}
.course-thumb-placeholder span {
    color: #fff;
    font-weight: 600;
    font-size: 15px;
    line-height: 1.4;
}
.course-thumb-placeholder.w-100 {
    aspect-ratio: 16 / 9;
    height: auto;
    min-height: 220px;
}

/* ---- Primary nav ----
   The theme's horizontal menu was sized for ~6 items; Aspire Connect brought
   it to 10 (Home, Courses, Instructors, Opportunities, Community, Aspire
   Connect, Blog, Announcements, About, Contact), which no longer fits next
   to the logo and header-right controls and wrapped onto a second line.
   Two changes keep it on one line: trim the oversized header-right controls
   (47px icon circles, a 40px-padded CTA) down to a sensible size, and tighten
   the menu typography. Below 1400px it still switches to the slide-out menu
   (vendor CSS only does that below 992px). */

/* Never let a single item break across two lines — the menu wraps as a whole
   or not at all. */
.header .primary-header-inner .header-menu-wrap .sub-menu li a {
    white-space: nowrap;
}

/* Header-right controls. The CTA rule is scoped to .header-btn so the theme's
   other .ed-primary-btn uses (heroes, forms, course cards) keep their size. */
.header .primary-header-inner .header-right {
    column-gap: 12px;
}
.header .primary-header-inner .header-right .header-right-icon a {
    height: 40px;
    width: 40px;
    font-size: 18px;
}
.header .primary-header-inner .header-right .header-right-icon .number {
    font-size: 10px;
    min-width: 16px;
    height: 16px;
    line-height: 16px;
}
.header .primary-header-inner .header-right .header-btn {
    padding: 12px 20px;
    font-size: 14px;
}
.header .primary-header-inner .header-right .header-btn i {
    font-size: 15px;
    margin-left: 6px;
}

.header .primary-header-inner .header-right .header-right-item.mobile-toggle-wrap {
    display: none;
}
@media (max-width: 1400px) {
    .header .primary-header-inner .header-menu-wrap .sub-menu {
        display: none;
    }
    .header .primary-header-inner .header-right .header-right-item.mobile-toggle-wrap {
        display: flex;
        align-items: center;
    }
}
@media (min-width: 1401px) {
    /* The theme's container is a fixed 1320px across the whole range where
       this menu is visible, so one set of values covers every desktop
       width — no need for a separate "wide screen" tier. */
    .header .primary-header-inner .header-right-wrap .header-menu-wrap .sub-menu li {
        margin: 0 7px;
    }
    .header .primary-header-inner .header-right-wrap .header-menu-wrap .sub-menu li a {
        font-size: 13px;
    }
    .header-2 .primary-header-inner .header-right-wrap {
        column-gap: 24px;
    }
}