/* 
 Theme Name:   3X Web Child
 Theme URI:    https://3xweb.com
 Description:  A lightweight child theme for the 3X Web parent theme. Designed for safe customization, including custom templates, styles, functions, and code modifications while preserving the ability to update the parent theme without losing changes.
 Author:       3X Web
 Author URI:   https://3xweb.com
 Template:     3XWeb
 Version:      1.0
--------------------------------------------*/

nav.linkbar {
	/* Brand colors + font, all in one place */
	--brand-blue: #1a48d6;
	--brand-blue-light: #5b8bff;
	--ink: #0c1426;
	--ink-border: #1d2940;
	--slate: #54607a;
	--muted: #9aa6bf;
	--hairline: #e6ecf6;
	--blue-tint: #f6f9ff;
	--linkbar-font: 'Manrope', 'Segoe UI', sans-serif;

	all: revert;
	box-sizing: border-box;
	position: relative;
	display: block;
	width: max-content;
	max-width: min(94vw, 820px);
	margin: 0 auto;
	border: 1px solid var(--hairline);
	border-radius: 999px;
	overflow: hidden;
	z-index: 90;
	background: rgba(255, 255, 255, .92);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	box-shadow: 0 12px 32px rgba(12, 20, 38, .08);
	font-family: var(--linkbar-font);
	transition: opacity .25s ease, transform .25s ease;
}
nav.linkbar *, nav.linkbar *::before, nav.linkbar *::after { box-sizing: border-box; }

/* Sticky position (32px extra when the WP admin bar is showing) */
nav.linkbar.linkbar-sticky { position: sticky; top: var(--linkbar-top, 20px); }
body.admin-bar nav.linkbar.linkbar-sticky { top: calc(var(--linkbar-top, 20px) + 32px); }

/* Fade away once the reader scrolls past the last section */
nav.linkbar.linkbar-finished { opacity: 0; transform: translateY(-6px); pointer-events: none; }

/* Dark (navy) look */
nav.linkbar.linkbar-navy {
	background: rgba(12, 20, 38, .94);
	border-color: var(--ink-border);
	box-shadow: 0 12px 32px rgba(12, 20, 38, .3);
}

/* ---------- Desktop: row of section buttons ---------- */
nav.linkbar .linkbar-sections {
	position: relative;
	display: flex;
	gap: 2px;
	padding: 5px 6px;
	overflow-x: auto;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
	max-width: 100%;
}
nav.linkbar .linkbar-sections::-webkit-scrollbar { display: none; }

/* One section button — `all: unset` keeps theme button styles out */
nav.linkbar button.linkbar-section {
	all: unset;
	box-sizing: border-box;
	position: relative;
	z-index: 1;
	flex: none;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 9px 16px;
	border-radius: 999px;
	cursor: pointer;
	white-space: nowrap;
	font-family: var(--linkbar-font);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.2;
	color: var(--slate);
	transition: color .2s ease;
}
nav.linkbar button.linkbar-section:hover { color: var(--ink); }
nav.linkbar.linkbar-navy button.linkbar-section { color: var(--muted); }
nav.linkbar.linkbar-navy button.linkbar-section:hover { color: #fff; }

/* Little dot marker (used by the "dot" style and the mobile menu) */
nav.linkbar .linkbar-bullet { display: none; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }

/* ---------- The sliding highlight ---------- */
nav.linkbar .linkbar-slider {
	position: absolute;
	display: none;
	pointer-events: none;
	transition: transform .3s cubic-bezier(.4, 0, .2, 1), width .3s cubic-bezier(.4, 0, .2, 1);
}
/* pill style: filled blue pill behind the current section */
nav.linkbar.linkbar-pill .linkbar-slider {
	display: block;
	top: 5px; bottom: 5px; left: 0;
	border-radius: 999px;
	background: var(--brand-blue);
	box-shadow: 0 6px 16px rgba(26, 72, 214, .28);
}
nav.linkbar.linkbar-pill button.linkbar-section.linkbar-active { color: #fff; }
/* underline style: 3px line under the current section */
nav.linkbar.linkbar-underline .linkbar-slider {
	display: block;
	bottom: 4px; left: 0; height: 3px;
	border-radius: 3px;
	background: var(--brand-blue);
}
nav.linkbar.linkbar-navy.linkbar-underline .linkbar-slider { background: var(--brand-blue-light); }
nav.linkbar.linkbar-underline button.linkbar-section.linkbar-active { color: var(--ink); }
nav.linkbar.linkbar-navy.linkbar-underline button.linkbar-section.linkbar-active { color: #fff; }
/* dot style: blue text + dot on the current section */
nav.linkbar.linkbar-dot button.linkbar-section.linkbar-active { color: var(--brand-blue); }
nav.linkbar.linkbar-navy.linkbar-dot button.linkbar-section.linkbar-active { color: var(--brand-blue-light); }
nav.linkbar.linkbar-dot button.linkbar-section.linkbar-active .linkbar-bullet { display: inline-block; }

/* ---------- Mobile pieces stay hidden on desktop ---------- */
nav.linkbar button.linkbar-mobile-header,
nav.linkbar .linkbar-mobile-menu { display: none; }

/* ================= Mobile (≤767px): collapsible bar ================= */
@media (max-width: 767px) {
	nav.linkbar { width: min(94vw, 440px); }
	nav.linkbar.linkbar-open { border-radius: 22px; }
	nav.linkbar .linkbar-sections { display: none; }

	/* Collapsed pill: dot + current section + "2/6" + arrow */
	nav.linkbar button.linkbar-mobile-header {
		all: unset;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		gap: 10px;
		width: 100%;
		min-height: 46px;
		padding: 13px 18px;
		cursor: pointer;
		font-family: var(--linkbar-font);
		font-size: 17px;
		font-weight: 700;
		line-height: 1.2;
		color: var(--ink);
	}
	nav.linkbar.linkbar-navy button.linkbar-mobile-header { color: #fff; }
	nav.linkbar .linkbar-mobile-mark { width: 8px; height: 8px; border-radius: 50%; background: var(--brand-blue); flex: none; }
	nav.linkbar.linkbar-navy .linkbar-mobile-mark { background: var(--brand-blue-light); }
	nav.linkbar .linkbar-current-label { flex: 1; min-width: 0; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
	nav.linkbar .linkbar-counter { font-size: 12px; font-weight: 700; color: var(--slate); }
	nav.linkbar.linkbar-navy .linkbar-counter { color: var(--muted); }
	nav.linkbar .linkbar-arrow { color: var(--slate); transition: transform .25s ease; flex: none; }
	nav.linkbar.linkbar-navy .linkbar-arrow { color: var(--muted); }
	nav.linkbar.linkbar-open .linkbar-arrow { transform: rotate(180deg); }

	/* Expanded menu: vertical list of all sections */
	nav.linkbar.linkbar-open .linkbar-mobile-menu { display: block; }
	nav.linkbar .linkbar-mobile-menu { border-top: 1px solid var(--hairline); padding: 6px; }
	nav.linkbar.linkbar-navy .linkbar-mobile-menu { border-top-color: var(--ink-border); }
	nav.linkbar button.linkbar-mobile-link {
		all: unset;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		gap: 9px;
		width: 100%;
		min-height: 46px;
		padding: 12px 14px;
		border-radius: 12px;
		cursor: pointer;
		text-align: left;
		font-family: var(--linkbar-font);
		font-size: 14.5px;
		font-weight: 600;
		line-height: 1.3;
		color: var(--slate);
	}
	nav.linkbar.linkbar-navy button.linkbar-mobile-link { color: var(--muted); }
	nav.linkbar button.linkbar-mobile-link.linkbar-active {
		color: var(--brand-blue);
		background: var(--blue-tint);
		font-weight: 700;
	}
	nav.linkbar.linkbar-navy button.linkbar-mobile-link.linkbar-active {
		color: var(--brand-blue-light);
		background: rgba(91, 139, 255, .12);
	}
	nav.linkbar button.linkbar-mobile-link.linkbar-active .linkbar-bullet { display: inline-block; }
}

@media (prefers-reduced-motion: reduce) {
	nav.linkbar .linkbar-slider, nav.linkbar .linkbar-arrow { transition: none; }
}