/* ==========================================================================
   Recipes nav dropdown — the design handoff option 4a
   Owned by the dropdown build unit (with inc/nav-dropdown.php +
   assets/js/taf-dropdown.js). Desktop Kadence nav (>= 1025px) ONLY; the
   mobile drawer keeps Kadence's default sub-menu (one menu serves both the
   `primary` and `mobile` locations, so every trigger rule below is scoped
   to the desktop nav element, #site-navigation).

   THE TRIGGER IS `.taf-dd-trigger`, NOT A MENU-ITEM ID. inc/nav-dropdown.php
   stamps that class on whichever `primary` item points at /recipe-index/.
   These rules used to be keyed on `#menu-item-<id>`, which is a POST id: a
   menu import mints fresh ids, so the selectors silently stopped matching the
   moment the menu was re-imported and Kadence's stock 18-link sub-menu dropped
   down instead.
   The `#site-navigation` prefix is load-bearing, and not just as scope — it
   carries the ID that the old `#menu-item-<id>` contributed, so every rule
   below keeps exactly the specificity it had (one id + the same classes). That
   matters most for the open-state color further down, which has to outrank the
   top-level nav color rule in main.css (0,4,3) and the one Kadence prints
   inline (0,3,3); a plain `.taf-dd-trigger` would score 0,3,1 and lose to both,
   repainting the open trigger chocolate.
   Canonical values from the handoff tokens: paper #FFFFFF, cream #FAEDF2,
   chocolate #33202B, cocoa #6E5964, rose #E11584, rose-deep #B80E67,
   rose-link #D01277, line #F0DEE6, radius 8/6, shadow-hover, speed .15s.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Panel + scrim: hidden by default (and hard-off below the desktop nav
   breakpoint — the mobile drawer handles categories there).
   -------------------------------------------------------------------------- */
#taf-recipes-panel[hidden],
#taf-recipes-scrim[hidden] {
	display: none !important;
}

@media (max-width: 1024.98px) {
	#taf-recipes-panel,
	#taf-recipes-scrim {
		display: none !important;
	}
}

@media (min-width: 1025px) {

	/* ------------------------------------------------------------------
	   Trigger (the Recipes item in the desktop header nav)
	   ------------------------------------------------------------------ */

	/* Disable Kadence's own sub-menu dropdown for this item only. */
	#site-navigation .taf-dd-trigger ul.sub-menu {
		display: none !important;
	}

	/* Hide Kadence's caret; our Phosphor pair (from nav-dropdown.php)
	   replaces it at a 6px gap. Kadence's screen-reader sub-menu toggle
	   button goes too — it drives the sub-menu we just disabled (our
	   trigger carries the aria-expanded/haspopup semantics instead). */
	#site-navigation .taf-dd-trigger > a .dropdown-nav-toggle,
	#site-navigation .taf-dd-trigger .dropdown-nav-special-toggle {
		display: none;
	}

	#site-navigation .taf-dd-trigger > a .nav-drop-title-wrap {
		display: inline-flex;
		align-items: center;
		gap: var(--space-4);
		/* Keeps the open-state underline 2px below the baseline without a
		   layout shift on open. */
		padding-bottom: var(--space-2);
	}

	#site-navigation .taf-dd-trigger .taf-dd-caret {
		display: inline-flex;
		align-items: center;
	}

	#site-navigation .taf-dd-trigger .taf-dd-caret svg {
		display: block;
	}

	#site-navigation .taf-dd-trigger .taf-dd-caret .taf-dd-icon--caret-up,
	#site-navigation .taf-dd-trigger.taf-dd-open .taf-dd-caret .taf-dd-icon--caret-down {
		display: none;
	}

	#site-navigation .taf-dd-trigger.taf-dd-open .taf-dd-caret .taf-dd-icon--caret-up {
		display: block;
	}

	/* Open state: rose-deep text + 2px rose underline flush under the text. */
	#site-navigation .taf-dd-trigger.taf-dd-open > a,
	#site-navigation .taf-dd-trigger.taf-dd-open > a:hover,
	#site-navigation .taf-dd-trigger.taf-dd-open > a:focus {
		color: var(--rose-deep, #B80E67);
	}

	#site-navigation .taf-dd-trigger.taf-dd-open > a .nav-drop-title-wrap {
		box-shadow: var(--shadow-underline) var(--rose, #E11584);
	}

	/* ------------------------------------------------------------------
	   Scrim: dims the page below the sticky header (#masthead is z-index
	   99, so the header stays bright above it). Top offset set by JS to
	   the header's bottom edge.
	   ------------------------------------------------------------------ */
	#taf-recipes-scrim {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: var(--z-98);
		background: var(--scrim-dropdown);
		opacity: 0;
		transition: opacity var(--dur-15) var(--ease);
	}

	#taf-recipes-scrim.is-open {
		opacity: var(--o-1);
	}

	/* ------------------------------------------------------------------
	   Panel: 560px paper card, above the header (its top edge tucks
	   ~10px under the header's bottom border, as in the mock).
	   Top/left set by JS from the trigger + header geometry.
	   ------------------------------------------------------------------ */
	#taf-recipes-panel {
		position: fixed;
		z-index: var(--z-dropdown);
		width: 560px;
		background: var(--paper, #FFFFFF);
		border: var(--bw-1) solid var(--line, #F0DEE6);
		border-radius: var(--radius, 8px);
		box-shadow: var(--shadow-hover, 0 2px 4px rgba(51, 32, 43, .08), 0 10px 28px -8px var(--scrim-dropdown));
		overflow: hidden;
		/* The menu is all Poppins (handoff `--sans`); on this site Poppins
		   lives in --display (site --sans = Mulish, the body face). */
		font-family: var(--display, 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif);
		opacity: 0;
		transition: opacity var(--dur-15) var(--ease);
	}

	#taf-recipes-panel.is-open {
		opacity: var(--o-1);
	}

	#taf-recipes-panel .taf-dd-inner {
		padding: var(--space-20) var(--space-20) var(--space-16);
	}

	#taf-recipes-panel .taf-dd-eyebrow {
		margin: 0 0 var(--space-12);
		font-family: inherit;
		font-size: var(--fs-12);
		font-weight: var(--w-bold);
		letter-spacing: var(--ls-14em);
		line-height: var(--lh-165);
		text-transform: uppercase;
		color: var(--rose-link, #D01277);
	}

	#taf-recipes-panel .taf-dd-grid {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: var(--space-4);
	}

	#taf-recipes-panel .taf-dd-row {
		display: flex;
		align-items: center;
		gap: var(--space-12);
		padding: var(--space-8) var(--space-8);
		border-radius: var(--radius-sm, 6px);
		background: transparent;
		text-decoration: none;
		color: var(--chocolate, #33202B);
		transition: background var(--dur-15) var(--ease);
	}

	#taf-recipes-panel .taf-dd-row:hover,
	#taf-recipes-panel .taf-dd-row:focus-visible {
		background: var(--cream, #FAEDF2);
		color: var(--chocolate, #33202B);
	}

	#taf-recipes-panel .taf-dd-thumb {
		flex: none;
		display: block;
		width: 44px;
		height: 44px;
		border-radius: var(--radius-round);
		object-fit: cover;
	}

	#taf-recipes-panel .taf-dd-thumb--empty {
		background: var(--cream, #FAEDF2);
	}

	#taf-recipes-panel .taf-dd-name {
		display: block;
		font-family: inherit;
		font-size: var(--fs-15);
		font-weight: var(--w-bold);
		line-height: var(--lh-165);
	}


	/* ------------------------------------------------------------------
	   Footer band
	   ------------------------------------------------------------------ */
	#taf-recipes-panel .taf-dd-foot {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: var(--space-12) var(--space-20);
		background: var(--cream, #FAEDF2);
	}

	#taf-recipes-panel .taf-dd-stat {
		font-family: inherit;
		font-size: var(--fs-15);
		font-weight: var(--w-bold);
		line-height: var(--lh-165);
		color: var(--cocoa, #6E5964);
	}

	#taf-recipes-panel .taf-dd-index {
		display: inline-flex;
		align-items: center;
		gap: var(--space-4);
		font-family: inherit;
		font-size: var(--fs-15);
		font-weight: var(--w-bold);
		line-height: var(--lh-165);
		color: var(--rose-link, #D01277);
		text-decoration: underline;
		text-underline-offset: 3px;
		transition: color var(--dur-15) var(--ease);
	}

	#taf-recipes-panel .taf-dd-index:hover,
	#taf-recipes-panel .taf-dd-index:focus-visible {
		color: var(--rose-deep, #B80E67);
	}

	#taf-recipes-panel .taf-dd-icon {
		flex: none;
	}
}

/* Fade is <= 150ms and background/opacity only; reduced motion kills it. */
@media (prefers-reduced-motion: reduce) {
	#taf-recipes-panel,
	#taf-recipes-scrim,
	#taf-recipes-panel .taf-dd-row,
	#taf-recipes-panel .taf-dd-index {
		transition: none !important;
	}
}

/* ---- Trigger rhythm fixes: Kadence's leftover expand
   iconset (empty inline-flex span) still occupied flex space inside the
   title wrap, stretching the Recipes->Breads text gap to ~52px vs the 18px
   nav rhythm; and the inline-flex wrap floated the label 1px above the
   sibling baselines. ---- */
@media (min-width: 1025px) {
  /* Kadence reserves 1em right-padding in the wrap for its own caret —
     with our caret inline that reservation doubled the trailing gap
     (52px vs the 18px nav rhythm). */
  #site-navigation .taf-dd-trigger .nav-drop-title-wrap { position: relative; top: 1px; padding-right: 0 !important; }
}