/*
 * City Roofing & Exteriors — global design system ("Roofline").
 * Hand-authored (no build step). Enqueued on the front end AND inside the block
 * editor (add_editor_style), so blocks look identical in both. Per-block
 * style.scss files consume the --cr-* custom properties below.
 *
 * Ported from designs/calgary-city-roofing/assets/css/site.css. Token VALUES
 * come from the design; class names gain a `cr-` prefix (the mockup's bare
 * .btn / .wrap / .card would collide with WordPress core and plugins).
 *
 * Photo-led. The logo's roof peak returns as the gable edge between sections
 * (.cr-pitch).
 */

/* Self-hosted variable fonts (latin), so a CDN failure never drops the display
   face and there is no third-party font request. Files live in assets/fonts/. */
@font-face {
	font-family: "Big Shoulders Display";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("../fonts/big-shoulders-display-variable.woff2") format("woff2");
}

@font-face {
	font-family: "Sofia Sans";
	font-style: normal;
	font-weight: 1 1000;
	font-display: swap;
	src: url("../fonts/sofia-sans-variable.woff2") format("woff2");
}

/* Metric-matched fallbacks so a late font swap barely reflows the page. */
@font-face {
	font-family: "Big Shoulders Fallback";
	src: local("Arial Narrow"), local("Arial");
	size-adjust: 78%;
	ascent-override: 105%;
}

@font-face {
	font-family: "Sofia Fallback";
	src: local("Arial");
	size-adjust: 94%;
}

:root {
	/* --- Ink (dark surfaces, text) --- */
	--cr-ink: #16191c;
	--cr-ink-2: #23282d;
	--cr-ink-3: #2f353b;
	--cr-text: #1e2226;
	--cr-muted: #56616b;

	/* --- Light surfaces --- */
	--cr-paper: #fff;
	--cr-mist: #f2f4f5;
	--cr-line: #e2e5e8;

	/* --- Brand red. --cr-red on dark or as a fill; --cr-red-deep for red TEXT
	   on light grounds (AA) and for hover. --- */
	--cr-red: #c8102e;
	--cr-red-deep: #a10c25;
	/* Red for display TYPE on dark photo grounds: brighter than --cr-red so a
	   headline clears 3:1 on charcoal with margin (designer-measured). */
	--cr-red-type: #f0334d;

	/* --- Text on dark grounds --- */
	--cr-on-dark: #f4f5f6;
	--cr-on-dark-soft: #b9c0c6;
	--cr-star: #f4b63f;

	/* --- Type. Big Shoulders Display for headings, Sofia Sans for everything
	   else. Loaded in inc/enqueue.php; ALSO set in theme.json (SETUP §8). --- */
	--cr-display: "Big Shoulders Display", "Big Shoulders Fallback", "Arial Narrow", sans-serif;
	--cr-sans: "Sofia Sans", "Sofia Fallback", system-ui, sans-serif;

	/* --- Layout --- */
	--cr-gutter: clamp(16px, 4vw, 48px);
	--cr-max: 1240px;
	--cr-radius: 6px;
	/* Height of the gable that rises into the section above. */
	--cr-pitch: clamp(40px, 6vw, 84px);
	--cr-header-h: 76px;

	/* --- Motion / depth --- */
	--cr-ease: cubic-bezier(0.16, 1, 0.3, 1);
	--cr-shadow: 0 1px 2px rgba(22, 25, 28, 0.06), 0 12px 32px -14px rgba(22, 25, 28, 0.28);
}

@media ( max-width: 640px ) {
	:root {
		--cr-header-h: 66px;
	}
}

/* --- Base reset (WordPress ships none of this on the front end — SETUP §8) --- */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--cr-header-h) + 8px);
}

body {
	margin: 0;
	background: var(--cr-paper);
	color: var(--cr-text);
	font: 400 1.0625rem/1.6 var(--cr-sans);
	font-variant-numeric: tabular-nums;
	/* clip, not hidden — hidden would make <body> a scroll container and break
	   the sticky header. */
	overflow-x: clip;
}

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

svg {
	display: block;
}

/* Form controls don't inherit font-family from body. */
button,
input,
select,
textarea,
optgroup {
	font-family: inherit;
}

a {
	color: inherit;
	text-underline-offset: 0.2em;
	text-decoration-thickness: 1px;
}

a:hover {
	text-decoration-thickness: 2px;
}

p {
	margin: 0;
	text-wrap: pretty;
}

h1,
h2,
h3 {
	margin: 0;
	font-family: var(--cr-display);
	font-weight: 800;
	line-height: 0.98;
	letter-spacing: 0;
	text-wrap: balance;
}

h1 {
	font-size: clamp(3.25rem, 2rem + 6vw, 7rem);
}

h2 {
	font-size: clamp(2.5rem, 1.6rem + 3.4vw, 4.5rem);
}

h3 {
	font-size: clamp(1.625rem, 1.3rem + 1vw, 2.125rem);
	line-height: 1.05;
}

::selection {
	background: var(--cr-red);
	color: #fff;
}

:focus-visible {
	outline: 3px solid var(--cr-red);
	outline-offset: 3px;
	border-radius: 3px;
}

/* Focus ring flips to white on dark grounds. */
.cr-header :focus-visible,
.cr-mobile :focus-visible,
.cr-footer :focus-visible,
.cr-section--dark :focus-visible,
.cr-section--red :focus-visible {
	outline-color: #fff;
}

/* Locks page scroll while the mobile drawer is open (set by theme.js). */
.cr-no-scroll {
	overflow: hidden;
}

/* Skip link — visible only when focused. */
.cr-skip {
	position: absolute;
	left: 12px;
	top: -60px;
	z-index: 60;
	padding: 10px 14px;
	background: #fff;
	color: var(--cr-ink);
}

.cr-skip:focus {
	top: 12px;
}

/* --- Layout --- */
.cr-container {
	width: 100%;
	max-width: var(--cr-max);
	margin-inline: auto;
	padding-inline: var(--cr-gutter);
}

.cr-section {
	padding-block: clamp(64px, 9vw, 120px);
}

.cr-section--tight-top {
	padding-top: clamp(40px, 5vw, 64px);
}

/* Every section block is an in-page anchor target. */
.cr-section,
.cr-hero {
	scroll-margin-top: var(--cr-header-h);
}

/* --- Section backgrounds. A block's `background` attribute resolves to one of
   these, validated against a PHP allowlist before it reaches a class name
   (inc/partials.php → ccr_section_bg). --- */
.cr-section--paper {
	background: var(--cr-paper);
}

.cr-section--mist {
	background: var(--cr-mist);
}

.cr-section--dark {
	background: var(--cr-ink);
	color: var(--cr-on-dark);
}

.cr-section--red {
	background: var(--cr-red);
	color: #fff;
}

/* The roofline: a gable edge rising into the section above, from the logo's
   roof peak. Opt-in per block via the `pitch` attribute. `inherit` makes the
   gable the same colour as the section it belongs to. */
.cr-pitch {
	position: relative;
}

.cr-pitch::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 100%;
	height: var(--cr-pitch);
	background: inherit;
	clip-path: polygon(0 100%, 50% 0, 100% 100%);
	pointer-events: none;
}

/* --- Buttons ---
   .cr-btn                base
   .cr-btn--red           primary CTA
   .cr-btn--ghost         white hairline on a dark ground
   .cr-btn--ink           dark fill
   .cr-btn--white         white fill, red text (on the red band)
   Variants are written .cr-btn.cr-btn--x so a later `padding` shorthand can't
   beat them (SETUP §8). */
.cr-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.55em;
	min-height: 52px;
	padding: 0 1.4em;
	border: 2px solid transparent;
	border-radius: var(--cr-radius);
	font: 700 1.0625rem/1 var(--cr-sans);
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color 0.2s var(--cr-ease), color 0.2s var(--cr-ease), border-color 0.2s var(--cr-ease), transform 0.2s var(--cr-ease);
}

.cr-btn svg {
	width: 19px;
	height: 19px;
	flex: none;
}

.cr-btn:active {
	transform: translateY(1px);
}

.cr-btn.cr-btn--red {
	background: var(--cr-red);
	color: #fff;
}

.cr-btn.cr-btn--red:hover {
	background: var(--cr-red-deep);
}

.cr-btn.cr-btn--ghost {
	border-color: rgba(255, 255, 255, 0.7);
	color: #fff;
}

.cr-btn.cr-btn--ghost:hover {
	background: #fff;
	color: var(--cr-ink);
	border-color: #fff;
}

.cr-btn.cr-btn--ink {
	background: var(--cr-ink);
	color: #fff;
}

.cr-btn.cr-btn--ink:hover {
	background: var(--cr-ink-3);
}

.cr-btn.cr-btn--white {
	background: #fff;
	color: var(--cr-red-deep);
}

.cr-btn.cr-btn--white:hover {
	background: var(--cr-ink);
	color: #fff;
}

.cr-btn.cr-btn--block {
	width: 100%;
}

/* --- Stars (rating rows) --- */
.cr-stars {
	display: inline-flex;
	gap: 2px;
	color: var(--cr-star);
}

.cr-stars svg {
	width: 18px;
	height: 18px;
}

/* --- Scroll reveal. Only armed once theme.js has run (`.cr-js`), so a
   no-JS visitor never gets content stuck at opacity 0.

   Three states, on purpose: hidden (neither class) -> `is-in` (the 0.7s arrival
   transition) -> `is-shown` (no reveal rules at all). theme.js swaps is-in for
   is-shown once the arrival has finished, handing the element back to its OWN
   transitions. If the end state kept `transform: none` at reveal specificity, a
   revealed card could never run its hover lift. --- */
.cr-js .cr-reveal:not(.is-in):not(.is-shown) {
	opacity: 0;
	transform: translateY(18px);
}

.cr-js .cr-reveal.is-in {
	transition: opacity 0.7s var(--cr-ease), transform 0.7s var(--cr-ease);
}

/* --- Big phone number ("Call / 403-608-9933"). Shared by the CTA band and the
   contact form, so it lives here rather than in either block's stylesheet. --- */
.cr-bigcall {
	display: flex;
	flex-direction: column;
	gap: 10px;
	text-decoration: none;
	color: #fff;
}

.cr-bigcall small {
	font: 600 0.9375rem/1.3 var(--cr-sans);
	color: #fde3e7;
}

.cr-bigcall span {
	font: 800 clamp(2.5rem, 1.6rem + 2.6vw, 3.75rem) / 1 var(--cr-display);
}

.cr-section--dark .cr-bigcall small {
	color: var(--cr-on-dark-soft);
}

.cr-section--paper .cr-bigcall,
.cr-section--mist .cr-bigcall {
	color: var(--cr-ink);
}

.cr-section--paper .cr-bigcall small,
.cr-section--mist .cr-bigcall small {
	color: var(--cr-muted);
}

/* --- Section intro: heading beside a supporting paragraph. Shared by the
   services and reviews sections. The h2 steps down from the global h2 so a long
   keyword heading stays at three lines or fewer. --- */
.cr-intro {
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	gap: 24px clamp(32px, 6vw, 96px);
	align-items: end;
	margin-bottom: clamp(36px, 5vw, 60px);
}

.cr-intro h2 {
	font-size: clamp(2.25rem, 1.5rem + 2.4vw, 3.5rem);
}

.cr-intro p {
	color: var(--cr-muted);
	font-size: 1.125rem;
}

.cr-section--dark .cr-intro p {
	color: var(--cr-on-dark-soft);
}

@media ( max-width: 860px ) {
	.cr-intro {
		grid-template-columns: minmax(0, 1fr);
	}
}

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

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}

	.cr-js .cr-reveal {
		opacity: 1;
		transform: none;
	}
}