/**
 * Floating contact suite (TripAdvisor + WhatsApp + Call, agent cards).
 *
 * Limestone & Clay retokenisation -- REDESIGN-SPEC 3.1 (colour), 3.2
 * (contrast), 5.5 (radius), 5.6 (elevation), 5.7 (z-index + offsets),
 * 6.1 (breakpoints), 10.1 (motion).
 *
 * The plugin must survive a theme swap, so every design token is read as
 * var(--sk-x, #literal): inside the theme it inherits the design system,
 * standalone it falls back to the spec's own hex values. No blue, no gold.
 *
 * Third-party brand colours are kept and tagged with a "brand" comment: the
 * WhatsApp glyph #25D366 here, plus the TripAdvisor owl's #000 strokes and
 * #34E0A1 eyes (inline SVG in includes/class-contact-widgets.php).
 *
 * WCAG: 56px targets (52px on small phones, still >= 44px); WhatsApp glyph
 * #25D366 on basalt = 9.38:1, where the old white-on-green was 1.98:1 and
 * failed SC 1.4.11 for a button whose only content is an icon; white glyph
 * on clay = 5.96:1; two-tone focus ring so the indicator keeps >= 3:1 over
 * whatever page colour the fixed stack happens to float above.
 *
 * Geometry contract with class-contact-widgets.php: unchanged except that the
 * inline style now sets --skw-bottom instead of `bottom`, so the mobile
 * booking-bar clearance below can use calc() rather than lose to inline-style
 * specificity.
 */

.skw {
	position: fixed;
	bottom: var(--skw-bottom, 24px);
	z-index: var(--sk-z-floating, 50); /* above header 40 and bottom bar 45, below overlay menu 60 */
	display: flex;
	flex-direction: column;
	gap: var(--sk-sp-3, 0.75rem);
}
.skw[data-pos="right"] { right: var(--skw-side, 24px); align-items: flex-end; }
.skw[data-pos="left"]  { left: var(--skw-side, 24px); align-items: flex-start; }

/* Buttons */
.skw-btn {
	position: relative;
	width: 56px;
	height: 56px;
	border: 0;
	border-radius: var(--sk-r-circle, 50%);
	display: inline-grid;
	place-items: center;
	cursor: pointer;
	text-decoration: none;
	box-shadow: var(--sk-e-3, 0 8px 24px rgba(26, 24, 20, 0.08));
	transition: transform var(--sk-dur-2, 200ms) var(--sk-ease-out, cubic-bezier(0.23, 1, 0.32, 1)),
		box-shadow var(--sk-dur-2, 200ms) var(--sk-ease-out, cubic-bezier(0.23, 1, 0.32, 1));
}

/* Icons never squashed by sibling labels (escaped-SVG bug hardening). */
.skw-btn > svg, .skw-card > svg, .skw-btn__name { flex-shrink: 0; }
.skw-btn > svg { pointer-events: none; }
/* Spec 5.6: hover raises elevation and translates -2px -- never scale() next
   to a shadow. */
.skw-btn:hover  { transform: translateY(-2px); box-shadow: var(--sk-e-4, 0 18px 48px rgba(26, 24, 20, 0.12)); }
.skw-btn:active { transform: translateY(0); }

/* Two-tone focus ring: the stack floats over unknown page colours, so the
   clay outline carries its own light backing inside the offset gap (clay on
   #F7F5F1 = 5.96:1, SC 1.4.11). */
.skw-btn:focus-visible,
.skw-card:focus-visible {
	outline: 3px solid var(--sk-focus, #A8442A);
	outline-offset: 2px;
	box-shadow: 0 0 0 2px var(--sk-ink-on-dark, #F7F5F1), var(--sk-e-3, 0 8px 24px rgba(26, 24, 20, 0.08));
}

/* Spec 3.2.5: #25D366 is an icon fill inside a dark pill, never a label or
   surface colour. */
.skw-btn--whatsapp {
	background: var(--sk-band, #171512);
	color: #25D366; /* brand */
}
.skw-btn--call {
	background: var(--sk-accent, #A8442A);
	color: #FFFFFF;
}
.skw-btn--ta {
	background: var(--sk-surface, #FFFFFF);
	color: var(--sk-ink, #1A1815); /* owl strokes are #000 brand, set inline on the SVG */
	border: var(--sk-bw-1, 1px) solid var(--sk-line, #DCD6CC);
}
.skw-btn--call:hover  { background: var(--sk-accent-hover, #8F3822); }
.skw-btn--call:active { background: var(--sk-accent-active, #7A3020); }

/* Hover name reveal (TripAdvisor): the full name slides in
 * horizontally from the left as a floating chip beside the button.
 * Zero layout shift -- the chip is absolutely positioned (transform +
 * opacity only), the 56px button and the stack never resize. Desktop
 * hover/focus only; touch keeps the plain 56px icon target. */
.skw-btn__name {
	position: absolute;
	right: calc(100% + 12px);
	top: 50%;
	padding: 7px 14px;
	border-radius: var(--sk-r-pill, 999px);
	background: var(--sk-surface, #FFFFFF);
	color: var(--sk-ink, #1A1815);
	font: 700 var(--sk-fs-overline, 0.75rem)/1 var(--sk-font-body, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
	letter-spacing: 0.06em;
	white-space: nowrap;
	box-shadow: var(--sk-e-3, 0 8px 24px rgba(26, 24, 20, 0.08));
	opacity: 0;
	pointer-events: none;
	transform: translate(10px, -50%) scale(0.9);
	transition: opacity var(--sk-dur-2, 200ms) var(--sk-ease-spring, cubic-bezier(0.32, 0.72, 0, 1)),
		transform var(--sk-dur-2, 200ms) var(--sk-ease-spring, cubic-bezier(0.32, 0.72, 0, 1));
}

/* Stack pinned left: chip flips to the right side so it stays on-screen. */
.skw[data-pos="left"] .skw-btn__name {
	right: auto;
	left: calc(100% + 12px);
	transform: translate(-10px, -50%) scale(0.9);
}

.skw-btn:hover .skw-btn__name,
.skw-btn:focus-visible .skw-btn__name {
	opacity: 1;
	transform: translate(0, -50%) scale(1);
}

/* Touch devices: no hover -- keep the clean icon (the 56px target is
 * the tap surface; the name lives in the aria-label). */
@media (hover: none) {
	.skw-btn__name { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.skw-btn__name { transition: opacity var(--sk-dur-1, 120ms) linear; }
}

/* Agent-count badge on multi-agent buttons */
.skw-btn__count {
	position: absolute;
	top: -3px;
	right: -3px;
	min-width: 20px;
	height: 20px;
	padding: 0 5px;
	border-radius: var(--sk-r-pill, 999px);
	background: var(--sk-surface, #FFFFFF);
	color: var(--sk-ink, #1A1815);
	font: 700 var(--sk-fs-overline, 0.75rem)/20px var(--sk-font-body, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
	text-align: center;
	box-shadow: var(--sk-e-1, 0 1px 2px rgba(26, 24, 20, 0.04), 0 1px 3px rgba(26, 24, 20, 0.04));
}

/* Agent cards */
.skw-group { display: flex; flex-direction: column; align-items: inherit; }
.skw-cards {
	display: grid;
	gap: var(--sk-sp-2, 0.5rem);
	margin-bottom: var(--sk-sp-1, 0.25rem);
	animation: skw-in var(--sk-dur-3, 320ms) var(--sk-ease-out, cubic-bezier(0.23, 1, 0.32, 1)) both;
}
.skw-cards[hidden] { display: none; }
.skw-card {
	display: grid;
	grid-template-columns: 40px 1fr 15px;
	align-items: center;
	gap: var(--sk-sp-3, 0.75rem);
	min-height: 56px;
	padding: 8px 14px 8px 8px;
	border-radius: var(--sk-r-md, 0.75rem);
	background: var(--sk-surface, #FFFFFF);
	color: var(--sk-ink, #1A1815);
	text-decoration: none;
	box-shadow: var(--sk-e-3, 0 8px 24px rgba(26, 24, 20, 0.08));
	transition: transform var(--sk-dur-2, 200ms) var(--sk-ease-out, cubic-bezier(0.23, 1, 0.32, 1)),
		box-shadow var(--sk-dur-2, 200ms) var(--sk-ease-out, cubic-bezier(0.23, 1, 0.32, 1));
}
.skw-card:hover {
	transform: translateY(-2px);
	box-shadow: var(--sk-e-4, 0 18px 48px rgba(26, 24, 20, 0.12));
	color: var(--sk-ink, #1A1815);
}
.skw-card__avatar {
	width: 40px;
	height: 40px;
	border-radius: var(--sk-r-circle, 50%);
	display: grid;
	place-items: center;
	background: var(--sk-accent-tint, #F7E9E3);
	color: var(--sk-accent-ink, #8F3822);
	font: 600 var(--sk-fs-meta, 0.875rem)/1 var(--sk-font-body, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
	letter-spacing: 0.04em;
}
.skw-card__copy { display: grid; gap: 1px; }
/* 13px is the type floor (spec 4.2); the old 13/11px pair sat under it. */
.skw-card__copy strong { font: 700 var(--sk-fs-meta, 0.875rem)/1.3 var(--sk-font-body, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif); }
.skw-card__copy small { color: var(--sk-ink-3, #6E665B); font: 500 var(--sk-fs-caption, 0.8125rem)/1.3 var(--sk-font-body, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif); }
.skw-card > svg { color: var(--sk-accent, #A8442A); }

/* Agent photo (SEKHMET Settings -> Contact Agents -> Photo). It fills the very
   same 40px slot the initials fallback uses, so giving an agent a photo can
   never resize a card or shift the floating stack. object-fit stops a
   non-square upload stretching, and the requested thumbnail size is already
   square, so there is no layout shift while it loads. */
.skw-card__avatar--photo {
	padding: 0;
	overflow: hidden;
	background: var(--sk-sunken, #EAE5DD);
}
.skw-card__photo {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: var(--sk-r-circle, 50%);
}

@keyframes skw-in {
	from { opacity: 0; transform: translateY(10px) scale(0.96); }
	to   { opacity: 1; transform: none; }
}

/* Single tour pages carry the theme's sticky mobile booking bar below 901px
   (--sk-bottombar-h tall, z-index 45, safe-area padded). Clear it here rather
   than in PHP so the offset stays one number in settings: bar height + the
   bar's own safe-area padding + the configured gap. Scoped to the tour page --
   no other template renders the bar. Specificity (0,2,1) beats the 480px
   block below, so source order is not load-bearing. */
@media (max-width: 900px) {
	body.single-sekhem_tour .skw {
		bottom: calc(var(--skw-bottom, 24px) + var(--sk-bottombar-h, 4rem) + max(var(--sk-sp-3, 0.75rem), env(safe-area-inset-bottom, 0px)));
	}
}

@media (max-width: 480px) {
	.skw { gap: var(--sk-sp-2, 0.5rem); }
	.skw-btn { width: 52px; height: 52px; }
	.skw { bottom: calc(var(--skw-bottom, 24px) + env(safe-area-inset-bottom, 0px)); }
	.skw-card { min-height: 52px; }
}

@media (prefers-reduced-motion: reduce) {
	.skw-btn, .skw-card { transition: none; }
	.skw-cards { animation: none; }
}