/*
 *  This file is loaded in the WordPress editor AND on the front end.
 *  On the front end, editor-style.css loads BEFORE style.css.
 */
:root {
    --base: var(--wp--preset--color--base);
    --brand-1: var(--wp--preset--color--brand-1);
    --brand-2: var(--wp--preset--color--brand-2);
    --accent-1: var(--wp--preset--color--accent-1);
    --accent-2: var(--wp--preset--color--accent-2);
    --accent-3: var(--wp--preset--color--accent-3);
    --accent-4: var(--wp--preset--color--accent-4);
    --accent-5: var(--wp--preset--color--accent-5);
    --link: var(--wp--preset--color--links);
    --gray-9: var(--wp--preset--color--main);
    --gray-5: var(--wp--preset--color--gray-5);
    --gray-3: var(--wp--preset--color--gray-3);
    --gray-0: var(--wp--preset--color--base);
    --main: var(--wp--preset--color--main);
}

h2, h3, h4, h5, h6 {
    strong {
        font-weight: unset;
    }
}

th {
    text-align: left;
}

img {
    max-width: 100%;
    height: auto;
}

/* Sidebar */
.ums-sidebar-area li {
    list-style-type: none;
    border-bottom: solid 1px rgba(0, 0, 0, .05);
    line-height: 20px;
    padding: 5px 0;
    margin: 0;
}

.ums-sidebar-area ul {
    padding: 0;
    margin: 0 0 10px 15px;
}

.ums-sidebar-area a {
    color: var(--wp--preset--color--main);
}

.ums-sidebar-area {
    h2, h3, h4, h5, h6 {
        color: var(--wp--preset--color--brand-1);
        margin-top: 1em;
        margin-bottom: 0.5em;
    }

    --font-scale: 0.65;
    h2 { font-size: calc(var(--wp--preset--font-size--xxx-large) * var(--font-scale)); }
    h3 { font-size: calc(var(--wp--preset--font-size--xx-large) * var(--font-scale)); }
    h4 { font-size: calc(var(--wp--preset--font-size--x-large) * var(--font-scale)); }
}

/* Unset top margin on sidebar's first element */
.ums-sidebar-area .wp-block-chickadee-template-area > :nth-child(1 of :not(script, style)),
.ums-sidebar-area .wp-block-chickadee-template-area > .advanced-sidebar-menu:first-child .advanced-sidebar-menu-title {
    margin-top: unset;
}

/* Template Specific */
.page-template-page-no-title .hero-featured-img {
    margin-bottom: unset;
}

/* Archive/Posts Page pagination */
.wp-block-query .wp-block-query-pagination {
    gap: 5px;
}

.wp-block-query-pagination {
    .page-numbers, a {
        color: var(--wp--preset--color--main);
        background-color: var(--wp--preset--color--base);
        text-decoration: none;
        padding: 5px 12px;
        margin: 5px;
        border: 2px solid var(--wp--preset--color--gray-3);
        font-weight: var(--wp--custom--font-weight--medium);
        display: inline-block;
        transition: all .6s ease-out;
        -webkit-transition: all .6s ease-out;
    }

    a:hover {
        background-color: var(--wp--preset--color--gray-3);
        border-color: var(--wp--preset--color--main);
    }

    .page-numbers.current {
        background-color: var(--wp--preset--color--gray-3);
    }

    .wp-block-query-pagination-previous span,
    .wp-block-query-pagination-next span {
        margin: unset;
    }
}

/* Match separator to UMS/virtue design */
.wp-block-separator {
    margin: 1.65em auto;
}
hr.wp-block-separator:not(.is-style-wide):not(.is-style-dots) {
    width: 100px;
}

/* Match blockquote to UMS/virtue design */
blockquote.wp-block-quote.is-style-default {
    border-left: 5px solid var(--wp--preset--color--gray-5);
    padding: 10px 15px;
    font-weight: var(--wp--custom--font-weight--light);
}

/* Pattern: Vertical Marquee */
.ums-vertical-marquee {
    overflow: hidden;
    height: 80vh;
    flex-shrink: 0;
}

.ums-vertical-marquee > .is-layout-flex {
    height: 100%;
    gap: 1rem !important;
    align-items: flex-start;
}

.ums-vertical-marquee > .is-layout-flex > .wp-block-group {
    height: 100%;
    padding-inline: 0 !important;
    width: 160px;
    flex-shrink: 0;
    overflow: visible;
}

.ums-marquee-track-1,
.ums-marquee-track-2 {
    will-change: transform;
    width: 100%;
    flex-wrap: nowrap !important;
    align-items: stretch;
}

.ums-vertical-marquee .wp-block-image {
    margin: 0;
    flex-shrink: 0;
    width: 100%;
    min-width: 0;
}

.ums-vertical-marquee .wp-block-image img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 15px;
}

/* Pattern: Floating Content Panel */
.ums-floating-content-panel {
    overflow: hidden;
    --wp--preset--spacing--100: clamp(2rem, -1.2727rem + 14.5455vw, 10rem);;
}
.ums-floating-content-panel-inner {
    box-shadow: rgba(0, 0, 0, 0.4) 12px 12px 50px 0px;
}

/* Pattern: Chips */
.ums-chips p { border-radius: 50em; }
.ums-chips.ums-chips-sm p { padding: 0.15em 0.8em; }
.ums-chips.ums-chips-md p { padding: 0.5em 1.2em; }

/* Pattern: Number Circle */
.ums-number-circle > p {
    width: 2.2em;
    height: 2.2em;
    line-height: 2.2em;
    border-radius: 50em;
    text-align: center;
}

/* Pattern: Cards (link) */
.ums-card-link .ums-card {
    transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
}
.ums-card-link:not(:hover) .ums-card {
    border-color: transparent!important;
}
.ums-card-link:hover .ums-card {
    transform: translateY(-6px);
    box-shadow: 0 12px 24px -8px rgba(0, 0, 0, 0.18);
}