/**
 * Σελίδες κειμένου — υλοποίηση του εγκεκριμένου orthofocus-text-page-template-final.
 * Πληροφορίες αποστολής · Τρόποι πληρωμής · Τρόποι παραγγελίας · Αλλαγές & Επιστροφές ·
 * Όροι & Προϋποθέσεις · Πολιτική Απορρήτου · Πολιτική Cookies.
 *
 * Template: page-templates/text-page.php · Hero: components/page-hero.css
 * Πλαίσιο πληροφορίας / Σημείωση: components/content-boxes.css (φορτώνεται και στον editor).
 *
 * Το κείμενο έρχεται από τον editor της σελίδας. Τα στυλ του είναι scoped στο .text-page-prose
 * και με χαμηλό specificity (:where), ώστε πλαίσια και πίνακες να κρατούν τα δικά τους.
 *
 * Mobile-first:
 *   έως 520px     μικρό κινητό: περιεχόμενα σε 1 στήλη, μικρότερα κείμενα και πλαίσια
 *   έως 767px     κινητό: περιεχόμενα σε 2 στήλες πάνω από το κείμενο
 *   768–1023px    tablet: περιεχόμενα σε 3 στήλες πάνω από το κείμενο
 *   1024px+       desktop: περιεχόμενα (sticky) | κείμενο έως 860px
 *
 * Οι διαστάσεις του mockup είναι tokens στο .of-text-page και αλλάζουν μόνο εκεί.
 */

/* ==========================================================================
   Tokens — κινητό (βάση)
   ========================================================================== */

.of-text-page {
	/* Σελίδα */
	--tp-padding-top: 22px;
	--tp-padding-bottom: 96px;
	--tp-layout-columns: minmax(0, 1fr);
	--tp-layout-gap: 42px;
	--tp-content-max: none;
	/* Απόσταση από την κορυφή για sticky περιεχόμενα και anchors (+ admin bar όταν υπάρχει) */
	--tp-offset: calc(24px + var(--wp-admin--admin-bar--height, 0px));

	/* Πίνακας περιεχομένων */
	--tp-toc-position: static;
	--tp-toc-max-height: none;
	--tp-toc-padding: 22px;
	--tp-toc-radius: 16px;
	--tp-toc-shadow: 0 10px 30px color-mix(in srgb, var(--color-primary-dark) 6%, transparent);
	--tp-toc-columns: repeat(2, minmax(0, 1fr));
	--tp-toc-gap: 8px;
	--tp-toc-title-size: var(--fs-xs);
	--tp-toc-title-tracking: 0.07em;
	--tp-toc-title-margin: 14px;
	--tp-toc-link-padding: 9px 10px;
	--tp-toc-link-radius: 8px;
	--tp-toc-link-size: var(--fs-xs);
	--tp-toc-link-lh: 1.4;

	/* Πλαίσιο εισαγωγής */
	--tp-intro-space: 34px;
	--tp-intro-padding: 22px;
	--tp-intro-radius: 16px;

	/* Ενότητες */
	--tp-section-padding: 8px 0 34px;
	--tp-section-space: 26px;
	--tp-number-size: 34px;
	--tp-number-padding: 0 10px;
	--tp-number-font: 11px;
	--tp-number-margin: 14px;

	/* Κείμενο */
	--tp-h2-size: 30px;
	--tp-h2-lh: 1.2;
	--tp-h2-tracking: -0.025em;
	--tp-h2-margin: 16px;
	--tp-h3-size: 20px;
	--tp-h3-lh: 1.3;
	--tp-h3-margin: 26px 0 10px;
	--tp-text-size: 15px;
	--tp-text-lh: 1.85;
	--tp-text-margin: 16px;
	--tp-list-lh: 1.8;
	--tp-list-margin: 18px;
	--tp-list-indent: 22px;
	--tp-list-gap: 7px;

	/* Πίνακες */
	--tp-table-space: 24px;
	--tp-table-radius: 14px;
	--tp-table-min: 620px;
	--tp-cell-padding: 14px 16px;
	--tp-cell-size: 13px;
	--tp-cell-lh: 1.5;

	/* Επικοινωνία & τελευταία ενημέρωση */
	--tp-contact-space: 42px;
	--tp-contact-padding: 26px 28px;
	--tp-contact-radius: 16px;
	--tp-contact-title-size: 22px;
	--tp-contact-title-lh: 1.3;
	--tp-contact-title-margin: 8px;
	--tp-contact-text-size: 13px;
	--tp-contact-text-lh: 1.85;
	--tp-contact-text-margin: 14px;
	--tp-contact-text-color: color-mix(in srgb, var(--color-on-primary) 80%, transparent);
	--tp-contact-btn-height: 42px;
	--tp-contact-btn-padding: 16px;
	--tp-contact-btn-size: var(--fs-xs);
	--tp-updated-space: 22px;
	--tp-updated-size: 11px;

	display: block;
	line-height: normal;
}

/* Μικρό κινητό (έως 520px, όπως το mockup) */
@media (max-width: 520px) {
	.of-text-page {
		--container-padding: 14px;
		--tp-toc-padding: 18px;
		--tp-toc-columns: minmax(0, 1fr);
		--tp-h2-size: 26px;
		--tp-text-size: 14px;
		--tp-contact-padding: 22px;
	}
}

/* Tablet 768+ */
@media (min-width: 768px) {
	.of-text-page {
		--tp-padding-top: 34px;
		--tp-toc-columns: repeat(3, minmax(0, 1fr));
		--tp-intro-padding: 26px 28px;
	}
}

/* Desktop 1024+: περιεχόμενα αριστερά (sticky), κείμενο δεξιά */
@media (min-width: 1024px) {
	.of-text-page {
		--tp-layout-columns: 250px minmax(0, 1fr);
		--tp-toc-position: sticky;
		/* Μεγάλα κείμενα (π.χ. Όροι, 15 ενότητες): τα περιεχόμενα κάνουν δικό τους scroll αν δεν χωράνε στην οθόνη */
		--tp-toc-max-height: calc(100vh - var(--tp-offset) - 24px);
		--tp-toc-columns: minmax(0, 1fr);
		--tp-content-max: 860px;
	}
}

/* Hero: component page-hero, με τις τιμές του mockup αυτής της σελίδας */
.of-text-page .of-page-hero {
	--ph-space: 48px;
	--ph-padding: 38px 28px;
	--ph-radius: 24px;
	--ph-circle: 340px;
	--ph-circle-right: -90px;
	--ph-circle-bottom: -150px;
	--ph-eyebrow-margin: 10px;
	--ph-eyebrow-tracking: 0.08em;
	--ph-title-size: clamp(42px, 5vw, 62px);
	--ph-title-lh: 1.04;
	--ph-title-tracking: -0.04em;
	--ph-title-margin: 16px;
	--ph-text-size: var(--fs-body);
}

@media (min-width: 768px) {
	.of-text-page .of-page-hero {
		--ph-padding: 48px 44px;
	}
}

@media (min-width: 1024px) {
	.of-text-page .of-page-hero {
		--ph-padding: 54px 60px;
	}
}

/* Κενό πάνω και κάτω: στο container (το Astra μηδενίζει το padding του #primary) */
.of-text-page .of-text-page__page {
	padding-block: var(--tp-padding-top) var(--tp-padding-bottom);
}

/* ==========================================================================
   Διάταξη
   ========================================================================== */

.of-text-page .text-page-layout {
	display: grid;
	grid-template-columns: var(--tp-layout-columns);
	align-items: start;
	gap: var(--tp-layout-gap);
}

/* Χωρίς πίνακα περιεχομένων (λιγότερα από 2 H2 ή απενεργοποιημένος) */
.of-text-page .text-page-layout--no-toc {
	grid-template-columns: minmax(0, 1fr);
}

.of-text-page .text-page-content {
	width: 100%;
	max-width: var(--tp-content-max);
}

/* ==========================================================================
   Πίνακας περιεχομένων (από τα H2 του κειμένου)
   ========================================================================== */

.of-text-page .text-page-toc {
	position: var(--tp-toc-position);
	top: var(--tp-offset);
	max-height: var(--tp-toc-max-height);
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: var(--tp-toc-padding);
	border: var(--border-width) solid var(--color-border);
	border-radius: var(--tp-toc-radius);
	background-color: var(--color-surface);
	box-shadow: var(--tp-toc-shadow);
}

.of-text-page .text-page-toc__title {
	margin: 0 0 var(--tp-toc-title-margin);
	color: var(--color-primary);
	font-size: var(--tp-toc-title-size);
	font-weight: var(--fw-bold);
	letter-spacing: var(--tp-toc-title-tracking);
	text-transform: uppercase;
}

.of-text-page .text-page-toc__list {
	display: grid;
	grid-template-columns: var(--tp-toc-columns);
	gap: var(--tp-toc-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Κάθε link γεμίζει το κελί του (ίδιο ύψος στη σειρά, όπως στο mockup) */
.of-text-page .text-page-toc__list > li {
	display: flex;
	margin: 0;
}

.of-text-page .text-page-toc__link {
	flex: 1 1 auto;
	padding: var(--tp-toc-link-padding);
	border-radius: var(--tp-toc-link-radius);
	color: var(--color-text-muted);
	font-size: var(--tp-toc-link-size);
	line-height: var(--tp-toc-link-lh);
	text-decoration: none;
	transition: background-color var(--transition-fast), color var(--transition-fast);
}

.of-text-page .text-page-toc__link:hover,
.of-text-page .text-page-toc__link:focus-visible,
.of-text-page .text-page-toc__link.is-active {
	background-color: var(--color-purple-soft);
	color: var(--color-primary);
}

/* ==========================================================================
   Πλαίσιο εισαγωγής & ενότητες
   ========================================================================== */

.of-text-page .text-page-intro {
	margin-bottom: var(--tp-intro-space);
	padding: var(--tp-intro-padding);
	border: var(--border-width) solid var(--color-border);
	border-radius: var(--tp-intro-radius);
	background-color: var(--color-surface);
}

.of-text-page .text-page-section {
	margin-bottom: var(--tp-section-space);
	padding: var(--tp-section-padding);
	border-bottom: var(--border-width) solid var(--color-border);
	scroll-margin-top: var(--tp-offset);
}

.of-text-page .text-page-section:last-child {
	margin-bottom: 0;
	border-bottom: 0;
}

/* Αριθμός ενότητας (01, 02…) */
.of-text-page .text-page-section__number {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: var(--tp-number-size);
	height: var(--tp-number-size);
	margin-bottom: var(--tp-number-margin);
	padding: var(--tp-number-padding);
	border-radius: var(--radius-pill);
	background-color: var(--color-purple-soft);
	color: var(--color-primary);
	font-size: var(--tp-number-font);
	font-weight: var(--fw-bold);
	line-height: 1;
}

/* ==========================================================================
   Κείμενο της σελίδας (editor)
   ========================================================================== */

.of-text-page :where(.text-page-prose h2) {
	margin: 0 0 var(--tp-h2-margin);
	color: var(--color-primary);
	font-size: var(--tp-h2-size);
	font-weight: var(--fw-bold);
	line-height: var(--tp-h2-lh);
	letter-spacing: var(--tp-h2-tracking);
}

.of-text-page :where(.text-page-prose h3) {
	margin: var(--tp-h3-margin);
	color: var(--color-primary-dark);
	font-size: var(--tp-h3-size);
	font-weight: var(--fw-bold);
	line-height: var(--tp-h3-lh);
}

.of-text-page :where(.text-page-prose p) {
	margin: 0 0 var(--tp-text-margin);
	color: var(--color-text-muted);
	font-size: var(--tp-text-size);
	line-height: var(--tp-text-lh);
}

.of-text-page :where(.text-page-prose :is(ul, ol)) {
	margin: 0 0 var(--tp-list-margin);
	padding-left: var(--tp-list-indent);
	color: var(--color-text-muted);
	font-size: var(--tp-text-size);
	line-height: var(--tp-list-lh);
}

.of-text-page :where(.text-page-prose li > :is(ul, ol)) {
	margin: var(--tp-list-gap) 0 0;
}

.of-text-page :where(.text-page-prose li + li) {
	margin-top: var(--tp-list-gap);
}

.of-text-page :where(.text-page-prose strong) {
	color: var(--color-text);
}

/* Links μέσα στο κείμενο: υπογράμμιση, ώστε να μη διακρίνονται μόνο από το χρώμα */
.of-text-page :where(.text-page-prose a:not(.of-btn, .wp-element-button)) {
	color: var(--color-link);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/* ==========================================================================
   Πίνακες: .table-wrap (μπαίνει αυτόματα), οριζόντιο scroll στο κινητό
   ========================================================================== */

.of-text-page .table-wrap {
	margin: var(--tp-table-space) 0;
	overflow: auto;
	border: var(--border-width) solid var(--color-border);
	border-radius: var(--tp-table-radius);
	background-color: var(--color-surface);
}

.of-text-page .table-wrap table {
	width: 100%;
	min-width: var(--tp-table-min);
	margin: 0;
	border: 0;
	border-collapse: collapse;
}

.of-text-page .table-wrap :is(thead, tbody, tfoot) {
	border: 0;
}

.of-text-page .table-wrap :is(th, td) {
	padding: var(--tp-cell-padding);
	border: 0;
	border-bottom: var(--border-width) solid var(--color-border);
	font-size: var(--tp-cell-size);
	line-height: var(--tp-cell-lh);
	text-align: start;
	vertical-align: top;
}

.of-text-page .table-wrap th {
	background-color: var(--color-purple-soft);
	color: var(--color-primary);
	font-weight: var(--fw-bold);
}

.of-text-page .table-wrap td {
	color: var(--color-text-muted);
}

.of-text-page .table-wrap tr:last-child td {
	border-bottom: 0;
}

.of-text-page .table-wrap figcaption {
	margin: 0;
	padding: var(--tp-cell-padding);
	border-top: var(--border-width) solid var(--color-border);
	color: var(--color-text-muted);
	font-size: var(--tp-cell-size);
}

/* ==========================================================================
   Επικοινωνία & τελευταία ενημέρωση
   ========================================================================== */

.of-text-page .text-page-contact {
	margin-top: var(--tp-contact-space);
	padding: var(--tp-contact-padding);
	border-radius: var(--tp-contact-radius);
	background-color: var(--color-primary);
	color: var(--color-on-primary);
}

.of-text-page .text-page-contact__title {
	margin: 0 0 var(--tp-contact-title-margin);
	color: var(--color-on-primary);
	font-size: var(--tp-contact-title-size);
	font-weight: var(--fw-bold);
	line-height: var(--tp-contact-title-lh);
}

.of-text-page .text-page-contact__text {
	margin: 0 0 var(--tp-contact-text-margin);
	color: var(--tp-contact-text-color);
	font-size: var(--tp-contact-text-size);
	line-height: var(--tp-contact-text-lh);
}

/* Κουμπί: component button (primary), με το μέγεθος του mockup */
.of-text-page .text-page-contact__btn {
	--btn-height: var(--tp-contact-btn-height);
	--btn-padding-x: var(--tp-contact-btn-padding);
	--fs-button: var(--tp-contact-btn-size);

	font-weight: var(--fw-bold);
}

.of-text-page .text-page-updated {
	margin: var(--tp-updated-space) 0 0;
	color: var(--color-text-muted);
	font-size: var(--tp-updated-size);
}