/* Legibility fixes (2026-10-26), loaded on every page (site.config.mjs customize).
   The theme's accent cyan #00bcd4 is too light behind white text (2.2:1); #00838f is the same
   hue at 4.5:1, and #00707a is used for text and outlines on white. */

/* Buttons the theme draws white text on a white button ("See More", the footer's "Donate …"),
   plus the others, so they all match: white with dark cyan text, filled on hover. */
.ffb-btn.btn-base-brd-slide { color: #00707a !important; background-color: #fff !important; border-color: #00707a !important; }
.ffb-btn.btn-base-brd-slide * { color: inherit !important; }
.ffb-btn.btn-base-brd-slide:hover,
.ffb-btn.btn-base-brd-slide:focus-visible { color: #fff !important; background-color: #00707a !important; border-color: #fff !important; }


/* The light cyan behind white text, darkened ("How We Help" boxes, page bands). */
.fg-bg-layer[style*="#00bcd4"],
.ffb-id-h8deal9 { background-color: #00838f !important; }
/* The testimonial beside the teddy bear was set to white text on a white panel. */
.ffb-id-ha9s74s > .fg-bg > .fg-bg-layer { background-color: #00838f !important; }

/* Cyan text on white: "Our Mission", "See More...", the menu's current page and hover. */
.heading-v1 .heading-v1-Section a, .heading-v1 .heading-v1-subtitle a { color: #00707a !important; }
body .ffb-id-navigation-header .ark-header .menu-container > ul > li.active > a.nav-item-child,
body .ffb-id-navigation-header .ark-header .menu-container > ul > li.current-menu-item > a.nav-item-child,
body .ffb-id-navigation-header .ark-header .menu-container > ul > li.current-menu-ancestor > a.nav-item-child,
body .ffb-id-navigation-header .ark-header .menu-container > ul > li:hover > a.nav-item-child,
body .header .navbar-nav .nav-item-child:hover,
body .header .navbar-nav .nav-item-child:focus { color: #00707a !important; }

/* The top bar took its height from social icons that linked nowhere (removed); the theme's
   script places the menu under the bar as it now is, so the Donate Now button is made to fit it. */
.ark-topbar .ffb-btn { margin: 7px 0 !important; padding-top: 6px !important; padding-bottom: 6px !important; }

/* Page titles and Ask the Rabbi's questions, in white on the pale rainbow banner: dark instead. */
section:has(> .fg-bg > .fg-bg-layer[style*="rainbow_texture"]) :is(h1.fg-heading, h2.heading-v1-title),
section:has(> .fg-bg > .fg-bg-layer[style*="rainbow_texture"]) :is(h1.fg-heading, h2.heading-v1-title) * { color: #34343c !important; }
/* Page titles in white over a photo washed out with white ("Ask the Rabbi...", "Insights into...",
   "Events and Programs", "We can only do this with your help"): wash it with black instead. On
   phones the photo is hidden and the wash alone is the background. */
section:has(> .fg-bg > .fg-bg-type-image):has(> .fg-bg > .fg-bg-type-color[style*="#ffffff"]):not(:has(> .fg-bg > [style*="rainbow_texture"])) > .fg-bg > .fg-bg-type-color { background-color: #000 !important; opacity: .45 !important; }

/* Get Involved: "Donate Money", "Every bit makes a difference..." and "Donate Time" were white
   titles on white, with white text below; they get Donate Material's title bar, and the text
   in the white panels is dark. */
.ffb-id-2maokerl > .fg-bg > .fg-bg-layer,
.ffb-id-2mav5nev > .fg-bg > .fg-bg-layer,
.ffb-id-2mav1hnh > .fg-bg > .fg-bg-layer { background-color: #00838f !important; }
body .ffb-id-2m10rh50 .fg-col *:not(h3):not(h3 *) { color: #34343c !important; }

/* Events: the event title in light cyan on white. */
body .ffb-id-13el7eue, body .ffb-id-13el7eue * { color: #00707a !important; }

/* A divider line wider than a phone screen. */
.divider-custom-line { max-width: 100%; }