/*
 * custom.css — RW Business Solutions site overrides.
 * Loaded AFTER main.css so these rules win. Keep site-specific tweaks here
 * rather than editing the compiled main.css (which is regenerated from scss/).
 */

/*
 * Logo wordmark.
 *
 * The template's .logo-text is a bordered, wide-tracked, all-caps box built for
 * a short name (e.g. "MAXICOM"); the longer "RW Business Solutions" wrapped
 * awkwardly inside it. Render it instead as a clean single-line wordmark.
 *
 * Also: the template header is designed to overlay a dark hero slider, so at the
 * top of the page (.affix-top) it forces the logo white — invisible on our solid
 * white header. Keep it in the brand color in every state.
 */
.page_header.ls .logo,
.page_header.ls.affix-top .logo,
.page_header.ls.affix .logo {
	color: #8073b2;
}

.page_header.ls .logo .logo-text,
.page_header.ls.affix-top .logo .logo-text,
.page_header.ls.affix .logo .logo-text {
	border: none;
	border-radius: 0;
	padding: 0;
	letter-spacing: 0.5px;
	text-transform: none;
	white-space: nowrap;
}

/* Logo mark (RW monogram) sitting to the left of the wordmark. */
.logo .logo-mark {
	height: 96px;
	width: auto;
	margin-right: 12px;
}

/*
 * Homepage hero: full RW logo above the <h1>.
 *
 * The logo is decorative (alt="") — the visible <h1> under it carries the brand
 * name and the location for both users and crawlers. Capped smaller than the
 * standalone-logo treatment it replaced so the heading stays the focal point.
 */
.hero-logo {
	display: block;
	width: 100%;
	max-width: 520px;
	height: auto;
	margin: 0 auto 24px;
}

/*
 * The template styles h1 as uppercase with wide letter-spacing, sized for short
 * page titles ("Services"). The homepage h1 is a full sentence, so at the stock
 * size it wrapped to three lines and pushed the CTAs below the fold. Scale it
 * down and tighten the tracking for this one heading only.
 */
.page_title .hero-heading {
	font-size: 38px;
	letter-spacing: 2px;
	line-height: 1.25;
	margin-bottom: 0;
}

@media (max-width: 767px) {
	.page_title .hero-heading {
		font-size: 26px;
		letter-spacing: 1px;
	}
}

/*
 * Accessibility: card/step sub-headings were promoted from <h4> to <h3> so the
 * heading outline never skips a level (section <h2> -> card <h3>). The template
 * sizes h3 at 40px and h4 at 30px; this keeps the promoted headings at their
 * original 30px so the promotion is semantic-only, with no visual change.
 * (.icon-box already handles their margins / letter-spacing.)
 */
.section-subheading {
	font-size: 30px;
}

@media (max-width: 575px) {
	.section-subheading {
		font-size: 25px;
	}
}

/*
 * In-prose links.
 *
 * The template styles every <a> as dark grey with no underline, which is fine
 * for nav and card links but makes links inside body copy invisible. The service
 * pages lean on prose links for internal navigation, so mark them in the brand
 * color and underline them. Scoped to body copy inside <main>: nav, footer,
 * breadcrumbs, and .btn links keep the template treatment.
 */
#content p > a:not(.btn),
#content li > a:not(.btn) {
	color: #8073b2;
	text-decoration: underline;
}

#content p > a:not(.btn):hover,
#content li > a:not(.btn):hover {
	color: #4c4c4c;
}

/* Breadcrumbs and card headings keep the template's own link treatment. */
#content .breadcrumb li > a,
#content h3.section-subheading > a {
	color: inherit;
	text-decoration: none;
}

#content h3.section-subheading > a:hover {
	color: #8073b2;
}