/* sticky-menu.css — the SPEC_MENU_GOUP "WOW pill" section bar, extracted from
   b-hosting.css (/gazduire-web) so other pages can reuse the exact same look.
   First consumer beyond gazduire: /inregistrare-domenii (new-domains).

   Scope: this file styles ONLY the bar (flat full-width white bar when pinned,
   floating white pills when not, gradient-stroked pill icons). The go-up button's
   shared geometry lives in new.index.min.css; the .fixed-menu toggle + button
   behaviour come from sticky-goup.js (global), and the active-link scrollspy from
   sticky-spy.js. Desktop-only (>=1200px), matching the model page 1:1. */

/* 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. */
.bookmark { scroll-margin-top: 84px; }

/* Smooth section-to-section scrolling on menu clicks — matches the model page
   /gazduire-web (b-hosting.css ships `html{scroll-behavior:smooth}`); without it
   anchor jumps land abruptly ("poc"). The go-up button already animates via JS.
   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 (they have no ::after). */
.serv-sticky-menu::after { content: none; display: none; }

/* online/offline call-center dot shown in the bar's right side (pinned state) */
.serv-sticky-menu .check-state-sticky { display: contents; align-items: center; }
.serv-sticky-menu .check-state-sticky i {
	width: 15px; height: 15px; border-radius: 50%;
	border: 2px solid #fff; vertical-align: text-top; display: inline-block;
}
.serv-sticky-menu .check-state-sticky.checkingonline span,
.serv-sticky-menu .check-state-sticky.checkingoffline span { margin-right: 5px; }
.serv-sticky-menu .check-state-sticky.checkingonline i {
	background-color: #00bebc; margin-left: 5px;
	animation: checking-blinkstatus 1s ease-out infinite forwards;
}
.serv-sticky-menu .check-state-sticky.checkingoffline i {
	background-color: #0071b9; margin-left: 5px; margin-right: 5px;
	animation: checking-blinkstatusoffline 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); }
}
@keyframes checking-blinkstatusoffline {
	0%   { box-shadow: 0 0 3px 3px rgba(255,255,255,0); }
	15%  { box-shadow: 0 0 3px 3px #0071b9; }
	100% { box-shadow: 0 0 3px 3px rgba(255,255,255,0); }
}

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

	.serv-sticky-menu {
		background-color: rgba(0, 137, 208, .02);
		filter: brightness(0) invert(1);
		position: absolute;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 10px;
		padding: 0 40px;
		width: 100%;
		top: 100px;
		z-index: 10;
	}

	/* 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; 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;
	}

	/* go-up: small, fully inside the bar, embedded in a recessed well, right
	   after the menu — skin overrides of the shared rules in new.index.min.css */
	.serv-sticky-menu.fixed-menu .go-up {
		position: relative;
		top: auto;
		right: auto;
		transform: none;
		width: 52px;
		height: 52px;
		margin-left: 24px;
		flex-shrink: 0;
		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);
		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; }

	.serv-sticky-menu.fixed-menu .phone-num,
	.serv-sticky-menu.fixed-menu .email-num {
		background-color: #f5f6f7;
		display: flex;
		flex-wrap: nowrap;
		align-items: center;
		white-space: nowrap;
		border-radius: 25px;
		border: 2px solid #fff;
		padding: 6px 12px;
	}
	.serv-sticky-menu.fixed-menu .email-num { font-weight: 400; }

	.serv-sticky-menu.fixed-menu .motto {
		font-weight: 600;
		color: #102a3f;
		font-size: 14px;
		letter-spacing: 2px;
		margin-left: 10px;
		border-right: 5px solid #fcdca5;
		padding: 0 22px;
		line-height: 40px;
		white-space: nowrap;
		background-image: linear-gradient(109deg, rgb(206 121 121 / 0%) 0, rgb(255 209 42 / 30%) 100%);
	}

	.serv-sticky-menu.fixed-menu .ic-phone { width: 18px; height: 18px; background-repeat: no-repeat; }
	.serv-sticky-menu.fixed-menu .ic-email { width: 18px; height: 18px; background-repeat: no-repeat; margin-top: 5px; }

	.serv-sticky-menu .logo-wrap { display: none; }
	.serv-sticky-menu.fixed-menu .logo-wrap { display: block; margin-right: 16px; }
	/* .m-icon base isn't in the shared new.index.min.css, so paint it here too.
	   display:inline-block is required — an <i> defaults to inline, which ignores
	   width/height, so the logo collapses to 0 on pages whose own CSS doesn't
	   already block it (works on new-domains.css, not on premium-dns.min.css). */
	.serv-sticky-menu .m-icon { display: inline-block; background-size: contain; background-position: center; background-repeat: no-repeat; }
	.serv-sticky-menu .ic-logo-text-official-black { width: 50px; height: 40px; background-image: url("/imgs/nav_logo_black.svg"); }

	.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;
	}
	/* 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 gazduire 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: 1px solid rgba(0, 137, 208, .10);
		padding: 5px 11px;
	}
	.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 widens 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; }
}