/* renalis.gr — Elementor chrome retarget layer
   ============================================================================
   style.css is generated from mocks/mock.css and targets the mock's markup.
   The header, footer and slide-in menu are Elementor widgets now, so they emit
   Elementor's classes instead. This file re-targets the design onto those.

   Kept separate from style.css on purpose: scripts/port_css.py regenerates
   style.css wholesale from the mock, which would wipe anything appended there.
   ========================================================================= */

/* --------------------------------------------------- slide-in menu: submenus

   Elementor renders sub-menus through SmartMenus, which positions them
   absolutely, like a desktop hover dropdown. Inside a full-height slide-in
   panel they have to expand *inline* and push the list down — «απλώνονται
   όπως στο mediprime» (BRIEF.md §3).

   SmartMenus still owns the open/close state: it writes an inline `display`
   on the sub-menu and toggles a `highlighted` class on the parent link. So
   nothing here forces a branch open — this only fixes placement and skin.
   Do NOT add `display: block !important` here; it would pin every branch open
   and break the accordion.                                                   */

.elementor-popup-modal .elementor-nav-menu--main ul.sub-menu {
	position: static !important;
	width: 100% !important;
	min-width: 0 !important;
	margin: 0;
	padding: 0.2rem 0 0.9rem 1.25rem;
	background: transparent !important;
	box-shadow: none !important;
	border: 0 !important;
	transform: none !important;
}

.elementor-popup-modal .elementor-nav-menu--main ul.sub-menu li {
	border: 0;
}

.elementor-popup-modal .elementor-nav-menu--main .elementor-sub-item {
	display: block;
	padding: 0.42rem 0 !important;
	font-size: 1.05rem;
	line-height: 1.45;
	color: rgba(255, 255, 255, 0.72);
	background: transparent !important;
	border: 0;
	transition: color 0.2s;
}

.elementor-popup-modal .elementor-nav-menu--main .elementor-sub-item:hover,
.elementor-popup-modal .elementor-nav-menu--main .elementor-sub-item:focus,
.elementor-popup-modal .elementor-nav-menu--main .elementor-sub-item.highlighted {
	color: var(--sage);
	background: transparent !important;
}

/* ------------------------------------------------ parent rows: link + toggle

   The parent is a real page AND an expander: tapping the label navigates,
   tapping the caret opens the branch. That is SmartMenus' default split and
   it matches the decision recorded in BRIEF.md §5.                           */

.elementor-popup-modal .elementor-nav-menu--main .elementor-item {
	display: flex;
	align-items: center;
	justify-content: flex-start;
}

.elementor-popup-modal .elementor-nav-menu--main .elementor-item .sub-arrow {
	margin-left: auto;
	padding-left: 1rem;
	display: inline-flex;
	align-items: center;
	transition: transform 0.25s ease;
}

.elementor-popup-modal .elementor-nav-menu--main .elementor-item .sub-arrow svg {
	width: 0.6em;
	height: 0.6em;
	fill: currentColor;
}

.elementor-popup-modal .elementor-nav-menu--main .elementor-item.highlighted .sub-arrow {
	transform: rotate(180deg);
}

/* Hairlines between top-level rows only, never inside a branch. */
.elementor-popup-modal .elementor-nav-menu--main > ul.elementor-nav-menu > li {
	border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.elementor-popup-modal .elementor-nav-menu--main > ul.elementor-nav-menu > li:first-child {
	border-top: 1px solid rgba(255, 255, 255, 0.14);
}

/* ------------------------------------------------- footer menu: parents only

   The footer column lists top-level pages only. Elementor's Nav Menu widget has
   no depth control, so the branches are hidden here rather than by pointing the
   widget at a second, duplicate WP menu — one menu means the footer cannot
   drift out of step with the header when the client edits Κύριο Μενού.

   NEVER hide ul.sub-menu with `display: none !important` here. SmartMenus gates
   its whole teardown on `$sub.css('display') != 'none'`
   (jquery.smartmenus.js:583) and only unsets `.highlighted` on the parent link
   inside that branch (:609). Force the computed display to none and menuShow
   still ADDS `.highlighted` (:955-961) while menuHide can never remove it — so
   the parent link keeps Elementor's hover skin permanently, because
   `.elementor-item.highlighted` is styled exactly like `:hover`.

   Hiding by visibility instead leaves `display` toggling normally, so
   SmartMenus opens and closes its own state correctly and nothing sticks. This
   is the mirror of the popup rule above: there, do not force it open; here, do
   not force it shut.                                                          */

.footer-nav .elementor-nav-menu .sub-menu {
	visibility: hidden !important;
	opacity: 0 !important;
	pointer-events: none !important;
	width: 0 !important;
	min-width: 0 !important;
	height: 0 !important;
	overflow: hidden !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	box-shadow: none !important;
}

/* The caret is inert chrome — SmartMenus never reads its display. */
.footer-nav .elementor-nav-menu .sub-arrow {
	display: none !important;
}

/* ------------------------------------------------------- counter alignment */

/* Elementor's counter centres its number by growing BOTH the prefix and the
   suffix span (`--counter-prefix-grow` / `--counter-suffix-grow`, defaults 1).
   Every other number on the site — timeline years, eyebrows, split labels —
   hangs off the left rule, so a centred counter reads as a mistake.

   The panel control that should fix this is `number_position`, and it is
   BROKEN in Elementor 4.2.2: it emits `text-align:{{VALUE}}` literally, an
   invalid declaration, instead of substituting the chosen value. `number_
   alignment` emits nothing at all. There is no panel-only fix, which is why
   this lives here and not in the page — see BRIEF.md §5f.

   Two properties, no !important, no layout override: the prefix stops
   growing, the suffix takes the slack, the number sits left. */

.elementor-widget-counter .elementor-counter-number-wrapper {
	--counter-prefix-grow: 0;
	--counter-suffix-grow: 1;
}