/**
 * Fönstria – supplementary styles
 * Uses existing CSS custom properties from custom.css.
 */

/* ── Global button width fix ─────────────────────────────── */
a.inline-flex {
	width: auto;
	max-width: 100%;
}

/* ── Smooth scroll ───────────────────────────────────────── */
html {
	scroll-behavior: smooth;
}

/* ── Focus improvements for accessibility ────────────────── */
a:focus-visible,
button:focus-visible {
	outline: 2px solid hsl(var(--gold));
	outline-offset: 2px;
}

/* ════════════════════════════════════════════════════════════
   HEADER NAVIGATION
   ════════════════════════════════════════════════════════════ */

/* Default: gold hairline top + subtle bottom divider via box-shadow (zero layout height) */
#nav-bar {
	box-shadow:
		inset 0 2px 0 hsl(var(--gold) / 0.45),
		0 1px 0 hsl(var(--border) / 0.4);
}

/* Scroll: deepen the bottom shadow when page scrolls */
#nav-bar.nav-scrolled {
	box-shadow:
		inset 0 2px 0 hsl(var(--gold) / 0.45),
		0 4px 24px rgba(0, 0, 0, 0.07);
}

/* ── Desktop nav links ───────────────────────────────────── */
.nav-link {
	position: relative;
	display: inline-flex;
	align-items: center;
	padding: 0.375rem 0.875rem;
	font-size: 0.725rem;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: hsl(var(--muted-foreground));
	text-decoration: none;
	transition: color 0.25s ease;
	white-space: nowrap;
}

/* Animated gold underline */
.nav-link::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0.875rem;
	right: 0.875rem;
	height: 1px;
	background-color: hsl(var(--gold));
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

.nav-link:hover {
	color: hsl(var(--foreground));
}

.nav-link:hover::after {
	transform: scaleX(1);
}

/* Active / current page */
.nav-link.current {
	color: hsl(var(--gold));
}

.nav-link.current::after {
	transform: scaleX(1);
}

/* ── Desktop CTA button ──────────────────────────────────── */
.nav-cta-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.5rem 1.25rem;
	font-size: 0.725rem;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: hsl(var(--primary-foreground));
	background-color: hsl(var(--primary));
	border: 1px solid hsl(var(--primary));
	text-decoration: none;
	transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
}

.nav-cta-btn:hover {
	background-color: hsl(var(--navy-light));
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.nav-cta-btn svg {
	transition: transform 0.25s ease;
}

.nav-cta-btn:hover svg {
	transform: translateX(3px);
}

/* ── Mobile menu (grid-row slide-down animation) ─────────── */
#nav-mobile {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 0.38s cubic-bezier(0.4, 0, 0.2, 1);
}

.nav-mobile-inner {
	overflow: hidden;
	min-height: 0;
}

#nav-mobile.nav-mobile-open {
	grid-template-rows: 1fr;
}

/* ── Mobile nav links ────────────────────────────────────── */
.mobile-nav-link {
	display: flex;
	align-items: center;
	padding: 1rem 0;
	font-size: 1rem;
	font-weight: 400;
	letter-spacing: 0.02em;
	color: hsl(var(--muted-foreground));
	text-decoration: none;
	border-bottom: 1px solid hsl(var(--border) / 0.5);
	transition: color 0.2s ease, padding-left 0.2s ease;
}

.mobile-nav-link:last-of-type {
	border-bottom: none;
}

.mobile-nav-link:hover {
	color: hsl(var(--foreground));
	padding-left: 6px;
}

.mobile-nav-link.current {
	color: hsl(var(--gold));
	font-weight: 500;
}

/* ════════════════════════════════════════════════════════════
   HOMEPAGE — REFERENCE CAROUSEL NAV BUTTONS
   ════════════════════════════════════════════════════════════ */

.refs-nav-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	border: 1px solid hsl(var(--border));
	color: hsl(var(--foreground));
	background: transparent;
	cursor: pointer;
	transition: border-color 0.25s ease, color 0.25s ease;
}

.refs-nav-btn:not(:disabled):hover {
	border-color: hsl(var(--primary));
	color: hsl(var(--gold));
}

.refs-nav-btn:disabled {
	opacity: 0.25;
	cursor: not-allowed;
}

/* ════════════════════════════════════════════════════════════
   REFERENCE PAGES
   ════════════════════════════════════════════════════════════ */

/* ── Reference filter buttons ────────────────────────────── */
.ref-filter-btn {
	cursor: pointer;
	transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}

.ref-filter-btn.active {
	background-color: hsl(var(--primary));
	color: hsl(var(--primary-foreground));
	border-color: hsl(var(--primary));
}

/* ── Reference content typography ────────────────────────── */
.ref-content p {
	color: hsl(var(--muted-foreground));
	line-height: 1.75;
	margin-bottom: 1rem;
}

.ref-content h2,
.ref-content h3 {
	font-family: 'Playfair Display', serif;
	color: hsl(var(--foreground));
	margin-top: 1.5rem;
	margin-bottom: 0.5rem;
}

/* ── Location landing page cards ─────────────────────────── */
.ref-item {
	transition: opacity 0.3s ease;
}

/* ════════════════════════════════════════════════════════════
   MISC
   ════════════════════════════════════════════════════════════ */

/* ── Gold accent helpers ─────────────────────────────────── */
.bg-gold {
	background-color: hsl(var(--gold));
}

.group:hover .group-hover\:text-gold {
	color: hsl(var(--gold));
}