/* ==========================================================
   site-base.css

   Shared structural styles for all campaign sites. This file
   contains every CSS rule that does NOT vary per site.

   Load BEFORE the per-site /css2/{siteID}.css so theme colors
   and per-site overrides take precedence.

   Sections:
     1.  Fonts & Resets
     2.  Layout Scaffolding
     3.  Navigation Structure
     4.  Mobile Menu & Overlay
     5.  Signup Forms
     6.  Social & Sharing
     7.  Sidebar Buttons
     8.  Image Utilities
     9.  Content Columns
     10. Video Embed
     11. Fundraising & Progress
     12. Slideshow
     13. Panel 1 (Photo Panel)
     14. Video Panel
     15. Signup in Panel
     16. Countdown
     17. Events
     18. Issue Navigation
     19. Miscellaneous
     19. Responsive Overrides (@media, consolidated)
   ========================================================== */


/* ── 1. Fonts & Resets ───────────────────────────────────── */

@font-face { font-family: 'gotham_mediumregular'; src: url('/local_css/gotham-medium-webfont.eot?#iefix') format('embedded-opentype'), url('/local_css/gotham-medium-webfont.woff2') format('woff2'), url('/local_css/gotham-medium-webfont.woff') format('woff'), url('/local_css/gotham-medium-webfont.ttf') format('truetype'), url('/local_css/gotham-medium-webfont.svg#gotham_mediumregular') format('svg'); font-weight: normal; font-style: normal; }
.clearfix:before,.clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }
.error { border: 1px solid #ff0000; }
.formButton { -webkit-appearance: none!important; }
sub, sup { line-height: 0; }
input[type=text] { -webkit-appearance: none!important; -moz-appearance: none; }
input[type=submit] { -webkit-appearance: none!important; -moz-appearance: none; }
input[type=textarea] { -webkit-appearance: none!important; background-clip: padding-box; -moz-appearance: none; }
.v-hide { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; left: -9999px; }
.nv { display: none !important; }
.t-fs { width: 1px!important; height: 1px!important; }
.input-container:has(input:not(.nv):nth-of-type(5)) { grid-template-columns: repeat(3, 1fr); }
.input-container:has(input:not(.nv):nth-of-type(4)):not(:has(input:not(.nv):nth-of-type(5))) { grid-template-columns: repeat(5, 1fr); }
.input-container:has(input:not(.nv):nth-of-type(3)):not(:has(input:not(.nv):nth-of-type(4))) { grid-template-columns: repeat(4, 1fr); }
.input-container:has(input:not(.nv):nth-of-type(2)):not(:has(input:not(.nv):nth-of-type(3))) { grid-template-columns: repeat(3, 1fr); }
.input-container:has(input:not(.nv):nth-of-type(1)):not(:has(input:not(.nv):nth-of-type(2))) { grid-template-columns: repeat(2, 1fr); }
.breadCrumbs { visibility: visible!important; }
.panel-1-text-column .signupDisclaimer .disclaimer-checkbox-wrapper input[type="checkbox"] { margin-top: 0.2em; flex-shrink: 0; }


/* ── 2. Layout Scaffolding ───────────────────────────────── */

#backToTop { position: fixed; bottom: 10px; right: 10px; cursor: pointer; display: none; width: 45px; height: 45px; }
#sidebarSubButton:hover { background-color: #ccc; }
#sidebarSubButton:active { background-color: #ddd; }
#sidebarSignupHeader { text-align: center; }
#sidebarEmailSignup { display: flex; margin: 10px; }
#sidebarSubE { font-size: 13px; padding: 14px; margin-bottom: 0!important; border: 1px solid #ACAEB0; margin-right: 5px; }
#sidebarSubButton { color: #343434; background-color: #f0f0f0; font-weight: bold; border: 1px solid #ACAEB0; padding: 14px; font-size: 13px; font-family: 'Open Sans', Helvetica, sans-serif; }
#sidebarSignupThanks { display: none; text-align: center; font-size: 14px; padding: 20px; font-weight: bold; }
#sidebar { min-width: 264px!important; margin-left: 25px; }
#homeContent { width: unset; }
#homeTable { margin-top: 30px; }
#content { display: flex; flex-direction: column; }
#contentInterior { /*display: flex; flex-direction: column; */ height: 100%; }

/* Subsequent content groups use classes instead of IDs — must match */
.content-area { display: flex; flex-direction: column; }
.content-group .contentInterior { height: 100%; padding: 20px 0; }

#content .image-align-right, .content-area .image-align-right { float: right; max-width: 300px!important; height: auto!important; margin-bottom: 25px; margin-left: 25px; }
#content .image-align-left, .content-area .image-align-left { float: left; max-width: 300px!important; height: auto!important; margin-bottom: 25px; margin-right: 25px; }
#content .image-align-center, .content-area .image-align-center { height: auto!important; display: block; margin: 20px auto; }
#content img, .content-area img { max-width: 100%; }

/* Content Block Spacing */
.content-block + .content-block { margin-top: 30px; }


/* ── 3. Navigation Structure ─────────────────────────────── */

#rotatorBG { border-bottom: none; width: 100%; height: auto; background-size: cover; }
.btn-open { font-size: 20px; font-weight: 700; font-family: 'Nunito', Arial, Helvetica, sans-serif; color: #fff; transition-property: all .2s linear 0s; -moz-transition: all .2s linear 0s; -webkit-transition: all .2s linear 0s; -o-transition: all .2s linear 0s; text-align: right!important; }
.menu-open-button { display: none; margin-right: 10px; }
.menu-open-button a { color: #fff; text-decoration: none; }
.menu-open-button .menu-toggle { background: none; border: none; cursor: pointer; padding: 8px; position: relative; z-index: 10001; margin-right: 10px; }
#navigation { z-index: 10000 !important; }
.menu li ul { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); list-style: none; padding-left: 0; border-radius: 0 !important; }
.nav-caret { display: inline-block; width: 5px; height: 5px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); margin-left: 6px; vertical-align: middle; position: relative; top: -2px; }
.menu li ul li.has-submenu { position: relative !important; }
.menu li ul li.has-submenu > ul { position: absolute !important; left: 100% !important; top: 0 !important; visibility: hidden; box-shadow: 4px 4px 12px rgba(0, 0, 0, 0.15); list-style: none !important; padding-left: 0 !important; min-width: 180px; border-radius: 0 !important; }
.menu li ul li.has-submenu > ul.flyout-left { left: auto !important; right: 100% !important; box-shadow: -4px 4px 12px rgba(0, 0, 0, 0.15); }

/* Dropdown/flyout items are always full-width block rows.
   A theme rule making these inline/floated/zero-width collapses the
   li's width to 0, so the flyout's left:100% resolves to 0 and the
   flyout renders on top of its parent item instead of beside it. */
#navigation .menu li ul li { display: block !important; float: none !important; width: auto !important; }

.tinyLogo { display: flex; align-items: center; max-width: 100%; flex-shrink: 0; }
.tinyLogo img { max-width: 100%; height: auto; display: block; width: auto; object-fit: contain; max-height: 60px; aspect-ratio: auto; }
.tinyLogo img[src$=".svg"] { max-width: 100%; max-height: 60px; width: auto; height: auto; object-fit: contain; }


/* ── 4. Mobile Menu & Overlay ────────────────────────────── */

.close-button { text-align: right; display: inline; position: absolute; right: 50px; top: 6px; font-size: 30px; color: #fff; cursor: pointer; transition-property: all .2s linear 0s; -moz-transition: all .2s linear 0s; -webkit-transition: all .2s linear 0s; -o-transition: all .2s linear 0s; }
.overlay { display: flex; position: fixed; top: 0; height: 100%; width: 100%; overflow: auto; z-index: 9999 !important; opacity: 0; backdrop-filter: blur(8px); transition: all 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94); /* Faster */ transform: translateY(20px); /* Reduced distance */ visibility: hidden; flex-direction: column; }
.overlay-nav { display: flex; flex-direction: column; align-items: center; padding: 20px; overflow-y: auto; flex: 1; }
.overlay-menu { margin-top: 80px !important; }
.overlay-menu, .overlay-menu ul { list-style-type: none; margin: 0; padding: 0; display: flex; flex-direction: column; align-items: center; text-transform: uppercase !important; }
.overlay-menu li { list-style: none; flex-grow: 1; text-align: left; }
.overlay-menu li a { display: block; padding: clamp(16px, 4vw, 24px) 0 4px; text-align: center; text-decoration: none !important; }
.overlay-menu li a:hover { text-decoration: underline; }
#overlay-social { text-align: center; margin: 10px 0; } #overlay-social i, #overlay-social a { font-size: 32px; padding: 20px; max-width: 350px; border-top: 1px solid rgba(255, 255, 255, 0.1); /* Limit width */ margin: 0 auto; /* Center the container */ width: 100%; }
.close-button:hover { color: #00bfff; }
#close-overlay { font-size: 15px!important; }
.hamburger { width: 28px; height: 20px; position: relative; display: flex; flex-direction: column; justify-content: space-between; }
.hamburger span { display: block; height: 3px; width: 100%; background: currentColor; border-radius: 2px; transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); transform-origin: center; }
.menu-toggle.active .hamburger span:nth-child(1) { transform: translateY(8.5px) rotate(45deg); }
.menu-toggle.active .hamburger span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.menu-toggle.active .hamburger span:nth-child(3) { transform: translateY(-8.5px) rotate(-45deg); }
.menu-toggle { z-index: 10001 !important; }
.overlay-menu a { display: inline-block; padding: 24px 0; text-decoration: none; font-size: 1.4em !important; font-weight: 500; transition: all 0.3s ease; position: relative; background-image: linear-gradient(45deg, currentColor, currentColor); background-size: 0% 2px; background-repeat: no-repeat; background-position: left bottom; padding-bottom: 22px; }
.overlay-menu a:hover { /*    color: #ff6b6b; */ text-decoration: none; background-size: 100% 2px; }
.overlay.menu-visible { opacity: 0.98; transform: translateY(0); visibility: visible; }
#overlay-social a { display: inline-block; margin: 0 8px; font-size: 1.2em; transition: color 0.2s ease; }
#overlay-social a:hover { /*    color: #ff6b6b; }
#overlay-social #close-overlay { display: inline-block; /*    color: #666; */ text-decoration: none; font-size: 0.9em; margin-top: 15px; padding: 8px 16px; border: 1px solid #ddd; border-radius: 4px; transition: all 0.2s ease; }
#overlay-social #close-overlay:hover { /* color: #ff6b6b; */ border-color: #ff6b6b; }


/* ── 5. Signup Forms ─────────────────────────────────────── */

#subButton { -webkit-appearance: none; color: #fff; background-color: #C5242E; font-weight: bold; border: 0; padding: 10px; font-size: 17px; font-family: 'Open Sans', sans-serif; width: 100%; max-width: 100% !important; }
#signupWrapper { max-width: 1250px; min-height: 50px; background-color: #E4E4E4; margin: 0px auto; padding: 20px 20px 40px; width: 100%; box-sizing: border-box; }
#emailSignupHeader { text-align: center; color: #1A223A; font-weight: bold; margin-bottom: 20px; font-size: 24px; box-sizing: border-box; font-family: 'Open Sans Condensed', sans-serif; }
#emailSignup { display: flex; flex: 1; align-items: center; justify-content: center; margin: 0px auto; max-width: 90%; min-height: 50px; font-size: 17px; font-family: 'Open Sans', sans-serif; flex-direction: column; }
#subButton:hover { background-color: #9C2D32; }
.textfield { background-color: #fff; border: 0; padding: 10px; color: #757575; flex: 1; margin-right: 10px; font-size: 16px; font-family: 'Open Sans', sans-serif; border-radius: 0px; box-sizing: border-box; width: 100%; min-width: 0!important; }

.input-container .textfield {
    box-shadow: 0px 2px 6px rgba(0,0,0,0.3);
}
.zip-field { max-width: 90px; }
#signupThanks { display: none; color: #1A223A; font-size: 18px; font-family: 'Open Sans', sans-serif; text-align: center; margin-top: 15px; }
.force-stacked { grid-template-columns: 1fr !important; }
.input-container { display: grid; gap: 10px; margin-bottom: 20px; width: 100%; grid-template-columns: repeat(5, 1fr); }
.signupDisclaimer { text-align: center; margin: 10px 0; color: #fff; font-size: 14px; width: 100%; margin-top: 10px; }
.disclaimer-checkbox-wrapper { display: flex; align-items: flex-start; gap: 8px; text-align: left; }
.disclaimer-checkbox { margin-top: 0.2em; flex-shrink: 0; }
.disclaimer-checkbox-wrapper label { flex-grow: 1; }
.panel-1-text-column .input-container { display: flex; flex-wrap: wrap; gap: 8px; width: 100%; max-width: 100%; box-sizing: border-box; }
.panel-1-text-column .input-container.force-stacked { flex-direction: column; max-width: 400px; margin: 0 auto; }
.panel-1-text-column .input-container .textfield, .panel-1-text-column .input-container #subButton { flex: 1 1 calc(33.333% - 16px); min-width: 120px; max-width: 100%; box-sizing: border-box !important; height: auto !important; padding: clamp(8px, calc(6.75px + 0.16vw), 13px) clamp(12px, calc(8.5px + 0.46vw), 26px) !important; font-size: clamp(16px, calc(12.7px + 0.42vw), 29px) !important; line-height: 1.4 !important; border-radius: 0; border: none; margin: 0 !important; }
.panel-1-text-column .input-container #subButton { cursor: pointer; font-weight: bold; font-size: clamp(15px, calc(10px + 0.56vw), 32px) !important; text-align: center; -webkit-appearance: none; }
.panel-1-text-column .signupDisclaimer { text-align: center; margin: 10px auto 0; font-size: clamp(13px, calc(10px + 0.2vw), 18px); max-width: 100%; line-height: 1.4; }
.panel-1-text-column .signupDisclaimer .disclaimer-checkbox-wrapper { display: flex; align-items: flex-start; gap: 8px; text-align: left; justify-content: center; }
.sms-optin-wrapper { margin-top: 8px; }
.sms-optin-label { display: flex; align-items: flex-start; gap: 8px; cursor: pointer; font-size: 12px; line-height: 1.4; }
.sms-optin-label input[type="checkbox"] { margin-top: 2px; flex-shrink: 0; cursor: pointer; }
.sms-optin-label span { flex: 1; }
.sms-optin-label a { text-decoration: underline; }
.sms-optin-label a:hover { opacity: 0.8; }
.panel-1-text-column .sms-optin-wrapper { margin-top: 6px; }
.panel-1-text-column .sms-optin-label { font-size: clamp(11px, calc(9px + 0.15vw), 15px); justify-content: center; text-align: left; }
.panel-1-text-column .input-container .textfield:nth-of-type(1), .panel-1-text-column .input-container .textfield:nth-of-type(2) { flex: 1 1 calc(50% - 8px); }


/* ── 6. Social & Sharing ─────────────────────────────────── */

.socialShare { display: flex; text-align: right; align-self: flex-end!important; margin-top: auto; justify-content: flex-end; }
.socialShare a { text-indent: initial; width: unset; margin-right: 4px; float: none; display: inline; height: auto; }
.socialShare a i { font-size: 22px; color: #cdcdcd; }
.socialShare a i:hover { transition: all .3s ease-in-out!important; }
.socialShare a i.fi-social-facebook:hover { color: #3b5998!important; }
.socialShare a i.fi-social-twitter:hover { color: #38A1F3!important; }
.socialShare a i.fi-social-linkedin:hover { color: #0077B5!important; }
.socialShare a i.fi-mail:hover { color: #FFC76A!important; }
#bottom-social-wrapper { font-size: 28px!important; letter-spacing: unset!important; padding-top: 20px; }
.icon-container { display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; margin: 25px 0; }
.social-icon { display: inline-flex; justify-content: center; align-items: center; width: 40px; height: 40px; border-radius: 6px; transition: all 0.3s ease; }
.social-icon:hover { transform: scale(1.1); box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2); cursor: pointer; }
.social-icon i { color: white !important; font-size: 22px; }
.facebook { background-color: #3b5998; }
.x-twitter { background-color: #000000; color: #ffffff !important; }
.youtube { background-color: #FF0000; }
.instagram { background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); }
.tumblr { background-color: #36465d; }
.linkedin { background-color: #0077b5; }
.tiktok { background-color: #000000; }
.whatsapp { background-color: #25D366; }
.threads { background: linear-gradient(135deg, #000000, #333333); }
.bluesky { background-color: #1DA1F2; }
.medium { background-color: #000000; }
.flickr { background: linear-gradient(90deg, #0063dc 50%, #ff0084 50%); }
.threads i { font-size: 20px; }
.bluesky i { font-size: 22px; }


/* ── 7. Sidebar Buttons ──────────────────────────────────── */

.sidebar-button { display: block; flex-direction: column; flex-basis: auto; flex-grow: 1; justify-content: center; align-items: center; line-height: 60px; text-align: center; margin: 10px auto; max-width: 222px; }.sidebar-button: hover { opacity: .75; transition: all 200ms ease 50ms; }.sidebar-button i{ display: inline-block; font-size: 1.4em; position: relative; top: 2px; }


/* ── 8. Image Utilities ──────────────────────────────────── */

.image-align-right { float: right; max-width: 300px!important; height: auto!important; margin-bottom: 25px; margin-left: 25px; }
.image-align-left { float: left; max-width: 300px!important; height: auto!important; margin-bottom: 25px; margin-right: 25px; }
.image-align-center { height: auto!important; display: block; margin: 20px auto; max-width: 100%; }
.image-align-left:after { clear: both; }
.image-align-right:after { clear: both; }
.image-align-center-50 { height: auto!important; max-width: 50%!important; width: 100%; display: block; margin: 20px auto; }
.image-size-25 { width: 25%!important; max-width: 25%!important; height: auto!important; }
.image-size-50 { width: 50%!important; max-width: 50%!important; height: auto!important; }
.image-size-75 { width: 75%!important; max-width: 75%!important; height: auto!important; }
.image-size-100 { width: 100%!important; max-width: 100%!important; height: auto!important; }
.image-size-original { width: auto!important; max-width: 100%!important; height: auto!important; }
.image-inline { display: inline!important; vertical-align: middle!important; margin: 0 5px!important; float: none!important; }
.image-rounded { border-radius: 12px!important; }
.image-rounded-lg { border-radius: 24px!important; }
.image-circle { border-radius: 50%!important; aspect-ratio: 1/1; object-fit: cover; }
.image-shadow { box-shadow: 0 4px 15px rgba(0,0,0,0.2)!important; }
.image-shadow-lg { box-shadow: 0 8px 30px rgba(0,0,0,0.25)!important; }
.image-shadow-curl { box-shadow: 0 1px 4px rgba(0,0,0,0.06),-10px 10px 12px -10px rgba(0,0,0,0.18),10px 10px 12px -10px rgba(0,0,0,0.18)!important; }
.image-border { border: 3px solid #ddd!important; }
.image-border-dark { border: 3px solid #333!important; }
.image-border-accent { border: 3px solid #2e91da!important; }
.image-margin-none { margin: 0!important; }
.image-margin-sm { margin: 10px!important; }
.image-margin-md { margin: 20px!important; }
.image-margin-lg { margin: 30px!important; }
.image-align-left.image-margin-sm { margin: 0 15px 10px 0!important; }
.image-align-left.image-margin-lg { margin: 0 30px 20px 0!important; }
.image-align-right.image-margin-sm { margin: 0 0 10px 15px!important; }
.image-align-right.image-margin-lg { margin: 0 0 20px 30px!important; }
.image-click-zoom { cursor: zoom-in!important; transition: transform 0.2s ease,box-shadow 0.2s ease!important; }
.image-click-zoom:hover { transform: scale(1.02); box-shadow: 0 8px 25px rgba(0,0,0,0.2); }
.zoom-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.9); z-index: 99999; display: flex; align-items: center; justify-content: center; cursor: zoom-out; opacity: 0; transition: opacity 0.3s ease; }
.zoom-overlay.active { opacity: 1; }
.zoom-overlay img { max-width: 90%; max-height: 90%; object-fit: contain; box-shadow: 0 0 50px rgba(0,0,0,0.5); border-radius: 4px; }
.zoom-close { position: absolute; top: 20px; right: 30px; color: #fff; font-size: 40px; font-weight: 300; cursor: pointer; opacity: 0.7; transition: opacity 0.2s; line-height: 1; background: none; border: none; padding: 0; margin: 0; }
.zoom-close:hover { opacity: 1; }
.zoom-hint { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); color: #fff; font-size: 14px; opacity: 0.6; }
.image-pull-left { float: left!important; width: 45%!important; margin: 0 30px 20px -40px!important; box-shadow: 5px 5px 20px rgba(0,0,0,0.15)!important; }
.image-pull-right { float: right!important; width: 45%!important; margin: 0 -40px 20px 30px!important; box-shadow: -5px 5px 20px rgba(0,0,0,0.15)!important; }
.image-hero { width: 100vw!important; margin-left: calc(-50vw + 50%)!important; max-width: none!important; height: auto!important; display: block!important; }
.image-polaroid,.image-polaroid-left,.image-polaroid-center,.image-polaroid-right { background: #fff!important; padding: 10px 10px 40px 10px!important; box-shadow: 0 4px 15px rgba(0,0,0,0.25)!important; border-radius: 0!important; max-width: 350px!important; }
.image-polaroid-left { float: left!important; margin: 10px 25px 15px 0!important; transform: rotate(-3deg)!important; }
.image-polaroid-center { display: block!important; margin: 20px auto!important; transform: rotate(2deg)!important; }
.image-polaroid-right { float: right!important; margin: 10px 0 15px 25px!important; transform: rotate(3deg)!important; }
figure.image-figure { margin: 20px 0!important; padding: 0!important; display: table!important; }
figure.image-figure img { display: block!important; max-width: 100%!important; }
figure.image-figure figcaption { background: #f5f5f5!important; padding: 12px 15px!important; font-size: 14px!important; color: #666!important; border-bottom: 3px solid #2e91da!important; caption-side: bottom!important; display: table-caption!important; }
figure.image-figure-overlay { position: relative!important; margin: 20px 0!important; }
figure.image-figure-overlay img { display: block!important; width: 100%!important; }
figure.image-figure-overlay figcaption { position: absolute!important; bottom: 0!important; left: 0!important; right: 0!important; background: linear-gradient(transparent,rgba(0,0,0,0.8))!important; color: #fff!important; padding: 40px 15px 15px!important; font-size: 14px!important; }


/* ── 9. Content Columns ──────────────────────────────────── */

.twocolumn-row { display: grid; width: 100%; grid-gap: 15px; box-sizing: border-box; max-width: 100%; grid-template-columns: 1fr 1fr; }
.twocolumn-7030-row { display: grid; width: 100%; grid-gap: 15px; box-sizing: border-box; max-width: 100%; grid-template-columns: 2fr 1fr; }
.twocolumn-3070-row { display: grid; width: 100%; grid-gap: 15px; box-sizing: border-box; max-width: 100%; grid-template-columns: 1fr 2fr; }
.threecolumn-row { display: grid; width: 100%; grid-gap: 15px; box-sizing: border-box; max-width: 100%; grid-template-columns: 1fr 1fr 1fr; }
.fourcolumn-row { display: grid; width: 100%; grid-gap: 15px; box-sizing: border-box; max-width: 100%; grid-template-columns: 1fr 1fr 1fr 1fr; }
.u-column { flex-shrink: 0; padding: 10px; }
.u-column img { max-width: 100%!important; margin: 0 auto; }
.figure-right { float: right; padding-right: 10px; max-width: 300px; width: 100%; }
.figure-left { float: left; padding-right: 10px; max-width: 300px; width: 100%; }
figcaption { text-align: center; font-size: .8em; }


/* ── 10. Video Embed ─────────────────────────────────────── */

.video-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; }
.video-container iframe, .video-container object, .video-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }


/* ── 11. Fundraising & Progress ──────────────────────────── */
/* around line 274, extend the existing .amountLink rule */
.amountLink {
    box-shadow: 0px 2px 6px rgba(0,0,0,0.3);
}

/* compact format */
.fw-horizontal .fw-amount-btn {
    box-shadow: 0px 2px 6px rgba(0,0,0,0.3);
}

/* banner format */
.fw-banner .fw-banner-btn {
    box-shadow: 0px 2px 6px rgba(0,0,0,0.3);
}
#amountsSection { background-color: #efefef; padding: 40px; max-width: 1250px; width: 100%; margin: 20px auto; box-sizing: border-box; }
#amountsTitle { font-size: 24px; text-align: center; }
#amountsText { font-size: 17px; text-align: center; }
#amountsWrapper { max-width: 500px; display: flex; flex-flow: row wrap; margin: 20px auto; justify-content: center; }
.amountLink { margin: 5px; line-height: 60px; max-width: 240px; background-color: #E7131A; color: #fff!important; text-decoration: none; font-size: 18px; font-weight: 600; text-align: center; flex-grow: 1; flex-basis: 40%; flex-shrink: 1; }
.amountLink:hover { background-color: #CB020A; transform: scale(1.04); }
.fw-horizontal { border-radius: 8px; padding: 16px 20px; display: flex; flex-direction: column; gap: 12px; max-width: 1250px; margin: 10px auto; box-sizing: border-box; }
.fw-horizontal .fw-thermo-row { display: flex; align-items: center; gap: 12px; }
.fw-horizontal .fw-mini-thermo { flex: 0 0 120px; height: 8px; background: rgba(0,0,0,0.1); border-radius: 4px; overflow: hidden; }
.fw-horizontal .fw-mini-thermo-fill { height: 100%; border-radius: 4px; }
.fw-horizontal .fw-thermo-text { font-size: 13px; }
.fw-horizontal .fw-content-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.fw-horizontal .fw-message { font-weight: 700; font-size: 15px; flex: 1 1 auto; min-width: 150px; }
.fw-horizontal .fw-amounts { display: flex; gap: 8px; flex-wrap: wrap; }
.fw-horizontal .fw-amount-btn { padding: 10px 18px; border-radius: 6px; font-weight: 700; font-size: 14px; text-decoration: none; white-space: nowrap; transition: opacity 0.15s; }
.fw-horizontal .fw-amount-btn:hover { opacity: 0.9; }
#thermometerWrapper { display: flex; flex-direction: column; margin: 20px auto; max-width: 500px; }
#thermometerProgressText { display: block; text-align: center; font-size: 20px; line-height: 20px; margin-bottom: 10px; }
#glass { width: 100%; height: 40px; background: #c7c7c7; border-radius: 20px; /*float: left; */ overflow: hidden; max-width: 500px; }
#progress { width: 27%; height: 40px; background: #CB020A; z-index: 333; animation-delay: 2s; animation: progressBar 3s ease -in -out; animation-fill-mode: both; }


/* ── 12. Slideshow ───────────────────────────────────────── */

.cycle-slide { display: flex; align-items: center; }
.cycle-slideshow div { display: flex !important; align-items: center; justify-content: center; min-height: 100px; }
.cycle-slideshow div a img { display: flex!important; height: 100% !important; width: auto !important; }


/* ── 13. Panel 1 (Photo Panel) ───────────────────────────── */

/* container-type makes the panel a size-query container so the column
   min-heights below can use cqw — 1% of the PANEL's own width — keeping the
   shape container-relative (a 1250px-capped non-full-width panel is judged
   by its own width, not the viewport's). inline-size containment only
   constrains the inline axis; height stays content-driven. */
.panel-1-split-container { display: flex; flex-wrap: nowrap; width: 100%; overflow: hidden; position: relative; container-type: inline-size; }
.panel-1-split-container.height-auto .panel-1-image-column[data-aspect-ratio] { aspect-ratio: var(--image-aspect-ratio, auto); min-height: auto; }
.panel-1-split-container.ratio-70-30 .panel-1-image-column { flex: 0 0 70%; }
.panel-1-split-container.ratio-70-30 .panel-1-text-column { flex: 0 0 30%; }
.panel-1-split-container.ratio-60-40 .panel-1-image-column { flex: 0 0 60%; }
.panel-1-split-container.ratio-60-40 .panel-1-text-column { flex: 0 0 40%; }
.panel-1-split-container.ratio-50-50 .panel-1-image-column { flex: 1 1 50%; }
.panel-1-split-container.ratio-50-50 .panel-1-text-column { flex: 1 1 50%; }
.panel-1-split-container.ratio-40-60 .panel-1-image-column { flex: 0 0 40%; }
.panel-1-split-container.ratio-40-60 .panel-1-text-column { flex: 0 0 60%; }
.panel-1-split-container.ratio-30-70 .panel-1-image-column { flex: 0 0 30%; }
.panel-1-split-container.ratio-30-70 .panel-1-text-column { flex: 0 0 70%; }
/* Fixed-height presets are proportional SHAPES, not pixel heights, so the
   photo's cover-crop renders identically at every width and matches the
   editor's 1440px preview stage exactly. The shape is carried as a
   MIN-height on the image column below — min-height: max(px-floor, Ncqw) —
   never as aspect-ratio on the container: aspect-ratio's content-based
   escape hatch is disabled by explicit min-heights/overflow:hidden, so long
   text CLIPPED. A minimum cannot clip: content always outgrows a floor.
   cqw values are anchored at a 1440-wide panel where they equal the
   historic px floors (and large's 39.375cqw equals the old 70vh exactly on
   16:9 monitors). Browsers without container-query units drop the max()
   line and keep today's px floors. Full Viewport stays 100vh — its meaning
   is "match the visitor's screen", which no fixed shape represents; the
   editor previews it as a representative 16:9. short's old max-height:400px
   is removed — it clipped tall content (the admin stylesheet documented and
   dropped it already) and would clip any wide-screen panel. */
.panel-1-split-container.height-auto { min-height: 300px; }
.panel-1-split-container.height-short { min-height: 300px; }
.panel-1-split-container.height-medium { min-height: 450px; }
.panel-1-split-container.height-large { min-height: 567px; }
.panel-1-split-container.height-full { min-height: 100vh; }
.panel-1-split-container.height-fit-image { min-height: 300px; }
/* Fit-to-image: the builder emits --image-aspect-ratio and data-aspect-ratio
   for this preset (same gating as height-auto), but nothing here consumed
   them — published fit-image panels fell back to the 300px floor instead of
   the image's shape. Sizing the image column by the image's own ratio is
   what the editor's calculation previews. */
.panel-1-split-container.height-fit-image .panel-1-image-column[data-aspect-ratio] { aspect-ratio: var(--image-aspect-ratio, auto); min-height: auto; }
.panel-1-split-container.height-fit-image .panel-1-image-column { min-height: inherit; }
.panel-1-split-container.height-fit-image .panel-1-text-column { min-height: inherit; }
.panel-1-image-column { flex: 1 1 50%; min-width: 0; background-size: cover; background-position: center; background-repeat: no-repeat; position: relative; }
.panel-1-split-container.height-auto .panel-1-image-column { min-height: 300px; }
.panel-1-split-container.height-short .panel-1-image-column { min-height: 300px; min-height: max(300px, 20.8333cqw); }
.panel-1-split-container.height-medium .panel-1-image-column { min-height: 450px; min-height: max(450px, 31.25cqw); }
.panel-1-split-container.height-large .panel-1-image-column { min-height: 567px; min-height: max(567px, 39.375cqw); }
.panel-1-split-container.height-full .panel-1-image-column { min-height: 100vh; }
.panel-1-text-column { flex: 1 1 50%; min-width: 0; display: flex; align-items: center; justify-content: center; padding: clamp(30px, 5vw, 60px); box-sizing: border-box; overflow: hidden; }
.panel-1-text-content { max-width: 600px; width: 100%; box-sizing: border-box; overflow-wrap: break-word; word-wrap: break-word; }
.panel-1-split-container.ratio-40-60 .panel-1-text-content { max-width: 700px; }
.panel-1-split-container.ratio-30-70 .panel-1-text-content { max-width: 800px; }
/* Panel typography scales with the panel, DAMPED: each rule's preferred
   size is calc(S/2 + (S/28.8)cqw) — exactly S at a 1440px-wide panel (the
   editor's preview stage), growing at HALF the panel's rate above it, and
   capped at 1.6S (reached near 3168px). Linear 1:1 scaling was tried and
   rejected: display text that tracks an ultrawide panel 1:1 becomes
   signage. So the photo crop is exactly proportional at every width;
   the type tracks it closely but deliberately lags on very large screens.
   The clamp()-with-vw line preceding each is the fallback for browsers
   without container-query units; rem floors and the sub-768px mobile
   clamps are unchanged. Knobs: the damping ratio lives in the intercept/
   slope split (S/2 + S/28.8 = 50%; e.g. S*0.6 + S/36 = 40%) and the cap
   in the 1.6S term. Keep in sync with BuildTextStyles (inline overrides)
   and PhotoCallToAction.css (editor). */
.panel-1-headline { font-size: clamp(1.75rem, 4vw, 3rem); font-size: clamp(1.75rem, calc(24px + 1.6667cqw), 76.8px); font-weight: 700; margin: 0 0 0.75em 0; line-height: 1.15; letter-spacing: -0.02em; }
.panel-1-subheadline { font-size: clamp(1.1rem, 2vw, 1.5rem); font-size: clamp(1.1rem, calc(12px + 0.8333cqw), 38.4px); font-weight: 400; margin: 0 0 0.75em 0; line-height: 1.4; }
.panel-1-paragraph { font-size: clamp(1rem, 1.5vw, 1.25rem); font-size: clamp(1rem, calc(10px + 0.6944cqw), 32px); line-height: 1.6; margin: 0; }
.panel-1-split-container.height-large .panel-1-headline, .panel-1-split-container.height-full .panel-1-headline { font-size: clamp(2rem, 5vw, 3.5rem); font-size: clamp(2rem, calc(28px + 1.9444cqw), 89.6px); }
.panel-1-split-container.height-large .panel-1-paragraph, .panel-1-split-container.height-full .panel-1-paragraph { font-size: clamp(1.1rem, 1.8vw, 1.35rem); font-size: clamp(1.1rem, calc(10.8px + 0.7500cqw), 34.56px); }
.panel-1-split-container.height-short .panel-1-headline { font-size: clamp(1.5rem, 3vw, 2rem); font-size: clamp(1.5rem, calc(16px + 1.1111cqw), 51.2px); }
.panel-1-split-container.height-short .panel-1-paragraph { font-size: clamp(0.95rem, 1.3vw, 1.1rem); font-size: clamp(0.95rem, calc(8.8px + 0.6111cqw), 28.16px); }
.button-container { margin-top: 1.5em; text-align: center; }
.panel-1-cta-button { display: inline-block; padding: 1em 2.25em; font-size: 1rem; font-size: clamp(1rem, calc(8px + 0.5556cqw), 25.6px); font-weight: 600; text-decoration: none; cursor: pointer; border: none; background-color: #3498db; color: #ffffff; transition: transform 0.2s ease, box-shadow 0.2s ease; }
.panel-1-cta-button:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); }
.panel-1-cta-button:focus { outline: 2px solid currentColor; outline-offset: 2px; }
.panel-1-cta-button:active { transform: translateY(0); }
.panel-1-split-container.swapped .panel-1-image-column { order: 2; }
.panel-1-split-container.swapped .panel-1-text-column { order: 1; }
.panel-1-split-container.swapped.ratio-70-30 .panel-1-image-column { flex: 0 0 30%; }
.panel-1-split-container.swapped.ratio-70-30 .panel-1-text-column { flex: 0 0 70%; }
.panel-1-split-container.swapped.ratio-60-40 .panel-1-image-column { flex: 0 0 40%; }
.panel-1-split-container.swapped.ratio-60-40 .panel-1-text-column { flex: 0 0 60%; }
.panel-1-split-container.swapped.ratio-40-60 .panel-1-image-column { flex: 0 0 60%; }
.panel-1-split-container.swapped.ratio-40-60 .panel-1-text-column { flex: 0 0 40%; }
.panel-1-split-container.swapped.ratio-30-70 .panel-1-image-column { flex: 0 0 70%; }
.panel-1-split-container.swapped.ratio-30-70 .panel-1-text-column { flex: 0 0 30%; }
.panel-1-split-container.swapped.ratio-70-30 .panel-1-text-content { max-width: 800px; }
.panel-1-split-container.swapped.ratio-60-40 .panel-1-text-content { max-width: 700px; }
.panel-1-split-container.inset-photo { padding: clamp(20px, 4vw, 50px); box-sizing: border-box; }
.panel-1-split-container.inset-photo .panel-1-image-column { overflow: visible; }
.panel-1-split-container.photo-only { display: block; }
.panel-1-split-container.photo-only .panel-1-text-column { display: none !important; }
.panel-1-split-container.photo-only .panel-1-image-column { display: block; width: 100%; flex: none; min-height: 300px; }
/* Photo-only shapes: same 1440-anchored minimums as the two-column presets.
   (The old 250/400 values here were dead — the builder used to inline
   min-height:inherit on this column, resolving to the container floors
   300/450/567. PanelHtmlBuilder no longer emits that inline style,
   precisely so these rules — including the cqw term — take effect.) */
.panel-1-split-container.photo-only.height-short .panel-1-image-column { min-height: 300px; min-height: max(300px, 20.8333cqw); }
.panel-1-split-container.photo-only.height-medium .panel-1-image-column { min-height: 450px; min-height: max(450px, 31.25cqw); }
.panel-1-split-container.photo-only.height-large .panel-1-image-column { min-height: 567px; min-height: max(567px, 39.375cqw); }
.panel-1-split-container.photo-only.height-full .panel-1-image-column { min-height: 100vh; }
.panel-1-split-container.photo-only.height-auto { min-height: 0; padding: 0 !important; margin: 0; background-color: transparent !important; }
.panel-1-split-container.photo-only.height-auto .panel-1-image-column { min-height: 0; padding: 0; }
.panel-1-split-container.photo-only.height-auto .panel-1-image-column.auto-height-mode { background-image: none !important; background-color: transparent !important; }
/* max-height: none matters: the base .panel-1-image-element rule caps the img
   at calc(100% - 40px), and this override historically skipped max-height. That
   was harmless while the auto-height column had no definite height (a % cap
   against an indefinite parent resolves to none) — but the aspect-ratio rule
   above gives the column a definite height, so the cap started binding and
   shaved 40px off the published hero, leaving an empty band under the photo. */
.panel-1-split-container.photo-only.height-auto .panel-1-image-element.auto-height-img { display: block !important; width: 100%; height: auto; max-width: 100%; max-height: none; object-fit: cover; position: relative; transform: none; top: auto; left: auto; margin: 0; padding: 0; border: none !important; box-shadow: none !important; border-radius: 0 !important; }
.panel-1-split-container.photo-only.height-auto.inset-photo { padding: clamp(20px, 4vw, 50px) !important; }
.panel-1-split-container.photo-only.height-auto.inset-photo .panel-1-image-column { display: flex; align-items: center; justify-content: center; }
.panel-1-split-container.photo-only.height-auto.inset-photo .panel-1-image-element.auto-height-img { width: auto; max-width: 100%; max-height: 80vh; object-fit: contain; border: revert; box-shadow: revert; border-radius: revert; }
.panel-1-split-container.text-only { display: block; }
.panel-1-split-container.text-only .panel-1-image-column { display: none !important; }
.panel-1-split-container.text-only .panel-1-text-column { width: 100%; flex: none; min-height: 200px; }
.panel-1-split-container.text-only .panel-1-text-content { max-width: 800px; margin: 0 auto; }
.panel-1-split-container.text-only.height-auto { min-height: 0; }
.panel-1-split-container.text-only.height-auto .panel-1-text-column { min-height: 0; }
.panel-1-split-container.text-only.height-short .panel-1-text-column { min-height: 250px; }
.panel-1-split-container.text-only.height-medium .panel-1-text-column { min-height: 400px; }
.panel-1-split-container.text-only.height-large .panel-1-text-column { min-height: 567px; /* was 70vh; px so the 1440x810 preview stage is truthful (=70vh of 810) */ }
.panel-1-split-container.text-only.height-full .panel-1-text-column { min-height: 100vh; }
.panel-1-image-column.img-element-mode { position: relative; display: block; padding: 20px; box-sizing: border-box; background-image: none !important; }
.panel-1-image-element { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); max-width: calc(100% - 40px); max-height: calc(100% - 40px); width: auto; height: auto; object-fit: contain; display: block; }
.panel-1-image-element.border-subtle { border: 1px solid rgba(0, 0, 0, 0.1); }
.panel-1-image-element.border-bold { border: 3px solid rgba(0, 0, 0, 0.2); }
.panel-1-image-element.border-white-matte { border: 12px solid white; outline: 1px solid rgba(0, 0, 0, 0.1); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); }
.panel-1-image-element.border-polaroid { border: 10px solid white; border-bottom-width: 40px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25); }
.panel-1-image-element.shadow-subtle-lift { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); }
.panel-1-image-element.shadow-card-shadow { box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15); }
.panel-1-image-element.shadow-dramatic { box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25); }
.panel-1-image-element.shadow-soft-glow { box-shadow: 0 0 30px rgba(0, 0, 0, 0.12); }
.panel-1-image-element.shadow-hard-drop { box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.15); }
.panel-1-image-element.tilt-left { transform: translate(-50%, -50%) rotate(-3deg); }
.panel-1-image-element.tilt-right { transform: translate(-50%, -50%) rotate(3deg); }
.panel-1-image-element.border-white-matte.shadow-subtle-lift, .panel-1-image-element.border-white-matte.shadow-card-shadow { box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2); }
.panel-1-image-element.border-white-matte.shadow-dramatic { box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3); }
.panel-1-image-element.border-polaroid.shadow-subtle-lift, .panel-1-image-element.border-polaroid.shadow-card-shadow { box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3); }
.panel-1-image-element.border-polaroid.shadow-dramatic { box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35); }
.panel-1-image-column.border-none { border: none; }
.panel-1-image-column.border-subtle { border: 1px solid rgba(0, 0, 0, 0.1); }
.panel-1-image-column.border-bold { border: 3px solid rgba(0, 0, 0, 0.2); }
.panel-1-image-column.border-white-matte { padding: 12px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); }
.panel-1-image-column.border-polaroid { padding: 10px 10px 40px 10px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25); }
.panel-1-image-column.tilt-left { transform: rotate(-3deg); }
.panel-1-image-column.tilt-right { transform: rotate(3deg); }
.panel-1-image-column.shadow-none { box-shadow: none; }
.panel-1-image-column.shadow-subtle-lift { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); }
.panel-1-image-column.shadow-card-shadow { box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15); }
.panel-1-image-column.shadow-dramatic { box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25); }
.panel-1-image-column.shadow-soft-glow { box-shadow: 0 0 30px rgba(0, 0, 0, 0.12); }
.panel-1-image-column.shadow-hard-drop { box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.15); }
.panel-1-split-container > .panel-1-text-column, .panel-1-split-container > .panel-1-image-column { position: relative; z-index: 2; }
.panel-1-split-container.has-pattern::after { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.panel-1-split-container.height-auto .panel-1-video-column { min-height: 300px; }
/* Video columns carry the same 1440-anchored shape minimums as the image
   columns above (see the comment over the image-column rules): px floors
   unchanged, cqw pairs equal them at a 1440-wide panel. large's old 70vh
   becomes the 567px + 39.375cqw pair -- identical to 70vh on 16:9 monitors
   (0.7 * 9/16 = 0.39375), and previewable in the editor stage. The video
   letterboxes inside the column (centered flex wrapper), so a taller
   column never crops it -- the benign divergence direction. Full Viewport
   stays 100vh, same rationale as photos. Browsers without cqw drop the
   max() line and keep today's px floors. */
.panel-1-split-container.height-short .panel-1-video-column { min-height: 300px; min-height: max(300px, 20.8333cqw); }
.panel-1-split-container.height-medium .panel-1-video-column { min-height: 450px; min-height: max(450px, 31.25cqw); }
.panel-1-split-container.height-large .panel-1-video-column { min-height: 567px; min-height: max(567px, 39.375cqw); }
.panel-1-split-container.height-full .panel-1-video-column { min-height: 100vh; }
.panel-1-split-container.ratio-70-30 .panel-1-video-column { flex: 0 0 70%; }
.panel-1-split-container.ratio-60-40 .panel-1-video-column { flex: 0 0 60%; }
.panel-1-split-container.ratio-50-50 .panel-1-video-column { flex: 1 1 50%; }
.panel-1-split-container.ratio-40-60 .panel-1-video-column { flex: 0 0 40%; }
.panel-1-split-container.ratio-30-70 .panel-1-video-column { flex: 0 0 30%; }
.panel-1-split-container.swapped .panel-1-video-column { order: 2; }
.panel-1-split-container.swapped.ratio-70-30 .panel-1-video-column { flex: 0 0 30%; }
.panel-1-split-container.swapped.ratio-60-40 .panel-1-video-column { flex: 0 0 40%; }
.panel-1-split-container.swapped.ratio-40-60 .panel-1-video-column { flex: 0 0 60%; }
.panel-1-split-container.swapped.ratio-30-70 .panel-1-video-column { flex: 0 0 70%; }
/* Split-mode & two-videos fixed heights: the video FILLS the column (the
   iframe letterboxes internally), so the column's shape minimum -- not the
   flowed 16:9 wrapper strip -- owns the panel height. This adopts the admin
   stylesheet's long-standing rule (VideoCallToAction.css, "override aspect
   ratio to fill space"), which is what the editors have always previewed;
   without it the flowed 56.25% wrapper silently made live split panels
   taller than every preset (a full-width 50-50 short panel rendered 405px
   tall at 1440, not 300px). Scoped :not(.video-only) so the centered
   video-only box below keeps winning, and >=769px so the stacked mobile
   layout keeps its aspect-true flowed wrapper (the @768 block re-flows the
   wrapper). Keep in lockstep with VideoCallToAction.css. */
@media (min-width: 769px) {
    .panel-1-split-container.video-panel.height-short:not(.video-only) .video-wrapper, .panel-1-split-container.video-panel.height-medium:not(.video-only) .video-wrapper, .panel-1-split-container.video-panel.height-large:not(.video-only) .video-wrapper, .panel-1-split-container.video-panel.height-full:not(.video-only) .video-wrapper { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; padding-bottom: 0; }
}
/* Two-videos mode: two 50% video columns, no text column. The builder has
   emitted the two-videos class since the mode shipped, but no rules for it
   existed in this file -- the layout only worked by falling through to the
   base .panel-1-video-column flex default. Made explicit; mirrors
   VideoCallToAction.css. Mobile stacking needs nothing extra: the @768
   flex-direction:column container rule and 100%-width column rules already
   match on class. */
.panel-1-split-container.video-panel.two-videos { display: flex; gap: 0; }
.panel-1-split-container.video-panel.two-videos .panel-1-video-column { flex: 1 1 50%; min-width: 0; }
.panel-1-split-container.video-panel.two-videos .panel-1-text-column { display: none; }
.panel-1-split-container.video-only { display: block !important; position: relative; overflow: hidden; }
.panel-1-split-container.video-only .panel-1-text-column { display: none !important; }
.panel-1-split-container.video-only.height-auto { min-height: auto; }
.panel-1-split-container.video-only.height-auto .panel-1-video-column { position: relative; width: 100%; min-height: auto; display: block; }
.panel-1-split-container.video-only.height-auto .video-wrapper { position: relative; width: 100%; height: 0; }
.panel-1-split-container.video-only.height-auto .video-wrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.panel-1-split-container.video-only.height-short, .panel-1-split-container.video-only.height-medium, .panel-1-split-container.video-only.height-large, .panel-1-split-container.video-only.height-full { overflow: hidden; }
.panel-1-split-container.video-only.height-short .panel-1-video-column, .panel-1-split-container.video-only.height-medium .panel-1-video-column, .panel-1-split-container.video-only.height-large .panel-1-video-column, .panel-1-split-container.video-only.height-full .panel-1-video-column { position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: center; min-height: auto; }
.panel-1-split-container.video-only.height-short .video-wrapper, .panel-1-split-container.video-only.height-medium .video-wrapper, .panel-1-split-container.video-only.height-large .video-wrapper, .panel-1-split-container.video-only.height-full .video-wrapper { position: relative; width: auto; height: auto; max-width: 100%; max-height: 100%; padding-bottom: 0; aspect-ratio: 16 / 9; }
.panel-1-split-container.video-only.height-short .video-wrapper iframe, .panel-1-split-container.video-only.height-medium .video-wrapper iframe, .panel-1-split-container.video-only.height-large .video-wrapper iframe, .panel-1-split-container.video-only.height-full .video-wrapper iframe { position: relative; width: 100%; height: 100%; }
.panel-1-split-container.video-only.height-short .video-wrapper.aspect-ratio-16-9, .panel-1-split-container.video-only.height-medium .video-wrapper.aspect-ratio-16-9, .panel-1-split-container.video-only.height-large .video-wrapper.aspect-ratio-16-9, .panel-1-split-container.video-only.height-full .video-wrapper.aspect-ratio-16-9 { aspect-ratio: 16 / 9; padding-bottom: 0 !important; }
.panel-1-split-container.video-only.height-short .video-wrapper.aspect-ratio-4-3, .panel-1-split-container.video-only.height-medium .video-wrapper.aspect-ratio-4-3, .panel-1-split-container.video-only.height-large .video-wrapper.aspect-ratio-4-3, .panel-1-split-container.video-only.height-full .video-wrapper.aspect-ratio-4-3 { aspect-ratio: 4 / 3; padding-bottom: 0 !important; }
.panel-1-split-container.video-only.height-short .video-wrapper.aspect-ratio-1-1, .panel-1-split-container.video-only.height-medium .video-wrapper.aspect-ratio-1-1, .panel-1-split-container.video-only.height-large .video-wrapper.aspect-ratio-1-1, .panel-1-split-container.video-only.height-full .video-wrapper.aspect-ratio-1-1 { aspect-ratio: 1 / 1; padding-bottom: 0 !important; }
.panel-1-split-container.video-only.height-short .video-wrapper.aspect-ratio-9-16, .panel-1-split-container.video-only.height-medium .video-wrapper.aspect-ratio-9-16, .panel-1-split-container.video-only.height-large .video-wrapper.aspect-ratio-9-16, .panel-1-split-container.video-only.height-full .video-wrapper.aspect-ratio-9-16 { aspect-ratio: 9 / 16; padding-bottom: 0 !important; }
.panel-1-split-container.video-only.height-short .video-wrapper.aspect-ratio-21-9, .panel-1-split-container.video-only.height-medium .video-wrapper.aspect-ratio-21-9, .panel-1-split-container.video-only.height-large .video-wrapper.aspect-ratio-21-9, .panel-1-split-container.video-only.height-full .video-wrapper.aspect-ratio-21-9 { aspect-ratio: 21 / 9; padding-bottom: 0 !important; }
/* Video-only fixed heights: the video column is absolutely positioned, so
   the container's min-height alone sets the band height -- historically a
   constant 300/450px (or viewport-dependent 70vh) at every width. Same
   shape conversion as the columns above; every value equals historic
   behavior at the 1440 anchor. short's max-height:400px cap is dropped
   for the same reason as the photo short cap: a ceiling contradicts a
   proportional shape (it would freeze the band once the panel passes
   ~1920px wide); at 1440 its removal changes nothing (300 < 400). */
.panel-1-split-container.video-only.height-short { min-height: 300px; min-height: max(300px, 20.8333cqw); }
.panel-1-split-container.video-only.height-medium { min-height: 450px; min-height: max(450px, 31.25cqw); }
.panel-1-split-container.video-only.height-large { min-height: 567px; min-height: max(567px, 39.375cqw); }
.panel-1-split-container.video-only.height-full { min-height: 100vh; }
.panel-1-text-column:has(.signup-preview-container) .panel-1-text-content { max-width: 90%; }
.panel-1-text-content:has(.signup-preview-container) .panel-1-headline { margin-bottom: 0.35em; }
.panel-1-text-column .signup-preview-container { width: 100%; max-width: 100%; box-sizing: border-box; margin-top: 1.25em; }


/* ── 14. Video Panel ─────────────────────────────────────── */

.panel-1-video-column { flex: 1 1 50%; min-width: 0; position: relative; background-color: #000; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.video-wrapper { position: relative; width: 100%; height: 0; padding-bottom: 56.25%; overflow: hidden; }
.video-wrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; }
.video-wrapper.aspect-ratio-16-9 { padding-bottom: 56.25%; }
.video-wrapper.aspect-ratio-4-3 { padding-bottom: 75%; }
.video-wrapper.aspect-ratio-1-1 { padding-bottom: 100%; }
.video-wrapper.aspect-ratio-9-16 { padding-bottom: 177.78%; }
.video-wrapper.aspect-ratio-21-9 { padding-bottom: 42.86%; }


/* ── 15. Countdown ───────────────────────────────────────── */

#pollWrapper .countdown-clock { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }
#pollWrapper .countdown-section { display: flex; flex-direction: column; align-items: center; min-width: 45px; }
#pollWrapper .countdown-amount { font-size: 1.8em; font-weight: 700; line-height: 1.2; }
#pollWrapper .countdown-period { font-size: 0.65em; text-transform: uppercase; letter-spacing: 1px; opacity: 0.85; margin-top: 4px; }
#pollWrapper .countdown-date { margin-top: 15px; font-size: 0.9em; opacity: 0.9; }


/* ── 16. Events ──────────────────────────────────────────── */

#eventsBar { color: #000; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; margin: 10px 0; padding: 10px; background: #f8f9fa; border-radius: 6px; }
#eventsTopLinks { display: flex; background: #f8f9fa; border-radius: 6px; overflow: hidden; margin: 10px 0; }
#eventsTopLinks a { flex: 1; text-align: center; padding: 12px 8px; text-decoration: none; color: #000; background: #e9ecef; border-right: 1px solid #dee2e6; transition: background-color 0.2s ease; }
#eventsTopLinks a:hover { background: #dee2e6; color: #000; }
#eventsTopLinks a:last-child { border-right: none; }
#eventsTopLinks .pad { display: none; }
#eventsBar a { color: #000; text-decoration: none; }
#eventsBar a:hover { text-decoration: underline; }
#eventsBar .pad { display: none; }
#eventsBar > span:not(.pad) { text-align: center; color: #000; }


/* ── 17. Issue Navigation ────────────────────────────────── */

.issue-navigation { display: flex; justify-content: space-between; margin: 20px 0; }
.prev-link-container { flex: 1; text-align: left; }
.next-link-container { flex: 1; text-align: right; }
.prev-link,.next-link { text-decoration: none; }
.prev-link:hover,.next-link:hover { text-decoration: underline; }


/* ── 18. Miscellaneous ───────────────────────────────────── */

.fancybox-container { z-index: 999999!important; }
.news-wrapper { max-width: 1250px; margin: 0 auto; }
.news-wrapper hr { clear: both; }
select { -webkit-appearance: none; -moz-appearance: none; }
cycle-slideshow div a img { width: 100%; max-width: 100%; height: 100% !important; margin: 0 auto; display: block !important; }
a { transition-delay: 0s; transition-duration: 0.35s; transition-property: all; transition-timing-function: ease; }
img[src ^= "https://graphics"] { width: 1px; height: 1px; }
body { display: flex; flex-direction: column; min-height: 100vh; }


/* ── 19. Responsive Overrides ─────────────────────────── */

@media (max-width: 1024px) {
    .panel-1-split-container.height-large { min-height: 60vh; }
    .panel-1-split-container.height-large .panel-1-image-column { min-height: 60vh; }
    .panel-1-split-container.height-full { min-height: 100vh; }
    .panel-1-split-container.height-full .panel-1-image-column { min-height: 100vh; }
    .panel-1-split-container.height-large .panel-1-video-column { min-height: 60vh; }
    .panel-1-split-container.height-full .panel-1-video-column { min-height: 100vh; }
    .panel-1-split-container.video-only.height-large { min-height: 60vh; }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .tinyLogo img { max-width: 200px; }
}

@media (max-width: 940px) {
    #amountsSection { margin-right:auto; margin-left:auto; padding-right:0; padding-left:0;}
    #emailSignup { flex-direction: column; height: unset; }
    #signupWrapper { height: unset; }
    #subButton{max-width:237px; width:100%;}
    .textfield { padding: 12px 17px; flex-grow: 1;  margin-right: 0; margin-bottom: 5px; }
    .zip-field { max-width: unset; }
    .bottom-nav-menu{flex-direction:column; line-height:2em;}
    .input-container:has(input:not(.nv):nth-of-type(5)) { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
    .figure-right, .figure-left{float:none!important; margin:20px auto;}
}

@media (max-width: 768px) {
    .image-size-25,.image-size-50,.image-size-75{width:100%!important;max-width:100%!important;float:none!important;margin:15px auto!important;display:block!important;}
    .image-align-left,.image-align-right{float:none!important;display:block!important;margin:15px auto!important;max-width:100%!important;}
    .image-circle{max-width:200px!important;margin:15px auto!important;display:block!important;}
    .image-pull-left,.image-pull-right{float:none!important;width:100%!important;margin:15px auto!important;box-shadow:0 4px 15px rgba(0,0,0,0.15)!important;}
    .image-polaroid-left,.image-polaroid-right{float:none!important;margin:20px auto!important;transform:rotate(0deg)!important;}
    .image-hero{width:100%!important;margin-left:0!important;}
    .panel-1-split-container { flex-direction: column; overflow: hidden; }
    .panel-1-split-container.swapped { flex-direction: column; }
    .panel-1-image-column { flex: none; width: 100%; overflow: hidden; }
    .panel-1-text-column { flex: none; width: 100%; padding: 30px 20px; }
    .panel-1-text-content { max-width: 100%; }
    .panel-1-split-container.ratio-70-30 .panel-1-image-column, .panel-1-split-container.ratio-60-40 .panel-1-image-column, .panel-1-split-container.ratio-50-50 .panel-1-image-column, .panel-1-split-container.ratio-40-60 .panel-1-image-column, .panel-1-split-container.ratio-30-70 .panel-1-image-column { flex: none; width: 100%; }
    .panel-1-split-container.ratio-70-30 .panel-1-text-column, .panel-1-split-container.ratio-60-40 .panel-1-text-column, .panel-1-split-container.ratio-50-50 .panel-1-text-column, .panel-1-split-container.ratio-40-60 .panel-1-text-column, .panel-1-split-container.ratio-30-70 .panel-1-text-column { flex: none; width: 100%; }
    .panel-1-split-container.swapped.ratio-70-30 .panel-1-image-column, .panel-1-split-container.swapped.ratio-60-40 .panel-1-image-column, .panel-1-split-container.swapped.ratio-40-60 .panel-1-image-column, .panel-1-split-container.swapped.ratio-30-70 .panel-1-image-column { flex: none; width: 100%; }
    .panel-1-split-container.swapped.ratio-70-30 .panel-1-text-column, .panel-1-split-container.swapped.ratio-60-40 .panel-1-text-column, .panel-1-split-container.swapped.ratio-40-60 .panel-1-text-column, .panel-1-split-container.swapped.ratio-30-70 .panel-1-text-column { flex: none; width: 100%; }
    .panel-1-split-container.height-auto .panel-1-image-column { min-height: 250px; }
    .panel-1-split-container.height-short .panel-1-image-column { min-height: 200px; }
    .panel-1-split-container.height-medium .panel-1-image-column { min-height: 300px; }
    .panel-1-split-container.height-large .panel-1-image-column { min-height: 50vh; }
    .panel-1-split-container.height-full .panel-1-image-column { min-height: 60vh; }
    .panel-1-split-container.height-short, .panel-1-split-container.height-medium, .panel-1-split-container.height-large, .panel-1-split-container.height-full { min-height: auto; max-height: none; }
    .panel-1-split-container.inset-photo { padding: 0; overflow: hidden; }
    .panel-1-image-column.img-element-mode { padding: 15px; overflow: hidden; display: flex; justify-content: center; align-items: center; }
    .panel-1-image-element { position: relative; top: auto; left: auto; transform: none; max-width: calc(100% - 10px); max-height: none; width: auto; box-sizing: border-box; display: block; }
    .panel-1-image-element.border-white-matte { border-width: 8px; }
    .panel-1-image-element.border-polaroid { border-width: 6px; border-bottom-width: 25px; }
    .panel-1-image-element.tilt-left, .panel-1-image-element.tilt-right { transform: none; }
    .panel-1-headline { font-size: clamp(1.25rem, 5vw, 1.75rem); }
    .panel-1-subheadline { font-size: clamp(0.95rem, 3vw, 1.1rem); }
    .panel-1-paragraph { font-size: clamp(0.9rem, 3vw, 1rem); }
    .panel-1-split-container.photo-only .panel-1-image-column { min-height: 250px; }
    .panel-1-split-container.photo-only.height-auto .panel-1-image-column { min-height: 0; }
    .panel-1-split-container.photo-only.height-auto.inset-photo { padding: 15px !important; }
    .panel-1-split-container.text-only .panel-1-text-column { min-height: 150px; }
    .panel-1-split-container.text-only .panel-1-text-content { max-width: 100%; padding: 0 10px; }
    .panel-1-image-column.fade-edge { -webkit-mask-image: none !important; mask-image: none !important; }
    .panel-1-split-container.has-pattern::after { -webkit-mask-image: none !important; mask-image: none !important; }
    .panel-1-video-column { flex: none; width: 100%; display: flex; align-items: center; justify-content: center; }
    .panel-1-split-container.ratio-70-30 .panel-1-video-column, .panel-1-split-container.ratio-60-40 .panel-1-video-column, .panel-1-split-container.ratio-50-50 .panel-1-video-column, .panel-1-split-container.ratio-40-60 .panel-1-video-column, .panel-1-split-container.ratio-30-70 .panel-1-video-column { flex: none; width: 100%; }
    .panel-1-split-container.swapped.ratio-70-30 .panel-1-video-column, .panel-1-split-container.swapped.ratio-60-40 .panel-1-video-column, .panel-1-split-container.swapped.ratio-40-60 .panel-1-video-column, .panel-1-split-container.swapped.ratio-30-70 .panel-1-video-column { flex: none; width: 100%; }
    .panel-1-split-container.height-auto .panel-1-video-column { min-height: auto; }
    .panel-1-split-container.height-short .panel-1-video-column { min-height: 200px; }
    .panel-1-split-container.height-medium .panel-1-video-column { min-height: 250px; }
    .panel-1-split-container.height-large .panel-1-video-column { min-height: 50vh; }
    .panel-1-split-container.height-full .panel-1-video-column { min-height: 60vh; }
    .video-wrapper { position: relative; height: 0; padding-bottom: 56.25%; }
    .video-wrapper iframe { position: absolute !important; top: 0; left: 0; width: 100%; height: 100%; }
    .panel-1-split-container.video-only { min-height: auto !important; max-height: none !important; display: block !important; }
    .panel-1-split-container.video-only .panel-1-video-column { position: relative !important; min-height: auto !important; width: 100% !important; height: auto !important; display: block !important; }
    .panel-1-split-container.video-only .video-wrapper { position: relative !important; width: 100% !important; height: 0 !important; max-width: none !important; max-height: none !important; aspect-ratio: auto !important; }
    .panel-1-split-container.video-only .video-wrapper iframe { position: absolute !important; width: 100% !important; height: 100% !important; }
    .panel-1-split-container.video-only.height-short, .panel-1-split-container.video-only.height-medium, .panel-1-split-container.video-only.height-large, .panel-1-split-container.video-only.height-full { min-height: auto !important; max-height: none !important; }
    .panel-1-text-column .input-container .textfield, .panel-1-text-column .input-container #subButton { flex-basis: 100%; min-width: 0; padding: 10px !important; font-size: 14px !important; }
    .panel-1-text-column .input-container.force-stacked { max-width: 100%; }
    .panel-1-text-column:has(.signup-preview-container) .panel-1-text-content { max-width: 100%; }
    .tinyLogo img { max-width: 150px; min-width: 100px; }
    .input-container { grid-template-columns: 1fr !important; padding: 0 15px; }
    #emailSignup { max-width: 100%; }
    #signupWrapper { padding: 15px 15px 30px; }
    .signupDisclaimer { margin: 20px 15px 10px; font-size: 13px; }
    .sms-optin-label { font-size: 12px; }
}

@media (max-width: 600px) {
    .fw-horizontal .fw-content-row { flex-direction: column; align-items: stretch; text-align: center; } .fw-horizontal .fw-amounts { justify-content: center; } .fw-horizontal .fw-thermo-row { justify-content: center; }
    #eventsTopLinks a {padding: 10px 4px; font-size: 14px;}
    #eventsBar {grid-template-columns: 1fr 2fr 1fr; gap: 8px; padding: 8px;}
    .twocolumn-row, .threecolumn-row, .fourcolumn-row, .twocolumn-7030-row, .twocolumn-3070-row { display:flex; flex-direction: column; }
}

@media (max-width: 480px) {
    .image-rounded{border-radius:8px!important;}
    .image-rounded-lg{border-radius:16px!important;}
    .panel-1-text-column { padding: 24px 16px; }
    .panel-1-cta-button { display: block; width: 100%; text-align: center; box-sizing: border-box; }
    .panel-1-image-column.img-element-mode { padding: 10px; }
    .panel-1-image-element.border-white-matte { border-width: 6px; }
    .panel-1-image-element.border-polaroid { border-width: 5px; border-bottom-width: 20px; }
    .panel-1-headline { font-size: clamp(1.1rem, 5vw, 1.5rem); }
    .panel-1-subheadline { font-size: clamp(0.9rem, 3vw, 1rem); }
    .panel-1-paragraph { font-size: clamp(0.85rem, 3vw, 0.95rem); }
    .panel-1-split-container.photo-only.height-auto.inset-photo { padding: 10px !important; }
    .panel-1-split-container.height-short .panel-1-video-column { min-height: 180px; }
    .panel-1-split-container.height-medium .panel-1-video-column { min-height: 220px; }
    #eventsTopLinks a {padding: 8px 2px; font-size: 12px;}
    #eventsBar {font-size: 12px;}
    .tinyLogo img { width: 100%; height:auto;}
    .tinyLogo{ height: auto; max-width: 70%; width:auto;}
}

@media (max-width: 450px) {
    .e-column { max-width: 100%!important; }
}

@media (max-width: 300px) {
    .menu { display: none;} #navigation{text-align:right;} .btn-open{text-align:right!important; color:#000;} .menu-open-button { display: inline;  text-align:right!important; } #sidebar{min-width:unset!important; margin-left:0; margin-right:0; margin-top:0;}.sidebar-button{max-width:unset;}
}

@media (min-width: 1025px) {
    .tinyLogo img { max-width: 250px; }
}

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    #container{ min-height: 70vh!important;}
    .sidebar-button{line-height:20px;}
}

@media screen and (-webkit-min-device-pixel-ratio: 2) {
    .tinyLogo img { transform: translateZ(0); -webkit-backface-visibility: hidden; }
}


/* ============================================
   YouTube Facade - click-to-load embeds
   ============================================ */

/* Standalone facade: sizes itself like a responsive 16:9 video */
.yt-facade {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #000;
    cursor: pointer;
    overflow: hidden;
}

/* Inside the existing padding-hack wrapper, fill it like the iframe did */
.video-container > .yt-facade {
    position: absolute;
    inset: 0;
    height: 100%;
    aspect-ratio: auto;
}

.yt-facade > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Play button: YouTube-proportioned rounded rect + triangle, pure CSS */
.yt-facade-play {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 68px;
    height: 48px;
    transform: translate(-50%, -50%);
    background: rgba(23, 23, 23, 0.8);
    border-radius: 14px;
    transition: background 0.2s ease;
}

.yt-facade-play::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-40%, -50%);
    border-style: solid;
    border-width: 11px 0 11px 19px;
    border-color: transparent transparent transparent #fff;
}

.yt-facade:hover .yt-facade-play,
.yt-facade:focus-visible .yt-facade-play {
    background: #f00;
}

.yt-facade:focus-visible {
    outline: 3px solid #4d90fe;
    outline-offset: 2px;
}

/* Once activated, the injected iframe fills the facade */
.yt-facade-active {
    cursor: default;
}

.yt-facade > iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* Header: avatar + title + channel name, YouTube-player style.
   Removed automatically on activation (facade contents are replaced). */
.yt-facade-header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 14px 28px;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.65), transparent);
    pointer-events: none;
}

/* Channel initial on a disc (no avatar image; avoids a Data API dependency) */
.yt-facade-avatar {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    color: #fff;
    font-family: "YouTube Noto", Roboto, Arial, Helvetica, sans-serif;
    font-size: 18px;
    font-weight: 500;
    background: #606060;
}

.yt-facade-meta {
    min-width: 0; /* lets the title ellipsis inside a flex row */
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.yt-facade-title {
    color: #fff;
    font-family: "YouTube Noto", Roboto, Arial, Helvetica, sans-serif;
    font-size: 20px;
    font-weight: 500; /* YouTube uses medium, not semibold */
    line-height: 1.2;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.yt-facade-channel {
    color: rgba(255, 255, 255, 0.85);
    font-family: "YouTube Noto", Roboto, Arial, Helvetica, sans-serif;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.2;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}