/* ==========================================================================
   Accessibility
   Port of the accessibility work done for stadtwerke-glueckstadt.de, which
   implements the deficiencies of the "Prüfbericht Barrierefreiheit"
   (Prüfstelle für barrierefreie IT Schleswig-Holstein / DIAS GmbH),
   audited against BITV 2.0 and EN 301 549 v3.2.1.

   Both sites share the same theme, so the same defects apply here.

   Covered in this file:
     Priority 1 - 9.2.4.7  Focus visible
     Priority 2 - 9.2.1.1  Keyboard (making focused content visible)
                  9.1.4.13 Content on hover or focus
                  9.2.4.3  Focus order
                  9.1.3.1h Labels can be programmatically determined

   This file is loaded after style.css (see functions.php) and
   intentionally overrides its rules.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1) 9.2.4.7 - Focus indicator
   --------------------------------------------------------------------------
   style.css line 115 contains `* { outline: none !important; }` - a universal
   rule that suppresses the focus indicator on every single element of the
   site. That is the "erhebliche Barriere" the report names first: the site is
   virtually not operable by keyboard because nothing shows where the focus is.

   The replacement is a two-tone ring: white on the inside, dark blue on the
   outside. That way the indicator keeps the required 3.0:1 contrast on every
   background the theme uses (#FFFFFF, #EDEDED, #003C5A, #003E59, #9187BE).

   Specificity note: `* { outline: none !important }` has specificity 0,0,0.
   Every selector below is at least 0,1,0, so with !important on both sides
   these rules win regardless of source order.
   -------------------------------------------------------------------------- */

:root {
	--a11y-focus-inner: #FFFFFF;
	--a11y-focus-outer: #9187be;
	--a11y-focus-width: 3px;
	--a11y-focus-ring: 6px;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
[contenteditable]:focus-visible,
/* Catch-all for anything the list above misses (custom roles, embedded
   widgets). Specificity 0,1,0 still beats the universal outline reset. */
*:focus-visible {
	outline: var(--a11y-focus-width) solid var(--a11y-focus-inner) !important;
	outline-offset: 0 !important;
	box-shadow: 0 0 0 var(--a11y-focus-ring) var(--a11y-focus-outer) !important;
	z-index: 20;
}

/* Fallback for browsers without :focus-visible support. */
@supports not selector(:focus-visible) {
	a:focus,
	button:focus,
	input:focus,
	select:focus,
	textarea:focus,
	[tabindex]:focus {
		outline: var(--a11y-focus-width) solid var(--a11y-focus-inner) !important;
		outline-offset: 0 !important;
		box-shadow: 0 0 0 var(--a11y-focus-ring) var(--a11y-focus-outer) !important;
	}
}


/* --------------------------------------------------------------------------
   1b) Targeted override of the outline resets that ship with the third-party
   libraries. slick.min.css and jquery-ui.css set `outline: 0` / `outline: none`
   of their own, so the selectors are mirrored here with :focus-visible added.
   -------------------------------------------------------------------------- */

.slick-slider .slick-arrow:focus-visible,
.slick-slider .slick-track:focus-visible,
.slick-slider .slick-list:focus-visible,
.slick-slide:focus-visible,
.ui-slider .ui-slider-handle:focus-visible,
.ui-state-focus:focus-visible {
	outline: var(--a11y-focus-width) solid var(--a11y-focus-inner) !important;
	outline-offset: 0 !important;
	box-shadow: 0 0 0 var(--a11y-focus-ring) var(--a11y-focus-outer) !important;
}

/* The slider handle sits inside the track; place the ring inward so it is
   not clipped. */
.ui-slider .ui-slider-handle:focus-visible {
	outline-offset: 2px !important;
}

/* Carousel arrows: the ring must not be clipped by .slick-list
   (overflow: hidden) - the arrows sit outside it anyway. */
.slick-slider .slick-arrow:focus-visible {
	z-index: 30;
}


/* --------------------------------------------------------------------------
   1c) Selectric: the focusable element is a visually hidden
   <input class="selectric-input"> (style.css sets outline: none !important on
   it). Focus therefore has to be shown on the visible .selectric box instead.
   -------------------------------------------------------------------------- */

.selectric-wrapper .selectric-input:focus-visible {
	outline: 0 !important;
	box-shadow: none !important;
}

.selectric-wrapper.selectric-focus > .selectric,
.selectric-wrapper:focus-within > .selectric {
	outline: var(--a11y-focus-width) solid var(--a11y-focus-inner) !important;
	outline-offset: 0 !important;
	box-shadow: 0 0 0 var(--a11y-focus-ring) var(--a11y-focus-outer) !important;
	position: relative;
	z-index: 20;
}

/* Highlight the option referenced by aria-activedescendant. */
.selectric-items li.highlighted {
	outline: 2px solid var(--a11y-focus-outer);
	outline-offset: -2px;
}


/* --------------------------------------------------------------------------
   2) 9.2.1.1 - Content that used to be visible on :hover only must also
   become visible on keyboard focus.
   -------------------------------------------------------------------------- */

/* Main navigation flyout. style.css opens .submenu-holder on :hover and on the
   current-page classes only, so keyboard users never saw the submenu.
   .submenu-open is toggled by js/accessibility.js (Enter/Space, Escape). */
.main-menu li:focus-within > .submenu-holder,
.main-menu li.submenu-open > .submenu-holder,
.main-menu li:focus-within .submenu-holder,
.main-menu li.submenu-open .submenu-holder {
	opacity: 1;
	visibility: visible;
	pointer-events: initial;
	z-index: 1;
}

/* Tiles of the "slider-infos-box": the revealed text and the link inside it
   would otherwise stay unreachable for keyboard users. .each-slide-hidden is
   visibility: hidden by default, which already keeps it out of the tab order;
   these rules restore it when the tile is entered. */
.each-slide-info:focus-within .each-slide-hidden,
.each-slide-info.is-revealed .each-slide-hidden {
	max-height: 330px;
	opacity: 1;
	visibility: visible;
	pointer-events: initial;
}


/* --------------------------------------------------------------------------
   2b) 9.2.1.1 - Side widget (phone / location / email).
   --------------------------------------------------------------------------
   The panels were revealed by :hover alone. Worse, style.css only fades them
   with opacity: 0, so their links stayed in the tab order while being clipped
   away by .floating-item { overflow: hidden; max-width: 80px } - dozens of
   invisible focus stops (report item 9.2.4.7 / 9.4.1.2).

   Fix in two parts:
     a) visibility: hidden takes the closed panel out of the tab order.
     b) header.php renders a <button class="floating-disclosure"> per item;
        accessibility.js wires aria-expanded, Escape and the focus move, while
        custom.js keeps toggling .active_floating on the item as before.
   -------------------------------------------------------------------------- */

.floating-bar .floating-item > .floating-item-col-inner {
	visibility: hidden;
}

.floating-bar .floating-item:hover > .floating-item-col-inner,
.floating-bar .floating-item:focus-within > .floating-item-col-inner,
.floating-bar .floating-item.active_floating > .floating-item-col-inner {
	visibility: visible;
}

/* The trigger covers the icon column only, so it never sits on top of the
   phone / mail links inside the panel. */
.floating-bar .floating-item > .floating-disclosure {
	position: absolute;
	top: 0;
	left: 0;
	width: 80px;
	height: 100%;
	z-index: 3;
	padding: 0;
	margin: 0;
	border: 0;
	background: none;
	font: inherit;
	color: inherit;
	cursor: pointer;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}

.floating-bar .floating-item > .floating-disclosure::-moz-focus-inner {
	border: 0;
	padding: 0;
}

/* The FAQ tile is a real link now instead of a <span> with an invisible
   overlay <a>; it has to keep the white text colour of the tile. */
.floating-item.floating-item-faq .floating-faq-link {
	color: #fff;
}

/* Desktop mirror of the :hover rules from style.css (@media min-width:1024px),
   so keyboard operation expands the item exactly like the mouse does. */
@media (min-width: 1024px) {
	.floating-item:focus-within .floating-icon,
	.floating-item.active_floating .floating-icon {
		padding-left: 15px;
	}

	.floating-item:focus-within .floating-item-content,
	.floating-item.active_floating .floating-item-content {
		opacity: 1;
	}

	.floating-item.floating-item-phone:focus-within,
	.floating-item.floating-item:focus-within,
	.floating-item.floating-item-phone.active_floating,
	.floating-item.floating-item.active_floating {
		max-width: 100%;
	}
}


/* --------------------------------------------------------------------------
   3) Elements changed from <div>/<a> to <button> must look exactly as before
   (neutralise the user-agent button defaults).
   -------------------------------------------------------------------------- */

/* Only elements that carry no background of their own are listed here.
   .search-close and .load--more--posts deliberately are NOT: style.css paints
   them (#9187BE), and a `background: none` at equal specificity but later in
   the cascade would silently strip that colour. Their button defaults are
   neutralised in sections 8 and 9 instead, without touching the background. */
.search-holder.search-toggle,
.floating-item > .floating-disclosure {
	-webkit-appearance: none;
	appearance: none;
	background: none;
	border: 0;
	margin: 0;
	font: inherit;
	color: inherit;
	text-align: inherit;
	cursor: pointer;
}

/* The main menu search toggle was a <div>; as <button> it has to keep behaving
   like the same floated block (.search-holder supplies float and padding). */
.main-menu button.search-holder.search-toggle {
	display: block;
}

.top-search-bar button.search-close {
	display: block;
}


/* --------------------------------------------------------------------------
   4) Helper class: visually hidden, but readable for screen readers.
   style.css does not define .screen-reader-text at all, so the WordPress
   default class had no effect on this site.
   -------------------------------------------------------------------------- */

.screen-reader-text,
.a11y-visually-hidden {
	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;
	white-space: nowrap !important;
	border: 0 !important;
}

/* Visible when focused (skip link). */
.screen-reader-text:focus,
.a11y-visually-hidden:focus {
	position: static !important;
	width: auto !important;
	height: auto !important;
	margin: 0 !important;
	overflow: visible !important;
	clip: auto !important;
	white-space: normal !important;
}


/* --------------------------------------------------------------------------
   5) Respect the reduced-motion preference. Not part of the simplified
   monitoring itself, but a prerequisite for 9.2.2.2 conformance.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}


/* --------------------------------------------------------------------------
   6) Filter pills (.each-faq-filter) are real <button> elements now instead of
   plain <div>. The div was not focusable at all and did not react to Enter or
   Space, which made the whole filter row inoperable by keyboard.

   The pill styling stays in style.css; here only the user-agent button
   defaults are neutralised so the appearance is identical to before.
   -------------------------------------------------------------------------- */

button.each-faq-filter {
	font-family: inherit;
	line-height: inherit;
	letter-spacing: inherit;
	text-align: center;
	text-transform: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background-image: none;
	box-shadow: none;
	/* .each-faq-filter already sets font-size, font-weight, color, padding,
	   border, border-radius, background-color, margin and display. */
}

/* Firefox draws its own dotted inner ring; the shared focus indicator from
   section 1 has to remain the only visible one. */
button.each-faq-filter::-moz-focus-inner {
	border: 0;
	padding: 0;
}

/* Same for the FAQ popup close control, which was a <div> as well. */
button.faq-popup-close {
	font: inherit;
	color: inherit;
	border: 0;
	background: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}

button.faq-popup-close::-moz-focus-inner {
	border: 0;
	padding: 0;
}


/* --------------------------------------------------------------------------
   7) 9.2.4.1 - Skip link "Zum Inhalt springen".
   --------------------------------------------------------------------------
   First focusable element of the page (header.php). It uses .screen-reader-text
   from section 4 and only becomes visible on focus. The header is
   position: fixed, so the link is explicitly placed above it.
   -------------------------------------------------------------------------- */

.skip-link:focus {
	position: fixed !important;
	top: 0;
	left: 0;
	z-index: 1000;
	display: block;
	padding: 14px 24px 12px;
	background-color: #FFFFFF;
	color: #003C5A;
	font-size: 15px;
	font-weight: 700;
	text-decoration: underline;
}

.admin-bar .skip-link:focus {
	top: 32px;
}


/* --------------------------------------------------------------------------
   8) 9.2.1.1 / 9.2.4.3 - Search in the header.
   --------------------------------------------------------------------------
   The toggle and the close control are real <button> elements now, so the
   keyboard logic in accessibility.js (open, move focus into the field, Escape,
   return focus) can bind at all. Two consequences are handled here:

   a) The user-agent button defaults must not disturb the existing layout.
   b) While the bar is collapsed (max-height: 0) its field stayed reachable
      with Tab. visibility: hidden takes it out of the tab order; the open
      state restores it.
   -------------------------------------------------------------------------- */

button.search-holder,
button.search-close {
	font: inherit;
	line-height: inherit;
	color: inherit;
	border: 0;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}

button.search-holder {
	background-color: transparent;
}

button.search-holder::-moz-focus-inner,
button.search-close::-moz-focus-inner {
	border: 0;
	padding: 0;
}

.top-search-bar {
	visibility: hidden;
}

.open-search .top-search-bar {
	visibility: visible;
}

/* DOM order is now input -> submit button (9.2.4.3: the submit button used to
   come first in the source, so the reading order contradicted the visual
   order). The magnifier keeps its place to the left of the field, therefore
   flexbox instead of the previous display: table / float. */
.top-search-bar form {
	display: flex;
	align-items: center;
}

.top-search-bar .search-holder {
	float: none;
	order: -1;
	padding: 0;
	flex: 0 0 auto;
}

.top-search-bar .search-holder button {
	display: block;
	padding: 3px 48px 2px 0;
}

#top-search {
	flex: 1 1 auto;
	width: auto;
}


/* --------------------------------------------------------------------------
   9) 9.2.1.1 - "Mehr News laden" is a real <button> instead of an <a> without
   href, which was neither focusable nor operable by keyboard.
   The pill styling comes from .button in style.css; only the user-agent
   defaults of the button element are neutralised here.
   -------------------------------------------------------------------------- */

button.button,
button.load--more--posts.button {
	display: inline-block;
	font-family: inherit;
	line-height: inherit;
	letter-spacing: inherit;
	text-align: center;
	text-transform: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background-image: none;
}

button.button::-moz-focus-inner {
	border: 0;
	padding: 0;
}


/* --------------------------------------------------------------------------
   10) 9.2.2.2 - Pause control for autoplaying videos.
   --------------------------------------------------------------------------
   The background video in content-video-gif-box runs with autoplay/loop and
   lasts longer than five seconds, so a mechanism to stop it is required.
   The button is injected by accessibility.js next to the video;
   .a11y-video-parent only supplies the containing block.
   -------------------------------------------------------------------------- */

.a11y-video-parent {
	position: relative;
}

.a11y-video-toggle {
	position: absolute;
	right: 20px;
	bottom: 20px;
	z-index: 5;
	margin: 0;
	padding: 10px 18px 8px;
	border: 1px solid #003C5A;
	border-radius: 25px;
	background-color: #FFFFFF;
	color: #003C5A;
	font-family: inherit;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.2;
	cursor: pointer;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}

.a11y-video-toggle:hover {
	background-color: #003C5A;
	color: #FFFFFF;
}

.a11y-video-toggle::-moz-focus-inner {
	border: 0;
	padding: 0;
}

@media only screen and (max-width: 767px) {
	.a11y-video-toggle {
		right: 12px;
		bottom: 12px;
		padding: 8px 14px 6px;
		font-size: 12px;
	}
}


/* --------------------------------------------------------------------------
   11) 9.1.3.1 / 9.3.3.2 / 9.1.4.1 - Tariff calculator.
   --------------------------------------------------------------------------
   a) The ZIP and kWh fields only had a placeholder. Placeholders disappear on
      typing and are not a substitute for a label, so form-infos-box.php now
      renders a visible <label for>. The styling follows the existing form
      labels of the theme: small, uppercase, in the tile's own text colour.
   b) The active tab was distinguished from the inactive one by background
      colour alone. An additional underline inside the pill supplies a second,
      non-colour cue.
   -------------------------------------------------------------------------- */

.tab-content .calc-label {
	display: block;
	margin-bottom: 6px;
	font-family: 'Spartan', sans-serif;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0.15px;
	text-transform: uppercase;
	/* Inherits the tile's text colour, so the label works on every
	   background variant of .form-infos-left. */
	color: inherit;
}

/* The field kept the gap that used to sit below the previous field;
   the label now occupies part of it. */
.tab-content .calc-label + .form-control {
	margin-bottom: 18px;
}

/* style.css distinguishes the selected tab from the unselected one purely by
   background colour (#9187BE vs #003E59) - the only visible cue is colour,
   which 9.1.4.1 does not allow. The inset underline adds a second,
   non-colour cue. This is the one deliberately visible design change in this
   file; delete the rule if the selected tab should look exactly as before. */
.nav.nav-tabs li.active a {
	box-shadow: inset 0 -3px 0 currentColor;
}