/* ----------------------------------------------------------------
	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;

	/* 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;
}

/* ----------------------------------------------------------------
	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;
}