/**
 * Footer redesign (client requirement)
 * Enqueued via nc_enqueue_footer_css() in functions.php.
 */

@media (min-width: 981px) {
	#footer > .et_pb_row_0_tb_footer {
		display: flex !important;
		align-items: flex-start !important; /* top-align every column */
		flex-wrap: nowrap !important;
		gap: 24px;
	}
	#footer > .et_pb_row_0_tb_footer > .et_pb_column {
		float: none !important;
		flex: 1 1 0 !important;             /* flex-basis 0; per-column ratios below */
		width: auto !important;
		max-width: none !important;
		margin: 0 !important;
	}
	/* Per client screenshot: wider brand + newsletter, narrower link columns.
	   flex-grow values act as a width ratio (sum = 100). */
	#footer > .et_pb_row_0_tb_footer > .et_pb_column_0_tb_footer { flex-grow: 30 !important; } /* Logo / brand */
	#footer > .et_pb_row_0_tb_footer > .et_pb_column_1_tb_footer { flex-grow: 15 !important; } /* Company */
	#footer > .et_pb_row_0_tb_footer > .et_pb_column_2_tb_footer { flex-grow: 15 !important; } /* Explore */
	#footer > .et_pb_row_0_tb_footer > .et_pb_column_3_tb_footer { flex-grow: 15 !important; } /* Top Articles */
	#footer > .et_pb_row_0_tb_footer > .et_pb_column_4_tb_footer { flex-grow: 25 !important; } /* Join Our Newsletter */
}

/* --- Content tweaks (all viewports) --- */

/* 1) More line height on the brand paragraph under the logo */
#footer .et_pb_column_0_tb_footer .et_pb_blurb_description p {
	line-height: 2 !important;
}

/* 2) Even spacing between the menu items in Company / Explore / Top Articles.
   Each link is <span><a></a></span> separated by <br>. Making each span a block
   with margin-bottom gives even gaps BETWEEN items even when one wraps to two
   lines (Top Articles), while line-height stays tight so a wrapped item's own
   lines don't spread apart. <br> hidden so it adds no gap.

   NOTE: markup differs by column — Company/Explore wrap the spans in a <p>, but
   Top Articles has the spans as direct children of .et_pb_text_inner (no <p>).
   Descendant selectors (space, not ">") match both. text_1/3/5 are the link
   lists; text_0/2/4 are the column headings. */
#footer .et_pb_text_1_tb_footer .et_pb_text_inner,
#footer .et_pb_text_3_tb_footer .et_pb_text_inner,
#footer .et_pb_text_5_tb_footer .et_pb_text_inner {
	line-height: 1.4 !important;
}
#footer .et_pb_text_1_tb_footer .et_pb_text_inner span,
#footer .et_pb_text_3_tb_footer .et_pb_text_inner span,
#footer .et_pb_text_5_tb_footer .et_pb_text_inner span {
	display: block !important;
	margin-bottom: 16px !important;
}
/* Top Articles has an empty spacer <span></span> after the first link — hide it
   so it doesn't add a phantom 16px gap. */
#footer .et_pb_text_1_tb_footer .et_pb_text_inner span:empty,
#footer .et_pb_text_3_tb_footer .et_pb_text_inner span:empty,
#footer .et_pb_text_5_tb_footer .et_pb_text_inner span:empty {
	display: none !important;
}
#footer .et_pb_text_1_tb_footer .et_pb_text_inner br,
#footer .et_pb_text_3_tb_footer .et_pb_text_inner br,
#footer .et_pb_text_5_tb_footer .et_pb_text_inner br {
	display: none !important;
}

/* 3) Shrink the two legal-consent paragraphs ("By checking the boxes…" and
   "We care about your privacy…") to match the "I agree…" checkbox label (.875rem).
   HubSpot renders those as .hs-richtext blocks. */
#footer .newsletterFormFooter .legal-consent-container .hs-richtext,
#footer .newsletterFormFooter .legal-consent-container .hs-richtext p {
	font-size: 0.875rem !important;
	line-height: 1.4 !important;
}

/* --- Stacked footer (below desktop) --- */

/* Below 981px Divi stacks the columns and centers the others, but the Newsletter
   column stays left. Force it full-width and center the 300px form block so it
   lines up with the rest. */
@media (max-width: 980px) {
	#footer .et_pb_row_0_tb_footer > .et_pb_column_4_tb_footer {
		width: 100% !important;
		max-width: 100% !important;
		float: none !important;
		/* Match the gap the other stacked columns have above their heading
		   (Explore's last link -> Top Articles title). The code module has no
		   heading's built-in top spacing, so add it here. Tune this number. */
		margin-top: 20px !important;
	}
	#footer .et_pb_column_4_tb_footer .newsletterFormFooter {
		margin-left: auto !important;
		margin-right: auto !important;
	}
}