/*
 * Norske Tools - brand accent legibility and category page colour.
 *
 * The Trade-A-Blade accent is now #F2FF00, a very bright yellow. The design
 * already anticipated a light accent: nt-design.css refers to var(--nt-ink)
 * eight times for the foreground that sits on the accent. That variable was
 * never defined anywhere, so those rules were invalid and the affected
 * elements fell back to white. It is now emitted per brand from nt_brands()
 * in nt-site.php (Norske #ffffff, Trade-A-Blade #16181d, KORR #ffffff).
 *
 * This file covers the surfaces the original --nt-ink rules did not reach:
 *
 *  1. Accent-background surfaces whose contents were hard coded white.
 *  2. Accent-as-text uses, which sit on white or near-white. Bright yellow
 *     text on white is unreadable at any size, so for Trade-A-Blade only,
 *     those switch to the brand dark. The supplied hex is untouched; only the
 *     foreground changes, exactly as instructed.
 *
 * Everything here is scoped to body.nt-brand-tradeablade, so Norske and KORR
 * are not affected.
 *
 * The category block is brand neutral by design: the approved blue applies on
 * all three tabs.
 */

/* ------------------------------------------------ 1. text on the accent ---
 * These sit on an accent background and previously rendered white, which is
 * unreadable on yellow.
 */
body.nt-brand-tradeablade .nt-searchbar form button svg,
body.nt-brand-tradeablade .nt-backtop svg,
body.nt-brand-tradeablade .nt-pshare a:hover svg {
	stroke: var(--nt-ink);
	fill: var(--nt-ink);
}

body.nt-brand-tradeablade .nt-acct-btn,
body.nt-brand-tradeablade .nt-backtop,
body.nt-brand-tradeablade .nt-searchbar form button {
	color: var(--nt-ink);
}

/* ------------------------------------------------ 2. accent used as text ---
 * On white or near-white backgrounds. Yellow text would be invisible, so
 * Trade-A-Blade uses the brand dark for these instead.
 */
body.nt-brand-tradeablade .nt-nav-item > a:hover,
body.nt-brand-tradeablade .nt-panel a:hover,
body.nt-brand-tradeablade .nt-fad-results h2,
body.nt-brand-tradeablade #nt-fad-list em,
body.nt-brand-tradeablade .nt-acct-view,
body.nt-brand-tradeablade .nt-acct-menu a.on,
body.nt-brand-tradeablade .nt-acct-menu a:hover,
body.nt-brand-tradeablade .nt-acct-menu .nt-acct-ic,
body.nt-brand-tradeablade .nt-testi-quote-mark,
body.nt-brand-tradeablade .nt-desc__toggle {
	color: var(--nt-dark);
}

body.nt-brand-tradeablade .nt-desc__toggle:hover {
	color: #000;
}

/* Focus rings drawn in the accent are invisible on white, so they use the
   brand dark too. Keyboard users need to see these. */
body.nt-brand-tradeablade .nt-desc__toggle:focus-visible,
body.nt-brand-tradeablade .elementor-form .elementor-field-textual:focus,
body.nt-brand-tradeablade .nt-acct-main input:focus {
	outline-color: var(--nt-dark);
	border-color: var(--nt-dark);
}

/* --------------------------------------------------- category page blue ---
 * Applies on all three brand tabs. #1B2C4F is the approved brand blue: it is
 * the Elementor kit 9 "Secondary" global, the :root --nt-dark default, and
 * the most used blue in the design CSS.
 *
 * The heading colour itself is set at source on the archive title widget in
 * template 2134. These rules cover the rest of the category page.
 */
.tax-product_cat .woocommerce-products-header__title,
.tax-product_cat .page-title,
.tax-product_cat .term-description h1,
.tax-product_cat .term-description h2,
.tax-product_cat .term-description h3 {
	color: #1b2c4f;
	font-family: var(--nt-font, "DIN", sans-serif);
	font-weight: 700;
}

.tax-product_cat .term-description,
.tax-product_cat .woocommerce-result-count,
.tax-product_cat .woocommerce-ordering,
.tax-product_cat .woocommerce-ordering select {
	color: #1b2c4f;
	font-family: var(--nt-font, "DIN", sans-serif);
	font-weight: 400;
}

.tax-product_cat .term-description a,
.tax-product_cat .woocommerce-breadcrumb a {
	color: #1b2c4f;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.tax-product_cat .term-description a:hover,
.tax-product_cat .woocommerce-breadcrumb a:hover {
	color: #0f1c33;
}

.tax-product_cat .term-description strong,
.tax-product_cat .term-description b {
	color: #1b2c4f;
	font-weight: 700;
}

/* ------------------------------------------------- brand logo optical sizing ---
 * All three header logos previously rendered at a hardcoded inline height of
 * 38px, so they were arithmetically equal but visually very different: the
 * proportion of each canvas occupied by the wordmark differs enormously.
 *
 * Measured wordmark band as a share of canvas height:
 *   Norske  394x60, wordmark rows 11-52 =  42px =  70.0%
 *   TAB     246x56, wordmark rows 13-33 =  21px =  37.5%  (boxed lockup + tagline)
 *   KORR    240x40, wordmark rows  0-39 =  40px = 100.0%
 *
 * At a common 38px that produced wordmark ink of 26.6px, 14.3px and 38.0px,
 * which is exactly why KORR read as oversized and TAB as undersized.
 *
 * Norske is the reference and is unchanged at 38px (26.6px of wordmark).
 * KORR is a bare wordmark, so matching cap height is exact: 27px.
 * TAB is a boxed lockup, so a pure cap-height match would need 71px and the
 * box would tower over the other two. 52px is the optical compromise: its box
 * lands at 39px, within a pixel of Norske's 38px overall, its width at 228px
 * sits beside Norske's 250px, and the wordmark grows 14.3px -> 19.5px.
 *
 * Heights are held across breakpoints so the logos do not re-order visually
 * on mobile. width:auto preserves every aspect ratio exactly.
 */
.nt-hlogo img {
	height: 38px;
	width: auto;
	display: block;
}

body.nt-brand-tradeablade .nt-hlogo img {
	height: 52px;
}

body.nt-brand-korr .nt-hlogo img {
	height: 27px;
}

@media (max-width: 860px) {
	.nt-hlogo img {
		height: 38px;
	}

	body.nt-brand-tradeablade .nt-hlogo img {
		height: 52px;
	}

	body.nt-brand-korr .nt-hlogo img {
		height: 27px;
	}
}

/* The TAB lockup is taller than the other two, which made the header 84px on
   Trade-A-Blade and 72px on Norske and KORR: a 12px vertical jump when the
   visitor switched brand tab. The logo anchor now reserves a constant height
   on every brand, so the header is identical across all three and each logo is
   optically centred within the same slot. Logo sizes themselves are unchanged
   by this rule. */
.nt-hlogo {
	display: flex;
	align-items: center;
	height: 52px;
}

@media (max-width: 860px) {
	.nt-hlogo {
		height: 52px;
	}
}