/* Reliability layer for the standalone brand pages.
   It is loaded directly in the document so essential controls do not depend
   on script-injected styles arriving after the page renders. */

body > .whatsapp-float {
  position: fixed !important;
  z-index: 999 !important;
  right: 22px !important;
  bottom: 22px !important;
  width: 57px !important;
  height: 57px !important;
  display: grid !important;
  place-items: center !important;
  color: #fff !important;
  background: var(--color-whatsapp) !important;
  border-radius: 50% !important;
  box-shadow: 0 7px 20px rgba(0, 0, 0, .28) !important;
}

body > .whatsapp-float svg {
  display: block !important;
  width: 28px !important;
  height: 28px !important;
  fill: currentColor !important;
}

/* Persistent, readable navigation on every standalone brand page.  The
   document-flow header avoids obscuring the hero when the page is scrolled. */
body > header {
  position: sticky !important;
  top: 0 !important;
  z-index: 100 !important;
  background: var(--color-bg-subtle) !important;
  box-shadow: 0 1px 0 rgba(32, 36, 42, .12) !important;
}

body > header + main > .hero,
body > header + main > .anchor-hero {
  padding-top: 62px !important;
}

footer > .legal-links {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 12px !important;
}

footer > .legal-links a {
  display: inline-block !important;
  white-space: nowrap !important;
}

/* Shared three-link site header and footer for all original brand pages. */
body > header {
  min-height: 82px !important;
  height: auto !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 18px !important;
}

body > header > a:first-child { justify-self: start !important; }
body > header > .site,
body > header > .site-name {
  display: block !important;
  justify-self: center !important;
  white-space: nowrap !important;
}
body > header > a:last-child { justify-self: end !important; text-align: right !important; }

footer .footer-legal {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 11px !important;
}

footer .footer-legal a {
  color: inherit !important;
  font: 10px/1.2 var(--mono) !important;
  text-decoration: none !important;
  opacity: .8 !important;
}

footer .footer-legal a:hover { opacity: 1 !important; color: var(--color-highlight) !important; }

/* Dark transparent logo for the light standalone-page navigation bar. */
body > header > .site,
body > header > .site-name {
  width: 174px !important;
  height: 56px !important;
  background: url('assets/branding/sa-logo-on-light.png') center / contain no-repeat !important;
  color: transparent !important;
  font-size: 0 !important;
}

@media (max-width: 700px) {
  body > header {
    min-height: 66px !important;
    padding: 0 20px !important;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important;
    gap: 8px !important;
  }

  body > header > a {
    font-size: 10px !important;
    white-space: nowrap !important;
  }

  body > header > .site,
  body > header > .site-name {
    display: block !important;
    width: 132px !important;
    height: 43px !important;
    font-size: 0 !important;
  }

  body > header + main > .hero,
  body > header + main > .anchor-hero {
    padding-top: 46px !important;
  }

  body > .whatsapp-float {
    right: 15px !important;
    bottom: 15px !important;
    width: 52px !important;
    height: 52px !important;
  }

  .range-top .catalogue-actions,
  .range-head .catalogue-actions,
  .range-head .resource-actions {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    width: 100% !important;
    max-width: none !important;
    gap: 10px !important;
    margin-top: 24px !important;
  }

  .range-top .catalogue-actions .catalogue-button,
  .range-head .catalogue-actions .catalogue-button,
  .range-head .resource-actions .catalogue-button {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 42px !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 10px 15px !important;
    white-space: normal !important;
    text-align: left !important;
  }

  .range-top .catalogue-actions small {
    width: 100% !important;
    text-align: left !important;
  }

  .catalogue-hub .catalogue-grid a,
  .pressfit .catalogue-grid a {
    display: grid !important;
    grid-template-columns: 27px minmax(0, 1fr) !important;
    align-items: start !important;
    gap: 8px 12px !important;
    width: 100% !important;
  }

  .catalogue-hub .catalogue-grid i,
  .pressfit .catalogue-grid i {
    grid-column: 2 !important;
    width: max-content !important;
    max-width: 100% !important;
    margin-top: 0 !important;
  }

  footer > .legal-links {
    gap: 10px !important;
  }

  footer .footer-legal {
    justify-content: flex-start !important;
    gap: 10px !important;
  }
}