/* ── 1. Μενού στο footer ─────────────────────────────────────────────────────
   Το widget «Nav Menu» του Elementor ζωγραφίζει έναν δείκτη με ::after που έχει
   πλάτος 100% ΚΑΙ ύψος 100% του συνδέσμου, σε χρώμα #027987. Αποτέλεσμα: το
   πλακάκι σκεπάζει το κείμενο και ο σύνδεσμος γίνεται μια άδεια τιρκουάζ μπάρα.
   Συνέβαινε στο hover ΚΑΙ στο ενεργό στοιχείο — γι' αυτό μέσα στη σελίδα
   /loyalty-club/ ο σύνδεσμος «Loyalty Club» ήταν μονίμως αόρατος.
   Ο δείκτης φεύγει· μένει υπογράμμιση, που διαβάζεται σε κάθε φόντο. */
footer .elementor-nav-menu .elementor-item::before,
footer .elementor-nav-menu .elementor-item::after,
.elementor-location-footer .elementor-nav-menu .elementor-item::before,
.elementor-location-footer .elementor-nav-menu .elementor-item::after {
	display: none !important;
	content: none !important;
	background: none !important;
}

footer .elementor-nav-menu .elementor-item,
.elementor-location-footer .elementor-nav-menu .elementor-item {
	background: transparent !important;
	background-image: none !important;
}

footer .elementor-nav-menu .elementor-item:hover,
footer .elementor-nav-menu .elementor-item:focus-visible,
footer .elementor-nav-menu .elementor-item.elementor-item-active,
footer .elementor-nav-menu li.current-menu-item > .elementor-item,
footer .elementor-nav-menu li.current_page_item > .elementor-item,
.elementor-location-footer .elementor-nav-menu .elementor-item:hover,
.elementor-location-footer .elementor-nav-menu .elementor-item:focus-visible,
.elementor-location-footer .elementor-nav-menu .elementor-item.elementor-item-active,
.elementor-location-footer .elementor-nav-menu li.current-menu-item > .elementor-item,
.elementor-location-footer .elementor-nav-menu li.current_page_item > .elementor-item {
	background: transparent !important;
	color: #fff !important;
	text-decoration: underline !important;
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
	text-decoration-color: #efa500 !important;
}

/* Χωρίς αυτό, όποιος πλοηγείται με πληκτρολόγιο δεν βλέπει πού βρίσκεται:
   η υπογράμμιση μόνη της δεν ξεχωρίζει από το hover. */
footer .elementor-nav-menu .elementor-item:focus-visible,
.elementor-location-footer .elementor-nav-menu .elementor-item:focus-visible {
	outline: 2px solid #efa500;
	outline-offset: 3px;
	border-radius: 3px;
}

/* ── 2. Κάρτες εκδρομών: τίτλος στο κέντρο ──────────────────────────────────
   Ισχύει σε κάθε κατάλογο, κατηγορία και αρχείο, σε όλα τα πλάτη. */
.services-item .content-item h3.title,
.services-item .content-item h3.title a,
.st_list_service_room .item .content-item h3.title,
.st_list_service_room .item .content-item h3.title a,
.item-tours .content-item h3.title,
.item-tours .content-item h3.title a {
	text-align: center !important;
	display: block;
}

/* Ο τίτλος κρατιέται σταθερά σε 2 γραμμές, με «…» όπου ξεφεύγει.
   Χωρίς αυτό, κεντραρισμένοι τίτλοι άλλος μιας κι άλλος δύο γραμμών κάνουν τις
   κάρτες να μην ευθυγραμμίζονται — φαίνεται πρόχειρο. */
.services-item .content-item h3.title,
.st_list_service_room .item .content-item h3.title,
.item-tours .content-item h3.title {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: 2.8em;
}

/* ── 3. ΑΦΑΙΡΕΘΗΚΕ 7/8/2026 — οι φωτογραφίες των καρτών επιστρέφουν σε 3:2 ───
   Στις 6/8 είχε μπει aspect-ratio:16/9 στις κάρτες (εκδρομές + άρθρα) για να
   μη σπρώχνεται ο τίτλος εκτός οθόνης στο κινητό. ΔΕΝ είχε ζητηθεί: ο Tony
   εννοούσε τα μπάνερ, όχι τις κάρτες, και στις 7/8 ανέφερε ότι οι φωτογραφίες
   «μειώθηκαν στο ύψος». Ο κανόνας βγήκε ολόκληρος — οι κάρτες ξαναπαίρνουν το
   ύψος που τους δίνει το ίδιο το θέμα (3:2), σε ΕΛ και EN μαζί. Ο κεντραρισμένος
   τίτλος της ενότητας 2 μένει· δεν επηρεάζει το ύψος της φωτογραφίας. */

/* ── 4. Ο τίτλος μέσα στη φωτογραφία-μπάνερ, στο κέντρο ─────────────────────
   Ίσχυε «start» παντού: ο τίτλος («Αναζήτηση Εκδρομής», «Πίνακας Ελέγχου»,
   «Blog»…) ήταν κολλημένος αριστερά μέσα σε μια φωτογραφία πλήρους πλάτους.
   Κεντράρεται σε κάθε σελίδα, κάθε γλώσσα και κάθε πλάτος. */
.banner h1,
.banner .banner-content > h1,
.banner .banner-content > .title,
.banner .banner-headding > h1,
.banner .banner-headding > .tag_h1 {
	text-align: center !important;
	margin-left: auto !important;
	margin-right: auto !important;
	max-width: 22ch;
	text-wrap: balance;
}

/* ── 4α. ΓΙΑΤΙ ΧΡΕΙΑΣΤΗΚΕ !important ΣΤΑ MARGIN (7/8/2026) ─────────────────
   Ο κανόνας από πάνω κέντραρε σωστά κάθε κανονική σελίδα (Προορισμοί,
   Επικοινωνία, Κουίζ…) αλλά ΟΧΙ τον κατάλογο εκδρομών: εκεί ο τίτλος
   «Αναζήτηση Εκδρομής» / «Search Trips» έμενε κολλημένος αριστερά.

   ΑΙΤΙΑ (μετρημένη, όχι εικασία): το `text-align:center` περνούσε — είχε
   !important — αλλά το `margin-left/right:auto` το νικούσε πιο ειδικός
   κανόνας του θέματος. Ο τίτλος έχει `max-width:22ch` (≈415px), οπότε χωρίς
   auto margins κάθεται στην αρχή ενός δοχείου 1250px: το κείμενο έβγαινε στο
   x=266 αντί για x=683 σε οθόνη 1366 — 417px εκτός κέντρου.

   Το μπάνερ του καταλόγου έχει άλλη δομή από τις υπόλοιπες σελίδες
   (.banner > .container > .row > .col-12 > .banner-content, αντί για
   .banner > .container > .banner-content), γι' αυτό και έπιανε άλλος κανόνας.
   Εδώ καλύπτονται ρητά και οι δύο δομές, σε κάθε γλώσσα. */
.banner .container > .row > [class*="col-"] > .banner-content > h1,
.banner .container > .row > [class*="col-"] > .banner-content > .title,
.search-result-page .banner .banner-content > h1,
.st-tours .banner .banner-content > h1 {
	margin-left: auto !important;
	margin-right: auto !important;
	float: none !important;
}

/* ── 4β. Ο τίτλος της αρχικής πάνω στο βίντεο ───────────────────────────────
   «Ξεκινήστε το ταξίδι σας από εδώ» / «Start your journey here» είναι λευκός
   πάνω σε βίντεο ηλιοβασιλέματος. Όταν το καρέ φτάνει στον ήλιο, ο τίτλος
   γίνεται ΠΡΑΚΤΙΚΑ ΑΟΡΑΤΟΣ — και είναι το πρώτο πράγμα που βλέπει ο κάθε
   επισκέπτης. Δεν αλλάζει χρώμα ούτε μπαίνει πλαίσιο: δύο σκιές, μία σφιχτή
   για τα περιγράμματα και μία απλωτή για να «σηκώσει» το κείμενο από κάθε
   φόντο. Το στοιχείο e4313ae είναι ΤΟ ΙΔΙΟ και στις 2 γλώσσες. */
.elementor-element-e4313ae .elementor-heading-title {
	text-shadow: 0 2px 4px rgba(0, 0, 0, .5), 0 8px 28px rgba(0, 0, 0, .38);
}

/* ── 4γ. Ο τίτλος του Blog έμοιαζε ξένος ────────────────────────────────────
   Το πρότυπο του blog χρησιμοποιεί άλλο δοχείο (.banner-headding) και άλλο
   στυλ: γαλαζοπράσινο #36bca1, 20px, βάρος 700 και γραμματοσειρά **Caveat**
   (χειρόγραφη) — ενώ κάθε άλλη σελίδα έχει λευκό 34px/500 στη γραμματοσειρά
   του σάιτ. Ευθυγραμμίζεται ακριβώς, EL + EN. */
.banner .banner-headding h1,
.banner .banner-headding h1.tag_h1,
.banner .banner-headding .tag_h1 {
	color: #fff !important;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
		"Helvetica Neue", Arial, "Noto Sans", sans-serif !important;
	font-size: 34px !important;
	font-weight: 500 !important;
	line-height: 1.2 !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	/* Το πρότυπο του blog βάζει δικά του περιθώρια στον h1 με μεγαλύτερη
	   ειδικότητα, οπότε τα auto περιθώρια του γενικού κανόνα δεν περνούσαν και
	   ο τίτλος έμενε αριστερά — μόνο το κείμενο μέσα του κεντραριζόταν. */
	text-align: center !important;
	max-width: 22ch !important;
	margin-left: auto !important;
	margin-right: auto !important;
	float: none !important;
}

@media (max-width: 767.98px) {
	.banner .banner-headding h1,
	.banner .banner-headding h1.tag_h1,
	.banner .banner-headding .tag_h1 {
		font-size: 28px !important;
	}
}

/* Τα ψίχουλα πλοήγησης, όπου εμφανίζονται μέσα στο μπάνερ, ακολουθούν. */
.banner .banner-content .breadcrumbs,
.banner .banner-content .st-breadcrumbs {
	text-align: center !important;
	justify-content: center;
}

/* ── 5. ΕΝΑ ύψος μπάνερ για όλο το σάιτ ─────────────────────────────────────
   Ζητούμενο Tony (6/8/2026): «σε όλες τις σελίδες να είναι το ύψος της
   φωτογραφίας όπως είναι οι Προορισμοί».

   Οι Προορισμοί (και κάθε κανονική σελίδα) χρησιμοποιούν padding 60px πάνω-κάτω
   στο .banner και 100px / 60px στο .banner-content, που δίνει 369px σε οθόνη
   υπολογιστή και 282px σε κινητό.

   Ο κατάλογος εκδρομών και το blog είχαν ΑΛΛΟ padding — «200px πάνω / 60px
   κάτω» — και έβγαζαν 461px και 698px αντίστοιχα. Στο κινητό αυτό σήμαινε δύο
   ολόκληρες οθόνες φωτογραφία πριν φανεί η πρώτη εκδρομή.

   Εδώ ευθυγραμμίζονται με τις υπόλοιπες. Δεν αλλάζει τίποτα στις σελίδες που
   ήταν ήδη σωστές — μόνο οι δύο εξαιρέσεις μπαίνουν στη σειρά.

   ΣΗΜΕΙΩΣΗ: στη σελίδα αναζήτησης η φόρμα αναζήτησης βρίσκεται ΜΕΣΑ στο μπάνερ
   (στο κινητό). Το διακοσμητικό κομμάτι γίνεται ίδιο με τις άλλες σελίδες, αλλά
   το ύψος της φόρμας προστίθεται — είναι περιεχόμενο, όχι φωτογραφία. */
/* Το ύψος ΔΕΝ μπορεί να επιβληθεί με padding: κάθε πρότυπο σελίδας χρησιμοποιεί
   άλλο εσωτερικό δοχείο (.banner-content στις κανονικές σελίδες και στον κατάλογο,
   .banner-headding στο blog) και άλλο περιεχόμενο μέσα του — γι' αυτό το ίδιο
   padding έβγαζε 369px εδώ και 164px εκεί.

   Επιβάλλεται λοιπόν ΤΟ ΥΨΟΣ, μία φορά, και το περιεχόμενο κεντράρεται μέσα του.
   Στήλη (flex-direction:column) ώστε να μη μετακινηθούν τα ψίχουλα πλοήγησης που
   σε κάποια πρότυπα είναι δεύτερο παιδί του .banner. Το σκούρο overlay είναι
   position:absolute, οπότε δεν επηρεάζεται. */
.banner {
	display: flex !important;
	flex-direction: column !important;
	justify-content: center !important;
	min-height: 369px !important;
	padding-top: 24px !important;
	padding-bottom: 24px !important;
	box-sizing: border-box !important;
}

.banner .banner-content,
.banner .banner-headding {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}

@media (max-width: 991.98px) {
	.banner { min-height: 289px !important; }
}

@media (max-width: 767.98px) {
	.banner { min-height: 282px !important; }
}