/* ===========================================================================
   Stockholms Krogbolag — Template parts (header & footer)

   Strukturstilar som inline block-styles inte kan uttrycka: sticky-position,
   full-bredds bakgrunder, hover/fokus, och responsiva media queries. Alla
   färger/mått via token-bryggan (var(--…)) så style variations tema-om dem.
   Laddas på frontend + i editorn via functions.php.

   Ingen restaurangspecifik grafik här — logo/ankare/bilder är per-site media
   (Site Logo-block + bild-block), aldrig temafiler.
   =========================================================================== */

/* Hash-ankare ska inte hamna under den sticky headern. */
html {
	scroll-padding-top: var(--header-h);
}

/* Mjuk scroll för ankarlänkar (menysidans kategori-pills m.fl.). */
@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

/* ---------------------------------------------------------------------------
   Header
   --------------------------------------------------------------------------- */

/* Tjock bottenlinje i teal — samma greppet som gamla kaptenjack.se, men i
   temats egen palett. Linjens tjocklek är en egen variabel så mobil-queryn och
   markeringsbaren nedan kan räkna med samma värde. */
.skb-header {
	--header-rule: 12px;

	position: sticky;
	top: 0;
	z-index: 100;
	background: color-mix(in srgb, var(--surface-page) 88%, transparent);
	-webkit-backdrop-filter: saturate(1.4) blur(8px);
	backdrop-filter: saturate(1.4) blur(8px);
	border-bottom: var(--header-rule) solid var(--color-teal);
}

.skb-header__inner {
	min-height: var(--header-h);
	align-items: center;
	gap: var(--space-5);
}

/* Logotyp: bredden styr, höjden kapas mot headern.

   Site Logo-blockets `width` skrivs ut som width-attribut på <img>, så en
   subsite som satt 140px blir liten hur mycket vi än höjer headern — därför
   sätter vi bredden här i stället. KJ:s logotyp är en bred wordmark (ca 8,6:1);
   `max-height` + `object-fit` gör att en kvadratisk eller stående logotyp hos en
   systerkrog kapas i höjd i stället för att sträckas ut. */
.skb-header .wp-block-site-logo img {
	width: clamp(180px, 24vw, 280px);
	max-width: 100%;
	height: auto;
	max-height: calc(var(--header-h) - var(--space-4));
	object-fit: contain;
	object-position: left center;
}

/* Navigation i mono, versaler — utan temats globala gold-länkstil. */
.skb-header .wp-block-navigation {
	font-family: var(--font-mono);
	font-size: var(--fs-mono-lg);
	letter-spacing: var(--tracking-mono);
	text-transform: uppercase;
}

.skb-header .wp-block-navigation a {
	position: relative;
	color: var(--color-teal);
	text-decoration: none;
	transition: color var(--dur) var(--ease-out);
}

.skb-header .wp-block-navigation a:hover,
.skb-header .wp-block-navigation .current-menu-item a {
	color: var(--color-blue);
}

/* Markeringsbar som växer upp ur den tjocka linjen vid hover/aktiv sida.
   Ankrad mot headerns underkant: navraden är vertikalt centrerad i
   `--header-h`, så halva den höjden plus linjen tar oss hela vägen ner. */
.skb-header .wp-block-navigation a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: calc(50% + var(--header-h) / 2);
	height: 0;
	background: var(--color-sage);
	transition: height var(--dur) var(--ease-out);
}

.skb-header .wp-block-navigation a:hover::after,
.skb-header .wp-block-navigation .current-menu-item a::after {
	height: var(--header-rule);
}

/* Kalendariet ska sticka ut från övriga länkar (kundönskemål).
   Navet kan ligga antingen som `wp:navigation-link` i temats parts/header.html
   — då finns klassen — eller som en `wp_navigation`-post redigerad i Site
   Editor, där klassen inte följer med. Därför matchar vi på href också. */
.skb-header .skb-nav__item--calendar > a,
.skb-header .wp-block-navigation a[href$="/event"],
.skb-header .wp-block-navigation a[href$="/event/"] {
	color: var(--color-red);
}

.skb-header .skb-nav__item--calendar > a::after,
.skb-header .wp-block-navigation a[href$="/event"]::after,
.skb-header .wp-block-navigation a[href$="/event/"]::after {
	height: var(--header-rule);
	background: var(--color-red);
}

/* CTA:n (krogbolag/button) ska aldrig växa och tryckas ihop i raden. */
.skb-header .wp-block-krogbolag-button {
	flex: 0 0 auto;
	white-space: nowrap;
}

/* Mellanbredder: raden är `nowrap` och rymmer logotyp, fem nav-länkar,
   två växlare och CTA:n — dra ner skalan innan något kläms. */
@media (max-width: 1024px) {
	.skb-header__inner {
		gap: var(--space-4);
	}

	.skb-header .wp-block-site-logo img {
		width: clamp(150px, 20vw, 200px);
	}

	.skb-header .wp-block-navigation {
		font-size: var(--fs-mono);
	}
}

@media (max-width: 600px) {
	.skb-header {
		--header-rule: 6px;
	}

	/* Utan root-padding går headerraden kant i kant på mobil — logotypen ligger
	   då och skaver mot skärmkanten, och nedfällningens länkar (som har egen
	   indragning) hamnar i otakt med den. Samma indrag på båda. */
	.skb-header__inner {
		gap: var(--space-3);
		padding-inline: var(--space-4);
	}

	.skb-header .wp-block-navigation {
		font-size: var(--fs-mono);
	}

	/* Dölj CTA:n på riktigt små skärmar; den ligger i nedfällningen i stället. */
	.skb-header .wp-block-krogbolag-button {
		display: none;
	}
}

/* ---------------------------------------------------------------------------
   Nedfällbar meny (mobil)

   Core renderar overlay-menyn som `position: fixed; inset: 0` — en helskärms-
   takeover. Kunden vill i stället att menyn ska "falla ner" under headern som på
   kommendoren.se, med sidan kvar bakom. Vi rör inte corens JS (Esc, fokusflytt
   och scroll-lås ligger kvar) utan flyttar och klär bara panelen.

   Panelen ankras i `.skb-header`: den är `position: sticky` *och* har
   backdrop-filter, så den är containing block för absolut positionerade barn.

   Om specificiteten: corens overlayregler ligger på (0,3,0)–(0,4,0) och
   blockstilar kan skrivas ut efter temats CSS. Därför dubblas `.is-menu-open`
   i selektorerna nedan — då vinner vi oavsett laddningsordning, utan
   `!important`.
   --------------------------------------------------------------------------- */

/* Markeringsbaren hör till navraden i headern och ska inte följa med ner i
   panelen (den skulle hänga kvar under varje länk). */
.skb-header .wp-block-navigation__responsive-container.is-menu-open a::after {
	display: none;
}

/* Boka bord-länken finns bara för nedfällningen — på desktop står CTA-knappen
   redan i headerraden. */
.skb-header .wp-block-navigation .skb-nav__item--cta {
	display: none;
}

@media (max-width: 600px) {
	/* Core sätter `position: relative` på själva nav-elementet, som här bara är
	   24 px brett (hamburgaren) — lämnas det kvar blir det panelens containing
	   block och panelen krymper till ikonens bredd. Nollas det tar `.skb-header`
	   över, och panelen kan spänna över hela headerns bredd. */
	.skb-header .wp-block-navigation {
		position: static;
	}

	.skb-header .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open.is-menu-open {
		position: absolute;
		/* `top: 100%` når headerns padding box, alltså ovanför bottenlinjen —
		   linjens tjocklek läggs på så panelen hamnar precis under den. */
		top: calc(100% + var(--header-rule));
		right: 0;
		bottom: auto;
		left: 0;
		max-height: calc(100dvh - var(--header-h) - var(--header-rule));
		overflow-y: auto;
		padding: 0;
		/* Måste vara opak — sidan ligger kvar bakom panelen. */
		background: var(--surface-page);
		border-bottom: var(--header-rule) solid var(--color-teal);
	}

	/* Själva fallet: panelen avslöjas uppifrån och ner. clip-path animeras på
	   compositor-nivå och kräver ingen känd höjd, till skillnad från max-height.
	   Ersätter corens `overlay-menu__fade-in-animation`. */
	@media (prefers-reduced-motion: no-preference) {
		.skb-header .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open.is-menu-open {
			animation: skb-nav-drop var(--dur-slow) var(--ease-out);
		}
	}

	/* Panelen och dess innehåll räknar bredd inklusive padding — annars sticker
	   Boka bord-knappen (width:100% + padding) ut utanför skärmen. */
	.skb-header .wp-block-navigation .is-menu-open.is-menu-open,
	.skb-header .wp-block-navigation .is-menu-open.is-menu-open * {
		box-sizing: border-box;
	}

	/* Stängkrysset läggs i flödet överst i panelen i stället för absolut i
	   hörnet — då behöver innehållet ingen frihöjd under sig. */
	.skb-header .wp-block-navigation .is-menu-open.is-menu-open .wp-block-navigation__responsive-container-close {
		position: static;
		display: block;
		margin-inline-start: auto;
		padding: var(--space-3) var(--space-4);
		color: var(--color-teal);
	}

	/* Hamburgaren döljs medan panelen är öppen — krysset tar över rollen.
	   `visibility` i stället för `display` så headerraden inte hoppar. */
	.skb-header .wp-block-navigation:has(.is-menu-open) .wp-block-navigation__responsive-container-open {
		visibility: hidden;
	}

	.skb-header .wp-block-navigation .is-menu-open.is-menu-open .wp-block-navigation__responsive-container-content {
		padding-top: 0;
	}

	/* Länkarna staplas i vänsterställda helbredds-rader (jfr kommendoren.se) —
	   core centrerar dem annars efter navblockets `justifyContent`. */
	.skb-header .wp-block-navigation .is-menu-open.is-menu-open .wp-block-navigation__container {
		width: 100%;
		flex-direction: column;
		align-items: stretch;
		justify-content: flex-start;
		gap: 0;
	}

	.skb-header .wp-block-navigation .is-menu-open.is-menu-open .wp-block-navigation-item {
		width: 100%;
		align-items: stretch;
	}

	/* 16px + radhöjd ≈ 48px hög tryckyta. */
	.skb-header .wp-block-navigation .is-menu-open.is-menu-open .wp-block-navigation-item__content {
		display: block;
		width: 100%;
		padding: var(--space-4);
		text-align: start;
		border-top: var(--bw-hair) solid var(--border-hairline);
	}

	/* Boka bord: samma röda knapputtryck som skb-button--primary, med luft
	   runt om så den läser som en avslutande CTA och inte som en länk till. */
	.skb-header .wp-block-navigation .is-menu-open.is-menu-open .skb-nav__item--cta {
		display: block;
		padding: var(--space-4);
	}

	.skb-header .wp-block-navigation .is-menu-open.is-menu-open .skb-nav__item--cta .wp-block-navigation-item__content {
		padding: 11px 18px;
		border: var(--bw-hair) solid var(--cta-bg);
		border-radius: var(--radius-sm);
		background: var(--cta-bg);
		color: var(--cta-text);
		font-weight: var(--fw-mono-bold);
		text-align: center;
	}
}

@keyframes skb-nav-drop {
	from {
		clip-path: inset(0 0 100% 0);
	}

	to {
		clip-path: inset(0 0 0 0);
	}
}

/* ---------------------------------------------------------------------------
   Footer — mörk ink-ton
   --------------------------------------------------------------------------- */

.skb-footer {
	background: var(--surface-ink);
	color: var(--text-on-dark);
}

/* Rubrikerna tvingas ljusa (theme.json sätter dem annars mörka = osynliga). */
.skb-footer :where(h1, h2, h3, h4, h5, h6),
.skb-footer .wp-block-site-title {
	color: var(--text-on-dark);
}

.skb-footer .wp-block-site-title {
	font-family: var(--font-display);
	text-transform: uppercase;
	letter-spacing: var(--tracking-display);
}

.skb-footer a {
	color: var(--color-gold-tint);
	text-decoration: none;
}

.skb-footer a:hover {
	color: var(--text-on-dark);
	text-decoration: underline;
}

/* Kolumnrubriker: liten mono-eyebrow. */
.skb-footer__heading {
	font-family: var(--font-mono);
	font-size: var(--fs-mono-sm);
	letter-spacing: var(--tracking-mono-wide);
	text-transform: uppercase;
	color: var(--text-on-dark-mute);
	margin-bottom: var(--space-3);
}

/* Underrubriker inne i en kolumn (Bordsbokning, Vill du jobba hos oss?) —
   samma mono-eyebrow som kolumnrubrikerna men mindre och med luft ovanför. */
.skb-footer__subheading {
	font-family: var(--font-mono);
	font-size: var(--fs-mono-xs);
	letter-spacing: var(--tracking-mono-wide);
	text-transform: uppercase;
	color: var(--text-on-dark-mute);
	margin-top: var(--space-4);
	margin-bottom: var(--space-2);
}

/* Öppettider (krogbolag/hours-list) — dag/tid-rader på mörk botten. */
.skb-footer .skb-hours-list {
	font-size: var(--fs-mono-sm);
	color: var(--text-on-dark);
}

.skb-footer__contact,
.skb-footer__nav {
	font-family: var(--font-mono);
	font-size: var(--fs-mono-sm);
	line-height: var(--lh-mono);
}

.skb-footer__nav .wp-block-navigation {
	color: var(--color-gold-tint);
	text-transform: uppercase;
	letter-spacing: var(--tracking-mono);
}

/* Ankar-/illustrationsslot: per-site media, tonad. Neutral när tom. */
.skb-footer__mark img {
	max-height: 72px;
	width: auto;
	opacity: 0.9;
}

/* Nyhetsbrevsband. Blocket renderar ingenting utan anmälnings-URL, så ramen
   ligger på blocket självt — inte på en behållare som skulle lämna en lucka. */
.skb-footer .skb-newsletter {
	padding-top: var(--space-5);
	border-top: var(--bw-hair) solid rgba(242, 238, 227, 0.14);
}

.skb-footer .skb-newsletter__input {
	border-color: transparent;
}

/* Systerkrogar: logotyprad, per-site media. Tomma slots visas inte.
   Vi döljer bara <img> utan src — i editorn finns i stället blockets
   uppladdningsplatshållare, och den ska förbli synlig. */
.skb-footer__sisters {
	gap: var(--space-6);
	align-items: center;
}

.skb-footer__sisters img {
	max-height: 48px;
	width: auto;
	opacity: 0.8;
	transition: opacity var(--dur) var(--ease-out);
}

.skb-footer__sisters a:hover img {
	opacity: 1;
}

.skb-footer__sisters img:not([src]) {
	display: none;
}

.skb-footer__legal {
	border-top: var(--bw-hair) solid rgba(242, 238, 227, 0.14);
	font-family: var(--font-mono);
	font-size: var(--fs-mono-xs);
	letter-spacing: var(--tracking-mono);
	text-transform: uppercase;
	color: var(--text-on-dark-mute);
}

/* Stapla kolumnerna på mobil (core/columns gör detta åt oss, men håll luft). */
@media (max-width: 781px) {
	.skb-footer__cols {
		gap: var(--space-6);
	}
}

/* ---------------------------------------------------------------------------
   Sociala medier (krogbolag/social-links)
   --------------------------------------------------------------------------- */

/* I en sektion (kontaktsidan) avgränsas raden med samma hårlinje som förr.
   Blocket renderar ingenting utan ifyllda kanaler, så linjen ligger på blocket
   självt — annars hade en tom subsite fått en ensam streck-lucka. */
.skb-section .skb-social-links {
	margin-top: var(--space-7);
	padding-top: var(--space-6);
	border-top: var(--bw-hair) solid var(--border-hairline);
}

.skb-section .skb-social-links__heading {
	color: var(--text-muted);
	opacity: 1;
}

/* I footern bär blocket själv sin hårlinje (iconColor "bg" sköter tonen) —
   samma resonemang som nyhetsbrevsbandet: utan ifyllda kanaler renderas
   ingenting, och då ska inte heller en ensam linje bli kvar. */
.skb-footer .skb-social-links {
	padding-top: var(--space-5);
	border-top: var(--bw-hair) solid rgba(242, 238, 227, 0.14);
}

.skb-footer .skb-social-links__heading {
	color: var(--text-on-dark-mute);
	opacity: 1;
}