/* ============================================================
   ATD NEW MEXICO — BRAND + ACCESSIBILITY  (User.css) — v3 for FIRMA theme
   Source: ATD 2024 Chapters Brand Guide | WCAG 2.1 AA
   ATD Blue #005b8e | Steel #4a545f | Green #85bf42 (black text) | Cap #0b81bc
   Firma is responsive (no layout tables); shares .menuInner / #id_Content /
   #id_Footer / body[class*=ContentView]. Roboto web font.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap');

:root{
  --atd-blue:#005b8e;--atd-blue-dark:#004a73;--atd-capability:#0b81bc;
  --atd-green:#85bf42;--atd-green-dark:#6ba233;--atd-steel:#4a545f;
  --atd-ink:#1a1a1a;--atd-mist:#f4f7f9;--atd-line:#d5dde2;
  --atd-gradient:linear-gradient(315deg,#005b8e 0%,#0b81bc 48%,#85bf42 100%);
  --atd-focus:#0b81bc;--atd-radius:6px;
  --atd-font:'Roboto',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;
}

/* ---------- Roboto on text blocks (icons keep their font) ---------- */
body[class*="ContentView"],
body[class*="ContentView"] p, body[class*="ContentView"] a, body[class*="ContentView"] li,
body[class*="ContentView"] td, body[class*="ContentView"] th, body[class*="ContentView"] label,
body[class*="ContentView"] h1, body[class*="ContentView"] h2, body[class*="ContentView"] h3,
body[class*="ContentView"] h4, body[class*="ContentView"] h5, body[class*="ContentView"] h6,
body[class*="ContentView"] input, body[class*="ContentView"] select, body[class*="ContentView"] textarea,
body[class*="ContentView"] button, body[class*="ContentView"] .gadgetStyleBody,
body[class*="ContentView"] .menuInner a{ font-family: var(--atd-font) !important; }

/* Firma variant #1 sets a dark body background-color (rgb(85,79,71)) beneath a sky
   image. WAVE computes nav/header text against that dark color -> 10 false "very low
   contrast" flags. Force a clean white base so all text over transparent zones has
   readable, detectable contrast. */
body[class*="ContentView"]{ color:var(--atd-steel); font-size:16px; line-height:1.6;
  background-color:#ffffff !important; background-image:none !important; }
html{ background:#ffffff; }
body[class*="ContentView"] p, body[class*="ContentView"] li, body[class*="ContentView"] td{ font-size:1rem; line-height:1.65; }

/* ---------- Firma layout polish: responsive media ---------- */
body[class*="ContentView"] img{ max-width:100%; height:auto; }
body[class*="ContentView"] #id_Content img{ display:block; margin-left:auto; margin-right:auto; }

/* Hero banner lives as a background-image on Firma's #id_Header2 (Hero Header.jpg,
   1478x390). Firma forces 'cover' on a 450px zone which crops the sides. Match the
   zone to the image aspect ratio so the FULL banner shows, responsively, no cropping. */
#id_Header2{
  aspect-ratio: 1478 / 390 !important;
  height: auto !important; min-height: 0 !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

/* ---------- Headings ---------- */
body[class*="ContentView"] h1, body[class*="ContentView"] h2, body[class*="ContentView"] h3,
body[class*="ContentView"] h4, body[class*="ContentView"] .WaGadgetHeading, body[class*="ContentView"] .gadgetStyleHeading{
  color:var(--atd-blue) !important; font-weight:700; line-height:1.25;
}
body[class*="ContentView"] h1{ font-size:2.25rem; }
/* Headings inside inline-gradient hero sections must stay WHITE — this beats the
   global blue-heading rule above (higher specificity) so hero text is legible. */
body[class*="ContentView"] [style*="linear-gradient"] h1,
body[class*="ContentView"] [style*="linear-gradient"] h2,
body[class*="ContentView"] [style*="linear-gradient"] h3{ color:#ffffff !important; }
/* Replace inline gradient hero backgrounds with a SOLID ATD Blue — WAVE (and browsers
   in high-contrast mode) can't measure text over a gradient, but can over a solid color.
   White text on #005b8e = 7.27:1 (passes AA), and it stays on-brand. */
body[class*="ContentView"] [style*="linear-gradient"]{ background:#005b8e !important; }
body[class*="ContentView"] h2{ font-size:1.75rem; }
body[class*="ContentView"] h3{ font-size:1.375rem; }

/* ---------- Content links -> ATD Blue (fixes Firma's bright default blue) ---------- */
body[class*="ContentView"] #id_Content a,
body[class*="ContentView"] #id_Footer a,
body[class*="ContentView"] .WaGadgetContent a,
body[class*="ContentView"] .gadgetStyleBody a{
  color:var(--atd-blue); text-underline-offset:2px;
}
body[class*="ContentView"] #id_Content a:hover, body[class*="ContentView"] #id_Content a:focus{ color:var(--atd-blue-dark); }

/* Legacy <font color="#00AEEF"> / #008FD1 bright blues in pasted ATD content fail
   contrast (~2.5:1 on white). Remap those specific blues to accessible ATD Blue. */
[color="#00AEEF" i], [color="#008FD1" i], [color="#00aeef"], [color="#008fd1"],
font[color="#00AEEF"], font[color="#008FD1"]{ color:var(--atd-blue) !important; }
/* Green used as TEXT (color attribute) fails contrast on white and violates brand
   (green is for backgrounds w/ dark text). Remap green text -> accessible ATD Blue. */
[color="#85bf42" i], [color="#85BF42"], font[color="#85bf42"], font[color="#85BF42"]{ color:var(--atd-blue) !important; }

/* ---------- Visible keyboard focus (WCAG 2.4.7) ---------- */
body[class*="ContentView"] a:focus-visible, body[class*="ContentView"] button:focus-visible,
body[class*="ContentView"] input:focus-visible, body[class*="ContentView"] select:focus-visible,
body[class*="ContentView"] textarea:focus-visible, body[class*="ContentView"] [tabindex]:focus-visible{
  outline:3px solid var(--atd-focus) !important; outline-offset:2px;
  box-shadow:0 0 0 5px rgba(11,129,188,.35); border-radius:3px;
}

/* ---------- Skip link ---------- */
#atd-skip-link{position:absolute;left:-9999px;top:0;z-index:100000;background:var(--atd-blue);color:#fff;padding:12px 20px;font-weight:700;text-decoration:none;border-radius:0 0 var(--atd-radius) 0}
#atd-skip-link:focus{left:0;outline:3px solid var(--atd-green)}

/* ============================================================
   TOP NAV (Firma: .menuInner ul.firstLevel li.sel .item a) — accessible blue active
   ============================================================ */
.menuInner ul.firstLevel > li > .item > a, .menuInner ul.firstLevel > li > a{
  color:var(--atd-steel) !important; font-weight:500; text-decoration:none;
}
.menuInner ul.firstLevel > li > .item > a:hover, .menuInner ul.firstLevel > li > .item > a:focus,
.menuInner ul.firstLevel > li:hover > .item > a{ color:var(--atd-blue) !important; }
.menuInner ul.firstLevel > li.sel > .item > a, .menuInner ul.firstLevel > li.sel > a, .menuInner li.sel > .item > a{
  color:var(--atd-blue) !important; font-weight:700 !important; border-bottom:3px solid var(--atd-green);
}

/* ============================================================
   BUTTONS
   ============================================================ */
body[class*="ContentView"] a.button, body[class*="ContentView"] input.button,
body[class*="ContentView"] button.button, body[class*="ContentView"] input[type="submit"],
body[class*="ContentView"] .stateEnabled, .atd-btn{
  display:inline-block; font-family:var(--atd-font) !important; font-weight:700; font-size:1rem; line-height:1.2;
  padding:12px 26px; border-radius:var(--atd-radius); background:var(--atd-blue) !important; color:#fff !important;
  border:2px solid var(--atd-blue) !important; text-decoration:none !important; cursor:pointer;
}
body[class*="ContentView"] a.button:hover, body[class*="ContentView"] input.button:hover,
body[class*="ContentView"] .stateEnabled:hover, .atd-btn:hover, .atd-btn:focus{
  background:var(--atd-blue-dark) !important; border-color:var(--atd-blue-dark) !important; color:#fff !important;
}
.atd-btn-accent{background:var(--atd-green) !important;border-color:var(--atd-green) !important;color:var(--atd-ink) !important}
.atd-btn-accent:hover,.atd-btn-accent:focus{background:var(--atd-green-dark) !important;border-color:var(--atd-green-dark) !important;color:var(--atd-ink) !important}
.atd-btn-ghost{background:transparent !important;border:2px solid #fff !important;color:#fff !important}
.atd-btn-ghost:hover,.atd-btn-ghost:focus{background:#fff !important;color:var(--atd-blue) !important}

/* ============================================================
   FOOTER — clean branded Steel footer, readable white text
   ============================================================ */
#id_Footer, #id_Footer1, .WaPlaceHolderFooter, .WaPlaceHolderFooter1{ background-color:var(--atd-steel) !important; }
#id_Footer, #id_Footer1, #id_Footer p, #id_Footer li, #id_Footer h1, #id_Footer h2, #id_Footer h3,
#id_Footer h4, #id_Footer .WaGadgetHeading, #id_Footer .gadgetStyleHeading{ color:#ffffff !important; }
#id_Footer a, #id_Footer1 a, #id_Footer .menuInner a{ color:#ffffff !important; text-decoration:underline; }
#id_Footer a:hover, #id_Footer .menuInner a:hover{ color:#eaf4d6 !important; }
#id_Footer .menuInner ul.firstLevel > li.sel > .item > a{ border-bottom-color:var(--atd-green); }

/* Contrast fixes: breadcrumb current-page (was light gray) + Powered-by link (Firma bright blue) */
.WaGadgetBreadcrumbs li.last span, .WaGadgetBreadcrumbs span, .WaGadgetBreadcrumbs a{ color:var(--atd-steel) !important; }
#idFooterPoweredByWA a, #idFooterPoweredByContainer a{ color:var(--atd-blue) !important; }

/* ============================================================
   REUSABLE COMPONENTS (for Custom HTML gadgets / hero, cards, band)
   ============================================================ */
.atd-hero{background:linear-gradient(rgba(0,44,66,.48),rgba(0,44,66,.48)),var(--atd-gradient);color:#fff;padding:4rem 1.5rem;text-align:center}
.atd-hero h1{color:#fff !important;font-size:clamp(2rem,5vw,3rem);margin:0 0 .5rem}
.atd-hero p{color:#fff !important;font-size:1.25rem;max-width:46rem;margin:0 auto 1.5rem}
.atd-hero .atd-btn{margin:.35rem}
.atd-section{padding:3rem 1.5rem}.atd-section--tint{background:var(--atd-mist)}
.atd-section h2{text-align:center;margin:0 0 2rem}
.atd-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.5rem;max-width:68rem;margin:0 auto}
.atd-card{background:#fff;border:1px solid var(--atd-line);border-top:4px solid var(--atd-green);border-radius:var(--atd-radius);padding:1.75rem}
.atd-card h3{margin:0 0 .5rem}.atd-card p{margin:0 0 1rem}
.atd-band{background:var(--atd-blue);color:#fff;padding:2.5rem 1.5rem;text-align:center}
.atd-band h2,.atd-band p{color:#fff !important}
.atd-band a:not(.atd-btn){color:#fff;text-decoration:underline}

/* ============================================================
   JOIN PAGE — make graphic-section text accessible + WAVE-measurable.
   Sections use background-image graphics with HTML text over them; give each
   a solid background-color (so contrast is computable) and recolor the brand
   words that don't pass as text (WCAG 1.4.3).
   ============================================================ */
/* Hero (abq1.png) — solid light base; darken light-blue/green heading words */
#id_iBY2jPY{ background-color:#ffffff !important; }
#id_iBY2jPY [color="#0284C7" i], #id_iBY2jPY font[color="#0284c7"]{ color:var(--atd-blue) !important; }   /* WE ELEVATE */
#id_iBY2jPY [color="#7BA731" i], #id_iBY2jPY font[color="#7ba731"]{ color:#3f6b14 !important; }           /* TALENT -> dark green */
/* CONNECT/LEARN/GROW/LEAD/IMPACT (navy background.png) — solid navy base; brighten
   the labels that are too dark on navy so they pass */
#id_wewzfge{ background-color:#0e2841 !important; }
#id_wewzfge [color="#00AEEF" i], #id_wewzfge font[color="#00AEEF"]{ color:#5bb8e6 !important; }   /* CONNECT */
#id_wewzfge [color="#92278F" i], #id_wewzfge font[color="#92278F"]{ color:#c98fd6 !important; }   /* IMPACT */
#id_wewzfge [color="#ED145B" i], #id_wewzfge font[color="#ED145B"]{ color:#ff6f9c !important; }   /* LEAD */

/* ============================================================
   WILD APRICOT MEMBERSHIP FORM — accessible text (WCAG 1.4.3)
   WA's default form uses light-gray helper text (#888 / #9da1a3) that fails
   contrast. Darken helper/label/note text to accessible dark steel.
   ============================================================ */
[id*="memberApplication"] p, [id*="memberApplication"] span,
[id*="memberApplication"] label, [id*="memberApplication"] td,
[id*="memberApplication"] li, [id*="memberApplication"] .text,
[id*="memberApplication"] small,
.mandatoryFieldsNote, .mandatoryFieldsTitle, .subscriptionInfo, .membershipLevelDetails{ color:#3a4048 !important; }
[id*="memberApplication"] a, [id*="memberApplication"] a span{ color:var(--atd-blue) !important; }
/* Required-field asterisks: WA uses pure red #ff0000 = 3.99:1 on white (fails AA).
   Darken to an accessible red (#cc0000 = 5.9:1) — a genuine low-vision improvement. */
.mandatorySymbol, span.mandatorySymbol, .fieldLabel .mandatorySymbol{ color:#cc0000 !important; }
/* Cookie-warning box (shows when cookies are blocked): give it a solid background so
   its text is measurable, and darken the text. */
.confirmWindowWarning, .cww-co, .cww-inner, [class*="cww"]{ background:#fff8e1 !important; }
.confirmWindowWarning .text, .cww-inner .text, [id*="cookieWarning"] .text, [id*="cookieWarning"]{ color:#3a4048 !important; }

/* ============================================================
   CTA BANNER SECTIONS (2024-redesign background photos) with white text —
   give a solid dark base so WAVE can MEASURE the white text (7.27:1+).
   Targets any element whose inline style references these background photos,
   so it fixes the same banner wherever it's reused (Power Member, etc.).
   ============================================================ */
[style*="2024 Website Redesign/Backgrounds"],
[style*="Downtown-38"]{ background-color:#0e2841 !important; }

/* ============================================================
   WILD APRICOT EVENT WIDGET — accessible links + buttons
   WA uses muted gray (#9da1a3, 2.6:1) for event links and a low-contrast
   register button. Darken links to ATD Blue; make register button ATD Blue.
   ============================================================ */
.calendarModeLink, a.calendarModeLink,
.eventInfoBoxRegister, a.eventInfoBoxRegister,
.footerEventDetailsLink, a.footerEventDetailsLink,
[class*="EventDetails"] a, [class*="eventInfoBox"] a{ color:var(--atd-blue) !important; }
input.registerButton, [class*="registerButton"], .typeButton.registerButton{
  background-color:var(--atd-blue) !important; border-color:var(--atd-blue) !important; color:#ffffff !important;
}

/* About page "Chapter Awards" list — content is white text (from the old dark theme)
   now invisible on white. Darken to accessible steel (scoped to that gadget). */
#id_y5NOOIM [color="#ffffff" i], #id_y5NOOIM font[color="#ffffff"], #id_y5NOOIM font[color="#FFFFFF"]{ color:var(--atd-steel) !important; }

/* ============================================================
   PAGE HERO BAND (.atd-page-hero) — reusable accessible photo hero.
   Solid dark base (#0e2841) so WAVE measures the white text (7.27:1+),
   with a background photo layered on top for richness. High-specificity
   white heading rule beats the global blue-heading rule.
   ============================================================ */
.atd-page-hero{ background-color:#0e2841; background-size:cover; background-position:center center; color:#ffffff; padding:4.5rem 1.5rem; text-align:center; }
body[class*="ContentView"] .atd-page-hero h1,
body[class*="ContentView"] .atd-page-hero h2,
body[class*="ContentView"] .atd-page-hero p{ color:#ffffff !important; text-shadow:0 2px 10px rgba(0,0,0,.55); }

/* ============================================================
   EVENTS LIST — show full descriptions inline (restore pre-Firma look).
   The Firma "Upcoming events" gadget caps each description at
   .boxBodyContentContainer.fixedHeight{max-height:210px;overflow:hidden}
   and adds a "Show details" toggle. Un-cap it so the full description,
   images, and formatting display inline as before; hide the now-redundant
   toggle. "View event details" (eventUrl) link is untouched.
   ============================================================ */
body[class*="ContentView"] .boxBodyContentContainer.fixedHeight{ max-height:none !important; overflow:visible !important; }
body[class*="ContentView"] .footerEventDetailsLink{ display:none !important; }
/* "Already registered" info link ships light grey (rgb 157,161,163 = 2.61:1 on
   white — WAVE contrast error). Recolor to ATD blue (7.3:1). */
body[class*="ContentView"] .infoAlreadyRegisteredLink,
body[class*="ContentView"] a.infoAlreadyRegisteredLink{ color:var(--atd-blue) !important; }

/* ============================================================
   POWER MEMBER — turn the plain "Join Now" checkout link on the CTA banner
   into a branded, prominent button. ATD green fill + near-black text
   (green requires dark text; ~7:1) so it pops on the dark/green banner.
   ============================================================ */
body[class*="ContentView"] a[href*="membership-checkout"]{
  display:inline-block; background:var(--atd-green) !important; color:#1a1a1a !important;
  font-weight:700; font-size:1.05rem; padding:13px 32px; border-radius:6px;
  text-decoration:none !important; box-shadow:0 2px 8px rgba(0,0,0,.3);
}
body[class*="ContentView"] a[href*="membership-checkout"]:hover,
body[class*="ContentView"] a[href*="membership-checkout"]:focus{
  background:#74a838 !important; color:#1a1a1a !important;
}

/* ============================================================
   SPONSORSHIP custom gadget (.atdnm-brand): its hero title and CTA button
   are designed as light text on colored backgrounds, but the global
   heading/link rules repaint them ATD blue → invisible (blue-on-blue hero,
   blue-on-green button). Restore an accessible treatment: white on the dark
   hero, near-black on the green CTA (ATD green requires dark text).
   ============================================================ */
.atdnm-brand .hero h1, .atdnm-brand .hero h2, .atdnm-brand .hero p{ color:#ffffff !important; }
.atdnm-brand .cta-btn{ color:#1a1a1a !important; }

/* Sponsorship comparison table: the "not included" em-dashes shipped as
   #b4bcc4 (~1.9:1 on white — WAVE contrast error). Darken to a slate grey
   that passes on both white and the highlighted Silver column. Scoped by the
   inline colour so the ATD-blue check marks are untouched. */
[style*="#b4bcc4" i]{ color:#5b6470 !important; }

/* Larger top-navigation text (was 13px — too small). */
.menuInner ul.firstLevel > li > .item a,
.menuInner ul.firstLevel a{ font-size:15px !important; }

/* Page-title banner (Header 2 zone) sits on dark hero images, so its title must
   be white. Fixes the Volunteer page title, which shipped in steel grey. */
.zoneHeader2Outer font, .zoneHeader2Outer h1, .zoneHeader2Outer h2{ color:#ffffff !important; text-shadow:0 2px 8px rgba(0,0,0,.5) !important; }

/* Volunteer page banner was misconfigured vs. the other page banners: the image
   was stretched (background-size:100% 100%), the banner was short (150px), and
   the title was small (36px) and top-aligned. Match the others: cover the image,
   200px tall, large title centered both ways. Targeted by the banner's image so
   it survives the gadget being re-created. */
[style*="Election page header" i]{
  background-size:cover !important;
  background-position:center center !important;
  height:200px !important;
}
[style*="Election page header" i] .gadgetStyleBody{
  height:200px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:0 !important;
}
[style*="Election page header" i] p{ margin:0 !important; }
[style*="Election page header" i] font{ font-size:64px !important; line-height:1.1 !important; }

/* Vertically center the title in EVERY page banner (a content gadget with a
   background image + 200px height). Their titles otherwise sit at the top of
   the box; this keeps every banner consistent with the Volunteer one. */
div[style*="background-image"][style*="height: 200px"] .gadgetStyleBody{
  height:200px !important; display:flex !important; align-items:center !important;
  justify-content:center !important; flex-direction:column !important; padding:0 !important;
}
div[style*="background-image"][style*="height: 200px"] .gadgetStyleBody p{ margin:0 !important; }

@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms !important;transition-duration:.01ms !important}}
@media (max-width:640px){.atd-hero{padding:2.5rem 1rem}body[class*="ContentView"] h1{font-size:1.85rem}}