/*
 * Γέφυρα κλώνου ↔ Elementor.
 *
 * Οι σελίδες είναι φτιαγμένες με widgets του Elementor, αλλά την εμφάνιση την
 * δίνουν τα CSS του κλώνου (style.css, pages.css). Το Elementor, από την άλλη,
 * βάζει δικές του «καθολικές» ρυθμίσεις στα widgets — εδώ κόβονται μόνο όσες
 * θα χαλούσαν την ομοιότητα με τον κλώνο:
 *
 *   - η γραμματοσειρά των τυπογραφιών του kit (το `Sans-serif` που μένει ως
 *     εφεδρική τιμή, γιατί το Manrope το δίνει ο κλώνος),
 *   - τα 20px που αφήνει το kit ανάμεσα στα widgets της ίδιας ενότητας.
 *
 * Δεν μπαίνουν χρώματα εδώ: τα χρώματα των επικεφαλίδων/κειμένων τα δίνουν οι
 * κανόνες του κλώνου (style.css, pages.css).
 */

.calista-block .elementor-widget:not(:last-child) {
	--kit-widget-spacing: 0px;
}

.calista-block .elementor-widget-heading .elementor-heading-title,
.calista-block .elementor-widget-text-editor,
.calista-block .elementor-widget-image .widget-image-caption {
	font-family: inherit;
}

/*
 * Το Elementor βάζει `line-height: 1` στις επικεφαλίδες των widgets. Ο κλώνος
 * δεν δηλώνει line-height στις επικεφαλίδες, τις αφήνει να το κληρονομήσουν
 * (1.5). Εδώ το επαναφέρουμε, εκτός από όπου ο κλώνος έχει δικό του κανόνα —
 * εκείνος κερδίζει, γιατί το elementor-boost.css έχει ένα class παραπάνω.
 */
/* Στον κλώνο οι επικεφαλίδες δεν δηλώνουν line-height: το κληρονομούν από
   το body (1.5). Το Elementor βάζει `line-height: 1` στο .elementor-heading-title
   και κόβει την κληρονομικότητα — εδώ την επαναφέρουμε. Όπου ο κλώνος έχει
   δικό του κανόνα (π.χ. .page-hero h1 { line-height: 1.21 }), κερδίζει εκείνος,
   γιατί το elementor-boost.css έχει δύο κλάσεις-πρόθεμα. */
.calista-block .elementor-widget-heading .elementor-heading-title {
	line-height: inherit;
}

/*
 * Τα containers του Elementor δεν είναι απλά <div>: είναι flex με στήλη και,
 * με την κλάση e-con-full, πλάτος 100%. Στον κλώνο τα ίδια στοιχεία ήταν απλά
 * block div — γι' αυτό οι μετρητές στοιβάζονταν κάθετα, το .rg-price έπαιρνε
 * πλάτος 1140 αντί να «ζαρώνει» στο περιεχόμενο, και δεν καταρρεύαν τα
 * περιθώρια του τελευταίου παιδιού (τα +80px στο container).
 *
 * Εδώ τα containers ξαναγίνονται block, με αυτόματο πλάτος. Όπου ο κλώνος
 * δηλώνει display:flex/grid, το elementor-boost.css (δύο κλάσεις) κερδίζει
 * και το στοιχείο ξαναγίνεται flex — με σειρά (row), όπως είναι η προεπιλογή
 * των div του κλώνου.
 */
.calista-block .e-con,
.calista-block .e-con > .e-con-inner {
	display: block;
	width: auto;
	--flex-direction: row;
}

/*
 * Επικεφαλίδες με κλάση του κλώνου (π.χ. .section-title, .rd-title): η κλάση
 * μπαίνει στο περίβλημα του widget, ενώ το <h1>…<h6> είναι από μέσα. Χωρίς
 * αυτόν τον κανόνα, το εσωτερικό στοιχείο έπαιρνε τα γενικά μεγέθη των h1-h6
 * (π.χ. 63px αντί για τα 42px του .section-title) και η επικεφαλίδα ψήλωνε.
 */
.calista-block .elementor-widget-heading.calista-h-classed .elementor-heading-title {
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
	letter-spacing: inherit;
	text-transform: inherit;
	text-align: inherit;
}

/*
 * Οι επικεφαλίδες με κλάση του κλώνου: το ::before της κλάσης (π.χ. η γραμμή
 * 40×1px του .eyebrow) κατέληγε στο περίβλημα του widget — εκεί φτιάχνει δική
 * της γραμμή κειμένου και η επικεφαλίδα ψηλώνει 24px. Το ξαναβάζουμε μέσα στο
 * στοιχείο, όπως ήταν στον κλώνο.
 */
.calista-block .elementor-widget-heading.calista-h-classed.eyebrow::before {
	content: none;
}
.calista-block .elementor-widget-heading.eyebrow .elementor-heading-title::before {
	content: "";
	display: inline-block;
	width: 40px;
	height: 1px;
	background: var(--muted);
	margin-right: 25px;
	vertical-align: middle;
}

/* Στον κλώνο το .faq-q είναι <button> (line-height: normal)· εδώ είναι container
   και κληρονομούσε το 1.5 του body, ψηλώνοντας κατά 3px. */
.calista-block .faq-q {
	line-height: normal;
}

/*
 * Στον κλώνο τα <div> είναι static, οπότε ό,τι είναι position:absolute (π.χ. η
 * σκιά .page-top-shade, το .page-hero::before) αγκυρώνει πιο ψηλά. Το Elementor
 * βάζει position:relative στα containers και άλλαζε το σημείο αναφοράς. Ό,τι
 * χρειάζεται relative το δηλώνει ο κλώνος (π.χ. .rg-media, .page-hero) και το
 * elementor-boost.css το επιβάλλει ξανά.
 */
.calista-block .e-con {
	position: static;
}

/*
 * Η γραμμή του eyebrow (40×1px πριν από το κείμενο) είναι ψευδο-στοιχείο της
 * κλάσης. Στα widgets η κλάση κάθεται στο περίβλημα, οπότε η γραμμή
 * ζωγραφιζόταν στην άκρη του πλαισίου αντί δίπλα στο κείμενο. Τη μεταφέρουμε
 * στο εσωτερικό <h4>, όπως ακριβώς είναι στον κλώνο.
 */
.calista-block.calista-block .elementor-widget-heading.eyebrow::before {
	content: none;
}

.calista-block.calista-block .elementor-widget-heading.eyebrow .elementor-heading-title::before {
	content: "";
	display: inline-block;
	width: 40px;
	height: 1px;
	background: var(--muted);
	margin-right: 25px;
	vertical-align: middle;
}

/*
 * Το .eyebrow δίνει color: var(--text) — στον κλώνο στο ίδιο το <h4> (η κλάση
 * και το στοιχείο είναι ένα). Στα widgets η κλάση κάθεται στο περίβλημα, οπότε
 * το εσωτερικό <h4> έπαιρνε το χρώμα των h1-h4 (primary, #0F2A3A) αντί για το
 * χρώμα του κλώνου. Εδώ κληρονομεί το χρώμα της κλάσης.
 */
.calista-block .elementor-widget-heading.eyebrow .elementor-heading-title {
	color: inherit;
}

/*
 * Στα .fac (παροχές δωματίου) το εικονίδιο ήταν flex παιδί με `flex: none`.
 * Στα widgets παιδί του flex είναι το περίβλημα του widget: ζάρωνε (28→25px)
 * και το `max-width: 100%` του Elementor μίκρυνε μαζί και την εικόνα· στη
 * μακριά ετικέτα «Ιδιωτική - θερμαινόμενη εποχιακά - πισίνα 25 τ.μ.» αυτό
 * φαινόταν στο pixel diff. Το περίβλημα ξαναγίνεται άκαμπτο, σαν τον κλώνο.
 */
.calista-block .fac > .elementor-widget-image {
	flex: none;
}

/*
 * Τα περιβλήματα των widgets του κειμένου βγαίνουν από τη ροή.
 *
 * Στον κλώνο μια παράγραφος, μια λίστα ή ένα <figcaption> είναι *απευθείας*
 * παιδί του πλαισίου της. Στα widgets του Elementor μπαίνουν δύο div ανάμεσα
 * (`.elementor-widget` και `.elementor-widget-container`), και αυτό χαλάει όσα
 * CSS του κλώνου κοιτούν τη *θέση* του στοιχείου μέσα στον γονέα:
 *
 *   - `.panel p:last-child { margin-bottom: 0 }` έπιανε κάθε <p> χωριστά (αφού
 *     το καθένα είναι μοναχοπαίδι στο περίβλημά του) και το «eyebrow» έχανε το
 *     περιθώριό του (10px),
 *   - το `<figcaption>` είναι `position: absolute` ως προς το <figure>· με το
 *     περίβλημα του widget σε `position: relative` έπαιρνε άλλη θέση (έμπαινε
 *     μέσα στο πλαίσιο αντί δίπλα στη φωτογραφία),
 *   - τα <p>/<ul> ήταν flex/grid παιδιά του περιβλήματος αντί του πλαισίου.
 *
 * Με το `display: contents` το περίβλημα δεν ζωγραφίζει κουτί, οπότε τη θέση
 * παίρνει το ίδιο το στοιχείο — όπως στον κλώνο. Δεν αγγίζουμε τα widgets που
 * κουβαλούν κλάσεις του κλώνου (εκείνες θέλουν το κουτί τους), ούτε τις
 * επικεφαλίδες: η κλάση τους (π.χ. `.section-title`) κάθεται στο περίβλημα.
 */
.calista-block .elementor-widget-text-editor,
.calista-block .elementor-widget-text-editor > .elementor-widget-container,
.calista-parts-root .elementor-widget-text-editor,
.calista-parts-root .elementor-widget-text-editor > .elementor-widget-container {
	display: contents;
}

/*
 * Παράγραφοι που ΔΕΝ είναι τελευταίες στο πλαίσιο τους.
 *
 * Ο κλώνος κοιτάει τη θέση: `.welcome-text p:last-of-type { margin-bottom: 40px }`
 * και `.panel p:last-child { margin-bottom: 0 }`. Στα widgets κάθε <p> είναι
 * μοναχοπαίδι στο περίβλημά του, οπότε οι κανόνες του κλώνου έπιαναν *όλες* τις
 * παραγράφους: το «eyebrow» έχανε τα 10px του και οι παράγραφοι του κειμένου
 * έπαιρναν 40px. Ο μετατροπέας σημειώνει με `calista-not-last` όσα στοιχεία δεν
 * είναι όντως τελευταία (το ξέρει από το HTML του κλώνου) και εδώ παίρνουν πίσω
 * το περιθώριο που τους αναλογεί.
 *
 * Προσοχή: τα widgets του κειμένου στον Elementor 4.2.4 δεν έχουν ενδιάμεσο
 * `.elementor-widget-container` — το περίβλημα είναι ένα div — γι' αυτό οι
 * επιλογείς έχουν και τις δύο μορφές.
 */
.calista-block.calista-block .welcome-text .elementor-widget.calista-not-last > p:last-child,
.calista-block.calista-block .welcome-text .elementor-widget.calista-not-last > .elementor-widget-container > p:last-child,
.calista-block.calista-block .panel .elementor-widget.calista-not-last > p:last-child,
.calista-block.calista-block .panel .elementor-widget.calista-not-last > .elementor-widget-container > p:last-child {
	margin-bottom: 24px;
}

.calista-block.calista-block .welcome-text .elementor-widget.calista-not-last > p.eyebrow:last-child,
.calista-block.calista-block .welcome-text .elementor-widget.calista-not-last > .elementor-widget-container > p.eyebrow:last-child,
.calista-block.calista-block .panel .elementor-widget.calista-not-last > p.eyebrow:last-child,
.calista-block.calista-block .panel .elementor-widget.calista-not-last > .elementor-widget-container > p.eyebrow:last-child {
	margin-bottom: 10px;
}

/*
 * Ίδια λογική για το header/footer: τα widgets των προτύπων δεν έχουν κλάσεις
 * του κλώνου στα περιβλήματά τους, οπότε το περίβλημα μπορεί να βγει από τη ροή
 * — το <img> και το κείμενο παίρνουν τη θέση που είχαν στον κλώνο.
 *   - το Instagram του footer ήταν inline <svg> μέσα σε <a class="social-link">:
 *     το ύψος της γραμμής ήταν 27px, με το περίβλημα γινόταν 20px,
 *   - το ίδιο για τις εικόνες του header (λογότυπο).
 */
.calista-parts-root .elementor-widget-image,
.calista-parts-root .elementor-widget-image > .elementor-widget-container {
	display: contents;
}

/*
 * Το .chat-badge στον κλώνο είναι <span> με line-height: normal (το παίρνει από
 * το <button>)· εδώ κληρονομούσε το 1.5 του body.
 */
.calista-parts-root .chat-badge {
	line-height: normal;
	font-family: Arial, sans-serif;
}

/*
 * Το περίβλημα του widget του μενού κουβαλά την κλάση .main-menu για να πάρει
 * το `flex: 1` του κλώνος· το Elementor όμως του δίνει `position: relative` και
 * `max-width: 100%`, που το <nav> του κλώνου δεν τα είχε.
 */
.calista-parts-root .elementor-widget.main-menu {
	position: static;
	max-width: none;
}

/*
 * Το Instagram του footer: στον κλώνο είναι inline <svg> μέσα στο <a>, οπότε το
 * ύψος του συνδέσμου το δίνει η γραμμή (27px). Στα widgets έγινε <img> και το
 * `img { display: block }` του κλώνου το έκανε 20px. Εδώ ξαναγίνεται inline.
 */
.calista-parts-root.calista-parts-root .social-link img {
	display: inline-block;
	vertical-align: baseline;
}

/*
 * Το περίβλημα της θέσης (`.elementor-location-header`) είναι ένα div με
 * `position: relative` από τα CSS του Elementor. Στον κλώνο το <header> είναι
 * `position: absolute` ως προς τη σελίδα — εδώ παίρνει θέση αναφοράς το
 * περίβλημα (μηδενικού ύψους, οπότε φαίνεται ίδιο, αλλά καλύτερα να μη
 * στηρίζεται σε αυτό).
 */
.elementor-location-header > .e-con,
.elementor-location-footer > .e-con {
	position: static;
}
/*
 * Χρώμα επικεφαλίδας που το δίνει η κλάση του κλώνου.
 *
 * Στον κλώνο το χρώμα κάθεται στο ίδιο το <h2> (`.cta-title { color: #fff }`, που
 * είναι και η περίπτωση που φαινόταν). Στα widgets η κλάση κάθεται στο περίβλημα
 * του widget, και το εσωτερικό <h2 class="elementor-heading-title"> έπαιρνε το
 * χρώμα που δίνει το Elementor στις επικεφαλίδες (σκούρο) — γι' αυτό ο τίτλος
 * «Κάντε κράτηση σε λίγα βήματα.» δεν ήταν λευκός. Με το `color: inherit`
 * παίρνει το χρώμα που δίνει η κλάση του κλώνου στο περίβλημα.
 *
 * Το κάνουμε μόνο για τις κλάσεις που όντως δίνουν χρώμα στον κλώνο: οι
 * υπόλοιπες επικεφαλίδες (π.χ. `.section-title`) παίρνουν σωστά το χρώμα τους
 * από τον κανόνα `h2 { color: var(--primary) }`, που πιάνει το ίδιο το <h2>.
 */
.calista-block .elementor-widget-heading.cta-title .elementor-heading-title,
.calista-block .elementor-widget-heading.carousel-title .elementor-heading-title {
	color: inherit;
}

/*
 * Στο κινητό το Elementor γυρίζει τα containers σε `flex-wrap: wrap`
 * (`--flex-wrap-mobile`). Ο κλώνος δεν έχει wrap πουθενά εκτός από το
 * `.counters` — και εκείνο το κρατάει ο δικός του κανόνας, που έχει ένα class
 * παραπάνω. Χωρίς αυτό, οι διαφάνειες του slider των δωματίων και του carousel
 * του οδηγού στοιβάζονταν κάθετα (η ενότητα «Τα Δωμάτια» ψήλωνε 2.300px και ο
 * οδηγός 900px στο κινητό).
 */
@media (max-width: 767px) {
	.calista-block .e-con,
	.calista-block .e-con > .e-con-inner,
	.calista-parts-root .e-con,
	.calista-parts-root .e-con > .e-con-inner {
		flex-wrap: nowrap;
	}
}

/*
 * Το kit του Elementor επιβάλλει χρώμα και βάρος γραμματοσειράς σε κάθε widget
 * κειμένου:
 *   `.elementor-widget-text-editor { color: var(--e-global-color-text);
 *     font-weight: var(--e-global-typography-text-font-weight) }`
 *
 * Στον κλώνο τα ίδια στοιχεία (λίστες και παράγραφοι του footer, το <strong>
 * της τιμής στο widget κράτησης, οι παράγραφοι των panels) κληρονομούν χρώμα
 * και βάρος από το πλαίσιό τους. Με το `inherit` το περίβλημα του widget δεν
 * επιβάλλει τίποτα και το περιεχόμενο παίρνει ό,τι θα έπαιρνε και στον κλώνο.
 * (Το ίδιο έκανε η γραμμή πιο πάνω για τη γραμματοσειρά.)
 */
.calista-block .elementor-widget-text-editor,
.calista-parts-root .elementor-widget-text-editor {
	color: inherit;
	font-weight: inherit;
}

/*
 * Μενού με το Nav Menu widget του Elementor, με την εμφάνιση του κλώνου.
 *
 * Το widget τυπώνει δικό του `<nav class="elementor-nav-menu--main">` γύρω από
 * τη λίστα, δεύτερο `<nav>` για το μενού κινητού, και τα `<a>` με κλάση
 * `elementor-item`. Στον κλώνο το `<nav class="main-menu">` έχει απευθείας το
 * `<ul class="menu">` και τα `<a>` δεν κουβαλούν δικά τους χρώματα/αποστάσεις.
 */

/* Το εσωτερικό <nav> δεν ζωγραφίζει κουτί: η λίστα γίνεται παιδί του
   πλαισίου, όπως στον κλώνο (nav.main-menu > ul.menu). */
.calista-parts-root .main-menu .elementor-nav-menu--main {
	display: contents;
}

/* Το μενού κινητού του Elementor δεν χρησιμοποιείται: στο κινητό ισχύει το
   πλαϊνό πάνελ του theme, όπως στον κλώνο.
   Προσοχή: την κλάση `elementor-nav-menu--dropdown` την παίρνουν και τα
   *υπο-μενού* της κύριας λίστας (το widget τη βάζει σε κάθε sub-menu), γι' αυτό
   η απόκρυψη αφορά μόνο το δεύτερο <nav> του widget. */
.calista-parts-root .main-menu nav.elementor-nav-menu--dropdown,
.calista-parts-root .main-menu .elementor-menu-toggle {
	display: none;
}

/* Τα <a> των εγγραφών: ό,τι δίνει ο κλώνος (`.menu > li > a`), χωρίς χρώματα,
   περιθώρια και εφέ του Elementor. */
.calista-parts-root .main-menu .elementor-item,
.calista-parts-root .main-menu .elementor-sub-item {
	padding: 0;
	background: none;
	border: 0;
}

/*
 * Δύο πράγματα που κληρονομούνται λάθος μέσα στα widgets:
 *
 * 1. Οι σύνδεσμοι-πλαίσια (`<a class="e-con …">`) δεν πιάνουν τον κανόνα
 *    `a { color: var(--bronze) }` του κλώνου: ο επιλογέας θέλει πρόγονο με
 *    `.calista-block`, και τον έχει το ίδιο το στοιχείο. Έτσι οι κάρτες
 *    δωματίων, τα καρουζέλ του οδηγού και οι διαφάνειες έπαιρναν το χρώμα του
 *    σώματος αντί για το bronze (ίσχυε και στις δύο γλώσσες).
 * 2. Το `.elementor-widget-image` έχει `text-align: center` από τα CSS του
 *    Elementor, και το κληρονομούν τα <img> — ο κλώνος δεν έχει τέτοιον κανόνα.
 */
.calista-block a.e-con,
.calista-parts-root a.e-con {
	color: var(--bronze);
}

.calista-block .elementor-widget-image,
.calista-parts-root .elementor-widget-image {
	text-align: inherit;
}

/*
 * Επικεφαλίδες: το `.elementor-widget` είναι `position: relative` και το
 * περίβλημα δεν παίρνει ποτέ χρώμα από τους κανόνες των h1–h6 (εκείνοι πιάνουν
 * το εσωτερικό <h1 class="elementor-heading-title">). Έτσι το *περίβλημα* μιας
 * επικεφαλίδας έδειχνε `position: relative` και χρώμα σώματος, ενώ ο κλώνος έχει
 * το χρώμα των επικεφαλίδων στο ίδιο στοιχείο. Δεν φαινόταν (το κείμενο είναι
 * στο εσωτερικό), αλλά χαλούσε τη μέτρηση και τον πίνακα.
 */
.calista-block .elementor-widget-heading,
.calista-parts-root .elementor-widget-heading {
	position: static;
}

.calista-block .elementor-widget-heading.calista-h-classed,
.calista-parts-root .elementor-widget-heading.calista-h-classed {
	color: var(--primary);
}

/*
 * Το κουμπί του μενού κινητού και οι μικρογραφίες της γκαλερί ήταν στον κλώνο
 * <button>, και ο browser τους έδινε `text-align: center`. Στα widgets είναι
 * containers που δεν έχουν δικό τους κείμενο, αλλά κρατάμε το ίδιο κέντρο ώστε
 * να μη διαφέρει τίποτα — όπως ακριβώς και τα μεγέθη/χρώματα που φαίνονταν.
 */
.calista-parts-root .menu-toggle,
.calista-block .gallery-thumbs > * {
	text-align: center;
}

/*
 * Το kit του Elementor βάφει τα υπο-στοιχεία του μενού με τη δική του
 * τυπογραφία (`.elementor-sub-item { font-family/weight: var(--e-global-…accent) }`
 * — δηλαδή Roboto 500). Στον κλώνο τα υπο-στοιχεία κληρονομούν τη Manrope 400
 * του κλώνου, όπως οι υπόλοιπες γραμμές. Εδώ το περίβλημα δεν επιβάλλει τίποτα.
 */
.calista-parts-root .main-menu .elementor-sub-item,
.calista-parts-root .main-menu .elementor-nav-menu--dropdown .elementor-item {
	font-family: inherit;
	font-weight: inherit;
}