/* Dixie Jane Terpenes — front-end chart styles. */

/* --------------------------------------------------------------
   Full-bleed utility
   Breaks an element out of the theme's content container — e.g.
   rows inside the WooCommerce description tab. Add the CSS class
   "dj-full-bleed" to the row (block editor: "Additional CSS
   class(es)"; page builders: the row's CSS class setting).
   Loaded only on pages that render a [dj_terpenes]/[dj_effects]
   shortcode.
   -------------------------------------------------------------- */

/* The 100vw breakout can overhang the scrollbar by a few px. */
body {
	overflow-x: clip;
}

.dj-full-bleed {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

/* Shoptimizer clips the tabs wrapper; let a full-bleed row escape it. */
.woocommerce-tabs:has(.dj-full-bleed) {
	overflow: visible;
}

/* Optional inner wrapper: background runs edge to edge while the
   content re-aligns with the site container (.col-full = 1170px). */
.dj-full-bleed .dj-contain {
	max-width: 1170px;
	margin-left: auto;
	margin-right: auto;
}

.djt-chart {
	max-width: 780px;
	margin: 1.5em auto;
}

.djt-chart .djt-svg {
	display: block;
	width: 100%;
	height: auto;
	font-family: inherit;
}

.djt-chart .djt-echart {
	width: 100%;
	height: 460px;
}

@media (max-width: 600px) {
	.djt-chart .djt-echart {
		height: 380px;
	}
}

/* Legend inherits font family, size and colour from the site theme.
   Desktop gets its detail from the hover tooltip, so the legend only
   shows on smaller screens where it doubles as the tap fallback. */
.djt-legend {
	list-style: none;
	margin: 12px 0 0;
	padding: 0;
	font-size: 0.85em;
}

@media (min-width: 768px) {
	.djt-legend {
		display: none;
	}
}

.djt-legend li {
	display: flex;
	align-items: baseline;
	gap: 8px;
	margin: 3px 0;
	line-height: 1.4;
}

.djt-legend a {
	color: inherit;
	text-decoration: none;
	border-bottom: 1px dotted currentColor;
}
.djt-legend a:hover {
	border-bottom-style: solid;
}

.djt-legend .djt-swatch {
	flex: 0 0 auto;
	width: 10px;
	height: 10px;
	border-radius: 2px;
	transform: translateY(1px);
}