/* ==========================================================
   Login / Profile Button
   ========================================================== */

/* Logged out: transparent box with yellow icon/text */
.WaGadgetLoginButton .loginLink,
.WaGadgetLoginForm .loginLink {
    background-color: transparent !important;
    color: #FFF200 !important;
}

/* Logged-out profile/login icon */
.WaGadgetLoginButton .loginLink::before,
.WaGadgetLoginForm .loginLink::before {
    color: #FFF200 !important;
}

/* Logged out on hover */
.WaGadgetLoginButton .loginLink:hover,
.WaGadgetLoginForm .loginLink:hover {
    background-color: transparent !important;
    color: #FFF200 !important;
}

.WaGadgetLoginButton .loginLink:hover::before,
.WaGadgetLoginForm .loginLink:hover::before {
    color: #FFF200 !important;
}


/* Logged in: yellow box with teal icon/text */
.WaGadgetLoginButton .loginContainer.authenticated .loginLink,
.WaGadgetLoginForm .loginContainer.authenticated .loginLink {
    background-color: #FFF200 !important;
    color: #266C78 !important;
}

/* Logged-in profile icon */
.WaGadgetLoginButton .loginContainer.authenticated .loginLink::before,
.WaGadgetLoginForm .loginContainer.authenticated .loginLink::before {
    color: #266C78 !important;
}

/* Logged in on hover */
.WaGadgetLoginButton .loginContainer.authenticated .loginLink:hover,
.WaGadgetLoginButton .loginContainer.authenticated .loginLink.hover,
.WaGadgetLoginForm .loginContainer.authenticated .loginLink:hover,
.WaGadgetLoginForm .loginContainer.authenticated .loginLink.hover {
    background-color: #FFF200 !important;
    color: #266C78 !important;
}

/* Change Date and Location color in Upcoming Events gadget */
.wa-upcoming-events-gadget .eventLocation, 
.wa-upcoming-events-gadget .eventDate {
    color: #000000 !important; /* Replace #000000 with your preferred hex code */
}

/* Code to change page width START */
.WaPlaceHolder {
    max-width: 1400px; 
}
/* Code to change page width END */

/* Targets the Grants header gadget on the home page and forces rounded edges */
#id_AmCXvDH, 
#id_AmCXvDH .idGContainer, 
#id_AmCXvDH .idGContainer .gadgetOuterWrapper {
    border-radius: 8px !important;
    overflow: hidden !important;
}
/* Targets the Become a Member header gadget on the home page and forces rounded edges */
#id_O5iClM1, 
#id_O5iClM1 .idGContainer, 
#id_O5iClM1 .idGContainer .gadgetOuterWrapper {
    border-radius: 8px !important;
    overflow: hidden !important;
}
/* Targets the Grants subheader content gadget on the home page and forces rounded edges */
#id_3vbezaq, 
#id_3vbezaq .idGContainer, 
#id_3vbezaq .idGContainer .gadgetOuterWrapper {
    border-radius: 8px !important;
    overflow: hidden !important;
}
/* Targets the Special Events header gadget on the home page and forces rounded edges */
#id_LIdsaGW, 
#id_LIdsaGW .idGContainer, 
#id_LIdsaGW .idGContainer .gadgetOuterWrapper {
    border-radius: 8px !important;
    overflow: hidden !important;
}
/* Targets the Register content gadget on the Cool Breeze Ride page and forces rounded edges */
#id_UuZckOg, 
#id_UuZckOg .idGContainer, 
#id_UuZckOg .idGContainer .gadgetOuterWrapper {
    border-radius: 8px !important;
    overflow: hidden !important;
}
/* Targets the Website content gadget on the Cool Breeze Ride page and forces rounded edges */
#id_xgcCaYM, 
#id_xgcCaYM .idGContainer, 
#id_xgcCaYM .idGContainer .gadgetOuterWrapper {
    border-radius: 8px !important;
    overflow: hidden !important;
}
/* Targets the Merchandise content gadget on the Cool Breeze Ride page and forces rounded edges */
#id_ECruD7f, 
#id_ECruD7f .idGContainer, 
#id_ECruD7f .idGContainer .gadgetOuterWrapper {
    border-radius: 8px !important;
    overflow: hidden !important;
}
/* Targets the What's In a Name content gadget on the Club Info page and forces rounded edges */
#id_X19jf2q, 
#id_X19jf2q .idGContainer, 
#id_X19jf2q .idGContainer .gadgetOuterWrapper {
    border-radius: 15px !important;
    overflow: hidden !important;
}
/* Change link color for Privacy Policy in footer */
#id_dClJEop a {
    color: #7BCDC8 !important; /* Replace with your hex color code */
}
/* Change link color for Become a Member in footer */
#id_p3NrgUr a {
    color: #7BCDC8 !important; /* Replace with your hex color code */
}
/* Change link color for Contact Us in footer */
#id_Oip23gj a {
    color: #7BCDC8 !important; /* Replace with your hex color code */
}

/* Force tight container blocks for the Upcoming Events listings */
.WaGadgetUpcomingEvents,
.WaGadgetUpcomingEvents * {
    margin-bottom: 2px !important;
    padding-bottom: 2px !important;
    margin-top: 0px !important;
    padding-top: 0px !important;
}

/* Handle actual text elements and paragraph breaks specifically */
.WaGadgetUpcomingEvents p, 
.WaGadgetForumUpdates p,
.WaGadgetUpcomingEvents li, 
.WaGadgetForumUpdates li,
.WaGadgetUpcomingEvents td, 
.WaGadgetForumUpdates td {
    margin: 15px 0 !important;
    padding: 2px 0 !important;
    line-height: 1.2 !important;
}

/* ==========================================================
   WA-001a Calendar Title
   ========================================================== */

.pageTitleOuterContainer h3.sectionTitle,
h3.sectionTitle {
    font-family: Verdana, Arial, sans-serif !important;
    font-size: 20pt !important;
    font-weight: normal !important;
    text-transform: none !important;
    color: #266C78 !important;
    margin-left: 0px !important;
}

/* ==========================================================
   WA-001b Calendar Title – Mobile Adjustments
   ========================================================== */

@media screen and (max-width: 900px) {

    /* Add real space above July 2026 */
    .pageTitleOuterContainer h3.sectionTitle,
    h3.sectionTitle {
        position: static !important;
        top: auto !important;

        display: block !important;
        box-sizing: border-box !important;

        margin-top: 0 !important;
    /* Mobile only:
   Wild Apricot stacks the title and "Switch to List View"
   into separate rows, leaving excessive vertical space.
   Negative bottom margin restores the desired spacing.
*/
        margin-bottom: -12px !important;
        margin-left: 0px !important;

        padding-top: 12px !important;
        padding-bottom: 0 !important;

        line-height: 1.1 !important;
    }

    /* Remove unnecessary height from the stacked columns */
    .pageTitleOuterContainer,
    .pageTitleOuterContainer > div {
        height: auto !important;
        min-height: 0 !important;
    }
}


/* ==========================================================
   WA-002 Calendar Day Outlines
   Purpose:
     • Draws a black outline around each calendar day.
     • Draws black outlines around the weekday header.
     • Restores the bottom border of the final week.
   ========================================================== */

.EventListCalendar {
    border-collapse: collapse !important;
}

/*
Remove all existing borders from the main calendar cells.
This does not affect the small tables inside each date.
*/
.EventListCalendar > tbody > tr > td {
    border: none !important;
}

/* Vertical divisions between Sunday through Saturday */
.EventListCalendar > tbody > tr > td {
    border-left: 1px solid #000 !important;
}

/* Right outside edge */
.EventListCalendar > tbody > tr > td:last-child {
    border-right: 1px solid #000 !important;
}

/*
Top border of each week.
These are the rows containing the date numbers.
*/
.EventListCalendar > tbody > tr > td[style*="border-top-style"] {
    border-top: 1px solid #000 !important;
}

/*
Bottom border of each week.
Wild Apricot identifies these as the 10-pixel spacer rows.
*/
.EventListCalendar > tbody > tr > td[height="10"] {
    border-bottom: 1px solid #000 !important;
}

/*
Bottom border of the entire calendar.
This restores the missing line under the last week.
*/
.EventListCalendar {
    border-bottom: 1px solid #000 !important;
}

/* Weekday headings */
.EventListCalendarHeader {
    border: none !important;
    border-bottom: 1px solid #000 !important;
}

/* Left and right edges of the weekday heading row */
.EventListCalendarHeader:first-child {
    border-left: 1px solid #000 !important;
}

.EventListCalendarHeader:last-child {
    border-right: 1px solid #000 !important;
}

/* ==========================================================
   WA-003 Calendar Navigation Bar
   Purpose:
     • Teal navigation buttons
     • Darker teal for the selected Week / Month / Year view
     • Verdana font with normal weight
     • Uniform 54px button height
     • Approximately 3px less space above and below
   ========================================================== */

/* ---------- Regular button backgrounds ---------- */

.weekButton,
.monthButton,
.yearButton,
.todayButton,
.previousMonthButton,
.nextMonthButton,

.weekButton a,
.monthButton a,
.yearButton a,
.todayButton a,

.DecDateButton,
.incDateButton,

.weekButton span,
.monthButton span,
.yearButton span {
    background: #2A9D8F !important;
    background-color: #2A9D8F !important;
    background-image: none !important;
}

/* ---------- Selected Week / Month / Year ---------- */
.weekButton:has(.weekButtonLabel),
.monthButton:has(.monthButtonLabel),
.yearButton:has(.yearButtonLabel),

.weekButton:has(.weekButtonLabel) span,
.monthButton:has(.monthButtonLabel) span,
.yearButton:has(.yearButtonLabel) span {
    background: #1D746D !important;
    background-color: #1D746D !important;
}


/* ---------- Button containers ---------- */

.weekButton,
.monthButton,
.yearButton,
.todayButton,
.previousMonthButton,
.nextMonthButton {
    height: 54px !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

/* ---------- Button text ---------- */
.weekButton a,
.monthButton a,
.yearButton a,
.todayButton a,

.DecDateButton,
.incDateButton,

.weekButton span,
.monthButton span,
.yearButton span {
    display: block !important;
    height: 54px !important;
    line-height: 54px !important;

    padding: 0 8px !important;
    box-sizing: border-box !important;

    color: #ffffff !important;
    font-family: Verdana, Arial, sans-serif !important;
    font-size: 16px !important;
    font-weight: normal !important;
    text-align: center !important;
    text-decoration: none !important;
    white-space: nowrap !important;
}

/* Calendar month title */
h3.sectionTitle {
    padding-top: 8px !important;
}

/* Reduce space above and below weekday names */
td.EventListCalendarHeader {
    padding-top: 16px !important;
    padding-bottom: 12px !important;
    height: auto !important;
    line-height: 18px !important;
}

/* Reduce gap above calendar navigation bar */
.WaGadgetEventsStateCalendar #idViewSwitchersTable {
    padding-top: 16px !important;
}

/* ==========================================================
   WA-004 Horizontal Menu Height
   Purpose:
     • Reduces the height of the main horizontal menu.
     • Keeps dropdown menu spacing unchanged.
     • Avoids negative margins and exposed background strips.
   ========================================================== */

/* Top-level menu containers */
.menuInner,
.menuInner > ul.firstLevel,
.menuInner > ul.firstLevel > li,
.menuInner > ul.firstLevel > li > .item {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    min-height: 0 !important;
    height: auto !important;
}

/* Top-level menu links */
.menuInner > ul.firstLevel > li > .item > a {
    display: block !important;
    height: 48px !important;
    line-height: 48px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    box-sizing: border-box !important;
}

/* Remove extra spacing from the text span */
.menuInner > ul.firstLevel > li > .item > a > span {
    display: inline !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    line-height: inherit !important;
}

/* ==========================================================
   WA-005 Forum Summary Header Height and Top Spacing
   ========================================================== */

/* Container directly above the forum header table */
.WaGadgetForumSummary .inner {
    padding-top: 18px !important;
    margin-top: 0 !important;
    height: auto !important;
    min-height: 0 !important;
}

/* Forum header row height */
table.forumListHeaderTable,
table.forumListHeaderTable tr,
table.forumListHeaderTable td.forumListHeaderTD,
table.forumListHeaderTable td.forumListHeaderTD > div,
table.forumListHeaderTable h4.boxHeaderTitle {
    height: auto !important;
    min-height: 0 !important;
    line-height: 18pt !important;
}

/* Remove default heading spacing */
table.forumListHeaderTable h4.boxHeaderTitle {
    margin: 0 !important;
    padding: 0 !important;
}

/* Tighten the Social category-title line */
h5.forumCategoryTitle {
    font-size: 6px !important;
    line-height: 8px !important;
}

/* ==========================================================
   WA-006 Mobile Header Spacing
   Moves the entire upper title gadget closer to the logo.
   ========================================================== */

@media screen and (max-width: 900px) {

    /* Restore the title image to its normal position */
    img.artText[alt="Channel Islands Bicycle Club"] {
        position: static !important;
        top: auto !important;
        transform: none !important;
        margin-bottom: 0 !important;
        outline: none !important;
    }

    /* Move the gadget containing the title upward */
    .WaGadgetContent:has(
        img.artText[alt="Channel Islands Bicycle Club"]
    ) {
        margin-top: -22px !important;
    }
}

/* ==========================================================
   WA-007 Member Profile System Page
   Tighten membership-details heading spacing
   ========================================================== */

#membershipDetailsContainer {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

#membershipDetailsContainer .captionContainer,
#membershipDetailsContainer .inner,
#membershipDetailsContainer .fieldBody {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

#membershipDetailsContainer h4 {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    line-height: 1.15 !important;
}


/* ==========================================================
   WA-007a Member Profile
   Tighten spacing between profile fields
   ========================================================== */

#idMemberDirectoryDetailsContainer .fieldContainer {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

#idMemberDirectoryDetailsContainer .fieldSubContainer {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 2px !important;
    padding-bottom: 2px !important;
}

#idMemberDirectoryDetailsContainer .fieldLabel,
#idMemberDirectoryDetailsContainer .fieldBody {
    line-height: 1.2 !important;
}


/* ==========================================================
   WA-007b Send Message Button Height
   ========================================================== */

#idMemberDirectoryDetailsContainer input.typeButton {
    padding-top: 6px !important;
    padding-bottom: 6px !important;
    min-height: 0 !important;
    height: auto !important;
}


/* ==========================================================
   WA-007c Member Profile Header
   Reduce vertical height around member name and Send Message
   ========================================================== */

#idMemberDirectoryDetailsContainer .profileHeaderContainer {
    margin-top: 0 !important;
    margin-bottom: 12px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    min-height: 0 !important;
}

#idMemberDirectoryDetailsContainer
.memberDirectoryDetailsHeaderContainer {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

#idMemberDirectoryDetailsContainer
.memberDirectoryDetailsHeaderContainer h2 {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    line-height: 1.15 !important;
}

#idMemberDirectoryDetailsContainer .formOuterContainer {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}


/* ==========================================================
   WA-007d Member Profile Back-Link Spacing
   Controls the space between Back and the member name.
   ========================================================== */

#idMemberPublicProfileTitleMainContainer {
    margin: 0 !important;
    padding: 0 !important;
    min-height: 0 !important;
}

#idMemberPublicProfileBackContainer {
    margin: 0 0 8px 0 !important;
    padding: 0 !important;
    min-height: 0 !important;
}

/* ==========================================================
   WA-008 Forum Description Text
   Purpose:
     • Improves readability of forum description text by
       changing it from light gray to dark gray.
     • Applies to both Topic List and Forum Summary views.
   ========================================================== */

.WaGadgetForumStateTopicList .introOuterContainer,
.WaGadgetForumStateList .thread span.forumDescription {
    color: #333333 !important;
}

/* ==========================================================
   WA-009 Event Signup Mobile View
   Tighten spacing below "Switch to Calendar View"
   ========================================================== */

@media screen and (max-width: 900px) {

    #idEventViewSwitcher {
        margin-top: 18px !important;
    }

    #idUpcomingEventsContainer ul.boxesList {
        margin-top: 18px !important;
        padding-top: 0 !important;
    }
}

/* ==========================================================
   WA-010 Become a Member Mobile View
   Tighten spacing below page title
   ========================================================== */

@media screen and (max-width: 900px) {

    h1.pageTitle {
        margin-bottom: 8px !important;
    }

}

/* ==========================================================
   WA-010 Mobile Content-Gadget Title Spacing
   Purpose:
     • Removes a trailing line break beneath content-gadget
       page titles on mobile.
     • Reduces excessive spacing below those titles.
     • Leaves desktop layout unchanged.
   ========================================================== */

@media screen and (max-width: 900px) {

    .WaGadgetContent .gadgetStyleBody > p:first-child {
        margin-bottom: 0 !important;
    }

    .WaGadgetContent .gadgetStyleBody > p:first-child > br:last-child {
        display: none !important;
    }
}
/* ==========================================================
   WA-011 My Profile Field Spacing
   Purpose:
     • Tightens the vertical spacing between personal-profile
       fields on the hidden My Profile page.
     • Leaves membership details and other site forms unchanged.
   ========================================================== */

#idProfileMainContainer .sectionOuterContainer .fieldContainer {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

#idProfileMainContainer .sectionOuterContainer .fieldSubContainer,
#idProfileMainContainer .sectionOuterContainer .fieldLabel,
#idProfileMainContainer .sectionOuterContainer .fieldBody {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 3px !important;
    padding-bottom: 3px !important;
    min-height: 0 !important;
}
/* ==========================================================
   WA-012 Home Page Slideshow Mobile Sizing

   Purpose:
     • Sets all Camera slideshow layers to the same height.
     • Makes both the temporary source image and final slide
       use identical sizing and positioning.
     • Preserves the 250px desktop height.
   ========================================================== */

@media screen and (max-width: 900px) {

    .WaGadgetSlideshow,
    .WaGadgetSlideshow .gadgetStyleBody,
    .WaGadgetSlideshow .camera_wrap,
    .WaGadgetSlideshow .camera_fakehover,
    .WaGadgetSlideshow .camera_src,
    .WaGadgetSlideshow .camera_target,
    .WaGadgetSlideshow .camera_target_content,
    .WaGadgetSlideshow .cameraSlide,
    .WaGadgetSlideshow .cameraContent {
        height: 160px !important;
        min-height: 160px !important;
        max-height: 160px !important;
    }

    .WaGadgetSlideshow .camera_wrap,
    .WaGadgetSlideshow .camera_fakehover,
    .WaGadgetSlideshow .camera_target,
    .WaGadgetSlideshow .camera_target_content {
        overflow: hidden !important;
    }

    /* Final Camera-generated slide images */
    .WaGadgetSlideshow .cameraSlide img,

    /* Original source images visible during initialization */
    .WaGadgetSlideshow .camera_src img {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: contain !important;
        object-position: center center !important;
        margin: 0 !important;
        transform: none !important;
    }

    /*
       Some Camera versions store source slides as divs with
       background images rather than ordinary img elements.
    */
    .WaGadgetSlideshow .camera_src > div,
    .WaGadgetSlideshow .cameraSlide {
        background-size: contain !important;
        background-position: center center !important;
        background-repeat: no-repeat !important;
    }
}

/* ==========================================================
   WA-013 Header Search Toggle — Desktop
   Purpose:
     • Shows only a yellow magnifying-glass button when closed.
     • Opens the existing Wild Apricot search field to the left.
     • Closes through the existing JavaScript behavior.
     • Applies only to desktop screens.
   ========================================================== */

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

    /* Remove the original gadget box styling */
    body .WaGadgetSiteSearch {
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
        overflow: visible !important;
    }

    /*
       Main search wrapper.
       This must remain visible because it contains both
       the hidden field and our magnifying-glass button.
    */
    body .WaGadgetSiteSearch
    .searchBoxOuter.wa012-search-ready {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;

        position: relative !important;
        width: 100% !important;
        min-height: 48px !important;

        margin: 0 !important;
        padding: 0 !important;

        background: transparent !important;
        border: 0 !important;
        overflow: visible !important;
    }

    /* ======================================================
       CLOSED SEARCH FIELD
       Hide only the original search box—not its outer wrapper.
       ====================================================== */

    body .WaGadgetSiteSearch
    .searchBoxOuter.wa012-search-ready
    > .searchBox {
        order: 1 !important;

        display: block !important;
        width: 0 !important;
        min-width: 0 !important;
        max-width: 0 !important;
        height: 34px !important;

        margin: 0 !important;
        padding: 0 !important;

        opacity: 0 !important;
        visibility: hidden !important;
        overflow: hidden !important;

        transition:
            width 0.25s ease,
            max-width 0.25s ease,
            opacity 0.20s ease,
            margin 0.25s ease !important;
    }

    /*
       Prevent Wild Apricot’s original small search icon
       from appearing as a clipped black corner while closed.
    */
    body .WaGadgetSiteSearch
    .searchBoxOuter.wa012-search-ready:not(.wa012-search-open)
    .searchBoxFieldContainer::before {
        display: none !important;
        content: none !important;
    }

    /* ======================================================
       MAGNIFYING-GLASS BUTTON — NORMAL
       ====================================================== */

    body .WaGadgetSiteSearch
    button.wa012-search-toggle {
        order: 2 !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        position: relative !important;

        width: 48px !important;
        min-width: 48px !important;
        max-width: 48px !important;

        height: 48px !important;
        min-height: 48px !important;
        max-height: 48px !important;

        margin: -6px 0 0 0 !important;
        padding: 8px !important;

        background: transparent !important;
        background-color: transparent !important;

        border: 0 !important;
        border-radius: 50% !important;
        box-shadow: none !important;

        color: #FFF200 !important;
        cursor: pointer !important;
        overflow: visible !important;
        opacity: 1 !important;
        visibility: visible !important;

        transition:
            color 0.15s ease,
            background-color 0.15s ease,
            transform 0.15s ease !important;
    }

    body .WaGadgetSiteSearch
    button.wa012-search-toggle svg {
        display: block !important;

        width: 32px !important;
        height: 32px !important;

        fill: none !important;
        stroke: #FFF200 !important;
        stroke-width: 2.5 !important;
        stroke-linecap: round !important;
        stroke-linejoin: round !important;

        opacity: 1 !important;
        visibility: visible !important;
        overflow: visible !important;
        pointer-events: none !important;
    }

    /* ======================================================
       HOVER / KEYBOARD FOCUS
       Yellow circle with teal magnifying glass.
       ====================================================== */

    body .WaGadgetSiteSearch
    button.wa012-search-toggle:hover,

    body .WaGadgetSiteSearch
    button.wa012-search-toggle:focus,

    body .WaGadgetSiteSearch
    button.wa012-search-toggle:focus-visible {
        background: #FFF200 !important;
        background-color: #FFF200 !important;
        color: #266C78 !important;

        border: 0 !important;
        box-shadow: none !important;
        outline: none !important;

        transform: scale(1.05) !important;
    }

    body .WaGadgetSiteSearch
    button.wa012-search-toggle:hover svg,

    body .WaGadgetSiteSearch
    button.wa012-search-toggle:focus svg,

    body .WaGadgetSiteSearch
    button.wa012-search-toggle:focus-visible svg {
        fill: none !important;
        stroke: #266C78 !important;
    }

    /* ======================================================
       OPEN SEARCH FIELD
       ====================================================== */

    body .WaGadgetSiteSearch
    .searchBoxOuter.wa012-search-ready.wa012-search-open
    > .searchBox {
        width: 215px !important;
        min-width: 215px !important;
        max-width: 215px !important;

        margin-right: 7px !important;

        opacity: 1 !important;
        visibility: visible !important;
        overflow: visible !important;
    }

    body .WaGadgetSiteSearch
    .searchBoxOuter.wa012-search-ready.wa012-search-open
    button.wa012-search-toggle {
        background: #FFF200 !important;
        background-color: #FFF200 !important;
        color: #266C78 !important;
    }

    body .WaGadgetSiteSearch
    .searchBoxOuter.wa012-search-ready.wa012-search-open
    button.wa012-search-toggle svg {
        fill: none !important;
        stroke: #266C78 !important;
    }

    /* Keep the existing Wild Apricot search form properly sized */
    body .WaGadgetSiteSearch
    .wa012-search-ready
    .generalSearchBox {
        width: 100% !important;
        margin: 0 !important;
    }

    body .WaGadgetSiteSearch
    .wa012-search-ready
    .searchBoxFieldContainer {
        display: block !important;
        width: 100% !important;
    }

    body .WaGadgetSiteSearch
    .wa012-search-ready
    .searchBoxField {
        width: 100% !important;
        height: 34px !important;
        box-sizing: border-box !important;
    }
}

/* ==========================================================
       Prevent search-box flash during page load
   ========================================================== */

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

    /* Hide the original field immediately on page load */
    body .WaGadgetSiteSearch .searchBoxOuter > .searchBox {
        width: 0 !important;
        min-width: 0 !important;
        max-width: 0 !important;

        margin: 0 !important;
        padding: 0 !important;

        opacity: 0 !important;
        visibility: hidden !important;
        overflow: hidden !important;
    }

    /* Once opened by JavaScript, allow it to appear */
    body .WaGadgetSiteSearch
    .searchBoxOuter.wa012-search-ready.wa012-search-open
    > .searchBox {
        width: 215px !important;
        min-width: 215px !important;
        max-width: 215px !important;

        margin-right: 7px !important;

        opacity: 1 !important;
        visibility: visible !important;
        overflow: visible !important;
    }
}

/* ==========================================================
   WA-013a Mobile Expanding Search Bar
   ========================================================== */

@media screen and (max-width: 900px) {

    /* Keep Wild Apricot's original search gadget hidden */
    .WaGadgetSiteSearch {
        display: none !important;
    }

    .WaGadgetMobilePanel .mobilePanel {
        position: relative !important;
    }

    /*
       Search control occupies the area between:
       • hamburger button on the left
       • login button on the right

       58px = 50px icon area + 8px spacing
    */
    .WaGadgetMobilePanel
    .mobilePanel
    .wa013MobileSearchControl {

        position: absolute !important;

        top: 0 !important;
        left: 58px !important;
        right: 40px !important;

        height: 50px !important;

        margin: 0 !important;
        padding: 0 !important;

        z-index: 20;
    }

    /* Search icon while closed */
    .WaGadgetMobilePanel
    .mobilePanel
    .wa013MobileSearchButton {

        position: absolute !important;

        top: 0 !important;
        right: 0 !important;

        display: block !important;

        width: 50px !important;
        height: 50px !important;

        margin: 0 !important;
        padding: 0 !important;

        border: 0 !important;
        border-radius: 0 !important;

        background: transparent !important;
        box-shadow: none !important;
        outline: none !important;

        cursor: pointer;

        appearance: none;
        -webkit-appearance: none;
    }

    .WaGadgetMobilePanel
    .mobilePanel
    .wa013MobileSearchIcon {

        position: absolute;

        top: 12px;
        left: 12px;

        width: 26px;
        height: 26px;

        fill: #ffffff;
        stroke: #212728;

        stroke-width: 3;
        stroke-linecap: round;
        stroke-linejoin: round;

        pointer-events: none;
    }

    /* Search form is hidden while closed */
    .WaGadgetMobilePanel
    .mobilePanel
    .wa013MobileSearchForm {

        position: absolute !important;

        top: 7px !important;
        left: 0 !important;
        right: 0 !important;

        display: block !important;

        height: 36px !important;

        margin: 0 !important;
        padding: 0 !important;

        visibility: hidden;
        opacity: 0;

        transform: scaleX(0.2);
        transform-origin: right center;

        transition:
            transform 0.18s ease,
            opacity 0.14s ease;

        pointer-events: none;
    }

    /* Open state: hide magnifying glass */
    .WaGadgetMobilePanel
    .mobilePanel
    .wa013SearchIsOpen
    .wa013MobileSearchButton {

        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

    /* Open state: reveal the field */
    .WaGadgetMobilePanel
    .mobilePanel
    .wa013SearchIsOpen
    .wa013MobileSearchForm {

        visibility: visible;
        opacity: 1;

        transform: scaleX(1);

        pointer-events: auto;
    }

    .WaGadgetMobilePanel
    .mobilePanel
    .wa013MobileSearchInput {

        display: block !important;

        width: 100% !important;
        height: 36px !important;

        margin: 0 !important;
        padding: 5px 10px !important;

        box-sizing: border-box !important;

        border: 1px solid #b7b7b7 !important;
        border-radius: 4px !important;

        background: #ffffff !important;
        color: #212728 !important;

        font-family: Arial, sans-serif !important;
        font-size: 16px !important;
        line-height: 24px !important;

        box-shadow: none !important;
        outline: none !important;

        -webkit-appearance: none;
        appearance: none;
    }

    .WaGadgetMobilePanel
    .mobilePanel
    .wa013MobileSearchInput:focus {

        border-color: #266C78 !important;
        box-shadow: inset 0 0 0 1px #266C78 !important;
    }

    /*
       Remove the browser's built-in search cancel icon.
       Tapping outside or pressing Escape closes the field.
    */
    .wa013MobileSearchInput::-webkit-search-cancel-button {
        display: none;
        -webkit-appearance: none;
    }
}

/* ==========================================================
   WA-013b Mobile Site Search Results
   Show newest results first
   ========================================================== */

@media screen and (max-width: 900px) {

    .siteSearchResults .resultDiv {
        display: flex !important;
        flex-direction: column-reverse !important;
    }

    .siteSearchResults .resultDiv > .row {
        width: 100% !important;
    }
}

/* ==========================================================
   WA-015 Gadget Link Color
   Purpose:
     • Changes all link states within the targeted gadget
       to the approved light teal color.
     • Applies only to gadget id_pYrrLWW.
   ========================================================== */

#id_pYrrLWW a,
#id_pYrrLWW a:link,
#id_pYrrLWW a:visited,
#id_pYrrLWW a:hover,
#id_pYrrLWW a:focus,
#id_pYrrLWW a:active {
  color: #7BCDC8 !important;
}

/* WA-016: Changes WildApricot action buttons from red to site teal. */

input.typeButton,
input.loginButton,
input.returnToEventButton,
input.SaveButton,
input.CancelButton,
input.nextButton,
input.submitApplicationButton,
input.payment-action-button,
button.typeButton,
a.stylizedButton {
  background: #266C78 !important;
  border-color: #266C78 !important;
  color: #FFFFFF !important;
}

input.typeButton:hover,
input.typeButton:focus,
input.typeButton:active,
input.loginButton:hover,
input.loginButton:focus,
input.loginButton:active,
input.returnToEventButton:hover,
input.returnToEventButton:focus,
input.returnToEventButton:active,
input.SaveButton:hover,
input.SaveButton:focus,
input.SaveButton:active,
input.CancelButton:hover,
input.CancelButton:focus,
input.CancelButton:active,
input.nextButton:hover,
input.nextButton:focus,
input.nextButton:active,
input.submitApplicationButton:hover,
input.submitApplicationButton:focus,
input.submitApplicationButton:active,
input.payment-action-button:hover,
input.payment-action-button:focus,
input.payment-action-button:active,
button.typeButton:hover,
button.typeButton:focus,
button.typeButton:active,
a.stylizedButton:hover,
a.stylizedButton:focus,
a.stylizedButton:active {
  background: #358A99 !important;
  border-color: #358A99 !important;
  color: #FFFFFF !important;
  text-decoration: none !important;
}

/* ==========================================================
   WA-016a Change Password Buttons
   Purpose:
     • Styles the Save and Cancel buttons on the
       Change Password system page.
     • Complements WA-016 for Wild Apricot action buttons.
   Change Password page, Email Member page, Unsubscribe Page, reset password
========================================================== */

input.nextButtonAutoWidth,
#id_X2N9FQd input[type="submit"],
#id_uUalc9u .fieldBody input[type="submit"], 
#id_CuxuKrN .fieldBody input[type="submit"], 
#id_GxzIkeM .fieldBody input[type="submit"] {
    background: #266C78 !important;
    border: 1px solid #266C78 !important;
    color: #FFFFFF !important;
}

input.nextButton:hover,
input.nextButton:focus,
input.nextButton:active,
input.nextButtonAutoWidth:hover,
input.nextButtonAutoWidth:focus,
input.nextButtonAutoWidth:active,
#id_X2N9FQd input[type="submit"]:hover,
#id_X2N9FQd input[type="submit"]:focus,
#id_X2N9FQd input[type="submit"]:active, 
#id_uUalc9u .fieldBody input[type="submit"]:hover,
#id_uUalc9u .fieldBody input[type="submit"]:focus,
#id_uUalc9u .fieldBody input[type="submit"]:active, 
#id_CuxuKrN .fieldBody input[type="submit"]:hover,
#id_CuxuKrN .fieldBody input[type="submit"]:focus,
#id_CuxuKrN .fieldBody input[type="submit"]:active, 
#id_GxzIkeM .fieldBody input[type="submit"]:hover,
#id_GxzIkeM .fieldBody input[type="submit"]:focus,
#id_GxzIkeM .fieldBody input[type="submit"]:active {
    background: #358A99 !important;
    border-color: #358A99 !important;
    color: #FFFFFF !important;
    text-decoration: none !important;
}

/* ==========================================================
   WA-018 Calendar Recurring Event Icon
   Purpose:
     • Removes Wild Apricot's decorative recurring-event
       calendar icon from the Events Calendar gadget.
     • Frees horizontal space for the event start time,
       especially on mobile devices.
     • Applies only to gadget id_XbSDLCr.
   ========================================================== */

#id_XbSDLCr .recurringEvent::before {
    display: none !important;
    content: none !important;
}

/* ==========================================================
   WA-019 Event Details Layout Padding
   Purpose:
     • Adds 12px padding around the entire Event Details
       layout, including Back link, title and event content.
     • Recreates the padding control Wild Apricot exposes
       on some gadgets but not on this system gadget.
     • Applies only to Events Description on events description page, Events description on members events page Member public profile, Create topic page in forums, My Profile page, Change Membership page, Change Password page, Email Member page, Unsubscribe Page
   ========================================================== */

#id_CuxuKrN > form,
#id_GxzIkEM > form,
#id_XbSDLCr > form,
#id_q6TbpuR > form,
#id_mirBkag > form,
#id_BTiHgRv > form,
#id_KPehebq > form,
#id_ORhJZgc > form,
#id_dKGwFXW > form {
    padding: 12px !important;
    box-sizing: border-box !important;
}

/* System gadgets that require padding on the gadget itself */
#id_X2N9FQd,
#id_GxzIkeM {
    padding: 12px !important;
    box-sizing: border-box !important;
}

/* System gadgets that use a wizard container */
.publicWizardNameContainer {
    padding: 12px !important;
    box-sizing: border-box !important;
}

/* ==========================================================
   WA-021 Event Details Registration Status
   Purpose:
     • Formats the custom registration-status text created
       by WA-021 on the Event Details system page.
     • Adds separation from the When / Location information.
     • Gives the status stronger visual emphasis.
   ========================================================== */

.wa021RegistrationStatus {
    margin-top: 12px !important;
    margin-bottom: 0 !important;
    padding: 0 !important;

    font-weight: bold !important;
    line-height: 1.3 !important;
}

/* ==========================================================
   WA-022 Event Signup Header Spacing
   Purpose:
     • Reduces excess white space below "Upcoming Events"
       on the Event Signup system page.
     • Removes the event-title margin that was collapsing
       through the event-list containers.
     • Establishes a controlled 12px gap before the first event.
   ========================================================== */

.WaGadgetEventsStateList .boxesList {
    padding-top: 2px !important;
}

.WaGadgetEventsStateList .boxHeaderTitle {
    margin-top: 0 !important;
}