/* ------------------------------ */
/* Main Navigation
/* ------------------------------ */
/* Keep header above layered content in page header */
header.site-header {
    position: relative;
    z-index: 99;
}

/* In tablet screen range, split to two rows */
@media screen and (min-width: 600px) and (max-width: 900px) {
    header.site-header .wp-block-group .wp-block-group .wp-block-group.wp-block-group-is-layout-flex {
        display: grid;
        grid-template-columns: auto auto;
        grid-template-rows: auto auto;
        gap: var(--wp--preset--spacing--large);

        .wp-block-navigation {
            order: 3;
            grid-column: span 2;
        }
    }
}

/* Reorder nav hamburger and button on smallest screens */
/* Button moves to middle, nav on right. */
@media only screen and (max-width: 600px) {
    header.site-header {
        .wp-block-buttons {
            order: 2;
        }
        .wp-block-navigation {
            order: 3;
        }
    }
    /* Condense block spacing */
    header.site-header .wp-block-group .wp-block-group .wp-block-group.wp-block-group-is-layout-flex {
        gap: var(--wp--preset--spacing--two-x-large);
    }
}


/* ------------------------------ */
/* Footer
/* ------------------------------ */
footer.site-footer {
    /* Add node background textures to the group with the bg color applied */
    .has-background[class*=has-roar-purple] {
        background-image: url(/wp-content/themes/roar/assets/images/texture-footer-top.svg), url(/wp-content/themes/roar/assets/images/texture-footer-bottom.svg);
        background-position: right top, left bottom var(--wp--preset--spacing--ten-x-large);
        background-repeat: no-repeat;
    }

    /* Scale the logo */
    .is-layout-grid .wp-block-group:first-child .wp-block-image img {
        width: 10rem;
    }

    /* Precise alignment of grid items around navigation lists */
    .is-layout-grid {
        grid-template-columns: repeat(6, 1fr);
    }
    .is-layout-grid .wp-block-group:first-child {
        grid-column: span 2;
    }
}
/* Extra space around logo/contact column on largest screens */
@media only screen and (min-width: 1300px) {
    footer.site-footer .has-background[class*=has-roar-purple] .is-layout-grid .wp-block-group:first-child {
        margin-right: clamp(1rem, 10vw, 6rem);
    }
}
/* Reflow layout for smaller screens */
@media only screen and (max-width: 1000px) {
    footer.site-footer .has-background[class*=has-roar-purple] .is-layout-grid {
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: auto auto;

        .wp-block-group:first-child {
            grid-column: span 4;
        }
        .wp-block-navigation__container {
            gap: var(--wp--preset--spacing--extra-large)
        }
    }
    footer.site-footer .has-background[class*=has-roar-purple] {
        background-position: right top, left bottom;
    }
}
@media only screen and (max-width: 781px) {
    footer.site-footer .has-background[class*=has-roar-purple] .is-layout-grid {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(4, auto);

        .wp-block-group:first-child {
            grid-column: span 2;
        }
    }
}


/* ------------------------------ */
/* Sidebar / Secondary Nav
/* ------------------------------ */
.dvo--secondary-nav__top-level-link {
    font-size: var(--wp--preset--font-size--heading-five);
    font-family: var(--wp--preset--font-family--font-secondary);
    text-decoration: none;
}

.dvo--secondary-nav ul {
    padding-left: 0;
}

.dvo--secondary-nav ul li {
    font-size: var(--wp--preset--font-size--text-extra-large);
    margin-bottom: var(--wp--preset--spacing--three-x-large);
    &:last-child {
        margin-bottom: 0;
    }
    a {
        text-decoration: none;
    }

    /* Nested / Child Pages */
    ul {
        /* Only the top level is visible unless the editor chooses the full-sidebar-nav template */
        display: none;

        margin-top: var(--wp--preset--spacing--three-x-large);
        padding-left: var(--wp--preset--spacing--five-x-large);
        /* Always on own line below parent. */
        grid-column: span 2;

        li {
            display: block;
        }
    }
}

/* Show full sidebar nav instead of only top level */
.roar__sidebar-full-nav .dvo--secondary-nav ul li ul {
    display: block;
}

/* ------------------------------ */
/* Beacon list:
/* Beacon icon replaces default bullet.
/* ------------------------------ */

/* Hey wait... why is this in navigation and not with core/list? */

/* We use the beacon list style in the sidebar nav, which uses core/page list to
generate links for the section being viewed. The Page List block doesn't call a
core/list block, even though it generates a <ul>. While roar__list-beacon is a
variant for core/list, we define it here in navigation, allowing the secondary
nav to extend the style since the pattern lives in the parent theme.
*/

ul[class*="is-style-roar__list-beacon"],
ul[class*="is-style-roar__list-x"],
.dvo--secondary-nav ul {
    list-style: none;

    li {
        display: grid;
        grid-template-columns: calc(1em + var(--wp--preset--spacing--large)) auto;

        &::before {
            --roar--list-beacon--bullet-size: 1em;
            content: '';
            display: inline-block;
            background-image: url(/wp-content/themes/roar/assets/images/bullet-beacon-cobalt.svg);
            background-repeat: no-repeat;
            background-size: contain;
            grid-column-start: 1;
            min-width:var(--roar--list-beacon--bullet-size);
            height:var(--roar--list-beacon--bullet-size);
            margin-right:var(--wp--preset--spacing--large);

            /* Margin-top calc explainer:
            /* Multiply the base line height * 1rem to get a value with a unit,
            /* since the line-height is a unitless percentage (ie 1.5).
            /* Then subtract the height of the fancy bullet.
            /* Divide that value by 2, to align to the middle of the line.
            /* Finally, subtract 1px for the "human eye" factor:
            /*      adjust for the bullet looking misaligned vertically due to the circle arc.
            */
            margin-top: calc((((1em * var(--wp--custom--line-height--text-medium)) - var(--roar--list-beacon--bullet-size)) / 2) - 0.063em);
        }
    }

    /* Leverage subscript wrap in WP to allow for multi-line li children in beacon lists. */
    li sub {
        vertical-align: baseline;
        font-size: inherit;
    }
}

ul[class*="beacon-mint"] li::before {
    background-image: url(/wp-content/themes/roar/assets/images/bullet-beacon-mint.svg);
}

ul[class*="is-style-roar__list-x"] li::before {
    background-image: url(/wp-content/themes/roar/assets/images/bullet-x.svg);
}