/* ==================================================
   Flyshop Background & Page Surface (Scoped)
   ================================================== */

/* Light page background ONLY for Flyshop pages */
body:has(.flyshop),
body:has(.flyshop-setup) {
  background-color: #f5f6f7;
}

/* Main content surface */
.flyshop,
.flyshop-setup {
  background-color: #ffffff;
  border-radius: 6px;

  /* Subtle page separation */
  box-shadow:
    0 0 0 9999px #f5f6f7,     /* fallback page background */
    0 1px 2px rgba(0,0,0,0.04),
    0 8px 24px rgba(0,0,0,0.04);
}


/* ==================================================
   Flyshop Text Color Reset (Scoped)
   ================================================== */

.flyshop,
.flyshop-setup {
  color: #333;
}


/* Ensure common text elements inherit correctly */
.flyshop p,
.flyshop-setup p,
.flyshop li,
.flyshop-setup li,
.flyshop h1,
.flyshop-setup h1,
.flyshop h2,
.flyshop-setup h2,
.flyshop h3,
.flyshop-setup h3 {
  color: inherit;
}

/* ==================================================
   RFF Flyshop — Field Guide Styling
   ================================================== */

.flyshop,
.flyshop-setup {
  max-width: 860px;
  margin: 0 auto;
  padding: 3rem 1.25rem 4rem;
  line-height: 1.7;
}

/* Headings */
.flyshop h1,
.flyshop-setup h1 {
  font-size: 2.2rem;
  margin-bottom: 1rem;
  letter-spacing: -0.02em;
}

.flyshop h2,
.flyshop-setup h2 {
  font-size: 1.5rem;
  margin: 3rem 0 1rem;
  border-bottom: 1px solid #e4e6e8;
  padding-bottom: 0.4rem;
}

.flyshop h3,
.flyshop-setup h3 {
  font-size: 1.15rem;
  margin-top: 2rem;
}

/* Intro / Lead */
.flyshop .lead,
.flyshop-setup .lead {
  font-size: 1.1rem;
  color: #444;
  margin-bottom: 1.5rem;
}

/* Paragraphs */
.flyshop p,
.flyshop-setup p {
  margin: 0.75rem 0 1.25rem;
}

/* Lists */
.flyshop ul,
.flyshop-setup ul,
.flyshop ol,
.flyshop-setup ol {
  margin: 0.75rem 0 1.5rem 1.25rem;
}

.flyshop li,
.flyshop-setup li {
  margin-bottom: 0.4rem;
}

/* Sections */
.flyshop section,
.flyshop-setup section {
  margin-bottom: 2.5rem;
}

/* Links */
.flyshop a,
.flyshop-setup a {
  color: #1b4f72;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.flyshop a:hover,
.flyshop-setup a:hover {
  color: #163d57;
}

/* Subtle callout feel (optional later) */
.flyshop .note,
.flyshop-setup .note {
  background: #f7f9fb;
  border-left: 4px solid #cfd6dc;
  padding: 1rem 1.25rem;
  margin: 2rem 0;
  font-size: 0.95rem;
}

/* Mobile refinement */
@media (max-width: 640px) {
  .flyshop,
  .flyshop-setup {
    padding: 2rem 1rem 3rem;
  }

  .flyshop h1,
  .flyshop-setup h1 {
    font-size: 1.9rem;
  }
}
.flyshop-back {
  margin-bottom: 2rem;
  font-size: 0.9rem;
}

.flyshop-back a {
  color: #555;
  text-decoration: none;
}

.flyshop-back a:hover {
  text-decoration: underline;
}
/* =========================================
   Flyshop TOC Accordions
   ========================================= */

.flyshop-toc details {
  margin-bottom: 1.5rem;
  border-bottom: 1px solid #e4e6e8;
  padding-bottom: 0.75rem;
}

.flyshop-toc summary {
  font-size: 1.1rem;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}

.flyshop-toc summary::marker {
  display: none;
}

.flyshop-toc summary::before {
  content: "▸ ";
  color: #777;
}

.flyshop-toc details[open] summary::before {
  content: "▾ ";
}

.flyshop-toc .toc-desc {
  margin: 0.5rem 0 0.75rem;
  color: #555;
  font-size: 0.95rem;
}

.flyshop-toc ul {
  margin-left: 1.25rem;
}