/* ==========================================================================
   heftos.css — Shared Heftos brand, website, and Django admin styles.

   Prefer classless HTML and Django admin classes. Keep the small set of
   broadly useful `ht-` utilities documented in docs/css.md.
   ========================================================================== */

/* Brand colors and Django admin overrides */
html[data-theme="light"],
html[data-theme="dark"],
:root {
    --ht-brand-navy: #00073d;
    --ht-brand-blue: #6183e7;
    --secondary: var(--ht-brand-navy);
    --link-fg: var(--ht-brand-blue);
    --link-hover-color: aqua;
    --primary: var(--ht-brand-blue);
    --font-family-primary: system-ui, sans-serif;
    --font-family-monospace: ui-monospace, monospace;
}

#changelist-search label img {
    width: 15px;
    height: 15px;
}

#user-tools a:link,
#user-tools a:visited {
    color: var(--link-fg);
}
#user-tools a:hover {
    color: var(--link-hover-color);
}

/* ---------- Public website ----------------------------------------------- */

body.ht-www {
    --body-bg: white;
    --body-fg: var(--ht-brand-navy);
    --button-fg: white;
    min-height: 100%;
    margin: 0;
    background: var(--ht-brand-navy);
    color: var(--button-fg);
    font-family: Helvetica, sans-serif;
    font-size: 16px;
}
body.ht-www header,
body.ht-www section,
body.ht-www footer {
    padding: 2rem 10%;
}
body.ht-www header,
body.ht-www section.catalog,
body.ht-www footer {
    background: var(--ht-brand-navy);
}
body.ht-www header {
    color: var(--ht-brand-blue);
}
body.ht-www header h3 {
    margin-top: 10px;
}
body.ht-www section.about {
    background: var(--ht-brand-blue);
}
body.ht-www section.about a,
body.ht-www .book-links a {
    color: var(--link-hover-color);
}
body.ht-www section.clients,
body.ht-www section.policy {
    background: var(--body-bg);
    color: var(--body-fg);
}
body.ht-www .catalog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 2rem;
    margin: 2rem 0 0;
    padding: 0;
    list-style: none;
}
body.ht-www .catalog-grid img {
    display: block;
    width: 100%;
    height: auto;
}
body.ht-www .book-links {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
    margin: 0.6rem 0 0;
}
body.ht-www .book-links a {
    font-size: 0.75rem;
}
body.ht-www footer a {
    color: var(--button-fg);
}
body.ht-www .footer-links {
    display: flex;
    gap: 0.75rem;
}
body.ht-www .footer-links a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
}
body.ht-www .footer-links svg {
    display: block;
    width: 20px;
    height: 20px;
}
body.ht-www main p {
    max-width: 40rem;
}
body.ht-www .policy {
    line-height: 1.6;
}
body.ht-www .policy h1,
body.ht-www .policy h2 {
    line-height: 1.2;
}
body.ht-www .policy h2 {
    margin-top: 2rem;
}
body.ht-www .policy a {
    color: var(--link-fg);
}
body.ht-www .policy a:hover,
body.ht-www footer a:hover {
    color: var(--link-hover-color);
}
@media (max-width: 480px) {
    body.ht-www .catalog-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1rem;
    }
}

/* ---------- Common utilities --------------------------------------------- */

.ht-text-muted {
    color: var(--body-quiet-color);
}
.ht-flex-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}
.ht-input-full {
    box-sizing: border-box;
    width: 100%;
}
.ht-mt {
    margin-top: 20px;
}
.ht-badge {
    display: inline-block;
    padding: 2px 8px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: var(--darkened-bg);
    color: var(--body-fg);
    font-size: 0.85em;
    font-weight: 500;
}
.ht-badge.success { background: var(--message-success-bg); }
.ht-badge.error { background: var(--message-error-bg); }
.ht-badge.warning { background: var(--message-warning-bg); }
.ht-badge.info { background: var(--message-info-bg); }

/* ---------- Ask bot — inline form ---------------------------------------- */

#ht-ask-bot-widget form {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 0;
}
#ht-ask-bot-editor {
    border: 1px solid var(--border-color);
    border-radius: 4px;
}
/* ---------- Ask bot — floating widget ------------------------------------ */

#ht-ask-bot-widget-toggle {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 9999;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--ht-brand-blue);
    color: var(--button-fg);
    border: none;
    cursor: pointer;
    font-size: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    box-shadow: 0 2px 10px var(--hairline-color);
    transition: background 0.2s;
}
#ht-ask-bot-widget-toggle:hover {
    background: var(--link-hover-color);
}
#ht-ask-bot-widget-panel {
    display: none;
    position: fixed;
    bottom: 82px;
    right: 20px;
    z-index: 9999;
    width: 380px;
    max-width: calc(100vw - 40px);
    background: var(--body-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: 0 4px 20px var(--hairline-color);
    padding: 12px;
    flex-direction: column;
    gap: 8px;
}
#ht-ask-bot-widget[data-open] #ht-ask-bot-widget-panel {
    display: flex;
}
#ht-ask-bot-widget-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 4px;
}
#ht-ask-bot-widget-close {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 16px;
    color: var(--body-quiet-color);
    padding: 0 4px;
    line-height: 1;
}
#ht-ask-bot-widget-close:hover {
    color: var(--body-fg);
}

/* ---------- Docs viewer -------------------------------------------------- */

#ht-docs-content { max-width: 860px; }
#ht-docs-content h1,
#ht-docs-content h2,
#ht-docs-content h3,
#ht-docs-content h4,
#ht-docs-content h5,
#ht-docs-content h6 { margin-top: 1.2em; }
#ht-docs-content :is(h1,h2,h3,h4,h5,h6) .headerlink {
    opacity: 0; margin-left: 0.4em; text-decoration: none; color: var(--body-quiet-color); font-weight: normal; transition: opacity 0.1s;
}
#ht-docs-content :is(h1,h2,h3,h4,h5,h6):hover .headerlink { opacity: 1; }
#ht-docs-content pre { background: var(--darkened-bg); padding: 1em; overflow-x: auto; }
#ht-docs-content code { background: var(--darkened-bg); padding: 0.15em 0.3em; border-radius: 3px; font-size: 0.9em; }
#ht-docs-content pre code { background: none; padding: 0; }
#ht-docs-content table { border-collapse: collapse; width: 100%; margin: 1em 0; }
#ht-docs-content th,
#ht-docs-content td { border: 1px solid var(--border-color); padding: 6px 10px; text-align: left; }
#ht-docs-content th { background: var(--darkened-bg); }
#ht-docs-content blockquote { border-left: 4px solid var(--border-color); margin: 0; padding-left: 1em; color: var(--body-quiet-color); }
#ht-docs-content img { max-width: 100%; }
#ht-docs-content .highlight { background: var(--darkened-bg); padding: 0.5em; overflow-x: auto; border-radius: 4px; font-size: 0.9em; }
#ht-docs-content pre.mermaid { background: none; padding: 0; overflow: visible; }

#ht-docs-content .md-alert { border-left: 4px solid; padding: 0.6em 1em; margin: 1em 0; border-radius: 0 4px 4px 0; }
#ht-docs-content .md-alert-title { font-weight: bold; margin: 0 0 0.4em; text-transform: uppercase; font-size: 0.85em; }
#ht-docs-content .md-alert-note,
#ht-docs-content .md-alert-important { border-color: var(--link-fg); background: var(--message-info-bg); }
#ht-docs-content .md-alert-tip { border-color: var(--body-fg); background: var(--message-success-bg); }
#ht-docs-content .md-alert-warning { border-color: var(--body-fg); background: var(--message-warning-bg); }
#ht-docs-content .md-alert-caution { border-color: var(--body-fg); background: var(--message-error-bg); }
#ht-docs-content .md-alert-title { color: var(--body-fg); }

#ht-docs-content .toc { background: var(--darkened-bg); border: 1px solid var(--border-color); border-radius: 4px; padding: 0.8em 1.2em; display: inline-block; min-width: 200px; margin: 1em 0; }
#ht-docs-content .toc ul { margin: 0.2em 0; padding-left: 1.4em; }
#ht-docs-content .toc > ul { padding-left: 0; list-style: none; }
#ht-docs-content .toc li { margin: 0.2em 0; }
#ht-docs-content .toc a { text-decoration: none; color: var(--link-fg); }
#ht-docs-content .toc a:hover { text-decoration: underline; }

/* ---------- XML Editor --------------------------------------------------- */

body:has(#ht-editor-wrap) { overflow: hidden; }
body:has(#ht-editor-wrap) #container { display: flex; flex-direction: column; height: 100vh; overflow: hidden; }
body:has(#ht-editor-wrap) #main { flex: 1; overflow: hidden; display: flex; }
body:has(#ht-editor-wrap) .content { flex: 1; overflow: hidden; display: flex; flex-direction: column; }
body:has(#ht-editor-wrap) #content { padding: 0; overflow: hidden; flex: 1; }
body:has(#ht-editor-wrap) #ht-editor-wrap { height: 100%; display: flex; flex-direction: column; }
body:has(#ht-editor-wrap) #editor { flex: 1; }