/*
Theme Name: My Finance Control
Theme URI: https://www.myfinancecontrol.co.uk
Author: Abner Ymanuehl Tuyac
Description: Custom block theme for My Finance Control. Navy and muted gold, Manrope, white space, no page builder. Edit text and prices in the block editor.
Version: 0.1.25
Requires at least: 6.5
Tested up to: 6.8
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: myfc
*/

/* Small extras theme.json cannot express. Colours come from the palette variables. */

/* Eyebrow label with the short gold line in front ("— OUR SERVICES"). */
.myfc-eyebrow-line {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}
.myfc-eyebrow-line::before {
	content: "";
	width: 2rem;
	height: 2px;
	background: var(--wp--preset--color--gold);
	flex: none;
}

/* Thin vertical dividers between columns (services row), stacked on phones. */
@media (min-width: 782px) {
	.myfc-divided > .wp-block-column + .wp-block-column {
		border-left: 1px solid var(--wp--preset--color--line);
		padding-left: var(--wp--preset--spacing--40);
	}
}
@media (max-width: 781px) {
	.myfc-divided > .wp-block-column + .wp-block-column {
		border-top: 1px solid var(--wp--preset--color--line);
		padding-top: var(--wp--preset--spacing--40);
	}
}

/* Arrow links ("View Packages →"). */
.myfc-arrow-link a {
	text-decoration: none;
	font-weight: 600;
}
.myfc-arrow-link a:hover,
.myfc-arrow-link a:focus-visible {
	text-decoration: underline;
	text-underline-offset: 0.25em;
}

/* Visible keyboard focus everywhere (WCAG 2.2 AA). */
:where(a, button, input, select, textarea, .wp-element-button):focus-visible {
	outline: 2px solid var(--wp--preset--color--navy);
	outline-offset: 3px;
}

/* Header: keep the Contact button on one line next to the menu. */
.myfc-header .wp-block-buttons {
	flex-wrap: nowrap;
}

/* Footer link lists without bullets. */
.myfc-plain-list {
	list-style: none;
}
.myfc-plain-list a {
	text-decoration: none;
}
.myfc-plain-list a:hover,
.myfc-plain-list a:focus-visible {
	text-decoration: underline;
}

/* Gold words inside headings: no highlight background, even when the editor strips the inline style. */
mark.has-inline-color {
	background-color: transparent;
}

/* Header on small screens: Contact stays on one line, tagline hides to make room. */
.myfc-header .wp-block-button__link {
	white-space: nowrap;
}
@media (max-width: 600px) {
	.myfc-header .myfc-tagline {
		display: none;
	}
}

/* Outline button on the navy strip: white border and text. */
.myfc-on-dark .wp-block-button__link {
	color: var(--wp--preset--color--white);
	border-color: var(--wp--preset--color--white);
}
.myfc-on-dark .wp-block-button__link:hover,
.myfc-on-dark .wp-block-button__link:focus-visible {
	background-color: var(--wp--preset--color--white);
	color: var(--wp--preset--color--navy);
}
.has-navy-background-color :where(a, button, .wp-element-button):focus-visible {
	outline-color: var(--wp--preset--color--gold);
}
@media (max-width: 781px) {
	.myfc-cta-buttons {
		justify-content: flex-start !important;
	}
}

/* Below 1200px the full menu (about 1,135px wide) no longer fits on one line, so the menu button takes over. */
@media (min-width: 600px) and (max-width: 1199px) {
	.myfc-header .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}
	.myfc-header .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}
}

/* Menu button (phones and tablets). */
.myfc-header .wp-block-navigation__responsive-container-open svg,
.myfc-header .wp-block-navigation__responsive-container-close svg {
	width: 28px;
	height: 28px;
}

/* Open menu panel (phones and tablets): full-screen white panel, one clear list. */
.myfc-header .is-menu-open {
	padding: 0.75rem clamp(1.25rem, 6vw, 2.5rem) 1.25rem !important;
	animation: none;
}
.myfc-header .is-menu-open .wp-block-navigation__responsive-container-close {
	top: 0.75rem;
	right: clamp(1.25rem, 6vw, 2.5rem);
	color: var(--wp--preset--color--navy);
}
.myfc-header .is-menu-open .wp-block-navigation__responsive-container-content {
	padding-top: 2.25rem !important;
	align-items: stretch !important;
	width: auto;
	max-width: 100%;
	box-sizing: border-box;
}
.myfc-header .is-menu-open .wp-block-navigation__container {
	flex-direction: column;
	align-items: stretch !important;
	gap: 0 !important;
	width: 100%;
}

/* Top-level links: large, semibold, thin divider under each. */
.myfc-header .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item {
	display: flex;
	flex-direction: column;
	align-items: flex-start !important;
	width: 100%;
	box-sizing: border-box;
	padding: 0.5rem 0;
	border-bottom: 1px solid var(--wp--preset--color--line);
	font-size: 1.0625rem;
	font-weight: 600;
}
.myfc-header .is-menu-open .wp-block-navigation-item__content {
	padding: 0 !important;
	text-decoration: none;
}

/* Sub-items: smaller, slate, indented under a short gold line. */
.myfc-header .is-menu-open .wp-block-navigation__submenu-container {
	gap: 0 !important;
	margin: 0.35rem 0 0.1rem !important;
	padding: 0 0 0 1rem !important;
	border-left: 2px solid var(--wp--preset--color--gold) !important;
	font-size: 0.9375rem;
	font-weight: 500;
}
.myfc-header .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item {
	align-items: flex-start !important;
	padding: 0.15rem 0;
	color: var(--wp--preset--color--slate);
}
.myfc-header .is-menu-open .wp-block-navigation__submenu-icon {
	display: none;
}

/* "Contact" only shows in the open menu, as a full-width gold button; desktop has the header button. */
.myfc-header .myfc-menu-contact {
	display: none !important;
}
.myfc-header .is-menu-open .myfc-menu-contact {
	display: flex !important;
	align-items: stretch !important;
	margin-top: 0.75rem;
	padding: 0 !important;
	border-bottom: 0 !important;
}
.myfc-header .is-menu-open .myfc-menu-contact .wp-block-navigation-item__content {
	display: block;
	width: 100%;
	box-sizing: border-box;
	padding: 0.75rem 1.5rem !important;
	border-radius: 4px;
	background: var(--wp--preset--color--gold);
	color: var(--wp--preset--color--navy);
	text-align: center;
	font-size: 1rem;
}
.myfc-header .is-menu-open .myfc-menu-contact .wp-block-navigation-item__content:hover,
.myfc-header .is-menu-open .myfc-menu-contact .wp-block-navigation-item__content:focus-visible {
	background: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--white);
	text-decoration: none;
}

/* No white gap between the navy call-to-action strip and the footer. */
.wp-site-blocks > section,
.wp-site-blocks > footer {
	margin-block-start: 0;
}

/* Buttons: one size for filled and outline, smooth hover. */
.wp-element-button,
.wp-block-button__link {
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
	line-height: 1.5;
}
.wp-block-button.is-style-outline > .wp-block-button__link:not(.has-custom-font-size) {
	padding: 0.85rem 1.5rem;
}
@media (prefers-reduced-motion: reduce) {
	.wp-element-button,
	.wp-block-button__link {
		transition: none;
	}
}

/* Package cards (Financial Operations). */
.myfc-card {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	padding: var(--wp--preset--spacing--40);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 6px;
	background: var(--wp--preset--color--white);
}
.myfc-card > * {
	margin-block: 0;
}
.myfc-card .myfc-card-button {
	margin-top: auto;
}

/* Tick lists. */
.myfc-check-list {
	list-style: none;
	padding-left: 0;
}
.myfc-check-list li {
	position: relative;
	padding-left: 1.75rem;
	margin-bottom: 0.5rem;
}
.myfc-check-list li::before {
	content: "✓";
	position: absolute;
	left: 0;
	color: var(--wp--preset--color--gold);
	font-weight: 700;
}

/* Expandable sections (allowances, exclusions). */
.myfc-details {
	border-top: 1px solid var(--wp--preset--color--line);
	border-bottom: 1px solid var(--wp--preset--color--line);
	padding: 1rem 0;
}
.myfc-details + .myfc-details {
	border-top: 0;
	margin-top: 0;
}
.myfc-details summary {
	cursor: pointer;
	font-weight: 600;
}
.myfc-details[open] summary {
	margin-bottom: 1rem;
}

/* Allowance table. */
.myfc-table table {
	border-collapse: collapse;
	width: 100%;
	font-size: 0.9375rem;
}
.myfc-table :is(th, td) {
	border: 0;
	border-bottom: 1px solid var(--wp--preset--color--line);
	padding: 0.6rem 0.75rem;
	text-align: left;
}
.myfc-table thead th {
	color: var(--wp--preset--color--navy);
	font-weight: 700;
	border-bottom: 2px solid var(--wp--preset--color--navy);
}
.myfc-table td:not(:first-child),
.myfc-table th:not(:first-child) {
	text-align: center;
}

/* Wide screens: menu items never break onto a second line. */
@media (min-width: 1200px) {
	.myfc-header .wp-block-navigation__container {
		flex-wrap: nowrap;
	}
	.myfc-header .wp-block-navigation-item__content {
		white-space: nowrap;
	}
}

/* Contact page: side column and the enquiry form in the brand style. */
.myfc-contact-side {
	border-left: 1px solid var(--wp--preset--color--line);
	padding-left: var(--wp--preset--spacing--40);
}
@media (max-width: 781px) {
	.myfc-contact-side {
		border-left: 0;
		padding-left: 0;
		border-top: 1px solid var(--wp--preset--color--line);
		padding-top: var(--wp--preset--spacing--40);
	}
}
.myfc-contact-item {
	padding: 1rem 0;
	border-bottom: 1px solid var(--wp--preset--color--line);
}
.myfc-contact-item > * {
	margin-block: 0.25rem;
}

.fluentform .ff-el-group {
	margin-bottom: 1.1rem;
}
.fluentform .ff-el-input--label label {
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--wp--preset--color--navy);
}
.fluentform .ff-el-form-control {
	font-family: inherit;
	font-size: 1rem;
	color: var(--wp--preset--color--navy);
	border: 1px solid #cbd2da;
	border-radius: 4px;
	padding: 0.75rem 0.9rem;
	background: var(--wp--preset--color--white);
	box-shadow: none;
}
.fluentform .ff-el-form-control:focus {
	border-color: var(--wp--preset--color--navy);
	outline: 2px solid var(--wp--preset--color--navy);
	outline-offset: 0;
}
.fluentform .ff-el-form-control::placeholder {
	color: #7b8794;
}
.fluentform .ff-el-is-required.asterisk-right label::after {
	color: #b42318;
}
.fluentform .error.text-danger {
	color: #b42318;
	font-size: 0.875rem;
}
.fluentform .ff-btn-submit {
	width: 100%;
	font-family: inherit;
	font-size: 0.9375rem;
	font-weight: 600;
	padding: 0.85rem 1.5rem;
	border-radius: 4px;
	border: 1px solid var(--wp--preset--color--gold);
	background-color: var(--wp--preset--color--gold) !important;
	color: var(--wp--preset--color--navy) !important;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.fluentform .ff-btn-submit:hover,
.fluentform .ff-btn-submit:focus-visible {
	background-color: var(--wp--preset--color--navy) !important;
	border-color: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--white) !important;
	opacity: 1;
}
.ff-message-success {
	border: 1px solid var(--wp--preset--color--line);
	border-left: 3px solid var(--wp--preset--color--gold);
	background: var(--wp--preset--color--off-white);
	padding: 1.25rem 1.5rem;
	box-shadow: none;
}

/* Current page in the menu: navy, semibold, short gold underline (as in the mockup). */
.myfc-header .current-menu-item > .wp-block-navigation-item__content {
	font-weight: 600;
}

/* Crest, CIMA badge and founder photo. */
.myfc-logo {
	margin: 0;
}
.myfc-logo img {
	display: block;
	width: 320px;
	max-width: 100%;
	height: auto;
	aspect-ratio: 1600 / 271;
}
.myfc-header .myfc-logo {
	flex: 0 0 auto;
}
/* Phones: the logo needs the room, and Contact is already in the open menu. */
@media (max-width: 480px) {
	.myfc-header .myfc-logo img {
		width: 240px;
	}
	.myfc-header .wp-block-buttons {
		display: none;
	}
}
.myfc-cima {
	margin-top: 1rem;
}
.myfc-photo img {
	border-radius: 50%;
}

/* Additional Services price list: prices left-aligned, so long ones stay readable on phones. */
.myfc-price-table td:not(:first-child),
.myfc-price-table th:not(:first-child) {
	text-align: left;
	font-weight: 600;
}

/* Small animations. All of it switches off for reduced-motion visitors (end of this block). */

/* In-page links ("View full details") scroll smoothly and stop just above the section. */
html {
	scroll-behavior: smooth;
	scroll-padding-top: 2rem;
}

/* Menu dropdowns fade and drop in (desktop menu only). */
@media (min-width: 1200px) {
	.myfc-header .wp-block-navigation__submenu-container {
		transform: translateY(-6px);
		transition: opacity 0.18s ease, transform 0.18s ease;
	}
	.myfc-header .has-child:hover > .wp-block-navigation__submenu-container,
	.myfc-header .has-child:focus-within > .wp-block-navigation__submenu-container {
		transform: none;
	}
	.myfc-header .wp-block-navigation__submenu-icon svg {
		transition: transform 0.18s ease;
	}
	.myfc-header .has-child:hover > .wp-block-navigation__submenu-icon svg {
		transform: rotate(180deg);
	}
}

/* Menu links: one gold underline for hover, keyboard focus and the current page, on desktop and in the phone menu. */
.myfc-header .wp-block-navigation-item__content,
.myfc-header .wp-block-navigation-item__content:hover,
.myfc-header .wp-block-navigation-item__content:focus {
	text-decoration: none;
}
.myfc-header .wp-block-navigation-item__label {
	padding-bottom: 0.3em;
	background: linear-gradient(var(--wp--preset--color--gold), var(--wp--preset--color--gold)) left bottom / 0 2px no-repeat;
	transition: background-size 0.22s ease;
}
.myfc-header .wp-block-navigation-item__content:hover > .wp-block-navigation-item__label,
.myfc-header .wp-block-navigation-item__content:focus-visible > .wp-block-navigation-item__label,
.myfc-header .current-menu-item > .wp-block-navigation-item__content > .wp-block-navigation-item__label {
	background-size: 100% 2px;
}
.myfc-header .myfc-menu-contact .wp-block-navigation-item__label {
	padding-bottom: 0;
	background: none;
}

/* Phone and tablet menu slides down to open and back up to close. */
@media (max-width: 1199px) {
	.myfc-header .wp-block-navigation__responsive-container {
		position: fixed;
		inset: 0;
		z-index: 100000;
		background-color: var(--wp--preset--color--white) !important;
		transform: translateY(-100%);
		transition: transform 0.55s ease-in-out;
	}
	.myfc-header .wp-block-navigation__responsive-container.is-menu-open {
		transform: none;
	}
	.myfc-header .wp-block-navigation__responsive-container.is-menu-open.myfc-menu-closing {
		transform: translateY(-100%);
	}
	@starting-style {
		.myfc-header .wp-block-navigation__responsive-container.is-menu-open {
			transform: translateY(-100%);
		}
	}
}

/* Accordions: chevron turns, content slides open. Browsers without support simply open at once. */
.myfc-details {
	interpolate-size: allow-keywords;
}
.myfc-details summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	list-style: none;
}
.myfc-details summary::-webkit-details-marker {
	display: none;
}
.myfc-details summary::after {
	content: "";
	flex: none;
	width: 0.55rem;
	height: 0.55rem;
	margin-right: 0.25rem;
	border-right: 2px solid var(--wp--preset--color--gold);
	border-bottom: 2px solid var(--wp--preset--color--gold);
	transform: translateY(-2px) rotate(45deg);
	transition: transform 0.25s ease;
}
.myfc-details[open] summary::after {
	transform: translateY(2px) rotate(225deg);
}
.myfc-details::details-content {
	height: 0;
	opacity: 0;
	overflow: clip;
	transition: height 0.28s ease, opacity 0.22s ease, content-visibility 0.28s allow-discrete;
}
.myfc-details[open]::details-content {
	height: auto;
	opacity: 1;
}

/* Price cards lift slightly. */
.myfc-card {
	transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.myfc-card:hover {
	transform: translateY(-3px);
	border-color: var(--wp--preset--color--gold);
	box-shadow: 0 10px 24px -14px rgba(11, 37, 59, 0.28);
}

/* Information cards with nothing to click stay still. */
.myfc-card-static:hover {
	transform: none;
	border-color: var(--wp--preset--color--line);
	box-shadow: none;
}

/* Marked temporary wording. Must all be gone before launch. */
.myfc-temp {
	padding: 0.75rem 1rem;
	border-left: 3px solid var(--wp--preset--color--gold);
	background: #fff7e6;
	color: var(--wp--preset--color--navy);
	font-size: 0.875rem;
}

/* Who We Help links stop just above the card. */
.myfc-anchor {
	scroll-margin-top: 2rem;
}

/* Links in the footer and arrow links ease their colour. */
.myfc-arrow-link a,
.myfc-plain-list a {
	transition: color 0.2s ease;
}

/* Page content fades up gently on load. */
@keyframes myfc-fade-up {
	from { opacity: 0; transform: translateY(10px); }
	to { opacity: 1; transform: none; }
}
main > .entry-content,
main > .wp-block-post-content {
	animation: myfc-fade-up 0.4s ease-out both;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
	.myfc-header .wp-block-navigation__submenu-container,
	.myfc-header .wp-block-navigation__submenu-icon svg,
	.myfc-header .wp-block-navigation-item__label,
	.myfc-header .wp-block-navigation__responsive-container,
	.myfc-details summary::after,
	.myfc-details::details-content,
	.myfc-card,
	.myfc-arrow-link a,
	.myfc-plain-list a {
		transition: none;
	}
	.myfc-header .wp-block-navigation__submenu-container,
	.myfc-card:hover {
		transform: none;
	}
	main > .entry-content,
	main > .wp-block-post-content {
		animation: none;
	}
}

/* Testimonials (Home, Fractional Finance, About). */
.wp-block-quote.myfc-testimonial {
	max-width: 52rem;
	margin: var(--wp--preset--spacing--40) 0 0;
	padding: 0 0 0 var(--wp--preset--spacing--40);
	border-left: 3px solid var(--wp--preset--color--gold);
}
.wp-block-quote.myfc-testimonial p {
	font-size: 1.125rem;
	line-height: 1.7;
	color: var(--wp--preset--color--navy);
}
.wp-block-quote.myfc-testimonial cite {
	display: block;
	margin-top: 1rem;
	font-size: 0.875rem;
	font-style: normal;
	font-weight: 600;
	color: var(--wp--preset--color--slate);
}

/* Cookie consent banner (functions.php). Reject and Accept get equal weight. */
.mfc-cookie {
	position: fixed;
	z-index: 1000;
	left: 1rem;
	right: 1rem;
	bottom: 1rem;
	max-width: 44rem;
	margin: 0 auto;
	padding: 1.25rem 1.5rem;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem 1.5rem;
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--line);
	border-top: 3px solid var(--wp--preset--color--gold);
	box-shadow: 0 8px 30px rgba(13, 31, 51, 0.15);
	color: var(--wp--preset--color--navy);
	font-size: 0.875rem;
	line-height: 1.6;
}
.mfc-cookie[hidden] {
	display: none;
}
.mfc-cookie p {
	flex: 1 1 22rem;
	margin: 0;
}
.mfc-cookie-buttons {
	display: flex;
	gap: 0.75rem;
	flex-wrap: wrap;
}
.mfc-cookie button {
	font: inherit;
	font-weight: 600;
	padding: 0.6rem 1.1rem;
	border-radius: 4px;
	border: 1px solid var(--wp--preset--color--navy);
	cursor: pointer;
}
.mfc-cookie-reject {
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--navy);
}
.mfc-cookie-accept {
	background: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--white);
}
.mfc-cookie button:focus-visible {
	outline: 2px solid var(--wp--preset--color--gold);
	outline-offset: 2px;
}

/* WhatsApp icon in the header: small, navy, gold on hover. The Contact button stays the main action. */
.myfc-header .myfc-header-whatsapp {
	margin: 0;
	padding: 0;
	gap: 0;
}
.myfc-header .myfc-header-whatsapp .wp-social-link {
	transition: color 0.2s ease;
}
.myfc-header .myfc-header-whatsapp .wp-social-link:hover {
	transform: none;
	color: var(--wp--preset--color--gold) !important;
}