/*
 * Redesign building blocks shared by every page: the site navigation, buttons,
 * the highlighter motif and other small components.
 * Mobile first: base rules for phones, min-width queries on Bootstrap's breakpoints (576/768/992/1200).
 */

/* ---------- Site navigation (views/header.php) ---------- */
.site-header {
	position: sticky;
	top: 0;
	z-index: 1030;
	background: var(--color-header-bg);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	border-bottom: 1px solid var(--color-border);
}
.site-nav {
	padding: 10px 0;
}
.site-nav .navbar-brand img {
	display: block;
	width: auto;
	height: 44px;
}
.site-nav .navbar-toggler {
	border-color: var(--color-border-strong);
}
.site-nav .nav-link {
	padding: 10px 4px;
	font-size: 16px;
	font-weight: 500;
	color: var(--color-navy);
}
.site-nav .nav-link:hover,
.site-nav .nav-link:focus-visible,
.site-nav .nav-link.show {
	color: var(--color-teal);
}
.site-nav .dropdown-menu {
	padding: 8px;
	border: 1px solid var(--color-border);
	border-radius: 14px;
	box-shadow: var(--shadow-md);
}
.site-nav .dropdown-item {
	padding: 8px 12px;
	border-radius: 8px;
	font-size: 15px;
	color: var(--color-navy);
}
.site-nav .dropdown-item:hover,
.site-nav .dropdown-item:focus {
	background: var(--color-sand);
	color: var(--color-navy);
}
.site-nav__actions {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 8px;
	padding: 8px 0 12px;
}
.site-nav__account {
	display: inline-flex !important;
	align-items: center;
	gap: 8px;
}
.site-nav__account img {
	height: 24px;
}
@media (min-width: 992px) {
	.site-nav .navbar-nav {
		gap: 18px;
	}
	.site-nav .nav-link {
		font-size: 15px;
	}
	.site-nav__actions {
		flex-direction: row;
		align-items: center;
		gap: 18px;
		padding: 0;
	}
}
@media (min-width: 1200px) {
	.site-nav .navbar-nav {
		gap: 26px;
	}
	.site-nav .navbar-brand img {
		height: 48px;
	}
}

/* ---------- Buttons ---------- */
.btn-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 14px 26px;
	border: 0;
	border-radius: var(--radius-pill);
	background: var(--color-teal);
	color: var(--color-white);
	font-size: 17px;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	transition: background-color .2s, transform .2s;
}
.btn-cta:hover,
.btn-cta:focus-visible {
	background: var(--color-teal-dark);
	color: var(--color-white);
	transform: translateY(-1px);
}
.btn-cta svg {
	flex-shrink: 0;
}
.btn-cta--sm {
	padding: 10px 18px;
	font-size: 15px;
}
.btn-cta--lg {
	padding: 17px 32px;
	font-size: 18px;
}
/* Orange on navy: navy text keeps it readable (6.5:1) */
.btn-cta--accent {
	background: var(--color-orange);
	color: var(--color-navy);
}
.btn-cta--accent:hover,
.btn-cta--accent:focus-visible {
	background: var(--color-orange-light);
	color: var(--color-navy);
}

/* ---------- Small pieces ---------- */
/* Highlighter stroke behind a word; --hl sets its colour */
.hl {
	--hl: var(--color-orange);
	padding: 0 .12em;
	background: linear-gradient(transparent 60%, var(--hl) 60%, var(--hl) 90%, transparent 90%);
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}
.hl--soft {
	--hl: var(--color-highlight-soft);
}
/* Handwritten note in the margin */
.hand {
	font-family: var(--font-hand);
	font-weight: 700;
	line-height: 1;
}
/* Pill label above a heading */
.eyebrow-pill {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 7px 14px;
	border-radius: var(--radius-pill);
	background: var(--color-teal-on-dark);
	color: var(--color-teal-glow);
	font-size: 14px;
	font-weight: 600;
}
.eyebrow-pill::before {
	content: '';
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--color-teal-light);
}
/* Uppercase label inside cards and sections */
.overline {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .07em;
	text-transform: uppercase;
}
.stars {
	display: inline-flex;
	gap: 2px;
	color: var(--color-orange);
}
.stars svg {
	width: 18px;
	height: 18px;
	fill: currentColor;
}

/* Endless horizontal scroll; the content is repeated once (second copy aria-hidden) */
.marquee {
	width: 100%;
	overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee__track {
	display: flex;
	width: max-content;
	animation: marquee 45s linear infinite;
}
.marquee:hover .marquee__track {
	animation-play-state: paused;
}
.marquee__group {
	display: flex;
	align-items: center;
	gap: 28px;
	margin: 0;
	padding: 0 28px 0 0;
	list-style: none;
}
@keyframes marquee {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
	.marquee {
		-webkit-mask-image: none;
		mask-image: none;
	}
	.marquee__track {
		width: auto;
		animation: none;
	}
	.marquee__group {
		flex-wrap: wrap;
		justify-content: center;
		padding: 0;
	}
	.marquee__group[aria-hidden] {
		display: none;
	}
}