/* ============================================================
   SELF-HOSTED MONTSERRAT (latin, weights 400/500/600/700)
   Source: @fontsource/montserrat — zero Google Fonts requests.
   ============================================================ */
@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/fonts/montserrat-latin-400-normal.woff2') format('woff2');
}
@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('/fonts/montserrat-latin-500-normal.woff2') format('woff2');
}
@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('/fonts/montserrat-latin-600-normal.woff2') format('woff2');
}
@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('/fonts/montserrat-latin-700-normal.woff2') format('woff2');
}

/* ============================================================
   CSS CUSTOM PROPERTIES
   ============================================================ */
:root {
    --brand-navy:        #16335B;
    --brand-blue:        #1565C0;
    --brand-blue-light:  #2E9BE0;
    --brand-amber:       #E8922E;
    --brand-tint:        #EAF1F9;
    --brand-slate:       #5A6B7B;
    --brand-page:        #F7FAFC;
    --header-h:          60px;
    /* Landing-page shade tokens */
    --lp-hero-bg:        #EDF3FA;
    --lp-cat-bg:         #DCE8F4;
    --lp-how-bg:         #F4F7FB;
    --lp-border-mid:     #C7D6E6;
    --lp-border-light:   #D5E2EF;
    --lp-why-text:       #D8E4F0;
}

/* ============================================================
   BASE
   ============================================================ */
html, body {
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
    font-size: 15px;
    line-height: 1.55;
    background-color: var(--brand-page);
    color: var(--brand-navy);
}

h1, h2, h3, h4, h5, h6 {
    color: var(--brand-navy);
    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(--brand-blue);
    text-decoration: none;
}
a:hover {
    color: var(--brand-blue-light);
    text-decoration: underline;
}

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

/* Cap containers at 1140 px on very wide screens */
@media (min-width: 1400px) {
    .container { max-width: 1140px; }
}

/* ============================================================
   HEADER
   ============================================================ */
.bo-header {
    background: #ffffff;
    border-bottom: 1px solid #d8e5f0;
    position: sticky;
    top: 0;
    z-index: 200;
    box-shadow: 0 1px 4px rgba(22, 51, 91, 0.07);
}

.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;
}

/* ============================================================
   BRAND LOCKUP
   ============================================================ */
.bo-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none !important;
    flex-shrink: 0;
    margin-right: 1.5rem;
}

.bo-brand:hover { text-decoration: none !important; }

.bo-logo-full  { height: 44px; width: auto; }
.bo-logo-icon  { height: 32px; width: auto; }

.bo-wordmark {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
}

.bo-name {
    font-family: 'Montserrat', system-ui, sans-serif;
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: -0.015em;
}

.bo-business { color: var(--brand-navy); }
.bo-offers   { color: var(--brand-amber); }

.bo-tagline {
    font-size: 10px;
    letter-spacing: 1.5px;
    color: var(--brand-slate);
    text-transform: uppercase;
    margin-top: 2px;
}

/* ============================================================
   NAV LINKS
   ============================================================ */
.bo-header .nav-link {
    color: var(--brand-navy);
    font-size: 0.875rem;
    padding: 0.35rem 0.7rem;
    border-radius: 4px;
}

.bo-header .nav-link:hover {
    color: var(--brand-blue);
    background-color: var(--brand-tint);
}

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

.bo-header .navbar-toggler {
    border-color: rgba(22, 51, 91, 0.2);
}

.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='%2316335B' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.bo-header .dropdown-menu {
    border: 1px solid #d8e5f0;
    border-radius: 6px;
    box-shadow: 0 4px 16px rgba(22, 51, 91, 0.10);
    font-size: 0.875rem;
}

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

.bo-header .dropdown-item:hover,
.bo-header .dropdown-item:focus {
    background-color: var(--brand-tint);
    color: var(--brand-blue);
}

.bo-user-email {
    font-size: 0.78rem;
    color: var(--brand-slate);
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

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

/* ============================================================
   BUTTONS
   ============================================================ */
.btn-primary {
    background-color: var(--brand-blue);
    border-color: var(--brand-blue);
    color: #fff;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background-color: var(--brand-blue-light);
    border-color: var(--brand-blue-light);
    color: #fff;
}

.btn-outline-primary {
    color: var(--brand-blue);
    border-color: var(--brand-blue);
}
.btn-outline-primary:hover,
.btn-outline-primary:focus {
    background-color: var(--brand-blue);
    border-color: var(--brand-blue);
    color: #fff;
}

/* CTA — amber. Use sparingly: one primary CTA per view. */
.btn-cta {
    background-color: var(--brand-amber);
    border-color: var(--brand-amber);
    color: #fff;
    font-weight: 500;
}
.btn-cta:hover,
.btn-cta:focus,
.btn-cta:active {
    background-color: #cf7d20;
    border-color: #cf7d20;
    color: #fff;
}

.btn-navy {
    background-color: var(--brand-navy);
    border-color: var(--brand-navy);
    color: #fff;
    font-weight: 500;
}
.btn-navy:hover,
.btn-navy:focus,
.btn-navy:active {
    background-color: #1E4275;
    border-color: #1E4275;
    color: #fff;
}

.btn:focus,
.btn:active:focus,
.form-control:focus,
.form-check-input:focus {
    box-shadow: 0 0 0 0.1rem #fff, 0 0 0 0.25rem rgba(21, 101, 192, 0.28);
}

/* ============================================================
   CARDS
   ============================================================ */
.card {
    border: 1px solid #d8e5f0;
    border-radius: 6px;
    background: #fff;
    box-shadow: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.card:hover {
    border-color: var(--brand-blue-light);
    box-shadow: 0 2px 10px rgba(21, 101, 192, 0.09);
}

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

.card .card-header {
    padding: 0.6rem 1rem;
    font-size: 0.875rem;
    font-weight: 600;
}

/* Denser listing grid gaps */
.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(--brand-tint);
}

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

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

.card-title {
    font-size: 0.92rem !important;
    font-weight: 600;
    margin-bottom: 0.35rem;
}

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

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

.validation-message {
    color: #c62828;
}

/* ============================================================
   HERO BAND (Home page)
   ============================================================ */
.bo-hero {
    background: var(--brand-tint);
    border-bottom: 1px solid #d8e5f0;
    padding: 3.5rem 0 3rem;
}

.bo-hero-content {
    max-width: 780px;
}

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

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

.bo-hero-tagline {
    font-size: 10px;
    letter-spacing: 1.5px;
    color: var(--brand-slate);
    text-transform: uppercase;
    margin-bottom: 1.5rem;
}

.bo-hero-search .form-control-lg,
.bo-hero-search .form-select-lg {
    height: 48px;
    font-size: 0.95rem;
}

/* ============================================================
   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."
}

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder,
.form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder,
.form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/* ============================================================
   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(--brand-blue);
    color: #fff;
    border-bottom-right-radius: 3px;
}

.bo-msg-theirs {
    background: #fff;
    border: 1px solid #d8e5f0;
    color: var(--brand-navy);
    border-bottom-left-radius: 3px;
}