/* Rocking Role navbar + mobile fixes v4 (adds PWA install button style).
   Loaded AFTER styles.min.css (new versioned URL, so Cloudflare serves it fresh).
   Logo itself is sized in the inline <style> header block in each HTML file;
   menu weight / button compactness / mobile hero fixes live here. */

/* Logo sizing baseline (also present in each page's inline header <style>;
   duplicated here so pages without that inline block still look right) */
header.header .header-logo__box img {
  width: auto;
  height: 4.6rem;
  max-height: 4.6rem;
  max-width: 24rem;
  object-fit: contain;
}
@media (min-width: 1230px) {
  header.header .header-logo__box img {
    filter: none;
  }
}
@media (max-width: 1229px) {
  header.header .header-logo__box img {
    height: 40px;
    max-height: 40px;
    max-width: 20rem;
    filter: invert(1);
  }
  /* theme inverts the whole logo box when mobile menu opens (body.is-fixed);
     the img already inverts itself, so neutralise the parent to avoid
     double-invert turning the logo black again */
  body.is-fixed .header-logo__box {
    filter: none;
  }
}

/* ---------- Desktop (>=1230px): lighter, slimmer navbar ---------- */
@media (min-width: 1230px) {
  /* slimmer white pill */
  .header-inner {
    padding: .8rem 1.2rem .8rem 1.6rem;
  }
  /* menu items: regular weight, slightly smaller */
  .main__menu a {
    font-size: 1.35rem;
    font-weight: 400;
    line-height: 1.4;
  }
  .main__menu a:hover {
    font-weight: 500;
  }
  /* Lets Connect: clean but compact */
  .header-right > .btn {
    padding: .9rem 2.2rem;
    font-size: 1.5rem;
    font-weight: 500;
    line-height: 1.4;
  }
}

/* ---------- Mobile / tablet (<1230px): dark header, white logo ---------- */
@media (max-width: 1229px) {
  /* theme hides hero <br> on mobile which joins words ("marketingneeds");
     show the break so the title keeps its 3-line structure */
  .hero-section .page-title br {
    display: block;
  }
  /* hero title: never overflow, wrap long words */
  .page-title {
    overflow-wrap: break-word;
    word-break: break-word;
  }
  .hero-section__txt {
    font-size: 1.6rem;
  }
  .hero-section__info {
    padding-bottom: 4rem;
  }
  /* hero CTA full-width but not oversized */
  .hero-section__info .btn {
    padding: 1.4rem 2rem;
    font-size: 1.6rem;
  }
}

/* ---------- Very small phones: shrink hero title ---------- */
@media (max-width: 480px) {
  .page-title {
    font-size: 2.6rem;
    line-height: 1.08;
  }
}

/* ---------- Overflow guard: page must never scroll sideways ---------- */
html {
  overflow-x: clip;
}
img, svg {
  max-width: 100%;
}

/* ---------- Footer sits on black: invert the dark artwork to white ---------- */
.page-footer__logo-img {
  filter: invert(1);
}

/* ---------- PWA floating Install button (hidden until installable) ---------- */
.av-install-btn {
  position: fixed;
  right: 1.4rem;
  bottom: 1.4rem;
  z-index: 9998;
  padding: 1rem 2rem;
  border: none;
  border-radius: 36rem;
  background: linear-gradient(270deg, #ff6a00 0, #ee0979 100%);
  color: #fff;
  font-size: 1.4rem;
  font-weight: 600;
  letter-spacing: .3px;
  box-shadow: 0 8px 24px rgba(238, 9, 121, .4);
  cursor: pointer;
}
.av-install-btn[hidden] {
  display: none;
}
@media (min-width: 1230px) {
  .av-install-btn {
    right: 2rem;
    bottom: 2rem;
  }
}