/* mss_nav.css - header/footer nav classes

Breakpoints breakdown:
1080px - special breakpoint: (WAS when parallax background shifted from panel element to a special full-sized-fixed-element)
1020px - lower-bound desktop-centric content, upper-bound tablet content
768px - lower-bound tablet-centric content, upper-bound mobile content
360px - *very* specific content shaping at this breakpoint

*/

:root {
    --breakpoint-page-width:1020px; /* for reference only */
    --min-breakpoint-page-width:1020.1px;

    --menu-height:120px;
    --video-shift-offset:calc( -1 * var(--header-height));
}

/* --- H E A D E R --- */
page-header-wrapper {
    position: relative;
    z-index:1000;
    height:calc(var(--orange-strip-height) + var(--header-height));
}
/* element needs position as mss_core places pseudo elems on it */
page-header-wrapper + first-page-element {
    display:block;
    position: absolute;
    height:1px;
    width:100%;
}
page-top-orange-strip {
    top:0px;
    left:0px;
    width:100%;
    height: var(--orange-strip-height);
    background-color: var(--orange-header-bg);
    color:white;
    /* font-weight: 600; */
    display: flex;
    align-items:center;
}
page-top-orange-strip .general-container {
    text-align: end;
}
@media only screen and (max-width:1020px) {
    page-top-orange-strip .general-container {
        text-align:center;
    }
}
@media only screen and (max-width:768px) {
    page-top-orange-strip .general-container {
        display:flex;
        flex-direction: column-reverse;
        align-items: center;
        justify-content:start;
        height:var(--orange-strip-height);
    }
    top-nav-wrapper, contact-phone {
        line-height: calc(0.5 * var(--orange-strip-height));
    }
    page-header-wrapper {
        --header-height:94px; /* - 10px */
        --orange-strip-height:70px; /* + 10px */
    }
    page-top-orange-strip {
        font-weight: normal;
    }
    page-top-orange-strip::after {
        content:'';
        position:absolute;
        left:0%;
        right:0px;
        top:50%;
        border-bottom:1px solid white;
        opacity:0.3;
    }
    .no-rm-on-mobile > .portal-link-parent {
        margin-right:0px;
    }
    .no-wrap-on-mobile {
        white-space: nowrap;
    }
}
.portal-link.divider,
.topnav-link.divider {
    color:white;
}
.portal-link.divider {
    /* display: none; */
    opacity: 0;
}
.portal-link-parent, /* css props but w/o triggering JS handler */
.portal-link,
.social-link {
    margin-right:10px;
    text-decoration: none;
}
@media only screen and (max-width:768px) {
    .not contact-phone .phone-icon, /* leave phone icon visible */
    .portal-link.divider {
        display:none;
    }
    .portal-link {
        margin-right:0px;
        font-weight: normal;
        font-stretch:condensed;
    }
}
.portal-link-parent:link,
.portal-link-parent:visited,
.portal-link-parent:hover,
.portal-link-parent:active,
.portal-link:link,
.portal-link:visited,
.portal-link:hover,
.portal-link:active,
.topnav-link:link,
.topnav-link:visited,
.topnav-link:hover,
.topnav-link:active,
.social-link:link,
.social-link:visited,
.social-link:hover,
.social-link:active {
    color:white;
}
.portal-link:hover:not(.divider) {
    color:var(--maroon-from-logo);
}
.portal-link:hover i {
    color:white;
}
.scrolled .topnav-link:link,
.scrolled .topnav-link:visited,
.scrolled .topnav-link:hover,
.scrolled .topnav-link:active {
    color:black;
}
/* .scrolled */ .topnav-link.divider {
    color:gray; /* always gray */
}
/* logo and nav elements */
page-header  {
    width:100%;
    left:0px;
    top:var(--orange-strip-height);
    height:var(--header-height);
    transition: height var(--header-transition-time) linear, background-color var(--header-transition-time) linear;
    color:white;
}
/* ALWAYS SHOW MAIN NAV WITH WHITE BG FOR INT PAGES */
body:not(.home) page-header,
.scrolled page-header {
    background-color:white;
    box-shadow: 0 1px 0 rgba(0,0,0,.1);
}
@media only screen and (max-width:1020px) {
    .no-scroll page-header{ /* only force white background when nav revealed */
        background-color:white;
    }
}
/* don't shrink header on scroll */
.not .scrolled page-header {
    --header-height:80px;
}
/* only turn nav items black in 'desktop view' */
@media only screen and (min-width:1020.1px) {
    body:not(.home) page-header,
    .scrolled page-header {
        color:black;
    }
}
.header-logo-nav {
    display:flex;
    align-items: center;
    height:100%;
    gap:10px; /* afford THIS much separation between elements */
    /* govern overflow */
    /* overflow-block: hidden; */
}
.header-logo-nav > a {
    display:block;
    height:80%;
    flex-basis: 75%; /* was: 50%; */
    display:flex;
    align-items: center;
}
.header-logo {
    height:auto;
    width: 100%;
}
@media only screen and (min-width:1020.1px) { /* was: 768.1 */
    body.home:not(.no-scroll) page-header-wrapper:not(.scrolled) .header-logo.color-logo {
        display:none;
    }
}
@media only screen and (max-width:1020px) { /* was 768.1 */
    body.home page-header-wrapper .header-logo.white-logo {
        display: none;
    }
    .header-logo-nav {
        gap:20x;
    }
}
body.no-scroll .header-logo.white-logo,
page-header-wrapper.scrolled .header-logo.white-logo,
body:not(.home) page-header-wrapper .header-logo.white-logo {
    display:none;
}
@media only screen and (min-width:1020.1px) {
    .header-logo-nav > a {
        flex-basis: 37%;
    }
    .header-logo-nav.yellow-third::before {
        content: '';
        /* background-color: yellow; */
        position: absolute;
        left: 0;
        top: 0;
        height: 100%;
        width: 33%;
        z-index: -1;
        opacity: 0.33;
    }
}
@media only screen and (max-width:500px) {
    .header-logo-nav > a {
        position:relative;
        clip-path: rect(0% 100% 100% 0%);
        width:95px;
        flex-basis: 90%; /* added - fill the space! */
    }
    .header-logo {
        position:absolute;
    }
}
nav {
    margin-left:auto;
    /* align-self: end; */
    /* flex-basis: 75%; */
    display: flex;
    justify-content: end;
}
nav nav-item {
    cursor:pointer;
    position:relative;
}
@media only screen and (min-width:1020.1px) {
    nav nav-item:hover {
        color:white;
        background-color:var(--orange-header-bg);
    }
}
/* container for divider symbol (was img) */
nav nav-separator {
    display:block;
    /* width:32px; */
    /* width:3%; */
    align-self:center;
    padding:0px 5px;
}
nav nav-separator a:link,
nav nav-separator a:visited,
nav nav-separator a:hover,
nav nav-separator a:active {
    color:wihte;
}

.panel-link {
    cursor: pointer;
}

page-top-orange-strip,
page-header {
    position:fixed; /* allow headers to scroll up the page */
}
page-top-orange-strip {
    z-index: 1;
}
top-nav-wrapper {
    display:inline-block;
    position: relative;
}
.top-nav-sub > .portal-link {
    display:block;
}
.top-nav-sub {
    position:absolute;
    display:none;
    background-color: white;
    border:1px solid lightgray;
    z-index:1;
    min-width: max-content; /* 145px; */
    text-align: start;
    /* padding:2px 0px; */
    left:-15px;
}
.top-nav-sub .portal-link {
    padding:8px 15px;
    margin-right:0px;
}
.top-nav-sub .portal-link:link,
.top-nav-sub .portal-link:visited,
.top-nav-sub .portal-link:hover,
.top-nav-sub .portal-link:active,
.top-nav-sub .portal-link:hover i {
    color:var(--orange-header-bg);
}
.top-nav-sub .portal-link:hover,
.top-nav-sub .portal-link:hover .tier-icon {
    background-color: var(--green-button-icon); /* lightgray; */
    color:white;
}

top-nav-wrapper:hover .top-nav-sub,
top-nav-wrapper.show-subnav .top-nav-sub {
    display: block;
}

@media only screen and (min-width:1020.1px) {
    nav nav-separator a {
        font-size:18px;
        text-decoration: none;
    }
    nav > nav-item > a,
    nav > nav-item > span > a {
        font-size:18px;
        /* padding-bottom:30px; */
        /* padding-top:5px;
        padding-bottom:5px; */
        padding:5px 4px;
        /* transition: padding var(--header-transition-time) linear; */
        white-space: nowrap;
    }
    .scrolled nav > nav-item > a,
    .scrolled nav > nav-item > span > a {
        font-weight:300;
    }
    .not nav > nav-item:not(:last-of-type) a {
        padding-right:15px;
    }
}
/* the line */
.not nav > .has-subnav.show-subnav > span > a::before,
.not nav > .has-subnav:hover > span > a::before {
    content:'';
    position:absolute;
    bottom:5px;
    left:4px;
    width:calc(100% - 8px);
    border-bottom:1px solid white;
}
/* the arrow */
.not nav > .has-subnav.show-subnav > span > a::after,
.not nav > .has-subnav:hover > span > a::after {
    content:'';
    border:6px solid transparent;
    border-top-color:white;
    position:absolute;
    bottom:-6px;
    left:calc(50% - 6px);
}
/* nav > .has-subnav:hover > span > a {
    text-decoration:underline;
} */
nav-item > a {
    position:relative;
}
i.tier-icon {
    margin-right:5px;
}

nav-item.active,
nav-item > span.active {
    color:var(--green-nav-text); /* This green does NOT work, use maroon instead! */
    color:var(--maroon-from-logo);
}

/* any .show-subnav will reveal, but only 1st-level subnav will reveal on hover */
nav-item.has-subnav.show-subnav > subnav-item,
nav > nav-item.has-subnav:hover > subnav-item {
    display:block;
}
subnav-item {
    display:block;
    width:100%;
    min-width:200px;
    z-index:1;
    /* transition: top var(--header-transition-time) linear; */
}
/* --- WIDTH > 800px --- */
@media only screen and (min-width:1020.1px) { /* was 1200.1px, sync with 'nav-burger' below */
    subnav-item {
        width:auto;
        display:none;
        position:absolute;
        /* top:51px; */
        left:50%;
        translate:-50%;
        /* do these ONLY in desktop view */
        background-color:var(--orange-header-bg); /* white; */
        /* border-top:2px solid var(--green-nav-text); */
        box-shadow: 0px 2px 5px rgba(0,0,0,0.1);
        -webkit-box-shadow: 0px 2px 5px rgba(0,0,0,0.1);
    }
    /* render 'inline-vertically' within parent menu */
    subnav-item subnav-item {
        position:relative;
        left:15px;
        translate: 0px;
        margin-right:30px;
        background-color:#f28c26; /* can't use transparency because child item uses same shade as parent */
    }
    subnav-item subnav-item nav-item:hover {
        background-color: inherit;
    }
    nav > nav-item > subnav-item {
        padding:10px 0px;
    }

    .not page-header.scrolled subnav-item {
        top:36px;
    }
    subnav-item nav-item {
        /* padding:10px 20px; */
        display:block;
    }
    /* render a rotating triangle indicator of sub-menu state, right = closed, down = open */
    nav > nav-item > subnav-item nav-item.has-subnav > span > a::after {
        content:'';
        display: inline-block; /* needed to allow transform-rotate to work */
        width:0px;
        height:0px;
        border:8px solid transparent;
        border-left-color: inherit; /* white; */
        position:relative;
        left:10px;
        transform-origin: left center;
        transition: transform 250ms;
        transform:translate(-3px,2px);
    }
    nav > nav-item > subnav-item nav-item.has-subnav.show-subnav > span > a::after {
        transform: translate(0px) rotate(90deg);
        /* border-left-color:var(--maroon-from-logo); */
    }
}
subnav-item nav-item a {
    padding:10px 20px;
    white-space:nowrap;
}
subnav-item nav-item:hover > span > a,
subnav-item nav-item:hover > a {
    color:var(--maroon-from-logo);
}
subnav-item nav-item:hover > a svg {
    color:white;
}
@media only screen and (max-width:1020px) {
    nav-item:hover > span > a,
    nav-item:hover > a {
        color:var(--maroon-from-logo);
    }
}
nav-item a {
    text-decoration: none;
    color:inherit;
    display:inline-block; /* so padding is respected */
}
.phone-icon,
.email-icon {
    color:white; /* override a-tag css from BS */
    position:relative;
    top:-2px; /* fix position since vertical-align:middle doesn't actually center the elements */
}
.email-icon {
    margin-left:10px;
}
/* simulate phone ringing by shimmy of handset icon */
.phone-icon svg {
    animation:ringing 5s linear infinite;
}
@keyframes ringing {
    0%, 20% {
        rotate:0deg;
    }
    2%,10%,18% {
        rotate:-10deg;
    }
    6%,14% {
        rotate:10deg;
    }
}

.nav-sep-icon {
    display: block;
    width:100%;
    height:auto;
}

.nav-burger {
    --burger-border-color:black;
    display: none;
    position: relative;
    margin-left:auto;
    /* suppress button properties */
    border:none;
    background-color: transparent;
    padding:0px; /* cancel inherent padding of button element */
}
/* flip this back if the non-shifted first panel is reverted to shift again
 * first-panel shifting = ... ?
**/
.not body.home page-header-wrapper:not(.scrolled) .nav-burger {
    --burger-border-color:white;
}
.nav-burger svg {
    fill: var(--heading-blue-lines);
    fill-opacity: 0; /* turn off SVG visibility */
    visibility: hidden; /* also hide it this way */
    pointer-events: none; /* no clicks! */
}
.nav-burger i.third-burger-line,
.nav-burger::before,
.nav-burger::after {
	content: '';
	border-top: 3px solid var(--burger-border-color);
	width: calc(min(25px,80%));
	top: 20%;
    left:0px;
	position: absolute;
	/* translate: 0px 10px; */
    transition: 400ms ease;
}
.nav-burger::after {
    top:auto;
	bottom: 20%;
}
.nav-burger i.third-burger-line {
    top: 45%;
}
.nav-burger[aria-expanded="true"]::before {
    rotate:225deg;
    translate:0px 10px;
}
.nav-burger[aria-expanded="true"]::after {
    rotate:-225deg;
    translate:0px -6px; /* this helps both lines intersect evenly */
}
.nav-burger[aria-expanded="true"] i.third-burger-line {
    opacity:0;
}
nav-item.return-to-parent {
    display:none;
}
/* only display this in burger-menu-expanded mode */
.has-subnav-indicator {
    display:none;
    width:21px;
    margin-left:auto;
    float:none;
}

/* --- ACTIVATE NAV-BURGER at/under 1020px, was: 1200px */
@media only screen and (max-width:1020px) { /* sync with 'subnav-item' above */
    .nav-burger,
    nav > nav-item,
    nav-item.return-to-parent {
        display: block;
    }
    nav > svg {
        display:none;
    }
    nav > nav-item, nav-item nav-item {
        position:static;
        width:100%;
    }
    nav {
        display: block;
        position: fixed;
        z-index: 1000;
        left:100%;
        top:var(--total-header-height);
        bottom:0px;
        overflow-y:auto; /* allowuser to reach to content lower in container */
        overflow-x:hidden; /* prevent content to the right from causing scroll */
        width:100%;
        color:black;
        /* padding:15px 0px; */
        /* background-color:var(--orange-header-bg); /* white; */
        background-color:white;
        /* border-top:2px solid var(--heading-blue-lines); */
        /* box-shadow: 0px 2px 5px rgba(0,0,0,0.1);
        -webkit-box-shadow: 0px 2px 5px rgba(0,0,0,0.1); */
    }
    nav subnav-item {
        display:block;
        position:relative;
        width:100%;
        height: 100%;
        top:0px;
        left:0px;
        translate: 0px 0px;
        border-top:none;
        /* padding-left:20px; */
        box-shadow: none;
        -webkit-box-shadow:none;
        background-color: white;
    }
    nav .has-subnav:not(.show-subnav) > subnav-item {
        left:100%;
    }
    nav,
    nav subnav-item {
        transition: left 250ms ease-in-out;
    }

    /* use aria toggle to control nav visibility */
    .nav-burger[aria-expanded="true"] + nav > .has-subnav > subnav-item,
    .nav-burger[aria-expanded="true"] + nav subnav-item subnav-item {
        /* display:block; */
        position:absolute;
        top:0px;
    }
    .nav-burger[aria-expanded="true"] + nav .has-subnav-indicator {
        display:block;
        float:right;
    }
    .nav-burger[aria-expanded="true"] + nav {
        left:0px;
    }
    /* only reveal top-level subnavs, allow user to expand on demand the 2nd-level subnav */
    nav > nav-item > a,
    nav > nav-item > span > a,
    subnav-item nav-item a {
        padding:5px 25px;
        display:block;
    }
    /* hide separator icon, and tier icons */
    i.tier-icon,
    nav nav-separator {
        display: none;
    }
}

.offset-anchor {
    display:inline-block;
    height: 0px;
    position: relative;
    pointer-events: none;
    opacity: 0;
    top:calc(-1 * var(--total-header-height) );
}

/* mid-page links */
a.white-link:link,
a.white-link:visited,
a.white-link:hover,
a.white-link:active {
    color:white;
    /* text-decoration: none; /* allow underline to remain on this anchor */
}
a.green-link:link,
a.green-link:visited,
a.green-link:hover,
a.green-link:active {
    color:var(--green-button-icon);
    text-decoration: none;
}
a.maroon-link.panel-link,
a.maroon-link:link,
a.maroon-link:visited,
a.maroon-link:hover,
a.maroon-link:active {
    color:var(--maroon-from-logo);
    text-decoration: none;
}
a.white-link:hover,
a.maroon-link:hover,
a.green-link:hover {
    color:var(--orange-header-bg);
}

/* SPECIAL CASE OVERRIDE: cancel vertical offset on certain font-icon elements */
.bi.bi-box-arrow-up-right::before,
.bi.bi-box-arrow-up-left::before {
    vertical-align: inherit;
}


/* --- F O O T E R --- */
footer {
    position: relative;
}
.back-to-top {
    padding-top:20px;
    text-align: center;
}
/* --- NEW FOOTER LAYOUT RULES --- */
.link-columns,
.accreditation-imgs,
.footer-groups {
    display:flex;
    justify-content: space-between;
}
.link-columns a, /* linkless anchor */
.link-columns a:link,
.link-columns a:visited,
.link-columns a:hover,
.link-columns a:active {
    color:#444; /* var(--footer-link-text); */
    text-decoration: none;
}

/* provide roll-over effect on the anchor tags */
.link-columns a:hover {
    color:var(--orange-header-bg);
}

footer-group:last-of-type {
    flex-basis: 10%;
    align-items:end;
}
footer-group {
    display:flex;
    flex-direction: column;
    flex-grow:0;
    flex-basis: 33%;
    gap:10px;
}
footer-group .heading {
    font-size: 125%;
}
.footer-phone {
    font-size:calc(1.275 * var(--larger-body-text-size) );
    line-height: 1;
}
.footer-phone .large-text {
    font-size:inherit;
}
.accreditation-imgs img {
    width:100%;
}
.link-columns ul {
    white-space:nowrap;
}
.link-columns ul,
.accreditation-imgs > a {
    flex:1;
    flex-grow: 0;
    flex-basis: 45%;
}
.newsletter-signup-link > a {
    position:absolute;
}
.maroon-text {
    color:var(--maroon-background);
}
maroon-go-button {
    border-radius:50%;
    background-color:var(--maroon-background);
    color:white;
    display:inline-block;
    width:2.5em;
    height:2.5em;
    line-height: 2.6em;
    text-align:center;
    vertical-align: middle;
    font-size:120%;
}
@media only screen and (max-width:1020px) {
    .footer-groups.general-container {
        flex-direction: column;
        gap:20px;
        padding-top:4%;
        padding-bottom:4%;
    }
    .footer-logo {
        display:block;
    }
    .footer-phone {
        font-size: calc(2.1 * var(--larger-body-text-size));
    }
    footer-group:nth-of-type(2),
    .accreditation-imgs,
    .footer-logo {
        max-width: 350px;
        margin:0px auto;
    }
    footer-group:first-of-type {
        text-align:center;
    }
    footer-group:nth-of-type(2) {
        max-width:80%;
        /* background-color:lightblue; */
    }
    footer-group:last-of-type {
        align-items:center;
    }
    .link-columns {
        display:none; /* JUST HIDE THEM ALL TOGETHER! */
    }
    .link-columns ul {
        flex-basis: auto;
    }
    /* this div is PUSHING the parent container out to this width */
    .newsletter-signup-link {
        width:350px;
        text-align: center;
    }
    .newsletter-signup-link > a {
        position:relative;
    }
}
@media only screen and (max-width:768px) {
    footer-group:nth-of-type(2) {
        max-width:none;
        /* background-color:lightgreen; */
    }
    .newsletter-signup-link {
        width:auto;
    }
}
@media only screen and (max-width:576px) {
    .link-columns {
        flex-direction: column;
        text-align: center;
    }
    maroon-go-button {
        display:block;
        margin:5px auto 0px;
    }
}


/* --- OLD FOOTER LAYOUT RULES --- */
footer-columns {
    /* margin-top:30px; */
    padding:2% 0px;
    display:flex;
    gap:20px;
    color:black;
}
footer-column {
    margin-left:auto;
    flex-basis: 15%;
}
footer-column.quarter,
footer-column.three-quarter {
    margin-left:inherit;
    flex-basis:25%;
}
footer-column.three-quarter {
    flex-basis: 75%;
    display: flex;
    align-items: end;
    justify-content: center;
}
.footer-logo {
    width:100%;
}
footer-column a img {
    max-width:100%; /* constrain expansion */
    margin-top:20px;
}
.accreditation-img {
    position:relative;
    /* display:inline-block;
    margin:0px auto; */
}
ul.no-padding {
    padding-left:0px;
    list-style-type: none;
}
footer a:link,
footer a:visited,
footer a:hover,
footer a:active {
    color:black; /* var(--footer-link-text); */
    text-decoration: none;
}
.not .footer-phone {
    font-size:26px;
    line-height: 1;
    /* margin-bottom:20px; */
}
/* header + footer */
.general-container a[href^=tel]:link {
    color:var(--footer-link-text);
    text-decoration: none !important;
}
address-block a[href^=tel]:link {
    color:white;
    text-decoration: none !important;
}
@media only screen and (max-width:800px) {
    footer-columns {
        flex-direction: column;
    }
    footer-columns > footer-column {
        margin-left:0px;
    }
    address-block {
        min-width: 275px;
    }
    footer-column ul a img,
    footer-column .footer-logo {
        max-width:200px;
        margin:0px auto;
        display:block;
    }
}

/* WHY IS THIS IN NAV.CSS ??? MOVE THIS TO A mss_home.css MAYBE ??? */
/* --- Home Page Video Feature --- */
.video-wrapper {
    position: relative;
    overflow: hidden;
    min-height: 55.5vw; /* 56.25vw */
    display: flex;
    flex-direction: column;
    /* background-color: #51bad0; /* sampled tone from video frame */
}
.video-wrapper.static { /* video replaced by static image */
    min-height: auto;
    height: 43.5vw; /* fit image to panel height */
}
.video-wrapper.static img.hero-background {
    display:block;
    width:100%;
    height: auto;
    inset: 0px;
    position: absolute;
    z-index: -1;
}
.video-wrapper::before,
.video-wrapper::after { /* overlay to tone down the brightness of the video */
    content:'';
    position: absolute;
    top:0px;
    left:0px;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.45);
}
.video-wrapper::before {
    background-color:#93a7a5; /* brown tone retrieved from video */
    background-color:black; /* black is better behind static image */
    z-index: -1;
}
#video_bg {
    position: absolute;
    top:0px;
    left:0px;
    bottom:0px;
    right:0px;
    width: 100%;
    height: auto;
    z-index: -1; /* prevent video from obscuring neighbor content */
}

/* same breakpoint shared by hero-crawler in mss_sliders.css*/
@media only screen and (max-width:1150px) {
    .video-wrapper.static {
        min-height: 500px;
    }
    .video-wrapper.static img.hero-background {
        height:100%;
        width:auto;
    }
}

/* special overlay image to serve as an accent in front of the image */
hex-grid {
    position: absolute;
    background-image: url('/assets/images/shapes-overlay.png');
    background-size: cover;
    background-repeat: no-repeat;
    bottom:0px;
    left:40%;
    right:-5%;
    top:25%;
}
.interior-page-background hex-grid {
    left:50%;
    right:-10%;
}
/* was 768.1px */
@media only screen and (min-width:1020.1px) {
    .shift-first-panel-up {
        margin-top:calc(-1 * var(--header-height));
        /* padding-top:var(--menu-height); */
        /* padding-bottom:35px; */
    }
}