/*
 * Wide News: base.css
 * Tokens (--wn-*), self-hosted @font-face, βασική τυπογραφία.
 * Οι τιμές είναι οι μετρημένες του docs/audit/current-design.md (§2 ως §5, §10).
 * Το Task 8 (Customizer) αντικαθιστά τα 6 customizer-driven tokens με inline :root override.
 */

/* ---- Fonts (self-hosted, variable woff2 ανά subset) ----
 * Playfair Display: wght 700 ως 900, μόνο latin (η οικογένεια δεν έχει ελληνικά).
 * Noto Serif Display: wght 700 ως 900, μόνο greek, ΜΟΝΟ για τα ελληνικά γράμματα των τίτλων. Είναι δεύτερη στο
 * --wn-font-heading: ο browser διαλέγει γραμματοσειρά ανά χαρακτήρα, άρα τα ελληνικά γράμματα βγαίνουν σε Noto Serif
 * Display (η Playfair δεν τα έχει) και τα λατινικά μένουν Playfair. Το unicode-range είναι αυτό του greek subset.
 * Inter: wght 400 ως 700, latin και greek.
 */
@font-face {
	font-family: "Playfair Display";
	font-style: normal;
	font-weight: 700 900;
	font-display: swap;
	src: url("../fonts/playfair-display-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Noto Serif Display";
	font-style: normal;
	font-weight: 700 900;
	font-display: swap;
	src: url("../fonts/noto-serif-display-greek.woff2") format("woff2");
	unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}

@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url("../fonts/inter-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url("../fonts/inter-greek.woff2") format("woff2");
	unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}

/* ---- Tokens ----
 * Contrast (WCAG AA 4.5:1 για κανονικό κείμενο, μετρημένο στο test L9 του tests/preview/test-scaffold.sh):
 * meta #6b6b6b (ήταν #888888, 3.43:1) και accent #337f7e (ήταν #3a908f, 3.65:1) είναι σκουρότερα
 * ώστε το κείμενο meta και το hover/focus των links να περνούν στο bg #fbfbfc.
 * Γνωστό ζεύγος που ΔΕΝ περνά: accent πάνω στο --wn-color-bg-archive (3.99:1). Σε αυτό το φόντο
 * (archives, Task 6) το κείμενο παίρνει --wn-color-primary ή --wn-color-heading-alt, όχι accent. */
:root {
	/* Customizer-driven (Task 8) */
	--wn-color-primary: #4e7173;
	--wn-color-accent: #337f7e;
	--wn-color-text: #333333;
	--wn-color-bg: #fbfbfc;
	--wn-font-heading: "Playfair Display", "Noto Serif Display", Georgia, "Times New Roman", serif;
	--wn-font-body: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

	/* Σταθερά */
	--wn-color-ui: #475671;
	--wn-color-heading: #1a1a1a;
	--wn-color-heading-alt: #293241;
	--wn-color-meta: #6b6b6b;
	--wn-color-border: #4e4e4e;
	--wn-color-border-soft: #eeeeee;
	--wn-color-muted: #b4b5b8;
	--wn-color-bg-archive: #eeecec;
	--wn-color-surface: #ffffff;
	--wn-color-footer: #e8e3e3;
	--wn-color-topbar: #29333c;
	--wn-color-topbar-text: #d4d6d8;
	--wn-color-subscribe-bg: #37484a;
	--wn-color-trending-bg: #e0e3e8;
	--wn-color-hot-bg: rgba(207, 207, 207, 0.45);
	--wn-color-badge: #ff0000;

	--wn-text-body-size: 17px;
	--wn-text-body-line: 1.7;
	--wn-text-meta-size: 10px;
	--wn-text-meta-spacing: 0.15em;

	--wn-container: 1290px;
	--wn-container-narrow: 750px;

	--wn-space-1: 5px;
	--wn-space-2: 10px;
	--wn-space-3: 15px;
	--wn-space-4: 20px;
	--wn-space-5: 30px;
	--wn-space-6: 50px;
	--wn-space-7: 60px;
	--wn-space-8: 100px;

	--wn-radius: 2px;
	--wn-radius-img: 4px;

	--wn-transition: 0.12s cubic-bezier(0.455, 0.03, 0.515, 0.955);
}

/* Breakpoints (οι media queries δεν δέχονται var()): tablet 690px, desktop 1000px. */

/* ---- Base ---- */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	background: var(--wn-color-bg);
	color: var(--wn-color-text);
	font-family: var(--wn-font-body);
	font-size: var(--wn-text-body-size);
	line-height: var(--wn-text-body-line);
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
}

h1,
h2,
h3 {
	margin: 0 0 var(--wn-space-3);
	color: var(--wn-color-heading);
	font-family: var(--wn-font-heading);
	font-weight: 900;
	letter-spacing: -0.01em;
	line-height: 1.15;
}

a {
	color: var(--wn-color-primary);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.15em;
	transition: color var(--wn-transition);
}

a:hover,
a:focus-visible {
	color: var(--wn-color-accent);
}

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

.wn-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100;
	padding: var(--wn-space-2) var(--wn-space-4);
	background: var(--wn-color-surface);
	color: var(--wn-color-heading);
}

.wn-skip-link:focus {
	left: var(--wn-space-2);
	top: var(--wn-space-2);
}

.wn-main {
	width: min(100%, 90vw);
	max-width: var(--wn-container);
	margin: 0 auto;
	padding: var(--wn-space-7) 0;
}

.wn-entry + .wn-entry {
	margin-top: var(--wn-space-5);
}

.wn-content > * + * {
	margin-top: 1.5em;
}

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

.screen-reader-text:focus {
	position: static;
	width: auto;
	height: auto;
	margin: 0;
	overflow: visible;
	clip-path: none;
}

.wn-meta,
.wn-meta-link {
	color: var(--wn-color-meta);
	font-family: var(--wn-font-body);
	font-size: var(--wn-text-meta-size);
	font-weight: 700;
	letter-spacing: var(--wn-text-meta-spacing);
	line-height: 1.5;
	text-transform: uppercase;
	text-decoration: none;
}

.wn-meta-link {
	color: var(--wn-color-ui);
}

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

.wn-button {
	display: inline-block;
	padding: var(--wn-space-3) var(--wn-space-4);
	border: 0;
	border-radius: var(--wn-radius);
	background: var(--wn-color-primary);
	color: var(--wn-color-surface);
	font-family: var(--wn-font-body);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color var(--wn-transition);
}

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

/* ---- Placeholder εικόνας (inline SVG του wn_featured_placeholder), χρώματα μόνο από tokens ---- */
.wn-placeholder__bg {
	fill: var(--wn-color-trending-bg);
}

.wn-placeholder__fg {
	fill: var(--wn-color-muted);
}

/* ---- Κρυμμένο οπτικά, διαθέσιμο σε screen readers (h1 της αρχικής, κρυμμένοι τίτλοι blocks) ---- */
.wn-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* ---- Reduced motion: καμία μετάβαση σε links και κουμπιά ---- */
@media (prefers-reduced-motion: reduce) {
	a,
	.wn-button {
		transition: none;
	}
}