/* ═══════════════════════════════════════════════════════════════
   FabSector — Main Stylesheet
   Colors: Navy #0A2540 · Orange #FF4D00 · Grays · White
   ═══════════════════════════════════════════════════════════════ */

/* ── Reset ──────────────────────────────────────────────────── */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

/* ── Hero Section ───────────────────────────────────────────── */
.hero-section {
    min-height: 100vh;
}

.hero-section img {
    filter: brightness(0.6) contrast(1.1);
}

/* ── Capability Photo Cards ────────────────────────────────── */
.capability-card {
    cursor: pointer;
    border: 1px solid transparent;
}

.capability-card:hover {
    border-color: rgba(255, 77, 0, 0.3);
}

/* ── Form Inputs ────────────────────────────────────────────── */
input[type="email"]:focus,
input[type="text"]:focus,
input[type="number"]:focus,
textarea:focus,
select:focus {
    outline: none;
    border-color: #FF4D00;
    box-shadow: 0 0 0 3px rgba(255, 77, 0, 0.1);
}

/* ── Drag-and-Drop Zone ─────────────────────────────────────── */
#drop-zone.drag-active {
    border-color: #FF4D00;
    background-color: rgba(255, 77, 0, 0.03);
}

/* ── Material Groups ────────────────────────────────────────── */
.material-item {
    transition: all 0.15s ease;
}

.material-item.selected {
    border-color: #FF4D00;
    background-color: rgba(255, 77, 0, 0.05);
}

.material-item.hidden-by-filter {
    display: none;
}

.material-group.hidden-by-filter {
    display: none;
}

/* ── Process Buttons ────────────────────────────────────────── */
.process-btn.active {
    border-color: #FF4D00 !important;
    background-color: rgba(255, 77, 0, 0.05);
    color: #FF4D00;
    font-weight: 600;
}

/* ── Option Cards (multi-select) ────────────────────────────── */
.option-card.active {
    border-color: #FF4D00 !important;
    background-color: rgba(255, 77, 0, 0.05);
}

/* ── Tolerance Cards ────────────────────────────────────────── */
.tolerance-card.active {
    border-color: #FF4D00 !important;
    background-color: rgba(255, 77, 0, 0.05);
    box-shadow: 0 1px 3px rgba(255, 77, 0, 0.1);
}

/* ── Radio Card Styling ─────────────────────────────────────── */
.radio-card.active {
    border-color: #FF4D00 !important;
    background-color: rgba(255, 77, 0, 0.05);
}

/* ── Accordion Animation ────────────────────────────────────── */
.accordion-content {
    overflow: hidden;
    transition: max-height 0.35s ease, opacity 0.25s ease;
}

.accordion-content.collapsed {
    max-height: 0;
    opacity: 0;
    pointer-events: none;
}

.accordion-content.expanded {
    max-height: 5000px;
    opacity: 1;
}

.accordion-chevron {
    transition: transform 0.25s ease;
}

.accordion-chevron.rotated {
    transform: rotate(180deg);
}

/* ── Progress Bar ───────────────────────────────────────────── */
.progress-fill {
    transition: width 0.3s ease;
}

.progress-fill.complete {
    background-color: #22c55e;
}

/* ── Submit Button States ───────────────────────────────────── */
#submit-btn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

/* ── Conditional Fields ─────────────────────────────────────── */
.conditional-field {
    transition: max-height 0.3s ease, opacity 0.2s ease;
    overflow: hidden;
}

.conditional-field.hidden {
    max-height: 0;
    opacity: 0;
}

.conditional-field.visible {
    max-height: 500px;
    opacity: 1;
}

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 768px) {
    .hero-section h1 {
        font-size: 2.5rem !important;
    }

    .hero-section p {
        font-size: 1.1rem !important;
    }

    .hero-section .flex-wrap {
        gap: 0.5rem;
    }

    .hero-section .flex-wrap span {
        font-size: 0.75rem;
        padding: 0.25rem 0.75rem;
    }

    /* Stack process buttons 2-wide on mobile */
    #process-buttons {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Stack material items single column */
    .material-grid {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 480px) {
    .hero-section h1 {
        font-size: 2rem !important;
    }

    /* Stack process buttons 1-wide on very small screens */
    #process-buttons {
        grid-template-columns: 1fr !important;
    }
}

/* ── Smooth Scrolling ───────────────────────────────────────── */
html {
    scroll-behavior: smooth;
}

/* ── Selection Color ────────────────────────────────────────── */
::selection {
    background: rgba(255, 77, 0, 0.2);
    color: #0A2540;
}