/* ============================================================================
   FOOTER

   REMOVED DURING CONSOLIDATION — all of these targeted markup that no longer
   exists anywhere on the site, so deleting them changed nothing visually:

     ul.wp-block-latest-posts__list   the old "recent posts" widget
     ul#menu-connect                  the old connect menu
     h2.widgettitle                   old widget headings
     .widget.widget_nav_menu          old nav-menu widget
     .wp-block-columns.wp-container-3 WordPress renamed these classes; the
                                      480px two-column footer layout that
                                      depended on it had not worked in a while
   ============================================================================ */


/* ============================================================
   SURFACE
   ============================================================ */
body.post-template-default.single.single-post footer#page-footer,
body.archive footer#page-footer,
.page-template-default.page footer#page-footer {
	background: var(--evm-surface-footer) !important;
}

/* Kinsey's horizontal rule between footer areas. */
.footer__divider {
	display: none !important;
}


/* ============================================================
   VERTICAL RHYTHM

   Both halves of the footer run on one gap, --evm-footer-gap: after a
   heading, between paragraphs, and between menu items. So the menus on the
   right line up with the copy on the left instead of drifting.

   Every top margin is zeroed and every gap expressed as a bottom margin.
   That is deliberate. Adjacent vertical margins collapse to the LARGER of
   the two, so leaving both in place makes the real gap the maximum of two
   numbers — which is invisible in the source and surprising to edit. One
   direction only means the value you read is the value you get.
   ============================================================ */
.footer__widget-area_top h3.wp-block-heading,
.footer__widget-area_top p,
.footer__widget-area_top .wp-block-list {
	margin-top: 0 !important;
	margin-bottom: var(--evm-footer-gap) !important;
}

/* Menu items carry NO gap of their own. They stack on the shared 24px
   line-height, which puts one menu item below the next at exactly the
   distance between two lines inside a paragraph — so a menu column reads
   with the same leading as the copy beside it.

   The parent's `.widget ul li { margin-bottom: 0.5em }` is what previously
   pushed them apart. */
.footer__widget-area_top .wp-block-list,
.footer__widget-area_top .wp-block-list li {
	margin-bottom: 0 !important;
	padding-left: 0 !important;
	list-style: none !important;
}

/* The type metrics belong on the <li>, not the <a>.

   Each <li> is a block and generates its own line box, whose height comes
   from the li's OWN line-height — inherited from the parent theme's
   `body { line-height: 1.8 }`, i.e. 28.8px. Setting line-height on the
   inline <a> inside cannot shrink that: an inline box can raise a line box
   but never lower it below the block's strut.

   So every menu item sat in a 28.8px line box while the paragraphs beside
   them use 24px — pushing the first item down and spreading the rest. */
.footer__widget-area_top .wp-block-list li {
	font-size: 16px !important;
	line-height: 24px !important;
}

/* Nothing trailing at the bottom of a column. */
.footer__widget-area_top p:last-child {
	margin-bottom: 0 !important;
}


/* ============================================================
   TYPOGRAPHY
   'Vulf Sans' comes from the arts-custom-fonts plugin — see 02-fonts.css.
   ============================================================ */
.footer h3.wp-block-heading {
	font-family: 'Vulf Sans';
	font-style: normal;
	font-weight: 300 !important;
	font-size: 20px !important;
	line-height: 24px !important;
	color: var(--evm-ink-muted) !important;
}

.footer p {
	font-family: 'Vulf Sans';
	font-weight: 300;
	font-size: 16px !important;
	line-height: 24px;
	color: var(--evm-ink-muted);
}

/* Menu items — identical type to the paragraphs beside them, then set in
   caps with the same letterspacing as the top nav.

   The family and weight are declared, not inherited. Links default to
   font-weight 400 while the paragraphs are 300, and now that Vulf Sans has
   real weights that difference actually renders — a Regular next to a
   Light reads as larger even at the same size, which is what made these
   look bigger than the copy. */
.footer__widget-area_top .wp-block-list li a {
	font-family: 'Vulf Sans';
	font-weight: 300 !important;
	font-size: 16px !important;
	line-height: 24px !important;
	text-transform: uppercase !important;
	letter-spacing: 0.08em !important;
}


/* ============================================================
   COLOUR — light pages
   ============================================================ */
body.post-template-default.single.single-post footer#page-footer,
body.archive footer#page-footer,
.page-template-default.page footer#page-footer,
footer#page-footer.bg-white {
	color: var(--evm-ink-footer) !important;
}

body.post-template-default.single.single-post footer#page-footer a,
body.archive footer#page-footer a,
.page-template-default.page footer#page-footer a,
footer#page-footer.bg-white a {
	color: var(--evm-ink) !important;
}

body.post-template-default.single.single-post footer#page-footer a:hover,
body.archive footer#page-footer a:hover,
.page-template-default.page footer#page-footer a:hover,
footer#page-footer.bg-white a:hover {
	color: var(--evm-footer-link-hover) !important;
}


/* ============================================================
   LINK UNDERLINE

   The same sweep the header nav uses: a linear-gradient painted as a
   background image, grown from zero width on hover. It is done this way
   rather than with text-decoration because only background-size can be
   transitioned — text-decoration cannot animate.

   `currentColor` means the line always matches the text, including as the
   colour changes on hover, with no second rule to keep in sync.

   Anchored right at rest and left on hover, so it grows from the left and
   retreats to the right rather than collapsing back the way it came.

   Applies to every link in the top area — both menus and the inline
   "email me" in the copy.
   ============================================================ */
.footer__widget-area_top a {
	background-image: linear-gradient(currentColor, currentColor);
	background-repeat: no-repeat;
	background-position: 100% 100%;
	background-size: 0% 1px;
	transition: background-size 0.4s ease, color 0.2s ease;
	text-decoration: none !important;
}

.footer__widget-area_top a:hover {
	background-position: 0 100%;
	background-size: 100% 1px;
}


/* ============================================================
   LAYOUT

   The copyright line is NOT repositioned here. It used to be pulled up 80px
   and then padded back down 69px, with z-index: -1 to stop the overlap that
   caused — three rules cancelling each other out, and the reason it sat in
   the wrong place. All three are gone. The parent's own spacing
   (`.footer__widget-area_top { padding-bottom: 2em }` plus
   `.footer__widget-area_bottom { padding-top: 1.5em }`) puts it below
   everything, which is where it belongs, and it stacks correctly on mobile
   with no extra rules.
   ============================================================ */

/* Space above the copyright line.

   Four separate rules were stacking up here, which is why the line kept
   drifting away from the rest of the footer no matter what one value was
   changed:

     .footer__widget-area_top      padding-bottom: 2em    (parent)
     .footer__widget-area_bottom   padding-top:    1.5em  (parent)
     .widget                       margin-bottom:  1.75em (parent, on the
                                   widget holding the menus)
     p                             margin: 1em 0          (parent, on the
                                   copyright line itself)

   All four are zeroed and replaced by one number, so the gap is set in a
   single place and reads as written. */
.footer__widget-area_top {
	padding-bottom: 0 !important;
}

.footer__widget-area .widget {
	margin-bottom: 0 !important;
}

.footer__widget-area_bottom .widget,
.footer__widget-area_bottom p {
	margin: 0 !important;
}

.footer__widget-area_bottom {
	padding-top: var(--evm-footer-copyright-gap) !important;
}

/* The two link columns. */
.footer__widget-area_top .wp-block-column .wp-block-columns {
	justify-content: normal !important;
	gap: 24px !important;
}

.footer__widget-area_top .wp-block-column .wp-block-columns > .wp-block-column {
	flex: 1 1 0 !important;
}


/* ============================================================
   RESPONSIVE — desktop
   ============================================================ */
@media (min-width: 782px) {
	/* Bio 60% / links 30% */
	.footer__widget-area_top .widget_block > .wp-block-columns {
		justify-content: space-between !important;
		gap: 100px !important;
	}

	.footer__widget-area_top .widget_block > .wp-block-columns > .wp-block-column:first-child {
		flex: 0 1 60% !important;
	}

	.footer__widget-area_top .widget_block > .wp-block-columns > .wp-block-column:last-child {
		flex: 0 1 30% !important;
	}

	/* More air between the two link lists. */
	.footer__widget-area_top .wp-block-column .wp-block-columns {
		gap: 40px !important;
	}
}


/* ============================================================
   RESPONSIVE — phone
   ============================================================ */
@media screen and (max-width: 480px) {
	.footer p,
	.footer__widget-area_top .wp-block-list li,
	.footer__widget-area_top .wp-block-list li a {
		font-size: 15px !important;
	}

	.footer h3.wp-block-heading {
		font-size: 18px !important;
		line-height: 22px !important;
	}
}