﻿/* ============================================================
   SolidCabin Knowledge Base / File-Based Blog Template v3.0
   ============================================================ */
.sc-kb { background:#f6f2e9; color:#332d27; }
.sc-kb-hero { padding:54px 0 46px; background:#efe4cf; border-bottom:1px solid #d7c5a5; }
.sc-kb-hero .container { max-width:1180px; }
.sc-kb-breadcrumb { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:25px; font-size:14px; color:#726657; }
.sc-kb-breadcrumb a { color:#6d4c2f; text-decoration:none; }
.sc-kb-eyebrow,.sc-kb-label { margin:0 0 12px; color:#8a5c27; font-size:13px; font-weight:800; letter-spacing:.11em; }
.sc-kb-hero h1 { max-width:900px; margin:0; color:#352b22; font-family:'Raleway',sans-serif; font-size:clamp(36px,5vw,62px); line-height:1.05; font-weight:800; }
.sc-kb-deck { max-width:820px; margin:22px 0 0; font-size:20px; line-height:1.6; color:#5d5145; }
.sc-kb-meta { display:flex; flex-wrap:wrap; gap:9px 20px; margin-top:25px; font-size:14px; color:#6f6255; }
.sc-kb-meta span:not(:last-child)::after { content:'•'; margin-left:20px; color:#b28b58; }
.sc-kb-shell { padding:48px 0 80px; }
.sc-kb-shell .container { max-width:1180px; }
.sc-kb-grid { display:grid; grid-template-columns:260px minmax(0,780px); gap:52px; justify-content:center; align-items:start; }
.sc-kb-aside { position:sticky; top:105px; }
.sc-kb-toc { padding:20px; background:#fff; border:1px solid #e0d6c7; border-radius:10px; box-shadow:0 8px 28px rgba(62,47,31,.06); }
.sc-kb-toc summary { cursor:pointer; color:#4a3929; font-weight:800; list-style:none; }
.sc-kb-toc summary::-webkit-details-marker { display:none; }
#sc-kb-toc-list { display:flex; flex-direction:column; gap:5px; max-height:58vh; margin-top:14px; overflow:auto; }
#sc-kb-toc-list a { padding:7px 8px; border-radius:5px; color:#685b4e; font-size:13px; line-height:1.35; text-decoration:none; }
#sc-kb-toc-list a:hover { background:#f4ead9; color:#7a4c21; }
.sc-kb-aside-note { display:flex; flex-direction:column; gap:9px; margin-top:18px; padding:20px; background:#5a3c24; border-radius:10px; color:#fff; }
.sc-kb-aside-note span { color:#eadfce; font-size:14px; line-height:1.55; }
.sc-kb-aside-note a { display:inline-block; margin-top:4px; color:#fff; font-weight:700; text-decoration:underline; text-underline-offset:3px; }
.sc-kb-main { min-width:0; }
.sc-kb-quick-answer { margin-bottom:28px; padding:28px 30px; background:#f2d896; border:1px solid #d9b65e; border-radius:12px; box-shadow:0 10px 30px rgba(93,65,29,.08); }
.sc-kb-quick-answer h2 { margin:0 0 12px; color:#412f1e; font-size:27px; line-height:1.25; }
.sc-kb-quick-answer p:last-child { margin:0; color:#4b4035; font-size:17px; line-height:1.75; }
.sc-kb-article { padding:38px 42px 46px; background:#fff; border:1px solid #e1d8cb; border-radius:12px; box-shadow:0 12px 38px rgba(55,42,28,.06); }
.sc-kb-article p,.sc-kb-article li { color:#50483f; font-size:17px; line-height:1.82; }
.sc-kb-article p { margin:0 0 19px; }
.sc-kb-article h2 { scroll-margin-top:105px; margin:54px 0 18px; padding-top:4px; color:#3e2e20; font-size:31px; line-height:1.22; font-weight:800; }
.sc-kb-article h2:first-of-type { margin-top:10px; }
.sc-kb-article h3 { margin:35px 0 14px; color:#624421; font-size:23px; line-height:1.3; font-weight:800; }
.sc-kb-article ul,.sc-kb-article ol { margin:0 0 24px; padding-left:24px; }
.sc-kb-article li { margin-bottom:7px; padding-left:4px; }
.sc-kb-article a { color:#8a4e19; font-weight:650; text-decoration-thickness:1px; text-underline-offset:3px; }
.sc-kb-article strong a { display:block; margin:24px 0; padding:16px 18px; background:#f6eee0; border:1px solid #dfc9aa; border-radius:8px; text-decoration:none; }
.sc-kb-article strong a:hover { background:#efe0c7; }
@media (max-width:991.98px) {
  .sc-kb-hero { padding:38px 0 34px; }
  .sc-kb-deck { font-size:18px; }
  .sc-kb-grid { grid-template-columns:1fr; gap:18px; }
  .sc-kb-aside { position:static; order:0; }
  .sc-kb-aside-note { display:none; }
  .sc-kb-toc { padding:16px 18px; }
  .sc-kb-toc:not([open]) #sc-kb-toc-list { display:none; }
  #sc-kb-toc-list { max-height:none; }
  .sc-kb-main { order:1; }
}
@media (max-width:575.98px) {
  .sc-kb-hero { padding:28px 0 26px; }
  .sc-kb-hero h1 { font-size:36px; }
  .sc-kb-deck { margin-top:16px; font-size:17px; line-height:1.55; }
  .sc-kb-meta { display:grid; gap:4px; margin-top:18px; }
  .sc-kb-meta span::after { display:none; }
  .sc-kb-shell { padding:22px 0 52px; }
  .sc-kb-quick-answer { padding:22px 20px; }
  .sc-kb-quick-answer h2 { font-size:23px; }
  .sc-kb-quick-answer p:last-child { font-size:16px; line-height:1.65; }
  .sc-kb-article { padding:24px 20px 32px; border-radius:9px; }
  .sc-kb-article p,.sc-kb-article li { font-size:16px; line-height:1.7; }
  .sc-kb-article h2 { margin-top:42px; font-size:27px; }
  .sc-kb-article h3 { margin-top:29px; font-size:21px; }
  .sc-kb-article ul,.sc-kb-article ol { padding-left:21px; }
  .sc-kb-article strong a { margin:20px 0; padding:15px; }
}


/* v2.2.1 article-series and usability additions */
.sc-kb-share { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:18px; font-size:13px; }
.sc-kb-share span { color:#756657; font-weight:700; }
.sc-kb-share a,.sc-kb-share button { padding:7px 11px; border:1px solid #cdb790; border-radius:5px; background:rgba(255,255,255,.48); color:#5d4027; font:inherit; font-weight:700; text-decoration:none; cursor:pointer; }
.sc-kb-side-card { display:flex; flex-direction:column; gap:8px; margin-top:18px; padding:18px 20px; background:#fff; border:1px solid #e0d6c7; border-radius:10px; }
.sc-kb-side-card .sc-kb-label { margin-bottom:4px; }
.sc-kb-side-card a { color:#70461f; font-size:14px; line-height:1.4; text-decoration:none; }
.sc-kb-side-card a:hover { text-decoration:underline; }
.sc-kb-heading-link { margin-left:10px; color:#b69469 !important; font-size:.68em; font-weight:500 !important; text-decoration:none !important; opacity:0; transition:opacity .15s ease; }
.sc-kb-article h2:hover .sc-kb-heading-link,.sc-kb-heading-link:focus { opacity:1; }
.sc-kb-series-link { margin:24px 0; padding:18px 20px; background:#f7f0e3; border-left:4px solid #a56b2c; border-radius:0 8px 8px 0; }
.sc-kb-series-link strong { display:block; margin-bottom:5px; color:#513a26; }
.sc-kb-next-article { margin:58px -10px 0; padding:28px 30px; background:#efe4cf; border:1px solid #dbc6a5; border-radius:10px; }
.sc-kb-next-article h2 { margin:0 0 10px !important; padding:0; font-size:27px; }
.sc-kb-next-article h2 a { color:#51351d; text-decoration:none; }
.sc-kb-next-article p:last-child { margin-bottom:0; }
.sc-kb-article blockquote { margin:24px 0; padding:17px 21px; background:#f8f4ec; border-left:4px solid #a46b32; color:#4b4036; font-size:18px; line-height:1.65; }
.sc-kb-article .table-responsive { margin:24px 0 30px; overflow-x:auto; -webkit-overflow-scrolling:touch; }
.sc-kb-article table { width:100%; border-collapse:collapse; min-width:620px; }
.sc-kb-article th,.sc-kb-article td { padding:13px 15px; border:1px solid #ded5c8; text-align:left; vertical-align:top; color:#50483f; line-height:1.5; }
.sc-kb-article th { background:#efe4cf; color:#422f20; }
@media (max-width:991.98px) {
  .sc-kb-side-card { display:none; }
}
@media (max-width:575.98px) {
  .sc-kb-share { margin-top:15px; }
  .sc-kb-share a,.sc-kb-share button { padding:8px 10px; }
  .sc-kb-heading-link { opacity:1; }
  .sc-kb-series-link { padding:16px; }
  .sc-kb-next-article { margin:44px 0 0; padding:22px 20px; }
  .sc-kb-next-article h2 { font-size:23px; }
  .sc-kb-article .table-responsive { margin-left:-20px; margin-right:-20px; padding:0 20px; }
}


/* v3.0 Umbraco-managed hero image */
.sc-kb-hero-media { margin:34px 0 0; }
.sc-kb-hero-media img { display:block; width:100%; max-height:620px; object-fit:cover; border-radius:12px; box-shadow:0 16px 42px rgba(55,42,28,.14); }
.sc-kb-hero-media figcaption { margin-top:10px; color:#6f6255; font-size:13px; line-height:1.55; text-align:center; }
@media (max-width:575.98px) {
  .sc-kb-hero-media { margin-top:24px; }
  .sc-kb-hero-media img { max-height:420px; border-radius:8px; }
  .sc-kb-hero-media figcaption { padding:0 8px; }
}
