/*  /incl/css/hoa.css
    Shared styles for the Self-Managed HOA Guide and related spoke pages.
    Everything with a clean Bootstrap equivalent (cards, grid, spacing,
    borders, badges) should use Bootstrap utility classes directly in the
    markup instead of being added here. This file exists only for the
    handful of things Bootstrap has no utility for.
*/

/* Small uppercase eyebrow label, used above section titles */
.hoa-eyebrow {
    font-size: .65rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
}

/* Tinted icon badge, used on chapter/feature cards */
.hoa-icon-badge {
    width: 2.1rem;
    height: 2.1rem;
    border-radius: .5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
}
.hoa-icon-blue   { background: #dbeafe; color: #1d4ed8; }
.hoa-icon-green  { background: #dcfce7; color: #15803d; }
.hoa-icon-amber  { background: #fef3c7; color: #b45309; }
.hoa-icon-rose   { background: #ffe4e6; color: #be123c; }
.hoa-icon-purple { background: #ede9fe; color: #6d28d9; }
.hoa-icon-slate  { background: #f1f5f9; color: #475569; }

/* Amber "common mistake" callout — tinted panel + label + text */
.hoa-gotcha-panel {
    background: #fffdf5;
}
.hoa-gotcha-label {
    font-size: .62rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #b45309;
    display: flex;
    align-items: center;
    gap: .35rem;
    margin-bottom: .5rem;
}
.hoa-gotcha-label::before {
    content: '';
    display: inline-block;
    width: 3px;
    height: .85rem;
    background: #f59e0b;
    border-radius: 2px;
    flex-shrink: 0;
}
.hoa-gotcha-text {
    font-size: .85rem;
    color: #78350f;
    line-height: 1.55;
    margin: 0;
}

/* Small soft-color badges, used on "further reading" style cards */
.hoa-badge-blog { background: #e0f2fe; color: #0369a1; }
.hoa-badge-tool { background: #dcfce7; color: #15803d; }