/*
 * Site chrome: announcement bar, header, navigation, footer.
 *
 * Every measurement is lifted from the mockup markup, not approximated. The
 * nav bar is the only brand-teal band above the fold, which the designer noted
 * in the mockup itself, so it is the only place forest appears up there.
 */

/* ----------------------------------------------------- announcement bar */

.fms-announcement {
	display: flex;
	align-items: center;
	justify-content: center;
	height: var(--fms-announcement-h);
	background: var(--fms-forest);
	color: var(--fms-cream);
}

.fms-announcement p {
	margin: 0;
	font-size: var(--fms-size-meta);
}

/* ------------------------------------------------------------------ header */

.fms-header {
	background: var(--fms-cream);
	padding-block: var(--fms-header-y);
}

.fms-header__inner {
	display: flex;
	align-items: center;
	gap: 44px;
}

.fms-header__logo {
	flex: none;
	width: 290px;
}

.fms-header__logo > a {
	display: flex;
	align-items: center;
	min-height: var(--fms-tap-min);
}

.fms-header__logo img,
.fms-header__logo svg {
	width: 100%;
	height: auto;
	display: block;
}

.fms-header__search {
	flex: 1;
	display: flex;
	justify-content: center;
}

/*
 * The mobile artboard puts search on its own row under the header. Declared
 * hidden here, before the media query that shows it, because a later rule at
 * equal specificity wins regardless of the media query. Found by measuring: the
 * row was invisible at 390px with the override sitting at the end of the file.
 */
.fms-header__search-row {
	display: none;
}

.fms-search {
	position: relative;
	width: 100%;
	max-width: 620px;
}

.fms-search input {
	padding-right: 60px;
}

/*
 * The submit control sits inside the input. The icon stays at the mockup's 18px,
 * but the button itself is a full 44px square so it satisfies the minimum tap
 * target. Measured in a browser first: at 24px it failed acceptance criterion 9.
 */
.fms-search__submit {
	position: absolute;
	right: 12px;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--fms-tap-min);
	height: var(--fms-tap-min);
	padding: 0;
	background: none;
	border: 0;
	border-radius: 50%;
	cursor: pointer;
}

.fms-header__actions {
	flex: none;
	display: flex;
	align-items: center;
	gap: 28px;
}

/* Cart, with its count badge. */
.fms-cart {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: var(--fms-tap-min);
	min-height: var(--fms-tap-min);
}

.fms-cart__count {
	position: absolute;
	top: 2px;
	right: 0;
	min-width: 18px;
	height: 18px;
	line-height: 18px;
	border-radius: 50%;
	background: var(--fms-forest);
	color: var(--fms-white);
	font-size: var(--fms-size-eyebrow);
	font-weight: var(--fms-weight-medium);
	text-align: center;
}

.fms-burger {
	display: none;
	align-items: center;
	justify-content: center;
	width: var(--fms-tap-min);
	height: var(--fms-tap-min);
	padding: 8px;
	background: none;
	border: 0;
	cursor: pointer;
}

/* -------------------------------------------------------------------- nav */

.fms-nav {
	z-index: 40;
	height: var(--fms-nav-h);
	background: var(--fms-forest);
}

.fms-nav__container {
	display: flex;
	align-items: stretch;
}

.fms-mobile-menu__logo {
	width: 176px;
}

.fms-mobile-menu__logo svg,
.fms-mobile-menu__logo img {
	width: 100%;
	height: auto;
	display: block;
}

.fms-nav__list {
	display: flex;
	align-items: stretch;
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
 * `white-space: nowrap` is doing real work here. `.fms-nav` is a fixed 50px, so
 * a label that wraps does not make the bar taller: the second line drops out of
 * the bottom of the bar and onto the page underneath it. That is what the menu
 * did below 1366, and at 1440 as soon as the compact cart appeared and took its
 * 44px. `flex: none` stops the items shrinking into the wrap in the first place.
 */
.fms-nav__list > li {
	flex: none;
}

.fms-nav__list a {
	display: block;
	padding-inline: 22px;
	color: var(--fms-white);
	font-weight: var(--fms-weight-medium);
	font-size: var(--fms-size-nav);
	line-height: var(--fms-nav-h);
	text-transform: uppercase;
	white-space: nowrap;
}

/*
 * Three items in this menu point at the shop page: "Shop", and the two
 * dropdown parents "Shop by category" and "Shop by brand". WordPress marks all
 * three `current-menu-item` on /shop/, so all three lit up brass at once and
 * the highlight stopped meaning anything. A parent whose job is to open a
 * submenu is not a destination, so it does not take the current colour.
 */
.fms-nav__list a:hover,
.fms-nav__list .current-menu-item:not(.menu-item-has-children) > a {
	color: var(--fms-brass);
}

/* The first item sits flush with the container edge, as in the mockup. */
.fms-nav__list > li:first-child > a {
	padding-left: 0;
}

/*
 * The caret mockup 00 draws after a parent item. Nothing told the visitor a
 * dropdown was there: the submenus worked on hover with no indicator at all.
 * Drawn with borders rather than a glyph so it inherits the link colour and
 * turns brass on hover with everything else.
 */
.fms-nav__list .menu-item-has-children > a::after {
	content: "";
	display: inline-block;
	width: 0;
	height: 0;
	margin-left: 8px;
	vertical-align: 2px;
	border-right: 4px solid transparent;
	border-left: 4px solid transparent;
	border-top: 5px solid currentcolor;
}

/* Dropdown. Two columns of categories on a forest ground. */
.fms-nav__list li {
	position: relative;
}

.fms-nav__list .sub-menu {
	position: absolute;
	top: var(--fms-nav-h);
	left: 0;
	z-index: 41;
	display: none;
	grid-template-columns: 1fr 1fr;
	gap: 0 40px;
	width: 560px;
	margin: 0;
	padding: 28px 32px 30px;
	background: var(--fms-forest);
	list-style: none;
	box-shadow: var(--fms-shadow-panel);
}

.fms-nav__list li.is-open > .sub-menu {
	display: grid;
}

.fms-nav__list .sub-menu a {
	padding: 0;
	font-weight: var(--fms-weight-regular);
	font-size: var(--fms-size-meta);
	line-height: var(--fms-leading-list);
	text-transform: none;
}

.fms-nav__toggle {
	margin-left: 6px;
	font-size: var(--fms-size-eyebrow);
}

/*
 * Sticky behaviour, which the mockups do not specify. The announcement bar and
 * the header scroll away and only the forest nav bar sticks. See DECISIONS.md D21.
 *
 * Done with `position: sticky` rather than a class toggled from JavaScript. The
 * first attempt used an IntersectionObserver and a spacer, and it could not be
 * verified in the test browser at all: the observer emitted no events, not even
 * its initial one, because the pane it runs in is not actually displayed. Rather
 * than ship behaviour that cannot be measured, the sticking is now pure CSS and
 * works with JavaScript disabled. Only the compact cart, which is cosmetic, still
 * depends on a script, and it fails closed.
 */
.fms-nav {
	position: sticky;
	top: 0;
}

.fms-nav.is-stuck {
	box-shadow: var(--fms-shadow-panel);
}

.fms-nav__compact {
	display: none;
	align-items: center;
	gap: 20px;
	margin-left: auto;
}

.fms-nav.is-stuck .fms-nav__compact {
	display: flex;
}

.fms-nav__compact .fms-cart__count {
	background: var(--fms-brass);
}

/*
 * Where the bar hands over to the burger.
 *
 * This used to happen at 600px, the phone breakpoint, and it was wrong long
 * before the menu grew: six items at the resting padding already needed about
 * 875px, so every width between 600 and 875 pushed the row off the side of the
 * page. Nothing caught it because the two measured widths are 1440 and 390 and
 * this fails in the gap between them.
 *
 * Measured with the menu as it stands: the row fits at 1280 with the compact
 * cart showing, and overflows by 8px at 1200. So the burger takes over below
 * 1280, and the mobile panel, which now collapses its submenus, is a better
 * answer at those widths anyway.
 */
@media (max-width: 1279px) {
	.fms-burger {
		display: flex;
	}

	.fms-nav {
		display: none;
	}
}

/*
 * Between these two widths the row is tight, so the gutters close up rather
 * than the labels breaking. Measured, not guessed: nine items need 827px of
 * label, and every 1px of padding costs 18px across the row.
 */
@media (max-width: 1400px) {
	.fms-nav__list a {
		padding-inline: 14px;
	}

	.fms-nav__list > li:first-child > a {
		padding-left: 0;
	}
}

/* ------------------------------------------------------------ mobile menu */

.fms-mobile-menu {
	position: fixed;
	inset: 0;
	z-index: 60;
	display: none;
	padding: 24px var(--fms-band-x-m) 40px;
	background: var(--fms-forest);
	overflow-y: auto;
}

.fms-mobile-menu.is-open {
	display: block;
}

.fms-mobile-menu__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 28px;
}

.fms-mobile-menu__close {
	width: var(--fms-tap-min);
	height: var(--fms-tap-min);
	background: none;
	border: 0;
	color: var(--fms-cream);
	font-size: 26px;
	cursor: pointer;
}

.fms-mobile-menu ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.fms-mobile-menu a {
	display: block;
	min-height: var(--fms-tap-min);
	padding: 12px 0;
	border-bottom: 1px solid var(--fms-cream-18);
	color: var(--fms-white);
	font-weight: var(--fms-weight-medium);
	font-size: 17px;
	text-transform: uppercase;
}

.fms-mobile-menu a:hover {
	color: var(--fms-brass);
}

/*
 * Collapsed until its parent is tapped. site.js has always toggled `is-open` on
 * the parent and there was no rule that did anything with it, so every submenu
 * stood open: the panel listed thirteen categories and forty-eight brands in one
 * flat run, sixty-two rows before the foot of the menu. The behaviour was
 * written; only the rule that made it visible was missing.
 */
.fms-mobile-menu .sub-menu {
	display: none;
}

.fms-mobile-menu li.is-open > .sub-menu {
	display: block;
}

/* The chevron mockup 00 draws on a parent row, turning down when it opens. */
.fms-mobile-menu .menu-item-has-children > a {
	position: relative;
	padding-right: 32px;
}

.fms-mobile-menu .menu-item-has-children > a::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 6px;
	width: 8px;
	height: 8px;
	margin-top: -6px;
	border-right: 2px solid var(--fms-brass);
	border-bottom: 2px solid var(--fms-brass);
	transform: rotate(-45deg);
	transition: transform var(--fms-transition);
}

.fms-mobile-menu li.is-open > a::after {
	margin-top: -7px;
	transform: rotate(45deg);
}

.fms-mobile-menu .sub-menu a {
	padding-left: 16px;
	font-weight: var(--fms-weight-regular);
	font-size: var(--fms-size-nav);
	text-transform: none;
	color: var(--fms-white-85);
}

/*
 * `html` as well as `body`. The scrolling element on this page is the html
 * element, so a rule on the body alone hides nothing and the page scrolled
 * behind the open panel. See `lockPage` in site.js.
 */
html.fms-menu-open,
body.fms-menu-open {
	overflow: hidden;
}

/* ------------------------------------------------------------------ footer */

.fms-footer {
	background: var(--fms-forest);
	border-top: 1px solid var(--fms-cream-18);
	padding: 82px 0 0;
	color: var(--fms-white);
}

/*
 * Five columns at the mockup's proportions. A column only renders when its menu
 * exists, and the Customer Service column waits on pages Phase 3 creates, so the
 * template adapts to how many actually rendered rather than leaving empty tracks
 * and a footer that does not reach the edge of the container.
 */
.fms-footer__columns {
	display: grid;
	grid-template-columns: 1.35fr 0.75fr 0.95fr 0.95fr 1fr;
	gap: var(--fms-gap-footer);
}

/*
 * A column only exists when its menu does, so the track list has to follow the
 * count. These are inside a min-width query for a reason that cost a real bug:
 * `:has(> div:nth-child(3):last-child)` scores three classes and a type against
 * the one class of the mobile rule, and a media query adds no specificity at
 * all. Without the query these won every width, the footer stayed three columns
 * at 390px, and the page scrolled sideways by 323px against acceptance
 * criterion 8. Measured, not guessed.
 */
@media (min-width: 601px) {
	.fms-footer__columns:has(> div:nth-child(4):last-child) {
		grid-template-columns: 1.35fr 0.95fr 0.95fr 1fr;
	}

	.fms-footer__columns:has(> div:nth-child(3):last-child) {
		grid-template-columns: 1.35fr 0.95fr 1fr;
	}

	.fms-footer__columns:has(> div:nth-child(2):last-child) {
		grid-template-columns: 1.35fr 1fr;
	}
}

/*
 * The footer column headings. h2 rather than h4, because they follow the
 * content's h2s and h4 made every page skip a level, which Lighthouse reports
 * as "heading elements are not in a sequentially-descending order". The size is
 * unchanged: --fms-size-h4 is the mockups' 22px footer column heading, and the
 * token is named for the size it is, not for the tag it lands on.
 */
.fms-footer h2 {
	margin: 0 0 20px;
	font-size: var(--fms-size-h4);
	line-height: normal;
	color: var(--fms-white);
}

.fms-footer p {
	margin: 0 0 24px;
	font-size: var(--fms-size-nav);
	line-height: var(--fms-leading-body);
	color: var(--fms-white-85);
}

.fms-footer ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.fms-footer ul a {
	display: block;
	font-size: var(--fms-size-nav);
	line-height: var(--fms-leading-list);
	color: var(--fms-white);
}

.fms-footer ul a:hover {
	color: var(--fms-brass);
}

.fms-footer__cta a {
	display: block;
	font-weight: var(--fms-weight-medium);
	font-size: var(--fms-size-nav);
	line-height: 2;
	color: var(--fms-brass);
}

.fms-footer__cta a:hover {
	color: var(--fms-white);
}

.fms-footer__social {
	display: flex;
	gap: 12px;
}

.fms-footer__social a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border: 1px solid var(--fms-white-40);
	border-radius: 50%;
	color: var(--fms-white);
	font-weight: var(--fms-weight-medium);
	font-size: var(--fms-size-eyebrow);
}

.fms-footer__social a:hover {
	border-color: var(--fms-brass);
	color: var(--fms-brass);
}

.fms-footer__legal {
	margin-top: 64px;
	border-top: 1px solid var(--fms-white-18);
	padding-block: 26px;
	text-align: center;
}

.fms-footer__legal p {
	margin: 0;
	font-size: var(--fms-size-meta);
	color: var(--fms-white-65);
}

/* ------------------------------------------------------------- breakpoints */

@media (max-width: 1100px) {
	.fms-footer__columns {
		grid-template-columns: 1fr 1fr 1fr;
	}
}

@media (max-width: 900px) {
	.fms-header__inner {
		flex-wrap: wrap;
		gap: 16px;
	}

	.fms-header__logo {
		width: 220px;
	}

	.fms-header__search {
		order: 3;
		flex-basis: 100%;
	}
}

@media (max-width: 600px) {
	.fms-announcement {
		height: auto;
		padding: 10px 20px;
		text-align: center;
	}

	.fms-announcement p {
		font-size: var(--fms-size-meta-m);
		line-height: 1.5;
	}

	.fms-header {
		padding-block: 0;
	}

	.fms-header__inner {
		flex-wrap: nowrap;
		justify-content: space-between;
		gap: 0;
		padding: 16px 20px 14px;
	}

	.fms-header__logo {
		width: 176px;
	}

	.fms-header__search {
		order: 0;
		flex-basis: auto;
		display: none;
	}

	/* The mobile artboard puts search on its own row below the header. */
	.fms-header__search-row {
		display: block;
		padding: 0 20px 16px;
		background: var(--fms-cream);
	}

	.fms-header__search-row input {
		padding: 13px 46px 11px 20px;
	}

	.fms-header__actions {
		gap: 0;
	}

	.fms-header__login {
		display: none;
	}

	.fms-cart__count {
		top: 0;
		min-width: 17px;
		height: 17px;
		line-height: 17px;
		font-size: var(--fms-size-eyebrow-m);
	}

	.fms-footer {
		padding: 56px var(--fms-band-x-m) 0;
	}

	.fms-footer__columns {
		grid-template-columns: 1fr;
		gap: 34px;
	}

	.fms-footer__legal {
		margin-top: 40px;
	}

	/*
	 * The mockup sets footer links at line-height 2.1, which is 31.5px on a 15px
	 * font and fails the 44px minimum. The line height is kept, and the hit area
	 * is grown, so the design is unchanged and the target is legal.
	 */
	.fms-footer ul a,
	.fms-footer__cta a,
	.fms-footer p a {
		min-height: var(--fms-tap-min);
		display: flex;
		align-items: center;
	}

	/*
	 * The social marks are drawn at 38px in the mockup, six pixels under the
	 * minimum. On mobile they grow to 44. It is a decorative circle, so nobody
	 * will see the difference, and it is the honest way to pass criterion 9
	 * rather than enlarging an invisible hit area and calling the target bigger
	 * than it looks.
	 */
	.fms-footer__social a {
		width: var(--fms-tap-min);
		height: var(--fms-tap-min);
	}
}

/* --------------------------------------------- the mobile panel's own foot ---
 * Mockup 00's mobile artboard closes the panel with a rule, the popular
 * categories as outlined pills and the account link. The panel had the menu and
 * nothing else, so both were missing at every width below the nav breakpoint.
 */

/* The last menu row already draws the rule the mockup shows here. */
.fms-mobile-menu__pills {
	margin-top: 24px;
}

.fms-mobile-menu__pills .fms-eyebrow {
	margin-bottom: 14px;
	color: var(--fms-brass);
}

.fms-mobile-menu__pill-row {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.fms-mobile-menu a.fms-mobile-menu__pill {
	display: inline-flex;
	align-items: center;
	min-height: var(--fms-tap-min);
	padding: 0 18px;
	border: 1px solid var(--fms-cream-22);
	border-radius: var(--fms-radius-pill);
	color: var(--fms-cream);
	font-weight: var(--fms-weight-regular);
	font-size: var(--fms-size-meta);
	text-transform: none;
}

.fms-mobile-menu a.fms-mobile-menu__pill:hover {
	border-color: var(--fms-brass);
	color: var(--fms-brass);
}

.fms-mobile-menu a.fms-mobile-menu__account {
	border-bottom: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: var(--fms-tap-min);
	margin-top: 32px;
	color: var(--fms-white);
	font-weight: var(--fms-weight-medium);
	font-size: var(--fms-size-nav);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.fms-mobile-menu a.fms-mobile-menu__account:hover {
	color: var(--fms-brass);
}