/*
 * enviro-stock.co.uk content styles (Oxygen 6 rebuild)
 *
 * Gutenberg post_content only, from live-notes.md section 8 (WordPress global styles plus the site's
 * Additional CSS) and live's Global stylesheet (alignfull helpers, block buttons).
 * Loaded by the mu-plugin enviro-site.php on the front end and in the block editor.
 *
 * Every rule is scoped to .es-content, the wrapper page.html and post.html put round Post Content,
 * so nothing here reaches the header, footer or listings. In the editor the mu-plugin strips the
 * ".es-content " prefix and lets WordPress scope the rules to the editor canvas instead, and drops
 * the block between the editor-skip markers (the 100vw breakouts would misplace blocks there).
 *
 * Modern Normalize stays off: paragraphs and lists keep the browser's 16px margins, as on live.
 */

/* Body text: 16px / 1.6, purple, -0.1px tracking. */
.es-content {
	font-family: 'Poppins', sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.6;
	letter-spacing: -0.1px;
	color: #270342;
	/* Live's theme.json presets. Oxygen Zero defines these differently (spacing 40 is 1rem there,
	   30px on live), and block content references them in inline styles, e.g. the grading cards. */
	--wp--preset--spacing--20: 10px;
	--wp--preset--spacing--30: 20px;
	--wp--preset--spacing--40: 30px;
	--wp--preset--spacing--50: clamp(30px, 5vw, 50px);
	--wp--preset--spacing--60: clamp(30px, 7vw, 70px);
	--wp--preset--spacing--70: clamp(50px, 7vw, 90px);
	--wp--preset--spacing--80: clamp(70px, 10vw, 140px);
	--wp--preset--font-size--small: 0.875rem;
	--wp--preset--font-size--medium: clamp(1rem, 1rem + ((1vw - 0.2rem) * 0.196), 1.125rem);
	--wp--preset--font-size--large: clamp(1.125rem, 1.125rem + ((1vw - 0.2rem) * 0.392), 1.375rem);
	--wp--preset--font-size--x-large: clamp(1.75rem, 1.75rem + ((1vw - 0.2rem) * 0.392), 2rem);
	--wp--preset--font-size--xx-large: clamp(2.15rem, 2.15rem + ((1vw - 0.2rem) * 1.333), 3rem);
}

/* Live's theme.json block gap (1.2rem) for flex and grid layouts such as block columns. Oxygen Zero
   leaves core's defaults (2em on columns). Kept at (0,1,0), as live's :root :where() rule, so a
   block's own gap setting still wins. */
.es-content {
	--wp--style--block-gap: 1.2rem;
}
.es-content :where(.is-layout-flex, .is-layout-grid) {
	gap: 1.2rem;
}

/* Post Content's wrapper zeroes the first child's top and the last child's bottom margin; live keeps
   the browser's 1em on paragraphs. */
.es-content .breakdance-rich-text-styles > p:first-child {
	margin-top: 1em;
}
.es-content .breakdance-rich-text-styles > p:last-child {
	margin-bottom: 1em;
}

/* Headings: purple, 600, line height 1.125 (live theme.json via global styles). */
.es-content h1,
.es-content h2,
.es-content h3,
.es-content h4,
.es-content h5,
.es-content h6 {
	font-family: 'Poppins', sans-serif;
	font-weight: 600;
	line-height: 1.125;
	letter-spacing: -0.1px;
	color: #270342;
	/* Live headings carry no margins of their own: posts add 4rem / 2.5rem (.single-post rules below)
	   and block layouts add the 1.2rem flow spacing. */
	margin-top: 0;
	margin-bottom: 0;
}

/* Body text elements are set purple directly. Post Content's own wrapper (.breakdance-rich-text-styles)
   paints its text grey (#374151), so inheriting is not enough (measured on staging 20 Oct 2026). */
.es-content p,
.es-content li,
.es-content td,
.es-content th,
.es-content dt,
.es-content dd,
.es-content figcaption,
.es-content blockquote {
	color: #270342;
}

.es-content h1 { font-size: 2.5rem; }
.es-content h2 { font-size: 2.12rem; }
.es-content h3 { font-size: 1.375rem; }
.es-content h4 { font-size: 20px; }
.es-content h5 { font-size: 18px; }
.es-content h6 { font-size: 16px; }

/* Additional CSS on live: block headings are smaller than the Oxygen element headings. */
.es-content h2.wp-block-heading { font-size: 1.7rem; }
.es-content h3.wp-block-heading { font-size: 1.3rem; }

/* Posts space their section headings out (Additional CSS: .single-post h2 and h3). */
.single-post .es-content h2 { margin-top: 4rem; }
.single-post .es-content h3 { margin-top: 2.5rem; }

/* Links: green, no underline, no hover change. */
.es-content a {
	color: #0da30d;
	text-decoration: none;
}

.es-content a:hover {
	color: #0da30d;
	text-decoration: none;
}

.es-content strong,
.es-content b {
	font-weight: 700;
}

/* Lists: browser defaults as measured (40px indent, 16px margins, disc). */
.es-content ul,
.es-content ol {
	padding-left: 40px;
}

/* Flow layout: blocks inside columns and groups get 1.2rem between them (live block gap). */
.es-content .is-layout-flow > * {
	margin-top: 1.2rem;
	margin-bottom: 0;
}

.es-content .is-layout-flow > :first-child {
	margin-top: 0;
}

/* Images and galleries never overflow their column. */
.es-content img {
	max-width: 100%;
	height: auto;
}

/* Tables: collapsed, 8px cells with a 1px purple rule, no header row styling. */
.es-content figure.wp-block-table {
	margin: 16px 40px;
}

.es-content table {
	border-collapse: collapse;
}

.es-content td,
.es-content th {
	padding: 8px;
	border: 1px solid #270342;
}

/* Separator: 2px grey, 8px above and below. */
.es-content hr.wp-block-separator {
	margin: 8px 0;
	border: none;
	border-top: 2px solid #808080;
}

/* Yoast FAQ block: bold question, answer keeps the paragraph margins. */
.es-content .schema-faq-question {
	font-weight: 700;
}

/* Block buttons (live Global stylesheet): green, radius 10px, 10px 16px, 18px / 500, button shadow. Hover purple. */
.es-content .wp-block-button__link {
	padding: 10px 16px;
	font-size: 18px;
	font-weight: 500;
	line-height: 1.6;
	color: #ffffff;
	background-color: #0da30d;
	border: 1px solid #0da30d;
	border-radius: 10px;
	box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.25);
}

/* Session 2, decision 24: live's fluid block button size (the medium preset), so /sellers/ buttons match live
   at every width (16.08px at 360 up to 18px at 1440). Overrides the flat 18px above. */
.es-content .wp-block-button__link {
	font-size: clamp(1rem, 1rem + ((1vw - 0.2rem) * 0.196), 1.125rem);
}

.es-content .wp-block-button__link:hover {
	color: #ffffff;
	background-color: #270342;
	border: 1px solid #270342;
}

/* editor-skip-start */
/* Full bleed helpers from live's Global stylesheet. The page heroes are .alignfull block columns that break
   out of the 1120 column to 100vw; .alignfull-reset and .alignfull-reset-internal bring their content back
   to 1120px with 20px sides. Live forced the internal margins with the important flag; the (0,2,0) selector here
   beats core's zero-specificity layout rules without it. */
.es-content .alignfull {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(-100vw / 2 + 100% / 2);
	margin-right: calc(-100vw / 2 + 100% / 2);
}

.es-content .alignfull img {
	width: 100vw;
}

.es-content .alignfull-reset {
	max-width: 1120px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 20px;
	padding-right: 20px;
}

.es-content .alignfull-reset-internal {
	max-width: 1120px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 20px;
	padding-right: 20px;
}

/* Product tab tables (session 3): Breakdance WooCommerce turns every table inside .breakdance-woocommerce
   into stacked flex rows at 1024 and below, which made manifest tables in product descriptions up to
   4000px taller than live. Rows and cells stay a table here, and oxygen-woo.css lets the table scroll
   inside its own box. Classes are tripled (0,6,x) to outrank Breakdance's rules, whose :not() lists lift
   them to (0,5,3) for rows and (0,4,2) for cells. */
@media (max-width: 1024px) {
	.es-pdp-tabs.es-pdp-tabs.es-pdp-tabs .bde-tabs__panel-content.bde-tabs__panel-content.bde-tabs__panel-content table thead { display: table-header-group; }
	.es-pdp-tabs.es-pdp-tabs.es-pdp-tabs .bde-tabs__panel-content.bde-tabs__panel-content.bde-tabs__panel-content table tbody { display: table-row-group; }
	.es-pdp-tabs.es-pdp-tabs.es-pdp-tabs .bde-tabs__panel-content.bde-tabs__panel-content.bde-tabs__panel-content table tr { display: table-row; padding: 0; gap: normal; }
	.es-pdp-tabs.es-pdp-tabs.es-pdp-tabs .bde-tabs__panel-content.bde-tabs__panel-content.bde-tabs__panel-content table td,
	.es-pdp-tabs.es-pdp-tabs.es-pdp-tabs .bde-tabs__panel-content.bde-tabs__panel-content.bde-tabs__panel-content table th { display: table-cell; }
}
/* editor-skip-end */