/**
 * Navigation Component - BEM Architecture
 * Fixed header, logo, menu, theme toggle, mobile menu
 *
 * BEM Structure:
 * - Block: .gbp-navigation
 * - Elements: __logo, __menu, __link, __right, __phone, __theme-toggle, __mobile-toggle, __hamburger-line
 * - Modifiers: --scrolled, --open, --active
 *
 * Table of Contents:
 * 1. MAIN NAVIGATION ............. Fixed header with backdrop-filter
 * 2. LOGO ........................ Site logo and branding
 * 3. NAVIGATION MENU ............. Main menu links (center)
 * 4. NAVIGATION RIGHT ............ Phone number and utilities
 * 5. THEME TOGGLE ................ Dark/Light mode switcher
 * 6. MOBILE TOGGLE ............... Hamburger menu button
 * 7. RESPONSIVE .................. Tablet and Mobile breakpoints
 * 8. BACKWARDS COMPATIBILITY ..... Legacy class support
 *
 * @package ADV
 * @version 2.1.0
 * @since   2.0.0 Refactored to BEM naming convention
 * @author  ADV Group
 */

/* ========================================
   1. MAIN NAVIGATION (Block)
   ======================================== */

.gbp-navigation {
	position: fixed;
	top: 0;

	/* Display & Positioning */
	left: 0;
	z-index: 1000;
	width: 100%;
	height: var(--nav-height);
	padding: 0.5rem 0.83rem;
	background: rgb(255, 255, 255, 0.95);

	/* Stacked Transitions */
	transition:
		background-color 0.2s ease,
		box-shadow 0.25s ease-in-out,
		padding 0.15s ease;

	/* Box Model */
	border-bottom: 1px solid var(--border-color);

	/* Colors - Safari requires -webkit prefix */
	backdrop-filter: blur(16px) saturate(180%);
	will-change: transform;
}

[data-theme='dark'] .gbp-navigation {
	background: rgb(15, 23, 42, 0.95);
}

/* Block Modifier: Scrolled state */
.gbp-navigation--scrolled {
	box-shadow: var(--shadow-lg);
}

/* Nav Container - внутрішній flex контейнер */
.gbp-navigation > .gb-element {
	/* Вертикальне центрування - заповнити всю висоту */
	height: 100%;

	/* Розтягнути до країв */
	padding: 0 1rem;
}

/* ========================================
   2. LOGO (Element)
   ======================================== */

.gbp-navigation__logo {
	display: flex;

	/* Display & Positioning */
	align-items: center;
	gap: 0.5rem;

	/* Typography */
	color: var(--accent);
	font-size: 1.25rem;
	font-weight: var(--font-bold);
	text-decoration: none;
}

/* Disable hover effects on logo */
a.gbp-navigation__logo:hover,
a.gbp-navigation__logo:focus,
.gbp-navigation__logo:hover,
.gbp-navigation__logo:focus {
	background: transparent;
	color: var(--accent);
	transform: none;
	opacity: 1;
	cursor: pointer;
	outline: none;
	text-decoration: none;
}

/* ========================================
   3. NAVIGATION MENU (Element)
   ======================================== */

.gbp-navigation__menu {
	display: flex;

	/* Display & Positioning */
	align-items: center;
	gap: 1.5rem;
}

/* Navigation Link (Element) */
.gbp-navigation__link {
	/* Display & Positioning */
	position: relative;

	/* Box Model */
	padding: 0.5rem 0;

	/* Colors */
	background: transparent;
	color: var(--text-primary);

	/* Stacked Transitions */
	transition: color var(--hover-transition);

	/* Typography */
	font-size: 0.85rem;
	font-weight: var(--font-medium);
	text-decoration: none;
}

/* Underline animation */
.gbp-navigation__link::after {
	content: '';
	position: absolute;

	/* Display & Positioning */
	bottom: 0;
	left: 0;
	width: 0;

	/* Box Model */
	height: 2px;

	/* Colors */
	background: var(--accent);

	/* Stacked Transitions */
	transition: width var(--hover-transition);
}

.gbp-navigation__link:hover::after {
	width: 100%;
}

a.gbp-navigation__link:hover,
a.gbp-navigation__link:focus,
.gbp-navigation__link:hover,
.gbp-navigation__link:focus {
	background: transparent;
	color: var(--text-secondary);
	outline: none;
}

/* ========================================
   4. NAVIGATION RIGHT (Element)
   ======================================== */

.gbp-navigation__right {
	display: flex;

	/* Display & Positioning */
	align-items: center;
	gap: 0;
	margin-left: 2.5rem;
}

/* Phone Link (Element) */
.gbp-navigation__phone {
	display: flex;

	/* Display & Positioning */
	align-items: center;
	gap: 0.5rem;

	/* Typography */
	color: var(--text-primary);

	/* Stacked Transitions */
	transition: color var(--hover-transition);
	font-size: 0.85rem;
	font-weight: var(--font-medium);
	text-decoration: none;
}

a.gbp-navigation__phone:hover,
a.gbp-navigation__phone:focus,
.gbp-navigation__phone:hover,
.gbp-navigation__phone:focus {
	background: transparent;
	color: var(--text-secondary);
	outline: none;
}

/* SVG icon styling - preserve red color for phone */
.gbp-navigation__phone img {
	display: inline-block;
	flex-shrink: 0;
	vertical-align: middle;
}

/* Dark theme - lighter text for better visibility */
[data-theme='dark'] .gbp-navigation__link,
[data-theme='dark'] .gbp-navigation__phone {
	background: transparent;
	color: var(--color-white);
}

[data-theme='dark'] a.gbp-navigation__link:hover,
[data-theme='dark'] a.gbp-navigation__link:focus,
[data-theme='dark'] a.gbp-navigation__phone:hover,
[data-theme='dark'] a.gbp-navigation__phone:focus,
[data-theme='dark'] .gbp-navigation__link:hover,
[data-theme='dark'] .gbp-navigation__link:focus,
[data-theme='dark'] .gbp-navigation__phone:hover,
[data-theme='dark'] .gbp-navigation__phone:focus {
	background: transparent;
	color: var(--slate-400);
	outline: none;
}

/* ========================================
   5. THEME TOGGLE (Element)
   ======================================== */

/* stylelint-disable selector-max-specificity -- Legacy ID selectors for backwards compatibility */
.gbp-navigation__theme-toggle,
#theme-toggle,
#themeToggle {
	display: flex;
	justify-content: center;

	/* Display & Positioning */
	align-items: center;
	width: 40px;
	height: 40px;

	/* Colors */
	background: transparent;

	/* Box Model */
	border: none;
	border-radius: 50%;

	/* Stacked Transitions */
	transition:
		background-color 0.2s ease,
		transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
	cursor: pointer;

	/* Typography */
	font-size: 1.25rem;
}

.gbp-navigation__theme-toggle:hover,
.gbp-navigation__theme-toggle:focus,
#theme-toggle:hover,
#themeToggle:hover,
#theme-toggle:focus,
#themeToggle:focus {
	background: transparent;
	transform: rotate(15deg);
}

/* SVG icon inside theme toggle button */
.gbp-navigation__theme-toggle img,
#theme-toggle img,
#themeToggle img {
	display: block;
	width: 24px;
	height: 24px;
	transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* stylelint-enable selector-max-specificity */

/* Dark theme - Remove border/outline from theme toggle in all states */
[data-theme='dark'] .gbp-navigation__theme-toggle:hover,
[data-theme='dark'] .gbp-navigation__theme-toggle:focus,
[data-theme='dark'] .gbp-navigation__theme-toggle:active,
[data-theme='dark'] .gbp-navigation__theme-toggle:focus-visible,
[data-theme='dark'] #theme-toggle:hover,
[data-theme='dark'] #theme-toggle:focus,
[data-theme='dark'] #theme-toggle:active,
[data-theme='dark'] #theme-toggle:focus-visible,
[data-theme='dark'] #themeToggle:hover,
[data-theme='dark'] #themeToggle:focus,
[data-theme='dark'] #themeToggle:active,
[data-theme='dark'] #themeToggle:focus-visible {
	border: none;
	outline: none;
	box-shadow: none;
}

/* ========================================
   6. MOBILE TOGGLE (Element)
   ======================================== */

.gbp-navigation__mobile-toggle {
	display: none;
	flex-direction: column;
	justify-content: center;

	/* Display & Positioning */
	align-items: center;
	gap: 5px;
	width: 44px;
	height: 44px;
	padding: 8px;

	/* Colors */
	background: transparent;

	/* Box Model */
	border: none;
	cursor: pointer;
}

/* Hamburger Line (Element) */
.gbp-navigation__hamburger-line {
	width: 24px;

	/* Box Model */
	height: 2px;

	/* Colors */
	background: var(--text-primary);

	/* Stacked Transitions */
	transition:
		transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
		opacity 0.2s ease;
}

/* Mobile Toggle Active State (Modifier) */
.gbp-navigation__mobile-toggle--active
	.gbp-navigation__hamburger-line:nth-child(1) {
	transform: rotate(45deg) translate(6px, 6px);
}

.gbp-navigation__mobile-toggle--active
	.gbp-navigation__hamburger-line:nth-child(2) {
	opacity: 0;
}

.gbp-navigation__mobile-toggle--active
	.gbp-navigation__hamburger-line:nth-child(3) {
	transform: rotate(-45deg) translate(6px, -6px);
}

/* ========================================
   7. RESPONSIVE - TABLET
   ======================================== */

@media (width <= 1024px) {
	:root {
		--nav-height: 55px;
	}

	body {
		padding-top: 55px;
	}

	.gbp-navigation {
		height: 55px;
		padding: 0.5rem 0.65rem;
	}

	.gbp-navigation__menu {
		display: none;
	}

	.gbp-navigation__mobile-toggle {
		display: flex;
	}

	/* Menu Open State (Modifier) */
	.gbp-navigation .gbp-navigation__menu--open {
		position: fixed;
		top: 55px;
		right: 0;
		left: 0;
		z-index: 999;
		display: flex;
		flex-direction: column;

		/* Display & Positioning */
		align-items: center;
		gap: 0;
		padding: 1.5rem;

		/* Colors */
		background: var(--bg-primary);
		text-align: center;

		/* Box Model */
		box-shadow: var(--shadow-lg);

		/* Animation */
		animation: slideDown 0.3s ease;
	}

	@keyframes slideDown {
		from {
			transform: translateY(-20px);
			opacity: 0;
		}

		to {
			transform: translateY(0);
			opacity: 1;
		}
	}

	.gbp-navigation__menu--open .gbp-navigation__link {
		display: inline-block;
		padding: 0.85rem 0;
		text-align: center;
		font-size: 1rem;
	}

	/* Hide CTA button in mobile menu */
	.gbp-navigation__menu--open .gbp-navigation__cta-button {
		display: none;
	}
}

/* ========================================
   7. RESPONSIVE - MOBILE
   ======================================== */

@media (width <= 767px) {
	:root {
		--nav-height: 50px;
	}

	body {
		padding-top: 50px;
	}

	.gbp-navigation {
		height: 50px;
	}

	.gbp-navigation__menu--open {
		top: 50px;
	}

	/* Touch Targets Enhancement (min 44x44px для accessibility) */
	/* stylelint-disable selector-max-specificity -- Legacy ID selectors */
	.gbp-navigation__theme-toggle,
	#theme-toggle,
	#themeToggle {
		min-width: 44px;
		min-height: 44px;
	}
	/* stylelint-enable selector-max-specificity */

	.gbp-navigation__link {
		display: flex;
		align-items: center;
		padding: 12px 0;
		min-height: 44px;
	}

	.gbp-navigation__phone {
		padding: 10px 0;
		min-height: 44px;
	}

	/* Збільшена touch area для filter tags */
	.medici-blog-filter-tag {
		padding: 12px 20px;
		min-height: 44px;
	}
}

/* ========================================
   8. BACKWARDS COMPATIBILITY
   Legacy class names for existing HTML templates
   TODO: Remove in v2.0.0 - Use BEM classes (.gbp-navigation__*)
   ======================================== */

/* Logo - Legacy */
.gbp-logo {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	color: var(--accent);
	font-size: 1.25rem;
	font-weight: var(--font-bold);
	text-decoration: none;
}

a.gbp-logo:hover,
a.gbp-logo:focus,
.gbp-logo:hover,
.gbp-logo:focus {
	background: transparent;
	color: var(--accent);
	transform: none;
	opacity: 1;
	cursor: pointer;
	outline: none;
	text-decoration: none;
}

/* Navigation Center - Legacy */
.gbp-nav-center {
	display: flex;
	align-items: center;
	gap: 1.5rem;
}

/* Navigation Link - Legacy */
.gbp-nav-link {
	position: relative;
	padding: 0.5rem 0;
	background: transparent;
	color: var(--text-primary);
	transition: color var(--hover-transition);
	font-size: 0.85rem;
	font-weight: var(--font-medium);
	text-decoration: none;
}

.gbp-nav-link::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 0;
	height: 2px;
	background: var(--accent);
	transition: width var(--hover-transition);
}

.gbp-nav-link:hover::after {
	width: 100%;
}

a.gbp-nav-link:hover,
a.gbp-nav-link:focus,
.gbp-nav-link:hover,
.gbp-nav-link:focus {
	background: transparent;
	color: var(--text-secondary);
	outline: none;
}

/* Navigation Right - Legacy */
.gbp-nav-right {
	display: flex;
	align-items: center;
	gap: 0;
	margin-left: 2.5rem;
}

/* Phone Link - Legacy */
.gbp-nav-phone {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	color: var(--text-primary);
	transition: color var(--hover-transition);
	font-size: 0.85rem;
	font-weight: var(--font-medium);
	text-decoration: none;
}

a.gbp-nav-phone:hover,
a.gbp-nav-phone:focus,
.gbp-nav-phone:hover,
.gbp-nav-phone:focus {
	background: transparent;
	color: var(--text-secondary);
	outline: none;
}

.gbp-nav-phone img {
	display: inline-block;
	flex-shrink: 0;
	vertical-align: middle;
}

/* Dark theme - Legacy classes */
[data-theme='dark'] .gbp-nav-link,
[data-theme='dark'] .gbp-nav-phone {
	background: transparent;
	color: var(--color-white);
}

[data-theme='dark'] a.gbp-nav-link:hover,
[data-theme='dark'] a.gbp-nav-link:focus,
[data-theme='dark'] a.gbp-nav-phone:hover,
[data-theme='dark'] a.gbp-nav-phone:focus,
[data-theme='dark'] .gbp-nav-link:hover,
[data-theme='dark'] .gbp-nav-link:focus,
[data-theme='dark'] .gbp-nav-phone:hover,
[data-theme='dark'] .gbp-nav-phone:focus {
	background: transparent;
	color: var(--slate-400);
	outline: none;
}

/* Theme Toggle - Legacy */
.gbp-theme-toggle {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 40px;
	height: 40px;
	background: transparent;
	border: none;
	border-radius: 50%;
	transition:
		background-color 0.2s ease,
		transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
	cursor: pointer;
	font-size: 1.25rem;
}

.gbp-theme-toggle:hover,
.gbp-theme-toggle:focus {
	background: transparent;
	transform: rotate(15deg);
}

.gbp-theme-toggle img {
	display: block;
	width: 24px;
	height: 24px;
	transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Dark theme - Legacy theme toggle */
[data-theme='dark'] .gbp-theme-toggle:hover,
[data-theme='dark'] .gbp-theme-toggle:focus,
[data-theme='dark'] .gbp-theme-toggle:active,
[data-theme='dark'] .gbp-theme-toggle:focus-visible {
	border: none;
	outline: none;
	box-shadow: none;
}

/* Mobile Toggle - Legacy */
.gbp-mobile-toggle {
	display: none;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 5px;
	width: 44px;
	height: 44px;
	padding: 8px;
	background: transparent;
	border: none;
	cursor: pointer;
}

/* Hamburger Line - Legacy */
.hamburger-line {
	width: 24px;
	height: 2px;
	background: var(--text-primary);
	transition:
		transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
		opacity 0.2s ease;
}

.mobile-menu-toggle--active .hamburger-line:nth-child(1) {
	transform: rotate(45deg) translate(6px, 6px);
}

.mobile-menu-toggle--active .hamburger-line:nth-child(2) {
	opacity: 0;
}

.mobile-menu-toggle--active .hamburger-line:nth-child(3) {
	transform: rotate(-45deg) translate(6px, -6px);
}

/* Scrolled state - Legacy */
.gbp-navigation.scrolled {
	box-shadow: var(--shadow-lg);
}

/* Responsive Legacy - Tablet */
@media (width <= 1024px) {
	.gbp-nav-center {
		display: none;
	}

	.gbp-mobile-toggle {
		display: flex;
	}

	/* Mobile menu open state - Legacy */
	.gbp-navigation .gbp-nav-center.menu--open {
		position: fixed;
		top: 55px;
		right: 0;
		left: 0;
		z-index: 999;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 0;
		padding: 1.5rem;
		background: var(--bg-primary);
		text-align: center;
		box-shadow: var(--shadow-lg);
		animation: slideDown 0.3s ease;
	}

	.gbp-nav-center.menu--open .gbp-nav-link {
		display: inline-block;
		padding: 0.85rem 0;
		text-align: center;
		font-size: 1rem;
	}

	.gbp-nav-center.menu--open .gbp-cta-button {
		display: none;
	}
}

/* Responsive Legacy - Mobile */
@media (width <= 767px) {
	.gbp-nav-center.menu--open {
		top: 50px;
	}

	.gbp-nav-link {
		display: flex;
		align-items: center;
		padding: 12px 0;
		min-height: 44px;
	}

	.gbp-nav-phone {
		padding: 10px 0;
		min-height: 44px;
	}

	/* Hide CTA button on mobile only (keep visible on tablet/desktop) */
	.gbp-cta-button,
	.gbp-navigation__cta,
	a.gbp-cta-button,
	a.gbp-navigation__cta {
		display: none !important;
	}

	/* Hide CTA button in mobile menu when open */
	.js-mobile-menu.is-active .gbp-cta-button,
	.gbp-nav-center.menu--open .gbp-cta-button,
	.gbp-navigation__menu--open .gbp-navigation__cta {
		display: none !important;
	}
}

/* ========================================
   9. JS HOOKS - IS-ACTIVE STATES
   For scripts.js mobile menu functionality
   ======================================== */

/* Mobile Menu Overlay - Hidden by default */
.js-mobile-overlay {
	position: fixed;
	inset: 0;
	z-index: 998;
	background-color: rgb(0, 0, 0, 0.5);
	opacity: 0;
	visibility: hidden;
	transition:
		opacity 0.3s ease,
		visibility 0.3s ease;
}

/* Mobile Menu Overlay - Active State */
.js-mobile-overlay.is-active {
	opacity: 1;
	visibility: visible;
}

/* Mobile Menu Panel - Base styles */
.js-mobile-menu {
	position: fixed;
	top: var(--nav-height, 60px);
	right: 0;
	z-index: 999;
	display: flex;
	flex-direction: column;
	width: 280px;
	height: calc(100vh - var(--nav-height, 60px));
	padding: 1.5rem;
	overflow-y: auto;
	background-color: var(--bg-primary, #fff);
	box-shadow: var(--shadow-lg);
	transform: translateX(100%);
	transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Mobile Menu Panel - Active State */
.js-mobile-menu.is-active {
	transform: translateX(0);
}

/* Mobile Menu Toggle - Hamburger Animation */
.js-mobile-toggle.is-active span:nth-child(1),
.js-mobile-toggle.is-active .hamburger-line:nth-child(1),
.js-mobile-toggle.is-active .gbp-navigation__hamburger-line:nth-child(1) {
	transform: rotate(45deg) translate(5px, 5px);
}

.js-mobile-toggle.is-active span:nth-child(2),
.js-mobile-toggle.is-active .hamburger-line:nth-child(2),
.js-mobile-toggle.is-active .gbp-navigation__hamburger-line:nth-child(2) {
	opacity: 0;
}

.js-mobile-toggle.is-active span:nth-child(3),
.js-mobile-toggle.is-active .hamburger-line:nth-child(3),
.js-mobile-toggle.is-active .gbp-navigation__hamburger-line:nth-child(3) {
	transform: rotate(-45deg) translate(5px, -5px);
}

/* Mobile Menu Close Button */
.js-mobile-close {
	position: absolute;
	top: 1rem;
	right: 1rem;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 44px;
	height: 44px;
	padding: 0;
	font-size: 1.5rem;
	color: var(--text-primary);
	background-color: transparent;
	border: none;
	border-radius: 50%;
	transition: background-color 0.2s ease;
	cursor: pointer;
}

.js-mobile-close:hover,
.js-mobile-close:focus {
	background-color: var(--base-2, #f3f4f6);
}

/* Dark theme - Mobile menu */
[data-theme='dark'] .js-mobile-menu {
	background-color: var(--bg-primary, #0f172a);
}

[data-theme='dark'] .js-mobile-close:hover,
[data-theme='dark'] .js-mobile-close:focus {
	background-color: var(--slate-700, #334155);
}

/* ========================================
   10. CTA BUTTON
   ======================================== */

.gbp-cta-button {
	display: inline-block;
	padding: 0.625rem 1.25rem;
	font-size: 0.875rem;
	font-weight: var(--font-semibold, 600);
	color: var(--base-3, #fff);
	text-decoration: none;
	background-color: var(--accent, #2563eb);
	border-radius: var(--border-radius-md, 8px);
	transition:
		background-color 0.3s ease,
		transform 0.3s ease,
		box-shadow 0.3s ease;
}

.gbp-cta-button:hover,
.gbp-cta-button:focus {
	background-color: var(--accent-2, #3b82f6);
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgb(37, 99, 235, 0.3);
}

/* Hide CTA in mobile menu by default */
@media (width <= 1024px) {
	.gbp-nav-center .gbp-cta-button {
		display: none;
	}

	/* Show in mobile menu when open */
	.js-mobile-menu.is-active .gbp-cta-button,
	.gbp-nav-center.menu--open .gbp-cta-button {
		display: block;
		width: 100%;
		margin-top: 1rem;
		padding: 1rem 1.5rem;
		font-size: 1rem;
		text-align: center;
	}
}