/**
 * FUSIO Custom Codes - accessibility styles.
 * Each block matches a numbered fix in ../../README.md.
 * Loaded after the theme's main.css (see accessibility-fixes.php), so equal
 * specificity is enough to win.
 */

/*
 * Fix 2 - Heading levels fixed in the theme templates keep their old size.
 * Several headings skipped levels (h2 followed by h5, h1 by h4). The theme
 * templates now use the right tag and add one of these classes, which copy the
 * theme's sizes for the old tag (main.css: h4 and h5 rules, including the
 * min-width 992px ones). Margin, weight, font and colour are the same for every
 * heading tag in main.css, so only size and line height need copying.
 */
.fusio-as-h4 {
	font-size: 1.25rem;
}

.fusio-as-h5 {
	font-size: 1rem;
}

@media (min-width: 992px) {
	.fusio-as-h4 {
		font-size: 1.25rem;
		line-height: 1.65;
	}

	.fusio-as-h5 {
		font-size: 1rem;
		line-height: 1.875;
	}
}

/*
 * Fix 3 - Links inside running text are underlined (axe: link-in-text-block,
 * WCAG 1.4.1). They were told apart from the text only by colour: link
 * #014099 against text #333333 = 1.32:1, below the 3:1 that colour alone needs.
 * Only links inside paragraphs, quotes and the h6 used as body text in the
 * editor; buttons keep their look. Visual change approved on 13 Nov 2026 (see the fix log).
 */
.main p a:not(.btn),
.main blockquote a:not(.btn),
.main h6 a:not(.btn) {
	text-decoration: underline;
}

/*
 * Fix 4 - Orange "Phase" titles on white (axe: color-contrast, WCAG 1.4.3).
 * About > Our Approach: #f5a623 on #ffffff = 2.03:1. The titles are 24px or
 * larger (large text, 3:1 needed): #c37d09 on #ffffff = 3.36:1. The selected
 * card has a dark background (#333333), where #f5a623 passes (6.23:1), so it
 * keeps the brand orange. Visual change approved on 13 Nov 2026 (see the fix log).
 */
.approach-wrap .text-orange {
	color: #c37d09 !important; /* .text-orange uses !important in main.css */
}

.is-selected .approach-wrap .text-orange {
	color: #f5a623 !important;
}

/*
 * Fix 5 - Project card titles over photos (axe: color-contrast, WCAG 1.4.3).
 * White titles sit on the project photo under a #333 overlay at 33%; on a
 * light photo that drops to about 1.9:1. Worst case is a white photo:
 * - at 55% the background is at most #8f8f8f, so white text >= 3.23:1
 *   (titles are 20px bold or larger: large text needs 3:1);
 * - the prev/next cards also have small text ("View Next Project"), which
 *   needs 4.5:1: at 67% the background is at most #767676 (4.54:1).
 * axe still reports these as "needs review" (it cannot measure text over an
 * image). Visual change approved on 13 Nov 2026, option A (see the fix log).
 */
.home-portfolio-wrap .home-portfolio-image:before {
	background-color: rgba(51, 51, 51, 0.55);
}

#Other-Work .home-portfolio-wrap .home-portfolio-image:before {
	background-color: rgba(51, 51, 51, 0.67);
}

/*
 * Fix 6 - Solid header behind the main menu (axe: color-contrast "needs
 * review", 4 items x 106 pages). The contrast already passed (white on the
 * lightest point of the gradient, #363636 = 12.08:1), but axe cannot measure
 * text over a gradient. A solid colour between the two ends of the old
 * gradient (#393939 to #222222) lets it: white on #2e2e2e = 13.57:1.
 * The mobile menu overlay (.overlay) keeps its gradient: it is 90% opaque, so
 * a solid colour would not make it measurable.
 * Visual change approved on 13 Nov 2026 (see the fix log).
 */
header.banner {
	background: #2e2e2e;
}

/*
 * Fix 7 - Mobile menu button (WCAG 2.1.1, 4.1.2, 2.4.7). Outside the report.
 * The toggle (below 992px) was a <div>: no keyboard access, no name, no state.
 * The theme's header.php now prints a <button>; these rules remove the
 * browser's button look so it stays the same three white bars, and add a
 * keyboard focus ring: #f5a623 on the #2e2e2e header = 6.7:1.
 * The ring shows for keyboard focus only (:focus-visible); browsers without
 * :focus-visible ignore the second rule and keep their default outline.
 */
#Toggle.button_container {
	-webkit-appearance: none;
	appearance: none;
	background: transparent;
	border: 0;
	border-radius: 0;
	margin: 0;
	padding: 0;
	color: inherit;
	font: inherit;
}

#Toggle.button_container:focus:not(:focus-visible) {
	outline: 0;
}

#Toggle.button_container:focus-visible {
	outline: 3px solid #f5a623;
	outline-offset: 4px;
}