/**
 * Stellatos — sticky section nav (scrollspy tabs).
 *
 * Χρησιμοποιείται σε εσωτερικές σελίδες Elementor (η Αρχική είναι πάντα
 * Customizer-only, βλ. inc/front-page.php) — π.χ. μία σελίδα με ενότητες
 * «Ιστορία», «Αξιοθέατα», «Γαστρονομία» κ.ο.κ., όπου θέλουμε ένα μενού tabs
 * που μένει σταθερό κατά το scroll και δείχνει σε ποια ενότητα βρισκόμαστε.
 *
 * Χρήση (μία φορά ανά σελίδα, βλ. και assets/js/section-nav.js):
 *
 *   1. Elementor widget HTML, στην κορυφή της σελίδας:
 *
 *        <nav class="stellatos-section-nav" aria-label="Πλοήγηση ενοτήτων">
 *          <div class="stellatos-section-nav__scroller">
 *            <ul class="stellatos-section-nav__list">
 *              <li class="stellatos-section-nav__item">
 *                <a class="stellatos-section-nav__link" href="#istoria">Ιστορία</a>
 *              </li>
 *              <!-- ένα <li> ανά ενότητα -->
 *            </ul>
 *          </div>
 *        </nav>
 *
 *   2. Σε κάθε Elementor Section-στόχο (καρτέλα Advanced):
 *        - CSS ID: π.χ. istoria (ίδιο με το href του tab, χωρίς το #)
 *        - CSS Classes: stellatos-section-nav-target
 *
 * Το ύψος του header (--stellatos-section-nav-offset) μετριέται δυναμικά από
 * το JS — δεν χρειάζεται να ρυθμιστεί εδώ με το χέρι, ούτε αλλάζει αν
 * ενεργοποιηθεί/απενεργοποιηθεί το sticky header του Astra.
 *
 * Το "κάρφωμα" στην κορυφή γίνεται με JS (κλάση `is-pinned` -> position:
 * fixed), ΟΧΙ με καθαρό CSS `position: sticky` — μέσα σε Elementor το nav
 * ζει συχνά κάτω από Section/Column με `overflow: hidden` (shape dividers,
 * entrance animations κ.λπ.), που ακυρώνει σιωπηλά το sticky. Βλ.
 * assets/js/section-nav.js.
 *
 * @package Stellatos_Child
 */

.stellatos-section-nav {
	position: relative;
	z-index: 40;
	background-color: var(--color-surface);
	border-bottom: 1px solid var(--color-border);
}

.stellatos-section-nav.is-pinned {
	position: fixed;
	top: var(--stellatos-section-nav-offset, 0px);
	left: 0;
	right: 0;
}

/* Κρατάει το ύψος του nav «δεσμευμένο» στη ροή της σελίδας όσο αυτό είναι
 * pinned (position: fixed βγαίνει από τη ροή) — αλλιώς το περιεχόμενο από
 * κάτω θα πηδούσε προς τα πάνω. Ύψος/εμφάνιση τα ελέγχει το JS. */
.stellatos-section-nav__spacer {
	display: none;
}

/*
 * ΧΩΡΙΣ max-width: το nav είναι πάντα full-bleed (edge-to-edge), ώστε να έχει
 * όσο το δυνατόν περισσότερο χώρο για τα tabs — ένα max-width εδώ (π.χ. το
 * var(--container-width) που έχει η υπόλοιπη σελίδα) περιόριζε τεχνητά το
 * πλάτος ακόμα και σε πολύ φαρδιές οθόνες, με αποτέλεσμα tabs να «κρύβονται»
 * σε οριζόντιο scroll χωρίς λόγο. Όταν δεν χωράνε όλα τα tabs (πολλά items ή
 * στενή οθόνη), κάνει οριζόντιο scroll — βλ. scrollbar πιο κάτω, σκόπιμα
 * ΟΡΑΤΗ (λεπτή) ώστε να είναι σαφές ότι υπάρχουν κι άλλα tabs δεξιά.
 */
.stellatos-section-nav__scroller {
	width: 100%;
	padding-inline: var(--space-md);
	overflow-x: auto;
	scrollbar-width: thin;
}

.stellatos-section-nav__scroller::-webkit-scrollbar {
	height: 4px;
}

.stellatos-section-nav__scroller::-webkit-scrollbar-thumb {
	background-color: var(--color-border);
	border-radius: var(--radius-sm);
}

/*
 * display + flex-direction με !important: το widget HTML του Elementor ζει
 * μέσα σε containers που συχνά επιβάλλουν δικό τους flex-direction/στοίχιση
 * (π.χ. Elementor Column = flex column από default) — το nav ΠΡΕΠΕΙ να μείνει
 * οριζόντιο ανεξάρτητα από πού μπαίνει στη σελίδα.
 */
.stellatos-section-nav__list {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: nowrap;
	align-items: center;
	gap: var(--space-lg);
	margin: 0;
	padding: 0; /* το οριζόντιο padding το δίνει το __scroller, βλ. παραπάνω */
	list-style: none;
	white-space: nowrap;
}

.stellatos-section-nav__item {
	flex: 0 0 auto;
	margin: 0;
	list-style: none;
}

.stellatos-section-nav__link {
	display: inline-flex;
	align-items: center;
	padding: var(--space-md) var(--space-xs);
	font-family: var(--font-body);
	font-size: var(--font-size-base); /* 16px */
	font-weight: 600;
	color: var(--color-primary); /* #0A1830 — κατάσταση ηρεμίας */
	border-bottom: 2px solid transparent;
	transition: color var(--transition-fast), border-color var(--transition-fast);
}

.stellatos-section-nav__link:hover,
.stellatos-section-nav__link:focus-visible,
.stellatos-section-nav__link.is-active {
	color: var(--color-secondary); /* #AC7B39 — hover / active */
	border-bottom-color: var(--color-secondary);
}

/* Στόχοι (τα ίδια τα sections) — scroll-margin-top ώστε να ΜΗΝ κρύβονται
 * κάτω από το sticky nav όταν φτάνουμε σε αυτά (κλικ σε tab ή #hash στο URL). */
.stellatos-section-nav-target {
	scroll-margin-top: var(--stellatos-section-nav-scroll-offset, 80px);
}

@media (max-width: 921px) {
	.stellatos-section-nav__list {
		gap: var(--space-md);
	}
}

@media (max-width: 600px) {
	.stellatos-section-nav__link {
		padding-block: var(--space-sm);
		font-size: var(--font-size-small);
	}
}