/* ==========================================================================
   JP Commitment Graphics — front-end component styles
   Tokens come from theme.json as --wp--preset--* / --wp--custom--* vars.
   Keep values referencing tokens, never hard-coded hex, so the design
   system stays single-sourced.
   ========================================================================== */

/* ---- shared helpers ------------------------------------------------------ */
.jpc-eyebrow {
	font-weight: 800;
	font-size: var(--wp--preset--font-size--eyebrow);
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent);
	margin: 0 0 12px;
}
.jpc-section { padding-block: var(--wp--preset--spacing--70); }

/* ---- header -------------------------------------------------------------- */
.jpc-site-header { z-index: 50; }

.jpc-announcement {
	gap: 22px;
	padding: 9px 16px;
	font-size: var(--wp--preset--font-size--small);
	text-align: center;
}
.jpc-announcement__item {
	margin: 0;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
}
.jpc-announcement__item.is-accent { color: var(--wp--preset--color--accent-tint); }

.jpc-nav {
	min-height: 74px;
	backdrop-filter: blur(14px);
	border-bottom: 1px solid var(--wp--custom--hairline-dark);
}
.jpc-nav .jpc-brand__mark a,
.jpc-site-footer .jpc-brand__mark a {
	font-family: var(--wp--preset--font-family--display);
	color: var(--wp--preset--color--paper);
	font-size: 17px;
	letter-spacing: .02em;
	text-transform: uppercase;
	text-decoration: none;
}
.jpc-primary-nav a { color: #cfd2d8; font-weight: 600; font-size: 14px; }
.jpc-primary-nav a:hover { color: var(--wp--preset--color--paper); }

/* Primary CTA inside the nav (mark the "Start Your Order" item with a class) */
.jpc-nav .wp-block-navigation-item.is-cta a {
	background: var(--wp--preset--color--accent);
	color: #fff;
	font-weight: 800;
	padding: 12px 20px;
	border-radius: var(--wp--custom--radius--control);
	box-shadow: var(--wp--custom--shadow--cta);
}
.jpc-nav .wp-block-navigation-item.is-cta a:hover { background: var(--wp--preset--color--accent-dark); }

/* ---- footer -------------------------------------------------------------- */
.jpc-site-footer .jpc-footer__grid { gap: 36px; padding-bottom: 36px; border-bottom: 1px solid var(--wp--custom--hairline-dark); }
.jpc-footer__title {
	color: var(--wp--preset--color--paper);
	font-family: var(--wp--preset--font-family--body) !important;
	font-weight: 800;
	font-size: 13px !important;
	letter-spacing: .1em;
	text-transform: uppercase;
	margin: 0 0 16px;
}
.jpc-footer__links a { color: #a9aeb9; font-size: 14.5px; }
.jpc-footer__links a:hover { color: var(--wp--preset--color--paper); }
.jpc-footer__blurb { font-size: 14px; line-height: 1.6; max-width: 280px; }
.jpc-footer__legal { padding-top: 24px; font-size: 13px; gap: 16px; }
.jpc-footer__legal p { margin: 0; }

/* ---- cards (shared base for graphic / sport / package / review) ---------- */
.jpc-card {
	background: var(--wp--preset--color--white);
	border-radius: var(--wp--custom--radius--card);
	border: 1px solid var(--wp--custom--hairline);
	box-shadow: var(--wp--custom--shadow--card);
	overflow: hidden;
	transition: transform .25s ease, box-shadow .25s ease;
}
.jpc-card:hover { transform: translateY(-4px); box-shadow: var(--wp--custom--shadow--card-hover); }

/* Portrait graphic media matches the 1080×1350 deliverable */
.jpc-graphic-media { aspect-ratio: 1080 / 1350; background: var(--wp--preset--color--ink); position: relative; }
.jpc-graphic-media img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---- before/after jersey-swap slider ------------------------------------ */
.jpc-ba { position: relative; aspect-ratio: 1080 / 1350; border-radius: var(--wp--custom--radius--card-lg); overflow: hidden; user-select: none; background: var(--wp--preset--color--ink); touch-action: none; }
/* Both layers fill the same canvas identically; only the After's clip-path moves */
.jpc-ba__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
.jpc-ba__before { z-index: 1; }
.jpc-ba__after { z-index: 2; will-change: clip-path; }
.jpc-ba__handle { position: absolute; top: 0; bottom: 0; z-index: 3; width: 3px; background: #fff; transform: translateX(-1.5px); pointer-events: none; box-shadow: 0 0 12px rgba(0,0,0,.45); }
.jpc-ba__grip { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 40px; height: 40px; border-radius: 50%; background: #fff; border: 3px solid var(--wp--preset--color--accent); box-shadow: 0 4px 14px rgba(0,0,0,.4); }
.jpc-ba__grip::before, .jpc-ba__grip::after { content: ""; position: absolute; top: 50%; transform: translateY(-50%); border-block: 5px solid transparent; }
.jpc-ba__grip::before { left: 8px; border-right: 7px solid var(--wp--preset--color--accent); }
.jpc-ba__grip::after { right: 8px; border-left: 7px solid var(--wp--preset--color--accent); }
.jpc-ba input[type="range"] { position: absolute; inset: 0; z-index: 4; width: 100%; height: 100%; margin: 0; cursor: ew-resize; -webkit-appearance: none; appearance: none; background: transparent; touch-action: none; }
.jpc-ba input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 44px; height: 100%; background: transparent; cursor: ew-resize; }
.jpc-ba input[type="range"]::-moz-range-thumb { width: 44px; height: 999px; background: transparent; border: 0; cursor: ew-resize; }
.jpc-ba input[type="range"]:focus-visible ~ .jpc-ba__handle .jpc-ba__grip { outline: 3px solid var(--wp--preset--color--accent-tint); outline-offset: 3px; }
.jpc-ba__tag { position: absolute; top: 14px; z-index: 3; font-size: 11.5px; font-weight: 800; letter-spacing: .1em; padding: 6px 12px; border-radius: 7px; color: #fff; }
.jpc-ba__tag--before { left: 14px; background: rgba(12,14,19,.82); }
.jpc-ba__tag--after { right: 14px; background: var(--wp--preset--color--accent); }