/* Brand overrides — loaded AFTER css/styles.min.css so it wins specificity.
 * Heading font is Rajdhani (condensed, industrial look — matches the
 * "COMMITTED TO SERVE / BEYOND MACHINERY" treatment shared by the user).
 * Body stays on Inter so long-form text doesn't lose readability.
 *
 * The font is also applied to "chip" UI — category chips, product tags,
 * power-source badges — anywhere a short uppercase label appears.
 *
 * If a tenant configures `webthemefont` in Store Settings, the theme
 * bridge in data.js can later override --font-heading at runtime; the
 * Google Fonts import is the default fallback. */

@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@500;600;700&display=swap');

/* Footer gallery — v6 ships .gallery-item at height:120px with default
 * object-fit:cover on the <img>, which crops the top + bottom of every
 * machine photo. Switch to contain + a darker backdrop so the full
 * silhouette of each lift reads at the small footer size. Bumped the
 * tile height to 180px so the machines aren't squeezed. */
.footer-gallery { background: var(--dark); padding: 12px 0 !important; gap: 4px; }
.footer-gallery .gallery-item { height: 180px !important; background: transparent; }
.footer-gallery .gallery-item img,
.footer-gallery img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: bottom center !important;
}

/* Drop v6's 1240px page cap — site spans full viewport now.
 * Bumped horizontal padding so content has breathing room against the
 * screen edge now that we're full-bleed. Top-bar + header inherit. */
.container {
  max-width: none !important;
  padding-left: 40px !important;
  padding-right: 40px !important;
}
.top-bar .container,
.header .container {
  padding-left: 40px !important;
  padding-right: 40px !important;
}
@media (max-width: 720px) {
  .container,
  .top-bar .container,
  .header .container {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

:root {
  --font-heading: 'Rajdhani', 'Cardo', serif;
  --font-chip:    'Rajdhani', 'Inter', sans-serif;
}

/* Headings */
h1, h2, h3, h4,
.hero-title,
.section-title,
.pd-title,
.sel-steptitle,
.equip-content h2,
.about-content h2,
.cta-content h2,
.testimonial-card blockquote {
  font-family: var(--font-heading);
  font-weight: 700;
  letter-spacing: 0.5px;
}

/* Bigger, broader stroke for the hero + section titles so they read like
 * the "COMMITTED TO SERVE" sample — condensed industrial. */
.hero-title,
.section-title,
.pd-title {
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
}

/* The "highlight" run inside hero/section titles in v6 uses the primary
 * colour — when paired with Rajdhani an outline-style accent matches the
 * "BEYOND MACHINERY" treatment. Tenants who don't want outline can drop
 * this by overriding webheroslides' accent text. */
.hero-title .highlight,
.section-title span {
  color: var(--primary);
  -webkit-text-stroke: 1px var(--primary);
  font-weight: 700;
}

/* Chips, tags, badges — short uppercase pieces that benefit from
 * Rajdhani's tight tracking. Also covers main + footer nav links so the
 * whole menu reads as a cohesive Rajdhani block. */
.pd-chip,
.pc-tag,
.card-tag,
.section-label,
.hero-badge,
.sel-stepnum,
.nav-menu a,
.top-bar a,
.footer-nav a,
.hover-btn,
.header-cta {
  font-family: var(--font-chip);
  letter-spacing: 1.5px;
  font-weight: 600;
}

/* Filter rail labels stay in the default body font (Inter) so they read
 * as regular form labels — same family as the "Reset Filters" button.
 * Only the h4 section headings (Category, Power Source, Working Height)
 * stay in Rajdhani via the .catalog-filters h4 rule in products.html. */
.filter-chip {
  font-family: inherit;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}

/* Header nav — slightly larger + uppercase for v6's industrial feel.
 * !important is the seatbelt: v6's style.css ships with its own
 * .nav-menu rule that uses a lower-specificity selector, but on a
 * brand-css cache miss the browser falls back to that older rule.
 * The flag keeps the Rajdhani treatment locked even mid-rollout. */
.header .nav-menu a,
header.header nav.nav-menu a {
  font-family: 'Rajdhani', 'Inter', sans-serif !important;
  text-transform: uppercase !important;
  font-size: 20px !important;
  letter-spacing: 1.5px !important;
  font-weight: 600 !important;
}

/* "Get a Quote" header CTA — same size as the nav links so the top
 * row reads as one consistent typography block. */
/* "Get a Quote" header CTA — sleeker:
 *   - smaller padding (10×22 vs v6's 15×36) so the button hugs its text
 *   - 16px text, 600 weight — still uppercase Rajdhani but less heavy
 *   - 999px radius for a pill silhouette
 *   - 1px ring + crisp shadow on hover instead of v6's scaleX slab */
.header .header-cta,
.header .hover-btn.header-cta,
.header .hover-btn.primary.header-cta {
  font-family: 'Rajdhani', 'Inter', sans-serif !important;
  text-transform: uppercase !important;
  font-size: 16px !important;
  letter-spacing: 1.2px !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
  padding: 10px 22px !important;
  border-radius: 999px !important;
  border: 1px solid var(--primary) !important;
  background: var(--primary) !important;
  color: var(--white) !important;
  box-shadow: 0 2px 6px rgba(242,99,2,0.25);
  transition: all .2s ease;
}
.header .header-cta:hover,
.header .hover-btn.primary.header-cta:hover {
  background: var(--white) !important;
  color: var(--primary) !important;
  box-shadow: 0 4px 12px rgba(242,99,2,0.35);
  transform: translateY(-1px);
}
/* Mute v6's hover-bx scale animation on the header CTA — competes with
 * the pill hover above and feels gimmicky next to the cleaner button. */
.header .header-cta .hover-bx { display: none !important; }

/* Header row needs to allow wrapping at smaller widths so the bigger
 * 20px nav + CTA don't overflow the container. Without this v6's
 * .header .container is a strict flex row that clips overflow. */
.header .container {
  flex-wrap: wrap !important;
  row-gap: 12px;
}
.header .nav-menu {
  flex-wrap: wrap;
  row-gap: 8px;
}

/* Mobile-style rounded chip variant — used on products.html filters and
 * selector wizard buttons. v6's CSS already gives `.filter-chip` a flex
 * row with checkbox; here we just nudge font + size. */
.filter-chip { font-size: 14px; }
.pd-chip     { font-size: 11px; padding: 4px 14px; }