/* Camp and Trail Guide - Checklist Generator widget.
   Built strictly on the camptrail theme variables:
   --forest #2D5A3D, --forest-d #1E3D29, --amber #E8862D, --amber-d #C96F1E,
   --ink #2B2B2B, --mut #6B7280, --bg #FAF8F4, radius 18px, Inter. */

.ctg-tool { margin: 28px 0; }
.ctg-form-card {
  background: var(--card, #fff);
  border: 1px solid #EDE8DE;
  border-radius: var(--r, 18px);
  padding: 26px 26px 22px;
  box-shadow: 0 10px 30px rgba(45, 90, 61, .08);
}
.ctg-form-title {
  font-size: 20px; font-weight: 800; color: var(--forest, #2D5A3D);
  margin: 0 0 4px;
}
.ctg-form-sub { color: var(--mut, #6B7280); font-size: 15px; margin: 0 0 18px; }
.ctg-fields { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }
@media (max-width: 760px) { .ctg-fields { grid-template-columns: 1fr; } }
.ctg-field label {
  display: block; font-weight: 700; font-size: 13.5px;
  letter-spacing: .4px; text-transform: uppercase;
  color: var(--forest-d, #1E3D29); margin-bottom: 6px;
}
.ctg-field select {
  width: 100%; padding: 13px 14px; font-size: 16px; font-family: inherit;
  color: var(--ink, #2B2B2B); background: #EFF6F0;
  border: 2px solid #D4E5D8; border-radius: 12px; cursor: pointer;
}
.ctg-field select:focus { outline: none; border-color: var(--forest, #2D5A3D); }
.ctg-build {
  margin-top: 18px; width: 100%; border: none; cursor: pointer;
  background: var(--amber, #E8862D); color: #fff;
  font-weight: 800; font-size: 16.5px; font-family: inherit;
  padding: 15px 30px; border-radius: 999px;
  box-shadow: 0 6px 20px rgba(232, 134, 45, .4);
  transition: transform .15s, background .15s;
}
.ctg-build:hover { transform: translateY(-2px); background: var(--amber-d, #C96F1E); }

.ctg-results { margin-top: 26px; }
.ctg-results-head {
  background: linear-gradient(135deg, #1E3D29 0%, #2D5A3D 60%, #3A7250 100%);
  color: #fff; border-radius: var(--r, 18px); padding: 22px 26px;
  position: relative;
}
.ctg-results-head h3 { color: #fff; margin: 0 0 6px; font-size: 21px; line-height: 1.3; }
/* ID-level specificity: the theme's own article h3 color must never win here. */
#ctg-results .ctg-results-head h3 { color: #fff; }
@media (min-width: 761px) {
  .ctg-results-head { padding-right: 210px; }
  .ctg-item-name { flex: 0 0 190px; }
}
.ctg-results-sub { color: #D4E2D8; margin: 0; font-size: 14.5px; max-width: 620px; }
.ctg-print {
  position: absolute; top: 22px; right: 26px; border: none; cursor: pointer;
  background: var(--amber, #E8862D); color: #fff; font-weight: 800;
  font-size: 14px; font-family: inherit; padding: 11px 22px; border-radius: 999px;
  box-shadow: 0 4px 14px rgba(232, 134, 45, .4); transition: transform .15s;
}
.ctg-print:hover { transform: translateY(-2px); }
@media (max-width: 760px) {
  .ctg-print { position: static; margin-top: 14px; }
  .ctg-group label { flex-wrap: wrap; }
  .ctg-item-name { flex: 1 1 auto; }
  .ctg-item-note { flex: 1 1 100%; padding-left: 30px; }
}
.ctg-group {
  background: var(--card, #fff); border: 1px solid #EDE8DE;
  border-radius: var(--r, 18px); padding: 20px 26px 14px; margin-top: 16px;
}
.ctg-group h4 {
  color: var(--forest, #2D5A3D); font-size: 18px; margin: 0 0 10px;
  padding-bottom: 8px; border-bottom: 2px solid #EFF6F0;
}
.ctg-group ul { list-style: none; margin: 0; padding: 0; }
.ctg-group li { padding: 7px 0; border-bottom: 1px dashed #EDE8DE; }
.ctg-group li:last-child { border-bottom: none; }
.ctg-group label { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; font-size: 15.5px; }
.ctg-group input[type="checkbox"] {
  width: 20px; height: 20px; margin-top: 3px; flex: 0 0 auto;
  accent-color: var(--forest, #2D5A3D); cursor: pointer;
}
.ctg-group input[type="checkbox"]:checked ~ .ctg-item-name {
  text-decoration: line-through; color: var(--mut, #6B7280);
}
.ctg-item-note { color: var(--mut, #6B7280); font-size: 14px; }
.ctg-guide { margin: 10px 0 6px; font-size: 14.5px; }
.ctg-guide a { color: var(--amber-d, #C96F1E); font-weight: 700; }
.ctg-guide a:hover { color: var(--forest, #2D5A3D); }
.ctg-results-note {
  margin-top: 16px; font-size: 14px; color: var(--mut, #6B7280);
  background: #FFF4E8; border: 1px solid #F5DDBE; border-radius: 12px;
  padding: 12px 16px;
}

/* Print: show only the generated checklist, cleanly. */
@media print {
  body * { visibility: hidden; }
  .ctg-results, .ctg-results * { visibility: visible; }
  .ctg-results { position: absolute; top: 0; left: 0; width: 100%; margin: 0; }
  .ctg-noprint { display: none !important; }
  .ctg-results-head { background: none; color: #000; padding: 0 0 10px; }
  .ctg-results-head h3 { color: #000; }
  .ctg-results-sub { color: #333; }
  .ctg-group { border: none; padding: 10px 0; page-break-inside: avoid; }
  .ctg-group h4 { color: #000; border-bottom: 1px solid #999; }
  .ctg-item-note { color: #333; }
  .ctg-results-note { background: none; border: none; color: #333; padding: 8px 0; }
}