/**
 * Header — the lookup counter.
 *
 * Kept out of style.css because this is one self-contained component with its
 * own behaviour script, and style.css is already long enough that finding the
 * header in it would be a chore. Tokens all come from style.css's :root.
 *
 * The one loud element on the page is the search bar: a single 2px navy frame
 * divided into a navy Categories segment, a white field and a red submit. Every
 * other control in the header is deliberately quiet so that frame reads first.
 */

/* --------------------------------------------------------------------------
   Shell
   -------------------------------------------------------------------------- */

:root {
	/* Height of the information strip. The sticky rule at the bottom of this
	   file offsets the header by exactly this much, so the two have to agree. */
	--pg-strip-height: 34px;
}

#header {
	position: relative;
	z-index: 90;
}

/* The scrim is a sibling of this inside #header, so without a stacking order
   of its own the header would be dimmed along with the page behind it. Layers
   in this component: scrim 88, header 90, category panel 95, drawer 100. */
.pg-head {
	position: relative;
	z-index: 90;
	background: var(--pg-surface);
}

.pg-head__in {
	width: min(1290px, 100% - 40px);
	margin-inline: auto;
	display: flex;
	align-items: center;
	gap: 20px;
}

/* --------------------------------------------------------------------------
   Information strip
   -------------------------------------------------------------------------- */

.pg-head__strip {
	background: var(--pg-navy);
	color: var(--pg-dark-muted);
	font-size: 13px;
	line-height: 1.3;
}

.pg-head__strip .pg-head__in {
	min-height: var(--pg-strip-height);
	justify-content: space-between;
	gap: 24px;
}

.pg-head__stat {
	margin: 0;
	color: var(--pg-dark-muted);
}

.pg-head__stat b {
	color: #FFFFFF;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.pg-head__striplinks {
	display: flex;
	gap: 22px;
	flex-shrink: 0;
}

.pg-head__striplinks a {
	color: var(--pg-dark-muted);
	text-decoration: none;
}

.pg-head__striplinks a:hover,
.pg-head__striplinks a:focus-visible {
	color: #FFFFFF;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* --------------------------------------------------------------------------
   Main bar
   -------------------------------------------------------------------------- */

.pg-head__bar {
	position: relative; /* containing block for the category panel */
	border-bottom: 1px solid var(--pg-border);
	background: var(--pg-surface);
}

.pg-head__bar .pg-head__in {
	min-height: 78px;
	padding-block: 14px;
}

.pg-head__logo {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	text-decoration: none;
}

.pg-head__logoimg {
	display: block;
	width: auto;
	height: 40px;
	max-width: 210px;
}

/* --------------------------------------------------------------------------
   The lookup bar — one framed unit, three segments
   -------------------------------------------------------------------------- */

.pg-lookup {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	align-items: stretch;
	height: 50px;
	border: 2px solid var(--pg-navy);
	border-radius: 2px;
	background: var(--pg-surface);
	transition: border-color .12s ease, box-shadow .12s ease;
}

/* The ring means "you are typing here". Scoped to the input rather than
   :focus-within, or clicking the Categories button — which turns red itself —
   would light the whole frame red at the same time and read as an error. */
.pg-lookup:has(input:focus) {
	border-color: var(--pg-red);
	box-shadow: 0 0 0 3px rgba(200, 16, 46, .18);
}

.pg-lookup__cats {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 0 16px;
	border: 0;
	border-right: 2px solid var(--pg-navy);
	background: var(--pg-navy);
	color: #FFFFFF;
	font: inherit;
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
}

.pg-lookup__cats svg {
	width: 17px;
	height: 17px;
	flex-shrink: 0;
}

.pg-lookup__cats:hover {
	background: var(--pg-navy-accent);
	border-right-color: var(--pg-navy-accent);
}

.pg-lookup__cats[aria-expanded="true"] {
	background: var(--pg-red);
	border-right-color: var(--pg-red);
}

.pg-lookup__field {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
}

/* FiboSearch ships a complete widget: its own 1px border, its own 40px height,
   an absolutely positioned dark submit button and a little pointer triangle
   beside it. All of that has to be flattened, or the header shows a second
   bordered box floating inside ours.

   Its rules are written at .dgwt-wcas-sf-wrapp + element + class, so matching
   them takes the same shape rather than a pile of !important. --pg-red-* are
   the theme's action colours: the submit button is an action, so it is red
   like every other one on the site. */
.pg-lookup .dgwt-wcas-search-wrapp,
.pg-lookup .dgwt-wcas-search-form,
.pg-lookup .dgwt-wcas-sf-wrapp,
.pg-lookup .pg-search-fallback {
	width: 100%;
	min-width: 0;
	max-width: none;
	height: 100%;
	margin: 0;
	background: transparent;
}

.pg-lookup .pg-search-fallback {
	position: relative;
	display: block;
}

.pg-lookup .dgwt-wcas-sf-wrapp input[type="search"].dgwt-wcas-search-input,
.pg-lookup .pg-search-fallback input[type="search"] {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0 76px 0 16px;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	color: var(--pg-text);
	font-size: 16px;
	line-height: 1.2;
}

/* The plugin sets the placeholder in italic. A part number is not an aside —
   it is an example of what to type — so it is set in the same face as the
   answer will be. Same selector shape as the plugin's, for the same reason as
   the rules above. */
.pg-lookup .dgwt-wcas-sf-wrapp input[type="search"].dgwt-wcas-search-input::placeholder,
.pg-lookup .pg-search-fallback input[type="search"]::placeholder {
	color: var(--pg-dim);
	font-style: normal;
	font-weight: 400;
	opacity: 1;
}

.pg-lookup .dgwt-wcas-sf-wrapp button.dgwt-wcas-search-submit,
.pg-lookup .pg-search-fallback button {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: auto;
	width: 62px;
	min-width: 62px;
	height: 100%;
	min-height: 100%;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: 0;
	background-color: var(--pg-red);
	color: #FFFFFF;
	text-transform: none;
	text-shadow: none;
	cursor: pointer;
}

.pg-lookup .dgwt-wcas-sf-wrapp button.dgwt-wcas-search-submit:hover,
.pg-lookup .dgwt-wcas-sf-wrapp button.dgwt-wcas-search-submit:focus,
.pg-lookup .pg-search-fallback button:hover {
	background-color: var(--pg-red-hover);
	opacity: 1;
}

/* The plugin draws a triangular nub pointing back at the field. It made sense
   against its own grey button; against a full-height red segment of our frame
   it is a chip out of the edge. */
.pg-lookup .dgwt-wcas-sf-wrapp .dgwt-wcas-search-submit::before {
	display: none;
}

.pg-lookup .dgwt-wcas-search-submit svg,
.pg-lookup .dgwt-wcas-ico-magnifier,
.pg-lookup .pg-search-fallback button svg {
	width: 20px;
	height: 20px;
	fill: currentColor;
	stroke: currentColor;
}

.pg-lookup .dgwt-wcas-search-submit svg path,
.pg-lookup .dgwt-wcas-ico-magnifier path {
	fill: currentColor;
}

/* The suggestions panel should hang off the frame, not float mid-field. */
.dgwt-wcas-suggestions-wrapp {
	border-radius: 0 0 2px 2px;
	border-color: var(--pg-border-hi);
}

/* --------------------------------------------------------------------------
   Account / quote list
   -------------------------------------------------------------------------- */

.pg-acts {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-shrink: 0;
}

.pg-act {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 50px;
	padding: 0 14px;
	border-radius: 2px;
	color: var(--pg-text);
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}

.pg-act svg {
	width: 21px;
	height: 21px;
	flex-shrink: 0;
}

.pg-act:hover {
	background: var(--pg-surface-alt);
	color: var(--pg-text);
}

.pg-act--quote {
	background: var(--pg-red);
	color: #FFFFFF;
	padding-inline: 18px;
}

.pg-act--quote:hover {
	background: var(--pg-red-hover);
	color: #FFFFFF;
}

.pg-act__count {
	min-width: 22px;
	height: 22px;
	padding: 0 6px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 11px;
	background: #FFFFFF;
	color: var(--pg-red-text);
	font-size: 13px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   Category panel
   -------------------------------------------------------------------------- */

.pg-catpanel {
	position: absolute;
	inset-inline: 0;
	top: 100%;
	z-index: 95;
	background: var(--pg-surface);
	border-bottom: 1px solid var(--pg-border);
	box-shadow: 0 28px 44px -28px rgba(20, 24, 29, .45);
}

.pg-catpanel[hidden] {
	display: none;
}

.pg-catpanel .pg-head__in {
	align-items: stretch;
	gap: 40px;
	padding-block: 28px;
}

.pg-catpanel__list {
	flex: 1 1 auto;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	column-gap: 40px;
}

.pg-catpanel__item {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 14px;
	padding: 9px 0;
	border-bottom: 1px solid var(--pg-border);
	color: var(--pg-text);
	font-size: 15px;
	text-decoration: none;
}

.pg-catpanel__item:hover {
	color: var(--pg-red-text);
}

.pg-catpanel__item em {
	font-style: normal;
	font-variant-numeric: tabular-nums;
	font-size: 13px;
	color: var(--pg-dim);
	flex-shrink: 0;
}

.pg-catpanel__aside {
	flex: 0 0 272px;
	display: flex;
	flex-direction: column;
	gap: 2px;
	background: var(--pg-navy);
	padding: 8px;
}

.pg-catpanel__aside-link {
	display: block;
	padding: 13px 14px;
	color: #FFFFFF;
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
}

.pg-catpanel__aside-link span {
	display: block;
	margin-top: 3px;
	color: var(--pg-dark-muted);
	font-size: 13px;
	font-weight: 400;
}

.pg-catpanel__aside-link:hover {
	background: var(--pg-navy-accent);
	color: #FFFFFF;
}

.pg-catpanel__aside-link--ask {
	background: var(--pg-red);
	margin-top: auto;
}

.pg-catpanel__aside-link--ask span {
	color: rgba(255, 255, 255, .82);
}

.pg-catpanel__aside-link--ask:hover {
	background: var(--pg-red-hover);
}

/* --------------------------------------------------------------------------
   Scrim, shared by the panel and the drawer
   -------------------------------------------------------------------------- */

.pg-scrim {
	position: fixed;
	inset: 0;
	z-index: 88;
	background: rgba(20, 24, 29, .45);
}

.pg-scrim[hidden] {
	display: none;
}

/* Behind the category panel the header has to stay lit — it is the thing the
   panel belongs to. Behind the drawer it does not: the drawer replaces the
   header for as long as it is open, so the scrim rises above it. */
.pg-scrim.is-over-header {
	z-index: 99;
}

/* --------------------------------------------------------------------------
   Mobile bar and drawer
   -------------------------------------------------------------------------- */

.pg-burger {
	display: none;
	width: 46px;
	height: 46px;
	margin-left: -10px;
	align-items: center;
	justify-content: center;
	border: 0;
	background: transparent;
	color: var(--pg-text);
	cursor: pointer;
}

.pg-burger__bars,
.pg-burger__bars::before,
.pg-burger__bars::after {
	display: block;
	width: 22px;
	height: 2px;
	background: currentColor;
	border-radius: 2px;
}

.pg-burger__bars {
	position: relative;
}

.pg-burger__bars::before,
.pg-burger__bars::after {
	content: "";
	position: absolute;
	left: 0;
}

.pg-burger__bars::before { top: -7px; }
.pg-burger__bars::after  { top: 7px; }

.pg-drawer {
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	z-index: 100;
	width: min(88vw, 370px);
	display: flex;
	flex-direction: column;
	background: var(--pg-surface);
	transform: translateX(-100%);
	transition: transform .22s cubic-bezier(.32, .72, 0, 1);
}

.pg-drawer[hidden] {
	display: none;
}

.pg-drawer.is-open {
	transform: translateX(0);
}

.pg-drawer__top {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 58px;
	padding: 0 8px 0 20px;
	background: var(--pg-navy);
	color: #FFFFFF;
}

.pg-drawer__title {
	font-size: 16px;
	font-weight: 600;
}

.pg-drawer__close {
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 0;
	background: transparent;
	color: inherit;
	cursor: pointer;
}

.pg-drawer__close svg {
	width: 22px;
	height: 22px;
}

.pg-drawer__body {
	flex: 1 1 auto;
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	padding-bottom: 10px;
}

.pg-drawer__heading {
	margin: 0;
	padding: 18px 20px 7px;
	color: var(--pg-dim);
	font-size: 13px;
	font-weight: 600;
}

.pg-drawer__link {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 14px;
	padding: 13px 20px;
	border-top: 1px solid var(--pg-border);
	color: var(--pg-text);
	font-size: 16px;
	text-decoration: none;
}

.pg-drawer__link em {
	font-style: normal;
	font-size: 13px;
	font-variant-numeric: tabular-nums;
	color: var(--pg-dim);
	flex-shrink: 0;
}

.pg-drawer__link:active {
	background: var(--pg-surface-alt);
}

.pg-drawer__pages {
	display: flex;
	flex-direction: column;
	border-top: 1px solid var(--pg-border);
}

.pg-drawer__pages a {
	padding: 13px 20px;
	color: var(--pg-text);
	font-size: 16px;
	text-decoration: none;
}

.pg-drawer__pages a + a {
	border-top: 1px solid var(--pg-border);
}

.pg-drawer__foot {
	flex-shrink: 0;
	padding: 12px 16px;
	border-top: 1px solid var(--pg-border);
	background: var(--pg-surface-alt);
}

.pg-acts--drawer {
	gap: 10px;
}

.pg-acts--drawer .pg-act {
	flex: 1 1 0;
	justify-content: center;
	height: 48px;
}

.pg-acts--drawer .pg-act:not(.pg-act--quote) {
	border: 1px solid var(--pg-border-hi);
	background: var(--pg-surface);
}

/* --------------------------------------------------------------------------
   Breakpoints

   1080px is where the logo, a usable search field and two action buttons stop
   fitting on one line. Below it the search moves to its own full-width row —
   it is never collapsed behind an icon, because reaching the search box is the
   whole reason most people open this site on a phone in a workshop.
   -------------------------------------------------------------------------- */

@media (max-width: 1180px) {
	.pg-acts--bar .pg-act:not(.pg-act--quote) .pg-act__label {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		clip-path: inset(50%);
		white-space: nowrap;
	}

	.pg-catpanel__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 1080px) {
	.pg-head__strip {
		display: none;
	}

	.pg-burger {
		display: flex;
	}

	.pg-head__bar .pg-head__in {
		flex-wrap: wrap;
		gap: 10px 14px;
		min-height: 0;
		padding-block: 10px 12px;
	}

	.pg-head__logo {
		margin-right: auto;
	}

	.pg-head__logoimg {
		height: 34px;
	}

	.pg-lookup {
		order: 5;
		flex: 1 0 100%;
		height: 46px;
	}

	/* The drawer carries the category list on small screens, so the segment
	   here would only be a second door to the same room — and it would cost
	   the search field a third of its width. */
	.pg-lookup__cats {
		display: none;
	}

	.pg-lookup .dgwt-wcas-search-submit,
	.pg-lookup .pg-search-fallback button {
		width: 54px;
	}

	.pg-act {
		height: 44px;
		padding-inline: 12px;
	}

	.pg-act--quote {
		padding-inline: 14px;
	}
}

@media (max-width: 560px) {
	.pg-head__in {
		width: calc(100% - 28px);
	}

	.pg-acts--bar .pg-act--quote .pg-act__label {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		clip-path: inset(50%);
		white-space: nowrap;
	}
}

/* --------------------------------------------------------------------------
   Sticky compact bar

   One state change, triggered by the reader's own scrolling: the information
   strip goes and the bar tightens. No entrance animation anywhere in the
   header — it is furniture, it should already be there.
   -------------------------------------------------------------------------- */

@media (min-width: 1081px) {
	/* Blocksy clips #main-container on both axes to stop a wide element
	   producing a horizontal scrollbar. `overflow: clip` on the block axis
	   also makes it the containing block for sticky positioning, so the bar
	   would stick to a box that itself scrolls away — it simply left the
	   screen. Unlike `hidden`, `clip` may be paired with `visible` on the
	   other axis without creating a scroll container, so the horizontal
	   protection stays and sticky works again. */
	#main-container {
		overflow-x: clip;
		overflow-y: visible;
	}

	/* The whole header sticks, not the bar alone: a sticky element can never
	   travel outside its own parent, and .pg-head is only as tall as the
	   header — it would leave the screen taking the bar with it. Sticking
	   #header and pulling it up by the height of the information strip lands
	   the search bar exactly at the top edge while the strip scrolls away. */
	#header {
		position: sticky;
		top: calc(0px - var(--pg-strip-height));
		z-index: 96;
	}

	.admin-bar #header {
		top: calc(32px - var(--pg-strip-height));
	}

	.pg-head.is-stuck .pg-head__bar {
		box-shadow: 0 6px 20px -12px rgba(20, 24, 29, .5);
	}

	.pg-head.is-stuck .pg-head__bar .pg-head__in {
		min-height: 66px;
		padding-block: 8px;
	}

	.pg-head.is-stuck .pg-head__logoimg {
		height: 32px;
	}
}

/* --------------------------------------------------------------------------
   Focus and motion
   -------------------------------------------------------------------------- */

.pg-head a:focus-visible,
.pg-head button:focus-visible,
.pg-drawer a:focus-visible,
.pg-drawer button:focus-visible {
	outline: 2px solid var(--pg-red);
	outline-offset: 2px;
}

.pg-lookup:focus-within .dgwt-wcas-search-input:focus-visible {
	outline: none;
}

@media (prefers-reduced-motion: reduce) {
	.pg-drawer {
		transition: none;
	}
}