/* Desktop header "More" disclosure (markup: lib/more-menu.php, script: assets/js/more-menu.js).
   The bar is hidden by the parent below 1025px, which hides More with it, so the
   drawer keeps listing every item. Colours and sizes are the site's tokens; gold
   appears once (the current-page underline on the trigger, same as any bar item). */

@media (min-width: 1025px) {
	/* Let the panel measure from the header, not from the bar. */
	.site-header .main-navigation { position: static; }
	.site-header .main-navigation > ul > li.abs-nav-more { position: static; }
	/* The parent's hover corner brackets belong to links, not to this control. */
	.site-header .main-navigation > ul > li.abs-nav-more::before,
	.site-header .main-navigation > ul > li.abs-nav-more::after { display: none; }

	.abs-nav-more__trigger {
		display: flex;
		align-items: center;
		gap: .5rem;
		padding: 1rem 1.5rem;
		border: 0;
		border-radius: 0;
		background: transparent;
		color: var(--abs-ink);
		font: inherit;
		font-weight: 500;
		text-transform: none; /* the parent sets buttons in caps; this reads like its neighbours */
		letter-spacing: inherit;
		cursor: pointer;
	}
	/* A small drawn chevron: the only sign that this one opens. */
	.abs-nav-more__trigger::after {
		content: "";
		width: .4rem;
		height: .4rem;
		border-right: 1.5px solid currentColor;
		border-bottom: 1.5px solid currentColor;
		transform: translateY(-.1rem) rotate(45deg);
	}
	.abs-nav-more__trigger[aria-expanded="true"]::after { transform: translateY(.1rem) rotate(225deg); }
	/* The parent paints every button gold with a shadow on hover and focus; this one stays
	   ink with no fill. Open shows a thin ink underline; gold stays reserved for the page
	   you're on, so the header never carries two gold moments. */
	html .site-header .abs-nav-more__trigger:is(:hover, :focus, :active, [aria-expanded="true"]) {
		color: var(--abs-ink);
		background: transparent;
		box-shadow: none;
	}
	html .site-header .abs-nav-more__trigger[aria-expanded="true"] { box-shadow: inset 0 -1px 0 var(--abs-ink); }
	/* The page you are on is inside More: underline the trigger like any bar item. */
	html .site-header .abs-nav-more--current > .abs-nav-more__trigger,
	html .site-header .abs-nav-more--current > .abs-nav-more__trigger:is(:hover, :focus, :active, [aria-expanded="true"]) {
		color: var(--abs-lit);
		box-shadow: inset 0 -2px 0 var(--wp--preset--color--primary, #FFB81C);
	}

	.abs-nav-more__panel {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		z-index: 1000;
		background: var(--abs-paper);
		border-bottom: 1px solid var(--abs-rule);
	}
	.abs-nav-more__panel[hidden] { display: none; }

	.abs-nav-more__inner {
		position: relative;
		display: grid;
		grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
		gap: 2rem 3rem;
		max-width: 1440px;
		margin: 0 auto;
		padding: 2rem 1rem 2.25rem;
	}

	/* The blueprint line: a rule is drawn across, ticks appear along it, then the items arrive. */
	.abs-nav-more__rule,
	.abs-nav-more__ticks {
		position: absolute;
		left: 1rem;
		right: 1rem;
		pointer-events: none;
	}
	.abs-nav-more__rule {
		top: 0;
		height: 1px;
		background: var(--abs-line);
		transform-origin: left center;
		animation: abs-more-draw .45s cubic-bezier(.2, .7, .2, 1) both;
	}
	.abs-nav-more__ticks {
		top: 1px;
		height: 10px;
		background:
			linear-gradient(var(--abs-line), var(--abs-line)) 0 0 / 1px 10px,
			repeating-linear-gradient(90deg, var(--abs-line) 0 1px, transparent 1px 80px) 0 0 / 100% 10px no-repeat,
			repeating-linear-gradient(90deg, var(--abs-line) 0 1px, transparent 1px 16px) 0 0 / 100% 5px no-repeat;
		background-repeat: no-repeat;
		animation: abs-more-ticks .4s .2s linear both;
	}

	/* Two classes beat the parent's `.site-header .main-navigation ul` flex row. */
	.site-header .main-navigation .abs-nav-more__list {
		display: grid;
		justify-content: stretch;
		align-items: start;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 1.25rem 3rem;
		margin: 0;
		padding: 0;
		list-style: none;
	}
	.abs-nav-more__item,
	.abs-nav-more__latest { animation: abs-more-in .4s ease both; }
	.abs-nav-more__item:nth-child(1) { animation-delay: .5s; }
	.abs-nav-more__item:nth-child(2) { animation-delay: .58s; }
	.abs-nav-more__item:nth-child(n+3) { animation-delay: .66s; }
	.abs-nav-more__latest { animation-delay: .66s; }
	.abs-nav-more__item { display: flex; flex-direction: column; align-items: flex-start; gap: .25rem; margin: 0; }
	.abs-nav-more__latest { display: flex; flex-direction: column; align-items: flex-start; gap: .25rem; margin: 0; }

	html .site-header .abs-nav-more__panel .abs-nav-more__link {
		display: inline-block;
		padding: .5rem 0;
		background: transparent;
		box-shadow: none;
		color: var(--abs-ink);
		font-size: var(--abs-t-body);
		font-weight: 600;
		line-height: 1.3;
		text-decoration: none;
		white-space: normal;
		max-width: 100%;
	}
	html .site-header .abs-nav-more__panel .abs-nav-more__link:hover,
	html .site-header .abs-nav-more__panel .abs-nav-more__link:focus-visible {
		background: transparent;
		color: var(--abs-ink);
		text-decoration: underline;
		text-underline-offset: .25em;
	}
	html .site-header .abs-nav-more__panel .abs-nav-more__link[aria-current="page"] {
		text-decoration: underline;
		text-underline-offset: .25em;
	}
	.abs-nav-more__note {
		font-size: var(--abs-t-micro);
		line-height: 1.5;
		color: var(--abs-ink-2);
	}

	/* One focus treatment across the site: ink outline, gold ring. */
	html .site-header .abs-nav-more__trigger:focus-visible,
	html .site-header .abs-nav-more--current > .abs-nav-more__trigger:focus-visible,
	html .site-header .abs-nav-more__panel .abs-nav-more__link:focus-visible {
		outline: 2px solid var(--abs-ink);
		outline-offset: 3px;
		box-shadow: 0 0 0 3px var(--abs-accent);
	}
}

@keyframes abs-more-draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes abs-more-ticks { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes abs-more-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
	.abs-nav-more__rule,
	.abs-nav-more__ticks,
	.abs-nav-more__item,
	.abs-nav-more__latest { animation: none; }
}