/* =============================================================================
   Raven Tech — main stylesheet
   Sections: tokens / fonts / base / typography / buttons / container /
   HEADER / HERO / SECTIONS / FOOTER / RESPONSIVE
   Phase 0 ships tokens, fonts, base, typography, buttons, and the container
   utility. The banner-commented section blocks below are placeholders for
   the chrome + page sections built in Phases 2–5.
   ========================================================================== */

/* -----------------------------------------------------------------------
   BROWSER SUPPORT — read before "tidying" the value syntax below.

   This theme supports Safari 12.1+, which forces two house conventions:

   1. `max(A, min(B, C))` instead of `clamp(A, B, C)`. Safari 11.1-13.0 ship
      min() and max() but not clamp(), and the two forms are exactly
      equivalent per spec. Fallback-first layering does NOT work for the
      custom properties below — a custom property accepts any token stream,
      so a later `clamp()` declaration always wins the cascade and then fails
      at var() substitution time, which silently resolves the whole property
      to 0. One canonical form is the only safe option.

   2. Physical longhands (padding-top/right/bottom/left, top/right/bottom/
      left) instead of the `padding-block`/`padding-inline`/`margin-block`/
      `margin-inline`/`inset` shorthands, which are Safari 14.1+. The site is
      LTR-only, so the logical forms bought nothing here anyway.

   Flexbox `gap` is kept as-is and backfilled with margins per file; see the
   LEGACY FALLBACK block at the bottom of each stylesheet.
   -------------------------------------------------------------------- */

/* ------------------------------------------------------------------ tokens */
:root {
	--rt-red:        #DC272D;
	--rt-red-mid:    #B6111B;
	--rt-red-deep:   #8A0914;
	--rt-gradient:   linear-gradient(90deg, #DC272D 0%, #B6111B 50%, #8A0914 100%);
	--rt-black:      #000000;
	--rt-white:      #FFFFFF;
	--rt-ink-soft:   rgba(0, 0, 0, 0.75);       /* body text on light */
	--rt-white-soft: rgba(255, 255, 255, 0.75); /* body text on dark  */
	--rt-hero-tint:  #EDF2FB;
	--rt-grey-box:   #F5F5F5;                   /* placeholder logo boxes */
	--rt-nav-bg:     rgba(255, 255, 255, 0.55);
	--rt-shadow:     0 4px 10px rgba(0, 0, 0, 0.10);
	--rt-shadow-nav: 0 2px 15px 5px rgba(0, 0, 0, 0.10);
	--rt-radius:     0 10px 0 10px;             /* notch motif: top-right + bottom-left */
	--rt-radius-btn: 0 5px 0 5px;
	--rt-font-heading: "gotham", "Montserrat", system-ui, sans-serif;
	--rt-font-body:    "gotham", "Montserrat", system-ui, sans-serif;
	--rt-max:        1195px;                    /* content width; 1440 design canvas, ~122px margins */
	--rt-gutter:     max(20px, min(4vw, 40px));

	/* Settings-driven section background photos (inc/enqueue.php overrides
	   these via an inline style block when Settings → Raven Tech has a value;
	   the theme fallback photos below keep every section looking finished
	   even with the Core plugin inactive). */
	--rt-whatwedo-bg:     url("../img/whatwedo-bg.jpg");
	--rt-map-bg:          none;
	--rt-testimonials-bg: url("../img/testimonials-bg.jpg");
	--rt-whoweserve-bg:   url("../img/whoweserve-bg.jpg");
}

/* ------------------------------------------------------------------- fonts */
/* Gotham Book (400) / Bold (700) ship via an Adobe Fonts kit once configured
   in inc/enqueue.php (RAVENTECH_TYPEKIT_KIT_URL). Montserrat is the local
   fallback baked into every build so the `--rt-font-*` stack always resolves
   to a real webfont — swapping in Gotham later needs no template changes. */
@font-face {
	font-family: "Montserrat";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/montserrat-v31-400.woff2") format("woff2");
}
@font-face {
	font-family: "Montserrat";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("../fonts/montserrat-v31-700.woff2") format("woff2");
}

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

/* `clip` is Safari 16+; older Safari ignores this line and can scroll a few
   pixels sideways. That is deliberate — the obvious fallback, `overflow-x:
   hidden`, turns the root into a scroll container and breaks the sticky nav,
   which is a much worse trade. Every section that can actually overflow
   (.rt-hero, .rt-whatwedo, .rt-map, .rt-testimonials, .rt-partners__marquee)
   clips itself, so this rule is only ever belt-and-braces. */
html, body { overflow-x: clip; }

body {
	margin: 0;
	background: var(--rt-white);
	color: var(--rt-ink-soft);
	font-family: var(--rt-font-body);
	font-weight: 400;
	font-size: 16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

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

h1, h2, h3, h4, h5, h6 {
	font-family: var(--rt-font-heading);
	font-weight: 700;
	color: var(--rt-black);
	line-height: 1.15;
	margin: 0 0 0.4em;
}

p { margin: 0 0 1em; }
a { color: inherit; }

button {
	font-family: inherit;
}

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

.rt-skip-link:focus {
	position: fixed; top: 8px; left: 8px; z-index: 999;
	width: auto; height: auto; margin: 0; padding: 10px 16px;
	clip: auto; white-space: normal;
	background: var(--rt-black); color: #fff; border-radius: 6px;
}

.rt-icon {
	width: 1em; height: 1em;
	display: inline-block;
	vertical-align: -0.12em;
	fill: none;
}

/* ------------------------------------------------------------- typography */
/* Design tokens (exact at the 1440px canvas): Title 66 / Subtitle 46 /
   Large Body 24 / Body 16 / Small Body 14 — all clamp() down responsively. */

.rt-title {
	font-family: var(--rt-font-heading);
	font-weight: 700;
	font-size: max(38px, min(4.6vw, 66px));
	line-height: 1.1;
	text-transform: uppercase;
	margin: 0 0 0.4em;
}

.rt-subtitle {
	font-family: var(--rt-font-heading);
	font-weight: 700;
	font-size: max(28px, min(3.2vw, 46px));
	line-height: 1.15;
	text-transform: uppercase;
	margin: 0 0 0.4em;
}

.rt-large {
	font-family: var(--rt-font-heading);
	font-weight: 700;
	font-size: max(20px, min(1.8vw, 24px));
	line-height: 1.3;
	margin: 0 0 0.4em;
}

.rt-body {
	font-family: var(--rt-font-body);
	font-weight: 400;
	font-size: 16px;
	line-height: 1.6;
	margin: 0 0 1em;
}

.rt-small {
	font-family: var(--rt-font-body);
	font-weight: 400;
	font-size: 14px;
	line-height: 1.5;
	margin: 0;
}

/* Gradient text accent — signature pattern; one phrase per heading, applied
   via raventech_grad_title() in inc/template-helpers.php. */
.rt-grad {
	background: var(--rt-gradient);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

/* ----------------------------------------------------------------- buttons */
.rt-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font: 400 16px/1.4 var(--rt-font-body);
	text-decoration: none;
	cursor: pointer;
	border: 0;
	padding: 10px 28px;
	border-radius: var(--rt-radius-btn);
	transition: filter 0.18s ease, background-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.rt-btn--gradient {
	background: var(--rt-gradient);
	color: var(--rt-white);
}
.rt-btn--gradient:hover { filter: brightness(0.9); transform: translateY(-1px); }

.rt-btn--black {
	background: var(--rt-black);
	color: var(--rt-white);
}
.rt-btn--black:hover { background: #1a1a1a; transform: translateY(-1px); }

.rt-btn--white {
	background: var(--rt-white);
	color: var(--rt-black);
}
.rt-btn--white:hover { background: var(--rt-grey-box); transform: translateY(-1px); }

/* --------------------------------------------------------------- container */
.rt-wrap {
	max-width: var(--rt-max);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--rt-gutter);
	padding-right: var(--rt-gutter);
}

.rt-prose { padding-top: 60px; padding-bottom: 60px; }

/* ================================================================= HEADER */
/* TODO (Phase 2): top bar (node 3:30) + nav bar (node 4:83) — sticky/scroll
   state, mobile drawer, translucent frosted nav background. */
.rt-header {
}

/* =================================================================== HERO */
/* TODO (Phase 3, section 1): homepage hero — node 4:86 / 133:29. */
.rt-hero {
}

/* =============================================================== SECTIONS */
/* TODO (Phase 3–5): trusted partners, what-we-do, interactive map,
   built-for-every-environment carousel, testimonials, CTA split, blog,
   services page sections, secondary page bodies. */
.rt-partners,
.rt-whatwedo,
.rt-map,
.rt-environment,
.rt-testimonials,
.rt-cta-split,
.rt-blog {
}

/* ================================================================= FOOTER */
/* TODO (Phase 2): certification strip + footer columns — node 7:542. */
.rt-footer {
}

/* ============================================================= RESPONSIVE */
/* TODO (Phase 6): nav → drawer ≤1024; card grids 4→2→1; split sections
   stack; map section stacks with map on top. Type scales via clamp() above
   already respond continuously, no breakpoints needed for those rules. */
@media (max-width: 1024px) {
}

@media (max-width: 768px) {
}

@media (max-width: 390px) {
}

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

/* =============================================================================
   LEGACY FALLBACK — flexbox `gap`
   `gap` only works on flex containers from Safari 14.1; before that it is
   ignored outright and every flex row/stack in this file collapses to zero
   spacing. WebKit shipped flex `gap` and the `inset` shorthand in the same
   release, so `@supports not (inset: 0)` is an exact probe for "this engine
   has no flex gap" on Safari (and only catches a few pre-2020 Chrome/Firefox
   builds, which get the same correct spacing anyway).

   Recipes below, matching each container's direction:
     column        -> `> * + *` margin-top
     row, no wrap  -> `> * + *` margin-left
     row + wrap    -> margin-bottom on every child + margin-right on all but
                      the last, with a negative margin-bottom on the container
                      cancelling the trailing row. Containers that are
                      themselves children of another wrapping container skip
                      that compensation, since their parent already sets
                      margin-bottom on them.
   Modern browsers never see any of this.
   ========================================================================== */
@supports not (inset: 0) {
	.rt-btn > * + * { margin-left: 8px; }
}