/*
 * Paws UI — component layer.
 *
 * Τα χρώματα, οι γραμματοσειρές, τα κενά και οι σκιές ορίζονται στο
 * theme.json και φτάνουν εδώ ως `--wp--preset--*`. Το inc/tokens.php τα
 * ξαναδηλώνει με σύντομα ονόματα `--ui-*`, τα οποία χρησιμοποιεί αυτό το
 * αρχείο. Καμία τιμή χρώματος δεν γράφεται εδώ κατευθείαν — αν χρειαστεί
 * αλλαγή παλέτας, αλλάζει μόνο το theme.json.
 *
 * Οι εναλλακτικές τιμές στις `var()` υπάρχουν για την περίπτωση που το
 * φύλλο φορτωθεί χωρίς το inline token block (π.χ. σε απομονωμένο preview).
 *
 * Περιεχόμενα
 *  1. Βάση & προσβασιμότητα
 *  2. Τυπογραφία
 *  3. Κουμπιά
 *  4. Επιφάνειες — κάρτες & πάνελ
 *  5. Φόρμες
 *  6. Πίνακες
 *  7. Ειδοποιήσεις & σήματα
 *  8. Παραλλαγές μπλοκ
 *  9. Κεφαλίδα, υποσέλιδο & πλοήγηση
 * 10. Σελιδοποίηση & σχόλια
 * 11. Βοηθητικές κλάσεις
 */

/* ============================================================
   1. Βάση & προσβασιμότητα
   ============================================================ */

:root {
	--ui-primary: #0b7a74;
	--ui-secondary: #8b2fbf;
	--ui-ink: #1b1a22;
	--ui-muted: #55505f;
	--ui-surface: #fff;
	--ui-bg: #fdfcf3;
	--ui-border: #e4e1d5;
	--ui-radius-md: 12px;
	--ui-radius-lg: 16px;
	--ui-radius-pill: 999px;
	--ui-line-base: rgba(11, 122, 116, .12);
	--ui-line-strong: rgba(11, 122, 116, .17);
	--ui-ease-base: cubic-bezier(.4, 0, .2, 1);
	--ui-control-h: 44px;
	--ui-control-pad: 13px 18px;
}

html {
	scroll-behavior: smooth;
	scroll-padding-top: 96px;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
	}
}

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
	text-rendering: optimizeLegibility;
}

/*
 * Ένα ορατό δαχτυλίδι εστίασης παντού. Το `:focus-visible` το κρατά κρυφό
 * στο ποντίκι και ορατό στο πληκτρολόγιο.
 */
:focus-visible {
	outline: 2px solid var(--ui-primary);
	outline-offset: 3px;
	border-radius: 6px;
}

::selection {
	background: color-mix(in srgb, var(--ui-secondary) 22%, #fff);
	color: var(--ui-ink);
}

img,
video {
	max-width: 100%;
	height: auto;
}

address {
	font-style: normal;
}

hr,
.wp-block-separator {
	border: 0;
	border-top: 1px solid var(--ui-border);
	opacity: 1;
}

.skip-link,
.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.skip-link:focus,
.screen-reader-text:focus {
	position: fixed;
	top: 12px;
	left: 12px;
	z-index: 100000;
	width: auto;
	height: auto;
	margin: 0;
	padding: 14px 20px;
	clip-path: none;
	background: var(--ui-surface);
	color: var(--ui-ink);
	border-radius: var(--ui-radius-md);
	box-shadow: var(--wp--preset--shadow--pop, 0 20px 40px rgba(27, 26, 34, .16));
	font-weight: 700;
	font-size: .875rem;
	text-decoration: none;
}

.ui-scrollable {
	scrollbar-width: thin;
	scrollbar-color: var(--ui-line-strong) transparent;
}

.ui-scrollable::-webkit-scrollbar {
	width: 8px;
	height: 8px;
}

.ui-scrollable::-webkit-scrollbar-thumb {
	background: var(--ui-line-strong);
	border-radius: var(--ui-radius-pill);
}

/* ============================================================
   2. Τυπογραφία
   ============================================================ */

.ui-eyebrow {
	display: inline-block;
	font-size: .8125rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--ui-primary);
}

/*
 * Κείμενο με το gradient της μάρκας. Κάθε στάση του gradient έχει τουλάχιστον
 * 5.18:1 σε λευκό, οπότε το αποτέλεσμα περνά AA σε όλο το μήκος του. Αν το
 * `background-clip` δεν υποστηρίζεται, μένει το χρώμα του primary.
 */
.ui-gradtext {
	color: var(--ui-primary);
}

@supports (-webkit-background-clip: text) or (background-clip: text) {
	.ui-gradtext {
		background: var(--ui-grad-brand, linear-gradient(135deg, #0b7a74 0%, #4a5799 52%, #8b2fbf 100%));
		-webkit-background-clip: text;
		background-clip: text;
		color: transparent;
	}
}

.ui-lead {
	font-size: var(--wp--preset--font-size--lg, 1.125rem);
	line-height: 1.7;
	color: var(--ui-muted);
}

/* ============================================================
   3. Κουμπιά
   ============================================================ */

.wp-block-button__link,
.ui-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	font-family: inherit;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	border: 0;
	cursor: pointer;
	transition:
		transform .3s var(--ui-ease-base),
		box-shadow .3s var(--ui-ease-base),
		background-color .3s var(--ui-ease-base),
		border-color .3s var(--ui-ease-base),
		color .3s var(--ui-ease-base);
}

.wp-block-button__link:hover,
.ui-btn:hover {
	transform: translateY(-2px);
}

.wp-block-button__link:active,
.ui-btn:active {
	transform: translateY(0);
}

.ui-btn {
	padding: 14px 24px;
	border-radius: var(--ui-radius-md);
	font-size: .9375rem;
	background: var(--ui-grad-brand, linear-gradient(135deg, #0b7a74 0%, #4a5799 52%, #8b2fbf 100%));
	color: #fff;
	box-shadow: var(--wp--preset--shadow--brand, 0 10px 26px rgba(11, 122, 116, .3));
}

.ui-btn:hover {
	color: #fff;
	box-shadow: 0 14px 32px rgba(11, 122, 116, .45);
}

/* Δευτερεύον κουμπί: περίγραμμα σε λευκή επιφάνεια. */
.ui-btn--ghost,
.wp-block-button.is-style-ghost > .wp-block-button__link {
	background: var(--ui-surface);
	color: var(--ui-muted);
	border: 1px solid var(--ui-line-base);
	box-shadow: none;
	font-weight: 600;
}

.ui-btn--ghost:hover,
.wp-block-button.is-style-ghost > .wp-block-button__link:hover {
	color: var(--ui-primary);
	border-color: var(--ui-line-strong);
	box-shadow: none;
}

.ui-btn--dark,
.wp-block-button.is-style-dark > .wp-block-button__link {
	background: var(--ui-ink);
	color: #fff;
	box-shadow: none;
}

.ui-btn--dark:hover,
.wp-block-button.is-style-dark > .wp-block-button__link:hover {
	background: var(--ui-ink-2, #34313f);
	color: #fff;
}

.ui-btn--sm {
	padding: 9px 16px;
	font-size: .8125rem;
	border-radius: var(--ui-radius-sm, 8px);
}

.ui-btn--lg {
	padding: 17px 30px;
	font-size: 1.0625rem;
	border-radius: var(--ui-radius-lg);
}

.ui-btn[disabled],
.ui-btn[aria-disabled="true"],
.wp-block-button__link[disabled] {
	opacity: .55;
	cursor: not-allowed;
	transform: none;
	box-shadow: none;
}

/* ============================================================
   4. Επιφάνειες — κάρτες & πάνελ
   ============================================================ */

.ui-card,
.wp-block-group.is-style-card {
	background: var(--ui-surface);
	border: 1px solid var(--ui-border);
	border-radius: var(--wp--custom--radius--xl, 22px);
	padding: var(--wp--preset--spacing--30, 24px);
	box-shadow: var(--wp--preset--shadow--card, 0 12px 34px rgba(27, 26, 34, .08));
}

.ui-card--flat {
	box-shadow: none;
}

.ui-card--interactive {
	transition: transform .3s var(--ui-ease-base), box-shadow .3s var(--ui-ease-base);
}

.ui-card--interactive:hover {
	transform: translateY(-4px);
	box-shadow: var(--wp--preset--shadow--pop, 0 20px 40px rgba(27, 26, 34, .16));
}

/*
 * Πάνελ: επιφάνεια χωρίς σκιά, για ομαδοποίηση μέσα σε μια σελίδα — φόρμες,
 * ρυθμίσεις, σύνολα πεδίων.
 */
.ui-panel,
.wp-block-group.is-style-panel {
	background: var(--ui-surface-alt, #fbfaef);
	border: 1px solid var(--ui-border);
	border-radius: var(--ui-radius-lg);
	padding: var(--wp--preset--spacing--30, 24px);
}

.ui-panel__title {
	margin: 0 0 12px;
	font-family: var(--wp--preset--font-family--display, inherit);
	font-size: 1.0625rem;
	font-weight: 600;
	color: var(--ui-ink);
}

/* ============================================================
   5. Φόρμες
   ============================================================ */

.ui-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-bottom: 18px;
}

.ui-label,
label {
	font-size: .875rem;
	font-weight: 600;
	color: var(--ui-ink-2, #34313f);
}

.ui-label .ui-req {
	color: var(--ui-danger, #b3261e);
	margin-left: 2px;
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="date"],
input[type="time"],
input[type="datetime-local"],
select,
textarea,
.ui-input {
	width: 100%;
	min-height: var(--ui-control-h);
	padding: var(--ui-control-pad);
	font-family: inherit;
	font-size: .9375rem;
	color: var(--ui-ink);
	background: var(--ui-surface);
	border: 1px solid var(--ui-line-base);
	border-radius: var(--ui-radius-md);
	transition: border-color .2s var(--ui-ease-base), box-shadow .2s var(--ui-ease-base);
}

textarea {
	min-height: 120px;
	resize: vertical;
}

/*
 * Το βελάκι του select γράφεται inline ως data URI, ώστε να μην απαιτείται
 * επιπλέον αίτημα δικτύου. Το χρώμα είναι το ink σε 60% αδιαφάνεια.
 */
select {
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%231b1a22' stroke-opacity='.6' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 16px center;
	padding-right: 44px;
}

input:focus,
select:focus,
textarea:focus,
.ui-input:focus {
	outline: 0;
	border-color: var(--ui-primary);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-primary) 18%, transparent);
}

input::placeholder,
textarea::placeholder {
	color: var(--ui-muted-soft, #6f6a7d);
	opacity: 1;
}

input[disabled],
select[disabled],
textarea[disabled] {
	background: var(--ui-surface-alt, #fbfaef);
	color: var(--ui-muted-soft, #6f6a7d);
	cursor: not-allowed;
}

input[aria-invalid="true"],
.ui-field--error input,
.ui-field--error select,
.ui-field--error textarea {
	border-color: var(--ui-danger, #b3261e);
}

.ui-field__hint {
	font-size: .8125rem;
	color: var(--ui-muted-soft, #6f6a7d);
}

.ui-field__error {
	font-size: .8125rem;
	font-weight: 600;
	color: var(--ui-danger, #b3261e);
}

.ui-check {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: .9375rem;
	color: var(--ui-muted);
}

.ui-check input[type="checkbox"],
.ui-check input[type="radio"] {
	width: 18px;
	height: 18px;
	min-height: 0;
	margin-top: 2px;
	flex: 0 0 auto;
	accent-color: var(--ui-primary);
}

/* ============================================================
   6. Πίνακες
   ============================================================ */

.ui-table-wrap {
	overflow-x: auto;
	border: 1px solid var(--ui-border);
	border-radius: var(--ui-radius-lg);
	background: var(--ui-surface);
}

.ui-table,
.wp-block-table table {
	width: 100%;
	border-collapse: collapse;
	font-size: .9375rem;
}

.ui-table th,
.wp-block-table th {
	text-align: left;
	font-family: var(--wp--preset--font-family--display, inherit);
	font-size: .8125rem;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--ui-muted);
	background: var(--ui-surface-alt, #fbfaef);
	padding: 14px 18px;
	border-bottom: 1px solid var(--ui-border);
}

.ui-table td,
.wp-block-table td {
	padding: 14px 18px;
	border-bottom: 1px solid var(--ui-line-soft, rgba(11, 122, 116, .09));
	color: var(--ui-muted);
	vertical-align: top;
}

.ui-table tbody tr:last-child td,
.wp-block-table tbody tr:last-child td {
	border-bottom: 0;
}

.ui-table tbody tr:hover td {
	background: color-mix(in srgb, var(--ui-primary) 3%, transparent);
}

.ui-table__num {
	text-align: right;
	font-variant-numeric: tabular-nums;
}

/* ============================================================
   7. Ειδοποιήσεις & σήματα
   ============================================================ */

.ui-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 12px;
	border-radius: var(--ui-radius-pill);
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .02em;
	background: color-mix(in srgb, var(--ui-primary) 10%, #fff);
	color: var(--ui-primary);
	border: 1px solid color-mix(in srgb, var(--ui-primary) 20%, transparent);
}

.ui-badge--success {
	background: color-mix(in srgb, var(--ui-success, #12793b) 10%, #fff);
	color: var(--ui-success, #12793b);
	border-color: color-mix(in srgb, var(--ui-success, #12793b) 22%, transparent);
}

.ui-badge--warning {
	background: color-mix(in srgb, var(--ui-warning, #8a6400) 12%, #fff);
	color: var(--ui-warning, #8a6400);
	border-color: color-mix(in srgb, var(--ui-warning, #8a6400) 24%, transparent);
}

.ui-badge--danger {
	background: color-mix(in srgb, var(--ui-danger, #b3261e) 9%, #fff);
	color: var(--ui-danger, #b3261e);
	border-color: color-mix(in srgb, var(--ui-danger, #b3261e) 20%, transparent);
}

.ui-badge--neutral {
	background: var(--ui-surface-alt, #fbfaef);
	color: var(--ui-muted);
	border-color: var(--ui-border);
}

/* Στίγμα κατάστασης — π.χ. «ανοιχτά τώρα», «σε εξέλιξη». */
.ui-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: currentColor;
	flex: 0 0 auto;
}

.ui-notice {
	display: flex;
	gap: 12px;
	padding: 16px 18px;
	border-radius: var(--ui-radius-lg);
	border: 1px solid var(--ui-border);
	border-left-width: 3px;
	background: var(--ui-surface);
	font-size: .9375rem;
	color: var(--ui-muted);
}

.ui-notice__title {
	display: block;
	margin-bottom: 2px;
	font-weight: 700;
	color: var(--ui-ink);
}

.ui-notice--info    { border-left-color: var(--ui-info, #4a5799); }
.ui-notice--success { border-left-color: var(--ui-success, #12793b); }
.ui-notice--warning { border-left-color: var(--ui-warning, #8a6400); }
.ui-notice--danger  { border-left-color: var(--ui-danger, #b3261e); }

/* ============================================================
   8. Παραλλαγές μπλοκ
   ============================================================ */

/* Λίστα με τικ αντί για κουκκίδες. */
.wp-block-list.is-style-ticks,
.ui-ticks {
	list-style: none;
	padding-left: 0;
}

.wp-block-list.is-style-ticks li,
.ui-ticks li {
	position: relative;
	padding-left: 30px;
	margin-bottom: 10px;
}

.wp-block-list.is-style-ticks li::before,
.ui-ticks li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .45em;
	width: 18px;
	height: 18px;
	background: var(--ui-primary);
	border-radius: 50%;
	/*
	 * Το τικ σχεδιάζεται ως μάσκα πάνω στο χρώμα του primary, ώστε να
	 * ακολουθεί την παλέτα χωρίς δεύτερο στοιχείο ή εικόνα.
	 */
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 12px 12px no-repeat,
		linear-gradient(#000, #000);
	-webkit-mask-composite: xor;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 12px 12px no-repeat,
		linear-gradient(#000, #000);
	mask-composite: exclude;
}

.wp-block-image.is-style-framed img {
	border-radius: var(--wp--custom--radius--xl, 22px);
	box-shadow: var(--wp--preset--shadow--card, 0 12px 34px rgba(27, 26, 34, .08));
}

/* Πτυσσόμενο πάνελ — η βάση για FAQ και «δείτε περισσότερα». */
.wp-block-details.is-style-panel,
.ui-disclosure {
	background: var(--ui-surface);
	border: 1px solid var(--ui-border);
	border-radius: var(--ui-radius-lg);
	padding: 4px 20px;
	margin-bottom: 10px;
}

.wp-block-details.is-style-panel > summary,
.ui-disclosure > summary {
	cursor: pointer;
	padding: 16px 0;
	font-family: var(--wp--preset--font-family--display, inherit);
	font-weight: 600;
	color: var(--ui-ink);
	list-style: none;
}

.wp-block-details.is-style-panel > summary::-webkit-details-marker,
.ui-disclosure > summary::-webkit-details-marker {
	display: none;
}

.wp-block-details.is-style-panel > summary::after,
.ui-disclosure > summary::after {
	content: "+";
	float: right;
	font-size: 1.25rem;
	line-height: 1;
	color: var(--ui-primary);
	transition: transform .25s var(--ui-ease-base);
}

.wp-block-details.is-style-panel[open] > summary::after,
.ui-disclosure[open] > summary::after {
	transform: rotate(45deg);
}

.wp-block-details.is-style-panel > :not(summary),
.ui-disclosure > :not(summary) {
	padding-bottom: 16px;
	color: var(--ui-muted);
}

/* ============================================================
   9. Κεφαλίδα, υποσέλιδο & πλοήγηση
   ============================================================ */

.ui-site-header {
	position: sticky;
	top: 0;
	z-index: 90;
	background: color-mix(in srgb, var(--ui-bg) 88%, transparent);
	backdrop-filter: saturate(150%) blur(12px);
	border-bottom: 1px solid var(--ui-line-soft, rgba(11, 122, 116, .09));
}

/* Η μπάρα του WordPress μετακινεί τη σελίδα προς τα κάτω. */
.admin-bar .ui-site-header {
	top: 32px;
}

@media screen and (max-width: 782px) {
	.admin-bar .ui-site-header {
		top: 46px;
	}
}

.ui-site-footer {
	background: var(--ui-surface-alt, #fbfaef);
	border-top: 1px solid var(--ui-line-soft, rgba(11, 122, 116, .09));
}

.wp-block-navigation .wp-block-navigation-item__content:where(:not(.wp-element-button)) {
	text-decoration: none;
}

.wp-block-navigation .wp-block-navigation-submenu__toggle + .wp-block-navigation__submenu-container,
.wp-block-navigation__submenu-container {
	border-radius: var(--ui-radius-md);
	border-color: var(--ui-border);
	box-shadow: var(--wp--preset--shadow--card, 0 12px 34px rgba(27, 26, 34, .08));
}

/* ============================================================
   10. Σελιδοποίηση & σχόλια
   ============================================================ */

.wp-block-query-pagination {
	gap: 8px;
}

.wp-block-query-pagination .page-numbers,
.wp-block-query-pagination-next,
.wp-block-query-pagination-previous {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 12px;
	border-radius: var(--ui-radius-md);
	border: 1px solid var(--ui-border);
	background: var(--ui-surface);
	color: var(--ui-muted);
	font-size: .875rem;
	font-weight: 600;
	text-decoration: none;
}

.wp-block-query-pagination .page-numbers:hover,
.wp-block-query-pagination-next:hover,
.wp-block-query-pagination-previous:hover {
	border-color: var(--ui-line-strong);
	color: var(--ui-primary);
}

.wp-block-query-pagination .page-numbers.current {
	background: var(--ui-primary);
	border-color: var(--ui-primary);
	color: #fff;
}

.wp-block-comment-template li {
	list-style: none;
	padding: 20px 0;
	border-bottom: 1px solid var(--ui-line-soft, rgba(11, 122, 116, .09));
}

.wp-block-post-comments-form .comment-form input:not([type="submit"]),
.wp-block-post-comments-form .comment-form textarea {
	border-radius: var(--ui-radius-md);
}

/* ============================================================
   11. Βοηθητικές κλάσεις
   ============================================================ */

.ui-stack   { display: flex; flex-direction: column; }
.ui-row     { display: flex; align-items: center; }
.ui-wrap    { flex-wrap: wrap; }
.ui-gap-8   { gap: 8px; }
.ui-gap-12  { gap: 12px; }
.ui-gap-16  { gap: 16px; }
.ui-gap-24  { gap: 24px; }
.ui-grow    { flex: 1 1 auto; }
.ui-center  { text-align: center; }
.ui-nowrap  { white-space: nowrap; }
.ui-tnum    { font-variant-numeric: tabular-nums; }
.ui-muted   { color: var(--ui-muted); }
.ui-hidden  { display: none !important; }

@media (max-width: 781px) {
	.ui-hide-mobile { display: none !important; }
}

@media (min-width: 782px) {
	.ui-hide-desktop { display: none !important; }
}