/* ACSS v4 Global SCSS -- nubthong-industry.com (live). Shared v3 -> v4 fixes, then site fixes, then QA rules */
:root { --section-padding-x: var(--gutter); }
:root {
  --width-xs: calc(var(--content-width) * 0.1);
  --width-s: calc(var(--content-width) * 0.2);
  --width-m: calc(var(--content-width) * 0.4);
  --width-l: calc(var(--content-width) * 0.6);
  --width-xl: calc(var(--content-width) * 0.8);
  --width-xxl: calc(var(--content-width) * 0.9);
  --width-content: var(--content-width);
  --width-vp-max: var(--content-width);
}
:root {
  --black-trans-10: rgba(0,0,0,.1); --black-trans-20: rgba(0,0,0,.2); --black-trans-30: rgba(0,0,0,.3);
  --black-trans-40: rgba(0,0,0,.4); --black-trans-50: rgba(0,0,0,.5); --black-trans-60: rgba(0,0,0,.6);
  --black-trans-70: rgba(0,0,0,.7); --black-trans-80: rgba(0,0,0,.8); --black-trans-90: rgba(0,0,0,.9);
  --white-trans-10: rgba(255,255,255,.1); --white-trans-20: rgba(255,255,255,.2); --white-trans-30: rgba(255,255,255,.3);
  --white-trans-40: rgba(255,255,255,.4); --white-trans-50: rgba(255,255,255,.5); --white-trans-60: rgba(255,255,255,.6);
  --white-trans-70: rgba(255,255,255,.7); --white-trans-80: rgba(255,255,255,.8); --white-trans-90: rgba(255,255,255,.9);
}
.text--center { text-align: center; }
.text--left { text-align: left; }
.text--right { text-align: right; }
.text--white, .text--white :where(h1,h2,h3,h4,h5,h6) { color: var(--white); }
.text--black, .text--black :where(h1,h2,h3,h4,h5,h6) { color: var(--black); }
:where(body > footer) { padding-inline: 0; }
:root { --btn-width: auto; }
:root:root {
  --primary-trans-10: color-mix(in srgb, var(--primary) 10%, transparent);
  --primary-trans-20: color-mix(in srgb, var(--primary) 20%, transparent);
  --primary-trans-50: color-mix(in srgb, var(--primary) 50%, transparent);
  --primary-trans-60: color-mix(in srgb, var(--primary) 60%, transparent);
  --primary-trans-80: color-mix(in srgb, var(--primary) 80%, transparent);
  --primary-trans-90: color-mix(in srgb, var(--primary) 90%, transparent);
  --neutral-trans-30: color-mix(in srgb, var(--neutral) 30%, transparent);
  --neutral-trans-40: color-mix(in srgb, var(--neutral) 40%, transparent);
  --neutral-trans-90: color-mix(in srgb, var(--neutral) 90%, transparent);
  --shade-trans-10: color-mix(in srgb, var(--shade) 10%, transparent);
  --shade-trans-20: color-mix(in srgb, var(--shade) 20%, transparent);
  --shade-trans-40: color-mix(in srgb, var(--shade) 40%, transparent);
  --shade-trans-70: color-mix(in srgb, var(--shade) 70%, transparent);
  --shade-trans-80: color-mix(in srgb, var(--shade) 80%, transparent);
  --shade-trans-90: color-mix(in srgb, var(--shade) 90%, transparent);
}
:root:root { --btn-pad-x: var(--btn-padding-inline); --btn-pad-y: var(--btn-padding-block); }
body > header:where(#brx-header), body > footer:where(#brx-footer) { padding-block: 0; padding-inline: 0; }
.bricks-button:not([class*="btn--"]) { line-height: inherit; letter-spacing: .5px; }

/* nubthong-industry.com -- site-specific ACSS v3 -> v4 fixes (Bricks, ACSS 3.3.7 -> 4.0.1) */

/* Gutter: set in ACSS (Gutter Spacing Mobile 24 / Desktop 30, from v3 section-padding-x-min/max); no CSS override */

/* v3 shade palette was not migrated; Bricks CSS uses --shade 24x in classes (93x inline) plus shade-light, shade-medium, shade-semi-light. Values from the v3 compiled variables. --action is not used by site CSS */
:root:root { --shade: #000000; --shade-ultra-dark: #1a1a1a; --shade-dark: #404040; --shade-semi-dark: #595959; --shade-medium: #808080; --shade-semi-light: #a6a6a6; --shade-light: #d9d9d9; --shade-ultra-light: #f2f2f2; }

/* trans variables used in Bricks classes that the shared block does not define */
:root:root { --primary-trans-70: color-mix(in srgb, var(--primary) 70%, transparent); --secondary-trans-70: color-mix(in srgb, var(--secondary) 70%, transparent); }

/* v3 utility class still on elements (18x across baseline pages); v3 compiled rule */
.text--secondary.text--secondary, .text--secondary.text--secondary :where(:is(h1, h2, h3, h4, h5, h6)) { color: var(--secondary); }

/* QA: keep the focused skip link above the sticky header; carousel arrows and dots keep inherited line-height */
.skip-link{z-index:9999}
.splide__arrow,.splide__pagination__page{line-height:inherit}

/* QA re-check: v3 action colour not migrated; v4 leaves --action/--link-color/--focus-color empty */
:root:root { --action: #3559C7; --action-hover: #4e6ed0; --link-color: var(--action); --link-color-hover: var(--action-hover); --focus-color: var(--action); }

:root:root{--action:#3559C7;--action-hover:#4e6ed0;}