/**
 * Anan Toolbar - the dock of site preference controls on the left edge.
 *
 * A translucent, backdrop-blurred rail holds one white circle per control,
 * vertically centred on the left of the viewport. Hovering (or focusing, or
 * tapping) a circle slides a pill-shaped tray out to the right, starting at
 * the rail's outer edge and carrying the options as rounded chips. The
 * active option lives on the trigger circle and is hidden inside the tray,
 * so the tray only ever offers a change.
 *
 * This file is excluded from the anan-darkmode transform (see the exclusion
 * list in anan-darkmode.php); dark mode is styled explicitly at the bottom.
 */

/* The old strip is replaced by the dock. One rule to bring it back. */
.top_bar_wrapper {
	display: none !important;
}

/* ------------------------------------------------------- text scale --- */
/* Moved here from topbar.css, which is no longer enqueued. --anan-text-scale
   is the single number every size that should respond to the aA control is
   multiplied by; the theme's own paragraph variable is re-expressed in terms
   of it, which carries the change across the site without a rule per
   component. html:root beats the theme's :root block, which is printed inline
   in the head and would otherwise win on source order. */

html { --anan-text-scale: 1; }

html[data-anan-text="0"] { --anan-text-scale: 0.9; }
html[data-anan-text="1"] { --anan-text-scale: 1; }
html[data-anan-text="2"] { --anan-text-scale: 1.125; }
html[data-anan-text="3"] { --anan-text-scale: 1.25; }
html[data-anan-text="4"] { --anan-text-scale: 1.4; }

html:root {
	--wp-estate-paragraph-font-size-option: calc( 16px * var( --anan-text-scale, 1 ) );
}

/* The dock's own labels must not grow with the page text. */
.anan-dock {
	--anan-text-scale: 1;
}

/* --------------------------------------------------------------- rail --- */

.anan-dock {
	--anan-dock-size: 44px;
	--anan-dock-gap: 8px;
	position: fixed;
	left: 14px;
	top: 50%;
	transform: translateY(-50%);
	z-index: 9999;
}

/* Translucent over the page, blurred so what scrolls behind reads as frost
   rather than clutter. */
.anan-dock__list {
	list-style: none;
	margin: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--anan-dock-gap);
	padding: 8px 7px;
	background: rgba(110, 102, 89, 0.55);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	border-radius: 999px;
	box-shadow: 0 6px 24px rgba(20, 19, 16, 0.22);
}

.anan-dock__item {
	position: relative;
}

/* Invisible bridge across the rail's edge to the tray, so the pointer can
   travel circle-to-tray without :hover ever dropping. Only exists while the
   tray is showing, so it cannot open anything by itself. */
.anan-dock__item:hover::after,
.anan-dock__item:focus-within::after,
.anan-dock__item.is-open::after {
	content: "";
	position: absolute;
	top: 0;
	left: 100%;
	width: 14px;
	height: 100%;
}

/* -------------------------------------------------------- move handle --- */
/* The rail is furniture painted on top of the page, so wherever it rests it
   can land over something the visitor wants to read. A small move handle
   fades in on hover - the same affordance SEOPress uses on its own floating
   button - and dragging it slides the rail anywhere up or down, snapping to
   whichever side edge it was dropped nearer.

   The resting place is remembered in localStorage and re-applied in the head
   by the boot script in anan-toolbar.php, before first paint: it cannot be
   baked into the markup because the page cache is shared between visitors.
   Desktop only - on phones the dock is a single circle adopted into the
   phone bar, which owns where it sits (see anan-phonebar). */

.anan-dock__grip {
	position: absolute;
	top: -7px;
	right: -9px;
	z-index: 3;
	width: 26px;
	height: 26px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(110, 102, 89, 0.92);
	color: #f3f0e9;
	box-shadow: 0 2px 8px rgba(20, 19, 16, 0.3);
	cursor: grab;
	opacity: 0;
	visibility: hidden;
	/* The pointer must own the gesture outright, or the browser pans the page
	   instead of moving the rail on a trackpad or a touch screen. */
	touch-action: none;
	transition: opacity 0.18s ease, visibility 0s linear 0.18s;
}

.anan-dock:hover .anan-dock__grip,
.anan-dock:focus-within .anan-dock__grip,
.anan-dock.is-dragging .anan-dock__grip {
	opacity: 1;
	visibility: visible;
	transition: opacity 0.18s ease, visibility 0s;
}

.anan-dock__grip:focus-visible {
	outline: 2px solid #e8e4dc;
	outline-offset: 2px;
}

.anan-dock__grip .anan-dock__svg {
	width: 14px;
	height: 14px;
}

/* While the rail is under the pointer it is placed in raw pixels and must
   not lag behind it; the settle back to the edge afterwards is animated. */
.anan-dock.is-dragging {
	transition: none;
	cursor: grabbing;
}

.anan-dock.is-dragging .anan-dock__grip {
	cursor: grabbing;
}

/* No tray should open under a rail that is being carried across the page. */
.anan-dock.is-dragging .anan-dock__list {
	pointer-events: none;
}

.anan-dock.is-settling {
	transition: left 0.22s ease, top 0.22s ease;
}

@media (min-width: 768px) {
	/* Set by the head boot script and by toolbar.js; the default keeps the
	   rail vertically centred exactly as before anything was dragged. */
	.anan-dock {
		top: var(--anan-dock-top, 50%);
	}

	html[data-anan-dock-side="right"] .anan-dock {
		left: auto;
		right: 14px;
	}

	html[data-anan-dock-side="right"] .anan-dock__grip {
		right: auto;
		left: -9px;
	}

	/* Parked on the right edge, a tray sliding rightwards would leave the
	   viewport - the whole flyout, bridge included, mirrors. */
	html[data-anan-dock-side="right"] .anan-dock__tray {
		left: auto;
		right: calc(100% + 9px);
		transform: translateY(-50%) translateX(10px);
	}

	html[data-anan-dock-side="right"] .anan-dock__item:hover .anan-dock__tray,
	html[data-anan-dock-side="right"] .anan-dock__item:focus-within .anan-dock__tray,
	html[data-anan-dock-side="right"] .anan-dock__item.is-open .anan-dock__tray {
		transform: translateY(-50%) translateX(0);
	}

	html[data-anan-dock-side="right"] .anan-dock__item:hover::after,
	html[data-anan-dock-side="right"] .anan-dock__item:focus-within::after,
	html[data-anan-dock-side="right"] .anan-dock__item.is-open::after {
		left: auto;
		right: 100%;
	}
}

/* ------------------------------------------------------------ trigger --- */

.anan-dock__trigger {
	position: relative;
	z-index: 2;
	width: var(--anan-dock-size);
	height: var(--anan-dock-size);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border-radius: 50%;
	background: #ffffff;
	border: 0;
	box-shadow: 0 2px 8px rgba(20, 19, 16, 0.18);
	color: #44403a;
	font-size: 17px;
	line-height: 1;
	cursor: pointer;
	transition: box-shadow 0.2s ease;
}

.anan-dock__item:hover .anan-dock__trigger,
.anan-dock__item.is-open .anan-dock__trigger {
	box-shadow: 0 4px 14px rgba(20, 19, 16, 0.3);
}

.anan-dock__trigger:focus-visible,
.anan-dock__themebtn:focus-visible,
.anan-dock__opt:focus-visible,
.anan-dock__range:focus-visible {
	outline: 2px solid #e8e4dc;
	outline-offset: 2px;
}

.anan-dock__aa {
	font-size: 15px;
	letter-spacing: 0.02em;
}

/* The flag fills its ball; the circle's white ground shows as a 2px ring. */
.anan-dock__flag {
	width: calc(var(--anan-dock-size) - 4px);
	height: calc(var(--anan-dock-size) - 4px);
	border-radius: 50%;
	object-fit: cover;
	display: block;
}

/* --------------------------------------------------------------- tray --- */
/* Starts just past the rail's outer edge - the circle and the rail stay
   fully visible. Every tray shares the trigger's height so the row reads as
   one system whatever it carries. */

.anan-dock__tray {
	position: absolute;
	top: 50%;
	left: calc(100% + 9px);
	z-index: 1;
	box-sizing: border-box;
	min-height: calc(var(--anan-dock-size) + 14px);
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px;
	background: rgba(236, 234, 228, 0.78);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	border: 1px solid rgba(37, 42, 44, 0.08);
	border-radius: 999px;
	box-shadow: 0 6px 24px rgba(20, 19, 16, 0.16);
	white-space: nowrap;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: translateY(-50%) translateX(-10px);
	transition: opacity 0.22s ease, transform 0.22s ease, visibility 0s linear 0.22s;
}

.anan-dock__item:hover .anan-dock__tray,
.anan-dock__item:focus-within .anan-dock__tray,
.anan-dock__item.is-open .anan-dock__tray {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translateY(-50%) translateX(0);
	transition: opacity 0.22s ease, transform 0.22s ease, visibility 0s;
}

/* --------------------------------------------------------- theme pill --- */
/* Both modes sit in a circle: the inactive one frosted into the rail, the
   active one solid white. */

.anan-dock__themepill {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 7px;
	padding: 0;
	border: 0;
	background: none;
}

.anan-dock__themebtn {
	width: calc(var(--anan-dock-size) - 8px);
	height: calc(var(--anan-dock-size) - 8px);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.24);
	color: #f3f0e9;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease;
}

.anan-dock__themebtn.is-active {
	background: #ffffff;
	color: #3f3a33;
	box-shadow: 0 1px 6px rgba(20, 19, 16, 0.25);
}

.anan-dock__svg {
	width: 19px;
	height: 19px;
}

/* ----------------------------------------------------- language flags --- */

.anan-dock__opt {
	display: flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	border-radius: 50%;
}

.anan-dock__opt--flag {
	width: var(--anan-dock-size);
	height: var(--anan-dock-size);
	background: #ffffff;
	box-shadow: 0 1px 4px rgba(20, 19, 16, 0.14);
	transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.anan-dock__opt--flag img {
	width: calc(var(--anan-dock-size) - 4px);
	height: calc(var(--anan-dock-size) - 4px);
	border-radius: 50%;
	object-fit: cover;
	display: block;
}

.anan-dock__opt--flag:hover {
	box-shadow: 0 2px 8px rgba(20, 19, 16, 0.28);
	transform: translateY(-1px);
}

/* The current language lives on the trigger; the tray only offers a change. */
.anan-dock__opt--flag.is-active {
	display: none;
}

/* ----------------------------------- adopted currency + unit widgets --- */
/* The theme's own dropdown nodes, moved in from the hidden top bar. Their
   button is hidden (hover opens the tray instead) and the menu is flattened
   from a positioned panel into a row of chips inside the pill. The theme's
   225px max-height scroll panel must not survive here. */

.anan-dock .wpresidence_dropdown {
	position: static;
}

.anan-dock .wpresidence_dropdown .dropdown-toggle {
	display: none;
}

.anan-dock .wpresidence_dropdown .dropdown-menu {
	display: flex !important;
	position: static !important;
	float: none;
	align-items: center;
	gap: 6px;
	margin: 0;
	padding: 0;
	min-width: 0;
	max-height: none !important;
	overflow: visible !important;
	background: transparent;
	border: 0;
	box-shadow: none;
	transform: none !important;
}

.anan-dock .dropdown-menu > li {
	list-style: none;
	margin: 0;
	cursor: pointer;
	color: #44403a;
	background: #ffffff;
	box-shadow: 0 1px 4px rgba(20, 19, 16, 0.14);
	transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.anan-dock .dropdown-menu > li:hover {
	background: #6e6659;
	color: #ffffff;
	box-shadow: 0 2px 8px rgba(20, 19, 16, 0.28);
}

/* The active value lives on the trigger circle; offering it again in the
   tray would just be a button that does nothing. */
.anan-dock .dropdown-menu > li.is-active {
	display: none;
}

/* Currency rows: the label is the symbol, drawn from the data attribute the
   dock script copies on; the row's own text (the code) is kept for screen
   readers by zeroing its size rather than emptying it. */
.anan-dock .list_sidebar_currency > li {
	width: var(--anan-dock-size);
	height: var(--anan-dock-size);
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	font-size: 0;
}

.anan-dock .list_sidebar_currency > li::before {
	content: attr(data-anan-glyph);
	font-size: 16px;
	line-height: 1;
}

.anan-dock .list_sidebar_measure_unit > li {
	width: var(--anan-dock-size);
	height: var(--anan-dock-size);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border-radius: 50%;
	font-size: 13px;
	line-height: 1;
}

/* ---------------------------------------------------- text size slider --- */

.anan-dock__tray--text {
	padding: 6px 16px;
}

.anan-dock__range {
	-webkit-appearance: none;
	appearance: none;
	width: 120px;
	height: 5px;
	border-radius: 3px;
	background: #ffffff;
	cursor: pointer;
}

.anan-dock__range::-webkit-slider-thumb {
	-webkit-appearance: none;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	border: 0;
	background: #5f3b35;
}

.anan-dock__range::-moz-range-thumb {
	width: 16px;
	height: 16px;
	border-radius: 50%;
	border: 0;
	background: #5f3b35;
}

.anan-dock__range::-moz-range-track {
	height: 5px;
	border-radius: 3px;
	background: #ffffff;
}

/* ---------------------------------------------------------- dark mode --- */

html[data-anan-theme="dark"]:not(.anan-invert) .anan-dock__list {
	background: rgba(30, 28, 24, 0.55);
	box-shadow: 0 6px 24px rgba(0, 0, 0, 0.5);
}

html[data-anan-theme="dark"]:not(.anan-invert) .anan-dock__trigger {
	background: #1e1c18;
	color: #e8e4dc;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
}

html[data-anan-theme="dark"]:not(.anan-invert) .anan-dock__tray {
	background: rgba(42, 38, 32, 0.75);
	border-color: rgba(232, 228, 220, 0.12);
}

html[data-anan-theme="dark"]:not(.anan-invert) .anan-dock__themebtn {
	background: rgba(232, 228, 220, 0.10);
	color: #a9a294;
}

html[data-anan-theme="dark"]:not(.anan-invert) .anan-dock__themebtn.is-active {
	background: #1e1c18;
	color: #e8e4dc;
	box-shadow: 0 1px 6px rgba(0, 0, 0, 0.5);
}

html[data-anan-theme="dark"]:not(.anan-invert) .anan-dock .dropdown-menu > li {
	background: #1e1c18;
	color: #e8e4dc;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}

html[data-anan-theme="dark"]:not(.anan-invert) .anan-dock .dropdown-menu > li:hover {
	background: #8a6f4e;
	color: #ffffff;
}

html[data-anan-theme="dark"]:not(.anan-invert) .anan-dock__opt--flag {
	background: #1e1c18;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}

html[data-anan-theme="dark"]:not(.anan-invert) .anan-dock__range,
html[data-anan-theme="dark"]:not(.anan-invert) .anan-dock__range::-moz-range-track {
	background: #1e1c18;
}

html[data-anan-theme="dark"]:not(.anan-invert) .anan-dock__range::-webkit-slider-thumb {
	background: #b3a48a;
}

html[data-anan-theme="dark"]:not(.anan-invert) .anan-dock__range::-moz-range-thumb {
	background: #b3a48a;
}

/* -------------------------------------------------------- small screens --- */
/* Below the theme's xl breakpoint the old strip never existed at all, so on
   phones and tablets the dock is these controls' first home, not a copy.

   On phones the rail itself is too much furniture: 50x265px vertically
   centred on the left edge sat directly over the homepage hero copy and over
   body text on every interior page. It now collapses behind one circle in
   the bottom-left corner - the bottom edge is where the page's other floating
   controls live (search pill centre, Ana avatar right) - and the rail grows
   UPWARD from it when opened. The mini button does not exist above 768px. */

.anan-dock__mini {
	display: none;
}

@media (max-width: 767.98px) {
	.anan-dock {
		--anan-dock-size: 38px;
		left: 10px;
		top: auto;
		bottom: 12px;
		transform: none;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 8px;
	}

	/* The rail sits above the button (anchored to the viewport bottom, the
	   dock grows upward); DOM order is button-then-list, so flex order flips
	   them. */
	.anan-dock__list {
		order: 1;
		padding: 7px 6px;
	}

	.anan-dock__mini {
		order: 2;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 42px;
		height: 42px;
		padding: 0;
		border: 0;
		border-radius: 50%;
		cursor: pointer;
		background: rgba(110, 102, 89, 0.55);
		-webkit-backdrop-filter: blur(12px);
		backdrop-filter: blur(12px);
		color: #f3f0e9;
		box-shadow: 0 4px 16px rgba(20, 19, 16, 0.25);
	}

	.anan-dock__mini:focus-visible {
		outline: 2px solid #e8e4dc;
		outline-offset: 2px;
	}

	.anan-dock__mini-open,
	.anan-dock__mini-close {
		display: flex;
	}

	.anan-dock__mini-close,
	.anan-dock.is-expanded .anan-dock__mini-open {
		display: none;
	}

	.anan-dock.is-expanded .anan-dock__mini-close {
		display: flex;
	}

	/* Collapsed is the resting state; the rail only exists while open. */
	.anan-dock:not(.is-expanded) .anan-dock__list {
		display: none;
	}

	.anan-dock__tray {
		flex-wrap: wrap;
		white-space: normal;
		max-width: calc(100vw - 96px);
		border-radius: 24px;
	}

	/* Nothing to move down here: the dock is one circle and anan-phonebar
	   lifts it into the bottom bar, which decides where it sits. */
	.anan-dock__grip {
		display: none;
	}
}

html[data-anan-theme="dark"]:not(.anan-invert) .anan-dock__mini {
	background: rgba(30, 28, 24, 0.55);
	color: #e8e4dc;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
}

/* ------------------------------------------- phone bottom-edge furniture --- */
/* The Ana chat dock (plugins/ana-chat) rests as a FULL-WIDTH bottom bar on
   phones, fixed at z-index 99999 - over this dock's circle and over the
   homepage search pill. The plugin already ships the compact resting state
   (its session-scoped .ana-dock--minimized: a 52px icon-only circle); these
   rules make that the phone DEFAULT and park it bottom-right, so the bottom
   edge reads: preferences circle left, search pill centre, Ana right.

   Lives here rather than in the plugin because plugin PHP is off-limits to
   Novamira and this stylesheet is enqueued site-wide, after the plugin's, with
   a version of its own. .ana-dock .ana-dock__bar matches the specificity of
   the plugin's own state rules; .ana-dock--expanded still display:none's the
   bar while the chat panel is open. The label is clipped, not display:none'd,
   so the button keeps its accessible name. */
@media (max-width: 767.98px) {
	.ana-dock .ana-dock__bar {
		left: auto;
		right: 12px;
		bottom: 12px;
		width: auto;
	}

	.ana-dock .ana-dock__bar-open {
		width: 52px;
		height: 52px;
		padding: 0;
		border-radius: 50%;
		justify-content: center;
		box-shadow: 0 2px 10px rgba(0, 0, 0, 0.28);
	}

	.ana-dock .ana-dock__bar-label {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		padding: 0;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
		border: 0;
	}

	.ana-dock .ana-dock__bar-hide {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.anan-dock,
	.anan-dock *,
	.anan-dock__tray {
		transition: none !important;
	}
}

@media print {
	.anan-dock {
		display: none;
	}
}