/* ==========================================================================
   physicsandmathscourses.com — Cassiopeia child template custom CSS
   ========================================================================== */

/* Base font-size: 14px (matches Purity III/T3 baseline; scales all rem/em values) */
html {
    font-size: 14px;
}

/* --------------------------------------------------------------------------
   HEADER — hero gradient background
   -------------------------------------------------------------------------- */

.container-header {
    background-color: #0077bb !important;
    background-image: linear-gradient(135deg, #0077bb 0%, #0099dd 100%) !important;
}

/* The single grid-child containing the navbar */
.container-header > .grid-child.container-nav {
    padding-bottom: 0;
    padding-top: 0;
}

/* --------------------------------------------------------------------------
   NAVBAR — full-width Bootstrap navbar inside container-nav
   -------------------------------------------------------------------------- */

.pmc-navbar {
    width: 100%;
    flex-wrap: wrap;
    padding: 0;
}

/* Logo — override Cassiopeia's margin-inline-end:auto which pushes menu to the right */
.container-header .navbar-brand,
.pmc-navbar .navbar-brand {
    padding: 8px 0;
    margin-inline-end: 16px !important;
}

.pmc-navbar .navbar-brand .brand-logo img {
    max-height: 55px;
    width: auto;
}

/* Mobile site title — hidden on desktop */
.pmc-mobile-title {
    display: none;
}

/* --------------------------------------------------------------------------
   DESKTOP (≥992px) — logo left, menu centred
   -------------------------------------------------------------------------- */

@media (min-width: 992px) {
    .pmc-navbar {
        justify-content: center;
        align-items: center;
    }

    /* Prevent the collapse div from growing to fill all space */
    .pmc-navbar .navbar-collapse {
        flex-grow: 0;
    }

    /* Stop mod-menu from flex-growing so justify-content:center on navbar works */
    .pmc-navbar .mod-menu {
        flex: 0 1 auto !important;
    }
}

/* --------------------------------------------------------------------------
   NAVIGATION — white text on gradient header
   -------------------------------------------------------------------------- */

/* Top-level menu links */
.container-header .mod-menu > li > a,
.container-header .mod-menu > li > span,
.container-header .mod-menu > li > button {
    color: #ffffff !important;
    text-transform: uppercase;
    font-size: 0.95rem;
    letter-spacing: 0.04em;
}

.container-header .mod-menu > li > a:hover {
    color: #cce8ff !important;
}

/* Active item */
.container-header .metismenu > li.active > a,
.container-header .metismenu > li.active > span {
    color: #cce8ff !important;
}

/* Dropdown sub-menus */
.container-header .mod-menu .parent > ul {
    background-color: #0077bb;
    border: 1px solid #005a8e;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

.container-header .mod-menu .parent > ul a {
    color: #ffffff !important;
}

.container-header .mod-menu .parent > ul a:hover {
    background-color: #005a8e;
    color: #ffffff !important;
}

/* Hamburger icon — white on gradient */
.pmc-navbar .navbar-toggler {
    border-color: rgba(255,255,255,0.5);
}

.pmc-navbar .navbar-toggler .icon-menu,
.pmc-navbar .navbar-toggler-icon {
    filter: invert(1);
}

/* --------------------------------------------------------------------------
   MOBILE (< 992px) — logo left, title centre, hamburger right
   -------------------------------------------------------------------------- */

@media (max-width: 991px) {
    /* Top row: logo | title | hamburger spread across */
    .pmc-navbar {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    /* Logo: smaller on mobile */
    .pmc-navbar .navbar-brand .brand-logo img {
        max-height: 40px;
    }

    /* Show site title between logo and hamburger */
    .pmc-mobile-title {
        display: block;
        color: #ffffff;
        font-size: 1rem;
        font-weight: 600;
        flex: 1;
        text-align: center;
        padding: 0 8px;
    }

    /* Collapse div: full width, wraps to new row below logo/title/hamburger */
    .pmc-navbar .navbar-collapse {
        flex-basis: 100%;
        order: 999;
    }

    /* Menu items: column, left-aligned */
    .pmc-navbar .mod-menu {
        flex-direction: column !important;
        width: 100%;
        align-items: flex-start !important;
    }

    .pmc-navbar .mod-menu > li {
        width: 100%;
    }

    .pmc-navbar .mod-menu > li > a,
    .pmc-navbar .mod-menu > li > span {
        padding: 8px 0;
        display: block;
    }
}

/* --------------------------------------------------------------------------
   FOOTER
   -------------------------------------------------------------------------- */

.footer {
    background-color: #0077bb;
    background-image: linear-gradient(135deg, #0077bb 0%, #0099dd 100%);
}

.footer .grid-child {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    align-items: center;
    justify-content: center;
    padding: 12px 0;
}

.footer .grid-child a {
    color: inherit;
    text-decoration: none;
}

.footer .grid-child a:hover {
    text-decoration: underline;
}

/* --------------------------------------------------------------------------
   MOBILE — hide hero certificate image on small screens
   -------------------------------------------------------------------------- */

@media (max-width: 768px) {
    .hero-certificate {
        display: none !important;
    }
}

/* --------------------------------------------------------------------------
   COOKIE BANNER
   -------------------------------------------------------------------------- */

#pmc-cookie-banner {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #1a1a2e;
    color: #fff;
    padding: 16px 20px;
    z-index: 99999;
    font-family: sans-serif;
    font-size: 14px;
    box-shadow: 0 -2px 8px rgba(0,0,0,0.3);
}
#pmc-cookie-banner .pmc-cookie-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}
#pmc-cookie-banner p {
    margin: 0;
    flex: 1;
    min-width: 200px;
    line-height: 1.5;
}
#pmc-cookie-banner a { color: #90caf9; }
#pmc-cookie-banner .pmc-cookie-buttons { display: flex; gap: 8px; flex-shrink: 0; }
#pmc-cookie-decline {
    padding: 8px 18px;
    background: transparent;
    border: 1px solid #ffffff80;
    color: #fff;
    cursor: pointer;
    border-radius: 4px;
    font-size: 14px;
}
#pmc-cookie-accept {
    padding: 8px 18px;
    background: #2e7d32;
    border: none;
    color: #fff;
    cursor: pointer;
    border-radius: 4px;
    font-size: 14px;
    font-weight: bold;
}
#pmc-cookie-decline:hover { border-color: #fff; }
#pmc-cookie-accept:hover  { background: #1b5e20; }

/* --------------------------------------------------------------------------
   DISQUS — comment count bubble above article content
   -------------------------------------------------------------------------- */

.pmc-disqus-count-module {
    text-align: right;
    margin-bottom: 0.5rem;
}

.pmc-disqus-count-wrap {
    display: inline-block;
}

.pmc-disqus-count-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: #f0f4fb;
    border: 1px solid #d0daea;
    border-radius: 20px;
    padding: 4px 12px 4px 8px;
    font-size: 0.85rem;
    color: #495057;
    text-decoration: none;
    transition: background 0.15s;
}

.pmc-disqus-count-link:hover {
    background: #dce6f5;
    color: #001B4C;
    text-decoration: none;
}
/* ============================================
   PHYSICS AND MATHS COURSES - CUSTOM STYLES
   ============================================ */

/* ============================================
   CONTAINER & LAYOUT
   ============================================ */

.page-container {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 15px;
    width: 100%;
    box-sizing: border-box;
}

/* ============================================
   TYPOGRAPHY - HEADINGS
   ============================================ */

/* H1 - Hero titles (white text on gradient) */
.hero-h1 {
    color: white;
    font-size: clamp(1.5em, 4.5vw, 2.5em);
    margin-bottom: 10px;
    margin-top: 0;
    font-weight: 600;
    line-height: 1.2;
}

/* H1 - Standard (for white backgrounds) */
.page-h1 {
    color: #222;
    font-size: clamp(1.6em, 5vw, 2.5em);
    margin-bottom: 12px;
    margin-top: 0;
    font-weight: 700;
    line-height: 1.2;
}

/* H2 - Major section headings */
.section-h2 {
    color: #0077bb;
    font-size: clamp(1.4em, 4vw, 1.9em);
    margin: 40px 0 25px 0;
    text-align: center;
    border-bottom: 2px solid #0077bb;
    padding-bottom: 8px;
}

/* H2 - White text (for gradient backgrounds) */
.section-h2-white {
    color: white;
    font-size: clamp(1.3em, 4vw, 1.8em);
    margin-bottom: 20px;
    margin-top: 0;
    text-align: center;
}

/* H2 - Larger white text (for CTAs) */
.cta-h2 {
    font-size: clamp(1.4em, 5vw, 2em);
    margin-bottom: 15px;
    margin-top: 0;
    color: white;
}

/* H3 - Subsection headings */
.subsection-h3 {
    color: #0077bb;
    font-size: clamp(1.1em, 3vw, 1.3em);
    margin-bottom: 12px;
    margin-top: 0;
}

/* H3 - Larger subsection */
.large-subsection-h3 {
    color: #0077bb;
    font-size: clamp(1.2em, 3.5vw, 1.5em);
    margin: 35px 0 20px 0;
}

/* H3 - FAQ style */
.faq-h3 {
    color: #0077bb;
    font-size: clamp(1.05em, 2.8vw, 1.2em);
    margin-bottom: 10px;
    margin-top: 0;
}

/* H3 - Related courses centered */
.related-h3 {
    color: #0077bb;
    font-size: clamp(1.2em, 3.5vw, 1.4em);
    margin-bottom: 15px;
    margin-top: 0;
    text-align: center;
}

/* H4 - Minor subsection headings */
.minor-h4 {
    color: #555;
    font-size: clamp(1.05em, 2.8vw, 1.2em);
    margin: 25px 0 15px 0;
}

/* ============================================
   TYPOGRAPHY - PARAGRAPHS
   ============================================ */

/* Hero subtitle - large */
.hero-subtitle-large {
    font-size: clamp(0.95em, 2.5vw, 1.15em);
    opacity: 0.95;
    margin-bottom: 14px;
    line-height: 1.4;
}

/* Hero subtitle - medium */
.hero-subtitle-medium {
    font-size: clamp(0.95em, 2.5vw, 1.1em);
    opacity: 0.9;
    margin-bottom: 8px;
}

/* Hero subtitle - small */
.hero-subtitle-small {
    font-size: clamp(0.9em, 2.3vw, 1em);
    opacity: 0.85;
    margin-bottom: 20px;
}

/* Hero subtitle - no bottom margin */
.hero-subtitle-no-margin {
    font-size: clamp(0.9em, 2.3vw, 1em);
    opacity: 0.85;
    margin-bottom: 0;
}

/* Body text - large */
.body-text-large {
    font-size: clamp(0.95em, 2.5vw, 1.1em);
    line-height: 1.8;
    color: #555;
    margin-bottom: 15px;
}

/* Body text - standard */
.body-text {
    font-size: clamp(0.9em, 2.3vw, 1.05em);
    line-height: 1.7;
    color: #555;
    margin-bottom: 0;
}

/* Body text - no margin */
.body-text-no-margin {
    color: #555;
    line-height: 1.7;
    margin-bottom: 0;
    font-size: clamp(0.9em, 2.3vw, 1em);
}

/* Body text - standard large no margin */
.body-text-large-no-margin {
    color: #555;
    font-size: clamp(0.95em, 2.5vw, 1.1em);
    line-height: 1.7;
    margin-bottom: 0;
}

/* Body text - center aligned */
.body-text-center {
    color: #555;
    font-size: clamp(0.95em, 2.5vw, 1.1em);
    line-height: 1.7;
    text-align: center;
    margin-bottom: 40px;
}

/* Body text - medium spacing */
.body-text-medium {
    color: #555;
    line-height: 1.8;
    font-size: clamp(0.95em, 2.5vw, 1.1em);
    margin-bottom: 20px;
}

/* Testimonial text */
.testimonial-text {
    font-size: clamp(0.95em, 2.5vw, 1.05em);
    line-height: 1.7;
    margin-bottom: 8px;
    opacity: 0.95;
}

/* Testimonial attribution */
.testimonial-attribution {
    font-size: clamp(0.85em, 2.2vw, 0.95em);
    opacity: 0.85;
    margin-bottom: 0;
}

/* CTA subtitle */
.cta-subtitle {
    font-size: clamp(1em, 3vw, 1.3em);
    opacity: 0.95;
    margin-bottom: 30px;
}

/* Last updated text */
.last-updated {
    font-style: italic;
    color: #666;
    margin-top: 0;
    font-size: 0.9em;
    text-align: left;
}

/* Footer text */
.footer-text {
    text-align: center;
    color: #666;
    font-size: clamp(0.85em, 2.2vw, 0.95em);
    line-height: 1.8;
    margin-bottom: 0;
}

/* Small print (terms/conditions) */
.small-print {
    margin-top: 6px;
    font-size: 8pt;
}

/* Table note text */
.table-note {
    margin-top: 10px;
    font-size: 0.95em;
}

/* ============================================
   CONTAINERS & SECTIONS
   ============================================ */

/* Hero section - gradient background */
.hero-section {
    background: linear-gradient(135deg, #0077bb 0%, #0099dd 100%);
    color: white;
    padding: 28px 20px;
    text-align: center;
    border-radius: 8px;
    margin-bottom: 40px;
}

/* Info box - gray with blue left border */
.info-box {
    background: #f8f9fa;
    padding: 25px 20px;
    border-radius: 8px;
    border-left: 4px solid #0077bb;
    margin-bottom: 40px;
}

/* Standard gray box */
.gray-box {
    background: #f8f9fa;
    padding: 25px 20px;
    border-radius: 8px;
    margin-bottom: 40px;
}

/* Gray box - center text */
.gray-box-center {
    background: #f8f9fa;
    padding: 25px 20px;
    border-radius: 8px;
    margin-bottom: 40px;
    text-align: center;
}

/* Testimonial section - gradient */
.testimonial-section {
    background: linear-gradient(135deg, #0077bb 0%, #0099dd 100%);
    color: white;
    padding: 30px 20px;
    border-radius: 8px;
    margin-bottom: 40px;
}

/* Individual testimonial box */
.testimonial-box {
    background: rgba(255, 255, 255, 0.1);
    padding: 20px;
    border-radius: 6px;
    margin-bottom: 15px;
}

/* Last testimonial box */
.testimonial-box-last {
    background: rgba(255, 255, 255, 0.1);
    padding: 20px;
    border-radius: 6px;
    margin-bottom: 20px;
}

/* CTA section */
.cta-section {
    text-align: center;
    padding: 40px 20px;
    background: linear-gradient(135deg, #0077bb 0%, #0099dd 100%);
    color: white;
    border-radius: 8px;
    margin-bottom: 40px;
}

/* FAQ box */
.faq-box {
    background: #f8f9fa;
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 20px;
}

/* Note box - blue background */
.note-box {
    background: #eef7ff;
    padding: 15px 20px;
    border-radius: 6px;
    border-left: 4px solid #0077bb;
    margin-bottom: 25px;
}

/* Note text inside note box */
.note-text {
    color: #005588;
    font-size: 0.95em;
    line-height: 1.6;
    margin: 0;
}

/* Footer divider section */
.footer-section {
    border-top: 1px solid #ddd;
    padding-top: 20px;
    margin-top: 40px;
}

/* ============================================
   GRID LAYOUTS
   ============================================ */

/* Benefits/Features grid */
.benefits-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 20px;
    margin-bottom: 40px;
}

/* Individual benefit/feature card */
.benefit-card {
    background: #f8f9fa;
    padding: 20px;
    border-radius: 8px;
}

.benefit-h3 {
    color: #0077bb;
    font-size: clamp(1.1em, 3vw, 1.3em);
    margin-bottom: 12px;
    margin-top: 0;
}

/* ============================================
   BUTTONS & LINKS
   ============================================ */

/* Primary CTA button */
.btn-primary {
    display: inline-block;
    padding: 14px 28px;
    font-size: clamp(1em, 3vw, 1.1em);
    font-weight: 600;
    text-decoration: none;
    border-radius: 6px;
    background: white;
    color: #0077bb;
    border: 2px solid white;
    transition: all 0.2s;
}

.btn-primary:hover {
    background: #f0f0f0;
}

/* Large CTA button */
.btn-large {
    display: inline-block;
    padding: 16px 32px;
    font-size: clamp(1.1em, 3vw, 1.3em);
    font-weight: 600;
    text-decoration: none;
    border-radius: 6px;
    background: white;
    color: #0077bb;
}

.btn-large:hover {
    background: #f0f0f0;
}

/* Secondary button (white background pages) */
.btn-secondary {
    display: inline-block;
    padding: 12px 24px;
    font-size: clamp(0.9em, 2.5vw, 1.05em);
    font-weight: 600;
    text-decoration: none;
    border-radius: 6px;
    background: white;
    color: #0077bb;
}

.btn-secondary:hover {
    background: #f0f0f0;
}

/* Ghost button — transparent with white border, for use on blue backgrounds */
.btn-ghost {
    display: inline-block;
    padding: 14px 28px;
    font-size: clamp(1em, 2.8vw, 1.2em);
    font-weight: 600;
    text-decoration: none;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.2);
    color: white;
    border: 2px solid white;
}

.btn-ghost:hover {
    background: rgba(255, 255, 255, 0.35);
    color: white;
}

/* Navigation button (outline style) */
.btn-nav {
    display: block;
    width: 100%;
    max-width: 220px;
    padding: 12px 24px;
    font-size: clamp(0.9em, 2.5vw, 1.05em);
    font-weight: 600;
    text-decoration: none;
    border-radius: 6px;
    background: white;
    color: #0077bb;
    border: 2px solid #0077bb;
    text-align: center;
    white-space: nowrap;
}

.btn-nav:hover {
    background: #f0f0f0;
}

/* Button container - centered with gap */
.btn-container {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 40px;
}

/* Single button container */
.btn-container-single {
    margin-top: 10px;
}

/* Standard link */
.link-standard {
    color: #0077bb;
}

/* Bold link */
.link-bold {
    color: #0077bb;
    font-weight: 600;
}

/* Underlined link (for phone numbers) */
.link-underlined {
    color: #0077bb;
    text-decoration: underline;
    font-weight: bold;
}

/* Center align text */
.text-center {
    text-align: center;
    margin-bottom: 0;
}

/* Center align with bottom margin */
.text-center-margin {
    text-align: center;
    margin-bottom: 40px;
}

/* Center align with small bottom margin */
.text-center-small-margin {
    text-align: center;
    margin-bottom: 20px;
}

/* ============================================
   LISTS
   ============================================ */

/* Standard list */
.standard-list {
    margin: 0;
    padding-left: 25px;
    line-height: 2;
    color: #555;
    font-size: clamp(0.9em, 2.3vw, 1.05em);
}

/* List with larger text */
.list-large {
    margin: 0 0 20px 25px;
    padding-left: 0;
    line-height: 1.9;
    color: #555;
    font-size: clamp(0.95em, 2.5vw, 1.1em);
}

/* ============================================
   TABLES
   ============================================ */

/* Table container - responsive */
.table-container {
    overflow-x: auto;
    margin-bottom: 20px;
}

/* Booking table */
.booking-table {
    width: 100%;
    border-collapse: collapse;
    background: white;
}

.booking-table thead {
    background: #0077bb;
    color: white;
}

.booking-table th {
    border: 1px solid #000;
    padding: 15px;
    text-align: left;
}

.booking-table th.center {
    text-align: center;
}

.booking-table td {
    border: 1px solid #000;
    padding: 15px;
    vertical-align: top;
}

.booking-table td.center {
    text-align: center;
    vertical-align: middle;
    font-weight: 600;
    font-size: 1.2em;
}

.booking-table tr.alt-row {
    background: #f8f9fa;
}

.booking-table td p {
    margin: 0 0 5px 0;
}

.booking-table td p.no-margin {
    margin: 0;
}

.booking-table td p.small-text {
    margin: 0;
    font-size: 0.95em;
}

.booking-table td p.bold {
    margin: 0;
    font-weight: 600;
}

/* Schedule table */
.schedule-table {
    width: 100%;
    border-collapse: collapse;
    background: white;
    margin-bottom: 30px;
}

.schedule-table thead {
    background: #f0f8ff;
}

.schedule-table th {
    border: 1px solid #ddd;
    padding: 12px;
    text-align: left;
}

.schedule-table td {
    border: 1px solid #ddd;
    padding: 10px;
}

.schedule-table td.center {
    text-align: center;
}

.schedule-table td.bold {
    font-weight: 600;
}

.schedule-table tr.break-row {
    background: #f0f8ff;
}

.schedule-table tr.alt-row {
    background: #f0f8ff;
}

/* Large schedule table bottom margin */
.schedule-table-large {
    width: 100%;
    border-collapse: collapse;
    background: white;
    margin-bottom: 40px;
}

.schedule-table-large thead {
    background: #f0f8ff;
}

.schedule-table-large th {
    border: 1px solid #ddd;
    padding: 12px;
    text-align: left;
}

.schedule-table-large td {
    border: 1px solid #ddd;
    padding: 10px;
}

.schedule-table-large td.center {
    text-align: center;
}

.schedule-table-large td.bold {
    font-weight: 600;
}

.schedule-table-large tr.break-row {
    background: #f0f8ff;
}

.schedule-table-large tr.alt-row {
    background: #f0f8ff;
}

/* ============================================
   RESPONSIVE - MOBILE ADJUSTMENTS
   ============================================ */

@media screen and (max-width: 600px) {
    .btn-nav {
        max-width: 100%;
    }

    .btn-container {
        flex-direction: column;
        align-items: center;
    }
}

/* ============================================
   TESTIMONIAL GRID (Why Choose sections)
   ============================================ */

/* Grid wrapper inside testimonial-section */
.testimonial-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 15px;
}

/* Individual item in testimonial-grid */
.testimonial-grid-item {
    background: rgba(255, 255, 255, 0.1);
    padding: 15px;
    border-radius: 6px;
}

.testimonial-grid-item p {
    font-size: clamp(0.95em, 2.5vw, 1.05em);
    line-height: 1.6;
    margin: 0;
    opacity: 0.95;
}

/* ============================================
   ADDITIONAL BUTTONS & CARDS
   ============================================ */

/* Blue background button (mid-page CTAs on white backgrounds) */
.btn-blue {
    display: inline-block;
    padding: 16px 32px;
    font-size: clamp(1.1em, 3vw, 1.2em);
    font-weight: 600;
    text-decoration: none;
    border-radius: 6px;
    background: #0077bb;
    color: white;
}

.btn-blue:hover {
    background: #005f99;
    color: white;
}

/* Related courses card — benefit-card with border */
.related-card {
    background: #f8f9fa;
    padding: 20px;
    border-radius: 8px;
    border: 1px solid #ddd;
}

/* Course hub card — white background with grey border */
.course-card {
    background: white;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    padding: 25px;
}

/* Course hub featured card — white background with brand blue border */
.course-card-featured {
    background: white;
    border: 2px solid #0077bb;
    border-radius: 8px;
    padding: 30px;
    margin-bottom: 40px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

/* Full-width blue button for use inside cards */
.btn-card {
    display: block;
    text-align: center;
    padding: 12px 24px;
    font-size: clamp(0.95em, 2.5vw, 1.05em);
    font-weight: 600;
    text-decoration: none;
    border-radius: 6px;
    background: #0077bb;
    color: white;
}

.btn-card:hover {
    background: #005f99;
    color: white;
}

/* Hover-to-open dropdown menus on desktop (MetisMenu) */
@media (min-width: 992px) {
    .metismenu li.deeper {
        position: relative;
    }
    .metismenu li.deeper:hover > ul.mm-collapse {
        display: block !important;
        height: auto !important;
        overflow: visible !important;
        position: absolute;
        top: 100%;
        left: 0;
        background: #333;
        box-shadow: 0 4px 12px rgba(0,0,0,0.3);
        border-radius: 4px;
        min-width: 220px;
        z-index: 9999;
        padding: 6px 0;
    }
    .metismenu li.deeper:hover > ul.mm-collapse li a {
        padding: 7px 16px;
        display: block;
        color: white !important;
        white-space: nowrap;
        text-decoration: none;
    }
    .metismenu li.deeper:hover > ul.mm-collapse li a:hover {
        background: #555;
        color: white !important;
    }

    /* Level-3 flyout (e.g. Course Overviews) */
    .metismenu li.deeper:hover > ul.mm-collapse li.deeper {
        position: relative;
    }
    .metismenu li.deeper:hover > ul.mm-collapse li.deeper:hover > ul.mm-collapse {
        display: block !important;
        height: auto !important;
        overflow: visible !important;
        position: absolute;
        top: 0;
        left: 100%;
        background: #333;
        box-shadow: 0 4px 12px rgba(0,0,0,0.3);
        border-radius: 4px;
        min-width: 220px;
        z-index: 9999;
        padding: 6px 0;
    }
    /* Arrow toggle button colour inside dark dropdown */
    .metismenu li.deeper:hover > ul.mm-collapse li.deeper > button.mm-toggler-link {
        color: white !important;
    }

    /* Style the non-link heading button (e.g. "Course Overviews") */
    .metismenu li.deeper:hover > ul.mm-collapse li.deeper > button.mm-toggler-nolink {
        display: block;
        width: 100%;
        padding: 7px 16px;
        background: none;
        border: none;
        color: white !important;
        text-align: left;
        white-space: nowrap;
        font-size: inherit;
        cursor: default;
    }
    .metismenu li.deeper:hover > ul.mm-collapse li.deeper:hover > button.mm-toggler-nolink {
        background: #555;
    }
}

/* Navigation link list — no bullets, used in site map and similar pages */
.link-list {
    list-style: none;
    padding: 0;
    margin: 0;
    line-height: 2;
    font-size: clamp(0.9em, 2.3vw, 1em);
}

.link-list li {
    margin-bottom: 4px;
}