/* ===== CSS Variables (配色方案B) ===== */
:root {
    --primary: #0B2B3C;         /* Very dark blue-green */
    --accent: #2A9D8F;          /* Teal / Cyan */
    --accent-light: #6EC6A0;    /* Light mint */
    --bg-light: #F5FAF8;        /* Very light background */
    --text-dark: #0B2B3C;
    --text-muted: #4A6363;
    --white: #FFFFFF;
    --shadow: 0 12px 40px rgba(11, 43, 60, 0.08);
    --shadow-hover: 0 20px 60px rgba(11, 43, 60, 0.14);
    --radius: 20px;
    --radius-sm: 12px;
    --transition: 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);

    /* ponytail: separate "canvas" vars for text/backgrounds that sit directly on the page
       (hero, section titles, team/partner rows) - white CARDS stay hardcoded #fff and are
       left alone, so dark mode only needs to flip what's actually on the canvas. */
    --canvas-bg: var(--white);
    --canvas-text: var(--text-dark);
    --canvas-heading: var(--primary);
    --canvas-muted: var(--text-muted);
}
:root[data-theme="dark"] {
    --canvas-bg: #0B1620;
    --canvas-text: #DCEAE6;
    --canvas-heading: #F1FAF7;
    --canvas-muted: #9FB8B2;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    background-color: var(--canvas-bg);
    color: var(--canvas-text);
    line-height: 1.6;
    scroll-behavior: smooth;
    transition: background-color 0.3s ease, color 0.3s ease;
}

a {
    text-decoration: none;
    color: inherit;
}
a:hover {
    color: var(--accent);
}

/* ===== Scrollbar ===== */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--bg-light); }
::-webkit-scrollbar-thumb { background: var(--accent); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: var(--primary); }

/* ===== Components ===== */
.section-padding { padding: 100px 0; }
.section-title {
    font-weight: 700;
    font-size: 2.6rem;
    letter-spacing: -0.02em;
    color: var(--canvas-heading);
    position: relative;
    display: inline-block;
}
.section-title::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 0;
    width: 60px;
    height: 4px;
    background: linear-gradient(90deg, var(--accent), var(--accent-light));
    border-radius: 4px;
}
.section-title.text-center::after { left: 50%; transform: translateX(-50%); }
.section-subtitle {
    font-size: 1.15rem;
    color: var(--canvas-muted);
    max-width: 640px;
    margin: 0 auto;
}
.lede-text { color: var(--canvas-muted); }

.badge-green {
    background: var(--accent-light);
    color: var(--primary);
    font-weight: 600;
    padding: 6px 18px;
    border-radius: 30px;
    font-size: 0.85rem;
    letter-spacing: 0.3px;
}

.btn-primary-custom {
    background: var(--accent);
    border: none;
    color: #fff;
    padding: 14px 40px;
    border-radius: 50px;
    font-weight: 600;
    font-size: 1rem;
    transition: var(--transition);
    box-shadow: 0 8px 24px rgba(42, 157, 143, 0.3);
}
.btn-primary-custom:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 40px rgba(42, 157, 143, 0.4);
    background: var(--primary);
    color: #fff;
}
.btn-outline-custom {
    border: 2px solid var(--accent);
    color: var(--accent);
    padding: 12px 36px;
    border-radius: 50px;
    font-weight: 600;
    font-size: 1rem;
    transition: var(--transition);
    background: transparent;
}
.btn-outline-custom:hover {
    background: var(--accent);
    color: #fff;
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(42, 157, 143, 0.25);
}

/* ===== Navbar (floating island, centered) ===== */
.navbar-custom {
    /* ponytail: the outer bar was fully transparent, only the inner pill had a frosted
       background - so scrolled content showed through sharp and readable in the gap above
       the pill and the margins beside it on wide screens. Blur the whole bar instead, the
       pill on top still reads as the "island" via its stronger opacity/shadow. */
    background: rgba(255,255,255,0.35);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: none;
    border-bottom: none;
    padding: 16px 0 0;
    transition: transform 0.35s ease, background-color 0.3s ease;
    transform: translateY(0);
}
:root[data-theme="dark"] .navbar-custom { background: rgba(11,22,32,0.35); }
.navbar-custom.nav-hidden {
    transform: translateY(-140%);
}
@media (prefers-reduced-motion: reduce) {
    .navbar-custom { transition: none; }
}
/* the actual pill - Bootstrap's .container becomes the island itself */
.navbar-custom .container {
    background: rgba(255,255,255,0.88);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    box-shadow: 0 10px 40px rgba(11,43,60,0.10);
    border: 1px solid rgba(42, 157, 143, 0.1);
    border-radius: 20px;
    max-width: 980px;
    padding: 8px 10px 8px 20px;
    transition: var(--transition);
}
@media (min-width: 992px) {
    .navbar-custom .container { border-radius: 999px; }
    /* Logo left, page links centered in the remaining space, dark-mode toggle + Join pinned
       right - was one ul with ms-auto shoving everything against the right edge. */
    #navMenu { flex: 1; }
    .nav-links-center { flex: 1; justify-content: center; }
}
.navbar-custom .navbar-brand {
    font-weight: 700;
    font-size: 1.3rem;
    color: var(--primary);
    letter-spacing: -0.5px;
    display: flex;
    align-items: center;
}
.navbar-custom .navbar-brand .logo-placeholder {
    display: inline-block;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    object-fit: cover;
    margin-right: 6px;
}
.navbar-custom .nav-link {
    font-weight: 500;
    color: #2d3f3f;
    padding: 8px 16px;
    border-radius: 30px;
    transition: var(--transition);
    font-size: 0.92rem;
}
.navbar-custom .nav-link:hover,
.navbar-custom .nav-link.active {
    color: var(--accent);
    background: rgba(42, 157, 143, 0.08);
}
/* Join stands out as the island's one CTA */
.navbar-custom .nav-link-cta {
    background: var(--accent);
    color: #fff !important;
    padding: 8px 22px;
    margin-left: 4px;
}
.navbar-custom .nav-link-cta:hover {
    background: var(--primary);
    color: #fff !important;
}
.navbar-toggler { border: none; padding: 6px 10px; }
.navbar-toggler:focus { box-shadow: none; }
.theme-toggle {
    width: 38px;
    height: 38px;
    border: none;
    border-radius: 50%;
    background: rgba(42, 157, 143, 0.1);
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    cursor: pointer;
    transition: var(--transition);
    margin: 0 2px;
}
.theme-toggle:hover { background: rgba(42, 157, 143, 0.2); }
/* Mobile: toggle sits right next to the hamburger icon, always visible - it used to be
   buried inside the collapsed dropdown where you had to open the menu to find it. */
.navbar-custom .container { display: flex; align-items: center; }
.theme-toggle { order: 2; margin-left: auto; }
.navbar-toggler { order: 3; }
#navMenu { order: 4; }
@media (min-width: 992px) {
    /* Desktop: back to sitting beside Join, at the end of the centered-links row. */
    .theme-toggle { order: 5; margin-left: 0; }
    #navMenu { order: 4; }
}

/* ===== Hero ===== */
.hero {
    background: linear-gradient(165deg, #ffffff 0%, #f0f8f5 45%, #e6f3ef 100%);
    padding: 120px 0 80px;
    position: relative;
    overflow: hidden;
    min-height: 90vh;
    display: flex;
    align-items: center;
    transition: background 0.3s ease;
}
:root[data-theme="dark"] .hero {
    background: linear-gradient(165deg, #0B1620 0%, #0d1e26 45%, #0f2530 100%);
}
.hero h1 {
    font-weight: 700;
    font-size: 3.8rem;
    letter-spacing: -0.03em;
    line-height: 1.1;
    color: var(--canvas-heading);
}
.hero h1 .highlight {
    background: linear-gradient(135deg, var(--accent), var(--accent-light));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.hero p {
    font-size: 1.25rem;
    color: var(--canvas-muted);
    max-width: 540px;
    margin-top: 20px;
}
.hero .hero-stats {
    display: flex;
    gap: 48px;
    margin-top: 40px;
}
.hero .hero-stats .stat-item { text-align: center; }
.hero .hero-stats .stat-number {
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--canvas-heading);
}
.hero .hero-stats .stat-label { font-size: 0.9rem; color: var(--canvas-muted); font-weight: 500; }

.hero-image-placeholder {
    width: 100%;
    max-width: 480px;
    aspect-ratio: 1/1;
    background: linear-gradient(145deg, var(--accent-light), #b8dde8);
    border-radius: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 8rem;
    color: var(--primary);
    box-shadow: var(--shadow);
    position: relative;
    overflow: hidden;
}

/* Real photos dropped into icon-placeholder containers */
.project-img img,
.news-img img,
.hero-image-placeholder img,
.about-image-placeholder img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
}
.floating-icon {
    position: absolute;
    background: rgba(255,255,255,0.7);
    backdrop-filter: blur(8px);
    border-radius: 50%;
    padding: 18px;
    box-shadow: var(--shadow);
    font-size: 1.6rem;
    color: var(--accent);
}

/* ===== Cards ===== */
.card-glass {
    background: rgba(255,255,255,0.7);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(255,255,255,0.5);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    transition: var(--transition);
    height: 100%;
    padding: 32px 28px;
}
.card-glass:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-hover);
    border-color: rgba(42, 157, 143, 0.15);
}
/* ponytail: was scoped to ".card-glass .icon-circle" but the class gets reused standalone
   (Programs pillars, About partner rows) - unscoped so it works wherever it's dropped. */
.icon-circle {
    width: 64px;
    height: 64px;
    min-width: 64px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent-light), #d4ecf7);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    color: var(--primary);
    margin-bottom: 20px;
}
.card-glass h5 { font-weight: 700; font-size: 1.25rem; color: var(--primary); }
.card-glass p { color: var(--text-muted); font-size: 0.95rem; }

/* Home "Our Areas" cards double as links into the matching Programs section */
a.card-glass { text-decoration: none; color: inherit; }
a.card-glass .area-card-link-hint { color: var(--accent); font-size: 0.85rem; font-weight: 600; margin-top: 10px; opacity: 0; transition: var(--transition); }
a.card-glass:hover .area-card-link-hint { opacity: 1; }

/* ===== Project Cards ===== */
.project-card {
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow);
    transition: var(--transition);
    background: #fff;
    border: 1px solid rgba(0,0,0,0.03);
    height: 100%;
}
.project-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-hover);
}
.project-card .project-img {
    height: 210px;
    background: linear-gradient(145deg, var(--accent-light), #d4ecf7);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 4rem;
    color: var(--primary);
}
.project-card .project-body { padding: 24px 26px 28px; }
.project-card .project-body h5 { font-weight: 700; color: var(--primary); }
.project-card .project-body p { color: var(--text-muted); font-size: 0.95rem; }
.project-tag {
    display: inline-block;
    background: var(--accent-light);
    color: var(--primary);
    font-size: 0.75rem;
    font-weight: 600;
    padding: 4px 14px;
    border-radius: 30px;
    margin-right: 6px;
    margin-bottom: 4px;
}

/* ===== About ===== */
.about-image-placeholder {
    background: linear-gradient(145deg, var(--accent-light), #d4ecf7);
    border-radius: var(--radius);
    overflow: hidden;
    height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 6rem;
    color: var(--primary);
    box-shadow: var(--shadow);
}
.team-member { text-align: center; transition: var(--transition); }
.team-member .avatar {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent-light), #d4ecf7);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.8rem;
    color: var(--primary);
    margin: 0 auto 16px;
    box-shadow: 0 8px 24px rgba(42, 157, 143, 0.12);
}
.team-member h6 { font-weight: 700; color: var(--canvas-heading); }
.team-member p { color: var(--canvas-muted); font-size: 0.9rem; }
.team-member-note { font-size: 0.82rem; color: var(--canvas-muted); margin-top: 4px; }

/* About page: partners list, meet-us banner, FAQ accordion */
.partner-row { display: flex; align-items: flex-start; gap: 16px; height: 100%; }
.partner-row .icon-circle { width: 52px; height: 52px; min-width: 52px; font-size: 1.3rem; margin-bottom: 0; }
.partner-row h6 { font-weight: 700; color: var(--canvas-heading); margin-bottom: 4px; }
.partner-row p { color: var(--canvas-muted); font-size: 0.88rem; margin-bottom: 0; }

.meet-us-banner {
    background: var(--bg-light);
    border: 1px solid rgba(42,157,143,0.15);
    border-radius: var(--radius);
    padding: 28px 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}
.meet-us-banner h4 { color: var(--primary); font-weight: 700; margin-bottom: 6px; }
.meet-us-banner p { color: var(--text-muted); }

.accordion-item { border-color: rgba(42,157,143,0.15); }
.accordion-button { font-weight: 600; color: var(--primary); }
.accordion-button:not(.collapsed) { background: var(--accent-light); color: var(--primary); }
.accordion-button:focus { box-shadow: 0 0 0 3px rgba(42,157,143,0.15); }

/* ===== News Cards ===== */
.news-card {
    background: #fff;
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow);
    transition: var(--transition);
    height: 100%;
    border: 1px solid rgba(0,0,0,0.02);
}
.news-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-hover);
}
.news-card .news-img {
    height: 180px;
    background: linear-gradient(145deg, #d4ecf7, var(--accent-light));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3.6rem;
    color: var(--primary);
}
.news-card .news-body { padding: 22px 24px 26px; }
.news-card .news-body .news-date {
    font-size: 0.8rem;
    color: #7a9494;
    font-weight: 500;
}
.news-card .news-body h6 { font-weight: 700; color: var(--primary); margin: 8px 0 6px; }
.news-card .news-body p { color: var(--text-muted); font-size: 0.95rem; }

/* ===== Contact / Join Form ===== */
.contact-form {
    background: #fff;
    padding: 48px 40px;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    border: 1px solid rgba(0,0,0,0.02);
}
.contact-form .form-control {
    border: 1.5px solid #e0e8e8;
    border-radius: var(--radius-sm);
    padding: 14px 18px;
    font-size: 0.95rem;
    transition: var(--transition);
    background: var(--bg-light);
}
.contact-form .form-control:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 4px rgba(42, 157, 143, 0.08);
    background: #fff;
}
.contact-form .form-label { font-weight: 600; color: var(--primary); font-size: 0.9rem; }

/* ===== Footer ===== */
.footer-custom {
    background: var(--primary);
    color: rgba(255,255,255,0.7);
    padding: 60px 0 30px;
}
.footer-custom h6 { color: #fff; font-weight: 700; margin-bottom: 20px; }
.footer-custom a { color: rgba(255,255,255,0.6); transition: var(--transition); }
.footer-custom a:hover { color: #fff; }
.footer-custom .social-links a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(255,255,255,0.06);
    color: rgba(255,255,255,0.7);
    margin-right: 10px;
    transition: var(--transition);
}
.footer-custom .social-links a:hover {
    background: var(--accent);
    color: #fff;
    transform: translateY(-3px);
}
.footer-custom .footer-bottom {
    border-top: 1px solid rgba(255,255,255,0.06);
    padding-top: 24px;
    margin-top: 40px;
    font-size: 0.9rem;
}
.newsletter-feedback {
    margin-top: 10px;
    font-size: 0.85rem;
    font-weight: 600;
}
.newsletter-feedback.is-success { color: var(--accent-light); }
.newsletter-feedback.is-error { color: #e8968c; }

/* ===== Gallery — masonry photo wall (deliberately different from the Events card grid) ===== */
.gallery-filters {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-bottom: 40px;
}
.gallery-filters button {
    border: 1.5px solid rgba(42, 157, 143, 0.25);
    background: #fff;
    color: var(--text-muted);
    font-weight: 600;
    font-size: 0.9rem;
    padding: 8px 22px;
    border-radius: 30px;
    transition: var(--transition);
}
.gallery-filters button:hover { border-color: var(--accent); color: var(--accent); }
.gallery-filters button.active { background: var(--accent); border-color: var(--accent); color: #fff; }

.gallery-masonry {
    column-count: 3;
    column-gap: 20px;
}
.gallery-item {
    break-inside: avoid;
    margin-bottom: 20px;
    position: relative;
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow);
    transition: var(--transition);
}
.gallery-item:hover { box-shadow: var(--shadow-hover); transform: translateY(-4px); }
.gallery-item img { display: block; width: 100%; height: auto; }
.gallery-item .gallery-caption {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    padding: 22px 20px 16px;
    background: linear-gradient(0deg, rgba(11,43,60,0.88) 0%, rgba(11,43,60,0) 100%);
    color: #fff;
    opacity: 0;
    transform: translateY(8px);
    transition: var(--transition);
}
.gallery-item:hover .gallery-caption { opacity: 1; transform: translateY(0); }
.gallery-item .gallery-caption h6 { font-weight: 700; margin-bottom: 2px; }
.gallery-item .gallery-caption span { font-size: 0.8rem; opacity: 0.85; }

@media (max-width: 992px) { .gallery-masonry { column-count: 2; } }
@media (max-width: 576px) { .gallery-masonry { column-count: 1; } }

/* Save/favourite button - state persisted in localStorage (js/storage.js) */
.gallery-fav-btn {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 2;
    width: 38px;
    height: 38px;
    border: none;
    border-radius: 50%;
    background: rgba(11,43,60,0.45);
    backdrop-filter: blur(4px);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    transition: var(--transition);
    cursor: pointer;
}
.gallery-fav-btn:hover { background: rgba(11,43,60,0.7); transform: scale(1.08); }
.gallery-fav-btn.is-saved { color: #ff5c7a; }
.gallery-fav-btn.is-saved i { font-weight: 900; }
.gallery-filters button i.fa-heart { color: #ff5c7a; }
.gallery-filter-status { color: var(--accent); font-size: 0.85rem; margin: 10px 0 24px; }

/* Anchor targets (Home "Our Areas" cards -> Programs sections) need room for the fixed island nav */
#renewable-energy, #electric-vehicles, #smart-cities, #circular-economy { scroll-margin-top: 110px; }

/* Events page: cards open a full-article modal (js/api.js EVENTS_DATA) */
.news-card { cursor: pointer; }
.news-readmore { display: inline-block; margin-top: 8px; color: var(--accent); font-size: 0.85rem; font-weight: 600; }
/* Bootstrap modals always render on a white surface regardless of site theme, so their text
   needs a fixed color, not the canvas vars that flip with body (was inheriting light text
   onto the white modal in dark mode - unreadable). */
.modal-content { color: var(--text-dark); }
.event-modal-img { width: 100%; max-height: 320px; object-fit: cover; border-radius: var(--radius-sm); margin-bottom: 16px; }
.event-modal-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 10px 20px;
    background: var(--bg-light);
    border-radius: var(--radius-sm);
    padding: 16px 18px;
    margin-bottom: 18px;
}
.event-fact { display: flex; align-items: center; gap: 10px; font-size: 0.88rem; color: var(--text-dark); }
.event-fact i { color: var(--accent); width: 16px; text-align: center; }
#eventModalBody p { color: var(--text-muted); margin-bottom: 1rem; }

/* Gallery image click-to-enlarge lightbox */
.gallery-item img { cursor: zoom-in; }
.lightbox-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: rgba(8,20,26,0.92);
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 40px 20px;
}
.lightbox-overlay.show { display: flex; }
.lightbox-overlay img {
    max-width: min(90vw, 1100px);
    max-height: 78vh;
    object-fit: contain;
    border-radius: var(--radius-sm);
    box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}
.lightbox-caption { color: rgba(255,255,255,0.85); margin-top: 16px; font-size: 0.95rem; text-align: center; }
.lightbox-close {
    position: absolute;
    top: 24px;
    right: 28px;
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 50%;
    background: rgba(255,255,255,0.12);
    color: #fff;
    font-size: 1.2rem;
    cursor: pointer;
    transition: var(--transition);
}
.lightbox-close:hover { background: rgba(255,255,255,0.25); }

/* ===== Malaysia Energy Potential — live radial gauge panel (deliberately not another stat-tile row) ===== */
@property --p {
    syntax: '<number>';
    inherits: true;
    initial-value: 0;
}
.energy-potential-panel {
    border-radius: 28px;
    overflow: hidden;
    box-shadow: var(--shadow);
}
.ep-sky {
    padding: 44px 40px;
    background: linear-gradient(160deg, #ffd97a 0%, #7ec8e3 45%, #2A9D8F 100%);
    color: var(--primary);
    transition: background 1.4s ease, color 1.4s ease;
    position: relative;
    overflow: hidden;
}
.energy-potential-panel.is-night .ep-sky {
    background: linear-gradient(160deg, #0B2B3C 0%, #17324a 45%, #1c2b4a 100%);
    color: #fff;
}
/* faint stars, top-right corner only - a fixed-size band, not stretched across
   the whole (variable-height) panel, otherwise they read as stray dots rather
   than a starfield once the panel grows taller than the gradient was tuned for */
.ep-sky::before {
    content: '';
    position: absolute;
    top: 0; right: 0;
    width: 55%;
    height: 220px;
    opacity: 0;
    transition: opacity 1.4s ease;
    background-image:
        radial-gradient(1.5px 1.5px at 15% 25%, rgba(255,255,255,0.9), transparent),
        radial-gradient(1.5px 1.5px at 45% 15%, rgba(255,255,255,0.7), transparent),
        radial-gradient(1px 1px at 65% 45%, rgba(255,255,255,0.6), transparent),
        radial-gradient(1.5px 1.5px at 85% 30%, rgba(255,255,255,0.8), transparent),
        radial-gradient(1px 1px at 30% 55%, rgba(255,255,255,0.5), transparent),
        radial-gradient(1.5px 1.5px at 90% 65%, rgba(255,255,255,0.6), transparent),
        radial-gradient(1px 1px at 55% 70%, rgba(255,255,255,0.5), transparent);
    pointer-events: none;
}
.energy-potential-panel.is-night .ep-sky::before { opacity: 1; }

.ep-time {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    font-weight: 600;
    margin-bottom: 32px;
    font-size: 1.05rem;
    position: relative;
    z-index: 1;
}
.ep-daynight {
    padding: 4px 14px;
    border-radius: 30px;
    background: rgba(255,255,255,0.32);
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.ep-grid {
    display: grid;
    grid-template-columns: auto auto;
    justify-content: center;
    gap: 52px;
    align-items: center;
    position: relative;
    z-index: 1;
    max-width: 640px;
    margin: 0 auto;
}
.ep-gauge-wrap { text-align: center; }
.ep-gauge {
    --p: 0;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: conic-gradient(#fff calc(var(--p) * 1%), rgba(255,255,255,0.22) 0);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    transition: --p 1.4s ease;
}
.ep-gauge-inner {
    width: 142px;
    height: 142px;
    border-radius: 50%;
    background: rgba(11,43,60,0.16);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.ep-gauge-value { font-size: 2.1rem; font-weight: 800; line-height: 1; }
.ep-gauge-unit { font-size: 0.72rem; opacity: 0.85; margin-top: 4px; text-align: center; }
.ep-gauge-label { margin-top: 16px; font-weight: 600; font-size: 0.95rem; }

/* CSS Grid, same alignment guarantee as a table (each column track sizes to
   the widest cell in that column across every row) but the column count can
   just be redefined per breakpoint below. `display:contents` on .ep-stat
   dissolves that wrapper for layout purposes so its icon + text children
   become direct grid items of .ep-stats. */
.ep-stats {
    display: grid;
    grid-template-columns: auto minmax(120px, 1fr);
    gap: 20px 24px;
}
.ep-stat { display: contents; }
.ep-fan, .ep-icon-sm {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: rgba(255,255,255,0.24);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
}
.ep-stat-text { align-self: center; text-align: left; }
.ep-fan i { display: inline-block; animation: ep-spin 3s linear infinite; }
.ep-stat-value { font-size: 1.3rem; font-weight: 700; white-space: nowrap; }
.ep-stat-label { font-size: 0.8rem; opacity: 0.8; white-space: nowrap; }

@keyframes ep-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    .ep-fan i { animation: none; }
    .ep-gauge { transition: none; }
}

/* 2x2 once there's room for a pair of columns */
@media (min-width: 768px) {
    .ep-stats { grid-template-columns: repeat(2, auto minmax(110px, 160px)); gap: 20px 32px; }
}
/* wide screens: one row of all 4 stats, panel widens a bit to fit it comfortably */
@media (min-width: 1400px) {
    .ep-grid { max-width: 1040px; }
    .ep-stats { grid-template-columns: repeat(4, auto minmax(90px, 150px)); gap: 16px 24px; }
}
@media (max-width: 768px) {
    .ep-grid { grid-template-columns: 1fr; justify-items: center; text-align: center; }
    .ep-stat-text { text-align: left; }
}

.solar-calc {
    background: #fff;
    border: 1px solid rgba(0,0,0,0.04);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 28px 32px;
}
/* keep the same width as the panel above and center it, instead of the row
   stretching edge-to-edge with a big gap between the copy and the calculator
   once the container gets wide */
.solar-calc > .row {
    max-width: 900px;
    margin: 0 auto;
}
@media (min-width: 1400px) {
    .solar-calc > .row { max-width: 1040px; }
}
.solar-calc .form-control {
    border: 1.5px solid #e0e8e8;
    border-radius: var(--radius-sm);
    background: var(--bg-light);
}
.solar-calc .form-control:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 4px rgba(42, 157, 143, 0.08);
    background: #fff;
}

/* ===== Programs page ===== */
.program-tags { margin-top: 16px; }

.pillar-photo {
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow);
    aspect-ratio: 4/3;
}
.pillar-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

.pillar-tile {
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow);
    background: #fff;
    height: 100%;
}
.pillar-tile img { width: 100%; height: 220px; object-fit: cover; display: block; }
.pillar-tile-body { padding: 26px 28px; }
.pillar-tile-body p { color: var(--text-muted); font-size: 0.96rem; }

/* plain inline stat row - deliberately not a 3rd grid-of-cards on this page */
.stat-row {
    display: flex;
    gap: 40px;
    flex-wrap: wrap;
}
.stat-block-num { font-size: 2.4rem; font-weight: 800; color: #fff; line-height: 1; }
.stat-block-label { font-size: 0.85rem; color: rgba(255,255,255,0.65); margin-top: 6px; }
@media (max-width: 576px) { .stat-row { gap: 28px; } }

/* ===== Community page ===== */
.community-panel {
    background: #fff;
    border: 1px solid rgba(0,0,0,0.04);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 28px;
    height: 100%;
}
.mastodon-feed { max-height: 520px; overflow-y: auto; }
.mastodon-post {
    display: flex;
    gap: 12px;
    padding: 14px 4px;
    border-bottom: 1px solid rgba(0,0,0,0.06);
}
.mastodon-post:last-child { border-bottom: none; }
.mastodon-post img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    flex-shrink: 0;
    object-fit: cover;
}
.mastodon-post-author { font-weight: 700; font-size: 0.9rem; color: var(--primary); }
.mastodon-post-handle { font-size: 0.78rem; color: var(--text-muted); }
.mastodon-post-content { font-size: 0.9rem; color: var(--text-dark); margin-top: 4px; word-break: break-word; }
.mastodon-post-time { font-size: 0.75rem; color: var(--text-muted); margin-top: 6px; }

.feed-frame { position: relative; min-height: 480px; }
.skeleton-feed { padding-top: 4px; }
.skeleton-line {
    height: 14px;
    border-radius: 6px;
    background: linear-gradient(90deg, rgba(0,0,0,0.06) 25%, rgba(0,0,0,0.12) 37%, rgba(0,0,0,0.06) 63%);
    background-size: 400% 100%;
    animation: skeleton-shimmer 1.6s ease-in-out infinite;
    margin-bottom: 12px;
}
@keyframes skeleton-shimmer {
    0% { background-position: 100% 50%; }
    100% { background-position: 0 50%; }
}
@media (prefers-reduced-motion: reduce) {
    .skeleton-line { animation: none; }
}
.feed-fallback-link {
    display: none;
    margin-top: 14px;
    font-weight: 600;
    color: var(--accent);
    font-size: 0.9rem;
}
.feed-fallback-link.show { display: inline-block; }

.compare-row { display: flex; flex-direction: column; gap: 16px; }
.compare-item {
    display: flex;
    align-items: center;
    gap: 16px;
    background: #fff;
    padding: 18px 20px;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow);
}
.compare-title { font-weight: 700; color: var(--primary); }
.compare-sub { font-size: 0.85rem; color: var(--text-muted); }

/* ===== Cookie consent banner - site-wide, dismissal remembered via cookie (js/storage.js) ===== */
.cookie-banner {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 1200;
    background: var(--primary);
    color: rgba(255,255,255,0.9);
    padding: 18px 24px;
    box-shadow: 0 -8px 30px rgba(0,0,0,0.15);
    transform: translateY(100%);
    transition: transform 0.4s ease;
}
.cookie-banner.show { transform: translateY(0); }
.cookie-banner-inner {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
}
.cookie-banner p { margin: 0; font-size: 0.9rem; max-width: 640px; }
@media (prefers-reduced-motion: reduce) { .cookie-banner { transition: none; } }

/* ===== Draft-restored notice on the Contact form (localStorage) ===== */
.draft-notice {
    display: none;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: var(--bg-light);
    border: 1px solid rgba(42,157,143,0.2);
    border-radius: var(--radius-sm);
    padding: 12px 16px;
    margin-bottom: 18px;
    font-size: 0.88rem;
    color: var(--primary);
}
.draft-notice.show { display: flex; }
.draft-notice button {
    border: none;
    background: none;
    color: var(--accent);
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
}