/* ============================================================
   WGRA brand stylesheet — v5 (site-wide)
   Replaces user.css. Paste into: Website → CSS → Save.

   v5 adds: every style the Wild Apricot editor offers (link
   button styles 1–5, Quoted, Caption, Smaller, dividers, gadget
   Style 2) is remapped to the WGRA brand, so pages built with
   standard gadgets — no custom HTML — come out on-brand from the
   editor's own dropdowns. See "EDITOR STYLES" at the bottom.

   What changed from v3
   - ROOT FIX: v3 targeted ".WaGadget h1" etc. Wild Apricot never
     uses a bare "WaGadget" class (it's WaGadgetOnly / WaGadgetFirst /
     WaGadgetContent...), so headings, links and body text on every
     page except Home fell back to the theme (blue Raleway/Lato
     headings, orange About Us headings). v4 targets
     .gadgetStyleBody and .zoneContent, which every page has.
   - Brand tokens live here once. Delete the per-page <style> block
     inside the Home page's Custom HTML gadget (.wgra-content) after
     pasting this — this file now provides those classes globally.
   - Theme blue #3F88E8 (inline on content/footer placeholders) is
     replaced with Pool Blue from the logo.
   - h4/h5/h6 used as section headings are normalized so legacy
     pages match while content is re-tagged.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');

:root {
  /* Color */
  --wgra-green:        #20603C;  /* Gator Green — primary */
  --wgra-green-dark:   #143A24;  /* hover / active */
  --wgra-leaf:         #24843C;  /* logo green — small accents only */
  --wgra-blue:         #0C72B6;  /* Pool Blue — logo blue, secondary */
  --wgra-blue-tint:    #E8F2FA;
  --wgra-sun:          #F2B33D;  /* notice accent */
  --wgra-sun-tint:     #FFF5DC;
  --wgra-cream:        #FFFDF6;  /* page background */
  --wgra-sand:         #F5F1E6;  /* cards, alt sections */
  --wgra-ink:          #24302A;  /* body text */
  --wgra-muted:        #5E6B63;  /* captions, meta */
  --wgra-line:         #E2DDCF;  /* borders, dividers */

  /* Type */
  --wgra-font: "Rubik", "Trebuchet MS", Tahoma, sans-serif;
  --wgra-fs-h1: clamp(2rem, 1.4rem + 2.2vw, 2.5rem);   /* 32–40px */
  --wgra-fs-h2: clamp(1.5rem, 1.25rem + 1vw, 1.75rem);  /* 24–28px */
  --wgra-fs-h3: 1.375rem;                              /* 22px */
  --wgra-fs-body: 1.125rem;                            /* 18px */
  --wgra-fs-small: 0.9375rem;                          /* 15px */

  /* Shape */
  --wgra-radius: 8px;
  --wgra-radius-lg: 14px;
  --wgra-measure: 760px;
}

/* ---------- Base ---------- */
html, body, #idContentContainer, .WaLayoutContentContainer,
#idHeaderWrapper, .zoneHeader, .WaLayoutHeaderContainer {
  background-color: var(--wgra-cream) !important;
}
body, [class*="WaGadget"], input, select, textarea, button {
  font-family: var(--wgra-font) !important;
}
.gadgetStyleBody, .zoneContent, .zoneHeader3 .gadgetStyleBody {
  color: var(--wgra-ink) !important;
}
/* One reading width on every page (Home already used ~800px; Bricks,
   About and policy pages ran edge to edge) */
.zoneContent .WaGadgetContent > .gadgetStyleBody,
.WaGadgetHeadline > .gadgetStyleBody,
.zoneContent .WaGadgetCustomHTML > .gadgetStyleBody {
  max-width: var(--wgra-measure);
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 16px;
  padding-right: 16px;
  box-sizing: border-box;
}
.gadgetStyleBody p, .gadgetStyleBody li, .gadgetStyleBody td {
  font-size: var(--wgra-fs-body);
  line-height: 1.6;
  color: var(--wgra-ink) !important;
}

/* ---------- Headings (one scale, left-aligned, sentence case) ---------- */
.gadgetStyleBody h1, .gadgetStyleBody h2, .gadgetStyleBody h3,
.gadgetStyleBody h4, .gadgetStyleBody h5, .gadgetStyleBody h6,
h1.pageTitle, .pageTitleOuterContainer h1, .formTitleOuterContainer h1,
.generalFormContainer h3 {
  font-family: var(--wgra-font) !important;
  font-weight: 700 !important;
  text-transform: none !important;
  letter-spacing: -0.01em;
  line-height: 1.2;
  text-align: left !important;
  margin: 1.6em 0 0.5em;
}
.gadgetStyleBody h1, h1.pageTitle, .pageTitleOuterContainer h1,
.formTitleOuterContainer h1 {
  font-size: var(--wgra-fs-h1) !important;
  color: var(--wgra-green) !important;
  margin-top: 0.4em;
}
.gadgetStyleBody h2 {
  font-size: var(--wgra-fs-h2) !important;
  color: var(--wgra-green) !important;
}
.gadgetStyleBody h3, .generalFormContainer h3 {
  font-size: var(--wgra-fs-h3) !important;
  color: var(--wgra-ink) !important;
}
/* Legacy: h4/h5 were used as section titles — render as H2 until re-tagged */
.gadgetStyleBody h4, .gadgetStyleBody h5 {
  font-size: var(--wgra-fs-h2) !important;
  color: var(--wgra-green) !important;
}
.gadgetStyleBody h6 {
  font-size: var(--wgra-fs-h3) !important;
  color: var(--wgra-ink) !important;
}
.gadgetStyleBody h1:empty, .gadgetStyleBody h2:empty { display: none; }

/* Headline gadget (used for page titles on Legacy Bricks etc.) = H1.
   Also overrides the <font style="font-size:30px"> tags the editor leaves behind. */
.WaGadgetHeadline .gadgetStyleBody,
.WaGadgetHeadline .gadgetStyleBody * {
  font-family: var(--wgra-font) !important;
  font-size: var(--wgra-fs-h1) !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  color: var(--wgra-green) !important;
  text-align: left !important;
  text-transform: none !important;
}
.gadgetStyleBody font[style*="font-size"] { font-size: inherit !important; }

/* ---------- Links ---------- */
.gadgetStyleBody a, .zoneContent a {
  color: var(--wgra-green) !important;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.gadgetStyleBody a:hover, .zoneContent a:hover { color: var(--wgra-green-dark) !important; }

/* ---------- Buttons ---------- */
.wgra-button, a.wgra-button,
input.typeButton, .stylizedButton, .generalFormButton, .functionalButton,
button, input[type=submit], input[type=button] {
  display: inline-block;
  background: var(--wgra-green) !important;
  color: var(--wgra-cream) !important;
  border: 2px solid var(--wgra-green) !important;
  border-radius: var(--wgra-radius) !important;
  padding: 12px 22px !important;
  font: 600 1rem/1.2 var(--wgra-font) !important;
  text-transform: none !important;
  text-decoration: none !important;
  cursor: pointer;
}
.wgra-button:hover, input.typeButton:hover, .stylizedButton:hover,
button:hover, input[type=submit]:hover, input[type=button]:hover {
  background: var(--wgra-green-dark) !important;
  border-color: var(--wgra-green-dark) !important;
}
/* Secondary: outline. Use for Download, Cancel, Back */
.wgra-button--secondary, a.wgra-button--secondary,
input[value="Cancel"], input.cancelButton, .cancelButton {
  background: transparent !important;
  color: var(--wgra-green) !important;
}
.wgra-button--secondary:hover, input[value="Cancel"]:hover, .cancelButton:hover {
  background: var(--wgra-green) !important;
  color: var(--wgra-cream) !important;
}

/* ---------- Forms (Donate, Contact, membership) ---------- */
.gadgetStyleBody input[type=text], .gadgetStyleBody input[type=email],
.gadgetStyleBody input[type=tel], .gadgetStyleBody input[type=number],
.gadgetStyleBody select, .gadgetStyleBody textarea,
.fieldBody input, .fieldBody select, .fieldBody textarea {
  border: 1px solid var(--wgra-line) !important;
  border-radius: var(--wgra-radius) !important;
  background: #fff !important;
  color: var(--wgra-ink) !important;
  padding: 8px 12px !important;
  min-height: 42px;
}
.fieldBody input:focus, .fieldBody select:focus, .fieldBody textarea:focus,
.gadgetStyleBody input:focus, .gadgetStyleBody textarea:focus {
  outline: 3px solid var(--wgra-blue-tint) !important;
  border-color: var(--wgra-blue) !important;
}
.fieldLabel, .fieldLabel label, .captionOuterContainer {
  color: var(--wgra-ink) !important;
  font-weight: 600 !important;
}
.mandatorySymbol, .mandatoryFieldsTitle .mandatorySymbol { color: #B3261E !important; }

/* ---------- Kill theme blue #3F88E8 (inline on placeholders) ---------- */
.WaPlaceHolder[style*="3F88E8" i] { background-color: var(--wgra-blue) !important; }
#id_Footer.WaPlaceHolder, .WaPlaceHolderFooter[style*="3F88E8" i] {
  background-color: var(--wgra-green) !important;
}
.WaPlaceHolder[style*="3F88E8" i] .gadgetStyleBody,
.WaPlaceHolder[style*="3F88E8" i] .gadgetStyleBody p {
  color: #fff !important; text-align: center;
}
.WaPlaceHolder[style*="3F88E8" i] .gadgetStyleBody a { color: #fff !important; }
.loginInner { background-color: var(--wgra-cream) !important; }

/* ---------- Components (use in Custom HTML gadgets) ---------- */
.wgra-content {
  max-width: var(--wgra-measure);
  margin: 0 auto;
  padding: 2rem 1rem;
  font-size: var(--wgra-fs-body);
  line-height: 1.6;
}
.wgra-content img, .gadgetStyleBody img { max-width: 100%; height: auto; }
.wgra-content img.wgra-photo, .gadgetStyleBody img.wgra-photo,
.wgra-gallery img { border-radius: var(--wgra-radius-lg); }

/* Eyebrow above a page title */
.wgra-eyebrow {
  font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--wgra-blue) !important; margin: 0 0 -0.25em;
}
/* Lead paragraph under H1 */
.wgra-lead { font-size: 1.25rem !important; color: var(--wgra-ink) !important; }

/* Callouts: info (blue), notice (sun), success (green) */
.wgra-callout {
  border-left: 4px solid var(--wgra-blue);
  background: var(--wgra-blue-tint);
  border-radius: 0 var(--wgra-radius) var(--wgra-radius) 0;
  padding: 1rem 1.25rem; margin: 1.5rem 0;
}
.wgra-callout--notice { border-color: var(--wgra-sun); background: var(--wgra-sun-tint); }
.wgra-callout--success { border-color: var(--wgra-green); background: #E9F3EC; }
.wgra-callout p:first-child { margin-top: 0; }
.wgra-callout p:last-child { margin-bottom: 0; }

/* Status list (home "Current status") */
.wgra-status-list { list-style: none; padding: 0 !important; }
.wgra-status-list li {
  padding: 0.6rem 0 0.6rem 2rem; position: relative;
  border-bottom: 1px solid var(--wgra-line);
}
.wgra-status-list li::before {
  content: ""; position: absolute; left: 0.4rem; top: 1.05rem;
  width: 10px; height: 10px; border-radius: 50%; background: var(--wgra-leaf);
}

/* Card grid (partner pools, documents, board members) */
.wgra-cards {
  display: grid; gap: 16px; margin: 1.5rem 0; padding: 0; list-style: none;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
.wgra-card {
  background: var(--wgra-sand); border: 1px solid var(--wgra-line);
  border-radius: var(--wgra-radius-lg); padding: 1.1rem 1.25rem;
}
.wgra-card h3 { margin: 0 0 0.35em !important; font-size: 1.125rem !important; }
.wgra-card p { font-size: var(--wgra-fs-small) !important; margin: 0 0 0.75em; }

/* Photo gallery */
.wgra-gallery {
  display: grid; gap: 12px; margin: 1.5rem 0; padding: 0; list-style: none;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
.wgra-gallery li { list-style: none; aspect-ratio: 4 / 3; }
.wgra-gallery img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wgra-caption {
  text-align: center; font-size: var(--wgra-fs-small) !important;
  color: var(--wgra-muted) !important; font-style: normal;
}

/* Video embed 16:9 */
.wgra-video { position: relative; aspect-ratio: 16 / 9; margin: 1.5rem 0; }
.wgra-video iframe, .wgra-video img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  border: 0; border-radius: var(--wgra-radius-lg); object-fit: cover;
}

/* Timeline */
.wgra-timeline { list-style: none; padding: 0 !important; border-left: 3px solid var(--wgra-line); }
.wgra-timeline li { padding: 0 0 1rem 1.25rem; position: relative; }
.wgra-timeline li::before {
  content: ""; position: absolute; left: -8px; top: 0.45rem; width: 13px; height: 13px;
  border-radius: 50%; background: var(--wgra-cream); border: 3px solid var(--wgra-green);
}
.wgra-timeline li.is-current::before { background: var(--wgra-green); }
.wgra-timeline strong { display: block; color: var(--wgra-green); }

/* FAQ */
.wgra-content details, .gadgetStyleBody details {
  border-bottom: 1px solid var(--wgra-line); padding: 0.9rem 0;
}
.wgra-content summary, .gadgetStyleBody summary {
  cursor: pointer; font-weight: 600; color: var(--wgra-ink) !important;
}
.wgra-content details p { font-size: 1rem !important; }

/* Divider */
.wgra-content hr, .gadgetStyleBody hr {
  border: none; border-top: 1px solid var(--wgra-line);
  max-width: none; margin: 2.5rem 0;
}

/* Sign-off */
.wgra-signoff { color: var(--wgra-muted) !important; font-style: italic; }

/* ---------- Header / menu ---------- */
#id_Header1, .WaPlaceHolderHeader1 { background-color: var(--wgra-green) !important; }
.WaGadgetMenuHorizontal, .WaGadgetMenuHorizontal .menuInner,
.WaGadgetMenuHorizontal ul.firstLevel, #idHeaderMenu, .zoneHeaderMenu,
.WaGadgetMenuHorizontal .menuBackground, .stickyMenu .menuBackground {
  background-color: var(--wgra-green) !important;
}
.WaGadgetMenuHorizontal ul.firstLevel > li > a,
.WaGadgetMenuHorizontal ul.firstLevel > li > .item > a {
  color: var(--wgra-cream) !important;
  font: 600 0.875rem/1 var(--wgra-font) !important;
  letter-spacing: 0.04em;
  text-transform: uppercase !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: var(--wgra-green-dark) !important;
  color: var(--wgra-cream) !important;
}
.WaGadgetMenuHorizontal ul.secondLevel, .WaGadgetMenuHorizontal ul.thirdLevel {
  background-color: var(--wgra-cream) !important;
}
.WaGadgetMenuHorizontal ul.secondLevel a, .WaGadgetMenuHorizontal ul.thirdLevel a {
  color: var(--wgra-ink) !important;
}
.WaGadgetMenuHorizontal ul.secondLevel li:hover > a {
  background-color: var(--wgra-green) !important; color: var(--wgra-cream) !important;
}

/* Mobile panel */
.mobilePanel, .WaGadgetMobilePanel .mobilePanel,
.mobilePanel .menuInner, .mobilePanel ul.firstLevel, .mobilePanel ul.secondLevel,
.mobilePanel .mobilePanelButton.buttonMenu {
  background-color: var(--wgra-green) !important;
}
.mobilePanel .mobilePanelButton, .mobilePanel a,
.mobilePanel ul.firstLevel > li > a, .mobilePanel ul.firstLevel > li > .item > a,
.mobilePanel ul.secondLevel a, .mobilePanel .buttonLogin, .mobilePanel .buttonLogin:before {
  color: var(--wgra-cream) !important;
}
.mobilePanel .buttonLogin svg, .mobilePanel .buttonLogin svg path { fill: var(--wgra-cream) !important; }

/* ---------- Login gadget (unchanged from v3, tokenized) ---------- */
.WaGadgetLoginButton a, .WaGadgetLoginButton .loginContainer a {
  background: var(--wgra-green) !important; color: var(--wgra-cream) !important;
  border: none !important; border-radius: var(--wgra-radius) !important;
  font: 600 0.875rem/1 var(--wgra-font) !important; letter-spacing: 0.04em;
  text-transform: uppercase !important; text-decoration: none !important;
}
.WaGadgetLoginButton a:hover { background: var(--wgra-green-dark) !important; }
.WaGadgetLoginButton a.loginLink:not([href]) {
  background: transparent !important; color: var(--wgra-green) !important; box-shadow: none !important;
}
.WaGadgetLoginButton a.loginLink:not([href]) svg,
.WaGadgetLoginButton a.loginLink:not([href]) svg path { fill: var(--wgra-green) !important; }
.WaGadgetLoginButton .profileBox a {
  background: transparent !important; color: var(--wgra-green) !important;
  border: none !important; box-shadow: none !important; text-shadow: none !important;
  padding: 0 !important; border-radius: 0 !important; font-weight: 400 !important;
  text-transform: none !important; text-decoration: underline !important; display: inline !important;
}
input[type=submit].loginBoxLogout, .loginBoxLogout, .loginBoxLogout:hover {
  background: transparent !important; color: var(--wgra-green) !important;
  border: none !important; border-radius: 0 !important; box-shadow: none !important;
  padding: 0 !important; font-weight: 400 !important; text-decoration: underline !important;
}

/* ---------- Social + footer ---------- */
.WaGadgetSocialProfile a, .WaGadgetSocialProfile a:before { color: var(--wgra-green) !important; }
.WaGadgetSocialProfile svg, .WaGadgetSocialProfile svg path { fill: var(--wgra-green) !important; }
#idFooterWrapper, .zoneFooter, .WaLayoutFooterContainer,
#id_Footer1, .WaPlaceHolderFooter1 {
  background-color: var(--wgra-cream) !important;
  color: var(--wgra-ink) !important; border-top: none !important;
}
.zoneFooter p, .zoneFooter .gadgetStyleBody p {
  font-size: var(--wgra-fs-small) !important; color: var(--wgra-muted) !important;
}

/* ============================================================
   EDITOR STYLES (v5)
   Remaps what the Wild Apricot content editor offers, so a
   volunteer clicking buttons gets brand results. The theme's own
   versions were lime green, orange and pink.
   ============================================================ */

/* Link → "Button style" dropdown
   Style 1 = primary (green)   Style 2 = secondary (green outline)
   Style 3 = Pool Blue         Styles 4–5 = same as 2 (safety net) */
a.buttonStyle001, a:link.buttonStyle001, a:visited.buttonStyle001,
a.buttonStyle002, a:link.buttonStyle002, a:visited.buttonStyle002,
a.buttonStyle003, a:link.buttonStyle003, a:visited.buttonStyle003,
a.buttonStyle004, a:link.buttonStyle004, a:visited.buttonStyle004,
a.buttonStyle005, a:link.buttonStyle005, a:visited.buttonStyle005 {
  display: inline-block !important;
  min-width: 0 !important;
  margin: 0.25rem 0.5rem 0.25rem 0 !important;
  padding: 12px 22px !important;
  border-radius: var(--wgra-radius) !important;
  font: 600 1rem/1.2 var(--wgra-font) !important;
  text-transform: none !important;
  text-decoration: none !important;
  white-space: normal !important;
  box-shadow: none !important;
  background: var(--wgra-green) !important;
  color: var(--wgra-cream) !important;
  border: 2px solid var(--wgra-green) !important;
}
a.buttonStyle002, a:link.buttonStyle002, a:visited.buttonStyle002,
a.buttonStyle004, a:link.buttonStyle004, a:visited.buttonStyle004,
a.buttonStyle005, a:link.buttonStyle005, a:visited.buttonStyle005 {
  background: transparent !important;
  color: var(--wgra-green) !important;
}
a.buttonStyle003, a:link.buttonStyle003, a:visited.buttonStyle003 {
  background: var(--wgra-blue) !important;
  border-color: var(--wgra-blue) !important;
  color: #fff !important;
}
a.buttonStyle001:hover, a.buttonStyle002:hover, a.buttonStyle004:hover,
a.buttonStyle005:hover {
  background: var(--wgra-green-dark) !important;
  border-color: var(--wgra-green-dark) !important;
  color: var(--wgra-cream) !important;
}
a.buttonStyle003:hover { background: #095A90 !important; border-color: #095A90 !important; }

/* Text style "Quoted" = notice callout (replaces ⚠️ + ALL CAPS) */
.quotedText, .gadgetStyleBody .quotedText {
  margin: 1.5rem 0 !important;
  padding: 1rem 1.25rem !important;
  background: var(--wgra-sun-tint) !important;
  border-left: 4px solid var(--wgra-sun) !important;
  border-radius: 0 var(--wgra-radius) var(--wgra-radius) 0;
  color: var(--wgra-ink) !important;
  font: 400 var(--wgra-fs-body)/1.6 var(--wgra-font) !important;
  font-style: normal !important;
}

/* Text styles "Caption" and "Smaller" */
.contStyleCaption, .gadgetStyleBody .contStyleCaption {
  color: var(--wgra-muted) !important;
  font: 400 var(--wgra-fs-small)/1.5 var(--wgra-font) !important;
  font-style: normal !important;
}
.contStyleSmaller, .gadgetStyleBody .contStyleSmaller {
  color: var(--wgra-ink) !important;
  font: 400 var(--wgra-fs-small)/1.55 var(--wgra-font) !important;
}

/* Divider (Insert → Divider, any style) = one thin rule */
.WaContentDivider, .WaContentDivider[class*="dividerStyle"] {
  height: 0 !important;
  background: none !important;
  border: none !important;
  border-top: 1px solid var(--wgra-line) !important;
  margin: 2.5rem 0 !important;
}

/* Gadget settings → Style 2 = Pool Blue band (for an announcement strip) */
.gadgetStyle002 {
  background: var(--wgra-blue) !important;
  color: #fff !important;
  font-family: var(--wgra-font) !important;
  border-radius: var(--wgra-radius-lg);
  padding: 1.25rem 1.5rem !important;
}
.gadgetStyle002 .gadgetStyleBody, .gadgetStyle002 p, .gadgetStyle002 li,
.gadgetStyle002 h1, .gadgetStyle002 h2, .gadgetStyle002 h3, .gadgetStyle002 h4,
.gadgetStyle002 .gadgetStyleTitle h4, .gadgetStyle002 a,
.gadgetStyle002 .contStyleCaption, .gadgetStyle002 .contStyleSmaller {
  color: #fff !important;
  font-family: var(--wgra-font) !important;
}
.gadgetStyle002 a.buttonStyle001, .gadgetStyle002 a.buttonStyle002 {
  background: #fff !important; border-color: #fff !important; color: var(--wgra-blue) !important;
}

/* Gadget title bar (when a volunteer fills in a gadget "Title") = H2 */
.gadgetStyleTitle h4, .gadgetStyleNone .gadgetStyleTitle h4 {
  font: 700 var(--wgra-fs-h2)/1.2 var(--wgra-font) !important;
  color: var(--wgra-green) !important;
  text-transform: none !important;
  margin: 1.6em 0 0.5em !important;
}

/* Pictures inserted into Content gadgets: rounded, full width */
.WaGadgetContent .gadgetStyleBody img:not([src*="Branding"]) {
  border-radius: var(--wgra-radius-lg);
}

/* Slideshow + Photo album gadgets (replace hand-coded galleries) */
.WaGadgetSlideshow, .WaGadgetSlideshow .slidesContainer,
.WaGadgetSlideshow img, .WaGadgetPhotoAlbum img {
  border-radius: var(--wgra-radius-lg);
}
.WaGadgetSlideshow .caption, .WaGadgetSlideshow .slideCaption {
  font-family: var(--wgra-font) !important;
}