/**
 * Header and footer.
 *
 * Theme template output, not Elementor content, so it lives apart from
 * tokens.css and loads on every page.
 */

/* ==========================================================================
   Focus

   Inlingua's style.css line 947 is `:focus { outline: none }`, unqualified.
   That removed the focus indicator from every link, button and field on the
   site that we had not styled by hand, which is a straight WCAG 2.4.7
   failure and, in practice, makes the site unusable with a keyboard: you tab
   and nothing anywhere tells you where you are. It was the single worst
   defect in the accessibility pass.

   `!important` is deliberate and is the one place it is unarguable. A focus
   indicator that a later stylesheet, a plugin or a future theme update can
   switch off is not an indicator. Elementor's frontend.css also loads after
   this file.

   `:focus-visible` rather than `:focus`, so a mouse click on a button does
   not leave a ring behind. Every browser we support has it.

   The colour comes from a custom property rather than being fixed, because
   no single colour in this palette clears 3:1 on both backgrounds the site
   uses: navy is 13.7:1 on cream but 1:1 on navy, and gold is 7.8:1 on navy
   but 1.75:1 on cream. Custom properties inherit, so the navy regions set
   the gold value once and everything inside them picks it up.
   ========================================================================== */

:root {
	--nysf-focus: var(--nysf-navy);
}

.nysf-header,
.nysf-footer,
.nysf-banner,
.nysf-pbanner,
.nysf-panel-dark,
.nysf-cta-band--navy {
	--nysf-focus: var(--nysf-gold);
}

:focus-visible {
	outline: 3px solid var(--nysf-focus) !important;
	/* Clear of the element, so the ring reads against the page rather than
	   against the control's own fill. */
	outline-offset: 2px !important;
}

/*
 * Windows High Contrast Mode replaces authored colours wholesale. `Highlight`
 * is the system keyword for the focus colour, so the ring survives.
 */
@media (forced-colors: active) {
	:focus-visible {
		outline-color: Highlight !important;
	}
}

/*
 * Visually hidden, still read aloud.
 *
 * The theme leans on this class heavily: every icon-only control on the site
 * carries its name in one, and so do the "opens in a new tab" notes. Inlingua
 * happens to define it, but a stylesheet we do not own is a poor place for
 * something whose failure mode is a page full of stray labels. Declared here
 * so it survives a parent theme change.
 *
 * The 1px clipped box rather than `display: none`, which would take the text
 * out of the accessibility tree along with the layout.
 */
.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.nysf-skip {
	position: absolute;
	left: -9999px;
}

.nysf-skip:focus {
	left: 16px;
	top: 16px;
	z-index: 10000;
	background: var(--nysf-gold);
	color: var(--nysf-navy);
	padding: 12px 20px;
	border-radius: var(--nysf-r-pill);
	font-weight: 600;
}

/* ==========================================================================
   Header

   Sticky to the top of the viewport. Two things have to be true for that to
   work and neither is obvious:

   1. No ancestor may be a scroll container. Inlingua's style.css sets
      `overflow-x: hidden` on both html and body. On body that is fatal:
      overflow-x hidden makes overflow-y compute to auto, body becomes a
      scroll container, and a sticky child sticks to a box that never
      scrolls, so it simply never sticks. `overflow: clip` clips the same
      way without creating a scroll container, which is exactly what this
      needs. Our stylesheet loads after the parent's, so a plain selector
      is enough. (Safari below 16 does not know `clip`, drops the
      declaration, and falls back to a non-sticky header.)

   2. The logged-in admin bar is fixed over the top 32px, so the header has
      to start below it. Below 782px WordPress stops fixing the bar, and the
      offset has to come back off.
   ========================================================================== */

html,
body {
	overflow-x: clip;
}

.nysf-header {
	/*
	 * brand.css .site-header: navy at 94% with a 10px backdrop blur, not
	 * flat navy. That is why the bar reads a shade lighter than the solid
	 * navy dropdown beneath it in the design, and it is what gives the
	 * dropdown its edge against the bar. The hairline is the design's too.
	 */
	background: rgba(9, 41, 56, 0.94);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--nysf-line-navy);
	color: var(--nysf-light);
	position: sticky;
	top: 0;
	z-index: 100;
	/* Only once the page has scrolled: over the hero there is nothing to
	   separate the header from, and a shadow on navy-over-navy is noise. */
	transition: box-shadow 0.2s ease;
}

.nysf-header.is-stuck {
	box-shadow: 0 6px 22px rgba(9, 41, 56, 0.3);
}

body.admin-bar .nysf-header {
	top: 32px;
}

@media (max-width: 782px) {
	body.admin-bar .nysf-header {
		top: 0;
	}
}

/* In-page anchors would otherwise land under the bar. 82px of header plus a
   little air. */
html {
	scroll-padding-top: 96px;
}

@media (prefers-reduced-motion: reduce) {
	.nysf-header {
		transition: none;
	}
}

.nysf-header__inner {
	max-width: var(--nysf-maxw);
	margin: 0 auto;
	/* brand.css .nav is 82px tall inside a .wrap with a 28px gutter. */
	padding: 0 28px;
	min-height: 82px;
	display: flex;
	align-items: center;
	gap: 28px;
}

.nysf-header__brand {
	display: flex;
	align-items: center;
	flex: 0 0 auto;
	color: var(--nysf-light);
}

/* brand.css .logo img */
.nysf-header__brand img {
	height: 38px;
	width: auto;
	display: block;
}

.nysf-header__wordmark {
	font-family: var(--nysf-display);
	font-size: 13px;
	line-height: 1.15;
	letter-spacing: -0.2px;
}

.nysf-header__wordmark b {
	font-weight: 700;
}

.nysf-header__nav {
	flex: 1 1 auto;
}

.nysf-menu {
	display: flex;
	align-items: center;
	/* brand.css .menu */
	gap: 28px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.nysf-menu > li {
	position: relative;
}

/*
 * Two element types share this: a normal item is an <a>, and a dropdown parent
 * with no page of its own is a <button> (see NYSF_Nav_Walker). The button also
 * needs the browser's default button styling stripped.
 */
.nysf-menu > li > a,
.nysf-menu > li > .nysf-menu__toggle {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: inherit;
	/* brand.css .menu > li > a */
	font-size: 15.5px;
	font-weight: 500;
	color: var(--nysf-light);
	padding: 6px 0;
	background: none;
	border: 0;
	border-bottom: 2px solid transparent;
	white-space: nowrap;
	cursor: pointer;
}

.nysf-menu > li > a:hover,
.nysf-menu > li > .nysf-menu__toggle:hover,
.nysf-menu > li.current-menu-item > a,
.nysf-menu > li.current-menu-ancestor > a,
.nysf-menu > li.current-menu-parent > a {
	border-bottom-color: var(--nysf-gold);
	color: #fff;
}

/* Dropdowns */

/*
 * brand.css .menu .dropdown, to the value: a solid navy panel on the
 * translucent navy bar, hairline border, 14px radius, 8px padding.
 */
.nysf-menu .sub-menu {
	position: absolute;
	top: calc(100% + 10px);
	left: 0;
	min-width: 240px;
	background: var(--nysf-navy);
	border: 1px solid var(--nysf-line-navy);
	border-radius: 14px;
	box-shadow: var(--nysf-shadow);
	padding: 8px;
	list-style: none;
	margin: 0;
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: 0.18s;
}

/*
 * The design's 10px offset leaves a strip of bar between the link and the
 * panel, and crossing it with the mouse would take the pointer out of the
 * <li> and close the menu. This fills that strip with an invisible part of
 * the panel itself, so the hover never breaks.
 */
.nysf-menu .sub-menu::before {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	top: -11px;
	height: 11px;
}

/*
 * Hover and focus-within cover mouse and keyboard. `.is-open` is the third
 * case: a touch device has neither, so the parent button toggles the class.
 */
.nysf-menu li:hover > .sub-menu,
.nysf-menu li:focus-within > .sub-menu,
.nysf-menu li.is-open > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: none;
}

.nysf-menu .sub-menu a {
	display: block;
	padding: 10px 14px;
	border-radius: 9px;
	font-size: 14.5px;
	font-weight: 500;
	color: var(--nysf-light);
}

.nysf-menu .sub-menu a:hover,
.nysf-menu .sub-menu a:focus-visible {
	background: var(--nysf-line-navy);
	color: var(--nysf-gold);
}

/* The caret, on whichever element the parent turned out to be. */
.nysf-menu .menu-item-has-children > a::after,
.nysf-menu .menu-item-has-children > .nysf-menu__toggle::after {
	content: '';
	width: 6px;
	height: 6px;
	border: solid currentColor;
	border-width: 0 1.5px 1.5px 0;
	transform: rotate(45deg) translateY(-2px);
	transition: transform 0.2s;
}

.nysf-menu .menu-item-has-children.is-open > a::after,
.nysf-menu .menu-item-has-children.is-open > .nysf-menu__toggle::after {
	transform: rotate(-135deg) translateY(-2px);
}

/*
 * About's eight items run as one column. I had them in two on the theory
 * that eight would run off the bottom of the viewport; the design keeps one
 * column and it clears the fold comfortably, so this is back to matching it.
 */

/* Right-hand dropdowns would otherwise overflow the viewport edge. */
.nysf-menu > li:nth-last-child(-n + 3) .sub-menu {
	left: auto;
	right: 0;
}

.nysf-header__actions {
	display: flex;
	align-items: center;
	gap: 14px;
	flex: 0 0 auto;
}

.nysf-header__search {
	background: none;
	border: 0;
	color: var(--nysf-light);
	cursor: pointer;
	padding: 8px;
	display: inline-flex;
}

.nysf-header__cta {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background: var(--nysf-gold);
	color: var(--nysf-navy);
	font-weight: 600;
	font-size: 14px;
	padding: 11px 20px;
	border-radius: var(--nysf-r-pill);
	white-space: nowrap;
	transition: 0.25s;
}

.nysf-header__cta:hover {
	background: var(--nysf-gold-d);
}

.nysf-header__cta-arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--nysf-navy);
	color: var(--nysf-gold);
	font-size: 12px;
}

.nysf-header__toggle {
	display: none;
	background: none;
	border: 0;
	cursor: pointer;
	padding: 10px;
	margin-left: auto;
}

.nysf-header__toggle-bars,
.nysf-header__toggle-bars::before,
.nysf-header__toggle-bars::after {
	display: block;
	width: 22px;
	height: 2px;
	background: var(--nysf-light);
	position: relative;
}

.nysf-header__toggle-bars::before,
.nysf-header__toggle-bars::after {
	content: '';
	position: absolute;
}

.nysf-header__toggle-bars::before {
	top: -7px;
}

.nysf-header__toggle-bars::after {
	top: 7px;
}

/* ---- Search drawer ---- */

.nysf-header__searchbar {
	border-top: 1px solid var(--nysf-line-navy);
	padding: 16px 0;
}

.nysf-header__searchbar > * {
	max-width: var(--nysf-maxw);
	margin: 0 auto;
	padding: 0 28px;
}

/*
 * Modelled on brand.css `.news`, the footer newsletter field: a pill on a
 * --line-navy bed with a gold circular submit. The design never specified a
 * search field, and the WordPress default (a bare input beside a white
 * system button, hugging the left of a full-width drawer) looked like it
 * belonged to another site.
 *
 * Spanning the content column rather than sitting at one end is what makes
 * it read as a drawer instead of a stray control.
 */
.nysf-search {
	display: flex;
	align-items: center;
	gap: 10px;
	background: var(--nysf-line-navy);
	border: 1px solid transparent;
	border-radius: var(--nysf-r-pill);
	padding: 6px 6px 6px 22px;
	transition: 0.2s;
}

.nysf-search:focus-within {
	border-color: var(--nysf-gold);
}

.nysf-search__field {
	flex: 1;
	min-width: 0;
	background: none;
	border: 0;
	/*
	 * No `outline: none`.
	 *
	 * It was here to suppress the browser's default ring in favour of
	 * the styled focus state below. That is a fair trade only while the
	 * replacement is guaranteed, and it is exactly the habit that left
	 * the rest of the site with no indicator at all. The global
	 * :focus-visible rule in chrome.css now draws the ring, and if that
	 * ever fails the browser default is better than nothing.
	 */
	color: #fff;
	font-family: var(--nysf-sans);
	font-size: 15px;
	padding: 10px 0;
	/* Safari draws a rounded inset box on type=search without this. */
	-webkit-appearance: none;
	appearance: none;
}

.nysf-search__field::placeholder {
	color: #88a0a9;
}

.nysf-search__field::-webkit-search-cancel-button {
	-webkit-appearance: none;
}

.nysf-search__submit {
	flex: 0 0 42px;
	width: 42px;
	height: 42px;
	border: 0;
	border-radius: 50%;
	background: var(--nysf-gold);
	color: var(--nysf-navy);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: 0.2s;
}

.nysf-search__submit:hover {
	background: var(--nysf-gold-d);
}

@media (prefers-reduced-motion: reduce) {
	.nysf-search,
	.nysf-search__submit {
		transition: none;
	}
}

@media (max-width: 1080px) {
	/*
	 * The nav is meant to drop to its own full-width row below the bar, which
	 * is what `order: 4` and `flex-basis: 100%` below are asking for. Neither
	 * does anything without this: the inner is a flex row, and a flex row does
	 * not wrap unless it is told to. Without it the open nav stayed on the
	 * same line as a fourth item, so the browser shrank all four to fit 390px
	 * and the menu ended up 14px wide against the right edge with the logo and
	 * the buttons crushed beside it. Closed, the nav is `display: none`, so
	 * there was only ever one line and the bug was invisible.
	 */
	.nysf-header__inner {
		flex-wrap: wrap;
	}

	/*
	 * With two lines, the default `align-content: stretch` only pads the bar
	 * out to 82px while there is one line. Once the menu opens the container
	 * grows past its min-height and the top row collapses to the tallest
	 * thing in it, so the bar would visibly shorten on open. Holding the
	 * brand at the bar height keeps the top row the same on both states.
	 */
	.nysf-header__brand {
		min-height: 82px;
	}

	.nysf-header__toggle {
		display: block;
		order: 3;
	}

	/* Keep the search and Apply now with the toggle on the right rather than
	   pushed up against the logo. */
	.nysf-header__actions {
		margin-left: auto;
	}

	.nysf-header__nav {
		order: 4;
		flex-basis: 100%;
		display: none;
	}

	/*
	 * The stacked menu opens inside the header, and the header no longer
	 * scrolls away, so on a short screen the bottom of the list would be
	 * unreachable. Cap it to what is left of the viewport and let it scroll.
	 */
	.nysf-header__nav.is-open {
		display: block;
		max-height: calc(100vh - 82px);
		max-height: calc(100dvh - 82px);
		overflow-y: auto;
		overscroll-behavior: contain;
		border-top: 1px solid var(--nysf-line-navy);
	}

	.nysf-menu {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		padding-bottom: 12px;
	}

	.nysf-menu > li > a,
	.nysf-menu > li > .nysf-menu__toggle {
		width: 100%;
		justify-content: space-between;
		padding: 12px 0;
		border-bottom: 1px solid var(--nysf-line-navy);
	}

	/*
	 * Stacked, every dropdown open at once is a wall of forty links. Collapse
	 * them and let the parent button reveal one at a time; hover and
	 * focus-within are meaningless at this width anyway.
	 */
	.nysf-menu .sub-menu {
		position: static;
		opacity: 1;
		visibility: hidden;
		height: 0;
		overflow: hidden;
		transform: none;
		box-shadow: none;
		background: transparent;
		border: 0;
		border-radius: 0;
		padding: 0 0 0 14px;
		min-width: 0;
	}

	/* No floating panel here, so no gap to bridge. */
	.nysf-menu .sub-menu::before {
		content: none;
	}

	.nysf-menu li.is-open > .sub-menu {
		visibility: visible;
		height: auto;
		padding: 4px 0 10px 14px;
	}

	.nysf-menu li:hover > .sub-menu,
	.nysf-menu li:focus-within > .sub-menu {
		visibility: hidden;
		height: 0;
	}

	.nysf-menu li.is-open:hover > .sub-menu,
	.nysf-menu li.is-open:focus-within > .sub-menu {
		visibility: visible;
		height: auto;
	}

	.nysf-menu .sub-menu a {
		color: rgba(251, 243, 228, 0.85);
	}
}

/*
 * Phone.
 *
 * The header was the worst responsive defect on the site: at 390px its
 * contents measured about 445px wide, and because `overflow-x: clip` (added
 * to make the sticky header work at all) clips instead of scrolling, the
 * overflow was silent. No sideways scrollbar, no visible symptom, the "Apply
 * now" button simply off the edge of the screen on the device most of the
 * audience uses.
 *
 * brand.css does not settle this one. Its only header breakpoint is 980px,
 * where the menu collapses to the toggle, and below that the prototype keeps
 * the logo, the search icon, the full-size Apply now and the toggle at full
 * size, which does not fit a phone either. So this is our answer rather than
 * the design's: everything shrinks, nothing is removed. Hiding the search or
 * the primary call to action on the smallest screens would be the easy fix
 * and the wrong one.
 */
@media (max-width: 620px) {
	.nysf-header__inner {
		/* brand.css .wrap drops to an 18px gutter at this width. */
		padding: 0 18px;
		gap: 14px;
		min-height: 72px;
	}

	.nysf-header__brand {
		min-height: 72px;
	}

	.nysf-header__brand img {
		height: 32px;
	}

	.nysf-header__nav.is-open {
		max-height: calc(100vh - 72px);
		max-height: calc(100dvh - 72px);
	}

	.nysf-header__actions {
		gap: 12px;
	}

	.nysf-header__cta {
		font-size: 14px;
		padding: 10px 16px;
	}

	/* The 26px arrow disc is a third of the button's width at this size. */
	.nysf-header__cta-arrow {
		display: none;
	}
}

/*
 * 320px, the narrowest width WCAG 1.4.10 Reflow asks for. One more step down
 * and the row fits with the search and the call to action both intact.
 */
@media (max-width: 380px) {
	/*
	 * Now that the inner wraps, an item that does not fit moves to a new line
	 * instead of being squeezed: flex wraps on hypothetical size and only
	 * shrinks within a line afterwards. At 320px the bar was 15px over, so
	 * the toggle dropped to a second row on its own. These values buy that
	 * 15px back across the gutter, the gaps and the two controls, which is
	 * cheaper than dropping the search or the call to action.
	 */
	.nysf-header__inner {
		gap: 8px;
		padding: 0 14px;
	}

	.nysf-header__brand img {
		height: 28px;
	}

	.nysf-header__actions {
		gap: 6px;
	}

	.nysf-header__search {
		padding: 6px;
	}

	.nysf-header__cta {
		font-size: 13px;
		padding: 9px 12px;
	}

	/* Vertical padding untouched: the hit area stays past the 24px that
	   SC 2.5.8 asks for. */
	.nysf-header__toggle {
		padding: 10px 4px;
	}
}

/* ==========================================================================
   Footer
   ========================================================================== */

/* brand.css .site-footer */
.nysf-footer {
	background: var(--nysf-navy);
	color: #c7d2d6;
	margin-top: 84px;
	position: relative;
	/* The dome again: the footer arches up out of the page. */
	border-radius: 44px 44px 0 0;
	overflow: hidden;
}

.nysf-molecule-bg::before {
	content: '';
	position: absolute;
	inset: 0;
	background: url('../img/pattern-spread.png') center / cover no-repeat;
	opacity: 0.45;
	pointer-events: none;
}

/* brand.css .fgrid, inside .wrap (max-width 1240, 28px gutter). */
.nysf-footer__inner {
	position: relative;
	max-width: var(--nysf-maxw);
	margin: 0 auto;
	padding: 74px 28px 0;
	display: grid;
	grid-template-columns: 1.6fr 1fr 1fr 1.4fr;
	gap: 40px;
}

.nysf-footer__logo img {
	display: block;
	width: auto;
	height: 38px;
}

.nysf-footer__wordmark {
	font-family: var(--nysf-display);
	font-size: 14px;
	line-height: 1.15;
	display: block;
	color: var(--nysf-light);
}

/* brand.css .site-footer p.about */
.nysf-footer__tagline {
	font-size: 14.5px;
	color: #9fb0b7;
	max-width: 300px;
	margin: 18px 0 0;
}

/* brand.css .fsoc */
.nysf-footer__social {
	display: flex;
	gap: 12px;
	list-style: none;
	margin: 22px 0 0;
	padding: 0;
}

/*
 * `a` or `span`: with no URL set the footer renders a span, so the icon looks
 * the same without being a focusable link to nowhere. See footer.php.
 */
.nysf-footer__social-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--nysf-line-navy);
	color: var(--nysf-light);
	transition: 0.2s;
}

a.nysf-footer__social-link:hover {
	background: var(--nysf-gold);
	color: var(--nysf-navy);
}

/* brand.css .site-footer h6 */
.nysf-footer__heading {
	font-family: var(--nysf-display);
	font-size: 16px;
	font-weight: 700;
	color: var(--nysf-light);
	margin: 0 0 20px;
}

/* brand.css .fcol */
.nysf-footer__links {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 11px;
}

.nysf-footer__links a {
	font-size: 14.5px;
	color: #9fb0b7;
	transition: 0.2s;
	/*
	 * WCAG 2.2 adds SC 2.5.8 Target Size (Minimum): 24 by 24 CSS pixels. The
	 * inline exception is for a link inside a sentence, which a footer
	 * navigation list is not. At 14.5px these were 18px tall.
	 *
	 * The height goes on the box rather than into the list gap, so the rows
	 * stay 11px apart and the footer does not grow.
	 */
	display: inline-flex;
	align-items: center;
	min-height: 24px;
}

.nysf-footer__links a:hover {
	color: var(--nysf-gold);
}

.nysf-footer__note {
	font-size: 14.5px;
	color: #9fb0b7;
	margin: 0;
	max-width: 32ch;
}

/*
 * brand.css .news: a filled pill with the submit button sitting inside it,
 * not an underlined input with the button alongside.
 */
.nysf-footer__signup {
	display: flex;
	align-items: center;
	background: var(--nysf-line-navy);
	border-radius: var(--nysf-r-pill);
	padding: 6px 6px 6px 20px;
	margin-top: 16px;
	max-width: 330px;
}

.nysf-footer__signup input {
	flex: 1;
	min-width: 0;
	background: none;
	border: 0;
	color: #fff;
	font-family: var(--nysf-sans);
	font-size: 14px;
}

.nysf-footer__signup input::placeholder {
	color: #88a0a9;
}

.nysf-footer__signup button {
	flex: 0 0 auto;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	border: 0;
	background: var(--nysf-gold);
	color: var(--nysf-navy);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}

.nysf-footer__pending {
	font-size: 12px;
	color: #88a0a9;
	margin: 8px 0 0;
}

/*
 * brand.css .fbottom sits inside .wrap, so its rule stops at the content
 * column. Two earlier attempts got this wrong: first the border was on the
 * full-bleed bar and drew right across the viewport, then it moved to the
 * element carrying the 28px gutter, where a border sits outside the padding
 * box and so still overshot by 28px each side. The gutter has to be on the
 * outer element and the border on the inner one.
 */
.nysf-footer__bar {
	position: relative;
	max-width: var(--nysf-maxw);
	margin: 0 auto;
	padding: 0 28px;
}

.nysf-footer__bar-inner {
	border-top: 1px solid var(--nysf-line-navy);
	margin-top: 54px;
	padding: 26px 0 30px;
	display: flex;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	font-size: 13.5px;
	color: #88a0a9;
}

.nysf-footer__bar-inner p {
	margin: 0;
}

.nysf-footer__bar-inner a {
	color: #88a0a9;
	/* SC 2.5.8, as above. These sat at 22px. */
	display: inline-flex;
	align-items: center;
	min-height: 24px;
}

.nysf-footer__bar-inner a:hover {
	color: var(--nysf-gold);
}

@media (max-width: 980px) {
	.nysf-footer__inner {
		grid-template-columns: 1fr 1fr;
	}
}

@media (max-width: 620px) {
	.nysf-footer__inner {
		grid-template-columns: 1fr;
	}

	.nysf-footer__bar-inner {
		flex-direction: column;
	}
}

/* Newsletter subscribe form (Campaign Monitor "NYSF Outlook") */
.nysf-subscribe { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.nysf-subscribe__input {
	flex: 1 1 220px; min-width: 0; padding: 12px 14px; font: inherit;
	border: 1px solid #cfd8e0; border-radius: 8px; background: #fff; color: #0b2233;
}
.nysf-subscribe__btn { flex: 0 0 auto; border: 0; cursor: pointer; }
.nysf-subscribe__disclaimer { flex: 1 1 100%; margin: 8px 0 0; font-size: 13px; line-height: 1.5; opacity: .85; }
.nysf-subscribe__disclaimer a { text-decoration: underline; }
.nysf-subscribe--compact { flex-wrap: nowrap; gap: 0; max-width: 360px; }
.nysf-subscribe--compact .nysf-subscribe__input { border-radius: 8px 0 0 8px; border-right: 0; }
.nysf-subscribe--compact .nysf-subscribe__btn { border-radius: 0 8px 8px 0; padding: 12px 16px; }