/*
 * Mitt konto: tvåkolumnsraden.
 *
 * Markup: form-create-account.php. Laddas automatiskt av
 * register_global_styles().
 *
 * Ligger i global/ och inte i single/ trots att den bara behövs på en sida:
 * en stilmall som enqueue:as från mallfilen hamnar i sidfoten, och kolumnerna
 * hade då ritats staplade i full bredd innan regeln kom. Ett hopp i layouten
 * är värre än de här raderna på övriga sidor.
 */

/*
 * .row framför klassen: Bootstraps `.col { flex: 1 0 0% }` väger (0,1,0) och
 * laddas efter temats CSS. En ensam .mhrf-konto-kol förlorar på källordning.
 */
.mhrf-konto-rad .mhrf-konto-kol {
	/* flex-grow 0: kolumnerna ska hålla sin andel, inte fördela överskottet
	   mellan sig. Med grow 1 hade 60/40 blivit 50/50 igen så fort innehållet
	   var smalare än spalten. */
	flex: 0 0 auto;
}

.mhrf-konto-rad .mhrf-konto-kol--uppgifter {
	width: 60%;
}

.mhrf-konto-rad .mhrf-konto-kol--sidebar {
	width: 40%;
}

/* Under 900px staplas de. */
@media (max-width: 900px) {
	.mhrf-konto-rad .mhrf-konto-kol--uppgifter,
	.mhrf-konto-rad .mhrf-konto-kol--sidebar {
		width: 100%;
	}

	.mhrf-konto-rad .mhrf-konto-kol--sidebar {
		margin-top: 32px;
	}
}

/* ---------- "Mitt MHRF" och rollknapparna ----------
 *
 * Blocket satt tidigare i full sidbredd. Customizer-CSS:en (Anpassa →
 * Ytterligare CSS) lägger ut det som en flexrad med `gap: 125px` — ett mått
 * skrivet för den bredden. I en spalt hamnar knappgrupperna bredvid varandra
 * med ett gap som är bredare än spalten själv.
 *
 * Selektorn är kolumnneutral: blocket flyttades till vänsterkolumnen, under
 * kontaktuppgifterna, men ska staplas oavsett vilken spalt det står i.
 *
 * Två klasser här (0,2,0) mot Customizerns (0,1,0). Källordningen räcker inte
 * som argument: Customizer-CSS:en skrivs ut inline i sidhuvudet, alltså EFTER
 * den här filen.
 */
.mhrf-konto-kol .mitt-konto__btns-wrapper {
	/* display: flex även här, fast Customizern redan sätter det. Deras regel
	   ligger i `@media (min-width: 1026px)` — under den bredden var blocket en
	   vanlig block-container, `gap` gjorde ingenting, och avståndet mellan
	   grupperna kom av att Customizerns `margin: 20px 0` på varje grupp
	   kollapsade mot grannens. Med flex styr gap hela vägen. */
	display: flex;
	flex-direction: column;
	/* stretch och inte Customizerns flex-start: i kolumnriktning krymper
	   flex-start grupperna till textbredd, och knapparna nedan blir då 100% av
	   en bredd som varierar med den längsta etiketten. */
	align-items: stretch;
	gap: 28px;
}

/* Marginalen som skötte avståndet före flexen. Den skulle nu lagts OVANPÅ
   gap:et — flexbox räknar gap mellan marginalrutorna, inte mellan kanterna. */
.mhrf-konto-kol .mitt-konto__btn-wrapper {
	margin: 0;
}

/* Luft ned till knapparna. Customizern sätter 20px men bara över 1026px;
   under den bredden stod rubriken kvar på GP:s 8px och satt nästan i
   knapparna. Samma mått på alla bredder här. */
.mhrf-konto-kol .mitt-konto__btn-wrapper h5 {
	margin-bottom: 20px;
}

/* Grupperna behöver mer luft emellan sig när knapparna staplar — rubriken
   för nästa grupp hamnar annars tätt inpå föregående grupps sista knapp. */
@media (max-width: 767px) {
	.mhrf-konto-kol .mitt-konto__btns-wrapper {
		gap: 40px;
	}
}

/* Knapparna behåller sin egen bredd, som "Redigera kontaktuppgifter" i
   spalten bredvid. De flödar och radbryts inuti sin grupp. */

/* ---------- Logga ut och Kontakt ----------
 *
 * Står längst ned till höger: sist i sidokolumnen, i nederkant av raden.
 *
 * flex med gap i stället för mellanslaget i markupen, som ger ~4px och
 * krymper ihop knapparna.
 */
.mhrf-konto-kol .mitt-konto__utloggning {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
}

/*
 * Nederkanten kommer av `margin-top: auto` i en spalt som sträcker sig hela
 * radens höjd — raden är flex och sträcker kolumnerna, så sidokolumnen är
 * lika hög som vänsterkolumnen även när prenumerationslistan är kort.
 *
 * Kolumnen måste själv vara flex för att auto-marginalen ska ha något att
 * äta upp. Ett absolut positionerat block hade lagt sig ovanpå listan när
 * den är lång.
 */
@media (min-width: 901px) {
	.mhrf-konto-rad .mhrf-konto-kol--sidebar {
		display: flex;
		flex-direction: column;
	}

	.mhrf-konto-kol--sidebar .mitt-konto__utloggning {
		margin-top: auto;
		/* Högerkant. Knapparna är olika breda, så det är raden som flyttas,
		   inte varje knapp för sig. */
		justify-content: flex-end;
	}
}

/* Staplat läge: knapparna följer vanligt flöde under prenumerationslistan,
   vänsterställda som allt annat i den staplade spalten. */
@media (max-width: 900px) {
	.mhrf-konto-kol--sidebar .mitt-konto__utloggning {
		margin-top: 28px;
	}
}


/* ---------- Sidans vänster- och högermarginal ----------
 *
 * Innehållet låg dubbelt indraget: GP:s innehållspadding på
 * `.one-container .site-content` (25px desktop, 20px under 768px) PLUS
 * Bootstraps `.container` (15px). Rubriken "Mitt konto" ligger utanför
 * containern och fick bara det ena lagret, så spalterna hamnade en bit in
 * under sin egen sidrubrik.
 *
 * GP:s lager är det som får bli kvar — det är sidans marginal, och det är
 * samma på alla sidor. Bootstraps lager nollas här.
 *
 * `.row` har -15px marginal och `.col` 15px padding. Nollas containern ensam
 * sticker raden ut 15px utanför viewporten och sajten får vågrät scroll.
 * Kolumnernas padding får därför bli rännan mellan spalterna, och bara
 * ytterkanterna nollas.
 */
body.page-template-form-create-account .container {
	padding-left: 0;
	padding-right: 0;
}

.mhrf-konto-rad.row {
	margin-left: 0;
	margin-right: 0;
}

/* Ytterkanterna nollas, innerkanterna blir rännan. Bootstraps 15px är
   satta för en tolvkolumnsgrid med många smala spalter; här står två breda
   textblock mot varandra och behöver mer luft för att läsas som två spalter.
   Kolumnernas bredd är 60/40 av raden, så rännan äter av innehållet och
   inte av radens bredd. */
.mhrf-konto-rad > .mhrf-konto-kol--uppgifter {
	padding-left: 0;
	padding-right: 40px;
}

.mhrf-konto-rad > .mhrf-konto-kol--sidebar {
	padding-left: 40px;
	padding-right: 0;
}

/* Staplade spalter har ingen ränna att bevara. Samma brytpunkt som
   stackningen ovan, annars ligger 15px kvar på den ena sidan. */
@media (max-width: 900px) {
	.mhrf-konto-rad > .mhrf-konto-kol {
		padding-left: 0;
		padding-right: 0;
	}
}

/* ---------- Knapparna i en knappgrupp ----------
 *
 * Varje grupp ("Mitt MHRF", rollknapparna, verktygslådorna) är en egen
 * .mitt-konto__knappar. Avståndet är `gap`, inte marginaler på knapparna.
 *
 * Customizer-CSS:en (Utseende → Anpassa → Ytterligare CSS) satte avståndet
 * med `.mitt-konto__btns-wrapper a.btn { margin-bottom: 20px !important }`
 * och inget vågrätt alls — knapparna låg 4-5px isär i sidled, och 20px föll
 * ut som luft efter sista raden i gruppen. gap ger samma mått åt båda håll
 * och lämnar ingen hängande marginal.
 *
 * `margin: 0 !important` är enda sättet att nå förbi Customizerns egen
 * `!important`. Tas den regeln bort i Customizern kan !important tas bort
 * här också — resten av blocket fungerar utan den.
 *
 * max-width 635px stod i den inline-stil som klassen ersatte.
 */
.mitt-konto__knappar {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	max-width: 635px;
}

.mhrf-konto-kol .mitt-konto__knappar a.btn {
	margin: 0 !important;
}

/* En knapp per rad på mobil, med egen bredd.
 *
 * Customizer-CSS:en gör knapparna till `display: block` under 767px, vilket
 * är rätt radbrytning men fel bredd — en blocklänk fyller spalten. I en
 * flexbox är `display` på ett barn ändå utan verkan, så radbrytningen får
 * komma från kolumnriktningen i stället.
 *
 * align-items: flex-start, inte stretch: annars sträcks knapparna till
 * spaltens bredd och är fullbreda igen.
 */
@media (max-width: 767px) {
	.mitt-konto__knappar {
		flex-direction: column;
		align-items: flex-start;
	}
}