/*
Theme Name: Unlock Technologies
Theme URI: https://unlocktechnologies.com
Author: Unlock Technologies
Description: Production theme for the Unlock Technologies marketing site — fintech application development, payments engineering, and modernisation capability pages, industry pages, insights, and case studies.
Version: 0.1.0
Requires at least: 6.4
Requires PHP: 8.0
Text Domain: unlock
*/

/* ==========================================================================
   Design tokens
   ========================================================================== */

:root {
	--navy: #01247e; /* brand primary */
	--navy-dark: #011a5c; /* gradients, hover states */
	--cyan: #009fe2; /* brand secondary / accent */
	--cyan-dark: #0082bd;
	--ink: #10172a; /* body text */
	--slate: #5a6580; /* secondary text */
	--slate-light: #8c96ad; /* tertiary/meta text */
	--paper: #ffffff;
	--mist: #f5f7fb; /* section backgrounds */
	--mist-dark: #ecf0f7; /* badge backgrounds, dividers */
	--line: #dfe4ee; /* hairline borders */
	--cyan-tint: #e0f4fd; /* callout band background, active pill fill */
	--footer-bg: #01144a; /* footer + dark band background */

	/* Type scale — desktop (§1). Mobile scale-down lives in the responsive
	   section below rather than as separate tokens, so components can just
	   use these and the clamp() takes care of the rest. */
	--font-heading: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--font-body: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

	/* Scaled down from the original §1 spec (52/40/31/30/19px) — felt too
	   large in practice once real content was on screen. */
	--h1-size: clamp(2rem, 1.5rem + 2vw, 2.75rem); /* 32px → 44px */
	--h2-size: clamp(1.625rem, 1.3rem + 1.5vw, 2.25rem); /* 26px → 36px */
	--h3-size: clamp(1.1875rem, 1rem + 0.7vw, 1.5rem); /* 19px → 24px */
	--lead-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem); /* 18px → 22px */
	--body-size: clamp(1rem, 0.95rem + 0.15vw, 1.0625rem); /* 16px → 17px */
	--meta-size: 0.8125rem; /* 13px */

	/* Grid & spacing (§1) */
	--content-margin: 96px;
	--content-max: 1248px;
	--section-pad: 100px;
	--section-pad-dark: 100px;
	--card-gap: 40px;
}

/* Phones: scale type down about 6% across the board (every rem-based size in
   the theme follows the root), then tighten the headline and lead tokens a
   little more, since large headings are the most oversized on a small screen. */
@media (max-width: 640px) {
	html {
		font-size: 93.75%; /* 15px root instead of 16px */
	}

	:root {
		--h1-size: 1.875rem;  /* 28px (was 32) */
		--h2-size: 1.5rem;    /* 22.5px (was 26) */
		--h3-size: 1.125rem;  /* 17px (was 19) */
		--lead-size: 1.0625rem; /* 16px (was 18) */
		--body-size: 1rem;    /* 15px (was 16) */
	}
}

@media (max-width: 900px) {
	:root {
		--content-margin: 24px;
		--section-pad: 64px;
		--section-pad-dark: 64px;
		--card-gap: 24px;
	}
}

/* ==========================================================================
   Self-hosted fonts (§1 Typography — self-host via @font-face, font-display: swap)
   ========================================================================== */

@font-face {
	font-family: 'Space Grotesk';
	src: url('assets/fonts/space-grotesk-variable.woff2') format('woff2-variations'),
		url('assets/fonts/space-grotesk-variable.woff2') format('woff2');
	font-weight: 300 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Manrope';
	src: url('assets/fonts/manrope-variable.woff2') format('woff2-variations'),
		url('assets/fonts/manrope-variable.woff2') format('woff2');
	font-weight: 400 800;
	font-style: normal;
	font-display: swap;
}

/* ==========================================================================
   Reset & base
   ========================================================================== */

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

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

body {
	margin: 0;
	background: var(--paper);
	color: var(--ink);
	font-family: var(--font-body);
	font-size: var(--body-size);
	font-weight: 400;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

img {
	max-width: 100%;
	display: block;
}

a {
	color: inherit;
	text-decoration: none;
}

button {
	font-family: inherit;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-heading);
	font-weight: 500; /* Space Grotesk "Medium" for H1–H3, per §1 */
	line-height: 1.15;
	margin: 0 0 0.5em;
	color: var(--ink);
}

h1 { font-size: var(--h1-size); }
h2 { font-size: var(--h2-size); }
h3 { font-size: var(--h3-size); }

p {
	margin: 0 0 1em;
}

.u-lead {
	font-family: var(--font-body);
	font-size: var(--lead-size);
	font-weight: 500;
	line-height: 1.4;
	color: var(--ink);
}

.u-meta {
	font-size: var(--meta-size);
	color: var(--slate-light);
	font-weight: 500;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

/* Anchor targets (e.g. #open-roles, #send-message) land below the sticky header. */
[id] {
	scroll-margin-top: 90px;
}

.u-container {
	max-width: var(--content-max);
	margin-inline: auto;
	padding-inline: var(--content-margin);
}

/* Narrow reading column (§7): 720px, shared by single-insight.php and
   single-case-study.php for the header, body copy, and stats/quote. */
.reading-column {
	max-width: 45em;
	margin-inline: auto;
	padding-inline: 24px;
}

.u-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ==========================================================================
   Scroll-reveal / entrance animation base classes (§5)
   Only animate once JS confirms it's active — otherwise everything must be
   visible by default so content never depends on JS running.
   ========================================================================== */

.js .u-reveal {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 600ms ease-out, transform 600ms ease-out;
}

.js .u-reveal.is-visible {
	opacity: 1;
	transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
	.js .u-reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}
}