/*
Theme Name: mfaithart
Theme URI: https://mfaithart.com
Author: W Web Design
Author URI: https://wwebdesign.co.uk
Description: Madeleine Pires — every page section an editable ACF block. Rebuilt like for like from Ascend Premium + SiteOrigin Page Builder.
Version: 1.0.0
Requires at least: 6.5
Requires PHP: 8.1
Requires Plugins: advanced-custom-fields-pro
Text Domain: mfaithart
*/

/* =========================================================================
   0. Tokens and the accessibility floor
   -------------------------------------------------------------------------
   The colours are the old theme's, unchanged — this rebuild is a change of
   editing interface, not of design. Three of them do not reach WCAG AA as
   text and are listed in the hand-over report rather than silently "fixed":
   --mfa-link on --mfa-pale (3.4:1), white on --mfa-btn-sky (2.4:1) and the
   footer credit. Changing them is a design decision for the client.
   ========================================================================= */
:root {
	--mfa-ink:        #444444;
	--mfa-ink-soft:   #555555;   /* h4–h6, as the old theme set them */
	--mfa-link:       #2288d6;   /* the old theme's "primary" */
	--mfa-hairline:   #eeeeee;   /* the 2px rule under links in prose — decoration only */
	--mfa-pale:       #e3f0ff;   /* the pale blue band */
	--mfa-page:       #f2f2f2;   /* behind everything, shows only below a short page */
	--mfa-footer:     #333333;
	--mfa-btn-sky:    #6db1ff;
	--mfa-btn-sky-hi: #499eff;
	--mfa-btn-sea:    #41a9d5;
	--mfa-btn-sea-hi: #52b1d9;
	--mfa-focus:      #12608f;   /* 3:1+ on white and on the pale band */
	--mfa-serif:      Garamond, serif;
	--mfa-menu-font:  "Source Sans Pro", sans-serif;
	--mfa-gutter:     30px;      /* the page builder's cell gutter */
}

*, *::before, *::after { box-sizing: border-box; }

/* Focus is a component and gets a ring everywhere, keyboard only. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--mfa-focus);
	outline-offset: 2px;
	border-radius: 2px;
}
.mfa-drawer :is(a, button, input):focus-visible,
.mfa-footer :is(a, button):focus-visible { outline-color: #ffffff; }

/* The skip link must be VISIBLE when focused — the clip-only version is a
   Level A failure by itself. */
.mfa-sr-only {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}
.mfa-skip:focus,
.mfa-skip:focus-visible {
	position: fixed !important;
	top: 12px; left: 12px;
	width: auto; height: auto;
	padding: 12px 20px;
	margin: 0;
	overflow: visible;
	clip: auto;
	clip-path: none;
	z-index: 10000;
	background: #ffffff;
	color: var(--mfa-focus);
	outline: 3px solid var(--mfa-focus);
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
		scroll-behavior: auto !important;
	}
}

/* =========================================================================
   1. Base
   ========================================================================= */
html { -webkit-text-size-adjust: 100%; }
body {
	margin: 0;
	font-family: var(--mfa-serif);
	font-size: 16px;
	line-height: 24px;
	font-weight: 400;
	color: var(--mfa-ink);
	background: var(--mfa-page);
	overflow-x: hidden;
}
a { color: var(--mfa-link); text-decoration: none; background-color: transparent; }
img { max-width: 100%; height: auto; border: 0; vertical-align: middle; }
b, strong { font-weight: 700; }
p { margin: 0; }
figure { margin: 0; }
h1, h2, h3, h4, h5, h6 { font-family: var(--mfa-serif); font-weight: 400; letter-spacing: 1.2px; }
h1 { font-size: 40px; line-height: 40px; color: var(--mfa-ink); margin: 10px 0 10px; }
h2 { font-size: 32px; line-height: 40px; color: var(--mfa-ink); margin: 10px 0 10px; }
h3 { font-size: 28px; line-height: 40px; color: var(--mfa-ink); margin: 10px 0 10px; }
h4 { font-size: 24px; line-height: 40px; color: var(--mfa-ink-soft); margin: 5px 0 5px; }
h5 { font-size: 18px; line-height: 24px; color: var(--mfa-ink-soft); margin: 5px 0 5px; }
h6 { font-size: 18px; line-height: 30px; color: var(--mfa-ink-soft); margin: 5px 0 5px; letter-spacing: 0; }
ul, ol { margin: 0 0 10px; padding: 0 0 0 20px; }
hr { height: 0; margin: 20px 0; border: 0; border-top: 1px solid var(--mfa-hairline); }
blockquote { border-left: 5px solid #aaa; font-size: 18px; padding: 0 0 0 15px; margin: 0 0 20px; }
table { border-collapse: collapse; border-spacing: 0; max-width: 100%; }
iframe { max-width: 100%; }

.mfa-wrapper { min-height: 100vh; }
.mfa-main { display: block; background: #ffffff; }
.mfa-main:focus { outline: none; }

/* The old theme's container: 90% of the window, never wider than 1140, with
   15px inside each edge — so content is 1110px at most. */
.mfa-container,
.mfa-wrap {
	width: 90%;
	max-width: 1140px;
	margin: 0 auto;
	padding: 0 15px;
}
@media (max-width: 766px) {
	.mfa-container,
	.mfa-wrap { width: auto; }
}

/* =========================================================================
   2. Header — desktop
   ========================================================================= */
.mfa-header { background: #ffffff; position: relative; z-index: 100; }
.mfa-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 100px;
}
.mfa-header__logo { height: 100%; flex: 0 0 auto; }
.mfa-header__brand { display: flex; align-items: center; height: 100%; }
.mfa-header__logo-img { height: 100%; width: auto; max-height: 216px; object-fit: scale-down; }

.mfa-nav { flex: 1 1 auto; display: flex; justify-content: flex-end; }
.mfa-nav__menu,
.mfa-nav__menu ul { margin: 0; padding: 0; list-style: none; }
.mfa-nav__menu { display: flex; align-items: center; }
.mfa-nav__menu > li { position: relative; }
.mfa-nav__menu > li > a {
	display: block;
	padding: 10px;
	font-family: var(--mfa-menu-font);
	font-weight: 600;          /* Ascend asked for "normal" but only loaded 600, so 600 is what showed */
	font-size: 16px;
	line-height: 24px;
	letter-spacing: .2px;
	text-transform: uppercase;
	color: var(--mfa-ink);
	transition: color .2s ease-in-out;
}
.mfa-nav__menu > li > a:hover,
.mfa-nav__menu > li:focus-within > a,
.mfa-nav__menu > li.current-menu-item > a,
.mfa-nav__menu > li.current-menu-ancestor > a,
.mfa-nav__menu > li.current-page-ancestor > a { color: #000000; }
.mfa-nav__menu > .menu-item-has-children > a::after {
	content: "";
	display: inline-block;
	vertical-align: bottom;
	width: 0;
	height: 16px;
	margin: 0 1px -2px 5px;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-top: 5px solid currentColor;
}
.mfa-nav__menu .sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 599;
	display: none;
	min-width: 12em;
	background: #ffffff;
	border: 2px solid var(--mfa-hairline);
	text-align: left;
}
.mfa-nav__menu .sub-menu::before {
	content: "";
	position: absolute;
	top: -8px;
	left: 23px;
	border-width: 0 6px 6px;
	border-style: solid;
	border-color: transparent transparent var(--mfa-hairline);
}
.mfa-nav__menu > li:hover > .sub-menu,
.mfa-nav__menu > li:focus-within > .sub-menu { display: block; }
.mfa-nav__menu .sub-menu a {
	display: block;
	padding: 10px 15px;
	font-size: 16px;
	line-height: 24px;
	letter-spacing: .2px;
	color: var(--mfa-ink);
	white-space: nowrap;
	transition: color .2s ease-in-out;
}
.mfa-nav__menu .sub-menu a:hover,
.mfa-nav__menu .sub-menu .current-menu-item > a { color: #000000; }

/* =========================================================================
   3. Header — phones and tablets (992px and below), and the slide-out menu
   ========================================================================= */
.mfa-mobilebar { display: none; background: #ffffff; position: relative; z-index: 100; }
.mfa-mobilebar__inner { display: flex; align-items: center; height: 88px; }
.mfa-mobilebar__brand { flex: 2 1 auto; display: flex; align-items: center; height: 100%; }
.mfa-mobilebar__logo-img { max-height: 100%; width: auto; max-width: 172px; }
.mfa-menu-toggle {
	flex: 0 0 auto;
	background: none;
	border: 0;
	padding: 10px;
	margin-right: -10px;
	cursor: pointer;
	color: var(--mfa-ink);
}
.mfa-menu-toggle__bars { display: block; position: relative; width: 30px; height: 25px; }
.mfa-menu-toggle__bars span {
	position: absolute;
	left: 0;
	display: block;
	width: 100%;
	height: 5px;
	border-radius: 3px;
	background: currentColor;
	transition: transform .35s ease-in-out, opacity .35s ease-in-out, top .35s ease-in-out;
}
.mfa-menu-toggle__bars span:nth-child(1) { top: 0; }
.mfa-menu-toggle__bars span:nth-child(2) { top: 10px; }
.mfa-menu-toggle__bars span:nth-child(3) { top: 20px; }
.mfa-menu-toggle:hover { color: #000000; }
.mfa-menu-toggle[aria-expanded="true"] .mfa-menu-toggle__bars span:nth-child(1) { top: 10px; transform: rotate(135deg); }
.mfa-menu-toggle[aria-expanded="true"] .mfa-menu-toggle__bars span:nth-child(2) { opacity: 0; }
.mfa-menu-toggle[aria-expanded="true"] .mfa-menu-toggle__bars span:nth-child(3) { top: 10px; transform: rotate(-135deg); }

@media (max-width: 992px) {
	.mfa-header { display: none; }
	.mfa-mobilebar { display: block; }
}

.mfa-drawer[hidden] { display: none; }
.mfa-drawer { position: fixed; inset: 0; z-index: 1000; }
.mfa-drawer__backdrop { position: absolute; inset: 0; background: rgba(11, 11, 11, .8); }
.mfa-drawer__panel {
	position: absolute;
	top: 0; right: 0; bottom: 0;
	width: 270px;
	max-width: 100%;
	padding: 10px;
	overflow-y: auto;
	background: var(--mfa-ink);
	box-shadow: 0 0 10px 0 rgba(0, 0, 0, .5);
	transform: translateX(100%);
	transition: transform .2s;
}
.mfa-drawer.is-open .mfa-drawer__panel { transform: translateX(0); }
@media (min-width: 767px) { .mfa-drawer__panel { width: 400px; } }
.mfa-drawer__close {
	display: block;
	margin: 0 0 10px auto;
	min-width: 44px;
	min-height: 44px;
	background: none;
	border: 0;
	color: #ffffff;
	font-size: 32px;
	line-height: 1;
	cursor: pointer;
}
.mfa-drawer .mfa-search { margin-bottom: 10px; }
.mfa-drawer .mfa-search__field {
	background: transparent;
	color: #ffffff;
	border-color: rgba(255, 255, 255, .3);
	font-family: var(--mfa-menu-font);
	text-transform: uppercase;
}
.mfa-drawer .mfa-search__field::placeholder { color: #ffffff; opacity: .8; }
.mfa-drawer .mfa-search__submit { color: #ffffff; }
.mfa-drawer__menu,
.mfa-drawer__menu ul { list-style: none; margin: 0; padding: 0; }
.mfa-drawer__menu a {
	display: block;
	padding: 8px 10px;
	font-family: var(--mfa-menu-font);
	font-weight: 600;
	font-size: 15px;
	line-height: 20px;
	letter-spacing: .2px;
	text-transform: uppercase;
	color: #ffffff;
	border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.mfa-drawer__menu .sub-menu a { padding-left: 25px; }
html.mfa-drawer-open,
html.mfa-drawer-open body { overflow: hidden; }

/* =========================================================================
   4. Title band, banner
   ========================================================================= */
.mfa-titleband {
	display: flex;
	align-items: center;
	height: 360px;
	background: var(--mfa-ink);
	text-align: center;
}
.mfa-titleband .mfa-container { width: 90%; }
.mfa-titleband__title {
	margin: 0;
	font-size: 70px;
	line-height: 1;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	color: #ffffff;
}
@media (max-width: 768px) {
	.mfa-titleband__title { font-size: 30px; }
}

/* As tall as the picture is at full width, never taller than --mfa-max; the
   picture fills the width and is trimmed top and bottom about its middle.
   The title is laid out on the old slider's 1140px canvas, so below that it
   shrinks with the window rather than wrapping. */
.mfa-banner {
	position: relative;
	width: 100%;
	aspect-ratio: 1 / var(--mfa-ratio);
	max-height: var(--mfa-max);
	overflow: hidden;
	background: var(--mfa-ink);
}
.mfa-banner__img {
	position: absolute;
	left: 0;
	top: 50%;
	width: 100%;
	height: auto;
	max-width: none;
	transform: translateY(-50%);
}
.mfa-banner__text {
	position: absolute;
	top: var(--mfa-top);
	left: 0;
	right: 0;
	text-align: center;
	color: #ffffff;
}
.mfa-banner__title, .mfa-banner__sub {
	margin: 0;
	font-family: var(--mfa-serif);
	font-weight: 400;
	letter-spacing: 0;
	color: #ffffff;
}
.mfa-banner__title {
	font-size: min(calc(var(--mfa-title) * 1px), calc(var(--mfa-title) / 1140 * 100vw));
	line-height: min(30px, calc(30 / 1140 * 100vw));
}
.mfa-banner__sub {
	margin-top: min(12px, calc(12 / 1140 * 100vw));
	font-size: min(35px, calc(35 / 1140 * 100vw));
	line-height: min(30px, calc(30 / 1140 * 100vw));
}

/* =========================================================================
   5. Sections — the page-builder row, rebuilt
   -------------------------------------------------------------------------
   Space above is padding on the section, space below is padding on the
   container, so a bottom shape always sits UNDER the space below, as the old
   theme's separator did.
   ========================================================================= */
.mfa-section {
	position: relative;
	margin-top: var(--mfa-gap, 0px);
	padding-top: var(--mfa-above, 0px);
	--mfa-band-bg: #ffffff;
}
.mfa-section > .mfa-wrap { padding-bottom: var(--mfa-below, 0px); }
.mfa-band--pale { background: var(--mfa-pale); --mfa-band-bg: var(--mfa-pale); }

/* White space after a page's LAST section, outside its background, before the
   footer — where the old page builder's last row had a bottom margin set on
   it. Machine-written by the conversion, not something an editor sets. */
.mfa-gap-after-30 { margin-bottom: 30px; }
.mfa-gap-after-50 { margin-bottom: 50px; }


/* A single-column section's measure: the page builder's centred cell, whose
   width was w × 100% less its share of the 30px gutters. */
.mfa-measure {
	width: calc(var(--mfa-w, 1) * 100% - (1 - var(--mfa-w, 1)) * var(--mfa-gutter));
	margin: 0 auto;
}
@media (max-width: 780px) {
	.mfa-measure { width: 100%; }
}

/* Bottom shapes. */
.mfa-shape { pointer-events: none; }
.mfa-shape--small-triangle {
	position: absolute;
	z-index: 2;
	top: 100%;
	left: 50%;
	width: 0;
	height: 0;
	margin: -1px 0 0 -50px;
	border-left: 50px solid transparent;
	border-right: 50px solid transparent;
	border-top: 50px solid var(--mfa-band-bg);
}
.mfa-shape--triangle,
.mfa-shape--tilt-left,
.mfa-shape--tilt-right {
	position: relative;
	z-index: 1;
	height: 100px;
}
.mfa-shape svg {
	position: absolute;
	bottom: -5px;
	left: 0;
	display: block;
	width: 100%;
	height: 100%;
}
.mfa-shape--tilt-left svg { transform: scaleX(-1); }
.mfa-shape-fill--white svg { fill: #ffffff; }
.mfa-shape-fill--pale svg { fill: var(--mfa-pale); }
@media (max-width: 600px) {
	.mfa-shape--triangle,
	.mfa-shape--tilt-left,
	.mfa-shape--tilt-right { height: 60px; }
}

/* =========================================================================
   6. Prose — formatted text from the editor
   ========================================================================= */
/* Long words wrap rather than run off a phone screen. The old theme clipped
   them instead (overflow:hidden on its wrapper), which hid the end of
   headings such as "Commission a Nebula/Cosmic …" at 390px. */
.mfa-prose { font-size: var(--mfa-fs, 16px); overflow-wrap: break-word; }
.mfa-prose p { margin: 0 0 24px; }
.mfa-prose p[style^="font-size"] { line-height: 1.4; }
.mfa-prose :is(h1, h2, h3, h4) { margin-bottom: 2%; }
/* A page's title line made its H1 for search engines, without changing how it
   looks: "plain" keeps the bold paragraph the articles open with, "as-h2" keeps
   the h2 size Class Booking and Patterns In Nature were written with. */
.mfa-prose h1.mfa-h1-plain { font: inherit; letter-spacing: inherit; color: inherit; margin: 0 0 24px; }
.mfa-prose h1.mfa-h1-as-h2 { font-size: 32px; }
.mfa-prose li { margin-bottom: 5px; }
.mfa-prose p a:not(.mfa-btn):not([data-mfa-lightbox]) {
	border-bottom: 2px solid var(--mfa-hairline);
	transition: border .2s ease-in-out;
}
.mfa-prose p a:not(.mfa-btn):not([data-mfa-lightbox]):hover { border-color: var(--mfa-link); }
.mfa-prose blockquote p { margin-bottom: 0; }
.mfa-prose table { width: 100%; margin-bottom: 10px; }
.mfa-prose td, .mfa-prose th { padding: 10px; }
.mfa-prose::after { content: ""; display: table; clear: both; }

.has-text-align-center, .aligncenter { text-align: center; }
.has-text-align-left { text-align: left; }
.has-text-align-right { text-align: right; }
.alignleft { float: left; margin: 5px 20px 10px 0; }
.alignright { float: right; margin: 5px 0 10px 20px; }
img.aligncenter, .wp-caption.aligncenter { display: block; margin-left: auto; margin-right: auto; }
.wp-caption { max-width: 100%; text-align: center; }

/* =========================================================================
   7. Image
   ========================================================================= */
.mfa-image--left { text-align: left; }
.mfa-image--center { text-align: center; }
.mfa-image--right { text-align: right; }
.mfa-image__link { display: block; }
.mfa-image__frame { line-height: 0; }
.mfa-image__img { display: inline-block; }
.mfa-image__frame--square {
	position: relative;
	display: block;
	height: 0;
	padding-bottom: 100%;
	overflow: hidden;
	z-index: 1;
}
.mfa-image__frame--square .mfa-image__img {
	position: absolute;
	top: 0;
	left: 50%;
	height: 100%;
	width: auto;
	min-width: 100%;
	max-width: none;
	transform: translateX(-50%);
}
.mfa-image__caption { text-align: center; padding: 10px 0; }

/* =========================================================================
   8. Gallery
   -------------------------------------------------------------------------
   Column counts follow the old theme's grid at each width — a 3-column
   gallery is 1 / 2 / 3 / 4 / 5 columns from phone to very large monitor.
   site.js places masonry items; without it this is a plain grid.
   ========================================================================= */
.mfa-gallery {
	--mfa-gcols: 1;
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	margin: 0 -5px -10px;      /* the last row's 10px gap never counted, as with Isotope */
}
.mfa-gallery__item {
	width: calc(100% / var(--mfa-gcols));
	padding: 0 5px 10px;
}
.mfa-gallery.is-laid-out { display: block; }
.mfa-gallery.is-laid-out .mfa-gallery__item { position: absolute; top: 0; left: 0; }

.mfa-gallery--cols-2 { --mfa-gcols: 1; }
.mfa-gallery--cols-3,
.mfa-gallery--cols-4 { --mfa-gcols: 1; }
@media (min-width: 544px) {
	.mfa-gallery--cols-3,
	.mfa-gallery--cols-4 { --mfa-gcols: 2; }
}
@media (min-width: 768px) {
	.mfa-gallery--cols-2 { --mfa-gcols: 2; }
	.mfa-gallery--cols-3,
	.mfa-gallery--cols-4 { --mfa-gcols: 3; }
}
@media (min-width: 992px) {
	.mfa-gallery--cols-4 { --mfa-gcols: 4; }
}
@media (min-width: 1500px) {
	.mfa-gallery--cols-2 { --mfa-gcols: 3; }
	.mfa-gallery--cols-3 { --mfa-gcols: 4; }
	.mfa-gallery--cols-4 { --mfa-gcols: 5; }
}
@media (min-width: 1800px) {
	.mfa-gallery--cols-2 { --mfa-gcols: 4; }
	.mfa-gallery--cols-3 { --mfa-gcols: 5; }
	.mfa-gallery--cols-4 { --mfa-gcols: 6; }
}

.mfa-gallery__link { display: block; position: relative; overflow: hidden; color: #ffffff; }
.mfa-gallery__frame { position: relative; height: 0; overflow: hidden; }
.mfa-gallery__img {
	position: absolute;
	top: 0; left: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	transform: scale(1);
	transition: transform .35s ease-in-out;
	backface-visibility: hidden;
}
.mfa-gallery__link:hover .mfa-gallery__img,
.mfa-gallery__link:focus-visible .mfa-gallery__img { transform: scale(1.05); }
.mfa-gallery__shade {
	position: absolute;
	inset: 0;
	opacity: .5;
	background: linear-gradient(to top, rgba(0, 0, 0, .8) 0, transparent 40%);
	transition: opacity .35s ease-in-out;
}
.mfa-gallery__link:hover .mfa-gallery__shade { opacity: 1; }
.mfa-gallery__caption {
	position: absolute;
	bottom: 0;
	left: 0;
	z-index: 2;
	padding: 10px;
	color: #ffffff;
}

/* =========================================================================
   9. Buttons
   ========================================================================= */
.mfa-button--left { text-align: left; }
.mfa-button--center { text-align: center; }
.mfa-button--right { text-align: right; }
.mfa-btn {
	display: inline-block;
	cursor: pointer;
	text-align: center;
	text-decoration: none;
}
.mfa-btn--sky, .mfa-btn--sea {
	padding: 1em 2em;
	font-size: 16px;
	line-height: 1em;
	color: #ffffff;
	border-radius: .25em;
	text-shadow: 0 1px 0 rgba(0, 0, 0, .05);
	transition: background-color .2s, border-color .2s;
}
.mfa-btn--sky { background: var(--mfa-btn-sky); border: 1px solid var(--mfa-btn-sky); }
.mfa-btn--sky:hover { background: var(--mfa-btn-sky-hi); border-color: var(--mfa-btn-sky-hi); color: #ffffff; }
.mfa-btn--sea { background: var(--mfa-btn-sea); border: 1px solid var(--mfa-btn-sea); }
.mfa-btn--sea:hover { background: var(--mfa-btn-sea-hi); border-color: var(--mfa-btn-sea-hi); color: #ffffff; }
.mfa-btn--primary {
	padding: 8px 16px;
	line-height: 24px;
	font-weight: 700;
	color: #ffffff;
	background: var(--mfa-link);
	border: 0;
	border-radius: 0;
	text-shadow: 0 -1px 0 rgba(0, 0, 0, .1);
	box-shadow: inset 0 0 0 0 transparent;
	transition: box-shadow .2s ease-in-out;
}
.mfa-btn--primary:hover,
.mfa-btn--primary:focus-visible { box-shadow: inset 0 -4px 0 0 rgba(0, 0, 0, .2); color: #ffffff; }

/* =========================================================================
   10. Accordion — the painting notes
   ========================================================================= */
.mfa-accordion__item {
	border: 2px solid #dddddd;
	padding: 10px;
	margin-bottom: 4px;
}
.mfa-accordion__heading {
	margin: 0;
	font-size: 18px;
	line-height: 24px;
	letter-spacing: 1.2px;
	font-weight: 400;
	color: var(--mfa-ink-soft);
}
.mfa-accordion__toggle {
	position: relative;
	display: block;
	width: 100%;
	margin: 0;
	padding: 0 0 0 15px;
	background: none;
	border: 0;
	font: inherit;
	letter-spacing: inherit;
	color: inherit;
	text-align: left;
	cursor: pointer;
}
.mfa-accordion__title { display: inline-block; }
.mfa-accordion__title::after {
	content: "";
	display: block;
	width: 0;
	height: 2px;
	background: var(--mfa-link);
	transition: width .5s ease-in-out;
}
.mfa-accordion__toggle[aria-expanded="true"] .mfa-accordion__title::after { width: 100%; }
.mfa-accordion__icon {
	position: absolute;
	left: 0;
	top: 50%;
	width: 10px;
	height: 10px;
	margin-top: -6px;
}
.mfa-accordion__icon::before,
.mfa-accordion__icon::after {
	content: "";
	position: absolute;
	background: currentColor;
}
.mfa-accordion__icon::before { left: 0; right: 0; top: 4px; height: 2px; }
.mfa-accordion__icon::after { top: 0; bottom: 0; left: 4px; width: 2px; }
.mfa-accordion__toggle[aria-expanded="true"] .mfa-accordion__icon::after { display: none; }
.mfa-accordion__panel { padding-top: 15px; }
.mfa-accordion__panel .mfa-prose p:last-child { margin-bottom: 10px; }

/* =========================================================================
   11. Columns
   -------------------------------------------------------------------------
   Widths add up to 100%; each column gives up its share of the 30px gutters,
   exactly as the page builder's cells did, so a 10/80/10 row puts its
   content where the old one was to the pixel.
   ========================================================================= */
.mfa-cols {
	display: flex;
	align-items: flex-start;
	gap: var(--mfa-gutter);
}
.mfa-col {
	flex: 0 0 calc(var(--mfa-cw, 1) * 100% - (1 - var(--mfa-cw, 1)) * var(--mfa-gutter));
	min-width: 0;
}
.mfa-item + .mfa-item { margin-top: 30px; }
@media (max-width: 780px) {
	.mfa-cols { display: block; }
	.mfa-col--empty { display: none; }
	.mfa-col:not(.mfa-col--empty) ~ .mfa-col:not(.mfa-col--empty) { margin-top: 30px; }
}

/* =========================================================================
   12. Forms (Ninja Forms), search, video
   ========================================================================= */
.mfa-search { display: flex; max-width: 300px; margin: 0 auto; }
.mfa-search label { flex: 1 1 auto; }
.mfa-search__field {
	width: 100%;
	height: 40px;
	padding: 6px 12px;
	font: inherit;
	color: var(--mfa-ink);
	border: 1px solid #8c8c8c;
	border-right: 0;
	background: #ffffff;
}
.mfa-search__submit {
	flex: 0 0 auto;
	width: 44px;
	height: 40px;
	padding: 0;
	border: 1px solid #8c8c8c;
	background: transparent;
	color: var(--mfa-ink);
	cursor: pointer;
}

.mfa-embed { margin: 0 0 24px; }
.mfa-embed__frame { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; }
.mfa-embed__frame iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; }
.mfa-embed__transcript { margin-top: 15px; text-align: left; }
.mfa-embed__transcript summary { cursor: pointer; color: var(--mfa-link); }

/* =========================================================================
   13. Not found, plain templates
   ========================================================================= */
.mfa-page-pad { padding-top: 30px; padding-bottom: 30px; }
.mfa-404 { text-align: center; }
.mfa-404__title { font-size: 28px; line-height: 40px; color: var(--mfa-ink); margin: 10px 0 2%; }
.mfa-404 p { margin-bottom: 24px; }

/* =========================================================================
   14. Footer, back to top
   ========================================================================= */
.mfa-footer { background: var(--mfa-footer); color: #eeeeee; padding-top: 30px; font-size: 14px; }
.mfa-footer a { color: #f2f2f2; }
.mfa-footer a:hover { color: var(--mfa-link); }
.mfa-footer__base { margin-top: 15px; background: rgba(0, 0, 0, .1); }
.mfa-footer__credit { margin: 0; padding: 10px 0; font-size: 11px; line-height: 24px; text-align: center; }

.mfa-totop {
	position: fixed;
	right: 20px;
	bottom: 30px;
	z-index: 1000;
	width: 42px;
	height: 42px;
	border: 2px solid rgba(0, 0, 0, .4);
	color: rgba(0, 0, 0, .4);
	opacity: 0;
	visibility: hidden;
	transition: opacity .2s ease-in-out, visibility .2s, color .2s, border-color .2s;
}
.mfa-totop.is-visible { opacity: 1; visibility: visible; }
.mfa-totop:hover,
.mfa-totop:focus-visible { border-color: rgba(0, 0, 0, .7); color: rgba(0, 0, 0, .7); }
.mfa-totop::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 12px;
	height: 12px;
	margin: -4px 0 0 -6px;
	border-style: solid;
	border-width: 0 0 4px 4px;
	transform: rotate(135deg);
}

/* =========================================================================
   15. Lightbox (assets/site.js)
   ========================================================================= */
.mfa-lightbox {
	position: fixed;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	max-height: none;
	margin: 0;
	padding: 40px 60px;
	border: 0;
	background: rgba(11, 11, 11, .9);
	color: #ffffff;
}
.mfa-lightbox::backdrop { background: transparent; }
.mfa-lightbox[open] { display: flex; align-items: center; justify-content: center; }
.mfa-lightbox__figure { margin: 0; text-align: center; max-width: 100%; max-height: 100%; }
.mfa-lightbox__img { max-width: 100%; max-height: calc(100vh - 120px); width: auto; height: auto; box-shadow: 0 0 8px rgba(0, 0, 0, .6); }
.mfa-lightbox__caption { margin-top: 10px; font-size: 14px; line-height: 20px; color: #f3f3f3; }
.mfa-lightbox__btn {
	position: absolute;
	min-width: 44px;
	min-height: 44px;
	background: none;
	border: 0;
	color: #ffffff;
	font-size: 36px;
	line-height: 1;
	cursor: pointer;
	opacity: .75;
}
.mfa-lightbox__btn:hover,
.mfa-lightbox__btn:focus-visible { opacity: 1; outline-color: #ffffff; }
.mfa-lightbox__close { top: 10px; right: 10px; }
.mfa-lightbox__prev { left: 10px; top: 50%; margin-top: -22px; }
.mfa-lightbox__next { right: 10px; top: 50%; margin-top: -22px; }
.mfa-lightbox__btn[hidden] { display: none; }
@media (max-width: 600px) { .mfa-lightbox { padding: 50px 10px; } }

/* =========================================================================
   16. Editor canvas
   ========================================================================= */
.editor-styles-wrapper .mfa-totop { display: none; }