/* =========================================================
 * Competenza Academy – Lernplayer
 * ========================================================= */

.masteriyo-interactive-page {
    --chakra-colors-primary-500: #ed8008 !important;
    --chakra-colors-primary-600: #c96c00 !important;
    color: var(--ca-text);
    background: #f5f6f7 !important;
}

/*
 * Academy-Kopfzeile des Players.
 */
.masteriyo-interactive-header {
    min-height: 76px !important;
    border-top: 3px solid var(--ca-dark) !important;
    border-bottom: 1px solid var(--ca-border) !important;
    background: #ffffff !important;
    box-shadow: none !important;
}

/*
 * Visuelles Academy-Branding ohne Eingriff in React.
 */
.masteriyo-interactive-header::before {
    display: flex;
    width: 240px;
    min-width: 240px;
    height: 72px;
    padding: 16px 24px;
    content: "";
    background:
        #ffffff
        url("https://academy.competenza.com/wp-content/uploads/2026/07/academy_logo_light.svg")
        center / contain
        no-repeat;
    background-origin: content-box;
    box-sizing: border-box;
}

/*
 * Fortschritt.
 */
.masteriyo-interactive-header .chakra-progress__indicator {
    background: var(--ca-academy) !important;
}

/*
 * Inhaltsfläche.
 */
.masteriyo-interactive-page main,
.masteriyo-interactive-page [role="main"] {
    max-width: 1180px;
    margin-inline: auto;
}

/*
 * Player-Schaltflächen.
 */
.masteriyo-interactive-page button {
    border-radius: 0 !important;
}

@media (max-width: 760px) {
    .masteriyo-interactive-header::before {
        width: 170px;
        min-width: 170px;
        padding: 18px;
    }
}