/* ============================================================
TCH Accessibility Fixes — WAVE corrections
File: tch2016-a11y.css
Created: 2026-04-27
PURPOSE:
Collects ALL CSS fixes for findings reported by WAVE
(https://wave.webaim.org/). The original tch2016.css is
NOT modified — this file is loaded AFTER it, so its rules
take precedence.
LOAD ORDER (in HTML ):
============================================================ */
/* ------------------------------------------------------------
FIX #1: Empty link (WAVE: 4 errors)
------------------------------------------------------------
Redefines .sr-only using the standard "clip technique".
This visually hides text but keeps it available to screen
readers AND to evaluation tools (such as WAVE), so that the
accessible-name text injected by func-a11y.js is recognized
as the accessible name of the .
We use !important because the original tch2016.css and
Bootstrap may define .sr-only differently.
------------------------------------------------------------ */
.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;
white-space: nowrap !important;
border: 0 !important;
/* FIX #4 addition (see below): give explicit foreground/background
so WAVE measures a real contrast ratio (21:1) instead of
sampling 1:1 from inherited/transparent values.
Visually irrelevant — the element is clipped to 1x1px. */
color: #000000 !important;
background-color: #ffffff !important;
}
/* ------------------------------------------------------------
FIX #2: Low contrast in top header bar (WAVE: 2 contrast errors)
------------------------------------------------------------
WAVE reported foreground #333333 on background #3D3D3E
(ratio 1.16:1) — fails WCAG AA and AAA.
Affected area: the dark gray top strip (.topheader) which
contains the language switcher (.lang → "GR | EN") and the
right-side links / search widget.
Root cause: tch2016.css line ~504 sets `.lang a { color:#fff }`,
but Bootstrap's generic anchor / .navbar-default rules take
precedence in some states and produce computed color #333.
Solution: force white (#fff) on every text-bearing element
inside .topheader. White on #3D3D3E gives a 10.9:1 ratio
(passes AAA). !important is required to beat Bootstrap.
------------------------------------------------------------ */
.topheader,
.topheader a,
.topheader a:link,
.topheader a:visited,
.topheader a:hover,
.topheader a:focus,
.topheader a:active,
.topheader .lang,
.topheader .lang a,
.topheader nav a,
.topheader .navbar-nav > li > a,
.topheader .search-wr,
.topheader .search-wr a,
.topheader .search-wr input,
.topheader .search-wr input::placeholder,
.topheader .topnav,
.topheader .topnav a {
color: #ffffff !important;
}
/* Ensure the search input itself stays readable: white text on
the same dark background, with a slightly lighter placeholder. */
.topheader .search-wr input {
background-color: transparent !important;
border-color: #ffffff !important;
}
.topheader .search-wr input::placeholder {
color: #d0d0d0 !important;
opacity: 1 !important;
}
/* ------------------------------------------------------------
FIX #3: Low contrast in main header menu (WAVE: 8 contrast errors)
------------------------------------------------------------
WAVE reported foreground #333333 on background #1A181B
(ratio 1.39:1) — fails WCAG AA and AAA.
Affected area: the main black header bar (.main-header,
background #1A181B) containing the primary menu items
(ΕΚΔΗΛΩΣΕΙΣ, ΚΑΛΛΙΤΕΧΝΕΣ, ΣΥΝΕΔΡΙΑ, ΕΚΠΑΙΔΕΥΤΙΚΑ ΠΡΟΓΡΑΜΜΑΤΑ,
ΕΜΠΕΙΡΙΕΣ ΣΤΟ ΜΕΓΑΡΟ, ΕΙΣΙΤΗΡΙΑ) and their dropdown sub-items.
Root cause:
- The