/*********************************************************************/
/***** LLL Child CSS                                              ****/
/***** Contains only overrides/additions unique to LLL           ****/
/*********************************************************************/

/**************************************************************/
/**********           BRANDING FONT IMPORTS    ****************/
/**************************************************************/
/* AU Branding Fonts - use sparingly */
@import url('https://fonts.googleapis.com/css2?family=Roboto+Serif:ital,opsz,wght@0,8..144,100..900;1,8..144,100..900&display=swap');
@import url("https://pro.fontawesome.com/releases/v5.15.0/css/all.css");


@font-face {
    font-family: "National 2 Condensed";
    src: url(https://adelaide.edu.au/etc.clientlibs/adelaideuniversity/clientlibs/clientlib-common/resources/fonts/National/national-2-condensed-bold.woff2) format("woff2");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "National 2 Condensed";
    src: url(https://adelaide.edu.au/etc.clientlibs/adelaideuniversity/clientlibs/clientlib-common/resources/fonts/National/national-2-condensed-bold.woff2) format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* h1.page-title — adds National 2 Condensed (parent only sets weight + colour) */
h1.page-title, h1.course-title {
    font-family: 'National 2 Condensed', sans-serif !important;
    color: var(--primary) !important;
    font-size: 2em !important;
}

/*
   Override: h3 headings use National 2 Condensed + purple underline.
   Parent theme styles h3 as white-on-primary title bars; this replaces
   that with a typographic heading style and excludes dp-callout children
   so callout headings remain unstyled by this rule.
*/
.show-content h3:not(.dp-panel-heading):not(:is(.dp-callout *)),
#tinymce h3:not(.dp-panel-heading):not(:is(.dp-callout *)),
.mce-content-body h3:not(.dp-panel-heading):not(:is(.dp-callout *)),
.user_content>h3:not(.dp-panel-heading):not(:is(.dp-callout *)),
.dp-wrapper h3:not(.dp-panel-heading):not(:is(.dp-callout *)) {
    background: none !important;
    color: var(--primary);
    margin-left: initial !important;
    font-family: 'National 2 Condensed', sans-serif;
    font-size: 2.4em;
    padding: 0;
    font-weight: 900;
    border: none !important;
    display: flex;
    align-items: center;
    gap: 0.25em;
    margin-bottom: 0.8em !important;
    margin-top: 0.8em !important;
}


.show-content p {
    color: var(--primary) !important;
}

/* table.aux th p — parent theme doesn't set text colour on th p */
table.aux th p {
    color: var(--white);
}

.dp-example-box {
    background: #f4f2ff !important;
}

.dp-example-box p,
.dp-example-box li {
    color: var(--accent-darker) !important;
}

.dp-example-box h3 {
    color: var(--accent-darker) !important;
    text-align: right;
    font-size: 0.8em !important;
    font-weight: bold !important;
    letter-spacing: 2pt;
    text-transform: uppercase;
    margin-top: -18px !important;
}

#kl_wrapper_3.kl_box_left_1 h3:not(.ui-state-default),
#kl_wrapper_3.kl_box_left_2 h3:not(.ui-state-default),
#kl_wrapper_3.kl_box_left_3 h3:not(.ui-state-default),
#kl_wrapper_3.kl_box_left h3:not(.ui-state-default),
#kl_wrapper_3.kl_box_left h3 {
    background: var(--primary) !important;
    color: #fff !important;
    margin-left: initial !important;
    font-family: 'National 2 Condensed', sans-serif !important;
    font-size: 2em !important;
    padding: 0.1rem !important;
    font-weight: 900;
    border: none !important;
}



/* kl_box icon — remove inherited background/shadow from parent h3 rule */
#kl_wrapper_3.kl_box_left h3:not(.ui-state-default) i {
    background: none !important;
    color: var(--accent) !important;
    box-shadow: none !important;
    margin-left: 0.3rem !important;
    position: relative;
    /* top: -4px; */
    margin-right: 4px !important;
    font-size: 24px;
}

/* .cc h3 — LLL uses accent colour; parent theme uses --primary */
.cc h3:not(.dp-panel-heading) {
    color: var(--accent) !important;
}

/* nav overrides */
.ic-app-header__menu-list-item.ic-app-header__menu-list-item--active .ic-app-header__menu-list-link {
    background: #140F50;
    color: #FFF;
}

.list-view a.active {
    border-left: 2px solid var(--accent) !important;
}

.ic-app-header__menu-list-item.ic-app-header__menu-list-item--active .ic-icon-svg {
    fill: #f4f4f3;
}

/* button overrides  */

.kl_wrapper .bs-btn {
    display: inline-block;
    text-align: center;
    vertical-align: middle;
    border: 1px solid transparent;
    padding: .5rem .75rem;
    font-size: 1rem;
    line-height: 1.25;
    border-radius: .25rem;
    transition: all .15s ease-in-out;
}

/* yes the name is confusing; it's to support existing content for easy migration */

.bs-btn.bs-btn-secondary {
    background: var(--primary) !important;
    color: #FFF !important;
}

#kl_navigation ul li a {
    background: var(--primary-lightest) !important;
    border: none !important;
    padding: 0.45em 0 0.45em 1em !important;
    transition: all 0.25s ease-in-out;
    border-radius: var(--rads);
}

#kl_navigation ul li a:hover {
    background: var(--primary) !important;
    color: #fff !important;
    transform: translateY(-2px) !important;
}

/* progress overrides and inclusions sans-DP */

.kl_progress_icons li.kl_current a {
    color: var(--primary) !important;
    background: #fff !important;
}

.kl_progress_icons li.kl_complete a {
    color: var(--primary-lighter) !important;
    background: var(--primary) !important;
}

.kl_progress_icons li a {
    color: var(--accent) !important;
}

.kl_progress_icons li.kl_complete .kl_colored_bar, .kl_progress_icons li.kl_current .kl_colored_bar {
    background-color: var(--primary);
    background-image: none;
}

.kl_progress_icons li .kl_colored_bar {
    background: #f5f5f5;
    height: 25px;
    position: absolute;
    top: .3rem;
    left: 0;
    right: 0;
    border: 1px solid #ddd;
    border-left: none;
    border-right: none;
    background-size: 35px 35px;
}

.kl_progress_icons ol {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
}

.kl_progress_icons li {
    flex-grow: 1;
    z-index: 100;
    position: relative;
    height: 2.5rem;
    min-width: 2.5rem;
}

.kl_progress_icons li a {
    background: #f5f5f5;
    border: 1px solid #ddd;
    color: #616161;
    text-align: center;
    display: inline-block;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 1.5rem;
    text-decoration: none !important;
    line-height: 2.2rem;
    font-size: 1.8rem;
    font-weight: 700;
    position: absolute;
    right: 3px;
}

.kl_progress_icons li a .dp-icon:before, .kl_progress_icons li a i:before {
    line-height: 1.5rem;
    font-size: 1rem;
    font-weight: 700;
}


/* progress bar; no icons */

.kl_progress {
    position: relative;
    height: 2.1rem;
    line-height: 1rem;
    overflow: hidden;
    margin-bottom: 20px;
    background-color: #f5f5f5;
    border-radius: 4px;
    background-size: 50px 50px;
}

.kl_progress-bar {
    float: left;
    width: 0;
    height: 100%;
    font-size: 1rem;
    line-height: 25px;
    color: #fff;
    text-align: center;
    background-color: var(--primary);
    transition: width .6s ease;
    box-shadow: inset 1px 1px 2px 0 hsla(0, 0%, 100%, .2), inset -1px -1px 2px 0 rgba(0, 0, 0, .2);
}

.kl_progress>.kl_progress-type {
    position: absolute;
    left: 0;
    font-weight: 800;
    padding: 3px 30px 2px 10px;
}

.kl_progress>.kl_progress-completed {
    position: absolute;
    right: 0;
    font-weight: 800;
    padding: 3px 10px 2px;
}

.kl_wrapper .bs-badge {
    display: inline-block;
    padding: .25em .4em;
    font-size: 80%;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: .25rem;
    text-shadow: none;
    font-style: normal;
    background: #f5f5f5;
}

.kl_progress, .kl_progress .bs-badge {
    font-size: 1rem;
    border: 1px solid #cfcfcf;
}