/* Advanced Google Reviews — baseline.
 *
 * Only what Elementor controls cannot express. Every colour reads a site token
 * first and falls back to the static build's literal value, so the widget looks
 * right on a fresh install and inherits the palette once Site Settings load.
 * Anything an editor should be able to change is left for the Style tab to
 * override, which is why almost nothing here is !important. */

.agr { --agr-navy: var(--NavyDeep, #16233a); --agr-sun: var(--Sun, #f0a92a);
       --agr-sun-soft: var(--SunSoft, #f9d783); --agr-sun-deep: var(--SunDeep, #f69300);
       --agr-line: var(--BorderLine, #e3e6ec); --agr-ink: var(--Ink, #16233a);
       --agr-card: var(--White, #fff);
       /* The one value that was a bare literal while every other line in this
          block reads a site token first. #6A7180 on white is 4.79:1 — it passes,
          but it is a colour the design system never chose. Now token-first like
          its neighbours, keeping the static build's value as the fallback. */
       --agr-quiet: var(--MutedForeground, #6a7180); }

.agr-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
          overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Every button below is scoped under `.agr`.
 *
 * Elementor's Kit ships `.elementor-kit-405 button { … }` — a navy pill with
 * 12/20 padding and a 9999px radius. That is one class plus one element, which
 * outranks a bare `.agr-more`, so the read-more link, the carousel dots and the
 * arrows all rendered as solid navy pills. Two classes wins it back. */

/* ---------- Card ---------------------------------------------------- */

.agr-card {
    position: relative; display: flex; flex-direction: column; height: 100%;
    padding: 1.5rem; background: var(--agr-card);
    border: 1px solid var(--agr-line); border-radius: calc(var(--RadiusBase, 8px) + 8px);
    transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}

/* Hover. The same shadow the cards in the section directly above these use —
   "Four steps from idea to finished space" (`hw-c1-s`..`hw-c4-s` on page 416),
   where it is written as an Elementor hover variant. Shadow only: those cards
   do not lift, and a carousel that lifts under the cursor fights the drag. */
.agr-card:hover,
.agr-card:focus-within {
    box-shadow: 0 16px 40px -24px rgba(10, 22, 40, .25);
}

.agr-card__head { display: flex; align-items: flex-start; gap: .75rem; }

.agr-avatar {
    display: inline-flex; align-items: center; justify-content: center;
    flex: 0 0 auto; width: 2.75rem; height: 2.75rem; border-radius: 50%;
    background: var(--agr-navy); color: var(--NavyForeground, #f7f8fa);
    font-family: var(--DisplayFont, inherit); font-size: .875rem; font-weight: 700;
    text-transform: uppercase; line-height: 1; overflow: hidden;
}
.agr-avatar--photo { object-fit: cover; }

.agr-card__id { min-width: 0; flex: 1 1 auto; }

.agr-card__name {
    margin: 0; font-family: var(--DisplayFont, inherit); font-size: .875rem;
    font-weight: 700; text-transform: uppercase; letter-spacing: .025em;
    line-height: 1; color: var(--agr-ink);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.agr-card__name a { color: inherit; text-decoration: none; }
.agr-card__name a:hover { text-decoration: underline; }

.agr-card__meta {
    margin: .25rem 0 0; font-size: .75rem; line-height: 1; color: var(--agr-quiet);
}
.agr .agr-sep { opacity: .5; }

.agr-card__gmark { flex: 0 0 auto; line-height: 0; }
.agr-gmark { width: 1.25rem; height: 1.25rem; display: block; }
.agr-gmark--lg { width: 2rem; height: 2rem; }

.agr-stars { display: flex; gap: .125rem; margin-top: 1rem; }
.agr-star { width: 1rem; height: 1rem; color: var(--agr-navy); flex: 0 0 auto; }
.agr-star--off { color: color-mix(in oklab, var(--agr-navy) 18%, transparent); }

/* The excerpt takes the free space at the bottom of the card.
 *
 * In an equal-height layout every card is stretched to the tallest one, but the
 * text was trimmed to a fixed word count on the server — so a short review left
 * a block of dead space under its "Read more". `flex: 1 1 auto` gives the
 * paragraph that space as a box, the JS fit pass fills it, and `overflow`
 * clips the words it deliberately leaves behind. `min-height: 0` is what lets
 * a flex item shrink below its content at all. */
.agr-card__text {
    margin: 1rem 0 0; font-size: .875rem; line-height: 1.625;
    color: color-mix(in oklab, var(--agr-ink) 90%, transparent);
    flex: 1 1 auto; min-height: 0; overflow: hidden;
}

/* An inline continuation of the sentence, not a button.
 *
 * `font: inherit` alone is not enough: it resets family, size, weight and
 * line-height but NOT text-transform, letter-spacing or border-radius — and the
 * Kit's button rule sets all three, so the link kept reading as a wide-tracked
 * uppercase pill sitting in the middle of the paragraph.
 *
 * `transition: none` is load-bearing, not tidiness. This stylesheet is enqueued
 * with the widget, so it arrives in the BODY, after the Kit has already painted
 * the button as its 12/20 pill — and the Kit's own `transition` then animates
 * the padding down to 0 over 200ms. For those 200ms the paragraph is a whole
 * line taller, which is exactly the height the fit pass would measure and lock
 * in. Snapping to the link removes the transient instead of racing it. */
.agr .agr-more {
    display: inline; padding: 0; margin-left: .25rem; border: 0; background: none;
    border-radius: 0; box-shadow: none;
    font: inherit; font-weight: 700;
    text-transform: none; letter-spacing: normal;
    color: var(--agr-navy);
    text-decoration: underline; text-underline-offset: 2px; cursor: pointer;
    transition: none;
}
/* The Kit also styles `button:hover` — a solid --Navy fill with a pill radius —
   so styling only the resting state left the link turning into a navy pill under
   the cursor. Every property it sets has to be answered here too. */
.agr .agr-more:hover,
.agr .agr-more:focus {
    background: none; background-color: transparent;
    border-radius: 0; box-shadow: none;
    color: var(--agr-navy);
    text-decoration: underline; text-decoration-thickness: 2px;
}
/* The fit pass's font ruler: out of flow, so it measures the cards' text without
   taking part in their layout. `visibility` rather than `display:none`, which
   would give it no box to measure at all. */
.agr-ruler {
    position: absolute; visibility: hidden; white-space: nowrap;
    pointer-events: none; user-select: none;
}

/* The fit pass hides the button when the whole review turns out to fit. An
   author rule beats the UA sheet whatever the specificity, so `display: inline`
   above would keep a `hidden` button on screen without this. */
.agr .agr-more[hidden] { display: none; }

/* Keep a visible focus ring for keyboards, but a tidy one. */
.agr .agr-more:focus-visible {
    outline: 2px solid var(--agr-navy); outline-offset: 2px; border-radius: 2px;
}

/* ---------- Layouts -------------------------------------------------- */

.agr-wall { margin: 0; }

/* CSS multi-column masonry. Filtering only hides tiles, so the remaining ones
   reflow into balanced columns by themselves — no JS layout pass. */
.agr-wall--masonry { column-count: 3; column-gap: 1.5rem; }
.agr-wall--masonry .agr-item { break-inside: avoid; margin-bottom: 1.5rem; display: block; }

.agr-wall--grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
.agr-wall--list { display: flex; flex-direction: column; gap: 1.5rem; }

/* A filtered-out tile is hidden with the `hidden` attribute, but the UA's
   `[hidden] { display: none }` is a single selector — every layout rule above
   names two, so it wins and the tile stays on screen. Restate the hide at a
   specificity none of them can reach. */
.agr .agr-wall .agr-item[hidden] { display: none; }

.agr-empty { margin-top: 2rem; text-align: center; color: var(--agr-quiet); }

/* ---------- Summary card --------------------------------------------- */

.agr-summary {
    position: relative; overflow: hidden; margin-bottom: 3.5rem;
    padding: 2rem; border-radius: calc(var(--RadiusBase, 8px) + 12px);
    background: var(--agr-navy); color: var(--NavyForeground, #f7f8fa);
}
@media (min-width: 640px) { .agr-summary { padding: 2.5rem; } }

.agr-summary__glow {
    position: absolute; right: -8rem; top: -8rem; width: 26rem; height: 26rem;
    border-radius: 50%; opacity: .10; pointer-events: none;
    background: radial-gradient(circle, var(--agr-sun) 0%, transparent 70%);
}

.agr-summary__inner { position: relative; display: grid; gap: 2.5rem; }
@media (min-width: 1024px) {
    .agr-summary__inner { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 3.5rem; }
}

.agr-summary__score { display: flex; align-items: center; gap: 1.25rem; }
.agr-summary__badge {
    display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
    width: 4rem; height: 4rem; border-radius: 50%; background: var(--NavyForeground, #f7f8fa);
}
.agr-summary__row { display: flex; align-items: baseline; gap: .75rem; }
.agr-summary__num {
    font-family: var(--DisplayFont, inherit); font-size: 3.75rem; font-weight: 700;
    line-height: 1; color: var(--agr-sun);
}
.agr-summary .agr-stars { margin-top: 0; }
.agr-stars--accent .agr-star { color: var(--agr-sun); }
/* Same reason as the distribution labels: without an explicit leading the Kit's
   1.625em makes this 14px line a 26px box, which drops it 3px and pushes the
   whole score group off the design's baseline. `text-sm` carries 20px. */
.agr-summary__count { margin: .5rem 0 0; font-size: .875rem; line-height: 1.25rem; opacity: .7; }

.agr-bars { display: flex; flex-direction: column; gap: .375rem; }
@media (min-width: 1024px) { .agr-bars { max-width: 20rem; } }
.agr-bar { display: flex; align-items: center; gap: .75rem; }
/* `line-height` is not decoration here: the Kit's Theme Style puts 1.625em on
   everything, which makes a 12px label a 19.5px box and each of the five rows
   10px taller than the design. The row is as tall as its tallest item, so the
   whole summary card grew 50px. 1rem is what a 12px label is given in the
   source, and it is also the star's own height. */
.agr-bar__n { width: .75rem; text-align: right; font-size: .75rem; font-weight: 600;
              line-height: 1rem; font-variant-numeric: tabular-nums; opacity: .6; }
.agr-bar__star { width: .75rem; height: .75rem; flex: 0 0 auto; opacity: .4; }
.agr-bar__track { flex: 1 1 auto; height: .375rem; border-radius: 999px; overflow: hidden;
                  background: color-mix(in oklab, currentColor 15%, transparent); }
/* The same standing rule as the button: no flat yellow anywhere on this site.
   The bar is `surface-sun` in the design, which is the Sun -> SunSoft ramp. */
.agr-bar__fill { display: block; height: 100%; border-radius: 999px;
                 background-image: linear-gradient(120deg, var(--agr-sun) 0%, var(--agr-sun-soft) 100%);
                 background-color: var(--agr-sun); }
.agr-bar__c { width: 1.5rem; text-align: right; font-size: .75rem; line-height: 1rem;
              font-variant-numeric: tabular-nums; opacity: .6; }

.agr-summary__cta { display: flex; flex-wrap: wrap; gap: .75rem; }
.agr .agr-btn {
    display: inline-flex; align-items: center; gap: .5rem;
    padding: .75rem 1.5rem; border-radius: var(--RadiusPill, 999px);
    font-size: .875rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .14em; text-decoration: none; transition: transform .2s ease, border-color .2s ease, color .2s ease;
}
.agr .agr-btn__i { width: 1rem; height: 1rem; flex: 0 0 auto; }
/* Yellow is never a flat swatch on this site — every sun fill is a gradient, at
   rest and on hover — so this matches `btn-accent` rather than painting --Sun
   straight on. Hover deepens the ramp instead of only lifting, because a lift
   alone is invisible on a button that is already the brightest thing on a navy
   card. */
.agr .agr-btn--sun {
    background-image: linear-gradient(120deg, var(--agr-sun) 0%, var(--agr-sun-soft) 100%);
    background-color: var(--agr-sun);
    color: var(--Ink, #16233a);
}
.agr .agr-btn--sun:hover {
    background-image: linear-gradient(120deg, var(--agr-sun-deep) 0%, var(--agr-sun) 46%, var(--agr-sun-soft) 100%);
    transform: translateY(-2px);
    box-shadow: 0 16px 30px -16px rgba(246, 147, 0, .45);
}
.agr .agr-btn--ghost {
    border: 1px solid color-mix(in oklab, currentColor 25%, transparent); color: inherit;
}
.agr .agr-btn--ghost:hover { border-color: var(--agr-sun); color: var(--agr-sun); }

/* ---------- Filters --------------------------------------------------- */

.agr-filters { display: flex; flex-direction: column; gap: 1.5rem; margin-bottom: 2rem; }
.agr-filters__top { display: flex; flex-wrap: wrap; align-items: center;
                    justify-content: space-between; gap: 1rem; }

.agr-search { position: relative; display: block; width: 100%; max-width: 24rem; }
/* The Kit styles `input:not([type=button]):not([type=submit])` at (0,3,1) and
   sets `padding: 11px 16px`, so a two-class rule loses and the placeholder ends
   up sitting under the search icon. Adding the two attributes this input really
   carries makes it (0,4,1) — above the Kit without an !important, and still
   describing only this field. */
.agr .agr-search input[type="search"][data-agr-search] {
    width: 100%; height: 3rem; padding: 0 2.75rem 0 2.75rem;
    border: 1px solid var(--agr-line); border-radius: var(--RadiusPill, 999px);
    background: var(--agr-card); font-size: .875rem; outline: none;
    transition: border-color .2s ease;
}
/* The Kit's own `input:focus` paints a gold 2px ring via box-shadow. It is
   (0,3,1) and this rule is (0,5,1), but a rule only overrides the properties it
   names — the border was ours and the ring was still the Kit's. Say `none`. */
.agr .agr-search input[type="search"][data-agr-search]:focus {
    border-color: var(--agr-navy); box-shadow: none;
}

/* Our own clear cross, in place of the engine's (removed site-wide in the child
   theme's §38). Only shown once there is something to clear — JS toggles
   `hidden` — so the resting field is the icon and the placeholder, nothing else. */
.agr .agr-search__clear {
    position: absolute; right: .5rem; top: 50%; transform: translateY(-50%);
    display: inline-flex; align-items: center; justify-content: center;
    width: 2rem; height: 2rem; padding: 0; cursor: pointer;
    border: 0; border-radius: 999px; background: transparent;
    color: var(--agr-quiet); box-shadow: none;
    transition: color .2s ease, background-color .2s ease;
}
/* The Kit fills every `button:hover, button:focus` navy — see the chips above,
   which need the same two-state answer for the same reason. */
.agr .agr-search__clear:hover,
.agr .agr-search__clear:focus {
    background: var(--Muted, #EFF4F9); color: var(--agr-ink); box-shadow: none;
}
.agr .agr-search__clear:focus-visible { outline: 2px solid var(--agr-navy); outline-offset: 2px; }
.agr .agr-search__clear[hidden] { display: none; }
.agr .agr-search__clear svg { width: 1rem; height: 1rem; }
.agr-search__icon {
    position: absolute; left: 1rem; top: 50%; transform: translateY(-50%);
    width: 1rem; height: 1rem; pointer-events: none; color: var(--agr-quiet);
}

.agr-count { margin: 0; font-size: .875rem; color: var(--agr-quiet); }

.agr-chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.agr .agr-chip {
    display: inline-flex; align-items: center; gap: .5rem; cursor: pointer;
    padding: .5rem 1rem; border: 1px solid var(--agr-line);
    border-radius: var(--RadiusPill, 999px); background: var(--agr-card);
    font-family: inherit; font-size: .75rem; font-weight: 700; line-height: 1rem;
    text-transform: uppercase; letter-spacing: .12em; color: var(--agr-ink);
    transition: color .3s cubic-bezier(0,0,.2,1), background-color .3s cubic-bezier(0,0,.2,1),
                border-color .3s cubic-bezier(0,0,.2,1);
}
/* Source: `.chip:hover` moves the BORDER only — the chip stays white until it is
   pressed. Answering the Kit's `button:hover, button:focus` fill is what keeps it
   that way; without these two lines a chip turned solid navy under the cursor and
   stayed navy after a click, reading as pressed when it was not.
   The three colour controls name `:hover, :focus` in their own selectors
   (class-atlas-gr-widget.php), so they are (0,4,0) and still outrank this. */
.agr .agr-chip:hover,
.agr .agr-chip:focus {
    background-color: var(--agr-card); color: var(--agr-ink);
    border-radius: var(--RadiusPill, 999px); box-shadow: none;
}
.agr .agr-chip:hover { border-color: var(--agr-navy); }
/* The Kit's focus fill was the only focus indicator; replace it deliberately. */
.agr .agr-chip:focus-visible {
    outline: 2px solid var(--agr-navy); outline-offset: 2px;
}
.agr .agr-chip[aria-pressed="true"] { background: var(--agr-navy); border-color: var(--agr-navy);
                                 color: var(--NavyForeground, #f7f8fa); }
/* The count beside each rating filter, dimmed against the chip's own label.
   It was `opacity: .6`, which composites to #6E7986 on white — 4.42:1 at 12px,
   just under the 4.5:1 WCAG AA needs.
   Opacity is the right mechanism and was simply set too low. A fixed colour is
   NOT the fix: the selected chip inverts to a navy fill, and a muted ink chosen
   to pass on white drops to 2.72:1 on navy. Fading the chip's OWN colour keeps
   the contrast ratio proportional on both grounds; .75 clears AA on each. */
.agr-chip__n { opacity: .75; font-weight: 600; }

/* ---------- Carousel -------------------------------------------------- */

/* The negative margin cancels the padding, so this buys the cards' hover shadow
   room to render without moving anything.
 *
 * 40px at the bottom, not 20px, because that is how far the shadow actually
 * reaches: `0 16px 40px -24px` puts its rect 8px ABOVE the card's edge and then
 * blurs 40px past it, measured as a falloff still visible 37px down. And the
 * clip that ate it is the `--fade` MASK, not `overflow` — a mask paints nothing
 * outside its element's box whatever overflow says, which is why widening the
 * box is the fix and `overflow: visible` alone changed nothing.
 *
 * The top stays 20px: with a +16px offset and -24px spread the shadow never
 * reaches above the card, and a taller overhang there would only cover more of
 * the section above. */
.agr-viewport { overflow: hidden; margin-block: -1.25rem -2.5rem; padding-block: 1.25rem 2.5rem;
                pointer-events: none; }
/* The negative margin makes that padding overhang its neighbours — 40px of it
   now lands on the controls row, whose dots and arrows start at its very top
   edge. An overhang of empty padding still wins the hit test, so the top 8px of
   every dot and arrow went dead. The band has to be see-through to the cursor;
   the drag listeners live on the track, not here, so handing the track back its
   own events costs nothing. */
.agr-track { pointer-events: auto; }
/* The fade has to be a mask, not a gradient overlay: an overlay would sit on
   top of the cards and eat their pointer events mid-drag. */
.agr-viewport--fade {
    -webkit-mask-image: linear-gradient(to right, transparent, #000 3%, #000 97%, transparent);
            mask-image: linear-gradient(to right, transparent, #000 3%, #000 97%, transparent);
}
.agr-track {
    display: flex; touch-action: pan-y; user-select: none;
    transition: transform .7s cubic-bezier(0, 0, .2, 1); will-change: transform;
}
.agr-slide { flex: 0 0 auto; padding-inline: .625rem; }
.agr-slide > .agr-card { height: 100%; }

/* Source: mt-8 · flex-wrap · items-center · justify-between · gap-4 · px-2.5.
   The px matches the slides' own inline padding so the dots line up with the
   first card's edge rather than the track's. */
.agr-controls {
    display: flex; flex-wrap: wrap; align-items: center;
    justify-content: space-between; gap: 1rem;
    margin-top: 2rem; padding-inline: .625rem;
}
.agr .agr-arrows { display: flex; gap: .75rem; }
.agr .agr-arrow {
    display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
    width: 2.75rem; height: 2.75rem; padding: 0; border-radius: 50%;
    border: 1px solid var(--agr-line); background: var(--agr-card); color: var(--agr-ink);
    transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.agr .agr-arrow:hover { background: var(--agr-navy); border-color: var(--agr-navy);
                   color: var(--NavyForeground, #f7f8fa); }
.agr .agr-arrow svg { width: 1.125rem; height: 1.125rem; }

/* Source: flex min-w-0 flex-wrap gap-0 — left-aligned, not centred. */
.agr .agr-dots { display: flex; align-items: center; flex-wrap: wrap; min-width: 0; gap: 0; }
.agr .agr-dot {
    display: flex; align-items: center; justify-content: center;
    /* 44px tap target (WCAG 2.5.8) around an 8px pill. */
    height: 2.75rem; width: auto; padding: 0 .5rem; border: 0;
    background: none; border-radius: 0; cursor: pointer;
}
.agr .agr-dot span {
    display: block; width: .5rem; height: .5rem; border-radius: 999px;
    background: color-mix(in oklab, var(--agr-quiet) 35%, transparent);
    transition: width .3s ease, background-color .3s ease;
}
/* The same Kit rule that turned the read-more link into a pill also styles
   `button:hover, button:focus` — a solid --Navy fill with a 9999px radius — and
   that is one class *plus a pseudo-class* plus an element, so it outranks the
   two-class rule above. Hovering a dot grew a 44px navy blob around the pill,
   and clicking one left it there for good, because the Kit answers `:focus`
   too and a clicked button keeps focus. Name the states here and answer every
   property the Kit sets, exactly as `.agr-more` above has to.

   Both rules land before the `[aria-selected]` one on purpose: they tie it on
   specificity, so the selected pill stays sun-coloured only while it is last. */
.agr .agr-dot:hover,
.agr .agr-dot:focus {
    background: none; background-color: transparent;
    border-radius: 0; box-shadow: none;
}
/* Source: `hover:bg-muted-foreground/50` — the pill darkens, the button does not. */
.agr .agr-dot:hover span { background: color-mix(in oklab, var(--agr-quiet) 50%, transparent); }

.agr .agr-dot[aria-selected="true"] span { width: 2rem; background: var(--agr-sun); }
/* Killing the Kit's focus fill also killed the only focus indicator, so put a
   deliberate one back — on the pill, not on the button. The button is a 24x44
   tap target around an 8px dot, so a ring on its edge reads as a tall box
   floating in the gap between two dots; on the span it hugs the pill and grows
   with it when that dot becomes the selected one. */
.agr .agr-dot:focus-visible { outline: none; }
.agr .agr-dot:focus-visible span { outline: 2px solid var(--agr-navy); outline-offset: 3px; }

/* ---------- Editor notice --------------------------------------------- */

.agr-notice {
    padding: 1.25rem 1.5rem; border: 1px dashed var(--agr-line);
    border-radius: calc(var(--RadiusBase, 8px) + 8px); color: var(--agr-quiet); font-size: .875rem;
}
.agr-notice strong { display: block; color: var(--agr-ink); margin-bottom: .25rem; }
.agr-notice p { margin: 0 0 .5rem; }

/* ---------- Motion ----------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .agr-track { transition-duration: .01ms !important; }
    .agr-card, .agr-btn, .agr .agr-dot span { transition: none !important; }
    .agr-card:hover, .agr .agr-btn--sun:hover { transform: none !important; }
}