/* =============================================================================
 * RPM Custom Header — styles
 * Rendered by mu-plugins/rpm-custom-header.php ([rpm_header] shortcode) inside
 * Impreza header post 7182. Desktop ≥1000px, mobile <1000px.
 * Design tokens pulled from Figma (node 426:1248). See docs/header-rebuild-plan.md
 * ========================================================================== */

.rpm-hdr {
	--rpm-red:          #b5201a;
	--rpm-navy:         #003066; /* desktop mega-menu bg */
	--rpm-navy-dark:    #0e2044; /* active dropdown row / open mobile accordion */
	--rpm-navy-panel:   #192f5d; /* mobile flyout panel bg (Figma 350:645/745) */
	--rpm-navy-row:     #344f87; /* muted rows + mobile toggle track (Figma) */
	--rpm-portal-brd:   #4a6397; /* mobile portal button border (Figma) */
	--rpm-gray:         #6c747c;
	--rpm-util-bg:      #eef1f5;
	--rpm-util-border:  #d5d9dd;
	--rpm-dd-text:      #d9d9d9;
	--rpm-circle-gray:  #9ba1a8;

	--rpm-inner:        var(--content-width, 1440px);
	--rpm-pad:          24px;

	font-family: 'Barlow', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	position: sticky;
	top: 0;
	z-index: 1000;
	width: 100%;
	background: #fff;
	color: var(--rpm-gray);
	box-sizing: border-box;
}
.rpm-hdr *,
.rpm-hdr *::before,
.rpm-hdr *::after { box-sizing: border-box; }

.rpm-hdr ul { list-style: none; margin: 0; padding: 0; }
.rpm-hdr li { margin: 1px 0; } /* kill Impreza's global li margin-bottom (breaks vertical centering) */
.rpm-hdr a { text-decoration: none; color: inherit; }

/* MOBILE ONLY: opt these links out of Impreza's global `.no-touch a:hover`
   (which recolors every link red and out-specifies our base rule) so they keep
   their own color on rollover. Desktop nav + eyebrow DO hover red — set in
   their own sections below. .rpm-hdr also matches the portal host, so this
   covers the mobile panel whether docked or portaled. */
.rpm-hdr .rpm-mobile-link:hover,
.rpm-hdr .rpm-portal-btn:hover,
.rpm-hdr .rpm-mobile-cta:hover { color: inherit; }

/* Shared caret (pure CSS chevron, inherits color) */
.rpm-caret {
	display: inline-block;
	width: 7px;
	height: 7px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	transform-origin: center;
	margin-left: 6px;
	margin-bottom: 2px;
	transition: transform .2s ease;
}

/* Which layout shows at which width. Desktop compresses fluidly (see clamp()s
   below) from ~1300 down to 1150, then hands off to the mobile/hamburger layout. */
.rpm-hdr-mobile  { display: none; }
.rpm-hdr-spacer  { display: none; }
@media (max-width: 1149px) {
	.rpm-hdr-desktop { display: none; }
	.rpm-hdr-mobile  { display: block; position: relative; }

	/* On mobile the header is FIXED, not sticky: Impreza sets
	   .l-canvas{overflow:hidden} at ≤899px, which makes that element the
	   reference frame for position:sticky and lets the header scroll away.
	   position:fixed escapes the overflow ancestor (no transformed ancestor
	   exists), keeping the bar pinned and always visible. The spacer below
	   reserves its height so page content isn't hidden underneath. */
	.rpm-hdr { position: fixed; top: 0; left: 0; right: 0; }
	.rpm-hdr-spacer { display: block; height: 80px; }
}

/* =============================================================================
 * DESKTOP — utility bar
 * ========================================================================== */

.rpm-hdr-utility {
	background: var(--rpm-util-bg);
	border-bottom: 1px solid var(--rpm-util-border);
	height: 36px;
	overflow: visible; /* keep visible so the Locations dropdown isn't clipped */
	transition: height .28s ease, opacity .22s ease, border-color .28s ease;
}
.rpm-hdr-utility-inner {
	max-width: var(--rpm-inner);
	margin: 0 auto;
	/* fluid side padding: matches .rpm-hdr-main-inner so the two rows align */
	padding: 0 clamp(16px, calc(16px + (100vw - 1150px) / 18.75), 24px);
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.rpm-hdr-message {
	margin: 0;
	font-size: 13px;
	font-weight: 500;
	color: var(--rpm-gray);
	letter-spacing: -0.26px;
}
.rpm-hdr-utility-right {
	display: flex;
	align-items: center;
	gap: 22px;
	margin-left: auto; /* always pin the group to the right, message or not */
}

.rpm-hdr-utility-menu {
	display: flex;
	align-items: center;
	gap: 22px;
}
.rpm-hdr-utility-menu > li { position: relative; display: flex; align-items: center; }
.rpm-hdr-utility-menu > li > a {
	display: inline-flex;
	align-items: center;
	line-height: 1; /* override Impreza's inherited line-height so items center evenly */
	font-size: 14px;
	font-weight: 600;
	letter-spacing: -0.28px;
	text-transform: uppercase;
	color: var(--rpm-gray);
	transition: color .15s ease;
}
.rpm-hdr-utility-menu > li > a:hover { color: var(--rpm-red); }

/* Utility dropdown (Locations) */
.rpm-dropdown--utility {
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 240px;
	background: var(--rpm-navy);
	border-top: 3px solid var(--rpm-red);
	border-radius: 0 0 6px 6px;
	box-shadow: 0 12px 20px rgba(0,0,0,.25);
	padding: 6px 0;
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity .18s ease, transform .18s ease, visibility .18s;
	z-index: 1000;
}
.rpm-hdr-utility-menu > li.rpm-has-dropdown:hover > .rpm-dropdown--utility,
.rpm-hdr-utility-menu > li.rpm-has-dropdown:focus-within > .rpm-dropdown--utility {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}
.rpm-dropdown--utility li > a {
	display: block;
	padding: 9px 18px;
	font-size: 14px;
	font-weight: 500;
	text-transform: none;
	color: var(--rpm-dd-text);
	border-left: 3px solid transparent;
	transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.rpm-dropdown--utility li > a:hover {
	background: var(--rpm-navy-dark);
	color: #fff;
	border-left-color: var(--rpm-red);
}

/* =============================================================================
 * DESKTOP — main bar
 * ========================================================================== */

.rpm-hdr-main { height: 116px; background: #fff; transition: height .3s ease .1s; }
.rpm-hdr-main-inner {
	max-width: var(--rpm-inner);
	margin: 0 auto;
	/* fluid side padding: 16px @1150 → 24px @1300+ (matches utility bar) */
	padding: 0 clamp(16px, calc(16px + (100vw - 1150px) / 18.75), 24px);
	height: 116px;
	display: flex;
	align-items: center;
	/* fluid logo↔nav gap: 24px @1150 → 40px @1300+ */
	gap: clamp(24px, calc(24px + (100vw - 1150px) / 9.375), 40px);
	transition: height .3s ease .1s; /* trails the eyebrow collapse */
}

.rpm-hdr-logo { display: inline-flex; align-items: center; flex-shrink: 0; }
.rpm-hdr-logo img {
	width: 162px;
	height: auto;
	display: block;
	transform-origin: left center;
	/* scale (not width) on sticky so the logo's layout box stays 162px wide
	   and the nav after it does NOT shift left. Slightly slower + delayed for
	   a smoother, trailing feel. */
	transition: transform .4s ease .06s;
}

/* Primary nav */
.rpm-hdr-primary { flex: 1 1 auto; display:flex; justify-content:center; }
.rpm-hdr-menu {
	display: flex;
	align-items: center;
	/* fluid: 16px @1150 → 26px @1300+ */
	gap: clamp(16px, calc(16px + (100vw - 1150px) / 15), 26px);
}
.rpm-nav-item { position: relative; }
.rpm-nav-link {
	display: inline-flex;
	align-items: center;
	font-family: 'Barlow Semi Condensed', 'Barlow', sans-serif;
	/* fluid: 15px @1150 → 1.06rem (~17px) @1300+ */
	font-size: clamp(15px, calc(15px + (100vw - 1150px) / 75), 1.1rem);
	font-weight: 500;
	letter-spacing: -0.3px;
	color: var(--rpm-gray);
	white-space: nowrap;
	transition: color .15s ease;
}
/* Desktop nav: red on hover and for the active page */
.rpm-nav-item:hover > .rpm-nav-link,
.rpm-nav-item.is-current > .rpm-nav-link { color: var(--rpm-red); }

/* Mega dropdown */
.rpm-hdr ul.rpm-dropdown {
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 266px;
	background: var(--rpm-navy);
	border-top: 3px solid var(--rpm-red);
	border-radius: 0 0 6px 6px;
	box-shadow: 0 12px 20px rgba(0,0,0,.25);
	padding: 8px 0;
	margin-top: 10px;
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity .18s ease, transform .18s ease, visibility .18s;
	z-index: 1000;
}
.rpm-nav-item.rpm-has-dropdown:hover > .rpm-dropdown,
.rpm-nav-item.rpm-has-dropdown:focus-within > .rpm-dropdown {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}
.rpm-dropdown li > a {
	display: block;
	padding: 9px 18px;
	font-family: 'Barlow Semi Condensed', 'Barlow', sans-serif;
	font-size: 16px;
	font-weight: 500;
	letter-spacing: -0.1px;
	color: var(--rpm-dd-text);
	border-left: 3px solid transparent;
	transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.rpm-dropdown li > a:hover {
	background: var(--rpm-navy-dark);
	color: #fff;
	border-left-color: var(--rpm-red);
}

/* Phone list */
.rpm-hdr-main-right {
	margin-left: auto;
	flex-shrink: 0;
	/* fluid gap before the phone block: 18px @1150 → 32px @1300+ */
	padding-left: clamp(18px, calc(18px + (100vw - 1150px) / 10.714), 32px);
	border-left: 1px solid var(--rpm-util-border);
}
.rpm-hdr-phones {
	display: flex;
	flex-direction: column;
	gap: 3px;
	text-align: right;
	font-family: 'Barlow Semi Condensed', 'Barlow', sans-serif;
	font-size: 16px;
	line-height: 1.2;
	transition: font-size .3s ease .1s; /* smooth 16→14 in place (right-anchored) */
}
.rpm-hdr-phones .rpm-phone-region { font-weight: 500; color: var(--rpm-gray); }
.rpm-hdr-phones .rpm-phone-number { font-weight: 700; color: var(--rpm-red); }

/* =============================================================================
 * DESKTOP — language switcher (flag + chevron dropdown)
 * ========================================================================== */

.rpm-hdr-lang { position: relative; display: flex; align-items: center; }
.rpm-lang-trigger {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
	font: inherit;
	line-height: 1;
	font-size: 14px;
	font-weight: 600;
	text-transform: uppercase;
	color: var(--rpm-gray);
}
.rpm-lang-flag { width: 20px; height: 15px; border-radius: 2px; display: block; }
.rpm-hdr-lang.is-open .rpm-caret { transform: rotate(-135deg); margin-bottom: -2px; }
.rpm-lang-menu {
	position: absolute;
	top: 100%;
	right: 0;
	min-width: 150px;
	background: #fff;
	box-shadow: 0 5px 15px rgba(0,0,0,.15);
	border-radius: 2px;
	padding: 4px 0;
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity .15s ease, transform .15s ease, visibility .15s;
	z-index: 1001;
}
.rpm-hdr-lang.is-open .rpm-lang-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.rpm-lang-opt {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 14px;
	cursor: pointer;
	color: #444;
	font-size: 14px;
	text-transform: none;
	white-space: nowrap;
	transition: background .15s ease, color .15s ease;
}
.rpm-lang-opt img { width: 20px; height: 15px; border-radius: 2px; }
.rpm-lang-opt:hover { background: var(--rpm-navy); color: #fff; }
/* Options are <li> (not a/button), so the header's global :focus-visible outline
   doesn't reach them — give the roving keyboard focus its own clear indicator. */
.rpm-lang-opt:focus-visible {
	background: var(--rpm-navy);
	color: #fff;
	outline: 2px solid var(--rpm-red);
	outline-offset: -2px;
}
.rpm-lang-opt.is-active { display: none; }

/* =============================================================================
 * DESKTOP — sticky / scrolled compact state (.is-stuck toggled by header.js)
 * ========================================================================== */

.rpm-hdr { transition: box-shadow .3s ease; }
.rpm-hdr.is-stuck { box-shadow: 0 2px 8px rgba(0,0,0,.2); }

/* Eyebrow collapses up and out first (height + fade) instead of blinking off.
   overflow:hidden only while collapsing so its content clips cleanly; the
   dropdown isn't needed in this state. */
.rpm-hdr.is-stuck .rpm-hdr-utility {
	height: 0;
	opacity: 0;
	overflow: hidden;
	border-bottom-color: transparent;
}

/* Main bar shrinks (trails the eyebrow via the delay on its transition) */
.rpm-hdr.is-stuck .rpm-hdr-main,
.rpm-hdr.is-stuck .rpm-hdr-main-inner { height: 80px; }

/* Logo scales down (footprint stays 162px → nav does not shift left) */
.rpm-hdr.is-stuck .rpm-hdr-desktop .rpm-hdr-logo img { transform: scale(.74); }

/* Phones ease down in place; padding is left unchanged so they don't shift */
.rpm-hdr.is-stuck .rpm-hdr-phones { font-size: 14px; }

/* =============================================================================
 * MOBILE (<1000px)
 * ========================================================================== */

.rpm-hdr-mobile-bar {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 var(--rpm-pad);
	background: #fff;
	height: 80px;
}
.rpm-hdr-mobile-bar .rpm-hdr-logo img { width: 130px; }

.rpm-hdr-mobile-actions { display: flex; align-items: center; gap: 11px; }
.rpm-hdr-circle {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 0;
	background: var(--rpm-circle-gray);
	color: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background .18s ease;
}
.rpm-hdr-circle.is-active { background: var(--rpm-navy); }

/* Hamburger → X */
.rpm-burger { position: relative; width: 20px; height: 14px; display: inline-block; }
.rpm-burger span {
	position: absolute;
	left: 0;
	width: 100%;
	height: 2px;
	background: #fff;
	border-radius: 2px;
	transition: transform .2s ease, opacity .2s ease, top .2s ease;
}
.rpm-burger span:nth-child(1) { top: 0; }
.rpm-burger span:nth-child(2) { top: 6px; }
.rpm-burger span:nth-child(3) { top: 12px; }
.rpm-hdr-menu-toggle.is-active .rpm-burger span:nth-child(1) { top: 6px; transform: rotate(45deg); }
.rpm-hdr-menu-toggle.is-active .rpm-burger span:nth-child(2) { opacity: 0; }
.rpm-hdr-menu-toggle.is-active .rpm-burger span:nth-child(3) { top: 6px; transform: rotate(-45deg); }

/* Panels (phone + menu) */
.rpm-hdr-panel {
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	background: var(--rpm-navy-panel);
	color: #fff;
	z-index: 1;
	box-shadow: 0 12px 24px rgba(0,0,0,.3);
	animation: rpm-panel-in .2s ease;
}
.rpm-hdr-panel--phone { padding: 18px var(--rpm-pad) 24px; }
.rpm-hdr-panel--menu  { padding: 0 0 24px; }
.rpm-hdr-panel[hidden] { display: none; }
/* Body-level portal host: keeps the .rpm-hdr class (so portaled panels retain
   every token/reset) but strips the header's own layout so it's invisible and
   creates no stacking context of its own. */
.rpm-hdr.rpm-hdr-portal-host {
	position: static;
	top: auto;
	z-index: auto;
	background: none;
	width: auto;
	box-shadow: none;
}

/* When open, header.js portals the panel into that host so it escapes
   .l-canvas's stacking context (otherwise it can render under the footer on
   short mobile pages). `top` is set inline by the JS to the mobile bar height. */
.rpm-hdr-panel.rpm-hdr-portaled {
	position: fixed;
	left: 0;
	right: 0;
	/* `top` is set inline by the JS; pin the bottom to the viewport so the panel
	   is height-bounded and its own content scrolls when tall (e.g. several
	   accordions open) instead of overflowing off-screen with no way to reach it. */
	bottom: 0;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	z-index: 100000;
}
@keyframes rpm-panel-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }

/* Mobile phone panel */
.rpm-panel-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 14px;
}
.rpm-panel-title {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .5px;
	text-transform: uppercase;
	color: #fff;
}
.rpm-panel-close {
	background: none;
	border: 0;
	color: #fff;
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
	padding: 0 4px;
}
.rpm-phone-rows { display: flex; flex-direction: column; gap: 17px; }
.rpm-phone-row > a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	min-height: 63px;
	padding: 12px 20px;
	background: var(--rpm-navy-row);
	border-radius: 6px;
	transition: filter .15s ease;
}
.rpm-phone-row.is-primary > a { background: var(--rpm-red); }
.rpm-phone-row > a:hover { filter: brightness(1.08); }
.rpm-phone-row .rpm-phone-region {
	font-family: 'Barlow', sans-serif;
	font-size: 20px;
	font-weight: 500;
	color: #d5d9dd;
}
.rpm-phone-row .rpm-phone-number {
	font-family: 'Barlow', sans-serif;
	font-size: 20px;
	font-weight: 600;
	color: #fff;
	white-space: nowrap;
}

/* Mobile nav — rows are full-bleed so the open-accordion bg spans edge to edge */
.rpm-mobile-menu > li { border-bottom: 1px solid rgba(255,255,255,.12); }
.rpm-mobile-menu > li.is-open {
	background: var(--rpm-navy-dark);
	border-bottom-color: transparent;
}
.rpm-mobile-row-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 var(--rpm-pad);
}
.rpm-mobile-link {
	flex: 1 1 auto;
	display: block;
	padding: 15px 0;
	font-family: 'Barlow Semi Condensed', 'Barlow', sans-serif;
	font-size: 18px;
	font-weight: 600;
	letter-spacing: -0.18px;
	color: #fff;
}
.rpm-mobile-expand {
	flex-shrink: 0;
	background: none;
	border: 0;
	color: #fff;
	padding: 12px 0 12px 16px;
	cursor: pointer;
}
.rpm-mobile-expand .rpm-caret { margin: 0; }
.rpm-mobile-row.is-open .rpm-mobile-expand .rpm-caret { transform: rotate(-135deg); }

/* Rows WITH a submenu: keep the parent link a small (text-only) target so a
   tap doesn't accidentally navigate; the rest of the row is the expand
   control, giving the dropdown a much larger tap target. */
.rpm-mobile-row.rpm-has-sub .rpm-mobile-link { flex: 0 0 auto; }
.rpm-mobile-row.rpm-has-sub .rpm-mobile-expand {
	flex: 1 1 auto;
	align-self: stretch;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	padding: 15px 0;
	margin-left: 14px;
}

/* .rpm-hdr prefix beats the `.rpm-hdr ul{padding:0}` reset so children indent
   to line up with the parent label instead of collapsing to the panel edge. */
.rpm-hdr .rpm-mobile-sub { padding: 0 var(--rpm-pad) 12px; }
.rpm-mobile-sub[hidden] { display: none; }
.rpm-mobile-sub li > a {
	display: block;
	padding: 9px 0;
	font-family: 'Barlow Semi Condensed', 'Barlow', sans-serif;
	font-size: 16px;
	font-weight: 400;
	letter-spacing: -0.16px;
	color: #fff;
}
.rpm-mobile-sub li > a:hover { color: var(--rpm-dd-text); }

/* Portal buttons */
.rpm-mobile-portals {
	display: flex;
	gap: 14px;
	padding: 22px var(--rpm-pad) 16px;
}
.rpm-portal-btn {
	flex: 1 1 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: 44px;
	padding: 0 10px;
	border: 1px solid var(--rpm-portal-brd);
	border-radius: 6px;
	font-family: 'Barlow', sans-serif;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: -0.28px;
	text-transform: uppercase;
	color: #fff;
	transition: background .15s ease, border-color .15s ease;
}
.rpm-portal-btn:hover { background: rgba(255,255,255,.1); border-color: #fff; }
.rpm-portal-btn .rpm-ico { flex-shrink: 0; }

/* Contact CTA */
.rpm-mobile-cta {
	display: block;
	margin: 0 var(--rpm-pad);
	text-align: center;
	line-height: 44px;
	background: var(--rpm-red);
	color: #fff;
	border-radius: 6px;
	font-family: 'Barlow', sans-serif;
	font-size: 18px;
	font-weight: 600;
	letter-spacing: -0.18px;
	transition: filter .15s ease;
}
.rpm-mobile-cta:hover { color: #fff; filter: brightness(1.08); }

/* Mobile language toggle */
.rpm-mobile-lang { display: flex; justify-content: center; padding: 22px var(--rpm-pad) 0; }
.rpm-lang-toggle {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background: none;
	border: 0;
	cursor: pointer;
	color: #fff;
	font: inherit;
	font-size: 14px;
	font-weight: 600;
}
.rpm-lang-side { display: inline-flex; align-items: center; gap: 5px; opacity: .7; transition: opacity .15s ease; }
.rpm-lang-side img { width: 20px; height: 15px; border-radius: 2px; }
.rpm-lang-toggle[aria-checked="false"] .rpm-lang-en { opacity: 1; }
.rpm-lang-toggle[aria-checked="true"]  .rpm-lang-es { opacity: 1; }
.rpm-lang-knob {
	position: relative;
	width: 50px;
	height: 25px;
	border-radius: 100px;
	background: var(--rpm-navy-row);
	flex-shrink: 0;
}
.rpm-lang-knob::after {
	content: '';
	position: absolute;
	top: 4px;
	left: 4px;
	width: 17px;
	height: 17px;
	border-radius: 50%;
	background: #fff;
	transition: transform .18s ease;
}
.rpm-lang-toggle[aria-checked="true"] .rpm-lang-knob::after { transform: translateX(25px); }
.rpm-lang-side.rpm-lang-es { color: rgba(255,255,255,.5); }
.rpm-lang-toggle[aria-checked="true"] .rpm-lang-es { color: #fff; }
.rpm-lang-toggle[aria-checked="true"] .rpm-lang-en { color: rgba(255,255,255,.5); opacity: 1; }

/* =============================================================================
 * Motion / a11y
 * ========================================================================== */
@media (prefers-reduced-motion: reduce) {
	.rpm-hdr *, .rpm-hdr *::before, .rpm-hdr *::after {
		transition: none !important;
		animation: none !important;
	}
}
.rpm-hdr a:focus-visible,
.rpm-hdr button:focus-visible {
	outline: 2px solid var(--rpm-red);
	outline-offset: 2px;
}