/* ============================================================================
   HOME — the dark, text-only landing page.

   The page's dark background lives in 03-base.css under PAGE MODES.
   This file is the content on top of it.
   ============================================================================ */


/* ============================================================
   HEADLINE
   ============================================================ */
#home-h2 h2 {
	font-family: 'Vulf Sans' !important;
	font-size: 40px !important;
	font-weight: 300 !important;
	line-height: 48px !important;
	letter-spacing: 0em !important;
}


/* ============================================================
   LINKS — dashed yellow underline that retracts on hover

   Two selector groups here do the same job: the `#home-h2 / .listing-item`
   pair (older, also applies outside the home page) and the `.home .elementor`
   pair (newer, home only). Both are kept because their scopes differ.
   ============================================================ */
li.listing-item a,
#home-h2 a {
	display: inline-block;
	text-decoration: none;
}

.home .elementor a:not(.title):not(.button):not(.elementor-button) {
	display: inline-block;
}

li.listing-item a::after,
#home-h2 a::after,
.home .elementor a:not(.title):not(.button):not(.elementor-button)::after {
	content: '';
	display: block;
	width: 100%;
	height: 1px;
	border-bottom: 1px dashed var(--evm-yellow);
	transition: width 0.3s;
}

li.listing-item a:hover::after,
#home-h2 a:hover::after,
.home .elementor a:not(.button):not(.elementor-button):hover::after {
	width: 0;
	transition: width 0.3s;
}


/* ============================================================
   LINK COLOUR
   ============================================================ */
.home .elementor a:not(.button):not(.elementor-button) {
	color: var(--evm-ink-inverse) !important;
}

.home .elementor a:not(.button):not(.elementor-button):hover {
	color: var(--evm-yellow) !important;
}

.home #home-h2 h2 a:not(.button):not(.elementor-button):hover {
	color: var(--evm-yellow) !important;
}

/* Utility classes applied by hand in Elementor. */
.txt-yellow li,
.txt-white li {
	color: var(--evm-ink-inverse) !important;
}

.txt-white,
.txt-white li a {
	color: var(--evm-ink-inverse) !important;
}

.txt-yellow,
.txt-yellow li a,
.txt-white li a:hover,
#home-h2 h2 a:hover {
	color: var(--evm-ink-muted-light) !important;
}


/* ============================================================
   CATEGORY LISTS
   ============================================================ */
#home-categories h3 {
	font-family: 'Vulf Sans' !important;
	font-size: 28px !important;
	font-weight: 500 !important;
	line-height: 30px !important;
	letter-spacing: 0.1em !important;
	text-align: left !important;
	text-transform: uppercase;
	margin-bottom: 20px;
}

#home-categories li.listing-item,
#home-categories .elementor-shortcode {
	font-family: 'Vulf Sans' !important;
	font-size: 24px !important;
	font-weight: 300 !important; /* was 100; Vulf Sans starts at 300 (Light) */
	line-height: 30px !important;
	letter-spacing: 0em !important;
	text-align: left !important;
	margin-bottom: 10px;
	list-style: none;
}

/* "+" bullet */
#home-categories li.listing-item:before {
	display: inline-block;
	content: "+";
	width: 20px;
	height: 20px;
	font-size: 24px;
	margin: 0 5px 0 !important;
}

#home-categories ul.display-posts-listing {
	padding: 0 !important;
}


/* ============================================================
   ONE-OFF

   FRAGILE: `elementor-element-0679b83` is an ID Elementor generates. If that
   widget is ever rebuilt or duplicated the ID changes and this rule silently
   stops working. Give the widget a CSS class in Elementor and target that
   instead when you next touch it.
   ============================================================ */
.elementor-element.elementor-element-0679b83.elementor-widget.elementor-widget-shortcode {
	color: var(--evm-ink-inverse) !important;
}


/* ============================================================
   RESPONSIVE
   ============================================================ */
@media screen and (max-width: 600px) {
	#home-h2 h2 {
		padding: 0 20px;
		font-size: 32px !important;
	}

	.elementor-container.elementor-column-gap-no {
		padding: 20px !important;
	}
}

@media screen and (max-width: 480px) {
	#home-categories li.listing-item,
	#home-categories .elementor-shortcode {
		display: flex;
		font-size: 22px !important;
	}

	#home-h2 h2 {
		font-size: 28px !important;
		line-height: 1.3 !important;
	}

	li.listing-item a::after,
	#home-h2 a::after {
		display: none;
	}

	li.listing-item a,
	#home-h2 a {
		text-decoration-color: var(--evm-yellow);
		text-decoration-line: underline;
		text-decoration-style: dashed;
		text-decoration-thickness: from-font;
		line-height: 1.5;
	}

	#home-h2 a {
		display: initial !important;
	}
}