/* ============================================================
   WGRA brand overrides for Wild Apricot — v3 (optimized)
   Paste into: Website → CSS → Editor field → Save
   Colors: green #20603C · cream #FFFDF6 · brown #3C2323
   ============================================================ */

/* --- Rubik font (not in WA's font picker) --- */
@import url('https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,400;0,600;0,700;1,400&display=swap');

body, .WaGadget, .WaGadget p, .WaGadget li, .WaGadget td,
input, select, textarea, button {
    font-family: "Rubik", "Trebuchet MS", Tahoma, sans-serif !important;
}

/* --- Page background + body text --- */
body, #idContentContainer, .WaLayoutContentContainer {
    background-color: #FFFDF6 !important;
    color: #3C2323 !important;
}

/* --- Headings --- */
.WaGadget h1, .WaGadget h2, .WaGadget h3, .WaGadget h4,
#idContentContainer h1, #idContentContainer h2,
#idContentContainer h3, #idContentContainer h4,
h1.generalPageTitle, .gadgetStyleTitle, .WaGadgetHeadline {
    font-family: "Rubik", "Trebuchet MS", Tahoma, sans-serif !important;
    color: #20603C !important;
    font-weight: 700 !important;
}

/* --- Links --- */
.WaGadget a, #idContentContainer a {
    color: #20603C !important;
}
.WaGadget a:hover, #idContentContainer a:hover {
    color: #143a24 !important;
}

/* --- Header area --- */
#idHeaderWrapper, .zoneHeader, .WaLayoutHeaderContainer {
    background-color: #FFFDF6 !important;
}
/* Header placeholder — kills the inline blue #3F88E8 */
#id_Header1, .WaPlaceHolderHeader1 {
    background-color: #20603C !important;
}

/* --- Main menu bar --- */
.WaGadgetMenuHorizontal, .WaGadgetMenuHorizontal .menuInner,
.WaGadgetMenuHorizontal ul.firstLevel, #idHeaderMenu, .zoneHeaderMenu,
.WaGadgetMenuHorizontal .menuBackground, .stickyMenu .menuBackground {
    background-color: #20603C !important;
}
.WaGadgetMenuHorizontal ul.firstLevel > li > a,
.WaGadgetMenuHorizontal ul.firstLevel > li > .item > a {
    color: #FFFDF6 !important;
    font-family: "Rubik", "Trebuchet MS", Tahoma, sans-serif !important;
    font-weight: 700 !important;
}
.WaGadgetMenuHorizontal ul.firstLevel > li:hover > a,
.WaGadgetMenuHorizontal ul.firstLevel > li.sel > a,
.WaGadgetMenuHorizontal ul.firstLevel > li:hover > .item > a,
.WaGadgetMenuHorizontal ul.firstLevel > li.sel > .item > a {
    background-color: #143a24 !important;
    color: #FFFDF6 !important;
}
.WaGadgetMenuHorizontal ul.secondLevel, .WaGadgetMenuHorizontal ul.thirdLevel {
    background-color: #FFFDF6 !important;
}
.WaGadgetMenuHorizontal ul.secondLevel a, .WaGadgetMenuHorizontal ul.thirdLevel a {
    color: #3C2323 !important;
}
.WaGadgetMenuHorizontal ul.secondLevel li:hover > a {
    background-color: #20603C !important;
    color: #FFFDF6 !important;
}

/* --- Mobile/admin top panel (was orange) --- */
.mobilePanel, .WaGadgetMobilePanel .mobilePanel {
    background-color: #20603C !important;
}
.mobilePanel .mobilePanelButton, .mobilePanel a {
    color: #FFFDF6 !important;
}
.mobilePanel .buttonLogin, .mobilePanel .buttonLogin:before {
    color: #FFFDF6 !important;
}
.mobilePanel .buttonLogin svg, .mobilePanel .buttonLogin svg path {
    fill: #FFFDF6 !important;
}

/* --- Buttons (forms, event registration, store, etc.) --- */
input.typeButton, .stylizedButton, .WaGadget .stylizedButton,
button, input[type=submit], .buttonStyle001,
.functionalButton, .generalFormButton {
    background-color: #20603C !important;
    color: #FFFDF6 !important;
    border: none !important;
    border-radius: 5px !important;
    font-family: "Rubik", "Trebuchet MS", Tahoma, sans-serif !important;
    font-weight: 700 !important;
}
input.typeButton:hover, .stylizedButton:hover, button:hover,
input[type=submit]:hover {
    background-color: #143a24 !important;
}

/* ============================================================
   LOGIN GADGET — confirmed selectors only, order matters
   ============================================================ */

/* 1) Logged OUT: LOG IN = solid green button, white text */
.WaGadgetLoginButton a,
.WaGadgetLoginButton .loginContainer a {
    background-color: #20603C !important;
    background-image: none !important;
    color: #FFFDF6 !important;
    border: none !important;
    border-radius: 5px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
}
.WaGadgetLoginButton a:hover {
    background-color: #143a24 !important;
}

/* 2) Logged IN: name/icon link has no href — undo the fill */
.WaGadgetLoginButton a.loginLink:not([href]) {
    background: none !important;
    background-color: transparent !important;
    background-image: none !important;
    color: #20603C !important;
    border: none !important;
    box-shadow: none !important;
}
.WaGadgetLoginButton a.loginLink:not([href]) svg,
.WaGadgetLoginButton a.loginLink:not([href]) svg path {
    fill: #20603C !important;
}

/* 3) Dropdown: View profile / Change password (real <a> tags in .profileBox) */
.WaGadgetLoginButton .profileBox a {
    background: none !important;
    background-color: transparent !important;
    background-image: none !important;
    color: #20603C !important;
    border: none !important;
    box-shadow: none !important;
    text-shadow: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
    font-weight: 400 !important;
    text-decoration: underline !important;
    display: inline !important;
}
.WaGadgetLoginButton .profileBox a:hover {
    color: #143a24 !important;
}

/* 4) Log out — it's a submit input, not a link */
input[type=submit].loginBoxLogout {
    background: none !important;
    background-color: transparent !important;
    background-image: none !important;
    color: #20603C !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    text-shadow: none !important;
    padding: 0 !important;
    font-weight: 400 !important;
    text-decoration: underline !important;
    cursor: pointer;
}
input[type=submit].loginBoxLogout:hover {
    background: none !important;
    background-color: transparent !important;
    color: #143a24 !important;
}
.loginBoxLogout:hover {
    background: none !important;
    background-color: transparent !important;
    color: #143a24 !important;
}

/* --- Social icons — green instead of orange --- */
.WaGadgetSocialProfile a,
.WaGadgetSocialProfile a:before,
.WaGadgetSocialProfile .socialProfileItems a {
    color: #20603C !important;
}
.WaGadgetSocialProfile svg,
.WaGadgetSocialProfile svg path {
    fill: #20603C !important;
}

/* --- Footer --- */
#idFooterWrapper, .zoneFooter, .WaLayoutFooterContainer,
#id_Footer1, .WaPlaceHolderFooter1 {
    background-color: #FFFDF6 !important;
    color: #3C2323 !important;
    border-top: none !important;
}

/* Mobile expanded menu dropdown */
.mobilePanel .menuInner,
.mobilePanel ul.firstLevel {
    background-color: #20603C !important;
}
.mobilePanel ul.firstLevel > li > a,
.mobilePanel ul.firstLevel > li > .item > a {
    color: #FFFDF6 !important;
    font-weight: 700 !important;
}

/* Hamburger button background */
.mobilePanel .mobilePanelButton.buttonMenu {
    background-color: #20603C !important;
}

/* Mobile submenu (e.g. Contact > Privacy Policy) */
.mobilePanel ul.secondLevel {
    background-color: #20603C !important;
}
.mobilePanel ul.secondLevel a {
    color: #FFFDF6 !important;
}