/* Dropdown Panel Web Component - Minimal Functional Styles */
/* This file contains ONLY the styles required for functionality. */
/* Visual styling belongs to the consumer, or to the opt-in */
/* dropdown-panel.effects.css. */

dropdown-component {
	display: inline-block;
}

/* Popover panels position against the component itself */
dropdown-component:has(> dropdown-panel:not([wide])) {
	position: relative;
}

/* Wide (mega menu) panels intentionally position against the nearest
   positioned ANCESTOR rather than the component, so they can span a
   whole nav bar. That ancestor is the consumer's responsibility: give
   the wrapper the panel should span `position: relative`. With no
   positioned ancestor, `top: 100%` resolves against the initial
   containing block and the panel lands a viewport-height below the
   fold. */
dropdown-component:has(> dropdown-panel[wide]) {
	position: static;
}

dropdown-trigger {
	position: relative;
	cursor: pointer;
	user-select: none;
}

/* Hover bridge - an invisible but hit-testable shape that keeps the
   pointer "inside" the component while it travels from the trigger to
   the panel.

   Only rendered while the component is hovered. Rendering it for a shown
   panel the pointer has already left would leave an invisible strip
   sitting over the neighbouring nav item. Gated on (hover: hover) so
   iOS sticky hover cannot strand it over a neighbour after a tap. */
@media (hover: hover) {
	/* Vertical bridge for downward-opening panels (default) */
	dropdown-component:hover > dropdown-trigger::before {
		content: '';
		position: absolute;
		left: -20px;
		top: 50%;
		width: calc(100% + 40px);
		height: 30px;
		transform-origin: top center;
		transform: perspective(50px) rotateX(50deg);
		z-index: 10;
	}

	/* Horizontal bridge for right-opening panels */
	dropdown-component:has(> dropdown-panel[opens='right']):hover
		> dropdown-trigger::before {
		left: calc(100% - 30px);
		top: -10px;
		width: 40px;
		height: calc(100% + 20px);
		transform-origin: center left;
		transform: perspective(50px) rotateY(-50deg);
	}
}

/* Default panel positioning (popover style - opens downward).

   z-index sits above the hover bridge (10) so an unstyled panel does not
   have the top strip of its first item eaten by the bridge.

   There is deliberately no `visibility` here. It would have to be
   transitioned to survive a fade-out, and any consumer writing
   `transition: opacity 300ms` resets the whole shorthand and silently
   kills that transition, snapping the panel away mid-fade. Hit-testing
   is handled by `pointer-events`, assistive tech by `aria-hidden`, and
   tab order / find-in-page by `inert` - all set by the component. For
   the same reason the transition below uses longhands, so a consumer
   overriding one property does not have to restate the rest. */
dropdown-panel {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 11;
	opacity: 0;
	pointer-events: none;
	transition-property: opacity;
	transition-duration: 200ms;
	transition-timing-function: ease-out;
}

/* Horizontal alignment of a downward panel against its trigger.
   `start` is the existing default, written out only so the attribute
   reads symmetrically.

   Both are excluded from opens="right" panels, which are positioned by
   `left: 100%`: a competing `right: 0` would constrain both edges and
   stretch the panel across the viewport rather than align it. */
dropdown-panel:not([opens='right'])[align='start'] {
	left: 0;
	right: auto;
}

dropdown-panel:not([opens='right'])[align='end'] {
	left: auto;
	right: 0;
}

/* Set by the component on an opt-in `flip` panel that would otherwise
   run past the bottom of the viewport. Measured once per open.

   Same exclusion, vertical axis: an opens="right" panel is anchored by
   `top: 0`, so `bottom: 100%` would constrain both edges and collapse it
   to a sliver. #applyFlip() also refuses to set the attribute there. */
dropdown-panel:not([opens='right'])[flipped] {
	top: auto;
	bottom: 100%;
}

/* Right-opening panel positioning (for nested menus) */
dropdown-panel[opens='right'] {
	top: 0;
	left: 100%;
}

/* Wide panel variant (full-width mega menu style) */
dropdown-panel[wide] {
	width: 100%;
}

/* Shown state - derived from the `visible` attribute on the host */
dropdown-panel[aria-hidden='false'] {
	opacity: 1;
	pointer-events: auto;
}

/*# sourceMappingURL=dropdown-panel.css.map */