/* ==========================================================================
   GFK — designtokens och bas-stilar för HTML-mockupen
   ==========================================================================

   Tokens speglar theme.json i wp-content/themes/gfk/ 1:1, så att det som ser
   bra ut här går att flytta rakt in i WordPress-temat. Ändrar du ett värde
   här, ändra motsvarande slug i theme.json (och tvärtom).

   token (här)      theme.json-slug   värde       används till
   ---------------  ----------------  ----------  --------------------------------
   --blue           accent            #0057A7     länkar, knappar, rubrikaccenter
   --blue-dark      accent-3          #00457F     hover/aktiv på blått
   --blue-tint      accent-4          #E8F0F8     ljusa blå ytor (callouts)
   --yellow         accent-2          #FED800     YTA, aldrig text på vitt (1,4:1)
   --ink            contrast          #333333      brödtext
   --ink-2          contrast-2        #555555     sekundär text
   --ink-3          contrast-3        #6E6E6E     dämpad text (klarar vitt + grått)
   --paper          base              #FFFFFF     bakgrund
   --paper-2        base-2            #F5F5F5     ljus yta
   --line           accent-5          #EEEEEE     linjer/avgränsare

   Kontrastregel: blått bär text, gult pekar. Gul text på vitt är otillåtet
   (1,4:1). Svart på gult (13,5:1) och vitt på blått (7,2:1) är godkänt.
   ========================================================================== */

:root {
	/* Färg */
	--blue: #0057a7;
	--blue-dark: #00457f;
	--blue-tint: #e8f0f8;
	--yellow: #fed800;
	--ink: #333333;
	--ink-2: #555555;
	--ink-3: #6e6e6e;
	--paper: #ffffff;
	--paper-2: #f5f5f5;
	--line: #eeeeee;

	/* Typografi — system-ui är en PLATSHÅLLARE.
	   Val av typsnitt är ett identitetsbeslut som inte är taget än.
	   Byt på en rad här när identiteten landar. */
	--font-body: Georgia, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--font-heading: var(--font-body);

	/* Mått */
	--wrap: 640px;   /* läsbredd för brödtext (matchar contentSize) */
	--wrap-wide: 1100px;  /* bredare sektioner (matchar wideSize) */
	--radius: 24px;  /* kort, knappar, bilder */
	--gap: 1.5rem;
	--tile-gap: 1rem;  /* fast marginal runt/mellan boxarna — samma oavsett sidbredd */
}

/* — Minimal reset — */
*,
*::before,
*::after {
	box-sizing: border-box;
}

body {
	margin: 0;
	font-family: var(--font-body);
	font-size: 1.05rem;
	line-height: 1.6;
	color: var(--ink);
	background: var(--paper);
	-webkit-font-smoothing: antialiased;
	touch-action: manipulation;  /* stäng av dubbel-tap-zoom, behåll nyp-zoom */
}

img {
	max-width: 100%;
	height: auto;
}

/* — Typografi — */
h1,
h2,
h3 {
	font-family: var(--font-heading);
	line-height: 1.2;
	margin: 0 0 0.5em;
}

h1 { font-size: 2.5rem; font-weight: 400; }
h2 { font-size: 1.85rem; font-weight: 400; }
h3 { font-size: 1.25rem; font-weight: 400; }

p { margin: 0 0 1rem; }

a {
	color: var(--blue);
	text-decoration: underline;
	text-underline-offset: 2px;
}
a:hover { color: var(--blue-dark); }

/* Ingen fokusruta vid musklick — men behåll den för tangentbord (a11y). */
a:focus:not(:focus-visible),
button:focus:not(:focus-visible) { outline: none; }

/* — Video — fyller spaltbredden, rundade hörn som korten — */
/* — Hero-video —
   Smal skärm/mobil: naturlig 16:9 (height: auto, ingen beskärning).
   Bred skärm: när 16:9-höjden överstiger max-height kapas den (object-fit: cover),
   så det blir fast höjd på bred skärm men rätt proportion när den smalnar. */
.hero-video {
	display: block;
	width: 100%;
	height: auto;            /* naturlig 16:9 på smal skärm */
	aspect-ratio: 16 / 9;    /* reservera höjden innan filmen laddats → ingen layout-shift */
	max-height: 550px;       /* takhöjd på bred skärm — justera här */
	object-fit: cover;       /* beskär i höjdled först när taket slår in */
	object-position: center;
	border-radius: 0;
}

/* — Två kvadratiska boxar under herofilmen —
   Fast marginal (--tile-gap) runt om och emellan, samma i alla bredder.
   Desktop: sida vid sida (prova-på vänster). Mobil: staplade (prova-på överst). */
.tiles {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: var(--tile-gap);
	padding: var(--tile-gap);
}
.tile {
	position: relative;
	aspect-ratio: 1 / 1;      /* kvadrat oavsett kolumnbredd */
	overflow: hidden;
	display: flex;
	align-items: flex-end;
	text-decoration: none;
	color: var(--paper);
	background-size: cover;
	background-position: center;
}
/* Länktexten i foto-rutorna ska vara vit även vid hover (inte blå) */
.tile:hover { color: var(--paper); }
/* Mörk toning nedtill så vit text blir läsbar mot fotot */
.tile::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0) 55%);
}
.tile-label {
	position: relative;
	z-index: 1;
	padding: 1.25rem 1.5rem;
	font-size: 1.6rem;
	font-weight: 400;
	line-height: 1.15;
}
/* Foto-CTA-rutor (prova + event): centrerad tvåradstext på foto */
.tile--prova,
.tile--event,
.tile--medlem {
	align-items: center;       /* centrera texten (överskriver flex-end) */
	justify-content: center;
	text-align: center;
}
/* Jämn mörk slöja så centrerad vit text blir läsbar mot fotot */
.tile--prova::after,
.tile--event::after,
.tile--medlem::after { background: rgba(0, 0, 0, 0.4); }
.tile--prova { background-image: url("../img/prova_pa_20260830.jpg"); }
.tile--event { background-image: url("../img/door_event.jpg"); }
.tile--medlem { background-image: url("../img/door_event.jpg"); }  /* platshållare — byt mot porträtt */
.tile-cta {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	line-height: 1.1;
	text-shadow: 0 1px 6px rgba(0, 0, 0, 0.4);
}
.tile-cta-small { font-size: 1.5rem; }
.tile-cta-big { font-size: 2.6rem; }

/* — "Klubben idag": blå ruta, centrerat schema — */
.tile--today {
	background: var(--blue-dark);   /* mörkare blå — samma som Anmälan-knappens hover */
	container-type: size;     /* query-container: texten skalas efter rutan (håller kvadrat utan att klippa) */
	align-items: center;      /* centrera lodrätt (överskriver flex-end) */
	justify-content: center;  /* centrera vågrätt */
	text-align: center;
	color: var(--paper);
	padding: 1.25rem;         /* lite luft runt schemat */
}
.tile--today::after { display: none; }  /* ingen fototoning på den blå rutan */

/* Textstorlek skalas mot rutans storlek (cqmin) så allt får plats i kvadraten,
   med golv/tak via clamp. Rubrik och länkar anges i em → skalas med. */
.today { width: 100%; font-size: clamp(0.72rem, 4.3cqmin, 1.05rem); }
.today-title {
	margin: 0 0 0.6em;
	font-size: 1.4em;
}
/* Tider i vänster kolumn, titlar i höger — allt vänsterjusterat inuti,
   men hela blocket centrerat (width + margin-inline: auto). */
.today-list {
	display: grid;
	grid-template-columns: max-content 1fr;
	column-gap: 0.6rem;
	row-gap: 0.35rem;
	list-style: none;
	margin: 0;
	padding: 0;
	line-height: 1.4;
	text-align: left;
	width: fit-content;        /* blocket kryper till innehållet → centreras på riktigt även med korta namn */
	max-width: 100%;           /* men bryt långa titlar i stället för att spilla ut ur rutan */
	margin-inline: auto;
}
.today-list li { display: contents; }  /* låt tid + titel hamna i grid-kolumnerna */
.today-list .t {
	font-variant-numeric: tabular-nums;  /* jämnbreda siffror */
	white-space: nowrap;
}
.today-list li.is-done .t,
.today-list li.is-done .e {
	opacity: 0.45;   /* avslutat pass = utdimmat mot den blå bakgrunden */
}
.today-list li.is-cancelled .e {
	text-decoration: line-through;  /* inställt pass = överstruket */
}
/* "Till kalendern"-länk under schemat — vit på blått, aldrig blå */
.today-more {
	display: block;   /* stapla länkarna, var för sig */
	margin-top: 0.7em;
	color: var(--paper);
	text-decoration: underline;
	text-underline-offset: 2px;
}
.today-more:hover { color: var(--paper); opacity: 0.75; }
.today-subscribe { margin-top: 0.3em; font-size: 0.82em; }  /* tätare under "Till kalendern", lite mindre */

/* — Produktkarusell (Klubbshop) —
   Full bredd, flera produkter på desktop. På mobil fyller varje kort bredden
   (flex-basis 100%) så scroll-snap visar en produkt i taget. */
.shop { padding: var(--tile-gap); }
.shop-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	margin-bottom: 0.75rem;
}
.shop-title { margin: 0; font-size: 1.5rem; }
.shop-nav { display: flex; gap: 0.5rem; }
.shop-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 1px solid var(--line);
	background: var(--paper);
	color: var(--ink);
	border-radius: 50%;
	cursor: pointer;
}
.shop-btn:hover:not(:disabled) { border-color: var(--blue); color: var(--blue); }
.shop-btn:disabled { opacity: 0.35; cursor: default; }

.shop-track {
	display: flex;
	gap: var(--tile-gap);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;             /* dölj rullningslist (Firefox) */
}
.shop-track::-webkit-scrollbar { display: none; }  /* Chrome/Safari */

.shop-card {
	flex: 0 0 296px;   /* bredare kort → ~4,5 produkter i vyn (var 200px ≈ 6,5) */
	scroll-snap-align: start;
	text-decoration: none;
	color: var(--ink);
}
/* Grå ruta som växer med kortet; produktbilden hålls fast i storlek och centreras,
   så det blir mer grått runt om i stället för en större bild. */
.shop-img {
	position: relative;
	aspect-ratio: 1 / 1;
	background: var(--paper-2);
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}
.shop-img img {
	width: 176px;      /* fast bildstorlek — samma som tidigare */
	height: 176px;
	object-fit: contain;
}
.shop-price {
	position: absolute;
	right: 8px;
	bottom: 8px;
	background: rgba(0, 0, 0, 0.75);
	color: #fff;
	font-size: 0.8rem;
	padding: 2px 8px;
	border-radius: 20px;
}
.shop-status { color: var(--ink-3); font-style: italic; }
.shop-head-left { display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap; }
.shop-link { font-size: 0.9rem; color: var(--ink-3); }
.shop-link:hover { color: var(--ink); }

@media (max-width: 640px) {
	.shop-card { flex-basis: 100%; }   /* en produkt i taget på mobil */
	.shop-img img { width: 70%; height: 70%; }  /* större bild när bara en visas */
	.shop-link-full { display: none; }  /* "på stadium.se" ryms inte — visa kort text */
}

@media (max-width: 900px) {
	.tiles { grid-template-columns: 1fr; }  /* tre rutor blir för smala — stapla under 900px */
	.tile--today { order: -2; }  /* Klubben idag överst */
	.tiles .recent-news { display: block; order: -1; }  /* Senaste nytt direkt efter Klubben idag (specificitet vinner över basregeln) */
	.news-recent { display: none; }  /* Aramis surfas ovan — göm dubletten i listan */
}

/* — Nyheter — tre kort i rad på desktop, staplade på mobil — */
.news { padding: var(--tile-gap); }
.news-heading { font-size: 1.85rem; margin: 0 0 1.25rem; text-align: center; }
.news-grid {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 2rem;
}
.news-title { font-size: 1.35rem; line-height: 1.2; margin: 0 0 0.25rem; }
.news-title a { color: var(--ink); text-decoration: none; }
.news-title a:hover { color: var(--blue); }
.news-date { color: var(--ink-3); font-size: 0.9rem; margin: 0 0 0.6rem; }
.news-body { margin: 0 0 0.6rem; }
.news-more { font-size: 0.95rem; }

/* "Senaste nytt" — visas i .tiles bara när de staplas (se @media 900px ovan) */
.recent-news { display: none; }
.recent-label {
	margin: 0 0 0.5rem;
	font-size: 0.8rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--blue);
}
/* Tom-läge för Klubben idag (överskriver display: contents på li) */
.today-list li.today-empty {
	display: block;
	grid-column: 1 / -1;
	text-align: center;
	opacity: 0.7;
}
@media (max-width: 900px) {
	.news-grid { grid-template-columns: 1fr; gap: 1.5rem; }
}

/* — Layout-hjälpare — */
.wrap {
	max-width: var(--wrap);
	margin-inline: auto;
	padding-inline: 1rem;
}
.wrap--wide { max-width: var(--wrap-wide); }

/* — Knapp — blå yta, vit text. Aldrig gul text på vitt. — */
.button {
	display: inline-block;
	background: var(--blue);
	color: var(--paper);
	font-weight: 400;
	text-decoration: none;
	padding: 0.7em 1.4em;
	border-radius: var(--radius);
}
.button:hover {
	background: var(--blue-dark);
	color: var(--paper);
}

/* Gul knapp för den enda konverteringen (Anmälan): svart text klarar 13,5:1 */
.button--yellow {
	background: var(--yellow);
	color: var(--ink);
}
.button--yellow:hover {
	background: var(--yellow);
	color: var(--ink);
	filter: brightness(0.95);
}

/* — Enkel sidhuvud/sidfot som utgångspunkt (refinera fritt) — */
.site-header {
	position: sticky;
	top: 0;
	z-index: 10;
	background: var(--paper);
	border-bottom: 1px solid var(--line);
}
.site-header .wrap {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding-block: 0.75rem;
}
/* Emblem + klubbnamn, en klickbar enhet som aldrig krymper */
.site-brand {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	flex-shrink: 0;
	text-decoration: none;
	color: var(--ink);
	font-weight: 400;
	font-size: 1.15rem;
	line-height: 1.1;
}
.site-header img { width: 44px; height: 44px; flex-shrink: 0; }
/* — Navigation: inline-länkar + alltid synlig hamburgare med panel — */
.site-nav {
	position: relative;   /* positioneringskontext för panelen */
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: 1.25rem;
}

/* Inline-länkarna (breda skärmar) */
.nav-inline {
	display: flex;
	align-items: center;
	gap: 1.25rem;
	list-style: none;
	margin: 0;
	padding: 0;
}
.nav-inline a:not(.button) {
	text-decoration: none;
	color: var(--ink);
	font-weight: 400;
}
.nav-inline a:not(.button):hover { color: var(--blue); }

/* Hamburgaren — alltid synlig. Tre streck som blir kryss när panelen är öppen. */
.nav-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	flex-shrink: 0;
	background: none;
	border: none;
	cursor: pointer;
	color: var(--ink);
}
.nav-toggle-bars,
.nav-toggle-bars::before,
.nav-toggle-bars::after {
	content: "";
	display: block;
	width: 24px;
	height: 2px;
	background: currentColor;
	transition: transform 0.2s ease, background 0.2s ease;
}
.nav-toggle-bars { position: relative; }
.nav-toggle-bars::before { position: absolute; left: 0; top: -7px; }
.nav-toggle-bars::after  { position: absolute; left: 0; top: 7px; }
.site-nav.is-open .nav-toggle-bars { background: transparent; }
.site-nav.is-open .nav-toggle-bars::before { transform: translateY(7px) rotate(45deg); }
.site-nav.is-open .nav-toggle-bars::after  { transform: translateY(-7px) rotate(-45deg); }

/* Panelen (dropdown). Öppnas via JS som växlar .is-open på .site-nav. */
.nav-panel {
	display: none;
	position: absolute;
	top: calc(100% + 0.5rem);
	right: 0;
	min-width: 220px;
	background: var(--paper);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
	padding: 0.4rem;
}
.site-nav.is-open .nav-panel { display: block; }
.nav-panel ul { list-style: none; margin: 0; padding: 0; }
.nav-panel a {
	display: block;
	padding: 0.55rem 0.8rem;
	text-decoration: none;
	color: var(--ink);
	border-radius: 12px;
}
.nav-panel a:hover { background: var(--paper-2); color: var(--blue); }
.nav-panel .panel-sep {
	display: none;   /* visas bara när något ligger ovanför den (≤900px) */
	height: 1px;
	background: var(--line);
	margin: 0.4rem 0.6rem;
}

/* Breda skärmar: panelen innehåller BARA långsvansen.
   De primära länkarna visas inline i stället (dolda i panelen här). */
.nav-panel .panel-primary,
.nav-panel .panel-secondary,
.nav-panel .panel-cta { display: none; }

/* Stegvis kollaps, steg 1 (≤900px):
   Eventfäktning och Veckoschema viker in i hamburgaren.
   Kvar inline: Börja fäkta + Anmälan. */
@media (max-width: 900px) {
	.nav-inline .is-secondary { display: none; }
	.nav-panel .panel-secondary { display: block; }
	.nav-panel .panel-sep { display: block; }
}

/* Stegvis kollaps, steg 2 (≤640px):
   Även Börja fäkta och Anmälan viker in.
   Kvar i raden: bara emblem, klubbnamn och hamburgare. */
@media (max-width: 640px) {
	.nav-inline { display: none; }
	.nav-panel .panel-primary,
	.nav-panel .panel-cta { display: block; }

	/* Fullskärmsmeny under sidhuvudet */
	.nav-panel {
		position: fixed;
		top: var(--header-h, 69px);
		left: 0;
		right: 0;
		bottom: 0;
		min-width: 0;
		margin: 0;
		border: none;
		border-radius: 0;
		box-shadow: none;
		padding: 1rem;
		overflow-y: auto;
	}
	.nav-panel a { padding: 0.8rem; font-size: 1.15rem; }
}

/* Lås bakgrundsscroll när fullskärmsmenyn är öppen (sätts av JS, endast ≤640px) */
body.menu-open { overflow: hidden; }

.site-footer {
	margin-top: 4rem;
	border-top: 1px solid var(--line);
	color: var(--ink-3);
	font-size: 0.9rem;
}
.site-footer .wrap { padding-block: 2rem; }

/* ==========================================================================
   WordPress-överskrivningar (gäller bara i temat, inte HTML-mockupen)
   ========================================================================== */

/* WP lägger 1.2rem block-gap mellan rot-elementen (:where(.wp-site-blocks) > *).
   Vår layout sköter avstånden själv → nolla den (annars gap header↔film m.m.). */
.wp-site-blocks > * { margin-block-start: 0; }

/* Rubriken i Klubben idag ärver inte vit i WP — en element-regel på h2 slår
   inhärvningen från .tile--today. Sätt explicit vit. */
.tile--today .today-title { color: var(--paper); }

/* Undersidors innehåll — läsbredd och luft (page.html) */
.page-content {
	max-width: var(--wrap);
	margin-inline: auto;
	padding: 2.5rem 1rem 4rem;
}
.page-content > h1 { margin-bottom: 1.25rem; }

/* WCC-ruta — extern bild som länkar till PDF. Ingen fototoning; hela affischen visas. */
.tile--wcc { display: block; background: var(--paper-2); }
.tile--wcc::after { display: none; }
.tile--wcc img { width: 100%; height: 100%; object-fit: contain; display: block; }

/* Liten "öppnas i ny flik"-ikon (t.ex. på Anmälan). Ärver textens färg. */
.ext-icon { width: 0.8em; height: 0.8em; margin-left: 0.35em; vertical-align: -0.08em; flex-shrink: 0; }

/* Panelen som flex-kolumn: Anmälan överst när den vikt in dit, Hem direkt under
   (eller Hem överst när Anmälan fortfarande syns i topp-navet). */
.nav-panel ul { display: flex; flex-direction: column; }
.nav-panel .nav-home { order: -1; }
.nav-panel .panel-cta { order: -2; }

/* Anmälan som CTA-knapp även i hamburgerpanelen (behåller panelens padding). */
.nav-panel .panel-cta a {
	margin: 0.4rem 0.6rem;
	background: var(--blue);
	color: var(--paper);
	text-align: center;
	border-radius: var(--radius);
}
.nav-panel .panel-cta a:hover {
	background: var(--blue-dark);
	color: var(--paper);
}

/* Kartembedd på kontaktsidan. */
.contact-map { margin-block: 0.75rem 1.75rem; }
.contact-map iframe { display: block; width: 100%; border: 0; border-radius: var(--radius); }
.contact-map__link { margin: 0.5rem 0 0; font-size: 0.9rem; }

/* Tom-text i nyhetsgriden — spänn över alla kolumner och centrera med luft. */
.news-empty {
	grid-column: 1 / -1;
	text-align: center;
	padding: 3rem 1rem;
	color: var(--ink-3);
	font-style: italic;
}