/* ⚠️ BRYTPUNKTEN STAR INTE I DEN HAR FILEN.

   Den definieras en gang, i inc/header.php, och matas till Astra via
   filtret astra_tablet_breakpoint. Allt annat harleds darifran: temats
   egna mediefragor, och de tva regler som forr lag har och nu skrivs
   ut av ca_brytpunkt_css().

   Vill du andra nar hamburgaren tar over: andra CA_SIDHUVUD_BRYTPUNKT
   i inc/header.php. Ingen annanstans. */

/* ============================================================
   MOBILMENY

   Jour överst, sedan fyra snabbval, sedan navigeringen.

   Posterna ligger i samma <ul> som desktopmenyn, eftersom Astra
   renderar menyn två gånger och vi inte vill gissa vilken kopia
   som är mobilens. På desktop göms de i stället, se sist i filen.

   BRYTPUNKTEN AR 1235 px, hojd fran Astras standard 921. Samma gräns används i
   megameny.css, så att exakt en av de två menyerna är aktiv.
   ============================================================ */

.ca-mobil {
	border: 0 !important;
	padding: 0;
}

/* ---- Jouren ----
   Störst yta i hela panelen och först i tabbordningen. Det är
   det ärende flest har när de öppnar menyn på en sådan här sajt. */
.ca-mobil__jour {
	margin: var(--ca-rum-4) var(--ca-rum-5) var(--ca-rum-5);
}

.main-header-menu .ca-mobil__jour > .ca-mobil__jourlank,
.ca-mobil__jourlank {
	display: flex !important;
	align-items: center;
	gap: var(--ca-rum-4);
	padding: var(--ca-rum-5) var(--ca-rum-6) !important;
	background: var(--ca-brand-deep);
	color: var(--ca-text-invers) !important;
	border-radius: var(--ca-radie-stor);
	text-decoration: none;
	/* 64 px hög yta. Långt över de 44 px som är minsta rimliga
	   tryckyta, för att den ska gå att träffa med darrande hand. */
	min-height: 64px;
}

.ca-mobil__jourikon {
	display: flex;
	flex: 0 0 auto;
	color: var(--ca-gul);
}

.ca-mobil__jourikon svg {
	width: 28px;
	height: 28px;
}

.ca-mobil__jourtext {
	display: flex;
	flex-direction: column;
	gap: 0.1rem;
	min-width: 0;
}

.ca-mobil__joursmall {
	font-size: 0.78rem;
	font-weight: 500;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.82);
	line-height: 1.3;
}

.ca-mobil__journummer {
	font-size: 1.45rem;
	font-weight: 700;
	line-height: 1.1;
	color: var(--ca-gul);
	white-space: nowrap;
}

/* ---- Snabbvalen ---- */
.ca-mobil__rubrik {
	display: block;
	padding: 0 var(--ca-rum-5) var(--ca-rum-3);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--ca-text-dampad);
}

.ca-mobil__rutor {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--ca-rum-3);
	padding: 0 var(--ca-rum-5) var(--ca-rum-6);
}

.main-header-menu .ca-mobil__rutor > .ca-mobil__ruta,
.ca-mobil__ruta {
	display: flex !important;
	flex-direction: column;
	gap: 0.2rem;
	padding: var(--ca-rum-5) var(--ca-rum-4) !important;
	background: var(--ca-varm);
	border: 1px solid var(--ca-kant);
	border-radius: var(--ca-radie);
	color: var(--ca-text) !important;
	text-decoration: none;
	min-height: 96px;
}

.ca-mobil__rutikon {
	display: block;
	color: var(--ca-bla);
	margin-bottom: 0.15rem;
}

.ca-mobil__rutikon svg {
	width: 24px;
	height: 24px;
}

.ca-mobil__ruttitel {
	font-size: 0.95rem;
	font-weight: 600;
	line-height: 1.2;
	color: var(--ca-bla);
}

.ca-mobil__ruthjalp {
	font-size: 0.8rem;
	line-height: 1.3;
	color: var(--ca-text-dampad);
}

/* Första rutan är den akuta och ska synas som sådan, utan att
   skrika. Blå bottenplatta i stället för varm, samma familj. */
.ca-mobil__rutor > .ca-mobil__ruta:first-child {
	background: var(--ca-bla-ljus);
	border-color: transparent;
}

/* ---- Avdelaren före den vanliga navigeringen ---- */
.ca-mobil__avdelare {
	border-top: 1px solid var(--ca-kant) !important;
	padding-top: var(--ca-rum-5);
	margin-top: var(--ca-rum-2);
}

/* ---- Plats för samtyckeslisten ----
   Panelen scrollar i sin egen behållare, så body-paddingen från
   samtycke.css räcker inte. Utan detta låg listen över den sista
   menyposten, uppmätt: "Kontakt" gick inte att träffa. */
/* 🐛 .main-header-bar-navigation GALLDE AVEN PA SKRIVBORD.
   Uppmatt: 174 px dod padding under skrivbordsmenyn. Menyn ar 80 px
   hog, behallaren blev 254, och rutnatets rad med den. Menyn lag da i
   overkant och loggan centrerades langt ner: sidhuvudet sag ut att ha
   brutit i tva rader utan att ha gjort det.

   🔴 SYNS BARA FOR FORSTAGANGSBESOKARE. Klassen ca-har-samtyckesruta
   finns bara sa lange kakfragan ar obesvarad. Den som redan svarat ser
   ett korrekt sidhuvud, vilket ar varfor felet overlevde: den som
   bygger sajten har svarat for lange sedan.

   Regeln finns for mobilpanelen och hor hemma under brytpunkten,
   som ar 1235 px. Se noten hogst upp i filen.

   ⚠️ Popup-lådan star kvar utanfor mediefragan med flit. Den existerar
   bara nar mobilmenyn oppnats, sa den kan inte trada fel pa skrivbord,
   och Astra kan oppna den aven pa breda skarmar om kunden nagon gang
   valjer det i anpassaren. */
/* ⬆️ FLYTTAD TILL inc/header.php, ca_brytpunkt_css().
   Regeln behover brytpunkten, och brytpunkten ar ett tal som INTE far
   finnas pa tva stallen. Den skrivs darfor ut fran PHP, uttrycklig
   uträknad ur astra_get_tablet_breakpoint(). */

body.ca-har-samtyckesruta .ast-mobile-popup-drawer .ast-mobile-popup-inner {
	/* Listens hojd PLUS en marginal. Exakt listhojd racker inte: nar
	   sidan scrollats till botten hamnade sista posten da precis i
	   kant med listens overkant, alltsa tryckbar men utan luft.
	   Uppmatt pa iPhone 13: sista postens underkant och listens
	   overkant lag bada pa y=664. */
	padding-bottom: calc(var(--ca-samtycke-hojd, 0px) + var(--ca-rum-8));
}

/* ============================================================
   DESKTOP: göm allt ovan.
   Posterna ligger i samma lista som megamenyn använder, så de
   måste bort helt här, inte bara döljas visuellt.
   ============================================================ */
/* ⬆️ FLYTTAD TILL inc/header.php, samma skal som ovan. */


/* ---- Korgen i menyn ----
   Ligger overst, direkt under kontaktraden, for den som redan valt nagot
   ska inte behova leta. Ritas alltid, doljs av korg.js tills det finns
   nagot i den. Se inc/mobilmeny.php. */

.ca-mobil__korg[hidden] { display: none; }

/* Samma marginal som kontaktraden ovanfor. Utan den gick korgraden kant
   till kant medan raden over den hade luft, och siffran klipptes av. */
.ca-mobil__korg {
	margin: 0 var(--ca-rum-5) var(--ca-rum-5);
}

/* !important av samma skal som jourraden: temats menyregler vinner annars. */
.main-header-menu .ca-mobil__korg > .ca-mobil__korglank,
.ca-mobil__korglank {
	display: flex !important;
	align-items: center;
	justify-content: space-between;
	gap: var(--ca-rum-4);
	min-height: var(--ca-traffyta);
	padding: var(--ca-rum-4) var(--ca-rum-6) !important;
	border-radius: var(--ca-radie-stor);
	background: var(--ca-brand-deep);
	color: var(--ca-text-invers) !important;
	font-weight: 600;
	text-decoration: none;
}

.ca-mobil__korglank:hover,
.ca-mobil__korglank:focus-visible { background: var(--ca-brand-stark); }

/* Egen font-size och line-height: arvd radhojd fran menyn sköt siffran
   ut ur cirkeln, sa tvaan visades halv. */
.ca-mobil__korgantal {
	display: grid;
	place-items: center;
	flex: none;
	min-width: 1.75rem;
	height: 1.75rem;
	padding: 0 .4rem;
	border-radius: 999px;
	background: var(--ca-white);
	color: var(--ca-brand-deep);
	font: 700 .95rem/1 var(--ca-font);
	font-variant-numeric: tabular-nums;
}