/**
 * Header — global shrink of EU badge (70% of original) + mobile reordering
 * (logo left, menu far right, EU badge middle).
 */

/* Establish a stacking context above page content so dropdown submenus
   don't get painted behind positioned blocks (e.g. .wp-block-cover with
   position:relative on /kostnadsfri-radgivning/). */
header.wp-block-template-part {
	position: relative;
	z-index: 100;
}
header.wp-block-template-part .wp-block-navigation__submenu-container {
	z-index: 110 !important;
}

/* EU badge — desktop size per Tillväxtverket guidance. Matched to the
   Impact logo width so neither dominates the other in the header.
   aspect-ratio anchored to the SVG's viewBox so the badge always renders
   at the right shape even if a browser has the old preserveAspectRatio
   SVG cached. */
header.wp-block-template-part img[alt*="Europeiska"] {
	width: 225px !important;
	height: auto !important;
	aspect-ratio: 190 / 41;
	display: block !important;
}

/* Collapse into hamburger earlier than the WP default (600px).
   Inline nav wraps awkwardly below ~1100px because of the long Swedish labels.
   The same breakpoint also flips the header into the mobile layout
   (logo left, EU badge middle, hamburger right) — one mobile state, no
   intermediate "desktop ordering with hamburger" zone. */
@media (max-width: 1099px) {
	header.wp-block-template-part .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex !important;
	}
	header.wp-block-template-part .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none !important;
	}
	/* Re-order children of the header flex container.
	   Logo = first figure.wp-block-image
	   Nav  = .wp-block-navigation
	   EU   = bare <img alt*="Europeiska"> rendered from wp:html */
	header.wp-block-template-part > .wp-block-group > .wp-block-image {
		order: 1 !important;
	}
	header.wp-block-template-part > .wp-block-group > img[alt*="Europeiska"] {
		order: 2 !important;
	}
	header.wp-block-template-part > .wp-block-group > .wp-block-navigation {
		order: 3 !important;
		margin-left: auto !important;
	}
	/* Bigger tap target for the hamburger menu button */
	header.wp-block-template-part .wp-block-navigation__responsive-container-open {
		padding: 10px !important;
	}
	header.wp-block-template-part .wp-block-navigation__responsive-container-open svg {
		width: 32px !important;
		height: 32px !important;
	}
}

@media (max-width: 768px) {
	header.wp-block-template-part img[alt*="Europeiska"] {
		width: 170px !important;
	}
	/* Let the Impact Accelerator logo take up the remaining room */
	header.wp-block-template-part img[alt*="Impact Accelerator"] {
		width: clamp(130px, 34vw, 170px) !important;
		height: auto !important;
	}
	/* Tighten header padding */
	header.wp-block-template-part > .wp-block-group {
		padding-left: 16px !important;
		padding-right: 16px !important;
		gap: 12px !important;
	}
}

@media (max-width: 480px) {
	header.wp-block-template-part img[alt*="Europeiska"] {
		width: 140px !important;
	}
	header.wp-block-template-part img[alt*="Impact Accelerator"] {
		width: clamp(100px, 30vw, 130px) !important;
	}
}

/* ===== Mobile menu overlay =====
   Goals:
   - Site header stays visible above the panel (overlay starts at
     --impact-header-height set live by mobile-nav.js)
   - Left-aligned items, IvyMode 22px, 64px tap targets, hairline dividers
   - "Vi erbjuder" expands inline as an accordion (sub-items appear below
     the parent row, indented; tap again to collapse)
   - Footer strip at the bottom: EU badge + contact mail
*/

.impact-menu-tail {
	display: none;
}

@media (max-width: 1099px) {
	/* Hide the hamburger button while the overlay is open — the X inside
	   the panel takes its place. (My earlier rule forced the hamburger
	   visible at this breakpoint; here we walk that back when modal is
	   open.) */
	html.has-modal-open
		header.wp-block-template-part
		.wp-block-navigation__responsive-container-open {
		display: none !important;
	}

	/* Push the overlay below the persistent site header. overflow-x hidden
	   stops any stray child from triggering horizontal scroll. */
	.wp-block-navigation__responsive-container.is-menu-open {
		top: var(--impact-header-height, 96px) !important;
		left: 0 !important;
		right: 0 !important;
		width: 100% !important;
		max-width: 100% !important;
		padding: 0 !important;
		background-color: var(--wp--preset--color--parchment, #f2e3d6) !important;
		overflow-x: hidden;
		overflow-y: auto;
		box-sizing: border-box !important;
	}
	.wp-block-navigation__responsive-container.is-menu-open *,
	.wp-block-navigation__responsive-container.is-menu-open *::before,
	.wp-block-navigation__responsive-container.is-menu-open *::after {
		box-sizing: border-box;
	}

	/* Animate panel in. Avoid `transform` here — a transform on this
	   element creates a fixed-positioning containing block, which would
	   anchor the X (position: fixed) to this element instead of the
	   viewport. Pure opacity fade only. */
	.wp-block-navigation__responsive-container.is-menu-open {
		animation: impact-menu-fade-in 200ms ease-out both;
	}
	@keyframes impact-menu-fade-in {
		from { opacity: 0; }
		to   { opacity: 1; }
	}

	/* The X close button moves to the same slot the hamburger occupies in
	   the header. Position fixed so it sits above the overlay's top edge. */
	.wp-block-navigation__responsive-container.is-menu-open
		.wp-block-navigation__responsive-container-close {
		position: fixed !important;
		top: calc((var(--impact-header-height, 96px) - 32px) / 2) !important;
		right: 16px !important;
		width: 32px;
		height: 32px;
		padding: 0 !important;
		color: var(--wp--preset--color--mine-shaft) !important;
		z-index: 200;
	}
	.wp-block-navigation__responsive-container.is-menu-open
		.wp-block-navigation__responsive-container-close svg {
		width: 32px !important;
		height: 32px !important;
	}

	/* Layout the panel as a vertical flex stack so the bottom CTA pins */
	.wp-block-navigation__responsive-container.is-menu-open
		.wp-block-navigation__responsive-container-content {
		display: flex !important;
		flex-direction: column;
		min-height: calc(100dvh - var(--impact-header-height, 96px));
		padding: 0 !important;
	}

	/* Hide WP's default X position inside the modal content (we re-style
	   it as fixed above) */
	.wp-block-navigation__responsive-container.is-menu-open
		.wp-block-navigation__responsive-close {
		max-width: 100% !important;
	}

	/* Menu list — left aligned, full width, no inherited margins.
	   WP applies align-items: flex-end from the wp:navigation block's
	   justifyContent="right" attribute, which pushes mobile items off to
	   the right. Force stretch so each li fills the row. The wp:navigation
	   block also sets a 24px blockGap → row-gap, which makes rows 2-N
	   visually taller than row 1 (which has no gap above). Zero it. */
	.wp-block-navigation__responsive-container.is-menu-open
		.wp-block-navigation__container {
		list-style: none;
		margin: 0 !important;
		padding: 0 !important;
		width: 100% !important;
		display: flex !important;
		flex-direction: column;
		align-items: stretch !important;
		gap: 0 !important;
		row-gap: 0 !important;
		column-gap: 0 !important;
	}

	/* Each top-level item row. WP's nav forces flex-direction:column /
	   align-items:flex-end on the LI from the block's justifyContent=right
	   attribute — explicitly override both. */
	.wp-block-navigation__responsive-container.is-menu-open
		.wp-block-navigation__container
		> li {
		position: relative;
		display: flex !important;
		flex-direction: row !important;
		align-items: center !important;
		align-self: stretch !important;
		box-sizing: border-box !important;
		width: 100% !important;
		min-height: 64px;
		padding: 0 24px;
		border-bottom: 1px solid rgba(41, 41, 41, 0.12);
		transition: background-color 200ms ease-out;
		justify-content: flex-start !important;
	}

	/* The responsive-container-content wrapper above the UL also gets
	   align-items: flex-end from WP — push everything inside to stretch. */
	.wp-block-navigation__responsive-container.is-menu-open
		.wp-block-navigation__responsive-container-content {
		align-items: stretch !important;
	}
	.wp-block-navigation__responsive-container.is-menu-open
		.wp-block-navigation__container
		> li:first-of-type {
		border-top: 1px solid rgba(41, 41, 41, 0.12);
	}

	/* Make the entire row tappable. Use block + width:100% to avoid the
	   WP-nav flex sizing quirks where the <a> gets stuck at content width. */
	.wp-block-navigation__responsive-container.is-menu-open
		.wp-block-navigation__container
		> li > a,
	.wp-block-navigation__responsive-container.is-menu-open
		.wp-block-navigation__container
		> li > button {
		display: flex !important;
		align-items: center;
		justify-content: flex-start !important;
		flex: 1 1 auto !important;
		width: auto !important;
		min-width: 0 !important;
		min-height: 64px;
		padding: 0 !important;
		margin: 0 !important;
		background: transparent !important;
		font-family: var(--wp--preset--font-family--ivymode, "ivymode", serif) !important;
		font-weight: 300 !important;
		font-size: 22px !important;
		line-height: 1.3 !important;
		color: var(--wp--preset--color--mine-shaft) !important;
		text-align: left !important;
		text-decoration: none;
		border: 0;
	}
	/* Force the inner label to fill the <a> so its left edge sits at the
	   row's padding-left, not somewhere mid-row. */
	.wp-block-navigation__responsive-container.is-menu-open
		.wp-block-navigation__container
		> li > a > .wp-block-navigation-item__label {
		flex: 1 1 auto !important;
		text-align: left !important;
	}

	/* Pressed state (touch) — flash to cream */
	.wp-block-navigation__responsive-container.is-menu-open
		.wp-block-navigation__container
		> li:active {
		background-color: var(--wp--preset--color--cream, #f8eddf);
	}

	/* Active page — 6px persimmon stripe at the left edge */
	.wp-block-navigation__responsive-container.is-menu-open
		.wp-block-navigation__container
		> li.is-current::before {
		content: '';
		position: absolute;
		left: 0;
		top: 8px;
		bottom: 8px;
		width: 6px;
		background-color: var(--wp--preset--color--persimmon, #ff5e47);
		border-radius: 0 4px 4px 0;
	}
	.wp-block-navigation__responsive-container.is-menu-open
		.wp-block-navigation__container
		> li.is-current > a {
		font-weight: 400 !important;
	}

	/* Parent item ("Vi erbjuder") — a chunky CSS-drawn chevron sits right
	   after the label text. Drawn from two thick borders so it renders
	   the same on every device, independent of font support for unicode
	   chevrons. */
	.wp-block-navigation__responsive-container.is-menu-open
		.has-child
		> a::after,
	.wp-block-navigation__responsive-container.is-menu-open
		.has-child
		> button::after {
		content: '';
		display: inline-block;
		width: 14px;
		height: 14px;
		margin-left: 14px;
		border-right: 3px solid var(--wp--preset--color--persimmon, #ff5e47);
		border-bottom: 3px solid var(--wp--preset--color--persimmon, #ff5e47);
		transform: translateY(-4px) rotate(45deg);
		transform-origin: center;
		flex-shrink: 0;
		transition: transform 200ms ease-out;
	}
	/* Hide WP's default chevron icon — we use ::after instead */
	.wp-block-navigation__responsive-container.is-menu-open
		.has-child
		> .wp-block-navigation__submenu-icon {
		display: none !important;
	}

	/* In mobile overlay, hide submenu items by default — they only appear
	   when their parent .has-child has .is-expanded (accordion). */
	.wp-block-navigation__responsive-container.is-menu-open
		.wp-block-navigation__submenu-container {
		display: none !important;
	}

	/* ----- Accordion expand ----- */
	.wp-block-navigation__responsive-container.is-menu-open
		.has-child.is-expanded
		> .wp-block-navigation__submenu-container {
		display: flex !important;
		flex-direction: column;
		position: static !important;
		width: 100% !important;
		min-width: 0 !important;
		padding: 0 !important;
		margin: 0 !important;
		background: transparent !important;
		box-shadow: none !important;
		opacity: 1 !important;
		visibility: visible !important;
		animation: impact-accordion-in 240ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
	}
	@keyframes impact-accordion-in {
		from { opacity: 0; transform: translateY(-4px); }
		to   { opacity: 1; transform: translateY(0); }
	}

	/* When the parent is expanded, flip the chevron upward */
	.wp-block-navigation__responsive-container.is-menu-open
		.has-child.is-expanded
		> a::after,
	.wp-block-navigation__responsive-container.is-menu-open
		.has-child.is-expanded
		> button::after {
		transform: translateY(2px) rotate(-135deg);
	}

	/* The accordion makes the parent <li> a column so the submenu UL sits
	   below the row instead of beside the label. The .has-child row stays
	   on top, sub-items stack underneath. */
	.wp-block-navigation__responsive-container.is-menu-open
		.has-child.is-expanded {
		flex-wrap: wrap !important;
		padding-bottom: 8px;
	}

	/* Submenu items — slightly smaller, indented, DM Sans Medium to
	   distinguish them from top-level rows. */
	.wp-block-navigation__responsive-container.is-menu-open
		.has-child.is-expanded
		> .wp-block-navigation__submenu-container
		> li {
		display: flex !important;
		flex-direction: row !important;
		align-items: center !important;
		align-self: stretch !important;
		width: 100% !important;
		min-height: 52px;
		padding: 0 24px 0 36px;
	}
	.wp-block-navigation__responsive-container.is-menu-open
		.has-child.is-expanded
		> .wp-block-navigation__submenu-container
		> li > a {
		display: flex !important;
		flex: 1 1 auto !important;
		min-width: 0 !important;
		align-items: center;
		min-height: 52px;
		padding: 0 !important;
		margin: 0 !important;
		font-family: var(--wp--preset--font-family--dm-sans) !important;
		font-weight: 500 !important;
		font-size: 16px !important;
		color: var(--wp--preset--color--mine-shaft) !important;
		text-decoration: none;
	}

	/* ----- Tail: CTA + footer strip ----- */
	.impact-menu-tail {
		display: block;
		margin-top: auto;
		padding: 24px 24px calc(24px + env(safe-area-inset-bottom, 0px));
	}
	.impact-menu-cta {
		display: block;
		width: 100%;
		min-height: 56px;
		padding: 16px 24px;
		background-color: var(--wp--preset--color--mint, #c3e6e0);
		color: var(--wp--preset--color--mine-shaft);
		font-family: var(--wp--preset--font-family--dm-sans);
		font-weight: 500;
		font-size: 17px;
		text-align: center;
		text-decoration: none;
		border-radius: 9999px;
		transition: background-color 200ms ease-out;
	}
	.impact-menu-cta:hover,
	.impact-menu-cta:focus-visible {
		background-color: var(--wp--preset--color--persimmon, #ff5e47);
		color: var(--wp--preset--color--mine-shaft);
		text-decoration: none;
	}
	.impact-menu-cta:focus-visible {
		outline: 2px solid var(--wp--preset--color--persimmon);
		outline-offset: 4px;
	}
	.impact-menu-footer {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 16px;
		margin-top: 20px;
		padding-top: 20px;
		border-top: 1px solid rgba(41, 41, 41, 0.12);
	}
	.impact-menu-footer__eu {
		width: 120px;
		height: auto;
		display: block;
		flex-shrink: 0;
	}
	.impact-menu-footer__contact {
		font-family: var(--wp--preset--font-family--dm-sans);
		font-size: 14px;
		color: rgba(41, 41, 41, 0.7);
		text-decoration: none;
		text-align: right;
	}

	/* Respect users who'd rather not animate */
	@media (prefers-reduced-motion: reduce) {
		.wp-block-navigation__responsive-container.is-menu-open,
		.wp-block-navigation__responsive-container.is-menu-open[data-impact-subview]
			[data-impact-subview-active]
			> .wp-block-navigation__submenu-container {
			animation: none;
		}
	}
}