/*
 * Aoptik – header: logga, meny, hamburgare och mobilraden "Hitta butik / Boka synundersökning".
 * Laddas på alla sidor via functions.php (aoptik_egna_filer), efter temats custom.css.
 *
 * Så hänger det ihop (2026-11-05):
 *  - Under 1024 px: hamburgare + logga, och raden Hitta butik / Boka synundersökning (HTML:en skrivs ut
 *    av aoptik_header_mobilrad i functions.php, beteendet styrs av aoptik/js/mobilrad.js).
 *  - Från 1024 px: datorheadern i två rader. Rad 1: hamburgare + logga till vänster, hjärta / Hitta butik /
 *    Boka tid till höger. Rad 2: menyn på egen rad under en tunn linje, i linje med loggans vänsterkant.
 *  - Byråns grundregler för headern ligger kvar i assets/scss/_header.scss (kompilerad till assets/css/custom.css).
 *    Där ändrades samma dag: brytpunkten 1191/1190 px → 1023 px (.reg-menu, .menu-grid-container, .lineBackground)
 *    och .logo utan margin-left. Därför behövs inga !important här.
 */

/* =========================================================
   Logga – alltid 120 px bred från 641 px (bildens egen storlek
   får inte styra, då "hoppar" loggan mellan brytpunkterna)
   ========================================================= */
@media screen and (min-width: 641px) {
	.header .logo-cell {
		flex: 0 0 auto;
		width: auto;
		max-width: none;
		margin: 0;
		padding: 0;
	}
	.header .logo img {
		width: 120px;
		height: auto;
	}
}

/* =========================================================
   Mobil och surfplatta (under 1024 px): raden Hitta butik / Boka
   ========================================================= */
.ao-mrad {
	display: none;
}
@media screen and (max-width: 1023px) {
	.ao-mrad {
		display: block;
		position: relative;
		z-index: 90;
		background: #fff;
		border-bottom: 1px solid #ececec;
		transition: transform .25s ease;
	}
	.ao-mrad.is-fast {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		box-shadow: 0 2px 8px rgba(0, 0, 0, .08);
		will-change: transform;
	}
	.ao-mrad.is-fast.is-dold {
		transform: translateY(-110%);
		box-shadow: none;
	}
	.ao-mrad__logo {
		display: none;
		position: relative;
	}
	.ao-mrad.is-fast.is-hel .ao-mrad__logo {
		display: block;
	}
	.ao-mrad__logo img {
		display: block;
		width: 100%;
		height: auto;
	}
	.ao-mrad__inner {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		height: 52px;
		padding: 0 16px;
	}
	.ao-mrad__inner a,
	.ao-mrad__inner a span {
		font-family: Enkel, "Open Sans", sans-serif !important; /* temat sätter typsnitt på a span med hög specificitet */
		font-size: 15px;
		font-weight: 500;
		line-height: 22.5px;
		text-decoration: none;
		white-space: nowrap;
	}
	.ao-mrad__inner a {
		display: inline-flex;
		align-items: center;
		gap: 6px;
	}
	.ao-mrad__butik,
	.ao-mrad__butik span {
		color: #000 !important; /* temats länkfärg */
	}
	.ao-mrad__butik img {
		display: block;
		width: 20px;
		height: 20px;
	}
	.ao-mrad__boka {
		background: #c00d0e;
		border-radius: 50px;
		padding: 10px 25px;
	}
	.ao-mrad__boka,
	.ao-mrad__boka span {
		color: #fff !important; /* temats länkfärg */
	}
	.ao-mrad__boka:hover,
	.ao-mrad__boka:focus {
		background: #a30b0c;
		color: #fff;
	}
	/* När raden är fäst högst upp följer hamburgaren med (se mobilrad.js) */
	body.ao-hf .nav-container .hamburger-lines,
	body.ao-hf .nav-container .checkbox {
		position: fixed;
		z-index: 1000;
		transition: transform .25s ease;
	}
	body.ao-hf.ao-hd .nav-container .hamburger-lines,
	body.ao-hf.ao-hd .nav-container .checkbox {
		transform: translateY(-120px);
	}
	body.ao-nt .nav-container .hamburger-lines,
	body.ao-nt .nav-container .checkbox {
		transition: none !important;
	}
}
@media screen and (max-width: 360px) {
	.ao-mrad__inner a,
	.ao-mrad__inner a span {
		font-size: 14px;
	}
	.ao-mrad__boka {
		padding: 9px 16px;
	}
}
@media screen and (min-width: 601px) and (max-width: 782px) {
	body.admin-bar .ao-mrad.is-fast {
		top: 46px;
	}
}

/* =========================================================
   Hamburgermenyn (panelen som öppnas)
   ========================================================= */
.reveal-content .menu-sidebar-container .menu > li > a {
	font-size: 22px;
	font-weight: 600;
	line-height: 52px;
	color: #1d1d1d;
}
@media screen and (max-width: 640px) {
	/* Täcker hela skärmen på mobil (temat låste panelen till 400 px) */
	.reveal-content {
		width: 100%;
		max-width: none;
		top: 0;
		height: 100%;
		height: 100dvh;
	}
}

/* =========================================================
   Dator (från 1024 px): headern i två rader
   ========================================================= */
@media screen and (min-width: 1024px) {
	.header .menu-grid-container {
		padding: 0 50px 0 86px;
		max-width: none;
	}
	.header .menu-grid-container > .grid-x {
		flex-wrap: wrap;
		justify-content: flex-start;
		margin-left: 0;
		margin-right: 0;
	}
	.header .logo-cell {
		justify-content: flex-start;
	}

	/* Rad 1, höger: hjärta, Hitta butik, Boka tid */
	.header .header_nav_info {
		top: 14.45px;
		bottom: auto;
		right: 50px;
	}

	/* Rad 2: menyn */
	.header .menu-cell.reg-menu {
		display: block;
		flex: 0 0 100%;
		width: 100%;
		max-width: 100%;
		box-sizing: border-box;
		margin: 0;
		padding: 0;
	}
	.header .menu-cell.reg-menu nav,
	.header .menu-cell.reg-menu .menu-prima-container {
		display: block;
		width: 100%;
	}
	.header .menu-cell.reg-menu #menu-prima {
		display: flex;
		flex-wrap: nowrap;
		justify-content: flex-start;
		gap: clamp(24px, 2.5vw, 40px);
		width: 100%;
		margin: 0;
		padding: 0;
		border-top: 1px solid #e6e6e6;
	}
	.header .menu-cell.reg-menu #menu-prima > li {
		margin: 0;
	}
	.header .menu-cell.reg-menu #menu-prima > li > a {
		padding: 14px 0;
		white-space: nowrap;
		font-size: 15px;
	}
}