/* ============================================================
   Sidcon Pumping — custom styles
   Kept minimal on purpose. Tailwind handles most of it.
   ============================================================ */

/* Base feel ------------------------------------------------- */
html { -webkit-text-size-adjust: 100%; }
body { text-rendering: optimizeLegibility; }

/* Display headings ------------------------------------------ */
.heading {
    font-family: 'Barlow Condensed', Impact, sans-serif;
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.005em;
    color: #ffffff;
}

/* Hero image treatment -------------------------------------- */
.hero-overlay {
    background:
        linear-gradient(180deg, rgba(13,13,13,0.4) 0%, rgba(13,13,13,0.85) 60%, #0d0d0d 100%),
        linear-gradient(90deg, rgba(13,13,13,0.9) 0%, rgba(13,13,13,0.3) 60%, rgba(13,13,13,0.6) 100%);
}

/* Image cards lift slightly on hover ------------------------ */
.lift {
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
@media (hover: hover) {
    .lift:hover { transform: translateY(-3px); }
}

/* Subtle fade-in on scroll ---------------------------------- */
@keyframes fade-in {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}
.reveal { opacity: 0; }
.reveal.in { animation: fade-in 0.6s ease-out forwards; }

/* Focus ring (a11y) ---------------------------------------- */
:focus-visible {
    outline: 2px solid #2563eb;
    outline-offset: 3px;
    border-radius: 2px;
}

/* Form fields ---------------------------------------------- */
.field {
    width: 100%;
    background: #171717;
    border: 1px solid #333333;
    color: #f5f5f5;
    padding: 14px 16px;
    border-radius: 6px;
    font-size: 16px; /* prevents iOS zoom on focus */
    transition: border-color 0.2s ease;
}
.field:focus {
    outline: none;
    border-color: #2563eb;
    background: #0d0d0d;
}
.field::placeholder { color: rgba(255,255,255,0.4); }

/* Image overlay gradient for legibility --------------------- */
.img-shade::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(13,13,13,0.85) 0%, rgba(13,13,13,0.0) 50%);
    pointer-events: none;
}

/* Reduced motion ------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}