/*
Theme Name:   RSI
Theme URI:    https://restorationsystems.net
Description:  Lightweight theme for Restoration Systems. Header, footer and sitewide scripts for the raw-HTML pages, plus a fallback renderer for legacy Divi Builder content.
Author:       RSI
Version:      1.0.1
Requires PHP: 7.4
Text Domain:  rsi
*/

/*
 * Pages rendered through page-raw-html.php ship their own global CSS
 * (body, a, p, ul, li, h1-h6, footer...). Every theme rule below therefore
 * uses an rt- class and sets the properties those page rules touch, so the
 * header and footer look the same on every page.
 */

:root {
	--rt-slate-dark: #3C4E5B;
	--rt-slate: #526776;
	--rt-slate-light: #657F91;
	--rt-black: #1D2022;
	--rt-blue-100: #F7F8F9;
	--rt-blue-200: #EDF4F9;
	--rt-blue-300: #E3EBF1;
	--rt-blue-400: #C5D2DC;
	--rt-orange: #DE6400;
	--rt-orange-dark: #B25000;
	--rt-white: #FFFFFF;
	--rt-hair: 1px solid var(--rt-blue-400);
	--rt-hair-dark: 1px solid rgba(255, 255, 255, .2);
	--rt-font-heading: 'Montserrat', sans-serif;
	--rt-font-body: 'Open Sans', sans-serif;
	--rt-wide: 1260px;
	--rt-narrow: 760px;
	--rt-gutter: 24px;
	--rt-radius: 8px;
	--rt-shadow: 0 2px 8px rgba(0, 0, 0, .1);
}

/* ---------- Base (kept minimal so it never fights page styles) ---------- */

*, *::before, *::after { box-sizing: border-box; }

body {
	margin: 0;
	background: var(--rt-white);
	color: var(--rt-slate);
	font-family: var(--rt-font-body);
	font-size: 16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

img { max-width: 100%; height: auto; }

.rt-wrap {
	max-width: var(--rt-wide);
	margin: 0 auto;
	padding: 0 var(--rt-gutter);
}

.rt-wrap--narrow { max-width: calc(var(--rt-narrow) + 2 * var(--rt-gutter)); }

.rt-skip {
	position: absolute;
	left: 8px;
	top: -100px;
	z-index: 1000;
	padding: 8px 16px;
	background: var(--rt-white);
	color: var(--rt-slate-dark);
	font: 600 14px/1.4 var(--rt-font-body);
	border-radius: var(--rt-radius);
}
.rt-skip:focus { top: 8px; }

.rt-btn,
.rt-btn:visited {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0 22px;
	border: 2px solid var(--rt-orange);
	border-radius: 999px;
	background: var(--rt-orange);
	color: var(--rt-white);
	font: 700 14px/1 var(--rt-font-heading);
	letter-spacing: .02em;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color .15s, border-color .15s, color .15s;
}
.rt-btn:hover,
.rt-btn:focus-visible {
	background: var(--rt-orange-dark);
	border-color: var(--rt-orange-dark);
	color: var(--rt-white);
	text-decoration: none;
}
.rt-btn--ghost,
.rt-btn--ghost:visited {
	background: transparent;
	color: var(--rt-slate-dark);
	border-color: var(--rt-blue-400);
}
.rt-btn--ghost:hover,
.rt-btn--ghost:focus-visible {
	background: transparent;
	border-color: var(--rt-slate-dark);
	color: var(--rt-slate-dark);
}

.rt-utility a:focus-visible,
.rt-header a:focus-visible,
.rt-header button:focus-visible,
.rt-footer a:focus-visible {
	outline: 2px solid var(--rt-orange);
	outline-offset: 3px;
}

/* ---------- Utility bar ---------- */

.rt-utility {
	background: var(--rt-slate-dark);
	color: var(--rt-blue-300);
	font: 400 13px/1.4 var(--rt-font-body);
}
.rt-utility__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	min-height: 38px;
}
.rt-utility__contact { display: flex; align-items: center; gap: 24px; }
.rt-utility a,
.rt-utility a:visited {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	color: var(--rt-blue-300);
	text-decoration: none;
	white-space: nowrap;
}
.rt-utility a:hover { color: var(--rt-white); }
.rt-utility svg { width: 14px; height: 14px; flex: none; fill: currentColor; opacity: .75; }
.rt-utility a:hover svg { opacity: 1; }
.rt-utility abbr { text-decoration: none; border: 0; cursor: inherit; }
.rt-utility__area span { letter-spacing: .03em; }


/* ---------- Header ---------- */

.rt-header {
	position: relative;
	z-index: 200;
	background: var(--rt-white);
	border-bottom: var(--rt-hair);
}
.rt-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
	min-height: 84px;
}
.rt-logo { display: block; flex: none; line-height: 0; }
.rt-logo img { display: block; width: auto; height: 52px; }

.rt-nav { display: flex; align-items: center; gap: 28px; }

.rt-menu,
.rt-menu .sub-menu {
	margin: 0;
	padding: 0;
	list-style: none;
}
.rt-menu { display: flex; align-items: center; gap: 4px; }
.rt-menu li {
	position: relative;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 14px;
	line-height: 1.3;
}
.rt-menu li::before,
.rt-menu li::marker { content: none; }

.rt-menu a,
.rt-menu a:visited {
	display: block;
	padding: 10px 12px;
	color: var(--rt-slate-dark);
	font: 600 14px/1.3 var(--rt-font-heading);
	text-decoration: none;
	transition: color .15s;
}
.rt-menu > li > a { position: relative; }
.rt-menu > li > a::after {
	content: '';
	position: absolute;
	left: 12px;
	right: 12px;
	bottom: 2px;
	height: 2px;
	background: var(--rt-orange);
	transform: scaleX(0);
	transition: transform .15s;
}
.rt-menu > li > a:hover,
.rt-menu > li.current-menu-item > a,
.rt-menu > li.current-menu-ancestor > a { color: var(--rt-black); }
.rt-menu > li > a:hover::after,
.rt-menu > li.current-menu-item > a::after,
.rt-menu > li.current-menu-ancestor > a::after { transform: scaleX(1); }

.rt-menu .menu-item-has-children > a { padding-right: 26px; }
.rt-menu .menu-item-has-children > a::before {
	content: '';
	position: absolute;
	right: 12px;
	top: 50%;
	width: 6px;
	height: 6px;
	margin-top: -5px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: rotate(45deg);
}

.rt-menu .sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 230px;
	padding: 8px;
	background: var(--rt-white);
	border: var(--rt-hair);
	border-radius: var(--rt-radius);
	box-shadow: var(--rt-shadow);
	opacity: 0;
	visibility: hidden;
	transform: translateY(4px);
	transition: opacity .15s, transform .15s, visibility 0s .15s;
}
.rt-menu li:hover > .sub-menu,
.rt-menu li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: none;
	transition: opacity .15s, transform .15s;
}
.rt-menu .sub-menu a,
.rt-menu .sub-menu a:visited {
	padding: 10px 12px;
	border-radius: 6px;
	font-weight: 600;
}
.rt-menu .sub-menu a:hover,
.rt-menu .sub-menu .current-menu-item > a { background: var(--rt-blue-200); color: var(--rt-black); }

.rt-nav-toggle { display: none; }

/* ---------- Mobile navigation ---------- */

@media (max-width: 1080px) {
	.rt-utility .rt-utility__area { display: none; }
	.rt-utility__inner { justify-content: center; }

	.rt-header__inner { min-height: 68px; }
	.rt-logo img { height: 42px; }

	.rt-nav-toggle {
		display: inline-flex;
		align-items: center;
		gap: 10px;
		min-height: 44px;
		margin: 0;
		padding: 0 14px;
		background: transparent;
		border: var(--rt-hair);
		border-radius: var(--rt-radius);
		color: var(--rt-slate-dark);
		font: 700 13px/1 var(--rt-font-heading);
		letter-spacing: .04em;
		text-transform: uppercase;
		cursor: pointer;
	}
	.rt-nav-toggle__bars,
	.rt-nav-toggle__bars::before,
	.rt-nav-toggle__bars::after {
		display: block;
		width: 18px;
		height: 2px;
		background: currentColor;
		transition: transform .2s, background-color .2s;
	}
	.rt-nav-toggle__bars { position: relative; }
	.rt-nav-toggle__bars::before,
	.rt-nav-toggle__bars::after { content: ''; position: absolute; left: 0; }
	.rt-nav-toggle__bars::before { top: -6px; }
	.rt-nav-toggle__bars::after { top: 6px; }
	.rt-nav-open .rt-nav-toggle__bars { background: transparent; }
	.rt-nav-open .rt-nav-toggle__bars::before { transform: translateY(6px) rotate(45deg); }
	.rt-nav-open .rt-nav-toggle__bars::after { transform: translateY(-6px) rotate(-45deg); }

	.rt-nav {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		flex-direction: column;
		align-items: stretch;
		gap: 16px;
		padding: 8px var(--rt-gutter) 24px;
		background: var(--rt-white);
		border-bottom: var(--rt-hair);
		box-shadow: 0 12px 24px rgba(0, 0, 0, .08);
		max-height: calc(100vh - 68px);
		overflow-y: auto;
	}
	.rt-nav-open .rt-nav { display: flex; }

	.rt-menu { flex-direction: column; align-items: stretch; gap: 0; }
	.rt-menu > li { border-bottom: var(--rt-hair); }
	.rt-menu a,
	.rt-menu a:visited { padding: 14px 0; font-size: 16px; }
	.rt-menu > li > a::after { display: none; }
	.rt-menu .menu-item-has-children > a::before { display: none; }
	.rt-menu .sub-menu {
		position: static;
		min-width: 0;
		padding: 0 0 10px 16px;
		border: 0;
		border-left: 2px solid var(--rt-blue-300);
		border-radius: 0;
		box-shadow: none;
		opacity: 1;
		visibility: visible;
		transform: none;
		margin-bottom: 12px;
	}
	.rt-menu .sub-menu a,
	.rt-menu .sub-menu a:visited { padding: 8px 12px; font-size: 15px; font-weight: 600; }
	.rt-nav__cta { width: 100%; min-height: 50px; font-size: 15px; }
}

@media (max-width: 560px) {
	.rt-utility__contact { gap: 16px; }
	.rt-utility .rt-utility__email { display: none; }
}

/* ---------- Footer ---------- */

.rt-footer {
	margin: 0;
	padding: 0;
	background: var(--rt-slate-dark);
	color: var(--rt-blue-300);
	font: 400 15px/1.6 var(--rt-font-body);
}
.rt-footer__grid {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr 1fr;
	gap: 48px var(--rt-gutter);
	padding-top: 64px;
	padding-bottom: 56px;
}
.rt-footer__brand img { display: block; width: 180px; height: auto; margin: 0 0 20px; }
.rt-footer .rt-footer__brand p {
	max-width: 300px;
	margin: 0 0 24px;
	padding: 0;
	color: var(--rt-blue-300);
	font: 400 15px/1.6 var(--rt-font-body);
}
.rt-footer .rt-footer__heading {
	margin: 0 0 18px;
	padding: 0;
	color: var(--rt-white);
	font: 700 12px/1.4 var(--rt-font-heading);
	letter-spacing: .08em;
	text-transform: uppercase;
}
.rt-footer__office {
	margin: 0 0 18px;
	color: var(--rt-blue-300);
	font-style: normal;
	font-size: 14px;
	line-height: 1.6;
}
.rt-footer__office strong { display: block; color: var(--rt-white); font-weight: 600; }

.rt-footer a,
.rt-footer a:visited {
	color: var(--rt-blue-300);
	text-decoration: none;
}
.rt-footer a:hover { color: var(--rt-white); text-decoration: underline; text-underline-offset: 3px; }
.rt-footer .rt-btn,
.rt-footer .rt-btn:visited,
.rt-footer .rt-btn:hover { color: var(--rt-white); text-decoration: none; }

.rt-footer .rt-footer-links,
.rt-footer .rt-social {
	margin: 0;
	padding: 0;
	list-style: none;
}
.rt-footer .rt-footer-links li,
.rt-footer .rt-social li {
	margin: 0 0 10px;
	padding: 0;
	list-style: none;
	font-size: 14px;
	line-height: 1.5;
}
.rt-footer .rt-footer-links li::before,
.rt-footer .rt-social li::before { content: none; }
.rt-social a { display: inline-flex; align-items: center; gap: 10px; }
.rt-social svg { width: 18px; height: 18px; fill: currentColor; flex: none; }

.rt-footer__base {
	border-top: var(--rt-hair-dark);
	padding: 20px 0;
	color: var(--rt-blue-400);
	font-size: 13px;
}

@media (max-width: 900px) {
	.rt-footer__grid { grid-template-columns: 1fr 1fr; }
	.rt-footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
	.rt-footer__grid { grid-template-columns: 1fr; gap: 36px; padding-top: 48px; padding-bottom: 40px; }
}

/* ---------- Plain articles, listings, 404 ---------- */

.rt-article { padding-top: 56px; padding-bottom: 80px; }
.rt-listing { padding-top: 56px; padding-bottom: 80px; }
.rt-article__title {
	margin: 0 0 16px;
	color: var(--rt-slate-dark);
	font: 800 clamp(30px, 4vw, 44px)/1.15 var(--rt-font-heading);
}
.rt-article__meta { margin: 0 0 32px; color: var(--rt-slate-light); font-size: 14px; }
.rt-eyebrow {
	margin: 0 0 12px;
	color: var(--rt-slate-light);
	font: 700 12px/1.4 var(--rt-font-heading);
	letter-spacing: .08em;
	text-transform: uppercase;
}
.rt-404__links { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

.rt-prose { color: var(--rt-slate); font-size: 17px; line-height: 1.7; }
.rt-prose > :first-child { margin-top: 0; }
.rt-prose h1, .rt-prose h2, .rt-prose h3, .rt-prose h4 {
	margin: 1.6em 0 .5em;
	color: var(--rt-slate-dark);
	font-family: var(--rt-font-heading);
	font-weight: 700;
	line-height: 1.25;
}
.rt-prose h1 { font-size: clamp(30px, 4vw, 44px); font-weight: 800; }
.rt-prose h2 { font-size: clamp(24px, 3vw, 30px); }
.rt-prose h3 { font-size: 20px; }
.rt-prose h4 { font-size: 17px; }
.rt-prose p, .rt-prose ul, .rt-prose ol { margin: 0 0 1.1em; }
.rt-prose ul, .rt-prose ol { padding-left: 1.3em; }
.rt-prose li { margin-bottom: .4em; }
.rt-prose a { color: var(--rt-orange); text-underline-offset: 3px; }
.rt-prose a:hover { color: var(--rt-orange-dark); }
.rt-prose img { display: block; border-radius: var(--rt-radius); }

/* ---------- Legacy Divi content (inc/divi-compat.php) ---------- */

.dc-page { overflow-x: clip; }

.dc-section {
	position: relative;
	padding: 56px 0;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}
.dc-section--image::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(29, 32, 34, .78), rgba(29, 32, 34, .35));
}
.dc-section--texture { background-size: auto; background-repeat: repeat; }
.dc-section--image,
.dc-section--dark { color: var(--rt-white); }
.dc-section--image > .dc-row { position: relative; }

/* Divi's first section on these pages is a title band; give it a real hero height. */
.dc-page > .dc-section--image:first-child { padding: 120px 0 72px; }

.dc-row {
	display: flex;
	flex-wrap: wrap;
	gap: 32px;
	max-width: var(--rt-wide);
	margin: 0 auto;
	padding: 16px var(--rt-gutter);
}
.dc-col { min-width: 0; flex: 1 1 100%; }
.dc-col--1_2 { flex-basis: calc(50% - 16px); }
.dc-col--1_3 { flex-basis: calc(33.333% - 22px); }
.dc-col--2_3 { flex-basis: calc(66.666% - 11px); }
.dc-col--1_4 { flex-basis: calc(25% - 24px); }
.dc-col:empty { display: none; }

@media (max-width: 900px) {
	.dc-col--1_4 { flex-basis: calc(50% - 16px); }
	.dc-col--1_3, .dc-col--2_3 { flex-basis: 100%; }
}
@media (max-width: 640px) {
	.dc-col--1_2, .dc-col--1_4 { flex-basis: 100%; }
}

.dc-text { font-size: 16px; }
.dc-text + .dc-text,
.dc-text + .dc-image,
.dc-image + .dc-text { margin-top: 20px; }
.dc-text h1, .dc-text h2, .dc-text h3, .dc-text h4 { margin-top: 0; }
.dc-text--center { text-align: center; }
.dc-text--right { text-align: right; }
.dc-text--light-on-dark,
.dc-text--light-on-dark h1, .dc-text--light-on-dark h2,
.dc-text--light-on-dark h3, .dc-text--light-on-dark h4 { color: var(--rt-white); }
.dc-text--light-on-dark a { color: var(--rt-white); }

/* Divi's "dark text layout" only means light text when the section behind it is actually dark. */
.dc-section:not(.dc-section--dark) .dc-text--light-on-dark,
.dc-section:not(.dc-section--dark) .dc-text--light-on-dark :is(h1, h2, h3, h4) { color: var(--rt-slate-dark); }

.dc-text--boxed { padding: 22px 24px 24px; border-radius: var(--rt-radius); color: var(--rt-slate); }
.dc-text--boxed :is(h1, h2, h3, h4) { color: var(--rt-slate-dark); }
.dc-image + .dc-text--boxed { margin-top: 0; border-radius: 0 0 var(--rt-radius) var(--rt-radius); }
.dc-image:has(+ .dc-text--boxed) img { border-radius: var(--rt-radius) var(--rt-radius) 0 0; aspect-ratio: 3 / 2; object-fit: cover; }
.dc-col:has(.dc-text--boxed) { display: flex; flex-direction: column; }
.dc-col:has(.dc-text--boxed) .dc-text--boxed { flex: 1; }

/* Old builder content hard-codes inline colors and fonts; keep its headings in the brand voice. */
.dc-text h1 { font-size: clamp(32px, 5vw, 52px) !important; font-weight: 800 !important; letter-spacing: -.01em; }
.dc-text h1 span, .dc-text h2 span, .dc-text h3 span { font-family: var(--rt-font-heading) !important; }
.dc-text h2 { font-size: clamp(22px, 2.6vw, 28px); }

.dc-image { margin: 0; }
.dc-image img { display: block; width: 100%; height: auto; border-radius: var(--rt-radius); }

.dc-video {
	position: relative;
	aspect-ratio: 16 / 9;
	border-radius: var(--rt-radius);
	overflow: hidden;
	background: var(--rt-black);
}
.dc-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.dc-cards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: var(--rt-gutter);
}
.dc-card { margin: 0; }
.dc-card__link,
.dc-card__link:visited {
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	background: var(--rt-white);
	border: var(--rt-hair);
	border-radius: var(--rt-radius);
	color: var(--rt-slate-dark);
	text-decoration: none;
	transition: border-color .15s, box-shadow .15s;
}
.dc-card__link:hover { border-color: var(--rt-slate-light); box-shadow: var(--rt-shadow); }
.dc-card__img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 0; }
.dc-card__body { display: flex; flex-direction: column; gap: 12px; padding: 20px; flex: 1; }
.dc-card__title { font: 700 17px/1.35 var(--rt-font-heading); color: var(--rt-slate-dark); }
.dc-card__more { margin-top: auto; color: var(--rt-orange); font: 700 13px/1 var(--rt-font-heading); letter-spacing: .04em; text-transform: uppercase; }

.dc-post-nav {
	display: flex;
	justify-content: space-between;
	gap: var(--rt-gutter);
	padding-top: 24px;
	border-top: var(--rt-hair);
}
.dc-post-nav a { display: flex; flex-direction: column; gap: 4px; max-width: 48%; color: var(--rt-slate-dark); font-weight: 600; text-decoration: none; }
.dc-post-nav a:hover { color: var(--rt-orange); }
.dc-post-nav span { color: var(--rt-slate-light); font: 700 12px/1.4 var(--rt-font-heading); letter-spacing: .08em; text-transform: uppercase; }
.dc-post-nav__next { margin-left: auto; text-align: right; }

.nav-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 40px; }
.nav-links .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 12px;
	border: var(--rt-hair);
	border-radius: var(--rt-radius);
	color: var(--rt-slate-dark);
	text-decoration: none;
}
.nav-links .page-numbers.current { background: var(--rt-slate-dark); border-color: var(--rt-slate-dark); color: var(--rt-white); }