/* ==========================================================================
   Kalon — hard-coded header (see header.php)
   Transparent header overlaying the site's dark-wood body background.
   Nav: Roboto Slab, white, orange (#e9530d) on hover/active.
   Desktop shows the full nav + social; below 1024px the nav + social hide and
   the oui OntheSide off-canvas menu takes over (configured separately).
   ========================================================================== */

.kalon-header {
	position: relative;
	z-index: 100;
	width: 100%;
	background: transparent;
	padding: 22px 0;
}

.kalon-header__inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 24px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
}

/* --- Logo --------------------------------------------------------------- */
.kalon-header__logo {
	flex: 0 0 auto;
	display: inline-flex;
	line-height: 0;
}
.kalon-header__logo img {
	height: 40px;
	width: auto;
	display: block;
}

/* --- Navigation --------------------------------------------------------- */
.kalon-header__nav {
	flex: 1 1 auto;
	display: flex;
	justify-content: flex-end;
}

.kalon-menu,
.kalon-menu .sub-menu {
	list-style: none;
	margin: 0;
	padding: 0;
}

.kalon-menu {
	display: flex;
	align-items: center;
	gap: 30px;
}

.kalon-menu li {
	position: relative;
}

.kalon-menu a {
	font-family: "Roboto Slab", serif;
	font-size: 13px;
	font-weight: 400;
	line-height: 1.4;
	color: #fff;
	text-decoration: none;
	white-space: nowrap;
	transition: color 0.2s ease;
}

.kalon-menu > li > a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 0;
}

.kalon-menu a:hover,
.kalon-menu a:focus-visible,
.kalon-menu .current-menu-item > a,
.kalon-menu .current-menu-ancestor > a {
	color: #e9530d;
}

/* Dropdown caret for items with children */
.kalon-menu .menu-item-has-children > a::after {
	content: "";
	width: 0;
	height: 0;
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	border-top: 4px solid currentColor;
	margin-left: 2px;
	transition: transform 0.2s ease;
}

/* --- Submenu (e.g. Pizzas) ---------------------------------------------- */
.kalon-menu .sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 220px;
	background: #211b18;
	border-radius: 10px;
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
	padding: 8px;
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
	z-index: 10;
}

.kalon-menu li:hover > .sub-menu,
.kalon-menu li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.kalon-menu .sub-menu a {
	display: block;
	padding: 9px 12px;
	border-radius: 6px;
	white-space: normal;
}

.kalon-menu .sub-menu a:hover,
.kalon-menu .sub-menu a:focus-visible {
	background: rgba(233, 83, 13, 0.14);
	color: #e9530d;
}

/* --- Social ------------------------------------------------------------- */
.kalon-header__social {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 10px;
}

.kalon-social {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.08);
	color: #fff;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.kalon-social:hover,
.kalon-social:focus-visible {
	background: #e9530d;
	color: #fff;
}

/* --- Tools: accessibility + consent ------------------------------------- */
.kalon-header__tools {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 10px;
}

/* !important defends against the site's aggressive global <button> styling
   (solid orange, square) leaking into these buttons — same leak that hit the
   oui4all panel. .kalon-social is an <a> so it isn't affected. */
.kalon-header__tools .kalon-tool {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	padding: 0 !important;
	border: none !important;
	border-radius: 50% !important;
	background: rgba(255, 255, 255, 0.08) !important;
	box-shadow: none !important;
	color: #fff !important;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease;
}
.kalon-header__tools .kalon-tool svg {
	stroke: #fff;
}
.kalon-header__tools .kalon-tool:hover,
.kalon-header__tools .kalon-tool:focus-visible {
	background: #e9530d !important;
	color: #fff !important;
	outline: none;
}

/* Accessibility is triggered from our own buttons (header on desktop, sidebar
   on mobile), so hide oui4all's own floating button everywhere. It stays in the
   DOM (hidden) so those buttons can proxy-click it. */
.oui4all__openbtn {
	display: none !important;
}

/* --- Mobile hamburger (opens the oui OntheSide sidebar) ----------------- */
/* Defended against the global <button> leak, same as .kalon-tool. */
.kalon-header .kalon-burger {
	display: none; /* shown < 1024px */
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 34px;
	height: 34px;
	padding: 6px !important;
	border: none !important;
	border-radius: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	cursor: pointer;
}
.kalon-header .kalon-burger span {
	display: block;
	width: 100%;
	height: 2px;
	border-radius: 2px;
	background: #fff;
}

/* --- Responsive: hand off to oui OntheSide below 1024px ----------------- */
@media (max-width: 1024px) {
	.kalon-header__nav,
	.kalon-header__tools {
		display: none;
	}
	.kalon-header .kalon-burger {
		display: inline-flex;
	}
	.kalon-header__inner {
		justify-content: space-between;
	}
}