/*
Theme Name: Pro Portfolio Child
Description: Child theme of Pro Portfolio for farooqbinmunir.com.
Author: Farooq Bin Munir
Author URI: https://farooqbinmunir.com
Template: pro-portfolio
Version: 1.0.1
Requires at least: 6.5
Requires PHP: 7.4
License: GNU General Public License v3 or later
License URI: http://www.gnu.org/licenses/gpl-3.0.html
Text Domain: pro-portfolio-child
*/

/* Links: the parent theme underlines every link. Drop that site-wide and
   signal links with colour instead; `body` outranks the global-styles
   `a:where(...)` rules. Inline links in article prose keep a subtle underline. */
body a:where(:not(.wp-element-button)),
body a:where(:not(.wp-element-button)):hover,
body a:where(:not(.wp-element-button)):focus,
body a:where(:not(.wp-element-button)):active {
	text-decoration: none;
	transition: color 0.2s ease, text-decoration-color 0.2s ease;
}

body a:where(:not(.wp-element-button)):hover,
body a:where(:not(.wp-element-button)):focus-visible {
	color: var(--wp--preset--color--primary);
}

body a:where(:not(.wp-element-button)):focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
	border-radius: 2px;
}

body .wp-block-post-content :is(p, li, td, figcaption) a:not(.wp-element-button) {
	color: var(--wp--preset--color--primary);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
}

body .wp-block-post-content :is(p, li, td, figcaption) a:not(.wp-element-button):hover {
	text-decoration-color: currentColor;
}

/* Hero: rotating role titles (see assets/js/rotator.js) */
.fbm-rotator {
	border-right: 3px solid var(--wp--preset--color--primary);
	padding-right: 4px;
	white-space: nowrap;
}

/* Contact form – matches the theme's soft card style */
.fbm-contact-form .fbm-form-row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
	gap: 0 1.5rem;
}

.fbm-contact-form label {
	display: block;
	margin-bottom: 6px;
	color: var(--wp--preset--color--foreground);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
}

.fbm-contact-form input,
.fbm-contact-form select,
.fbm-contact-form textarea {
	width: 100%;
	box-sizing: border-box;
	padding: 14px 16px;
	border: 2px solid transparent;
	border-radius: 10px;
	background: var(--wp--preset--color--background);
	box-shadow: inset 2px 2px 6px #d1d9e6, inset -2px -2px 6px #fff;
	color: var(--wp--preset--color--foreground);
	font: inherit;
}

/* Height only: a sideways resize would push the field out of its card */
.fbm-contact-form textarea {
	resize: vertical;
	min-height: 160px;
	max-width: 100%;
}

.fbm-contact-form input:focus,
.fbm-contact-form select:focus,
.fbm-contact-form textarea:focus {
	border-color: var(--wp--preset--color--primary);
	outline: none;
}

.fbm-contact-form .fbm-submit {
	width: auto;
	border: 0;
	border-radius: 10px;
	padding: 14px 32px;
	background: var(--wp--preset--color--primary);
	box-shadow: none;
	color: #fff;
	font-weight: 700;
	cursor: pointer;
}

/* The button is pink at rest too, so focus needs a ring. */
.fbm-contact-form .fbm-submit:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 3px;
}

/* Honeypot field (fbm-portfolio.php) */
.fbm-hp {
	position: absolute;
	left: -9999px;
}

/* Contact Form 7: validation tips and the response box */
.fbm-contact-form .wpcf7-not-valid-tip {
	margin-top: 6px;
	color: var(--wp--preset--color--primary);
	font-size: var(--wp--preset--font-size--small);
}

.wpcf7 form.fbm-contact-form .wpcf7-response-output {
	margin: 1em 0 0;
	padding: 12px 16px;
	border: 0;
	border-left: 4px solid var(--wp--preset--color--primary);
	border-radius: 10px;
	background: #fde8ee;
}

.wpcf7 form.fbm-contact-form.sent .wpcf7-response-output {
	border-color: var(--wp--preset--color--dark-green);
	background: #e8f7ef;
}

/* Resume: Education has a single card, so on desktop it rides along
   beside the longer Job Experience list instead of leaving a gap. */
@media (min-width: 782px) {
	.my-resume .fbm-resume-education {
		align-self: flex-start;
		position: sticky;
		top: calc(80px + 2rem); /* clear the sticky site header */
	}
}

/* Project cards: keep tech tags readable under the title */
.my-portfolio .taxonomy-project_tech a {
	text-decoration: none;
	color: inherit;
}

/* Project cards (media-first): a large screenshot and the title. Clicking
   opens the details in a lightbox (projects.js); without JS, or with a
   modifier key, the stretched title link opens the project page. Fixed
   media ratio + a two-line title bar keep every card the same height. */
.fbm-project-grid > li {
	display: flex;
}

.fbm-project-grid > li[hidden] {
	display: none;
}

.fbm-project-card {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	overflow: hidden;
	border-radius: 20px;
	background: #fff;
	box-shadow: var(--wp--preset--shadow--natural);
	cursor: pointer;
	transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.fbm-project-card:hover,
.fbm-project-card:focus-within {
	transform: translateY(-6px);
	box-shadow: 0 18px 40px rgba(0, 0, 0, 0.12);
}

.fbm-project-card__frame {
	position: relative;
}

.fbm-project-card__media {
	margin: 0;
	overflow: hidden;
	background: var(--wp--preset--color--background, #ecf0f3);
}

/* Screenshots are full-page captures: show the top of the page, and
   slowly scroll down through it while the card is hovered. */
.fbm-project-card__media img {
	display: block;
	object-fit: cover;
	object-position: 50% 0;
	transition: object-position 6s ease-in-out;
}

.fbm-project-card:hover .fbm-project-card__media img {
	object-position: 50% 100%;
}

.fbm-project-card__hint {
	position: absolute;
	left: 50%;
	bottom: 18px;
	margin: 0;
	padding: 8px 16px;
	border-radius: 999px;
	background: #fff;
	color: var(--wp--preset--color--primary);
	font-size: 0.85rem;
	font-weight: 700;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
	opacity: 0;
	transform: translate(-50%, 8px);
	transition: opacity 0.3s ease, transform 0.3s ease;
	pointer-events: none;
}

.fbm-project-card:hover .fbm-project-card__hint,
.fbm-project-card:focus-within .fbm-project-card__hint {
	opacity: 1;
	transform: translate(-50%, 0);
}

.fbm-project-card__bar {
	padding: 18px 24px;
	border-top: 1px solid rgba(0, 0, 0, 0.05);
}

.fbm-project-card__title {
	margin: 0;
	font-size: 1.15rem;
	line-height: 1.35;
	min-height: 2.7em; /* two lines, so every bar is the same height */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.fbm-project-card__title a {
	text-decoration: none;
}

.fbm-project-card__title a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.fbm-project-card:hover .fbm-project-card__title a {
	color: var(--wp--preset--color--primary);
}

/* Details: hidden in the card, shown in the lightbox */
.fbm-project-card__details {
	display: none;
}

/* Tech filters (Projects page, front-page portfolio) */
.fbm-project-filters {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
	margin-bottom: 2.5rem;
}

.fbm-project-filters[hidden] {
	display: none;
}

.fbm-project-filters button {
	padding: 9px 18px;
	border: 2px solid transparent;
	border-radius: 999px;
	background: linear-gradient(145deg, #e2e8ec 0%, #fff 100%);
	box-shadow: var(--wp--preset--shadow--natural);
	color: var(--wp--preset--color--foreground);
	font: inherit;
	font-size: 0.9rem;
	font-weight: 600;
	cursor: pointer;
	transition: color 0.25s ease, border-color 0.25s ease;
}

.fbm-project-filters button span {
	margin-left: 6px;
	color: var(--wp--preset--color--boulder, #777);
	font-weight: 400;
}

.fbm-project-filters button:hover,
.fbm-project-filters button:focus-visible {
	color: var(--wp--preset--color--primary);
}

.fbm-project-filters button[aria-pressed="true"] {
	border-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--primary);
}

/* Project lightbox */
.fbm-project-modal {
	width: min(1120px, calc(100vw - 32px));
	max-width: none;
	height: min(780px, calc(100vh - 48px));
	max-height: none;
	padding: 0;
	border: 0;
	border-radius: 20px;
	background: #fff;
	box-shadow: 0 30px 80px rgba(0, 0, 0, 0.3);
	overflow: hidden;
}

.fbm-project-modal::backdrop {
	background: rgba(20, 24, 28, 0.6);
	backdrop-filter: blur(3px);
}

.fbm-project-modal[open] {
	display: grid;
	grid-template-columns: 1.45fr 1fr;
	animation: fbm-modal-in 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes fbm-modal-in {
	from {
		opacity: 0;
		transform: translateY(24px) scale(0.98);
	}
}

.fbm-project-modal__media {
	overflow-y: auto;
	background: var(--wp--preset--color--background, #ecf0f3);
	overscroll-behavior: contain;
}

.fbm-project-modal__media img {
	display: block;
	width: 100%;
	height: auto;
}

.fbm-project-modal__body {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 56px 40px 32px;
	overflow-y: auto;
}

.fbm-project-modal__body > * {
	margin: 0;
}

.fbm-project-modal__body .fbm-project-card__cat a,
.fbm-project-modal__body .fbm-project-card__tech a {
	color: inherit;
	text-decoration: none;
}

.fbm-project-modal__body .fbm-project-card__heading {
	font-size: 1.6rem;
	line-height: 1.25;
}

.fbm-project-modal__body .wp-block-post-excerpt__excerpt {
	margin: 0;
	line-height: 1.8;
}

.fbm-project-modal__cta {
	align-self: flex-start;
	margin-top: 10px;
	padding: 12px 24px;
	border-radius: 10px;
	background: var(--wp--preset--color--primary);
	color: #fff;
	font-weight: 700;
	text-decoration: none;
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.fbm-project-modal__cta:hover,
.fbm-project-modal__cta:focus-visible {
	color: #fff;
	transform: translateY(-2px);
	box-shadow: 0 8px 20px rgba(255, 0, 77, 0.3);
}

.fbm-project-modal__nav {
	display: flex;
	gap: 10px;
	margin-top: auto;
	padding-top: 20px;
}

.fbm-project-modal button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #f1f4f6;
	color: var(--wp--preset--color--foreground);
	font-size: 1.3rem;
	line-height: 1;
	cursor: pointer;
	transition: background 0.25s ease, color 0.25s ease;
}

.fbm-project-modal button:hover,
.fbm-project-modal button:focus-visible {
	background: var(--wp--preset--color--primary);
	color: #fff;
}

.fbm-project-modal__close {
	position: absolute;
	top: 14px;
	right: 14px;
	z-index: 2;
}

body.fbm-modal-open {
	overflow: hidden;
}

@media (max-width: 781px) {
	.fbm-project-modal {
		height: calc(100vh - 32px);
	}

	.fbm-project-modal[open] {
		grid-template-columns: 1fr;
		grid-template-rows: 45% 1fr;
	}

	.fbm-project-modal__body {
		padding: 24px 22px;
	}

	.fbm-project-modal .fbm-project-modal__close {
		background: #fff;
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
	}

	/* Filters: one swipeable row, edge to edge, instead of several wrapped
	   ones. !important beats the constrained layout's auto margins. */
	.fbm-project-filters {
		flex-wrap: nowrap;
		justify-content: flex-start;
		max-width: none !important;
		margin-right: calc(50% - 50vw) !important;
		margin-left: calc(50% - 50vw) !important;
		padding: 6px 16px 14px;
		overflow-x: auto;
		scrollbar-width: none;
	}

	.fbm-project-filters::-webkit-scrollbar {
		display: none;
	}

	.fbm-project-filters button {
		flex: none;
		padding: 8px 14px;
	}

	.fbm-project-filters button span {
		margin-left: 4px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.fbm-project-card,
	.fbm-project-card__media img,
	.fbm-project-card__hint {
		transition: none;
	}

	.fbm-project-modal[open] {
		animation: none;
	}
}

/* Sticky site header: stays on top while scrolling (below the admin bar
   when logged in). Once scrolled, header.js adds .is-stuck and the shadow
   fades in. Height never changes, so no jump. No backdrop-filter/transform
   here: either would trap the fixed mobile menu overlay inside the header. */
html {
	scroll-behavior: smooth;
	scroll-padding-top: 100px;
}

.wp-site-blocks > header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 1000;
}

.wp-site-blocks > header.wp-block-template-part > .wp-block-group {
	transition: box-shadow 0.35s ease, border-color 0.35s ease;
}

.wp-site-blocks > header.wp-block-template-part.is-stuck > .wp-block-group {
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
	border-bottom-color: transparent !important;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	.wp-site-blocks > header.wp-block-template-part > .wp-block-group {
		transition: none;
	}
}

.admin-bar .wp-site-blocks > header.wp-block-template-part {
	top: var(--wp-admin--admin-bar--height, 32px);
}

@media (max-width: 600px) {
	/* WordPress makes the admin bar scroll away on phones */
	.admin-bar .wp-site-blocks > header.wp-block-template-part {
		top: 0;
	}
}

/* Header menu: pink text + centred bar that grows on hover/focus.
   The current page keeps the bar (class added in functions.php). */
.wp-block-navigation .wp-block-navigation-item__content,
.wp-block-navigation .wp-block-navigation-item__content:hover,
.wp-block-navigation .wp-block-navigation-item__content:focus,
.wp-block-navigation .wp-block-navigation-item__content:active {
	position: relative;
	text-decoration: none;
	transition: color 0.3s ease;
}

.wp-block-navigation .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 4px;
	height: 2px;
	border-radius: 2px;
	background: var(--wp--preset--color--primary);
	transform: scaleX(0);
	transition: transform 0.3s ease;
}

.wp-block-navigation .wp-block-navigation-item__content:hover,
.wp-block-navigation .wp-block-navigation-item__content:focus-visible,
.wp-block-navigation .wp-block-navigation-item__content:active,
.wp-block-navigation .current-menu-item > .wp-block-navigation-item__content {
	color: var(--wp--preset--color--primary);
}

.wp-block-navigation .wp-block-navigation-item__content:hover::after,
.wp-block-navigation .wp-block-navigation-item__content:focus-visible::after,
.wp-block-navigation .current-menu-item > .wp-block-navigation-item__content::after {
	transform: scaleX(1);
}

@media (prefers-reduced-motion: reduce) {
	.wp-block-navigation .wp-block-navigation-item__content,
	.wp-block-navigation .wp-block-navigation-item__content::after {
		transition: none;
	}
}

/* ------------------------------------------------------------------
   Blog articles: figures, code, callouts, table of contents, tables.
   Same soft white cards, 10px radius and pink accent as the theme.
   ------------------------------------------------------------------ */
.wp-block-post-content h2 {
	margin-top: 2.2em;
	scroll-margin-top: 100px;
}

.wp-block-post-content h3 {
	margin-top: 1.8em;
	scroll-margin-top: 100px;
}

.fbm-figure {
	margin: 2em 0;
	padding: 24px;
	border-radius: 10px;
	background: var(--wp--preset--color--background-secondary);
	box-shadow: 4px 4px 12px #d1d9e6, -4px -4px 12px #fff;
}

.fbm-figure svg {
	display: block;
	width: 100%;
	height: auto;
}

.fbm-figure figcaption {
	margin-top: 14px;
	color: var(--wp--preset--color--boulder);
	font-size: var(--wp--preset--font-size--small);
	text-align: center;
}

.wp-block-post-content :not(pre) > code {
	padding: 2px 6px;
	border-radius: 4px;
	background: #fde8ee;
	color: #b0003a;
	font-size: 0.9em;
}

.wp-block-post-content .wp-block-code {
	margin: 1.5em 0;
	padding: 20px 24px;
	overflow-x: auto;
	border: 0;
	border-radius: 10px;
	background: var(--wp--preset--color--dark-blue);
	color: #e6edf7;
	font-size: 14px;
	line-height: 1.65;
	tab-size: 4;
}

.wp-block-post-content .wp-block-code code {
	font-family: Consolas, "SFMono-Regular", Menlo, monospace;
	white-space: pre;
}

.fbm-callout,
.fbm-toc {
	margin: 2em 0;
	padding: 20px 24px;
	border-radius: 10px;
	background: var(--wp--preset--color--background-secondary);
	box-shadow: 4px 4px 12px #d1d9e6, -4px -4px 12px #fff;
}

.fbm-callout {
	border-left: 4px solid var(--wp--preset--color--primary);
}

.fbm-callout--info {
	border-left-color: var(--wp--preset--color--secondary);
}

.fbm-callout > :first-child,
.fbm-toc > :first-child {
	margin-top: 0;
}

.fbm-callout > :last-child,
.fbm-toc > :last-child {
	margin-bottom: 0;
}

.fbm-callout .fbm-callout__title,
.fbm-toc .fbm-toc__title {
	color: var(--wp--preset--color--foreground);
	font-weight: 700;
}

.fbm-toc ol {
	margin: 0.5em 0 0;
	padding-left: 1.3em;
}

.fbm-toc a {
	color: var(--wp--preset--color--foreground);
	text-decoration: none;
}

.fbm-toc a:hover,
.fbm-toc a:focus-visible {
	color: var(--wp--preset--color--primary);
}

.wp-block-post-content .wp-block-table {
	padding-left: 0;
	overflow-x: auto;
}

.wp-block-post-content .wp-block-table table {
	border-collapse: collapse;
	border-radius: 10px;
	overflow: hidden;
	background: var(--wp--preset--color--background-secondary);
	font-size: var(--wp--preset--font-size--small);
}

.wp-block-post-content .wp-block-table th,
.wp-block-post-content .wp-block-table td {
	padding: 12px 14px;
	border: 0;
	border-bottom: 1px solid var(--wp--preset--color--background);
	text-align: left;
	vertical-align: top;
}

.wp-block-post-content .wp-block-table thead th {
	border-bottom: 2px solid var(--wp--preset--color--primary);
	color: var(--wp--preset--color--foreground);
}

.wp-block-post-content .wp-block-table figcaption {
	color: var(--wp--preset--color--boulder);
	font-size: var(--wp--preset--font-size--small);
	text-align: center;
}

/* Copy button on code blocks (assets/js/code-copy.js) */
.fbm-code {
	position: relative;
}

.fbm-code .fbm-copy {
	position: absolute;
	top: 10px;
	right: 10px;
	padding: 5px 12px;
	border: 1px solid rgba(255, 255, 255, 0.25);
	border-radius: 6px;
	background: rgba(255, 255, 255, 0.08);
	color: #e6edf7;
	font: 600 12px/1.4 var(--wp--preset--font-family--sen), sans-serif;
	cursor: pointer;
	transition: background 0.2s ease, border-color 0.2s ease;
}

.fbm-code .fbm-copy:hover,
.fbm-code .fbm-copy:focus-visible {
	border-color: var(--wp--preset--color--primary);
	background: var(--wp--preset--color--primary);
	outline: none;
}

.fbm-code .fbm-copy.is-copied {
	border-color: var(--wp--preset--color--dark-green);
	background: var(--wp--preset--color--dark-green);
}

/* FAQ accordion (patterns/faq.php): cards in the theme's soft-shadow style */
.fbm-faq__item {
	box-sizing: border-box; /* assets/js/faq-accordion.js animates the outer height */
	padding: 22px 30px;
	border-top: 2px solid var(--wp--preset--color--background-secondary);
	border-left: 2px solid var(--wp--preset--color--background-secondary);
	border-radius: 20px;
	background: linear-gradient(140deg, rgb(226, 232, 236) 0%, rgb(255, 255, 255) 100%);
	box-shadow: var(--wp--preset--shadow--natural);
}

.fbm-faq__item summary {
	position: relative;
	padding-right: 36px;
	color: var(--wp--preset--color--foreground);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 500;
	list-style: none;
	cursor: pointer;
	transition: color 0.3s ease;
}

.fbm-faq__item summary::-webkit-details-marker {
	display: none;
}

.fbm-faq__item summary::after {
	content: "+";
	position: absolute;
	top: 50%;
	right: 0;
	transform: translateY(-50%);
	color: var(--wp--preset--color--primary);
	font-size: 1.6em;
	font-weight: 400;
	line-height: 1;
	transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* .is-closing: still [open] while the collapse animates */
.fbm-faq__item[open]:not(.is-closing) summary::after {
	transform: translateY(-50%) rotate(45deg);
}

.fbm-faq__item summary:hover,
.fbm-faq__item summary:focus-visible {
	color: var(--wp--preset--color--primary);
}

.fbm-faq__item summary:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 4px;
	border-radius: 4px;
}

.fbm-faq__item > p {
	margin-top: 14px;
	margin-bottom: 0;
}

@media (prefers-reduced-motion: reduce) {
	.fbm-faq__item summary,
	.fbm-faq__item summary::after {
		transition: none;
	}
}

/* Hero social links sit on black circles; core draws the mail glyph black
   (GitHub/LinkedIn default to white), so it vanished. Make it white and a
   touch larger, as the outline envelope is lighter than the other marks. */
.wp-block-social-links.has-icon-background-color .wp-social-link-mail {
	color: #fff;
}

.wp-block-social-links.has-icon-background-color .wp-social-link-mail svg {
	transform: scale(1.2);
}

/* Hero: let the rotating title wrap on phones instead of overflowing. */
@media (max-width: 600px) {
	.fbm-rotator {
		white-space: normal;
	}
}

/* Smooth hovers: the parent theme swaps colours/backgrounds on these
   without a transition (pagination, buttons, search, tabs, form fields). */
.wp-block-query-pagination a,
.wp-block-query-pagination .page-numbers,
.wp-element-button,
.wp-block-button__link,
.wp-block-search__button,
.fbm-contact-form .fbm-submit,
.wp-block-social-link,
.woocommerce div.product .woocommerce-tabs ul.tabs li,
.wc-block-components-pagination__page {
	transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}

.fbm-contact-form :is(input, select, textarea),
.wp-block-search__input,
.wp-block-post-comments :is(input, textarea) {
	transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

@media (prefers-reduced-motion: reduce) {
	.wp-block-query-pagination a,
	.wp-block-query-pagination .page-numbers,
	.wp-element-button,
	.wp-block-button__link,
	.wp-block-search__button,
	.fbm-contact-form .fbm-submit,
	.wp-block-social-link,
	.fbm-contact-form :is(input, select, textarea),
	.wp-block-search__input,
	.wp-block-post-comments :is(input, textarea) {
		transition: none;
	}
}

/* Button hover fill (animations.js grows it from the pointer) */
.wp-block-button__link:has(.fbm-fill) {
	position: relative;
	overflow: hidden;
	isolation: isolate;
}

.fbm-fill {
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
	border-radius: 50%;
	background: var(--wp--preset--color--secondary);
	transform: scale(0);
	pointer-events: none;
}

.fbm-fill--pink {
	background: var(--wp--preset--color--primary);
}

.wp-block-button__link.is-filled {
	color: var(--wp--preset--color--white) !important;
}

/* Blog posts: "Share this post" bar (functions.php, assets/js/share.js) */
.fbm-share {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px 20px;
	margin-top: 3em;
	padding: 20px 24px;
	border-radius: 10px;
	background: var(--wp--preset--color--background-secondary);
	box-shadow: 4px 4px 12px #d1d9e6, -4px -4px 12px #fff;
}

.fbm-share .fbm-share__title {
	margin: 0;
	color: var(--wp--preset--color--foreground);
	font-weight: 700;
}

.fbm-share .fbm-share__links {
	gap: 12px;
	margin: 0;
}

.fbm-share .fbm-share__links .wp-block-social-link:hover {
	transform: translateY(-2px);
}

.fbm-share__copy {
	margin-left: auto;
	padding: 8px 18px;
	border: 2px solid var(--wp--preset--color--primary);
	border-radius: 10px;
	background: transparent;
	color: var(--wp--preset--color--primary);
	font: 600 14px/1.4 var(--wp--preset--font-family--sen), sans-serif;
	cursor: pointer;
	transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;
}

.fbm-share__copy:hover,
.fbm-share__copy:focus-visible {
	background: var(--wp--preset--color--primary);
	color: #fff;
	outline: none;
}

.fbm-share__copy.is-copied {
	border-color: var(--wp--preset--color--dark-green);
	background: var(--wp--preset--color--dark-green);
	color: #fff;
}

@media (prefers-reduced-motion: reduce) {
	.fbm-share__copy {
		transition: none;
	}
}

/* Licence note under posts with code (functions.php) */
.fbm-licence {
	margin-top: 1.2em;
	color: var(--wp--preset--color--boulder);
	font-size: var(--wp--preset--font-size--small);
}

.fbm-licence a {
	color: var(--wp--preset--color--primary);
}

/* Sidebar "Connect With Me": core gives the mail icon no brand colour,
   so the white glyph vanished on its pale circle. */
.wp-block-social-links.has-icon-color:not(.has-icon-background-color, .is-style-logos-only) .wp-social-link-mail {
	background-color: var(--wp--preset--color--tertiary);
}

/* Footer "Recent Work": text links instead of unreadable screenshot thumbnails */
.fbm-footer-all-work {
	margin-top: 4px;
	font-weight: 500;
}

.fbm-footer-all-work a {
	color: var(--wp--preset--color--primary);
}

/* Header "Hire Me" on phones: the logo, menu toggle and button share one
   row, so keep the button on a single line and tighten it instead of
   letting it wrap into a tall two-line pill. */
@media (max-width: 600px) {
	.wp-site-blocks > header.wp-block-template-part .wp-block-button__link {
		white-space: nowrap;
		padding: 0.6em 1em;
		font-size: 0.875rem;
	}

	.wp-site-blocks > header.wp-block-template-part .fbm-logo svg {
		width: 150px;
		height: auto;
	}
}

/* Wherever the hamburger shows: Hire Me first, menu toggle at the far right */
@media (max-width: 991px) {
	.wp-site-blocks > header.wp-block-template-part .wp-block-buttons {
		order: -1;
	}

	.wp-site-blocks > header.wp-block-template-part .wp-block-group:has(> .wp-block-navigation) {
		gap: 12px;
	}
}

/* Header search (patterns/header.php, assets/js/header.js): a magnifier
   button that drops a search field below the header. Below 992px (phones
   and tablets) it gets the field at the top of the slide-in menu instead
   (.fbm-menu-search). */
.fbm-header-search__toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--wp--preset--color--foreground);
	cursor: pointer;
	transition: color 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
}

.fbm-header-search__toggle:hover,
.fbm-header-search__toggle:focus-visible,
.fbm-header-search__toggle[aria-expanded="true"] {
	color: var(--wp--preset--color--primary);
	background: #fff;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
}

.fbm-header-search__panel {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	display: flex;
	justify-content: center;
	padding: 16px 30px;
	visibility: hidden;
	opacity: 0;
	transform: translateY(-8px);
	transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s linear 0.25s;
	pointer-events: none;
}

.fbm-header-search.is-open .fbm-header-search__panel {
	visibility: visible;
	opacity: 1;
	transform: none;
	transition: opacity 0.25s ease, transform 0.25s ease;
}

/* Only the form takes clicks: the panel's empty sides let them through to
   the page, so a click beside the field closes it (header.js). */
.fbm-header-search.is-open .fbm-header-search__form {
	pointer-events: auto;
}

.fbm-header-search__form {
	display: flex;
	width: 100%;
	max-width: 720px;
	overflow: hidden;
	border-radius: 10px;
	background: #fff;
	box-shadow: 0 12px 34px rgba(0, 0, 0, 0.14);
}

.fbm-header-search__form:focus-within {
	box-shadow: 0 0 0 2px var(--wp--preset--color--primary), 0 12px 34px rgba(0, 0, 0, 0.14);
}

.fbm-header-search__form input {
	flex: 1;
	min-width: 0;
	padding: 16px 20px;
	border: 0;
	outline: none;
	background: #fff;
	color: var(--wp--preset--color--foreground);
	font: inherit;
	font-size: 16px;
}

.fbm-header-search__form button {
	display: flex;
	align-items: center;
	padding: 0 22px;
	border: 0;
	background: var(--wp--preset--color--primary);
	color: #fff;
	cursor: pointer;
	transition: background-color 0.3s ease;
}

.fbm-header-search__form button:hover,
.fbm-header-search__form button:focus-visible {
	background: #d10040;
}

.wp-site-blocks > header .fbm-menu-search {
	display: none;
}

@media (max-width: 991px) {
	.fbm-header-search {
		display: none;
	}

	.wp-site-blocks > header .wp-block-navigation__responsive-container.is-menu-open .fbm-menu-search {
		display: block;
		width: 100%;
		margin-bottom: 12px;
	}

	.fbm-menu-search .wp-block-search__inside-wrapper {
		overflow: hidden;
		border: 0;
		border-radius: 10px;
		background: #fff;
		box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
	}

	.fbm-menu-search .wp-block-search__inside-wrapper:focus-within {
		box-shadow: 0 0 0 2px var(--wp--preset--color--primary), 0 10px 30px rgba(0, 0, 0, 0.08);
	}

	.fbm-menu-search .wp-block-search__input {
		background: #fff;
		outline: none;
	}

	/* briefly disabled while the menu opens (header.js): no greying out */
	.fbm-menu-search :disabled {
		opacity: 1;
		color: inherit;
	}

	.fbm-menu-search .wp-block-search__button:disabled {
		color: #fff;
	}

	.fbm-menu-search .wp-block-search__button {
		margin: 0;
		padding: 0 18px;
		border-radius: 0;
		background: var(--wp--preset--color--primary);
		color: #fff;
	}
}

@media (prefers-reduced-motion: reduce) {
	.fbm-header-search__toggle,
	.fbm-header-search__panel,
	.fbm-header-search.is-open .fbm-header-search__panel,
	.fbm-header-search__form button {
		transition: none;
	}
}

/* Tablets use the hamburger menu too: WordPress only collapses the
   navigation below 600px, and the inline links wrapped onto two rows. */
@media (min-width: 600px) and (max-width: 991px) {
	.wp-site-blocks > header .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}

	.wp-site-blocks > header .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}
}

/* Mobile menu: slides in from the right, below the header, over a dimmed
   page, and slides back out to the right on close (header.js keeps the open classes on
   for the closing slide, as .fbm-closing). The logo and Hire Me stay
   visible, and the close button sits exactly on the hamburger (header.js
   measures both), so the toggle reads as one button that turns into an X. */
@keyframes fbm-scrim-in {
	from { background-color: rgba(20, 24, 28, 0); }
	to { background-color: rgba(20, 24, 28, 0.35); }
}

@keyframes fbm-scrim-out {
	from { background-color: rgba(20, 24, 28, 0.35); }
	to { background-color: rgba(20, 24, 28, 0); }
}

@keyframes fbm-menu-slide-in {
	from { transform: translateX(calc(100% + 40px)); }
	to { transform: translateX(0); }
}

@keyframes fbm-menu-slide-out {
	from { transform: translateX(0); }
	to { transform: translateX(calc(100% + 40px)); }
}

@media (max-width: 991px) {
	.wp-site-blocks > header .wp-block-navigation__responsive-container.is-menu-open {
		top: var(--fbm-header-bottom, 0px) !important;
		bottom: 0;
		height: auto;
		padding: 0 16px 24px !important;
		/* clip, not hidden: WordPress focuses a menu link while it is still
		   sliding in, and a hidden box would scroll sideways to show it,
		   fighting the animation (a visible shake) */
		overflow: clip;
		background-color: rgba(20, 24, 28, 0.35) !important;
		transform: none !important;
		transition: none !important;
		animation: fbm-scrim-in 0.35s ease-out both;
	}

	.wp-site-blocks > header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
		padding-top: 16px !important;
		animation: fbm-menu-slide-in 0.35s ease-out both;
	}

	/* WordPress pushes the dialog down for the admin bar; the menu already
	   starts below the header, so logged in looks the same as logged out. */
	.wp-site-blocks > header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog {
		margin-top: 0 !important;
	}

	.wp-site-blocks > header .wp-block-navigation__responsive-container.fbm-closing {
		animation: fbm-scrim-out 0.3s ease-in both;
	}

	.wp-site-blocks > header .wp-block-navigation__responsive-container.fbm-closing .wp-block-navigation__responsive-container-content {
		animation: fbm-menu-slide-out 0.3s ease-in both;
	}

	.wp-site-blocks > header .wp-block-navigation__responsive-container.fbm-closing .wp-block-navigation__responsive-container-close,
	.wp-site-blocks > header .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__responsive-container-close {
		visibility: hidden;
	}

	.wp-site-blocks > header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content ul.wp-block-navigation__container {
		background: #fff !important;
		border: 0 !important;
		border-radius: 10px;
		box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
	}

	.wp-site-blocks > header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content ul.wp-block-navigation__container li:last-child a {
		border-bottom: 0 !important;
	}

	.wp-site-blocks > header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
		position: fixed;
		top: var(--fbm-toggle-top, 16px);
		left: var(--fbm-toggle-left, auto);
		right: auto;
		width: var(--fbm-toggle-width, 36px);
		height: var(--fbm-toggle-height, 36px);
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 0;
		padding: 5px;
		border: 1px solid #9292923b;
		background: #ecf0f3;
		color: inherit;
	}
}

@media (max-width: 991px) and (prefers-reduced-motion: reduce) {
	.wp-site-blocks > header .wp-block-navigation__responsive-container.is-menu-open,
	.wp-site-blocks > header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
		animation: none;
	}
}

/* Footer copyright: centred and smaller on phones, with room below so
   the back-to-top button doesn't sit on top of it. */
@media (max-width: 767px) {
	.fbm-copyright.has-text-align-right {
		width: 100%;
		margin: 0;
		padding-bottom: 56px;
		font-size: 0.875rem;
		line-height: 1.6;
		text-align: center;
	}

	/* Privacy link on its own line instead of a dangling separator */
	.fbm-copyright-sep {
		display: none;
	}

	.fbm-copyright a {
		display: block;
	}
}

/* Back to top (functions.php, assets/js/back-to-top.js): soft white
   circle with a pink arrow, bottom right, fades in once scrolled. */
.fbm-back-to-top {
	position: fixed;
	right: 24px;
	bottom: 24px;
	z-index: 50;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #fff;
	color: var(--wp--preset--color--primary);
	box-shadow: 4px 4px 12px #d1d9e6, -4px -4px 12px #fff;
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transform: translateY(12px);
	transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s, color 0.3s ease, background-color 0.3s ease;
}

.fbm-back-to-top.is-visible {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.fbm-back-to-top:hover,
.fbm-back-to-top:focus-visible {
	background: var(--wp--preset--color--primary);
	color: #fff;
	outline: none;
}

.fbm-back-to-top:focus-visible {
	box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--wp--preset--color--primary);
}

@media (max-width: 600px) {
	.fbm-back-to-top {
		right: 16px;
		bottom: 16px;
		width: 44px;
		height: 44px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.fbm-back-to-top {
		transform: none;
		transition: opacity 0.2s ease, visibility 0.2s;
	}
}

/* Resume: employer logo on a small white tile beside each job title */
.fbm-job-title {
	align-items: center;
}

.fbm-company-logo {
	flex-shrink: 0;
	margin: 0;
}

.fbm-company-logo img {
	box-sizing: border-box;
	padding: 8px;
	background: #fff;
	border-radius: 10px;
	box-shadow: var(--wp--preset--shadow--natural);
}

/* Job header on wider screens: logo beside three lines (title, company,
   dates), with the location tag at the right end of the dates line. The
   wrapper groups step aside (display: contents) so their children join
   one grid. Phones keep the stacked block layout. */
@media (min-width: 600px) {
	.fbm-job-head {
		display: grid !important;
		grid-template-columns: auto 1fr auto;
		column-gap: 14px;
		row-gap: 0;
		align-items: center;
	}

	.fbm-job-head > .fbm-job-title,
	.fbm-job-head > .fbm-job-title > .wp-block-group {
		display: contents;
	}

	.fbm-job-head .fbm-company-logo {
		grid-column: 1;
		grid-row: 1 / span 3;
	}

	.fbm-job-head h3,
	.fbm-job-head .fbm-job-title p {
		margin-inline: 0 !important;
		max-width: none;
		text-align: left;
	}

	.fbm-job-head h3 {
		grid-column: 2 / span 2;
		grid-row: 1;
	}

	.fbm-job-head .fbm-job-title p {
		grid-column: 2 / span 2;
		grid-row: 2;
	}

	.fbm-job-head .fbm-job-title p + p {
		grid-column: 2;
		grid-row: 3;
	}

	/* Location tag: a touch smaller to sit level with the dates */
	.fbm-job-head > .wp-block-group:last-child {
		grid-column: 3;
		grid-row: 3;
		margin: 0 !important;
		padding: 2px 12px !important;
		font-size: 0.875em;
	}
}

/* Testimonials slider (patterns/testimonials.php, assets/js/testimonials.js,
   Splide core CSS in assets/vendor/splide): one card per slide, arrows and
   dots in a row underneath, styled like the back-to-top button. */
.fbm-testimonials.splide {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 16px;
	visibility: visible;
}

.fbm-testimonials .splide__track {
	flex: 0 0 100%;
	width: 100%;
	max-width: 100%;
	margin: 0 !important;
	/* room for the cards' soft shadows inside the clipped track */
	padding-top: 24px;
	padding-bottom: 24px;
}

.fbm-testimonials .splide__slide {
	width: 100%;
	margin: 0 !important;
	padding: 0 16px;
}

.fbm-testimonials .splide__arrows {
	display: contents;
}

/* the constrained layout gives children auto margins; keep the controls together */
.fbm-testimonials .splide__arrow,
.fbm-testimonials .splide__pagination {
	margin: 0 !important;
}

.fbm-testimonials .splide__arrow {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #fff;
	color: var(--wp--preset--color--primary);
	box-shadow: 4px 4px 12px #d1d9e6, -4px -4px 12px #fff;
	cursor: pointer;
	transition: color 0.3s ease, background-color 0.3s ease;
}

.fbm-testimonials .splide__arrow svg {
	width: 16px;
	height: 16px;
	fill: currentColor;
}

.fbm-testimonials .splide__arrow--prev {
	order: 1;
}

.fbm-testimonials .splide__arrow--prev svg {
	transform: scaleX(-1);
}

.fbm-testimonials .splide__pagination {
	order: 2;
	gap: 10px;
	padding: 0 12px;
}

.fbm-testimonials .splide__arrow--next {
	order: 3;
}

.fbm-testimonials .splide__arrow:hover,
.fbm-testimonials .splide__arrow:focus-visible {
	background: var(--wp--preset--color--primary);
	color: #fff;
	outline: none;
}

.fbm-testimonials .splide__pagination__page {
	display: block;
	width: 10px;
	height: 10px;
	padding: 0;
	border: 0;
	border-radius: 5px;
	background: #c9d2dc;
	cursor: pointer;
	transition: width 0.3s ease, background-color 0.3s ease;
}

.fbm-testimonials .splide__pagination__page.is-active {
	width: 28px;
	background: var(--wp--preset--color--primary);
}

.fbm-testimonials .splide__arrow:focus-visible,
.fbm-testimonials .splide__pagination__page:focus-visible {
	box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--wp--preset--color--primary);
	outline: none;
}

/* Stacked columns (core stacks below 782px): the client card becomes a
   short row with a small round avatar, the big quote mark is dropped and
   the review card is tightened, so a slide stays about one screen tall. */
@media (max-width: 781px) {
	.fbm-testimonials .splide__slide.wp-block-columns {
		gap: 16px;
	}

	.fbm-testimonials .splide__slide > .wp-block-column:first-child > .wp-block-group {
		display: flex;
		align-items: center;
		gap: 16px;
		padding: 16px !important;
	}

	.fbm-testimonials .splide__slide > .wp-block-column:first-child .wp-block-image {
		flex: 0 0 64px;
		width: 64px;
		margin: 0 !important;
	}

	.fbm-testimonials .splide__slide > .wp-block-column:first-child .wp-block-image img {
		width: 64px;
		height: 64px;
		aspect-ratio: 1 !important;
		border-radius: 50% !important;
	}

	.fbm-testimonials .splide__slide > .wp-block-column:first-child .wp-block-image + .wp-block-group {
		flex: 1 1 auto;
		margin: 0 !important;
	}

	.fbm-testimonials .splide__slide > .wp-block-column:last-child > .wp-block-image:first-child {
		display: none;
	}

	.fbm-testimonials .splide__slide > .wp-block-column:last-child > .wp-block-group {
		margin-top: 0 !important;
		padding: 20px !important;
	}
}

@media (max-width: 600px) {
	.fbm-testimonials .splide__slide {
		padding: 0 12px;
	}
}

/* Search page (templates/search.html, search filters in functions.php) */
.fbm-search-count {
	margin: 8px 0 0;
	text-align: center;
	color: rgba(255, 255, 255, 0.8);
}

.fbm-search-form .wp-block-search__inside-wrapper {
	overflow: hidden;
	border-radius: 10px;
	background: #fff;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
}

.fbm-search-form .wp-block-search__input {
	background: #fff;
	color: var(--wp--preset--color--foreground);
}

.fbm-search-form .wp-block-search__button {
	margin: 0;
	padding: 0 22px;
	border-radius: 0;
}

.fbm-search-form .wp-block-search__button:hover,
.fbm-search-form .wp-block-search__button:focus-visible {
	background-color: #d10040;
}

/* equal-height cards: the card fills its grid cell, the text area grows */
.fbm-search-results .wp-block-post {
	display: flex;
}

.fbm-result-card {
	display: flex;
	flex-direction: column;
	width: 100%;
}

.fbm-result-card > .wp-block-group {
	flex: 1;
	width: 100%;
	margin-left: 0 !important; /* constrained layout centres short groups */
	margin-right: 0 !important;
}

.fbm-result-type {
	display: inline-block;
	align-self: flex-start;
	margin: 0;
	padding: 4px 12px;
	border-radius: 999px;
	background: rgba(255, 0, 77, 0.08);
	color: var(--wp--preset--color--primary);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.fbm-result-card .fbm-result-placeholder {
	width: 100%;
	margin: 0 !important;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	border-radius: 8px;
}

.fbm-result-placeholder a {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	background: linear-gradient(140deg, #fff 0%, #ffe3ec 100%);
}

.fbm-result-card .fbm-result-placeholder img {
	width: 96px;
	height: auto;
	object-fit: contain;
	transition: transform 0.35s ease;
}

.fbm-result-card:hover .fbm-result-placeholder img {
	transform: scale(1.08);
}

@media (prefers-reduced-motion: reduce) {
	.fbm-result-placeholder img {
		transition: none;
	}
}

@media (max-width: 600px) {
	.fbm-search-banner h1 {
		font-size: 2rem;
	}
}

@media (max-width: 781px) {
	.fbm-search-results .wp-block-post-template.is-layout-grid {
		grid-template-columns: 1fr;
	}
}

@media (min-width: 782px) and (max-width: 1023px) {
	.fbm-search-results .wp-block-post-template.is-layout-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Legal pages (templates/page-privacy-policy.html): one readable text card,
   same gradient card as the contact form */
.fbm-legal {
	border-radius: 20px;
	background: linear-gradient(140deg, rgb(226, 232, 236) 0%, #fff 100%);
	box-shadow: var(--wp--preset--shadow--natural);
}

.fbm-legal h2 {
	margin-top: 1.8em;
	margin-bottom: 0.5em;
	font-size: var(--wp--preset--font-size--big);
}

.fbm-legal h3 {
	margin-top: 1.4em;
	margin-bottom: 0.4em;
	font-size: var(--wp--preset--font-size--normal);
	font-weight: 700;
}

.fbm-legal a {
	color: var(--wp--preset--color--primary);
}

.fbm-legal .fbm-updated {
	color: var(--wp--preset--color--boulder);
	font-size: var(--wp--preset--font-size--small);
}

@media (max-width: 600px) {
	.fbm-legal.wp-block-group {
		padding: 28px 22px !important;
	}
}

/* Contact form: privacy note above the submit button */
.fbm-contact-form .fbm-form-consent {
	color: var(--wp--preset--color--boulder);
	font-size: var(--wp--preset--font-size--small);
}

.fbm-contact-form .fbm-form-consent a {
	color: var(--wp--preset--color--primary);
}

/* "How I Work" route (patterns/how-i-work.php, assets/js/process.js): one
   row per step. A wire runs from the icon tile, bends down and plugs into
   the step's card; a large outline number fills the space under the wire.
   Each row draws its wire and slides its card in as it scrolls into view
   (.is-visible); without .is-animated (no JS, reduced motion) all is shown. */
.fbm-route {
	--fbm-route-card: 62%;
	display: grid;
	gap: 34px;
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: fbm-route;
}

.fbm-route__step {
	position: relative;
	display: grid;
	grid-template-columns: 76px 1fr var(--fbm-route-card);
	align-items: start;
	margin: 0;
	counter-increment: fbm-route;
}

/* Outline step number under the wire */
.fbm-route__step::before {
	content: counter(fbm-route, decimal-leading-zero);
	grid-row: 1;
	grid-column: 2;
	align-self: start;
	margin: 66px 0 0 22px;
	color: transparent;
	font-size: 120px;
	font-weight: 800;
	line-height: 1;
	-webkit-text-stroke: 2px rgba(255, 0, 77, 0.14);
	pointer-events: none;
	user-select: none;
	transition: -webkit-text-stroke-color 0.35s ease;
}

.fbm-route__step:hover::before {
	-webkit-text-stroke-color: rgba(255, 0, 77, 0.35);
}

.fbm-route__tile {
	position: relative;
	z-index: 2;
	display: grid;
	grid-row: 1;
	grid-column: 1;
	place-items: center;
	width: 76px;
	height: 76px;
	border-radius: 20px;
	background: var(--wp--preset--color--background);
	box-shadow: 6px 6px 14px #d1d9e6, -6px -6px 14px #fff;
	color: var(--wp--preset--color--primary);
	transition: background-color 0.35s ease, color 0.35s ease, transform 0.35s ease, box-shadow 0.35s ease;
}

.fbm-route__tile svg {
	width: 28px;
	height: 28px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.fbm-route__step:hover .fbm-route__tile {
	background: var(--wp--preset--color--primary);
	color: #fff;
	box-shadow: 0 10px 24px rgba(255, 0, 77, 0.35), -6px -6px 14px #fff;
	transform: scale(1.06);
}

.fbm-route__label {
	position: relative;
	z-index: 1;
	grid-row: 1;
	grid-column: 2;
	margin: 4px 0 0 22px;
	color: var(--wp--preset--color--primary);
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 3px;
	text-transform: uppercase;
}

/* The wire: right from the tile, then down into the card */
.fbm-route__wire,
.fbm-route__wire::after {
	position: absolute;
	box-sizing: border-box;
	border-top: 4px solid #dde3ea;
	border-right: 4px solid #dde3ea;
	border-top-right-radius: 22px;
}

.fbm-route__wire {
	top: 36px;
	left: 76px;
	width: calc(100% - var(--fbm-route-card) - 76px + 56px);
	height: 40px;
}

.fbm-route__wire::after {
	content: "";
	top: -4px;
	right: -4px;
	bottom: 0;
	left: 0;
	border-color: var(--wp--preset--color--primary);
}

.fbm-route.is-animated .fbm-route__wire::after {
	clip-path: inset(0 100% 0 0);
	transition: clip-path 0.8s ease-in-out;
}

.fbm-route.is-animated .is-visible .fbm-route__wire::after {
	clip-path: inset(0);
}

.fbm-route__card {
	position: relative;
	z-index: 1;
	display: grid;
	grid-row: 1;
	grid-column: 3;
	grid-template-columns: 1.15fr 1fr;
	gap: 30px;
	align-items: center;
	margin-top: 76px;
	padding: 30px 32px;
	border-radius: 20px;
	background: linear-gradient(140deg, rgb(226, 232, 236) 0%, #fff 100%);
	box-shadow: var(--wp--preset--shadow--natural);
	transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.fbm-route__step:hover .fbm-route__card {
	box-shadow: 0 18px 36px rgba(29, 37, 56, 0.14);
	transform: translateY(-4px);
}

/* Reveal: tile pops, label fades, wire draws, then the card slides in */
.fbm-route.is-animated .fbm-route__label,
.fbm-route.is-animated .fbm-route__step::before {
	opacity: 0;
	transition: opacity 0.6s ease 0.3s, -webkit-text-stroke-color 0.35s ease;
}

.fbm-route.is-animated .fbm-route__card {
	opacity: 0;
	transform: translateX(40px);
	transition: opacity 0.6s ease 0.6s, transform 0.6s ease 0.6s, box-shadow 0.35s ease;
}

.fbm-route.is-animated .is-visible .fbm-route__tile {
	animation: fbm-route-pop 0.5s ease both;
}

.fbm-route.is-animated .is-visible .fbm-route__label,
.fbm-route.is-animated .is-visible::before {
	opacity: 1;
}

.fbm-route.is-animated .is-visible .fbm-route__card {
	opacity: 1;
	transform: none;
}

.fbm-route.is-animated .is-visible:hover .fbm-route__card {
	transform: translateY(-4px);
	transition-delay: 0s;
}

@keyframes fbm-route-pop {
	50% {
		transform: scale(1.12);
	}
}

.fbm-route__title {
	margin: 0 0 10px;
	color: var(--wp--preset--color--foreground);
	font-size: 1.35rem;
	font-weight: 600;
}

.fbm-route__desc {
	margin: 0;
	color: var(--wp--preset--color--boulder);
	font-size: 0.95rem;
	line-height: 1.75;
}

.fbm-route__get {
	padding: 20px 22px;
	border-radius: 14px;
	background: var(--wp--preset--color--background);
	box-shadow: inset 3px 3px 8px #d1d9e6, inset -3px -3px 8px #fff;
}

.fbm-route__get-title {
	margin: 0 0 10px;
	color: var(--wp--preset--color--foreground);
	font-size: 0.9rem;
	font-weight: 700;
}

.fbm-route__get ul {
	display: grid;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.fbm-route__get li {
	position: relative;
	margin: 0;
	padding-left: 28px;
	color: var(--wp--preset--color--boulder);
	font-size: 0.9rem;
	line-height: 1.5;
}

.fbm-route__get li::before {
	content: "";
	position: absolute;
	top: 1px;
	left: 0;
	width: 19px;
	height: 19px;
	border-radius: 50%;
	background: var(--wp--preset--color--primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 12.5 4 4 8-9' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat;
}

/* Narrower screens: the card sits under the tile row; the wire drops from
   the tile and turns right into it */
@media (max-width: 899px) {
	.fbm-route__step {
		grid-template-columns: 60px 1fr;
	}

	.fbm-route__step::before {
		display: none;
	}

	.fbm-route__tile {
		width: 60px;
		height: 60px;
		border-radius: 16px;
	}

	.fbm-route__tile svg {
		width: 22px;
		height: 22px;
	}

	.fbm-route__label {
		align-self: center;
		margin: 0 0 0 18px;
	}

	.fbm-route__wire,
	.fbm-route__wire::after {
		border-top: 0;
		border-right: 0;
		border-bottom: 4px solid #dde3ea;
		border-left: 4px solid #dde3ea;
		border-top-right-radius: 0;
		border-bottom-left-radius: 18px;
	}

	.fbm-route__wire {
		top: 60px;
		left: 28px;
		width: 52px;
		height: 62px;
	}

	.fbm-route__wire::after {
		top: 0;
		right: 0;
		bottom: -4px;
		left: -4px;
		border-color: var(--wp--preset--color--primary);
	}

	.fbm-route.is-animated .fbm-route__wire::after {
		clip-path: inset(0 0 100% 0);
	}

	.fbm-route.is-animated .is-visible .fbm-route__wire::after {
		clip-path: inset(0);
	}

	.fbm-route__card {
		grid-row: 2;
		grid-column: 2;
		grid-template-columns: 1fr;
		gap: 20px;
		margin: 20px 0 0 20px;
		padding: 24px 22px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.fbm-route__tile,
	.fbm-route__card {
		transition: none;
	}
}

/* Upwork link (functions.php swaps in the logo): brand green where core
   would give the generic chain icon its grey background */
.wp-block-social-links:not(.is-style-logos-only):not(.has-icon-background-color) .wp-social-link-upwork {
	background-color: #14a800;
	color: #fff;
}

.wp-block-social-links.has-icon-background-color:not(.has-icon-color) .wp-social-link-upwork {
	color: #fff;
}

/* Single project screenshot (patterns/project-details.php,
   assets/js/project-lightbox.js): a full-page capture shown from the top,
   scrolling through on hover like the project cards; "View full page"
   opens the whole capture in a scrollable lightbox. */
.fbm-project-shot {
	position: relative;
	overflow: hidden;
	border-radius: 10px;
}

.fbm-project-shot img {
	object-position: 50% 0;
	cursor: zoom-in;
	transition: object-position 8s ease-in-out;
}

.fbm-project-shot:hover img {
	object-position: 50% 100%;
}

.fbm-project-shot__open {
	position: absolute;
	right: 16px;
	bottom: 16px;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 16px;
	border: 0;
	border-radius: 10px;
	background: rgba(255, 255, 255, 0.94);
	box-shadow: 0 8px 22px rgba(29, 37, 56, 0.22);
	color: var(--wp--preset--color--primary);
	font: inherit;
	font-size: 0.9rem;
	font-weight: 700;
	cursor: pointer;
	transition: background-color 0.3s ease, color 0.3s ease;
}

.fbm-project-shot__open:hover,
.fbm-project-shot__open:focus-visible {
	background: var(--wp--preset--color--primary);
	color: #fff;
	outline: none;
}

.fbm-project-shot__open svg,
.fbm-lightbox__close svg {
	width: 20px;
	height: 20px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2.2;
	stroke-linecap: round;
}

.fbm-lightbox-open {
	overflow: hidden;
}

.fbm-lightbox {
	width: 100vw;
	max-width: none;
	height: 100vh;
	max-height: none;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
}

.fbm-lightbox::backdrop {
	background: rgba(17, 21, 28, 0.88);
}

.fbm-lightbox__scroll {
	box-sizing: border-box;
	height: 100%;
	padding: 60px 16px;
	overflow-y: auto;
	overscroll-behavior: contain;
}

.fbm-lightbox__img {
	display: block;
	width: 100%;
	max-width: 1200px;
	height: auto;
	margin: 0 auto;
	border-radius: 10px;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
}

.fbm-lightbox__close {
	position: fixed;
	z-index: 1;
	top: 14px;
	right: 18px;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #fff;
	color: var(--wp--preset--color--foreground);
	cursor: pointer;
	transition: background-color 0.3s ease, color 0.3s ease;
}

.fbm-lightbox__close:hover,
.fbm-lightbox__close:focus-visible {
	background: var(--wp--preset--color--primary);
	color: #fff;
	outline: none;
}

@media (max-width: 600px) {
	.fbm-project-shot__open span {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
	}

	.fbm-project-shot__open {
		padding: 10px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.fbm-project-shot img {
		transition: none;
	}
}

/* Hero "Download CV" (patterns/main-banner.php): a quiet text link next to
   the two main buttons, with a download arrow drawn from a mask. */
.fbm-hero-cv .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding-right: 6px;
	padding-left: 6px;
	border: 0;
	background: none;
	color: var(--wp--preset--color--foreground);
	font-weight: 700;
	text-decoration: underline;
	text-decoration-color: rgba(255, 0, 77, 0.45);
	text-decoration-thickness: 2px;
	text-underline-offset: 6px;
	transition: color 0.3s ease, text-decoration-color 0.3s ease;
}

.fbm-hero-cv .wp-block-button__link::before {
	content: "";
	width: 18px;
	height: 18px;
	background: var(--wp--preset--color--primary);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v11m-5-5 5 5 5-5M5 20h14'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v11m-5-5 5 5 5-5M5 20h14'/%3E%3C/svg%3E") center / contain no-repeat;
}

.fbm-hero-cv .wp-block-button__link:hover,
.fbm-hero-cv .wp-block-button__link:focus-visible {
	color: var(--wp--preset--color--primary);
	text-decoration-color: var(--wp--preset--color--primary);
}

/* Service icons (patterns/services.php, services-detailed.php): one line
   icon per service in the soft tile used by "How I Work"; fills pink when
   the card is hovered. */
.fbm-service-icon {
	display: grid;
	place-items: center;
	/* The card's constrained layout centres children with auto margins */
	margin-left: 0 !important;
	width: 64px;
	height: 64px;
	border-radius: 18px;
	background: var(--wp--preset--color--background);
	box-shadow: 6px 6px 14px #d1d9e6, -6px -6px 14px #fff;
	color: var(--wp--preset--color--primary);
	transition: background-color 0.35s ease, color 0.35s ease, transform 0.35s ease, box-shadow 0.35s ease;
}

.fbm-service-icon svg {
	width: 28px;
	height: 28px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.has-style-box-shadow:hover .fbm-service-icon {
	background: var(--wp--preset--color--primary);
	box-shadow: 0 10px 24px rgba(255, 0, 77, 0.35), -6px -6px 14px #fff;
	color: #fff;
	transform: scale(1.06);
}

/* Logo (patterns/header.php, footer.php): the SVG from scripts/brand/,
   inlined by pro_portfolio_child_logo_svg() so its parts can animate. */
.fbm-logo {
	display: block;
	line-height: 0;
}

.fbm-logo svg {
	display: block;
	max-width: 100%;
	height: auto;
	overflow: visible;
}

/* Footer "Quick Contact" icons: inline SVG in the brand pink */
.fbm-contact-icon {
	display: grid;
	place-items: center;
	color: var(--wp--preset--color--primary);
}

.fbm-contact-icon svg {
	width: 20px;
	height: 20px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.9;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* ---------------------------------------------------------------------------
   GSAP animations (assets/js/animations.js): <main> stays hidden until the
   script has set its start states (.fbm-anim comes from a head script).
--------------------------------------------------------------------------- */
.fbm-anim main {
	visibility: hidden;
}

/* ScrollSmoother (animations.js): the header sits outside the smoothed
   content, so it is fixed instead of sticky and the content starts below it.
   Native smooth scrolling would fight the smoother. */
html.fbm-smooth {
	scroll-behavior: auto;
}

.fbm-smooth .wp-site-blocks > header.wp-block-template-part {
	position: fixed;
	left: 0;
	right: 0;
}

.fbm-smooth #smooth-content {
	padding-top: var(--fbm-header-space, 0);
}

.fbm-smooth #smooth-content > main {
	margin-top: 0;
}

/* Sticky can't work inside the smoothed content: animations.js pins the
   resume's Education card instead. */
.fbm-smooth .my-resume .fbm-resume-education {
	position: relative;
	top: auto;
}

/* Reading progress on blog posts (animations.js scrubs scaleX). */
.fbm-progress {
	position: fixed;
	top: var(--fbm-header-space, 0);
	left: 0;
	right: 0;
	z-index: 1001;
	height: 3px;
	background: var(--wp--preset--color--primary);
	transform: scaleX(0);
	transform-origin: 0 50%;
	pointer-events: none;
}

/* ---------------------------------------------------------------------------
   Intro splash (functions.php markup, animations.js timeline). Only shown
   while <html> has .fbm-intro-on: first view per session, motion allowed.
--------------------------------------------------------------------------- */
.fbm-intro {
	display: none;
}

html.fbm-intro-on {
	overflow: hidden;
}

.fbm-intro-on .fbm-intro {
	display: block;
	position: fixed;
	inset: 0;
	z-index: 100000;
	font-family: var(--wp--preset--font-family--sen, "Sen", sans-serif);
}

/* The header logo waits under the splash until the flying logo lands. */
.fbm-intro-on .fbm-logo svg {
	visibility: hidden;
}

.fbm-intro__bg {
	position: absolute;
	inset: 0;
	background:
		radial-gradient(circle at 22% 28%, rgba(255, 0, 77, 0.08), transparent 42%),
		radial-gradient(circle at 80% 76%, rgba(255, 107, 152, 0.1), transparent 45%),
		var(--wp--preset--color--background, #ecf0f3);
}

.fbm-intro__logo {
	position: absolute;
	top: 50%;
	left: 50%;
	width: min(560px, 78vw);
	transform: translate(-50%, -50%);
	transform-origin: 0 0;
	visibility: hidden; /* animations.js shows it once the drawing is set up */
}

.fbm-intro__logo svg {
	display: block;
	width: 100%;
	height: auto;
	overflow: visible;
}

.fbm-intro__foot {
	position: absolute;
	left: 40px;
	right: 40px;
	bottom: 28px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	color: var(--wp--preset--color--boulder, #777);
	font-size: 0.85rem;
	letter-spacing: 0.2em;
}

.fbm-intro__count {
	font-variant-numeric: tabular-nums;
}

.fbm-intro__skip {
	padding: 8px 0;
	border: 0;
	background: none;
	color: var(--wp--preset--color--primary, #ff004d);
	font: inherit;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	cursor: pointer;
}

.fbm-intro__skip:hover,
.fbm-intro__skip:focus-visible {
	text-decoration: underline;
	text-underline-offset: 4px;
}

.fbm-intro__bar {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 3px;
	background: linear-gradient(90deg, #ff6b98, var(--wp--preset--color--primary, #ff004d));
	transform: scaleX(0);
	transform-origin: 0 50%;
}

@media (max-width: 600px) {
	.fbm-intro__foot {
		left: 16px;
		right: 16px;
		bottom: 20px;
		font-size: 0.75rem;
	}
}

/* 404 page (patterns/404.php overrides the parent's pattern): one soft card
   with a big outlined code, search and tiles for the main pages. */
.fbm-404__code {
	margin: 0;
	font-size: clamp(6rem, 22vw, 10rem);
	font-weight: 800;
	line-height: 1;
	letter-spacing: 0.04em;
	color: transparent !important;
	-webkit-text-stroke: 2px var(--wp--preset--color--primary);
	text-shadow: 8px 8px 18px rgba(255, 0, 77, 0.12);
}

.fbm-404__search .wp-block-search__inside-wrapper {
	box-shadow: 6px 6px 14px #d1d9e6, -6px -6px 14px #fff;
}

.fbm-404__links {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 16px;
	margin-top: 32px !important;
}

.fbm-404__links a {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	color: var(--wp--preset--color--foreground);
	font-weight: 600;
	text-decoration: none;
	transition: color 0.35s ease;
}

.fbm-404__links .fbm-service-icon {
	margin: 0 !important;
}

.fbm-404__links a:hover,
.fbm-404__links a:focus-visible {
	color: var(--wp--preset--color--primary);
}

.fbm-404__links a:hover .fbm-service-icon,
.fbm-404__links a:focus-visible .fbm-service-icon {
	background: var(--wp--preset--color--primary);
	box-shadow: 0 10px 24px rgba(255, 0, 77, 0.35), -6px -6px 14px #fff;
	color: #fff;
	transform: scale(1.06);
}

/* the card's own hover must not light up every tile at once */
.fbm-404__card.has-style-box-shadow:hover .fbm-404__links a:not(:hover):not(:focus-visible) .fbm-service-icon {
	background: var(--wp--preset--color--background);
	box-shadow: 6px 6px 14px #d1d9e6, -6px -6px 14px #fff;
	color: var(--wp--preset--color--primary);
	transform: none;
}

@media (max-width: 600px) {
	.fbm-404__links {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* ---------------------------------------------------------------------------
   Accessibility: a focus ring for anything keyboard-focusable that has no
   focus style of its own (e.g. scrollable code blocks). :where() keeps it at
   zero specificity, so every component's own :focus-visible rule wins.
--------------------------------------------------------------------------- */
:where(button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
}

/* Footer and sidebar titles are h2 for a clean outline (they follow the H1
   on pages without other sections) but keep the h3 look they were designed
   with ("content-heading" is not a size preset, so the sidebar titles had
   the h3 size). */
footer.wp-block-template-part h2.wp-block-heading,
h2.has-content-heading-font-size {
	line-height: var(--wp--custom--typography--line-height--heading-three);
}

h2.has-content-heading-font-size {
	font-size: var(--wp--custom--typography--font-size--heading-three);
}