/* ═══════════════════════════════════════════════════════════════════════════
   LEADER HELLAS — SCALE ENGINE + DESIGN TOKENS
   ───────────────────────────────────────────────────────────────────────────
   Design canvas: 1920 × auto (Figma).

   ΚΑΝΟΝΑΣ ΜΕΤΑΤΡΟΠΗΣ:   px στο Figma  ÷ 10  =  rem στο CSS
                          55px → 5.5rem     |    1.1px → .11rem

   Το :root font-size είναι ρευστό (1rem = 10px στα 1920px) οπότε ΟΛΟ το
   layout συρρικνώνεται/μεγαλώνει αναλογικά. Το αποτέλεσμα είναι pixel-perfect
   ταυτόσημο σε κάθε πλάτος ≥ 1025px — καμία μετακίνηση, καμία αναδίπλωση.

   Κάτω από 1025px αλλάζει καμβάς: mobile layout με burger, όπου
   1rem ≈ 10px στα 390px (iPhone) και κλιμακώνεται μέχρι τα 1024px.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── 1. Scale engine ─────────────────────────────────────────────────────
   --lh-vw ορίζεται από το leader-scale.js ως (clientWidth / 100)px, δηλαδή
   ένα «1vw χωρίς τη μπάρα κύλισης». Το 1vw είναι fallback αν δεν τρέξει JS.

   desktop:  clientWidth / 192   →  1920/192 = 10px
   mobile :  clientWidth / 39    →   390/39  = 10px   (clamped 9px – 11.5px)
   ─────────────────────────────────────────────────────────────────────── */

:root {
	font-size: calc(var(--lh-vw, 1vw) / 1.92);
}

@media (max-width: 1024px) {
	:root {
		font-size: clamp(9px, calc(var(--lh-vw, 1vw) / 0.39), 11.5px);
	}
}

/* Το WP admin bar δεν πρέπει να ακολουθεί την κλίμακα του site. */
#wpadminbar {
	font-size: 13px;
}

/*
 * Ομαλή κύλιση σε anchor links, όπως στο Figma export — αλλά μόνο για όσους
 * δεν έχουν ζητήσει μειωμένη κίνηση (το static το εφάρμοζε ανεξαίρετα).
 */
@media (prefers-reduced-motion: no-preference) {

	html {
		scroll-behavior: smooth;
	}
}

/* ─── 2. Design tokens ─────────────────────────────────────────────────── */

:root {
	--lh-navy: #251c52;
	--lh-ink: #332c54;
	--lh-blue: #219bff;
	--lh-green: #00db55;
	--lh-purple: #9747ff;
	--lh-light: #f0f0f0;
	--lh-pale: #f5f5f5;
	--lh-mid: #b3b3b3;
	--lh-muted: #c9c9ca;
	--lh-footerbar: #757575;
	--lh-white: #fff;

	--lh-gutter: 5rem;   /* 50px @1920 */
	--lh-radius: .5rem;  /*  5px @1920 */

	--lh-body: "Fira Sans", Arial, Helvetica, sans-serif;
	--lh-display: "Fira Sans Extra Condensed", "Arial Narrow", Arial, sans-serif;

	--lh-ease: cubic-bezier(.4, 0, .2, 1);
}

@media (max-width: 1024px) {
	:root {
		--lh-gutter: 2.2rem; /* 22px */
		--lh-radius: .5rem;
	}
}

/* ─── 3. Document ──────────────────────────────────────────────────────── */

body {
	min-width: 320px;
	overflow-x: clip;
	color: var(--lh-navy);
	background: var(--lh-white);
	font-family: var(--lh-body);
	font-size: 2rem;      /* 20px */
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

body.lh-menu-open {
	overflow: hidden;
}

/*
 * ΚΑΘΟΛΙΚΟ RESET ΣΥΝΔΕΣΜΩΝ — η πιο σημαντική γραμμή του αρχείου.
 *
 * Το static έχει `a { color: inherit; text-decoration: none }`, δηλαδή κάθε
 * σύνδεσμος παίρνει το χρώμα του περιβάλλοντός του. Χωρίς αυτό, το
 * hello-elementor βάφει ΚΑΘΕ <a> με τα δικά του:
 *
 *     a              { color: #c36 }     ← reset.css
 *     a:active,a:hover { color: #336 }   ← reset.css  (0,1,1)!
 *
 * Το `a:hover` με ειδικότητα (0,1,1) νικάει κάθε δικό μας κανόνα (0,1,0),
 * οπότε οι τίτλοι των cross-links γίνονταν μπλε και τα tabs εξαφανίζονταν
 * (navy πάνω σε navy) στο hover.
 *
 * Οι κανόνες εδώ έχουν ΤΗΝ ΕΛΑΧΙΣΤΗ δυνατή ειδικότητα ώστε κάθε component
 * rule (0,1,0)+ να τους κερδίζει φυσικά — καμία παγίδα ειδικότητας.
 * Το admin bar δεν επηρεάζεται: χρησιμοποιεί επιλογείς με id.
 */
a {
	color: inherit;
	text-decoration: none;
}

/*
 * ΠΡΟΣΟΧΗ — ΜΗΝ ΒΑΛΕΙΣ ΕΔΩ `a:hover { color: inherit }`.
 *
 * Δοκιμάστηκε και είναι ΛΑΘΟΣ: έχει ειδικότητα (0,1,1) και νικάει κάθε
 * component rule (0,1,0). Αποτέλεσμα, ένας σύνδεσμος που ορίζει δικό του χρώμα
 * (π.χ. `.lh-cross__panel { color: white }`) το ΧΑΝΕΙ στο hover και κληρονομεί
 * το χρώμα του γονέα — οι τίτλοι των cross-links γίνονταν navy πάνω σε μοβ.
 *
 * Σωστός τρόπος: κάθε component που είναι <a> δηλώνει ΡΗΤΑ το hover χρώμα του,
 * σε ειδικότητα (0,1,1), ώστε να νικά το `a:active,a:hover { color:#336 }` του
 * hello-elementor. Δες τα `:hover` δίπλα σε κάθε βασικό κανόνα χρώματος.
 */

/*
 * ΚΑΘΟΛΙΚΟ RESET ΚΟΥΜΠΙΩΝ — ίδια ιστορία με τα links.
 *
 * Το hello-elementor διακοσμεί ΚΑΘΕ κουμπί σαν να είναι κουμπί φόρμας:
 *
 *     [type=button],[type=submit],button        { border:1px solid #c36; color:#c36 }
 *     [type=button]:hover,[type=submit]:hover,
 *     button:hover, button:focus                { background-color:#c36; color:#fff }
 *
 * Το δεύτερο έχει ειδικότητα (0,1,1) και νικάει κάθε δικό μας (0,1,0) — γι'
 * αυτό τα thumbnails του προϊόντος γίνονταν ΡΟΖ στο hover. Χτυπά κάθε <button>
 * μας: μικρογραφίες, burger, και το <input type="submit"> του CF7.
 *
 * Το reset είναι στο (0,0,1) ώστε κάθε component rule να το κερδίζει φυσικά.
 * Για την κατάσταση hover δεν αρκεί reset — δες τους ρητούς κανόνες παρακάτω
 * και σε κάθε component που χρησιμοποιεί <button>.
 */
button,
[type="button"],
[type="submit"],
[type="reset"] {
	padding: 0;
	border: 0;
	border-radius: 0;
	background-color: transparent;
	color: inherit;
}

/* ─── 4. Κοινά primitives ──────────────────────────────────────────────── */

.lh-section {
	position: relative;
	width: 100%;
}

.lh-img {
	display: block;
	max-width: 100%;
}

/*
 * ΠΡΟΣΟΧΗ — ΣΥΝΕΠΕΙΑ ΤΗΣ ΡΕΥΣΤΗΣ ΡΙΖΑΣ
 *
 * Το hello-elementor γράφει στο reset.css:
 *     button, input, optgroup, select, textarea { font-size: 1rem }
 *
 * Με ρίζα 16px αυτό είναι 16px. Με τη δική μας ρευστή ρίζα γίνεται 10px στα
 * 1920px και 5.3px στα 1025px — δηλαδή μικροσκοπικά κουμπιά και πεδία φόρμας.
 * Κάθε τρίτο stylesheet που χρησιμοποιεί rem παθαίνει το ίδιο.
 *
 * Ο κανόνας του θέματος έχει ειδικότητα (0,0,1), οπότε ένα `:where()` reset
 * (0,0,0) ΔΕΝ αρκεί. Δίνουμε πραγματική ειδικότητα στο scope — (0,1,0) — και
 * κρατάμε το :where() στα elements ώστε ρητοί κανόνες μας (π.χ. .lh-tab, που
 * φορτώνει αργότερα) να εξακολουθούν να κερδίζουν.
 */
.lh-header :where(button, input, select, textarea),
.lh-footer :where(button, input, select, textarea),
.lh-products :where(button, input, select, textarea),
.lh-product :where(button, input, select, textarea),
.lh-catalog :where(button, input, select, textarea),
.lh-cross :where(button, input, select, textarea),
.lh-form :where(button, input, select, textarea) {
	font: inherit;
	/* Το reset του θέματος βάφει τα κουμπιά #c36 — δες παραπάνω. */
	color: inherit;
}

/* Display type — Fira Sans Extra Condensed ExtraBold, uppercase. */
.lh-display,
.lh-eyebrow,
.lh-title,
.lh-title--sm {
	margin: 0;
	font-family: var(--lh-display);
	font-weight: 800;
	text-transform: uppercase;
}

.lh-eyebrow {
	font-size: 2rem;     /* 20px */
	line-height: 2.2rem; /* 22px */
	letter-spacing: .1rem;
}

.lh-title {
	font-size: 5.5rem;     /* 55px */
	line-height: 5.7rem;   /* 57px */
	letter-spacing: .11rem;
}

.lh-title--sm {
	font-size: 4rem;      /* 40px */
	line-height: 4.2rem;  /* 42px */
	letter-spacing: .08rem;
}

.lh-copy {
	margin: 0;
	font-size: 2rem;     /* 20px */
	line-height: 3rem;   /* 30px */
}

/* ───────────────────────────────────────────────────────────────────────
   ΣΗΜΕΙΩΣΗ ΕΙΔΙΚΟΤΗΤΑΣ (specificity) — ΔΙΑΒΑΣΕ ΠΡΙΝ ΓΡΑΨΕΙΣ ΚΑΝΟΝΑ

   Ο Elementor γράφει δύο κανόνες ειδικότητας (0,1,1) που χτυπάνε τα πάντα:

     .elementor-kit-N a  { color: … }
     .elementor img      { height: auto; max-width: 100% }

   Οποιοσδήποτε δικός μας κανόνας με σκέτη κλάση (0,1,0) ΧΑΝΕΙ. Πρακτικά:
   · χρώμα σε <a>  → το κουμπί βγαίνει μπλε-σε-μπλε (αόρατο)
   · ύψος σε <img> → η εικόνα παίρνει το φυσικό της aspect ratio αντί για
                     το ύψος του design (π.χ. 213px αντί για 257px)

   Λύση: κάθε τέτοιος κανόνας γράφεται με scope της ενότητας, ώστε να είναι
   (0,2,0) ή παραπάνω — `.lh-audience .lh-audience__art-pack`, όχι σκέτο
   `.lh-audience__art-pack`.
   ─────────────────────────────────────────────────────────────────────── */

/* Κουμπί — 44px ύψος, 28px οριζόντιο padding, radius 5px. */
.lh-btn {
	box-sizing: border-box;
	min-height: 4.4rem;
	padding: .4rem 2.8rem;
	border: 0;
	border-radius: var(--lh-radius);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	background: var(--lh-blue);
	color: var(--lh-white);
	font-family: var(--lh-display);
	font-size: 1.8rem;    /* 18px */
	font-weight: 800;
	line-height: 2rem;    /* 20px */
	letter-spacing: .09rem;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	white-space: nowrap;
	transition: transform .2s var(--lh-ease), filter .2s var(--lh-ease);
	-webkit-tap-highlight-color: transparent;
}

.lh-btn.lh-btn,
.lh-btn.lh-btn:visited {
	color: var(--lh-white);
}

.lh-btn.lh-btn:hover,
.lh-btn.lh-btn:focus-visible {
	filter: brightness(.93);
	transform: translateY(-.2rem);
	color: var(--lh-white);
}

/*
 * Όταν το κουμπί είναι <button> ή <input type="submit"> (φόρμες CF7), το
 * `button:hover { background-color:#c36 }` του θέματος (0,1,1) θα νικούσε το
 * `.lh-btn { background }` (0,1,0). Κρατάμε το ίδιο φόντο μέσω μεταβλητής, σε
 * (0,1,2) — αρκετά ψηλά για το θέμα, αρκετά χαμηλά ώστε τα Elementor controls
 * (0,2,1) να εξακολουθούν να υπερισχύουν.
 */
button.lh-btn:hover,
button.lh-btn:focus,
input.lh-btn:hover,
input.lh-btn:focus {
	background-color: var(--lh-btn-bg, var(--lh-blue));
}

.lh-btn--white {
	--lh-btn-bg: var(--lh-white);
}

.lh-btn:active {
	transform: translateY(0);
}

.lh-btn--lg {
	min-width: 26.1rem;   /* 261px */
	min-height: 6rem;     /*  60px */
	font-size: 2rem;      /*  20px */
	letter-spacing: .1rem;
}

/*
 * ΤΟ :visited ΕΙΝΑΙ ΥΠΟΧΡΕΩΤΙΚΟ ΕΔΩ.
 *
 * Το `.lh-btn.lh-btn:visited` παραπάνω είναι (0,3,0) και θα νικούσε ένα σκέτο
 * `.lh-btn--white.lh-btn--white` (0,2,0). Αποτέλεσμα: μόλις ο επισκέπτης έχει
 * ήδη ανοίξει τη σελίδα προορισμού, το κουμπί γίνεται λευκό-σε-λευκό.
 *
 * Δεν πιάνεται με κανένα εργαλείο μέτρησης: για λόγους ιδιωτικότητας το
 * getComputedStyle επιστρέφει ΠΑΝΤΑ το στυλ του μη-επισκεφθέντος συνδέσμου.
 * Μόνο με το μάτι (ή screenshot σε προφίλ με ιστορικό) φαίνεται. Κάθε νέα
 * παραλλαγή του `.lh-btn` που αλλάζει `color` πρέπει να δηλώνει και `:visited`.
 */
.lh-btn--white.lh-btn--white,
.lh-btn--white.lh-btn--white:visited,
.lh-btn--white.lh-btn--white:hover,
.lh-btn--white.lh-btn--white:focus-visible {
	background: var(--lh-white);
	color: var(--lh-navy);
}

/* Ορατό focus ring για πληκτρολόγιο, χωρίς να χαλάει το design. */
.lh-btn:focus-visible,
.lh-link:focus-visible {
	outline: .2rem solid currentColor;
	outline-offset: .3rem;
}

/* ─── 5. Elementor container reset για full-bleed sections ─────────────── */

.elementor-element.lh-full > .e-con-inner,
.elementor-element.lh-full > .elementor-container {
	max-width: 100%;
	width: 100%;
}

/* ─── 6. Τρέχον κείμενο (νομικές σελίδες) ──────────────────────────────────
 *
 * Οι σελίδες Όρων Χρήσης / Απορρήτου / Cookies είναι «σκέτα» Elementor pages:
 * τα ΜΟΝΑ έγγραφα του site με stock `heading` + `text-editor` widgets. Χωρίς
 * αυτό το scope, το καθολικό `a { color: inherit }` της §1 κάνει τους
 * ενσωματωμένους συνδέσμους να μοιάζουν με απλό κείμενο, και τα κενά των
 * παραγράφων/λιστών μένουν στα px του θέματος αντί να ακολουθούν την κλίμακα.
 */

.elementor-widget-text-editor p {
	margin: 0 0 1.4rem;
}

.elementor-widget-text-editor ul {
	margin: 0 0 1.4rem;
	padding-inline-start: 2.4rem;
	list-style: disc;
}

.elementor-widget-text-editor li {
	margin-bottom: .8rem;
}

.elementor-widget-text-editor p:last-child,
.elementor-widget-text-editor ul:last-child,
.elementor-widget-text-editor li:last-child {
	margin-bottom: 0;
}

/* (0,2,1) — νικάει το `a { color: inherit }`. Το `:visited` δηλώνεται ρητά
   ώστε να μην ξαναπατήσουμε την παγίδα της §0γ. */
.elementor-widget-text-editor a,
.elementor-widget-text-editor a:visited {
	color: var(--lh-blue);
	text-decoration: underline;
	text-underline-offset: .3rem;
	transition: color .2s var(--lh-ease);
}

.elementor-widget-text-editor a:hover,
.elementor-widget-text-editor a:focus-visible {
	color: var(--lh-navy);
}

/* ─── 7. Reduced motion ────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
	.lh-btn,
	.lh-nav__link::after,
	.lh-nav {
		transition-duration: .01ms !important;
	}
}