/* ==========================================================================
   RJL DESIGN SYSTEM — 02 BASE

   Element-level defaults and the type scale. Everything here is unclassed
   selectors plus the handful of WooCommerce/Elementor selectors that have to
   be pulled onto the scale, so that a page rendered by a plugin still obeys
   the same hierarchy as a page rendered by our own templates.

   That last point is the whole reason this file is aggressive about heading
   selectors: the site's pages come from four different renderers (our
   templates, Elementor, WooCommerce, ShopEngine/WooLentor) and without this
   they each impose their own sizes.
   ========================================================================== */

/* --------------------------------------------------------------------------
   RESET — narrow scope. Astra and WooCommerce already ship resets; piling a
   third on top causes more regressions than it fixes. This only normalises
   what the design system actually depends on.
   ----------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	scroll-behavior: smooth;
	/* Anchor targets clear the sticky header instead of hiding under it. */
	scroll-padding-top: calc(var(--rjl-header-h) + var(--rjl-space-md));
	/* body.rjl already hides horizontal overflow below, but that alone isn't
	   enough -- with only the body constrained, a fixed-position element still
	   mid-transition (the nav drawer sliding in from the right) can rubber-band
	   the whole viewport sideways on a swipe in iOS Safari. Hiding it here too
	   closes that gap. */
	/* clip, not hidden: overflow-x:hidden on html/body makes body a scroll
	   container, and position:sticky on the header then measures against a
	   box that never scrolls, so the sticky nav silently did nothing on
	   every page (found 2026-09-14). clip clips without creating a scroll
	   container. */
	overflow-x: clip;
}

/* `body.rjl` rather than bare `body`: Astra ships its own dynamic
   customizer stylesheet with a plain `body { background-color:
   var(--ast-global-color-8) } ` rule (an inherited Elementor-kit global
   colour, #000000) that loads after this file. Same selector, same
   specificity, so whichever one is later in the DOM wins the cascade —
   and it was winning, which is why every rjl-section that isn't marked
   .rjl-inverse was rendering dark ink text on a black page instead of
   this theme's actual paper background. `body.rjl` (the class this
   theme already adds to every page via rjl_body_class()) raises the
   selector's specificity one class above Astra's bare `body`, so this
   rule wins regardless of stylesheet load order. */
body.rjl {
	margin: 0;
	background-color: var(--rjl-bg);
	color: var(--rjl-text);
	font-family: var(--rjl-font-body);
	font-size: var(--rjl-text-base);
	font-weight: var(--rjl-weight-regular);
	line-height: var(--rjl-leading-body);
	letter-spacing: var(--rjl-track-normal);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-synthesis-weight: none;
	text-rendering: optimizeLegibility;
	overflow-x: clip;
}

/* Locks background scroll while the mobile nav drawer is open. */
body.rjl-scroll-locked {
	overflow: hidden;
	touch-action: none;
}

/* --------------------------------------------------------------------------
   TYPE SCALE
   Applied to bare elements AND to the class-based headings the page builders
   emit, so hierarchy survives whichever renderer produced the markup.
   ----------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6,
.rjl-h1, .rjl-h4,
.elementor-heading-title,
.woocommerce-loop-product__title,
.product_title,
.products-title,
.entry-title,
.widget-title {
	margin: 0 0 var(--rjl-space-sm);
	font-family: var(--rjl-font-display);
	color: var(--rjl-text);
	text-wrap: balance;      /* stops single-word orphans on headlines */
	font-synthesis-weight: none;
}

h1, .rjl-h1, .entry-title, .product_title {
	font-size: var(--rjl-text-4xl);
	font-weight: var(--rjl-weight-ultra);
	line-height: var(--rjl-leading-tight);
	letter-spacing: var(--rjl-track-display);
	text-transform: uppercase;
}

h2 {
	font-size: var(--rjl-text-3xl);
	font-weight: var(--rjl-weight-black);
	line-height: var(--rjl-leading-tight);
	letter-spacing: var(--rjl-track-display);
	text-transform: uppercase;
}

h3, .products-title, .widget-title {
	font-size: var(--rjl-text-2xl);
	font-weight: var(--rjl-weight-bold);
	line-height: var(--rjl-leading-snug);
	letter-spacing: var(--rjl-track-head);
}

h4, .rjl-h4 {
	font-size: var(--rjl-text-xl);
	font-weight: var(--rjl-weight-semi);
	line-height: var(--rjl-leading-snug);
	letter-spacing: var(--rjl-track-head);
}

h5, .woocommerce-loop-product__title {
	font-size: var(--rjl-text-lg);
	font-weight: var(--rjl-weight-semi);
	line-height: var(--rjl-leading-snug);
	letter-spacing: var(--rjl-track-normal);
}

h6 {
	font-size: var(--rjl-text-base);
	font-weight: var(--rjl-weight-semi);
	line-height: var(--rjl-leading-snug);
}

/* DISPLAY — one step above h1. Hero and section-opener use only. */
.rjl-display {
	font-family: var(--rjl-font-display);
	font-size: var(--rjl-text-5xl);
	font-weight: var(--rjl-weight-ultra);
	line-height: var(--rjl-leading-flat);
	letter-spacing: var(--rjl-track-display);
	text-transform: uppercase;
	text-wrap: balance;
	margin: 0;
}

/* --------------------------------------------------------------------------
   PROSE
   ----------------------------------------------------------------------- */
p {
	margin: 0 0 var(--rjl-space-md);
	max-width: var(--rjl-measure);
	text-wrap: pretty;       /* avoids orphans without the reflow cost of balance */
}
p:last-child { margin-bottom: 0; }

/* Lede — the opening paragraph of a section. */
.rjl-lede {
	font-size: var(--rjl-text-md);
	line-height: var(--rjl-leading-loose);
	color: var(--rjl-text-muted);
	max-width: var(--rjl-measure);
}

strong, b { font-weight: var(--rjl-weight-semi); }
em, i     { font-style: italic; }

small {
	font-size: var(--rjl-text-sm);
	color: var(--rjl-text-muted);
}

/* --------------------------------------------------------------------------
   LABEL / EYEBROW
   Small caps in the primary face. Used for section numbering, categories and
   metadata. Positive tracking, which small uppercase type needs to stay
   legible.
   ----------------------------------------------------------------------- */
.rjl-label {
	display: inline-block;
	font-family: var(--rjl-font-mono);
	font-size: var(--rjl-text-xs);
	font-weight: var(--rjl-weight-bold);
	letter-spacing: var(--rjl-track-label);
	text-transform: uppercase;
	color: var(--rjl-text-muted);
	line-height: 1.4;
}

/* Accent as a small-text label on a LIGHT ground uses the darkened ink weight
   (4.97:1). The .rjl-inverse cascade puts it back to the full accent on dark
   grounds, where #ff4400 already measures 5.69:1. */
.rjl-label--accent { color: var(--rjl-accent-ink); }

/* --------------------------------------------------------------------------
   SECONDARY DISPLAY FACE
   The brand book pairs Helvetica Neue Bold with Baskerville Italic for
   "key header and large text" ("Beat the norm", "Sit down / Listen up").
   On the site that role is the eyebrow above a section title and the hero
   kicker: sentence case, italic, no tracking, one size up from body.
   ----------------------------------------------------------------------- */
.rjl-section-head__label,
.rjl-hero__label,
.rjl-page-head__label {
	font-family: var(--rjl-font-serif);
	font-style: italic;
	font-weight: var(--rjl-weight-regular);
	font-size: var(--rjl-text-lg);
	letter-spacing: 0;
	text-transform: none;
	line-height: 1.2;
}

/* Numerals in catalogue contexts: prices, SKUs, dates, counts. */
.rjl-numeric {
	font-family: var(--rjl-font-mono);
	font-variant-numeric: tabular-nums;
	letter-spacing: var(--rjl-track-mono);
}

/* --------------------------------------------------------------------------
   LINKS
   ----------------------------------------------------------------------- */
a {
	color: inherit;
	text-decoration-color: var(--rjl-accent);
	text-underline-offset: 0.18em;
	text-decoration-thickness: 1px;
	transition: color var(--rjl-dur-fast) var(--rjl-ease-out),
	            text-decoration-color var(--rjl-dur-fast) var(--rjl-ease-out);
}
a:hover { color: var(--rjl-accent-ink); }

/* Prose links stay underlined — in running text, colour alone is not an
   accessible affordance. */
.rjl-prose a {
	text-decoration: underline;
	text-decoration-thickness: 1px;
}
.rjl-prose a:hover { text-decoration-thickness: 2px; }

/* --------------------------------------------------------------------------
   FOCUS
   One visible ring everywhere, on the token accent, using :focus-visible so
   it appears for keyboard users without ringing every mouse click.
   ----------------------------------------------------------------------- */
:focus-visible {
	outline: 3px solid var(--rjl-accent);
	outline-offset: 2px;
	border-radius: var(--rjl-radius-xs);
}
:focus:not(:focus-visible) { outline: none; }

/* --------------------------------------------------------------------------
   MEDIA
   ----------------------------------------------------------------------- */
img, picture, video, canvas, svg {
	display: block;
	max-width: 100%;
	height: auto;
}

figure { margin: 0; }

figcaption {
	margin-top: var(--rjl-space-2xs);
	font-size: var(--rjl-text-sm);
	color: var(--rjl-text-muted);
}

/* --------------------------------------------------------------------------
   LISTS
   ----------------------------------------------------------------------- */
ul, ol { margin: 0 0 var(--rjl-space-md); padding-left: 1.25em; }
li { margin-bottom: var(--rjl-space-2xs); }
li:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   RULES, QUOTES, CODE
   ----------------------------------------------------------------------- */
hr {
	border: 0;
	border-top: var(--rjl-border) solid var(--rjl-rule);
	margin: var(--rjl-space-xl) 0;
}

blockquote {
	margin: var(--rjl-space-lg) 0;
	padding-left: var(--rjl-space-md);
	border-left: var(--rjl-border-brut) solid var(--rjl-ink-950);
	font-family: var(--rjl-font-serif);
	font-style: italic;
	font-size: var(--rjl-text-2xl);
	font-weight: var(--rjl-weight-regular);
	line-height: var(--rjl-leading-snug);
	letter-spacing: var(--rjl-track-head);
}
blockquote cite {
	display: block;
	margin-top: var(--rjl-space-sm);
	font-family: var(--rjl-font-mono);
	font-size: var(--rjl-text-xs);
	font-style: normal;
	letter-spacing: var(--rjl-track-label);
	text-transform: uppercase;
	color: var(--rjl-text-muted);
}

code, kbd, samp, pre {
	font-family: var(--rjl-font-mono);
	font-size: 0.9em;
}

/* --------------------------------------------------------------------------
   TABLES — base only; cart/order tables are styled in the commerce layer.
   ----------------------------------------------------------------------- */
table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--rjl-text-base);
}
th {
	text-align: left;
	font-family: var(--rjl-font-mono);
	font-size: var(--rjl-text-xs);
	font-weight: var(--rjl-weight-bold);
	letter-spacing: var(--rjl-track-label);
	text-transform: uppercase;
	color: var(--rjl-text-muted);
	padding: var(--rjl-space-sm) var(--rjl-space-xs);
	border-bottom: var(--rjl-border-heavy) solid var(--rjl-text);
}
td {
	padding: var(--rjl-space-sm) var(--rjl-space-xs);
	border-bottom: var(--rjl-border) solid var(--rjl-rule);
	vertical-align: middle;
}


/* --------------------------------------------------------------------------
   SELECTION
   ----------------------------------------------------------------------- */
::selection {
	background: var(--rjl-accent);
	color: var(--rjl-on-accent);
}

/* SKIP LINK — removed. Astra emits its own (.skip-link.screen-reader-text) in
   its header.php, and that one is restyled onto the tokens in rjl-content.css.
   The RJL version existed for the XStore build, which owned header.php. */

/* --------------------------------------------------------------------------
   SCREEN-READER ONLY
   ----------------------------------------------------------------------- */
.rjl-sr-only {
	position: absolute;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* --------------------------------------------------------------------------
   SCROLL-IN REVEAL
   Progressive enhancement: without JS, or with reduced motion, content is
   simply visible. The .rjl-reveal class is only added by script once it has
   confirmed IntersectionObserver support, so there is no
   invisible-content-on-failure trap.
   ----------------------------------------------------------------------- */
.rjl-reveal {
	opacity: 0;
	transform: translate3d(0, 18px, 0);
	transition: opacity var(--rjl-dur-slow) var(--rjl-ease-out),
	            transform var(--rjl-dur-slow) var(--rjl-ease-out);
	will-change: opacity, transform;
}
.rjl-reveal.is-in {
	opacity: 1;
	transform: translate3d(0, 0, 0);
}

@media (prefers-reduced-motion: reduce) {
	.rjl-reveal { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   ELEMENTOR TYPOGRAPHY GUARD
   Elementor's per-post generated CSS (post-3204.css on Checkout, and the
   kit) still carries font-family: "Helvetica neue" with NO fallback, a
   leftover from the retired Custom Fonts setup. On a machine without that
   family installed (every Windows and Android device) the browser drops
   to its default serif, so the checkout order table rendered in Times.
   Text-bearing elements inside any Elementor widget are pinned to the
   brand stack; icon-font spans are excluded so Font Awesome and Elementor
   icons keep their glyphs.
   ----------------------------------------------------------------------- */
.elementor-widget-container :is(p, td, th, label, li, a, h1, h2, h3, h4, h5, h6, input, select, textarea, button, legend, dt, dd, span:not([class*="fa-"]):not([class*="eicon"]):not([class*="icon"]):not(.ht-product-action-tooltip)) {
	font-family: var(--rjl-font-body) !important;
}

/* Sticky header offsets for the WordPress admin bar (logged-in editors). */
.admin-bar .rjl-header {
	top: 32px;
}
@media (max-width: 782px) {
	.admin-bar .rjl-header {
		top: 46px;
	}
}