/*
 * Custom theme overrides.
 *
 * Enqueued after dist/css/style.css so rules here win when specificity matches.
 * Edit this file directly — dist/css/style.css is compiled output and must not
 * be hand-edited.
 */


/* ==========================================================================
   Footer redesign
   Replaces the previous teal menu-based footer with a clean two-column
   layout: logos on the left, address/email/policy links on the right, and
   an italic copyright line underneath. Values editable under Footer Options
   in WP admin.
   ========================================================================== */

.footer {
	background: #fff;
	padding: 40px 0 30px;
	color: #48535b;
}

.footer .container {
	margin: 0 auto;
	width: 100%;
	max-width: 1170px;
	padding: 0 20px;
}

.footer .footer-inner {
	display: flex;
	flex-direction: column;
	gap: 30px;
	align-items: flex-start;
}

.footer .footer-logos {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 30px;
}

.footer .footer-logo {
	display: inline-block;
	line-height: 0;
}

.footer .footer-logo img {
	display: block;
	height: auto;
	max-width: 100%;
}

.footer .footer-logo--ilcn img {
	max-height: 70px;
	width: auto;
}

.footer .footer-logo--lincoln img {
	max-height: 45px;
	width: auto;
}

.footer .footer-contact {
	font-size: 14px;
	line-height: 1.5;
	color: #48535b;
}

.footer .footer-address {
	margin: 0 0 6px;
	font-size: 14px;
	line-height: 1.5;
}

.footer .footer-email {
	margin: 0 0 12px;
	font-size: 14px;
	line-height: 1.5;
	font-weight: 700;
}

.footer .footer-email a {
	color: #48535b;
	text-decoration: none;
	font-weight: 700;
}

.footer .footer-email a:hover {
	text-decoration: underline;
}

.footer .footer-policy-links {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 18px;
}

.footer .footer-policy-links a {
	color: var(--wp--custom--color--accent);
	font-size: 14px;
	text-decoration: none;
}

.footer .footer-policy-links a:hover {
	text-decoration: underline;
}

.footer .footer-copyright {
	margin: 30px 0 0;
	font-size: 13px;
	font-style: italic;
	color: #48535b;
}

@media screen and (min-width: 768px) {
	.footer {
		padding: 60px 0 40px;
	}

	.footer .footer-inner {
		flex-direction: row;
		justify-content: space-between;
		align-items: flex-start;
		gap: 40px;
	}

	.footer .footer-contact {
		text-align: right;
	}

	.footer .footer-policy-links {
		justify-content: flex-end;
	}
}


/* ==========================================================================
   Header dropdown viewport-edge flip
   Supports menu-dropdown-edge.js — lets dropdowns near the right edge of
   the viewport flip their alignment instead of overflowing.
   ========================================================================== */

.header .menu .drop .dropdown-menu.dropdown-measuring {
	display: block !important;
	visibility: hidden !important;
	opacity: 0 !important;
	pointer-events: none !important;
	position: absolute !important;
	left: 0 !important;
	right: auto !important;
}

@media screen and (min-width: 768px) {
	.header .menu .drop > ul > li.dropdown-flip-right > .dropdown-menu {
		left: auto;
		right: 0;
	}
}


/* ==========================================================================
   Equal-height cards (featured resources + resources slider)

   Strategy:
   - Let the parent row stretch children to the tallest (flex).
   - Inside each card, .block-title keeps its fixed min-height for title
     alignment and .block-content uses flex: 1 to fill the remainder.
   - Cap excerpts with line-clamp so one runaway-long entry can't drag
     every card tall.

   Overrides compiled rules like `.block-content { height: 100% }` and the
   200px `min-height` on the excerpt paragraph in dist/css/style.css.
   ========================================================================== */

/* Resources slider: stretch slick slides to match via flex. */
.resources-section .slick-slider-resources .slick-track {
	display: flex;
}

.resources-section .slick-slider-resources .slick-slide {
	float: none;
	height: auto;
	min-height: 1px;
	display: flex;
}

/* Template inserts a generic <div> wrapper between .slick-slide and .column. */
.resources-section .slick-slider-resources .slick-slide > div {
	display: flex;
	width: 100%;
}

/* Non-slider slick sections: just stop the CSS cascade of track height into
   every slide. Slick's JS still equalizes via inline styles. */
.testimonials-section .slick-slide,
.experts-section .slick-slide {
	height: auto;
	min-height: 1px;
}

/* Card column becomes a flex column so block-content fills the remainder. */
.featured-resources-section .columns .column,
.resources-section .slick-slider-resources .column {
	display: flex;
	flex-direction: column;
	width: 100%;
}

.featured-resources-section .columns .block-content,
.resources-section .slick-slider-resources .block-content {
	flex: 1;
	height: auto;
	min-height: 0;
}

/* Clamp the first paragraph of each card body so a single long excerpt
   can't pull every other card tall. Leaves any following paragraphs
   (e.g. a "Read More" <p>) untouched. */
.featured-resources-section .columns .block-content > p:first-child,
.resources-section .slick-slider-resources .block-content > p:first-child {
	min-height: 0;
	display: -webkit-box;
	-webkit-line-clamp: 7;
	-webkit-box-orient: vertical;
	overflow: hidden;
}


/* ==========================================================================
   Featured-resources restyle
   Teal (ILCN logo) title card with white text and larger title. Applies
   to the standalone Featured Resources block AND the resources slider,
   so the treatment is consistent across home and focus-area pages.
   ========================================================================== */

.featured-resources-section .columns .block-title,
.resources-section .slick-slider-resources .block-title {
	background: #5f818d;
	color: #fff;
}

.featured-resources-section .columns .block-title a,
.resources-section .slick-slider-resources .block-title a {
	color: #fff;
}

.featured-resources-section .columns .tag,
.resources-section .slick-slider-resources .tag {
	color: #fff;
}

.featured-resources-section .columns .title,
.resources-section .slick-slider-resources .title {
	font-size: 18px;
	color: #fff;
}