/*
Theme Name: Beam
Theme URI: https://roarmedia.com.ng
Author: Roar Media
Author URI: https://roarmedia.com.ng
Description: A warm, minimal portfolio theme for creative people, with a bright and happy style option built in. Includes portfolio, journal, services, booking, contact and shop page designs, WooCommerce styling, and one-click starter content. Pair it with the Beam Portfolio plugin for the Projects section.
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 7.4
Version: 1.1.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: beam
Tags: portfolio, blog, e-commerce, full-site-editing, block-patterns, block-styles, style-variations, wide-blocks, editor-style, custom-colors, custom-menu, featured-images, one-column, two-columns, three-columns, translation-ready
Update URI: false
*/

/* -------------------------------------------------------------------------
 * 1. Foundations
 * ---------------------------------------------------------------------- */

body {
	--beam-radius-s: var(--wp--custom--radius--small, 8px);
	--beam-radius-m: var(--wp--custom--radius--medium, 14px);
	--beam-radius-l: var(--wp--custom--radius--large, 22px);
	--beam-radius-pill: var(--wp--custom--radius--pill, 999px);
	--beam-heading-font: var(--wp--custom--font--heading, var(--wp--preset--font-family--fraunces));
	--beam-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

html {
	scroll-behavior: smooth;
}

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

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

/* Header, main and footer sit flush against each other. */
.wp-site-blocks > * {
	margin-block-start: 0;
}

::selection {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--contrast);
}

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

/* -------------------------------------------------------------------------
 * 2. Typography
 * ---------------------------------------------------------------------- */

:is(h1, h2, h3, h4, .wp-block-post-title, .wp-block-query-title, .wp-block-site-title, .beam-display) {
	font-variation-settings: var(--wp--custom--heading--font-variation, normal);
}

:is(h1, h2, h3, .wp-block-post-title, .wp-block-query-title) {
	text-wrap: balance;
}

p {
	text-wrap: pretty;
}

/* A marker-pen highlight for emphasised words in headings: the "happy" accent. */
:is(h1, h2, h3, .wp-block-post-title, .is-style-statement) em {
	font-style: var(--wp--custom--heading--em-style, italic);
	color: var(--wp--custom--heading--em-color, inherit);
	background-image: linear-gradient(
		transparent 62%,
		var(--wp--custom--highlight, var(--wp--preset--color--accent)) 62%,
		var(--wp--custom--highlight, var(--wp--preset--color--accent)) 92%,
		transparent 92%
	);
	padding-inline: 0.05em;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}

/* On coloured sections the highlight swaps to something readable. */
.is-style-section-feature :is(h1, h2, h3) em {
	--wp--custom--highlight: var(--wp--custom--feature--highlight, transparent);
	color: var(--wp--custom--feature--em-color, var(--wp--preset--color--accent));
}

.is-style-section-ink :is(h1, h2, h3) em {
	--wp--custom--highlight: transparent;
	color: var(--wp--preset--color--accent);
}

.is-style-section-sun :is(h1, h2, h3) em {
	--wp--custom--highlight: var(--wp--preset--color--base);
}

.beam-display {
	font-family: var(--beam-heading-font);
	font-weight: var(--wp--custom--font--display-weight, 400);
	letter-spacing: -0.03em;
	line-height: 1;
}

/* Statement: a big sentence that lights up word by word when animations are on. */
.is-style-statement {
	font-family: var(--beam-heading-font);
	font-size: clamp(1.75rem, 1.1rem + 2.6vw, 3.25rem);
	font-variation-settings: var(--wp--custom--heading--font-variation, normal);
	font-weight: var(--wp--custom--font--statement-weight, 400);
	letter-spacing: -0.02em;
	line-height: 1.22;
}

a {
	text-decoration-thickness: 1px;
	text-underline-offset: 0.22em;
	transition: color 0.2s var(--beam-ease), text-decoration-color 0.2s var(--beam-ease);
}

a:where(:not(.wp-element-button)):hover {
	text-decoration-color: var(--wp--preset--color--accent);
	text-decoration-thickness: 0.14em;
}

/* Eyebrow: a small uppercase label with a sunny dot. */
.is-style-eyebrow {
	color: var(--wp--preset--color--contrast-2);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	letter-spacing: 0.12em;
	line-height: 1.4;
	text-transform: uppercase;
}

.is-style-eyebrow::before {
	content: "";
	display: inline-block;
	width: 0.6em;
	height: 0.6em;
	margin-inline-end: 0.65em;
	border-radius: 50%;
	background: var(--wp--preset--color--accent);
	vertical-align: 0.05em;
}

:is(.is-style-section-feature, .is-style-section-ink, .is-style-section-sun) .is-style-eyebrow:not(.has-text-color) {
	color: inherit;
	opacity: 0.85;
}

/* Status badge: "Available for new projects" with a gentle pulse. */
.is-style-status {
	display: block;
	width: fit-content;
	padding: 0.45em 1em 0.45em 0.85em;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--beam-radius-pill);
	background: var(--wp--preset--color--base);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 500;
	line-height: 1.4;
}

.is-style-status.has-text-align-center {
	margin-inline: auto;
}

.is-style-status::before {
	content: "";
	display: inline-block;
	width: 0.55em;
	height: 0.55em;
	margin-inline-end: 0.6em;
	border-radius: 50%;
	background: #2fb36e;
	vertical-align: 0.05em;
	animation: beam-pulse 2.4s ease-out infinite;
}

@keyframes beam-pulse {
	0% {
		box-shadow: 0 0 0 0 rgba(47, 179, 110, 0.45);
	}

	70% {
		box-shadow: 0 0 0 0.55em rgba(47, 179, 110, 0);
	}

	100% {
		box-shadow: 0 0 0 0 rgba(47, 179, 110, 0);
	}
}

/* -------------------------------------------------------------------------
 * 3. Buttons
 * ---------------------------------------------------------------------- */

:root .wp-element-button,
:root .wp-block-button__link {
	border: var(--wp--custom--button--border, 0 solid transparent);
	box-shadow: var(--wp--custom--button--shadow, none);
	cursor: pointer;
	transition:
		transform 0.2s var(--beam-ease),
		box-shadow 0.2s var(--beam-ease),
		background-color 0.2s var(--beam-ease),
		border-color 0.2s var(--beam-ease),
		color 0.2s var(--beam-ease);
}

:root .wp-element-button:hover,
:root .wp-block-button__link:hover {
	transform: var(--wp--custom--button--hover-transform, none);
	box-shadow: var(--wp--custom--button--hover-shadow, none);
}

:root .wp-block-button.is-style-outline > .wp-block-button__link {
	padding: 0.85em 1.6em;
	border: var(--wp--custom--button--outline-border, 1.5px solid currentColor);
}

:root .wp-block-button.is-style-outline > .wp-block-button__link:not(.has-background) {
	background-color: transparent;
}

:root .wp-block-button.is-style-outline > .wp-block-button__link:not(.has-background):hover {
	background-color: var(--wp--preset--color--accent);
	border-color: var(--wp--custom--button--outline-hover-border, var(--wp--preset--color--accent));
	color: var(--wp--preset--color--contrast);
}

/* -------------------------------------------------------------------------
 * 4. Header and navigation
 * ---------------------------------------------------------------------- */

.wp-site-blocks > header.wp-block-template-part {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 100;
	isolation: isolate;
	border-bottom: 1px solid transparent;
}

/* The blur lives on a pseudo-element so the mobile menu overlay still covers the whole screen. */
.wp-site-blocks > header.wp-block-template-part::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-color: color-mix(in srgb, var(--wp--preset--color--base) 86%, transparent);
	-webkit-backdrop-filter: saturate(1.6) blur(14px);
	backdrop-filter: saturate(1.6) blur(14px);
}

@supports (animation-timeline: scroll()) {
	.wp-site-blocks > header.wp-block-template-part {
		animation: beam-header-line linear both;
		animation-timeline: scroll();
		animation-range: 0 96px;
	}

	@keyframes beam-header-line {
		to {
			border-bottom-color: var(--wp--preset--color--line);
		}
	}
}

@media (max-width: 600px) {
	.wp-site-blocks > header.wp-block-template-part {
		top: 0;
	}
}

/* Site title with the smiling-sun mark. */
.wp-block-site-title.is-style-sun {
	display: flex;
	align-items: center;
	gap: 0.5em;
}

.wp-block-site-title.is-style-sun::before {
	content: "";
	flex: none;
	width: 1.2em;
	height: 1.2em;
	background: url("assets/images/mark.svg") center / contain no-repeat;
	transition: transform 0.6s var(--beam-ease);
}

.wp-block-site-title.is-style-sun:hover::before {
	transform: rotate(-24deg) scale(1.06);
}

.wp-block-site-title.is-style-sun.has-text-align-center {
	justify-content: center;
}

.wp-block-navigation .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content,
.wp-block-navigation .wp-block-navigation-item__content[aria-current="page"] {
	text-decoration: underline;
	text-decoration-color: var(--wp--preset--color--accent);
	text-decoration-thickness: 0.14em;
	text-underline-offset: 0.3em;
}

.wp-block-navigation__responsive-container.is-menu-open {
	padding: var(--wp--preset--spacing--40);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	padding-top: var(--wp--preset--spacing--60);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-family: var(--beam-heading-font);
	font-size: var(--wp--preset--font-size--x-large);
	font-variation-settings: var(--wp--custom--heading--font-variation, normal);
	font-weight: 400;
	letter-spacing: -0.02em;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	align-items: flex-start !important;
}

@media (max-width: 480px) {
	.beam-header-cta {
		display: none !important;
	}
}

/* -------------------------------------------------------------------------
 * 5. Images and media
 * ---------------------------------------------------------------------- */

.wp-block-image.alignfull img,
.wp-block-post-featured-image.alignfull img,
.wp-block-post-featured-image.alignfull :where(a) {
	border-radius: 0;
}

.wp-block-image.is-style-rounded img {
	border-radius: 9999px;
}

/* Arch: a portrait frame with a little sun peeking over the top. */
.wp-block-image.is-style-arch {
	position: relative;
	isolation: isolate;
}

.wp-block-image.is-style-arch img {
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	object-position: center bottom;
	border-radius: 50% 50% var(--beam-radius-l) var(--beam-radius-l) / 40% 40% var(--beam-radius-l) var(--beam-radius-l);
	background-color: var(--wp--custom--portrait--background, var(--wp--preset--color--accent-2));
}

.wp-block-image.is-style-arch::after {
	content: "";
	position: absolute;
	z-index: -1;
	top: -3%;
	right: -5%;
	width: 30%;
	aspect-ratio: 1;
	border-radius: 50%;
	background: var(--wp--preset--color--accent);
}

.wp-block-image.is-style-arch::before {
	content: "";
	display: var(--wp--custom--decor--display, none);
	position: absolute;
	z-index: 1;
	bottom: 14%;
	left: -7%;
	width: 17%;
	aspect-ratio: 1;
	background-color: var(--wp--preset--color--accent-6);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M20 0c1.6 10.4 9.6 18.4 20 20-10.4 1.6-18.4 9.6-20 20-1.6-10.4-9.6-18.4-20-20C10.4 18.4 18.4 10.4 20 0z'/%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 40 40'%3E%3Cpath d='M20 0c1.6 10.4 9.6 18.4 20 20-10.4 1.6-18.4 9.6-20 20-1.6-10.4-9.6-18.4-20-20C10.4 18.4 18.4 10.4 20 0z'/%3E%3C/svg%3E") center / contain no-repeat;
	animation: beam-twinkle 3.2s ease-in-out infinite;
}

@keyframes beam-twinkle {
	0%,
	100% {
		transform: scale(1) rotate(0deg);
	}

	50% {
		transform: scale(0.82) rotate(18deg);
	}
}

/* Featured images: soft zoom on hover, playful lift in the Bright style. */
.wp-block-post-featured-image :where(a) {
	display: block;
	overflow: hidden;
	border: var(--wp--custom--card--border, 0 solid transparent);
	border-radius: var(--beam-radius-m);
	transition: transform 0.3s var(--beam-ease), box-shadow 0.3s var(--beam-ease);
}

.wp-block-post-featured-image :where(a) img {
	transition: transform 0.8s var(--beam-ease);
}

.wp-block-post-featured-image a:hover img {
	transform: scale(1.04);
}

.wp-block-post-featured-image a:hover {
	transform: var(--wp--custom--card--hover-transform, none);
	box-shadow: var(--wp--custom--card--hover-shadow, none);
}

/* Homepage hero: a soft, sunny stage that folds into a framed window when animations are on. */
.beam-hero__inner {
	position: relative;
	isolation: isolate;
}

.beam-hero__inner::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		radial-gradient(46% 60% at 80% 28%, var(--wp--custom--stage--glow--warm, transparent), transparent 70%),
		radial-gradient(42% 56% at 6% 96%, var(--wp--custom--stage--glow--soft, transparent), transparent 70%),
		radial-gradient(34% 42% at 46% 56%, var(--wp--custom--stage--glow--cool, transparent), transparent 72%),
		var(--wp--custom--stage--base, var(--wp--preset--color--base-2));
}

/* The caption only shows once the hero has folded (see assets/css/motion.css). */
.wp-site-blocks .beam-hero__caption {
	display: none;
}

/* -------------------------------------------------------------------------
 * 6. Cards and sections
 * ---------------------------------------------------------------------- */

:where(.wp-block-group.has-background, .wp-block-column.has-background):where(:not(.alignfull)) {
	border: var(--wp--custom--card--border, 0 solid transparent);
	border-radius: var(--beam-radius-l);
	box-shadow: var(--wp--custom--card--shadow, none);
}

.beam-lift {
	transition: transform 0.3s var(--beam-ease), box-shadow 0.3s var(--beam-ease);
}

.beam-lift:hover {
	transform: var(--wp--custom--card--hover-transform, translateY(-4px));
	box-shadow: var(--wp--custom--card--hover-shadow, var(--wp--preset--shadow--soft));
}

/* Floating sparkles around a hero (Bright style only). */
.beam-sparkles {
	position: relative;
}

.beam-sparkles::before,
.beam-sparkles::after {
	content: "";
	display: var(--wp--custom--decor--display, none);
	position: absolute;
	pointer-events: none;
	width: clamp(22px, 3vw, 44px);
	aspect-ratio: 1;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M20 0c1.6 10.4 9.6 18.4 20 20-10.4 1.6-18.4 9.6-20 20-1.6-10.4-9.6-18.4-20-20C10.4 18.4 18.4 10.4 20 0z'/%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 40 40'%3E%3Cpath d='M20 0c1.6 10.4 9.6 18.4 20 20-10.4 1.6-18.4 9.6-20 20-1.6-10.4-9.6-18.4-20-20C10.4 18.4 18.4 10.4 20 0z'/%3E%3C/svg%3E") center / contain no-repeat;
	animation: beam-twinkle 3.6s ease-in-out infinite;
}

.beam-sparkles::before {
	top: 10%;
	left: 2%;
	background-color: var(--wp--preset--color--accent-3);
}

.beam-sparkles::after {
	right: 3%;
	bottom: 8%;
	background-color: var(--wp--preset--color--accent-5);
	animation-delay: -1.8s;
}

@media (max-width: 600px) {
	.beam-sparkles::before {
		display: none;
	}
}

/* Client name strip. */
.beam-logos > .beam-marquee {
	flex: 1 1 32rem;
	min-width: 0;
}

@media (max-width: 781px) {
	.beam-logos > .is-style-eyebrow {
		flex-basis: 100%;
	}

	/* Names and the pause button share a row. */
	.beam-logos > .beam-marquee {
		flex-basis: 0;
	}
}

.beam-logos p {
	margin: 0;
	opacity: 0.8;
	transition: opacity 0.2s;
}

.beam-logos p:hover {
	opacity: 1;
}

/* Big numbers. */
.beam-stat .beam-display {
	margin-bottom: 0.15em;
}

/* Small pill label, e.g. "Most loved". */
.beam-badge {
	display: inline-block;
	width: fit-content;
	margin: 0;
	padding: 0.3em 0.85em;
	border: var(--wp--custom--button--border, 0 solid transparent);
	border-radius: var(--beam-radius-pill);
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	line-height: 1.4;
}

.is-style-section-feature .beam-badge {
	border-color: transparent;
	background: var(--wp--custom--feature--button-background, var(--wp--preset--color--accent));
	color: var(--wp--custom--feature--button-text, var(--wp--preset--color--contrast));
}

/* Project facts row at the top of a case study. */
.beam-facts {
	padding-block: 1.25rem;
	border-block: 1px solid var(--wp--preset--color--line);
}

.beam-facts p {
	margin: 0;
}

.beam-facts .is-style-eyebrow {
	margin-bottom: 0.35rem;
}

/* Numbered steps. */
.beam-step-number {
	display: inline-grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	border: var(--wp--custom--button--border, 0 solid transparent);
	border-radius: 50%;
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--contrast);
	font-weight: 700;
}

/* -------------------------------------------------------------------------
 * 7. Lists, chips, separators, quotes, details
 * ---------------------------------------------------------------------- */

ul.is-style-checks {
	padding-inline-start: 0;
	list-style: none;
}

ul.is-style-checks > li {
	position: relative;
	padding-inline-start: 2em;
}

ul.is-style-checks > li + li {
	margin-top: 0.55em;
}

ul.is-style-checks > li::before {
	content: "";
	position: absolute;
	top: 0.2em;
	left: 0;
	width: 1.3em;
	height: 1.3em;
	border-radius: 50%;
	background: var(--wp--preset--color--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-7' fill='none' stroke='%231C1B19' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 72% no-repeat;
}

.is-style-section-feature ul.is-style-checks > li::before {
	background-color: var(--wp--custom--feature--check, var(--wp--preset--color--accent));
}

/* Filter chips for project types and tags. */
.wp-block-categories.is-style-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.wp-block-categories.is-style-chips li {
	margin: 0;
}

.beam-filters {
	gap: 0.5rem !important;
}

.beam-filters > * {
	margin: 0 !important;
}

.wp-block-categories.is-style-chips a,
.beam-chip a {
	display: inline-block;
	padding: 0.55em 1.15em;
	border: var(--wp--custom--chip--border, 1px solid var(--wp--preset--color--line));
	border-radius: var(--beam-radius-pill);
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	line-height: 1.2;
	text-decoration: none;
	transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}

.wp-block-categories.is-style-chips a:hover,
.wp-block-categories.is-style-chips .current-cat > a,
.beam-chip a:hover,
.beam-chip.is-active a {
	border-color: var(--wp--preset--color--contrast);
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}

.wp-block-post-terms.is-style-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
}

.wp-block-post-terms.is-style-chips a {
	display: inline-block;
	padding: 0.35em 0.85em;
	border-radius: var(--beam-radius-pill);
	background: var(--wp--preset--color--base-2);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	letter-spacing: 0.02em;
	line-height: 1.3;
}

.wp-block-post-terms.is-style-chips .wp-block-post-terms__separator {
	display: none;
}

/* Wavy separator. */
.wp-block-separator.is-style-wavy {
	width: 100%;
	max-width: 132px;
	height: 14px;
	border: 0 !important;
	background-color: currentColor !important;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='14' viewBox='0 0 28 14'%3E%3Cpath d='M0 7C3.5 2 10.5 2 14 7S24.5 12 28 7' fill='none' stroke='%23000' stroke-width='2.6'/%3E%3C/svg%3E") repeat-x 0 50% / 28px 14px;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='14' viewBox='0 0 28 14'%3E%3Cpath d='M0 7C3.5 2 10.5 2 14 7S24.5 12 28 7' fill='none' stroke='%23000' stroke-width='2.6'/%3E%3C/svg%3E") repeat-x 0 50% / 28px 14px;
}

.wp-block-separator.is-style-wavy:not(.has-text-color) {
	color: var(--wp--preset--color--accent);
}

.wp-block-separator.is-style-wavy.aligncenter,
.has-text-align-center + .wp-block-separator.is-style-wavy {
	margin-inline: auto;
}

/* Quotes and testimonials. */
.wp-block-quote {
	position: relative;
	margin-inline: 0;
}

.wp-block-quote::before {
	content: "\201C";
	display: block;
	height: 0.5em;
	margin-bottom: 0.15em;
	color: var(--wp--custom--quote--mark, var(--wp--preset--color--accent-6));
	font-family: var(--beam-heading-font);
	font-size: 4.25rem;
	line-height: 1;
}

.wp-block-quote p {
	font-family: var(--beam-heading-font);
	font-variation-settings: var(--wp--custom--heading--font-variation, normal);
	letter-spacing: -0.01em;
}

.wp-block-quote cite {
	display: block;
	margin-top: 1.25rem;
	color: var(--wp--preset--color--contrast-2);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.5;
}

.wp-block-quote cite strong {
	display: block;
	color: var(--wp--preset--color--contrast);
	font-weight: 600;
}

.wp-block-pullquote blockquote p {
	font-family: var(--beam-heading-font);
	font-variation-settings: var(--wp--custom--heading--font-variation, normal);
}

/* FAQ accordions. */
.wp-block-details summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	cursor: pointer;
	font-size: var(--wp--preset--font-size--large);
	font-weight: 500;
	list-style: none;
}

.wp-block-details summary::-webkit-details-marker {
	display: none;
}

.wp-block-details summary::after {
	content: "+";
	flex: none;
	display: inline-grid;
	place-items: center;
	width: 1.6em;
	height: 1.6em;
	border-radius: 50%;
	background: var(--wp--preset--color--base-2);
	font-size: 1rem;
	font-weight: 400;
	transition: transform 0.3s var(--beam-ease), background-color 0.3s;
}

.wp-block-details[open] summary::after {
	transform: rotate(45deg);
	background: var(--wp--preset--color--accent);
}

.wp-block-details > :not(summary) {
	margin-top: 0.75rem;
	color: var(--wp--preset--color--contrast-2);
}

/* -------------------------------------------------------------------------
 * 8. Social links, search, pagination, comments
 * ---------------------------------------------------------------------- */

.wp-block-social-links.is-style-logos-only:not(.has-icon-color) .wp-social-link {
	color: currentColor;
}

.wp-block-social-links .wp-social-link {
	transition: transform 0.25s var(--beam-ease);
}

.wp-block-social-links .wp-social-link:hover {
	transform: translateY(-2px) rotate(-6deg);
}

.wp-block-search__input {
	padding: 0.8em 1.2em;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--beam-radius-pill);
	background: var(--wp--preset--color--base);
	color: inherit;
	font: inherit;
}

.wp-block-search__button {
	margin-inline-start: 0.5rem;
}

.wp-block-query-pagination {
	gap: 0.5rem;
}

.wp-block-query-pagination-numbers .page-numbers {
	display: inline-grid;
	place-items: center;
	min-width: 2.5em;
	height: 2.5em;
	padding-inline: 0.4em;
	border-radius: var(--beam-radius-pill);
}

.wp-block-query-pagination-numbers .page-numbers.current {
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}

.wp-block-avatar img {
	border-radius: 50%;
}

.wp-block-comment-template {
	padding-inline-start: 0;
}

.wp-block-comment-template ol {
	padding-inline-start: var(--wp--preset--spacing--40);
}

/* Forms from comments and popular form plugins. */
:where(.comment-form, .wp-block-post-comments-form, .wpcf7, .wpforms-container, .fluentform, .frm_forms, .gform_wrapper) :is(input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="hidden"]), textarea, select) {
	width: 100%;
	padding: 0.8em 1em;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--beam-radius-s);
	background: var(--wp--preset--color--base);
	color: inherit;
	font: inherit;
	transition: border-color 0.2s, box-shadow 0.2s;
}

:where(.comment-form, .wp-block-post-comments-form, .wpcf7, .wpforms-container, .fluentform, .frm_forms, .gform_wrapper) :is(input, textarea, select):focus {
	border-color: var(--wp--preset--color--contrast);
	outline: none;
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--wp--preset--color--accent) 45%, transparent);
}

:where(.wpcf7-submit, .wpforms-submit, .ff-btn-submit, .frm_button_submit, .gform_button) {
	padding: 0.85em 1.6em !important;
	border: var(--wp--custom--button--border, 0 solid transparent) !important;
	border-radius: var(--beam-radius-pill) !important;
	background: var(--wp--preset--color--contrast) !important;
	color: var(--wp--preset--color--base) !important;
	cursor: pointer;
	font: inherit;
	font-weight: 500;
}

/* -------------------------------------------------------------------------
 * 9. Footer
 * ---------------------------------------------------------------------- */

.beam-footer a:where(:not(.wp-element-button)) {
	text-decoration: none;
}

.beam-footer a:where(:not(.wp-element-button)):hover {
	text-decoration: underline;
}

.beam-footer .wp-block-navigation {
	gap: 0.55rem;
}

.beam-footer-email a {
	text-decoration: underline !important;
	text-decoration-color: var(--wp--preset--color--accent) !important;
	text-decoration-thickness: 0.08em !important;
	text-underline-offset: 0.18em;
}

/* -------------------------------------------------------------------------
 * 10. WooCommerce
 * ---------------------------------------------------------------------- */

.wc-block-components-product-image,
.wp-block-woocommerce-product-image {
	overflow: hidden;
	border-radius: var(--beam-radius-m);
	background: var(--wp--preset--color--base-2);
}

.wc-block-components-product-image img,
.wp-block-woocommerce-product-image img,
.woocommerce-product-gallery img {
	border-radius: var(--beam-radius-m);
}

.wc-block-components-product-price,
.wp-block-woocommerce-product-price {
	font-weight: 500;
}

.wc-block-components-product-sale-badge,
.wp-block-woocommerce-product-sale-badge .wc-block-components-product-sale-badge {
	padding: 0.35em 0.85em;
	border: 0;
	border-radius: var(--beam-radius-pill);
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	text-transform: none;
}

.wc-block-mini-cart__badge {
	background: var(--wp--preset--color--accent) !important;
	color: var(--wp--preset--color--contrast) !important;
}

.wc-block-components-button:not(.is-link) {
	border-radius: var(--beam-radius-pill);
}

.woocommerce-breadcrumb,
.wc-block-breadcrumbs {
	color: var(--wp--preset--color--contrast-2);
	font-size: var(--wp--preset--font-size--x-small);
}

/* Classic "Sale!" badge on product galleries. */
:root .woocommerce span.onsale {
	top: 1rem;
	left: 1rem;
	min-width: 0;
	min-height: 0;
	padding: 0.35em 0.9em;
	border-radius: var(--beam-radius-pill);
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	line-height: 1.4;
}

/* Product pages: a calmer title and section headings. */
body.single-product .wp-block-post-title {
	font-size: var(--wp--preset--font-size--xx-large);
}

.woocommerce-tabs .panel > h2:first-child,
.wp-block-woocommerce-product-details h2 {
	font-size: var(--wp--preset--font-size--x-large);
}

.woocommerce .quantity .qty {
	min-height: 2.9em;
	padding: 0.6em 0.4em;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--beam-radius-pill);
	background: var(--wp--preset--color--base);
	color: inherit;
	font: inherit;
}

.woocommerce-ordering select,
.wc-block-catalog-sorting select {
	padding: 0.55em 2.4em 0.55em 1em;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--beam-radius-pill);
	background: var(--wp--preset--color--base) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%2357534C' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 1em center / 11px;
	color: inherit;
	font: inherit;
	font-size: var(--wp--preset--font-size--small);
	-webkit-appearance: none;
	appearance: none;
}

/* -------------------------------------------------------------------------
 * 11. Link in bio (Blank canvas template)
 * ---------------------------------------------------------------------- */

.beam-linkinbio .wp-block-button {
	width: 100%;
}

.beam-linkinbio .wp-block-button__link {
	width: 100%;
}