/* =====================================================================
 * Fuzzelogic theme — layout + decorative styles for the page sections.
 * Cards/grids live in the plugin (catalog.css). This file styles the
 * header, hero, section headings, studio strip and footer.
 * ===================================================================== */

/* ---------- Header ---------- */
.flx-header {
	position: sticky; top: 0; z-index: 50;
	background: rgba(250, 246, 238, 0.82);
	-webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
	border-bottom: 1px solid rgba(31, 27, 22, 0.08);
}
.flx-header .wp-block-site-title a { text-decoration: none; color: var(--wp--preset--color--contrast, #1f1b16); }
.flx-header .wp-block-navigation { font-weight: 500; }
.flx-header .wp-block-navigation a { color: var(--wp--preset--color--ink-soft, #5c5446); }
.flx-header .wp-block-navigation a:hover { color: var(--wp--preset--color--contrast, #1f1b16); }

/* ---------- Generic section ---------- */
.flx-eyebrow {
	font-size: 14px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
	margin: 0 0 14px;
}
.flx-eyebrow--violet { color: #6e4fcf; }
.flx-eyebrow--teal   { color: var(--wp--preset--color--teal, #1f7a6b); }
.flx-eyebrow--brand  { color: var(--wp--preset--color--brand, #e8572a); }

.flx-lead { font-size: 18px; line-height: 1.6; color: #6b6356; max-width: 520px; margin: 18px 0 0; }
.flx-accent { color: var(--wp--preset--color--brand, #e8572a); }

.flx-section--cream h2 { color: #2a2218; }
.flx-section--cream .flx-lead { color: #6b6152; }

/* ---------- Hero ---------- */
.flx-hero { position: relative; overflow: hidden; }
.flx-hero::before,
.flx-hero::after {
	content: ""; position: absolute; border-radius: 50%; filter: blur(42px);
	pointer-events: none; z-index: 0;
}
.flx-hero::before {
	width: 440px; height: 440px; top: -40px; left: 4%;
	background: radial-gradient(circle, rgba(124, 92, 255, 0.22), transparent 65%);
}
.flx-hero::after {
	width: 380px; height: 380px; top: 120px; right: 3%;
	background: radial-gradient(circle, rgba(232, 87, 42, 0.20), transparent 65%);
}
.flx-hero > * { position: relative; z-index: 1; }
.flx-hero h1 { margin: 0; }
.flx-hero .flx-lead { font-size: 19px; max-width: 520px; }

/* Pill "tag" above the headline */
.flx-pill {
	display: inline-flex; align-items: center; gap: 10px;
	padding: 8px 16px; background: #fff; border: 1px solid rgba(31, 27, 22, 0.1);
	border-radius: 999px; font-size: 13px; font-weight: 600; letter-spacing: 0.14em;
	text-transform: uppercase; color: #6e4fcf; box-shadow: 0 4px 14px rgba(31, 27, 22, 0.05);
	margin: 0 0 28px;
}

/* Hero key-art image */
.flx-hero__art { margin: 0; border-radius: 24px; overflow: hidden; box-shadow: 0 30px 70px rgba(31, 27, 22, 0.16); }
.flx-hero__art img { display: block; width: 100%; height: auto; }
/* Empty-state look when no image is set yet */
.flx-hero__art.is-empty,
.flx-hero__art:not(:has(img)) {
	min-height: 440px;
	background: linear-gradient(135deg, #f0e4d6, #e7d9f0);
	border: 1px solid rgba(31, 27, 22, 0.08);
}

/* ---------- Buttons (core button block variants) ---------- */
.wp-block-button.is-style-outline .wp-block-button__link {
	background: #fff; color: var(--wp--preset--color--contrast, #1f1b16);
	border: 1px solid rgba(31, 27, 22, 0.18);
}
.wp-block-button.is-style-outline .wp-block-button__link:hover {
	border-color: var(--wp--preset--color--contrast, #1f1b16); background: #fff;
}

/* ---------- Studio strip ---------- */
.flx-studio__body p { color: #4a4338; }
.flx-studio__body p + p { color: #6b6356; font-size: 17px; }

/* ---------- Footer ---------- */
.flx-footer {
	background: var(--wp--preset--color--cream, #f2e9d8);
	border-top: 1px solid rgba(42, 34, 24, 0.08);
}
.flx-footer a { color: var(--wp--preset--color--ink-soft, #5c5446); text-decoration: none; }
.flx-footer a:hover { color: var(--wp--preset--color--brand, #e8572a); }
.flx-footer .flx-foot-label { font-size: 13px; font-weight: 700; letter-spacing: 0.1em; color: #a39a89; text-transform: uppercase; }
.flx-footer .flx-foot-fine { font-size: 14px; color: #a39a89; }

/* ---------- Brand badge (the little "F") ---------- */
.flx-badge-logo {
	display: inline-flex; align-items: center; justify-content: center;
	width: 40px; height: 40px; border-radius: 12px;
	background: linear-gradient(135deg, #e8572a, #7c5cff);
	color: #fff; font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; font-size: 22px;
	box-shadow: 0 6px 18px rgba(232, 87, 42, 0.28);
}

/* ---------- Single item page ---------- */
.flx-single { max-width: 820px; margin: 0 auto; padding: 64px 24px 96px; }
.flx-single .wp-block-post-featured-image img { border-radius: 18px; }

/* ---------- Responsive type ---------- */
@media (max-width: 781px) {
	h1, .flx-hero h1 { font-size: 48px !important; }
	h2, .flx-section h2 { font-size: 36px !important; }
}