:root{--color-primary: #69bd45;--color-secondary: #007ab8;--color-tertiary: #1ea4a9;--color-state: #4b7e2b;--color-state-hover: #3c6721;--color-state-focus: #3c6721;--color-state-active: #30541a;--color-state-highlight: #f6f9d7;--color-state-highlight-neutral: var(--color-neutral-3);--color-state-disabled: var(--color-neutral-5);--color-neutral-1: #fff;--color-neutral-2: #fafafa;--color-neutral-3: #f7f7f7;--color-neutral-4: #e6e4e4;--color-neutral-5: #c7c7c7;--color-neutral-6: #767676;--color-neutral-7: #262626;--color-background: var(--color-neutral-1);--color-border: var(--color-neutral-5);--color-text: var(--color-neutral-7);--color-text-disabled: var(--color-neutral-5);--color-text-hint: var(--color-neutral-6);--link-color: var(--color-state);--link-color-hover: var(--color-state-hover);--nav-bg-color: #fff;--nav-text-color: var(--color-text);--footer-bg-color: #fff;--footer-text-color: var(--color-text);--footer-text-color-hover: var(--footer-text-color);--btn-accent-color: var(--color-state);--btn-accent-color-active: var(--color-state-active);--btn-accent-color-hover: var(--color-state-hover);--btn-accent-color-disabled: var(--color-state-disabled)}:root{--nav-bg-color: #ffffff;--nav-text-color: #333366;--color-primary: #333366;--btn-prim-accent-color: #333366;--btn-accent-color: #3D444B;--link-color: #443b62;--color-state: #333366;--color-text: #333366;--footer-bg-color: #F9F9F9;--footer-text-color: #696969;--btn-prim-accent-color-focus: #29295c;--btn-prim-accent-color-active: #18184b;--btn-accent-color-focus: #333a41;--btn-accent-color-active: #222930;--link-color-hover: #3a3158;--color-state-hover: #29295c;--color-state-focus: #29295c;--color-state-active: #18184b;--footer-text-color-hover: #5f5f5f;}
/** WR473295 - Original styles from ZISHI with updates from Catalyst - 31.10.2025 **/

:root {
    --font-body-size: .85rem;
    --font-body-line-height: 1.4;
    --font-h4-line-height: 1.1rem;
}

body {
    font-family: 'Open Sans', -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif !important;
    font-size: .9rem;
    line-height: 1.4;
} 

.totara_core__QuickAccess_flex-container-empty p, .totara_core__QuickAccess_flex-container-empty a, .totara_core__QuickAccess_flex-container-empty span{
color:white;
}

.messaging-area-container .messaging-area .messages-area .messages-header .btn-link {
    padding: 0;
    line-height: inherit;
    background-color: #ffffff;
}

.totaraNav.scrolled nav #quickaccess-popover-content {
    font-size: .9rem;
}

#page-login-index .site-banner, #pade-admin-tool-sitepolicy-userpolicy .site-banner, #page-login-forgot-password .site-banner {
    background-color: #443b62;
    order:2;
    z-index:100;
    display:none;
}

.site-banner p{
    text-align:center;
    color: white;
    margin-top:10px;
}

.site-banner {
display:none;
}


h1, h2 {
font-weight:200;
}

h1 {
    font-size: 2rem;
}

h2 {
    font-size: 1.8rem;
}

h3 {
    font-size: 1.6rem;
    font-weight: 400;
}

h4 {
    font-size: 1.2rem;
    font-weight: 400;
}

h5 {
    font-size: .9rem;
    font-weight: 400;
}

h6 {
    font-size: .8rem;
    font-weight: 400;
}

h1.trajan,
.block_html .content h2 {
    font-size: 2.5rem;
    font-weight: 200;
    line-height: 1.16;
}

h2.trajan,
.block_html .content h2 {
    font-size: 1.9rem;
    font-weight: 200;
    line-height: 1.16;
}

h1, .h1, h2, .h2, h3, .box.message .messagearea .messagesend .mform .fitemtitle, .box.message .messagearea .messagesend .mform .form-label, .h3 {
    margin-top: 20px;
    margin-bottom: 10px;
}

p {
margin: 0 0 10px;
}

.tw-catalog__title,
#maincontent + h1, .settingsform h1, 
.questionbankwindow h1,
#completion_import h1, #addadmisform h1 {
    font-weight: 500;
}

#course-card-template, #section-card-template, .d-none, #page-course-view-topics .section-settings {
display: none;
}



@media screen and (max-width: 425px){
.d-xs-none{
display: none;
}
}

#section-0 .sectionname, #completionprogressid{
    display: none;
}

#page-course-view-topics .home-featured-courses .progress {
    height: 7px;
    margin-bottom: 20px;
    border: none;
    box-shadow: none;
    background-color: #e2e2e2;
}

#page-course-view-topics .home-featured-courses .progress-bar {
    background-color: #443b62;
    box-shadow: none;
}

.headerSection>.container-fluid{
padding: 15px 30px 15px 30px;
}

.banner-text{
    display: flex;
    align-items: center;
    height: 100%;
    justify-content: center;
}

.banner-text.light h1{
color: white;
}

.banner-text h1{
    text-align: center;
    font-family: 'trajan-pro-3' !important;
    font-size: 3.5rem;
    line-height: 1.16;
}

@media screen and (max-width:480px){
    .banner-text h1{
    	font-size: 2rem;
    }
.logo-container{
    padding: 20px 0px 40px 0px;
}
}
.embeddedshortname_system_browse_users{
overflow-y: visible;
    overflow-x: visible;
}
/*  --------------------- PAGE ORDERING --------------------- */
.totaraNav{
    -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
            order: 1;
    margin-bottom: 0rem;
    -webkit-box-shadow: 0px 4px 20px #c3c3c3;
            box-shadow: 0px 4px 20px #c3c3c3;
    z-index: 1;
}

.navSearchBar{
    -webkit-box-ordinal-group: 3;
        -ms-flex-order: 2;
            order: 2;

}

.breadcrumb-container{
    -webkit-box-ordinal-group: 4;
        -ms-flex-order: 3;
            order: 3;
}

#page{
    -webkit-box-ordinal-group: 5;
        -ms-flex-order: 4;
            order: 4;
}

.zishi-footer{
    -webkit-box-ordinal-group:6;
        -ms-flex-order:5;
            order:5;
}

ul.list-unstyled.social-list {
    display: flex;
    justify-content: flex-start;
}


.social-list a{
margin-right:10px;
}
.

/* -------------------- NAV SEARCH BOX --------------------- */
.notloggedin .navSearchBar{
    display: none;
}


.navSearchBar{
    width: 100%;
    padding-bottom: 20px;
}

.navSearchBar button.btn.btn-default {
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  height: 30px;
  background-color:rgba(0,0,0,0);
  border:0;
  color:grey;
}

.navSearchBar .form-control{
    border:0;
  background-color:rgba(0,0,0,0);
    padding-top:0px;
    padding-bottom:0px;
    height:30px;
    font-size: 12px;
}

.navSearchBar .input-group {
    border: 1px solid #443b62;
    border-radius: 2px;
    height: 20px;
    float: right;
}


.float_event__search__floater {
  position: fixed;
  bottom: 50px;
  right: 50px;
  z-index:1000000;
  -webkit-transition: all ease-in-out 0.2s;
  -o-transition: all ease-in-out 0.2s;
  transition: all ease-in-out 0.2s;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

.float_search__anchor{
  position: relative;
  width:auto;
  height: auto;
}
.float_search__submit {
 opacity:0;
  width: 0px;
}
.float_search__bar {
  position: absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  outline:none;
  border:none;
  background: #fff;
  width: 50px;
    height: 50px !important;
    border-radius: 25px !important;
  opacity: 0;
  z-index:5;
  -webkit-transition: all 0.2;
  -o-transition: all 0.2;
  transition: all 0.2;
  font-size: 1em;
}
.float_search__bar:hover{
  cursor: pointer;
}
.float_search__bar:focus {
  width: 200px;
  left:auto;
  opacity: 1;
  cursor: text;
  -webkit-transition: all 0.2;
  -o-transition: all 0.2;
  transition: all 0.2;
  padding-left: 25px;
  padding-right: 70px;
}
.float_search__toggler {
  position: absolute;
  width: 60px;
  height: 60px;
  background: #443b62;
  opacity: 1;
  top: -4px;
  left: -4px;
  border-radius: 50%;
  -webkit-transition: all 0.2s;
  -o-transition: all 0.2s;
  transition: all 0.2s;
}
.float_search__toggler:hover{
  cursor: pointer;
}
.float_search__toggler::before {
  content: "";
  position: absolute;
  margin: auto;
  top: 22px;
  right:0;
  bottom:0;
  left: 22px;
  width: 12px;
  height: 2px;
  background: #fff;
  -webkit-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
          transform: rotate(45deg);
  -webkit-transition: all 0.2s;
  -o-transition: all 0.2s;
  transition: all 0.2s;
}
.float_search__toggler::after {
  content: "";
  position: absolute;
  margin: auto;
  top:-5px;
  right:0;
  bottom:0;
  left: -5px;
  width:25px;
  height: 25px;
  border-radius: 50%;
  border: 2px solid #fff;
  -webkit-transition: all 0.2s;
  -o-transition: all 0.2s;
  transition: all 0.2s;
}
.float_search__bar:focus ~ .float_search__toggler {
  right: 400px;
  background: #151515;
  z-index: 6;
  -webkit-transition: all 0.2;
  -o-transition: all 0.2;
  transition: all 0.2;
}
.float_search__bar:focus ~ .float_search__toggler::before{
  top: 0;
  left: 0;
  width: 25px;
}
.float_search__bar:focus ~ .float_search__toggler::after {
  top: 0;
  left: 0;
  width: 25px;
  height: 2px;
  border: none;
  background: white;
  border-radius: 0%;
  -webkit-transform: rotate(-45deg);
      -ms-transform: rotate(-45deg);
          transform: rotate(-45deg);
}
/* -------------------- HOMEPAGE HEADER -------------------------- */

body#page-totara-dashboard-2 .headerSection.active {
    background-position:bottom;
    background-repeat:repeat-x;
    background-size:contain;
    padding-top:20px;
    padding-bottom:20px
}

body#page-totara-dashboard-2 .headerSection.active .container-fluid {
    display:flex;
    justify-content:center;
    position:relative;
    align-items: center;
}

#page-totara-dashboard-2 .container-fluid.breadcrumb-container {
    display: none;
}

/* --------------------- CUSTOM GALLERY IMAGES --------------------- */

.course-section-image{
    display: none !important;
}

/* ---------------------- SLICK SLIDER ---------- */
.slick-slider{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    overflow: hidden;
}

.slick-list{
width:90%;
}

.slick-dotted.slick-slider {
    padding-bottom: 30px;
    margin-bottom: 0px;
}

.slick-dots{
  bottom: 0px;
}

@media screen and (max-width: 480px){
.slick-list{
width:100%;
}
}

.slick-list, .slick-prev, .slick-next{
    display: inline-block !important;
}
.slick-prev,
.slick-next
{
    font-size: 0;
    line-height: 0;
    position: relative;
    top: 50%;
    display: block;
    width: 4%;
    height: 100%;
    padding: 0;
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0,  -50%);
    transform: translate(0,  -50%);
    cursor: pointer;
    color: transparent;
    border: none;
    outline: none;
    background: transparent;
    z-index:1000;
}
.slick-prev:active,
.slick-next:active,.slick-prev:focus,
.slick-next:focus{
background-color:white !important;
border-color: white !important;
}


.slick-prev:before,
.slick-next:before
{
    font-family: 'FontAwesome'!important;
    font-size: 20px;
    line-height: 1;

    opacity:1;
    color: #443b62;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.slick-prev
{
    left: 0px;
}

.slick-prev:before
{
    content: '\f053';
}

.slick-next:before
{
    content: '\f054';
}

.slick-next
{
    right: 0px; 
}

.slick-slider .course-card{
    width: 100%;
    display: block;
    border: 1px solid #f3f3f3;
    border-radius: 15px;
    overflow: hidden;
    -webkit-box-shadow: 0px 0px 10px 1px rgb(0 0 0 / 8%);
            box-shadow: 0px 0px 10px 1px rgb(0 0 0 / 8%);
    margin:10px;

}


.slick-slider .course-card-body{
  padding:15px;
}

.slick-slider .course-card-title a{
  font-weight:700;
  color: #393253;
  font-size: 2rem;
}

.slick-slider .course-card-text{
  font-size:12px;
  font-weight: 100;
  color: #666;
}

.slick-slider .course-card-details{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position:relative;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  margin-bottom:5px;
}

.slick-slider .course-card-img-top {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
}

/* -------------------- PAGE STYLING ----------------------- */

#page-content{
    margin: 0 1rem;
}
.container-fluid{
    max-width: 1380px;
}

/* -------------------- NAV STYLING -------------------------- */

.pagelayout-dashboard .breadcrumb-nav{
    display:none;
}
.totaraNav .totaraNav_prim{
    padding: 0px 0px 0px 0px;
    background: #f9f9f9 !important;
}

.totaraNav_prim--toggleNav .totaraNav_prim--toggleNav_target span{
    color:#443b62;
}

.totaraNav_prim--toggleNav{
align-self: center;
}
.totaraNav_prim--list .navExpand--list, .totaraNav_prim {
    background-color: #f9f9f9;
    border-radius: 10px;
}


#page-content {
    padding: 30px 0px;
}

.totaraNav nav,  .breadcrumb-container>.row{
    padding: 30px 0px 0px 0px;
}


.totaraNav_prim--list_item{
   -webkit-box-align: center;
       -ms-flex-align: center;
           align-items: center;
}

.totaraNav_prim--list {
    margin: 0 auto;
}

.totaraNav_prim--list a:hover {
    background: transparent;
}

.totaraNav_prim--list a:focus{
    background: transparent;
    color: #ffffff;
}

.totaraNav_prim--list_item_selected a.totaraNav_prim--list_item_link{
      color: #eaab34 !important;
      background-color: transparent;
}

.totaraNav_prim--list  a.totaraNav_prim--list_item_link, .navExpand--listSecond a.navExpand--list_item_link{
    color: #443b62;
    font-weight:600;
    font-size: .8rem;
    letter-spacing:0.8px
}

.totaraNav_prim--list a:hover .totaraNav_prim--list_item_label {
    color: #eaab34;
}

.totaraNav_prim--list a, .totaraNav_prim--list a:visited{
    color: #443b62;
    font-weight: 400;
}


a.totaraNav_prim--list_item_link{
    color: #443b62;
    font-weight: 600;
}

.totaraNav_prim--list .totaraNav_prim--list_item_link:hover, .totaraNav_prim--list a:hover  {
    color: #eaab34;
}



.totaraNav_prim .masthead_logo--header_img {
    height: 6em;
    padding: 0.75em 0px 0.75em 0px;
    margin-right: auto;
    display: block;
    position: relative;
}



.totaraNav_prim--side .usermenu a.toggle-display{
    color: #443b62;
}


.totaraNav_prim--side{
    color:#443b62;
    margin: auto 0;
}


.totaraNav_prim--side .popover-region .nav-link:focus, .totaraNav_prim--side .popover-region .nav-link:hover{
    background-color: #ffffff;
    color:#CFD0D3;
}

.totara_core__QuickAccess h3.totara_core__QuickAccess_group-title{
    color:#CFD0D3;
}



.headerSection{
    display:none;
}
.headerSection.active{
    display:block;
    min-height: 350px;
    -webkit-box-ordinal-group: 3;
        -ms-flex-order: 2;
            order: 2;
    background-size:cover;
    background-position:center;
}

.totaraNav .totaraNav_sub {
    background: #e9e8ec;
    padding: 5px 0px 5px 0px;
}

.totaraNav_sub--list_item .totaraNav_sub--list_item_link {
    background: transparent;
    color: #443b62;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.8px;
}

.totaraNav_sub--list_item_selected .totaraNav_sub--list_item_link .totaraNav_sub--list_item_label {
    color:#443b62;
    background-color: #f4f2f2;
    padding: 5px 15px;
    border-radius: 50px;
}

#id_config_texteditable .headerInfo{
display:block;
}

.headerInfo{
    display:none;
}

.totaraNav_prim--side .usermenu .toggle-display:hover {
    background: #f9f9f9;
}

.totaraNav_prim--side .popover-region .nav-link:focus, .totaraNav_prim--side .popover-region .nav-link:hover {
    background-color: #f9f9f9;
    color: #6c6190;
}

.totaraNav.scrolled{
  display:block;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 100000;
  font-size:2px !important;

}

.totaraNav.scrolled nav{
  font-size:10px !important;

}
.totaraNav.scrolled .totaraNav_prim--list  a.totaraNav_prim--list_item_link, .totaraNav.scrolled .navExpand--list_item_label{
    font-size:10px;
}

.totaraNav.scrolled .totaraNav_prim .masthead_logo--header_img {
    height: 3em;
    padding: 0.25em 0px 0.25em 0px;
}

.totaraNav.scrolled .totaraNav_sub--list{
  line-height:1;
}

.totaraNav_sub--list {
    margin: 0;
    vertical-align: middle;
    display: flex;
    align-items: center;
}

.totaraNav_prim .totaraNav--expand_indent {
    display: inline-block;
    min-width: 10px;
}

.totaraNav_prim--side .usermenu a.toggle-display:hover, .jsenabled .usermenu .moodle-actionmenu.show{
background: #f9f9f9;
color:#443b62;
}


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

#page-footer{
    display:none;
}

.zishi-footer{
    padding: 20px 0px;
    background-color: #f9f9f9;
    margin:0px;
}

.zishi-footer .social-list svg{
    width:35px;
}

.logo-container .footer-logo {
    max-height:100px;
}

.logo-container{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}



.zishi-footer h5{
    font-weight:600;
    margin-bottom: 20px;
    color:#443b62;
}

.zishi-footer ul{
    flex-wrap: wrap;
    margin-left: 0;
}


.zishi-footer li a {
    color: #696969;
    font-weight: 500;
    font-size: 12px;
}

.copyright{
    color:#696969;
    font-size:12px;
}

/* --------------------- TRAINER REPORTS PAGE ----------------------- */

.path-report-myfeedback #region-main {
    width: 100%;
    left: 0;
}

/* ------------------------ HOMEPAGE CARDS ------------------- */
.homepage-header > .row{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}

.home-featured-courses{
    max-width:1180px;
  margin: 0 auto;
}
.home-featured-courses .course-catalogue{
  display: block;
  position:relative;
  margin-bottom: 40px;
  padding-left:15px;
  padding-right:15px;
  margin-top: 40px;
}

.home-featured-courses h3{
  display: inline-block;
  position:relative;
  margin-top: 5px !important;
}

.home-featured-courses .course-catalogue-button{
  color: #393253;
  padding: 10px 25px;
  border: 1px solid #393253;
  border-radius: 25px;
  float: right;
  display: inline-block;
  position:relative;
}


.home-featured-courses .course-card {
    width: 100%;
    display: block;
    border: 1px solid #e4e4e4;
    border-radius: 15px;
    overflow: hidden;
    -webkit-box-shadow: 0px 0px 20px 1px rgba(0, 0, 0, 0.1);
            box-shadow: 0px 0px 20px 1px rgba(0, 0, 0, 0.1);
}

.home-featured-courses .course-card-body{
  padding:15px;
}

.home-featured-courses h5.course-card-title{
  font-weight:700;
  color: #393253;
  font-size: .9rem;
}

.home-featured-courses .course-card-text{
  font-size:12px;
  font-weight: 100;
  color: #666;
  overflow: hidden;
  -o-text-overflow: ellipsis;
     text-overflow: ellipsis;
  height: 17px;
}

.home-featured-courses .course-card-details{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position:relative;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  margin-bottom:5px;
  height:100%;
}

.home-featured-courses .course-card-img-top{
  width:100%;
}

.home-featured-courses .course-time{
  float:right;
  color: #12bb9a;
  background-color:#e5f8f4;
  padding: 3px 20px;
  border-radius: 20px;
  display: inline-block;
  height:100%;
}
.home-featured-courses .course-category{
  display: inline-block;
  margin: 3px 0px 0px 0px;
}

/* --------------------- COURSE CARDS -------------------- */

.home-featured-courses {
    max-width: 1180px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin: 0 auto;
    -ms-flex-preferred-size: 33.333%;
        flex-basis: 33.333%;
    position: relative;
    -ms-flex-wrap:wrap;
        flex-wrap:wrap;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
}

.my-learning-container #section-container>div{
padding:0;
}

#page-admin-report-customsql-view h2{
margin:40px 0px 40px 0px;
}

#section-container>div{
    min-width: 33%;
    padding:15px;
}

#page-course-view-topics #section-container .course-category{
    color: #999;
}

.single-section .section-navigation .jumpmenu, .section-navigation.navigationtitle{
display: none !important; 
}

.course-content .single-section .section-navigation {
    display: block;
    padding: .5em;
    margin-bottom: -.5em;
    margin-top: 15px;
}

.section .activity.modtype_label.label{
background-color: #f1f1f1;
padding: 1em 2em;
}

.section .activity.modtype_label.label{
    margin-top:2em;
}

.section .activity.modtype_label.label ~ .activity.modtype_label.label{
margin-top:4em;
}



.section li.activity{
background-color: #f8f8f8;
padding: 1em 2em 1em 2em;
}

.modtype_label h3{
font-weight: 600;
}

.modtype_label p{
    font-weight:200;
}

.section .activity.modtype_label .contentwithoutlink{
    padding-right:0px;
}

.locked .card-img-container {
    position: relative;
}
.locked .card-img-container:after {
    background-color: rgba(255,255,255,0.39);
    background-size: cover;
    content: "\f023";
    font-family: 'FontAwesome'!important;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 10;
    height: 100%;
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-pack:center;
        -ms-flex-pack:center;
            justify-content:center;
    font-size:100px;
    color:rgba(0, 0, 0, 0.5);
    -webkit-box-align:center;
        -ms-flex-align:center;
            align-items:center;
    border-radius: 15px 15px 0px 0px;
}

.completed .card-img-container {
    position: relative;
}


/* -------------------- CATALOGUE ------------------- */
.tw-catalogItemNarrow {
    border: 1px solid #a8b7c7;
    color: #443b62;
    display: block;
    position: relative;
    -webkit-transition: -webkit-box-shadow .2s ease-in-out;
    transition: -webkit-box-shadow .2s ease-in-out;
    -o-transition: box-shadow .2s ease-in-out;
    transition: box-shadow .2s ease-in-out;
    transition: box-shadow .2s ease-in-out, -webkit-box-shadow .2s ease-in-out;
    border: 1px solid #e4e4e4;
    border-radius: 15px;
    overflow: hidden;
    -webkit-box-shadow: 0px 0px 10px 1px rgb(0 0 0 / 10%);
            box-shadow: 0px 0px 10px 1px rgb(0 0 0 / 10%);
}

.tw-catalogItemNarrow__image {
    padding-top: 50%;
    position: relative;
}

 .tw-catalog .progress .bar{
    float: left;
    width: 0;
    height: 10px;
    font-size: 12px;
    line-height: 20px;
    color: #fff;
    text-align: center;
    border:none;
    -webkit-box-shadow: inset 0 -1px 0 rgb(0 0 0 / 15%);
            box-shadow: inset 0 -1px 0 rgb(0 0 0 / 15%);
    -webkit-transition: width .6s ease;
    -o-transition: width .6s ease;
    transition: width .6s ease;
    background-color: #443b62;
    -webkit-box-shadow: none;
            box-shadow: none;
}

 .tw-catalog .progress{
    height:10px;
    border:none;
}
 .tw-catalog .progressbar__text{
display:none;
}

.section .activity .availabilityinfo, .section .activity .contentafterlink {
    margin-top: .5em;
    margin-left: 0px;
}

#page-admin-report-customsql-view .breadcrumb-container{
    display:none;
}

/* --------------------- MOBILE -----------------------------*/
@media (min-width: 992px){
.totaraNav_prim--list_item_selected a.totaraNav_prim--list_item_link  {
    border-bottom: 1px solid rgb(255 255 255 / 0%);
    margin-bottom: -1px;
}

.totaraNav--list_item_expanded>a.totaraNav_prim--list_item_link {
    background: transparent;
}


.totaraNav_prim--list_item_link {
    padding: 1.2rem 1.6rem;
}

.totaraNav_prim>.container-fluid {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 25% 25% 25% 25%;
    grid-template-columns: auto auto auto auto;
            grid-template-areas:
        "logo menu menu header";
    grid-area: main;
    width: 100%;
}

.totaraNav_prim .masthead_logo {
    grid-area: logo;
}

.totaraNav_prim--list {
    grid-area: menu;
}

.totaraNav_prim--side {
    -ms-grid-column-align: end;
        justify-self: end;
    grid-area: header;

}

.totaraNav_prim--list {
    text-transform:uppercase;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    grid-auto-flow: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}


.totaraNav_prim .masthead_logo {
        -ms-grid-row: 1;
        -ms-grid-row-span: 2;
        -ms-grid-column: 1;
}

.totaraNav_prim--list {
        -ms-grid-row: 2;
        -ms-grid-column: 2;
        -ms-grid-column-span: 3;
}

.totaraNav_prim--side {
    -ms-grid-row: 1;
    -ms-grid-column: 4;
    vertical-align: middle;
    justify-content: center;
    -webkit-box-align: center;
    grid-auto-flow: center;
    align-items: center;
}

}
@media (min-width: 992px){

.totaraNav_prim .masthead_logo {
        -ms-grid-row: 1;
        -ms-grid-column: 1;
}

.totaraNav_prim--list {
        -ms-grid-row: 1;
        -ms-grid-column: 2;
        -ms-grid-column-span: 2;
}

.totaraNav_prim--side {
        -ms-grid-row: 1;
        -ms-grid-column: 4;
}
}

.single-card{
    min-height: 340px;
    margin-bottom: 1.75rem;
    padding-bottom: 50px;
    width: 100%;
    -webkit-box-shadow: 0 0 8px #ddd;
            box-shadow: 0 0 8px #ddd;
    border-radius: 2px;
    background-color: #fff;
    position: relative;
    padding: 1rem;
    background-size:cover;
    -webkit-box-flex: 0;
        -ms-flex: 0 0 49%;
            flex: 0 0 49%;
    max-width: 49%;
    display: -webkit-inline-box!important;
    display: -ms-inline-flexbox!important;
    display: inline-flex!important;
    -webkit-box-sizing:border-box;
            box-sizing:border-box;
    margin:1%;
}

.single-card:nth-of-type(odd){
    margin:1% 0% 1% 1% !important;
}

.single-card:nth-of-type(even){
    margin:1% 1% 1% 0% !important;
}

.single-card a{
    font-family: trajan-pro-3, serif !important;
    width:100%;
    height: 100%;
    top:0px;
    left:0px;
    position: absolute;
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    text-align: center;
    vertical-align:middle;
    -webkit-box-pack:center;
        -ms-flex-pack:center;
            justify-content:center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    color:white;
    font-size:1.5em;
    font-weight:regular;
}

.single-card:nth-of-type(4n+1) a{
    background-color: #337ab76e;
}
.single-card:nth-of-type(4n+2) a{
    background-color: #b733336e;
}
.single-card:nth-of-type(4n+3) a{
    background-color: #33b74a6e;
}
.single-card:nth-of-type(4n+4) a{
    background-color: #b7339a6e;
}


.section-summary .section-summary-activities{
    display:none;
}

@media screen and (min-width: 1024px){
.content-only .single-card:nth-of-type(1n+0){
    min-height: 340px;
    margin-bottom: 1.75rem;
    padding-bottom: 50px;
    width: 100%;
    -webkit-box-shadow: 0 0 8px #ddd;
            box-shadow: 0 0 8px #ddd;
    border-radius: 2px;
    background-color: #fff;
    position: relative;
    padding: 1rem;
    background-size:cover;
    -webkit-box-flex: 0;
        -ms-flex: 0 0 32%;
            flex: 0 0 32%;
    max-width: 32%;
    display: -webkit-inline-box!important;
    display: -ms-inline-flexbox!important;
    display: inline-flex!important;
    -webkit-box-sizing:border-box;
            box-sizing:border-box;
    margin:1%;
}

.content-only .single-card:nth-of-type(3n+2){
    margin:0.7% 0.7% 0.7% 0% !important;
}

.content-only .single-card:nth-of-type(3n+0){
    margin:0.7% 0.7% 0.7% 0.7% !important;
}


.content-only .single-card:nth-of-type(3n+1){
    margin: 0.7% 0% 0.7% 0.7% !important;
}

    .zishi-footer>.container-fluid>.row{
        display:-webkit-box;
        display:-ms-flexbox;
        display:flex;
    }
}

@media screen and (max-width: 768px) {
body#page-totara-dashboard-2 .headerSection.active .container-fluid{
    display: block;
}
}

@media screen and (max-width: 480px){
.content-only .single-card{
    min-height: 340px;
    margin-bottom: 1.75rem;
    padding-bottom: 50px;
    width: 100%;
    -webkit-box-shadow: 0 0 8px #ddd;
            box-shadow: 0 0 8px #ddd;
    border-radius: 2px;
    background-color: #fff;
    position: relative;
    padding: 1rem;
    background-size:cover;
    -webkit-box-flex: 0;
        -ms-flex: 0 0 99%;
            flex: 0 0 99%;
    max-width: 100%;
    display: -webkit-inline-box!important;
    display: -ms-inline-flexbox!important;
    display: inline-flex!important;
    -webkit-box-sizing:border-box;
            box-sizing:border-box;
    margin:0.5%;
}

.headerSection.active {
    display: block;
    min-height: 150px;

}

.totaraNav nav,  .breadcrumb-container>.row,  #page-content {
    padding: 10px 0px;
}

.totaraNav_prim>.container-fluid {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    justify-content: center;

}

.totaraNav.scrolled nav{
    font-size:12px !important;
}

.scrolled .totaraNav_prim .masthead_logo{
    display:none;
}

.totaraNav_prim .masthead_logo {
    -ms-flex-preferred-size: 80%;
    flex-basis: 0%;
    -ms-flex-positive: 1;
    flex-grow: 0;
    margin: auto 0;
    vertical-align: top;
}

.totaraNav_prim--toggleNav {
    position:absolute;
    left:10px;
    top:50%;
    transform: translateY(-50%);
}




}

.trajan{
    font-family: trajan-pro-3, serif !important;
}

.headerImg{
display:none !important;
}


/* --------------------------- IE ------------------------------------ */
.ie .masthead_logo--header_link {
    display: block;
    height: 6em;
}

.ie .totaraNav_prim--list{
    height:6em;
}

.ie .totaraNav.scrolled{
position: fixed;  
width:100%;
}

.ie .totaraNav.scrolled .masthead_logo--header_link {
    display: block;
    height: 3em;
}

.ie .totaraNav.scrolled .totaraNav_prim--list{
    height:3em;
}
/** END - Original styles for Zishi with updates from Catalyst **/

/** WR446993 - CATALYST styles for T18 upgrade - DO NOT REMOVE **/

/** General styling **/
body, h1, h2, h3, h4, h5, h6, p, ul, ol, dl, input, textarea {
    color: #333366;
}
h1, h2, h3, h4, h5, h6 {
    font-family: 'Open Sans', -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif !important;
}
a:link:not([class*="tw-"]),
a:link:not([class^="tw-"]),
a:hover:not([class*="tw-"]),
a:hover:not([class^="tw-"]),
a:active:not([class*="tw-"]),
a:active:not([class^="tw-"]),
a:visited:not([class*="tw-"]),
a:visited:not([class^="tw-"])  {
    color: #443b62;
}
.block,
.totaraNav_prim--list .navExpand--list, .totaraNav_prim {
    border-radius: 0 !important;
}
 button, .btn, .button, input.form-submit,
.tui-formBtn, .tui-iconBtn, .tui-actionLink, .tui-toggleSwitch__btn,
input[type="button"], input[type="submit"], input[type="reset"] {
    font-weight: normal;
    border-radius: 3px;
}
.btn,
a.btn,
button:not(.tui-toggleBtn):not(.ui-button):not([class*="atto_"]):not(.alert-close),
input.submit,
#id_buttonfield,
a.link-as-button,
a.tui-actionLink,
input[type="submit"],
input[type="reset"],
input[type="button"],
#page-footer a:link.btn,
.open > .dropdown-toggle.btn-default,
.tw-containerCourse-enrolmentBanner__enrolButton {
    color: #FFF !important;
    background-color: #443b62;
    border-color: #443b62;
}

.btn:focus, .btn:hover,
a.btn:focus, a.btn:hover,
button:focus, button:hover,
input.submit:focus, input.submit:hover,
#id_buttonfield:focus, #id_buttonfield:hover,
a.link-as-button:focus, a.link-as-button:hover,
a.tui-actionLink:focus, a.tui-actionLink:hover,
input[type="submit"]:focus, input[type="submit"]:hover,
input[type="reset"]:focus, input[type="reset"]:hover,
input[type="button"]:focus, input[type="button"]:hover,
.tw-containerCourse-enrolmentBanner__enrolButton:focus,
.tw-containerCourse-enrolmentBanner__enrolButton:hover,
.open > .dropdown-toggle.btn-default:focus,
.open > .dropdown-toggle.btn-default:hover,
#page-footer a:link.btn:focus, #page-footer a:link.btn:hover {
    color: #FFF;
    background-color: #332c49;
}

label, .mform .fitem .fitemtitle .fstaticlabel, .fitem > fieldset > legend .legend {
    font-weight: 700;
}

/** Page layouts **/
#page-navbar {
    padding: 0 15px;
}
#region-main {
   padding-bottom: 20px;
}

/** Totara navigation and logo **/
.totaraNav_prim .masthead_logo--header {
    margin: 0 1rem;
}
.totaraNav_prim--side .usermenu {
    display: flex;
    align-items: center;
}
.totaraNav_prim--side .usermenu .caret {
    display: inline-block;
    margin-left: 7px;
}
.totaraNav_prim--side .usermenu .userpicture {
    height: 2rem;
}
.jsenabled .moodle-actionmenu[data-enhance] {
    margin: auto;
}
.jsenabled .totaraNav_prim--side .usermenu .toggle-display.textmenu {
    align-items: center;
    padding: .4rem;
}
.jsenabled .totaraNav_prim--side .usermenu .toggle-display.textmenu:focus,
.jsenabled .totaraNav_prim--side .usermenu .toggle-display.textmenu:hover {
    color: #ffffff;
    background-color: #333366;
}
.totaraNav_prim--list_item_label {
    font-size: .8rem !important;
}
.totaraNav_prim--side .popover-region .nav-link {
    font-size: .9rem;
}
.totaraNav_prim--side .popover-region .flex-icon.tfont-var-gear::before,
.totaraNav_prim .totaraNav--expand_indent .totaraNav--icon_chevron::before {
    font-family: "FontAwesome";
    font-weight: 600;
    color: #443b62;
    content: "\f078";
}
.totaraNav_prim .totaraNav--expand_indent .totaraNav--icon_chevron.tfont-var-chevron-up::before {
    content: "\f077";
}
.totaraNav_prim--side .popover-region .flex-icon.tfont-var-gear::before {
    content: "\f013";
}
.totaraNav_prim--side .popover-region .nav-link:focus .flex-icon.tfont-var-gear::before,
.totaraNav_prim--side .popover-region .nav-link:hover .flex-icon.tfont-var-gear::before {
    color: #6c6190;
}
 .totaraNav_prim--list a:hover .totaraNav--icon_chevron::before,
 .totaraNav_prim--list .totaraNav_prim--list_item_selected .totaraNav--icon_chevron::before,
.totaraNav_prim--list .totaraNav_prim--list_item_link:hover .totaraNav--icon_chevron::before {
    color: #eaab34 !important;
}
.totaraNav_prim--list_item_link .totaraNav_prim--list_item_label::after,
.totaraNav_prim--list_item_selected .totaraNav_prim--list_item_label::after,
.totaraNav_prim--list_item_link:focus .totaraNav_prim--list_item_label::after,
.totaraNav_prim--list_item_link:hover .totaraNav_prim--list_item_label::after,
.totaraNav_prim--list_item_link:active .totaraNav_prim--list_item_label::after {
    height: 0 !important;
    border: none !important;
    transition: none;
}

/** Totara sub-navigation **/
.totaraNav_sub--list_item_selected {
    border: none !important;
}
.totaraNav_sub--list_item_selected:focus,
.totaraNav_sub--list_item_selected:hover,
.totaraNav_sub--list_item .totaraNav_sub--list_item_link:focus,
.totaraNav_sub--list_item .totaraNav_sub--list_item_link:hover {
    background: transparent;
}

/** Totara system notification **/
.tui-notificationToast.tui-notificationToast--success,
.tui-notificationToast.tui-notificationToast--success .tui-notificationToast__icon {
    background-color: #443b62;
}
.alert {
    border-radius: 8px 0 8px 0;
}
.alert-icon {
    border-radius: 8px 0 0 0;
}

/** Blocks **/
.block .block-header h2,
#dockeditempanel .dockeditempanel_content h2,
#quickaccess-popover-container.totara_core__QuickAccess h3.totara_core__QuickAccess_group-title {
    text-transform: uppercase;
    font-size: 12.6px;
    font-weight: 200;
    color: #6a7884;
}

/** Catalogue cards **/
.tw-catalogItemNarrow__title {
    font-size: .9rem;
}

/** Assignment Grader **/
.assignfeedback_editpdf_widget .pageheader select,
.assignfeedback_editpdf_widget .pageheader button {
    color: inherit !important;
}
.path-mod-assign .assignfeedback_editpdf_widget .pageheader button,
.path-mod-assign .assignfeedback_editpdf_widget .pageheader select {
    line-height: 1;
}

form input.float_search__bar:focus {
    border-color: #66afe9;
    outline: 0;
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
}

/** Login page **/
.path-login hr,
#login_hero-image {
    display: none;
}
.path-login #page {
    padding-top: 20px;
    background: transparent;
}
.loginbox.twocolumns .loginpanel {
    padding: 20px 0;
    border: none;
}
.loginbox.twocolumns .signuppanel {
    padding: 20px;
}
.loginbox.twocolumns .loginpanel h2 {
    margin: 0;
    padding: 30px 20px 10px;
    background: #f5f5f5;
    border: 1px solid #e3e3e3;
    border-bottom: none;
    border-radius: 4px 4px 0 0;
}
.loginbox.twocolumns .loginpanel .loginsub {
    padding: 0 20px 20px;
    background: #f5f5f5;
    border: 1px solid #e3e3e3;
    border-top: none;
    border-radius: 0 0 4px 4px;
}
.loginbox .loginform .form-input {
    margin-bottom: 5px;
}
.loginbox .loginform .form-label label {
    font-weight: 700;
}
.loginbox #loginbtn {
    width: 100%;
    color: #fff;
    font-weight: 700;
    margin: 10px 0;
    background-color: #008287;
}
@media screen and (min-width: 768px) {
    .loginbox.twocolumns .loginpanel {
        width: 25%;
    }
    .loginbox.twocolumns .signuppanel {
        position: relative;
        width: 66%;
        left: 8.3%;
        padding: 20px;
    }
}



/* ============================================================================
   ZISHI Lesson Styles — for ZISHI GFM Programme 1 (and future ZISHI lessons)
   ============================================================================
   Install: paste at the bottom of the theme's Custom CSS field
            (Catalyst-managed stylesheet on the active Totara theme).
   Scope:   every selector below is namespaced under .zishi-lesson or .fi-embed
            so styles only apply to elements with these classes. The rest of
            the platform is unaffected.
   Reverse: delete this entire block from the Custom CSS field and save.
            The platform reverts immediately.

   Brand palette (from the existing Catalyst-managed Totara stylesheet):
     Primary deep purple   #443b62   buttons, headings, accents
     Secondary text colour #333366   body copy
     Accent gold           #eaab34   hover states, callout highlights
     Background light grey #f9f9f9   subtle section fills
     Border light          #e4e4e4   card and panel borders

   Lesson typography:
     Body uses the platform default (Open Sans inherited from body styles)
     Display headings use Georgia serif for editorial feel inside lessons,
     overriding the platform's !important Open Sans rule with !important.

   Last updated: 2026-04-28 — initial release for GFM Programme 1
   ========================================================================== */


/* ============================================================================
   SECTION 1 — Lesson container and chrome
   ============================================================================ */

.zishi-lesson {
  max-width: 1140px;
  margin: 0 auto;
  padding: 1.5rem 1.25rem 3rem;
  font-size: 1.0625rem;
  line-height: 1.65;
  color: #333366;
}

.zishi-lesson * {
  box-sizing: border-box;
}


/* ----- Header ------------------------------------------------------------ */

.zishi-lesson .lesson-header {
  margin-bottom: 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 3px solid #c8a5ed;
}

.zishi-lesson .lesson-meta {
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #5a5a6a;
  margin: 0 0 0.5rem;
  font-weight: 600;
}

.zishi-lesson .lesson-title {
  font-family: Georgia, "Iowan Old Style", "Palatino Linotype", "Times New Roman", serif !important;
  font-size: 2.125rem !important;
  line-height: 1.2;
  color: #443b62 !important;
  margin: 0 0 1rem !important;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.zishi-lesson .lesson-context {
  font-size: 1.125rem;
  line-height: 1.55;
  color: #333366;
  margin: 0;
  font-style: italic;
  border-left: 3px solid #443b62;
  padding-left: 1rem;
}


/* ----- Objectives and structure callout boxes ---------------------------- */

.zishi-lesson .lesson-objectives,
.zishi-lesson .lesson-structure {
  background: #f4f0fb;
  border-left: 4px solid #443b62;
  padding: 1.25rem 1.5rem;
  margin: 0 0 2rem;
  border-radius: 0 4px 4px 0;
}

.zishi-lesson .lesson-objectives h2,
.zishi-lesson .lesson-structure h2 {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Open Sans", sans-serif !important;
  font-size: 0.9375rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #443b62 !important;
  margin: 0 0 0.75rem !important;
}

.zishi-lesson .lesson-objectives ul,
.zishi-lesson .lesson-structure ol {
  margin: 0;
  padding-left: 1.25rem;
}

.zishi-lesson .lesson-objectives li,
.zishi-lesson .lesson-structure li {
  margin-bottom: 0.5rem;
}

.zishi-lesson .lesson-structure ol li::marker {
  color: #443b62;
  font-weight: 700;
}


/* ----- Body content ------------------------------------------------------ */

.zishi-lesson .lesson-body {
  margin-bottom: 2.5rem;
}

.zishi-lesson .lesson-body h2 {
  font-family: Georgia, "Iowan Old Style", "Palatino Linotype", serif !important;
  font-size: 1.625rem !important;
  line-height: 1.3;
  color: #443b62 !important;
  margin: 2.5rem 0 0.85rem !important;
  font-weight: 700;
}

.zishi-lesson .lesson-body h2:first-child {
  margin-top: 0 !important;
}

.zishi-lesson .lesson-body h3 {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Open Sans", sans-serif !important;
  font-size: 1.125rem !important;
  font-weight: 700 !important;
  color: #443b62 !important;
  margin: 1.75rem 0 0.5rem !important;
}

.zishi-lesson .lesson-body p {
  margin: 0 0 1.1rem;
}

.zishi-lesson .lesson-body em {
  font-style: italic;
  color: #443b62;
}

.zishi-lesson .lesson-body strong {
  font-weight: 700;
}

.zishi-lesson .lesson-body ul,
.zishi-lesson .lesson-body ol {
  margin: 0 0 1.25rem 0;
  padding-left: 1.5rem;
}

.zishi-lesson .lesson-body li {
  margin-bottom: 0.4rem;
}

.zishi-lesson .lesson-body a {
  color: #443b62;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}

.zishi-lesson .lesson-body a:hover,
.zishi-lesson .lesson-body a:focus {
  color: #eaab34;
  text-decoration-thickness: 2px;
}

.zishi-lesson .lesson-body blockquote {
  margin: 1.5rem 0;
  padding: 0.5rem 0 0.5rem 1.25rem;
  border-left: 4px solid #eaab34;
  font-style: italic;
  color: #333366;
}


/* ----- Tables (for reference data, comparison tables, job aids) ---------- */

.zishi-lesson .lesson-body table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5rem 0;
  font-size: 0.95rem;
}

.zishi-lesson .lesson-body caption {
  text-align: left;
  font-weight: 700;
  margin-bottom: 0.5rem;
  color: #443b62;
  caption-side: top;
}

.zishi-lesson .lesson-body th,
.zishi-lesson .lesson-body td {
  text-align: left;
  padding: 0.65rem 0.85rem;
  border-bottom: 1px solid #c4c3c8;
  vertical-align: top;
}

.zishi-lesson .lesson-body th {
  background: #f4f0fb;
  font-weight: 700;
  color: #443b62;
}


/* ----- Recap panel ------------------------------------------------------- */

.zishi-lesson .lesson-recap {
  background: #f9f9f9;
  padding: 1.5rem 1.75rem;
  margin: 2.5rem 0 1rem;
  border-radius: 6px;
  border-top: 4px solid #eaab34;
}

.zishi-lesson .lesson-recap h2 {
  font-family: Georgia, "Iowan Old Style", "Palatino Linotype", serif !important;
  font-size: 1.25rem !important;
  color: #443b62 !important;
  margin: 0 0 0.85rem !important;
  font-weight: 700;
}

.zishi-lesson .lesson-recap ul {
  margin: 0;
  padding-left: 1.25rem;
}

.zishi-lesson .lesson-recap li {
  margin-bottom: 0.55rem;
}

.zishi-lesson .lesson-recap li::marker {
  color: #443b62;
}


/* ----- Footer ------------------------------------------------------------ */

.zishi-lesson .lesson-footer {
  margin-top: 2.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid #c4c3c8;
}

.zishi-lesson .lesson-next {
  margin: 0;
  font-size: 0.95rem;
  color: #5a5a6a;
}

.zishi-lesson .lesson-next::before {
  content: "→ ";
  color: #443b62;
  font-weight: 700;
}


/* ----- Embed placeholders (animation, H5P) ------------------------------- */

.zishi-lesson .embed-placeholder {
  background: #0B1133;
  color: #ffffff;
  padding: 1.75rem 1.75rem 1.5rem;
  border-radius: 6px;
  margin: 2rem 0;
  border: 1px dashed #c8a5ed;
}

.zishi-lesson .embed-placeholder p {
  margin: 0 0 0.75rem;
  color: #ffffff;
  font-size: 0.95rem;
}

.zishi-lesson .embed-placeholder p:last-child {
  margin-bottom: 0;
  color: #c4c3c8;
  font-size: 0.875rem;
  font-style: italic;
}

.zishi-lesson .embed-placeholder strong {
  color: #eaab34;
  font-weight: 700;
  display: block;
  margin-bottom: 0.4rem;
  font-size: 1rem;
}

.zishi-lesson .embed-animation::before,
.zishi-lesson .embed-h5p::before {
  display: inline-block;
  margin-right: 0.5rem;
  color: #c8a5ed;
  font-size: 1.1rem;
  vertical-align: -0.05em;
}

.zishi-lesson .embed-animation::before { content: "▶"; }
.zishi-lesson .embed-h5p::before { content: "✦"; }


/* ----- Author-visible TODO markers (remove before go-live) --------------- */

.zishi-lesson .todo {
  background: #fff8dc;
  border: 2px dashed #eaab34;
  padding: 0.75rem 1rem;
  margin: 1rem 0;
  border-radius: 4px;
  color: #6b5500;
  font-size: 0.95rem;
}

.zishi-lesson .todo::before {
  content: "TODO: ";
  font-weight: 700;
  letter-spacing: 0.04em;
}


/* ----- Responsive (mobile) ----------------------------------------------- */

@media (max-width: 600px) {
  .zishi-lesson {
    padding: 1rem 1rem 2rem;
    font-size: 1rem;
  }
  .zishi-lesson .lesson-title {
    font-size: 1.625rem !important;
  }
  .zishi-lesson .lesson-context {
    font-size: 1.05rem;
  }
  .zishi-lesson .lesson-body h2 {
    font-size: 1.35rem !important;
    margin-top: 2rem !important;
  }
  .zishi-lesson .lesson-body h3 {
    font-size: 1.05rem !important;
  }
  .zishi-lesson .embed-placeholder {
    padding: 1.25rem 1rem;
    margin: 1.5rem 0;
  }
  .zishi-lesson .lesson-objectives,
  .zishi-lesson .lesson-structure,
  .zishi-lesson .lesson-recap {
    padding: 1.1rem 1.25rem;
  }
}


/* ----- Reduced motion (system-level accessibility) ----------------------- */

@media (prefers-reduced-motion: reduce) {
  .zishi-lesson *,
  .zishi-lesson *::before,
  .zishi-lesson *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}


/* ----- Print (downloadable workbook job aids and accessibility) ---------- */

@media print {
  .zishi-lesson {
    max-width: 100%;
    padding: 0;
    font-size: 11pt;
  }
  .zishi-lesson .embed-placeholder {
    border: 1px solid #999;
    background: #fff;
    color: #000;
    page-break-inside: avoid;
  }
  .zishi-lesson .embed-placeholder p,
  .zishi-lesson .embed-placeholder strong {
    color: #000;
  }
  .zishi-lesson .lesson-footer {
    display: none;
  }
  .zishi-lesson .lesson-recap {
    page-break-inside: avoid;
  }
}


/* ============================================================================
   SECTION 2 — Animation embed (financial intermediation flow, M01-L02)
   ============================================================================
   Used inside .zishi-lesson .lesson-body. The .fi-embed wrapper plus all
   children are scoped to keep styles isolated from the rest of the lesson.
   Future animations follow the same pattern with their own prefix.
   ========================================================================== */

.zishi-lesson .fi-embed {
  --fi-navy: #0A1B3D;
  --fi-navy-line: #1F3470;
  --fi-white: #FFFFFF;
  --fi-muted: #B9C2D6;
  --fi-grey: #C4C3C8;
  --fi-lilac: #C8A5ED;
  --fi-yellow: #F2C964;
  --fi-w: 1140px;
  --fi-h: 520px;

  width: 100%;
  max-width: var(--fi-w);
  margin: 2rem auto;
  background: var(--fi-navy);
  color: var(--fi-white);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  position: relative;
  border-radius: 4px;
  overflow: hidden;
  aspect-ratio: 1140 / 520;
  contain: content;
  isolation: isolate;
}

.zishi-lesson .fi-embed,
.zishi-lesson .fi-embed *,
.zishi-lesson .fi-embed *::before,
.zishi-lesson .fi-embed *::after {
  box-sizing: border-box;
}

.zishi-lesson .fi-embed::before {
  content: "";
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,0.035) 1px, transparent 1px);
  background-size: 22px 22px;
  pointer-events: none;
  z-index: 0;
}

.zishi-lesson .fi-stage {
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* Caption strip */
.zishi-lesson .fi-caption {
  position: absolute;
  left: 32px; right: 32px; top: 48px;
  font-family: Georgia, "Times New Roman", Times, serif;
  font-size: 14px;
  line-height: 1.45;
  color: var(--fi-white);
  min-height: 44px;
  letter-spacing: 0.005em;
}

.zishi-lesson .fi-caption .lead,
.zishi-lesson .fi-caption .closer {
  position: absolute;
  left: 0; right: 0; top: 0;
  opacity: 0;
  transition: opacity 600ms ease;
  pointer-events: none;
}

.zishi-lesson .fi-caption .lead.is-on,
.zishi-lesson .fi-caption .closer.is-on {
  opacity: 1;
}

.zishi-lesson .fi-caption .closer {
  color: var(--fi-yellow);
  font-weight: 600;
}

/* Three-column layout */
.zishi-lesson .fi-cols {
  position: absolute;
  left: 32px; right: 32px;
  top: 116px; bottom: 70px;
  display: grid;
  grid-template-columns: 1fr 1.2fr 1fr;
  gap: 28px;
  z-index: 2;
}

.zishi-lesson .fi-col {
  position: relative;
  padding: 16px;
  border-radius: 4px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.06);
  transition: opacity 400ms ease;
  opacity: 0.55;
}

.zishi-lesson .fi-col.is-on {
  opacity: 1;
  border-color: rgba(200,165,237,0.45);
  background: rgba(200,165,237,0.06);
}

.zishi-lesson .fi-col__eyebrow {
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fi-lilac);
  font-weight: 700;
  margin-bottom: 4px;
}

.zishi-lesson .fi-col__title {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 18px;
  line-height: 1.2;
  font-weight: 700;
  color: var(--fi-white);
  margin: 0 0 12px;
}

.zishi-lesson .fi-col__list {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 12px;
  line-height: 1.7;
  color: var(--fi-muted);
}

.zishi-lesson .fi-col__list li::before {
  content: "·";
  color: var(--fi-lilac);
  margin-right: 8px;
  font-weight: 700;
}

/* Token pools (capital flowing) */
.zishi-lesson .fi-pool,
.zishi-lesson .fi-fill {
  position: absolute;
  bottom: 14px; left: 16px; right: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 5px;
}

.zishi-lesson .fi-token {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--fi-grey);
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 350ms ease, transform 350ms ease, background-color 350ms ease;
}

.zishi-lesson .fi-token.is-on {
  opacity: 1;
  transform: scale(1);
}

.zishi-lesson .fi-fill .fi-token.is-on {
  background: var(--fi-lilac);
}

/* Centre card and transformations */
.zishi-lesson .fi-centre-card {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 4px;
  padding: 12px;
  margin-bottom: 12px;
}

.zishi-lesson .fi-pieces {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.zishi-lesson .fi-pieces span {
  font-size: 11px;
  padding: 4px 10px;
  background: rgba(200,165,237,0.12);
  color: var(--fi-white);
  border-radius: 12px;
  border: 1px solid rgba(200,165,237,0.3);
}

.zishi-lesson .fi-transforms {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.zishi-lesson .fi-transform {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 11px;
  color: var(--fi-muted);
  opacity: 0.5;
  transition: opacity 350ms ease, color 350ms ease;
}

.zishi-lesson .fi-transform.is-on {
  opacity: 1;
  color: var(--fi-white);
}

.zishi-lesson .fi-transform__dot {
  width: 6px;
  height: 6px;
  margin-top: 5px;
  border-radius: 50%;
  background: var(--fi-lilac);
  flex-shrink: 0;
}

/* Particle canvas */
.zishi-lesson .fi-particles {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

/* Bottom control strip */
.zishi-lesson .fi-bottom {
  position: absolute;
  left: 32px; right: 32px; bottom: 22px;
  display: flex;
  align-items: center;
  gap: 14px;
  z-index: 4;
}

.zishi-lesson .fi-control {
  width: 28px;
  height: 28px;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 50%;
  color: var(--fi-white);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 0;
}

.zishi-lesson .fi-control:hover,
.zishi-lesson .fi-control:focus {
  background: rgba(255,255,255,0.18);
  outline: none;
}

.zishi-lesson .fi-progress {
  flex: 1;
  height: 2px;
  background: rgba(255,255,255,0.15);
  border-radius: 1px;
  overflow: hidden;
}

.zishi-lesson .fi-progress__fill {
  height: 100%;
  width: 0%;
  background: var(--fi-lilac);
  transition: width 200ms linear;
}

.zishi-lesson .fi-meta {
  font-size: 10.5px;
  color: var(--fi-muted);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}

.zishi-lesson .fi-logo {
  font-size: 10.5px;
  letter-spacing: 0.16em;
  color: var(--fi-muted);
  font-weight: 700;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  line-height: 1.2;
  text-align: right;
}

.zishi-lesson .fi-logo small {
  font-size: 9px;
  letter-spacing: 0.06em;
  font-weight: 400;
  color: rgba(185,194,214,0.7);
  margin-top: 1px;
}

/* Mobile sizing for animation */
@media (max-width: 600px) {
  .zishi-lesson .fi-embed {
    aspect-ratio: 380 / 520;
  }
  .zishi-lesson .fi-cols {
    left: 16px; right: 16px;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1.2fr 1fr;
    gap: 10px;
    top: 96px; bottom: 60px;
  }
  .zishi-lesson .fi-caption {
    left: 16px; right: 16px;
    font-size: 12px;
  }
  .zishi-lesson .fi-bottom {
    left: 16px; right: 16px;
  }
}


/* ============================================================================
   END ZISHI Lesson Styles
   ========================================================================== */





/* ============================================================================
   ZISHI Module Hero & Lesson Carousel — append to zishi-lesson-styles.css
   ============================================================================
   For module-level pages within course sections. The module hero is a full-
   width banner containing module identity (number, title, tagline) plus
   learning outcomes. Below it sits a horizontally scrolling carousel of
   lesson cards, each linking to a Totara activity.

   Scoped under:
     .zishi-module-hero   — the banner block at the top of a section
     .zishi-lesson-carousel — the 9-card carousel below it
     .zishi-hide-activities — utility class added to the section to hide
                              the underlying activity list

   Brand palette consistent with the rest of the stylesheet:
     #443b62 deep purple (primary)
     #c8a5ed lilac (accent)
     #eaab34 gold (highlight)
     #333366 text
     #f4f0fb light purple (panel fill)

   To install: paste this entire block at the bottom of the existing
   zishi-lesson-styles.css in the theme Custom CSS field, after the END
   marker of the previous section.
   ========================================================================== */



/* ============================================================================
   GLOBAL FIX — prevent horizontal page scroll, robust at any zoom level
   ============================================================================ */

html {
  overflow-x: hidden;
}

body {
  overflow-x: hidden;
  position: relative;
}

/* ============================================================================
   SECTION 3 — Module Hero (full-width banner)
   ============================================================================ */

.zishi-module-hero {
  --hero-navy: #1a1340;
  --hero-purple: #443b62;
  --hero-lilac: #c8a5ed;
  --hero-gold: #eaab34;
  --hero-white: #ffffff;
  --hero-fade: rgba(255,255,255,0.72);

  position: relative;
/* Full-width hero without viewport math — uses negative margins relative to a known parent */
  margin-left: calc(-1 * (100vw - 100%) / 2);
  margin-right: calc(-1 * (100vw - 100%) / 2);
  max-width: 100vw;
  margin-top: -1.5rem;
  margin-bottom: 2.5rem;
  padding: 4.5rem 2rem 4rem;
  background: linear-gradient(135deg, #1a1340 0%, #2d2658 35%, #443b62 70%, #5a4d7a 100%);
  color: var(--hero-white);
  overflow: hidden;
  isolation: isolate;
}

/* Decorative geometric shapes — built in CSS, no image required */
.zishi-module-hero::before {
  content: "";
  position: absolute;
  top: -120px;
  right: -120px;
  width: 480px;
  height: 480px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(200,165,237,0.18) 0%, rgba(200,165,237,0) 70%);
  z-index: 0;
}

.zishi-module-hero::after {
  content: "";
  position: absolute;
  bottom: -200px;
  left: -100px;
  width: 600px;
  height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(234,171,52,0.08) 0%, rgba(234,171,52,0) 60%);
  z-index: 0;
}

/* Optional decorative grid pattern */
.zishi-module-hero__pattern {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size: 48px 48px;
  z-index: 0;
  pointer-events: none;
}

.zishi-module-hero__inner {
  position: relative;
  z-index: 1;
  max-width: 1140px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
}

.zishi-module-hero__identity {
  position: relative;
}

.zishi-module-hero__eyebrow {
  font-size: 0.75rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--hero-lilac);
  font-weight: 700;
  margin: 0 0 1rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.zishi-module-hero__eyebrow::before {
  content: "";
  width: 32px;
  height: 2px;
  background: var(--hero-gold);
  flex-shrink: 0;
}

.zishi-module-hero__title {
  font-family: Georgia, "Iowan Old Style", "Palatino Linotype", "Times New Roman", serif !important;
  font-size: 3rem !important;
  line-height: 1.1 !important;
  font-weight: 700;
  margin: 0 0 1.25rem !important;
  color: var(--hero-white) !important;
  letter-spacing: -0.015em;
}

.zishi-module-hero__tagline {
  font-size: 1.15rem;
  line-height: 1.55;
  color: rgba(255,255,255,0.85);
  margin: 0;
  max-width: 95%;
}

/* Learning outcomes panel on the right */
.zishi-module-hero__outcomes {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(200,165,237,0.25);
  border-radius: 4px;
  padding: 1.75rem 1.85rem;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.zishi-module-hero__outcomes-label {
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--hero-lilac);
  font-weight: 700;
  margin: 0 0 0.85rem;
}

.zishi-module-hero__outcomes ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.zishi-module-hero__outcomes li {
  position: relative;
  padding-left: 1.65rem;
  margin-bottom: 0.7rem;
  font-size: 0.95rem;
  line-height: 1.45;
  color: rgba(255,255,255,0.9);
}

.zishi-module-hero__outcomes li:last-child {
  margin-bottom: 0;
}

.zishi-module-hero__outcomes li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--hero-gold);
}

/* Mobile: stack vertically */
@media (max-width: 900px) {
  .zishi-module-hero {
    padding: 3rem 1.5rem 2.75rem;
  }
  .zishi-module-hero__inner {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .zishi-module-hero__title {
    font-size: 2.25rem !important;
  }
  .zishi-module-hero__tagline {
    font-size: 1.05rem;
  }
  .zishi-module-hero::before {
    width: 320px;
    height: 320px;
    top: -80px;
    right: -80px;
  }
}


/* ============================================================================
   SECTION 4 — Lesson Carousel (horizontal scroll of cards)
   ============================================================================ */

.zishi-lesson-carousel {
  max-width: 1140px;
  margin: 0 auto 2.5rem;
  padding: 0 1rem;
  position: relative;
  overflow: hidden;
}

.zishi-lesson-carousel__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 1.25rem;
  padding: 0 0.25rem;
}

.zishi-lesson-carousel__heading {
  font-family: Georgia, "Iowan Old Style", "Palatino Linotype", serif !important;
  font-size: 1.5rem !important;
  font-weight: 700;
  color: #443b62 !important;
  margin: 0 !important;
}

.zishi-lesson-carousel__hint {
  font-size: 0.85rem;
  color: #5a5a6a;
  font-style: italic;
}

/* The scrolling track */
.zishi-lesson-carousel__track {
  display: flex;
  gap: 1.25rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 0.5rem 0.25rem 1.5rem;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}

/* Carousel native scrollbar — taller, more visible, with arrow buttons */
.zishi-lesson-carousel__track::-webkit-scrollbar {
  height: 14px;
}

.zishi-lesson-carousel__track::-webkit-scrollbar-track {
  background: #f4f0fb;
  border-radius: 7px;
  margin: 0 4px;
}

.zishi-lesson-carousel__track::-webkit-scrollbar-thumb {
  background: #c8a5ed;
  border-radius: 7px;
  border: 2px solid #f4f0fb;
}

.zishi-lesson-carousel__track::-webkit-scrollbar-thumb:hover {
  background: #443b62;
}

.zishi-lesson-carousel__track::-webkit-scrollbar-button:single-button {
  background-color: #f4f0fb;
  display: block;
  background-size: 10px;
  background-repeat: no-repeat;
  width: 24px;
  height: 14px;
}

/* Left arrow */
.zishi-lesson-carousel__track::-webkit-scrollbar-button:single-button:horizontal:decrement {
  background-position: center;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'><polygon points='7,1 2,5 7,9' fill='%23443b62'/></svg>");
}
.zishi-lesson-carousel__track::-webkit-scrollbar-button:single-button:horizontal:decrement:hover {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'><polygon points='7,1 2,5 7,9' fill='%23eaab34'/></svg>");
}

/* Right arrow */
.zishi-lesson-carousel__track::-webkit-scrollbar-button:single-button:horizontal:increment {
  background-position: center;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'><polygon points='3,1 8,5 3,9' fill='%23443b62'/></svg>");
}
.zishi-lesson-carousel__track::-webkit-scrollbar-button:single-button:horizontal:increment:hover {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'><polygon points='3,1 8,5 3,9' fill='%23eaab34'/></svg>");
}

/* Firefox fallback — Firefox doesn't support webkit-scrollbar styling */
.zishi-lesson-carousel__track {
  scrollbar-width: auto;
  scrollbar-color: #c8a5ed #f4f0fb;
}

/* Each lesson card */
.zishi-lesson-card {
  flex: 0 0 280px;
  min-width: 280px;
  scroll-snap-align: start;
  background: #ffffff;
  border: 1px solid #e4e4e4;
  border-radius: 8px;
  overflow: hidden;
  text-decoration: none !important;
  color: inherit !important;
  display: flex;
  flex-direction: column;
  box-shadow: 0 2px 12px rgba(68,59,98,0.06);
  transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
}

.zishi-lesson-card:hover,
.zishi-lesson-card:focus-visible {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(68,59,98,0.18);
  border-color: #c8a5ed;
  outline: none;
  text-decoration: none !important;
}

.zishi-lesson-card:focus-visible {
  outline: 2px solid #eaab34;
  outline-offset: 2px;
}

/* The card's icon panel — coloured top section with geometric icon */
.zishi-lesson-card__icon-panel {
  position: relative;
  height: 140px;
  background: linear-gradient(135deg, #443b62 0%, #5a4d7a 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.zishi-lesson-card__icon-panel::before {
  content: "";
  position: absolute;
  top: -40px;
  right: -40px;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(200,165,237,0.25) 0%, rgba(200,165,237,0) 70%);
}

.zishi-lesson-card__icon {
  position: relative;
  z-index: 1;
  width: 64px;
  height: 64px;
  color: #c8a5ed;
}

.zishi-lesson-card__icon svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Lesson number badge in top-left of card */
.zishi-lesson-card__number {
  position: absolute;
  top: 12px;
  left: 14px;
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 700;
  color: rgba(255,255,255,0.7);
  z-index: 2;
}

/* Lesson type badge in top-right */
.zishi-lesson-card__type {
  position: absolute;
  top: 12px;
  right: 14px;
  font-size: 0.65rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-weight: 600;
  color: #eaab34;
  z-index: 2;
  background: rgba(0,0,0,0.25);
  padding: 3px 9px;
  border-radius: 12px;
  border: 1px solid rgba(234,171,52,0.4);
}

/* Card body */
.zishi-lesson-card__body {
  flex: 1;
  padding: 1.1rem 1.15rem 1.15rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.zishi-lesson-card__title {
  font-size: 1rem;
  line-height: 1.35;
  font-weight: 700;
  color: #333366;
  margin: 0;
}

.zishi-lesson-card__meta {
  font-size: 0.825rem;
  color: #5a5a6a;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.zishi-lesson-card__meta-time {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

.zishi-lesson-card__meta-time::before {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  background-image: linear-gradient(to bottom, currentColor 0, currentColor 50%, transparent 50%);
  background-size: 1px 100%;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0.6;
}

.zishi-lesson-card__cta {
  margin-top: auto;
  padding-top: 0.75rem;
  font-size: 0.85rem;
  color: #443b62;
  font-weight: 700;
  letter-spacing: 0.02em;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.zishi-lesson-card__cta::after {
  content: "→";
  display: inline-block;
  transition: transform 200ms ease;
}

.zishi-lesson-card:hover .zishi-lesson-card__cta::after {
  transform: translateX(3px);
}

/* Variant card backgrounds — subtle differentiation by lesson type */
.zishi-lesson-card[data-lesson-type="quiz"] .zishi-lesson-card__icon-panel {
  background: linear-gradient(135deg, #2d2658 0%, #443b62 50%, #6b4d8a 100%);
}

.zishi-lesson-card[data-lesson-type="book"] .zishi-lesson-card__icon-panel {
  background: linear-gradient(135deg, #443b62 0%, #6b4d8a 100%);
}

.zishi-lesson-card[data-lesson-type="folder"] .zishi-lesson-card__icon-panel {
  background: linear-gradient(135deg, #5a5a6a 0%, #443b62 100%);
}

/* Mobile: cards adjust width */
@media (max-width: 600px) {
  .zishi-lesson-card {
    flex: 0 0 240px;
    min-width: 240px;
  }
  .zishi-lesson-card__icon-panel {
    height: 110px;
  }
  .zishi-lesson-card__icon {
    width: 48px;
    height: 48px;
  }
  .zishi-lesson-carousel__heading {
    font-size: 1.25rem !important;
  }
}


/* ============================================================================
   SECTION 5 — Hide the underlying Totara activity list when carousel is shown
   ============================================================================
   Add the class .zishi-hide-activities to the section's HTML, OR target the
   section by ID once known. The default Totara Topics format renders each
   activity row inside a <li class="activity"> inside <ul class="section img-text">.
   ========================================================================== */

/* When a section contains a .zishi-module-hero, hide the activity list rows
   inside that section. This is done by checking sibling order. The simplest
   reliable approach: add .zishi-hide-activities to the section manually. */

.zishi-hide-activities .section.img-text {
  display: none !important;
}

/* Optional: also hide the empty "Add an activity or resource" link when
   editing is on, but only if the user wants that behaviour */
/* .zishi-hide-activities .section_add_menus { display: none !important; } */


/* ============================================================================
   END Module Hero & Carousel additions
   ========================================================================== */


/* Suppress Totara's native .no-overflow scrollbar around our carousel —
   the carousel has its own designed scrollbar (.zishi-lesson-carousel__track) */
.no-overflow:has(.zishi-lesson-carousel) {
  overflow-x: hidden !important;
}

/* Fallback for browsers without :has() support — narrows the rule by
   targeting any .no-overflow inside a Label activity that contains the carousel */
.modtype_label .no-overflow {
  overflow-x: hidden !important;
}