/* =========================================================================
   MadeInEast.com platform shell — design tokens + header/footer.
   Paired with template-parts/platform-header.php and platform-footer.php.
   Design system: "Precision Industrial Commerce".
   ========================================================================= */

:root {
	/* Brand + surfaces */
	--pf-crimson:        #D93829;
	--pf-crimson-hover:  #B91C1C;
	--pf-crimson-subtle: #FEF2F2;
	--pf-black:          #0B0F19;
	--pf-navy:           #0F172A;
	--pf-inverse:        #213145;
	--pf-surface:        #F8F9FF;
	--pf-card:           #FFFFFF;
	--pf-low:            #EFF4FF;
	--pf-container:      #E5EEFF;
	--pf-high:           #DCE9FF;
	--pf-variant:        #D3E4FE;
	--pf-primary-fixed:  #FFDAD5;

	/* Ink + status */
	--pf-ink:            #0B1C30;
	--pf-ink-soft:       #5B403C;
	--pf-secondary:      #565E74;
	--pf-tertiary:       #0051D6;
	--pf-tertiary-soft:  #B4C5FF;
	--pf-verified:       #059669;
	--pf-verified-bg:    #ECFDF5;
	--pf-warning:        #D97706;
	--pf-warning-bg:     #FFFBEB;

	/* Lines, depth, metrics */
	--pf-line:           #E2E8F0;
	--pf-line-strong:    #CBD5E1;
	--pf-shadow-1:       0 1px 3px rgba(15,23,42,.05), 0 1px 2px -1px rgba(15,23,42,.03);
	--pf-shadow-2:       0 10px 25px -5px rgba(15,23,42,.08), 0 8px 10px -6px rgba(15,23,42,.04);
	--pf-shadow-xl:      0 24px 48px -16px rgba(15,23,42,.20);
	--pf-wrap:           1280px;
	--pf-header-h:       64px;

	--pf-head: "Plus Jakarta Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
	--pf-body: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
}

/* ---- Document ----
   The template renders its own document, so the baseline the active theme
   would normally provide is set here instead. */
body.pf-shell {
	margin: 0;
	background: var(--pf-card);
	color: var(--pf-ink);
	font-family: var(--pf-body);
	-webkit-font-smoothing: antialiased;
}
body.pf-shell *,
body.pf-shell *::before,
body.pf-shell *::after { box-sizing: border-box; }

/* ---- Accessibility utilities ---- */
.mie-visually-hidden {
	position: absolute !important;
	width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
	clip: rect(0 0 0 0); clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}
.mie-skip-link {
	position: absolute; left: 8px; top: -48px; z-index: 100;
	background: var(--pf-navy); color: #fff;
	padding: .55rem .9rem; border-radius: 0 0 8px 8px;
	font: 600 .9rem/1 var(--pf-body); text-decoration: none;
	transition: top .15s ease;
}
.mie-skip-link:focus { top: 0; }
body.pf-shell a:focus-visible,
body.pf-shell button:focus-visible {
	outline: 3px solid var(--pf-crimson); outline-offset: 2px; border-radius: 4px;
}

/* ---- Material Symbols ---- */
.pf-ico,
.sw-ico {
	font-family: "Material Symbols Outlined", sans-serif;
	font-weight: normal;
	font-style: normal;
	font-size: 20px;
	line-height: 1;
	letter-spacing: normal;
	white-space: nowrap;
	display: inline-block;
	flex: none;
	font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
	-webkit-font-feature-settings: "liga";
	-webkit-font-smoothing: antialiased;
}
.pf-ico--sm,
.sw-ico--sm { font-size: 16px; }
.pf-ico--verified { color: var(--pf-verified); }

/* =========================================================================
   Header
   ========================================================================= */
.pf-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: rgba(255,255,255,.9);
	backdrop-filter: blur(12px) saturate(180%);
	box-shadow: 0 1px 8px rgba(15,23,42,.04);
	font-family: var(--pf-body);
	color: var(--pf-ink);
}
.pf-header *,
.pf-header *::before,
.pf-header *::after { box-sizing: border-box; }
/* Resets use :where() so single-class component rules below always win. */
.pf-header :where(a) { text-decoration: none; color: inherit; }
.pf-header :where(ul) { list-style: none; margin: 0; padding: 0; }
.pf-header :where(p) { margin: 0; }

.pf-header__inner {
	max-width: var(--pf-wrap);
	min-height: var(--pf-header-h);
	margin-inline: auto;
	padding-inline: clamp(1rem, 4vw, 3rem);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
}
.pf-header__start { display: flex; align-items: center; gap: 2rem; min-width: 0; }
.pf-header__end { display: flex; align-items: center; gap: 1rem; flex: none; }

/* ---- Brand ---- */
.pf-brand { display: flex; align-items: center; gap: .75rem; flex: none; }
/* The brand mark is a wide wordmark, so cap its width and let object-fit
   letterbox it rather than letting it push the nav out of the header. */
.pf-brand__logo { display: block; height: 32px; width: auto; max-width: 220px; object-fit: contain; }

/* ---- Primary nav ---- */
.pf-nav__list { display: flex; align-items: center; gap: 1.5rem; }
.pf-nav__item { position: relative; padding-block: .5rem; }

.pf-nav__top {
	display: inline-flex;
	align-items: center;
	gap: .25rem;
	font: inherit;
	font-size: 13px;
	font-weight: 600;
	line-height: 18px;
	letter-spacing: .01em;
	white-space: nowrap;
	color: var(--pf-ink-soft);
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
	transition: color .15s ease;
}
.pf-nav__top:hover { color: var(--pf-ink); }
.pf-nav__item.is-active > .pf-nav__top {
	background: var(--pf-crimson);
	color: #fff;
	border-radius: .5rem;
	box-shadow: var(--pf-shadow-1);
	padding: .375rem .75rem;
}
.pf-nav__top .pf-ico { transition: transform .15s ease; }
.pf-nav__item:hover .pf-nav__top .pf-ico,
.pf-nav__top[aria-expanded="true"] .pf-ico { transform: rotate(180deg); }

.pf-nav__panel {
	position: absolute;
	top: 100%;
	left: 0;
	width: 14rem;
	padding-top: .5rem;
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity .14s ease, transform .14s ease, visibility .14s;
	z-index: 50;
}
.pf-nav__panel > ul {
	background: var(--pf-card);
	border-radius: .75rem;
	box-shadow: var(--pf-shadow-2);
	padding: .5rem .375rem;
	display: flex;
	flex-direction: column;
	gap: .25rem;
}
.pf-nav__item:hover .pf-nav__panel,
.pf-nav__item:focus-within .pf-nav__panel,
.pf-nav__top[aria-expanded="true"] + .pf-nav__panel {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}
.pf-nav__sublink {
	display: block;
	padding: .5rem .75rem;
	border-radius: .5rem;
	font-size: 13px;
	font-weight: 600;
	line-height: 18px;
	color: var(--pf-ink-soft);
	transition: background .15s ease, color .15s ease;
}
.pf-nav__sublink:hover { background: var(--pf-low); color: var(--pf-ink); }
.pf-nav__sublink.is-current {
	background: var(--pf-crimson);
	color: #fff;
	box-shadow: var(--pf-shadow-1);
}

/* ---- Locale ---- */
.pf-locale { position: relative; }
.pf-locale__btn,
.pf-locale__static {
	display: inline-flex;
	align-items: center;
	gap: .375rem;
	font: inherit;
	font-size: 13px;
	font-weight: 600;
	line-height: 18px;
	padding: .375rem .625rem;
	border: 0;
	border-radius: .5rem;
	background: var(--pf-low);
	color: var(--pf-ink-soft);
}
.pf-locale__btn { cursor: pointer; }
.pf-locale__btn:hover { color: var(--pf-ink); }
.pf-locale__menu {
	position: absolute;
	top: 100%;
	right: 0;
	min-width: 11rem;
	margin-top: .5rem;
	padding: .5rem .375rem;
	background: var(--pf-card);
	border-radius: .75rem;
	box-shadow: var(--pf-shadow-2);
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity .14s ease, transform .14s ease, visibility .14s;
	z-index: 50;
}
.pf-locale__btn[aria-expanded="true"] + .pf-locale__menu,
.pf-locale:focus-within .pf-locale__menu { opacity: 1; visibility: visible; transform: translateY(0); }
.pf-locale__opt {
	display: block;
	padding: .5rem .75rem;
	border-radius: .5rem;
	font-size: 13px;
	font-weight: 600;
	color: var(--pf-ink-soft);
}
.pf-locale__opt:hover { background: var(--pf-low); color: var(--pf-ink); }
.pf-locale__opt.is-current { color: var(--pf-crimson); }

/* ---- Actions ---- */
.pf-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: .5rem 1rem;
	border-radius: .5rem;
	background: var(--pf-crimson);
	color: #fff;
	font-size: 13px;
	font-weight: 600;
	line-height: 18px;
	letter-spacing: .01em;
	box-shadow: 0 0 0 1px rgba(217,56,41,.2);
	transition: background .15s ease, transform .12s ease;
}
.pf-cta:hover { background: var(--pf-crimson-hover); transform: translateY(-1px); }

.pf-account {
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--pf-crimson);
	color: #fff;
	flex: none;
}
.pf-account .pf-ico { font-size: 18px; }
.pf-account:hover { background: var(--pf-crimson-hover); }

/* ---- Mobile toggle ---- */
.pf-burger {
	display: none;
	position: relative;
	width: 38px;
	height: 34px;
	border: 1px solid var(--pf-line);
	border-radius: .5rem;
	background: var(--pf-card);
	cursor: pointer;
}
.pf-burger__bars,
.pf-burger__bars::before,
.pf-burger__bars::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 16px;
	height: 2px;
	background: var(--pf-navy);
	transform: translate(-50%, -50%);
}
.pf-burger__bars::before { transform: translate(-50%, -6px); }
.pf-burger__bars::after { transform: translate(-50%, 4px); }

/* ---- Header responsive ---- */
@media (max-width: 1023px) {
	.pf-burger { display: block; }
	.pf-header__inner { position: relative; }
	.pf-nav {
		position: absolute;
		left: 0;
		right: 0;
		top: 100%;
		display: none;
		padding: .5rem clamp(1rem, 4vw, 3rem) 1rem;
		background: var(--pf-card);
		box-shadow: var(--pf-shadow-2);
	}
	.pf-nav.is-open { display: block; }
	.pf-nav__list { flex-direction: column; align-items: stretch; gap: .25rem; }
	.pf-nav__item { padding-block: 0; }
	.pf-nav__top { width: 100%; justify-content: space-between; padding: .75rem .5rem; }
	.pf-nav__item.is-active > .pf-nav__top { padding: .75rem .75rem; }
	.pf-nav__panel {
		position: static;
		width: auto;
		padding-top: 0;
		opacity: 1;
		visibility: visible;
		transform: none;
		display: none;
	}
	.pf-nav__panel > ul { box-shadow: none; padding: 0 0 .5rem .75rem; }
	/* Hover must not open panels on touch; the disclosure button owns the state. */
	.pf-nav__item:hover .pf-nav__panel,
	.pf-nav__item:focus-within .pf-nav__panel { display: none; }
	.pf-nav__top[aria-expanded="true"] + .pf-nav__panel { display: block; }
}
@media (max-width: 719px) {
	.pf-locale,
	.pf-locale__static { display: none; }
	.pf-brand__logo { height: 26px; max-width: 150px; }
	.pf-header__start { gap: 1rem; }
	.pf-header__end { gap: .625rem; }
}
@media (max-width: 479px) {
	.pf-cta { padding: .5rem .75rem; }
}

/* =========================================================================
   Footer
   ========================================================================= */
.pf-footer {
	background: var(--pf-black);
	color: #fff;
	font-family: var(--pf-body);
	padding-block: 4rem 3rem;
}
.pf-footer *,
.pf-footer *::before,
.pf-footer *::after { box-sizing: border-box; }
.pf-footer :where(a) { text-decoration: none; color: inherit; }
.pf-footer :where(ul) { list-style: none; margin: 0; padding: 0; }
.pf-footer :where(p) { margin: 0; }

.pf-footer__grid {
	max-width: var(--pf-wrap);
	margin-inline: auto;
	padding-inline: clamp(1rem, 4vw, 3rem);
	padding-bottom: 3rem;
	display: grid;
	grid-template-columns: 2fr 1fr 1fr 1fr;
	gap: 2.5rem;
}
.pf-footer__brand { display: flex; flex-direction: column; gap: 1rem; }
.pf-footer__brandline { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.pf-footer__name {
	font-family: var(--pf-head);
	font-size: 24px;
	font-weight: 700;
	line-height: 32px;
	letter-spacing: -.015em;
}
.pf-pill {
	display: inline-flex;
	align-items: center;
	gap: .25rem;
	padding: .125rem .5rem;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 600;
	line-height: 14px;
	letter-spacing: .04em;
}
.pf-pill--verified { background: var(--pf-verified-bg); color: var(--pf-verified); }
.pf-footer__blurb {
	max-width: 24rem;
	font-size: 13px;
	line-height: 20px;
	color: rgba(255,255,255,.62);
}
.pf-footer__cert {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	align-self: flex-start;
	padding: .375rem .75rem;
	border-radius: .5rem;
	background: var(--pf-inverse);
	color: #EAF1FF;
	font-size: 13px;
	font-weight: 500;
	line-height: 18px;
}
.pf-footer__heading {
	margin: 0 0 .25rem;
	font-family: var(--pf-body);
	font-size: 13px;
	font-weight: 600;
	line-height: 18px;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: #fff;
}
.pf-footer__col { display: flex; flex-direction: column; gap: .75rem; }
.pf-footer__col ul { display: grid; gap: .5rem; }
.pf-footer__col a {
	font-size: 13px;
	line-height: 20px;
	color: rgba(255,255,255,.62);
	transition: color .15s ease;
}
.pf-footer__col a:hover { color: #fff; }

.pf-footer__bar {
	max-width: var(--pf-wrap);
	margin-inline: auto;
	padding-inline: clamp(1rem, 4vw, 3rem);
	padding-top: 2rem;
	border-top: 1px solid rgba(33,49,69,.6);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .04em;
	color: rgba(255,255,255,.62);
}
.pf-footer__legal { display: flex; flex-wrap: wrap; gap: 1rem; }
.pf-footer__legal-nav { display: flex; flex-wrap: wrap; gap: 1.5rem; }
.pf-footer__legal-nav a:hover { color: #fff; }

@media (max-width: 1023px) {
	.pf-footer__grid { grid-template-columns: 1fr 1fr; }
	.pf-footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 619px) {
	.pf-footer__grid { grid-template-columns: 1fr; }
	.pf-footer__bar { justify-content: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
	.pf-header *, .pf-footer * { transition: none !important; }
}