/*
 * Τηλεφωνικός Κατάλογος — frontend
 *
 * Ο renderer παράγει τα core block classes (wp-block-table,
 * is-style-stripes / is-style-regular, has-text-align-center), οπότε το
 * styling έρχεται από τα block styles και το theme. Εδώ προσθέτουμε ΜΟΝΟ
 * ό,τι λείπει: αποστάσεις ανάμεσα στις ενότητες, αέρα στο τέλος, και
 * ασφαλή πλάτη στηλών.
 */

.paros-directory {
	/*
	 * Αέρας στο τέλος, ώστε ο πίνακας να μη κολλάει στο footer.
	 *
	 * ΠΡΟΣΟΧΗ: padding, όχι margin. Ο core κανόνας
	 *     :root :where(.is-layout-flow) > :last-child { margin-block-end: 0 }
	 * έχει specificity (0,2,0) και μηδενίζει κάθε margin-block-end που θα
	 * βάζαμε εδώ — το .paros-directory είναι το τελευταίο παιδί του
	 * .entry-content. Το padding δεν το πιάνει και δεν κάνει collapse.
	 */
	padding-block-end: 4rem;
}

/* Αποστάσεις ανάμεσα στις ενότητες 1ου επιπέδου ------------------------ */

.paros-directory .pd-section {
	margin-block-end: 3rem;
}

/* --------------------------------------------------------------------------
 * Βάση πίνακα, ανεξάρτητη από το core CSS.
 *
 * Το WordPress φορτώνει το στυλ των core blocks ανά block· σε σελίδα με μόνο
 * shortcode δεν φορτώνεται καθόλου. Ο renderer το ζητάει ρητά, αλλά τα
 * παρακάτω το κάνουν αυτάρκες ώστε η εμφάνιση να μην εξαρτάται από αυτό.
 * Όλα scoped κάτω από .paros-directory — δεν διαρρέουν στη σελίδα.
 * -------------------------------------------------------------------------- */

.paros-directory .wp-block-table {
	overflow-x: auto;
}

.paros-directory .wp-block-table table {
	width: 100%;
	table-layout: fixed;
	border-collapse: collapse;
}

.paros-directory .wp-block-table td,
.paros-directory .wp-block-table th {
	padding: 0.5em;
	word-break: break-word;
}

/*
 * Η επικεφαλίδα είναι βοηθητική, όχι περιεχόμενο: μικρά γράμματα με αραιό
 * γράμμα, ώστε να μη διεκδικεί την προσοχή από τα ονόματα και τα τηλέφωνα.
 * Το core βάζει 3px γραμμή κάτω — πολύ βαριά όταν επαναλαμβάνεται σε 7
 * πίνακες.
 */
.paros-directory .wp-block-table thead {
	border-bottom: 1px solid currentColor;
}

.paros-directory .wp-block-table thead th {
	font-size: 0.68em;
	letter-spacing: 0.08em;
	line-height: 1.3;
	padding-block: 0.35em;
	opacity: 0.6;
}

/* Το markup των επικεφαλίδων είναι <strong>, δηλαδή 700 — πολύ βαρύ σε αυτό
   το μέγεθος. */
.paros-directory .wp-block-table thead th strong {
	font-weight: 600;
}

/* is-style-stripes: χωρίς πλαίσια κελιών, ζέβρα στις ζυγές γραμμές. */
.paros-directory .wp-block-table.is-style-stripes table {
	border-collapse: inherit;
	border-spacing: 0;
}

/* Ίδια τιμή με το core, ώστε η ζέβρα να είναι όπως στο production. */
.paros-directory .wp-block-table.is-style-stripes tbody tr:nth-child(odd) {
	background-color: #f0f0f0;
}

.paros-directory .wp-block-table.is-style-stripes td,
.paros-directory .wp-block-table.is-style-stripes th {
	border-color: transparent;
}

.paros-directory .pd-section-title {
	margin-block: 2.5rem 0.5rem;
	font-size: 1.05em;
	letter-spacing: 0.02em;
}

.paros-directory .pd-section:first-child .pd-section-title {
	margin-block-start: 0;
}

.paros-directory .pd-section-rule {
	margin-block: 0 1.25rem;
}

.paros-directory .wp-block-table {
	margin-block: 0;
}

/* Στήλες ---------------------------------------------------------------- */

/*
 * Τα πλάτη ορίζονται από το <colgroup> του renderer, ώστε όλες οι ενότητες
 * να στοιχίζονται μεταξύ τους. Εδώ μόνο ένα κατώφλι ώστε σε στενό container
 * ο πίνακας να κυλήσει αντί να στριμωχτεί — αλλιώς η στήλη email γίνεται
 * ένας χαρακτήρας ανά γραμμή.
 */
.paros-directory .wp-block-table table {
	min-width: 34rem;
}

.paros-directory .wp-block-table td,
.paros-directory .wp-block-table th {
	vertical-align: middle;
}

.paros-directory .pd-email a {
	word-break: break-word;
}

.paros-directory .pd-sep {
	opacity: 0.5;
}

/*
 * Η στήλη ΘΕΣΗ έχει μακριές λέξεις (ΣΥΜΠΑΡΑΣΤΑΤΗΣ ΤΟΥ ΔΗΜΟΤΗ,
 * ΠΕΡΙΒΑΛΛΟΝΤΟΣ) σε στενό πλάτος: μικρότερη γραμματοσειρά ώστε να χωρούν
 * χωρίς να κόβονται στη μέση της λέξης.
 */
.paros-directory .pd-position {
	font-size: 0.85em;
	line-height: 1.35;
}

/* --------------------------------------------------------------------------
 * Ιεραρχία κατηγοριών
 *
 * Όλες οι κατηγορίες είναι συγχωνευμένες γραμμές 4 στηλών, οπότε η ένθεση
 * δεν φαίνεται από τη θέση τους. Τη δηλώνουμε με τρεις κλίμακες που
 * λειτουργούν μαζί:
 *
 *   μέγεθος γραμματοσειράς  — μικραίνει σε κάθε επίπεδο
 *   αέρας από πάνω          — λιγοστεύει σε κάθε επίπεδο, ώστε η υποκατηγορία
 *                             να «κολλάει» στη μητρική της
 *   φόντο                   — σβήνει σε κάθε επίπεδο
 *
 * Τα επίπεδα 1 είναι οι τίτλοι των ενοτήτων, έξω από τον πίνακα· μέσα στον
 * πίνακα εμφανίζονται επίπεδα 2 έως 5.
 * -------------------------------------------------------------------------- */

.paros-directory .pd-category-cell {
	text-align: center;
	padding-block: 1em 0.45em;
}

.paros-directory .pd-level-2 .pd-category-cell {
	font-size: 1em;
	letter-spacing: 0.02em;
	padding-block-start: 1.9em;
	background-color: rgba(0, 0, 0, 0.06);
}

.paros-directory .pd-level-3 .pd-category-cell {
	font-size: 0.93em;
	padding-block-start: 1.4em;
	background-color: rgba(0, 0, 0, 0.035);
}

.paros-directory .pd-level-4 .pd-category-cell {
	font-size: 0.87em;
	padding-block-start: 1.05em;
	background-color: rgba(0, 0, 0, 0.015);
}

.paros-directory .pd-level-5 .pd-category-cell {
	font-size: 0.83em;
	font-weight: 600;
	padding-block-start: 0.8em;
}

/* Η πρώτη γραμμή του πίνακα δεν χρειάζεται αέρα από πάνω: είναι κάτω από
   την επικεφαλίδα, όχι μετά από άλλη ομάδα. */
.paros-directory .wp-block-table tbody tr:first-child .pd-category-cell {
	padding-block-start: 0.6em;
}

/* Τα άτομα ποτέ bold, εκτός από τη θέση. */
.paros-directory .pd-person .pd-name,
.paros-directory .pd-person .pd-phone,
.paros-directory .pd-person .pd-email {
	font-weight: 400;
}

/* Κινητό: κάθε άτομο γίνεται κάρτα, οι κατηγορίες μένουν γραμμές --------- */

@media screen and (max-width: 782px) {
	/*
	 * Ο πίνακας παύει να είναι πίνακας — ΚΑΙ το <table> μαζί.
	 *
	 * Αν μείνει display:table ενώ τα tr/td γίνουν block, ο πίνακας δεν έχει
	 * πια κελιά: το table-layout:fixed και το <colgroup> συνεχίζουν να
	 * ορίζουν στήλες, το πλάτος καταρρέει σε shrink-to-fit και όλα
	 * στριμώχνονται σε μια στενή κολόνα.
	 */
	/*
	 * Το font-size ορίζεται στο <table> και όχι στα td, ώστε οι σχετικές
	 * τιμές σε em (επίπεδα κατηγοριών, θέση) να υπολογίζονται σωστά από εκεί.
	 * Χρειάζεται γιατί το theme ρίχνει κάθε td και strong σε 0.45rem κάτω από
	 * 500px, δηλαδή ~7px — μη αναγνώσιμο.
	 */
	.paros-directory .wp-block-table table {
		display: block;
		width: 100%;
		min-width: 0;
		table-layout: auto;
		font-size: 0.95rem;
	}

	.paros-directory .wp-block-table colgroup,
	.paros-directory .wp-block-table thead {
		display: none;
	}

	.paros-directory .wp-block-table tbody,
	.paros-directory .wp-block-table tr,
	.paros-directory .wp-block-table td {
		display: block;
		width: auto;
	}

	/* Ακύρωση των δύο κανόνων του theme. */
	.paros-directory .wp-block-table td,
	.paros-directory .wp-block-table strong {
		font-size: inherit;
	}

	.paros-directory .wp-block-table .pd-position {
		font-size: 0.85em;
	}

	.paros-directory .pd-person {
		border: 1px solid rgba(0, 0, 0, 0.12);
		border-radius: 4px;
		margin-block-end: 0.5rem;
		padding: 0.4rem 0.6rem;
	}

	.paros-directory .pd-person td {
		border: 0;
		padding: 0.15rem 0;
		min-width: 0;
		text-align: left;
	}

	.paros-directory .pd-person td:empty {
		display: none;
	}

	.paros-directory .pd-person .pd-name {
		font-weight: 600;
	}

	.paros-directory .pd-person .pd-phone::before,
	.paros-directory .pd-person .pd-email::before {
		content: attr(data-label) ": ";
		opacity: 0.65;
		font-size: 0.85em;
	}

	/*
	 * Οι κατηγορίες μένουν γραμμές πλήρους πλάτους. Δεν προστίθεται margin:
	 * η κλιμακωτή padding-block-start των επιπέδων 2-5 δίνει ήδη τον αέρα
	 * και είναι αυτή που δηλώνει την ένθεση.
	 */
	.paros-directory .pd-category-cell {
		text-align: center;
	}
}