/* ==========================================================================
   Elata theme — global tokens & base styles
   Ported from ShopifyTheme/layout/theme.elata.liquid + assets/base.css,
   assets/button-style.css and assets/colors.css. Section-specific styling
   lives in each block's own style.css (blocks/<name>/style.css).
   ========================================================================== */

:root {
  /* Typography.

     --elata-font is the default for everything. --elata-font-body exists
     because the live storefront actually runs two faces: Hind is its base
     font and Poppins is layered on for headings, nav and labelled controls,
     so any element the Shopify theme leaves unclassed renders in Hind. Use
     --elata-font-body ONLY where the live page demonstrably falls through to
     Hind (verified with getComputedStyle, not by eye) — currently the product
     tab labels, the comparison table's cell text and its Show/Hide Products
     button label, the SKU label, and the "View all FAQs here" button. Hind is
     noticeably narrower than Poppins, so using it in the wrong place is as
     visible as not using it in the right one.

     The SKU value itself is neither face: live sets it in monospace, because
     it is a code to be read off and retyped. */
  --elata-font: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --elata-font-body: "Hind", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  /* Brand palette (extracted from theme.elata.liquid + homepage section settings) */
  --elata-orange: #e8702a;
  --elata-orange-hover: #d4621f;
  --elata-orange-alt: #ff4e00;
  --elata-marker: #e86c3a;

  --elata-bg-dark: #2b2b2b;
  --elata-bg-medium: #353535;
  --elata-bg-light: #404040;
  --elata-bg-offwhite: #f5f5f5;
  --elata-border: #4a4a4a;

  --elata-text-primary: #ffffff;
  --elata-text-secondary: #cccccc;
  --elata-text-muted: #888888;

  --elata-max-width: 1600px;
}

*, *::before, *::after { box-sizing: border-box; }

/* Full-bleed sections (elata/video-overlay-statement, elata/feature-image)
   escape their container with `width: 100vw` + negative margins. 100vw counts
   the classic scrollbar's width but the page's own width does not, so on any
   platform with space-taking scrollbars — Windows Chrome and Edge by default —
   those sections end up ~15px wider than the viewport and the whole page gets
   a horizontal scrollbar. Headless Chrome uses overlay scrollbars, which is why
   this does not reproduce in the measurement harness.

   overflow-x: clip rather than hidden, deliberately: `clip` does not create a
   scroll container, so position: sticky inside (the product tab bar, the APCS26
   scroll-animation stage) keeps working. `hidden` would silently break both. */
.elata-main {
  overflow-x: clip;
}

body.elata-page {
  margin: 0;
  font-family: var(--elata-font);
  color: var(--elata-text-primary);
  /* White, matching the Shopify storefront — verified against the live site,
     where document.body computes to rgb(255,255,255) on every Elata page. Each
     section paints its own background, so this is only ever visible where a
     section is deliberately transparent.

     This used to be var(--elata-bg-dark), which made every transparent section
     read as dark. On the Resources page that turned the "Elata System
     Downloads" block (a raw HTML embed with no background of its own) into
     #606161 grey text on near-black, instead of on the #f7f7f7 its Shopify
     section wrapper supplies, and left a large black band above the footer. */
  background: #ffffff;
  -webkit-font-smoothing: antialiased;
}

/* :where() keeps this reset at zero specificity, for the same reason as the
   link reset below. Without it, ".elata-page p" (0,1,1) tied with single-class
   block rules like ".elata-product-main__description p" and won on source
   order, so every block that wanted spacing between its own paragraphs got
   margin: 0 instead — the product hero's description ran together as one
   block, and the same collision had already been patched around by hand in the
   slideshow hero, the FAQ answers, image-text and blog cards.

   Zero specificity is still enough to beat the browser's UA stylesheet (author
   rules always outrank UA rules regardless of specificity), so headings and
   paragraphs with no block rule of their own keep margin: 0 exactly as
   before. */
:where(.elata-page) :is(h1, h2, h3, h4, h5, h6, p) {
  font-family: var(--elata-font);
  margin: 0;
}

/* :where() for the same reason as the margin reset above: at (0,1,1) this beat
   single-class block rules on source order, so a block that sized its own
   images (the comparison table's 100px column thumbnails, the slideshow hero)
   silently got height: auto and full width instead. Still beats the UA
   stylesheet, so images with no block rule behave exactly as before. */
:where(.elata-page) img { max-width: 100%; height: auto; display: block; }

/* :where() keeps this reset at zero specificity so it never outranks a
   normal single-class link-colour rule elsewhere (e.g. .footer-menu-link,
   .elata-nav-menu a). Without :where(), ".elata-page a" (0,1,1) would beat
   ".footer-menu-link" (0,1,0) and force every footer/nav link back to
   inherited (often white-on-white) text regardless of source order — which
   is exactly the footer contrast bug this fixes. */
:where(.elata-page) a { color: inherit; text-decoration: none; }

.elata-container {
  max-width: var(--elata-max-width);
  margin: 0 auto;
  padding: 0 40px;
}

@media (max-width: 768px) {
  .elata-container { padding: 0 20px; }
}

/* Shared button used across sections (CTA links, "View Brochure", etc.) */
.elata-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--elata-font);
  font-weight: 500;
  font-size: 16px;
  line-height: 1;
  color: var(--elata-orange);
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  transition: color .2s ease;
}

.elata-btn:hover { color: #222222; }

.elata-btn--solid {
  color: #ffffff;
  background: var(--elata-orange);
  border-radius: 6px;
  padding: 14px 28px;
}

.elata-btn--solid:hover { background: var(--elata-orange-hover); }

/* Keyboard-only "Skip to content" link (rendered at the top of header.php).
   Visually hidden until focused, then pinned to the top-left of the viewport. */
.elata-skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 10000;
  padding: 12px 20px;
  background: var(--elata-orange);
  color: #ffffff;
  font-family: var(--elata-font);
  font-size: 14px;
  font-weight: 500;
  border-radius: 0 0 6px 0;
}

.elata-skip-link:focus {
  left: 0;
  color: #ffffff;
}

/* ---------------------------------------------------------------------------
 * "View all FAQs here" button.
 *
 * Lives on the product pages as a core wp:html block, ported from the Shopify
 * templates' custom-html section (product.e*-new.json -> custom_html_*). The
 * original carried its own inline <style> element, but WordPress's content
 * filters strip style tags out of block markup and leave the raw CSS text
 * rendering on the page as copy — the same bug documented in
 * DEV-NOTES.md "Lessons learned" and in elata-pump-features-scroll/render.php.
 * So the rules live here and the wp:html block carries only the anchor.
 *
 * The wrapper reproduces the live section's t4s-container geometry (1200px
 * max-width, 15px side padding, 50px bottom margin) so the button lines up
 * with the FAQ accordion above it instead of sitting against the viewport
 * edge.
 * ------------------------------------------------------------------------ */
.elata-page .elata-faq-button-wrap {
	max-width: 1200px;
	margin: 0 auto 50px;
	padding: 0 15px;
}
.elata-page .faq-button {
	display: inline-block;
	background-color: #dddddd;
	color: #c76328;
	padding: 12px 24px;
	text-decoration: none;
	border-radius: 6px;
	/* Bare <a> in a raw-HTML block on the live page, so it takes the
	   storefront's base font rather than Poppins. */
	font-family: var( --elata-font-body, inherit );
	font-weight: 600;
	font-size: 16px;
	line-height: 1.43;
	border: 2px solid transparent;
	transition: color 0.3s ease, background 0.3s ease, border 0.3s ease;
}
.elata-page .faq-button:hover {
	color: #c76328;
	background-color: #ffffff;
	border: 1px solid #c76328;
}

/* --------------------------------------------------------------------------
   404

   Sets its own colours rather than inheriting: body.elata-page paints white
   text on a white background on the assumption that every section supplies its
   own backdrop (see the note on background above), and a 404 has no section.

   Top padding clears the 70px fixed header plus breathing room.
   -------------------------------------------------------------------------- */
.elata-404 {
	background: #ffffff;
	color: #2b2b2b;
	padding: 170px 0 120px;
	text-align: center;
}

.elata-404__code {
	font-family: var(--elata-font);
	font-size: 120px;
	font-weight: 600;
	line-height: 1;
	color: var(--elata-orange);
	margin: 0 0 16px;
	letter-spacing: -0.02em;
}

.elata-404__title {
	font-family: var(--elata-font);
	font-size: 40px;
	font-weight: 500;
	line-height: 1.2;
	color: #2b2b2b;
	margin: 0 0 16px;
}

.elata-404__text {
	font-family: var(--elata-font-body);
	font-size: 18px;
	line-height: 1.6;
	color: #606161;
	max-width: 540px;
	margin: 0 auto 40px;
}

.elata-404__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	justify-content: center;
}

.elata-404__links {
	margin: 56px auto 0;
	max-width: 640px;
	border-top: 1px solid #e5e5e5;
	padding-top: 32px;
}

.elata-404__links-title {
	font-family: var(--elata-font);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #888888;
	margin: 0 0 16px;
}

.elata-404__links ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px 28px;
	justify-content: center;
}

.elata-404__links a {
	font-family: var(--elata-font);
	font-size: 16px;
	color: var(--elata-orange);
	text-decoration: none;
}

.elata-404__links a:hover { text-decoration: underline; }

@media (max-width: 768px) {
	.elata-404 { padding: 130px 0 80px; }
	.elata-404__code { font-size: 84px; }
	.elata-404__title { font-size: 28px; }
	.elata-404__text { font-size: 16px; }
}