/*
Theme Name: Friends of Mandela Parkway
Theme URI: https://friendsofmandelaparkway.com
Description: Custom theme for Friends of Mandela Parkway, a volunteer stewardship organization in Oakland.
Author: Friends of Mandela Parkway
Author URI: https://friendsofmandelaparkway.com
Template: twentytwentyfive
Version: 1.1.2
Requires at least: 6.4
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: fomp-theme
*/

/* ==========================================================================
   Custom Styles for Friends of Mandela Parkway
   ========================================================================== */

/* --------------------------------------------------------------------------
   Typography
   -------------------------------------------------------------------------- */

/* Self-hosted Fraunces variable font with SOFT axis */
@font-face {
    font-family: 'Fraunces';
    src: url('assets/fonts/Fraunces-Variable.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Fraunces';
    src: url('assets/fonts/Fraunces-Italic-Variable.woff2') format('woff2');
    font-weight: 100 900;
    font-style: italic;
    font-display: swap;
}

/* Import other Google Fonts (Fraunces is self-hosted above for SOFT axis support) */
@import url('https://fonts.googleapis.com/css2?family=Fira+Sans:ital,wght@0,400;0,600;1,400;1,600&family=Montserrat:wght@700&display=swap');

body {
    font-family: 'Fira Sans', sans-serif;
    color: #1f1f1f;
    line-height: 1.5;
    background-color: #ffffff;
    position: relative;
}

/* Cloud background with Figma blend modes */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 100vh;
    background:
        linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%),
        linear-gradient(#c6def4, #c6def4),
        url('assets/images/clouds.jpg');
    background-size: 100% 100%, 100% 100%, 100% auto;
    background-position: top center;
    background-repeat: no-repeat;
    background-blend-mode: normal, hard-light, luminosity;
    pointer-events: none;
    z-index: -1;
    opacity: 0.7;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 400;
    font-style: italic;
    line-height: 0.99;
}

/* Light weight "of" in title */
.fomp-light {
    font-weight: 300;
}

/* --------------------------------------------------------------------------
   Color Variables (also defined in theme.json)
   -------------------------------------------------------------------------- */

:root {
    --fomp-green: #0ba248;
    --fomp-leaf-green: #22b24c;
    --fomp-bluegrass: #045f51;
    --fomp-gold: #e8bb32;
    --fomp-sand: #f0e4d5;
    --fomp-cream: #f5f5f5;
    --fomp-white: #FFFFFF;
    --fomp-text: #1f1f1f;
    --fomp-text-light: #4A4A4A;
    --fomp-loam: #343230;
    --fomp-darkrod: #4b4329;
}

/* --------------------------------------------------------------------------
   Leaf Banner Header
   -------------------------------------------------------------------------- */

/* Logo with leaf border */
.fomp-logo {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4px 0;
    width: 100%;
    max-width: 462px;
    margin: 0 auto;
    gap: 0;
}

.fomp-logo-text {
    font-family: 'Fraunces', Georgia, serif;
    font-size: 20px;
    font-weight: 900;
    font-style: normal;
    letter-spacing: 2.7px;
    color: var(--fomp-leaf-green);
    text-transform: uppercase;
    margin: 0;
    line-height: 1.4;
}

.fomp-leaf-border {
    width: 100%;
    height: 10px;
    background-image: url('data:image/png;base64,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');
    background-size: 18px auto;
    background-repeat: repeat-x;
    background-position: center;
}

.fomp-leaf-border-bottom {
    transform: scaleY(-1);
}

/* Header wrapper - ensure logo is above clouds */
.fomp-header-wrapper {
    position: relative;
    z-index: 10;
}

/* Legacy leaf banner styles */
.fomp-leaf-banner {
    background-color: transparent;
    padding: 18px 0 14px;
    text-align: center;
    position: relative;
    overflow: visible;
}

.fomp-leaf-banner p {
    color: var(--fomp-leaf-green);
    font-family: 'Fraunces', Georgia, serif;
    font-size: 20px;
    font-weight: 900;
    font-style: normal;
    letter-spacing: 2.7px;
    text-transform: uppercase;
    margin: 0;
}

/* --------------------------------------------------------------------------
   Navigation
   -------------------------------------------------------------------------- */

.fomp-nav {
    background-color: transparent;
    padding: 16px 0;
}

.fomp-nav .wp-block-navigation__container {
    justify-content: flex-end;
    gap: 2rem;
}

.fomp-nav .wp-block-navigation-item a {
    font-family: 'Fira Sans', sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: var(--fomp-text);
    text-decoration: none;
    letter-spacing: 0.5px;
}

.fomp-nav .wp-block-navigation-item a:hover {
    color: var(--fomp-green);
}

/* --------------------------------------------------------------------------
   Hero Section
   -------------------------------------------------------------------------- */

/* Intro wrapper with sand background */
.fomp-intro-block {
    background-color: var(--fomp-sand);
    border-radius: 10px;
    padding: 0;
    position: relative;
    border: 1px solid white;
}

.fomp-hero {
    padding: 60px 0 80px;
    position: relative;
}

.fomp-hero-title {
    font-family: 'Fraunces', Georgia, serif;
    font-size: clamp(48px, 8vw, 108px);
    font-weight: 700;
    font-style: italic;
    line-height: 0.89;
    color: var(--fomp-bluegrass);
    margin-bottom: 24px;
}

.fomp-hero-title .fomp-light {
    font-weight: 300;
}

.fomp-hero-description {
    font-family: 'Fira Sans', sans-serif;
    font-size: 19px;
    line-height: 1.61;
    color: var(--fomp-text);
    max-width: 520px;
}

/* Curved image frame - diagonal corners */
.fomp-curved-image {
    position: relative;
    overflow: hidden;
    border-radius: 260px 0 260px 0;
}

.fomp-curved-image img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

/* Section label style */
.fomp-section-label {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--fomp-green);
    margin-bottom: 10px;
}

/* Leaf decoration */
.fomp-leaf-decoration {
    position: absolute;
    width: 74px;
    height: 64px;
}

/* --------------------------------------------------------------------------
   Section Headers (Green boxes)
   -------------------------------------------------------------------------- */

/* Section header - now just a label style */
.fomp-section-header {
    display: block;
    margin-bottom: 10px;
}

.fomp-section-header p {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    margin: 0;
    color: var(--fomp-green);
}

/* --------------------------------------------------------------------------
   Mission Box
   -------------------------------------------------------------------------- */

.fomp-mission-box {
    background-color: transparent;
    padding: 0;
    border-radius: 0;
}

.fomp-mission-box .fomp-section-header {
    margin-bottom: 10px;
}

.fomp-mission-box p {
    font-family: 'Fira Sans', sans-serif;
    font-size: 16px;
    line-height: 1.5;
    color: var(--fomp-text);
    margin: 0;
}

/* --------------------------------------------------------------------------
   History Section
   -------------------------------------------------------------------------- */

.fomp-history {
    padding: 40px 0 80px;
}

.fomp-history-image {
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0px 6px 6px 0px rgba(107, 87, 87, 0.29);
}

.fomp-history-image img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* --------------------------------------------------------------------------
   Get Involved Section
   -------------------------------------------------------------------------- */

.fomp-involved {
    padding: 50px 0 80px;
    background-color: var(--fomp-white);
    border-top: 0.5px solid #c4c4c4;
    border-bottom: 0.5px solid #c4c4c4;
}

.fomp-involved > .wp-block-columns {
    width: 100%;
    max-width: 1196px;
    margin-left: auto;
    margin-right: auto;
}

.fomp-involved-subtitle {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--fomp-green);
    margin-bottom: 20px;
}

.fomp-involved h2 {
    font-family: 'Fraunces', Georgia, serif;
    font-size: 38px;
    font-weight: 400;
    font-style: italic;
    line-height: 0.99;
    margin-bottom: 30px;
    color: var(--fomp-text);
}

.fomp-involved p {
    font-family: 'Fira Sans', sans-serif;
    font-size: 16px;
    line-height: 1.5;
    color: var(--fomp-text);
}

/* Street markers - pill shape */
.fomp-street-marker {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px 15px;
    background-color: var(--fomp-leaf-green);
    color: var(--fomp-white);
    border-radius: 40px 40px 40px 0;
    font-family: 'Montserrat', sans-serif;
    font-size: 22px;
    font-weight: 700;
    text-align: center;
    line-height: 1;
    letter-spacing: 2.26px;
}

.fomp-street-marker.marker-left {
    border-radius: 40px 40px 0 40px;
}

.fomp-street-marker span {
    display: block;
}

.fomp-street-marker .street-name {
    font-family: 'Fraunces', Georgia, serif;
    font-size: 20px;
    font-weight: 600;
    font-style: italic;
    letter-spacing: 0;
}

/* Map container */
.fomp-map-container {
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0px 6px 6px 0px rgba(107, 87, 87, 0.29);
    border: 0.732px solid #f2f2f2;
}

/* --------------------------------------------------------------------------
   Mailing List Form
   -------------------------------------------------------------------------- */

.fomp-mailing-list {
    background-color: var(--fomp-gold);
    padding: 45px;
    border-radius: 20px;
    overflow: hidden;
}

.fomp-mailing-list h3 {
    font-family: 'Fraunces', Georgia, serif;
    font-size: 38px;
    font-weight: 400;
    font-style: italic;
    line-height: 0.99;
    margin-bottom: 50px;
    color: var(--fomp-text);
}

.fomp-mailing-list label {
    font-family: 'Montserrat', sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--fomp-darkrod);
    display: block;
    margin-bottom: 0;
}

.fomp-mailing-list input[type="text"],
.fomp-mailing-list input[type="email"] {
    width: 100%;
    padding: 5px 0 15px;
    border: none;
    border-bottom: 1px solid var(--fomp-white);
    border-radius: 0;
    background: transparent;
    font-family: 'Fira Sans', sans-serif;
    font-size: 14px;
    margin-bottom: 13px;
    transition: border-color 0.2s ease;
    color: var(--fomp-text);
}

.fomp-mailing-list input::placeholder {
    color: transparent;
}

.fomp-mailing-list input:focus {
    outline: none;
    border-bottom-color: var(--fomp-text);
}

.fomp-mailing-list .fomp-button {
    width: 100%;
    margin-top: 24px;
    background-color: var(--fomp-white) !important;
    color: var(--fomp-text) !important;
    box-shadow: 0px 6px 6px 0px rgba(107, 87, 87, 0.29);
}

.fomp-mailing-list .fomp-button:hover {
    background-color: var(--fomp-cream) !important;
}

.fomp-mailing-list .fomp-privacy-note {
    font-family: 'Fira Sans', sans-serif;
    font-size: 16px;
    font-style: italic;
    color: var(--fomp-green);
    margin-top: 16px;
    line-height: 1.5;
}

/* MailPoet Form Styles */
.fomp-mailing-list .mailpoet_form {
    margin: 0;
    padding: 0;
}

.fomp-mailing-list .mailpoet_paragraph {
    margin-bottom: 13px;
}

.fomp-mailing-list .mailpoet_text_label,
.fomp-mailing-list .mailpoet_textarea_label {
    font-family: 'Montserrat', sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--fomp-darkrod);
    display: block;
    margin-bottom: 0;
}

.fomp-mailing-list .mailpoet_text,
.fomp-mailing-list .mailpoet_textarea,
.fomp-mailing-list input[type="text"],
.fomp-mailing-list input[type="email"] {
    width: 100%;
    padding: 5px 0 15px;
    border: none;
    border-bottom: 1px solid var(--fomp-white);
    border-radius: 0;
    background: transparent;
    font-family: 'Fira Sans', sans-serif;
    font-size: 14px;
    transition: border-color 0.2s ease;
    color: var(--fomp-text);
    box-shadow: none;
}

.fomp-mailing-list .mailpoet_text:focus,
.fomp-mailing-list .mailpoet_textarea:focus {
    outline: none;
    border-bottom-color: var(--fomp-text);
    box-shadow: none;
}

.fomp-mailing-list .mailpoet_submit {
    width: 100%;
    margin-top: 24px;
    background-color: var(--fomp-white) !important;
    color: var(--fomp-text) !important;
    font-family: 'Montserrat', sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 10px 30px;
    border: none;
    border-radius: 0;
    cursor: pointer;
    box-shadow: 0px 6px 6px 0px rgba(107, 87, 87, 0.29);
    transition: background-color 0.2s ease;
}

.fomp-mailing-list .mailpoet_submit:hover {
    background-color: var(--fomp-cream) !important;
}

.fomp-mailing-list .mailpoet_validate_success {
    color: var(--fomp-green);
    font-family: 'Fira Sans', sans-serif;
}

.fomp-mailing-list .mailpoet_validate_error {
    color: #c0392b;
    font-family: 'Fira Sans', sans-serif;
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.fomp-button,
.wp-block-button__link.fomp-button {
    background-color: var(--fomp-white) !important;
    color: var(--fomp-text) !important;
    font-family: 'Montserrat', sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 10px 30px;
    border: none;
    border-radius: 0;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease;
    box-shadow: 0px 6px 6px 0px rgba(107, 87, 87, 0.29);
}

.fomp-button:hover,
.wp-block-button__link.fomp-button:hover {
    background-color: var(--fomp-cream) !important;
    color: var(--fomp-text) !important;
}

/* --------------------------------------------------------------------------
   Events Section
   -------------------------------------------------------------------------- */

.fomp-events {
    padding: 80px 0;
    background-color: var(--fomp-white);
}

.fomp-events-intro {
    margin-bottom: 30px;
}

.fomp-events-intro p {
    font-family: 'Fira Sans', sans-serif;
    font-size: 16px;
    line-height: 1.5;
    color: var(--fomp-text);
}

.fomp-event-item {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    padding: 30px 20px 30px 39px;
    background: var(--fomp-white);
    border: 1px solid #e9e9e9;
    border-radius: 10px;
    margin-bottom: 10px;
}

.fomp-event-date {
    font-family: 'Fraunces', Georgia, serif;
    min-width: 90px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    justify-content: center;
    height: 97px;
}

.fomp-event-date .month {
    font-size: 31px;
    font-weight: 400;
    font-style: italic;
    color: var(--fomp-text);
    display: block;
    line-height: 0.99;
}

.fomp-event-date .day {
    font-size: 78px;
    font-weight: 900;
    font-style: normal;
    color: var(--fomp-gold);
    line-height: 0.99;
}

.fomp-event-divider {
    width: 0;
    height: 97px;
    border-left: 1px solid var(--fomp-gold);
    align-self: center;
}

.fomp-event-details {
    display: flex;
    flex-direction: column;
    gap: 3px;
    justify-content: center;
    flex: 1;
    align-self: stretch;
}

.fomp-event-details h4 {
    font-family: 'Fira Sans', sans-serif;
    font-size: 20px;
    font-weight: 400;
    font-style: normal;
    line-height: 1.5;
    margin: 0;
    color: var(--fomp-text);
}

.fomp-event-details p {
    font-family: 'Fira Sans', sans-serif;
    font-size: 16px;
    line-height: 1.5;
    color: var(--fomp-text);
    margin: 0;
}

/* --------------------------------------------------------------------------
   Social Media Section
   -------------------------------------------------------------------------- */

.fomp-social {
    padding: 0;
}

.fomp-social .fomp-section-label {
    margin-bottom: 10px;
}

.fomp-social-intro p {
    font-family: 'Fira Sans', sans-serif;
    font-size: 16px;
    line-height: 1.5;
    color: var(--fomp-text);
}

.fomp-social-intro a {
    font-style: italic;
    font-weight: 600;
    color: var(--fomp-green);
    text-decoration: none;
}

.fomp-social-intro a:hover {
    text-decoration: underline;
}

.fomp-instagram-embed {
    border: 0.4px solid #dbdcdb;
    border-radius: 4px;
    background: var(--fomp-white);
    overflow: hidden;
}

.fomp-instagram-embed a:hover {
    opacity: 0.7;
}

.fomp-instagram-embed svg:hover {
    opacity: 0.7;
    cursor: pointer;
}

.fomp-instagram-feed {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.fomp-instagram-feed img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
}

/* --------------------------------------------------------------------------
   FAQ Section
   -------------------------------------------------------------------------- */

.fomp-faq {
    padding: 56px 0 80px;
    background-color: var(--fomp-cream);
    position: relative;
}

.fomp-faq h2 {
    font-family: 'Fraunces', Georgia, serif;
    font-size: 38px;
    font-weight: 400;
    font-style: italic;
    line-height: 0.99;
    margin-bottom: 40px;
    text-align: center;
    color: var(--fomp-text);
}

.fomp-faq-list {
    max-width: 991px;
    margin: 0 auto;
}

.fomp-faq-item {
    border-bottom: 1px solid #ddd;
}

.fomp-faq-question {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    padding: 14px 0;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--fomp-green);
}

.fomp-faq-question::after {
    content: '';
    width: 10px;
    height: 10px;
    border-right: 2px solid var(--fomp-green);
    border-bottom: 2px solid var(--fomp-green);
    transform: rotate(45deg);
    transition: transform 0.2s ease;
    flex-shrink: 0;
    margin-left: 20px;
}

.fomp-faq-item.active .fomp-faq-question::after {
    transform: rotate(-135deg);
}

.fomp-faq-answer {
    font-family: 'Fira Sans', sans-serif;
    font-size: 16px;
    line-height: 1.5;
    color: var(--fomp-text);
    padding: 0 0 14px;
    display: none;
    max-width: 786px;
}

.fomp-faq-item.active .fomp-faq-answer {
    display: block;
}

/* Leaf motif at bottom of FAQ */
.fomp-faq-leaf-motif {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 1474px;
    height: 38px;
    background-image: url('data:image/png;base64,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');
    background-size: 18px auto;
    background-repeat: repeat-x;
    background-position: center;
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.fomp-footer {
    background-color: var(--fomp-loam);
    color: var(--fomp-white);
    padding: 40px 0;
}

.fomp-footer h3 {
    font-family: 'Fraunces', Georgia, serif;
    font-size: 38px;
    font-weight: 400;
    font-style: italic;
    line-height: 0.99;
    margin-bottom: 20px;
    color: var(--fomp-white);
}

.fomp-footer p {
    font-family: 'Fira Sans', sans-serif;
    font-size: 16px;
    line-height: 1.5;
    color: var(--fomp-white);
}

.fomp-footer a {
    font-style: italic;
    font-weight: 600;
    color: var(--fomp-leaf-green);
    text-decoration: none;
}

.fomp-footer a:hover {
    text-decoration: underline;
}

.fomp-footer-logo {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    max-width: 432px;
}

.fomp-footer-logo-text {
    font-family: 'Fraunces', Georgia, serif;
    font-size: 19px;
    font-weight: 900;
    font-style: normal;
    letter-spacing: 2.5px;
    color: var(--fomp-leaf-green);
    text-transform: uppercase;
    line-height: 1.3;
}

.fomp-footer-logo .fomp-leaf-border {
    width: 100%;
    height: 9px;
    background-size: 17px auto;
}

.fomp-footer-copyright {
    font-family: 'Fira Sans', sans-serif;
    font-size: 16px;
    line-height: 1.5;
    color: var(--fomp-white);
    text-align: right;
    margin-top: 10px;
}

/* --------------------------------------------------------------------------
   Decorative Elements
   -------------------------------------------------------------------------- */

.fomp-leaf-decoration {
    position: absolute;
    pointer-events: none;
    opacity: 0.6;
}

.fomp-leaf-decoration.leaf-1 {
    top: 20%;
    left: 5%;
    width: 60px;
}

.fomp-leaf-decoration.leaf-2 {
    bottom: 10%;
    right: 10%;
    width: 80px;
}

/* --------------------------------------------------------------------------
   Responsive Styles
   -------------------------------------------------------------------------- */

/* ==========================================================================
   TABLET BREAKPOINT (max-width: 1024px)
   ========================================================================== */

@media (max-width: 1024px) {
    /* Reduce section padding */
    .fomp-intro-wrapper.alignfull,
    .fomp-involved.alignfull,
    .fomp-events.alignfull,
    .fomp-faq.alignfull,
    .fomp-footer.alignfull {
        padding-left: 40px !important;
        padding-right: 40px !important;
    }

    /* Scale hero title */
    .fomp-hero-title {
        font-size: 64px;
    }

    /* History section */
    .fomp-history {
        margin-left: 40px;
        margin-right: 40px;
    }

    /* Section headings */
    .fomp-involved h2,
    .fomp-faq h2 {
        font-size: 32px;
    }

    /* Section labels */
    .fomp-section-label,
    .fomp-section-header p,
    .fomp-involved-subtitle {
        font-size: 14px;
    }
}

/* ==========================================================================
   MOBILE BREAKPOINT (max-width: 768px)
   ========================================================================== */

@media (max-width: 768px) {
    /* Force WordPress columns to stack */
    .wp-block-columns {
        flex-direction: column !important;
    }

    .wp-block-column {
        flex-basis: 100% !important;
        width: 100% !important;
    }

    /* Section padding - horizontal */
    .fomp-intro-wrapper.alignfull,
    .fomp-involved.alignfull,
    .fomp-events.alignfull,
    .fomp-faq.alignfull,
    .fomp-footer.alignfull {
        padding-left: 24px !important;
        padding-right: 24px !important;
    }

    /* Section padding - vertical */
    .fomp-involved {
        padding-top: 48px;
        padding-bottom: 48px;
    }

    .fomp-events {
        padding-top: 48px;
        padding-bottom: 48px;
    }

    .fomp-faq {
        padding-top: 48px;
        padding-bottom: 48px;
    }

    /* Hero section */
    .fomp-hero {
        padding: 40px 0 60px;
    }

    .fomp-hero-title {
        font-size: 42px !important;
    }

    .fomp-intro-block {
        padding: 24px;
        padding-top: 24px !important;
        margin-top: 24px !important;
    }

    /* Hero logo - allow text wrap and adjust position */
    .fomp-hero-logo {
        margin-top: 0 !important;
        margin-bottom: 20px;
        max-width: 100%;
    }

    .fomp-hero-logo p {
        white-space: normal !important;
        text-align: center;
        font-size: 16px !important;
        letter-spacing: 1.5px !important;
    }

    .fomp-hero-logo .fomp-leaf-border {
        width: 280px !important;
        max-width: 100%;
    }

    /* Hide hero leaf decorations on mobile */
    .fomp-hero-leaf-single,
    .fomp-hero-leaf-pair {
        display: none !important;
    }

    /* Curved image - stack below text, no overlap */
    .fomp-curved-image {
        border-radius: 120px 0 120px 0;
        margin-top: 24px !important;
    }

    /* History section */
    .fomp-history {
        margin-top: -40px !important;
        margin-left: 24px;
        margin-right: 24px;
        padding-top: 24px;
        padding-bottom: 48px;
    }

    /* History image - override inline height */
    .fomp-history-image {
        height: auto !important;
        width: 100% !important;
    }

    .fomp-history-image img {
        width: 100% !important;
        height: auto !important;
        margin-left: 0 !important;
    }

    /* Get Involved - hide decorative leaves */
    .fomp-decorative-leaves {
        display: none !important;
    }

    /* Get Involved - reorder columns (text first on mobile) */
    .fomp-involved .wp-block-columns {
        display: flex !important;
        flex-direction: column !important;
    }

    .fomp-involved .wp-block-columns > .wp-block-column:first-child {
        order: 2;
    }

    .fomp-involved .wp-block-columns > .wp-block-column:last-child {
        order: 1;
        margin-bottom: 32px;
    }

    /* Map - center without leaves */
    .fomp-map-with-leaves {
        justify-content: center !important;
    }

    .fomp-map-container {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto;
        height: auto !important;
        aspect-ratio: 378 / 689;
    }

    .fomp-map-container img {
        height: 100% !important;
    }

    /* Street badge positioning adjustments for mobile */
    /* 32nd Street badge - align with intersection */
    .fomp-map-container .fomp-street-badge:first-of-type {
        right: 2% !important;
    }

    /* 9th Street badge - move up to 9th street and align with intersection */
    .fomp-map-container .fomp-street-badge:last-of-type {
        top: 74% !important;
        left: 6% !important;
    }

    /* Mailing list */
    .fomp-mailing-list {
        padding: 24px;
    }

    .fomp-mailing-list h3 {
        font-size: 28px;
        margin-bottom: 30px;
    }

    /* Events section */
    .fomp-event-item {
        padding: 20px 16px;
    }

    .fomp-event-date .day {
        font-size: 48px;
    }

    .fomp-event-date .month {
        font-size: 24px;
    }

    /* FAQ section */
    .fomp-faq h2 {
        font-size: 28px;
    }

    .fomp-faq-question {
        font-size: 14px;
        letter-spacing: 1px;
    }

    .fomp-faq-leaf-motif {
        display: none;
    }

    /* Instagram feed */
    .fomp-instagram-feed {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Footer - stack and center */
    .fomp-footer > .wp-block-group {
        flex-direction: column !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        gap: 24px;
    }

    .fomp-footer-copyright {
        order: 2;
        text-align: center;
    }

    .fomp-footer-logo {
        order: 1;
    }

    /* Footer leaf borders - constrain width */
    .fomp-footer-logo .fomp-leaf-border,
    .fomp-footer .fomp-leaf-border {
        width: 280px !important;
        max-width: 100% !important;
    }

    .fomp-footer-logo-text {
        font-size: 14px !important;
        letter-spacing: 2px !important;
    }

    /* Section labels */
    .fomp-section-label,
    .fomp-section-header p,
    .fomp-involved-subtitle {
        font-size: 12px;
    }

    /* Section headings */
    .fomp-involved h2,
    .fomp-faq h2 {
        font-size: 28px;
    }

    /* Column gaps */
    .wp-block-columns.fomp-two-column {
        gap: 24px;
    }
}

/* ==========================================================================
   SMALL MOBILE BREAKPOINT (max-width: 480px)
   ========================================================================== */

@media (max-width: 480px) {
    /* Hero title */
    .fomp-hero-title {
        font-size: 32px !important;
    }

    /* Hero logo - smaller on small screens */
    .fomp-hero-logo p {
        font-size: 14px !important;
        letter-spacing: 1px !important;
    }

    .fomp-hero-logo .fomp-leaf-border {
        width: 240px !important;
    }

    .fomp-curved-image {
        border-radius: 80px 0 80px 0 !important;
    }

    /* Event items - stack date and details */
    .fomp-event-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    .fomp-event-divider {
        display: none;
    }

    .fomp-event-date {
        flex-direction: row;
        align-items: baseline;
        gap: 8px;
        height: auto;
    }

    .fomp-event-date .day {
        font-size: 36px;
    }

    .fomp-event-date .month {
        font-size: 20px;
    }

    /* Section headings */
    .fomp-involved h2,
    .fomp-faq h2 {
        font-size: 24px;
    }

    /* Mailing list */
    .fomp-mailing-list h3 {
        font-size: 24px;
    }

    /* Section header */
    .fomp-section-header {
        padding: 12px 16px;
    }

    /* Map on small mobile */
    .fomp-map-container {
        max-width: 280px !important;
    }

    /* Footer logo */
    .fomp-footer-logo .fomp-leaf-border,
    .fomp-footer .fomp-leaf-border {
        width: 220px !important;
    }

    .fomp-footer-logo-text {
        font-size: 12px !important;
        letter-spacing: 1.5px !important;
    }
}

/* --------------------------------------------------------------------------
   WordPress Block Overrides
   -------------------------------------------------------------------------- */

.wp-block-columns.fomp-two-column {
    gap: 60px;
}

.wp-block-group.fomp-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

/* Ensure proper spacing for full-width sections */
.fomp-full-width {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
}

/* Full-width background sections - background extends full width but content is constrained */
.fomp-involved.alignfull,
.fomp-intro-wrapper.alignfull,
.fomp-events.alignfull,
.fomp-faq.alignfull {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(-50vw + 50%) !important;
    margin-right: calc(-50vw + 50%) !important;
}

/* History section aligns with intro block (1196px wide, centered) */
.fomp-history {
    max-width: 1196px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 0;
    padding-right: 0;
    box-sizing: border-box;
    position: relative;
    z-index: 5;
}

/* Ensure minimum margin on smaller screens */
@media (max-width: 1240px) {
    .fomp-history {
        margin-left: 24px;
        margin-right: 24px;
    }
}

/* Ensure columns inside full-width sections span properly */
.fomp-involved > .wp-block-columns {
    max-width: 1196px;
    width: 100%;
}