/* clcf.css */

:root {
    --blue-header-bg:#133691;
    --blue-footer-bg: #2F5FAB;
    --blue-text: #2F5FAB;
    --green-nav-text:#449900;
    /* --green-nav-hover: (opacity:0.7) */
    --heading-gray-text:#666666;
    --heading-blue-text:#2b1aad;
    --heading-blue-lines:#2ea3f2;
    --footer-link-text:#9cbf4b;
    
    /* body part dimensions */
    --blue-strip-height:36px;
    --header-height:80px;
    --total-header-height:calc(var(--blue-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) ) );
    --body-text-size: calc( max(16px, min(1.7vw, 26px) ) );
    --larger-body-text-size: calc( max(18px, min(2.5vw, 37px) ) );
}

body.coming-soon {
    --heading-text-size: calc( max(20px, min(4vw, 52px) ) );
}

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

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

html,body {
    height:100%;
}
body {
    font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

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" */

/* custom tags which need to render as block elements */
page-header-wrapper, page-header, page-top-blue-strip,
page-footer-wrapper, page-footer,
big-text-block, clean-fuels-panel,
main-message-panel, about-us-panel,
mission-panel, philosophy-panel, products-panel, projects-panel,
panel-title, service-panel-item,
about-heading, philosophy-categories {
    display:block;
}

/* === LANDING PAGE === */
/* offers choice of region to route user  */
html.landing,
body.landing {
    margin:0px;
    padding:0px;
    height:100%;
}

body.landing {
    background-color: #008ed3;
    background-image:linear-gradient( #008ed3, #11499e );
    background-repeat: no-repeat;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
canada-background,
landing-box-wrapper,
region-choices {
    display:flex;
    justify-content: center;
}
canada-background {
    height:100%;
    flex-direction: column;
    background-image:url('/assets/images/hm_mapBG.png');
    background-repeat: no-repeat;
    background-size:contain;
    background-position: center;
}
landing-box-wrapper {
    flex-direction: column;
    color:white;
    align-items: center;
}
landing-box-wrapper h1 {
    font-size:var(--heading-text-size);
    text-align: center;
    line-height: 1;
    margin-bottom:0px;
}
region-choices {
    width:50%;
    gap:4vw;
    padding:3% 0px;
}
@media only screen and (max-width:600px) {
    region-choices {
        flex-direction:column;
        padding:10% 0px;
    }
}

landing-footer {
    line-height: 1;
    font-size:12px;
    text-align: center;
}

west-region,
east-region {
    flex:1;
    display:block;
    position:relative;
    background-color: #078707;
    border:3px outset #126612;
    border-bottom-style: inset;
    border-right-style:inset;
    padding:2% 0px;
}
.region-img {
    width:100%;
    height:auto;
}
.has-hover-img {
    transition:transform 250ms linear;
}
.has-hover-img > a {
    display:block;
    position:relative; /* give hover-image container to size within */
}
.hover-img {
    position: absolute;
    top:0;
    left:0;
    width:100%;
    height: 100%;
    opacity: 0;
    transition:opacity 250ms linear;
}
.has-hover-img:hover .hover-img {
    opacity:1;
}
.has-hover-img:hover {
    transform: scale(110%);
}
.general-container {
    position:relative;
    width:80%;
    max-width:1080px;
    margin:auto;
    transition: width 150ms;
}
@media only screen and (max-width:950px) {
    .general-container {
        width:95%;
    }
}

/* --- Page Header --- */
page-header-wrapper {
    position: relative;
    z-index:1000;
    height:calc(var(--blue-strip-height) + var(--header-height));
}
page-header-wrapper + first-page-element {
    display:block;
    position: relative;
}
/* logo and nav elements */
page-header  {
    width:100%;
    left:0px;
    top:var(--blue-strip-height);
    height:var(--header-height);
    background-color:white;
    box-shadow: 0 1px 0 rgba(0,0,0,.1);
    transition: height var(--header-transition-time) linear;
}
page-top-blue-strip {
    background-color:var(--blue-text);
}
page-top-blue-strip .general-container {
    height:var(--blue-strip-height);
    display:flex;
    gap:10px;
    align-items: center;
    justify-content: end;
    color:white;
}
.white-link:link,
.white-link.visited,
.white-link.hover,
.white-link.active {
    color:white;
}
.blue-strip-divider {
    border-left:2px solid white;
    height:1em;
}
.arrow-glyph {
    display:inline-block;
    position: relative;
    top:-9px;
    left:2px;
    line-height: 1;
}

header-logo img {
    display: block;
    width:100%;
}

panel-title {
    font-size:var(--heading-text-size);
    line-height: 1;
    margin-bottom: 0.5em;
    color:var(--blue-text);
    font-weight: bold;
}

.body-text {
    font-size:var(--body-text-size);
    line-height: 1.2;
}
.blue-text {
    color:var(--blue-text);
}
.large-text {
    font-size:min(50px,max(3.3vw,22px)); /* 24px causes text-wrap at < 376px */
    line-height:1.25;
    font-weight:bold;
}

.med-large-text {
    font-size:min(42px,max(2.8vw,20px));
    line-height:1.25;
    font-weight: bold;
}
.medium-text {
    font-size: 17px;
    line-height: 1.75;
}

.panel-link {
    cursor: pointer;
}
.learn-more-button {
    margin-top:20px;
}
.about-button button {
    position: relative;
    background-color: var(--blue-text);
    color:white;
    border: none;
    font-size:150%;
    padding:2px 10px;
}

.blue-button,
.learn-more-button,
.contact-us-button {
    color:white;
    background-color: var(--blue-text);
    border:none;
    /* font-size: 20px; */
    padding:4px 8px;
}

.about-button button:hover,
.blue-button:hover,
.learn-more-button:hover,
.contact-us-button:hover {
    color:var(--blue-text);
    background-color: white;
    outline:1px solid var(--blue-text);
}

/* NAV - GENERAL */
.nav-burger {
    display: none;
    border:none;
    background-color: transparent;
}
nav-wrapper {
    --nw-font-size:26px;
    --nav-term-arrow-color:rgb(49, 48, 48);
    --nav-term-hover-color:var(--blue-text);
    display:flex;
    justify-content: end;
    align-items: center;
    gap:30px;
    font-size:var(--nw-font-size);
}

nav-wrapper nav {
    display:flex;
    gap:30px;
}

nav-item {
    cursor: pointer;
    padding:40px 0px;
    color:var(--blue-text);
}
nav-term {
    position:relative;
    display:block;
    border-bottom:2px solid transparent;
}
/* show decoration on nav-term for the page in view */
nav-item:hover nav-term,
body.home .nav-to-home,
body.about .nav-to-about,
body.projects .nav-to-projects {
    border-bottom-color: var(--blue-text);
}
.contact-us-nav {
    display:none;
}
@media screen and (max-width:1050px) {
    .nav-burger {
        grid-area: burger;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    :root {
        --header-height:80px;
    }
    nav-wrapper {
        flex-direction: column;
        align-items: end;
        position:relative;
        gap:5px;
        min-width: 150px;
    }
    nav-wrapper nav {
        flex-direction: column;
        gap:0px;
        position: absolute;
        top:100%;
        background-color: white;
    }
    .nav-burger[aria-expanded="false"] + nav {
        display: none;
    }
    .nav-burger svg {
        fill:var(--blue-text);
    }
    nav-item {
        padding:5px 10px;
    }
    .contact-us-nav {
        display:inline;
    }
    .contact-us-button {
        display:none;
    }
}

huge-headline {
    font-size:min(6vw,72px);
    display: block;
    position: relative;
    color:var(--blue-text);
    text-align: center;
    font-weight: bold;
    line-height: 1;
    margin-bottom:0.05em;
}

/* --- Page Footer --- */
page-footer-wrapper {
    display: block;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
page-footer {
    min-height: max(23vw,250px); /* 26.7vw; */
    display:flex;
    flex-direction: column;
    justify-content: end;
    padding-bottom:20px;
}
page-footer-wrapper.small-footer page-footer {
    color:white;
    background-color:var(--blue-footer-bg);
    min-height: 0px;
    padding:20px 0px;
    justify-content: center;
    text-align: center;
}
page-footer .logo-and-links {
    display: flex;
    align-items:center;
}
page-footer img, .last-footer-div {
    width:calc(max(230px,15vw));
}
page-footer img.linked-in {
    width:48px;
}
page-footer .links {
    /* flex-grow:1; */
    /* margin-left:40px; */
    margin:0px auto;
    display:flex;
    flex-wrap:wrap;
}
page-footer .links a {
    padding:5px 10px;
    min-width:120px; /* maintain width so elements wrap within flex container */
}

page-top-blue-strip a:link, page-top-blue-strip a:visited, page-top-blue-strip a:hover, page-top-blue-strip a:active,
page-footer a:link, page-footer a:visited, page-footer a:hover, page-footer a:active {
    text-decoration: none;
    color:inherit;
}
.copyright {
    margin-top:20px;
    /* font-size:60%; /* make text to have same width as logo */
}

@media only screen and (max-width:1110px) {
    .last-footer-div {
        display:none;
    }
}
@media only screen and (max-width:950px) {
    page-footer .logo-and-links {
        flex-wrap:wrap;
        /* justify-content: center; /* center logos */
        gap:20px; /* space to breathe */
    }
    page-footer .links {
        order:3;
        flex-basis: 100%;
        text-align: center;
    }
    page-footer .links a:first-of-type {
        padding-left:0px;
    }
}
@media only screen and (max-width:768px) {
    page-header .header-panel {
        grid-template-columns: 25% auto;
    }
    .last-footer-div,
    page-footer .links a {
        display:block;
        /* padding:5px 0px; */
    }
}
@media only screen and (max-width:650px) {
    .last-footer-div {
        display:none;
    }
    page-footer .logo-and-links {
        row-gap:10px;
    }
}
@media only screen and (max-width:560px) {
    /* move nav under logo */
    page-footer .logo-and-links > a:last-of-type {
        margin-left:auto;
    }
    page-footer .links {
        margin-top: 10px;
        margin-left:auto;
        justify-content: center;
    }
    page-footer .links a:not(:last-child) {
        border-right:2px solid black;
    }
    page-footer .links a {
        min-width: auto;
        font-size: 2.9vw;
        padding-top:0px;
        padding-bottom:0px;
    }
    .copyright {
        margin-top:10px;
        text-align: center;
    }
    page-footer {
        min-height:max(23vw, 300px);
    }
}
@media only screen and (max-width:400px) {
    /* page-footer {
        height:400px;
    } */
    page-footer .links {
        justify-content:center;
    }
}

#go_to_top {
	padding: 4px 12px;
	background-color: #555;
	border: 0px;
	border-radius: 4px;
	position: fixed;
	bottom: 50px;
	right: 24px;
	z-index: 200;
    display:none;
}
#go_to_top.show {
    display: block;
}

cookie-approval.show + #go_to_top.show {
    display:none;
}
cookie-approval {
    z-index:10;
    position:fixed;
    bottom:0px;
    background-color:#F0F0F0;
    padding:20px;
    display:flex;
    gap:25px;
    /* border:2px solid gray; */
    overflow: hidden;
    max-height:250px;
    /* iOS Safari evidently needs affected properties listed for transition to work */
    transition: max-height 1s linear, padding 1s linear, border 1s linear;
}
cookie-approval:not(.show) {
    max-height:0px;
    padding:0px 20px;
    border-top-width: 0px;
    border-bottom-width: 0px;
}
cookie-approval .cookie-prompt {
    flex-grow:1;
}
cookie-approval .buttons {
    display:flex;
    justify-content: center;
    align-items: center;
    gap:15px;
}
@media only screen and (max-width:650px) {
    cookie-approval {
        flex-direction: column;
        gap:10px;
    }
}
cookie-approval .buttons button {
    padding:5px 10px;
    border:1px solid gray;
    border-radius: 5px;
}

cookie-approval {
    display:none !important;
}

/* --- PANEL : CONTACT US --- */
.contact-us-panel {
    background-repeat: no-repeat;
    /* background-color:var(--blue-text); */
    background-position: center;
    /* background-image:url('/assets/images/contact_bg.jpg?v=1'); */
    background-size: cover;
    position: relative;
    color:black;
}
.contact-us-panel.general-container {
    padding-top:10px;
    display:grid;
    grid-template-columns: 55% 45%;
    /* easier to adjust this value for multiple places via custom property */
    --left-column-padding:60px;
}
.contact-us-panel a:link,
.contact-us-panel a:visited,
.contact-us-panel a:hover,
.contact-us-panel a:active {
    color:inherit;
}
/* this tag is shared between contact panel and projects panel categories */
left-column {
    padding-right: var(--left-column-padding);
    position: relative;
    /* outline:1px dotted green; */
}
.not .contact-us-panel left-column {
    display:flex;
    align-items: center;
}
right-column { /* used for both-partners general-container */
    padding-top: max(5px,1.25vw);
}
.contact-us-panel right-column {
    padding-top:0.5vw; /* 0px; */
}
.skinny-text {
    font-size:max(2.2vw,15px);
    line-height: 1.25;
}
.tiny-text {
    font-size:max(14px,min(1.5vw,21px));
    line-height:1;
}
.vertical-center-line {
    position:absolute;
    top:46%;
    right:0px;
    width:100px;
    /* outline:1px solid orange; */
}
@media only screen and (min-width:950.1px) {
    .skinny-text {
        font-size:max(19px,min(2vw,28px))
    }
    .contact-us-panel.general-container {
        --left-column-padding:50px;
    }
    .not.vertical-center-line {
        top:25%;
    }
}
@media only screen and (min-width:650.1px) {
    .animated-arrow + .skinny-text {
        margin-top:-5%;
    }
}
@media only screen and (max-width:650px) {
    .skinny-text {
        font-size:4vw;
    }
    .tiny-text {
        font-size:16px;
    }
}
.animated-arrow {
    position: relative;
    /* display: flex; */
    gap:15px;
}
.thin-arrow {
    display:block;
    /* height:max(4.25vw,50px); */
    margin-right:-30px;
    /* margin-top:-15px; */
    transition: clip-path 1s linear;
    clip-path:polygon(0% 0%, 0% 100%, 0% 100%, 0% 0%);
	/* position: absolute;
	right: 30px;
	top: 50%;
	translate: 0px -50%; */
	/* height: 3.3vw; */
	flex-grow:1;
    /* outline:1px solid pink; */
}
.thin-arrow svg {
    stroke:var(--blue-text);
}
.thin-arrow.show {
    clip-path:polygon(0% 0%, 0% 100%, 100% 100%, 100% 0%);
}
.contact-form-arrow.not {
    stroke-dasharray: 60;
    stroke-dashoffset: 0;
}

/* FORM - HOLLOW-INPUTS STYLE */
form.hollow-inputs-form {
    display:flex;
    flex-direction: column;
    gap:5px;
    position: relative;
    /* outline:1px dotted purple; */
}
form.hollow-inputs-form > div:not(.text-area-zone,.reqd-input) {
    border-bottom: 1px solid black;
    margin-bottom:25px;
}
.reqd-input {
    font-size: 90%;
    font-style: italic;
}
form.hollow-inputs-form input {
    border:none;
    outline:0px;
    width: 100%;
    display:block;
    background-color: transparent;
    color:black;
}
form.hollow-inputs-form textarea::placeholder,
form.hollow-inputs-form input::placeholder {
    opacity:1; /* not effective on webkit */
    /* color:white; /* use this for webkit */
}
form.hollow-inputs-form textarea:focus::placeholder,
form.hollow-inputs-form input:focus::placeholder {
    opacity: 0;
}

/* direction given to not put red outlines on inputs with errors */
form.hollow-inputs-form .bad_value.not,
form.hollow-inputs-form .error.not {
    outline:1px solid red;
}
form input,
form textarea {
    display: block;
    width:100%;
}
.contact-text {
    flex-grow:1;
}

@media only screen and (max-width:400px) {
    .select-row span {
        display: block;
    }
}

left-column.post-sent .pre-send-message,
left-column.post-sent .self-drawn-arrow,
left-column:not(.post-sent) .post-send-message,
left-column.post-sent + right-column {
    display:none;
}
left-column.post-sent {
    grid-column:span 2;
    padding: 0px;
    /* center content */
    display: flex;
    justify-content: center;
    align-items: center;
}

.fold-up {
    color:white;
    background-color: black;
    position: relative;
}
.fold-up::before {
    content:'';
    left:calc(50% - 6px);
    border:6px solid transparent;
    border-bottom-color:black;
    position: absolute;
    top:-12px;
}
.fold-up button {
    border:0px;
    display: block;
    width: 100%;
    background-color: transparent;
    padding:5px;
    color:inherit;
}
.text-area-zone {
    overflow: hidden;
    padding:0px 2px;
    background-color:white;
    display:flex;
    flex-direction: column;
    height:0px;
    position: absolute;
    left:0px;
    right:0px;
    bottom:0px;
    transition: all 500ms ease-in-out;
}
.text-area-zone.show {
    height:100%;
    padding:2px;
}

.submit-btn {
    margin:10px;
    display:block;
    font-size:20px;
    background-color:var(--blue-text);
    border:1px solid var(--blue-text);
    color:white;
    text-transform: uppercase;
    margin:5px auto;
    padding:5px 20px; /* give button some body */
}
.g-recaptcha > div {
    display:none; /* hide bottom corner 'bug' icon */
}
.submit_result {
    padding:5px 0px;
    text-align: center;
}
.submit_result:not(.show) {
    display:none;
}
form-error {
    display:block;
    background-color: white;
    color:red;
    text-align: center;
    padding:5px;
    border-radius: 15px;
    position: absolute;
    width:210px;
    bottom:80px;
    left:50%;
    translate: -50%;
    z-index: 10;
}
form-error::after {
    content:'';
    left:calc(50% - 6px);
    border:6px solid transparent;
    border-top-color:black;
    position: absolute;
    bottom: -12px;
}
form-error:not(.show) {
    display:none;
}
i.form-alert-icon {
    display:block;
}

@media only screen and (max-width:650px) {
    /* contact form */
    .contact-us-panel.general-container {
        grid-template-columns: 1fr;
    }
    .thin-arrow {
        display:none;
    }
    left-column {
        padding-right:0px;
        padding-bottom:30px;
    }
    .post-send-message .medium-text br {
        display: none; /* skip break, allow natural flow */
    }
}

/* --- PAGE : COMING SOON --- */
.coming-soon-panel {
    position: relative;
}
.centered-logo {
    width:33%;
    margin:0px auto 10px;
}
.centered-logo img {
    display: block;
    width: 100%;
    height:auto;
}
.ripple-img-block {
    position: relative;
    overflow: hidden;
    padding:20% 0px;
}
.ripple-img-block img {
    display: block;
    width: 100%;
    height:auto;
    position: absolute;
    top:50%;
    left:0px;
    right:0px;
    transform:translate(0%, -50%);
}
.flex-text {
    display: flex;
    align-items: center;
    justify-content: center;
}
body.coming-soon huge-headline {
    color:white;
    text-align: center;
    font-size:var(--heading-text-size);
    text-shadow: 2px 2px black;
    margin-bottom: 0px;
}
.down-arrow-in-circle {
    position: relative;
    border-radius: 50%;
    border:3px solid white;
    background-image: linear-gradient(#0ca14a, #aed140 );
    width:80px;
    height:80px;
    /* transform:translate(0px, -50px); */
    margin:-34px auto 0px;
}
.down-arrow-in-circle:hover::after {
	content: '';
	position: absolute;
	top: 50%;
	width: 300%;
	left: 50%;
	translate: -50%;
	border-bottom: 2px dotted red;
}
.arrow-in-the-circle {
    margin:auto;
    width:20px;
    border:20px solid transparent;
    border-top-color: white;
    position: relative;
    top:40%;
}

/* --- PAGE : Home --- */
.home-page-hero {
    position:relative;
    min-height:20vw;
    display:flex;
    align-items:center;
}
body.home huge-headline {
    font-size:var(--heading-text-size);
    text-align: center;
    text-transform: uppercase;
    color:white;
    margin-bottom:0px;
}
.paralax-bg-image {
    position:fixed;
    z-index:-1;
    top:0px;
    left:0px;
    bottom:0px;
    right:0px;
    background-position: center;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: cover;
    background-image: url('/assets/images/mountain_lake_desktop.jpg');
}