/* ============================================================
   FeedMachinery Troubleshoot — brand layer, loaded after Bulma.
   Brand: primary #a5392f (hover #8a2f27, light tint #c0554a)
   Font: system stack, weight 500 (matches feedmachinery.com)
   ============================================================ */

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial,
        sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    font-weight: 500;
    background: #fafafa;
}

/* ---------- Navbar ---------- */
.navbar.app-navbar {
    background: #fff;
    border-bottom: 1px solid #e8e8e8;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
.navbar.app-navbar .navbar-item,
.navbar.app-navbar .navbar-link {
    color: #444;
    font-weight: 500;
}
.navbar.app-navbar a.navbar-item:hover {
    background: transparent;
    color: #a5392f;
}
.navbar.app-navbar .navbar-burger {
    color: #444;
}

.app-brand {
    font-size: 1.15rem;
    font-weight: 700;
    color: #333 !important;
    letter-spacing: -0.01em;
}
.app-brand .brand-dot {
    color: #a5392f;
}
.app-brand .brand-app {
    color: #999;
    font-weight: 400;
    font-size: 0.85rem;
    margin-left: 0.5em;
}

/* ---------- Buttons / accents ---------- */
.button.is-primary { background-color: #a5392f; border-color: transparent; }
.button.is-primary:hover, .button.is-primary.is-hovered { background-color: #8a2f27; }
.button.is-primary.is-outlined { background: transparent; border-color: #a5392f; color: #a5392f; }
.button.is-primary.is-outlined:hover { background: #a5392f; border-color: #a5392f; color: #fff; }
.button.is-link { background-color: #c0554a; border-color: transparent; }
.button.is-link:hover, .button.is-link.is-hovered { background-color: #a5392f; }
a { color: #a5392f; }
a:hover { color: #8a2f27; }
.box { box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 0 0 1px rgba(0, 0, 0, 0.03); }

/* ---------- Walker ---------- */
.walker-card {
    max-width: 720px;
    margin: 0 auto;
}
.walker-answers .button {
    justify-content: flex-start;
    white-space: normal;
    height: auto;
    min-height: 3.2em;
    text-align: left;
    font-size: 1.05rem;
    width: 100%;
    margin-bottom: 0.6rem;
}
.walker-image {
    text-align: center;
    margin: 1rem 0;
}
.walker-image img, .walker-image svg {
    max-width: 100%;
    height: auto;
    border: 1px solid #e8e8e8;
    border-radius: 6px;
    background: #fff;
}
.walker-breadcrumb {
    font-size: 0.8rem;
    color: #888;
    margin-bottom: 1rem;
}
.walker-breadcrumb a {
    color: #a5392f;
    text-decoration: underline dotted;
}
.walker-checklist label {
    display: block;
    padding: 0.5rem 0.75rem;
    border: 1px solid #e8e8e8;
    border-radius: 4px;
    margin-bottom: 0.4rem;
    background: #fff;
    cursor: pointer;
}
.walker-checklist input {
    margin-right: 0.6em;
}

/* ---------- Hazard banners ---------- */
.hazard-banner {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    border: 2px solid #f0b000;
    background: #fff8e5;
    border-radius: 6px;
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
}
.hazard-banner img {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
}
.hazard-banner strong {
    color: #7a5c00;
}

/* Full-screen LOTO safety stop */
.loto-stop {
    border: 3px solid #d40000;
    border-radius: 8px;
    background: #fff5f5;
    padding: 1.5rem;
}
.loto-stop h2 {
    color: #d40000;
}
.loto-symbols {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin: 1rem 0;
}
.loto-symbols img {
    width: 56px;
    height: 56px;
}

/* ---------- Outcome ---------- */
.outcome-card { border-left: 6px solid #999; }
.outcome-card.severity-info { border-left-color: #3e8ed0; }
.outcome-card.severity-attention { border-left-color: #f0b000; }
.outcome-card.severity-urgent { border-left-color: #d40000; }

/* ---------- Tree directory cards ---------- */
.tree-card {
    height: 100%;
    display: flex;
    flex-direction: column;
}
.tree-card .tree-cat {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #a5392f;
    font-weight: 700;
}

/* ---------- Gate ---------- */
.gate-box {
    border: 2px solid #a5392f;
    border-radius: 8px;
    background: #fff;
    padding: 1.5rem;
    text-align: center;
}

/* ---------- Footer ---------- */
.app-footer {
    padding: 1.5rem;
    text-align: center;
    color: #999;
    font-size: 0.8rem;
}
.app-footer a { color: #a5392f; }

/* ---------- Print (diagnosis PDF via browser print) ---------- */
@media print {
    .navbar, .app-footer, .no-print, .button, .breadcrumb {
        display: none !important;
    }
    body { background: #fff; }
    .section { padding: 0; }
}