/* ==========================================================================
   Andy's Junior site header and mobile menu.
   ========================================================================== */

/* Room for the admin bar. Core sets the variable only while the bar is shown, so guests fall back to 0px */
.aj-header {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 100;
	background: var(--aj-cream-hero);
	transition: box-shadow .25s, background-color .25s;
}

/* The blur lives in a pseudo element because backdrop-filter on the header breaks fixed positioning inside the menu */
.aj-header.is-stuck {
	background: transparent;
	box-shadow: 0 4px 20px rgba(36, 56, 75, .06);
}

.aj-header.is-stuck::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: rgba(247, 244, 239, .92);
	backdrop-filter: blur(10px);
}

.aj-header__inner {
	display: flex;
	align-items: center;
	gap: 32px;
	min-height: var(--aj-header-h);
}

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

.aj-logo {
	flex: 0 0 auto;
}

.aj-logo__img {
	width: auto;
	height: 64px;
	object-fit: contain;
}

.aj-logo__text {
	display: block;
	font-size: 13px;
	font-weight: 800;
	line-height: 1.05;
	letter-spacing: .06em;
	color: var(--aj-red);
}

.aj-logo__text b {
	color: var(--aj-ink);
}

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

/* Content width, not flex: 1 - the free space belongs to the language
   switcher's auto margins, which is what centres it between the menu and the
   phone the way the design has it. */
.aj-nav {
	flex: 0 1 auto;
}

/* ------------------------------------------------- Language switcher ---- */

.aj-lang {
	position: relative;
	flex: 0 0 auto;
	margin-inline: auto;
}

.aj-lang__current {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 16px;
	line-height: 24px;
	font-weight: 500;
	color: var(--aj-ink);
	cursor: pointer;
	transition: color .2s;
}

.aj-lang__current:hover {
	color: var(--aj-red);
}

/* caret.svg points up, so it is turned over and flips back when open */
.aj-lang__caret {
	flex: 0 0 auto;
	transform: rotate(180deg);
	transition: transform .25s;
}

.aj-lang__current[aria-expanded="true"] .aj-lang__caret {
	transform: rotate(0);
}

.aj-lang__list {
	position: absolute;
	top: calc(100% + 8px);
	left: 50%;
	z-index: 20;
	min-width: 88px;
	padding: 4px;
	transform: translateX(-50%);
	background: var(--aj-white);
	border-radius: 12px;
	box-shadow: var(--aj-shadow-soft);
}

.aj-lang__list a {
	display: block;
	padding: 6px 12px;
	font-size: 16px;
	line-height: 24px;
	font-weight: 500;
	text-align: center;
	color: var(--aj-ink);
	border-radius: 8px;
	transition: color .2s, background-color .2s;
}

.aj-lang__list a:hover {
	background: var(--aj-cream);
}

.aj-lang__list a.is-current {
	color: var(--aj-red);
}

.aj-nav__list {
	display: flex;
	align-items: center;
	gap: 24px;
}

.aj-nav__list a {
	font-size: 16px;
	font-weight: 500;
	color: var(--aj-ink-soft);
	transition: color .2s;
}

.aj-nav__list a:hover,
.aj-nav__list .current-menu-item > a {
	color: var(--aj-red);
}

/* ------------------------------------------------------ Right group ----- */

.aj-header__actions {
	display: flex;
	align-items: center;
	gap: 10px;
}

.aj-phone {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 13px 22px;
	max-height: 48px;
	font-size: 16px;
	font-weight: 600;
	background: var(--aj-white);
	border-radius: 100px;
	box-shadow: var(--aj-shadow-soft);
	transition: box-shadow .2s;
}

.aj-phone:hover {
	box-shadow: 0 4px 16px rgba(36, 56, 75, .12);
}

/* The icon is dark on the white pill with no coloured circle */
.aj-phone__ico {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--aj-ink);
}

.aj-phone__ico svg {
	width: 18px;
	height: 18px;
}

/* Header buttons are taller than the base --sm size, about 46px */
.aj-header__actions .aj-btn {
	padding: 14px 24px;
	max-height: 48px;
	font-size: 16px;
}

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

/* No auto margin here. .aj-header__actions pushes the group right and the burger follows */
.aj-burger {
	display: none;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	color: var(--aj-white);
	border-radius: 50%;
	background: var(--aj-red);
	transition: background-color .2s;
}

.aj-burger:hover {
	background: var(--aj-red-dark);
}

/* --------------------------------------- Open menu bottom, mobile only --- */

.aj-nav__extra,
.aj-nav__langs {
	display: none;
}

.aj-nav__chats {
	display: flex;
	justify-content: center;
	gap: 12px;
}

.aj-nav__chats .aj-chat--light {
	width: 56px;
	height: 56px;
	color: var(--aj-ink);
	background: var(--aj-white);
}

/* Buttons in the open menu are 56px tall with a 12px gap */
.aj-nav__actions {
	display: grid;
	gap: 12px;
}

.aj-phone--wide {
	justify-content: center;
	max-height: none;
	padding: 18px 20px;
}

.aj-nav__actions .aj-btn {
	padding-block: 18px;
}

.aj-burger__close {
	display: none;
}

.aj-burger[aria-expanded="true"] .aj-burger__open {
	display: none;
}

.aj-burger[aria-expanded="true"] .aj-burger__close {
	display: block;
}

/* ======================================================= Responsive ===== */

@media (max-width: 1180px) {
	.aj-header__inner {
		gap: 18px;
	}

	.aj-nav__list {
		gap: 18px;
	}

	.aj-header__btn-alt {
		display: none;
	}
}

@media (max-width: 1024px) {
	/* The burger menu carries its own row of languages */
	.aj-lang {
		display: none;
	}

	/* Header is not sticky. With the menu open it switches to fixed below */
	.aj-header {
		position: static;
	}

	/* With no stickiness the scrolled header backdrop is not needed either */
	.aj-header.is-stuck {
		background: var(--aj-cream-hero);
		box-shadow: none;
	}

	.aj-header.is-stuck::before {
		display: none;
	}

	/* Logo on the left, phone and burger grouped right with an 8px gap */
	.aj-header__inner {
		gap: 8px;
	}

	.aj-burger {
		display: inline-flex;
	}

	/* Full screen menu, only the buttons at the bottom have side padding */
	.aj-nav {
		position: fixed;
		inset: calc(var(--aj-header-h) + var(--wp-admin--admin-bar--height, 0px)) 0 0;
		z-index: 90;
		display: flex;
		flex-direction: column;
		padding: 0 0 32px;
		overflow-y: auto;
		background: var(--aj-beige);
		border-top: 1px solid var(--aj-line);
		opacity: 0;
		visibility: hidden;
		transition: opacity .2s, visibility .2s;
	}

	.aj-nav.is-open {
		opacity: 1;
		visibility: visible;
	}

	/* body{overflow:hidden} breaks sticky, so the header goes fixed while the menu is open */
	body.aj-menu-open .aj-header {
		position: fixed;
		top: var(--wp-admin--admin-bar--height, 0px);
		left: 0;
		right: 0;
	}

	/* Three equal cells with 40px dividers centred between them */
	/* Columns follow the number of languages, so two or three both fill the row */
	.aj-nav__langs {
		display: grid;
		grid-auto-flow: column;
		grid-auto-columns: minmax(0, 1fr);
		flex: 0 0 auto;
		height: 72px;
		border-bottom: 1px solid var(--aj-line);
	}

	.aj-nav__lang {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.aj-nav__lang + .aj-nav__lang::before {
		content: "";
		position: absolute;
		top: 50%;
		left: 0;
		width: 1px;
		height: 40px;
		transform: translateY(-50%);
		background: var(--aj-line);
	}

	.aj-nav__lang a {
		font-size: 16px;
		font-weight: 500;
		color: var(--aj-ink);
	}

	.aj-nav__lang.is-current a {
		text-decoration: underline;
		text-underline-offset: 4px;
	}

	/* 20px text with rows every 52px */
	.aj-nav__list {
		flex: 1;
		flex-direction: column;
		justify-content: center;
		gap: 28px;
		padding-block: 32px;
	}

	.aj-nav__list a {
		display: block;
		font-size: 20px;
		line-height: 1.2;
		font-weight: 600;
		text-align: center;
		color: var(--aj-ink);
	}

	/* 54px from the messenger circles down to the line above the buttons */
	.aj-nav__extra {
		display: grid;
		gap: 54px;
	}

	.aj-nav__actions {
		padding: 32px 24px 0;
		border-top: 1px solid var(--aj-line);
	}

	.aj-header__actions {
		margin-left: auto;
	}

	.aj-header__actions .aj-btn {
		display: none;
	}
}

@media (max-width: 640px) {
	/* Logo is 56px on mobile inside an 88px header */
	.aj-logo__img {
		height: 56px;
	}

	/* Circles are 40px with an 8px gap */
	.aj-header__actions {
		gap: 8px;
	}

	/* Only the round icon stays in the header, the number moves into the open menu */
	.aj-header__actions .aj-phone {
		width: 40px;
		height: 40px;
		max-height: none;
		padding: 0;
		justify-content: center;
		border-radius: 50%;
	}

	.aj-burger {
		width: 40px;
		height: 40px;
	}

	.aj-burger svg {
		width: 20px;
		height: 20px;
	}

	.aj-header__actions .aj-phone__ico svg {
		width: 18px;
		height: 18px;
	}

	.aj-header__actions .aj-phone__num {
		display: none;
	}
}