/*
 Theme Name:   Elegant Bakery
 Description:  Improvise Child Theme for Elegant Bakery
 Author:       Crack-Ajax
 Author URI:   https://crack-ajax.com
 Template:     improvise
 Version:      1.52
*/

/*********************************************************************************************************************
 *********** Design tokens
 *
 * Brand colors that have an Improvise slot are set in Theme Settings → Theme Colors and used as
 * var(--color-*): primary = cocoa, secondary = rose, tertiary = sand, quaternary = pistachio,
 * accent = link brown, dark-text = cocoa (headings), light-text = body brown. Note: Improvise colors every
 * p/li with --color-light-text, so it is the body-copy color here, not a light-on-dark color.
 *
 * These are bespoke Pâtisserie Blanche shades with no theme slot (the mockup's supporting tones).
 ********************************************************************************************************************/

:root {
	--eb-cream:          #FBF6EF;	/* page background and light-on-dark text */
	--eb-blush:          #F2DCD6;
	--eb-pistachio-deep: #34491F;
	--eb-berry:          #6B2A35;	/* deep burgundy, a step darker than the secondary color */
	--eb-line:           #CDB9AA;	/* inactive pill borders */
	--eb-footer-link:    #F2C9C0;
	--eb-h1-size:        clamp(46px, 6vw, 76px);	/* every H1: the homepage hero and inner page titles */
	--eb-radius-l:       28px;
	--eb-radius-m:       20px;

	/* Side gutter that holds section content to --wide-width, centred. Same steps as the parent's
	   --improvise-full-group-pad (which it only sets on plain full-width groups), so the hero and
	   the background sections line up with them at every width. */
	--eb-gutter: max(var(--xl-spacing), calc((100vw - var(--wide-width)) / 2));
	@media (max-width: 1200px) { --eb-gutter: var(--l-spacing); }
	@media (max-width: 992px) { --eb-gutter: var(--s-spacing); }
	@media (max-width: 480px) { --eb-gutter: calc(var(--s-spacing) / 2); }
}

body.improvise,
body:where(.editor-styles-wrapper) {
	background-color: var(--eb-cream);
	background-image: url(images/grain.svg);	/* faint paper grain; see "Depth" below */
	color: var(--color-dark-text);
}

/*********************************************************************************************************************
 *********** Header, top bar, footer
 ********************************************************************************************************************/

/* Placeholder logo: the site name as live text in Updock (no custom logo is set, so Improvise prints
   .site-info). It shrinks with one animated property, font-size, when the header collapses on scroll. */
.document-header .site-info {
	a {
		display: block;
		font-family: var(--font-accent);
		font-size: 56px;
		font-weight: 400;
		line-height: 1;
		color: var(--color-header-text);
		text-decoration: none;
		transition: font-size 0.4s ease;
		@media (max-width: 480px) { font-size: 44px; }
	}
	.fixed & a { font-size: 42px; }
	/* The site tagline (Settings → General), "Since 2001": small Lora caps centered under the wordmark.
	   The left padding matches the letter-spacing, which otherwise trails after the last letter and
	   nudges the text left of center. */
	align-items: center;
	p {
		margin: 2px 0 0;
		padding-left: 0.24em;
		font-family: var(--font-primary-heading);
		font-size: 12px;
		font-weight: 400;
		line-height: 1;
		letter-spacing: 0.24em;
		text-transform: uppercase;
		color: var(--color-secondary);
		white-space: nowrap;
		transition: font-size 0.4s ease;
		@media (max-width: 480px) { font-size: 10px; letter-spacing: 0.2em; padding-left: 0.2em; }
	}
	.fixed & p { font-size: 10px; }
}

/* The last primary-nav item's CTA, given this class in Appearance → Menus. */
#primary-menu > li.eb-nav-cta > a {
	background-color: var(--color-primary);
	color: var(--eb-cream);
	border-radius: 999px;
	padding: 14px 24px;
	&:hover { background-color: var(--color-secondary); color: var(--color-white); }
}

.top-bar .top-nav {
	justify-content: center;
	/* The parent's bar is one line tall, so the message stays on one line (ellipsis as a last resort). */
	li { max-width: 100%; }
	a {
		display: block;
		font-size: 14px;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		@media (max-width: 480px) { font-size: 13px; padding-inline: 8px; }
		@media (max-width: 374px) { font-size: 12px; }
	}
}

.document-footer a { color: var(--eb-footer-link); }
.document-footer .eb-footer-brand {
	font-family: var(--font-accent);
	font-size: 44px;
	line-height: 1;
	color: var(--color-footer-text);
}

/*********************************************************************************************************************
 *********** Buttons — pill shape and the brand font everywhere
 ********************************************************************************************************************/

.wp-block-button__link {
	border-radius: 999px;
	font-family: var(--font-primary);
	font-size: 16px;
	font-weight: 500;
}

/* Padding at (0,3,1) so it also beats core's outline-only `.wp-block-button.is-style-outline >
   .wp-block-button__link { padding: .667em 1.333em }`, which made outline buttons 11px shorter. */
body .wp-block-buttons .wp-block-button > .wp-block-button__link {
	padding: 16px 26px;
	@media (max-width: 480px) { padding: 14px 22px; }
}

/* Outline: transparent with a cocoa line, instead of the parent's accent-filled default. The body
   prefix outranks the parent's :not(:hover):not(.has-background) chain. Border width stays the
   parent's 2px in every state, the same as fill buttons' transparent border, so both kinds are the
   same height and hovering never changes a button's size. Leave the text color unset in the editor:
   a palette text color is !important and would stay cocoa on the cocoa hover. */
body .wp-block-button.is-style-outline > .wp-block-button__link:not(:hover) {
	&:not(.has-background) { background-color: transparent; }
	&:not(.has-text-color) { color: var(--color-primary); border-color: var(--color-primary); }
}
body .wp-block-button.is-style-outline > .wp-block-button__link:hover {
	background-color: var(--color-primary);
	border-color: var(--color-primary);
	color: var(--eb-cream);
}

/* Custom-colored fill buttons (pistachio-deep, berry) have no preset hover pair. */
.wp-block-button:not(.is-style-outline) > .wp-block-button__link.has-background[style*="background-color"]:hover {
	filter: brightness(1.15);
}

body .wp-block-buttons .wp-block-button.eb-btn-sm > .wp-block-button__link {
	font-size: 14px;
	padding: 12px 20px;
}

.eb-actions,
.eb-section .wp-block-buttons {
	margin: 32px 0 8px;
	gap: 12px;	/* px: the flex row's height is content-sized, so a % row-gap would collapse when it wraps */
	@media (max-width: 480px) { margin-top: 24px; }
}

/*********************************************************************************************************************
 *********** Type — eyebrow headings, display lines, lede
 *
 * Section headings (H2) carry the SEO wording and render as the mockup's small caps "eyebrow"; the
 * large Fraunces line under each is a paragraph (.eb-display).
 ********************************************************************************************************************/

/* All H1s match the homepage hero (inner pages print the title as h1.page-title). The parent's own h1
   sizes, including its 2rem at <=540px, are element-level, so this wins. */
h1 {
	font-size: var(--eb-h1-size);
	line-height: 1.05;
	font-weight: 400;
	letter-spacing: -0.01em;
}

/* Eyebrows are paragraphs; the large Lora line under each is the section's H2. */
.eb-eyebrow {
	font-family: var(--font-primary);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--color-secondary);
	margin: 0 0 12px;
	&.eb-eyebrow-pistachio { color: var(--eb-pistachio-deep); }
	&.eb-eyebrow-berry { color: var(--eb-berry); }
}

.eb-pill {
	display: inline-block;
	background-color: var(--color-quaternary);
	color: var(--eb-pistachio-deep);
	font-family: var(--font-primary);
	font-size: 14px;
	font-weight: 500;
	line-height: 1.4;
	padding: 8px 16px;
	border-radius: 999px;
	margin: 0 0 28px;
	/* Inside a heading (the homepage H1 carries the pill so its keywords are part of the heading),
	   it sits on its own line above the headline and drops the heading's letter-spacing. */
	:is(h1, h2) > & {
		display: block;
		width: fit-content;
		letter-spacing: normal;
	}
}

.eb-display {
	font-family: var(--font-primary-heading);
	font-weight: 400;
	font-size: clamp(34px, 4vw, 48px);
	line-height: 1.12;
	letter-spacing: -0.01em;
	color: var(--color-dark-text);
	margin: 0 0 16px;
	/* The emphasized word in a display heading is the decorative Updock accent. Updock runs small and
	   has no italic, so it's enlarged and set upright. */
	em {
		font-family: var(--font-accent);
		font-style: normal;
		font-size: 1.32em;
		line-height: 0.8;
		letter-spacing: 0;
		color: var(--color-secondary);
	}
	&.eb-display-xl {
		font-size: var(--eb-h1-size);
		line-height: 1.05;
		margin-bottom: 28px;
	}
	&.eb-display-sm {
		font-size: clamp(26px, 2.5vw, 32px);
		line-height: 1.18;
	}
}

.eb-lede {
	font-size: 19px;
	line-height: 1.6;
	color: var(--color-light-text);
	max-width: 520px;
	margin-bottom: 0;
}

.eb-intro {
	font-size: 17px;
	line-height: 1.65;
	color: var(--color-light-text);
	margin-bottom: 0;
}

.eb-center {
	text-align: center;
	.eb-intro { max-width: 560px; margin-left: auto; margin-right: auto; }
}

/*********************************************************************************************************************
 *********** Section shells
 ********************************************************************************************************************/

/* Full-width groups: the parent pads them to --wide-width; only the vertical rhythm is set here. */
.wp-block-group.alignfull.eb-section {
	margin-top: 0;
	margin-bottom: 0;
	padding-top: 96px;
	padding-bottom: 96px;
	@media (max-width: 780px) { padding-top: 64px; padding-bottom: 64px; }
}
/* Background sections get the parent's flat --l-spacing side padding instead, which lets their
   content run past --wide-width on large screens (1720px wide at 1920). */
.wp-block-group.alignfull.eb-section.has-background {
	padding-left: var(--eb-gutter);
	padding-right: var(--eb-gutter);
}
/* Two plain cream sections in a row share one gap instead of stacking two. */
.eb-section:not(.has-background) + .eb-section:not(.has-background) { padding-top: 0; }

/* Nested utility groups shouldn't pick up the parent's 50px group margins. */
.eb-section .wp-block-group:not(.eb-flavor-panel),
.eb-hero .wp-block-group {
	margin-top: 0;
	margin-bottom: 0;
}

.eb-heading-stack { margin-bottom: 40px !important; }
.eb-section-head {
	margin-bottom: 40px !important;
	gap: 16px;	/* px: flex row wraps with a content-sized height */
	.eb-heading-stack { margin-bottom: 0 !important; }
	.eb-display { margin-bottom: 0; }
}
.eb-more {
	margin: 0;
	a { font-weight: 500; color: var(--color-accent); }
}

/*********************************************************************************************************************
 *********** Hero (Cover block with a solid cream overlay)
 ********************************************************************************************************************/

.page-content > .wp-block-cover.eb-hero:first-child { margin-bottom: 0; }

/* Content runs the full --wide-width like the sections below, instead of the parent's cover
   container (--wide-width minus --xl-spacing padding on each side). */
.eb-hero {
	min-height: 0;
	> .wp-block-cover__inner-container {
		max-width: none;
		padding: 40px var(--eb-gutter) 96px;
		@media (max-width: 780px) { padding-bottom: 64px; }
	}
}

/* Compact hero (Order Inquiry): a shorter photo and less padding, so the form below shows without scrolling.
   On phones the photo is hidden, so the form follows the heading directly. */
.eb-hero.eb-hero-compact > .wp-block-cover__inner-container {
	padding-top: 40px;
	padding-bottom: 48px;
	@media (max-width: 780px) { padding-bottom: 32px; }
}
.eb-hero-compact .eb-hero-cols > .wp-block-column:last-child { @media (max-width: 780px) { display: none; } }
.eb-hero-compact + .eb-section.wp-block-group.alignfull { padding-top: 24px; }

/* Hero ribbons that run on into the next section and fade out, instead of stopping at the hero's edge. */
.wp-block-cover.eb-hero.eb-hero-flow {
	overflow: visible;
	z-index: 0;
	&::after {
		inset: 0 0 -320px;
		-webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent);
		mask-image: linear-gradient(to bottom, #000 55%, transparent);
	}
	+ .eb-section { position: relative; z-index: 1; }
}

.eb-hero-cols {
	column-gap: 5%;
	row-gap: 48px;	/* px: stacked columns have an auto height, so a % row-gap resolves to 0 */
}

/*********************************************************************************************************************
 *********** Photos — Image blocks cropped to the mockup's frames
 ********************************************************************************************************************/

.wp-block-image:is(.eb-photo-arch, .eb-photo-portrait) {
	margin: 0;
	img {
		display: block;
		width: 100%;
		object-fit: cover;
	}
}

.wp-block-image.eb-photo-arch {
	max-width: 480px;
	margin: 0 auto;
	img {
		height: 580px;
		border-radius: 240px 240px 24px 24px;
		@media (max-width: 780px) { height: 420px; }
	}
}

/* A shorter arch photo, for heroes that should leave room for the content below. */
.wp-block-image.eb-photo-arch.eb-photo-short {
	max-width: 400px;
	img { height: 440px; }
}

/* Tall photos whose top would otherwise be cropped by the arch: sits nearer the top, not flush, so the base still shows. */
.wp-block-image.eb-photo-arch.eb-photo-top img { object-position: center 24%; }

.wp-block-image.eb-photo-portrait img {
	height: 460px;
	object-position: center top;
	border-radius: var(--eb-radius-l);
	@media (max-width: 780px) { height: 360px; }
}


/*********************************************************************************************************************
 *********** Showroom case — copy beside a 2x2 grid of photos
 ********************************************************************************************************************/

.eb-case-cols {
	column-gap: 6%;
	row-gap: 40px;	/* px: stacked columns have an auto height */
}

.eb-photo-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	column-gap: 4%;
	row-gap: 16px;	/* px: grid rows are auto height, so a % row-gap would resolve to 0 */
	.wp-block-image { margin: 0; }
	img {
		display: block;
		width: 100%;
		height: 210px;
		object-fit: cover;
		border-radius: var(--eb-radius-m);
		@media (max-width: 600px) { height: 150px; }
	}
}

/*********************************************************************************************************************
 *********** Wedding / Occasion / Pastries panels
 ********************************************************************************************************************/

.wp-block-columns.eb-panels {
	column-gap: 2%;
	row-gap: 24px;	/* px: stacked panels have an auto height */
}

.wp-block-column.eb-panel {
	display: flex;
	flex-direction: column;
	padding: 48px;
	border-radius: var(--eb-radius-l);
	margin-bottom: 0;
	/* Soft two-layer lift, tinted cocoa rather than grey so it sits warmly on the cream. */
	box-shadow: 0 1px 2px color-mix(in srgb, var(--color-primary) 6%, transparent),
		0 10px 28px -8px color-mix(in srgb, var(--color-primary) 16%, transparent);
	@media (max-width: 1100px) { padding: 32px; }
	> p:not(.eb-display):not(.eb-eyebrow) {
		font-size: 16px;
		line-height: 1.6;
	}
	/* The last body paragraph grows so the buttons line up; earlier paragraphs and eyebrows keep their own height. */
	> p:not(.eb-display):not(.eb-eyebrow):not(:has(~ p)) { flex-grow: 1; }
	.wp-block-buttons { margin-top: 32px; }
}

/*********************************************************************************************************************
 *********** Flavor explorer — tabs + panels (js/theme.js adds the tab behavior; without it every panel shows)
 ********************************************************************************************************************/

/* Two tab rows (Signature / More flavor options), each under a small label; one shared panel area. */
.eb-tabs-label {
	text-align: center;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--color-light-text);
	margin: 0 0 12px;
}

.eb-flavor-tabs {
	justify-content: center;
	margin: 0 0 32px !important;
	&.eb-flavor-tabs-more { margin-bottom: 48px !important; }
	body & .wp-block-button > .wp-block-button__link {
		font-size: 15px;
		padding: 12px 22px;
		@media (max-width: 600px) { font-size: 14px; padding: 9px 16px; }
	}
	@media (max-width: 600px) { gap: 8px; /* px: wrapping flex row with a content-sized height */ }
	body & .wp-block-button.is-style-outline > .wp-block-button__link:not(:hover):not([aria-selected="true"]) {
		border-color: var(--eb-line);
		color: var(--color-primary);
	}
	body & .wp-block-button.is-style-outline > .wp-block-button__link[aria-selected="true"] {
		background-color: var(--color-primary);
		border-color: var(--color-primary);
		color: var(--eb-cream);
	}
}

.wp-block-group.eb-flavor-panel {
	border-radius: var(--eb-radius-l);
	padding: 56px;
	margin: 0 0 24px;
	@media (max-width: 780px) { padding: 32px 24px; }
	&[hidden] { display: none; }
	.wp-block-columns { column-gap: 8%; row-gap: 32px; /* px: stacked columns have an auto height */ }
}

.eb-layers {
	display: flex;
	flex-direction: column;
	gap: 4px;	/* px: column-direction flex with a content-sized height */
}

p.eb-layer {
	margin: 0;
	border-radius: 6px;
	padding: 0 14px;
	display: flex;
	align-items: center;
	min-height: 34px;
	font-size: 13px;
	color: var(--color-dark-text);
	&.eb-layer-thin { min-height: 22px; font-size: 12px; }
	&.eb-layer-outline { box-shadow: inset 0 0 0 1px var(--color-tertiary); }
}

.eb-flavor-name {
	font-family: var(--font-primary-heading);
	font-weight: 400;
	font-size: clamp(30px, 3.4vw, 40px);
	margin-bottom: 16px;
}

/*********************************************************************************************************************
 *********** Craft + FAQ
 ********************************************************************************************************************/

.eb-craft .wp-block-columns {
	column-gap: 6%;
	row-gap: 32px;	/* px: stacked columns have an auto height */
}

/* Yoast FAQ block, which Improvise turns into a <details> accordion. White cards like the case
   cards, instead of the parent's secondary-colored boxes. */
.eb-faq {
	.eb-heading-stack,
	.eb-more { text-align: center; }
	.wp-block-yoast-faq-block {
		max-width: 880px;
		margin-left: auto;
		margin-right: auto;
		padding: 0;
	}
	.wp-block-yoast-faq-block .schema-faq-section {
		background: var(--color-white);
		border: 0;
		border-radius: var(--eb-radius-m);
		margin-bottom: 12px;
	}
	.wp-block-yoast-faq-block .schema-faq-question {
		font-family: var(--font-primary);
		font-size: 18px;
		font-weight: 500;
		line-height: 1.4;
		color: var(--color-dark-text);
		padding: 22px 64px 22px 28px;
		&::before, &::after { background: var(--color-secondary); }
		&::before { right: 28px; top: 50%; margin-top: -1px; }
		&::after { right: 34px; top: 50%; margin-top: -7px; }
	}
	.wp-block-yoast-faq-block .schema-faq-answer {
		font-size: 16px;
		line-height: 1.65;
		padding: 0 28px 24px;
	}
	.eb-more { margin-top: 24px; }
}

/*********************************************************************************************************************
 *********** Gravity Forms (Order Inquiry)
 *
 * The Orbital theme prints each form's colors in an inline #gform_wrapper_N rule, so the brand values
 * need !important to win.
 ********************************************************************************************************************/

.gform_wrapper.gform-theme {
	--gf-color-primary: var(--color-primary) !important;
	--gf-color-primary-rgb: 59, 38, 32 !important;
	--gf-color-primary-contrast: var(--eb-cream) !important;
	--gf-color-primary-contrast-rgb: 251, 246, 239 !important;
	--gf-color-primary-darker: #2B160F !important;
	--gf-color-primary-lighter: var(--color-secondary) !important;
	--gf-ctrl-border-color: var(--eb-line) !important;
	--gf-ctrl-radius: 12px !important;
	--gf-ctrl-btn-radius: 999px !important;
	--gf-font-family-base: var(--font-primary) !important;
	/* "In control" colors: the upload button, upload icon and the datepicker's selected day */
	--gf-color-in-ctrl-primary: var(--color-primary) !important;
	--gf-color-in-ctrl-primary-rgb: 59, 38, 32 !important;
	--gf-color-in-ctrl-primary-contrast: var(--eb-cream) !important;
	--gf-color-in-ctrl-primary-contrast-rgb: 251, 246, 239 !important;
	--gf-color-in-ctrl-primary-darker: #2B160F !important;
	--gf-color-in-ctrl-primary-lighter: var(--color-secondary) !important;
	--gf-ctrl-date-picker-cell-content-bg-color-hover: var(--color-tertiary) !important;
	margin-top: 40px;
	.gform_footer { margin-top: 24px; }
	.gform_button { font-size: 16px; font-weight: 500; padding: 16px 28px; height: auto; }

	/* Datepicker month/year dropdowns were a fixed 35px tall with 8px padding, clipping the text. */
	.gform-datepicker-calendar table.calendar select {
		height: auto;
		min-height: 40px;
		padding: 6px 36px 6px 14px;
		line-height: 1.4;
	}

	/* Tasting box flavors in columns instead of one long list. */
	.eb-max-4 .gfield_checkbox {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		column-gap: 2%;
		row-gap: 12px;	/* px: grid rows are auto height, so a % row-gap would resolve to 0 */
		@media (max-width: 600px) { grid-template-columns: repeat(2, 1fr); }
	}
}

/*********************************************************************************************************************
 *********** Depth — paper grain, hero ribbons, ribbon-wave section edges (all decorative, CSS only)
 ********************************************************************************************************************/

/* Grain on the surfaces that sit over the page background: colored sections and the hero's solid
   cream overlay. Cards stay clean white. */
.wp-block-group.alignfull.eb-section.has-background,
.eb-hero .wp-block-cover__background {
	background-image: url(images/grain.svg);
}

/* Satin ribbons sweeping behind the hero, between the cream overlay (z-index 1) and the content. */
.eb-hero {
	> .wp-block-cover__inner-container { z-index: 2; }
	&::after {
		content: "";
		position: absolute;
		inset: 0 -4%;
		z-index: 1;
		pointer-events: none;
		background: url(images/ribbon-hero.svg) center / cover no-repeat;
		@media (max-width: 780px) { opacity: 0.55; }
		@media (prefers-reduced-motion: no-preference) { animation: eb-ribbon-drift 18s ease-in-out infinite alternate; }
	}
}

@keyframes eb-ribbon-drift {
	from { transform: translate3d(0, 0, 0); }
	to   { transform: translate3d(-3%, 1.5%, 0); }
}

/* Colored sections get curved ribbon-wave top and bottom edges with a thin rose thread, instead of
   straight lines. The fill follows each section's color via --eb-wave-color, so a palette change in
   Theme Settings carries over. */
.wp-block-group.alignfull.eb-section.has-background {
	position: relative;
	--eb-wave-color: var(--color-tertiary);
	&.eb-craft, &.eb-blush { --eb-wave-color: var(--eb-blush); }

	&::before,
	&::after {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		height: 64px;
		pointer-events: none;
		background: url(images/wave-thread.svg) 0 0 / 100% 100% no-repeat, url(images/grain.svg), var(--eb-wave-color);
		-webkit-mask: url(images/wave-mask.svg) 0 0 / 100% 100% no-repeat;
		mask: url(images/wave-mask.svg) 0 0 / 100% 100% no-repeat;
		@media (max-width: 780px) { height: 36px; }
	}
	&::before {
		top: -63px;
		@media (max-width: 780px) { top: -35px; }
	}
	&::after {
		bottom: -63px;
		transform: scaleY(-1);
		@media (max-width: 780px) { bottom: -35px; }
	}
}

/*********************************************************************************************************************
 *********** Footer social row and form dropdowns
 ********************************************************************************************************************/

/* Social links: left-aligned with the footer columns, with room above the divider, and the menu
   item's title ("Follow us on Instagram") shown beside its icon instead of kept for screen readers
   only, so the whole label is the link. */
.document-footer .social-menu {
	width: auto;
	margin: 0 0 var(--m-spacing);
	ul {
		display: flex;
		flex-wrap: wrap;
		gap: 12px 40px;	/* px: a content-sized row, so % gaps would resolve to 0 */
		text-align: left;
	}
	li { margin: 0; }
	li a {
		display: inline-flex;
		align-items: center;
		gap: 10px;	/* px: inline-flex link sized to its content, so a % gap would resolve to 0 */
		font-size: 15px;
		text-decoration: none;
		&::before { margin: 0; }
		.screen-reader-text {
			position: static;
			width: auto;
			height: auto;
			margin: 0;
			overflow: visible;
			clip: auto;
			clip-path: none;
			white-space: nowrap;
		}
	}
}

/* Dropdowns: Gravity Forms fixes them at 38px and Improvise forces 8px vertical padding, which left
   18px inside the borders and clipped descenders (g, y). Less padding and an explicit line height
   fit the text at the same 38px as the text inputs beside them. */
/* Solid fields, so hero ribbons fading behind the form (Order Inquiry) don't show through. */
body .gform_wrapper.gform-theme .gfield :is(input:not([type=checkbox], [type=radio], [type=file], [type=submit]), select, textarea) {
	background-color: var(--eb-cream) !important;	/* !important: Gravity Forms' theme reset otherwise wins */
}

body .gform_wrapper.gform-theme .gfield select {
	padding-top: 4px !important;
	padding-bottom: 4px !important;
	line-height: 1.4;
}

/*********************************************************************************************************************
 *********** Cake Gallery block (blocks/cake-gallery)
 ********************************************************************************************************************/

.eb-cake-filters {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;	/* px: wrapping flex row with a content-sized height */
	margin: 0 0 32px;
}

/* Same pills as the flavor tabs. */
.eb-cake-filter {
	font-family: var(--font-primary);
	font-size: 15px;
	font-weight: 500;
	color: var(--color-primary);
	background: transparent;
	border: 2px solid var(--eb-line);
	border-radius: 999px;
	padding: 10px 20px;
	cursor: pointer;
	&:hover,
	&[aria-pressed="true"] { background: var(--color-primary); border-color: var(--color-primary); color: var(--eb-cream); }
	@media (max-width: 600px) { font-size: 14px; padding: 8px 14px; }
}

.eb-cake-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	column-gap: 2%;
	row-gap: 24px;	/* px: grid rows are auto height, so a % row-gap would resolve to 0 */
	@media (max-width: 1100px) { grid-template-columns: repeat(3, 1fr); }
	@media (max-width: 600px) { grid-template-columns: repeat(2, 1fr); row-gap: 16px; }
}

.eb-cake {
	margin: 0;
	&[hidden] { display: none; }
}

.eb-cake-open {
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	background: none;
	cursor: zoom-in;
	border-radius: var(--eb-radius-m);
	overflow: hidden;
	box-shadow: 0 1px 2px color-mix(in srgb, var(--color-primary) 6%, transparent),
		0 10px 24px -10px color-mix(in srgb, var(--color-primary) 22%, transparent);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
	img {
		display: block;
		width: 100%;
		height: auto;	/* the image's width/height attributes would otherwise override the square crop */
		aspect-ratio: 1;
		object-fit: cover;
	}
	&:hover,
	&:focus-visible { transform: translateY(-3px); }
	&:focus-visible { outline: 3px solid var(--color-secondary); outline-offset: 3px; }
}

.eb-cake-caption {
	margin: 10px 0 0;
	font-size: 14px;
	line-height: 1.4;
	color: var(--color-light-text);
	.eb-cake-id { font-weight: 700; letter-spacing: 0.06em; color: var(--color-dark-text); }
}

.eb-cake-more-wrap {
	text-align: center;
	margin: 40px 0 0;
	&[hidden] { display: none; }
}
.eb-cake-more {
	font-family: var(--font-primary);
	font-size: 16px;
	font-weight: 500;
	color: var(--color-primary);
	background: transparent;
	border: 2px solid var(--color-primary);
	border-radius: 999px;
	padding: 14px 26px;
	cursor: pointer;
	&:hover { background: var(--color-primary); color: var(--eb-cream); }
}

.eb-cake-dialog {
	width: min(920px, calc(100vw - 32px));
	max-height: calc(100vh - 32px);
	padding: 0;
	border: 0;
	border-radius: var(--eb-radius-l);
	background: var(--color-white);
	color: var(--color-dark-text);
	overflow: auto;
	&[open] {
		display: grid;
		grid-template-columns: 1.1fr 1fr;
		@media (max-width: 700px) { grid-template-columns: 1fr; }
	}
	&::backdrop { background: color-mix(in srgb, var(--color-primary) 70%, transparent); }
}
.eb-cake-dialog-img {
	display: block;
	width: 100%;
	height: 100%;
	max-height: 80vh;
	object-fit: cover;
	@media (max-width: 700px) { max-height: 50vh; }
}
.eb-cake-dialog-body {
	padding: 48px 40px 40px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	@media (max-width: 700px) { padding: 28px 24px 32px; }
	p { margin: 0 0 10px; }
	p[hidden] { display: none; }
	.wp-block-buttons { margin: 20px 0 0; }
}
.eb-cake-dialog-title {
	font-family: var(--font-primary-heading);
	font-size: 32px;
	line-height: 1.15;
	color: var(--color-dark-text);
}
.eb-cake-dialog-name { font-size: 18px; color: var(--color-dark-text); }
.eb-cake-dialog-help { font-size: 15px; line-height: 1.6; }
.eb-cake-close {
	position: absolute;
	top: 12px;
	right: 12px;
	width: 40px;
	height: 40px;
	border: 0;
	border-radius: 50%;
	background: var(--color-white);
	color: var(--color-primary);
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
	box-shadow: 0 2px 8px color-mix(in srgb, var(--color-primary) 25%, transparent);
	z-index: 1;
}

/*********************************************************************************************************************
 *********** Bakery Map block (blocks/map)
 ********************************************************************************************************************/

.eb-map-frame {
	position: relative;
	aspect-ratio: 4 / 3;
	border-radius: var(--eb-radius-l);
	overflow: hidden;
	background: var(--color-white) url(images/grain.svg);
	box-shadow: 0 1px 2px color-mix(in srgb, var(--color-primary) 6%, transparent),
		0 10px 28px -8px color-mix(in srgb, var(--color-primary) 16%, transparent);
	iframe { display: block; width: 100%; height: 100%; border: 0; }
}
.eb-map-preview {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 24px;
	/* soft street-grid hint behind the pin */
	background:
		repeating-linear-gradient(0deg, transparent 0 46px, color-mix(in srgb, var(--color-tertiary) 90%, transparent) 46px 48px),
		repeating-linear-gradient(90deg, transparent 0 62px, color-mix(in srgb, var(--color-tertiary) 90%, transparent) 62px 64px);
}
.eb-map-pin { width: 44px; height: 44px; fill: var(--color-secondary); margin-bottom: 8px; }
.eb-map-label { font-size: 17px; color: var(--color-dark-text); max-width: 320px; margin: 0 0 16px; }
.eb-map-load {
	font-family: var(--font-primary);
	font-size: 15px;
	font-weight: 500;
	color: var(--eb-cream);
	background: var(--color-primary);
	border: 0;
	border-radius: 999px;
	padding: 12px 24px;
	cursor: pointer;
	&:hover { background: var(--color-secondary); }
}
.eb-map-note { font-size: 13px; margin: 10px 0 0; }
.eb-map-directions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 24px;	/* px: inline links in a wrapping row */
	margin: 14px 0 0;
	a { font-weight: 500; color: var(--color-accent); }
}

/*********************************************************************************************************************
 *********** Inner-page sections (patterns/*.php, project-files/pages)
 ********************************************************************************************************************/

/* Centered band: closing calls to action and short single-message sections. */
.eb-cta {
	text-align: center;
	max-width: 760px;
	margin: 0 auto;
	.eb-intro { margin-left: auto; margin-right: auto; }
	.wp-block-buttons { justify-content: center; }
}

/* Lists inside text sections read like the intro copy. */
.eb-section .wp-block-list {
	margin: 8px 0 0;
	padding-left: 1.2em;
	li { font-size: 17px; line-height: 1.65; margin-bottom: 10px; }
}

/* Panel headings one level down (H3 in step and guide panels) keep the panel display size. */
.wp-block-column.eb-panel h3.eb-display { margin-bottom: 12px; }

/* A heading stack above panels needs room before the cards. */
.eb-section > .eb-heading-stack + .wp-block-columns.eb-panels { margin-top: 0; }
.eb-section .wp-block-columns.eb-panels + .wp-block-columns.eb-panels { margin-top: 24px; }

/*********************************************************************************************************************
 *********** 404 page (Improvise content-templates/content-404.php; text set in Theme Settings)
 ********************************************************************************************************************/

body.error404 main.not-found {
	/* The accent-colored Cover becomes the cream hero: grain, ribbons, full-size Lora H1. */
	.wp-block-cover {
		position: relative;
		overflow: hidden;
		min-height: 0 !important;
		padding: 80px 0 64px;
		background: var(--eb-cream) url(images/grain.svg) !important;	/* the palette background class is !important */
		&::after {
			content: "";
			position: absolute;
			inset: 0 -4%;
			pointer-events: none;
			opacity: 0.6;
			background: url(images/ribbon-hero.svg) center / cover no-repeat;
		}
		.wp-block-cover__inner-container { position: relative; z-index: 1; }
		h1 { color: var(--color-dark-text); font-size: var(--eb-h1-size) !important; margin: 0; }
	}
	h2 { font-size: clamp(26px, 2.5vw, 32px); margin-top: 56px; }
	/* "These links may help…" and "Try searching…" read as eyebrows. */
	h3 {
		font-family: var(--font-primary);
		font-size: 14px;
		font-weight: 700;
		letter-spacing: 0.16em;
		text-transform: uppercase;
		color: var(--color-secondary);
		margin: 32px 0 14px;
	}
	ul.is-style-two-columns {
		list-style: none;
		padding: 0;
		margin: 0;
		columns: auto;
		display: flex;
		flex-wrap: wrap;
		gap: 10px;	/* px: wrapping flex row with a content-sized height */
		li { margin: 0; }
		a {
			display: inline-block;
			padding: 10px 20px;
			border: 2px solid var(--eb-line);
			border-radius: 999px;
			color: var(--color-primary);
			font-weight: 500;
			text-decoration: none;
			&:hover { background: var(--color-primary); border-color: var(--color-primary); color: var(--eb-cream); }
		}
	}
	.wp-block-image img { border-radius: var(--eb-radius-l); }
	.wp-block-search__inside-wrapper { gap: 8px; max-width: 420px; }	/* px: inline wrapper sized to its fields */
	.wp-block-search__input {
		border: 2px solid var(--eb-line);
		border-radius: 999px;
		padding: 12px 20px;
		font-size: 16px;
	}
	.wp-block-search__button {
		border: 0;
		border-radius: 999px;
		background: var(--color-primary);
		color: var(--eb-cream);
		padding: 10px 18px;
		svg { fill: currentColor; }
	}
}

/*********************************************************************************************************************
 *********** Privacy notes under forms; Privacy Policy reading width
 ********************************************************************************************************************/

.eb-form-note {
	font-size: 14px;
	margin-top: 16px;
	a { color: var(--color-accent); }
}

body.privacy-policy .page-content > * { max-width: var(--restricted-width); }

/*********************************************************************************************************************
 *********** Our Story text and the Cake Sizes & Prices table (synced block, Occasion Cakes + How to Order)
 ********************************************************************************************************************/

.eb-story {
	max-width: var(--restricted-width);
	margin-inline: auto;
}

.eb-section-note { padding-block: 32px; }

figure.wp-block-table.eb-price-table {
	margin-top: 32px;
	margin-bottom: 0;
	overflow-x: auto;
	background: var(--eb-cream);
	border-radius: var(--eb-radius-l);
	box-shadow: 0 1px 2px color-mix(in srgb, var(--color-primary) 6%, transparent),
		0 10px 28px -8px color-mix(in srgb, var(--color-primary) 16%, transparent);
	table {
		width: 100%;
		min-width: 0;	/* the parent's min-width pushes columns off-screen on phones; four short columns fit */
		border-collapse: collapse;
		font-size: 16px;
		@media (max-width: 600px) { font-size: 14px; }
	}
	th, td {
		padding: 14px 24px;
		border: 0;
		border-bottom: 1px solid var(--eb-line);
		text-align: left;
		@media (max-width: 600px) { padding: 12px 8px; }
	}
	thead th {
		font-family: var(--font-secondary-heading);
		font-weight: 500;
		color: var(--color-primary);
		border-bottom: 2px solid var(--color-primary);
	}
	tbody td { color: var(--color-light-text); }
	tbody td:first-child { font-weight: 500; color: var(--color-primary); }
	tbody tr:last-child td { border-bottom: 0; }
}

.eb-price-table + .eb-form-note { margin-top: 20px; }

/* Room under the note: the next section's wave rises into this space. */
.wp-block-group.alignfull.eb-section.eb-section:has(.eb-price-table) { padding-bottom: 110px !important; }	/* !important: the parent's has-background group padding also uses it */

/* Wedding Cakes: the pricing line between the intro and the steps. */
.eb-pricing-note { margin: -16px 0 40px; max-width: var(--restricted-width); }

/* Order Inquiry: room between the last section and the footer. */
.wp-block-group.alignfull.eb-section.eb-section-end { padding-bottom: 140px !important; @media (max-width: 780px) { padding-bottom: 96px !important; } }

/* Instagram feed band (Smash Balloon feeds 1 and 2, local images): the plugin's header, captions and buttons
   are off in the feed settings; the heading stack and the outline "Follow us on Instagram" button are ours. */
.eb-instagram {
	#sb_instagram { margin-top: 36px; padding-bottom: 0 !important; }
	#sb_instagram #sbi_images { padding: 0 !important; }
	.sbi_photo_wrap,
	.sbi_photo { border-radius: var(--eb-radius-m); overflow: hidden; }
	.sbi_photo img { transition: transform 0.4s ease; }
	.sbi_photo:hover img,
	.sbi_photo:focus-visible img { transform: scale(1.04); }
	.eb-insta-actions { justify-content: center; margin-top: 32px; }
}