/* ==========================================================================
   SAN DIEGO BBQ CLEANERS - FOUNDATIONS
   Tier 1 of 4 (token layer). Cascade position 1. Everything downstream
   references these tokens. Never reorder the cascade in functions.php.

   Direction: dark charcoal base, one red accent, and chrome standing in for
   every shadow. The business polishes stainless steel, so the depth system is
   the material rather than a generic drop shadow. See docs/DECISIONS.md.
   ========================================================================== */

:root {
	color-scheme: dark;

	/* ----------------------------------------------------------------------
	   BASE
	   Three charcoal steps only. Depth beyond that comes from chrome, not
	   from adding greys.
	   -------------------------------------------------------------------- */

	--sdb-ink:        #181A1D;  /* dominant page surface */
	--sdb-well:       #0F1113;  /* recessed: cards, insets */
	--sdb-raised:     #202327;  /* raised panels */

	--sdb-white:      #FFFFFF;
	--sdb-cream:      #F4F3EA;  /* light band for long-form reading */

	/* Single accent. Red is the only resting colour; flame is hover only. */
	--sdb-red:        #A82333;
	--sdb-red-hot:    #CC5944;
	/* Small flame-coloured labels on the dark panels. #CC5944 is 3.8:1 on
	   #202327; this tint is 4.98:1 (WCAG AA for small text). */
	--sdb-flame-text: #DB735F;

	--sdb-ember: linear-gradient(135deg, #8E1B2A 0%, #A82333 38%, #C24232 72%, #CC5944 100%);

	/* ----------------------------------------------------------------------
	   CHROME
	   The depth system. There are no box-shadows in this theme.
	   -------------------------------------------------------------------- */

	--sdb-cr-1:       #F4F7F9;  /* specular highlight */
	--sdb-cr-2:       #C9CED4;
	--sdb-cr-3:       #8A9099;  /* secondary text on dark */
	--sdb-cr-4:       #4A5058;  /* borders */
	--sdb-cr-5:       #2A2E33;  /* shadowed side of a machined edge */

	/* A hairline that catches light, used instead of a border or a shadow. */
	--sdb-chrome-edge: linear-gradient(90deg,
		transparent 0%,
		rgba(244, 247, 249, .08) 12%,
		rgba(244, 247, 249, .55) 48%,
		rgba(244, 247, 249, .08) 88%,
		transparent 100%);

	/* Brushed steel fill. Once per screen, never as wallpaper. */
	--sdb-chrome-fill: linear-gradient(160deg,
		#2A2E33 0%, #3A4047 18%, #5C636C 34%, #8A9099 42%,
		#464C54 52%, #2F343A 70%, #3D434A 100%);

	--sdb-brushed: repeating-linear-gradient(97deg,
		rgba(255, 255, 255, .035) 0px,
		rgba(255, 255, 255, .035) 1px,
		rgba(0, 0, 0, .05) 1px,
		rgba(0, 0, 0, .05) 3px);

	/* ----------------------------------------------------------------------
	   TEXT
	   -------------------------------------------------------------------- */

	--sdb-text:        rgba(255, 255, 255, .86);  /* body on dark */
	--sdb-text-quiet:  var(--sdb-cr-3);           /* meta, captions */
	--sdb-text-light:  #55595E;                   /* body on cream */
	--sdb-hairline:    rgba(255, 255, 255, .08);

	/* ----------------------------------------------------------------------
	   TYPE
	   Marcellus for display, Inter for everything else. Poppins is gone:
	   Inter reads more machined on dark and the reference uses one sans.
	   -------------------------------------------------------------------- */

	--sdb-font-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
	--sdb-font-body:    "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

	/* Archivo and Inter are both grotesques. The width axis keeps them apart:
	   display runs wide, body stays normal. */
	--sdb-display-wide: 125;

	--sdb-h1:      clamp(2.5rem, 6.4vw, 5.1rem);
	--sdb-h2:      clamp(1.875rem, 3.4vw, 2.75rem);
	--sdb-h3:      1.75rem;
	--sdb-h4:      1.4375rem;
	--sdb-h5:      1.25rem;
	--sdb-h6:      1.0625rem;

	--sdb-body:    1rem;
	--sdb-lead:    1.125rem;
	--sdb-small:   .875rem;
	--sdb-tiny:    .8125rem;
	--sdb-btn:     1rem;

	--sdb-lh-tight:   1.1;
	--sdb-lh-heading: 1.2;
	--sdb-lh-body:    1.55;

	--sdb-w-light: 300;
	--sdb-w-body:  400;
	--sdb-w-med:   500;
	--sdb-w-semi:  600;

	--sdb-measure: 64ch;

	/* ----------------------------------------------------------------------
	   SPACE, 8px rhythm
	   -------------------------------------------------------------------- */

	--sdb-s1:  8px;
	--sdb-s2:  16px;
	--sdb-s3:  24px;
	--sdb-s4:  32px;
	--sdb-s5:  48px;
	--sdb-s6:  64px;
	--sdb-s7:  96px;
	--sdb-s8:  128px;

	--sdb-container: 1180px;
	--sdb-gutter:    24px;

	/* ----------------------------------------------------------------------
	   SHAPE
	   Pill buttons, square cards, 6px on images. Straight from the
	   reference: cards carry 0 radius and let their contents hold the curve.
	   -------------------------------------------------------------------- */

	--sdb-radius-btn:   28px;
	--sdb-radius-img:   6px;
	--sdb-radius-card:  0;
	--sdb-radius-input: 2px;

	--sdb-focus: 2px solid var(--sdb-red-hot);
	--sdb-focus-offset: 3px;
}

@media (max-width: 767px) {
	:root {
		--sdb-h3: 1.75rem;
		--sdb-h4: 1.5rem;
		--sdb-s6: 48px;
		--sdb-s7: 64px;
		--sdb-s8: 80px;
		--sdb-gutter: 20px;
	}
}

/* ==========================================================================
   RESET + BASE
   ========================================================================== */

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

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

/* The closing section's flame is deliberately taller and wider than its box so
   it can rise into the block above. Clipping here stops that overflow from
   creating a horizontal scrollbar, without creating a stacking context the way
   overflow: hidden would. */
body { overflow-x: clip; }

@supports not (overflow: clip) {
	body { overflow-x: hidden; }
}

body {
	margin: 0;
	background: var(--sdb-ink);
	color: var(--sdb-text);
	font-family: var(--sdb-font-body);
	font-size: var(--sdb-body);
	font-weight: var(--sdb-w-body);
	line-height: var(--sdb-lh-body);
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
	margin: 0 0 var(--sdb-s2);
	font-family: var(--sdb-font-display);
	font-variation-settings: "wdth" var(--sdb-display-wide);
	font-weight: 800;
	letter-spacing: -.02em;
	color: var(--sdb-white);
	line-height: var(--sdb-lh-heading);
}

h4, h5, h6 { font-weight: 700; }

h1 { font-size: var(--sdb-h1); line-height: var(--sdb-lh-tight); }
h2 { font-size: var(--sdb-h2); line-height: var(--sdb-lh-tight); }
h3 { font-size: var(--sdb-h3); }
h4 { font-size: var(--sdb-h4); }
h5 { font-size: var(--sdb-h5); }
h6 { font-size: var(--sdb-h6); }

p { margin: 0 0 var(--sdb-s2); }
p:last-child { margin-bottom: 0; }

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--sdb-red-hot); }

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

:where(a, button, input, select, textarea, summary):focus-visible {
	outline: var(--sdb-focus);
	outline-offset: var(--sdb-focus-offset);
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
}

/* ==========================================================================
   LAYOUT
   ========================================================================== */

.sdb-container {
	width: 100%;
	max-width: var(--sdb-container);
	margin-inline: auto;
	padding-inline: var(--sdb-gutter);
}

.sdb-section { padding-block: var(--sdb-s7); }
.sdb-section--tight { padding-block: var(--sdb-s6); }

/* Section surfaces. --cream keeps its name from the light build so the
   templates did not all need editing; it is still the light band. */
.sdb-section--cream,
.sdb-section--mist {
	background: var(--sdb-cream);
	color: var(--sdb-text-light);
}

.sdb-section--cream :where(h1, h2, h3, h4, h5, h6),
.sdb-section--mist  :where(h1, h2, h3, h4, h5, h6) { color: var(--sdb-ink); }

.sdb-section--ink { background: var(--sdb-well); }

.sdb-prose { max-width: var(--sdb-measure); }

/* The chrome hairline. Put it on any element that needs an edge. */
.sdb-edge { position: relative; }
.sdb-edge::before {
	content: "";
	position: absolute;
	left: 0; right: 0; top: 0;
	height: 1px;
	background: var(--sdb-chrome-edge);
}

.sdb-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 999;
	padding: var(--sdb-s1) var(--sdb-s3);
	background: var(--sdb-red);
	color: var(--sdb-white);
}
.sdb-skip-link:focus { left: 0; }

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

/* ==========================================================================
   ICON
   ========================================================================== */

.sdb-icon {
	display: inline-block;
	width: 1em;
	height: 1em;
	vertical-align: -0.125em;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* ==========================================================================
   BUTTONS
   Red is the only resting accent. The steel variant is the chrome fill doing
   the job a drop shadow used to do.
   ========================================================================== */

/* Ember gradient: one accent given depth rather than a second colour. The
   hover slides the gradient instead of swapping the fill, so it reads as heat
   moving across the button. */
.sdb-btn {
	display: inline-block;
	padding: 19px 34px;
	border: 0;
	border-radius: var(--sdb-radius-btn);
	background: var(--sdb-ember);
	background-size: 180% 180%;
	background-position: 0% 50%;
	color: var(--sdb-white);
	font-family: var(--sdb-font-body);
	font-size: var(--sdb-btn);
	font-weight: var(--sdb-w-med);
	line-height: 1;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background-position .45s cubic-bezier(.2, .7, .2, 1), transform .18s ease;
}

.sdb-btn:hover,
.sdb-btn:focus-visible {
	background-position: 100% 50%;
	transform: translateY(-1px);
	color: var(--sdb-white);
}

.sdb-btn--steel {
	position: relative;
	background: var(--sdb-chrome-fill);
	text-shadow: 0 1px 0 rgba(0, 0, 0, .45);
	overflow: hidden;
}

.sdb-btn--steel::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--sdb-brushed);
	opacity: .7;
	pointer-events: none;
}

.sdb-btn--steel:hover { filter: brightness(1.14); background: var(--sdb-chrome-fill); transform: translateY(-1px); }

/* Outlined. Replaces the old ghost variant. */
.sdb-btn--ghost {
	background: transparent;
	color: var(--sdb-white);
	box-shadow: inset 0 0 0 1px var(--sdb-cr-4);
}

.sdb-btn--ghost:hover {
	transform: none;
	background: rgba(255, 255, 255, .06);
	box-shadow: inset 0 0 0 1px var(--sdb-cr-3);
	color: var(--sdb-white);
}

.sdb-section--cream .sdb-btn--ghost,
.sdb-section--mist .sdb-btn--ghost { color: var(--sdb-ink); box-shadow: inset 0 0 0 1px rgba(24, 26, 29, .25); }
.sdb-section--cream .sdb-btn--ghost:hover,
.sdb-section--mist .sdb-btn--ghost:hover { background: rgba(24, 26, 29, .06); color: var(--sdb-ink); }

/* ==========================================================================
   LABEL
   The old build put a tracked-out caps line above every heading. They are
   gone. This is kept for the few places a real category label is useful, in
   sentence case.
   ========================================================================== */

.sdb-label {
	margin: 0 0 var(--sdb-s1);
	font-family: var(--sdb-font-body);
	font-size: var(--sdb-tiny);
	font-weight: var(--sdb-w-semi);
	line-height: 1.4;
	color: var(--sdb-red-hot);
	text-transform: none;
	letter-spacing: 0;
}

.sdb-section--cream .sdb-label,
.sdb-section--mist .sdb-label { color: var(--sdb-red); }