/* =============================================================================
   Accessibility remediation styles (WCAG 2.1 AA)
   -----------------------------------------------------------------------------
   Plain CSS on purpose: the SCSS/Gulp build for this theme is not in use.
   This file is enqueued AFTER assets/styles/style.css so these rules win at
   equal specificity. Color values were chosen to meet a >= 4.5:1 contrast
   ratio for normal text (>= 3:1 for large text / UI). Re-verify on rendered
   pages with axe/WAVE before sign-off.
   ============================================================================= */

/* --- Visually-hidden utility (the theme referenced .screen-reader-text but
       never defined it; also used by the skip link below) --- */
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* --- Skip link (WCAG 2.4.1 Bypass Blocks): hidden until focused --- */
.skip-link {
	position: absolute;
	top: -100px;
	left: 0;
	z-index: 100000;
	display: block;
	padding: 12px 20px;
	background: #005a7d;
	color: #ffffff;
	font-weight: 700;
	text-decoration: underline;
}
.skip-link:focus {
	top: 0;
	outline: 3px solid #ffc56e;
	outline-offset: 0;
}

/* --- Visible focus indicators (WCAG 2.4.7 Focus Visible).
       Foundation set .button{outline:0} and the theme has no custom :focus. --- */
a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus,
summary:focus,
[tabindex]:focus,
.button:focus,
.menu a:focus,
[data-toggle]:focus,
.menu-icon:focus {
	outline: 3px solid #005a7d;
	outline-offset: 2px;
}

/* Where the browser supports :focus-visible, avoid showing the ring on mouse
   clicks while keeping it for keyboard users. */
a:focus:not(:focus-visible),
button:focus:not(:focus-visible),
.button:focus:not(:focus-visible),
.menu a:focus:not(:focus-visible),
[data-toggle]:focus:not(:focus-visible) {
	outline: none;
}
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible,
.button:focus-visible,
.menu a:focus-visible,
[data-toggle]:focus-visible,
.menu-icon:focus-visible {
	outline: 3px solid #005a7d;
	outline-offset: 2px;
}

/* The skip-link target itself should not paint an outline when programmatically
   focused. */
#main-content:focus {
	outline: none;
}

/* =============================================================================
   Color-contrast fixes (WCAG 1.4.3)
   ============================================================================= */

/* Body text links were #00a7ba (~2.7:1 on white). Darken to ~5.6:1. Links that
   already have a more specific color rule (menus, dark blocks) are unaffected. */
a {
	color: #00727f;
}
a:hover,
a:focus {
	color: #005a7d;
}

/* Section headings used a global bare `h2 { color:#00a7ba }` (teal, ~2.7:1 on
   white — fails even the 3:1 large-text bar). Examples: "Our Partners",
   "Resource Videos", "Partners" headings. Darken to an accessible teal (~5.6:1).
   Blocks that set their own heading color (.crisis-block h2, .childs-* h2, etc.)
   are more specific and unaffected. */
h2 {
	color: #00727f;
}

/* Content links inside running text must be distinguishable without relying on
   color (WCAG 1.4.1) — underline links that live in paragraphs / content lists.
   Buttons and button-styled links are excluded. Menus live in <ul><li> outside
   <p>, so they're unaffected. */
p a:not(.button):not([class*="btn"]),
.entry-content li a:not(.button):not([class*="btn"]),
.gray-container a:not(.button):not([class*="btn"]) {
	text-decoration: underline;
}

/* Primary buttons: white on #f05d78 (~3.1:1) -> #c92a5e (~5.3:1). */
.button,
input[type="submit"].button,
.search-submit,
button.tiny,
.button.tiny {
	background-color: #c92a5e;
	color: #ffffff;
}
.button:hover,
.button:focus,
input[type="submit"].button:hover,
input[type="submit"].button:focus,
.search-submit:hover,
.search-submit:focus {
	background-color: #a3234c;
	color: #ffffff;
}

/* Crisis bar: white "24-Hour Crisis Line" text sits at the very top of the
   header, which is now the darkest part of the header background gradient (see
   header.php: ~0.55-0.6 behind the nav on home, 0.4 flat on internal, plus the
   #0a2a3c background-color fallback). So the strip no longer needs its own dark
   band — white text lands ~8-12:1. (CONTACT and Menu are their own buttons.) */
.blue-bar {
	padding: 10px 20px !important;
}
.secondary-menu-container {
	background-color: #a3234c !important;
}
.secondary-menu-container a,
.secondary-menu-container .social-container a {
	color: #ffffff;
}
.blue-bar .crisis-number {
	color: #ffffff;
}

/* Footer nav links + copyright were #939293 on #ededee (~2.6:1). Darken to
   ~6:1 while keeping the gray footer aesthetic.
   NOTE: the theme's rule is `footer.footer .inner-footer ...` (element+class),
   so we must match that `footer.footer` prefix to win the specificity race. */
footer.footer .inner-footer .footer-links ul li a,
footer.footer .inner-footer p.source-org.copyright {
	color: #595959;
}

/* Footer links are the same gray as the surrounding copyright text, so color
   alone doesn't distinguish them (WCAG 1.4.1). Add an underline as a non-color
   indicator. */
footer.footer .inner-footer .footer-links ul li a {
	text-decoration: underline;
}
/* Keep the " | " divider (an a::after) out of the underline: an inline-block
   atomic box doesn't inherit the parent's underline. */
footer.footer .inner-footer .footer-links ul li a:after {
	display: inline-block;
	text-decoration: none;
	margin-left: 10px;
}

/* Crisis block (home): white text sits on the pink banner-pink.png background
   image (~3:1 for white). Add a dark overlay so white text passes >= 4.5:1
   while keeping the brand tint. Scoped to .crisis-block only. */
.crisis-block {
	position: relative;
	/* Solid dark colour UNDER the banner image + overlay. The image still covers
	   it visually, but this gives automated contrast checkers (axe/WAVE) a real,
	   readable background value — they can't see background images or the
	   ::before overlay and otherwise fall back to the white ancestor and report
	   false "very low contrast" errors. Also a graceful fallback if the image
	   fails to load. */
	background-color: #0a2a3c;
}
.crisis-block::before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background-color: rgba(10, 42, 60, 0.6);
	pointer-events: none;
}
.crisis-block > * {
	position: relative;
	z-index: 1;
}
/* Links here sit on the dark overlay; force a light, underlined treatment so
   they're readable and distinguishable (the global dark-teal link colour would
   otherwise be dark-on-dark). */
.crisis-block a {
	color: #ffc56e;
	text-decoration: underline;
}
.crisis-block a:hover,
.crisis-block a:focus {
	color: #ffffff;
}

/* Header banner + connect block: white nav / copy text sits on banner photos
   that measure only 3.0–4.5:1 for white (a real failure, not just a tool blind
   spot). Dark gradients are baked into the inline background-image (see
   header.php / content-connect.php) to darken where the text is:
     - home header: top-anchored fade (~0.55 dark behind the nav, clear below so
       the hero photo shows through) — nav zone lands ~11:1;
     - internal header: 0.4 flat (thin nav strip) → ~8:1;
     - connect block: 0.3 flat (image already dark; text spans the block) → ~7:1.
   This background-color is the tool-readable value + image-load fallback. */
.header,
.home-header,
.connect-block {
	background-color: #0a2a3c;
}

/* The theme hides Gravity Forms field labels with display:none, which also
   removes them from the accessibility tree (WAVE: "missing form label").
   Restore them as screen-reader-only so they're announced, without changing the
   placeholder-driven visual design. */
.connect-block .gform_wrapper .gform_body .gfield_label {
	display: block !important;
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	clip-path: inset(50%) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

/* Crisis phone/text lines were <h3> used only for sizing (heading misuse).
   They are now <p class="crisis-line">; reproduce the previous h3 styling. */
.crisis-block .crisis-line {
	margin: 0 0 0.25em;
	font-family: 'Open Sans', sans-serif;
	font-weight: 800;
	font-size: 30px;
	letter-spacing: 1px;
	line-height: 1em;
	color: #ffffff;
}
@media screen and (min-width: 640px) {
	.crisis-block .crisis-line {
		font-size: 3em;
	}
}

/* =============================================================================
   Menu toggle: the mobile "Menu" trigger was an <a> with no href (not keyboard
   operable). It is now a <button>, styled to match the site's dark-pink buttons
   (#c92a5e, white text ~5.3:1).
   ============================================================================= */
.menu .menu-toggle-link {
	display: inline-block;
	padding: 0.6rem 1.2rem;
	border: 0;
	background-color: #c92a5e;
	color: #ffffff;
	font: inherit;
	font-weight: 600;
	line-height: 1;
	text-transform: uppercase;
	cursor: pointer;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	margin-top: 10px;
	position: relative;
    right: -30px;
}
.menu .menu-toggle-link:hover,
.menu .menu-toggle-link:focus {
	background-color: #a3234c;
	color: #ffffff;
}

header.header .blue-bar {
	background: transparent;
}