@font-face {
    font-family: "Degular";
    font-weight: 400;
    src: url(https://cdn.involve.org.au/help/fonts/Degular-Regular.woff2);
}

@font-face {
    font-family: "Degular";
    font-weight: 600;
    src: url(https://cdn.involve.org.au/help/fonts/Degular-Semibold.woff2);
}

@font-face {
    font-family: "Degular";
    font-weight: 700;
    src: url(https://cdn.involve.org.au/help/fonts/Degular-Bold.woff2);
}

@font-face {
    font-family: "Degular";
    font-weight: 400;
    font-style: italic;
    src: url(https://cdn.involve.org.au/help/fonts/Degular-Italic.woff2);
}

:root {
    --involve-burgundy: #640031;
    --involve-bubblegum: #EDB0D0;
    --involve-peach: #F8A48D;
    --text-dark: #1E1B1D;
    --text-muted: #6E6D68;
    --navbar-height: 7rem;
    --navbar-height-mobile: 3.5rem;
    --gradient-bg: linear-gradient(54deg, rgba(205, 23, 64, 0.32) 0%, rgba(243, 209, 227, 0.32) 32%), linear-gradient(105deg, #EDB0D0 14%, #F8A48D 95%);
    --font-weight-normal: 400;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
}

body {
    font-family: "Degular", system-ui,
        "Segoe UI",
        "Roboto",
        "Helvetica",
        "Arial",
        sans-serif,
        "Apple Color Emoji",
        "Segoe UI Emoji",
        "Segoe UI Symbol";
    font-size: 1rem;
    line-height: 1.5;
    color: var(--text-dark);
}

h1, h2, h3 { font-weight: 600; line-height: 1.2; }
h1 { font-size: 2rem; }
h2 { font-size: 1.625rem; }
h3 { font-size: 1.125rem; }

.container-fluid {
    max-width: 1320px;
}

/* Header */
.navbar .navbar-inner {
    box-shadow: none;
    background-color: var(--involve-peach);
    background-image: var(--gradient-bg);
}

.navbar .navbar-inner .container-fluid {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: var(--navbar-height);
}

.navbar .navbar-inner .container-fluid::before,
.navbar .navbar-inner .container-fluid::after {
    display: none;
}

.navbar .brand {
    float: none;
    padding: 0.5rem 0;
    margin: 0 !important;
    max-width: none !important;
    line-height: 0;
    color: var(--involve-burgundy);
    font-size: 1rem;
    font-weight: var(--font-weight-normal);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 2rem;
    row-gap: 0.5rem;
}

.navbar .brand::after {
    content: "Knowledge Base";
    display: inline-block;
    text-transform: uppercase;
    letter-spacing: 0.15625rem;
    line-height: 1;
}

.navbar .brand img {
    width: auto;
    height: 1.5rem;
}

.navbar .nav {
    float: none;
    position: static !important;
}

.navbar .nav li a {
    color: #331122;
    font-size: 1.375rem;
    padding-inline: 1.5rem;
}

/* Search bar */
#docsSearch {
    margin-top: calc(-1 * var(--navbar-height));
    padding-top: calc(var(--navbar-height) + 3rem);
    padding-bottom: 1rem;
    padding-inline: 20px;
    border-bottom: 0;
    background-color: var(--involve-peach);
    background-image: var(--gradient-bg);
}

#docsSearch h1 {
    font-size: 2.375rem;
    font-weight: var(--font-weight-semibold);
    color: var(--involve-burgundy);
    margin-block: 0;
}

#searchBar {
    position: relative;
    max-width: 35rem;
    margin-block: 2rem;
    padding: 0.75rem 0.75rem;
    box-shadow: 0 0 0 1pxrgba(237, 176, 208, 1);
    border-radius: 0.75rem;
    background-color: rgba(255, 255, 255, 0.3);
}

#searchBar .search-query {
    padding-left: 3.75rem;
    border-radius: 0.5rem;
    border-color: #fff;
    box-shadow: none;
    font-family: "Degular", system-ui,
            "Segoe UI",
            "Roboto",
            "Helvetica",
            "Arial",
            sans-serif,
            "Apple Color Emoji",
            "Segoe UI Emoji",
            "Segoe UI Symbol";
    font-size: 1.375rem;
    height: 3.625rem;
}

#searchBar .search-query:focus {
    border-color: var(--involve-bubblegum);
    box-shadow: 0 0 0 1px var(--involve-bubblegum);
}

#searchBar .search-query::placeholder {
    text-transform: lowercase;
    color: var(--text-muted);
}

#searchBar button {
    text-shadow: none;
    right: unset;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    width: 3rem;
    border: none;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
}

#searchBar button:hover {
    background: transparent;
}

#searchBar button .icon-search {
    display: block;
    font-size: 1.25rem;
    color: #D0D0D0;
}

#searchBar button span {
    font-size: 0;
    text-indent: -3000px;
}

#serp-dd {
    border-radius: 0.5rem;
    overflow-x: hidden;
    width: unset;
    left: 0.75rem;
    right: 0.75rem;
}

#serp-dd .noResults {
    font-size: 0.875rem;
    color: var(--text-muted);
}

/* Mobile tweaks */
@media (max-width: 992px) {
    .navbar .navbar-inner .container-fluid {
        min-height: var(--navbar-height-mobile);
        padding-right: 3rem;
    }

    .navbar .btn-navbar {
        display: block;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        margin-top: 0;
        right: 0;
        margin-right: 0;
        height: 3rem;
        width: 3rem;
        background: transparent;
        border: none;
        outline: none;
    }

    .navbar .btn-navbar:hover,
    .navbar .btn-navbar:focus {
        background: transparent;
    }

    .navbar .btn-navbar .icon-bar {
        background: #331122;
        box-shadow: none;
        width: 100%;
        height: 0.125rem;
        border-radius: 0.125rem;
    }

    .navbar .btn-navbar .icon-bar+.icon-bar {
        margin-top: 0.375rem;
    }

    .navbar .btn-navbar:hover .icon-bar {
        background: #640031;
    }

    .nav-collapse.collapse:not(.in) {
        height: 0 !important;
        overflow: hidden !important;
    }

    .nav-collapse,
    .nav-collapse.collapse {
        position: absolute;
        background: #fff;
        top: 3.5rem;
        left: 0;
        right: 0;
        z-index: 1;
        box-shadow: 0 0 0.25rem rgba(0, 0, 0, 0.075);
        border-radius: 0.5rem;
    }

    .navbar .nav li {
        display: block;
    }

    .navbar .nav {
        text-align: center;
    }

    #docsSearch {
        margin-top: calc(-1 * var(--navbar-height-mobile));
        padding-top: calc(var(--navbar-height-mobile) + 1rem);
    }
}

/* Category list */
.collection-category .category-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
    gap: 1.5rem;
    margin: 0 0 3rem;
}

.collection-category:not(:has(.category)),
.category-list .category p:empty {
    display: none;
}

.collection-category h2 {
    margin-bottom: 3rem;
    font-size: 1.75rem;
    font-weight: var(--font-weight-semibold);
}

.category-list h3 {
    font-size: 1.75rem;
    font-weight: var(--font-weight-regular);
    color: var(--text-dark);
}

.category-list .category h3 + p {
    font-size: 1.125rem;
    color: var(--text-muted);
    margin-top: 0.5rem;
    display: none; /* need to hide description because of layout */
}

.category-list .category .article-count {
    font-size: 1.25rem;
    margin-top: 0;
}

.collection-category .category-list .category {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    width: unset;
    margin: unset;
    min-height: 15.5rem;
    border: 1px solid #F1F1F1;
    border-radius: 0.3125rem;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.05);
    background-color: #fff;
    background-position: center top 1.5rem;
    background-repeat: no-repeat;
    background-size: auto 40%;
    transition: all 0.2s ease;
}

.collection-category .category-list .category:hover {
    border-color: var(--involve-bubblegum);
    background-color: unset;
}

.collection-category .category-list .category:active {
    box-shadow: none;
    transform: scale(0.95);
}

/* Category images */
#category-11 {
    background-image: url(https://cdn.involve.org.au/help/illustrations/new.png);
}
#category-94 {
    background-image: url(https://cdn.involve.org.au/help/illustrations/add%20volunteers.png);
}
#category-14 {
    background-image: url(https://cdn.involve.org.au/help/illustrations/volunteerschedule.png);
}
#category-13 {
    background-image: url(https://cdn.involve.org.au/help/illustrations/organise.png);
}
#category-15 {
    background-image: url(https://cdn.involve.org.au/help/illustrations/organisation.png);
}
#category-18 {
    background-image: url(https://cdn.involve.org.au/help/illustrations/timesheets.png);
}
#category-17 {
    background-image: url(https://cdn.involve.org.au/help/illustrations/schedule.png);
}
#category-19 {
    background-image: url(https://cdn.involve.org.au/help/illustrations/add%20volunteers.png);
}
#category-22 {
    background-image: url(https://cdn.involve.org.au/help/illustrations/search%20volunteers.png);
}
#category-20 {
    background-image: url(https://cdn.involve.org.au/help/illustrations/volunteer%20profile.png);
}
#category-25 {
    background-image: url(https://cdn.involve.org.au/help/illustrations/hand%20shake.png);
}
#category-23 {
    background-image: url(https://cdn.involve.org.au/help/illustrations/messaging.png);
}
#category-26 {
    background-image: url(https://cdn.involve.org.au/help/illustrations/boxed.png);
}
#category-24 {
    background-image: url(https://cdn.involve.org.au/help/illustrations/security.png);
}
#category-12 {
    background-image: url(https://cdn.involve.org.au/help/illustrations/creditcard.png);
}
#category-95 {
    background-image: url(https://cdn.involve.org.au/help/illustrations/overview.png);
}

/* Category page */
#searchBar.sm button {
    top: 50%;
    transform: translateY(-50%);
    left: 0;
}

#sidebar form .search-query {
    padding: 1rem 1rem 1rem 2.75rem;
    border-radius: 0.25rem;
    font-size: 1.375rem;
    height: 3.5rem;
    border: 1px solid #D0D0D0;
}

#sidebar form .search-query::placeholder {
    text-transform: lowercase;
    color: var(--text-muted);
}

#serp-dd.sb {
    top: 60px;
    left: 0;
    width: 304px;
}

#serp .articlesFound,
#serp .nada {
    font-size: 1.125rem;
    color: var(--text-muted);
}

#sidebar h3 {
    font-weight: var(--font-weight-regular);
    font-size: 1.25rem;
    margin-bottom: 1.5rem;
}

#sidebar .nav-list a {
    font-size: 1.375rem;
    padding-block: 0.75rem;
    padding-right: 0;
    display: block;
}

#sidebar .nav-list .active a,
#sidebar .nav-list .active a:focus,
#sidebar .nav-list .active a:hover {
    font-weight: var(--font-weight-semibold);
    text-decoration: underline;
    text-decoration-color: var(--involve-bubblegum);
    text-decoration-thickness: 0.1875rem;
    text-underline-offset: 0.5rem;
}

#sidebar .nav-list .active a .icon-arrow,
#sidebar .nav-list .active a:focus .icon-arrow,
#sidebar .nav-list .active a:hover .icon-arrow {
    display: none;
}

#main-content {
    background-image: none;
}

.contentWrapper {
    border: 1px solid #D0D0D0;
}

.contentWrapper h1 {
    font-size: 2.375rem;
    font-weight: var(--font-weight-semibold);
}

.contentWrapper > h1 {
    margin-bottom: 2rem;
}

#categoryHead .sort select {
    padding: 0.25rem 0.5rem;
    width: auto;
    height: 2rem;
    font-size: 0.875rem;
    border: 1px solid #D0D0D0;
    border-radius: 0.25rem;
}

.contentWrapper p.descrip {
    font-size: 1.125rem;
    color: var(--text-dark);
    margin-bottom: 1.5rem;

}

.articleList li {
    margin: 0 0 0.625rem;
}

.articleList li a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem;
    border-radius: 0.25rem;
    border: 1px solid #D0D0D0;
    font-size: 1.125rem;
    transition: all 0.2s ease;
}

.articleList li a,
.articleList li a:focus,
.articleList li a:hover,
.articleList a:hover span {
    color: var(--text-dark);
    text-decoration: none;
}

.articleList li a:hover {
    border-color: var(--involve-bubblegum);
}

.articleList li a:after {
    content: "";
    display: inline-block;
    width: 1.25rem;
    height: 1.25rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23EDB0D0'%3E%3Cpath d='M13.1717 12.0007L8.22192 7.05093L9.63614 5.63672L16.0001 12.0007L9.63614 18.3646L8.22192 16.9504L13.1717 12.0007Z'%3E%3C/path%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    margin-left: 0.5rem;
}

.articleList .icon-article-doc {
    display: none;
}

/* Search Results */
#serp .articleList > li {
    padding-left: 0;
}

#serp .articleList > li a {
    border: none;
    padding: 0;
    display: flex;
    justify-content: flex-start;
    margin-left: 0;
    font-size: 1.375rem;
    font-weight: var(--font-weight-semibold);
}

#serp p {
    font-size: 1.125rem;
    color: var(--text-muted);
    margin-bottom: 2rem;
}

/* Article Page */
#fullArticle,
#fullArticle blockquote,
#fullArticle dd,
#fullArticle div,
#fullArticle li,
#fullArticle ol,
#fullArticle p,
#fullArticle table,
#fullArticle ul {
    font-size: 1.125rem;
    line-height: 1.5;
    color: var(--text-dark);
}

#fullArticle h1,
#fullArticle h2,
#fullArticle h3,
#fullArticle h4,
#fullArticle h5 {
    font-weight: var(--font-weight-semibold);
    line-height: 1.2;
    color: var(--text-dark);
}

#fullArticle h1.title {
    font-size: 2.875rem;
}
#fullArticle h1 {
    font-size: 2.375rem;
}
#fullArticle h2 {
    font-size: 2rem;
}
#fullArticle h3 {
    font-size: 1.75rem;
}
#fullArticle h4 {
    font-size: 1.125rem;
    text-transform: uppercase;
}

#fullArticle img {
    border: none;
    border-radius: 0;
    padding: 0;
}

#fullArticle .callout p,
#fullArticle .callout-blue p,
#fullArticle .callout-green p,
#fullArticle .callout-red p,
#fullArticle .callout-yellow p,
#fullArticle .private-note p {
    font-size: 1.125rem;
    line-height: 1.5;
    color: var(--text-dark);
}

#fullArticle .callout,
#fullArticle .callout-blue,
#fullArticle .callout-green,
#fullArticle .callout-red,
#fullArticle .callout-yellow,
#fullArticle .private-note {
    border-width: 6px;
    padding: 1.25rem;
}

#fullArticle .callout {
    border-color: #D0D0D0;
    background-color: #E7E7E7;
}

#fullArticle .callout-blue {
    border-color: #BCD8E8;
    background-color: #E2F0F8;
}

#fullArticle .callout-green {
    border-color: #93D0AC;
    background-color: #DBEFDA;
}

#fullArticle .callout-yellow {
    border-color: #F3D48E;
    background-color: #FFF2D6;
}

#fullArticle .callout-red {
    border-color: #DB6882;
    background-color: #FCDAE1;
}

/* Print */
@media print {
    .articleRatings {
        display: none;
    }
}