/**
 * review-hub.css
 *
 * Premium "Leave Us a Review" hub (/reviews). Page-scoped tokens only —
 * --rh-* custom properties never touch the sitewide --color-primary
 * token, so nothing else on the site shifts color. Built on the
 * existing poa design system (.u-container,
 * --space-*, --radius-*, --poa-shadow-*) for structural consistency.
 *
 * @package Pride_Of_Africa
 */

.c-review-page {
    --rh-green:       #009900; /* was luxury gold #D4AF37 — replaced with brand green per request */
    --rh-green-dark:  #075C29;
    --rh-white:       #FFFFFF;
    --rh-beige:       #F7F4ED;
    --rh-charcoal:    #222222;
    background: var(--rh-beige);
}

.c-review-page__section { padding-block: var(--space-8); }
.c-review-page__section--tight { padding-block: var(--space-6); }

/* Alternating gray/light-gray bands — the same two grays the homepage
   already uses (--color-gray-section #696969 for e.g. the office-hours
   section, and .l-section--alt's #DBDBDB), instead of introducing new
   shades just for this page. */
.c-review-page__section--gray { background: #696969; }
.c-review-page__section--gray .c-review-page__eyebrow { color: #009900; }
.c-review-page__section--gray .c-review-page__heading { color: var(--rh-white); }
.c-review-page__section--lightgray { background: #DBDBDB; }

.c-review-page__eyebrow {
    display: inline-block;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--rh-green);
    margin-bottom: var(--space-2);
}
.c-review-page__heading {
    font-family: var(--poa-font-heading);
    font-size: clamp(1.75rem, 3.5vw, 2.5rem);
    font-weight: 700;
    color: var(--rh-charcoal);
    text-wrap: balance;
    margin: 0 0 var(--space-3);
}
.c-review-page__section-header { text-align: center; max-width: 42rem; margin: 0 auto var(--space-6); }

/* ── Hero ─────────────────────────────────────── */
.c-review-hero {
    position: relative;
    min-height: 30rem;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    text-align: left;
    background-size: cover;
    background-position: center;
    color: var(--rh-white);
    margin-top: calc(-1 * var(--header-offset, 0px));
    padding-top: var(--header-offset, 0px);
}
/* Fades the background photo to solid white on the left (where the text
   sits) so the green text stays legible, letting the photo show through
   on the right — kept as the hero's permanent look regardless of
   whether a side photo is also present. */
.c-review-hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, #ffffff 0%, #ffffff 50%, rgba(255,255,255,0) 100%);
}
/* .c-review-hero__inner also carries .u-container, whose margin-inline:
   auto self-centers it regardless of the parent's justify-content —
   overridden here so it sits near the left edge instead of centered,
   with a bit of breathing room via padding-left rather than flush
   against it. */
.c-review-hero__inner { position: relative; z-index: 1; max-width: 40rem; padding: var(--space-8) var(--space-4); padding-left: var(--space-7); margin-inline: 0; }

/* Mobile: center the hero instead of the left-aligned desktop treatment
   above — there's no side photo to balance against on a phone screen. */
@media (max-width: 47.9375em) {
    .c-review-hero { justify-content: center; text-align: center; }
    .c-review-hero__inner { padding-left: var(--space-4); margin-inline: auto; }
}

/* Two-column variant — text left, photo right (used whenever a Hero
   Side Photo is set in the Customizer; falls back to the centered,
   text-only layout above when it isn't). */
.c-review-hero--split .c-review-hero__inner {
    max-width: var(--content-max);
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-6);
    align-items: center;
    text-align: left;
}
@media (min-width: 62em) {
    .c-review-hero--split .c-review-hero__inner { grid-template-columns: 1.1fr 1fr; }
}
.c-review-hero__side { display: flex; justify-content: center; }
.c-review-hero__side-image {
    width: 100%;
    max-width: 26rem;
    border-radius: var(--radius-lg);
    box-shadow: var(--poa-shadow-lg);
    border: 3px solid rgba(255,255,255,.25);
}
.c-review-hero__title {
    font-family: var(--poa-font-heading);
    font-size: clamp(2rem, 5vw, 3.25rem);
    font-weight: 700;
    margin: 0 0 var(--space-3);
    text-wrap: balance;
    color: #009900;
}
.c-review-hero__subtitle { font-size: 1.0625rem; line-height: 1.7; color: #009900; max-width: 36rem; margin-inline: 0; }

/* ── Thank you ────────────────────────────────── */
.c-review-thanks {
    text-align: center;
    max-width: 42rem;
    margin-inline: auto;
    padding: var(--space-6) var(--space-4);
}
.c-review-thanks__title { font-family: var(--poa-font-heading); font-size: clamp(1.5rem,3vw,2rem); font-weight: 700; color: var(--rh-green); margin: 0 0 var(--space-3); }
.c-review-thanks__text { font-size: 1.0625rem; line-height: 1.75; color: #4A4A4A; }

/* ── Platform cards ───────────────────────────── */
.c-review-platforms { display: grid; grid-template-columns: 1fr; gap: var(--space-5); max-width: 68rem; margin-inline: auto; }
@media (min-width: 48em) { .c-review-platforms { grid-template-columns: repeat(3, 1fr); } }

.c-review-platform-card {
    background: #2E2E2E;
    border-radius: var(--radius-lg);
    box-shadow: var(--poa-shadow-md);
    padding: var(--space-6) var(--space-5);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: transform var(--duration-normal) var(--easing-standard), box-shadow var(--duration-normal) var(--easing-standard);
    border: 1px solid rgba(255,255,255,.15);
    border-top: 3px solid var(--rh-green);
}
.c-review-platform-card:hover { transform: translateY(-6px); box-shadow: var(--poa-shadow-lg); }

.c-review-platform-card__logo {
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--rh-beige);
    margin-bottom: var(--space-4);
    font-size: 1.75rem;
    color: var(--rh-green);
    overflow: hidden;
}
.c-review-platform-card__logo img { width: 100%; height: 100%; object-fit: contain; }
.c-review-platform-card__name { font-family: var(--poa-font-heading); font-size: 1.375rem; font-weight: 700; color: var(--rh-white); margin: 0 0 var(--space-2); }
.c-review-platform-card__stars { color: var(--rh-green); font-size: 1.125rem; letter-spacing: .1em; margin-bottom: var(--space-3); }
.c-review-platform-card__stars .is-empty { color: rgba(255,255,255,.25); }
.c-review-platform-card__desc { font-size: .9375rem; line-height: 1.6; color: rgba(255,255,255,.75); margin-bottom: var(--space-5); flex: 1; }

.c-review-platform-card__btn {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .875rem 1.75rem;
    background: #009900;
    color: var(--rh-white);
    font-weight: 600;
    font-size: .9375rem;
    border-radius: var(--radius-sm); /* matches .c-button sitewide, not a pill */
    text-decoration: none;
    transition: background var(--duration-fast), transform var(--duration-fast);
    width: 100%;
    justify-content: center;
}
.c-review-platform-card__btn:hover { background: #007700; color: var(--rh-white); transform: translateY(-2px); }
.c-review-platform-card__btn:focus-visible { outline: 2px solid var(--rh-green); outline-offset: 2px; }

/* ── How to leave a review (steps) ────────────── */
.c-review-steps { display: grid; grid-template-columns: 1fr; gap: var(--space-4); max-width: 68rem; margin-inline: auto; counter-reset: rh-step; }
@media (min-width: 48em) { .c-review-steps { grid-template-columns: repeat(5, 1fr); } }
.c-review-step { background: transparent; border-radius: var(--radius-lg); padding: var(--space-5) var(--space-4); text-align: center; box-shadow: none; position: relative; }
.c-review-step__number {
    counter-increment: rh-step;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: var(--rh-green);
    color: var(--rh-white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--poa-font-heading);
    font-weight: 700;
    margin: 0 auto var(--space-3);
}
.c-review-step__number::before { content: counter(rh-step); }
.c-review-step__text { font-size: .9375rem; color: var(--rh-charcoal); line-height: 1.5; margin: 0; }

/* ── Why reviews matter ───────────────────────── */
.c-review-why { display: grid; grid-template-columns: 1fr; gap: var(--space-4); max-width: 60rem; margin-inline: auto; }
@media (min-width: 48em) { .c-review-why { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 62em) { .c-review-why { grid-template-columns: repeat(3, 1fr); } }
.c-review-why__item { display: flex; align-items: flex-start; gap: var(--space-3); background: var(--rh-white); border-radius: var(--radius-md); padding: var(--space-4); box-shadow: var(--poa-shadow-sm); }
.c-review-why__icon { flex-shrink: 0; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: #009900; color: var(--rh-white); display: flex; align-items: center; justify-content: center; font-size: 1.125rem; }
.c-review-why__body { padding-top: .1rem; }
.c-review-why__title { font-size: .9375rem; color: var(--rh-charcoal); font-weight: 700; margin: 0 0 .25rem; }
.c-review-why__text { font-size: .8438rem; color: #5A5A5A; font-weight: 400; line-height: 1.5; margin: 0; }

/* ── Social sharing ───────────────────────────── */
.c-review-share { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3); }
.c-review-share__btn {
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--rh-white);
    color: var(--rh-green);
    box-shadow: var(--poa-shadow-sm);
    font-size: 1.25rem;
    border: 1px solid var(--poa-color-border);
    transition: all var(--duration-fast);
    cursor: pointer;
}
.c-review-share__btn:hover { background: var(--rh-green); color: var(--rh-white); border-color: var(--rh-green); transform: translateY(-3px); }
.c-review-share__btn:focus-visible { outline: 2px solid var(--rh-green); outline-offset: 2px; }
.c-review-share__status { text-align: center; font-size: .875rem; color: var(--rh-green); margin-top: var(--space-2); min-height: 1.2em; }

/* ── FAQ accordion ────────────────────────────── */
.c-review-faq { max-width: 46rem; margin-inline: auto; display: flex; flex-direction: column; gap: var(--space-3); }
.c-review-faq__item { background: var(--rh-white); border-radius: var(--radius-md); box-shadow: var(--poa-shadow-sm); overflow: hidden; }
.c-review-faq__question {
    width: 100%;
    text-align: left;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-4);
    background: transparent;
    border: 0;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 600;
    color: var(--rh-charcoal);
}
.c-review-faq__question:focus-visible { outline: 2px solid var(--rh-green); outline-offset: -2px; }
.c-review-faq__icon { flex-shrink: 0; color: var(--rh-green); transition: transform var(--duration-fast); }
.c-review-faq__item[data-open="true"] .c-review-faq__icon { transform: rotate(45deg); }
.c-review-faq__answer { padding: 0 var(--space-4); max-height: 0; overflow: hidden; transition: max-height var(--duration-normal) var(--easing-standard), padding var(--duration-normal); color: #5A5A5A; font-size: .9375rem; line-height: 1.6; }
.c-review-faq__item[data-open="true"] .c-review-faq__answer { padding-bottom: var(--space-4); }

@media (prefers-reduced-motion: reduce) {
    .c-review-platform-card, .c-review-platform-card__btn, .c-review-share__btn, .c-review-faq__icon, .c-review-faq__answer {
        transition: none !important;
    }
}