/* Generated from server/src/controllers/templates/simple.ts — do not edit. */

/* Native-app feel: no text selection inside H5P content (matches the editor).
   Real input/editable fields stay selectable so content like Essay / text
   inputs keep working. */
body { -webkit-user-select: none; user-select: none; }
input, textarea, select, [contenteditable="true"], [contenteditable=""],
.ck-content, .h5p-text-input-field textarea, .h5p-essay textarea {
    -webkit-user-select: text; user-select: text;
}

/* Flashcards draws a dark separator line under its description that, on a tall
   card, reads as a stray horizontal line behind the content. Remove it. */
.h5p-flashcards .h5p-description { border-bottom: none !important; }

/* Recolor H5P's blue accents in content to the calm burnt-orange palette:
   Course Presentation progress bar + confirm/OK (core) buttons. */
.h5p-progressbar .h5p-progressbar-part-show {
    background: #dd4f1e !important;
    background-image: none !important;
}
button.h5p-core-button,
button.h5p-core-button:link,
button.h5p-core-button:visited { background: #dd4f1e !important; }
button.h5p-core-button:hover { background: #c0431a !important; }
button.h5p-core-button:focus { background: #a23714 !important; }
button.h5p-core-button:active { background: #83290f !important; }

/* Question-type action buttons (Check / Retry / Show solution) are built by
   H5P.JoubelUI, NOT .h5p-core-button, so they kept H5P's blue while every
   other accent moved to flame. Same ramp; JoubelUI groups hover+focus and
   paints a darker inset shadow while pressed, so mirror that shape. */
button.h5p-joubelui-button,
.h5p-joubelui-button { background: #dd4f1e !important; }
.h5p-joubelui-button:hover,
.h5p-joubelui-button:focus { background: #c0431a !important; }
.h5p-joubelui-button:active {
    background: #a23714 !important;
    box-shadow: inset 0 4px 0 #83290f !important;
}

/* Interactive Book: breathing room at the top/bottom of each page. */
.h5p-interactive-book-chapter {
    padding-top: 18px !important;
    padding-bottom: 18px !important;
}
/* Interactive Book: recolor the green "Summary & submit" controls to accent. */
.h5p-interactive-book-summary-menu-button {
    border-color: #dd4f1e !important;
    color: #dd4f1e !important;
}
.h5p-interactive-book-summary-menu-button:hover {
    background-color: #f9efe8 !important;
}
.h5p-interactive-book-summary-submit {
    background-color: #dd4f1e !important;
    border-color: #dd4f1e !important;
    color: #fff !important;
}
.h5p-interactive-book-summary-submit:hover {
    background-color: #c0431a !important;
    border-color: #c0431a !important;
}
/* The teal focus/click glow on the submit button → warm flame. */
.h5p-interactive-book-summary-submit:focus,
.h5p-interactive-book-summary-submit:focus-visible {
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(221, 79, 30, 0.45) !important;
}
/* The "Summary & submit" MENU button (chapter nav) has a green completed/active
   glow (#0cc9a7) and a teal "current" tint — recolor both to flame. */
.h5p-interactive-book-summary-menu-button[data-book-completed='true'],
.h5p-interactive-book-summary-menu-button:active {
    box-shadow: 0 0 0.625rem rgba(221, 79, 30, 0.55) !important;
}
.h5p-interactive-book-summary-menu-button.h5p-interactive-book-navigation-current {
    background-color: #f9efe8 !important;
    border-bottom-color: #dd4f1e !important;
}
/* The "Submitted" confirmation banner is teal — recolor to the flame tint. */
.h5p-interactive-book-summary-submitted {
    background-color: #f9efe8 !important;
}
.h5p-interactive-book-summary-submitted .icon-chapter-done,
.h5p-interactive-book-summary-submitted p {
    color: #c0431a !important;
}

/* JoubelUI score bar: green "points gained" / IB total-score bar → flame.
   Matches the orange IB progress circles. The gold star and the green/red
   answer-correctness indicators are intentionally left alone. */
.h5p-joubelui-score-bar-progress {
    background: #dd4f1e !important;
    background: linear-gradient(to right, #f06a30, #dd4f1e) !important;
}

/* Page (H5P.Column): centered white card on a grey page (grey shows on the sides
   instead of white gutters). Column renders in an iframe, so the same rules also
   live in h5p-player-overrides.css which is injected into the content iframe. */
html.h5p-iframe:has(.h5p-column),
html.h5p-iframe:has(.h5p-column) > body,
.h5p-content:has(.h5p-column) {
    background: #f1f3f4 !important;
}
.h5p-column {
    max-width: 900px !important;
    margin: 24px auto !important;
    padding: 24px !important;
    background: #fff !important;
    border-radius: 8px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12),
        0 1px 2px rgba(0, 0, 0, 0.08) !important;
    box-sizing: border-box !important;
}
/* Interactive Book chapter containers also carry .h5p-column. Keep the Page
   card styling for standalone H5P.Column only, and restore IB's own layout.
   The iframe/body grey from the Page rule above also matches IB because its
   pages are Columns, so repaint the book surface white after that rule. */
html.h5p-iframe:has(.h5p-interactive-book),
html.h5p-iframe:has(.h5p-interactive-book) > body,
.h5p-content:has(.h5p-interactive-book),
.h5p-interactive-book,
.h5p-interactive-book-main,
.h5p-interactive-book-content,
.h5p-interactive-book-chapter {
    background: #fff !important;
}
.h5p-interactive-book .h5p-interactive-book-chapter.h5p-column {
    max-width: none !important;
    margin: 0 !important;
    padding: 18px 0 !important;
    background: #fff !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* Interactive Book fullscreen: the library moves the footer into the scrollable
   content while fullscreen is active, which can leave a white band underneath on
   portrait phones. Pin the footer to the actual viewport and give the book a
   dynamic viewport height so mobile browser chrome changes do not lift it. */
.h5p-container.h5p-semi-fullscreen:has(.h5p-interactive-book),
.h5p-fullscreen:has(.h5p-interactive-book),
.h5p-semi-fullscreen:has(.h5p-interactive-book),
.h5p-fullscreen .h5p-interactive-book,
.h5p-semi-fullscreen .h5p-interactive-book {
    height: 100dvh !important;
    min-height: 100dvh !important;
}
.h5p-fullscreen .h5p-interactive-book,
.h5p-semi-fullscreen .h5p-interactive-book {
    position: relative !important;
}
.h5p-fullscreen .h5p-interactive-book-main,
.h5p-semi-fullscreen .h5p-interactive-book-main {
    flex: 1 1 auto !important;
    min-height: 0 !important;
}
.h5p-fullscreen .h5p-interactive-book .h5p-interactive-book-content,
.h5p-semi-fullscreen .h5p-interactive-book .h5p-interactive-book-content {
    padding-bottom: calc(4.5em + env(safe-area-inset-bottom, 0px)) !important;
}
.h5p-fullscreen .h5p-interactive-book .h5p-interactive-book-status-footer,
.h5p-semi-fullscreen .h5p-interactive-book .h5p-interactive-book-status-footer {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    z-index: 5 !important;
}

/* Interactive Book navigation: replace width/flex-basis animation with a stable
   overlay drawer. The panel keeps its final width while transform slides it in,
   so chapter titles do not reflow during the animation. */
.h5p-interactive-book-main {
    position: relative !important;
}
.h5p-interactive-book .h5p-interactive-book-navigation {
    flex: 0 0 16.563em !important;
    width: 16.563em !important;
    max-width: 16.563em !important;
    margin-right: -16.563em !important;
    transform: translateX(-100%) !important;
    transition: transform 0.18s ease-out !important;
    will-change: transform;
}
.h5p-interactive-book
    .h5p-interactive-book-main.h5p-interactive-book-navigation-open
    .h5p-interactive-book-navigation {
    transform: translateX(0) !important;
}
.h5p-interactive-book.h5p-interactive-book-small
    .h5p-interactive-book-main
    .h5p-interactive-book-navigation {
    flex-basis: 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-right: -100% !important;
}
/* Wide screens (>= 1200px): when the table-of-contents drawer is OPEN, give it
   real layout space (drop the negative margin) so it PUSHES the page content into
   the remaining width instead of overlaying/covering it. The drawer is also open
   by default at this width (set by the player tweaks). Narrower screens keep the
   overlay drawer, closed by default. The book content is full-width inside the
   remaining pane, so it sits centered in the leftover white space beside the
   drawer rather than under it. */
@media (min-width: 1200px) {
    .h5p-interactive-book:not(.h5p-interactive-book-small)
        .h5p-interactive-book-main.h5p-interactive-book-navigation-open
        .h5p-interactive-book-navigation {
        margin-right: 0 !important;
    }
}
/* During initial boot the content tweaks add the ignitio-ib-booting class to
   <html> so the width-derived default state (open on wide screens) appears
   instantly instead of sliding in. The class is removed on the reader's first
   interaction, so their own menu toggles animate normally afterwards. */
html.ignitio-ib-booting
    .h5p-interactive-book
    .h5p-interactive-book-navigation {
    transition: none !important;
}

/* Interactive Video on small screens: keep the normal timestamp-overlay
   experience. H5P's built-in mobile mode turns interactions into full-video
   dialogs, so Ignitio disables that mode and uses deterministic CSS breakpoints
   instead of resize-driven JS scaling. */
.h5p-interactive-video {
    container-type: inline-size;
}
@container (max-width: 520px) {
    .h5p-interactive-video .h5p-dialog-interaction,
    .h5p-interactive-video .h5p-interaction-inner,
    .h5p-interactive-video .h5p-question {
        font-size: 0.96em !important;
        line-height: 1.18 !important;
    }
    .h5p-interactive-video .h5p-question button,
    .h5p-interactive-video .h5p-question .h5p-joubelui-button,
    .h5p-interactive-video .h5p-question input,
    .h5p-interactive-video .h5p-question textarea,
    .h5p-interactive-video .h5p-question select {
        font-size: 0.95em !important;
        line-height: 1.16 !important;
    }
}
@container (max-width: 380px) {
    .h5p-interactive-video .h5p-dialog-interaction,
    .h5p-interactive-video .h5p-interaction-inner,
    .h5p-interactive-video .h5p-question {
        font-size: 0.9em !important;
        line-height: 1.16 !important;
    }
    .h5p-interactive-video .h5p-question .h5p-joubelui-button,
    .h5p-interactive-video .h5p-question button {
        padding: 0.4em 0.7em !important;
    }
}
@media (max-height: 480px) and (orientation: landscape) {
    .h5p-interactive-video .h5p-dialog-interaction,
    .h5p-interactive-video .h5p-interaction-inner,
    .h5p-interactive-video .h5p-question {
        font-size: 0.94em !important;
        line-height: 1.16 !important;
    }
}
@media (max-width: 600px) and (orientation: portrait) {
    .h5p-interactive-video .h5p-dialog,
    .h5p-interactive-video .h5p-dialog.h5p-big,
    .h5p-interactive-video.mobile .h5p-dialog,
    .h5p-interactive-video.mobile .h5p-dialog.h5p-big {
        height: auto !important;
        max-width: 92% !important;
        max-height: calc(100% - 36px) !important;
        overflow: auto !important;
    }
}

/* Interactive Video fullscreen: H5P centers the video+controls as one block on
   non-16:9 screens. Pin the custom controls to the bottom like a native video
   player, while keeping the video itself in the remaining visual space. */
.h5p-interactive-video.h5p-fullscreen,
.h5p-interactive-video.h5p-semi-fullscreen {
    height: 100dvh !important;
    min-height: 100dvh !important;
}
/* Black letterbox in fullscreen so the area around a 16:9 video reads as an
   intentional video player (like YouTube) instead of white page space. We only
   recolor the backdrop — the video element is NOT resized/object-fit'd, because
   IV interaction overlays are positioned against the video's own coordinate box. */
.h5p-interactive-video.h5p-fullscreen,
.h5p-interactive-video.h5p-semi-fullscreen,
.h5p-interactive-video.h5p-fullscreen .h5p-video-wrapper,
.h5p-interactive-video.h5p-semi-fullscreen .h5p-video-wrapper,
.h5p-container.h5p-semi-fullscreen,
.h5p-container.h5p-fullscreen,
body.h5p-semi-fullscreen {
    background: #000 !important;
}
.h5p-interactive-video.h5p-fullscreen .h5p-controls,
.h5p-interactive-video.h5p-semi-fullscreen .h5p-controls {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 10000 !important;
    pointer-events: auto !important;
    /* Clear the iPhone home-indicator bar: extend the 36px control bar by the
       bottom safe-area inset (0 everywhere else) and pad the buttons up above it
       so the dark bar reaches the screen edge but the controls stay tappable. */
    box-sizing: border-box !important;
    height: calc(36px + env(safe-area-inset-bottom, 0px)) !important;
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
}
.h5p-interactive-video.h5p-fullscreen .h5p-control.h5p-fullscreen,
.h5p-interactive-video.h5p-semi-fullscreen .h5p-control.h5p-fullscreen {
    pointer-events: auto !important;
    position: relative !important;
    z-index: 10001 !important;
}
/* No element Fullscreen API (iPhone Safari) → hide the IV fullscreen button, since
   the only available path there is CSS semi-fullscreen with Safari chrome still
   showing. The class is set by the tweak script via capability detection (not UA).
   iPad/Android/desktop keep the button (they get real fullscreen). */
html.ignitio-no-native-fullscreen .h5p-interactive-video .h5p-control.h5p-fullscreen,
html.ignitio-no-native-fullscreen .h5p-interactive-book-status-fullscreen {
    display: none !important;
}
.h5p-interactive-video.h5p-fullscreen .h5p-dialog-wrapper,
.h5p-interactive-video.h5p-semi-fullscreen .h5p-dialog-wrapper {
    pointer-events: none !important;
}
.h5p-interactive-video.h5p-fullscreen .h5p-dialog,
.h5p-interactive-video.h5p-fullscreen .h5p-dialog *,
.h5p-interactive-video.h5p-semi-fullscreen .h5p-dialog,
.h5p-interactive-video.h5p-semi-fullscreen .h5p-dialog * {
    pointer-events: auto !important;
}
.h5p-interactive-video.h5p-fullscreen .h5p-minimal-overlay,
.h5p-interactive-video.h5p-semi-fullscreen .h5p-minimal-overlay,
.h5p-interactive-video.h5p-fullscreen .h5p-chooser,
.h5p-interactive-video.h5p-semi-fullscreen .h5p-chooser {
    bottom: calc(36px + env(safe-area-inset-bottom, 0px)) !important;
}