/**
 * Global chrome: header, mobile drawer, footer.
 */

/* --------------------------------------------------------------- Header -- */
/* Figma 0:435 — 1440x96, px130 py16, bottom rule grey-100 */

.dkx-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--dkx-white);
	border-bottom: 1px solid var(--dkx-grey-100);
}

/* Overlay variant — Figma 0:69. Sits on top of the hero image: no background,
   white logo and links, inverted CTA. A 148px top gradient keeps the links
   legible against bright photography. */

.dkx-header--overlay {
	position: absolute;
	inset: 0 0 auto;
	background: transparent;
	border-bottom-color: transparent;
	color: var(--dkx-white);
}

.dkx-header--overlay::before {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	height: 148px;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0) 100%);
	pointer-events: none;
}

.dkx-header--overlay .dkx-header__inner {
	position: relative;
}

.dkx-header--overlay .dkx-nav__link {
	color: var(--dkx-white);
}

/* The packaged mark is black artwork; invert it on dark backgrounds. */
.dkx-header--overlay .dkx-logo__img {
	filter: invert(1) brightness(2);
}

.dkx-header--overlay .dkx-btn--solid {
	background: var(--dkx-white);
	color: var(--dkx-black-900);
}

.dkx-header--overlay .dkx-btn--solid:hover,
.dkx-header--overlay .dkx-btn--solid:focus-visible {
	background: var(--dkx-grey-100);
}

.dkx-header--overlay .dkx-circle-btn {
	background: var(--dkx-white);
	color: var(--dkx-black-900);
}

.dkx-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	max-width: var(--dkx-canvas);
	margin-inline: auto;
	padding: 16px var(--dkx-gutter);
}

.dkx-header__start {
	display: flex;
	align-items: center;
	gap: 64px;
}

.dkx-logo {
	display: block;
	flex: 0 0 auto;
}

.dkx-logo__img {
	width: auto;
	height: 64px;
	object-fit: contain;
}

/* Primary nav — Figma: gap 40, text-base/regular black-900 */

.dkx-nav__list {
	display: flex;
	align-items: center;
	gap: 40px;
}

.dkx-nav__link {
	position: relative;
	display: inline-block;
	font-size: var(--dkx-fs-base);
	font-weight: var(--dkx-fw-regular);
	line-height: var(--dkx-lh-body);
	color: var(--dkx-black-900);
	white-space: nowrap;
	transition: color var(--dkx-transition);
}

.dkx-nav__link::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -4px;
	height: 1px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--dkx-transition);
}

.dkx-nav__link:hover::after,
.dkx-nav__item.current-menu-item > .dkx-nav__link::after {
	transform: scaleX(1);
}

.dkx-nav__item.current-menu-item > .dkx-nav__link {
	font-weight: var(--dkx-fw-medium);
}

.dkx-header__end {
	display: flex;
	align-items: center;
	gap: 12px;
}

.dkx-header__toggle {
	display: none;
}

/* Mobile header — Figma 0:648 — px20, logo + CTA + circle toggle */

@media (max-width: 1023px) {
	.dkx-header__start {
		gap: 0;
	}

	.dkx-nav--primary {
		display: none;
	}

	.dkx-header__toggle {
		display: inline-flex;
	}
}

@media (max-width: 560px) {
	.dkx-header__cta .dkx-btn__label {
		display: none;
	}

	.dkx-header__cta {
		width: 48px;
		padding: 10px;
		border-radius: var(--dkx-radius-pill);
	}
}

/* --------------------------------------------------------------- Drawer -- */
/* Figma 0:638 — full-screen white overlay, 44px link rows */

.dkx-drawer {
	position: fixed;
	inset: 0;
	z-index: 200;
	display: flex;
	flex-direction: column;
	background: var(--dkx-white);
	visibility: hidden;
	opacity: 0;
	transition: opacity var(--dkx-transition), visibility var(--dkx-transition);
}

/* The author-level display:flex above would otherwise beat the UA [hidden] rule. */
.dkx-drawer[hidden] {
	display: none;
}

.dkx-drawer.is-open {
	visibility: visible;
	opacity: 1;
}

.dkx-drawer__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 16px var(--dkx-gutter-mobile);
	border-bottom: 1px solid var(--dkx-grey-100);
}

/* Figma 0:640 — 48px of breathing room, then the list runs full-bleed. */
.dkx-drawer__body {
	flex: 1;
	overflow-y: auto;
	padding-top: 48px;
}

/* Figma 0:641 — hairline above the list, one below each row. */
.dkx-drawer__list {
	display: flex;
	flex-direction: column;
	border-top: 1px solid var(--dkx-grey-100);
}

.dkx-drawer__item {
	border-bottom: 1px solid var(--dkx-grey-100);
}

.dkx-drawer__link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 10px var(--dkx-gutter-mobile);
	font-size: var(--dkx-fs-base);
	line-height: var(--dkx-lh-body);
	color: var(--dkx-black-900);
	transition: background-color var(--dkx-transition);
}

.dkx-drawer__link:hover,
.dkx-drawer__link:focus-visible {
	background: var(--dkx-grey-100);
}

.dkx-drawer__icon {
	flex: 0 0 var(--dkx-icon);
	width: var(--dkx-icon);
	height: var(--dkx-icon);
	color: var(--dkx-black-900);
}

.dkx-drawer__item.current-menu-item > .dkx-drawer__link {
	font-weight: var(--dkx-fw-medium);
}

.dkx-drawer__footer {
	padding: 0 var(--dkx-gutter-mobile) 32px;
}

/* --------------------------------------------------------------- Footer -- */
/* Figma 0:433 — 1440x319, columns at x=130/730/930/1130 */

.dkx-footer {
	background: var(--dkx-white);
	border-top: 1px solid var(--dkx-grey-100);
}

.dkx-footer__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) repeat(3, minmax(0, 200px));
	gap: 48px 20px;
	max-width: var(--dkx-canvas);
	margin-inline: auto;
	padding: var(--dkx-section-y) var(--dkx-gutter);
}

.dkx-footer__brand {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 32px;
	min-height: 191px;
}

.dkx-footer__logo-contact {
	display: flex;
	align-items: center;
	gap: 32px;
}

.dkx-footer__contact {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.dkx-footer__col-title {
	margin-bottom: 12px;
	font-size: var(--dkx-fs-lg);
	font-weight: var(--dkx-fw-medium);
	line-height: var(--dkx-lh-body);
	text-transform: uppercase;
	color: var(--dkx-black-900);
}

.dkx-footer__links {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.dkx-footer__link {
	font-size: var(--dkx-fs-base);
	line-height: var(--dkx-lh-body);
	color: var(--dkx-grey-700);
	transition: color var(--dkx-transition);
}

.dkx-footer__link:hover {
	color: var(--dkx-black-900);
}

.dkx-footer__bar {
	border-top: 1px solid var(--dkx-grey-100);
}

.dkx-footer__bar-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	max-width: var(--dkx-canvas);
	margin-inline: auto;
	padding: 20px var(--dkx-gutter);
	font-size: var(--dkx-fs-sm);
	color: var(--dkx-grey-600);
}

/* Mobile footer — Figma 0:637 — stacked, 925px tall */

@media (max-width: 900px) {
	.dkx-footer__inner {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.dkx-footer__brand {
		grid-column: 1 / -1;
		min-height: 0;
	}
}

/* Figma 0:637 — the mobile footer centres everything and reverses the link
   columns: Legal, then Rental Assets, then Pages. */
@media (max-width: 560px) {
	.dkx-footer__inner {
		grid-template-columns: minmax(0, 1fr);
		gap: 40px;
		justify-items: center;
		text-align: center;
	}

	.dkx-footer__brand {
		align-items: center;
		gap: 24px;
	}

	.dkx-footer__logo-contact {
		flex-direction: column;
		align-items: center;
		gap: 16px;
	}

	.dkx-footer__contact {
		align-items: center;
	}

	.dkx-footer__links {
		align-items: center;
	}

	.dkx-footer .dkx-socials {
		justify-content: center;
	}

	/* Brand keeps order 0 and stays first. */
	.dkx-footer__inner > .dkx-footer__col:nth-child(2) {
		order: 3;
	}

	.dkx-footer__inner > .dkx-footer__col:nth-child(3) {
		order: 2;
	}

	.dkx-footer__inner > .dkx-footer__col:nth-child(4) {
		order: 1;
	}

	.dkx-footer__bar-inner {
		justify-content: center;
		text-align: center;
	}
}

/* ------------------------------------------------------------ Site frame -- */

.dkx-site {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

.dkx-main {
	flex: 1;
	/*
	 * Belt and braces against horizontal panning on phones. Even if a future
	 * section overflows, it cannot widen the document from here. `clip` rather
	 * than `hidden` so this never becomes a scroll container (which would
	 * break the sticky header and could itself be panned on iOS).
	 */
	overflow-x: hidden;
	overflow-x: clip;
}