:root {
    /* CORE: TYPOGRAPHY */
/*    --font-family-core--sans: "Lato", sans-serif;
    --font-family-core--serif: "Titillium Web", sans-serif;
*/
    --color-background: hsl(0, 0%, 100%);;
    --badge-bg-highlight1:  hsl(220, 15%, 23%);
    --color-primary:        hsl(0, 3%, 15%);
    --color-home-section-heading: var(--color-text);
    --color-interactive-focus-base: 216 72%;
    --color-interactive-focus-l: 46%;
    --color-interactive-focus: var(--main-blue);

    --navbar-height: 40px;

    /* LOGIN PAGE */
    --login-page-color-bg: hsl(0, 3%, 15%);

    /* COMPONENT: NAVBAR MAIN */
    --top-bar-color-bg: var(--color-primary);
    --top-bar-color-bg-notifications: hsla(216, 45%, 4%, 0.3);
    --top-bar-color-bg-notifications--hover: hsla(216, 45%, 0%, 0.5);
    --top-bar-color-bg-avatar-block: hsla(216, 45%, 4%, 0);
    --top-bar-color-bg-avatar: hsla(216, 45%, 4%, 0.3);
    --top-bar-color-bg-avatar--hover: hsla(216, 45%, 4%, 0.5);
    --top-bar-color-bg-badge: hsl(0, 0%, 100%);
    --top-bar-color-fg-badge: hsl(0, 3%, 15%);
    --color-text-link--navbar: hsl(0, 0%, 100%);
    /* Logo main */
    --top-bar-logo-main-max-width: 200px;
    --top-bar-logo-main-max-width--mobile: 160px;
    --top-bar-logo-main-margin-top: -0px;
    --top-bar-logo-main-margin-top--mobile: -6px;
    /* Logo additional */
    --top-bar-logo-additional-display: flex;
    --top-bar-logo-additional-max-width: 78px;
    --top-bar-logo-additional-min-width--mobile: 0px;
    --top-bar-logo-additional-padding-y: 12px;
    --top-bar-logo-additional-padding-x: 0;
    /* Navbar Brand */
    --top-bar-nav-brand-margin-x: 0;
    --top-bar-nav-brand-margin-y: 16px;
    --top-bar-nav-brand-padding-x: 16px;
    --top-bar-nav-brand-border-color: hsla(0, 0%, 100%, 0.4);
    --top-bar-nav-brand-border-type: solid;

    /* COMPONENT: SIDENAV */
    --sidenav-color-bg:                     hsl(0, 3%, 15%);
    --sidenav-color-item-bg--active:        hsl(0, 0%, 60%);
    --sidenav-color-item-fg--active:        hsla(0, 0%, 100%, 1);
    --sidenav-color-badge-bg:               hsla(0, 0%, 98%, 1);
    --sidenav-color-badge-bg--active:       hsla(0, 0%, 98%, 1);
    --sidenav-color-badge-fg:               hsl(220, 15%, 23%);
    --sidenav-color-badge-fg--active:       hsl(220, 15%, 23%);
    --sidenav-color-item-bg--hover:         hsl(201, 62%, 30%);

    /* COMPONENT: BUTTONS */
    /* // Primary */
    --button-color-bg--primary-base: 0, 3%;
    --button-color-bg--primary-l: 25%;

    /* COMPONENT: ICON BUTTON */
    /* // Primary */
    --icon-button-color-icon--primary: hsl(0, 3%, 15%);
    --icon-button-color-border--primary-hover: var(--icon-button-color-fg);
    --icon-button-shadow-primary--active: var(--icon-button-shadow--active);

    /* COMPONENT: PROFILE SIDEBAR */
    --profile-sidebar-color-bg:                hsl(0, 0%, 88%);
    --profile-sidebar-color-fg:                var(--color-text);
    --profile-sidebar-button-color-fg--secondary:            hsla(0, 0%, 10%, 0.75);
    --profile-sidebar-button-color-border--secondary:        hsla(0, 0%, 10%, 0.45);
    --profile-sidebar-button-color-fg--secondary-hover:      hsla(0, 0%, 10%, 0.98);
    --profile-sidebar-button-color-border--secondary-hover:  hsla(0, 0%, 10%, 0.65);
    /* // sidebar avatar */
    --profile-sidebar-avatar-color-bg:         hsl(0, 0%, 14%);
    --profile-sidebar-avatar-color-fg:         hsl(0, 0%, 99%);
    --profile-sidebar-avatar-color-border:     hsl(0, 0%, 60%);

    /* COMPONENT: MAIN FOOTER */
    --footer-size--height: 48px;

    /* COMPONENT: ALERTIFY NOTIFIER */
    --ajs-message-color-bg--success: hsl(0, 3%, 15%);

    /* COMPONENT: SEARCH RESULT PANEL (Tags list) */
    --search-result-tags-list-color-bg: var(--main-header-color-bg);

    /* COMPONENT: MULTI-DAY LABEL */
    --multiday-label-color-bg: var(--color-info);
}

/* No breadcrumbs on the home page so no seperator is needed */
.navbar-brand__no__seperator {
    border-inline-start: none
}

/* Invert the text colour when it overlays an image */
.card-title--overlaid {
    color: var(--color-text--inverse) !important;
}

/* set the background colour on the extra AAP header components */
.extra-header {
    background-color: var(--color-primary);
}

/* Default expects a 16-9 thumbnail AAP uses 4:3 */
.card-img-top-wrapper.card-img-top-wrapper--aspect-16-9 {
    padding-block-end: 75% !important;
}

@media only screen and (max-width: 1200px) {
    .navbar-header_tagline {
        display: none;
    }
}

@media only screen and (max-width: 768px) {
    .navbar-header_nav_links {
        display: none; !important;
    }
}
@media only screen and (max-width: 768px) {
    .extra-header {
        display: none; !important;
    }
}

figcaption {
    font-size: var(--text-size--medium);
    color: var(--color-text--muted);
    margin: var(--space--1-5) var(--space--3);
    line-height: 1.2;
    display: block; /* Ensures margins and line-height behave consistently */
}