/* ==========================================================================
   Bubble Letter Font Generator — "Cobalt & Bubblegum" styling for Kadence.
   White page, cobalt blue for actions, ONE bubblegum-pink accent, iridescent soap bubbles.
   ========================================================================== */
:root {
	/* White and blue: white page, navy text, ONE blue accent. Simple on purpose. */
	--bl-sky: #FFFFFF;
	--bl-sky-2: #EEF1FF;
	--bl-ink: #141B4D;          /* headings, strong text */
	--bl-text: #3A4268;         /* body text */
	--bl-muted: #5E6587;        /* notes */
	--bl-accent: #3355FF;       /* blue */
	--bl-accent-2: #2440E6;     /* buttons (white text 5.6:1) */
	--bl-aqua: #3355FF;
	--bl-lemon: #3355FF;
	--bl-mint: #3355FF;
	--bl-violet: #3355FF;
	--bl-pink: #FF4F8B;         /* decorative accent: big headings, bubble rims, dots */
	--bl-pink-text: #D61F5E;    /* pink for small text (4.98:1 on white) */
	--bl-pink-soft: #FFE8F0;
	--bl-paper: #F6F7FF;        /* inset panels */
	--bl-base: #FFFFFF;         /* cards */
	--bl-base-solid: #FFFFFF;
	--bl-line: #DCE1FA;
	--bl-display: 'BL DynaPuff', 'BL UI', system-ui, sans-serif;
	--bl-ui: 'BL UI', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--bl-radius: 22px;
	--bl-shadow: 0 1px 2px rgba(20, 27, 77, .05), 0 8px 24px rgba(20, 27, 77, .07);
	--bl-shadow-hover: 0 0 0 1px rgba(51, 85, 255, .45), 0 12px 28px rgba(51, 85, 255, .14);
	--bl-glow: none;
	color-scheme: light;
}


/* ---------- Page: night sky with stars and drifting bubbles ---------- */
body.blfg {
	font-family: var(--bl-ui); color: var(--bl-text);
	background: linear-gradient(180deg, var(--bl-sky-2) 0, var(--bl-sky) 700px);
	background-color: var(--bl-sky);
	--global-body-font-family: var(--bl-ui);
	--global-heading-font-family: var(--bl-display);
	--global-palette-highlight: var(--bl-accent);
	--global-palette-highlight-alt: var(--bl-aqua);
	-webkit-font-smoothing: antialiased;
}
body.blfg::before {
	content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
	background-image:
		radial-gradient(1.5px 1.5px at 20px 30px, rgba(255,255,255,.7), transparent 2px),
		radial-gradient(1px 1px at 90px 120px, rgba(255,255,255,.55), transparent 2px),
		radial-gradient(1.5px 1.5px at 160px 60px, rgba(255,255,255,.45), transparent 2px),
		radial-gradient(1px 1px at 230px 170px, rgba(255,255,255,.6), transparent 2px);
	background-size: 260px 220px;
	opacity: 0; display: none;
}
body.blfg::after {
	content: ""; position: fixed; inset: -20% 0 0; z-index: 0; pointer-events: none;
	background-image:
		radial-gradient(circle at 30% 30%, rgba(255,255,255,.35) 0 6%, rgba(51, 85, 255,.10) 7% 60%, rgba(51, 85, 255,.35) 62%, transparent 64%),
		radial-gradient(circle at 30% 30%, rgba(255,255,255,.35) 0 6%, rgba(51, 85, 255,.10) 7% 60%, rgba(51, 85, 255,.35) 62%, transparent 64%),
		radial-gradient(circle at 30% 30%, rgba(255,255,255,.35) 0 6%, rgba(51, 85, 255,.10) 7% 60%, rgba(51, 85, 255,.35) 62%, transparent 64%);
	background-size: 140px 140px, 90px 90px, 60px 60px;
	background-position: 6% 110%, 88% 105%, 70% 115%;
	background-repeat: no-repeat;
	animation: bl-drift 38s linear infinite;
	opacity: .45;
}
@keyframes bl-drift {
	0%   { background-position: 6% 110%, 88% 105%, 70% 115%; }
	100% { background-position: 10% -30%, 82% -20%, 64% -40%; }
}
body.blfg .site { position: relative; z-index: 1; background: transparent; }
body.blfg .content-bg, body.blfg .site-main, body.blfg #inner-wrap { background: transparent; }
body.blfg h1, body.blfg h2, body.blfg h3 { font-family: var(--bl-display); font-weight: 700; color: var(--bl-ink); letter-spacing: .005em; text-wrap: balance; }
body.blfg h4, body.blfg h5 { font-family: var(--bl-ui); font-weight: 800; color: var(--bl-ink); }
body.blfg .entry-content, body.blfg .entry-content p, body.blfg .entry-content li { color: var(--bl-text); line-height: 1.7; }
body.blfg .entry-content strong { color: var(--bl-ink); }
body.blfg a { color: var(--bl-aqua); }
body.blfg .entry-title, body.blfg .page-title { color: var(--bl-ink); }

/* Kadence header, menus and footer in night mode */
body.blfg .site-header-row-container-inner, body.blfg .site-main-header-wrap .site-header-row-container-inner { background: rgba(255, 255, 255, .92); backdrop-filter: blur(10px); border-bottom: 1px solid var(--bl-line); }
body.blfg .site-branding .site-title { font-family: var(--bl-display); color: var(--bl-ink); }
body.blfg .main-navigation .primary-menu-container > ul > li.menu-item > a,
body.blfg .header-navigation .header-menu-container ul li a,
body.blfg .mobile-navigation ul li a { font-family: var(--bl-ui); font-weight: 700; color: var(--bl-ink); }
body.blfg .main-navigation .primary-menu-container > ul > li.menu-item > a:hover,
body.blfg .main-navigation .primary-menu-container > ul > li.current-menu-item > a { color: var(--bl-accent); }
body.blfg .header-navigation .header-menu-container ul ul.sub-menu, body.blfg .header-navigation .header-menu-container ul ul.submenu { background: var(--bl-base-solid); box-shadow: var(--bl-shadow); }
body.blfg .header-navigation .header-menu-container ul ul li.menu-item > a { color: var(--bl-text); border-bottom-color: var(--bl-line); }
body.blfg .popup-drawer .drawer-inner, body.blfg #mobile-drawer .drawer-inner { background: var(--bl-sky); color: var(--bl-ink); }
body.blfg .menu-toggle-open, body.blfg .drawer-toggle { color: var(--bl-ink); }
body.blfg .site-footer, body.blfg .site-footer-row-container-inner { background: var(--bl-paper); color: var(--bl-muted); border-top: 1px solid var(--bl-line); }
body.blfg .site-footer a { color: var(--bl-text); }
body.blfg .content-style-boxed .entry.single-entry, body.blfg .content-style-boxed .entry.loop-entry,
body.blfg .entry.single-entry, body.blfg .entry.loop-entry { background: var(--bl-base-solid); border-radius: var(--bl-radius); box-shadow: var(--bl-shadow); }
body.blfg .entry-meta, body.blfg .entry-meta a { color: var(--bl-muted); }
body.blfg input[type="search"], body.blfg input[type="text"]:not(.bl-tool__text), body.blfg input[type="email"], body.blfg textarea { background: var(--bl-paper); color: var(--bl-ink); border-color: var(--bl-line); }

.bl-link { font-weight: 800; color: var(--bl-aqua) !important; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }

/* ---------- Sections ---------- */
.bl-hero { position: relative; text-align: center; padding-block: clamp(2.2rem, 5vw, 4rem) 1.5rem; padding-inline: max(16px, env(safe-area-inset-left, 0px)); }
.bl-hero h1 {
	font-size: clamp(2.5rem, 7vw, 4.6rem) !important; line-height: 1.04 !important; margin-top: 0 !important; margin-bottom: .8rem !important;
	color: var(--bl-ink) !important;
}
.bl-hero h1 .bl-h-2, .bl-hero h1 .bl-h-3 { color: var(--bl-accent); }
.bl-hero .bl-lead { max-width: 40em; margin-inline: auto; }
.bl-lead { font-size: clamp(1.05rem, 1.8vw, 1.22rem); color: var(--bl-text); }
.bl-eyebrow {
	display: block; width: fit-content; font-family: var(--bl-ui); font-weight: 800; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase;
	color: var(--bl-accent-2) !important; background: #EEF1FF; border: 1px solid #CCD4FF; border-radius: 999px; padding: .4em 1.05em; margin-top: 0 !important; margin-bottom: 1rem !important;
}
.bl-section { position: relative; padding-block: clamp(2.8rem, 6vw, 4.8rem); padding-inline: max(16px, env(safe-area-inset-left, 0px)); }
.bl-section + .bl-section { padding-top: 0; }
.bl-section__title { font-size: clamp(1.9rem, 4.2vw, 2.8rem) !important; line-height: 1.12 !important; margin-top: 0 !important; margin-bottom: .6rem !important; text-align: center; }
.bl-section__intro { text-align: center; margin-top: 0 !important; margin-bottom: 2rem !important; font-size: 1.07rem; }
.bl-section > .wp-block-buttons, .bl-section .bl-btns { justify-content: center; }

/* ---------- Buttons ---------- */
.bl-btn, .bl-btns .wp-block-button__link {
	display: inline-flex; align-items: center; justify-content: center; gap: .35rem; min-height: 40px;
	font-family: var(--bl-ui); font-weight: 700; font-size: .9rem; line-height: 1; white-space: nowrap;
	color: var(--bl-ink) !important; background: #FFFFFF; border: 1px solid var(--bl-line); border-radius: 999px;
	padding: .55em 1.05em; cursor: pointer; text-decoration: none !important; transition: border-color .15s, background .15s, box-shadow .15s, transform .12s;
}
.bl-btn:hover { border-color: var(--bl-accent); }
.bl-btn:active { transform: scale(.96); }
.bl-btn--main, .bl-btns .wp-block-button:not(.is-style-outline) .wp-block-button__link { background: #2440E6; border-color: transparent; color: #fff !important; box-shadow: none; }
.bl-btn--main:hover, .bl-btns .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover { background: #1A30C2; box-shadow: none; }
.bl-btns .wp-block-button__link { font-size: 1rem; padding: .85em 1.5em; }
.bl-btn:focus-visible, .bl-tab:focus-visible, .bl-seg__btn:focus-visible, .bl-btns .wp-block-button__link:focus-visible, .bl-bub:focus-visible { outline: 3px solid #9DAEFF; outline-offset: 3px; }
.bl-fav { min-width: 40px; padding-inline: .6em; font-size: 1.05rem; color: var(--bl-muted) !important; }
.bl-fav[aria-pressed="true"] { color: var(--bl-accent-2) !important; border-color: var(--bl-accent); background: #EEF1FF; }

/* ---------- The bubble playground (hero stage) ---------- */
.bl-stage {
	position: relative; max-width: 1100px; margin: 1.4rem auto 0; padding: clamp(1.4rem, 4vw, 2.4rem) 1rem 1rem;
	border-radius: 32px; background: linear-gradient(180deg, #F6F7FF, #FFFFFF);
	border: 1px solid var(--bl-line); box-shadow: var(--bl-shadow);
}
.bl-stage__bubbles { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: clamp(.25rem, 1vw, .6rem); min-height: clamp(130px, 22vw, 210px); }
.bl-stage__space { width: clamp(18px, 3vw, 34px); }
.bl-bub {
	--c: var(--bl-accent); position: relative; display: grid; place-items: center;
	width: clamp(54px, 9.5vw, 104px); aspect-ratio: 1; border-radius: 50%; border: 0; padding: 0; cursor: pointer;
	background:
		radial-gradient(circle at 30% 26%, rgba(255, 255, 255, .85) 0 7%, rgba(255, 255, 255, 0) 9%),
		radial-gradient(circle at 70% 78%, rgba(255, 255, 255, .25) 0 6%, rgba(255, 255, 255, 0) 10%),
		radial-gradient(circle at 50% 50%, rgba(255, 255, 255, .03) 0 58%, color-mix(in srgb, var(--c) 45%, transparent) 70%, color-mix(in srgb, var(--c) 85%, white) 74%, transparent 75%);
	box-shadow: 0 6px 18px rgba(51, 85, 255, .15);
	animation: bl-float 4.6s ease-in-out infinite; animation-delay: var(--d, 0s);
	transition: transform .2s ease;
}
.bl-bub:hover { transform: scale(1.08); }
.bl-bub__ch {
	font-family: var(--bl-stage-font, 'BL Titan One'), sans-serif; font-size: clamp(30px, 5.6vw, 62px); line-height: 1; color: var(--c);
	-webkit-text-stroke: .07em #FFFFFF; paint-order: stroke fill;
	transform: translateY(.04em); pointer-events: none;
}
.bl-bub.is-popped { background: none; box-shadow: none; animation: bl-pop .38s ease-out forwards; cursor: default; }
.bl-bub.is-popped::after {
	content: ""; position: absolute; inset: -6%; border-radius: 50%; border: 3px dashed color-mix(in srgb, var(--c) 80%, white);
	animation: bl-ring .38s ease-out forwards; pointer-events: none;
}
@keyframes bl-float { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-10px) rotate(2deg); } }
@keyframes bl-pop { 0% { transform: scale(1.12); } 60% { transform: scale(.92); } 100% { transform: scale(1); } }
@keyframes bl-ring { 0% { opacity: 1; transform: scale(.9); } 100% { opacity: 0; transform: scale(1.5); } }
.bl-stage__bar { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; align-items: center; margin-top: 1.1rem; }
.bl-stage__bar select { font-family: var(--bl-ui); font-weight: 700; font-size: .9rem; color: var(--bl-ink); background: var(--bl-paper); border: 1px solid var(--bl-line); border-radius: 999px; padding: .5em 1em; min-height: 40px; }
.bl-stage__hint { margin: .7rem 0 0; font-size: .85rem; color: var(--bl-muted); text-align: center; }
.bl-stage__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ---------- Tool ---------- */
.bl-tool { max-width: 1100px; margin: 1.4rem auto 0; text-align: left; display: grid; gap: 1.2rem; }
.bl-tool__head { background: var(--bl-base); border: 1px solid var(--bl-line); border-radius: calc(var(--bl-radius) + 4px); box-shadow: var(--bl-shadow); padding: 1rem clamp(1rem, 3vw, 1.4rem) 1.2rem; }
.bl-tool__label { display: block; font-weight: 800; font-size: .9rem; color: var(--bl-ink); margin-bottom: .45rem; }
.bl-tool__field { position: relative; }
.bl-tool__text {
	width: 100%; font-family: var(--bl-ui); font-weight: 600; font-size: clamp(1.15rem, 2.6vw, 1.5rem); color: var(--bl-ink);
	border: 1px solid var(--bl-line); border-radius: 18px; padding: .8rem 6.5rem .8rem 1.1rem; background: var(--bl-paper);
}
.bl-tool__text::placeholder { color: var(--bl-muted); }
.bl-tool__text:focus { outline: none; border-color: var(--bl-accent); box-shadow: 0 0 0 4px rgba(51, 85, 255, .18); }
.bl-tool__count { position: absolute; right: 3.2rem; top: 50%; transform: translateY(-50%); font-size: .8rem; font-weight: 700; color: var(--bl-muted); font-variant-numeric: tabular-nums; }
.bl-tool__clear { position: absolute; right: .55rem; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; border-radius: 50%; border: 0; background: #EEF1FF; color: var(--bl-ink); font-size: 1.2rem; line-height: 1; cursor: pointer; }
.bl-tool__clear:hover { background: var(--bl-accent); color: #fff; }

.bl-tool__tabs { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; }
.bl-tab { font-family: var(--bl-ui); font-weight: 700; font-size: .95rem; color: var(--bl-text); background: #FFFFFF; border: 1px solid var(--bl-line); border-radius: 999px; padding: .55em 1.15em; min-height: 42px; cursor: pointer; }
.bl-tab[aria-selected="true"] { background: var(--bl-accent-2); color: #fff; border-color: transparent; }
.bl-tab__n { display: inline-block; min-width: 1.6em; padding: .05em .45em; margin-left: .2em; border-radius: 999px; background: #EEF1FF; font-size: .78rem; }
.bl-tab[aria-selected="true"] .bl-tab__n { background: rgba(255, 255, 255, .2); color: #fff; }

.bl-group { display: grid; gap: .9rem; }
.bl-group__title { font-size: 1.45rem !important; margin: .4rem 0 0 !important; display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem .8rem; }
.bl-group__title span { font-family: var(--bl-ui); font-size: .9rem; font-weight: 400; color: var(--bl-muted); }
.bl-list { list-style: none; margin: 0 !important; padding: 0 !important; display: grid; gap: .7rem; }
.bl-row {
	display: grid; grid-template-columns: 11.5rem minmax(0, 1fr) auto; gap: .6rem 1rem; align-items: center;
	background: var(--bl-base); border: 1px solid var(--bl-line); border-radius: 20px; box-shadow: var(--bl-shadow); padding: .8rem 1rem; transition: box-shadow .2s, border-color .2s;
}
.bl-row:hover { box-shadow: var(--bl-shadow-hover); }
.bl-row.is-fav { border-color: var(--bl-accent); }
.bl-row__meta { display: flex; flex-direction: column; min-width: 0; }
.bl-row__name { font-weight: 800; color: var(--bl-ink); font-size: .95rem; }
.bl-row__note { font-size: .78rem; color: var(--bl-muted); }
.bl-row__out { font-size: 1.45rem; line-height: 1.45; color: var(--bl-ink); overflow-wrap: anywhere; min-width: 0; font-family: var(--bl-ui); }
.bl-row__actions { display: flex; flex-wrap: wrap; gap: .4rem; justify-content: flex-end; }
.bl-row--font .bl-row__preview {
	min-width: 0; overflow-wrap: anywhere; line-height: 1.25; padding: .45rem .8rem; border-radius: 14px;
	font-size: var(--bl-size, 40px); color: var(--bl-prev-color, #3355FF); text-align: var(--bl-align, left); background: var(--bl-prev-bg, #FFFFFF); border: 1px solid #EEF3FB;
}
.bl-tool.is-transparent .bl-row__preview { background-color: #fff; background-image: linear-gradient(45deg, #EFF1FB 25%, transparent 25%), linear-gradient(-45deg, #EFF1FB 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #EFF1FB 75%), linear-gradient(-45deg, transparent 75%, #EFF1FB 75%); background-size: 16px 16px; background-position: 0 0, 0 8px, 8px -8px, -8px 0; }
.bl-tool.has-outline .bl-row__preview { -webkit-text-stroke: .11em var(--bl-stroke, #141B4D); paint-order: stroke fill; }
.bl-row.is-extra { display: none; }
.bl-more-wrap { text-align: center; margin: .2rem 0 0; }
.bl-empty { text-align: center; color: var(--bl-muted); background: var(--bl-base); border: 1px solid var(--bl-line); border-radius: 20px; padding: 1.4rem 1rem; margin: 0; }
.bl-status { margin: 0; min-height: 1.3em; text-align: center; font-weight: 700; color: var(--bl-accent-2); }
.bl-tool[data-tab="fav"] .bl-controls { display: none; }
.bl-tool [hidden], .bl-tool[hidden] { display: none !important; }

.bl-controls { display: flex; flex-wrap: wrap; gap: .7rem 1.2rem; align-items: flex-end; background: var(--bl-base); border: 1px solid var(--bl-line); border-radius: 20px; padding: .9rem 1.1rem; }
.bl-ctl { display: flex; flex-direction: column; gap: .3rem; font-size: .82rem; font-weight: 700; color: var(--bl-ink); margin: 0; }
.bl-ctl--check { flex-direction: row; align-items: center; gap: .45rem; min-height: 40px; font-size: .9rem; cursor: pointer; }
.bl-ctl--check input { width: 20px; height: 20px; accent-color: var(--bl-accent); }
.bl-ctl input[type="color"] { width: 54px; height: 36px; border: 1px solid var(--bl-line); border-radius: 10px; padding: 2px; background: var(--bl-paper); cursor: pointer; }
.bl-ctl--range input { width: 150px; accent-color: var(--bl-accent); }
.bl-ctl__size-out { font-variant-numeric: tabular-nums; }
.bl-seg { display: inline-flex; border: 1px solid var(--bl-line); border-radius: 999px; overflow: hidden; }
.bl-seg__btn { font-family: var(--bl-ui); font-size: .85rem; font-weight: 700; padding: .5em .9em; min-height: 36px; background: transparent; color: var(--bl-text); border: 0; cursor: pointer; }
.bl-seg__btn + .bl-seg__btn { border-left: 1px solid var(--bl-line); }
.bl-seg__btn[aria-pressed="true"] { background: var(--bl-accent-2); color: #fff; }

/* Fonts as a simple list: name · preview · buttons */
.bl-list--fonts .bl-row__preview { min-height: 2.2em; display: flex; align-items: center; justify-content: flex-start; }
.bl-row--font { grid-template-columns: 11.5rem minmax(0, 1fr) auto; }

/* Example chips + badges under the input */
.bl-chips { display: flex; flex-wrap: wrap; gap: .45rem; align-items: center; margin-top: .75rem; }
.bl-chips__label { font-size: .85rem; font-weight: 800; color: var(--bl-muted); }
.bl-chip { font-family: var(--bl-ui); font-weight: 700; font-size: .85rem; color: var(--bl-accent-2); background: #EEF1FF; border: 1px solid #CCD4FF; border-radius: 999px; padding: .4em .9em; min-height: 34px; cursor: pointer; }
.bl-chip:hover { background: var(--bl-accent-2); color: #fff; border-color: var(--bl-accent-2); }
.bl-badges { list-style: none; margin: .8rem 0 0 !important; padding: 0 !important; display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; font-size: .85rem; font-weight: 700; color: var(--bl-muted); }
.bl-badges li { display: inline-flex; align-items: center; gap: .4rem; margin: 0; }
.bl-badges li::before { content: ""; width: .75rem; height: .75rem; border-radius: 50%; background: radial-gradient(circle at 30% 30%, #fff 0 18%, transparent 22%), var(--bl-accent); }

/* Compact "All" tab */
.bl-seeall { display: none; text-align: center; margin: .2rem 0 0; }
.bl-tool.is-compact .bl-seeall { display: block; }
.bl-tool.is-compact .bl-group[data-group="copy"] .bl-row:nth-child(n+7) { display: none; }
.bl-tool.is-compact .bl-list--fonts .bl-row:not(.is-extra):nth-child(n+9) { display: none; }
.bl-tool[data-set]:not([data-set="all"]).is-compact .bl-list--fonts .bl-row:nth-child(n+9) { display: grid; }
.bl-tool[data-set]:not([data-set="all"]).is-compact .bl-group[data-group="fonts"] .bl-seeall { display: none; }

@media (max-width: 760px) {
	.bl-row { grid-template-columns: minmax(0, 1fr); gap: .45rem; padding: .8rem .85rem; }
	.bl-row__actions { justify-content: flex-start; }
	.bl-row__meta { flex-direction: row; align-items: baseline; gap: .6rem; flex-wrap: wrap; }
	.bl-ctl--range input { width: 120px; }
}

/* ---------- Cards, steps, tables ---------- */
.bl-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 1.1rem; }
.bl-cards--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.bl-card { background: var(--bl-base); border: 1px solid var(--bl-line); border-radius: var(--bl-radius); box-shadow: var(--bl-shadow); padding: 1.3rem 1.3rem 1.2rem; transition: box-shadow .2s, border-color .2s, transform .2s; }
.bl-card:hover { box-shadow: var(--bl-shadow-hover); transform: translateY(-2px); }
.bl-card h3 { font-size: 1.25rem !important; margin: 0 0 .4rem !important; }
.bl-card p { margin: 0; font-size: .97rem; }
.bl-card__dot {
	display: inline-grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 50%; margin-bottom: .7rem; font-family: var(--bl-display); color: #fff !important; font-size: 1rem;
	background: radial-gradient(circle at 30% 28%, rgba(255,255,255,.75) 0 10%, transparent 12%), radial-gradient(circle, rgba(255,255,255,.05) 0 58%, rgba(51, 85, 255,.55) 72%, rgba(220,214,255,.9) 76%, transparent 78%) !important;
	box-shadow: 0 0 16px rgba(51, 85, 255, .35);
}
.bl-card:nth-child(3n+2) .bl-card__dot { background: radial-gradient(circle at 30% 28%, rgba(255,255,255,.75) 0 10%, transparent 12%), radial-gradient(circle, rgba(255,255,255,.05) 0 58%, rgba(51, 85, 255,.55) 72%, rgba(220,214,255,.9) 76%, transparent 78%) !important; box-shadow: 0 0 16px rgba(51, 85, 255, .35); }
.bl-card:nth-child(3n) .bl-card__dot { background: radial-gradient(circle at 30% 28%, rgba(255,255,255,.75) 0 10%, transparent 12%), radial-gradient(circle, rgba(255,255,255,.05) 0 58%, rgba(51, 85, 255,.55) 72%, rgba(220,214,255,.9) 76%, transparent 78%) !important; box-shadow: 0 0 16px rgba(51, 85, 255, .3); }
.bl-steps { list-style: none; counter-reset: s; margin: 0 0 1.5rem; padding: 0; display: grid; gap: .8rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }
.bl-steps li { counter-increment: s; background: var(--bl-base); border: 1px solid var(--bl-line); border-radius: var(--bl-radius); padding: 1.2rem 1.2rem 1.1rem; }
.bl-steps li::before { content: counter(s); display: grid; place-items: center; width: 2.3rem; height: 2.3rem; border-radius: 50%; background: var(--bl-accent-2); color: #fff; font-family: var(--bl-display); font-weight: 700; margin-bottom: .6rem; }
.bl-table-wrap { overflow-x: auto; background: var(--bl-base); border: 1px solid var(--bl-line); border-radius: var(--bl-radius); }
.bl-table { width: 100%; border-collapse: collapse; font-size: .95rem; min-width: 520px; }
.bl-table th, .bl-table td { padding: .75rem 1rem; text-align: left; border-bottom: 1px solid var(--bl-line); }
.bl-table th { font-weight: 800; color: var(--bl-ink); background: var(--bl-paper); }
.bl-yes { color: var(--bl-accent-2); font-weight: 800; }
.bl-some { color: var(--bl-muted); font-weight: 800; }

/* ---------- Font list ---------- */
.bl-fontlist { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 1.1rem; }
.bl-fontcard { background: var(--bl-base); border: 1px solid var(--bl-line); border-radius: var(--bl-radius); box-shadow: var(--bl-shadow); overflow: hidden; display: flex; flex-direction: column; }
.bl-fontcard__art { font-size: 2.8rem; color: var(--bl-accent); -webkit-text-stroke: .08em #141B4D; paint-order: stroke fill; text-align: center; padding: 1.4rem 1rem; background: var(--bl-paper); line-height: 1.2; overflow: hidden; }
.bl-fontcard:nth-child(3n+2) .bl-fontcard__art { color: var(--bl-aqua); text-shadow: 0 0 .35em rgba(51, 85, 255, .55); }
.bl-fontcard:nth-child(3n) .bl-fontcard__art { color: var(--bl-lemon); text-shadow: 0 0 .35em rgba(51, 85, 255, .5); }
.bl-fontcard__body { padding: 1rem 1.2rem 1.2rem; display: flex; flex-direction: column; gap: .3rem; flex: 1; }
.bl-fontcard__name { font-size: 1.25rem !important; margin: 0 !important; }
.bl-fontcard__body p { margin: 0; font-size: .95rem; }
.bl-fontcard__meta { font-size: .8rem !important; color: var(--bl-muted) !important; }
.bl-fontcard .bl-link { margin-top: auto; padding-top: .4rem; }

/* ---------- Bubble alphabet ---------- */
.bl-abc { display: grid; gap: 1rem; margin: 1.4rem 0; }
.bl-abc__bar { display: flex; flex-wrap: wrap; gap: .8rem 1.2rem; align-items: flex-end; background: var(--bl-base); border: 1px solid var(--bl-line); border-radius: 20px; padding: .9rem 1.1rem; }
.bl-abc select { font-family: var(--bl-ui); font-size: .95rem; padding: .45rem .6rem; border: 1px solid var(--bl-line); border-radius: 12px; background: var(--bl-paper); color: var(--bl-ink); min-height: 40px; }
.bl-abc__title { font-size: 1.3rem !important; margin: .6rem 0 0 !important; }
.bl-abc__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: .6rem; }
.bl-abc__tile {
	display: grid; place-items: center; aspect-ratio: 1; border-radius: 50%; font-family: var(--bl-abc-font); font-size: 2.5rem; line-height: 1; color: var(--bl-accent);
	background: radial-gradient(circle at 30% 26%, rgba(255,255,255,.95) 0 7%, transparent 9%), radial-gradient(circle, #F6F7FF 0 60%, rgba(51, 85, 255,.25) 72%, rgba(51, 85, 255,.5) 75%, transparent 77%);
}
.bl-abc.has-outline .bl-abc__tile { -webkit-text-stroke: .1em #141B4D; paint-order: stroke fill; }
.bl-abc.is-coloring .bl-abc__tile { -webkit-text-stroke: .07em #111; background: #fff; border-radius: 18px; }
@media (max-width: 480px) { .bl-abc__grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .4rem; } .bl-abc__tile { font-size: 1.9rem; } }

/* ---------- Bubble words ---------- */
.bl-words { display: grid; gap: .8rem; margin: 1.4rem 0; }
.bl-words__title { font-size: 1.35rem !important; margin: .8rem 0 0 !important; }
.bl-words__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 190px), 1fr)); gap: .9rem; }
.bl-word { background: var(--bl-base); border: 1px solid var(--bl-line); border-radius: 22px; padding: .9rem; display: flex; flex-direction: column; gap: .5rem; transition: box-shadow .2s, border-color .2s; }
.bl-word:hover { box-shadow: var(--bl-shadow-hover); }
.bl-word__art { font-size: 1.9rem; line-height: 1.15; text-align: center; padding: .7rem .4rem; border-radius: 16px; background: var(--bl-paper); color: var(--bl-accent); -webkit-text-stroke: .08em #141B4D; paint-order: stroke fill; overflow-wrap: anywhere; }
.bl-word:nth-child(5n+2) .bl-word__art { color: var(--bl-aqua); text-shadow: 0 0 .35em rgba(51, 85, 255, .5); }
.bl-word:nth-child(5n+3) .bl-word__art { color: var(--bl-lemon); text-shadow: 0 0 .35em rgba(51, 85, 255, .45); }
.bl-word:nth-child(5n+4) .bl-word__art { color: var(--bl-mint); text-shadow: 0 0 .35em rgba(51, 85, 255, .45); }
.bl-word:nth-child(5n) .bl-word__art { color: var(--bl-violet); text-shadow: 0 0 .35em rgba(51, 85, 255, .5); }
.bl-word__uni { font-size: 1.1rem; color: var(--bl-ink); text-align: center; overflow-wrap: anywhere; }
.bl-word__actions { display: flex; gap: .4rem; justify-content: center; flex-wrap: wrap; }
.bl-word__font { font-size: .75rem; color: var(--bl-muted); text-align: center; }

/* ---------- FAQ ---------- */
.bl-faq { max-width: 860px; margin-inline: auto; }
.bl-faq .wp-block-details { background: var(--bl-base); border: 1px solid var(--bl-line); border-radius: 18px; margin: 0 0 .7rem; overflow: hidden; }
.bl-faq .wp-block-details summary { cursor: pointer; list-style: none; position: relative; padding: 1rem 3.2rem 1rem 1.2rem; font-weight: 800; color: var(--bl-ink); }
.bl-faq .wp-block-details summary::-webkit-details-marker { display: none; }
.bl-faq .wp-block-details summary::after { content: "+"; position: absolute; right: 1rem; top: 50%; transform: translateY(-50%); width: 1.8rem; height: 1.8rem; display: grid; place-items: center; border-radius: 50%; background: #EEF1FF; color: var(--bl-accent-2); font-weight: 800; transition: transform .2s; }
.bl-faq .wp-block-details[open] { border-color: var(--bl-accent); }
.bl-faq .wp-block-details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.bl-faq .wp-block-details > :not(summary) { padding: 0 1.2rem 1rem; margin: 0; }
.bl-faq .wp-block-details summary:focus-visible { outline: 3px solid #9DAEFF; outline-offset: -3px; }

/* ---------- Blog ---------- */
.wp-block-latest-posts.bl-latest { margin: 0 0 1.5rem; padding: 0; gap: 1.1rem; }
.wp-block-latest-posts.bl-latest.is-grid li { background: var(--bl-base); border: 1px solid var(--bl-line); border-radius: var(--bl-radius); padding: 1.1rem 1.2rem; margin: 0 !important; display: flex; flex-direction: column; gap: .4rem; }
.wp-block-latest-posts.bl-latest a.wp-block-latest-posts__post-title { font-family: var(--bl-display); font-size: 1.12rem; color: var(--bl-ink); text-decoration: none; line-height: 1.25; }
.wp-block-latest-posts.bl-latest .wp-block-latest-posts__post-date { order: -1; font-size: .76rem; font-weight: 800; color: var(--bl-accent-2); text-transform: uppercase; letter-spacing: .06em; }
@media (max-width: 781px) { .wp-block-latest-posts.bl-latest.is-grid { grid-template-columns: 1fr; } }
.bl-post-thumb { display: grid; place-items: center; aspect-ratio: 16 / 9; width: 100%; background: linear-gradient(180deg, #EEF1FF, #FFFFFF); font-size: clamp(2rem, 5vw, 3.2rem); color: var(--bl-accent); }
.post-thumbnail-inner .bl-post-thumb, .post-thumbnail .bl-post-thumb { position: absolute; inset: 0; aspect-ratio: auto; }
.bl-tip, .bl-guide-tip { background: #EEF1FF; border-radius: 16px; padding: .9rem 1.1rem; border: 1px solid #CCD4FF; color: var(--bl-ink); }

/* ---------- CTA ---------- */
.bl-cta { position: relative; overflow: hidden; border: 1px solid rgba(51, 85, 255, .45); background: radial-gradient(circle at 15% 20%, rgba(255,255,255,.5) 0 2%, transparent 3%), radial-gradient(circle at 85% 70%, rgba(255,255,255,.35) 0 1.5%, transparent 2.5%), var(--bl-accent-2); border-radius: calc(var(--bl-radius) + 8px); padding: clamp(2rem, 5vw, 3.2rem) 1.5rem; text-align: center; }
.bl-cta h2 { color: #fff !important; font-size: clamp(1.9rem, 4.5vw, 2.7rem) !important; margin-top: 0 !important; }
.bl-cta p { color: #EEF1FF !important; }
.bl-cta .bl-btns .wp-block-button .wp-block-button__link, .bl-cta .bl-btns .wp-block-button:not(.is-style-outline) .wp-block-button__link { background: #fff !important; color: var(--bl-accent-2) !important; border-color: #fff !important; box-shadow: none; }

.bl-front-fallback .entry-content > * { max-width: none; }

/* ---------- Phones ---------- */
@media (max-width: 600px) {
	.bl-list--fonts .bl-row__preview { font-size: min(var(--bl-size, 40px), 9vw); min-height: 3em; }
	.bl-words__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
	.bl-word { padding: .6rem; gap: .4rem; }
	.bl-word__art { font-size: 1.3rem; padding: .5rem .2rem; }
	.bl-word__uni { font-size: .95rem; }
	.bl-word__actions .bl-btn { padding: .45em .7em; font-size: .82rem; min-height: 36px; }
	.bl-stage { border-radius: 24px; }
}

@media (prefers-reduced-motion: reduce) {
	body.blfg::after, .bl-bub { animation: none; }
	.bl-row, .bl-btn, .bl-tab, .bl-card, .bl-word { transition: none; }
}

.bl-fontcard__links { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin: .6rem 0 0 !important; }
.bl-fontcard__links .bl-btn { text-decoration: none; }


/* ==========================================================================
   Cobalt & Bubblegum accents (v1.4)
   Cobalt = everything you can click. Pink = delight only (never the only cue).
   ========================================================================== */
body.blfg {
	background:
		radial-gradient(38rem 26rem at 100% 0, rgba(255, 79, 139, .10), transparent 70%),
		radial-gradient(42rem 30rem at 0 0, rgba(51, 85, 255, .12), transparent 70%),
		linear-gradient(180deg, #EEF1FF 0, #FFFFFF 760px);
	background-color: #FFFFFF;
}
body.blfg::after {
	background-image:
		radial-gradient(circle at 30% 30%, rgba(255,255,255,.4) 0 6%, rgba(51, 85, 255,.08) 7% 60%, rgba(51, 85, 255,.35) 62%, transparent 64%),
		radial-gradient(circle at 30% 30%, rgba(255,255,255,.4) 0 6%, rgba(255, 79, 139,.08) 7% 60%, rgba(255, 79, 139,.35) 62%, transparent 64%),
		radial-gradient(circle at 30% 30%, rgba(255,255,255,.4) 0 6%, rgba(51, 85, 255,.08) 7% 60%, rgba(51, 85, 255,.3) 62%, transparent 64%);
}
/* Hero: second line in bubblegum */
.bl-hero h1 .bl-h-2 { color: var(--bl-accent); }
.bl-hero h1 .bl-h-3 { color: var(--bl-pink); -webkit-text-stroke: 0; }
.bl-eyebrow { display: flex; align-items: center; gap: .5em; margin-inline: auto; }
.bl-hero .bl-eyebrow { display: flex; }
.bl-eyebrow::before { content: ""; width: .6em; height: .6em; border-radius: 50%; background: var(--bl-pink); box-shadow: 0 0 0 3px var(--bl-pink-soft); }

/* Iridescent soap bubbles: cobalt -> pink -> aqua rim, letters alternate cobalt / bubblegum */
.bl-stage { background: linear-gradient(180deg, #F6F7FF, #FFFFFF 70%); }
.bl-bub {
	background:
		radial-gradient(circle at 30% 26%, rgba(255, 255, 255, .95) 0 7%, rgba(255, 255, 255, 0) 9%),
		radial-gradient(circle at 70% 78%, rgba(255, 255, 255, .5) 0 5%, rgba(255, 255, 255, 0) 9%),
		radial-gradient(circle at 50% 50%, rgba(255, 255, 255, .9) 0 57%, rgba(255, 255, 255, .25) 66%, rgba(255, 255, 255, 0) 70%),
		conic-gradient(from 200deg, #3355FF, #8FA2FF, #FF4F8B, #FFB3CC, #6FD3FF, #3355FF);
	-webkit-mask: radial-gradient(circle, #000 0 70.5%, transparent 71.5%);
	        mask: radial-gradient(circle, #000 0 70.5%, transparent 71.5%);
	box-shadow: none;
	filter: drop-shadow(0 6px 12px rgba(51, 85, 255, .16));
}
.bl-bub:nth-of-type(even) { --c: var(--bl-pink); }
.bl-bub.is-popped { -webkit-mask: none; mask: none; filter: none; }

/* Small accents */
.bl-badges li::before { background: radial-gradient(circle at 30% 30%, #fff 0 18%, transparent 22%), var(--bl-pink); }
.bl-badges li:nth-child(2)::before { background: radial-gradient(circle at 30% 30%, #fff 0 18%, transparent 22%), var(--bl-accent); }
.bl-fav[aria-pressed="true"] { color: var(--bl-pink-text) !important; border-color: var(--bl-pink); background: var(--bl-pink-soft); }
.bl-card__dot, .bl-card:nth-child(3n+2) .bl-card__dot, .bl-card:nth-child(3n) .bl-card__dot {
	background: radial-gradient(circle at 30% 28%, rgba(255,255,255,.8) 0 10%, transparent 13%), var(--bl-accent) !important;
	box-shadow: 0 6px 14px rgba(51, 85, 255, .28);
}
.bl-card:nth-child(2n) .bl-card__dot { background: radial-gradient(circle at 30% 28%, rgba(255,255,255,.8) 0 10%, transparent 13%), var(--bl-pink) !important; box-shadow: 0 6px 14px rgba(255, 79, 139, .3); }
.bl-card:hover { box-shadow: 0 0 0 1px rgba(51, 85, 255, .35), 0 14px 30px rgba(51, 85, 255, .14); }
.bl-tab[aria-selected="true"] { box-shadow: 0 6px 14px rgba(51, 85, 255, .28); }
.bl-section__title::after { content: ""; display: block; width: 3.2rem; height: .32rem; border-radius: 99px; margin: .55rem auto 0; background: linear-gradient(90deg, var(--bl-accent) 0 60%, var(--bl-pink) 60%); }
.bl-cta {
	background:
		radial-gradient(circle at 12% 22%, rgba(255,255,255,.45) 0 2.4%, transparent 3.2%),
		radial-gradient(circle at 88% 72%, rgba(255, 179, 204, .55) 0 4%, transparent 5%),
		radial-gradient(circle at 78% 18%, rgba(255,255,255,.3) 0 1.6%, transparent 2.4%),
		linear-gradient(120deg, #2440E6 0%, #3355FF 55%, #6A4CF0 100%);
	border: 0;
}
.bl-cta .bl-btns .wp-block-button .wp-block-button__link, .bl-cta .bl-btns .wp-block-button:not(.is-style-outline) .wp-block-button__link { color: #2440E6 !important; }
body.blfg .entry-content a:not(.bl-btn):not(.wp-block-button__link) { text-decoration-color: var(--bl-pink); text-underline-offset: .18em; text-decoration-thickness: 2px; }
::selection { background: var(--bl-pink-soft); color: var(--bl-ink); }
@media (prefers-reduced-motion: reduce) { .bl-bub { filter: none; } }