/*
Theme Name: Christopher Brookes
Theme URI: https://www.christopherbrookes.co.uk/
Author: Studio NG
Author URI: https://www.studio-ng.co.uk/
Description: Bespoke theme for Christopher Brookes — Actor, Director & Producer. Pages are built from ACF Flexible Content components; each component loads its own CSS/JS only where it is used. Requires ACF Pro.
Version: 3.0.0
Requires at least: 6.3
Requires PHP: 7.4
License: Proprietary
Text Domain: christopher-brookes
*/

/* ==================================================================
   BASE — loaded on every page. Component styles live in
   components/<name>/<name>.css and load only when used.
   ================================================================== */

:root {
	--grey: #7e7e7e;
	--white: #fff;
	--black: #000;
	--silver: #beb5b5;
	--cb-font-main: "DM Sans", sans-serif;
	--cb-font-mono: "IBM Plex Mono", monospace;
	--cb-font-accent: Oswald, sans-serif;
}

/* Fluid root size (from the original site) */
html { font-size: 1.125rem; }
@media screen and (max-width: 1920px) { html { font-size: calc(0.625rem + 0.41666666666666674vw); } }
@media screen and (max-width: 1440px) { html { font-size: calc(0.6253902185223725rem + 0.41623309053069724vw); } }
@media screen and (max-width: 479px)  { html { font-size: calc(0.7494769874476988rem + 0.8368200836820083vw); } }

*, *::before, *::after { box-sizing: border-box; }
html { height: 100%; -webkit-text-size-adjust: 100%; }
body {
	margin: 0;
	min-height: 100%;
	background: #fff;
	color: #000;
	font-family: var(--cb-font-main);
	font-size: 1rem;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 700; }
p { margin: 0 0 1rem; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; display: block; border: 0; }
a:focus-visible { outline: .125rem solid #4d65ff; outline-offset: .125rem; }

.screen-reader-text {
	border: 0; clip: rect(1px,1px,1px,1px); clip-path: inset(50%);
	height: 1px; margin: -1px; overflow: hidden; padding: 0;
	position: absolute; width: 1px; word-wrap: normal !important;
}
.screen-reader-text:focus {
	clip: auto; clip-path: none; height: auto; width: auto; z-index: 100;
	background: #fff; color: #000; padding: .5rem 1rem; top: .5rem; left: .5rem;
}

/* ---- Shared typography used by several components ---- */
.cb-quote {
	margin: 0;
	color: var(--grey);
	font-family: var(--cb-font-main);
	font-size: 2.5rem;
	font-weight: 400;
	line-height: 110%;
	letter-spacing: -1px;
}
.cb-credit {
	margin: 0;
	padding-top: .5rem;
	color: var(--grey);
	font-family: var(--cb-font-mono);
	font-size: .75rem;
	line-height: 1.5;
}
.cb-credit--light { color: #fff; }
a.cb-credit { text-decoration: underline; display: inline-block; }
a.cb-credit:hover { color: #000; }

/* ---- Component wrapper: every component sits in the 80rem container ---- */
.cb-component {
	width: calc(100% - 5rem);
	max-width: 80rem;
	margin: 4rem auto 0;
}
.cb-component--full { width: 100%; max-width: none; }
.cb-components > .cb-component:first-child { margin-top: 0; }
.cb-components { padding-bottom: 3rem; }

/* ---- Top bar (logo + link to the other page) ---- */
.cb-page { position: relative; }
.cb-topbar {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 5;
	padding: 0 2.5rem;
}
.cb-topbar__inner {
	max-width: 80rem;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	padding-top: 1rem;
}
.cb-topbar__link {
	color: #fff;
	font-family: var(--cb-font-accent);
	font-weight: 400;
	transition: color .2s;
}
.cb-topbar__link:hover { color: var(--silver); }
/* No hero first? Give the bar its own black band. */
.cb-page:not(.has-hero) .cb-topbar { position: relative; background: #000; padding-bottom: 1rem; }

/* ---- Footer ---- */
.cb-footer { padding: 3rem 2.5rem; }
.cb-footer__inner {
	max-width: 80rem;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	align-items: end;
}
.cb-footer__contact { margin-top: 2rem; }
.cb-footer__email { color: var(--grey); font-family: var(--cb-font-mono); }
.cb-footer__email:hover { color: #000; }
.cb-footer__copyright { color: var(--grey); font-family: var(--cb-font-mono); font-size: .75rem; }
.cb-footer__social { display: flex; justify-content: flex-end; }
.cb-footer__social img { padding: 1rem; transition: opacity .2s; }
.cb-footer__social a:hover img { opacity: .5; }
.cb-footer__links { display: flex; flex-direction: column; align-items: flex-end; }
.cb-footer__spotlight { color: var(--grey); font-family: var(--cb-font-mono); font-size: .75rem; text-decoration: underline; }
.cb-footer__credit { color: var(--grey); font-family: var(--cb-font-mono); font-size: .5rem; text-decoration: underline; margin-top: 19px; }
.cb-footer__spotlight:hover, .cb-footer__credit:hover { color: #000; }

/* ---- Scroll reveal (replaces Webflow interactions) ---- */
.js .cb-reveal {
	opacity: 0;
	transform: translate3d(0, 200px, 0);
	transition: opacity 1s ease, transform 1s ease;
}
.js .cb-reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
	.js .cb-reveal { opacity: 1; transform: none; transition: none; }
}

/* ---- Fallback content (posts, 404) ---- */
.cb-generic { max-width: 48rem; margin: 0 auto; padding: 6rem 1.25rem; }
.cb-generic h1 { font-size: 2.5rem; margin-bottom: 2rem; }
.cb-generic a { text-decoration: underline; }

/* ---- Responsive ---- */
@media screen and (max-width: 767px) {
	.cb-component { width: calc(100% - 2.5rem); margin-top: 3rem; }
	.cb-component--full { width: 100%; }
	.cb-topbar, .cb-footer { padding-left: 1.25rem; padding-right: 1.25rem; }
	.cb-footer { padding-top: 2rem; padding-bottom: 2rem; }
	.cb-footer__contact { margin-top: 1.25rem; }
	.cb-quote { font-size: 2rem; }
}
@media screen and (max-width: 479px) {
	.cb-quote { font-size: 1.5rem; }
	.cb-footer__inner { grid-template-columns: 1fr; }
	.cb-footer__social { justify-content: center; }
	.cb-footer__links { align-items: center; }
}