/* openbka.org: the Bickerton Beekeeping design system, styled like the Can I Check My Bees site.
   Titles in Champ, text in DM Sans. */

:root {
	color-scheme: light;
	--font-body: "DM Sans Variable", system-ui, -apple-system, "Segoe UI", sans-serif;
	--font-display: "Champ", "DM Sans Variable", system-ui, sans-serif;
	--title-weight: var(--fw-medium);
}

:where(a, button):focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
::selection { background: var(--honey-300); color: var(--wax-900); }

.ob-brand { display: inline-flex; align-items: center; gap: var(--space-3); color: var(--text-primary); text-decoration: none; }
.ob-brand .ob-bee { font-size: 1.6rem; line-height: 1; }
.ob-brand b { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--text-xl); line-height: 1; letter-spacing: var(--tracking-tight); }

* { box-sizing: border-box; }
body { margin: 0; background: var(--surface-page); color: var(--text-primary); font-family: var(--font-body); font-size: var(--text-base); line-height: var(--leading-normal); }
a { color: inherit; }
.wrap { width: min(1080px, 100% - 32px); margin-inline: auto; }

header.top { display: flex; align-items: center; justify-content: space-between; padding-block: var(--space-5); }
header.top a.ob-brand { text-decoration: none; }
.signin { font-weight: var(--fw-semibold); text-decoration: none; padding: var(--space-2) var(--space-4); border-radius: var(--radius-pill); }
.signin:hover { background: var(--wax-100); }
.top-links { display: flex; align-items: center; gap: var(--space-2); }
.github { display: inline-flex; padding: var(--space-2); border-radius: var(--radius-pill); color: var(--text-primary); }
.github:hover { background: var(--wax-100); }

.hero { padding-block: var(--space-16) var(--space-20); max-width: 46rem; }
.eyebrow { margin: 0 0 var(--space-4); font-size: var(--text-xs); font-weight: var(--fw-bold); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--honey-800); }
h1 { margin: 0; font-family: var(--font-display); font-weight: var(--title-weight); font-size: clamp(2.25rem, 6vw, var(--text-6xl)); line-height: var(--leading-tight); letter-spacing: var(--tracking-tighter); text-wrap: balance; }
.lede { margin: var(--space-6) 0 0; font-size: var(--text-lg); color: var(--text-secondary); max-width: 38rem; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin-top: var(--space-8); }
.btn { display: inline-flex; align-items: center; justify-content: center; height: 48px; padding-inline: var(--space-6); border-radius: var(--radius-pill); font-weight: var(--fw-bold); text-decoration: none; transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
.btn-primary { background: var(--brand); color: var(--on-brand); }
.btn-primary:hover { background: var(--wax-900); color: var(--brand); }
.btn-quiet { border: var(--border-width) solid var(--border-default); background: var(--surface-card); }
.btn-quiet:hover { background: var(--wax-100); }
.note { margin: var(--space-3) 0 0; font-size: var(--text-sm); color: var(--text-muted); }

h2 { margin: 0 0 var(--space-6); font-family: var(--font-display); font-weight: var(--title-weight); font-size: var(--text-3xl); letter-spacing: var(--tracking-tight); line-height: var(--leading-snug); }
section { padding-block: var(--space-12); }
.grid { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.card { background: var(--surface-card); border: var(--border-width) solid var(--border-subtle); border-radius: var(--radius-lg); box-shadow: var(--shadow-xs); padding: var(--space-6); }
.card h3 { margin: 0 0 var(--space-2); font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: var(--text-lg); }
.card p { margin: 0; color: var(--text-secondary); }
.card ul { margin: var(--space-4) 0 0; padding-left: 1.2em; color: var(--text-secondary); }
.card li + li { margin-top: var(--space-1); }
.card .btn { margin-top: var(--space-6); }
.plans { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.plans .card:first-child { border-color: var(--honey-300); background: var(--surface-brand-subtle); }

footer { padding-block: var(--space-12) var(--space-16); color: var(--text-muted); font-size: var(--text-sm); border-top: var(--border-width) solid var(--border-subtle); margin-top: var(--space-12); }
footer a { color: var(--text-link); }

/* ---------- Honeycomb background (from Can I Check My Bees) ----------
   Dots on the cell corners everywhere. Near the pointer: a soft honey glow, faint cell walls,
   and fainter still the "Y" of the cells on the far side. Tiles are masks coloured from tokens.
   */

.hexfield {
	position: fixed;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	--mx: -999px;
	--my: -999px;
	--r: 220px;
	--tile: 56px 96.995px;
	--near: radial-gradient(circle var(--r) at var(--mx) var(--my), #000 0, #000 30%, transparent 100%);
	--far: radial-gradient(circle var(--r) at var(--mx) var(--my), transparent 0, transparent 35%, #000 85%);
}

.hexfield i {
	position: absolute;
	inset: 0;
	display: block;
	background: var(--honey-700);
}

.hex-base {
	opacity: 0.22;
	-webkit-mask: url(../bickerton/brand/honeycomb-dots.svg) 0 0 / var(--tile) repeat, var(--far);
	mask: url(../bickerton/brand/honeycomb-dots.svg) 0 0 / var(--tile) repeat, var(--far);
	-webkit-mask-composite: source-in;
	mask-composite: intersect;
}

.hexfield i.hex-glow {
	opacity: 0;
	background: radial-gradient(circle calc(var(--r) * 1.3) at var(--mx) var(--my), color-mix(in srgb, var(--honey-300) 14%, transparent), transparent 70%);
}

.hex-lit {
	-webkit-mask: url(../bickerton/brand/honeycomb.svg) 0 0 / var(--tile) repeat, var(--near);
	mask: url(../bickerton/brand/honeycomb.svg) 0 0 / var(--tile) repeat, var(--near);
}

.hex-y {
	-webkit-mask: url(../bickerton/brand/honeycomb-y.svg) 0 0 / var(--tile) repeat, var(--near);
	mask: url(../bickerton/brand/honeycomb-y.svg) 0 0 / var(--tile) repeat, var(--near);
}

/* After the mask shorthands, which reset it. */
.hex-lit,
.hex-y {
	opacity: 0;
	-webkit-mask-composite: source-in;
	mask-composite: intersect;
}

.hexfield.lit .hex-glow { opacity: 1; }
.hexfield.lit .hex-lit { opacity: 0.13; }
.hexfield.lit .hex-y { opacity: 0.05; }

@media (prefers-reduced-motion: no-preference) {
	.hex-glow,
	.hex-lit,
	.hex-y {
		transition: opacity var(--dur-slow) var(--ease-out);
	}
}