/* Navigation stays a semantic link container. The native Mini-Cart is its
   sibling inside this explicit action row, never a block dropped below it. */
:root {
	--hk-mobile-gutter: 16px;
}

header .hk-header-actions > .stk-column-wrapper > .stk-inner-blocks {
	display: flex !important;
	flex-flow: row nowrap;
	align-items: center;
	justify-content: flex-end;
	gap: 12px;
}

header .hk-header-actions .jok-header-nav {
	flex: 0 0 auto;
	min-width: max-content;
}

header .hk-header-actions .wp-block-navigation__container {
	flex-wrap: nowrap;
}

header .jok-desktop-header-green-part .hk-header-actions > .stk-column-wrapper > .stk-inner-blocks {
	justify-content: center;
}

@media screen and (min-width: 1440px) {
	header .jok-desktop-header-green-part {
		--hk-header-gap: clamp(20px, 2vw, 30px);
		padding-right: var(--hk-header-gap) !important;
		padding-left: var(--hk-header-gap) !important;
	}

	/* The five rendered header cells share one predictable gutter. The
	   navigation/action cell absorbs all space left by the fixed controls. */
	header .jok-desktop-header-green-part > .wp-block-stackable-columns > .stk-row {
		display: grid !important;
		grid-template-columns: 238px 32px minmax(440px, 1fr) 250px 225px;
		column-gap: var(--hk-header-gap);
		align-items: center;
	}

	header .jok-desktop-header-green-part > .wp-block-stackable-columns > .stk-row > .jok-column-basis-auto {
		flex: none !important;
		width: 100%;
		min-width: 0;
		margin-right: 0 !important;
	}

	header .jok-desktop-header-green-part > .wp-block-stackable-columns > .stk-row > .jok-column-basis-auto:nth-child(1) .wp-block-stackable-image {
		margin-right: auto;
		margin-left: auto;
	}

	header .jok-desktop-header-green-part .hk-header-actions > .stk-column-wrapper > .stk-inner-blocks {
		gap: 30px;
	}
}

header .hk-header-actions .stk-block-icon,
header .hk-header-actions .wc-block-mini-cart {
	flex: 0 0 auto;
	margin: 0;
}

header .hk-header-actions .wc-block-mini-cart__button {
	width: 36px;
	min-width: 36px;
	height: 36px;
	min-height: 36px;
	padding: 4px !important;
	border: 0;
	background: transparent !important;
	color: inherit !important;
}

header .hk-header-actions .wc-block-mini-cart__button:focus-visible {
	outline: 2px solid var(--wp--preset--color--harjedalskok-secondary);
	outline-offset: 2px;
}

header .hk-header-actions .wc-block-mini-cart__icon {
	width: 26px;
	height: 26px;
}

header .hk-header-actions .wc-block-mini-cart__badge {
	background-color: var(--wp--preset--color--stk-global-color-64055, #d6a35f);
	color: var(--wp--preset--color--harjedalskok-main);
}

/* The full desktop row needs more room after adding the cart. Reuse the
   established compact header before the desktop controls can collide. */
@media screen and (min-width: 1210px) and (max-width: 1439px) {
	header .jok-desktop-header-green-part {
		display: none;
	}

	header .wp-block-stackable-columns.stk--hide-desktop.jok-header-shadow {
		display: flex !important;
		z-index: 5 !important;
	}

	header .wp-block-stackable-columns.stk--hide-desktop.jok-header-shadow .wp-block-stackable-image .stk-img-wrapper {
		width: 188px !important;
		height: 27px !important;
	}
}

@media screen and (max-width: 1439px) {
	header .wp-block-stackable-columns.stk--hide-desktop.jok-header-shadow > .stk-row {
		align-items: center;
	}

	header .hk-header-actions > .stk-column-wrapper > .stk-inner-blocks {
		gap: 10px;
	}

	/* Keep the established hamburger at the right edge. */
	header .hk-header-actions .wc-block-mini-cart {
		order: -1;
	}
}

@media screen and (max-width: 767px) {
	/* Keep the conditional campaign column intact. Only normalise the outer
	   gutter and the spacing inside the contact-action column. */
	header .jok-orange-header-top > .wp-block-stackable-columns {
		padding-right: calc(var(--hk-mobile-gutter) - 4px) !important;
		padding-left: calc(var(--hk-mobile-gutter) - 4px) !important;
	}

	header .jok-orange-header-top .jok-telmail-wrapper > .stk-row {
		--stk-column-gap: calc(var(--hk-mobile-gutter) / 3) !important;
	}

	header .jok-orange-header-top .jok-telmail-wrapper .stk-inner-blocks:not(.stk-row).stk--block-horizontal-flex {
		flex-direction: row;
		justify-content: space-evenly;
		column-gap: calc(var(--hk-mobile-gutter) / 3) !important;
	}

	header .jok-orange-header-top .jok-telmail-wrapper .stk-block-icon {
		margin: 0 !important;
	}

	header .jok-breadcrumbs {
		padding-right: calc(var(--hk-mobile-gutter) - 4px);
		padding-left: calc(var(--hk-mobile-gutter) - 4px);
	}

	/* The first stored column is a legacy spacer for the centred logo. Collapse
	   it only while it is actually empty, then use two explicit tracks. If the
	   column receives content, the original three-column layout remains intact. */
	header .wp-block-stackable-columns.stk--hide-desktop.jok-header-shadow {
		padding-right: var(--hk-mobile-gutter) !important;
		padding-left: var(--hk-mobile-gutter) !important;
	}

	header .wp-block-stackable-columns.stk--hide-desktop.jok-header-shadow > .stk-row:has(> .stk-block-column:first-child .stk-inner-blocks:empty) {
		display: grid !important;
		grid-template-columns: minmax(0, 1fr) auto;
		--stk-column-gap: 0 !important;
		column-gap: 0;
	}

	header .wp-block-stackable-columns.stk--hide-desktop.jok-header-shadow > .stk-row:has(> .stk-block-column:first-child .stk-inner-blocks:empty) > .stk-block-column:first-child {
		display: none;
	}

	header .wp-block-stackable-columns.stk--hide-desktop.jok-header-shadow > .stk-row:has(> .stk-block-column:first-child .stk-inner-blocks:empty) > .stk-block-column:nth-child(2),
	header .wp-block-stackable-columns.stk--hide-desktop.jok-header-shadow > .stk-row:has(> .stk-block-column:first-child .stk-inner-blocks:empty) > .hk-header-actions {
		width: auto !important;
		min-width: 0;
		max-width: none !important;
	}

	header .wp-block-stackable-columns.stk--hide-desktop.jok-header-shadow > .stk-row > .stk-block-column:nth-child(2) .stk-inner-blocks,
	header .wp-block-stackable-columns.stk--hide-desktop.jok-header-shadow > .stk-row > .stk-block-column:nth-child(2) figure {
		text-align: left !important;
	}

	header .wp-block-stackable-columns.stk--hide-desktop.jok-header-shadow .wp-block-stackable-image .stk-img-wrapper {
		display: block;
		width: 176px !important;
		height: 26px !important;
		margin-right: auto;
		margin-left: 0;
	}

	header .wp-block-stackable-columns.stk--hide-desktop.jok-header-shadow .hk-header-actions > .stk-column-wrapper > .stk-inner-blocks {
		justify-content: flex-end;
		gap: var(--hk-mobile-gutter) !important;
	}

	/* Stackable stores one-off physical values on copied hero blocks. Keep the
	   vertical composition intact while aligning their content to the shared
	   mobile page gutter. */
	body .jok-first-hero .stk-block-hero__content {
		padding-inline: var(--hk-mobile-gutter) !important;
	}

	/* The e-commerce terms were inserted inside the legacy terms shell. Let the
	   shared shell own the page gutter instead of stacking two Group paddings. */
	#las-mer:has(> .hk-ecommerce-terms) {
		padding-inline: var(--hk-mobile-gutter);
	}

	#las-mer > .hk-ecommerce-terms {
		padding-inline: 0 !important;
	}

	/* Copied editorial layouts sometimes nest one background Group directly in
	   another. Normalise only inherited padding: explicit block spacing still
	   wins, so intentionally inset panels remain untouched. */
	.wp-block-group.has-background:has(> .wp-block-group.has-background) {
		padding-inline: var(--hk-mobile-gutter);
	}

	.wp-block-group.has-background > .wp-block-group.has-background {
		padding-inline: 0;
	}
}

/* The Mini-Cart is a modal drawer. Floating contact controls belong to the
   background and must not cover or receive focus over the cart content. */
body:has(.wc-block-components-drawer__screen-overlay:not(.wc-block-components-drawer__screen-overlay--is-hidden)) #imbox-container,
body:has(.wc-block-components-drawer__screen-overlay:not(.wc-block-components-drawer__screen-overlay--is-hidden)) .lc_callback_widget {
	display: none !important;
}