/**
 * Margin as Method (child theme) — header & footer styling.
 *
 * Scoped to the block class names used in parts/header.html and
 * parts/footer.html. Colors/type match the tokens already registered in
 * theme.json (masm-* palette + Newsreader/Karla/Oswald font families) —
 * repeated here as plain hex/var values so this stylesheet stays a direct,
 * readable translation of the original reference design's topbar / masthead
 * / nav / footer / colophon rules.
 *
 * @package Margin_As_Method_Child
 */

/* Design tokens (colours, fonts, --masm-max / --masm-gut) live in
   assets/css/tokens.css, which is loaded before this file. */


/* ==========================================================================
   Top bar — address / phone / email, parent-org link, social icons
   ========================================================================== */

.masthead .topbar {
	background: var(--masm-ink);
	color: rgba(239, 231, 214, .82);
	font-size: 13px;
	/* This outer bar is a direct child of the header's "constrained" layout
	   group, so WordPress would otherwise shrink it to the site's default
	   content width and center it — keeping the navy background from
	   spanning edge to edge. Free it here; .topbar-in (below) still centers
	   the actual content within it, exactly like the reference design. */
	max-width: none;
	margin-inline: 0;
}

.masthead .topbar-in {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	height: 38px;
	max-width: var(--masm-max);
	margin-inline: auto;
	padding-inline: var(--masm-gut);

	/* These containers set a max-width AND a side gutter, so they must measure
	   that max-width including the gutter - otherwise the gutter is added on top
	   of 1240px and the row sits wider than every other row on the page. The
	   block editor's own reset happens to supply this for the markup that comes
	   from blocks, but not for the parts rendered by a shortcode, so it is set
	   explicitly here for all of them. */
	box-sizing: border-box;
}

.masthead .topbar ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
}

.masthead .topbar-contact {
	gap: 26px;
	min-width: 0;
	flex-wrap: wrap;
}

.masthead .topbar-contact li {
	display: flex;
	align-items: center;
	gap: 8px;
	white-space: nowrap;
	min-width: 0;
}

.masthead .topbar-contact li span {
	overflow: hidden;
	text-overflow: ellipsis;
}

.masthead .topbar-contact svg {
	width: 15px;
	height: 15px;
	flex: 0 0 auto;
	color: var(--masm-ochre);
}

.masthead .topbar-contact a {
	text-decoration: none;
	color: inherit;
	transition: color .2s;
}

.masthead .topbar-contact a:hover {
	color: var(--masm-surface);
}

.masthead .topbar-social {
	gap: 10px;
}

.masthead .topbar-social a {
	display: grid;
	place-items: center;
	width: 26px;
	height: 26px;
	color: var(--masm-rust);
	transition: color .22s, transform .22s;
}

.masthead .topbar-social svg {
	width: 26px;
	height: 26px;
	display: block;
}

.masthead .topbar-social a:hover {
	color: var(--masm-surface);
	transform: translateY(-1px);
}

.masthead .topbar-social a.topbar-site {
	width: auto;
	height: auto;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	color: rgba(239, 231, 214, .82);
	font-family: var(--masm-sans);
	font-size: 13px;
	text-decoration: none;
	white-space: nowrap;
	margin-right: 10px;
	padding-right: 18px;
	border-right: 1px solid rgba(239, 231, 214, .2);
}

.masthead .topbar-social a.topbar-site svg {
	width: 12px;
	height: 12px;
	color: var(--masm-ochre);
}

.masthead .topbar-social a.topbar-site:hover {
	transform: none;
	color: var(--masm-surface);
}

/* ==========================================================================
   Masthead — logo + primary navigation
   ========================================================================== */

.masthead {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 60;
	background: rgba(247, 240, 224, .82);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	border-bottom: 1px solid transparent;
	transition: border-color .3s, background .3s;
	/* WordPress's "global padding" (from the .has-global-padding class this
	   block gets as a "constrained"-layout group) would otherwise add left/
	   right padding here, insetting the topbar/masthead-in rows below from
	   the true viewport edge. Spacing is handled entirely by .topbar-in and
	   .masthead-in's own padding-inline, so this needs none of its own. */
	padding-inline: 0;
}

/*
 * The topbar and the logo/nav row are two sibling blocks inside the header
 * group, so WordPress's own block-gap spacing (applied here as a computed
 * margin-top, not something a --wp--style--block-gap override can reach)
 * would otherwise insert extra space between them. A plain class selector
 * beats WordPress's own zero-specificity :where(...) layout rule, so this
 * needs no !important.
 */
.masthead .topbar,
.masthead-in {
	margin-block-start: 0;
}

.masthead.is-stuck {
	border-bottom-color: var(--masm-rule);
}

.masthead .masthead-in {
	display: flex;
	align-items: center;
	gap: 24px;
	height: 116px;
	/* Same "constrained" layout issue as .topbar above: this needs its own
	   explicit max-width/centering (not WordPress's default content width)
	   to land at the design's actual column width, at higher specificity
	   than the injected layout rule so it doesn't depend on stylesheet
	   load order. */
	max-width: var(--masm-max);
	margin-inline: auto;
	padding-inline: var(--masm-gut);

	/* These containers set a max-width AND a side gutter, so they must measure
	   that max-width including the gutter - otherwise the gutter is added on top
	   of 1240px and the row sits wider than every other row on the page. The
	   block editor's own reset happens to supply this for the markup that comes
	   from blocks, but not for the parts rendered by a shortcode, so it is set
	   explicitly here for all of them. */
	box-sizing: border-box;
}

.masthead .brand {
	flex: 0 0 auto;
	line-height: 0;
}

.masthead .brand img {
	height: 76px;
	width: auto;
	display: block;
	transition: height .35s cubic-bezier(.2, .7, .3, 1);
}

/*
 * The header is fixed, so it no longer takes up space in normal document
 * flow — everything that follows it needs matching top padding instead.
 * masthead.js measures the header's real rendered height (which already
 * accounts for the admin bar, if present) and writes it to --masm-header-h;
 * these static values are only the fallback used before that JS runs, or
 * if it's ever disabled.
 */
body {
	padding-top: var(--masm-header-h, 154px);
}

.admin-bar .masthead {
	top: 32px;
}

@media (max-width: 782px) {
	.admin-bar .masthead {
		top: 46px;
	}
}

/* Primary navigation — core Navigation block markup */

.masthead .nav.wp-block-navigation {
	margin-left: auto;
}

.masthead .nav .wp-block-navigation__container {
	gap: 26px;
	align-items: center;
}

.masthead .nav .wp-block-navigation-item__content {
	font-family: var(--masm-sans);
	font-size: 14.5px;
	letter-spacing: .005em;
	text-decoration: none;
	color: var(--masm-ink-soft);
	padding: 6px 0;
	position: relative;
	white-space: nowrap;
}

.masthead .nav .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	left: 0;
	right: 100%;
	bottom: 0;
	height: 1.5px;
	background: var(--masm-rust);
	transition: right .32s cubic-bezier(.2, .7, .3, 1);
}

.masthead .nav .wp-block-navigation-item__content:hover {
	color: var(--masm-ink);
}

.masthead .nav .wp-block-navigation-item__content:hover::after,
.masthead .nav .current-menu-item > .wp-block-navigation-item__content {
	right: 0;
}

.masthead .nav li.btn-register .wp-block-navigation-item__content,
.masthead .nav .wp-block-navigation-item.btn-register .wp-block-navigation-item__content {
	background: var(--masm-ink);
	color: var(--masm-paper);
	padding: 10px 18px;
	border-radius: 999px;
	font-size: 14px;
	letter-spacing: .01em;
	transition: background .25s, transform .25s;
}

.masthead .nav li.btn-register .wp-block-navigation-item__content::after,
.masthead .nav .wp-block-navigation-item.btn-register .wp-block-navigation-item__content::after {
	display: none;
}

.masthead .nav li.btn-register .wp-block-navigation-item__content:hover,
.masthead .nav .wp-block-navigation-item.btn-register .wp-block-navigation-item__content:hover {
	background: #0A1C36;
	color: var(--masm-paper);
	transform: translateY(-1px);
}

/* Mobile overlay toggle (core-provided) — recolor to match the palette */

.masthead .nav .wp-block-navigation__responsive-container-open svg,
.masthead .nav .wp-block-navigation__responsive-container-close svg {
	color: var(--masm-ink);
}

.masthead .nav .wp-block-navigation__responsive-container.is-menu-open {
	background: var(--masm-paper);
}

.masthead .nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-size: 18px;
	color: var(--masm-ink);
}

@media (max-width: 860px) {
	.masthead .topbar-in {
		height: 34px;
	}

	.masthead .topbar {
		font-size: 12.5px;
	}

	.masthead .topbar-contact li:first-child {
		display: none;
	}

	.masthead .topbar-social a.topbar-site {
		margin-right: 4px;
		padding-right: 12px;
	}

	.masthead-in {
		height: 92px;
	}

	.masthead .brand img {
		height: 56px;
	}

	body {
		padding-top: var(--masm-header-h, 126px);
	}
}

@media (max-width: 520px) {
	.masthead .topbar-social a.topbar-site {
		display: none;
	}
}

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

.site-footer {
	background: #E7DBC1;
	padding-top: clamp(38px, 4.2vw, 58px);
	border-top: 1px solid var(--masm-rule);
	max-width: none;
	color: var(--masm-ink-soft);
	font-family: var(--masm-sans);
}

.site-footer .foot-grid {
	max-width: var(--masm-max);
	margin-inline: auto;
	padding-inline: var(--masm-gut);
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, .62fr) minmax(0, .72fr) minmax(0, 1fr);
	gap: 30px 34px;
	align-items: start;

	/* These containers set a max-width AND a side gutter, so they must measure
	   that max-width including the gutter - otherwise the gutter is added on top
	   of 1240px and the row sits wider than every other row on the page. The
	   block editor's own reset happens to supply this for the markup that comes
	   from blocks, but not for the parts rendered by a shortcode, so it is set
	   explicitly here for all of them. */
	box-sizing: border-box;
}

.site-footer .logo-foot img {
	height: 40px;
	width: auto;
	margin-bottom: 16px;
	display: block;
}

.site-footer .foot-tagline {
	font-size: 15px;
	color: var(--masm-ink-soft);
	max-width: 38ch;
	margin: 0;
}

.site-footer .foot-head {
	font-family: var(--masm-stamp);
	font-size: 12px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--masm-rust);
	margin: 0 0 18px;
}

.site-footer .foot-list.wp-block-navigation {
	margin: 0;
}

.site-footer .foot-list .wp-block-navigation__container {
	gap: 10px;
}

.site-footer .foot-list .wp-block-navigation-item__content {
	font-size: 15px;
	color: var(--masm-ink-soft);
	text-decoration: none;
	padding: 0;
}

.site-footer .foot-list .wp-block-navigation-item__content:hover {
	color: var(--masm-ink);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.site-footer .foot-contact address {
	font-style: normal;
	font-size: 14.5px;
	line-height: 1.55;
	color: var(--masm-ink-soft);
	margin: 0 0 12px;
}

.site-footer .foot-line {
	font-size: 14.5px;
	margin: 0 0 6px;
}

.site-footer .foot-line a {
	color: var(--masm-ink-soft);
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: color .2s, border-color .2s;
}

.site-footer .foot-line a:hover {
	color: var(--masm-ink);
	border-bottom-color: var(--masm-rust-ink);
}

.site-footer .foot-social {
	list-style: none;
	display: flex;
	gap: 10px;
	margin: 18px 0 0;
	padding: 0;
}

.site-footer .foot-social a {
	display: grid;
	place-items: center;
	width: 28px;
	height: 28px;
	color: var(--masm-ink);
	transition: color .22s, transform .22s;
}

.site-footer .foot-social svg {
	width: 26px;
	height: 26px;
	display: block;
}

.site-footer .foot-social a:hover {
	color: var(--masm-rust);
	transform: translateY(-1px);
}

.site-footer .foot-partner {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 24px 0 0;
	font-size: 13px;
	line-height: 1.45;
	color: var(--masm-ink-soft);
}

.site-footer .foot-partner img {
	width: 52px;
	height: 52px;
	margin: 0;
	border-radius: 6px;
	display: block;
	flex: 0 0 auto;
}

.site-footer .fp-credit b {
	display: block;
	color: var(--masm-ink);
	font-weight: 500;
	font-size: 13.5px;
}

.site-footer .fp-credit a {
	color: inherit;
	text-decoration: none;
}

.site-footer .fp-credit a:hover {
	text-decoration: underline;
}

.site-footer .colophon {
	max-width: none;
	border-top: 1px solid var(--masm-rule);
	margin-top: clamp(30px, 4vw, 46px);
}

.site-footer .colophon-in {
	max-width: var(--masm-max);
	margin-inline: auto;
	padding-inline: var(--masm-gut);
	display: flex;
	flex-wrap: wrap;
	gap: 6px 18px;
	align-items: center;
	padding-block: 16px;
	font-size: 14px;
	color: var(--masm-ink-soft);

	/* These containers set a max-width AND a side gutter, so they must measure
	   that max-width including the gutter - otherwise the gutter is added on top
	   of 1240px and the row sits wider than every other row on the page. The
	   block editor's own reset happens to supply this for the markup that comes
	   from blocks, but not for the parts rendered by a shortcode, so it is set
	   explicitly here for all of them. */
	box-sizing: border-box;
}

.site-footer .colophon-in span:first-child {
	color: var(--masm-ink);
	font-weight: 500;
}

.site-footer .colophon-in a {
	color: inherit;
	text-decoration: none;
	border-bottom: 1px solid rgba(17, 41, 75, .3);
}

.site-footer .colophon-in a:hover {
	border-bottom-color: var(--masm-rust-ink);
}

@media (max-width: 900px) {
	.site-footer .foot-grid {
		grid-template-columns: 1fr 1fr;
	}
}

@media (max-width: 560px) {
	.site-footer .foot-grid {
		grid-template-columns: 1fr;
		gap: 28px;
	}

	.site-footer .foot-partner {
		margin-top: 18px;
	}
}

/* Hero slider (Smart Slider) mobile fixes */
@media (max-width: 767px) {
  .hero-eyebrow-layer {
    position: static !important;
    transform: none !important;
    left: auto !important;
    top: auto !important;
    margin: 0 0 10px 0 !important;
    display: block !important;
  }
  .hero-eyebrow-layer .n2-ss-item-content {
    font-size: 11px !important;
  }
  .hero-h1-layer .n2-ss-item-content {
    font-size: 26px !important;
    line-height: 1.25 !important;
  }
  .hero-sub-layer .n2-ss-item-content {
    font-size: 14px !important;
    line-height: 1.5 !important;
  }
  .hero-sub-layer {
    max-width: 100% !important;
  }
  .hero-btn-layer .n2-ss-item-content,
  .hero-btn-layer a {
    font-size: 13px !important;
    padding: 10px 20px !important;
  }
  .hero-note-layer .n2-ss-item-content {
    font-size: 12px !important;
  }
}

@media (max-width: 480px) {
  .hero-h1-layer .n2-ss-item-content {
    font-size: 21px !important;
  }
  .hero-sub-layer .n2-ss-item-content {
    font-size: 13px !important;
  }
}

/* Home page: hide default page title */
.page-id-31 .wp-block-post-title {
  display: none;
}

/* Match the reference design's text rendering */
body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* ==========================================================================
   Footer - exact values from the reference design (index-v3 footer rules)
   ========================================================================== */
.site-footer.has-global-padding { padding-inline: 0; }
.site-footer .logo-foot { margin: 0 0 20px; }
.site-footer .logo-foot a { display: inline-block; line-height: 0; }
.site-footer .logo-foot img { height: 96px !important; width: auto !important; max-width: none; margin: 0; display: block; }
.site-footer .foot-tagline { font-size: 15px; line-height: 1.62; color: var(--masm-ink-soft); max-width: 38ch; margin: 0; }
.site-footer .foot-head { margin: 0 0 18px; line-height: 1.62; }
.site-footer .foot-contact address .foot-org { display: block; color: var(--masm-ink); font-weight: 500; margin-bottom: 2px; }
.site-footer .foot-social { gap: 10px; }
.site-footer .foot-social a { width: 30px; height: 30px; }
.site-footer .foot-social svg { width: 30px; height: 30px; }
.site-footer .foot-partner { gap: 14px; font-size: 13px; line-height: 1.45; max-width: none; }
.site-footer .fp-credit { display: block; line-height: 1.45; }
.site-footer .fp-credit > span { display: block; }
.site-footer .colophon {
	max-width: none;
	margin-inline: 0;
	margin-top: clamp(30px, 3.4vw, 44px);
	background: #DCCFB2;
	border-top: 1px solid rgba(17, 41, 75, .12);
	padding-inline: 0;
}
.site-footer .colophon-in { gap: 8px 28px; align-items: baseline; padding-block: 16px; font-size: 14px; }
.site-footer .colophon-in > * { margin: 0; }
@media (max-width: 1080px) {
	.site-footer .foot-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 860px) {
	.site-footer .foot-grid { grid-template-columns: 1fr; gap: 28px; }
	.site-footer .foot-partner { margin-top: 18px; }
	.site-footer .logo-foot img { height: 78px !important; }
}
/* the last section runs straight into the footer (no block-gap strip) */
.masm-front + .wp-block-template-part { margin-block-start: 0; }

/* --------------------------------------------------------------------------
   The focus ring on the logo

   Left to itself the browser draws its own ring round the logo link - a hard
   black rectangle across the artwork, and some browsers show it on a plain
   mouse click, not just on Tab. The ring is not removed, because a keyboard
   user needs to see where they are; it is replaced with the brand's own and
   drawn only for keyboard focus, offset clear of the logo.
   -------------------------------------------------------------------------- */
.masthead :is(.custom-logo-link, .wp-block-site-logo a):focus,
.site-footer :is(.custom-logo-link, .wp-block-site-logo a):focus {
	outline: none;
}

.masthead :is(.custom-logo-link, .wp-block-site-logo a):focus-visible,
.site-footer :is(.custom-logo-link, .wp-block-site-logo a):focus-visible {
	outline: 2px solid var(--masm-ochre);
	outline-offset: 6px;
	border-radius: 2px;
}

/* --------------------------------------------------------------------------
   Focus rings, site-wide

   Left alone, the browser draws its own ring - a hard black rectangle that
   cuts across whatever it lands on, and in some browsers it shows on a plain
   mouse click as well as on Tab.

   It is replaced here rather than removed: without a ring a keyboard user
   cannot see where they are on the page. :focus clears the browser's default,
   so clicking leaves no mark; :focus-visible draws the brand's own, and
   browsers only match that for keyboard navigation. The colour is the ochre
   token, so it follows the palette - including the accessibility toolbar's
   high-contrast mode, where it becomes the same yellow as the rules.

   The selectors are wrapped in :where() so they carry no specificity at all:
   anything that needs its own ring - the logo below, the accessibility panel
   in accessibility.css - simply states it and wins.
   -------------------------------------------------------------------------- */
:where(a, button, summary, label, [tabindex], [role="button"]):focus {
	outline: none;
}

:where(a, button, summary, label, [tabindex], [role="button"]):focus-visible {
	outline: 2px solid var(--masm-ochre);
	outline-offset: 3px;
	border-radius: 2px;
}

/* A field keeps its ring on every focus, not only on Tab: there the ring also
   says which box is being typed into. */
:where(input, select, textarea):focus {
	outline: 2px solid var(--masm-ochre);
	outline-offset: 2px;
}