/* Custom overrides for Bootstrap layout in Dev folder */

:root{
    --brand-color: #0d6efd;
    --muted-bg: #f8f9fa;
}

/* Use Bootstrap typography baseline; remove full-screen centering from previous file */
body {
    margin: 0;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    color: #222;
    background-color: var(--muted-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    line-height: 1.5;
}

/* Header / navbar logo */
.header-logo {
    width: 48px;
    height: auto;
    display: inline-block;
}

/* Page main logo shown below navbar */
.logo {
    width: clamp(80px, 18vmin, 140px);
    height: auto;
}

/* Headings */
h1, h2 {
    color: #0b3d91;
}

/* Offer list: slightly separated from Bootstrap list-group defaults */
.offer-list {
    list-style: none;
    padding-left: 0; /* we'll add icons ourselves */
}
.offer-list .list-group-item {
    background-color: transparent !important;
    border: none;
    display: block;
    padding-left: 2.25rem; /* space for icon */
    position: relative;
    transition: background-color .12s ease, transform .06s ease;
}
.offer-list .list-group-item::before {
    content: "•";
    position: absolute;
    left: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--brand-color);
    font-size: 1.25rem;
    line-height: 1;
}
.offer-list .list-group-item:hover {
    background-color: rgba(13,110,253,0.04); /*subtle tint */
    transform: translateY(-1px);
}
/* Accent-left style for list-group items */
.offer-list.accent-left .list-group-item {
    background-color: #ffffff; /* card background; set to transparent to blend with page */
    border: none;
    border-left: 4px solid var(--brand-color);
    border-radius: .25rem;
    padding: .65rem 1rem;
    margin-bottom: .5rem;
    box-shadow: 0 6px 18px rgba(20,20,40,0.04);
    transition: transform .08s ease, box-shadow .12s ease;
}
.offer-list.accent-left .list-group-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 26px rgba(20,20,40,0.06);
}
.offer-list.accent-left .list-group-item::before { display: none; }

/* Approach list: keep simple readable spacing */
.approach-list {
    list-style: none;
    padding-left: 0;
    margin-top: .5rem;
}

.approach-list li {
    margin: .45rem 0;
}

/* Footer link */
.site-footer a {
    color: var(--brand-color);
    text-decoration: none;
}

/* Sticky header spacing: ensure anchored sections visible */
html { scroll-padding-top: 5rem; }

/* keep sticky navbar above content and retain shadow/backdrop */
.site-header, .navbar.sticky-top {
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 1050 !important; /* above content */
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    background-color: rgba(255,255,255,0.98); /* avoid content showing through when sticky */
}

/* Small screens tweaks */
@media (max-width: 576px) {
    .header-logo { width: 40px; }
    .logo { width: clamp(64px, 24vmin, 120px); }
}