/* =========================================================================
   Karina header — top bar + main navigation
   ========================================================================= */

/* ---------- Top bar ---------- */
.kr-topbar {
	background: linear-gradient(90deg, var(--kr-topbar-edge) 0%, var(--kr-topbar-mid) 50%, var(--kr-topbar-edge) 100%);
	color: var(--kr-white);
	font-size: 13px;
	line-height: 1;
}
.kr-topbar__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 40px;
	gap: 16px;
}
.kr-topbar__group {
	display: flex;
	align-items: center;
	gap: 28px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.kr-topbar__group li {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
}
.kr-topbar a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--kr-white) !important;
	text-decoration: none;
	opacity: 0.95;
}
.kr-topbar a:hover { opacity: 1; text-decoration: underline; }
.kr-topbar .kr-icon { width: 15px; height: 15px; opacity: 0.9; }

/* ---------- Main header ---------- */
.kr-header {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 999;
	background: var(--kr-white);
	border-bottom: 1px solid var(--kr-light-gray);
	transition: box-shadow var(--kr-transition);
}
.kr-header.is-scrolled { box-shadow: var(--kr-shadow); }

.kr-header__inner {
	display: flex;
	align-items: center;
	gap: 32px;
	min-height: 84px;
}

.kr-header__brand { flex-shrink: 0; }
.kr-logo { display: inline-flex; align-items: center; }
.kr-logo__img {
	display: block;
	width: auto;
	height: 50px;
	max-width: none;
}
.kr-logo--text {
	font-size: 24px;
	font-weight: 800;
	color: var(--kr-heading) !important;
	text-decoration: none;
}

/* Navigation */
.kr-nav { flex: 1 1 auto; }
.kr-nav__list {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.kr-nav__list > li { position: relative; margin: 0; }
.kr-nav__list > li > a {
	position: relative;
	display: block;
	padding: 30px 14px;
	color: var(--kr-heading) !important;
	font-size: 15px;
	font-weight: 500;
	text-decoration: none;
	white-space: nowrap;
}
.kr-nav__list > li > a::after {
	content: "";
	position: absolute;
	right: 14px;
	left: 14px;
	bottom: 20px;
	height: 2px;
	border-radius: 2px;
	background: var(--kr-primary);
	transform: scaleX(0);
	transition: transform var(--kr-transition);
}
.kr-nav__list > li > a:hover,
.kr-nav__list > li.current-menu-item > a,
.kr-nav__list > li.current-menu-ancestor > a,
.kr-nav__list > li.current_page_parent > a {
	color: var(--kr-primary) !important;
}
.kr-nav__list > li > a:hover::after,
.kr-nav__list > li.current-menu-item > a::after,
.kr-nav__list > li.current-menu-ancestor > a::after,
.kr-nav__list > li.current_page_parent > a::after {
	transform: scaleX(1);
}

/* Dropdown (for future sub-pages: services / distribution centers) */
.kr-nav__list .sub-menu {
	position: absolute;
	top: 100%;
	right: 0;
	min-width: 220px;
	margin: 0;
	padding: 8px 0;
	list-style: none;
	background: var(--kr-white);
	border: 1px solid var(--kr-light-gray);
	border-radius: var(--kr-radius);
	box-shadow: var(--kr-shadow);
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity var(--kr-transition), transform var(--kr-transition), visibility var(--kr-transition);
}
.kr-nav__list > li:hover > .sub-menu,
.kr-nav__list > li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}
.kr-nav__list .sub-menu a {
	display: block;
	padding: 9px 18px;
	color: var(--kr-heading) !important;
	font-size: 14px;
	text-decoration: none;
}
.kr-nav__list .sub-menu a:hover { background: var(--kr-soft-bg); color: var(--kr-primary) !important; }

/* CTA */
.kr-header__cta { flex-shrink: 0; }
.kr-header__cta .kr-icon { width: 17px; height: 17px; }

/* Mobile toggle (hidden on desktop) */
.kr-menu-toggle {
	display: none;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: var(--kr-radius);
	background: transparent !important;
	color: var(--kr-heading) !important;
	border: 0 !important;
	box-shadow: none !important;
	cursor: pointer;
}
.kr-menu-toggle .kr-icon { width: 26px; height: 26px; }
.kr-menu-toggle__close { display: none; }
.kr-menu-toggle[aria-expanded="true"] .kr-menu-toggle__open { display: none; }
.kr-menu-toggle[aria-expanded="true"] .kr-menu-toggle__close { display: inline-flex; }

/* Mobile panel */
.kr-mobile-nav {
	border-top: 1px solid var(--kr-light-gray);
	background: var(--kr-white);
	padding-block: 8px 20px;
	max-height: calc(100vh - 120px);
	overflow-y: auto;
}
.kr-mobile-nav__list {
	margin: 0 0 16px;
	padding: 0;
	list-style: none;
}
.kr-mobile-nav__list li { margin: 0; }
.kr-mobile-nav__list a {
	display: block;
	padding: 13px 4px;
	border-bottom: 1px solid var(--kr-light-gray);
	color: var(--kr-heading) !important;
	font-size: 16px;
	font-weight: 500;
	text-decoration: none;
}
.kr-mobile-nav__list .current-menu-item > a { color: var(--kr-primary) !important; }
.kr-mobile-nav__list .sub-menu { list-style: none; margin: 0; padding: 0 16px 0 0; }
.kr-mobile-nav__list .sub-menu a { font-size: 15px; font-weight: 400; }

/* ---------- Responsive ---------- */
@media (max-width: 1200px) {
	.kr-header__inner { gap: 20px; }
	.kr-nav__list > li > a { padding-inline: 10px; font-size: 14px; }
	.kr-nav__list > li > a::after { right: 10px; left: 10px; }
}

@media (max-width: 1024px) {
	.kr-hide-mobile { display: none !important; }
	.kr-topbar { font-size: 12px; }
	.kr-topbar__inner { min-height: 36px; }

	.kr-header__inner {
		min-height: 68px;
		gap: 12px;
		justify-content: space-between;
	}
	.kr-nav,
	.kr-header__cta { display: none; }
	.kr-menu-toggle { display: inline-flex; }
	.kr-header__brand {
		flex: 1 1 auto;
		display: flex;
		justify-content: flex-end; /* RTL: logo sits on the far left */
	}
	/* mobile: show only the K mark (right part of the horizontal logo) */
	.kr-logo__img {
		width: 59px;
		height: 42px;
		object-fit: cover;
		object-position: 100% 50%;
	}
	/* mobile menu overlays the page instead of pushing the hero down */
	.kr-mobile-nav {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		z-index: 998;
		box-shadow: 0 18px 40px rgba(11, 21, 58, 0.12);
	}
}

@media (max-width: 480px) {
	:root { --kr-gutter: 16px; }
	.kr-topbar__group { gap: 14px; }
	.kr-logo__img { width: 56px; height: 40px; }
}

/* Hide any leftover Astra header markup, just in case */
.ast-primary-header-bar,
.ast-mobile-header-wrap,
.ast-above-header-wrap,
.ast-below-header-wrap { display: none !important; }

/* No dotted/blue focus box on mouse click (Astra's a:focus-visible dotted outline).
   Keyboard users still get a clear ring: custom.js adds .kr-kbd to <html> after the Tab key. */
.kr-header a:focus, .kr-header a:focus-visible,
.kr-header button:focus, .kr-header button:focus-visible,
.kr-topbar a:focus, .kr-topbar a:focus-visible,
.kr-mobile-nav a:focus, .kr-mobile-nav a:focus-visible,
.karina-cap-nav-item:focus, .karina-cap-nav-item:focus-visible,
.kr-footer a:focus, .kr-footer a:focus-visible { outline: none !important; box-shadow: none; }
html.kr-kbd .kr-header a:focus-visible,
html.kr-kbd .kr-header button:focus-visible,
html.kr-kbd .kr-topbar a:focus-visible,
html.kr-kbd .kr-mobile-nav a:focus-visible,
html.kr-kbd .karina-cap-nav-item:focus-visible,
html.kr-kbd .kr-footer a:focus-visible { outline: 2px solid var(--kr-light-blue) !important; outline-offset: 3px; border-radius: 6px; }