/**
 * Footer layout and visitor counter.
 *
 * The footer is built in Elementor's Theme Builder, so the containers are
 * addressed by their Elementor element IDs. Those IDs are stable for the life
 * of an element - editing a container's settings keeps its ID, only deleting
 * and re-adding it changes one. For anyone reading this later:
 *
 *   0e1e505  the dark footer section
 *   43b5bad  the row inside it
 *   197ff40  column 1, logo + social
 *   6ac1851  column 2, Quick Links
 *   f44a1a7  column 3, the visitor counter
 *   95e230c  the counter widget wrapper, which carried the pale card styling
 *
 * The row was three columns of roughly a third each, which left the two
 * content columns crowded against a 325px-tall card on a pale lavender fill
 * with a dark border - a different design language from everything around it,
 * and 500px of footer on a phone. The counter now wraps onto its own
 * full-width line below the two columns as a single centred strip, and the row
 * above it is a two-column layout that uses the width it has.
 *
 * The markup inside .et-vc comes from inc/visitor-counter.php.
 */

:root {
	--et-footer-font: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	--et-footer-ink: #d9dee8;      /* footer headings */
	--et-footer-muted: #8f95c0;    /* footer labels */
	--et-footer-faint: #6f76a3;    /* eyebrows and separators */
	--et-footer-rule: rgba(165, 170, 207, 0.18);
	--et-footer-accent: #d6ff00;   /* the site's lime accent */
}

/* ---------------------------------------------------------------------------
 * Row: two columns, with the counter wrapped onto a full-width line below.
 * ------------------------------------------------------------------------ */

.elementor-location-footer .elementor-element-43b5bad {
	flex-wrap: wrap;
	align-items: flex-start;
	row-gap: 34px;
}

/* The counter takes a line of its own at every width. */
.elementor-location-footer .elementor-element-f44a1a7 {
	--width: 100%;
	width: 100%;
	flex: 1 0 100%;
	align-items: stretch;
	justify-content: flex-start;
	padding-top: 0;
	padding-bottom: 0;
}

@media (min-width: 1025px) {

	/* Column 1 keeps the width Elementor gave it: the logo is sized with
	   max-width: 60%, so letting the column shrink to its content shrinks the
	   logo with it. Column 2 takes whatever is left and sits against the right
	   edge, which is what turns the leftover third into a two-column layout. */
	.elementor-location-footer .elementor-element-6ac1851 {
		--width: auto;
		width: auto;
		flex: 0 1 auto;
		margin-left: auto;
		text-align: right;
	}

	.elementor-location-footer .elementor-element-6ac1851 .elementor-icon-list-item {
		justify-content: flex-end;
	}
}

/* Logo and social icon read as one block rather than two stranded widgets. */
.elementor-location-footer .elementor-element-197ff40 {
	gap: 14px;
}

.elementor-location-footer .elementor-element-197ff40 .elementor-social-icon {
	transition: opacity 0.15s ease-in-out;
}

.elementor-location-footer .elementor-element-197ff40 .elementor-social-icon:hover {
	opacity: 0.75;
}

/* ---------------------------------------------------------------------------
 * Counter: a strip on the footer's own surface, not a card on a pale one.
 * ------------------------------------------------------------------------ */

.elementor-location-footer .elementor-element-95e230c {
	/* Overrides .elementor-widget__width-auto, which is set on the element. */
	width: 100% !important;
	max-width: none !important;
}

.elementor-location-footer .elementor-element-95e230c > .elementor-widget-container {
	/* Elementor writes these as ID-scoped rules, hence !important. */
	background: none !important;
	border: 0 !important;
	border-top: 1px solid var(--et-footer-rule) !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	padding: 20px 0 0 !important;
}

/* Twenty Seventeen pads every .widget. This reset used to live in the
   Customizer's Additional CSS, next to four rules styling the old plugin's
   markup; it belongs with the rest of the footer's styling. */
.elementor-location-footer .widget_wp_statsmechanic {
	margin: 0;
	padding: 0;
}

.elementor-location-footer .widget_wp_statsmechanic .widget-title {
	margin: 0 0 14px;
	font-family: var(--et-footer-font);
	font-size: 11px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.14em;
	text-align: center;

	/* The Elementor kit sets text-transform: none !important on every h2. */
	text-transform: uppercase !important;
	color: var(--et-footer-faint);
}

.et-vc {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	font-family: var(--et-footer-font);
	font-size: 13px;
	line-height: 20px;
}

.et-vc__stats {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: center;
	max-width: 100%;
	gap: 8px 26px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Twenty Seventeen rules every list item inside a .widget with a bottom
   border and vertical padding, which is where the stray lines between the
   numbers came from. */
.elementor-location-footer .et-vc__stats li {
	border: 0;
	margin: 0;
	padding: 0;
}

.et-vc__stat {
	display: flex;
	align-items: baseline;
	gap: 7px;
	white-space: nowrap;
}

/* Separators only where the strip is a single line. Below that it wraps, and
   a line starting with a stray dot reads as a mistake. */
@media (min-width: 1025px) {

	.et-vc__stat + .et-vc__stat::before {
		content: "\00B7";
		margin-right: 19px;
		color: var(--et-footer-faint);
	}
}

.et-vc__value {
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	color: var(--et-footer-ink);
}

.et-vc__label {
	color: var(--et-footer-muted);
}

/* A live dot on the online count, because that is the number that moves. */
.et-vc__stat--online .et-vc__value::before {
	content: "";
	display: inline-block;
	width: 7px;
	height: 7px;
	margin-right: 8px;
	border-radius: 50%;
	background: var(--et-footer-accent);
	box-shadow: 0 0 0 0 rgba(214, 255, 0, 0.5);
	animation: et-vc-pulse 2.6s ease-out infinite;
}

@keyframes et-vc-pulse {

	70%,
	100% {
		box-shadow: 0 0 0 7px rgba(214, 255, 0, 0);
	}
}

@media (prefers-reduced-motion: reduce) {

	.et-vc__stat--online .et-vc__value::before {
		animation: none;
	}
}

/* No nowrap here. "Your IP address" plus a full-length IPv6 is about 418px at
   this size - wider than the whole column on a phone - and the counter column
   is flex-shrink: 0, so an IPv6 visitor got a sideways-scrolling page. The
   label wraps away from the value first; overflow-wrap: anywhere lets the
   address itself break below that. It has to be `anywhere` rather than
   `break-word`: only `anywhere` reduces the element's min-content width, which
   is what lets a flex item narrow past its longest unbreakable run. */
.et-vc__ip {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: center;
	gap: 4px 8px;
	max-width: 100%;
	margin: 0;
}

.et-vc__ip-label {
	color: var(--et-footer-muted);
}

.et-vc__ip-value {
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	color: var(--et-footer-accent);
	overflow-wrap: anywhere;
}

/* ---------------------------------------------------------------------------
 * Phones.
 * ------------------------------------------------------------------------ */

@media (max-width: 767px) {

	.elementor-location-footer .elementor-element-95e230c > .elementor-widget-container {
		padding-top: 16px !important;
	}

	.et-vc__stats {
		gap: 8px 18px;
	}
}