/*
Theme Name: Cluegroup EN
Theme URI: https://cluegroup.agency/
Author: Cluegroup
Author URI: https://cluegroup.agency/
Description: Lightweight block theme for the English-language Cluegroup website. One-page layout built from Gutenberg patterns, self-hosted fonts, no jQuery, built-in SEO meta and structured data.
Version: 1.1.0
Requires at least: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: cluegroup-en
*/

/* ---------- Fallback faces (reduce CLS while webfonts load) ---------- */
@font-face {
	font-family: "Poppins Fallback";
	src: local("Arial"), local("Liberation Sans"), local("Arimo"), local("Helvetica");
	size-adjust: 109.28%;
	ascent-override: 96.08%;
	descent-override: 32.03%;
	line-gap-override: 9.15%;
}
@font-face {
	font-family: "Inter Fallback";
	src: local("Arial"), local("Liberation Sans"), local("Arimo"), local("Helvetica");
	size-adjust: 106.09%;
	ascent-override: 91.31%;
	descent-override: 22.74%;
	line-gap-override: 0%;
}

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Anchored sections clear the sticky header */
[id] { scroll-margin-top: 5.5rem; }

body { -webkit-font-smoothing: antialiased; }

/* Two-weight headings: thin line + bold line via <strong> */
h1 strong, h2 strong { font-weight: 600; }

/* Kicker: amaranth h6 with a short rule */
h6.wp-block-heading, .cge-kicker {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}
h6.wp-block-heading::before, .cge-kicker::before {
	content: "";
	width: 1.75rem;
	height: 2px;
	background: currentColor;
	flex: none;
}
h6.has-text-align-center { justify-content: center; }

/* Remove gap between header and first full-width section */
.wp-site-blocks > main { margin-block-start: 0; }
.wp-site-blocks > footer { margin-block-start: 0; }

/* ---------- Dark sections ---------- */
.cge-dark {
	color: #E3E3E6;
}
.cge-dark :where(h1, h2, h3, h4, strong) { color: #FFFFFF; }
.cge-dark h6.wp-block-heading,
.cge-dark .cge-kicker { color: var(--wp--preset--color--primary-on-dark); }
.cge-dark a:where(:not(.wp-element-button)) { color: #FFFFFF; }
.cge-dark a:where(:not(.wp-element-button)):hover { color: var(--wp--preset--color--primary-on-dark); }
.cge-dark .is-style-outline .wp-element-button {
	color: #FFFFFF;
	border: 1px solid rgba(255, 255, 255, 0.45);
	background: transparent;
}
.cge-dark .is-style-outline .wp-element-button:hover {
	border-color: #FFFFFF;
	background: rgba(255, 255, 255, 0.06);
}

/* ---------- Header ---------- */
/* Fixed header height, so the hero can fill exactly the rest of the first screen. */
.wp-site-blocks { --cge-header-h: 4.5rem; }
.wp-site-blocks > header {
	position: sticky;
	top: 0;
	z-index: 50;
}
.admin-bar .wp-site-blocks > header { top: var(--wp-admin--admin-bar--height, 32px); }
@media (max-width: 600px) { .admin-bar .wp-site-blocks > header { top: 0; } }
.cge-header {
	box-sizing: border-box;
	height: var(--cge-header-h);
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	display: flex;
	flex-direction: column;
	justify-content: center;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.cge-header > * { width: 100%; }

.cge-logo { display: inline-flex; line-height: 0; color: #FFFFFF; }
.cge-logo svg { width: 150px; height: auto; display: block; }
.cge-logo:focus-visible { outline: 2px solid var(--wp--preset--color--primary-on-dark); outline-offset: 4px; }

.cge-header .wp-block-navigation a { color: #E3E3E6; }
.cge-header .wp-block-navigation a:hover,
.cge-header .wp-block-navigation a:focus-visible { color: #FFFFFF; }
.cge-header .wp-block-navigation__responsive-container.is-menu-open {
	background: var(--wp--preset--color--contrast);
	color: #FFFFFF;
	padding: 2rem 1.25rem;
}
.cge-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-size: 1.375rem;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 300;
	padding-block: 0.35rem;
}
.cge-header .wp-block-navigation__responsive-container-open,
.cge-header .wp-block-navigation__responsive-container-close { color: #FFFFFF; }
.cge-header .cge-header__cta .wp-element-button { padding: 0.7rem 1.15rem; font-size: var(--wp--preset--font-size--x-small); }
@media (max-width: 781px) { .cge-header .cge-header__cta { display: none; } }

/* ---------- Hero ---------- */
/* Top hero fills the first screen below the sticky header (and the admin bar when logged in). */
.cge-hero--top {
	min-height: calc(100vh - var(--cge-header-h, 4.5rem));
	min-height: calc(100svh - var(--cge-header-h, 4.5rem));
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.admin-bar .cge-hero--top {
	min-height: calc(100svh - var(--cge-header-h, 4.5rem) - var(--wp-admin--admin-bar--height, 32px));
}
.cge-hero--top > * { width: 100%; }
.cge-hero {
	position: relative;
	overflow: hidden;
	isolation: isolate;
}
.cge-hero::before {
	content: "";
	position: absolute;
	inset: auto -20% -55% auto;
	width: min(900px, 120vw);
	aspect-ratio: 1;
	border-radius: 50%;
	background: radial-gradient(circle at center, rgba(200, 0, 95, 0.38) 0%, rgba(200, 0, 95, 0) 62%);
	z-index: -1;
	pointer-events: none;
}
.cge-hero::after {
	content: "";
	position: absolute;
	right: clamp(-12rem, -10vw, -4rem);
	top: 50%;
	width: clamp(18rem, 40vw, 34rem);
	aspect-ratio: 1;
	transform: translateY(-50%);
	border-radius: 50%;
	box-shadow:
		0 0 0 1px rgba(255, 61, 145, 0.18),
		0 0 0 4.5rem rgba(255, 255, 255, 0),
		0 0 0 calc(4.5rem + 1px) rgba(255, 61, 145, 0.12),
		0 0 0 9rem rgba(255, 255, 255, 0),
		0 0 0 calc(9rem + 1px) rgba(255, 61, 145, 0.07);
	z-index: -1;
	pointer-events: none;
}
.cge-hero .cge-lead { color: #C9C9CF; max-width: 38rem; }
.is-layout-constrained > .cge-lead { margin-left: 0 !important; }
.cge-proof {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.5rem;
	margin-inline: 0;
	padding: 0;
	list-style: none;
	font-size: var(--wp--preset--font-size--small);
	color: #A9A9B1;
}
.cge-proof li { display: flex; align-items: center; gap: 0.5rem; }
.cge-proof li::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--wp--preset--color--primary-on-dark);
}

/* ---------- Service cards ---------- */
.cge-cards { display: grid; gap: 1px; background: var(--wp--preset--color--gray-200); border: 1px solid var(--wp--preset--color--gray-200); }
@media (min-width: 640px) { .cge-cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .cge-cards { grid-template-columns: repeat(3, 1fr); } }
.cge-card {
	background: var(--wp--preset--color--base);
	padding: clamp(1.5rem, 3vw, 2.25rem);
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	transition: background-color 0.2s ease;
}
.cge-card:hover { background: var(--wp--preset--color--gray-100); }
.cge-card__nr {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--primary);
	font-weight: 600;
	margin: 0;
}
.cge-card h3 { margin: 0; }
.cge-card p { margin: 0; color: var(--wp--preset--color--gray-600); font-size: var(--wp--preset--font-size--small); }

/* ---------- Numbers ---------- */
.cge-numbers {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 2rem 0;
	margin-inline: 0;
	padding: 0;
	list-style: none;
}
@media (min-width: 900px) { .cge-numbers { grid-template-columns: repeat(4, 1fr); } }
.cge-numbers li { padding-inline: 1.25rem; border-left: 1px solid var(--wp--preset--color--gray-200); }
.cge-dark .cge-numbers li { border-left-color: rgba(255, 255, 255, 0.14); }
.cge-numbers__value {
	display: block;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 300;
	font-size: clamp(2.25rem, 4.5vw, 3.25rem);
	line-height: 1.05;
	color: var(--wp--preset--color--primary);
}
.cge-dark .cge-numbers__value { color: #FFFFFF; }
.cge-numbers__label { display: block; margin-top: 0.5rem; font-size: var(--wp--preset--font-size--small); line-height: 1.5; }

/* ---------- Case studies ---------- */
.cge-cases { display: grid; gap: 1.25rem; }
@media (min-width: 900px) { .cge-cases { grid-template-columns: repeat(3, 1fr); } }
.cge-case {
	border: 1px solid rgba(255, 255, 255, 0.14);
	padding: clamp(1.5rem, 3vw, 2rem);
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}
.cge-case__type { margin: 0; font-size: var(--wp--preset--font-size--x-small); letter-spacing: 0.12em; text-transform: uppercase; color: var(--wp--preset--color--primary-on-dark); font-weight: 600; }
.cge-case__value { margin: 0; font-family: var(--wp--preset--font-family--heading); font-weight: 300; font-size: clamp(2.5rem, 5vw, 3.5rem); line-height: 1.05; color: #FFFFFF; }
.cge-case p:last-child { margin: 0; font-size: var(--wp--preset--font-size--small); }

/* ---------- Steps ---------- */
.cge-steps { display: grid; gap: 2rem; margin-inline: 0; padding: 0; list-style: none; }
@media (min-width: 900px) { .cge-steps { grid-template-columns: repeat(4, 1fr); gap: 1.5rem; } }
.cge-steps li { border-top: 2px solid var(--wp--preset--color--contrast); padding-top: 1.25rem; }
.cge-steps__nr { display: block; font-family: var(--wp--preset--font-family--heading); color: var(--wp--preset--color--primary); font-weight: 600; font-size: var(--wp--preset--font-size--small); margin-bottom: 0.75rem; }
.cge-steps h3 { margin: 0 0 0.5rem; }
.cge-steps p { margin: 0; color: var(--wp--preset--color--gray-600); font-size: var(--wp--preset--font-size--small); }

/* ---------- FAQ (core/details) ---------- */
.cge-faq .wp-block-details {
	border-top: 1px solid var(--wp--preset--color--gray-200);
	padding-block: 1.25rem;
	margin: 0;
}
.cge-faq .wp-block-details:last-child { border-bottom: 1px solid var(--wp--preset--color--gray-200); }
.cge-faq summary {
	list-style: none;
	cursor: pointer;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 300;
	line-height: 1.35;
}
.cge-faq summary::-webkit-details-marker { display: none; }
.cge-faq summary::after {
	content: "+";
	flex: none;
	width: 2rem;
	height: 2rem;
	border: 1px solid var(--wp--preset--color--gray-200);
	border-radius: 50%;
	display: grid;
	place-items: center;
	font-family: var(--wp--preset--font-family--body);
	font-size: 1.125rem;
	color: var(--wp--preset--color--primary);
	transition: transform 0.2s ease;
}
.cge-faq details[open] > summary::after { content: "\2212"; }
.cge-faq summary:focus-visible { outline: 2px solid var(--wp--preset--color--primary); outline-offset: 4px; }
.cge-faq .wp-block-details > p { margin-top: 0.75rem; color: var(--wp--preset--color--gray-600); max-width: 46rem; }

/* ---------- Contact ---------- */
.cge-contact-line {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 300;
	font-size: clamp(1.75rem, 4vw, 2.75rem);
	line-height: 1.2;
	margin: 0;
}
.cge-contact-line a { text-decoration: none; }
.cge-contact-line a:hover { text-decoration: underline; text-underline-offset: 0.2em; }

/* ---------- Footer ---------- */
.cge-footer { font-size: var(--wp--preset--font-size--small); color: #A9A9B1; }
.cge-footer .cge-logo svg { width: 132px; }
.cge-footer p { margin: 0; }
.cge-footer a:where(:not(.wp-element-button)) { color: #E3E3E6; }
.cge-footer__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; }
.cge-footer h2 { font-family: var(--wp--preset--font-family--body); font-size: var(--wp--preset--font-size--x-small); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: #FFFFFF; margin: 0 0 0.75rem; }
.cge-footer__bottom { border-top: 1px solid rgba(255, 255, 255, 0.1); }

/* ---------- Generic pages (privacy, 404) ---------- */
.cge-page-head { border-bottom: 1px solid var(--wp--preset--color--gray-200); }

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

/* ---------- Cookie consent ---------- */
.cge-linkbtn {
	background: none;
	border: 0;
	padding: 0;
	font: inherit;
	color: #E3E3E6;
	text-decoration: underline;
	cursor: pointer;
}
.cge-linkbtn:hover { color: #FFFFFF; }
.cge-linkbtn:focus-visible { outline: 2px solid var(--wp--preset--color--primary-on-dark); outline-offset: 3px; }

.cge-consent {
	position: fixed;
	z-index: 100;
	left: 1rem;
	right: 1rem;
	bottom: 1rem;
	max-width: 30rem;
	padding: 1.25rem 1.25rem 1.1rem;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	border: 1px solid var(--wp--preset--color--gray-200);
	box-shadow: 0 12px 40px rgba(20, 21, 24, 0.22);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.55;
}
.cge-consent[hidden] { display: none; }
.cge-consent p { margin: 0 0 0.75rem; }
.cge-consent__title { font-family: var(--wp--preset--font-family--heading); font-weight: 600; font-size: 1rem; }
.cge-consent__text { color: var(--wp--preset--color--gray-600); }
.cge-consent__state { font-weight: 600; }
.cge-consent__actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.cge-consent__btn {
	flex: 1 1 10rem;
	padding: 0.75rem 1rem;
	border: 1px solid var(--wp--preset--color--contrast);
	background: var(--wp--preset--color--contrast);
	color: #FFFFFF;
	font: 600 var(--wp--preset--font-size--small) / 1.2 var(--wp--preset--font-family--body);
	cursor: pointer;
}
.cge-consent__btn:hover { background: #000000; }
.cge-consent__btn:focus-visible { outline: 2px solid var(--wp--preset--color--primary); outline-offset: 3px; }

/* ---------- Text pages (privacy) ---------- */
.wp-block-post-content h2 { font-size: var(--wp--preset--font-size--x-large); margin-top: 2.5rem; }
.wp-block-post-content .wp-block-table { font-size: var(--wp--preset--font-size--small); overflow-x: auto; }
.wp-block-post-content .wp-block-table th { text-align: left; }
.wp-block-post-content .wp-block-table table { min-width: 34rem; }