/*
 * Shell layout: fixed topbar + fixed header, main body offset, footer, off-canvas panel.
 * Breakpoints are the Joomla template's own (1200 / 979 / 980 / 768 / 767 / 480 / 332 / 320).
 * Written from scratch (Q25); values from tokens.css and the computed styles of the reference.
 */

.body-innerwrapper {
	overflow-x: hidden;
	transition: margin-left var(--icf-motion-offcanvas-duration) var(--icf-motion-offcanvas-easing);
}

/* ---- Topbar ------------------------------------------------------------------------------------ */

#sp-top-bar {
	position: fixed;
	z-index: var(--icf-z-topbar);
	width: 100%;
	min-height: var(--icf-size-topbar-min) !important;
	padding: 2px 0;
	color: var(--icf-color-white);
	background-color: var(--icf-color-primary);
	transition: 0.4s;
}

#sp-top-bar a {
	color: var(--icf-color-white);
}

#sp-top-bar .sp-module {
	margin: 0 0 0 20px;
}

#sp-top-bar ul li {
	line-height: 38px;
}

/* Lists inside module boxes are flush; module links default to black (topbar/footer override). */
.sp-module ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.sp-module ul > li > a {
	color: var(--icf-color-black);
}

.sp-module ul > li > a:hover {
	color: var(--icf-color-primary);
}

.sp-contact-info {
	float: left;
}

.sp-contact-info li {
	display: inline-block;
	margin: 0 10px;
}

#sp-top-bar .sp-contact-info li {
	margin-left: 0;
	margin-right: 55px;
}

/* Language switcher (Joomla mod_languages, inline list) */
.mod-languages {
	float: right;
}

.mod-languages ul.lang-inline {
	margin: 0;
	padding: 0;
	list-style: none;
}

.mod-languages ul.lang-inline li {
	display: inline-block;
	margin: 0 5px 0 0;
	border: none;
}

.mod-languages ul.lang-inline li:first-child {
	padding-right: 8px;
	border-right: 1px solid var(--icf-color-white) !important;
}

.mod-languages ul.lang-inline li a {
	padding: 0 !important;
	text-decoration: none;
}

/* Social icon lists (topbar and footer); the "fb"/"tw" labels are collapsed. */
ul.social-icons {
	display: inline-block;
	float: right;
	margin: 0;
	padding: 0;
	list-style: none;
}

ul.social-icons > li {
	display: inline-block;
	margin: 0 7px !important;
}

.social-icons span.text {
	font-size: 0;
}

@media (min-width: 979px) and (max-width: 1200px) {
	#sp-top-bar .sp-contact-info li {
		margin-right: 30px;
	}
}

@media (max-width: 979px) {
	#sp-top-bar .sp-module {
		margin: 0 0 0 10px;
	}
}

@media (max-width: 768px) {
	#sp-top-bar {
		text-align: center;
	}

	#sp-top-bar .sp-module {
		margin: 0 auto !important;
		text-align: center;
	}

	#sp-top1 .sp-contact-info {
		display: inline-block;
		float: none;
		margin: 0 auto;
	}

	#sp-top1 .sp-contact-info li {
		margin-right: 0;
	}

	#sp-top1 .sp-contact-info .sp-contact-phone {
		margin-right: 15px;
	}
}

/* Comes after the ≤768 block on purpose: at exactly 768px the e-mail item takes 7px, as on the reference. */
@media (min-width: 768px) and (max-width: 979px) {
	#sp-top-bar {
		font-size: 12px;
	}

	#sp-top-bar .sp-contact-info li {
		margin-right: 7px;
	}
}

@media (max-width: 767px) {
	.mod-languages,
	ul.social-icons {
		float: none !important;
	}
}

@media (max-width: 480px) {
	#sp-top-bar {
		padding: 10px 0;
	}

	#sp-top-bar ul li {
		font-size: 13px;
		line-height: 30px;
	}
}

/* ---- Header ------------------------------------------------------------------------------------ */

#sp-header-sticky-wrapper {
	position: fixed;
	z-index: var(--icf-z-header);
	top: var(--icf-size-topbar-min);
	width: 100%;
}

#sp-header {
	position: relative;
	z-index: 990;
	background: var(--icf-color-header-bg);
	box-shadow: var(--icf-shadow-header);
}

#sp-header .row {
	position: relative;
}

#sp-header .logo {
	display: table;
	height: var(--icf-size-header);
}

.sp-default-logo {
	width: var(--icf-size-logo);
}

#sp-menu {
	position: static;
}

#sp-menu > .sp-column {
	float: right;
}

#sp-menu .sp-megamenu-wrapper {
	display: inline-block;
	float: left;
}

#offcanvas-toggler {
	display: none;
	float: right;
	line-height: var(--icf-size-header);
	color: var(--icf-color-primary);
}

@media (max-width: 979px) {
	#sp-header .logo {
		height: 60px;
	}

	#offcanvas-toggler {
		margin-right: 20px;
		line-height: 60px;
	}
}

@media screen and (max-width: 980px) {
	#offcanvas-toggler {
		display: block;
		margin-top: 15px;
	}
}

@media (max-width: 767px) {
	#sp-header-sticky-wrapper {
		top: 118px !important;
	}
}

@media (max-width: 480px) {
	#sp-header-sticky-wrapper {
		top: 112px !important;
	}

	#sp-logo {
		width: 40%;
	}

	#sp-menu {
		width: 60%;
	}
}

@media (max-width: 332px) {
	#sp-header-sticky-wrapper {
		top: 145px !important;
	}
}

@media (max-width: 320px) {
	.logo img {
		width: 75%;
	}
}

/* ---- Main body --------------------------------------------------------------------------------- */

/* Bottom edge of the fixed shell (topbar + header). site.js sets the exact value; these are the
   no-JS fallbacks: header top (118 / 112 / 145px) + header height (89px). */
:root {
	--icf-shell-height: var(--icf-size-shell-offset);
}

@media (max-width: 767px) {
	:root {
		--icf-shell-height: 207px;
	}
}

@media (max-width: 480px) {
	:root {
		--icf-shell-height: 201px;
	}
}

@media (max-width: 332px) {
	:root {
		--icf-shell-height: 234px;
	}
}

/* Full-width top sections (home slider, Private Label banner) start below the shell. On the reference
   they start at 142px and lose up to ~60px under the header on phones (deviation A21). The offset
   follows the header's bottom edge at every width, so the same happens wherever the header grows
   taller: the EN menu wraps to two rows at 981-1199px (header 200px) and the content starts at 242px
   instead of the reference's 142px (A21 extension approved 24/09/2026, F16). Where the header has its
   normal height the offset is 142px as on the reference. */
.icf-below-shell {
	margin-top: max(var(--icf-size-shell-offset), var(--icf-shell-height));
}

#sp-title {
	min-height: 0;
}

/* Content pages sit below the fixed shell; page-builder templates override (tpl-home etc.). */
section#sp-main-body {
	margin-top: var(--icf-size-shell-offset);
	padding: 100px 0;
}

@media (max-width: 768px) {
	section#sp-main-body {
		padding: 60px 0;
	}
}

/* Home (L01): the page builder content sits flush; its .page-content carries the shell offset
   (.icf-below-shell), as the reference's .page-content { margin-top: 142px }. */
.tpl-home section#sp-main-body {
	margin-top: 0;
	padding: 0;
}

/* The other page-builder pages (L02–L04): no padding in #sp-main-body (the reference's .com-sppagebuilder
   #sp-main-body), and the builder's .page-content 142px lower (.page-content { margin-top: 142px }). The contact page
   also drops the #sp-main-body margin (.itemid-287/305 section#sp-main-body { margin: 0 }): its content starts at
   142px. The partners and partner-with-us pages keep both margins and start at 284px: the .row::before table between
   the two stops them from collapsing. Their tops never sit under the fixed header (no A21). */
.tpl-contact section#sp-main-body {
	margin-top: 0;
	padding: 0;
}

.tpl-partners section#sp-main-body,
.tpl-partner-with-us section#sp-main-body {
	padding: 0;
}

.tpl-contact .page-content,
.tpl-partners .page-content,
.tpl-partner-with-us .page-content {
	margin-top: var(--icf-size-shell-offset);
}

/* Private Label (L06): the reference's article view with the menu page class «private-label»: no padding in
   #sp-main-body and a full-width container (.private-label section#sp-main-body …). The section itself carries
   .icf-below-shell (A21): 142px where the fixed header has its normal height, below the header where it grows
   taller (phones; EN at 981–1199px, where the menu wraps). The banner starts 10px lower, after the empty paragraph
   that the reference's {loadposition} inside a <p> leaves (K29). */
.tpl-private-label section#sp-main-body {
	padding: 0;
}

.tpl-private-label section#sp-main-body.icf-below-shell {
	margin-top: max(var(--icf-size-shell-offset), var(--icf-shell-height));
}

.tpl-private-label section#sp-main-body .container {
	width: 100%;
}

/* ---- Footer ------------------------------------------------------------------------------------ */

#sp-footer {
	padding: 60px 0;
	color: var(--icf-color-white);
	text-align: center;
	background: var(--icf-color-secondary);
}

#sp-footer a {
	color: var(--icf-color-footer-link);
}

#sp-footer a:hover {
	color: var(--icf-color-primary);
}

#sp-footer .sp-copyright {
	margin: 0;
	padding: 10px 0 0;
	font-size: var(--icf-size-font-copyright);
	color: var(--icf-color-footer-copy);
}

/* Credit link keeps its white on hover (inline colour on the reference). */
#sp-footer .icf-credit a,
#sp-footer .icf-credit a:hover {
	color: var(--icf-color-white);
}

#sp-footer .icf-credit svg {
	margin-bottom: -10px;
	overflow: hidden;
	fill: var(--icf-color-white);
}

/* «Μέλος του» box */
.icf-member {
	display: block;
	float: left;
	width: 100px;
	text-align: center;
	background: var(--icf-color-secondary) !important;
}

.icf-member-label {
	padding-bottom: 10px;
	font-weight: 700;
	color: var(--icf-color-white);
}

#sp-footer ul.social-icons {
	display: table;
	float: right;
}

#sp-footer ul.social-icons > li {
	float: left;
	font-size: 24px;
}

#sp-footer .icf-policy-link {
	font-size: 13px;
}

/* No 979-1200px rule on purpose: the reference gives the footer columns 60%/40% there (in EL the social
   icons and links wrap under the member logo, footer 250px instead of 216px); the theme keeps the 50/50
   single-row layout of the other widths (deviation A23, approved 24/09/2026, F15). */
@media (max-width: 979px) {
	#sp-footer {
		text-align: center;
	}

	#sp-footer #sp-footer1,
	#sp-footer #sp-footer2 {
		width: 100%;
	}

	#sp-footer ul.social-icons {
		float: none;
		margin: 20px auto 0;
	}
}

@media (max-width: 768px) {
	#sp-footer {
		padding: 60px 0 40px;
	}
}

@media (max-width: 480px) {
	#sp-footer ul.social-icons > li {
		font-size: 18px;
	}
}

/* Back-to-top: fixed round button. As on the reference it is visible when the page loads and site.js hides it
   at the first scroll event below 300px (K22, F18): on pages shorter than the window it never goes away. */
.sp-totop {
	position: fixed;
	z-index: var(--icf-z-topbar);
	right: 10px;
	bottom: 70px;
	width: var(--icf-size-totop);
	height: var(--icf-size-totop);
	text-align: center;
	text-decoration: none;
	border-radius: 30px;
	background: url("../img/totop.svg") center center no-repeat;
}

.sp-totop small {
	display: none;
}

/* ---- Off-canvas -------------------------------------------------------------------------------- */

.offcanvas-menu {
	position: fixed;
	z-index: var(--icf-z-offcanvas);
	top: 0;
	right: calc(-1 * var(--icf-size-offcanvas));
	width: var(--icf-size-offcanvas);
	height: 100%;
	overflow-y: auto;
	opacity: 0;
	color: var(--icf-color-white);
	background: var(--icf-color-navy);
	transition:
		opacity var(--icf-motion-offcanvas-duration) var(--icf-motion-offcanvas-easing),
		right var(--icf-motion-offcanvas-duration) var(--icf-motion-offcanvas-easing);
}

body.offcanvas {
	position: relative;
	width: 100%;
	height: 100%;
}

body.offcanvas .offcanvas-menu {
	right: 0;
	opacity: 1;
}

/* Dark overlay over the page while the panel is open. */
.body-innerwrapper::after {
	content: "";
	position: absolute;
	z-index: 999;
	top: 0;
	right: 0;
	width: 0;
	height: 0;
	opacity: 0;
	background: var(--icf-color-overlay);
	transition: opacity var(--icf-motion-overlay), width 0.1s var(--icf-motion-overlay), height 0.1s var(--icf-motion-overlay);
}

body.offcanvas .body-innerwrapper::after {
	width: 100%;
	height: 100%;
	opacity: 1;
	transition: opacity var(--icf-motion-overlay);
}

.close-offcanvas {
	position: absolute;
	z-index: 1;
	top: 15px;
	right: 15px;
	width: 22px;
	height: 22px;
	font-size: 12px;
	line-height: 18px;
	text-align: center;
	color: var(--icf-color-close-icon);
	border: 2px solid var(--icf-color-close-ring);
	border-radius: 100%;
}

/* Hover in the site's accent orange (deviation A20; the reference used the template demo's pink). */
.close-offcanvas:hover,
.close-offcanvas:focus {
	color: var(--icf-color-accent);
	border-color: var(--icf-color-accent);
}

.offcanvas-menu .offcanvas-inner {
	padding: 50px 20px 20px;
}

.offcanvas-menu .offcanvas-inner .sp-module {
	margin-top: 30px;
}

.offcanvas-menu .offcanvas-inner .sp-module:first-child {
	margin-top: 0;
}