/* ============================================================================
 * tk-studio-guide / frontend.css
 *
 * One-chapter-per-view layout. Two columns at >=900px:
 *   ┌──────────────┬───────────────────────────────────────────┐
 *   │  sidebar     │   chapter (centered, capped width)        │
 *   │  (sticky)    │                                           │
 *   └──────────────┴───────────────────────────────────────────┘
 * Single column at <900px (sidebar moves above the content).
 *
 * --tksg-* CSS variables abstract Bricks Studio 3.0 tokens. Defined here
 * with safe fallbacks; can be overridden globally via Bricks Settings →
 * Custom Code → Header CSS (see README).
 * ============================================================================ */

.tksg-guide {
    /* Typography */
    --tksg-text-2xs:   var(--text-2xs, 0.75rem);
    --tksg-text-xs:    var(--text-xs,  0.875rem);
    --tksg-text-s:     var(--text-s,   1rem);
    --tksg-text-m:     var(--text-m,   1.125rem);
    --tksg-text-l:     var(--text-l,   1.5rem);
    --tksg-text-xl:    var(--text-xl,  2rem);

    /* Spacing */
    --tksg-space-2xs:  var(--space-2xs, 0.5rem);
    --tksg-space-xs:   var(--space-xs,  1rem);
    --tksg-space-s:    var(--space-s,   1.25rem);
    --tksg-space-m:    var(--space-m,   1.75rem);
    --tksg-space-l:    var(--space-l,   2.5rem);
    --tksg-space-xl:   var(--space-xl,  3.5rem);

    /* Color (Studio 3.0 palette) */
    --tksg-text:       var(--body,        #5a3e2b);
    --tksg-heading:    var(--headings,    #1e120a);
    --tksg-link:       var(--links,       #2e6b5e);
    --tksg-link-hover: var(--cat,         #c4680a);
    --tksg-surface:    var(--white-cards, #ffffff);
    --tksg-cream:      var(--warm-cream,  #faf7f2);
    --tksg-border:     var(--espresso-l-8, #c5c1bd);
    --tksg-border-soft:var(--espresso-l-9, #d9d5d3);
    --tksg-muted:      var(--espresso-l-5, #8c827c);
    --tksg-teal:       var(--teal,        #2e6b5e);
    --tksg-teal-soft:  var(--teal-l-4,    #d5e1df);
    --tksg-gold:       var(--gold,        #e8c97a);
    --tksg-action:     var(--action,      #1D9E75);
    --tksg-active-bg:  var(--teal-l-4,    #d5e1df);

    /* Layout dimensions — kept in px because this site sets html { font-size: 10px }
       and Bricks's --space-* tokens are calibrated for that. Using rem here would
       halve our intended sizes. */
    --tksg-radius:     8px;
    --tksg-sidebar-w:  280px;
    --tksg-gap:        var(--tksg-space-l);

    color: var(--tksg-text);
    font-size: var(--tksg-text-s);
    line-height: 1.65;
    position: relative;
}

/* ----------------------------------------------------------------------
 * Layout: 2-col at desktop, 1-col at mobile
 * ---------------------------------------------------------------------- */

.tksg-guide {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--tksg-gap);
    align-items: start;
}

@media (min-width: 900px) {
    .tksg-guide.has-sidebar {
        grid-template-columns: var(--tksg-sidebar-w) minmax(0, 1fr);
    }
}

/* ----------------------------------------------------------------------
 * Sidebar
 * ---------------------------------------------------------------------- */

.tksg-sidebar {
    position: sticky;
    top: var(--tksg-space-m);
    align-self: start;
    max-height: calc(100vh - var(--tksg-space-m) * 2);
    overflow-y: auto;
}

@media (max-width: 899px) {
    .tksg-sidebar { position: static; max-height: none; }
}

.tksg-sidebar-inner {
    background: var(--tksg-surface);
    border: 1px solid var(--tksg-border-soft);
    border-radius: var(--tksg-radius);
    padding: var(--tksg-space-s);
}

.tksg-sidebar-search-input {
    width: 100%;
    border: 1px solid var(--tksg-border-soft);
    border-radius: var(--tksg-radius);
    padding: 0.5rem 0.75rem;
    font: inherit;
    font-size: var(--tksg-text-xs);
    background: var(--tksg-cream);
    color: var(--tksg-text);
    margin-bottom: var(--tksg-space-xs);
}
.tksg-sidebar-search-input:focus {
    outline: 2px solid var(--tksg-teal);
    outline-offset: 1px;
    border-color: transparent;
}

.tksg-sidebar-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.tksg-sidebar-item { margin: 0; }

.tksg-sidebar-link {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    padding: 0.5rem 0.6rem;
    border-radius: calc(var(--tksg-radius) - 0.25rem);
    color: var(--tksg-text);
    text-decoration: none;
    font-size: var(--tksg-text-xs);
    line-height: 1.4;
    transition: background 0.15s ease, color 0.15s ease;
}
.tksg-sidebar-link:hover,
.tksg-sidebar-link:focus-visible {
    background: var(--tksg-cream);
    color: var(--tksg-heading);
}
.tksg-sidebar-link[aria-current="true"] {
    background: var(--tksg-active-bg);
    color: var(--tksg-heading);
    font-weight: 500;
}

.tksg-sidebar-num {
    flex: 0 0 auto;
    font-variant-numeric: tabular-nums;
    color: var(--tksg-muted);
    font-size: var(--tksg-text-2xs);
    min-width: 1.25rem;
}
.tksg-sidebar-link[aria-current="true"] .tksg-sidebar-num {
    color: var(--tksg-teal);
}

.tksg-sidebar-item[hidden] { display: none; }

/* ----------------------------------------------------------------------
 * Main content area
 *
 * Fills the grid cell entirely. The Bricks Main-container already caps
 * total page width, so we don't need to cap further inside the plugin —
 * doing so just creates wasted horizontal space.
 * ---------------------------------------------------------------------- */

.tksg-main {
    min-width: 0; /* prevent grid blowout */
}

.tksg-page {
    width: 100%;
}

/* The active chapter in JS-mode */
.tksg-page[data-active="1"] {
    display: block;
}

/* ----------------------------------------------------------------------
 * Chapter card
 * ---------------------------------------------------------------------- */

.tksg-chapter {
    background: var(--tksg-surface);
    border: 1px solid var(--tksg-border-soft);
    border-radius: var(--tksg-radius);
    padding: var(--tksg-space-l) var(--tksg-space-l);
    margin-bottom: var(--tksg-space-m);
}

@media (max-width: 899px) {
    .tksg-chapter {
        padding: var(--tksg-space-m) var(--tksg-space-s);
    }
}

.tksg-chapter-head {
    margin-bottom: var(--tksg-space-m);
    padding-bottom: var(--tksg-space-xs);
    border-bottom: 1px solid var(--tksg-border-soft);
}

.tksg-chapter-title {
    margin: 0 0 var(--tksg-space-2xs) 0;
    font-size: var(--tksg-text-l);
    color: var(--tksg-heading);
    line-height: 1.2;
}

.tksg-chapter-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--tksg-space-s);
    margin: 0;
    color: var(--tksg-muted);
    font-size: var(--tksg-text-xs);
}
.tksg-chapter-summary { font-style: italic; }
.tksg-chapter-readtime::before { content: "·  "; color: var(--tksg-border); }

.tksg-chapter-body > :first-child { margin-top: 0; }
.tksg-chapter-body > :last-child  { margin-bottom: 0; }
.tksg-chapter-body h3 {
    margin-top: var(--tksg-space-m);
    color: var(--tksg-heading);
}
.tksg-chapter-body h4 {
    margin-top: var(--tksg-space-s);
    color: var(--tksg-heading);
}
.tksg-chapter-body p { margin: 0.85em 0; }
.tksg-chapter-body a {
    color: var(--tksg-link);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}
.tksg-chapter-body a:hover { color: var(--tksg-link-hover); }

/* Callouts */
.tksg-chapter-body .tksg-callout {
    margin: var(--tksg-space-s) 0;
    padding: var(--tksg-space-s) var(--tksg-space-m);
    border-left: 4px solid var(--tksg-teal);
    background: var(--tksg-teal-soft);
    border-radius: 0 var(--tksg-radius) var(--tksg-radius) 0;
    color: var(--tksg-heading);
    font-size: var(--tksg-text-xs);
    quotes: none;
}
.tksg-chapter-body .tksg-callout p { margin: 0.4em 0; }
.tksg-chapter-body .tksg-callout p:first-child { margin-top: 0; }
.tksg-chapter-body .tksg-callout p:last-child  { margin-bottom: 0; }
.tksg-chapter-body .tksg-callout strong { color: var(--tksg-teal); }

.tksg-chapter-body .tksg-callout--warn {
    border-left-color: #c4680a;
    background: #fdf3e7;
}
.tksg-chapter-body .tksg-callout--warn strong { color: #c4680a; }

.tksg-chapter-body .tksg-callout--review {
    border-left-color: var(--tksg-gold);
    background: #fdf6e3;
    color: var(--tksg-heading);
}
.tksg-chapter-body .tksg-callout--review strong { color: #8a6d1a; }

.tksg-chapter-body ol li,
.tksg-chapter-body ul li {
    margin-bottom: 0.4em;
}

/* ----------------------------------------------------------------------
 * Related panel
 * ---------------------------------------------------------------------- */

.tksg-related {
    margin-top: var(--tksg-space-m);
    padding: var(--tksg-space-s) var(--tksg-space-m);
    background: var(--tksg-cream);
    border-radius: var(--tksg-radius);
}
.tksg-related-heading {
    margin: 0 0 var(--tksg-space-2xs) 0;
    font-size: var(--tksg-text-xs);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--tksg-muted);
}
.tksg-related-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: var(--tksg-space-2xs) var(--tksg-space-s);
}
.tksg-related-list a {
    color: var(--tksg-link);
    text-decoration: none;
    font-size: var(--tksg-text-xs);
}
.tksg-related-list a:hover { text-decoration: underline; }
.tksg-related-badge {
    display: inline-block;
    margin-left: 0.4em;
    padding: 1px 6px;
    border-radius: 999px;
    background: var(--tksg-teal-soft);
    color: var(--tksg-teal);
    font-size: var(--tksg-text-2xs);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* ----------------------------------------------------------------------
 * Chapter footer
 * ---------------------------------------------------------------------- */

.tksg-chapter-foot {
    margin-top: var(--tksg-space-m);
    padding-top: var(--tksg-space-xs);
    border-top: 1px dashed var(--tksg-border-soft);
    color: var(--tksg-muted);
    font-size: var(--tksg-text-2xs);
}

/* ----------------------------------------------------------------------
 * Pager (Prev / Next at the bottom of each chapter)
 * ---------------------------------------------------------------------- */

.tksg-pager {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--tksg-space-s);
    margin-top: var(--tksg-space-m);
}

.tksg-pager-btn {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--tksg-space-s) var(--tksg-space-m);
    background: var(--tksg-surface);
    border: 1px solid var(--tksg-border-soft);
    border-radius: var(--tksg-radius);
    color: var(--tksg-text);
    text-decoration: none;
    transition: border-color 0.15s ease, background 0.15s ease, transform 0.1s ease;
}
.tksg-pager-btn:hover,
.tksg-pager-btn:focus-visible {
    border-color: var(--tksg-teal);
    background: var(--tksg-cream);
    color: var(--tksg-heading);
}
.tksg-pager-btn:active {
    transform: translateY(1px);
}

.tksg-pager-prev {
    text-align: left;
}
.tksg-pager-next {
    text-align: right;
}

.tksg-pager-label {
    font-size: var(--tksg-text-2xs);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--tksg-muted);
}
.tksg-pager-prev .tksg-pager-label::before { content: "← "; }
.tksg-pager-next .tksg-pager-label::after  { content: " →"; }

.tksg-pager-title {
    font-size: var(--tksg-text-s);
    color: var(--tksg-heading);
    font-weight: 500;
}

.tksg-pager-spacer {
    /* Empty cell to keep grid alignment when there's no prev (or no next) */
}

/* ----------------------------------------------------------------------
 * Standalone chapter (used by [tk_kb_chapter slug="..."])
 * ---------------------------------------------------------------------- */

.tksg-standalone .tksg-chapter {
    margin-bottom: 0;
    max-width: 720px;  /* Standalone embeds (e.g. on the Dashboard) keep a comfortable reading cap */
}

/* ----------------------------------------------------------------------
 * Empty state
 * ---------------------------------------------------------------------- */

.tksg-empty {
    padding: var(--tksg-space-l);
    text-align: center;
    color: var(--tksg-muted);
    background: var(--tksg-cream);
    border-radius: var(--tksg-radius);
}

/* ----------------------------------------------------------------------
 * No-JS / accessibility fallback
 *
 * Without JS, all chapters render top-to-bottom (the [hidden] attribute
 * is overridden by the inline <noscript><style> in the template). The
 * sidebar still works because it uses anchor links.
 * ---------------------------------------------------------------------- */

/* When JS is on, hidden chapters stay hidden (HTML 'hidden' attribute
   already does this — we don't need extra CSS). When JS is off, the
   noscript style overrides it. No further work here. */

/* ----------------------------------------------------------------------
 * Print: linearize everything
 * ---------------------------------------------------------------------- */

@media print {
    .tksg-sidebar, .tksg-pager { display: none !important; }
    .tksg-guide { display: block; }
    .tksg-page[hidden] { display: block !important; }
    .tksg-chapter {
        border: none;
        box-shadow: none;
        page-break-inside: avoid;
        padding: 0;
        margin-bottom: 2cm;
    }
}