/* Headerraden (parts/header.html): logga, sök, favoriter, varukorg.

   Designkällan (Elagentenbutik Startsida.dc.html) har sökfältet som
   `flex: 1 1 320px` i en flex-rad mellan loggan och ikonerna, så det växer
   och fyller mellanrummet (~870px på en 1440px-skärm). Core:s Sök-block
   har ingen "fyll bredd"-kontroll för flex-layouter, bara ett eget
   width:100%-attribut — som inte gör något i en auto-bred flex-förälder,
   så fältet förblir ihopklämt till sitt eget innehåll (~270px) utan den
   här regeln. */
.is-style-elagenten-search {
	flex: 1 1 320px;
	min-width: 240px;
}

/* ljus beige i stället för vitt (Klara 2026-09-28) — temats base, ljusare än
   headerns base-alt */
.is-style-elagenten-search .wp-block-search__inside-wrapper,
.is-style-elagenten-search .wp-block-search__input {
	background-color: var(--wp--preset--color--base);
}

/* Topradens länkar (Butik i Skillingaryd, telefonnumret) fick temats gröna
   länkfärg + understrykning — samma beiga text som resten av raden i stället. */
.eb-topprad a {
	color: inherit;
	text-decoration: none;
}

.eb-topprad a:hover,
.eb-topprad a:focus-visible {
	text-decoration: none;
}

/* Mobil: bara "Butik i Skillingaryd" och telefonnumret i topraden — USP-raden
   (Beställ online …, El-arbeten …) radbröt till två egna rader. Samma
   brytpunkt som mobilmenyn. */
@media (max-width: 899px) {
	.eb-topprad-usp {
		display: none !important;
	}
}

/* Mobil: sökfältet är ihopfällt bakom förstoringsglaset (.eb-sokknapp) och
   fälls ut i full bredd under loggan/ikonerna. Fälls bara ihop under
   html.eb-sokikon, som mobilmeny.js sätter — utan JS syns fältet som förut. */
.eb-sokknapp {
	display: none;
}

@media (max-width: 899px) {
	.eb-sokknapp {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 48px;
		height: 48px;
		padding: 0;
		border: 1px solid var(--wp--preset--color--contrast);
		border-radius: var(--wp--custom--radius--md);
		background: transparent;
		color: var(--wp--preset--color--contrast);
		cursor: pointer;
	}

	.eb-sokknapp[hidden] {
		display: none;
	}

	.eb-sokknapp[aria-expanded="true"] {
		background: var(--wp--preset--color--contrast);
		border-color: var(--wp--preset--color--contrast);
		color: var(--wp--preset--color--base);
	}

	.eb-sokikon .is-style-elagenten-search {
		display: none;
	}

	.eb-sokikon.eb-sok-oppen .is-style-elagenten-search {
		display: block;
		flex-basis: 100%;
		order: 10;
	}
}

/* Mobil: loggan till vänster, ikonerna (sök, hamburgaren)
   längst till höger. Favoriter och varukorg är borttagna ur headern
   (Klara 2026-09-28). */
@media (max-width: 899px) {
	.eb-headerrad {
		flex-wrap: wrap;
		column-gap: 10px;
	}
}

/* Telefon: allt på en rad — mindre logga och 42 px-knappar. */
@media (max-width: 599px) {
	.eb-headerrad {
		column-gap: 8px;
	}

	.eb-headerrad > .wp-block-site-logo img {
		width: 124px !important;
		height: auto;
	}

	.eb-headerrad > .wp-block-group {
		gap: 6px;
	}

	.eb-headerrad .eb-menyknapp,
	.eb-headerrad .eb-sokknapp {
		width: 42px !important;
		height: 42px !important;
	}
}