/* ======================================================================
   BOSSTEK GOLDI COMPONENTS | Version 1.0.1

   Scope: opt-in .bt-goldi wrapper inside a single blog post.
   Does not restyle existing posts, site navigation, or Beaver Builder.

   Contents
   1. Shared component variables
   2. Table of Contents
   3. Quick Answer
   4. Expandable FAQ
   5. Responsive tables
   6. Anchor scrolling and keyboard focus
   7. Mobile adjustments
   8. Article image alignment
   ====================================================================== */

/* 1. SHARED COMPONENT VARIABLES ---------------------------------------- */
body.single-post .bt-goldi {
  --bt-accent: #d34726;
  --bt-accent-dark: #ad391e;
  --bt-text: #202020;
  --bt-muted: #545454;
  --bt-border: rgba(0, 0, 0, 0.14);
  --bt-soft: #fff8f4;
  --bt-surface: #ffffff;
  --bt-shadow: 0 5px 18px rgba(0, 0, 0, 0.06);
  --bt-radius: 12px;
}

body.single-post .bt-goldi .bt-toc,
body.single-post .bt-goldi .bt-quick-answer,
body.single-post .bt-goldi .bt-faq,
body.single-post .bt-goldi .bt-table-wrap {
  box-sizing: border-box;
}

/* 2. TABLE OF CONTENTS ------------------------------------------------ */
body.single-post .bt-goldi .bt-toc {
  margin: 24px 0 30px;
  padding: 20px 24px;
  background: var(--bt-surface);
  border: 1px solid var(--bt-border);
  border-left: 5px solid var(--bt-accent);
  border-radius: var(--bt-radius);
  box-shadow: var(--bt-shadow);
  color: var(--bt-text);
}

body.single-post .bt-goldi .bt-toc__title {
  margin: 0 0 12px;
  font-family: inherit;
  font-weight: 700;
  font-size: 19px;
  line-height: 1.4;
  color: var(--bt-text);
}

body.single-post .bt-goldi .bt-toc ol {
  margin: 0;
  padding-left: 24px;
  list-style-type: decimal;
}

body.single-post .bt-goldi .bt-toc ol ol {
  margin: 5px 0 8px;
  list-style-type: lower-alpha;
}

body.single-post .bt-goldi .bt-toc li {
  margin: 6px 0;
  padding-left: 2px;
  line-height: 1.5;
}

/* Override the legacy theme's highly specific blog link styling in ToC only. */
body.single-post .blog-content .entry-content .bt-goldi .bt-toc a,
body.single-post .bt-goldi .bt-toc a {
  color: var(--bt-text);
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 3px;
  box-shadow: none;
}

body.single-post .blog-content .entry-content .bt-goldi .bt-toc a:hover,
body.single-post .bt-goldi .bt-toc a:hover {
  color: var(--bt-accent-dark);
  text-decoration-color: currentColor;
  box-shadow: none;
}

/* 3. QUICK ANSWER ----------------------------------------------------- */
body.single-post .bt-goldi .bt-quick-answer {
  margin: 24px 0;
  padding: 20px 24px;
  border: 1px solid #f1d3c6;
  border-left: 5px solid var(--bt-accent);
  border-radius: var(--bt-radius);
  background: var(--bt-soft);
  color: var(--bt-text);
}

body.single-post .bt-goldi .bt-quick-answer__label {
  display: block;
  margin: 0 0 8px;
  color: var(--bt-accent-dark);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.07em;
  line-height: 1.4;
  text-transform: uppercase;
}

body.single-post .bt-goldi .bt-quick-answer p {
  margin: 0 0 11px;
  font-size: 16px;
  line-height: 1.65;
}

body.single-post .bt-goldi .bt-quick-answer p:last-child {
  margin-bottom: 0;
}

/* 4. FAQ: native HTML details/summary, no JS required ----------------- */
body.single-post .bt-goldi .bt-faq {
  margin: 24px 0 30px;
}

body.single-post .bt-goldi .bt-faq__item {
  margin: 0 0 10px;
  background: var(--bt-surface);
  border: 1px solid var(--bt-border);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: var(--bt-shadow);
}

body.single-post .bt-goldi .bt-faq__item[open] {
  border-color: #eac3b4;
}

body.single-post .bt-goldi .bt-faq__item summary {
  position: relative;
  display: block;
  list-style: none;
  padding: 16px 46px 16px 18px;
  color: var(--bt-text);
  cursor: pointer;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.4;
}

body.single-post .bt-goldi .bt-faq__item summary::-webkit-details-marker {
  display: none;
}

body.single-post .bt-goldi .bt-faq__item summary::after {
  content: '+';
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--bt-accent);
  font-size: 23px;
  font-weight: 400;
  line-height: 1;
}

body.single-post .bt-goldi .bt-faq__item[open] summary::after {
  content: '\2212';
}

body.single-post .bt-goldi .bt-faq__answer {
  padding: 0 18px 18px;
  color: var(--bt-text);
  font-size: 15px;
  line-height: 1.65;
}

body.single-post .bt-goldi .bt-faq__answer p:last-child,
body.single-post .bt-goldi .bt-faq__answer ul:last-child,
body.single-post .bt-goldi .bt-faq__answer ol:last-child {
  margin-bottom: 0;
}

/* 5. RESPONSIVE TABLES ------------------------------------------------ */
body.single-post .bt-goldi .bt-table-wrap {
  margin: 22px 0 28px;
  overflow-x: auto;
  border: 1px solid var(--bt-border);
  border-radius: 10px;
  background: var(--bt-surface);
  -webkit-overflow-scrolling: touch;
}

body.single-post .bt-goldi table.bt-table {
  width: 100%;
  min-width: 520px;
  margin: 0;
  border: 0;
  border-collapse: collapse;
  font-size: 15px;
  line-height: 1.5;
  color: var(--bt-text);
}

body.single-post .bt-goldi .bt-table th,
body.single-post .bt-goldi .bt-table td {
  padding: 12px 14px;
  border: 0;
  border-bottom: 1px solid var(--bt-border);
  text-align: left;
  vertical-align: top;
}

body.single-post .bt-goldi .bt-table thead th {
  background: #faeae3;
  font-weight: 700;
}

body.single-post .bt-goldi .bt-table tbody tr:nth-child(even) {
  background: #fafafa;
}

body.single-post .bt-goldi .bt-table tbody tr:last-child td,
body.single-post .bt-goldi .bt-table tbody tr:last-child th {
  border-bottom: 0;
}

body.single-post .bt-goldi .bt-table caption {
  caption-side: bottom;
  padding: 9px 12px;
  color: var(--bt-muted);
  font-size: 13px;
  text-align: left;
}

/* 6. ANCHOR NAVIGATION AND FOCUS ------------------------------------- */
/* Check the actual sticky-header height in the first desktop/mobile test. */
body.single-post .bt-goldi h2[id],
body.single-post .bt-goldi h3[id],
body.single-post .bt-goldi h4[id],
body.single-post .bt-goldi .bt-anchor {
  scroll-margin-top: 130px;
}

body.single-post .bt-goldi .bt-toc a:focus-visible,
body.single-post .bt-goldi .bt-faq__item summary:focus-visible {
  outline: 3px solid var(--bt-accent);
  outline-offset: 3px;
  border-radius: 3px;
}

/* 7. MOBILE ----------------------------------------------------------- */
@media (max-width: 767px) {
  body.single-post .bt-goldi .bt-toc,
  body.single-post .bt-goldi .bt-quick-answer {
    padding: 16px 17px;
  }

  body.single-post .bt-goldi .bt-toc ol {
    padding-left: 21px;
  }

  body.single-post .bt-goldi .bt-faq__item summary {
    padding: 15px 44px 15px 15px;
    font-size: 16px;
  }

  body.single-post .bt-goldi h2[id],
  body.single-post .bt-goldi h3[id],
  body.single-post .bt-goldi h4[id],
  body.single-post .bt-goldi .bt-anchor {
    scroll-margin-top: 100px;
  }
}

/* 8. ARTICLE IMAGE ALIGNMENT -------------------------------------------- */
/* Center images within Goldi posts without stretching smaller originals. */
body.single-post .bt-goldi p > img.img-responsive {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 24px auto;
}