/* ==========================================================================
   tsg-layout.css
   Theme overrides so stock USWDS matches travel.state.gov, plus the
   CAS-specific app bar and Bootstrap/USWDS coexistence fixes.
   Load AFTER uswds.min.css and the app's own CSS.

   Values below were taken from travel.state.gov's clientlib-site CSS:
   body #1b1b1b on #fff, primary #005ea2 / #1a4480 / #162e51,
   footer primary #f0f0f0, footer secondary #dfe1e2,
   Open Sans for body text, EB Garamond for headings.
   ========================================================================== */

/* ---- Fonts (self-hosted; restored by libman.json into ~/Content/fonts/) ----
   travel.state.gov is USWDS compiled with Open Sans as the "sans" font and
   EB Garamond as the "serif" font. Stock uswds.min.css asks for
   "Source Sans Pro Web" and "Merriweather Web" instead, on ~230 selectors.
   Rather than override every selector, the faces below re-declare those two
   family names with the TSG font files. A later @font-face with the same
   family/style/weight replaces the earlier one, so this file must load
   after uswds.min.css. Weights 300/400/700 match what USWDS declares;
   the variable fonts render each weight from one file. */

@font-face {
    font-family: "Open Sans";
    font-style: normal;
    font-weight: 300 800;
    font-display: swap;
    src: url("fonts/open-sans/files/open-sans-latin-wght-normal.woff2") format("woff2");
}

@font-face {
    font-family: "Open Sans";
    font-style: italic;
    font-weight: 300 800;
    font-display: swap;
    src: url("fonts/open-sans/files/open-sans-latin-wght-italic.woff2") format("woff2");
}

@font-face {
    font-family: "EB Garamond";
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url("fonts/eb-garamond/files/eb-garamond-latin-wght-normal.woff2") format("woff2");
}

@font-face {
    font-family: "EB Garamond";
    font-style: italic;
    font-weight: 400 800;
    font-display: swap;
    src: url("fonts/eb-garamond/files/eb-garamond-latin-wght-italic.woff2") format("woff2");
}

/* USWDS "sans" -> Open Sans */
@font-face {
    font-family: "Source Sans Pro Web";
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url("fonts/open-sans/files/open-sans-latin-wght-normal.woff2") format("woff2");
}

@font-face {
    font-family: "Source Sans Pro Web";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("fonts/open-sans/files/open-sans-latin-wght-normal.woff2") format("woff2");
}

@font-face {
    font-family: "Source Sans Pro Web";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("fonts/open-sans/files/open-sans-latin-wght-normal.woff2") format("woff2");
}

@font-face {
    font-family: "Source Sans Pro Web";
    font-style: italic;
    font-weight: 300;
    font-display: swap;
    src: url("fonts/open-sans/files/open-sans-latin-wght-italic.woff2") format("woff2");
}

@font-face {
    font-family: "Source Sans Pro Web";
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url("fonts/open-sans/files/open-sans-latin-wght-italic.woff2") format("woff2");
}

@font-face {
    font-family: "Source Sans Pro Web";
    font-style: italic;
    font-weight: 700;
    font-display: swap;
    src: url("fonts/open-sans/files/open-sans-latin-wght-italic.woff2") format("woff2");
}

/* USWDS "serif" -> EB Garamond (its lightest weight is 400, so 300 renders as 400) */
@font-face {
    font-family: "Merriweather Web";
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url("fonts/eb-garamond/files/eb-garamond-latin-wght-normal.woff2") format("woff2");
}

@font-face {
    font-family: "Merriweather Web";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("fonts/eb-garamond/files/eb-garamond-latin-wght-normal.woff2") format("woff2");
}

@font-face {
    font-family: "Merriweather Web";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("fonts/eb-garamond/files/eb-garamond-latin-wght-normal.woff2") format("woff2");
}

@font-face {
    font-family: "Merriweather Web";
    font-style: italic;
    font-weight: 300;
    font-display: swap;
    src: url("fonts/eb-garamond/files/eb-garamond-latin-wght-italic.woff2") format("woff2");
}

@font-face {
    font-family: "Merriweather Web";
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url("fonts/eb-garamond/files/eb-garamond-latin-wght-italic.woff2") format("woff2");
}

@font-face {
    font-family: "Merriweather Web";
    font-style: italic;
    font-weight: 700;
    font-display: swap;
    src: url("fonts/eb-garamond/files/eb-garamond-latin-wght-italic.woff2") format("woff2");
}

/* ==========================================================================
   Values below are taken from travel.state.gov's own stylesheet
   (clientlib-site.css), adapted to stock USWDS markup and to our 64em
   (1024px) mobile-menu breakpoint. Their site switches at 55em, but the
   stock USWDS JavaScript is built around 64em, so we keep that.
   ========================================================================== */

:root {
    --tsg-font-body: "Open Sans", sans-serif;
    --tsg-font-heading: "EB Garamond", serif;
    --tsg-ink: #1b1b1b;
    --tsg-primary: #005ea2;
    --tsg-primary-dark: #1a4480;
    --tsg-primary-darker: #162e51; /* header, app bar and footer background */
    --tsg-rule: #8090b3; /* 1px divider lines on navy */
    --tsg-on-dark: #f0f0f0; /* header nav + icon color */
    --tsg-visited-on-dark: #e8f5ff; /* visited links on navy */
    --tsg-hover-blue: #2672de; /* social icon hover */
    --tsg-width: 87.5rem; /* content width (stock USWDS: 64rem) */
    --tsg-gutter: 1.5rem; /* side padding at 40em+ (stock USWDS: 2rem) */
    --tsg-font-small: 0.89rem; /* TSG --tsg-font-size--3 below 55em */
    --tsg-font-small-lg: 0.95rem; /* TSG --tsg-font-size--3 at 55em+ */
}

/* Bootstrap 3 sets html { font-size: 10px }, which shrinks every rem-based
   USWDS component. Harmless if you're on Bootstrap 4+. */
html {
    font-size: 100%;
}

body {
    background-color: #fff;
    color: var(--tsg-ink);
    font-family: var(--tsg-font-body);
}

/* ---- Focus outline: TSG uses 2px #0076d6 (stock USWDS: 4px #2491ff) ---- */
[contentEditable=true]:focus,
[href]:focus,
[tabindex]:focus,
button:not([disabled]):focus,
iframe:focus,
input:not([disabled]):focus,
select:not([disabled]):focus,
textarea:not([disabled]):focus {
    outline: 2px solid #0076d6;
    outline-offset: 0;
}

/* ---- Typography ---- */
/* USWDS components get TSG fonts from the @font-face block above; only
   our own classes need an explicit family. */
.tsg-app-bar__title {
    font-family: var(--tsg-font-heading);
}

/* TSG's site-wide element rules, scoped to the site chrome so page content
   keeps its own styles. :where() adds no specificity, so these stay as weak as
   TSG's plain element selectors and any class rule still overrides them.
     a, li, ol, p, ul   { line-height: 1.6 }
     ol, ul             { margin-top: 0; margin-bottom: .75rem }
     ol, p, ul          { font-size: 1.01rem; 1.14rem at 40em+ }
   These set, for example, the nav link line spacing (0.95rem x 1.6 = 24.3px),
   the height of the links row above the search, and the footer link spacing.
   The font-size rule leaves out the header so the stock mobile menu keeps
   its sizes; the header lists that need it set it explicitly. */
:where(.usa-banner, .usa-header, .usa-footer, .usa-identifier) :is(a, li, ol, p, ul) {
    line-height: 1.6;
}

:where(.usa-banner, .usa-header, .usa-footer, .usa-identifier) :is(ol, ul) {
    margin-bottom: 0.75rem;
    margin-top: 0;
}

:where(.usa-footer, .usa-identifier) :is(ol, p, ul) {
    font-size: 1.01rem;
}

@media (min-width: 40em) {
    :where(.usa-footer, .usa-identifier) :is(ol, p, ul) {
        font-size: 1.14rem;
    }
}

/* ---- TSG's USWDS build settings ----
   travel.state.gov compiles USWDS with slightly different base sizes and
   line-heights than the stock uswds.min.css we use. These are the differences
   (found by comparing the two stylesheets) for components on our pages that
   aren't already overridden further down. */
.usa-banner,
.usa-banner .usa-accordion,
.usa-nav,
.usa-search,
.usa-skipnav,
.usa-alert .usa-alert__body {
    font-size: 1.01rem;
}

.usa-nav {
    line-height: 1;
}

.usa-search__input,
.usa-search [type=search] {
    font-size: 0.95rem;
}

.usa-alert .usa-alert__heading {
    font-size: 1.39rem;
    line-height: 1;
}

.usa-nav__secondary-links {
    margin-top: 0;
}

.usa-footer__primary-content {
    line-height: 1.2;
}

.usa-footer__return-to-top,
.usa-footer__social-links {
    line-height: 1;
}

.usa-identifier__identity {
    margin-top: 0;
}

/* ---- Width and side padding: 87.5rem content, 1.5rem gutters ----
   The footer's containers need their own selectors: stock USWDS caps them at
   64rem with more specific rules (".usa-footer__primary-section > .grid-container"). */
.grid-container,
.usa-banner__inner,
.usa-banner__content,
.usa-identifier__container,
.usa-footer > .grid-container,
.usa-footer__primary-section > .grid-container,
.usa-footer__secondary-section > .grid-container,
.usa-footer__nav {
    max-width: var(--tsg-width);
}

@media (min-width: 40em) {
    .grid-container,
    .usa-banner__inner,
    .usa-banner__content,
    .usa-identifier__container,
    .usa-footer > .grid-container,
    .usa-footer__primary-section > .grid-container,
    .usa-footer__secondary-section > .grid-container {
        padding-left: var(--tsg-gutter);
        padding-right: var(--tsg-gutter);
    }
}

/* ---- Banner ("An official website of the United States government") ---- */
/* TSG's USWDS build uses line-height 1.2 and slightly smaller base sizes here;
   stock USWDS uses 1.1 (which made our banner ~1.5px shorter). */
.usa-banner .usa-banner__header {
    font-size: 0.76rem;
    padding-bottom: 0.5rem;
    padding-top: 0.5rem;
}

.usa-banner .usa-banner__header-text,
.usa-banner .usa-banner__header-action,
.usa-banner .usa-banner__button {
    line-height: 1.2;
}

.usa-banner .usa-banner__button {
    font-size: 0.76rem;
}

@media (min-width: 40em) {
    .usa-banner {
        font-size: 0.82rem;
    }
}

/* TSG's --tsg-font-size--5: 0.76rem, stepping up to 0.82rem at 55em */
.usa-banner .usa-banner__header-text,
.usa-banner .usa-banner__header-action,
.usa-banner .usa-banner__button-text {
    color: var(--tsg-ink);
    font-size: 0.76rem;
}

@media (min-width: 55em) {
    .usa-banner .usa-banner__header-text,
    .usa-banner .usa-banner__header-action,
    .usa-banner .usa-banner__button-text {
        font-size: 0.82rem;
    }
}

.usa-banner .usa-banner__button {
    color: var(--tsg-ink);
}

.usa-banner .usa-banner__button-text:hover,
.usa-banner .usa-banner__button-text:focus,
.usa-banner .usa-accordion:has(.usa-banner__button:hover) .usa-banner__header-action,
.usa-banner .usa-accordion:has(.usa-banner__button:focus) .usa-banner__header-action {
    text-decoration: none;
}

.usa-banner .usa-banner__content {
    font-size: 1.01rem;
}

.usa-banner .usa-banner__guidance {
    max-width: 100%;
}

@media (max-width: 39.99em) {
    .usa-banner .usa-banner__inner,
    .usa-banner .usa-banner__content {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .usa-banner .usa-banner__content {
        padding-bottom: 1.25rem;
        padding-top: 1.25rem;
    }

    .usa-banner .usa-banner__guidance {
        padding-top: 0;
    }

        .usa-banner .usa-banner__guidance:first-child {
            padding-bottom: 1rem;
        }
}

/* ---- Header ---- */
.usa-header {
    background-color: var(--tsg-primary-darker);
    font-size: 1.01rem;
    line-height: 1.5;
}

    /* Logo: TSG steps the height up with the screen width */
    .usa-header .usa-logo {
        height: 1.63rem;
        margin: 0;
    }

        .usa-header .usa-logo__text,
        .usa-header .usa-logo picture {
            display: block;
            height: 100%;
        }

        .usa-header .usa-logo img {
            display: block;
            height: 100%;
            width: auto;
        }

@media (min-width: 374px) {
    .usa-header .usa-logo {
        height: 2.25rem;
    }
}

@media (min-width: 40em) {
    .usa-header .usa-logo {
        height: 3rem;
    }
}

@media (min-width: 55em) {
    .usa-header .usa-logo {
        height: 3.5rem;
    }
}

@media (min-width: 87.5em) {
    .usa-header .usa-logo {
        height: 4rem;
    }
}

/* Bootstrap's a:hover underline bleeds into the USWDS nav */
.usa-nav__link:hover {
    text-decoration: none;
}

/* Desktop-only copy of the secondary links + search (beside the logo) */
.tsg-header__tools {
    display: none;
}

@keyframes tsg-nav-slidein {
    from {
        transform: translateX(-15.63rem);
    }

    to {
        transform: translateX(0);
    }
}

/* ---- Mobile header + menu (below 64em) ----
   The stock USWDS mobile nav and its JavaScript, restyled to look like the
   main site's: a search icon and an icon-over-label "Menu" button in the navy
   bar, and a navy menu that drops down from under the header (full width on
   phones, 15.63rem wide from 40em). The main site switches to its desktop
   header at 55em; ours switches at USWDS's 64em.
   Differences kept on purpose: submenus open in place (accordion) instead of
   sliding over the menu, and the search icon links to the main site's search
   page instead of opening a search box. */
.tsg-header__buttons {
    display: none;
}

@media (max-width: 63.99em) {
    /* Keep the banner and header above the dimmed page (.usa-overlay is z 400) */
    .usa-banner,
    .usa-header {
        position: relative;
        z-index: 450;
    }

        .usa-header .usa-navbar {
            align-items: center;
            border-bottom: 0;
            display: flex;
            gap: 0.5rem;
            height: auto;
            justify-content: space-between;
            padding: 0.75rem 1rem;
        }

        .usa-header .usa-logo {
            flex: 0 1 auto;
            min-width: 0;
        }

        /* If the logo image is missing, its alt text should at least be readable */
        .usa-header .usa-logo__text,
        .usa-header .usa-logo__text:visited {
            color: #fff;
        }

    .tsg-header__buttons {
        align-items: stretch;
        display: flex;
        flex: none;
        gap: 0.5rem;
    }

    /* Search icon */
    .tsg-header__search-link {
        align-items: center;
        border: 1px solid transparent;
        border-radius: 2px;
        display: flex;
        justify-content: center;
        padding: 0.75rem 0.5rem;
    }

        .tsg-header__search-link::after {
            background-color: var(--tsg-on-dark);
            content: "";
            display: block;
            height: 24px;
            -webkit-mask: url("uswds/dist/img/usa-icons/search.svg") center / 24px 24px no-repeat;
            mask: url("uswds/dist/img/usa-icons/search.svg") center / 24px 24px no-repeat;
            width: 24px;
        }

        .tsg-header__search-link:hover {
            border-color: #c0cbe5;
        }

    /* Menu button: icon over the label; turns into a close (X) while open */
    .usa-header .usa-menu-btn,
    .usa-header .usa-menu-btn:visited,
    .usa-header .usa-menu-btn:active {
        align-items: center;
        background-color: transparent;
        border: 1px solid transparent;
        border-radius: 2px;
        color: #fff;
        display: flex;
        flex: none;
        flex-direction: column;
        font-size: 0.89rem;
        font-weight: 700;
        height: auto;
        line-height: 1.35;
        padding: 0.25rem;
        text-decoration: none;
        text-transform: none;
        width: 3.13rem;
    }

        .usa-header .usa-menu-btn::before {
            background-color: var(--tsg-on-dark);
            content: "";
            display: block;
            height: 24px;
            -webkit-mask: url("uswds/dist/img/usa-icons/menu.svg") center / 24px 24px no-repeat;
            mask: url("uswds/dist/img/usa-icons/menu.svg") center / 24px 24px no-repeat;
            width: 24px;
        }

    .usa-js-mobile-nav--active .usa-header .usa-menu-btn::before {
        -webkit-mask-image: url("uswds/dist/img/usa-icons/close.svg");
        mask-image: url("uswds/dist/img/usa-icons/close.svg");
    }

    .usa-header .usa-menu-btn:hover {
        background-color: transparent;
        border-color: #c0cbe5;
        color: #fff;
        text-decoration: none;
    }

    /* While the menu is open the page can still scroll, so a long menu is never
       cut off; the overlay covers the page behind it. */
    .usa-js-mobile-nav--active,
    .usa-js-mobile-nav--active.is-safari {
        overflow: visible;
        padding-right: 0 !important; /* USWDS adds scrollbar-width padding inline */
        position: static;
    }

    /* The menu panel */
    .usa-header .usa-nav {
        background-color: var(--tsg-primary-darker);
        border: 0;
        border-bottom: 1px solid var(--tsg-rule);
        bottom: auto;
        font-size: 1.01rem;
        left: 0;
        line-height: 1;
        overflow: visible;
        padding: 0;
        position: absolute;
        right: auto;
        top: 100%;
        width: 100%;
        z-index: 500;
    }

        /* Slide in from the left, as on the main site (stock slides from the right) */
        .usa-header .usa-nav.is-visible {
            animation: tsg-nav-slidein 0.3s ease-in-out;
        }

    /* USWDS focuses the close button when the menu opens. It stays hidden for
       mouse/touch users (the Menu button has become an X) and shows as a
       "Close" row for keyboard users, who can't tab back to the Menu button
       while the menu is open. Escape also closes the menu. */
    .usa-header .usa-nav__close {
        height: 1px;
        left: -999em;
        margin: 0;
        overflow: hidden;
        position: absolute;
        width: 1px;
    }

        .usa-header .usa-nav__close:focus-visible {
            align-items: center;
            display: flex;
            float: none;
            gap: 0.5rem;
            height: auto;
            justify-content: flex-start;
            outline-offset: -2px;
            padding: 0.75rem 1rem;
            position: static;
            width: 100%;
        }

        .usa-header .usa-nav__close,
        .usa-header .usa-nav__close:hover {
            color: var(--tsg-on-dark);
            font-size: 0.89rem;
            font-weight: 400;
            text-decoration: underline;
        }

            .usa-header .usa-nav__close img {
                filter: invert(1); /* black icon -> light */
                width: 1.25rem;
            }

    /* Primary items */
    .usa-header .usa-nav__primary {
        margin: 0;
    }

    .usa-header .usa-nav__primary-item,
    .usa-header .usa-nav__submenu-item {
        border-top: 0;
        font-size: 0.95rem;
    }

    .usa-header .usa-nav__primary a:not(.usa-button):not(.usa-current),
    .usa-header .usa-nav__primary button {
        align-items: center;
        background-color: transparent;
        color: var(--tsg-on-dark);
        display: flex;
        font-size: 0.95rem;
        font-weight: 500;
        gap: 0.5rem;
        justify-content: space-between;
        line-height: 1.3;
        min-height: 3rem;
        padding: 0.75rem 1rem;
        text-align: left;
        text-decoration: none;
        width: 100%;
    }

    .usa-header .usa-nav__primary button {
        padding-right: 3rem; /* room for the chevron */
    }

        .usa-header .usa-nav__primary a:not(.usa-button):not(.usa-current):hover,
        .usa-header .usa-nav__primary button:hover {
            background-color: transparent;
            color: var(--tsg-on-dark);
            text-decoration: underline;
        }

        .usa-header .usa-nav__primary a:not(.usa-button):not(.usa-current):focus,
        .usa-header .usa-nav__primary button:focus {
            outline-offset: -2px;
        }

        /* An open section's button turns blue, as on the main site */
        .usa-header .usa-nav__primary button[aria-expanded=true],
        .usa-header .usa-nav__primary button[aria-expanded=true]:hover {
            background-color: var(--tsg-hover-blue);
            color: #fff;
        }

        /* Chevrons (stock: dark +/- icons) */
        .usa-header .usa-nav__primary button[aria-expanded] span::after,
        .usa-header .usa-nav__primary button[aria-expanded]:hover span::after {
            background: var(--tsg-on-dark);
            content: "";
            display: block;
            height: 1.25rem;
            -webkit-mask: url("uswds/dist/img/usa-icons/expand_more.svg") center / 1.25rem 1.25rem no-repeat;
            mask: url("uswds/dist/img/usa-icons/expand_more.svg") center / 1.25rem 1.25rem no-repeat;
            position: absolute;
            right: 1rem;
            top: 50%;
            transform: translateY(-50%);
            width: 1.25rem;
        }

        .usa-header .usa-nav__primary button[aria-expanded=true] span::after,
        .usa-header .usa-nav__primary button[aria-expanded=true]:hover span::after {
            background: #fff;
            -webkit-mask-image: url("uswds/dist/img/usa-icons/expand_less.svg");
            mask-image: url("uswds/dist/img/usa-icons/expand_less.svg");
        }

    /* Submenus: indented on a darker band */
    .usa-header .usa-nav__submenu {
        background-color: rgba(19, 23, 31, 0.5);
        padding: 0.5rem 0;
    }

        .usa-header .usa-nav__submenu a:not(.usa-button):not(.usa-current) {
            padding-left: 2rem;
        }

    /* Secondary links (Careers, About, Contacts, Login) at the bottom */
    .usa-header .tsg-nav__secondary--mobile {
        border-top: 1px solid var(--tsg-rule);
        display: flex;
        flex-direction: column;
        margin: 0;
        padding-block: 0.75rem;
    }

        .usa-header .tsg-nav__secondary--mobile .usa-nav__secondary-links {
            line-height: 1.6;
            margin: 0;
        }

        .usa-header .tsg-nav__secondary--mobile .usa-nav__secondary-item {
            border: 0;
            padding: 0;
        }

        .usa-header .tsg-nav__secondary--mobile .usa-nav__secondary-links a,
        .usa-header .tsg-nav__secondary--mobile .usa-nav__secondary-links a:visited {
            color: var(--tsg-on-dark);
            display: block;
            font-size: 0.89rem;
            font-weight: 400;
            padding: 0.5rem 1rem;
            text-decoration: none;
        }

            .usa-header .tsg-nav__secondary--mobile .usa-nav__secondary-links a:hover {
                color: var(--tsg-on-dark);
                text-decoration: underline;
            }

            .usa-header .tsg-nav__secondary--mobile .usa-nav__secondary-links a:focus {
                outline-offset: -2px;
            }
}

@media (min-width: 40em) and (max-width: 63.99em) {
    .usa-header .usa-navbar {
        padding: var(--tsg-gutter);
    }

    .tsg-header__buttons {
        gap: 1rem;
    }

    .usa-header .usa-nav {
        width: 15.63rem;
    }

    .usa-header .usa-nav__close:focus-visible,
    .usa-header .usa-nav__primary a:not(.usa-button):not(.usa-current),
    .usa-header .usa-nav__primary button,
    .usa-header .tsg-nav__secondary--mobile .usa-nav__secondary-links a {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }

    .usa-header .usa-nav__primary button {
        padding-right: 3.5rem;
    }

        .usa-header .usa-nav__primary button[aria-expanded] span::after,
        .usa-header .usa-nav__primary button[aria-expanded]:hover span::after {
            right: 1.5rem;
        }

    .usa-header .usa-nav__submenu a:not(.usa-button):not(.usa-current) {
        padding-left: 2.5rem;
    }
}

@media (min-width: 55em) and (max-width: 63.99em) {
    .usa-header .tsg-nav__secondary--mobile .usa-nav__secondary-links a {
        font-size: 0.95rem;
    }
}

@media (prefers-reduced-motion) {
    .usa-header .usa-nav.is-visible {
        animation: none;
    }
}

/* Windows High Contrast: draw the mask icons in the system button color */
@media (forced-colors: active) {
    .tsg-header__search-link::after,
    .usa-header .usa-menu-btn::before,
    .usa-header .usa-nav__primary button[aria-expanded] span::after {
        background-color: ButtonText;
        forced-color-adjust: none;
    }
}

@media (min-width: 64em) {
    /* Top row: logo left, secondary links + search right */
    .usa-header--extended .usa-navbar {
        align-items: center;
        display: flex;
        gap: 0.5rem;
        justify-content: space-between;
        max-width: var(--tsg-width);
        padding: var(--tsg-gutter) var(--tsg-gutter) 0.75rem;
    }

    .usa-header--extended .usa-logo {
        max-width: none;
    }

    .tsg-header__tools {
        align-items: flex-end;
        display: flex;
        flex-direction: column;
        min-width: calc(27ch + 3rem);
    }

    .tsg-nav__secondary--mobile {
        display: none;
    }

    /* TSG's lists are 1.14rem at 40em+, so each link row is 1.2 x 1.14rem = 21.9px
       tall even though the links themselves are 0.95rem */
    .tsg-header__tools .usa-nav__secondary-links {
        column-gap: 0.75rem;
        font-size: 1.14rem;
        line-height: 1.2;
        margin: 0;
    }

        /* Stock USWDS pads every item 0.25rem on the left; TSG's build doesn't */
        .tsg-header__tools .usa-nav__secondary-links .usa-nav__secondary-item {
            padding-left: 0;
        }

            .tsg-header__tools .usa-nav__secondary-links .usa-nav__secondary-item + .usa-nav__secondary-item {
                border-left: 1px solid #dfe1e2;
                padding-left: 0.75rem;
            }

        .tsg-header__tools .usa-nav__secondary-links a,
        .tsg-header__tools .usa-nav__secondary-links a:visited {
            color: var(--tsg-on-dark);
            display: inline-block;
            font-size: var(--tsg-font-small-lg);
            font-weight: 400;
            text-decoration: none;
        }

            .tsg-header__tools .usa-nav__secondary-links a:hover {
                color: var(--tsg-on-dark);
                text-decoration: underline;
            }

    /* Search, as on travel.state.gov: the field is 17.69rem wide (22.38rem at
       87.5em+, TSG's ".header .usa-input") and the blue button sits over its
       right end; the field's 4rem right padding keeps typing clear of it.
       The form gets that same width and the field fills it, so the button
       (right: 0 of the form) always lands on the field's right end.
       Stock USWDS caps header search forms with
       ".usa-header [role=search] { float: right; max-width: calc(27ch + 3rem) }"
       (297px), which TSG's build doesn't have: max-width: none and float: none
       undo it. */
    .tsg-header__tools {
        flex: none;
    }

        .tsg-header__tools .usa-search {
            float: none;
            margin-top: 1.25rem;
            max-width: none;
            position: relative;
            width: 17.69rem;
        }

            .tsg-header__tools .usa-search .usa-input {
                border: 1px solid var(--tsg-rule);
                border-radius: 4px;
                flex: 1 1 auto;
                font-size: 1.01rem;
                height: 2.63rem;
                line-height: 1.3;
                margin-top: 0;
                max-width: none;
                min-width: 0;
                padding: 0.5rem 4rem 0.5rem 0.75rem;
                width: 100%;
            }

            .tsg-header__tools .usa-search [type=submit] {
                border: 0;
                border-radius: 4px;
                height: 2.63rem;
                margin: 0;
                min-width: 0;
                padding: 0.5rem 1rem;
                position: absolute;
                right: 0;
                top: 0;
                width: auto;
            }

    /* Nav row: full-width divider line below it */
    .usa-header--extended .usa-nav {
        border-bottom: 1px solid var(--tsg-rule);
        border-top: 0;
    }

    .usa-header--extended .usa-nav__inner {
        max-width: var(--tsg-width);
        padding-left: var(--tsg-gutter);
        padding-right: var(--tsg-gutter);
    }

    /* Items share the row; the -1.5rem margin lines the first label up with the logo */
    .usa-header--extended .usa-nav__primary {
        margin-left: -1.5rem;
        width: calc(100% + 3rem);
    }

        .usa-header--extended .usa-nav__primary > .usa-nav__primary-item {
            flex: 1 0 0;
            font-size: var(--tsg-font-small-lg);
            max-width: 15.31rem;
            min-width: 8.75rem;
        }

            /* Line-heights as on travel.state.gov: plain links get 1.6 from TSG's
       site-wide "a { line-height: 1.6 }"; dropdown buttons get 1.15 from the
       CSS reset (buttons don't inherit line-height). A two-line link therefore
       sets the row height: 2 x 24.32 + 32 padding + 2 underline (+1 border). */
            .usa-header--extended .usa-nav__primary > .usa-nav__primary-item > .usa-nav__link {
                align-items: center;
                border-bottom: 2px solid transparent;
                color: var(--tsg-on-dark);
                display: flex;
                font-size: var(--tsg-font-small-lg);
                font-weight: 500;
                height: 100%;
                line-height: 1.6;
                padding: 1rem 1.5rem;
                transition: border 0.3s ease-in-out;
                width: 100%;
            }

            /* Dropdown buttons: reset line-height, and room for the chevron */
            .usa-header--extended .usa-nav__primary > .usa-nav__primary-item > button.usa-nav__link {
                line-height: 1.15;
                padding-right: 3.25rem;
            }

            /* Hover / open: 2px white underline (replaces stock USWDS's blue bar) */
            .usa-header--extended .usa-nav__primary > .usa-nav__primary-item > .usa-nav__link:hover,
            .usa-header--extended .usa-nav__primary > .usa-nav__primary-item > .usa-nav__link[aria-expanded=true] {
                background-color: transparent;
                border-bottom-color: #fff;
                color: var(--tsg-on-dark);
                text-decoration: none;
            }

    .usa-header--extended .usa-nav__primary-item > .usa-nav__link:hover::after,
    .usa-header--extended .usa-nav__primary-item > .usa-current::after {
        content: none;
    }

    /* Chevron: light, 1.25rem, aligned to the item's right padding */
    .usa-header--extended .usa-nav__primary button[aria-expanded] span::after,
    .usa-header--extended .usa-nav__primary button[aria-expanded]:hover span::after {
        background-color: var(--tsg-on-dark);
        height: 1.25rem;
        -webkit-mask-size: 1.25rem 1.25rem;
        mask-size: 1.25rem 1.25rem;
        right: 1.5rem;
        width: 1.25rem;
    }

    /* Open item: the chevron becomes an X, like the main site */
    .usa-header--extended .usa-nav__primary button[aria-expanded=true] span::after {
        -webkit-mask-image: url("uswds/dist/img/usa-icons/close.svg");
        mask-image: url("uswds/dist/img/usa-icons/close.svg");
    }

    /* Dropdowns: full-width navy panel under the nav row, links in a left-hand
       column lined up with the content edge. Making .usa-nav__inner non-positioned
       lets each menu position against the full-width .usa-nav instead of the
       87.5rem container. */
    .usa-header--extended .usa-nav__inner {
        position: static;
    }

    .usa-header--extended .usa-nav__submenu {
        background-color: var(--tsg-primary-darker);
        border-top: 1px solid var(--tsg-rule);
        box-shadow: 0 8px 12px 0 rgba(0, 0, 0, 0.3);
        left: 0;
        /* 1.5rem top/bottom; sides keep the links on the 87.5rem content edge */
        padding: 1.5rem max(var(--tsg-gutter), calc((100% - var(--tsg-width)) / 2 + var(--tsg-gutter)));
        right: 0;
        top: 100%;
        width: auto;
    }

        .usa-header--extended .usa-nav__submenu > .usa-nav__submenu-item {
            width: 33.3333%;
        }

        .usa-header--extended .usa-nav__submenu .usa-nav__submenu-item a,
        .usa-header--extended .usa-nav__submenu .usa-nav__submenu-item a:visited {
            color: var(--tsg-on-dark);
            display: block;
            font-size: var(--tsg-font-small-lg);
            font-weight: 500;
            line-height: 1.4;
            padding: 0.75rem 0;
            text-decoration: none;
        }

            /* The section's own home page link is underlined on the main site */
            .usa-header--extended .usa-nav__submenu > .usa-nav__submenu-item:first-child a,
            .usa-header--extended .usa-nav__submenu .usa-nav__submenu-item a:hover {
                color: var(--tsg-on-dark);
                text-decoration: underline;
            }
}

@media (min-width: 87.5em) {
    .usa-header--extended .usa-navbar {
        padding-top: 2rem;
    }

    .tsg-header__tools .usa-search {
        width: 22.38rem; /* the field fills this: 358px, as on TSG */
    }
}

@media (prefers-reduced-motion) {
    .usa-header--extended .usa-nav__primary > .usa-nav__primary-item > .usa-nav__link {
        transition: none;
    }
}

/* ---- App title bar (system title + home link) ---- */
.tsg-app-bar {
    background-color: var(--tsg-primary-darker);
    color: #fff;
}

.tsg-app-bar__inner {
    align-items: center;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    padding-bottom: 0.75rem;
    padding-top: 0.75rem;
}

.tsg-app-bar__title {
    font-size: 1.37rem;
    font-weight: 600;
    line-height: 1.2;
}

.tsg-app-bar__home,
.tsg-app-bar__home:visited {
    align-items: center;
    color: #fff;
    display: inline-flex;
    font-weight: 600;
    gap: 0.25rem;
    text-decoration: none;
    white-space: nowrap;
}

    .tsg-app-bar__home:hover,
    .tsg-app-bar__home:focus {
        color: #fff;
        text-decoration: underline;
    }

    .tsg-app-bar__home .usa-icon {
        height: 1.5rem;
        width: 1.5rem;
    }

/* Phones: smaller title; very narrow screens show just the home icon */
@media (max-width: 39.99em) {
    .tsg-app-bar__title {
        font-size: 1.14rem;
    }
}

@media (max-width: 29.99em) {
    .tsg-app-bar__home span {
        clip: rect(0 0 0 0);
        height: 1px;
        overflow: hidden;
        position: absolute;
        white-space: nowrap;
        width: 1px;
    }
}

/* ---- Main content: line Bootstrap's .container up with the header ---- */
.tsg-main {
    padding-bottom: 3rem;
    padding-top: 2rem;
}

    .tsg-main > .main-content.container {
        max-width: var(--tsg-width);
        padding-left: 1rem;
        padding-right: 1rem;
        width: 100%;
    }

@media (min-width: 40em) {
    .tsg-main > .main-content.container {
        padding-left: var(--tsg-gutter);
        padding-right: var(--tsg-gutter);
    }
}

/* ---- Footer ---- */
.usa-footer {
    font-size: 1.01rem;
    line-height: 1.5;
}

.usa-footer__primary-section,
.usa-footer__secondary-section,
.usa-footer__primary-link--button {
    background-color: var(--tsg-primary-darker);
}

/* Links on navy: white, thin underline; visited light blue; hover drops the underline */
.usa-footer a {
    color: #fff;
    font-size: var(--tsg-font-small);
    text-decoration: underline;
    text-decoration-thickness: 1px;
}

    .usa-footer a:visited {
        color: var(--tsg-visited-on-dark);
    }

    .usa-footer a:hover,
    .usa-footer a:active {
        color: var(--tsg-on-dark);
        text-decoration: none;
    }

    .usa-footer a:focus {
        outline: 2px solid #0076d6;
        outline-offset: 0;
        text-decoration: none;
    }

@media (min-width: 55em) {
    .usa-footer a {
        font-size: var(--tsg-font-small-lg);
    }
}

/* "Return to top" sits on the white page above the navy footer */
.usa-footer__return-to-top {
    text-align: right;
}

    .usa-footer__return-to-top a,
    .usa-footer__return-to-top a:visited {
        color: var(--tsg-primary);
        font-size: 1.01rem;
        text-decoration: underline;
    }

        .usa-footer__return-to-top a:hover {
            color: var(--tsg-primary-dark);
        }

/* Columns */
.usa-footer .usa-footer__nav {
    border-bottom: 0;
    padding: 0;
}

.usa-footer .usa-footer__primary-content--collapsible {
    margin: 0 1rem;
}

    .usa-footer .usa-footer__primary-content--collapsible .usa-list {
        margin: 0;
        padding: 0;
    }

    .usa-footer .usa-footer__primary-content--collapsible .usa-footer__primary-link {
        background-color: transparent;
        border-top: 0;
        color: #fff;
        font-family: var(--tsg-font-body);
        font-size: 1.01rem;
        font-weight: 500;
        line-height: 1.4;
        margin-top: 0;
    }

/* Small screens: the columns stack, so drop the grid gap. Its negative row
   margins plus USWDS's own negative nav margins pushed the footer 8px past
   the right edge of the screen (the sideways scroll on phones). */
@media (max-width: 39.99em) {
    .usa-footer .usa-footer__nav > .grid-row {
        margin-left: 0;
        margin-right: 0;
    }

        .usa-footer .usa-footer__nav > .grid-row > .usa-footer__nav-item {
            padding-left: 0;
            padding-right: 0;
        }
}

/* Small screens: USWDS turns each column heading into an expand/collapse button */
.usa-footer .usa-footer__primary-content--collapsible .usa-footer__primary-link--button {
    border-bottom: 1px solid var(--tsg-rule);
    border-top-width: 0;
    flex-direction: row-reverse;
    gap: 0.5rem;
    justify-content: space-between;
    margin-bottom: 0;
    padding: 1rem 0;
}

    .usa-footer .usa-footer__primary-content--collapsible .usa-footer__primary-link--button::before {
        margin-right: 0;
        transform: rotate(90deg);
    }

    .usa-footer .usa-footer__primary-content--collapsible .usa-footer__primary-link--button[aria-expanded=true] {
        border-bottom: 0;
        padding-bottom: 1.5rem;
    }

        .usa-footer .usa-footer__primary-content--collapsible .usa-footer__primary-link--button[aria-expanded=true]::before {
            transform: rotate(180deg);
        }

        .usa-footer .usa-footer__primary-content--collapsible .usa-footer__primary-link--button[aria-expanded=true] + ul {
            border-bottom: 1px solid var(--tsg-rule);
        }

.usa-footer .usa-footer__nav-item:first-child .usa-footer__primary-link--button {
    padding-top: 1.5rem;
}

.usa-footer__secondary-link {
    line-height: 1.3;
    margin-left: 0;
}

    .usa-footer__secondary-link + .usa-footer__secondary-link {
        padding-top: 1.5rem;
    }

    .usa-footer__secondary-link:last-child {
        padding-bottom: 2rem;
    }

@media (min-width: 40em) {
    .usa-footer .usa-footer__primary-content--collapsible {
        margin: 0;
    }

        .usa-footer .usa-footer__primary-content--collapsible .usa-footer__primary-link {
            font-size: 1.14rem;
        }
}

@media (min-width: 55em) {
    .usa-footer .usa-footer__nav {
        max-width: var(--tsg-width);
        padding-top: 2rem;
    }

    .usa-footer .usa-footer__primary-content--collapsible .usa-footer__primary-link {
        margin-bottom: 0;
        padding-bottom: 1rem;
    }

    .usa-footer__secondary-link + .usa-footer__secondary-link {
        padding-top: 0.75rem;
    }

    .usa-footer__secondary-link:last-child {
        padding-bottom: 0;
    }
}

/* Lower section: disclaimer over a divider, then logo + "Follow Us" */
.usa-footer__secondary-section {
    color: #fff;
    padding: 2rem 0 1.5rem;
}

.usa-footer .usa-footer__secondary-section-disclaimer {
    border-bottom: 1px solid var(--tsg-rule);
    color: #fff;
    font-size: 1.01rem;
    margin: 0 0 1.5rem;
    max-width: none;
    padding-bottom: 2rem;
}

.usa-footer__secondary-section-disclaimer a {
    font-size: 1.01rem;
}

.usa-footer__secondary-section-wrapper {
    row-gap: 1.5rem;
}

.usa-footer__contact-links,
.usa-footer__logo {
    margin: 0;
    width: fit-content;
}

    .usa-footer__logo a {
        display: inline-block;
    }

.usa-footer img {
    height: 2.25rem;
    width: auto;
}

.usa-footer__contact-heading {
    color: #fff;
    font-family: var(--tsg-font-body);
    font-size: 1.01rem;
    font-weight: 500;
    line-height: 1.4;
    margin: 0 0 0.25rem;
}

.usa-footer__social-links {
    padding-bottom: 0;
    text-align: left;
}

.usa-footer__social-links-wrapper {
    flex-direction: column;
}

@media (min-width: 40em) {
    .usa-footer .usa-footer__secondary-section-disclaimer {
        padding-bottom: 1.5rem;
    }

    .usa-footer img {
        height: 2.5rem;
    }

    .usa-footer__contact-heading {
        font-size: 1.14rem;
    }
}

@media (min-width: 55em) {
    .usa-footer img {
        height: 2.75rem;
    }
}

/* Social icons: light 1.5rem icons drawn with CSS masks; blue on hover */
.usa-footer .usa-social-link__wrapper {
    padding: 0.5rem;
}

.usa-footer .usa-social-link {
    background-color: transparent;
    display: inline-block;
    height: fit-content;
    padding: 0;
    width: fit-content;
}

    .usa-footer .usa-social-link::after {
        background-color: var(--tsg-on-dark);
        content: "";
        display: inline-block;
        height: 1.5rem;
        -webkit-mask-position: center;
        mask-position: center;
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-size: 1.5rem 1.5rem;
        mask-size: 1.5rem 1.5rem;
        padding: 2px;
        width: 1.5rem;
    }

.usa-footer .usa-social-link__facebook::after {
    -webkit-mask-image: url("uswds/dist/img/usa-icons/facebook.svg");
    mask-image: url("uswds/dist/img/usa-icons/facebook.svg");
}

.usa-footer .usa-social-link__instagram::after {
    -webkit-mask-image: url("uswds/dist/img/usa-icons/instagram.svg");
    mask-image: url("uswds/dist/img/usa-icons/instagram.svg");
}

.usa-footer .usa-social-link__x::after {
    -webkit-mask-image: url("uswds/dist/img/usa-icons/x.svg");
    mask-image: url("uswds/dist/img/usa-icons/x.svg");
}

.usa-footer .usa-social-link__youtube::after {
    -webkit-mask-image: url("uswds/dist/img/usa-icons/youtube.svg");
    mask-image: url("uswds/dist/img/usa-icons/youtube.svg");
}

.usa-footer .usa-social-link__rss_feed::after {
    -webkit-mask-image: url("uswds/dist/img/usa-icons/rss_feed.svg");
    mask-image: url("uswds/dist/img/usa-icons/rss_feed.svg");
}

.usa-footer .usa-social-link:hover,
.usa-footer .usa-social-link:focus-visible {
    background-color: transparent;
}

    .usa-footer .usa-social-link:hover::after,
    .usa-footer .usa-social-link:focus-visible::after {
        background-color: var(--tsg-hover-blue);
    }

@media (forced-colors: active) {
    .usa-footer .usa-social-link::after {
        background-color: LinkText;
        forced-color-adjust: none;
    }
}

/* ---- Identifier ---- */
.usa-identifier {
    font-size: 1.01rem;
    padding: 1rem 0 2rem;
}

    .usa-identifier a {
        color: #fff;
    }

.usa-identifier__identity-disclaimer,
.usa-identifier__usagov-description {
    line-height: 1.5;
}

.usa-identifier__identity-disclaimer {
    font-weight: 600;
}

    .usa-identifier__identity-disclaimer a,
    .usa-identifier__identity-disclaimer a:visited {
        color: #fff;
    }

        .usa-identifier__identity-disclaimer a:hover {
            color: var(--tsg-on-dark);
        }

.usa-identifier__required-links-list {
    border-bottom: 1px solid var(--tsg-rule);
    border-top: 1px solid var(--tsg-rule);
    padding: 2rem 0;
}

.usa-identifier__required-links-item {
    margin-bottom: 1.5rem;
}

    .usa-identifier__required-links-item .usa-link {
        color: #fff;
        font-size: var(--tsg-font-small);
        text-decoration: underline;
        text-decoration-thickness: 1px;
    }

        .usa-identifier__required-links-item .usa-link:visited {
            color: var(--tsg-visited-on-dark);
        }

        .usa-identifier__required-links-item .usa-link:hover,
        .usa-identifier__required-links-item .usa-link:active {
            color: var(--tsg-on-dark);
            text-decoration: none;
        }

        .usa-identifier__required-links-item .usa-link:focus {
            outline: 2px solid #0076d6;
            outline-offset: 0;
            text-decoration: none;
        }

.usa-identifier__section--usagov {
    padding-bottom: 0;
}

/* USA.gov links: stacked, one per line (matches the main site's current footer) */
.tsg-usagov-links {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    margin-top: 0.5rem;
    row-gap: 0.5rem;
}

.usa-identifier__section--usagov a,
.usa-identifier__section--usagov a:visited {
    color: #fff;
    display: inline-block;
    font-size: var(--tsg-font-small);
    font-weight: 400;
    margin-top: 0;
}

    .usa-identifier__section--usagov a:hover {
        color: var(--tsg-on-dark);
    }

@media (min-width: 40em) {
    .usa-identifier__section--required-links {
        padding-bottom: 1rem;
        padding-top: 1rem;
    }

    .usa-identifier__required-links-list {
        column-count: 1;
    }
}

@media (min-width: 55em) {
    .usa-identifier__section--required-links {
        padding-bottom: 0.5rem;
        padding-top: 0.5rem;
    }

    .usa-identifier__required-links-list {
        column-count: 4;
        column-gap: 1.5rem;
        padding-bottom: 0.75rem;
        padding-top: 1.5rem;
    }

    .usa-identifier__required-links-item {
        display: block;
        margin-bottom: 0.75rem;
    }

        .usa-identifier__required-links-item .usa-link,
        .usa-identifier__section--usagov a {
            font-size: var(--tsg-font-small-lg);
        }
}

@media (min-width: 64em) {
    .usa-identifier__required-links-list {
        column-gap: 2rem;
    }
}

/* ---- Print: drop the site chrome ---- */
@media print {
    .usa-banner,
    .usa-header,
    .usa-overlay,
    .tsg-app-bar,
    .usa-footer,
    .usa-identifier {
        display: none !important;
    }
}