/* custom.css — Big John's Rolloff design layer.
 *
 * Loads after theme.css and site.css, and `sites update-template` PRESERVES
 * it, so everything bespoke to this site lives here rather than forking the
 * template. The kit's header markup (views/layout.html) is template-owned and
 * will be overwritten on every update — so the Big John's look is achieved by
 * overriding that markup's classes, never by editing it.
 *
 * Reference: https://www.bigjohnsrolloff.com/
 */

/* ══════════════════════════════════════════════════════════════════════
   HEADER
   Live site: fixed, transparent over the hero, turning opaque on scroll.
   Kit default: sticky, white/90 with a backdrop blur and a bottom border.
   ══════════════════════════════════════════════════════════════════════ */

header {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 30;
  background: transparent;
  backdrop-filter: none;
  border-bottom: 0;
  transition: background-color 300ms ease, box-shadow 300ms ease;
}

/* Scrolled state — added by custom.js. #1A1F2C is the charcoal the live site
   uses so hero text can't show through the bar. */
header.bj-scrolled {
  background-color: var(--color-dark);
  box-shadow: 0 1px 0 rgb(0 0 0 / 0.25);
}

/* The page sits under a fixed header, so the kit's sticky-header assumption
   (content starts below it) no longer holds. The hero is full-bleed and
   intentionally slides beneath. */
header + main,
header ~ #app {
  margin-top: 0;
}

/* Inner bar: the live site runs edge-to-edge with px-8, not a 6xl container. */
header > div {
  max-width: none;
  padding-inline: 2rem;
  height: auto;
  padding-block: 0.75rem;
}

/* ── Brand ─────────────────────────────────────────────────────────────
   Logo only. The live site shows no wordmark next to it — the mark already
   contains the name — and the logo is far larger than the kit's 32px. */

header [data-site-title] {
  display: none;
}

header a img {
  height: 6rem;                 /* h-24, matching the live site */
  width: auto;
}

/* ── Desktop nav ───────────────────────────────────────────────────────
   The kit reveals nav at md (768px); the live site holds the mobile layout
   until lg (1024px). Push both breakpoints out to match. */

@media (min-width: 768px) and (max-width: 1023.98px) {
  header nav[data-nav] { display: none; }
  header .zk-mnav { display: block; }
}

@media (min-width: 1024px) {
  header nav[data-nav] {
    display: flex;
    flex: 1 1 0%;
    justify-content: space-around;
    gap: 1.5rem;
  }
}

/* ── Nav links ─────────────────────────────────────────────────────────
   White, text-lg, with the underline that grows from the left on hover.
   The live site hardcodes #932631 for both the text and the rule. */

header .navlink,
header .zk-navgroup-btn {
  position: relative;
  color: #fff;
  font-size: var(--text-lg);
  line-height: 1.4;
  font-weight: 400;
  background: none;
  padding: 0;
  transition: color 200ms ease;
}

header .navlink::after,
header .zk-navgroup-btn::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  height: 1px;
  width: 50%;
  max-width: 4rem;              /* max-w-16 */
  background: transparent;
  transition: background-color 200ms ease;
}

header .navlink:hover,
header .zk-navgroup-btn:hover,
header .navlink.navlink-active,
header .zk-navgroup-btn.navlink-active {
  color: var(--color-brand-red-dark);
}

header .navlink:hover::after,
header .zk-navgroup-btn:hover::after,
header .navlink.navlink-active::after,
header .zk-navgroup-btn.navlink-active::after {
  background-color: var(--color-brand-red-dark);
}

/* ── Services dropdown ─────────────────────────────────────────────────
   Kit renders <details> + Alpine; restyle the panel to sit on the charcoal. */

header .zk-navgroup-panel {
  background-color: var(--color-dark);
  border: 1px solid rgb(255 255 255 / 0.12);
  border-radius: 0.375rem;
  padding: 0.5rem 0;
  min-width: 14rem;
}

header .zk-navgroup-item {
  display: block;
  padding: 0.5rem 1rem;
  color: #fff;
  font-size: var(--text-base);
  transition: background-color 200ms ease, color 200ms ease;
}

header .zk-navgroup-item:hover {
  background-color: rgb(255 255 255 / 0.06);
  color: var(--color-brand-red-dark);
}

/* ── Mobile ────────────────────────────────────────────────────────────
   Circular white-bordered hamburger, matching the live site. */

header .zk-mnav-btn {
  border: 2px solid #fff;
  border-radius: 9999px;
  padding: 0.5rem;
  color: #fff;
}

header .zk-mnav-panel {
  background-color: var(--color-dark);
  border-top: 1px solid rgb(255 255 255 / 0.12);
}

header .zk-mnav-panel .navlink,
header .zk-mnav-panel .zk-navgroup-btn {
  color: #fff;
  padding: 0.75rem 1.5rem;
  display: block;
}

/* The live site has no light/dark switch — the design is dark-on-hero
   throughout, and the control has nowhere sensible to sit. */
header [data-zk-theme] {
  display: none;
}