/*
 * modern.css — additive "2026" finish layer (D189).
 *
 * ╔══════════════════════════════════════════════════════════════════════╗
 * ║  HOW TO REVERT — one line.                                            ║
 * ║  Comment out the <link> to this file in                              ║
 * ║      resources/views/layouts/app.blade.php                          ║
 * ║  The legacy Bootstrap-3 theme (main.css / style.css) is UNTOUCHED,  ║
 * ║  so disabling this link restores the EXACT previous look. This file ║
 * ║  overrides nothing destructively — it only layers a modern finish.  ║
 * ╚══════════════════════════════════════════════════════════════════════╝
 *
 * Loaded LAST so it enhances the legacy theme. `!important` is used ONLY on
 * COSMETIC properties (font, corner radius, shadow, transition, accent colour)
 * so it wins over the many inline styles in the views WITHOUT touching layout-
 * affecting properties (width / padding / margin / position). It can restyle the
 * finish but cannot break a layout. Keyed to existing classes → no markup change.
 *
 * Brand preserved: the H2OLabcheck blue (#1e3a8a / #1e40af) and every logo +
 * layout stay exactly as they were. Honours prefers-reduced-motion.
 */

/* ============================================================
 *  1. TYPOGRAPHY — the single biggest 2016 → 2026 lever
 * ============================================================ */
body,
.btn, .form-control,
input, select, textarea, button,
.navbar, .nav, .panel,
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4 {
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
}
body {
    color: #0f172a;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}
h1, h2, h3, .h1, .h2, .h3 { letter-spacing: -0.01em; }

/* Refined cool-slate neutrals in place of Bootstrap-3's muddy grays. */
.text-muted, small, .small { color: #64748b !important; }

/* ============================================================
 *  2. CARDS / PANELS — soft elevation + rounded corners
 * ============================================================ */
.panel, .thumbnail, .well, .test-widget {
    border-radius: 14px !important;
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.06) !important;
}
.panel { border: 1px solid #eef1f6 !important; }

/* Card hover-lift (home category widgets, product cards, generic panels). */
.test-widget,
.product-container .panel,
.thumbnail {
    transition: transform .2s ease, box-shadow .2s ease;
}
.test-widget:hover,
.product-container .panel:hover,
.thumbnail:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.13) !important;
}

/* ============================================================
 *  3. IMAGE HOVER-ZOOM, contained within the card frame
 *     ("hover the wastewater tile and the image grows")
 * ============================================================ */
.test-widget a > div[style*="background-image"],
.category-tile  > div[style*="background-image"] {
    transition: transform .5s ease;
    will-change: transform;
}
.test-widget:hover a > div[style*="background-image"],
.category-tile:hover  > div[style*="background-image"] {
    transform: scale(1.07);
}
.product-container .img-block .hover-border { display: block; overflow: hidden; }
.product-container .img-block .hover-border img {
    transition: transform .45s ease;
    will-change: transform;
}
.product-container .panel:hover .img-block .hover-border img {
    transform: scale(1.06);
}

/* ============================================================
 *  4. BUTTONS — same brand blue, modern shape + motion
 * ============================================================ */
.btn {
    border-radius: 10px !important;
    font-weight: 500;
    transition: transform .12s ease, box-shadow .16s ease,
                background-color .16s ease, border-color .16s ease, color .16s ease !important;
}
.btn-lg { border-radius: 12px !important; }
.btn-sm, .btn-xs { border-radius: 8px !important; }
.btn:hover  { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(15, 23, 42, 0.16); }
.btn:active { transform: translateY(0); box-shadow: none; }

.btn-primary, .btn-success {
    background-color: #1e40af !important;
    border-color: #1e40af !important;
    box-shadow: 0 2px 6px rgba(30, 64, 175, 0.22);
}
.btn-primary:hover, .btn-primary:focus,
.btn-success:hover, .btn-success:focus {
    background-color: #1b369c !important;
    border-color: #1b369c !important;
}
.btn-default { border-radius: 10px !important; border-color: #dbe2ea !important; }

/* ============================================================
 *  5. FORM INPUTS — taller feel, rounded, soft, clear focus ring
 * ============================================================ */
.form-control {
    border-radius: 10px !important;
    border: 1px solid #dbe2ea !important;
    box-shadow: none !important;
    transition: border-color .15s ease, box-shadow .15s ease !important;
}
.form-control:focus {
    border-color: #1e40af !important;
    box-shadow: 0 0 0 3px rgba(30, 64, 175, 0.12) !important;
}

/* ============================================================
 *  6. NAVBAR — subtle elevation (logo + layout untouched)
 * ============================================================ */
.navbar { box-shadow: 0 2px 14px rgba(15, 23, 42, 0.06); }

/* ============================================================
 *  7. Links + keyboard focus rings (a11y + modern)
 * ============================================================ */
a { transition: color .15s ease; }
a:focus-visible,
.btn:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid #2563eb;
    outline-offset: 2px;
}

/* ============================================================
 *  8. Honour reduced-motion — kill the transforms/transitions
 * ============================================================ */
@media (prefers-reduced-motion: reduce) {
    a, .btn,
    .test-widget, .product-container .panel, .thumbnail,
    .test-widget a > div[style*="background-image"],
    .category-tile  > div[style*="background-image"],
    .product-container .img-block .hover-border img,
    .form-control {
        transition: none !important;
    }
    .btn:hover, .btn:active,
    .test-widget:hover, .product-container .panel:hover, .thumbnail:hover,
    .test-widget:hover a > div[style*="background-image"],
    .category-tile:hover  > div[style*="background-image"],
    .product-container .panel:hover .img-block .hover-border img {
        transform: none !important;
    }
}