/* =========================================================================
   Tiddlywinks — Desktop navigation bar (>= 1200px)

   MARCA "MENU DESIGN" (Figma 8FiFQkKUJfGJyygHLiVdcL, node 222:8): logo left,
   five links centred, tan "Contact Us" pill right; frosted dropdowns, the
   nursery list as a 4-column panel under the whole bar.

   Markup: template-parts/header/desktop-nav.php, injected into the theme's
   existing `#header .flex-wrapper.tablet` row. That row is re-laid out as a
   grid here rather than replaced, so the theme's logo JS (it activates the
   FIRST .regular-logo/.white-logo in the DOM) keeps working on every page.

   Below 1200px nothing changes: the original Contact | logo | Menu row and
   the .nav-modal burger carry on as before (1200 is where the five links,
   logo and pill stop fitting in the 90vw container).

   Theme gotchas handled here:
     - main.css `header, nav { position:absolute; padding:30px 0 }` is
       unscoped and would grab our <nav> — undone on .tw-nav.
     - `header .flex-wrapper div { width:33% }` — reset; no divs in the nav.
     - global `ul { display:flex; flex-direction:column; padding-left:20px }`
       and `ul li { margin-bottom:5px }` — reset on the lists.
     - `* { color:#2e2f33; font-size:16px }` hits every element directly,
       so colours/sizes are set on the <a>s themselves, not inherited.
   ========================================================================= */

#header .tw-nav {
	display: none;
}

@media (min-width: 1200px) {

	/* ---- Row: logo | nav | Contact Us ---------------------------------- */

	#header .flex-wrapper.tablet {
		display: grid !important;
		grid-template-columns: 1fr auto 1fr;
		align-items: center;
		column-gap: 24px;
	}

	#header .flex-wrapper.tablet > div {
		width: auto;
	}

	#header .flex-wrapper.tablet > .logo {
		grid-column: 1;
		grid-row: 1;
		justify-self: start;
		text-align: left;
	}

	#header .flex-wrapper.tablet > .tw-nav {
		grid-column: 2;
		grid-row: 1;
	}

	#header .flex-wrapper.tablet > .tw-header-cta {
		grid-column: 3;
		grid-row: 1;
		justify-self: end;
		text-align: right;
	}

	/* The bar replaces the burger at this width. */
	#header .flex-wrapper.tablet > .tw-header-menu {
		display: none;
	}

	#header .flex-wrapper.tablet .logo-wrapper {
		justify-content: flex-start;
	}

	#header .flex-wrapper.tablet .logo img {
		width: clamp(160px, 12.5vw, 200px);
	}

	/* ---- Contact Us pill ------------------------------------------------ */
	/* Beats the theme/page JS that swaps .white ↔ .black on header buttons. */

	#header .tw-header-cta .button:not(.underline) {
		width: auto;
		padding: 13px 24px;
		border: 1px solid #fff;
		border-radius: 100px;
		background-color: #d8ae7d;
		color: #fff;
		font-size: 14px;
		line-height: 1.2;
	}

	#header .tw-header-cta .button:not(.underline):hover,
	#header .tw-header-cta .button:not(.underline):focus-visible {
		border-color: #2e2f33;
		background-color: #2e2f33;
		color: #fff;
	}

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

	#header .tw-nav {
		--tw-nav-fg: #2e2f33;

		display: block;
		position: static;
		top: auto;
		right: auto;
		left: auto;
		z-index: auto;
		padding: 0;
	}

	/* White links over the photo/dark heroes. Everything else (white heroes,
	   V2 nursery pages, blog, contact, forms…) keeps the dark default. */
	body:has(.hero-section.image) #header .tw-nav,
	body:has(.hero-section.video) #header .tw-nav,
	body:has(.tw-h2-hero) #header .tw-nav,
	body.single-after-school-club #header .tw-nav {
		--tw-nav-fg: #fff;
	}

	#header .tw-nav__list {
		display: flex;
		position: relative; /* anchors the mega panel under the whole bar */
		flex-direction: row;
		align-items: center;
		justify-content: center;
		gap: clamp(24px, 3vw, 64px);
		margin: 0;
		padding: 0;
		list-style: none;
	}

	#header .tw-nav__list > li {
		position: relative; /* anchors a regular dropdown under its link */
		margin: 0;
	}

	#header .tw-nav__list > li.tw-nav__item--mega {
		position: static;
	}

	#header .tw-nav__list > li > a {
		display: block;
		padding: 10px 0;
		color: var(--tw-nav-fg);
		font-size: 16px;
		line-height: 1.2;
		white-space: nowrap;
		text-decoration: underline;
		text-decoration-color: transparent;
		text-decoration-thickness: 1px;
		text-underline-offset: 6px;
		transition: text-decoration-color 0.2s ease;
	}

	#header .tw-nav__list > li > a:hover,
	#header .tw-nav__list > li > a:focus-visible {
		text-decoration-color: currentColor;
	}

	/* ---- Dropdown panel ------------------------------------------------- */

	#header .tw-nav__sub {
		display: flex;
		position: absolute;
		top: 100%;
		left: 50%;
		z-index: 2;
		flex-direction: column;
		align-items: center;
		gap: 14px;
		width: max-content;
		min-width: 128px;
		margin: 12px 0 0;
		padding: 14px 22px;
		border: 1px solid #fff;
		border-radius: 13px;
		background-color: rgba(239, 239, 239, 0.8);
		-webkit-backdrop-filter: blur(10px);
		backdrop-filter: blur(10px);
		list-style: none;
		opacity: 0;
		visibility: hidden;
		transform: translate(-50%, 6px);
		/* visibility lags on close, so a brief slip of the pointer off the
		   panel doesn't snap it shut. */
		transition: opacity 0.15s ease, transform 0.15s ease, visibility 0s linear 0.15s;
	}

	/* Hover bridge over the 12px gap between link and panel. */
	#header .tw-nav__sub::before {
		content: "";
		position: absolute;
		right: 0;
		bottom: 100%;
		left: 0;
		height: 16px;
	}

	#header .tw-nav__list > li:hover > .tw-nav__sub,
	#header .tw-nav__list > li:focus-within > .tw-nav__sub,
	#header .tw-nav__list > li.is-open > .tw-nav__sub {
		opacity: 1;
		visibility: visible;
		transform: translate(-50%, 0);
		transition: opacity 0.15s ease, transform 0.15s ease, visibility 0s;
	}

	/* Escape (header-nav.js) — must come after the open rules. */
	#header .tw-nav__list > li.is-dismissed > .tw-nav__sub {
		opacity: 0;
		visibility: hidden;
	}

	#header .tw-nav__sub > li {
		margin: 0;
	}

	#header .tw-nav__sub a {
		display: block;
		color: #2e2f33;
		font-size: 16px;
		line-height: 1.2;
		text-align: center;
		white-space: nowrap;
		text-decoration: underline;
		text-decoration-color: transparent;
		text-decoration-thickness: 1px;
		text-underline-offset: 4px;
		transition: text-decoration-color 0.2s ease;
	}

	#header .tw-nav__sub a:hover,
	#header .tw-nav__sub a:focus-visible {
		text-decoration-color: currentColor;
	}

	/* ---- Mega panel (> 6 children, i.e. Find a Nursery) ----------------- */
	/* Fills column by column, 3 rows → 4 columns for today's 12 nurseries;
	   a 13th nursery switches to 4 rows rather than growing a 5th column. */

	#header .tw-nav__item--mega > .tw-nav__sub {
		display: grid;
		grid-auto-flow: column;
		grid-template-rows: repeat(3, auto);
		grid-auto-columns: minmax(140px, max-content);
		justify-items: start;
		column-gap: 44px;
		row-gap: 14px;
		padding: 22px 28px;
	}

	#header .tw-nav__item--mega > .tw-nav__sub:has(> li:nth-child(13)) {
		grid-template-rows: repeat(4, auto);
	}

	#header .tw-nav__item--mega > .tw-nav__sub a {
		text-align: left;
	}
}

@media (min-width: 1600px) {
	#header .tw-nav__list > li > a,
	#header .tw-nav__sub a {
		font-size: 18px;
	}
}

@media (prefers-reduced-motion: reduce) {
	#header .tw-nav__sub,
	#header .tw-nav__list > li:hover > .tw-nav__sub,
	#header .tw-nav__list > li:focus-within > .tw-nav__sub,
	#header .tw-nav__list > li.is-open > .tw-nav__sub {
		transition: none;
	}
}