/* core.css

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

KEY PAGE WIDTH AS .general-container REACHES MAX WIDTH --main-gutter-max-width, PERCENTAGE FACTOR --main-gutter-width-percent
> > > 1600px (+ scrollbar width: 25px) < < < (this is the point where the main gutter stops increasing even though browser width continues)
*/

*,::before,::after {
    box-sizing: border-box;
}

:root {
    --blue-bg-color:#4B90F5;
    --blue-button-color:#0D4C8F;
    /* body part dimensions */
    --main-gutter-max-width:1280px; /* was 1080px */
    --main-gutter-width-percent:80%;
    --orange-strip-height: 60px; /* was: 38px; */
    --header-height:100px;
    --total-header-height:calc(var(--orange-strip-height)  + var(--header-height));
    --header-transition-time:250ms;
    --img-fade-transition-time:250ms;

    /* fonts */
    --heading-text-size: calc( max(20px, min(3.5vw, 52px) ) );
    /* h2 was 32px @ 1350, 24.5px @ 375 */
    --h2-headline-text-size: calc( max(30px, min(1.65rem + 1vw, 40px) ) );
    --body-text-size: calc( max(16px, min(1.7vw, 26px) ) );
    --larger-body-text-size: calc( max(18px, min(2.5vw, 37px) ) );

    /* font list */
    --principal-fonts: 'Noto Sans', Tahoma, sans-serif;
}

h1,h2,h3,h4,h5,h6 {
    font-family: 'EMprint-Light', sans-serif; /* cursive ? */
}
h2 {
    font-size:var(--h2-headline-text-size);
}
body,
p.body-text {
    font-family:var(--principal-fonts);
    line-height:1.75;
}
p.body-text.larger {
    font-family:'EMprint-Light', sans-serif;
    font-size:calc(0.75 * var(--larger-body-text-size));
}

.show-outlines .outline-elements,
.show-outlines .outline-elements * {
    outline:1px solid rgba(255,0,0,0.25);
}
.purple-dashed-outline {
    outline:2px dashed purple;
}

/* override auto-linked phone number style color */
a[href^=tel]:link,
contact-phone a:link {
    color:inherit !important;
}

#scroll_position_monitor {
    position:fixed;
    left:0px;
    top:50%;
    z-index:1000001;
    background-color:white;
    color:black;
    padding:5px;
    left:5px;
}

body .hide {
    display:none !important;
}
/* disable text selection on specific elements */
.disable-text-select {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
/* also add attribute to element: unselectable="yes" */

form.hide-appearance input { /* this should have qualification, not be a blanket rule */
    -webkit-appearance: none;
    appearance: none;
}
embed, iframe, object, video {
	max-width: 100%;
}
/* for some unknown reason, text inputs must hide the placeholder when received focus */
input[type="search"]:focus::placeholder,
input[type="text"]:focus::placeholder,
textarea:focus::placeholder {
    opacity:0;
}

#go_to_top {
	padding: 4px 12px;
	background-color: #555;
	border: 0px;
	border-radius: 4px;
	position: fixed;
	bottom: 50px;
	left: 50%;
    transform:translateX(-50%);
	z-index: 200;
    display:none;
}
#go_to_top.show {
    display: block;
}

.black-bg {
    background-color: black;
}

.blue-bg {
    background-color:var(--blue-bg-color);
}
.dark-blue-bg {
    background-color:var(--blue-button-color);
}
.blue-text {
    color:var(--blue-button-color);
}
.white-text {
    color:white;
}
.bold {
    font-weight: bold;
}

.general-container {
    --min-padding:20px;
    position:relative;
    margin:0px auto;
}
.general-container:not(.full-width) {
    width:var(--main-gutter-width-percent);
    max-width:var(--main-gutter-max-width);
}
.general-container.wider {
    width: auto;
    max-width: 1200px;
}
/* vertical spacing variants */
.general-container:not(.no-y-margin) {
    margin-top:auto;
    margin-bottom:auto;
}
.general-container:not(.no-padding) {
    padding-top:max(var(--min-padding),2%);
    padding-bottom:max(var(--min-padding),2%);
}
.general-container.more-padding {
    padding-top:max(var(--min-padding),4%);
    padding-bottom:max(var(--min-padding),4%);
}
.general-container.more-padding-3percent {
    padding-top: max(var(--min-padding),3%);
    padding-bottom: max(var(--min-padding),3%);
}
.general-container.form-w360 {
    max-width:360px;
}
/* from ccf.css */ 
.general-container.with-padding {
    padding:20px 0px;
}

/* --- GUIDES --- */

/* utility classes to clue when main-gutter width maxes out */
first-page-element::before,
first-page-element::after {
    content:'';
    position:fixed;
    left:calc(50% - 640px);
    right:calc(50% - 640px);
    top:0px;
    height:100%;
    border-left:1px dashed purple;
    z-index: 1000;
    pointer-events: none;
    width: 1px;
}
first-page-element::before { right:auto; }
first-page-element::after { left:auto; }
body:not(.show-content-gutter-guides) first-page-element::before,
body:not(.show-content-gutter-guides) first-page-element::after {
    display:none;
}
.show-guides::before {
    content:'';
    z-index:9999;
    position: fixed;
    top:0px;
    border-left:1px dashed red;
}

/* pair with .general-container for consistent flow-placement */
.dev-note {
    border:1px solid red;
    background-color:yellow;
    padding:15px;
}

/* custom tags that should render as block elements */
left-column, right-column, contact-row, hero-crawler,
blue-panel, contact-panel, mission-panel, problem-solution-panel, opportunity-panel, announcement-panel,
page-header-wrapper,page-top-orange-strip,page-header,
address-row,address-block,location-name,address-detail,map-link,
footer-columns, column-head, column-body {
    display:block;
}

/* --- VISIBILITY CLASSES --- */
@media only screen and (min-width:1020.1px) {
    body .hide-on-desktop {
        display:none !important;
    }
}
@media only screen and (min-width:768.1px) and (max-width:1020px) {
    body .hide-on-tablet {
        display:none !important;
    }
}
@media only screen and (max-width:768px) {
    body .hide-on-mobile {
        display:none !important;
    }
}

/* PAGE FOOTER ELEMENTS */
@media only screen and (max-width:768px) {
    .mobile-only-logo img {
        display: block;
        width:175px;
        margin:0px auto;
    }
}

/* PAGE HEADER ELEMENTS */
.header-contact-button:hover,
.body-contact-button:hover,
.meet-our-team-button:hover {
    background-color: var(--blue-bg-color);
}
.header-contact-button,
.body-contact-button,
.meet-our-team-button,
.submit_btn {
    color:white;
    background-color: var(--blue-button-color);
    border:0px;
    padding: 10px;
    border-radius:5px;
    white-space: nowrap;
}
.submit_btn:disabled {
    pointer-events: none;
    opacity:0.5;
}
.header-contact-button {
    margin-left:25px;
}
form:not(.successful) + .success-message  {
    display: none;
}
.contact-us form.successful {
    display:none;
}
logo-wrapper {
    flex-grow:0;
    flex-basis:40%;
    /* height:100%; */
    /* width:50%; */
    /* display:inline-block; */
}
logo-wrapper a {
    display:inline-block;
    width:100%;
    height:100%;
}
logo-wrapper img {
    width:100%;
    height:auto;
}

.share-button-wrapper {
    cursor: pointer;
    display: flex;
    align-items: center;
    height:var(--header-height);
    position:relative;
}
.share-button-wrapper:hover .underline-on-hover {
    text-decoration: underline;
}
share-logo-and-caption {
    text-align: center;
}
.share-button-dropdown {
    position:absolute;
    background-color:white;
    border:1px solid darkgray;
    padding:20px;
    cursor:default;
    top:calc( var(--header-height) - 1px);
    left:50%;
    translate:-50%;
}
@media screen and (max-width:768px) {
    .share-button-dropdown {
        padding:20px 5px;
    }
}
.share-button-dropdown::before,
.share-button-dropdown:after {
	content: '';
	top: 0px;
	left: 50%;
	position: absolute;
	border-width: 14px;
	border-style: solid;
	translate: -50% -100%;
	border-color: transparent;
	border-bottom-color: darkgray;
}
.share-button-dropdown:after {
    border-width:12px;
    border-bottom-color: white;
}
.share-button-dropdown:not(.show) {
    display:none;
}
@media screen and (min-width:768.1px) {
    /* only use this to hide if the JS class toggle is not working, '.not' prefix used to disable this CSS rule */
    .not .share-button-wrapper:not(:hover) .share-button-dropdown {
        display:none;
    }
    share-logo-and-caption {
        display:flex;
    }
}

.share-logo {
    width:auto;
    height:30px;
    margin-right:5px;
}
img.curvey-right-arrow {
    display:inline-block;
    height:15px;
    width:auto;
}
.close-dropdown:hover {
    background-color:var(--blue-bg-color);
}
.close-dropdown {
    cursor: pointer;
    font-size: 25px;
    width:25px;
    height:25px;
    position:absolute;
    right:20px;
    line-height: 1;
    border-radius: 50%;
}
.social-share-links {
    display:flex;
    gap:10px;
}
.social-share-links .link-circle {
    --circle-size:50px;
    cursor:pointer;
    border-radius: 50%;
    border:1px solid black;
    height:var(--circle-size);
    width:var(--circle-size);
    display: flex;
    justify-content: center;
    align-items: center;
}
.link-circle:not(:hover) {
    opacity:0.5;
}
.link-circle .bi {
    font-size:25px;
}
.for-link i.bi-check-lg {
    color:green;
}
.for-link:not(.copied) i.bi-check-lg,
.for-link.copied i.bi-link {
    display: none;
}
.social-share-links a:link,
.social-share-links a:visited,
.social-share-links a:hover,
.social-share-links a:active {
    color:black;
}
@media only screen and (max-width:960px), only screen and (max-height:960px) {
    .social-share-links .for-link:not(.tapped) {
        transition:background-color 0.5s linear;
        background-color:transparent;
    }
    .social-share-links .for-link.tapped {
        transition:background-color 10ms linear;
        background-color:lightgreen;
    }
    .social-share-links .for-link.clipboard-error {
        transition:background-color 10ms linear;
        background-color:red;
    }
}

/* --- H E A D E R --- */
page-header-wrapper { /* this needs to be sticky */
    position: relative;
    z-index:1000;
    /* height:calc(var(--orange-strip-height) + var(--header-height)); */
    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-header {
    position:fixed;
    width:100%;
    left:0px;
    height:var(--header-height);
    background-color: white;
    border-bottom:1px solid darkgray;
}
.header-logo-nav {
    display:flex;
    align-items:center;
    height:100%;
}
share-and-contact-buttons {
    flex:1;
    display:flex;
    align-items: center;
    justify-content: end;
}

.burger-and-header-logo {
    position: relative;
    display:flex;
}
.mobile-pump-img {
    display:none;
}
/* NAV - GENERAL */
.nav-burger {
    --burger-border-color:black;
    display: none;
    position:relative;
    width:36px;
    height:36px;
    /* suppress button properties */
    border:none;
    background-color: transparent;
    padding:0px; /* cancel inherent padding of button element */
}
.mobile-only-nav {
    display:none;
    flex-direction: column;
    position:absolute;
    top:100%;
    left:0px;
    z-index:1;
    background-color: white;
    width:100%;
    border:1px solid lightgray;
}
nav-item {
    padding:10px;
    cursor: pointer;
}
nav-item:not(:last-child) {
    border-bottom:1px solid lightgray;
}
@media screen and (max-width:768px) {

    .nav-burger[aria-expanded="true"] ~ nav.mobile-only-nav {
        display:flex;
    }

    body.home .mobile-pump-img {
        display:block;
        width:100%;
    }
    .burger-and-header-logo {
        justify-content: center;
        padding:15px 30px 15px;
    }
    page-header {
        --main-gutter-width-percent:100%;
        position:relative;
        border-bottom:none;
    }
    .header-logo-nav {
        display: block;
    }
    /* .share-button-wrapper, */
    /* .share-logo, */
    /* .underline-on-hover, */
    .title-and-close-btn,
    .header-contact-button,
    .share-button-dropdown::before,
    .share-button-dropdown::after {
        display:none; /* hide till later */
    }
    .share-button-wrapper .share-button-dropdown {
        display:block;
        position: relative;
        translate:initial;
        /* padding:0px 20px; */
        border:none;
    }
    .share-button-wrapper {
        border-top:1px solid darkgray;
        border-bottom:1px solid darkgray;
    }
    body.home .share-button-wrapper {
        border-bottom-width:0px;
    }
    .share-button-dropdown {
        left:auto;
        width: 100%;
    }
    .share-logo,.underline-on-hover {
        pointer-events: none;
    }
    share-and-contact-buttons {
        /* display:block; */
        justify-content: center;
        overflow-x: hidden;
        width: 100%;
    }

    logo-wrapper {
        margin-right:10px;
        flex-basis:75%;
        /* outline:1px solid lightpink; /* to reveal container */
    }
    .nav-burger {
        grid-area: burger;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    :root {
        --header-height:auto;
    }
    .nav-burger svg {
        fill:var(--blue-text);
        display:none;
        /* 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 -8px; /* this helps both lines intersect evenly */
    }
    .nav-burger[aria-expanded="true"] i.third-burger-line {
        opacity:0;
    }
    .nav-burger[aria-expanded="true"] + nav subnav-item {
        display:block;
    }
    .nav-burger[aria-expanded="true"] + nav {
        left:0px;
        width:100%;
    }
}

/* ===== HOME PAGE ELEMENTS ===== */
blue-panel {
    color:white;
    position:relative;
}
blue-panel .pump-img {
    position:absolute;
    inset:0px;
    left:50%;
    background-image:url('/assets/images/h2ff_land_1920px.jpg');
    background-repeat:no-repeat;
    background-size:cover;
    background-position: center right;
    clip-path: polygon(50% 0%, 100% 0%, 100% 100%, 0% 100%);
}
blue-panel .mobile-pump-img {
    display:none;
}
@media screen and (min-width:768.1px) {
    blue-panel p.body-text {
        width:50%;
    }
}
@media screen and (max-width:768px) {
    blue-panel .pump-img {
        display: none;
    }
    blue-panel .mobile-pump-img {
        display:block;
        width:100%;
    }
    blue-panel .general-container {
        text-align:center;
    }
}

.general-container .two-col,
.two-col.general-container {
    display:flex;
}
.two-col left-column,
.two-col right-column {
    flex-basis:50%;
}
@media only screen and (min-width:768.1px) {
    .two-col right-column.with-border {
        border-left:1px solid darkgray;
    }
}
@media only screen and (max-width:768px) {
    problem-solution-panel .two-col.general-container {
        display:block;
        text-align: center;
    }
    .two-col right-column.with-border {
        border-top:1px solid darkgray;
        border-left:none;
    }
}

/* === FANCY GLYPHS / WIDGETS === */
.arrows-container {
	position: absolute;
	bottom: -27px;
	left: 25%;
	translate: -50%;
	height: 30px;
	width: 50px;
	/* outline: 1px dotted orange; */
}
.arrows-container img {
    width:100%;
    height: auto;
}
.arrows-container.white-icon,
.arrows-container.black-icon,
.arrows-container.dark-blue-icon,
.arrows-container.gray-icon {
    left:50%;
}
announcement-panel {
    position:relative;
}

announcement-panel img-column img {
    height: auto;
    width:100%;
    max-width:250px;
}
@media only screen and (max-width:768px) {
    announcement-panel .general-container {
        text-align: center;
    }
}

.v-arrow-with-tails,
.h-arrow-with-tails {
	--border-width: 10px 15px;
	--border-width2: 9px 14px;
	--tail-top: -10px;
	--tail-top2: -10px;
    --tail-top-nudge: 1px;
    --left-shift:-0.8em;
    --left-shift2:-0.4em;
    --tail-left-nudge:0px;
	display: inline-block;
	line-height: 1;
	border-color: transparent;
	border-width: var(--border-width);
	/* width: 10px; */
	height: 1em;
	border-style: solid;
	vertical-align: text-top;
	position: relative;
	margin-left: 0.5em;
}
.h-arrow-with-tails {
	border-left-color: var(--blue-button-color);
    --left-shift:-0.8em;
    --left-shift2:-0.4em;
}
.v-arrow-with-tails {
	border-top-color: var(--blue-button-color);
    --border-width:15px 10px;
    --border-width2:14px 9px;
    --left-shift:-0.8em;
    --left-shift2:-0.8em;
    --tail-top:-10px;
    --tail-top2:-13px;
    --tail-left-nudge:2px;
}
arrow-tail:before,
arrow-tail:after {
    content: '';
    position: absolute;
    border-color: transparent;
    border-style: solid;
    border-width: var(--border-width);
    top: var(--tail-top);
}

arrow-tail:after {
    border-width:var(--border-width2);
    top:calc(var(--tail-top) + var(--tail-top-nudge));
    left:3px;
}
.h-arrow-with-tails arrow-tail:before {
    border-left-color: var(--blue-button-color);
}
.h-arrow-with-tails arrow-tail:after {
    border-left-color:white;
}
.v-arrow-with-tails arrow-tail:before {
    border-top-color: var(--blue-button-color);
}
.v-arrow-with-tails arrow-tail:after {
    border-top-color:white;
    left:5px;
}
arrow-tail {
    position: absolute;
    height: 1em;
    width: 0.5em;
    z-index: -1;
    left: var(--left-shift);
    line-height: 1;
}
arrow-tail + arrow-tail {
    z-index: -2;
    left: var(--left-shift2);
}
.v-arrow-with-tails arrow-tail + arrow-tail:before,
.v-arrow-with-tails arrow-tail + arrow-tail:after {
    top:var(--tail-top2);
}

/* === PROBLEM/SOLUTION PANEL === */
.not problem-solution-panel p { /* temporary full-width for flow observation */
    text-align:justify;
}

problem-solution-panel left-column,
problem-solution-panel right-column {
    padding-top:24px;
    padding-bottom:24px;
}
@media only screen and (max-width:768px) {
    problem-solution-panel left-column p,
    problem-solution-panel right-column p {
        margin-bottom:0px;
    }
}
@media only screen and (min-width:768.1px) {
    problem-solution-panel left-column,
    problem-solution-panel right-column {
        padding:24px;
    }
}

problem-solution-panel left-column {
    padding-left:0px;
}
problem-solution-panel right-column {
    padding-right:0px;
}
problem-solution-panel {
    background-color: #E5E5E5;
}

/* === OPPORTUNITY PANEL === */
opportunity-panel img-column img {
    width:100%;
    height:auto;
    max-width:264px;
}
opportunity-panel text-column {
    /* display:flex;
    flex-direction: column; */
    /* justify-content: center; */
    padding-top: min(5%,60px);
}
.not opportunity-panel text-column p {
    /* width:75%; */
    text-align:justify;
}
@media only screen and (max-width:768px) {
    opportunity-panel .general-container {
        flex-direction: column;
    }
    opportunity-panel img-column {
        display:none;
    }
    opportunity-panel text-column {
        padding-top:0px;
        text-align: center;
    }
}
@media only screen and (min-width:768.1px) {
    opportunity-panel .general-container {
        gap:15px;
    }
    opportunity-panel img-column,
    opportunity-panel text-column {
        flex:1;
    }
    opportunity-panel img-column {
        flex-basis:30%;
        flex-grow:0;
        flex-shrink:1;
        text-align: center;
    }
}
@media only screen and (min-width:1200.1px) {
    opportunity-panel text-column p {
        width:75%;
    }
}

/* === CONTACT PANEL === */
contact-panel {
    background-image:url('/assets/images/ecf_bg.jpg');
    background-size:100% 100%; /* force image to take shape of container */
    background-repeat: no-repeat;
}
contact-panel .general-container .two-col {
    display:flex;
}
@media only screen and (min-width:1200px) {
    contact-panel .general-container .two-col {
        width:75%;
    }
}
contact-panel .two-col left-column {
    flex-basis: auto;
    flex-grow:1;
}
contact-panel .two-col right-column {
    flex-basis: auto;

    display:flex;
    align-items: center;

    margin-left:25px;
}
contact-panel left-column {
    padding-top:20px;
}


/* === MISSION PANEL === */
mission-panel {
    display:flex;
    position:relative;
}
mission-img-wrapper {
    width:30%;
    position: absolute;
    left:0px;
    top:0px;
    height: 100%;
    overflow: hidden;
}
mission-img-wrapper::after {
    content:'';
    position: absolute;
    inset:0px;
    background-color:var(--blue-bg-color);
    opacity:0.6;
}
.feature-image {
    width:100%;
    height:auto;
}

mission-panel logo-column {
    display: flex;
    align-items: center;
    flex-shrink: 1;
    flex-grow:0;
}
mission-panel body-column {
    flex-grow: 1;
    /* flex-basis:75%; */
    /* padding:15px 0px 15px 15px; */
}
@media only screen and (max-width:768px) {
    mission-panel .general-container {
        flex-direction: column;
    }
    mission-panel logo-column {
        justify-content: center;
        margin-bottom:25px;
        display: none;
    }
    mission-panel body-column {
        text-align: center;
    }
}

mission-panel logo-column img {
	width: min(85%,250px);
    height:auto;
}

.mission-panel-content {
    display:flex;
}

.meet-our-team-button {
    background-color:transparent;
    color:var(--blue-button-color);
    text-decoration: underline;
    padding:0px;
}
.meet-our-team-button:hover {
    text-decoration: underline;
    background-color: transparent;
    color:var(--blue-bg-color);
}
/* .meet-our-team-button .curvey-right-arrow {
    filter:invert();
} */

div > .grecaptcha-badge, /* new enterprise version */
.g-recaptcha > div { /* old g-recaptcha */
    display:none; /* hide bottom corner 'bug' icon */
    /* use stronger means to conceal */
    pointer-events: none;
    opacity: 0;
}