/*
Theme Name: Athlete's Roadmap
Description: Theme for athletesroadmap.com. Pages stay plain blocks; inc/sections.php groups them into sections at render time. Deployed from git (apetav/athletesroadmap-site); do not edit on the server.
Version: 0.1.0
Requires PHP: 8.1
Text Domain: athletes-roadmap
*/

/* Fonts (Jost + Manrope Greek as "Roadmap Display", Manrope; self-hosted, with Greek) are declared in theme.json. */

/* ---------- Tokens ---------- */
:root {
	/* Brand colours (Guidelines.pdf): Blue + Green basic, Beige + Gold secondary. */
	--blue: #223654;
	--green: #4b8c87;
	--beige: #ede7e4;
	--gold: #d6a96a;
	/* Derived shades, for text contrast (WCAG AA): white on --green is 3.9:1, on --green-dark 5.4:1. */
	--green-dark: #3d746f;
	--green-tint: #e2ecea;
	--gold-soft: #e6c899;
	--blue-soft: #4c5b72;
	--white: #fff;
	--line: rgba(34, 54, 84, 0.13);
	/* Brand type: Tw Cen MT → Jost (+ Manrope for Greek); ZonaPro-Light → Manrope. */
	--display: "Roadmap Display", Jost, "Century Gothic", Futura, sans-serif;
	--body: Manrope, system-ui, -apple-system, "Segoe UI", sans-serif;
	--wrap: 1200px;
	--gutter: clamp(1rem, 4vw, 2.5rem);
	--radius: 14px;
	--section-y: clamp(3.5rem, 8vw, 7rem);
	--shadow: 0 1px 2px rgba(34, 54, 84, 0.06), 0 12px 32px -12px rgba(34, 54, 84, 0.2);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 8.5rem; }
body {
	margin: 0;
	background: var(--beige);
	color: var(--blue);
	font-family: var(--body);
	font-size: 1.0625rem;
	line-height: 1.7;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--blue); text-decoration-color: var(--green); text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
a:hover { color: var(--green-dark); }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; border-radius: 4px; }
h1, h2, h3, h4 { font-family: var(--display); font-weight: 700; line-height: 1.15; letter-spacing: 0; margin: 0 0 0.6em; text-wrap: balance; }
h1 { font-size: clamp(2.1rem, 1.3rem + 3.4vw, 3.75rem); font-weight: 700; line-height: 1.08; letter-spacing: -0.01em; }
h2 { font-size: clamp(1.7rem, 1.25rem + 1.9vw, 2.6rem); }
h3 { font-size: clamp(1.2rem, 1.05rem + 0.6vw, 1.45rem); }
p { margin: 0 0 1.1em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; }
.ar-skip { position: absolute; left: 1rem; top: -4rem; z-index: 100; background: var(--gold); color: var(--blue); padding: 0.6rem 1rem; border-radius: 8px; }
.ar-skip:focus { top: 1rem; }
.ar-wrap { width: 100%; max-width: calc(var(--wrap) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }

/* Block alignment classes from the imported content. */
.has-text-align-center { text-align: center; }
.has-text-align-left { text-align: left; }
.has-text-align-justify { text-align: justify; hyphens: auto; -webkit-hyphens: auto; }

/* ---------- Buttons ---------- */
.ar-btn,
.wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	min-height: 48px;
	padding: 0.75em 1.5em;
	border: 2px solid var(--blue);
	border-radius: 999px;
	background: var(--blue);
	color: var(--white);
	font: 700 1rem/1.2 var(--body);
	text-decoration: none;
	transition: background-color 0.2s, color 0.2s, border-color 0.2s, transform 0.2s;
}
.ar-btn:hover,
.wp-block-button__link:hover { background: var(--green-dark); border-color: var(--green-dark); color: var(--white); transform: translateY(-1px); }
.ar-btn--accent { background: var(--gold); border-color: var(--gold); color: var(--blue); }
.ar-btn--accent:hover { background: var(--gold-soft); border-color: var(--gold-soft); color: var(--blue); }
.wp-block-buttons { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 1.75rem 0 0; }
.wp-block-buttons.is-content-justification-center { justify-content: center; }
.wp-block-button:nth-child(n + 2) .wp-block-button__link { background: transparent; color: var(--blue); }
.wp-block-button:nth-child(n + 2) .wp-block-button__link:hover { background: var(--blue); color: var(--white); }

/* ---------- Header ---------- */
.ar-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: var(--blue);
	color: var(--white);
	transition: box-shadow 0.2s;
}
.admin-bar .ar-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .ar-header { top: 46px; } }
.ar-header.is-scrolled { box-shadow: 0 8px 24px -12px rgba(0, 0, 0, 0.45); }
/* The header may use more width than the content (long menus, especially in Greek). */
.ar-header .ar-wrap { max-width: calc(1600px + 2 * var(--gutter)); }
.ar-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; min-height: 76px; }
.ar-header__logo { flex-shrink: 0; }

/* Large screens: two rows, so the full menu fits in any language.
   Row 1: logo, call to action, language. Row 2: the menu.
   The <nav> wraps menu, CTA and language (they form the mobile drawer); display: contents
   lets them take their own grid areas here. */
html:not(.ar-compact) .ar-header__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto auto;
	grid-template-rows: 76px auto;
	grid-template-areas: "logo cta lang" "menu menu menu";
	column-gap: 1.25rem;
}
html:not(.ar-compact) .ar-header__logo { grid-area: logo; }
html:not(.ar-compact) .ar-nav { display: contents; }
html:not(.ar-compact) .ar-nav__list { grid-area: menu; gap: 0.15rem 1.75rem; padding: 0.35rem 0 0.5rem; border-top: 1px solid rgba(255, 255, 255, 0.12); }
html:not(.ar-compact) .ar-nav__cta { grid-area: cta; }
html:not(.ar-compact) .ar-nav .ar-lang { grid-area: lang; }
.ar-header__logo img,
.ar-footer__brand img { width: auto; max-width: none; height: 44px; }
@media (max-width: 420px) { .ar-header__logo img { height: 32px; } }
.ar-logo-text { color: var(--white); font: 700 1.25rem/1 var(--display); text-decoration: none; }
.ar-nav { display: flex; align-items: center; gap: 1.25rem; }
.ar-nav__list { display: flex; flex-wrap: nowrap; gap: 0.15rem 1rem; margin: 0; padding: 0; list-style: none; }
.ar-nav__list a { display: block; padding: 0.4rem 0; color: rgba(255, 255, 255, 0.86); font-size: 0.9rem; white-space: nowrap; font-weight: 500; text-decoration: none; border-bottom: 2px solid transparent; }
.ar-nav__list a:hover,
.ar-nav__list .current-menu-item > a { color: var(--white); border-bottom-color: var(--gold); }
.ar-nav__cta { min-height: 42px; padding: 0.55em 1.2em; font-size: 0.9rem; white-space: nowrap; }
.ar-lang { display: flex; gap: 0.25rem; margin: 0; padding: 0; list-style: none; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.04em; }
.ar-lang a { display: block; padding: 0.3rem 0.45rem; border-radius: 6px; color: rgba(255, 255, 255, 0.7); text-decoration: none; }
.ar-lang a[aria-current] { color: var(--blue); background: var(--white); }
.ar-burger { display: none; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 10px; background: transparent; color: var(--white); cursor: pointer; }
.ar-burger__bars,
.ar-burger__bars::before,
.ar-burger__bars::after { display: block; width: 24px; height: 2px; margin-inline: auto; background: currentColor; border-radius: 2px; transition: transform 0.25s, opacity 0.25s; content: ""; }
.ar-burger__bars { position: relative; }
.ar-burger__bars::before { position: absolute; top: -7px; }
.ar-burger__bars::after { position: absolute; top: 7px; }
.ar-nav-open .ar-burger__bars { background: transparent; }
.ar-nav-open .ar-burger__bars::before { transform: translateY(7px) rotate(45deg); }
.ar-nav-open .ar-burger__bars::after { transform: translateY(-7px) rotate(-45deg); }

/* Compact header (burger menu): set on <html> by assets/site.js whenever the menu row does not fit,
   so it adapts to the language (Greek labels are much longer than English). Before JS runs, header.php
   sets it for narrow screens to avoid a flash. */
.ar-compact .ar-burger { display: block; }
.ar-compact .ar-nav {
	position: fixed;
	inset: 76px 0 0;
	flex-direction: column;
	align-items: stretch;
	gap: 1.5rem;
	padding: 1.5rem var(--gutter) 2.5rem;
	overflow-y: auto;
	background: var(--blue);
	visibility: hidden;
	opacity: 0;
	transform: translateY(-8px);
	transition: opacity 0.2s, transform 0.2s, visibility 0.2s;
}
.ar-compact .admin-bar .ar-nav { top: calc(76px + 32px); }
.ar-compact .ar-nav-open .ar-nav { visibility: visible; opacity: 1; transform: none; }
.ar-compact .ar-nav-open { overflow: hidden; }
.ar-compact .ar-nav__list { flex-direction: column; gap: 0; }
.ar-compact .ar-nav__list a { padding: 0.85rem 0; font-size: 1.15rem; border-bottom: 1px solid rgba(255, 255, 255, 0.12); white-space: normal; }
.ar-compact .ar-nav__cta { align-self: flex-start; }
.ar-measuring .ar-nav, .ar-measuring .ar-nav * { transition: none !important; }
@media (max-width: 782px) { .ar-compact .admin-bar .ar-nav { top: calc(76px + 46px); } }

/* ---------- Sections ---------- */
.ar-section { padding-block: var(--section-y); }
.ar-section__inner { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(2rem, 5vw, 4.5rem); }
.ar-section__text { max-width: 68ch; }
.ar-section:not(.ar-section--split) .ar-section__text,
.ar-section--cards .ar-section__head { margin-inline: auto; width: 100%; }
.ar-section__text > .wp-block-heading:first-child,
.ar-section__head > .wp-block-heading:first-child { margin-top: 0; }
.ar-section__text h3 { margin-top: 1.8em; }

/* Alternate tones after the hero, so sections read as distinct steps. */
.ar-section:nth-of-type(odd):not(.ar-section--hero, .ar-section--cta) { background: var(--white); }

@media (min-width: 900px) {
	.ar-section--split .ar-section__inner { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: center; }
	/* Image side follows the brief's alignment of the section's image. */
	.ar-section--media-left .ar-section__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); }
	.ar-section--media-left .ar-section__media { order: -1; }
}

/* Hero: first section of every page. */
.ar-section--hero {
	position: relative;
	overflow: hidden;
	background: var(--blue);
	color: var(--white);
	padding-block: clamp(3.5rem, 9vw, 7.5rem) clamp(4rem, 10vw, 8rem);
}
.ar-section--hero::before {
	position: absolute;
	inset: auto -20% -55% auto;
	width: 70vw;
	max-width: 900px;
	aspect-ratio: 1;
	border-radius: 50%;
	background: radial-gradient(closest-side, rgba(75, 140, 135, 0.45), transparent);
	content: "";
	pointer-events: none;
}
.ar-section--hero .ar-section__inner { position: relative; }
.ar-section--hero h1 { color: var(--white); }
.ar-section--hero p { font-weight: 300; color: rgba(255, 255, 255, 0.9); font-size: clamp(1.05rem, 1rem + 0.3vw, 1.2rem); }
.ar-section--hero .wp-block-button:first-child .wp-block-button__link { background: var(--gold); border-color: var(--gold); color: var(--blue); }
.ar-section--hero .wp-block-button:first-child .wp-block-button__link:hover { background: var(--gold-soft); border-color: var(--gold-soft); }
.ar-section--hero .wp-block-button:nth-child(n + 2) .wp-block-button__link { border-color: rgba(255, 255, 255, 0.5); color: var(--white); }
.ar-section--hero .wp-block-button:nth-child(n + 2) .wp-block-button__link:hover { background: var(--white); border-color: var(--white); color: var(--blue); }
.ar-section--hero .ar-image-placeholder,
.ar-section--cta .ar-image-placeholder { border-color: rgba(255, 255, 255, 0.25); background-color: rgba(255, 255, 255, 0.06); color: rgba(255, 255, 255, 0.75); }
.ar-section--plain { padding-block: clamp(3rem, 7vw, 5rem); }

/* Section heading: small gold rule above each H2. */
.ar-section:not(.ar-section--hero) h2::before {
	display: block;
	width: 48px;
	height: 3px;
	margin-bottom: 1rem;
	border-radius: 3px;
	background: var(--gold);
	content: "";
}
.ar-section h2.has-text-align-center::before { margin-inline: auto; }

/* Cards: an H2 intro followed by H3 + text pairs. */
.ar-section--cards .ar-section__head { max-width: 68ch; }
.ar-section--cards .ar-section__head:empty { display: none; }
.ar-cards { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.ar-card {
	position: relative;
	padding: 2rem 1.75rem 1.75rem;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--beige);
	box-shadow: var(--shadow);
}
.ar-section:nth-of-type(even) .ar-card { background: var(--white); }
.ar-card h3 { margin-top: 0; }
.ar-card p { color: var(--blue-soft); }
.ar-card__num { display: block; margin-bottom: 0.9rem; color: var(--green-dark); font: 700 0.9rem/1 var(--display); letter-spacing: 0.12em; }
.ar-section__media--wide,
.ar-section--media-center .ar-section__media { width: 100%; max-width: 900px; margin-inline: auto; }
.ar-section--cards.ar-section--media-left .ar-section__media { margin-inline: 0 auto; }
.ar-section--cards.ar-section--media-right .ar-section__media { margin-inline: auto 0; }
.ar-section__media--wide .ar-image-placeholder,
.ar-section--media-center .ar-section__media:not(.ar-section__media--grid) .ar-image-placeholder { aspect-ratio: 16 / 9; }
.ar-section__after .wp-block-buttons { margin-top: 0; }

/* FAQ: core Details blocks. */
.ar-section--faq .ar-section__text { max-width: 820px; margin-inline: auto; }
.wp-block-details {
	margin: 0 0 0.75rem;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--white);
	transition: box-shadow 0.2s;
}
.wp-block-details[open] { box-shadow: var(--shadow); }
.wp-block-details summary {
	position: relative;
	padding: 1.15rem 3.5rem 1.15rem 1.4rem;
	font: 700 1.15rem/1.4 var(--display);
	list-style: none;
	cursor: pointer;
}
.wp-block-details summary::-webkit-details-marker { display: none; }
.wp-block-details summary::after {
	position: absolute;
	top: 50%;
	right: 1.3rem;
	width: 12px;
	height: 12px;
	border-right: 2px solid var(--green);
	border-bottom: 2px solid var(--green);
	transform: translateY(-70%) rotate(45deg);
	transition: transform 0.2s;
	content: "";
}
.wp-block-details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.wp-block-details > :not(summary) { margin: 0; padding: 0 1.4rem 1.3rem; color: var(--blue-soft); }

/* Closing call to action: last section with buttons. */
.ar-section--cta { background: var(--green-dark); color: var(--white); }
.ar-section--cta .ar-section__text { margin-inline: auto; }
.ar-section--cta h2 { color: var(--white); }
.ar-section--cta p { color: rgba(255, 255, 255, 0.88); }
.ar-section--cta .wp-block-button__link { background: var(--gold); border-color: var(--gold); color: var(--blue); }
.ar-section--cta .wp-block-button__link:hover { background: var(--gold-soft); border-color: var(--gold-soft); color: var(--blue); }
.ar-section--cta .wp-block-button:nth-child(n + 2) .wp-block-button__link { background: transparent; border-color: rgba(255, 255, 255, 0.6); color: var(--white); }

/* ---------- Media ---------- */
.ar-section__media { display: grid; gap: 1rem; }
.ar-section__media--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ar-section__media--grid > :first-child { grid-column: 1 / -1; }
.ar-section__media .wp-block-image { margin: 0; }
.ar-section__media .wp-block-image img { width: 100%; border-radius: var(--radius); box-shadow: var(--shadow); object-fit: cover; }

/* Photos not supplied yet: a visible, tidy placeholder (the file name and alt text stay readable). */
.ar-image-placeholder {
	display: grid;
	place-items: center;
	aspect-ratio: 4 / 3;
	margin: 0;
	padding: 1.5rem;
	border: 2px dashed rgba(75, 140, 135, 0.35);
	border-radius: var(--radius);
	background:
		repeating-linear-gradient(135deg, transparent 0 14px, rgba(75, 140, 135, 0.05) 14px 15px),
		var(--green-tint);
	color: var(--green-dark);
	font-size: 0.8rem;
	line-height: 1.5;
	text-align: center;
	overflow-wrap: anywhere;
}
.ar-image-placeholder p { max-width: 36ch; margin: 0; }

/* Contact form placeholder (form plugin not chosen yet). */
.ar-form-placeholder {
	margin: 1.5rem 0;
	padding: 1.5rem;
	border: 2px dashed rgba(75, 140, 135, 0.35);
	border-radius: var(--radius);
	background: var(--white);
}
.ar-form-placeholder p { margin: 0 0 0.6rem; padding-bottom: 0.6rem; border-bottom: 1px solid var(--line); }
.ar-form-placeholder p:first-child { color: var(--green-dark); font-size: 0.9rem; }
.ar-form-placeholder p:last-child { border: 0; padding: 0; }

/* Plain content (pages that opt out of sections). */
.ar-content { max-width: calc(760px + 2 * var(--gutter)); padding-block: var(--section-y); }

/* ---------- Footer ---------- */
.ar-footer { background: var(--blue); color: rgba(255, 255, 255, 0.78); font-size: 0.95rem; }
.ar-footer a { color: var(--white); }
.ar-footer__inner { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 2rem; padding-block: 3.5rem 2.5rem; }
.ar-footer__brand p { max-width: 40ch; margin-top: 1rem; }
.ar-footer__links { display: flex; gap: 1.5rem; margin: 0; padding: 0; list-style: none; font-weight: 500; }
.ar-footer__bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 1.25rem 1.75rem; border-top: 1px solid rgba(255, 255, 255, 0.12); font-size: 0.85rem; }

/* ---------- Cookie banner (SureCookie) ----------
   Brand colours through the plugin's own variables (`:root:root` outranks its inline `:root`),
   plus shape and type to match the site. Accept all / Only necessary / Decline stay equally
   prominent (same filled style), as consent rules expect. Selectors repeat a class to outrank
   the plugin's id-based rules, since its stylesheet loads after ours. */
:root:root {
	--surecookie-banner-primary-color: var(--blue);
	--surecookie-banner-primary-hover-color: var(--green-dark);
	--surecookie-banner-secondary-color: var(--blue);
	--surecookie-banner-primary-text-color: var(--white);
	--surecookie-banner-secondary-text-color: var(--white);
	--surecookie-banner-text-color: var(--blue);
	--surecookie-banner-background-color: var(--white);
	--surecookie-banner-overlay-color: rgba(34, 54, 84, 0.55);
}
:is(#surecookie-public-root, #surecookie-preferences-root) { font-family: var(--body); }
:is(#surecookie-public-root, #surecookie-preferences-root) :is(button, a, h2, h3, p, td, th) { font-family: inherit; }
.surecookie-banner.surecookie-banner-container {
	border: 1px solid var(--line);
	border-top: 4px solid var(--gold);
	border-radius: var(--radius);
	box-shadow: var(--shadow), 0 24px 48px -16px rgba(34, 54, 84, 0.35);
}
.surecookie-banner.surecookie-banner .surecookie-banner-description { font-size: 0.95rem; line-height: 1.6; color: var(--blue); }
:is(#surecookie-public-root, #surecookie-preferences-root) .surecookie-btn-base.surecookie-btn-base {
	min-height: 42px;
	padding: 0.6em 1.25em;
	border-radius: 999px;
	font: 700 0.9rem/1.2 var(--body);
	transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}
:is(#surecookie-public-root, #surecookie-preferences-root) .surecookie-decline-btn.surecookie-decline-btn:hover { filter: none; background-color: var(--green-dark); }
:is(#surecookie-public-root, #surecookie-preferences-root) .surecookie-preferences-btn.surecookie-preferences-btn {
	border: 2px solid var(--blue);
	color: var(--blue) !important; /* the plugin sets the colour inline */
}
:is(#surecookie-public-root, #surecookie-preferences-root) .surecookie-preferences-btn.surecookie-preferences-btn:hover { background-color: var(--beige); }
:is(#surecookie-public-root, #surecookie-preferences-root) :is(button, a):focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.surecookie-banner.surecookie-banner .surecookie-branding { color: var(--blue-soft); }

/* Preferences window. */
.surecookie-preferences-modal.surecookie-preferences-modal { border-radius: var(--radius); border-top: 4px solid var(--gold); }
.surecookie-preferences-modal .surecookie-modal-title.surecookie-modal-title,
.surecookie-preferences-modal .surecookie-category-name.surecookie-category-name { font-family: var(--display); font-weight: 700; color: var(--blue); }
.surecookie-preferences-modal .surecookie-modal-title.surecookie-modal-title { font-size: 1.25rem; }
.surecookie-preferences-modal .surecookie-modal-footer button,
.surecookie-preferences-modal .surecookie-btn-primary.surecookie-btn-primary { border-radius: 999px; font-weight: 700; font-family: var(--body); }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { transition: none !important; scroll-behavior: auto !important; }
}