/* HHA Group's own top bar, footer and video strip around the copy of the truck sales stock pages.
   The stock pages themselves use app.css, copied from HHA Truck Sales. Everything here starts g-
   so it never clashes with app.css. */
:root {
  --g-navy: #00427f; --g-ink: #04101f; --g-orange: #db4d0f; --g-orange-hot: #f15a17; --g-muted: #9fb0c6;
  --g-head: "Barlow Condensed", "Arial Narrow", sans-serif;
  --g-ease: cubic-bezier(.2, .7, .2, 1);
}
.g-skip { position: absolute; left: -9999px; }
.g-skip:focus { left: 16px; top: 16px; z-index: 100; background: #fff; color: var(--g-ink); padding: 8px 12px; }

/* Top bar: see-through over the video strip, solid once the page scrolls (and always on a truck page) */
.g-top {
  position: fixed; inset: 0 0 auto 0; z-index: 50; color: #fff;
  display: flex; align-items: center; gap: 24px;
  padding: 14px clamp(16px, 3vw, 40px);
  transition: background .35s var(--g-ease), padding .35s var(--g-ease), box-shadow .35s;
}
.g-top.is-solid {
  background: rgba(4, 16, 31, .94);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  padding-top: 8px; padding-bottom: 8px;
  box-shadow: 0 1px 0 rgba(255,255,255,.08);
}
.g-top__logo img { width: clamp(120px, 12vw, 170px); height: auto; filter: drop-shadow(0 2px 8px rgba(0,0,0,.45)); transition: width .35s var(--g-ease); }
.g-top.is-solid .g-top__logo img { width: clamp(104px, 9vw, 130px); }
.g-top__nav { display: flex; gap: clamp(16px, 2.2vw, 34px); margin-left: auto; }
.g-top__nav a {
  font: 600 17px/1.2 var(--g-head); letter-spacing: .08em; color: #fff;
  text-transform: uppercase; text-decoration: none; padding: 6px 0;
  background: linear-gradient(var(--g-orange), var(--g-orange)) left bottom / 0 2px no-repeat;
  transition: background-size .3s var(--g-ease);
}
.g-top__nav a:hover, .g-top__nav a:focus-visible, .g-top__nav a[aria-current] { background-size: 100% 2px; }
.g-top__call {
  display: flex; align-items: center; gap: 10px;
  background: var(--g-orange); color: #fff; text-decoration: none;
  padding: 10px 18px; border-radius: 4px; transition: background .2s;
}
.g-top__call:hover { background: var(--g-orange-hot); }
.g-top__call svg { width: 22px; height: 22px; fill: currentColor; flex: none; }
.g-top__call-text { font: 700 21px/1 var(--g-head); letter-spacing: .03em; }
.g-top__call-text small { display: block; font: 500 11px/1 var(--f-body); letter-spacing: .12em; text-transform: uppercase; opacity: .85; margin-bottom: 3px; }

/* The video strip at the top of the stock list (the home page's video, not on a truck's page) */
.g-strip { position: relative; overflow: hidden; background: var(--g-ink); color: #fff; isolation: isolate; }
.g-strip video, .g-strip__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; pointer-events: none; }
.g-strip::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(10,15,28,.62), rgba(10,15,28,.86)); }
.g-strip__inner { max-width: 1280px; margin-inline: auto; padding: clamp(118px, 15vh, 150px) 20px clamp(36px, 6vh, 60px); }
.g-strip__eyebrow { font: 700 15px/1 var(--g-head); letter-spacing: .3em; text-transform: uppercase; color: var(--g-orange); margin: 0 0 10px; }
.g-strip h1 { font: 800 clamp(44px, 6.5vw, 88px)/.92 var(--g-head); text-transform: uppercase; letter-spacing: .01em; }
.g-strip__lead { margin-top: 14px; max-width: 58ch; color: #dde5ef; font-size: clamp(15px, 1.4vw, 18px); }

/* A truck's page has no strip: leave room for the top bar */
.g-solid main.stock { padding-top: clamp(96px, 11vh, 120px); }

/* Footer */
.g-foot { background: var(--g-ink); color: #fff; border-top: 3px solid var(--g-orange); padding: 56px clamp(16px, 4vw, 48px) 28px; }
.g-foot__inner { max-width: 1240px; margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 32px; }
.g-foot__logo { width: 170px; height: auto; }
.g-foot__cols { display: flex; flex-wrap: wrap; gap: clamp(28px, 5vw, 72px); }
.g-foot h3 { font: 600 14px/1.2 var(--g-head); letter-spacing: .25em; text-transform: uppercase; color: var(--g-orange); margin: 0 0 6px; }
.g-foot p { margin: 0; }
.g-foot a { text-decoration: none; }
.g-foot a:hover { color: var(--g-orange-hot); }
.g-foot .g-muted { color: var(--g-muted); font-size: 14px; }
.g-foot__copy { max-width: 1240px; margin: 36px auto 0; font-size: 13px; color: var(--g-muted); }

@media (max-width: 1080px) {
  .g-top__nav { display: none; }
  .g-top__call { margin-left: auto; }
}
@media (max-width: 760px) {
  .g-top { padding: 10px 16px; }
  .g-top__call { padding: 9px 12px; }
  .g-top__call-text small { display: none; }
  .g-top__call-text { font-size: 18px; }
  .g-strip__inner { padding: 100px 16px 30px; }
  .g-solid main.stock { padding-top: 84px; }
  .g-foot__inner { flex-direction: column; align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  .g-top, .g-top__logo img { transition: none; }
}