/* Shared components. Spec: docs/design/homepage-figma-spec.md. All transitions: 150ms ease-out on color/background-color/border-color. */

.mvk-header .screen-reader-text,
.mvk-hero .screen-reader-text,
.mvk-brands .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Buttons — Arimo Bold caps, 4px radius. Default 46px high, compact 37px.
   "html body" prefix: Uncode styles `button[type=submit]` globally (padding, font, letter-spacing) and would win otherwise. */
html body .mvk-btn {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 16px 28px;
	border: 0;
	border-radius: 4px;
	font: 700 12px/14px var(--mvk-font-button); /* whole-pixel line box, as Figma draws it (46px tall) */
	letter-spacing: 0.72px;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color var(--mvk-ease), color var(--mvk-ease), border-color var(--mvk-ease);
}

html body .mvk-btn--compact {
	padding: 12px 20px;
	font-size: 11px;
	line-height: 13px; /* 37px tall */
	letter-spacing: 0.66px;
}

/* Primary: orange fill, navy label.
   `!important` is deliberate and scoped to this component: Uncode paints every submit button with
   `.style-dark .style-light button[type="submit"] { background-color: #f7f7f7 }` (specificity 0,3,1). */
html body .mvk-btn--primary { background-color: var(--mvk-orange) !important; color: var(--mvk-navy) !important; }
html body .mvk-btn--primary:hover { background-color: var(--mvk-orange-hover) !important; color: var(--mvk-navy) !important; }
html body .mvk-btn--primary:active { background-color: var(--mvk-orange-pressed) !important; color: var(--mvk-navy) !important; }

/* Secondary: solid navy, white label (handoff 1:232). Same Uncode-override reason as the primary. */
html body .mvk-btn--secondary { background-color: var(--mvk-navy) !important; color: #fff !important; }
html body .mvk-btn--secondary:hover { background-color: var(--mvk-navy-deep) !important; color: #fff !important; }
html body .mvk-btn--secondary:active { background-color: var(--mvk-navy-darkest) !important; color: #fff !important; }

/* Tertiary ("special"): rust label with a 2px underline 5px below it (handoff 1:257). 45px tall:
   12 + 14 (label) + 5 + 2 (underline) + 12. The underline is positioned absolutely so growing to 3px on hover
   (as the handoff states) does not move the label or change the box. */
html body .mvk-btn--tertiary {
	justify-content: flex-start;
	padding: 12px 0 19px;
	border-radius: 0;
	background: transparent !important;
	color: var(--mvk-rust) !important;
}
html body .mvk-btn--tertiary::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 31px;
	height: 2px;
	background: currentColor;
	transition: height var(--mvk-ease), background-color var(--mvk-ease);
}
html body .mvk-btn--tertiary:hover { color: var(--mvk-rust-hover) !important; }
html body .mvk-btn--tertiary:hover::after { height: 3px; }
html body .mvk-btn--tertiary:active { color: var(--mvk-rust-pressed) !important; }
html body .mvk-btn--tertiary:focus-visible::before { border-radius: 4px; }

/* Focus rings: keyboard only, drawn as a 2px ring with a 4px gap (handoff frames 1:193, 1:223: ring frame = element + 4px padding + 2px stroke).
   A pseudo-element is used instead of `outline` so the outer radius is exactly what is drawn (8px on buttons, 4px on links).
   "html body" prefix + `outline: none`: Uncode ships `body:not(.uncode-accessible) *:focus { outline: 0 }` and styles :focus broadly. */
.mvk-btn,
.mvk-focusable { position: relative; }
html body .mvk-btn:focus-visible,
html body .mvk-focusable:focus-visible { outline: none; }
.mvk-btn:focus-visible::before,
.mvk-focusable:focus-visible::before {
	content: "";
	position: absolute;
	inset: -6px;
	border: 2px solid var(--mvk-navy);
	border-radius: 8px;
	pointer-events: none;
}
.mvk-btn--on-dark:focus-visible::before,
.mvk-focusable:focus-visible::before { border-color: #fff; }
.mvk-focusable:focus-visible::before { border-radius: 4px; }