/* --------------------------------------------------------------------------
   ------------------------------------------------------------------------ */
/* --------------------------------------------------------------------------
   ------------------------------------------------------------------------ */
/* --------------------------------------------------------------------------
   ------------------------------------------------------------------------ */
/* --------------------------------------------------------------------------

   HOMEPAGE CUSTOMISATION (Academi Theme)
   HEADER NAVIGATION ADJUSTMENTS (Academi Theme)
   FOOTER CUSTOMISATION
   GLOBAL FONT OVERRIDE & TEXT RENDERING (entire site)
   ADMIN SETTINGS — “Additional HTML” Field Width Adjustment

   CUSTOM TABLE STYLING FOR QUESTIONS
   QUESTION OPTIONS STYLING
   ACCORDION COMPONENT STYLING
   QUESTION DESIGN SETTINGS
   RESPONSIVE GRID LAYOUT (90% / 10%) FOR STRUCTURED CONTENT BLOCKS
   RESPONSIVE "50/50" GRID LAYOUT FOR BALANCED CONTENT BLOCKS
   COURSE PAGE CUSTOMISATION (Student View)
   QUIZ ATTEMPT PAGE & QUIZ REVIEW PAGE CUSTOMISATIONS (Student View)
   
   ------------------------------------------------------------------------ */
/* --------------------------------------------------------------------------
   ------------------------------------------------------------------------ */
/* --------------------------------------------------------------------------
   ------------------------------------------------------------------------ */
/* --------------------------------------------------------------------------
   ------------------------------------------------------------------------ */





/* --------------------------------------------------------------------------
   HOMEPAGE CUSTOMISATION (Academi Theme)
   --------------------------------------------------------------------------
   Purpose:
     Applies bespoke styling to the Moodle front page to improve the visual
     structure and usability of the "Available Courses" and "Learning Hub"
     sections. These adjustments increase readability, emphasise key content,
     and provide a more modern, card-based layout.

   Scope:
     • Main content region on the homepage.
     • "Available Courses" course cards.
     • "Learning Hub" feature cards and associated typography.

   Notes:
     • All selectors are scoped to structural elements that appear on the
       front page to avoid impacting internal course pages.
     • Designed to be theme-compatible and minimally invasive.
   -------------------------------------------------------------------------- */


/* ==========================================================================
   1. HOMEPAGE MAIN CONTENT LAYOUT
   --------------------------------------------------------------------------
   Purpose:
     Increases horizontal padding and adds top spacing around the central
     course content area on the homepage, giving sections more breathing
     room and improving overall visual balance.

   Target:
     The core content container under #region-main (e.g., "Available Courses",
     "Learning Hub", and other homepage sections).
   ========================================================================== */

#region-main > div > div.course-content {
    display: block;          /* Ensures the container behaves as a block-level wrapper */
    margin-top: 50px;        /* Adds vertical space above the course content */
    padding-right: 50px;     /* Horizontal padding for better readability */
    padding-left: 50px;      /* Symmetric padding to frame the content area */
}


/* ==========================================================================
   2. "AVAILABLE COURSES" SECTION STYLING
   --------------------------------------------------------------------------
   Purpose:
     Defines the visual presentation of course cards displayed under the
     "Available Courses" section on the homepage. Focuses on:

       • Hover elevation and motion.
       • Background colour transitions.
       • Image framing and subtle zoom effects.
       • Text colour transitions for clarity on hover.

   Behaviour:
     Course cards respond to hover with a slight lift and colour change,
     signalling interactivity and improving user engagement.
   ========================================================================== */

/* Base styling for the course cards in the "Available Courses" section */
.course-card {
    transition: transform 0.25s ease, background-color 0.3s ease;
    /* Smooth hover animation for card movement and background */
    border-radius: 8px;
    /* Consistent rounded corners for a modern card look */
    position: relative;
    /* Required to support stretched links or absolutely positioned children */
    cursor: pointer;
    /* Indicates that the entire card area is clickable */
}

/* Course card hover behaviour */
.course-card:hover {
    background-color: #078A35;
    /* Applies the brand-aligned green background on hover */
    transform: translateY(-4px);
    /* Slight upward movement to indicate focus and interactivity */
}

/* Course image styling within each card */
.course-card img {
    width: 100%;
    /* Ensures the image spans the full card width */
    height: 140px;
    /* Uniform height to keep all cards visually aligned */
    object-fit: cover;
    /* Crops the image while preserving aspect ratio */
    margin-bottom: 0.75rem;
    /* Space between the image and subsequent text content */
    border-radius: 0.5rem !important;
    /* Softly rounded image corners matching the card design */
    transition: transform 0.25s ease;
    /* Smooth scaling effect when hovering the card */
}

/* Image hover enlargement for subtle emphasis */
.course-card:hover img {
    transform: scale(1.03);
    /* Slight zoom on hover to draw attention without distraction */
}

/* Base text transition for interactive card content */
.course-card a,
.course-card p,
.course-card h5 {
    transition: color 0.3s ease;
    /* Smooth colour transition when hovering over the card */
}

/* Text colour change on card hover for contrast and readability */
.course-card:hover a,
.course-card:hover h5,
.course-card:hover p {
    color: #ffffff !important;
    /* Ensures all text inside the hovered card appears in white */
}


/* ==========================================================================
   3. "LEARNING HUB" SECTION STYLING
   --------------------------------------------------------------------------
   Purpose:
     Styles the “Learning Hub” area on the homepage, including:

       • Section subtitle typography.
       • Responsive grid layout for feature cards.
       • Elevated card design using shadows and rounded corners.
       • Floating circular icons with per-card colour variations.
       • Consistent heading and body text formatting.

   Behaviour:
     Feature cards are arranged in a responsive grid, each lifting slightly
     on hover. Floating circular icons provide immediate visual cues and
     reinforce the informational hierarchy.
   ========================================================================== */

/* Subtitle under the "Learning Hub" heading */
.learning-hub-subtitle {
    font-size: 1.05rem;   /* Slightly larger than body text for emphasis */
    color: #6c6f7a;       /* Muted grey for secondary text */
    max-width: 100%;      /* Restricts width for improved readability */
    margin-bottom: 40px;  /* Spacing below the subtitle before the grid */
    line-height: 1.55;    /* Comfortable line spacing for multi-line text */
}

/* Responsive grid layout for Learning Hub feature cards */
.learning-hub-grid {
    display: grid;
    /* Enables CSS grid to arrange feature cards responsively */
   /* grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); */
    grid-template-columns: repeat(4, 1fr);
    /* Automatically fits as many columns as possible with a min width */
    gap: 1.8rem;
    /* Spacing between feature cards */
}

/* Base card styling for each Learning Hub feature ("sitebox") */
.sitebox {
    background: #ffffff;
    /* White background to highlight the card content */
    border-radius: 16px;
    /* Strong card rounding for a soft, modern appearance */
    border: 1px solid #e5e6ec;
    /* Light border to distinguish card edges from the background */
    padding: 2.2rem 1.5rem 1.75rem;
    /* Inner spacing around content for visual comfort */
    box-shadow: 0 12px 26px rgba(15, 24, 44, 0.06);
    /* Subtle drop-shadow for elevation */
    position: relative;
    /* Required so the floating icon can be positioned absolutely */
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    /* Smooth transform and shadow transitions on hover */
    margin-bottom: 20px;
    /* Additional spacing beneath cards on smaller screens */
}

/* Hover effect for Learning Hub cards */
.sitebox:hover {
    transform: translateY(-4px);
    /* Slight lift to indicate hover focus */
    box-shadow: 0 18px 40px rgba(15, 24, 44, 0.12);
    /* Deeper shadow to reinforce elevation on hover */
}

/* Floating circular icon container at the top of each card */
.rcthumb {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    /* Perfect circle for the icon background */
    display: flex;
    align-items: center;
    justify-content: center;
    /* Center the icon vertically and horizontally */
    font-size: 26px;
    /* Icon size for visual prominence */
    color: #1d4a73;
    /* Default icon colour (overridable via card-specific styles) */

    position: absolute;
    top: 0;
    left: 1.5rem;
    transform: translateY(-45%);
    /* Positions the circle partially overlapping the top edge of the card */
}

/* Card heading text within the Learning Hub feature section */
.site-feature-body h6 {
    font-size: 1.15rem;
    /* Slightly larger than base text for card titles */
    font-weight: 700;
    /* Bold titles for clear hierarchy */
    margin-bottom: 0.35rem;
    /* Tight spacing before the descriptive text */
    color: #1c1a2f;
    /* Dark text for strong contrast */
}

/* Card description text within Learning Hub features */
.site-feature-body p {
    font-size: 0.96rem;
    /* Slightly smaller than regular body text */
    color: #5c606c;
    /* Muted grey for secondary descriptions */
    margin-bottom: 0;
    /* No extra margin below paragraph to keep cards compact */
    line-height: 1.45;
    /* Comfortable but compact line spacing */
}

/* Icon background colour for first card (light blue tone) */
.sitebox:nth-child(1) .rcthumb {
    background-color: #d3ecff;
}

/* Icon background colour for second card (peach tone) */
.sitebox:nth-child(2) .rcthumb {
    background-color: #ffe3d7;
}

/* Icon background colour for third card (yellow tone) */
.sitebox:nth-child(3) .rcthumb {
    background-color: #ffefc4;
}

/* Icon background colour for fourth card (green tone) */
.sitebox:nth-child(4) .rcthumb {
    background-color: #dbf7db;
}

/* Medium screens (tablets) → 2 per row */
@media (max-width: 992px) {
    .learning-hub-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Small screens (phones) → 1 per row */
@media (max-width: 600px) {
    .learning-hub-grid {
        grid-template-columns: 1fr;
    }
}




/* --------------------------------------------------------------------------
   HEADER NAVIGATION ADJUSTMENTS (Academi Theme)
   --------------------------------------------------------------------------
   Purpose:
     Cleans up the header navigation area by removing elements that are not
     required in this deployment, such as contact details and the redundant
     "Home" link in the main menu.
   -------------------------------------------------------------------------- */

/* Hide the contact details at the header of the page */
#header .nav.navbar-nav.address-head {
  display: none;
}

/* Hide the first item (“Home”) from the main menu bar at the header */
#page-wrapper > div.header-main > div > nav > div > nav li:nth-child(1) {
  display: none;
}







/* --------------------------------------------------------------------------
   FOOTER CUSTOMISATION
   --------------------------------------------------------------------------
   Purpose:
     Enhances footer appearance, brand consistency, and visibility of key
     elements while removing support sections not required in this context.

   Scope:
     • Footer support popover.
     • Social media icons.
     • Footer main and bottom bar styling.
   -------------------------------------------------------------------------- */

/* Hide the support popover section below the footer */
#footer>div.footer-content-popover.container>div,
#footer>div:nth-child(3)>button {
  display: none;   /* Removes support popover and related button */
}

/* Standardise social media icon appearance */
#footer a>.media-icon i {
  font-weight: normal;  /* Ensures icons use a consistent weight */
}

/* Main footer background styling */
#footer>div.footer-main {
  background-color: #0fa01b !important; /* Applies brand-aligned green footer background */
}

/* Center the footer logo within its column */
#footer>div.footer-main>div>div.row>div:nth-child(1)>div>div {
  margin: auto;   /* Horizontally centres logo container */
}

/* Footer section headings: unified typographic styling */
#footer>div.footer-main>div>div.row>div:nth-child(1)>div>h2,
#footer>div.footer-main>div>div.row>div:nth-child(2)>div>h2,
#footer>div.footer-main>div>div.row>div:nth-child(3)>div>h2 {
  color: white !important;  /* Ensures headings remain visible on dark background */
  font-family: Century Gothic, Arial, Helvetica, sans-serif; /* Consistent brand typography */
  font-size: 24px;          /* Uniform visual hierarchy */
  font-weight: normal;      /* Clean, modern heading weight */
  text-align: left;         /* Default left alignment */
}

/* Override text alignment for the logo column heading */
#footer>div.footer-main>div>div.row>div:nth-child(1)>div>h2 {
  text-align: center;       /* Centers the logo heading for balance */
}

/* Footer bottom bar background */
#footer>div.footer-bottom {
  background-color: #1f1b2d !important; /* Applies darker contrasting section */
}

/* Footer bottom links: maintain visibility */
#footer>div.footer-bottom>p>a {
  color: white;             /* Default link colour */
}

/* Hover state: retain white colour for consistency */
#footer>div.footer-bottom>p>a:hover {
  color: white;             /* Prevents colour shift on hover */
}






/* --------------------------------------------------------------------------
   GLOBAL FONT OVERRIDE & TEXT RENDERING (entire site)
   --------------------------------------------------------------------------
   Purpose:
     Applies a unified font-family across the Moodle platform to maintain
     consistent typography, while also improving text rendering quality and
     interaction feedback across browsers.

   Behaviour:
     • The universal selector (*) targets every element in the DOM.
     • Sets "Century Gothic" as the default font-family globally.
     • Applies font smoothing and tap highlight adjustments for a more
       polished experience.

   Notes:
     • This rule is intentionally broad; further exclusions (e.g., icons,
       MathJax) can be layered if needed.
     • The universal box-sizing reset below complements this section.
   -------------------------------------------------------------------------- */

* {
    font-family: Century Gothic;              /* Global font applied to all text */
    box-sizing: border-box;                   /* Predictable element sizing across all components */
    -webkit-font-smoothing: antialiased;      /* Smoother text rendering on WebKit browsers */
    -moz-osx-font-smoothing: grayscale;       /* Consistent font smoothing for Firefox on macOS */
    -webkit-tap-highlight-color: transparent; /* Removes mobile tap highlight for cleaner interaction */
}


/* --------------------------------------------------------------------------
   UNIVERSAL BOX-SIZING RESET
   --------------------------------------------------------------------------
   Purpose:
     Ensures every element—including pseudo-elements (::before, ::after)—uses
     the border-box sizing model. This prevents padding and borders from
     accidentally increasing the actual rendered size of components.

   Notes:
     • This is a widely used modern CSS reset pattern.
     • Complements the global font styles defined above.
   -------------------------------------------------------------------------- */

*, *::before, *::after {
    box-sizing: border-box; /* Guarantees consistent box model across the UI */
}




/* --------------------------------------------------------------------------
   ADMIN SETTINGS — “Additional HTML” Field Width Adjustment
   --------------------------------------------------------------------------
   Purpose:
     Expands the editable text areas for the three “Additional HTML” fields
     in Site Administration:
       • Additional HTML → Within HEAD
       • Additional HTML → When BODY is opened
       • Additional HTML → Before BODY is closed

     The default width provided by the Academi theme is relatively narrow,
     making it uncomfortable to edit long HTML, CSS, or JavaScript snippets.
     This rule increases their width to 100% for better usability.

   Scope:
     • Affects administrator configuration pages only.
     • Does not impact learner-facing pages.
   -------------------------------------------------------------------------- */

/* Expand width of the three "Additional HTML" textarea fields */
#id_s__additionalhtmlhead,
#id_s__additionalhtmltopofbody,
#id_s__additionalhtmlfooter {
  width: 100%;   /* Ensures full-width editing area for improved comfort */
}

























/* --------------------------------------------------------------------------
   CUSTOM TABLE STYLING FOR QUESTIONS
   --------------------------------------------------------------------------
   Purpose:
     Defines a consistent table style for question content, especially where
     structured data is required (e.g., values, probabilities, or summary
     statistics).

   Behaviour:
     • Full-width tables with collapsed borders.
     • Uniform cell padding and centered text.
     • Light grey background for header cells and row labels.
     • Optional empty header cells with transparent styling.

   Scope:
     • Applied where the .custom-table class is used, typically in questions.
   -------------------------------------------------------------------------- */

.custom-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 10px;
  margin-bottom: 10px;
}

.custom-table th,
.custom-table td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: center;
}

.custom-table td {
  background-color: white;
}

/* Column headers */
.custom-table th {
  background-color: #f2f2f2;
  font-weight: bold;
}

/* Optional empty header cell */
.custom-table th.empty-cell {
  background-color: transparent;
  border: 0;
}

/* Row headers */
.custom-table td.row-header {
  background-color: #f2f2f2;
  font-weight: bold;
}











/* --------------------------------------------------------------------------
   QUESTION OPTIONS STYLING
   --------------------------------------------------------------------------
   Purpose:
     Styles the container and list of options for custom question layouts.
     Enhances legibility and visual structure by:

       • Adding spacing above the options container.
       • Removing default list styling.
       • Increasing vertical spacing between options.
       • Rendering a custom circular marker before each option.
   -------------------------------------------------------------------------- */

/* Container spacing */
.que.calculatedmulti .answer div.r0,
.que.calculatedmulti .answer div.r1 {

  padding-top: 10px;
  padding-bottom: 5px;
  line-height: 1.9em;
  accent-color: #0fa01c;
  align-items: center; 
}


/* --------------------------------------------------------------------------
   ACCORDION COMPONENT STYLING
   --------------------------------------------------------------------------
   Purpose:
     Provides styles for an accordion-based component used inside questions
     to show and hide extended explanations or additional information.
     Ensures clear visual cues and smooth transitions.

   Remark:
     Behaviour of elements with the 'accordion' and 'panel' classes is
     controlled by an event handler in: sjs/evts.js
   -------------------------------------------------------------------------- */

/* Accordion toggle element */
p.accordion {
  background-color: #0fa01c;   /* Default green background for accordion headers */
  color: white;                /* Ensures strong text contrast */
  font-weight: bold;           /* Highlights the section label */
  font-size: 14px;             /* Compact readable text */
  cursor: pointer;             /* Indicates interactivity */
  padding: 15px;               /* Comfortable clickable area */
  margin-top:40px;             /* Spacing between accordion and question options */
  width: 190px;                /* Fixed width for consistent layout */
  text-align: left;            /* Aligns text to the left edge */
  border: none;                /* Removes default border styling */
  outline: none;               /* Prevents focus outline for cleaner appearance */
  transition: 0.4s;            /* Smooth colour and background transitions */
  margin-bottom: 10px;         /* Spacing between accordion elements */
  border-radius: 5px;          /* Soft rounded corners */
}

/* Active state and hover effect */
p.accordion.active,
p.accordion:hover {
  background-color: #1f1b2e;   /* Darker tone to indicate active or hovered state */
  color: white;                /* Preserves visibility against darker background */
}

/* Panel content area (hidden by default) */
div.panel {
  padding: 0 18px;             /* Horizontal padding for inner content */
  background-color: transparent; /* Matches surrounding background */
  max-height: 0;               /* Collapsed state (hidden) */
  overflow: hidden;            /* Prevents content spilling when collapsed */
  transition: 0.4s ease-in-out;/* Smooth expand/collapse animation */
  opacity: 0;                  /* Hidden until activated */
  margin-bottom: 10px;         /* Spacing below expanded panels */
}

/* Expanded panel state */
div.panel.show {
  opacity: 1;                  /* Fully visible when expanded */
  max-height: 6000px;          /* Large max-height to accommodate varying content sizes */
}














/* --------------------------------------------------------------------------
   QUESTION DESIGN SETTINGS
   ---------------------------------------------------------------------------
   Scope:
     - Horizontal rule styling (default and light variants).
     - Background highlighting for question elements.
     - Secondary “working-out” text styling.
     - Removal of “Clear my choice” control.
     - Two-column question layout with responsive stacking.
   -------------------------------------------------------------------------- */


/* ==========================================================================
   1. HORIZONTAL RULE STYLING
   --------------------------------------------------------------------------
   - Default: soft green divider used between question sections.
   - Light: white divider for use on darker backgrounds.
   ========================================================================== */

/* Default horizontal rule — soft green divider */
hr {
    border-top: 1px solid #0fa01c50 !important;  /* Light green, 50% opacity */
}

/* White horizontal rule for dark surfaces */
.hr-light-color {
    border-top: 1px solid #ffffff !important;    /* High-contrast white divider */
}


/* ==========================================================================
   2. QUESTION BACKGROUND HIGHLIGHTING
   --------------------------------------------------------------------------
   - Applies a subtle green-tinted background to question text, outcomes,
     and comments to visually group related content.
   ========================================================================== */

.que .formulation,
.que .outcome,
.que .comment {
    background: #0080000f !important; /* Very light green background */

    
}

/* ==========================================================================
   3. SUPPORT TEXT COLOURING (Explanatory Working Steps)
   --------------------------------------------------------------------------
   - Styles supplementary explanatory text (e.g. hints, workings) in grey
     to distinguish it from core question and answer content.
   ========================================================================== */

/* Secondary explanatory text */
.justInfo {
    color: gray; /* De-emphasised guidance text */
}



/* ==========================================================================
   4. QUESTION CONTROLS
   --------------------------------------------------------------------------
   - Removes the “Clear my choice” control in multichoice questions for a
     cleaner user experience.
   ========================================================================== */

/* Hide the "Clear my choice" link/button */
.qtype_multichoice_clearchoice {
    display: none;
}


/* ==========================================================================
   5. QUESTION LAYOUT (INFO + CONTENT)
   --------------------------------------------------------------------------
   - Places question info and content side by side on larger screens.
   - Stacks them vertically on small screens for readability.
   ========================================================================== */

/* Base two-column layout */
.que {
    display: flex; /* Places children in a row */
}

.que .info {
    width: auto;
    padding: 1rem;
    height: fit-content;
}

.que .content {
    width: 100%;
    margin: 0 0 0 1.5em;
}

/* Responsive layout for narrow viewports */
@media (max-width: 700px) {
    .que {
        flex-direction: column;
    }

    .que .content {
        margin: 0 !important;
        padding: 0 !important;
    }
}






































/* --------------------------------------------------------------------------
   RESPONSIVE GRID LAYOUT (90% / 10%) FOR STRUCTURED CONTENT BLOCKS
   --------------------------------------------------------------------------
   Purpose:
     Provides a two-column grid layout (approximately 90% / 10%) used for
     structured content in questions (e.g., question text plus marks).

   Remark:
     A function `gridContainer90(questionPart, gradePart, gridNumber)` in
     sjs/fcts.js utilises the .grid-container-9010 and .grid-item-9010 styles.
   -------------------------------------------------------------------------- */

/* Grid container: main layout wrapper */
.grid-container-9010 {
  display: grid;            /* Enables CSS Grid layout */
  grid-template-columns: 1fr 100px; /* Flexible main column, fixed-width secondary column */
  width: 100%;              /* Ensures full-width scaling */
  grid-gap: 20px;           /* Space between grid items */
  align-items: left;        /* Aligns items consistently along the cross axis */
  margin-left: auto;        /* Prepares for centred alignment if max-width is used */
  margin-right: auto;       /* Prepares for centred alignment if max-width is used */
}

/* Grid items: shared formatting for both child elements */
.grid-item-9010 {
  color: black;             /* Sets default text colour */
  transition: box-shadow 0.3s ease-in-out; /* Smooth visual transition if shadows are added */
  align-items: left;        /* Ensures consistent vertical alignment */
}

/* First grid item: typically main textual content */
.grid-item-9010:first-child {
  text-align: left;         /* Left-aligns text for conventional readability */
}

/* Second grid item: often metadata or secondary information */
.grid-item-9010:last-child {
  text-align: left;         /* Maintains alignment with the first column */
  width: 100%;              /* Ensures the item does not shrink unexpectedly */
  font-style: italic;       /* Distinguishes secondary content visually */
}

/* Mobile responsiveness: stack grid items vertically on small screens */
@media (max-width: 767px) {
  .grid-container-9010 {
    grid-template-columns: 1fr; /* Items appear in a single column for readability */
  }
}






/* --------------------------------------------------------------------------
   RESPONSIVE "50/50" GRID LAYOUT FOR BALANCED CONTENT BLOCKS
   --------------------------------------------------------------------------
   Purpose:
     Provides a two-column grid layout (50% / 50%) for balanced content,
     typically used when two pieces of information carry similar weight.

   Remark:
     A function `gridContainer50(questionPart, gradePart, gridNumber)` in
     sjs/fcts.js utilises the .grid-container-5050 and .grid-item-5050 styles.
   -------------------------------------------------------------------------- */

/* Grid container: defines the two-column layout structure */
.grid-container-5050 {
  display: grid;            /* Activates CSS Grid */
  grid-template-columns: 1fr 50%; /* Two columns approximating a 50/50 layout */
  width: 100%;              /* Ensures the container spans full width */
  grid-gap: 20px;           /* Space between items for visual separation */
  align-items: left;        /* Aligns content consistently */
  margin-left: auto;        /* Prepares for centred alignment if max-width is applied */
  margin-right: auto;       /* Prepares for centred alignment if max-width is applied */
}

/* Shared styling for both grid items */
.grid-item-5050 {
  color: black;             /* Default text colour */
  transition: box-shadow 0.3s ease-in-out; /* Prepares for optional hover shadow effects */
  align-items: left;        /* Ensures vertical alignment consistency */
}

/* First grid item: typically primary content */
.grid-item-5050:first-child {
  text-align: left;         /* Standard left alignment for readability */
}

/* Second grid item: often supplementary or descriptive content */
.grid-item-5050:last-child {
  text-align: left;         /* Maintains alignment symmetry */
  width: 100%;              /* Prevents unintended shrinking */
  font-style: italic;       /* Provides visual distinction for secondary information */
}

/* Mobile layout: stacks content for improved readability */
@media (max-width: 767px) {
  .grid-container-5050 {
    grid-template-columns: 1fr; /* Converts layout to a single column on mobile */
  }
}





/* --------------------------------------------------------------------------
   COURSE PAGE CUSTOMISATION (Student View)
   --------------------------------------------------------------------------
   Purpose:
     Adjusts specific elements on the standard Moodle course page when viewed
     by students. The customisations focus on:

       • Hiding the “Grades” navigation item so students do not access the
         gradebook directly.
       • Recolouring activity/resource icons to align with site branding.
       • Hiding the large page-header image icon on quiz-related pages to
         reduce visual clutter.

   Scope:
     • Intended primarily for student-facing course pages.
     • Teachers/managers/admins may still see hidden items depending on
       role permissions and capabilities.
   -------------------------------------------------------------------------- */


/* ==========================================================================
   1. HIDE GRADEBOOK LINK FOR STUDENTS
   --------------------------------------------------------------------------
   Purpose:
     Removes the “Grades” link from the course navigation drawer and
     secondary navigation so students do not access the grade report
     from within each course.

   Behaviour:
     • Uses Moodle’s navigation data-key structure.
     • Does not change underlying capabilities or permissions.
   ========================================================================== */

li[data-key="grades"] {
    display: none;  /* Fully hides the Grades navigation item for students */
}


/* ==========================================================================
   2. ACTIVITY/RESOURCE ICON RECOLOURING
   --------------------------------------------------------------------------
   Purpose:
     Applies a colour transformation filter to activity and resource icons
     inside the “activity-grid”. This creates a consistent colour palette
     aligned with the site’s branding while retaining icon shapes.

   Behaviour:
     • Hue rotation shifts the colour spectrum.
     • Saturation, brightness, sepia, and contrast settings refine the final
       tone.
     • A slight opacity change reduces intensity for a softer visual result.

   Target:
     Activity icons using class combinations typically generated by Moodle’s
     renderer for:
       • .assessment        (e.g., Assignments, Quizzes)
       • .collaboration     (e.g., Forums, Wikis)
   ========================================================================== */

div > div.activity-grid > div.activity-icon.activityiconcontainer.smaller.assessment.courseicon.align-self-start.me-2,
div > div.activity-grid > div.activity-icon.activityiconcontainer.smaller.collaboration.courseicon.align-self-start.me-2 {
    filter: hue-rotate(90deg)      /* Rotates icon colour around the hue wheel */
            saturate(100%)         /* Maintains vibrancy */
            brightness(75%)        /* Slightly darkens the tone */
            sepia(1)               /* Adds warm tint before recolouring */
            contrast(1)            /* Preserves contrast level */
            opacity(0.9);          /* Slightly softens the icon appearance */
}


/* ==========================================================================
   3. QUIZ PAGE HEADER ICON HIDING
   --------------------------------------------------------------------------
   Purpose:
     Removes the large page-header image/icon on quiz pages to create a
     cleaner, less distracting interface focused on the quiz content.

   Scope:
     • Affects the header image container on quiz activity pages.
   ========================================================================== */

#page-header > div > div.d-flex.align-items-center > div.me-auto > div > div.page-header-image {
    display: none;  /* Hides the header icon/image on the quiz page */
}

















/* --------------------------------------------------------------------------
   QUIZ ATTEMPT PAGE & QUIZ REVIEW PAGE CUSTOMISATIONS
   --------------------------------------------------------------------------
   Purpose:
     Enhances usability and controls UI behaviour across quiz-attempt and
     quiz-review pages within the Academi theme by:

       • Reordering key blocks for clearer layout.
       • Hiding non-essential navigation controls.
       • Styling action buttons consistently.

   Scope:
     • Affects pages under the Quiz activity (mod_quiz).
   -------------------------------------------------------------------------- */


/* ==========================================================================
   1. QUIZ ATTEMPT PAGE — BLOCK REORDERING (Student View)
   --------------------------------------------------------------------------
   Purpose:
     Restructures the right-hand sidebar blocks for students during a quiz
     attempt to ensure a logical visual order:
       • “Exit and Continue Later” appears first.
       • “Practice test navigation” appears directly below it.

   Notes:
     • Block instance IDs (e.g., #inst14) may differ by site; verify in the
       browser inspector if needed.
   ========================================================================== */

/* Block region container (right sidebar) */
#block-region-side-pre {
  display: flex;             /* Enables flex layout for manual ordering */
  flex-direction: column;    /* Ensures blocks are stacked vertically */
}

/* The "Exit and Continue Later" block */
#inst14 {
  order: 1;                  /* Forces this block to appear first in the sidebar */
}

/* The "Practice test navigation" block (Quiz navigation block) */
#mod_quiz_navblock {
  order: 2;                  /* Places quiz navigation directly below the exit/continue block */
}

/* Hide “Start a new practice test” button (instructor-only control)
   This button would normally appear inside the navigation block but is not
   required for students during a standard attempt workflow. */
#mod_quiz_navblock > div > div > div.othernav > div.singlebutton {
  display: none;
}


/* ==========================================================================
   2. QUIZ REVIEW PAGE — REMOVE “Show all questions on one page”
   --------------------------------------------------------------------------
   Purpose:
     Prevents users from loading all quiz questions on a single page during
     review. This reduces the risk of performance issues and long scroll
     distances in quizzes with many questions.

   Remark:
     A supporting script is added in:
       Site administration → Additional HTML → Before BODY is closed
   ========================================================================== */

/* Hide the “Show all questions on one page” link in the navigation block */
#mod_quiz_navblock > div > div > div.othernav > a:nth-child(1) {
  display: none;
}


/* ==========================================================================
   3. BOTH QUIZ ATTEMPT & REVIEW PAGES — BUTTON STYLING
   --------------------------------------------------------------------------
   Purpose:
     Provides consistent visual styling for key action buttons such as:
       • “Finish review”
       • “Finish the practice”
     Ensures these controls stand out clearly and remain easily accessible.
   ========================================================================== */

/* Style action buttons in the quiz navigation area */
.path-mod-quiz .othernav a,
.path-mod-quiz .othernav input {
  background: red;            /* Strong visual emphasis */
  color: white;               /* High contrast for readability */
  padding: 15px;              /* Comfortable click area */
  margin-top: 20px;           /* Space above buttons */
  border-radius: 7px;         /* Softer edges */
  font-weight: bold;          /* Clear button label emphasis */
  font-size: 16px;            /* Balanced readability */
  width: 100%;                /* Buttons span the container width */
  text-align: center;         /* Centers button text */
}