/* Header. Base rules for .mp-header, .mp-logo and .mp-nav are in style.css. */

.mp-skip-link { position: fixed; top: 8px; left: 8px; z-index: 100; display: inline-flex; align-items: center; min-height: 44px; padding: 0 20px; border-radius: 999px; background: var(--mp-ink); color: #fff; font-weight: 800; text-decoration: none; transform: translateY(-200%); }
.mp-skip-link:focus { color: #fff; transform: none; }
.mp-skip-link:focus-visible { outline: 2px solid var(--mp-primary-dark); outline-offset: 2px; }
main:focus { outline: none; }

.mp-header { top: var(--wp-admin--admin-bar--height, 0); background: var(--mp-bg); transition: box-shadow .2s; }
.mp-header.is-scrolled { box-shadow: 0 10px 24px -18px rgba(120, 62, 14, .55); }
.mp-header__row { gap: 16px; }

.mp-logo { flex-shrink: 0; min-height: 44px; border-radius: .5rem; white-space: nowrap; }
.mp-logo__mark { display: flex; }
.mp-logo__mark .mp-paw { display: block; }
.mp-nav { flex: 1; justify-content: center; gap: clamp(2px, 1vw, 12px); }
.mp-nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 10px; border-radius: .5rem; font-size: .95rem; white-space: nowrap; transition: color .15s; }
.mp-nav a:hover { color: var(--mp-primary-dark); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; }

.mp-cart-link { display: inline-flex; flex-shrink: 0; align-items: center; min-height: 44px; color: var(--mp-ink); font-size: .95rem; font-weight: 700; text-decoration: none; transition: border-color .15s, background-color .15s; }
.mp-cart-link:hover { border-color: #e2c6a8; background: var(--mp-peach); color: var(--mp-ink); }
.mp-header .mp-cart-count { margin-left: 8px; background: var(--mp-primary-dark); line-height: 22px; }

.mp-logo:focus-visible, .mp-nav a:focus-visible, .mp-cart-link:focus-visible, .mp-nav-toggle:focus-visible { outline: 2px solid var(--mp-primary-dark); outline-offset: 2px; }

.mp-nav-toggle { display: none; }

/* Six links, logo and cart have to fit down to the 901px breakpoint. */
@media (max-width: 1040px) {
	.mp-header__row { gap: 8px; }
	.mp-logo { font-size: 1.25rem; }
	.mp-nav { gap: 0; }
	.mp-nav a { padding: 0 7px; font-size: .9rem; }
	.mp-cart-link { padding: 0 12px; font-size: .9rem; }
}

@media (max-width: 900px) {
	/* Without JavaScript all links stay on the page, under the logo. */
	.mp-header { position: static; }
	.mp-header__row { flex-wrap: wrap; padding-top: 10px; padding-bottom: 10px; }
	.mp-header .mp-nav { order: 3; flex: 1 0 100%; flex-wrap: wrap; justify-content: flex-start; }
	.mp-header .mp-nav a { display: inline-flex; }
	.mp-logo { margin-right: auto; font-size: 1.3rem; }

	.mp-js .mp-header { position: sticky; }
	.mp-js .mp-header__row { flex-wrap: nowrap; gap: 8px; min-height: 64px; padding-top: 0; padding-bottom: 0; }

	.mp-js .mp-nav-toggle { order: 2; position: relative; display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--mp-border); border-radius: 999px; background: var(--mp-card); color: var(--mp-ink); cursor: pointer; }
	.mp-nav-toggle__bars, .mp-nav-toggle__bars::before, .mp-nav-toggle__bars::after { display: block; width: 18px; height: 2px; border-radius: 2px; background: currentColor; transition: transform .2s, background-color .2s; }
	.mp-nav-toggle__bars { position: relative; }
	.mp-nav-toggle__bars::before, .mp-nav-toggle__bars::after { content: ""; position: absolute; left: 0; }
	.mp-nav-toggle__bars::before { transform: translateY(-6px); }
	.mp-nav-toggle__bars::after { transform: translateY(6px); }
	.mp-nav-toggle[aria-expanded="true"] .mp-nav-toggle__bars { background: transparent; }
	.mp-nav-toggle[aria-expanded="true"] .mp-nav-toggle__bars::before { transform: rotate(45deg); }
	.mp-nav-toggle[aria-expanded="true"] .mp-nav-toggle__bars::after { transform: rotate(-45deg); }

	.mp-js .mp-header .mp-nav { position: absolute; top: 100%; right: 0; left: 0; z-index: 1; display: block; max-height: calc(100vh - 65px - var(--wp-admin--admin-bar--height, 0px)); max-height: calc(100dvh - 65px - var(--wp-admin--admin-bar--height, 0px)); padding: 8px 16px 16px; overflow-y: auto; overscroll-behavior: contain; border-bottom: 1px solid var(--mp-border); background: var(--mp-bg); box-shadow: var(--mp-shadow); opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity .2s, transform .2s, visibility 0s .2s; }
	.mp-js .mp-header.is-open .mp-nav { opacity: 1; visibility: visible; transform: none; transition: opacity .2s, transform .2s, visibility 0s; }
	.mp-js .mp-header .mp-nav a { display: flex; min-height: 48px; padding: 0 8px; font-size: 1.05rem; white-space: normal; }
	.mp-js .mp-header .mp-nav a + a { border-top: 1px solid var(--mp-border); }

	/* Scrim over the page, under the panel. */
	.mp-header::after { content: ""; position: absolute; top: 100%; right: 0; left: 0; height: 100vh; background: rgba(56, 33, 15, .35); opacity: 0; visibility: hidden; transition: opacity .2s, visibility 0s .2s; }
	.mp-header.is-open::after { opacity: 1; visibility: visible; transition: opacity .2s, visibility 0s; }

	html.mp-menu-open { overflow: hidden; }
}

/* The admin bar stops being fixed on phones. */
@media (max-width: 600px) {
	.mp-header { top: 0; }
}

/* style.css narrows .mp-wrap here; keeps the menu text in line with the logo. */
@media (max-width: 620px) {
	.mp-js .mp-header .mp-nav { padding-right: 8px; padding-left: 8px; }
}

@media (max-width: 374px) {
	.mp-logo { gap: 6px; font-size: 1.15rem; }
	.mp-logo__mark { font-size: 1.25rem; }
	.mp-cart-link { padding: 0 10px; font-size: .9rem; }
	.mp-header .mp-cart-count { margin-left: 4px; }
}

@media (prefers-reduced-motion: reduce) {
	.mp-header, .mp-nav a, .mp-cart-link, .mp-nav-toggle__bars, .mp-nav-toggle__bars::before, .mp-nav-toggle__bars::after { transition: none; }
	.mp-js .mp-header .mp-nav, .mp-js .mp-header.is-open .mp-nav, .mp-header::after, .mp-header.is-open::after { transform: none; transition: none; }
}