/**
 * RCC theme stylesheet.
 * Self-hosted icon font + component-level CSS that theme.json cannot express
 * (exact Stitch spacing/typography bundles, sticky header, footer grid, nav states).
 * Color/spacing/font-size values reference the CSS custom properties generated
 * by theme.json so there is a single source of truth for every token.
 */

/* ---------------------------------------------------------------------- */
/* Icon font (Material Symbols Outlined) — self-hosted, matches Stitch    */
/* ---------------------------------------------------------------------- */
@font-face {
	font-family: "Material Symbols Outlined";
	font-style: normal;
	font-weight: 100 700;
	font-display: swap;
	src: url("../fonts/material-symbols-outlined-variable.woff2") format("woff2");
}

.material-symbols-outlined {
	font-family: "Material Symbols Outlined";
	font-weight: normal;
	font-style: normal;
	font-size: 24px;
	line-height: 1;
	letter-spacing: normal;
	text-transform: none;
	display: inline-block;
	white-space: nowrap;
	word-wrap: normal;
	direction: ltr;
	-webkit-font-feature-settings: "liga";
	-webkit-font-smoothing: antialiased;
	font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
}

/* ---------------------------------------------------------------------- */
/* Typography utility classes — exact Stitch token bundles                */
/* (size + weight + line-height + tracking + family in one class)         */
/* ---------------------------------------------------------------------- */
.rcc-text-display-lg {
	font-family: var(--wp--preset--font-family--inter);
	font-size: var(--wp--preset--font-size--display-lg);
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -0.02em;
}
.rcc-text-headline-lg {
	font-family: var(--wp--preset--font-family--inter);
	font-size: var(--wp--preset--font-size--headline-lg);
	font-weight: 600;
	line-height: 1.2;
}
.rcc-text-headline-lg-mobile {
	font-family: var(--wp--preset--font-family--inter);
	font-size: var(--wp--preset--font-size--headline-lg-mobile);
	font-weight: 600;
	line-height: 1.2;
}
.rcc-text-headline-md {
	font-family: var(--wp--preset--font-family--inter);
	font-size: var(--wp--preset--font-size--headline-md);
	font-weight: 600;
	line-height: 1.3;
}
.rcc-text-body-lg {
	font-family: var(--wp--preset--font-family--inter);
	font-size: var(--wp--preset--font-size--body-lg);
	font-weight: 400;
	line-height: 1.6;
}
.rcc-text-body-md {
	font-family: var(--wp--preset--font-family--inter);
	font-size: var(--wp--preset--font-size--body-md);
	font-weight: 400;
	line-height: 1.5;
}
.rcc-text-body-sm {
	font-family: var(--wp--preset--font-family--inter);
	font-size: var(--wp--preset--font-size--body-sm);
	font-weight: 400;
	line-height: 1.5;
}
.rcc-text-label-caps {
	font-family: var(--wp--preset--font-family--jetbrains-mono);
	font-size: var(--wp--preset--font-size--label-caps);
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0.05em;
}
.rcc-text-data-mono {
	font-family: var(--wp--preset--font-family--jetbrains-mono);
	font-size: var(--wp--preset--font-size--data-mono);
	font-weight: 400;
	line-height: 1.4;
}

/* ---------------------------------------------------------------------- */
/* Skip link — invisible until keyboard focus, no visual design impact    */
/* ---------------------------------------------------------------------- */
.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100000;
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--on-primary);
	padding: var(--wp--preset--spacing--sm) var(--wp--preset--spacing--md);
}
.skip-link:focus {
	left: var(--wp--preset--spacing--md);
	top: var(--wp--preset--spacing--md);
}

/* ---------------------------------------------------------------------- */
/* Button style variants (DESIGN.md: Primary / Secondary / Ghost)         */
/* Primary is the core button default set in theme.json.                 */
/* ---------------------------------------------------------------------- */
.wp-block-button.is-style-secondary .wp-block-button__link {
	background-color: transparent;
	color: var(--wp--preset--color--primary);
	border: 1px solid var(--wp--preset--color--primary);
}
.wp-block-button.is-style-secondary .wp-block-button__link:hover {
	background-color: color-mix(in srgb, var(--wp--preset--color--primary) 5%, transparent);
	color: var(--wp--preset--color--primary);
}
.wp-block-button.is-style-ghost .wp-block-button__link {
	background-color: transparent;
	color: var(--wp--preset--color--on-background);
	border: none;
}
.wp-block-button.is-style-ghost .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--surface-container-low);
}

/* ---------------------------------------------------------------------- */
/* Site header                                                            */
/* ---------------------------------------------------------------------- */
.site-header {
	position: sticky;
	top: 0;
	z-index: 50;
	width: 100%;
	background-color: var(--wp--preset--color--surface);
	border-bottom: 1px solid var(--wp--preset--color--outline-variant);
}
.site-header__inner {
	max-width: var(--wp--custom--container--max);
	margin-inline: auto;
	padding-inline: var(--wp--custom--container--gutter);
	height: 80px;
}
/*
 * Specificity note: WordPress core ships `.wp-block-site-logo.is-default-size img
 * { width: 120px; height: auto; }` (wp-includes/blocks/site-logo/style.css),
 * which is two classes + a type selector. `.site-header__logo img` alone is only
 * one class + a type selector, so core's rule was winning and forcing the logo
 * to render at its default 120px width instead of the approved 48px-tall size.
 * This selector adds a third class-level qualifier so it reliably outranks core's
 * rule regardless of stylesheet load order.
 */
.site-header .site-header__inner .site-header__logo img,
.site-header .site-header__inner .site-header__logo svg {
	width: auto;
	height: 48px;
	max-width: none;
	object-fit: contain;
}
.site-header__nav .wp-block-navigation__container {
	gap: var(--wp--preset--spacing--xl);
}
.site-header .wp-block-navigation-item__content {
	font-family: var(--wp--preset--font-family--inter);
	font-size: var(--wp--preset--font-size--body-md);
	color: var(--wp--preset--color--on-surface-variant);
	padding: 0;
	transition: color 0.2s ease;
}
.site-header .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--primary);
}
.site-header .current-menu-item > .wp-block-navigation-item__content,
.site-header .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content {
	color: var(--wp--preset--color--primary);
	font-weight: 700;
	border-bottom: 2px solid var(--wp--preset--color--primary);
	padding-bottom: var(--wp--preset--spacing--xs);
}

/*
 * WordPress core (wp-includes/blocks/navigation/style.css) hardcodes the
 * switch between the inline nav row and the hamburger overlay to a single
 * `@media (min-width: 600px)` breakpoint — it shows the inline links and
 * hides the toggle button at 600px regardless of whether they actually fit.
 * With this header's logo + 7 nav links + REQUEST INFORMATION (wider than
 * the previous GET QUOTE label, and now padded to match the site's primary-
 * button proportions), the inline row runs out of room around ~1197px
 * (measured live), so the links were wrapping onto a second line instead of
 * collapsing to the hamburger.
 *
 * This overrides that single breakpoint with a wider one (1240px, with a
 * safety margin above the measured failure point) so the header switches to
 * the hamburger before anything wraps, while leaving the approved desktop
 * layout (>=1240px) and the existing mobile overlay behavior (<600px)
 * untouched. Selectors are scoped under .site-header and stacked to a higher
 * specificity than core's rules so they win regardless of stylesheet order.
 */
@media (min-width: 600px) and (max-width: 1239.98px) {
	.site-header .site-header__nav.wp-block-navigation .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}
	.site-header .site-header__inner .site-header__nav.wp-block-navigation .wp-block-navigation__responsive-container:not(.is-menu-open) {
		display: none;
	}
}

.site-header__actions {
	gap: var(--wp--preset--spacing--md);
}
/*
 * Specificity note: WordPress core's global styles include `body
 * .is-layout-flex { display: flex }`, which outranks a plain
 * `.site-header__cta { display: none }` (one type selector + one class
 * beats one class alone). That let the CTA stay visible on mobile all
 * along; it only became visually obvious once REQUEST INFORMATION's wider
 * padding made the hidden-but-rendered button wrap letter-by-letter over
 * the hero. Chaining the ancestor classes here restores the intended
 * mobile-hide.
 */
.site-header .site-header__inner .site-header__cta {
	display: none;
}
@media (min-width: 768px) {
	.site-header .site-header__inner .site-header__cta {
		display: block;
	}
}
/*
 * Matches the established primary-button proportions used elsewhere on the
 * site (e.g. .rcc-hero__actions .wp-block-button__link): the theme.json
 * button default alone only gives 2px radius / 16px-24px padding, not the
 * approved 8px radius / 16px-40px padding language.
 */
.site-header__cta .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: var(--wp--preset--spacing--md) var(--wp--preset--spacing--xl);
	border-radius: var(--wp--custom--radius--xl);
}
.site-header__cta .wp-block-button__link:active {
	opacity: 0.8;
}

/* ---------------------------------------------------------------------- */
/* Site footer                                                            */
/* ---------------------------------------------------------------------- */
.site-footer {
	width: 100%;
	margin-top: var(--wp--preset--spacing--xl);
	background-color: var(--wp--preset--color--surface-container-highest);
	border-top: 1px solid var(--wp--preset--color--outline-variant);
}
.site-footer__grid {
	max-width: var(--wp--custom--container--max);
	margin-inline: auto;
	padding: var(--wp--preset--spacing--xl) var(--wp--custom--container--gutter);
	display: grid;
	grid-template-columns: repeat(1, 1fr);
	gap: var(--wp--custom--container--gutter);
}
.site-footer__col {
	margin: 0;
}
@media (min-width: 768px) {
	.site-footer__grid {
		grid-template-columns: repeat(12, 1fr);
		/*
		 * start, not the grid default (stretch): each column now carries a
		 * border-left (see below) that would otherwise stretch to match
		 * the tallest column's height, making a short column's divider
		 * run well past its own content. start keeps each column — and
		 * its divider — sized to its own natural height only.
		 */
		align-items: start;
	}
	.site-footer__col--brand { grid-column: span 3; }
	.site-footer__col--nav { grid-column: span 2; }
	.site-footer__col--support { grid-column: span 3; }
	.site-footer__col--contact { grid-column: span 4; }
	/*
	 * Subtle vertical dividers between the four columns — desktop/tablet
	 * only (this whole block is scoped to the 12-column layout); on
	 * mobile the columns stack in a single column, so there's nothing to
	 * divide and no extra CSS is needed to remove them.
	 */
	.site-footer__col--nav,
	.site-footer__col--support,
	.site-footer__col--contact {
		border-left: 1px solid var(--wp--preset--color--outline-variant);
		padding-left: var(--wp--preset--spacing--lg);
	}
}
/*
 * Same specificity fix as .site-header__logo above: WordPress core ships
 * `.wp-block-site-logo.is-default-size img { width: 120px; height: auto; }`
 * (two classes + a type selector), which beats a single-class selector, so
 * this needs an equivalent three-class-deep selector to reliably win.
 */
.site-footer .site-footer__grid .site-footer__logo img,
.site-footer .site-footer__grid .site-footer__logo svg {
	width: auto;
	height: 40px;
	max-width: none;
	object-fit: contain;
}
.site-footer__logo {
	margin: 0 0 var(--wp--preset--spacing--md);
}
.site-footer__logo::after {
	content: "";
	display: block;
	width: 40px;
	height: 2px;
	margin-top: var(--wp--preset--spacing--md);
	background-color: var(--wp--preset--color--primary);
}
.site-footer__col p {
	font-family: var(--wp--preset--font-family--inter);
	font-size: var(--wp--preset--font-size--body-sm);
	color: var(--wp--preset--color--on-surface-variant);
	max-width: 20rem;
	margin: 0 0 var(--wp--preset--spacing--xs);
}
.site-footer__heading {
	font-family: var(--wp--preset--font-family--jetbrains-mono);
	font-size: var(--wp--preset--font-size--label-caps);
	font-weight: 500;
	letter-spacing: 0.05em;
	color: var(--wp--preset--color--on-surface);
	margin: 0 0 var(--wp--preset--spacing--lg);
}
.site-footer__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--sm);
}
.site-footer__list a {
	font-family: var(--wp--preset--font-family--inter);
	font-size: var(--wp--preset--font-size--body-sm);
	color: var(--wp--preset--color--on-surface-variant);
	text-decoration: none;
	transition: color 0.2s ease;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--sm);
}
.site-footer__list a:hover {
	color: var(--wp--preset--color--primary);
}
/*
 * Understated right-arrow on each Navigation/Technical Support link — the
 * same self-hosted Material Symbols ::before/::after technique used
 * elsewhere on the site (e.g. Ordering/Pricing icons), so no markup change
 * or new icon dependency is needed.
 */
.site-footer__list a::after {
	content: "arrow_forward";
	font-family: "Material Symbols Outlined";
	font-weight: normal;
	font-style: normal;
	font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
	-webkit-font-feature-settings: "liga";
	font-feature-settings: "liga";
	-webkit-font-smoothing: antialiased;
	font-size: 16px;
	line-height: 1;
	color: var(--wp--preset--color--primary);
	flex-shrink: 0;
}
.site-footer__contact-list {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--md);
}
.site-footer__contact-item {
	display: flex;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--sm);
}
/*
 * Subtle separators between the three contact rows — first row stays
 * flush at the top, the other two get a thin top border plus a little
 * extra padding so the line doesn't crowd the icon/text above it.
 */
.site-footer__contact-item:not(:first-child) {
	padding-top: var(--wp--preset--spacing--sm);
	border-top: 1px solid var(--wp--preset--color--outline-variant);
}
.site-footer__contact-item p {
	font-family: var(--wp--preset--font-family--inter);
	font-size: var(--wp--preset--font-size--body-sm);
	color: var(--wp--preset--color--on-surface-variant);
	margin: 0;
	/*
	 * min-width: 0 lets this flex item shrink below its own content's
	 * intrinsic width (the default is min-width: auto, i.e. never
	 * narrower than its longest unbreakable token) so overflow-wrap can
	 * actually break the long email address instead of forcing the whole
	 * footer wider than the viewport — the site-wide footer overflow
	 * around tablet width traced back to exactly this.
	 */
	min-width: 0;
	overflow-wrap: break-word;
}
/*
 * The phone/email are now real tel:/mailto: links (see parts/footer.html)
 * — this keeps their appearance identical to the plain text they were
 * before (same color, no underline), with the same hover treatment
 * already used by every other footer link.
 */
.site-footer__contact-item p a {
	color: inherit;
	text-decoration: none;
}
.site-footer__contact-item p a:hover {
	color: var(--wp--preset--color--primary);
}
.site-footer__contact-item .material-symbols-outlined {
	font-size: 16px;
	color: var(--wp--preset--color--primary);
	margin-top: 2px;
	flex-shrink: 0;
}
.site-footer__bottom {
	max-width: var(--wp--custom--container--max);
	margin-inline: auto;
	padding: var(--wp--preset--spacing--md) var(--wp--custom--container--gutter);
	border-top: 1px solid var(--wp--preset--color--outline-variant);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--wp--preset--spacing--md);
}
.site-footer__bottom > * {
	margin: 0;
}
@media (min-width: 768px) {
	.site-footer__bottom {
		flex-direction: row;
		justify-content: space-between;
	}
}
.site-footer__bottom p {
	font-family: var(--wp--preset--font-family--inter);
	font-size: var(--wp--preset--font-size--body-sm);
	color: var(--wp--preset--color--on-surface-variant);
	margin: 0;
}
.site-footer__bottom-links a {
	font-family: var(--wp--preset--font-family--inter);
	font-size: var(--wp--preset--font-size--body-sm);
	color: var(--wp--preset--color--on-surface-variant);
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--xs);
}
.site-footer__bottom-links a:hover {
	color: var(--wp--preset--color--primary);
}
.site-footer__bottom-links a::after {
	content: "arrow_forward";
	font-family: "Material Symbols Outlined";
	font-weight: normal;
	font-style: normal;
	font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
	-webkit-font-feature-settings: "liga";
	font-feature-settings: "liga";
	-webkit-font-smoothing: antialiased;
	font-size: 14px;
	line-height: 1;
	color: var(--wp--preset--color--primary);
}