/* ds2 page styles: the shared page-level rules every ds2-era static page
 * carries inline, extracted so a migrated page keeps them.
 *
 * PROVENANCE. 79 of the 107 remaining `public/<slug>/index.html` files carry
 * one byte-identical Webflow embed -- `<div class="ds2-global-styles"><div
 * class="ds2-styles w-embed">` -- holding six <style> tags. The pilot page
 * (`public/integration/metomic-for-slack/index.html`, deleted in a8a8a89)
 * carried the same embed, byte for byte, which makes 80. The sixth tag is the
 * HubSpot form CSS already extracted to `hubspot-form.css`; the other five are
 * this file. Same surgical move, same reason.
 *
 * WHERE IT HAS TO GO, AND WHY. The embed sits in the <body>, immediately after
 * <header> -- not in <head>, despite the ticket saying so. That matters only
 * because it puts these rules AFTER the head's stylesheet links in document
 * order, which is how they beat the Webflow bundle at equal specificity. See
 * `.eyebrow-tag_*-outer` below for a collision that is only won that way.
 * `MarketingLayout` links this file from BaseLayout's `head-extra` slot, which
 * renders after both `metomic-staging.webflow.shared.<hash>.css` and
 * `site-chrome.css`, so the cascade position is preserved. Moving this link
 * earlier would silently break the eyebrow pills.
 *
 * WHAT IS NOT HERE. The five blocks hold 39 rules; 17 are ported below and 22
 * were dropped, each because its selector matches no markup anywhere in this
 * repo, or because the markup it needs is chrome BaseLayout replaces or a
 * Webflow artefact the migration deliberately drops. The full list, with the
 * measured page count behind each, is in the PR and on ticket
 * 01KZDY345ETA0FNBVPV0VMX69R.
 *
 * The drop test was "does this selector match markup in any page under
 * `public/` or any file under `src/` today" -- deliberately NOT "does the pilot
 * page use it". This sheet is linked by MarketingLayout, so it serves all 101
 * remaining migrations, and a rule dropped for being unused on page 1 would
 * silently break page 40 with the cause deleted months earlier. Two rules the
 * ticket suggested dropping are kept for exactly that reason; the `[data-link]`
 * one below explains itself.
 *
 * `body { font-smoothing }` and `.w-richtext > *:last-child` are here rather
 * than in `site-chrome.css`, which the 371 live blog pages also load. Both
 * would genuinely apply to the blog -- PostLayout wraps every post body in
 * `.w-richtext` -- so that placement was a real decision and it is recorded on
 * the ticket. Short version: both sheets fix the migration identically, and
 * only this one leaves the blog alone.
 */

/* ---------------------------------------------------------------------------
 * Eyebrow pills and the heading highlight
 *
 * This is the block worth understanding, because it is the largest single
 * contributor to a migrated page's pixel diff and neither half is what it
 * looks like.
 *
 * The `-inner` rules are additive: the bundle defines `.eyebrow-tag_light-inner`
 * and `.eyebrow-tag_dark-inner` with colour, gap and padding but NO border at
 * all, so without these the computed `border-style` is `none` and each pill
 * renders 123x28 instead of 125x30.
 *
 * The `-outer` rules are a CORRECTION, not an addition. The bundle already
 * says `border-radius: .4375px` -- px, not rem, a Webflow unit slip -- which
 * is 0.4375 of one pixel, i.e. visually square. These restate it as
 * `0.4375rem` at equal specificity (0,1,0 both), so they win only by coming
 * later in the cascade. That is the collision the file header is about.
 * ------------------------------------------------------------------------- */

.eyebrow-tag_purple-outer {
  border-radius: 0.4375rem;
}

.eyebrow-tag_purple-inner {
  border: 1px solid;
  border-image: linear-gradient(90deg, rgba(198,176,255,0.03) 0%, rgba(227,219,255,1) 47%, rgba(198,176,255,0.03) 100%) 1;
}

.eyebrow-tag_dark-inner {
  border: 1px solid;
  border-image: linear-gradient(90deg, rgba(198,176,255,0.03) 0%, rgba(97,74,179,1) 47%, rgba(198,176,255,0.03) 100%) 1;
}

.eyebrow-tag_dark-outer {
  border-radius: 0.4375rem;
}

.eyebrow-tag_light-inner {
  border: 1px solid;
  border-image: linear-gradient(270deg, rgba(198, 176, 255, 0.03) 0%, rgba(97, 105, 229, 0.17) 53%, rgba(197.64, 175.88, 255, 0.04) 100%) 1;
}

.eyebrow-tag_light-outer {
  border-radius: 0.4375rem;
}

/* Same gradient as `.eyebrow-tag_light-inner`, on 9 pages. Kept verbatim
 * rather than factored into a shared selector: the two are independent in the
 * source and pairing them would make a future edit to one silently change the
 * other. */
.ds2-heading-highlight {
  border: 1px solid;
  border-image: linear-gradient(270deg, rgba(198, 176, 255, 0.03) 0%, rgba(97, 105, 229, 0.17) 53%, rgba(197.64, 175.88, 255, 0.04) 100%) 1;
}

/* On 21 pages. THE `border-image` FROM THE ORIGINAL IS DELIBERATELY GONE, AND
 * THIS IS BEHAVIOUR-PRESERVING. The source declares:
 *
 *   border: 2px solid;
 *   border-image: linear-gradient(90deg, rgba(225, 212, 255, 0.35) 0%, rgba(204, 185, 255, 0) 1);
 *
 * The gradient's last colour stop is positioned `1` -- a unitless number,
 * which is not a valid <length-percentage>. So the gradient is invalid, the
 * whole `border-image` declaration is dropped at parse time, and `border-image`
 * keeps its initial value of `none` in every browser. What actually renders on
 * those 21 pages today is a 2px solid currentColor border and nothing else,
 * which is exactly what this rule declares.
 *
 * Do not "fix" the gradient. Making it valid would put a gradient border on 21
 * pages that have never had one -- a visible change, not a repair. */
.hh-graphic_layer-1 {
  border: 2px solid;
}

/* ---------------------------------------------------------------------------
 * Type and rich text
 * ------------------------------------------------------------------------- */

/* Make text look crisper and more legible in all browsers.
 *
 * The bundle antialiases only `[class^="w-icon-"]`, never body text, so this
 * is genuinely additive on a marketing page. It is also what makes every glyph
 * on the page differ when it is missing, which is why it shows up in a pixel
 * diff everywhere at once rather than in one component.
 *
 * The source also declares `font-smoothing: antialiased`, unprefixed. That is
 * not a property in any spec or engine -- it is dropped at parse time
 * everywhere -- so it is not carried forward. No behaviour change.
 *
 * On why this is not in `site-chrome.css` (which the blog also loads): see the
 * ticket. It is a decision, and the answer is "not in this PR". */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Rich text adjustments. `FaqAccordion` renders answers into `.w-richtext`, so
 * this is live on any migrated page with an FAQ. `PostLayout.astro` line 190
 * also wraps every blog post body in `.w-richtext`, which is precisely why
 * this rule is here and not in `site-chrome.css` -- see the ticket. */
.w-richtext > *:last-child {
  margin-bottom: 0;
}

/* `<details>`/`<summary>` is how `FaqAccordion` renders, following the nav's
 * precedent of no JS. `site-chrome.css` already hides this pseudo-element but
 * scopes it to `.nav-mobile summary`, so the FAQ summaries are not covered by
 * it. Kept unscoped, as the source has it. */
summary::-webkit-details-marker {
  display: none;
}

/* ---------------------------------------------------------------------------
 * Carousels
 * ------------------------------------------------------------------------- */

/* Suppresses swiper's own arrow glyphs in favour of the ds2 arrow markup.
 * Inert today only because no migrated page loads swiper's stylesheet -- that
 * is the disclosed regression on the pilot PR, and the day a sibling adds
 * `swiper-bundle.min.css` back this rule is what stops two arrows appearing.
 * 49 pages carry `.swiper-button-next` markup. */
.swiper-button-next:after,
.swiper-button-prev:after {
  display: none !important;
}

/* The edge fade on a masked strip. `TestimonialsCarousel.astro` emits
 * `by-mask-element="x"` and recorded keeping it; until this file existed there
 * was no rule behind that attribute on any page, so the attribute was inert
 * everywhere. Restoring this is what makes that component's decision real.
 *
 * Prefixed-only, as the source has it. Adding the unprefixed `mask-image`
 * would newly enable the fade in Firefox, where it has never happened -- a
 * change, not a port. Left alone deliberately. */
@media screen and (min-width: 992px) {
  [by-mask-element='x'] {
    -webkit-mask-image:
      linear-gradient(
        90deg,
        transparent,
        #000 20%,
        #000 80%,
        transparent
      )
  }
}

/* ---------------------------------------------------------------------------
 * Desktop and above
 * ------------------------------------------------------------------------- */

/* Card-button hover. The bundle has no `.ds2-button.is-card` rule at all, so
 * without this the 37 card buttons on the pilot page alone have no hover
 * state. Pointer-only by breakpoint, as the source has it. */
@media screen and (min-width: 992px) {
  .ds2-button.is-card:hover {
    background-color: hsla(248.5714285714286, 23.33%, 23.53%, 1.00);
    color: var(--ds2-colours--white);
  }

  .ds2-button.is-card:hover .ds2-button_icon.dark.is-card {
    background-color: hsla(248.5714285714286, 0.00%, 100.00%, 0.12);
  }
}

/* ---------------------------------------------------------------------------
 * Narrower cases, kept because their markup exists on pages not yet migrated
 * ------------------------------------------------------------------------- */

/* Hides the empty CMS placeholder links Webflow emits for unbound collection
 * items. This one is easy to mistake for dead code and is not: 24 pages carry
 * `data-link` anchors, 319 of them in total, and 185 have `href="#"` or no
 * href and are hidden by this rule right now. Dropping it would make 185
 * placeholder cards appear across those pages the day they are migrated.
 * Distinct from the pilot's hidden integration cards, which are hidden by
 * `.w-condition-invisible` in the bundle, not by this. */
[data-link][href*="#"],
[data-link][href=""],
[data-link]:not([href]) {
  display: none;
}

/* Page-specific -- `.ds2_hero-comp.aws` exists only on
 * `public/metomic-on-aws-marketplace/`. Kept anyway: one page's hero silently
 * shifting at 992-1200px when it is migrated, with the cause deleted months
 * earlier in an unrelated PR, is exactly the failure this ticket exists to
 * stop. Five lines is a cheap insurance premium. */
@media screen and (max-width: 1200px) and (min-width: 992px) {
  .ds2_hero-comp.aws {
    inset: -105% -95% 0% auto;
  }
}
