/*
 * Arrival message for scanned-sign visitors.
 *
 * Deliberately shaped after the beach hazards banner (`hmb-beach-hazards`):
 * a slim full-width strip, one centred line at 0.9rem, the host page's own font,
 * and an underlined action rather than a button. Numbers and spacing are taken
 * from that plugin's banner.css so the two read as siblings — change them here
 * only alongside it.
 *
 * The background is the brand accent green, not the hazards red. That red is
 * semantic: it means a hazard is active. Wearing it for a wayfinding message
 * would read as an alarm about a beach that is perfectly fine. The action is
 * white rather than the banner's pale gold, which was picked to sit on the red.
 *
 * The green is #627B33, not the brand's own #698438, and the difference is
 * deliberate rather than a typo to be tidied up. White on the brand green is
 * 4.24:1 — fine for large text, short of the 4.5:1 WCAG AA needs for normal
 * text, and this strip is 0.9rem. Six percent darker measures 4.77:1 and passes.
 * The two are hard to tell apart side by side, and this is a strip read on a
 * phone in bright sun at a beach, so the ratio won.
 */
.hmb-qr-welcome {
	--hmb-qr-welcome-bg: #627B33;
	--hmb-qr-welcome-fg: #fff;
	--hmb-qr-welcome-link: #fff;
	background: var(--hmb-qr-welcome-bg);
	box-sizing: border-box;
	color: var(--hmb-qr-welcome-fg);
	display: block;
	font-family: inherit;
	font-size: 0.9rem;
	inline-size: 100%;
	line-height: 1.2;
	margin: 0;
	max-inline-size: none;
	width: 100%;
}

/* Load-bearing: the rule above is display:block, which would otherwise beat the
   browser's default [hidden] styling and show an empty strip to every visitor. */
.hmb-qr-welcome[hidden] {
	display: none;
}

.hmb-qr-welcome *,
.hmb-qr-welcome *::before,
.hmb-qr-welcome *::after {
	box-sizing: border-box;
}

/* The whole strip is the link, as the hazards banner's whole strip is the
   trigger — a full-width tap target, and an accessible name that is the entire
   sentence rather than a bare "Get Directions".
 *
 * Because it is a real anchor sitting in post content, the theme has an opinion
 * about its colour, and `color: inherit` on one class loses to any theme rule
 * like `.entry-content a`. The site's link colour happens to be this strip's own
 * navy background, so losing means invisible text. Hence the element selector
 * and the full state list: enough specificity to win without `!important`.
 * The hazards banner never hits this — its trigger is a div, not an anchor. */
.hmb-qr-welcome a.hmb-qr-welcome-cta {
	align-items: center;
	color: var(--hmb-qr-welcome-fg);
	display: flex;
	/* Hazards keeps its one line on nowrap and ellipsises the overflow. Here the
	   sentence *is* the message, so it wraps on a narrow screen instead. */
	flex-wrap: wrap;
	font: inherit;
	gap: 0.55rem;
	justify-content: center;
	margin: 0 auto;
	padding: 0.48rem 0.8rem;
	text-decoration: none;
	width: 100%;
}

.hmb-qr-welcome a.hmb-qr-welcome-cta:link,
.hmb-qr-welcome a.hmb-qr-welcome-cta:visited,
.hmb-qr-welcome a.hmb-qr-welcome-cta:hover,
.hmb-qr-welcome a.hmb-qr-welcome-cta:focus,
.hmb-qr-welcome a.hmb-qr-welcome-cta:active {
	color: var(--hmb-qr-welcome-fg);
	text-decoration: none;
}

.hmb-qr-welcome a.hmb-qr-welcome-cta:focus-visible {
	outline: 2px solid var(--hmb-qr-welcome-link);
	outline-offset: -3px;
}

.hmb-qr-welcome__icon,
.hmb-qr-welcome-sign,
.hmb-qr-welcome__action {
	flex: 0 0 auto;
}

/* Sized in em so it tracks the strip's font size, matching the ⚠ glyph the
   hazards banner sets at 1.05rem. */
.hmb-qr-welcome__icon {
	display: inline-flex;
	font-size: 1.05rem;
	line-height: 1;
}

.hmb-qr-welcome__icon svg {
	height: 1em;
	width: 1em;
}

.hmb-qr-welcome-sign {
	font-weight: 700;
}

.hmb-qr-welcome-distance {
	font-variant-numeric: tabular-nums;
}

/* Same specificity story as the anchor itself — a theme colouring link text
   would otherwise repaint this, and the underline is all that marks it out. */
.hmb-qr-welcome a.hmb-qr-welcome-cta .hmb-qr-welcome__action {
	color: var(--hmb-qr-welcome-link);
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 0.14em;
}

.hmb-qr-welcome a.hmb-qr-welcome-cta:hover .hmb-qr-welcome__action {
	text-decoration-thickness: 2px;
}

.hmb-qr-welcome__sr {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal;
}

@media (max-width: 600px) {
	.hmb-qr-welcome a.hmb-qr-welcome-cta {
		font-size: 0.82rem;
		gap: 0.4rem;
	}
}