/**
 * Armchair Journal — Review Corner Visual System
 *
 * Implements questionnaire form, baseline summary cards,
 * reader reviews list, and accessible interactive states.
 *
 * @package Kadence_Child
 */

/* ==========================================================================
   1. Container & Card
   ========================================================================== */

.aj-review-corner {
  width: 100%;
}

.aj-rc-card {
  background-color: #ffffff;
  border: 1px solid var(--aj-color-rule-light, #dfe3ea);
  border-radius: var(--aj-radius-14, 14px);
  padding: 32px 38px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.aj-rc-eyebrow {
  font-family: var(--aj-font-sans, 'IBM Plex Sans', sans-serif);
  font-size: var(--aj-fs-10, 10px);
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--aj-color-ink-secondary, #616a78);
  margin-bottom: 9px;
}

.aj-rc-header {
  border-bottom: 1px solid #ece6dc;
  padding-bottom: 20px;
  margin-bottom: 26px;
}

.aj-rc-title {
  font-family: var(--aj-font-serif, 'EB Garamond', Georgia, serif);
  font-size: 23px;
  color: var(--aj-color-navy-primary, #1a3d74);
  font-weight: 500;
  line-height: 1.3;
  margin: 0;
}

.aj-rc-reward-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 10px;
  font-family: var(--aj-font-sans, 'IBM Plex Sans', sans-serif);
  font-size: var(--aj-fs-11-5, 11.5px);
  font-weight: 700;
  color: var(--aj-color-status-credit, #2e7d4f);
}

/* The guide's nomination link, beside the reward line. Not on the artboard. */
.aj-rc-header .aj-feature-text-button {
  margin-left: 16px;
  font-family: var(--aj-font-sans, 'IBM Plex Sans', sans-serif);
  font-size: 12px;
  font-weight: 600;
  color: var(--aj-color-navy-primary, #1a3d74);
}

.aj-rc-coin-wrap {
  width: 14px;
  height: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.aj-rc-coin-wrap img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* ==========================================================================
   2. Questionnaire Form Grid
   ========================================================================== */

.aj-rc-form {
  width: 100%;
}

/* Bottom aligned: the live site's "Did you find it insightful?" wraps where the
   artboard's shorter "Is it insightful?" did not, so the dividers and options
   line up across the three columns whatever the heading length. */
.aj-rc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  align-items: end;
}

.aj-rc-question-col {
  border: none;
  padding: 0;
  margin: 0;
  min-width: 0;
}

.aj-rc-question-title {
  font-family: var(--aj-font-serif, 'EB Garamond', Georgia, serif);
  font-size: 17px;
  font-weight: 500;
  color: var(--aj-color-navy-primary, #1a3d74);
  margin-bottom: 13px;
  padding-bottom: 11px;
  border-bottom: 1px solid #f0ebe3;
  line-height: 1.25;
  width: 100%;
  display: block;
}

.aj-rc-options-list {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.aj-rc-option-label {
  display: flex;
  align-items: center;
  gap: 11px;
  cursor: pointer;
  padding: 6px 9px;
  border-radius: var(--aj-radius-7, 7px);
  background-color: transparent;
  transition: background-color 0.15s ease;
  user-select: none;
  position: relative;
}

.aj-rc-option-label:hover {
  background-color: #f6f2ec;
}

/* Custom Radio Circle */
.aj-rc-radio-custom {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1.5px solid var(--aj-color-rule-light, #dfe3ea);
  background-color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.aj-rc-radio-icon {
  width: 14px;
  height: 14px;
  object-fit: contain;
  filter: brightness(0) sepia(1) saturate(5) hue-rotate(185deg) brightness(0.5);
  opacity: 0;
  transform: scale(0.7);
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.aj-rc-option-text {
  font-family: var(--aj-font-sans, 'IBM Plex Sans', sans-serif);
  font-size: var(--aj-fs-13, 13px);
  color: var(--aj-color-ink-body, #474f5c);
  font-weight: 600;
  white-space: nowrap;
  transition: color 0.15s ease, font-weight 0.15s ease;
}

/* Native radio, visually replaced by .aj-rc-radio-custom. Kept in flow inside the
   label so :focus-visible still reaches the circle, and deliberately NOT using
   .screen-reader-text, whose :focus rule would pull the input to the viewport corner. */
.aj-rc-radio-input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Checked Radio State */
.aj-rc-radio-input:checked + .aj-rc-radio-custom,
.aj-rc-option-label.is-selected .aj-rc-radio-custom {
  border-color: var(--aj-color-navy-primary, #1a3d74);
  background-color: #ffffff;
}

.aj-rc-radio-input:checked + .aj-rc-radio-custom .aj-rc-radio-icon,
.aj-rc-option-label.is-selected .aj-rc-radio-icon {
  opacity: 1;
  transform: scale(1);
}

.aj-rc-radio-input:checked ~ .aj-rc-option-text,
.aj-rc-option-label.is-selected .aj-rc-option-text {
  color: var(--aj-color-navy-primary, #1a3d74);
  font-weight: 700;
}

.aj-rc-option-label:has(.aj-rc-radio-input:checked),
.aj-rc-option-label.is-selected {
  background-color: #eef3fa;
}

/* Focus-visible for Accessible Radio Options */
.aj-rc-radio-input:focus-visible + .aj-rc-radio-custom,
.aj-rc-option-label:focus-visible {
  outline: 2px solid var(--aj-color-navy-primary, #1a3d74);
  outline-offset: 2px;
}

/* Submit Action Button */
.aj-rc-submit-wrap {
  margin-top: 28px;
}

.aj-rc-submit-btn {
  width: 100%;
  background-color: var(--aj-color-navy-primary, #1a3d74);
  color: #ffffff;
  border: none;
  font-family: var(--aj-font-sans, 'IBM Plex Sans', sans-serif);
  font-size: var(--aj-fs-13, 13px);
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 15px;
  border-radius: var(--aj-radius-7, 7px);
  cursor: pointer;
  transition: background-color 0.2s ease, opacity 0.2s ease;
}

.aj-rc-submit-btn:disabled {
  opacity: 0.75;
  cursor: not-allowed;
}

.aj-rc-submit-btn:not(:disabled) {
  background-color: var(--aj-color-red-primary, #c33d29);
  box-shadow: 0 4px 12px rgba(195, 61, 41, 0.35);
}

.aj-rc-submit-btn:not(:disabled):hover {
  background-color: var(--aj-color-red-hover, #a83424);
}

.aj-rc-submit-btn:focus-visible {
  outline: 2px solid var(--aj-color-navy-primary, #1a3d74);
  outline-offset: 2px;
}

/* All three questions answered — same enabled treatment, stated explicitly so the
   ready state does not depend on :not(:disabled) alone. */
.aj-rc-submit-btn.is-ready {
  background-color: var(--aj-color-red-primary, #c33d29);
  box-shadow: 0 4px 12px rgba(195, 61, 41, 0.35);
  opacity: 1;
}

.aj-rc-submit-btn.is-ready:hover {
  background-color: var(--aj-color-red-hover, #a83424);
}

/* Frontend submission recorded. Settles to the existing positive-status green;
   stays fully opaque so the confirmation reads as a result, not a dimmed control. */
.aj-rc-submit-btn.is-submitted,
.aj-rc-submit-btn.is-submitted:disabled {
  background-color: var(--aj-color-status-credit, #2e7d4f);
  box-shadow: none;
  opacity: 1;
  cursor: default;
}

/* Signed-out reader. The control stays inert no matter how many answers are picked,
   so it is painted as a locked affordance rather than a primed one. It carries
   aria-disabled instead of disabled to stay focusable, hence the :hover override:
   without it .aj-rc-submit-btn:not(:disabled):hover would flip it to the primed red. */
.aj-rc-submit-btn.is-locked,
.aj-rc-submit-btn.is-locked:hover,
.aj-rc-submit-btn.is-locked:disabled {
  background-color: var(--aj-color-navy-primary, #1a3d74);
  box-shadow: none;
  opacity: 0.6;
  cursor: not-allowed;
}

/* Submission confirmation for signed-in readers. Rendered hidden by review-corner.php
   and revealed by article.js, which sets the text and .is-success rather than
   inline colours. */
.aj-rc-feedback {
  margin-top: 14px;
  padding: 13px 16px;
  border-radius: var(--aj-radius-7, 7px);
  font-family: var(--aj-font-sans, 'IBM Plex Sans', sans-serif);
  font-size: var(--aj-fs-13, 13px);
  line-height: 1.5;
}

.aj-rc-feedback.is-success {
  background-color: #edf8f1;
  border: 1px solid rgba(46, 125, 79, 0.3);
  color: var(--aj-color-status-credit, #2e7d4f);
  font-weight: 700;
}

/* Logged-out Notice */
.aj-rc-login-notice {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 14px;
  background-color: #fdf1ee;
  border: 1px solid rgba(195, 61, 41, 0.3);
  border-radius: var(--aj-radius-7, 7px);
  padding: 13px 16px;
}

.aj-rc-notice-text {
  font-family: var(--aj-font-sans, 'IBM Plex Sans', sans-serif);
  font-size: var(--aj-fs-13, 13px);
  color: #8f2f20;
  line-height: 1.5;
}

.aj-rc-notice-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.aj-rc-btn-login {
  display: inline-flex;
  align-items: center;
  background-color: var(--aj-color-red-primary, #c33d29);
  color: #ffffff;
  text-decoration: none;
  font-family: var(--aj-font-sans, 'IBM Plex Sans', sans-serif);
  font-size: var(--aj-fs-11, 11px);
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 9px 16px;
  border-radius: var(--aj-radius-6, 6px);
  white-space: nowrap;
  transition: background-color 0.15s ease;
}

.aj-rc-btn-login:hover {
  background-color: var(--aj-color-red-hover, #a83424);
}

.aj-rc-link-register {
  font-family: var(--aj-font-sans, 'IBM Plex Sans', sans-serif);
  font-size: var(--aj-fs-11, 11px);
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--aj-color-navy-primary, #1a3d74);
  text-decoration: none;
  white-space: nowrap;
}

.aj-rc-link-register:hover {
  text-decoration: underline;
}

/* ==========================================================================
   3. Baseline Rating Summary Cards
   ========================================================================== */

.aj-rc-summary-section {
  margin-top: 32px;
}

.aj-rc-summary-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.aj-rc-summary-card {
  background-color: #f7f4ef;
  border: 1px solid #ece6dc;
  border-radius: var(--aj-radius-10, 10px);
  padding: 22px;
  text-align: center;
}

.aj-rc-card-label {
  font-family: var(--aj-font-mono, 'IBM Plex Mono', monospace);
  font-size: var(--aj-fs-9-5, 9.5px);
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--aj-color-ink-muted, #616a79);
  margin-bottom: 10px;
}

.aj-rc-card-score {
  font-family: var(--aj-font-serif, 'EB Garamond', Georgia, serif);
  font-size: 34px;
  color: var(--aj-color-navy-primary, #1a3d74);
  line-height: 1;
}

.aj-rc-card-verdict {
  font-family: var(--aj-font-sans, 'IBM Plex Sans', sans-serif);
  font-size: var(--aj-fs-12, 12px);
  color: #74706a;
  margin-top: 4px;
}

.aj-rc-card-dots {
  display: inline-flex;
  gap: 2px;
  align-items: center;
  margin-top: 14px;
  background-color: #ffffff;
  border: 1.5px solid rgba(26, 58, 107, 0.28);
  border-radius: var(--aj-radius-20, 20px);
  padding: 3px 8px;
  box-shadow: 0 1px 3px rgba(26, 58, 107, 0.12);
}

.aj-rc-summary-coin {
  width: 18px;
  height: 18px;
  object-fit: contain;
  filter: brightness(0) sepia(1) saturate(5) hue-rotate(185deg) brightness(0.5);
}

/* Divider */
.aj-rc-divider {
  border: none;
  border-top: 1px solid #ece6dc;
  margin: 32px 0;
}

/* ==========================================================================
   4. Reader Reviews Section
   ========================================================================== */

.aj-rc-reviews-section {
  width: 100%;
}

.aj-rc-reviews-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 20px;
}

.aj-rc-reviews-title {
  font-family: var(--aj-font-serif, 'EB Garamond', Georgia, serif);
  font-size: 19px;
  color: var(--aj-color-navy-primary, #1a3d74);
  font-weight: 500;
  margin: 0;
}

.aj-rc-reviews-count {
  font-family: var(--aj-font-sans, 'IBM Plex Sans', sans-serif);
  font-size: var(--aj-fs-11, 11px);
  font-weight: 700;
  color: var(--aj-color-ink-secondary, #616a78);
}

.aj-rc-reviews-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.aj-rc-review-item {
  padding: 20px 0;
  border-bottom: 1px solid #f0ebe3;
}

.aj-rc-review-item:last-child {
  border-bottom: none;
}

.aj-rc-review-author-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.aj-rc-review-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: var(--aj-color-navy-primary, #1a3d74);
  color: #ffffff;
  font-family: var(--aj-font-serif, 'EB Garamond', Georgia, serif);
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.aj-rc-review-author-meta {
  flex: 1;
}

.aj-rc-review-author-name {
  font-family: var(--aj-font-sans, 'IBM Plex Sans', sans-serif);
  font-size: var(--aj-fs-13, 13px);
  font-weight: 700;
  color: #1f2530;
}

.aj-rc-review-date {
  font-family: var(--aj-font-sans, 'IBM Plex Sans', sans-serif);
  font-size: var(--aj-fs-11, 11px);
  color: var(--aj-color-ink-muted, #616a79);
}

/* A reader's own rating, beside the date (Mobile Article.dc.html). */
.aj-rc-review-sub {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
}

.aj-rc-review-rating {
  display: inline-flex;
  gap: 1px;
}

.aj-rc-review-coin {
  width: 12px;
  height: 12px;
  object-fit: contain;
  filter: brightness(0) sepia(1) saturate(5) hue-rotate(185deg) brightness(0.5);
}

.aj-rc-review-quote {
  font-family: var(--aj-font-serif, 'EB Garamond', Georgia, serif);
  font-size: 16.5px;
  color: #3b3f47;
  line-height: 1.65;
  font-style: italic;
  border-left: 3px solid #dfe3ea;
  padding-left: 16px;
  margin: 0;
}

.aj-rc-review-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 13px;
  padding-left: 19px;
}

.aj-rc-upvote-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1.5px solid #dfe3ea;
  background-color: #ffffff;
  border-radius: var(--aj-radius-20, 20px);
  padding: 5px 13px 5px 9px;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.aj-rc-upvote-btn:hover,
.aj-rc-upvote-btn.is-voted {
  background-color: #fdf7e8;
  border-color: var(--aj-color-gold-accent, #dcb352);
}

.aj-rc-upvote-coin {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  flex-shrink: 0;
}

.aj-rc-upvote-label {
  font-family: var(--aj-font-mono, 'IBM Plex Mono', monospace);
  font-size: var(--aj-fs-10-5, 10.5px);
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--aj-color-ink-secondary, #616a78);
  white-space: nowrap;
}

.aj-rc-upvote-btn.is-voted .aj-rc-upvote-label {
  color: var(--aj-color-gold-text, #8a6a17);
}

.aj-rc-upvote-btn:focus-visible {
  outline: 2px solid var(--aj-color-navy-primary, #1a3d74);
  outline-offset: 2px;
}

/* Auth Reminder Footnote */
.aj-rc-auth-foot {
  text-align: center;
  font-family: var(--aj-font-sans, 'IBM Plex Sans', sans-serif);
  font-size: var(--aj-fs-12-5, 12.5px);
  color: var(--aj-color-ink-secondary, #616a78);
  margin-top: 14px;
}

.aj-rc-auth-link {
  color: var(--aj-color-navy-primary, #1a3d74);
  font-weight: 700;
  text-decoration: underline;
}

/* ==========================================================================
   5. Responsive Breakpoints
   ========================================================================== */

@media (max-width: 720px) {
  .aj-rc-card {
    padding: 24px 20px;
  }

  .aj-rc-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .aj-rc-summary-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .aj-rc-login-notice {
    flex-direction: column;
    align-items: flex-start;
  }
}