/* ==========================================================================
   social-proof.css  --  EDJ cluster, 2026-08-26
   ==========================================================================

   The five EDJ themes (trad-custom, -b, -c) are independent forks with their
   own bespoke style.css. Dropping the pack's 53KB redesign.css on top of them
   would restyle the whole site, so this file carries ONLY what #social-proof
   needs, and it is enqueued AFTER style.css.

   Two halves, and the order between them matters:

   1. The unscoped .gr-* base rules, verbatim from the pack's style.css. They
      are left UNSCOPED on purpose. Scoping them as `#social-proof .gr-score`
      would raise them to (1,1,0), which beats the pack's own
      `.sp-score .gr-score` at (0,2,0) because an ID outranks two classes, and
      the score rail would silently render at the wrong size. Same-specificity
      base rules that lose on source order are exactly what is wanted here.

   2. The pack's redesign.css #social-proof block, verbatim, lines 1089-1397.

   Ostersund's style.css already declares .gr-* for its old #google-reviews
   section. That section is deleted in this same change, and this file loads
   later, so the stale rules are dead either way.

   Source: templates/trad-v4-2026-08-18/{style.css,redesign.css}
   ========================================================================== */

/* ---- 1. base .gr-* rules, from pack style.css 707-727 ---- */
.gr-header { display: flex; align-items: center; gap: 32px; margin-bottom: 40px; flex-wrap: wrap; }
.gr-google-badge { display: flex; align-items: center; gap: 14px; background: #fff; border-radius: 14px; padding: 18px 24px; box-shadow: 0 2px 12px rgba(0,0,0,0.08); flex-shrink: 0; }
.gr-g { width: 44px; height: 44px; background: #4285F4; color: #fff; font-size: 1.4rem; font-weight: 900; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-family: arial, sans-serif; }
.gr-score { font-size: 1.8rem; font-weight: 800; color: #1a1a1a; line-height: 1; }
.gr-stars { color: #fbbc04; font-size: 1.1rem; letter-spacing: 1px; }
.gr-count { font-size: 0.78rem; color: #666; margin-top: 2px; }
.gr-title-block h2 { margin: 0 0 6px; font-size: 1.6rem; color: #1a2e1a; }
.gr-title-block p { margin: 0; color: #555; font-size: 0.95rem; }
.gr-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 32px; }
.gr-card { background: #fff; border-radius: 12px; padding: 22px 20px; box-shadow: 0 2px 14px rgba(0,0,0,0.07); display: flex; flex-direction: column; }
.gr-card-top { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.gr-avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--green); color: #fff; font-size: 1rem; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.gr-name { font-weight: 700; font-size: 0.9rem; color: #1a1a1a; }
.gr-stars-sm { color: #fbbc04; font-size: 0.82rem; letter-spacing: 1px; margin-top: 2px; }
.gr-logo { margin-left: auto; width: 28px; height: 28px; background: #4285F4; color: #fff; font-size: 0.85rem; font-weight: 900; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: arial, sans-serif; flex-shrink: 0; }
.gr-text { font-size: 0.88rem; color: #444; line-height: 1.65; flex: 1; margin: 0 0 12px; font-style: italic; }
.gr-date { font-size: 0.75rem; color: #999; margin-top: auto; }
.gr-cta { text-align: center; }
.gr-cta-link { display: inline-flex; align-items: center; gap: 10px; background: #fff; border: 2px solid var(--green); color: var(--green); font-weight: 700; font-size: 0.95rem; border-radius: 8px; padding: 12px 24px; text-decoration: none; transition: all .2s; }
.gr-cta-link:hover { background: var(--green); color: #fff; }
.gr-g-sm { width: 26px; height: 26px; font-size: 0.85rem; }

@media (max-width: 700px) {
  .gr-cards { grid-template-columns: 1fr; }
  .gr-header { flex-direction: column; gap: 20px; }
}

/* ---- 2. pack redesign.css 1089-1397, verbatim ---- */
/* ==========================================================================
   SOCIAL PROOF — the merged review section
   Markup: parts/social-proof.php   Data: social-proof-data.php
   Locked into the pack 2026-08-22 after shipping on six Veravi sites.
   ==========================================================================

   Replaces #ratings + #google-reviews, which were two adjacent sections
   restating the same two scores, and one of which was Google-branded while
   carrying Reco reviews.

   THE DESIGN IS SUBTRACTION. The first merged version was factually correct
   and still read as chaotic. Rendered and counted: ten white boxes in four
   different shadow/radius/padding treatments stacked vertically, and the fact
   "4,9 / 226 / Reco" stated SIX separate times — claim paragraph, score chip,
   award badge, inside the Reco iframe, twice per card (coloured pill AND a
   "Reco-verifierad kund" footer one line apart), and again on the CTA button.

   So three rules hold this together. Breaking one is how it becomes cluttered
   again:
     1. ONE SURFACE TREATMENT. The review card is the only box in the section.
        Scores, awards and CTAs are bare content on hairline rules.
     2. EACH FACT ONCE.
     3. COLOUR ONLY ON THE PLATFORM MARKS AND THE STARS.

   Measured on the six sites: mobile 1852px -> 1415px, desktop 1096 -> 904.

   DEGRADATION IS AUTOMATIC. There is no google-only or reco-only variant of
   this block and there must not be. The renderer emits fewer elements and the
   rules below narrow: the `+` divider cannot fire on one score, :only-child
   un-stretches it on a phone, the badge rail and the disclosure are simply
   absent, and the per-card source pill is not rendered at all when only one
   platform is claimed (with one source the pill distinguishes nothing and
   becomes the exact per-card repetition this design removed).

   The old #ratings / #google-reviews / .gr-header / .gr-google-badge rules are
   left in style.css ON PURPOSE. They match nothing once a site is on this
   partial, but ~14 other tree sites share this stylesheet lineage and still
   render those sections. Do not delete them from style.css. Everything below
   is scoped to #social-proof or to an .sp-* class that exists only here, so it
   cannot leak into them.
   ========================================================================== */

#social-proof { background: #f7f9f7; padding: 88px 20px; }
#social-proof .wrap { max-width: 1080px; margin: 0 auto; }

/* --- header: the claim on the left, the scores on a hairline rail.
       v1 made each score a white card with a drop shadow, which put two more
       boxes on a page that already had eight. A number this size does not
       need a container to be seen. --- */
.sp-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 48px; flex-wrap: wrap; margin-bottom: 30px;
}
.sp-claim { flex: 1 1 340px; }
.sp-claim h2 {
  margin: 0 0 8px; font-size: 2rem; line-height: 1.15;
  letter-spacing: -0.02em; color: #16281a;
}
.sp-claim p { margin: 0; color: #6b7280; font-size: 0.95rem; line-height: 1.6; max-width: 40ch; }

.sp-scores { display: flex; align-items: stretch; }
/* Dividers via the adjacent-sibling selector, never `border-left` on all plus
   a `:first-child` reset. The reset silently fails the moment anything else is
   the container's first element, and that is exactly what happened to
   .ratings-badges below: it rendered a stray rule to the LEFT of the first
   badge. `x + x` cannot fail that way, and it is also what makes the
   single-platform case free: with one score there is no sibling, so there is
   no divider to suppress. */
.sp-score {
  display: flex; align-items: center; gap: 13px; text-decoration: none;
  padding: 4px 28px 4px 0; background: none; box-shadow: none;
  border-radius: 0; border: 0; transition: opacity .18s;
}
.sp-score + .sp-score { border-left: 1px solid rgba(22,40,26,0.12); padding-left: 28px; }
.sp-score:last-child  { padding-right: 0; }
.sp-score:hover { transform: none; box-shadow: none; opacity: 0.62; }
.sp-score-info { display: flex; flex-direction: column; gap: 2px; }
.sp-score .gr-score {
  font-size: 2.1rem; font-weight: 700; color: #16281a;
  line-height: 1; letter-spacing: -0.03em;
}
/* Size and tracking only. The star COLOUR is owned by the contrast override at
   the bottom of this file (#A66200 !important, measured 4.8:1 on white), which
   beats any specificity here. Do not restate a gold in this block: you will
   either write a dead declaration or, worse, add !important and reintroduce
   the 1.71:1 gold that override exists to kill. */
.sp-score .gr-stars { font-size: 0.8rem; letter-spacing: 0.09em; line-height: 1; }
.sp-score .gr-count { font-size: 0.72rem; color: #66706a; white-space: nowrap; }
/* #8a9089 until 2026-08-26. render-check measured it at 3.09:1 on white, which
   is below AA for 11.5px text, and it is the line that carries the review
   COUNT -- the one number in the score rail a visitor is meant to read.
   #66706a is the same green-grey hue, two steps darker, 5.13:1. */

/* platform marks. These colours are the ONLY brand colour in the section and
   they carry the whole multi-platform argument. Everything else is greyscale
   plus the one dark green. Do not add a third hue for decoration — but DO add
   one here if you add a genuine third platform, keyed to match the array key
   in social-proof-data.php, because the renderer emits .sp-mark-<key>. */
.sp-mark {
  width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.05rem; font-weight: 700; color: #fff; font-family: arial, sans-serif;
}
.sp-mark-google { background: #1A66D9; }
.sp-mark-reco   { background: #1F3D2B; }
/* `.sp-mark.sp-mark-sm`, NOT a bare `.sp-mark-sm`. Bare, it is (0,1,0) --
   exactly the specificity of the `.sp-mark` base rule -- so it wins only on
   source order, and the phone media query below restates `.sp-mark` at 28px
   AFTER this point, which silently defeated it. Measured on all six live
   sites: the CTA marks rendered 28px on mobile, the same size as the headline
   score marks, flattening the hierarchy so a secondary "go read the reviews"
   link carried an icon as loud as the score itself. Doubling the class makes
   it (0,2,0), which a later same-specificity rule cannot beat. Same failure
   mode as the `.trust-item` and `.faq-item` bugs: a modifier that works only
   because of where it happens to sit in the file. */
.sp-mark.sp-mark-sm { width: 20px; height: 20px; font-size: 0.68rem; }

/* --- award badges: an editorial rail, not two more cards. They are
       endorsements, so they should support the claim above rather than
       compete with it. Hairline top and bottom, no box, no shadow.
       width:fit-content, not full bleed: stretched to the 1080px wrap the rail
       left ~250px of empty ruled space each side of two centred badges, which
       reads as an unfinished table rather than a deliberate rule. --- */
#social-proof .ratings-badges {
  display: flex; justify-content: center; align-items: stretch; gap: 0;
  width: fit-content; margin: 0 auto 34px; padding: 0;
  border-top: 1px solid rgba(22,40,26,0.10);
  border-bottom: 1px solid rgba(22,40,26,0.10);
  background: none; box-shadow: none;
}
/* `border: 0`, not `border-left: 0`. The CARDS block earlier in this file puts
   a full border on .rating-badge, so zeroing one side left the other three
   drawing and the rail rendered stray vertical rules around the first badge.
   When you are undoing an inherited box, undo the whole box. */
#social-proof .rating-badge {
  display: flex; align-items: center; gap: 14px; text-decoration: none;
  background: none; box-shadow: none; border-radius: 0; width: auto;
  padding: 16px 34px; border: 0; transition: opacity .18s;
}
#social-proof .rating-badge + .rating-badge {
  border-left: 1px solid rgba(22,40,26,0.10);
}
#social-proof .rating-badge:hover { transform: none; box-shadow: none; opacity: 0.62; }
/* 52px, not 40px. At 40 the concentric-ring artwork turned to grey mush: the
   "4" and the "10" were unreadable, so the section was spending vertical space
   on a decoration nobody could parse.
   NO mix-blend-mode. It used to be here to hide the source JPGs' background,
   but multiply only nulls PURE WHITE, and reco-badge-rekommenderad's field was
   rgb(225,236,242), so it never worked and that badge sat in a visible pale
   blue box. A blend mode also makes the asset depend on the section background
   colour; alpha does not. Badges must be alpha PNGs cut with
   tools/badge-alpha.cjs. */
#social-proof .rating-badge img {
  width: 52px !important; height: 52px !important; object-fit: contain;
}
#social-proof .rating-badge-info  { display: flex; flex-direction: column; gap: 1px; }
#social-proof .rating-badge-label { font-size: 0.82rem; font-weight: 600; color: #16281a; }
#social-proof .rating-badge-sub   { font-size: 0.72rem; color: #8a9089; }

/* --- review cards: one hairline, no shadow, more air, no italic.
       v1 stacked italic + literal quote marks + a drop shadow + a coloured
       pill + a footer on every card. Five decorations on one testimonial. --- */
#social-proof .gr-cards { gap: 20px; margin: 0 0 30px; }
#social-proof .gr-card {
  background: #fff; border: 1px solid #e6eae6; border-radius: 18px;
  box-shadow: none; padding: 26px 24px 28px;
}
#social-proof .gr-card-top { align-items: center; gap: 12px; margin-bottom: 15px; }
#social-proof .gr-avatar {
  width: 38px; height: 38px; font-size: 0.9rem; font-weight: 600;
  background: #1F3D2B; color: #fff; flex-shrink: 0;
}
#social-proof .gr-name { font-size: 0.94rem; font-weight: 600; color: #16281a; }
/* size only; colour is the contrast override, same as .gr-stars above */
#social-proof .gr-stars-sm { font-size: 0.72rem; letter-spacing: 0.08em; }
#social-proof .gr-text {
  font-style: normal; font-size: 0.95rem; line-height: 1.7;
  color: #43483f; margin: 0;
}

/* Per-card source mark. Rendered ONLY on multi-platform sites — see
   parts/social-proof.php. v1 made this a filled pill AND kept a
   "Reco-verifierad kund" footer underneath, so every card claimed its source
   twice, one line apart. The footer is gone and the pill loses its fill: the
   word set in the platform's own colour is enough, and it stays readable as a
   distinction once two platforms sit in the same row. Class is .gr-src-<key>,
   keyed to social-proof-data.php. */
.gr-src {
  margin-left: auto; flex-shrink: 0; align-self: center;
  font-size: 0.63rem; font-weight: 700; letter-spacing: 0.11em;
  text-transform: uppercase; padding: 0; border-radius: 0;
  background: none; line-height: 1; white-space: nowrap;
}
.gr-src-reco   { color: #6f7d72; }
.gr-src-google { color: #7b96c4; }

/* --- verification: the review widget, folded away. Reco-only in practice.
       It is the one element a visitor cannot suspect the client of writing, so
       it is kept. But inline it was actively harmful: an unstyleable iframe
       with its own font, its own multicolour logo, its own info buttons, its
       own carousel that CLIPS mid-word at 1440px, its own duplicate of the
       score, its own competing "Läs alla omdömen" CTA and its own grey legal
       paragraph — 225px restating the number 40px above it.
       Collapsed, the claim is made in text we control and the proof is one
       click away. loading="lazy" inside a closed <details> also means the
       iframe never loads unless a visitor asks for it. On a Google-only site
       this block matches nothing, which is the intended degradation. --- */
.sp-verify { margin: 0 0 26px; text-align: center; }
.sp-verify > summary {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  list-style: none; font-size: 0.82rem; color: #6b7280;
  padding: 9px 16px; border-radius: 999px; transition: background .18s, color .18s;
}
.sp-verify > summary::-webkit-details-marker { display: none; }
.sp-verify > summary::marker { content: ''; }
.sp-verify > summary:hover { background: #edf2ed; color: #1F3D2B; }
.sp-verify > summary .sp-chev { transition: transform .2s; font-size: 0.7rem; }
.sp-verify[open] > summary .sp-chev { transform: rotate(180deg); }
.sp-verify .reco-widget-wrap {
  max-width: 760px; margin: 14px auto 0; background: #fff;
  border: 1px solid #e6eae6; border-radius: 16px; padding: 6px; overflow: hidden;
}

/* --- CTAs: text links, not buttons.
       These say "go read reviews", which is not the money action. As solid
       outlined buttons they out-weighted "Få offert" in the nav. As quiet
       links they still get clicked and stop competing.
       No permanent underline: a border-bottom spans the arrow glyph too, which
       left the rule running past the text with a visible gap under the arrow.
       The platform mark plus bold green already reads as a link. --- */
.sp-cta {
  display: flex; justify-content: center; align-items: center;
  gap: 10px 26px; flex-wrap: wrap;
}
.sp-cta .gr-cta-link {
  display: inline-flex; align-items: center; gap: 9px; margin: 0;
  background: none; border: 0; box-shadow: none; padding: 0; border-radius: 0;
  /* border-radius belongs in this reset. The base .gr-cta-link is a bordered
     button with radius 8; strip the border and background and the radius
     survives on nothing. Invisible, but it is why a bare text link was
     reported as FLUSH pad 0/0 inside a 0px border r8. */
  font-size: 0.9rem; font-weight: 600; color: #1F3D2B;
  text-decoration: none; text-underline-offset: 4px; transition: opacity .18s;
}
.sp-cta .gr-cta-link:hover { text-decoration: underline; opacity: 0.78; }
.sp-cta .gr-cta-link::after {
  content: '\2192'; font-weight: 400; opacity: 0.45;
  transition: transform .18s; margin-left: -2px;
}
.sp-cta .gr-cta-link:hover::after { transform: translateX(3px); }
.sp-leave { text-align: center; margin: 16px 0 0; font-size: 0.78rem; }
.sp-leave a { color: #9aa29a; text-decoration: underline; text-underline-offset: 2px; }
.sp-leave a:hover { color: #1F3D2B; }

/* ---------------- tablet ---------------- */
@media (max-width: 900px) {
  #social-proof { padding: 64px 20px; }
  .sp-header { flex-direction: column; align-items: flex-start; gap: 22px; }
  /* .sp-claim is `flex: 1 1 340px` above, which is a WIDTH basis only while
     .sp-header is a row. Once it becomes a column the 340px is a HEIGHT basis,
     and the claim block reserved 340px to hold 88px of text: 252px of empty
     space, most of a phone screen. Reset the basis WITH the direction change.
     Same shape of bug as the hero `display:contents` one: a rule that is
     correct in one layout context and silently wrong in another. If you touch
     .sp-header's direction, check this too. */
  .sp-claim  { flex: 0 0 auto; width: 100%; }
  .sp-claim h2 { font-size: 1.75rem; }
  .sp-scores { width: 100%; }
  .sp-score  { flex: 1 1 0; min-width: 0; }
  /* one platform: do not stretch a lone score across the full width, it leaves
     the number marooned on the left of an empty rail */
  .sp-score:only-child { flex: 0 0 auto; }
}

/* ---------------- phone ----------------
   Measured, not guessed. An earlier draft stacked .sp-scores vertically and
   the section came out 2380px at 390px, TALLER than the two sections it
   replaced (2168px). Two scores each hold one short line and sit side by side
   comfortably at 358px. If you edit this block, re-measure at 390px. */
@media (max-width: 700px) {
  #social-proof { padding: 48px 16px; }
  .sp-header   { gap: 18px; margin-bottom: 22px; }
  .sp-claim h2 { font-size: 1.5rem; }
  .sp-claim p  { font-size: 0.88rem; }

  .sp-scores { flex-direction: row; gap: 0; flex-wrap: nowrap; }
  .sp-score  { flex: 1 1 0; min-width: 0; padding: 2px 14px; gap: 10px; }
  .sp-score:only-child { flex: 0 0 auto; padding-left: 0; }
  .sp-mark   { width: 28px; height: 28px; font-size: 0.88rem; }
  .sp-score .gr-score { font-size: 1.6rem; }
  .sp-score .gr-stars { font-size: 0.68rem; letter-spacing: 0.05em; }
  /* base rule is nowrap, which overflows once the score is half-width */
  .sp-score .gr-count { font-size: 0.66rem; white-space: normal; line-height: 1.3; }

  /* Award badges stay side by side and let the label wrap, rather than
     stacking. v1 stacked them into two full-width cards, which cost ~230px for
     the least-read element in the section. Side by side at 390px gives each
     ~163px, which fits "RECO Rekommenderad" on two lines cleanly.
     Full width on a phone: fit-content leaves the rail floating narrow. */
  #social-proof .ratings-badges { width: 100%; margin-bottom: 24px; }
  #social-proof .rating-badge   { flex: 1 1 0; min-width: 0; padding: 13px 10px; gap: 10px; }
  #social-proof .rating-badge:only-child { flex: 0 0 auto; margin: 0 auto; }
  #social-proof .rating-badge img { width: 44px !important; height: 44px !important; }
  #social-proof .rating-badge-label { font-size: 0.74rem; line-height: 1.25; white-space: normal; }
  #social-proof .rating-badge-sub   { font-size: 0.66rem; line-height: 1.25; }

  #social-proof .gr-cards { gap: 14px; margin-bottom: 22px; }
  #social-proof .gr-card  { padding: 20px 18px 22px; border-radius: 16px; }
  #social-proof .gr-text  { font-size: 0.92rem; line-height: 1.65; }

  .sp-verify { margin-bottom: 20px; }
  .sp-verify > summary { font-size: 0.78rem; padding: 8px 12px; }

  .sp-cta { flex-direction: column; align-items: center; gap: 14px; }
  .sp-cta .gr-cta-link { font-size: 0.88rem; }
  .sp-leave { margin-top: 16px; }
}

/* ==========================================================================
   CONTRAST OVERRIDE -- lifted verbatim from the pack's redesign.css contrast
   pass (2026-08-14), which the rest of this sheet already refers to by name.

   Carrying the layout half of the v4 social-proof section without this half
   is exactly the bug it shipped with: base .gr-stars is #fbbc04, measured
   1.61:1 on white, and the stars are the proof -- they have to be seen. The
   estate used three different golds (#F5A623, #fbbc04, #D98F00) and not one
   of them cleared AA on white. #A66200 does, at 4.8:1, and still reads gold.

   Deliberately UNSCOPED, matching the pack. Scoping it to #social-proof would
   raise it to (1,1,0) and it would then beat sibling rules it is not supposed
   to beat; more importantly the base rule it overrides is unscoped, so an
   unscoped override with !important is the minimum that does the job.
   ========================================================================== */
.gr-stars, .gr-stars-sm, .rb-stars,
.rating-badge .rb-stars, .gr-card .gr-stars-sm { color: #A66200 !important; }
/* On a dark hero the bright accent stays: #A66200 on dark green is worse, not
   better. No EDJ site renders .hsp-stars today, but the pairing is kept so a
   later hero social-proof block cannot inherit the wrong half. */
.hero-social-proof .hsp-stars, #hero .hsp-stars { color: var(--accent) !important; }