/* ==========================================================================
   Global Footer (post ID 34, "salient_g_sections" -> nectar_hook_global_section_footer)
   Kept out of style.css on purpose so footer work doesn't collide with
   other in-progress edits to that file. See Footer.png for the reference.
   ========================================================================== */

/* Background color comes from the row's own native "Background Color"
   builder setting (bg_color="#1E2438" in post_content) rather than from
   CSS. `.dm-footer` only needs to stay a positioning anchor for the
   accent line below. */
.dm-footer {
	position: relative;
}

/* Vertical rhythm for both rows comes from the builder's own top_padding/
   bottom_padding row attributes (they render as an inline style, which
   always beats a class-based rule here) rather than from these classes. */

/* ==========================================================================
   Animated accent line

   Earlier attempt used a one-off ::after pseudo-element animated by a
   hand-rolled keyframe (.dm-line-draw) that played once on page load —
   by the time a visitor actually scrolled ~9000px down to the footer,
   the animation had long finished, so it just looked static/broken.

   Fixed by adopting the theme's own existing scroll-triggered system
   instead (animations.css + inc/js/dm-animations.js, not modified here):
   the row carries the ENABLE class "dm-line-animation" + STYLE class
   "dm-line-footer" (both set via class/el_class in post_content), and
   dm-animations.js adds ".dm-inview" to the row via IntersectionObserver
   the first time it actually scrolls into view — which is what flips
   the real <svg><path class="dm-draw" pathLength="1"> below (a
   vc_raw_html block in post_content, not generated here) from its held
   state into animations.css's "draw" keyframe.

   The path data below (`d="M760.222 622.266C..."`, viewBox 1521x623)
   matches reference-img/Deutsch Miller animation/footer-animation.html
   exactly — the two curves meeting at the footer's bottom-center and
   sweeping out to each edge.

   This also sidesteps the earlier bug for free: Salient gives every
   row's content wrapper (.row_col_wrap_12) an explicit `z-index: 10`
   (theme-wide, via ".wpb_row>.span_12{z-index:10}" — not specific to
   this row), which silently hid the old row-level ::after. The <svg>
   here is a normal child *inside* that wrapper (a sibling of the
   columns, same as the theme's other dm-tile-animation/etc. hook
   elements), so it never has to fight that z-index from outside. */

.dm-footer-lines {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 400px;
	pointer-events: none;
}

/* ==========================================================================
   Wordmark + tagline + social column
   ========================================================================== */

.dm-footer-logo {
	margin-bottom: 20px;
}

/* Direct <p> match: wpautop wraps this column_text in its own <p>, and the
   child theme's base "p { color }" rule only loses to an *inherited* value,
   never to one set on an ancestor class — so color/font have to be
   restated here, matching the .dm-quote-attribution pattern in style.css. */
.dm-footer-logo p {
	font-family: var(--dm-font-heading);
	font-size: 28px;
	font-variant: small-caps;
	letter-spacing: 2px;
	color: var(--dm-white);
	margin: 0;
}

.dm-footer-tagline {
	max-width: 320px;
	margin-bottom: 28px;
}

.dm-footer-tagline p {
	font-family: var(--dm-font-body);
	font-size: 15px;
	line-height: 1.6;
	color: var(--dm-mist);
	margin: 0;
}

.dm-footer-social {
	display: flex;
	gap: 10px;
}

.dm-footer-social a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 4px;
	background: var(--dm-white);
	color: var(--dm-admiralty);
	transition: background-color 0.25s ease, color 0.25s ease;
}

.dm-footer-social a:hover {
	background: var(--dm-straw);
}

.dm-footer-social a i {
	font-size: 15px;
	line-height: 1;
}

/* ==========================================================================
   Link columns (About / Support) + heading label shared by the Contact column
   ========================================================================== */

.dm-footer-heading {
	margin-bottom: 18px;
}

.dm-footer-heading p {
	font-family: var(--dm-font-heading);
	font-weight: 400;
	font-size: 22px;
	color: var(--dm-mist);
	margin: 0;
}

.dm-footer-links ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Core theme CSS has a direct "ul li { list-style: disc }" rule (only
   reset to none inside #footer-outer, which this global section sits
   outside of) — a direct match on <li> always beats the inherited
   list-style from the .dm-footer-links ul rule above, same pattern as
   the p/color overrides documented elsewhere in this codebase. */
.dm-footer-links li {
	list-style: none;
	margin-bottom: 14px;
}

.dm-footer-links a {
	font-family: var(--dm-font-body);
	font-size: 15px;
	color: var(--dm-white);
	text-decoration: none;
	transition: color 0.2s ease;
}

.dm-footer-links a:hover {
	color: var(--dm-straw);
}

/* ==========================================================================
   Contact column
   ========================================================================== */

.dm-footer-contact-row {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin-bottom: 18px;
	font-family: var(--dm-font-body);
	font-size: 15px;
	color: var(--dm-white);
}

.dm-footer-contact-row:last-child {
	margin-bottom: 0;
}

a.dm-footer-contact-row {
	text-decoration: underline;
	color: var(--dm-white);
}

a.dm-footer-contact-row:hover {
	color: var(--dm-straw);
}

.dm-footer-contact-row i {
	color: var(--dm-straw);
	font-size: 15px;
	line-height: 1.5;
	width: 16px;
	flex: 0 0 auto;
	margin-top: 2px;
}

.dm-footer-contact-row span {
	flex: 1 1 auto;
}

/* ==========================================================================
   Copyright bar
   ========================================================================== */

.dm-footer-copyright {
	padding-top: 120px;
	padding-bottom: 40px;
}

.dm-footer-copyright p {
	font-family: var(--dm-font-body);
	font-size: 13px;
	color: var(--dm-mist);
	margin: 0;
}

@media only screen and (max-width: 999px) {
	.dm-footer-copyright {
		padding-top: 50px;
		padding-bottom: 30px;
	}
}