/*
 * MindMonks — header fixes
 *
 * Scoped to the site header and the mobile drawer. Lives here rather than in
 * the theme so the theme stays byte-identical to the approved local build.
 *
 * Loaded site-wide, but every selector is confined to .mm-nav__list or
 * .mm-mobile-nav__list, so nothing outside the navigation can be affected.
 */

/* --------------------------------------------------------------------------
   Remove the filled green background from navigation items

   components.css paints `background: var(--mm-primary-soft)` — which resolves
   to --mm-teal-100, #dceae3 — on the hovered item and on all five WordPress
   "current" classes, in both the desktop bar and the mobile drawer.

   Only the background is removed. The approved active treatment the theme
   already ships is left completely intact:

     • colour        — var(--mm-teal-900) on the current item
     • weight        — var(--mm-weight-semibold) on the current item
     • underline     — .mm-nav__list > li > a::after, scaleX(1) when current
     • side marker   — border-left: 3px solid var(--mm-secondary) in the drawer

   No new navigation style is introduced.

   The `li` in each selector raises specificity by one element over the theme's
   own rule, so this wins on merit rather than with !important.
   -------------------------------------------------------------------------- */

/* Desktop navigation — hover, focus, active, and every current-page state */
.mm-nav__list li > a:hover,
.mm-nav__list li > a:focus,
.mm-nav__list li > a:focus-visible,
.mm-nav__list li > a:active,
.mm-nav__list li.current-menu-item > a,
.mm-nav__list li.current_page_item > a,
.mm-nav__list li.current-menu-ancestor > a,
.mm-nav__list li.current-page-ancestor > a,
.mm-nav__list li.current-menu-parent > a,
.mm-nav__list li.current-menu-item > a:hover,
.mm-nav__list li.current_page_item > a:hover,
.mm-nav__list li.current-menu-ancestor > a:hover,
.mm-nav__list li.current-page-ancestor > a:hover,
.mm-nav__list li.current-menu-parent > a:hover {
	background: transparent;
}

/* Dropdown items inside the desktop navigation */
.mm-nav__list .sub-menu li > a:hover,
.mm-nav__list .sub-menu li > a:focus,
.mm-nav__list .sub-menu li > a:focus-visible,
.mm-nav__list .sub-menu li > a:active,
.mm-nav__list .sub-menu li.current-menu-item > a,
.mm-nav__list .sub-menu li.current_page_item > a,
.mm-nav__list .sub-menu li.current-menu-ancestor > a,
.mm-nav__list .sub-menu li.current-page-ancestor > a,
.mm-nav__list .sub-menu li.current-menu-parent > a {
	background: transparent;
}

/* Mobile drawer — same states. The 3px olive side marker is left in place. */
.mm-mobile-nav__list li > a:hover,
.mm-mobile-nav__list li > a:focus,
.mm-mobile-nav__list li > a:focus-visible,
.mm-mobile-nav__list li > a:active,
.mm-mobile-nav__list li.current-menu-item > a,
.mm-mobile-nav__list li.current_page_item > a,
.mm-mobile-nav__list li.current-menu-ancestor > a,
.mm-mobile-nav__list li.current-page-ancestor > a,
.mm-mobile-nav__list li.current-menu-parent > a,
.mm-mobile-nav__list li.current-menu-item > a:hover,
.mm-mobile-nav__list li.current_page_item > a:hover,
.mm-mobile-nav__list li.current-menu-ancestor > a:hover,
.mm-mobile-nav__list li.current-page-ancestor > a:hover,
.mm-mobile-nav__list li.current-menu-parent > a:hover {
	background: transparent;
}

/* Keyboard focus must still be visible now that the tinted plate is gone. */
.mm-nav__list li > a:focus-visible,
.mm-mobile-nav__list li > a:focus-visible {
	outline: 2px solid var(--mm-teal-600);
	outline-offset: 2px;
}


/* --------------------------------------------------------------------------
   Homepage: close the tonal seam under the header

   .mm-site-header is sticky and in normal flow, so on the front page it still
   consumes ~66px of layout before .mm-hero begins. The theme makes it
   transparent there (body.mm-has-hero ... :not(.is-stuck)), which means that
   band paints the BODY background -- --mm-neutral-050, #faf8f2 -- while the
   hero gradient below it starts at --mm-neutral-025, #fdfcf8. The step between
   the two reads as a strip sitting above the page content.

   The theme's own comment says the header should "start as part of that hero",
   so painting it the hero's own first gradient stop is the stated intent, not a
   new treatment. Doing it on the header rather than on .mm-hero is deliberate:
   pulling the hero up under the header with a negative margin would grow the
   .mm-hero box, and .mm-hero is the positioning context for three
   percentage-derived .mm-hero__glow layers -- they would move, changing the
   approved hero composition. Nothing about the hero's box is touched here.

   Scoped to .mm-has-hero, which inc/setup.php adds on the front page only.
   The `html` raises specificity one element over the theme rule, so this wins
   on merit rather than with !important. .is-stuck is excluded, so the frosted
   plate on scroll is unchanged.
   -------------------------------------------------------------------------- */

html body.mm-has-hero .mm-site-header:not(.is-stuck) {
	background-color: var(--mm-neutral-025);
}


/* --------------------------------------------------------------------------
   Logged-in phones: 46px gap above the sticky header once you scroll

   The theme's wp.css offsets the sticky header so it cannot hide under the
   admin bar:

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

   That is correct while the admin bar is fixed. But WordPress core sets
   #wpadminbar { position: absolute } at max-width 600px, so on a phone the bar
   scrolls away with the document. The header then sticks 46px down from the
   viewport top against a bar that is no longer there, and the gap shows the
   page scrolling past underneath it.

   Unscrolled the header still looks correct -- html carries the admin bar's
   46px margin-top, so its resting position is unchanged -- which is why a
   static check does not catch this. The defect is scroll-only.

   601-782px is left alone: the bar is genuinely fixed at 46px there, and
   >=783px keeps the theme's 32px. Only the range where core switches to
   absolute is corrected. The `html` raises specificity one element over the
   theme rule, so this wins on merit rather than with !important.
   -------------------------------------------------------------------------- */

@media screen and (max-width: 600px) {
	html body.admin-bar .mm-site-header {
		top: 0;
	}
}


/* ---------------------------------------------------------------
   Nav item badges -- olive for Expert Opinion, purple for Self assessment
   Desktop: absolute pill floating top-right of the link text.
   Mobile drawer: inline pill beside the text.
--------------------------------------------------------------- */

/* Desktop: anchor the <a> so the badge can float */
@media (min-width: 64rem) {
	.mm-nav__list a {
		position: relative;
	}
	.mm-nav-badge {
		position: absolute;
		top: -0.55em;
		right: -0.4em;
	}
}

/* Shared styles -- all widths */
.mm-nav-badge {
	display: inline-flex;
	align-items: center;
	padding: 2px 7px;
	border-radius: 999px;
	font-family: var(--mm-font-body, Inter, sans-serif);
	font-size: 0.6rem;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 0.03em;
	white-space: nowrap;
	pointer-events: none;
	z-index: 1;
}

/* Mobile drawer: inline, with a small left gap */
@media (max-width: 63.999rem) {
	.mm-nav-badge {
		position: static;
		margin-left: 0.4em;
		vertical-align: middle;
	}
}

/* Olive -- Expert Opinion */
.mm-nav-badge--olive {
	background: var(--mm-secondary, #636D00);
	color: #fff;
}

/* Purple -- Self assessment (Free) */
.mm-nav-badge--teal {
	background: var(--mm-accent, #5D0073);
	color: #fff;
}

/* Visible even on active nav items */
.mm-nav__list li.current-menu-item .mm-nav-badge,
.mm-nav__list li.current_page_item .mm-nav-badge {
	opacity: 1;
}


/* --------------------------------------------------------------------------
   Condition cards - click only, on every device

   The theme opened a card description from three separate triggers:
     :hover          (pointer devices)
     :focus-within   (any device)
     .is-open        (the click toggle in main.js)

   Only the click toggle is wanted. Hover revealed panels nobody asked for,
   and :focus-within reopened a panel the instant main.js removed .is-open,
   because a tap or click leaves focus on the card button - which is why
   clicking an open card again appeared to do nothing.
   -------------------------------------------------------------------------- */

.mm-condition-card-wrap:hover .mm-condition-card__panel,
.mm-condition-card-wrap:focus-within .mm-condition-card__panel {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

.mm-condition-card-wrap.is-open .mm-condition-card__panel,
.mm-condition-card-wrap.is-open:hover .mm-condition-card__panel,
.mm-condition-card-wrap.is-open:focus-within .mm-condition-card__panel {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

/* The sign follows the open state alone. The theme also collapsed the bar on
   :hover, leaving a closed card showing a minus - on touch because :hover
   sticks after a tap, on desktop because the pointer is still over the card. */
.mm-condition-card:hover .mm-condition-card__sign::after {
	transform: rotate(90deg);
}

.mm-condition-card[aria-expanded="true"] .mm-condition-card__sign::after {
	transform: rotate(90deg) scaleX(0.001);
}

/* --------------------------------------------------------------------------
   Panel sits inline under its own card on narrow screens
   -------------------------------------------------------------------------- */

@media (max-width: 47.99em) {
	/* The grid stretches its items to the tallest in the row, and the card is
	   height:100% inside that. With the panel now in normal flow, those two
	   together squeeze the panel out of the box it was meant to grow. Let the
	   row size to its content and the card size to itself. */
	[data-mm-condition-group] {
		align-items: start;
	}

	.mm-condition-card-wrap {
		display: block;
		height: auto;
	}

	.mm-condition-card {
		height: auto;
	}

	.mm-condition-card__panel,
	.mm-condition-card__panel[data-place="above"] {
		position: static !important;
		top: auto !important;
		right: auto !important;
		bottom: auto !important;
		left: auto !important;
		width: 100% !important;
		max-width: 100% !important;
		margin-top: 0 !important;
		transform: none !important;
		max-height: 0;
		padding-top: 0;
		padding-bottom: 0;
		border-width: 0;
		overflow: hidden;
	}

	.mm-condition-card__panel::before,
	.mm-condition-card__panel[data-place="above"]::before { display: none !important; }

	.mm-condition-card-wrap.is-open .mm-condition-card__panel,
	.mm-condition-card-wrap.is-open .mm-condition-card__panel[data-place="above"] {
		max-height: 25rem;
		margin-top: 0.5rem !important;
		padding-top: var(--mm-space-sm);
		padding-bottom: var(--mm-space-sm);
		border-width: 1px;
	}
}

/* --------------------------------------------------------------------------
   Condition cards - mobile presentation

   With the panel now in normal flow, the card and its description should read
   as one object rather than two stacked boxes. When a card is open its lower
   corners square off and the panel carries the matching lower radius, so the
   pair shares a single silhouette and one shadow. The panel sits on the teal
   tint with an olive rule down its edge, echoing the section eyebrows.

   Tokens only - no raw colours, radii, shadows or type sizes, so this passes
   the same audit the theme holds itself to.
   -------------------------------------------------------------------------- */

@media (max-width: 47.99em) {
	.mm-condition-card-wrap.is-open {
		border-radius: var(--mm-radius-md);
		box-shadow: var(--mm-shadow-md);
	}

	/* The card keeps its own top corners; the bottom pair squares off so the
	   panel can continue the same shape below it. */
	.mm-condition-card-wrap.is-open .mm-condition-card {
		border-bottom-left-radius: 0;
		border-bottom-right-radius: 0;
		border-bottom-color: transparent;
		border-color: var(--mm-teal-200);
		background: var(--mm-surface);
		box-shadow: none;
		transform: none;
	}

	.mm-condition-card-wrap.is-open .mm-condition-card__name {
		color: var(--mm-teal-800);
		font-weight: var(--mm-weight-semibold);
	}

	.mm-condition-card-wrap.is-open .mm-condition-card__panel {
		margin-top: 0 !important;
		padding: var(--mm-space-sm);
		padding-left: calc(var(--mm-space-sm) + var(--mm-space-3xs));
		background: var(--mm-surface-muted);
		border: 1px solid var(--mm-teal-200);
		border-top: 0;
		border-left: 3px solid var(--mm-olive-600);
		border-radius: 0 0 var(--mm-radius-md) var(--mm-radius-md);
		box-shadow: none;
		max-height: 25rem;
	}

	.mm-condition-card-wrap.is-open .mm-condition-card__text {
		font-size: var(--mm-text-sm);
		line-height: var(--mm-leading-relaxed);
		color: var(--mm-text-secondary);
	}

	/* The dot and sign carry the open state rather than a colour change alone. */
	.mm-condition-card-wrap.is-open .mm-condition-card__dot {
		background: var(--mm-teal-600);
	}

	.mm-condition-card-wrap.is-open .mm-condition-card__sign::before {
		background: var(--mm-teal-600);
	}
}

/* --------------------------------------------------------------------------
   Condition cards - no hover state at all

   The theme tints the card, shifts its border and lifts it on :hover. Two
   problems with that here:

     - on touch, :hover is applied on tap and not cleared until something
       else is tapped, so the last card touched stayed tinted while scrolling;
     - with a real pointer, cards tint one after another as the page scrolls
       underneath the cursor, which reads as cards highlighting themselves.

   The card is a disclosure control, so the only state worth showing is open
   or closed. Hover is dropped on every device and .is-open carries the teal
   treatment alone - a tinted card now means exactly one thing.

   :focus-visible is deliberately untouched, so keyboard users keep a visible
   focus ring.
   -------------------------------------------------------------------------- */

.mm-condition-card:hover {
	border-color: var(--mm-border);
	background: var(--mm-surface);
	color: var(--mm-text-primary);
	transform: none;
	box-shadow: none;
}

.mm-condition-card:hover .mm-condition-card__dot {
	transform: none;
}

/* The open card keeps its own treatment, hovered or not. */
.mm-condition-card-wrap.is-open .mm-condition-card,
.mm-condition-card-wrap.is-open .mm-condition-card:hover {
	border-color: var(--mm-teal-600);
	background: var(--mm-surface);
	box-shadow: var(--mm-shadow-sm);
}

.mm-condition-card-wrap.is-open .mm-condition-card__dot,
.mm-condition-card-wrap.is-open .mm-condition-card:hover .mm-condition-card__dot {
	background: var(--mm-teal-600);
	transform: scale(1.35);
}

/* On mobile the open card and its panel share one silhouette, so the card
   itself carries no shadow and its lower edge opens into the panel. Restated
   after the hover reset above, which would otherwise win on source order. */
@media (max-width: 47.99em) {
	.mm-condition-card-wrap.is-open .mm-condition-card,
	.mm-condition-card-wrap.is-open .mm-condition-card:hover {
		border-color: var(--mm-teal-200);
		border-bottom-color: transparent;
		border-bottom-left-radius: 0;
		border-bottom-right-radius: 0;
		box-shadow: none;
	}
}

/* --------------------------------------------------------------------------
   Remove mobile tap highlight

   Browsers (especially WebKit/Blink on Android and iOS) paint a translucent
   blue rectangle over any tappable element on touchstart. This removes it
   site-wide so buttons, links and cards show no flash on tap.
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
	-webkit-tap-highlight-color: transparent;
}