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

/*********************************************************************************************************************
 *********** 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: #3F5A2A;
	--eb-berry:          #8A3F33;
	--eb-line:           #CDB9AA;	/* inactive pill borders */
	--eb-footer-link:    #F2C9C0;
	--eb-radius-l:       28px;
	--eb-radius-m:       20px;
}

body.improvise,
body:where(.editor-styles-wrapper) {
	background-color: var(--eb-cream);
	color: var(--color-dark-text);
}

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

.document-header .site-info {
	a {
		font-family: var(--font-primary-heading);
		font-size: 28px;
		font-weight: 600;
		color: var(--color-header-text);
		text-decoration: none;
	}
	p { display: none; }	/* the tagline repeats the site name */
}

/* "Order for pickup" — the last primary-nav item, 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;
	a { font-size: 14px; @media (max-width: 480px) { font-size: 13px; } }
}

.document-footer a { color: var(--eb-footer-link); }
.document-footer .eb-footer-brand {
	font-family: var(--font-primary-heading);
	font-size: 26px;
	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: 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. */
body .wp-block-button.is-style-outline > .wp-block-button__link:not(:hover) {
	border-width: 1.5px;
	&:not(.has-background) { background-color: transparent; }
	&:not(.has-text-color) { color: var(--color-primary); border-color: var(--color-primary); }
	&.has-primary-color { 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);
}

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

.eb-actions,
.eb-section .wp-block-buttons {
	margin: 0;
	gap: 12px;	/* px: the flex row's height is content-sized, so a % row-gap would collapse when it wraps */
}

/*********************************************************************************************************************
 *********** 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).
 ********************************************************************************************************************/

.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;
}

.eb-display {
	font-family: var(--font-primary-heading);
	font-weight: 400;
	font-size: clamp(34px, 4vw, 48px);
	line-height: 1.1;
	letter-spacing: -0.01em;
	color: var(--color-dark-text);
	margin: 0 0 16px;
	em { color: var(--color-secondary); }
	&.eb-display-xl {
		font-size: clamp(46px, 6vw, 76px);
		line-height: 1.02;
		letter-spacing: -0.02em;
		margin-bottom: 28px;
	}
	&.eb-display-sm {
		font-size: clamp(28px, 3vw, 36px);
		line-height: 1.15;
	}
}

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

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

.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; }
}
/* 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; }

.eb-hero {
	min-height: 0;
	.wp-block-cover__inner-container { padding-top: 40px; padding-bottom: 96px; }
	@media (max-width: 780px) { .wp-block-cover__inner-container { padding-bottom: 64px; } }
}

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

/*********************************************************************************************************************
 *********** Photo placeholders (swap for Image blocks once the shoot is done)
 ********************************************************************************************************************/

.eb-photo {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 220px;
	padding: 24px !important;
	p {
		margin: 0;
		color: #6E5A52;
		font-size: 12px;
		letter-spacing: 0.14em;
		text-transform: uppercase;
		text-align: center;
	}
	&.eb-photo-arch {
		height: 580px;
		max-width: 480px;
		margin: 0 auto !important;
		border-radius: 240px 240px 24px 24px;
		@media (max-width: 780px) { height: 420px; }
	}
	&.eb-photo-portrait {
		height: 460px;
		border-radius: var(--eb-radius-l);
		@media (max-width: 780px) { height: 360px; }
	}
}

/*********************************************************************************************************************
 *********** Case cards
 ********************************************************************************************************************/

.wp-block-columns.eb-cards {
	column-gap: 2%;
	row-gap: 24px;	/* px: wrapped rows have an auto height */
	@media (min-width: 782px) and (max-width: 1100px) {
		flex-wrap: wrap !important;
		> .wp-block-column { flex-basis: 49% !important; flex-grow: 0; }
	}
}

.wp-block-column.eb-card {
	display: flex;
	flex-direction: column;
	padding: 0;
	border-radius: var(--eb-radius-m);
	overflow: hidden;
	margin-bottom: 0;
	> :not(.eb-photo) { margin-left: 24px; margin-right: 24px; }
	> .eb-photo { border-radius: 0; }
	h3 {
		font-family: var(--font-primary-heading);
		font-weight: 600;
		font-size: 22px;
		margin-top: 20px;
		margin-bottom: 8px;
	}
	> p {
		font-size: 15px;
		line-height: 1.55;
		color: var(--color-light-text);
		flex-grow: 1;
	}
}

.eb-card-foot {
	align-items: center;
	margin-top: 8px !important;
	margin-bottom: 24px !important;
	.wp-block-buttons { margin: 0; }
}
.eb-price {
	margin: 0;
	font-size: 16px;
	font-weight: 700;
}

/*********************************************************************************************************************
 *********** 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;
	@media (max-width: 1100px) { padding: 32px; }
	> p:not(.eb-display) {
		font-size: 16px;
		line-height: 1.6;
		flex-grow: 1;
	}
	.wp-block-buttons { margin-top: 8px; }
}

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

.eb-flavor-tabs {
	justify-content: center;
	margin: 0 0 40px !important;
	.wp-block-button__link {
		font-size: 15px;
		padding: 12px 22px;
	}
	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;
}

/*********************************************************************************************************************
 *********** Chef + Visit
 ********************************************************************************************************************/

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

.eb-visit-cols {
	h3 {
		font-family: var(--font-primary);
		font-size: 16px;
		font-weight: 700;
		margin-bottom: 8px;
	}
	p { font-size: 16px; line-height: 1.7; margin-bottom: 8px; }
	a { color: var(--color-accent); }
}