/**
 * Cascade Studio — base stylesheet.
 *
 * :root defines the site-wide brand defaults (Bitesize Bio house brand).
 * Per-page overrides for studio_pages are injected by brand-injection.php,
 * which reads the parent client's ACF brand fields and writes a tighter
 * <style id="cs-brand-overrides"> block in <head>. That block also maps the
 * --cs-* vars to Kadence Blocks' --global-* vars so editor blocks inherit.
 *
 * Convention: brand-driven tokens use --cs-*. Layout-driven tokens (spacing,
 * shadow, radius, breakpoints) can be added here later as flat values, no
 * need to expose them per-client unless we want to.
 */

:root {
	/* ── Brand colours — Bitesize Bio defaults ───────────────────── */
	--cs-color-primary:      #EC6607; /* BSB orange */
	--cs-color-secondary:    #F18C45; /* BSB orange light */
	--cs-color-accent:       #EC6607; /* CTAs, links */
	--cs-color-bg:           #FFFFFF;
	--cs-color-bg-alt:       #F5F5F5; /* BSB off-white */
	--cs-color-text:         #242425; /* BSB off-black */
	--cs-color-text-muted:   #707070; /* BSB subtle text */
	--cs-color-border:       #D6D6D6; /* BSB lightest grey */

	/* ── Typography — Poppins (BSB house font) ───────────────────── */
	--cs-font-heading:       'Poppins', sans-serif;
	--cs-font-body:          'Poppins', sans-serif;
	--cs-font-size-base:     16px;
	--cs-line-height-base:   1.6;

	/* ── Logo dimensions ─────────────────────────────────────────── */
	--cs-logo-max-width:     180px;
	--cs-logo-max-height:    60px;
}

/* ── Global base ─────────────────────────────────────────────────── */
/*
 * Bio/Kadence sets fonts via theme.json + late inline CSS, so a plain
 * body selector loses the specificity fight. We override across the
 * common content wrappers and use !important on font-family — the brand
 * plugin's whole job is to *undo* the theme's typography on these pages.
 */
body.cascade-studio-site,
body.cascade-studio-site .wp-site-blocks,
body.cascade-studio-site .entry-content,
body.cascade-studio-site .cs-studio-page,
body.cascade-studio-site .cs-studio-page p,
body.cascade-studio-site .cs-studio-page li,
body.cascade-studio-site .cs-studio-page blockquote {
	font-family: var(--cs-font-body) !important;
	color:       var(--cs-color-text);
}

body.cascade-studio-site {
	background-color: var(--cs-color-bg);
	font-size:        var(--cs-font-size-base);
	line-height:      var(--cs-line-height-base);
}

body.cascade-studio-site h1,
body.cascade-studio-site h2,
body.cascade-studio-site h3,
body.cascade-studio-site h4,
body.cascade-studio-site h5,
body.cascade-studio-site h6,
body.cascade-studio-site .cs-studio-page h1,
body.cascade-studio-site .cs-studio-page h2,
body.cascade-studio-site .cs-studio-page h3,
body.cascade-studio-site .cs-studio-page h4,
body.cascade-studio-site .cs-studio-page h5,
body.cascade-studio-site .cs-studio-page h6,
body.cascade-studio-site .entry-content h1,
body.cascade-studio-site .entry-content h2,
body.cascade-studio-site .entry-content h3,
body.cascade-studio-site .entry-content h4,
body.cascade-studio-site .entry-content h5,
body.cascade-studio-site .entry-content h6 {
	font-family: var(--cs-font-heading) !important;
	color:       var(--cs-color-text);
}

body.cascade-studio-site a {
	color: var(--cs-color-accent);
}

/* ── Layout — content container ──────────────────────────────────── */
/*
 * Top-level children of the studio_page article are constrained to a
 * sensible reading column by default. Blocks marked .alignwide stretch
 * wider; .alignfull breaks out to viewport edges (banners, full-bleed
 * Kadence Row Layouts).
 */
.cs-studio-page > * {
	max-width:     1200px;
	margin-left:   auto;
	margin-right:  auto;
	padding-left:  1.5rem;
	padding-right: 1.5rem;
	box-sizing:    border-box;
}
.cs-studio-page > .alignwide {
	max-width: 1400px;
}
.cs-studio-page > .alignfull {
	max-width:     none;
	padding-left:  0;
	padding-right: 0;
}

/*
 * Utility — constrain a nested block to the standard reading column even
 * when its parent is alignfull. Add via block sidebar → Advanced →
 * "Additional CSS class(es)": cs-constrained
 */
.cs-constrained {
	max-width:     1200px;
	margin-left:   auto;
	margin-right:  auto;
	padding-left:  1.5rem;
	padding-right: 1.5rem;
	box-sizing:    border-box;
}

/* ── Header ──────────────────────────────────────────────────────── */
.cs-header {
	background-color: var(--cs-color-bg);
	padding:          1rem 1.5rem;
}
.cs-header__inner {
	max-width:   1200px;
	margin:      0 auto;
	display:     flex;
	align-items: center;
}
.cs-header__logo {
	display:         inline-flex;
	align-items:     center;
	color:           inherit;
	text-decoration: none;
}
.cs-header__logo-img {
	width:      var(--cs-logo-max-width);
	height:     auto;
	max-height: var(--cs-logo-max-height);
	display:    block;
}
.cs-header__logo-text {
	font-family: var(--cs-font-heading);
	font-size:   1.25rem;
	font-weight: 600;
	color:       var(--cs-color-text);
}

/* ── Footer ──────────────────────────────────────────────────────── */
/*
 * Universal across all studio_pages — solid black, low-profile.
 * Hidden entirely (template returns early) when client has hide_powered_by on.
 */
.cs-footer {
	background-color: #000000;
	padding:          1rem 1.5rem;
	color:            #ffffff;
}
.cs-footer__inner {
	max-width:    1200px;
	margin:       0 auto;
	display:      flex;
	align-items:  center;
	justify-content: center;
}
.cs-footer__powered-by {
	display:         inline-flex;
	align-items:     center;
	gap:             0.5rem;
	color:           #ffffff;
	text-decoration: none;
	font-family:     var(--cs-font-body);
	font-size:       0.875rem;
	opacity:         0.85;
	transition:      opacity 0.2s ease;
}
.cs-footer__powered-by:hover {
	opacity: 1;
	color:   #ffffff;
}
.cs-footer__bsb-logo {
	height:    20px;
	width:     auto;
	display:   block;
}
.cs-footer__bsb-wordmark {
	font-weight: 600;
}
