/* rf-case-results.css
   Enqueued by rf-case-results.php on the results page and on every case study.

   WHY THIS IS A FILE AND NOT GLOBAL CUSTOM CSS:
   Avada's Global Custom CSS is not delivered to this custom post type's single
   template. Rules placed there silently do nothing on a case study page, and every
   var(--rfr-*) defined in the RFR-RESULTS-CSS block resolves to nothing as well,
   which is why the case study H1 rendered at the theme's 60px white instead of the
   intended dark serif. This file therefore declares its own variables and is loaded
   directly, so it cannot be missed. */

:root{
  --rfr-ink:#20242f;
  --rfr-ink-4:#3c4255;
  --rfr-gold-deep:#b3884f;
  --rfr-gold-ink:#7d5f36;
  --rfr-line:#e2e4ea;
  --rfr-line-2:#e6e8ee;
  --rfr-muted:#5b6170;
  --rfr-muted-2:#6b7080;
  --rfr-paper:#ffffff;
}

/* ------------------------------------------------------------------ the grid */
/* The original cards were Avada 1/3 columns, so the card box and the 3-up layout
   came from Avada. The shortcode renders plain elements, so that layer lives here. */

.rfr-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:28px;
  align-items:stretch;
}
.rfr-card{
  display:flex;
  flex-direction:column;
  background:var(--rfr-paper);
  border:1px solid var(--rfr-line);
  padding:20px 22px;
  transition:border-color .18s;
}
.rfr-card:hover{ border-color:var(--rfr-gold-deep); }

.rfr-c-study{ margin-top:14px; }
.rfr-c-study p{ margin:0; }

.rfr-results-head .rfr-filters{ margin-bottom:10px; }
.rfr-results-head .rfr-count p{ margin:0 0 26px; }

/* A paragraph inside the card computes to display:flex from an upstream rule, which
   collapses the block-level track to 0 width because both of its children are
   absolutely positioned. .rfr-c-foot p stays flex on purpose: that is what pushes
   venue and year to opposite ends. */
.rfr-c-mult p{ display:block; }
.rfr-track{ width:100%; display:block; }

@media (max-width:1024px){ .rfr-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px; } }
@media (max-width:640px){
  .rfr-grid{ grid-template-columns:1fr; gap:18px; }
  .rfr-card{ padding:18px; }
}

/* -------------------------------------------------------------- case studies */
/* Colours are literal here, not var(--awb-*), because the Avada palette variables
   are not guaranteed on this template either. */

.single-rf_case_result .rfr-cs-wrap{
  max-width:760px;      /* a readable measure; the theme container is 1200 */
  margin-left:auto;
  margin-right:auto;
}

.rfr-cs-back{ margin:0 0 26px; }
.rfr-cs-back a{
  font-size:.76rem; letter-spacing:.09em; text-transform:uppercase; font-weight:600;
  color:var(--rfr-muted-2); text-decoration:none; border-bottom:1px solid transparent;
}
.rfr-cs-back a:hover{ color:var(--rfr-ink); border-bottom-color:var(--rfr-ink); }

.single-rf_case_result h1.rfr-cs-h1{
  font-family:'DM Serif Display','DM Serif Display Fallback',Georgia,serif;
  font-size:clamp(30px,3.2vw,46px);
  line-height:1.14;
  color:var(--rfr-ink);
  margin:0 0 24px;
  text-transform:none;
  letter-spacing:0;
}

.rfr-cs-lede{
  /* px, not rem: Avada's root font-size is ~14.8px, so rem values compute ~12%
     smaller than intended and long-form copy ends up too tight to read. */
  font-size:18.5px; line-height:1.72; color:var(--rfr-ink);
  padding-bottom:22px; margin:0 0 28px;
  border-bottom:1px solid var(--rfr-line-2);
}
.rfr-cs-lede strong{ font-weight:700; }

.single-rf_case_result .rfr-cs-wrap h2{
  font-family:'DM Serif Display','DM Serif Display Fallback',Georgia,serif;
  font-size:clamp(21px,2.1vw,27px);
  line-height:1.22;
  color:var(--rfr-ink);
  margin:40px 0 14px;
  text-transform:none;
  letter-spacing:0;
}
.single-rf_case_result .rfr-cs-wrap p{
  font-size:17px; line-height:1.78; color:#3f4557; margin:0 0 18px;
}
.single-rf_case_result .rfr-cs-wrap a:not(.rfr-cs-back a){
  color:var(--rfr-gold-ink);
  border-bottom:1px solid rgba(125,95,54,.42);
  text-decoration:none;
}
.single-rf_case_result .rfr-cs-wrap a:hover{ color:var(--rfr-ink); border-bottom-color:var(--rfr-ink); }

.rfr-cs-disc{
  margin-top:38px; padding-top:18px; border-top:1px solid var(--rfr-line-2);
  font-size:13.5px !important; line-height:1.62 !important; color:var(--rfr-muted-2) !important;
}

/* Foot CTA back to the full list, so a case study is never a dead end. */
.rfr-cs-more{
  margin-top:34px; padding-top:22px; border-top:1px solid var(--rfr-line-2);
}
.rfr-cs-more a{
  display:inline-block;
  font-size:.8rem; letter-spacing:.09em; text-transform:uppercase; font-weight:700;
  color:var(--rfr-gold-ink); text-decoration:none;
  border:1px solid rgba(125,95,54,.42); padding:11px 18px;
}
.rfr-cs-more a:hover{ background:rgba(200,157,102,.13); }

@media (max-width:640px){
  .single-rf_case_result .rfr-cs-wrap p{ font-size:16.5px; }
  .rfr-cs-lede{ font-size:17.5px; }
}

/* ------------------------------------------------------------------- focus */
/* Keyboard users had no visible focus ring: the base sheet's .rfr-storylink
   :focus-visible rule resolves var(--awb-color4), which is not defined on every
   template, and the filter buttons had no focus rule at all. Literal colour, and
   both :focus-visible and :focus so it cannot silently resolve to nothing. */
.rfr-filters button:focus-visible,
.rfr-grid a:focus-visible,
.rfr-cs-wrap a:focus-visible,
.rfr-cs-more a:focus-visible{
  outline:3px solid #b3884f;
  outline-offset:3px;
}
/* Fallback for engines without :focus-visible support. */
.rfr-filters button:focus,
.rfr-grid a:focus,
.rfr-cs-wrap a:focus{
  outline:3px solid #b3884f;
  outline-offset:3px;
}
.rfr-filters button:focus:not(:focus-visible),
.rfr-grid a:focus:not(:focus-visible),
.rfr-cs-wrap a:focus:not(:focus-visible){ outline:none; }

/* -------------------------------------------------------------- filter bar */
/* The base sheet targets ".rfr-filters p" because Avada wrapped the buttons in a
   paragraph. The shortcode emits them directly, so that flex layout never matched
   and the buttons were only separated by incidental whitespace. */
.rfr-filters{
  display:none;              /* revealed by the filter script, see below */
  gap:10px;
  flex-wrap:wrap;
  margin:34px 0 0;
}
/* Without JavaScript the buttons would render but do nothing. The script adds
   .is-ready once it has bound, so a dead control is never shown. The grid itself is
   fully server-rendered and already in descending order, so nothing is lost. */
.rfr-filters.is-ready{ display:flex; }

/* ------------------------------------------------- signature case meta row */
/* The base sheet lays this row out via ".rfr-sig-meta p", because Avada used to wrap the
   content in a paragraph. Now that the row comes from [case_meta] there is no paragraph,
   so the layout is applied to the container. display:contents on any nested <p> means the
   spans still participate in this flex if a wrapper ever reappears. */
.rfr-sig-meta{
  display:flex;
  gap:20px 26px;
  flex-wrap:wrap;
}
.rfr-sig-meta > p{ display:contents; }

/* ------------------------------------------------------- case study hero */
/* Mirrors the practice-area hero (same gradient, same serif, white on dark) at a
   smaller scale, and leads with the recovery rather than the headline: on a results
   page the number is why anyone clicked. A contained panel rather than a full-bleed
   band, matching the signature block on the results page. */

.rfr-cs-hero{
  background:linear-gradient(135deg,#23282f 0%,#4e556b 100%);
  color:#fff;
  padding:44px 0 40px;
  margin:0 0 40px;
}
/* Inner content shares the body's measure so the hero text and the article text sit on
   the same left edge. The panel itself still spans the full container. */
.rfr-cs-hero-in{
  /* 800 = the 760 body measure plus 20px of padding either side, so the hero text
     and the article text land on exactly the same left edge. */
  max-width:800px;
  margin:0 auto;
  padding:0 20px;
  box-sizing:border-box;
}
.rfr-cs-eyebrow{
  margin:0 0 14px !important;
  font-size:12px !important;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-weight:700;
  color:#c8a06a !important;
  line-height:1.5 !important;
}
.rfr-cs-amt{
  font-family:'DM Serif Display','DM Serif Display Fallback',Georgia,serif;
  font-size:clamp(34px,4.6vw,56px) !important;
  line-height:1.02 !important;
  color:#fff !important;
  margin:0 0 12px !important;
}
.single-rf_case_result h1.rfr-cs-h1{
  font-family:'DM Serif Display','DM Serif Display Fallback',Georgia,serif;
  font-size:clamp(20px,2.1vw,27px);
  line-height:1.26;
  color:rgba(255,255,255,.93);
  font-weight:400;
  margin:0;
  text-transform:none;
  letter-spacing:0;
  max-width:44ch;
}
.rfr-cs-meta{
  display:flex;
  gap:18px 30px;
  flex-wrap:wrap;
  margin-top:28px;
  padding-top:22px;
  border-top:1px solid rgba(255,255,255,.15);
}
.rfr-cs-meta span{
  font-size:15px;
  color:#fff;
  font-weight:600;
}
.rfr-cs-meta em{
  display:block;
  font-style:normal;
  font-size:12px;
  font-weight:400;
  color:rgba(255,255,255,.62);
  margin-bottom:4px;
  letter-spacing:.04em;
}

@media (max-width:640px){
  .rfr-cs-hero{ padding:30px 0 28px; margin-bottom:30px; }
  .rfr-cs-hero-in{ padding:0 22px; }
  .rfr-cs-meta{ gap:14px 22px; margin-top:22px; padding-top:18px; }
  .rfr-cs-meta span{ font-size:14px; }
}