/* =========================================================================
   Good Creations Theme Support: site-wide stylesheet (v1.2)
   -------------------------------------------------------------------------
   Loaded on every front-end page. Page-specific block styles live in
   gc-blocks.css, which the plugin loads ONLY on pages that use them.

   HOW THIS FILE IS ORGANIZED
     1. Tokens ............ in gc-tokens.css (shared with gc-blocks.css)
     2. Base .............. element defaults (p, buttons, captions)
     3. Utilities ......... small single-purpose helpers
     4. Components ........ cards, buttons, trademark helpers, dividers
     5. Header ............ [SEEDPROD] .aw-header layout
     6. Front page ........ hero + iWeigh/QuickWeigh/BinMaxx panels (SeedProd and
                            block versions; .sp-* selectors are [SEEDPROD])
                            (the .iwx iWeigh visual is shared with block pages)
     7. Page-specific ..... contact, FAQs, dealer, fines, ROI charts, events
     8. Responsive ........ breakpoints for sections 3, 4 and 7
     9. Block theme frame . header, footer, page/post/archive templates

   TAGS
     [SEEDPROD]  Only matters while SeedProd builds the page. Delete the
                 tagged rules when SeedProd is removed.
     [BRITTLE]   Hard-coded SeedProd block or page ID. Breaks if rebuilt.

   RULES THAT WILL BITE YOU (details in CSS-README.md)
     a. Source order matters: several mobile overrides beat a base rule
        only because they come later at equal specificity. Keep each
        component's @media blocks BELOW its base rules.
     b. This file must load after SeedProd's tailwind.min.css (it does:
        the plugin enqueues at priority 20).
     c. SeedProd zeroes section padding at ID level. A class can never
        beat that, so panel spacing uses margins on the first/last child.

   Fonts: Barlow Condensed is enqueued by the plugin PHP (no @import, so it
   downloads in parallel instead of blocking this file).
   ========================================================================= */


/* =========================================================================
   1. TOKENS: see gc-tokens.css (loaded before this file)
   ========================================================================= */


/* =========================================================================
   2. BASE
   ========================================================================= */
/* Paragraph rhythm and default button shape now come from theme.json (block
   theme). The SeedProd-era overrides `p { margin: 1em !important }` and
   `.wp-element-button { padding: 15px; border-radius: 10px }` were removed in
   v1.2 because they fought the block layout spacing. */
.wp-element-caption { text-align: center; }
.text-justify, .cs-text p { text-align: justify; }


/* =========================================================================
   3. UTILITIES
   ========================================================================= */
.nopad { padding: 0; }
.sticky-row {
  position: -webkit-sticky;
  position: sticky;
  top: var(--gc-sticky-top);
  z-index: 998;
}
.anchor-target { scroll-margin-top: 125px; }
.anchor-target-fp { scroll-margin-top: 100px; }
.aw-nowrap { white-space: nowrap; }   /* keeps a phrase on one line */

/* GTranslate flags */
a.glink img { margin-right: 5px !important; height: 18px; }
.translate { padding: 0; }
#sp-b6tjdg { margin-top: 0; }         /* [SEEDPROD][BRITTLE] GTranslate block */

/* Logo Slider WP Pro: items are not links (JS backs this up) */
.lgx_logo_slider { pointer-events: none; }


/* =========================================================================
   4. COMPONENTS
   ========================================================================= */

/* ---- 4a. Legacy blue buttons (one rule set for every button family) ---- */
.trademark-button a,
.trademark-button-large a,
.wp-element-caption a,
.testimonial-field a,
.sp-posts-block-read-more,
.sp-posts-block-read-more a {
  display: inline-block;
  padding: 10px 20px;
  text-decoration: none;
  background-color: var(--gc-btn-bg);
  color: #fff;
  border-radius: var(--gc-btn-radius);
  cursor: pointer;
  transition: background-color 0.3s ease;
}
.trademark-button a, .wp-element-caption a { font-size: 19px; }
.trademark-button-large a { font-size: 22px; }
.testimonial-field a, .sp-posts-block-read-more, .sp-posts-block-read-more a {
  text-align: center;
  font-weight: bold;
}
.trademark-button a:hover,
.trademark-button-large a:hover,
.wp-element-caption a:hover,
.testimonial-field a:hover,
.sp-posts-block-read-more:hover,
.sp-posts-block-read-more a:hover { background-color: var(--gc-btn-bg-hover); }

/* State-fines listings: buttons stripped back to plain red links */
.statefines .sp-posts-block-read-more,
.statefines .sp-posts-block-read-more a {
  all: unset;
  color: #c00;
  cursor: pointer;
  text-decoration: none;
}
.statefines .sp-posts-block-read-more:hover,
.statefines .sp-posts-block-read-more a:hover {
  all: unset;
  color: #900;
  text-decoration: underline;
}

/* ---- 4b. Cards ---- */
/* Shared card body: white, rounded, soft double shadow. */
.neobox,
.cs-list, .cs-list2,
.neobox .sp-posts-single-block,
.neobox-white .sp-posts-single-block,
.neobox-events .sp-posts-single-block {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: #fff;
  border-radius: var(--gc-card-radius);
  box-shadow: var(--gc-card-shadow);
  transition: all 0.2s ease-in-out;
}
.cs-list, .cs-list2,
.neobox .sp-posts-single-block,
.neobox-white .sp-posts-single-block,
.neobox-events .sp-posts-single-block { margin: 10px; padding: 20px; }
.neobox-events .sp-posts-block-title { padding-bottom: 20px; }
/* Card links inherit text colour */
.neobox a, .neobox-white a, .neobox-events a,
.neobox .sp-container a, .neobox-white .sp-container a, .neobox-events .sp-container a,
.neobox .sp-post-text-container a, .neobox-white .sp-post-text-container a, .neobox-events .sp-post-text-container a {
  text-decoration: none;
  color: inherit;
}

.iweigh-box {
  display: flex;
  flex-direction: row;
  justify-content: stretch;
  background: #fff;
  border-radius: var(--gc-card-radius);
  box-shadow: var(--gc-card-shadow);
  transition: all 0.2s ease-in-out;
  margin: 0 auto;
  padding: 20px;
}
.iweigh-left { flex: 1; }
.iweigh-right {
  flex: 1;
  background-color: #f9f9f9;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.fp-box {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-radius: var(--gc-card-radius);
  box-shadow: 0 0 5px #2E2B31, 0 0 5px #fff;
  transition: all 0.2s ease-in-out;
  margin: 10px;
  padding: 20px;
}
/* .soluton-box (typo) kept for existing pages; .solution-box is the correct name */
.soluton-box, .solution-box {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background-color: #ffffff;
  border: 1px solid #007bff;
  border-radius: 15px;
  padding: 20px;
  box-shadow: 5px 5px 12px rgba(0, 0, 0, 0.4);
}
.soluton-box h1, .soluton-box p,
.solution-box h1, .solution-box p { color: #333333; }

/* ---- 4c. Trademark helpers ---- */
.brand-name::after,
.brand-name-tm::after { vertical-align: super; font-size: 0.5em; }
.brand-name::after { content: " \00AE"; }
.brand-name-tm::after { content: " \2122"; }

/* ---- 4d. Dividers under titles ---- */
.solution-title::after, .case-study-title::after, .cs-testimonial h3::after {
  content: '';
  display: block;
  width: 90%;
  height: 1px;
  background-color: #000;
  margin: 5px auto 0;
}

/* ---- 4e. iWeigh product visual (.iwx-*) ----
   Module in a glowing ring with three app screenshots fanned below it.
   SHARED: SeedProd front page (Custom HTML, <img> children) AND block pages
   (Image blocks, <figure><img> children). Both markups are styled here so
   the visual has exactly one definition. */
.iwx-right { width: 100%; max-width: 620px; margin: 0 auto; }
.iwx-halo { position: relative; display: flex; justify-content: center; align-items: center; }
.iwx-halo::before {
  content: ""; position: absolute;
  width: min(420px, 86%); aspect-ratio: 1; border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, 0.35);
  box-shadow: 0 0 60px 10px rgba(255, 232, 150, 0.5), inset 0 0 60px rgba(255, 255, 255, 0.14);
}
.iwx-halo::after {
  content: ""; position: absolute;
  width: min(300px, 62%); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(255, 232, 150, 0.5) 0%, transparent 72%);
  filter: blur(6px);
}
.iwx-halo > img,
.iwx-halo > figure img { position: relative; z-index: 2; max-width: 320px; filter: drop-shadow(0 26px 50px rgba(60, 40, 0, 0.65)); }
.iwx-halo > figure { position: relative; z-index: 2; margin: 0; }
.iwx-fan { display: flex; justify-content: center; margin-top: -26px; position: relative; z-index: 3; }
.iwx-fan > img,
.iwx-fan > figure {
  width: 33%; max-width: 200px; margin: 0;
  transition: transform 0.25s;
}
.iwx-fan > img,
.iwx-fan > figure img {
  border-radius: 16px;
  box-shadow: 0 22px 44px rgba(20, 15, 0, 0.5);
  border: 4px solid #101418;
}
.iwx-fan > figure img { width: 100%; height: auto; display: block; }
.iwx-fan > :nth-child(1) { transform: rotate(-9deg) translate(10%, 20px); z-index: 1; }
.iwx-fan > :nth-child(2) { transform: translateY(0); z-index: 2; }
.iwx-fan > :nth-child(3) { transform: rotate(9deg) translate(-10%, 20px); z-index: 1; }
.iwx-fan > :hover { transform: scale(1.06) rotate(0deg); z-index: 5; }


/* =========================================================================
   5. HEADER  [SEEDPROD]
   -------------------------------------------------------------------------
   ID-free: scoped to the .aw-header class on both header template parts
   (front page + interior), so it survives block rebuilds.
   Logo left | nav centered | flags + expanding search right.
   The menu must NEVER wrap to two lines.
   ========================================================================= */
.aw-header .sp-el-col { gap: 16px; }
.aw-header .sp-sitelogo-wrapper { flex: 0 0 auto; }
.aw-header .sp-sitelogo-wrapper img { width: clamp(150px, 13vw, 190px); height: auto; max-width: none; }
.aw-header .sp-nav {
  flex: 0 1 auto;
  min-width: 0;
  margin-left: auto !important;            /* auto both sides of nav = centered */
}
.aw-header .sp-nav ul.seedprod-menu-list { white-space: nowrap; }
.aw-header .translate { margin-left: auto !important; flex: 0 0 auto; }
.aw-header .translate .gtranslate_wrapper { display: flex; align-items: center; gap: 8px; }

/* Expanding search: icon only until hover / focus / first tap (.gc-open from JS) */
.aw-header .sp-searchform { flex: 0 0 auto; }
.aw-header .sp-searchform input[type="text"] {
  width: 0;
  min-width: 0;
  padding-left: 0;
  padding-right: 0;
  opacity: 0;
  border: 0;
  transition: width 0.25s ease, opacity 0.2s ease, padding 0.25s ease;
}
.aw-header .sp-searchform:hover input[type="text"],
.aw-header .sp-searchform:focus-within input[type="text"],
.aw-header .sp-searchform.gc-open input[type="text"] {
  width: 190px;
  opacity: 1;
  padding-left: 12px;
}
.aw-header .sp-searchform button { border-radius: 5px; }

@media (max-width: 1550px) {
  .aw-header .sp-nav .nav-menu a {         /* fluid sizing keeps the single line fitting */
    padding-left: clamp(4px, 0.55vw, 9px);
    padding-right: clamp(4px, 0.55vw, 9px);
    font-size: clamp(12px, 1.1vw, 15px);
  }
}
/* Hamburger from 1399px (not SeedProd's 786px): the front-page template part
   is ~40px narrower than the theme header, and 12.9" iPad Pro landscape is 1366px. */
@media (max-width: 1399px) {
  .aw-header .sp-el-col { position: relative; }
  .aw-header .hamburger { display: block; cursor: pointer; }
  .aw-header .hamburger .bar { background-color: #fff; }
  .aw-header .nav-menu { display: none; }
  .aw-header .nav-menu.active {
    display: block;
    position: absolute;
    left: 0; right: 0; top: 100%;
    background: var(--aw-navy);
    padding: 18px 10px;
    text-align: center;
    z-index: 999;
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.35);
  }
  .aw-header .nav-menu.active ul.seedprod-menu-list { white-space: normal; width: 100%; }
  .aw-header .nav-menu.active .menu-item { display: block !important; font-size: 18px; line-height: 2.2; }
  .aw-header .translate { margin-left: 0 !important; }   /* hamburger + flags + search cluster right */
  .aw-header .sp-nav { flex: 0 0 auto; }
}
/* Phone: center the flags + search under the logo */
@media (max-width: 900px) {
  .aw-header .translate { margin-left: auto !important; margin-right: auto !important; }
  .aw-header .translate .gtranslate_wrapper { justify-content: center; }
  .aw-header .sp-searchform { margin-left: auto; margin-right: auto; }
  .aw-header .sp-searchform form { justify-content: center; }
}


/* =========================================================================
   6. FRONT PAGE  [SEEDPROD]
   -------------------------------------------------------------------------
   The current SeedProd home page: hero content block, then three colour
   panels (gold iWeigh, steel-blue QuickWeigh, green BinMaxx). Markup lives
   in SeedProd Custom HTML blocks / template parts; this section styles it.
   ========================================================================= */

/* ---- 6a. Hero content block (.aw-hero*, .aw-btn*) ----
   Kicker / headline / tagline / lead / CTAs + floating LCD.
   Count-up runs from gc-theme-support.js via [data-gc-count]. */
.aw-hero {
  max-width: 1200px;
  margin: 0 auto;
  padding: clamp(16px, 3.5vw, 44px);
  padding-top: clamp(48px, 10vh, 120px);  /* push content off the nav */
  color: var(--aw-mist);
}
.aw-hero-content {
  container-type: inline-size;            /* lets the H1 size to fit the nowrap phrase */
  max-width: 620px;
  background: rgba(5, 10, 18, 0.22);      /* 22% tint per Bob: contrast without hiding the truck */
  backdrop-filter: blur(2px);             /* 9px "frosted" hid the truck */
  -webkit-backdrop-filter: blur(2px);
  border-radius: 14px;
  padding: 24px 28px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
}
.aw-hero-kicker {
  font-family: var(--aw-font-display);
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.22em;
  font-size: clamp(1.05rem, 1.5vw, 1.3rem);
  color: var(--aw-yellow);
  text-shadow: 0 0 14px rgba(255, 212, 0, 0.65), 0 2px 8px rgba(0, 0, 0, 0.8);
  margin-bottom: 0.7rem;
}
.aw-hero-h1 {
  font-family: var(--aw-font-display);
  font-size: clamp(2.1rem, 4.6vw, 3.6rem);              /* fallback: no container-query support */
  font-size: min(clamp(2.1rem, 4.6vw, 3.6rem), 8.2cqw); /* capped so the nowrap phrase fits */
  font-weight: 700;
  font-style: italic;
  text-transform: uppercase;
  line-height: 0.98;
  margin: 0;
  color: #fff;
  text-shadow: 0 3px 0 rgba(0, 0, 0, 0.25), 0 18px 40px rgba(0, 0, 0, 0.8);
}
.aw-hero-tagline {
  font-family: var(--aw-font-display);
  color: #5fe2ff;                          /* cyan tagline / yellow kicker swap per Bob */
  font-size: clamp(1.05rem, 1.9vw, 1.45rem);
  font-weight: 700;
  font-style: italic;
  text-transform: uppercase;
  margin: 18px 0 10px;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.75), 0 0 30px rgba(63, 216, 255, 0.35);
}
.aw-hero-lead {
  color: #dbe7f1;
  font-size: 1.02rem;
  line-height: 1.55;
  max-width: 58ch;
  margin: 0 0 22px;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.9);
}
.aw-hero-ctas { display: flex; gap: 18px; flex-wrap: wrap; }

.aw-btn,
.wp-block-button:is(.is-style-aw-primary, .is-style-aw-ghost, .is-style-aw-navy, .is-style-aw-light) .wp-block-button__link {
  font-family: var(--aw-font-display);
  display: inline-block;
  padding: 12px 28px;
  font-size: 1.05rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  border-radius: 4px;
  text-decoration: none !important;
  transition: transform 0.15s, box-shadow 0.15s;
}
.aw-btn:hover,
.wp-block-button:is(.is-style-aw-primary, .is-style-aw-ghost, .is-style-aw-navy, .is-style-aw-light) .wp-block-button__link:hover { transform: translateY(-2px) scale(1.02); }
.aw-btn-primary,
.wp-block-button.is-style-aw-primary .wp-block-button__link {   /* solid yellow, for dark backgrounds */
  background: var(--aw-yellow);
  color: #131313 !important;
  box-shadow: 0 0 30px rgba(255, 212, 0, 0.45), 0 8px 20px rgba(0, 0, 0, 0.4);
}
.aw-btn-ghost,
.wp-block-button.is-style-aw-ghost .wp-block-button__link {     /* white outline, dark backgrounds only */
  background: transparent;
  border: 2px solid rgba(255, 255, 255, 0.55);
  color: var(--aw-mist) !important;
  backdrop-filter: blur(3px);
}
.aw-btn-ghost:hover,
.wp-block-button.is-style-aw-ghost .wp-block-button__link:hover { border-color: var(--aw-cyan); color: var(--aw-cyan) !important; box-shadow: 0 0 24px rgba(63, 216, 255, 0.35); }
.aw-btn-light,
.wp-block-button.is-style-aw-light .wp-block-button__link { border: 2px solid #fff; color: #fff !important; background: transparent; }    /* coloured panels (BinMaxx green) */
.aw-btn-light:hover,
.wp-block-button.is-style-aw-light .wp-block-button__link:hover { background: #fff; color: #0e2a1c !important; }
.aw-btn-navy,
.wp-block-button.is-style-aw-navy .wp-block-button__link {     /* bright blue, built for the gold iWeigh panel */
  background: var(--aw-blue);
  color: #fff !important;
  border: 2px solid #fff;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
}
.aw-btn-navy:hover,
.wp-block-button.is-style-aw-navy .wp-block-button__link:hover { background: var(--aw-blue-hover); box-shadow: 0 10px 26px rgba(0, 0, 0, 0.4); }

@media (max-height: 760px) {
  .aw-hero-h1 { font-size: clamp(1.8rem, 4vw, 2.8rem); }
  .aw-hero-lead { font-size: 0.95rem; margin-bottom: 16px; }
  .aw-hero-content { padding: 18px 22px; }
}
@media (max-width: 900px) {
  .aw-hero { padding: 16px; }
  .aw-hero-content { padding: 18px 18px; }
  .aw-hero-kicker { font-size: 0.95rem; letter-spacing: 0.16em; margin-bottom: 0.5rem; }
  .aw-kicker-sep { display: none; }        /* "Cloud Dashboard" gets its own line */
  .aw-kicker-2 { display: block; }
  .aw-hero-h1 {
    font-size: clamp(1.9rem, 8.5vw, 2.6rem);
    font-size: min(clamp(1.9rem, 8.5vw, 2.6rem), 8.2cqw);
    text-align: left !important;           /* SeedProd centers headings on mobile */
  }
  .aw-hero-tagline { font-size: 1.05rem; margin: 12px 0 8px; }
  .aw-hero-lead { font-size: 0.92rem; line-height: 1.45; margin-bottom: 16px; }
  .aw-hero-ctas { gap: 12px; }
  .aw-hero-ctas .aw-btn { padding: 10px 20px; font-size: 0.95rem; }
}

/* ---- 6b. Colour panels: shared ---- */
.iweigh-bg, .quickweigh-bg, .binmaxx-bg {
  min-height: 30vh;                        /* presence without clipping; grows with content */
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.iweigh-heading, .quickweigh-heading, .binmaxx-heading { text-shadow: var(--aw-panel-heading-shadow); }
.iweigh-subhead {
  text-shadow:
    0 5px 5px rgba(0, 0, 0, 0.5),          /* Drop Shadow */
    0 0 125px rgba(0, 0, 0, 0.43),         /* Outer Glow, size 125 per the PSD */
    0 0 125px rgba(0, 0, 0, 0.43);
}
/* Kickers, two-column grids and glowing-dot lists: one definition for all
   three panels; only the kicker colour differs. */
.iwx-kicker, .qwx-kicker, .bmx-kicker {
  font-family: var(--aw-font-display);
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 0.18em;
  font-size: 0.95rem;
  margin-bottom: 0.6rem;
}
.iwx-kicker { color: #fff3c4; text-shadow: 0 0 14px rgba(255, 240, 180, 0.5); }
.qwx-kicker { color: #d8ecfb; text-shadow: 0 0 14px rgba(13, 47, 76, 0.6); }
.bmx-kicker { color: #d9f2e3; text-shadow: 0 0 14px rgba(14, 42, 28, 0.6); }
.iwx-cols, .bmx-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
  color: #fff;
}
.iwx-cols h2, .qwx-left h2, .bmx-cols h2 { color: #fff; margin: 0; }
.iwx-left, .qwx-left { color: #fff; max-width: 560px; margin: 0 auto; }
.iwx-list, .qwx-list, .bmx-list { list-style: none; margin: 22px 0 30px; padding: 0; }
.iwx-list li, .qwx-list li, .bmx-list li {
  padding-left: 22px; position: relative; margin-bottom: 10px;
  font-size: 1.06rem; font-weight: 500;
  text-shadow: var(--aw-text-lift);        /* lifts white text off the light gold band */
}
.iwx-list li::before, .qwx-list li::before, .bmx-list li::before {
  content: ""; position: absolute; left: 0; top: 10px;
  width: 8px; height: 8px; border-radius: 50%;
  background: currentColor; box-shadow: 0 0 8px currentColor;
}

/* ---- 6c. iWeigh panel (gold) ---- */
.iweigh-bg { background-image: radial-gradient(circle at center, var(--aw-gold) 0%, var(--aw-olive) 100%); }
/* QuickWeigh's angled top overlaps this panel by 3vw on the right: keep the
   phone fan clear of it (padding is ID-zeroed, so margin) */
.iweigh-bg > .sp-el-row:last-of-type { margin-bottom: calc(3vw + 24px); }
.iwx-partners { display: flex; gap: 18px; align-items: center; margin-top: 28px; flex-wrap: wrap; }
.iwx-plabel {
  font-family: var(--aw-font-display);
  text-transform: uppercase; font-weight: 700; letter-spacing: 0.1em;
  color: #fff3c4; width: 100%; font-size: 0.9rem;
  text-shadow: var(--aw-text-lift);
}
.iwx-chip { background: #fff; border-radius: 8px; padding: 12px 20px; box-shadow: 0 10px 24px rgba(90, 60, 0, 0.35); }
.iwx-chip img { height: 30px; width: auto; display: block; }

/* ---- 6d. QuickWeigh panel (steel blue) ---- */
.quickweigh-bg {
  background-image: radial-gradient(ellipse 130% 140% at 38% 45%, var(--aw-sky) 0%, var(--aw-steel) 100%);
  /* Angled top divider, slanting down to the RIGHT into the gold panel. */
  clip-path: polygon(0 0, 100% 3vw, 100% 100%, 0 100%);
}
#sp-hk1u7w.quickweigh-bg { margin-top: -3vw !important; }   /* [BRITTLE] overlap needs ID specificity */
/* Explore button: keep the builder's blue, white border separates it from the panel */
.quickweigh-bg .sp-templatepart-wrapper a[class*="sp-button-"] {
  border: 2px solid #fff !important;
  box-shadow: 0 6px 18px rgba(8, 28, 48, 0.35) !important;
}
/* Clearance for the slant. Not :first-of-type: SeedProd emits an empty <div>
   before the first row, so margin goes on every row and is cancelled after the first. */
.quickweigh-bg > .sp-el-row { margin-top: calc(3vw + 28px); }
.quickweigh-bg > .sp-el-row ~ .sp-el-row { margin-top: 0; }
.quickweigh-bg > .sp-el-row:last-of-type { margin-bottom: calc(3vw + 24px); }   /* BinMaxx slant below */
.qwx-right { width: 100%; max-width: 620px; margin: 0 auto; text-align: center; }
.qwx-display { width: 80%; max-width: 400px; filter: drop-shadow(0 26px 52px rgba(8, 28, 48, 0.5)); }
.qwx-screens { width: 100%; max-width: 560px; margin-top: -18px; }

/* ---- 6e. BinMaxx panel (green) ---- */
.binmaxx-bg {
  /* Light pocket behind the truck photo, forest mid, near-black edge */
  background-image: radial-gradient(ellipse 110% 125% at 66% 42%, var(--aw-mint) 0%, var(--aw-green) 48%, var(--aw-deep) 100%);
  clip-path: polygon(0 0, 100% 3vw, 100% 100%, 0 100%);
}
#sp-d0pnwe.binmaxx-bg { margin-top: -3vw !important; }      /* [BRITTLE] */
.binmaxx-bg > .sp-el-row { margin-top: calc(3vw + 28px); }
.binmaxx-bg > .sp-el-row ~ .sp-el-row { margin-top: 0; }
.bmx-right { text-align: center; }
.bmx-photo {
  width: 100%;
  max-width: 520px;
  border-radius: 14px;
  box-shadow: 0 24px 50px rgba(0, 0, 0, 0.55);
}
/* In-dash LCD with count-up */
.bmx-lcd {
  font-family: var(--aw-font-display);
  font-style: italic;
  display: inline-flex; align-items: baseline; gap: 10px;
  background: #0c110c;
  border-radius: 10px;
  padding: 30px 52px;
  font-size: 4rem; font-weight: 700;
  color: #4fd08a;
  text-shadow: 0 0 24px rgba(79, 208, 138, 0.9);
  border: 4px solid #1c231c;
  box-shadow: 0 24px 50px rgba(0, 0, 0, 0.6), inset 0 0 30px rgba(79, 208, 138, 0.12);
  font-variant-numeric: tabular-nums;
}
.bmx-lcd small { font-size: 1.4rem; color: #8fd8b0; }
.bmx-lcd-cap {
  margin: 18px 0 0; color: #d9f2e3; font-size: 0.95rem;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.55);
}

/* ---- 6f. Hero section frame ---- */
.fp-hero {
  /* SeedProd drops the Background Image when a Background Video is set (no
     poster), so paint the same image here as the instant fallback. */
  background-image: url('/wp-content/uploads/2026/07/US-Trucks-Wide-1920x1080-1.jpg') !important;
  background-size: cover !important;
  background-color: #0b1420;               /* paints before the jpg: no white flash */
  background-position: 50% 65% !important;
  height: 70vh !important;                 /* hard cap: a spacer block otherwise stretches it */
  max-height: 70vh !important;
  min-height: 0 !important;
  overflow: hidden;
  position: relative;
}

/* ---- 6f2. Block-editor home page (Good Creations Blocks theme) ----
   The same panels rebuilt with core blocks: a video Cover (.fp-hero), then
   Groups with .iweigh-bg / .quickweigh-bg / .binmaxx-bg holding Columns.
   Everything above styles them; these rules only add the spacing and
   colours SeedProd used to provide. */
.fp-hero.wp-block-cover { padding: 0; align-items: flex-start; }
.fp-hero .wp-block-cover__inner-container { width: 100%; }
.fp-hero .aw-hero-content > * + * { margin-top: 0; }
.wp-block-group:is(.iweigh-bg, .quickweigh-bg, .binmaxx-bg) { padding: 80px var(--gc-gut); color: #fff; }
.wp-block-group:is(.quickweigh-bg, .binmaxx-bg) { margin-top: -3vw !important; padding-top: calc(3vw + 80px); }
:is(.iweigh-bg, .quickweigh-bg, .binmaxx-bg) :is(h1, h2, h3, li) { color: #fff; }
:is(.iweigh-bg, .quickweigh-bg, .binmaxx-bg) > .wp-block-columns { max-width: 1200px; margin: 0 auto; gap: 56px; }
:is(.iweigh-bg, .quickweigh-bg) .aw-panel-logo img { width: 300px; }
.quickweigh-bg .aw-panel-logo img { width: 360px; }
:is(.iweigh-bg, .quickweigh-bg, .binmaxx-bg) .gc-apps { display: flex; justify-content: center; gap: 10px; }
:is(.iweigh-bg, .quickweigh-bg, .binmaxx-bg) .gc-apps img { width: 150px; height: auto; }
:is(.iweigh-subhead, .quickweigh-heading).wp-block-heading { font-size: clamp(22px, 2vw, 28px); line-height: 1.15; }
.qwx-left h2.wp-block-heading, h2.binmaxx-heading { font-size: clamp(26px, 2.4vw, 34px); line-height: 1.15; }
.iwx-partners figure { margin: 0; }
.iwx-partners .iwx-chip img { height: 30px; width: auto; }
.qwx-right figure { margin: 0; }
figure.bmx-photo { margin: 0 auto; max-width: 520px; }
figure.bmx-photo img { width: 100%; border-radius: 14px; box-shadow: 0 24px 50px rgba(0, 0, 0, 0.55); }
.qwx-right .qwx-display img { width: 80%; max-width: 400px; margin: 0 auto; filter: drop-shadow(0 26px 52px rgba(8, 28, 48, 0.5)); }
.qwx-right .qwx-screens img { width: 100%; max-width: 560px; margin: -18px auto 0; }

/* ---- 6g. Front page mobile ----
   MUST stay below 6a-6f: equal-specificity !important resolves by order. */
@media (max-width: 900px) {
  .fp-hero {                               /* 70vh clipped the CTAs; dvh tracks the mobile address bar */
    height: 100vh !important;
    height: 100dvh !important;
    max-height: 100vh !important;
    max-height: 100dvh !important;
  }
  .iweigh-bg, .quickweigh-bg, .binmaxx-bg { padding: 40px 22px !important; }
  .iwx-cols, .bmx-cols { grid-template-columns: 1fr; gap: 36px; }
  .bmx-cols { padding: 0 22px; }
  .iwx-left, .qwx-left { padding: 0 22px; }  /* side room on the split snippets */
  .iwx-right { padding: 0 14px; margin-top: 28px; }
  .qwx-right { padding: 0 14px; margin-top: 28px; margin-bottom: 24px; }
  .iwx-fan { margin-bottom: 44px; }         /* outer phones sit 20px low: keep them off the edge */
  .bmx-lcd { font-size: 3rem; padding: 24px 36px; }
}
/* Phones: SeedProd stacks columns and forces 8px !important padding on every
   nested section/row/col/block, compounding into big gaps. */
@media (max-width: 640px) {
  .iweigh-bg .sp-el-row, .iweigh-bg .sp-el-col, .iweigh-bg .sp-el-block,
  .quickweigh-bg .sp-el-row, .quickweigh-bg .sp-el-col, .quickweigh-bg .sp-el-block,
  .binmaxx-bg .sp-el-row, .binmaxx-bg .sp-el-col, .binmaxx-bg .sp-el-block { padding: 3px !important; }
  .iweigh-bg > .sp-el-row > .sp-el-col > .sp-image-wrapper:first-child,
  .quickweigh-bg > .sp-el-row > .sp-el-col > .sp-image-wrapper:first-child,
  .binmaxx-bg > .sp-el-row > .sp-el-col > .sp-image-wrapper:first-child { margin-top: 42px !important; }
  .iweigh-bg > .sp-el-row > .sp-el-col > .sp-image-wrapper:last-child,
  .quickweigh-bg > .sp-el-row > .sp-el-col > .sp-image-wrapper:last-child,
  .binmaxx-bg > .sp-el-row > .sp-el-col > .sp-image-wrapper:last-child { margin-bottom: 36px !important; }
  .iwx-fan { margin-top: -10px; }
  .iwx-halo > img, .iwx-halo > figure img { max-width: 240px; }
  /* App-store badges side by side (sm:sp-flex only applies above 640px) */
  .iweigh-bg .sp-templatepart-wrapper .sp-el-col.sp-flex-row,
  .quickweigh-bg .sp-templatepart-wrapper .sp-el-col.sp-flex-row,
  .binmaxx-bg .sp-templatepart-wrapper .sp-el-col.sp-flex-row {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 10px;
  }
}


/* =========================================================================
   7. PAGE-SPECIFIC
   ========================================================================= */
/* Blog posts */
.post-content h2, .post-content h3, .blog-intro { margin-top: 35px; margin-bottom: 20px; }
.post-content p, .post-content li { margin-top: 15px; }
.blog-mediabox { margin-top: 30px; margin-bottom: 30px; }

/* Overweight fines */
.overweight-facts { font-style: italic; }
.overweight-facts .testimonial-field { font-style: normal; font-weight: bold; padding: 0 10px; }
.overweight-facts .testimonial-field a { font-style: normal; font-weight: normal; }
.fp-overweight-fines { background-color: #eef3f9; }
.fp-overweight-fines-2 { background-color: #f7f9fc; }
.fp-overweight-fines-3 { background-color: #e2e8f0; }

/* ROI charts */
.chart-list h3, .chart-list h4 { margin-top: 15px; }
.chart-list ul { margin-top: 5px; }
.gform_wrapper.gravity-theme input[type=number] { border: 1px solid black; }

/* Contact page  [BRITTLE] page ID */
.page-id-220272 .contact-remove { display: none !important; }
.page-id-220272 .contact-space { padding-top: 0 !important; }

/* FAQs */
.quickweigh-page .quickweigh, .loadmaxx-page .loadmaxx { margin-top: 0 !important; }

/* Dealer form / case studies */
.dealerform, .header-buttons, .cs-testimonial {
  color: white !important;
  font-weight: normal !important;
}
.csbutton { color: #fff !important; text-decoration: none; }

/* Misc legacy */
.phone-numbers a[href^="mailto"] { color: #f15d32; }
.vertical-head { margin: 20px 0; }
.hero-indent { padding-left: 50px; }
.vertical-line { margin-left: -50px; }
.herohead { background-color: rgba(0, 0, 0, 0.1); }


/* =========================================================================
   8. RESPONSIVE (utilities and legacy layout rows)
   ========================================================================= */
@media screen and (max-width: 767px) {
  .sticky-row { position: static; }
}
@media only screen and (orientation: portrait) {
  .mediarow, .mediarow-reverse { display: flex; flex-wrap: wrap; }
  .mediarow-reverse { flex-wrap: wrap-reverse; }
  .mediacol { width: 100% !important; }
  .sticky-row { top: 160px; }
}


/* =========================================================================
   9. BLOCK THEME FRAME  (Good Creations Blocks theme)
   -------------------------------------------------------------------------
   Header and footer template parts, page/post/archive templates. Classes
   are set on the blocks in the theme's parts/ and templates/ files.
   ========================================================================= */

/* ---- 9a. Header: logo | navigation | GTranslate + search ---- */
/* Header, main and footer sit flush (theme.json blockGap would add a strip). */
body .wp-site-blocks > * + * { margin-block-start: 0; }
.gc-header-part { position: sticky; top: 0; z-index: 100; }
.admin-bar .gc-header-part { top: 32px; }
.gc-site-header {
  background: var(--aw-navy);
  color: #fff;
  padding: 14px var(--gc-gut);
  gap: 24px;
  min-height: 76px;
}
.gc-site-header .gc-logo img { width: clamp(150px, 13vw, 180px); height: auto; }
.gc-nav { font-size: 15px; font-weight: 500; }
.gc-nav.wp-block-navigation,
.gc-nav.wp-block-navigation .wp-block-navigation__submenu-container { color: #fff; }   /* dropdowns: white on navy */
.gc-nav.wp-block-navigation .wp-block-navigation-item__content { color: #fff; text-decoration: none; padding: 6px 2px; }
.gc-nav.wp-block-navigation .wp-block-navigation__submenu-icon { color: #fff; }
.gc-nav.wp-block-navigation .wp-block-navigation-item__content:hover,
.gc-nav.wp-block-navigation .wp-block-navigation-item__content:focus { color: var(--aw-cyan); }
.gc-nav .wp-block-navigation__submenu-container {
  background: var(--aw-navy) !important;
  border: 1px solid var(--aw-steel) !important;
  padding: 8px 0;
  min-width: 240px !important;
}
.gc-nav.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content { padding: 8px 18px; }
.gc-header-tools { gap: 12px; }
.gc-header-tools .gtranslate_wrapper { display: flex; align-items: center; gap: 8px; }
.gc-header-tools a.glink img { margin-right: 0 !important; }
.gc-search .wp-block-search__button { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.5); border-radius: 2px; padding: 8px; }
.gc-search .wp-block-search__input { border-radius: 2px; }
/* Hamburger from 1100px (core switches at 600px; the full menu needs ~1100px).
   The overlay keeps core behaviour; only the breakpoint moves. */
@media (max-width: 1100px) {
  .gc-nav .wp-block-navigation__responsive-container-open { display: flex !important; color: #fff; }
  .gc-nav .wp-block-navigation__responsive-container:not(.is-menu-open) { display: none !important; }
  .gc-nav .wp-block-navigation__responsive-container.is-menu-open { background: var(--aw-navy) !important; color: #fff !important; }
  .gc-nav .is-menu-open .wp-block-navigation__submenu-container { border: 0 !important; padding-left: 16px; }
}
@media (max-width: 600px) {
  .gc-site-header { flex-wrap: wrap !important; }
  .gc-header-tools .gtranslate_wrapper { display: none; }   /* flags move out of the way on phones */
}

/* ---- 9b. Footer ---- */
.gc-site-footer { background: var(--aw-navy); color: #c9ced4; padding: 36px var(--gc-gut) 40px; font-size: 14px; border-top: 1px solid var(--aw-steel); }   /* rule separates a navy last section */
.gc-site-footer a { color: #fff; text-decoration: none; }
.gc-site-footer a:hover { color: var(--aw-cyan); }
.gc-site-footer .gc-copy { margin: 0 !important; display: flex; gap: 6px 20px; flex-wrap: wrap; }
.gc-social { gap: 14px; }
.gc-social .wp-social-link { color: #fff; }
.gc-footer-row { margin-bottom: 22px; }
.gc-footer-nav { font-size: 14px; }
.gc-footer-nav .wp-block-navigation-item__content { color: #fff; }

/* ---- 9c. Page, post and archive templates ---- */
/* Full-width block pages: sections sit flush (no block gap between them). */
.gc-canvas > .wp-block-post-content > * { margin-block-start: 0; margin-block-end: 0; }
.gc-main.gc-page, .gc-main.gc-single, .gc-main.gc-archive { padding-top: 72px; padding-bottom: 96px; }
.gc-main .gc-page-title { margin-bottom: 28px; }
.gc-main { overflow-wrap: anywhere; }        /* long URLs in legal pages wrap on phones */
.gc-main .gc-kicker a { font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; text-decoration: none; }
.gc-main .gc-meta { font-size: 15px; color: #6b7682; }
.gc-posts .wp-block-post { border: 1px solid #dde3ea; background: #fff; }
.gc-posts .wp-block-post > :not(.wp-block-post-featured-image) { padding-left: 20px; padding-right: 20px; }
.gc-posts .wp-block-post-title { font-size: 21px; margin-top: 16px; }
.gc-posts .wp-block-post-title a { color: var(--aw-navy); text-decoration: none; }
.gc-posts .wp-block-post-excerpt { font-size: 16px; padding-bottom: 20px; }
.gc-prevnext { font-weight: 600; }