/*
 * getmeru.com — what the CMS adds on top of the landing's compiled Tailwind (css/landing.css).
 * The CSP has no 'unsafe-inline' (style-src 'self'), so every inline style of the Gatsby markup lives here as a class.
 */

/* Skip link: hidden until focused (the landing has none; the CMS keeps one for keyboard users). */
.skip {
  position: absolute;
  left: -9999px;
  top: 0;
}
.skip:focus {
  left: 1rem;
  top: 1rem;
  z-index: 100;
  background: #fff;
  color: #111523;
  padding: 0.5rem 0.75rem;
  border-radius: 0.5rem;
}

/* Gatsby's focus wrapper: style="outline:none". */
.gatsby-focus-wrapper {
  outline: none;
}

/* react-country-flag with `svg`: the flag image fills its round chip. */
.site-flag {
  display: block;
  width: 100%;
  height: 100%;
  vertical-align: middle;
  border-radius: 50%;
  object-fit: cover;
}

/* AnimatedButton's ring: a conic gradient; the angle is turned by script (js/chrome.js). */
.site-ring {
  background: conic-gradient(from var(--site-ring-angle, 0deg), #ff4545, #00ff99, #006aff, #ff0095, #ff4545);
}

/* AnimatedGradientText: style="background-size:200% auto;background-image:linear-gradient(...)"; the position moves by
   script (js/chrome.js). Unlayered, so it wins over the Tailwind gradient utilities beside it. */
.site-gradient-text {
  background-size: 200% auto;
  background-image: linear-gradient(90deg, #4b5563, #9ca3af, #4b5563);
}

/* Business onboarding's progress bar: style="width:12.5%;background:linear-gradient(...)" (step 1 of 8); the width
   follows the steps by script (js/onboarding.js). */
.site-progress {
  width: 12.5%;
  background: linear-gradient(90deg, #4b5563, #9ca3af, #4b5563);
}

/* Developers' code window (VSCodeTabs.tsx): react-syntax-highlighter's inline styles with Prism's "one light"
   colours, and the component's own <style> (no italics, transparent code backgrounds). */
.site-code-box {
  height: 500px;
  overflow-y: auto;
}
.site-code-pre,
.site-code {
  color: #383a42;
  font-family: 'Fira Code', 'Fira Mono', Menlo, Consolas, 'DejaVu Sans Mono', monospace;
  direction: ltr;
  text-align: left;
  white-space: pre;
  word-spacing: normal;
  word-break: normal;
  line-height: 1.5;
  tab-size: 2;
  hyphens: none;
}
.site-code-pre {
  padding: 1em;
  margin: 0;
  overflow: auto;
  border-radius: 0;
  font-size: 14px;
}
.site-code-ln {
  display: inline-block;
  min-width: 2.25em;
  padding-right: 1em;
  text-align: right;
  user-select: none;
  color: #a0a1a7;
}
.vscodetabs-no-italic * {
  font-style: normal !important;
}
.vscodetabs-no-italic pre,
.vscodetabs-no-italic code {
  background: transparent !important;
}
.site-tk-comment {
  color: #a0a1a7;
}
.site-tk-string {
  color: #50a14f;
}
.site-tk-keyword {
  color: #a626a4;
}
.site-tk-class,
.site-tk-number {
  color: #b76b01;
}
.site-tk-function,
.site-tk-operator {
  color: #4078f2;
}
.site-tk-property {
  color: #e45649;
}

/* The landing's useIsMobile() (under 1024 px) chose between two renderings by script; the CMS page carries both and
   shows one by width. */
@media (max-width: 1023.98px) {
  .site-only-desktop {
    display: none !important;
  }
}
@media (min-width: 1024px) {
  .site-only-mobile {
    display: none !important;
  }
}

/* Home hero background: the SVG mask's style="mask-type:alpha". */
.site-mask-alpha mask {
  mask-type: alpha;
}

/* An SVG the landing drew inline, here an image of a site file: its own size, as an inline SVG has (no max-width, so a
   narrow flex row overflows instead of squeezing it to nothing, as in the home page's partners' loop). */
img.site-intrinsic {
  max-width: none;
}

/* A wrapper the CMS adds around a landing element for its script, taking no box of its own. */
.site-contents {
  display: contents;
}

/* Home: the card's glow box (style="width:400px;height:260px") and the feature card's place under the phone
   (style="bottom:5%;left:50%;z-index:1"); js/home.js moves the card out and back. */
.site-card-glow {
  width: 400px;
  height: 260px;
}
.site-feature-card {
  bottom: 5%;
  left: 50%;
  z-index: 1;
  transform: translateX(-50%);
}