/*

    SSA.gov USWDS Theme for UEF 3
    -----------------------------------------------------------------------------------------------

    Provides UEF 3 with the ability to visually theme pages according to the specs from the SSA.gov
    customization of the United States Web Design System (USWDS).

    No need to rewrite pages with USWDS markup. Just use familiar UEF 3 Web Components.

    Usage:

    - Load this file after all UEF 3 CSS files have been loaded

*/

/* First, we need to import the baseline USWDS Theme for UEF 3, which we will modify from */
@import url("uef3-uswds-theme.css");

/* MARK: DESIGN TOKENS */
/* Now, we start adding our SSA.gov modifications */
:root {

    --uef-checklist-border-color: var(--uef-color-uswds-gray-cool-30) !important;
    --uef-checklist-border-style: solid !important;

    --uef-color-blue-primary: var(--uef-color-uswds-blue-50v) !important;

    --uef-button-color1-hover: var(--uef-color-uswds-blue-70) !important;
    --uef-button-font-weight: var(--uef-font-weight-bold) !important;

    --uef-checkbox-standalone-padding: var(--uef-space-2x) var(--uef-space-4x) !important;

    --uef-link-color: var(--uef-color-uswds-blue-60v) !important;
    --uef-link-color-hover: var(--uef-color-uswds-blue-60) !important;
    --uef-link-color-visited: var(--uef-color-uswds-blue-60) !important;
    --uef-link-color-visited-hover: var(--uef-color-uswds-blue-60) !important;
    --uef-link-focus-outline-width: var(--uef-border-width-m) !important;

    --uef-identifier-background-color: var(--uef-color-uswds-blue-80v) !important;

    --uef-menu-background-color: var(--uef-color-uswds-blue-5v) !important;
    --uef-menu-control-active-color	: var(--uef-color-uswds-blue-70) !important;
    --uef-menu-control-active-background-color: var(--uef-color-uswds-blue-5v) !important;
    --uef-menu-offset: -4px !important;
    --uef-menu-gap: var(--uef-space-1x) !important;

    --uef-nav-item-font-family: var(--uef-font-family-public-sans) !important;
    --uef-nav-item-font-size: calc(var(--uef-font-size-md) + 2px) !important;
    --uef-nav-item-current-line-offset: calc(var(--uef-space-1x) + 2px) !important;
    --uef-nav-item-current-line-color: var(--uef-color-blue-vivid-default) !important;
    --uef-nav-item-color: var(--uef-color-gray-dark) !important;
    --uef-nav-item-color-hover: var(--uef-color-blue-vivid-default) !important;
    --uef-nav-item-font-weight: var(--uef-font-weight-bold) !important;
    --uef-nav-item-hover-line-color: var(--uef-color-blue-vivid-default) !important;
    --uef-nav-item-hover-line-offset: calc(var(--uef-space-1x) + 2px) !important;
    --uef-nav-item-hover-text-decoration: underline !important;
    --uef-nav-item-current-text-decoration: underline !important;

    --uef-radiolist-border-color: var(--uef-color-uswds-gray-cool-30) !important;
    --uef-radiolist-border-style: solid !important;
    --uef-radiolist-border-width: var(--uef-border-width-s);

    --uef-show-hide-control-focus-outline-size: var(--uef-border-width-m) !important;
}

/* MARK: FONTS */

@font-face {
    font-family: "Public Sans Web";
    font-style: normal;
    font-weight: 100;
    font-display: fallback;
    src: url('https://www.ssa.gov/uef/fonts/public-sans/PublicSans-Thin.woff2');
}

@font-face {
    font-family: "Public Sans Web";
    font-style: normal;
    font-weight: 200;
    font-display: fallback;
    src: url('https://www.ssa.gov/uef/fonts/public-sans/PublicSans-ExtraLight.woff2');
}

@font-face {
    font-family: "Public Sans Web";
    font-style: normal;
    font-weight: 300;
    font-display: fallback;
    src: url('https://www.ssa.gov/uef/fonts/public-sans/PublicSans-Light.woff2');
}

@font-face {
    font-family: "Public Sans Web";
    font-style: normal;
    font-weight: 400;
    font-display: fallback;
    src: url('https://www.ssa.gov/uef/fonts/public-sans/PublicSans-Regular.woff2');
}

@font-face {
    font-family: "Public Sans Web";
    font-style: normal;
    font-weight: 500;
    font-display: fallback;
    src: url('https://www.ssa.gov/uef/fonts/public-sans/PublicSans-Medium.woff2');
}

@font-face {
    font-family: "Public Sans Web";
    font-style: normal;
    font-weight: 600;
    font-display: fallback;
    src: url('https://www.ssa.gov/uef/fonts/public-sans/PublicSans-SemiBold.woff2');
}

@font-face {
    font-family: "Public Sans Web";
    font-style: normal;
    font-weight: 700;
    font-display: fallback;
    src: url('https://www.ssa.gov/uef/fonts/public-sans/PublicSans-Bold.woff2');
}

@font-face {
    font-family: "Public Sans Web";
    font-style: normal;
    font-weight: 800;
    font-display: fallback;
    src: url('https://www.ssa.gov/uef/fonts/public-sans/PublicSans-ExtraBold.woff2');
}

@font-face {
    font-family: "Public Sans Web";
    font-style: normal;
    font-weight: 900;
    font-display: fallback;
    src: url('https://www.ssa.gov/uef/fonts/public-sans/PublicSans-Black.woff2');
}

@font-face {
    font-family: "Public Sans Web";
    font-style: italic;
    font-weight: 100;
    font-display: fallback;
    src: url('https://www.ssa.gov/uef/fonts/public-sans/PublicSans-ThinItalic.woff2');
}

@font-face {
    font-family: "Public Sans Web";
    font-style: italic;
    font-weight: 200;
    font-display: fallback;
    src: url('https://www.ssa.gov/uef/fonts/public-sans/PublicSans-ExtraLightItalic.woff2');
}

@font-face {
    font-family: "Public Sans Web";
    font-style: italic;
    font-weight: 300;
    font-display: fallback;
    src: url('https://www.ssa.gov/uef/fonts/public-sans/PublicSans-LightItalic.woff2');
}

@font-face {
    font-family: "Public Sans Web";
    font-style: italic;
    font-weight: 400;
    font-display: fallback;
    src: url('https://www.ssa.gov/uef/fonts/public-sans/PublicSans-Italic.woff2');
}

@font-face {
    font-family: "Public Sans Web";
    font-style: italic;
    font-weight: 500;
    font-display: fallback;
    src: url('https://www.ssa.gov/uef/fonts/public-sans/PublicSans-MediumItalic.woff2');
}

@font-face {
    font-family: "Public Sans Web";
    font-style: italic;
    font-weight: 600;
    font-display: fallback;
    src: url('https://www.ssa.gov/uef/fonts/public-sans/PublicSans-SemiBoldItalic.woff2');
}

@font-face {
    font-family: "Public Sans Web";
    font-style: italic;
    font-weight: 700;
    font-display: fallback;
    src: url('https://www.ssa.gov/uef/fonts/public-sans/PublicSans-BoldItalic.woff2');
}

@font-face {
    font-family: "Public Sans Web";
    font-style: italic;
    font-weight: 800;
    font-display: fallback;
    src: url('https://www.ssa.gov/uef/fonts/public-sans/PublicSans-ExtraBoldItalic.woff2');
}

@font-face {
    font-family: "Public Sans Web";
    font-style: italic;
    font-weight: 900;
    font-display: fallback;
    src: url('https://www.ssa.gov/uef/fonts/public-sans/PublicSans-BlackItalic.woff2');
}

/* MARK: GENERAL RULES */

*, * * {
    font-family: var(--uef-font-family-public-sans) !important;
}

body {
    font-family: 'Public Sans Web' !important;
}

/* MARK: TYPOGRAPHY */

uef-typography[variant=heading1] *, h1 {
    --h1-font-size: calc(var(--uef-font-size-3xl) - 8px);       /* 40px */
    font-size: var(--h1-font-size) !important;
    font-weight: var(--uef-font-weight-bold) !important;
    /* line-height: calc(var(--h1-font-size) * 1.3) !important; */   /* 52px */
    color: var(--uef-color-uswds-blue-80v) !important;
}

uef-typography[variant=heading2] *, h2 {
    --h2-font-size: calc(var(--uef-font-size-2xl) + 4px);           /* 36px */
    font-family: var(--uef-font-family-public-sans) !important;
    font-size: var(--h2-font-size) !important;
    font-weight: var(--uef-font-weight-medium) !important;
    /* line-height: calc(var(--h2-font-size) * 1.28) !important;  */     /* 46px */
    color: var(--uef-color-uswds-gray-cool-90) !important;
}
uef-typography[variant=heading3] *, h3:not(uef-accordion-item *) {
    --h3-font-size: var(--uef-font-size-xl);                        /* 24px */
    font-family: var(--uef-font-family-public-sans) !important;
    font-size: var(--h3-font-size) !important;
    font-weight: var(--uef-font-weight-bold) !important;
    /*line-height: calc(var(--h3-font-size) * 1.2) !important;*/        /* 32px */
    color: var(--uef-color-uswds-gray-cool-90) !important;
}
uef-typography[variant=heading4] *, h4 {
    font-family: var(--uef-font-family-public-sans) !important;
    font-size: calc(var(--uef-font-size-lg) + 2px) !important;
    font-weight: var(--uef-font-weight-medium) !important;
    /*line-height: var(--uef-space-7x) !important; *//* 28px */
    color: var(--uef-color-uswds-gray-cool-90) !important;
}
uef-typography[variant=heading5] *, h5 {
    font-family: var(--uef-font-family-public-sans) !important;
    font-size: var(--uef-font-size-lg) !important;
    font-weight: calc(var(--uef-font-weight-bold) + 100) !important;
    /* line-height: calc(var(--uef-space-6x) + 2px) !important; */
    color: var(--uef-color-uswds-blue-70v) !important;
}
uef-typography[variant=heading6] *, h6 {
    font-family: var(--uef-font-family-public-sans) !important;
    font-size: calc(var(--uef-font-size-md) + 2px) !important;
    font-weight: var(--uef-font-weight-bold) !important;
    line-height: var(--uef-space-6x) !important;
    color: var(--uef-color-uswds-gray-cool-90) !important;
}

/* Lists */
ol, ul {
    line-height: var(--uef-font-line-height-regular) !important;
}

/* MARK: PAGE HEADER */

#uef-header-container {
    background-color: var(--uef-color-uswds-blue-70v) !important;
    color: var(--uef-color-white) !important;
    border-bottom: 1px solid var(--uef-color-gray-lighter);

}
#uef-header-container .uef-container--inner *:not(uef-menu *) {
    color: var(--uef-color-white) !important;
}
uef-container:nth-of-type(2) .uef-container--inner * {
    color: var(--uef-color-white) !important;
}
/* Navigation vertical alignment */
uef-button button {
    line-height: normal !important;
}
uef-menu div[role=menu] {
    padding: var(--uef-space-8x) !important;
}
@media(min-width: 30.25em) {
    #uef-header-xs {display: none;}
}
@media (max-width: 30.24em) {
    #uef-header-sm {display:none;}
}
@media (max-width:47.99em) {
    #uef-header-lg, #uef-nav-lg, #ssa-logo-lg { display: none; }
    #ssa-logo-sm { display: flex; }
}
@media (min-width:48em) {
    #uef-header-lg , #ssa-logo-lg {display: flex;}
    #uef-nav-lg {display: flex;}
    #uef-header-sm, #ssa-logo-sm {display: none;}
}
#uef-header-lg {
    font-size: calc(var(--uef-font-size-md) + 2px) !important;
}

/* "Social Security" page title */
#uef-header-container uef-typography[variant=heading1] h1 {
    font-family: Georgia,Cambria,Times New Roman,Times,serif !important;
    font-size: 1.375rem !important;
    font-weight: var(--uef-font-weight-regular) !important;
}

/* Header Navigation */
#uef-header-container uef-nav uef-nav-item uef-menu uef-link a {
    color: var(--uef-color-uswds-blue-60v) !important;
    font-size: var(--uef-font-size-md) !important;
    font-weight: var(--uef-font-weight-regular) !important;
}
#uef-header-container uef-nav uef-nav-item uef-menu uef-link a:hover {
    color: var(--uef-color-uswds-violet-70v) !important;
}
#uef-header-container uef-nav uef-nav-item[current] a:hover {
    color: var(--uef-color-white) !important;
    text-decoration-color: var(--uef-color-blue-vivid-default) !important;
    text-decoration-thickness: var(--uef-nav-item-hover-line-width) !important;
    text-underline-offset: var(--uef-nav-item-hover-line-offset) !important;
}
#uef-header-container uef-nav uef-nav-item a:visited {
    text-decoration-color: var(--uef-color-blue-vivid-default) !important;
}

/* Header Menus */
uef-icon.uef-menu--icon svg {
    height: var(--uef-size-xs) !important;
    width: var(--uef-size-xs) !important;
    padding-bottom: var(--uef-space-1x) !important;
    transition: none !important;
}

uef-menu[open]>.uef-menu-control button {
    color: var(--uef-color-uswds-blue-80v) !important;
    background-color: var(--uef-color-uswds-blue-5v) !important;
}
uef-menu .uef-menu--icon svg path {
    fill: var(--uef-color-white) !important;
}
uef-menu[open] .uef-menu--icon svg path {
    fill: var(--uef-color-uswds-blue-80v) !important;
}

uef-menu[megamenu] div[role=menu] {
    margin-top: var(--uef-space-4x) !important;
}
uef-menu[megamenu] div[role=menu] * {
    color: var(--uef-color-uswds-blue-80v) !important;
    background-color: var(--uef-color-uswds-blue-5v) !important;
}
uef-menu[megamenu] div[role=menu] a {
    font-size: var(--uef-font-size-md) !important;
    line-height: 1.25 !important;
}
#uef-header-container uef-menu[megamenu][open] * {
    color: var(--uef-color-uswds-blue-80v) !important;
    background-color: var(--uef-color-uswds-blue-5v) !important;
}
#uef-header-container uef-menu[megamenu][open] uef-link a {
    color: var(--uef-color-uswds-blue-60v) !important;
}
#uef-header-container uef-menu[megamenu][open] uef-link a:hover {
    color: var(--uef-color-uswds-violet-70v) !important;
}

/* MARK: SEARCH */
#search {
    border-radius: var(--uef-border-radius-soft);

    /* Turn Search placeholders off (text color = background color) */
    &::placeholder {
        color: var(--uef-color-white) !important;
    }
}
#search-overlay {
    margin-right: 0 !important;
    background-color: var(--uef-color-blue-vivid-50v) !important;

    & uef-icon {
        font-size: var(--uef-font-size-md) !important;
        line-height: 2.5 !important;

        & svg {
            color: var(--uef-color-white) !important;
        }
    }
}
uef-textbox .uef-input-wrapper .uef-input-overlay {
    padding-left: 0 !important;
}
uef-textbox[field-name=search] .uef-input-overlay {
    right: -0.05rem !important;
}

/* remove the vertical divider between "Espanol" and "Sign In" */
#uef-header-lg uef-typography[tag=span] {
    display: none !important;
}

/* modify the 'Espanol' link */
a[lang=es]:before {
    padding-left: var(--uef-space-6x) !important;
    background-image: url(https://www.ssa.gov/themes/custom/ssa_core/assets/img/ssa/language--es.svg), linear-gradient(transparent, transparent) !important;
    background-repeat: no-repeat !important;
    width: var(--uef-size-xl) !important;
    height: var(--uef-size-xl) !important;
    margin-right: var(--uef-space-1x) !important;
    content: "" !important;
}

/* identify and modify the 'Sign In' button and link */
#uef-header-lg uef-link:has(a:not(a[lang=es])):hover {
    background-color: var(--uef-color-uswds-blue-50) !important;
}
#uef-header-lg uef-link:has(a:not(a[lang=es])) a:hover {
    text-decoration: none !important;
    margin-top: var(--uef-space-4x) !important;
}

#uef-header-lg a:not(a[lang=es]) {
    background-position: left var(--uef-space-3x) top 50%;
    background-size: var(--uef-size-lg) !important;
    background-image: url(https://www.ssa.gov/themes/custom/ssa_core/assets/img/ssa/account_circle.svg), linear-gradient(transparent, transparent);
    background-repeat: no-repeat;
    padding: var(--uef-space-2x) var(--uef-space-3x) var(--uef-space-2x) 2.25rem !important;
    border: .125rem solid var(--uef-color-white) !important;
    border-radius: var(--uef-border-radius-soft);
}
#uef-header-lg a:not(a[lang=es]):hover {
    background-color: var(--uef-color-uswds-blue-50) !important;
}

/* MARK: LINKS */

/* UEF 3 is missing a link active colorS token */
uef-link a:active {
    color: var(--uef-color-uswds-violet-80v) !important;
}

a[rel=external] uef-icon {
    display: none !important;
}

/* MARK: MAIN CONTENT */

#main * {
    font-family: var(--uef-font-family-public-sans) !important;
}

/* change the size of our Page Title (the first H3 on the page in the main section) */
#main uef-typography[variant=heading3]:first-of-type:not(uef-accordion-item *, uef-card *) h3 {
    font-size: calc(var(--uef-font-size-2xl) + 8px) !important;
    color: var(--uef-color-uswds-blue-70) !important;
}

/* MARK: ALERTS */

.uef-alert_content {
    line-height: 1.5 !important;
}

/* MARK: SUB-NAVIGATION */
uef-subnav {
    color: var(--uef-color-uswds-gray-cool-60) !important;
    line-height: 22px !important;
    margin-top: 1.4rem !important;
}
uef-subnav-group:has(div>uef-subnav-item[selected]) {
    font-weight: 400 !important;
}
uef-subnav-group>div:last-child {
    margin-bottom: 0 !important;
}
uef-subnav-item {
    font-size: 15px !important;
}
uef-subnav-item[selected] > * {
    font-weight: 700 !important;
}

uef-subnav-item[selected] {
    border-left-color: var(--uef-color-uswds-blue-60v) !important;
    background-color: var(--uef-color-white) !important;
    --uef-subnav-item-border-left-width: 4px !important;
}
uef-subnav-item[selected] > * {
    color: var(--uef-color-uswds-blue-60v) !important;
}

/* MARK: FORM ELEMENTS */

input, uef-checkbox, uef-radio, select, textarea {
    border-radius: var(--uef-border-radius-soft) !important;
}

uef-input-styles {
    line-height: 1.5 !important;
}

/* Radio button */
uef-radio *:hover {
    cursor: pointer !important;
}

@media (max-width: 480px) {
    uef-checklist .uef-checklist-contents,
    uef-radiolist .uef-radiolist-contents, .uef-input-wrapper {
        width: 100%;
    }
}

/* Droplist */
.uef-input-instructions {
    line-height: 1.5;
}

/* Toggle Group */
uef-toggle-button label {
    font-family: var(--uef-font-family-public-sans);
}

/* MARK: CARD */

.uef-card-body uef-typography {
    padding-top: 0 !important;
}

/* MARK: FOOTER */

uef-footer * {
    font-size: 18px !important;
}
uef-footer .uef-identifier nav {
    margin-top: var(--uef-space-4x) !important;
    border-top: 1px solid var(--uef-color-uswds-blue-20v) !important;
}
uef-container[slot=uef-footer-nav] a {
    color: var(--uef-color-uswds-blue-60v) !important;
    font-feature-settings: "kern";
    font-weight: var(--uef-font-weight-regular) !important;
    text-underline-offset: var(--uef-space-1x) !important;

    &:hover {
        color: var(--uef-color-uswds-blue-80) !important;
    }
}
uef-button {
    border-radius: var(--uef-border-radius-soft) !important;
}
uef-button-group[slot=uef-dialog-footer] {
    display: flex !important;
}