/*
 * Archer Experience — styles Elementor's atomic classes can't express:
 * per-project grid spans, element states set by JS or by Elementor
 * widgets, and page-type variants. Colours and fonts come from the
 * ax-* Elementor variables.
 */

html,
body {
	background-color: var(--ax-black, #000);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

body {
	overflow-x: hidden;
}

::selection {
	background: var(--ax-sand, #bfb49e);
	color: var(--ax-black, #000);
}

/* ── Header ────────────────────────────────────────────────────────────────
 * Fixed over the hero. archer.js adds .is-scrolled (black bar, tighter
 * padding) once the page moves, and .is-hidden while scrolling down. */

.elementor-location-header .ax-header.is-scrolled {
	background-color: var(--ax-black, #000);
	padding-top: 22px;
	padding-bottom: 22px;
}

.elementor-location-header .ax-header.is-hidden {
	transform: translateY(-100%);
}

/* Keep the header below the WordPress admin bar for logged-in users. */
.admin-bar .elementor-location-header .ax-header {
	top: 32px;
}

@media (max-width: 782px) {
	.admin-bar .elementor-location-header .ax-header {
		top: 46px;
	}
}

/* ── Home hero film ────────────────────────────────────────────────────────
 * archer.js adds a Vimeo background player over the hero image. The 16:9
 * player is scaled to cover the hero and fades in once it starts playing. */

.ax-hero-film {
	position: absolute;
	inset: 0;
	container-type: size;
	pointer-events: none;
	opacity: 0;
	transition: opacity 1.2s ease;
}

.ax-hero-film.is-playing {
	opacity: 1;
}

.ax-hero-film iframe {
	position: absolute;
	top: 50%;
	left: 50%;
	width: max(100cqw, 177.78cqh);
	height: max(100cqh, 56.25cqw);
	border: 0;
	transform: translate(-50%, -50%);
}

/* ── Portfolio grid ─────────────────────────────────────────────────────────
 * Loop items get .archer-span-N from inc/projects.php (2–8 of 8 columns).
 * Narrow tiles are 3:2, wide ones 16:9 and full-width ones 21:9, so mixed
 * widths stagger down the page. Tablets: wide tiles fill the row; phones: one
 * column. */

@media (min-width: 1025px) {
	.ax-grid-8 > .archer-span-2 { grid-column: span 2; }
	.ax-grid-8 > .archer-span-3 { grid-column: span 3; }
	.ax-grid-8 > .archer-span-4 { grid-column: span 4; }
	.ax-grid-8 > .archer-span-5 { grid-column: span 5; }
	.ax-grid-8 > .archer-span-6 { grid-column: span 6; }
	.ax-grid-8 > .archer-span-8 { grid-column: span 8; }

	.archer-span-5 .ax-card-img,
	.archer-span-6 .ax-card-img { aspect-ratio: 16 / 9; }
	.archer-span-8 .ax-card-img { aspect-ratio: 21 / 9; }
}

@media (min-width: 768px) and (max-width: 1024px) {
	.ax-grid-8 > .archer-span-5,
	.ax-grid-8 > .archer-span-6,
	.ax-grid-8 > .archer-span-8 { grid-column: 1 / -1; }

	.archer-span-5 .ax-card-img,
	.archer-span-6 .ax-card-img,
	.archer-span-8 .ax-card-img { aspect-ratio: 16 / 9; }
}

.ax-media {
	overflow: hidden;
}

.ax-media:hover .ax-card-img,
.ax-service:hover img {
	transform: scale(1.035);
}

.ax-card-title a,
.ax-card-title {
	color: inherit;
}

/* ── Type details ──────────────────────────────────────────────────────── */

/* "…built by people" in sand, "who actually build hotels." in white. */
.ax-two-tone span {
	color: var(--ax-white, #fff);
}

/* Italic second line of statements and the footer call to action. */
.ax-statement em,
.ax-footer-heading em {
	font-style: italic;
}

.ax-statement em,
.ax-em-sand em {
	color: var(--ax-sand, #bfb49e);
}

.ax-em-sand em {
	font-style: italic;
}

/* ── Stats count-up ────────────────────────────────────────────────────────
 * archer.js counts each .ax-count from zero when it scrolls into view. */

.ax-count {
	font-variant-numeric: lining-nums tabular-nums;
}

/* ── Approach steps (e-tabs) ───────────────────────────────────────────── */

.ax-step-dot[aria-selected="true"] {
	background-color: var(--ax-white, #fff);
}

.ax-step-panel:not([hidden]) .ax-step {
	animation: ax-step-in 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes ax-step-in {
	from { opacity: 0; transform: translateY(24px); }
	to   { opacity: 1; transform: none; }
}

/* The target narrows with each step: step N lights ring N, outside in. */
.ax-step-target .ax-ring {
	stroke: currentColor;
	stroke-width: 1;
	transition: stroke 0.6s ease, stroke-width 0.6s ease;
}

.ax-step-panel:nth-child(1) .ax-ring-1,
.ax-step-panel:nth-child(2) .ax-ring-2,
.ax-step-panel:nth-child(3) .ax-ring-3,
.ax-step-panel:nth-child(4) .ax-ring-4,
.ax-step-panel:nth-child(5) .ax-ring-5,
.ax-step-panel:nth-child(6) .ax-ring-6 {
	stroke: var(--ax-sand, #bfb49e);
	stroke-width: 3;
}

/* ── Menu overlay (Elementor popup) ───────────────────────────────────── */

.elementor-popup-modal .dialog-close-button {
	display: none;
}

.ax-menu-link.is-current,
.ax-menu-link.is-current a {
	color: var(--ax-black, #000);
}

.ax-ui.is-current,
.ax-ui.is-current a {
	color: var(--ax-sand, #bfb49e);
}

/* ── Project pages ─────────────────────────────────────────────────────────
 * Projects sit on white, so the closing call to action turns white and the
 * footer black with a sand heading, as in the design. */

.single-project .ax-target-cta {
	background-color: var(--ax-white, #fff);
	background-image: none;
	color: var(--ax-black, #000);
}

.single-project .ax-footer {
	background-color: var(--ax-black, #000);
}

.single-project .ax-footer-heading {
	color: var(--ax-sand, #bfb49e);
}

/* Gallery built with image and columns blocks in the project editor. */
.ax-project-gallery .elementor-widget-container > * + *,
.ax-project-gallery .elementor-widget-theme-post-content > * + * {
	margin-top: 16px;
}

.ax-project-gallery .wp-block-columns {
	gap: 16px;
	margin: 0;
}

.ax-project-gallery .wp-block-image,
.ax-project-gallery .wp-block-column > .wp-block-image {
	margin: 0;
}

.ax-project-gallery .wp-block-image img {
	display: block;
	width: 100%;
	height: auto;
}

.ax-project-gallery .wp-block-columns .wp-block-image img {
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

/* ── Contact form ──────────────────────────────────────────────────────── */

.ax-input::placeholder {
	color: var(--ax-white, #fff);
	opacity: 1;
}

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