/**
 * Firm Starter — main stylesheet.
 * Use only theme.json variables (--wp--preset--*, --wp--custom--*) for colors, sizes and spacing.
 */

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

body {
	margin: 0;
}

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

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

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* Accessibility utilities */
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.skip-link:focus {
	position: fixed !important;
	top: 0;
	left: 0;
	z-index: 100000;
	width: auto;
	height: auto;
	margin: 0;
	clip: auto;
	white-space: normal;
}

.site-main:focus {
	outline: none;
}

/*
 * Google Business Profile map embeds (firm_get_map_embed()): the iframe
 * fills its container, which sets the size per context (aspect ratio or
 * height). The "Skip map" link shows on focus, over the top of the map.
 */
.firm-map {
	position: relative;
	overflow: hidden;
	background-color: var(--wp--preset--color--surface-alt);
}

.firm-map__frame {
	position: absolute;
	inset: 0;
	display: block;
	inline-size: 100%;
	block-size: 100%;
	border: 0;
}

.firm-map .firm-map__skip:focus {
	position: absolute !important;
	inset-block-start: var(--wp--preset--spacing--20);
	inset-inline-start: var(--wp--preset--spacing--20);
	z-index: 1;
	width: auto;
	height: auto;
	margin: 0;
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
	clip: auto;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--primary);
	white-space: nowrap;
}

.firm-map__end {
	position: absolute;
	inset-block-end: 0;
	outline: none;
}

/*
 * Icons: single-color SVGs from assets/icons/ used as masks and painted with
 * currentColor, so their color always comes from the theme tokens.
 * Usage: firm_icon( 'name' ) → <span class="firm-icon firm-icon--name">.
 * One file per Figma icon component; a flipped instance of the same component
 * (e.g. a right arrow drawn as a mirrored left one) adds .firm-icon--mirror
 * instead of a second file.
 */
.firm-icon {
	display: inline-block;
	flex: none;
	inline-size: var(--firm-icon-size, var(--wp--custom--icon--md));
	block-size: var(--firm-icon-size, var(--wp--custom--icon--md));
	background-color: currentColor;
	-webkit-mask: var(--firm-icon) center / contain no-repeat;
	mask: var(--firm-icon) center / contain no-repeat;
}

.firm-icon--chevron { --firm-icon: url("../icons/expand-more.svg"); }
.firm-icon--chevron-down { --firm-icon: url("../icons/chevron-down.svg"); }
.firm-icon--chevron-up { --firm-icon: url("../icons/chevron-up.svg"); }
.firm-icon--chevron-left { --firm-icon: url("../icons/chevron-left.svg"); }
.firm-icon--chevron-left-lg { --firm-icon: url("../icons/chevron-left-lg.svg"); }
.firm-icon--menu { --firm-icon: url("../icons/menu.svg"); }
.firm-icon--close { --firm-icon: url("../icons/close.svg"); }
.firm-icon--phone-small { --firm-icon: url("../icons/phone-small.svg"); }
.firm-icon--phone-button { --firm-icon: url("../icons/phone-button.svg"); }
.firm-icon--facebook { --firm-icon: url("../icons/facebook.svg"); }
.firm-icon--instagram { --firm-icon: url("../icons/instagram.svg"); }
.firm-icon--youtube { --firm-icon: url("../icons/youtube.svg"); }
.firm-icon--search { --firm-icon: url("../icons/search.svg"); }
.firm-icon--linkedin { --firm-icon: url("../icons/linkedin.svg"); }
.firm-icon--x { --firm-icon: url("../icons/x.svg"); }
.firm-icon--star { --firm-icon: url("../icons/star.svg"); }
.firm-icon--control-point { --firm-icon: url("../icons/control-point.svg"); }
.firm-icon--control-point-lg { --firm-icon: url("../icons/control-point-lg.svg"); }
.firm-icon--remove-circle-outline { --firm-icon: url("../icons/remove-circle-outline.svg"); }
.firm-icon--remove-circle-outline-lg { --firm-icon: url("../icons/remove-circle-outline-lg.svg"); }
.firm-icon--home { --firm-icon: url("../icons/home.svg"); }
.firm-icon--home-lg { --firm-icon: url("../icons/home-lg.svg"); }
.firm-icon--rating-stars { --firm-icon: url("../icons/rating-stars.svg"); }
.firm-icon--arrow-forward-ios { --firm-icon: url("../icons/arrow-forward-ios.svg"); }

.firm-icon--mirror { scale: -1 1; }

/* Social icon links */
.social-links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--20);
	margin: 0;
	padding: 0;
	list-style: none;
}

.social-links__link {
	display: inline-flex;
	color: inherit;
	border-radius: var(--wp--custom--radius--full);
}

.social-links__icon {
	--firm-icon-size: var(--wp--custom--icon--lg);
	transition: scale 150ms ease;
}

/* Hover and keyboard focus, the same everywhere (components/social-links):
   the icon grows (a cue that doesn't depend on color) and changes color by
   background. Two classes: the global link hover color (theme.json, printed
   later) would otherwise paint it primary-dark. */
.social-links .social-links__link:is(:hover, :focus-visible) .social-links__icon {
	scale: 1.2;
}

.social-links--on-dark .social-links__link:is(:hover, :focus-visible) {
	color: var(--wp--custom--text--on-primary, var(--wp--preset--color--on-accent));
}

.social-links--on-dark .social-links__link:focus-visible {
	outline: var(--wp--custom--border-width--thick) solid var(--wp--preset--color--base);
	outline-offset: var(--wp--custom--border-width--thick);
}

.social-links--on-light .social-links__link:is(:hover, :focus-visible) {
	color: var(--wp--preset--color--accent);
}

/* Footer: accent as the client asked (2.81:1 on black, pending the
   designer); the focus ring stays base (site-footer.css). */
.social-links--footer .social-links__link:is(:hover, :focus-visible) {
	color: var(--wp--preset--color--accent);
}

/* Reduced motion: the icon still grows, without the transition. */
@media (prefers-reduced-motion: reduce) {
	.social-links__icon {
		transition: none;
	}
}

/*
 * Buttons follow the Figma button component: a minimum height (70px desktop;
 * on mobile the box hugs its content), the border counted inside the box
 * (box-sizing: border-box, set globally) and the label centered. Size, type
 * and min-height come from theme.json (custom.button.*). min-height, not
 * height, so long labels wrap. Contexts that change the display keep flex
 * (or inline-flex) so the label stays centered.
 */
.wp-element-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-align: center;
}

/*
 * Phone links: firm_phone_link() prints a.firm-phone (+ a firm-phone--{context}
 * modifier) with the number in span.firm-phone__number. Each context's look
 * lives with its component (header, footer); the call button variant is
 * shared.
 */
.firm-phone {
	text-decoration: none;
}

/* Inline ([firm_phone] in copy): looks like any content link and inherits
   the surrounding weight (bold text) and size (list items); the number
   doesn't break across lines. */
.firm-phone--inline {
	color: inherit;
	font: inherit;
	text-decoration: underline;
	white-space: nowrap;
}

.firm-phone--inline:hover {
	color: var(--wp--preset--color--primary);
}

/* Call button: a blue variant of the default button. Two classes, because
   the global button styles (:root :where(.wp-element-button)) carry class
   specificity and print after main.css. */
.wp-element-button.firm-phone--button {
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--custom--text--on-primary, var(--wp--preset--color--on-accent));
}

.wp-element-button.firm-phone--button:hover {
	background-color: var(--wp--preset--color--primary-dark);
	color: var(--wp--custom--text--on-primary, var(--wp--preset--color--base));
}

/* Visible focus for custom controls (links get theirs from theme.json). */
:where(button):focus-visible {
	outline: var(--wp--custom--border-width--thick) solid currentColor;
	outline-offset: var(--wp--custom--border-width--thick);
}

/*
 * Heading styles. The visual style comes from these classes (one per
 * font-size slug), never from the element, so any tag can take any style:
 * firm_heading( $text, $tag, $style ) → <$tag class="firm-heading firm-heading--$style">.
 *
 * Optional mobile style: firm_heading( …, array( 'style_mobile' => 'h2' ) ) adds
 * firm-heading--mobile-h2, which sets the size and line height below tablet
 * (48em). It changes only size and line height, not family or case.
 */
.firm-heading {
	margin: 0;
	font-size: var(--firm-heading-size-mobile, var(--firm-heading-size));
	font-weight: 400;
	line-height: var(--firm-heading-line-height-mobile, var(--firm-heading-line-height));
	letter-spacing: var(--wp--custom--letter-spacing--none);
}

.firm-heading:is(
	.firm-heading--display,
	.firm-heading--display-2,
	.firm-heading--h1,
	.firm-heading--h2,
	.firm-heading--h3,
	.firm-heading--h4,
	.firm-heading--h5,
	.firm-heading--h6
) {
	font-family: var(--wp--preset--font-family--display);
}

.firm-heading--display { --firm-heading-size: var(--wp--preset--font-size--display); --firm-heading-line-height: var(--wp--custom--line-height--display); }
.firm-heading--display-2 { --firm-heading-size: var(--wp--preset--font-size--display-2); --firm-heading-line-height: var(--wp--custom--line-height--display-2); }
.firm-heading--h1 { --firm-heading-size: var(--wp--preset--font-size--h-1); --firm-heading-line-height: var(--wp--custom--line-height--h-1); }
.firm-heading--h2 { --firm-heading-size: var(--wp--preset--font-size--h-2); --firm-heading-line-height: var(--wp--custom--line-height--h-2); }
.firm-heading--h3 { --firm-heading-size: var(--wp--preset--font-size--h-3); --firm-heading-line-height: var(--wp--custom--line-height--h-3); }
.firm-heading--h4 { --firm-heading-size: var(--wp--preset--font-size--h-4); --firm-heading-line-height: var(--wp--custom--line-height--h-4); }
.firm-heading--h5 { --firm-heading-size: var(--wp--preset--font-size--h-5); --firm-heading-line-height: var(--wp--custom--line-height--h-5); }
.firm-heading--h6 { --firm-heading-size: var(--wp--preset--font-size--h-6); --firm-heading-line-height: var(--wp--custom--line-height--h-6); }
.firm-heading--caption { --firm-heading-size: var(--wp--preset--font-size--caption); --firm-heading-line-height: var(--wp--custom--line-height--caption); }
.firm-heading--body-lg { --firm-heading-size: var(--wp--preset--font-size--body-lg); --firm-heading-line-height: var(--wp--custom--line-height--body-lg); }
.firm-heading--body { --firm-heading-size: var(--wp--preset--font-size--body); --firm-heading-line-height: var(--wp--custom--line-height--body); }
.firm-heading--body-sm { --firm-heading-size: var(--wp--preset--font-size--body-sm); --firm-heading-line-height: var(--wp--custom--line-height--body-sm); }

.firm-heading--mobile-display { --firm-heading-size-mobile: var(--wp--preset--font-size--display); --firm-heading-line-height-mobile: var(--wp--custom--line-height--display); }
.firm-heading--mobile-display-2 { --firm-heading-size-mobile: var(--wp--preset--font-size--display-2); --firm-heading-line-height-mobile: var(--wp--custom--line-height--display-2); }
.firm-heading--mobile-h1 { --firm-heading-size-mobile: var(--wp--preset--font-size--h-1); --firm-heading-line-height-mobile: var(--wp--custom--line-height--h-1); }
.firm-heading--mobile-h2 { --firm-heading-size-mobile: var(--wp--preset--font-size--h-2); --firm-heading-line-height-mobile: var(--wp--custom--line-height--h-2); }
.firm-heading--mobile-h3 { --firm-heading-size-mobile: var(--wp--preset--font-size--h-3); --firm-heading-line-height-mobile: var(--wp--custom--line-height--h-3); }
.firm-heading--mobile-h4 { --firm-heading-size-mobile: var(--wp--preset--font-size--h-4); --firm-heading-line-height-mobile: var(--wp--custom--line-height--h-4); }
.firm-heading--mobile-h5 { --firm-heading-size-mobile: var(--wp--preset--font-size--h-5); --firm-heading-line-height-mobile: var(--wp--custom--line-height--h-5); }
.firm-heading--mobile-h6 { --firm-heading-size-mobile: var(--wp--preset--font-size--h-6); --firm-heading-line-height-mobile: var(--wp--custom--line-height--h-6); }
.firm-heading--mobile-caption { --firm-heading-size-mobile: var(--wp--preset--font-size--caption); --firm-heading-line-height-mobile: var(--wp--custom--line-height--caption); }
.firm-heading--mobile-body-lg { --firm-heading-size-mobile: var(--wp--preset--font-size--body-lg); --firm-heading-line-height-mobile: var(--wp--custom--line-height--body-lg); }
.firm-heading--mobile-body { --firm-heading-size-mobile: var(--wp--preset--font-size--body); --firm-heading-line-height-mobile: var(--wp--custom--line-height--body); }
.firm-heading--mobile-body-sm { --firm-heading-size-mobile: var(--wp--preset--font-size--body-sm); --firm-heading-line-height-mobile: var(--wp--custom--line-height--body-sm); }

/* tablet: the mobile style no longer applies. */
@media (min-width: 48em) {
	.firm-heading {
		font-size: var(--firm-heading-size);
		line-height: var(--firm-heading-line-height);
	}
}

.firm-heading--caption {
	font-family: var(--wp--preset--font-family--body);
	font-weight: 700;
	letter-spacing: var(--wp--custom--letter-spacing--wide);
	text-transform: uppercase;
}

.firm-heading__line {
	display: block;
}

.firm-heading__highlight {
	color: var(--firm-heading-highlight, inherit);
}

/* Section wrapper: firm_section_start() / firm_section_end(). */
.firm-section {
	position: relative;
}

.firm-section__container {
	position: relative;
	max-inline-size: var(--wp--style--global--content-size);
	margin-inline: auto;
	padding-inline: var(--wp--custom--gutter);
}

/* Heading audit notice: editors only, never shown to visitors. */
.firm-heading-audit {
	position: relative;
	z-index: 101;
	padding: var(--wp--preset--spacing--30) var(--wp--custom--gutter);
	border-block-end: var(--wp--custom--border-width--thick) solid var(--wp--preset--color--error);
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--foreground);
	font-size: var(--wp--preset--font-size--body-sm);
	line-height: var(--wp--custom--line-height--body-sm);
}

.firm-heading-audit p,
.firm-heading-audit ul {
	margin: 0;
}

.firm-heading-audit ul {
	padding-inline-start: var(--wp--preset--spacing--50);
}