/* STYLES FOR THE CONTENT AREA */

div#page-wrapper.course-pages,
div#page-wrapper.course-presentation,
div#page-wrapper.course-timeline {
    background-color: var(--ins-gray-400);
}

ul.messagelist li {
    margin-bottom: 0;
    padding: 10px 10px 10px 65px;
    font-weight: bold;
    color: var(--ins-gray-700);
}
ul.messagelist li.info {
    background: var(--ins-success-bg-subtle) url(../admin/img/icon-yes.svg) 40px 12px no-repeat;
}

div.wrapper-content {
    padding: 20px 20px 20px;
}

body div.page-heading {
    padding-bottom: 5px;
    padding-left: 40px;
    box-shadow: none;
    background-color: var(--ins-white);
}

div.page-heading h1 {
    margin-top: 20px;
    margin-bottom: 0;
    padding-bottom: 5px;
    color: #5e5f5f;
    /* Unify with admin pages' h1 (admin/css/base.css sets 300 there;
       base.html-only pages fell back to Bootstrap's 600). */
    font-weight: 300;
}

div.row .breadcrumb {
}

div.row .breadcrumb li {
    font-size: 0.9em;
    font-style: italic;
    color: var(--ins-gray-dark);
    list-style-type: none;
}


/* OBJECT TOOLS */

#object-tools-wrapper {
    margin-bottom: 5px;
    border-top: 0 solid var(--ins-gray-700);
    background-color: var(--ins-gray-400);
    box-shadow: 0 2px 3px var(--ins-gray-dark);
}

ul.object-tools {
    display: flex;
    justify-content: left;
    margin-bottom: 0;
    padding-left: 0;
    list-style-type: none;
    font-size: 1.2em;
    float: none;
}

.object-tools li {
    float: none;
    display: inline-block;
    margin-left: 0;
    padding-top: 0;
    padding-bottom: 0;
    height: auto;
    font-size: 13px;
    line-height: 20px;
}

/* The tool of the current page: white on the brand green, the same pairing
   as the active item of the sidebar (global.css). Contrast mode keeps its
   dark-on-teal pairing, see accessible.css. */
.object-tools li.selected-tool a {
    background-color: var(--ins-primary-text-emphasis);
    color: var(--ins-white);
}

/* Excluded from the unselected icon-color rule below -- that one would
   paint the icon in the colour of its own background. */
.object-tools li.selected-tool a span.fa {
    color: var(--ins-white);
}

/* Hover and focus turn the background light gray (see below), for the
   selected tool too. Its icon has to follow the text, or it would stay
   white on light gray. */
.object-tools li.selected-tool a:hover span.fa,
.object-tools li.selected-tool a:focus span.fa {
    color: var(--ins-gray-dark);
}

body.body-small .object-tools { margin-bottom: 0; }
body.body-small .object-tools li a { width: auto; padding-bottom: 5px; }
body.body-medium .object-tools li a span.toolitem-text { display: none; }
body.body-small .object-tools li a span.toolitem-text { display: none; }

.object-tools li a,
.object-tools a:link,
.object-tools a:visited {
    display: inline-block;
    border-width: 0;
    border-radius: 0px;
    padding: 12px 5px 0px;
    width: 110px;
    height: 64px;
    background: transparent;
    font-size: 0.9em;
    font-weight: 300;
    letter-spacing: 0px;
    line-height: 1.5em;
    text-align: center;
    text-transform: none;
    color: var(--ins-gray-dark);
}

.object-tools a:focus, .object-tools a:hover {
    background-color: var(--ins-light) !important;
    color: var(--ins-gray-dark) !important;
    font-weight: 400;
    box-shadow: var(--ins-gray-700) 0 2px 5px;
}

.object-tools a:focus{
    text-decoration: none;
}

.object-tools a.viewsitelink, .object-tools a.golink,.object-tools a.addlink {
    background-repeat: no-repeat;
    background-position: right 7px center;
    padding-right: 26px;
}

.object-tools a.non-clickable-item {
    float: left;
    font-weight: normal;
    color: var(--ins-gray-500);
}

.object-tools a.non-clickable-item:hover {
    background: transparent !important;
    cursor: not-allowed;
    color: var(--ins-gray-500) !important;
    text-shadow: none;
    box-shadow: none;
}
.object-tools a.non-clickable-item:focus .fa,
.object-tools a.non-clickable-item:hover .fa {
    color: var(--ins-gray-500) !important;
}

.object-tools a span.fa {
    display: block;
    margin: 0 auto;
    font-size: 2em;
    /* Same brand-teal as the Administration page's tile icons
       (--ins-primary-text-emphasis, global.css). */
    color: var(--ins-primary-text-emphasis);
}
.object-tools a.non-clickable-item .fa,
.object-tools a.non-clickable-item:hover .fa {
    color: var(--ins-gray-500);
    text-shadow: none;
}

/* tabbing */

li.nav-item {
    list-style-type: none;
}

/* DASHBOARD STYLES */

div.dashboard a {
    font-weight: bold;
}

div.dashboard .card {
    border-radius: 0.5em;
    box-shadow: 0 1px 5px var(--ins-body-bg);
}

div.dashboard .card a:hover,
div.dashboard .card a:focus-visible {
    color: var(--link-hover-color);
}

div.card .card-header a {
    color: var(--ins-white);
}


div.card.card-primary {
    border-color: var(--ins-primary);
}
div.card.card-primary .card-header {
    padding: 0.75em 15px 0.25em;
    background-color: var(--ins-primary);
}
div.card .card-body {
    background-color: var(--ins-body-bg);
}

div.dashboard .card-header {
    padding: 0.75em 1em 0.25em;
}

/* .dashboard, not div.dashboard: matches both the Startseite's
   <div class="dashboard"> and admin/index.html's <body class="dashboard">. */
.dashboard .card-header {
    border-bottom: 2px solid var(--ins-gray-400);
}

/* Teal .card-header + plain <h2>, matching #changelist-filter h2. Used by
   "Recent actions" and "Activity stream". */
.card-header-h2 {
    border-bottom: 2px solid var(--ins-gray-400);
    font-size: 1.2em;
    text-transform: none;
    letter-spacing: 0;
    padding: 5px 15px;
}

.card-header-h2 h2 {
    margin: 0;
    font-size: inherit;
    font-weight: normal;
}

/* Same background as #changelist-filter. Needs the .card ancestor to
   beat "div.card .card-body" above on specificity. */
.card .card-header-h2 + .card-body {
    background-color: var(--ins-light);
}

div.dashboard .card-header a span.fa,
div.dashboard .card-header a h3 {
    font-size: 1.3em;
    font-weight: normal;
}

@media only screen and (min-width: 768px) {
    div.dashboard .card-body {
        min-height: 150px;
    }
}
.card-body a {
    color: var(--ins-link-color);
}

/* LINKS IN THE ROWS OF A LIST */

/* The links in the rows of a list are shown in the brand green, like the
   icons of the object tools and of the sidebar. Buttons in a row bring their
   own colours. Contrast mode keeps its dark blue links, see accessible.css.

   The lists do not share one class, so they are named one by one:
   div#changelist is the changelist of the admin, table#result_list the lists
   of members, reminders, plan contents and weekly report files,
   table#contents the units of a course and the questions of a quiz, and
   table#quiz-data the quiz below the units. The rule lives here and not in
   admin/css/changelists.css, because not all of these pages load that file.

   h2.list-heading is a heading that leads to the list below it, like "Quiz"
   in the contents of a course. */
:is(div#changelist table, table#result_list, table#contents, table#quiz-data) tbody :is(th, td) a:not(.btn),
h2.list-heading a {
    color: var(--ins-primary-text-emphasis);
}

/* The colour stays on hover and focus, so the underline has to mark them. */
:is(div#changelist table, table#result_list, table#contents, table#quiz-data) tbody :is(th, td) a:not(.btn):hover,
:is(div#changelist table, table#result_list, table#contents, table#quiz-data) tbody :is(th, td) a:not(.btn):focus,
h2.list-heading a:hover,
h2.list-heading a:focus {
    text-decoration: underline;
}

/* Link color vs. surrounding stream text was only 1.14:1 (WCAG 1.4.1);
   underline instead of recoloring. */
.stream-info a {
    text-decoration: underline;
}

.ibox-content table tr.text-success a {
    color: var(--ins-success-text-emphasis);
}

div.dashboard ul.list-unstyled li {
    margin-bottom: 0;
    padding: 1.2em 0 0.3em;
    border-bottom: 1px solid var(--ins-gray-400);
}

div.dashboard ul.list-unstyled li:last-child {
    border-bottom-width: 0;
}

div.dashboard ul li button.btn.btn-sm span {
    width: 10px;
}

div.dashboard div.card span.admin-link {
    display: inline-block;
    margin-left: -20px;
    font-size: 2em;
    vertical-align: sub;
}

div.dashboard .card-body h4 {
    margin-top: 0;
    margin-bottom: 0;
    padding: 0.5em 10px 0;
     /* background-color: #f5f5f5;*/
}

div.dashboard .card-body a span.fa {
    font-size: 1.2em;
}

/* MESSAGES */

ul.messages {
    margin-left: 0px;
    padding-left: 0px;
}

ul.messages li {
    list-style-type: none;
    list-style-position: inside;
    padding: 0.5em 1em;
}

/* CONTENT ELEMENTS */

article header.article-title {
    margin-bottom: 50px;
}

article header.article-title p.article-description {
    font-size: 1.2em;
    line-height: 1.75em;
    color: var(--ins-gray);
}

article h2 {
    clear: both;
    padding-top: 30px;
}

.course-article article h2 {
    text-align: center;
}

article h2 a.unit-anchor {
    display: block;
    margin-bottom: 20px;
    font-size: 50%;
}

article p {
    font-size: 1.1em;
    color: #555;
}

article p.article-description {
    line-height: 1.5em;
    color: var(--ins-gray);
}
.course-article article p.article-description { text-align: center; }

p.bold-description {
    font-weight: bold;
}

article table td,
article table th {
    padding: 0.5em;
}

table.contents-table.table-bordered th,
table.contents-table.table-bordered td {
    padding: 0 .5rem;
    border: 1px solid var(--ins-gray-dark);
}

table .row th,
table .row1 th,
table .row2 th,
table .row td,
table .row1 td,
table .row2 td {
    padding: 0.5rem;
}

table tr.text-success {
    color: var(--ins-success-text-emphasis);
}

table.striped-table tbody > tr > td,
table.striped-table tbody > tr > th {
    vertical-align: middle;
}

.osipagination {
    text-align: center;
}

form#profile-update-form label { display: block; }
form#profile-update-form div.col-sm-9 { padding-left: 0; }

form#profile-update-form input[type='text'] {
    width: 70%;
}

form .form-group {
    padding: 0 0 0.5em;
}

form .submit-row {
    padding: 12px 14px;
    margin: 0 2px 20px 0;
    background: var(--ins-body-bg);
    border: 1px solid var(--ins-gray-400);
    border-radius: 4px;
    line-height: 24px;
    text-align: right;
    overflow: hidden;
}


.submit-row p.deletelink-box,
.submit-row a.deletelink {
    display: block;
    float: left;
    margin: 0;
    min-width: 10px;
    padding: 3px 20px;
    border-radius: 5px;
}


.submit-row input[type='submit'],
input.btn.btn-primary,
button.btn.btn-primary,
div a.btn.btn-primary {
    background-color: var(--ins-primary);
    border: 2px solid lightseagreen;
    border-right-color: green;
    border-bottom-color: green;
    color: var(--ins-white);
    font-size: 0.9em;
    font-weight: bold;
}

input.btn.btn-primary:hover,
button.btn.btn-primary:hover {
    box-shadow: 0 0 8px rgba(var(--ins-primary-rgb), 0.9);
}

input.btn-info,
button.btn-info {
    border: 2px solid lightsteelblue;
    border-right-color: steelblue;
    border-bottom-color: steelblue;
    background-color: var(--ins-info);
    color: var(--ins-white);
    font-size: 0.9em;
    font-weight: bold;
}

input.btn.btn-info:hover,
button.btn.btn-info:hover {
    box-shadow: 0 0 8px rgba(var(--ins-info-rgb), 0.9);
}

input.btn.btn-warning,
button.btn.btn-warning {
    border: 2px solid sandybrown;
    border-right-color: darkgoldenrod;
    border-bottom-color: darkgoldenrod;
    background-color: var(--ins-warning);
    color: var(--ins-white);
    font-size: 0.9em;
    font-weight: bold;
}

input.btn.btn-warning:hover,
button.btn-warning:hover {
    box-shadow: 0 0 8px rgba(var(--ins-warning-rgb), 0.9);
}

input.btn.btn-danger,
button.btn.btn-danger,
.submit-row a.deletelink,
div.ibox a.btn.btn-danger {
    border: 2px solid indianred;
    border-right-color: saddlebrown;
    border-bottom-color: saddlebrown;
    background: var(--ins-danger);
    color: var(--ins-white) !important;
    font-size: 0.9em;
    font-weight: bold;
}

input.btn.btn-danger:hover,
button.btn.btn-danger:hover,
.submit-row a.deletelink:focus,
.submit-row a.deletelink:hover,
.submit-row a.deletelink:active {
    box-shadow: 0 0 8px rgba(var(--ins-danger-rgb), 0.9);
}

div.ibox a.btn.btn-success {
    color: var(--ins-white) !important;
    font-weight: bold;
}
div.ibox a.btn.btn-default {
    color: var(--ins-gray-700) !important;
    font-weight: bold;
}

.event-details h2,
.event-details h3 {
    margin-top: 1.5em;
    margin-bottom: 0.5em;
}

.quiz-question {
    border-top: 1px solid var(--ins-gray-400);
    padding: 1em 0;
}

.quiz-result {
    font-size: 1.5em;
    font-weight: bold;
}

/* OVERWRITE SOME STUBBORN STYLES */

hr {
    border-color: var(--ins-gray-700);
}

* .text-lime,
div.page-heading h1 i.fa,
div.page-heading h1 span.fa {
    color: var(--ins-primary) !important;
}

.text-warning a { color: var(--ins-warning) !important; }
.text-danger a { color: var(--ins-danger) !important; }

li.dj-placeholder {
    list-style-type: none;
}

* .text-darkgray {
    color: var(--ins-gray-600) !important;
}
* .text-gray { color: var(--ins-gray-700) !important; }
* .text-white { color: var(--ins-white) !important; }

* .text-bold { font-weight: bold; font-size: 1.2em;}

/* ========================================
   TEXT READABILITY IMPROVEMENTS
   ======================================== */

/* Optimal line-height for reading comfort */
article p,
.vertical-timeline-content p,
.ibox-content p,
div.unit-text-container {
    line-height: 1.7;
}

/* Paragraph spacing for better visual separation */
article p,
.vertical-timeline-content p {
    margin-bottom: 1.2em;
}

/* Constrain text width for optimal readability (65-75 characters per line) */
.course-article .ibox-content article,
.course-pages article,
.course-scorm article {
    max-width: 750px;
    margin-left: auto;
    margin-right: auto;
}

/* Unit text containers */
.unit-text-container {
    max-width: 750px;
}

/* ========================================
   IMAGE SIZING - RESPONSIVE IMAGES
   ======================================== */

/* Make all unit images responsive */
article img,
.vertical-timeline-content img,
.unit-text-container img {
    height: auto;
    display: block;
    margin: 1.5em auto;
}

/* Figures containing images */
article figure {
    margin: 2em 0;
    text-align: center;
}

article figure img {
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* ========================================
   SECTION HIERARCHY - UNIT SEPARATION
   ======================================== */

/* Enhanced spacing and styling for unit titles */
article h2 {
    margin-top: 3em;
    margin-bottom: 1em;
    padding-top: 2em;
    padding-bottom: 0.5em;
    border-top: 2px solid var(--ins-gray-300);
    font-size: 1.8em;
    font-weight: 600;
    color: var(--ins-gray-dark);
}

/* First unit title doesn't need top border */
article h2:first-of-type {
    border-top: none;
    margin-top: 1.5em;
}

/* ========================================
   TIMELINE VIEW - CARD-BASED DESIGN
   ======================================== */

/* Timeline container background */
.course-timeline #vertical-timeline {
    position: relative;
    padding: 2em 0;
}

/* Vertical timeline line */
.vertical-container.light-timeline:before {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 4px;
    background: var(--ins-gray-400);
    margin-left: -2px;
}

/* Timeline block - each item */
.vertical-timeline-block {
    position: relative;
    margin-bottom: 3em;
    min-height: 100px;
}

.vertical-timeline-block:after {
    content: "";
    display: table;
    clear: both;
}

/* Timeline icon circles */
.vertical-timeline-icon {
    position: absolute;
    left: 50%;
    width: 50px;
    height: 50px;
    margin-left: -25px;
    border-radius: 50%;
    box-shadow: 0 0 0 4px var(--ins-white), inset 0 2px 0 rgba(0,0,0,0.08), 0 3px 0 4px rgba(0,0,0,0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
}

.vertical-timeline-icon i {
    color: var(--ins-white);
    font-size: 1.3em;
}

/* Colored icon backgrounds - alternating colors */
.vertical-timeline-icon.navy-bg {
    background-color: var(--ins-primary);
}

.vertical-timeline-icon.blue-bg {
    background-color: #1c84c6;
}

.vertical-timeline-icon.yellow-bg {
    background-color: var(--ins-warning);
}

/* Timeline content cards - default (right side) */
.vertical-timeline-content {
    position: relative;
    margin-left: calc(50% + 40px);
    background: var(--ins-white);
    border-radius: 4px;
    padding: 2em;
    box-shadow: 0 3px 10px rgba(0,0,0,0.1);
    max-width: 600px;
}

/* Arrow pointing to timeline - default (right side cards) */
.vertical-timeline-content:before {
    content: '';
    position: absolute;
    left: -15px;
    top: 20px;
    width: 0;
    height: 0;
    border: 15px solid transparent;
    border-right-color: var(--ins-white);
}

/* Alternate timeline items to left side (odd items) */
.vertical-timeline-block:nth-child(odd) .vertical-timeline-content {
    margin-left: 0;
    margin-right: calc(50% + 40px);
}

/* Arrow for left-side cards points right */
.vertical-timeline-block:nth-child(odd) .vertical-timeline-content:before {
    left: auto;
    right: -15px;
    border-right-color: transparent;
    border-left-color: var(--ins-white);
}

/* Timeline content typography */
.vertical-timeline-content h2 {
    margin-top: 0;
    margin-bottom: 0.8em;
    padding-top: 0;
    border-top: none;
    font-size: 1.6em;
    color: var(--ins-primary);
}

.vertical-timeline-content p {
    margin-bottom: 1em;
    font-size: 1.05em;
    line-height: 1.7;
}

.vertical-timeline-content .bold-description {
    font-size: 1.1em;
    color: var(--ins-gray-700);
    margin-bottom: 1.2em;
}

/* Timeline images */
.vertical-timeline-content img {
    max-width: 100%;
    height: auto;
    max-height: 400px;
    border-radius: 4px;
    margin: 1em 0;
}

/* Responsive timeline - mobile */
@media only screen and (max-width: 768px) {
    .vertical-container.light-timeline:before {
        left: 25px;
    }

    .vertical-timeline-icon {
        left: 25px;
        width: 40px;
        height: 40px;
        margin-left: 0;
    }

    .vertical-timeline-content {
        margin-left: 80px;
        max-width: 100%;
    }

    .vertical-timeline-content:before {
        left: -15px;
    }

    /* Disable alternating on mobile - keep all on right */
    .vertical-timeline-block:nth-child(odd) .vertical-timeline-content {
        margin-left: 80px;
        margin-right: 0;
    }

    .vertical-timeline-block:nth-child(odd) .vertical-timeline-content:before {
        left: -15px;
        right: auto;
        border-left-color: transparent;
        border-right-color: var(--ins-white);
    }
}

/* ========================================
   PAGES VIEW - PDF PAGE STYLE
   ======================================== */

/* Dark gray background for Pages view */
div.course-pages {
    padding-top: 2em;
    padding-bottom: 3em;
}

.course-pages .wrapper-content {
    background-color: #4a4a4a !important;
}

/* Style articles as paper pages */
.course-pages article {
    background: var(--ins-white);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3), 0 0 2px rgba(0, 0, 0, 0.1);
    padding: 3em 4em 3em 6em;
    margin-bottom: 2.5em;
    border-radius: 2px;
    position: relative;
}

/* First article (course introduction) - special styling */
.course-pages article:first-of-type {
    margin-bottom: 3em;
}

/* Subtle page corner effect */
.course-pages article:after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 0 20px 20px;
    border-color: transparent transparent var(--ins-gray-300) transparent;
}

/* Remove text width constraint for Pages view - let article padding control it */
.course-pages article {
    max-width: none;
}

/* Ensure good readability with page margins */
.course-pages article h1,
.course-pages article h2,
.course-pages article h3,
.course-pages article p,
.course-pages article div {
    max-width: 100%;
}

/* Responsive - adjust padding on smaller screens */
@media only screen and (max-width: 768px) {
    .course-pages article {
        padding: 2em 1.5em;
    }
}

/* ========================================
   PRESENTATION VIEW - POWERPOINT SLIDE STYLE
   ======================================== */

/* Dark background for presentation wrapper */
.course-presentation div#page-wrapper {
    padding-top: 1em;
    padding-bottom: 2em;
}

.course-presentation .wrapper-content {
    background-color: #4a4a4a;
}

/* Ensure row doesn't constrain width */
.course-presentation .row {
    max-width: 100%;
}

.course-presentation .col-lg-12 {
    max-width: 100%;
    padding: 0;
}

/* Main slides container */
.course-presentation .course_slides {
    width: 95%;
    margin: 0 auto;
    padding-top: 3em;
}

/* Slick slide containers - minimal styling, let Slick handle positioning */
.course-presentation .course_slides .course-slide,
.course-presentation .course_slides .unit-slide {
    width: 98%;
    display: block;
}

/* Inner slide content box - all visual styling here */
.course-presentation .course_slides .slide-inner {
    background: var(--ins-white);
    padding: 3em 4em;
    margin: 0 auto 2em;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4), 0 0 3px rgba(0, 0, 0, 0.2);
    border: none;
    width: 90%;
    max-width: 2000px;

    /* 4:3 aspect ratio for all slides */
    aspect-ratio: 4 / 3;

    /* Enable scrolling if content exceeds slide height */
    overflow: auto;

    display: block;
    position: relative;
}

/* Title slide inner - centered content */
.course-presentation .course_slides .course-slide .slide-inner {
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
}

/* Unit slide inner - standard layout */
.course-presentation .course_slides .unit-slide .slide-inner {
    padding-top: 4em;
    padding-bottom: 4em;
}

/* Slide titles */
.course-presentation .course_slides h1 {
    margin-top: 0;
    margin-bottom: 0.5em;
    font-size: 4em;
    line-height: 1.2;
    color: var(--ins-gray-dark);
}

.course-presentation .course_slides h2 {
    margin-top: 0;
    margin-bottom: 0.8em;
    padding-top: 0;
    border-top: none;
    font-size: 2.8em;
    color: var(--ins-primary);
}

/* Slide content */
.course-presentation .course_slides .unit-text-container {
    max-width: none;
    width: 90%;
    margin: 0 auto;
}

.course-presentation .course_slides p {
    font-size: 2em;
    line-height: 1.6;
    margin-bottom: 1em;
    color: var(--ins-gray-dark);
}

.course-presentation .course_slides .bold-description {
    font-size: 2em;
    color: var(--ins-gray-dark);
    font-weight: bold;
}

/* Images in slides */
.course-presentation .course_slides img {
    max-width: 70%;
    height: auto;
    display: block;
    margin: 1em auto;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.course-presentation .course_slides figure {
    margin: 1em 0;
}

/* Thumbnail navigation strip styling */
.course-presentation #slicknavi {
    background: rgba(0, 0, 0, 0.3);
    padding: 0.5em 0;
    margin-bottom: 0;
}

/* Style for all thumbnail navigation items */
.course-presentation #slicknavi .slick-slide {
    background: rgba(255, 255, 255, 0.7);
    height: 70px;
    padding: 0.5em;
    margin: 0 20px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    overflow: hidden;
    font-size: 0.3em;
    border: 2px solid transparent;
    transition: all 0.3s ease;
    border-radius: 3px;
}
.course-presentation #slicknavi .slick-slide h1,
.course-presentation #slicknavi .slick-slide h2,
.course-presentation #slicknavi .slick-slide h2,
.course-presentation #slicknavi .slick-slide h4,
.course-presentation #slicknavi .slick-slide h5 {
    font-size: 0.5em;
}

/* Highlight current slide in navigation */
.course-presentation #slicknavi .slick-current {
    background: var(--ins-white) !important;
    border: 3px solid var(--ins-primary) !important;
    box-shadow: 0 4px 10px rgba(var(--ins-primary-rgb), 0.3) !important;
    transform: scale(1.05);
}

/* Responsive adjustments for presentation view */
@media only screen and (max-width: 1200px) {
    .course-presentation .course_slides {
        width: 95%;
        padding: 2em 3em;
    }

    .course-presentation .ibox-content h1 {
        font-size: 2.5em;
    }

    .course-presentation .ibox-content h2 {
        font-size: 1.9em;
    }
}

@media only screen and (max-width: 768px) {
    .course-presentation .course_slides .ibox-content {
        width: 98%;
        padding: 1.5em 2em;
        aspect-ratio: 4 / 3; /* Taller ratio for mobile */
    }

    .course-presentation .ibox-content h1 {
        font-size: 2em;
    }

    .course-presentation .ibox-content h2 {
        font-size: 1.5em;
    }

    .course-presentation .ibox-content p {
        font-size: 1.1em;
    }
}

/* ========================================
   FULLSCREEN / DISTRACTION-FREE MODE
   ======================================== */

/* Hide UI elements in fullscreen mode */
.fullscreen-mode #side-menu,
.fullscreen-mode .navbar-static-side,
.fullscreen-mode #object-tools-wrapper,
.fullscreen-mode .sidenav-user {
    display: none !important;
}

.fullscreen-mode .breadcrumb,
.fullscreen-mode .page-heading,
.fullscreen-mode footer {
    display: none !important;
}

/* Adjust page wrapper for fullscreen */
.fullscreen-mode #page-wrapper {
    margin: 0 !important;
    padding: 0 !important;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
}

/* Make content fill screen */
.fullscreen-mode .wrapper-content {
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    height: 100%;
}

/* Ensure topbar stays visible */
.fullscreen-mode .osianto-topbar,
.fullscreen-mode .navbar-header,
.fullscreen-mode .nav.navbar-top-links {
    display: block !important;
    position: relative;
    z-index: 9999;
}

/* Hide fullscreen enter button when in fullscreen */
.fullscreen-mode #fullscreen-enter {
    display: none !important;
}

/* Exit fullscreen button - only visible in fullscreen mode */
#fullscreen-exit {
    display: none;
    position: fixed;
    top: 70px;
    right: 20px;
    z-index: 10000;
    padding: 10px 15px;
    font-size: 1.1em;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.fullscreen-mode #fullscreen-exit {
    display: block;
}

/* Smooth transitions for fullscreen mode */
#page-wrapper,
.wrapper-content,
#side-menu {
    transition: all 0.3s ease;
}

/* Adjust course content in fullscreen */
.fullscreen-mode .course-presentation .wrapper-content,
.fullscreen-mode .course-timeline .wrapper-content,
.fullscreen-mode .course-article .wrapper-content,
.fullscreen-mode .course-pages .wrapper-content {
    padding-top: 80px !important;
}

/* Remove slide constraints in fullscreen for better scaling */
.fullscreen-mode .course-presentation .course_slides .slide-inner,
.fullscreen-mode .course-presentation .slide-inner {
    min-width: 0 !important;
    min-height: 0 !important;
}

/* FONT CHANGELIST */

/* The font's colour as a block next to its sample (Font.color_swatch()):
   some certificate colours can't be read as text on white, so the sample
   alone doesn't show them. The thin border keeps white and the pale
   colours (yellow, silver, aqua) visible against the white table. */
.font-color-swatch {
    display: inline-block;
    width: 20px;
    height: 20px;
    vertical-align: middle;
    border: 1px solid var(--ins-gray-700);
}

/* Samples of fonts in a pale colour (silver, lime, aqua, yellow, white -
   meant for dark certificate backgrounds) sit on a very dark gray, where
   they reach 8-16:1 instead of 1-2:1 on white (Font.sample()). The padding
   keeps the text off the edge of its dark backing. */
.font-sample-on-dark {
    padding: 0.1em 0.4em;
    background-color: var(--ins-gray-dark);
    border-radius: 3px;
}

/* DATE RANGE */

/* The "From"/"to" captions of templates/includes/date_range.html are
   <label>s now (BLUE-609), and labels pick up rules the old <span>s never
   saw: admin's ".aligned label" floats them at a fixed width with a 26px
   ::after strut, admin's "label" turns them gray. Reset to the look the
   captions had, datepicker3.css's .input-daterange .input-group-addon. */
.input-daterange label.input-group-addon {
    display: block;
    float: none;
    width: auto;
    margin-bottom: 0;
    padding: 4px 5px;
    line-height: 1.428571429;
    color: inherit;
}

.input-daterange label.input-group-addon::after {
    content: none;
}

/* The format hint below the range; --ins-gray-700 keeps 6.5:1 on white. */
.date-range-format {
    margin-top: 0.25em;
    font-size: 0.85em;
    color: var(--ins-gray-700);
}