/* ======================================================
   Global Responsive
====================================================== */


/* ======================================================
   Tablet
====================================================== */

@media (max-width: 1100px) {

    /* ==================================================
       Footer
    ================================================== */

    .site-footer__main {
        grid-template-columns:
            repeat(3, 1fr);
    }

    .site-footer__brand {
        grid-column: 1 / -1;

        max-width: 500px;
    }

}


/* ======================================================
   Header / Navigation Tablet Breakpoint
====================================================== */

@media (max-width: 1180px) {

    /* ==================================================
       Header
    ================================================== */

    .site-header__inner {
        position: relative;

        display: flex;

        align-items: center;
        justify-content: space-between;

        height: 64px;
    }

    .site-logo {
        flex: 0 0 auto;
    }

    .site-logo img {
        height: 36px;
        width: auto;
    }


    /* ==================================================
       Mobile Menu Button
    ================================================== */

    .site-menu-toggle {
        display: flex;

        flex: 0 0 auto;
    }


    /* ==================================================
       Mobile Navigation Container
    ================================================== */

    .site-nav {
        position: absolute;

        top: 100%;
        left: 0;
        right: 0;

        z-index: 1000;

        display: none !important;

        margin: 0 !important;

        width: 100% !important;
        max-width: none !important;

        padding: 1rem;

        background: #fff;

        border-top:
            1px solid
            var(--colour-border);

        border-bottom:
            1px solid
            var(--colour-border);

        box-shadow:
            0 18px 35px
            rgba(20, 16, 37, .1);

        max-height:
            calc(100vh - 64px);

        overflow-y: auto;

        transform: none !important;
    }

    .site-nav.is-open {
        display: block !important;
    }


    /* ==================================================
       Mobile Top-Level Menu
    ================================================== */

    .site-nav__list {
        display: flex;

        flex-direction: column;

        align-items: stretch;

        gap: 0;

        width: 100%;

        margin: 0;
        padding: 0;
    }

    .site-nav__list > li {
        width: 100%;
    }

    .site-nav__list > li > a {
        display: flex;

        align-items: center;
        justify-content: space-between;

        width: 100%;

        padding:
            .85rem
            .5rem;

        border-bottom:
            1px solid
            var(--colour-border);

        background: transparent;

        color: var(--colour-heading);

        white-space: normal;
    }

    .site-nav__list > li > a:hover {
        color: var(--colour-accent);
    }

    .site-nav__list > .current-menu-item > a,
    .site-nav__list > .current-menu-parent > a,
    .site-nav__list > .current-menu-ancestor > a {
        color: var(--colour-heading);
    }

    .site-nav__list > .current-menu-item > a:hover,
    .site-nav__list > .current-menu-parent > a:hover,
    .site-nav__list > .current-menu-ancestor > a:hover {
        color: var(--colour-accent);
    }


    /* ==================================================
       Disable Desktop Underline
    ================================================== */

    .site-nav__list a::after {
        display: none;
    }


    /* ==================================================
       Mobile Dropdown Arrow
    ================================================== */

    .site-nav__list
    > .menu-item-has-children
    > a {
        display: flex;

        align-items: center;

        gap: .5rem;
    }

    .site-nav__list
    > .menu-item-has-children
    > a::before {
        width: 7px;
        height: 7px;

        flex: 0 0 7px;

        margin-left: auto;

        border-right:
            1.5px solid
            currentColor;

        border-bottom:
            1.5px solid
            currentColor;

        transform:
            rotate(45deg);

        order: 2;
    }

    .site-nav__list
    > .menu-item-has-children.is-open
    > a::before {
        transform:
            rotate(225deg);
    }


    /* ==================================================
       Mobile Submenu
    ================================================== */

    .site-nav__list
    > .menu-item-has-children
    > .sub-menu {
        position: static !important;

        display: none;

        width: 100% !important;
        max-width: none !important;

        margin: 0;

        padding:
            .5rem
            0
            .75rem
            1rem;

        border: 0;

        border-radius: 0;

        background: transparent;

        box-shadow: none;

        opacity: 1;
        visibility: visible;

        transform: none !important;

        grid-template-columns: 1fr;
    }

    .site-nav__list
    > .menu-item-has-children.is-open
    > .sub-menu {
        display: block;
    }


    /* ==================================================
       Mobile Submenu Items
    ================================================== */

    .site-nav__list
    > .menu-item-has-children
    > .sub-menu
    > li
    > a {
        display: block;

        width: 100%;

        margin: 0;

        padding:
            .65rem
            .5rem;

        border: 0;

        background: transparent;

        color: var(--colour-heading);

        white-space: normal;

        font-size: .9rem;
    }

    .site-nav__list
    > .menu-item-has-children
    > .sub-menu
    > li
    > a:hover {
        color: var(--colour-accent);
    }


    /* ==================================================
       Mobile Nested Submenus
    ================================================== */

    .site-nav__list
    > .menu-item-has-children
    > .sub-menu
    .sub-menu {
        display: block;

        margin: 0;

        padding:
            0
            0
            0
            .75rem;

        list-style: none;

        gap: .15rem;
    }

    .site-nav__list
    > .menu-item-has-children
    > .sub-menu
    .sub-menu
    a {
        padding:
            .4rem
            .5rem;

        color: var(--colour-text);

        font-size: .85rem;
    }


    /* ==================================================
       Mobile Menu Descriptions
    ================================================== */

    .site-nav__description {
        display: block;

        max-width: none;

        margin:
            -.2rem
            0
            .5rem;

        padding:
            0
            .5rem;

        color: var(--colour-text);

        font-size: .8rem;

        line-height: 1.45;
    }


    /* ==================================================
       Mobile Mega Menu Footer
    ================================================== */

    .site-nav__mega-footer {
        display: block !important;

        width: 100%;

        margin: .75rem 0 0;

        padding:
            .75rem
            .5rem
            0;

        border-top:
            1px solid
            var(--colour-border);

        grid-column: auto !important;
    }

    .site-nav__mega-footer-text {
        display: block;

        color: var(--colour-text);

        font-size: .8rem;

        line-height: 1.45;
    }

    .site-nav__mega-footer-text a {
        color: var(--colour-accent);
    }


    /* ==================================================
       Mobile Header Actions
    ================================================== */

    .site-actions {
        display: none;
    }


    /* ==================================================
       Mobile Navigation Actions
    ================================================== */

    .site-nav__mobile-actions {
        display: flex;

        flex-direction: column;

        gap: .75rem;

        margin-top: 1rem;

        padding-top: 1rem;

        border-top:
            1px solid
            var(--colour-border);
    }

    .site-nav__mobile-actions .button {
        display: flex;

        width: 100%;

        height: 46px;

        white-space: nowrap;
    }

    .site-nav__mobile-actions
    .button-secondary {
        border:
            1px solid
            var(--colour-border);

        background: #fff;

        color: var(--colour-heading);
    }

    .site-nav__mobile-actions
    .button-secondary:hover {
        border-color:
            var(--colour-accent);

        background: #fff;

        color: var(--colour-accent);
    }


}


/* ======================================================
   Mobile
====================================================== */

@media (max-width: 700px) {

    /* ==================================================
       General
    ================================================== */

    .container {
        width: min(
            100% - 32px,
            var(--container)
        );
    }


    /* ==================================================
       Header
    ================================================== */

    .site-header__inner {
        position: relative;

        display: flex;

        align-items: center;
        justify-content: space-between;

        height: 64px;
    }

    .site-logo {
        flex: 0 0 auto;
    }

    .site-logo img {
        height: 36px;
        width: auto;
    }


    /* ==================================================
       Mobile Menu Button
    ================================================== */

    .site-menu-toggle {
        display: flex;

        flex: 0 0 auto;
    }


    /* ==================================================
       Mobile Navigation Container
    ================================================== */

    .site-nav {
        position: absolute;

        top: 100%;
        left: 0;
        right: 0;

        z-index: 1000;

        display: none !important;

        margin: 0 !important;

        width: 100% !important;
        max-width: none !important;

        padding: 1rem;

        background: #fff;

        border-top:
            1px solid
            var(--colour-border);

        border-bottom:
            1px solid
            var(--colour-border);

        box-shadow:
            0 18px 35px
            rgba(20, 16, 37, .1);

        max-height:
            calc(100vh - 64px);

        overflow-y: auto;

        transform: none !important;
    }

    .site-nav.is-open {
        display: block !important;
    }


    /* ==================================================
       Mobile Top-Level Menu
    ================================================== */

    .site-nav__list {
        display: flex;

        flex-direction: column;

        align-items: stretch;

        gap: 0;

        width: 100%;

        margin: 0;
        padding: 0;
    }

    .site-nav__list > li {
        width: 100%;
    }

    .site-nav__list > li > a {
        display: flex;

        align-items: center;
        justify-content: space-between;

        width: 100%;

        padding:
            .85rem
            .5rem;

        border-bottom:
            1px solid
            var(--colour-border);

        background: transparent;

        color: var(--colour-heading);

        white-space: normal;
    }

    .site-nav__list > li > a:hover {
        color: var(--colour-accent);
    }

    .site-nav__list > .current-menu-item > a,
    .site-nav__list > .current-menu-parent > a,
    .site-nav__list > .current-menu-ancestor > a {
        color: var(--colour-heading);
    }

    .site-nav__list > .current-menu-item > a:hover,
    .site-nav__list > .current-menu-parent > a:hover,
    .site-nav__list > .current-menu-ancestor > a:hover {
        color: var(--colour-accent);
    }


    /* ==================================================
       Disable Desktop Underline
    ================================================== */

    .site-nav__list a::after {
        display: none;
    }


    /* ==================================================
       Mobile Dropdown Arrow
    ================================================== */

    .site-nav__list
    > .menu-item-has-children
    > a {
        display: flex;

        align-items: center;

        gap: .5rem;
    }

    .site-nav__list
    > .menu-item-has-children
    > a::before {
        width: 7px;
        height: 7px;

        flex: 0 0 7px;

        margin-left: auto;

        border-right:
            1.5px solid
            currentColor;

        border-bottom:
            1.5px solid
            currentColor;

        transform:
            rotate(45deg);

        order: 2;
    }

    .site-nav__list
    > .menu-item-has-children.is-open
    > a::before {
        transform:
            rotate(225deg);
    }


    /* ==================================================
       Mobile Submenu
    ================================================== */

    .site-nav__list
    > .menu-item-has-children
    > .sub-menu {
        position: static !important;

        display: none;

        width: 100% !important;
        max-width: none !important;

        margin: 0;

        padding:
            .5rem
            0
            .75rem
            1rem;

        border: 0;

        border-radius: 0;

        background: transparent;

        box-shadow: none;

        opacity: 1;
        visibility: visible;

        transform: none !important;

        grid-template-columns: 1fr;
    }

    .site-nav__list
    > .menu-item-has-children.is-open
    > .sub-menu {
        display: block;
    }


    /* ==================================================
       Mobile Submenu Items
    ================================================== */

    .site-nav__list
    > .menu-item-has-children
    > .sub-menu
    > li
    > a {
        display: block;

        width: 100%;

        margin: 0;

        padding:
            .65rem
            .5rem;

        border: 0;

        background: transparent;

        color: var(--colour-heading);

        white-space: normal;

        font-size: .9rem;
    }

    .site-nav__list
    > .menu-item-has-children
    > .sub-menu
    > li
    > a:hover {
        color: var(--colour-accent);
    }


    /* ==================================================
       Mobile Nested Submenus
    ================================================== */

    .site-nav__list
    > .menu-item-has-children
    > .sub-menu
    .sub-menu {
        display: block;

        margin: 0;

        padding:
            0
            0
            0
            .75rem;

        list-style: none;

        gap: .15rem;
    }

    .site-nav__list
    > .menu-item-has-children
    > .sub-menu
    .sub-menu
    a {
        padding:
            .4rem
            .5rem;

        color: var(--colour-text);

        font-size: .85rem;
    }


    /* ==================================================
       Mobile Menu Descriptions
    ================================================== */

    .site-nav__description {
        display: block;

        max-width: none;

        margin:
            -.2rem
            0
            .5rem;

        padding:
            0
            .5rem;

        color: var(--colour-text);

        font-size: .8rem;

        line-height: 1.45;
    }


    /* ==================================================
       Mobile Mega Menu Footer
    ================================================== */

    .site-nav__mega-footer {
        display: block !important;

        width: 100%;

        margin: .75rem 0 0;

        padding:
            .75rem
            .5rem
            0;

        border-top:
            1px solid
            var(--colour-border);

        grid-column: auto !important;
    }

    .site-nav__mega-footer-text {
        display: block;

        color: var(--colour-text);

        font-size: .8rem;

        line-height: 1.45;
    }

    .site-nav__mega-footer-text a {
        color: var(--colour-accent);
    }


    /* ==================================================
       Mobile Header Actions
    ================================================== */

    .site-actions {
        display: none;
    }


    /* ==================================================
       Mobile Navigation Actions
    ================================================== */

    .site-nav__mobile-actions {
        display: flex;

        flex-direction: column;

        gap: .75rem;

        margin-top: 1rem;

        padding-top: 1rem;

        border-top:
            1px solid
            var(--colour-border);
    }

    .site-nav__mobile-actions .button {
        display: flex;

        width: 100%;

        height: 46px;

        white-space: nowrap;
    }

    .site-nav__mobile-actions
    .button-secondary {
        border:
            1px solid
            var(--colour-border);

        background: #fff;

        color: var(--colour-heading);
    }

    .site-nav__mobile-actions
    .button-secondary:hover {
        border-color:
            var(--colour-accent);

        background: #fff;

        color: var(--colour-accent);
    }


    /* ==================================================
       Footer
    ================================================== */

    .site-footer__main {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );

        gap:
            2.5rem
            1.5rem;

        padding-block: 3rem;
    }

    .site-footer__brand {
        grid-column: 1 / -1;

        max-width: none;
    }

    .site-footer__bottom {
        flex-direction: column;

        align-items: flex-start;

        gap: 1rem;
    }

    .site-footer__legal {
        flex-wrap: wrap;

        gap:
            .75rem
            1.25rem;
    }

}

/* ======================================================
   Blog Post
====================================================== */

@media (max-width: 700px) {

    .blog-post-navigation {
        grid-template-columns: 1fr;
    }

    .blog-post-navigation__previous,
    .blog-post-navigation__next {
        text-align: left;
    }

}


/* ======================================================
   Blog Category Archive
====================================================== */

@media (max-width: 1000px) {

    .blog-category-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}


@media (max-width: 650px) {

    .blog-category-grid {
        grid-template-columns: 1fr;
    }

    .blog-category-hero__description {
        font-size: 1rem;
    }

    .blog-card__body {
        padding: var(--space-5);
    }

}


/* ======================================================
   Blog Home
====================================================== */

@media (max-width: 1000px) {

    .blog-featured {
        grid-template-columns: 1fr;
    }

    .blog-featured__image {
        min-height: 320px;
    }

    .blog-home-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .blog-home-cta__inner {
        align-items: flex-start;
        flex-direction: column;
    }

}


@media (max-width: 650px) {

    .blog-home-hero__description {
        font-size: 1rem;
    }

    .blog-home-categories__nav {
        align-items: flex-start;
        flex-direction: column;
    }

    .blog-home-categories__label {
        margin-bottom: .25rem;
    }

    .blog-home-grid {
        grid-template-columns: 1fr;
    }

    .blog-featured__image {
        min-height: 240px;
    }

    .blog-featured__content {
        padding: var(--space-5);
    }

}