/*
 * Header block (CLAUDE.md §5/§8). Snellenberg model:
 *   – Top: transparent, NON-sticky header (logo + glass-pill nav + language
 *     circles). It scrolls away with the page — no blur, no sticky bar.
 *   – A large floating burger (fixed) scales in once scrolled (entrance
 *     animation), opens the drawer and morphs to an X. Reuses the .doryo-button
 *     fill + magnet. Self-contained dark circle so it reads on any background.
 * Token variables only; visible focus via the global :focus-visible ring.
 */

.doryo-header {
	position: static;
}

/* Front page: transparent, absolutely over the dark hero; scrolls away. */
.doryo-header--overlay {
	position: absolute;
	inset-inline: 0;
	top: 0;
	z-index: 10;
}

.doryo-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--3-xl);
	padding: var(--wp--preset--spacing--xl) var(--wp--preset--spacing--6-xl);
}

/* --- Logo ---------------------------------------------------------------- */

.doryo-header__logo {
	display: inline-flex;
	align-items: center;
	text-decoration: none;
}

.doryo-header__logo-img {
	display: block;
	width: auto;
	height: 5rem;
}

.doryo-header__logo-img--light {
	display: none;
}

.doryo-header--overlay .doryo-header__logo-img--dark {
	display: none;
}

.doryo-header--overlay .doryo-header__logo-img--light {
	display: block;
}

/* --- Nav group ----------------------------------------------------------- */

.doryo-header__nav-group {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--lg);
}

.doryo-header__pill {
	display: flex;
	align-items: center;
	padding: var(--wp--preset--spacing--sm) var(--wp--preset--spacing--xl);
	background: var(--wp--preset--color--bg-subtle);
	border: var(--wp--custom--border--width) solid var(--wp--preset--color--border-subtle);
	border-radius: var(--wp--custom--radius--full);
}

.doryo-header--overlay .doryo-header__pill {
	background: color-mix( in srgb, var(--wp--preset--color--fg-on-brand) 12%, transparent );
	border-color: color-mix( in srgb, var(--wp--preset--color--fg-on-brand) 22%, transparent );
}

.doryo-header__nav {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--2-xl);
	margin: 0;
	padding: 0;
	list-style: none;
}

.doryo-header__nav-link {
	position: relative;
	display: inline-flex;
	align-items: center;
	/* Align the inline-flex link (esp. the icon) to the line middle instead of
	   the text baseline, which otherwise lifts the LinkedIn glyph ~5px. */
	vertical-align: middle;
	font-family: var(--wp--preset--font-family--body);
	font-weight: 500;
	font-size: var(--wp--preset--font-size--text-sm);
	color: var(--wp--preset--color--fg);
	text-decoration: none;
	transition: color var(--wp--custom--motion--fast) var(--wp--custom--motion--ease);
}

/* Animated underline on hover/focus — visible on both the light header and the
   transparent over-hero header, where a colour shift alone would vanish. */
.doryo-header__nav-link:not(.doryo-header__nav-link--icon)::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -0.35em;
	height: 2px;
	background: currentColor;
	border-radius: 2px;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--wp--custom--motion--base) var(--wp--custom--motion--ease);
}

.doryo-header__nav-link:not(.doryo-header__nav-link--icon):hover::after,
.doryo-header__nav-link:not(.doryo-header__nav-link--icon):focus-visible::after {
	transform: scaleX(1);
}

/* The LinkedIn icon can't carry an underline — brighten it instead. */
.doryo-header__nav-link--icon {
	color: var(--wp--preset--color--fg-muted);
}

.doryo-header__nav-link--icon:hover,
.doryo-header__nav-link--icon:focus-visible {
	color: var(--wp--preset--color--brand);
}

@media (prefers-reduced-motion: reduce) {
	.doryo-header__nav-link::after {
		transition: none;
	}
}

.doryo-header--overlay .doryo-header__nav-link {
	color: var(--wp--preset--color--fg-on-brand);
}

.doryo-header--overlay .doryo-header__nav-link--icon {
	color: var(--wp--preset--color--fg-on-brand-muted);
}

.doryo-header--overlay .doryo-header__nav-link--icon:hover,
.doryo-header--overlay .doryo-header__nav-link--icon:focus-visible {
	color: var(--wp--preset--color--fg-on-brand);
}

/* --- Language circles (header) ------------------------------------------- */

/* Language switch styled as a toggle: a track pill holds both codes, the
   active language reads as the filled knob (brand palette — not the mockup's
   acid green, which §5 rules out). */
.doryo-header .doryo-langs__list {
	display: inline-flex;
	align-items: center;
	gap: 0;
	margin: 0;
	padding: var(--wp--preset--spacing--xs);
	list-style: none;
	border-radius: var(--wp--custom--radius--full);
	background: var(--wp--preset--color--bg-subtle);
}

.doryo-header .doryo-langs__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.25rem;
	min-height: 1.9rem;
	padding: 0 var(--wp--preset--spacing--sm);
	border-radius: var(--wp--custom--radius--full);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--text-sm);
	color: var(--wp--preset--color--fg-muted);
	text-decoration: none;
	transition:
		color var(--wp--custom--motion--fast) var(--wp--custom--motion--ease),
		background-color var(--wp--custom--motion--fast) var(--wp--custom--motion--ease);
}

.doryo-header .doryo-langs__link:hover:not(.is-active) {
	color: var(--wp--preset--color--fg);
}

.doryo-header .doryo-langs__link.is-active {
	background: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--fg-on-brand);
	font-weight: 700;
}

.doryo-header--overlay .doryo-langs__list {
	background: color-mix( in srgb, var(--wp--preset--color--fg-on-brand) 14%, transparent );
}

.doryo-header--overlay .doryo-langs__link {
	color: var(--wp--preset--color--fg-on-brand-muted);
}

.doryo-header--overlay .doryo-langs__link:hover:not(.is-active) {
	color: var(--wp--preset--color--fg-on-brand);
}

.doryo-header--overlay .doryo-langs__link.is-active {
	background: var(--wp--preset--color--fg-on-brand);
	color: var(--wp--preset--color--brand-hover);
}

/* --- Floating burger ----------------------------------------------------- */

/* Compound selector (.doryo-button.doryo-burger) so these reliably win over
   the base .doryo-button rules regardless of stylesheet order. */
.doryo-button.doryo-burger {
	--btn-bg: var(--wp--preset--color--bg-brand-section);
	--btn-fg: var(--wp--preset--color--fg-on-brand);
	--btn-ring: transparent;
	--btn-fill: var(--wp--preset--color--fg-on-brand);
	--btn-fg-hover: var(--wp--preset--color--brand-hover);
	--btn-ring-hover: transparent;

	position: fixed;
	top: var(--wp--preset--spacing--3-xl);
	inset-inline-end: var(--wp--preset--spacing--6-xl);
	z-index: 200;
	border: 0;
	background: none;
	box-shadow: var(--wp--custom--shadow--lg);
	border-radius: var(--wp--custom--radius--full);
	/* Hidden until scrolled (JS adds .is-visible); bouncy entrance. */
	transform: scale( 0 );
	transition: transform 500ms cubic-bezier( 0.34, 1.5, 0.64, 1 );
}

.doryo-button.doryo-burger.is-visible {
	transform: scale( 1 );
}

/* Over any dark surface: invert to a white circle with a dark icon (contrast). */
.doryo-button.doryo-burger.is-over-dark {
	--btn-bg: var(--wp--preset--color--fg-on-brand);
	--btn-fg: var(--wp--preset--color--brand-hover);
	--btn-ring: transparent;
	--btn-fill: var(--wp--preset--color--brand);
	--btn-fg-hover: var(--wp--preset--color--fg-on-brand);
	--btn-ring-hover: transparent;
}

/* Smoothly cross-fade the circle colour at the hero/section boundary. */
.doryo-burger .doryo-button__click {
	transition:
		color var(--wp--custom--motion--base) var(--wp--custom--motion--ease),
		background-color var(--wp--custom--motion--base) var(--wp--custom--motion--ease),
		box-shadow var(--wp--custom--motion--base) var(--wp--custom--motion--ease);
}

.doryo-button--round .doryo-button__click {
	width: clamp( 4.5rem, 6vw, 5.5rem );
	height: clamp( 4.5rem, 6vw, 5.5rem );
	padding: 0;
}

.doryo-burger__bars {
	position: relative;
	width: 1.75rem;
	height: 0.85rem;
}

.doryo-burger__bars::before,
.doryo-burger__bars::after {
	content: "";
	position: absolute;
	left: 0;
	width: 100%;
	height: 2px;
	border-radius: 2px;
	background: currentColor;
	transition:
		top var(--wp--custom--motion--base) var(--wp--custom--motion--ease),
		transform var(--wp--custom--motion--base) var(--wp--custom--motion--ease);
}

.doryo-burger__bars::before { top: 0; }
.doryo-burger__bars::after { top: calc( 100% - 2px ); }

.doryo-burger[aria-expanded="true"] .doryo-burger__bars::before {
	top: calc( 50% - 1px );
	transform: rotate( 45deg );
}

.doryo-burger[aria-expanded="true"] .doryo-burger__bars::after {
	top: calc( 50% - 1px );
	transform: rotate( -45deg );
}

/* --- Drawer -------------------------------------------------------------- */

.doryo-drawer {
	position: fixed;
	inset: 0;
	z-index: 150;
	visibility: hidden;
	/* Clip the off-screen (parked) panel so it can't create horizontal scroll
	   on mobile — the panel keeps its own overflow-y for long content. */
	overflow: hidden;
	transition: visibility 0s var(--wp--custom--motion--base);
}

.doryo-drawer.is-open {
	visibility: visible;
	transition: visibility 0s;
}

.doryo-drawer__backdrop {
	position: absolute;
	inset: 0;
	background: color-mix( in srgb, var(--wp--preset--color--fg) 55%, transparent );
	opacity: 0;
	transition: opacity var(--wp--custom--motion--base) var(--wp--custom--motion--ease);
}

.doryo-drawer.is-open .doryo-drawer__backdrop {
	opacity: 1;
}

.doryo-drawer__panel {
	position: absolute;
	inset-block: 0;
	inset-inline-end: 0;
	/* border-box so the inline padding stays INSIDE the width — otherwise the
	   panel grows past 100% on mobile and, pinned to the right, pushes its
	   content off the left edge of the viewport. */
	box-sizing: border-box;
	width: min( 27.5rem, 100% );
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--4-xl);
	padding: var(--wp--preset--spacing--10-xl) var(--wp--preset--spacing--6-xl) var(--wp--preset--spacing--7-xl);
	background: var(--wp--preset--color--bg-brand-section);
	color: var(--wp--preset--color--fg-on-brand);
	overflow-y: auto;
	transform: translateX( 100% );
	transition: transform var(--wp--custom--motion--base) var(--wp--custom--motion--ease);
}

.doryo-drawer.is-open .doryo-drawer__panel {
	transform: translateX( 0 );
}

.doryo-drawer__eyebrow {
	margin: 0;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--text-sm);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--wp--preset--color--fg-on-brand-muted);
}

.doryo-drawer__nav ul {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--lg);
	margin: 0;
	padding: 0;
	list-style: none;
}

.doryo-drawer__link {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--display-md);
	font-weight: 700;
	line-height: var(--wp--custom--line-height--tight);
	color: var(--wp--preset--color--fg-on-brand);
	text-decoration: none;
	transition: color var(--wp--custom--motion--fast) var(--wp--custom--motion--ease);
}

.doryo-drawer__link:hover {
	color: var(--wp--preset--color--fg-on-brand-muted);
}

.doryo-drawer__cta {
	align-self: flex-start;
}

.doryo-drawer__meta {
	margin-block-start: auto;
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--2-xl);
}

.doryo-drawer .doryo-langs__list {
	display: inline-flex;
	gap: 0;
	margin: 0;
	padding: var(--wp--preset--spacing--xs);
	list-style: none;
	border-radius: var(--wp--custom--radius--full);
	background: color-mix( in srgb, var(--wp--preset--color--fg-on-brand) 14%, transparent );
}

.doryo-drawer .doryo-langs__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.25rem;
	min-height: 1.9rem;
	padding: 0 var(--wp--preset--spacing--sm);
	border-radius: var(--wp--custom--radius--full);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--text-sm);
	color: var(--wp--preset--color--fg-on-brand-muted);
	text-decoration: none;
	transition:
		color var(--wp--custom--motion--fast) var(--wp--custom--motion--ease),
		background-color var(--wp--custom--motion--fast) var(--wp--custom--motion--ease);
}

.doryo-drawer .doryo-langs__link:hover:not(.is-active) {
	color: var(--wp--preset--color--fg-on-brand);
}

.doryo-drawer .doryo-langs__link.is-active {
	background: var(--wp--preset--color--fg-on-brand);
	color: var(--wp--preset--color--brand-hover);
	font-weight: 700;
}

.doryo-drawer__social {
	display: flex;
	gap: var(--wp--preset--spacing--lg);
}

.doryo-drawer__social-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: var(--wp--custom--radius--full);
	border: var(--wp--custom--border--width) solid color-mix( in srgb, var(--wp--preset--color--fg-on-brand) 28%, transparent );
	color: var(--wp--preset--color--fg-on-brand);
	transition: background-color var(--wp--custom--motion--fast) var(--wp--custom--motion--ease);
}

.doryo-drawer__social-link:hover {
	background: color-mix( in srgb, var(--wp--preset--color--fg-on-brand) 12%, transparent );
}

.doryo-drawer__nap {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--xs);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--text-xs);
	color: var(--wp--preset--color--fg-on-brand-muted);
}

.doryo-drawer__nap a {
	color: var(--wp--preset--color--fg-on-brand);
	text-decoration: none;
}

/* --- Mobile: no room for the pill; logo only + burger from the start ----- */

@media (max-width: 781px) {
	.doryo-header__inner {
		padding-inline: var(--wp--custom--container--padding-mobile);
	}

	.doryo-header__nav-group {
		display: none;
	}

	.doryo-header__logo-img {
		height: 3.5rem;
	}

	.doryo-button.doryo-burger {
		top: var(--wp--preset--spacing--lg);
		inset-inline-end: var(--wp--custom--container--padding-mobile);
	}
}

@media (prefers-reduced-motion: reduce) {
	.doryo-header__nav-link,
	.doryo-header .doryo-langs__link,
	.doryo-burger,
	.doryo-burger__bars::before,
	.doryo-burger__bars::after,
	.doryo-drawer,
	.doryo-drawer__backdrop,
	.doryo-drawer__panel {
		transition: none;
	}
}