/* Pill-style header. Everything is scoped to .edb-header so it does not
   clash with the theme's own link / button / list styles.

   Colours match the site footer: light blue #93b8f0, blue #0b5bbf, navy #1e3a8a, cream #fef8ec.
   Change them in the variables below (--edb-c1, --edb-c2, --edb-light, --edb-page).
*/

.edb-header {
	--edb-c1: #0b5bbf;
	--edb-c2: #1e3a8a;
	--edb-light: #93b8f0;
	--edb-grad: linear-gradient(135deg, var(--edb-c1), var(--edb-c2));
	--edb-ink: #1d2433;
	--edb-page: #fef8ec;
	--edb-card: #ffffff;
	--edb-line: #ece4d3;
	--edb-tint: rgba(11, 91, 191, .09);
	--edb-link-hover: #0b5bbf;
	--edb-heading: "Libre Baskerville", Georgia, serif;
	--edb-body: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;

	position: sticky;
	top: 0;
	z-index: 999;
	background: var(--edb-page);
	font-family: var(--edb-body);
	color: var(--edb-ink);
}

/* Coloured strip along the very top */
.edb-header::before {
	content: "";
	display: block;
	height: 4px;
	background: linear-gradient(90deg, var(--edb-light), var(--edb-c1) 50%, var(--edb-c2));
}

.admin-bar .edb-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .edb-header { top: 46px; } }

.edb-header *,
.edb-header *::before,
.edb-header *::after { box-sizing: border-box; }

.edb-header ul { list-style: none; margin: 0; padding: 0; }
.edb-header li { margin: 0; padding: 0; }

/* ---------- The white rounded bar ---------- */
.edb-header .edb-pill {
	width: calc(100% - 40px);
	max-width: 1200px;
	margin: 12px auto 14px;
	padding: 10px 12px 10px 26px;
	display: flex;
	align-items: center;
	gap: 24px;
	background: var(--edb-card);
	border-radius: 999px;
	box-shadow: 0 8px 28px rgba(30, 30, 70, .08);
}

/* ---------- Brand ---------- */
.edb-header .edb-brand {
	display: flex;
	align-items: center;
	gap: 10px;
	flex: 0 0 auto;
	text-decoration: none;
	color: var(--edb-ink);
}
.edb-header .edb-logo {
	width: 52px;
	height: 52px;
	max-width: none;
	border-radius: 13px;
	object-fit: cover;
	display: block;
}
.edb-header .edb-brand-name {
	font-family: var(--edb-heading);
	font-size: 1.2rem;
	line-height: 1.15;
	font-weight: 700;
	color: var(--edb-ink);
	white-space: nowrap;
}

/* ---------- Nav (desktop) ---------- */
.edb-header .edb-nav {
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	gap: 24px;
	min-width: 0;
}
.edb-header .edb-menu {
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 4px;
}
.edb-header .edb-item { position: relative; }

.edb-header .edb-item > a,
.edb-header .edb-sub-toggle {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 12px 16px;
	margin: 0;
	font: 600 .95rem/1 var(--edb-body);
	color: var(--edb-ink);
	background: none;
	border: 0;
	border-radius: 999px;
	box-shadow: none;
	text-decoration: none;
	text-transform: none;
	letter-spacing: 0;
	cursor: pointer;
	transition: color .2s, background-color .2s;
}
.edb-header .edb-item > a:hover,
.edb-header .edb-sub-toggle:hover,
.edb-header .edb-item.is-active > a,
.edb-header .edb-item.is-active > .edb-sub-toggle {
	color: var(--edb-link-hover);
	background: var(--edb-tint);
}

.edb-header .edb-chev { transition: transform .2s; }
.edb-header .edb-has-sub.open > .edb-sub-toggle .edb-chev { transform: rotate(180deg); }

/* Dropdown */
.edb-header .edb-submenu {
	position: absolute;
	top: calc(100% + 10px);
	left: 50%;
	min-width: 220px;
	padding: 8px;
	background: var(--edb-card);
	border: 1px solid var(--edb-line);
	border-radius: 18px;
	box-shadow: 0 14px 34px rgba(30, 30, 70, .14);
	opacity: 0;
	visibility: hidden;
	transform: translate(-50%, 6px);
	transition: opacity .18s, transform .18s, visibility .18s;
}
/* invisible bridge so the menu doesn't close when moving the mouse down */
.edb-header .edb-submenu::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: -12px;
	height: 12px;
}
.edb-header .edb-submenu a {
	display: block;
	padding: 10px 16px;
	border-radius: 12px;
	color: var(--edb-ink);
	text-decoration: none;
	font-weight: 500;
	font-size: .92rem;
}
.edb-header .edb-submenu a:hover,
.edb-header .edb-submenu a[aria-current="page"] {
	background: var(--edb-tint);
	color: var(--edb-link-hover);
}
.edb-header .edb-has-sub.open > .edb-submenu {
	opacity: 1;
	visibility: visible;
	transform: translate(-50%, 0);
}

@media (hover: hover) and (min-width: 922px) {
	.edb-header .edb-has-sub:hover > .edb-submenu,
	.edb-header .edb-has-sub:focus-within > .edb-submenu {
		opacity: 1;
		visibility: visible;
		transform: translate(-50%, 0);
	}
	.edb-header .edb-has-sub:hover > .edb-sub-toggle .edb-chev { transform: rotate(180deg); }
}

/* ---------- CTA button ---------- */
.edb-header .edb-cta {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 12px;
	padding: 16px 26px;
	background: var(--edb-grad);
	color: #fff;
	font: 600 .95rem/1 var(--edb-body);
	text-decoration: none;
	border-radius: 999px;
	box-shadow: 0 10px 22px rgba(11, 91, 191, .30);
	transition: transform .2s, box-shadow .2s, filter .2s;
}
.edb-header .edb-cta:hover,
.edb-header .edb-cta:focus {
	color: #fff;
	filter: brightness(1.08);
	transform: translateY(-1px);
	box-shadow: 0 14px 26px rgba(11, 91, 191, .38);
}
.edb-header .edb-arrow { transition: transform .2s; }
.edb-header .edb-cta:hover .edb-arrow { transform: translateX(4px); }

.edb-header a:focus-visible,
.edb-header button:focus-visible {
	outline: 3px solid var(--edb-c1);
	outline-offset: 2px;
}

/* ---------- Hamburger (hidden on desktop) ---------- */
.edb-header .edb-nav-toggle {
	display: none;
	position: relative;
	flex: 0 0 auto;
	width: 46px;
	height: 46px;
	padding: 0;
	margin: 0 0 0 auto;
	background: var(--edb-tint);
	border: 0;
	border-radius: 50%;
	box-shadow: none;
	cursor: pointer;
}
.edb-header .edb-bar {
	position: absolute;
	left: 13px;
	right: 13px;
	height: 2px;
	background: var(--edb-ink);
	border-radius: 2px;
	transition: transform .25s, opacity .2s, top .25s;
}
.edb-header .edb-bar:nth-child(1) { top: 16px; }
.edb-header .edb-bar:nth-child(2) { top: 22px; }
.edb-header .edb-bar:nth-child(3) { top: 28px; }
.edb-header .edb-nav-toggle[aria-expanded="true"] .edb-bar:nth-child(1) { top: 22px; transform: rotate(45deg); }
.edb-header .edb-nav-toggle[aria-expanded="true"] .edb-bar:nth-child(2) { opacity: 0; }
.edb-header .edb-nav-toggle[aria-expanded="true"] .edb-bar:nth-child(3) { top: 22px; transform: rotate(-45deg); }

/* ---------- Tablet / mobile (matches Astra's 921px breakpoint) ---------- */
@media (max-width: 921px) {
	.edb-header .edb-pill {
		flex-wrap: wrap;
		gap: 0;
		margin: 10px auto 12px;
		padding: 8px 10px 8px 16px;
		border-radius: 30px;
	}
	.edb-header .edb-logo { width: 42px; height: 42px; border-radius: 10px; }
	.edb-header .edb-brand-name { font-size: 1.05rem; }

	.edb-header .edb-nav-toggle { display: block; }

	.edb-header .edb-nav {
		display: none;
		flex: 0 0 100%;
		flex-direction: column;
		align-items: stretch;
		gap: 14px;
		margin-top: 10px;
		padding: 12px 6px 10px;
		border-top: 1px solid var(--edb-line);
		max-height: calc(100vh - 130px);
		overflow-y: auto;
	}
	.edb-header .edb-nav.open { display: flex; }

	.edb-header .edb-menu {
		flex-direction: column;
		align-items: stretch;
		justify-content: flex-start;
		flex-wrap: nowrap;
		gap: 2px;
	}
	.edb-header .edb-item > a,
	.edb-header .edb-sub-toggle {
		width: 100%;
		justify-content: space-between;
		padding: 14px 16px;
		border-radius: 14px;
	}

	/* Dropdown becomes an accordion */
	.edb-header .edb-submenu {
		position: static;
		min-width: 0;
		margin: 2px 0 6px 14px;
		padding: 4px 0 4px 10px;
		border: 0;
		border-left: 2px solid var(--edb-line);
		border-radius: 0;
		box-shadow: none;
		background: transparent;
		display: none;
		opacity: 1;
		visibility: visible;
		transform: none;
	}
	.edb-header .edb-submenu::before { display: none; }
	.edb-header .edb-has-sub.open > .edb-submenu { display: block; transform: none; }

	.edb-header .edb-cta { justify-content: center; }
}

@media (max-width: 380px) {
	.edb-header .edb-pill { width: calc(100% - 24px); }
	.edb-header .edb-brand-name { font-size: .95rem; }
}

@media (prefers-reduced-motion: reduce) {
	.edb-header * { transition: none !important; }
}