/**
 * Filtrering på medlemsklubbssidan.
 *
 * Laddas automatiskt av register_global_styles(). Färgerna kommer ur temats
 * palett i global/variables.css.
 */

/*
 * .site-main framför klassen är nödvändigt, inte dekoration. GP har
 * `.site-main > * { margin-bottom: 20px }` som väger lika mycket (0,1,0) och
 * laddas senare — en ensam .klubbfilter förlorar på källordning.
 */
.site-main .klubbfilter {
	/* 42px ned till klubbtabellen. */
	margin: 24px 0 42px;
	padding: 22px 24px 24px;
	background: var(--blue-secondary, #ebf1f8);
	/* Raka hörn på panelen. Fälten i den har --radius-s, se nedan. */
	border-radius: 0;
}

/* ---------- Huvud: titel, status, rensa ---------- */

.klubbfilter-huvud {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 18px;
	margin-bottom: 18px;
}

.klubbfilter-titel {
	margin: 0;
	font-family: "Source Sans Pro", sans-serif;
	font-size: 1.0625rem;
	font-weight: 600;
	line-height: 1.3;
}

.klubbfilter-status {
	margin: 0;
	font-size: 0.875rem;
	color: var(--gray-primary, #435b79);
	/* Skjuts åt höger, men hamnar under titeln på smala skärmar. */
	margin-right: auto;
}

.klubbfilter-rensa {
	padding: 4px 16px;
	border: 1px solid var(--blue-primary, #15529f);
	border-radius: 50vmax;
	background: #fff;
	color: var(--blue-primary, #15529f);
	font-family: "Source Sans Pro", sans-serif;
	font-size: 0.8125rem;
	font-weight: 600;
	line-height: 1.5;
	cursor: pointer;
}

.klubbfilter-rensa:hover:not([disabled]) {
	background: var(--blue-primary, #15529f);
	color: #fff;
}

.klubbfilter-rensa[disabled] {
	opacity: 0.45;
	cursor: default;
}

/* ---------- Sökfältet i panelen ---------- */

.klubbfilter-sok {
	margin: 0 0 22px;
}

/* Två klasser: sidans inline-stilmall har
   `input[type="text"] { border-color: var(--base) }` (0,1,1), och --base är
   samma ljusblå som panelen — ramen fanns men syntes inte. */
.klubbfilter .klubbfilter-falt {
	display: block;
	/* Full bredd i panelen. En max-width här hade ändå inte fått effekt —
	   temats .form-control sätter bredden med högre specificitet. */
	width: 100%;
	padding: 10px 14px;
	/* Samma ram som rullgardinerna under, se mhrf-select.css. */
	border: 1px solid var(--blue-primary--trans-60, #85a6d1);
	border-radius: var(--radius-s, 4px);
	/* Alltid vitt, i alla lägen. Temats .form-control sätter ett gråvitt
	   (#f7f8f9) som annars slår igenom. */
	background: #fff !important;
	font-size: 1rem;
	line-height: 1.4;
}

/*
 * Ingen fokusmarkering alls — ramen har samma färg i alla lägen (beslut
 * 2026-10-13). !important för att temats .form-control:focus lägger en gul
 * box-shadow och en gul ramfärg.
 */
.klubbfilter .klubbfilter-falt:focus,
.klubbfilter .klubbfilter-falt:focus-visible {
	outline: none !important;
	box-shadow: none !important;
	border-color: var(--blue-primary--trans-60, #85a6d1) !important;
	background: #fff !important;
}

/* ---------- Rullgardinerna ---------- */

/* Tre i bredd, en per rad på mobil. */
.klubbfilter-grupper {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 18px 20px;
}

/* display: grid ovan slår webbläsarens [hidden] — JS visar blocket. */
.klubbfilter-grupper[hidden] {
	display: none;
}

@media (max-width: 700px) {
	.klubbfilter-grupper {
		grid-template-columns: minmax(0, 1fr);
		gap: 16px;
	}
}

.klubbfilter-grupp {
	min-width: 0;
}

.klubbfilter-rubrik {
	display: block;
	padding: 0;
	margin: 0 0 10px;
	font-family: "Source Sans Pro", sans-serif;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--blue-primary, #15529f);
}

/* ---------- Klubbtabellen ---------- */

/*
 * Fasta kolumnbredder. Utan dem räknar webbläsaren om bredderna efter
 * innehållet i de synliga raderna, så tabellen hoppade i sidled vid varje
 * tangenttryck i sökrutan och vid varje filterklick.
 *
 * Bredderna sitter i en colgroup i mallen. table-layout: fixed är det som får
 * webbläsaren att använda dem och sluta mäta cellinnehåll.
 */
.mhrf-tabell--fast {
	table-layout: fixed;
	width: 100%;
}

/*
 * break-word, inte anywhere: anywhere bryter mitt i ord så fort det blir
 * trångt, och "Regional klubb" delades i "Region / al klubb". break-word
 * bryter bara när ett enskilt ord inte får plats på en egen rad.
 *
 * Tabellen får en min-width så att kolumnerna inte pressas ihop till oläsliga
 * bredder på små skärmar. Under den bredden scrollar wrappern i sidled i
 * stället — vilket är precis vad texten "svep till höger" ovanför tabellen
 * redan lovar.
 */
.mhrf-tabell--fast td,
.mhrf-tabell--fast th {
	overflow-wrap: break-word;
}

.mhrf-tabell--fast {
	/* 820px är uppmätt: under den bredden får "Rikstäckande" inte plats som ett
	   ord i Typ-kolumnen, och bryts mitt i. */
	min-width: 820px;
}

.overflow-table {
	overflow-x: auto;
}

/* Text och knapp på samma rad. flex-wrap gör att de bryter till två rader
   först om det verkligen inte får plats. */
.mhrf-tabell-tomt td {
	padding: 26px 16px;
}

.mhrf-tabell-tomt .mhrf-tabell-tomt-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-start;
	gap: 14px;
}

.mhrf-tabell-tomt p {
	margin: 0;
	color: var(--mhrf-text-mjuk, #555);
}

/* Knappen ärver panelens utseende via .klubbfilter-rensa, men den ligger
   utanför panelen och behöver därför inte döljas när inget är filtrerat —
   raden visas bara när något ÄR filtrerat. */
.mhrf-tabell-tomt .klubbfilter-rensa {
	display: inline-flex;
}

.mhrf-tabell-tomt-sida {
	margin: 24px 0;
	padding: 18px 20px;
	background: var(--blue-secondary, #ebf1f8);
	border-radius: var(--radius-s, 4px);
}

/*
 * Klubbnamnen i tabellen.
 *
 * Utseendet kommer från .mhrf-lank i lankar.css. Här ligger bara det som är
 * tabellspecifikt: att långa namn måste få brytas.
 *
 * white-space: normal är det som gör det möjligt. Sidans inline-stilmall har
 * `.single-club a { white-space: nowrap }` (0,1,1), och med nowrap har
 * overflow-wrap ingen verkan alls — texten målades 362px bred i en 141px box
 * och la sig över kolumnen bredvid. Selektorn nedan väger (0,2,0).
 *
 * min-width: 0 behövs för att texten är ett flex-item, och flex-items har
 * min-width: auto — de vägrar krympa under sitt innehåll. Pilen undantas med
 * flex: 0 0 auto, annars krymper den i stället för texten.
 */
.single-club .mhrf-tabellank,
.single-club .mhrf-tabellank .mhrf-lank-text {
	white-space: normal;
}

.mhrf-tabellank {
	max-width: 100%;
}

.mhrf-tabellank .mhrf-lank-text {
	min-width: 0;
	overflow-wrap: break-word;
}

.mhrf-tabellank .mhrf-lank-pil {
	flex: 0 0 auto;
}