/**
 * WDE Accessibility Fixes — helper styles
 *
 * Nothing here changes the design. The classes exist so that heading tags can
 * be corrected for semantics while the page keeps the exact appearance the
 * client signed off on.
 */

/* -------------------------------------------------------------------------
 * Visually hidden content
 *
 * For the single page-level <h1> and for the section headings that give the
 * quick-link and hero card groups a parent in the outline. Present to screen
 * readers, invisible on screen, and not clipped away from screen magnifiers.
 * ---------------------------------------------------------------------- */
.wde-sr-only {
	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;
}

/* -------------------------------------------------------------------------
 * Heading appearance preservation
 *
 * Apply the class that matches the OLD tag to the element that now uses the
 * CORRECT tag. Example: a card title that looked like an <h5> but must be an
 * <h3> becomes <h3 class="wde-type-h5">.
 *
 * The values read Avada's global typography custom properties, so they track
 * any future change made in Avada > Options > Typography. Fallbacks are the
 * Avada defaults; if a heading shifts by a pixel or two after the tag change,
 * replace the fallback with the computed value from DevTools.
 * ---------------------------------------------------------------------- */
.wde-type-h1,
.wde-type-h2,
.wde-type-h3,
.wde-type-h4,
.wde-type-h5,
.wde-type-h6 {
	font-family: var(--h_typography-font-family, inherit);
	margin-top: 0;
}

.wde-type-h1 {
	font-size: var(--h1_typography-font-size, 2.25em);
	font-weight: var(--h1_typography-font-weight, 400);
	line-height: var(--h1_typography-line-height, 1.2);
	letter-spacing: var(--h1_typography-letter-spacing, 0);
	text-transform: var(--h1_typography-text-transform, none);
	color: var(--h1_typography-color, inherit);
}

.wde-type-h2 {
	font-size: var(--h2_typography-font-size, 1.875em);
	font-weight: var(--h2_typography-font-weight, 400);
	line-height: var(--h2_typography-line-height, 1.25);
	letter-spacing: var(--h2_typography-letter-spacing, 0);
	text-transform: var(--h2_typography-text-transform, none);
	color: var(--h2_typography-color, inherit);
}

.wde-type-h3 {
	font-size: var(--h3_typography-font-size, 1.5em);
	font-weight: var(--h3_typography-font-weight, 400);
	line-height: var(--h3_typography-line-height, 1.3);
	letter-spacing: var(--h3_typography-letter-spacing, 0);
	text-transform: var(--h3_typography-text-transform, none);
	color: var(--h3_typography-color, inherit);
}

.wde-type-h4 {
	font-size: var(--h4_typography-font-size, 1.25em);
	font-weight: var(--h4_typography-font-weight, 400);
	line-height: var(--h4_typography-line-height, 1.35);
	letter-spacing: var(--h4_typography-letter-spacing, 0);
	text-transform: var(--h4_typography-text-transform, none);
	color: #fff;
}

.wde-type-h5 {
	font-size: var(--h5_typography-font-size, 1.125em);
	font-weight: var(--h5_typography-font-weight, 400);
	line-height: var(--h5_typography-line-height, 1.4);
	letter-spacing: var(--h5_typography-letter-spacing, 0);
	text-transform: var(--h5_typography-text-transform, none);
	color: var(--h5_typography-color, inherit);
}

.wde-type-h6 {
	font-size: var(--h6_typography-font-size, 1em);
	font-weight: var(--h6_typography-font-weight, 400);
	line-height: var(--h6_typography-line-height, 1.45);
	letter-spacing: var(--h6_typography-letter-spacing, 0);
	text-transform: var(--h6_typography-text-transform, none);
	color: var(--h6_typography-color, inherit);
}

/* -------------------------------------------------------------------------
 * Mega-menu column labels
 *
 * These were <h4> elements sitting inside <nav> ahead of the page <h1>. The
 * plugin converts them to <div>, so they need the block-level spacing the
 * heading tag was providing.
 * ---------------------------------------------------------------------- */
.wde-menu-column-title {
	display: block;
	margin-bottom: 0.5em;
}