/*
 * Wide News: layout.css
 * Κεφαλίδα, menus, off-canvas, αναζήτηση, σειρά εγγραφής και υποσέλιδο. Φορτώνει σε όλες τις σελίδες.
 * Μόνο tokens του base.css, καμία τιμή χρώματος εδώ. Mobile-first: οι media queries είναι min-width.
 * Μετρήσεις από docs/audit/current-design.md: top bar 50px, main row 120px, desktop chrome από 1000px
 * (στα 820 και 390 το site δείχνει logo και hamburger). Η σειρά εγγραφής έχει padding 60px και δύο στήλες 50%
 * από 576px, με ανοιχτό κείμενο πάνω στο subscribe-bg (το παλιό σκούρο κείμενο είχε περίπου 1.8:1).
 */

:root {
	--wn-header-top-height: 50px;
	--wn-header-main-height: 120px;
	--wn-header-mobile-height: 70px;
	--wn-logo-height: 20px;
}

/* ---- Κοινά ---- */
.wn-shell {
	width: min(100%, 90vw);
	max-width: var(--wn-container);
	margin: 0 auto;
}

.wn-header a:focus-visible,
.wn-header summary:focus-visible,
.wn-footer a:focus-visible,
.wn-subscribe a:focus-visible,
.wn-subscribe input:focus-visible,
.wn-subscribe button:focus-visible,
.wn-skip-link:focus-visible {
	outline: 2px solid var(--wn-color-accent);
	outline-offset: 2px;
}

.wn-header__top a:focus-visible,
.wn-header__top summary:focus-visible,
.wn-subscribe a:focus-visible,
.wn-subscribe input:focus-visible,
.wn-subscribe button:focus-visible {
	outline-color: var(--wn-color-surface);
}

/* ---- Κεφαλίδα ---- */
.wn-header {
	position: relative;
	background: var(--wn-color-surface);
}

.wn-header__top {
	display: none;
	background: var(--wn-color-topbar);
}

.wn-header__top-inner {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: var(--wn-space-2);
	min-height: var(--wn-header-top-height);
}

.wn-header__main-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wn-space-4);
	min-height: var(--wn-header-mobile-height);
	padding: var(--wn-space-2) 0;
}

/* ---- Brand ---- */
.wn-brand {
	display: inline-flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--wn-space-1);
	color: var(--wn-color-heading-alt);
	text-decoration: none;
}

.wn-brand__logo {
	display: block;
	width: auto;
	height: var(--wn-logo-height);
}

.wn-brand__name {
	color: var(--wn-color-heading-alt);
	font-family: var(--wn-font-body);
	font-size: 25px;
	font-weight: 400;
	line-height: 1.2;
	transition: color var(--wn-transition);
}

.wn-brand:hover .wn-brand__name,
.wn-brand:focus-visible .wn-brand__name {
	color: var(--wn-color-accent);
}

/* ---- Menus ---- */
.wn-menu {
	display: block;
	margin: 0;
	padding: 0;
	list-style: none;
}

.wn-menu a {
	color: var(--wn-color-ui);
	font-family: var(--wn-font-body);
	font-size: 12px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0;
	text-decoration: none;
	text-transform: uppercase;
	transition: color var(--wn-transition);
}

.wn-menu a:hover,
.wn-menu a:focus-visible,
.wn-menu a[aria-current],
.wn-menu .current-menu-item > a,
.wn-menu .current-menu-ancestor > a {
	color: var(--wn-color-accent);
}

.wn-menu .sub-menu {
	margin: 0;
	padding: 0 0 0 var(--wn-space-3);
	list-style: none;
}

/* ---- Κύριο μενού (από 1000px, βλ. κάτω) ---- */
.wn-nav {
	display: none;
}

/* ---- Κουμπιά κεφαλίδας (από 1000px) ---- */
.wn-header__button {
	display: none;
}

.wn-header__subscribe {
	display: none;
}

/* ---- Social ---- */
.wn-social {
	display: flex;
	align-items: center;
	gap: var(--wn-space-1);
	margin: 0;
	padding: 0;
	list-style: none;
}

.wn-social__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	color: var(--wn-color-ui);
	transition: color var(--wn-transition);
}

.wn-social__link:hover,
.wn-social__link:focus-visible {
	color: var(--wn-color-heading-alt);
}

.wn-header__top .wn-social__link {
	color: var(--wn-color-topbar-text);
}

.wn-header__top .wn-social__link:hover,
.wn-header__top .wn-social__link:focus-visible {
	color: var(--wn-color-surface);
}

/* ---- Αναζήτηση στο top bar ---- */
.wn-search-toggle {
	position: relative;
	margin-right: calc(var(--wn-space-2) * -1.2);
}

.wn-search-toggle__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	color: var(--wn-color-topbar-text);
	list-style: none;
	cursor: pointer;
	transition: color var(--wn-transition);
}

.wn-search-toggle__button::-webkit-details-marker {
	display: none;
}

.wn-search-toggle__button:hover,
.wn-search-toggle[open] > .wn-search-toggle__button {
	color: var(--wn-color-surface);
}

.wn-search-toggle__panel {
	position: absolute;
	top: 100%;
	right: 0;
	z-index: 50;
	width: min(360px, 90vw);
	padding: var(--wn-space-3);
	border: 1px solid var(--wn-color-border-soft);
	background: var(--wn-color-surface);
}

.wn-header .wn-search-form {
	display: flex;
	flex-wrap: nowrap;
	gap: var(--wn-space-2);
	max-width: none;
	margin: 0;
}

.wn-header .wn-search-form__field {
	flex: 1 1 auto;
	min-width: 0;
	min-height: 44px;
	padding: var(--wn-space-2) var(--wn-space-3);
	border: 2px solid var(--wn-color-border);
	border-radius: var(--wn-radius);
	background: var(--wn-color-surface);
	color: var(--wn-color-heading-alt);
	font-family: var(--wn-font-body);
	font-size: 16px;
}

.wn-header .wn-search-form__submit {
	min-height: 44px;
}

/* ---- Off-canvas (κινητό και tablet) ---- */
.wn-offcanvas {
	display: block;
}

.wn-offcanvas__toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	border-radius: var(--wn-radius);
	color: var(--wn-color-heading-alt);
	list-style: none;
	cursor: pointer;
}

.wn-offcanvas__toggle::-webkit-details-marker {
	display: none;
}

.wn-offcanvas__icon--close {
	display: none;
}

.wn-offcanvas[open] .wn-offcanvas__icon--open {
	display: none;
}

.wn-offcanvas[open] .wn-offcanvas__icon--close {
	display: inline;
}

.wn-offcanvas__panel {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	z-index: 60;
	max-height: 80vh;
	padding: var(--wn-space-4) 5vw var(--wn-space-5);
	overflow-y: auto;
	border-top: 1px solid var(--wn-color-border-soft);
	border-bottom: 1px solid var(--wn-color-border-soft);
	background: var(--wn-color-surface);
}

.wn-offcanvas__panel .wn-menu a {
	display: flex;
	align-items: center;
	min-height: 44px;
	padding: var(--wn-space-2) 0;
	border-bottom: 1px solid var(--wn-color-border-soft);
}

.wn-offcanvas__panel .wn-search-form {
	margin: var(--wn-space-4) 0;
}

.wn-offcanvas__panel .wn-social {
	margin-top: var(--wn-space-3);
}

/* ---- Σειρά εγγραφής ---- */
.wn-subscribe {
	padding: var(--wn-space-7) 0;
	background: var(--wn-color-subscribe-bg);
	color: var(--wn-color-surface);
}

.wn-subscribe__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--wn-space-5);
	align-items: center;
	width: min(100%, 90vw);
	max-width: var(--wn-container);
	margin: 0 auto;
}

.wn-subscribe__title {
	margin: 0;
	color: var(--wn-color-surface);
	font-size: 25px;
	line-height: 1.15;
}

.wn-subscribe__form {
	min-width: 0;
}

/* FluentForm (έκδοση 6.2.12 του plugin στον server): το markup του plugin, μόνο μέσα στη σειρά.
 * Το plugin βάζει τα styles του στην ουρά ΟΤΑΝ τυπώνεται το shortcode (handles fluent-form-styles και
 * fluentform-public-default, χωρίς dependencies), δηλαδή μέσα στο footer.php, άρα τυπώνονται ΜΕΤΑ το layout.css
 * και κερδίζουν κάθε ισοπαλία ειδικότητας. Το κουμπί παίρνει επιπλέον inline `<style>` ανά φόρμα:
 * `form.fluent_form_N .ff-btn-submit:not(.ff_btn_no_style)` (0,3,1) για background-color και color.
 * Γι' αυτό κάθε κανόνας εδώ έχει πρόθεμα `.wn-subscribe .wn-subscribe__form .frm-fluent-form` (0,3,0) και
 * ΕΙΔΙΚΟΤΗΤΑ αυστηρά μεγαλύτερη από κάθε κανόνα του plugin στην ίδια ιδιότητα. Οι τιμές του plugin είναι
 * καταγεγραμμένες και ελέγχονται από το tests/preview/test_subscribe_specificity.py.
 * Δεν καλύπτεται: CSS αποθηκευμένο στα meta της φόρμας (custom CSS, Styler) με selectors `#fluentform_N`. */
.wn-subscribe .wn-subscribe__form .frm-fluent-form {
	margin: 0;
}

.wn-subscribe .wn-subscribe__form .frm-fluent-form fieldset {
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.wn-subscribe .wn-subscribe__form .frm-fluent-form .ff-el-group {
	margin-bottom: var(--wn-space-3);
}

.wn-subscribe .wn-subscribe__form .frm-fluent-form .ff-el-input--label label,
.wn-subscribe .wn-subscribe__form .frm-fluent-form .ff-el-form-check label.ff-el-form-check-label,
.wn-subscribe .wn-subscribe__form .frm-fluent-form .ff-el-form-check label.ff-el-form-check-label span {
	color: var(--wn-color-surface);
	font-family: var(--wn-font-body);
	font-size: 14px;
	line-height: 1.5;
}

.wn-subscribe .wn-subscribe__form .frm-fluent-form .ff-el-input--label.ff-el-is-required label::before,
.wn-subscribe .wn-subscribe__form .frm-fluent-form .ff-el-input--label.ff-el-is-required label::after {
	color: var(--wn-color-surface);
}

.wn-subscribe .wn-subscribe__form .frm-fluent-form .ff-el-form-check label.ff-el-form-check-label a {
	color: var(--wn-color-surface);
	text-decoration: underline;
}

.wn-subscribe .wn-subscribe__form .frm-fluent-form .ff-el-form-control {
	display: block;
	width: 100%;
	min-height: 44px;
	padding: var(--wn-space-2) var(--wn-space-3);
	border: 2px solid var(--wn-color-surface);
	border-radius: var(--wn-radius);
	background: var(--wn-color-surface);
	color: var(--wn-color-heading-alt);
	font-family: var(--wn-font-body);
	font-size: 16px;
	line-height: 1.5;
}

.wn-subscribe .wn-subscribe__form .frm-fluent-form .ff-el-form-control:focus {
	border-color: var(--wn-color-surface);
	background-color: var(--wn-color-surface);
	color: var(--wn-color-heading-alt);
}

.wn-subscribe .wn-subscribe__form .frm-fluent-form .ff-el-form-control::placeholder {
	color: var(--wn-color-meta);
	opacity: 1;
}

.wn-subscribe .wn-subscribe__form .frm-fluent-form .ff-btn-submit {
	min-height: 44px;
	padding: var(--wn-space-2) var(--wn-space-5);
	border: 2px solid var(--wn-color-surface);
	border-radius: var(--wn-radius);
	background: var(--wn-color-primary);
	color: var(--wn-color-surface);
	font-family: var(--wn-font-body);
	font-size: 15px;
	font-weight: 500;
	cursor: pointer;
	transition: background-color var(--wn-transition);
}

.wn-subscribe .wn-subscribe__form .frm-fluent-form .ff-btn-submit:hover,
.wn-subscribe .wn-subscribe__form .frm-fluent-form .ff-btn-submit:focus-visible {
	background: var(--wn-color-heading-alt);
	color: var(--wn-color-surface);
	opacity: 1;
}

.wn-subscribe .wn-subscribe__form .frm-fluent-form .ff-message-success {
	padding: var(--wn-space-3);
	border: 2px solid var(--wn-color-surface);
	border-radius: var(--wn-radius);
	background: transparent;
	color: var(--wn-color-surface);
}

.wn-subscribe .wn-subscribe__form .frm-fluent-form .error,
.wn-subscribe .wn-subscribe__form .frm-fluent-form .text-danger {
	color: var(--wn-color-surface);
	font-size: 14px;
	font-weight: 600;
}

/* ---- Υποσέλιδο ---- */
.wn-footer {
	background: var(--wn-color-footer);
	color: var(--wn-color-ui);
	font-size: 15px;
}

.wn-footer__social {
	padding-top: var(--wn-space-4);
}

.wn-footer__social .wn-social {
	margin-left: calc(var(--wn-space-2) * -1.2);
}

.wn-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--wn-space-2) var(--wn-space-5);
	padding: var(--wn-space-5) 0;
}

.wn-footer__copyright {
	margin: 0;
}

.wn-footer__legal {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wn-space-2);
}

.wn-footer-nav .wn-menu {
	display: flex;
	flex-wrap: wrap;
}

.wn-footer-nav .wn-menu li + li {
	border-left: 1px solid var(--wn-color-ui);
}

.wn-footer-nav .wn-menu a {
	display: inline-block;
	padding: var(--wn-space-2);
	font-size: 15px;
	font-weight: 400;
	text-transform: none;
}

.wn-footer-nav .wn-menu a:hover,
.wn-footer-nav .wn-menu a:focus-visible {
	color: var(--wn-color-heading-alt);
	text-decoration: underline;
}

@media (min-width: 576px) {
	.wn-subscribe__inner {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* ---- Desktop chrome από 1000px (όπως μετρήθηκε στο προηγούμενο θέμα: tablet και mobile δείχνουν logo και hamburger) ---- */
@media (min-width: 1000px) {
	.wn-header__top {
		display: block;
	}

	.wn-header__main-inner {
		min-height: var(--wn-header-main-height);
		padding: 0;
	}

	.wn-nav {
		display: flex;
		margin-left: auto;
	}

	.wn-nav .wn-menu {
		display: flex;
		align-items: stretch;
	}

	.wn-nav .wn-menu > li {
		position: relative;
		display: flex;
	}

	.wn-nav .wn-menu a {
		display: flex;
		align-items: center;
		min-height: var(--wn-header-main-height);
		padding: 0 calc(var(--wn-space-2) * 1.25);
	}

	.wn-nav .sub-menu {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		z-index: 50;
		min-width: 220px;
		padding: var(--wn-space-2) 0;
		border: 1px solid var(--wn-color-border-soft);
		background: var(--wn-color-surface);
	}

	.wn-nav li:hover > .sub-menu,
	.wn-nav li:focus-within > .sub-menu {
		display: block;
	}

	.wn-nav .sub-menu a {
		min-height: 44px;
		padding: var(--wn-space-2) var(--wn-space-3);
	}

	.wn-header__button {
		display: inline-flex;
		align-items: center;
		padding: var(--wn-space-2) var(--wn-space-3);
		font-size: 13px;
		font-weight: 500;
		letter-spacing: 0;
		line-height: 1.3;
		text-decoration: none;
		text-transform: none;
	}

	.wn-header__subscribe {
		display: inline-flex;
		align-items: center;
		padding: var(--wn-space-2) var(--wn-space-3);
		border: 2px solid var(--wn-color-primary);
		background: var(--wn-color-surface);
		color: var(--wn-color-primary);
		font-size: 13px;
		font-weight: 500;
		letter-spacing: 0;
		line-height: 1.3;
		text-decoration: none;
		text-transform: none;
	}

	.wn-header__subscribe:hover,
	.wn-header__subscribe:focus-visible {
		background: var(--wn-color-primary);
		color: var(--wn-color-surface);
	}

	.wn-offcanvas {
		display: none;
	}
}

/* ---- Reduced motion: καμία μετάβαση ---- */
@media (prefers-reduced-motion: reduce) {
	.wn-brand__name,
	.wn-menu a,
	.wn-social__link,
	.wn-search-toggle__button,
	.wn-subscribe .wn-subscribe__form .frm-fluent-form .ff-btn-submit {
		transition: none;
	}
}