/**
 * @file
 * Essay Review · Copyable correct-essay block styles.
 *
 * Renders <blockquote class="essay-correct"> as a card with a chrome
 * strip (label + copy button) and a prose body. The register is
 * editorial (Georgia serif body, paper background) but the chrome
 * pattern borrows from code-block conventions so the block reads at
 * a glance as "an excerpt you can take with you".
 *
 * THEME VARIABLES (with fallbacks)
 *   --fg-paper        warm cream body background
 *   --fg-paper-aged   slightly darker cream for chrome
 *   --fg-ink          primary ink color
 *   --fg-ink-muted    muted text color
 *   --fg-hairline     hairline border color
 *   --fg-gold-dark    label and focus accent
 *
 *   All variables fall back to F1GMAT APU defaults if the active
 *   theme does not define them.
 *
 * BOOTSTRAP COMPATIBILITY
 *   BEM class names (essay-correct, essay-correct__copy) don't
 *   collide with Bootstrap 5 utility classes. The block provides
 *   its own padding, borders, and typography so it renders
 *   identically regardless of base theme.
 *
 * NO-JS BEHAVIOR
 *   Without JavaScript, the chrome strip (via ::before) and the
 *   prose body still render. Only the copy button is absent. Content
 *   remains fully readable.
 */

.essay-correct {
  position: relative;
  margin: 28px 0;
  padding: 50px 26px 24px;
  background: var(--fg-paper, #FBFAF7);
  border: 1px solid var(--fg-hairline, #D4CFC4);
  border-radius: 6px;
  font-family: Georgia, 'Times New Roman', serif;
  font-style: normal;
  color: var(--fg-ink, #1A1A1A);
  /* Bootstrap 5 and some base themes apply margin-left to
     blockquote — keep the card flush. */
  quotes: none;
}

/* Suppress any browser-default curly-quote insertion. */
.essay-correct::after {
  content: none;
}

/* Chrome strip — "Correct essay" label rendered via ::before so it
   stays visible without JavaScript. Slightly darker than the body,
   separated by a single hairline.

   Label is sentence-case at 12px / weight 500 — refined down from
   the earlier uppercase 11px / 600 which read editorial-heavy in the
   chrome strip. Gold-dark on aged-cream tested at 4.79:1 contrast,
   clearing WCAG 2.1 AA for normal text. */
.essay-correct::before {
  content: 'Correct essay';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  padding: 13px 20px;
  background: var(--fg-paper-aged, #F2EBD9);
  border-bottom: 1px solid var(--fg-hairline, #D4CFC4);
  border-radius: 6px 6px 0 0;
  font-family: Arial, Helvetica, sans-serif;
  font-style: normal;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--fg-gold-dark, #8A6B1F);
  /* Bootstrap inflates blockquote font-size; reset for chrome. */
  line-height: 1;
}

/* Body paragraphs. Bootstrap 5 also inflates blockquote child
   font-size; reset for prose readability. */
.essay-correct > p {
  margin: 0 0 14px;
  padding: 0;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--fg-ink, #1A1A1A);
}

.essay-correct > p:last-of-type {
  margin-bottom: 0;
}

/* Copy button — sits in the chrome strip's right edge.
   Restrained by default (transparent background, transparent border),
   reveals a soft border on hover. This mirrors the affordance pattern
   from Anthropic-style code blocks: present when needed, quiet when
   not.

   When two buttons are present (Copy + Copy with notes), the secondary
   variant sits to the left of the primary. Both share the same visual
   treatment. */
.essay-correct__copy {
  position: absolute;
  top: 7px;
  right: 8px;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  padding: 5px 12px;
  font-family: Arial, Helvetica, sans-serif;
  font-style: normal;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--fg-ink-muted, #6B6B6B);
  cursor: pointer;
  transition: background-color 0.15s ease,
              border-color 0.15s ease,
              color 0.15s ease;
  /* Bootstrap button reset adds line-height: 1.5 — tighten. */
  line-height: 1.3;
}

/* Secondary button: "Copy with notes" sits to the left of the primary
   Copy button. Width depends on label, so we use right offset to
   anchor it next to the primary rather than fixed pixel positioning. */
.essay-correct__copy--with-notes {
  right: 70px;
}

.essay-correct__copy:hover {
  background: var(--fg-paper, #FBFAF7);
  border-color: var(--fg-hairline, #D4CFC4);
  color: var(--fg-ink, #1A1A1A);
}

.essay-correct__copy:focus-visible {
  outline: 2px solid var(--fg-gold-dark, #8A6B1F);
  outline-offset: 1px;
}

/* "Copied" feedback — green accent for ~2s after successful copy. */
.essay-correct__copy.is-copied {
  background: rgba(21, 128, 61, 0.06);
  border-color: #15803D;
  color: #15803D;
}

/* Mobile — chrome strip needs slightly more vertical room on narrow
   screens to keep the label and button(s) from crowding. When the
   secondary "Copy with notes" button is present, give the chrome
   strip a bit more height to accommodate both. */
@media (max-width: 480px) {
  .essay-correct {
    padding: 54px 18px 20px;
  }
  .essay-correct__copy {
    top: 8px;
    right: 7px;
    padding: 4px 9px;
    font-size: 10px;
  }
  .essay-correct__copy--with-notes {
    right: 58px;
  }
}

/* Print — the copy button has no meaning on paper. Hide it; keep
   chrome strip and prose intact for offline review or client filing. */
@media print {
  .essay-correct__copy {
    display: none;
  }
}