/* ==========================================================================
   MRFC Foundation — brand layer over Wilmer
   --------------------------------------------------------------------------
   Loaded after Wilmer's style_dynamic.css so it wins the cascade. Everything
   Wilmer's Theme Options can already recolour (first_color, second_color,
   typography) is set there by inc/class-theme-options.php and is NOT repeated
   here — this file only covers what the options panel cannot reach:

     1. Wilmer's hard-coded Metro Showcase colours (#f6f6f6 sweep, #09316f
        pattern) baked into the Wilmer Core stylesheet.
     2. Metro tile behaviour on MRFC content (readable text tiles, sensible
        padding at every breakpoint).
     3. The MRFC text logo lockup and top bar.
     4. Form and button treatments for the enquiry / donate flows.
   ========================================================================== */

:root {
	--mrfc-gold:        #c5a046;
	--mrfc-gold-deep:   #8a6e1f;
	--mrfc-gold-soft:   #e9c264;
	--mrfc-onyx:        #14130f;
	--mrfc-onyx-soft:   #24221b;
	--mrfc-ink:         #1f1d17;
	--mrfc-cream:       #f4f1e8;
	--mrfc-mist:        #ece7d8;
	--mrfc-font-display: "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--mrfc-font-body:    "Work Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* --------------------------------------------------------------------------
   1. Metro grid — Wilmer's hard-coded demo colours
   -------------------------------------------------------------------------- */

/* The wipe that uncovers a standard (text) tile as it scrolls into view.
   Wilmer ships #f6f6f6; MRFC uses cream so the reveal reads as brand. */
.mkdf-masonry-gallery-holder .mkdf-mg-item.mkdf-mg-standard:not(.mkdf-masonry-size-large-width):before {
	background-color: var(--mrfc-cream);
}

/* The animated pattern that sits behind an image tile until the photograph
   fades in. Wilmer ships navy #09316f; MRFC uses onyx. */
.mkdf-masonry-gallery-holder .mkdf-mg-item.mkdf-mg-image:not(:nth-of-type(2)) .mkdf-mg-content:after {
	background-color: var(--mrfc-onyx);
}

/* --------------------------------------------------------------------------
   2. Metro tiles — MRFC content
   -------------------------------------------------------------------------- */

.mkdf-masonry-gallery-holder .mkdf-mg-item-content {
	box-sizing: border-box;
}

/* A tile whose background is onyx or gold must carry light text throughout,
   including copy dropped in from vc_column_text and list markup. */
.mrfc-tile-dark .mkdf-mg-item-content,
.mrfc-tile-dark .mkdf-mg-item-content h1,
.mrfc-tile-dark .mkdf-mg-item-content h2,
.mrfc-tile-dark .mkdf-mg-item-content h3,
.mrfc-tile-dark .mkdf-mg-item-content h4,
.mrfc-tile-dark .mkdf-mg-item-content h5,
.mrfc-tile-dark .mkdf-mg-item-content h6,
.mrfc-tile-dark .mkdf-mg-item-content p,
.mrfc-tile-dark .mkdf-mg-item-content li {
	color: #fff;
}

.mrfc-tile-dark .mkdf-mg-item-content .mkdf-st-intro-title,
.mrfc-tile-dark .mkdf-mg-item-content .mkdf-iwt-title-text {
	color: var(--mrfc-gold-soft);
}

/* The same for builder rows and columns marked dark — the young-people
   column on Contact Us, the Digital Literacy band on Training. Without this
   their text keeps Wilmer's default grey (#565969), which on onyx is well
   below readable contrast. */
.vc_row.mrfc-tile-dark :is(p, li, h1, h2, h3, h4, h5, h6),
.vc_row_inner.mrfc-tile-dark :is(p, li, h1, h2, h3, h4, h5, h6),
.wpb_column.mrfc-tile-dark :is(p, li, h1, h2, h3, h4, h5, h6) {
	color: #fff;
}

/* Gold tiles take onyx text — gold on white fails contrast, onyx on gold
   clears AA at body size. */
.mrfc-tile-gold .mkdf-mg-item-content,
.mrfc-tile-gold .mkdf-mg-item-content h1,
.mrfc-tile-gold .mkdf-mg-item-content h2,
.mrfc-tile-gold .mkdf-mg-item-content h3,
.mrfc-tile-gold .mkdf-mg-item-content h4,
.mrfc-tile-gold .mkdf-mg-item-content h5,
.mrfc-tile-gold .mkdf-mg-item-content h6,
.mrfc-tile-gold .mkdf-mg-item-content p,
.mrfc-tile-gold .mkdf-mg-item-content li,
.mrfc-tile-gold .mkdf-mg-item-content .mkdf-st-intro-title {
	color: var(--mrfc-onyx);
}

/* --------------------------------------------------------------------------
   2a. Metro tiles — text that fits its tile at every width
   --------------------------------------------------------------------------
   Wilmer fixes every tile's height from the grid's column width — a small
   tile is a square — and centres the text in it. Whatever does not fit is
   either cut off (small tiles hide their overflow) or slides under the next
   tile (wide tiles). The review found both: the Mission text cut short, and
   only half of the newsletter button visible.

   Wilmer's default heading sizes (60px h2, 40px h3) are for full pages, not
   for a quarter of a screen, so type inside a tile is sized here from the
   tile itself. Each tile is a size container and everything in it is set in
   cqmin — one per cent of the tile's shorter side. A small tile and a wide
   tile of the same height get the same type size, and the whole tile scales
   together as the screen narrows, down to the one-column phone layout.

   Where container units are not supported (browsers older than 2023) each
   declaration falls back to the fixed size before it. */

.mkdf-masonry-gallery-holder .mkdf-mg-item {
	container-type: size;
}

.mkdf-masonry-gallery-holder .mkdf-mg-item .mkdf-mg-item-content,
.mkdf-masonry-gallery-holder .mkdf-mg-item .mkdf-mg-item-content.mkdf-mg-with-custom-padding {
	padding: 28px 32px !important;
	padding: clamp(16px, 8cqmin, 44px) clamp(20px, 9cqmin, 48px) !important;
}

/* Wide tiles have room at the sides that small ones do not. */
.mkdf-masonry-gallery-holder .mkdf-mg-item.mkdf-masonry-size-large-width .mkdf-mg-item-content,
.mkdf-masonry-gallery-holder .mkdf-mg-item.mkdf-masonry-size-large-width .mkdf-mg-item-content.mkdf-mg-with-custom-padding {
	padding-inline: 48px !important;
	padding-inline: clamp(20px, 7cqw, 110px) !important;
}

/* Eyebrows: "Vision Statement", "Track One", "Newsletter". */
.mkdf-masonry-gallery-holder .mkdf-mg-item-content .mkdf-st-intro-title,
.mkdf-masonry-gallery-holder .mkdf-mg-item-content .mkdf-iwt-caption {
	font-size: 12px;
	font-size: clamp(11px, 3.4cqmin, 14px);
	line-height: 1.4;
	letter-spacing: .14em;
	margin: 0 0 .5em;
}

/* Statement headings: "Our Vision", "Our Mission", the Donate and
   newsletter headlines. */
.mkdf-masonry-gallery-holder .mkdf-mg-item-content .mkdf-st-title {
	font-size: 28px;
	font-size: clamp(19px, 8cqmin, 40px);
	line-height: 1.12;
	letter-spacing: -.01em;
}

/* Short tiles: "Employability", "The Team", "Community". */
.mkdf-masonry-gallery-holder .mkdf-mg-item-content .mkdf-iwt-title {
	font-size: 20px;
	font-size: clamp(16px, 6.4cqmin, 26px);
	line-height: 1.2;
}

.mkdf-masonry-gallery-holder .mkdf-mg-item-content .mkdf-st-text,
.mkdf-masonry-gallery-holder .mkdf-mg-item-content .mkdf-iwt-text,
.mkdf-masonry-gallery-holder .mkdf-mg-item-content p {
	font-size: 15px;
	font-size: clamp(13px, 4.3cqmin, 17px);
	line-height: 1.5;
}

.mkdf-masonry-gallery-holder .mkdf-mg-item-content .mkdf-st-text {
	margin-top: .7em;
}

/* Builder spacers inside a tile were sized for a full-width page. */
.mkdf-masonry-gallery-holder .mkdf-mg-item-content .vc_empty_space {
	height: 14px !important;
	height: clamp(8px, 4cqmin, 26px) !important;
}

.mkdf-masonry-gallery-holder .mkdf-mg-item-content .mkdf-btn {
	font-size: 13px;
	font-size: clamp(11px, 3.6cqmin, 14px);
	padding: .95em 1.9em;
}

/* The newsletter form. Email address and Subscribe share a line, with the
   consent box beneath — three stacked rows were what pushed the button out
   of the tile. */
.mkdf-masonry-gallery-holder .mkdf-mg-item-content .wpcf7-form {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	column-gap: 10px;
	align-items: center;
}

.mkdf-masonry-gallery-holder .mkdf-mg-item-content .wpcf7-form > * {
	grid-column: 1 / -1;
}

.mkdf-masonry-gallery-holder .mkdf-mg-item-content .wpcf7-form > p {
	margin: 0 0 .6em;
}

.mkdf-masonry-gallery-holder .mkdf-mg-item-content .wpcf7-form > p:has(input[type="email"]) {
	grid-column: 1;
	grid-row: 1;
}

.mkdf-masonry-gallery-holder .mkdf-mg-item-content .wpcf7-form > p:has(.wpcf7-submit) {
	grid-column: 2;
	grid-row: 1;
}

.mkdf-masonry-gallery-holder .mkdf-mg-item-content .wpcf7-form input[type="email"],
.mkdf-masonry-gallery-holder .mkdf-mg-item-content .wpcf7-form .wpcf7-submit {
	height: 46px;
	height: clamp(38px, 12cqmin, 50px);
	margin: 0;
	font-size: 15px;
	font-size: clamp(13px, 4.2cqmin, 16px);
	box-sizing: border-box;
}

.mkdf-masonry-gallery-holder .mkdf-mg-item-content .wpcf7-form input[type="email"] {
	width: 100%;
	padding: 0 14px;
}

.mkdf-masonry-gallery-holder .mkdf-mg-item-content .wpcf7-form .wpcf7-submit {
	padding: 0 1.4em;
	white-space: nowrap;
}

.mkdf-masonry-gallery-holder .mkdf-mg-item-content .wpcf7-form .wpcf7-list-item-label {
	font-size: 13px;
	font-size: clamp(12px, 3.6cqmin, 14px);
	line-height: 1.4;
}

.mkdf-masonry-gallery-holder .mkdf-mg-item-content .wpcf7-response-output {
	margin: .4em 0 0 !important;
	padding: .5em .8em !important;
	font-size: 13px;
}

/* On an onyx tile the inputs must read as inputs, not as holes. Tiles carry
   their colour as an inline style, which is what this matches. */
.mkdf-masonry-gallery-holder .mkdf-mg-item-content[style*="#14130f"] .wpcf7-form input[type="email"] {
	background-color: rgba(255, 255, 255, .1);
	border: 1px solid rgba(255, 255, 255, .35);
	color: #fff;
}

/* Wilmer's form style 2 sets the hint text in navy, spaced capitals: navy
   is unreadable on onyx, and the capitals do not fit a narrow field. Its
   rule is more specific than a plain override, hence !important. */
.mkdf-masonry-gallery-holder .mkdf-mg-item-content .wpcf7-form input[type="email"],
.mkdf-masonry-gallery-holder .mkdf-mg-item-content .wpcf7-form input[type="email"]::placeholder {
	text-transform: none !important;
	letter-spacing: normal !important;
}

.mkdf-masonry-gallery-holder .mkdf-mg-item-content[style*="#14130f"] .wpcf7-form input[type="email"]::placeholder {
	color: rgba(255, 255, 255, .72) !important;
	opacity: 1;
}

.mkdf-masonry-gallery-holder .mkdf-mg-item-content[style*="#14130f"] .wpcf7-list-item-label {
	color: #fff;
}

/* Still grows with the screen, but never so large that it dominates the
   one-column phone layout, where every tile is a full-width square. */
@media only screen and (max-width: 680px) {
	.mkdf-masonry-gallery-holder .mkdf-mg-item-content .mkdf-st-title {
		font-size: clamp(22px, 7cqmin, 32px);
	}
}

/* --------------------------------------------------------------------------
   3. Header — MRFC lockup and top bar
   -------------------------------------------------------------------------- */

/* Metro Showcase uses a text logo in a solid block. Wilmer's demo paints it
   orange; MRFC paints it gold with onyx type. */
.mkdf-logo-wrapper.mkdf-text-logo-type a,
.mkdf-light-header .mkdf-page-header > div:not(.fixed):not(.mkdf-sticky-header) .mkdf-logo-wrapper.mkdf-text-logo-type a {
	background-color: var(--mrfc-gold);
	color: var(--mrfc-onyx);
	font-family: var(--mrfc-font-display);
	font-weight: 800;
	letter-spacing: .02em;
}

.mkdf-top-bar {
	font-family: var(--mrfc-font-body);
}

/* The Donate call to action must stay legible on the onyx menu bar. */
.mkdf-main-menu .mrfc-nav-donate > a,
.mkdf-mobile-nav .mrfc-nav-donate > a {
	color: var(--mrfc-gold-soft) !important;
}

/* --------------------------------------------------------------------------
   4. Buttons and forms
   -------------------------------------------------------------------------- */

.mkdf-btn.mkdf-btn-solid {
	font-family: var(--mrfc-font-display);
	font-weight: 700;
	letter-spacing: .06em;
}

/* Contact Form 7, as embedded in the Contact Us page and the newsletter tile. */
.wpcf7-form .wpcf7-form-control:not([type="submit"]):not([type="checkbox"]):not([type="radio"]) {
	width: 100%;
	box-sizing: border-box;
	font-family: var(--mrfc-font-body);
}

.wpcf7-form .wpcf7-list-item {
	margin: 0 1.25em .35em 0;
}

/* Inside a dark tile the inputs need to read as inputs, not as holes. */
.mrfc-tile-dark .wpcf7-form .wpcf7-form-control:not([type="submit"]) {
	background-color: rgba(255, 255, 255, .08);
	border: 1px solid rgba(255, 255, 255, .28);
	color: #fff;
}

.mrfc-tile-dark .wpcf7-form .wpcf7-form-control::placeholder {
	color: rgba(255, 255, 255, .62);
}

/* --------------------------------------------------------------------------
   5. Employability infographic (Training & Employability)
   -------------------------------------------------------------------------- */

/* Each skill is a white card on the cream band. The row is in WPBakery's
   equal-height flex mode, so the column stretches; these rules pass that
   height down to the card itself, which is what makes the gold badges line up
   across a row when one description wraps and its neighbour does not.

   The gap between rows lives here as column padding rather than as a spacer
   element inside the column. A spacer would be inside the height the card
   stretches to fill, so consecutive rows' cards would touch and the grid
   would read as three solid white columns rather than nine cards. */
.mrfc-skill-card > .vc_column-inner {
	padding-bottom: 30px;
}

.mrfc-skill-card > .vc_column-inner,
.mrfc-skill-card > .vc_column-inner > .wpb_wrapper {
	height: 100%;
}

.mrfc-skill-card .mkdf-iwt {
	box-sizing: border-box;
	height: 100%;
	padding: 44px 30px 36px;
	background-color: #fff;
	border-radius: 2px;
	transition: transform .25s ease, box-shadow .25s ease;
}

.mrfc-skill-card .mkdf-iwt:hover {
	transform: translateY(-4px);
	box-shadow: 0 14px 34px rgba(20, 19, 15, .11);
}

/* The badge. Wilmer sizes the circle from shape_size, so this only fixes the
   things the shortcode cannot express. */
.mrfc-skill-card .mkdf-iwt-icon .mkdf-icon-shortcode.mkdf-circle {
	box-shadow: 0 6px 18px rgba(197, 160, 70, .34);
}

.mrfc-skill-card .mkdf-iwt-title {
	letter-spacing: -.01em;
}

.mrfc-skill-card .mkdf-iwt-text {
	max-width: 30ch;
	margin-inline: auto;
}

/* A card whose description has not arrived yet keeps the row's rhythm rather
   than collapsing to a short stub beside its full-height neighbours. */
.mrfc-skill-card .mkdf-iwt:not(:has(.mkdf-iwt-text)) .mkdf-iwt-title {
	margin-bottom: 22px;
}

/* WPBakery's 1/3 column is 33% at every width from 768px up, which is too
   tight for these titles on a tablet. Two across there, one on a phone. */
@media only screen and (min-width: 768px) and (max-width: 1024px) {
	.mrfc-skills-grid .mrfc-skill-card {
		width: 50%;
	}
}

@media only screen and (max-width: 767px) {
	.mrfc-skills-grid .mrfc-skill-card {
		width: 100%;
	}

	.mrfc-skill-card .mkdf-iwt {
		padding: 36px 24px 30px;
	}
}

/* A second opening paragraph (Training & Employability) sits directly under
   the section title's own paragraph and must read as its continuation. */
.mrfc-intro-follow {
	margin: 0 !important;
}

.mrfc-intro-follow p {
	margin: 14px 0 0;
}

/* --------------------------------------------------------------------------
   6. Contact Us — reasons to get in touch, and the enquiry form
   -------------------------------------------------------------------------- */

/* The reasons lists: a gold check badge instead of a bullet point. The page
   gives each reason its own list with a spacer paragraph between, so the
   rules work per item and never depend on how many items a list holds. */
ul.mrfc-check-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

ul.mrfc-check-list > li {
	position: relative;
	margin: 0 0 .9em;
	padding-left: 44px;
	min-height: 28px;
	list-style: none;
}

ul.mrfc-check-list > li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .1em;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--mrfc-gold) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%2314130f' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='M5 12.5l4.2 4.2L19 7'/%3E%3C/svg%3E") center / 15px no-repeat;
	box-shadow: 0 3px 10px rgba(197, 160, 70, .28);
}

/* The spacer paragraphs between single-item lists were adding a full blank
   line on top of the item spacing above. */
ul.mrfc-check-list + p:empty,
.mrfc-reasons ul.mrfc-check-list + p {
	margin: 0;
	line-height: .4;
}

/* The enquiry form, boxed: one white card, one type scale. */
.mrfc-enquiry .wpcf7 {
	max-width: 820px;
	margin: 0 auto;
	padding: 40px 44px;
	padding: clamp(24px, 4vw, 48px);
	background: #fff;
	border: 1px solid #e4dcc6;
	border-top: 4px solid var(--mrfc-gold);
	border-radius: 2px;
	box-shadow: 0 18px 44px rgba(20, 19, 15, .08);
	box-sizing: border-box;
}

.mrfc-enquiry .wpcf7-form p,
.mrfc-enquiry .wpcf7-form .mrfc-form-row {
	margin: 0 0 20px;
}

/* Every label the same size and weight, and the field on its own line. */
.mrfc-enquiry .wpcf7-form label {
	display: block;
	font-family: var(--mrfc-font-body);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--mrfc-onyx);
}

.mrfc-enquiry .wpcf7-form label > .wpcf7-form-control-wrap {
	display: block;
	margin-top: 8px;
}

.mrfc-enquiry .wpcf7-form .mrfc-required {
	color: var(--mrfc-gold-deep);
	margin-left: 2px;
}

/* Every field the same size. 16px also stops phones zooming in on focus. */
.mrfc-enquiry .wpcf7-form .wpcf7-form-control.wpcf7-text,
.mrfc-enquiry .wpcf7-form .wpcf7-form-control.wpcf7-email,
.mrfc-enquiry .wpcf7-form .wpcf7-form-control.wpcf7-tel,
.mrfc-enquiry .wpcf7-form .wpcf7-form-control.wpcf7-select,
.mrfc-enquiry .wpcf7-form .wpcf7-form-control.wpcf7-textarea {
	width: 100%;
	box-sizing: border-box;
	margin: 0;
	padding: 12px 14px;
	font-family: var(--mrfc-font-body);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: normal;
	text-transform: none;
	color: var(--mrfc-ink);
	background-color: #fbfaf6;
	border: 1px solid #cfc6ad;
	border-radius: 2px;
}

.mrfc-enquiry .wpcf7-form .wpcf7-form-control.wpcf7-text,
.mrfc-enquiry .wpcf7-form .wpcf7-form-control.wpcf7-email,
.mrfc-enquiry .wpcf7-form .wpcf7-form-control.wpcf7-tel,
.mrfc-enquiry .wpcf7-form .wpcf7-form-control.wpcf7-select {
	height: 50px;
}

.mrfc-enquiry .wpcf7-form .wpcf7-form-control::placeholder {
	color: #8b8574;
	text-transform: none;
	letter-spacing: normal;
	opacity: 1;
}

.mrfc-enquiry .wpcf7-form .wpcf7-form-control:focus {
	border-color: var(--mrfc-gold);
	background-color: #fff;
	outline: 2px solid rgba(197, 160, 70, .35);
	outline-offset: 0;
}

/* Name / email / phone / organisation: two by two on a wide screen. */
.mrfc-enquiry .mrfc-form-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 24px;
}

@media only screen and (max-width: 680px) {
	.mrfc-enquiry .mrfc-form-grid {
		grid-template-columns: 1fr;
	}
}

/* Radio buttons and the consent box: same body size as everything else. */
.mrfc-enquiry .wpcf7-form .wpcf7-list-item {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 8px 24px 0 0;
}

.mrfc-enquiry .wpcf7-form .wpcf7-list-item-label,
.mrfc-enquiry .wpcf7-form .wpcf7-acceptance {
	font-family: var(--mrfc-font-body);
	font-size: 15px;
	font-weight: 400;
	line-height: 1.5;
	color: var(--mrfc-ink);
}

.mrfc-enquiry .wpcf7-form .wpcf7-acceptance .wpcf7-list-item {
	align-items: flex-start;
	margin-right: 0;
}

.mrfc-enquiry .wpcf7-form input[type="radio"],
.mrfc-enquiry .wpcf7-form input[type="checkbox"] {
	width: 18px;
	height: 18px;
	margin: 3px 0 0;
	accent-color: var(--mrfc-gold-deep);
	flex: none;
}

.mrfc-enquiry .wpcf7-form .wpcf7-submit {
	min-width: 220px;
}

@media only screen and (max-width: 680px) {
	.mrfc-enquiry .wpcf7-form .wpcf7-submit {
		width: 100%;
	}
}

/* The message a visitor sees after pressing Send: an unmistakable box with
   a coloured edge that says whether it worked, rather than a thin outline in
   the theme's default colours. */
.mrfc-enquiry .wpcf7 form .wpcf7-response-output {
	margin: 20px 0 0;
	padding: 14px 18px;
	font-family: var(--mrfc-font-body);
	font-size: 15px;
	line-height: 1.5;
	color: var(--mrfc-ink);
	background: #fbfaf6;
	border: 1px solid #e4dcc6;
	border-left: 4px solid var(--mrfc-gold);
	border-radius: 2px;
}

.mrfc-enquiry .wpcf7 form.sent .wpcf7-response-output {
	border-left-color: #1a7f37;
	background: #f1f8f3;
}

.mrfc-enquiry .wpcf7 form.invalid .wpcf7-response-output,
.mrfc-enquiry .wpcf7 form.unaccepted .wpcf7-response-output,
.mrfc-enquiry .wpcf7 form.failed .wpcf7-response-output,
.mrfc-enquiry .wpcf7 form.spam .wpcf7-response-output,
.mrfc-enquiry .wpcf7 form.aborted .wpcf7-response-output {
	border-left-color: #b3261e;
	background: #fcf3f2;
}

.mrfc-enquiry .wpcf7-not-valid-tip {
	margin-top: 6px;
	font-size: 14px;
	color: #b3261e;
}

/* --------------------------------------------------------------------------
   6a. Contact details — address, telephone, email, social
   -------------------------------------------------------------------------- */

.mrfc-contact-details .mrfc-contact-card .mkdf-iwt,
.mrfc-contact-details .wpb_text_column {
	text-align: center;
}

.mrfc-contact-details .mrfc-contact-card > .vc_column-inner {
	padding: 10px 24px !important;
}

.mrfc-contact-details .wpb_text_column {
	margin-bottom: 0;
}

.mrfc-contact-list {
	list-style: none;
	margin: 10px 0 0;
	padding: 0;
}

.mrfc-contact-list li {
	margin: 0 0 10px;
	line-height: 1.4;
}

/* The label sits above its number, so a long label never pushes the number
   off the line on a narrow screen. */
.mrfc-contact-label {
	display: block;
	font-family: var(--mrfc-font-body);
	font-size: 12px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--mrfc-gold-deep);
}

/* Numbers, the address and the email are links a visitor taps. A 17px line
   of text is not a tappable target on a phone, so each gets real height. */
.mrfc-contact-list a,
.mrfc-contact-address a {
	display: inline-block;
	font-family: var(--mrfc-font-body);
	font-size: 17px;
	font-weight: 500;
	color: var(--mrfc-onyx);
	min-height: 32px;
	padding: 4px 0;
	border-bottom: 1px solid transparent;
}

.mrfc-contact-list a:hover,
.mrfc-contact-address a:hover {
	color: var(--mrfc-gold-deep);
	border-bottom-color: var(--mrfc-gold);
}

.mrfc-contact-address {
	margin: 10px 0 0;
}

.mrfc-contact-address a {
	font-weight: 400;
	line-height: 1.6;
}

.mrfc-contact-subhead {
	margin: 22px 0 0;
	font-size: 15px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--mrfc-onyx);
}

.mrfc-contact-handle {
	display: block;
	font-family: var(--mrfc-font-display);
	font-size: 19px;
	font-weight: 700;
	color: var(--mrfc-onyx);
}

.mrfc-contact-social .mrfc-contact-label {
	margin-top: 2px;
	font-size: 13px;
	letter-spacing: 0;
	text-transform: none;
	color: var(--mrfc-ink);
}

@media only screen and (max-width: 767px) {
	.mrfc-contact-details .mrfc-contact-card > .vc_column-inner {
		padding: 26px 22px !important;
	}

	/* Separated, rather than run together as one long centred column. */
	.mrfc-contact-details .mrfc-contact-card + .mrfc-contact-card > .vc_column-inner {
		border-top: 1px solid rgba(20, 19, 15, .1);
	}

	.mrfc-contact-list a,
	.mrfc-contact-address a {
		min-height: 40px;
		padding: 7px 0;
	}
}

/* --------------------------------------------------------------------------
   6b. Footer
   --------------------------------------------------------------------------
   Four panels on a wide screen — the foundation, the address, how to call or
   write, and the social accounts — stacking on a phone. The background colours
   come from Theme Options; everything here is the type and spacing Wilmer has
   no setting for. */

.mkdf-page-footer .mkdf-widget-title,
.mkdf-page-footer .widget h4 {
	font-family: var(--mrfc-font-display);
	font-size: 15px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--mrfc-gold-soft);
	margin: 0 0 18px;
}

.mkdf-page-footer .widget p,
.mkdf-page-footer .widget li {
	font-family: var(--mrfc-font-body);
	font-size: 15px;
	line-height: 1.6;
	color: rgba(255, 255, 255, .78);
}

.mkdf-page-footer a {
	color: #fff;
}

.mkdf-page-footer a:hover {
	color: var(--mrfc-gold-soft);
}

.mrfc-footer-brand {
	font-family: var(--mrfc-font-display);
	font-size: 20px !important;
	font-weight: 800;
	line-height: 1.25 !important;
	color: #fff !important;
	margin: 0 0 6px;
}

.mrfc-footer-tagline {
	font-size: 13px !important;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--mrfc-gold-soft) !important;
	margin: 0 0 14px;
}

.mrfc-footer-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.mrfc-footer-list li {
	margin: 0 0 12px;
}

/* The label above its number, so a long label never pushes the number onto
   its own line in a narrow column. */
.mrfc-footer-label {
	display: block;
	font-size: 11px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .5);
}

.mkdf-page-footer .mrfc-footer-list a,
.mkdf-page-footer .mrfc-footer-address a {
	display: inline-block;
	font-size: 16px;
	font-weight: 500;
	/* A real tap target, not a 16px sliver. */
	min-height: 34px;
	padding: 4px 0;
}

.mrfc-footer-address a {
	font-weight: 400;
	line-height: 1.7;
}

/* The social marks: gold discs that invert on hover, each a 44px target. */
.mrfc-footer-social {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0 0 14px;
	padding: 0;
}

.mkdf-page-footer .mrfc-footer-social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .08);
	border: 1px solid rgba(255, 255, 255, .22);
	color: #fff;
	transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

.mkdf-page-footer .mrfc-footer-social a:hover,
.mkdf-page-footer .mrfc-footer-social a:focus-visible {
	background: var(--mrfc-gold);
	border-color: var(--mrfc-gold);
	color: var(--mrfc-onyx);
}

.mrfc-social-icon {
	width: 20px;
	height: 20px;
	display: block;
}

.mrfc-footer-handle {
	font-family: var(--mrfc-font-display);
	font-size: 16px !important;
	font-weight: 700;
	color: #fff !important;
	margin: 0;
}

.mrfc-footer-copyright,
.mrfc-footer-quick {
	font-size: 14px !important;
	margin: 0;
}

.mrfc-footer-quick {
	text-align: right;
}

.mrfc-footer-dot {
	margin: 0 10px;
	opacity: .5;
}

@media only screen and (max-width: 1024px) {
	/* Stacked panels need air between them, and the bottom bar reads better
	   centred once its two halves sit one above the other. */
	.mkdf-page-footer .mkdf-footer-top-holder .widget {
		margin-bottom: 34px;
	}

	.mrfc-footer-quick,
	.mrfc-footer-copyright {
		text-align: center;
	}

	.mrfc-footer-social {
		justify-content: flex-start;
	}
}

/* --------------------------------------------------------------------------
   7. Phones and tablets
   --------------------------------------------------------------------------
   Wilmer sizes headings once — 80px for h1, 60px for h2, 40px for h3 — and
   never changes them for a narrow screen, and its Theme Options have no
   separate mobile sizes. On a 390px phone that left the Donate headline 720px
   tall, taller than the screen itself, and every page opening with one word
   per line.

   Sizes step down at Wilmer's own breakpoints rather than scaling with the
   viewport, so they stay predictable and anything set later in Theme Options
   for desktop is untouched. Text inside the Home tiles is sized from the tile
   instead (section 2a) and those rules are more specific, so they still win. */

@media only screen and (max-width: 1024px) {
	h1, .mkdf-st-title { font-size: 54px; line-height: 1.08; }
	h2 { font-size: 40px; line-height: 1.12; }
	h3 { font-size: 30px; line-height: 1.2; }
	h4 { font-size: 24px; line-height: 1.25; }
	h5 { font-size: 19px; line-height: 1.35; }
}

@media only screen and (max-width: 680px) {
	h1, .mkdf-st-title { font-size: 38px; line-height: 1.1; }
	h2 { font-size: 30px; line-height: 1.15; }
	h3 { font-size: 25px; line-height: 1.25; }
	h4 { font-size: 21px; line-height: 1.3; }
	h5 { font-size: 18px; line-height: 1.4; }
}

@media only screen and (max-width: 480px) {
	h1, .mkdf-st-title { font-size: 32px; line-height: 1.12; }
	h2 { font-size: 26px; line-height: 1.18; }
	h3 { font-size: 22px; line-height: 1.28; }
	h4 { font-size: 19px; line-height: 1.3; }
}

/* Wilmer's h3 line-height is 0.75em — shorter than the type itself. On a wide
   screen these headings are one line and it passes unnoticed; wrapped on a
   phone the lines sit on top of each other. The sizes above restore a line
   height taller than the text at every width where wrapping is likely. */

/* A heading must never break in the middle of a word ("Empl / oyers" on the
   Contact page). Long words hyphenate properly or push the line instead. */
h1, h2, h3, h4, h5, h6,
.mkdf-st-title, .mkdf-iwt-title {
	word-break: normal;
	overflow-wrap: break-word;
	hyphens: auto;
}

@media only screen and (max-width: 767px) {
	/* Builder columns carry desktop padding — 48px a side on the Contact and
	   Training panels — which left 176px of a 390px screen for the words.
	   WPBakery writes that padding with !important, so this has to as well.
	   Only the theme's own rows are touched; rows built by hand keep theirs. */
	.mrfc-reasons > .wpb_column > .vc_column-inner,
	.mrfc-tracks > .wpb_column > .vc_column-inner,
	.mrfc-panels .vc_column-inner,
	.mrfc-employability > .wpb_column > .vc_column-inner,
	.mrfc-track-two > .wpb_column > .vc_column-inner,
	.mrfc-enquiry > .wpb_column > .vc_column-inner,
	.mrfc-tile-dark > .wpb_column > .vc_column-inner,
	.mrfc-tile-gold > .wpb_column > .vc_column-inner {
		padding: 44px 22px !important;
	}

	/* The Home hero, which is a row inside a row. */
	.mrfc-tile-dark > .vc_column_container > .vc_column-inner,
	.vc_row.vc_inner.mrfc-tile-dark .vc_column-inner {
		padding: 72px 22px !important;
	}

	/* Side-rail columns are empty spacers on a phone. */
	.mrfc-enquiry .vc_col-sm-2,
	.mrfc-track-two .vc_col-sm-2 {
		display: none;
	}

	/* The page title band was 615px of empty space above every page — most of
	   a phone screen to show one word. Wilmer's script writes that height onto
	   the two inner wrappers, not the outer one, so all three are released. */
	.mkdf-title,
	.mkdf-title-holder,
	.mkdf-page-title-holder,
	.mkdf-title-holder .mkdf-title-wrapper,
	.mkdf-title-holder .mkdf-title-inner {
		height: auto !important;
		min-height: 0 !important;
	}

	.mkdf-title-holder .mkdf-title-inner {
		padding-top: 44px !important;
		padding-bottom: 34px !important;
	}

	/* The page title has its own size from Theme Options — 40px text on a
	   38px line — which outranks the heading sizes above. */
	.mkdf-title-holder .mkdf-page-title {
		font-size: 30px !important;
		line-height: 1.2 !important;
	}

	/* Rows the builder padded for a wide screen. */
	.mrfc-reasons,
	.mrfc-employability,
	.mrfc-skills-grid,
	.mrfc-enquiry,
	.mrfc-track-two {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
}

/* Gallery photographs filled their own natural size — 300px, 225px, 224px —
   inside a 330px column, so they sat left with a gutter and no two rows lined
   up. The wrapper shrank to the image, so widening the image alone changed
   nothing: both have to fill the cell. */
.mkdf-image-gallery .mkdf-ig-image-inner {
	display: block;
	width: 100%;
}

.mkdf-image-gallery .mkdf-ig-image img,
.mkdf-image-gallery .mkdf-ig-image-inner img {
	display: block;
	width: 100%;
	height: auto;
}

/* The header on a phone: the logo ran the full width of the screen, and the
   menu button was a 20px target where 44px is the accepted minimum. */
@media only screen and (max-width: 1024px) {
	.mkdf-mobile-header .mkdf-mobile-logo-wrapper {
		padding: 0 14px;
		box-sizing: border-box;
	}

	.mkdf-mobile-header .mkdf-mobile-logo-wrapper img {
		width: auto;
		max-width: 100%;
		max-height: 46px;
	}

	.mkdf-mobile-header .mkdf-mobile-menu-opener > a,
	.mkdf-mobile-header .mkdf-mobile-menu-opener {
		display: flex;
		align-items: center;
		justify-content: center;
		min-width: 44px;
		min-height: 44px;
	}

	/* Menu items need a comfortable target too. */
	.mkdf-mobile-header .mkdf-mobile-nav a,
	.mkdf-mobile-header .mkdf-mobile-nav h6 {
		padding-top: 11px;
		padding-bottom: 11px;
	}
}

/* Nothing should be able to push the page sideways on a phone. */
@media only screen and (max-width: 767px) {
	body {
		overflow-x: hidden;
	}

	img,
	iframe,
	video,
	table {
		max-width: 100%;
	}
}

/* --------------------------------------------------------------------------
   8. Accessibility
   -------------------------------------------------------------------------- */

/* Wilmer removes the focus ring in several places. Put a visible one back —
   gold on dark, onyx on light — without disturbing mouse users. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
.mkdf-btn:focus-visible {
	outline: 2px solid var(--mrfc-gold);
	outline-offset: 2px;
}

.mrfc-tile-dark a:focus-visible,
.mrfc-tile-dark button:focus-visible {
	outline-color: var(--mrfc-gold-soft);
}

@media (prefers-reduced-motion: reduce) {
	.mkdf-masonry-gallery-holder .mkdf-mg-item.mkdf-mg-image:not(:nth-of-type(2)) .mkdf-mg-content:after {
		animation: none;
	}
}