/*
 * Site-wide pieces the kit owns.
 *
 * Loaded on every front-end page. Everything in here is either scoped to
 * markup this plugin prints, or scoped to a specific Elementor widget on a
 * specific breakpoint and explained in place. Nothing in this file is
 * allowed to be a bare element selector.
 */

/* ====================================================================
 * Back to top
 * ================================================================== */

.csk-totop {
	position: fixed;
	right: max(16px, env(safe-area-inset-right));
	bottom: max(16px, env(safe-area-inset-bottom));
	z-index: 90;

	/* 44 × 44 is the minimum a thumb can hit reliably (WCAG 2.5.8 is 24, but
	 * that is a floor for dense UI; this is a lone control at the edge of a
	 * phone screen). */
	inline-size: 44px;
	block-size: 44px;
	display: grid;
	place-items: center;
	box-sizing: border-box;
	padding: 0;
	border: 0;
	border-radius: 999px;

	background: var(--e-global-color-primary, var(--csk-accent, #0b5ea8));
	color: #fff;
	box-shadow: 0 6px 18px rgba(0, 0, 0, .22);
	cursor: pointer;

	/* Present in the DOM from the first paint so a screen reader's controls
	 * list is stable; invisible and non-interactive until there is somewhere
	 * to go back from. */
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
}

.csk-totop.is-visible {
	opacity: 1;
	visibility: visible;
	transform: none;
	transition: opacity .2s ease, transform .2s ease, visibility 0s;
}

.csk-totop svg {
	inline-size: 20px;
	block-size: 20px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2.25;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.csk-totop:hover { filter: brightness(1.08); }

.csk-totop:focus-visible {
	outline: 3px solid #fff;
	outline-offset: 2px;
	box-shadow: 0 0 0 5px var(--e-global-color-primary, var(--csk-accent, #0b5ea8)), 0 6px 18px rgba(0, 0, 0, .22);
}

/* Elementor's own sticky bits and the WP admin bar sit at higher z-indexes
 * on purpose; this only has to clear page content. */

@media (prefers-reduced-motion: reduce) {
	.csk-totop { transition: none; transform: none; }
}

@media print {
	.csk-totop { display: none; }
}

/* ====================================================================
 * Elementor Pro nav menu, on a phone
 *
 * Pro's dropdown menu is not positioned unless the widget's "Full Width"
 * option is on. Without it the open menu is a block *inside* the widget:
 * it simply grows in place, as wide as whatever column the widget sits in.
 * In a header where the menu column is 20% wide on mobile — which is what
 * a three-column header collapses to — that is a strip a few words wide,
 * every item wrapping, the header stretched down the screen.
 *
 * This anchors the open dropdown to the header row instead, edge to edge,
 * which is what "Full Width" does. It is a fallback: the option in the
 * widget remains the right fix, and these rules are inert once it is on
 * because Pro then sets its own position and width inline.
 *
 * Scoped to a theme-builder header and to Elementor's tablet breakpoint,
 * where Pro switches the menu to a dropdown. Nothing here touches desktop.
 * ================================================================== */

@media (max-width: 1024px) {
	/* The header's own top-level container is the anchor. Elementor makes
	 * every container position: relative, so the nearest one — the narrow
	 * column — would otherwise win. Release the column the menu sits in. */
	.elementor-location-header > .e-con:has(.elementor-widget-nav-menu) { position: relative; }
	.elementor-location-header .e-con:has(> .elementor-widget-nav-menu) { position: static; }
	.elementor-location-header .elementor-widget-nav-menu,
	.elementor-location-header .elementor-widget-nav-menu > .elementor-widget-container { position: static; }

	.elementor-location-header .elementor-widget-nav-menu:not(.elementor-nav-menu--stretch)
		.elementor-nav-menu--dropdown.elementor-nav-menu__container {
		position: absolute;
		left: 0;
		right: 0;
		top: 100%;
		width: auto;
		margin-top: 0;
		z-index: 9997;
		box-shadow: 0 12px 24px rgba(0, 0, 0, .12);
	}

	/* The items were wrapping because the strip was narrow; give them the
	 * row and stop them wrapping mid-phrase. */
	.elementor-location-header .elementor-nav-menu--dropdown .elementor-item {
		white-space: normal;
		padding-block: 14px;
	}
}