/* CannaLib design layer (cannalib-design). Tokens first, then site-wide fixes, then page-specific rules.
   Divi writes per-module CSS with high specificity, so the fixes are prefixed with body #page-container and use
   !important only where Divi's own rules would otherwise win. */

:root {
	--cl-bg: #0c1220;
	--cl-surface: #111a2b;
	--cl-surface-2: #16213a;
	--cl-border: #26334d;
	--cl-border-2: #334566;
	--cl-text: #f2f5fb;
	--cl-muted: #b6bfd4;
	--cl-dim: #8591aa;
	--cl-blue: #5b9bff;
	--cl-teal: #2ec4d6;
	--cl-amber: #ffb74d;
	--cl-green: #3dde7a;
	--cl-r-card: 14px;
	--cl-r-btn: 10px;
	--cl-s1: 4px; --cl-s2: 8px; --cl-s3: 12px; --cl-s4: 16px; --cl-s5: 24px; --cl-s6: 32px; --cl-s7: 48px; --cl-s8: 72px; --cl-s9: 96px;
	--cl-btn-h: 44px;
	--cl-mono: "IBM Plex Mono", ui-monospace, monospace;
	--cl-sans: "IBM Plex Sans", system-ui, sans-serif;
	--cl-serif: "IBM Plex Serif", Georgia, serif;
}

/* ---------- sky canvases ---------- */

.cl-sky {
	display: block;
	pointer-events: none;
}
.cl-sky--ambient {
	position: fixed;
	inset: 0;
	width: 100vw;
	height: 100vh;
	z-index: -1;
	opacity: 0.9;
}

/* ---------- groups: only real cards get the card shadow ---------- */

/* Divi's global rule gives every .et_pb_group a card shadow, so the invisible chip and button rows showed up as dark
   bands. A card has a heading in it; a bare row of chips or buttons does not. */
body #page-container .et_pb_group:not(:has(h1, h2, h3, h4, h5, h6)) {
	box-shadow: none !important;
	background-color: transparent !important;
}

/* ---------- buttons: one height, one shape ---------- */

body #page-container .et_pb_button_module_wrapper {
	margin: 0 !important;
}
body #page-container .et_pb_button,
body #page-container .et_pb_button:hover {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-height: var(--cl-btn-h);
	padding: 0 20px !important;
	line-height: 1.1 !important;
	font-family: var(--cl-sans) !important;
	font-size: 15px !important;
	font-weight: 600 !important;
	letter-spacing: 0 !important;
	border-radius: var(--cl-r-btn) !important;
	white-space: nowrap;
}
body #page-container .et_pb_button::after,
body #page-container .et_pb_button::before {
	display: none !important;
}
body #page-container .et_pb_button {
	transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
body #page-container .et_pb_button:hover {
	transform: translateY(-1px);
}
body #page-container .et_pb_button:focus-visible {
	outline: 2px solid var(--cl-teal);
	outline-offset: 3px;
}
/* A row of buttons: even gaps, no stray indents. */
body #page-container .et_pb_group:has(> .et_pb_button_module_wrapper) {
	gap: var(--cl-s3) !important;
	padding: 0 !important;
}

/* ---------- card rows: equal heights, links on one line ---------- */

body #page-container .et_pb_row > .et_pb_column > .et_pb_module:only-child {
	flex-grow: 1;
	height: auto;
}
body #page-container .et_pb_row > .et_pb_column:has(> .et_pb_module:only-child) {
	display: flex;
	flex-direction: column;
}
/* One inner padding for every surface (stat tiles were 17px, cards 23px), so text lines up from section to section. */
body #page-container .et_pb_row:has(> .et_pb_column:nth-child(2)) > .et_pb_column > .et_pb_text:only-child,
body #page-container .et_pb_group:has(h1, h2, h3, h4, h5, h6) {
	padding-left: 24px !important;
	padding-right: 24px !important;
}
body #page-container .et_pb_row:has(> .et_pb_column:nth-child(2)) > .et_pb_column > .et_pb_text:only-child {
	padding-top: 20px !important;
	padding-bottom: 20px !important;
}
body #page-container .et_pb_group:has(h1, h2, h3, h4, h5, h6) {
	padding-top: 24px !important;
	padding-bottom: 24px !important;
}

/* Card groups: pin the last module (the "Open … →" link) to the bottom so links align across a row. */
body #page-container .et_pb_group:has(h1, h2, h3, h4, h5, h6) {
	display: flex !important;
	flex-direction: column !important;
	flex-wrap: nowrap !important;
}
body #page-container .et_pb_group:has(h1, h2, h3, h4, h5, h6) > .et_pb_module:last-child:not(:first-child) {
	margin-top: auto !important;
	padding-top: var(--cl-s3);
}

/* Tile rows that wrap (five or more tiles, e.g. home "Breadth" and the dossier figures): a real grid, so every row
   of tiles is as tall as the tallest tile, not just the tiles that happen to share a line. */
body #page-container .et_pb_row:has(> .et_pb_column:nth-child(5)):not(:has(> .et_pb_column > .et_pb_group)) {
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	grid-auto-rows: 1fr;
	gap: var(--cl-s4) !important;
}
body #page-container .et_pb_row:has(> .et_pb_column:nth-child(5)):not(:has(> .et_pb_column > .et_pb_group)) > .et_pb_column {
	width: auto !important;
	max-width: none !important;
	margin: 0 !important;
}
@media (max-width: 980px) {
	body #page-container .et_pb_row:has(> .et_pb_column:nth-child(5)):not(:has(> .et_pb_column > .et_pb_group)) {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
@media (max-width: 599px) {
	body #page-container .et_pb_row:has(> .et_pb_column:nth-child(5)):not(:has(> .et_pb_column > .et_pb_group)) {
		grid-template-columns: minmax(0, 1fr);
		grid-auto-rows: auto;
	}
}

/* ---------- eyebrows ---------- */

/* Every eyebrow is the same thing: small mono caps, 12px above its heading. Divi's column gap is 30px, so the
   eyebrow module pulls the next module up by 18px. */
#et-main-area h6 {
	text-transform: uppercase !important;
	padding-bottom: 0 !important;
}
body #page-container .et_pb_column > .et_pb_heading:has(h6) {
	margin-bottom: -18px !important;
}

.clxe .x-eyebrow {
	color: var(--cl-teal) !important;
}
@media (max-width: 600px) {
	#et-main-area h6,
	#et-main-area .x-eyebrow {
		letter-spacing: 0.08em !important;
		font-size: 11px !important;
		line-height: 1.5 !important;
	}
}

/* ---------- footer ---------- */

body #page-container .et_pb_image_0_tb_footer,
body #page-container .et_pb_image_0_tb_footer .et_pb_image_wrap,
body #page-container .et_pb_image_0_tb_footer img {
	width: 40px !important;
	max-width: 40px !important;
	height: auto !important;
}

/* "In the network": one slim line along the bottom of the footer (row added by cannalib_footer_network.py): a small
   mark and the name of each site and library. The page you are on is plain text, the rest are links. */
body #page-container .et-l--footer .et_pb_row:has(.cl-net) {
	border-top: 1px solid var(--cl-border);
	padding-top: var(--cl-s4) !important;
	margin-top: var(--cl-s3);
}
.cl-net {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--cl-s2) var(--cl-s5);
	font: 400 13px/1.4 var(--cl-sans);
}
.cl-net-label {
	font: 500 11px/1.4 var(--cl-mono);
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--cl-teal);
	margin-right: var(--cl-s1);
}
.cl-net-item {
	display: inline-flex;
	align-items: center;
	gap: var(--cl-s2);
	color: var(--cl-muted) !important;
	text-decoration: none !important;
	transition: color .15s ease;
}
a.cl-net-item:hover {
	color: var(--cl-text) !important;
}
a.cl-net-item:focus-visible {
	outline: 2px solid var(--cl-teal);
	outline-offset: 3px;
	border-radius: 4px;
}
.cl-net-item.is-here {
	color: var(--cl-text) !important;
}
.cl-net-item img {
	width: 20px !important;
	height: 20px !important;
	flex: none;
	border-radius: 5px;
}

/* ---------- home: hero ---------- */

body #page-container .et_pb_section:not([class*="_tb_"]):has(.cl-hero-anchor) {
	position: relative;
	overflow: visible;
	isolation: isolate;
	min-height: min(86vh, 860px);
	display: flex !important;
	flex-direction: column;
	justify-content: center;
	padding-top: var(--cl-s8) !important;
	padding-bottom: var(--cl-s8) !important;
	background-color: transparent !important;
}
.cl-sky--hero {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
}
/* No painted scrim: a colour layer here showed the hero's box as a darker panel with hard edges against the glowing
   page background. The canvas is faded with a mask instead (calm under the text, open where the graph is, soft at the
   bottom), and sky.js stretches it to the full window width, so there is no box to see. */
.cl-sky--hero {
	-webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0.55) 36%, #000 62%), linear-gradient(180deg, #000 72%, transparent 100%);
	-webkit-mask-composite: source-in;
	mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0.55) 36%, #000 62%), linear-gradient(180deg, #000 72%, transparent 100%);
	mask-composite: intersect;
}
body #page-container .et_pb_section:not([class*="_tb_"]):has(.cl-hero-anchor) > .et_pb_row {
	position: relative;
	z-index: 1;
	width: 100%;
}
body #page-container .et_pb_section:not([class*="_tb_"]):has(.cl-hero-anchor) > .et_pb_row > .et_pb_column {
	flex: 0 1 min(760px, 48vw) !important;
	max-width: min(760px, 48vw) !important;
	width: auto !important;
}
body #page-container .cl-hero-anchor,
body #page-container .et_pb_code:has(> .et_pb_code_inner > .cl-hero-anchor) {
	margin: 0 !important;
	padding: 0 !important;
	height: 0;
}
body #page-container .et_pb_section:not([class*="_tb_"]):has(.cl-hero-anchor) h1 {
	font-size: clamp(38px, 4.8vw, 62px) !important;
	line-height: 1.08 !important;
	letter-spacing: -0.015em !important;
	text-wrap: balance;
}
body #page-container .et_pb_section:not([class*="_tb_"]):has(.cl-hero-anchor) .et_pb_text p {
	text-wrap: pretty;
}

@media (max-width: 1099px) {
	body #page-container .et_pb_section:not([class*="_tb_"]):has(.cl-hero-anchor) {
		min-height: 0;
		padding-top: var(--cl-s7) !important;
		padding-bottom: 340px !important; /* tablet: room for the pedigree band under the buttons */
	}
	.cl-sky--hero {
		-webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.25) 0, rgba(0, 0, 0, 0.3) calc(100% - 300px), #000 calc(100% - 220px), #000 calc(100% - 50px), transparent 100%);
		mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.25) 0, rgba(0, 0, 0, 0.3) calc(100% - 300px), #000 calc(100% - 220px), #000 calc(100% - 50px), transparent 100%);
	}
	body #page-container .et_pb_section:not([class*="_tb_"]):has(.cl-hero-anchor) h1 {
		font-size: clamp(32px, 9vw, 40px) !important;
	}
}

@media (max-width: 767px) {
	body #page-container .et_pb_section:not([class*="_tb_"]):has(.cl-hero-anchor) {
		padding-bottom: 280px !important; /* mobile: compact pedigree band */
	}
}
@media (max-width: 1099px) {
	/* stacked hero: the text column takes the full width again */
	body #page-container .et_pb_section:not([class*="_tb_"]):has(.cl-hero-anchor) > .et_pb_row > .et_pb_column {
		flex: 1 1 auto !important;
		max-width: none !important;
	}
}

/* Live caption under the lit strain (placed by sky.js): real counts, a real link. */
.cl-hero-lit {
	position: absolute;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	opacity: 0;
	transition: opacity 0.4s ease;
	text-align: center;
	text-decoration: none !important;
	white-space: nowrap;
}
.cl-hero-lit.is-placed { opacity: 1; }
.cl-hero-lit.is-placed.is-away { opacity: 0; pointer-events: none; }
.cl-hero-lit span {
	font: 500 11px/1.3 var(--cl-mono);
	letter-spacing: 0.04em;
	color: var(--cl-dim);
}
.cl-hero-lit b {
	font: 600 13px/1.3 var(--cl-sans);
	color: var(--cl-blue);
}
.cl-hero-lit:hover b { color: var(--cl-teal); }
@media (max-width: 767px) {
	.cl-hero-lit span { display: none; } /* phones: just the link, clear of the stats strip */
}
/* Beside-the-graph widths: the three chips stay on one line even when the text column is narrower than they are. */
@media (min-width: 1100px) {
	body #page-container .et_pb_section:not([class*="_tb_"]):has(.cl-hero-anchor) .et_pb_group:not(:has(> .et_pb_button_module_wrapper)) {
		flex-wrap: nowrap !important;
		width: max-content !important;
		max-width: none !important;
	}
}

/* ---------- home: sections ---------- */

body.home #page-container .et_pb_section_0_tb_body .et_pb_section:not(:has(.cl-hero-anchor)) {
	padding-top: var(--cl-s7) !important;
	padding-bottom: var(--cl-s7) !important;
}
/* The stats strip sits right under the hero. */
body.home #page-container .et_pb_section_0_tb_body .et_pb_section:not([class*="_tb_"]):has(.cl-hero-anchor) + .et_pb_section {
	padding-top: 0 !important;
	margin-top: calc(var(--cl-s7) * -1);
	position: relative;
	z-index: 2;
}

/* Tablets: the four stat tiles under the hero go 2 x 2 instead of four slivers. */
@media (min-width: 600px) and (max-width: 980px) {
	body.home #page-container .et_pb_section:not([class*="_tb_"]):has(.cl-hero-anchor) + .et_pb_section > .et_pb_row {
		display: grid !important;
		grid-template-columns: 1fr 1fr;
		grid-auto-rows: 1fr; /* both rows as tall as the tallest tile */
		gap: var(--cl-s4) !important;
	}
	body.home #page-container .et_pb_section:not([class*="_tb_"]):has(.cl-hero-anchor) + .et_pb_section > .et_pb_row > .et_pb_column {
		width: auto !important;
		max-width: none !important;
		margin: 0 !important;
	}
}

/* "What we refused to count": a figure row, amber number over its label. */
.cl-refused-h {
	margin: 0 0 var(--cl-s4) !important;
	padding: 0 !important;
	font: 500 11px/1.4 var(--cl-mono) !important;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--cl-dim) !important;
}
.cl-refused {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: var(--cl-s5);
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}
.cl-refused li {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 0 !important;
	padding: 0 0 0 14px !important;
	border-left: 2px solid rgba(255, 183, 77, 0.35);
	list-style: none !important;
}
.cl-refused-n {
	font: 500 22px/1.1 var(--cl-mono);
	color: var(--cl-amber);
	font-variant-numeric: tabular-nums;
}
.cl-refused-l {
	font: 400 14px/1.45 var(--cl-sans);
	color: var(--cl-muted);
}
@media (max-width: 980px) {
	.cl-refused { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 599px) {
	.cl-refused { grid-template-columns: minmax(0, 1fr); gap: var(--cl-s4); }
}

/* ---------- mobile: stacked, full-width actions ---------- */

@media (max-width: 767px) {
	body #page-container .et_pb_group:has(> .et_pb_button_module_wrapper) {
		flex-direction: column !important;
		align-items: stretch !important;
	}
	body #page-container .et_pb_group:has(> .et_pb_button_module_wrapper) > .et_pb_button_module_wrapper {
		width: 100% !important;
		text-align: left !important;
	}
	body #page-container .et_pb_group:has(> .et_pb_button_module_wrapper) .et_pb_button {
		width: 100% !important;
		max-width: none !important; /* Divi caps buttons at max-content */
	}
	/* Chips stay content-sized pills, left-aligned with the text. */
	body #page-container .et_pb_group:not(:has(h1, h2, h3, h4, h5, h6)):not(:has(> .et_pb_button_module_wrapper)) {
		gap: var(--cl-s2) !important;
	}
}

/* ---------- index pages: strains (1361) and competitions (1363) ---------- */

body.page-id-1361 #page-container .et_pb_text_inner > ul[style*="list-style"],
body.page-id-1363 #page-container .et_pb_text_inner > ul[style*="list-style"] {
	display: grid !important;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 10px 12px;
	max-width: none !important; /* the theme caps lists at a reading width */
	margin: 0 0 var(--cl-s5) !important;
}
body.page-id-1361 #page-container .et_pb_text_inner > ul[style*="list-style"] > li,
body.page-id-1363 #page-container .et_pb_text_inner > ul[style*="list-style"] > li {
	display: flex;
	flex-direction: column;
	gap: 3px;
	margin: 0 !important;
	padding: 12px 14px;
	background: var(--cl-surface);
	border: 1px solid var(--cl-border);
	border-radius: var(--cl-r-btn);
	transition: border-color 0.15s ease, background-color 0.15s ease;
}
body.page-id-1361 #page-container .et_pb_text_inner > ul[style*="list-style"] > li:hover,
body.page-id-1363 #page-container .et_pb_text_inner > ul[style*="list-style"] > li:hover {
	border-color: var(--cl-teal);
	background: var(--cl-surface-2);
}
body.page-id-1361 #page-container .et_pb_text_inner > ul[style*="list-style"] > li > a,
body.page-id-1363 #page-container .et_pb_text_inner > ul[style*="list-style"] > li > a {
	font-weight: 600;
	color: var(--cl-text);
	text-decoration: none;
}
body.page-id-1361 #page-container .et_pb_text_inner > ul[style*="list-style"] > li > a::after,
body.page-id-1363 #page-container .et_pb_text_inner > ul[style*="list-style"] > li > a::after {
	content: "";
	position: absolute;
	inset: 0;
}
body.page-id-1361 #page-container .et_pb_text_inner > ul[style*="list-style"] > li,
body.page-id-1363 #page-container .et_pb_text_inner > ul[style*="list-style"] > li {
	position: relative;
}
body.page-id-1361 #page-container .et_pb_text_inner > ul[style*="list-style"] > li > span,
body.page-id-1363 #page-container .et_pb_text_inner > ul[style*="list-style"] > li > span {
	line-height: 1.45;
}

/* ---------- /api/signup/ ---------- */

.cl-signup {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 520px);
	gap: var(--cl-s7);
	align-items: start;
	width: 92%; /* the same left edge as every Divi row on the site */
	max-width: 1323px;
	margin: 0 auto;
	padding: var(--cl-s8) 0 var(--cl-s9);
	box-sizing: border-box;
}
.cl-signup-intro .cl-eyebrow {
	margin: 0 0 var(--cl-s3);
	font: 500 12px/1.4 var(--cl-mono);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--cl-teal);
}
.cl-signup-intro h1 {
	margin: 0 0 var(--cl-s4);
	padding: 0;
	font: 500 clamp(32px, 4vw, 48px)/1.1 var(--cl-serif);
	letter-spacing: -0.01em;
	color: var(--cl-text);
}
.cl-signup-intro .cl-lead {
	margin: 0 0 var(--cl-s6);
	font: 400 17px/1.6 var(--cl-sans);
	color: var(--cl-muted);
	max-width: 52ch;
}
.cl-signup-facts {
	display: grid;
	gap: var(--cl-s3);
	margin: 0;
	padding: 0;
	list-style: none;
}
.cl-signup-facts li {
	display: flex;
	gap: var(--cl-s3);
	align-items: baseline;
	padding: 14px 16px;
	background: var(--cl-surface);
	border: 1px solid var(--cl-border);
	border-radius: var(--cl-r-btn);
	font: 400 15px/1.5 var(--cl-sans);
	color: var(--cl-muted);
}
.cl-signup-facts li strong {
	color: var(--cl-text);
	font-weight: 600;
}
.cl-signup-facts li::before {
	content: "";
	flex: 0 0 8px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--cl-teal);
	transform: translateY(-1px);
}
.cl-signup-card .pdapi {
	margin: 0 !important;
	max-width: none !important;
}
.cl-signup-card .pdapi-field input[type="email"],
.cl-signup-card .pdapi-field input[type="text"] {
	width: 100% !important;
	max-width: none !important;
	box-sizing: border-box;
	min-height: var(--cl-btn-h);
}
.cl-signup-card .pdapi-btn {
	min-height: var(--cl-btn-h);
	border-radius: var(--cl-r-btn) !important;
}
.cl-signup-card .pdapi-card {
	margin: 0 !important;
	border-radius: var(--cl-r-card) !important;
	box-shadow: 0 20px 48px rgba(0, 0, 0, 0.35);
}
@media (max-width: 900px) {
	.cl-signup {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--cl-s6);
		padding-top: var(--cl-s7);
	}
}

.pdapi .pdapi-btn--primary,
.pdapi .pdapi-btn--primary:hover {
	background: var(--cl-blue) !important;
	border-color: var(--cl-blue) !important;
	color: var(--cl-bg) !important;
}

@media (prefers-reduced-motion: reduce) {
	body #page-container .et_pb_button:hover {
		transform: none;
	}
}