/* ============================================================
   FastLocations — Incentives Explorer
   incentives.css  — orange color overrides on top of properties.css
   ============================================================ */

/* ── Override design tokens with orange scheme ── */
:root {
    --navy:       #b34e0f;   /* dark burnt orange  */
    --navy-mid:   #c45815;
    --navy-light: #d4621a;
    --teal:       #e07820;   /* amber accent       */
    --teal-light: #f4a84a;
    --teal-pale:  #fef3e2;   /* warm amber pale    */
    --cream:      #fdf8f3;
    --text:       #1a0e05;
    --text-muted: #6b4c30;
    --border:     #e8d5bb;
}

/* ── Swap hero gradient to orange ── */
.fl-hero::before {
    background: radial-gradient(ellipse 70% 60% at 50% 100%, rgba(228,120,32,0.22) 0%, transparent 70%);
}

/* ── Badge border tint ── */
.fl-header-badge {
    border-color: rgba(244,168,74,0.4);
}

/* ── Incentive type badge — warm amber instead of teal ── */
.inc-type-badge {
    display: inline-block;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.04em;
    padding: 2px 8px;
    border-radius: 20px;
    background: var(--teal-pale);
    color: var(--navy);
    white-space: normal;      /* allow wrapping within the cell */
    word-break: break-word;
    text-transform: uppercase;
    margin: 1px 1px;
    line-height: 1.5;
}

/* Type cell: clip content to its column width */
.inc-type-cell {
    overflow: hidden;
    word-break: break-word;
}

/* ── Incentive table column widths (5 columns) ── */
.prop-table th:nth-child(1), .prop-table td:nth-child(1) { width: 30%; }  /* Program Name  */
.prop-table th:nth-child(2), .prop-table td:nth-child(2) { width: 20%; }  /* Type          */
.prop-table th:nth-child(3), .prop-table td:nth-child(3) { width: 14%; }  /* State         */
.prop-table th:nth-child(4), .prop-table td:nth-child(4) { width: 26%; }  /* Organization  */
.prop-table th:nth-child(5), .prop-table td:nth-child(5) { width: 10%; }  /* Link          */

/* ── Word-wrap: Program Name column ── */
.prop-table td:nth-child(1) { white-space: normal; overflow-wrap: break-word; }

/* ── Mobile card overrides for incentives ── */
@media (max-width: 767px) {

    /* Wider label area for ORGANIZATION (longest label) */
    .prop-table td {
        padding-left: 112px;
    }
    .prop-table td::before {
        width: 104px;
    }

    /* Show Type (col 2) — properties.css hides it */
    .prop-table td:nth-child(2) { display: block; }

    /* Title keeps full width */
    .prop-table td:nth-child(1) {
        padding-left: 0;
        white-space: normal;
        overflow: visible;
    }

    /* Link (col 5): show and not clipped */
    .prop-table td:nth-child(5) {
        display: block;
        overflow: visible;
    }
}

/* ── View button (opens modal) ── */
.prop-link-btn {
    font-size: 11px;
    font-weight: 500;
    color: var(--teal);
    background: none;
    border: 1px solid var(--teal-light);
    padding: 2px 8px;
    border-radius: 6px;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    font-family: 'Inter', sans-serif;
}
.prop-link-btn:hover { background: var(--teal); color: #fff; border-color: var(--teal); }

/* ── Incentive detail modal ── */
.inc-modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.55);
    z-index: 1000;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}
.inc-modal-overlay.open {
    display: flex;
}
.inc-modal {
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.25);
    max-width: 560px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    padding: 2rem;
    position: relative;
}
.inc-modal-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: none;
    border: none;
    font-size: 22px;
    cursor: pointer;
    color: var(--text-muted);
    line-height: 1;
    padding: 4px 8px;
    border-radius: 6px;
    transition: background 0.15s;
}
.inc-modal-close:hover { background: var(--teal-pale); color: var(--navy); }
.inc-modal-badge {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    background: var(--teal-pale);
    color: var(--navy);
    padding: 3px 10px;
    border-radius: 20px;
    margin-bottom: 0.75rem;
}
.inc-modal-title {
    font-family: 'DM Serif Display', serif;
    font-size: 1.4rem;
    font-weight: 400;
    color: var(--navy);
    line-height: 1.25;
    margin-bottom: 1.25rem;
}
.inc-modal-row {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 0.4rem 0.75rem;
    margin-bottom: 0.6rem;
    align-items: start;
}
.inc-modal-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--teal);
    font-family: 'DM Sans', sans-serif;
    padding-top: 2px;
}
.inc-modal-value {
    font-size: 13px;
    color: var(--text);
    line-height: 1.5;
}
.inc-modal-divider {
    border: none;
    border-top: 1px solid var(--border);
    margin: 1.1rem 0;
}
.inc-modal-description {
    font-size: 13px;
    color: var(--text);
    line-height: 1.7;
    margin-bottom: 1.25rem;
}
.inc-modal-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--navy);
    color: #fff;
    font-family: 'DM Sans', sans-serif;
    font-size: 13px;
    font-weight: 500;
    padding: 0.6rem 1.25rem;
    border-radius: 8px;
    text-decoration: none;
    transition: background 0.2s;
    border: none;
    cursor: pointer;
}
.inc-modal-cta:hover { background: var(--navy-light); }

@media (max-width: 480px) {
    .inc-modal { padding: 1.25rem; }
    .inc-modal-row { grid-template-columns: 1fr; gap: 0.1rem; margin-bottom: 0.75rem; }
    .inc-modal-title { font-size: 1.2rem; }
}