/*
 * Base: design tokens, reset, typography, generic utilities.
 *
 * Load order (includes/enqueue.php, same list in includes/editor.php):
 * fonts → base → layout → header → cards → article → sidebar → home → schedule → forms →
 * pagination → footer. Later files may rely on winning ties against earlier ones.
 *
 * Breakpoints in use (max-width unless noted): 1199 (burger header), 1023 (tablet: one main
 * column), 800, 767, 600, 480; min-width 728 (header leaderboard).
 */

/* Tokens ------------------------------------------------------------------------------- */
/*
 * Colour palette (docs/work/colours.md). Pick a token by ROLE, never by its value:
 *   --ink          text, dark bands (hero, footer, mobile menu)
 *   --ink-muted    secondary text: dates, meta, captions, labels
 *   --paper        page background
 *   --surface      cards, panels, boxes, inputs (also white text on dark bands)
 *   --line         borders, rules, dividers
 *   --accent       orange FILLS (buttons, pill, bars, badges, active underline) and orange
 *                  text on DARK backgrounds only (2.95:1 on --paper fails WCAG AA)
 *   --accent-text  orange text on LIGHT backgrounds: kickers, links, "Όλα ›" (4.6:1 on --paper)
 *   --brand        logo-related and hover states only
 *   --overlay      translucent dark layer over images/content
 */
:root {
	--ink: #161616;
	--ink-muted: #595959;
	--paper: #FAF8F5;
	--surface: #FFFFFF;
	--line: #E0DDD8;
	--accent: #FF5A00;
	--accent-text: #C2410C;
	--brand: #314B7E;
	--overlay: rgba(0, 0, 0, 0.3);

	--fontFamily: 'Roboto', 'Helvetica Neue', Arial, sans-serif;
	--fontFamilyHeadings: 'Roboto Condensed', 'Roboto Condensed Fallback', 'Helvetica Neue', Arial, sans-serif;
}

/* Reset -------------------------------------------------------------------------------- */
html {
	font-family: sans-serif;
	-ms-text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%;
	font-size: 10px; /* everything is sized in rem on top of this */
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

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

body {
	font-size: 14px;
	line-height: 1.42857143;
	margin: 0;
}

figure {
	margin: 0;
}

img {
	vertical-align: middle;
	border: 0;
}

.img-responsive,
figure img {
	display: block;
	max-width: 100%;
	height: auto;
}

/* Responsive 16:9 embeds (classes used in post content) */
.video-container,
.videoWidgetContainer,
.embed-youtube {
	position: relative;
	padding-bottom: 56.25%;
	overflow: hidden;
	max-width: 100%;
	height: auto;
}

.video-container iframe,
.video-container object,
.video-container embed,
.videoWidgetContainer iframe,
.videoWidgetContainer object,
.videoWidgetContainer embed,
.embed-youtube iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

svg:not(:root) {
	overflow: hidden;
}

h1, h2, h3, h4, h5, h6 {
	margin: 0;
	padding: 0;
}

/* Utilities ---------------------------------------------------------------------------- */
.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	border: 0;
}

.sr-only-focusable:active,
.sr-only-focusable:focus {
	position: static;
	width: auto;
	height: auto;
	margin: 0;
	overflow: visible;
	clip: auto;
}

/* WordPress core class (search form labels, …) */
.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* Skip link (header.php) */
a.skip-main {
	left: -999px;
	position: absolute;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
	z-index: -999;
}

a.skip-main:focus,
a.skip-main:active {
	color: var(--surface);
	background-color: var(--ink);
	left: auto;
	top: auto;
	width: 30%;
	height: auto;
	overflow: auto;
	margin: 10px 35%;
	padding: 5px;
	border-radius: 15px;
	border: 4px solid var(--accent);
	text-align: center;
	font-size: 1.2em;
	z-index: 999;
}

.text-center {
	text-align: center;
}

.relative {
	position: relative;
}

/* Typography --------------------------------------------------------------------------- */
body {
	font-family: var(--fontFamily);
	font-size: 1.6rem;
	background-color: var(--paper);
	color: var(--ink);
}

p {
	margin: 0;
	padding: 0;
	line-height: 1.5;
}

p + p { margin-top: 2rem; }

a {
	color: var(--accent-text);
	text-decoration: none;
	transition: color .25s;
}

a:hover {
	text-decoration: underline;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--fontFamilyHeadings);
	line-height: 1.2;
}

h1, .h1 { font-size: 3.6rem; }
h2, .h2 { font-size: 2.4rem; }
h3, .h3 { font-size: 1.8rem; }
h4, .h4 { font-size: 1.6rem; }
h5, .h5 { font-size: 1.4rem; }
h6, .h6 { font-size: 1.2rem; }

.title > a {
	text-decoration: underline 2px transparent;
	text-underline-offset: 0.18em;
	color: var(--ink);
	transition: text-decoration-color 0.2s ease;
}

/* Hover = underline in the text's own colour, no colour change (one hover style on light and dark bands). */
.title > a:hover { text-decoration-color: currentColor; }

.headingSmall,
a.headingSmallLink {
	font-weight: bold;
	font-size: 2.5rem;
	text-transform: uppercase;
	color: var(--ink);
}

a.headingSmallLink:hover {
	text-decoration: none;
}

.headingTiny {
	font-weight: bold;
	font-size: 1.3rem;
	text-transform: uppercase;
}

.headingTiny > a {
	color: var(--accent-text);
	transition: color .25s;
}

.headingTiny > a:hover {
	color: var(--ink);
	text-decoration: none;
}

.linkMore {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	font-weight: 700;
	color: var(--accent-text);
	text-decoration: none;
}

/* "Go" links: the arrow slides on hover (same as the section headers' «Δείτε περισσότερα»). */
.linkMore__arrow {
	transition: transform 0.2s ease;
}

.linkMore:hover {
	text-decoration: none;
}

.linkMore:hover .linkMore__arrow,
.linkMore:focus-visible .linkMore__arrow {
	transform: translateX(4px);
}

@media (prefers-reduced-motion: reduce) {
	.linkMore__arrow { transition: none; }
}

/* Media defaults ----------------------------------------------------------------------- */
iframe {
	width: 100%;
}

figure img {
	width: 100%;
}