/*
Theme Name: Charging Partner
Author: 
Author URI: 
Theme URI: 
Tags: full-site-editing, block-patterns
Text Domain: charging-partner
Requires at least: 6.4
Requires PHP: 7.4
Tested up to: 6.4
Version: 101.07

License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/

/* Styles intended only for the front.*/
html,
body {
    overflow-x: clip !important;
}
html {
	scroll-behavior: smooth;
}

.home .is-scrolled .header-top-part{
	display: none;
}

.home  .header-top-part{
	display: block;
	position : absolute;
	top : 0px;
    z-index: 99999;
	width : 100%;
}

.home .header-sticky-part{
	display: none;
}

.home .is-scrolled .header-sticky-part{
	display: block;
}



.home .is-scrolled .header-sticky-part {
	position: sticky !important;
	top: 0 !important;
	z-index: 99999 !important;
/* 	background-color: #EDF8F6 !important; */
	transition: background-color 0.3s ease;
}

.header-sticky-part{
	display: block;
}

.header-top-part{
	display: none;
}

@media screen and (prefers-reduced-motion: reduce) {

	html {
		scroll-behavior: auto;
	}
}

body {
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
}

.wp-block-image img {

    vertical-align: middle !important;
}
/* =========================================================
   CHARGE PARTNERS CONTACT FORM
   FINAL CLEAN VERSION
   FONT: DM SANS
========================================================= */


/* =========================================================
   FORM CONTAINER
========================================================= */

.charge-contact-form {
    width: 100% !important;
    max-width: 100% !important;

    margin: 0 !important;
    padding: 38px !important;

    background: #ffffff !important;

    border-radius: 22px !important;

    font-family: "DM Sans", sans-serif !important;

    font-size: 14px !important;
    line-height: 1.4 !important;

    box-sizing: border-box !important;
}


/* =========================================================
   RESET EVERYTHING INSIDE FORM
========================================================= */

.charge-contact-form,
.charge-contact-form *,
.charge-contact-form *::before,
.charge-contact-form *::after {
    box-sizing: border-box !important;
}


/* Remove WordPress / CF7 paragraph spacing */
.charge-contact-form p {
    margin: 0 !important;
    padding: 0 !important;

    font-family: "DM Sans", sans-serif !important;
}


/* Remove unwanted line breaks */
.charge-contact-form br {
    display: none !important;
}


/* CF7 wrapper */
.charge-contact-form .wpcf7-form-control-wrap {
    display: block !important;

    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;
}


/* =========================================================
   TWO COLUMN ROW
========================================================= */

.charge-contact-form .charge-form-row {

    display: grid !important;

    grid-template-columns: 1fr 1fr !important;

    column-gap: 20px !important;

    width: 100% !important;

    margin: 0 0 24px 0 !important;

    padding: 0 !important;
}


/* =========================================================
   FULL WIDTH ROW
========================================================= */

.charge-contact-form .charge-form-full {

    grid-template-columns: 1fr !important;

    margin-bottom: 24px !important;
}


/* =========================================================
   FIELD
========================================================= */

.charge-contact-form .charge-form-field {

    width: 100% !important;

    min-width: 0 !important;

    margin: 0 !important;
    padding: 0 !important;
}


/* =========================================================
   LABEL
   EXACTLY 8PX BELOW LABEL
========================================================= */

.charge-contact-form label {

    display: block !important;

    width: 100% !important;

    margin: 0 0 8px 0 !important;

    padding: 0 !important;

    color: #000000 !important;

    font-family: "DM Sans", sans-serif !important;

    font-size: 14px !important;

    font-weight: 400 !important;

    line-height: 18px !important;

    letter-spacing: 0 !important;

    text-align: left !important;

    text-transform: none !important;

    vertical-align: top !important;
}


/* =========================================================
   TEXT / EMAIL / PHONE
========================================================= */

.charge-contact-form input.charge-input {

    display: block !important;

    width: 100% !important;

    height: 46px !important;

    min-height: 46px !important;

    max-height: 46px !important;

    margin: 0 !important;

    padding: 10px 12px !important;

    border: 1px solid #cfdcda !important;

    border-radius: 8px !important;

    background: #f7faf9 !important;

    color: #344b4b !important;

    font-family: "DM Sans", sans-serif !important;

    font-size: 14px !important;

    font-weight: 400 !important;

    line-height: 24px !important;

    outline: none !important;

    box-shadow: none !important;
}


/* =========================================================
   SELECT
========================================================= */

.charge-contact-form select.charge-select {

    display: block !important;

    width: 100% !important;

    height: 46px !important;

    min-height: 46px !important;

    max-height: 46px !important;

    margin: 0 !important;

    padding: 10px 38px 10px 12px !important;

    border: 1px solid #cfdcda !important;

    border-radius: 8px !important;

    background-color: #f7faf9 !important;

    color: #526565 !important;

    font-family: "DM Sans", sans-serif !important;

    font-size: 14px !important;

    font-weight: 400 !important;

    line-height: 24px !important;

    outline: none !important;

    box-shadow: none !important;

    appearance: none !important;

    -webkit-appearance: none !important;

    -moz-appearance: none !important;

    cursor: pointer !important;

    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7'%3E%3Cpath d='M1 1.2l4.5 4.5L10 1.2' fill='none' stroke='%23879a98' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;

    background-repeat: no-repeat !important;

    background-position: right 14px center !important;

    background-size: 10px 6px !important;
}


/* =========================================================
   TEXTAREA
========================================================= */

.charge-contact-form textarea.charge-textarea {

    display: block !important;

    width: 100% !important;

    height: 150px !important;

    min-height: 150px !important;

    max-height: 150px !important;

    margin: 0 !important;

    padding: 12px !important;

    border: 1px solid #cfdcda !important;

    border-radius: 8px !important;

    background: #f7faf9 !important;

    color: #344b4b !important;

    font-family: "DM Sans", sans-serif !important;

    font-size: 16px !important;

    font-weight: 400 !important;

    line-height: 20px !important;

    outline: none !important;

    box-shadow: none !important;

    resize: none !important;
}


/* =========================================================
   PLACEHOLDER
========================================================= */

.charge-contact-form input::placeholder,
.charge-contact-form textarea::placeholder {

    color: #687a79 !important;

    opacity: 1 !important;

    font-family: "DM Sans", sans-serif !important;

    font-size: 14px !important;

    font-weight: 400 !important;
}


/* =========================================================
   FOCUS
========================================================= */

.charge-contact-form input.charge-input:focus,
.charge-contact-form select.charge-select:focus,
.charge-contact-form textarea.charge-textarea:focus {

    border-color: #28bcbc !important;

    background: #ffffff !important;

    outline: none !important;

    box-shadow: 0 0 0 2px rgba(40, 188, 188, 0.08) !important;
}


/* =========================================================
   BUTTON
========================================================= */

.charge-contact-form .charge-form-button {

    display: block !important;

    width: 100% !important;

    margin: 20px 0 0 0 !important;

    padding: 0 !important;

    line-height: 0 !important;
}


.charge-contact-form input.charge-submit {

    display: inline-flex !important;

    align-items: center !important;

    justify-content: center !important;

    width: auto !important;

    min-width: 140px !important;

    height: 50px !important;

    min-height: 44px !important;

    margin: 0 !important;

	padding-top: var(--wp--preset--spacing--30) !important;
	padding-bottom: var(--wp--preset--spacing--30) !important;
    padding-left: 24px !important;
    padding-right: 24px !important;

    border: 1px solid transparent !important;

    border-radius: 24px !important;

    background-color: #00bfbe;

    color: #ffffff !important;

    font-family: "DM Sans", sans-serif !important;

    font-size: 18px !important;

    font-weight: 500 !important;

    text-align: center !important;

    cursor: pointer !important;

    box-shadow: none !important;

    outline: none !important;
}


.charge-contact-form input.charge-submit:hover {

    transform: translateY(-3px) !important;
    box-shadow: 0 8px 20px rgba(14, 53, 54, 0.18) !important;
}

/* =========================================================
   FINAL DISCLAIMER FIX
========================================================= */

html body .charge-contact-form .charge-form-disclaimer,
html body .charge-contact-form .charge-form-disclaimer p,
html body .charge-contact-form .charge-form-disclaimer span,
html body .charge-contact-form .charge-form-disclaimer * {

    display: block !important;

    width: 100% !important;

    margin: 0 !important;

    padding: 0 !important;

    font-family: "DM Sans", sans-serif !important;

    font-size: 12px !important;

    font-weight: 400 !important;

    line-height: 14px !important;

    letter-spacing: 0 !important;

    color: #6d7d7c !important;

    text-align: left !important;

    text-transform: none !important;

    white-space: normal !important;

    word-break: normal !important;

    overflow-wrap: normal !important;
}


/* Space between button and disclaimer */

html body .charge-contact-form .charge-form-disclaimer {

    margin-top: 13px !important;

}

.wpcf7-form .wpcf7-response-output{
	    border: none !important;
    text-align: center !important;
}

.wpcf7-spinner{
	display: none !important;
}

/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .charge-contact-form {

        padding: 28px 20px !important;

        border-radius: 18px !important;
    }


    .charge-contact-form .charge-form-row {

        grid-template-columns: 1fr !important;

        row-gap: 18px !important;

        column-gap: 0 !important;

        margin-bottom: 20px !important;
    }


    .charge-contact-form .charge-form-full {

        margin-bottom: 20px !important;
    }


    .charge-contact-form label {

        font-size: 14px !important;

        line-height: 18px !important;

        margin: 0 0 8px 0 !important;
    }


    .charge-contact-form input.charge-input,
    .charge-contact-form select.charge-select {

        height: 46px !important;

        min-height: 46px !important;

        max-height: 46px !important;
    }


    .charge-contact-form textarea.charge-textarea {

        height: 140px !important;

        min-height: 140px !important;

        max-height: 140px !important;
    }


    .charge-contact-form .charge-form-button {

        margin-top: 18px !important;
    }
}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    .charge-contact-form {

        padding: 24px 24px !important;
    }


    .charge-contact-form .charge-form-row {

        row-gap: 16px !important;

        margin-bottom: 18px !important;
    }


    .charge-contact-form .charge-form-full {

        margin-bottom: 18px !important;
    }


    .charge-contact-form input.charge-input,
    .charge-contact-form select.charge-select {

        height: 44px !important;

        min-height: 44px !important;

        max-height: 44px !important;
    }


    .charge-contact-form textarea.charge-textarea {

        height: 130px !important;

        min-height: 130px !important;

        max-height: 130px !important;
    }
}



.process-card {
	transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

.process-card:hover {
	transform: translateY(-6px) !important;
	box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15) !important;
}


/* =========================================================
   KENERO — CONTACT FORM
   ========================================================= */

.charge-contact-form {
    width: 100% !important;
    box-sizing: border-box !important;
    font-family: inherit !important;
}


/* =========================================================
   FORM ROW
   ========================================================= */

.charge-form-row {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 28px 18px !important;
    width: 100% !important;
    margin: 0 0 24px !important;
}

.charge-form-full {
    grid-template-columns: 1fr !important;
}


/* =========================================================
   FIELD
   ========================================================= */

.charge-form-field {
    width: 100% !important;
    min-width: 0 !important;
}

.charge-form-field label {
    display: block !important;
    margin: 0 0 9px !important;

    color: #0E3536 !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
}


/* =========================================================
   INPUTS
   ========================================================= */

.charge-form-field .charge-input,
.charge-form-field .charge-select,
.charge-form-field .charge-textarea {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;

    border: 1px solid #D7E4E2 !important;
    border-radius: 8px !important;

    background: #F8FAF9 !important;
    color: #0E3536 !important;

    font-family: inherit !important;
    font-size: 15px !important;
    font-weight: 400 !important;

    outline: none !important;

    transition:
        border-color 0.2s ease,
        background-color 0.2s ease,
        box-shadow 0.2s ease !important;
}


/* =========================================================
   TEXT INPUT
   ========================================================= */

.charge-form-field .charge-input {
    height: 52px !important;
    padding: 0 16px !important;
}


/* =========================================================
   SELECT
   ========================================================= */

.charge-form-field .charge-select {
    height: 52px !important;
    padding: 0 42px 0 16px !important;

    cursor: pointer !important;
}


/* =========================================================
   TEXTAREA
   ========================================================= */

.charge-form-field .charge-textarea {
    min-height: 150px !important;
    padding: 14px 16px !important;

    line-height: 1.6 !important;
    resize: vertical !important;
}


/* =========================================================
   PLACEHOLDER
   ========================================================= */

.charge-form-field .charge-input::placeholder,
.charge-form-field .charge-textarea::placeholder {
    color: #7A9291 !important;
    opacity: 1 !important;
}


/* =========================================================
   FOCUS
   ========================================================= */

.charge-form-field .charge-input:focus,
.charge-form-field .charge-select:focus,
.charge-form-field .charge-textarea:focus {
    border-color: #65C3C5 !important;
    background: #FFFFFF !important;

    box-shadow: 0 0 0 3px rgba(101, 195, 197, 0.15) !important;
}


/* =========================================================
   HOVER
   ========================================================= */

.charge-form-field .charge-input:hover,
.charge-form-field .charge-select:hover,
.charge-form-field .charge-textarea:hover {
    border-color: #A8C9C8 !important;
}


/* =========================================================
   SUBMIT BUTTON
   ========================================================= */

.charge-form-button {
    margin-top: 8px !important;
}

.charge-form-button .charge-submit {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    min-height: 52px !important;
    padding: 0 28px !important;

    border: 1px solid #65C3C5 !important;
    border-radius: 28px !important;

    background: #00bfbe !important;
    color: #FFFFFF !important;

    font-family: inherit !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    line-height: 1 !important;

    cursor: pointer !important;

    box-shadow: 0 8px 20px rgba(14, 53, 54, 0.12) !important;

    transition:
        background-color 0.25s ease,
        border-color 0.25s ease,
        transform 0.25s ease,
        box-shadow 0.25s ease !important;
}

.charge-form-button .charge-submit:hover {
   transform: translateY(-3px) !important;
    box-shadow: 0 8px 20px rgba(14, 53, 54, 0.18) !important;
}


/* =========================================================
   DISCLAIMER
   ========================================================= */

.charge-form-disclaimer {
    margin-top: 14px !important;

    color: #6C8584 !important;
    font-size: 12px !important;
    line-height: 1.6 !important;
}


/* =========================================================
   CONTACT FORM 7 DEFAULT ELEMENTS
   ========================================================= */

.charge-contact-form p {
    margin: 0 !important;
}

.charge-contact-form br {
    display: none !important;
}

.charge-contact-form .wpcf7-form-control-wrap {
    display: block !important;
    width: 100% !important;
}

.charge-contact-form .wpcf7-not-valid-tip {
    margin-top: 6px !important;

    color: #B54A4A !important;
    font-size: 12px !important;
}


/* =========================================================
   CF7 SUCCESS MESSAGE
   ========================================================= */

.charge-contact-form .wpcf7-response-output {
    margin: 20px 0 0 !important;
    padding: 14px 16px !important;

    border: 1px solid #B8DAD6 !important;
    border-radius: 8px !important;

    background: #F2FAF8 !important;
    color: #0E3536 !important;

    font-size: 14px !important;
    line-height: 1.5 !important;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) {

    .charge-form-row {
        gap: 22px 16px !important;
        margin-bottom: 22px !important;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {

    .charge-form-row {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
        margin-bottom: 20px !important;
    }

    .charge-form-field label {
        margin-bottom: 8px !important;
        font-size: 13px !important;
    }

    .charge-form-field .charge-input,
    .charge-form-field .charge-select {
        height: 50px !important;
    }

    .charge-form-field .charge-input,
    .charge-form-field .charge-select,
    .charge-form-field .charge-textarea {
        font-size: 15px !important;
    }

    .charge-form-field .charge-textarea {
        min-height: 130px !important;
    }

    .charge-form-button {
        margin-top: 4px !important;
    }

    .charge-form-button .charge-submit {
        width: 100% !important;
        min-height: 52px !important;
    }

    .charge-form-disclaimer {
        font-size: 11px !important;
    }

}


/* Animation */
/* Kenero cards */

/* .kenero-card-row > .wp-block-group {
    transition: 
        transform 0.4s ease,
        box-shadow 0.4s ease !important;
}

.kenero-card-row > .wp-block-group:hover {
    transform: translateY(-8px) !important;

    box-shadow:
        0 15px 35px rgba(0, 0, 0, 0.18),
        0 0 25px rgba(0, 200, 240, 0.15) !important;
}

.kenero-cards > .wp-block-group {
    opacity: 0;
    transform: translateY(40px);
    transition:
        opacity 0.7s ease,
        transform 0.7s ease;
}

.kenero-cards.is-visible > .wp-block-group {
    opacity: 1;
    transform: translateY(0);
}
 */

/* ==========================================================================
   KENERO SECTOR CARDS HOVER EFFECT
   Matches original .c and .sc cards from Kenero HTML
   ========================================================================== */

/* Base Card Styling */
.kenero-card-row > .wp-block-group,
.kenero-card-hover{
    border: 1.5px solid #dfe9e8;
    border-radius: 18px;
    background: #ffffff;
    position: relative;
    overflow: hidden;
    transition: border-color 0.35s ease, box-shadow 0.35s ease, transform 0.35s ease;
    cursor: pointer;
}

/* Bottom Teal Accent Line Animation (From original .c:before) */
/* .kenero-card-row > .wp-block-group::before,
.kenero-card-hover::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    height: 4px;
    width: 0;
    background: #00BEB8;
    transition: width 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
    z-index: 2;
} */

/* Card Hover State */
.kenero-card-row > .wp-block-group:hover,
.kenero-card-hover:hover{
    border-color: #00BEB8;
/*     transform: translateY(-4px); */
    box-shadow: 0 20px 40px -22px rgba(14, 53, 54, 0.35), 0 0 0 1px #00BEB8;
	border-bottom: none;
}

/* Expand Bottom Accent Line on Hover */
/* .kenero-card-row > .wp-block-group:hover::before,
.kenero-card-hover:hover::before {
    width: 100%;
}
 */


/* =========================================================
   SMOOTH HEADING REVEAL
   ========================================================= */

.heading-reveal {
    opacity: 0 !important;
    transform: translateY(35px) !important;

    transition:
        opacity 1s cubic-bezier(0.22, 1, 0.36, 1),
        transform 1s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

.heading-reveal-active {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

.group-hover-effect {
    transition:
        transform 0.45s ease,
        box-shadow 0.45s ease !important;
}

.group-hover-effect:hover {
    transform: translateY(-8px) !important;
    box-shadow: 0 20px 45px rgba(14, 53, 54, 0.14) !important;
}


/* GLOBAL BUTTON HOVER */

.wp-block-button__link {
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

.wp-block-button__link:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 8px 20px rgba(14, 53, 54, 0.18) !important;
}


.site-footer{
	margin-top:0px !important;
}
/* =========================================================
   KENERO BACK TO TOP
   ========================================================= */

#kenero-back-to-top {
    position: fixed !important;

    right: 30px !important;
    bottom: 30px !important;

    width: 52px !important;
    height: 52px !important;

    padding: 0 !important;
    margin: 0 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    background: #00BFBE !important;
    color: #ffffff !important;

    border: none !important;
    border-radius: 50% !important;

    font-size: 22px !important;
    font-weight: 400 !important;
    line-height: 1 !important;

    cursor: pointer !important;

    opacity: 0 !important;
    visibility: hidden !important;

    transform: translateY(15px) !important;

    transition:
        opacity 0.35s ease,
        visibility 0.35s ease,
        transform 0.35s ease,
        background-color 0.3s ease !important;

    z-index: 99999 !important;

    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15) !important;
}


/* SHOW AFTER SCROLL */

#kenero-back-to-top.show {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
}


/* HOVER */

#kenero-back-to-top:hover {
    background: #0e3536 !important;
    transform: translateY(-4px) !important;
}


/* MOBILE */

@media (max-width: 767px) {

    #kenero-back-to-top {
        right: 18px !important;
        bottom: 18px !important;

        width: 46px !important;
        height: 46px !important;

        font-size: 20px !important;
    }

}
/* =========================================================
   KENERO MARQUEE — FULL UPDATED
   ========================================================= */

.kenero-marquee {
    width: 100% !important;
    max-width: 100% !important;

    height: 70px !important;

    overflow: hidden !important;

    margin: 0 !important;
    padding: 0 !important;

    border: none !important;

    background: #ffffff !important;
}


/* =========================================================
   KENERO MARQUEE
   ========================================================= */

.kenero-marquee {
    width: 100% !important;
    max-width: 100% !important;
    height: 70px !important;

    overflow: hidden !important;

    margin: 0 !important;
    padding: 0 !important;

    border: none !important;

    background: #ffffff !important;
}


/* =========================================================
   TRACK
   ========================================================= */

.kenero-marquee-track {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;

    width: max-content !important;
    max-width: none !important;

    height: 70px !important;

    margin: 0 !important;
    padding: 0 !important;

    gap: 0 !important;

    animation: kenero-marquee-scroll 15s linear infinite !important;

    will-change: transform !important;
}


/* =========================================================
   PREVENT WORDPRESS BLOCKS FROM SHRINKING
   ========================================================= */

.kenero-marquee-track > * {
    flex: 0 0 auto !important;

    width: auto !important;
    max-width: none !important;

    margin-top: 0 !important;
    margin-bottom: 0 !important;
}


/* =========================================================
   TEXT
   ========================================================= */

.kenero-marquee-track p {
    display: block !important;

    width: max-content !important;
    min-width: max-content !important;

    margin: 0 35px !important;
    padding: 0 !important;

    white-space: nowrap !important;

    font-weight: 700 !important;

    line-height: 1 !important;
}


/* =========================================================
   LOGO / K
   ========================================================= */

.kenero-marquee-track img {
    display: block !important;

    width: 30px !important;
    height: 30px !important;

    max-width: 30px !important;
    max-height: 30px !important;

    object-fit: contain !important;

    margin: 0 20px !important;
    padding: 0 !important;
}


/* =========================================================
   GROUPS INSIDE TRACK
   ========================================================= */

.kenero-marquee-track .wp-block-group {
    flex: 0 0 auto !important;

    width: max-content !important;
    max-width: none !important;
    min-width: max-content !important;

    margin-top: 0 !important;
    margin-bottom: 0 !important;

    padding: 0 !important;
}


/* =========================================================
   NO TEXT WRAPPING
   ========================================================= */

.kenero-marquee-track a,
.kenero-marquee-track span {
    white-space: nowrap !important;
}


/* =========================================================
   REMOVE STARTING GAP
   ========================================================= */

.kenero-marquee-track > :first-child {
    margin-left: 0 !important;
    padding-left: 0 !important;
}


/* =========================================================
   SCROLLING ANIMATION
   ========================================================= */

@keyframes kenero-marquee-scroll {

    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }

}




/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {

    .kenero-marquee {
        height: 60px !important;
    }

    .kenero-marquee-track {
        height: 60px !important;
        animation-duration: 15s !important;
    }

    .kenero-marquee-track p {
        font-size: 18px !important;
        margin-left: 25px !important;
        margin-right: 25px !important;
    }

    .kenero-marquee-track img {
        width: 24px !important;
        height: 24px !important;

        max-width: 24px !important;
        max-height: 24px !important;

        margin-left: 15px !important;
        margin-right: 15px !important;
    }

}

.infrastructure-section .wp-block-image {
    position: absolute !important;
    top: 52% !important;
    right: -17% !important;
    width: 650px !important;
    transform: translate(-50%, -50%) !important;
    z-index: 0 !important;
    pointer-events: none !important;
}

.infrastructure-section .wp-block-columns,
.infrastructure-section .wp-block-group,
.infrastructure-section .wp-block-grid {
    position: relative !important;
    z-index: 2 !important;
}

/* =========================================================
   KENERO — INFRASTRUCTURE EXPANDING CARDS
   ========================================================= */


/* =========================================================
   SECTION
   ========================================================= */

.infrastructure-section {
    width: 100% !important;
    overflow: hidden !important;
}


/* =========================================================
   SECTION HEADING
   ========================================================= */

.infrastructure-section > h2 {
    margin: 0 0 32px 0 !important;
    max-width: 900px !important;
}


/* =========================================================
   CARDS WRAPPER
   ========================================================= */

.infrastructure-cards {
    display: grid !important;

    grid-template-columns:
        3.8fr
        0.7fr
        0.7fr
        0.7fr !important;

    gap: 14px !important;

    width: 100% !important;
    max-width: 100% !important;

    align-items: stretch !important;

    transition:
        grid-template-columns 0.65s cubic-bezier(.22, 1, .36, 1) !important;
}


/* =========================================================
   CARD
   ========================================================= */

.infrastructure-card {
    position: relative !important;

    min-width: 0 !important;
    width: 100% !important;
    height: 290px !important;

    box-sizing: border-box !important;

    display: flex !important;
    flex-direction: column !important;

    justify-content: flex-end !important;
    align-items: flex-start !important;

    padding: 30px !important;

    border-radius: 16px !important;

    background: #244748 !important;
    color: #ffffff !important;

    overflow: hidden !important;

    transition:
        background-color 0.5s ease,
        color 0.5s ease !important;
}


/* =========================================================
   CARD TITLE — REMOVE GLOBAL HEADING ANIMATION CONFLICT
   ========================================================= */

.infrastructure-card-title {
    opacity: 1 !important;

    margin: 0 !important;

    transition:
        transform 0.5s cubic-bezier(.22, 1, .36, 1) !important;
}


/* =========================================================
   COLLAPSED CARD TITLE
   ========================================================= */

.infrastructure-card:not(.is-active) .infrastructure-card-title {

    writing-mode: vertical-rl !important;

    text-orientation: mixed !important;

    transform: rotate(180deg) !important;

    transform-origin: center center !important;

    align-self: flex-start !important;

    white-space: nowrap !important;

    width: auto !important;
    max-width: none !important;

    margin: 0 !important;
    padding: 0 !important;

    font-size: 20px !important;
    line-height: 1.15 !important;
	position: absolute !important;
    color: #ffffff !important;
}


/* =========================================================
   ACTIVE CARD
   ========================================================= */

.infrastructure-card.is-active {

    background: #72c3bf !important;

    color: #111111 !important;
}


/* =========================================================
   ACTIVE CARD TITLE
   ========================================================= */

.infrastructure-card.is-active .infrastructure-card-title {

    writing-mode: horizontal-tb !important;

    text-orientation: mixed !important;

    transform: none !important;

    align-self: flex-start !important;

    width: 100% !important;

    max-width: 100% !important;

    white-space: normal !important;

    margin: 0 0 10px 0 !important;

    padding: 0 !important;

    font-size: 24px !important;

    line-height: 1.2 !important;

    color: #111111 !important;
}


/* =========================================================
   DESCRIPTION
   ========================================================= */

.infrastructure-card p {

    width: 100% !important;

    max-width: 620px !important;

    margin: 0 !important;
    padding: 0 !important;

    opacity: 0 !important;

    visibility: hidden !important;

    transform: translateY(12px) !important;

    font-size: 16px !important;
    line-height: 1.55 !important;

    color: #111111 !important;

    transition:
        opacity 0.35s ease,
        transform 0.45s cubic-bezier(.22, 1, .36, 1),
        visibility 0s linear 0.45s !important;
}


/* =========================================================
   ACTIVE DESCRIPTION
   ========================================================= */

.infrastructure-card.is-active p {

    opacity: 1 !important;

    visibility: visible !important;

    transform: translateY(0) !important;

    transition:
        opacity 0.35s ease 0.15s,
        transform 0.5s cubic-bezier(.22, 1, .36, 1) 0.1s,
        visibility 0s linear 0s !important;
}


/* =========================================================
   ACTIVE CARD WIDTHS
   ========================================================= */

.infrastructure-cards:has(
    .infrastructure-card:nth-child(1).is-active
) {
    grid-template-columns:
        3.5fr
        1.5fr
        1.5fr
        1.5fr !important;
}


.infrastructure-cards:has(
    .infrastructure-card:nth-child(2).is-active
) {
    grid-template-columns:
        1fr
        3.5fr
        1fr
        1fr !important;
}


.infrastructure-cards:has(
    .infrastructure-card:nth-child(3).is-active
) {
    grid-template-columns:
        1fr
        1fr
        3.5fr
        1fr !important;
}


.infrastructure-cards:has(
    .infrastructure-card:nth-child(4).is-active
) {
    grid-template-columns:
        1fr
        1fr
        1fr
        3.5fr !important;
}


/* =========================================================
   NO ACTIVE CLASS = FIRST CARD OPEN
   ========================================================= */

.infrastructure-cards:not(:has(.infrastructure-card.is-active)) {

    grid-template-columns:
        3.8fr
        1fr
        1fr
        1fr !important;
}


.infrastructure-cards:not(:has(.infrastructure-card.is-active))
.infrastructure-card:first-child {

    background: #72c3bf !important;

    color: #111111 !important;
}


.infrastructure-cards:not(:has(.infrastructure-card.is-active))
.infrastructure-card:first-child
.infrastructure-card-title {

    writing-mode: horizontal-tb !important;

    transform: none !important;

    align-self: flex-start !important;

    width: 100% !important;

    white-space: normal !important;

    margin: 0 0 10px 0 !important;

    font-size: 24px !important;

    color: #111111 !important;
}


.infrastructure-cards:not(:has(.infrastructure-card.is-active))
.infrastructure-card:first-child p {

    opacity: 1 !important;

    visibility: visible !important;

    transform: translateY(0) !important;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1024px) {

    .infrastructure-section {
        padding: 55px 0 !important;
    }

    .infrastructure-cards {
        gap: 12px !important;
    }

    .infrastructure-card {
        height: 260px !important;
        padding: 24px !important;
        border-radius: 14px !important;
    }

    .infrastructure-card:not(.is-active)
    .infrastructure-card-title {

        font-size: 17px !important;

    }

    .infrastructure-card.is-active
    .infrastructure-card-title {

        font-size: 21px !important;

    }

    .infrastructure-card p {

        font-size: 14px !important;
        line-height: 1.5 !important;

    }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {

    .infrastructure-section {
        padding: 45px 0 !important;
    }

    .infrastructure-cards,
    .infrastructure-cards:has(
        .infrastructure-card:nth-child(1).is-active
    ),
    .infrastructure-cards:has(
        .infrastructure-card:nth-child(2).is-active
    ),
    .infrastructure-cards:has(
        .infrastructure-card:nth-child(3).is-active
    ),
    .infrastructure-cards:has(
        .infrastructure-card:nth-child(4).is-active
    ) {

        grid-template-columns: 1fr !important;

        gap: 12px !important;

    }

    .infrastructure-card {

        width: 100% !important;

        min-height: 90px !important;

        height: auto !important;

        padding: 24px !important;

        justify-content: center !important;

        align-items: flex-start !important;

        border-radius: 14px !important;

    }

    .infrastructure-card:not(.is-active)
    .infrastructure-card-title {

        writing-mode: horizontal-tb !important;

        transform: none !important;

        white-space: normal !important;

        width: 100% !important;

        margin: 0 !important;

        font-size: 19px !important;

        line-height: 1.3 !important;

    }

    .infrastructure-card.is-active {

        min-height: 190px !important;

    }

    .infrastructure-card.is-active
    .infrastructure-card-title {

        font-size: 21px !important;

        margin-bottom: 10px !important;

    }

    .infrastructure-card p {

        font-size: 14px !important;

        line-height: 1.5 !important;

    }
}

/* 
* Scroll Entrance Animations (Section-by-Section on Scroll)
* Add classes (e.g. fade-up, fade-in, fade-left, fade-right, zoom-in) to Gutenberg block settings under "Additional CSS Class(es)"
*/
.fade-up,
.fade-in,
.fade-left,
.fade-right,
.zoom-in,
[class*="animate-"] {
	opacity: 0;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
		transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
 
.fade-up,
.animate-fade-up {
	transform: translate3d(0, 32px, 0);
}
 
.fade-in,
.animate-fade-in {
	transform: translate3d(0, 0, 0);
}
 
.fade-left,
.animate-fade-left {
	transform: translate3d(32px, 0, 0);
}
 
.fade-right,
.animate-fade-right {
	transform: translate3d(-32px, 0, 0);
}
 
.zoom-in,
.animate-zoom-in {
	transform: scale3d(0.95, 0.95, 1);
}
 
/* Revealed State when block comes into view */
.fade-up.is-animated,
.fade-in.is-animated,
.fade-left.is-animated,
.fade-right.is-animated,
.zoom-in.is-animated,
[class*="animate-"].is-animated {
	opacity: 1 !important;
	transform: translate3d(0, 0, 0) scale3d(1, 1, 1) !important;
}
 
/* Stagger delays for child columns/cards */
.stagger-children>*:nth-child(1) {
	transition-delay: 0.08s;
}
 
.stagger-children>*:nth-child(2) {
	transition-delay: 0.16s;
}
 
.stagger-children>*:nth-child(3) {
	transition-delay: 0.24s;
}
 
.stagger-children>*:nth-child(4) {
	transition-delay: 0.32s;
}
 
.stagger-children>*:nth-child(5) {
	transition-delay: 0.40s;
}
 
.stagger-children>*:nth-child(6) {
	transition-delay: 0.48s;
}


#sp {
    position: fixed;
    inset: 0;
    z-index: 999999;
    background: #ffffff; /* Change to #0A1F21 if you prefer dark background */
    display: grid;
    place-items: center;
    pointer-events: none;
    animation: kenero_sf 0.5s 1.7s forwards;
    transition: opacity 0.4s ease, visibility 0.4s ease;
}

#sp svg {
    width: 130px;
    height: auto;
    overflow: visible;
}

#sp path {
    transform-box: fill-box;
}

#sp .a {
    fill: #0C4041; /* Stem color */
    transform-origin: bottom;
    animation: kenero_sb 0.9s cubic-bezier(0.2, 0.9, 0.2, 1) both;
}

#sp .b {
    fill: #00C0BF;
    animation: kenero_si_top 0.9s cubic-bezier(0.2, 0.9, 0.2, 1) 0.25s both;
}

#sp .c {
    fill: #00C0BF;
    animation: kenero_si_bottom 0.9s cubic-bezier(0.2, 0.9, 0.2, 1) 0.5s both;
}

@media (prefers-color-scheme: dark) {
    #sp {
        background: #0A1F21;
    }
    #sp .a {
        fill: #ffffff;
    }
}

@keyframes kenero_sb {
    from {
        transform: scaleY(0);
    }
    to {
        transform: scaleY(1);
    }
}

@keyframes kenero_si_top {
    from {
        transform: translate(70px, -70px);
        opacity: 0;
    }
    to {
        transform: translate(0, 0);
        opacity: 1;
    }
}

@keyframes kenero_si_bottom {
    from {
        transform: translate(70px, 70px);
        opacity: 0;
    }
    to {
        transform: translate(0, 0);
        opacity: 1;
    }
}

@keyframes kenero_sf {
    to {
        opacity: 0;
        visibility: hidden;
    }
}

@media (prefers-reduced-motion: reduce) {
    #sp {
        display: none !important;
    }
}

#pr {
    position: fixed;
    left: 0;
    top: 0;
    height: 3px;
    background: #00BEB8;
    width: 0;
    z-index: 99998;
    transition: width 0.1s ease-out;
}


.wp-block-navigation .wp-block-navigation-item.current-menu-item .wp-block-navigation-item__label {
        color: #27aeae;
    font-weight: 700;
}


.wp-block-navigation .wp-block-navigation-item:hover .wp-block-navigation-item__label {
        color: #27aeae;
}

/* =========================================================
   KENERO — SMOOTH GRID SCROLL ANIMATION
   ========================================================= */

/* Default: visible */
.scroll-sequence-grid > * {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

/* Initial animation state */
.scroll-sequence-grid.is-ready > * {
    opacity: 0 !important;
    transform: translateY(45px) !important;

    transition:
        opacity 1.1s ease,
        transform 1.1s cubic-bezier(0.16, 1, 0.3, 1) !important;

    will-change: opacity, transform;
}

/* Animation active */
.scroll-sequence-grid.is-ready.is-visible > * {
    opacity: 1 !important;
    transform: translateY(0) !important;
}


/* =========================================================
   SEQUENTIAL TIMING
   ========================================================= */

.scroll-sequence-grid.is-visible > *:nth-child(1) {
    transition-delay: 0.05s !important;
}

.scroll-sequence-grid.is-visible > *:nth-child(2) {
    transition-delay: 0.30s !important;
}

.scroll-sequence-grid.is-visible > *:nth-child(3) {
    transition-delay: 0.55s !important;
}

.scroll-sequence-grid.is-visible > *:nth-child(4) {
    transition-delay: 0.80s !important;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1024px) {

    .scroll-sequence-grid.is-ready > * {
        transform: translateY(35px) !important;

        transition:
            opacity 0.95s ease,
            transform 0.95s cubic-bezier(0.16, 1, 0.3, 1) !important;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {

    .scroll-sequence-grid.is-ready > * {
        transform: translateY(30px) !important;

        transition:
            opacity 0.9s ease,
            transform 0.9s cubic-bezier(0.16, 1, 0.3, 1) !important;
    }

    .scroll-sequence-grid.is-visible > *:nth-child(1) {
        transition-delay: 0.05s !important;
    }

    .scroll-sequence-grid.is-visible > *:nth-child(2) {
        transition-delay: 0.22s !important;
    }

    .scroll-sequence-grid.is-visible > *:nth-child(3) {
        transition-delay: 0.39s !important;
    }

    .scroll-sequence-grid.is-visible > *:nth-child(4) {
        transition-delay: 0.56s !important;
    }

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .scroll-sequence-grid > * {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

}

/* ==========================================================================
   Kenero EV Vehicle & Bolt Hover Motion (Slow & Smooth Drive-In)
   ========================================================================== */

/* 1. Ensure the card clips the car as it enters from the edge */
.svg-motion-section .wp-block-group {
  overflow: hidden;
}

/* 2. Base Vehicle State:
      - Starts off-screen to the right & hidden
      - 1.4s slow and smooth cruise transition */
.svg-motion-section .car,
svg .car {
  display: block !important;
  color: #00BEB8 !important;
  fill: #00BEB8 !important;
  transform: translateX(180px);
  opacity: 0;
  transform-origin: center bottom;
  transition: transform 1.4s cubic-bezier(0.2, 0.85, 0.25, 1),
              opacity 0.6s ease;
  will-change: transform, opacity;
}


@media (max-width: 767px) {

.svg-motion-section .car,
svg .car {
  display: block !important;
  color: #00BEB8 !important;
  fill: #00BEB8 !important;
  transform: translateX(0px);
  opacity: 1;
  transform-origin: center bottom;
  transition: transform 1.4s cubic-bezier(0.2, 0.85, 0.25, 1),
              opacity 0.6s ease;
  will-change: transform, opacity;
}

}

/* 3. Base Lightning Bolt: Dormant/dim until car arrives */
.svg-motion-section .bolt,
svg .bolt,
svg use[href="#bo"] {
  display: block !important;
  color: #00BEB8 !important;
  fill: #00BEB8 !important;
  opacity: 0.2;
  transform-origin: 305px 135px;
  transition: opacity 0.5s ease;
}

/* 4. ON CARD HOVER:
      Car / Truck slowly and smoothly glides in to park at the charger */
.svg-motion-section .wp-block-group:hover .car,
.svg-motion-section > div:hover .car,
svg:hover .car {
  transform: translateX(0);
  opacity: 1;
}

/* 5. ON CARD HOVER:
      Bolt activates with gentle charging pulse after vehicle arrives */
.svg-motion-section .wp-block-group:hover .bolt,
.svg-motion-section .wp-block-group:hover use[href="#bo"],
.svg-motion-section > div:hover .bolt,
svg:hover .bolt,
svg:hover use[href="#bo"] {
  opacity: 1;
  animation: evBoltPulse 0.9s ease-in-out infinite alternate 0.5s;
}

/* 6. Bolt Pulse Keyframe */
@keyframes evBoltPulse {
  0% {
    transform: scale(0.95);
    filter: drop-shadow(0 0 1px #00BEB8);
  }
  100% {
    transform: scale(1.35);
    filter: drop-shadow(0 0 6px #5FD0D0);
  }
}