/* Site footer. Denim panel closing the linen page, per the mock-up. */

/*
 * The footer's content sits in Blocksy's normal container — the width the
 * home page's grid, the content pages and the cart use — so its left edge is
 * the site's left edge. Blocksy's container is `min(100%, 90vw)`, so the
 * footer carries no side padding of its own: the container brings the gutter.
 */
.haft-stopka {
	background: var( --haft-denim );
	color: var( --haft-len );
	padding: 48px 0 14px;

	/*
	 * Blocksy colours links from these variables, and site-wide they now resolve
	 * to our palette: accent red on hover, ink for the pressed state. Both are
	 * meant for the linen page and neither works on denim — ink-on-denim is the
	 * black-on-navy the footer links were turning. Re-point them inside the
	 * footer instead of adding a `color:` per link state, which would leave
	 * whichever state we forgot still reading from the wrong palette.
	 */
	--theme-link-initial-color: #dcd6c8;
	--theme-link-hover-color: #fff;
	--theme-link-active-color: #fff;
}

.haft-stopka__grid {
	width: var( --theme-container-width, min( 100%, 90vw ) );
	max-width: var( --theme-normal-container-max-width, 1290px );
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
	gap: 40px;
}

@media ( max-width: 980px ) {
	.haft-stopka__grid {
		grid-template-columns: 1fr 1fr;
		gap: 34px;
	}
}

@media ( max-width: 600px ) {
	.haft-stopka__grid {
		grid-template-columns: 1fr;
		gap: 32px;
	}
}

.haft-stopka__logo {
	font-family: var( --haft-font-display );
	font-weight: 800;
	font-size: 1.15rem;
	letter-spacing: -0.02em;
	color: #fff;
	margin-bottom: 14px;
}

/* Column headings: mono, spaced out, deliberately quieter than the links. */
.haft-stopka__kolumna h2 {
	font-family: var( --haft-font-kod );
	font-size: 0.68rem;
	font-weight: 400;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: #9fb0cd;
	margin-bottom: 16px;
}

.haft-stopka p,
.haft-stopka li,
.haft-stopka a {
	font-size: 0.88rem;
	color: #dcd6c8;
}

.haft-stopka__kolumna p {
	max-width: 32ch;
	line-height: 1.65;
}

/*
 * Opening hours: days in one column, hours in the other. The hours are set
 * flush right so the colons stand under each other — "9:00" is a digit shorter
 * than "10:00", and left-aligned they stepped. Tabular figures keep every
 * digit the same width, which is what makes the alignment hold in a
 * proportional face.
 *
 * The same face and colour as the links beside them. The mock-up set the hours
 * in the mono face, and next to three columns of regular text they read as a
 * code sample rather than as opening hours.
 */
.haft-stopka__godziny {
	display: grid;
	grid-template-columns: max-content max-content;
	column-gap: 18px;
	justify-content: start;
	font-size: 0.88rem;
	line-height: 2;
	font-variant-numeric: tabular-nums;
	color: #dcd6c8;
}

/* Blocksy emboldens <dt>; the days are labels, not headings. */
.haft-stopka__godziny dt {
	font-weight: 400;
}

.haft-stopka__godziny dd {
	margin: 0;
	text-align: right;
}

.haft-stopka__linki {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 9px;
}

.haft-stopka__linki a {
	text-decoration: none;
	border-bottom: 1px solid transparent;
}

/*
 * Hover goes white with a red rule under it. The mock-up does not embolden it,
 * so neither do we — a weight change here would also nudge the column's width
 * on every hover.
 */
.haft-stopka__linki a:hover,
.haft-stopka__linki a:focus-visible {
	color: #fff;
	border-bottom-color: var( --haft-mulina );
}

.haft-stopka__dol {
	width: var( --theme-container-width, min( 100%, 90vw ) );
	max-width: var( --theme-normal-container-max-width, 1290px );
	margin: 30px auto 0;
	padding-top: 14px;
	border-top: 1px solid rgba( 255, 255, 255, 0.13 );
	display: flex;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	font-family: var( --haft-font-kod );
	font-size: 0.68rem;
	letter-spacing: 0.06em;
	color: #9fb0cd;
}