/* SShK Theme – header och navigation. Mobile first. */

.site-header {
	background: var(--sshk-white);
	border-bottom: 1px solid var(--sshk-line);
	box-shadow: 0 3px 0 var(--sshk-red);
	position: relative;
	z-index: 50;
}
.site-header__inner {
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
	gap: var(--sshk-space-sm) var(--sshk-space-lg);
	max-width: var(--sshk-wide);
	margin-inline: auto;
	padding: var(--sshk-space-sm) var(--sshk-gutter);
}

/* Logotyp: alltid till vänster, med friyta */
.site-branding { margin-right: auto; padding-block: var(--sshk-space-xs); }
.site-branding .custom-logo-link { display: block; line-height: 0; }
.site-branding .custom-logo { display: block; width: auto; height: auto; max-height: 3.25rem; }
.site-title { font-weight: 800; font-size: 1.25rem; color: var(--sshk-red); text-decoration: none; }

/* Mobilknapp */
.menu-toggle {
	display: inline-flex; align-items: center; gap: var(--sshk-space-sm);
	min-height: 44px; min-width: 44px; padding: var(--sshk-space-sm) var(--sshk-space-md);
	font: inherit; font-size: 0.9375rem; font-weight: 600;
	color: var(--sshk-ink); background: transparent;
	border: 1px solid var(--sshk-line); border-radius: var(--sshk-radius); cursor: pointer;
}
.menu-toggle:hover { border-color: var(--sshk-red); color: var(--sshk-red); }
.menu-toggle__icon,
.menu-toggle__icon::before,
.menu-toggle__icon::after {
	display: block; width: 1.125rem; height: 2px; background: currentColor; border-radius: 1px;
	transition: transform 0.2s, background-color 0.2s;
}
.menu-toggle__icon { position: relative; }
.menu-toggle__icon::before, .menu-toggle__icon::after { content: ""; position: absolute; left: 0; }
.menu-toggle__icon::before { top: -6px; }
.menu-toggle__icon::after { top: 6px; }
.menu-toggle[aria-expanded="true"] .menu-toggle__icon { background: transparent; }
.menu-toggle[aria-expanded="true"] .menu-toggle__icon::before { top: 0; transform: rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle__icon::after { top: 0; transform: rotate(-45deg); }

/* Navigation – mobil (standard) */
.main-navigation { flex-basis: 100%; display: none; padding-bottom: var(--sshk-space-md); }
.main-navigation.is-open { display: block; }
.main-navigation ul { list-style: none; margin: 0; padding: 0; }
.main-navigation li { position: relative; border-top: 1px solid var(--sshk-line); }
.main-navigation li li { border-top: 0; }
.main-navigation a {
	display: block; padding: 0.75rem var(--sshk-space-xs); min-height: 44px;
	font-size: 1rem; font-weight: 600; line-height: 1.35;
	color: var(--sshk-ink); text-decoration: none;
}
.main-navigation a:hover,
.main-navigation .current-menu-item > a,
.main-navigation .current-menu-ancestor > a { color: var(--sshk-red); }
.main-navigation .sub-menu { display: none; padding-left: var(--sshk-space-md); border-left: 3px solid var(--sshk-yellow); margin-bottom: var(--sshk-space-sm); }
.main-navigation .sub-menu a { font-weight: 400; }
.main-navigation .is-open > .sub-menu { display: block; }
.main-navigation .menu-item-has-children { display: flex; flex-wrap: wrap; }
.main-navigation .menu-item-has-children > a { flex: 1 1 0; }
.main-navigation .sub-menu { flex-basis: 100%; }

/* Diskret pil, inget färgblock */
.submenu-toggle {
	flex: 0 0 44px; width: 44px; min-height: 44px;
	background: none; border: 0; border-radius: var(--sshk-radius); cursor: pointer; color: var(--sshk-ink);
}
.submenu-toggle::before {
	content: ""; display: block; width: 0.45rem; height: 0.45rem; margin: -0.15rem auto 0;
	border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
	transform: rotate(45deg); transition: transform 0.2s;
}
.submenu-toggle:hover { color: var(--sshk-red); }
.submenu-toggle[aria-expanded="true"]::before { transform: rotate(-135deg); margin-top: 0.15rem; }

/* Navigation – desktop */
@media (min-width: 64em) {
	.site-header__inner { flex-wrap: nowrap; }
	.menu-toggle { display: none; }
	.main-navigation { display: block; flex: 1 1 auto; padding-bottom: 0; }
	.main-navigation > ul { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0 var(--sshk-space-xs); }
	.main-navigation li { border-top: 0; }
	.main-navigation > ul > li > a {
		display: flex; align-items: center; min-height: 48px;
		padding: var(--sshk-space-sm) 0.625rem;
		font-size: 0.9375rem;
		border-bottom: 3px solid transparent;
	}
	.main-navigation > ul > li > a:hover,
	.main-navigation > ul > li:focus-within > a { border-bottom-color: var(--sshk-yellow); }
	.main-navigation > ul > .current-menu-item > a,
	.main-navigation > ul > .current-menu-ancestor > a { border-bottom-color: var(--sshk-red); }

	.main-navigation .menu-item-has-children { flex-wrap: nowrap; align-items: center; }
	.main-navigation .menu-item-has-children > a { flex: 0 1 auto; padding-right: 0; }
	.submenu-toggle { flex: 0 0 24px; width: 24px; min-height: 48px; }

	.main-navigation .sub-menu {
		position: absolute; top: 100%; left: 0; min-width: 16rem; z-index: 10;
		padding: var(--sshk-space-sm) 0; margin: 0; border-left: 0;
		background: #fff;
		border: 1px solid var(--sshk-line); border-top: 3px solid var(--sshk-yellow);
		border-radius: 0 0 var(--sshk-radius) var(--sshk-radius);
		box-shadow: 0 8px 20px rgba(33, 33, 34, 0.1);
	}
	.main-navigation .sub-menu a { padding: 0.5rem var(--sshk-space-md); font-size: 0.9375rem; }
	.main-navigation .sub-menu a:hover { background: rgba(171, 25, 45, 0.06); }
	.main-navigation .sub-menu .sub-menu { top: -0.5rem; left: 100%; }
	.main-navigation li:hover > .sub-menu,
	.main-navigation li:focus-within > .sub-menu,
	.main-navigation .is-open > .sub-menu { display: block; }
	.main-navigation .sub-menu .menu-item-has-children { flex-wrap: wrap; }
	.main-navigation .sub-menu .submenu-toggle { flex: 0 0 36px; min-height: 36px; }
	/* Undermenyer nära högerkanten öppnas åt vänster */
	.main-navigation > ul > li:nth-last-child(-n+3) > .sub-menu { left: auto; right: 0; }
	.main-navigation > ul > li:nth-last-child(-n+3) .sub-menu .sub-menu { left: auto; right: 100%; }
}