/**
 * Matheson HTML Sitemap Styles
 *
 * Every list rule is scoped under .msc-sitemap because Divi's
 * `#left-area ul, .entry-content ul, .et-l--body ul { list-style-type: disc;
 * padding: 0 0 23px 1em }` outweighs a lone class selector and would otherwise
 * put bullets and a 23px gap back on every link.
 */

.et_pb_row:has(.msc-sitemap) {
    max-width: var(--msc-content-max-width, 1208px) !important;
    margin: 24px auto 72px;
}

.msc-sitemap,
.msc-sitemap * {
    box-sizing: border-box;
}

.msc-sitemap-title {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 42px;
    font-weight: 700;
    line-height: 1.05;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--msc-primary, #25285F);
    margin: 0 0 14px;
    padding: 0;
}

.msc-sitemap-lede {
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: #4a4a4a;
    max-width: 62ch;
    margin: 0 0 44px;
    padding: 0;
}

.msc-sitemap-lede a {
    color: var(--msc-accent-strong, #3E6CB8);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.msc-sitemap-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 44px 32px;
    align-items: start;
}

.msc-sitemap-group {
    min-width: 0;
}

/* Projects and News carry several times the links of any other section. Left in
   the uniform grid they set the height of their whole row and strand empty space
   beside the short sections, so they span it and column their own contents. */
.msc-sitemap-group--wide {
    grid-column: 1 / -1;
}

.msc-sitemap-heading {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.1;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--msc-primary, #25285F);
    margin: 0 0 14px;
    padding: 0 0 10px;
    border-bottom: 2px solid var(--msc-accent, #9CC3E8);
}

.msc-sitemap-subheading {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.1;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--msc-primary, #25285F);
    margin: 0 0 8px;
    padding: 0;
}

.msc-sitemap-heading a,
.msc-sitemap-subheading a {
    color: inherit;
    text-decoration: none;
}

.msc-sitemap-heading a:hover,
.msc-sitemap-heading a:focus-visible,
.msc-sitemap-subheading a:hover,
.msc-sitemap-subheading a:focus-visible {
    text-decoration: underline;
    text-underline-offset: 4px;
}

.msc-sitemap .msc-sitemap-subgrid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 28px 32px;
    align-items: start;
    margin-top: 22px;
}

.msc-sitemap .msc-sitemap-subgroup {
    min-width: 0;
}

.msc-sitemap .msc-sitemap-subgroup--wide {
    grid-column: 1 / -1;
}

.msc-sitemap .msc-sitemap-list {
    list-style: none;
    margin: 0;
    padding: 0;
    line-height: 1.45;
}

.msc-sitemap .msc-sitemap-list li {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Long lists in a full-width band flow into columns rather than one tall stack.
   Reading order stays correct: CSS columns fill top to bottom, left to right. */
.msc-sitemap .msc-sitemap-list--flow {
    columns: 3;
    column-gap: 32px;
}

.msc-sitemap .msc-sitemap-list--flow li {
    break-inside: avoid;
}

.msc-sitemap .msc-sitemap-list a {
    display: block;
    font-family: 'Open Sans', sans-serif;
    font-size: 15px;
    color: #4a4a4a;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: rgba(74, 74, 74, 0.3);
    /* Keeps every row past the 24px minimum pointer target (WCAG 2.5.8). */
    padding: 5px 0;
    min-height: var(--msc-target-min, 24px);
}

.msc-sitemap .msc-sitemap-list a:hover,
.msc-sitemap .msc-sitemap-list a:focus-visible {
    color: var(--msc-accent-strong, #3E6CB8);
    text-decoration-color: currentColor;
}

@media (max-width: 1100px) {
    .msc-sitemap .msc-sitemap-list--flow {
        columns: 2;
    }
}

@media (max-width: 980px) {
    .msc-sitemap-grid {
        gap: 36px 24px;
    }

    .msc-sitemap-title {
        font-size: 32px;
    }

    .msc-sitemap-heading {
        font-size: 22px;
    }

    .msc-sitemap-lede {
        margin-bottom: 32px;
    }
}

@media (max-width: 600px) {
    .msc-sitemap .msc-sitemap-list--flow {
        columns: 1;
    }

    .msc-sitemap .msc-sitemap-subgrid {
        gap: 24px;
    }
}