/* Recipes nav dropdown — the design handoff option 4a
   Full file header, design notes and per-rule rationale: docs/design/css-rationale/taf-dropdown.css.md */

/* #taf-recipes-panel[hidden], #taf-recipes-scrim[hidden] — rationale: docs/design/css-rationale/taf-dropdown.css.md#taf-recipes-panel-hidden-taf-recipes-scrim-hidden */
#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) {

	/* #site-navigation .taf-dd-trigger ul.sub-menu — rationale: docs/design/css-rationale/taf-dropdown.css.md#site-navigation-taf-dd-trigger-ul-sub-menu */

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

	/* #site-navigation .taf-dd-trigger > a .dropdown-nav-toggle… — rationale: docs/design/css-rationale/taf-dropdown.css.md#site-navigation-taf-dd-trigger-a-dropdown-nav-toggle-site-na */
	#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);
	}

	/* #taf-recipes-scrim — rationale: docs/design/css-rationale/taf-dropdown.css.md#taf-recipes-scrim */
	#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);
	}

	/* #taf-recipes-panel — rationale: docs/design/css-rationale/taf-dropdown.css.md#taf-recipes-panel */
	#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;
	}
}

/* @media (min-width: 1025px) — rationale: docs/design/css-rationale/taf-dropdown.css.md#media-min-width-1025px */
@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; }
}