/* Nexvera platform layer - site-wide styles.
   Brand tokens are declared once here and reused, so every future page,
   course and section inherits the same design language. */

:root {
    --nv-ink: #1d1d1d;
    --nv-blue: #0999d6;
    --nv-blue-action: #0077a8;
    --nv-navy: #00293f;
    --nv-gold: #fab91a;
    --nv-surface: #f7f8fa;
    --nv-border: #e3e7ec;
}

/* Language switcher */
.nexvera-langswitch {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin-inline-end: 0.75rem;
    padding: 0.15rem;
    border: 1px solid var(--nv-border);
    border-radius: 999px;
    background: #fff;
    line-height: 1;
}

.nexvera-langswitch__item {
    display: inline-block;
    padding: 0.35rem 0.7rem;
    border-radius: 999px;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--nv-ink);
    text-decoration: none;
    white-space: nowrap;
}

a.nexvera-langswitch__item:hover,
a.nexvera-langswitch__item:focus {
    background: var(--nv-surface);
    color: var(--nv-blue-action);
    text-decoration: none;
}

a.nexvera-langswitch__item:focus-visible {
    outline: 2px solid var(--nv-blue-action);
    outline-offset: 2px;
}

.nexvera-langswitch__item--current {
    background: var(--nv-navy);
    color: #fff;
    cursor: default;
}

/* Safety net: raw multilang markup must never reach the learner if the
   Multi-Language Content filter is ever switched off on a context. */
.dir-rtl .nexvera-langswitch {
    margin-inline-end: 0.75rem;
}

/* The lesson-level language toggle is superseded by the site-wide switcher in
   the header. Language is now resolved on the server (filter_multilang2 plus the
   stored user language), so an in-lesson toggle can only disagree with the page
   that has already been rendered. Hidden here rather than removed from the old
   inline script, because that script also renders the lesson header and the
   previous/next controls; it is scheduled for replacement by a generic module,
   not a partial edit. */
/* Two classes plus the element selector, because the legacy inline CSS in
   Additional HTML forces display on .nv-lesson-action with !important and is
   injected after this file. Remove this rule once that block is gone. */
a.nv-lesson-action.nv-lesson-language {
    display: none !important;
}

/* ---------------------------------------------------------------------------
   Lesson screens inside the course index
   ---------------------------------------------------------------------------
   The screens of the lesson being viewed are nested under its entry in the
   course index, so the drawer is the single place a learner navigates from.
   Logical properties are used throughout, so the same rules serve the drawer on
   the left in English and on the right in Arabic with no mirrored copy.
   --------------------------------------------------------------------------- */

.nexvera-pagetree {
    margin: 0.25rem 0 0.4rem;
    padding-inline-start: 0.75rem;
    border-inline-start: 1px solid var(--nv-border);
    list-style: none;
}

.nexvera-pagetree__item + .nexvera-pagetree__item {
    margin-top: 1px;
}

.nexvera-pagetree__link {
    display: flex;
    align-items: baseline;
    gap: 0.45rem;
    padding: 0.3rem 0.45rem;
    border-radius: 6px;
    color: #46515c;
    font-size: 0.8125rem;
    line-height: 1.45;
    text-decoration: none;
}

a.nexvera-pagetree__link:hover,
a.nexvera-pagetree__link:focus-visible {
    background: var(--nv-surface);
    color: var(--nv-blue-action);
    text-decoration: none;
}

.nexvera-pagetree__marker {
    flex: 0 0 auto;
    width: 6px;
    height: 6px;
    margin-top: 0.35rem;
    border: 1px solid #b7c0c9;
    border-radius: 50%;
}

.nexvera-pagetree__label {
    flex: 1 1 auto;
}

.nexvera-pagetree__item.is-seen .nexvera-pagetree__marker {
    border-color: var(--nv-pine, #00574f);
    background: var(--nv-pine, #00574f);
}

.nexvera-pagetree__item.is-current > .nexvera-pagetree__link {
    background: var(--nv-surface);
    color: var(--nv-ink);
    font-weight: 700;
}

.nexvera-pagetree__item.is-current .nexvera-pagetree__marker {
    border-color: var(--nv-blue-action);
    background: var(--nv-blue-action);
}

.nexvera-pagetree__item.is-locked > .nexvera-pagetree__link {
    color: #9aa3ac;
    cursor: not-allowed;
}

/* The in-lesson contents button is retired: the course index now carries the
   whole structure, so a second way in would only duplicate it. Hidden with the
   element plus two classes because the legacy inline CSS still forces display
   on .nv-lesson-action with !important; remove this once that block is gone. */
a.nv-lesson-action.nv-lesson-action--index,
a.nv-lesson-index {
    display: none !important;
}

/* ---------------------------------------------------------------------------
   Smooth page-to-page navigation
   ---------------------------------------------------------------------------
   Moodle serves a full page per lesson screen, so the browser normally tears
   the old page down before the new one paints - that blank gap is the flash.
   Cross-document view transitions tell the browser to hold the last painted
   frame until the next document is ready, then cross-fade between them. The
   navigation itself is unchanged: same URLs, same server rendering, no
   client-side page swapping, so nothing about correctness or accessibility
   depends on JavaScript here.

   This is site-wide by design: it applies to every link on every page, so any
   course or section added later inherits it with no extra work.
   --------------------------------------------------------------------------- */

@view-transition {
    navigation: auto;
}

/* The main content area is the part that actually changes between screens, so
   it is given its own name and a slightly longer fade than the surrounding
   chrome. The header and drawers stay visually still, which is what makes the
   move feel like changing panels in an application rather than loading a page. */
#region-main {
    view-transition-name: nv-main;
}

::view-transition-old(root),
::view-transition-new(root) {
    animation-duration: 160ms;
    animation-timing-function: ease;
}

::view-transition-old(nv-main) {
    animation: nv-fade-out 140ms ease both;
}

::view-transition-new(nv-main) {
    animation: nv-fade-in 220ms ease both;
}

@keyframes nv-fade-out {
    to {
        opacity: 0;
        transform: translateY(-4px);
    }
}

@keyframes nv-fade-in {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
}

/* Users who ask their system for less motion get the plain, instant swap. */
@media (prefers-reduced-motion: reduce) {
    ::view-transition-old(root),
    ::view-transition-new(root),
    ::view-transition-old(nv-main),
    ::view-transition-new(nv-main) {
        animation: none;
    }
}

/* ---------------------------------------------------------------------------
   The lesson as a floating window
   ---------------------------------------------------------------------------
   A lesson screen is a place to concentrate, so it is lifted off the page: the
   surrounding surface recedes, and the screen itself becomes a raised panel
   with its own scroll, the way a window behaves in a desktop application.

   The course index drawer is deliberately NOT dimmed or covered. It is the
   navigation for the lesson, so it has to stay reachable; the separation is
   made with elevation and a receding background rather than a modal backdrop
   that would put the drawer out of reach.

   Scoped to body.path-mod-lesson, so it applies to every lesson on the site,
   now and later, and to nothing else.
   --------------------------------------------------------------------------- */

body.path-mod-lesson #page-content {
    background:
        radial-gradient(120% 80% at 50% 0%, rgba(9, 153, 214, 0.10), transparent 60%),
        var(--nv-surface);
}

body.path-mod-lesson #region-main-box {
    padding-block: clamp(0.75rem, 2.5vh, 2rem);
    padding-inline: clamp(0.5rem, 2vw, 2rem);
}

body.path-mod-lesson #region-main {
    max-width: 60rem;
    max-height: calc(100vh - 9rem);
    margin-inline: auto;
    border: 1px solid rgba(0, 41, 63, 0.08);
    border-radius: 18px;
    background: #fff;
    box-shadow:
        0 1px 2px rgba(0, 41, 63, 0.06),
        0 18px 45px rgba(0, 41, 63, 0.18);
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* The panel owns the scrolling, so the page behind it stays still - that is
   what makes it read as a window rather than a section of the document. */
body.path-mod-lesson #topofscroll {
    overflow: visible;
}

/* The lesson header stays put while the screen's content scrolls under it. */
body.path-mod-lesson #nv-lesson-head {
    position: sticky;
    top: 0;
    z-index: 3;
    background: #fff;
}

/* Short viewports and phones: a fixed panel height would trap content, so the
   window relaxes back into the page rather than becoming a scroll cage. */
@media (max-width: 767px), (max-height: 620px) {
    body.path-mod-lesson #region-main {
        max-height: none;
        border-radius: 12px;
        overflow-y: visible;
    }

    body.path-mod-lesson #nv-lesson-head {
        position: static;
    }
}

/* ---------------------------------------------------------------------------
   Overrides forced by the legacy inline CSS
   ---------------------------------------------------------------------------
   Everything below repeats a rule already stated earlier in this file. It is
   here only because the inline block in Additional HTML declares the same
   properties with !important and is injected after this stylesheet, so the
   earlier, cleaner rules lose. Every declaration in this section is deleted
   the day that block is removed - none of it is design, all of it is defence.
   --------------------------------------------------------------------------- */

/* The drawer forces white link text. Unreadable for the page tree, which sits
   on a light surface, so the colours are restated at the same weight. */
#courseindex .nexvera-pagetree__link {
    color: #46515c !important;
}

#courseindex a.nexvera-pagetree__link:hover,
#courseindex a.nexvera-pagetree__link:focus-visible {
    color: var(--nv-blue-action) !important;
    background: rgba(255, 255, 255, 0.65) !important;
}

#courseindex .nexvera-pagetree__item.is-current > .nexvera-pagetree__link {
    color: var(--nv-ink) !important;
    background: rgba(255, 255, 255, 0.85) !important;
}

#courseindex .nexvera-pagetree__item.is-locked > .nexvera-pagetree__link {
    color: #8c96a0 !important;
}

/* The window behaviour: a capped height with its own scroll is what separates
   a panel from a stretch of page, and the legacy block sets both properties. */
body.path-mod-lesson #region-main {
    max-height: calc(100vh - 9rem) !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
}

@media (max-width: 767px), (max-height: 620px) {
    body.path-mod-lesson #region-main {
        max-height: none !important;
        overflow-y: visible !important;
    }
}

/* Collapse control for the lesson branch. */
.nexvera-pagetree-toggle {
    width: 1.25rem;
    height: 1.25rem;
    padding: 0;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: inherit;
    cursor: pointer;
    flex: 0 0 auto;
}

.nexvera-pagetree-toggle::before {
    content: "";
    display: block;
    width: 0.42rem;
    height: 0.42rem;
    margin: 0 auto;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform 140ms ease;
}

.nexvera-pagetree-collapsed .nexvera-pagetree-toggle::before {
    transform: rotate(-45deg);
}

@media (prefers-reduced-motion: reduce) {
    .nexvera-pagetree-toggle::before {
        transition: none;
    }
}

/* The whole drawer is styled for white text by the legacy inline block, which
   leaves every label washed out against its light surface. Restated here at the
   same weight until that block is removed. */
#courseindex .courseindex-link,
#courseindex .courseindex-sectiontitle,
#courseindex .courseindex-item,
#courseindex .nexvera-pagetree-toggle {
    color: var(--nv-ink) !important;
}

#courseindex .courseindex-sectiontitle {
    font-weight: 700 !important;
}

/* ---------------------------------------------------------------------------
   The page tree carries its own surface
   ---------------------------------------------------------------------------
   The tree is appended to the activity's entry in the drawer, and that entry
   does not always sit on the section's light panel - where it overflows, the
   page background shows through and the labels lose their contrast.

   Rather than guessing what will be behind it, the tree paints its own opaque
   surface. Contrast then holds whatever the drawer, the theme or the legacy CSS
   does underneath, which is the only version of this that stays correct without
   supervision.
   --------------------------------------------------------------------------- */

#courseindex .nexvera-pagetree {
    padding: 0.35rem 0.4rem;
    padding-inline-start: 0.6rem;
    border: 1px solid rgba(0, 41, 63, 0.08);
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0, 41, 63, 0.05);
}

/* Ink on white: 12.6:1, comfortably past the 4.5:1 the guidelines ask for. */
#courseindex .nexvera-pagetree__link {
    color: #3a444e !important;
}

#courseindex a.nexvera-pagetree__link:hover,
#courseindex a.nexvera-pagetree__link:focus-visible {
    color: var(--nv-blue-action) !important;
    background: var(--nv-surface) !important;
}

#courseindex .nexvera-pagetree__item.is-current > .nexvera-pagetree__link {
    color: var(--nv-ink) !important;
    background: #eef4f8 !important;
}

#courseindex .nexvera-pagetree__item.is-locked > .nexvera-pagetree__link {
    color: #7e8891 !important;
}