.grecaptcha-badge {
	visibility: hidden;
}

/* "Matching Gifts" sits in the persistent top bar (div_block-14) alongside
   the hamburger, Donate and Login -- it isn't part of the collapsible nav
   list, so it never hides on its own. Below 767px there isn't room for all
   four: the row (justify-content:flex-end) overflows and pushes the
   hamburger button off-screen to the left instead of wrapping, which is
   what made the mobile menu look "broken" -- it was still there, just
   scrolled out of view. Hiding this link on narrow screens is the fix. */
@media (max-width: 767px) {
	#sos-matching-gifts-link {
		display: none !important;
	}
}

/* Nav dropdowns (About, Programs, Careers): the migrated site uses Oxygen's
   "Pro Menu" component, whose show/hide JS wasn't ported over. The sub-menu
   markup and hover CSS variables were already in place, just never switched
   to visible. Opens on click of the arrow (see site_header.blade.php script),
   not hover -- .dropdown-open is toggled by that script. */
.oxy-pro-menu .menu-item-has-children.dropdown-open > .sub-menu {
	visibility: visible !important;
	opacity: 1 !important;
	pointer-events: auto !important;
}
/* Inside the mobile drawer the sub-menu is forced display:none at rest
   (see universal.css's off-canvas rules) with no matching "open" state of
   its own -- the dropdown-open toggle above only ever handled the desktop
   floating card, so mobile submenus never actually appeared. */
.oxy-pro-menu-off-canvas-container .menu-item-has-children.dropdown-open > .sub-menu {
	display: flex !important;
}
.oxy-pro-menu .sub-menu {
	background: #fff;
	border-radius: 8px;
	box-shadow: 0 8px 24px rgba(20, 37, 79, .18);
	padding: 8px 0 !important;
	min-width: 200px;
	z-index: 1000;
}
.oxy-pro-menu .sub-menu .menu-item > a {
	color: #14254f;
	padding: 9px 18px;
	display: block;
	white-space: nowrap;
}
.oxy-pro-menu .sub-menu .menu-item > a:hover {
	background: #f0f4fb;
}

.oxy-pro-menu .menu-item-has-children {
	display: inline-flex;
	align-items: center;
}
.oxy-pro-menu .dropdown-toggle {
	background: none;
	border: 0;
	padding: 4px;
	margin-left: 4px;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: inherit;
}
.oxy-pro-menu .dropdown-toggle svg {
	width: 10px;
	height: 10px;
	fill: currentColor;
	transition: transform .2s ease;
}
.oxy-pro-menu .menu-item-has-children.dropdown-open .dropdown-toggle svg {
	transform: rotate(180deg);
}

/* Smaller top-level nav font so the desktop menu takes up less horizontal
   space. The mobile drawer reuses this same <ul>, so it's deliberately
   scoped away from .oxy-pro-menu-off-canvas-container below -- a compact
   horizontal bar and a full-height drawer call for very different scale. */
.oxy-pro-menu-list > .menu-item > a {
	font-size: 11.5px !important;
}

/* ============================================================
   Mobile navigation drawer
   The desktop 11.5px above was leaking into this panel, turning the
   site's primary navigation into fine print on the one surface with
   the most room to breathe. Rebuilt as its own thing: a left-aligned,
   oversized editorial stack, a teal tick that draws in per item, and
   a staggered reveal so the list arrives rather than just appears.
   ============================================================ */
.oxy-pro-menu-off-canvas-container,
.oxy-pro-menu-open-container {
	width: min(88vw, 420px) !important;
	background: linear-gradient(165deg, #0a1530 0%, #14254f 55%, #0d3a52 100%) !important;
}
.oxy-pro-menu-off-canvas-container .menu-menu-container {
	width: 100%;
}
.oxy-pro-menu-off-canvas-container .oxy-pro-menu-list {
	align-items: stretch !important;
	justify-content: flex-start !important;
	width: 100%;
	padding: 96px 9vw 40px;
	gap: 0;
}
.oxy-pro-menu-off-canvas-container .oxy-pro-menu-list > .menu-item {
	width: 100%;
	text-align: left !important;
	margin: 0 !important;
	min-height: 0 !important;
	border-bottom: 1px solid rgba(255, 255, 255, .12);
	opacity: 0;
	transform: translateY(14px);
	animation: sosMenuItemIn .55s cubic-bezier(.2, .8, .2, 1) forwards;
}
.oxy-pro-menu-off-canvas-container .oxy-pro-menu-list > .menu-item:nth-child(1) { animation-delay: .06s; }
.oxy-pro-menu-off-canvas-container .oxy-pro-menu-list > .menu-item:nth-child(2) { animation-delay: .11s; }
.oxy-pro-menu-off-canvas-container .oxy-pro-menu-list > .menu-item:nth-child(3) { animation-delay: .16s; }
.oxy-pro-menu-off-canvas-container .oxy-pro-menu-list > .menu-item:nth-child(4) { animation-delay: .21s; }
.oxy-pro-menu-off-canvas-container .oxy-pro-menu-list > .menu-item:nth-child(5) { animation-delay: .26s; }
.oxy-pro-menu-off-canvas-container .oxy-pro-menu-list > .menu-item:nth-child(6) { animation-delay: .31s; }
.oxy-pro-menu-off-canvas-container .oxy-pro-menu-list > .menu-item:nth-child(7) { animation-delay: .36s; }
@keyframes sosMenuItemIn {
	to { opacity: 1; transform: translateY(0); }
}
.oxy-pro-menu-off-canvas-container .oxy-pro-menu-list > .menu-item > a {
	font-size: 26px !important;
	font-weight: 800 !important;
	letter-spacing: .01em;
	color: #fff !important;
	justify-content: flex-start !important;
	width: 100%;
	padding: 17px 0 !important;
	position: relative;
}
.oxy-pro-menu-off-canvas-container .oxy-pro-menu-list > .menu-item > a::before {
	content: '';
	display: inline-block;
	width: 0;
	height: 3px;
	border-radius: 2px;
	background: #0d9488;
	margin-right: 0;
	transition: width .25s ease, margin-right .25s ease;
}
.oxy-pro-menu-off-canvas-container .oxy-pro-menu-list > .menu-item:hover > a::before,
.oxy-pro-menu-off-canvas-container .oxy-pro-menu-list > .menu-item.current-menu-item > a::before {
	width: 22px;
	margin-right: 12px;
}
.oxy-pro-menu-off-canvas-container .oxy-pro-menu-list .menu-item.current-menu-item > a {
	color: #6fa7dc !important;
}
.oxy-pro-menu-off-canvas-container .menu-item-has-children > a .oxy-pro-menu-dropdown-icon-click-area {
	margin-left: auto;
}
.oxy-pro-menu-off-canvas-container .dropdown-toggle svg {
	width: 15px;
	height: 15px;
}
/* Submenus float as white cards on desktop hover -- inside the dark drawer
   they render inline (position:static, forced by the off-canvas styles),
   so a white card here would just be a jarring block; restyle to match
   the panel instead of the desktop dropdown. */
.oxy-pro-menu-off-canvas-container .sub-menu {
	background: transparent !important;
	box-shadow: none !important;
	border-radius: 0 !important;
	padding: 2px 0 10px !important;
}
.oxy-pro-menu-off-canvas-container .sub-menu .menu-item > a {
	color: rgba(255, 255, 255, .72) !important;
	font-size: 17px !important;
	font-weight: 600 !important;
	text-transform: none !important;
	padding: 10px 0 10px 20px !important;
	background: transparent !important;
}
.oxy-pro-menu-off-canvas-container .sub-menu .menu-item > a:hover {
	color: #fff !important;
	background: transparent !important;
}
.oxy-pro-menu-mobile-close-icon {
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	gap: 10px;
	color: rgba(255, 255, 255, .85) !important;
	transition: opacity .2s ease;
}
.oxy-pro-menu-mobile-close-icon:hover {
	opacity: .65;
}
.oxy-pro-menu-mobile-close-icon svg {
	width: 15px;
	height: 15px;
	transition: transform .3s ease;
}
.oxy-pro-menu-mobile-close-icon:hover svg {
	transform: rotate(90deg);
}

/* Navbar redesign: solid brand blue (was black-to-teal gradient), no wedge.
   #div_block-14-16643 is the full nav row. #div_block-3-16643 wraps the logo
   -- it used to carry its own darker diagonal-cut background (a distinct
   "crest" block); now it's transparent so the logo just sits on the same
   blue strip as everything else. It's still absolutely positioned at left:0
   over a flex row shared with the nav links/hamburger button though, so on
   tablet widths (<=1240px, where the hamburger appears -- see 16643.css) it
   must stay small or its (invisible but still clickable) box overlaps and
   blocks the menu; the original CSS only hides it at <=767px, too late. */
/* #div_block-14-16643 (the navy bar, ~70px) sits inside a column
   (#div_block-6-16643) below the social-icons row, and that whole stack is
   only ~94px inside its 120px-tall grandparent (#div_block-2-16643), which
   vertically CENTERS it -- both wrappers have transparent backgrounds, so
   the ~13px of leftover space below the bar showed the page's own off-white
   background as a thin line wedged between the navbar and the hero content.
   Extending the bar's own background past its box (via box-shadow, so
   nothing actually reflows) covers that gap without touching the centering
   that #div_block-3-16643 (the logo, a separate sibling spanning the full
   120px) relies on to line up with the bar in the first place. */
#div_block-14-16643 {
	background: #14254f !important;
	box-shadow: 0 20px 0 0 #14254f;
}
#div_block-3-16643 {
	background: transparent !important;
	background-image: none !important;
	max-width: 260px !important;
}
/* The logo centers inside this wrapper's full 120px height (matching the
   grandparent section) at a fixed midpoint of 60px from the top regardless
   of the logo's own size, while the nav links/Donate/Login next to it sit at
   the bar's own vertical center, 72px. Shifting down by that 12px gap lines
   the logo up with the rest of the nav row exactly. Since the pre-shift
   midpoint (60) doesn't depend on image height, this one offset holds at
   every size below, no per-breakpoint tuning needed. */
#link-4-16643 {
	transform: translateY(12px);
}
/* The program logo shown next to the site logo on a team portal page is a
   sibling of #link-4-16643, not inside it, so the shift above doesn't reach
   it -- same fixed midpoint (60), same 12px gap to close. */
#sos-nav-team-logo {
	transform: translateY(12px);
}
#div_block-3-16643 #image-5-16643 {
	width: 230px !important;
}
/* The bigger 190px logo now reaches further into the row than the original
   130px one did, and starts overlapping "HOME" (the first nav link) around
   ~1320px -- well above the theme's own 1240px hamburger breakpoint, so
   there was a ~80px-wide window where the full nav links were still shown
   but partly covered by the logo. Moving the hamburger switch itself out to
   1360px (replicating 16643.css's own rules at the new width) closes that
   gap, and the logo-shrink breakpoint below is moved to match so the two
   always change together. */
@media (max-width: 1360px) {
	.oxy-pro-menu-mobile-open-icon {
		display: inline-flex !important;
	}
	.oxy-pro-menu-container {
		visibility: hidden !important;
		position: fixed !important;
	}
	/* 16643.css only paints this button white inside its own 1240px media
	   block -- between 1240 and 1360px the icon above was now showing, but
	   defaulting to dark gray text on the navy bar, effectively invisible.
	   Same fix, just following the button out to the new breakpoint. */
	.oxy-pro-menu-mobile-open-icon,
	.oxy-pro-menu-mobile-open-icon svg {
		color: #fff !important;
	}
}
@media (max-width: 1360px) {
	#div_block-3-16643 {
		max-width: 200px !important;
		padding-left: 14px !important;
		padding-right: 14px !important;
	}
	#div_block-3-16643 #image-5-16643 {
		width: 170px !important;
	}
}
/* The wedge's markup carries a hardcoded inline style="display:flex" (baked
   in from the original WP migration), which normally beats an external
   stylesheet -- except an external rule marked !important still wins over a
   non-!important inline style. Below 767px the site swaps to the standalone
   #link-15-16643 logo instead (see 16643.css), so the wedge must actually
   disappear here or both logos render stacked on top of each other. */
@media (max-width: 767px) {
	#div_block-3-16643 {
		display: none !important;
	}
}
/* #link-15-16643 (its logo swap-in on mobile) was already broken before today:
   the shared .ct-image rule caps images at max-width:100% of their parent,
   but this <a> is a flex item with no size of its own, so its width resolves
   from its only child (the image) while the image is simultaneously capped
   at 100% of that same undetermined width -- a circular dependency some
   browsers resolve to 0. Breaking the cap here lets the image use its own
   explicit width (set in 16643.css) instead of its collapsed parent's. */
#image-16-16643 {
	max-width: none !important;
}
#link_button-18-16643 {
	background-color: #0d9488 !important;
	border-color: #0d9488 !important;
	color: #fff !important;
}
#link_button-18-16643:hover {
	background-color: #0a7c72 !important;
	border-color: #0a7c72 !important;
}