/* ═══════════════════════════════════════════════════════════════════════════
   LEADER HELLAS — SITE HEADER
   Figma @1920:  ύψος 110 · gutter 50 · brand 170×61 · nav gap 44 · link 18/22
   Όλες οι τιμές σε rem (÷10 από το Figma) ώστε να κλιμακώνονται αναλογικά.
   ═══════════════════════════════════════════════════════════════════════════ */

.lh-header,
.lh-header *,
.lh-header *::before,
.lh-header *::after {
	box-sizing: border-box;
}

/* ─── Wrapper ──────────────────────────────────────────────────────────── */

.lh-header {
	--lh-header-h: 11rem;          /* 110px */
	--lh-header-bg: var(--lh-white);
	--lh-nav-gap: 4.4rem;          /*  44px */
	--lh-nav-color: var(--lh-navy);
	--lh-nav-underline: var(--lh-blue);
	--lh-burger-bg: var(--lh-navy);
	--lh-burger-bar: var(--lh-white);
	--lh-panel-bg: var(--lh-navy);
	--lh-panel-color: var(--lh-white);

	position: relative;
	z-index: 50;
	width: 100%;
	height: var(--lh-header-h);
	padding-inline: var(--lh-gutter);
	display: flex;
	align-items: center;
	justify-content: space-between;
	background: var(--lh-header-bg);
	/* Ομαλό shrink/σκιά όταν γίνεται scroll (βλ. .is-scrolled). */
	transition: height .28s var(--lh-ease), box-shadow .28s var(--lh-ease),
		background-color .28s var(--lh-ease);
}

/*
 * STICKY — position:fixed, ΟΧΙ sticky.
 *
 * Σε Theme Builder header το `position: sticky` δεν κρατά: ο Elementor
 * container που τυλίγει το header είναι ίσο με το ύψος του header, οπότε μόλις
 * το scroll το προσπεράσει, το sticky «ξεκολλά» και το header φεύγει προς τα
 * πάνω (επιβεβαιώθηκε: header top=-700px στα 700px scroll). Το fixed λύνει το
 * πρόβλημα ριζικά — μένει πάντα στην κορυφή. Το spacer παρακάτω κρατά τη ροή.
 */
.lh-header--sticky {
	position: fixed;
	inset: 0 0 auto 0;   /* top:0 · left:0 · right:0 */
}

.admin-bar .lh-header--sticky {
	top: 32px;
}

/* Κρατά τον χώρο του fixed header στη ροή ώστε να μην κρύβεται το περιεχόμενο.
   Σταθερό ύψος (ΔΕΝ ακολουθεί το shrink) → το περιεχόμενο δεν αναπηδά. */
.lh-header-spacer {
	height: 11rem;   /* == αρχικό ύψος header @1920 */
}

/* Διακριτική σκιά μόλις ξεκινήσει το scroll — δίνει «βάθος» στο sticky. */
.lh-header--sticky.is-scrolled {
	box-shadow: 0 .4rem 1.6rem -.8rem rgba(37, 28, 82, .28);
}

/* ─── Brand ────────────────────────────────────────────────────────────── */

.lh-header__brand,
.lh-header__brand:hover,
.lh-header__brand:focus {
	color: inherit;
}

.lh-header__brand {
	flex: 0 0 auto;
	display: block;
	width: 17rem;   /* 170px */
	height: 6.1rem; /*  61px */
	line-height: 0;
	-webkit-tap-highlight-color: transparent;
	/* Συνοδεύει ομαλά το shrink του header στο scroll. */
	transition: width .28s var(--lh-ease), height .28s var(--lh-ease);
}

/* (0,2,1) — αλλιώς το `.elementor img { height: auto }` παίρνει το πάνω χέρι. */
.lh-header .lh-header__brand img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: left center;
}

/* ─── Navigation ───────────────────────────────────────────────────────── */

.lh-nav {
	display: flex;
	align-items: center;
	gap: var(--lh-nav-gap);
}

.lh-nav__list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	align-items: center;
	gap: var(--lh-nav-gap);
}

.lh-nav__item {
	margin: 0;
	padding: 0;
}

.lh-nav__link {
	position: relative;
	display: inline-block;
	font-family: var(--lh-display);
	font-size: 1.8rem;    /* 18px */
	font-weight: 800;
	line-height: 2.2rem;  /* 22px */
	letter-spacing: .09rem;
	text-decoration: none;
	text-transform: uppercase;
	white-space: nowrap;
	-webkit-tap-highlight-color: transparent;
}

/* (0,2,0) ώστε να νικάει το `.elementor-kit-N a` του Elementor. */
.lh-header .lh-nav__link,
.lh-header .lh-nav__link:visited,
.lh-header .lh-nav__link:hover,
.lh-header .lh-nav__link:focus-visible {
	color: var(--lh-nav-color);
}

/* Υπογράμμιση που ανοίγει από το κέντρο — ακριβώς όπως στο Figma prototype. */
.lh-nav__link::after {
	position: absolute;
	content: "";
	height: .2rem;       /* 2px */
	inset: auto 50% -.7rem;
	background: var(--lh-nav-underline);
	transition: inset .2s var(--lh-ease);
}

.lh-nav__link:hover::after,
.lh-nav__link:focus-visible::after,
.lh-nav__link.is-current::after {
	inset-inline: 0;
}

.lh-nav__cta {
	flex: 0 0 auto;
}

/* ─── Burger ───────────────────────────────────────────────────────────── */

.lh-burger {
	display: none;
	flex: 0 0 auto;
	width: 4.6rem;   /* 46px */
	height: 4.2rem;  /* 42px */
	padding: 1rem;
	border: 0;
	border-radius: var(--lh-radius);
	background: var(--lh-burger-bg);
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

/* Ίδιος λόγος με τις μικρογραφίες: το `button:hover` του θέματος είναι (0,1,1). */
.lh-burger:hover,
.lh-burger:focus {
	background: var(--lh-burger-bg);
}

.lh-burger span {
	display: block;
	width: 100%;
	height: .2rem;
	margin: .4rem 0;
	background: var(--lh-burger-bar);
	border-radius: 1px;
	transform-origin: center;
	transition: transform .25s var(--lh-ease), opacity .2s var(--lh-ease);
}

.lh-burger[aria-expanded="true"] span:nth-child(1) {
	transform: translateY(.6rem) rotate(45deg);
}

.lh-burger[aria-expanded="true"] span:nth-child(2) {
	opacity: 0;
}

.lh-burger[aria-expanded="true"] span:nth-child(3) {
	transform: translateY(-.6rem) rotate(-45deg);
}

/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE / TABLET-PORTRAIT  ≤1024px  —  off-canvas panel
   1rem ≈ 10px @390px, οπότε οι τιμές διαβάζονται πάλι ως px του mobile design.
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 1024px) {

	.lh-header {
		--lh-header-h: 8.4rem; /* 84px */
	}

	.lh-header__brand {
		width: 13.5rem; /* 135px */
		height: 5rem;   /*  50px */
	}

	/* Το spacer ακολουθεί το mobile ύψος (σταθερό, χωρίς shrink). */
	.lh-header-spacer {
		height: 8.4rem;
	}

	/*
	 * SHRINK ΣΤΟ SCROLL (μόνο mobile/tablet).
	 * Μόλις ξεκινήσει το scroll, το header μαζεύει από 84 → 64px και το
	 * λογότυπο αναλογικά (κρατά τον λόγο 135:50 ≈ 2.7 → 108:40). Η μετάβαση
	 * γίνεται ομαλά από τα transition σε .lh-header / .lh-header__brand.
	 */
	.lh-header--sticky.is-scrolled {
		--lh-header-h: 6.4rem; /* 64px */
	}

	.lh-header--sticky.is-scrolled .lh-header__brand {
		width: 10.8rem; /* 108px */
		height: 4rem;   /*  40px */
	}

	.lh-burger {
		display: block;
		order: 3;
	}

	.lh-nav {
		position: fixed;
		z-index: 45;
		inset: var(--lh-header-h) 0 auto 0;
		min-height: calc(100dvh - var(--lh-header-h));
		max-height: calc(100dvh - var(--lh-header-h));
		padding: 5.6rem 2.4rem;
		display: flex;
		flex-direction: column;
		align-items: stretch;
		justify-content: flex-start;
		gap: 3rem;
		overflow-y: auto;
		overscroll-behavior: contain;
		transform: translateX(100%);
		visibility: hidden;
		background: var(--lh-panel-bg);
		color: var(--lh-panel-color);
		transition: transform .25s var(--lh-ease), visibility 0s linear .25s;
	}

	.lh-nav.is-open {
		transform: translateX(0);
		visibility: visible;
		transition: transform .25s var(--lh-ease), visibility 0s linear 0s;
	}

	.admin-bar .lh-nav {
		inset-block-start: calc(var(--lh-header-h) + 32px);
		min-height: calc(100dvh - var(--lh-header-h) - 32px);
		max-height: calc(100dvh - var(--lh-header-h) - 32px);
	}

	.lh-nav__list {
		flex-direction: column;
		align-items: stretch;
		gap: 3rem;
	}

	.lh-nav__link {
		display: block;
		font-size: 2.8rem;   /* 28px */
		line-height: 3.4rem; /* 34px */
		letter-spacing: .1rem;
		white-space: normal;
	}

	.lh-header .lh-nav__link,
	.lh-header .lh-nav__link:visited,
	.lh-header .lh-nav__link:hover,
	.lh-header .lh-nav__link:focus-visible {
		color: var(--lh-panel-color);
	}

	.lh-nav__link::after {
		inset: auto 50% -.6rem;
	}

	.lh-nav__cta {
		align-self: flex-start;
		min-height: 5rem;
		padding-inline: 3rem;
		font-size: 2rem;
	}
}

/* Στα πολύ χαμηλά viewports (landscape κινητό) μαζεύουμε τα κενά. */
@media (max-width: 1024px) and (max-height: 520px) {

	.lh-nav {
		padding-block: 3rem;
		gap: 2.2rem;
	}

	.lh-nav__list {
		gap: 2.2rem;
	}

	.lh-nav__link {
		font-size: 2.2rem;
		line-height: 2.8rem;
	}
}

/* WP admin bar: κάτω από 783px γίνεται 46px ψηλή. */
@media (max-width: 782px) {

	.admin-bar .lh-nav {
		inset-block-start: calc(var(--lh-header-h) + 46px);
		min-height: calc(100dvh - var(--lh-header-h) - 46px);
		max-height: calc(100dvh - var(--lh-header-h) - 46px);
	}

	.admin-bar .lh-header--sticky {
		top: 0;
	}
}