/* NOTE: this theme sets html{font-size:62.5%} so 1rem = 10px, not 16px.
 * Sizes below are therefore in px on purpose - rem values silently rendered
 * at ~62%% of their intended size (a 1.12rem sub-headline came out at 11.2px,
 * smaller than body text). Do not "tidy" these back into rem.
 * KJONGSys 2026-08-10. */
/**
 * Press Sheet - site-wide identity layer.
 *
 * Extends the Where We've Worked concept to the whole site, on the PAPER ground
 * rather than the ink one: a press sheet is paper, and product photography and
 * forms stay legible. The dark treatment stays reserved for editorial pages.
 *
 * SCOPING, deliberate and important:
 *   - Chrome (topbar, header, nav, page title, footer) is styled GLOBALLY, so
 *     there is no visual seam when a visitor crosses into the store.
 *   - Typeface is set globally too, for consistency.
 *   - Everything opinionated - type scale, buttons, links, section furniture -
 *     is scoped to body.kj-press, which functions.php withholds from
 *     WooCommerce, cart, checkout, account and the Dokan vendor dashboard.
 *     Those are being rebuilt with the 4over storefront, so they are left alone.
 *
 * KJONGSys 2026-08-10.
 */

:root {
	--kj-paper:     #f2ede3;
	--kj-paper-2:   #e9e3d6;
	--kj-ink:       #14151a;
	--kj-ink-2:     #3d3f47;
	--kj-ink-soft:  #57595f; /* was #6b6d76: only used by .sow-sub-headline (18px/400 = body text, needs 4.5:1) and it was 3.90:1 on the About page parallax rows grey #e0e0e0 and 4.42:1 on paper. #57595f is 5.30:1 on that grey and 6.00:1 on paper, still clearly softer than the ink headline at 15.62:1. Verified all 3 sub-headlines sitewide sit on LIGHT grounds, so darkening cannot backfire. */
	--kj-cyan:      #25bce9;
	--kj-magenta:   #e0407f;
	--kj-yellow:    #f5d327;
	--kj-rule:      rgba(20, 21, 26, .14);
	--kj-rule-soft: rgba(20, 21, 26, .07);

	--kj-display: 'Big Shoulders Display', 'Bahnschrift Condensed', 'Franklin Gothic Medium', Impact, sans-serif;
	--kj-body:    'IBM Plex Sans', 'Segoe UI', Helvetica, Arial, sans-serif;
	--kj-mono:    'IBM Plex Mono', Consolas, monospace;
}

/* the CMYK register bar, reused as the signature rule in header and footer */
.kj-cmyk-bar {
	background-image: linear-gradient(
		90deg,
		var(--kj-cyan)    0 25%,
		var(--kj-magenta) 25% 50%,
		var(--kj-yellow)  50% 75%,
		var(--kj-paper)   75% 100%
	);
}

/* ===========================================================================
   1. TYPEFACE, global
   Family only. Sizes stay put outside .kj-press so store layouts cannot reflow.
   =========================================================================== */

body,
button,
input,
select,
textarea {
	font-family: var(--kj-body);
}

h1, h2, h3, h4, h5, h6,
.widget-title,
.page-entry-title {
	font-family: var(--kj-display);
	letter-spacing: -.005em;
}

/* ===========================================================================
   2. CHROME, global
   =========================================================================== */

/* --- top bar --- */
#topbar.site-topbar {
	position: relative;
	background: var(--kj-ink);
	color: var(--kj-paper);
	border: 0;
}
#topbar.site-topbar::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 5px;
	background-image: linear-gradient(
		90deg,
		var(--kj-cyan)    0 25%,
		var(--kj-magenta) 25% 50%,
		var(--kj-yellow)  50% 75%,
		var(--kj-paper)   75% 100%
	);
}
#topbar.site-topbar,
#topbar.site-topbar a,
#topbar.site-topbar span,
#topbar.site-topbar p {
	font-family: var(--kj-mono);
	font-size: 12px;
	letter-spacing: .12em;
}
#topbar.site-topbar a { color: var(--kj-cyan); }
#topbar.site-topbar a:hover { color: var(--kj-paper); }

/* --- header: paper, replacing the Slider Revolution background image --- */
.site-header .header-wrap,
.site-header.bg-trans .header-wrap {
	background-color: var(--kj-paper) !important;
	background-image: none !important;
	border-bottom: 1px solid var(--kj-rule);
}

/* nav links are white in the stock theme because they sat on that dark image.
   On paper they would be invisible, so this override is not cosmetic. */
.mega-menu-wrap .mega-menu a.mega-menu-link,
.mega-menu-wrap .mega-menu > li > a.mega-menu-link,
.site-header .header-wrap a {
	color: var(--kj-ink) !important;
	font-family: var(--kj-display) !important;
	font-weight: 600 !important;
	text-transform: uppercase !important;
	letter-spacing: .06em !important;
	font-size: 17px !important;
}
.mega-menu-wrap .mega-menu > li > a.mega-menu-link:hover,
.mega-menu-wrap .mega-menu > li.mega-current-menu-item > a.mega-menu-link,
.mega-menu-wrap .mega-menu > li.mega-toggle-on > a.mega-menu-link {
	color: var(--kj-cyan) !important;
	background: transparent !important;
}

/* submenus stay on paper so they read against the new header */
.mega-menu-wrap .mega-sub-menu {
	background: var(--kj-paper) !important;
	border: 1px solid var(--kj-rule) !important;
	box-shadow: 6px 6px 0 rgba(20, 21, 26, .07) !important;
}
.mega-menu-wrap .mega-sub-menu a.mega-menu-link {
	font-size: 14px !important;
	letter-spacing: .05em !important;
}
.mega-menu-wrap .mega-sub-menu a.mega-menu-link:hover {
	color: var(--kj-cyan) !important;
	background: var(--kj-paper-2) !important;
}

/* mobile toggle */
.mega-menu-wrap .mega-menu-toggle {
	background: transparent !important;
}
.mega-menu-wrap .mega-menu-toggle .mega-toggle-animated-inner,
.mega-menu-wrap .mega-menu-toggle .mega-toggle-animated-inner::before,
.mega-menu-wrap .mega-menu-toggle .mega-toggle-animated-inner::after {
	background-color: var(--kj-ink) !important;
}

/* cart + search icons */
.header-cart-search a,
.header-search a,
.header-cart-search i,
.header-search i {
	color: var(--kj-ink);
}
.header-cart-search .cart-number,
.header-cart-search .count {
	background: var(--kj-cyan);
	color: var(--kj-ink);
}

/* --- page title bar, restyled as a printer's slug line --- */
.page-title-wrap {
	background: var(--kj-paper-2);
	border-bottom: 1px solid var(--kj-rule);
	border-top: 1px solid var(--kj-rule-soft);
	padding: 26px 0;
}
.page-title-wrap h1.page-entry-title {
	color: var(--kj-ink);
	font-family: var(--kj-display);
	font-weight: 800;
	font-size: clamp(27px, 4vw, 42px);
	line-height: 1;
	text-transform: uppercase;
	letter-spacing: -.01em;
	margin: 0;
}

/* --- footer: stays ink, gains the register bar and the display face --- */
#colophon.site-footer {
	position: relative;
	background: var(--kj-ink);
	color: #9a9ca4;
}
#colophon.site-footer::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 5px;
	background-image: linear-gradient(
		90deg,
		var(--kj-cyan)    0 25%,
		var(--kj-magenta) 25% 50%,
		var(--kj-yellow)  50% 75%,
		var(--kj-paper)   75% 100%
	);
}
#colophon .widget-title {
	color: var(--kj-paper);
	font-family: var(--kj-display);
	font-weight: 800;
	font-size: 22px;
	text-transform: uppercase;
	letter-spacing: .02em;
}
#colophon .textwidget,
#colophon p,
#colophon li {
	font-family: var(--kj-body);
	font-size: 14.5px;
	line-height: 1.7;
	color: #9a9ca4;
}
#colophon a { color: var(--kj-cyan); }
#colophon a:hover { color: var(--kj-paper); }
.site-info-wrapper {
	background: #0f1014;
	border-top: 1px solid rgba(242, 237, 227, .08);
}
.site-info-wrapper .copy_text {
	font-family: var(--kj-mono);
	font-size: 11px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: #6b6d76;
}

/* ===========================================================================
   3. MARKETING PAGES ONLY (body.kj-press)
   Withheld from WooCommerce / cart / checkout / account / Dokan by functions.php
   =========================================================================== */

body.kj-press {
	background-color: var(--kj-paper);
}

/* paper ground + halftone. Applied as a background rather than an overlay so
   there is no stacking-context fight with the theme's positioned elements. */
body.kj-press #content-wrap {
	background-color: var(--kj-paper);
	background-image: radial-gradient(rgba(20, 21, 26, .055) 1px, transparent 1.1px);
	background-size: 5px 5px;
	padding-top: 46px;
	padding-bottom: 56px;
}

body.kj-press #content-wrap,
body.kj-press .entry-content,
body.kj-press .entry-content p,
body.kj-press .textwidget,
body.kj-press .textwidget p {
	font-family: var(--kj-body);
	font-size: 16.5px;
	line-height: 1.68;
	color: var(--kj-ink-2);
}

body.kj-press .entry-content h1,
body.kj-press .entry-content h2,
body.kj-press .entry-content h3,
body.kj-press .entry-content h4,
body.kj-press .so-widget-sow-headline h1,
body.kj-press .so-widget-sow-headline h2,
body.kj-press .so-widget-sow-headline h3 {
	font-family: var(--kj-display);
	font-weight: 800;
	text-transform: uppercase;
	line-height: .98;
	letter-spacing: -.012em;
	color: var(--kj-ink);
}
body.kj-press .entry-content h1 { font-size: clamp(35px, 5.5vw, 58px); }
body.kj-press .entry-content h2 { font-size: clamp(29px, 4.2vw, 43px); }
body.kj-press .entry-content h3 { font-size: clamp(22px, 3vw, 30px); }

/* the thin cyan rule under section headings, carried from the dark page */
body.kj-press .entry-content h2::after {
	content: "";
	display: block;
	width: 68px;
	height: 3px;
	margin-top: 14px;
	background: var(--kj-cyan);
}

body.kj-press .entry-content a {
	color: #136A85;
	text-decoration: underline;
	text-underline-offset: 2px;
	text-decoration-thickness: 1px;
}
body.kj-press .entry-content a:hover { color: #b81f5b; }

body.kj-press .entry-content strong { color: var(--kj-ink); font-weight: 600; }

body.kj-press blockquote {
	border-left: 3px solid var(--kj-cyan);
	background: var(--kj-paper-2);
	padding: 18px 24px;
	font-family: var(--kj-body);
	color: var(--kj-ink);
}

body.kj-press hr { border: 0; border-top: 1px solid var(--kj-rule); }

/* --- buttons: square, hard offset shadow, ink/paper invert on hover --- */
body.kj-press .btn,
body.kj-press .button,
body.kj-press button[type="submit"],
body.kj-press input[type="submit"],
body.kj-press .wpcf7-submit {
	display: inline-block;
	background: transparent;
	color: var(--kj-ink);
	border: 2px solid var(--kj-ink);
	border-radius: 0;
	padding: 13px 26px;
	font-family: var(--kj-display);
	font-weight: 800;
	font-size: 17px;
	text-transform: uppercase;
	letter-spacing: .05em;
	line-height: 1.1;
	text-decoration: none;
	box-shadow: none;
	transition: background .18s, color .18s, transform .18s, box-shadow .18s;
}
body.kj-press .btn:hover,
body.kj-press .button:hover,
body.kj-press button[type="submit"]:hover,
body.kj-press input[type="submit"]:hover,
body.kj-press .wpcf7-submit:hover {
	background: var(--kj-ink);
	color: var(--kj-paper);
	transform: translate(-2px, -2px);
	box-shadow: 5px 5px 0 var(--kj-cyan);
}

/* --- forms (contact page) --- */
body.kj-press input[type="text"],
body.kj-press input[type="email"],
body.kj-press input[type="tel"],
body.kj-press input[type="url"],
body.kj-press select,
body.kj-press textarea {
	background: #fbf9f5;
	border: 1px solid var(--kj-rule);
	border-radius: 0;
	padding: 12px 14px;
	font-family: var(--kj-body);
	font-size: 15.5px;
	color: var(--kj-ink);
}
body.kj-press input[type="text"]:focus,
body.kj-press input[type="email"]:focus,
body.kj-press input[type="tel"]:focus,
body.kj-press select:focus,
body.kj-press textarea:focus {
	outline: 0;
	border-color: var(--kj-cyan);
	box-shadow: 0 0 0 3px rgba(37, 188, 233, .18);
}

/* --- SiteOrigin rows get breathing room and a paper ground --- */
body.kj-press .panel-grid { margin-bottom: 0; }
body.kj-press .so-panel { margin-bottom: 26px; }

/* registration marks on the widest marketing pages, decorative only */
@media (min-width: 1100px) {
	body.kj-press #content-wrap {
		position: relative;
	}
	body.kj-press #content-wrap::before,
	body.kj-press #content-wrap::after {
		content: "";
		position: absolute;
		top: 16px;
		width: 22px;
		height: 22px;
		border: 1px solid var(--kj-rule);
		border-radius: 50%;
		pointer-events: none;
	}
	body.kj-press #content-wrap::before { left: 10px; }
	body.kj-press #content-wrap::after  { right: 10px; }
}

@media (max-width: 782px) {
	body.kj-press #content-wrap { padding-top: 28px; padding-bottom: 34px; }
	.page-title-wrap { padding: 18px 0; }
}

/* ===========================================================================
   4. SITEORIGIN WIDGET OVERRIDES
   SiteOrigin emits per-widget CSS in an inline <style> block, e.g.
   .so-widget-sow-headline-default-<hash> h1.sow-headline { font-family: ... },
   which outspecifies a plain stylesheet. Some headline widgets on this site
   carry a hardcoded "Helvetica Neue" that way and some do not, so headings were
   coming out in two different faces on the same page. !important is the
   proportionate fix here; the alternative is editing every widget by hand.
   =========================================================================== */

body.kj-press .sow-headline,
body.kj-press h1.sow-headline,
body.kj-press h2.sow-headline,
body.kj-press h3.sow-headline {
	font-family: var(--kj-display) !important;
	font-weight: 800 !important;
	text-transform: uppercase !important;
	line-height: .98 !important;
	letter-spacing: -.012em !important;
}

body.kj-press .sow-sub-headline,
body.kj-press h3.sow-sub-headline,
body.kj-press h4.sow-sub-headline {
	font-family: var(--kj-body) !important;
	font-weight: 400 !important;
	text-transform: none !important;
	font-size: 18px !important;
	line-height: 1.55 !important;
	letter-spacing: 0 !important;
	color: var(--kj-ink-soft) !important;
}

/* the headline widget draws its own divider; retune it to the press palette */
body.kj-press .sow-headline-container .decoration-inner,
body.kj-press .sow-headline-container hr {
	border-color: var(--kj-cyan) !important;
	background: var(--kj-cyan) !important;
}

/* ===========================================================================
   5. TEXT OVER PHOTOGRAPHY
   The hero rows put headings straight onto a photo. Measured mean brightness of
   the About hero is ~117/255, a mid-tone, so the theme's original #444 heading
   sat at roughly 2.2:1 - below WCAG AA even for large text. Ink on a paper
   scrim takes it past 12:1 and reads as ink printed over a ghosted image, which
   is on-concept rather than a compromise.
   =========================================================================== */

body.kj-press .sow-slider-image,
body.kj-press .so-widget-sow-hero .sow-slider-image {
	position: relative;
}
body.kj-press .sow-slider-image::after {
	content: "";
	position: absolute;
	inset: 0;
	background-color: rgba(242, 237, 227, .78);
	background-image: radial-gradient(rgba(20, 21, 26, .06) 1px, transparent 1.1px);
	background-size: 5px 5px;
	pointer-events: none;
	z-index: 0;
}
/* lift the actual content above the scrim */
body.kj-press .sow-slider-image-container,
body.kj-press .sow-slider-image-wrapper {
	position: relative;
	z-index: 1;
}
body.kj-press .sow-slider-image-wrapper h1,
body.kj-press .sow-slider-image-wrapper h2,
body.kj-press .sow-slider-image-wrapper h3,
body.kj-press .sow-slider-image-wrapper p {
	color: var(--kj-ink) !important;
	text-shadow: none !important;
}
body.kj-press .sow-slider-image-wrapper h1 {
	font-family: var(--kj-display) !important;
	font-weight: 900 !important;
	text-transform: uppercase !important;
	font-size: clamp(38px, 6vw, 67px) !important;
	line-height: .95 !important;
}

/* hero buttons sit on the scrim, so give them the ink treatment too */
body.kj-press .sow-slider-image-wrapper a.sow-button,
body.kj-press .sow-slider-image-wrapper .sow-hero-button {
	background: var(--kj-ink) !important;
	color: var(--kj-paper) !important;
	border: 2px solid var(--kj-ink) !important;
	border-radius: 0 !important;
	font-family: var(--kj-display) !important;
	font-weight: 800 !important;
	text-transform: uppercase !important;
	letter-spacing: .05em !important;
	box-shadow: none !important;
	text-shadow: none !important;
}
body.kj-press .sow-slider-image-wrapper a.sow-button:hover {
	background: transparent !important;
	color: var(--kj-ink) !important;
	box-shadow: 5px 5px 0 var(--kj-cyan) !important;
}

/* ---------------------------------------------------------------------------
 * The theme's .page-title-wrap .page-entry-title.left is specificity 0,3,0 and
 * was outranking the 0,2,1 rule in section 2. Matching the .left class takes
 * this to 0,3,1 and wins on merit rather than with !important.
 * It also carries float:left + margin, which the new bar does not want.
 * ------------------------------------------------------------------------- */
.page-title-wrap h1.page-entry-title,
.page-title-wrap h1.page-entry-title.left {
	color: var(--kj-ink);
	font-family: var(--kj-display);
	font-weight: 800;
	font-size: clamp(27px, 4vw, 42px);
	line-height: 1;
	text-transform: uppercase;
	letter-spacing: -.01em;
	margin: 0;
	float: none;
}

/* ---------------------------------------------------------------------------
 * Mobile menu panel.
 * MegaMenu drops a DARK panel (#282828) below 768px, so its white links are
 * correct there and must stay white - do NOT extend the ink link colour from
 * section 2 into this breakpoint or the menu goes invisible. Only the panel
 * colour and the typeface are harmonised.
 * MegaMenu's own rules are ID-based AND !important, so matching that weight is
 * required; class selectors lose here even with !important.
 * ------------------------------------------------------------------------- */
@media screen and (max-width: 768px) {
	#mega-menu-wrap-primary #mega-menu-primary {
		background: var(--kj-ink) !important;
	}
	#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link {
		font-family: var(--kj-display) !important;
		font-weight: 600 !important;
		text-transform: uppercase !important;
		letter-spacing: .06em !important;
		font-size: 18px !important;
		border-bottom: 1px solid rgba(242, 237, 227, .1) !important;
	}
	#mega-menu-wrap-primary #mega-menu-primary li.mega-menu-item a.mega-menu-link:hover {
		color: var(--kj-cyan) !important;
	}
}

/* The theme hides its boilerplate heading with a TAG-QUALIFIED rule
 * (h1.h1-hidden). The child theme's header-logoleft.php demotes that element to
 * a <p> so each page has a single h1, which would leave it visible - so repeat
 * the hide without the tag. Removing this makes "PRINT CARDS" appear at the top
 * of every page. */
.h1-hidden {
	height: 0;
	position: absolute;
	left: -9999px;
	overflow: hidden;
}

/* ---------------------------------------------------------------------------
 * HOME PAGE HEADER.
 * On the front page the theme floats the header over the slider and paints it
 * with a translucent DARK overlay via
 *   body.home header#masthead.bg-trans .header-wrap { background: rgba(42,52,61,.43) !important }
 * which is specificity 1,3,2 + !important and beat the 0,3,0 rule in section 2.
 * The result was ink nav text sitting on a dark photo - unreadable.
 *
 * Matching that weight exactly (and winning the tie by load order) gives the
 * front page the same solid paper bar as every other page: consistent chrome,
 * and the nav is legible over any slide. Also covers .fixed-on, the sticky
 * state, which carries its own grey.
 * ------------------------------------------------------------------------- */
body.home header#masthead.bg-trans .header-wrap,
body.home header#masthead.fixed-on .header-wrap,
body header#masthead.fixed-on .header-wrap,
body header#masthead.bg-trans .header-wrap {
	background: var(--kj-paper) !important;
	background-image: none !important;
	border-bottom: 1px solid var(--kj-rule) !important;
}

/* ---------------------------------------------------------------------------
 * NAV ACTIVE + HOVER STATE, accessibility fix.
 * Section 2 coloured the current/hovered item cyan. Cyan (#25bce9) on the cream
 * paper ground is only 1.9:1 - the "Home" item was effectively unreadable.
 * Even the darkened #0f8fb8 only reaches ~3.2:1, and this nav is 17px bold,
 * which is NOT "large text" under WCAG, so it needs 4.5:1.
 *
 * So the indicator moves off the text: ink stays (15.6:1) and the cyan becomes
 * an inset underline bar, which also reads as a register mark. Inset box-shadow
 * rather than border-bottom so nothing shifts on hover.
 * ------------------------------------------------------------------------- */
.mega-menu-wrap .mega-menu > li > a.mega-menu-link:hover,
.mega-menu-wrap .mega-menu > li.mega-current-menu-item > a.mega-menu-link,
.mega-menu-wrap .mega-menu > li.mega-current-menu-ancestor > a.mega-menu-link,
.mega-menu-wrap .mega-menu > li.mega-toggle-on > a.mega-menu-link {
	color: var(--kj-ink) !important;
	background: transparent !important;
	box-shadow: inset 0 -3px 0 var(--kj-cyan) !important;
}

/* submenu sits on paper too, so the same reasoning applies there */
.mega-menu-wrap .mega-sub-menu a.mega-menu-link:hover,
.mega-menu-wrap .mega-sub-menu li.mega-current-menu-item > a.mega-menu-link {
	color: var(--kj-ink) !important;
	background: var(--kj-paper-2) !important;
	box-shadow: inset 3px 0 0 var(--kj-cyan) !important;
}

/* ---------------------------------------------------------------------------
 * HEADER CART + SEARCH ICONS.
 * These are icon-font glyphs drawn by ::before on <i class="nbt-icon-...">,
 * and the theme colours the PSEUDO-ELEMENT white for its original dark header.
 * The earlier rule in section 2 only coloured the parent <i>, so the glyphs
 * stayed white and vanished against the paper header.
 * Colour the ::before as well, and give the cart count a real badge.
 * ------------------------------------------------------------------------- */
.header-cart-search i,
.header-cart-search i::before,
.header-search i,
.header-search i::before,
.header-cart-search a,
.header-search a,
.nbt-ajax-cart-icon i,
.nbt-ajax-cart-icon i::before,
.nas-icon-click,
.nas-icon-click i,
.nas-icon-click i::before,
.nbt-icon-search,
.nbt-icon-search::before,
.nbt-icon-basket-4,
.nbt-icon-basket-4::before {
	color: var(--kj-ink) !important;
}

.header-cart-search a:hover i,
.header-cart-search a:hover i::before,
.nas-icon-click:hover,
.nas-icon-click:hover i,
.nas-icon-click:hover i::before {
	color: #0f8fb8 !important;
}

/* the little quantity bubble: cyan chip, ink numeral */
.nbt-ajax-cart-count,
.header-cart-search .nbt-ajax-cart-count {
	background: var(--kj-cyan) !important;
	color: var(--kj-ink) !important;
	border: 0 !important;
	font-family: var(--kj-mono) !important;
	font-weight: 600 !important;
	font-size: 10px !important;
}

/* the search overlay sits on paper too */
.nas-wrapper .nas-layout-overlay svg path { fill: var(--kj-ink); }

/* The cart bubble's white is set by .nbt-ajax-cart .nbt-ajax-cart-icon
 * .nbt-ajax-cart-count (0,3,0 + !important), which beat the 0,2,0 rule above -
 * leaving a white disc on the cream header. Match the weight exactly. */
.nbt-ajax-cart .nbt-ajax-cart-icon .nbt-ajax-cart-count {
	/* the brand cyan is only 1.9:1 against the cream header, under the 3:1 that
	 * WCAG 1.4.11 asks of a non-text UI component, so the chip uses the darker
	 * cyan: 3.2:1 against the header, and the ink numeral on it is 5.0:1. */
	background: #0f8fb8 !important;
	color: var(--kj-ink) !important;
	border: 0 !important;
}

/* ---------------------------------------------------------------------------
 * BACK-TO-TOP BUTTON (#btt) - missing glyph.
 * The markup is FontAwesome 4 syntax, <i class="fa fa-chevron-up">, but a
 * plugin loads FontAwesome 6, whose '.fa' rule wins and maps the element to
 * "Font Awesome 6 Free". In FA6 that family is split by weight and chevron-up
 * exists ONLY in the Solid face (900); the FA4 markup sets no weight, so it
 * rendered in Regular, where the glyph is absent - hence the empty box.
 * Pinning weight 900 selects the Solid face and the chevron appears.
 * ------------------------------------------------------------------------- */
#btt i.fa,
#btt .fa-chevron-up {
	font-family: "Font Awesome 6 Free", FontAwesome, sans-serif !important;
	font-weight: 900 !important;
	font-style: normal !important;
}

/* and dress the button as an ink chip so it belongs to the press sheet */
#btt {
	background: var(--kj-ink) !important;
	color: var(--kj-paper) !important;
	border: 0 !important;
	border-radius: 0 !important;
	font-family: var(--kj-mono) !important;
	font-size: 10px !important;
	letter-spacing: .14em !important;
	text-transform: uppercase !important;
	box-shadow: 4px 4px 0 rgba(20, 21, 26, .18) !important;
}
#btt i.fa { color: var(--kj-cyan) !important; }
#btt:hover { background: #0f8fb8 !important; }
#btt:hover i.fa { color: var(--kj-paper) !important; }

/* ---------------------------------------------------------------------------
 * MOBILE MENU BUTTON (#netbase-responsive-toggle) - invisible hamburger.
 * Same class of bug as the cart/search icons above, missed in that pass.
 *
 * The parent theme ships two rules for this button, the later one setting
 * color:#fff, because its original header was a dark translucent bar. The
 * HOME PAGE HEADER section above repaints .header-wrap to paper (#f2ede3) at
 * every breakpoint, so the button was left white-on-cream: a contrast ratio of
 * 1.17:1, i.e. completely invisible. The button still worked and the menu still
 * opened when it was clicked blind - only the glyph could not be seen, which is
 * why this read as the mobile menu is missing rather than the menu is

/* ---------------------------------------------------------------------------
 * MOBILE MENU BUTTON (#netbase-responsive-toggle) - invisible hamburger.
 * Same class of bug as the cart/search icons above, missed in that pass.
 *
 * The parent theme ships two rules for this button, the later one setting
 * color:#fff, because its original header was a dark translucent bar. The
 * HOME PAGE HEADER section above repaints .header-wrap to paper (#f2ede3) at
 * every breakpoint, so the button was left white-on-cream: a contrast ratio of
 * 1.17:1, i.e. completely invisible. The button still worked and the menu still
 * opened when clicked blind - only the glyph could not be seen, which is why
 * this read as "the mobile menu is missing" rather than "the menu is broken".
 *
 * Ink on paper is 15.62:1. Note this button is display:none above 768px, so it
 * is only ever drawn against the paper header and needs no breakpoint guard.
 *
 * NOT a FontAwesome weight problem: unlike #btt at the bottom of this file,
 * .fa-bars already computes to weight 900, so the Solid face is selected and
 * the glyph renders. Colour was the only fault.
 * ------------------------------------------------------------------------- */
#netbase-responsive-toggle,
#netbase-responsive-toggle i,
#netbase-responsive-toggle i::before {
	color: var(--kj-ink) !important;
}

#netbase-responsive-toggle:hover,
#netbase-responsive-toggle:hover i,
#netbase-responsive-toggle:hover i::before {
	color: #0f8fb8 !important;
}

/* ---------------------------------------------------------------------------
 * ...and its counterpart, the panel's CLOSE button (#close-netbase-menu).
 * This one is a parent-theme colour that was always wrong: #444 drawn on the
 * #282828 mobile panel is 1.51:1. It sits INSIDE the dark panel, not on the
 * paper header, so it takes the on-dark treatment (paper), matching the
 * "Navigation" title beside it - do NOT give this one var(--kj-ink).
 * ------------------------------------------------------------------------- */
#close-netbase-menu,
#close-netbase-menu i,
#close-netbase-menu i::before {
	color: var(--kj-paper) !important;
}

#close-netbase-menu:hover,
#close-netbase-menu:hover i,
#close-netbase-menu:hover i::before {
	color: var(--kj-cyan) !important;
}

/* ---------------------------------------------------------------------------
 * MOBILE SUBMENU - white text on the cream highlight, unreadable.
 * Reported from a phone screenshot: the Services > "Where We've Worked" row,
 * and in fact ALL 14 submenu links, sat at 1.17:1.
 *
 * A SPLIT DECISION between two stylesheets caused it, and the split is the
 * thing worth understanding:
 *
 *   colour  - printshop style.css, inside its own max-width:768px block, has
 *             #mega-menu-wrap-primary #mega-menu-primary li a { color:#fff
 *             !important }  =  specificity (2,1,1) + !important, so it BEAT
 *             this file's .mega-menu-wrap .mega-menu a.mega-menu-link (0,3,0)
 *             and the links stayed WHITE.
 *   background - the same theme paints the mobile sub-panel #282828 but does
 *             NOT mark it !important, so this file's
 *             .mega-menu-wrap .mega-sub-menu { background: paper !important }
 *             (0,2,0) WON and the panel turned CREAM.
 *
 * So one stylesheet won the background and the other won the colour, and the
 * result was white-on-cream. Neither rule is wrong on its own - the desktop
 * dropdown genuinely is paper with ink text. The mobile panel is the exception
 * and needs its own explicit treatment.
 *
 * Consistent with the "Mobile menu panel" section higher up and with the rule
 * that MegaMenu's mobile CSS is ID-based: white links on a DARK panel are the
 * correct answer below 768px, so the panel goes back to ink rather than trying
 * to force ink text (which would mean out-specifying a (2,1,1) !important on
 * every link state).
 * ------------------------------------------------------------------------- */
@media screen and (max-width: 768px) {

	/* the sub-panel itself: ink, not paper */
	#mega-menu-wrap-primary #mega-menu-primary ul.mega-sub-menu {
		background: var(--kj-ink) !important;
		border-top: 1px solid rgba(242, 237, 227, .14) !important;
	}

	/* Kill the paper highlight. The global hover/current rule in the NAV ACTIVE
	 * section sets background:var(--kj-paper-2)!important at (0,3,1); this is
	 * (2,3,3) so it wins and the row stays on the ink ground in every state.
	 * That rule is correct on desktop - it is only wrong over the dark panel. */
	#mega-menu-wrap-primary #mega-menu-primary ul.mega-sub-menu li.mega-menu-item a.mega-menu-link {
		background: transparent !important;
		border-bottom: 1px solid rgba(242, 237, 227, .08) !important;
	}

	/* Indicate hover/current with ink-on-dark's own vocabulary: cyan text plus
	 * the cyan register bar used elsewhere. Cyan on ink is 9.06:1, versus the
	 * 1.9:1 it would be on paper - which is exactly why the desktop rule had to
	 * move the indicator off the text and this one does not.
	 * No background declaration here on purpose: MegaMenu's own inline CSS
	 * carries a (2,4,4) rule for these links, so a background set at (2,3,3)
	 * would silently do nothing. The bar and the colour carry the state. */
	#mega-menu-wrap-primary #mega-menu-primary ul.mega-sub-menu li.mega-menu-item a.mega-menu-link:hover,
	#mega-menu-wrap-primary #mega-menu-primary ul.mega-sub-menu li.mega-current-menu-item a.mega-menu-link {
		color: var(--kj-cyan) !important;
		box-shadow: inset 3px 0 0 var(--kj-cyan) !important;
	}

	/* MegaMenu's OWN hamburger, which lives inside the panel and duplicates the
	 * theme's #netbase-responsive-toggle in the header. It was always in the
	 * markup but nobody could see it while the panel was unreachable; with the
	 * panel now openable it renders as a second, ink-on-#282828 hamburger (about
	 * 1.3:1) sitting under the "Navigation" title. It drives nothing here - the
	 * panel is opened by the theme toggle and the links render without it - so
	 * it is removed rather than recoloured. The per-item accordion arrows are a
	 * different element and still work. */
	#mega-menu-wrap-primary .mega-menu-toggle {
		display: none !important;
	}
}

/* ---------------------------------------------------------------------------
 * SITE-WIDE CONTRAST SWEEP, 2026-08-10.
 * Ran a scripted audit over /, /about/, /services/, /gallery/, /contact/,
 * /shop/, /my-account/, /terms-of-service/, /where-weve-worked/ and a product
 * category, computing each element's effective backdrop and its WCAG ratio,
 * after the mobile-menu fixes exposed how many parent-theme colours the paper
 * repaint had stranded. The findings below are the ones this file caused or
 * can properly own. Two values were also changed IN PLACE above (see the LINK
 * COLOUR note at the end of this comment).
 *
 * AUDITOR CAVEAT worth knowing before re-running it: it resolves the backdrop
 * by walking ANCESTOR background-color only, so it cannot see a scrim drawn as
 * an overlay pseudo-element. It reported the About hero h2 at 1.44:1, which is
 * a FALSE POSITIVE - `body.kj-press .sow-slider-image::after` puts a 78% paper
 * scrim over that photo and the heading is fine. Verify any hero/over-image hit
 * by hand before "fixing" it.
 * ------------------------------------------------------------------------- */

/* ---------------------------------------------------------------------------
 * FOOTER SUBSCRIBE BUTTON - invisible, and the single worst hit on the site.
 * The press-sheet button style is a GHOST button (transparent background, ink
 * text, ink border) and it is correct on the paper ground. But the footer is
 * INK, and this button is the only button in it - so on every kj-press page it
 * rendered ink-on-ink at 1.00:1, i.e. a Subscribe button that is not merely low
 * contrast but literally not there. Same failure shape as the hamburger: the
 * element worked, took clicks, threw nothing, and could not be seen.
 *
 * On commerce surfaces (no body.kj-press) it falls back to the THEME's style,
 * white on cyan #25bce9 = 2.22:1, which fails too but for the opposite reason
 * and predates this redesign. Scoping to .site-footer rather than body.kj-press
 * fixes both at once, because the footer is ink on every page regardless.
 * ------------------------------------------------------------------------- */
.site-footer .btn,
.site-footer button.btn,
.site-footer button[type="submit"],
.site-footer .subscribe-widget button {
	background: transparent !important;
	color: var(--kj-paper) !important;
	border: 2px solid var(--kj-paper) !important;
}

.site-footer .btn:hover,
.site-footer button.btn:hover,
.site-footer button[type="submit"]:hover,
.site-footer .subscribe-widget button:hover {
	background: var(--kj-paper) !important;
	color: var(--kj-ink) !important;
}

/* ---------------------------------------------------------------------------
 * FOOTER CONTACT DETAILS + COPYRIGHT.
 * The theme's #666 was chosen for its ORIGINAL mid-grey footer; against the ink
 * footer this file introduced it is 3.17:1, and the copyright line 3.69:1 -
 * both under the 4.5:1 body-text bar. These are the shop's address and phone
 * number, so they are worth reading.
 * Using a paper-tinted grey rather than a neutral one so it still belongs to
 * the palette: 6.49:1 on the footer, 6.77:1 on the darker copyright bar.
 * ------------------------------------------------------------------------- */
.site-footer .street1,
.site-footer .city-info,
.site-footer .phone,
.site-footer .copy_text,
.site-footer .copy_text a {
	color: #9d9a93 !important;
}

.site-footer .copy_text a:hover {
	color: var(--kj-paper) !important;
}

/* ---------------------------------------------------------------------------
 * WHERE WE'VE WORKED - the city index ordinals (01, 02, ...).
 * 52 of them at 3.39:1 on the dark press sheet. They are small and decorative,
 * but they are still text and they sit next to the city names, so they read as
 * part of the content. Lifted to 4.97:1, which keeps them clearly subordinate
 * to the city name without dropping under the bar.
 * ------------------------------------------------------------------------- */
.wwv .city-row .num,
.wwv .num {
	color: #8a857c !important;
}

/* ---------------------------------------------------------------------------
 * LINK COLOUR - the two values changed IN PLACE in the section above, recorded
 * here so the reasoning is not lost:
 *
 *   body.kj-press .entry-content a         #0f8fb8 -> #136A85  (3.19 -> 5.25)
 *   body.kj-press .entry-content a:hover   var(--kj-magenta)   (3.46 -> 5.32)
 *                                          -> #b81f5b
 *
 * #0f8fb8 is the "darkened cyan" this file already uses for icon hovers and the
 * cart chip, where the 3:1 bar of WCAG 1.4.11 applies because those are non-text
 * UI components - those uses are CORRECT and were deliberately left alone. As
 * body-text links, though, the same colour needs 4.5:1 and only reached 3.19:1.
 * That affected real content: 9 links on the Terms of Service page, 5 on
 * Contact (the sales@ address and the phone number among them), plus Services
 * and Gallery. The hover magenta failed the same way at 3.46:1.
 *
 * Both replacements keep the hue and just take enough lightness out to clear
 * the bar with margin, so the link styling still reads as the same design.
 * DO NOT globally replace #0f8fb8 in this file - only the body-link use was
 * wrong.
 * ------------------------------------------------------------------------- */

/* ---------------------------------------------------------------------------
 * DELIBERATELY NOT CHANGED, so they are not re-flagged as oversights:
 *  - Footer social glyphs, cyan on #444 = 4.38:1. They are icons, so the bar is
 *    3:1 (WCAG 1.4.11), not 4.5:1. They pass.
 *  - Everything on /my-account/, /cart/ and the product pages (Log in, Register,
 *    "Lost your password?", the privacy-policy link) - all cyan at 2.22-3.57:1.
 *    These are the THEME's own colours on the commerce surfaces that this
 *    redesign deliberately does not touch, because the store is being rebuilt
 *    on the 4over storefront. Fixing them here would be paid for twice and
 *    would fight the rebuild. Flagged to Keith instead.
 *  - .sow-sub-headline at 3.90:1 (About) and 4.42:1 (ToS): SiteOrigin emits
 *    per-widget inline CSS that outspecifies this file, so these need fixing in
 *    the widget settings, not here. Left as a content task.
 * ------------------------------------------------------------------------- */

/* ---------------------------------------------------------------------------
 * COMMERCE SURFACES - contrast only, 2026-08-10.
 *
 * These pages (/my-account/, /cart/, /checkout/, product + category, Dokan) do
 * NOT get body.kj-press: the store is being rebuilt on the 4over storefront and
 * restyling it now would be paid for twice. That decision stands. What follows
 * is deliberately NOT a restyle - it changes only foreground colours that fail
 * WCAG, and leaves every layout, background and brand colour exactly as the
 * theme has it. The store still looks like the theme's store.
 *
 * These failures are the THEME's own and predate the press-sheet work; they are
 * fixed here because there is nowhere else to put them (the child theme is the
 * only stylesheet we control) and because /my-account/ is publicly reachable
 * and its login/register form is the one part of the store that still works
 * while coming-soon mode hides the rest.
 * ------------------------------------------------------------------------- */

/* ---------------------------------------------------------------------------
 * BUTTONS - white (or #515151) on the brand cyan.
 * One inline Customizer rule paints every WooCommerce button
 * `background-color:#25bce9`, and the text on top came out white = 2.22:1, or
 * #515151 on the login submit = 3.57:1. Both fail.
 *
 * Keeping the cyan and flipping the TEXT to ink gives 8.20:1 while leaving the
 * button visually the same colour it has always been. This is also the pattern
 * the redesign already uses for the header cart badge (cyan chip, ink numeral),
 * so the two agree rather than diverge.
 *
 * NOTE the selector list below mirrors the theme's own cyan-background rules,
 * with ONE deliberate exclusion: `.subcriber-widget button.btn` is in the
 * theme's list but is the FOOTER Subscribe button, which sits on the ink footer
 * and was just fixed to paper-on-transparent. Adding it here would re-break it
 * to ink-on-ink at 1.00:1 - the exact bug that started this. Do not add it.
 * ------------------------------------------------------------------------- */
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce .woocommerce-Button,
.woocommerce-Button,
#customer_login .woocommerce-Button,
.woocommerce-form-login__submit,
.woocommerce-form-register__submit,
.woocommerce ul.products li.product .product-content-top .product-content-info > a.product_type_simple span,
ul.products .product-content-top .product-content-info .gridlist-buttonwrap > a.button:hover span,
ul.products.list li.product .product-list-content-info .gridlist-buttonwrap > a.button,
table.compare-list tbody tr.add-to-cart td a,
table.compare-list tbody tr.add-to-cart td a span,
.support_bs .btn-success,
.support_bs .btn-success:hover,
.support_bs .btn-success:active,
.support_bs .btn-success:focus,
.nav-pills > li.active > a,
.nav-pills > li.active > a:hover,
.nav-pills > li > a:hover,
.wpt-tabs .tab_title.selected a,
.wpt-tabs .tab_title a:hover {
	color: var(--kj-ink) !important;
}

/* ---------------------------------------------------------------------------
 * LINKS - brand cyan on white, 2.22:1.
 * Targeted at the specific WooCommerce link contexts rather than "every link on
 * a commerce page" ON PURPOSE: a blanket rule would also recolour product
 * titles and breadcrumb links, which are currently dark and perfectly readable,
 * and that would be the restyle this section is trying not to do.
 *
 * #136A85 is 6.13:1 on white and 5.25:1 on paper - the same value now used for
 * body links on the kj-press pages, so the site has ONE link colour rather than
 * two that nearly match.
 * ------------------------------------------------------------------------- */
.woocommerce-LostPassword a,
.woocommerce-privacy-policy-text a,
.woocommerce-terms-and-conditions-wrapper a,
.woocommerce-MyAccount-navigation a,
.woocommerce-info a,
.woocommerce-message a,
.woocommerce-error a,
.woocommerce-notice a,
.woocommerce form.login a,
.woocommerce form.register a,
.woocommerce-account .woocommerce-Address-title a {
	color: #136A85 !important;
}

.woocommerce-LostPassword a:hover,
.woocommerce-privacy-policy-text a:hover,
.woocommerce-terms-and-conditions-wrapper a:hover,
.woocommerce-MyAccount-navigation a:hover,
.woocommerce-info a:hover,
.woocommerce-message a:hover,
.woocommerce-error a:hover,
.woocommerce-notice a:hover,
.woocommerce form.login a:hover,
.woocommerce form.register a:hover {
	color: #b81f5b !important;
}

/* ---------------------------------------------------------------------------
 * NOT changed here, and why:
 *  - Product titles, breadcrumbs and prices already pass; recolouring them
 *    would be a restyle, not a fix.
 *  - The cyan BACKGROUNDS are all left alone. Cyan is the brand colour and as a
 *    non-text UI surface it is judged against 3:1, which it meets; only the
 *    text sitting on it was wrong.
 *  - Coming-soon mode currently hides /shop/ and the product pages from logged
 *    -out visitors, so several selectors above cannot be verified live today.
 *    They are included because they are the same theme rule and will apply the
 *    moment the store is switched on. Re-run the contrast audit after the 4over
 *    rebuild rather than assuming this section still covers everything.
 * ------------------------------------------------------------------------- */

/* ---------------------------------------------------------------------------
 * PARALLAX ROWS - text over an unscrimmed photo.
 * The About page's second row (#pg-2729-3) is a SiteOrigin parallax row. Its
 * page-builder background was #e0e0e0 and has been changed to paper in the DB,
 * but that colour was never the real problem: the row also carries a parallax
 * PHOTO (tshirt-bg-capabiliti.jpg) as an absolutely-positioned child <img> at
 * z-index 0, and it covers exactly the vertical band the text sits in.
 *
 * So the sub-headlines were never on the grey at all. Measured with ImageMagick
 * over the region the text occupies, the photo is a flat mid-grey: mean 160.6,
 * darkest 141.4, std 6.6. That put the 18px sub-headline at 2.71:1 on average
 * and 2.11:1 at worst - a genuine failure, and notably WORSE than the 5.30:1 an
 * ancestor-background-colour audit reports, because such an audit cannot see a
 * child image painted over that background. Same blind spot as the hero scrim,
 * but in the opposite direction: there it under-reported, here it over-reported.
 *
 * The fix is the one this file already uses for the hero: a paper scrim, so the
 * result reads as ink printed over a ghosted photo rather than text fighting an
 * image. Same 78% as `body.kj-press .sow-slider-image::after` so the two
 * treatments match. Against the photo's DARKEST region that gives the
 * sub-headline 4.93:1 and the ink heading 12.83:1 - i.e. the floor clears 4.5,
 * not just the average.
 *
 * STACKING, which is the fiddly part: SiteOrigin sets the parallax <img> to
 * z-index 0 and the row's real children to z-index 1. This ::after therefore
 * takes z-index 0 as well and wins over the image purely on paint order (a
 * generated ::after is the last child), while still sitting UNDER the content.
 * Do not "tidy" it to z-index 1 - that would cover the text instead.
 * ------------------------------------------------------------------------- */
body.kj-press .panel-grid .so-parallax::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background-color: rgba(242, 237, 227, .78);
	pointer-events: none;
}