/**
 * Onyxtris — component styles from the Stitch design export.
 *
 * The four exported pages each carried their own inline <style> block; those
 * rules are consolidated here. `theme()` lookups from the export are resolved
 * to their literal token values because this file is served as plain CSS
 * rather than compiled through Tailwind.
 */

body {
	background-color: #f7f9fb; /* colors.background */
	color: #191c1e; /* colors.on-background */
}

/* Elevation signifies "containment" — cards lift on hover with a diffused shadow. */
.service-card-hover {
	transition: all 0.3s ease;
}

.service-card-hover:hover {
	transform: translateY(-4px);
	box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
}

.hover-lift {
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.hover-lift:hover {
	transform: translateY(-4px);
	box-shadow: 0 14px 28px rgba(19, 27, 46, 0.08);
}

.soft-shadow {
	box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
}

/* Floating elements keep context of the photography behind them. */
.glass-card {
	background: rgba(255, 255, 255, 0.8);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border: 1px solid #e0e3e5; /* colors.surface-variant */
}

.material-symbols-outlined {
	font-variation-settings: 'FILL' 0, 'wght' 400;
}

.filled-icon {
	font-variation-settings: 'FILL' 1, 'wght' 400;
}

/* Keyboard users get the same 4px gold focus ring the design specifies for inputs. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
	outline: 2px solid #000000; /* colors.primary */
	outline-offset: 2px;
	box-shadow: 0 0 0 4px rgba(233, 195, 73, 0.4); /* colors.secondary-fixed-dim */
}

.onyxtris-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100000;
	padding: 12px 24px;
	background: #191c1e;
	color: #ffffff;
	border-radius: 0.25rem;
}

.onyxtris-skip-link:focus {
	left: 8px;
	top: 8px;
}

/* The mobile drawer is toggled by assets/js/navigation.js. */
.onyxtris-mobile-menu[hidden] {
	display: none;
}

/* Page width -------------------------------------------------------------

   The theme uses two container shapes:

     A. the cap and the horizontal padding on the same element
        (header bar, footer bands, CTA band, some hero sections)
     B. padding on a full-bleed <section>, the cap on an inner <div>
        (roughly forty section wrappers — the dominant idiom)

   Because `box-sizing` is border-box, shape A's cap includes its own padding
   while shape B's does not. Below the cap the two coincide, which is why this
   never showed up at 1280px. Above it they diverge by two gutters: the header
   content would sit 128px narrower than the section content directly beneath
   it, and the logo would no longer line up with the headings below.

   Giving shape A a max-width of "cap plus its gutters" makes both shapes
   produce the same content width and the same left edge at every viewport.

   These values mirror assets/js/tailwind-config.js — container-max and the
   margin-mobile/8/margin-desktop padding steps. Change them together. */
:root {
	--onyxtris-container: 1600px;
	--onyxtris-gutter: 20px;
}

@media (min-width: 768px) {
	:root {
		--onyxtris-gutter: 32px;
	}
}

@media (min-width: 1024px) {
	:root {
		--onyxtris-gutter: 64px;
	}
}

.onyxtris-container-padded {
	max-width: calc(var(--onyxtris-container) + (2 * var(--onyxtris-gutter)));
	margin-inline: auto;
}

/* Nothing may scroll the page sideways at any viewport. */
html,
body {
	max-width: 100%;
	overflow-x: hidden;
}

img,
video,
svg,
iframe {
	max-width: 100%;
	height: auto;
}

/* Long words and URLs must wrap rather than widen their column on mobile. */
h1,
h2,
h3,
p,
li,
dd,
dt,
summary {
	overflow-wrap: break-word;
}

/* Honeypot: off-screen for people, present in the DOM for bots. */
.onyxtris-hp {
	position: absolute !important;
	left: -9999px !important;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Hidden question groups on the branching quote form. */
.onyxtris-field[hidden] {
	display: none !important;
}

/* Native <details> accordion on the FAQ page. */
.onyxtris-faq summary::-webkit-details-marker {
	display: none;
}

.onyxtris-faq summary::marker {
	content: '';
}

/* Fluid display type: the token sizes are the floor and ceiling, and the
   viewport interpolates between them so tablets are not stuck at the mobile
   size or jumped straight to 48px.

   These selectors are element-qualified on purpose. The Tailwind Play CDN
   appends its generated <style> to the document head at runtime, so it lands
   after this file and wins any tie on source order — a bare `.md\:text-display-lg`
   here loses to Tailwind's own rule of the same specificity. Adding the element
   raises specificity to (0,1,1) so these rules hold without !important, which
   would be far harder to debug in a stylesheet the CDN cannot see. */
@media (min-width: 640px) and (max-width: 1023px) {
	h1.text-display-lg,
	h2.text-display-lg,
	h1.md\:text-display-lg,
	h2.md\:text-display-lg {
		font-size: clamp(32px, 4.4vw, 48px);
		line-height: 1.16;
	}
}

/* Above lg the container runs to 1600px, so display type keeps growing with it
   rather than stopping dead at 48px in a column twice as wide as it was drawn
   for. The 48px floor means nothing changes at or below a 1412px viewport. */
@media (min-width: 1024px) {
	h1.text-display-lg,
	h2.text-display-lg,
	h1.md\:text-display-lg,
	h2.md\:text-display-lg {
		font-size: clamp(48px, 3.4vw, 64px);
		line-height: 1.1;
	}
}

/* Give the sticky header and its offset anchors room on small screens. */
:target {
	scroll-margin-top: 6rem;
}

/* Tables inside prose content must scroll rather than stretch the layout. */
.prose table {
	display: block;
	overflow-x: auto;
	max-width: 100%;
}

@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;
	}

	.hover-lift:hover,
	.service-card-hover:hover {
		transform: none;
	}
}

/* Admin bar must not sit on top of the sticky header. */
body.admin-bar .onyxtris-header {
	top: 32px;
}

@media screen and (max-width: 782px) {
	body.admin-bar .onyxtris-header {
		top: 46px;
	}
}

/* ---------------------------------------------------------------------------
 * Virtual tour.
 *
 * Pannellum fills its container absolutely, so the stage has to carry a real
 * height of its own. Aspect ratio rather than a fixed height, capped so the
 * viewer still leaves the scene picker in sight on a wide display, and floored
 * so a phone in portrait gets something taller than a letterbox.
 * ------------------------------------------------------------------------- */

.onyxtris-tour-stage {
	aspect-ratio: 16 / 9;
	min-height: 320px;
	max-height: 70vh;
	width: 100%;
}

.onyxtris-tour-stage:focus {
	outline: none;
}

/*
 * The still images double as the scene picker once the viewer is running.
 * The ring is the `primary` token from tailwind-config.js — restated here
 * because this rule cannot be expressed as a utility on a class the script
 * adds at runtime, which the Play CDN would not have compiled.
 */
.onyxtris-tour-scene.is-active {
	border-color: #000000;
	box-shadow: 0 0 0 2px #000000;
}

/* Pannellum's own chrome, brought closer to the theme's radii. */
.onyxtris-tour .pnlm-container {
	background-color: transparent;
	font-family: inherit;
}

.onyxtris-tour .pnlm-hotspot-base {
	cursor: pointer;
}

/*
 * The doorway markers.
 *
 * Pannellum's sprite is replaced by `cssClass`, because these hot spots run our
 * own click handler for the walk-through animation rather than its instant
 * scene load. 44px so a thumb can hit one, with the ring drawn outside the
 * shape rather than by growing it.
 */
/*
 * Never give this element a transform of its own, and never transition one:
 * Pannellum positions every hot spot by writing `transform` on it on each
 * frame, so a transform here would park the marker at the top-left corner and
 * a transition would make it lag behind the drag. Hover states go on the
 * pseudo-elements instead.
 */
.onyxtris-tour-hotspot {
	width: 44px;
	height: 44px;
	margin: -22px 0 0 -22px;
	border-radius: 9999px;
	background-color: rgba(255, 255, 255, 0.92);
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
	cursor: pointer;
	transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

/* The arrow, drawn rather than fetched — one less request, and no icon font. */
.onyxtris-tour-hotspot::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 12px;
	height: 12px;
	margin: -6px 0 0 -8px;
	border-top: 3px solid #131b2e;
	border-right: 3px solid #131b2e;
	transform: rotate(45deg);
	transition: transform 0.2s ease;
}

/* A slow pulse, so a marker is noticed without demanding attention. */
.onyxtris-tour-hotspot::after {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: 9999px;
	border: 2px solid rgba(255, 255, 255, 0.9);
	animation: onyxtris-tour-pulse 2.6s ease-out infinite;
}

.onyxtris-tour-hotspot:hover,
.onyxtris-tour-hotspot:focus {
	background-color: #ffffff;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.55);
}

.onyxtris-tour-hotspot:hover::before,
.onyxtris-tour-hotspot:focus::before {
	transform: rotate(45deg) scale(1.15);
}

@keyframes onyxtris-tour-pulse {
	0% {
		opacity: 0.9;
		transform: scale(1);
	}

	70% {
		opacity: 0;
		transform: scale(1.7);
	}

	100% {
		opacity: 0;
		transform: scale(1.7);
	}
}

@media (prefers-reduced-motion: reduce) {
	.onyxtris-tour-hotspot::after {
		animation: none;
		opacity: 0.9;
	}

	.onyxtris-tour-hotspot:hover::before,
	.onyxtris-tour-hotspot:focus::before {
		transform: rotate(45deg);
	}
}