/* ----------------------------------------------------------------
	Custom CSS

	Add all your Custom Styled CSS here for New Styles or
	Overwriting Default Theme Styles for Better Handling Updates
-----------------------------------------------------------------*/


/* ----------------------------------------------------------------
	Brand palette
	Values sampled off the 2026 homepage comp.
-----------------------------------------------------------------*/

:root {
	--wvd-red: #d01a19;
	--wvd-red-dark: #a91312;
	--wvd-ink: #1b1b1b;
	--wvd-band-grey: #eaeaea;
	--wvd-band-grey-light: #f0f0f0;
	--wvd-copyrights-bg: #333;

	/* body-copy links in #secondary read blue, not brand red */
	--wvd-link-blue: #0a58ca;
	--wvd-link-blue-dark: #084298;

	/* accent runs through buttons, links, heading rules and form focus.
	   Canvas ships a teal (#1abc9c); the comp is the brand red. */
	--cnvs-themecolor: var(--wvd-red);
	--cnvs-themecolor-rgb: 208, 26, 25;
}


/* ----------------------------------------------------------------
	Header / Footer
	Both are solid black in the comp. Canvas's stock .dark is a
	lighter charcoal (#212529), and the footer carries a 5px light
	top border the comp does not have.
-----------------------------------------------------------------*/

#header.dark,
#header.dark #header-wrap {
	--cnvs-header-bg: #000;
	--cnvs-header-sticky-bg: #000;
}

/* Canvas sizes the logo to the full header height, leaving it flush top
   and bottom. Pad it in 15px - box-sizing is border-box, so the header
   height is unchanged and the mark just scales down to fit. */
#header-wrap #logo img {
	padding-top: 15px;
	padding-bottom: 15px;
}

#footer {
	--cnvs-footer-bg: #000;
	--cnvs-footer-top-border: 0;
}

/* Canvas's dark theme sets `.dark #copyrights { background: rgba(0,0,0,.2) }`,
   which outranks a plain #copyrights rule and reads as black over the black
   footer. Mirror its selector so source order wins. */
.dark #copyrights,
#copyrights.dark,
#copyrights {
	background-color: var(--wvd-copyrights-bg);
	/* same rule drops the text to rgba(255,255,255,.4), which is far dimmer
	   than the comp - its glyph stems read as near-white on the grey */
	color: rgba(255, 255, 255, 0.9);
	--cnvs-copyrights-link-color: rgba(255, 255, 255, 0.9);
}


/* ----------------------------------------------------------------
	Section bands
-----------------------------------------------------------------*/

/* KENWOOD block sits on a grey band running the full viewport width */
.wvd-band-grey {
	background-color: var(--wvd-band-grey);
}

/* closing call-to-action band */
.promo-light {
	--cnvs-promo-light: var(--wvd-band-grey-light);
}


/* ----------------------------------------------------------------
	Accents that are NOT red in the comp
-----------------------------------------------------------------*/

/* short rule under each heading is red in the comp; Canvas draws it
   in the heading colour */
.heading-block::after {
	border-color: var(--wvd-red);
}

/* solution box headings read near-black, not accent-coloured */
.feature-box .fbox-content h3 a {
	color: var(--wvd-ink);
}

.feature-box .fbox-content h3 a:hover {
	color: var(--wvd-red);
}

/* LEARN MORE buttons are outlined in dark grey, not red */
.button.button-border:not(.button-light) {
	--cnvs-btn-color: var(--wvd-ink);
}


/* ----------------------------------------------------------------
	Newsletter subscribe
-----------------------------------------------------------------*/

.subscribe-widget .btn {
	background-color: var(--wvd-red);
	border-color: var(--wvd-red);
}

.subscribe-widget .btn:hover,
.subscribe-widget .btn:focus,
.subscribe-widget .btn:active {
	background-color: var(--wvd-red-dark);
	border-color: var(--wvd-red-dark);
}


/* ----------------------------------------------------------------
	Hero slider caption
	Canvas ships a 4.5rem headline, which overflows the 800px caption
	and wraps "Connected" onto a second line. The comp runs it on one
	line at roughly 52px. Sizes below are measured off the comp at a
	1600px viewport.
-----------------------------------------------------------------*/

@media (min-width: 768px) {

	/* comp headline measures 828px wide on a single line */
	.slider-caption h2 {
		font-size: 3.25rem;
	}

	/* room for the headline to stay on one line */
	.slider-caption.slider-caption-center {
		max-width: 900px;
	}

	/* ...but hold the sub-head narrower so it breaks after
	   "communications" the way the comp does */
	.slider-caption.slider-caption-center p {
		max-width: 720px;
		margin-left: auto;
		margin-right: auto;
	}

}

/* the caption is a flex column, so a block-level button stretches to the
   full caption width. Let it shrink to its label, and trim button-large
   down to the comp's 240x43 box. */
.slider-caption .button {
	align-self: center;
	--cnvs-btn-fontsize: 1rem;
	--cnvs-btn-padding-x: 1rem;
}


/* ----------------------------------------------------------------
	Top Bar
	Red utility bar above the header: phone + location on the left,
	Contact / Request a Quote on the right, hairline dividers between
	items. Measurements taken from the 2026 homepage comp.
-----------------------------------------------------------------*/

#top-bar {
	--cnvs-topbar-height: 40px;
	--cnvs-topbar-font-size: 0.625rem;
	--cnvs-topbar-font-weight: 700;
	--cnvs-topbar-font-transform: uppercase;
	--cnvs-topbar-color: #fff;
	--cnvs-topbar-bg: var(--wvd-red);
	--cnvs-topbar-border-size: 1px;
	--cnvs-topbar-border-color: rgba(255, 255, 255, 0.9);
	border-bottom: 0;
	letter-spacing: 0.03em;
}

/* full-bleed container, matching the gutter .full-header uses on the
   header below it so the two line up at the page edges */
#top-bar > .container {
	width: 100%;
	max-width: none;
}

@media (min-width: 992px) {

	#top-bar > .container {
		padding-left: 30px;
		padding-right: 30px;
	}

	/* pull the outermost link padding so the text itself sits flush with
	   the logo and the search icon rather than 12px inboard of them */
	#top-bar .top-links-container > .top-links-item:first-child > a {
		padding-left: 0;
	}

	#top-bar .col-12:last-child .top-links-container > .top-links-item:last-child > a {
		padding-right: 0;
	}

}

/* dividers sit between items only - Canvas already clears the first child */
#top-bar .top-links,
#top-bar .top-links-item {
	border-color: var(--cnvs-topbar-border-color);
}

#top-bar .top-links-item > a {
	white-space: nowrap;
	color: var(--cnvs-topbar-color);
}

#top-bar .top-links-item > a:hover {
	color: #fff;
}

#top-bar .top-links-item:hover {
	background-color: rgba(0, 0, 0, 0.12);
}

/* stacked on small screens - soften the rule under the first group */
@media (max-width: 767.98px) {

	#top-bar .top-links {
		border-bottom-color: rgba(255, 255, 255, 0.2);
	}

	#top-bar .top-links-item > a {
		padding-left: 0.75rem;
		padding-right: 0.75rem;
	}

}

[class*="oiw-row"] {
  --cnvs-socialicon-gap: 5px;
  --cnvs-socialicon-gap-x: var(--cnvs-socialicon-gap);
  --cnvs-socialicon-gap-y: 0px;
}


/* ----------------------------------------------------------------
	Mega menu - column headers

	Canvas already gives .mega-menu-title uppercase and a 700 weight,
	but leaves it the same colour as the links under it and only 1.1x
	their size (13.2px against 12px), so in a nine-item column it reads
	as a bold first item rather than a heading. Separate it with a rule
	and let the children recede instead of shouting the heading.
-----------------------------------------------------------------*/

.is-expanded-menu .mega-menu-style-2 .mega-menu-title > .menu-link {
	font-size: calc(var(--cnvs-primary-menu-submenu-font-size) * 1.2);
	letter-spacing: 1.5px;
	/* Canvas sets padding: 0 !important on this link */
	padding-bottom: 0.5rem !important;
	margin-bottom: 0.75rem;
	border-bottom: 1px solid rgba(var(--cnvs-themecolor-rgb), 0.35);
}

/* Dim the child links by moving the token rather than setting colour
   outright - the hover rule assigns colour directly, so a colour here
   would outrank it and kill the red hover. The title keeps its own
   near-black from Canvas's .mega-menu-title rule. */
.is-expanded-menu .mega-menu-style-2 .mega-menu-title .menu-item:not(.mega-menu-title) {
	--cnvs-primary-menu-color: #5a5a5a;
}


/* ----------------------------------------------------------------
	Landing cards — horizontal gutters

	oiw-footer-scripts.htm swaps each .oiw-landing block into the
	Bootstrap column from includes/landing-page.htm, which lands
	inside an .oiw-row. In this BS5 theme a `col-*` class carries no
	padding of its own — the gutter comes from `.row > *`, and
	.oiw-row is not .row, so the cards butt together and the grid
	overhangs the container by the row's -15px margins. Supply the
	15px sides that .oiw-col-* would have brought (30px gutters).

	Vertical spacing already comes from `.oiw-row-40 > *`.
-----------------------------------------------------------------*/
.oiw-row > [class*="col-"] {
	padding-right: 15px;
	padding-left: 15px;
}

/* ----------------------------------------------------------------
	Side nav — nested sub-lists

	Canvas makes every .widget_links li a flex row so the ::before
	bullet sits beside the link. On a parent item the nested <ul> is
	a flex item too, so the whole sub-list lines up alongside the
	parent link instead of below it. Let the item wrap and give the
	sub-list a full-width basis so it drops onto its own line; the
	1rem indent then comes from the theme's `ul ul` rule.
-----------------------------------------------------------------*/
.widget_links li {
	flex-wrap: wrap;
}

.widget_links li > ul {
	flex-basis: 100%;
}

/* ----------------------------------------------------------------
	Body copy — list indent

	Indent the bulleted/numbered lists that appear in page copy, and
	only those. Scoped three ways so nothing else moves:

	  #content        keeps the header, breadcrumb bar and footer out
	                  of it — they all sit outside that section.
	  :not([class])   body-copy lists are plain <ul>/<ol>; every
	                  component list carries a class (.nav tab bars,
	                  .breadcrumb, .list-marked, sliders), so they
	                  keep the spacing the theme gives them.
	  .column-aside / .widget
	                  the side nav's <ul> is unclassed too, so it
	                  would otherwise match — opt it back out.

	Adjust the 1.5rem below to taste; it stacks on top of Canvas's
	`padding-left: 2rem` on ol/ul, which supplies the marker gutter.
-----------------------------------------------------------------*/
#content ul:not([class]),
#content ol:not([class]) {
	margin-left: 1.5rem;
}

#content .column-aside ul:not([class]),
#content .column-aside ol:not([class]),
#content .widget ul:not([class]),
#content .widget ol:not([class]) {
	margin-left: 0;
}

/* ----------------------------------------------------------------
	Brand logos — /industries/ pages

	Each industry page introduces four manufacturer sections, and the
	supplied logos are very different lockups: KENWOOD and Motorola are
	single-line wordmarks (6:1 and 9:1), while Icom and HearClear are
	stacked marks (2:1 and 1.6:1). Capping height alone would make the
	wordmarks enormously wide; capping width alone would make the
	stacked marks tall. So constrain both and let each logo scale to
	fit inside the box — the wordmarks end up width-limited, the
	stacked marks height-limited.

	Adjust the two max values together to resize the whole set.

	Spacing above each logo now comes from the .offset-top-* rules in
	the portable section below, which is what the wrapping div was
	always asking for — this rule only sizes the image.
-----------------------------------------------------------------*/
.brand-logo {
	max-width: 200px;
	max-height: 56px;
	width: auto;
	height: auto;
}


/* ================================================================
	PORTABLE — inner-page body copy

	Everything below is site-agnostic: it depends only on the
	template's markup (#secondary wrapping the editable region on
	every inner page), never on this site's palette or content.
	Copy this whole block into the next build's custom.css as-is.

	Scoped to #secondary on purpose. That container holds the page
	copy and nothing else — header, top bar, breadcrumbs, slider,
	sidebars and footer all sit outside it — so rules here can be
	broad without leaking into theme components.

	Tune the block from the variables on #secondary; the rules
	underneath should not need editing.
   ================================================================ */

#secondary {
	/* one leading for all copy. Canvas ships three different values
	   inside this container — 1.65 on .content-wrap p, 1.2 on
	   headings, 1.5 inherited from body — which reads as uneven
	   spacing when a page mixes paragraphs, lists and sub-heads.

	   `normal` hands the leading back to the browser, which sets it
	   per font from the face's own metrics (roughly 1.15–1.2 for
	   Inter) instead of a fixed multiplier. Swap in a number here if
	   a build wants the copy opened back up. */
	--copy-line-height: normal;

	/* set on the container as well, so anything not named below
	   picks it up by inheritance */
	line-height: var(--copy-line-height);
}

/* Canvas sets `line-height: var(--cnvs-line-height-content)` (1.65)
   on `.content-wrap p`, which outranks the inherited value above.
   The #secondary id here outweighs that class selector. */
#secondary p {
	line-height: var(--copy-line-height);
}

/* Bootstrap's base heading rule pins every heading to 1.2 */
#secondary h1,
#secondary h2,
#secondary h3,
#secondary h4,
#secondary h5,
#secondary h6,
#secondary .h1,
#secondary .h2,
#secondary .h3,
#secondary .h4,
#secondary .h5,
#secondary .h6 {
	line-height: var(--copy-line-height);
}

/* list items and table cells inherit from body rather than from
   #secondary in a few theme rules — state them explicitly */
#secondary li,
#secondary dt,
#secondary dd,
#secondary td,
#secondary th,
#secondary blockquote,
#secondary blockquote p {
	line-height: var(--copy-line-height);
}


/* ----------------------------------------------------------------
	PORTABLE — vertical rhythm above headings

	Bootstrap's reboot sets `margin-top: 0` on every heading and
	Canvas never adds one back for body copy, so a heading sits
	flush against whatever precedes it. Paragraphs hide the problem
	(their own 1rem bottom margin does the work), but anything with
	no bottom margin — a button in a bare <div>, a logo, an image —
	ends up jammed against the next <h2>.

	Fixing it on the heading rather than on each preceding element
	means it holds for every combination, and margins collapse: the
	space after a paragraph is max(1rem, the value below) rather
	than the two added together, so paragraph-to-heading spacing
	stays even with div-to-heading spacing.

	`* +` limits this to headings that actually follow something,
	so the first heading in the editable region gains no stray gap
	at the top of the page.
-----------------------------------------------------------------*/

#secondary {
	/* space above a new top-level section */
	--copy-section-space: 2.5rem;

	/* space above a sub-head inside a section */
	--copy-subhead-space: 1.75rem;

	/* gap inside an <h2> title / <h3> subtitle pair */
	--copy-heading-pair-gap: 0.5rem;
}

#secondary * + :is(h1, h2, .h1, .h2) {
	margin-top: var(--copy-section-space);
}

#secondary * + :is(h3, h4, h5, h6, .h3, .h4, .h5, .h6) {
	margin-top: var(--copy-subhead-space);
}

/* a sub-head directly under its own heading is one unit — the pages
   run <h2> section title / <h3> subtitle constantly — so the pair
   should read as one block. Two :is() lists outrank the single-list
   rules above. */
#secondary :is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6)
	+ :is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6) {
	margin-top: 0;
}

/* Clearing the sub-head's top margin isn't enough on its own: Canvas
   sets `margin: 0 0 30px 0` on every heading (style.css, its own
   typography block, which overrides Bootstrap's 0.5rem), so the pair
   still sat a full paragraph's gap apart. Pull the bottom margin off
   the title when a heading follows it — matched with :has() so the
   value lands on the first heading of the pair and not on the many
   headings that are followed by copy. */
#secondary :is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6):has(
		+ :is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6)) {
	margin-bottom: var(--copy-heading-pair-gap);
}

/* the sidebar lives inside #secondary too, and its widget titles are
   unclassed <h4>s — leave the widgets on the spacing the theme gives
   them (same opt-out the list-indent rule above uses) */
#secondary :is(.column-aside, .widget) * + :is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6) {
	margin-top: 0;
}


/* ----------------------------------------------------------------
	PORTABLE — .offset-top-* block spacing

	Body copy wraps standalone buttons and images in a bare div —
	`<div class="offset-top-30"><a class="btn">…</a></div>` — and
	that class has never had a rule in any stylesheet. It is a
	leftover from the pre-Canvas build, so the divs contribute no
	margin at all and two of them in a row (a button followed by a
	manufacturer logo, say) end up touching.

	Rather than patch each element the divs happen to contain, make
	the class do what its name has always claimed. Across the site
	it only ever wraps a button or an image, so a top margin is
	always the right reading.

	.offset-top-0 is used the other way round — as a modifier that
	strips the space off an accordion — so it is declared here too,
	otherwise it would be the one name in the family still doing
	nothing.
-----------------------------------------------------------------*/

#secondary .offset-top-0 {
	margin-top: 0;
}

#secondary .offset-top-30 {
	margin-top: 30px;
}

#secondary .offset-top-50 {
	margin-top: 50px;
}

/* A wrapper holding an image is doing something different from one
   holding a button: the button closes the section above it, while
   the image — a manufacturer logo on the industry pages — opens the
   section below it. So the gap in a button-then-image run is a
   section boundary, and 30px reads tight against it. Give those the
   same air a top-level heading gets, so the break lands at the same
   size whether the new section starts with a logo or a heading.

   Keyed off the image rather than a logo class so the rule travels
   to the next build unchanged. */
#secondary .offset-top-30:has(img) {
	margin-top: var(--copy-section-space);
}


/* ----------------------------------------------------------------
	PORTABLE — product photo size

	Canvas is built for e-commerce grids where every product shot is
	pre-cropped to one aspect ratio, so it stretches the image to the
	full column: `.product .product-image img { width: 100% }`.

	These shots aren't cropped to a common ratio. They come in two
	fixed width buckets, and the height floats with the product:

	  206px wide — portables/handhelds (206x745, 206x882)
	  440px wide — mobiles, repeaters, base stations
	                (440x184, 440x244, 440x310, 440x344)

	That 440 is within a few px of the col-md-5 column, which is the
	tell: the assets were authored to sit at natural size. Canvas's
	`width: 100%` therefore leaves the wide ones about right and
	upscales every portable to roughly 2x, which is why they towered
	over the description column.

	Any single percentage inherits the same problem from the other
	end — the buckets are 2:1 apart, so a value that suits one leaves
	the other half the size it should be.

	So don't scale: let each image sit at its natural size and use
	max-width only as a ceiling for the wide bucket, which is a few
	px over the column at some breakpoints. Nothing is ever upscaled,
	so nothing goes soft, and the two buckets land at the sizes they
	were drawn for.
-----------------------------------------------------------------*/

#secondary {
	/* ceiling only — it bites the 440px bucket and never the 206px
	   one. Drop it to hold the wide products in off the column
	   edges; the portables won't move until it goes below ~48%. */
	--product-image-max-width: 100%;
}

/* the id outranks Canvas's `.product .product-image img` */
#secondary .product .product-image img {
	width: auto;
	height: auto;
	max-width: var(--product-image-max-width);

	/* Canvas leaves the img display:block, so it sits hard left once
	   it is no longer full-width */
	margin-left: auto;
	margin-right: auto;
}

/* ----------------------------------------------------------------
	FAQ questions

	The copy decks lean on these blocks for answer engines, so the
	questions stay <h3> and keep their place in the heading outline.
	This makes them *render* as bold body copy with the answer on the
	next line — visually identical to <p><strong>Q</strong><br>A</p>.

	h3 margin 0 + p margin-top 0 collapses each pair into one block;
	the paragraph's own bottom margin then spaces the pairs apart.
-----------------------------------------------------------------*/
.faq-list h3 {
	font-size: var(--bs-body-font-size);
	font-weight: 700;
	line-height: var(--bs-body-line-height);
	color: var(--bs-body-color);
	margin: 0;
}

.faq-list h3 + p {
	margin-top: 0;
}

/* ----------------------------------------------------------------
	Text links inside the content column

	Canvas maps --cnvs-link-color to --cnvs-themecolor, which we set
	to the brand red, so every link rendered red — hard to tell apart
	from the red CTA buttons next to them. Blue reads as a link in the
	copy; the side nav stays red (see the .column-aside rule below).

	:not([class]) is the whole trick: the CTA buttons carry .btn, and
	the landing/grid cards are rebuilt by oiw-footer-scripts.htm into
	anchors with .button / .thumbnail-classic, so they all opt out
	automatically. Only bare <a href="…">text</a> is repainted.
-----------------------------------------------------------------*/
#secondary a:not([class]) {
	color: var(--wvd-link-blue);
}

#secondary a:not([class]):hover,
#secondary a:not([class]):focus {
	color: var(--wvd-link-blue-dark);
}

/* The side nav reads black — blue is only for links in the copy, and red
   is reserved for buttons and other actions. Red on hover gives the items
   some affordance without competing with the CTAs at rest.
   Higher specificity than the rule above, so it wins wherever it applies.
   .column-aside wraps the whole aside column, so side1/side2 are covered
   too, not just .widget_links. */
#secondary .column-aside a:not([class]) {
	color: var(--wvd-ink);
}

#secondary .column-aside a:not([class]):hover,
#secondary .column-aside a:not([class]):focus {
	color: var(--wvd-red);
}