/**
 * Dr SW Clinics — refined main menu dropdowns
 * -----------------------------------------------------------------------------
 * Adds a clean, class-driven dropdown/mega-menu layout for the simplified main
 * menu (the one where categories link straight through to the FacetWP filters).
 *
 * The original theme only knows how to lay out the OLD menu: it has hard-coded
 * rules for `.has-megadropdown.has-2-columns`, `.has-4-columns`,
 * `.has-5-1-columns` and `.special`, which assume very specific nesting.
 * A menu with a different shape falls back to a single 35rem column with the
 * third level dumped inline — which is why the new menu looks broken.
 *
 * This file introduces its own namespace (`menu-*`) so nothing here touches the
 * old menu. Set the classes per menu item in
 * Appearance → Menus → Screen Options → tick "CSS Classes".
 *
 * CLASSES (top-level items)
 *   menu-panel        REQUIRED. Opts the item into this layout.
 *   menu-cols-2/3/4   Number of columns in the panel (default 1).
 *   menu-align-right  Anchor the panel to the item's right edge (use on the
 *                     last one or two menu items so it can't clip off-screen).
 *   menu-wide         Full-width mega panel instead of a floating box.
 *   menu-flow         For a panel of plain links with NO group headings: flows
 *                     them down newspaper-style columns instead of across a
 *                     grid, so reading order stays vertical. Don't use it on a
 *                     panel that mixes groups and loose links.
 *
 * CLASSES (second-level group items)
 *   menu-split        The group spans 2 columns and its links flow in 2 columns.
 *                     Use on long lists (10+ links).
 *   has-address       Theme class — plain, non-uppercase multi-line address.
 *
 * Everything is desktop-only (>= 52rem). Below that the theme's mobile
 * accordion is left alone apart from two small colour fixes at the bottom.
 */

/* =============================================================================
   DESKTOP
   ========================================================================== */
@media only screen and (min-width: 52rem) {

	/* -------------------------------------------------------------------------
	   1. The panel itself
	   ---------------------------------------------------------------------- */
	#header .navigation ul.menu > li.menu-panel > ul.sub-menu {
		display: grid;
		grid-template-columns: repeat(var(--menu-cols, 1), minmax(11.5rem, 1fr));
		column-gap: 3rem;
		/* Tight by default so a flat list of links doesn't get 2rem between each
		   link; groups add their own breathing room below. */
		row-gap: 0.35rem;
		align-items: start;

		width: -moz-max-content;
		width: max-content;
		min-width: 17rem;
		max-width: min(74rem, calc(100vw - var(--gutter) * 4));

		padding: 1.85rem 2.25rem;
		background: var(--background-base);
		border-top: 1px solid rgba(195, 164, 105, 0.4);
		box-shadow: 0 1.5rem 3rem -1.25rem rgba(0, 0, 0, 0.65);

		left: 50%;
		right: auto;
		transform: translate(-50%, -0.5rem);
		transition-property: opacity, transform;
	}

	#header .navigation ul.menu > li.menu-panel:hover > ul.sub-menu,
	#header .navigation ul.menu > li.menu-panel:focus-within > ul.sub-menu {
		transform: translate(-50%, 0);
	}

	/* Column count ---------------------------------------------------------- */
	#header .navigation ul.menu > li.menu-cols-2 { --menu-cols: 2; }
	#header .navigation ul.menu > li.menu-cols-3 { --menu-cols: 3; }
	#header .navigation ul.menu > li.menu-cols-4 { --menu-cols: 4; }

	/* Right-anchored (stops the last items clipping off the viewport) -------- */
	#header .navigation ul.menu > li.menu-panel.menu-align-right > ul.sub-menu {
		left: auto;
		right: 0;
		transform: translate(0, -0.5rem);
	}

	#header .navigation ul.menu > li.menu-panel.menu-align-right:hover > ul.sub-menu,
	#header .navigation ul.menu > li.menu-panel.menu-align-right:focus-within > ul.sub-menu {
		transform: translate(0, 0);
	}

	/* Full-width mega variant ------------------------------------------------ */
	#header .navigation ul.menu > li.menu-panel.menu-wide {
		position: static;
	}

	#header .navigation ul.menu > li.menu-panel.menu-wide > ul.sub-menu {
		left: 0;
		right: 0;
		width: 100%;
		max-width: none;
		transform: translate(0, -0.5rem);
		/* Keeps the columns aligned with the site container on wide screens. */
		padding-inline: max(var(--gutter) * 2, calc((100% - 84rem) / 2));
	}

	#header .navigation ul.menu > li.menu-panel.menu-wide:hover > ul.sub-menu,
	#header .navigation ul.menu > li.menu-panel.menu-wide:focus-within > ul.sub-menu {
		transform: translate(0, 0);
	}

	/* -------------------------------------------------------------------------
	   2. Second level — group headings
	   The old menu used <span> headings (already gold). The new menu uses real
	   links, which the theme styles like ordinary child links, so headings and
	   links become indistinguishable. This restores the hierarchy.
	   ---------------------------------------------------------------------- */
	/* Space below a whole group, so groups sit apart but plain links stay tight. */
	#header .navigation ul.menu > li.menu-panel > ul.sub-menu > li.has-children {
		margin-block-end: 1.5rem;
	}

	/* A childless item sitting beside real groups (e.g. "Hair" next to
	   Body / Face / Skin) would otherwise float at a different baseline,
	   styled like a child link. :has() lets us detect "this panel has groups"
	   and promote the loner to a clickable heading so the columns line up.
	   Panels made only of plain links (Life Optimisation) are untouched. */
	#header .navigation ul.menu > li.menu-panel > ul.sub-menu > li.has-children > a,
	#header .navigation ul.menu > li.menu-panel > ul.sub-menu > li.has-children > span,
	#header .navigation ul.menu > li.menu-panel > ul.sub-menu:has(> li.has-children) > li:not(.has-children) > a {
		display: block;
		color: var(--color-primary);
		font-size: clamp(0.62rem, calc(0.5rem + 0.24vw), 0.74rem);
		font-weight: var(--font-bolder, 700);
		letter-spacing: 0.2em;
		line-height: 1.3;
		text-transform: uppercase;
		padding: 0 0 0.7em;
		margin-block-end: 0.75em;
		border-bottom: 1px solid rgba(195, 164, 105, 0.25);
	}

	#header .navigation ul.menu > li.menu-panel > ul.sub-menu > li.has-children > a:hover,
	#header .navigation ul.menu > li.menu-panel > ul.sub-menu > li.has-children > a:focus-visible,
	#header .navigation ul.menu > li.menu-panel > ul.sub-menu:has(> li.has-children) > li:not(.has-children) > a:hover,
	#header .navigation ul.menu > li.menu-panel > ul.sub-menu:has(> li.has-children) > li:not(.has-children) > a:focus-visible {
		color: var(--color-white);
		border-bottom-color: rgba(195, 164, 105, 0.6);
	}

	/* Promoted loners must not also pick up the child-link hover shift. */
	#header .navigation ul.menu > li.menu-panel > ul.sub-menu:has(> li.has-children) > li:not(.has-children) > a:hover {
		transform: none;
	}

	/* No carets inside a panel — the columns already show the structure. */
	#header .navigation ul.menu > li.menu-panel .has-children > a:after,
	#header .navigation ul.menu > li.menu-panel .has-children > span:after {
		content: none;
	}

	/* -------------------------------------------------------------------------
	   3. Third level — the link lists
	   ---------------------------------------------------------------------- */
	#header .navigation ul.menu > li.menu-panel ul.sub-menu ul.sub-menu {
		display: grid;
		gap: 0.05rem;
		padding-inline-start: 0;
	}

	#header .navigation ul.menu > li.menu-panel ul.sub-menu li > a {
		position: relative;
		color: var(--color-white);
		font-size: clamp(0.66rem, calc(0.55rem + 0.22vw), 0.8rem);
		font-weight: var(--font-medium, 500);
		letter-spacing: 0.055em;
		line-height: 1.4;
		text-transform: none;
		padding: 0.42em 0;
		transition-property: color, transform;
	}

	#header .navigation ul.menu > li.menu-panel ul.sub-menu li > a:hover,
	#header .navigation ul.menu > li.menu-panel ul.sub-menu li > a:focus-visible {
		color: var(--color-primary);
		transform: translateX(0.25rem);
	}

	/* Small gold tick that slides in on hover. */
	#header .navigation ul.menu > li.menu-panel ul.sub-menu ul.sub-menu li > a:before {
		content: "";
		position: absolute;
		left: -0.8rem;
		top: 50%;
		width: 0.4rem;
		height: 1px;
		background: var(--color-primary);
		opacity: 0;
		transform: translateY(-50%);
		transition-property: opacity;
	}

	#header .navigation ul.menu > li.menu-panel ul.sub-menu ul.sub-menu li > a:hover:before,
	#header .navigation ul.menu > li.menu-panel ul.sub-menu ul.sub-menu li > a:focus-visible:before {
		opacity: 1;
	}

	/* A second-level item with no children (a standalone link in the panel)
	   sits level with the group headings, so give it a matching rhythm. */
	#header .navigation ul.menu > li.menu-panel > ul.sub-menu > li:not(.has-children) > a {
		padding-block: 0.3em;
	}

	/* -------------------------------------------------------------------------
	   3b. "Flow" mode — for panels that mix groups with loose standalone links
	   A strict grid gives one cell per child, so a tall group in row 1 pushes
	   everything in row 2 far down the panel. Flow mode uses CSS columns
	   instead: children pack into balanced columns and groups are kept whole.
	   ---------------------------------------------------------------------- */
	#header .navigation ul.menu > li.menu-panel.menu-flow > ul.sub-menu {
		display: block;
		column-count: var(--menu-cols, 3);
		column-gap: 3rem;
	}

	#header .navigation ul.menu > li.menu-panel.menu-flow > ul.sub-menu > li {
		-webkit-column-break-inside: avoid;
		page-break-inside: avoid;
		break-inside: avoid;
	}

	/* Loose links pack together; groups keep their gap below. */
	#header .navigation ul.menu > li.menu-panel.menu-flow > ul.sub-menu > li:not(.has-children) {
		margin-block-end: 0;
	}

	/* -------------------------------------------------------------------------
	   4. Long groups — split the links into two columns
	   ---------------------------------------------------------------------- */
	#header .navigation ul.menu > li.menu-panel > ul.sub-menu > li.menu-split {
		grid-column: span 2;
	}

	#header .navigation ul.menu > li.menu-panel > ul.sub-menu > li.menu-split > ul.sub-menu {
		grid-template-columns: repeat(2, minmax(9.5rem, 1fr));
		column-gap: 3rem;
	}

	/* -------------------------------------------------------------------------
	   4b. Text-only items inside a group
	   A menu item with no URL is rendered as a <span> (the theme's convention
	   for headings) and theme.css paints every .sub-menu span gold. Inside a
	   group's link list that's wrong — an email address or phone number is a
	   line of information, not a heading. Restore normal link styling.
	   ---------------------------------------------------------------------- */
	#header .navigation ul.menu > li.menu-panel ul.sub-menu ul.sub-menu > li:not(.has-children):not(.has-address) > span {
		color: var(--color-white);
		font-size: clamp(0.66rem, calc(0.55rem + 0.22vw), 0.8rem);
		font-weight: var(--font-medium, 500);
		letter-spacing: 0.055em;
		line-height: 1.4;
		text-transform: none;
		padding: 0.42em 0;
	}

	/* -------------------------------------------------------------------------
	   5. Plain text items (address, opening hours…)
	   ---------------------------------------------------------------------- */
	#header .navigation ul.menu > li.menu-panel li.has-address > span {
		color: var(--color-white);
		font-size: clamp(0.66rem, calc(0.55rem + 0.22vw), 0.8rem);
		font-weight: var(--font-medium, 500);
		letter-spacing: 0.055em;
		line-height: 1.65;
		text-transform: none;
		padding: 0.42em 0;
	}
}

/* =============================================================================
   NARROW DESKTOPS / TABLETS (52rem – 78rem)
   A centred 3 or 4 column panel can run off the right edge on smaller laptops,
   so those panels drop to the full-width variant. They then physically cannot
   clip, whichever menu item they belong to.
   ========================================================================== */
@media only screen and (min-width: 52rem) and (max-width: 78rem) {

	#header .navigation ul.menu > li.menu-panel.menu-cols-3,
	#header .navigation ul.menu > li.menu-panel.menu-cols-4 {
		position: static;
	}

	#header .navigation ul.menu > li.menu-panel.menu-cols-3 > ul.sub-menu,
	#header .navigation ul.menu > li.menu-panel.menu-cols-4 > ul.sub-menu {
		left: 0;
		right: 0;
		width: 100%;
		max-width: none;
		column-gap: 2rem;
		padding-inline: calc(var(--gutter) * 2);
		transform: translate(0, -0.5rem);
	}

	#header .navigation ul.menu > li.menu-panel.menu-cols-3:hover > ul.sub-menu,
	#header .navigation ul.menu > li.menu-panel.menu-cols-3:focus-within > ul.sub-menu,
	#header .navigation ul.menu > li.menu-panel.menu-cols-4:hover > ul.sub-menu,
	#header .navigation ul.menu > li.menu-panel.menu-cols-4:focus-within > ul.sub-menu {
		transform: translate(0, 0);
	}
}

/* =============================================================================
   MOBILE — keep the theme's accordion, just fix the hierarchy colours
   ========================================================================== */
@media only screen and (max-width: 51.999rem) {

	/* The theme puts a 1em gap between every level of the accordion, which on a
	   phone leaves the open section looking scattered. Tighten the link lists
	   and keep the breathing room between groups instead. */
	#header .navigation ul.menu > li.menu-panel.is-open > ul.sub-menu {
		gap: 0.9em;
	}

	#header .navigation ul.menu > li.menu-panel ul.sub-menu ul.sub-menu {
		gap: 0;
	}

	#header .navigation ul.menu > li.menu-panel ul.sub-menu a,
	#header .navigation ul.menu > li.menu-panel ul.sub-menu span {
		padding-block: 0.4em;
	}

	#header .navigation ul.menu > li.menu-panel ul.sub-menu > li.has-children > a {
		color: var(--color-primary);
		font-size: clamp(0.62rem, calc(0.5rem + 0.24vw), 0.74rem);
		letter-spacing: 0.2em;
		text-transform: uppercase;
	}

	#header .navigation ul.menu > li.menu-panel li.has-address > span {
		color: var(--color-white);
		line-height: 1.65;
		text-transform: none;
	}

	#header .navigation ul.menu > li.menu-panel ul.sub-menu ul.sub-menu > li:not(.has-children) > span {
		color: var(--color-white);
		text-transform: none;
	}
}