/*
 * MP-023-03 Community Impact Fund - LWR site global styles (head-markup CSS).
 * CIF brand palette/fonts scraped from metropolitanpark.com/fund (MP-022 baseline architecture s5).
 * The site uses one shared Space Grotesk-first system stack without external font loading.
 * Standard LWR components
 * (Section + HTML Editor) are composed on the page; these classes style their content.
 */
:root {
    --mp-font-family: "Space Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --dxp-s-html-font-family: var(--mp-font-family);
    --dxp-g-heading-font-family: var(--mp-font-family);
    --dxp-s-text-heading-small-font-family: var(--mp-font-family);
    --dxp-c-nav-bar-menu-item-font-family: var(--mp-font-family);
    --mp-blue: #0080e1;
    --mp-blue-dark: #004989;
    --mp-navy: #00213a;
    --mp-teal: #00b290;
    --mp-green: #17d65f;
    --mp-coral: #ed7f4f;
    --mp-coral-dark: #d96a3a;
    --mp-offwhite: #f4f1f6;
    --mp-ink: #40525f;
    --mp-muted: #7a8894;
    --mp-line: rgba(0, 33, 58, 0.10);
    --mp-sans: var(--mp-font-family);
    --mp-serif: var(--mp-font-family);
    --mp-shadow: 0 10px 30px rgba(0, 33, 58, 0.10);
    --mp-shadow-lg: 0 20px 48px rgba(0, 33, 58, 0.18);
    --mp-radius: 18px;
}

html,
body {
    height: 100%;
}

html {
    height: 100%;
    background:
        radial-gradient(circle at 12% 20%, rgba(0, 178, 144, 0.12), transparent 34%),
        radial-gradient(circle at 88% 82%, rgba(237, 127, 79, 0.14), transparent 32%),
        var(--mp-offwhite);
    background-attachment: fixed;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background:
        radial-gradient(circle at 12% 20%, rgba(0, 178, 144, 0.12), transparent 34%),
        radial-gradient(circle at 88% 82%, rgba(237, 127, 79, 0.14), transparent 32%),
        var(--mp-offwhite);
    background-attachment: fixed;
    font-family: var(--mp-sans);
    color: var(--mp-navy);
    -webkit-font-smoothing: antialiased;
}

/* Shared section shell (centered, comfortable reading width). */
.mp-section {
    max-width: 1120px;
    margin: 0 auto;
    padding: 4rem 1.5rem;
}

.mp-section-narrow {
    max-width: 820px;
}

/* Full-bleed alternate band. */
.mp-section-alt {
    max-width: none;
    margin: 0;
    padding: 0;
    background:
        radial-gradient(120% 140% at 100% 0%, rgba(0, 178, 144, 0.10) 0%, rgba(0, 178, 144, 0) 55%),
        var(--mp-offwhite);
}

.mp-section-alt .mp-section-inner {
    max-width: 820px;
    margin: 0 auto;
    padding: 4rem 1.5rem;
}

/* Eyebrow / kicker label above headings. */
.mp-eyebrow {
    font-family: var(--mp-sans);
    text-transform: uppercase;
    letter-spacing: 0.16em;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--mp-teal);
    margin: 0 0 0.65rem 0;
}

.mp-h2 {
    font-family: var(--mp-serif);
    color: var(--mp-navy);
    font-size: clamp(1.85rem, 3vw, 2.5rem);
    line-height: 1.12;
    letter-spacing: -0.01em;
    margin: 0 0 1rem 0;
}

.mp-lead {
    font-family: var(--mp-sans);
    color: var(--mp-ink);
    font-size: 1.18rem;
    line-height: 1.65;
    margin: 0;
}

/* ---------- Buttons ---------- */
.mp-btn {
    display: inline-block;
    font-family: var(--mp-sans);
    font-weight: 700;
    border: none;
    border-radius: 999px;
    cursor: pointer;
    font-size: 1.05rem;
    padding: 0.95rem 2.1rem;
    text-decoration: none;
    transition: transform 0.12s ease, box-shadow 0.2s ease, background 0.15s ease;
}

.mp-btn-primary {
    background: #0080e1;
    color: #ffffff;
    box-shadow: 0 10px 24px rgba(0, 128, 225, 0.35);
}

.mp-btn-primary:hover {
    background: #004989;
    color: #ffffff;
    text-decoration: none;
    transform: translateY(-2px);
    box-shadow: 0 16px 30px rgba(0, 128, 225, 0.42);
}

.mp-btn-primary:active {
    transform: translateY(0) scale(0.99);
}

.mp-btn-ghost {
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
    border: 1.5px solid rgba(255, 255, 255, 0.55);
    margin-left: 0.75rem;
}

.mp-btn-ghost:hover {
    background: rgba(255, 255, 255, 0.22);
    color: #ffffff;
    text-decoration: none;
    transform: translateY(-2px);
}

.mp-btn-lg {
    font-size: 1.15rem;
    padding: 1.05rem 2.6rem;
}

/* ---------- Hero ---------- */
.mp-hero {
    position: relative;
    color: #ffffff;
    padding: 6rem 1.5rem;
    text-align: center;
    overflow: hidden;
    border-radius: 0 0 32px 32px;
    background-color: var(--mp-navy);
    background-image:
        linear-gradient(135deg, rgba(0, 33, 58, 0.92) 0%, rgba(0, 73, 137, 0.82) 55%, rgba(0, 128, 225, 0.72) 100%),
        url("/sfsites/c/resource/MP_CommunityImpactFund_Brand/hero-community-impact-fund.png");
    background-size: cover;
    background-position: center;
}

.mp-hero::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 6px;
    background: linear-gradient(90deg, var(--mp-teal) 0%, var(--mp-green) 50%, var(--mp-coral) 100%);
}

.mp-hero-inner {
    position: relative;
    max-width: 860px;
    margin: 0 auto;
    z-index: 1;
}

.mp-hero-logo {
    max-height: 72px;
    width: auto;
    margin: 0 0 1.75rem 0;
    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.35));
}

.mp-hero-eyebrow {
    font-family: var(--mp-sans);
    text-transform: uppercase;
    letter-spacing: 0.2em;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--mp-green);
    margin: 0 0 0.9rem 0;
}

.mp-hero-title {
    font-family: var(--mp-serif);
    font-size: clamp(2.4rem, 6vw, 3.6rem);
    line-height: 1.03;
    letter-spacing: -0.015em;
    margin: 0 0 1.35rem 0;
    color: #ffffff;
}

.mp-hero-mission {
    font-family: var(--mp-sans);
    font-size: clamp(1.1rem, 2.2vw, 1.3rem);
    line-height: 1.6;
    margin: 0 auto 2.2rem auto;
    max-width: 700px;
    color: rgba(255, 255, 255, 0.94);
}

.mp-hero-cta-wrap {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: center;
    align-items: center;
}

:is(.mp-hero-cta-wrap, .mp-cta-band) .mp-btn {
    min-width: 190px;
    box-sizing: border-box;
    margin: 0;
    background: #0080e1 !important;
    border: 2px solid #ffffff;
    color: #ffffff !important;
    box-shadow: 0 10px 24px rgba(0, 33, 58, 0.28);
    text-align: center;
}

:is(.mp-hero-cta-wrap, .mp-cta-band) .mp-btn,
:is(.mp-hero-cta-wrap, .mp-cta-band) .mp-btn:visited,
:is(.mp-hero-cta-wrap, .mp-cta-band) .mp-btn:hover,
:is(.mp-hero-cta-wrap, .mp-cta-band) .mp-btn:focus,
:is(.mp-hero-cta-wrap, .mp-cta-band) .mp-btn:active {
    color: #ffffff !important;
    text-decoration: none !important;
}

:is(.mp-hero-cta-wrap, .mp-cta-band) .mp-btn:hover,
:is(.mp-hero-cta-wrap, .mp-cta-band) .mp-btn:focus-visible {
    background: #004989 !important;
    border-color: #ffffff;
    color: #ffffff !important;
    transform: translateY(-2px);
    box-shadow: 0 16px 30px rgba(0, 33, 58, 0.36);
}

/* ---------- Impact stat band ---------- */
.mp-stat {
    height: 100%;
    background: #ffffff;
    border: 1px solid var(--mp-line);
    border-radius: var(--mp-radius);
    box-shadow: var(--mp-shadow);
    padding: 2rem 1.5rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    box-sizing: border-box;
}

.mp-stat-num {
    font-family: var(--mp-serif);
    font-size: clamp(2.2rem, 4vw, 2.9rem);
    line-height: 1;
    font-weight: 700;
    background: linear-gradient(120deg, var(--mp-blue-dark) 0%, var(--mp-teal) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--mp-blue-dark);
}

.mp-stat-label {
    font-family: var(--mp-sans);
    color: var(--mp-ink);
    font-size: 1rem;
    line-height: 1.45;
    max-width: 15rem;
}

/* ---------- Focus areas ---------- */
:is(dxp_layout-columns, dxp-layout-columns):has(.mp-focus-tile) {
    width: 100%;
    max-width: 1650px;
    box-sizing: border-box;
    margin: 0 auto;
    padding: 0 1.5rem 4rem;
}

.mp-focus-head {
    padding-bottom: 1rem;
    text-align: center;
}

.mp-focus-head .mp-lead {
    max-width: 620px;
    margin: 0 auto;
}

:is(community_builder-html-editor, community-builder-html-editor):has(.mp-focus-tile) {
    display: block;
    height: 100%;
}

.mp-focus-tile {
    height: 100%;
    box-sizing: border-box;
    background: #ffffff;
    border: 1px solid var(--mp-line);
    border-radius: var(--mp-radius);
    padding: 1.75rem 1.5rem;
    box-shadow: var(--mp-shadow);
    transition: transform 0.16s ease, box-shadow 0.16s ease;
}

.mp-focus-tile:hover {
    transform: translateY(-6px);
    box-shadow: var(--mp-shadow-lg);
}

.mp-focus-ic {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    margin-bottom: 1.1rem;
    position: relative;
}

.mp-focus-ic::after {
    content: "";
    position: absolute;
    inset: 14px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.9);
}

.mp-ic-1 .mp-focus-ic { background: linear-gradient(135deg, #0080e1, #004989); }
.mp-ic-2 .mp-focus-ic { background: linear-gradient(135deg, #00b290, #17d65f); }
.mp-ic-3 .mp-focus-ic { background: linear-gradient(135deg, #ed7f4f, #d96a3a); }
.mp-ic-4 .mp-focus-ic { background: linear-gradient(135deg, #7a4fed, #0080e1); }

.mp-focus-tile h3 {
    font-family: var(--mp-serif);
    color: var(--mp-navy);
    font-size: 1.22rem;
    line-height: 1.22;
    margin: 0 0 0.55rem 0;
}

.mp-focus-tile p {
    font-family: var(--mp-sans);
    color: var(--mp-ink);
    font-size: 0.98rem;
    line-height: 1.55;
    margin: 0;
}

/* ---------- FAQ accordion (native details/summary) ---------- */
.mp-faq {
    margin-top: 1.5rem;
    border-top: 1px solid var(--mp-line);
}

.mp-faq-item {
    border-bottom: 1px solid var(--mp-line);
}

.mp-faq-item summary {
    font-family: var(--mp-sans);
    font-weight: 700;
    color: var(--mp-navy);
    font-size: 1.12rem;
    padding: 1.2rem 2rem 1.2rem 0.25rem;
    cursor: pointer;
    list-style: none;
    position: relative;
    transition: color 0.15s ease;
}

.mp-faq-item summary:hover {
    color: var(--mp-blue);
}

.mp-faq-item summary::-webkit-details-marker {
    display: none;
}

.mp-faq-item summary::after {
    content: "+";
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--mp-teal);
    font-weight: 700;
    font-size: 1.5rem;
    line-height: 1;
    transition: transform 0.2s ease;
}

.mp-faq-item[open] summary::after {
    content: "\2013";
    transform: translateY(-50%) rotate(0deg);
}

.mp-faq-item p {
    font-family: var(--mp-sans);
    color: var(--mp-ink);
    font-size: 1.02rem;
    line-height: 1.65;
    margin: 0 0 1.2rem 0.25rem;
    max-width: 60ch;
}

/* ---------- Closing CTA band ---------- */
.mp-cta-band {
    background:
        radial-gradient(90% 160% at 0% 0%, rgba(0, 178, 144, 0.35) 0%, rgba(0, 178, 144, 0) 50%),
        linear-gradient(135deg, var(--mp-navy) 0%, var(--mp-blue-dark) 100%);
    color: #ffffff;
    border-radius: 28px;
    text-align: center;
    padding: 3.5rem 1.5rem;
    max-width: 1120px;
    margin: 0 auto;
    box-shadow: var(--mp-shadow-lg);
}

.mp-cta-inner {
    max-width: 640px;
    margin: 0 auto;
}

.mp-cta-title {
    font-family: var(--mp-serif);
    font-size: clamp(1.7rem, 3.5vw, 2.3rem);
    line-height: 1.12;
    margin: 0 0 0.9rem 0;
    color: #ffffff;
}

.mp-cta-sub {
    font-family: var(--mp-sans);
    font-size: 1.15rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.9);
    margin: 0 0 2rem 0;
}

/* ---------- Authentication required message ---------- */
.mp-auth-required {
    max-width: 720px;
    box-sizing: border-box;
    margin: 3.5rem auto 1.5rem;
    padding: 3rem 2.5rem;
    background: #ffffff;
    border: 1px solid var(--mp-line);
    border-top: 5px solid var(--mp-blue);
    border-radius: var(--mp-radius);
    box-shadow: var(--mp-shadow);
    text-align: center;
}

.mp-auth-required .mp-lead {
    max-width: 560px;
    margin: 0 auto;
}

/* ---------- Theme header and footer ---------- */
community_builder-customizable-header,
community-builder-customizable-header {
    display: block;
    min-height: 72px;
    background: var(--mp-navy);
    color: #ffffff;
    --dxp-g-root-contrast: #ffffff;
    --dxp-s-text-color: #ffffff;
    --dxp-s-body-text-color: #ffffff;
    --dxp-s-link-text-color: #ffffff;
    --dxp-s-link-text-color-hover: #66c7ff;
    --dxp-g-brand: #0080e1;
    --dxp-c-nav-bar-menu-item-font-family: var(--mp-font-family);
    --dxp-c-nav-bar-menu-item-color-hover: #66c7ff;
    --dxp-c-nav-bar-menu-item-text-color-hover: #66c7ff;
}

community_navigation-customizable-navigation-menu,
community-navigation-customizable-navigation-menu,
community_navigation-customizable-navigation-bar-container,
community-navigation-customizable-navigation-bar-container {
    --dxp-g-brand: #0080e1;
    --dxp-s-link-text-color-hover: #66c7ff;
    --dxp-c-nav-bar-menu-item-font-family: var(--mp-font-family);
    --dxp-c-nav-bar-menu-item-color-hover: #66c7ff;
    --dxp-c-nav-bar-menu-item-text-color-hover: #66c7ff;
    font-family: var(--mp-font-family) !important;
}

community_navigation-customizable-navigation-menu *,
community-navigation-customizable-navigation-menu *,
community_navigation-customizable-navigation-bar-container *,
community-navigation-customizable-navigation-bar-container * {
    --dxp-c-nav-bar-menu-item-font-family: var(--mp-font-family);
    font-family: var(--mp-font-family) !important;
}

community_navigation-customizable-navigation-menu a:hover,
community-navigation-customizable-navigation-menu a:hover,
community_navigation-customizable-navigation-bar-container a:hover,
community-navigation-customizable-navigation-bar-container a:hover {
    color: #66c7ff !important;
}

community_navigation-customizable-navigation-hamburger-menu-container,
community-navigation-customizable-navigation-hamburger-menu-container {
    --dxp-g-root: var(--mp-navy);
    --dxp-g-root-contrast: #ffffff;
    --dxp-s-body-background-color: var(--mp-navy);
    --dxp-s-body-text-color: #ffffff;
    --dxp-s-link-text-color: #ffffff;
    --dxp-s-link-text-color-hover: #66c7ff;
    --dxp-g-brand: #0080e1;
    --dxp-c-navigation-trigger-color: #ffffff !important;
    --dxp-c-navigation-close-modal-icon-color: #ffffff !important;
    --dxp-c-nav-modal-background-color: var(--mp-navy) !important;
    --dxp-c-accordion-menu-item-background-color: var(--mp-navy) !important;
    --dxp-c-accordion-menu-item-active-background-color: #0080e1 !important;
    --dxp-c-accordion-menu-item-color: #ffffff !important;
    --dxp-c-accordion-menu-item-hover-color: #66c7ff !important;
    --dxp-c-accordion-menu-item-active-color: #ffffff !important;
    --dxp-c-accordion-active-line-color: #66c7ff !important;
    --dxp-c-accordion-divider-line-color: rgba(255, 255, 255, 0.28) !important;
    color: #ffffff;
    font-family: var(--mp-font-family) !important;
}

community_navigation-customizable-navigation-hamburger-menu-container
    :is([role="dialog"], nav, ul),
community-navigation-customizable-navigation-hamburger-menu-container
    :is([role="dialog"], nav, ul) {
    background: var(--mp-navy) !important;
    color: #ffffff !important;
}

community_navigation-customizable-navigation-hamburger-menu-container
    :is(a, button),
community-navigation-customizable-navigation-hamburger-menu-container
    :is(a, button) {
    color: #ffffff !important;
}

community_navigation-customizable-navigation-hamburger-menu-container
    :is(a, button):is(:hover, :focus-visible, [aria-current="page"]),
community-navigation-customizable-navigation-hamburger-menu-container
    :is(a, button):is(:hover, :focus-visible, [aria-current="page"]) {
    background: #0080e1 !important;
    color: #ffffff !important;
}

dxp_base-language-selector,
dxp-base-language-selector {
    --dxp-g-brand: #0080e1;
    --dxp-s-button-color: #0080e1;
    --dxp-s-button-color-hover: #0080e1;
    --dxp-c-language-selector-font-family: var(--mp-font-family);
    --dxp-c-language-selector-text-color: #ffffff;
    --dxp-c-language-selector-text-color-hover: #66c7ff;
    --dxp-c-language-selector-menu-color-background: var(--mp-navy);
    --dxp-c-language-selector-dropdown-color-background: var(--mp-navy);
    --dxp-c-language-selector-menu-item-color-background: var(--mp-navy);
    --dxp-c-language-selector-menu-item-color-background-selected: #0080e1;
    --dxp-c-language-selector-menu-item-color-background-hover: #0080e1;
    --dxp-c-language-selector-menu-item-text-color: #ffffff;
    --dxp-c-language-selector-menu-item-text-color-hover: #66c7ff;
    --dxp-s-dropdown-color-background-hover: #0080e1;
    --dxp-s-dropdown-text-color-hover: #ffffff;
    color: #ffffff;
    font-family: var(--mp-font-family) !important;
}

dxp_base-language-selector *,
dxp-base-language-selector * {
    font-family: var(--mp-font-family) !important;
}

dxp_base-language-selector a,
dxp-base-language-selector a,
dxp_base-language-selector button,
dxp-base-language-selector button {
    border-bottom: 0 !important;
    color: #ffffff !important;
    text-decoration: none !important;
}

dxp_base-language-selector a:hover,
dxp-base-language-selector a:hover,
dxp_base-language-selector button:hover,
dxp-base-language-selector button:hover {
    color: #66c7ff !important;
}

/* On desktop the button grows with its label; a wrapped label would double its height. */
@media (min-width: 1024px) {
    dxp_base-language-selector button,
    dxp-base-language-selector button {
        white-space: nowrap !important;
    }
}

/* The header's action slot defaults to a fixed 300px split into equal columns, which leaves
   "Chinese (Simplified)" too little room and pushes it past the window. Size them to content. */
.cb-header-desktop-layout .cb-header-slot-three {
    width: auto !important;
}

.cb-header-desktop-layout .cb-header-slot-three :is(dxp_layout-column, dxp-layout-column) {
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: none !important;
}

/* The menu opens with one item focused; SLDS gives it a light grey background under white text. */
dxp_base-language-selector .slds-dropdown__item > a:is(:hover, :focus, :focus-visible, :active),
dxp-base-language-selector .slds-dropdown__item > a:is(:hover, :focus, :focus-visible, :active) {
    background: #0080e1 !important;
    color: #ffffff !important;
}

dxp_base-language-selector [role="option"],
dxp-base-language-selector [role="option"],
dxp_base-language-selector [aria-selected="true"],
dxp-base-language-selector [aria-selected="true"] {
    border-bottom: 0 !important;
    background: var(--mp-navy) !important;
    color: #ffffff !important;
}

dxp_base-language-selector [role="option"]:hover,
dxp-base-language-selector [role="option"]:hover,
dxp_base-language-selector [aria-selected="true"],
dxp-base-language-selector [aria-selected="true"] {
    background: #0080e1 !important;
    color: #66c7ff !important;
}

dxp_base-language-selector [role="listbox"],
dxp-base-language-selector [role="listbox"],
dxp_base-language-selector .slds-dropdown,
dxp-base-language-selector .slds-dropdown,
dxp_base-language-selector .slds-dropdown__list,
dxp-base-language-selector .slds-dropdown__list {
    background: var(--mp-navy) !important;
    color: #ffffff !important;
}

:is(community_layout-section, community-layout-section):has(
    :is(community_builder-customizable-header, community-builder-customizable-header)
) {
    min-height: 72px;
    background: var(--mp-navy);
    border-bottom: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: 0 4px 18px rgba(0, 33, 58, 0.08);
}

:is(community_layout-section, community-layout-section):has(.mp-theme-footer),
:is(community_layout-section, community-layout-section):has(c-mp-site-footer) {
    background: var(--mp-navy);
}

:is(community_layout-section, community-layout-section):has(c-mp-dynamic-form) {
    min-height: calc(100vh - 144px);
    box-sizing: border-box;
}

.mp-theme-footer {
    width: 100%;
    box-sizing: border-box;
    padding: 3.25rem 1.5rem 2.75rem;
    background: var(--mp-navy);
    color: #ffffff;
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;
}

.mp-theme-footer__inner {
    max-width: 34rem;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.mp-theme-footer__logo {
    display: block;
    width: min(100%, 25rem);
    height: auto;
    margin: 0 auto 2.25rem;
}

.mp-theme-footer__nav {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
}

.mp-theme-footer__nav a {
    color: #ffffff;
    border-bottom: 2px solid currentColor;
    font-size: 1.45rem;
    line-height: 1.2;
    text-decoration: none;
    transition: color 0.15s ease;
}

.mp-theme-footer__nav a:hover,
.mp-theme-footer__nav a:focus-visible {
    color: #0080e1;
}

.mp-theme-footer__nav a:focus-visible,
.mp-theme-footer__social:focus-visible {
    border-radius: 2px;
    outline: 3px solid #ffffff;
    outline-offset: 4px;
}

.mp-theme-footer__copyright {
    margin: 0;
    padding-top: 2.65rem;
    color: #ffffff;
    font-size: 1.35rem;
    line-height: 1.35;
    white-space: normal;
}

.mp-theme-footer__socials {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.75rem;
    margin-top: 2.25rem;
}

.mp-theme-footer__social {
    position: relative;
    display: inline-flex;
    width: 2.25rem;
    height: 2.25rem;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    text-decoration: none;
    transition: color 0.15s ease, transform 0.15s ease;
}

.mp-theme-footer__social:hover {
    color: #0080e1;
    transform: translateY(-2px);
}

.mp-theme-footer__social_facebook span {
    font-size: 2.25rem;
    font-weight: 800;
    line-height: 1;
}

.mp-theme-footer__social_instagram span {
    position: relative;
    width: 1.9rem;
    height: 1.9rem;
    box-sizing: border-box;
    border: 3px solid currentColor;
    border-radius: 0.5rem;
}

.mp-theme-footer__social_instagram span::before {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0.65rem;
    height: 0.65rem;
    border: 3px solid currentColor;
    border-radius: 50%;
    content: "";
    transform: translate(-50%, -50%);
}

.mp-theme-footer__social_instagram span::after {
    position: absolute;
    top: 0.25rem;
    right: 0.25rem;
    width: 0.25rem;
    height: 0.25rem;
    border-radius: 50%;
    background: currentColor;
    content: "";
}

.mp-theme-footer__social_youtube span {
    position: relative;
    width: 2.1rem;
    height: 1.45rem;
    border-radius: 0.4rem;
    background: currentColor;
}

.mp-theme-footer__social_youtube span::after {
    position: absolute;
    top: 50%;
    left: 50%;
    border-top: 0.35rem solid transparent;
    border-bottom: 0.35rem solid transparent;
    border-left: 0.55rem solid var(--mp-navy);
    content: "";
    transform: translate(-42%, -50%);
}

/* ---------- Responsive ---------- */
@media (max-width: 1023px) {
    community_builder-customizable-header c-mp-site-logo,
    community-builder-customizable-header c-mp-site-logo {
        width: clamp(9rem, 45vw, 12rem) !important;
        max-width: 12rem !important;
        flex: 0 1 auto !important;
    }

    community_navigation-customizable-navigation-menu,
    community-navigation-customizable-navigation-menu {
        width: 2.5rem !important;
        min-width: 2.5rem !important;
        max-width: 2.5rem !important;
        flex: 0 0 2.5rem !important;
    }

    c-mp-auth-button {
        align-self: flex-end !important;
    }

    dxp_base-language-selector,
    dxp-base-language-selector {
        width: 7rem !important;
        min-width: 7rem !important;
        max-width: 7rem !important;
        align-self: flex-end !important;
    }

    dxp_base-language-selector button,
    dxp-base-language-selector button {
        width: 7rem !important;
        min-width: 7rem !important;
        max-width: 7rem !important;
        height: 3.125rem !important;
        min-height: 3.125rem !important;
        max-height: 3.125rem !important;
        box-sizing: border-box !important;
        font-size: 0.75rem !important;
        /* The width is fixed and there is no room beside it, so "Chinese (Simplified)"
           breaks onto a second line inside the button rather than running past it. */
        padding: 0 0.5rem !important;
        line-height: 1.15 !important;
        text-align: center !important;
        white-space: normal !important;
    }
}

@media (max-width: 767px) {
    .mp-hero {
        padding: 4rem 1.25rem;
        border-radius: 0 0 22px 22px;
    }

    .mp-section {
        padding: 2.75rem 1.25rem;
    }

    .mp-section-alt .mp-section-inner {
        padding: 2.75rem 1.25rem;
    }

    :is(dxp_layout-columns, dxp-layout-columns):has(.mp-focus-tile) {
        padding: 0 1.25rem 2.75rem;
    }

    .mp-btn-ghost {
        margin-left: 0;
        margin-top: 0.5rem;
    }

    .mp-cta-band {
        border-radius: 20px;
        padding: 2.75rem 1.25rem;
    }

    .mp-auth-required {
        margin: 2rem 1.25rem 1.25rem;
        padding: 2.5rem 1.5rem;
    }

    .mp-theme-footer {
        padding: 2.5rem 1.25rem 2.25rem;
    }

    .mp-theme-footer__logo {
        width: min(100%, 20rem);
        margin-bottom: 1.75rem;
    }

    .mp-theme-footer__nav a {
        font-size: 1.2rem;
    }

    .mp-theme-footer__copyright {
        padding-top: 2rem;
        font-size: 1.05rem;
    }

    .mp-theme-footer__socials {
        margin-top: 1.75rem;
    }
}