/* ============================================================
   SELF-HOSTED FONTS
   Space Mono (static 400/700) — wordmark + tagline
   Bricolage Grotesque (variable wght 300–800) — mark glyphs + display
   Body/UI text uses system-ui (readable sans — NOT monospace).
   Zero Google Fonts requests — all served from /fonts/.
   ============================================================ */
@font-face {
    font-family: 'Space Mono';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/fonts/space-mono-latin-400-normal.woff2') format('woff2');
}
@font-face {
    font-family: 'Space Mono';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('/fonts/space-mono-latin-700-normal.woff2') format('woff2');
}
@font-face {
    font-family: 'Bricolage Grotesque';
    font-style: normal;
    font-weight: 300 800;   /* variable axis range */
    font-display: swap;
    src: url('/fonts/bricolage-grotesque-latin-wght-normal.woff2') format('woff2');
}

/* ============================================================
   DESIGN TOKENS — espresso / clay warm system
   ============================================================ */
:root {
    /* ── Core brand ─────────────────────────────────────── */
    --bo-ink:          #261C16;   /* espresso — darkest text, borders */
    --bo-accent:       #BC5A3C;   /* clay — CTAs, links, primary accent */
    --bo-amber:        #C98A3E;   /* warm gold — secondary accent */
    --bo-sand:         #D9C4AC;   /* warm beige — dividers on dark */
    --bo-paper:        #FBF7F0;   /* lightest surface — cards, header */
    --bo-canvas:       #EBE2D4;   /* page background */

    /* ── Text scale ─────────────────────────────────────── */
    --bo-text-strong:  #3D342B;
    --bo-text:         #766859;
    --bo-text-muted:   #9A8C7C;
    --bo-text-faint:   #A89A88;

    /* ── Borders / dividers ─────────────────────────────── */
    --bo-border:       #E7DCC9;
    --bo-divider:      #EFE6D7;

    /* ── Backward-compat aliases (inline styles in Razor use var(--brand-*)) */
    --brand-navy:        var(--bo-ink);
    --brand-blue:        var(--bo-accent);
    --brand-blue-light:  #D4704F;       /* lighter clay for hover */
    --brand-amber:       var(--bo-accent);
    --brand-tint:        #F0E8DA;   /* light warm beige — subtle tint on white/paper surfaces */
    --brand-slate:       var(--bo-text);
    --brand-page:        var(--bo-paper);   /* #FBF7F0 */

    /* Landing-page section tokens */
    --lp-hero-bg:        var(--bo-paper);
    --lp-cat-bg:         #EDE5D5;   /* adjusted for paper body — maintains tonal rhythm */
    --lp-how-bg:         var(--bo-paper);
    --lp-border-mid:     var(--bo-border);
    --lp-border-light:   var(--bo-divider);
    --lp-why-text:       var(--bo-sand);

    --header-h: 60px;
}

/* ============================================================
   BASE
   ============================================================ */
html, body {
    font-family: 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
    font-size: 16px;
    line-height: 1.6;
    background-color: var(--bo-paper);   /* #FBF7F0 — matches homepage hero, consistent site-wide */
    color: var(--bo-text-strong);
}

h1, h2, h3, h4, h5, h6 {
    color: var(--bo-ink);
    font-weight: 600;
}

h1 { font-size: 1.7rem; }
h2 { font-size: 1.35rem; }
h3 { font-size: 1.15rem; }
h4 { font-size: 1.0rem; }
h5 { font-size: 0.92rem; }
h1:focus { outline: none; }

a, .btn-link {
    color: var(--bo-accent);
    text-decoration: none;
}
a:hover {
    color: #9B4730;
    text-decoration: underline;
}

.text-muted {
    color: var(--bo-text-muted) !important;
}

@media (min-width: 1400px) {
    .container { max-width: 1140px; }
}

/* ============================================================
   HEADER — muted warm-dark (#3D2E24): softer than full espresso
   ============================================================ */
.bo-header {
    background: #3D2E24;
    border-bottom: 1px solid rgba(255,255,255,.07);
    position: sticky;
    top: 0;
    z-index: 200;
    box-shadow: 0 2px 10px rgba(38,28,22,.28);
}

/* Light plaque that holds the logo on the dark header — matches page bg */
.bo-logo-plaque {
    display: inline-flex;
    align-items: center;
    background: var(--bo-paper);   /* #FBF7F0 — same as page body */
    border-radius: 12px;
    padding: 5px 14px;
    box-shadow: 0 1px 5px rgba(38,28,22,.22);
    line-height: 1;
}

/* Suppress default link underline on hover for the plaque link */
.bo-logo-plaque-link:hover { text-decoration: none !important; }

.bo-header .navbar {
    padding: 0;
    min-height: var(--header-h);
}

.bo-header-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.5rem;
    min-height: var(--header-h);
    display: flex;
    align-items: center;
}

/* ============================================================
   NAV LINKS — on dark espresso header
   ============================================================ */
.bo-header .nav-link {
    color: #CBBBA8;                          /* warm sand — readable on espresso */
    font-size: 0.875rem;
    padding: 0.35rem 0.7rem;
    border-radius: 4px;
    transition: color .12s, background-color .12s;
}

.bo-header .nav-link:hover {
    color: var(--bo-paper);
    background-color: rgba(255,255,255,.09);
}

.bo-header .nav-link.active {
    color: var(--bo-paper);
    font-weight: 500;
}

@media (min-width: 992px) {
    .bo-header .navbar-nav.me-auto .nav-item {
        display: flex;
        align-items: center;
    }
    .bo-header .navbar-nav.me-auto .nav-item + .nav-item::before {
        content: '';
        display: block;
        width: 1px;
        height: 14px;
        background: rgba(255,255,255,.15);
        flex-shrink: 0;
        margin-right: 0.35rem;
    }
}

.bo-header .navbar-toggler {
    border-color: rgba(251,247,240,.25);
}

.bo-header .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23FBF7F0' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* Dropdown appears below the dark header — white surface */
.bo-header .dropdown-menu {
    border: 1px solid var(--bo-border);
    border-radius: 6px;
    box-shadow: 0 6px 20px rgba(38,28,22,.18);
    font-size: 0.875rem;
    background: #FFFFFF;
}

.bo-header .dropdown-item {
    color: var(--bo-text-strong);
    padding: 0.45rem 1rem;
}

.bo-header .dropdown-item:hover,
.bo-header .dropdown-item:focus {
    background-color: var(--bo-divider);
    color: var(--bo-accent);
}

/* User email + secondary text on dark header */
.bo-user-email {
    font-size: 0.78rem;
    color: #CBBBA8;
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Header CTA: clay fill, ESPRESSO text (spec: dark-header CTA flip) */
.bo-header .btn-cta,
.bo-header .btn-cta:hover,
.bo-header .btn-cta:focus,
.bo-header .btn-cta:active {
    color: var(--bo-ink) !important;
}

/* ============================================================
   MAIN
   ============================================================ */
.bo-main {
    min-height: calc(100vh - var(--header-h));
}

/* ============================================================
   BUTTONS
   ============================================================ */

/* Primary: lighter clay fill — #C96B4F, paper text ~5:1 contrast (WCAG AA) */
.btn-primary,
.btn-cta {
    background-color: #C96B4F;
    border-color: #C96B4F;
    color: var(--bo-paper);
    font-weight: 500;
    border-radius: 9px;
}
.btn-primary:hover,  .btn-primary:focus,  .btn-primary:active,
.btn-cta:hover,      .btn-cta:focus,      .btn-cta:active {
    background-color: #AB5840;
    border-color:     #AB5840;
    color: var(--bo-paper);
}

/* Secondary: espresso fill */
.btn-navy,
.btn-secondary {
    background-color: var(--bo-ink);
    border-color:     var(--bo-ink);
    color: var(--bo-paper);
    font-weight: 500;
    border-radius: 9px;
}
.btn-navy:hover,      .btn-navy:focus,      .btn-navy:active,
.btn-secondary:hover, .btn-secondary:focus, .btn-secondary:active {
    background-color: #3D342B;
    border-color:     #3D342B;
    color: var(--bo-paper);
}

/* Outline: clay border + text */
.btn-outline-primary {
    color: var(--bo-accent);
    border-color: var(--bo-accent);
    border-radius: 9px;
}
.btn-outline-primary:hover,
.btn-outline-primary:focus {
    background-color: var(--bo-accent);
    border-color:     var(--bo-accent);
    color: var(--bo-paper);
}

/* Neutral outline */
.btn-outline-secondary {
    color: var(--bo-text-strong);
    border-color: var(--bo-border);
    border-radius: 9px;
}
.btn-outline-secondary:hover,
.btn-outline-secondary:focus {
    background-color: var(--bo-divider);
    border-color:     var(--bo-border);
    color: var(--bo-ink);
}

/* AI generate — lighter clay gradient */
.btn-ai {
    background: linear-gradient(135deg, #C96B4F 0%, #D98060 100%);
    border-color: #C96B4F;
    color: var(--bo-paper);
    font-weight: 500;
    border-radius: 9px;
}
.btn-ai:hover:not(:disabled),
.btn-ai:focus:not(:disabled),
.btn-ai:active:not(:disabled) {
    background: linear-gradient(135deg, #AB5840 0%, #C96B4F 100%);
    border-color: #AB5840;
    color: var(--bo-paper);
}
.btn-ai:disabled {
    background: linear-gradient(135deg, #C96B4F 0%, #D98060 100%);
    border-color: #C96B4F;
    color: var(--bo-paper);
    opacity: 0.55;
}

/* Focus ring */
.btn:focus,
.btn:active:focus,
.form-control:focus,
.form-check-input:focus {
    box-shadow: 0 0 0 0.1rem var(--bo-paper), 0 0 0 0.25rem rgba(188,90,60,.28);
}

/* Bootstrap primary override (spinner-border text-primary, etc.) */
.text-primary    { color: var(--bo-accent) !important; }
.bg-primary      { background-color: var(--bo-accent) !important; }
.border-primary  { border-color: var(--bo-accent) !important; }
.text-bg-primary { background-color: var(--bo-accent) !important; color: var(--bo-paper) !important; }

/* Info → sand/amber (removes Bootstrap teal/blue) */
.text-bg-info, .badge.text-bg-info {
    background-color: var(--bo-sand) !important;
    color: var(--bo-ink) !important;
}

/* ============================================================
   FORM CONTROLS
   ============================================================ */
.form-control,
.form-select {
    color: var(--bo-ink);
    border-color: var(--bo-border);
    background-color: #FFFFFF;   /* white — body is now paper, inputs must be clearly lighter */
}
.form-control:focus,
.form-select:focus {
    border-color: var(--bo-accent);
    background-color: #FFFFFF;
}
.form-control::placeholder,
textarea.form-control::placeholder {
    color: var(--bo-text-faint);
    opacity: 1;
}

/* ============================================================
   CARDS
   ============================================================ */
.card {
    border: 1px solid #E0D4C0;
    border-radius: 8px;
    background: #FFFFFF;                    /* white — clearly above the paper (#FBF7F0) body */
    box-shadow: 0 2px 8px rgba(38,28,22,.10);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.card:hover {
    border-color: #C8A882;
    box-shadow: 0 3px 12px rgba(38,28,22,.12);
}

.card .card-body {
    padding: 0.85rem 1rem;
}

.card .card-header {
    padding: 0.6rem 1rem;
    font-size: 0.875rem;
    font-weight: 600;
    background: #FFFFFF;
    border-bottom: 1px solid var(--bo-border);
    color: var(--bo-ink);
}

.card .card-header.bg-primary,
.card .card-header.bg-secondary {
    background: var(--bo-ink) !important;
    color: var(--bo-paper) !important;
    border-bottom-color: transparent;
}

.row.g-4 { --bs-gutter-x: 1.1rem; --bs-gutter-y: 1.1rem; }
.row.g-3 { --bs-gutter-x: 0.9rem; --bs-gutter-y: 0.9rem; }

/* ============================================================
   TINT SURFACE
   ============================================================ */
.bg-tint, .section-tint {
    background-color: var(--bo-canvas);
}

/* ============================================================
   TYPOGRAPHY HELPERS
   ============================================================ */
.page-title {
    font-size: 1.7rem;
    font-weight: 600;
    color: var(--bo-ink);
    margin-bottom: 0.25rem;
}

.section-heading {
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--bo-ink);
    margin-bottom: 0.75rem;
}

.card-title {
    font-size: 0.92rem !important;
    font-weight: 600;
    margin-bottom: 0.35rem;
    color: var(--bo-ink);
}

/* ============================================================
   FORM VALIDATION
   ============================================================ */
.valid.modified:not([type=checkbox]) {
    outline: 1px solid #4caf50;
}

.form-control.invalid,
.form-select.invalid {
    border-color: #c62828 !important;
    box-shadow: 0 0 0 0.2rem rgba(198,40,40,.15);
    outline: none;
}

.invalid { outline: 2px solid #c62828; }

.validation-message {
    color: #c62828;
    font-size: 0.875em;
}

.validation-summary-errors {
    background: #fef2f2;
    border: 1px solid #f5c6cb;
    border-radius: 0.375rem;
    color: #b91c1c;
    font-size: 0.875rem;
    margin-bottom: 1rem;
    padding: 0.5rem 1rem 0.5rem 1.75rem;
    list-style-type: disc;
}

.validation-summary-valid { display: none; }

/* ============================================================
   SITE FOOTER
   ============================================================ */
.bo-footer {
    background: var(--bo-ink);
    color: rgba(251,247,240,.65);
    font-size: 0.82rem;
    padding: 1.25rem 0;
    margin-top: 3rem;
}

.bo-footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.2rem 1.25rem;
}

.bo-footer a {
    color: rgba(251,247,240,.75);
    text-decoration: none;
}

.bo-footer a:hover { color: var(--bo-amber); }

.bo-footer-copy { color: rgba(251,247,240,.45); }

/* ============================================================
   LANDING PAGE — Hero / sections
   ============================================================ */
.bo-hero {
    background: var(--lp-hero-bg);
    border-bottom: 1px solid var(--bo-divider);
    padding: 3.5rem 0 3rem;
}

.bo-hero-title {
    font-size: clamp(1.75rem, 4vw, 2.4rem);
    font-weight: 700;
    color: var(--bo-ink);
    line-height: 1.2;
    margin-bottom: 0.75rem;
}

.bo-hero-sub {
    font-size: 1.05rem;
    color: var(--bo-text);
    margin-bottom: 0.4rem;
    max-width: 580px;
}

/* ============================================================
   DETAIL PAGE FRAME
   ============================================================ */
.detail-frame {
    background: #FFFFFF;
    border: 1px solid #E0D4C0;
    border-radius: 14px;
    padding: 1.75rem 2rem;
}

/* Full-bleed lighter bg for detail/content pages so the margin
   area (around the constrained container) also reads as near-white. */
.page-detail-bg {
    background: #FDFBF8;
    min-height: calc(100vh - var(--header-h));
    padding-top: 1.5rem;
    padding-bottom: 2rem;
}

@media (max-width: 575.98px) {
    .detail-frame {
        border-left: none;
        border-right: none;
        border-radius: 0;
        padding: 1.25rem 1rem;
    }
}

/* ============================================================
   GUIDE / SPOTLIGHT MARKDOWN BODY
   ============================================================ */
.guide-body ul,
.guide-body ol {
    display: block;
    padding-left: 1.5rem;
    margin-top: 0.5rem;
    margin-bottom: 0.75rem;
}

.guide-body li { display: list-item; margin-bottom: 0.2rem; }
.guide-body ul { list-style-type: disc; }
.guide-body ol { list-style-type: decimal; }
.guide-body p  { margin-bottom: 0.75rem; }
.guide-body h1, .guide-body h2, .guide-body h3,
.guide-body h4, .guide-body h5, .guide-body h6 { margin-top: 1rem; margin-bottom: 0.4rem; }
.guide-body code { font-size: 0.875em; }
.guide-body pre  { margin-bottom: 0.75rem; }
.guide-body blockquote {
    border-left: 3px solid var(--bo-border);
    padding-left: 0.75rem;
    color: var(--bo-text);
}

/* ============================================================
   MESSAGING BUBBLES
   ============================================================ */
.bo-msg-mine,
.bo-msg-theirs {
    max-width: 72%;
    padding: 0.55rem 0.85rem;
    border-radius: 12px;
    font-size: 0.9rem;
    line-height: 1.5;
}

.bo-msg-mine {
    background: var(--bo-accent);
    color: var(--bo-paper);
    border-bottom-right-radius: 3px;
}

.bo-msg-theirs {
    background: var(--bo-paper);
    border: 1px solid var(--bo-border);
    color: var(--bo-ink);
    border-bottom-left-radius: 3px;
}

/* ============================================================
   BLAZOR ERROR BOUNDARY
   ============================================================ */
.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

.blazor-error-boundary::after {
    content: "An error has occurred."
}

/* ============================================================
   MISC BOOTSTRAP FIXES
   ============================================================ */
.darker-border-checkbox.form-check-input { border-color: #929292; }

.form-floating > .form-control-plaintext::placeholder,
.form-floating > .form-control::placeholder { color: var(--bo-text-faint); text-align: end; }
.form-floating > .form-control-plaintext:focus::placeholder,
.form-floating > .form-control:focus::placeholder { text-align: start; }

/* ============================================================
   SPOTLIGHT CAROUSEL FADE
   ============================================================ */
@keyframes bo-fade-in {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}
.spotlight-fade { animation: bo-fade-in 0.3s ease; }