/* Styles for the [cwad_reviews] block. Shipped with the plugin rather than
   with the page that happens to use it: the shortcode has to look right
   wherever it is placed, and a review-styling tweak should be a plugin
   deploy, not a rewrite of a page's inline stylesheet.

   Stars are Google's own #FBBC04 so the block reads as a Google rating
   rather than as our own furniture. --cwb-red is the site brand token;
   every use carries the literal fallback for pages that do not define it. */
.cwx-reviews{margin:0}

/* Summary row: the score large, stars beside it, the count under, Google's mark
   at the far end so the source is unmistakable. */
.cwx-rv-head{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;
  gap:14px 26px;margin:0 0 28px;padding:0 0 22px;border-bottom:1px solid #e6e6e6}
.cwx-rv-score{display:flex;align-items:center;flex-wrap:wrap;gap:4px 14px}
.cwx-rv-score b{color:#141414;font-weight:800;line-height:1;letter-spacing:-.025em;
  font-size:clamp(2.2rem,4vw,3rem)}
.cwx-rv-count{color:#666;font-size:.98em}
/* The plugin sizes this one inline. Not by width/height attributes: Photon
   reads those as a resize and would serve the retina file back at 1x. */
.cwx-rv-g{flex:0 0 auto;display:block}

.cwx-rv-stars{color:#FBBC04;line-height:1;letter-spacing:.06em;font-size:1.02em}
.cwx-rv-stars.lg{font-size:1.75em}

.cwx-rv-list{display:flex;flex-wrap:wrap;gap:20px;margin:0 0 26px}
.cwx-rv{flex:1 1 300px;min-width:0;background:#fff;border:1px solid #e8e8e8;border-radius:14px;
  padding:24px 26px;box-shadow:0 4px 18px rgba(0,0,0,.06);display:flex;flex-direction:column;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
@media (hover:hover){
  .cwx-rv:hover{transform:translateY(-3px);box-shadow:0 10px 28px rgba(0,0,0,.10);border-color:#dcdcdc}
}
.cwx-rv-hd{display:flex;align-items:center;gap:13px;margin:0 0 12px}
.cwx-rv-av{width:44px;height:44px;border-radius:50%;flex:0 0 auto}
.cwx-rv-who{flex:1 1 auto;min-width:0;color:#141414;font-weight:800;line-height:1.3;font-size:1.02em}
.cwx-rv-who a{color:#141414;text-decoration:none}
.cwx-rv-who a:hover{text-decoration:underline}
.cwx-rv-when{display:block;margin-top:2px;color:#777;font-size:.85em;font-weight:400}
.cwx-rv .cwx-rv-stars{margin:0 0 13px}

/* However long a review runs, the card keeps its height and the words scroll
   inside it. One 1,900-character review was stretching the whole section. The
   tabindex is on the <p> in the plugin, because a region that scrolls has to be
   reachable by keyboard.

   The four background layers are the scroll-shadow trick, and they are doing
   real work rather than decoration: macOS and iOS hide overlay scrollbars until
   you actually scroll, so a clipped review read as text that had simply been
   cut off. The two "local" layers scroll with the content and the two "scroll"
   layers stay pinned to the box, so a soft shadow appears at an edge only while
   there is more to read in that direction -- and a review short enough to fit
   shows nothing at all. White here is the card's own background. */
.cwx-rv-tx{margin:0 0 16px;color:#555;line-height:1.7;max-height:9.6em;overflow-y:auto;
  padding-right:8px;-webkit-overflow-scrolling:touch;
  scrollbar-width:thin;scrollbar-color:#cfcfcf transparent;
  background:
    linear-gradient(#fff,rgba(255,255,255,0)) 0 0/100% 18px no-repeat local,
    linear-gradient(rgba(255,255,255,0),#fff) 0 100%/100% 18px no-repeat local,
    radial-gradient(farthest-side at 50% 0,rgba(0,0,0,.16),rgba(0,0,0,0)) 0 0/100% 10px no-repeat scroll,
    radial-gradient(farthest-side at 50% 100%,rgba(0,0,0,.16),rgba(0,0,0,0)) 0 100%/100% 10px no-repeat scroll;
  background-color:#fff}
.cwx-rv-tx::-webkit-scrollbar{width:6px}
.cwx-rv-tx::-webkit-scrollbar-track{background:transparent}
.cwx-rv-tx::-webkit-scrollbar-thumb{background:#cfcfcf;border-radius:3px}
.cwx-rv-tx:focus{outline:2px solid var(--cwb-red,#E31E24);outline-offset:4px}
.cwx-rv-tx:focus-visible{outline:2px solid var(--cwb-red,#E31E24);outline-offset:4px}

.cwx-rv-link{margin-top:auto;align-self:flex-start;color:#141414;font-weight:800;font-size:.93em;
  text-decoration:none;border-bottom:2px solid var(--cwb-red,#E31E24);padding-bottom:1px}
.cwx-rv-link:hover{color:var(--cwb-red,#E31E24)}
.cwx-rv-link:focus{outline:2px solid var(--cwb-red,#E31E24);outline-offset:3px}
.cwx-rv-link:focus-visible{outline:2px solid var(--cwb-red,#E31E24);outline-offset:3px}

.cwx-rv-foot{display:flex;align-items:center;gap:24px;flex-wrap:wrap;margin:0 0 6px}
.cwx-rv-foot a{color:#141414;font-weight:800;text-decoration:none;
  border-bottom:2px solid var(--cwb-red,#E31E24);padding-bottom:1px}
.cwx-rv-foot a:hover{color:var(--cwb-red,#E31E24)}
.cwx-rv-foot a:focus{outline:2px solid var(--cwb-red,#E31E24);outline-offset:3px}
.cwx-rv-foot a:focus-visible{outline:2px solid var(--cwb-red,#E31E24);outline-offset:3px}
.cwx-rv-none{margin:0 0 18px;color:#555;font-size:1.06em}
.cwx-rv-none a{color:#141414;font-weight:800}

/* The "(opens in a new tab)" cue inside every outbound link. Clipped rather than
   display:none or visibility:hidden, both of which take it out of the
   accessibility tree and so defeat the entire point of having it. */
.cwx-rv-nt{position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* ---- compact: one narrow column --------------------------------------
   Roughly 280px, as in the site footer. This block is WIDTH ONLY. Colour lives
   in the dark theme below, because the two are separate axes: a narrow block
   on a white page must still be readable. */
.cwx-rv-compact{margin:0}
.cwx-rv-compact .cwx-rv-head{display:block;margin:0 0 16px;padding:0 0 14px}
.cwx-rv-compact .cwx-rv-score{gap:2px 10px}
.cwx-rv-compact .cwx-rv-score b{font-size:1.9rem}
.cwx-rv-compact .cwx-rv-stars.lg{font-size:1.1em}
.cwx-rv-compact .cwx-rv-count{font-size:.86em;flex:1 1 100%}
.cwx-rv-compact .cwx-rv-g{margin:12px 0 0}
.cwx-rv-compact .cwx-rv-list{display:block;margin:0 0 14px}
.cwx-rv-compact .cwx-rv{padding:16px 18px;border-radius:10px;box-shadow:none;margin:0 0 12px}
.cwx-rv-compact .cwx-rv:last-child{margin-bottom:0}
.cwx-rv-compact .cwx-rv-hd{gap:10px;margin:0 0 9px}
.cwx-rv-compact .cwx-rv-av{width:34px;height:34px}
.cwx-rv-compact .cwx-rv-who{font-size:.94em}
.cwx-rv-compact .cwx-rv-when{font-size:.8em}
.cwx-rv-compact .cwx-rv-tx{font-size:.9em;max-height:7.5em;margin:0 0 12px}
.cwx-rv-compact .cwx-rv-link{font-size:.85em}
.cwx-rv-compact .cwx-rv-foot{gap:8px 18px;margin:0}
.cwx-rv-compact .cwx-rv-foot a{font-size:.88em}

/* ---- dark: for a dark surround, like the footer ----------------------
   Only what sits OUTSIDE the review cards inverts. The cards keep their white
   background, so the reviews themselves read identically wherever the block is
   placed, and the Google mark switches to its on-non-white asset in render.php
   rather than being tinted with CSS, which the brand terms do not allow. */
.cwx-rv-dark{color:#ddd}
.cwx-rv-dark .cwx-rv-head{border-bottom-color:rgba(255,255,255,.16)}
.cwx-rv-dark .cwx-rv-score b{color:#fff}
.cwx-rv-dark .cwx-rv-count{color:#b4b4b4}
.cwx-rv-dark .cwx-rv-foot a{color:#fff}
.cwx-rv-dark .cwx-rv-foot a:hover{color:var(--cwb-red,#E31E24)}
.cwx-rv-dark .cwx-rv-foot a:focus,
.cwx-rv-dark .cwx-rv-foot a:focus-visible{outline-color:#fff}
.cwx-rv-dark .cwx-rv-none{color:#ddd}
.cwx-rv-dark .cwx-rv-none a{color:#fff}