/**
 * Theme Name:   Hello Elementor Child
 * Theme URI:    https://github.com/elementor/hello-theme-child/
 * Description:  A blank starter child theme for Hello Elementor. Add your custom code here so it survives parent theme updates.
 * Author:       Your Name
 * Author URI:   https://example.com/
 * Template:     hello-elementor
 * Version:      1.0.0
 * Requires at least: 6.0
 * Tested up to: 6.8
 * Requires PHP: 7.4
 * License:      GNU General Public License v3 or later
 * License URI:  https://www.gnu.org/licenses/gpl-3.0.html
 * Text Domain:  hello-elementor-child
 * Tags:         flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
 */

/* -------------------------------------------------------------
 * Custom styles go below this line.
 * Anything here loads AFTER the parent theme, so it wins on
 * equal specificity — no !important needed in most cases.
 * ----------------------------------------------------------- */


nav.linkbar {
	/* Brand colors + font, all in one place */
	--brand-blue: var( --e-global-color-kls_accent_400, #1a48d6);
	--brand-blue-light: #5b8bff;
	--ink: #0c1426;
	--ink-border: #1d2940;
	--slate: #54607a;
	--muted: #9aa6bf;
	--hairline: #e6ecf6;
	--blue-tint: var(--e-global-color-kls_accent_50, #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; }
}