/* 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: 0.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;
}