/* ------------------------------------------------------------------
   Site-wide palette, document-page chrome, and footer.

   Loaded FIRST on every page. All colour values live here as custom
   properties so the whole site can be re-themed from one file.

   Typography is scoped under .content so it cannot reach into the app
   page (index.html), which brings its own layout in style.css. The app
   also redeclares body and .main-header there; style.css loads after
   this file, so those win on index.html and this file's versions apply
   everywhere else.
   ------------------------------------------------------------------ */

:root {
    /* Warm neutrals */
    --bg:          #F6F3EE;   /* page background */
    --bg-deep:     #EFEAE1;   /* recessed areas: table heads, code, footer */
    --bg-soft:     #FBF9F6;   /* zebra striping, hover */
    --surface:     #FFFFFF;   /* cards */

    /* Type */
    --ink:         #1F1D1A;   /* headings */
    --text:        #46433D;   /* body copy */
    --muted:       #7A766D;   /* captions, fine print */
    --on-dark:     #EDE8DF;   /* text on the dark band */

    /* Lines */
    --border:      #E2DCD1;
    --border-soft: #EFEAE1;

    /* Accent - clay */
    --accent:      #B4552F;
    --accent-dk:   #8E4123;
    --accent-tint: #F8EFE9;

    /* Dark band (ticker) */
    --band:        #24201C;

    /* Semantic */
    --ok:          #3F6B52;
    --warn-bg:     #FBF3E3;
    --warn-br:     #C08A2E;
    --warn-tx:     #6B4E15;
    --info-bg:     #EDF1F5;
    --info-br:     #5A7796;
    --info-tx:     #3A4F66;
    --danger:      #A4442F;
    --danger-dk:   #83341F;
}

/* --------------------------- Document pages --------------------------- */

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin: 0;
    padding: 0;
    background: var(--bg);
    color: var(--text);
    min-height: 100vh;
}

.main-header {
    text-align: center;
    padding: 34px 15px 26px;
    background: var(--bg);
    color: var(--ink);
    border-bottom: 1px solid var(--border);
}
.main-header h1 { margin: 0 0 8px 0; font-size: 32px; font-weight: 700; letter-spacing: -0.5px; color: var(--ink); }
.main-header .tagline { font-size: 15px; color: var(--muted); }

.content {
    max-width: 860px;
    margin: 36px auto 0;
    background: var(--surface);
    padding: 38px 46px 44px;
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(31,29,26,0.05);
}

.content h2 { color: var(--ink); border-bottom: 1px solid var(--border); padding-bottom: 8px; margin-top: 36px; font-size: 22px; font-weight: 700; letter-spacing: -0.2px; }
.content h3 { color: var(--ink); margin-top: 24px; font-size: 16.5px; font-weight: 600; }
.content p, .content li { color: var(--text); line-height: 1.75; font-size: 14.5px; }
.content ul, .content ol { padding-left: 22px; }
.content li { margin-bottom: 6px; }
.content a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.content a:hover { color: var(--accent-dk); }

/* Article title inside .content, below the breadcrumb. */
.content .doc-title { font-size: 27px; color: var(--ink); margin: 0 0 14px 0; font-weight: 700; letter-spacing: -0.4px; border: none; padding: 0; }
.content .updated { color: var(--muted); font-size: 12.5px; font-style: italic; margin-top: 0; }

.content code { background: var(--bg-deep); padding: 2px 6px; border-radius: 3px; font-family: Consolas, Monaco, monospace; font-size: 13px; color: var(--ink); }
.content pre { background: var(--bg-deep); border: 1px solid var(--border); padding: 16px 18px; border-radius: 8px; overflow-x: auto; font-size: 13px; color: var(--ink); line-height: 1.6; }
.content pre code { background: none; padding: 0; color: inherit; }

.content table { width: 100%; border-collapse: collapse; margin: 18px 0; font-size: 13.5px; }
.content th { background: var(--bg-deep); color: var(--ink); padding: 10px 13px; text-align: left; font-weight: 700; border: 1px solid var(--border); }
.content td { border: 1px solid var(--border); padding: 10px 13px; color: var(--text); vertical-align: top; }
.content tr:nth-child(even) td { background: var(--bg-soft); }

.content .tip  { background: var(--info-bg); border-left: 3px solid var(--info-br); padding: 12px 16px; border-radius: 0 6px 6px 0; margin: 18px 0; font-size: 13.5px; color: var(--info-tx); }
.content .warn { background: var(--warn-bg); border-left: 3px solid var(--warn-br); padding: 12px 16px; border-radius: 0 6px 6px 0; margin: 18px 0; font-size: 13.5px; color: var(--warn-tx); }
.content .tip code, .content .warn code { background: rgba(255,255,255,0.6); }

/* Scoped to .content so it outranks the `.content a` link rule above. */
.content .back-btn { display: inline-block; margin-bottom: 24px; padding: 8px 18px; background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 6px; text-decoration: none; font-size: 13px; font-weight: 600; transition: border-color .15s, color .15s; }
.content .back-btn:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }

@media (max-width: 600px) {
    .content { padding: 26px 20px 30px; margin: 20px 12px 0; }
    .main-header h1 { font-size: 25px; }
    .content h2 { font-size: 19px; }
    .content p, .content li { font-size: 14px; }
}

/* ------------------------------ Footer ------------------------------ */

.site-footer {
    background: var(--bg-deep);
    border-top: 1px solid var(--border);
    margin-top: 40px;
    text-align: left;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.site-footer .footer-inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 44px 32px 32px;
    display: grid;
    grid-template-columns: 1.4fr 3fr;
    gap: 40px;
}

.site-footer .footer-brand .footer-name {
    font-size: 16px;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: -0.2px;
    margin-bottom: 10px;
}
.site-footer .footer-brand p {
    margin: 0;
    font-size: 13px;
    line-height: 1.6;
    color: var(--muted);
    max-width: 30ch;
}

.site-footer .footer-cols {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 28px;
}
.site-footer .footer-head {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.1px;
    color: var(--muted);
    margin: 0 0 14px 0;
    padding: 0;
    border: none;
    line-height: 1.2;
}
.site-footer ul { list-style: none; margin: 0; padding: 0; }
/* Rotating guide list: every link ships in the HTML for crawlers, but only the
   first five are shown. index.html shuffles which five on each load; with
   JavaScript disabled this rule alone still yields a sensible five. */
.site-footer .footer-rotate li:nth-child(n+6) { display: none; }
.site-footer li { margin: 0 0 9px 0; font-size: 13.5px; line-height: 1.45; color: var(--text); }
.site-footer a { color: var(--text); text-decoration: none; transition: color 0.15s; }
.site-footer a:hover,
.site-footer a:focus-visible { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.site-footer a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }

.site-footer .footer-bottom {
    max-width: 1100px;
    margin: 0 auto;
    padding: 18px 32px 26px;
    border-top: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    font-size: 12px;
    color: var(--muted);
}
.site-footer .footer-bottom span { display: block; }

/* Single-item variant (landing page): centre the copyright rather than
   pushing it to the left edge. Specificity is deliberately higher than the
   responsive rules below so it survives at every width. */
.site-footer .footer-bottom.footer-bottom-centered {
    justify-content: center;
    align-items: center;
    text-align: center;
}

@media (max-width: 860px) {
    .site-footer .footer-inner { grid-template-columns: 1fr; gap: 32px; padding: 36px 22px 26px; }
    .site-footer .footer-cols { grid-template-columns: repeat(2, 1fr); gap: 26px 20px; }
    .site-footer .footer-brand p { max-width: none; }
    .site-footer .footer-bottom { padding: 16px 22px 24px; }
}

@media (max-width: 460px) {
    .site-footer .footer-cols { grid-template-columns: 1fr; }
    .site-footer .footer-bottom { flex-direction: column; align-items: flex-start; gap: 6px; }
}