/* ==========================================================================
   Croator — CWS-Suite mobile menu
   Design: "Croator Mobilni Meni"

   Everything is scoped under .mobile-menu-custom-panel (panel template) or
   .single-menu-item.is-custom (item template) so every rule sits at (0,2,0)
   or higher and beats the Elementor kit's `.elementor-kit-6 a|button` rules
   at (0,1,1) without a single !important.
   ========================================================================== */

/* -------------------------------------------------------------- 1. tokens */

.mobile-menu-custom-panel .cro-menu,
.single-menu-item.is-custom .cro-item {
	--cro-brand:       var(--e-global-color-primary,   #DB4437);
	--cro-brand-hover: var(--e-global-color-e7e7d44,   #B8352A);
	--cro-acc:         var(--e-global-color-accent,    #C93A2E);
	--cro-tx:          var(--e-global-color-secondary, #0E1116);
	--cro-tx2:         var(--e-global-color-text,      #4A5461);
	--cro-tx3:         var(--e-global-color-71a5efd,   #8A94A0);
	--cro-bd:          var(--e-global-color-58a914ce,  #EAEDF1);
	--cro-s1:          var(--e-global-color-70dd29d8,  #F7F8FA);
	--cro-tint:        var(--e-global-color-4350b7fa,  #FBECEA);

	/* Panel background. Set to `transparent` if you would rather drive it from
	   the widget's Style → Menu Background controls. */
	--cro-surface: #FFFFFF;

	--cro-display: var(--e-global-typography-primary-font-family, "Space Grotesk"), "Space Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--cro-body:    var(--e-global-typography-text-font-family, "Manrope"), "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

	/* Motion. The design mock uses .48s with a heavily decelerating curve —
	   fine on a static canvas, sluggish under a real thumb. These are the
	   two knobs: raise --cro-open for a lazier feel, lower it for snappier. */
	--cro-open: .26s;
	--cro-ease: cubic-bezier(.2, .8, .2, 1);
}

/* ---------------------------------------------------------------- 2. shell */

/* The menu owns its own scrolling.
 *
 * The plugin's panel is `flex:1 1 auto; overflow-y:auto;
 * -webkit-overflow-scrolling:touch` inside a `position:fixed` shell that is
 * `height: calc(var(--vh) * 100)`. Two consequences drove this layout:
 *
 *   1. `-webkit-overflow-scrolling: touch` is the legacy iOS momentum scroller.
 *      A `position: sticky` child inside one ghosts — it paints stale content
 *      and reports the wrong height. So the header is NOT sticky; instead the
 *      menu fills the panel exactly and scrolls in `.cro-menu__nav`, leaving
 *      the plugin's scroller with nothing to scroll.
 *   2. The shell's height tracks `--vh`, which the plugin recomputes on every
 *      `resize`. On mobile the URL bar collapsing during a scroll fires exactly
 *      that, so the panel would resize mid-scroll. Scrolling an inner element
 *      (with `overscroll-behavior: contain`, below) never moves the document,
 *      so the URL bar — and the height — stay put.
 *
 * `height: 100%` resolves because the shell has a definite height and the panel
 * is its only in-flow child. If that ever stops being true it falls back to
 * auto, the nav stops scrolling internally, and the plugin's panel scrolls the
 * whole thing as before — degraded, but never broken. */
.mobile-menu-custom-panel .cro-menu {
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	background: var(--cro-surface);
	font-family: var(--cro-body);
	color: var(--cro-tx2);
	-webkit-font-smoothing: antialiased;
}

/* Neutralise the legacy momentum-scroll flag on the panel we sit in. It has
   been unnecessary since iOS 13 (momentum is the default) and it is the source
   of the stale-paint artefacts. (0,2,0) beats the plugin's (0,1,0). */
.mobile-menu-wrap .mobile-menu-custom-panel {
	-webkit-overflow-scrolling: auto;
	overscroll-behavior: contain;
}

.mobile-menu-custom-panel .cro-menu,
.mobile-menu-custom-panel .cro-menu *,
.mobile-menu-custom-panel .cro-menu *::before,
.mobile-menu-custom-panel .cro-menu *::after {
	box-sizing: border-box;
}

/* -------------------------------------------------------------- 3. top row */

/* Deliberately NOT sticky — see the note on `.cro-menu` above. It is a
   flex:none band above the scrolling nav, which pins it just as firmly without
   going anywhere near the legacy iOS scroller. */
.mobile-menu-custom-panel .cro-menu__top {
	position: relative;
	z-index: 5;
	flex: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	min-height: 64px;
	padding: 9px 14px 9px 20px;
	background: var(--cro-surface);
	border-bottom: 1px solid var(--cro-bd);
}

.mobile-menu-custom-panel .cro-menu__brand {
	display: flex;
	align-items: baseline;
	gap: 2px;
	min-width: 0;
	color: var(--cro-tx);
	text-decoration: none;
}

.mobile-menu-custom-panel .cro-menu__brand img {
	display: block;
	width: auto;
	max-width: 170px;
	max-height: 36px;
	align-self: center;
}

.mobile-menu-custom-panel .cro-menu__wordmark {
	font-family: var(--cro-display);
	font-weight: 700;
	font-size: 22px;
	line-height: 1;
	letter-spacing: -0.5px;
	text-transform: lowercase;
}

.mobile-menu-custom-panel .cro-menu__dot {
	flex: none;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--cro-brand);
	transform: translateY(-2px);
}

.mobile-menu-custom-panel .cro-menu__tools {
	display: flex;
	align-items: center;
	gap: 4px;
}

.mobile-menu-custom-panel .cro-menu__icon {
	flex: none;
	width: 44px;
	height: 44px;
	border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--cro-tx2);
	text-decoration: none;
	transition: background .18s ease, color .18s ease;
}

.mobile-menu-custom-panel .cro-menu__icon:hover,
.mobile-menu-custom-panel .cro-menu__icon:focus-visible,
.mobile-menu-custom-panel .cro-menu__icon:active {
	background: var(--cro-s1);
	color: var(--cro-brand);
}

/* The required .close-menu control, drawn as the ✕ end of the hamburger. */
.mobile-menu-custom-panel .cro-menu__close {
	flex: none;
	width: 46px;
	height: 46px;
	margin-left: 2px;
	padding: 0;
	border: 1px solid var(--cro-bd);
	border-radius: 13px;
	background: var(--cro-surface);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	transition: background .2s ease, border-color .2s ease;
}

.mobile-menu-custom-panel .cro-menu__close:hover,
.mobile-menu-custom-panel .cro-menu__close:focus-visible {
	background: var(--cro-s1);
	border-color: #DDE2E8;
}

.mobile-menu-custom-panel .cro-menu__bar {
	display: block;
	width: 19px;
	height: 2px;
	border-radius: 2px;
	background: var(--cro-tx);
	transition: transform .3s cubic-bezier(.22, .9, .25, 1);
}

.mobile-menu-custom-panel .cro-menu__bar + .cro-menu__bar {
	margin-top: 5px;
}

.mobile-menu-custom-panel .cro-menu__close .cro-menu__bar:first-child {
	transform: translateY(3.5px) rotate(45deg);
}

.mobile-menu-custom-panel .cro-menu__close .cro-menu__bar:last-child {
	transform: translateY(-3.5px) rotate(-45deg);
}

/* ------------------------------------------------------------ 4. nav shell */

/* The scroll container. `min-height: 0` is what lets a flex item actually
   shrink below its content and scroll; `overscroll-behavior: contain` stops the
   scroll chaining to the document at the ends, which is what would collapse the
   URL bar and resize the shell mid-scroll. */
.mobile-menu-custom-panel .cro-menu__nav,
.mobile-menu-custom-panel .cro-menu__fallback {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 6px 20px 28px;
}

.mobile-menu-custom-panel .cro-menu__sec {
	border-bottom: 1px solid var(--cro-bd);
}

.mobile-menu-custom-panel .cro-menu__sec:last-child {
	border-bottom: 0;
}

/* ------------------------------------------------ 5. level-1 rows (no kids) */

.mobile-menu-custom-panel .cro-menu__row {
	min-height: 58px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	font-family: var(--cro-display);
	font-weight: 700;
	font-size: 20px;
	letter-spacing: -0.4px;
	color: var(--cro-tx);
	text-decoration: none;
	transition: color .18s ease;
}

.mobile-menu-custom-panel .cro-menu__row.is-accent,
.mobile-menu-custom-panel .cro-menu__row.is-current,
.mobile-menu-custom-panel .cro-menu__row:active {
	color: var(--cro-brand);
}

/* --------------------------------------------------------- 6. accordion */

.mobile-menu-custom-panel .cro-menu__acc-btn {
	width: 100%;
	margin: 0;
	padding: 17px 0;
	border: 0;
	border-radius: 0;
	background: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	text-align: left;
	cursor: pointer;
	font-family: var(--cro-display);
	font-weight: 700;
	font-size: 20px;
	line-height: 1.2;
	letter-spacing: -0.4px;
	color: var(--cro-tx);
	-webkit-appearance: none;
	appearance: none;
}

.mobile-menu-custom-panel .cro-menu__acc-btn:hover,
.mobile-menu-custom-panel .cro-menu__acc-btn:focus-visible {
	background: none;
	color: var(--cro-tx);
}

.mobile-menu-custom-panel .cro-menu__chev {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	color: var(--cro-tx3);
	transition: transform var(--cro-open) var(--cro-ease), color .2s ease;
}

.mobile-menu-custom-panel .cro-menu__acc-btn[aria-expanded="true"] .cro-menu__chev {
	transform: rotate(180deg);
	color: var(--cro-brand);
}

/* Height animation via grid-template-rows 0fr → 1fr, as in the design.
 *
 * No `contain` and no persistent `transform` on the collapsed sections here.
 * Both were tried and both are compositing hints: inside the plugin's legacy
 * `-webkit-overflow-scrolling` scroller they promoted every closed section to
 * its own layer and produced stale paint on scroll. Short durations do the job
 * without asking the compositor for anything. */
.mobile-menu-custom-panel .cro-menu__acc-panel {
	display: grid;
	grid-template-rows: 0fr;
	opacity: 0;
	visibility: hidden;
	transition: grid-template-rows var(--cro-open) var(--cro-ease), opacity .18s ease, visibility 0s linear var(--cro-open);
}

.mobile-menu-custom-panel .cro-menu__acc.is-open > .cro-menu__acc-panel {
	grid-template-rows: 1fr;
	opacity: 1;
	visibility: visible;
	transition: grid-template-rows var(--cro-open) var(--cro-ease), opacity .18s ease, visibility 0s;
}

/* Widened 12px each side so the links' -12px highlight bleed is not clipped. */
.mobile-menu-custom-panel .cro-menu__acc-clip {
	overflow: hidden;
	min-height: 0;
	margin: 0 -12px;
	padding: 0 12px;
}

.mobile-menu-custom-panel .cro-menu__acc-inner {
	display: flex;
	flex-direction: column;
	padding: 0 0 14px;
}

/* Browsers without animatable 0fr grid tracks still open and close cleanly. */
@supports not (grid-template-rows: 0fr) {

	.mobile-menu-custom-panel .cro-menu__acc-panel {
		display: none;
	}

	.mobile-menu-custom-panel .cro-menu__acc.is-open > .cro-menu__acc-panel {
		display: block;
		visibility: visible;
		opacity: 1;
	}
}

/* ----------------------------------------------- 7. group labels and links */

.mobile-menu-custom-panel .cro-menu__group {
	padding: 2px 0 8px;
	font-family: var(--cro-body);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 1.3px;
	line-height: 1.3;
	text-transform: uppercase;
	color: var(--cro-tx3);
}

.mobile-menu-custom-panel .cro-menu__link + .cro-menu__group {
	padding-top: 14px;
}

.mobile-menu-custom-panel .cro-menu__link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	min-height: 48px;
	padding: 0 12px;
	margin: 0 -12px;
	border-radius: 12px;
	font-family: var(--cro-body);
	font-weight: 600;
	font-size: 16px;
	line-height: 1.35;
	color: var(--cro-tx2);
	text-decoration: none;
	transition: background .18s ease, color .18s ease;
}

.mobile-menu-custom-panel .cro-menu__link:hover,
.mobile-menu-custom-panel .cro-menu__link:focus-visible,
.mobile-menu-custom-panel .cro-menu__link:active,
.mobile-menu-custom-panel .cro-menu__link.is-current {
	background: var(--cro-s1);
	color: var(--cro-brand);
}

/* "Sve usluge →" — the cro-cta / cro-accent flag */
.mobile-menu-custom-panel .cro-menu__link.is-accent {
	min-height: 48px;
	padding: 0;
	margin: 0;
	gap: 8px;
	font-weight: 700;
	font-size: 15px;
	color: var(--cro-brand);
}

.mobile-menu-custom-panel .cro-menu__link.is-accent:hover,
.mobile-menu-custom-panel .cro-menu__link.is-accent:focus-visible,
.mobile-menu-custom-panel .cro-menu__link.is-accent:active {
	background: transparent;
	color: var(--cro-brand-hover);
}

.mobile-menu-custom-panel .cro-menu__label {
	min-width: 0;
}

.mobile-menu-custom-panel .cro-menu__arrow {
	margin-left: 2px;
}

/* --------------------------------------------------------- 8. tap spinner */

.mobile-menu-custom-panel .cro-menu__spin {
	display: none;
	flex: none;
	width: 16px;
	height: 16px;
	border: 2px solid var(--cro-bd);
	border-top-color: var(--cro-brand);
	border-radius: 50%;
	animation: cro-menu-spin .6s linear infinite;
}

.mobile-menu-custom-panel .is-loading > .cro-menu__spin {
	display: block;
}

.mobile-menu-custom-panel .cro-menu__row > .cro-menu__spin {
	width: 17px;
	height: 17px;
}

.mobile-menu-custom-panel .cro-menu__link.is-accent > .cro-menu__spin {
	border-color: var(--cro-tint);
	border-top-color: var(--cro-brand);
}

@keyframes cro-menu-spin {

	to {
		transform: rotate(360deg);
	}
}

/* ------------------------------------------------------- 9. extra content */

.mobile-menu-custom-panel .cro-menu__extra {
	flex: none;
	padding: 4px 20px;
}

/* No `margin-top: auto` here: .cro-menu__nav already takes the free space, so
   the footer is pinned to the bottom of the panel by the flex layout itself. */
.mobile-menu-custom-panel .cro-menu__extra--foot {
	border-top: 1px solid var(--cro-bd);
	padding-top: 18px;
	padding-bottom: 24px;
}

/* ---------------------------------------------------- 10. focus visibility */

.mobile-menu-custom-panel .cro-menu a:focus-visible,
.mobile-menu-custom-panel .cro-menu button:focus-visible {
	outline: 2px solid var(--cro-brand);
	outline-offset: 3px;
	border-radius: 8px;
}

/* ------------------------------------------- 11. the sheet's own open speed

   The slide-out shell belongs to the widget, not to this template. The plugin
   animates it with `left: -100% → 0` (and `right` for dir-right) over 500ms on
   a `position: fixed`, full-viewport element. Animating `left` is layout-bound:
   the browser relays out and repaints the whole viewport every frame for half a
   second. That — not the accordion — is what makes opening feel heavy.

   Shortening it is safe: the plugin's transition names exactly one property, so
   overriding `transition-duration` cannot disturb any `visibility 0s` timing. */

.mobile-menu-wrap {
	--cro-panel-speed: .3s;
}

.mobile-menu-wrap .mobile-menu-content {
	transition-duration: var(--cro-panel-speed);
}

/* OPTIONAL — the real fix for the same thing.
 *
 * Swaps the plugin's `left` animation for `transform`, which runs on the
 * compositor: no layout, no repaint, just the GPU moving a finished layer.
 * Left commented because it changes plugin-owned behaviour, and after a
 * stale-paint bug you want one variable at a time. Enable it, test the sheet
 * in both directions, and delete this comment if you keep it.
 *
 * Verified safe against the plugin as it stands: nothing inside the shell uses
 * `position: fixed`, which is the only thing a transformed ancestor would
 * change. The template's own rules add no `position: fixed` either.

.mobile-menu-wrap .mobile-menu-content {
	left: 0;
	transform: translateX(-100%);
	transition: transform var(--cro-panel-speed) ease;
}

.mobile-menu-wrap.dir-right .mobile-menu-content {
	left: auto;
	right: 0;
	transform: translateX(100%);
	transition: transform var(--cro-panel-speed) ease;
}

.mobile-menu-wrap .mobile-menu-content.active,
.mobile-menu-wrap.dir-right .mobile-menu-content.active {
	transform: translateX(0);
}
 */

/* --------------------------------- 11b. optional: morph the plugin trigger

   The hamburger lives in the widget's own `.mobile-menu-trigger`, which this
   template does not own. menu.js mirrors the open state onto
   `.mobile-menu-wrap.cro-menu-open`, so if you also want the two bars to cross
   there, uncomment the block below and adjust it to your trigger icon.

.mobile-menu-wrap .mobile-menu-trigger .open-menu {
	transition: transform .3s cubic-bezier(.22, .9, .25, 1);
}

.mobile-menu-wrap.cro-menu-open .mobile-menu-trigger .open-menu {
	transform: rotate(90deg);
}
   -------------------------------------------------------------------------- */

/* --------------------------------- 12. item template (cws-suite/menu-item.php)
   Used only when the widget's "Menu item style" is set to `custom`. Harmless
   when it is not. */

.single-menu-item.is-custom .cro-item {
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	gap: 12px;
	min-width: 0;
	font-family: var(--cro-body);
}

.single-menu-item.is-custom .cro-item__text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.single-menu-item.is-custom .cro-item--l1 .cro-item__title {
	font-family: var(--cro-display);
	font-weight: 700;
	font-size: 20px;
	line-height: 1.2;
	letter-spacing: -0.4px;
	color: var(--cro-tx);
}

.single-menu-item.is-custom .cro-item__title {
	font-weight: 600;
	font-size: 16px;
	line-height: 1.35;
	color: var(--cro-tx2);
}

.single-menu-item.is-custom .cro-item__desc {
	font-weight: 500;
	font-size: 12.5px;
	line-height: 1.45;
	color: var(--cro-tx3);
}

.single-menu-item.is-custom .cro-item.is-accent .cro-item__title,
.single-menu-item.is-custom .cro-item.is-current .cro-item__title {
	color: var(--cro-brand);
}

.single-menu-item.is-custom .cro-item__thumb {
	flex: none;
	width: 44px;
	height: 44px;
	border-radius: 10px;
	overflow: hidden;
	background: var(--cro-s1);
}

.single-menu-item.is-custom .cro-item__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ------------------------------------------------------ 13. reduced motion */

@media (prefers-reduced-motion: reduce) {

	.mobile-menu-custom-panel .cro-menu *,
	.mobile-menu-custom-panel .cro-menu *::before,
	.mobile-menu-custom-panel .cro-menu *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
		transition-delay: 0s !important;
	}

	.mobile-menu-custom-panel .cro-menu__spin {
		animation: none !important;
		border-top-color: var(--cro-brand);
	}
}