/* ===========================================================================
   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);
}

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

.skb-header {
	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(--bw-hair) solid var(--border-hairline);
}

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

/* Logotyp: neutral storlek, byts per site via Site Logo-blocket. */
.skb-header .wp-block-site-logo img {
	max-height: calc(var(--header-h) - var(--space-5));
	width: auto;
}

/* 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-sm);
	letter-spacing: var(--tracking-mono);
	text-transform: uppercase;
}

.skb-header .wp-block-navigation a {
	color: var(--text-secondary);
	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(--text-primary);
}

/* 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;
}

@media (max-width: 600px) {
	.skb-header__inner {
		gap: var(--space-3);
	}

	/* Dölj CTA:n på riktigt små skärmar; nav-overlayn räcker. */
	.skb-header .wp-block-krogbolag-button {
		display: none;
	}
}

/* ---------------------------------------------------------------------------
   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);
}

/* Öppettider: bind-värdet levereras radbrutet med "\n". */
.skb-footer__hours {
	white-space: pre-line;
	font-family: var(--font-mono);
	font-size: var(--fs-mono-sm);
	line-height: var(--lh-mono);
	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;
}

.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);
	}
}