/* ==========================================================================
   Celia Noire — header, navigation, mobile overlay
   ========================================================================== */

.cn-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--cn-noir);
	color: var(--cn-ivory);
	border-bottom: 1px solid rgba(250, 246, 241, 0.14);
	transition: background-color var(--cn-dur-bg) var(--cn-ease),
	            border-color var(--cn-dur-bg) var(--cn-ease);
}

/* Over the hero the bar floats with no fill until the page moves. */
.cn-header--transparent {
	position: fixed;
	inset-inline: 0;
	background: transparent;
	border-bottom-color: transparent;
}

/* position:fixed is positioned against the viewport, so it ignores the
   margin-top the WP admin bar pushes onto normal flow — without this, the
   fixed header (and the brand wordmark inside it) sits underneath the
   admin bar, which paints over it at a much higher z-index. The sticky
   (non-transparent) header above is unaffected, since sticky positioning
   already respects that offset. Matches WP core's own admin-bar height
   values and breakpoint (wp-includes/css/admin-bar.min.css). */
body.admin-bar .cn-header--transparent {
	top: 32px;
}

@media screen and (max-width: 782px) {
	/* Also the resting value at 600px and below: below that width WP makes
	   the admin bar `position:absolute` so it scrolls away with the page,
	   and main.js takes over from here — tracking the offset down to 0 in
	   step with the scroll instead of leaving a fixed gap above the header
	   once the bar has scrolled out from under it. */
	body.admin-bar .cn-header--transparent {
		top: 46px;
	}
}

.cn-header--transparent.is-stuck {
	background: var(--cn-noir);
	border-bottom-color: rgba(250, 246, 241, 0.14);
}

.cn-header__inner {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 1.5rem;
	width: 100%;
	max-width: var(--cn-shell);
	margin-inline: auto;
	padding: 1.25rem var(--cn-gutter);
}

/* A little more air at desktop widths reads as more considered than the
   compact mobile bar carried straight across every breakpoint. */
@media (min-width: 900px) {
	.cn-header__inner {
		padding-block: 1.6rem;
		/* The --cn-shell cap is what let the left/right nav drift toward the
		   centre on wide screens while the Hero's left-aligned content (which
		   isn't shell-capped) stayed at the true viewport edge. Matching the
		   Hero's own edge padding here keeps "The Studio" and "CELIA NOIRE"
		   flush on the same left edge at any width — the centre brand column
		   stays viewport-centred regardless, since the two flanking grid
		   tracks are always equal width. */
		max-width: none;
		padding-inline: var(--cn-edge-gutter);
	}
}

/* --------------------------------------------------------------------------
   Brand
   -------------------------------------------------------------------------- */

.cn-brand {
	grid-column: 2;
	justify-self: center;
}

.cn-brand__link {
	display: block;
}

.cn-brand__text {
	font-family: var(--cn-font-display);
	font-size: clamp(0.95rem, 0.6vw + 0.8rem, 1.15rem);
	letter-spacing: var(--cn-tracking-hero);
	text-transform: uppercase;
	white-space: nowrap;
}

.cn-brand__logo img {
	height: 21px;
	width: auto;
}

/* The mark is a fine-lined light monogram — over a bright or busy patch of
   the hero photo it can all but disappear. A quiet dark halo (not a visible
   box, just enough to separate the mark from whatever sits behind it) keeps
   it legible against any hero image without touching the logo file itself.
   Only needed while the header floats over the hero; once it's stuck on a
   solid fill the mark already has all the contrast it needs. */
.cn-header--transparent:not(.is-stuck) .cn-brand__logo img {
	filter: drop-shadow(0 1px 5px rgba(0, 0, 0, 0.55)) drop-shadow(0 0 2px rgba(0, 0, 0, 0.4));
}

@media (min-width: 768px) {
	.cn-brand__logo img {
		height: 22px;
	}
}

@media (min-width: 1024px) {
	.cn-brand__logo img {
		height: 25px;
	}
}

/* The dark logo only appears once the bar has a light fill; today the bar is
   always dark, so it stays hidden. Kept so a light header variant is a
   one-class change later. */
.cn-brand__logo--dark {
	display: none;
}

/* --------------------------------------------------------------------------
   Desktop navigation
   -------------------------------------------------------------------------- */

.cn-nav {
	display: none;
}

.cn-nav__list {
	display: flex;
	align-items: center;
	gap: clamp(1.25rem, 2.4vw, 2.75rem);
}

.cn-nav--left .cn-nav__list {
	justify-content: flex-start;
}

.cn-nav--right {
	justify-content: flex-end;
}

.cn-nav--right .cn-nav__list {
	justify-content: flex-end;
}

.cn-nav a,
.cn-nav__utility {
	position: relative;
	display: inline-block;
	padding-block: 0.4rem;
	font-size: var(--cn-text-sm);
	font-weight: 500;
	letter-spacing: var(--cn-tracking-wide);
	text-transform: uppercase;
	white-space: nowrap;
}

/* Secondary entry point — quieter than the text nav beside it on purpose, so
   it never competes with Start a Project for attention. */
.cn-nav__bag {
	display: inline-flex;
	align-items: center;
	opacity: 0.6;
	transition: opacity var(--cn-dur-hover) var(--cn-ease);
}

.cn-nav__bag:hover,
.cn-nav__bag:focus-visible {
	opacity: 1;
}

.cn-nav a::after,
.cn-nav__utility::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 1px;
	background: var(--cn-gold);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--cn-dur-hover) var(--cn-ease);
}

.cn-nav a:hover::after,
.cn-nav a:focus-visible::after,
.cn-nav__utility:hover::after,
.cn-nav .current-menu-item > a::after {
	transform: scaleX(1);
}

/* --------------------------------------------------------------------------
   Burger
   -------------------------------------------------------------------------- */

.cn-burger {
	grid-column: 1;
	justify-self: start;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin-left: -10px;
}

.cn-burger__lines {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 6px;
	width: 22px;
}

.cn-burger__lines span {
	display: block;
	height: 1px;
	width: 100%;
	background: currentColor;
	transition: transform var(--cn-dur-hover) var(--cn-ease),
	            opacity var(--cn-dur-hover) var(--cn-ease);
}

.cn-burger[aria-expanded="true"] .cn-burger__lines span:first-child {
	transform: translateY(3.5px) rotate(45deg);
}

.cn-burger[aria-expanded="true"] .cn-burger__lines span:last-child {
	transform: translateY(-3.5px) rotate(-45deg);
}

@media (min-width: 900px) {
	.cn-burger {
		display: none;
	}

	.cn-nav {
		display: flex;
		align-items: center;
		gap: 1.5rem;
	}

	.cn-nav--left {
		grid-column: 1;
	}

	.cn-nav--right {
		grid-column: 3;
	}
}

/* --------------------------------------------------------------------------
   Mobile overlay
   -------------------------------------------------------------------------- */

.cn-mobile-menu {
	position: fixed;
	inset: 0;
	z-index: 200;
	display: flex;
	background: var(--cn-noir);
	color: var(--cn-ivory);
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--cn-dur-bg) var(--cn-ease),
	            visibility var(--cn-dur-bg) var(--cn-ease);
}

/* visibility (not the hidden attribute) keeps the overlay out of the
   accessibility tree while still allowing the fade. */
.cn-mobile-menu.is-open {
	opacity: 1;
	visibility: visible;
}

.cn-mobile-menu__inner {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	width: 100%;
	padding: 1.25rem var(--cn-gutter) clamp(2rem, 8vw, 4rem);
	overflow-y: auto;
}

.cn-mobile-menu__close {
	align-self: flex-end;
	width: 44px;
	height: 44px;
	margin-right: -10px;
	font-size: 1.75rem;
	line-height: 1;
}

.cn-mobile-nav {
	display: flex;
	flex-direction: column;
	gap: 0;
	margin-block: auto;
}

.cn-mobile-nav__list {
	display: flex;
	flex-direction: column;
}

.cn-mobile-nav__list a {
	display: block;
	padding-block: 0.35em;
	font-family: var(--cn-font-display);
	font-size: clamp(2rem, 11vw, 3.25rem);
	line-height: 1.15;
	color: var(--cn-ivory);
	transition: color var(--cn-dur-hover) var(--cn-ease);
}

.cn-mobile-nav__list a:hover,
.cn-mobile-nav__list a:focus-visible {
	color: var(--cn-gold);
}

/* Links stagger in behind the overlay fade. */
.cn-mobile-menu .cn-mobile-nav__list li {
	opacity: 0;
	transform: translateY(12px);
	transition: opacity var(--cn-dur-reveal) var(--cn-ease),
	            transform var(--cn-dur-reveal) var(--cn-ease);
}

.cn-mobile-menu.is-open .cn-mobile-nav__list li {
	opacity: 1;
	transform: none;
	transition-delay: calc(90ms * var(--cn-i, 0) + 120ms);
}

.cn-mobile-menu__foot {
	display: flex;
	flex-direction: column;
	gap: 0.85rem;
	padding-top: 2rem;
	border-top: 1px solid rgba(250, 246, 241, 0.16);
	font-size: var(--cn-text-sm);
	letter-spacing: 0.06em;
}

.cn-mobile-menu__email {
	color: var(--cn-gold);
}

.cn-social {
	display: flex;
	flex-wrap: wrap;
	gap: 1.25rem;
	text-transform: uppercase;
	letter-spacing: var(--cn-tracking-wide);
	font-size: var(--cn-text-xs);
}

@media (min-width: 900px) {
	.cn-mobile-menu {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.cn-mobile-menu .cn-mobile-nav__list li {
		opacity: 1;
		transform: none;
	}
}