/* --- 1. THE MODERN SINGLE-LINE HEADER --- */

/* Force the layout items to stay side-by-side and center vertically */
.WaLayoutRow {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important; /* Vertically centers text and logo */
    justify-content: space-between !important;
    flex-wrap: nowrap !important; /* Prevents the login from dropping below */
}

.WaPlaceHolderHeader {
    background-color: #ffffff !important;
    padding: 20px 0 !important;
    border-bottom: 4px solid #f2a900 !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05) !important;
}

/* 2. THE TEXT (Centered vertically to Logo) */
#id_F36BDix p {
    font-family: 'Montserrat', sans-serif, Arial !important;
    color: #f2a900 !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    font-size: 1.3rem !important;
    margin: 0 !important;
    padding-top: 12px !important; /* Adjust this number to nudge text up or down */
    white-space: nowrap; /* Prevents text from breaking into two lines */
}

/* 3. THE PERFECT PILL BUTTON */
.loginLink {
    background-color: #f2a900 !important;
    color: #fff !important;
    
    /* Perfect Geometry */
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 44px !important;
    min-width: 120px !important;
    padding: 0 25px !important;
    border-radius: 100px !important; /* High number for a perfect curve */
    
    text-decoration: none !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    transition: all 0.3s ease !important;
}

.loginLink:hover {
    background-color: #333 !important;
    transform: translateY(-2px);
}

/* --- 4. MOBILE VIEW (Centered Stacking) --- */

@media only screen and (max-width: 900px) {
    .WaLayoutRow {
        flex-wrap: wrap !important; /* Allows stacking only on small screens */
        justify-content: center !important;
    }
    
    #id_F36BDix p {
        text-align: center !important;
        white-space: normal !important; /* Allows wrap on mobile */
        padding: 15px 0 !important;
        font-size: 1.1rem !important;
    }
    
    .loginContainer.alignRight {
        width: 100% !important;
        text-align: center !important;
        float: none !important;
    }
}





/* --- SECTION 1: TEXT (TOP) & SLIDESHOW (BOTTOM) --- */

/* 1. LAYOUT: Force vertical stacking */
#id_IO2VvkO .WaLayoutTable, 
#id_IO2VvkO tbody, 
#id_IO2VvkO tr {
    display: flex !important;
    flex-direction: column !important; 
    width: 100% !important;
}

#id_IO2VvkO {
    padding: 0px !important;
    background-color: #ffffff !important;
}

/* 2. TEXT AREA (TOP) */
#id_HE6Km5A {
    width: 100% !important;
    order: 1 !important; /* Puts Text on top */
    padding: 60px 20px 40px 20px !important;
    box-sizing: border-box;
}

/* MAIN HEADING (WHO ARE WE?) */
#id_CbyZiE8 {
    background: transparent !important;
    text-align: center !important;
}

#id_CbyZiE8 h1, 
#id_CbyZiE8 h1 strong, 
#id_CbyZiE8 h1 font {
    color: #f2a900 !important; /* Orange/Gold */
    font-family: 'Arial Black', Gadget, sans-serif !important;
    font-size: 45px !important; /* CHANGE HEADING SIZE HERE */
    font-weight: 800 !important;
    text-transform: uppercase;
    display: block;
    margin-bottom: 25px !important;
}

/* SUBTEXT / PARAGRAPH TEXT */
#id_cfftjLC p {
    text-align: center !important;
    color: #333333 !important;
    max-width: 1000px;
    margin: 0 auto !important;
    font-style: normal !important;
    line-height: 1.3 !important; /* Space between lines */
    
    /* DESKTOP FONT SIZE */
    font-size: 32px !important; /* CHANGE DESKTOP SUBTEXT SIZE HERE */
}

/* 3. SLIDESHOW AREA (BOTTOM) */
#id_uUWJihK {
    width: 100% !important;
    order: 2 !important; /* Puts Slideshow on bottom */
    padding: 0 !important;
    margin: 0 !important;
}

.camera_wrap {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    border-radius: 0px !important; 
    box-shadow: none !important;
    border: none !important;
    height: 550px !important; /* CHANGE SLIDESHOW HEIGHT HERE */
}

/* 4. MOBILE ADJUSTMENTS (Phones) */
@media only screen and (max-width: 768px) {
    /* Change the subtext size for mobile screens only */
    #id_cfftjLC p {
        font-size: 16px !important; /* CHANGE MOBILE SUBTEXT SIZE HERE */
        line-height: 24px !important;
    }

    /* Adjust heading size for mobile so it doesn't break */
    #id_CbyZiE8 h1, 
    #id_CbyZiE8 h1 strong, 
    #id_CbyZiE8 h1 font {
        font-size: 32px !important; 
    }

    .camera_wrap {
        height: 300px !important; /* Makes slideshow shorter on phones */
    }
}

/* 5. Speed up the Slideshow appearance */
.camera_loader {
    display: none !important;
}





/* --- SECTION 2: WHAT WE DO (WHITE BG + CLEAN STROKE) --- */

/* 1. THE MAIN OUTER FRAME */
[data-componentid="unpKXI5_row"] {
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    
    /* Colors & Border */
    background-color: #ffffff !important; /* Force pure white background */
    border: 0.5px solid rgba(128, 128, 128, 0.5) !important; /* 50% opacity gray stroke */
    border-radius: 40px !important;
    
    /* Spacing */
    padding: 24px !important; /* Internal padding for the frame */
    margin: 40px auto !important; /* 40px gap between sections */
    
    max-width: 1200px;
    box-sizing: border-box;
}

/* 2. IMAGE SIDE */
#id_dlSbHUa {
    width: 48% !important;
    display: flex !important;
    align-items: center !important;
}

#id_GCqGwvg img {
    width: 100% !important;
    height: auto !important;
    border-radius: 32px !important;
    display: block;
}

/* 3. TEXT SIDE */
#id_ftmkOI4 {
    width: 52% !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    
    /* This creates the 40px gap between image and text */
    padding-left: 40px !important; 
}

/* HEADER (WHAT WE DO) */
#id_lamBoA8 {
    background: transparent !important;
    margin-bottom: 15px !important;
}

#id_lamBoA8 p, #id_lamBoA8 font, #id_lamBoA8 strong {
    color: #f2a900 !important;
    font-family: 'Roboto Condensed', sans-serif !important;
    text-transform: uppercase;
    font-size: 36px !important; /* Desktop Header */
    text-align: left !important;
}

/* SUBTEXT */
#id_AaHMrNi p {
    font-style: normal !important;
    color: #333333 !important;
    line-height: 1.6 !important;
    font-size: 20px !important; /* Desktop Subtext */
    margin: 0 !important;
    text-align: left !important;
}

/* --- 4. MOBILE VIEW (TEXT TOP, IMAGE BOTTOM) --- */

@media only screen and (max-width: 768px) {
    [data-componentid="unpKXI5_row"] {
        flex-direction: column-reverse !important; /* Text Up, Image Down */
        border: none !important; /* No border on mobile */
        border-radius: 0px !important;
        padding: 0px !important; /* No internal frame padding on mobile */
        margin: 24px 0 !important;
        background-color: transparent !important;
    }

    #id_dlSbHUa, #id_ftmkOI4 {
        width: 100% !important;
        padding-left: 0px !important;
    }

    /* Mobile Font Sizes */
    #id_lamBoA8 p, #id_lamBoA8 font, #id_lamBoA8 strong {
        font-size: 28px !important;
        text-align: center !important;
    }

    #id_AaHMrNi p {
        font-size: 16px !important;
        text-align: center !important;
    }
    
    #id_GCqGwvg img {
        border-radius: 0px !important;
        margin-top: 24px;
    }
}

/* Clear the default Wild Apricot divider */
[data-componentid="dlSbHUa_separator"] {
    display: none !important;
}





/* --- SECTION 3: MEMBERSHIP (TEXT LEFT, IMAGE RIGHT CARD) --- */

/* 1. THE MAIN OUTER FRAME */
[data-componentid="xx3e7Xk_row"] {
    display: flex !important;
    flex-direction: row !important; /* Text Left, Image Right */
    align-items: stretch !important;
    background-color: #ffffff !important;
    border: 0.5px solid rgba(128, 128, 128, 0.5) !important;
    border-radius: 40px !important;
    padding: 24px !important;
    margin: 40px auto !important;
    max-width: 1200px;
    box-sizing: border-box;
}

/* 2. TEXT SIDE (LEFT) */
#id_v1cv5pS {
    width: 55% !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    padding-right: 40px !important; /* 40px Gap between text and image */
}

/* HEADER (MEMBERSHIP) */
#id_hiAJvRh {
    background: transparent !important;
    margin-bottom: 15px !important;
}

#id_hiAJvRh p, #id_hiAJvRh font, #id_hiAJvRh strong {
    color: #f2a900 !important;
    font-family: 'Roboto Condensed', sans-serif !important;
    text-transform: uppercase;
    font-size: 36px !important; /* Desktop Font Size */
    text-align: left !important;
}

/* SUBTEXT */
#id_dxcUGLB p {
    font-style: normal !important;
    color: #333333 !important;
    line-height: 1.6 !important;
    font-size: 20px !important; /* Desktop Font Size */
    margin: 0 !important;
    text-align: left !important;
}

/* 3. IMAGE SIDE (RIGHT) */
#id_WwaiITC {
    width: 45% !important;
    display: flex !important;
    align-items: center !important;
}

#id_QZRjHxQ img {
    width: 100% !important;
    height: auto !important;
    border-radius: 32px !important;
    display: block;
}

/* --- 4. MOBILE VIEW (IMAGE TOP, TEXT BOTTOM) --- */

@media only screen and (max-width: 768px) {
    [data-componentid="xx3e7Xk_row"] {
        flex-direction: column !important; /* Image Up, Text Down */
        border: none !important;
        border-radius: 0px !important;
        padding: 0px !important;
        background-color: transparent !important;
    }

    #id_v1cv5pS, #id_WwaiITC {
        width: 100% !important;
        padding-right: 0px !important;
    }

    /* Move Image to top of the stack */
    #id_WwaiITC { order: 1 !important; }
    #id_v1cv5pS { order: 2 !important; }

    /* Mobile Font Sizes */
    #id_hiAJvRh p, #id_hiAJvRh font, #id_hiAJvRh strong {
        font-size: 28px !important;
        text-align: center !important;
        margin-top: 20px !important;
    }

    #id_dxcUGLB p {
        font-size: 16px !important;
        text-align: center !important;
    }
    
    #id_QZRjHxQ img {
        border-radius: 0px !important;
    }
}

/* Remove default separator gap */
[data-componentid="v1cv5pS_separator"] {
    display: none !important;
}






/* --- SECTION 4: TRAINING & EVENTS (WHITE CARD) --- */

/* 1. THE MAIN OUTER FRAME */
[data-componentid="kltRsLQ_row"] {
    display: flex !important;
    flex-direction: row !important; /* Image Left, Text Right */
    align-items: stretch !important;
    background-color: #ffffff !important;
    border: 0.5px solid rgba(128, 128, 128, 0.5) !important; /* Subtle gray stroke */
    border-radius: 40px !important; /* 40px corner radius */
    padding: 24px !important;
    margin: 40px auto !important; /* Spacing between cards */
    max-width: 1200px;
    box-sizing: border-box;
}

/* 2. IMAGE SIDE (LEFT) */
#id_E4GIoYV {
    width: 48% !important;
    display: flex !important;
    align-items: center !important;
}

#id_BwCXQm2 img {
    width: 100% !important;
    height: auto !important;
    border-radius: 32px !important; /* 32px image radius */
    display: block;
}

/* 3. TEXT SIDE (RIGHT) */
#id_v7Y1dlR {
    width: 52% !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    padding-left: 40px !important; /* 40px gap between image and text */
}

/* HEADER (TRAINING & EVENTS) */
#id_5f9Duw3 {
    background: transparent !important;
    margin-bottom: 15px !important;
}

#id_5f9Duw3 p, #id_5f9Duw3 font, #id_5f9Duw3 strong {
    color: #f2a900 !important; /* Changed to Orange to match previous sections */
    font-family: 'Roboto Condensed', sans-serif !important;
    text-transform: uppercase;
    font-size: 36px !important; /* Web Header Size */
    text-align: left !important;
}

/* SUBTEXT */
#id_ONhkrUM p, #id_ONhkrUM font {
    font-style: normal !important; /* Removed italics */
    color: #333333 !important;
    line-height: 1.6 !important;
    font-size: 20px !important; /* Web Subtext Size */
    margin: 0 !important;
    text-align: left !important;
}

/* --- 4. MOBILE VIEW (TEXT TOP, IMAGE BOTTOM) --- */

@media only screen and (max-width: 768px) {
    [data-componentid="kltRsLQ_row"] {
        flex-direction: column-reverse !important; /* Text Up, Image Down */
        border: none !important;
        border-radius: 0px !important;
        padding: 0px !important;
        margin: 24px 0 !important;
        background-color: transparent !important;
    }

    #id_E4GIoYV, #id_v7Y1dlR {
        width: 100% !important;
        padding-left: 0px !important;
    }

    /* Mobile Font Sizes */
    #id_5f9Duw3 p, #id_5f9Duw3 font, #id_5f9Duw3 strong {
        font-size: 28px !important; /* Mobile Header */
        text-align: center !important;
    }

    #id_ONhkrUM p {
        font-size: 16px !important; /* Mobile Subtext */
        text-align: center !important;
    }
    
    #id_BwCXQm2 img {
        border-radius: 0px !important;
        margin-top: 24px;
    }
}

/* Remove default Wild Apricot divider */
[data-componentid="E4GIoYV_separator"] {
    display: none !important;
}




/* --- MEMBERSHIP PAGE CARD STYLING --- */

/* 1. INDIVIDUAL CARDS (Active, Life, Qualifications) */
#id_EKF4FiQ, #id_fuHtxy3, #id_bfTYKaA {
    background-color: #ffffff !important;
    border: 0.5px solid rgba(128, 128, 128, 0.4) !important; /* Stroke */
    border-radius: 20px !important; /* 20px Corner Radius */
    margin-bottom: 40px !important; 
    padding: 32px !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.03); 
}

/* 2. SIDE-BY-SIDE CARDS (Dues & Sustaining) */
[data-componentid="AXQ5Oab_row"] {
    display: flex !important;
    gap: 24px !important; 
    margin-bottom: 40px !important;
}

#id_QGWNrUu, #id_opujSPP {
    background-color: #ffffff !important;
    border: 0.5px solid rgba(128, 128, 128, 0.4) !important;
    border-radius: 20px !important;
    padding: 32px !important;
    height: 100% !important;
    box-sizing: border-box;
}

/* 3. MEMBERSHIP APPROVALS (Bottom Card) */
#id_VLlErL9 {
    background-color: #ffffff !important;
    border: 0.5px solid rgba(128, 128, 128, 0.4) !important;
    border-radius: 20px !important;
    padding: 32px !important;
}

/* 4. TEXT HIERARCHY COLORS */
h2 strong, h5 font[style*="font-size: 24px"], h5 font[style*="font-size: 30px"] {
    color: #f2a900 !important; /* Brand Orange */
    font-family: 'Roboto Condensed', sans-serif !important;
    text-transform: uppercase;
    display: block;
    margin-bottom: 12px !important;
}

/* --- 5. THE MOBILE RESET (Removes Stroke & Radius) --- */
@media only screen and (max-width: 768px) {
    /* Target all card IDs to strip borders and radius */
    #id_EKF4FiQ, #id_fuHtxy3, #id_bfTYKaA, 
    #id_QGWNrUu, #id_opujSPP, #id_VLlErL9,
    [data-componentid="AXQ5Oab_row"] {
        border: none !important; /* Removes the 0.5px gray stroke */
        border-radius: 0px !important; /* Removes the 20px corner radius */
        background-color: transparent !important; /* Blends into page */
        padding: 20px 0px !important; /* Padding only on top/bottom for mobile */
        margin-bottom: 10px !important;
        box-shadow: none !important;
    }

    [data-componentid="AXQ5Oab_row"] {
        flex-direction: column !important;
        gap: 0px !important;
    }
    
    /* Center the headers on mobile */
    h2 strong, h5 font[style*="font-size: 24px"] {
        text-align: center !important;
    }
}