/***************
    
    High Noon Interface
    2025 - Loop: Design fir Social Good
    https://weareloop.com/
 
    This file contains the styles for all parts related to 
    the header and footer interfaces. 
 
    @package High Noon Theme
    @version 1.0.0

***************/

:root {
    /* VARS */
    --header-height: 36px;
    --admin-bar-height: 32px;
}

a#fl-to-top {
    background: var(--Purple) !important;
    border-radius: 6px;
}

a#skip-to-content {
    background: var(--white);
    color: var(--black);
    font-size: 20px;
    font-size: 1.25rem;
    width: 100%;
    text-align: center;
    display: block;
    padding: 10px;
}

header.fl-page-header {
    background: transparent;
    height: calc(var(--header-height) + 16px);
    padding: 15px var(--content-padding);
    position: fixed;
    top: 0;
    transition: all .25s ease;
    width: 100%;
    max-width: 100vw;
    z-index: 999;
    max-width: 1366px;
    /* margin: auto; */
    left: 50%;
    transform: translateX(-50%);
}

header.fl-page-header .header_inner {
    /* max-width: 1222px; */
    margin: auto;
    display: flex;
    gap: 0;
    align-content: flex-start;
    flex-wrap: wrap;
    align-items: flex-end;
    align-self: stretch;
    background: var(--ocean);
    border-radius: 20px;
    flex-direction: column;
    padding: 0 0 0 26px;

}

header.fl-page-header .header_inner:has(.button_cta) {
    background: linear-gradient(to left, transparent 240px, var(--ocean) 241px);
}

/* The navy bar this element paints and the menu pill inside it read as a single shape, so
   they have to be exactly the same height.
   Nothing enforced that before - they simply coincided, because the pill was the tallest
   thing in the header at 57px and set the height for everything. Taking the pill to 48px
   on 16 Aug moved that job to the Donate button, which is 54px, so the pill picked up 3px
   of auto margin top and bottom (its rule sets `margin: auto`) and this gradient showed as
   a 3px navy lip around it - squared off past the pill's rounded end, which is where it
   was first spotted.
   Pinning the bar to the pill's height puts them back in register.
   56px = the pill's 24px line box + the 16px top and bottom padding, which is the Figma's
   56.09 bar. If that padding is retuned, this follows it. Was 48px until 17 Aug 2026, when
   the pill went back to the drawn height; the button is also 56 now, so bar, pill and button
   are all one height and the lip cannot come back from a mismatch. Desktop only - below 992
   the whole desktop menu is display:none and .header_inner takes its height from
   --header-height. */
@media only screen and (min-width: 1367px) {
    header.fl-page-header .header_inner:has(.button_cta) {
        height: 56px;
    }
    /* The wrapper has to match too, or whichever child is tallest sets the height and the
       pill - which carries `margin: auto` - floats within it, leaving a lip on one side
       instead of around the whole edge. */
    header.fl-page-header .header_inner .menu-desktop-wrapper {
        height: 56px;
    }
}
/* 1367 and not 993, deliberately. Between 993 and 1366 the menu wraps to two lines and the
   header is naturally 78px tall, with the bar and the pill already agreeing - pinning 48
   there left the pill overflowing a bar half its height. The mismatch only exists on wide
   desktop, where the Donate button is the tallest thing in the header. */

header.fl-page-header.init {
    opacity: 1;
}

body.admin-bar header.fl-page-header {
    margin-top: var(--admin-bar-height);
}

/*************/
/*************/
/* Menu Main */
/*************/
/*************/
#menu-main .menu-desktop-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 100%;
}

nav ul {
    list-style-type: none;
}

#menu-main {
    background: transparent;
    height: 100%;
    position: relative;
    width: 100%;
    z-index: 1;
}

#menu-mobile-primary {
    display: none
}

#menu-main .menu-desktop {
    align-items: center;
    display: flex;
    flex-basis: 100%;
    gap: 28px;
    list-style: none;
    margin: auto;
    padding: 0;
    position: relative;
    justify-content: flex-end;
    background: var(--ocean);
    padding-right: 30px;
    border-radius: 20px;
    margin-right: 15px;
}

/* spaces between logo and menu, menu and button */

.menu-desktop>li.mainmenu_button a {
    display: block;
    text-decoration: none;
}

.menu-desktop>li.mainmenu_item>a,
.menu-desktop>li.has_submenu>button,
.menu-desktop>li.mainmenu_button a {
    background: transparent;
    background-image: linear-gradient(transparent, transparent);
    background-position: bottom left;
    background-repeat: no-repeat;
    background-size: 100% 3px;
    border-radius: 0;
    border: 0;
    color: var(--white);
    display: inline-block;
    font-family: var(--font-content);
    /* Signed off 16 Aug: nav type to 17px, and the ocean pill shallower. The pill has no
       padding of its own - its height comes from this padding plus the 24px line box, so
       16/17 was producing a 57px pill and 12/12 brought it to 48.
       CHANGED 17 Aug 2026 on Leshan's call: back to 16/16, giving a 56px pill. The 48 was
       agreed at standup on 16 Aug, but the Figma draws the bar at 56.09
       ("Menu - 1 Level - Floating - Round", 8SDyMTxN0LlcDIeYwe9LLN node 6025:19016) and the
       decision was to follow the design. 16/16 hits it exactly: 24 + 16 + 16 = 56.
       The nav gap was already the agreed 28px (see .menu-desktop above) and is untouched.
       Desktop only by construction: .menu-desktop-wrapper is display:none below 992. */
    font-size: 17px;
    font-size: 1.06rem;
    font-weight: 600;
    height: 100%;
    line-height: 24px;
    line-height: 1.5rem;
    padding: 16px 0;
    position: relative;
    text-decoration: none;
    transition: all .25s ease;
}

.menu-desktop>li.has_submenu>button[aria-expanded="true"] {
    background-image: linear-gradient(var(--GivePower-Palette-Sun-Yellow), var(--GivePower-Palette-Sun-Yellow));
}


.menu-desktop>li.mainmenu_item>a:hover,
.menu-desktop>li.has_submenu>button:hover,
.menu-desktop>li.mainmenu_button a:hover {
    animation: underline3 0.25s ease;
    background-image: linear-gradient(var(--GivePower-Palette-Sun-Yellow), var(--GivePower-Palette-Sun-Yellow));
}

@keyframes underline3 {
    from {
        background-size: 0% 3px;
    }

    to {
        background-size: 100% 3px;
    }
}



/* #menu-main .menu-desktop > li:not(.button_cta, .mainmenu_home) > a:hover {
    animation: underline6 0.5s ease;
    background-image: linear-gradient(var(--blood-red), var(--blood-red));
}
@keyframes underline6 {
    from {background-size: 0% 6px;}
    to {background-size: 100% 6px;}
} */
body:not(.fl-builder-edit) .nofocus:focus {
    box-shadow: initial !important
}

#menu-main .menu-desktop li.mainmenu_item {
    margin: 0;
    height: 100%;
    position: relative;
}

#menu-main .menu-desktop li.mainmenu_item.button_cta.bolt {
    margin-left: -13px
}

#menu-main .menu-desktop li.mainmenu_item {
    margin-bottom: 0;
}

#menu-main .mainmenu_home {
    padding: 0;
}

/* start: submenu */
.menu_bubble_pointer {
    position: absolute;
}

.menu_bubble_pointer {
    display: block;
}

.has_submenu>button[aria-expanded="true"] .menu_bubble_pointer {
    display: none;
    opacity: 1;
    transform: translateY(14px) rotate(45deg);
}

.has_submenu>button[aria-expanded="false"] .menu_bubble_pointer {
    transition: all .25s ease;
    opacity: 0;
    transform: translateY(4px) rotate(45deg);
}

.has_submenu>button .menu_bubble_pointer {
    position: absolute;
    bottom: 0px;
    left: 45%;
    width: 20px;
    height: 20px;
    background: var(--white);
    transition: all .25s ease;
    opacity: 0;
    transform: translateY(-10px);
}

.sub-menu[data-depth='0']:before {
    position: absolute;
    content: "";
    top: 0;
    left: calc(50% - 10px);
    width: 28px;
    height: 7px;
    /* background-image: url(/wp-content/uploads/menu_speech_bubble.svg); */
    background-repeat: no-repeat;
    display: block;
    transition: all .4s ease-out;
}

.has_submenu>button[aria-expanded="true"]~.sub-menu[data-depth='0']:before {
    top: -7px;
}


.sub-menu[data-depth='0']:after {
    content: "";
    background: transparent;
    position: absolute;
    top: -18px;
    left: 0;
    height: 40px;
    width: 100%;
}

.sub-menu[data-depth='0'] {
    left: 50%;
    transform: translate(-50%, 0);
    position: absolute;
    top: 0;
    box-sizing: content-box;
    padding: 0;
    transition: all .25s ease;
    z-index: 1;
    border-radius: 20px;
    margin-top: 45px;
    /* Pre-Launch QA (Aug 10), BS: "Can we add a drop shadow to the menu please?"
       There was one, but at 0 0 20px / 20% with no offset it reads as a faint glow, and
       the panel sits over the dark hero photo where a 20% black glow is invisible - so
       from the outside there was no shadow. Offset is what makes it read as lifted
       rather than glowing; kept deliberately modest. Declared twice on the same
       selector here (once above, once below); both updated so they cannot disagree. */
    box-shadow: 0px 6px 24px rgb(0 0 0 / 25%);
    background: var(--white);
    white-space: nowrap;
    display: grid;
    width: 575px;
    gap: 0;
    grid-template-columns: 215px auto;
}

.one_column .sub-menu[data-depth='0'] {
    width: initial;
    display: block;
    min-width: 260px;
}

.has_submenu.submenu_cols .sub-menu[data-depth='0'] {
    display: flex;
    gap: 80px;
}

.has_submenu.submenu_cols .sub-menu[data-depth='0']>li.mainmenu_item {
    min-width: 230px;
}


.has_submenu>button[aria-expanded="false"]~.sub-menu[data-depth='0'] {
    visibility: hidden;
    opacity: 0;
    transform: translate(-50%, -10px);
}

.has_submenu>button[aria-expanded="true"]~.sub-menu[data-depth='0'] {
    visibility: visible;
    opacity: 1;
}

.sub-menu[data-depth='0'] {
    left: 50%;
    transform: translate(-50%, 0);
    position: absolute;
    top: 0;
    box-sizing: content-box;
    padding: 0;
    transition: all .25s ease;
    z-index: 1;
    border-radius: 20px;
    margin-top: 57px;
    margin-bottom: 0;
    /* Pre-Launch QA (Aug 10), BS: "Can we add a drop shadow to the menu please?"
       There was one, but at 0 0 20px / 20% with no offset it reads as a faint glow, and
       the panel sits over the dark hero photo where a 20% black glow is invisible - so
       from the outside there was no shadow. Offset is what makes it read as lifted
       rather than glowing; kept deliberately modest. Declared twice on the same
       selector here (once above, once below); both updated so they cannot disagree. */
    box-shadow: 0px 6px 24px rgb(0 0 0 / 25%);
    background: var(--white);
    white-space: nowrap;
    display: grid;
    width: 575px;
    min-height: 238px;
    gap: 0;
    grid-template-columns: 215px auto;
}

/* `left: -224px` used to sit here, pulling the Join The Charge panel away from its own nav
   item. It never replaced the centring, it stacked on top of it: the shared rule above sets
   left:50% with transform: translate(-50%, 0), and that transform still applied, so the panel
   ended up offset by the hardcoded value AND half its own width. Because one term is a
   percentage of the nav item and the other is fixed pixels, the error moved with the viewport
   - measured 292px left of centre at 1440 and 104px at 1200, while Who We Are, What We Do and
   Language all measured exactly 0.
   Removed rather than re-tuned. Centring is not needed per panel; it is what the shared rule
   already does. Checked that centring does not push the panel off screen, which is the usual
   reason for an offset like this on a last nav item: centred it spans 733..1231 at 1440 and
   530..1028 at 1200, comfortably inside both. */

.menucol3 .sub-menu[data-depth='0'] {
    grid-template-columns: 215px auto auto;
    width: 780px;
}


/* `#menu-main .megasub_image .sub-menu[data-depth='1'] { height: 100% }` used to sit here. It
   existed only to prop up the percentage-height chain that fed the image, which is gone; see
   the image column block below. */

#menu-main .sub-menu[data-depth='1'] {
    margin: 0;
}

#menu-main ul.sub-menu {
    list-style: none;
    padding: 0;
    line-height: 36px;
}

#menu-quickaccess .has_submenu li {
    text-align: left;
    font-size: 20px;
    font-size: 1rem;
    line-height: 24px;
    line-height: 1.2rem;
    padding: 0;
    margin-bottom: 11px;
}

/* Mega panel image column.

   Reported 17 Aug 2026: in Safari every mega panel renders around 600px tall instead of the
   drawn 238, the photo is cropped into a tall sliver, and a large empty area sits beside the
   links. Chromium and Playwright's WebKit both render 238, which is why it did not reproduce
   under test for a long time - Playwright's WebKit is not shipping Safari.

   Cause: the image's height was a percentage that Safari cannot resolve. The Beaver Builder
   skin ships `img { height: auto; max-width: 100% }` and nothing ever declared a width for
   .mega_image, so its width was its INTRINSIC width clamped down to the column by max-width,
   while its height was `height: 100%` resolved through three ancestors that were themselves
   each `height: 100%`. Safari cannot resolve that chain against a grid row it has not sized
   yet, falls back to the image's intrinsic height, and does not scale it down to match the
   clamped width. GivePower_Join-The-Charge-Menu.webp is 800x601, and 601 is exactly the
   panel height measured off the reported screenshot. object-fit: cover then crops the photo
   to 184x601 and the grid row grows to contain it.

   Fixed by taking the image out of flow, so it cannot contribute to the row height in any
   engine. It is anchored to li.megasub_image, which is the grid item, so the grid supplies
   the correct width per panel - 215 for Who We Are and What We Do, 184 for Join The Charge -
   with no per-panel values needed here. Panel height is now purely the link column plus the
   panel's own min-height, which is what the Figma specifies and what the other engines were
   already producing by luck.

   width/height 100% rather than four zero insets because `width: auto` on a REPLACED element
   means its intrinsic width, not stretch-to-fit, so insets alone would not size an <img>.
   Against an absolutely positioned box the percentage resolves off the containing block's
   padding box, which is definite by definition, so this is not the same fragile resolution
   that caused the bug. */
#menu-main .menu-desktop li.mainmenu_item.megasub_image {
    position: relative;
}

/* Forced static on purpose. li.mega_image is position: relative, so without this it would
   capture the absolutely positioned image and then collapse to zero height, having no other
   content of its own. */
#menu-main .menu-desktop li.megasub_image .sub-menu[data-depth='1'],
#menu-main .menu-desktop li.megasub_image li.mega_image {
    position: static;
}

#menu-main .menu-desktop li.mainmenu_item img.mega_image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 20px;
}

#menu-main .menu-desktop li.mainmenu_item .megasub_content {
    padding: 21px 35px 35px;
}

#menu-main .menu-desktop li.mainmenu_item .megasub_content.column_separator:after {
    content: "";
    position: absolute;
    right: 10px;
    top: 50%;
    height: 70%;
    width: 1px;
    background: #1A3242;
    transform: translateY(-50%);
}

/* Join The Charge mega panel - Figma 6025:19013 "Menu Update_2026-08Aug11", confirmed by the
   design lead on 16 Aug as the target over the other variant drawn in the same section.
   Scoped to .joincharge: the rules above are shared by every mega dropdown, and this is the
   only one specced. Placed directly after them so source order settles it without !important.

   Panel-relative geometry, panel 498 x 238:
       image     0 .. 184    flush left/top/bottom, radius 20 (already correct above)
       links     x225, y 43 / 77 / 111, pitch 34, chevrons at x213
       the widest link, "Make an Individual Impact", is 185 and ends at 410, leaving 88 clear

   The earlier three-column build - two link columns, two headings and a divider - is gone
   along with the menu items that carried it, so `column_separator` no longer appears in the
   markup at all and the divider needs no rule to suppress it. */
#menu-main .menu-desktop li.menucol3.joincharge .sub-menu[data-depth='0'] {
    width: 498px;
    grid-template-columns: 184px 314px;
}
#menu-main .menu-desktop li.joincharge .megasub_content {
    /* 36 rather than the drawn 43, for the same reason the bottom is 30 rather than 38: the
       Figma measures to TEXT and CSS lays out boxes. The first link sits on a 34px line box
       around 19px text, so its glyphs start 7.5 below the padding edge.
       The bottom does not bind here - 36 + 3 x 34 = 138 is well under the panel's own
       min-height of 238, and that is what holds the panel at the drawn height now that the
       tall two-heading column is gone. */
    padding-top: 36px;
    padding-bottom: 30px;
    padding-left: 26px;   /* image edge 184 -> ul at 210, + the 15 link indent = x225 */
    padding-right: 88px;  /* widest link ends 410 -> panel right 498 */
}

/* --- vertical rhythm and indent, all from a measured probe of the OPEN panel --- */

/* "Become a GivePartner" was WRAPPING onto two lines, which is what made the panel 305 tall
   against a drawn 238 - the wrap alone adds 36, and everything below it shifts.
   The cause is 5px: the shared rule indents links 20 from the column, the Figma indents them
   15 (label x527, items x542). The column's content box is 173, and the link is 158, so at a
   20 indent only 153 remains and it breaks. At 15 it is 15 + 158 = 173 exactly - the design
   is drawn to fit precisely, with the longest link ending flush at the column's right edge.
   nowrap matches the Figma (every link is whitespace-nowrap) and makes the fit explicit
   rather than something that survives on a couple of spare pixels. Safe here because our
   Lato renders 1-3% narrower than Figma's - measured across all seven links, e.g. Submit A
   Project 117.59 against a drawn 118 - so nothing is close to overflowing. */
#menu-main .menu-desktop li.joincharge .sub-menu .mainmenu_item a {
    margin-left: 15px;
    white-space: nowrap;
}
/* The Figma puts the chevron at x213 against a link at x225 - visible arrow 213..216, so a
   9px gap to the text. Aligning the pseudo-element's BOX to 213 (left:-12) is not the same
   thing and rendered the glyph hard against the first letter, because Font Awesome's chevron
   sits at the right of a ~10px advance box where the Figma's is a bare 3px vector. Measured
   off the render, not the box model: -22 puts the visible glyph where the drawn one is.
   Scanned at -20 first and the gap came back 7 against a drawn 9, hence the extra 2. The
   glyph itself measures 4px wide against the Figma's 3 - close enough that resizing a shared
   site icon for one panel would cost more than it buys. */
#menu-main .menu-desktop li.joincharge .sub-menu .mainmenu_item a:before {
    left: -22px;
}

/* Item pitch. The shared `#menu-main ul.sub-menu { line-height: 36px }` sets the line box
   each link sits on, and therefore the spacing between them; the Figma pitch is 34. */
#menu-main .menu-desktop li.joincharge ul.sub-menu {
    line-height: 34px;
}

/* The LET'S PARTNER / SEE HOW YOU CAN POWER CHANGE heading rules that used to sit here have
   been removed with the headings themselves - the confirmed variant has no headings, so a
   rule for them would be dead code that reads like a feature. The shared heading styles at
   interface.css:441/453 are untouched and still serve the other dropdowns. */


#menu-quickaccess .has_submenu li:last-child {
    margin-bottom: 0;
}

.mainmenu_sub {
    flex: 1;
}

.sub-menu .mainmenu_item h3:before {
    content: "";
    width: 16px;
    height: 28px;
    border-radius: 3px;
    background: #C8EFE8;
    display: inline-block;
    margin-right: 9px;
    vertical-align: top;
    position: relative;
    top: -2px;
    float: left;
    display: none;
}

.sub-menu .mainmenu_item h3 {
    display: none;
    /* display:inline-block; */
    font-size: 16px;
    font-size: 1rem;
    font-style: normal;
    font-weight: 700;
    line-height: 28px;
    line-height: 1.75rem;
    margin: 0 0px;
    padding-bottom: 18px;
    padding-top: 0;
    text-align: left;
    color: var(--patch-reef-blue, #025C6E);
}

.sub-menu .mainmenu_item.showtitle h3 {
    display: inline-block;
    color: #182C39;
    font-family: var(--font-headline);
    font-size: 23px;
    font-size: 1.44rem;
    font-style: normal;
    font-weight: 600;
    line-height: 23px;
    line-height: 1.44rem;
}

.sub-menu .mainmenu_item.menu_programs.showtitle h3 {
    color: #182C39;
    font-size: 11px;
    font-size: 0.69rem;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    letter-spacing: 0.99px;
}

.sub-menu .mainmenu_item a {
    color: #182C39;
    font-family: var(--font-content);
    font-size: 16px;
    font-size: 1rem;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    padding: 0px 0px;
    margin-left: 20px;
    position: relative;
    text-decoration: none;
    background-image: linear-gradient(transparent, transparent);
    background-repeat: no-repeat;
    background-position: left bottom;
    background-size: 100% 1px;
    transition: background-size .5s ease-in-out;
    display: inline;
    padding-bottom: 4px;
    padding-top: 5px;
}

.sub-menu .mainmenu_item a:before {
    content: "\f107";
    display: inline-block;
    font-family: "Font Awesome 5 Pro";
    font-size: 10px;
    font-size: 0.63rem;
    line-height: 1;
    font-weight: 400;
    margin-left: 8px;
    transition: all .25s ease;
    padding-bottom: 0;
    color: #44B7B6;
    transform: rotate(270deg);
    position: absolute;
    left: -10px;
    left: -25px;
    top: 10px;
}

#menu-main .sub-menu .mainmenu_item.menuprograms_solarwaterfarms,
#menu-main .sub-menu .mainmenu_item.menuprograms_solarimpactprojects,
#menu-main .sub-menu .mainmenu_item.menuprograms_givepowertreks {
    margin-bottom: 6px;
}

.sub-menu .mainmenu_item.menuprograms_solarwaterfarms a,
.sub-menu .mainmenu_item.menuprograms_solarimpactprojects a,
.sub-menu .mainmenu_item.menuprograms_givepowertreks a {
    margin-left: 30px;
}

.sub-menu .mainmenu_item.menuprograms_solarwaterfarms a:before,
.sub-menu .mainmenu_item.menuprograms_solarimpactprojects a:before,
.sub-menu .mainmenu_item.menuprograms_givepowertreks a:before {
    content: "";
    display: inline-block;
    width: 23px;
    height: 23px;
    margin-left: initial;
    transform: initial;
    left: -31px;
    top: 5px;
}

.sub-menu .mainmenu_item.menuprograms_solarwaterfarms a:before {
    background: url(/wp-content/uploads/menu_icon_water.svg) center center / contain no-repeat;
}

.sub-menu .mainmenu_item.menuprograms_solarimpactprojects a:before {
    background: url(/wp-content/uploads/menu_icon_impact.svg) center center / contain no-repeat;
}

.sub-menu .mainmenu_item.menuprograms_givepowertreks a:before {
    background: url(/wp-content/uploads/menu_icon_treks.svg) center center / contain no-repeat;
}



.submenu_cols .sub-menu .mainmenu_item a {
    font-size: 16px;
    font-size: 1rem;
}

.has_submenu.submenu_adjust_item4 .sub-menu {
    left: -240px;
}

.submenu_adjust_item4 .sub-menu[data-depth='0']:before {
    left: calc(100% - 210px);
}

.sub-menu .mainmenu_item a:hover,
.top-bar-nav .sub-menu .mainmenu_item a:hover {
    animation: 0.5s underline;
    background-image: linear-gradient(#44B7B6, #44B7B6);
    color: #182C39;
}

.menu-desktop>li.has_submenu>button {
    align-items: center;
    display: flex;
    margin: 0;
}

.menu-desktop>li.has_submenu>button:after {
    content: "\f107";
    display: inline-block;
    font-family: "Font Awesome 5 Pro";
    font-size: 10px;
    font-size: 0.63rem;
    line-height: 1;
    font-weight: 400;
    margin-left: 8px;
    transition: all .25s ease;
    padding-bottom: 0;
    margin-top: 1px;
    color: var(--GivePower-Palette-Sun-Yellow);
}

.top-bar-nav #menu-quickaccess>li.has_submenu>button:after {
    content: "\f107";
    font-family: "Font Awesome 5 Pro";
    font-size: 22px;
    line-height: 0;
    font-weight: 100;
    position: relative;
    top: 3px;
    transition: all .25s ease;
    padding-bottom: 0px;
    margin-top: 1px;
    margin-left: 8px;
}

.menu-desktop>li.has_submenu>button[aria-expanded="true"] {
    z-index: 2;
}

.menu-desktop>li.has_submenu>button[aria-expanded="false"]:after,
.top-bar-nav #menu-quickaccess>li.has_submenu>button[aria-expanded="false"]:after {
    transform: rotate(0deg);
}

.menu-desktop>li.has_submenu>button[aria-expanded="true"]:after,
.top-bar-nav #menu-quickaccess>li.has_submenu>button[aria-expanded="true"]:after {
    transform: rotate(180deg);
}

/* end: submenu */

#menu-main .menu-desktop>li.current-menu-ancestor>a,
#menu-main .menu-desktop>li.current-menu-item:not(.mainmenu_home)>a {
    background-image: linear-gradient(var(--blood-red), var(--blood-red));
}

#menu-main .menu-desktop>li.mainmenu_item.mainmenu_home>a {
    padding: 0;
}

#menu-main .mainmenu_home>a img {
    height: 100%;
    margin: 10px 0;
    max-height: 52px;
}

/* Signed off 16 Aug: header logo to 160.526 x 36.095.
   The rule above never matched the header logo and is why it was still rendering at its
   intrinsic 116.8 x 26.84 with nothing constraining it. The markup is
   <a class="mainmenu_home"><img class="hidefocus"></a>, so `.mainmenu_home > a img`
   requires an <a> INSIDE .mainmenu_home, which does not exist. Left in place in case it
   serves the menu-item variant referenced in header.php, and the real element is targeted
   here instead.
   Both axes are set explicitly: the agreed figures are not a pure scale of the old size,
   so the aspect ratio comes from the sign-off rather than from the file.
   Desktop only by construction - .menu-desktop-wrapper is display:none below 992. */
#menu-main a.mainmenu_home {
    /* The logo was not merely small, it was being squeezed. .menu-desktop next to it has
       flex-basis: 100%, so the logo anchor shrank to about 116px and the global
       `img { max-width: 100% }` then capped the image to that. Setting a width on the
       image alone therefore did nothing but distort it - the height applied and the width
       stayed clamped. Taking the anchor out of the shrink lets the agreed size hold.
       The artwork's natural size is 161 x 37, so the signed-off 160.526 x 36.095 is
       effectively the logo at 1:1. */
    flex: 0 0 auto;
}

#menu-main a.mainmenu_home > img {
    width: 160.526px;
    height: 36.095px;
}

.menu_main_out header.fl-page-header {
    transform: translate(-50%, calc(-58px - var(--header-height)));
}

/* Mobile menu */
#menu-main .menu-mobile {
    display: none;
}

#menu-main .menu-desktop>li:not(.button_cta) {
    background-color: var(--ocean);
}

#menu-main .menu-desktop>li:has(+ li.button_cta) {
    background-color: var(--ocean);
    border-top-right-radius: var(--border-radius-btn);
    border-bottom-right-radius: var(--border-radius-btn);
    padding-right: 36px
}

#menu-main .mainmenu_item.button_cta {
    margin-left: -13px;
}

#menu-main .button_cta:after {
    display: none
}

#menu-main .button_cta button {
    --glow-color: var(--GivePower-Palette-Sun-Yellow);
    align-items: center;
    background: var(--GivePower-Palette-Sun-Yellow);
    background: linear-gradient(0deg, #FFC300 -0.65%, #FFD753 99.35%);
    border-radius: var(--border-radius-btn);
    /* border: 1px solid var(--GivePower-Palette-Sun-Yellow); */
    border: 0;
    box-shadow: 0 0 0 0 hsl(from var(--glow-color) h s l /.5);
    color: var(--ocean);
    display: flex;
    font-size: 19px;
    font-size: 1.19rem;
    font-weight: 900;
    gap: 16px;
    justify-content: center;
    letter-spacing: 0.57px;
    /* margin-bottom: 8px; */
    /* Vertical padding is the Figma's 16 (node 6025:19038 puts the icon and label at y16 in a
       55-tall button). Ours lands at 56 rather than 55 because the bolt renders 24px against a
       drawn 23, which is the better outcome anyway: it makes the button exactly the height of
       the bar so the two read as one shape.
       Horizontal stays 45, NOT the drawn 46.5. Our Lato renders "Donate" 67.9px against a drawn
       66, so 45 gives 187.9 against the drawn 189 while 46.5 would overshoot to 190.9. 45 is the
       closer match to the width that actually matters. */
    padding: 16px 45px !important;
    transition: box-shadow 250ms ease-in-out, transform .25s ease-in-out !important;
}

#menu-main .button_cta button:hover {
    box-shadow: 0 0 44px 0 hsl(from var(--glow-color) h s l /.75);
    transform: scale(1.05);
    transition: box-shadow 300ms ease-in-out, transform .25s ease-in-out !important;
}

/**********/
/* Footer */
/**********/
footer {
    --footer-padding-top: 206px;
    --footer-padding-extra: 128px;
    /* background: url('/wp-content/uploads/Background-Black.svg') var(--black) 50% / cover no-repeat; */
    /* Depth of the painted arch. min(126px, 9.22vw) is one continuous curve rather than three
       breakpoints: 126px is the depth fitted to the frame below and 1366 is the frame width,
       so 126/1366 = 9.22% is that same curve expressed as a proportion. Under 1366 it scales
       with the viewport; at and above 1366 it caps at 126px, which is exactly what the old
       mask-size: 100% 126px did. This retires the 200vw / 250vw clip-path ellipses that used
       to take over below 993 - measured, they were about a third as deep (56px at 992, 36px
       at 768, 40px at 375, against 126 at desktop) and read as flat rather than curved. */
    --arch-depth: min(126px, 9.22vw);
    /* border-top-left-radius: 30px;
    border-top-right-radius: 30px; */
    /* Revision 16 Aug (Leshan, standup): "make the curve more curvey - it needs to curve
       more at the ends."

       Was 130%. Measured off a render rather than judged by eye: our arc dropped 65px from
       its peak to the screen edge across 1440, i.e. 4.5% of the width, where the Figma's
       6025:18637 drops 126 across 1366 = 9.2%. Exactly half as deep.

       The lead suggested exporting the Figma SVG. It is not needed - the drawn curve IS an
       ellipse arc. Sampled the 1:1 export at 21 points across its width and fitted one:
       every point lands within a pixel of an ellipse whose horizontal radius is 0.559x the
       width. So this is our own technique with the wrong number in it, and a percentage
       keeps what an SVG would cost us - the arc still spans whatever the viewport is,
       needs no request, and takes the footer's own colour.

       95.5%, and it is derived, not tuned. For ellipse(k*W, H at 50% 100%) the drop at the
       element's edge is

           depth = H * (1 - sqrt(1 - (0.5/k)^2))

       With the footer 851 tall at desktop, 130% gives 851 * 0.0769 = 65 - which is what was
       measured, so the formula is sound - and solving it for the drawn 126 gives k = 0.955.

       A clip-path ellipse got the DEPTH right but not the profile, and the reason is worth
       keeping: clip-path: ellipse() makes the whole clip region one ellipse, so its vertical
       radius has to span the entire footer. Depth is then H * (1 - sqrt(1 - (0.5/k)^2)), and
       pinning the depth to 126 also pins the shape - to a wider, lazier arc than the frame's,
       up to 9px out across the mid-span. An SVG mask lifts that constraint: the arc only has
       to describe the TOP, and a second mask layer carries the rest of the footer, so the
       arc's radius is finally free of the footer's height.

       So the shape below is the frame's, exactly, at every width:

           viewBox 0 0 1366 126, preserveAspectRatio="none"
           M0 126  A764 228.3 0 0 1 1366 126  Z

       Those two radii are not copied off a bezier, they are solved. The exported artwork was
       sampled at 21 points across its width and fitted, and it is a clean ellipse arc: the
       half-width sits at 0.894 of the horizontal radius (so rx = 683 / 0.894 = 764) and the
       126 amplitude gives ry = 126 / (1 - sqrt(1 - 0.894^2)) = 228.3. Checked back against
       the export - 8 / 24 / 50 / 92 drawn at the quarter points against 8.4 / 24.1 / 50.2 /
       92.7 from these radii. An `A` command is also better than a transcribed bezier here,
       because it stays exact when stretched; a path baked for a 1366px box would have to be
       refitted for any other width.

       preserveAspectRatio="none" is what makes it width-proof. Stretching an ellipse arc
       horizontally yields another ellipse arc, and because the arc and the box stretch by
       the same factor the 0.894 ratio is preserved - so the profile is identical at 1366 and
       at 1920, while the 126 depth stays put because the vertical scale never changes.

       That last part is a bonus over the clip-path: the depth no longer drifts with the
       footer's height. It was 126 where the footer is 851 tall but 134 between ~993 and
       ~1366 where it is 905. It is 126 everywhere now.

       Mask, not clip-path: url(#id). A url() reference has to point at an SVG in the same
       document, which would mean adding markup to the footer template, and if that markup is
       ever missing the reference is invalid and the browser drops the whole footer rather
       than skipping the clip. A data URI cannot fail that way.

       Every width, not base only. This shape now runs everywhere, and the 200vw / 250vw
       ellipses that used to take over below 993 and 769 have been removed.

       PAINTED, not cut out. This was a mask, and below 993 a clip-path. Both work by removing
       the footer, so its top corners were holes showing whatever sat behind them. That is
       invisible on the homepage, where the section above is already Warm White, and wrong
       everywhere else, where the last row carries a background photo and the arch was
       revealing photography at the edges. Sampled at the corners beforehand: the homepage
       gave 246,242,239 while What We Do gave 189,178,176 / 124,126,139 and Who We Are and
       Join both gave 84,127,137 / 32,97,120.

       Painting it leaves no holes. The footer draws its own Warm White shoulders, so nothing
       behind it can show at any width on any page, and it costs nothing structurally: no
       extra element, no margin change, no document height change, no stacking order to keep
       straight. An earlier attempt did add a backdrop element and it worked, but it only
       covers the arch if the footer's negative margin is at least as deep as the arch, which
       it is not at desktop (100 against 126), and it grew the document by its own height.

       The fill has to be a literal #1A3242. A data URI cannot read var(--ocean).

       REVERSED 17 Aug 2026 on Leshan's call: "I still see this in the header, it needs to be
       fixed, the white should not show." The shoulders are `transparent`, not `var(--cream)`.

       This deliberately undoes the paragraph above. The arch is still PAINTED rather than
       masked, so the fix for the real bug stands - the navy arc is drawn, not cut, and the
       border-radius that clipped it below 993 is still gone. What changes is only what fills
       the two shoulders beside the arc. Cream was chosen so nothing behind could ever show;
       the consequence is that on the 9 of 13 pages whose last row carries a background photo,
       those shoulders painted a white band across it and the photo appeared to stop dead at a
       hard horizontal line 100px above the arc. Measured on production: only the homepage,
       Team, Make an Individual Impact and Donate have Warm White behind the arch band. Mission,
       Impact, Annual Reports, Solar Water Solutions, The Approach, Live Impact, What's New,
       Become a GivePartner and Plan a Trek all have a photo there.

       Transparent makes the shoulders show whatever the section above paints, so the arc rises
       out of that section instead of out of a white gap. On the four Warm White pages this is
       pixel-identical to the cream version. Safe to leave transparent rather than needing a
       per-page rule: every one of the 13 pages has an opaque background or a background image
       on the row behind the arch band, so nothing falls through to the body. */
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1366 126' preserveAspectRatio='none'%3E%3Cpath d='M0 126 A764 228.3 0 0 1 1366 126 Z' fill='%231A3242'/%3E%3C/svg%3E")
            left top / 100% var(--arch-depth) no-repeat,
        linear-gradient(to bottom, transparent var(--arch-depth), var(--ocean) var(--arch-depth));
    color: var(--white);
    /* Was -100px. Tied to the arch depth so the arch band can never hang past the section
       above it. With transparent shoulders that is not cosmetic: at -100 against a 126 arch,
       the bottom 26px of each shoulder sat below the previous row and showed the BODY's own
       background image, which reads as a stray olive wedge in the outer corners. Measured at
       x4 and x(width-6), y+123 from the footer's top, on every page. Cream used to hide it.
       Equal values mean the overlap is exactly the depth of the painted band at every width,
       since both now read the same variable. Checked the extra 26px does not reach content:
       the last row clears the footer's top by 126 to 150px on Home, Mission, Impact, Team,
       The Approach, What's New and Plan a Trek. Donate is the tightest at 66px, and its
       "Donate Now" button sits at x289..493 where the arc is only about 21px deep. */
    margin-top: calc(-1 * var(--arch-depth));
    position: relative;
    z-index: 1;
}

.footer_row_wrapper {
    margin: 0 auto;
    max-width: 1366px;
    padding: var(--footer-padding-top) var(--content-padding) 0;
}

.footer_row {
    align-items: stretch;
    display: flex;
    flex-direction: row;
    gap: 62px;
    justify-content: space-between;
    margin: auto;
    max-width: 1366px;
    padding-bottom: 0px;
}

.footer_row.row1 {
    display: inline-block;
    padding-bottom: 36px;
    padding-top: 75px;
}

.footer_row.row2 {
    align-items: flex-start;
    flex-direction: row;
    padding-bottom: 30px;
    padding-top: var(--Sizing-Units-M);
}

.footer_row.row2 .footer_col_wrapper {
    width: 100%;
    display: grid;
    grid-template-columns: 250px 250px auto;
    align-items: start;
    gap: 70px;
    align-items: baseline;
}

.footer_col {
    display: flex;
    flex-direction: column;
    gap: 0;
    justify-content: space-between;
    width: 100%;
}

.footer_row .col1 {
    /*
    column-count: 2;
    column-gap: 66px;  
    */
    display: block !important;
    max-width: 580px;
}

.footer_row .col2 {
    max-width: 383px;
}

footer address {
    font-size: 18px;
    font-size: 1.13rem;
    line-height: 30px;
    line-height: 1.88rem;
    margin-bottom: var(--Sizing-Units-S);
}

footer p {
    margin: 0;
}

/* 17 Aug (Leshan) - the gap between the input row and the signup disclaimer, raised twice in
   the same day: first from 0 to the 16 that this identical sentence already uses inside the
   Join The Charge card on 2943 (custom.css:1224), then to 26 once it was seen on desktop.

   26 is --Sizing-Units-XS, one step up the scale. 36 was rendered alongside it before
   choosing: it detaches the sentence from the form altogether and leaves it floating above
   the columns below. 26 clears the fields while keeping the paragraph part of the newsletter
   block. The block's own rhythm is 18 between heading, subtitle and form, so one step above
   that reads as fine print rather than as another field.

   One declaration for every width. Phones had carried their own 26 since the earlier pass and
   desktop has now met it, so the max-width 768 override was deleted rather than left
   restating the same number. 769-992 rises from 16 to 26 with it - not separately asked for,
   but it is the same complaint one breakpoint over and the alternative was three different
   values for one paragraph.

   It measured 0 to begin with, and not because nobody had set it: `footer p` directly above
   zeroes the margin on every paragraph in the footer, so the browser default never applied.
   This is (0,1,1) against that reset's (0,0,2), so it lands without !important; stated as
   margin-top only, so the reset still owns the other three sides. */
footer .newsletter-form__disclaimer {
    margin-top: var(--Sizing-Units-XS, 26px);
}

footer nav {
    display: flex;
    /* margin-top: var(--Sizing-Units-S); */
}

footer nav ul {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    gap: 19px;
    list-style: none;
    padding-inline-start: 0;
}

.footer_col.col1 nav ul {
    display: flex;
    margin-top: 26px;
    gap: 19px;
}

footer nav ul a {
    font-weight: 700;
}

footer a:not(#menu--title, .fl-button) {
    background-color: inherit;
    background-image: linear-gradient(var(--GivePower-Palette-Sun-Yellow), var(--GivePower-Palette-Sun-Yellow));
    background-position: bottom left;
    background-repeat: no-repeat;
    background-size: calc(100%) 1px;
    border-radius: 0;
    border: none;
    color: var(--white);
    display: inline;
    font-weight: 700;
    letter-spacing: 0.57px;
    line-height: normal;
    padding: 0;
    padding-bottom: 3px;
    /* lower underline */
    text-decoration: none;
    transition: background-size 250ms ease-in-out;

}

footer a:hover {
    text-decoration: none;
    background-size: 100% 1px;
}

footer a#menu--title {
    margin-bottom: 43px;
}

footer p>a {
    background-image: linear-gradient(transparent, transparent) !important;
    underline: none !important;

    &:hover {
        background-image: linear-gradient(currentColor, currentColor) !important;
    }
}

footer .bolt a.fl-button,
footer .bolt a.fl-button:hover,
footer .bolt a.fl-button:active {
    --glow-color: var(--GivePower-Palette-Sun-Yellow);
    background: linear-gradient(0deg, #FFC300 -0.65%, #FFD753 99.35%) !important;
    background-size: 0;
    border-radius: var(--border-radius-btn);
    border: 1px solid var(--GivePower-Palette-Sun-Yellow);
    box-shadow: 0 0 0 0 hsl(from var(--glow-color) h s l /.5);
    color: var(--ocean) !important;
    display: block;
    font-family: var(--font-content);
    font-size: 19px;
    font-size: 1.19rem;
    font-weight: 900;
    gap: 0;
    height: auto;
    letter-spacing: 0.57px;
    line-height: normal;
    margin: var(--Sizing-Units-S) 0;
    padding: 20px 30px !important;
    text-align: center;
    text-decoration: none;
    transition: all .25s ease-in-out, box-shadow 250ms ease-in-out !important;
    width: 100%;
}

footer .bolt a.fl-button::before {
    content: "";
    height: 23px;
    margin-top: 0;
    position: relative;
    transition: all .25s ease-in-out;
    width: 14px;
    display: inline-flex;
    /* transform: translateX(12px); */
    background-color: currentColor;
    -webkit-mask: var(--bolt) no-repeat 0% 0%;
    mask: var(--bolt) no-repeat 0% 0%;
    -webkit-mask-size: contain;
    mask-size: contain;
    top: 5px;
    margin-right: 10px;
}

footer .bolt a.fl-button:hover {
    /* background: var(--GivePower-Palette-Sun-Yellow) !important; */
    box-shadow: 0 0 44px 0 hsl(from var(--glow-color) h s l /.75);
    transform: scale(1.05);
    */ transition: all .25s ease-in-out, box-shadow 300ms ease-in-out !important;
}

.footer_row.row2 .small p a {
    font-weight: normal !important;
}

footer .social_networks {
    align-items: center;
    display: flex;
    gap: 28px;
    justify-content: flex-start;
    list-style: none;
    margin: 60px 0 66px;
    padding-inline-start: 0;
    padding: 0;
}

.social_networks a {
    text-decoration: none !important;
    color: var(--white) !important;
    font-size: 40px;
    font-size: 1.88rem;
    background: none !important;

    span:before {
        transition: transform .5s ease !important;
    }

    &:hover span:before {
        transform: scale(1.05);
    }
}

.ua-icon {
    font-family: 'Ultimate-Icons' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.ua-icon-facebook:before {
    content: url(/wp-content/uploads/Icon-awesome-facebook-f.svg);
    display: block;
    height: 41px;
    width: 22px;
}

.ua-icon-twitter:before {
    content: "\e926";
}

.ua-icon-instagram:before {
    content: url(/wp-content/uploads/Icon-awesome-instagram.svg);
    display: block;
    height: 36px;
    width: 36px;
}

/* The other three social icons were swapped to yellow SVG assets that carry
   fill="#FFC300" internally. YouTube was left as the original icon-font glyph,
   which inherits color:#fff from the footer and therefore rendered white while
   its neighbours rendered yellow. Colouring the glyph to the same Sun Yellow
   matches them without needing a new asset. */
/* YouTube was the only social icon still drawn from the Ultimate-Icons font,
   so it inherited color:#fff from the footer and rendered white while its
   neighbours rendered yellow, and it was vulnerable to the font failing to
   load (which shows a missing-glyph box). Switched to a yellow SVG carrying
   fill="#FFC300" internally, matching exactly how facebook, instagram and
   linkedin are already built. Width matches their 36px. */
.ua-icon-youtube:before {
    content: url(/wp-content/uploads/Icon-awesome-youtube.svg);
    display: block;
    height: 32px;
    width: 36px;
}

.ua-icon-linkedin:before {
    content: url(/wp-content/uploads/Icon-awesome-linkedin-in.svg);
    display: block;
    height: 36px;
    width: 36px;
}

footer .featured_logos {
    display: flex;
    gap: 44px;
    list-style: none;
    margin-top: 43px;
    padding-inline-start: 0;
}


/*form*/

footer h3 {
    font-size: 46px;
    font-size: 2.88rem;
    line-height: 52px;
    line-height: 3.25rem;
    color: var(--white);
    margin-top: 27px;
    background: var(--ocean);
    position: relative;
    max-width: 330px;
}

footer div.wpforms-container-full:not(:empty) {
    margin: 26px 0 0;
}

/* Footer social icons - EVERY width, deliberately outside the desktop block.
   The design only draws desktop, so these were desktop-scoped at first and tablet and phone
   kept the theme's 41px gold ones. Leshan asked for one treatment everywhere rather than the
   footer changing character at 992, so colour, size and gap are stated here and only the
   spacing above the row stays breakpoint-specific.

   Sizes: the update draws the row at 132 x 22.325 where the OG footer draws it at
   188.26 x 31.84 - exactly 0.701 in both dimensions, so the whole set is scaled rather than
   redrawn. Ours run 1.29x the OG, hence 0.543x here. Icons total 11.96 + 19.55 + 21.93 +
   19.55 = 72.99 of glyph, so three gaps of 19.67 make the drawn 132.

   Colour: the icons arrive yellow because the uploaded SVGs carry their own fill and are
   injected with `content: url(...)`, so `color` cannot reach them and the theme's
   `color: var(--white) !important` on the anchor does nothing. brightness(0) crushes the
   artwork to black whatever its fill, then invert(1) takes it to white - fill-agnostic, which
   matters because the four SVGs are not consistent with one another.

   Scoped to `footer .social_networks` so the ua-icon set is untouched everywhere else. */
/* 17 Aug (Leshan): "the icons seem tight - try 8 pixels more between each" and "bottom align
   them so they look balanced."

   GAP 19.67 -> 27.67. Measured first, because the note was about the responsive views and it
   turned out there was nothing width-specific to find: the gap read 19.67 at 390, 750, 900 and
   1440 alike, which is this rule doing exactly what the 16 Aug decision above asked of it.
   So both changes are made here, at every width, rather than in a phone block - scoping them
   to small screens would reintroduce the change of character at 992 that the note above exists
   to prevent. The drawn 132px row becomes 156.

   ALIGNMENT center -> flex-end. This is the imbalance, and it is caused by the four SVGs
   being different heights - 22.32, 19.54, 15.42 and 19.53, as set below. Centring splits the
   difference at both ends, so their bottom edges land up to 3.45px apart (YouTube, the
   shortest, floats highest) while their tops disagree by the same amount. Nothing is
   misaligned in the markup; the row was doing what it was told. flex-end lines the bottoms up
   exactly and lets the height difference show only at the top, where the eye reads it as the
   glyphs' own shapes rather than as a wobble.

   Not fixed by equalising the heights: those four numbers are the artwork scaled 0.543 from
   the frame, so forcing them equal would distort the logos. */
footer .social_networks {
    gap: 27.67px;
    align-items: flex-end;
}
footer .social_networks .ua-icon:before {
    filter: brightness(0) invert(1);
}
footer .social_networks .ua-icon-facebook:before  { height: 22.32px; width: 11.96px; }
footer .social_networks .ua-icon-instagram:before { height: 19.54px; width: 19.55px; }
footer .social_networks .ua-icon-youtube:before   { height: 15.42px; width: 21.93px; }
footer .social_networks .ua-icon-linkedin:before  { height: 19.53px; width: 19.55px; }

/* Optical correction for the bottom alignment above, and the reason it is needed at all:
   these four SVGs do not paint inside the boxes declared for them. Scanned off the render at
   390, the ink measures 32 / 28 / 24 / 28 tall against boxes of 22.32 / 19.54 / 15.42 / 19.53
   - about 1.43x each, overflowing right and bottom. So `align-items: flex-end` lines the
   BOXES up exactly (measured spread 0.00px) and the eye still sees them disagree.

   That is not a theory: with the boxes centred the ink bottoms sat at 1546 / 1543 / 1545 /
   1543, and bottom-aligning the boxes moved them to 1546 / 1545 / 1549 / 1545 - a 3px spread
   becoming 4px. The change asked for made the visible result marginally worse on its own,
   which is only findable by reading the pixels; every box measurement said it was perfect.

   These two offsets pull the ink onto one line at 1545. `position: relative` shifts the
   painted glyph without touching layout, so the row's height, the 27.67 gaps and the column
   geometry above are all untouched. Instagram and LinkedIn already sit on 1545 and are
   deliberately left without a rule rather than given `top: 0`.

   If the assets are ever re-exported so the art fills its box, delete this block - it is a
   correction for the files, not a design value. */
footer .social_networks .ua-icon-facebook:before { position: relative; top: -1px; }
footer .social_networks .ua-icon-youtube:before  { position: relative; top: -4px; }

/* 2026 footer, narrow screens. The stacked order used to lead with column three because
   that column held the LOGO; the 2026 layout moves the logo to column one and leaves column
   three holding the 501(c)(3) line, the copyright, the legal links and the badges. Left
   alone, the footer opens on a phone with legal boilerplate and reaches the logo last.
   Stating the order restores "identity, then navigation, then legal" without touching the
   desktop grid, which is source-ordered correctly already.
   The update is only drawn at desktop, so this is about not REGRESSING the small screens
   rather than matching a frame - nothing here is taken from the Figma. */
@media only screen and (max-width: 992px) {
    .footer_row.row2 .footer_col_wrapper {
        display: flex;
        flex-direction: column;
    }
    .footer_row.row2 .footer_col.col1 { order: 1; }
    .footer_row.row2 .footer_col.col2 { order: 2; }
    .footer_row.row2 .footer_col.col3 { order: 3; }

    /* 17 Aug (Leshan), item 2 - the logo carries the yellow underline every footer link gets.
       `footer a:not(#menu--title, .fl-button)` paints it, and the desktop block already
       cancels it; below 993 nothing did, so the mark showed on every narrow screen. Same
       declaration, same selector as the desktop rule - only the reset is repeated here, not
       the sizing, which is deliberately still desktop's. */
    .footer_col.col1 #footer-logo {
        background-image: none;
        padding-bottom: 0;
    }

    /* 17 Aug (Leshan) - two gaps the design states but only the DESKTOP block ever wrote, so
       below 993 both collapsed to 0: measured 0.0 against a drawn 18 under the newsletter
       heading and 7 above the copyright. The same values, not new ones. */
    footer .footer_subtitle {
        margin-top: 18px;
    }
    .footer_col.col3 .footer_legal_row {
        margin-top: 7px;
    }
}

/* 2026 footer, phones. Three duplicates only exist below 768, because that is where
   `.mobile-only` appears (style.css:1015) and col2 starts rendering its own copy of the
   legal links, the social icons and the copyright, on top of col3's. Between 769 and 992
   col2's block is hidden and there is nothing duplicated, so none of this may be widened to
   992 - doing that would delete the only copy of the legal links on tablet.

   Item 1  col3's legal links go. col2's list already reads Connect / Privacy Policy /
           Accessibility Statement / Terms & Conditions, and it sits with the rest of the
           navigation rather than orphaned at the bottom.
   Item 3  col3's badges go too; a copy now renders in col2 under the social icons, in place
           of the copyright that used to sit there (footer-mobile-badges.php).
   With both hidden, col3 is the 501(c)(3) line and one copyright - and col3 is last, so the
   copyright is the last thing in the footer, which is the ask. The space below it is stated
   here rather than left to the row's own 28px bottom padding. */
@media only screen and (max-width: 768px) {
    .footer_col.col3 .legal_links,
    .footer_col.col3 .featured_logos {
        display: none;
    }
    /* The badges are a flex row; the footer centres by `text-align`, which a flex container
       does not inherit into. The social icons above them are centred the same way. */
    .footer_col.col2 .featured_logos {
        justify-content: center;
        /* The social row above already carries `margin: 40px 0`, so the base 43px top margin
           would compound into an 83px gap. */
        margin-top: 0;
    }
    .footer_col.col3 .footer_legal_row {
        /* 17 Aug (Leshan), item 1 - "reduce the padding at the bottom after the copyright by
           2/3". Was --Sizing-Units-M (44).

           The 44 was never the whole gap, and changing it alone would have moved 138px to
           108 - a 22% trim, not the two thirds asked for. Below 768 the copyright IS the last
           thing in the footer, and the space under it is three boxes stacked:

               .footer_legal_row  margin-bottom   44   (this rule)
               .footer_row.row2   padding-bottom  28   (theme base, left alone)
               .footer_row_wrapper padding-bottom 66   (--Sizing-Units-L, cut to 0 below)
                                                  ---
                                                  138  measured, at 390 and at 750

           16 + 28 + 0 = 44, which is a 68% reduction and lands on the scale at both ends.
           Two declarations move because two of the three were doing the work; the row's own
           28 is the theme's and is not ours to retune for this. */
        margin-bottom: var(--Sizing-Units-2XS, 16px);
        /* 17 Aug (Leshan) - "add some spacing between 2026 GivePower Foundation and the text
           above it". The drawn 7 is set for one line of 501(c)(3) copy; on a phone that block
           wraps to three and 7 reads as touching. One step up the scale instead. */
        margin-top: var(--Sizing-Units-XS, 26px);
    }

    /* Item 3 - "left align the text under Join The Charge; it is left aligned on desktop, keep
       it consistent on all views." Below 768 the whole footer is centred by
       `footer .footer_row_wrapper { text-align: center }` (BugHerd 531, further down this
       file) and this paragraph simply inherits it; desktop states `start` explicitly.
       A rule on the element itself beats an inherited one whatever the specificity, so this
       lands despite that block coming later in the file.

       Stated on the subtitle only, because that is what was named. The H3 above it is still
       centred by the same inherited rule - the form labels under it are already left, so the
       subtitle now sits with the form rather than with the heading. */
    footer .footer_subtitle {
        text-align: left;
    }
    /* "some spacing between the logo and the address". It was 22.9, and none of that was
       stated - the logo is `display: inline` here (the desktop block is what makes it a
       block), so the whole gap was the inline box's descender slack. Making it a block both
       removes the accident and lets a margin apply at all: vertical margins do not affect
       inline boxes, so a margin-bottom alone would have done nothing. `width: fit-content`
       with auto side margins keeps the hit area on the logo rather than spanning the row,
       and keeps it centred with the rest of the footer. */
    .footer_col.col1 #footer-logo {
        display: block;
        width: fit-content;
        margin: 0 auto var(--Sizing-Units-M, 44px);
    }
}

/* ============================================================================
   2026 footer - Figma 6025:18902 "Footer Update_2026-08Aug12"
   ============================================================================
   Kept as one block rather than edited into the thirty-odd rules above, because the
   outgoing footer is a different shape, not a differently-spaced one: it stacked a
   newsletter on a two-column body and stood 1285 tall against a drawn 870.

   Desktop only (>=993). The existing max-width 1366 / 992 / 768 blocks further down still
   own the smaller breakpoints, and the update is only drawn at desktop.

   Drawn geometry, frame-relative (frame 1366 x 870):
       newsletter  x72  y306  w990   heading 56 · gap 18 · subtitle 26 · gap 18 · form 100
       columns     all at y599 - Left x70 w261 h204.33 · Links x393 w259 · Right x714 w580
       Left        logo 173x39 · +22 · contact 103 (three lines, gap 5) · +18 · social 22.33
       Right       nonprofit 36 · +7 · [copyright | legal links] one row · +34 · badges 65.67
   Columns sum exactly: 259 + 62 + 259 + 62 + 580 = 1222, the content width.
   ============================================================================ */
@media only screen and (min-width: 993px) {

    .footer_row.row2 .footer_col_wrapper {
        grid-template-columns: 259px 259px 580px;
        gap: 62px;
        align-items: start;
    }
    .footer_row.row2 {
        /* Drawn: columns end at 803.33 in an 870 frame, so 66.67 of ground below them.
           The theme had 30. */
        padding-bottom: 67px;
    }
    /* The old two-column-ish widths fought the grid; the track sizes above are the spec. */
    .footer_row .col1,
    .footer_row .col2 {
        max-width: none;
    }
    .footer_col {
        justify-content: flex-start;
    }

    /* ---- newsletter ---------------------------------------------------------- */
    footer h3 {
        line-height: 56px;   /* H3 Desktop is 46/56; the theme had 52 */
        margin-top: 0;
        /* `max-width: none` was wrong and cost several rounds on the yellow line.
           This h3 carries `background: var(--ocean)` and `position: relative` on purpose: it
           is an opaque MASK, so the decorative line passes behind the heading instead of
           running through the letters. The theme capped it at 330 so the mask hugged the
           text. Removing the cap let it span the full 990 measure, and its navy background
           then painted straight over the line's horizontal tail - the line was complete and
           unclipped the whole time, just buried. Confirmed with elementFromPoint: every
           sample along the tail returned this H3, while the vertical returned the wrapper.
           fit-content keeps the mask on the text and nothing else. The drawn 990 belongs to
           the block, not to this background. */
        width: fit-content;
        max-width: 100%;
    }
    footer .footer_subtitle {
        font-size: 16px;
        line-height: 26px;
        margin: 18px 0 0;
        max-width: 765px;
    }
    footer div.wpforms-container-full:not(:empty) {
        margin: 18px 0 0;
    }

    /* --- the yellow line (Vector 12, 6025:19011) ------------------------------------------
       Drawn in the 1366 x 870 frame as:
           box       x 465 .. 737   y 0 .. 335
           vertical  at x737, from the very top of the frame down to y235
           arc       r100, (737,235) -> (637,335)
           tail      y335, running left from x637 to x465
       so the line begins at the frame's top edge and its tail crosses the Join The Charge
       heading, which the frame puts at y306..362.

       The SVG itself is now correct (see footer.php). What was left was placement:
       animation.css:655 pulls `.line--wrapper` up by
       `-1 * (--footer-padding-top + --footer-padding-extra)`, which resolves to -128 and was
       tuned against the OLD 461-tall line. With the drawn 335 that lifts the line 105px above
       the frame. Two independent checks put the frame's top at 5275 on this page - the
       heading measures 5579 against a drawn 306, and the columns 5876 against a drawn 599 -
       and the wrapper sits at 5298, so the line wants -23, not -128.

       The rules that do this live in animation.css, NOT here: it is enqueued after this file
       (15th against 6th), so at equal specificity it wins on source order and an override
       written here does nothing at all. Verified by measuring - the line did not move. */

    /* The newsletter row is drawn at a fixed 990 - heading, subtitle and form all share that
       measure (6025:19003). It was `display:inline-block`, i.e. shrink-to-fit, so its width
       was whatever the form's intrinsic width happened to resolve to. That is why the SAME
       global footer measured 936.88 on /join/make-an-individual-impact/ and 764.75 on
       /join/partner-2026/, where it squeezed hard enough to stack the two inputs: the pages
       carry different WPForms instances, and shrink-to-fit picked up the difference.
       Stating the drawn width makes it identical everywhere and stops depending on content. */
    .footer_row.row1 {
        display: block;
        width: 990px;
        max-width: 100%;
        /* `.footer_row` sets `margin: auto`, which centred the block the moment it stopped
           being full width - it sat at x189 instead of flush with the columns below. */
        margin-left: 0;
        margin-right: auto;
    }
    footer div.wpforms-container-full:not(:empty),
    footer .wpforms-form {
        width: 100%;
    }
    /* 393 + 20 + 393 = 806 for the pair, then the drawn 20 gap, then the 164 button = 990.
       The two columns sit in a row that WPForms insets by -10 each side and pads back by 10,
       so 50% of 826 is 413 and the input inside it is the drawn 393, with the two 10s
       meeting to make the drawn 20 gutter. */
    /* Flush left. The fields were starting at x93 while the logo, address and heading all
       start at x73, so the Name box sat 20px right of everything above and below it. The
       design puts the input's left edge on the same line as the logo's (both x72). */
    /* !important throughout this form block, and it is earned rather than reached for. The
       footer form renders with WPForms' MODERN renderer - the container carries
       `.wpforms-container.wpforms-container-full.wpforms-render-modern` - and that
       stylesheet's own selectors stack more classes than anything reasonable here can. The
       plain versions of these rules were written first and measured: not one of them moved
       the box. There is no theme !important to match, so ours are the only ones. */
    footer div.wpforms-container-full,
    footer div.wpforms-container-full .wpforms-form,
    footer div.wpforms-container-full .wpforms-field-container,
    footer div.wpforms-container-full .wpforms-field {
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
    }
    footer .wpforms-field-container {
        width: 806px;
        max-width: 100%;
    }
    /* Stated outright rather than worked out through WPForms' own -10 / +10 inset trick.
       That trick is why the inputs came out 373 instead of 393, and why the two columns sat
       side by side on one page and stacked on the other - whether the row is a flex container
       at all depends on which WPForms stylesheet the page loaded. Two fixed 393 tracks and a
       20px gap is the drawn spec and cannot resolve differently per page. */
    footer div.wpforms-container-full .wpforms-layout-row {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        gap: 20px !important;
        margin: 0 !important;
        /* 806 stated, not 100%. At 100% the row resolved to 826 - WPForms sizes it as
           `calc(100% + 20px)` to pay for its own column insets - and the 20px of slack then
           landed differently on the two pages: as a 20px gap on one and a 40px gap on the
           other, so the Email box sat at 486 on one page and 506 on the other. */
        width: 806px !important;
        justify-content: flex-start !important;
    }
    footer div.wpforms-container-full .wpforms-layout-column-50 {
        flex: 0 0 393px !important;
        width: 393px !important;
        max-width: 393px !important;
        padding: 0 !important;
    }
    /* The form is one row: fields (806) · gap 20 · button (164) = the drawn 990. */
    footer div.wpforms-container-full .wpforms-form {
        display: flex !important;
        flex-direction: row !important;
        align-items: flex-end !important;
        /* NOT `gap: 20px`. The form's first flex child is a zero-width element WPForms emits
           ahead of the fields, so a gap put 20px in front of the field container and shifted
           every input right of the logo and heading. The 20 belongs between the fields and
           the button specifically, so it is a margin on the button. WPForms sets the gap
           itself, so this needs !important like the rest of the block. */
        gap: 0 !important;
    }
    footer .wpforms-submit-container {
        width: 164px;
        flex: 0 0 164px;
        margin: 0 0 0 20px;
    }
    /* Input box: 62 tall, 8 radius, 1px #DDD, 16 padding (I6025:19007;70:4981). */
    footer div.wpforms-container-full .wpforms-form input[type="text"],
    footer div.wpforms-container-full .wpforms-form input[type="email"] {
        /* 393 stated, not 100% of a column: at 100% the box inherits whatever padding the
           column happens to carry, which differed between the two pages - 373 on one, 393 on
           the other, from the same global footer. */
        width: 393px !important;
        max-width: 100% !important;
        height: 62px !important;
        padding: 16px !important;
        border: 1px solid var(--Old-Colours-Secondary-Light, #DDDDDD);
        border-radius: 8px;
    }

    /* ---- left column --------------------------------------------------------- */
    /* (1,2,0), which is what it takes to beat `footer a:not(#menu--title, .fl-button)` at
       interface.css:866 - :not() carries the specificity of its most specific argument, and
       that one holds an ID. Without this the logo stays `display: inline`, so neither the
       173px width nor the 22px gap below it applies, and the contact block rides up 22px.
       The same rule paints the yellow underline every footer link carries, hence the
       background reset - a logo is not a link that wants underlining. */
    .footer_col.col1 #footer-logo {
        display: block;
        width: 173px;
        margin: 0 0 22px;
        background-image: none;
        padding-bottom: 0;
    }
    .footer_col.col1 #footer-logo img {
        display: block;
        width: 173px;
        height: auto;
    }
    footer address {
        font-size: 14px;
        line-height: 19px;
        margin: 0;
    }
    .footer_col.col1 .footer_email,
    .footer_col.col1 .footer_phone {
        font-size: 14px;
        line-height: 20px;
        margin: 5px 0 0;
    }
    /* --- type. Every one of these was measured off the render, not assumed. Weight is what
       made the whole footer read heavier than the Figma: four separate elements were one or
       two steps light or heavy, which no amount of correct geometry fixes. ---------------- */

    /* Lato Heavy 18/30 with the asterisk in Sun Yellow (I6025:19007;70:4984) */
    footer div.wpforms-container-full .wpforms-field-label {
        font-size: 18px !important;
        line-height: 30px !important;
        font-weight: 800 !important;
        color: var(--white) !important;
    }
    footer div.wpforms-container-full .wpforms-required-label {
        color: var(--GivePower-Palette-Sun-Yellow, #FFC300) !important;
    }
    /* Button Text Desktop: Lato Heavy 19, tracking 0.57, Ocean on the blue gradient (6025:19010) */
    footer div.wpforms-container-full button[type="submit"] {
        font-size: 19px !important;
        font-weight: 800 !important;
        letter-spacing: 0.57px !important;
        line-height: normal !important;
    }
    /* Lato Bold, not Regular (6025:18999 / 6025:19000) */
    .footer_col.col1 .footer_email,
    .footer_col.col1 .footer_email a,
    .footer_col.col1 .footer_phone,
    .footer_col.col1 .footer_phone a {
        font-weight: 700;
    }
    /* Lato Heavy - the theme renders footer links at 700 (interface.css:866) */
    .footer_col.col2 #menu-footer a {
        font-weight: 800;
    }
    /* Lato Regular - these are NOT the bold page links above (6025:18980..82) */
    .footer_col.col3 .legal_links a {
        font-weight: 400;
    }

    footer .social_networks {
        /* was 60 above / 66 below, which is most of why the column stood 524 tall.
           35, not the 18 the Figma shows between the contact FRAME and the icons: that frame
           carries 17px of trailing slack below the phone line, so 18 from the frame is 35
           from the last line of text - and the text is what is actually visible. Lands the
           icons at the drawn y182 and the column at 204.33.
           Spacing only - the icons' own colour, size and gap are set OUTSIDE this media
           query so they are identical at every width. */
        margin: 35px 0 0;
    }

    /* ---- middle column ------------------------------------------------------- */
    #menu-footer {
        display: flex;
        flex-direction: column;
        gap: 26px;
        margin: 0;
        padding: 0;
        list-style: none;
    }
    /* The line-height has to go on the LI, not only the A. The links are `display: inline`,
       so the line box is set by the li's own strut - measured at 18.08/30.08 - and an inline
       child's 20px line-height cannot shrink it. Setting the anchor alone left every item
       30.08 tall and the column 254 against a drawn 204. */
    #menu-footer li {
        margin: 0;
        font-size: 14px;
        line-height: 20px;
    }
    /* `.footer_col.col2` is carried purely for specificity. The link styles come from
       `footer a:not(#menu--title, .fl-button)` at interface.css:866, and :not() takes the
       specificity of its most specific argument - an ID - so that rule scores (1,1,1) and
       beats a plain `#menu-footer a` at (1,0,1). This is (1,2,1).
       20px is the drawn link box; with the 26 gap it gives the drawn 46 pitch. */
    .footer_col.col2 #menu-footer a {
        font-size: 14px;
        line-height: 20px;
        letter-spacing: 0.42px;
    }

    /* ---- right column -------------------------------------------------------- */
    .footer_col.col3 .small {
        font-size: 12px;
        line-height: 18px;
        margin: 0;
    }
    .footer_legal_row {
        display: flex;
        align-items: baseline;
        margin-top: 7px;
    }
    .footer_legal_row .copyright {
        flex: 0 0 175px;   /* copyright occupies x0..169, links start at x175 */
        font-size: 12px;
        line-height: 26px;
        margin: 0;
    }
    .footer_col.col3 .legal_links ul {
        /* flex-direction is the one that matters: `footer nav ul` at interface.css:849 is
           ALREADY display:flex, but column. Setting display alone changed nothing and the
           three links kept stacking - 112 tall where the design puts them on one 17px row. */
        display: flex;
        flex-direction: row;
        gap: 11px;
        list-style: none;
        margin: 0;
        padding: 0;
    }
    /* Same strut problem as the page links above - set it on the li as well as the anchor. */
    .footer_col.col3 .legal_links li {
        font-size: 12px;
        line-height: 17px;
    }
    .footer_col.col3 .legal_links a {
        font-size: 12px;
        line-height: 17px;
        letter-spacing: 0.36px;
    }
    footer .featured_logos {
        gap: 32.78px;
        margin-top: 34px;
    }
    footer .featured_logos img {
        display: block;
        width: 65.67px;
        height: 65.67px;
    }
}

footer div.wpforms-container-full .wpforms-form .wpforms-field-content h2 {
    background-color: var(--ocean);
    color: var(--white);
    font-family: var(--font-headline);
    font-size: 46px;
    font-size: 2.88rem;
    font-style: normal;
    font-weight: 600;
    line-height: 52px;
    /* 113.043% */
    line-height: 3.25rem;
    /* 113.043% */
    max-width: max-content;
}

footer div.wpforms-container-full .wpforms-form {
    align-items: flex-end;
    display: flex;
    gap: 20px;
    justify-content: flex-start;
    max-width: 1006px;
}

footer div.wpforms-container-full .wpforms-field-container {
    display: flex;
    flex-wrap: wrap;
    gap: 0 20px;
    width: 81%;
    width: 100%;
}

footer .wpforms-form .wpforms-field-container .wpforms-field.wpforms-field-content {
    padding: 0;
    width: 100%;
}

footer .wpforms-form .wpforms-field-container .wpforms-field {
    padding: 0;
    width: 100%;
}

footer div.wpforms-container-full .wpforms-form input[type=text],
footer div.wpforms-container-full .wpforms-form input[type=email] {
    background-color: var(--white);
    border-color: var(--light);
    border-radius: 8px;
    color: var(--ocean) !important;
    font-family: var(--font-content);
    font-size: 28px;
    font-size: 1.75rem;
    font-style: normal;
    font-weight: 400;
    height: 62px !important;
    line-height: 44px;
    /* 157.143% */
    line-height: 2.75rem;
    /* 157.143% */
    /* min-width: 394px; */
    padding: var(--Sizing-Units-2XS);
}

footer div.wpforms-container-full .wpforms-form input[type=email]::placeholder {
    color: var(--ocean);
    opacity: 0.2882;
    font-size: 28px;
    font-size: 1.75rem;
    line-height: 44px;
    line-height: 2.75rem;
}

footer div.wpforms-container-full .wpforms-form input[type=text]:focus:not(:active),
footer div.wpforms-container-full .wpforms-form input[type=email]:focus:not(:active),
footer div.wpforms-container-full .wpforms-form button[type=submit]:focus:not(:active) {
    outline: 2px solid white !important;
    outline-offset: 5px;
}

/* BH470 - footer newsletter labels must stay white on the dark footer.
   form-divider.css declares `--form-label: var(--black)` on every
   .wpforms-container and its `html div.wpforms-container-full .wpforms-form
   .wpforms-field-label` rule ties this block on specificity while loading
   later, so the colour declaration below loses on source order. Scoping the
   custom property instead wins on specificity (0,1,2 vs 0,1,0) and is
   therefore immune to enqueue order and to WPForms re-rendering the form. */
/* BH459 - the same scope re-points the success tokens: the footer form sits
   outside .row--form / .row--newsletter-signup, so it was falling back to the
   WPForms default confirmation (#e0ffc7 box, 1px #b4d39b border, #333 text). */
footer div.wpforms-container-full {
    --form-label: var(--white);
    --form-success-color: var(--white);
}

footer div.wpforms-container-full .wpforms-confirmation-container-full {
    background: var(--form-success-background-color);
    border: none;
    border-radius: 8px;
    color: var(--form-success-color);
    margin: 0;
    padding: 0;
}

footer div.wpforms-container-full .wpforms-confirmation-container-full p {
    color: var(--form-success-color);
}

footer div.wpforms-container-full .wpforms-form .wpforms-field-label {
    color: var(--white);
    font-family: var(--font-headline);
    font-size: 18px;
    font-size: 1.13rem;
    font-weight: 600;
    line-height: 29px;
    line-height: 1.81rem;
    margin: 0;
    padding: 0;
}

footer div.wpforms-container-full .wpforms-form button[type=submit],
footer div.wpforms-container-full .wpforms-form button[type=submit]:hover,
footer div.wpforms-container-full .wpforms-form button[type=submit]:active {
    --glow-color: var(--sweet-water);
    background: linear-gradient(0deg, #4ABFBF -0.65%, #71DCDC 99.35%) !important;
    box-shadow: 0 0 0 0 hsl(from var(--glow-color) h s l /.5);
    color: var(--ocean) !important;
    font-family: var(--font-content);
    font-size: 19px !important;
    font-size: 1.19rem !important;
    font-weight: 900;
    gap: 0;
    height: auto;
    letter-spacing: 0.57px;
    line-height: normal;
    padding: 20px 30px !important;
    transition: box-shadow 800ms ease-in-out, transform .25s ease-in-out !important;
    width: max-content;
}

footer div.wpforms-container-full .wpforms-form button[type=submit]:after {
    display: none;
}

footer div.wpforms-container-full .wpforms-form button[type=submit]:hover {
    box-shadow: 0 0 44px 0 hsl(from var(--glow-color) h s l /.75);
    transform: scale(1.05);
    transition: box-shadow 300ms ease-in-out, transform .25s ease-in-out !important;
}




/*language switch*/
@media only screen and (max-width: 992px) {

    .trp-language-item,
    .trp-language-item:focus span,
    .trp-language-item:hover span,
    .trp-language-item span {
        padding: 0;
        margin: 0 !important;
        color: var(--GivePower-Palette-White, #FFF) !important;
        font-family: var(--font-content);
        font-size: 19px;
        font-style: normal;
        font-weight: 600;
        line-height: normal;
    }

    /* BugHerd 582 - the three selectable languages are anchors and keep
       TranslatePress's own 5px/4px padding, but the current language is a plain
       element, so the rule above zeroes it and that row renders shorter than
       the rest. Give it the same box as its siblings. Both numbers are measured
       off the sibling rows rather than chosen: 5px/4px is their padding and
       35px is their rendered height, the remainder coming from the anchor the
       current-language row does not have. */
    .trp-current-language-item__wrapper > .trp-language-item {
        padding-top: 5px;
        padding-bottom: 4px;
        min-height: 35px;
        box-sizing: border-box;
        display: flex;
        align-items: center;
    }

    .trp-language-item:before {
        display: none !important;
    }

    #menu-main .has_submenu.language>button[aria-expanded="true"]~.sub-menu[data-depth='0'] {
        overflow: visible;
    }
}

.trp-switcher-dropdown-list,
.trp-switcher-dropdown-list[hidden] {
    display: flex;
    max-height: unset;
    align-items: flex-start;
}

.trp-language-switcher {
    position: static;
}

.trp-shortcode-anchor {
    display: none;
}

@media only screen and (min-width: 993px) {

    .trp-language-item,
    .trp-language-item:focus span,
    .trp-language-item:hover span,
    .trp-language-item span {
        color: var(--ocean) !important;
    }

    .mainmenu_item.has_submenu.language button {
        color: transparent;
        width: 21px;
        overflow: hidden;
    }

    .mainmenu_item.has_submenu.language button:before {
        content: "";
        width: 22px;
        height: 22px;
        background-image: url(/wp-content/uploads/Vector.svg);
        background-size: contain;
        background-repeat: no-repeat;
        flex-shrink: 0;
    }

    .language.has_submenu .sub-menu[data-depth='0'] {
        width: 130px;
        border-radius: 8px;
        padding: 8px !important;
        grid-template-columns: 130px;
        min-height: unset;
    }

    .trp-shortcode-overlay {
        position: static;
        padding: 0 0;
    }

    .trp-language-item-name {
        color: #182C39 !important;
        font-family: var(--font-content);
        font-size: 16px;
        font-size: 1rem;
        font-style: normal;
        font-weight: 500;
        line-height: 19px;
        line-height: 1.19rem;
    }

    .trp-shortcode-arrow {
        display: none;
    }

    div.trp-language-item:before {
        content: "\f107";
        display: inline-block;
        font-family: "Font Awesome 5 Pro";
        font-size: 10px;
        font-size: 0.63rem;
        line-height: 1;
        font-weight: 400;
        margin-left: 8px;
        transition: all .25s ease;
        padding-bottom: 0;
        color: #44B7B6;
        transform: rotate(270deg);
        position: absolute;
        left: -10px;
        left: -25px;
        top: 10px;
    }

    div.trp-language-item {
        color: #182C39;
        font-family: var(--font-content);
        font-size: 16px;
        font-size: 1rem;
        font-style: normal;
        font-weight: 500;
        line-height: normal;
        padding: 0px 0px;
        margin-left: 20px;
        position: relative;
        text-decoration: none;
        background-image: linear-gradient(transparent, transparent);
        background-repeat: no-repeat;
        background-position: left bottom;
        background-size: 100% 1px;
        transition: background-size .5s ease-in-out;
        display: inline;
        padding-bottom: 4px;
        padding-top: 5px;
        padding-left: 0;
        padding-right: 0;
    }
}

/*******************/
/*language menu fix*/
/*******************/

html:not([lang="en-CA"]) #menu-main .menu-desktop {
    max-width: unset;
    flex-wrap: wrap;
    row-gap: 0;
    padding-top: 7px;
    padding-bottom: 7px;
    max-width: 600px;
    @media only screen and (max-width: 992px) {
        max-width: 100%;
        padding: 16px 18px;
    }
}

html:not([lang="en-CA"]) .menu-desktop>li.mainmenu_item>a, 
html:not([lang="en-CA"]) .menu-desktop>li.has_submenu>button, 
html:not([lang="en-CA"]) .menu-desktop>li.mainmenu_button a{
    padding: 4px 0 4px;
}

html:not([lang="en-CA"]) #menu-main .button_cta button{
    padding: 16px 26px 16px !important;
    height: 77px;
    @media only screen and (max-width: 992px) {
        padding: 16px 30px !important;
        height: 44px;
    }
    @media only screen and (max-width: 768px) {
        padding: 14px 10px !important;
        height: 38px;
    }
}












/***************************************************************/
/***************************************************************/
/* Responsive */
/***************************************************************/
/***************************************************************/

/*****************/
/* Large desktop */
/*****************/
@media only screen and (max-width: 1366px) {

    /* VARS */
    :root {
        /* --header-height: 100px; */
        --content-padding: 60px;
    }

    /* Header */
    /* #menu-main .menu-desktop >li.mainmenu_item >a {
        font-size:16px;
        font-size:1rem;
        padding: 0;
    } */
    #menu-main .menu-desktop li.mainmenu_item.menu_CTA {
        margin: 0;
    }

    #menu-main .menu-desktop li.mainmenu_item {
        margin-bottom: 0;
    }

    #menu-main .mainmenu_home>a img {
        max-height: 52px;
    }

    /**********/
    /* Footer */
    /**********/
    footer {
        --footer-padding-top: 268px;
        --footer-padding-extra: 4px;
    }

    .footer_row_wrapper {
        padding: var(--footer-padding-top) var(--content-padding) 0;
    }

    .footer_row {
        gap: 60px;
    }

    .footer_row.row1 {
        padding-bottom: 28px;
    }

    footer nav ul {
        align-content: unset;
    }

    .footer_row.row2 .footer_col_wrapper {
        grid-template-columns: 220px 230px auto;
        gap: 19px;
    }
}



/**************/
/* Menu break */
/**************/
@media only screen and (max-width: 1200px) {

    #menu-main .menu-desktop {
        max-width: 400px;
        flex-wrap: wrap;
        row-gap: 0;
        padding-top: 7px;
        padding-bottom: 7px;
    }

    .menu-desktop>li.mainmenu_item>a,
    .menu-desktop>li.has_submenu>button,
    .menu-desktop>li.mainmenu_button a {
        padding: 4px 0 4px;
    }

    #menu-main .menu-desktop li.mainmenu_item {
        z-index: 99;
    }

    .menucol3.joincharge .sub-menu[data-depth='0'] {
        /* `left: -36px` removed for the same reason as the base rule: it stacked on the
           shared centring rather than replacing it. `top` is left as it was, since it is a
           vertical question and separate from the alignment being fixed here. */
        top: 37px;
    }

    .sub-menu[data-depth='0'] {
        top: 71px;
        margin: 0;
    }

    #menu-main .button_cta button {
        padding: 26px 45px 27px !important;
    }

    .language.has_submenu .sub-menu[data-depth='0']{
        top:40px;
    }
}





/**********/
/* Tablet */
/**********/
@media only screen and (max-width: 992px) {

    /* VARS */
    :root {
        --admin-bar-height: 46px;
        --header-height: 56px;
        --content-padding: 36px;
        --content-padding-top: 100px;
    }
    
    header.fl-page-header .header_inner:has(.button_cta){
        background-color: var(--ocean);
    }
    #menu-main .button_cta button {
        padding: 10px 22px !important;
    }

    header.fl-page-header .header_inner {
        height: var(--header-height);
        margin: auto;
        max-width: 100vw;
        /* overflow: hidden; */
        padding: 0;
    }

    .menu-desktop-wrapper .mainmenu_home {
        display: none;
    }

    .menu-desktop-wrapper .button_cta.bolt {
        display: none;
    }

    #menu-main {
        align-items: center;
        display: flex;
        flex-wrap: wrap;
        justify-content: right;
        list-style: none;
        margin: 0;
        /* overflow: hidden; */
        padding: 0;
        position: relative;
    }

    #menu-main .menu-desktop-wrapper {
        margin-top: 10px;
        width: 100%;
        padding: 25px 18px 25px 7px;
        background: var(--ocean);
        border-radius: 20px;
        max-height: calc(100vh - 90px);
        max-height: 80vh;
        overflow-y: hidden;
    }

    #menu-main #menu-main-desktop {
        display: none
    }

    #menu-mobile-primary {
        align-items: center;
        display: flex;
        flex-basis: 100%;
        height: 100%;
        justify-content: space-between;
        list-style: none;
        padding: 12px 26px;
        z-index: 3;
    }

    #menu-mobile-primary .menu-mobile-home {
        margin-right: auto;
    }

    #menu-mobile-primary .menu-mobile-hamb {
        line-height: 0;
        background: var(--ocean);
        padding: 6px 8px;
        border-radius: 14px;
        height: var(--header-height);
    }

    #menu-mobile-primary li img {
        height: 100%;
        max-height: 52px;
    }

    #menu-mobile-primary li a {
        background: initial
    }

    #menu-mobile-primary .mobile_menu_toggle {
        background: rgba(255, 255, 255, 0.20);
        border: 0;
        font-size: 0;
        padding: 10px;
        border-radius: 16px;
    }

    #menu-mobile-primary .mobile_menu_toggle:after {
        /* BugHerd 547, 588 - was "center right", which in the background
           shorthand reads as position x=center y=right, i.e. it pins the glyph
           to the right edge of the button rather than centring it. Plain
           "center" centres on both axes. Reported on mobile and again on
           desktop, where the offset is larger; one declaration covers both. */
        background: url(/wp-content/uploads/Group-11279.svg) center / contain no-repeat;
        content: "";
        display: inline-block;
        width: 44px;
        height: 24px;
        transition: all .25s ease;
    }

    #menu-mobile-primary .mobile_menu_toggle[aria-pressed="true"]:after {
        background: url(/wp-content/uploads/mobile_menu_close.svg) center right / contain no-repeat;
        height: 24px;
        width: 44px;
        background-position: center;
        transform: rotate(180deg);
    }

    #menu-main-mobile {
        align-items: flex-start;
        align-self: stretch;
        background: var(--Beige);
        border-bottom-left-radius: var(--border-radius-img);
        border-bottom-right-radius: var(--border-radius-img);
        box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.20);
        display: flex;
        flex-direction: column;
        gap: 42px;
        /* height: calc(100vh - var(--header-height));
        height: calc(100lvh - var(--header-height)); */
        height: auto;
        left: 0;
        list-style: none;
        margin: 0 var(--content-padding) var(--content-padding);
        max-width: 100vw;
        overflow: auto;
        padding: 50px var(--Sizing-Units-XS) var(--Sizing-Units-XS);
        position: fixed;
        top: calc(var(--header-height) - 30px);
        /* 30px overlap to prevent border radius glitch on menu close */
        /* width: 100%; */
        width: calc(100lvw - (var(--content-padding) * 2));
        z-index: 1;
    }

    /* when wordpress admin bar is present */
    body.admin-bar #menu-main-mobile {
        /* height: calc(100vh - var(--header-height) - var(--admin-bar-height));
        height: calc(100lvh - var(--header-height) - var(--admin-bar-height)); */
        top: calc(var(--header-height) + var(--admin-bar-height) - 24px);
        /* 20px overlap to prevent border radius glitch on menu close */
    }

    #menu-main-mobile li {
        align-self: stretch;
    }

    #menu-main-mobile li a {
        background-image: none;
        /* disables animated underline */
    }

    #menu-main-mobile>li>button,
    #menu-main-mobile>li>a {
        align-items: center;
        align-self: stretch;
        background-color: transparent;
        border-color: transparent;
        color: var(--Purple);
        display: flex;
        font-size: 24px;
        font-size: 1.5rem;
        font-style: normal;
        font-weight: 600;
        justify-content: center;
        line-height: normal;
        padding: 0;
        width: 100%;
    }

    #menu-main-mobile>li>button[aria-expanded="true"]:after {
        transform: rotate(180deg);
    }

    #menu-main .menu-desktop-wrapper {
        display: none;
    }

    #menu-main .menu-desktop .mainmenu_home {
        display: none;
    }

    body.mobile_menu_open {
        overflow: hidden
    }


    #menu-main .menu-desktop {
        display: block;
        max-width: 100%;
        padding: 16px 18px;
        flex-direction: column;
        margin: 0;
        overflow-y: auto;
        max-height: calc(100vh - 150px);
    }

    .menu-desktop>li.mainmenu_item>a,
    .menu-desktop>li.has_submenu>button,
    .menu-desktop>li.mainmenu_button a {
        font-size: 30px;
        font-size: 1.88rem;
        font-style: normal;
        font-weight: 600;
        line-height: normal;
        width: 100%;
        display: block;
        text-align: left;
        height: initial;
    }

    #menu-main .menu-desktop li.mainmenu_item {
        width: 100%;
        height: initial;
        margin-bottom: 20px;
    }

    .menu-desktop>li.has_submenu>button:after {
        font-size: 29px;
        font-size: 1.81rem;
        font-weight: 100;
        float: right;
    }

    .menu-desktop>li.mainmenu_item>a:hover,
    .menu-desktop>li.has_submenu>button:hover,
    .menu-desktop>li.mainmenu_button a:hover {
        animation: none;
        background-image: none;
    }

    .has_submenu>button[aria-expanded="false"]~.sub-menu[data-depth='0'] {
        position: relative;
        top: 0;
        left: 0;
        transform: initial;
        display: block;
        visibility: visible;
        opacity: 1;
        overflow: hidden;
        max-height: 0;
        display: block;
        min-height: initial;
    }

    #menu-main .menu-desktop li.mainmenu_item.megasub_image {
        display: none
    }

    #menu-main .sub-menu[data-depth='0'] {
        position: relative;
        top: 0;
        left: 0;
        visibility: visible;
        opacity: 1;
        display: block;
        transform: initial;
        max-height: 1px;
        background: initial;
        box-shadow: initial;
        min-height: initial;
        transition: all .5s ease;
        width: 100%;
    }

    #menu-main .has_submenu>button[aria-expanded="true"]~.sub-menu[data-depth='0'] {
        height: initial;
        visibility: visible;
        opacity: 1;
        max-height: 500px;
        height: auto;
        transition: all .5s ease;
        overflow: hidden;
        border-radius: 0;
    }

    #menu-main .menu-desktop li.mainmenu_item .megasub_content {
        padding: 0;
    }

    #menu-main .sub-menu[data-depth='1']>li a {
        color: var(--white)
    }

    /* BugHerd 510 - submenu links inherited the 16px desktop size while the
       top-level items render 30px; 20px keeps the hierarchy readable. */
    #menu-main .sub-menu .mainmenu_item a {
        font-size: 20px;
    }

    #menu-main .sub-menu[data-depth='1']>li {
        margin: 0;
    }

    .sub-menu .mainmenu_item.menu_programs.showtitle h3,
    .sub-menu .mainmenu_item.showtitle h3,
    .sub-menu .mainmenu_item h3 {
        color: var(--white);
        font-size: 16px;
        font-size: 1rem;
        padding-bottom: 0;
        font-weight: 600;
    }












    /**********/
    /* Footer */
    /**********/
    footer {
        --footer-padding-top: 148px;
        --footer-padding-extra: 0px;
        /* The 24px top corner radius that used to sit here is removed. It was the old mobile
           treatment from when this breakpoint had no curve of its own, and it is redundant now
           that the arch in the base rule runs at every width.

           It was also actively breaking the corners. A radius clips the element's background
           away, so the footer stopped painting inside those corners and the section behind
           showed through - the same photography bleed the arch was rebuilt to stop. Measured
           at 992: the footer's box started at y=400 but it did not paint until y=416, a 16px
           dead band, which is what a 24px radius gives one pixel in from the edge
           (24 - sqrt(24^2 - 23^2) = 17.1). Above 993 the radius was already 0, which is
           exactly why the arch worked there and nowhere else. */
        /* Was -66px, which left the same 25.5px of shoulder hanging below the previous row
           that -100 did at desktop (the arch is 91.5px deep at 992). Now inherits the base
           rule's calc(-1 * var(--arch-depth)) so the overlap tracks the curve here too. */
    }

    .footer_row_wrapper {
        padding: var(--footer-padding-top) var(--content-padding) var(--Sizing-Units-M);
    }

    .footer_row {
        flex-wrap: wrap;
        justify-content: space-between;
    }

    .footer_row.row1 {
        padding-bottom: 18px;
    }

    /*
    .footer_row.row1 .col1 {
        max-width: 220px;
    }
    .footer_row.row2 .col1 {
        max-width: 205px;
    }
    */
    .footer_col.col2 .small p a,
    .footer_row.row2 .small p a {
        display: table !important;
    }

    /* The 200vw ellipse that used to redraw the curve here is gone, along with the mask it
       had to switch off. The base rule now paints one arch at every width. */

    .footer_row.row2 .footer_col_wrapper {
        gap: 30px;
        grid-template-columns: 215px 180px auto;
    }

    phone {
        white-space: nowrap;
        display: block;
    }

    footer div.wpforms-container-full .wpforms-form .wpforms-field-content h2 {
        max-width: 200px;
    }

    footer .bolt a.fl-button,
    footer .bolt a.fl-button:hover,
    footer .bolt a.fl-button:active {
        padding: 15px 10px 20px !important;
        font-size: 17px;
        font-size: 1.06rem;
    }

    footer a:not(#menu--title, .fl-button) {
        font-size: 16px;
        font-size: 1rem;
    }
}

/**********/
/* Mobile */
/**********/
@media only screen and (max-width: 768px) {

    /* VARS */
    :root {
        --admin-bar-height: 32px;
        --header-height: 50px;
        --content-padding: 24px;
        --content-padding-top: 80px;
    }

    header.fl-page-header {
        padding: calc(var(--content-padding) / 2) var(--content-padding);
    }

    body.admin-bar header.fl-page-header {
        margin-top: 46px;
        max-width: 100vw;
        left: initial;
        transform: initial;
    }

    body.admin-bar.menu_main_out header.fl-page-header {
        transform: translateY(-46px);
    }

    header.fl-page-header .header_inner {
        border-radius: var(--border-radius-img);
    }

    #menu-mobile-primary {
        height: 50px;
        gap: 0;
        padding: 0;
    }

    #menu-mobile-primary li img {
        height: 30px;
        width: 135px;
    }

    #menu-mobile-primary .menu-mobile-home {
        position: absolute;
        left: 15px;
    }

    #menu-mobile-primary .menu-mobile-hamb {
        width: 100%;
        text-align: right;
        padding-right: 15px;
    }

    #menu-mobile-primary .mobile_menu_toggle {
        height: 38px;
        width: 50px;
        background-color: rgba(255, 255, 255, 0.20);
        border-radius: 8px;
        padding: 10px;
    }

    #menu-mobile-primary .mobile_menu_toggle:after {
        height: 16px;
        width: 30px;
    }

    #menu-mobile-primary .mobile_menu_toggle[aria-pressed="true"] {
        height: 38px;
        width: 50px;
    }

    #menu-mobile-primary .mobile_menu_toggle[aria-pressed="true"]:after {
        height: 16px;
        width: 30px;
        transform: rotate(180deg);
        background-position: center;
        background-size: cover;
    }

    #menu-main-mobile {
        gap: 28px;
        margin: 0 var(--content-padding);
        padding: 50px 16px 21px;
        width: calc(100lvw - calc(var(--content-padding) * 2));
    }

    #menu-main .button_cta {
        right: 81px;
        position: absolute;
    }

    #menu-main .button_cta button {
        font-size: 16px;
        font-size: 1rem;
        font-style: normal;
        font-weight: 800;
        line-height: normal;
        letter-spacing: 0.48px;
        padding: 10px 18px !important;
        width: 86px;
        height: 38px;
        border-radius: 8px;
    }

    header .bolt a.fl-button span.fl-button-text::after,
    header .bolt button::after {
        display: none
    }









    /* Footer */
    footer {
        --footer-padding-top: 122px;
        padding-bottom: 0;
    }

    .footer_row_wrapper {
        /* 17 Aug (Leshan), item 1: bottom was --Sizing-Units-L (66) and is the largest of the
           three boxes making up the 138px under the copyright - the arithmetic is written out
           at `.footer_col.col3 .footer_legal_row` earlier in this file.

           Changed here rather than overridden from that block on purpose. This rule is
           (0,1,0) and sits LATER in the file, so an override written up there would have had
           to out-specify it to work at all - the kind of thing that reads as a mistake six
           months from now. The top and side padding are untouched.

           Only the phone block moves. Between 769 and 992 the copyright is not the last
           element (the legal links and badges follow it) and the trailing space there is
           already 74px, within 7px of desktop's - so there was nothing to trim. */
        padding: var(--footer-padding-top) var(--content-padding) 0;
    }

    .footer_row {
        flex-direction: column;
        gap: var(--Sizing-Units-2XS);
    }

    .footer_row.row1 {
        gap: 36px;
    }

    .footer_col {
        width: 100%;
    }

    .footer_col.col3 {
        order: -1
    }

    .footer_row.row2 {
        padding: 0 0 28px;
    }

    .footer_row.row2 .col1,
    .footer_row .col2 {
        max-width: 100%;
    }


    phone {
        display: inline-block;
    }

    footer div.wpforms-container-full .wpforms-form {
        display: block;
    }

    footer div.wpforms-container-full .wpforms-form input[type=text],
    footer div.wpforms-container-full .wpforms-form input[type=email] {
        margin-bottom: 13px;
    }

    .footer_row.row2 .footer_col_wrapper {
        grid-template-columns: 1fr;
    }

    .footer_marquee {
        padding-top: 200px;
        margin-bottom: -50px;
    }

    footer .social_networks {
        margin: 40px 0;
    }

    .footer_col.col1 nav ul,
    .footer_col.col2 nav ul {
        margin-top: 0;
        display: block;
        line-height: 50px;
    }

    footer a:not(#menu--title, .fl-button) {
        font-size: 18px;
        font-size: 1.13rem;
    }

    /* BugHerd 531 - centre the whole footer on phones. Form labels stay
       left-aligned per the reference screenshot. */
    footer .footer_row_wrapper {
        text-align: center;
    }
    footer .footer_col.col2 nav,
    footer .footer_col.col2 nav ul {
        width: 100%;
    }
    footer .social_networks {
        justify-content: center;
    }
    footer a#menu--title {
        margin-inline: auto;
    }
    footer div.wpforms-container-full .wpforms-form label {
        text-align: left;
    }

    .footer_row.row1 {
        padding-bottom: 34px;
        padding-top: 0;
        display: block;
    }

    /* The 250vw ellipse that used to redraw the curve here is gone; see the base footer rule. */

    footer div.wpforms-container-full .wpforms-form button.wpforms-submit {
        /* width: 100%; */
        margin-top: 0;
    }

    footer a#menu--title {
        margin-bottom: 44px;
        margin-top: 24px;
    }

    footer a#menu--title {
        max-width: 180px;
    }

}

/* BugHerd 220 / 541 - the white bar above the nav in the client's screenshots
   is the browser's overscroll bounce canvas, which paints white unless the
   root element has a background. */
html {
    background-color: #1A3242;
}

/* BugHerd #516 - Brie was "offered a ghostly HEAR FROM YOU on a stark white background".
   That heading uses the energy-gradient treatment, so when the row's photo fails to load
   there is nothing behind the type and it reads as white on white. The photo is loading
   again (that was #423), but this row has 404'd its background once already, so give it a
   navy floor that guarantees the copy stays legible if it ever happens again. */
#inquire > .fl-row-content-wrap {
    background-color: #1D3A4A;
}

/* BugHerd 24 / 27 / 34 - the Donately form renders 0px tall in the HTML and
   injects ~750px a second later, so back-navigation restored scroll against a
   shorter page and visibly jumped. Reserve the form's height up front. */
.fl-node-4rjfmnoxb3iv #dntly-donation-form {
    min-height: 744px;
}
@media only screen and (max-width: 600px) {
    .fl-node-4rjfmnoxb3iv #dntly-donation-form {
        min-height: 835px;
    }
}