/* Trigger — the positioned anchor the panel below is placed against
   (position: relative), and stays exactly where the widget was placed.

   These trigger rules are mirrored at :where() (zero) specificity by the
   one-time critical <style> Content_Panel::render() prints, so the button
   never flashes UA/theme chrome on a first load where this file isn't
   render-blocking. Keep the two in sync; the values here carry real
   specificity so they still beat a theme's bare `button` reset. */
.pavo-content-panel-trigger {
	position: relative;
	display: inline-flex;
}

.pavo-content-panel-trigger__button {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 0.6em 1em;
	background: none;
	border: 0;
	cursor: pointer;
	color: inherit;
	font: inherit;
	line-height: 1;
	transition: color 0.2s ease, background-color 0.2s ease;
}

/* Fixed 1em square box (= the icon's own font-size) with the glyph
   centered, so the default and close icons — often from two different
   icon fonts with different glyph advance widths (e.g. Font Awesome
   `fa-equals` vs a theme icon font's `close`) — occupy exactly the same
   space and the button never changes width when they swap on open/close. */
.pavo-content-panel-trigger__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 1em;
	height: 1em;
	font-size: 1.1em;
	line-height: 1;
}

/* Trigger Close Icon (optional): both icons render in the DOM at the same
   spot — swapped purely via the trigger's own `aria-expanded` attribute
   (already kept correct by content-panel.js for accessibility regardless
   of whether this feature is used), no extra JS state needed. The whole
   swap is gated on `--has-close-icon`, a class Content_Panel.php only adds
   when a Trigger Close Icon is actually set: without that gate, hiding
   `--default` on the open state would leave the button icon-less whenever
   no close icon was chosen. The plain single-icon case never matches any
   rule here.

   Qualified with the parent .pavo-content-panel-trigger__button (not a
   bare .pavo-content-panel-trigger__icon--close) on purpose — confirmed
   live that a theme's own icon-font stylesheet can carry a same-
   specificity attribute selector for its own icon classes (e.g.
   `[class*="some-icon-"] { display: inline-block; ... }`, a common
   generic icon-font reset) that loads after this file and would
   otherwise win the tie and keep the close icon visible even when
   closed. Two classes here outweighs that regardless of load order. */
.pavo-content-panel-trigger__button--has-close-icon .pavo-content-panel-trigger__icon--close {
	display: none;
}

.pavo-content-panel-trigger__button--has-close-icon[aria-expanded="true"] .pavo-content-panel-trigger__icon--default {
	display: none;
}

.pavo-content-panel-trigger__button--has-close-icon[aria-expanded="true"] .pavo-content-panel-trigger__icon--close {
	display: inline-flex;
}

/* Hamburger trigger (Trigger Type: Hamburger) — a plain CSS icon, no icon
   font, matching the Aivedo Figma header's own nav-toggle exactly: pulled
   the actual exported SVG for its closed state (Figma file
   lvMGRnIZu1Iu8bG4kVVU6P, node 405-2860) rather than eyeballing a
   screenshot — a 20x9 (not square) viewBox of three 1-unit-thick bars at
   y=[0,1]/[4,5]/[8,9], i.e. a 1:3 thickness:gap ratio with *no* top/bottom
   margin (the first and last bars sit flush with the box's own edges).
   The open-state X (node 406-3355/406-3368) measures out to a bounding
   box of exactly 20*cos(30deg)+1*sin(30deg) by 20*sin(30deg)+1*cos(30deg)
   for a 20-unit bar of the same 1-unit thickness rotated ±30deg — i.e.
   the closed-state bars just rotate in place around the box's own
   vertical center (unit 4.5 of 9, which is exactly where the middle bar
   already sits), not a generic 45deg.

   Sized in `em` on the .hamburger box itself so Icon Size (font-size on
   this element, see the selector in register_style_trigger_controls())
   still scales the whole icon — but every *line*'s own top/height below
   is a percentage of that box, not `em`, and deliberately not a pseudo-
   element either: confirmed live that both are fragile here — `em` on a
   line inherits font-size through whatever the surrounding theme/editor
   CSS happens to cascade there (not reliably the same value the box
   itself resolved to), and a pseudo-element on an absolutely positioned
   line uses *that line's own tiny box* as its containing block, not
   .hamburger's, so its offset needs re-deriving by hand every time any
   other number here changes. Three independent sibling lines positioned
   by % of .hamburger directly (its own definite height, set above) have
   neither problem.

   Three bars while closed, all three real elements (no pseudo) — #1/#3
   collapse to an X by both sliding to the box's vertical center (already
   exactly where #2 sits) and rotating ±30deg; #2 just fades out. Toggled
   purely by the trigger's own `aria-expanded` attribute, already kept
   correct by content-panel.js for accessibility regardless of this
   feature — no extra JS state needed, matching the identical Trigger
   Close Icon swap above. */
.pavo-content-panel-trigger__hamburger {
	position: relative;
	display: inline-flex;
	flex: none;
	width: 1.8em;
	height: 0.81em;
	font-size: 1.1em;
}

.pavo-content-panel-trigger__hamburger-line {
	position: absolute;
	left: 0;
	width: 100%;
	/* 1/9 of .hamburger's own height — see the viewBox math above. */
	height: 11.111%;
	background: currentColor;
	transition: top 0.3s ease, transform 0.3s ease, opacity 0.2s ease;
}

.pavo-content-panel-trigger__hamburger-line--1 {
	top: 0;
}

.pavo-content-panel-trigger__hamburger-line--2 {
	/* 4/9 */
	top: 44.444%;
}

.pavo-content-panel-trigger__hamburger-line--3 {
	/* 8/9 */
	top: 88.889%;
}

.pavo-content-panel-trigger__button[aria-expanded="true"] .pavo-content-panel-trigger__hamburger-line--1 {
	top: 44.444%;
	transform: rotate(30deg);
}

.pavo-content-panel-trigger__button[aria-expanded="true"] .pavo-content-panel-trigger__hamburger-line--2 {
	opacity: 0;
}

.pavo-content-panel-trigger__button[aria-expanded="true"] .pavo-content-panel-trigger__hamburger-line--3 {
	top: 44.444%;
	transform: rotate(-30deg);
}

/* Panel root — a plain, unstyled container nested inside the trigger
   (see Content_Panel::render()); its only job is carrying the id, the
   animation/position modifier classes, and the shared custom properties
   the dialog below reads back out. */
.pavo-content-panel {
	--pavo-cp-offset-x: 24px;
	--pavo-cp-offset-y: 24px;
	--pavo-cp-duration: 300ms;
	--pavo-cp-z-index: 9999;
}

.pavo-content-panel__dialog {
	/* --pavo-cp-c{x,y}: the *resting* translate a centered Position variant
	   needs just to be centered (e.g. -50%) — constant between open and
	   closed, set by the Position rules below, 0 for the edge-aligned
	   variants that don't need one.
	   --pavo-cp-t{x,y}: the *extra* closed-state offset an Animation
	   variant slides in from — set by the Animation rules further below,
	   added on top of the resting translate only while closed, dropped
	   entirely on open. Composed this way (instead of each writing a
	   plain `transform:`) so a centering Position and a sliding Animation
	   never fight over the single `transform` property. */
	--pavo-cp-cx: 0%;
	--pavo-cp-cy: 0%;
	--pavo-cp-tx: 0px;
	--pavo-cp-ty: 0px;
	position: absolute;
	z-index: var(--pavo-cp-z-index);
	display: flex;
	flex-direction: column;
	width: 450px;
	max-width: calc(100vw - 30px);
	max-height: calc(100vh - 30px);
	background: #fff;
	border-radius: 8px;
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
	opacity: 0;
	visibility: hidden;
	transform: translate(calc(var(--pavo-cp-cx) + var(--pavo-cp-tx)), calc(var(--pavo-cp-cy) + var(--pavo-cp-ty)));
	transition: opacity var(--pavo-cp-duration) ease, visibility var(--pavo-cp-duration), transform var(--pavo-cp-duration) ease;
}

.pavo-content-panel.is-open .pavo-content-panel__dialog {
	opacity: 1;
	visibility: visible;
	transform: translate(var(--pavo-cp-cx), var(--pavo-cp-cy));
}

.pavo-content-panel__content {
	overflow: auto;
}

/* Position — anchored to the trigger (the nearest `position: relative`
   ancestor, see .pavo-content-panel-trigger above), like a dropdown menu.
   Logical properties (inset-inline-start/-end) resolve to the correct
   physical side on their own for RTL, no JS/runtime direction check
   needed. "Center" is the one option that isn't trigger-relative at all —
   it fixes to the viewport instead, so it's the only variant using
   `position: fixed`.

   --pavo-cp-offset-x/-y (Horizontal/Vertical Offset in the editor) both
   read as a plain inset from whichever edge the chosen Position aligns
   to: -y is the gap from the trigger's top/bottom edge on every variant
   except Center; -x is the gap from the trigger's start/end edge on the
   *-start/*-end variants (including the horizontal Center-Start/
   Center-End flyouts) — the three *-center variants intentionally ignore
   -x, since they're already centered on the trigger's own horizontal
   midpoint and an inset from an edge doesn't apply there.

   Unlike a true popup, there's no runtime viewport-overflow check here —
   pick a Position/Offset (and a narrower Width, and/or a Center variant
   on small breakpoints) that actually fits instead. */
.pavo-content-panel--pos-top-start .pavo-content-panel__dialog {
	bottom: calc(100% + var(--pavo-cp-offset-y));
	inset-inline-start: var(--pavo-cp-offset-x);
}

.pavo-content-panel--pos-top-center .pavo-content-panel__dialog {
	bottom: calc(100% + var(--pavo-cp-offset-y));
	inset-inline-start: 50%;
	--pavo-cp-cx: -50%;
}

.pavo-content-panel--pos-top-end .pavo-content-panel__dialog {
	bottom: calc(100% + var(--pavo-cp-offset-y));
	inset-inline-end: var(--pavo-cp-offset-x);
}

.pavo-content-panel--pos-center-start .pavo-content-panel__dialog {
	top: 50%;
	inset-inline-end: calc(100% + var(--pavo-cp-offset-x));
	--pavo-cp-cy: -50%;
}

.pavo-content-panel--pos-center .pavo-content-panel__dialog {
	position: fixed;
	top: 50%;
	left: 50%;
	--pavo-cp-cx: -50%;
	--pavo-cp-cy: -50%;
}

.pavo-content-panel--pos-center-end .pavo-content-panel__dialog {
	top: 50%;
	inset-inline-start: calc(100% + var(--pavo-cp-offset-x));
	--pavo-cp-cy: -50%;
}

.pavo-content-panel--pos-bottom-start .pavo-content-panel__dialog {
	top: calc(100% + var(--pavo-cp-offset-y));
	inset-inline-start: var(--pavo-cp-offset-x);
}

.pavo-content-panel--pos-bottom-center .pavo-content-panel__dialog {
	top: calc(100% + var(--pavo-cp-offset-y));
	inset-inline-start: 50%;
	--pavo-cp-cx: -50%;
}

.pavo-content-panel--pos-bottom-end .pavo-content-panel__dialog {
	top: calc(100% + var(--pavo-cp-offset-y));
	inset-inline-end: var(--pavo-cp-offset-x);
}

/* Animation variants — only the *closed*-state offset (--pavo-cp-tx/-ty,
   see .pavo-content-panel__dialog above) differs per variant; opening
   always drops it to 0, sliding in from that direction to whatever
   resting spot the Position variant put the dialog at (a plain `none` on
   open wouldn't work here — a centered Position needs its own
   --pavo-cp-cx/-cy to stay in effect even while open, see above). Fade
   and None both simply never set an offset at all (no movement,
   opacity/visibility only) — None additionally disables the transition
   itself for an instant toggle. */
.pavo-content-panel--anim-slide-up .pavo-content-panel__dialog {
	--pavo-cp-ty: 24px;
}

.pavo-content-panel--anim-slide-down .pavo-content-panel__dialog {
	--pavo-cp-ty: -24px;
}

.pavo-content-panel--anim-slide-left .pavo-content-panel__dialog {
	--pavo-cp-tx: 24px;
}

.pavo-content-panel--anim-slide-right .pavo-content-panel__dialog {
	--pavo-cp-tx: -24px;
}

.pavo-content-panel--anim-none .pavo-content-panel__dialog {
	transition: none;
}

/* Close button. */
.pavo-content-panel__close {
	position: absolute;
	top: 12px;
	/* Matches the "End" default of the Close Button → Position control
	   (Content_Panel.php) — logical so it stays correctly on the
	   trailing edge before Elementor's own higher-specificity
	   #pavo-content-panel-{{ID}} selector even applies. */
	inset-inline-end: 12px;
	/* Without this, a positioned element inside the selected template can
	   still cover this button, even though it comes first in the DOM —
	   confirmed live with an Elementor flex Container, which sets its own
	   `z-index: 1` by default. A tie on z-index resolves by DOM order, so
	   `z-index: 1` here wasn't enough once the template's own content
	   happened to use that exact value too. This only has to clear
	   whatever the template's own content plausibly sets on itself for
	   unrelated reasons (stacking within its own flex/grid layout, a
	   hover effect, ...) — not compete with --pavo-cp-z-index, which
	   places the whole dialog relative to the rest of the *page*, a
	   separate concern already handled by .pavo-content-panel__dialog. */
	z-index: 999;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	margin: 0;
	background: none;
	border: 0;
	border-radius: 50%;
	cursor: pointer;
	color: #1a1a1a;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.pavo-content-panel__close-icon {
	display: inline-flex;
	font-size: 1em;
	line-height: 1;
}

.pavo-content-panel__close-icon--default {
	position: relative;
	width: 0.7em;
	height: 0.7em;
}

.pavo-content-panel__close-icon--default::before,
.pavo-content-panel__close-icon--default::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	height: 2px;
	background: currentColor;
}

.pavo-content-panel__close-icon--default::before {
	transform: rotate(45deg);
}

.pavo-content-panel__close-icon--default::after {
	transform: rotate(-45deg);
}

.pavo-content-panel__placeholder {
	padding: 24px;
	color: #6b7280;
	font-size: 0.9em;
	text-align: center;
}