/*
    assets/css/reviews-footer-shop.css

    Reviews and footer, on ozroofracks.shop. Added 2026-08-20.

    Values from ozroofracks.shop/app/globals.css:

      .reviews-section   #f5f8fa
      .testimonial-grid  3 columns, 18px gap
      .testimonial-card  24px padding, 13px radius, 0 5px 22px rgba(15,34,49,.06)
      .testimonial-stars #00b67a, 16px, 2px tracking, 10px below
      card h3            15px, 8px below
      card p             13px / 1.6, --ink-soft
      card span          12px padding-top over a 1px --line rule, 11px/700 --muted

      .site-footer       --ink, white, 44px 0
      .footer-grid       1.5fr repeat(4, 1fr), 38px gap, 42px padding-bottom
      .footer-grid h2    11px, .11em, uppercase, #8fa5b5
      footer links       #dce6ec, 12px, block, 11px margins
      .footer-bottom     1px #253a4b top rule, #7890a1, 10px
*/

/* ========================================================== reviews */

/*
The reviews markup is a CAROUSEL -- .carousel > .carousel-track > .review-card,
with prev/next buttons and a dot strip -- while .shop shows a static 3-up grid.
Converting is done here rather than by rewriting the 444-line partial: the
track becomes a grid and the controls are hidden, which is the whole
difference. The carousel's own JS still runs harmlessly against a track it no
longer needs to scroll.

A grid also fixes what the carousel could not: three cards of different text
lengths line up, because grid rows stretch.
*/
#sets .carousel,
.reviews-carousel {
    position: static;
    max-width: 1180px;
    margin: 0 auto;
    padding: 0;
}

/*
    The track holds .slide wrappers, THREE CARDS EACH -- not cards directly.
    That matters: the first attempt put the grid on the track and capped with
    `.review-card:nth-child(n+4)`, which never matched, because nth-child
    counts within each .slide and no slide has a fourth card. All 15 rendered,
    five rows deep.

    So the grid goes on the SLIDE, and everything after the first slide is
    hidden -- exactly three cards in a row, which is what .shop shows.
*/
#sets .carousel-track {
    display: block;
    transform: none !important;   /* the carousel JS sets translateX inline */
    overflow: visible;
}

#sets .carousel-track .slide {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    width: auto;
    min-width: 0;
    flex: none;
}

/*
    TWO slides, so six cards -- .shop shows six, not three. Measured on the
    live site: .testimonial-grid with 6 .testimonial-card children.
*/
#sets .carousel-track .slide:nth-child(n + 3) {
    display: none;
}

#sets .carousel-track .slide + .slide {
    margin-top: 18px;
}

/* controls have nothing left to control */
#sets .carousel .nav,
#sets .carousel .dots {
    display: none;
}

#sets .review-card {
    display: flex;
    flex-direction: column;
    width: auto;
    min-width: 0;
    flex: 0 1 auto;
    padding: 24px;
    border-radius: 13px;
    background: var(--white);
    box-shadow: 0 5px 22px rgba(15, 34, 49, .06);
}

/*
The mobile rule in the partial hides every card after the first
(.review-card:nth-child(n+2) { display:none }) because only one fitted the
carousel. In a grid they stack, so all three stay.
*/
@media screen and (max-width: 980px) {
    #sets .carousel-track .slide {
        grid-template-columns: 1fr;
    }

    /* the partial hides cards 2+ on mobile for the carousel; in a stacked
       grid they simply follow one another */
    #sets .review-card:nth-child(n + 2) {
        display: flex;
    }
}

#sets .review-stars {
    margin-bottom: 10px;
    color: #00b67a;
    font-size: 16px;
    letter-spacing: 2px;
}

#sets .review-title {
    margin: 0 0 8px;
    color: var(--ink);
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 800;
    line-height: 1.3;
}

#sets .review-text {
    margin: 0 0 14px;
    color: var(--ink-soft);
    font-size: 13px;
    line-height: 1.6;
}

/*
.review-name WAS GROUPED WITH .review-footer AND INHERITED ITS RULE.

The span therefore drew its own border-top -- 88px wide, the width of the
words "Verified customer" -- directly under the footer's full-width rule.
Two lines, the second a short stub starting at the same x, which reads as a
broken divider rather than a deliberate one.

Split: the footer owns the line and the layout, the name owns only the type.
space-between puts the Trustpilot link on the right edge of the card, which is
where .shop has it -- both items were bunched at the left before, because the
shared rule set no justification.
*/
#sets .review-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid var(--line);
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
}

#sets .review-name {
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
}

/* =========================================================== footer */

#footer {
    padding: 44px 0;
    background: var(--ink);
    color: var(--white);
}

#footer > .inner {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 1.5em;
}

/*
main.css lays the footer out as .row of .col-3 -- the HTML5UP grid. .shop uses
1.5fr for a brand column then four equal link columns. The columns are the
same four menu partials; only the container changes.
*/
/*
    Four columns, not .shop's five: menu-footer-4 (ABN, address, contact,
    Projects) was removed by request, leaving the brand column plus three
    menus. Holding five tracks would have left a visible empty gap.
*/
#footer .row {
    display: grid;
    /*
    FOUR COLUMNS, NOT FIVE. The DOWNLOADS column came out on 2026-08-21 -- the
    downloads now live on their own page, linked once under Support -- so the
    brand block plus Shop, Support and Legal is the whole footer. Left at
    repeat(4,...) the three remaining lists would have stretched to fill a slot
    that no longer has anything in it.
    */
    grid-template-columns: 1.5fr repeat(3, 1fr);
    gap: 38px;
    padding-bottom: 42px;
}

#footer .row > div {
    width: auto;
    padding: 0;
}

#footer h2,
#footer h3,
#footer h4 {
    margin: 4px 0 17px;
    color: #8fa5b5;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .11em;
    text-transform: uppercase;
}

#footer a {
    color: #dce6ec;
    border-bottom: 0;
}

#footer a:hover {
    color: var(--white);
}

#footer li a,
#footer .col-3 > a {
    display: block;
    width: fit-content;
    margin: 11px 0;
    font-size: 12px;
}

#footer ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

#footer p,
#footer span {
    color: #8fa5b5;
    font-size: 11px;
    line-height: 1.7;
}

#footer hr {
    margin: 18px 0 14px;
    border: 0;
    border-top: 1px solid #2a3f52;
}

.footer-brand strong {
    display: block;
    margin: 8px 0 15px;
    color: var(--white);
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 800;
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    max-width: 1180px;
    margin: 0 auto;
    padding: 18px 1.5em 0;
    border-top: 1px solid #253a4b;
    color: #7890a1;
    font-size: 10px;
}

.footer-bottom a {
    color: #7890a1;
}

@media screen and (max-width: 980px) {
    #footer .row {
        grid-template-columns: repeat(2, 1fr);
        gap: 26px;
    }
}

@media screen and (max-width: 560px) {
    #footer .row {
        grid-template-columns: 1fr;
    }
}

/* (the three-card cap lives with the .slide rules above) */

/* .shop's .footer-legalinfo -- ABN, address and contact as a block */
.footer-legalinfo {
    display: block;
    margin-top: 16px;
    font-style: normal;
}

.footer-legalinfo span,
.footer-legalinfo a {
    display: block;
    margin: 6px 0;
    color: #8fa5b5;
    font-size: 11px;
    line-height: 1.7;
}

.footer-legalinfo strong {
    color: #dce6ec;
    font-weight: 700;
}

.footer-legalinfo a {
    width: fit-content;
}

.footer-legalinfo a:hover {
    color: #dce6ec;
}

/* ==================================== share band + self-serve cards */

.share-band {
    padding: 72px 0;
    background: var(--surface);
}

.share-band-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    max-width: 1180px;
    margin: 0 auto;
}

.share-band-copy h2 {
    max-width: 520px;
    margin: 0 0 12px;
    font-size: clamp(24px, 2.6vw, 34px);
    line-height: 1.15;
    letter-spacing: -.04em;
}

.share-band-copy p {
    max-width: 520px;
    margin: 0;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.7;
}

/*
sharethis.php opens with three <br> from its carousel-era layout, left over
from when the buttons sat in a slide.

CHILD COMBINATOR, NOT DESCENDANT. Written as `.share-band-copy br` this also
matched the deliberate <br> in the heading -- the one that puts "share the
thing!" on its own line -- so the markup was correct, the DOM had the tag, and
it rendered as display:none. The heading still broke into two lines by natural
wrapping at this width, which is what made it look like it was working.

The three strays are direct children of .share-band-copy; the deliberate one
is inside the h2. `>` separates them exactly.
*/
.share-band-copy > br {
    display: none;
}

.share-band-copy .sharethis-share-buttons {
    margin-top: 18px;
}

.share-band-qr img {
    display: block;
    padding: 12px;
    border-radius: 13px;
    background: var(--white);
    box-shadow: 0 5px 22px rgba(15, 34, 49, .07);
}

.selfserve-band {
    padding: 0 0 72px;
    background: var(--surface);
}

.selfserve-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
    max-width: 1180px;
    margin: 0 auto;
}

.selfserve-card {
    padding: 31px;
    border-radius: 13px;
    background: var(--white);
    box-shadow: 0 5px 22px rgba(15, 34, 49, .06);
}

.selfserve-icon {
    display: grid;
    place-items: center;
    width: 45px;
    height: 45px;
    margin-bottom: 16px;
    border-radius: 10px;
    color: var(--blue);
    background: var(--sky);
    font-size: 18px;
}

.selfserve-card h3 {
    margin: 0 0 8px;
    font-size: 21px;
    line-height: 1.2;
}

.selfserve-card > p {
    margin: 0 0 18px;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.6;
}

/*
optout-form.php still carries .slider-address-fixed / .slider-address-box --
markup from when it rendered inside the floating slider panel. Left alone it
would position itself absolutely over the page. Neutralised here rather than
edited, because /optout/ serves that same file directly.
*/
.selfserve-card .slider-address-fixed,
.selfserve-card .slider-address-box {
    position: static;
    transform: none;
    opacity: 1;
    visibility: visible;
    width: auto;
    max-width: none;
    padding: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    text-align: left;
}

.selfserve-card .slider-address-title {
    display: none;   /* the card already has an h3 */
}

.selfserve-card input[type="text"],
.selfserve-card input[type="tel"],
.selfserve-card input[type="email"] {
    min-height: 46px;
    padding: 0 14px;
    border: 1px solid #cedae3;
    border-radius: 8px;
    background: var(--white);
    color: var(--ink);
    font-family: var(--font-display);
    font-size: 14px;
}

.selfserve-card .button {
    min-height: 46px;
    padding: 0 20px;
    border-radius: 8px;
    background-color: var(--blue);
    color: var(--white);
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 800;
    text-transform: none;
}

@media screen and (max-width: 860px) {
    .share-band-inner,
    .selfserve-grid {
        flex-direction: column;
        grid-template-columns: 1fr;
        align-items: flex-start;
    }
}

/*
Footer copy is set at the page line-height of 1.5, which is right for body
copy and too loose for stacked link lists and small print.
*/
#footer,
#footer p,
#footer span,
#footer li,
#footer a {
    line-height: 1.35;
}

#footer li a,
#footer .col-3 > a {
    margin: 8px 0;
}

.footer-legalinfo span,
.footer-legalinfo a {
    margin: 4px 0;
    line-height: 1.45;
}

/*
    Both cards label their field, but with different elements: the tracking
    partial uses <h2>Tracking</h2> inside #orr-tracking-panel, the opt-out
    form uses a <p class="slider-address-subtitle">. Left alone one was a
    heading and the other body text, so the two cards did not match.

    An earlier pass hid the tracking heading instead. Wrong call -- the label
    is useful, and the fix is to make the two agree rather than delete one of
    them. Both are now the same field label.

    Neither partial is edited: /tracking and /optout/ render these files
    standalone, where those elements are the only labels there are.
*/
.selfserve-card #orr-tracking-panel > h2,
.selfserve-card .slider-address-subtitle {
    display: block;
    margin: 0 0 8px !important;
    color: var(--ink);
    font-family: var(--font-display);
    font-size: 13px !important;
    font-weight: 800;
    line-height: 1.3;
    letter-spacing: 0;
    text-transform: none;
}

/* the two forms then sit on the same rhythm */
.selfserve-card #orr-tracking-panel,
.selfserve-card form {
    max-width: none !important;
    width: 100% !important;
    margin: 0 !important;
}

/*
The two forms laid out differently: tracking stacks (full-width input, then a
full-width button), while the opt-out put its input and button side by side --
input 380px, button 131px on the same row. Measured, not eyeballed.

That is an INLINE style on the form element,
`style="margin:1em 0; display:flex; gap:0.5em; color:black"`, inherited from
when this form rendered inside the narrow slider panel. Inline beats a
stylesheet, so overriding it needs !important -- the alternative is editing
sms/optout-form.php, which also serves /optout/ standalone where the tight
inline row is the right shape for the page.

Stacked, so both cards read the same way down.
*/
.selfserve-card form {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    align-items: stretch !important;
}

.selfserve-card form input:not([type="hidden"]),
.selfserve-card form .button,
.selfserve-card form button,
.selfserve-card form input[type="submit"] {
    width: 100% !important;
    max-width: none !important;
    flex: 0 0 auto !important;
}

/* .shop's reviews band: 92px 0 on #f5f8fa */
#sets .carousel {
    padding: 0;
}

#sets .section-heading {
    margin-top: 0;
}
/* the legal block's icons line up with the phone/e-mail lines below it */
.footer-legalinfo i {
    width: 14px;
    margin-right: 4px;
    color: #8fa5b5;
    text-align: center;
}

.footer-policy-links {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.footer-policy-links a {
    color: #7890a1;
}

.footer-policy-links a:hover {
    color: #dce6ec;
}

/* ------------------------------- .shop five-column footer additions */

.footer-brand .footer-tagline {
    display: block;
    margin: 2px 0 12px;
    color: #8fa5b5;
    font-size: 12px;
    font-style: normal;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.footer-contact p {
    display: block;
    max-width: 320px;
    margin: 0 0 10px;
    color: #8fa5b5;
    font-size: 11px;
    line-height: 1.7;
}

.footer-contact > a:first-of-type {
    display: flex !important;
    align-items: center;
    gap: 7px;
    color: var(--white) !important;
    font-weight: 800;
}

/* .shop puts a short rule between a contact block and what follows */
.footer-link-gap {
    display: block;
    width: 34px;
    height: 1px;
    margin: 18px 0 14px;
    background: #2a3f52;
}

/*
The Trustpilot widget is gone from the footer. It renders its own dark-on-
light markup from an external script, which was illegible once the footer
became --ink -- and it is not something CSS here can restyle, since the
content is injected cross-origin. It belongs on a page with a light
background; the reviews section on the homepage already carries the same
social proof.
*/
/*
The columns are plain <div>s now, not .col-3, so the earlier
`#footer .col-3 > a` rule stopped matching and every link fell back to inline
-- seven links reading as one run-on paragraph, centred, because main.css
centres footer content.

.shop's footer links are left-aligned blocks at 12px with 11px of air.
*/
#footer,
#footer .row,
#footer .row > div,
#footer .footer-bottom {
    text-align: left;
}

#footer .row > div > a,
#footer .footer-contact > a,
#footer .row > div li a {
    display: block;
    width: fit-content;
    margin: 11px 0;
    font-size: 12px;
}

#footer .row > div > h2 {
    text-align: left;
}

/* the brand column is not a link list */
#footer .footer-brand > a {
    display: inline;
    margin: 0;
}

/*
The downloads column carries 18 items, so it sets the footer's height on its
own. Tighter leading and smaller gaps than the navigation columns -- these are
document titles that wrap to two lines, not single-word links, so the saving
compounds.
*/
.footer-downloads li a,
#footer .footer-downloads a {
    margin: 5px 0;
    font-size: 11px;
    line-height: 1.3;
}

.footer-downloads ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.footer-downloads li {
    margin: 0;
    line-height: 1.3;
}

/*
BAND RHYTHM FOR THE LAST TWO SECTIONS.

grids-shop.css sets the alternation for the page, but this file loads after
it and had already painted both of these --surface, so the page ended on two
identical grey bands back to back. Share goes transparent, self-serve keeps
a band, and they use --band like every other one (see tokens.css -- .shop
uses a different grey for bands than for cards).
*/
.share-band {
    background: none;
}

.selfserve-band {
    background: var(--band);
}

/*
The destructive half of the self-serve pair. Everything about it matches the
Track button beside it -- 46px, 8px radius, Poppins 800 -- except the colour,
which stays red because unsubscribing is not the same kind of action as
checking where a parcel is.

It was an inline style before, which is why it kept a 6px radius after Track
moved to the shared 8px: the two buttons sat side by side in visibly
different shapes.
*/
.selfserve-card .button.is-danger {
    background-color: #d63a45;
    color: var(--white);
}

.selfserve-card .button.is-danger:hover {
    background-color: #c22e39;
    color: var(--white);
}