/* =========================================
   EVCAN Dynamic Color System — Pure CSS
   ========================================= */

/* 1) Brand palette + sensible on-white defaults */
:root {
    --ev-blue: #20466B;
    /* Blue Indigo */
    --ev-white: #FFFFFF;
    --ev-yellow: #FFCA05;
    /* Philippine Yellow */
    --ev-green: #B8FF3C;
    /* Green Yellow */
    --ev-teal: #4BF2D0;
    /* Turquoise */
    --ev-red: #FF8466;
    /* Coral Beef */
    --ev-gray-100: #E5E5E5;
    --evcan-warning: #FFC20E;

    /* legacy aliases (your existing vars) */
    --blue: var(--ev-blue);
    --green: var(--ev-green);
    --yellow: var(--ev-yellow);
    --teal: var(--ev-teal);
    --red: var(--ev-red);
    --white:var(--ev-white);

    /* defaults for light pages (on white) */
    --evcan-bg: var(--ev-white);
    --evcan-fg: var(--ev-blue);
    --evcan-heading: var(--ev-blue);
    --evcan-muted: color-mix(in srgb, var(--ev-blue) 60%, white);
    --evcan-border: color-mix(in srgb, var(--ev-blue) 25%, white);
    --evcan-link: var(--ev-blue);
    --evcan-link-hov: var(--ev-red);
    --evcan-accent: var(--ev-yellow);
    --evcan-button-bg: var(--ev-blue);
    --evcan-button-fg: var(--ev-white);
    --evcan-button-color: var(--evcan-button-fg);
}

/* 2) Background utilities (as you provided) */
.bg-lime-green {
    background-color: var(--green) !important;
}

/* #B8FF3C */
.bg-dark-blue {
    background-color: var(--blue) !important;
}

/* #20466B */
.bg-aqua-blue {
    background-color: var(--teal) !important;
}

/* #4BF2D0 */
.bg-coral {
    background-color: var(--red) !important;
}

/* #FF8466 */
.bg-yellow {
    background-color: var(--yellow) !important;
}

.bg-white{
    background-color: var(--white) !important;
}
/* #FFCA05 */

/* 3) Theme variable presets per background (WCAG-checked) */

/* On White (page default or .on-white wrapper) */
.bg-white {
    --evcan-bg: var(--ev-white);
    --evcan-fg: var(--ev-blue);
    --evcan-heading: var(--ev-blue);
    --evcan-muted: color-mix(in srgb, var(--ev-blue) 60%, white);
    --evcan-border: color-mix(in srgb, var(--ev-blue) 25%, white);
    --evcan-link: var(--ev-blue);
    --evcan-link-hov: var(--ev-red);
    --evcan-accent: var(--ev-yellow);
    --evcan-button-bg: var(--ev-blue);
    --evcan-button-fg: var(--ev-white);
    --evcan-button-border: var(--ev-blue);
    --evcan-button-hover-bg: #0d263d;
    --evcan-button-color: var(--ev-white);
    --evcan-warning: #FFC20E;
}

/* Dark Blue background */
.bg-dark-blue {
    --evcan-bg: var(--ev-blue);
    --evcan-fg: var(--ev-white);
    --evcan-heading: var(--ev-white);
    --evcan-muted: color-mix(in srgb, var(--ev-white) 75%, black);
    --evcan-border: color-mix(in srgb, var(--ev-white) 25%, transparent);
    --evcan-link: var(--ev-white);
    --evcan-link-hov: var(--ev-green);
    --evcan-accent: var(--ev-green);
    --evcan-button-bg: var(--ev-green);
    --evcan-button-fg: var(--ev-blue);
    --evcan-button-border: var(--ev-green);
    --evcan-button-hover-bg: var(--ev-white);
    --evcan-button-color: var(--ev-blue);
    --evcan-warning: #FFDD55;
}

/* Green Yellow background */
.bg-lime-green {
    --evcan-bg: var(--ev-green);
    --evcan-fg: var(--ev-blue);
    --evcan-heading: var(--ev-blue);
    --evcan-muted: color-mix(in srgb, var(--ev-blue) 55%, white);
    --evcan-border: color-mix(in srgb, var(--ev-blue) 35%, transparent);
    --evcan-link: var(--ev-blue);
    --evcan-link-hov: color-mix(in srgb, var(--ev-blue) 80%, black);
    --evcan-accent: var(--ev-blue);
    --evcan-button-bg: var(--ev-blue);
    --evcan-button-fg: var(--ev-blue);
    --evcan-button-border: var(--ev-blue);
    --evcan-button-hover-bg: var(--white);
    --evcan-button-color:var(--white);
    --evcan-warning: #8B2E00;
}

/* Philippine Yellow background */
.bg-yellow {
    --evcan-bg: var(--ev-yellow);
    --evcan-fg: var(--ev-blue);
    --evcan-heading: var(--ev-blue);
    --evcan-muted: color-mix(in srgb, var(--ev-blue) 55%, white);
    --evcan-border: color-mix(in srgb, var(--ev-blue) 35%, transparent);
    --evcan-link: var(--ev-blue);
    --evcan-link-hov: color-mix(in srgb, var(--ev-blue) 80%, black);
    --evcan-accent: var(--ev-blue);
    --evcan-button-bg: var(--ev-blue);
    --evcan-button-fg: var(--ev-white);
    --evcan-button-border: var(--ev-blue);
    --evcan-button-hover-bg: #0d263d;
    --evcan-button-color: var(--ev-white);
    --evcan-warning: #1B2E4A;
}

/* Turquoise background */
.bg-aqua-blue {
    --evcan-bg: var(--ev-teal);
    --evcan-fg: var(--ev-blue);
    /* AA 6.9 */
    --evcan-heading: var(--ev-blue);
    --evcan-muted: color-mix(in srgb, var(--ev-blue) 55%, white);
    --evcan-border: color-mix(in srgb, var(--ev-blue) 35%, transparent);
    --evcan-link: var(--ev-blue);
    --evcan-link-hov: color-mix(in srgb, var(--ev-blue) 80%, black);
    --evcan-accent: var(--ev-white);
    --evcan-button-bg: var(--ev-blue);
    --evcan-button-fg: var(--ev-white);
    --evcan-button-border: var(--ev-blue);
    --evcan-button-hover-bg: #0d263d;
    --evcan-button-color: var(--ev-white);
    --evcan-warning: #994A00;
}

/* Coral background */
.bg-coral {
    --evcan-bg: var(--ev-red);
    --evcan-fg: var(--ev-white);
    /* AA large (4.0) → prefer for headings/buttons */
    --evcan-heading: var(--ev-white);
    --evcan-muted: color-mix(in srgb, var(--ev-white) 75%, black);
    --evcan-border: color-mix(in srgb, var(--ev-white) 25%, transparent);
    --evcan-link: var(--ev-white);
    --evcan-link-hov: var(--ev-teal);
    --evcan-accent: var(--ev-teal);
    --evcan-button-bg: var(--ev-white);
    --evcan-button-fg: var(--ev-blue);
    --evcan-button-border: var(--ev-white);
    --evcan-button-hover-bg: var(--ev-teal);
    --evcan-button-color: var(--ev-blue);
    --evcan-warning: #FFF5A5;
}

/* 4) Generic element bindings (apply contextual variables) */
section,
.section,
.block,
.panel,
.on-white,
body {
    background: var(--evcan-bg);
    color: var(--evcan-fg);
    border-color: var(--evcan-border);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--evcan-heading);
}

p,
li,
dt,
dd,
small {
    color: var(--evcan-fg);
}

.muted {
    color: var(--evcan-muted);
}

/* Enhanced Link Styling with Better Visibility */
a {
    color: var(--evcan-link);
    text-underline-offset: .12em;
    text-decoration: underline;
    transition: all 0.3s ease;
    position: relative;
}

a:hover,
a:focus {
    color: var(--evcan-link-hov);
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: .2em;
}

/* Special link styles for different contexts */
a.btn {
    text-decoration: none;
}

a.btn:hover,
a.btn:focus {
    text-decoration: none;
}

/* Link visibility improvements */
/* a:not(.btn) {
    font-weight: 500;
} */

a:not(.btn):hover {
    transform: translateY(-1px);
}

hr,
.divider,
.bordered {
    border-color: var(--evcan-border);
}

.card {
    background: color-mix(in srgb, var(--evcan-bg) 85%, #fff 15%);
    color: var(--evcan-fg);
    border: 1px solid var(--evcan-border);
}
.card{
    background: var(--evcan-fg);
    color: var(--evcan-bg);
    border-color: var(--evcan-border);
}
.card a, .card h2, .card h3, .card h4, .card h5, .card h6, .card small{
    color: var(--evcan-bg) !important;
}
/* .card svg path{
 fill: var(--evcan-bg) !important;
} */
input,
select,
textarea {
    background: color-mix(in srgb, var(--evcan-bg) 90%, #fff 10%);
    color: var(--evcan-fg);
    border: 1px solid var(--evcan-border);
}

input::placeholder,
textarea::placeholder {
    color: var(--evcan-muted);
}

.accent {
    color: var(--evcan-accent);
}

/* 5) Dynamic Buttons with Gradient Effects */
.btn {

    background: var(--evcan-button-bg);
    color: var(--evcan-button-fg);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.btn:hover {
    filter: contrast(1.1) brightness(.98);
}

.accordion .accordion-button{
    background: var(--evcan-button-fg);
    color: var(--evcan-button-bg);
}
.accordion .accordion-body {
    color: var(--evcan-button-bg);
}
/* Dynamic gradient button effect (similar to your reference) */
a.btn {
    border-color: transparent;
    background: linear-gradient(to right, var(--evcan-button-hover-bg) 50%, var(--evcan-button-bg) 50%);
    background-size: 200% 100%;
    background-position: right center;
    transition: background-position 0.3s ease, color 0.3s ease;
    color: var(--evcan-button-color);
}
a.btn svg path{
    stroke:var(--evcan-button-color);
}

a.btn:hover {

    color: var(--evcan-button-fg);
    background-position: left bottom !important;
    border-color: var(--evcan-button-hover-bg);
}
a.btn:hover svg path{
    stroke: var(--evcan-button-fg);
}
/* Button variants (from client sheet) */
.btn--blue-to-overlay {
    background-color: var(--ev-blue);
    color: var(--ev-white);
}

.btn--blue-to-overlay:hover,
.btn--blue-to-overlay:focus {
    background-color: #0d263d;
    color: var(--ev-white);
}

.btn--blue-to-green {
    background-color: var(--ev-blue);
    color: var(--ev-white);
}

.btn--blue-to-green:hover,
.btn--blue-to-green:focus {
    background-color: var(--ev-green);
    color: var(--ev-blue);
}

.btn--blue-to-white {
    background-color: var(--ev-blue);
    color: var(--ev-white);
}

.btn--blue-to-white:hover,
.btn--blue-to-white:focus {
    background-color: var(--ev-white);
    color: var(--ev-blue);
}

.btn--green-to-white {
    background-color: var(--ev-green);
    color: var(--ev-blue);
}

.btn--green-to-white:hover,
.btn--green-to-white:focus {
    background-color: var(--ev-white);
    color: var(--ev-blue);
}

.btn--green-to-blue {
    background-color: var(--ev-green);
    color: var(--ev-blue);
}

.btn--green-to-blue:hover,
.btn--green-to-blue:focus {
    background-color: var(--ev-blue);
    color: var(--ev-white);
}

.btn--white-to-blue {
    background-color: var(--ev-white);
    color: var(--ev-blue);
}

.btn--white-to-blue:hover,
.btn--white-to-blue:focus {
    background-color: var(--ev-blue);
    color: var(--ev-white);
}

.btn--white-to-green {
    background-color: var(--ev-white);
    color: var(--ev-blue);
}

.btn--white-to-green:hover,
.btn--white-to-green:focus {
    background-color: var(--ev-green);
    color: var(--ev-blue);
}

/* 6) Optional helpers */
.text-on-dark {
    color: var(--ev-white) !important;
}

.text-on-light {
    color: var(--ev-blue) !important;
}

.border-muted {
    border-color: var(--evcan-border) !important;
}

.bg-gray-100 {
    background-color: var(--ev-gray-100);
}

/* Enhanced button utilities */
.btn-outline {
    background: transparent;
    border: 2px solid var(--evcan-button-bg);
    color: var(--evcan-button-bg);
}

.btn-outline:hover {
    background: var(--evcan-button-bg);
    color: var(--evcan-button-fg);
}

.btn-ghost {
    background: transparent;
    border: 1px solid transparent;
    color: var(--evcan-link);
}

.btn-ghost:hover {
    background: color-mix(in srgb, var(--evcan-button-bg) 10%, transparent);
    border-color: var(--evcan-button-bg);
    color: var(--evcan-button-bg);
}

/* Link utilities */
.link-primary {
    color: var(--evcan-link);
    font-weight: 600;
}

.link-primary:hover {
    color: var(--evcan-link-hov);
}

.link-underline {
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 0.2em;
}

.link-no-underline {
    text-decoration: none;
}

.link-no-underline:hover {
    text-decoration: underline;
}
.text-warning {
    color: var(--evcan-warning) !important;
    /* font-weight: 600; optional for better prominence */
}

/** AL: start style standardization **/
.read-more,
.dev-detail a,
.news-electric-custom a,
section .container a,
section .container ul:not(.subscribe-list):not(.get-involved-list) li a,
.electric-trans-subheading a
{
    font-weight:bold;
    text-decoration:underline;
}

.read-more:hover,
.read-more:focus,
.dev-detail a:hover,
.dev-detail a:focus,
.news-electric-custom a:hover,
.news-electric-custom a:focus
{
    color: #FF8466 !important;
}

/* very specific patches */
.electric-trans-subheading a:hover,
.bg-aqua-blue a:not(.btn):hover,
.bg-lime-green a:not(.btn):hover
{
    color: var(--hoverBlue);
}
.bg-lime-green .bg-dark-blue a:hover{
    color: var(--green);
}
.stayloop-custom .subscribe-custom-btn:hover{
    color: var(--hoverBlue);
}
section.events-section .container h2 a{
    font-weight: normal;
}

.dlc-login-register .nav.nav-tabs .nav-item a{
    text-decoration:none;
}

.organization-btn a{
    text-decoration: none;
}

.organization-btn a{
    background: #fff;
}

.dashboard-admin .organization-btn .common-bnt a.btn-white:hover svg path {
    stroke: #1961c4;
}

.notifiaction-accordion ul{
    margin-block-start: 0 !important;
}
.notifiaction-accordion ul li{
    list-style: none;
}

/* restore ul > li default li styling*/
.news-electric-custom ul,
section .container ul:not(.subscribe-list):not(.get-involved-list):not(.nav.nav-tabs):not(#menu-dashboard-sidebar-menu-1):not(.dropdown-menu):not(#menu-dashboard-manufacturer-quick-links-1):not(#menu-dashboard-non-manufacturer-quick-links-1)
{
    display: block;
    list-style-type: disc;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0;
    margin-inline-end: 0;
    padding-inline-start: 40px;
    text-align:left;
}

section .container ul:not(.subscribe-list):not(.get-involved-list):not(.nav.nav-tabs):not(#menu-dashboard-sidebar-menu-1):not(.dropdown-menu):not(#menu-dashboard-manufacturer-quick-links-1):not(#menu-dashboard-non-manufacturer-quick-links-1) > br{
    display:none;
}

.news-electric-custom ul li,
section .container ul:not(.subscribe-list):not(.get-involved-list):not(.nav.nav-tabs):not(#menu-dashboard-sidebar-menu-1):not(.dropdown-menu):not(#menu-dashboard-manufacturer-quick-links-1):not(#menu-dashboard-non-manufacturer-quick-links-1) li
{
    display: list-item;
    text-align: match-parent;
    line-height:160%;
}
/** AL: end style standardization **/

/* AL: upcoming events */
#h-sorry-there-are-currently-no-upcoming-events {
    text-align:center;
}
.event-content .btn-tabbing{
    padding-left: 20px;
}

.events-section.upcomming-event .btn.btn-primary,
.events-section.past-event .btn.btn-primary {
    text-decoration: none;
    background-color: #27587D;
    border-radius: 50px;
    color: #fff;
    border-color: #27587D;
    height: 39px;
    width: 200px;
    font-family: Inter;
    font-weight: 500;
    font-size: 16px;
    line-height: 100%;
    text-align: center;
    background: linear-gradient(to right, #061e3d 50%, #27587D 50%);
    background-size: 200% 100%;
    background-position: right bottom;
    transition: all 0.3s ease;
    border: 1px solid #27587D;
}

.events-section.upcomming-event .btn.btn-primary:hover,
.events-section.past-event .btn.btn-primary:hover {
    background-position: left bottom;
    color: #fff;
    border-color: #061e3d;
}

.events-section.upcomming-event .button-group .common-bnt a:hover svg path,
.events-section.past-event .button-group .common-bnt a:hover svg path{
    stroke: #fff;
}
/* AL: upcoming events */