/* ======================================================
   snippet.css — 01.14.2026 — CST (America/Chicago)
   Snippet Parser + Accordion Styling (scoped)
   ====================================================== */

/* ---------------------------------------------
   ACCORDION WRAPPER
   --------------------------------------------- */
.tbp-accordion{
  width: 100%;
  max-width: 980px;
  margin: 0 auto;
}

/* Each accordion panel */
.tbp-accordion details{
  background: #111;
  border-radius: 10px;
  margin: 10px 10px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.06);
}

/* ---------------------------------------------
   ACCORDION TITLE BAR — matches mobile menu vibe
   --------------------------------------------- */
.tbp-accordion summary{
  cursor: pointer;
  user-select: none;
  list-style: none;
  padding: 12px 14px;

  /* “menu pill” look */
  background: rgba(255,255,255,.05);
  border-bottom: 1px solid rgba(255,255,255tba255,.06);

  /* typography to match menu */
  font-size: 20px;
  font-weight: 700;
  color: #F0ECB6; /* Honey */
  letter-spacing: .2px;

  display: flex;
  align-items: center;
  gap: 10px;
}

/* remove default marker */
.tbp-accordion summary::-webkit-details-marker{ display:none; }

/* Left arrow triangle */
.tbp-accordion summary::before{
  content: "▼";
  color: #EBD96F;  /* Gold */
  font-size: 16px;
  transform: rotate(-90deg); /* closed state */
  transition: transform .18s ease;
}

/* Open state arrow */
.tbp-accordion details[open] summary::before{
  transform: rotate(0deg);
}

/* Hover feel like menu */
.tbp-accordion summary:hover{
  background: rgba(255,255,255,.08);
}

/* Panel body spacing */
.tbp-accordion details > .tbp-snippet-raw{
  padding: 12px 14px 16px;
}


/* ======================================================
   SNIPPET TAG STYLING (scoped)
   Matches parser output: .tbp-note/.tbp-offer/etc
   ====================================================== */

.tbp-snippet-raw{
  margin: 0;
}

/* headings */
.tbp-snippet-raw h1{
  font-size: 2.50rem;  /* 40px */
  font-weight: 700;
  color: #FFFFFF;
  margin: 14px 0 8px;
}
.tbp-snippet-raw h2{
  font-size: 2.00rem;  /* 32px */
  font-weight: 600;
  color: #FFD000;
  margin: 14px 0 10px;
}
.tbp-snippet-raw h3{
  font-size: 1.50rem;  /* 24px */
  font-weight: 600;
  color: #FFA346;
  margin: 12px 0 8px;
}

/* base paragraph */
.tbp-snippet-raw p{
  margin: 0 0 12px;
  font-size: 1.00rem;
  font-weight: 400;
  color: #FAF5E2; /* Butter */
  line-height: 1.55;
}

/* semantic paragraph classes */
.tbp-snippet-raw .tbp-sub{
  font-size: 1.125rem;
  font-weight: 400;
  color: #FFD000; /* Gold */
}

.tbp-snippet-raw .tbp-note{
  font-size: 1.00rem;
  font-weight: 400;
  color: #FAF5E2; /* Butter */
}

.tbp-snippet-raw .tbp-offer{
  font-size: 1.00rem;
  font-weight: 600;
  color: #87B0EC; /* Blue */
}

.tbp-snippet-raw .tbp-faq{
  font-size: 1.00rem;
  font-weight: 500;
  color: #F0ECB6; /* Honey */
  font-style: italic;
}

.tbp-snippet-raw .tbp-related{
  font-size: 1.00rem;
  font-weight: 500;
  color: #EBD96F; /* OGOLD */
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* links in snippets */
.tbp-snippet-raw a{
  color: #FDFC01; /* Yellow */
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* lists */
.tbp-snippet-raw ul.tbp-list{
  margin: 10px 0 14px 22px;
  padding: 0;
}

.tbp-snippet-raw .tbp-list-main{
  color: #F0ECB6;
  font-size: 1.00rem;
  font-weight: 400;
  margin: 6px 0;
}

.tbp-snippet-raw .tbp-list-sub{
  color: #FFD000;
  font-size: 1.00rem;
  font-weight: 400;
  margin: 6px 0;
  font-style: italic;
}

/* mobile tighten */
@media (max-width: 640px){
  .tbp-accordion summary{
    font-size: 18px;
    padding: 11px 12px;
  }
}