/**
 * Footer Styles — NISA Investment Advisors
 *
 * Typography, colors, and link states only.
 * Layout and spacing handled by native Gutenberg block attributes.
 * Dynamic content via FOOTER_COL_1/2/3, FOOTER_COPYRIGHT tokens.
 */

/* -----------------------------------------------
   Variables
   ----------------------------------------------- */

.nisa-footer {
	--nisa-footer-transition: 0.25s ease;
}

/* -----------------------------------------------
   Brand (logo + tagline + social)
   ----------------------------------------------- */

/* Block-level (not inline-flex) so the gap to the social row is the
   social margin-top alone, as it was with the old tagline image. */
.nisa-footer__logo {
	display: flex;
	align-items: center;
}

/* Brand lockup — logo + tagline + ® marks in one vector (converted from
   the client's EPS, CMYK snapped to the RGB brand values used by the
   header logo). Width matches the previous 190px logo. */
.nisa-footer__logo img {
	display: block;
	width: 190px;
	height: auto;
}

/* Social links — override WP defaults for proper alignment */
.nisa-footer__social {
	margin-top: 1rem;
}

/* LinkedIn icon sized so the VISIBLE MARK is 26px (the comp). In
   is-style-logos-only the icon is 1em (core: .wp-social-link svg {width/height:1em}),
   so its box = the container font-size. But core's LinkedIn glyph fills only 75%
   of its 24×24 viewBox (an 18×18 path, 3px padding), so a 26px box renders a
   ~19.5px mark. Size the box to 26/0.75 ≈ 34.67px → the mark lands at 26px.
   Compound selector (0,2,0) beats core's .wp-block-social-links (0,1,0). NOTE:
   other services' glyphs fill their viewBox differently, so if more icons are
   added and a uniform VISIBLE size is wanted, revisit this per-service. */
.nisa-footer__social.wp-block-social-links {
	font-size: calc(26px / 0.75);
}

.nisa-footer__social .wp-block-social-link {
	transition: opacity var(--nisa-footer-transition);
}

/* Hover/focus: shift the icon color (never opacity — opacity is
   background-dependent and drops contrast below the 3:1 non-text minimum;
   at 0.7 the navy mark on cream fell to ~2.8:1). Accent stays ~8:1 on cream
   and matches the site's interactive-link color. */
.nisa-footer__social .wp-block-social-link:hover,
.nisa-footer__social .wp-block-social-link:focus-within {
	color: var(--wp--preset--color--accent);
}

/* -----------------------------------------------
   Subscribe CTA Bar
   ----------------------------------------------- */

.nisa-footer__subscribe-bar {
	position: relative;
	overflow: hidden;
}

.nisa-footer__subscribe-heading {
	margin: 0;
}

/* Shared subscribe-button pill + circular arrow disc: the footer subscribe bar
   and the single Perspective/Primer/News sidebar Subscribe
   (.nisa-persp-subscribe) both use it. */
.nisa-footer__subscribe-bar .wp-block-button__link,
.nisa-persp-subscribe .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 0.625rem;
	border-radius: 50rem;
	/* Keep the label on one line. The pill is sized by its content and the
	   ::after disc below, so a second line breaks the capsule shape — this
	   matters most in the narrow Perspective sidebar and if the label is ever
	   given more than one word. */
	white-space: nowrap;
	/* Tighten the right side so the circular icon sits near the pill edge. */
	padding-right: 0.375rem;
	padding-left: 1.5rem;
	padding-top: 0.4375rem;
	padding-bottom: 0.4375rem;
}

/* Circular arrow icon after the label — a lighter-blue disc with a white
   arrow, matching the design. Rendered on ::after so the button block markup
   stays plain text (same arrow glyph as the insights-card hover). */
.nisa-footer__subscribe-bar .wp-block-button__link::after,
.nisa-persp-subscribe .wp-block-button__link::after {
	content: "";
	flex-shrink: 0;
	width: 1.75rem;
	height: 1.75rem;
	border-radius: 50%;
	background-color: var(--wp--preset--color--mid-blue);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C%2Fsvg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 0.875rem 0.875rem;
	transition: transform 0.25s ease;
}

.nisa-footer__subscribe-bar .wp-block-button__link:hover::after,
.nisa-persp-subscribe .wp-block-button__link:hover::after {
	transform: translateX(2px);
}

@media (prefers-reduced-motion: reduce) {
	.nisa-footer__subscribe-bar .wp-block-button__link::after,
	.nisa-persp-subscribe .wp-block-button__link::after {
		transition: none;
	}
}

/* Inner content group fills the bar (minus the image) and pushes the
   heading and button to opposite ends. */
.nisa-footer__subscribe-bar > .wp-block-group {
	flex-grow: 1;
	justify-content: space-between;
}

/* Image: flush to the right edge, full height. The <img> is positioned
   absolutely inside the figure so its intrinsic height can't inflate the
   bar — the bar's height is driven by the content group instead. Gradient
   fade on the left edge. */
.nisa-footer__subscribe-image {
	position: relative;
	flex-shrink: 0;
	align-self: stretch;
	width: 28%;
	margin: 0;
	overflow: hidden;
}

.nisa-footer__subscribe-image img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.nisa-footer__subscribe-image::before {
	content: '';
	position: absolute;
	inset: 0 auto 0 0;
	width: 5rem;
	background: linear-gradient(to right, var(--wp--preset--color--light-blue), transparent);
	z-index: 1;
	pointer-events: none;
}

/* Mobile / small tablet: stack the CTA vertically — heading + button on top,
   the building image as a full-width band across the bottom. Breakpoint
   matches where the footer columns stack (is-stacked-on-mobile, ≤781px). */
@media (max-width: 781px) {
	.nisa-footer__subscribe-bar {
		flex-direction: column;
		/* WP sets align-items:center on horizontal flex layouts (vertical
		   centering on desktop); in a column that centers the content
		   horizontally. Stretch so the content group goes full-width and its
		   heading/button left-align to the padding edge. */
		align-items: stretch;
	}

	/* Content group: heading above button, left-aligned, real gap between
	   them (the template-part reset zeroes the block's own flex gap). */
	.nisa-footer__subscribe-bar > .wp-block-group {
		flex-grow: 0;
		flex-direction: column;
		align-items: flex-start;
		justify-content: flex-start;
		gap: 1.25rem;
	}

	/* Image becomes a full-bleed band at the bottom. The <img> is absolutely
	   positioned inside the figure, so the figure needs an explicit height
	   here (on desktop it borrows height from the flex row). */
	.nisa-footer__subscribe-image {
		width: 100%;
		height: clamp(6rem, 28vw, 9rem);
	}

	/* Fade the box colour down into the TOP edge of the band instead of
	   the left edge. */
	.nisa-footer__subscribe-image::before {
		inset: 0 0 auto 0;
		width: auto;
		height: 3rem;
		background: linear-gradient(to bottom, var(--wp--preset--color--light-blue), transparent);
	}
}

/* -----------------------------------------------
   Nav Columns (headings + links from tokens)
   ----------------------------------------------- */

/* Template parts zero WP's editor blockGap (see global.css "chrome owns its
   spacing"), so the footer re-supplies its column gaps here. row-gap ONLY:
   it's inert while the columns sit in one desktop row (nowrap), and is what
   separates them once WP stacks them on mobile/tablet (is-stacked-on-mobile,
   ≤781px) — so desktop is unchanged and the stacked menus keep their space.
   Fluid values so the spacing scales down on smaller screens. */
.nisa-footer__top {
	row-gap: clamp(2rem, 5vw, 2.5rem);
}

.nisa-footer__nav-columns {
	row-gap: clamp(1.5rem, 4vw, 2rem);
}

.nisa-footer__nav-heading {
	color: var(--wp--preset--color--accent);
	font-size: 1rem;
	font-weight: 700;
	margin-bottom: 0.75rem;
}

.nisa-footer__nav-links {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.nisa-footer__nav-link {
	color: var(--wp--preset--color--primary);
	font-size: var(--wp--preset--font-size--sm);
	text-decoration: none;
	transition: color var(--nisa-footer-transition);
}

.nisa-footer__nav-link:hover {
	color: var(--wp--preset--color--accent);
	font-weight: 700;
}

.nisa-footer__nav-link:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
}

/* -----------------------------------------------
   Divider
   ----------------------------------------------- */

.nisa-footer__divider {
	border: none;
	height: 2px;
	margin-top: 2rem;
}

/* -----------------------------------------------
   Copyright Row
   ----------------------------------------------- */

.nisa-footer__copyright-row {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

@media (min-width: 768px) {
	.nisa-footer__copyright-row {
		flex-direction: row;
		align-items: flex-start;
		gap: 3rem;
	}
}

.nisa-footer__copyright {
	margin: 0;
	font-size: 14px; /* lint-allow: exact footer size set in design review, no fontSizes slug maps to 14px */
	font-weight: 500;
	color: var(--wp--preset--color--primary);
	white-space: nowrap;
	flex-shrink: 0;
}

.nisa-footer__disclaimer-col {
	display: flex;
	flex-direction: column;
	gap: 4rem;
	font-size: 14px; /* lint-allow: exact footer size set in design review, no fontSizes slug maps to 14px */
}

.nisa-footer__disclaimer {
	margin: 0;
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 500;
	color: var(--wp--preset--color--accent);
	line-height: 1.6;
}

/* -----------------------------------------------
   Legal Links — nested under disclaimer
   ----------------------------------------------- */

.nisa-footer__legal-links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 1rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.nisa-footer__legal-link {
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 500;
	color: var(--wp--preset--color--gray);
	text-decoration: underline;
	text-underline-offset: 2px;
	transition: color var(--nisa-footer-transition);
}

.nisa-footer__legal-link:hover {
	color: var(--wp--preset--color--primary);
}

.nisa-footer__legal-link:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
}

/* OneTrust "Cookie settings" <button> (inc/onetrust.php) — shares
   .nisa-footer__legal-link; this strips the button chrome and OneTrust's own
   #ot-sdk-btn.ot-sdk-show-settings styles (green border, padding, hover fill),
   which its stylesheet injects after ours — hence the id-level selector. */
#ot-sdk-btn.ot-sdk-show-settings.nisa-footer__cookie-settings {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	font-family: inherit;
	line-height: inherit;
	height: auto;
	white-space: normal;
	cursor: pointer;
	font-size: var(--wp--preset--font-size--xs);
	color: var(--wp--preset--color--gray);
}

#ot-sdk-btn.ot-sdk-show-settings.nisa-footer__cookie-settings:hover,
#ot-sdk-btn.ot-sdk-show-settings.nisa-footer__cookie-settings:active {
	border: 0;
	background: none;
	color: var(--wp--preset--color--primary);
}

/* -----------------------------------------------
   Reduced Motion
   ----------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.nisa-footer__nav-link,
	.nisa-footer__legal-link,
	.nisa-footer__social .wp-block-social-link {
		transition: none;
	}
}