/* ==========================================================================
   Accessibility
   Implementation of deficiencies from the "Accessibility Audit Report" dated 06.08.2026
   (Testing Center for Accessible IT Schleswig-Holstein / DIAS GmbH),
   Audit according to BITV 2.0 and EN 301 549 v3.2.1.

   Stadtwerke Itzehoe: ported from the Stadtwerke Glückstadt theme, which
   shares the same components. Colours are adapted to this theme
   (dark blue #003C5A instead of #003E59).

   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 Displayed content on hover or focus

   This file is loaded after style.css (see functions.php) and
   intentionally overrides its rules - including the older
   "/*Accesibility focus indicator block in style.css, which is left in place.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1) 9.2.4.7 - Focus indicator
   --------------------------------------------------------------------------
   Two-tone ring: white on the inside, dark blue on the outside. This ensures
   that the indicator meets the required 3.0:1 contrast on both light and dark
   backgrounds (the website uses e.g. #FFFFFF, #EDEDED, #003C5A, #FF2850).
   -------------------------------------------------------------------------- */

:root {
	--a11y-focus-inner: #FFFFFF;
	--a11y-focus-outer: #003C5A;
	--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 {
	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;
}

/* 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 existing "outline: 0 !important" rules.
   --------------------------------------------------------------------------
   With !important, specificity decides, not order. The following selectors
   therefore mirror the original selectors from style.css and
   add :focus-visible to reliably override them.
   -------------------------------------------------------------------------- */

/* style.css: .lp-calculator-form-holder .gform_next_button, ... .gform_button.button */
.lp-calculator-form-holder .gform_next_button:focus-visible,
.lp-calculator-form-holder .gform_button.button:focus-visible,
/* style.css: .lp-calculator-form-holder .gform_previous_button */
.lp-calculator-form-holder .gform_previous_button:focus-visible,
/* style.css: .slider-people-holder .krempe-slider-persons input */
.slider-people-holder .krempe-slider-persons input:focus-visible,
/* style.css: .gform-theme--framework .gfield:where(...) .chosen-container-single .chosen-single */
.gform-theme--framework .gfield .chosen-container-single .chosen-single:focus-visible,
/* style.css: #top-search / submit buttons use their own !important ring */
#top-search:focus-visible,
button[type="submit"]:focus-visible,
input[type="submit"]:focus-visible,
/* slick.min.css / jquery-ui.css also set outline: 0 */
.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 is inside the track; place ring inward
   so it's not clipped. */
.ui-slider .ui-slider-handle:focus-visible {
	outline-offset: 2px !important;
}

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


/* --------------------------------------------------------------------------
   1c) Selectric: the focusable element is a visually hidden
   <input class="selectric-input">. Focus must therefore be shown
   on the visible .selectric box.
   -------------------------------------------------------------------------- */

.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 was previously only visible on :hover
   must also be visible on keyboard focus.
   -------------------------------------------------------------------------- */

/* Main navigation: Flyout also opens via keyboard now.
   .submenu-open is set by js/accessibility.js (aria-expanded-sync,
   close with Escape - see 9.1.4.13). */
.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 "Wir powern Lebensqualität" (slider-infos-box):
   the revealed text and the links it contains would otherwise not
   be accessible for keyboard users. */
.each-slide-info:focus-within .each-slide-hidden,
.each-slide-info.is-revealed .each-slide-hidden {
	opacity: 1;
	visibility: visible;
	pointer-events: initial;
	max-height: none;
}

/* Side widget (location / email / phone): operable as disclosure.
   .active_floating is now also set via keyboard (accessibility.js). */
.floating-bar .floating-item:focus-within,
.floating-bar .floating-item.active_floating {
	pointer-events: initial;
}


/* --------------------------------------------------------------------------
   3) Elements that have been changed from <div role="button"> to <button>
   must appear visually unchanged (reset browser default).
   -------------------------------------------------------------------------- */

.search-holder.search-toggle,
.search-close,
.floating-item > .floating-disclosure,
.load--more--posts {
	-webkit-appearance: none;
	appearance: none;
	background: none;
	border: 0;
	margin: 0;
	font: inherit;
	color: inherit;
	text-align: inherit;
	cursor: pointer;
}

/* .load--more--posts previously had .button styling as <a>; as <button>
   browser defaults must not override this. */
button.button,
button.load--more--posts.button {
	display: inline-block;
	font-family: inherit;
	line-height: inherit;
}

/* Itzehoe: the main menu search toggle was a <div>. Unlike the Glückstadt
   theme, .main-menu is not a flex container here, so the toggle keeps the
   float and padding from .search-holder in style.css - only the button
   defaults are neutralised. */
.main-menu button.search-holder.search-toggle {
	background-color: transparent;
	line-height: 0;
}

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

/* Itzehoe: the mobile menu toggle (.menu--stripes) was a
   <div role="button" tabindex="0"> and is a real <button> now. Its size and
   position come from style.css; only the user-agent defaults are removed. */
button.menu--stripes {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background: transparent;
	border: 0;
	border-radius: 0;
	font: inherit;
	color: inherit;
}

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


/* --------------------------------------------------------------------------
   4) Helper class: visually hidden, but readable for screen readers.
   -------------------------------------------------------------------------- */

.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 (e.g. skip links). */
.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 reduced motion preference (additionally, not a requirement of the
   simplified monitoring, 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 now real <button> elements instead of
   <div role="button" tabindex="0">. The div gave a fake button that did not
   react to Enter and, where it wrapped a link, produced an empty tab stop.

   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 of this file has to remain the only visible one. */
button.each-faq-filter::-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, therefore the link is placed above it explicitly.
   -------------------------------------------------------------------------- */

.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 - Main navigation flyout also opens on keyboard focus.
   --------------------------------------------------------------------------
   style.css opens .submenu-holder only via :hover and the current-page
   classes, so keyboard users never saw the submenu even though
   accessibility.js sets aria-expanded correctly. The class .submenu-open is
   toggled there via Enter/Space.
   -------------------------------------------------------------------------- */

.main-menu li:focus-within .submenu-holder,
.main-menu li.submenu-open .submenu-holder {
	opacity: 1;
	visibility: visible;
	pointer-events: initial;
}


/* --------------------------------------------------------------------------
   9) 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) binds for the first time. Two things follow from
   that and are handled here:

   a) User-agent button defaults must not disturb the existing layout.
      .search-close keeps its red background from style.css - deliberately
      not overridden here.
   b) While the bar is collapsed (max-height: 0) its fields stayed reachable
      with Tab. visibility: hidden takes them 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 magnifier keeps its
   place to the left of the field, therefore flexbox instead of 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;
}


/* --------------------------------------------------------------------------
   10) 9.2.1.1 - "Mehr News laden" is a real <button> instead of
   <a role="button" tabindex="0">.
   --------------------------------------------------------------------------
   The pill styling comes from .button in style.css; only the user-agent
   defaults of the button element are neutralised here.
   -------------------------------------------------------------------------- */

button.button {
	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;
}


/* --------------------------------------------------------------------------
   11) 9.2.2.2 - Pause control for autoplaying videos.
   --------------------------------------------------------------------------
   The button is injected by accessibility.js (section 12) next to the video.
   .a11y-video-parent only supplies the containing block; .video-gif-media is
   position: relative already, the wrapper of box-floating-content is not.
   -------------------------------------------------------------------------- */

.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;
}

/* Itzehoe: box-floating-content can also render a round volume button
   (.box-floating-video-volume, 48px, bottom right). The pause control moves
   left of it so the two controls never overlap. In the top_right variant the
   volume button sits on the left, so the default position is free again. */
.box-floating-video-wrapper .box-floating-video-volume ~ .a11y-video-toggle {
	right: 80px;
	bottom: 24px;
}

.box-floating-content.top_right .box-floating-video-wrapper .box-floating-video-volume ~ .a11y-video-toggle {
	right: 20px;
}

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

	.box-floating-video-wrapper .box-floating-video-volume ~ .a11y-video-toggle {
		right: 72px;
		bottom: 22px;
	}
}


/* --------------------------------------------------------------------------
   12) 9.1.3.1 / 9.3.3.2 / 9.1.4.1 - Tariff calculator.
   --------------------------------------------------------------------------
   a) The ZIP and kWh fields only had a placeholder (the existing labels were
      .visually-hidden). 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. In contrast mode 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 25px 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;
}


.accesibility-on .nav.nav-tabs li.active a {
	box-shadow: inset 0 -3px 0 #FFFFFF;
}


/* --------------------------------------------------------------------------
   13) 9.2.1.1 / 9.2.4.7 - Side widget disclosure buttons.
   --------------------------------------------------------------------------
   header.php renders an empty <button class="floating-disclosure"> as the
   first child of every .floating-item (phone, location, e-mail). Without a
   size it would only be a few pixels wide, so its focus ring would be
   practically invisible. It is laid over the icon square instead; the icon
   keeps its position, so no existing layout rule changes.

   The panel expansion itself already works on :focus-within in style.css
   (min-width: 1024px) and via .active_floating below that width.
   -------------------------------------------------------------------------- */

.floating-item > .floating-disclosure {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 3;
	width: 80px;
	max-width: 100%;
	height: 100%;
	padding: 0;
}

/* .floating-item has overflow: hidden for the expand animation, which would
   clip the outer half of the standard focus ring. It is therefore drawn
   inwards here: dark band along the edge, white line just inside it. */
.floating-item > .floating-disclosure:focus-visible {
	outline-offset: -6px !important;
	box-shadow: inset 0 0 0 6px var(--a11y-focus-outer) !important;
}

/* The FAQ tile is a real link now instead of a <span> with an empty overlay
   link on top. It has to look exactly like the former text. */
.floating-item.floating-item-faq .floating-box .floating-faq-link {
	display: block;
	color: inherit;
	text-decoration: none;
}


/* --------------------------------------------------------------------------
   14) Eye-Able "Jump in the heading order" (WCAG 1.3.1 / EN 9.1.3.1).
   --------------------------------------------------------------------------
   The post titles in list-posts-news.php (+ its Ajax "load more" output in
   functions.php) are h3 now and in waermelink-zentrum-posts.php h2 - they
   used to be h5 directly below an h1/h2. The heading level changes, the look
   must not: .post-title-heading reproduces the former h5 size at every
   breakpoint. The class selector outranks the plain h2/h3 font-size rules in
   the media queries of style.css regardless of source order.
   -------------------------------------------------------------------------- */

.post-title .post-title-heading {
	font-size: 20px;
}

@media (max-width: 1279px) {
	.post-title .post-title-heading {
		font-size: 18px;
	}
}

@media (max-width: 479px) {
	/* style.css: .list-posts .post-title h5 { height: auto !important; } */
	.list-posts .post-title .post-title-heading {
		height: auto !important;
	}
}

/* style.css: .waermelinkzentrum-posts-holder .post-title h5 */
.waermelinkzentrum-posts-holder .post-title .post-title-heading {
	margin-bottom: 5px;
}

/* style.css contrast mode: .accesibility-on .post-title h5 { color: #000; } */
.accesibility-on .post-title .post-title-heading {
	color: #000;
}

/* --------------------------------------------------------------------------
   16) Eye-Able "Paragraph has insufficient line-height" (WCAG 1.4.8 AAA,
   EN 301 549 9.1.4.8) - paragraphs need a line-height of at least 1.5.
   --------------------------------------------------------------------------
   body already uses 1.5, but these rules in style.css set a smaller value on
   <p> elements (or on the block that contains them):
     .each-contact-info p                     1.2  (contact info boxes)
     .contact-app.contact-app-left .content    1.3  (contact app box text)
     .each-faq p.h5                            1.4  (FAQ card questions)
     .post-title p.h5                          1.2  (news slider titles)
   The selectors below mirror the originals, so they win on specificity and
   need no !important. Unitless 1.5 scales with every responsive font-size.
   Plain <p> gets the value explicitly as well, in case a container sets a
   smaller line-height that paragraphs would otherwise inherit.
   -------------------------------------------------------------------------- */

p,
.each-contact-info p,
.contact-app.contact-app-left .content,
.contact-app.contact-app-left .content p,
.each-faq p.h5,
.post-title p.h5 {
	line-height: 1.5;
}