/* ==========================================================================
   footer.css — Genva Interior

   Ported from the mock.

   Rows that core can lay out keep a flex layout attribute, so the site editor
   shows the real arrangement. The two grid areas cannot be expressed as a
   core layout, so those groups stay on the default flow layout and the grid
   is written here.

   Flow layout gives every child a margin-block-start from blockGap, which
   would push grid and flex children out of place. Core writes that rule as
   `:root :where(.is-layout-flow) > *`, specificity 0-1-0, using the long hand
   properties. An override has to repeat that shape and stay long hand too: a
   `margin: 0` shorthand ties on specificity and loses.
   ========================================================================== */

/* Core gives every child of .wp-site-blocks a top margin from blockGap. The
   footer sets its own padding, so the extra margin would show as a band of
   page background above it. */
.wp-site-blocks > footer {
	margin-block-start: 0;
}

.site-footer {
	width: 100%;
	background: var(--surface-container-lowest);
	box-shadow: 0 -1px 4px rgba(0, 0, 0, 0.02);
	padding-top: var(--space-2xl);
	padding-bottom: var(--space-xl);
}

@media (width < 782px) {

	.site-footer {
		padding-block: var(--space-lg);
	}
}

/* The footer uses the outer frame, not the reading width, so the shop details
   and the link columns can spread on a wide screen. */
.site-footer__inner {
	max-width: var(--container-max);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

:root :where(.is-layout-flow) > .site-footer__inner {
	margin-block-start: 0;
	margin-block-end: 0;
}

/* --------------------------------------------------------------------------
   Upper band

   Grid rather than space-between: distributing the leftover space pushed the
   link columns to the far right and left a hole in the middle. Proportional
   tracks keep the two blocks next to each other at any frame width, and the
   brand track grows with the frame so a long shop name has room.
   -------------------------------------------------------------------------- */
.site-footer__top {
	display: flex;
	flex-direction: column;
	gap: var(--space-xl);
	padding-bottom: var(--space-xl);
}

@media (width >= 768px) {

	.site-footer__top {
		display: grid;
		grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
		column-gap: var(--space-2xl);
		row-gap: var(--space-xl);
		align-items: start;
	}
}

@media (width < 782px) {

	.site-footer__top {
		padding-bottom: var(--space-md);
	}
}

:root :where(.is-layout-flow) > .site-footer__top,
:root :where(.is-layout-flow) > .site-footer__bottom {
	margin-block-start: 0;
	margin-block-end: 0;
}

.site-footer__top > .site-footer__brand,
.site-footer__top > .site-footer__links {
	margin-block-start: 0;
	margin-block-end: 0;
}

/* --------------------------------------------------------------------------
   Shop details

   No max-width on this block: the shop name goes in it and some are long.
   The line length of the description is limited instead, in ch, so it stays
   readable without ever clipping or wrapping the name.
   -------------------------------------------------------------------------- */
:root :where(.is-layout-flex).site-footer__brand {
	gap: var(--space-xs);
}

:root :where(.is-layout-flex).site-footer__brandrow {
	gap: var(--space-xs);
}

.site-footer__name {
	margin: 0;
	color: var(--on-surface);
	font-weight: 700;
	letter-spacing: -0.01em;
}

.site-footer__name a {
	color: inherit;
	text-decoration: none;
}

.site-footer__seal {
	margin: 0;
	background: var(--secondary-fixed);
	color: var(--on-secondary-fixed);
	padding: 0.125rem 0.5rem;
	border-radius: var(--rounded);
}

.site-footer__address {
	margin: 0;
	color: var(--on-surface-variant);
	max-width: 62ch;
}

/* --------------------------------------------------------------------------
   Link columns

   Two real columns instead of shrink-to-fit ones, capped so the links do not
   drift apart on a 1440px frame.
   -------------------------------------------------------------------------- */
.site-footer__links {
	display: flex;
	flex-wrap: wrap;
	column-gap: var(--space-xl);
	row-gap: var(--space-sm);
}

@media (width >= 768px) {

	.site-footer__links {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--space-xl);
		max-width: 34rem;
	}
}

@media (width < 782px) {

	.site-footer__links {
		gap: var(--space-md) var(--space-lg);
	}
}

.site-footer__links > .site-footer__col {
	margin-block-start: 0;
	margin-block-end: 0;
}

:root :where(.is-layout-flex).site-footer__col {
	gap: var(--space-xs);
}

.site-footer__col > p {
	margin: 0;
	color: var(--on-surface);
	font-weight: 700;
}

.site-footer__col ul {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: var(--space-xs);
}

.site-footer__col li {
	margin: 0;
}

/* Inline links in a list are only as tall as their text — these measured 20px,
   under the 24px WCAG 2.2 asks for and well under the 44px this theme uses
   everywhere else. The shop's callers are mostly elderly, so a row of 20px
   targets four pixels apart is the wrong thing to ship. The link becomes a
   block of its own height; the list's row gap shrinks to pay for it. */
.site-footer__col a {
	display: flex;
	align-items: center;
	min-height: 44px;
	color: var(--on-surface-variant);
	text-decoration: none;
	transition: color 150ms ease;
}

.site-footer__col li {
	margin-block: 0;
}

.site-footer__col a:hover {
	color: var(--secondary);
}

/* --------------------------------------------------------------------------
   Lower band

   The privacy policy link belongs with the contact form: whoever removes the
   form should remove this link too. The usage guide says so.
   -------------------------------------------------------------------------- */
.site-footer__bottom {
	padding-top: var(--space-lg);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-sm);
	color: var(--on-surface-variant);
}

@media (width >= 640px) {

	.site-footer__bottom {
		flex-direction: row;
	}
}

.site-footer__bottom > * {
	margin-block-start: 0;
	margin-block-end: 0;
}

.site-footer__legal {
	margin: 0;
	display: flex;
	align-items: center;
	gap: var(--space-md);
}

.site-footer__legal a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: inherit;
	text-decoration: none;
	transition: color 150ms ease;
}

.site-footer__legal a:hover {
	color: var(--on-surface);
}

.site-footer__copyright {
	margin: 0;
}

/* The three lines were one paragraph with line breaks. They are separate
   blocks now, so the shop's address and its phone line can each be replaced
   from the settings screen on their own. The gap is closed so the group still
   reads as one address. */
:root :where(.is-layout-flex).site-footer__address {
	gap: 0;
}

.site-footer__address p {
	margin: 0;
}