/* ───────────────────────────────────────────────────────────────
   header.css — Sticky site header (logo + nav + WORD LID + account)
   ───────────────────────────────────────────────────────────────
   The header markup lives in `patterns/header.php` and uses native
   block markup (group / site-title / navigation / buttons). Everything
   is editable in the Site Editor.

   The WORD LID button is styled via `theme.json` → `styles.blocks.
   core/button` so the same red look appears in the editor AND on
   the front-end. See also `inc/block-styles.php` for variations.

   Common edits:
     • logo size or color    → `.wp-block-site-title a`
     • header height         → `.blik-header-inner` (min-height)
     • spacing between items → `.blik-header-right` gap
     • account icon size     → `.blik-account-btn-wrap .wp-block-button__link`
   ─────────────────────────────────────────────────────────────── */

.blik-site-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: var(--blik-color-paper);
	border-bottom: 0;
}

.blik-header-inner {
	max-width: var(--blik-max);
	margin: 0 auto;
	padding: 0 var(--blik-gutter);
	box-sizing: border-box;
	min-height: 100px;
	position: relative;
}

.blik-header-inner.is-layout-flex {
	gap: clamp(16px, 3vw, 40px);
}

.blik-header-right.is-layout-flex {
	gap: 28px;
}

/* ─── LOGO ─── */
/* Typography (font-family, font-size, color, letter-spacing, line-height)
   lives in theme.json under `styles.blocks.core/site-title`. Only the
   block-level margin reset stays here because theme.json's site-title
   element has no spacing field. */
.blik-site-header .wp-block-site-title {
	margin: 0;
	padding: 0;
}

.blik-site-header .wp-block-site-title a {
	display: block;
}

.blik-header-right .wp-block-navigation .wp-block-navigation__container {
	gap: 32px;
}

.blik-header-right .wp-block-navigation a {
	display: inline-flex;
	align-items: center;
	min-height: 32px;
	color: var(--blik-color-ink);
	white-space: nowrap;
	transition: color var(--blik-transition-fast);
}

.blik-header-right .wp-block-navigation a:hover {
	color: var(--blik-color-purple);
}

.blik-header-cta {
	margin: 0;
}

.blik-header-cta .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 32px;
}

/* ─── ACCOUNT ICON ─── */
.blik-account-buttons {
	margin: 0;
}

.blik-account-buttons.wp-block-buttons {
	display: inline-flex;
	align-items: center;
	gap: 0;
	line-height: 0;
}

.blik-account-btn-wrap {
	line-height: 0;
}

.blik-account-btn-wrap .wp-block-button__link {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	width: var(--blik-icon-size);
	height: var(--blik-icon-size);
	min-width: var(--blik-icon-size);
	background: none;
	border: none;
	padding: 0;
	color: var(--blik-color-ink);
	text-decoration: none;
	font-size: 0;
	line-height: 0;
	position: relative;
	transition: color var(--blik-transition-fast);
	vertical-align: middle;
}

.blik-account-btn-wrap .wp-block-button__link:hover {
	color: var(--blik-color-purple);
	background: transparent;
}

.blik-account-btn-wrap .wp-block-button__link::before,
.blik-account-btn-wrap .wp-block-button__link::after {
	content: '';
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	box-sizing: border-box;
	border: 1.5px solid currentColor;
}

.blik-account-btn-wrap .wp-block-button__link::before {
	top: 6px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
}

.blik-account-btn-wrap .wp-block-button__link::after {
	bottom: 5px;
	width: 18px;
	height: 10px;
	border-bottom: 0;
	border-radius: 18px 18px 0 0;
}

/* ─── MOBILE NAVIGATION ───
   The Navigation block uses WordPress's native mobile overlay so links
   stay editable in the Site Editor. */
.blik-site-nav .wp-block-navigation__responsive-container-open,
.blik-site-nav .wp-block-navigation__responsive-container-close {
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	color: var(--blik-color-ink);
	background: transparent;
	border: 0;
}

.blik-site-nav .wp-block-navigation__responsive-container.is-menu-open {
	background: var(--blik-color-paper);
	color: var(--blik-color-ink);
	padding: var(--blik-gutter);
}

.blik-site-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	align-items: flex-start;
	padding-top: 64px;
}

.blik-site-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.15;
}

@media (max-width: 782px) {
	.blik-header-inner {
		min-height: 74px;
	}

	.blik-header-right.is-layout-flex {
		gap: 14px;
	}

	.blik-header-right .wp-block-navigation .wp-block-navigation__container {
		gap: 0;
	}

	.blik-header-cta .wp-block-button__link {
		min-height: 30px;
		padding: 8px 14px;
	}
}