/*
 * The menu below the burger breakpoint. A local change on top of the design
 * export, patched into every page by pwsgo_patch_menu() in inc/import.php.
 * Colours, type and motion are the handoff's tokens.
 */

/*
 * Homepage: the header stays on screen. The export places it absolutely inside
 * the hero card; pinned at the same offsets (section padding plus card inset)
 * it looks identical at the top of the page. Tagged by
 * pwsgo_patch_home_header(); the export's inline style needs !important.
 */
.pwsgo-home-header {
	--pwsgo-header-inset: calc(clamp(10px, 1.4vw, 18px) + clamp(10px, 1.2vw, 16px));
	position: fixed !important;
	top: var(--pwsgo-header-inset) !important;
	left: var(--pwsgo-header-inset) !important;
	right: var(--pwsgo-header-inset) !important;
	z-index: 80 !important;
	transition: top 220ms cubic-bezier(0.2, 0, 0, 1);
}

/* Past the top of the page it tucks in and lifts off the content below. */
html[data-pwsgo-scrolled] .pwsgo-home-header {
	top: 10px !important;
}

html[data-pwsgo-scrolled] .pwsgo-home-header > nav,
html[data-pwsgo-scrolled] .pwsgo-home-header .pwsgo-drawer {
	box-shadow: 0 14px 34px rgba(22, 19, 15, 0.09);
}

/* A pinned menu must scroll itself on short screens. */
.pwsgo-home-header .pwsgo-drawer--card {
	max-height: calc(100dvh - 120px);
	overflow-y: auto;
	overscroll-behavior: contain;
}

@media (prefers-reduced-motion: reduce) {
	.pwsgo-home-header {
		transition: none;
	}
}

/*
 * One page container everywhere, as on the homepage and in the footer: 1240px
 * of content with a gutter from 16px on phones to 56px on wide screens.
 * inc/layout.php tags each inner page's top bar, nav and content wrappers; the
 * menu panel under the bar lines up with them. Their inline max-width and side
 * padding need !important.
 */
.pwsgo-wrap,
.pwsgo-drawer--panel {
	--pwsgo-gutter: clamp(16px, 4vw, 56px);
	box-sizing: border-box;
	max-width: calc(1240px + 2 * var(--pwsgo-gutter)) !important;
	margin-left: auto !important;
	margin-right: auto !important;
	padding-left: var(--pwsgo-gutter) !important;
	padding-right: var(--pwsgo-gutter) !important;
}

/*
 * Vehicle pages: the Features cards. The export's own mobile rule loses to
 * something later in its cascade, so on phones the four cards were sized to
 * their longest word (a 39px column beside a 305px one). Same intent as the
 * export - two across on small screens, one across on phones - but on
 * `div.facts`, which outweighs `.facts` whatever the load order.
 */
@media (max-width: 640px) {
	div.facts {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
}

@media (max-width: 480px) {
	div.facts {
		grid-template-columns: minmax(0, 1fr) !important;
	}

	div.facts > div:last-child {
		grid-column: auto !important;
	}
}

/*
 * Date fields. Safari on iOS gives input[type=date] an intrinsic width, so the
 * two hero date boxes came out narrow beside a full-width select, and text
 * under 16px makes iOS zoom the page when the field is tapped. Widths and tap
 * target here; the iOS block adds the calendar glyph Safari does not draw.
 */
input[type="date"] {
	width: 100%;
	min-height: 48px;
	box-sizing: border-box;
}

@media (max-width: 760px) {
	input[type="date"],
	.search select {
		font-size: 16px !important;
	}
}

@supports (-webkit-touch-callout: none) {
	input[type="date"] {
		-webkit-appearance: none;
		appearance: none;
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234A5B75' stroke-width='1.6'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M8 3v4M16 3v4M3 10h18'/%3E%3C/svg%3E");
		background-repeat: no-repeat;
		background-position: right 12px center;
		background-size: 18px 18px;
		padding-right: 38px;
		text-align: left;
	}
}

/* Phones: a lighter wordmark. The export sets 30px inline, hence !important. */
@media (max-width: 760px) {
	nav a > img[alt="PWSGO"] {
		height: 24px !important;
	}
}

/* Burger mode: the bar keeps only the logo and the menu button. */
@media (max-width: 1240px) {
	.pwsgo-bar-action {
		display: none !important;
	}
}

.pwsgo-drawer {
	background: #fff;
	transform-origin: top right;
	animation: pwsgo-drawer-bloom 420ms cubic-bezier(0.2, 0, 0, 1) both;
}

/* Homepage: a card under the floating nav, over the hero. */
.pwsgo-drawer--card {
	border-radius: 8px;
	padding: 6px clamp(18px, 2vw, 28px) 20px;
}

/* Inner pages: a panel under the sticky bar. */
.pwsgo-drawer--panel {
	max-width: 1240px;
	margin: 0 auto;
	border-top: 1px solid #D9D9D9;
	padding: 6px clamp(16px, 3vw, 20px) 22px;
}

/*
 * A row of links reads badly across a whole page, so the menu is only as wide
 * as it needs to be and hangs from the button that opened it, rather than
 * being a full-width card with empty space either side.
 */
.pwsgo-drawer-links,
.pwsgo-drawer-actions {
	max-width: 560px;
}

/*
 * Homepage: the card narrows and tucks under the burger. The header is a
 * column flex container, so its children stretch to full width by default and
 * an auto margin alone cancels that stretch, leaving the card to shrink to its
 * text. The width has to be stated, not just capped.
 */
.pwsgo-drawer--card {
	width: min(100%, 420px);
	max-width: 100%;
	margin-left: auto;
}

.pwsgo-drawer--card .pwsgo-drawer-links,
.pwsgo-drawer--card .pwsgo-drawer-actions {
	max-width: none;
}

/*
 * Inner pages used a full-width bar, which left the same empty white beside
 * the links. It is a card under the burger too, so the menu behaves the same
 * way on every page. The wrap's own max-width and margins need overriding.
 */
.pwsgo-drawer--panel {
	/*
	 * Out of the bar's flow. In flow it stretched the sticky bar to the height
	 * of the menu, and because that bar is white and spans the page, the menu
	 * appeared to have a white slab beside it.
	 */
	position: absolute;
	top: 100%;
	right: var(--pwsgo-gutter);
	z-index: 2;
	width: min(100vw - 2 * var(--pwsgo-gutter), 420px) !important;
	max-width: none !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	padding-left: clamp(18px, 2vw, 28px) !important;
	padding-right: clamp(18px, 2vw, 28px) !important;
	border-top: 0;
	border-radius: 8px;
	box-shadow: 0 14px 34px rgba(22, 19, 15, 0.09);
}

.pwsgo-drawer--panel .pwsgo-drawer-links,
.pwsgo-drawer--panel .pwsgo-drawer-actions {
	max-width: none;
}

/* On a phone the menu is the page: full width, flush under the bar. */
@media (max-width: 640px) {
	.pwsgo-drawer--panel {
		right: 0;
		width: 100% !important;
		border-radius: 0;
		box-shadow: 0 18px 30px rgba(22, 19, 15, 0.12);
	}
}

.pwsgo-drawer-links {
	display: grid;
}

.pwsgo-drawer a.pwsgo-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	min-height: 54px;
	padding: 0 2px;
	border-bottom: 1px solid #D9D9D9;
	font: 500 clamp(17px, 1.5vw, 19px)/1.25 'Archivo', system-ui, sans-serif;
	letter-spacing: -0.01em;
	text-transform: none;
	text-decoration: none;
	color: #071F3E;
	transition: color 180ms ease;
	animation: pwsgo-row-in 300ms cubic-bezier(0.2, 0, 0, 1) both;
}

.pwsgo-drawer a.pwsgo-row svg {
	flex: none;
	color: #4A5B75;
	transition: transform 180ms cubic-bezier(0.2, 0, 0, 1), color 180ms ease;
}

/* The two vehicles sit under "Our vehicles" as one indented group. */
.pwsgo-drawer a.pwsgo-row:has(+ .pwsgo-row--sub),
.pwsgo-drawer a.pwsgo-row--sub:has(+ .pwsgo-row--sub) {
	border-bottom: 0;
}

.pwsgo-drawer a.pwsgo-row--sub {
	min-height: 44px;
	padding-left: 16px;
	box-shadow: inset 2px 0 0 #D9D9D9;
	font: 400 15.5px/1.3 'IBM Plex Sans', system-ui, sans-serif;
	letter-spacing: 0;
	color: #4A5B75;
}

.pwsgo-drawer a.pwsgo-row--sub:not(:has(+ .pwsgo-row--sub)) {
	margin-bottom: 0;
	min-height: 52px;
	padding-bottom: 8px;
}

.pwsgo-drawer a.pwsgo-row:hover,
.pwsgo-drawer a.pwsgo-row[aria-current="page"] {
	color: #4E6320;
}

.pwsgo-drawer a.pwsgo-row[aria-current="page"] {
	font-weight: 600;
}

.pwsgo-drawer a.pwsgo-row--sub[aria-current="page"] {
	box-shadow: inset 2px 0 0 #6E8B2D;
}

.pwsgo-drawer a.pwsgo-row:hover svg {
	color: #4E6320;
	transform: translateX(2px);
}

.pwsgo-drawer a.pwsgo-row:focus-visible {
	outline: 2px solid #6E8B2D;
	outline-offset: 2px;
}

.pwsgo-drawer-actions {
	display: grid;
	gap: 10px;
	margin-top: 20px;
	animation: pwsgo-row-in 300ms cubic-bezier(0.2, 0, 0, 1) 420ms both;
}

.pwsgo-drawer-actions .pill {
	display: flex;
	width: 100%;
	justify-content: center;
	white-space: nowrap;
}

@media (min-width: 480px) {
	.pwsgo-drawer-actions {
		grid-template-columns: 1fr 1fr;
	}
}

/* Rows follow the panel in sequence, 45ms apart. */
.pwsgo-drawer-links > a:nth-child(1) { animation-delay: 60ms; }
.pwsgo-drawer-links > a:nth-child(2) { animation-delay: 105ms; }
.pwsgo-drawer-links > a:nth-child(3) { animation-delay: 150ms; }
.pwsgo-drawer-links > a:nth-child(4) { animation-delay: 195ms; }
.pwsgo-drawer-links > a:nth-child(5) { animation-delay: 240ms; }
.pwsgo-drawer-links > a:nth-child(6) { animation-delay: 285ms; }
.pwsgo-drawer-links > a:nth-child(7) { animation-delay: 330ms; }
.pwsgo-drawer-links > a:nth-child(8) { animation-delay: 375ms; }

/*
 * Closing: pwsgo-menu.js sets data-pwsgo-menu-closing on <html> and holds the
 * burger click back until this has played.
 */
html[data-pwsgo-menu-closing] .pwsgo-drawer {
	animation: pwsgo-drawer-out 220ms cubic-bezier(0.4, 0, 1, 1) both;
}

html[data-pwsgo-menu-closing] .pwsgo-drawer a.pwsgo-row,
html[data-pwsgo-menu-closing] .pwsgo-drawer-actions {
	animation: pwsgo-row-out 140ms ease both;
}

/* Menu button: the three bars fold into a cross while the menu is open. */
.burger > span > span {
	transform-origin: center;
	transition: transform 260ms cubic-bezier(0.2, 0, 0, 1), opacity 180ms ease, width 260ms cubic-bezier(0.2, 0, 0, 1);
}

html:not([data-pwsgo-menu-closing]) .burger[aria-expanded="true"] > span > span:nth-child(1) {
	width: 100% !important;
	transform: translateY(6.8px) rotate(45deg);
}

html:not([data-pwsgo-menu-closing]) .burger[aria-expanded="true"] > span > span:nth-child(2) {
	opacity: 0;
	transform: scaleX(0.2);
}

html:not([data-pwsgo-menu-closing]) .burger[aria-expanded="true"] > span > span:nth-child(3) {
	width: 100% !important;
	transform: translateY(-6.8px) rotate(-45deg);
}

/* Grows out of the button in the corner, the way the reference does. */
@keyframes pwsgo-drawer-bloom {
	from {
		opacity: 0;
		transform: scale(0.88) translate(14px, -14px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes pwsgo-drawer-out {
	from { opacity: 1; transform: none; }
	to   { opacity: 0; transform: scale(0.92) translate(10px, -10px); }
}

@keyframes pwsgo-row-in {
	from { opacity: 0; transform: translateY(14px); }
	to   { opacity: 1; transform: none; }
}

@keyframes pwsgo-row-out {
	to { opacity: 0; transform: translateY(-4px); }
}

@media (prefers-reduced-motion: reduce) {
	.pwsgo-drawer,
	.pwsgo-drawer a.pwsgo-row,
	.pwsgo-drawer-actions {
		animation: none;
	}

	.burger > span > span {
		transition: none;
	}
}

/*
 * Underlined links (.ulink). The homepage export left them the full width of
 * their grid column, so the hover line ran across the whole footer column
 * instead of under the words. Sized to their text, even where the text is wider
 * than its column (the footer email), so the line always spans the words.
 */
a.ulink {
	width: fit-content;
	max-width: none;
}

/*
 * The vehicle pages' Inventory section (inc/inventory.php), to the design
 * note: groups flow into as many columns as fit, each row is the item over
 * where it is stowed, and the list collapses behind the text toggle.
 */
#inventory .inv-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	flex-wrap: wrap;
}

#inventory .inv-toggle {
	min-height: 44px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--pine);
	font: 400 15px/1.4 'IBM Plex Sans', system-ui, sans-serif;
	text-decoration: underline;
	text-underline-offset: 0.15em;
	cursor: pointer;
}

#inventory .inv-grid {
	display: grid;
	/* Wide enough that an item and its location sit on one line; a second
	   column only appears when there is room for two such lines. */
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr));
	gap: clamp(28px, 3vw, 44px) 48px;
	margin-top: 22px;
	align-items: start;
}

#inventory .inv-grid[hidden] {
	display: none;
}

#inventory .inv-group {
	break-inside: avoid;
}

#inventory .inv-group-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	border-bottom: 2px solid var(--ink);
	padding-bottom: 8px;
	margin-bottom: 6px;
}

#inventory .inv-group-head h3 {
	font: 600 12.5px/1 'Archivo', system-ui, sans-serif;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

#inventory .inv-group-head span {
	font: 400 12.5px/1 'IBM Plex Sans', system-ui, sans-serif;
	color: var(--ink-soft);
	font-variant-numeric: tabular-nums;
}

/* One line each: the item on the left, where it is stowed on the right. The
   location wraps under the item only when the row is too narrow to hold both. */
#inventory .inv-row {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 2px 24px;
	padding: 11px 0;
	border-bottom: 1px solid var(--rule);
}

/* The group's own rule closes it, so the last row needs no divider. */
#inventory .inv-row:last-child {
	border-bottom: 0;
}

#inventory .inv-name {
	flex: 1 1 auto;
	min-width: 0;
}

#inventory .inv-where {
	flex: 0 1 auto;
	text-align: right;
}

#inventory .inv-name {
	font-size: 15px;
	line-height: 1.5;
	color: var(--ink);
}

#inventory .inv-where {
	font-size: 13.5px;
	line-height: 1.45;
	color: var(--ink-soft);
}

#inventory .inv-note {
	font-size: 14px;
	line-height: 1.6;
	color: var(--ink-soft);
	margin-top: 20px;
}

/*
 * Buttons: one system, two sizes. The export sized each .pill inline where it
 * sat, so the same button came out at 44, 48, 50, 52, 54 and 56px across the
 * site; pwsgo_patch_pill_sizes() in inc/import.php strips that and puts the
 * button on one of these instead. The export's own 44px default is unchanged.
 */
a.pill-lg,
button.pill-lg {
	min-height: 52px;
	padding: 0 28px;
	font-size: 15.5px;
}

a.pill-block,
button.pill-block {
	width: 100%;
	min-height: 56px;
	font-size: 16px;
}