/* Shared, accessible header and footer palette. */
html[data-site-color="navy"] { --site-chrome-color: #0c2744; }
html[data-site-color="green"] { --site-chrome-color: #14532d; }
html[data-site-color="orange"] { --site-chrome-color: #a44108; }
html[data-site-color="wine"] { --site-chrome-color: #812d42; }
html[data-site-color="purple"] { --site-chrome-color: #633268; }
html[data-site-color="teal"] { --site-chrome-color: #075e63; }
html[data-site-color="slate"] { --site-chrome-color: #334155; }

html[data-site-color] .lipa-utility,
html[data-site-color] .lipa-masthead,
html[data-site-color] .lipa-footer {
    background: var(--site-chrome-color, #0c2744);
    color: #fff;
}
html[data-site-color] .lipa-brand,
html[data-site-color] .lipa-footer small { color: #fff; }
html[data-site-color] .lipa-masthead { border-color: rgba(255, 255, 255, .2); }
html[data-site-color] .lipa-brand__logo {
    background: #fff;
    border-radius: .5rem;
    padding: .25rem;
}
html[data-site-color] .lipa-masthead .lipa-btn--ghost {
    border-color: #fff;
    color: #fff;
    background: transparent;
}
html[data-site-color] .lipa-masthead .lipa-btn--ghost:hover {
    color: var(--site-chrome-color);
    background: #fff;
}
html[data-site-color] .lipa-masthead a:focus-visible,
html[data-site-color] .lipa-utility a:focus-visible,
html[data-site-color] .lipa-footer a:focus-visible {
    outline-color: #fff;
}
html[data-site-color] .lipa-footer__founder-logo {
    background: #fff;
    border-radius: .5rem;
    padding: .5rem;
}

/* Quiet content introductions alongside every header/footer palette. */
.lipa-main .lipa-overview-hero {
    background: #f3f8f8;
    color: #0c2744;
    border-bottom: 1px solid #dde7e8;
}
.lipa-main .lipa-overview-hero h1 { color: #0c2744; }
.lipa-main .lipa-overview-hero .lipa-kicker { color: #075e63; }
.lipa-main .lipa-overview-hero p:not(.lipa-kicker) {
    color: #486175;
    opacity: 1;
}
.lipa-main .lipa-overview-hero a { color: #075e63; }
.lipa-main .lipa-overview-hero a:hover { color: #0c2744; }
.lipa-main .lipa-overview-hero a:focus-visible {
    outline: 3px solid #075e63;
    outline-offset: 4px;
}