/* ==========================================================================
   Vertwo Premium — Design System
   --------------------------------------------------------------------------
   Fonts, CSS variables, and base typography. Loaded on every page.
   --------------------------------------------------------------------------
   Brand colors and font choices come from the Vertwo build spec.
   Variable names match the prototype's conventions so prototype CSS
   can be ported verbatim with minimal changes.
   ========================================================================== */


/* ─────────────── Fonts ─────────────── */
/* Neue Haas Grotesk Display — Black (900), Bold (700), Roman (400)        */
/* Files live in /assets/fonts/. DM Sans + Inter come from Google Fonts    */
/* via wp_enqueue_style in functions.php.                                  */

@font-face {
	font-family: 'NHG';
	src: url('../fonts/NeueHaasDisplay-Black.woff') format('woff');
	font-weight: 900;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'NHG';
	src: url('../fonts/NeueHaasDisplay-Bold.woff') format('woff');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'NHG';
	src: url('../fonts/NeueHaasDisplay-Roman.woff') format('woff');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

/* Same files exposed under the longer name so either works */
@font-face {
	font-family: 'NeueHaasGrotesk';
	src: url('../fonts/NeueHaasDisplay-Black.woff') format('woff');
	font-weight: 900;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'NeueHaasGrotesk';
	src: url('../fonts/NeueHaasDisplay-Bold.woff') format('woff');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'NeueHaasGrotesk';
	src: url('../fonts/NeueHaasDisplay-Roman.woff') format('woff');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}


/* ─────────────── CSS Variables ─────────────── */
/* Two naming systems coexist:                                            */
/*  - Short names (--orange, --black) match the prototype's conventions    */
/*  - Prefixed names (--vertwo-orange) avoid collisions if needed          */

:root {
	/* Brand colors — short names (use these in components) */
	--orange:        #F27A0F;
	--gold:          #F5A623;
	--black:         #1A1A1A;
	--white:         #FFFFFF;
	--off:           #F5F5F7;
	--mid:           #697386;
	--line:          #D2D2D7;

	/* Same colors with theme prefix (alternate naming) */
	--vertwo-orange:       #F27A0F;
	--vertwo-gold:         #F5A623;
	--vertwo-near-black:   #1A1A1A;
	--vertwo-white:        #FFFFFF;
	--vertwo-footer-dark:  #1d1d1f;

	/* Typography stacks — match prototype.
	   v0.14.0 — 'Noto Sans JP' inserted before generic fallbacks so
	   Japanese characters (kanji/kana) render identically across Mac
	   and Windows. Latin characters still render via NHG (title) or
	   DM Sans/Inter (body); browser only reaches Noto Sans JP when a
	   glyph isn't covered by the preceding fonts. */
	--font-title: 'NHG', 'NeueHaasGrotesk', 'Helvetica Neue', 'Arial Black', 'Arial', 'Noto Sans JP', sans-serif;
	--font-body:  'DM Sans', 'Inter', 'Noto Sans JP', system-ui, -apple-system, sans-serif;
	--font-display: var(--font-title);

	/* Layout constants from prototype */
	--max:        980px;
	--slide-dur:  20s;

	/* Spacing scale */
	--space-xs: 0.5rem;
	--space-sm: 1rem;
	--space-md: 2rem;
	--space-lg: 4rem;
	--space-xl: 8rem;

	/* Breakpoints — for docs only; use same numbers in @media rules */
	--bp-mobile: 520px;
	--bp-tablet: 860px;
}


/* ─────────────── Base reset and typography ─────────────── */

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

html {
	scroll-behavior: smooth;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	/* v0.3.1 (Vic feedback): match footer bg so iOS rubber-band overscroll
	   past bottom — and any "behind toolbar" pull-down — doesn't flash white.
	   Body keeps white for content areas; html only shows on overscroll. */
	background: #1d1d1f;
	/* v0.4.1 (Vic feedback): lock html horizontal overflow too. body alone
	   isn't enough on iOS Safari — if any child breaks out of its content
	   box (e.g. a hot-reload glitch or wide canvas), the page-level scroller
	   still allows horizontal pan unless html itself is clamped.
	   v0.20.8 — reverted v0.20.7's `clip` experiment (at that point we still
	   thought Oppo was a single-vendor edge case + Lenis was still active
	   in some configs so the symptom didn't move enough to be conclusive).

	   v0.32.8 — re-instated `clip` with the right rationale. Vic's friends
	   reported 2026-05-12 that 4 of 6 Android handsets (Xiaomi, Oppo, 2x
	   Samsung, Galaxy Tab) could not scroll on any page EXCEPT
	   single-vertwo_work. Work Detail already overrides html/body to
	   `overflow-x: clip` (see work-detail.css v0.26.8 sticky-friendliness
	   block) — that override was originally added so position:sticky would
	   engage on .pd-right, but it ALSO silently fixed the Android touch-
	   scroll lock as a side effect.

	   Root cause (CSS-Containment spec): `overflow: hidden` on html/body
	   creates a new scroll context at the document root. Some Android
	   vendor browsers (Xiaomi MIUI, Oppo ColorOS WebView, Samsung Internet
	   on certain builds) route touch scroll inconsistently when the root
	   scroll-context is non-default — document-level touch swipes get
	   silently absorbed. Fixed-position UI (hamburger drawer, back-to-top)
	   still works because those have their own scroll/click contexts.
	   2-finger zoom partially scrolls because zoom changes the visual
	   viewport, bypassing the document-level scroll-context routing.
	   This is the long-running "Oppo scroll bug" parked since v0.19.x.

	   `overflow: clip` provides the same horizontal-overflow suppression
	   but does NOT create a scroll context — exactly the modern fix
	   Vic's v0.26.8 comment recommended. Browser support: Chrome 90+,
	   Safari 16+, Firefox 81+ — well within mobile-first audience.
	   @supports fallback below restores `hidden` for older browsers. */
	overflow-x: clip;
	/* v0.6.2 (Vic feedback): kill rubber-band overscroll on touch devices.
	   overscroll-behavior: none clamps both axes so the page can't be
	   dragged off its anchor point on tablet. */
	overscroll-behavior: none;
	/* v0.6.3 (Vic feedback): touch-action declares which gestures the
	   browser may even interpret. pan-y allows vertical scroll, pinch-zoom
	   keeps accessibility zoom — everything else (horizontal pan, two-finger
	   pan, rotate) is rejected at the gesture-recognizer level. */
	touch-action: pan-y pinch-zoom;
}

body {
	font-family: var(--font-body);
	font-weight: 400;
	color: var(--black);
	/* v0.3.3 (Vic feedback): body bg now matches the footer (#1d1d1f).
	   Previously it was #1a1a1a, but the only place body bg actually shows
	   on screen is below the footer (overscroll, gap), and Vic noticed the
	   tonal seam between body (#1a1a1a) and footer (#1d1d1f) there.
	   Setting them equal removes the seam. The hero has its own
	   `background:#000` so the safe-area at the top of the page is still
	   pure black behind the artwork, regardless of body bg. */
	background: #1d1d1f;
	line-height: 1.5;
	/* v0.32.8 — `clip` instead of `hidden`. See the html rule above for the
	   full Android-touch-scroll rationale (CSS Containment scroll-context).
	   Mirrored on body because some browsers route overflow off body rather
	   than html depending on quirks mode + CSS-in-frame edge cases. */
	overflow-x: clip;
	/* v0.6.2 — see html rule above. Mirrored on body because some browsers
	   (older WebKit) only honor overscroll-behavior when it's set on the
	   element that actually owns the overflow context, which can be either
	   depending on quirks mode and CSS-in-frame edge cases. Belt + braces. */
	overscroll-behavior: none;
	/* v0.6.3 — see html rule above. Same belt+braces logic for touch-action:
	   declaring it on both html and body ensures whichever element the
	   browser treats as the touch-gesture root respects the lock. */
	touch-action: pan-y pinch-zoom;
}

/* v0.32.8 — pre-2021 fallback. Any browser without `overflow: clip` support
   falls back to the previous `hidden` declaration. Functionally identical
   to pre-v0.32.8 behavior (same Android-touch bug present on those old
   browsers — but their share is microscopic in 2026). Audience is modern
   mobile, so this is a guarded fallback only. */
@supports not (overflow: clip) {
	html,
	body {
		overflow-x: hidden;
	}
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-title);
	font-weight: 900;
	line-height: 1.1;
	letter-spacing: -0.02em;
	color: var(--black);
}

a {
	color: inherit;
	text-decoration: none;
}

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

button {
	font-family: inherit;
	border: none;
	background: none;
	cursor: pointer;
}

input,
textarea {
	font-family: inherit;
}


/* ─────────────── Accessibility helpers ─────────────── */
/* WordPress's standard skip-link in header.php uses .screen-reader-text.
   Without this rule, the link renders as visible inline text at the top
   of <body> and pushes everything below it (including #hero) down by
   ~24px, which on iPhone Safari shows as a black "gap" between the iOS
   status bar and the hero artwork. This pattern is the WP-recommended
   visually-hidden treatment: the link is fully accessible to screen
   readers and keyboard navigation but takes zero visual space. The
   `.skip-link:focus` rule reveals the link when keyboard-focused so
   sighted keyboard users can use it as intended. */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}

.skip-link:focus {
	background: #fff;
	clip: auto !important;
	clip-path: none;
	color: var(--black);
	display: block;
	font-size: 0.95rem;
	font-weight: 700;
	height: auto;
	left: 6px;
	line-height: normal;
	padding: 14px 22px;
	text-decoration: none;
	top: 7px;
	width: auto;
	z-index: 100000;
	border-radius: 8px;
	box-shadow: 0 6px 20px rgba(0,0,0,0.15);
}


/* ─────────────── Step 2 placeholder homepage + light/dark test sections ─────────────── */
/* Temporary styles — kept while we build the rest. Removed in Step 3.    */

/* ── Section 1: light placeholder (white background) ── */
.vertwo-step1-placeholder {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: var(--space-md);
	padding-top: 140px; /* clear the floating nav */
	padding-bottom: var(--space-lg);
	text-align: center;
	background: #FFFFFF;
}

.vertwo-step1-placeholder .logo-mark {
	width: 80px;
	height: auto;
	margin-bottom: var(--space-md);
}

.vertwo-step1-placeholder h1 {
	font-size: clamp(2.5rem, 6vw, 4.5rem);
	margin-bottom: var(--space-sm);
}

.vertwo-step1-placeholder h1 em {
	color: var(--orange);
	font-style: normal;
}

.vertwo-step1-placeholder .tagline {
	font-size: 1.125rem;
	color: #666;
	max-width: 540px;
	margin: 0 auto var(--space-lg);
}

.vertwo-step1-placeholder .status-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: var(--space-sm);
	max-width: 720px;
	width: 100%;
	margin-top: var(--space-md);
}

.vertwo-step1-placeholder .status-card {
	background: #f7f7f7;
	border: 1px solid #e8e8e8;
	border-radius: 12px;
	padding: var(--space-sm);
	text-align: left;
}

.vertwo-step1-placeholder .status-card .label {
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: #888;
	margin-bottom: 4px;
}

.vertwo-step1-placeholder .status-card .value {
	font-family: var(--font-title);
	font-weight: 700;
	font-size: 1rem;
	color: var(--black);
}

.vertwo-step1-placeholder .status-card.ok .value {
	color: #1f9d55;
}

.vw-scroll-hint {
	margin-top: var(--space-lg);
	font-size: 0.85rem;
	color: #999;
	letter-spacing: 0.04em;
	animation: vw-bob 2.4s ease-in-out infinite;
}

@keyframes vw-bob {
	0%, 100% { transform: translateY(0); opacity: 0.7; }
	50%      { transform: translateY(6px); opacity: 1; }
}


/* ── Section 2: dark mode test (data-bg="dark") ── */
.vw-test-dark {
	min-height: 100vh;
	background: #0a0a0a;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--space-lg) var(--space-md);
}

.vw-test-inner {
	max-width: 680px;
	text-align: center;
}

.vw-test-dark h2 {
	font-size: clamp(2rem, 5vw, 3.5rem);
	margin-bottom: var(--space-md);
	color: #fff;
}

.vw-test-light h2 {
	font-size: clamp(2rem, 5vw, 3.5rem);
	margin-bottom: var(--space-md);
	color: var(--black);
}

.vw-eyebrow {
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.55);
	margin-bottom: var(--space-sm);
}

.vw-eyebrow-orange {
	color: var(--orange);
}

.vw-body {
	font-size: 1.05rem;
	line-height: 1.65;
	color: rgba(255, 255, 255, 0.78);
	margin-bottom: var(--space-sm);
	max-width: 56ch;
	margin-left: auto;
	margin-right: auto;
}

.vw-body-dark {
	color: #444;
}

.vw-body strong {
	color: var(--orange);
	font-weight: 700;
}

.vw-body code {
	background: rgba(255, 255, 255, 0.08);
	padding: 2px 8px;
	border-radius: 5px;
	font-family: 'SF Mono', Menlo, Consolas, monospace;
	font-size: 0.9em;
	color: var(--gold);
}

.vw-body-dark code {
	background: #f0f0f0;
	color: var(--orange);
}

.vw-dim {
	opacity: 0.55;
	font-style: italic;
	margin-top: var(--space-md);
}

/* ── Section 3: light mode test (back to white) ── */
.vw-test-light {
	min-height: 100vh;
	background: #FFFFFF;
	color: var(--black);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--space-lg) var(--space-md);
}


/* ==========================================================================
   v0.32.41 — <em> brand convention (universal)
   --------------------------------------------------------------------------
   Editors mark accent words with <em> across every CMS / CPT text field.
   By default browsers render <em> italic, which Vic doesn't want — he
   wants <em> to mean "color this word in the brand orange":

     • Default everywhere: upright, orange. NOT italic.
     • In body / prose / caption / sub / blockquote / list contexts,
       <em> renders BOLD (700) on top of the default upright orange.
       The boost in weight is what makes the accent visible against
       body text where the base weight is 300–400.
     • Title contexts (h1–h4 + title-class scoped rules) inherit from
       the universal default — they get upright orange, then the
       parent heading's own font-weight (typically 900) propagates
       into the <em> automatically. No per-title override needed
       anymore (existing per-title `em { font-style:normal; color:
       var(--orange) }` rules in typography-system.css / page-about.css
       / works-archive.css continue to work and now act as
       belt-and-braces).

   Any caller that explicitly wants italic <em> (e.g. .cr-quote-body em
   on careers, which is also white + underlined as a quote treatment)
   already overrides with higher specificity. The cascade resolves
   correctly without needing changes elsewhere.
   ========================================================================== */

em {
	font-style: normal;
	color: var(--orange);
}

p em,
li em,
dd em,
blockquote em,
.ai-prose em,
.vmv-caption em,
.tc-caption em,
.kp-caption em,
.ms-caption em,
.pm-body em,
.pmo-body em,
.wg-body em,
.vt-header__sub em,
.vt-clients__sub em,
.wwu-sub em,
.faq-a em,
.fc-caption em,
[class*="-body"] em,
[class*="-sub"] em,
[class*="-caption"] em,
[class*="-prose"] em,
[class*="-desc"] em,
[class*="-lede"] em {
	font-weight: 700;
}