/* Mactech Diesel Solutions — shared styles (Industrial Heavy Duty) */

/* Icon font is self-hosted and subset to the icons this site actually uses.
   Two things here are load-bearing, both caused visible bugs before:
   1. font-family + font-display:block — without the local @font-face the page
      depended on Google Fonts resolving; if it was slow or blocked, every icon
      rendered as its literal ligature text ("call", "star", "request_quote").
   2. text-transform:none — icon spans sit inside .uppercase parents in the nav
      and buttons. Uppercasing the ligature text stops it matching, so the icon
      fell back to the word even once the font HAD loaded. */
@font-face{
  font-family:'Material Symbols Outlined';
  font-style:normal;
  font-weight:100 700;
  font-display:block;
  src:url('fonts/material-symbols-outlined.woff2') format('woff2');
}
.material-symbols-outlined{
  font-family:'Material Symbols Outlined';
  font-weight:normal;
  font-style:normal;
  font-size:24px;
  line-height:1;
  letter-spacing:normal;
  text-transform:none;
  display:inline-block;
  white-space:nowrap;
  word-wrap:normal;
  direction:ltr;
  vertical-align:middle;
  -webkit-font-feature-settings:'liga';
  font-variation-settings:'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 24;
  -webkit-font-smoothing:antialiased;
}
/* Utilities used by the Jul-2026 content update. assets/tailwind.css is a
   hand-built subset, NOT a real Tailwind build — any utility it does not
   already contain silently does nothing, so new ones are declared here.
   Values match Tailwind's default scale. Run check-classes.py after markup
   changes to catch anything still undefined. */
.mt-1{margin-top:.25rem;}
.mt-3{margin-top:.75rem;}
.mt-5{margin-top:1.25rem;}
.p-5{padding:1.25rem;}
.pt-5{padding-top:1.25rem;}
.pt-40{padding-top:10rem;}
.pb-20{padding-bottom:5rem;}
.py-8{padding-top:2rem;padding-bottom:2rem;}
.max-w-3xl{max-width:48rem;}
.h-24{height:6rem;}
/* tailwind.css only ships w-auto inside the md: breakpoint. The award badge sets
   an explicit height and needs width to follow the aspect ratio at every size —
   without this the width="390" attribute wins below 768px. */
.w-auto{width:auto;}
.h-\[320px\]{height:320px;}
.leading-snug{line-height:1.375;}
.order-1{order:1;}
.order-2{order:2;}
.min-h-\[68vh\]{min-height:68vh;}
.h-5{height:1.25rem;}
.w-5{width:1.25rem;}
.h-14{height:3.5rem;}
.max-w-xs{max-width:20rem;}
.pt-3{padding-top:.75rem;}
.pt-4{padding-top:1rem;}
.h-12{height:3rem;}
.ml-auto{margin-left:auto;}
.text-xl{font-size:1.25rem;line-height:1.75rem;}
.cursor-pointer{cursor:pointer;}
/* Tailwind preflight strips checkbox styling, so the tick needs an explicit
   accent colour or it renders as an unfilled box on the dark surface. */
.accent-primary{accent-color:#17b2e6;}
@media (min-width:1024px){
  .lg\:order-1{order:1;}
  .lg\:order-2{order:2;}
  /* 8/4 split gives the hero headline a wider measure than the old 6/6 grid,
     so it runs on longer lines instead of wrapping into a narrow column. */
  .lg\:col-span-8{grid-column:span 8/span 8;}
  .lg\:col-span-4{grid-column:span 4/span 4;}
}

/* Hero headline. The client asked for "Earthmoving Machinery & Japanese Truck"
   to sit on one line with the rest beneath. That string is ~19.8x the font size
   wide in Archivo Narrow Black, so the size has to track the viewport or it
   wraps in the wrong place. clamp() keeps it on one line from 1024px up and
   still caps at a sensible display size on wide screens. */
.hero-h1{font-size:clamp(30px,4.4vw,54px);}
/* Below 1024px there isn't room for that line at a readable size, so drop the
   forced break and let it wrap naturally rather than shrink the type further. */
.hero-break{display:none;}
@media (min-width:1024px){.hero-break{display:inline;}}

.brutal-shadow{box-shadow:4px 4px 0 0 #0b0e12;}
.industrial-overlay{background:linear-gradient(to bottom,rgba(17,20,24,.55) 0%,rgba(17,20,24,.92) 100%);}
.industrial-border{border:1px solid #2D333A;}
.industrial-border-thick{border:2px solid #2D333A;}
.cyan-focus:focus{outline:none;border-color:#17B2E6;box-shadow:0 0 0 2px rgba(23,178,230,.25);}
.zebra-row:nth-child(even){background-color:#161A1E;}
section{scroll-margin-top:88px;}
html{scroll-behavior:smooth;}
body{padding-bottom:64px;}
@media (min-width:768px){body{padding-bottom:0;}}

/* Wide comparison tables scroll sideways below md. Without a cue the last
   column reads as missing rather than off-screen, so under md we show a swipe
   hint and fade the right edge, clearing the fade once scrolled to the end. */
.table-scroll{position:relative;}
.table-scroll::after{content:"";position:absolute;top:0;right:0;bottom:0;width:56px;pointer-events:none;background:linear-gradient(to right,rgba(17,20,24,0),rgba(17,20,24,.95));transition:opacity .2s;}
.table-scroll[data-scroll-end="true"]::after{opacity:0;}
.swipe-hint{display:flex;align-items:center;gap:6px;}
@media (min-width:768px){.table-scroll::after{content:none;}.swipe-hint{display:none;}}

/* Anchor targets that are not <section> elements need the same fixed-nav
   offset the section rule above provides, or the heading lands under the nav. */
.anchor-offset{scroll-margin-top:88px;}