/**
 * Component: Site Header — styles
 * Scoped to .apt-nav (BEM root). Using apt- prefix to avoid collision with
 * GeneratePress's own .site-header class on <header id="masthead">.
 */

/* ── Component-local custom properties ───────────────────────── */
.apt-nav {
	--apt-nav-pill-r:   3.5rem;               /* 56px — true pill shape from Figma */
	--apt-nav-cta-bg:   #e5edfb;              /* Figma --surfaces/brand---shade-02 */
	--apt-nav-glass-bg: rgba(15, 15, 34, 0.65); /* semi-transparent #0f0f22 for glass fill */
}

/* ── Outer wrapper ────────────────────────────────────────────── */
.apt-nav {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100;
	width: 100%;
	background: transparent;
	padding-block: 20px;
	padding-inline: 0;
}

/* ── Inner pill ───────────────────────────────────────────────── */
.apt-nav__pill {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	max-width: 980px;          /* Figma: nav frame is 980px at 1440px canvas */
	width: calc(100% - 48px); /* 24px gutters from viewport edges */
	margin-inline: auto;
	height: 90px;
	border-radius: var(--apt-nav-pill-r); /* 3.5rem = 56px — true pill shape from Figma */
	border: 0.5px solid var(--color-border);
	background: var(--apt-nav-glass-bg);
	-webkit-backdrop-filter: blur(16px) saturate(180%);
	backdrop-filter: blur(16px) saturate(180%);
	padding-block: 22px;           /* Figma: py-[22px] */
	padding-inline: var(--space-5xl); /* 3.5rem = 56px — Figma: px-[56px] */
}

/* ── Logo ─────────────────────────────────────────────────────── */
.apt-nav__logo {
	display: inline-flex;
	align-items: center;
	text-decoration: none;
	flex-shrink: 0;
}

.apt-nav__logo img {
	width: 276px;
	height: 34px;
	display: block;
}

/* ── CTA button ───────────────────────────────────────────────── */
.apt-nav__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-sm);           /* 8px — Figma gap-[8px] */
	height: 50px;                   /* Figma: h-[50px] */
	padding: 8px 16px 8px 24px;    /* Figma: pl-24 pr-16 py-8 — icon sits tight to right edge */
	background: var(--color-cta);  /* #DDEFFF — Figma Surfaces/Brand Shade-02 */
	color: var(--color-text-inv);  /* #020216 dark — readable on light bg */
	border: none;
	border-radius: var(--radius-6xl); /* 4rem = 64px — Figma var(--radius/6xl-•-64) */
	font-family: var(--font-body);
	font-size: 16px;
	font-weight: 700;
	line-height: 1;
	white-space: nowrap;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	transition: background-color 0.15s ease;
}

.apt-nav__cta:hover,
.apt-nav__cta:active {
	background: var(--color-cta-hover);
	color: var(--color-text-inv);
}

.apt-nav__cta-icon {
	display: inline-flex;
	align-items: center;
	width: 10px;
	height: auto;
	flex-shrink: 0;
}

.apt-nav__cta-icon svg {
	width: 100%;
	height: auto;
	display: block;
}

/* ── Focus indicators (WCAG 2.1 AA SC 2.4.7) ─────────────────── */
.apt-nav__logo:focus-visible {
	outline: 3px solid var(--color-brand);
	outline-offset: 4px;
	border-radius: 4px;
}

.apt-nav__cta:focus-visible {
	outline: 3px solid #004ad9;
	outline-offset: 3px;
}

/* ── Tablet ≤900px ────────────────────────────────────────────── */
@media (max-width: 900px) {
	.apt-nav {
		padding-block: 16px;
		left: 0;
		right: 0;
	}

	.apt-nav__pill {
		width: calc(100% - 32px);
		height: 72px;
		padding-block: 16px;
		padding-inline: var(--space-xl); /* 24px — tighter at tablet */
	}

	.apt-nav__logo img {
		width: 200px;
		height: auto;
	}

	.apt-nav__cta {
		height: 44px;
		padding: 8px 14px 8px 20px;
		font-size: 15px; /* no --text-* token covers 15px — literal, hand-tuned nav scale */
	}
}

/* ── Mobile ≤480px ────────────────────────────────────────────── */
@media (max-width: 480px) {
	.apt-nav {
		padding-block: 12px;
	}

	.apt-nav__pill {
		width: calc(100% - 24px);
		height: 68px;
		padding-block: 14px;
		padding-inline: var(--space-lg); /* 16px — minimum gutters inside pill */
	}

	.apt-nav__logo img {
		width: 160px;
	}

	.apt-nav__cta {
		height: 40px;
		padding: 8px 12px 8px 18px;
		font-size: var(--text-sub); /* 14px */
	}
}

/* ── Reduced motion ───────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
	.apt-nav__cta {
		transition: none;
	}
}