/* ============================================================
   LCPPV Page (post 84946) — scoped overrides for all sections
   Loaded by functions.php only on this page.
   ============================================================ */

/* (Hero alignment override removed — theme default on services-child pages already
   left-aligns the H1 with the sidebar's left edge.) */

/* ---- Hide theme's empty section-starter so slogan banner sits directly under hero ---- */
.page-id-84946 .section-starter:empty,
.page-id-84946 .section-starter .container.related-section .row:empty,
.page-id-84946 .section-starter:has(.row:empty) {
    display: none !important;
}
/* Belt-and-suspenders: hide section-starter on LCPPV unconditionally since intro
   content is now rendered via Content Builder, not via the legacy introduction field 
.page-id-84946 .section-starter {
    display: none !important;
}
*/

/* ---- SLOGAN BANNER (red) — actual class on live is .custom-banner (rendered by
   template-parts/content-hero.php with inline padding: 30px 0). Override here
   to shrink banner ~⅓ shorter and reduce text size by 40%. */
.page-id-84946 section.custom-banner {
    padding: 18px 0 !important;       /* was 30px (inline in content-hero.php) */
}
.page-id-84946 section.custom-banner h3 {
    font-size: 18px !important;
    line-height: 24px !important;
}
@media (max-width: 767px) {
    .page-id-84946 section.custom-banner { padding: 12px 0 !important; }
    .page-id-84946 section.custom-banner h3 { font-size: 14px !important; line-height: 18px !important; }
}

/* ---- (Legacy: .lcppv-slogan-banner — class doesn't exist on current live page,
   kept for safety in case any older template renders it) ---- */
.page-id-84946 .lcppv-slogan-banner {
    background: #D21C23;
    width: 100%;
    margin: 0;
    padding: 18px 0;                 /* reduced from 28px → banner ~⅓ shorter */
}
/* Inherits theme's .container max-width (1100px) + Bootstrap padding so the
   text starts exactly at the sidebar's left edge */
.page-id-84946 .lcppv-slogan-banner .container {
    width: 100%;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}
.page-id-84946 .lcppv-slogan-banner .container p {
    color: #fff;
    margin: 0 !important;          /* override theme default p margin */
    padding: 0 !important;
    font-size: 11px;                /* reduced from 18px (-40%) */
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-align: left;
    line-height: 1;                /* tight line-height so the padding above/below dominates */
}
@media (max-width: 767px) {
    .page-id-84946 .lcppv-slogan-banner { padding: 12px 0; }
    .page-id-84946 .lcppv-slogan-banner .container p { font-size: 8px; }
}

/* ---- BOTTOM CTA BANNER (Build a More Reliable Local PV Model) — full width ---- */
.page-id-84946 .lcppv-bottom-cta {
    background: #D21C23;
    color: #fff;
    text-align: center;
    padding: 60px 20px;
    width: 100%;
    margin: 0;
}
.page-id-84946 .lcppv-bottom-cta h2 {
    color: #fff !important;
    font-size: 30px;
    font-weight: 600;
    margin: 0 0 18px;
}
.page-id-84946 .lcppv-bottom-cta p {
    color: #fff;
    font-size: 16px;
    line-height: 1.55;
    margin: 0 auto 26px;
    max-width: 900px;
}
.page-id-84946 .lcppv-bottom-cta__btn {
    display: inline-block;
    background: #fff;
    color: #D21C23 !important;
    padding: 14px 36px;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    border-radius: 2px;
    border: 2px solid #fff;
    transition: background .2s, color .2s;
}
.page-id-84946 .lcppv-bottom-cta__btn:hover {
    background: transparent;
    color: #fff !important;
}

/* (Sidebar active link color override removed — theme default #009FDF is correct) */

/* ---- COUNTER style — fix #5: only override COLOR to PV Blue (other service-child pages
   show orange). All sizing, weight, and spacing inherits from theme defaults so it
   matches the rest of the site. */
.page-id-84946 .counter-section .count-title.count-number {
    color: #66C4EC !important;
    font-size: 48px;
    letter-spacing:-1%;
}

/* ---- TWO-CARD BLOCK (fix #6) — strip theme's inner border, restore Figma look ---- */

/* Tighten spacing before two-card block (counter has bottom-56 = 56px; Figma is closer) */
.page-id-84946 .main-content .builder-feld.two-card-block {
    margin-top: -28px; /* reduce 56px gap to ~28px */
}

.page-id-84946 .two-card-block__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin: 30px 0;
}
.page-id-84946 .two-card-block__card {
    padding: 36px 32px;
    border-radius: 0px;
    min-height: auto;
    display: flex;
    flex-direction: column;
    box-shadow: none !important;
    outline: none !important;
}
.page-id-84946 .two-card-block__card .two-card-block__inner {
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* WHITE card: subtle gray border (Figma) */
.page-id-84946 .two-card-block__card--white {
    background: #fff;
/*    border: 1px solid #e6e6e6 !important;*/
box-shadow: 0px 0px 10px 0px #00000021 !important;
}

/* RED card: no border, force title to white (theme paints it PV Blue) */
.page-id-84946 .two-card-block__card--red {
    background: #D21C23;
    border: none !important;
    box-shadow: 0px 0px 10px 0px #00000021 !important;

}
.page-id-84946 .two-card-block__card--red .two-card-block__title,
.page-id-84946 .two-card-block__card--red h3 { color: #fff !important; }

/* RED card body text — force white (theme paragraph default is dark gray which is unreadable on red) */
.page-id-84946 .two-card-block__card--red .two-card-block__content,
.page-id-84946 .two-card-block__card--red .two-card-block__content *,
.page-id-84946 .two-card-block__card--red .two-card-block__content p { color: #fff !important; }
/* (Body weight intentionally NOT overridden — theme default 400 reads better on the red card than the 300 I tried, which looked greyed-out on red.) */
/* CTA link positioning + colors */
.page-id-84946 .two-card-block__cta {
    margin-top: auto;
    margin-bottom: 0;
}
.page-id-84946 .two-card-block__card--white .two-card-block__cta a .more-link { color: #009FDF; }
.page-id-84946 .two-card-block__card--red   .two-card-block__cta a .more-link { color: #fff; text-decoration: underline; }

@media (max-width: 767px) {
    .page-id-84946 .two-card-block__row { grid-template-columns: 1fr; }
    .page-id-84946 .two-card-block__card { padding: 32px 24px; min-height: auto; }
}

/* ---- PV WHEEL (Figma SVG, hover/click interactions) — FULL WIDTH BREAKOUT ---- */
body.page-id-84946 { overflow-x: hidden; }

/* Force all parent containers to allow children to overflow horizontally */
.page-id-84946 .child-page-content-section,
.page-id-84946 .child-page-content-section > .container,
.page-id-84946 .child-page-content-section > .container > .row,
.page-id-84946 .main-content,
.page-id-84946 .builder-feld {
    overflow: visible !important;
}

/* Full-bleed wheel section — escapes whatever container it's nested in */
.page-id-84946 .lcppv-wheel-section {
    background: #f7f6f2;
    padding: 60px 0;
    width: 100vw;
    position: relative;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    left: 0 !important;
    right: 0 !important;
}
.page-id-84946 .pv-wheel-wrap {
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 40px;
}
.page-id-84946 .lcppv-wheel-heading {
    color: #003265;
    font-size: 32px;
    font-weight: 400;
    text-align: center;
    margin: 0 0 8px;
}
.page-id-84946 .lcppv-wheel-subtitle {
    text-align: center;
    color: #666;
    margin: 0 0 30px;
    font-size: 16px;
}
.page-id-84946 .pv-wheel-wrap {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
}
.page-id-84946 .pv-wheel-wrap svg {
    width: 100%;
    height: auto;
    display: block;
}
.page-id-84946 .pv-wheel-wrap .pv-seg {
    cursor: pointer;
    transition: opacity .25s ease;
}
.page-id-84946 .pv-wheel-wrap.has-hover .pv-seg:not(.is-active) { opacity: 0.55; }
.page-id-84946 .pv-wheel-wrap .pv-seg.is-active {
    filter: drop-shadow(0 4px 10px rgba(0,0,0,.18));
}
.page-id-84946 .pv-wheel-wrap .pv-tab,
.page-id-84946 .pv-wheel-wrap .pv-conn {
    opacity: 0;
    transition: opacity .3s ease;
    pointer-events: none;
}
.page-id-84946 .pv-wheel-wrap .pv-tab.is-active,
.page-id-84946 .pv-wheel-wrap .pv-conn.is-active { opacity: 1; }

/* ---- SERVICES GRID (fix #7) — Figma: white cards with red border, last tile is red highlight ---- */
.page-id-84946 .lcppv-services-grid,
.page-id-84946 .service-tiles-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin: 30px 0;
}
.page-id-84946 .lcppv-svc,
.page-id-84946 .service-tile {
    background: #fff;
    border: 1px solid #D21C23;
    padding: 24px 22px;
    border-radius: 4px;
    display: flex;
    flex-direction: column;
}
.page-id-84946 .lcppv-svc p,
.page-id-84946 .service-tile__text {
    color: #003265;
    margin: 0 0 24px;
    flex: 1;
    /* font inherits from theme (Aptos, 18px, lh 28px by default per site) */
}
.page-id-84946 .lcppv-svc a,
.page-id-84946 .service-tile__cta {
    color: #D21C23;
    text-decoration: none;
    /* font inherits from theme */
}
.page-id-84946 .lcppv-svc a:hover,
.page-id-84946 .service-tile__cta:hover { text-decoration: underline; }

/* Last tile in service grid: red highlight ("Additional services are available") */
.page-id-84946 .service-tile:last-child,
.page-id-84946 .lcppv-svc:last-child {
    background: #D21C23;
    border-color: #D21C23;
}
.page-id-84946 .service-tile:last-child .service-tile__text,
.page-id-84946 .lcppv-svc:last-child p { color: #fff; }
.page-id-84946 .service-tile:last-child .service-tile__cta,
.page-id-84946 .lcppv-svc:last-child a { color: #fff; }

@media (max-width: 767px) {
    .page-id-84946 .lcppv-services-grid,
    .page-id-84946 .service-tiles-grid { grid-template-columns: 1fr; }
}

/* ---- CASE STUDIES (Figma: white cards with red border, PV-blue text) ---- */
.page-id-84946 .lcppv-case-studies { margin: 30px 0; }
.page-id-84946 .lcppv-case-studies__heading {
    color: #003265;
    margin: 0 0 24px;
    /* font inherits from theme */
}
.page-id-84946 .lcppv-case-studies__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}
.page-id-84946 .lcppv-case-card {
    background: #fff;
    border: 1px solid #D21C23;
    border-radius: 4px;
    padding: 28px 28px;
}
.page-id-84946 .lcppv-case-card__title {
    color: #003265;
    margin: 0 0 16px;
    /* font inherits from theme h3 default */
}
.page-id-84946 .lcppv-case-card__body {
    color: #003265;
    margin: 0;
    /* font inherits from theme paragraph default */
}
@media (max-width: 767px) {
    .page-id-84946 .lcppv-case-studies__grid { grid-template-columns: 1fr; }
}

/* ---- FLEXIBLE MODELS (custom shortcode — only block-level layout, fonts inherit) ---- */
.page-id-84946 .lcppv-flex-models { margin: 30px 0; }
.page-id-84946 .lcppv-flex-models__heading {
    color: #003265;
    margin: 0 0 20px;
}
.page-id-84946 .lcppv-flex-models__lede {
    color: #003265;
    margin: 0 0 14px;
}
.page-id-84946 .lcppv-flex-models__banner {
    background: #003265;
    color: #fff;
    padding: 16px 24px;
    margin: 24px 0 0;
}
.page-id-84946 .lcppv-flex-models__list {
    list-style: none;
    padding: 0;
    margin: 0;
    background: #f7f6f2;
}
.page-id-84946 .lcppv-flex-models__list li {
    padding: 0;
    margin: 0;
}
.page-id-84946 .lcppv-flex-models__list li::before { display: none; }
.page-id-84946 .lcppv-flex-models__list a {
    display: block;
    padding: 14px 24px;
    color: #009FDF;
    text-decoration: none;
}
.page-id-84946 .lcppv-flex-models__list a:hover { background: #ecebe5; }

/* (Accordion styling moved to global css/pv-accordion.css — uses new
   .pv-accordion markup rendered by content-builder.php) */

/* ---- LCPPV "Requirements by Market" — hide on live until map data is wired ----
   The live page renders the heading + lede + heatmap error inside a single
   `.section-starter.bottom` container. There's only ONE such container on this
   page, so scoping to .page-id-84946 is sufficient. Remove or comment this
   rule once the [heatmap-display id="..."] is wired with XLSX data. */
.page-id-84946 .section-starter.bottom {
    display: none !important;
}

/* ---- LCPPV MAP — fix #8 ---- */
.page-id-84946 .lcppv-map-section {
    background: #fff;
    padding: 40px 0;
    margin: 40px 0;
}
.page-id-84946 .lcppv-map-section h2 {
    color: #003265;
    font-size: 30px;
    text-align: center;
    margin: 0 auto 16px;
    max-width: 1200px;
}
.page-id-84946 .lcppv-map-section p {
    color: #444;
    font-size: 16px;
    line-height: 1.55;
    text-align: center;
    margin: 0 auto 30px;
    max-width: 1100px;
}
.page-id-84946 .lcppv-map-placeholder {
    background: #e1e6f0;
    border-radius: 4px;
    min-height: 480px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #888;
    text-align: center;
    font-size: 14px;
    line-height: 1.5;
    max-width: 1400px;
    margin: 0 auto;
}

/* ---- INTRO + CTA BUTTON ---- */
/* h2.lcppv-intro-heading: theme's subheading global already sets Aptos 400 / PV Blue / 36px. No override needed. */
/* p: theme paragraph default is fine. */
.page-id-84946 .lcppv-cta-btn {
    display: inline-block;
    background: #D21C23;
    color: #fff;
    padding: 14px 28px;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    border-radius: 2px;
    transition: background .2s;
}
.page-id-84946 .lcppv-cta-btn:hover { background: #a8161c; color: #fff; text-decoration: none; }

/* ---- BULLETS section ---- */
.page-id-84946 .lcppv-bullets,
.page-id-84946 .builder-feld.bullet-text ul {
    list-style: none;
    padding: 0;
    margin: 8px 0 0;
}
.page-id-84946 .lcppv-bullets li,
.page-id-84946 .builder-feld.bullet-text ul li {
    padding: 4px 0 4px 22px;
    position: relative;
    font-size: 16px;
    color: #333;
    line-height: 1.5;
    margin: 0;
}
.page-id-84946 .lcppv-bullets li::before,
.page-id-84946 .builder-feld.bullet-text ul li::before {
    content: "•";
    position: absolute;
    left: 4px;
    color: #009FDF;
    font-size: 18px;
    line-height: 1;
    top: 8px;
}

/* (Vertical spacing override removed — theme defaults match Figma:
   .builder-feld.bottom-56 = 56px, .builder-feld.bottom-35 = 35px, etc.
   Forcing them tighter on LCPPV caused inconsistency vs other service-child pages.) */

/* Custom stuff LCPPV per Figa 28.05.2026 */

.page-id-84946 #page h2.lcppv-intro-heading, .page-id-84946 h3#our-pv-network-at-a-glance, .page-id-84946 .builder-feld.body-text.bottom-56 h2 {
    font-weight: 400 !important;
    font-size:36px !important;
}

.page-id-84946 .lcppv-intro-block p {
    font-size: 18px;
    line-height: 28px;
}

.page-id-84946 a.lcppv-cta-btn {
    font-weight: 400 !important;
    font-size: 18px;
}

.page-id-84946 p.paragraph-1.neutral-600 {
    color: #717171 !important;
}

.page-id-84946 h3.heading-3.two-card-block__title {
    font-weight: 400 !important;
    font-size: 30px;
    line-height: 38px;
    letter-spacing: 0%;
}


.two-card-block__inner .paragraph-1 > p:first-of-type {
    margin-bottom: 80px;
}

p.readon.two-card-block__cta {
    font-size: 18px;
}

.page-id-84946 #page .lcppv-wheel-section {
    position: relative;
    margin-left:calc(33% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    left: 0 !important;
    right: 0 !important;
}

.builder-feld.body-text.bottom-56 p, .builder-feld.body-text.bottom-56 li {
    font-size: 18px;
    line-height: 28px;
    /* color: #464646; */
}

ul.lccpv-class {
    padding-left: 45px !important;
    margin-top: -15px;
}

.lcppv-flex-models {
    margin-top: -54px !important;
}

ul.lcppv-flex-models__list li a {
    font-weight: 400;
}

.page-id-84946 .builder-feld.service-tiles-block .service-tiles-grid {
    margin-top: -38px;
}

.page-id-84946 .lcppv-svc, .page-id-84946 .service-tile {
    border-radius: 0;
}

p.service-tile__text {
    font-size: 17px;
    line-height: 26px;
    margin-bottom: 0 !important;
}

a.service-tile__cta {
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0%;
}

.page-id-84946 #page h2.supporter {
    margin-top: 82px;
    color: #009FDF !important;
    font-size: 35px !important;
    line-height: 42px !important;
}

.page-id-84946 article.lcppv-case-card {
    border-color: #DBDBDB !important;
    border-radius: 0;
}

article.lcppv-case-card h3.lcppv-case-card__title {
    font-size: 22px;
    font-weight: 400 !important;
}

article.lcppv-case-card h3.lcppv-case-card__title {
    font-size: 22px;
    font-weight: 400 !important;
    margin-bottom: 15px !important;
}

.page-id-84946 button.pv-accordion__trigger {
    background: #F7F6F2;
    border: none !important;
}

.page-id-84946 .pv-accordion__icon::before {
    top: 45%;
    left: 0;
    width: 16px;
    height: 4px;
    transform: translateY(-50%);
}

.page-id-84946 .pv-accordion__icon::after {
    left: 49%;
    top: 0;
    width: 4px;
    height: 16px;
    transform: translateX(-50%);
}

.page-id-84946 .pv-accordion__icon::before, .page-id-84946 .pv-accordion__icon::after {
    background: #003265;
}

.page-id-84946 li.pv-accordion__item p {
    font-size: 18px;
    margin-top: 14px;
}


/* ---------------------------------------------------------------------------
   World map block.
   js/lcppv.js (pinFullWidth) runs the tinted band full-bleed and constrains the
   heading, intro copy and map inside it to the page grid: from the services
   sidebar's left edge to the content column's right edge.
   --------------------------------------------------------------------------- */
.page-id-84946 .builder-feld.pv-map-band {
    background-color: #f7f6f2;
    padding-top: 3.5rem;
    padding-bottom: 3.5rem;
}

/* Title / subtitle weights. style.css forces `font-weight: 600 !important` on
   every .builder-feld heading, which also defeats the subtitle's inline
   font-weight, so these need !important and a heavier selector to win. */
.page-id-84946 .builder-feld.pv-map-band h1 {
    font-weight: 400 !important;
}

.page-id-84946 .builder-feld.pv-map-band h5 {
    font-weight: 100 !important;
}

.page-id-84946 #world-map-container-main {
    --pv-map-gutter: clamp(1rem, 4vw, 3.5rem);
}

/* Fallback gutter for when the map is NOT grid-aligned (no sidebar rendered),
   so these controls never sit flush against the viewport edge:
   #jmap-button-container       — the +/- zoom buttons. They are static flex
                                  items, so `left` on .jvectormap-zoomin does
                                  nothing; the flex row itself must be padded.
   #world-map-bottom-area       — "Find the country here:" label
   #world-map-option-container  — country dropdown + legend */
.page-id-84946 #jmap-button-container,
.page-id-84946 #world-map-bottom-area,
.page-id-84946 #world-map-option-container,
.page-id-84946 #world-map-option-container-selected {
    box-sizing: border-box;
    padding-left: var(--pv-map-gutter);
    padding-right: var(--pv-map-gutter);
}

/* Legend row: never break a label mid-phrase ("More / challenging"). The
   labels hold their width and the gradient bar absorbs the slack; if there
   still isn't room, whole items wrap to the next line instead of overflowing. */
.page-id-84946 #legend-area {
    flex-wrap: wrap;
    align-items: center;
    row-gap: 0.5rem;
}

.page-id-84946 #legend-area > span {
    white-space: nowrap;
    flex-shrink: 0;
}

/* The bar is the one item allowed to give way. Above 1400px the theme widens it
   to 24rem, which puts the row 16px over its track and wraps the dot labels;
   hold it at the 20rem the smaller breakpoints already use. */
.page-id-84946 #legend-area > #legend-bar {
    flex-shrink: 1;
    min-width: 5rem;
    max-width: 20rem;
}

/* Dropdown and legend sit side by side in one flex row, which cannot fit on
   narrow screens — let the legend drop below the dropdown instead of
   overflowing the page. No effect on desktop, where both fit on one line. */
.page-id-84946 #world-map-option-container {
    flex-wrap: wrap;
    row-gap: 1rem;
}

/* Narrower country dropdown (theme default is 26% / 250–350px) to leave the
   legend enough room to keep "Not applicable" on the same line. */
.page-id-84946 #world-map-options-parent {
    width: 22%;
    min-width: 240px;
    max-width: 300px;
}

/* The theme reserves 80px of right padding for the chevron, but the caret sits
   just 10px from the edge. Trimming it keeps "Choose a country" on one line in
   the narrower control. */
.page-id-84946 #world-map-options .anchor {
    padding-right: 44px;
    white-space: nowrap;
}

/* Legend wrapped under the dropdown (narrow screens). The dropdown's parent is
   height:0 — it only anchors the absolutely-positioned drop-up — so without
   this the legend renders on top of the control. Reserve the control's height
   and seat it inside that space; the list still opens upward from its base.
   Class toggled by js/lcppv.js (syncOptionRowStacking). */
.page-id-84946 #world-map-option-container.is-stacked #world-map-options-parent {
    height: 3.25rem;
}

.page-id-84946 #world-map-option-container.is-stacked #world-map-options {
    bottom: 0;
}

/* "No data" + "Not applicable" travel as one unit, so when the legend does run
   out of room they drop to their own line together under the gradient bar
   rather than "Not applicable" stranding itself. Grouped by js/lcppv.js. */
.page-id-84946 .pv-legend-dots {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    white-space: nowrap;
}

/* Grid-aligned: the block edges are already the alignment line, so the controls
   sit flush with them rather than being inset a second time. */
.page-id-84946 #world-map-container-main.is-sidebar-aligned #jmap-button-container,
.page-id-84946 #world-map-container-main.is-sidebar-aligned #world-map-bottom-area,
.page-id-84946 #world-map-container-main.is-sidebar-aligned #world-map-option-container,
.page-id-84946 #world-map-container-main.is-sidebar-aligned #world-map-option-container-selected {
    padding-left: 0;
    padding-right: 0;
}