/**
 * Sandra Cameron Blocks — shared foundation.
 *
 * Source of truth: homepage/index.html (the approved static page). Tokens are
 * the GeneratePress global colors of sandra-cameron.com plus the navy from the
 * logo. Everything is scoped under .sc-* so nothing leaks into the theme.
 *
 * Contents
 *   1  Tokens
 *   2  Base inside blocks
 *   3  Shared pieces: wrap, divider, buttons, text links, screen reader text
 *   4  Section utilities (spacing, background, width) — set in the editor
 *   5  Motion
 */

/* ---------------------------------------------------------------
   1 · Tokens
   --------------------------------------------------------------- */
:root {
	--sc-contrast: #222222;
	--sc-text: #2d2d2d;
	--sc-muted: #6b6b6b;
	--sc-base: #f0f0f0;
	--sc-base-2: #f7f8f9;
	--sc-white: #ffffff;
	--sc-brown: #9c8772;
	--sc-gold: #c9b787;
	--sc-gold-light: #ede6d4; /* light tint of --sc-gold, for text backgrounds */
	--sc-blue-light: #e3eaf4; /* light tint of the logo navy */
	--sc-navy: #051c46; /* dark blue from the logo */
	--sc-line: #e4e4e4;
	--sc-gutter: clamp(20px, 5vw, 90px);
	--sc-section-y: 90px;
	--sc-sans: "Open Sans", Arial, sans-serif;
	--sc-nav: Helvetica, Arial, sans-serif;
}

/* ---------------------------------------------------------------
   2 · Base inside blocks
   Every block root carries .sc-section (or .sc-chrome). Typography is set
   there, not on body, so the theme stays untouched outside the blocks.
   --------------------------------------------------------------- */
/* Canvas template: white page, no theme margins (GeneratePress gives body
   a light grey, which would show through every "auto" section). */
body.sc-canvas {
	margin: 0;
	background: var(--sc-white);
}

.sc-section,
.sc-chrome {
	box-sizing: border-box;
	font-family: var(--sc-sans);
	font-size: 18px;
	line-height: 1.6;
	color: var(--sc-text);
}

.sc-section *,
.sc-section *::before,
.sc-section *::after,
.sc-chrome *,
.sc-chrome *::before,
.sc-chrome *::after {
	box-sizing: border-box;
}

:where(.sc-section) {
	padding: var(--sc-section-y) 0;
	margin: 0;
}

.sc-section img,
.sc-chrome img {
	max-width: 100%;
	height: auto;
	display: block;
}

.sc-section :is(h1, h2, h3, h4) {
	color: var(--sc-contrast);
	font-family: var(--sc-sans);
	font-weight: 700;
	text-transform: uppercase;
	line-height: 1.25;
	letter-spacing: normal;
	margin: 0;
}

.sc-section p {
	margin: 0 0 1em;
}

.sc-section p:last-child {
	margin-bottom: 0;
}

.sc-section a:focus-visible,
.sc-chrome a:focus-visible,
.sc-chrome button:focus-visible,
.sc-section button:focus-visible {
	outline: 3px solid var(--sc-brown);
	outline-offset: 3px;
}

/* Section heading (H2) — the live site's h2 is 29px uppercase bold. */
:where(.sc-section) .sc-heading {
	font-size: 29px;
	margin-bottom: 18px;
}

:where(.sc-section) .sc-lead {
	max-width: 820px;
}

/* ---------------------------------------------------------------
   3 · Shared pieces
   --------------------------------------------------------------- */

/* Full width with a gutter that grows with the screen. */
.sc-wrap {
	width: 100%;
	padding: 0 var(--sc-gutter);
}

/* The thin gold line above headings — from the live homepage ("Welcome"). */
.sc-divider {
	display: block;
	width: 160px;
	height: 1px;
	background: var(--sc-gold);
	margin: 0 0 32px;
}

.sc-section-head {
	max-width: 820px;
	margin: 0 0 50px;
}

/* Specificity ladder — keep it:
     base here, wrapped in :where()   (0,1,0)
     block rules  (.sc-split .sc-btn) (0,2,0)
     background utilities (.sc-section.sc-bg-navy .sc-btn) (0,3,0)
   Equal specificity would leave the result to stylesheet load order. */

/* CTA button — the live site's "secondary-button": white, 4px brown border,
   10px radius, fills brown on hover. Every button carries the same arrow as
   the text links. */
:where(.sc-section) .sc-btn {
	display: inline-block;
	padding: 16px 30px;
	border: 4px solid var(--sc-brown);
	border-radius: 10px;
	background: var(--sc-white);
	color: var(--sc-brown);
	font-family: var(--sc-nav);
	font-weight: 700;
	font-size: 18px;
	line-height: 1.3;
	text-decoration: none;
	transition: background-color 0.2s, color 0.2s;
}

:where(.sc-section) .sc-btn::after {
	content: "\2192";
	display: inline-block;
	margin-left: 10px;
	transition: transform 0.2s;
}

/* Themes style a:hover with (0,1,1) — pin every state. */
:where(.sc-section) .sc-btn:hover,
:where(.sc-section) .sc-btn:focus {
	background: var(--sc-brown);
	color: var(--sc-white);
}

:where(.sc-section) .sc-btn:visited {
	color: var(--sc-brown);
}

:where(.sc-section) .sc-btn:hover::after {
	transform: translateX(3px);
}

/* Secondary text link with arrow and gold underline. */
:where(.sc-section) .sc-link-arrow,
:where(.sc-section) .sc-link-arrow:visited {
	font-weight: 600;
	color: var(--sc-contrast);
	text-decoration: none;
	border-bottom: 1px solid var(--sc-gold);
	padding-bottom: 2px;
	transition: color 0.2s, border-color 0.2s;
}

:where(.sc-section) .sc-link-arrow::after {
	content: "\2192";
	display: inline-block;
	margin-left: 8px;
	transition: transform 0.2s;
}

:where(.sc-section) .sc-link-arrow:hover,
:where(.sc-section) .sc-link-arrow:focus {
	color: var(--sc-brown);
	border-color: var(--sc-brown);
}

:where(.sc-section) .sc-link-arrow:hover::after {
	transform: translateX(3px);
}

:where(.sc-section) .sc-link-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px 36px;
	margin-top: 30px;
}

.sc-sr-only {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.sc-skip {
	position: absolute;
	left: -9999px;
	z-index: 1000;
}

.sc-skip:focus {
	left: 16px;
	top: 16px;
	background: var(--sc-contrast);
	color: #fff;
	padding: 8px 14px;
}

.sc-editor-notice {
	padding: 10px 14px;
	background: #fff8e1;
	border-left: 4px solid var(--sc-gold);
	font-size: 14px;
	color: var(--sc-contrast);
}

/* ---------------------------------------------------------------
   4 · Section utilities
   'auto' in the editor writes no class — then the block's own style.css
   applies (the design). An explicit choice writes one of these classes; the
   double class (0,2,0) beats the block rule (0,1,0), and the base padding
   is wrapped in :where() so block rules like .sc-text beat it too.
   --------------------------------------------------------------- */
.sc-section.sc-pt-none { padding-top: 0; }
.sc-section.sc-pt-xs   { padding-top: 20px; }
.sc-section.sc-pt-s    { padding-top: 40px; }
.sc-section.sc-pt-m    { padding-top: 70px; }
.sc-section.sc-pt-l    { padding-top: 90px; }
.sc-section.sc-pt-xl   { padding-top: 130px; }

.sc-section.sc-pb-none { padding-bottom: 0; }
.sc-section.sc-pb-xs   { padding-bottom: 20px; }
.sc-section.sc-pb-s    { padding-bottom: 40px; }
.sc-section.sc-pb-m    { padding-bottom: 70px; }
.sc-section.sc-pb-l    { padding-bottom: 90px; }
.sc-section.sc-pb-xl   { padding-bottom: 130px; }

.sc-section.sc-bg-white      { background: var(--sc-white); }
.sc-section.sc-bg-surface    { background: var(--sc-base-2); }
.sc-section.sc-bg-gold-light { background: var(--sc-gold-light); }
.sc-section.sc-bg-blue-light { background: var(--sc-blue-light); }

/* Navy: white text, gold accents, gold button (a navy button would vanish).
   Works for every section, not only the split panel. */
.sc-section.sc-bg-navy {
	background: var(--sc-navy);
	color: #e9ecf2;
}

.sc-section.sc-bg-navy :is(h1, h2, h3, h4) {
	color: var(--sc-white);
}

.sc-section.sc-bg-navy .sc-divider {
	background: var(--sc-gold);
}

.sc-section.sc-bg-navy .sc-link-arrow,
.sc-section.sc-bg-navy .sc-link-arrow:visited {
	color: var(--sc-white);
	border-color: var(--sc-gold);
}

.sc-section.sc-bg-navy .sc-link-arrow:hover,
.sc-section.sc-bg-navy .sc-link-arrow:focus {
	color: var(--sc-gold);
	border-color: var(--sc-gold);
}

.sc-section.sc-bg-navy .sc-btn,
.sc-section.sc-bg-navy .sc-btn:visited {
	background: var(--sc-gold);
	border-color: var(--sc-gold);
	color: var(--sc-navy);
}

.sc-section.sc-bg-navy .sc-btn:hover,
.sc-section.sc-bg-navy .sc-btn:focus {
	background: transparent;
	color: var(--sc-gold);
}

.sc-section.sc-bg-navy a:focus-visible {
	outline-color: var(--sc-gold);
}

.sc-section.sc-width-narrow .sc-wrap > * {
	max-width: 900px;
}

/* ---------------------------------------------------------------
   Responsive
   --------------------------------------------------------------- */
@media (max-width: 860px) {
	:root {
		--sc-section-y: 70px;
	}
}

@media (max-width: 560px) {
	.sc-section,
	.sc-chrome {
		font-size: 16px;
	}

	:where(.sc-section) .sc-heading {
		font-size: 24px;
	}

	.sc-wrap {
		padding: 0 16px;
	}

	:where(.sc-section) .sc-btn {
		padding: 14px 24px;
		font-size: 16px;
	}
}

/* ---------------------------------------------------------------
   5 · Motion
   --------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.sc-section *,
	.sc-section *::before,
	.sc-section *::after,
	.sc-chrome *,
	.sc-chrome *::before,
	.sc-chrome *::after {
		transition: none !important;
		animation: none !important;
	}
}