/*
Theme Name: MHT Portal
Theme URI: 
Author: Russ Morris
Author URI: 
Description: Custom learning portal theme for MHT
Version: 1.5.0
License: GNU General Public License v2 or later
Text Domain: mht-portal
*/

@import url('fonts/avenir-next/stylesheet.css');

/* =====================
   CSS VARIABLES
   ===================== */

   
:root {

   /* -----------------------------------
      PALETTE TOKENS
      Raw brand colours — use semantic
      aliases below in components
   ----------------------------------- */

   /* UV Brand — purple/plum (Unique Voice identity) */
   --uv-brand-10: #E2D2DB;
   --uv-brand-20: #CFB4C4;
   --uv-brand-30: #B78EA6;
   --uv-brand-40: #9E6888;
   --uv-brand-50: #86436B;
   --uv-brand-base: #6E1D4D;
   --uv-brand-60: #5C1840;
   --uv-brand-70: #491333;
   --uv-brand-80: #370F27;
   --uv-brand-90: #250A1A;
   --uv-brand-100: #16060F;

   /* Portal — yellow (MHT portal chrome: nav, hero) */
   --portal-10: #FFF5D1;
   --portal-20: #FFEEB2;
   --portal-30: #FFE68B;
   --portal-40: #FFDE64;
   --portal-50: #FFD53E;
   --portal-base: #FFCD17;
   --portal-60: #D5AB13;
   --portal-70: #AA890F;
   --portal-80: #80670C;
   --portal-90: #554408;
   --portal-100: #332905;

   /* Accent — blue (used sparingly for highlights) */
   --accent-10: #D1D9FF;
   --accent-20: #B2C0FF;
   --accent-30: #8BA0FF;
   --accent-40: #6480FF;
   --accent-50: #3E61FF;
   --accent-base: #1741FF;
   --accent-60: #1336D5;
   --accent-70: #0F2BAA;
   --accent-80: #0C2180;
   --accent-90: #081655;
   --accent-100: #050D33;

   /* Greys — surfaces, text, borders */
   --grey-10: #F5F5F7;
   --grey-20: #EFEFEF;
   --grey-30: #B1B1B1;
   --grey-40: #909090;
   --grey-50: #7F7F7F;
   --grey-base: #757575;
   --grey-60: #5E5E5E;
   --grey-70: #434343;
   --grey-80: #282828;
   --grey-90: #121212;
   --grey-100: #020202;

   /* -----------------------------------
      SEMANTIC ALIASES
      Use these in all component styles
   ----------------------------------- */

   /* Surfaces */
   --color-surface:         var(--grey-10);
   --color-surface-subtle:  var(--grey-20);
   --color-card:            #ffffff;

   /* Borders */
   --color-border:          var(--grey-20);
   --color-border-strong:   var(--grey-30);

   /* Text */
   --color-text-primary:    var(--grey-100);
   --color-text-secondary:  var(--grey-60);
   --color-text-muted:      var(--grey-40);
   --color-text-inverse:    #ffffff;
   --color-focus-ring:      var(--accent-base);


   /* Navigation */
   --color-nav-bg:          var(--portal-base);
   --color-nav-bg-scrolled: var(--portal-base);
--color-nav-border:      transparent;

   /* Buttons — primary (filled) */
   --color-btn-primary:        var(--uv-brand-base);
   --color-btn-primary-hover:  var(--uv-brand-60);
   --color-btn-primary-text:   #ffffff;

   /* Buttons — outline */
   --color-btn-outline-border: var(--uv-brand-base);
   --color-btn-outline-text:   var(--uv-brand-base);
   --color-btn-outline-hover:  var(--uv-brand-10);

   /* Progress bars */
   --color-progress-track:  var(--grey-20);
   --color-progress-fill:   var(--uv-brand-base);

   /* Status */
   --color-success: #28A745;
   --color-warning: var(--portal-base);
   --color-error:   #DC3545;
   --color-info:    var(--accent-base);

   /* Card type accent colours */
/* Card type colours */
--color-card-lesson:             var(--portal-base);
--color-card-lesson-light:       var(--portal-10);

--color-card-subject:            #3b82f6;
--color-card-subject-light:      color-mix(in srgb, #3b82f6 10%, transparent);

--color-card-mindfulness:       #e11d75;
--color-card-mindfulness-light: color-mix(in srgb, #e11d75 10%, transparent);
--color-card-webinar:            #9e15dd;
--color-card-webinar-light:      color-mix(in srgb, #9e15dd 10%, transparent);

--color-card-parent-carer:       #077c83;
--color-card-parent-carer-light: color-mix(in srgb, #077c83 10%, transparent);

--color-card-help:               #D4600A;
--color-card-help-light:         color-mix(in srgb, #D4600A 10%, transparent);

   /* -----------------------------------
      TYPOGRAPHY
   ----------------------------------- */

   --font-primary: 'Avenir Next Cyr', sans-serif;

   --font-size-xs:   12px;
   --font-size-sm:   14px;
   --font-size-base: 16px;
   --font-size-md:   18px;
   --font-size-lg:   20px;
   --font-size-xl:   24px;
   --font-size-2xl:  28px;
   --font-size-3xl:  32px;
   --font-size-4xl:  36px;
   --font-size-5xl:  48px;
   --font-size-6xl:  64px;


   --font-weight-regular:  400;
   --font-weight-medium:   500;
   --font-weight-semibold: 600;
   --font-weight-bold:     700;

   --line-height-tight:  1.2;
   --line-height-normal: 1.5;
   --line-height-loose:  1.7;
   --line-height-display: 1.0;
   --tracking-tight:  -0.02em;
--tracking-normal:  0em;
--tracking-wide:    0.05em;


   /* -----------------------------------
      SPACING (8px grid)
      Use these for all margins, padding,
      and gaps. No magic numbers in components.
   ----------------------------------- */

   --space-1: 4px;
   --space-2: 8px;
   --space-3: 16px;
   --space-4: 24px;
   --space-5: 32px;
   --space-6: 48px;
   --space-7: 64px;
   --space-8: 96px;
--space-9: 128px;


   /* -----------------------------------
      BREAKPOINTS
      Reference values — cannot be used
      directly in @media queries but
      document the intended breakpoints
      for consistent use across the site.

      Usage in media queries:
      @media (max-width: 1024px) { ... }
   ----------------------------------- */

   --bp-sm:  640px;   /* large phones landscape */
   --bp-md:  768px;   /* tablets portrait */
   --bp-lg:  1024px;  /* tablets landscape / small laptop */
   --bp-xl:  1280px;  /* desktop */
   --bp-2xl: 1400px;  /* wide desktop — matches --max-width */

   /* -----------------------------------
      LAYOUT
   ----------------------------------- */

--max-width:       1400px;
--sidebar-width:   300px;
--header-height:   64px;
--hero-height:     24px;
--content-padding: 80px;

@media (max-width: 1280px) {
    :root { --content-padding: 48px; }
}

@media (max-width: 1024px) {
    :root { --content-padding: 32px; }
}

@media (max-width: 768px) {
    :root { --content-padding: 16px; }
}


   /* -----------------------------------
      SEMANTIC SPACING
      Named tokens for specific contexts.
      Adjust these to change rhythm globally.
      Never use raw space-N values in
      components — always use a semantic token.
   ----------------------------------- */

   /* Page structure */
   --page-top:            calc(var(--header-height) + var(--space-5)); /* content clears fixed nav */
   --section-gap:         var(--space-5);   /* 64px — gap between major page sections */
   --section-gap-sm:      var(--space-5);   /* 32px — tighter gap e.g. within a hub */
   --section-header-gap:  var(--space-4);   /* 24px — gap between a section header and its content */
   --section-padding-x:   var(--space-5);   /* 32px — horizontal padding inside section blocks */
   --section-padding-y:   var(--space-6);   /* 48px — vertical padding inside section blocks */

   /* Typography rhythm — within a text block */
   --text-gap-heading-sub:  var(--space-1);  /* 4px  — heading → subheading/subtitle */
   --text-gap-sub-body:     var(--space-2);  /* 8px  — subheading → body copy */
   --text-gap-body:         var(--space-3);  /* 16px — between body paragraphs */
   --text-gap-body-content: var(--space-4);  /* 24px — body copy → content block below */
   --text-gap-label-title:  var(--space-2);  /* 8px  — eyebrow label → title */

   /* Card internal spacing */
   --card-padding-x:        var(--space-3);  /* 16px — horizontal padding inside card body */
   --card-padding-y:        12px;            /* 12px — vertical padding top/bottom of card body */
   --card-padding-footer-x: var(--space-3);  /* 16px — footer strip horizontal padding */
   --card-padding-footer-y: var(--space-2);  /* 8px  — footer strip vertical padding */
   --card-gap:              var(--space-4);  /* 24px — gap between cards in a grid or row */

   /* Content blocks — PDFs, videos, interactives */
   --block-gap:             var(--space-4);  /* 24px — between content blocks within a section */
   --block-gap-lg:          var(--space-6);  /* 48px — between major lesson sections */

   /* Component internal spacing */
   --sidebar-padding:       var(--space-4);  /* 24px — sidebar internal padding */
   --control-padding-x:     var(--space-3);  /* 16px — input/button horizontal padding */
   --control-padding-y:     var(--space-2);  /* 8px  — input/button vertical padding */
   --inline-padding-x:      var(--space-2);  /* 8px  — badge/tag/label horizontal padding */
   --inline-padding-y:      var(--space-1);  /* 4px  — badge/tag/label vertical padding */

   /* -----------------------------------
      BORDER RADIUS
   ----------------------------------- */

   --radius-sm:   4px;
   --radius-md:   8px;
   --radius-lg:   12px;
   --radius-xl:   16px;
   --radius-full: 9999px;

   /* -----------------------------------
      SHADOWS
   ----------------------------------- */

   --shadow-sm: 0 1px 2px rgba(0,0,0,0.30), 0 2px 6px 2px rgba(0,0,0,0.15);
--shadow-md: 0 2px 4px rgba(0,0,0,0.14), 0 4px 5px rgba(0,0,0,0.12), 0 1px 10px rgba(0,0,0,0.20);
   --shadow-lg: 0 4px 8px rgba(0,0,0,0.20), 0 8px 16px 4px rgba(0,0,0,0.15);

   /* -----------------------------------
      TRANSITIONS
   ----------------------------------- */

   --transition-fast:   150ms ease;
   --transition-normal: 250ms ease;
   --transition-slow:   350ms ease;

   /* -----------------------------------
      Z-INDEX
   ----------------------------------- */

   --z-sidebar: 100;
   --z-header:  200;
   --z-modal:   300;
   --z-overlay: 400;

   /* -----------------------------------
      PDF VIEWER
   ----------------------------------- */

   --pdf-viewer-height:          calc(100vh - 232px);
   --pdf-viewer-thumbnail-width: 160px;
   --pdf-landscape-ratio:        1.414;
   --pdf-portrait-ratio:         0.707;
}

/* =====================
   RESET & BASE STYLES
   ===================== */

*,
*::before,
*::after {
   box-sizing: border-box;
   margin: 0;
   padding: 0;
}

html {
   font-size: var(--font-size-base);
   scroll-behavior: smooth;
}

body {
   font-family: var(--font-primary);
   font-size: var(--font-size-base);
   line-height: var(--line-height-normal);
   color: var(--color-text-primary);
   background-color: var(--color-surface);
}

img {
   max-width: 100%;
   height: auto;
   display: block;
}

a {
   color: var(--color-btn-primary);
   text-decoration: none;
   transition: color var(--transition-fast);
}

a:hover {
   color: var(--color-btn-primary-hover);
}
:focus-visible {
   outline: 2px solid var(--color-focus-ring);
   outline-offset: 3px;
   border-radius: var(--radius-sm);
}

.container {
   width: 100%;
   max-width: var(--max-width);
   margin-left: auto;
   margin-right: auto;
   padding-left: var(--content-padding);
   padding-right: var(--content-padding);
}

/* =====================
   NAVIGATION — SHARED
   Standard slim nav used on all pages
   except the portal home hero state
   ===================== */

.site-nav {
   width: 100%;
   top: 0;
   left: 0;
   right: 0;
   height: var(--header-height);
   background-color: var(--color-nav-bg-scrolled);
   border-bottom: 1px solid var(--color-nav-border);
   z-index: var(--z-header);
   box-shadow: var(--shadow-sm);
}

.site-nav__menu {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    flex: 1;
    padding: 0 var(--space-4);
}
.site-nav__menu-item {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);
    text-decoration: none;
    padding: 4px var(--space-2);
    border-bottom: 2px solid transparent;
    transition: all var(--transition-fast);
    white-space: nowrap;
}
.site-nav__menu-item:hover {
    color: var(--color-text-primary);
    border-bottom-color: var(--color-text-primary);

   }
   .site-nav__menu-item--active {
    font-weight: var(--font-weight-bold);
    border-bottom-color: var(--color-text-primary);
}
.site-nav__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 var(--content-padding);
    gap: var(--space-4);
}

.site-nav__brand {
   display: flex;
   align-items: center;
   gap: var(--space-2);
   text-decoration: none;
}

.site-nav__logo {
   width: 48px;
   height: 48px;
   flex-shrink: 0;
}

.site-nav__logo img {
   width: 100%;
   height: 100%;
   object-fit: contain;
}

.site-nav__title {
   font-size: var(--font-size-md);
   font-weight: var(--font-weight-semibold);
   color: var(--color-text-primary);
   white-space: nowrap;
}

.site-nav__breadcrumb {
   display: flex;
   align-items: center;
   list-style: none;
   gap: var(--space-2);
   font-size: var(--font-size-sm);
   color: var(--color-text-secondary);
}

.site-nav__breadcrumb a {
   color: var(--color-text-secondary);
   transition: color var(--transition-fast);
}

.site-nav__breadcrumb a:hover {
   color: var(--color-text-primary);
}

.site-nav__breadcrumb-sep {
   color: var(--color-text-muted);
}

.site-nav__breadcrumb-current {
   color: var(--color-text-primary);
   font-weight: var(--font-weight-medium);
}

.site-nav__user {
   display: flex;
   align-items: center;
   gap: var(--space-3);
   margin-left: auto;
       position: relative;

}


.site-nav__dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
    min-width: 180px;
    z-index: 200;
    overflow: hidden;
}

.site-nav__dropdown-name {
    padding: 12px 16px 8px;
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
    border-bottom: 1px solid var(--color-border);
    font-weight: 600;
}

.site-nav__dropdown-item {
    display: block;
    padding: 10px 16px;
    font-size: var(--font-size-sm);
    color: var(--color-text-primary);
    text-decoration: none;
}

.site-nav__dropdown-item:hover {
    background: var(--color-surface-subtle);
}

.site-nav__dropdown-item--logout {
    color: var(--color-error);
    border-top: 1px solid var(--color-border);
}

.site-nav__avatar {
   width: 40px;
   height: 40px;
       cursor: pointer;
    border: none;
   border-radius: var(--radius-full);
   background-color: var(--uv-brand-base);
   color: var(--color-text-inverse);
   font-size: var(--font-size-sm);
   font-weight: var(--font-weight-bold);
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
}

.site-nav__user-info {
   display: flex;
   flex-direction: column;
   gap: 2px;
   text-decoration: none;
   cursor: pointer;
}

.site-nav__user-info:hover .site-nav__user-name {
   text-decoration: underline;
}

.site-nav__user-name {
   font-size: var(--font-size-sm);
   font-weight: var(--font-weight-semibold);
   color: var(--color-text-primary);
   line-height: 1.2;
}

.site-nav__user-school {
   font-size: var(--font-size-xs);
   color: var(--color-btn-outline-text);
   line-height: 1.2;
}

.site-nav__logout {
   display: inline-flex;
   align-items: center;
   padding: 4px var(--space-3);
   border: 1px solid var(--color-btn-outline-border);
   border-radius: var(--radius-sm);
   font-size: var(--font-size-base);
   font-weight: var(--font-weight-semibold);
   color: var(--color-btn-outline-text);
   background: transparent;
   text-decoration: none;
   transition: background-color var(--transition-fast), color var(--transition-fast);
   white-space: nowrap;
}

.site-nav__logout:hover {
   background-color: var(--color-btn-outline-hover);
   color: var(--color-btn-outline-text);
}



/* =====================
   BREADCRUMB (legacy)
   ===================== */

.breadcrumb {
   display: flex;
   align-items: center;
   list-style: none;
   gap: var(--space-2);
   font-size: var(--font-size-sm);
}

.breadcrumb__item a {
   color: var(--color-text-secondary);
}

.breadcrumb__item a:hover {
   color: var(--color-text-primary);
}

.breadcrumb__item--current {
   color: var(--color-text-primary);
   font-weight: var(--font-weight-medium);
}

.breadcrumb__separator {
   color: var(--color-text-muted);
}

/* =====================
   FOOTER
   ===================== */

.site-footer__mega {
    background-color: var(--portal-base);
    padding: var(--space-6) 0 var(--space-8);
}

.site-footer__mega-inner {
   max-width: var(--max-width);
   margin: 0 auto;
   padding: 0 var(--content-padding);
   display: flex;
   gap: var(--space-8);
   align-items: flex-start;
}

/* Logo block */
.site-footer__logo {
   flex-shrink: 0;
}

.site-footer__logo-img {
   width: 160px;
   display: block;
}

/* Columns */
.site-footer__col {
   flex: 1 1 0;
   min-width: 0;
}

.site-footer__col-heading {
   font-size: var(--font-size-base);
   font-weight: var(--font-weight-bold);
   color: #1a1a1a;
   margin: 0 0 var(--space-3);
}

.site-footer__col-links {
   list-style: none;
   margin: 0;
   padding: 0;
   display: flex;
   flex-direction: column;
   gap: var(--space-2);
}

.site-footer__col-links a {
   font-size: var(--font-size-sm);
   color: #1a1a1a;
   text-decoration: none;
}

.site-footer__col-links a:hover {
   text-decoration: underline;
}

/* Copyright bar */
.site-footer__bar {
   background-color: var(--portal-base);
   border-top: 1px solid rgba(0,0,0,0.12);
   padding: var(--space-4) 0;
}

.site-footer__bar-inner {
   max-width: var(--max-width);
   margin: 0 auto;
   padding: 0 var(--content-padding);
   text-align: center;
}

.site-footer__copyright {
   font-size: var(--font-size-sm);
   color: #1a1a1a;
   margin: 0;
}

/* Fallback: no columns set yet */
.site-footer:not(:has(.site-footer__mega)) .site-footer__bar {
   background-color: var(--portal-base);
   border-top: none;
   padding: var(--space-6) 0;
}

@media (max-width: 768px) {
   .site-footer__mega-inner {
      flex-wrap: wrap;
      gap: var(--space-6);
   }
   .site-footer__logo {
      width: 100%;
   }
   .site-footer__col {
      flex: 1 1 140px;
   }
}

/* =====================
   BUTTONS
   ===================== */

:root {
    --color-btn-secondary:        var(--grey-20);
    --color-btn-secondary-hover:  var(--grey-30);
    --color-btn-secondary-text:   var(--grey-70);
    --color-btn-secondary-shadow: var(--grey-30);

    --color-btn-ghost-text:       var(--grey-70);
    --color-btn-ghost-border:     var(--color-btn-primary);
    --color-btn-ghost-hover:      var(--grey-20);
}

/* --- Base --- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    padding: 0 var(--space-3);
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    border: none;
        box-sizing: border-box;  /* add this */

    text-decoration: none;
    white-space: nowrap;
    transition:
        background-color var(--transition-fast),
        box-shadow var(--transition-fast),
        transform var(--transition-fast),
        border-color var(--transition-fast);
}

.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

.btn:focus-visible {
    outline: 2px solid var(--color-focus-ring);
    outline-offset: 2px;
}

.btn--with-icon {
    gap: var(--space-2);
}

/* --- Size variants --- */
.btn--sm {
    height: 32px !important;
    padding: 8px 16px !important;
    font-size: var(--font-size-sm);
    border-radius: var(--radius-sm);
}

.btn--lg {
    height: 48px;
    padding: 0 var(--space-4);
    font-size: var(--font-size-md);
    border-radius: var(--radius-md);
}

/* --- Primary --- */
.btn--primary {
    background-color: var(--color-btn-primary);
    color: var(--color-btn-primary-text);
}

.btn--primary:hover {
    background-color: var(--color-btn-primary-hover);
    color: var(--color-btn-primary-text);
    transform: translateY(-1px);

}

.btn--primary:active {
    transform: translateY(1px);
    }

/* --- Secondary --- */
.btn--secondary {
    background-color: var(--color-btn-secondary);
    color: var(--color-btn-secondary-text);
}

.btn--secondary:hover {
    background-color: var(--color-btn-secondary-hover);
    color: var(--color-btn-secondary-text);
    transform: translateY(-1px);
}

.btn--secondary:active {
    transform: translateY(1px);
    box-shadow: none;
}

/* --- Ghost --- */

.btn--ghost {
    background: transparent;
    color: var(--color-btn-primary);
    border: 1.5px solid var(--color-btn-primary);
}

.btn--ghost:hover {
    background: var(--color-btn-primary);
    color: var(--color-text-inverse);
}

.btn--ghost:active {
    background-color: var(--color-btn-secondary-hover);
}

/* --- Ghost — card type colour variants --- */
/* Shared base for all card ghost variants */
.btn--ghost-subject,
.btn--ghost-mindfulness,
.btn--ghost-webinar,
.btn--ghost-parent-carer,
.btn--ghost-help {
    border-width: 2px;
    border-style: solid;
}



/* Subject */
.btn--ghost-subject {
    color: var(--color-card-subject);
    border-color: color-mix(in srgb, var(--color-card-subject) 30%, transparent);
    box-shadow:
        0 2px 12px color-mix(in srgb, var(--color-card-subject) 12%, transparent),
        0 1px 3px rgba(0, 0, 0, 0.07);
}
.btn--ghost-subject:hover,
.card--subject:hover .btn--ghost-subject {
    color: #fff;
    background: var(--color-card-subject);
    border-color: var(--color-card-subject);
    box-shadow:
        0 8px 28px color-mix(in srgb, var(--color-card-subject) 35%, transparent),
        0 3px 8px rgba(0, 0, 0, 0.1);
    transform: translateY(-1px);
}
.btn--ghost-subject:active {
    transform: translateY(0);
    box-shadow: 0 2px 10px color-mix(in srgb, var(--color-card-subject) 20%, transparent);
}

/* Mindfulness */
.btn--ghost-mindfulness {
    color: var(--color-card-mindfulness);
    border-color: color-mix(in srgb, var(--color-card-mindfulness) 30%, transparent);
    box-shadow:
        0 2px 12px color-mix(in srgb, var(--color-card-mindfulness) 12%, transparent),
        0 1px 3px rgba(0, 0, 0, 0.07);
}
.btn--ghost-mindfulness:hover,
.card--mindfulness:hover .btn--ghost-mindfulness {
    color: #fff;
    background: var(--color-card-mindfulness);
    border-color: var(--color-card-mindfulness);
    box-shadow:
        0 8px 28px color-mix(in srgb, var(--color-card-mindfulness) 35%, transparent),
        0 3px 8px rgba(0, 0, 0, 0.1);
    transform: translateY(-1px);
}
.btn--ghost-mindfulness:active {
    transform: translateY(0);
    box-shadow: 0 2px 10px color-mix(in srgb, var(--color-card-mindfulness) 20%, transparent);
}

/* Webinar */
.btn--ghost-webinar {
    color: var(--color-card-webinar);
    border-color: color-mix(in srgb, var(--color-card-webinar) 30%, transparent);
    box-shadow:
        0 2px 12px color-mix(in srgb, var(--color-card-webinar) 12%, transparent),
        0 1px 3px rgba(0, 0, 0, 0.07);
}
.btn--ghost-webinar:hover,
.card--webinar:hover .btn--ghost-webinar {
    color: #fff;
    background: var(--color-card-webinar);
    border-color: var(--color-card-webinar);
    box-shadow:
        0 8px 28px color-mix(in srgb, var(--color-card-webinar) 35%, transparent),
        0 3px 8px rgba(0, 0, 0, 0.1);
    transform: translateY(-1px);
}
.btn--ghost-webinar:active {
    transform: translateY(0);
    box-shadow: 0 2px 10px color-mix(in srgb, var(--color-card-webinar) 20%, transparent);
}

/* Parent & Carer */
.btn--ghost-parent-carer {
    color: var(--color-card-parent-carer);
    border-color: color-mix(in srgb, var(--color-card-parent-carer) 30%, transparent);
    box-shadow:
        0 2px 12px color-mix(in srgb, var(--color-card-parent-carer) 12%, transparent),
        0 1px 3px rgba(0, 0, 0, 0.07);
}
.btn--ghost-parent-carer:hover,
.card--parent-carer:hover .btn--ghost-parent-carer {
    color: #fff;
    background: var(--color-card-parent-carer);
    border-color: var(--color-card-parent-carer);
    box-shadow:
        0 8px 28px color-mix(in srgb, var(--color-card-parent-carer) 35%, transparent),
        0 3px 8px rgba(0, 0, 0, 0.1);
    transform: translateY(-1px);
}
.btn--ghost-parent-carer:active {
    transform: translateY(0);
    box-shadow: 0 2px 10px color-mix(in srgb, var(--color-card-parent-carer) 20%, transparent);
}

/* Help */
.btn--ghost-help {
    color: var(--color-card-help);
    border-color: color-mix(in srgb, var(--color-card-help) 30%, transparent);
    box-shadow:
        0 2px 12px color-mix(in srgb, var(--color-card-help) 12%, transparent),
        0 1px 3px rgba(0, 0, 0, 0.07);
}
.btn--ghost-help:hover,
.card--help:hover .btn--ghost-help {
    color: #fff;
    background: var(--color-card-help);
    border-color: var(--color-card-help);
    box-shadow:
        0 8px 28px color-mix(in srgb, var(--color-card-help) 35%, transparent),
        0 3px 8px rgba(0, 0, 0, 0.1);
    transform: translateY(-1px);
}
.btn--ghost-help:active {
    transform: translateY(0);
    box-shadow: 0 2px 10px color-mix(in srgb, var(--color-card-help) 20%, transparent);
}


.btn--ghost-assets {
    background-color: transparent;
    color: #9e15dd;
    border: 2px solid color-mix(in srgb, #9e15dd 30%, transparent);
    box-shadow: 0 2px 12px color-mix(in srgb, #9e15dd 12%, transparent),
        0 1px 3px rgba(0, 0, 0, 0.07);
}

.btn--ghost-assets:hover {
    background-color: color-mix(in srgb, #9e15dd 10%, transparent);
    border-color: color-mix(in srgb, #9e15dd 50%, transparent);
    color: #9e15dd;
}
.portal-layout--module .module-pc__actions .btn--ghost-parent-carer,
.portal-layout--module .module-pc__actions .btn--ghost-assets {
    box-shadow: none;
}


/* --- Success state --- */
.btn--success {
    background-color: var(--color-success);
    color: #fff;
    border-color: var(--color-success);
    pointer-events: none;
}
.portal-home__section--welcome .portal-home__section-subtitle {
    color: var(--color-text-secondary);
}
.portal-home__section--recent .portal-home__section-header {
    margin-bottom: var(--space-1);
}
.portal-home__see-all {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-btn-primary);
    text-decoration: none;
    white-space: nowrap;
    transition: color var(--transition-fast);
}

.portal-home__see-all:hover {
    color: var(--color-text-primary);
}


/* =====================
   PORTAL LAYOUT
   ===================== */
.portal-layout {
   display: flex;
   min-height: calc(100vh - var(--header-height));
   max-width: var(--max-width);
   margin: 0 auto;
   padding: var(--content-padding);
   padding-top: var(--space-4);  /* was: calc(var(--header-height) + var(--content-padding)) */
   gap: var(--space-5);
}


.portal-layout__main {
   flex: 1;
   min-width: 0;
}

.portal-layout__content {
   width: 100%;
}

.portal-layout--has-sidebar {
   display: grid;
   grid-template-columns: var(--sidebar-width) 1fr;
   gap: var(--space-5);
}

.portal-layout__sidebar {
   position: sticky;
top: var(--content-top);
   height: calc(100vh - var(--header-height) - (var(--content-padding) * 2));
   overflow-y: auto;
   background-color: var(--color-card);
   border-radius: var(--radius-lg);
   border: 1px solid var(--color-border);
   box-shadow: var(--shadow-sm);
}

/* =====================
   CARDS - BASE
   ===================== */

.card {
   background-color: var(--color-card);
   border-radius: var(--radius-md);
   border: none;
   overflow: hidden;
   text-decoration: none;
   display: flex;
   flex-direction: column;
   color: inherit;
   box-shadow:
        0 2px 8px rgba(49, 20, 80, 0.06),
        0 1px 2px rgba(0, 0, 0, 0.04);
    transition:
        box-shadow 250ms ease,
        transform 250ms ease;
}

.card:hover {
    box-shadow:
        0 12px 32px rgba(49, 20, 80, 0.12),
        0 4px 8px rgba(0, 0, 0, 0.06);
    transform: translateY(-4px);
}

.card:active {
    box-shadow:
        0 1px 3px rgba(49, 20, 80, 0.08),
        0 1px 2px rgba(0, 0, 0, 0.06);
    transform: translateY(0);
}

.card__thumbnail {
   width: 100%;
   aspect-ratio: 16/9;
   background-color: var(--color-border);
   overflow: hidden;
   position: relative;
}

.card__thumbnail img {
   width: 100%;
   height: 100%;
   object-fit: cover;
}

.card__label {
   position: absolute;
   top: var(--space-2);
   left: var(--space-2);
   font-size: var(--font-size-xs);
   font-weight: var(--font-weight-semibold);
   text-transform: uppercase;
   letter-spacing: var(--tracking-wide);
   padding: var(--space-1) var(--space-2);
   border-radius: var(--radius-sm);
   color: var(--color-text-inverse);
}

.card__body {
   padding: var(--card-padding-y) var(--card-padding-x);
   flex: 1;
   display: flex;
   flex-direction: column;
}

.card__title {
   font-size: var(--font-size-lg);
   font-weight: var(--font-weight-semibold);
   color: var(--color-text-primary);
   margin-bottom: var(--text-gap-sub-body);
   line-height: var(--line-height-tight);
}

.card__subheading {
   font-size: var(--fon-sm);
   color: var(--color-text-secondary);
   line-height: var(--line-height-normal);
   margin-bottom: var(--space-3);
}

.card__footer {
   padding: var(--card-padding-footer-y) var(--card-padding-footer-x);
   border-top: none;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: var(--space-3);
}

.card-grid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
   gap: var(--card-gap);
}

/* Card footer buttons — slightly taller than default btn height */
.card .btn--ghost {
    height: 48px;
}

/* =====================
   PROGRESS BAR
   ===================== */

.card__progress {
   display: flex;
   align-items: center;
   gap: var(--space-2);
   font-size: var(--font-size-xs);
   color: var(--color-text-secondary);
   flex: 1;
}

.progress-bar {
   flex: 1;
   height: 4px;
   background-color: var(--color-progress-track);
   border-radius: var(--radius-full);
   overflow: hidden;
}

.progress-bar__fill {
   height: 100%;
   border-radius: var(--radius-full);
   transition: width var(--transition-normal);
}

/* =====================
   CARD - LESSON
   ===================== */

.card--lesson {
   display: flex;
   flex-direction: column;
}

.card--lesson:hover {
   box-shadow: var(--shadow-md);
   transform: translateY(-2px);
}

.card--lesson .card__header {
   width: 100%;
   flex: 0 0 50%;
   position: relative;
   display: flex;
   align-items: flex-start;
   padding: var(--space-4);
   overflow: hidden;
}

/* Gradient: colour at top, fades to white at bottom of header */
.card--lesson .card__header::after {
   content: '';
   position: absolute;
   inset: 0;
   background: linear-gradient(to bottom, transparent 30%, white 100%);
   pointer-events: none;
}

.card--lesson .card__lesson-text {
   position: relative;
   z-index: 1;
   display: flex;
   flex-direction: column;
   gap: 4px;
}

.card--lesson .card__lesson-title {
   font-size: var(--font-size-3xl);
   font-weight: var(--font-weight-bold);
   color: var(--color-text-primary);
   line-height: var(--line-height-tight);
}

.card--lesson .card__footer {
   background-color: var(--color-card);
   margin-top: auto;
}

.card--lesson .progress-bar__fill {
   background-color: var(--color-card-lesson);
}

.card--lesson .btn {
   background-color: var(--color-card-lesson);
   color: var(--color-text-inverse);
   flex-shrink: 0;
}

.card--lesson .btn:hover {
   filter: brightness(0.88);
}

/* =====================
   CARD - COURSE
   ===================== */

.card--module {
    width: 280px !important;
    min-width: 280px;
    max-width: 280px;
    height: 304px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 0;
    border: none;
    box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
    background: #fff;
    border-radius: 12px;
}

.card--module:hover {
    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.12);
    transform: translateY(-2px);
}

.card-scroll--recent .card-scroll__labelled-item {
    overflow: visible;
        padding-bottom: var(--space-2);

}

.card-scroll--recent {
    overflow: visible;
    padding-top: var(--space-2);
    padding-bottom: var(--space-3);
    padding-left: var(--space-2);

}



.carousel__track .card--module {
    width: 280px !important;
    min-width: 280px;
    height: 304px;
    flex-shrink: 0;
}

/* Coloured / image header area */
.card--module .card__header {
   width: 100%;
   aspect-ratio: 403 / 229;
   position: relative;
   display: flex;
   align-items: flex-end;
   padding: var(--space-3);
   overflow: hidden;
}



.card--module .card__label {
   position: absolute;
   top: var(--space-2);
   right: var(--space-2);
   font-size: var(--font-size-xs);
   font-weight: var(--font-weight-semibold);
   text-transform: uppercase;
   letter-spacing: var(--tracking-wide);
   padding: var(--space-1) var(--space-2);
   border-radius: var(--radius-sm);
   background-color: rgba(0,0,0,0.25);
   color: #fff;
}

.card--module .card__body {
   padding: var(--card-padding-y) var(--card-padding-x);
   flex: 1;
   display: flex;
   flex-direction: column;
   background-color: var(--color-card);
}

.card--module .card__footer {
   padding: var(--card-padding-footer-y) var(--card-padding-footer-x);
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: var(--space-3);
   background-color: var(--color-card);
}

.card--module .card__progress {
   display: flex;
   align-items: center;
   gap: var(--space-2);
   font-size: var(--font-size-xs);
   color: var(--color-text-secondary);
   flex: 1;
}

.card--module .progress-bar {
   flex: 1;
   height: 4px;
   background-color: var(--color-progress-track);
   border-radius: var(--radius-full);
   overflow: hidden;
}
.card--module:hover .btn--ghost-subject {
    color: #fff;
    background: var(--color-card-subject);
    border-color: var(--color-card-subject);
    box-shadow:
        0 8px 28px color-mix(in srgb, var(--color-card-subject) 35%, transparent),
        0 3px 8px rgba(0, 0, 0, 0.1);
    transform: translateY(-1px);
}
/* =====================
   CARD - MINDFULNESS
   ===================== */

.card--mindfulness {
   height: 360px;
    width: 280px;
    border-radius: 12px;
    overflow: hidden;
    display: block;
    flex-shrink: 0;
    position: relative;
    box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
}

.card--mindfulness:hover {
    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.12);
    transform: translateY(-2px);
}

.card--mindfulness .card__thumbnail {
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   width: 100%;
   height: 100%;
   aspect-ratio: unset;
}

.card--mindfulness .card__thumbnail img {
   width: 100%;
   height: 100%;
   object-fit: cover;
}

.card--mindfulness .card__label {
   background-color: var(--color-card-mindfulness);
}

.card--mindfulness .card__body {
   position: absolute;
   bottom: 0;
   left: 0;
   right: 0;
   z-index: 1;
   background: linear-gradient(to top, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 130%);
   padding: var(--space-4);
}

.card--mindfulness:not(:has(.card__thumbnail img)) .card__body {
   background: var(--color-card-mindfulness);
}

.card--mindfulness .card__title {
   color: var(--color-text-inverse);
}

.card--mindfulness .card__subheading {
   color: rgba(255, 255, 255, 0.85);
}

.card--mindfulness .card__footer {
   display: none;
}

.card--mindfulness .btn {
   background-color: var(--color-card-mindfulness);
   color: var(--color-text-inverse);
}

.card--mindfulness .btn:hover {
   background-color: var(--uv-brand-60);
   color: var(--color-text-inverse);
}



/* =====================
   PORTAL HOME
   ===================== */

.portal-home__section {
   margin-bottom: var(--section-gap);
}

/* Welcome heading — larger and more impactful */
.portal-home__section--welcome .portal-home__section-title {
    font-size: var(--font-size-4xl);
    font-weight: var(--font-weight-bold);
}

.portal-home__section-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
   margin-bottom: var(--space-3);
   
}

.portal-home__section-header--with-action {
    align-items: center;  /* was flex-start */
   gap: var(--space-4);
}

.portal-home__section-heading-group {
   display: flex;
   flex-direction: column;
   gap: var(--text-gap-heading-sub);
}


/* Section titles — smaller and tighter */
.portal-home__section-title {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
     margin: 0;
    line-height: 1;
}

/* Continue where you left off — labelled carousel */
.card-scroll__labelled-item {
   display: flex;
   flex-direction: column;
   gap: var(--space-2);
   flex-shrink: 0;
   scroll-snap-align: start;
}

/* All cards in the recent carousel share the same height */
.card-scroll--recent .card-scroll__labelled-item .card {
   flex: none;
}

/* Fix lesson header to use fixed pixel height rather than flex % inside fixed-height card */
.card-scroll--recent .card--lesson .card__header {
   flex: 0 0 110px;
}

/* Fix course header aspect-ratio inside fixed-height card */
.card-scroll--recent .card--module .card__header {
   aspect-ratio: unset;
   flex: 0 0 110px;
}


.card-scroll--recent {
   align-items: stretch;
}

.portal-home__recent-label {
   display: inline-block;
   font-size: var(--font-size-xs);
   font-weight: var(--font-weight-semibold);
   text-transform: uppercase;
   letter-spacing: 0.06em;
   color: var(--color-text-secondary);
   background: var(--color-surface, #f3f4f6);
   border-radius: var(--radius-sm);
   padding: 3px 8px;
   align-self: flex-start;
   white-space: nowrap;
}

.portal-home__empty {
   color: var(--color-text-muted);
   font-size: var(--font-size-sm);
   padding: var(--space-5);
   text-align: center;
   background-color: var(--color-card);
   border-radius: var(--radius-lg);
   border: 1px dashed var(--color-border);
}

.card-grid--recent {
   display: flex;
   flex-wrap: wrap;
   gap: var(--space-4);
}

.card-grid--preview {
   grid-template-columns: repeat(3, 1fr);
}

.card-grid--modules {
   grid-template-columns: repeat(auto-fill, minmax(420px, 480px));
}

.portal-home__licence-warning {
    display: inline-block;
    margin-top: 12px;
    padding: 8px 14px;
    background: #fff8e1;
    border: 1px solid #f5c842;
    border-radius: 6px;
    font-size: 0.875rem;
    color: #7a5c00;
}

.card-grid--modules .card--module .card__header {
   aspect-ratio: 403 / 229;
}

.card-grid--help {
   grid-template-columns: repeat(2, 1fr);
}

.card-scroll {
    display: flex;
    gap: var(--space-4);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: -8px -12px -16px;
    margin: 8px 12px 16px;
}

.card-scroll::-webkit-scrollbar {
   display: none;
}

.card-scroll .card {
   flex-shrink: 0;
   scroll-snap-align: start;
}

.card-scroll--mindfulness .card {
   width: 280px;
}

.card-scroll--parent-carer .card {
   width: 300px;
}

.card-scroll--webinars .card {
   width: 300px;
}

.card-scroll--help .card {
    width: 280px;
    height: 304px;
    flex-shrink: 0;
}



/* Labelled wrapper takes width from card type */
.card-scroll--recent .card-scroll__labelled-item:has(.card--module),
.card-scroll--recent .card-scroll__labelled-item:has(.card--lesson),
.card-scroll--recent .card-scroll__labelled-item:has(.card--mindfulness),
.card-scroll--recent .card-scroll__labelled-item:has(.card--parent-carer),
.card-scroll--recent .card-scroll__labelled-item:has(.card--webinar),
.card-scroll--recent .card-scroll__labelled-item:has(.card--help) { width: 280px; }
.card-grid--recent .card--module {
   flex: 2 1 294px;
   max-width: 392px;
}
.card-scroll--recent .card--module,
.carousel__track.card-scroll--recent .card--module {
    width: 280px !important;
    max-width: 280px;
    height: 304px !important;
    max-height: 304px;
    flex-shrink: 0;
    overflow: hidden;
}

.card-scroll--recent .card--module > div {
    height: 100%;
}

.card-grid--recent .card--lesson {
   flex: 0 0 320px;
   max-width: 320px;
}

.card-grid--recent .card--mindfulness {
   flex: 0 0 320px;
   max-width: 320px;
}
.card-grid--recent .card--parent-carer {
   flex: 0 0 320px;
   max-width: 320px;
}
.card-scroll--recent .card,
.carousel__track.card-scroll--recent .card {
   width: 280px !important;
   height: 304px !important;
   max-height: 304px;
   flex-shrink: 0;
   overflow: hidden;
}
.card-grid--subjects {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    flex-wrap: wrap;
    padding: 0px 12px 12px;
}


/* =====================
   COURSE HEADER
   ===================== */

.module-header {
   background: linear-gradient(135deg, var(--uv-brand-base), var(--uv-brand-70));
   border-radius: var(--radius-lg);
   padding: var(--space-6) var(--space-5);
   margin-bottom: var(--space-6);
   color: var(--color-text-inverse);
}

.module-header__content {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: var(--space-5);
}

.module-header__label {
   font-size: var(--font-size-sm);
   font-weight: var(--font-weight-semibold);
   text-transform: uppercase;
   letter-spacing: var(--tracking-wide);
   opacity: 0.75;
   margin-bottom: var(--space-2);
}

.module-header__title {
   font-size: var(--font-size-3xl);
   font-weight: var(--font-weight-bold);
   margin-bottom: var(--space-2);
   line-height: var(--line-height-tight);
}

.module-header__description {
   font-size: var(--font-size-md);
   opacity: 0.85;
   max-width: 600px;
}

/* Course Progress Circle */
.course-progress {
   display: flex;
   align-items: center;
   gap: var(--space-3);
   flex-shrink: 0;
}

.course-progress__circle {
   position: relative;
   width: 80px;
   height: 80px;
}

.course-progress__svg {
   width: 80px;
   height: 80px;
   transform: rotate(-90deg);
}

.course-progress__bg {
   fill: none;
   stroke: rgba(255, 255, 255, 0.2);
   stroke-width: 3;
}

.course-progress__fill {
   fill: none;
   stroke: var(--color-text-inverse);
   stroke-width: 3;
   stroke-linecap: round;
   transition: stroke-dasharray var(--transition-normal);
}

.course-progress__percentage {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   font-size: var(--font-size-sm);
   font-weight: var(--font-weight-bold);
   color: var(--color-text-inverse);
}

.course-progress__text {
   display: flex;
   flex-direction: column;
   gap: var(--space-1);
}

.course-progress__label {
   font-size: var(--font-size-sm);
   font-weight: var(--font-weight-semibold);
   opacity: 0.75;
}

.course-progress__detail {
   font-size: var(--font-size-base);
   font-weight: var(--font-weight-medium);
}

/* =====================
   COURSE LESSONS
   ===================== */

.course-lessons {
   margin-bottom: var(--space-7);
}

.course-lessons__header {
   margin-bottom: var(--space-4);
}

.course-lessons__title {
   font-size: var(--font-size-2xl);
   font-weight: var(--font-weight-semibold);
   color: var(--color-text-primary);
}

/* =====================
   COURSE MATERIALS
   ===================== */

.course-materials {
   margin-bottom: var(--space-7);
}

.course-materials__header {
   margin-bottom: var(--space-4);
}

.course-materials__title {
   font-size: var(--font-size-2xl);
   font-weight: var(--font-weight-semibold);
   color: var(--color-text-primary);
}

/* =====================
   LESSON SIDEBAR
   ===================== */

.lesson-sidebar {
   padding: var(--space-4);
}

.lesson-sidebar__course {
   padding-bottom: var(--space-4);
   border-bottom: 1px solid var(--color-border);
   margin-bottom: var(--space-4);
}

.lesson-sidebar__course-back {
   font-size: var(--font-size-sm);
   color: var(--color-text-secondary);
   display: block;
   margin-bottom: var(--space-3);
}

.lesson-sidebar__course-back:hover {
   color: var(--color-btn-primary);
}

.lesson-sidebar__course-title {
   font-size: var(--font-size-md);
   font-weight: var(--font-weight-semibold);
   color: var(--color-text-primary);
   margin-bottom: var(--space-3);
}

.lesson-sidebar__progress {
   display: flex;
   flex-direction: column;
   gap: var(--space-2);
}

.lesson-sidebar__progress-bar {
   height: 6px;
   background-color: var(--color-progress-track);
   border-radius: var(--radius-full);
   overflow: hidden;
}

.lesson-sidebar__progress-fill {
   height: 100%;
   background-color: var(--color-progress-fill);
   border-radius: var(--radius-full);
   transition: width var(--transition-normal);
}

.lesson-sidebar__progress-text {
   font-size: var(--font-size-xs);
   color: var(--color-text-secondary);
}

.lesson-sidebar__lessons {
   margin-bottom: var(--space-4);
}

.lesson-sidebar__lessons-title {
   font-size: var(--font-size-sm);
   font-weight: var(--font-weight-semibold);
   text-transform: uppercase;
   letter-spacing: var(--tracking-wide);
   color: var(--color-text-muted);
   margin-bottom: var(--space-3);
}

.lesson-sidebar__list {
   list-style: none;
   display: flex;
   flex-direction: column;
   gap: var(--space-1);
}

.lesson-sidebar__item-link {
   display: flex;
   align-items: center;
   gap: var(--space-2);
   padding: var(--space-2) var(--space-3);
   border-radius: var(--radius-md);
   font-size: var(--font-size-sm);
   color: var(--color-text-secondary);
   transition: all var(--transition-fast);
}

.lesson-sidebar__item-link:hover {
   background-color: var(--color-surface-subtle);
   color: var(--color-text-primary);
}

.lesson-sidebar__item--current .lesson-sidebar__item-link {
   background-color: var(--color-btn-primary);
   color: var(--color-text-inverse);
}

.lesson-sidebar__item--completed .lesson-sidebar__item-indicator {
   color: var(--color-success);
}

.lesson-sidebar__item-indicator {
   flex-shrink: 0;
   width: 20px;
   text-align: center;
   font-size: var(--font-size-sm);
}

.lesson-sidebar__item-title {
   flex: 1;
   line-height: var(--line-height-tight);
}

.lesson-sidebar__materials {
   padding-top: var(--space-4);
}

/* =====================
   LESSON HEADER
   ===================== */

.lesson-header {
   position: sticky;
top: var(--content-top);
   background-color: var(--color-surface);
   z-index: var(--z-sidebar);
   padding: var(--space-4) 0;
   margin-bottom: var(--space-5);
   border-bottom: 1px solid var(--color-border);
}

.lesson-header__top {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: var(--space-4);
   margin-bottom: var(--space-3);
}

.lesson-header__course {
   font-size: var(--font-size-sm);
   color: var(--color-text-secondary);
   margin-bottom: var(--space-1);
}

.lesson-header__title {
   font-size: var(--font-size-2xl);
   font-weight: var(--font-weight-bold);
   color: var(--color-text-primary);
   line-height: var(--line-height-tight);
}

.lesson-header__complete:disabled {
   background-color: var(--color-success);
   opacity: 1;
   cursor: default;
}

/* =====================
   LESSON TABS
   ===================== */

.lesson-tabs__list {
    display: flex;
    list-style: none;
    gap: 0;
    overflow-x: auto;
    scrollbar-width: none; /* hides scrollbar in Firefox */
}

.lesson-tabs__link {
    display: block;
    padding: var(--space-2) var(--space-4);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
    white-space: nowrap;
    position: relative;
    border-bottom: none;
    margin-bottom: 0;
    transition: all var(--transition-fast);
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}

.lesson-tabs__link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background-color: transparent;
    transition: background-color var(--transition-fast);
}

.lesson-tabs__list::-webkit-scrollbar {
    display: none; /* hides scrollbar in Chrome/Safari */
}
.lesson-tabs__link:hover {
    color: var(--color-btn-primary);
    background-color: var(--color-surface-subtle);
}


.lesson-tabs__link--active {
    color: var(--color-btn-primary);
    font-weight: var(--font-weight-semibold);
}

.lesson-tabs__link--active::after {
    background-color: var(--color-btn-primary);
}



/* =====================
   LESSON SECTIONS
   ===================== */

.lesson-content {
   display: flex;
   flex-direction: column;
   gap: var(--space-7);
}

.lesson-section {
   scroll-margin-top: calc(var(--header-height) + 120px);
}

.lesson-section__header {
   display: flex;
   align-items: center;
   justify-content: space-between;
   margin-bottom: var(--space-4);
}

.lesson-section__title {
   font-size: var(--font-size-2xl);
   font-weight: var(--font-weight-semibold);
   color: var(--color-text-primary);
   margin-bottom: var(--space-4);
}

.lesson-section__header .lesson-section__title {
   margin-bottom: 0;
}

.lesson-section__description {
   font-size: var(--font-size-md);
   color: var(--color-text-secondary);
   line-height: var(--line-height-loose);
   margin-bottom: var(--space-4);
}

.lesson-section__empty {
   color: var(--color-text-muted);
   font-size: var(--font-size-sm);
   padding: var(--space-5);
   text-align: center;
   background-color: var(--color-card);
   border-radius: var(--radius-lg);
   border: 1px dashed var(--color-border);
}

/* =====================
   PDF VIEWER
   ===================== */

.pdf-viewer {
    max-width: 600px;             
    border-radius: var(--radius-lg);
    overflow: visible;
    margin-bottom: var(--space-8);
    user-select: none;
    -webkit-user-select: none;
    display: flex;
    flex-direction: column;
}

.pdf-viewer__header {
    padding: 0 0 var(--space-3) 0;
}

.pdf-viewer__title-row {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-1);
}

.pdf-viewer__icon-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--color-btn-primary) 10%, transparent);
    flex-shrink: 0;
}

.pdf-viewer__icon-wrap svg {
    color: var(--color-btn-primary);
    display: block;
}

.pdf-viewer__label {
    font-size: 20px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin: 0;
    line-height: 1;
}

.pdf-viewer__description {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    line-height: var(--line-height-normal);
    margin-top: var(--space-1);
}

.pdf-viewer__description p {
    margin: 0 0 var(--space-1);
}

.pdf-viewer__description p:last-child {
    margin-bottom: 0;
}

.pdf-viewer--landscape,
.pdf-viewer--auto {
    width: 100%;
}

.pdf-viewer--portrait {
    width: 100%;
}

.pdf-viewer__body {
    display: flex;
    flex: 1;
    overflow: hidden;
    min-height: 0;
}

.pdf-viewer__thumbnails {
    width: var(--pdf-viewer-thumbnail-width);
    flex-shrink: 0;
    overflow-y: auto;
    background-color: #3a3a3a;
    padding: var(--space-3) var(--space-2);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.pdf-viewer__thumbnail-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-1);
    cursor: pointer;
    opacity: 0.6;
    transition: opacity var(--transition-fast);
}

.pdf-viewer__thumbnail-item:hover {
    opacity: 0.9;
}

.pdf-viewer__thumbnail-item--active {
    opacity: 1;
}

.pdf-viewer__thumbnail-canvas {
    width: 100%;
    display: block;
    border: 2px solid transparent;
    border-radius: var(--radius-sm);
}

.pdf-viewer__thumbnail-item--active .pdf-viewer__thumbnail-canvas {
    border-color: var(--color-btn-primary);
}

.pdf-viewer__thumbnail-number {
    font-size: var(--font-size-xs);
    color: #ccc;
}

.pdf-viewer__canvas-wrapper {
    flex: 1;
    overflow: auto;
    background-color: #ffffff;
    padding: 24px;
    min-height: 0;
    height: 100%;
    display: block;
    border-radius: var(--radius-lg);
}

.pdf-viewer__canvas {
    display: block;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    margin: 0 auto;
}

.pdf-viewer__loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: var(--pdf-viewer-height);
    gap: var(--space-4);
    padding: var(--space-6);
}

.pdf-viewer__spinner {
    width: 48px;
    height: 48px;
    border: 4px solid var(--color-border);
    border-top-color: var(--color-btn-primary);
    border-radius: 50%;
    animation: pdf-spin 0.8s linear infinite;
}

@keyframes pdf-spin {
    to { transform: rotate(360deg); }
}

.pdf-viewer__loading-text {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.pdf-viewer__error {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: var(--pdf-viewer-height);
    gap: var(--space-3);
    padding: var(--space-6);
    text-align: center;
}

.pdf-viewer__error-icon {
    font-size: 48px;
}

.pdf-viewer__error-title {
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
}

.pdf-viewer__error-message {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    max-width: 400px;
}

/* Controls bar */
.pdf-viewer__controls {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: var(--space-2) 0;
    gap: var(--space-3);
    flex-shrink: 0;
}

.pdf-viewer__controls-left {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
}

.pdf-viewer__controls-right {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
}

/* Prev/Next + page info stacked */
.pdf-viewer__nav-group {
    display: flex;
    flex-direction: column;
    gap: 0;
    width: var(--pdf-viewer-thumbnail-width);
}

.pdf-viewer__nav-buttons {
    display: flex;
    gap: var(--space-2);
    width: 100%;
}

.pdf-viewer__nav-buttons .btn {
    flex: 1;
    white-space: nowrap;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pdf-viewer__page-info {
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
    padding-top: var(--space-1);
    display: block;
    text-align: left;
}

/* Zoom group — tight inline cluster */
.pdf-viewer__zoom-group-wrap {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
}

.pdf-viewer__zoom-group {
    display: flex;
    align-items: center;
    gap: 0;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.pdf-viewer__zoom-group .btn {
    border: none;
    border-radius: 0;
    height: 36px;
    width: 36px;
    padding: 0;
    font-size: var(--font-size-md);
    border-right: 1px solid var(--color-border-strong);
}

.pdf-viewer__zoom-group .btn:last-of-type {
    border-right: none;
}

.pdf-viewer__zoom-level {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    min-width: 48px;
    text-align: center;
    border-right: 1px solid var(--color-border-strong);
    height: 36px;
    line-height: 36px;
    padding: 0 var(--space-2);
}
.pdf-viewer__zoom-label {
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
    padding-top: var(--space-1);
    display: flex;
    justify-content: space-between;
    width: 100%;
    padding-left: 0;
}

/* Reset — text link */
.pdf-viewer__zoom-reset {
    background: none;
    border: none;
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
    cursor: pointer;
    padding: 0;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.pdf-viewer__zoom-reset:hover {
    color: var(--color-text-primary);
}

/* Ghost buttons for nav/zoom */
.pdf-viewer__controls .btn {
    background: transparent;
    color: var(--color-text-primary);
    border: 1px solid var(--color-border-strong);
    font-size: var(--font-size-sm);
    height: 36px;
    padding: 0 var(--space-3);
}

.pdf-viewer__controls .btn:hover {
    background: var(--color-surface-subtle);
    color: var(--color-text-primary);
    border-color: var(--color-border-strong);
}

/* Print — outline primary */
.pdf-viewer__controls .pdf-viewer__print {
    color: var(--color-btn-primary);
    border-color: var(--color-btn-primary);
}

.pdf-viewer__controls .pdf-viewer__print:hover {
    background: var(--color-btn-outline-hover);
    color: var(--color-btn-primary);
}

/* Fullscreen — filled primary */
.pdf-viewer__controls .pdf-viewer__fullscreen {
    background: var(--color-btn-primary);
    color: var(--color-btn-primary-text);
    border-color: var(--color-btn-primary);
}

.pdf-viewer__controls .pdf-viewer__fullscreen:hover {
    background: var(--color-btn-primary-hover);
    border-color: var(--color-btn-primary-hover);
    color: var(--color-btn-primary-text);
}

/* Fullscreen mode overrides */
.pdf-viewer--fullscreen-active {
    display: flex;
    flex-direction: column;
    background: #1a1a1a;
}

.pdf-viewer--fullscreen-active .pdf-viewer__body {
    height: calc(100dvh - 72px);
}

.pdf-viewer--fullscreen-active .pdf-viewer__thumbnails {
    display: none;
}

.pdf-viewer--fullscreen-active .pdf-viewer__controls {
    flex-shrink: 0;
    height: 72px;
    background: #1a1a1a;
    z-index: 1;
    padding: 0 var(--space-4);
    align-items: center;
}

.pdf-viewer--fullscreen-active .pdf-viewer__controls .btn {
    border-color: rgba(255, 255, 255, 0.3);
    color: #fff;
}

.pdf-viewer--fullscreen-active .pdf-viewer__controls .btn:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.5);
    color: #fff;
}

.pdf-viewer--fullscreen-active .pdf-viewer__controls .pdf-viewer__fullscreen {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.3);
    color: #fff;
}

.pdf-viewer--fullscreen-active .pdf-viewer__controls .pdf-viewer__fullscreen:hover {
    background: rgba(255, 255, 255, 0.25);
}

.pdf-viewer--fullscreen-active .pdf-viewer__zoom-level,
.pdf-viewer--fullscreen-active .pdf-viewer__page-info {
    color: rgba(255, 255, 255, 0.8);
}

.pdf-viewer--fullscreen-active .pdf-viewer__canvas-wrapper {
    border-radius: 0;
}

.pdf-viewer--fullscreen-active .pdf-viewer__header {
    display: none;
}
/* =====================
   INTERACTIVE
   ===================== */

.interactive-container {
   width: 100%;
   min-height: 500px;
   border-radius: var(--radius-lg);
   overflow: hidden;
   border: 1px solid var(--color-border);
}

/* =====================
   HUB HEADER
   ===================== */

.hub-header {
   border-radius: var(--radius-lg);
   padding: var(--space-6) var(--space-5);
   margin-bottom: var(--space-6);
   color: var(--color-text-inverse);
}

.hub-header--mindfulness {
   background: linear-gradient(135deg, var(--uv-brand-base), var(--uv-brand-70));
}

.hub-header__label {
   font-size: var(--font-size-sm);
   font-weight: var(--font-weight-semibold);
   text-transform: uppercase;
   letter-spacing: var(--tracking-wide);
   opacity: 0.75;
   margin-bottom: var(--space-2);
}

.hub-header__title {
   font-size: var(--font-size-3xl);
   font-weight: var(--font-weight-bold);
   margin-bottom: var(--space-2);
   line-height: var(--line-height-tight);
}

.hub-header__description {
   font-size: var(--font-size-md);
   opacity: 0.85;
   max-width: 600px;
}

/* =====================
   HUB CONTENT
   ===================== */

.hub-content__header {
   display: flex;
   align-items: center;
   justify-content: space-between;
   margin-bottom: var(--space-4);
}

.hub-content__title {
   font-size: var(--font-size-2xl);
   font-weight: var(--font-weight-semibold);
   color: var(--color-text-primary);
}

.hub-content__count {
   font-size: var(--font-size-sm);
   color: var(--color-text-secondary);
}

/* =====================
   MINDFULNESS CONTENT PAGE
   ===================== */

.mindfulness-header {
   margin-bottom: var(--space-6);
}
.mindfulness-content {
    max-width: var(--max-width);
    width: 100%;
    margin-inline: auto;
    padding-inline: var(--content-padding);
}
.mindfulness-content .pdf-viewer {
    max-width: 640px;
}

.mindfulness-header__back {
   display: inline-block;
   font-size: var(--font-size-sm);
   color: var(--color-text-secondary);
   margin-bottom: var(--space-4);
   transition: color var(--transition-fast);
}

.mindfulness-header__back:hover {
   color: var(--color-card-mindfulness);
}

.mindfulness-header__label {
   font-size: var(--font-size-sm);
   font-weight: var(--font-weight-semibold);
   text-transform: uppercase;
   letter-spacing: var(--tracking-wide);
   color: var(--color-card-mindfulness);
   margin-bottom: var(--space-2);
}

.mindfulness-header__title {
   font-size: var(--font-size-3xl);
   font-weight: var(--font-weight-bold);
   color: var(--color-text-primary);
   margin-bottom: var(--space-3);
   line-height: var(--line-height-tight);
}

.mindfulness-header__description {
   font-size: var(--font-size-md);
   color: var(--color-text-secondary);
   line-height: var(--line-height-loose);
   max-width: 700px;
}

.mindfulness-content {
   display: flex;
   flex-direction: column;
   gap: var(--space-6);
}

.mindfulness-section {
   background-color: var(--color-card);
   border-radius: var(--radius-lg);
   border: 1px solid var(--color-border);
   overflow: hidden;
}

/* =====================
   MINDFULNESS CATEGORIES
   ===================== */

.mindfulness-category {
   margin-bottom: var(--space-7);
}

.mindfulness-category__header {
   display: flex;
   align-items: flex-end;
   justify-content: space-between;
   gap: var(--space-4);
   margin-bottom: var(--space-4);
}

.mindfulness-category__header-text {
   flex: 1;
}

.mindfulness-category__title {
   font-size: var(--font-size-2xl);
   font-weight: var(--font-weight-semibold);
   color: var(--color-text-primary);
   margin-bottom: var(--space-2);
}

.mindfulness-category__description {
   font-size: var(--font-size-base);
   color: var(--color-text-secondary);
   line-height: var(--line-height-normal);
   max-width: 600px;
}

/* =====================
   LOGIN PAGE
   ===================== */

.login-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-4) var(--space-3);
    background-color: var(--portal-base);
    background-image:
        radial-gradient(ellipse 80% 60% at 20% 10%, var(--portal-30) 0%, transparent 60%),
        radial-gradient(ellipse 60% 80% at 80% 90%, var(--portal-60) 0%, transparent 55%),
        radial-gradient(ellipse 50% 50% at 60% 30%, var(--portal-20) 0%, transparent 50%);
    position: relative;
}



.login-card {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 420px;
    background: rgba(255,255,255,0.82);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1.5px solid rgba(255,255,255,0.7);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    padding: var(--space-6) var(--space-6) var(--space-5);
    animation: cardIn 0.5s cubic-bezier(0.22,1,0.36,1) both;
}

@keyframes cardIn {
    from { opacity: 0; transform: translateY(24px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.login-card__logos {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-4);
}

.login-card__logo-mht img {
    height: 68px;
    width: auto;
    display: block;
}

.login-card__logo-divider {
    width: 1px;
    height: 48px;
    background: rgba(26,18,0,0.15);
}

.login-card__logo-uv img {
    height: 54px;
    width: auto;
    display: block;
}

.login-card__logo-text {
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-bold);
    color: var(--grey-100);
}

.login-card__heading {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    color: var(--grey-100);
    line-height: var(--line-height-tight);
    margin-bottom: var(--space-1);
    letter-spacing: var(--tracking-tight);
}

.login-card__subheading {
    font-size: var(--font-size-sm);
    color: var(--grey-60);
    margin-bottom: var(--space-4);
    line-height: var(--line-height-normal);
}

.login-card__error {
    background-color: #FEE2E2;
    border: 1px solid #FCA5A5;
    color: #DC2626;
    padding: var(--space-3);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    margin-bottom: var(--space-4);
}

.login-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.login-form__field {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.login-form__label {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--grey-60);
    letter-spacing: 0.01em;
}

.login-form__input {
    width: 100%;
    padding: var(--space-3) var(--space-3);
    font-family: var(--font-primary);
    font-size: var(--font-size-base);
    color: var(--grey-100);
    background: rgba(255,255,255,0.9);
    border: 1.5px solid rgba(26,18,0,0.15);
    border-radius: var(--radius-md);
    outline: none;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.login-form__input:focus {
    border-color: var(--portal-60);
    box-shadow: 0 0 0 3px rgba(245,200,0,0.25);
    background: var(--color-card);
}

.login-form__remember {
    margin-top: 0;
}

.login-form__checkbox-label {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--font-size-sm);
    color: var(--grey-60);
    cursor: pointer;
    user-select: none;
}

.login-form__checkbox-label input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--portal-60);
    cursor: pointer;
}

.login-form__submit {
    width: 100%;
    padding: var(--space-3);
    font-family: var(--font-primary);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-bold);
    color: var(--grey-100);
    background: var(--portal-base);
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
    box-shadow: 0 2px 0 var(--portal-60), var(--shadow-sm);
    letter-spacing: 0.01em;
    justify-content: center;
}

.login-form__submit:hover {
    background: var(--portal-40);
    transform: translateY(-1px);
    box-shadow: 0 4px 0 var(--portal-60), var(--shadow-sm);
}

.login-form__submit:active {
    transform: translateY(1px);
    box-shadow: 0 1px 0 var(--portal-60);
}

.login-card__footer {
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    border-top: 1px solid rgba(26,18,0,0.08);
    text-align: center;
    font-size: var(--font-size-xs);
    color: var(--grey-50);
    line-height: var(--line-height-normal);
}

.login-card__footer a {
    color: var(--grey-70);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.login-card__footer a:hover {
    color: var(--grey-100);
}

@media (max-width: 480px) {
    .login-card {
        padding: var(--space-5) var(--space-4) var(--space-4);
    }
    .login-card__heading {
        font-size: var(--font-size-xl);
    }
}

/* =====================
   REGISTER PAGE
   ===================== */

.mht-register-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-6) var(--space-3);
    background-color: var(--portal-base);
    background-image:
        radial-gradient(ellipse 80% 60% at 20% 10%, var(--portal-30) 0%, transparent 60%),
        radial-gradient(ellipse 60% 80% at 80% 90%, var(--portal-60) 0%, transparent 55%),
        radial-gradient(ellipse 50% 50% at 60% 30%, var(--portal-20) 0%, transparent 50%);
    position: relative;
}

.mht-register-wrap {
    width: 100%;
    max-width: 520px;
    animation: cardIn 0.5s cubic-bezier(0.22,1,0.36,1) both;
}

.mht-register-card {
    background: rgba(255,255,255,0.82);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1.5px solid rgba(255,255,255,0.7);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    padding: var(--space-6);
}

.mht-register-card__logos {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-4);
}

.mht-register-card__logo-mht img {
    height: 68px;
    width: auto;
    display: block;
}

.mht-register-card__logo-divider {
    width: 1px;
    height: 48px;
    background: rgba(26,18,0,0.15);
}

.mht-register-card__logo-uv img {
    height: 54px;
    width: auto;
    display: block;
}

.mht-register-card h1 {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    color: var(--grey-100);
    line-height: var(--line-height-tight);
    letter-spacing: var(--tracking-tight);
    margin: 0 0 var(--space-1);
}

.mht-register-intro {
    font-size: var(--font-size-sm);
    color: var(--grey-60);
    margin-bottom: var(--space-4);
    line-height: var(--line-height-normal);
}

.mht-register-notice {
    padding: var(--space-3);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-4);
    font-size: var(--font-size-sm);
}

.mht-register-notice--error {
    background: #FEE2E2;
    border: 1px solid #FCA5A5;
    color: #DC2626;
}

.mht-register-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.mht-field {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.mht-field label {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--grey-60);
    letter-spacing: 0.01em;
}

.mht-field input[type="text"],
.mht-field input[type="email"],
.mht-field input[type="password"] {
    width: 100%;
    padding: var(--space-3);
    font-family: var(--font-primary);
    font-size: var(--font-size-base);
    color: var(--grey-100);
    background: rgba(255,255,255,0.9);
    border: 1.5px solid rgba(26,18,0,0.15);
    border-radius: var(--radius-md);
    outline: none;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
    box-sizing: border-box;
}

.mht-field input[type="text"]:focus,
.mht-field input[type="email"]:focus,
.mht-field input[type="password"]:focus {
    border-color: var(--portal-60);
    box-shadow: 0 0 0 3px rgba(245,200,0,0.25);
    background: var(--color-card);
}

.mht-field input[disabled] {
    background: rgba(255,255,255,0.5);
    color: var(--grey-40);
    cursor: not-allowed;
}

.mht-field-note {
    font-size: var(--font-size-xs);
    color: var(--grey-40);
    margin: 0;
}

.mht-field--checkbox .mht-field-label,
.mht-field--checkbox label {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-regular);
    color: var(--grey-60);
    cursor: pointer;
    line-height: var(--line-height-normal);
}

.mht-field--checkbox input[type="checkbox"] {
    margin-top: 3px;
    flex-shrink: 0;
    accent-color: var(--portal-60);
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.mht-field--checkbox a {
    color: var(--grey-80);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.mht-field--checkbox a:hover {
    color: var(--grey-100);
}

.mht-required {
    color: var(--color-error);
}

.mht-register-submit {
    width: 100%;
    padding: var(--space-3);
    font-family: var(--font-primary);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-bold);
    color: var(--grey-100);
    background: var(--portal-base);
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
    box-shadow: 0 2px 0 var(--portal-60), var(--shadow-sm);
    letter-spacing: 0.01em;
    margin-top: var(--space-1);
}

.mht-register-submit:hover {
    background: var(--portal-40);
    transform: translateY(-1px);
    box-shadow: 0 4px 0 var(--portal-60), var(--shadow-sm);
}

.mht-register-submit:active {
    transform: translateY(1px);
    box-shadow: 0 1px 0 var(--portal-60);
}

.mht-register-card__footer {
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    border-top: 1px solid rgba(26,18,0,0.08);
    text-align: center;
    font-size: var(--font-size-xs);
    color: var(--grey-50);
    line-height: var(--line-height-normal);
}

.mht-register-card__footer a {
    color: var(--grey-70);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.mht-register-card__footer a:hover {
    color: var(--grey-100);
}

.mht-register-error-state h1 {
    margin-bottom: var(--space-3);
}

.mht-register-error-state p {
    font-size: var(--font-size-sm);
    color: var(--grey-60);
    margin-bottom: var(--space-2);
}

@media (max-width: 480px) {
    .mht-register-card {
        padding: var(--space-5) var(--space-4);
    }
    .mht-register-card h1 {
        font-size: var(--font-size-xl);
    }
}

/* =====================
   VIDEO PLAYER
   ===================== */

.video-player {
    max-width: 600px;
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.video-player__header {
    padding: 0 0 var(--space-3) 0;
    border-bottom: none;
}

.video-player__label {
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin-bottom: var(--space-1);
}

.video-player__description {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    line-height: var(--line-height-normal);
}
.video-player__loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 300px;
    gap: var(--space-4);
}

/* Keep the loading state the same height as the video */
.video-player__loading,
.video-player__error {
    aspect-ratio: 16 / 9;
    min-height: unset; /* remove the old 300px fixed height */
}

.video-player__spinner {
    width: 48px;
    height: 48px;
    border: 4px solid rgba(255, 255, 255, 0.2);
    border-top-color: var(--color-btn-primary, #2563eb);
    border-radius: 50%;
    animation: video-spin 0.8s linear infinite;
}

@keyframes video-spin {
    to { transform: rotate(360deg); }
}

.video-player__loading-text {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary, #6b7280);
}

.video-player__error {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 300px;
    gap: var(--space-3);
    padding: var(--space-6);
    text-align: center;
}

.video-player__error-icon {
    font-size: 48px;
}

.video-player__error-title {
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-semibold);
    color: #ffffff;
}

.video-player__error-message {
    font-size: var(--font-size-sm);
    color: rgba(255, 255, 255, 0.7);
    max-width: 400px;
}

.video-player__embed {
}

.video-player__ratio {
       display: block; /* ensure it's always in the DOM flow */

    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    border-radius: var(--radius-lg);
}

.video-player__iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: var(--radius-lg);
}
.video-player__title-row {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-1);
}

.video-player__icon-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--color-btn-primary) 10%, transparent);
    flex-shrink: 0;
}

.video-player__icon {
    color: var(--color-btn-primary);
    display: block;
}

.video-player__label {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin: 0;
    line-height: 1;
}

/* =====================
   GENIALLY PLAYER
   ===================== */

.genially-player {
       max-width: 600px;

   border-radius: var(--radius-lg);
   overflow: hidden;
   margin-bottom: var(--space-4);
   margin-top: var(--space-3);
}

.genially-player__header {
   padding: var(--space-4);
   border-bottom: 1px solid var(--color-border);
}

.genially-player__label {
   font-size: var(--font-size-md);
   font-weight: var(--font-weight-semibold);
   color: var(--color-text-primary);
   margin-bottom: var(--space-1);
}

.genially-player__description {
   font-size: var(--font-size-sm);
   color: var(--color-text-secondary);
   line-height: var(--line-height-normal);
}

.genially-player__loading {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   min-height: 300px;
   gap: var(--space-4);
   background-color: #1a1a1a;
}

.genially-player__spinner {
   width: 48px;
   height: 48px;
   border: 4px solid rgba(255, 255, 255, 0.2);
   border-top-color: #ffffff;
   border-radius: 50%;
   animation: genially-spin 0.8s linear infinite;
}

@keyframes genially-spin {
   to { transform: rotate(360deg); }
}

.genially-player__loading-text {
   font-size: var(--font-size-sm);
   color: rgba(255, 255, 255, 0.7);
}

.genially-player__error {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   min-height: 300px;
   gap: var(--space-3);
   padding: var(--space-6);
   text-align: center;
   background-color: #1a1a1a;
}

.genially-player__error-icon {
   font-size: 48px;
}

.genially-player__error-title {
   font-size: var(--font-size-md);
   font-weight: var(--font-weight-semibold);
   color: #ffffff;
}

.genially-player__error-message {
   font-size: var(--font-size-sm);
   color: rgba(255, 255, 255, 0.7);
   max-width: 400px;
}

.genially-player__embed {
   background-color: #1a1a1a;
}

.genially-player__ratio {
   position: relative;
   height: 0;
   overflow: hidden;
}

.genially-player__iframe {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   border: 0;
}

/* =====================
   RICH TEXT CONTENT
   ===================== */

.lesson-section__description,
.lesson-intro__description,
.module-header__description {
   font-size: var(--font-size-md);
   color: var(--color-text-secondary);
   line-height: var(--line-height-loose);
   margin-bottom: var(--space-4);
}

.lesson-section__description h1,
.lesson-intro__description h1,
.module-header__description h1 { font-size: var(--font-size-2xl); font-weight: var(--font-weight-bold);     margin-bottom: var(--space-3); }

.lesson-section__description h2,
.lesson-intro__description h2,
.module-header__description h2 { font-size: var(--font-size-xl);  font-weight: var(--font-weight-semibold); margin-bottom: var(--space-3); }

.lesson-section__description h3,
.lesson-intro__description h3,
.module-header__description h3 { font-size: var(--font-size-lg);  font-weight: var(--font-weight-semibold); margin-bottom: var(--space-2); }

.lesson-section__description p,
.lesson-intro__description p,
.module-header__description p {
   margin-bottom: var(--space-3);
}

.lesson-section__description p:last-child,
.lesson-intro__description p:last-child,
.module-header__description p:last-child {
   margin-bottom: 0;
}

.lesson-section__description ul,
.lesson-section__description ol,
.lesson-intro__description ul,
.lesson-intro__description ol,
.module-header__description ul,
.module-header__description ol {
   padding-left: var(--space-5);
   margin-bottom: var(--space-3);
}

.lesson-section__description ul { list-style-type: disc; }
.lesson-intro__description ul   { list-style-type: disc; }
.module-header__description ul  { list-style-type: disc; }

.lesson-section__description ol { list-style-type: decimal; }
.lesson-intro__description ol   { list-style-type: decimal; }
.module-header__description ol  { list-style-type: decimal; }

.lesson-section__description li,
.lesson-intro__description li,
.module-header__description li {
   margin-bottom: var(--space-1);
   line-height: var(--line-height-normal);
}

.lesson-section__description ul ul,
.lesson-section__description ol ol,
.lesson-section__description ul ol,
.lesson-section__description ol ul,
.lesson-intro__description ul ul,
.lesson-intro__description ol ol,
.module-header__description ul ul,
.module-header__description ol ol {
   padding-left: var(--space-4);
   margin-top: var(--space-1);
   margin-bottom: 0;
}

.lesson-section__description strong,
.lesson-intro__description strong,
.module-header__description strong {
   font-weight: var(--font-weight-semibold);
   color: var(--color-text-primary);
}

.lesson-section__description em,
.lesson-intro__description em,
.module-header__description em {
   font-style: italic;
}

.lesson-section__description a,
.lesson-intro__description a,
.module-header__description a {
   color: var(--color-btn-primary);
   text-decoration: underline;
}

.lesson-section__description a:hover,
.lesson-intro__description a:hover,
.module-header__description a:hover {
   color: var(--color-btn-primary-hover);
}

.module-header__description,
.module-header__description p,
.module-header__description li,
.module-header__description strong {
   color: rgba(255, 255, 255, 0.85);
}

.module-header__description a {
   color: #ffffff;
}

.lesson-intro {
   margin-bottom: var(--space-5);
   padding: var(--space-4) var(--space-5);
   background-color: var(--color-card);
   border-radius: var(--radius-lg);
   border: 1px solid var(--color-border);
}

.lesson-intro__description {
   margin-bottom: 0;
   color: var(--color-text-secondary);
}

/* =====================
   MINDFULNESS HUB CAROUSEL
   ===================== */

.carousel {
   overflow: hidden;
}

.carousel__track {
   display: flex;
   gap: var(--space-4);
   overflow-x: auto;
   scroll-snap-type: x mandatory;
   -webkit-overflow-scrolling: touch;
   scrollbar-width: none;
   padding-bottom: var(--space-2);
}

.carousel__track::-webkit-scrollbar {
   display: none;
}

.carousel__track .card {
   flex-shrink: 0;
   scroll-snap-align: start;
   width: 220px;
}
.carousel__track .card--mindfulness {
   width: 280px;
   height: 360px;
}

.carousel__controls {
   display: flex;
   align-items: center;
   gap: var(--space-2);
   flex-shrink: 0;
}


/* =====================
   MINDFULNESS HUB NAV
   ===================== */

.mindfulness-category {
   scroll-margin-top: calc(var(--header-height) + 80px);
}

.mindfulness-hub-nav {
   margin-bottom: 0;
}

/* =====================
   WEBINAR HUB & CARD
   ===================== */

.webinar-category {
   scroll-margin-top: calc(var(--header-height) + 80px);
   padding: var(--space-5) 0;
}

.webinar-hub-nav {
   margin-bottom: 0;
}

.webinar-category__header {
   display: flex;
   align-items: flex-end;
   justify-content: space-between;
   gap: var(--space-4);
   margin-bottom: var(--space-4);
}

.webinar-category__header-text {
   flex: 1;
}

.webinar-category__title {
   font-size: var(--font-size-xl);
   font-weight: var(--font-weight-bold);
   color: var(--color-text-primary);
   margin-bottom: var(--space-1);
}

.webinar-category__description {
   color: var(--color-text-secondary);
   font-size: var(--font-size-sm);
}
.card--webinar {
    width: 280px !important;
    min-width: 280px;
    max-width: 280px;
    height: 304px;
    flex-shrink: 0;
    display: block;
    overflow: hidden;
    padding: 0;
    border: none;
    box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
    background: #fff;
    border-radius: 12px;
}

.card--webinar:hover {
    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.12);
    transform: translateY(-2px);
}

.card--webinar .card__label {
   background-color: var(--color-btn-primary);
}

.card--webinar .card__footer {
   background-color: var(--color-surface);
}


.webinar-category .carousel__track .card--webinar,
.carousel__track .card--webinar {
    width: 280px !important;
    min-width: 280px;
    height: 304px;
    flex-shrink: 0;
}

/* Help hub — wider cards to suit horizontal layout */
.carousel__track--help .card {
    width: 454px;
    height: 304px;
       flex-shrink: 0;

   }

.hub-header--help {
   background-color: var(--uv-brand-30, #B78EA6);
}

.webinar-header {
   padding: var(--space-6) 0 var(--space-5);
   border-bottom: 1px solid var(--color-border);
   margin-bottom: var(--space-6);
}

.webinar-header__back {
   display: inline-block;
   font-size: var(--font-size-sm);
   color: var(--color-text-secondary);
   margin-bottom: var(--space-3);
}

.webinar-header__back:hover {
   color: var(--color-btn-primary);
}

.webinar-header__label {
   font-size: var(--font-size-sm);
   font-weight: var(--font-weight-medium);
   color: var(--color-btn-primary);
   text-transform: uppercase;
   letter-spacing: var(--tracking-wide);
   margin-bottom: var(--space-2);
}

.webinar-header__title {
   font-size: var(--font-size-2xl);
   font-weight: var(--font-weight-bold);
   color: var(--color-text-primary);
   margin-bottom: var(--space-2);
}

.webinar-header__description {
   color: var(--color-text-secondary);
   font-size: var(--font-size-md);
}

.webinar-content {
   display: flex;
   flex-direction: column;
   gap: var(--space-6);
   padding-bottom: var(--space-8);
}

.webinar-content__description {
   max-width: 720px;
}
/* =====================
   WEBINAR CONTENT PAGE
   ===================== */

.webinar-content {
    max-width: var(--max-width);
    width: 100%;
    margin-inline: auto;
    padding-inline: var(--content-padding);
}
/* =====================
   PORTAL HOME SETTINGS PAGE
   ===================== */

.mht-settings-section {
   background: #fff;
   border: 1px solid #e5e5e5;
   border-radius: 4px;
   padding: 20px 24px;
   margin-bottom: 24px;
}

.mht-settings-section h2 {
   margin-top: 0;
   padding-bottom: 12px;
   border-bottom: 1px solid #e5e5e5;
   margin-bottom: 16px;
   font-size: 16px;
}

.mht-section-order-list {
   list-style: none;
   margin: 12px 0;
   padding: 0;
   display: flex;
   flex-direction: column;
   gap: 8px;
   max-width: 480px;
   position: relative;
}

.mht-section-order-row {
   display: flex;
   align-items: center;
   gap: 10px;
   padding: 10px 12px;
   background: #f9f9f9;
   border: 1px solid #ddd;
   border-radius: 3px;
   transition: background 0.15s;
}

.mht-section-order-row.mht-sortable--dragging {
   opacity: 0.4;
}

.mht-section-order-row.mht-sortable--placeholder {
   background: #eaf4fb;
   border: 2px dashed #2271b1;
}

.mht-section-order-label {
   display: flex;
   align-items: center;
   gap: 8px;
   cursor: pointer;
   font-weight: 500;
   font-size: 14px;
   flex: 1;
}

.mht-section-order-label input[type="checkbox"] {
   margin: 0;
}

.mht-pinned-list {
   list-style: none;
   margin: 0 0 12px 0;
   padding: 0;
   display: flex;
   flex-direction: column;
   gap: 8px;
   max-width: 600px;
   position: relative;
}

.mht-pinned-row {
   display: flex;
   align-items: center;
   gap: 8px;
   padding: 8px 10px;
   background: #f9f9f9;
   border: 1px solid #ddd;
   border-radius: 3px;
}

.mht-pinned-row.mht-sortable--dragging {
   opacity: 0.4;
}

.mht-drag-handle {
   font-size: 18px;
   color: #aaa;
   cursor: grab;
   padding: 0 4px;
   user-select: none;
   flex-shrink: 0;
   line-height: 1;
}

.mht-drag-handle:hover {
   color: #555;
}

.mht-pinned-select {
   flex: 1;
   max-width: 400px;
}
.portal-home__section-title-row {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.portal-home__section-icon-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    flex-shrink: 0;
}

.portal-home__section-icon-wrap--recent {
    background: color-mix(in srgb, var(--color-btn-primary) 10%, transparent);
    color: var(--color-btn-primary);
}

.portal-home__section-icon-wrap--subjects {
    background: color-mix(in srgb, var(--color-card-subject) 10%, transparent);
    color: var(--color-card-subject);
}

.portal-home__section-icon-wrap--mindfulness {
    background: color-mix(in srgb, var(--color-card-mindfulness) 10%, transparent);
    color: var(--color-card-mindfulness);
}

.portal-home__section-icon-wrap--webinars {
    background: color-mix(in srgb, var(--color-card-webinar) 10%, transparent);
    color: var(--color-card-webinar);
}

.portal-home__section-icon-wrap--parent-carer {
    background: color-mix(in srgb, var(--color-card-parent-carer) 10%, transparent);
    color: var(--color-card-parent-carer);
}

.portal-home__section-icon-wrap--help {
    background: color-mix(in srgb, var(--color-card-help) 10%, transparent);
    color: var(--color-card-help);
}

/* =====================
   PORTAL HOME CAROUSEL WRAPPER
   ===================== */

.portal-home__carousel-wrapper {
    position: relative;
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
}

.portal-home__section--recent .portal-home__carousel-wrapper {
    padding-left: var(--space-2);
    padding-right: var(--space-2);
    margin-left: calc(-1 * var(--space-2));
    margin-right: calc(-1 * var(--space-2));
}

.portal-home__carousel-controls {
   position: absolute;
   top: 50%;
   left: 0;
   right: 0;
   transform: translateY(-50%);
   display: flex;
   justify-content: space-between;
   pointer-events: none;
   z-index: 10;
}

.carousel__btn {
   pointer-events: all;
   width: 40px;
   height: 40px;
   border-radius: var(--radius-full);
   border: 1px solid var(--color-border);
   background-color: var(--color-card);
   color: var(--color-text-primary);
   font-size: var(--font-size-md);
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
   transition: all var(--transition-fast);
   box-shadow: var(--shadow-md);
   transform: translateX(-100%);
}

.carousel__btn--next {
   transform: translateX(100%);
}

.carousel__btn:hover:not(:disabled) {
   background-color: var(--uv-brand-base);
   border-color: var(--uv-brand-base);
   color: var(--color-text-inverse);
}

.carousel__btn:disabled {
   opacity: 0.35;
   cursor: default;
}

/* =====================
   PARENT & CARER HUB & CARD
   ===================== */

.pc-category {
   scroll-margin-top: calc(var(--header-height) + 80px);
   padding: var(--space-5) 0;
}

.parent-carer-hub-nav {
   margin-bottom: 0;
}

.pc-category__header {
   display: flex;
   align-items: flex-end;
   justify-content: space-between;
   gap: var(--space-4);
   margin-bottom: var(--space-4);
}

.pc-category__header-text {
   flex: 1;
}

.pc-category__title {
   font-size: var(--font-size-xl);
   font-weight: var(--font-weight-bold);
   color: var(--color-text-primary);
   margin-bottom: var(--space-1);
}

.pc-category__description {
   color: var(--color-text-secondary);
   font-size: var(--font-size-sm);
}


.card--parent-carer {
    width: 280px !important;
    min-width: 280px;
    max-width: 280px;
    height: 304px;
    flex-shrink: 0;
    display: block;
    overflow: hidden;
    padding: 0;
    border: none;
    box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
    background: #fff;
    border-radius: 12px;
}

.card--parent-carer:hover {
    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.12);
    transform: translateY(-2px);
}

.pc-category .carousel__track .card--parent-carer,
.carousel__track .card--parent-carer {
    width: 280px !important;
    min-width: 280px;
    height: 304px;
    flex-shrink: 0;
}

.pc-page-header {
   padding: var(--space-6) 0 var(--space-5);
   border-bottom: 1px solid var(--color-border);
   margin-bottom: var(--space-6);
}

.pc-page-header__back {
   display: inline-block;
   font-size: var(--font-size-sm);
   color: var(--color-text-secondary);
   margin-bottom: var(--space-3);
}

.pc-page-header__back:hover {
   color: var(--uv-brand-base);
}

.pc-page-header__label {
   font-size: var(--font-size-sm);
   font-weight: var(--font-weight-medium);
   color: var(--uv-brand-60);
   text-transform: uppercase;
   letter-spacing: var(--tracking-wide);
   margin-bottom: var(--space-2);
}

.pc-page-header__title {
   font-size: var(--font-size-2xl);
   font-weight: var(--font-weight-bold);
   color: var(--color-text-primary);
   margin-bottom: var(--space-2);
}

.pc-page-header__description {
   color: var(--color-text-secondary);
   font-size: var(--font-size-md);
}

.pc-page-content {
   display: flex;
   flex-direction: column;
   gap: var(--space-6);
   padding-bottom: var(--space-8);
}

.pc-page-content__overview {
   max-width: 720px;
}

.pc-page-content__sections {
   display: flex;
   flex-direction: column;
   gap: var(--space-7);
}

.mht-pc-section-list {
   list-style: none;
   margin: 0 0 16px 0;
   padding: 0;
   display: flex;
   flex-direction: column;
   gap: 12px;
   position: relative;
}

.mht-pc-section-row {
   border: 1px solid #ddd;
   border-radius: 4px;
   background: #fafafa;
   padding: 12px 14px;
}

.mht-pc-section-row--pdf {
   border-left: 3px solid #2271b1;
}

.mht-pc-section-row--video {
   border-left: 3px solid #d63638;
}

.mht-pc-section-header {
   display: flex;
   align-items: center;
   gap: 10px;
   margin-bottom: 8px;
}

.mht-pc-section-type {
   font-size: 13px;
}

.mht-pc-section-visible {
   display: flex;
   align-items: center;
   gap: 5px;
   font-size: 13px;
   color: #555;
   cursor: pointer;
}

.mht-pc-section-fields {
   margin: 0 !important;
}

.mht-pc-section-fields th {
   padding: 6px 10px 6px 0;
   width: 120px;
   font-size: 13px;
}

.mht-pc-section-fields td {
   padding: 6px 0;
}

.pc-page-header__overview ol,
.pc-page-header__overview ul {
   padding-left: var(--space-5);
   margin-left: 0;
}

.mht-pc-cat-columns {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 20px;
   margin-top: 8px;
}

.mht-pc-cat-available,
.mht-pc-cat-assigned {
   list-style: none;
   margin: 0;
   padding: 0;
   display: flex;
   flex-direction: column;
   gap: 6px;
   min-height: 40px;
   position: relative;
}

.mht-pc-cat-available-item {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 8px 10px;
   background: #f9f9f9;
   border: 1px solid #e5e5e5;
   border-radius: 3px;
   font-size: 13px;
}

.mht-pc-cat-add {
   background: none;
   border: none;
   color: #2271b1;
   font-size: 18px;
   cursor: pointer;
   line-height: 1;
   padding: 0 4px;
}

.mht-pc-cat-add:hover {
   color: #135e96;
}

.mht-pc-cat-assigned-title {
   flex: 1;
   font-size: 13px;
}

.mht-pc-cat-remove {
   margin-left: auto;
   flex-shrink: 0;
}

.mht-pc-cat-assigned .mht-pinned-row {
   display: flex;
   align-items: center;
   gap: 8px;
}

.mht-pc-cat-assigned .mht-pc-cat-remove {
   margin-left: auto;
   flex-shrink: 0;
}

/* =====================
   USER PROFILE PAGE
   ===================== */

.profile-page {
   max-width: 720px;
   margin: 0 auto;
   padding: var(--space-6) 0 var(--space-8);
   display: flex;
   flex-direction: column;
   gap: var(--space-7);
}

.profile-page__header {
   display: flex;
   align-items: center;
   gap: var(--space-5);
   padding-bottom: var(--space-6);
   border-bottom: 1px solid var(--color-border);
}

.profile-page__avatar {
   width: 72px;
   height: 72px;
   border-radius: 50%;
   background-color: var(--color-btn-primary);
   color: var(--color-text-inverse);
   font-size: var(--font-size-2xl);
   font-weight: var(--font-weight-bold);
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
}

.profile-page__name {
   font-size: var(--font-size-xl);
   font-weight: var(--font-weight-bold);
   color: var(--color-text-primary);
   margin-bottom: var(--space-1);
}

.profile-page__email,
.profile-page__school {
   font-size: var(--font-size-sm);
   color: var(--color-text-secondary);
   margin-bottom: var(--space-1);
}

.profile-page__section {
   display: flex;
   flex-direction: column;
   gap: var(--space-4);
}

.profile-page__section-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: var(--space-4);
}

.profile-page__section-title {
   font-size: var(--font-size-lg);
   font-weight: var(--font-weight-bold);
   color: var(--color-text-primary);
}

.profile-page__empty {
   color: var(--color-text-secondary);
   font-size: var(--font-size-sm);
}

.profile-module-list {
   display: flex;
   flex-direction: column;
   gap: var(--space-3);
}

.profile-course-row {
   display: flex;
   align-items: center;
   gap: var(--space-4);
   padding: var(--space-4);
   background: var(--color-card);
   border: 1px solid var(--color-border);
   border-radius: var(--radius-md);
}

.profile-course-row__info {
   display: flex;
   align-items: center;
   gap: var(--space-3);
   flex: 1;
   min-width: 0;
}

.profile-course-row__thumb {
   width: 56px;
   height: 40px;
   object-fit: cover;
   border-radius: var(--radius-sm);
   flex-shrink: 0;
}

.profile-course-row__text {
   flex: 1;
   min-width: 0;
}

.profile-course-row__title {
   font-size: var(--font-size-sm);
   font-weight: var(--font-weight-medium);
   color: var(--color-text-primary);
   margin-bottom: var(--space-2);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
}

.profile-course-row__bar-wrap {
   display: flex;
   align-items: center;
   gap: var(--space-2);
   margin-bottom: var(--space-1);
}

.profile-course-row__bar {
   flex: 1;
   height: 6px;
   background: var(--color-progress-track);
   border-radius: 3px;
   overflow: hidden;
}

.profile-course-row__fill {
   height: 100%;
   background: var(--color-progress-fill);
   border-radius: 3px;
   transition: width 0.4s ease;
}

.profile-course-row__pct {
   font-size: var(--font-size-xs);
   color: var(--color-text-secondary);
   flex-shrink: 0;
   width: 32px;
   text-align: right;
}

.profile-course-row__state {
   font-size: var(--font-size-xs);
   color: var(--color-text-secondary);
}

.profile-course-row__state--completed {
   color: var(--color-success);
}

.profile-course-row__state--in_progress {
   color: var(--color-btn-primary);
}

.profile-modal {
   display: none;
   position: fixed;
   inset: 0;
   background: rgba(0, 0, 0, 0.5);
   z-index: var(--z-modal);
   align-items: center;
   justify-content: center;
}

.profile-modal--open {
   display: flex;
}

.profile-modal__box {
   background: var(--color-card);
   border-radius: var(--radius-md);
   padding: var(--space-6);
   max-width: 400px;
   width: 90%;
   display: flex;
   flex-direction: column;
   gap: var(--space-5);
   box-shadow: var(--shadow-lg);
}

.profile-modal__message {
   font-size: var(--font-size-md);
   color: var(--color-text-primary);
   line-height: 1.5;
}

.profile-modal__actions {
   display: flex;
   gap: var(--space-3);
   justify-content: flex-end;
}

.site-header__user-name {
   color: var(--color-text-secondary);
   font-size: var(--font-size-sm);
   font-weight: var(--font-weight-medium);
   text-decoration: none;
   transition: color 0.15s;
}

.site-header__user-name:hover {
   color: var(--color-btn-primary);
}

.site-header__user-avatar {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 30px;
   height: 30px;
   border-radius: 50%;
   background-color: var(--color-btn-primary);
   color: var(--color-text-inverse);
   flex-shrink: 0;
}

.profile-info-row {
   display: flex;
   align-items: center;
   gap: var(--space-4);
   padding: var(--space-4);
   background: var(--color-card);
   border: 1px solid var(--color-border);
   border-radius: var(--radius-md);
}

.profile-info-row__label {
   font-size: var(--font-size-sm);
   font-weight: var(--font-weight-medium);
   color: var(--color-text-secondary);
   width: 80px;
   flex-shrink: 0;
}

.profile-info-row__value {
   font-size: var(--font-size-sm);
   color: var(--color-text-primary);
}

a.profile-course-row__title--link {
   color: var(--color-text-primary);
   text-decoration: none;
}

a.profile-course-row__title--link:hover {
   color: var(--color-btn-primary);
   text-decoration: underline;
}

#school-admin-user-pending .profile-lesson-row__title,
#school-admin-pc-pending .profile-lesson-row__title,
#school-admin-users-tbody .profile-lesson-row__title,
#school-admin-users-tbody .profile-lesson-row__state {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

/* =====================
   PROFILE PAGE — LESSON ROWS
   ===================== */

.profile-course-block {
   border-radius: var(--radius-md);
}

.profile-course-row {
   display: flex;
   align-items: center;
   gap: var(--space-4);
   padding: var(--space-4);
   background: var(--color-card);
   cursor: pointer;
   user-select: none;
   border: none;
   border-radius: 0;
}

.profile-course-row:hover {
   background: var(--color-surface-subtle);
}

.profile-course-row__actions {
   display: flex;
   align-items: center;
   gap: var(--space-3);
   flex-shrink: 0;
}

.profile-course-row__toggle-icon {
   font-size: var(--font-size-md);
   color: var(--color-text-secondary);
   transition: transform 0.2s;
   display: inline-block;
}

.profile-course-row[aria-expanded="true"] .profile-course-row__toggle-icon {
   transform: rotate(180deg);
}

.profile-lesson-list {
   border-top: 1px solid var(--color-border);
   background: var(--color-surface-subtle);
   flex-direction: column;
   border-radius: 0 0 var(--radius-md) var(--radius-md);
}

.profile-lesson-list:not([hidden]) {
   display: flex;
}

.profile-lesson-row {
   display: flex;
   align-items: center;
   gap: var(--space-3);
   padding: var(--space-3) var(--space-4);
   border-bottom: 1px solid var(--color-border);
}

.profile-lesson-row:last-child {
   border-bottom: none;
}

.profile-lesson-row__indicator {
   font-size: var(--font-size-sm);
   width: 20px;
   text-align: center;
   flex-shrink: 0;
}

.profile-lesson-row__indicator--completed   { color: var(--color-success); }
.profile-lesson-row__indicator--in_progress { color: var(--color-btn-primary); }
.profile-lesson-row__indicator--not_started { color: var(--color-text-muted); }

.profile-lesson-row__title {
   flex: 1;
   font-size: var(--font-size-sm);
   color: var(--color-text-primary);
   text-decoration: none;
}

.profile-lesson-row__title:hover {
   color: var(--color-btn-primary);
   text-decoration: underline;
}

.profile-lesson-row__state {
   font-size: var(--font-size-xs);
   color: var(--color-text-secondary);
   flex-shrink: 0;
   min-width: 80px;
   text-align: right;
}

.profile-lesson-list__header {
   padding: var(--space-3) var(--space-4);
   border-bottom: 1px solid var(--color-border);
   display: flex;
   align-items: center;
}

.lesson-header__actions {
   display: flex;
   align-items: center;
   gap: 12px;
}

.lesson-header__reset-lesson {
   background: none;
   border: none;
   padding: 0;
   font-size: 0.8rem;
   color: var(--color-text-muted);
   cursor: pointer;
   text-decoration: underline;
   text-underline-offset: 2px;
}

.lesson-header__reset-lesson:hover {
   color: var(--color-text-primary);
}
.profile-subject-block .profile-course-block {
    border-radius: 0;
    border-bottom: 1px solid var(--color-border);
}

.profile-subject-block .profile-course-block:first-child {
    border-radius: var(--radius-md) var(--radius-md) 0 0;
}

.profile-subject-block .profile-course-block:last-child {
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    border-bottom: none;
}
/* =====================
   SCHOOL ADMIN TABS
   ===================== */

.school-admin-tabs {
    display: flex;
    border-bottom: 2px solid var(--color-border);
    margin-bottom: 0;
    padding: var(--space-3) var(--space-4) 0;
    gap: 0;
}

.school-admin-tab {
    padding: var(--space-2) var(--space-4);
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-text-secondary);
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
}

.school-admin-tab:hover {
    color: var(--color-text-primary);
}

.school-admin-tab--active {
    color: var(--color-btn-primary);
    border-bottom-color: var(--color-btn-primary);
}
/* ==========================================================================
   COURSE HOME PAGE
   Styles for page-course-home.php — banner, sticky tabs, curriculum list.
   ========================================================================== */

/* -----------------------------------------------------------------------
   Page Hero
   The compact yellow title bar used on every inner page.
   Matches the portal-hero-nav visual from the home page.
   Rendered outside .portal-layout so it spans the full viewport width.
   Template part: template-parts/page-hero.php
   ----------------------------------------------------------------------- */

.page-hero {
    width: 100%;
    background-color: var(--color-nav-bg);   /* same yellow as site-nav / portal-hero-nav */
    padding-top: var(--header-height);        /* clear the fixed site-nav */
    padding-bottom: var(--space-4);
}

.page-hero__inner {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: var(--space-3) var(--content-padding) 0;
}

.page-hero__back {
    display: inline-block;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);
    margin-bottom: var(--space-2);
    opacity: 0.7;
    transition: opacity var(--transition-fast);
}

.page-hero__back:hover {
    opacity: 1;
    color: var(--color-text-primary);
}

.page-hero__label {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-primary);
    opacity: 0.65;
    margin-bottom: var(--space-1);
}

.page-hero__title {
    font-size: var(--font-size-4xl);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
    color: var(--color-text-primary);
    margin: 0;
}

/* =====================
   INVITE FORM
   ===================== */

.school-admin-invite-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-4);
    background: var(--color-surface-subtle);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    margin: var(--space-1) 0;
}

.school-admin-invite-form__message {
    font-size: var(--font-size-sm);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
}

.school-admin-invite-form__textarea {
    width: 100%;
    min-height: 80px;
    padding: var(--space-3);
    font-size: var(--font-size-sm);
    font-family: inherit;
    color: var(--color-text-primary);
    background: var(--color-card);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-md);
    resize: vertical;
    line-height: 1.5;
    box-sizing: border-box;
    transition: border-color 0.15s;
}

.school-admin-invite-form__textarea:focus {
    outline: none;
    border-color: var(--color-btn-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-btn-primary) 15%, transparent);
}

.school-admin-invite-form__textarea::placeholder {
    color: var(--color-text-tertiary, var(--color-text-secondary));
}

.school-admin-invite-form__actions {
    display: flex;
    gap: var(--space-2);
    align-items: center;
}

/* -----------------------------------------------------------------------
   Course Tabs Bar
   Full-width sticky bar matching .lesson-header / .lesson-tabs pattern.
   Positioned sticky after the banner scrolls away.
   ----------------------------------------------------------------------- */

.module-tabs-bar {
    position: sticky;
    top: var(--header-height);
    z-index: var(--z-sidebar);
    border-bottom: 2px solid var(--color-border);
    width: 100%;
}

/* Inner wrapper aligns tab list with the page content max-width */
.module-tabs__inner {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 var(--content-padding);
}

.module-tabs__list {
    display: flex;
    list-style: none;
    gap: 0;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    margin: 0;
    padding: 0;
}

.module-tabs__list::-webkit-scrollbar { display: none; }

.module-tabs__link {
    display: block;
    padding: var(--space-3) var(--space-4);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
    white-space: nowrap;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    transition: color var(--transition-fast), border-color var(--transition-fast);
    text-decoration: none;
}

.module-tabs__link:hover {
    color: var(--color-btn-primary);
}

.module-tabs__link--active {
    color: var(--color-btn-primary);
    border-bottom-color: var(--color-btn-primary);
}

/* -----------------------------------------------------------------------
   Course Content Area
   ----------------------------------------------------------------------- */

.module-content {
    padding: var(--space-6) var(--space-6);
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
}

/* -----------------------------------------------------------------------
   Generic section block
   ----------------------------------------------------------------------- */

.module-section {
    /* scroll-margin accounts for fixed nav (64px) + sticky tabs bar (~48px) + breathing room */
    scroll-margin-top: calc(var(--header-height) + 56px);
}

.module-section__heading {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin-bottom: var(--space-5);
}

/* -----------------------------------------------------------------------
   Course Overview: two-column layout
   ----------------------------------------------------------------------- */

.module-overview {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: var(--space-8);
    align-items: start;
}

.module-overview__body {
    font-size: var(--font-size-base);
    color: var(--color-text-primary);
    line-height: var(--line-height-relaxed);
}

.module-overview__body p + p { margin-top: var(--space-3); }

/* Sidebar */

.module-overview__sidebar {
    background-color: var(--color-card);
    padding: var(--space-5);
}

.module-overview__sidebar-heading {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-secondary);
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--space-4);
}

/* Progress row */

.module-overview__progress {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

.module-overview__progress-icon {
    flex-shrink: 0;
}

.module-overview__progress-detail {
    flex: 1;
    min-width: 0;
}

.module-overview__progress-pct {
    font-size: var(--font-size-base);
    color: var(--color-text-primary);
    margin-bottom: var(--space-2);
}

.module-overview__progress-bar {
    height: 4px;
    background-color: var(--color-progress-track);
    border-radius: 9999px;
    overflow: hidden;
}

.module-overview__progress-fill {
    height: 100%;
    background-color: var(--color-progress-fill);
    border-radius: 9999px;
    transition: width 0.4s ease;
}

/* Resume block */

.module-overview__resume {
    border-top: 1px solid var(--color-border);
    padding-top: var(--space-4);
    margin-top: var(--space-2);
}

.module-overview__resume-label {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-secondary);
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--space-3);
}

/* -----------------------------------------------------------------------
   Course Category block
   ----------------------------------------------------------------------- */

.module-category {
    /* allow tabs to scroll directly to each category heading */
    scroll-margin-top: calc(var(--header-height) + 56px);
    margin-bottom: var(--space-6);
}

.module-category:last-child {
    margin-bottom: 0;
}

.module-category__name {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);
    margin-bottom: var(--space-1);
    padding-left: var(--space-4);
}

/* -----------------------------------------------------------------------
   Course List  (lesson rows)
   ----------------------------------------------------------------------- */

/* A single lesson row */
.module-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: 0;
    list-style: none;
    margin: 0;
}

.module-list-item {
    position: relative;
    display: grid;
    grid-template-columns: 28px 1fr auto auto;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    background-color: var(--color-card);
        box-shadow: var(--shadow-md);

}

/* Divider no longer needed — each item is its own card */
.module-list-item__divider {
    display: none;
}

/* Checkbox / completion circle */
.module-list-item__check {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Title + description stacked */
.module-list-item__content {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    min-width: 0;
}

.module-list-item__title {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.module-list-item__desc {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Status text */
.module-list-item__status {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    white-space: nowrap;
    text-align: center;
    min-width: 90px;
}

.module-list-item__status--completed  { color: var(--color-btn-primary); }
.module-list-item__status--not-started { color: var(--color-text-muted); }

/* CTA button — override default btn sizing */
.module-list-item__btn {
    font-size: var(--font-size-sm);
    padding: var(--space-2) var(--space-3);
    white-space: nowrap;
}

/* Resume variant: no check column, simpler two-col grid */
.module-list-item--resume {
    grid-template-columns: 1fr auto;
    padding-left: 0;
    padding-right: 0;
}

.module-list-item--resume .module-list-item__check,
.module-list-item--resume .module-list-item__status {
    display: none;
}

/* -----------------------------------------------------------------------
   Responsive
   ----------------------------------------------------------------------- */

@media (max-width: 900px) {
    .module-overview {
        grid-template-columns: 1fr;
    }

    .module-banner__title {
        font-size: var(--font-size-2xl);
    }
}

@media (max-width: 600px) {
    .module-content {
        padding: var(--space-4);
    }

    /* On small screens collapse status text; keep checkbox + title + button */
    .module-list-item {
        grid-template-columns: 28px 1fr auto;
    }

    .module-list-item__status {
        display: none;
    }
}

/* =====================
   COURSE – PARENT & CARER SECTION
   ===================== */

.module-pc__description {
    color: var(--color-text-secondary);
    margin-bottom: var(--space-4);
}

.module-pc__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.module-pc__row {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-5);
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
}

.module-pc__icon {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    flex-shrink: 0;
    width: 44px;
    color: var(--portal-base);
}

.module-pc__icon span {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.05em;
    line-height: 1;
}

.module-pc__icon--doc { color: #2b579a; }
.module-pc__icon--ppt { color: #d04423; }
.module-pc__icon--pdf { color: var(--portal-base); }

.module-pc__text {
    flex: 1;
    min-width: 0;
}

.module-pc__title {
    font-size: var(--font-size-md);
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 0 0 2px;
}

.module-pc__subheading {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin: 0;
}

.module-pc__actions {
    display: flex;
    gap: var(--space-2);
    flex-shrink: 0;
}

@media (max-width: 600px) {
    .module-pc__row {
        flex-wrap: wrap;
    }

    .module-pc__actions {
        width: 100%;
        justify-content: flex-end;
    }
}

/* =====================
   PDF VIEWER PAGE
   ===================== */

.pdf-page {
    max-width: 800px;
    margin: 0 auto;
    padding: var(--space-6) var(--space-5);
}

.pdf-page__header {
    margin-bottom: var(--space-5);
}

.pdf-page__back {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    text-decoration: none;
    margin-bottom: var(--space-4);
}

.pdf-page__back:hover {
    color: var(--color-text-primary);
}

.pdf-page__title {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    margin: 0 0 var(--space-2);
}

.pdf-page__description {
    font-size: var(--font-size-base);
    color: var(--color-text-secondary);
    margin: 0;
}

.pdf-page__viewer {
    width: 100%;
}

/* =====================
   CARD - HELP (horizontal layout)
   ===================== */

.card--help {
    width: 280px !important;
    min-width: 280px;
    max-width: 280px;
    height: 304px;
    flex-shrink: 0;
    display: block;
    overflow: hidden;
    padding: 0;
    border: none;
    box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
    background: #fff;
    border-radius: 12px;
}

.card--help:hover {
    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.12);
    transform: translateY(-2px);
}

.carousel__track .card--help {
    width: 280px !important;
    min-width: 280px;
    height: 304px;
    flex-shrink: 0;
}

.card__help-inner {
    display: flex;
    gap: 0;
    height: 100%;
    min-height: 200px;
}

.card__help-image {
    width: 240px;
    flex-shrink: 0;
    border-radius: var(--radius-lg) 0 0 var(--radius-lg);
    background-color: var(--uv-brand-30);
    background-size: cover;
    background-position: center;
    align-self: stretch;
}

.card__help-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: var(--space-4) var(--space-5);
    min-width: 0;
}

.card__help-text {
    flex: 1;
}

.card__help-text .card__title {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin: 0 0 var(--space-2);
    line-height: 1.35;
}

.card__help-text .card__subheading {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin: 0;
    line-height: 1.5;
}

.card__help-footer {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--space-2);
    margin-top: var(--space-4);
}

.card__read-time {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    white-space: nowrap;
}

.card__help-footer .btn {
    background-color: var(--color-card-help);
    color: var(--color-text-inverse);
    flex-shrink: 0;
}

.card__help-footer .btn:hover {
    background-color: var(--uv-brand-60);
}




/* Help hub category sections */
.help-hub__page-header {
    padding: var(--space-8) 0 var(--space-6);
}

.help-hub__page-title {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    margin: 0 0 var(--space-2);
}

.help-hub__page-description {
    font-size: var(--font-size-base);
    color: var(--color-text-secondary);
    margin: 0;
}

.help-hub__category {
    padding: var(--space-8) 0;
    border-bottom: 1px solid var(--color-border);
}

.help-hub__category:last-child {
    border-bottom: none;
}

.help-hub__category-header {
    margin-bottom: var(--space-5);
}

.help-hub__category-title {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin: 0 0 var(--space-2);
}

.help-hub__category-description {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin: 0;
}

@media (max-width: 900px) {
    .card-grid--help {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {
    .card__help-image {
        width: 120px;
    }
    .card__help-inner {
        min-height: 160px;
    }
}

/* =====================
   HELP ARTICLE PAGE
   ===================== */

.help-article__read-time {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    margin: 0;
}

.help-content {
    max-width: var(--max-width);
    width: 100%;
    margin-inline: auto;
    padding-inline: var(--content-padding);
}

.help-content .pdf-viewer {
    max-width: 640px;
}
/* Subject page */

.portal-hero-nav__back {
    font-size: var(--font-size-sm);
    color: inherit;
    text-decoration: none;
    opacity: 0.8;
}
.portal-hero-nav__back:hover { opacity: 1; text-decoration: underline; }

.subject-header {
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin-bottom: var(--space-8);
    min-height: 180px;
    display: flex;
    align-items: flex-end;
}
.subject-header__overlay {
    width: 100%;
    padding: var(--space-6) var(--space-8);
    background: linear-gradient(to top, rgba(0,0,0,0.55) 0%, transparent 100%);
}
.subject-header__title {
    font-size: var(--font-size-2xl);
    font-weight: 700;
    color: #fff;
    margin: 0 0 var(--space-1);
}
.subject-header__description {
    font-size: var(--font-size-base);
    color: rgba(255,255,255,0.88);
    margin: 0;
}


.card--subject {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    width: 584px;
    min-width: 584px;
    max-width: 584px;
    height: 400px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    padding: 0;
    border: none;
}

.card--subject .card__body {
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.card--subject .card__footer {
    margin-top: auto;
}
/* ==========================================================================
   SUBJECT PAGE  — add these rules to the bottom of style.css,
   just after the existing "Subject page" comment block at the end of the file.
   ========================================================================== */


/* ------------------------------------------------------------------
   1.  Layout override
   The subject page uses a full-bleed hero that must sit outside the
   .portal-layout padding. We reset the default portal-layout gutter
   for this page so the hero stretches edge-to-edge, then re-apply
   padding inside each inner element.
   ------------------------------------------------------------------ */

.portal-layout--subject {
    padding: 0;
    gap: 0;
    max-width: 100%;
}

.portal-layout--subject .portal-layout__main {
    width: 100%;
}

.portal-layout--subject .lsn-tabs-bar__inner {
    max-width: var(--max-width);
    margin-inline: auto;
    padding-left: var(--content-padding);
    padding-right: var(--content-padding);
}


/* ------------------------------------------------------------------
   2.  Subject Hero
   Replaces .hub-header--subject. White surface, no border-radius,
   full-width with inner max-width container — same pattern as
   .page-hero / .portal-home sections.
   ------------------------------------------------------------------ */

.subject-hero {
    background-color: var(--color-card);           /* #ffffff */
    padding: var(--space-4) 0 var(--space-4);      /* 24px top and bottom */
}

.subject-hero__inner {
    max-width: var(--max-width);          /* 1400px */
    margin-inline: auto;
    padding-inline: var(--content-padding);  /* responsive 80px → 16px */
    display: flex;
    flex-direction: column;
    gap: var(--space-2);                  /* 8px between breadcrumb and body */
}

.subject-hero__body {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);                  /* 4px between title and description */
}


/* ------------------------------------------------------------------
   3.  Breadcrumb
   Uses the same token values as .site-nav__breadcrumb already in
   style.css — consistent family, no new design decisions needed.
   ------------------------------------------------------------------ */

.subject-breadcrumb__list {
    list-style: none;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-1);                  /* 4px */
    font-size: var(--font-size-sm);       /* 14px */
    margin: 0;
    padding: 0;
}

.subject-breadcrumb__item {
    display: flex;
    align-items: center;
    color: var(--color-text-secondary);   /* --grey-60 */
}

/* Separator  ›  between items */
.subject-breadcrumb__item + .subject-breadcrumb__item::before {
    content: '›';
    margin-right: var(--space-1);         /* 4px */
    color: var(--color-text-muted);       /* --grey-40 */
    line-height: 1;
}

.subject-breadcrumb__link {
    color: var(--color-btn-primary);                     /* --uv-brand-base */
    font-weight: var(--font-weight-medium);              /* 500 */
    text-decoration: none;
    transition: color var(--transition-fast);
}

.subject-breadcrumb__link:hover {
    color: var(--color-btn-primary-hover);               /* --uv-brand-60 */
}

.subject-breadcrumb__item--current {
    color: var(--color-text-primary);                    /* --grey-100 */
    font-weight: var(--font-weight-medium);
}


/* ------------------------------------------------------------------
   4.  Hero title & description
   Matches the hierarchy used in .page-hero__title /
   .portal-home__section-title without duplicating those classes.
   ------------------------------------------------------------------ */

.subject-hero__title {
    font-size: var(--font-size-4xl);      /* 36px — same as portal welcome title */
    font-weight: var(--font-weight-bold); /* 700 */
    line-height: var(--line-height-tight);/* 1.2 */
    color: var(--color-text-primary);     /* --grey-100 */
    letter-spacing: var(--tracking-tight);/* -0.02em */
    margin: 0;
}

.subject-hero__description {
    font-size: var(--font-size-base);       /* 16px */
    line-height: var(--line-height-normal);/* 1.5 */
    color: var(--color-text-secondary);   /* --grey-60 */
    max-width: 64ch;
    margin: 0;
}


/* ------------------------------------------------------------------
   6.  Group nav — lives at the bottom of .subject-hero
   Sits flush against the hero border-bottom at rest.
   Once the hero scrolls out of view the nav sticks to the top of
   the viewport (below the site header, assumed ~60px).
   ------------------------------------------------------------------ */

.subject-hero {
    position: relative;
}

.subject-hub-nav {
    position: sticky;
    top: 0;             /* adjust to your header height if header is fixed, e.g. top: 60px */
    z-index: 100;
    background-color: var(--color-card);
    border-bottom: 1px solid var(--color-border);
    margin: 0;

}

.subject-hub-nav .lesson-tabs {
    max-width: var(--max-width);
    margin-inline: auto;
    padding-left: var(--content-padding);
    padding-right: var(--content-padding);
}


/* ------------------------------------------------------------------
   6b. Module group sections — re-apply content padding
   .portal-layout--subject resets the outer wrapper padding to 0
   so the hero can be full-bleed.
   ------------------------------------------------------------------ */

.portal-layout--subject .pc-category {
    max-width: var(--max-width);
    margin-inline: auto;
    padding-left: var(--content-padding);
    padding-right: var(--content-padding);
    padding-top: var(--space-4);     /* space above each group */
    padding-bottom: var(--space-4);  /* space below each group */
}


/* ------------------------------------------------------------------
   7.  "View all →" text link
   Replaces the old hidden carousel__controls div in pc-category__header.
   .pc-category__header already uses space-between, so this sits
   opposite the title automatically.
   ------------------------------------------------------------------ */

.pc-category__view-all {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: var(--font-size-sm);           /* 14px */
    font-weight: var(--font-weight-semibold); /* 600 */
    color: var(--color-btn-primary);          /* --uv-brand-base */
    text-decoration: none;
    white-space: nowrap;
    transition: color var(--transition-fast), gap var(--transition-fast);
    flex-shrink: 0;
    align-self: center;
}

.pc-category__view-all:hover {
    color: var(--color-btn-primary-hover);    /* --uv-brand-60 */
    gap: 0.4rem;
}


/* ------------------------------------------------------------------
   8.  Responsive
   --content-padding already scales at all breakpoints via :root in
   style.css. Only vertical rhythm needs explicit overrides here.
   ------------------------------------------------------------------ */

@media (max-width: 768px) {
    .subject-hero {
        padding: var(--space-3) 0 0;  /* 16px top on mobile */
    }

    .subject-hero__title {
        font-size: var(--font-size-2xl);  /* 28px */
    }

    .subject-hero__description {
        font-size: var(--font-size-base); /* 16px */
    }
}

@media (max-width: 640px) {
    .subject-hero__title {
        font-size: var(--font-size-xl);   /* 24px */
    }
}
/* ==========================================================================
   MODULE HOME PAGE
   ========================================================================== */


/* ------------------------------------------------------------------
   1.  Layout override
   ------------------------------------------------------------------ */

.portal-layout--module {
    padding: 0;
    gap: 0;
    max-width: 100%;
}

.portal-layout--module .portal-layout__main {
    width: 100%;
}

.mhl-content {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    padding-top: var(--space-5);
    padding-bottom: calc(var(--space-8) + 80px);
}

.portal-layout--module .lsn-tabs-bar__inner {
    max-width: var(--max-width);
    margin-inline: auto;
    padding-left: var(--content-padding);
    padding-right: var(--content-padding);
}


/* ------------------------------------------------------------------
   2.  Hero
   ------------------------------------------------------------------ */

.mhl-hero {
    background-color: var(--color-card);
    padding: var(--space-4) 0 var(--space-5);
}

.mhl-hero__inner {
    max-width: var(--max-width);
    margin-inline: auto;
    padding-inline: var(--content-padding);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.mhl-hero__title {
    font-size: var(--font-size-4xl);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
    color: var(--color-text-primary);
    letter-spacing: var(--tracking-tight);
    margin: 0;
}

.mhl-hero__description {
    font-size: var(--font-size-md);
    line-height: var(--line-height-loose);
    color: var(--color-text-secondary);
    max-width: 64ch;
    margin: 0;
}


/* ------------------------------------------------------------------
   3.  Tab bar
   ------------------------------------------------------------------ */

.mhl-tabs-bar {
    position: sticky;
    top: 0;
    z-index: 100;
    background-color: var(--color-card);
    border-bottom: 1px solid var(--color-border);
    margin: 0;
}

.mhl-tabs-bar__inner {
    max-width: var(--max-width);
    margin-inline: auto;
    padding-inline: var(--content-padding);
    overflow-x: auto;
    scrollbar-width: none;
}

.mhl-tabs-bar__inner::-webkit-scrollbar { display: none; }

.mhl-tabs__list {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 0;
    white-space: nowrap;
}

.mhl-tabs__item {
    flex-shrink: 0;
}

.mhl-tabs__link {
    display: block;
    padding: var(--space-3) var(--space-3);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    transition: color var(--transition-fast), border-color var(--transition-fast);
    line-height: 1;
}

.mhl-tabs__link:hover {
    color: var(--color-text-primary);
}

.mhl-tabs__link--active {
    color: var(--color-btn-primary);
    border-bottom-color: var(--color-btn-primary);
    font-weight: var(--font-weight-semibold);
}


/* ------------------------------------------------------------------
   4.  Content sections
   ------------------------------------------------------------------ */

.portal-layout--module .mhl-section {
    max-width: var(--max-width);
    margin-inline: auto;
    padding-inline: var(--content-padding);
    width: 100%;
    box-sizing: border-box;
}

.portal-layout--module .mhl-section .mhl-group {
    width: 100%;
    box-sizing: border-box;
}

.portal-layout--module > .mhl-content > .mhl-group {
    max-width: var(--max-width);
    margin-inline: auto;
    padding-inline: var(--content-padding);
    width: 100%;
    box-sizing: border-box;
}

.portal-layout--module .mhl-progress-card,
.portal-layout--module .mhl-list,
.portal-layout--module .mhl-section__heading,
.portal-layout--module .mhl-group__title {
    max-width: 860px;
}

.mhl-section {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.mhl-section__heading {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin: 0;
}


/* ------------------------------------------------------------------
   5.  Progress card
   ------------------------------------------------------------------ */

.mhl-progress-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-4) var(--space-5);
}

.mhl-progress-card__header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.mhl-progress-card__indicator {
    flex-shrink: 0;
}

.mhl-progress-card__indicator svg {
    display: block;
}

.mhl-progress-card__summary {
    flex: 1;
    margin: 0;
    font-size: var(--font-size-sm);
    color: var(--color-text-primary);
}


/* ------------------------------------------------------------------
   6.  Lesson groups
   ------------------------------------------------------------------ */

.mhl-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.mhl-group__title {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-secondary);
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.mhl-group__desc {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin: 0;
    max-width: 64ch;
}

.mhl-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}


/* ------------------------------------------------------------------
   7.  Lesson rows
   ------------------------------------------------------------------ */

.mhl-row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    transition: box-shadow var(--transition-fast), border-color var(--transition-fast);
}

.mhl-row:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    border-color: var(--color-border-strong);
}

.mhl-row__indicator {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, #3b82f6 10%, transparent) !important;
}

.mhl-row--completed .mhl-row__indicator {
    background: color-mix(in srgb, var(--color-success) 12%, transparent) !important;
}

.mhl-row__icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

.mhl-row__body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.mhl-row__title {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    line-height: 1.3;
}

.mhl-row__desc {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    line-height: 1.4;
}

.mhl-row__meta {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}

.mhl-row__meta-status--active {
    color: #3b82f6;
    font-weight: var(--font-weight-medium);
}

.mhl-row__status {
    flex-shrink: 0;
    min-width: 100px;
    display: flex;
    justify-content: flex-end;
}

.mhl-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: var(--radius-sm);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height: 1;
}

.mhl-badge--done {
    background: var(--color-success);
    color: #fff;
}

.mhl-row__actions {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    margin-left: var(--space-3);
}

/* Active (next) lesson row — blue border */
.portal-layout--module .mhl-row--active {
    border-color: #3b82f6 !important;
}

.portal-layout--module .mhl-row--active:hover {
    box-shadow: 0 2px 12px color-mix(in srgb, #3b82f6 20%, transparent);
}

/* Consistent button sizing in all row action areas */
.portal-layout--module .mhl-row__actions .btn,
.portal-layout--module .module-pc__actions .btn {
    width: 80px;
    justify-content: center;
}

/* View button — no shadow, keep colour on row hover */
.portal-layout--module .mhl-row__actions .btn--ghost-subject {
    box-shadow: none;
}

.portal-layout--module .mhl-row:hover .btn--ghost-subject {
    background-color: color-mix(in srgb, #3b82f6 10%, transparent);
    border-color: color-mix(in srgb, #3b82f6 30%, transparent);
    color: #3b82f6;
}

/* Resume button — solid blue, no shadow at rest */
.portal-layout--module .mhl-row__actions .btn--primary {
    background-color: #3b82f6;
    border-color: #3b82f6;
    color: #fff;
    box-shadow: none;
}

.portal-layout--module .mhl-row__actions .btn--primary:hover {
    background-color: color-mix(in srgb, #3b82f6 85%, black);
    border-color: color-mix(in srgb, #3b82f6 85%, black);
    box-shadow: 0 4px 12px color-mix(in srgb, #3b82f6 35%, transparent);
    transform: translateY(-1px);
}

/* P&C and assets — no shadow */
.portal-layout--module .module-pc__actions .btn--ghost-parent-carer,
.portal-layout--module .module-pc__actions .btn--ghost-assets {
    box-shadow: none;
}


/* ------------------------------------------------------------------
   8.  Sticky resume bar
   ------------------------------------------------------------------ */

.mhl-resume-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 200;
    background-color: #3b82f6;
    box-shadow: 0 -2px 16px rgba(0, 0, 0, 0.12);
}

.mhl-resume-bar__inner {
    max-width: var(--max-width);
    margin-inline: auto;
    padding: var(--space-3) var(--content-padding);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
}

.mhl-resume-bar__text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.mhl-resume-bar__heading {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-bold);
    color: #fff;
    line-height: 1.2;
}

.mhl-resume-bar__sub {
    font-size: var(--font-size-sm);
    color: rgba(255, 255, 255, 0.8);
}

.mhl-resume-bar__btn {
    flex-shrink: 0;
    background-color: #fff !important;
    border-color: #fff !important;
    color: #3b82f6 !important;
    font-weight: var(--font-weight-bold);
    white-space: nowrap;
}

.mhl-resume-bar__btn:hover {
    background-color: color-mix(in srgb, #fff 90%, #3b82f6) !important;
    border-color: color-mix(in srgb, #fff 90%, #3b82f6) !important;
    color: #3b82f6 !important;
}


/* ------------------------------------------------------------------
   9.  Parent & Carer / Printable Assets rows
   ------------------------------------------------------------------ */

.module-pc__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    max-width: 860px;
}

.module-pc__row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    transition: box-shadow var(--transition-fast), border-color var(--transition-fast);
}

.module-pc__row:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    border-color: var(--color-border-strong);
}

.module-pc__icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    background: color-mix(in srgb, var(--color-btn-primary) 10%, transparent);
    color: var(--color-btn-primary);
    font-size: 9px;
    font-weight: var(--font-weight-bold);
    letter-spacing: 0.04em;
}

.module-pc__icon--pdf {
    color: #e44d26;
    background: color-mix(in srgb, #e44d26 10%, transparent);
}

.module-pc__text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.module-pc__title {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin: 0;
    line-height: 1.3;
}

.module-pc__subheading {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin: 0;
    line-height: 1.4;
}

.module-pc__actions {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: var(--space-2);
}


/* ------------------------------------------------------------------
   10.  Mindfulness section
   ------------------------------------------------------------------ */

.mhl-section--mindfulness {
    max-width: var(--max-width);
    margin-inline: auto;
    padding-inline: var(--content-padding);
    width: 100%;
    box-sizing: border-box;
}

.mhl-section--mindfulness .mhl-section__heading {
    text-align: left;
}

.mhl-section--mindfulness [data-carousel] {
    position: relative;
}

.mhl-section--mindfulness .portal-home__carousel-controls {
    top: 180px;
}

.mhl-section--mindfulness [data-carousel-controls]:not([hidden]) {
    display: flex;
}


/* ------------------------------------------------------------------
   11.  Responsive
   ------------------------------------------------------------------ */

@media (max-width: 768px) {
    .mhl-hero {
        padding: var(--space-3) 0 var(--space-4);
    }

    .mhl-hero__title {
        font-size: var(--font-size-2xl);
    }

    .mhl-hero__description {
        font-size: var(--font-size-base);
    }

    .mhl-progress-card {
        padding: var(--space-3) var(--space-4);
    }

    .mhl-row {
        padding: var(--space-3);
        gap: var(--space-2);
    }

    .mhl-row__desc {
        display: none;
    }

    .mhl-resume-bar__inner {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-2);
    }

    .mhl-resume-bar__btn {
        align-self: stretch;
        text-align: center;
    }
}

@media (max-width: 640px) {
    .mhl-hero__title {
        font-size: var(--font-size-xl);
    }
}

@media (max-width: 480px) {
    .mhl-badge--done {
        display: none;
    }
}
/* ==========================================================================
   LESSON PAGE  — add these rules to the bottom of style.css,
   just after the module page styles.
   ========================================================================== */


/* ------------------------------------------------------------------
   1.  Outer layout — full-width column
       Hero + tab bar sit at the top, full width.
       .lsn-body (sidebar + content) sits below.
   ------------------------------------------------------------------ */

.portal-layout--lesson {
    display: flex;
    flex-direction: column;
    padding: 0;
    gap: 0;
    max-width: 100%;
    background: var(--color-surface-subtle);
}


/* ------------------------------------------------------------------
   2.  Hero — full width, white, matches module/subject pages exactly
   ------------------------------------------------------------------ */

.lsn-hero {
    background-color: var(--color-card);
    padding: var(--space-4) 0 0;
    width: 100%;
}

.lsn-hero__inner {
    max-width: var(--max-width);
    margin-inline: auto;
    padding-inline: var(--content-padding);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

/* Hero body: text left, actions column right — actions pinned to bottom */
.lsn-hero__body {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: var(--space-6);
    padding-bottom: var(--space-4);
}

.lsn-hero__text {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    flex: 1;
    min-width: 0;
}

.lsn-hero__title {
    font-size: var(--font-size-4xl);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
    color: var(--color-text-primary);
    letter-spacing: var(--tracking-tight);
    margin: 0;
}

.lsn-hero__description {
    margin: 0;
}

.lsn-hero__description p,
.lsn-hero__long-desc p {
    font-size: var(--font-size-md);
    line-height: var(--line-height-loose);
    color: var(--color-text-secondary);
    margin: 0 0 var(--space-1);
    max-width: 64ch;
}

.lsn-hero__description p:last-child,
.lsn-hero__long-desc p:last-child {
    margin-bottom: 0;
}

/* Actions column — pinned to bottom of the hero body */
.lsn-hero__actions {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    gap: var(--space-3);
    flex-shrink: 0;
    padding-bottom: 0;
}

.lsn-hero__complete[disabled] {
    opacity: 0.6;
    cursor: default;
}

/* Complete button — blue when active */
.portal-layout--lesson .lsn-hero__complete--active {
    background-color: #3b82f6;
    border-color: #3b82f6;
}

.portal-layout--lesson .lsn-hero__complete--active:hover {
    background-color: color-mix(in srgb, #3b82f6 85%, black);
    border-color: color-mix(in srgb, #3b82f6 85%, black);
}

.lsn-hero__reset {
    background: none;
    border: none;
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    cursor: pointer;
    padding: 0;
    text-decoration: underline;
    text-underline-offset: 2px;
    align-items: flex-end;
}

.lsn-hero__reset:hover {
    color: var(--color-text-primary);
}


/* ------------------------------------------------------------------
   3.  Tab bar — sticky, full width
   ------------------------------------------------------------------ */

.lsn-tabs-bar {
    position: sticky;
    top: 0;
    z-index: 10;
    background-color: var(--color-card);
    border-bottom: 1px solid var(--color-border);
    border-top: 1px solid var(--color-border);
}

.page-template-page-lesson .lsn-tabs-bar {
    top: 44px;
}

.lsn-tabs-bar__inner {
    padding-left: var(--space-5);
    padding-right: 0;
    overflow-x: auto;
    scrollbar-width: none;
    display: flex;
    width: 100%;
}

.lsn-tabs-bar__inner::-webkit-scrollbar { display: none; }


/* ------------------------------------------------------------------
   4.  Body — sidebar left | content right, below the hero
   ------------------------------------------------------------------ */

.lsn-body {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    flex: 1;
    width: 100%;
    position: relative;
    max-width: var(--max-width);
    margin-inline: auto;
    padding-left: 0;
    min-height: 100%;
}

.lsn-tabs-bar::after {
    content: '';
    position: absolute;
    top: 0;
    left: 100%;
    width: 100vw;
    height: 100%;
    background: var(--color-card);
}

.lsn-body::before {
    content: '';
    position: absolute;
    top: 0;
    left: calc(-50vw + 50%);
    width: calc(260px + var(--content-padding) + (50vw - 50%));
    bottom: 0;
    background: var(--color-card);
    border-right: 1px solid var(--color-border);
    border-top: 1px solid var(--color-border);
}


/* ------------------------------------------------------------------
   5.  Sidebar
   ------------------------------------------------------------------ */


.lsn-sidebar {
    position: sticky;
    top: 0px;
    max-height: calc(100vh - var(--header-height) - 44px);
    overflow-y: auto;
    padding: var(--space-4) var(--space-4) var(--space-4) var(--content-padding);
    width: calc(260px + var(--content-padding));
    flex-shrink: 0;
    z-index: 1;
}
.page-template-page-lesson .lsn-sidebar {
    top: 44px;
    max-height: calc(100vh - var(--header-height) - 44px);
}
.lsn-sidebar__subject-title {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
    margin: 0 0 var(--space-1);
}

.lsn-sidebar__course {
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--color-border);
}

.lsn-sidebar__module-title {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    margin: 0 0 var(--space-2);
}

/* Progress — circle + text */
.lsn-sidebar__progress {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-2);
}
.lsn-sidebar__subject-title {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
    margin: 0 0 var(--space-1);
}

.lsn-sidebar__course {
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--color-border);
}

.lsn-sidebar__module-title {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    margin: 0 0 var(--space-2);
}

/* Progress — circle + text */
.lsn-sidebar__progress {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-2);
}

.lsn-sidebar__progress-bar { display: none; }

.lsn-sidebar__progress-text {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.lsn-sidebar__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.lsn-sidebar__group-title {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 0;
    padding: var(--space-2) var(--space-2) var(--space-1);
}

.lsn-sidebar__item-link {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2);
    border-radius: var(--radius-md);
    text-decoration: none;
    transition: background var(--transition-fast);
}

.lsn-sidebar__item-link:hover {
    background: var(--color-surface-subtle);
}

/* Current lesson — pale blue highlight */
.lsn-sidebar__item--current .lsn-sidebar__item-link {
    background-color: color-mix(in srgb, #3b82f6 10%, transparent);
    border-radius: var(--radius-sm);
}

.lsn-sidebar__item-indicator {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.lsn-sidebar__item-title {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    line-height: 1.4;
}

.lsn-sidebar__item--current .lsn-sidebar__item-title {
    font-weight: var(--font-weight-semibold);
    color: #3b82f6;
}


/* ------------------------------------------------------------------
   6.  Main content area
   ------------------------------------------------------------------ */

.lsn-main-wrapper {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.lsn-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    padding-left: var(--space-5);
}

.lsn-content {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding-bottom: var(--space-8);
}

.lsn-section {
    padding: var(--space-5) 0;
    border-bottom: 1px solid var(--color-border);
}

.lsn-section:last-child {
    border-bottom: none;
}

.lsn-section .lesson-section__description {
    padding: 0 var(--content-padding) var(--space-4);
    font-size: var(--font-size-base);
    line-height: var(--line-height-loose);
    color: var(--color-text-secondary);
}

.lsn-audio {
    max-width: 600px;
}

.lsn-section__header {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
}

.lsn-section__title-row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.lsn-section__icon-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--color-btn-primary) 10%, transparent);
    color: var(--color-btn-primary);
    flex-shrink: 0;
}

.lsn-section__label {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    margin: 0;
    line-height: var(--line-height-tight);
}

.lsn-section__description {
    font-size: var(--font-size-base);
    line-height: var(--line-height-loose);
    color: var(--color-text-secondary);
    margin: 0;
    max-width: 72ch;
}

.lsn-section__description p {
    margin: 0 0 var(--space-1);
}

.lsn-section__description p:last-child {
    margin-bottom: 0;
}

/* Per-type icon accent colours */
.lsn-section--audio       .lsn-section__icon-wrap { background: color-mix(in srgb, #8b5cf6 10%, transparent); color: #8b5cf6; }
.lsn-section--mindfulness .lsn-section__icon-wrap { background: color-mix(in srgb, #ec4899 10%, transparent); color: #ec4899; }
.lsn-section--text        .lsn-section__icon-wrap { background: color-mix(in srgb, var(--color-text-secondary) 10%, transparent); color: var(--color-text-secondary); }
.lsn-section--genially    .lsn-section__icon-wrap { background: color-mix(in srgb, #f59e0b 10%, transparent); color: #f59e0b; }

/* Audio player */
.lsn-audio audio {
    width: 100%;
    border-radius: var(--radius-md);
}

.lsn-audio__card {
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-3) var(--space-4);
    max-width: 600px;
}

.lsn-audio__card audio {
    width: 100%;
    display: block;
}

/* Text content */
.lsn-text-content {
    font-size: var(--font-size-base);
    line-height: var(--line-height-loose);
    color: var(--color-text-primary);
    max-width: 72ch;
}

.lsn-text-content p {
    margin: 0 0 var(--space-3);
}

.lsn-text-content p:last-child {
    margin-bottom: 0;
}


/* ------------------------------------------------------------------
   7.  Prev / Next navigation
   ------------------------------------------------------------------ */

.lsn-nav {
    background: var(--color-card);
    border-top: 1px solid var(--color-border);
    padding: var(--space-5) 0;
}

.lsn-nav__inner {
    padding-inline: var(--content-padding);
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: var(--space-4);
}

.lsn-nav__btn {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-card);
    text-decoration: none;
    color: var(--color-text-primary);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
    max-width: 340px;
    flex: 1;
}

.lsn-nav__btn:hover {
    border-color: var(--color-btn-primary);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.lsn-nav__btn--next {
    margin-left: auto;
    justify-content: flex-end;
    text-align: right;
}

.lsn-nav__arrow {
    font-size: var(--font-size-xl);
    color: var(--color-btn-primary);
    flex-shrink: 0;
}

.lsn-nav__label {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.lsn-nav__direction {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.lsn-nav__title {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    line-height: 1.3;
}


/* ------------------------------------------------------------------
   8.  Mindfulness carousel in lesson
   ------------------------------------------------------------------ */

.card-scroll--lesson-mindfulness {
    display: flex;
    gap: 24px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}

.card-scroll--lesson-mindfulness::-webkit-scrollbar { display: none; }

.card-scroll--lesson-mindfulness .card--mindfulness {
    width: 260px;
    min-width: 260px;
    flex-shrink: 0;
    scroll-snap-align: start;
    position: relative;
    min-height: 200px;
}

.lsn-section [data-carousel] {
    position: relative;
}

[data-carousel-controls][hidden] {
    display: none !important;
}


/* ------------------------------------------------------------------
   9.  Responsive
   ------------------------------------------------------------------ */

@media (max-width: 768px) {
    .lsn-sidebar {
        display: none;
    }

    .lsn-body {
        padding-inline: 0;
    }

    .lsn-hero__body {
        flex-direction: column;
        gap: var(--space-3);
        padding-bottom: var(--space-3);
    }

    .lsn-hero__title {
        font-size: var(--font-size-2xl);
    }

    .lsn-hero__actions {
        align-items: flex-start;
        width: 100%;
    }

    .lsn-nav__inner {
        flex-direction: column;
    }

    .lsn-nav__btn {
        max-width: 100%;
    }

    .lsn-nav__btn--next {
        margin-left: 0;
    }
}

@media (max-width: 640px) {
    .lsn-hero__title {
        font-size: var(--font-size-xl);
    }
}


/* ------------------------------------------------------------------
   10.  Misc
   ------------------------------------------------------------------ */

/* Subject/P&C/Mindfulness content pages — no sidebar, constrained width */
.portal-layout--subject .lsn-main {
    max-width: var(--max-width);
    margin-inline: auto;
    padding-inline: var(--content-padding);
    padding-left: var(--content-padding);
    width: 100%;
}
/* =====================
   VIDEO PLAYLIST
   ===================== */

.video-playlist-wrap {
    margin-top: 16px;
    background: var(--color-surface-subtle, #f3f4f6);
    border-radius: var(--radius-lg, 10px);
    padding: 14px 16px 16px;
        overflow: visible;

}

.video-playlist-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.video-playlist-title {
    font-size: var(--font-size-sm, 0.875rem);
    font-weight: var(--font-weight-semibold, 600);
    color: var(--color-text-secondary, #6b7280);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 0;
}

.video-playlist-nav {
    display: flex;
    gap: 6px;
}

.video-playlist-nav__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: var(--radius-sm, 6px);
    border: 1px solid var(--color-border, #e5e7eb);
    background: var(--color-surface, #fff);
    color: var(--color-text-primary, #111827);
    cursor: pointer;
    font-size: 14px;
    transition: background 0.12s ease, border-color 0.12s ease;
    flex-shrink: 0;
    user-select: none;
}

.video-playlist-nav__btn:hover {
    background: var(--color-btn-primary, #2563eb);
    border-color: var(--color-btn-primary, #2563eb);
    color: #fff;
}

.video-playlist-nav__btn:disabled {
    opacity: 0.35;
    cursor: default;
    pointer-events: none;
}

/* Scrollable track */
.video-playlist {
    display: flex;
    flex-direction: row;
    gap: 10px;
    padding: 4px 4px 6px;
    overflow-x: auto;
    overflow-y: visible;
    scroll-behavior: smooth;
    scrollbar-width: none;
    cursor: grab;
}

.video-playlist::-webkit-scrollbar {
    display: none;
}

.video-playlist.is-dragging {
    cursor: grabbing;
    scroll-behavior: auto;
    user-select: none;
}

/* Individual item */
.video-playlist__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    text-align: center;
    flex-shrink: 0;
    width: 110px;
}

/* Square thumbnail */
.video-playlist__thumb {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: var(--radius-md);
    background-color: var(--color-neutral-200, #e5e7eb);
    background-size: cover;
    background-position: center;
    overflow: hidden;
    flex-shrink: 0;
    transition: filter 0.15s ease;
outline: 2px solid transparent;
    outline-offset: 0;
}
.video-playlist__item--active .video-playlist__thumb {
    outline: 2px solid #2563eb;
    border: none;
}

/* Dim overlay — hidden by default */
.video-playlist__thumb::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0);
    transition: background 0.15s ease;
}

/* Play icon — hidden by default */
.video-playlist__play-icon {
   background: none;
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    z-index: 1;
    opacity: 0;
    transition: opacity 0.15s ease;
}


/* Active item — darken thumb + show play icon, no border */
.video-playlist__item--active .video-playlist__thumb::after {
    background: rgba(37, 99, 235, 0.6);
}

.video-playlist__item--active .video-playlist__play-icon {
    opacity: 1;
    color: #fff;
}

/* Hover on non-active — subtle dim */
.video-playlist__item:not(.video-playlist__item--active):hover .video-playlist__thumb::after {
    background: rgba(0, 0, 0, 0.18);
}

/* Label */
.video-playlist__info {
    width: 100%;
}

.video-playlist__label {
    font-size: var(--font-size-xs, 0.75rem);
    font-weight: var(--font-weight-medium, 500);
    color: var(--color-text-secondary, #6b7280);
    line-height: 1.3;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.video-playlist__item--active .video-playlist__label {
    color: var(--color-text-primary, #111827);
    font-weight: var(--font-weight-semibold, 600);
}

.video-playlist__number {
    display: none;
}
.video-playlist__item--active {
        background: transparent;

}


/*
====================================
LICENSE EXPIRED SCREEN
====================================
*/
.login-card__error p {
    margin-bottom: 0.75em;
}
.login-card__error p:last-child {
    margin-bottom: 0;
}