/** Resets and general styles **/

*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    min-height: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1,
h2,
p {
    margin: 0;
}

:focus-visible {
    border-radius: var(--mds-radius-sm);
    outline-offset: 2px;
}

ul {
    margin: 0;
    padding: 0;
}

.mds-footer *, .mds-footer *::before, .mds-footer *::after {
    box-sizing: border-box;
}

#api {
    background-color: var(--mds-background-section-brand-primary-mid);
    height: 400px;
    color: var(--mds-text-and-icons-utility-inverse);
    font: var(--mds-text-body);
}

.mds-section-container {
    width: min(100%, 1280px);
    margin-inline: auto;
    padding-inline: var(--mds-breakpoint-horizontal-space-margin);
    background: transparent;
    color: inherit;
}

/** State Banner **/
.mds-state-banner__container {
    width: min(100%, 1280px);
    margin-inline: auto;
    padding-inline: var(--mds-breakpoint-horizontal-space-margin);
    background: transparent;
    color: inherit;
}

.mds-state-banner {
    width: 100%;
    padding-block: var(--mds-space-3xs);
    background-color: var(--mds-background-section-utility-static-black);
    color: var(--mds-text-and-icons-utility-static-white);
    font: var(--mds-text-body); /** need to use var instead of utility class to best support font size change for smaller screens **/
}

.mds-state-banner__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 var(--mds-space-sm);
    width: 100%; /** Make clickable area of the banner full width **/
}

.mds-state-banner__brand {
    display: flex;
    align-items: center;
    gap: var(--mds-space-2xs);
}

.mds-state-banner__seal {
    width: 1.5rem;
    height: 1.5rem;
    align-self: self-start;
    margin-top: 2px; /** needs more spacing above, but needs to align to top for wrapping to work **/
}

.mds-state-banner__toggle-text {
    display: inline-flex;
    align-items: center;
    border-bottom: 2px solid;
    border-color: currentColor;
    line-height: 1.75; /** to match how it renders in figma, even though this is the same value of 1.8 in both **/
}

.mds-state-banner__details {
    interpolate-size: allow-keywords; /** need this to allow for the "auto" value in block-size to transition properly **/
}

    .mds-state-banner__details::details-content {
        block-size: 0;
        overflow: hidden;
        opacity: 0;
        transform: translateY(-8px);
        transition: block-size 300ms cubic-bezier(0.16, 1, 0.3, 1), opacity 300ms cubic-bezier(0.16, 1, 0.3, 1), transform 300ms cubic-bezier(0.16, 1, 0.3, 1), content-visibility 300ms cubic-bezier(0.16, 1, 0.3, 1) allow-discrete;
    }

    .mds-state-banner__details[open]::details-content {
        block-size: auto;
        opacity: 1;
        transform: translateY(0);
        transition: block-size 300ms ease-in, opacity 300ms ease-in, transform 300ms ease-in, content-visibility 300ms ease-in allow-discrete;
    }

.mds-state-banner__summary:focus-visible {
    border-radius: var(--mds-radius-sm);
    outline: 2px solid var(--mds-border-focus-on-light);
    outline-offset: 2px;
}

.mds-state-banner__summary::marker {
    content: "";
}

.mds-state-banner__summary::-webkit-details-marker {
    display: none;
}

.mds-state-banner__caret {
    width: 1.5rem;
    height: 1.5rem;
    margin-inline-start: var(--mds-space-2xs);
    transition: transform 160ms ease;
    font-weight: bold;
}

.mds-state-banner__details[open] .mds-state-banner__caret {
    transform: rotate(180deg);
}

.mds-state-banner__items {
    display: flex;
    flex-wrap: wrap;
    column-gap: var(--mds-breakpoint-horizontal-space-gutter);
}

.mds-state-banner__item {
    display: flex;
    align-items: flex-start;
    gap: var(--mds-space-sm);
    flex: 1 1 20rem;
    padding-block: var(--mds-space-2xs) var(--mds-space-sm);
}

.mds-state-banner__item-icon {
    width: 1.875rem;
    height: 1.875rem;
    fill: currentColor;
    flex: none;
}

.mds-state-banner__text {
    display: block;
}

.mds-state-banner__text-prefix {
    margin-inline-end: var(--mds-space-sm);
}

.mds-state-banner__item-copy {
    padding-block-start: var(--mds-space-2xs);
}

.mds-state-banner__item-heading {
    font: var(--mds-text-label);
}

.mds-state-banner__item-description {
    padding-block-start: var(--mds-space-2xs);
}

@media (max-width: 768px) {
    .mds-state-banner__seal {
        align-self: self-start;
    }
}

@media (max-width: 480px) {
    .mds-state-banner__container {
        padding-inline: var(--mds-space-sm);
    }

    .mds-state-banner__summary {
        display: flex;
        align-items: center;
    }

    .mds-state-banner__seal {
        display: none;
    }

    .mds-state-banner__text,
    .mds-state-banner__toggle-text {
        font: var(--mds-text-caption);
    }

    .mds-state-banner__toggle-text {
        display: inline-flex;
        padding-block-end: 2px;
    }

    .mds-state-banner__caret {
        width: 1rem;
        height: 1rem;
    }

    .mds-state-banner__item-icon {
        width: 1.5rem;
        height: 1.5rem;
    }

    .mds-state-banner__item-copy p,
    .mds-state-banner__item-copy h2 {
        font: var(--mds-text-caption);
    }
}
/** Site Header **/

address {
    font-style: normal;
}

.mds-site-header {
    width: 100%;
    background-color: var(--mds-background-section-brand-neutral-lowest);
    color: var(--mds-text-and-icons-brand-secondary-mid);
}

.mds-site-header__container {
    width: min(100%, 1280px);
    margin-inline: auto;
    padding-inline: var(--mds-breakpoint-horizontal-space-margin);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    padding-block: var(--mds-space-sm);
}

.mds-site-header__title {
    display: flex;
    flex: 1 0 0;
}

.mds-site-header__brand {
    display: flex;
    align-items: center;
    gap: var(--mds-space-sm);
    color: inherit;
    text-decoration: none;
}

    .mds-site-header__brand:focus-visible {
        border-radius: var(--mds-radius-sm);
        outline: 2px solid var(--mds-border-focus-on-light);
        outline-offset: 2px;
    }

.mds-site-header__seal {
    width: 54px;
    height: 54px;
    align-self: self-start;
}

.mds-site-header__text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--mds-space-3xs);
}

.mds-site-header__site-name {
    font: var(--mds-text-heading-sm);
}

.mds-site-header__organization {
    font: var(--mds-text-eyebrow-md);
    letter-spacing: var(--mds-text-letter-spacing-eyebrow);
    text-transform: var(--mds-text-transform-eyebrow);
}

/** Footer **/

.mds-footer__container {
    width: min(100%, 1280px);
    margin-inline: auto;
    padding-inline: var(--mds-breakpoint-horizontal-space-margin);
    background: transparent;
    color: inherit;
}

.mds-footer__link-list, .mds-footer__social-list, .mds-footer__legal-nav ul {
    list-style: none;
}

.mds-footer__column {
    grid-column: span calc(var(--mds-breakpoint-horizontal-space-columns) / 4);
}

@media (max-width: 1024px) {
    .mds-footer__column {
        grid-column: span calc(var(--mds-breakpoint-horizontal-space-columns) / 2);
    }
}

@media (max-width: 480px) {
    .mds-footer__column {
        grid-column: 1/-1;
    }
}

.mds-footer__content {
    display: grid;
    grid-template-columns: repeat(var(--mds-breakpoint-horizontal-space-columns), minmax(0, 1fr));
    column-gap: var(--mds-breakpoint-horizontal-space-gutter);
    min-height: 100%;
    padding-block: var(--mds-space-2xl) var(--mds-space-md);
}

.mds-footer__brand {
    display: flex;
    flex-direction: column;
    gap: var(--mds-space-2xs);
}

.mds-footer__brand-heading {
    display:flex;
    align-items:center;
    gap: var(--mds-space-sm);
}

.mds-footer__site-name {
    font: var(--mds-text-heading-sm);
}

.mds-footer__seal {
    width: 3.5rem;
    height: 3.5rem;
    align-self: self-start;
}

.mds-footer__site-name, .mds-footer__fine-print p {
    margin: 0;
}

.mds-footer__heading {
    padding-block-end: var(--mds-space-xs);
    border-block-end: 1px solid var(--mds-border-brand-neutral-low);
    font: var(--mds-text-eyebrow-md);
    text-transform: var(--mds-text-transform-eyebrow);
    letter-spacing: var(--mds-text-letter-spacing-eyebrow);
    color: var(--mds-text-and-icons-brand-neutral-muted);
}

.mds-footer__legal-nav a {
    color: var(--mds-text-and-icons-brand-neutral-default);
    text-decoration: none;
    text-underline-offset: 0.375rem;
}

    .mds-footer__legal-nav a:hover {
        text-decoration: underline;
        text-decoration-thickness: 2px;
    }

.mds-footer__legal-nav {
    border-block: 1px solid var(--mds-border-brand-neutral-low);
    padding-block: var(--mds-space-2xs);
    font: var(--mds-text-label-md);
}

    .mds-footer__legal-nav ul {
        display: flex;
        flex-wrap: wrap;
        gap: var(--mds-space-sm) var(--mds-space-lg);
    }

.mds-footer__fine-print {
    display: flex;
    flex-direction: column;
    gap: var(--mds-space-sm);
    padding-block: var(--mds-space-md) var(--mds-space-2xl);
    font: var(--mds-text-caption-md);
}

.mds-footer--neutral {
    --mds-footer-background: var(--mds-background-section-brand-neutral-lowest);
    --mds-footer-color: var(--mds-text-and-icons-brand-neutral-default);
    --mds-footer-muted-color: var(--mds-text-and-icons-brand-neutral-muted);
    --mds-footer-link-color: var(--mds-text-and-icons-brand-neutral-default);
    --mds-footer-link-hover-color: var(--mds-background-adaptive-brand-primary-high);
    --mds-footer-border-color: var(--mds-border-brand-neutral-low);
    --mds-footer-focus-color: var(--mds-border-focus-on-light);
    background-color: var(--mds-footer-background);
    color: var(--mds-footer-color);
}

    .mds-footer--neutral :focus-visible, .mds-footer--neutral :focus {
        outline: 2px solid var(--mds-footer-focus-color);
    }

    .mds-footer--neutral .mds-action-link {
        color: var(--mds-footer-color);
    }

    .mds-footer--neutral a:not(.mds-action-link) {
        color: var(--mds-footer-link-color);
        fill: currentColor;
    }

    .mds-footer--neutral .mds-footer__fine-print p {
        color: var(--mds-footer-muted-color);
    }

@media (max-width: 768px) {
    .mds-footer__content {
        row-gap: var(--mds-space-md);
        padding-block-start: var(--mds-space-md);
    }
}

@media (max-width: 480px) {
    .mds-footer__content {
        row-gap: var(--mds-space-md);
        padding-block-start: var(--mds-space-sm);
    }
}