/*
 * Header + full-screen menu (Marcia Fernandes).
 * Layout from the customer's Figma draft; colours from her brand guide (LogoMF.pdf, page 5):
 * main #50463E, secondary #AA9E94 and #9E5909.
 */

:root {
	--mf-brown: #50463e;
	/* Her main brown at about 72%, the same hue: the footer (operator, 2026-10-17: a darker brown). */
	--mf-brown-deep: #3a322d;
	--mf-stone: #aa9e94;
	--mf-amber: #9e5909;
	--mf-ivory: #f7f4f0;
	--mf-mist: #e6ddd4;
	--mf-menu-bg: #e3e2db;
	--mf-taupe: #7d7168;
	--mf-white: #fff;
	--mf-sans: 'Raleway', 'Helvetica Neue', Arial, sans-serif;
	/* Body text: the body font of her Figma draft, Raleway Regular (operator, 2026-10-02). */
	--mf-body: 'Raleway', 'Helvetica Neue', Arial, sans-serif;
	--mf-serif: 'Butler Ultra Light', 'Cormorant Garamond', Georgia, serif;
	--mf-italic: 'Bodoni Moda', 'Cormorant Garamond', Georgia, serif;
	--mf-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
	--mf-header-h: 96px;
	--mf-header-h-compact: 72px;
	--mf-gutter: clamp(20px, 3vw, 44px);
}

/* Skip link: hidden until focused. */
.mf-skip-link {
	position: absolute;
	top: -100px;
	left: 16px;
	z-index: 10001;
	padding: 12px 18px;
	background: var(--mf-ivory);
	color: var(--mf-brown);
	font: 500 12px/1 var(--mf-sans);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	text-decoration: none;
}

.mf-skip-link:focus {
	top: 16px;
}

#mf-content:focus {
	outline: none;
}

/* Header bar. Over the menu (its CLOSE stays in reach), the menu over everything on the page
   (2026-10-02: the Home testimonials' slider, its slides at 999, showed through the open menu); the
   language bar (998) stays under both and Elementor's photo lightbox (9999) over them. */
.mf-header {
	position: fixed;
	top: 0;
	right: 0;
	left: 0;
	z-index: 9991;
	background-color: var(--mf-ivory);
	color: var(--mf-brown);
	transition: background-color 0.35s var(--mf-ease), color 0.35s var(--mf-ease), box-shadow 0.35s var(--mf-ease);
}

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

.mf-header__bar {
	display: grid;
	grid-template-areas: "left brand right";
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	height: var(--mf-header-h);
	padding: 0 var(--mf-gutter);
	transition: height 0.35s var(--mf-ease);
}

.mf-header__left {
	grid-area: left;
	min-width: 0;
}

/* The logotype is the page H1 on home pages: neutralise heading styles from the kit/theme. */
.mf-header .mf-header__brand {
	grid-area: brand;
	margin: 0;
	padding: 0;
	color: inherit;
	font-size: 0;
	line-height: 0;
}

/* The tagline is an H6 on home pages: same neutralising. */
.mf-header .mf-header__tagline {
	margin: 0;
	color: inherit;
	font-family: var(--mf-sans);
	font-size: 12px;
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	white-space: nowrap;
}

.mf-header__logo {
	display: block;
	color: inherit;
	line-height: 0;
}

.mf-header__logo svg {
	display: block;
	width: clamp(168px, 14.5vw, 228px);
	height: auto;
	overflow: visible;
	transition: width 0.35s var(--mf-ease), opacity 0.3s ease;
}

/* The parent theme turns every hovered link her light stone (#E3E2DB), the open menu's own colour:
   the logo vanished there (operator, 2026-10-01) and nearly did on the ivory bar. It keeps its colour
   in every state and only fades a little. */
.mf-header .mf-header__logo:hover,
.mf-header .mf-header__logo:focus {
	color: inherit;
}

.mf-header__logo:hover svg {
	opacity: 0.7;
}

.mf-header__right {
	grid-area: right;
	display: flex;
	justify-content: flex-end;
}

.mf-header__toggle,
.mf-header__toggle:hover,
.mf-header__toggle:focus {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	margin: 0;
	padding: 12px 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	color: inherit;
	font: 400 12px/1 var(--mf-sans);
	letter-spacing: 0.2em;
	text-transform: uppercase;
	cursor: pointer;
}

.mf-header__logo:focus-visible,
.mf-header__toggle:focus-visible,
.mf-menu a:focus-visible {
	outline: 1px solid currentColor;
	outline-offset: 6px;
}

.mf-burger {
	position: relative;
	display: inline-block;
	width: 26px;
	height: 11px;
}

.mf-burger span {
	position: absolute;
	left: 0;
	width: 100%;
	height: 1px;
	background: currentColor;
	transform-origin: center;
	transition: transform 0.4s var(--mf-ease), opacity 0.25s linear, width 0.35s var(--mf-ease);
}

.mf-burger span:nth-child(1) { top: 0; }
.mf-burger span:nth-child(2) { top: 5px; }
.mf-burger span:nth-child(3) { top: 10px; }

.mf-header__toggle:hover .mf-burger span:nth-child(2) {
	width: 62%;
}

/* Over the first section: transparent, white text, a soft shade for legibility on bright photos. */
.mf-has-overlay-header .mf-header:not(.is-scrolled) {
	background-color: transparent;
	color: var(--mf-white);
}

.mf-has-overlay-header .mf-header:not(.is-scrolled)::before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	z-index: -1;
	height: 170%;
	background: linear-gradient(to bottom, rgba(38, 31, 26, 0.34), rgba(38, 31, 26, 0));
	pointer-events: none;
}

/* After scrolling: compact, ivory. */
.mf-header.is-scrolled {
	box-shadow: 0 1px 0 rgba(80, 70, 62, 0.1);
}

.mf-header.is-scrolled .mf-header__bar {
	height: var(--mf-header-h-compact);
}

.mf-header.is-scrolled .mf-header__logo svg {
	width: clamp(150px, 12vw, 188px);
}

/* Pages without a full-width opening image keep their content below the bar. */
.mf-has-solid-header #morgan-main-container {
	padding-top: var(--mf-header-h);
}

/* Full-screen menu: over all of the page, under the header bar (see .mf-header). */
.mf-menu {
	position: fixed;
	inset: 0;
	z-index: 9990;
	overflow-y: auto;
	/* Her light stone (the site's stone sections), brown text: softer than a brown panel. */
	background: var(--mf-menu-bg);
	color: var(--mf-brown);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.45s var(--mf-ease), visibility 0s linear 0.45s;
	overscroll-behavior: contain;
}

html.mf-menu-open {
	overflow: hidden;
}

html.mf-menu-open .mf-menu {
	opacity: 1;
	visibility: visible;
	transition: opacity 0.45s var(--mf-ease), visibility 0s;
}

/* Over the open (light) menu the logo, tagline and close icon turn brown, on every page: the
   header over a photo is white otherwise, and its rule is stronger than a plain one. */
html.mf-menu-open .mf-header,
html.mf-menu-open .mf-header.is-scrolled,
html.mf-menu-open .mf-has-overlay-header .mf-header:not(.is-scrolled) {
	background-color: transparent;
	box-shadow: none;
	color: var(--mf-brown);
}

html.mf-menu-open .mf-header::before {
	display: none;
}

html.mf-menu-open .mf-burger span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
html.mf-menu-open .mf-burger span:nth-child(2) { opacity: 0; }
html.mf-menu-open .mf-burger span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

.mf-menu__inner {
	box-sizing: border-box;
	display: grid;
	grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
	align-items: center;
	gap: clamp(32px, 6vw, 120px);
	min-height: 100%;
	padding: calc(var(--mf-header-h) + 4vh) clamp(20px, 7vw, 120px) 6vh;
}

.mf-menu__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.mf-menu__list li {
	margin: 0;
	overflow: hidden;
}

.mf-menu__list a {
	display: inline-flex;
	align-items: baseline;
	padding: 9px 0;
	color: inherit;
	text-decoration: none;
	transform: translateY(105%);
	transition: transform 0.75s var(--mf-ease), color 0.3s linear;
}

.mf-menu__label {
	font-family: var(--mf-serif);
	font-size: clamp(22px, 2.2vw, 30px);
	font-weight: 300;
	line-height: 1.3;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 0 1px;
	transition: background-size 0.5s var(--mf-ease);
}

.mf-menu__list a:hover .mf-menu__label,
.mf-menu__list a:focus-visible .mf-menu__label,
.mf-menu__list .current-menu-item > a .mf-menu__label {
	background-size: 100% 1px;
}

.mf-menu__list a:hover,
.mf-menu__list a:focus-visible,
.mf-menu__list .current-menu-item > a {
	color: var(--mf-amber);
}

html.mf-menu-open .mf-menu__list a {
	transform: translateY(0);
}

html.mf-menu-open .mf-menu__list li:nth-child(2) a { transition-delay: 0.05s, 0s; }
html.mf-menu-open .mf-menu__list li:nth-child(3) a { transition-delay: 0.1s, 0s; }
html.mf-menu-open .mf-menu__list li:nth-child(4) a { transition-delay: 0.15s, 0s; }
html.mf-menu-open .mf-menu__list li:nth-child(5) a { transition-delay: 0.2s, 0s; }
html.mf-menu-open .mf-menu__list li:nth-child(6) a { transition-delay: 0.25s, 0s; }
html.mf-menu-open .mf-menu__list li:nth-child(7) a { transition-delay: 0.3s, 0s; }

.mf-menu__aside {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 32px;
	text-align: center;
}

.mf-menu__emblem {
	line-height: 0;
}

.mf-menu__emblem svg {
	width: clamp(96px, 9vw, 136px);
	height: auto;
}

.mf-lang {
	display: flex;
	align-items: center;
	gap: 10px;
	font: 500 12px/1 var(--mf-sans);
	letter-spacing: 0.22em;
	text-transform: uppercase;
}

.mf-lang a {
	padding: 10px 6px;
	color: var(--mf-taupe);
	text-decoration: none;
	transition: color 0.3s linear;
}

.mf-lang a:hover,
.mf-lang a[aria-current="true"] {
	color: var(--mf-brown);
}

.mf-lang__sep {
	color: var(--mf-taupe);
}

.mf-menu__contact {
	margin: 0;
	padding: 0;
	list-style: none;
	font: 400 13px/2 var(--mf-sans);
	letter-spacing: 0.08em;
}

.mf-menu__contact a {
	color: var(--mf-brown);
	text-decoration: none;
}

.mf-menu__contact a:hover {
	color: var(--mf-amber);
}

/* Instagram before the footer, on every page (inc/mf-instagram.php): her handle, then five square
   photos in a row, 15px apart, as the theme demo's; two by two on phones (the fifth left out). Her
   live posts, once her account is connected, take the same grid (the demo's plugin's own markup,
   .zoom-instagram). A soft shade and the Instagram mark on hover, as in the demo. */
.mf-instagram {
	max-width: 1200px;
	margin: 0 auto;
	padding: clamp(56px, 6vw, 88px) var(--mf-gutter);
	text-align: center;
}

.mf-instagram__handle {
	margin: 0 0 18px;
	font-family: var(--mf-italic);
	font-size: 18px;
	font-style: italic;
	line-height: 1.4;
}

.mf-instagram__handle a {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 44px;
	color: var(--mf-brown);
	text-decoration: none;
	transition: color 0.3s ease;
}

.mf-instagram__handle a:hover,
.mf-instagram__handle a:focus-visible {
	color: var(--mf-amber);
}

.mf-instagram__handle a:focus-visible,
.mf-instagram__link:focus-visible {
	outline: 1px solid var(--mf-brown);
	outline-offset: 3px;
}

.mf-instagram__icon {
	width: 18px;
	height: 18px;
}

.mf-instagram__grid,
.mf-instagram--live .zoom-instagram-widget__items {
	display: grid !important;
	grid-template-columns: repeat(5, 1fr);
	gap: 15px !important;
	margin: 0;
	padding: 0;
	list-style: none;
}

.mf-instagram__item {
	margin: 0;
	aspect-ratio: 1;
	overflow: hidden;
}

.mf-instagram__link {
	position: relative;
	display: block;
	height: 100%;
}

.mf-instagram__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s var(--mf-ease);
}

.mf-instagram__link::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(38, 31, 26, 0.35) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3' y='3' width='18' height='18' rx='5' fill='none' stroke='%23fff' stroke-width='1.4'/%3E%3Ccircle cx='12' cy='12' r='4.2' fill='none' stroke='%23fff' stroke-width='1.4'/%3E%3Ccircle cx='17.4' cy='6.6' r='1' fill='%23fff'/%3E%3C/svg%3E") center / 28px no-repeat;
	opacity: 0;
	transition: opacity 0.3s ease;
}

.mf-instagram__link:hover::after,
.mf-instagram__link:focus-visible::after {
	opacity: 1;
}

.mf-instagram__link:hover .mf-instagram__img {
	transform: scale(1.03);
}

@media (max-width: 767px) {
	.mf-instagram__grid,
	.mf-instagram--live .zoom-instagram-widget__items {
		grid-template-columns: repeat(2, 1fr);
	}

	.mf-instagram__item:nth-child(n+5),
	.mf-instagram--live .zoom-instagram-widget__item:nth-child(n+5) {
		display: none;
	}
}

/* Footer, after the theme demo's: her logo (emblem, name, Wedding Planning & Design) between fine
   rules, pages, place, features, contact; the copyright on its own line. On a deep brown, her main
   brown darkened (operator, 2026-10-01: a darker footer in her palette, her name in it; 2026-10-17:
   darker still), with the logo in white, as in her logo files. Text in the site's light neutrals:
   ivory 11.4:1 and mist 9.4:1 on it (her stone is kept for the fine rules only: too faint for small
   text); links underline on hover instead of changing colour. */
.mf-footer {
	background: var(--mf-brown-deep);
	color: var(--mf-ivory);
	text-align: center;
}

.mf-footer__inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: clamp(64px, 7vw, 96px) var(--mf-gutter) clamp(48px, 5vw, 64px);
}

.mf-footer__brand {
	--mf-footer-logo: clamp(150px, 14vw, 190px);
	display: flex;
	align-items: flex-start;
	gap: clamp(20px, 3vw, 40px);
}

/* The rules meet the emblem's centre (18% down the logo, whose height is 1.05 times its width). */
.mf-footer__rule {
	flex: 1;
	height: 1px;
	margin-top: calc(var(--mf-footer-logo) * 0.19);
	background: var(--mf-stone);
	opacity: 0.7;
}

.mf-footer__logo {
	display: block;
	width: var(--mf-footer-logo);
	color: var(--mf-white);
	line-height: 0;
	transition: opacity 0.3s ease;
}

.mf-footer__logo svg {
	display: block;
	width: 100%;
	height: auto;
}

.mf-footer__logo:hover {
	opacity: 0.8;
}

.mf-footer__logo:focus-visible {
	outline: 1px solid var(--mf-ivory);
	outline-offset: 6px;
}

.mf-footer__list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0 30px;
	margin: 34px 0 0;
	padding: 0;
	list-style: none;
}

.mf-footer__list li {
	margin: 0;
	padding: 0;
}

.mf-footer a {
	text-decoration-thickness: 1px;
	text-underline-offset: 6px;
}

.mf-footer__list a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: var(--mf-ivory);
	font: 500 11px/1 var(--mf-sans);
	letter-spacing: 0.24em;
	text-decoration: none;
	text-transform: uppercase;
}

.mf-footer__list a:hover,
.mf-footer__list a:focus-visible,
.mf-footer__contact a:hover,
.mf-footer__contact a:focus-visible,
.mf-footer__copy a:hover,
.mf-footer__copy a:focus-visible {
	color: var(--mf-white);
	text-decoration: underline;
}

.mf-footer a:focus-visible {
	outline: 1px solid var(--mf-ivory);
	outline-offset: 4px;
}

.mf-footer__place {
	margin: 26px auto 0;
	max-width: 520px;
	color: var(--mf-mist);
	font-family: var(--mf-italic);
	font-size: 18px;
	font-style: italic;
	line-height: 1.5;
}

.mf-footer__features {
	margin-top: clamp(40px, 5vw, 56px);
}

.mf-footer__label {
	margin: 0 0 16px;
	color: var(--mf-mist);
	font: 500 10px/1.4 var(--mf-sans);
	letter-spacing: 0.3em;
	text-transform: uppercase;
}

.mf-footer__press {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 10px clamp(28px, 4vw, 56px);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* The publications' wordmarks in mist (6.8:1 on the brown; a logo needs 3:1). Heights set by eye so
   the four weigh the same: the fine LANE taller, the heavy WEDVIBES.MEDIA lower. */
.mf-footer__press li {
	margin: 0;
	padding: 0;
	color: var(--mf-mist);
	line-height: 0;
}

.mf-press svg {
	display: block;
	width: auto;
	height: calc(var(--mf-press-h) * var(--mf-press-scale, 1));
}

/* A logo she adds in Website Editor: her image is the mask and the colour is the text's, as for
   the SVGs. Its height and proportions come with it (inc/mf-setup.php mf_press_mask()). */
.mf-press__mask {
	display: block;
	height: calc(var(--mf-press-h) * var(--mf-press-scale, 1));
	background-color: currentColor;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
}

.mf-press--the-lane {
	--mf-press-h: 24px;
}

.mf-press--vogue {
	--mf-press-h: 22px;
}

.mf-press--wedvibes {
	--mf-press-h: 12px;
}

.mf-press--wezoree {
	--mf-press-h: 17px;
}

.mf-footer__contact {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0 28px;
	margin: 32px 0 0;
	padding: 0;
	list-style: none;
	font: 400 13px/2 var(--mf-sans);
	letter-spacing: 0.08em;
}

.mf-footer__contact a {
	color: var(--mf-ivory);
	text-decoration: none;
}

.mf-footer__copy {
	margin: 0;
	padding: 22px var(--mf-gutter);
	border-top: 1px solid rgba(170, 158, 148, 0.35);
	color: var(--mf-mist);
	font: 400 11px/1.6 var(--mf-sans);
	letter-spacing: 0.2em;
	text-transform: uppercase;
}

.mf-footer__sep {
	margin: 0 0.9em;
}

.mf-footer__copy a {
	color: inherit;
	text-decoration: none;
}

@media (max-width: 767px) {
	.mf-footer__list {
		gap: 0 20px;
	}
}

/* Phones: the four logos two by two (one row needs about 560px, so it starts at 600px with room
   to spare), a little smaller. */
@media (max-width: 599px) {
	.mf-footer__press {
		display: grid;
		grid-template-columns: repeat(2, auto);
		justify-content: center;
		justify-items: center;
		gap: 24px 40px;
	}

	.mf-footer__press .mf-press {
		--mf-press-scale: 0.9;
	}
}

/* Tablet and phone. */
@media (max-width: 1024px) {
	:root {
		--mf-header-h: 80px;
		--mf-header-h-compact: 66px;
	}

	/* The tagline stays on tablets (her revision 02: it was hidden on the iPad), a step smaller: the
	   English (226px) fits on one line beside the logo from 744px up; the longer Portuguese (about
	   310px) takes two balanced lines where the logo leaves it less. Phones hide it below. */
	.mf-header .mf-header__tagline {
		font-size: 11px;
		letter-spacing: 0.16em;
		line-height: 1.5;
		white-space: normal;
		text-wrap: balance;
	}

	.mf-menu__inner {
		grid-template-columns: 1fr;
		align-content: center;
		gap: 48px;
	}

	/* One centred column: the menu, then the emblem. */
	.mf-menu__list {
		text-align: center;
	}
}

/* Phones: the logo leaves the tagline about 90px, too little for its three words. */
@media (max-width: 767px) {
	.mf-header__tagline {
		display: none;
	}
}

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

@media (max-width: 600px) {
	.admin-bar .mf-header {
		top: 0;
	}

	.mf-header__toggle-label {
		display: none;
	}

	.mf-header__toggle {
		padding: 14px 4px;
	}

	.mf-menu__emblem svg {
		width: 84px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mf-header,
	.mf-header__bar,
	.mf-header__logo svg,
	.mf-menu,
	.mf-menu__list a,
	.mf-menu__label,
	.mf-burger span {
		transition: none !important;
	}

	.mf-menu__list a {
		transform: none;
	}
}