/*
 * Header + Footer + Announcement bar.
 *
 * Loaded site-wide via inc/enqueue.php.
 *
 * Phase 2 cleanup (2026-06-04) — this file previously bundled cart,
 * checkout, WC notices, and WC button overrides totaling ~1170 lines.
 * Those concerns moved to:
 *   - cart.css         (cart-only, conditional)
 *   - checkout.css     (checkout-only, conditional)
 *   - wc-defaults.css  (any WC page, conditional)
 * This file now does only what its name says.
 *
 * A tiny site-wide rule for hiding the admin-only post-edit-link in
 * front of logged-out users lives at the end — it's truly global, not
 * WC-specific, so this is the right home for it.
 *
 * @package Premium_Merchandise_Child
 */

/*
 * Header + footer styles — loaded site-wide.
 * References tokens.css only; no hard-coded colors or fonts.
 */

/* Announcement bar */
.pm-announcement {
	background: var(--pm-color-announce);
	color: var(--pm-color-announce-text);
	font-family: var(--pm-font-sans);
	font-size: 13px;
	line-height: 1.4;
	text-align: center;
	padding: 8px 16px;
}

.pm-announcement a,
.pm-announcement__link {
	color: var(--pm-color-announce-text);
	text-decoration: underline;
}

.pm-announcement__link:hover,
.pm-announcement__link:focus {
	text-decoration: none;
}

/* Header */
.pm-header {
	background: var(--pm-color-surface);
	border-bottom: 1px solid var(--pm-color-border);
	font-family: var(--pm-font-sans);
}

.pm-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	max-width: 1200px;
	margin: 0 auto;
	padding: 16px 24px;
}

.pm-header__brand img {
	max-height: 48px;
	width: auto;
	display: block;
}

.pm-header__title {
	color: var(--pm-color-ink);
	font-weight: 700;
	font-size: 20px;
	text-decoration: none;
	letter-spacing: -0.01em;
}

.pm-header__menu {
	display: flex;
	gap: 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.pm-header__menu a {
	color: var(--pm-color-ink);
	text-decoration: none;
	font-weight: 500;
	font-size: 15px;
}

.pm-header__menu a:hover,
.pm-header__menu a:focus {
	color: var(--pm-color-accent);
}

.pm-header__actions {
	display: flex;
	align-items: center;
	gap: 16px;
}

.pm-header__account {
	color: var(--pm-color-ink);
	text-decoration: none;
	font-weight: 500;
	font-size: 14px;
}

.pm-header__account:hover,
.pm-header__account:focus {
	color: var(--pm-color-accent);
}

.pm-header__account--signup {
	padding: 6px 14px;
	background: var(--pm-color-ink);
	color: var(--pm-color-surface);
	border-radius: var(--pm-radius-sm);
	font-size: 13px;
}

.pm-header__account--signup:hover,
.pm-header__account--signup:focus {
	background: var(--pm-color-accent);
	color: var(--pm-color-surface);
}

.pm-header__cart {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--pm-color-ink);
	text-decoration: none;
	font-weight: 500;
	font-size: 14px;
	padding: 8px 12px;
	border: 1px solid var(--pm-color-border);
	border-radius: var(--pm-radius-sm);
}

.pm-header__cart:hover,
.pm-header__cart:focus {
	border-color: var(--pm-color-ink);
}

.pm-header__cart-count {
	background: var(--pm-color-ink);
	color: var(--pm-color-surface);
	border-radius: 999px;
	font-size: 11px;
	min-width: 18px;
	padding: 2px 6px;
	text-align: center;
	line-height: 1;
}

/* Footer */
.pm-footer {
	background: var(--pm-color-ink);
	color: var(--pm-color-surface);
	font-family: var(--pm-font-sans);
	margin-top: 64px;
}

.pm-footer__inner {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr;
	gap: 32px;
	max-width: 1200px;
	margin: 0 auto;
	padding: 48px 24px;
}

/* Footer brand logo. Beats Storefront's `.custom-logo { max-width: 100%; height: auto; }`
   on selector specificity so width can't blow up to the column width. We render the
   purpose-built white-on-black PNG (see footer.php) directly — no `filter: invert(1)`,
   which can't handle a logo with a baked-in background colour. */
.pm-footer__col--brand .custom-logo,
.pm-footer__col--brand .pm-footer__logo {
	display: block;
	max-height: 56px;
	max-width: 240px;
	width: auto;
	height: auto;
	margin: 0 0 16px;
	filter: none;
}

.pm-footer__title {
	display: block;
	font-weight: 700;
	font-size: 18px;
	margin-bottom: 8px;
}

.pm-footer__blurb {
	color: var(--pm-color-surface);
	opacity: 0.8;
	font-size: 14px;
	line-height: 1.6;
	margin: 0;
}

.pm-footer__heading {
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	margin: 0 0 12px;
	color: var(--pm-color-surface);
	opacity: 0.7;
}

.pm-footer__contact,
.pm-footer__menu {
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 14px;
	line-height: 1.8;
}

.pm-footer a {
	color: var(--pm-color-surface);
	text-decoration: none;
}

.pm-footer a:hover,
.pm-footer a:focus {
	text-decoration: underline;
}

.pm-footer__bar {
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	text-align: center;
	padding: 16px 24px;
	font-size: 12px;
	opacity: 0.7;
}

/* Mobile (375px floor) */
@media (max-width: 768px) {
	/* QA round 14 (2026-06-04) — clean single-line header on mobile.
	   Logo left, Login + Sign Up + Cart right, all on one row.
	   Previously the actions wrapped to a second row because of
	   flex-wrap: wrap + the menu's `width: 100%; order: 3` rule. */
	.pm-header__inner {
		flex-wrap: nowrap;
		gap: 10px;
		padding: 10px 14px;
		min-width: 0;
	}

	.pm-header__brand {
		flex: 0 1 auto;
		min-width: 0;
	}
	.pm-header__brand img,
	.pm-header__brand .custom-logo {
		max-height: 36px;
		max-width: 140px;
		width: auto;
		height: auto;
		display: block;
	}
	.pm-header__title {
		font-size: 16px;
		white-space: nowrap;
	}

	/* Hide the menu entirely on mobile — there's only Contact on this site,
	   and the footer already carries that link. Eliminates the row that was
	   forcing the actions to wrap. */
	.pm-header__menu {
		display: none;
	}

	.pm-header__actions {
		flex: 0 0 auto;
		gap: 8px;
	}
	.pm-header__account {
		font-size: 13px;
	}
	.pm-header__account--signup {
		padding: 5px 10px;
		font-size: 12px;
	}
	.pm-header__cart {
		font-size: 13px;
	}

	.pm-footer__inner {
		grid-template-columns: 1fr;
		gap: 24px;
		padding: 32px 16px;
	}
}

/* Hide WC's default "post-edit-link" rendering in front (admin edit-on-frontend
   link) — looks unprofessional next to branded UI. Admins still see it. */
body:not(.logged-in) .post-edit-link {
	display: none !important;
}