/*
 * The case studies, brought onto the house style.
 *
 * WHY THIS IS AN OVERRIDE AND NOT A REBUILD
 *
 * The case-study markup is already good. It is semantic, hand-written
 * `cs-*` HTML — a hero, an at-a-glance panel, a stat bar, prose sections, a
 * quote, numbered steps, value cards, a comparison table and a closing CTA —
 * and it is IDENTICAL in shape across all eight pages. Nothing about the
 * content or the structure is the problem.
 *
 * What made them look like a different site is a 16kB inline stylesheet,
 * printed by a WPCode snippet, carrying its own private design system:
 * `--navy`, `--blue`, `--light-gray`, white section bands, 8px radii, a
 * 64px hero. It predates the house style and knows nothing about it.
 *
 * So this file re-skins that markup rather than replacing it. Three reasons,
 * and the third is the one that decided it:
 *
 *  1. Zero content risk. Re-theming by CSS cannot lose a sentence, a metric or
 *     a quote, which is the single largest hazard in the whole job. The
 *     rendered text before and after is byte-identical and that is provable.
 *  2. Nine pages for one file. The index and all eight case studies share the
 *     markup, so they share the fix.
 *  3. Editing the snippet is genuinely dangerous. `WPCode_Snippet::save()`
 *     UNSLASHES snippet code, and a snippet that stops parsing takes Rank
 *     Math's @graph off EVERY page on the site with no visible error. That trap
 *     has already cost this project a session. Not touching it is worth a great
 *     deal.
 *
 * HOW IT WINS
 *
 * The snippet marks nearly every declaration `!important`, so ordinary
 * overrides lose. Two techniques beat it, both already used elsewhere in this
 * theme:
 *
 *  - Its palette is custom properties declared on `:root`. `!important` on a
 *    property does not decide which value a `var()` resolves to; the variable's
 *    own cascade does. Redeclaring those variables on `body.sr-case-study`
 *    beats `:root` on specificity, so every `var(--light-gray)` in the snippet
 *    silently becomes a house-style colour. This is exactly what
 *    elementor-tokens.css does to the Elementor Global Kit.
 *  - Where the snippet used a literal instead of a variable, the rule is
 *    restated here at higher specificity with `!important`. That list is short
 *    and is called out below.
 *
 * Everything is scoped under `body.sr-case-study`, which inc/case-study.php
 * adds only to page 97 and its children. The file is inert everywhere else.
 */

/* ---------------------------------------------------------------------------
   1. The palette rebind
   ------------------------------------------------------------------------ */

/*
 * The snippet's variables, repointed at the house style.
 *
 * `--white` is deliberately NOT remapped. It does double duty in the snippet:
 * it is the ink on dark sections AND the background of light ones. Remapping it
 * would fix the backgrounds and destroy the text in the same stroke. The
 * backgrounds are handled individually in section 2 instead, which is longer
 * but is the only version that is correct.
 */
body.sr-case-study {
  --deep-navy: var(--srh-navy-deep);
  --navy: var(--srh-navy);
  --light-gray: transparent;
  --blue: var(--srk-accent-live, var(--srh-accent));
  --blue-hover: var(--srh-pale);
  --border: var(--srh-hairline);
  --text-muted: var(--srh-ink-soft);
  --accent-light: var(--srk-accent-live, var(--srh-accent));
  --section-dark: var(--srh-navy-deep);
}

/* ---------------------------------------------------------------------------
   2. The bands
   ------------------------------------------------------------------------ */

/*
 * Every section becomes transparent so the house-style ground, glow and glyph
 * grid show through continuously, exactly as they do on the product pages. The
 * page reads as one travelling surface rather than a stack of cards on white.
 *
 * The doubled class is not a typo. `body.sr-case-study .cs-hero` is (0,2,1);
 * the snippet's `.cs-hero` with !important needs to be beaten on both
 * specificity and importance, so these carry !important too.
 */
body.sr-case-study .cs-hero,
body.sr-case-study .cs-section-light,
body.sr-case-study .cs-section-white,
body.sr-case-study .cs-stats-bar,
body.sr-case-study .cs-at-glance,
body.sr-case-study .cs-footer-section {
  background-color: transparent !important;
  background-image: none !important;
  color: var(--srh-ink) !important;
}

body.sr-case-study .cs-hero {
  padding: clamp(96px, 12vh, 160px) 0 clamp(48px, 7vh, 90px);
}

body.sr-case-study .cs-section-white,
body.sr-case-study .cs-section-light {
  padding-block: clamp(40px, 6vh, 88px);
}

/* ---------------------------------------------------------------------------
   3. Type
   ------------------------------------------------------------------------ */

/*
 * Sizes come off the scene kit's scale so a case study sets type identically to
 * a product page. The snippet's 64px hero is a literal and has to be restated.
 */
body.sr-case-study .cs-hero h1 {
  font-size: var(--srk-display-l) !important;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--srh-pale) !important;
  text-wrap: balance;
}

body.sr-case-study .cs-hero h1 span {
  color: var(--srk-accent-live, var(--srh-accent)) !important;
}

body.sr-case-study .cs-hero-subtitle {
  font-size: var(--srk-body-l) !important;
  color: var(--srh-ink) !important;
  max-width: var(--srk-measure);
  margin-inline: auto;
}

body.sr-case-study .cs-section-heading {
  font-size: var(--srk-display-m) !important;
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--srh-pale) !important;
  text-wrap: balance;
}

/*
 * Body copy. The snippet sets rgba(0, 0, 0, 0.75) — dark ink for a white band —
 * as a literal in four places, so a variable rebind cannot reach it.
 */
body.sr-case-study .cs-section-text,
body.sr-case-study .cs-section-text p,
body.sr-case-study .cs-section-content p,
body.sr-case-study .cs-step-text,
body.sr-case-study .cs-value-content p,
body.sr-case-study .cs-report-quote,
body.sr-case-study .cs-cta-subtext {
  color: var(--srh-ink) !important;
}

body.sr-case-study .cs-section-content h3,
body.sr-case-study .cs-value-content h3 {
  color: var(--srh-pale) !important;
}

/* ---------------------------------------------------------------------------
   4. Panels: at-a-glance, stats, steps, value cards
   ------------------------------------------------------------------------ */

/*
 * All four take the scene kit's card treatment, so a case study's furniture
 * matches a product page's `.srk-card` without sharing its class name.
 */
body.sr-case-study .cs-glance-item,
body.sr-case-study .cs-step-card,
body.sr-case-study .cs-value-card,
body.sr-case-study .cs-report-box {
  background-color: rgba(10, 36, 114, 0.42) !important;
  border: 1px solid rgba(77, 138, 255, 0.22) !important;
  border-radius: 18px !important;
  backdrop-filter: blur(6px);
  box-shadow: none !important;
}

body.sr-case-study .cs-glance-label,
body.sr-case-study .cs-stat-label {
  color: var(--srk-accent-live, var(--srh-accent)) !important;
}

/*
 * The eyebrow treatment — uppercase, wide tracking — is for SHORT labels only.
 *
 * `.cs-glance-label` is "Client", "Region", "Industry", and the snippet already
 * set it uppercase, so nothing changes there. `.cs-stat-label` is a whole
 * sentence: "Annual Retail Losses from Failed Age-Gated Transactions". Setting
 * that uppercase was a real mistake, caught by diffing the rendered text against
 * the pre-rebuild capture — it was the ONLY difference across all nine pages.
 *
 * Two reasons it is wrong and not merely a taste call: a long line in caps is
 * measurably slower to read because word shape is lost, and some screen readers
 * spell out a fully capitalised string letter by letter.
 */
body.sr-case-study .cs-glance-label {
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

body.sr-case-study .cs-glance-value,
body.sr-case-study .cs-stat-number {
  color: var(--srh-pale) !important;
}

body.sr-case-study .cs-stat-number {
  font-size: var(--srk-display-s) !important;
}

/*
 * The step number is the snippet's one solid brand disc. It becomes the live
 * accent, with ink computed from that same value so the digit stays legible
 * whatever hue the journey is currently on — the rule the kit's primary button
 * already follows.
 */
body.sr-case-study .cs-step-number {
  background: var(--srk-accent-live, var(--srh-accent)) !important;
  color: color-mix(in srgb, var(--srk-accent-live, var(--srh-accent)) 18%, #01120b) !important;
}

/* ---------------------------------------------------------------------------
   5. The quote
   ------------------------------------------------------------------------ */

body.sr-case-study .cs-quote-box {
  background-color: rgba(234, 240, 255, 0.05) !important;
  border-left: 3px solid var(--srk-accent-live, var(--srh-accent)) !important;
  border-radius: 0 18px 18px 0 !important;
}

body.sr-case-study .cs-quote-text {
  color: var(--srh-pale) !important;
  font-size: var(--srk-body-l) !important;
}

body.sr-case-study .cs-quote-author {
  color: var(--srh-ink-soft) !important;
}

/* ---------------------------------------------------------------------------
   6. The comparison table
   ------------------------------------------------------------------------ */

/*
 * Tables stay real tables — they are the part of a case study most likely to be
 * extracted and quoted, by a reader or by a crawler. Only the surface changes.
 *
 * The wrapper scrolls on its own so a wide table never makes the page scroll
 * sideways, which is a standing rule in this design and the thing the harness
 * fails a page for.
 */
body.sr-case-study .cs-table-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 18px;
  border: 1px solid var(--srh-hairline);
}

body.sr-case-study .cs-comparison-table {
  background-color: transparent !important;
  color: var(--srh-ink) !important;
}

body.sr-case-study .cs-comparison-table th {
  background-color: rgba(10, 36, 114, 0.55) !important;
  color: var(--srh-pale) !important;
  border-color: var(--srh-hairline) !important;
}

body.sr-case-study .cs-comparison-table td {
  color: var(--srh-ink) !important;
  border-color: var(--srh-hairline) !important;
}

body.sr-case-study .cs-comparison-table tr:nth-child(even) {
  background-color: rgba(234, 240, 255, 0.04) !important;
}

/* ---------------------------------------------------------------------------
   7. Links and buttons
   ------------------------------------------------------------------------ */

body.sr-case-study .cs-hero a,
body.sr-case-study .cs-section-light a,
body.sr-case-study .cs-section-white a,
body.sr-case-study .cs-footer-section a {
  color: var(--srk-accent-live, var(--srh-accent)) !important;
}

body.sr-case-study .cs-hero a:hover,
body.sr-case-study .cs-section-light a:hover,
body.sr-case-study .cs-section-white a:hover,
body.sr-case-study .cs-footer-section a:hover {
  color: var(--srh-pale) !important;
}

/* The two buttons become scene-kit pills. */
body.sr-case-study .cs-hero a.cs-hero-button,
body.sr-case-study .cs-hero a.cs-hero-button:hover,
body.sr-case-study .cs-hero a.cs-hero-btn,
body.sr-case-study .cs-hero-content a.cs-hero-btn {
  border-radius: 999px !important;
  border: 1px solid rgba(234, 240, 255, 0.32) !important;
  color: var(--srh-pale) !important;
  background: transparent !important;
  padding: 15px 28px !important;
}

body.sr-case-study .cs-hero a.cs-hero-button:hover,
body.sr-case-study .cs-hero a.cs-hero-btn:hover,
body.sr-case-study .cs-hero-content a.cs-hero-btn:hover {
  border-color: var(--srk-accent-live, var(--srh-accent)) !important;
  background: transparent !important;
}

body.sr-case-study .cs-footer-section a.cs-cta-button,
body.sr-case-study .cs-footer-section a.cs-cta-button:hover {
  background: var(--srk-accent-live, var(--srh-accent)) !important;
  color: color-mix(in srgb, var(--srk-accent-live, var(--srh-accent)) 18%, #01120b) !important;
  border-radius: 999px !important;
  border: 0 !important;
  padding: 15px 28px !important;
}

body.sr-case-study .cs-back-link {
  color: var(--srh-ink-soft) !important;
}

body.sr-case-study .cs-back-link:hover {
  color: var(--srk-accent-live, var(--srh-accent)) !important;
}

/* ---------------------------------------------------------------------------
   8. The index listing
   ------------------------------------------------------------------------ */

body.sr-case-study .cs-card {
  background-color: rgba(10, 36, 114, 0.42) !important;
  border: 1px solid rgba(77, 138, 255, 0.22) !important;
  border-radius: 18px !important;
  backdrop-filter: blur(6px);
}

body.sr-case-study .cs-card h3 {
  color: var(--srh-pale) !important;
}

body.sr-case-study .cs-card p {
  color: var(--srh-ink) !important;
}

/*
 * The listing's call to action.
 *
 * The snippet paints it as a solid `#010ED0` rectangle with a 4px radius — the
 * one element on the re-themed index that still reads as the old design system,
 * and the most visible, since it repeats nine times. It becomes a scene-kit
 * pill on the live accent, with ink computed from the same value so the label
 * stays legible whatever hue the journey is on.
 */
body.sr-case-study .cs-card a.cs-card-link,
body.sr-case-study a.cs-card-link {
  background-color: var(--srk-accent-live, var(--srh-accent)) !important;
  color: color-mix(in srgb, var(--srk-accent-live, var(--srh-accent)) 18%, #01120b) !important;
  border-radius: 999px !important;
  padding: 12px 24px !important;
  font-size: var(--srk-body) !important;
}

body.sr-case-study .cs-card a.cs-card-link:hover,
body.sr-case-study a.cs-card-link:hover {
  background-color: var(--srh-pale) !important;
  color: var(--srh-navy-deep) !important;
}

/* ---------------------------------------------------------------------------
   9. Full-bleed correction
   ------------------------------------------------------------------------ */

/*
 * The snippet full-bleeds the hero with `margin-left: calc(-50vw + 50%)` and
 * `width: 100vw`. `100vw` INCLUDES the scrollbar gutter, so on any desktop
 * browser that reserves one the band is a scrollbar's width too wide and the
 * page gains a horizontal scroll — which the harness fails outright.
 *
 * A second override snippet already tries to fix this by clamping the band to
 * 1280px, but it does so with `!important` on max-width while leaving the
 * negative margin in place, which just moves the problem. Now that the bands
 * are transparent there is nothing to bleed, so the whole technique is retired.
 */
body.sr-case-study .cs-hero,
body.sr-case-study .cs-section-light,
body.sr-case-study .cs-stats-bar,
body.sr-case-study .cs-footer-section {
  margin-left: auto !important;
  margin-right: auto !important;
  width: 100% !important;
  max-width: 1180px !important;
}

/* ---------------------------------------------------------------------------
   10. Reduced motion
   ------------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  body.sr-case-study .cs-hero a,
  body.sr-case-study .cs-card a.cs-card-link {
    transition: none !important;
  }
}

/* ---------------------------------------------------------------------------
   11. The hero banner
   ------------------------------------------------------------------------ */

/*
 * `.shr-hero-banner` is the case study's REAL hero — the eyebrow, the client
 * name, the standfirst and the demo CTA. It comes from a different snippet
 * again, with a third private palette: a hard `#0a2472 → #010ED0` diagonal
 * gradient, a 46px title and an 8px radius.
 *
 * That gradient is the single loudest thing on the page and the reason a case
 * study reads as a stranger beside a product page. It becomes a card on the
 * house-style ground: the ground and glow show through, the eyebrow takes the
 * live accent, and the CTA becomes a pill.
 *
 * Note `.cs-hero` further up the page carries only a tagline and a duplicate
 * "Book a Demo". The duplication is CONTENT, not styling, so it is left alone
 * and logged in VERIFY.md rather than quietly deleted.
 */
body.sr-case-study .shr-hero-banner {
  background: rgba(10, 36, 114, 0.42) !important;
  background-image: none !important;
  border: 1px solid rgba(77, 138, 255, 0.22);
  border-radius: 18px;
  backdrop-filter: blur(6px);
  max-width: 1180px;
  padding: clamp(32px, 4vw, 56px);
}

body.sr-case-study .shr-hero-banner .shr-hero-eyebrow {
  background: transparent;
  color: var(--srk-accent-live, var(--srh-accent));
  font-size: var(--srk-eyebrow);
  letter-spacing: 0.16em;
  padding: 0;
  margin-bottom: 1.1em;
}

body.sr-case-study .shr-hero-banner h2.shr-hero-title {
  color: var(--srh-pale);
  /* !important because the theme's own h2 rule reaches this element and sets
     --type-h1; without it the title lands on 60px instead of the scale. */
  font-size: var(--srk-display-m) !important;
  line-height: 1.05;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

body.sr-case-study .shr-hero-banner .shr-hero-sub {
  color: var(--srh-ink);
  opacity: 1;
  font-size: var(--srk-body-l);
  max-width: var(--srk-measure);
}

body.sr-case-study .shr-hero-banner .shr-hero-cta {
  background: var(--srk-accent-live, var(--srh-accent));
  color: color-mix(in srgb, var(--srk-accent-live, var(--srh-accent)) 18%, #01120b);
  border-radius: 999px;
  padding: 15px 28px;
  font-size: var(--srk-body);
}

body.sr-case-study .shr-hero-banner .shr-hero-cta:hover {
  background: var(--srh-pale);
  color: var(--srh-navy-deep);
}

/*
 * `.cs-hero` is left as a standfirst under the banner rather than a second
 * hero, since that is all its content actually is.
 */
body.sr-case-study .cs-hero {
  padding: 0 0 clamp(24px, 4vh, 48px) !important;
  text-align: left;
}

body.sr-case-study .cs-hero-content {
  padding: 0 clamp(16px, 3vw, 40px);
  max-width: 1180px;
  text-align: left;
}

body.sr-case-study .cs-hero .cs-hero-subtitle {
  margin-inline: 0;
}

/* ---------------------------------------------------------------------------
   12. The visually-hidden heading
   ------------------------------------------------------------------------ */

/*
 * Carries the <h1> that inc/case-study.php supplies.
 *
 * The theme already has a visually-hidden class, but it is declared as
 * `.sr-footer .sr-vh` and does nothing outside the footer. Widening that
 * selector would change what it reaches on every page, so this file declares
 * its own, scoped like everything else here.
 *
 * `clip-path` as well as the legacy `clip`, because `clip` is deprecated and
 * `clip-path` alone is not honoured by every screen reader's rendering path.
 */
.sr-case-study .sr-cs-vh {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  white-space: nowrap;
  border: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
}

/* ---------------------------------------------------------------------------
   13. Measure
   ------------------------------------------------------------------------ */

/*
 * The snippet sets no max-width on prose, so at 1280px a paragraph runs the full
 * 1200px of the container — roughly 150 characters a line, against the 62ch the
 * rest of the site holds to. Long measure is the single most common reason a
 * page of text feels like work to read: the eye loses the line on the return
 * sweep.
 *
 * Headings keep the full width, because a display line is scanned rather than
 * read and balancing it across the container is what the hero pages do.
 */
body.sr-case-study .cs-section-text,
body.sr-case-study .cs-section-text p,
body.sr-case-study .cs-section-content > p,
body.sr-case-study .cs-hero-subtitle {
  max-width: var(--srk-measure) !important;
}

body.sr-case-study .cs-stat-number {
  font-size: var(--srk-display-s) !important;
  line-height: 1.05;
}

/* ---------------------------------------------------------------------------
   14. Icons
   ------------------------------------------------------------------------ */

/*
 * The replacement icons, sized into the slots the emoji used to occupy.
 *
 * They take the LIVE accent rather than a fixed colour, so a case study's
 * icons change hue with the journey exactly as its eyebrows, buttons and FAQ
 * markers do. That is the thing an emoji could never do and it is most of why
 * this looks like one site now: nothing on the page is holding a colour of its
 * own.
 */
/*
 * Inline by default. An icon that lands mid-sentence — and several do, in stat
 * labels and callouts — must sit ON the text baseline, not break the line. The
 * dedicated icon slots below opt into block layout explicitly.
 */
.sr-icon {
  display: inline-block;
  vertical-align: -0.15em;
  width: 1em;
  height: 1em;
  color: var(--srk-accent-live, var(--srh-accent));
}

body.sr-case-study .cs-glance-icon,
body.sr-case-study .cs-step-icon,
body.sr-case-study .cs-value-icon {
  font-size: 26px;
  line-height: 1;
  /* The slots were sized for an emoji glyph and inherit its centring. */
  display: flex !important;
  align-items: center;
  justify-content: flex-start;
  margin-bottom: 14px;
}

body.sr-case-study .cs-step-icon {
  justify-content: center;
  font-size: 22px;
}

/* ---------------------------------------------------------------------------
   15. Alignment
   ------------------------------------------------------------------------ */

/*
 * LEFT, not centre.
 *
 * This is the correction that does most for coherence. DigitalMe and
 * ShareRing Link set every heading, standfirst and body paragraph flush left
 * against a wide margin, with the visual to the right. The case-study snippet
 * centres its section headings, its stat bar and its at-a-glance panel — so
 * moving between a product page and a case study, the eye has to re-find the
 * start of every line. Two pages can share a palette and still read as two
 * different sites purely because of this.
 *
 * The stat bar keeps its own internal centring per cell, because a row of
 * numbers is a row of numbers; what changes is that the row itself starts at
 * the left margin rather than floating in the middle of the container.
 */
body.sr-case-study .cs-section-heading,
body.sr-case-study .cs-section-content,
body.sr-case-study .cs-at-glance,
body.sr-case-study .cs-hero-content,
body.sr-case-study .cs-footer-content {
  text-align: left !important;
}

body.sr-case-study .cs-section-content,
body.sr-case-study .cs-at-glance,
body.sr-case-study .cs-stats-container,
body.sr-case-study .cs-footer-content {
  margin-inline: 0 !important;
  max-width: 1180px;
}

body.sr-case-study .cs-stats-bar {
  text-align: left !important;
}

body.sr-case-study .cs-stat {
  text-align: left !important;
}

body.sr-case-study .cs-stats-container {
  justify-content: flex-start !important;
}

/*
 * The step cards keep centred content — they are a numbered row read as a
 * sequence, and centring each cell under its own number is what makes the
 * sequence legible. Only the row's own alignment changes.
 */
body.sr-case-study .cs-steps {
  justify-content: flex-start !important;
}


/* ---------------------------------------------------------------------------
   16. The stat bar
   ------------------------------------------------------------------------ */

/*
 * The last centred block, and the loudest.
 *
 * The snippet full-bleeds this band with `width: 100vw` and a negative margin,
 * fills it with the old `--navy`, then centres a 900px grid inside it and
 * centres every cell within that. Three levels of centring, on the one element
 * that carries the page's hardest numbers.
 *
 * Now it sits in the same 1180px column as everything above it, flush left,
 * with each figure left-aligned under the last — which is how ShareRing Link's
 * own stat wall reads.
 *
 * The `100vw` also has to go regardless of taste: 100vw INCLUDES the scrollbar
 * gutter, so on any desktop browser that reserves one this band is a
 * scrollbar's width too wide and the page gains a horizontal scroll.
 */
body.sr-case-study .cs-stats-bar {
  margin-left: auto !important;
  margin-right: auto !important;
  width: 100% !important;
  max-width: 1180px !important;
  padding: clamp(32px, 5vh, 64px) clamp(16px, 3vw, 40px) !important;
  justify-content: flex-start !important;
  background-color: transparent !important;
}

body.sr-case-study .cs-stats-container {
  text-align: left !important;
  max-width: 1180px !important;
  gap: clamp(24px, 4vw, 56px) !important;
}

body.sr-case-study .cs-stat {
  align-items: flex-start !important;
  max-width: none !important;
}

body.sr-case-study .cs-stat-label {
  text-align: left !important;
}