@import './partials/variables.css';

/* Legacy Styles */
@import './partials/legacy.css';
@import './about.css';
@import './appt.css';
@import './forms.css';
@import './searches.css';
@import './landing.css';

@import './partials/notice-bar.css';
@import './partials/nav.css';
@import './partials/foot.css';
/* @import './partials/footer.css'; */

@import './partials/layouts.css';
@import './partials/breadcrumbs.css';
@import './partials/banners.css';
@import './partials/rich-text.css';
@import './partials/buttons.css';
@import './partials/grid.css';
@import './partials/disclaimer.css';

@import './styles-2023.css';
@import './templates/home.css';
@import './templates/app.css';
@import './templates/dept-landing.css';
@import './templates/dept-detail.css';
@import './templates/facility-landing.css';
@import './templates/facility-detail.css';

/* Base - TODO: break into base.css */

body {
    letter-spacing: unset;
    position: relative;
}

body:has(.megamenu-open-button.active) {
	position: fixed;
	top: 0; 
	left: 0;
}

h1, h2, h3, h4, h5, label{
    color: var(--text-blue);
}

.has-error, label, .invalidField{
    --red: var(--error-color);
}

/* Fonts */

@font-face {
    font-family: 'Public Sans';
    src: url('/clique/fonts/PublicSans-VariableFont_wght.woff2');
    font-weight: 100 900;
}

@font-face {
    font-family: 'Public Sans';
    font-style: italic;
    src: url('/clique/fonts/PublicSans-Italic-VariableFont_wght.woff2');
    font-weight: 100 900;
}
@font-face {
    font-family: 'Afacad';
    src: url('/clique/fonts/Afacad-VariableFont_wght.woff2');
    font-weight: 100 900;
}

@font-face {
    font-family: 'Afacad';
    font-style: italic;
    src: url('/clique/fonts/Afacad-Italic-VariableFont_wght.woff2');
    font-weight: 100 900;
}

/* Global focus states */
*:focus-visible {
    /* box-shadow: 0px 0px 20px var(--text-blue); */
    outline: 2px var(--focus-type) var(--focus-color) !important;
    outline-offset: var(--focus-offset) !important;
}

/* @media screen and (max-width: 768px){
    *:focus-visible{
        box-shadow: none;
    }
} */

input:not([type=submit]):focus-visible {
    --focus-offset: -1px;
    --focus-type: solid;
    --focus-color: var(--gold);
    box-shadow: 0px 0px 10px var(--text-blue);
}

html, body {
	width: 100vw;
    font-size: 16px !important;
	overflow-x: clip;
}

html {
	scroll-behavior: smooth;
}

body {
    font-family: var(--font-primary);
    color: var(--text);
    background-color: var(--white);
}

.wrapper {
    margin: 0 auto;
    width: calc(100% - 80px);
    max-width: var(--max-width);
}

.wrapper-wide {
    max-width: var(--max-width-wide);
}

@media screen and (max-width: 767px) {
    .wrapper {
        width: calc(100% - 40px);
    }
}

#banner-second-2023 {
	display: none;
}

/* Typography */
h1, h2, h3, h4, h5, h6, p, ol, ul, li {
	margin: 0;
}

p {
	text-wrap: pretty;
}

a {
	color: var(--link-medium-blue);
	transition: color .3s ease;

	&:hover {
		color: #002F7C;
	}
}

.head-128 {
	font-family: 'Afacad', sans-serif;
	font-size: 8rem;
	font-weight: 700;
	line-height: 1;

	@media screen and (max-width: 768px) {
		font-size: 6rem;
	}

	@media screen and (max-width: 620px) {
		font-size: 5rem;
	}
}

.head-96 {
	font-family: 'Afacad', sans-serif;
	font-size: 6rem;
	font-weight: 700;
	line-height: .8;

	@media screen and (max-width: 768px) {
		font-size: 5rem;
	}

	@media screen and (max-width: 620px) {
		font-size: 4rem;
	}
}

.head-72 {
	font-family: 'Afacad', sans-serif;
	font-size: 4.5rem;
	font-weight: 700;
	line-height: 1;

	@media screen and (max-width: 768px) {
		font-size: 4rem;
	}

	@media screen and (max-width: 620px) {
		font-size: 3.5rem;
	}
}

.head-64 {
	font-family: 'Afacad', sans-serif;
	font-size: 4rem;
	font-weight: 700;
	line-height: .8;

	@media screen and (max-width: 768px) {
		font-size: 3.5rem;
	}

	@media screen and (max-width: 620px) {
		font-size: 3rem;
	}
}

.head-56 {
	font-family: 'Afacad', sans-serif;
	font-size: 3.5rem;
	font-weight: 700;
	line-height: 1;

	@media screen and (max-width: 768px) {
		font-size: 3rem;
	}

	@media screen and (max-width: 620px) {
		font-size: 2.5rem;
	}
}

.head-48 {
	font-family: 'Afacad', sans-serif;
	font-size: 3rem;
	font-weight: 700;
	line-height: 1;

	@media screen and (max-width: 768px) {
		font-size: 2.5rem;
	}
}

.head-40 {
	font-family: 'Afacad', sans-serif;
	font-size: 2.5rem;
	font-weight: 700;
	line-height: 1;
}

.head-36 {
	font-family: 'Afacad', sans-serif;
	font-size: 2.25rem;
	font-weight: 700;
	line-height: 1;
}

.head-32 {
	font-family: 'Afacad', sans-serif;
	font-size: 2rem;
	font-weight: 700;
	line-height: 1;
}

.head-24 {
	font-family: 'Afacad', sans-serif;
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1;
}

.head-18 {
	font-family: 'Afacad', sans-serif;
	font-size: 1.125rem;
	font-weight: 700;
	line-height: 1;
}

.body-18 {
	font-size: 1.125rem;
	font-weight: 400;
	line-height: 1.7;
}

.body-17 {
	font-size: 1.063rem;
	font-weight: 400;
	line-height: 1.75;
}

.body-14 {
	font-size: .875rem;
	font-weight: 400;
	line-height: 1.7;
}

.tag {
	font-family: 'Afacad', sans-serif;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--color-secondary);
}

strong,
.strong {
	font-weight: 700;
}

.sr-only {
	border: 0 !important;
	clip: rect(1px, 1px, 1px, 1px) !important;
	clip-path: inset(50%) !important;
	height: 1px !important;
	margin: -1px !important;
	overflow: hidden !important;
	padding: 0 !important;
	position: absolute !important;
	width: 1px !important;
	white-space: nowrap !important;
}

/* Stacks */
.stack-4 > * + * {
	margin-block-start: 4px;
}

.stack-8 > * + * {
	margin-block-start: 8px;
}

.stack-12 > * + * {
	margin-block-start: 12px;
}

.stack-18 > * + * {
	margin-block-start: 18px;
}

.stack-24 > * + * {
	margin-block-start: 24px;
}

.stack-28 > * + * {
	margin-block-start: 28px;
}

.stack-36 > * + * {
	margin-block-start: 36px;
}

.stack-40 > * + * {
	margin-block-start: 40px;
}

.stack-48 > * + * {
	margin-block-start: 48px;
}

.stack-60 > * + * {
	margin-block-start: 60px;
}

/* backgrounds */
.bg-light-gray {
	padding: 24px 24px 48px 24px;
	background-color: var(--color-bg-1);
	border-radius: 16px;
}

/* Mobile Menu */

#mobile-menu-toggle {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;

    span.icon {
        width: 24px;
        height: 24px;
        display: inline-block;
        background: transparent url('/clique/images/refresh-2023/icon-menu.svg') no-repeat center;

        .menu-open & {
            background: transparent url('/clique/images/refresh-2023/icon-close.svg') no-repeat center;
        }
    }

    @media screen and (min-width: 1025px) {
        display: none;

        ~ #mega-menu-mobile {
            display: none;
        }
    }
}

@media screen and (max-width: 1024px) {
    :root {
        --nav-height: 64px;
    }

    #nav-search,
    #message-bar .right {
        display: none;
    }

    #nav-bar {
        z-index: 10;
        position: sticky;
        top: 0;
        display: flex;
        align-items: center;
        justify-content: center;

        .wrapper {
            position: relative;
            z-index: 5;
        }
    }

    #mega-menu {
        display: none;
    }

    #mega-menu-mobile {
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
        background-color: var(--color-secondary);
        width: 100vw;
        height: 100vmax;
        transform: translate3d(-100%, 0, 0);
        transition: transform 0.33s ease-in-out;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        padding-top: calc(var(--nav-height) * 1.25);
        overflow: auto;

        &.active {
            transform: translate3d(0, 0, 0);
        }

        a {
            border-bottom-color: transparent;

            .secondary &:hover {
                border-bottom-color: var(--gold);
            }
        }

        button {
            border: none;
            background-color: transparent !important;
            border-bottom: 1px solid var(--dark-background);
            padding-left: unset;
            padding-right: unset;
            width: 100%;
            display: flex;
            font-size: 18px;
            line-height: 21px;

            &::after {
                transition: transform 0.125s linear;
            }

            &[aria-expanded='true']::after {
                transform: rotate(-180deg);
            }
        }

        form {
            width: 100%;
            display: grid;
            grid-template-columns: 1fr auto;
        }

        > li {
            width: calc(100% - 2rem);
            max-width: 500px;
            margin: 0 auto;
            position: relative;

            .megamenu-dropdown {
                display: block;
                position: relative;
                width: 100%;

                &.active {
                    display: flex;
                    flex-direction: column;
                    background-color: transparent;
                    padding-top: 42px;

                    ul {
                        display: flex;
                        flex-direction: column;
                        width: 100%;
                        padding-top: 0;
                    }
                }
            }
        }

        li.secondary {
            padding: 16px 0;
            font-weight: 400;
        }
    }
}

/* Buttons */

.footer-2023{
    background-color: var(--color-primary)!important;
    .info-block, #copyright {
        background-color: rgba(0,0,0,0.2);
    }
    p, li, a{
        text-wrap: balance;
        text-wrap: pretty;
        opacity: .9;
        color: #C6C6C6;
    }
    a:hover {
        color: white;
        /* opacity:  */
    }
    .wrapper {
        h2 {
            font-family: 'Afacad', sans-serif!important;
            font-size: 18px;
            font-style: normal;
            font-weight: 700;
            line-height: normal;
        }
    }
    h1, h2, h3, h4, h5, p {
        margin-bottom: 1.25em;
        margin-top: 1.25em;
    }
    ul li {
        margin-bottom: 1em;
        padding-bottom: 0px;
    }
    #mobile-footer-dept{
        @media screen and (min-width: 1024px){
            display: none;
        }
    }
}

/* language dropdown styles */
.wg-default, .wg-default .country-selector {
	position: relative !important;
	bottom: unset !important;
	right: unset !important;
	display: block !important;
	width: 9rem !important;
	z-index: 2000 !important;
}

#weglot-listbox {
	width: 9rem !important;
	padding-block: 1.5rem !important;

	@media screen and (max-width: 1024px){
		width: 13rem !important;
		padding-block: 1rem !important;
		padding-left: .5rem !important;
	}

	a {
		display: block;
		height: unset;
		padding-block: .5rem;

		&:hover {
			background-color: var(--background-light-blue);
		}
	}
}

.wg-drop.country-selector {
	background-color: Transparent!important;
}


.wg-drop.country-selector a {
	font-size: .875rem !important;
	white-space: normal !important;
	height: 100% !important;
	color: #525366!important;

	@media screen and (max-width: 1024px){
		font-size: 1rem !important;;
		padding-left: 0 !important;;
	}
}

.wg-drop.country-selector .wgcurrent {
	background-color: white !important;
	border-radius: 100px;
	height: 24px;
	&::after {
		height: 100%!important;
		top: 0;
		color: #525366!important;
		background-image: url('data:image/svg+xml, <svg id="caret-down" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M4 6L8 10L12 6" stroke="%23525366" stroke-linecap="round" stroke-linejoin="round"/></svg>')!important;
		background-size: contain!important;
	}
}

@media screen and (max-width: 1024px) {
	.wg-drop.country-selector {
		margin-left: 0.75rem;
		padding-bottom: 1rem;
		margin-top: -1rem;
	}
	.wg-drop.country-selector .wgcurrent {
		background-color: transparent!important;
		&::after {
			margin-bottom: 0.5rem!important;
			background-image: url('data:image/svg+xml, <svg id="caret-down" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M4 6L8 10L12 6" stroke="white" stroke-linecap="round" stroke-linejoin="round"/></svg>')!important;
			background-size: contain!important;
			height: 1rem!important;
		}
	}
	.wg-drop.country-selector a:not([role="option"]) {
		font-size: 1rem !important;
		white-space: normal !important;
		height: 100% !important;
		color: white!important;
	}
	
}

.wg-drop.country-selector :not(.wgcurrent) a {
	width: 100% !important;
}

.wg-drop.country-selector .wgcurrent {
	background-color: transparent;
	border: 0 !important;
	/* border-radius: 100px; */
	a {
		color: var(--color-text);
	}

	@media screen and (max-width: 1024px){
		background-color: var(--color-base);
	}

	&[aria-expanded="true"] {

		&::after {
			@media screen and (max-width: 1024px){
				transform: scaleY(-1) translateY(-.75rem) !important;
			}
		}
	}

	&::after {

		@media screen and (max-width: 1024px){
			position: relative !important;
			top: unset !important;
			right: unset !important;
			transform: translateY(.75rem) !important;
		}
	}
}

.wg-drop.country-selector .wgcurrent a {

	@media screen and (max-width: 1024px){
		display: inline-block !important;
		padding-top: .5rem !important;
		padding-right: .5rem !important;
	}
}

.wg-li {
	width: 100% !important;
	text-align: left !important;
	margin: .25rem;

	&.focus {
		a {
			outline: 2px var(--focus-type) var(--focus-color) !important;
			outline-offset: -2px !important;
		}
	}

	a {
		display: flex!important;
		align-items: center !important;
		text-wrap: unset !important;
		padding: .25rem;
	}
}

.wg-flag {
	display: none !important;
}