/*  LINK CARD  */
.card.link-card {
    border-left: 4px solid var(--color-primary-500);
    border-radius: 0px;
    height: 100%;
    box-shadow: 2px 4px 12px -2px rgba(0, 0, 0, 0.25);


    .card-img {
        border-radius: 0px;
        height: 200px;
        width: 100%;
        object-fit: cover;
    }

    .card-title {
        color: var(--color-primary-500);
        margin: 0px;

        a {
            color: var(--color-primary-500);
            text-decoration: none;
        }

            a:hover {
                text-decoration: underline;
                text-decoration-thickness: 19%;
                text-underline-offset: 19%;
            }
    }

    .card-body {
        padding: var(--spacing-small) var(--spacing-medium);
        display: flex;
        flex-direction: column;
        gap: var(--spacing-xsmall);

        .link-card-list {
            display: flex;
            flex-direction: column;
            gap: var(--spacing-xsmall);
            list-style: none;
            padding: 0px;
            margin: 0px;
        }
    }

    @media (max-width: 768px) {
        border-left: none;

        .card-body {
            border-left: 4px solid var(--color-primary-500);
        }
    }
}

/* LINK BOX */

.link-box {

    /* .link-box-background full-bleed styles are shared with .column-background — see site.css */

    .link-container {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-medium);
        padding: var(--spacing-small) 0;
    }

    .row {
        margin-left: 0;
        margin-right: 0;
    }

    .link-box-header {
        color: var(--color-primary-500);
        padding: var(--spacing-small) 0 0 0;
    }

    .link-item {
        border-left: 4px solid var(--color-primary-500);
        padding: var(--spacing-xxxsmall) var(--spacing-xsmall);
        margin-bottom: var(--spacing-small);
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

        .link-item:hover {
            color: var(--color-secondary-600);
        }

    @media (max-width: 768px) {
        .link-container > .row:nth-of-type(2) {
            flex-direction: column;
        }

        .link-item {
            width: 100%;
            max-width: 100%;
            white-space: normal;
            overflow: visible;
            text-overflow: clip;
        }
    }
}

/* LINK LIST */
/* LINK LIST */
.link-list {
    display: flex;
    padding: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    border-left: none;
    background: transparent;
    box-shadow: none;
    height: auto;

    .link-list-header {
        display: flex;
        align-items: center;
        gap: 12px;
        align-self: stretch;
        height: auto;

        .material-icons {
            font-size: 32px;
            color: var(--color-primary-500);
        }

        .link-list-head {
            color: var(--color-primary-900);
            text-decoration: none;

            &:hover {
                text-decoration: underline;
                text-decoration-thickness: 19%;
                text-underline-offset: 19%;
                color: var(--color-secondary-600);
            }
        }
    }

    .link-list-ul {
        display: flex;
        flex-direction: row;
        list-style: none;
        gap: 12px;
        padding: 0;
        margin: 0;

        a {
            text-decoration: none;

            &:hover {
                text-decoration: underline;
                text-decoration-thickness: 19%;
                text-underline-offset: 19%;
                color: var(--color-secondary-600);
            }
        }
    }

    li {
        display: flex;
        padding: var(--spacing-xxxsmall, 4px) var(--spacing-small, 16px);
        align-items: center;
        gap: 8px;
        border-left: var(--spacing-xxxsmall, 4px) solid var(--color-primary-500, #007FC1);
    }
}

.homepage .link-list,
.landing-page .link-list {
    padding: var(--spacing-medium, 16px);
    border-left: 4px solid var(--color-primary-500);
    background: var(--color-white);
    box-shadow: 2px 4px 12px -2px rgba(0, 0, 0, 0.25);
    height: 200px;

    .link-list-header {
        height: 32px;

        .link-list-head {
            color: var(--color-primary-500);
        }
    }

    .link-list-ul {
        flex-direction: column;
    }

    li {
        border-left: none;
        padding: 0;
    }
}
/* CONTACT CARD */

.contact-card {
    border-left: var(--spacing-xxxsmall) solid var(--color-primary-500);
    display: flex;
    padding: var(--spacing-small) var(--spacing-medium);
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-small);

    .contact-header {
        color: var(--color-primary-500);
        margin: 0;
    }

    .address {
        display: flex;
        gap: var( --spacing-xsmall);
        flex-direction: column;
    }

    .contact-container {
        display: flex;
        gap: var( --spacing-xsmall);
    }

    .contact-details {
        display: flex;
        padding: 0 var(--spacing-xsmall);
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        border-left: 1px solid var(--color-primary-300);
    }

        .contact-details:only-child {
            border-left: none;
            padding: 0;
        }

    .contact-row {
        display: flex;
        gap: 12px;
        align-items: center;
    }
}

/* COUNCIL MEMBER */
.council-members {

    .council-member {
        border: 4px solid;
        padding: var(--spacing-small) var(--spacing-xsmall);
        width: auto;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;

        .council-member-content {
            padding: 0px;
            display: flex;
            justify-content: center;
            flex-direction: column;
            width: 100%;

            .col-6 {
                padding: 0px;
            }
        }

        .council-photo {
            width: 100%;
            height: auto;
            max-width: 90px;
            border: 2px solid var(--color-white);
        }

        .council-text {
            display: flex;
            flex-direction: column;
            gap: var(--spacing-xsmall);
            align-items: center;
        }

        .council-buttons {
            display: flex;
            justify-content: space-evenly;
            padding-top: var(--spacing-xsmall);
        }
    }
    /* CONNECTION LINES */

    .centre-line {
        height: 12px;
        background-color: black;
        width: 4px;
        padding: 0px;
    }

    .council-member-top-line {
        height: 4px;
        background-color: black;
        width: 150%;
    }

    .col:first-child .council-member-top-line {
        width: 100%;
        margin-left: calc(100% - 16px);
    }

    .col:last-child .council-member-top-line {
        width: 100%;
        margin-right: calc(100% - 16px);
    }

    .council-member-line {
        height: 12px;
        background-color: black;
        width: 4px;
    }
}

/* ACCORDION */

.accordion {
    --accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23404040' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important;
    --accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23404040' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important;

    .accordion-item {
        border: unset;
    }

        .accordion-item:last-of-type {
            border-bottom-right-radius: 0px;
            border-bottom-left-radius: 0px;
        }

            .accordion-item:last-of-type > .accordion-header .accordion-button.collapsed {
                border-bottom-right-radius: 0px;
                border-bottom-left-radius: 0px;
            }

            .accordion-item:last-of-type > .accordion-collapse {
                border-bottom-right-radius: 0px;
                border-bottom-left-radius: 0px;
            }

    .accordion-header {
        padding: 0px;
    }

    .accordion-button {
        padding: var( --spacing-small);
        background-color: var(--color-white);
        box-shadow: none;
        border-radius: 0;
        border-bottom: 2px solid var(--color-primary-500);
        color: var(--color-primary-500);

        &.collapsed {
            border-bottom-left-radius: 0px;
            border-bottom-right-radius: 0px;
            color: var(--color-grey-600);
        }
    }

        .accordion-button::after {
            flex-shrink: 0;
            margin-left: auto;
            content: "";
            background-image: var(--accordion-btn-icon);
            background-repeat: no-repeat;
            background-size: 0.75rem;
            height: 0.75rem;
            width: 0.75rem;
        }

    .accordion-body {
        border-bottom: 1px solid var(--color-primary-300);
        padding: var(--spacing-xxsmall) var(--spacing-small);
        overflow-x: auto;

        p {
            margin: 0;
        }
    }
}

/* HERO BANNER */

.hero-banner {
    position: relative;
    width: auto;
    margin-left: calc(-1 * var(--page-side-spacing));
    margin-right: calc(-1 * var(--page-side-spacing));
    overflow: hidden;
}

    /* 20% black overlay over the image — above the photo, below the text/buttons */
    .hero-banner::before {
        content: "";
        position: absolute;
        inset: 0;
        background: rgba(0, 0, 0, 0.2);
        pointer-events: none;
        z-index: 1;
    }

    .hero-banner img {
        width: 100%;
        height: clamp(240px, 26vw, 420px);
        object-fit: cover;
        object-position: center;
        display: block;
    }

.hero-banner-content {
    position: absolute;
    top: 50%;
    left: var(--page-side-spacing);
    transform: translateY(-50%);
    max-width: 715px;
    display: flex;
    gap: 30px;
    flex-direction: column;
    color: var(--color-white);
    z-index: 2;

    h1 {
        color: var(--color-white);
        font-size: 64px;
        line-height: 72px;
    }
}

.hero-banner-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;

    .btn-secondary {
        font-size: 24px;
        font-weight: 700;
        line-height: 32px;
        background: transparent;
        border: 2px solid var(--color-white);
        color: var(--color-white);
    }
}

@media (max-width: 768px) {
    .hero-banner img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
    }

    .hero-banner-content {
        position: relative;
        top: auto;
        left: auto;
        transform: none;
        max-width: none;
        padding: var(--spacing-large) var(--page-side-spacing);

        h1 {
            font-size: 40px;
            line-height: 48px;
        }

        .heading-xmedium {
            font-size: 18px;
            line-height: 24px;
        }
    }

    .hero-banner-actions {
        flex-direction: column;
        align-items: stretch;

        .btn-primary,
        .btn-secondary {
            width: 100%;
        }
    }
}

/* PAGE PADDINGS */
.standard-page,
.school-page,
.search-page,
.landing-page {
    padding: var(--spacing-xlarge) var(--page-side-spacing) 0;
}

.homepage {
    padding: var(--spacing-medium) var(--page-side-spacing) var(--spacing-small);
}

.landing-page .column-layout,
.homepage .column-layout {
    padding: 0;
}

/* SCHOOL PAGE */
.school-page {
    .school-content {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-medium);
        padding: 0;
    }

    .school-image {
        width: 100%;
    }

    .school-details {
        border-left: var(--spacing-xxxsmall, 4px) solid var(--color-primary-500, #007FC1);
        padding: 0 var(--spacing-small, 16px);
        display: flex;
        flex-direction: column;
        gap: var(--spacing-xxsmall);

        .row {
            --bs-gutter-x: 0;
        }
    }
}

/* LANDING PAGE */
.landing-page {
    .link-box,
    .link-box-header {
        padding: 0;
    }

    .link-box-header {
        color: var(--color-grey-600, #404040);
    }

    .umb-block-grid__layout-item .umb-block-grid__area {
        height: 100%;

        .umb-block-grid__layout-item {
            flex-grow: 1;
        }
    }
}

/* SEARCH PAGE */
.search-page {
    .search-results {
        .search-results-count {
            margin-bottom: var(--spacing-medium);
        }

        .search-sort-bar {
            display: flex;
            width: fit-content;
            align-items: center;
            margin-bottom: var(--spacing-medium);
            border-radius: var(--radius-small);

            .search-sort-text {
                padding: var(--spacing-xxsmall) var(--spacing-xsmall);
                background-color: var(--color-primary-100);
            }
        }

        .search-sort-select {
            display: inline-flex;
            align-items: center;
            gap: var(--spacing-xsmall);
            padding: var(--spacing-xxsmall) var(--spacing-xsmall);
            background-color: var(--color-white);
            border: 1px solid var(--color-grey-400);
            border-radius: var(--radius-xsmall);
            color: var(--color-black);
        }

        .search-results-list {
            ul {
                list-style: none;
                margin: 0px;
                padding: 0px;
                display: flex;
                flex-direction: column;
                gap: var(--spacing-medium);
            }

            li {
                display: flex;
                flex-direction: column;
                gap: var(--spacing-xxxsmall);
            }

            .search-result-blurb {
                margin-top: var(--spacing-xxsmall);
            }

            .link-text {
                color: var(--color-primary-700);
            }
        }
    }
}

/* HOMEPAGE */
.homepage {
    padding: var(--spacing-medium) var(--page-side-spacing) var(--spacing-small) var(--page-side-spacing);

    .column-layout {
        padding: 0px;
    }

    .iframe iframe[title='servicestatus'] {
        width: 100%;
        min-height: 250px;
    }
}

.standard-page, .school-page {
    padding-top: var(--spacing-xlarge);
    padding-left: var(--page-side-spacing);
    padding-right: var(--page-side-spacing);
}

.content-column {
    padding-left: var(--spacing-large) !important;
}

@media (max-width: 576px) {
    .content-column {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}