/* ==========================================================================
   Home 2026 — full-bleed content shell for the homepage
   Replaces Bootstrap's stepped .container (540/720/960/1140/1320) with a
   fluid, edge-to-edge layout that only clamps padding, not width, so the
   content reaches the screen edges like an app instead of floating in a
   boxed column. Scoped to .home2026-shell so no other page is affected.
   ========================================================================== */

body.site2026 .home2026-shell {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0 16px;
}

@media (min-width: 576px) {
    body.site2026 .home2026-shell { padding: 0 24px; }
}

@media (min-width: 992px) {
    body.site2026 .home2026-shell { padding: 0 40px; }
}

@media (min-width: 1400px) {
    body.site2026 .home2026-shell { padding: 0 64px; }
}

/* -------------------------------------------------------------------- */
/* Why Choose Us — 3-feature strip                                      */
/* -------------------------------------------------------------------- */
body.site2026 .why2026 {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 28px 0 8px;
    margin-top: 8px;
    border-top: 1px solid #E2E8F0;
}

html[data-theme="dark"] body.site2026 .why2026 {
    border-top-color: var(--n-line-dark);
}

@media (min-width: 768px) {
    body.site2026 .why2026 {
        grid-template-columns: repeat(3, 1fr);
    }
}

body.site2026 .why2026-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px;
    border-radius: 16px;
    background: var(--white);
    border: 1px solid #E2E8F0;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

html[data-theme="dark"] body.site2026 .why2026-item {
    background: var(--light-blue);
    border-color: var(--n-line-dark);
}

body.site2026 .why2026-item h4 {
    margin: 0 0 2px;
    font-size: 14px;
    font-weight: 700;
    color: #0F172A;
}

html[data-theme="dark"] body.site2026 .why2026-item h4 {
    color: #fff;
}

body.site2026 .why2026-item p {
    margin: 0;
    font-size: 12px;
    color: #64748B;
}

html[data-theme="dark"] body.site2026 .why2026-item p {
    color: rgba(255, 255, 255, 0.6);
}

body.site2026 .why2026-icon {
    flex: none;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
}

body.site2026 .why2026-icon-sky {
    color: #0284C7;
    background: #F0F9FF;
    border: 1px solid #E0F2FE;
}

body.site2026 .why2026-icon-blue {
    color: #2563EB;
    background: #EFF6FF;
    border: 1px solid #DBEAFE;
}

body.site2026 .why2026-icon-indigo {
    color: #4F46E5;
    background: #EEF2FF;
    border: 1px solid #E0E7FF;
}

body.site2026 .why2026-icon-amber {
    color: #D97706;
    background: #FFFBEB;
    border: 1px solid #FEF3C7;
}

body.site2026 .why2026-icon-emerald {
    color: #059669;
    background: #ECFDF5;
    border: 1px solid #D1FAE5;
}

body.site2026 .why2026-icon-violet {
    color: #7C3AED;
    background: #F5F3FF;
    border: 1px solid #EDE9FE;
}

/* NOTE: the navbar, promo bar, and footer are shared across every page
   (rendered by header.php/footer.php), so their edge-to-edge treatment
   lives in nav-2026.css (loaded on every page) — see that file — rather
   than here, otherwise only the home page would get it while every other
   page (order, etc.) kept the old narrower, centered look. */