/*
Theme Name: Butterfly
Theme URI: https://butterfly.tdminsights.com
Author: TDM Insights
Author URI: https://tdminsights.com
Description: Custom block theme for the Butterfly marketplace landing pages and blog. Design direction "Tissue and Twine" (bake-off Direction B, 2026-07-31): cream and peach layers, navy ink, pill actions, sans+serif headline grammar, orange twine motif. Tokens live in design-tokens.json; theme.json is built by tools/build-theme-json.py.
Version: 0.1.0
Requires at least: 6.6
Tested up to: 7.0
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: butterfly
*/

/* ---------------------------------------------------------------------------
   Tissue and Twine design system.
   Palette/typography come from theme.json presets; these classes carry the
   structural signature: layered cards, pill chips, the twine line, the
   sticker badge, and the sans+serif headline grammar.
--------------------------------------------------------------------------- */

:root {
	--bf-shadow-card: 0 12px 30px rgba(78, 38, 22, .08);
	--bf-shadow-photo: 0 18px 40px rgba(78, 38, 22, .16);
	--bf-r-lg: 28px;
	--bf-r-md: 18px;
}

html, body {
	-webkit-font-smoothing: antialiased;
	overflow-x: clip;
}

a:focus-visible,
button:focus-visible,
input:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		transition: none !important;
		animation: none !important;
	}
}

/* Headline grammar: sans first, serif italic second. Use <em> inside any
   heading; it renders as the serif accent word, never as emphasis italics. */
h1 em, h2 em, h3 em,
.bf-serif-accent {
	font-family: var(--wp--preset--font-family--accent-serif);
	font-style: italic;
	font-weight: 400;
	letter-spacing: 0;
}

/* Eyebrow labels */
.bf-eyebrow {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	font-size: .72rem;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent-brown);
}

/* Buttons: default WP button is the navy pill (theme.json). Orange = money CTA. */
.bf-btn-orange .wp-block-button__link,
.wp-block-button.bf-btn-orange .wp-element-button {
	background-color: var(--wp--preset--color--contrast-orange);
	color: var(--wp--preset--color--orange-ink);
}
.bf-btn-orange .wp-block-button__link:hover {
	background-color: #ef7f50;
	color: var(--wp--preset--color--orange-ink);
}
.bf-link-under {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	font-size: .85rem;
	color: var(--wp--preset--color--accent-brown);
	text-decoration: none;
	border-bottom: 2px solid var(--wp--preset--color--contrast-orange);
	padding-bottom: 2px;
}
.bf-link-under:hover { color: var(--wp--preset--color--primary); }

/* ------------------------------------------------------------------ header */
.bf-header { background: var(--wp--preset--color--peach-soft); }
/* The site-blocks block gap adds 24px above <main>; the panels below set their
   own offset instead. WP's `.is-layout-flow > :first-child{margin-block-start:0}`
   would otherwise zero that offset, so these selectors carry extra specificity. */
.wp-site-blocks > main.wp-block-group { margin-block-start: 0; }
.wp-site-blocks main .bf-hero,
.wp-site-blocks main .bf-intro { margin-block-start: 32px; }
@media (max-width: 860px) {
	.wp-site-blocks main .bf-hero,
	.wp-site-blocks main .bf-intro { margin-block-start: 24px; }
}
.bf-header .wp-block-navigation a {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	font-size: .82rem;
}
.bf-header .wp-block-navigation a:hover { color: var(--wp--preset--color--accent-brown); }
/* The header CTA is a pill; it must never wrap to two lines on narrow screens. */
.bf-header .wp-block-button__link { white-space: nowrap; }
@media (max-width: 560px) {
	.bf-header .wp-block-button__link { padding-inline: 18px; font-size: 13px; }
	.bf-header { padding-top: 12px !important; padding-bottom: 12px !important; }
}

/* -------------------------------------------------------------------- hero */
/* The hero is a contained, floating peach panel: rounded on all four corners
   and inset from the viewport, aligned to the same 1140px content grid the
   sections below use. */
.bf-hero {
	background: var(--wp--preset--color--peach-soft);
	border-radius: var(--bf-r-lg);
	overflow: clip;
	box-sizing: border-box;
	width: calc(100% - 48px);
	max-width: 1140px;
	margin: 32px auto 0;
}
/* Inner padding is what keeps the copy off the peach edge. */
.bf-hero-grid {
	display: grid;
	grid-template-columns: 1.05fr .95fr;
	gap: 52px;
	align-items: center;
	box-sizing: border-box;
	padding: 80px 64px 88px;
}
.bf-hero .bf-lede {
	max-width: 44ch;
	font-size: 1.08rem;
}
/* layered tissue photo stack */
.bf-stack { position: relative; height: 440px; }
.bf-stack .bf-ph {
	position: absolute;
	border-radius: var(--bf-r-md);
	object-fit: cover;
	box-shadow: var(--bf-shadow-photo);
	border: 8px solid #fff;
}
.bf-ph1 { width: 66%; height: 78%; right: 4%; top: 0; transform: rotate(2.2deg); }
.bf-ph2 { width: 46%; height: 52%; left: 0; bottom: 4%; transform: rotate(-3.5deg); }
.bf-sticker {
	position: absolute;
	right: -6px;
	bottom: 10%;
	width: 112px;
	height: 112px;
	transform: rotate(-12deg);
	filter: drop-shadow(0 6px 14px rgba(78, 38, 22, .18));
}
/* proof chips */
.bf-chips { display: flex; gap: 14px; flex-wrap: wrap; }
.bf-chip {
	background: #fff;
	border: 1.5px solid var(--wp--preset--color--anchor-peach);
	border-radius: 999px;
	padding: 10px 20px;
	font-size: .9rem;
	color: var(--wp--preset--color--accent-brown);
}
.bf-chip b, .bf-chip strong {
	font-family: var(--wp--preset--font-family--heading);
	color: var(--wp--preset--color--primary);
}
@media (max-width: 860px) {
	.bf-hero { width: calc(100% - 40px); margin-top: 24px; }
	.bf-hero-grid { grid-template-columns: 1fr; gap: 40px; padding: 56px 40px 64px; }
	.bf-stack { height: 360px; }
}
@media (max-width: 560px) {
	.bf-hero { width: calc(100% - 32px); border-radius: 20px; }
	.bf-hero-grid { padding: 40px 24px 48px; }
	.bf-stack { height: 300px; }
	.bf-sticker { width: 82px; height: 82px; right: 0; bottom: 4%; }
	.bf-ph1 { width: 74%; }
	.bf-ph2 { width: 54%; }
	.bf-hero .bf-lede { font-size: 1rem; }
	.bf-chip { padding: 9px 16px; font-size: .85rem; }
}

/* ------------------------------------------------------------ section head */
.bf-sec-head { text-align: center; max-width: 640px; margin: 0 auto 48px; }
.bf-sec-head p { margin-top: 14px; }

/* --------------------------------------------------------- category shelf */
.bf-shelf {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 22px;
}
.bf-cat { text-align: center; text-decoration: none; }
.bf-cat img {
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: 50%;
	border: 5px solid #fff;
	box-shadow: 0 10px 26px rgba(78, 38, 22, .13);
	transition: transform .2s;
}
.bf-cat:hover img { transform: translateY(-4px) rotate(-1.5deg); }
.bf-cat span {
	display: block;
	margin-top: 12px;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	font-size: .85rem;
	color: var(--wp--preset--color--primary);
}
@media (max-width: 900px) { .bf-shelf { grid-template-columns: repeat(3, 1fr); } }

/* -------------------------------------------------------------- makers band */
.bf-makers {
	background: var(--wp--preset--color--peach-soft);
	border-radius: var(--bf-r-lg);
	padding: 72px 56px;
}
.bf-maker-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.bf-maker {
	background: #fff;
	border-radius: var(--bf-r-md);
	padding: 30px;
	display: grid;
	grid-template-columns: 96px 1fr;
	gap: 22px;
	align-items: start;
	box-shadow: var(--bf-shadow-card);
}
.bf-maker img {
	width: 96px;
	height: 96px;
	border-radius: 50%;
	object-fit: cover;
	border: 4px solid var(--wp--preset--color--anchor-peach);
}
.bf-maker h3 { font-size: 1.1rem; margin: 0; }
.bf-maker .bf-place {
	font-size: .8rem;
	color: var(--wp--preset--color--accent-brown);
	margin: 2px 0 10px;
}
.bf-maker q {
	display: block;
	font-family: var(--wp--preset--font-family--accent-serif);
	font-style: italic;
	font-size: .98rem;
	line-height: 1.55;
	quotes: '\201C' '\201D';
}
.bf-maker q cite {
	display: block;
	font-style: normal;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	font-size: .72rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent-brown);
	margin-top: 10px;
}
.bf-maker .bf-blurb { font-size: .94rem; line-height: 1.6; margin: 0; }
.bf-maker .bf-link-under { display: inline-block; margin-top: 16px; font-size: .8rem; }
@media (max-width: 860px) {
	.bf-maker-grid { grid-template-columns: 1fr; }
	.bf-makers { padding: 56px 20px; }
}
@media (max-width: 560px) {
	.bf-maker { grid-template-columns: 1fr; gap: 16px; padding: 26px 24px; }
	.bf-maker img { width: 72px; height: 72px; }
}

/* ----------------------------------------------------- twine + steps cards */
.bf-twine { position: relative; }
.bf-twine::before {
	content: "";
	position: absolute;
	top: -34px;
	left: 50%;
	transform: translateX(-50%);
	/* 100% not 100vw: vw includes the scrollbar and would push a horizontal
	   scroll of exactly the scrollbar width on every page. */
	width: min(1200px, 100%);
	height: 150px;
	pointer-events: none;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 150'%3E%3Cpath d='M-40,20 C300,140 900,-40 1240,90' fill='none' stroke='%23F58B5E' stroke-width='2' stroke-dasharray='7 8' opacity='.85'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
.bf-steps {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 30px;
	counter-reset: bfstep;
}
.bf-step {
	background: #fff;
	border-radius: var(--bf-r-md);
	padding: 34px 28px;
	box-shadow: var(--bf-shadow-card);
	position: relative;
}
.bf-step::before {
	counter-increment: bfstep;
	content: counter(bfstep, decimal-leading-zero);
	position: absolute;
	top: -18px;
	left: 26px;
	background: var(--wp--preset--color--contrast-orange);
	color: var(--wp--preset--color--orange-ink);
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 800;
	font-size: .8rem;
	padding: 8px 14px;
	border-radius: 999px;
}
.bf-step h3 { font-size: 1.05rem; margin: 0 0 10px; }
.bf-step p { font-size: .95rem; margin: 0; }
@media (max-width: 820px) { .bf-steps { grid-template-columns: 1fr; } }

/* ------------------------------------------------------- generic card grid */
/* Unnumbered 3-up cards, for content that is a set rather than a sequence. */
.bf-cardgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.bf-card {
	background: #fff;
	border-radius: var(--bf-r-md);
	padding: 32px 28px;
	box-shadow: var(--bf-shadow-card);
}
.bf-card h3 { font-size: 1.05rem; margin: 0 0 10px; }
.bf-card p { font-size: .95rem; margin: 0; }
@media (max-width: 820px) { .bf-cardgrid { grid-template-columns: 1fr; } }

/* Intro band, a shorter peach panel for interior page tops. */
.bf-intro {
	background: var(--wp--preset--color--peach-soft);
	border-radius: var(--bf-r-lg);
	box-sizing: border-box;
	width: calc(100% - 48px);
	max-width: 1140px;
	margin: 32px auto 0;
	padding: 72px 64px;
	text-align: center;
}
.bf-intro p { max-width: 60ch; margin-inline: auto; }
@media (max-width: 860px) { .bf-intro { width: calc(100% - 40px); padding: 56px 40px; } }
@media (max-width: 560px) { .bf-intro { width: calc(100% - 32px); border-radius: 20px; padding: 44px 24px; } }

/* -------------------------------------------------------------- pledge card */
.bf-pledge {
	background: var(--wp--preset--color--anchor-peach);
	border-radius: var(--bf-r-lg);
	padding: 52px 46px;
	text-align: center;
	box-shadow: 0 14px 34px rgba(78, 38, 22, .1);
}
.bf-pledge .bf-pc {
	font-family: var(--wp--preset--font-family--accent-serif);
	font-size: clamp(4rem, 9vw, 6.5rem);
	line-height: 1;
	color: var(--wp--preset--color--primary);
}
.bf-pledge .bf-of {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	font-size: .78rem;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent-brown);
	margin-top: 10px;
}
.bf-pledge hr {
	border: none;
	border-top: 1.5px dashed rgba(78, 38, 22, .35);
	margin: 26px 0;
}
.bf-pledge .bf-amt {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 800;
	font-size: 1.9rem;
	color: var(--wp--preset--color--primary);
}
.bf-pledge .bf-amt-sub { font-size: .92rem; color: var(--wp--preset--color--accent-brown); margin-top: 4px; }
.bf-charities { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; margin: 20px 0 26px; padding: 0; }
.bf-charities li {
	background: var(--wp--preset--color--contrast-blue);
	border-radius: 999px;
	padding: 8px 16px;
	font-size: .85rem;
	color: var(--wp--preset--color--primary);
}
@media (max-width: 560px) {
	.bf-pledge { padding: 40px 24px; }
	.bf-pledge .bf-amt { font-size: 1.6rem; }
}

/* ---------------------------------------------------------- journal cards */
.bf-jgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.bf-jcard {
	background: #fff;
	border-radius: var(--bf-r-md);
	overflow: clip;
	text-decoration: none;
	box-shadow: var(--bf-shadow-card);
	transition: transform .2s;
	display: block;
}
.bf-jcard:hover { transform: translateY(-4px); }
.bf-jcard img { aspect-ratio: 16/10; object-fit: cover; width: 100%; display: block; }
.bf-jcard > div { padding: 22px 24px 26px; }
.bf-jcard .bf-eyebrow { font-size: .62rem; }
.bf-jcard h3 { font-size: 1.06rem; line-height: 1.4; margin: 8px 0 0; }
@media (max-width: 860px) { .bf-jgrid { grid-template-columns: 1fr; } }

/* Blog hub (index/archive query loop) borrows the jcard look */
.bf-postgrid .wp-block-post {
	background: #fff;
	border-radius: var(--bf-r-md);
	overflow: clip;
	box-shadow: var(--bf-shadow-card);
	transition: transform .2s;
}
.bf-postgrid .wp-block-post:hover { transform: translateY(-4px); }
.bf-postgrid .wp-block-post-featured-image { margin: 0; }
.bf-postgrid .wp-block-post-title,
.bf-postgrid .wp-block-post-date,
.bf-postgrid .wp-block-post-excerpt,
.bf-postgrid .wp-block-post-terms { padding-left: 24px; padding-right: 24px; }
.bf-postgrid .wp-block-post-title { font-size: 1.06rem; line-height: 1.4; margin-top: 16px; }
.bf-postgrid .wp-block-post-title a { text-decoration: none; }
.bf-postgrid .wp-block-post-excerpt { padding-bottom: 24px; font-size: .95rem; }
.bf-postgrid .wp-block-post-terms {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	font-size: .62rem;
	letter-spacing: .18em;
	text-transform: uppercase;
	margin-top: 16px;
}
.bf-postgrid .wp-block-post-terms a { color: var(--wp--preset--color--accent-brown); text-decoration: none; }

/* -------------------------------------------------------------- parcel CTA */
.bf-parcel {
	background: #fff;
	border: 2px dashed var(--wp--preset--color--contrast-orange);
	border-radius: var(--bf-r-lg);
	padding: 64px 40px;
	text-align: center;
}
.bf-parcel p { max-width: 46ch; margin-left: auto; margin-right: auto; }
@media (max-width: 560px) { .bf-parcel { padding: 44px 22px; } }

/* Category tiles get two columns on the smallest screens so the labels stay
   readable rather than wrapping mid-word. */
@media (max-width: 520px) {
	.bf-shelf { grid-template-columns: repeat(2, 1fr); gap: 18px; }
}

/* ------------------------------------------------------------------ footer */
.bf-footer { border-radius: var(--bf-r-lg) var(--bf-r-lg) 0 0; }
.bf-footer .wp-block-site-title a {
	font-family: var(--wp--preset--font-family--accent-serif);
	font-weight: 400;
	text-decoration: none;
}
.bf-footer a { color: var(--wp--preset--color--cream); }
.bf-footer a:hover { color: var(--wp--preset--color--anchor-peach); }
.bf-tagline {
	font-family: var(--wp--preset--font-family--accent-serif);
	font-style: italic;
	color: var(--wp--preset--color--anchor-peach);
}

/* --------------------------------------------------------------- post body */
.bf-post-hero img {
	border-radius: var(--bf-r-md);
	aspect-ratio: 2.6 / 1;
	max-height: 420px;
	object-fit: cover;
}

/* Legacy utility kept for existing content */
.bf-proof-number {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 800;
	color: var(--wp--preset--color--primary);
}