/*
 * cassiopeia_schwab — site overrides
 * Loaded automatically by Cassiopeia's `template.user` asset.
 */

/* --- Fonts ---------------------------------------------------------------
   All web fonts are self-hosted in ../fonts (this template's media folder),
   with their licences alongside: Lora (SIL OFL, @fontsource/lora 5.3.0) for
   headings and Roboto (Apache 2.0, from Joomla's roboto-fontface package)
   for body text, as on the old Gantry site. The template style's Font
   Scheme is "None" so Cassiopeia loads no fonts of its own. */
@font-face {
    font-family: "Roboto";
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url("../fonts/roboto-light.woff2") format("woff2");
}

@font-face {
    font-family: "Roboto";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/roboto-regular.woff2") format("woff2");
}

@font-face {
    font-family: "Roboto";
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/roboto-regularitalic.woff2") format("woff2");
}

@font-face {
    font-family: "Roboto";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../fonts/roboto-bold.woff2") format("woff2");
}

@font-face {
    font-family: "Roboto";
    font-style: italic;
    font-weight: 700;
    font-display: swap;
    src: url("../fonts/roboto-bolditalic.woff2") format("woff2");
}

@font-face {
    font-family: "Lora";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/lora-latin-400-normal.woff2") format("woff2");
}

@font-face {
    font-family: "Lora";
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/lora-latin-400-italic.woff2") format("woff2");
}

@font-face {
    font-family: "Lora";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../fonts/lora-latin-700-normal.woff2") format("woff2");
}

/* html:root outranks any :root font settings a Cassiopeia font scheme would
   add, should one be switched on again. */
html:root {
    --schwab-navy: #42476d;
    --schwab-text: #424753;
    --schwab-nav-text: #666;
    --schwab-rule: #dbd9cc;
    /* Darker take on the old #4db2b3 teal: 5.05:1 on white, 4.5:1+ on the
       light grey table stripes and form panel (WCAG AA). */
    --schwab-link: #277a7b;
    --schwab-container: 75rem;
    --cassiopeia-font-family-body: "Roboto", system-ui, sans-serif;
    --cassiopeia-font-family-headings: "Lora", Georgia, serif;
    --cassiopeia-font-weight-normal: 400;
    --cassiopeia-font-weight-headings: 700;
}

/* --- Topbar (Pay My Bill, search, social links) -------------------------- */
.container-header {
    color: var(--schwab-navy);
    background: #fff;
    box-shadow: none;
}

.container-header .container-topbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: .5rem 1.5rem;
    padding: .75rem 1rem;
    color: #fff;
    background: var(--schwab-navy);
}

.container-topbar .mod-custom p {
    margin: 0;
}

.container-topbar a:not(.btn) {
    font-size: 1.2rem;
    text-decoration: none;
}

.container-topbar a:not(.btn):hover,
.container-topbar a:not(.btn):focus-visible {
    text-decoration: underline;
}

.container-topbar .mod-finder,
.container-topbar .mod-finder .awesomplete {
    width: 100%;
    margin: 0;
}

.container-topbar .mod-finder .form-control {
    width: 100%;
    min-height: 41px;
    padding: 6px;
    font-size: .875rem;
    color: var(--schwab-text);
    text-align: right;
    border: 1px solid #e0e0e5;
    border-radius: 0;
}

.container-topbar .social-links a {
    display: inline-block;
    padding: 3px 6px;
}

/* Desktop: the old toolbar's 40/20/20/20 split, so each item lands where it did. */
@media (min-width: 768px) {
    .container-header .container-topbar {
        display: grid;
        grid-template-columns: 2fr 1fr 1fr 1fr;
        gap: 0;
        min-height: 71px;
        padding: 0;
    }

    .container-topbar > :first-child {
        grid-column: 2;
        text-align: center;
    }

    .container-topbar > * {
        padding-inline: 15px;
    }
}

/* --- Header: logo left, "call today" right ------------------------------
   Pure CSS grid, so no extra module position is needed: the below-top
   position (module 156) and the logo share row 2 of a centred 1200px column.
   Below 768px they stack, logo first. */
.container-header .container-below-top {
    display: block;
    color: var(--schwab-navy);
    text-align: center;
}

/* Module 156: plain paragraphs (not headings, so each page keeps a single
   <h1>), styled like the old header headings. */
.container-below-top .call-today__label,
.container-below-top .call-today__phone {
    margin: 0;
    font-family: var(--cassiopeia-font-family-headings);
    line-height: 1.2;
    color: inherit;
}

.container-below-top .call-today__label {
    font-size: clamp(1.25rem, 2.2vw, 1.9rem);
    font-weight: 400;
}

.container-below-top .call-today__phone {
    margin-top: .6em;
    font-size: clamp(1.5rem, 2.6vw, 2.25rem);
    font-weight: 700;
}

.container-header .navbar-brand {
    margin: 0;
    padding: 10px 0;
}

.container-header .brand-logo img {
    display: block;
    width: 150px;
    height: auto;
}

.container-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, var(--schwab-container)) minmax(0, 1fr);
}

.container-header > * {
    grid-column: 1 / -1;
}

.container-header > .grid-child {
    grid-column: 2;
    width: 100%;
    max-width: none;
    margin: 0;
}

.container-header > .grid-child:has(> .navbar-brand) {
    grid-row: 2;
    justify-content: center;
    padding-block: 0;
}

.container-header > .container-below-top {
    grid-row: 3;
    padding-bottom: 1.5rem;
}

@media (min-width: 768px) {
    .container-header > .grid-child:has(> .navbar-brand) {
        justify-content: flex-start;
        padding-inline: 10px;
    }

    .container-header > .container-below-top {
        grid-row: 2;
        justify-self: end;
        align-self: start;
        width: auto;
        padding: 2rem 10px 0;
        text-align: right;
    }
}

/* --- Main menu bar --------------------------------------------------------
   White bar with beige rules, centred Lora items, white dropdowns. */
.container-header > .container-nav {
    grid-column: 1 / -1;
    grid-row: 4;
    justify-content: center;
    padding: 0 1rem;
    color: var(--schwab-nav-text);
    background: #fff;
    border-block: 1px solid var(--schwab-rule);
}

.container-header .container-nav .mod-menu {
    flex: 0 1 auto;
    justify-content: center;
    font-family: var(--cassiopeia-font-family-headings);
    font-weight: 700;
    color: var(--schwab-nav-text);
}

.container-header .mod-menu > li > a,
.container-header .mod-menu > li > button,
.container-header .mod-menu > li > .mod-menu__toggle-sub {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: 9px 0;
    line-height: 1.5;
    font: inherit;
    color: inherit;
    background: none;
    border: 0;
}

/* Submenu arrow next to a link: at least 24x24px (WCAG 2.5.8 target size). */
.container-header .mod-menu > li > a + .mod-menu__toggle-sub {
    justify-content: center;
    min-width: 24px;
    min-height: 24px;
    padding-inline-start: .35rem;
}

.container-header .mod-menu .icon-chevron-down {
    font-size: .6em;
}

.container-header .mod-menu > li.active:after,
.container-header .mod-menu > li:hover:after {
    bottom: .6rem;
    background: currentColor;
}

.container-header .mod-menu > li > a:hover,
.container-header .mod-menu > li > button:hover {
    color: var(--schwab-navy);
}

@media (min-width: 992px) {
    .container-header .mod-menu > li,
    .container-header .mod-menu > li + li {
        margin: 0 1.5rem;
    }

    .container-header .mod-menu :where(.mod-menu__sub:not(.mod-menu__sub *)) {
        min-width: 180px;
        border: 1px solid rgba(102, 102, 102, .2);
    }
}

/* --- Mobile menu (mod_menu layout cassiopeia_schwab:offcanvas) -------------
   Below 992px the menu moves into a Bootstrap offcanvas panel opened by the
   hamburger pinned top-left over the topbar (as on the old site, but white so
   it shows); the drawer slides in from the left. From 992px up .offcanvas-lg
   renders the menu inline as above. */
.container-header .mod-menu-offcanvas {
    margin: 0;
}

.mod-menu-offcanvas__toggle {
    position: absolute;
    top: .75rem;
    left: .5rem;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 41px;
    padding: 0;
    color: #fff;
    background: none;
    border: 0;
    border-radius: 4px;
}

.mod-menu-offcanvas__toggle:hover,
.mod-menu-offcanvas__toggle:focus-visible {
    background: rgba(255, 255, 255, .12);
}

.mod-menu-offcanvas__bars,
.mod-menu-offcanvas__bars span,
.mod-menu-offcanvas__bars span::before,
.mod-menu-offcanvas__bars span::after {
    display: block;
    width: 22px;
    height: 2px;
    background: currentColor;
    border-radius: 1px;
}

.mod-menu-offcanvas__bars {
    position: relative;
    height: 16px;
    background: none;
}

.mod-menu-offcanvas__bars span {
    position: absolute;
    top: 7px;
}

.mod-menu-offcanvas__bars span::before,
.mod-menu-offcanvas__bars span::after {
    position: absolute;
    left: 0;
    content: "";
}

.mod-menu-offcanvas__bars span::before { top: -7px; }
.mod-menu-offcanvas__bars span::after { top: 7px; }

@media (max-width: 991.98px) {
    /* The menu bar row is empty here (button is pinned, drawer is fixed). */
    .container-header > .container-nav {
        padding: 0;
        border: 0;
    }

}

/* Tablets: a fifth of the width is too narrow for the four social icons. */
@media (min-width: 768px) and (max-width: 991.98px) {
    .container-header .container-topbar {
        grid-template-columns: 1fr auto minmax(180px, 255px) auto;
        column-gap: 1rem;
        padding-inline-end: 1rem;
    }

    .container-topbar > * {
        padding-inline: 0;
    }
}

/* Keep the stacked phone topbar clear of the pinned button (from 768px the
   topbar grid's empty first column already leaves room). */
@media (max-width: 767.98px) {
    .container-header .container-topbar {
        padding-inline: 3.5rem 1rem;
    }
}

@media (max-width: 991.98px) {

    .mod-menu-offcanvas .offcanvas-lg {
        --offcanvas-width: min(85vw, 320px);
        --offcanvas-bg: var(--schwab-navy);
        --offcanvas-color: #fff;
    }

    .mod-menu-offcanvas .offcanvas-header {
        border-bottom: 1px solid rgba(255, 255, 255, .15);
    }

    .mod-menu-offcanvas .offcanvas-title {
        margin: 0;
        font-family: var(--cassiopeia-font-family-headings);
        color: #fff;
    }

    .mod-menu-offcanvas .offcanvas-body {
        padding: .5rem 1.25rem 1.5rem;
    }

    .container-header .mod-menu-offcanvas .mod-menu {
        display: block;
        font-size: 1.05rem;
        color: #fff;
    }

    .container-header .mod-menu-offcanvas .mod-menu > li {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        border-bottom: 1px solid rgba(255, 255, 255, .12);
    }

    .container-header .mod-menu-offcanvas .mod-menu > li > a,
    .container-header .mod-menu-offcanvas .mod-menu > li > button {
        flex: 1;
        justify-content: space-between;
        padding: .85rem 0;
        color: #fff;
        text-align: start;
    }

    .container-header .mod-menu-offcanvas .mod-menu > li > a + .mod-menu__toggle-sub {
        flex: 0 0 auto;
        padding-inline: 1rem 0;
    }

    .container-header .mod-menu-offcanvas .mod-menu > li.active > a,
    .container-header .mod-menu-offcanvas .mod-menu > li.active > button {
        text-decoration: underline;
        text-underline-offset: .3em;
    }

    .container-header .mod-menu-offcanvas .mod-menu .mod-menu__sub {
        flex-basis: 100%;
        margin-bottom: .75rem;
        font-size: .95rem;
        background: rgba(255, 255, 255, .06);
    }

    .container-header .mod-menu-offcanvas .mod-menu .mod-menu__sub li + li {
        border-top-color: rgba(255, 255, 255, .08);
    }

    .container-header .mod-menu-offcanvas .mod-menu .mod-menu__sub a {
        color: rgba(255, 255, 255, .9);
    }

    .container-header .mod-menu-offcanvas .mod-menu .mod-menu__sub a:hover,
    .container-header .mod-menu-offcanvas .mod-menu .mod-menu__sub a:focus-visible {
        color: #fff;
        background: rgba(255, 255, 255, .08);
    }

    .container-header .mod-menu-offcanvas .icon-chevron-down {
        transition: transform .2s;
    }

    .container-header .mod-menu-offcanvas [aria-expanded="true"] .icon-chevron-down {
        transform: rotate(180deg);
    }
}

/* Open on hover as the old site did; click/keyboard still work via mod_menu's menu.js. */
@media (min-width: 992px) and (hover: hover) {
    /* .is-hover-dismissed is set by user.js when Escape is pressed (WCAG
       1.4.13: hover content must be dismissible without moving the pointer). */
    .container-header .mod-menu > li.parent:not(.is-hover-dismissed):hover > .mod-menu__sub {
        display: block;
    }
}

.container-header .mod-menu .mod-menu__sub {
    padding: 0;
    font-size: .85rem;
    color: var(--schwab-nav-text);
    background: #fff;
}

.container-header .mod-menu .mod-menu__sub li + li {
    border-top: 1px solid rgba(102, 102, 102, .2);
}

.container-header .mod-menu .mod-menu__sub a {
    display: block;
    padding: .55rem 1rem;
    color: var(--schwab-nav-text);
    text-decoration: none;
}

.container-header .mod-menu .mod-menu__sub a:hover,
.container-header .mod-menu .mod-menu__sub a:focus-visible {
    color: var(--schwab-navy);
    text-decoration: none;
    background: #f6f5f0;
}

/* --- Homepage slideshow (mod_grid_card, Module Class "mgc-hero") ----------
   Full-width photo with the caption in a translucent panel on the left,
   matching the old Gantry slideshow. Stacks the caption under the photo on
   phones. Selectors start with .mod-grid-card.mgc-hero so they outrank the
   module's own card rules whatever order the stylesheets load in. */
.mod-grid-card.mgc-hero {
    --mgc-hero-height: clamp(320px, 50vw, 760px);
    --mgc-hero-panel: rgba(65, 65, 50, 0.7);
    --mgc-dot: rgba(255, 255, 255, 0.4);
    --mgc-dot-active: rgba(255, 255, 255, 0.9);
}

.mod-grid-card.mgc-hero .mgc-carousel__track {
    padding-bottom: 0;
}

.mod-grid-card.mgc-hero .card-item .card-item__inner {
    position: relative;
    display: block;
    padding: 0;
    border-radius: 0;
    box-shadow: none;
    background: #414132;
}

.mod-grid-card.mgc-hero .card-item .card-item__media img {
    display: block;
    width: 100%;
    height: var(--mgc-hero-height);
    object-fit: cover;
    object-position: 70% center;
}

.mod-grid-card.mgc-hero .card-item .card-item__body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1rem;
    /* Bottom padding leaves room for the dots on phones (20px + 26px). */
    padding: 1.5rem 1rem calc(46px + 1rem);
    color: #fff;
    text-align: center;
    background: var(--mgc-hero-panel);
}

/* Slide titles are <p> (module Header Tag = p): four identical "Schwab Legal
   Group" headings added nothing to the outline, so keep only the look. */
.mod-grid-card.mgc-hero .card-item__title {
    margin: 0;
    font-family: var(--cassiopeia-font-family-headings);
    font-weight: 700;
    line-height: 1.2;
    color: inherit;
    font-size: clamp(1.75rem, 2.6vw, 2.5rem);
}

.mod-grid-card.mgc-hero .card-item__content {
    font-family: var(--cassiopeia-font-family-headings);
    font-size: clamp(1.25rem, 2.1vw, 1.875rem);
}

.mod-grid-card.mgc-hero .card-item__content > :last-child {
    margin-bottom: 0;
}

/* Dots sit on the photo instead of below it, sized like the old slideshow:
   20px, 15px apart, 20px from the bottom; the active dot grows to 26px. */
.mod-grid-card.mgc-hero .mgc-carousel__dots {
    position: absolute;
    right: 0;
    bottom: 20px;
    left: 0;
    align-items: center;
    gap: 15px;
    height: 26px;
    margin: 0;
}

.mod-grid-card.mgc-hero .mgc-carousel__dot {
    width: 20px;
    height: 20px;
    transition: transform .2s, background-color .2s;
}

/* Scaled (not resized) so the other dots don't shift, as on the old site. */
.mod-grid-card.mgc-hero .mgc-carousel__dot.is-active {
    transform: scale(1.3);
}

@media (prefers-reduced-motion: reduce) {
    .mod-grid-card.mgc-hero .mgc-carousel__dot {
        transition: none;
    }
}

.mod-grid-card.mgc-hero .mgc-carousel__dot:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

@media (min-width: 768px) {
    .mod-grid-card.mgc-hero .card-item .card-item__body {
        position: absolute;
        inset: 0 auto 0 0;
        width: 30%;
        min-width: 340px;
        padding: 2rem 1.25rem;
    }

    .mod-grid-card.mgc-hero .card-item .card-item__media img {
        object-position: center;
    }
}

/* --- Site grid: full-width band rows ---------------------------------------
   Cassiopeia's .site-grid names no area for top-c or bottom-c, so those
   containers were auto-placed into a single narrow implicit column. Give
   each its own full-width row (after top-b and after bottom-b), and widen
   bottom-a/bottom-b to full width too, matching the old site's coloured
   bands. Both breakpoints are restated so this wins over Cassiopeia's own
   >=992px rule. */
@supports (display: grid) {
    .site-grid {
        grid-template-areas: ". banner banner banner banner ."
                             ". top-a top-a top-a top-a ."
                             "top-b top-b top-b top-b top-b top-b"
                             "top-c top-c top-c top-c top-c top-c"
                             ". comp comp comp comp ."
                             ". side-r side-r side-r side-r ."
                             ". side-l side-l side-l side-l ."
                             "bot-a bot-a bot-a bot-a bot-a bot-a"
                             "bot-b bot-b bot-b bot-b bot-b bot-b"
                             "bot-c bot-c bot-c bot-c bot-c bot-c";
    }

    @media (min-width: 992px) {
        .site-grid {
            grid-template-areas: ". banner banner banner banner ."
                                 ". top-a top-a top-a top-a ."
                                 "top-b top-b top-b top-b top-b top-b"
                                 "top-c top-c top-c top-c top-c top-c"
                                 ". side-l comp comp side-r ."
                                 "bot-a bot-a bot-a bot-a bot-a bot-a"
                                 "bot-b bot-b bot-b bot-b bot-b bot-b"
                                 "bot-c bot-c bot-c bot-c bot-c bot-c";
        }
    }
}

.container-top-c {
    grid-area: top-c;
}

.container-bottom-c {
    grid-area: bot-c;
}

/* Shared band: full-bleed background, content held to the 1200px column. */
.site-grid > .container-top-c,
.site-grid > .container-bottom-a,
.site-grid > .container-bottom-b,
.site-grid > .container-bottom-c {
    padding: 3rem max(1rem, calc((100% - var(--schwab-container)) / 2));
    color: #fff;
}

.container-top-c > .card,
.container-bottom-a > .card,
.container-bottom-b > .card,
.container-bottom-c > .card {
    margin: 0;
    color: inherit;
    background: none;
    border: 0;
    border-radius: 0;
}

.container-top-c > .card > .card-header,
.container-bottom-a > .card > .card-header,
.container-bottom-b > .card > .card-header,
.container-bottom-c > .card > .card-header {
    color: inherit;
    background: none;
    border: 0;
}

/* --- bottom-a: gavel photo under a navy overlay -------------------------
   80/20 split; the right column holds the "Best of Winnebago" badges. The
   last card always takes the narrow column, so the badges stay right while
   the Testimonials module (Widgetkit, parked) renders nothing. */
.site-grid > .container-bottom-a {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem 0;
    background:
        linear-gradient(rgba(66, 71, 109, .9), rgba(66, 71, 109, .9)),
        url("../images/gavel.webp") center top / cover no-repeat;
}

@media (min-width: 768px) {
    .site-grid > .container-bottom-a {
        grid-template-columns: 4fr 1fr;
    }

    .container-bottom-a > .card:last-child {
        grid-column: 2;
    }
}

.container-bottom-a > .card > .card-body {
    padding: 0 25px;
}

.container-bottom-a img {
    max-width: 100%;
    height: auto;
}

.container-bottom-a .mod-custom p:last-child {
    margin-bottom: 0;
}

/* --- bottom-b: olive call-to-action bar --------------------------------- */
.site-grid > .container-bottom-b {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
    gap: 1rem 2rem;
    padding-block: 1.5rem;
    text-align: center;
    background: #645f0e;
}

@media (min-width: 768px) {
    .site-grid > .container-bottom-b {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: start;
        text-align: start;
    }
}

.container-bottom-b > .card > .card-body {
    padding: 0 10px;
}

/* Module 159: a paragraph rather than an <h1>, styled as before. */
.container-bottom-b .cta-bar {
    margin: 0;
    font-family: var(--cassiopeia-font-family-headings);
    font-size: clamp(1.5rem, 2.6vw, 2.25rem);
    font-weight: 700;
    line-height: 1.6;
    color: #fff;
}

.container-bottom-b svg {
    display: block;
    margin: .3rem auto 0;
}

@media (min-width: 768px) {
    .container-bottom-b svg {
        margin-inline: 0;
    }
}

.container-bottom-b a:hover svg,
.container-bottom-b a:focus-visible svg {
    opacity: .8;
}

/* --- Footer: charcoal bar, copyright / menu / back-to-top ---------------- */
.container-footer.footer {
    margin-top: 0;
    background: #312f38;
}

.footer .grid-child {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    gap: 1rem;
    max-width: var(--schwab-container);
    margin-inline: auto;
    padding: 2rem 1rem;
    text-align: center;
}

@media (min-width: 992px) {
    .footer .grid-child {
        grid-template-columns: 4fr 5fr 1fr;
        align-items: center;
    }

    .footer .grid-child > :last-child {
        justify-self: end;
    }
}

.footer .mod-footer {
    font-size: .875rem;
    line-height: 1.7;
}

.footer .mod-menu {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .5rem 2.25rem;
    margin: 0;
    font-family: var(--cassiopeia-font-family-headings);
    font-weight: 700;
}

.footer a:not(.btn) {
    text-decoration: none;
}

.footer a:not(.btn):hover,
.footer a:not(.btn):focus-visible {
    color: #fff;
    text-decoration: underline;
}

/* Module 163 reuses Cassiopeia's .back-to-top-link class, which is the
   template's fixed, fade-in floating button; keep this copy in the footer. */
.footer .mod-custom .back-to-top-link {
    position: static;
    display: inline-grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    color: #fff;
    background: none;
    border: 0;
    border-radius: 50%;
    opacity: 1;
}

.footer .mod-custom .back-to-top-link:hover,
.footer .mod-custom .back-to-top-link:focus-visible {
    color: #fff;
    background: rgba(255, 255, 255, .12);
}

/* The template's own floating back-to-top button, in the site navy. */
#back-top.back-to-top-link {
    color: var(--schwab-navy);
    border-color: var(--schwab-navy);
}

#back-top.back-to-top-link:hover,
#back-top.back-to-top-link:focus {
    color: #fff;
    background-color: var(--schwab-navy);
}

/* --- Responsive embeds -----------------------------------------------------
   Article videos are pasted with fixed width/height attributes (e.g. a 560px
   YouTube iframe), which overflowed phones. Scale them to the column. */
.container-component iframe,
.container-component video,
.container-component embed,
.container-component object {
    max-width: 100%;
}

.container-component iframe[src*="youtube"],
.container-component iframe[src*="youtu.be"],
.container-component iframe[src*="vimeo"] {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
}

/* Editor content floats boxes with inline styles (e.g. the home video in a
   float:right; width:45% div); on phones let them take the full width.
   !important is the only way to beat an inline style. */
@media (max-width: 767.98px) {
    .com-content-article__body [style*="float"] {
        float: none !important;
        width: auto !important;
        margin-inline: 0 !important;
    }
}

/* --- top-c: navy band (home page "Practice Areas") ------------------------ */
.site-grid > .container-top-c {
    text-align: center;
    background: var(--schwab-navy);
}

.container-top-c > .card > .card-header {
    font-family: var(--cassiopeia-font-family-headings);
    font-size: 1.5rem;
    font-weight: 400;
    text-transform: uppercase;
}

/* --- bottom-c: olive band (menu, address, contact form, disclaimer) ------- */
.site-grid > .container-bottom-c {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem 0;
    background: #6a6859;
}

@media (min-width: 768px) {
    .site-grid > .container-bottom-c {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 992px) {
    .site-grid > .container-bottom-c {
        grid-template-columns: 20fr 20fr 25fr 35fr;
    }
}

.container-bottom-c > .card > .card-body {
    padding: 0 25px;
}

.container-bottom-c a:not(.btn) {
    color: #fff;
    text-decoration: none;
}

.container-bottom-c a:not(.btn):hover,
.container-bottom-c a:not(.btn):focus-visible {
    text-decoration: underline;
}

.container-bottom-c .mod-menu {
    display: block;
    font-weight: 700;
}

.container-bottom-c .mod-menu > li > a,
.container-bottom-c .mod-menu > li > .mod-menu__heading {
    display: block;
    padding: 0 0 10px;
    color: #fff;
}

/* The band runs straight into the footer, as on the old site. */
.site-grid:has(> .container-bottom-c) + .container-footer {
    margin-top: 0;
}

.container-bottom-c .mod-list li.active > a {
    text-decoration: none;
}

.container-bottom-c .rsform h2 {
    margin: .75rem 0 2rem;
    font-size: 1.9rem;
    font-weight: 400;
    /* Lighter than the old #b6b380 (2.61:1) so this large heading passes
       WCAG AA on the olive band: 3.60:1 against #6a6859. */
    color: #d4d1a3;
}

/* RSForm's horizontal layout puts each field in a 75% column beside an
   empty label; stack them full-width as the old site did. */
.container-bottom-c .rsform .row,
.container-bottom-c .rsform .form-group {
    margin: 0;
}

.container-bottom-c .rsform .col-sm-12,
.container-bottom-c .rsform .formControls {
    width: 100%;
    max-width: none;
    padding: 0;
    flex: 0 0 100%;
}

/* Field captions (set in RSForm) give each input a real <label>; they are
   visually hidden to keep the old placeholder-only look, but screen readers
   announce them. Empty labels (e.g. the submit row) take no space. */
.container-bottom-c .rsform .formControlLabel {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.container-bottom-c .rsform .form-group {
    margin-bottom: 1.25rem;
}

.container-bottom-c .rsform .form-control {
    min-height: 41px;
    padding: 6px;
    font-size: .875rem;
    color: var(--schwab-text);
    background: #fff;
    border: 1px solid #e0e0e5;
    border-radius: 4px;
}

.container-bottom-c .rsform textarea.form-control {
    height: 154px;
}

.container-bottom-c .rsform .formValidation .formError {
    display: block;
    margin-top: .25rem;
    font-size: .85rem;
    color: #fff3c4;
}

.container-bottom-c .rsform-block-submit .formControls {
    text-align: right;
}

.container-bottom-c .rsform-submit-button {
    padding: 4px 12px;
    font-family: var(--cassiopeia-font-family-headings);
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: #fff;
    background: var(--schwab-navy);
    border: 1px solid transparent;
    border-radius: 4px;
}

.container-bottom-c .rsform-submit-button:hover,
.container-bottom-c .rsform-submit-button:focus-visible {
    background: #353a5c;
}

/* Was an <h4> straight under the Contact Us <h2>; now a styled paragraph. */
.container-bottom-c .mod-custom .footer-note {
    margin: .75rem 0 1.5rem;
    font-family: var(--cassiopeia-font-family-headings);
    font-size: 1.25rem;
    font-weight: 400;
    line-height: 2rem;
    color: #fff;
}

.container-bottom-c .mod-custom p {
    line-height: 2;
}

/* --- Practice Areas (mod_grid_card, Module Class "mgc-practice") ---------
   Icon tiles on the top-c navy band: icon over a Lora title, whole tile is
   the link (Linked Card). A short last row is centred. */
.mod-grid-card.mgc-practice {
    --mgc-card-bg: transparent;
    --mgc-card-color: #fff;
}

.mod-grid-card.mgc-practice > .row {
    /*justify-content: center;*/
}

/* No media here, so drop the shared card's row-aligning grid (it reserved
   three body rows per tile); the empty wrapper around the stretched link
   should not add a gap either. */
.mod-grid-card.mgc-practice .card-item .card-item__inner {
    display: block;
    background: none;
    border-radius: 4px;
    box-shadow: none;
    transition: background-color .2s;
}

.mod-grid-card.mgc-practice .card-item .card-item__body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    text-align: center;
}

.mod-grid-card.mgc-practice .card-item__actions {
    display: contents;
}

/* Icon sits above the title, as on the old site. */
.mod-grid-card.mgc-practice .card-item__content {
    order: -1;
    font-size: 4rem;
    line-height: 1;
    transition: transform .2s;
}

.mod-grid-card.mgc-practice .card-item__title {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 400;
    color: #fff;
    text-transform: none;
}

.mod-grid-card.mgc-practice .card-item__inner:hover,
.mod-grid-card.mgc-practice .card-item__inner:focus-within {
    background: rgba(255, 255, 255, .08);
}

.mod-grid-card.mgc-practice .card-item__inner:hover .card-item__content,
.mod-grid-card.mgc-practice .card-item__inner:focus-within .card-item__content {
    transform: translateY(-4px);
}

.mod-grid-card.mgc-practice .card-item__inner:has(.stretched-link:focus-visible) {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

.mod-grid-card.mgc-practice .stretched-link:focus-visible {
    outline: 0;
}

@media (max-width: 767.98px) {
    .mod-grid-card.mgc-practice .card-item .card-item__inner {
        padding: 10px 4px;
    }

    .mod-grid-card.mgc-practice .card-item .card-item__body {
        gap: .6rem;
    }

    .mod-grid-card.mgc-practice .card-item__content {
        font-size: 3rem;
    }

    .mod-grid-card.mgc-practice .card-item__title {
        font-size: 1.05rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .mod-grid-card.mgc-practice .card-item__content {
        transition: none;
    }
}

/* --- Testimonials (mod_grid_card, Module Class "mgc-testimonials") -------
   Articles from the Testimonials category, one per slide on the bottom-a
   gavel band: quote with a light left rule, client name in gold Lora,
   square prev/next buttons at the bottom right as on the old site. */
.mod-grid-card.mgc-testimonials {
    --mgc-card-bg: transparent;
    --mgc-card-color: #fff;
}

.mod-grid-card.mgc-testimonials .mgc-carousel__track {
    align-items: flex-start;
    padding-bottom: 5.5rem;
}

.mod-grid-card.mgc-testimonials .card-item .card-item__inner {
    display: block;
    padding: 0;
    background: none;
    box-shadow: none;
}

.mod-grid-card.mgc-testimonials .card-item__body {
    display: block;
}

/* Inset slides slightly so the next slide's quote rule can't show a
   sub-pixel sliver at the viewport's right edge. */
.mod-grid-card.mgc-testimonials .mgc-carousel__track > * {
    padding-inline: 2px;
}

.mod-grid-card.mgc-testimonials blockquote {
    margin: 0 0 1.5rem;
    padding-left: 15px;
    border-left: 5px solid #e0e0e5;
}

.mod-grid-card.mgc-testimonials blockquote p {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 300;
    line-height: 2;
    color: #fff;
}

/* Names are <p class="testimonial-name"> (were <h4>, which skipped levels);
   they carry an inline text-align:center from the editor. */
.mod-grid-card.mgc-testimonials .testimonial-name {
    font-family: var(--cassiopeia-font-family-headings);
    line-height: 1.2;
    margin: 0;
    font-size: 1.25rem;
    font-weight: 400;
    /* Lighter than the old #b5b37c (4.12:1) so the names pass WCAG AA:
       6.1:1 on the navy band, 4.65:1 even over its lightest photo pixels. */
    color: #dad8b0;
}

.mod-grid-card.mgc-testimonials .mgc-carousel__arrow {
    top: auto;
    bottom: 0;
    width: 60px;
    height: 60px;
    color: rgba(255, 255, 255, .85);
    background: rgba(0, 0, 0, .4);
    border-radius: 0;
    box-shadow: none;
    transform: none;
}

.mod-grid-card.mgc-testimonials .mgc-carousel__arrow--prev {
    right: 70px;
    left: auto;
}

.mod-grid-card.mgc-testimonials .mgc-carousel__arrow--next {
    right: 0;
}

.mod-grid-card.mgc-testimonials .mgc-carousel__arrow::before {
    width: 14px;
    height: 14px;
    border-width: 3px;
}

.mod-grid-card.mgc-testimonials .mgc-carousel__arrow:hover:not(:disabled),
.mod-grid-card.mgc-testimonials .mgc-carousel__arrow:focus-visible {
    color: #fff;
    background: rgba(0, 0, 0, .6);
}

.mod-grid-card.mgc-testimonials .mgc-carousel__arrow:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

/* --- Main content area -----------------------------------------------------
   Matches the old Gantry mainbar: a 1200px column (content inset 25px), 48px
   vertical padding, and the faint scales-of-justice watermark behind the
   text. Typography follows the old theme: Roboto 16px with 2x line height in
   #424753, light-weight Lora headings, teal links (darkened for contrast). */
.site-grid > .container-component {
    padding: 3rem max(1rem, calc((100% - var(--schwab-container) + 50px) / 2));
    color: var(--schwab-text);
    line-height: 2;
    background: url("../images/scales-of-justice.webp") no-repeat 75px -28px;
    background-origin: content-box;
}

@media (max-width: 767.98px) {
    .site-grid > .container-component {
        padding-block: 2rem;
        background-position: center -1rem;
        background-size: 80% auto;
    }
}

.container-component h1,
.container-component h2,
.container-component h3,
.container-component h4,
.container-component h5,
.container-component h6 {
    margin: 12px 0 24px;
    line-height: 2;
    color: var(--schwab-text);
}

.container-component h1 { font-size: 2.25rem; font-weight: 700; }
.container-component h2 { font-size: 1.9rem; font-weight: 400; }
.container-component h3 { font-size: 1.5rem; font-weight: 400; text-transform: uppercase; }
.container-component h4 { font-size: 1.25rem; font-weight: 400; }
.container-component h5 { font-size: 1rem; font-weight: 400; }
.container-component h6 { font-size: .85rem; font-weight: 700; }

/* Headings moved up a level so the outline never skips (e.g. h1 → h4) keep
   the look of their original level via .as-h3 / .as-h4. */
.container-component h2.as-h3 { font-size: 1.5rem; text-transform: uppercase; }
.container-component :is(h2, h3).as-h4 { font-size: 1.25rem; text-transform: none; }

@media (max-width: 767.98px) {
    .container-component :is(h2, h3).as-h4 { line-height: 2; }
}

@media (max-width: 767.98px) {
    .container-component h1 { font-size: 1.85rem; }
    .container-component h2 { font-size: 1.6rem; }
    .container-component h1,
    .container-component h2,
    .container-component h3 {
        line-height: 1.5;
    }
}

/* Article / category title: the old site showed it as a light 1.9rem
   heading; keep Joomla's <h1> for SEO but give it that look. */
.container-component .page-header h1,
.container-component .page-header h2 {
    font-size: 1.9rem;
    font-weight: 400;
}

.container-component p {
    margin: 1rem 0;
}

/* Indent with padding, not margin: Cassiopeia gives lists overflow:hidden
   (to clear floats), which would clip bullets sitting in a margin. */
.container-component ul,
.container-component ol {
    margin: 1.5rem 0;
    padding-left: 1.5rem;
}

.container-component li > ul,
.container-component li > ol {
    margin: .25rem 0;
}

.container-component a:not(.btn):not(.button) {
    color: var(--schwab-link);
    text-decoration: none;
    transition: color .2s;
}

.container-component a:not(.btn):not(.button):hover,
.container-component a:not(.btn):not(.button):focus-visible {
    color: var(--schwab-text);
}

/* Links inside running text (including headings within an article body) are
   underlined so they don't rely on colour alone (WCAG 1.4.1). Title
   headings, blog item titles, buttons, menus and table titles stay as they
   are. */
.container-component :is(p, li, dd, blockquote, .com-content-article__body :is(h1, h2, h3, h4, h5, h6)) a:not(.btn):not(.button) {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: .18em;
}

.container-component :is(p, li, dd, blockquote, .com-content-article__body :is(h1, h2, h3, h4, h5, h6)) a:not(.btn):not(.button):hover,
.container-component :is(p, li, dd, blockquote, .com-content-article__body :is(h1, h2, h3, h4, h5, h6)) a:not(.btn):not(.button):focus-visible {
    text-decoration-thickness: 2px;
}

.container-component blockquote {
    margin: 0 0 1.5rem;
    padding-left: 15px;
    border-left: 5px solid #e0e0e5;
}

.container-component figure.item-image.left {
    margin: 0 2rem 1rem 0;
}

.container-component figure.item-image.right {
    margin: 0 0 1rem 2rem;
}

/* Category blogs (Attorneys, News): the old site put the item title above
   its intro image. Joomla renders the image first, so unwrap .item-content
   and sort the title to the top; no layout override needed. */
.container-component .blog-item {
    display: flex;
    flex-direction: column;
}

.container-component .blog-item > .item-content {
    display: contents;
}

.container-component .blog-item .page-header {
    order: -1;
}

.container-component .blog-item > figure.item-image {
    float: none;
    margin: 0 0 1.5rem 1.5rem;
}

.container-component .readmore {
    margin-top: .5rem;
}

/* Gantry's .button (used in article content as "button button-2"), also
   applied to Joomla's "Read more" buttons as on the old site. */
.container-component .button,
.container-component .readmore .btn {
    display: inline-block;
    margin: 0 0 .5rem;
    padding: 1.5rem 3.125rem;
    font-family: var(--cassiopeia-font-family-headings);
    font-size: .8rem;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: .1rem;
    text-transform: uppercase;
    text-decoration: none;
    vertical-align: middle;
    color: #fff;
    background: var(--schwab-navy);
    border: 1px solid transparent;
    border-radius: 2.5rem;
    transition: background-color .2s;
}

.container-component .button:hover,
.container-component .button:focus-visible,
.container-component .readmore .btn:hover,
.container-component .readmore .btn:focus-visible {
    color: #fff;
    background: #2f324d;
    border-color: transparent;
}

.container-component .readmore .btn [class^="icon-"] {
    margin-inline-end: .35rem;
    font-size: .9em;
}

/* Contact category title is a bare <h1> (no .page-header wrapper). */
.container-component .contact-category > h1 {
    font-size: 1.9rem;
    font-weight: 400;
}

/* Tables (contact list): the old site's light borders and striping. */
.container-component .table {
    --table-color: var(--schwab-text);
    --table-striped-color: var(--schwab-text);
    --table-hover-color: var(--schwab-text);
    --table-striped-bg: #f1f2f6;
    --table-hover-bg: #eceef3;
    --table-border-color: #dce2e9;
    color: var(--schwab-text);
}

.container-component .table > tbody > tr > th {
    font-weight: 400;
}

/* The old contact list showed no header row; keep it for screen readers. */
.container-component .com-contact-category thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* "No articles in this category" was plain text on the old site. */
.container-component .com-content-category-blog .alert-info {
    padding: 0;
    color: inherit;
    background: none;
    border: 0;
}

.container-component .com-content-category-blog .alert-info .icon-info-circle {
    display: none;
}

/* --- Single contact page --------------------------------------------------
   Joomla 6 adds "Contact" / "Contact Form" section headings the old page did
   not show; keep them for screen readers only. The form sits in the old grey
   "Send an Email" panel with labels beside the fields from 768px up. */
.container-component .com-contact > h2,
.container-component .com-contact__container > h2 {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.container-component .com-contact__address dt {
    font-weight: 400;
}

.container-component .com-contact__form .well {
    margin-top: .5rem;
    padding: 1.25rem 1.25rem 2.5rem;
    background: #f4f4f4;
    border: 1px solid #e3e3e3;
    border-radius: 4px;
}

.container-component .com-contact__form legend {
    float: none;
    margin: 0 0 1.5rem;
    font-family: var(--cassiopeia-font-family-headings);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--schwab-text);
}

.container-component .com-contact__form .control-group {
    margin-bottom: 1.25rem;
}

@media (min-width: 768px) {
    .container-component .com-contact__form .control-group {
        display: grid;
        grid-template-columns: 160px minmax(0, 1fr);
        column-gap: 20px;
        align-items: start;
    }

    .container-component .com-contact__form .control-label {
        padding-top: 6px;
        text-align: right;
    }

    .container-component .com-contact__form .controls:only-child {
        grid-column: 2;
    }
}

.container-component .com-contact__form .btn-primary {
    padding: 1rem 2.75rem;
    font-family: var(--cassiopeia-font-family-headings);
    font-size: .8rem;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: .1rem;
    text-transform: uppercase;
    color: #fff;
    background: var(--schwab-navy);
    border: 1px solid transparent;
    border-radius: 2.5rem;
}

.container-component .com-contact__form .btn-primary:hover,
.container-component .com-contact__form .btn-primary:focus-visible {
    background: #2f324d;
}

/* --- top-b: "Free Legal Documents" band + "About Us" box (home) ----------
   As on the old site: the first module is a full-width navy band with
   centred white text; the next sits in a white box, 80% wide and centred,
   with thin side rules. */
.site-grid > .container-top-b {
    display: block;
    padding: 0;
}

/* flow-root keeps the headings' top margins inside each box; otherwise they
   collapse through and leave a white strip above the navy band. */
.container-top-b > * {
    display: flow-root;
    margin: 0;
}

/* The slideshow runs straight into this band, as on the old site. */
.site-grid > .container-banner {
    margin-bottom: 0;
}

.container-top-b > :first-child {
    padding: 0 1rem 4px;
    color: #fff;
    text-align: center;
    background: var(--schwab-navy);
}

.container-top-b > :not(:first-child) {
    width: min(100% - 2rem, 80%);
    margin-inline: auto;
    padding: 0 10px;
    color: #333;
    text-align: center;
}

.container-top-b h3 {
    margin: 12px 0 24px;
    font-size: 1.5rem;
    font-weight: 400;
    line-height: 2;
    text-transform: uppercase;
    color: inherit;
}

.container-top-b p {
    margin: 1rem 0;
    line-height: 2;
}

@media (max-width: 767.98px) {
    .container-top-b > :not(:first-child) {
        width: auto;
        padding-inline: 1rem;
        border-inline: 0;
    }
}

/* Header: below the full 1200px width, inset the logo and "call today" to
   line up with the bands' content instead of hugging the window edge. */
@media (min-width: 768px) and (max-width: 1249.98px) {
    .container-header > .grid-child:has(> .navbar-brand),
    .container-header > .container-below-top {
        padding-inline: calc(1rem + 25px);
    }
}

/* Right-aligned intro text (inline style from the editor, e.g. "Our
   Philosophy") is hard to read ragged-left in a phone-width column. */
@media (max-width: 767.98px) {
    .com-content-article__body [style*="text-align: right"] {
        text-align: center !important;
    }
}

/* Menu items with Page Class "hide-page-heading" (Home, Attorneys) give the
   page a real <h1> for search engines and screen readers without changing
   the old design, which showed no heading there. */
.hide-page-heading .container-component main > div > .page-header:first-of-type {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* Click-to-call phone numbers (modules 156 and 159): same look as the
   surrounding text, underline on hover/focus. */
.container-below-top .call-today__phone a,
.container-bottom-b .cta-bar a {
    color: inherit;
    text-decoration: none;
}

.container-below-top .call-today__phone a:hover,
.container-below-top .call-today__phone a:focus-visible,
.container-bottom-b .cta-bar a:hover,
.container-bottom-b .cta-bar a:focus-visible {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: .15em;
    text-decoration-thickness: 2px;
}

/* --- Page transitions (cross-document View Transitions) --------------------
   Cassiopeia already opts in (`@view-transition { navigation: auto }`, only
   when the visitor hasn't asked for reduced motion). Here: give the header
   its own transition name so it stays put while the content crossfades
   beneath it, and shorten the default fade. Unsupported browsers just
   navigate as normal. */
.container-header {
    view-transition-name: site-header;
}

::view-transition-old(root),
::view-transition-new(root) {
    animation-duration: .25s;
}

/* --- Carousel pause/play buttons (mod_grid_card 1.9.0, WCAG 2.2.2) ---------
   Slideshow: translucent round button at the bottom right, level with the
   dots. Testimonials: a square button beside the prev/next arrows. */
.mod-grid-card.mgc-hero .mgc-carousel__toggle {
    top: auto;
    right: 20px;
    bottom: 15px;
    color: #fff;
    background: rgba(0, 0, 0, .35);
    box-shadow: none;
}

.mod-grid-card.mgc-hero .mgc-carousel__toggle:hover,
.mod-grid-card.mgc-hero .mgc-carousel__toggle:focus-visible {
    background: rgba(0, 0, 0, .55);
}

.mod-grid-card.mgc-hero .mgc-carousel__toggle:focus-visible,
.mod-grid-card.mgc-hero .mgc-carousel__viewport:focus-visible {
    outline: 2px solid #fff;
    outline-offset: -4px;
}

.mod-grid-card.mgc-testimonials .mgc-carousel__toggle {
    top: auto;
    right: 140px;
    bottom: 0;
    width: 60px;
    height: 60px;
    color: rgba(255, 255, 255, .85);
    background: rgba(0, 0, 0, .4);
    border-radius: 0;
    box-shadow: none;
}

.mod-grid-card.mgc-testimonials .mgc-carousel__toggle:hover,
.mod-grid-card.mgc-testimonials .mgc-carousel__toggle:focus-visible {
    color: #fff;
    background: rgba(0, 0, 0, .6);
}

.mod-grid-card.mgc-testimonials .mgc-carousel__toggle:focus-visible,
.mod-grid-card.mgc-testimonials .mgc-carousel__viewport:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

/* --- Skip link (WCAG 2.4.1) ------------------------------------------------
   Hidden until focused (Bootstrap's .visually-hidden-focusable), then shown
   top-left above everything. Target is the content area after the header. */
.skip-link:focus,
.skip-link:focus-visible {
    position: fixed !important;
    top: .5rem;
    left: .5rem;
    z-index: 10001;
    padding: .75rem 1.25rem;
    font-weight: 700;
    color: #fff;
    background: var(--schwab-navy);
    border-radius: 4px;
    outline: 3px solid #fff;
    outline-offset: 0;
    box-shadow: 0 0 0 5px var(--schwab-navy);
}

#site-content:focus {
    outline: 0;
}

/* Pages without the navy topbar (error.php renders only the logo and menu
   rows): the hamburger would be white on white, so make it navy there. */
.container-header:not(:has(> .container-topbar)) .mod-menu-offcanvas__toggle {
    color: var(--schwab-navy);
}

.container-header:not(:has(> .container-topbar)) .mod-menu-offcanvas__toggle:hover,
.container-header:not(:has(> .container-topbar)) .mod-menu-offcanvas__toggle:focus-visible {
    background: rgba(66, 71, 109, .1);
}