/* ==========================================================================
   All Professional Remodeling Group — base: tokens, reset, typography, links, buttons, lists, focus, utilities.
   Tokens come from theme.json (--wp--preset--*, --wp--custom--*).
   Brand: black + signal yellow, geometric sans (Jost ≈ the old Futura), light grey cards.
   ========================================================================== */

:root {
	--tr-ink: var(--wp--preset--color--ink);
	--tr-graphite: var(--wp--preset--color--graphite);
	--tr-charcoal: var(--wp--preset--color--charcoal);
	--tr-steel: var(--wp--preset--color--steel);
	--tr-muted: var(--wp--preset--color--muted);
	--tr-line: var(--wp--preset--color--line);
	--tr-mist: var(--wp--preset--color--mist);
	--tr-paper: var(--wp--preset--color--paper);
	--tr-yellow: var(--wp--preset--color--yellow);
	--tr-gold: var(--wp--preset--color--gold);
	/* accent aliases used by the shared starter components (accordion, suburb, blog):
	   decoration = yellow, anything that is text/focus = ink (yellow text fails contrast on white) */
	--tr-orange: var(--tr-yellow);
	--tr-orange-deep: var(--tr-ink);
	--tr-orange-text: var(--tr-ink);
	--tr-display: var(--wp--preset--font-family--display);
	--tr-body: var(--wp--preset--font-family--body);
	--tr-gutter: var(--wp--custom--gutter);
	--tr-content: 820px;
	--tr-wide: 1200px;
	--tr-max: 1440px;
	--tr-section: clamp(3.5rem, 8vw, 7rem);
	--tr-r-card: var(--wp--custom--radius--card);
	--tr-r-media: var(--wp--custom--radius--media);
	--tr-r-hero: var(--wp--custom--radius--hero);
	--tr-shadow: var(--wp--custom--shadow--raised);
	--tr-shadow-panel: var(--wp--custom--shadow--panel);
	--tr-ease: cubic-bezier(.2, .7, .2, 1);
	--tr-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
	--tr-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.2 4.2L19 7'/%3E%3C/svg%3E");
	--tr-star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m12 2.8 2.8 5.9 6.4.8-4.7 4.4 1.2 6.3L12 17.1l-5.7 3.1 1.2-6.3L2.8 9.5l6.4-.8z'/%3E%3C/svg%3E");
	--tr-phone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 2.5 9.4 6c.5.6.5 1.4 0 2L8 9.7a12.6 12.6 0 0 0 6.3 6.3l1.7-1.4c.6-.5 1.4-.5 2 0l3.5 2.8c.6.5.7 1.4.2 2l-1.6 2c-.6.7-1.5 1-2.4.8C10.3 20.5 3.5 13.7 2 6.3c-.2-.9.1-1.8.8-2.4l2-1.6c.6-.5 1.5-.4 1.8.2z'/%3E%3C/svg%3E");
	--tr-mail: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 5h18a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1zm9 7.2L4.2 7H4v.6l8 5.3 8-5.3V7h-.2z'/%3E%3C/svg%3E");
	--tr-pin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a7 7 0 0 0-7 7c0 5.2 7 13 7 13s7-7.8 7-13a7 7 0 0 0-7-7zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5z'/%3E%3C/svg%3E");
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 110px; -webkit-text-size-adjust: 100%; }
body { margin: 0; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; overflow-x: clip; }
img, video, iframe { max-width: 100%; height: auto; }
img { display: block; }
figure { margin: 0; }
.wp-block-image { line-height: 0; }
.wp-block-image img { height: auto; }

h1, h2, h3, h4, h5, h6 { text-wrap: balance; overflow-wrap: break-word; margin-block: 0; }
p, li { overflow-wrap: break-word; text-wrap: pretty; }
p { margin-block: 0; }
strong, b { font-weight: 600; color: inherit; }

a { text-underline-offset: .2em; text-decoration-thickness: 1px; transition: color .2s, background-color .2s, border-color .2s, box-shadow .2s; }
/* body copy links: ink, underlined; hover = yellow highlight like the old site's highlight bars */
:where(p, li, td) a:not(.wp-block-button__link, .wp-block-navigation-item__content) { color: inherit; text-decoration-color: currentColor; }
:where(p, li, td) a:not(.wp-block-button__link, .wp-block-navigation-item__content):hover { background: var(--tr-yellow); color: var(--tr-ink); text-decoration-color: transparent; box-shadow: 0 0 0 2px var(--tr-yellow); }

:where(a, button, summary, input, select, textarea, [tabindex]):focus-visible {
	outline: 2px solid var(--tr-ink);
	outline-offset: 3px;
	box-shadow: 0 0 0 5px var(--tr-yellow);
	border-radius: 4px;
}

/* Highlighted words (old H1 had yellow bars behind words) */
.tr-mark { background: linear-gradient(transparent 6%, var(--tr-yellow) 6%, var(--tr-yellow) 94%, transparent 94%); color: var(--tr-ink); padding: 0 .12em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }

/* Label style (eyebrows, small meta). */
.tr-label {
	font-family: var(--tr-body);
	font-size: .8125rem;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--tr-ink);
}

/* Heading size utilities: the old levels stay, these only change the look. */
.tr-h-display { font-size: var(--wp--preset--font-size--heading-xl) !important; line-height: 1.1 !important; }
.tr-h-section { font-size: var(--wp--preset--font-size--heading-lg) !important; line-height: 1.15 !important; font-weight: 400 !important; }
.tr-h-card { font-size: var(--wp--preset--font-size--heading-sm) !important; line-height: 1.25 !important; }
.tr-h-small { font-size: var(--wp--preset--font-size--heading-xs) !important; line-height: 1.35 !important; font-weight: 500 !important; }

.tr-lead { font-size: var(--wp--preset--font-size--lead); line-height: 1.55; }

/* --------------------------------------------------------------------------
   Buttons. Old site: black buttons with white text, yellow pills on dark
   backgrounds. One system: pill, 48px+ tall, arrow chip on hover.
   -------------------------------------------------------------------------- */
.wp-block-buttons { display: flex; flex-wrap: wrap; gap: 12px; }
.wp-block-buttons > .wp-block-button { margin: 0; }
.wp-block-button__link.tr-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 50px;
	padding: 12px 26px;
	border-radius: 999px;
	text-decoration: none;
	font-weight: 500;
	letter-spacing: .01em;
	background: var(--tr-ink);
	color: #fff;
	box-shadow: inset 0 0 0 2px var(--tr-ink);
	transition: background-color .25s var(--tr-ease), color .25s, box-shadow .25s, transform .25s var(--tr-ease);
}
.wp-block-button__link.tr-btn::after {
	content: "";
	width: 16px;
	height: 16px;
	flex: none;
	margin-right: -4px;
	background: currentColor;
	-webkit-mask: var(--tr-arrow) center / contain no-repeat;
	mask: var(--tr-arrow) center / contain no-repeat;
	transition: transform .3s var(--tr-ease);
}
.wp-block-button__link.tr-btn:hover { background: var(--tr-graphite); color: var(--tr-yellow); }
.wp-block-button__link.tr-btn:hover::after { transform: translateX(3px); }

/* Yellow pill (old "GET A QUOTE" / "Request A Free Quote" buttons) */
.is-style-tr-yellow .wp-block-button__link.tr-btn { background: var(--tr-yellow); color: var(--tr-ink); box-shadow: inset 0 0 0 2px var(--tr-yellow); }
.is-style-tr-yellow .wp-block-button__link.tr-btn:hover { background: var(--tr-ink); color: var(--tr-yellow); box-shadow: inset 0 0 0 2px var(--tr-yellow); }

/* Outline (on light or dark backgrounds) */
.is-style-tr-ghost .wp-block-button__link.tr-btn { background: transparent; color: currentColor; box-shadow: inset 0 0 0 2px currentColor; }
.is-style-tr-ghost .wp-block-button__link.tr-btn:hover { background: var(--tr-yellow); color: var(--tr-ink); box-shadow: inset 0 0 0 2px var(--tr-yellow); }

/* Small chip button ("Read More" in cards, service chips) */
.is-style-tr-small .wp-block-button__link.tr-btn { min-height: 44px; padding: 10px 20px; font-size: .9375rem; }

/* Disabled-looking label that is not a link (old "Coming Soon") */
.tr-btn-label { display: inline-flex; align-items: center; min-height: 44px; padding: 10px 20px; border-radius: 999px; background: var(--tr-mist); color: var(--tr-muted); font-size: .9375rem; font-weight: 500; }

/* --------------------------------------------------------------------------
   Lists
   -------------------------------------------------------------------------- */
.wp-block-list { padding-left: 1.2em; }
.wp-block-list li + li { margin-top: .45em; }
.wp-block-list li::marker { color: var(--tr-ink); }
.is-style-tr-check { list-style: none; padding-left: 0; }
.is-style-tr-check li { position: relative; padding-left: 36px; }
.is-style-tr-check li + li { margin-top: .75em; }
.is-style-tr-check li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .15em;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: var(--tr-yellow);
	box-shadow: inset 0 0 0 1.5px var(--tr-ink);
}
.is-style-tr-check li::after {
	content: "";
	position: absolute;
	left: 5px;
	top: calc(.15em + 5px);
	width: 14px;
	height: 14px;
	background: var(--tr-ink);
	-webkit-mask: var(--tr-check) center / contain no-repeat;
	mask: var(--tr-check) center / contain no-repeat;
}

/* --------------------------------------------------------------------------
   Reveal on scroll (JS adds .tr-reveal to below-the-fold blocks only)
   -------------------------------------------------------------------------- */
.tr-reveal { opacity: 0; transform: translateY(16px); transition: opacity .6s var(--tr-ease), transform .6s var(--tr-ease); }
.tr-reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { transition: none !important; animation: none !important; }
	.tr-reveal { opacity: 1; transform: none; }
}

.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; }
.skip-link:focus { position: fixed !important; top: 12px; left: 12px; z-index: 1000; width: auto; height: auto; clip: auto; padding: 12px 18px; background: var(--tr-yellow); color: var(--tr-ink); font-weight: 600; }