/* Field Guide Scavenger Hunt — /hawaii-field-guides#hunt
 * Scoped .fgh-* system. Data: _data/field_guide_hunt.yml via
 * _includes/field-guide-hunt.html; behavior: field-guide-hunt-v1.js.
 * px font sizes per site rules (html{font-size:62.5%} makes rem = 10px). */

.fgh-wrap {
  margin: 34px 0 0;
  padding: 26px 22px 30px;
  background: linear-gradient(135deg, #fdfaf3 0%, #f6f1e4 100%);
  border: 1px solid #e5dcc3;
  border-radius: 18px;
}
.fgh-head { text-align: center; max-width: 720px; margin: 0 auto 6px; }
.fgh-eyebrow {
  display: inline-block;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: #92690c;
  background: #fdf6e3;
  border: 1px solid #ecd9a0;
  border-radius: 999px;
  padding: 4px 14px;
  margin: 0 0 12px;
}
.fgh-head h2 { font-size: 27px; line-height: 1.2; margin: 0 0 8px; color: #173047; }
.fgh-head p { font-size: 16px; line-height: 1.55; color: #4f5b61; margin: 0; }

/* Overall progress */
.fgh-overall { max-width: 560px; margin: 18px auto 8px; text-align: center; }
.fgh-overall-count { font-size: 20px; font-weight: 800; color: #173047; margin: 0 0 8px; }
.fgh-overall-count b { color: #1D9771; }
.fgh-bar { height: 12px; border-radius: 6px; background: #e9e2cf; overflow: hidden; }
.fgh-bar-fill {
  height: 100%;
  border-radius: 6px;
  background: linear-gradient(90deg, #F27A24, #1866B4, #c3232f, #1D9771);
  transition: width 0.5s ease;
}
@media (prefers-reduced-motion: reduce) { .fgh-bar-fill { transition: none; } }
.fgh-save-note { font-size: 14px; color: #7a7261; margin: 10px 0 0; }
.fgh-save-note a { color: #1D9771; font-weight: 700; text-decoration: none; }

/* Guide cards */
.fgh-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 18px;
  margin: 22px 0 0;
}
.fgh-card {
  background: #fff;
  border: 1px solid #e2dcc9;
  border-radius: 14px;
  padding: 18px 16px 14px;
  display: flex;
  flex-direction: column;
}
.fgh-card-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 0 0 8px; }
.fgh-card h3 { font-size: 19px; line-height: 1.25; margin: 0; color: #173047; }
.fgh-card-tally { font-size: 14px; font-weight: 700; color: #6b7280; white-space: nowrap; }
.fgh-card-bar { height: 8px; border-radius: 4px; background: #efece1; overflow: hidden; margin: 0 0 12px; }
.fgh-card-fill { height: 100%; border-radius: 4px; transition: width 0.4s ease; }
@media (prefers-reduced-motion: reduce) { .fgh-card-fill { transition: none; } }

.fgh-list { list-style: none; margin: 0; padding: 0; }
.fgh-item { border-top: 1px solid #f2efe5; }
.fgh-item:first-child { border-top: none; }
/* Whole row is one tap target — button, not checkbox input, so the
 * site-wide `main input` rules never reach in. */
.fgh-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  background: none;
  border: none;
  border-radius: 8px;
  padding: 9px 6px;
  margin: 0;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  /* Buttons don't inherit color by default (UA buttontext) — inherit the
   * row's accent so the done-state check + name pick it up. */
  color: inherit;
}
.fgh-check:hover { background: #faf8f0; }
.fgh-check:focus-visible { outline: 2px solid #1D9771; outline-offset: 1px; }
.fgh-check i {
  flex: 0 0 auto;
  font-size: 18px;
  line-height: 1.3;
  color: #cfc8b2;
}
.fgh-item.fgh-done .fgh-check i { color: inherit; }
.fgh-item-name { display: block; font-size: 16px; font-weight: 700; line-height: 1.3; color: #1f2937; }
.fgh-item.fgh-done .fgh-item-name { color: inherit; }
.fgh-item-sub { font-weight: 400; font-style: italic; color: #8a8471; font-size: 14px; margin-left: 4px; }
.fgh-item-hint { display: block; font-size: 14px; line-height: 1.4; color: #6b7280; margin-top: 1px; }
.fgh-item-date { margin-left: auto; flex: 0 0 auto; font-size: 13px; color: #9ca3af; white-space: nowrap; padding-top: 2px; }

/* Completed-guide flourish */
.fgh-card-done-line {
  display: none;
  font-size: 14px;
  font-weight: 700;
  color: #92690c;
  background: #fdf6e3;
  border: 1px solid #ecd9a0;
  border-radius: 999px;
  padding: 4px 12px;
  margin: 10px auto 2px;
}
.fgh-card.fgh-complete .fgh-card-done-line { display: inline-block; }
.fgh-card-foot { margin-top: auto; padding-top: 10px; text-align: center; }
.fgh-card-foot a { font-size: 14px; font-weight: 700; color: #1866B4; text-decoration: none; }

@media (max-width: 560px) {
  .fgh-wrap { padding: 20px 14px 24px; }
  .fgh-head h2 { font-size: 23px; }
}