/* sticky-menu.css — the SPEC_MENU_GOUP section bar, v2 skin (2026-08-13 redesign).
   Strict brand colors only: blue #0071b9 + teal #00bebc + tints/white.

   States: FLOATING (over the hero: transparent bar at top:100px, left-aligned
   translucent white pills, bobbing go-up ring at the right) and PINNED
   (.fixed-menu at scrollY>=100: fixed #fcfcfc bar, 66px, NAV monogram + pills +
   recessed go-up ring + phone/email pill + gradient motto, and a 3px scroll-
   progress edge on top driven by --sp). Shared behaviour: sticky-goup.js (pin
   toggle + ring/--sp progress + eased scroll-to-top; base go-up skin lives in
   new.index.min.css) and sticky-spy.js OR the page's own scrollspy (.active).
   Desktop-only (>=1200px). */

/* Hidden by default (mobile/tablet) — the bar is a >=1200px desktop affordance. */
.serv-sticky-menu,
.serv-sticky-menu .right-side { display: none; }

/* Section-anchor offset so a clicked heading clears the 66px pinned bar. */
section[id], .bookmark { scroll-margin-top: 84px; }

/* Smooth section-to-section scrolling on menu clicks; without it anchor jumps
   land abruptly ("poc"). The go-up button animates via JS (which temporarily
   forces auto). Disabled for users who prefer reduced motion. */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Legacy-migration guard: a page moved off a per-page sticky menu may still load
   its own .serv-sticky-menu rules (e.g. wp-hosting loads pro-hosting.css). One is
   a 10px absolute ::after "hover-bridge" over the bar that swallows clicks on the
   middle of every pill — kill it. Inert on net-new pages. */
.serv-sticky-menu::after { content: none; display: none; }

/* NAV monogram — inline svg in .logo-wrap (replaced the m-icon sprite in v2). */
.serv-sticky-menu .ssm-logo { width: 46px; height: auto; display: block; }

/* online/offline call-center dot (base; the pinned pills re-skin it below) */
.serv-sticky-menu .check-state-sticky { display: contents; align-items: center; }
.serv-sticky-menu .check-state-sticky i {
	width: 14px; height: 14px; border-radius: 50%;
	border: 2px solid #fff; vertical-align: text-top; display: inline-block;
}
.serv-sticky-menu .check-state-sticky.checkingonline i {
	background-color: #00bebc; margin-left: 9px;
	animation: checking-blinkstatus 1s ease-out infinite forwards;
}
@keyframes checking-blinkstatus {
	0%   { box-shadow: 0 0 3px 3px rgba(255,255,255,0); }
	15%  { box-shadow: 0 0 3px 3px #00bebc; }
	100% { box-shadow: 0 0 3px 3px rgba(255,255,255,0); }
}

@media only screen and (min-width: 1200px) {

	.serv-sticky-menu {
		background-color: transparent;
		/* v2 drops the brightness/invert trick — floating colors are explicit.
		   filter:none neutralizes any legacy per-page invert (b-hosting & co).
		   NO will-change/transform/filter values here EVER: any of them would
		   make the bar the containing block for the go-up button's
		   position:fixed, pinning it INSIDE the 66px bar instead of the
		   viewport's bottom-right corner (owner design, 2026-08-18). */
		filter: none;
		position: absolute;
		display: flex;
		align-items: center;
		justify-content: flex-start;
		gap: 10px;
		/* BOTH states start in line with the header logo: the site header sits on
		   a centered ~1400px wrapper (logo left = (100% - 1400px)/2, e.g. 20px
		   @1440, 140px @1680, 260px @1920), so the bar follows the same formula
		   instead of a flat padding. */
		padding: 0 max(20px, calc(50% - 700px));
		width: 100%;
		top: 100px;
		z-index: 60;
	}

	/* FLOATING pills: translucent white over the hero, white stroke icons.
	   :not(.fixed-menu) out-specifies both our base and legacy page CSS. */
	.serv-sticky-menu:not(.fixed-menu) nav a {
		color: #fff;
		background-color: rgba(255, 255, 255, .16);
		border-color: rgba(255, 255, 255, .42);
	}
	.serv-sticky-menu:not(.fixed-menu) nav a .ic { stroke: #fff; }
	.serv-sticky-menu:not(.fixed-menu) nav a:hover,
	.serv-sticky-menu:not(.fixed-menu) nav a.active { background-color: rgba(255, 255, 255, .3); }

	/* the 0x0 svg carrying the shared #mg gradient defs must not be a flex item */
	.serv-sticky-menu .ssm-defs { position: absolute; width: 0; height: 0; }

	.serv-sticky-menu.fixed-menu .right-side {
		display: flex; align-items: center; gap: 14px; margin-left: auto;
	}

	.serv-sticky-menu.fixed-menu {
		position: fixed;
		top: 0;
		height: 66px;
		justify-content: flex-start;
		background-color: #fcfcfc;
		border-bottom: 4px solid rgba(0, 137, 208, .09);
		box-shadow: 0 12px 26px -16px rgba(9, 60, 110, .32);
		filter: none;
		font-weight: 600;
		color: #0071b9;
	}

	/* scroll-progress edge: grows to the right with the page's scroll percent
	   (--sp, a 0..1 fraction set by sticky-goup.js — same value as the go-up
	   ring). PERF (2026-09-02): drawn as a full-width bar scaled with
	   transform instead of an animated width — a width change dirtied layout
	   on every scroll frame, and the next scrollY read paid for it (traced:
	   ~35ms of forced layout per scroll on /colocare). transform is
	   compositor-only. */
	.serv-sticky-menu.fixed-menu::before {
		content: "";
		position: absolute;
		left: 0; top: 0;
		height: 3px;
		width: 100%;
		transform: scaleX(var(--sp, 0));
		transform-origin: 0 50%;
		will-change: transform;
		background: linear-gradient(90deg, #00bebc, #0071b9 16%) left / 100vw 3px no-repeat;
		z-index: 2;
		transition: transform .12s linear;
	}

	/* FLOATING state (owner, 2026-08-18): the button holds still — no goup-bob —
	   and sits a touch lower than the bar's centerline (owner: "putin de tot mai
	   jos"). button.go-up out-specifies new.index.min.css's :not(.fixed-menu) rule. */
	.serv-sticky-menu:not(.fixed-menu) button.go-up { animation: none; top: calc(50% + 8px); }

	/* PINNED state (owner, 2026-08-18): the go-up leaves the bar and sits FIXED
	   in the bottom-right corner — the classic back-to-top spot. Same recessed
	   well + ring skin, plus an outer shadow so it detaches from any content
	   it floats over. */
	.serv-sticky-menu.fixed-menu .go-up {
		position: fixed;
		top: auto;
		right: 24px;
		bottom: 100px;
		transform: none;
		width: 52px;
		height: 52px;
		margin: 0;
		z-index: 70;
		border-radius: 50%;
		background: #eef1f5;
		box-shadow: inset 2px 3px 7px rgba(9, 60, 110, .22), inset -2px -3px 7px rgba(255, 255, 255, .95), 0 10px 26px -12px rgba(9, 60, 110, .45);
		animation: none;
	}
	.serv-sticky-menu.fixed-menu .go-up .go-up-ring { inset: 2px; }
	.serv-sticky-menu.fixed-menu .go-up .track { stroke: #e6edf4; stroke-width: 3; }
	.serv-sticky-menu.fixed-menu .go-up .prog { stroke-width: 3; }
	.serv-sticky-menu.fixed-menu .go-up .go-up-ico {
		inset: 8px;
		box-shadow: -1px -1px 3px rgba(255, 255, 255, .95), 2px 2px 6px rgba(9, 60, 110, .18);
	}
	.serv-sticky-menu.fixed-menu .go-up .go-up-ico svg { width: 18px; height: 18px; }
	/* the shared 70px right reserve is for the corner-absolute variant only */
	.serv-sticky-menu.fixed-menu:has(.go-up) .right-side { padding-right: 0; }

	/* phone/email pills (v2): round cs-ico with a gradient-stroke glyph, bold
	   number, blinking status dot. Server-side renders ONE branch; the display
	   switches also cover a page that ever renders both. */
	.serv-sticky-menu .check-state-sticky { display: flex; align-items: center; }
	/* Legacy page CSS (b-hosting/rshosting/…) gives .check-state-sticky asymmetric
	   vertical margins (20px top / 40px bottom), which shoves the phone pill 10px
	   ABOVE the motto's centerline in the flex row. Pin it so the number sits in
	   line with the motto text on every page. */
	.serv-sticky-menu.fixed-menu .check-state-sticky { margin: 0; }
	.serv-sticky-menu.fixed-menu .phone-num,
	.serv-sticky-menu.fixed-menu .email-num {
		position: relative;
		display: flex;
		align-items: center;
		gap: 9px;
		text-decoration: none;
		white-space: nowrap;
		background: #f4f7fb;
		border: 1px solid rgba(0, 113, 185, .14);
		border-radius: 999px;
		padding: 5px 15px 5px 6px;
		box-shadow: 0 4px 14px -8px rgba(9, 60, 110, .30);
		transition: transform .22s cubic-bezier(.2, .7, .2, 1), box-shadow .22s, border-color .22s;
	}
	.serv-sticky-menu.fixed-menu .email-num { display: none; }
	.serv-sticky-menu.fixed-menu .check-state-sticky.checkingoffline .phone-num { display: none; }
	.serv-sticky-menu.fixed-menu .check-state-sticky.checkingoffline .email-num { display: flex; }
	/* hover = light only (the /colocare "Scrie-ne" glow: soft teal halo), no motion */
	.serv-sticky-menu.fixed-menu .phone-num:hover,
	.serv-sticky-menu.fixed-menu .email-num:hover {
		transform: none;
		border-color: rgba(0, 190, 188, .45);
		box-shadow: 0 4px 14px -8px rgba(9, 60, 110, .30), 0 0 26px rgba(0, 190, 188, .35);
	}
	.serv-sticky-menu.fixed-menu .cs-ico {
		flex: none;
		width: 30px; height: 30px;
		border-radius: 50%;
		display: flex; align-items: center; justify-content: center;
		background: rgba(0, 113, 185, .09);
		border: 1px solid rgba(0, 113, 185, .12);
	}
	.serv-sticky-menu.fixed-menu .cs-ico svg {
		width: 16px; height: 16px;
		fill: none;
		stroke: url(#mg);
		stroke-width: 1.9;
		stroke-linecap: round;
		stroke-linejoin: round;
	}
	.serv-sticky-menu.fixed-menu .cs-num {
		font-weight: 700; font-size: 14px; color: #0a3a5c;
		white-space: nowrap; letter-spacing: .01em;
	}
	.serv-sticky-menu.fixed-menu .email-num .cs-num { font-weight: 600; font-size: 13.5px; }
	.serv-sticky-menu.fixed-menu .check-state-sticky i {
		flex: none;
		width: 10px; height: 10px;
		border-radius: 50%;
		border: 2px solid #fff;
		box-sizing: content-box;
		margin-left: 1px;
		background: #00bebc;
	}
	.serv-sticky-menu.fixed-menu .phone-num i { background: #00bebc; animation: cs-blink 1.7s ease-out infinite; }
	.serv-sticky-menu.fixed-menu .email-num i { background: #0071b9; animation: cs-blink-off 1.7s ease-out infinite; }

	/* motto (v2): brand gradient block + teal->blue edge stripe (the yellow is gone) */
	.serv-sticky-menu.fixed-menu .motto {
		position: relative;
		display: inline-block;
		margin-left: 2px;
		padding: 0 20px;
		line-height: 40px;
		font-weight: 600;
		font-size: 13.5px;
		letter-spacing: .12em;
		color: #102a3f;
		white-space: nowrap;
		/* legacy page CSS (pro-hosting/c-vps/…) draws a yellow border-right on the
		   motto; the v2 stripe is the ::after below, so kill the border explicitly. */
		border-right: 0;
		border-radius: 4px 0 0 4px;
		background-image: linear-gradient(109deg, rgba(0, 113, 185, .04) 0%, rgba(0, 190, 188, .13) 100%);
	}
	.serv-sticky-menu.fixed-menu .motto::after {
		content: "";
		position: absolute;
		right: 0; top: 0; bottom: 0;
		width: 5px;
		background: linear-gradient(180deg, #00bebc, #0071b9);
	}

	.serv-sticky-menu .logo-wrap { display: none; }
	.serv-sticky-menu.fixed-menu .logo-wrap { display: block; margin-right: 16px; }

	.serv-sticky-menu nav {
		display: flex; align-items: center; gap: 8px; padding: 10px 0;
	}
	.serv-sticky-menu.fixed-menu nav { padding: 0; }

	.serv-sticky-menu nav a {
		display: flex;
		align-items: center;
		gap: 6px;
		font-size: 12.5px;
		white-space: nowrap;
		font-weight: 600;
		color: #102a3f;
		background-color: rgba(0, 137, 208, .08);
		border-radius: 25px;
		border: 1px solid rgba(0, 137, 208, .10);
		padding: 5px 11px;
		text-decoration: none;
	}
	/* Pin the pill geometry IDENTICALLY across rest/hover/active so it NEVER resizes —
	   otherwise a migrated page's legacy per-page CSS shifts the whole bar. On
	   wp-hosting, pro-hosting.css sets the FIXED pill to padding:12px + border:2px at
	   REST (`.serv-sticky-menu.fixed-menu a`, 0,2,1) and padding:6px 12px + border:2px
	   on HOVER (`.fixed-menu a:hover`, 0,3,1) — both out-specify the shared base, so
	   the pill was fatter than gazduire at rest AND shrank 4px on hover, shoving the
	   go-up button sideways. These .fixed-menu variants (0,2,2 / 0,3,2) beat them, so
	   every pill is the same geometry in every state. Only the background changes. */
	.serv-sticky-menu.fixed-menu nav a,
	.serv-sticky-menu nav a:hover,
	.serv-sticky-menu nav a.active,
	.serv-sticky-menu.fixed-menu nav a:hover,
	.serv-sticky-menu.fixed-menu nav a.active {
		font-size: 12.5px;
		border-width: 1px;
		border-style: solid;
		padding: 5px 11px;
	}
	.serv-sticky-menu.fixed-menu nav a,
	.serv-sticky-menu.fixed-menu nav a:hover,
	.serv-sticky-menu.fixed-menu nav a.active { border-color: rgba(0, 137, 208, .10); }
	.serv-sticky-menu nav a:hover,
	.serv-sticky-menu nav a.active,
	.serv-sticky-menu.fixed-menu nav a:hover,
	.serv-sticky-menu.fixed-menu nav a.active {
		background-color: rgba(0, 137, 208, .18);
	}

	/* WOW pill icons: stroke outlines painted with the teal->blue #mg gradient */
	.serv-sticky-menu nav a .ic {
		width: 16px;
		height: 16px;
		flex-shrink: 0;
		fill: none;
		stroke: url(#mg);
		stroke-width: 1.9;
		stroke-linecap: round;
		stroke-linejoin: round;
		transition: transform 200ms ease-out;
	}
	.serv-sticky-menu nav a:hover .ic { transform: translateY(-1px); }
}

/* Narrow desktops (1200-1439): the in-flow go-up button + the wider v2 phone pill
   squeeze the bar vs legacy; the motto yields first so logo + pills + button +
   phone keep fitting. */
@media only screen and (min-width: 1200px) and (max-width: 1439px) {
	.serv-sticky-menu.fixed-menu .motto { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.serv-sticky-menu .check-state-sticky i,
	.serv-sticky-menu.fixed-menu .phone-num i,
	.serv-sticky-menu.fixed-menu .email-num i { animation: none !important; }
	.serv-sticky-menu.fixed-menu::before { transition: none; }
	.serv-sticky-menu.fixed-menu .phone-num,
	.serv-sticky-menu.fixed-menu .email-num { transition: none; }
}

@keyframes cs-blink {
	0%, 100% { box-shadow: 0 0 0 0 rgba(0, 190, 188, 0); }
	18%      { box-shadow: 0 0 3px 3px rgba(0, 190, 188, .55); }
}
@keyframes cs-blink-off {
	0%, 100% { box-shadow: 0 0 0 0 rgba(0, 113, 185, 0); }
	18%      { box-shadow: 0 0 3px 3px rgba(0, 113, 185, .5); }
}

/* Owner 2026-09-08 — the ACTIVE pill (sticky-spy.js) must read as "you are here" in
   both bar states; it used to differ from rest/hover by a 10%-alpha border only.
   Colours only — the pill geometry stays pinned (see the .fixed-menu block above).
   Pinned bar: solid brand-blue pill, white label + icon. Floating bar (over the
   gradient band): white pill, brand-blue label + icon. */
.serv-sticky-menu.fixed-menu nav a.active,
.serv-sticky-menu.fixed-menu nav a.active:hover {
	background-color: #0071b9;
	border-color: #0071b9;
	color: #fff;
}
.serv-sticky-menu.fixed-menu nav a.active .ic { stroke: #fff; }
.serv-sticky-menu:not(.fixed-menu) nav a.active,
.serv-sticky-menu:not(.fixed-menu) nav a.active:hover {
	background-color: #fff;
	border-color: #fff;
	color: #0071b9;
}
.serv-sticky-menu:not(.fixed-menu) nav a.active .ic { stroke: #0071b9; }