﻿/* @license GPL-2.0-or-later https://www.drupal.org/licensing/faq */
.lgd-region--primary-menu {
    background-color: var(--color-white);
}

.menu--main {
    margin-block-end: 0;
    padding-inline-start: 0;
    list-style: none;
}

    .menu--main > .menu-item a {
        display: block;
        padding: var(--spacing);
        color: var(--color-black);
    }

        .menu--main > .menu-item--active-trail a, .menu--main > .menu-item a:focus, .menu--main > .menu-item a:hover {
            color: var(--color-black);
            background-color: var(--color-white);
        }

@media screen and (min-width:48rem) {
    .lgd-region--primary-menu {
        background-color: transparent;
    }

        .lgd-region--primary-menu .menu--main {
            display: flex;
        }

    .menu--main > .menu-item {
        margin-inline: var(--spacing-smaller);
    }

        .menu--main > .menu-item a {
            color: var(--color-white);
            border: 1px solid transparent;
            background-color: transparent;
        }

            .menu--main > .menu-item--active-trail a, .menu--main > .menu-item a:focus, .menu--main > .menu-item a:hover {
                color: var(--color-black);
                background-color: var(--color-white);
            }

            .menu--main > .menu-item a:hover {
                border-color: var(--color-white);
            }
}

.main-menu {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
    list-style: none;
    margin-block-end: 0;
    padding: 1.875rem 0 0.875rem;
    padding-inline-start: 0;
}

.main-menu__link, .main-menu__submenu-link {
    color: var(--color-accent-2);
    display: block;
    text-decoration: none;
}

.main-menu .main-menu__link:focus, .main-menu .main-menu__link:hover, .main-menu .main-menu__submenu-link:focus, .main-menu .main-menu__submenu-link:hover {
    color: var(--color-accent);
    text-decoration: underline;
}

.main-menu__toggle {
    align-items: center;
    background-color: transparent;
    border: none;
    color: var(--color-accent-2);
    display: flex;
    font-size: var(--font-size-medium);
    font-weight: 700;
    gap: 0.625rem;
    justify-content: space-between;
    padding: 0rem;
}

    .main-menu__toggle::after {
        background-color: var(--color-accent-2);
        content: "";
        display: block;
        flex-shrink: 0;
        height: 0.625rem;
        mask-image: url(images/chevron.svg);
        -webkit-mask-image: url(images/chevron.svg);
        mask-size: cover;
        -webkit-mask-size: cover;
        transition: transform ease var(--transition-time);
        width: 1.125rem;
    }

    .main-menu__toggle:focus, .main-menu__toggle:hover {
        background-color: transparent;
        text-decoration: underline;
    }

        .main-menu__toggle:hover::after, .main-menu__toggle:focus::after {
            background-color: var(--color-accent);
            content: "";
            display: block;
            flex-shrink: 0;
            height: 0.625rem;
            width: 1.125rem;
        }

    .main-menu__toggle[aria-expanded="true"]::after {
        transform: rotate(180deg);
    }

.main-menu__dropdown-title {
    color: var(--color-accent-2);
    font-size: var(--font-size-medium);
    line-height: 100%;
    margin-block-end: unset;
}

.main-menu__submenu {
    display: flex;
    flex-direction: column;
    gap: 0.5625rem;
    list-style: none;
    margin-block-end: unset;
    padding-left: 0;
}

a.main-menu__submenu-link {
    font-size: var(--font-size-smaller);
    font-weight: normal;
    text-decoration: none;
}

.main-menu__submenu-item {
    padding-left: 1.25rem;
    position: relative;
}

    .main-menu__submenu-item::before {
        background-color: var(--color-accent);
        background-size: cover;
        content: "";
        height: 0.375rem;
        left: 0;
        mask: url(images/chevron.svg) no-repeat center;
        -webkit-mask: url(images/chevron.svg) no-repeat center;
        position: absolute;
        top: 0.3rem;
        transform: rotate(-90deg);
        width: 0.625rem;
    }

.lgd-header__toggle.lgd-header__toggle--active, button.lgd-header__custom-toggle--mobile-search--active {
    background-color: var(--color-accent);
}

.lgd-header__toggle--primary {
    background-color: var(--color-accent-2);
    border: none;
    border-radius: 50%;
    height: 2.25rem;
    position: relative;
    width: 2.25rem;
}

    .lgd-header__toggle--primary::before {
        background-image: url(../images/hamburger-menu.svg);
        content: "";
        display: block;
        height: 0.875rem;
        left: 50%;
        position: absolute;
        top: 50%;
        transform: translate(-50%,-50%);
        width: 0.875rem;
    }

    .lgd-header__toggle--primary.lgd-header__toggle--active::before, .lgd-header__custom-toggle--mobile-search.lgd-header__custom-toggle--mobile-search--active::before {
        background-image: url(/themes/custom/staffordshire/css/assets/images/site/icons/chevron-white.svg);
        background-size: cover;
        height: 0.5rem;
        margin-bottom: 0.125rem;
        transform: rotate(180deg) translate(50%,50%);
        width: 0.9375rem;
    }

    .lgd-header__toggle--primary span {
        clip: rect(0.0625rem,0.0625rem,0.0625rem,0.0625rem);
        height: 0.0625rem;
        overflow: hidden;
        position: absolute;
        width: 0.0625rem;
        word-wrap: normal;
    }

.lgd-header__custom-toggle--mobile-search::before {
    background-image: url("images/chevron.svg");
    content: "";
    display: block;
    height: 1rem;
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%,-50%);
    width: 0.9375rem;
}

.lgd-header__custom-toggle--mobile-search {
    background-color: var(--color-accent-2);
    border: none;
    border-radius: 50%;
    height: 2.25rem;
    margin-left: 0.9375rem;
    position: relative;
    width: 2.25rem;
}

    .lgd-header__custom-toggle--mobile-search:hover {
        background-color: var(--color-accent);
    }

.main-menu__dropdown .lgd-container {
    align-items: start;
    display: flex;
    flex-direction: column;
    justify-content: start;
    padding: 0;
}

.lgd-header__nav--primary {
    display: none;
}

    .lgd-header__nav--primary.lgd-header__nav--active {
        display: block;
        width: 100%;
    }

.main-menu__dropdown {
    background-color: var(--color-white);
}

@media screen and (min-width:48rem) {
    .lgd-region--primary-menu {
        background-color: transparent;
    }

        .lgd-region--primary-menu .main-menu {
            display: flex;
            flex-wrap: wrap;
        }

    .menu---sub-menu {
        background-color: var(--color-accent-2);
        left: 0rem;
        position: absolute;
    }

    .main-menu {
        align-items: center;
        flex-direction: row;
        padding: 0;
    }

    .main-menu__dropdown-title {
        font-size: var(--font-size-larger-1);
        line-height: 100%;
        margin-bottom: 2.5rem;
    }

        .main-menu__dropdown-title::after {
            margin-top: 1.625rem;
            width: 12.125rem;
        }

    a.main-menu__submenu-link {
        font-size: var(--font-size-small);
        font-weight: normal;
    }

    .main-menu__dropdown .lgd-container {
        max-width: 82.625rem;
        padding: 3.125rem var(--spacing-padding-horizontal);
    }

    .main-menu__submenu {
        display: grid;
        gap: 1.25rem;
        grid-auto-columns: minmax(0,1fr);
        grid-auto-flow: column;
        grid-auto-rows: auto;
        padding-inline-start: 0.625rem;
        width: 100%;
    }

    .main-menu__submenu-item:nth-child(5n + 1) {
        grid-row: 1;
    }

    .main-menu__submenu-item:nth-child(5n + 2) {
        grid-row: 2;
    }

    .main-menu__submenu-item:nth-child(5n + 3) {
        grid-row: 3;
    }

    .main-menu__submenu-item:nth-child(5n + 4) {
        grid-row: 4;
    }

    .main-menu__submenu-item:nth-child(5n + 5) {
        grid-row: 5;
    }

    .lgd-header__nav--primary {
        display: flex;
    }

    .main-menu__submenu-item::before {
        height: 0.625rem;
        top: 0.3rem;
        width: 1.0925rem;
    }
}

.region-content-top {
    margin-bottom: 2.5rem;
}

.lgd-page-title-block {
    padding-top: 0.625rem;
}

.page-node-type-localgov-guides-page .lgd-page-title-block::after, .page-node-type-localgov-guides-overview .lgd-page-title-block::after, .page-node-type-localgov-publication-page .lgd-page-title-block::after, .page-node-type-localgov-step-by-step-overview .lgd-page-title-block::after {
    background-color: var(--color-accent);
    content: "";
    display: block;
    height: 0.25rem;
    margin-top: 3.125rem;
    width: 12.5rem;
}

.page-node-type-localgov-guides-page .lgd-page-title-block--no-lede::after, .page-node-type-localgov-guides-overview .lgd-page-title-block--no-lede::after {
    margin-top: 1.8125rem;
}

.page-node-type-localgov-directories-page .lgd-page-title-block, .page-node-type-localgov-publication-page .lgd-page-title-block, .page-node-type-localgov-step-by-step-overview .lgd-page-title-block {
    margin-bottom: 2.5rem;
}

.lgd-page-title-block__title {
    color: var(--color-accent-2);
    margin-bottom: 0rem;
    padding-bottom: 1.8125rem;
}

    .lgd-page-title-block__title::after {
        background-color: var(--color-accent);
        content: "";
        display: block;
        height: 0.25rem;
        margin-top: 1.625rem;
        width: 12.5rem;
    }

.page-node-type-localgov-guides-page .lgd-page-title-block__title::after, .page-node-type-localgov-guides-overview .lgd-page-title-block__title::after, .page-node-type-localgov-news-article .lgd-page-title-block__title::after, .page-node-type-localgov-publication-page .lgd-page-title-block__title::after, .page-node-type-localgov-step-by-step-page .lgd-page-title-block__title::after, .page-node-type-localgov-step-by-step-overview
.lgd-page-title-block__title::after {
    display: none;
}

.lgd-page-title-block--no-lede .lgd-page-title-block__title {
    padding-bottom: 0rem;
}

.lgd-page-title-block__subtitle, .lgd-page-title-block__subheader {
    font-size: var(--page-title-lede-font-size);
}

.lgd-page-title-block__subheader {
    color: var(--color-accent-2);
    margin-block-end: 0;
    max-width: unset;
}

.lgd-page-title-block__last-updated-date {
    color: var(--color-white);
    font-size: var(--font-size-small);
    margin-block: 1.8125rem 0rem;
}

.lgd-page-title-block--no-lede p:empty {
    margin: 0rem;
}

@media (min-width:48rem) {
    .region-content-top {
        margin-bottom: 3.75rem;
    }

    .page-node-type-localgov-directories-page .lgd-page-title-block, .page-node-type-localgov-publication-page .lgd-page-title-block {
        margin-bottom: 3.75rem;
    }

    .lgd-page-title-block__last-updated-date {
        font-size: var(--font-size-medium);
    }
}

.sticky-header--sticky .lgd-header {
    z-index: 1000;
    top: var(--lgd-sticky-header-position);
    width: 100%;
}

    .sticky-header--sticky .lgd-header + * {
        margin-block-start: calc(var(--lgd-sticky-header-position) + var(--lgd-sticky-header-height));
        scroll-padding: var(--lgd-sticky-header-height);
    }

.sticky-header-html, .sticky-header--sticky {
    scroll-padding-block-start: var(--lgd-sticky-header-height);
}

.lgd-page-title-block__title {
    color: var(--color-white);
    font-size: var(--font-size-larger);
}

.lgd-page-title-block__subheader {
    color: var(--color-white);
}

.lgd-region--breadcrumb {
    background-color: var(--color-accent-2);
}

.breadcrumbs__link {
    color: var(--color-white);
}

.breadcrumbs .breadcrumbs__link:hover, .breadcrumbs .breadcrumbs__link:focus {
    background-color: var(--color-accent);
    color: var(--color-white);
}

.breadcrumbs__item + .breadcrumbs__item::before {
    background-color: var(--color-white);
}

.region-content-top {
    background-color: var(--color-accent-2);
    padding-bottom: 3.125rem;
}

@media (min-width:48rem) {
    .region-content-top {
        padding-bottom: 4.375rem;
    }

    .lgd-page-title-block__title {
        font-size: var(--font-size-h1);
        padding-bottom: 2.5rem;
    }
}

body {
    background-color: var(--color-white);
}

.service-landing-page__services .lgd-row, .localgov-services-sublanding__content .lgd-row {
    row-gap: 2.5rem;
}

.lgd-teaser-list .service-landing-page__service, .lgd-teaser-list .lgd-topic-list-builder__service {
    gap: 0.625rem;
    margin-block-end: 0;
    padding: 1.25rem;
}

.lgd-teaser__content > h3 {
    margin-block-end: 1.3125rem;
}

.services-page .lgd-row {
    gap: 2.5rem;
}

.services-page__contact {
    border-inline-start: 0.3125rem solid var(--color-accent);
    list-style: none;
    margin-block-end: 3.125rem;
    padding-inline-start: 1.875rem;
}

.services-page__contact-list-item a {
    text-underline-offset: 0.25rem;
}

    .services-page__contact-list-item a:hover {
        color: var(--color-accent);
        text-decoration-thickness: unset;
    }

.toc {
    background-color: var(--color-white);
    box-shadow: 0 0.25rem 0.46875rem 0 #00000026;
    padding: 1.875rem;
}

.toc__title {
    font-size: var(--font-size-large);
    margin-block-end: 1.4375rem;
}

.toc-list {
    display: grid;
    gap: 1.125rem;
    padding-inline-start: 0;
}

    .toc-list .toc-list {
        margin-top: 1.125rem;
    }

    .toc-list .toc-link {
        align-items: center;
        display: flex;
        font-size: var(--font-size-small);
        gap: 0.375rem;
        height: unset;
        text-decoration: none;
    }

        .toc-list .toc-link:hover, .toc-list .toc-link:focus {
            color: var(--color-accent);
            text-decoration: underline;
        }

.toc-link::before {
    background-color: unset;
    background-image: url(images/chevron.svg);
    background-size: cover;
    flex-shrink: 0;
    height: 0.625rem;
    max-height: unset;
    position: static;
    rotate: -90deg;
    width: 1.125rem;
}

.field--name-localgov-page-components {
    margin-top: 1.875rem;
}

    .field--name-localgov-page-components > .field__item:not(.field--name-localgov-page-components > .field__item:first-child) {
        margin-block-start: 1.875rem;
    }

    .field--name-localgov-page-components .field--name-label {
        display: none;
    }

.localgov-services-sublanding__content .node-teaser a {
    color: var(--color-blue);
    display: block;
    font-size: 1.625rem;
    font-weight: 700;
    line-height: 1.875rem;
    margin-bottom: 1.3125rem;
    text-decoration: none;
}

    .localgov-services-sublanding__content .node-teaser a:hover, .localgov-services-sublanding__content .node-teaser a:focus {
        color: var(--color-accent);
        text-decoration: underline;
    }

.services-page__content .field--name-body li {
    margin-block-end: 0.5rem;
}

.services-page__content .field--name-body .field__item {
    margin-block: 1rem;
}

    .services-page__content .field--name-body .field__item a:hover, .services-page__content .field--name-body .field__item a:focus {
        text-decoration: underline;
    }

@media (min-width:48rem) {
    .service-landing-page__services .lgd-row {
        column-gap: 1.25rem;
    }

    .lgd-teaser-list .service-landing-page__service {
        min-height: 12.5rem;
    }

    .services-page .lgd-row {
        gap: 3.75rem;
    }

    .toc {
        border-radius: 0.5rem;
        min-width: 42.5rem;
        width: fit-content;
    }

    .field--name-localgov-page-components {
        margin-top: 3.125rem;
    }
}

.social-media-icons {
    align-items: center;
    column-gap: 2.875rem;
    display: flex;
    flex-wrap: wrap;
    row-gap: 3.125rem;
}

    .social-media-icons .social-media-icons__link {
        color: var(--color-white);
    }

        .social-media-icons .social-media-icons__link:hover, .social-media-icons .social-media-icons__link:focus {
            color: var(--color-black);
            opacity: 0.8;
        }

.social-media-icons__link svg {
    height: auto;
    width: 2.5rem;
}

@media (min-width:48rem) {
    .social-media-icons {
        gap: 2.125rem;
    }

    .social-media-icons__link svg {
        width: 3.5rem;
    }
}

@media (min-width:64rem) {
    .social-media-icons {
        max-width: 25rem;
    }
}
