/* Graphyte: site CSS. Loaded from jsDelivr (@main) by head-code.html; edit here, push, purge. */

/* The hero hex bloom grows from the right-centre and the hero image is set to Center Right in Relume,
   so the old tablet/phone flip and top-right crop are no longer needed. */

/* Home hero primary button: brand orange (Primary 400) instead of the scheme's darker fill.
   Scoped to the backdrop hero, not .section-100vh, so it survives changing the hero's Section Height. */
section:has(> .backdrop-media-wrapper) .button:not(.button-secondary):not(.button-link) {
  --button-fill: var(--color-color1-400, #FF5521) !important;
  --button-border: var(--color-color1-400, #FF5521) !important;
}

/* Home hero paragraph: Relume caps body copy at 35rem, which left "vendor." alone on its own line.
   Let it run to the heading's width, and keep a word from dangling on narrower screens. */
section:has(> .backdrop-media-wrapper) .body-max-width {
  max-width: var(--heading-max-width, 48rem);
  text-wrap: pretty;
}

/* Hero badge (hero-badge.js). Figma: Badge / Size=sm, Type=Badge modern, Icon=Dot, Color=Success.
   The Relume announcement banner's row is hidden before first paint; the script puts the badge in its
   place using the banner's message (and link, if it has one). */
section :has(.announcement-banner):is(:has(~ h1), :has(~ * h1)),
[data-gr-replaced] { display: none !important; }

.gr-badge {
  --gr-badge-bg: #FFFFFF;          /* bg-primary */
  --gr-badge-border: #D7D1CF;      /* border-primary (Neutral 300) */
  --gr-badge-text: #444040;        /* text-secondary (Neutral 700) */
  --gr-badge-dot: #22C55E;         /* utility-green-500 */
  display: inline-flex;
  align-items: center;
  gap: 4px;
  align-self: flex-start;
  width: max-content;
  max-width: 100%;
  padding: 1px 5px;                /* Figma 2px 6px with an inside stroke */
  border: 1px solid var(--gr-badge-border);
  border-radius: 6px;
  background: var(--gr-badge-bg);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
  color: var(--gr-badge-text);
  font-family: var(--font-family-body, "Manrope", system-ui, sans-serif);
  font-size: 12px;
  font-weight: 500;
  line-height: 18px;
  letter-spacing: 0;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color .15s ease, background-color .15s ease;
}
a.gr-badge:hover { border-color: #A6A09F; background: #FBFAF9; }
a.gr-badge:focus-visible { outline: 2px solid #FF5521; outline-offset: 2px; }

.gr-badge__dot {
  flex: none;
  width: 6px;
  height: 6px;
  margin: 1px;
  border-radius: 50%;
  background: var(--gr-badge-dot);
  animation: gr-badge-pulse 2s ease-in-out infinite;
}
@keyframes gr-badge-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .25; }
}
@media (prefers-reduced-motion: reduce) {
  .gr-badge__dot { animation: none; }
}

/* Logo tooltips (logo-tooltips.js). Figma: Tooltip / Supporting text=False, Arrow=Bottom center.
   The script names each logo in "Tools I build with"; the tooltip sits above it on hover. */
.customer-logo-wrapper[data-gr-tooltip] { position: relative; }
.customer-logo-wrapper[data-gr-tooltip]::before,
.customer-logo-wrapper[data-gr-tooltip]::after {
  position: absolute;
  left: 50%;
  z-index: 10;
  pointer-events: none;
  opacity: 0;
  transition: opacity .15s ease, transform .15s ease;
}
.customer-logo-wrapper[data-gr-tooltip]::after {      /* bubble */
  content: attr(data-gr-tooltip);
  bottom: calc(100% + 10px);
  transform: translate(-50%, 4px);
  padding: 8px 12px;
  border-radius: 8px;
  background: #120502;                                /* bg-primary-solid */
  box-shadow: 0 12px 16px -4px rgba(0, 0, 0, .08), 0 4px 6px -2px rgba(0, 0, 0, .03), 0 2px 2px -1px rgba(0, 0, 0, .04);
  color: #FFFFFF;
  font-family: var(--font-family-body, "Manrope", system-ui, sans-serif);
  font-size: 12px;
  font-weight: 600;
  line-height: 18px;
  white-space: nowrap;
}
.customer-logo-wrapper[data-gr-tooltip]::before {     /* arrow */
  content: "";
  bottom: calc(100% + 6px);
  width: 10px;
  height: 10px;
  border-radius: 1px;
  background: #120502;
  transform: translate(-50%, 4px) rotate(45deg);
}
.customer-logo-wrapper[data-gr-tooltip]:hover::after { opacity: 1; transform: translate(-50%, 0); }
.customer-logo-wrapper[data-gr-tooltip]:hover::before { opacity: 1; transform: translate(-50%, 0) rotate(45deg); }
@media (prefers-reduced-motion: reduce) {
  .customer-logo-wrapper[data-gr-tooltip]::before,
  .customer-logo-wrapper[data-gr-tooltip]::after { transition: none; }
}

/* Page transition (page-transition.js). A page reached through the hex transition starts covered:
   the inline line in the head code adds html.gt-in before first paint, this paints the cover, and the
   script takes over and ripples the hexes out. If the script never loads, the cover lifts by itself
   after 2.5s. --gt-cover is the covered screen, --gt-edge the leading edge of the wave. */
:root { --gt-cover: #F6EFE4; --gt-edge: #E4DAC5; }  /* Sand 100, Sand 200 */
html.gt-in::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 2147483647;
  background: var(--gt-cover);
  animation: gt-lift 0s linear 2.5s forwards;
}
@keyframes gt-lift { to { visibility: hidden; } }
html.gt-busy { cursor: progress; }

/* Image lightbox (About gallery): Relume opens the modal as a scrolling block and the photo keeps the
   gallery's full-width rule, so portrait shots blew up past the screen. Fit the whole photo, centred. */
.image-lightbox-modal:popover-open { display: flex; overflow: hidden; }
.image-lightbox-figure { width: 100%; height: 100%; min-width: 0; min-height: 0; }
.image-lightbox-figure > .media-wrapper { width: auto; height: auto; max-width: 100%; max-height: 100%; aspect-ratio: auto; }
.image-lightbox-figure .media {
  width: auto; height: auto; max-width: 100%;
  max-height: calc(100dvh - 2 * var(--page-padding, 1.5rem));
}

/* Phones: dock the floating navbar to the top edge. Floating 20px down left a strip where the hex
   pattern and, once scrolled, page text showed above the bar. The open menu docks under it too. */
@media (max-width: 767px) {
  nav.navbar-floating.navbar-floating {
    --ws-nav-inset: 0px;
    top: 0;
    left: 0;
    right: 0;
    border-radius: 0;
    padding-top: env(safe-area-inset-top, 0px);
  }
  nav.navbar-floating.navbar-floating .nav-menu-floating.nav-menu-floating {
    margin-top: 0;
    left: 0;
    right: 0;
    border-radius: 0;
    border-left-width: 0;
    border-right-width: 0;
  }
}