/* ============================================================================
   MrMurse - Free Resources page styles
   Page-specific layout only; all values reference Phase 0 tokens. Composes the
   surface, card, resource-card, badge, faq, and cta-block components, and adds
   the interactive practice card, topic chips, and category cards.

   The practice card is architected so its option list and result panel can be
   driven by a future question bank without restyling (see free-resources.js).
   ========================================================================== */

/* ---------------------------------------------------------------- HERO ----- */
.fr-hero {
  background:
    radial-gradient(1000px 460px at 80% -10%, var(--c-teal-tint-10), transparent 60%),
    var(--bg-page);
  padding-top: var(--space-9);
}
.fr-hero__inner { max-width: 720px; }
.fr-hero__title { font-size: var(--fs-h1); font-weight: var(--fw-extra); margin-top: var(--space-5); }
.fr-hero__sub { font-size: var(--fs-body-lg); color: var(--text-body); margin-top: var(--space-5); max-width: 600px; }
.fr-hero__cta { display: flex; gap: var(--space-3); margin-top: var(--space-6); flex-wrap: wrap; }

/* ----------------------------------------------------- TOPIC FILTERS ------
   Four exam buttons, each opening a dropdown of focus areas. The dropdown sets
   a question into the practice card below. Works on click everywhere and on
   hover where a pointer supports it (handled in free-resources.js). */
.fr-filters {
  display: flex; flex-wrap: wrap; gap: var(--space-3);
  margin: var(--space-6) 0 var(--space-3);
}
.fr-filter { position: relative; }
.fr-filter__btn {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-size: var(--fs-body-sm); font-weight: var(--fw-bold); color: var(--text-primary);
  background: var(--surface); border: var(--border-width) solid var(--border-strong);
  padding: 10px 16px; border-radius: var(--radius-pill);
  box-shadow: var(--shadow-sm); cursor: pointer;
  transition: border-color var(--dur-base) var(--ease-standard), background var(--dur-base) var(--ease-standard);
}
.fr-filter__btn:hover { border-color: var(--accent); background: var(--c-teal-tint-08); }
.fr-filter__btn[aria-expanded="true"] { border-color: var(--accent); background: var(--c-teal-tint-08); }
.fr-filter__chev { transition: transform var(--dur-base) var(--ease-standard); color: var(--accent-strong); }
.fr-filter__btn[aria-expanded="true"] .fr-filter__chev { transform: rotate(180deg); }

.fr-filter__menu {
  position: absolute; top: calc(100% + 8px); left: 0; z-index: var(--z-dropdown);
  min-width: 220px; background: var(--surface);
  border: var(--border-width) solid var(--border); border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg); padding: var(--space-2); gap: 2px;
  display: none;
}
/* Invisible bridge across the visual gap so moving the cursor from the button
   to the menu does not leave the hover area and close it. */
.fr-filter__menu::before {
  content: ""; position: absolute; left: 0; right: 0; top: -10px; height: 10px;
}
/* Open on click (.is-open set by JS) or on hover where a pointer supports it. */
.fr-filter.is-open .fr-filter__menu { display: grid; }
@media (hover: hover) {
  .fr-filter:hover .fr-filter__menu { display: grid; }
  .fr-filter:hover .fr-filter__chev { transform: rotate(180deg); }
}
/* When JS is off, menus stay hidden (display:none) and the page still shows the
   default question, so nothing breaks. */
.fr-filter__item {
  text-align: left; width: 100%;
  font-size: var(--fs-body-sm); font-weight: var(--fw-medium); color: var(--text-body);
  background: none; border: 0; border-radius: var(--radius-sm);
  padding: 10px 12px; cursor: pointer;
  transition: background var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard);
}
.fr-filter__item:hover, .fr-filter__item:focus-visible {
  background: var(--c-teal-tint-10); color: var(--accent-strong); outline: none;
}
.fr-filters__hint { font-size: var(--fs-caption); color: var(--text-muted); margin-bottom: var(--space-6); }

@media (max-width: 560px) {
  .fr-filter, .fr-filter__btn { width: 100%; }
  .fr-filter__btn { justify-content: space-between; }
  .fr-filter__menu { width: 100%; }
}

/* ----------------------------------------------------- PRACTICE CARD ------- */
.fr-quiz { max-width: 760px; }
.fr-quiz__meta { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-bottom: var(--space-4); align-items: center; }
.fr-quiz__count { font-size: var(--fs-caption); color: var(--text-muted); font-weight: var(--fw-semibold); margin-left: auto; }
.fr-quiz__fieldset { border: 0; padding: 0; margin: 0; }
.fr-quiz__stem {
  font-size: var(--fs-body-lg); font-weight: var(--fw-bold); color: var(--text-primary);
  line-height: var(--lh-snug); margin-bottom: var(--space-5); padding: 0;
}

.fr-option {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-4);
  border: var(--border-width) solid var(--border); border-radius: var(--radius-md);
  cursor: pointer; margin-bottom: var(--space-3);
  transition: border-color var(--dur-base) var(--ease-standard), background var(--dur-base) var(--ease-standard);
}
.fr-option:hover { border-color: var(--border-strong); }
.fr-option input { position: absolute; opacity: 0; width: 0; height: 0; }
.fr-option__key {
  flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%;
  border: 1.5px solid var(--border-strong);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: var(--fs-body-sm); font-weight: var(--fw-bold); color: var(--text-muted);
  transition: border-color var(--dur-base), background var(--dur-base), color var(--dur-base);
}
.fr-option__text { flex-grow: 1; font-size: var(--fs-body-sm); color: var(--text-body); }
.fr-option__mark { flex-shrink: 0; width: 20px; height: 20px; }

/* selected (pre-check) */
.fr-option input:checked ~ .fr-option__key { border-color: var(--accent); color: var(--accent-strong); }
.fr-option:has(input:checked) { border-color: var(--accent); background: var(--c-teal-tint-08); }
.fr-option input:focus-visible ~ .fr-option__key { outline: var(--focus-ring) solid var(--border-focus); outline-offset: 2px; }

/* graded states (added by JS after Check Answer) */
.fr-quiz--checked .fr-option { cursor: default; }
.fr-option--correct { border-color: var(--c-success); background: var(--c-success-bg); }
.fr-option--correct .fr-option__key { border-color: var(--c-success); background: var(--c-success); color: #fff; }
.fr-option--incorrect { border-color: var(--c-error); background: var(--c-error-bg); }
.fr-option--incorrect .fr-option__key { border-color: var(--c-error); background: var(--c-error); color: #fff; }
.fr-option__mark svg { width: 20px; height: 20px; }
.fr-option--correct .fr-option__mark { color: var(--c-success); }
.fr-option--incorrect .fr-option__mark { color: var(--c-error); }

.fr-quiz__actions { display: flex; align-items: center; gap: var(--space-4); margin-top: var(--space-5); flex-wrap: wrap; }
.fr-quiz__hint { font-size: var(--fs-caption); color: var(--text-muted); }

/* result panel */
.fr-result { margin-top: var(--space-6); padding-top: var(--space-6); border-top: var(--border-width) solid var(--border); }
.fr-result__status { font-size: var(--fs-h4); font-weight: var(--fw-extra); margin-bottom: var(--space-4); }
.fr-result__status--correct { color: var(--c-success); }
.fr-result__status--incorrect { color: var(--c-error); }
.fr-result__lead { font-size: var(--fs-body-sm); color: var(--text-body); }
.fr-result__list { display: grid; gap: var(--space-2); margin: var(--space-4) 0; }
.fr-result__list li { font-size: var(--fs-body-sm); color: var(--text-body); }
.fr-result__list b { color: var(--text-primary); }
.fr-result__takeaway { margin-top: var(--space-4); }
.fr-result__actions { display: flex; gap: var(--space-3); margin-top: var(--space-5); flex-wrap: wrap; }
.fr-result__soon { font-size: var(--fs-caption); color: var(--text-muted); margin-top: var(--space-4); }

/* ----------------------------------------------------- CATEGORY CARDS ------ */
.fr-cats { margin-top: var(--space-7); }
.fr-cat { text-align: left; display: flex; flex-direction: column; }
.fr-cat__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-2); }
.fr-cat__title { font-size: var(--fs-h4); }
.fr-cat__text { font-size: var(--fs-body-sm); color: var(--text-body); }
/* Clickable (live) exam cards: button reset + interactive affordance. */
.fr-cat--live {
  cursor: pointer; width: 100%; font: inherit;
  transition: transform var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard), border-color var(--dur-base) var(--ease-standard);
}
.fr-cat--live:hover, .fr-cat--live:focus-visible {
  transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--c-teal-tint-18); outline: none;
}
.fr-cat__cue {
  margin-top: var(--space-4); font-size: var(--fs-body-sm); font-weight: var(--fw-bold);
  color: var(--accent-strong); display: inline-flex; align-items: center; gap: 6px;
}
.fr-cat__cue::after { content: "\2192"; transition: transform var(--dur-base) var(--ease-standard); }
.fr-cat--live:hover .fr-cat__cue::after { transform: translateX(3px); }
.fr-cat--soon { opacity: 0.96; }
.fr-cat--soon .fr-cat__title { color: var(--text-primary); }

/* ----------------------------------------------------- CATEGORY MODAL ------ */
.cat-modal { width: min(600px, calc(100% - var(--space-6))); position: fixed; inset: 0; margin: auto; max-height: calc(100dvh - var(--space-6)); overflow-y: auto; }
.cat-modal .eyebrow { margin-bottom: var(--space-3); }
.cat-modal__title { font-size: var(--fs-h2); margin-bottom: var(--space-2); }
.cat-modal__lead { font-size: var(--fs-body-sm); color: var(--text-muted); margin-bottom: var(--space-5); }
.cat-modal__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); margin-bottom: var(--space-6); }
.cat-comp {
  display: flex; flex-direction: column; gap: 2px;
  background: var(--bg-alt); border: var(--border-width) solid var(--border);
  border-radius: var(--radius-md); padding: var(--space-4);
}
.cat-comp__name { font-size: var(--fs-body); font-weight: var(--fw-bold); color: var(--text-primary); }
.cat-comp__meta { font-size: var(--fs-caption); color: var(--text-muted); }
@media (max-width: 560px) { .cat-modal__grid { grid-template-columns: 1fr; } }

/* ----------------------------------------------------- FIT SECTION --------- */
.fr-fit { text-align: center; }
.fr-fit .section-head { margin-bottom: var(--space-5); }
.fr-fit__text { font-size: var(--fs-body-lg); color: var(--text-body); max-width: 640px; margin-inline: auto; }
.fr-fit__cta { display: flex; gap: var(--space-3); justify-content: center; margin-top: var(--space-6); flex-wrap: wrap; }

/* ----------------------------------------------------- FAQ ----------------- */
.fr-faq { max-width: 820px; }