/* ==========================================================================
   Certified Bling — base layer + typography hierarchy (Phase 1)
   Resets, base element styles, and the ten text roles this phase asks for,
   each as a reusable class so any template/component can apply one without
   repeating font-family/size/tracking rules inline.
   ========================================================================== */

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

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	scroll-behavior: smooth;
	background: var(--cb-black);
	/* Contains any position:fixed descendant's post-transform geometry —
	   fixed elements anchor to the initial containing block (the viewport,
	   tied to THIS element), not to <body>, so body's own overflow-x:hidden
	   below cannot catch them. Found live (homepage QA pass): the closed
	   mobile nav drawer (header.css — position:fixed, right:0, translateX
	   (100%)) is correctly invisible but was still inflating document.
	   documentElement.scrollWidth to ~461px on a 390px viewport. This is
	   the actual fix, not a second copy of the same band-aid — body-level
	   overflow-x:hidden alone never reaches a fixed-position descendant. */
	overflow-x: hidden;
}

/* `html body` (not bare `body`) is deliberate: Blocksy prints its own
   `body{background-color:var(--theme-palette-color-7)}` (its off-white
   default) via Customizer-driven inline CSS attached to the `ct-main-styles`
   handle, which lands earlier in <head> than our enqueue — but at equal
   `body` specificity, source order alone decided it, and in testing
   Blocksy's rule still won. Found live during the Phase 1 visual QA pass
   (body rendered near-white, not --cb-black) and confirmed via
   CDP CSS.getMatchedStylesForNode; the two-element `html body` selector
   (0,0,2) beats Blocksy's plain `body` (0,0,1) outright, verified by
   injecting the bumped selector into the live page before committing it
   here. Same fight, same fix shape as the WC form-field/tab/radio
   specificity fixes already documented in woocommerce-blocks.css. */
html body {
	background: var(--cb-black);
	color: var(--cb-white);
	font-family: var(--cb-font-body);
	font-size: var(--cb-text-base);
	line-height: var(--cb-leading-body);
	font-weight: 400;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	overflow-x: hidden;
}

img, picture, video, canvas, svg { display: block; max-width: 100%; }
img, video { height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 0.18em; }

h1, h2, h3, h4, h5, h6 { font-family: var(--cb-font-display); font-weight: 700; }
p { text-wrap: pretty; }
strong, b { font-weight: 700; }
hr { border: 0; border-top: 1px solid var(--cb-line-soft); }
::selection { background: var(--cb-gold-soft); color: var(--cb-gold-ink); }

/* Context-aware focus ring — see tokens.css for why this isn't a bare
   --cb-white everywhere. 3px offset gives room on tight nav/button targets. */
:focus-visible {
	outline: 2px solid var(--cb-focus);
	outline-offset: 3px;
	border-radius: 1px;
}

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

.screen-reader-text {
	border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%);
	height: 1px; width: 1px; margin: -1px; padding: 0; overflow: hidden;
	position: absolute !important; word-wrap: normal !important;
}
.skip-link {
	position: fixed; left: -9999px; top: 0; z-index: 1000;
	background: var(--cb-white); color: var(--cb-black);
	padding: 0.75rem 1.25rem; font-family: var(--cb-font-mono);
	font-size: var(--cb-text-xs); text-transform: uppercase; letter-spacing: 0.1em;
}
.skip-link:focus { left: 1rem; top: 1rem; text-decoration: none; }
[hidden] { display: none !important; }

/* ==========================================================================
   Typography hierarchy — ten roles, each a class. Apply directly; don't
   rebuild these rules per-component.
   ========================================================================== */

/* 1. Hero headline — oversized editorial, one per page, lower third of a
      cinematic hero. */
.cb-h-hero {
	font-family: var(--cb-font-display);
	font-weight: 700;
	font-size: var(--cb-display);
	line-height: var(--cb-leading-tight);
	letter-spacing: var(--cb-tracking-tight);
	text-transform: uppercase;
	text-wrap: balance;
	color: var(--cb-white);
}

/* 2. Section headline — the title of a homepage/archive section. */
.cb-h-section {
	font-family: var(--cb-font-display);
	font-weight: 700;
	font-size: var(--cb-text-2xl);
	line-height: 1.05;
	letter-spacing: var(--cb-tracking-tight);
	text-transform: uppercase;
	text-wrap: balance;
	color: var(--cb-white);
}

/* 3. Subheadline — supporting line under a section headline, or a
      secondary heading within a section. */
.cb-h-sub {
	font-family: var(--cb-font-display);
	font-weight: 600;
	font-size: var(--cb-text-xl);
	line-height: 1.15;
	letter-spacing: -0.01em;
	text-wrap: balance;
	color: var(--cb-white);
}

/* 3b. Functional heading — a repeated/structural heading inside a
      section that already has its own .cb-h-section statement above it:
      process-step titles, "why us" grid items, path/card names. Homepage
      UX-refinement addition: these used to take .cb-h-sub (the same
      editorial serif as every other heading), which made sections with
      several of them in a row feel heavier than the content warranted.
      Same size as a bare h3 (--cb-text-lg), but the clean body sans
      instead of the display serif — reserve the serif for the one real
      editorial statement per section, not every repeated item under it. */
.cb-h-func {
	font-family: var(--cb-font-body);
	font-size: var(--cb-text-lg);
	font-weight: 600;
	line-height: 1.25;
	letter-spacing: -0.005em;
	text-wrap: balance;
	color: var(--cb-white);
}
.cb-section--light .cb-h-func { color: var(--cb-black); }

/* 4. Body — running copy. */
.cb-body {
	font-family: var(--cb-font-body);
	font-size: var(--cb-text-base);
	line-height: var(--cb-leading-body);
	color: var(--cb-white);
}
.cb-body--muted { color: var(--cb-mute); }
.cb-section--light .cb-body { color: var(--cb-black); }
.cb-section--light .cb-body--muted { color: var(--cb-ink-mute); }

/* 5. Product name — on cards, PDP title context (not the PDP's own
      display-scale headline, which uses .cb-h-section). Suisse Int'l per
      the Phase 1 typography lock — product names read as UI/catalog copy,
      not an editorial moment, so they take --cb-font-body, not mono. */
.cb-product-name {
	font-family: var(--cb-font-body);
	font-size: var(--cb-text-sm);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	line-height: 1.3;
}

/* 6. Labels — eyebrows, field labels, filter labels, badges.
      .cb-eyebrow is the same rule under a second name — used on hero/section
      kickers — kept as an explicit selector (not a CSS-Modules `composes`,
      which plain CSS doesn't support) so either class name works alone. */
.cb-label,
.cb-eyebrow {
	display: inline-block;
	font-family: var(--cb-font-mono);
	font-size: var(--cb-text-2xs);
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: var(--cb-tracking-label);
	color: var(--cb-mute);
}
.cb-section--light .cb-label,
.cb-section--light .cb-eyebrow { color: var(--cb-ink-mute); }

/* 7. Buttons — see buttons.css for full component rules; this is the type
      spec they all share. Suisse Int'l per the Phase 1 typography lock
      (buttons are UI, not an eyebrow/technical label) — weight does the
      work mono's evenness used to; uppercase + tracking still carries the
      same restrained, confident button voice. */
.cb-btn-text {
	font-family: var(--cb-font-body);
	font-size: var(--cb-text-xs);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	line-height: 1;
}

/* 8. Navigation — header links, footer link columns, account nav. Suisse
      Int'l per the lock — primary/footer nav is UI, not a technical label,
      even though it's set uppercase+tracked like one. */
.cb-nav-text {
	font-family: var(--cb-font-body);
	font-size: var(--cb-text-2xs);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: var(--cb-tracking-label);
}

/* 9. Captions — image/media captions, metadata under a photo. */
.cb-caption {
	font-family: var(--cb-font-body);
	font-size: var(--cb-text-xs);
	line-height: 1.4;
	color: var(--cb-mute);
}
.cb-section--light .cb-caption { color: var(--cb-ink-mute); }

/* 10. Utility text — legal, fine print, helper/hint text under a form field. */
.cb-utility-text {
	font-family: var(--cb-font-mono);
	font-size: var(--cb-text-2xs);
	letter-spacing: 0.04em;
	color: var(--cb-mute);
}
.cb-section--light .cb-utility-text { color: var(--cb-ink-mute); }

/* Explicit color on every heading role above — NOT optional. Blocksy's own
   parent stylesheet sets h1-h6{color:...} (its default navy accent,
   rgb(25,42,61)) directly on the element; a class rule that never touches
   `color` can't win that property back through specificity alone, since
   cascade resolution is per-property and Blocksy's rule is the only one
   that sets it. Found live (every heading rendered Blocksy-navy instead of
   --cb-white) during the Phase 1 visual QA pass — fixed here, and the same
   reasoning is why the plain h1-h3 fallbacks below also set color. */
.cb-section--light .cb-h-hero,
.cb-section--light .cb-h-section,
.cb-section--light .cb-h-sub { color: var(--cb-black); }

/* Plain h1-h3 fallback (content typed into the block editor without a
   utility class still reads correctly) */
h1 { font-size: var(--cb-text-2xl); letter-spacing: var(--cb-tracking-tight); text-transform: uppercase; line-height: 1.05; text-wrap: balance; color: var(--cb-white); }
h2 { font-size: var(--cb-text-xl); letter-spacing: -0.01em; line-height: 1.15; text-wrap: balance; color: var(--cb-white); }
h3 { font-size: var(--cb-text-lg); line-height: 1.2; color: var(--cb-white); }
.cb-section--light h1,
.cb-section--light h2,
.cb-section--light h3 { color: var(--cb-black); }

/* ---- Reusable surfaces -------------------------------------------- */
.cb-section--light { background: var(--cb-paper); color: var(--cb-black); }
.cb-section--dark  { background: var(--cb-black); color: var(--cb-white); }
.cb-surface--paper { background: var(--cb-paper-2); color: var(--cb-black); }
.cb-surface--charcoal { background: var(--cb-charcoal); color: var(--cb-white); }

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