/* ==========================================================================
   BCT BLOG - common stylesheet for all Basecamp Tours blog posts
   Theme: trekblog.  Upload to wp-content/themes/trekblog/bct-blog.css
   Load AFTER style.css in header.php (see BCT-BLOG-GUIDE.md).

   RULES
   1. Posts contain NO <style> blocks and NO style="" attributes.
   2. Wrap every post body in <div class="bct-post"> ... </div>.
   3. Do not put an <h1> or a date/author line in the post. The theme prints them.
   4. Everything below is scoped to .post-content .bct-post, so it cannot leak
      into the rest of the site, and it beats the theme's .post-content rules.

   Brand tokens (taken from style.css): accent #01aef0, dark #393939,
   tint #e9f7fd, line #d5dde9 / #e5e5e5. Font: Montserrat (already loaded).
   ========================================================================== */

.post-content .bct-post {
  --bct-accent: #01aef0;
  --bct-accent-dark: #0286b8;
  --bct-ink: #262626;
  --bct-head: #393939;
  --bct-muted: #6b6b6b;
  --bct-tint: #e9f7fd;
  --bct-line: #d5dde9;
  --bct-soft: #f6f9fc;
  --bct-green: #1f7a4d;   --bct-green-bg: #eaf6ef;
  --bct-amber: #b7791f;   --bct-amber-bg: #fff6dd;
  --bct-red: #a12828;     --bct-red-bg: #fdeaea;
  font-family: 'Montserrat', Arial, Helvetica, sans-serif;
  font-size: 15px;
  line-height: 1.75;
  color: var(--bct-ink);
  max-width: 100%;
  overflow-wrap: break-word;
}

/* ---------- headings ---------- */
.post-content .bct-post h2 {
  font-family: 'Montserrat', Arial, sans-serif;
  font-size: 24px; line-height: 1.3; font-weight: 700; text-transform: none;
  color: var(--bct-head);
  margin: 2em 0 .7em; padding-bottom: 8px;
  border-bottom: 2px solid var(--bct-accent);
}
.post-content .bct-post h3 {
  font-size: 18px; line-height: 1.35; font-weight: 700; text-transform: none;
  color: var(--bct-accent-dark);
  margin: 1.6em 0 .5em;
}
.post-content .bct-post h4 {
  font-size: 15px; font-weight: 700; color: var(--bct-head);
  margin: 1.2em 0 .4em; text-transform: uppercase; letter-spacing: .04em;
}

/* ---------- text ---------- */
.post-content .bct-post p { margin: 0 0 1em; }
.post-content .bct-post ul,
.post-content .bct-post ol { margin: 0 0 1.1em; padding-left: 26px; }
.post-content .bct-post li { margin: .3em 0; color: var(--bct-ink); }
.post-content .bct-post a { color: var(--bct-accent-dark); text-decoration: underline; }
.post-content .bct-post a:hover { color: var(--bct-head); text-decoration: none; }
.post-content .bct-post strong { color: var(--bct-head); }
.post-content .bct-post small,
.post-content .bct-post .bct-small { color: var(--bct-muted); font-size: 12.5px; line-height: 1.6; }

/* "Updated ... Reading time ..." line under the theme's title */
.post-content .bct-post .bct-updated {
  color: var(--bct-muted); font-size: 13px; margin: 0 0 14px;
}

/* ---------- AI note (top and bottom of every post) ---------- */
.post-content .bct-post .bct-note {
  background: var(--bct-tint);
  border-left: 5px solid var(--bct-accent);
  padding: 10px 14px; margin: 12px 0 18px;
  font-size: 13.5px; line-height: 1.6; color: #14395b;
}
.post-content .bct-post .bct-note--end { margin: 30px 0 0; font-size: 12.5px; }

/* ---------- figures ---------- */
.post-content .bct-post figure { margin: 1.6em 0; }
.post-content .bct-post figure img { width: 100% !important; height: auto; border-radius: 6px; display: block; }
.post-content .bct-post figcaption { font-size: 12.5px; color: var(--bct-muted); margin-top: 6px; font-style: italic; }
/* small logos/badges: the theme forces every image to 100% width, so override */
.post-content .bct-post img.bct-badge {
  width: auto !important; height: 54px; max-width: 100%;
  display: inline-block; border-radius: 0; margin: 6px 0;
}

/* ---------- tables ---------- */
.post-content .bct-post table {
  width: 100%; border-collapse: collapse; margin: 1.2em 0;
  font-size: 14px; line-height: 1.55;
}
.post-content .bct-post th {
  background: var(--bct-head); color: #fff; text-align: left;
  padding: 10px 12px; font-weight: 700; vertical-align: top;
}
.post-content .bct-post td {
  padding: 10px 12px; border: 1px solid var(--bct-line); vertical-align: top;
}
.post-content .bct-post tbody tr:nth-child(even) td { background: var(--bct-soft); }
/* status cells (open / caution / avoid) */
.post-content .bct-post td.bct-open    { background: var(--bct-green-bg) !important; color: var(--bct-green); font-weight: 700; }
.post-content .bct-post td.bct-caution { background: var(--bct-amber-bg) !important; color: #8a5a00;          font-weight: 700; }
.post-content .bct-post td.bct-closed  { background: var(--bct-red-bg)   !important; color: var(--bct-red);   font-weight: 700; }

/* ---------- callouts ---------- */
.post-content .bct-post .bct-callout {
  border-left: 6px solid var(--bct-accent); background: var(--bct-tint);
  padding: 14px 18px; margin: 1.5em 0; border-radius: 0 6px 6px 0;
}
.post-content .bct-post .bct-callout > :last-child { margin-bottom: 0; }
.post-content .bct-post .bct-callout--green { border-color: var(--bct-green); background: var(--bct-green-bg); }
.post-content .bct-post .bct-callout--amber { border-color: var(--bct-amber); background: var(--bct-amber-bg); }
.post-content .bct-post .bct-callout--red   { border-color: var(--bct-red);   background: var(--bct-red-bg); }
.post-content .bct-post .bct-callout__title { display: block; margin-bottom: 4px; }

/* ---------- table of contents ---------- */
.post-content .bct-post .bct-toc {
  background: var(--bct-soft); border: 1px solid var(--bct-line);
  border-radius: 6px; padding: 14px 22px; margin: 1.6em 0;
}
.post-content .bct-post .bct-toc ol { margin: 6px 0 0; padding-left: 20px; }

/* ---------- checklist ---------- */
.post-content .bct-post ul.bct-checklist { list-style: none; padding-left: 4px; }
.post-content .bct-post ul.bct-checklist li { margin: .4em 0; }

/* ---------- buttons / call to action ---------- */
.post-content .bct-post .bct-cta {
  background: var(--bct-tint); border: 1px solid var(--bct-line);
  border-radius: 6px; padding: 20px 22px; margin: 1.8em 0;
}
.post-content .bct-post a.bct-btn {
  display: inline-block; padding: 12px 22px; margin: 4px 8px 4px 0;
  border-radius: 4px; font-weight: 700; font-size: 14px; line-height: 1.3;
  text-decoration: none; color: #fff; background: var(--bct-head);
}
.post-content .bct-post a.bct-btn:hover { color: #fff; background: #000; }
.post-content .bct-post a.bct-btn--wa { background: #25d366; }
.post-content .bct-post a.bct-btn--wa:hover { background: #1da851; }
.post-content .bct-post a.bct-btn--accent { background: var(--bct-accent); }
.post-content .bct-post a.bct-btn--accent:hover { background: var(--bct-accent-dark); }

/* ---------- sources list ---------- */
.post-content .bct-post .bct-sources li { font-size: 13.5px; line-height: 1.55; }

/* ---------- small screens ---------- */
@media (max-width: 600px) {
  .post-content .bct-post { font-size: 15px; }
  .post-content .bct-post h2 { font-size: 21px; }
  .post-content .bct-post h3 { font-size: 17px; }
  .post-content .bct-post table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .post-content .bct-post a.bct-btn { display: block; text-align: center; margin: 0 0 10px; }
  .post-content .bct-post .bct-toc { padding: 12px 16px; }
}

/* ---------- print ---------- */
@media print {
  .post-content .bct-post a.bct-btn { display: none; }
  .post-content .bct-post .bct-callout, .post-content .bct-post table { page-break-inside: avoid; }
}