/* ==========================================================================
   Global site chrome — announcement bar, sticky header + nav (incl. the
   Commitment Graphics dropdown and the mobile drawer), and the site footer.

   Loaded on EVERY page, so it also owns the small set of primitives shared by
   the hub, sport pages and the homepage (.jpc-wrap, the link-proof CTA rule,
   .jpc-eyebrow, focus states). Those live here once rather than being repeated
   per component stylesheet. hub.css / home.css are enqueued after this file.
   ========================================================================== */

/* ---- shared primitives ---------------------------------------------------- */
/* Header, main and footer are all full-bleed and butt directly together; the
   theme's default block gap would otherwise leave a seam of body background
   between them. */
.wp-site-blocks > * { margin-block-start: 0; }

.jpc-wrap { max-width: 1280px; margin-inline: auto; padding-inline: clamp(16px, 4vw, 40px); }
.jpc-eyebrow { font-weight: 800; font-size: 13px; letter-spacing: .18em; text-transform: uppercase;
	color: var(--wp--preset--color--accent-ink); margin: 0 0 12px; }

/* CTA text is always white, on every state, immune to global link colour.
   Filled CTAs sit on the AA dark-orange (#D0350C) or ink; white on that is 5.0:1. */
.jpc-btn-primary, .jpc-btn-primary:link, .jpc-btn-primary:visited, .jpc-btn-primary:hover, .jpc-btn-primary:focus, .jpc-btn-primary:active,
.jpc-btn-dark, .jpc-btn-dark:link, .jpc-btn-dark:visited, .jpc-btn-dark:hover, .jpc-btn-dark:focus, .jpc-btn-dark:active,
.jpc-cta, .jpc-cta:link, .jpc-cta:visited, .jpc-cta:hover, .jpc-cta:focus, .jpc-cta:active,
.jpc-nav__cta, .jpc-nav__cta:link, .jpc-nav__cta:visited, .jpc-nav__cta:hover, .jpc-nav__cta:focus, .jpc-nav__cta:active,
.jpc-mnav__cta, .jpc-mnav__cta:link, .jpc-mnav__cta:visited, .jpc-mnav__cta:hover, .jpc-mnav__cta:focus, .jpc-mnav__cta:active,
.jpc-pkg__cta, .jpc-pkg__cta:link, .jpc-pkg__cta:visited, .jpc-pkg__cta:hover, .jpc-pkg__cta:focus, .jpc-pkg__cta:active,
.jpc-gcard__order, .jpc-gcard__order:link, .jpc-gcard__order:visited, .jpc-gcard__order:hover, .jpc-gcard__order:focus, .jpc-gcard__order:active,
.jpc-lb__cta, .jpc-lb__cta:link, .jpc-lb__cta:visited, .jpc-lb__cta:hover, .jpc-lb__cta:focus, .jpc-lb__cta:active {
	color: #fff !important; text-decoration: none !important; }

/* Visible keyboard focus everywhere in the chrome. */
.jpc-chrome a:focus-visible, .jpc-chrome button:focus-visible,
.jpc-site-footer a:focus-visible, .jpc-site-footer button:focus-visible {
	outline: 3px solid var(--wp--preset--color--accent-tint); outline-offset: 3px; border-radius: 6px; }

/* ---- announcement bar ----------------------------------------------------- */
.jpc-announce { background: var(--wp--preset--color--ink); color: var(--wp--preset--color--paper);
	text-align: center; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700;
	padding: 9px 16px; display: flex; gap: 22px; justify-content: center; flex-wrap: wrap; }
.jpc-announce .sep { opacity: .5; }
.jpc-announce .hot { color: var(--wp--preset--color--accent-tint); }

/* ---- sticky header -------------------------------------------------------- */
/* Solid, not translucent. At 92% opacity the hero's radial gradient (light
   point at 80% across) bled through, making the bar read gray on the right and
   black on the left. Opaque ink keeps it one consistent colour on every page
   and matches the announcement bar above it. */
.jpc-header { position: sticky; top: 0; z-index: 50;
	background: var(--wp--preset--color--ink);
	border-bottom: 1px solid var(--wp--custom--hairline-dark); }
.jpc-header__bar { max-width: 1280px; margin-inline: auto; padding-inline: clamp(16px, 4vw, 40px);
	height: 74px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }

/* ---- brand ---------------------------------------------------------------- */
.jpc-brand { display: flex; align-items: center; gap: 11px; flex-shrink: 0; text-decoration: none; }
/* The signature logo is black artwork; invert it for the dark header/footer.
   Scoped to .jpc-brand (0,2,0) so it outranks WooCommerce's `.woocommerce img
   { height: auto }` (0,1,1), which otherwise let the logo render at its natural
   1200x468 on store pages. */
.jpc-brand .jpc-logo-img { height: 42px; width: auto; max-width: 190px; display: block;
	filter: brightness(0) invert(1); }
.jpc-site-footer .jpc-brand .jpc-logo-img { height: 40px; }
/* "Custom Sports Graphics" descriptor pairs with the existing name. */
.jpc-brand__desc { display: block; color: var(--wp--preset--color--accent-tint); font-size: 9.5px;
	letter-spacing: .26em; font-weight: 800; text-transform: uppercase; border-left: 1px solid var(--wp--custom--hairline-dark);
	padding-left: 11px; margin-left: 1px; line-height: 1.35; max-width: 92px; }
.jpc-brand__tile { width: 38px; height: 38px; border-radius: 9px; background: var(--wp--preset--color--accent);
	display: flex; align-items: center; justify-content: center;
	font-family: var(--wp--preset--font-family--display); color: #fff; font-size: 22px; line-height: 1; }
.jpc-brand__name { display: block; font-family: var(--wp--preset--font-family--display);
	color: var(--wp--preset--color--paper); font-size: 17px; letter-spacing: .02em; line-height: 1; }
.jpc-brand__sub { display: block; color: var(--wp--preset--color--accent-tint); font-size: 9.5px;
	letter-spacing: .28em; font-weight: 700; margin-top: 3px; }

/* ---- desktop nav ---------------------------------------------------------- */
.jpc-nav { display: flex; align-items: center; gap: 20px; }
.jpc-nav__link { color: #cfd2d8; font-weight: 600; font-size: 14px; text-decoration: none;
	background: none; border: 0; padding: 0; cursor: pointer; font-family: inherit;
	display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.jpc-nav__link:hover { color: var(--wp--preset--color--paper); }
.jpc-nav__link.is-current { color: var(--wp--preset--color--paper); }
.jpc-nav__link.is-current::after { content: ""; display: block; }
.jpc-nav__cta, .jpc-cta { background: var(--wp--preset--color--accent-cta); color: #fff !important;
	font-weight: 800; font-size: 14px; padding: 12px 20px; border-radius: 9px; letter-spacing: .02em;
	box-shadow: var(--wp--custom--shadow--cta); text-decoration: none; white-space: nowrap;
	transition: background .15s, transform .15s; }
.jpc-nav__cta:hover, .jpc-cta:hover { background: var(--wp--preset--color--accent-dark); }

/* ---- Commitment Graphics dropdown ---------------------------------------- */
.jpc-drop { position: relative; }
.jpc-drop__caret { width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent;
	border-top: 5px solid currentColor; transition: transform .15s; }
.jpc-drop.is-open .jpc-drop__caret { transform: rotate(180deg); }
.jpc-drop__panel { position: absolute; top: calc(100% + 14px); left: 50%; transform: translateX(-50%) translateY(-6px);
	min-width: 290px; background: #12151C; border: 1px solid var(--wp--custom--hairline-dark);
	border-radius: 14px; box-shadow: 0 24px 60px rgba(0,0,0,.55); padding: 10px;
	opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .15s, transform .15s, visibility .15s; z-index: 60; }
.jpc-drop.is-open .jpc-drop__panel { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0); }
/* Hover bridge so the pointer can travel from the button to the panel. */
.jpc-drop__panel::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }
.jpc-drop__lead { display: block; color: var(--wp--preset--color--paper); font-weight: 800; font-size: 14px;
	text-decoration: none; padding: 11px 12px; border-radius: 9px; }
.jpc-drop__lead:hover { background: rgba(255,255,255,.06); }
.jpc-drop__sports { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; margin: 6px 0;
	padding-top: 6px; border-top: 1px solid var(--wp--custom--hairline-dark); }
.jpc-drop__sports a { color: #cfd2d8; font-size: 13.5px; font-weight: 600; text-decoration: none;
	padding: 9px 12px; border-radius: 8px; }
.jpc-drop__sports a:hover { background: rgba(255,255,255,.06); color: #fff; }
.jpc-drop__all { display: block; color: var(--wp--preset--color--accent-tint); font-weight: 800; font-size: 13px;
	text-decoration: none; padding: 10px 12px; border-radius: 9px; border-top: 1px solid var(--wp--custom--hairline-dark); }
.jpc-drop__all:hover { background: rgba(255,255,255,.06); }

/* ---- mobile toggle + drawer ---------------------------------------------- */
.jpc-navtoggle { display: none; background: none; border: 0; cursor: pointer; padding: 10px;
	flex-direction: column; gap: 5px; }
.jpc-navtoggle span { width: 24px; height: 2.5px; background: var(--wp--preset--color--paper); border-radius: 2px; }

.jpc-mnav { position: fixed; inset: 0; z-index: 200; background: rgba(6,8,12,.6);
	opacity: 0; transition: opacity .2s; }
.jpc-mnav.is-open { opacity: 1; }
.jpc-mnav__panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(390px, 92vw);
	background: #0C0E13; border-left: 1px solid var(--wp--custom--hairline-dark);
	display: flex; flex-direction: column; padding: 18px clamp(16px, 5vw, 24px) 24px;
	overflow-y: auto; transform: translateX(100%); transition: transform .22s ease; }
.jpc-mnav.is-open .jpc-mnav__panel { transform: translateX(0); }
.jpc-mnav__top { display: flex; align-items: center; justify-content: space-between; gap: 16px;
	padding-bottom: 16px; border-bottom: 1px solid var(--wp--custom--hairline-dark); }
.jpc-mnav__close { background: rgba(255,255,255,.07); border: 0; color: #fff; cursor: pointer;
	width: 44px; height: 44px; border-radius: 11px; font-size: 17px; line-height: 1; flex-shrink: 0; }
.jpc-mnav__close:hover { background: rgba(255,255,255,.14); }
.jpc-mnav__links { display: flex; flex-direction: column; padding: 10px 0; flex: 1; }
/* 52px min touch targets. */
.jpc-mnav__links > a, .jpc-mnav__acc { display: flex; align-items: center; justify-content: space-between;
	min-height: 52px; padding: 12px 4px; color: #E6E8EC; font-size: 16.5px; font-weight: 700;
	text-decoration: none; background: none; border: 0; border-bottom: 1px solid rgba(255,255,255,.06);
	cursor: pointer; font-family: inherit; text-align: left; width: 100%; }
.jpc-mnav__links > a:hover, .jpc-mnav__acc:hover { color: #fff; }
.jpc-mnav__caret { width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent;
	border-top: 6px solid currentColor; transition: transform .18s; flex-shrink: 0; }
.jpc-mnav__acc.is-open .jpc-mnav__caret { transform: rotate(180deg); }
.jpc-mnav__accpanel { display: flex; flex-direction: column; padding: 4px 0 10px 12px;
	border-left: 2px solid var(--wp--preset--color--accent-cta); margin: 4px 0 4px 4px; }
.jpc-mnav__sub { min-height: 46px; display: flex; align-items: center; padding: 10px 8px;
	color: #B9BEC8; font-size: 15px; font-weight: 600; text-decoration: none; border-radius: 8px; }
.jpc-mnav__sub:hover { color: #fff; background: rgba(255,255,255,.05); }
.jpc-mnav__sub--all { color: var(--wp--preset--color--accent-tint); font-weight: 800; }
.jpc-mnav__cta { display: block; text-align: center; background: var(--wp--preset--color--accent-cta);
	color: #fff !important; font-weight: 800; font-size: 16px; padding: 17px 20px; border-radius: 11px;
	text-decoration: none; margin-top: 16px; box-shadow: var(--wp--custom--shadow--cta); }
.jpc-mnav__cta:hover { background: var(--wp--preset--color--accent-dark); }

/* ---- footer --------------------------------------------------------------- */
.jpc-site-footer { background: var(--wp--preset--color--ink); color: var(--wp--preset--color--muted-light);
	padding: clamp(44px, 5vw, 68px) 0 34px; }
.jpc-site-footer a { color: var(--wp--preset--color--muted-light); text-decoration: none; }
.jpc-site-footer a:hover { color: var(--wp--preset--color--paper); }
.jpc-footer__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 36px;
	padding-bottom: 34px; border-bottom: 1px solid var(--wp--custom--hairline-dark); }
.jpc-footer__brand .jpc-brand { margin-bottom: 16px; }
.jpc-footer__blurb { font-size: 14px; line-height: 1.65; margin: 0; max-width: 40ch; }
.jpc-footer__social { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.jpc-footer__social a { font-size: 12.5px; font-weight: 700; letter-spacing: .04em;
	border: 1px solid var(--wp--custom--hairline-dark); padding: 8px 14px; border-radius: 999px; }
.jpc-footer__social a:hover { border-color: var(--wp--preset--color--accent-tint); }
.jpc-footer__title { font-family: var(--wp--preset--font-family--display); text-transform: uppercase;
	color: var(--wp--preset--color--paper); font-size: 13.5px; letter-spacing: .14em; margin-bottom: 14px; }
.jpc-footer__links { display: flex; flex-direction: column; gap: 10px; font-size: 14px; }
.jpc-footer__policy { padding: 26px 0 6px; border-bottom: 1px solid var(--wp--custom--hairline-dark); }
.jpc-footer__policy p { font-size: 13.5px; line-height: 1.7; margin: 0; max-width: 88ch; }
.jpc-footer__policy strong { color: var(--wp--preset--color--paper); }
.jpc-footer__legal-links { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 14px; font-size: 13.5px; }
.jpc-footer__legal-links a { text-decoration: underline; }
.jpc-footer__legal { padding-top: 22px; display: flex; justify-content: space-between; gap: 16px;
	flex-wrap: wrap; font-size: 13px; }

/* ---- responsive ----------------------------------------------------------- */
@media (max-width: 1120px) {
	.jpc-nav { gap: 15px; }
	.jpc-nav__link { font-size: 13.5px; }
	.jpc-brand__desc { display: none; }
}
@media (max-width: 960px) {
	.jpc-nav { display: none; }
	.jpc-navtoggle { display: flex; }
	.jpc-footer__grid { grid-template-columns: 1fr 1fr; gap: 30px; }
}
@media (max-width: 720px) {
	.jpc-announce { gap: 10px; font-size: 11px; letter-spacing: .1em; }
	.jpc-header__bar { height: 64px; }
	.jpc-brand .jpc-logo-img { height: 34px; }
	.jpc-footer__grid { grid-template-columns: 1fr; gap: 28px; }
	.jpc-footer__legal { flex-direction: column; gap: 8px; }
}
/* The drawer is a mobile affordance only. */
@media (min-width: 961px) {
	.jpc-mnav { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
	.jpc-mnav, .jpc-mnav__panel, .jpc-drop__panel { transition: none; }
}