/* =========================================================
   VISUAL POLISH (optional)
   Small finishing touches only, same colors, layout and content.
   To undo everything in this file, remove its <link> line in header.php.
========================================================= */

/* Smooth scrolling for in-page links (#contact, #hero, ...) */
html {
    scroll-behavior: smooth;
}

/* Crisper font rendering */
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* Balanced heading lines (no single word left alone on the last line) */
h1, h2, h3, h4, h5, h6 {
    text-wrap: balance;
}

p, li {
    text-wrap: pretty;
}

/* Text selection in brand blue */
::selection {
    background: rgba(0, 82, 255, 0.18);
    color: inherit;
}

/* Clear keyboard focus ring in brand colors */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible {
    outline: 2px solid var(--brand-cyan);
    outline-offset: 3px;
}

/* Buttons: soft "press" feedback on click/tap */
.btn:active {
    transform: scale(0.98) !important;
}

/* Blog cards: gentle lift + image zoom on hover */
.blog-section .card {
    transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.blog-section .card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 40px rgba(0, 82, 255, 0.12) !important;
}

.blog-section .card .card-img-top {
    transition: transform 0.6s ease;
}

.blog-section .card:hover .card-img-top {
    transform: scale(1.06);
}

.blog-section .card h5 a {
    transition: color 0.25s ease;
}

.blog-section .card:hover h5 a {
    color: var(--brand-blue) !important;
}

/* "Read Article" arrow nudges on hover */
.blog-section .card .fa-arrow-right {
    transition: transform 0.25s ease;
}

.blog-section .card:hover .fa-arrow-right {
    transform: translateX(4px);
}

/* Slim brand-colored scrollbar (desktop browsers) */
@media (hover: hover) {
    html {
        scrollbar-width: thin;
        scrollbar-color: #0052FF #F1F5F9;
    }

    ::-webkit-scrollbar {
        width: 10px;
        height: 10px;
    }

    ::-webkit-scrollbar-track {
        background: #F1F5F9;
    }

    ::-webkit-scrollbar-thumb {
        background: linear-gradient(180deg, #0052FF, #00D2FF);
        border-radius: 10px;
        border: 2px solid #F1F5F9;
    }
}

/* No hover effects stuck on touch screens */
@media (hover: none) {
    .blog-section .card:hover {
        transform: none;
    }
}