/**
* Theme Name: Sosso Child
* Description: This is a child theme of Sosso, generated by Merlin WP.
* Author: KlbTheme (Sinan ISIK)
* Template: sosso
* Version: 1.25.0
*/
/* ============================================================
EU VISIBILITY BLOCK — rendered by footer.php on every page.
Emblem uses the NEG variant, correct for the dark footer.
Both logos share the same height, per the LIFE visual identity
guidance that the EU emblem is no smaller than other logos.
============================================================ */
.footer-area .eu-funding-strip {
display: flex;
align-items: center;
gap: 22px;
flex-wrap: wrap;
margin-top: 10px;
padding: 22px 0 6px;
border-top: 1px solid rgba(255, 255, 255, .15);
}
.footer-area .eu-funding-strip img {
height: 56px;
width: auto;
max-width: 100%;
display: block;
}
.footer-area .eu-funding-strip .eu-project-ref {
margin: 0;
font-size: 13px;
letter-spacing: .02em;
color: #ffffff; /* #c0c0c0 was 2.68:1 and #f0f0f0 4.27:1 on the green
footer; only white clears the 4.5:1 AA threshold */
white-space: nowrap;
}
@media (max-width: 575px) {
.footer-area .eu-funding-strip {
gap: 16px;
padding-top: 18px;
}
.footer-area .eu-funding-strip img {
height: 44px;
}
.footer-area .eu-funding-strip .eu-project-ref {
white-space: normal;
}
}
/* Back to top button override */
.back-to-top a {
background: linear-gradient(135deg, #5a7a48 30%, #7a5068 100%);
}
/* Footer top - remove divider and reduce height */
.footer-area .footer-top {
padding-top: 40px;
padding-bottom: 20px;
border-bottom: none;
margin-bottom: 20px;
}
/* Footer content - klb-about-widget overrides.
#c0c0c0 on the footer green is 2.68:1, below the 4.5:1 AA threshold for
text, so links use white; the border stays grey as it is decorative. */
.footer-area .footer-content ul li a {
color: #ffffff;
border-color: #c0c0c0;
}
.footer-area .footer-content ul li a:hover {
background: linear-gradient(135deg, #5a7a48 30%, #7a5068 100%);
border-color: #5a7a48;
color: #fff;
}
.footer-area .klb-about-widget ul li a {
color: #ffffff; /* was #c0c0c0 = 2.68:1 */
}
.footer-area .klb-about-widget ul li a:hover {
color: #ffffff; /* was #9bc47a = 2.45:1 */
text-decoration: underline;/* hover cue that does not rely on colour alone */
}
/* Footer info icons. Non-text UI components need 3:1 (WCAG 1.4.11);
#9bc47a was 2.45:1, #d6ecc6 is 3.87:1 and keeps the green tone. */
.footer-area .footer-info ul li a i {
color: #d6ecc6;
}
/* Submit / button gradient overrides */
.main-btn {
background: linear-gradient(135deg, #5a7a48 30%, #7a5068 100%);
}
.header-area .header-top .header-top-content .header-top-btns > a {
background: linear-gradient(135deg, #5a7a48 30%, #7a5068 100%);
}
.questions-area .questions-box .questions-box-item {
background: linear-gradient(135deg, #5a7a48 30%, #7a5068 100%);
}
#loading {
background: linear-gradient(135deg, #5a7a48 30%, #7a5068 100%);
}
/* Massage title accent bars */
.massage-title .title::before,
.massage-title .title::after {
background: #5a7a48 !important;
}
/* Submit buttons */
input[type="submit"],
button[type="submit"] {
background: linear-gradient(135deg, #5a7a48 30%, #7a5068 100%) !important;
color: #fff !important;
border: none;
cursor: pointer;
}
a{
color: #5a7a48;
}
a:hover {
color: #7a5068;
}
.klb-custom-title span {
color: #5a7a48 !important;
}
.klb-custom-title span:before {
background: #5a7a48 !important;
}
.section-title span {
color: #5a7a48 !important;
}
.section-title span::before,
.section-title span::after {
background: #5a7a48 !important;
}
/* ============================================================
POLYLANG LANGUAGE SWITCHER
Restyled to match sosso's original flag dropdown.
sosso's dropdown was built for its demo markup: a nested
.flag-item-top > .flag-item-bottom > .flag-item structure, with the
label absolutely positioned around a 40px round flag. Polylang emits a
FLAT list in which every carries .flag-item-top and there is no
.flag-item-bottom at all. So the theme's rules are neutralised first,
then the dropdown is rebuilt against Polylang's own classes.
Requires "Displays flags" ticked on the Language switcher menu item.
============================================================ */
/* --- neutralise the parent theme's demo-markup assumptions --- */
.header-flag .flag-wrap .flag-item-top .flag-bar span {
position: static !important;
top: auto !important;
left: auto !important;
padding-left: 0 !important;
display: inline-flex;
align-items: center;
font-size: 17px;
font-weight: 500;
transition: color .25s ease;
}
/* Polylang serves its flags as 16x11 base64 PNGs, which blur past ~18px.
The child theme ships circular 48x48 flags, so hide Polylang's image and
paint ours as a background instead. background-image is used rather than
content: url() because content on real (non-pseudo) elements only reached
Firefox in 128; background-image works everywhere. */
.header-flag .flag-wrap .flag-item-top .flag-bar img {
display: none !important;
}
.header-flag .flag-wrap .flag-item-top .flag-bar::before {
content: "";
flex: 0 0 28px;
width: 28px;
height: 28px;
margin-right: 12px;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
.header-flag .flag-wrap .lang-item-el .flag-bar::before {
background-image: url("assets/images/flags/greece-circular.png");
}
.header-flag .flag-wrap .lang-item-en .flag-bar::before {
background-image: url("assets/images/flags/great-britain-circular.png");
}
.header-flag .flag-wrap .lang-item-nl .flag-bar::before {
background-image: url("assets/images/flags/belgium-circular.png");
}
.header-flag .flag-wrap .flag-item-top .flag-bar span span {
margin-left: 0 !important;
}
/* --- container: reserve space so the panel never shifts the header --- */
.header-flag {
position: relative;
min-width: 190px;
min-height: 50px;
}
.header-flag .flag-wrap {
position: absolute !important;
top: 0;
right: 0;
z-index: 99;
min-width: 232px;
margin: 0 !important;
padding: 0;
list-style: none;
border-radius: 4px;
transition: background-color .2s ease, box-shadow .2s ease, padding .2s ease;
}
/* --- collapsed: only the active language is visible ---
The inactive languages are visually clipped rather than display:none, so
they stay in the tab order and in the accessibility tree. display:none
would remove them entirely, meaning :focus-within could never fire and a
keyboard user could not reach them at all (WCAG 2.1.1 Keyboard, Level A). */
.header-flag .flag-wrap > li.current-lang { display: block; }
.header-flag .flag-wrap > li:not(.current-lang) {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
clip-path: inset(50%);
white-space: nowrap;
}
.header-flag:hover .flag-wrap > li:not(.current-lang),
.header-flag:focus-within .flag-wrap > li:not(.current-lang) {
position: static;
width: auto;
height: auto;
overflow: visible;
clip: auto;
clip-path: none;
white-space: nowrap;
}
.header-flag .flag-wrap > li > .flag-bar {
position: relative;
display: flex !important;
align-items: center;
padding: 9px 34px 9px 12px;
white-space: nowrap;
text-decoration: none;
}
.header-flag .flag-wrap > li > .flag-bar span {
color: #ffffff !important;
}
/* caret on the active row (Polylang adds no icon of its own) */
.header-flag .flag-wrap > li.current-lang > .flag-bar::after {
content: "";
position: absolute;
right: 12px;
top: 50%;
width: 6px;
height: 6px;
margin-top: -5px;
border-right: 2px solid currentColor;
border-bottom: 2px solid currentColor;
transform: rotate(45deg);
transition: transform .25s ease, margin-top .25s ease;
}
.header-flag:hover .flag-wrap > li.current-lang > .flag-bar::after,
.header-flag:focus-within .flag-wrap > li.current-lang > .flag-bar::after {
transform: rotate(-135deg);
margin-top: -1px;
}
/* --- expanded: white panel, matching the theme's original treatment --- */
.header-flag:hover .flag-wrap,
.header-flag:focus-within .flag-wrap {
background-color: #ffffff;
box-shadow: 0 0 30px 0 rgba(0, 0, 0, .12);
padding: 8px 0;
}
.header-flag:hover .flag-wrap > li,
.header-flag:focus-within .flag-wrap > li { display: block; }
.header-flag:hover .flag-wrap > li > .flag-bar span,
.header-flag:focus-within .flag-wrap > li > .flag-bar span {
color: #222222 !important;
font-size: 16px;
}
.header-flag:hover .flag-wrap > li.current-lang > .flag-bar span,
.header-flag:focus-within .flag-wrap > li.current-lang > .flag-bar span {
font-weight: 600;
}
.header-flag:hover .flag-wrap > li > .flag-bar:hover,
.header-flag:focus-within .flag-wrap > li > .flag-bar:hover {
background-color: #f1f5ee;
}
.header-flag:hover .flag-wrap > li > .flag-bar:hover span,
.header-flag:focus-within .flag-wrap > li > .flag-bar:hover span {
color: #5a7a48 !important;
}
/* keyboard focus ring — the theme provides none */
.header-flag .flag-wrap > li > .flag-bar:focus-visible {
outline: 2px solid #5a7a48;
outline-offset: -2px;
}
/* --- mobile: flags-only inline row (hover doesn't exist on touch) --- */
@media (max-width: 991px) {
.header-flag {
min-width: 0;
min-height: 0;
}
.header-flag .flag-wrap {
position: static !important;
display: flex;
gap: 2px;
min-width: 0;
padding: 0;
background: none;
box-shadow: none;
}
.header-flag .flag-wrap > li { display: block !important; }
.header-flag .flag-wrap > li > .flag-bar { padding: 6px; }
.header-flag .flag-wrap > li > .flag-bar span { display: none; }
.header-flag .flag-wrap > li.current-lang > .flag-bar {
outline: 2px solid rgba(255, 255, 255, .85);
outline-offset: -1px;
border-radius: 3px;
}
.header-flag .flag-wrap > li.current-lang > .flag-bar::after { display: none; }
}
/* ============================================================
ACCESSIBILITY UTILITIES
============================================================ */
/* Visible to assistive technology, hidden visually. Used for the contact
form labels, so each field has a programmatic name without changing the
theme's placeholder-style design. */
.a11y-hidden {
position: absolute !important;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
/* The theme renders an empty header-info item when its Customizer field is
blank, producing - an empty link
with no accessible name (WCAG 2.4.4 / 4.1.2). Remove it from the page
entirely rather than leave an unnamed control in the tab order. */
.header-area .header-info .item a[href=""] {
display: none !important;
}
/* Visible keyboard focus for interactive elements the theme leaves unstyled
(WCAG 2.4.7 Focus Visible, Level AA). */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
outline: 3px solid #ffffff;
outline-offset: 2px;
}
.footer-area a:focus-visible,
.header-area a:focus-visible {
outline-color: #ffffff;
}
/* ============================================================
FOOTER COPYRIGHT
Parent theme centres this bar (.footer-copyright-content
{ text-align: center }) and colours the text #727272 on the #111
bar, which is 3.93:1 - below the 4.5:1 AA threshold.
Align it left with the footer content above and lift the contrast.
============================================================ */
.footer-area .footer-copyright .footer-copyright-content {
text-align: left;
justify-content: flex-start;
}
.footer-area .footer-copyright .footer-copyright-content p {
color: #b5b5b5; /* 9.21:1 on #111 */
text-align: left;
margin: 0;
}
.footer-area .footer-copyright .footer-copyright-content p a {
color: #ffffff;
text-decoration: underline;
}
.footer-area .footer-copyright .footer-copyright-content p a:hover,
.footer-area .footer-copyright .footer-copyright-content p a:focus-visible {
color: #d6ecc6;
}
/* ============================================================
FOOTER CONTRAST — remaining parent-theme colours
Measured against the footer background #4f6242. WCAG 1.4.3 (AA)
needs 4.5:1 for text; 1.4.11 needs 3:1 for icons and UI.
#bbbbbb 3.46:1 FAIL -> #dcdcdc 4.85:1
#adadad 2.96:1 FAIL -> #dcdcdc 4.85:1
#6cbe03 2.85:1 FAIL -> #d6ecc6 5.28:1
============================================================ */
.footer-area .footer-list ul li a,
.footer-area .footer-content p,
.footer-area .footer-info ul li a,
.footer-area .footer-top .footer-menu ul li a {
color: #dcdcdc;
}
.footer-area .footer-list ul li a:hover,
.footer-area .footer-list ul li a:focus-visible,
.footer-area .footer-info ul li a:hover,
.footer-area .footer-info ul li a:focus-visible,
.footer-area .footer-top .footer-menu ul li a:hover,
.footer-area .footer-top .footer-menu ul li a:focus-visible {
color: #ffffff;
text-decoration: underline;
}
/* Icons are non-text UI: 3:1 is the bar, but this clears 4.5:1 anyway. */
.footer-area .footer-info ul li a i,
.footer-area .footer-list ul li a i {
color: #d6ecc6;
}
/* The header email was an ; demoted to a span in functions.php so it no
longer sits as a heading before the page . Keep it rendering as a block
so the layout is identical. */
.header-area .header-info .item .title,
.header-area .header-info-item .title {
display: block;
}
/* Header contact text and the about-widget body were inheriting greys that
fail against the #4f6242 background:
#9a9a9a 2.36:1 FAIL -> #dcdcdc 4.85:1 */
.header-area .header-info .item span,
.header-area .header-info-item .header-info .item span,
.footer-area .klb-about-widget p,
.footer-area .klb-about-widget {
color: #dcdcdc;
}
.header-area .header-info .item .title {
color: #ffffff;
}
/* ============================================================
COMPLIANCE BLOCK — footer fourth column, under the contact widget.
Sits on the #4f6242 footer background, so the heading is white to
match the other footer column titles.
============================================================ */
.footer-area .compliance-block {
margin-top: 28px;
text-align: left; /* align with the contact widget above, not centred */
}
.footer-area .compliance-block .compliance-title {
/* .title comes from the theme (22px, white, 20px bottom pad) so the
heading matches "Useful links" exactly; only the top gap is ours. */
margin: 0;
}
.footer-area .compliance-block .achecker-badge,
.footer-area .compliance-block .green-web-badge {
display: block;
line-height: 0;
border-radius: 3px;
margin-bottom: 12px;
}
.footer-area .compliance-block .green-web-badge {
margin-bottom: 0;
}
.footer-area .compliance-block .achecker-badge img {
height: 32px;
width: auto;
display: block;
}
.footer-area .compliance-block .achecker-badge:focus-visible {
outline: 3px solid #ffffff;
outline-offset: 3px;
}
.footer-area .compliance-block .green-web-badge img {
height: 44px;
width: auto;
max-width: 100%;
display: block;
}
.footer-area .compliance-block .green-web-badge:focus-visible {
outline: 3px solid #ffffff;
outline-offset: 3px;
}
@media (max-width: 991px) {
.footer-area .compliance-block {
margin-top: 22px;
}
}
/* ============================================================
TYPOGRAPHY — Manrope, site-wide
Poppins has no Greek glyphs, so Greek pages fell back to a system
sans-serif and never matched the English ones. Manrope covers
Latin, Latin-Ext and Greek in a single family, so all three languages
share one typeface. Poppins is dequeued in functions.php.
!important is deliberate: the parent theme declares Poppins in sixteen
places at up to six levels of class nesting, and the Elementor kit,
Livemesh and Essential Addons sheets all add their own. Overriding each
one individually would be unmaintainable. Icon fonts are restored
explicitly below, since they must NOT inherit this.
============================================================ */
body,
h1, h2, h3, h4, h5, h6,
p, a, span, strong, em,
li, td, th, label,
button, input, select, textarea,
blockquote, figcaption,
.title,
.elementor-widget-container,
.elementor-heading-title {
font-family: "Manrope", "Helvetica Neue", Arial, sans-serif !important;
}
/* Icon fonts must be restored explicitly. "font-family: inherit" is wrong
here: with the rule above forced, inherit resolves to Manrope and every
glyph renders as an empty box. Font weights are untouched, so Font Awesome's
own .fal/.far/.fas weights (300/400/900) still apply.
Brands are excluded from the Pro rule via :not(.fab). Without that,
i[class*="fa-"]::before at (0,1,2) outranks .fab::before at (0,1,1), so
"fab fa-facebook-f" resolved to the Pro family, which contains no brand
glyphs - that is what emptied the social icons. */
.fa, .fas, .far, .fal, .fad,
i[class*="fa-"]:not(.fab),
span[class*="fa-"]:not(.fab),
.fa::before, .fas::before, .far::before, .fal::before, .fad::before,
i[class*="fa-"]:not(.fab)::before,
span[class*="fa-"]:not(.fab)::before {
font-family: "Font Awesome 5 Pro", "Font Awesome 5 Free", "FontAwesome" !important;
}
/* Brands live in their own family and must outrank the rule above. */
.fab,
i.fab,
span.fab,
.fab::before,
i.fab::before,
span.fab::before,
i[class*="fa-"].fab::before {
font-family: "Font Awesome 5 Brands" !important;
}
/* WordPress admin bar and anything else using Dashicons. */
.dashicons,
.dashicons-before::before,
[class*="dashicons-"],
[class*="dashicons-"]::before,
#wpadminbar .ab-icon::before,
#wpadminbar .ab-item::before,
#wpadminbar [class*="dashicons"]::before {
font-family: "dashicons" !important;
}
[class*="flaticon"],
[class*="flaticon"]::before {
font-family: "Flaticon" !important;
}
.eicon,
[class^="eicon-"],
[class*=" eicon-"],
[class^="eicon-"]::before,
[class*=" eicon-"]::before {
font-family: "eicons" !important;
}
/* Accessibility statement link, above the certification badges. */
.footer-area .compliance-block .accessibility-statement-link {
margin: 0 0 14px;
font-size: 14px;
}
/* Match the footer quick-links: no underline at rest, underline on hover.
Colours mirror .footer-area .footer-list ul li a above, so the two lists
read as one set. #dcdcdc is 4.85:1 on the #4f6242 footer, clearing AA. */
.footer-area .compliance-block .accessibility-statement-link a {
color: #dcdcdc;
text-decoration: none;
}
.footer-area .compliance-block .accessibility-statement-link a:hover,
.footer-area .compliance-block .accessibility-statement-link a:focus-visible {
color: #ffffff;
text-decoration: underline;
}
/* ============================================================
GREEK CAPITALISATION
The theme applies text-transform: capitalize to the navigation, which is
an English title-case convention. Greek does not capitalise articles and
prepositions this way - "Σχετικά Με Το" is orthographically wrong, the
correct form is "Σχετικά με το". The source text is already written
correctly, so simply stop transforming it on Greek pages.
============================================================ */
html[lang="el"] .navigation .navbar .navbar-nav .nav-item a,
html[lang="el"] .navbar-nav .menu-item a,
html[lang="el"] .sub-menu .menu-item a,
html[lang="el"] .footer-area .footer-list ul li a,
html[lang="el"] .footer-area .footer-menu ul li a {
text-transform: none !important;
}
/* ============================================================
EU FUNDING LINK — header contact strip, beside the email address.
Injected into the theme's contact repeater (see functions.php), so it
inherits .header-info .item styling automatically.
============================================================ */
/* The theme absolutely positions .item i inside a 55px left pad at 35px.
The emblem replaces that icon, so it takes the same position and scale. */
.header-area .header-info .item .eu-logo-icon {
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
height: 35px !important;
width: auto !important;
max-width: none !important; /* 263x176 needs ~52px of width at 35px tall;
a max-width cap constrains the WIDTH and
silently shrinks the height instead */
}
/* The theme reserves 55px of left padding for the icon. The emblem renders
~52px wide at 35px tall, leaving only ~3px before the text. Widen the pad on
just this item so the gap matches the other contact entries.
:has() is used because the theme gives every row the same bare .item class
and we do not fork its template to add one. */
.header-area .header-info .item:has(.eu-logo-icon) {
padding-left: 72px;
}
/* The theme prints when a contact row has no icon.
Our EU row supplies an image instead, so hide that exact empty case. */
.header-area .header-info .item i[class="fal fa-"] {
display: none !important;
}
/* Footer copy of the link. Inherits .footer-info ul li a from the theme so it
is typographically identical to the email address above it - no font-size or
font-weight of our own, only the icon alignment. */
.footer-area .footer-info.eu-funding-link {
margin-top: 0;
}
.footer-area .footer-info.eu-funding-link ul li a {
display: inline-flex;
align-items: center;
gap: 10px;
text-decoration: none;
}
.footer-area .footer-info.eu-funding-link ul li a:hover,
.footer-area .footer-info.eu-funding-link ul li a:focus-visible {
text-decoration: underline;
}
/* Stars only, no border or plate - matches the plain icon treatment used by
the contact item beside it. currentColor keeps it in step on hover. */
.footer-area .footer-info.eu-funding-link .eu-stars-icon {
width: 22px;
height: 22px;
flex: 0 0 22px;
}
/* ============================================================
FOOTER COLUMN TOPS
The widgets carry different top margins, so "Useful links" and
"Have questions? Get in touch!" started at different heights.
Normalise the first heading in every footer column.
============================================================ */
.footer-area .klbfooterwidget {
margin-top: 30px;
}
.footer-area .klbfooterwidget:first-child {
margin-top: 0;
}
.footer-area .footer-list .title,
.footer-area .footer-info .title,
.footer-area .compliance-block .title {
font-size: 22px;
line-height: 1.35;
margin-top: 0;
padding-bottom: 20px;
}
/* Visible keyboard focus for interactive elements the theme leaves unstyled
(WCAG 2.4.7 Focus Visible, Level AA). */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
outline: 3px solid #ffffff;
outline-offset: 2px;
}
.footer-area a:focus-visible,
.header-area a:focus-visible {
outline-color: #ffffff;
}
/* ============================================================
FOOTER COPYRIGHT
Parent theme centres this bar (.footer-copyright-content
{ text-align: center }) and colours the text #727272 on the #111
bar, which is 3.93:1 - below the 4.5:1 AA threshold.
Align it left with the footer content above and lift the contrast.
============================================================ */
.footer-area .footer-copyright .footer-copyright-content {
text-align: left;
justify-content: flex-start;
}
.footer-area .footer-copyright .footer-copyright-content p {
color: #b5b5b5; /* 9.21:1 on #111 */
text-align: left;
margin: 0;
}
.footer-area .footer-copyright .footer-copyright-content p a {
color: #ffffff;
text-decoration: underline;
}
.footer-area .footer-copyright .footer-copyright-content p a:hover,
.footer-area .footer-copyright .footer-copyright-content p a:focus-visible {
color: #d6ecc6;
}
/* ============================================================
FOOTER CONTRAST — remaining parent-theme colours
Measured against the footer background #4f6242. WCAG 1.4.3 (AA)
needs 4.5:1 for text; 1.4.11 needs 3:1 for icons and UI.
#bbbbbb 3.46:1 FAIL -> #dcdcdc 4.85:1
#adadad 2.96:1 FAIL -> #dcdcdc 4.85:1
#6cbe03 2.85:1 FAIL -> #d6ecc6 5.28:1
============================================================ */
.footer-area .footer-list ul li a,
.footer-area .footer-content p,
.footer-area .footer-info ul li a,
.footer-area .footer-top .footer-menu ul li a {
color: #dcdcdc;
}
.footer-area .footer-list ul li a:hover,
.footer-area .footer-list ul li a:focus-visible,
.footer-area .footer-info ul li a:hover,
.footer-area .footer-info ul li a:focus-visible,
.footer-area .footer-top .footer-menu ul li a:hover,
.footer-area .footer-top .footer-menu ul li a:focus-visible {
color: #ffffff;
text-decoration: underline;
}
/* Icons are non-text UI: 3:1 is the bar, but this clears 4.5:1 anyway. */
.footer-area .footer-info ul li a i,
.footer-area .footer-list ul li a i {
color: #d6ecc6;
}
/* The header email was an ; demoted to a span in functions.php so it no
longer sits as a heading before the page . Keep it rendering as a block
so the layout is identical. */
.header-area .header-info .item .title,
.header-area .header-info-item .title {
display: block;
}
/* Header contact text and the about-widget body were inheriting greys that
fail against the #4f6242 background:
#9a9a9a 2.36:1 FAIL -> #dcdcdc 4.85:1 */
.header-area .header-info .item span,
.header-area .header-info-item .header-info .item span,
.footer-area .klb-about-widget p,
.footer-area .klb-about-widget {
color: #dcdcdc;
}
.header-area .header-info .item .title {
color: #ffffff;
}
/* ============================================================
COMPLIANCE BLOCK — footer fourth column, under the contact widget.
Sits on the #4f6242 footer background, so the heading is white to
match the other footer column titles.
============================================================ */
.footer-area .compliance-block {
margin-top: 28px;
text-align: left; /* align with the contact widget above, not centred */
}
.footer-area .compliance-block .compliance-title {
/* .title comes from the theme (22px, white, 20px bottom pad) so the
heading matches "Useful links" exactly; only the top gap is ours. */
margin: 0;
}
.footer-area .compliance-block .achecker-badge,
.footer-area .compliance-block .green-web-badge {
display: block;
line-height: 0;
border-radius: 3px;
margin-bottom: 12px;
}
.footer-area .compliance-block .green-web-badge {
margin-bottom: 0;
}
.footer-area .compliance-block .achecker-badge img {
height: 32px;
width: auto;
display: block;
}
.footer-area .compliance-block .achecker-badge:focus-visible {
outline: 3px solid #ffffff;
outline-offset: 3px;
}
.footer-area .compliance-block .green-web-badge img {
height: 44px;
width: auto;
max-width: 100%;
display: block;
}
.footer-area .compliance-block .green-web-badge:focus-visible {
outline: 3px solid #ffffff;
outline-offset: 3px;
}
@media (max-width: 991px) {
.footer-area .compliance-block {
margin-top: 22px;
}
}
/* ============================================================
TYPOGRAPHY — Manrope, site-wide
Poppins has no Greek glyphs, so Greek pages fell back to a system
sans-serif and never matched the English ones. Manrope covers
Latin, Latin-Ext and Greek in a single family, so all three languages
share one typeface. Poppins is dequeued in functions.php.
!important is deliberate: the parent theme declares Poppins in sixteen
places at up to six levels of class nesting, and the Elementor kit,
Livemesh and Essential Addons sheets all add their own. Overriding each
one individually would be unmaintainable. Icon fonts are restored
explicitly below, since they must NOT inherit this.
============================================================ */
body,
h1, h2, h3, h4, h5, h6,
p, a, span, strong, em,
li, td, th, label,
button, input, select, textarea,
blockquote, figcaption,
.title,
.elementor-widget-container,
.elementor-heading-title {
font-family: "Manrope", "Helvetica Neue", Arial, sans-serif !important;
}
/* Icon fonts must be restored explicitly. "font-family: inherit" is wrong
here: with the rule above forced, inherit resolves to Manrope and every
glyph renders as an empty box. Font weights are untouched, so Font Awesome's
own .fal/.far/.fas weights (300/400/900) still apply.
Brands are excluded from the Pro rule via :not(.fab). Without that,
i[class*="fa-"]::before at (0,1,2) outranks .fab::before at (0,1,1), so
"fab fa-facebook-f" resolved to the Pro family, which contains no brand
glyphs - that is what emptied the social icons. */
.fa, .fas, .far, .fal, .fad,
i[class*="fa-"]:not(.fab),
span[class*="fa-"]:not(.fab),
.fa::before, .fas::before, .far::before, .fal::before, .fad::before,
i[class*="fa-"]:not(.fab)::before,
span[class*="fa-"]:not(.fab)::before {
font-family: "Font Awesome 5 Pro", "Font Awesome 5 Free", "FontAwesome" !important;
}
/* Brands live in their own family and must outrank the rule above. */
.fab,
i.fab,
span.fab,
.fab::before,
i.fab::before,
span.fab::before,
i[class*="fa-"].fab::before {
font-family: "Font Awesome 5 Brands" !important;
}
/* WordPress admin bar and anything else using Dashicons. */
.dashicons,
.dashicons-before::before,
[class*="dashicons-"],
[class*="dashicons-"]::before,
#wpadminbar .ab-icon::before,
#wpadminbar .ab-item::before,
#wpadminbar [class*="dashicons"]::before {
font-family: "dashicons" !important;
}
[class*="flaticon"],
[class*="flaticon"]::before {
font-family: "Flaticon" !important;
}
.eicon,
[class^="eicon-"],
[class*=" eicon-"],
[class^="eicon-"]::before,
[class*=" eicon-"]::before {
font-family: "eicons" !important;
}
/* Accessibility statement link, above the certification badges. */
.footer-area .compliance-block .accessibility-statement-link {
margin: 0 0 14px;
font-size: 14px;
}
/* Match the footer quick-links: no underline at rest, underline on hover.
Colours mirror .footer-area .footer-list ul li a above, so the two lists
read as one set. #dcdcdc is 4.85:1 on the #4f6242 footer, clearing AA. */
.footer-area .compliance-block .accessibility-statement-link a {
color: #dcdcdc;
text-decoration: none;
}
.footer-area .compliance-block .accessibility-statement-link a:hover,
.footer-area .compliance-block .accessibility-statement-link a:focus-visible {
color: #ffffff;
text-decoration: underline;
}
/* ============================================================
GREEK CAPITALISATION
The theme applies text-transform: capitalize to the navigation, which is
an English title-case convention. Greek does not capitalise articles and
prepositions this way - "Σχετικά Με Το" is orthographically wrong, the
correct form is "Σχετικά με το". The source text is already written
correctly, so simply stop transforming it on Greek pages.
============================================================ */
html[lang="el"] .navigation .navbar .navbar-nav .nav-item a,
html[lang="el"] .navbar-nav .menu-item a,
html[lang="el"] .sub-menu .menu-item a,
html[lang="el"] .footer-area .footer-list ul li a,
html[lang="el"] .footer-area .footer-menu ul li a {
text-transform: none !important;
}
/* ============================================================
EU FUNDING LINK — header contact strip, beside the email address.
Injected into the theme's contact repeater (see functions.php), so it
inherits .header-info .item styling automatically.
============================================================ */
.header-area .header-info .item .eu-logo-icon {
height: 26px;
width: auto;
display: inline-block;
vertical-align: middle;
margin-right: 8px;
}
.header-area .header-info .item .eu-header-label {
vertical-align: middle;
}
/* The theme prints when a contact row has no icon.
Our EU row supplies an image instead, so hide that exact empty case -
an empty icon element would otherwise take up space in the strip. */
.header-area .header-info .item i[class="fal fa-"] {
display: none !important;
}
/* ============================================================
FOOTER COLUMN ALIGNMENT
The theme gives footer menu links "margin-left: -22px" inside a
that still carries the browser's default padding, so the links sit at a
different indent from their own heading - and from the Compliance block
beneath them. Zero both so heading, links, statement link and badges
share one left edge. The hover slide is kept, just reversed to move
right from flush rather than left from indented.
============================================================ */
.footer-area .footer-list.widget_nav_menu ul {
padding-left: 0;
margin-left: 0;
list-style: none;
}
.footer-area .footer-list.widget_nav_menu ul li a {
margin-left: 0;
}
.footer-area .footer-list.widget_nav_menu ul li a:hover,
.footer-area .footer-list.widget_nav_menu ul li a:focus-visible {
margin-left: 5px;
}
.footer-area .compliance-block .accessibility-statement-link {
text-align: left;
}
/* ============================================================
PERSISTENT EU FUNDING BADGE — rendered by footer.php.
Pinned bottom-left so it never collides with the back-to-top
control in the opposite corner. The wrapper is click-through
(pointer-events: none) and only the link itself takes pointer
events back, so the badge can never swallow clicks on content
sitting behind its box.
The POS (colour-on-light) emblem variant is used here because
it sits on a white pill, unlike the footer strip which uses
NEG on dark green.
============================================================ */
.eu-sticky-banner {
position: fixed;
left: 20px;
bottom: 20px;
z-index: 998;
pointer-events: none;
}
.eu-sticky-banner a {
pointer-events: auto;
display: block;
line-height: 0;
padding: 8px 12px;
background: #fff;
border-radius: 6px;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.18);
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.eu-sticky-banner a:hover,
.eu-sticky-banner a:focus-visible {
transform: translateY(-2px);
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.26);
}
/* Visible focus ring in the EU flag blue, meeting the 3:1 contrast
requirement for non-text indicators against the white pill. */
.eu-sticky-banner a:focus-visible {
outline: 3px solid #004494;
outline-offset: 3px;
}
.eu-sticky-banner img {
display: block;
height: 40px;
width: auto;
max-width: none;
}
/* Retired while the footer is on screen - see the observer in footer.php.
visibility (not display) keeps the transition, and removing it from the
tab order stops keyboard users landing on an invisible link. */
.eu-sticky-banner.is-hidden {
opacity: 0;
visibility: hidden;
transform: translateY(10px);
transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s linear 0.25s;
}
.eu-sticky-banner {
transition: opacity 0.25s ease, transform 0.25s ease;
}
/* Below the large-tablet breakpoint the badge starts competing with
the mobile navigation and with page content. The footer strip
already carries the emblem and funding statement on every page,
so the visibility requirement stays satisfied without it. */
@media (max-width: 991px) {
.eu-sticky-banner {
display: none;
}
}
@media print {
.eu-sticky-banner {
display: none;
}
}
@media (prefers-reduced-motion: reduce) {
.eu-sticky-banner,
.eu-sticky-banner a {
transition: none;
}
.eu-sticky-banner a:hover,
.eu-sticky-banner a:focus-visible {
transform: none;
}
.eu-sticky-banner.is-hidden {
transform: none;
}
}