/* RTS Theme */

/* ── Layer order ─────────────────────────────────────── */
@layer reset, base, layout, components, sections, utilities;

/* ── Tokens — outside layers, always available ─────────
   Values extracted from the live site's Elementor kit
   (mirror: wp-content/uploads/elementor/css/post-2562.css):
   primary #F05325, secondary #81A0B1, text #424242, accent #FFF929,
   body Roboto 16px/1.5, headings Ubuntu / Ubuntu Condensed,
   container 1200px. Fonts are self-hosted on the live site; the
   @font-face wiring lands with the header/footer design (M3+). */
:root {
	/* Colors */
	--color-primary: #f05325;        /* brand orange (header, links, h2/h4) */
	--color-secondary: #81a0b1;      /* grey-blue */
	--color-accent: #fff929;         /* CTA yellow (buttons) */
	--color-text: #424242;
	--color-dark: #3b3b3b;           /* top bar dark grey (confirm at header build) */
	--color-primary-tint: #f0532524; /* primary @ 14% alpha — light peach panels */
	--color-bg: #ffffff;
	--color-bg-grey: #eeeeee;
	--color-white: #ffffff;
	--color-border: #e0e0e0;

	/* Typography */
	--font-primary: 'Roboto', system-ui, sans-serif;
	--font-heading: 'Ubuntu', system-ui, sans-serif;
	--font-heading-cond: 'Ubuntu Condensed', system-ui, sans-serif;
	--font-light: 300;
	--font-regular: 400;
	--font-medium: 500;
	--font-semibold: 600;
	--font-bold: 700;
	--font-extrabold: 800;

	/* Type scale (kit sizes: 16/17/19/23/30/42/50) */
	--text-xs: 0.75rem;
	--text-sm: 0.875rem;
	--text-base: 1rem;
	--text-lg: 1.0625rem;
	--text-xl: 1.1875rem;
	--text-2xl: 1.4375rem;
	--text-3xl: 1.875rem;
	--text-4xl: 2.625rem;
	--text-5xl: 3.125rem;

	/* Spacing (8px rhythm) */
	--space-1: 0.25rem;
	--space-2: 0.5rem;
	--space-3: 0.75rem;
	--space-4: 1rem;
	--space-6: 1.5rem;
	--space-8: 2rem;
	--space-10: 2.5rem;
	--space-12: 3rem;
	--space-16: 4rem;
	--space-20: 5rem;
	--space-24: 6rem;

	/* Border radius */
	--radius-sm: 4px;
	--radius-md: 8px;
	--radius-lg: 12px;
	--radius-full: 9999px;

	/* Shadows */
	--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
	--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.10);
	--shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);

	/* Transitions */
	--transition-fast: 0.15s ease;
	--transition-base: 0.25s ease;

	/* Z-index */
	--z-header: 100;
	--z-overlay: 199;
	--z-modal: 300;

	/* Layout */
	--container-max: 1200px;
	--container-padding: 2rem;
	--header-height: 70px;
}

@media (max-width: 768px) {
	:root {
		--header-height: 60px;
		--container-padding: 1.25rem;
	}
}

/* ── Reset ───────────────────────────────────────────── */
@layer reset {

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

	body {
		margin: 0;
	}

	h1,
	h2,
	h3,
	h4,
	h5,
	h6 {
		margin: 0;
		font-size: inherit;
		font-weight: inherit;
	}

	p {
		margin: 0;
	}

	ul,
	ol {
		list-style: none;
		padding: 0;
		margin: 0;
	}

	a {
		text-decoration: none;
		color: inherit;
	}

	img,
	video {
		max-width: 100%;
		height: auto;
		display: block;
	}

	button {
		cursor: pointer;
		border: none;
		background: none;
		font: inherit;
		padding: 0;
	}

	input,
	textarea,
	select {
		font: inherit;
	}
}

/* ── Base ────────────────────────────────────────────── */
@layer base {
	html {
		scroll-behavior: smooth;
	}

	@media (prefers-reduced-motion: reduce) {
		html { scroll-behavior: auto; }
	}

	body {
		font-family: var(--font-primary);
		font-size: var(--text-base);
		font-weight: var(--font-regular);
		color: var(--color-text);
		background: var(--color-bg);
		line-height: 1.5;
		-webkit-font-smoothing: antialiased;
	}

	/* Heading roles per the live kit: h1/h2 Ubuntu light, h2/h4 in brand
	   orange, h3/h4 Ubuntu Condensed. */
	h1,
	h2,
	h3,
	h4,
	h5,
	h6 {
		font-family: var(--font-heading);
		line-height: 1.3;
	}

	h1 {
		font-size: var(--text-5xl);
		font-weight: var(--font-light);
		margin-bottom: var(--space-6);
	}

	h2 {
		font-size: var(--text-4xl);
		font-weight: var(--font-light);
		color: var(--color-primary);
		margin-bottom: var(--space-4);
	}

	h3 {
		font-family: var(--font-heading-cond);
		font-size: var(--text-3xl);
		font-weight: var(--font-regular);
		margin-bottom: var(--space-3);
	}

	h4 {
		font-family: var(--font-heading-cond);
		font-size: var(--text-2xl);
		font-weight: var(--font-medium);
		color: var(--color-primary);
		margin-bottom: var(--space-2);
	}

	h5 {
		font-size: var(--text-xl);
		font-weight: var(--font-light);
		font-style: italic;
		line-height: 1.4;
	}

	h6 {
		font-size: var(--text-base);
		font-weight: var(--font-semibold);
		line-height: 1.4;
	}

	p {
		margin-bottom: var(--space-4);
	}

	p:last-child {
		margin-bottom: 0;
	}

	p a,
	main section a:not(.btn) {
		color: var(--color-primary);
		transition: color var(--transition-fast);
	}

	/* The design's only rule-line: the short brand-orange accent divider
	   (live divider widgets). Sections position it; bare <hr> works anywhere. */
	hr {
		border: 0;
		border-top: 3px solid var(--color-primary);
		width: 120px;
		margin: var(--space-4) auto;
	}

	@media (max-width: 767px) {
		h1 {
			font-size: 2.6875rem; /* kit mobile: 43px */
		}

		h2 {
			font-size: 2.5rem; /* kit mobile: 40px */
		}
	}
}

/* ── Utilities ───────────────────────────────────────── */
@layer utilities {
	/* Inline brand-color tags: [primary]…[/primary] etc. in section text
	   fields render as these spans (Section::parseInlineTags). */
	.text-primary {
		color: var(--color-primary);
	}

	.text-secondary {
		color: var(--color-secondary);
	}

	.text-accent {
		color: var(--color-accent);
	}

	.text-dark {
		color: var(--color-text);
	}

	/* The live phone glyph faces the other way than the FA one we ship. */
	.icon-flip {
		transform: scaleX(-1);
	}
}

/* ── Layout ──────────────────────────────────────────── */
@layer layout {
	.container {
		max-width: var(--container-max);
		margin-inline: auto;
		padding-inline: var(--container-padding);
	}

	/* Top bar (dark, socials + phone) */
	.top-bar {
		background: var(--color-dark);
		color: var(--color-white);
		font-size: var(--text-sm);
	}

	.top-bar-inner {
		max-width: var(--container-max);
		margin-inline: auto;
		padding: var(--space-3) var(--container-padding);
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.top-bar-social {
		display: flex;
		gap: var(--space-4);
		align-items: center;
	}

	.top-bar-phone {
		display: flex;
		gap: var(--space-2);
		align-items: center;
		font-family: var(--font-heading);
		font-size: var(--text-base);
	}

	/* Main header (brand orange) */
	.site-header {
		background: var(--color-primary);
		position: relative;
		z-index: var(--z-header);
	}

	.header-inner {
		max-width: var(--container-max);
		margin-inline: auto;
		padding: var(--space-4) var(--container-padding);
		display: flex;
		align-items: center;
		gap: var(--space-8);
	}

	.site-logo img {
		width: 75px;
	}

	.primary-nav {
		margin-left: auto;
	}

	.primary-nav > ul {
		display: flex;
		gap: var(--space-8);
	}

	.primary-nav a {
		color: var(--color-white);
		font-family: var(--font-heading);
		font-size: var(--text-lg);
		text-transform: uppercase;
		padding-block: var(--space-2);
	}

	.primary-nav .sub-menu a {
		text-transform: none;
	}

	.primary-nav li {
		position: relative;
	}

	.primary-nav > ul > li > a:hover {
		text-decoration: underline 3px var(--color-white);
		text-underline-offset: 10px;
	}

	/* Live nav marks parent items with a solid caret after the label. */
	.primary-nav > ul > li.menu-item-has-children > a::after {
		content: "";
		display: inline-block;
		margin-left: var(--space-2);
		border-left: 5px solid transparent;
		border-right: 5px solid transparent;
		border-top: 6px solid currentColor;
		vertical-align: middle;
	}

	/* Live dropdown: orange panel, white items with hairline dividers.
	   Hidden via opacity/visibility (not display) so it can fade-slide in. */
	.primary-nav .sub-menu {
		position: absolute;
		top: 100%;
		left: 0;
		min-width: 260px;
		background: var(--color-primary);
		border-bottom: 2px solid var(--color-white);
		box-shadow: 0 0 4px rgba(54, 54, 54, 0.5);
		z-index: var(--z-header);
		opacity: 0;
		visibility: hidden;
		transform: translateY(10px);
		transition: opacity var(--transition-base), transform var(--transition-base), visibility var(--transition-base);
	}

	.primary-nav li:hover > .sub-menu,
	.primary-nav li:focus-within > .sub-menu {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
	}

	.primary-nav .sub-menu li:not(:last-child) {
		border-bottom: 1px solid var(--color-white);
	}

	.primary-nav .sub-menu a {
		display: block;
		padding: 15px var(--space-4);
		font-size: var(--text-base);
		font-weight: var(--font-light);
		transition: background var(--transition-fast);
	}

	.primary-nav .sub-menu a:hover,
	.primary-nav .sub-menu a:focus {
		background: var(--color-text);
	}

	/* Mobile nav */
	.nav-toggle {
		display: none;
		flex-direction: column;
		gap: 5px;
	}

	.nav-toggle span {
		width: 26px;
		height: 3px;
		background: var(--color-white);
		border-radius: var(--radius-sm);
		transition: transform var(--transition-fast), opacity var(--transition-fast);
	}

	/* Open state morphs the hamburger into an X (live has no separate close). */
	.nav-toggle.is-open span:nth-child(1) {
		transform: translateY(8px) rotate(45deg);
	}

	.nav-toggle.is-open span:nth-child(2) {
		opacity: 0;
	}

	.nav-toggle.is-open span:nth-child(3) {
		transform: translateY(-8px) rotate(-45deg);
	}

	/* Live mobile menu: full-width orange dropdown under the header, same
	   look as the desktop dropdown; fade-slide per client preference. */
	.mobile-nav {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		background: var(--color-primary);
		border-bottom: 2px solid var(--color-white);
		box-shadow: 0 0 4px rgba(54, 54, 54, 0.5);
		z-index: var(--z-modal);
		max-height: 80vh;
		overflow-y: auto;
		opacity: 0;
		visibility: hidden;
		transform: translateY(10px);
		transition: opacity var(--transition-base), transform var(--transition-base), visibility var(--transition-base);
	}

	.mobile-nav.is-open {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
	}

	.mobile-nav li:not(:last-child) {
		border-bottom: 1px solid var(--color-white);
	}

	.mobile-nav a {
		color: var(--color-white);
		display: block;
		font-family: var(--font-heading);
		font-weight: var(--font-light);
		padding: 15px var(--container-padding);
	}

	.mobile-nav > ul > li > a {
		text-transform: uppercase;
	}

	.mobile-nav .sub-menu a {
		padding-left: calc(var(--container-padding) + var(--space-4));
	}

	/* Invisible click-catcher: tapping outside still closes the menu. */
	.nav-overlay {
		position: fixed;
		inset: 0;
		pointer-events: none;
		z-index: var(--z-overlay);
	}

	.nav-overlay.is-open {
		pointer-events: auto;
	}

	/* Mobile header, per live: logo | hamburger | CONTACT US. The CTA stays
	   visible (the components-layer .btn display would win over a layout-layer
	   hide anyway). */
	@media (max-width: 900px) {
		.primary-nav {
			display: none;
		}

		.header-inner {
			padding-block: var(--space-2);
		}

		/* Live mobile logo is ~32px tall. */
		.site-logo img {
			width: 41px;
		}

		/* The hamburger sits right before the CTA, like live. */
		.nav-toggle {
			display: flex;
			margin-left: auto;
			margin-right: var(--space-8);
		}

		.header-cta {
			order: 1;
		}
	}

	/* Footer */
	.site-footer {
		background: var(--color-dark);
		color: var(--color-white);
		padding-block: var(--space-16) var(--space-6);
	}

	.footer-grid {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: var(--space-10);
	}

	.footer-heading {
		color: var(--color-white);
		font-size: var(--text-lg);
		font-weight: var(--font-light);
		border-bottom: 1px solid var(--color-white);
		padding-bottom: var(--space-2);
		display: inline-block;
	}

	.footer-list {
		font-size: var(--text-sm);
		font-weight: var(--font-light);
	}

	.footer-list li {
		margin-bottom: var(--space-3);
	}

	.footer-list--icons li {
		display: flex;
		gap: var(--space-3);
	}

	.footer-list--icons svg {
		flex-shrink: 0;
		margin-top: 2px;
	}

	.footer-list a:hover {
		color: var(--color-primary);
	}

	.footer-social {
		display: flex;
		gap: var(--space-4);
		margin-top: var(--space-6);
	}

	.footer-col--services {
		text-align: center;
	}

	.footer-map {
		margin-top: var(--space-4);
	}

	.footer-col--badges {
		display: flex;
		flex-direction: column;
		gap: var(--space-6);
		align-items: center;
	}

	.footer-bottom {
		max-width: 80%;
		margin-inline: auto;
		margin-top: var(--space-12);
		padding-top: var(--space-4);
		border-top: 1px solid rgba(255, 255, 255, 0.2);
		font-size: var(--text-sm);
		text-align: center;
	}

	@media (max-width: 900px) {
		.footer-grid {
			grid-template-columns: 1fr;
		}
	}
}

/* ── Components ──────────────────────────────────────── */
@layer components {
	/* Button per the live kit: accent bg, Ubuntu 300 17px, dark text,
	   hover → primary bg + white text. The --btn-* fallbacks are the kit
	   defaults; the editor's per-button cog overrides them with tokens. */
	.btn {
		display: inline-block;
		background: var(--color-accent);
		color: var(--color-text);
		font-family: var(--btn-font-family, var(--font-heading));
		font-size: var(--btn-font-size, var(--text-lg));
		font-weight: var(--btn-font-weight, var(--font-light));
		text-transform: uppercase;
		padding: var(--space-4) var(--space-6);
		border-radius: var(--btn-radius, 0);
		box-shadow: var(--btn-shadow, none);
		transition: background var(--transition-fast), color var(--transition-fast);
	}

	.btn:hover,
	.btn:focus {
		background: var(--color-primary);
		color: var(--color-white);
	}

	.btn--outline {
		background: transparent;
		color: var(--color-white);
		border: 2px solid var(--color-white);
	}

	/* Header CTA per the live kit: white bg, black text, hover → accent bg. */
	.btn--white {
		background: var(--color-white);
		color: #000;
		border-radius: var(--btn-radius, 5px);
		font-size: var(--btn-font-size, var(--text-base));
		padding: 14px;
	}

	.btn--white:hover,
	.btn--white:focus {
		background: var(--color-accent);
		color: #000;
	}

	/* Live mobile header CTA is smaller. */
	@media (max-width: 900px) {
		.btn--white {
			padding: 10px 14px;
		}
	}

	/* Blog templates */
	.blog-cover {
		height: 50vh;
		background-size: cover;
		background-position: center;
		position: relative;
	}

	.blog-cover::after {
		content: '';
		position: absolute;
		inset: 0;
		background: rgb(0 0 0 / 0.3);
	}

	.blog-container {
		max-width: 800px;
		margin-inline: auto;
		padding: var(--space-12) var(--container-padding);
	}

	.entry-meta {
		font-size: var(--text-sm);
		font-weight: var(--font-semibold);
		color: var(--color-primary);
		margin-bottom: var(--space-8);
	}

	.archive-cover {
		background: var(--color-primary);
		color: var(--color-white);
		display: flex;
		align-items: center;
		min-height: 40vh;
	}

	.archive-cover-inner {
		max-width: var(--container-max);
		margin-inline: auto;
		padding: var(--space-12) var(--container-padding);
		text-align: center;
		width: 100%;
	}

	.archive-cover h1 {
		color: var(--color-white);
		text-transform: uppercase;
	}

	.blog-archive .navigation.pagination {
		text-align: center;
		padding-bottom: var(--space-16);
	}

	.blog-archive .nav-links {
		display: flex;
		justify-content: center;
		gap: var(--space-3);
	}

	.blog-archive .page-numbers.current {
		color: var(--color-primary);
		font-weight: var(--font-bold);
	}

	/* Legacy utility classes used by imported (pre-rebuild) post content —
	   cover bands, darken overlays, centered containers. */
	.width-100 {
		width: 100%;
		background-size: cover;
		background-position: center;
		position: relative;
	}

	.darken-bg {
		position: absolute;
		inset: 0;
		background: #000;
	}

	.width-100 .container,
	.width-100 .vert-center {
		position: relative;
		z-index: 1;
	}

	.height-100 {
		display: flex;
		align-items: center;
	}

	.vert-center {
		width: 100%;
		max-width: var(--container-max);
		margin-inline: auto;
		padding: var(--space-12) var(--container-padding);
		text-align: center;
		color: var(--color-white);
	}

	.vert-center :where(h1, h2, h3) {
		color: var(--color-white);
	}

	/* Shared section background variants (sections opt in via bg_variant) */
	.sec-bg--grey {
		background: var(--color-bg-grey);
	}

	.sec-bg--dark {
		background: var(--color-dark);
		color: var(--color-white);
	}

	.sec-bg--dark :where(h1, h2, h3, h4, h5, h6) {
		color: var(--color-white);
	}
}