/*
Theme Name: OpenLabs
Theme URI: https://labs.open-conf.gr
Author: Open
Description: Block theme for OpenLabs at OpenConf 2026, styled after open-conf.gr.
Version: 1.0.0
Requires at least: 6.5
Requires PHP: 7.4
License: GPLv2 or later
Text Domain: openlabs
*/

:root {
	--ol-navy-900: #0a2550;
	--ol-navy: #0e3166;
	--ol-blue: #13428a;
	--ol-cyan: #1dcafa;
	--ol-teal: #0d9879;
	--ol-mint: #44bda0;
	--ol-purple: #6a53c6;
	--ol-lilac: #9381e1;
	--ol-ink: #14213d;
	--ol-muted: #5b6577;
	--ol-paper: #f4f8fc;
	--ol-radius: 18px;
}

html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; }
:where(section[id]) { scroll-margin-top: 90px; }

/* ---------- Header ---------- */
.ol-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: rgba(14, 49, 102, 0.92);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.admin-bar .ol-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .ol-header { top: 46px; } }

.ol-brand { gap: 12px !important; }
.ol-brand img { width: 46px; height: auto; display: block; }
.ol-brand .ol-brand-name {
	font-family: var(--wp--preset--font-family--geologica);
	font-weight: 700;
	font-size: 1.35rem;
	letter-spacing: -0.01em;
	color: #fff;
	margin: 0;
}
.ol-brand .ol-brand-name span { color: var(--ol-cyan); }
.ol-header .wp-block-navigation a { color: #fff; text-decoration: none; font-weight: 500; opacity: 0.85; }
.ol-header .wp-block-navigation a:hover { opacity: 1; color: var(--ol-cyan); }

/* ---------- Buttons ---------- */
.wp-block-button__link { transition: transform .15s ease, box-shadow .15s ease, background .15s ease; }
.wp-block-button__link:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(10, 37, 80, 0.25); }
.is-style-outline > .wp-block-button__link { border: 2px solid currentColor; background: transparent; }
.ol-hero .is-style-outline > .wp-block-button__link { color: #fff; }

/* ---------- Hero ---------- */
.ol-hero {
	position: relative;
	overflow: hidden;
	color: #fff;
	background:
		radial-gradient(1000px 520px at 85% 10%, rgba(29, 202, 250, 0.28), transparent 60%),
		radial-gradient(800px 500px at 0% 100%, rgba(106, 83, 198, 0.35), transparent 60%),
		linear-gradient(160deg, var(--ol-navy) 0%, var(--ol-navy-900) 100%);
}
.ol-hero::before {
	/* dotted grid */
	content: "";
	position: absolute;
	inset: 0;
	background-image: radial-gradient(rgba(255, 255, 255, 0.12) 1px, transparent 1px);
	background-size: 26px 26px;
	mask-image: linear-gradient(180deg, #000 0%, transparent 85%);
	-webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 85%);
	pointer-events: none;
}
.ol-hero > * { position: relative; }
.ol-kicker {
	display: inline-block;
	font-family: var(--wp--preset--font-family--geologica);
	font-size: 0.85rem !important;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ol-cyan);
}
.ol-hero h1 { line-height: 1.05; letter-spacing: -0.02em; }
.ol-hero h1 .ol-grad {
	background: linear-gradient(90deg, var(--ol-cyan), var(--ol-mint));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
.ol-hero .ol-lead { color: rgba(255, 255, 255, 0.82); max-width: 640px; }

/* speech-bubble motif from the Open logo */
.ol-bubble {
	position: relative;
	background: var(--ol-cyan);
	border: 10px solid var(--ol-blue);
	border-radius: 6px;
	padding: 28px 30px !important;
	color: var(--ol-navy-900);
	box-shadow: 0 30px 60px rgba(0, 0, 0, 0.3);
}
.ol-bubble::after {
	content: "";
	position: absolute;
	right: 22%;
	bottom: -56px;
	border-left: 0 solid transparent;
	border-right: 56px solid transparent;
	border-top: 56px solid var(--ol-blue);
}
.ol-bubble code, .ol-code {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.95rem;
	line-height: 1.7;
	color: var(--ol-navy-900);
}
.ol-code .c { color: #0b5f73; }
.ol-code .k { color: var(--ol-purple); font-weight: 700; }

.ol-chips { gap: 10px !important; }
.ol-chip {
	display: inline-block;
	padding: 6px 14px !important;
	border-radius: 999px;
	border: 1px solid rgba(255, 255, 255, 0.25);
	background: rgba(255, 255, 255, 0.06);
	font-size: 0.9rem !important;
	color: #fff;
	margin: 0 !important;
}

/* ---------- Sections ---------- */
.ol-section-title { letter-spacing: -0.015em; }
.ol-eyebrow {
	font-family: var(--wp--preset--font-family--geologica);
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	font-size: 0.8rem !important;
	color: var(--ol-teal);
}

.ol-pillar {
	background: #fff;
	border-radius: var(--ol-radius);
	border: 1px solid #e3eaf3;
	padding: 28px !important;
	height: 100%;
	transition: transform .2s ease, box-shadow .2s ease;
}
.ol-pillar:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(14, 49, 102, 0.12); }
.ol-pillar .ol-icon {
	width: 52px;
	height: 52px;
	border-radius: 14px;
	display: grid;
	place-items: center;
	font-size: 1.5rem;
	color: #fff;
	margin-bottom: 18px;
}
.ol-pillar:nth-child(1) .ol-icon { background: var(--ol-blue); }
.ol-pillar:nth-child(2) .ol-icon { background: var(--ol-teal); }
.ol-pillar:nth-child(3) .ol-icon { background: var(--ol-purple); }
.ol-pillar:nth-child(4) .ol-icon { background: #0598c1; }
.ol-pillar h3 { margin: 0 0 8px; }
.ol-pillar p { color: var(--ol-muted); margin: 0; }

/* ---------- Challenge cards ---------- */
.ol-challenges { gap: 28px !important; }
.ol-card {
	position: relative;
	border-radius: 22px;
	padding: 36px !important;
	color: #fff;
	overflow: hidden;
	height: 100%;
}
.ol-card::after {
	content: "";
	position: absolute;
	width: 260px;
	height: 260px;
	right: -80px;
	top: -80px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.08);
}
.ol-card > * { position: relative; z-index: 1; }
.ol-card--advanced { background: linear-gradient(150deg, var(--ol-blue) 0%, var(--ol-navy-900) 100%); }
.ol-card--junior { background: linear-gradient(150deg, var(--ol-mint) 0%, var(--ol-teal) 55%, #08705a 100%); }
.ol-card .ol-date {
	display: inline-flex;
	gap: 10px;
	align-items: baseline;
	font-family: var(--wp--preset--font-family--geologica);
}
.ol-card .ol-date strong { font-size: 3.4rem; line-height: 1; font-weight: 800; }
.ol-card .ol-date span { font-size: 1rem; text-transform: uppercase; letter-spacing: 0.12em; opacity: 0.85; }
.ol-card h3 { color: #fff; margin-top: 14px; }
.ol-card p, .ol-card li { color: rgba(255, 255, 255, 0.88); }
.ol-card ul { padding-left: 1.1em; }
.ol-card li { margin-bottom: 6px; }
.ol-badge {
	display: inline-block;
	padding: 4px 12px !important;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.16);
	font-size: 0.78rem !important;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	margin: 0 !important;
}

/* ---------- Timeline ---------- */
.ol-timeline { gap: 0 !important; }
.ol-step {
	position: relative;
	padding: 0 18px 0 0 !important;
}
.ol-step .ol-num {
	font-family: var(--wp--preset--font-family--geologica);
	font-weight: 800;
	font-size: 2.6rem;
	line-height: 1;
	color: transparent;
	-webkit-text-stroke: 1.5px var(--ol-blue);
	margin-bottom: 10px;
}
.ol-step p { color: var(--ol-muted); }

/* ---------- CTA band ---------- */
.ol-cta {
	border-radius: 26px;
	background:
		radial-gradient(600px 300px at 100% 0%, rgba(29, 202, 250, 0.35), transparent 60%),
		linear-gradient(120deg, var(--ol-purple), var(--ol-blue));
	color: #fff;
}
.ol-cta h2, .ol-cta p { color: #fff; }

/* ---------- Footer ---------- */
.ol-footer { background: var(--ol-navy-900); color: rgba(255, 255, 255, 0.7); }
.ol-footer a { color: #fff; text-decoration: none; }
.ol-footer a:hover { color: var(--ol-cyan); }

/* ---------- Reveal on scroll ---------- */
@media (prefers-reduced-motion: no-preference) {
	.ol-reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
	.ol-reveal.is-visible { opacity: 1; transform: none; }
}

@media (max-width: 781px) {
	.ol-bubble::after { display: none; }
	.ol-step { padding: 0 0 24px 0 !important; }
	.ol-card .ol-date strong { font-size: 2.8rem; }
}

/* ---------- Fixes ---------- */
.ol-pillar h3 { font-size: 1.3rem !important; overflow-wrap: normal; word-break: normal; hyphens: none; }
.ol-card .ol-date { display: flex; }
.ol-header .wp-block-navigation .wp-block-navigation-item__content { color: #fff; }
@media (max-width: 600px) {
	.ol-header .wp-block-buttons { display: none; }
	.ol-hero { padding-top: 64px !important; padding-bottom: 80px !important; }
}