/* ============================================================
   ConveyorSorter — main.css (plain CSS, complements Tailwind)
   Visual system aligned with the DragonChassis / DracoRack family
   ============================================================ */

/* Steel-plate industrial texture (dark sections) */
.steel-plate {
    background-color: #12141e;
    background-image:
        linear-gradient(335deg, rgba(255,255,255,0.025) 23px, transparent 23px),
        linear-gradient(155deg, rgba(255,255,255,0.025) 23px, transparent 23px),
        linear-gradient(335deg, rgba(255,255,255,0.025) 23px, transparent 23px),
        linear-gradient(155deg, rgba(255,255,255,0.025) 23px, transparent 23px);
    background-size: 58px 58px;
    background-position: 0px 2px, 4px 35px, 29px 31px, 34px 6px;
}

/* Mobile: prevent iOS zoom on form fields */
@media (max-width: 640px) {
    input, select, textarea { font-size: 16px; }
}

/* Visible keyboard focus */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: 2px solid #d94f1a;
    outline-offset: 2px;
}

/* Anchor scroll offset under fixed header */
section[id] { scroll-margin-top: 5.5rem; }

/* Image hover zoom (product / case cards) */
.zoom-img { transition: transform .5s ease; }
.group:hover .zoom-img { transform: scale(1.05); }

/* Spec table on dark background */
.spec-table { border-collapse: collapse; width: 100%; }
.spec-table th, .spec-table td {
    text-align: left;
    padding: 0.85rem 1rem;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    font-size: 0.875rem;
}
.spec-table th {
    color: #7d8496;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.72rem;
}
.spec-table td { color: #d6dae3; }
.spec-table td strong { color: #ffffff; font-weight: 600; }

/* FAQ details animation */
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary { list-style: none; }
details.faq .faq-icon { transition: transform .25s ease; }
details.faq[open] .faq-icon { transform: rotate(45deg); }

/* Simple fade-in on load for hero */
@keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.fade-up { animation: fadeUp .6s ease both; }

/* Unify on-site photo tone: mute noisy purple/red frames, keep industrial contrast.
   Applied to every JPG (product/case/hero shots). GIF live shots and PNG logos stay untouched. */
img[src$=".jpg"] {
    filter: saturate(0.72) contrast(1.06) brightness(0.99);
}
/* Hero background photo: keep slightly deeper so the left text overlay reads well */
#home > img {
    filter: saturate(0.68) contrast(1.08) brightness(0.92);
}
/* Card photos: subtle rounded corners already via border; unify shadow */
section.bg-white img[src$=".jpg"], section.bg-mist img[src$=".jpg"] {
    filter: saturate(0.72) contrast(1.06) brightness(1);
}