/* AstraPLM Landing Page — brand tokens + light custom styles
   Tailwind CDN handles most utility classes; this file only defines
   brand variables and the handful of things Tailwind CDN can't do
   (custom scrollbars, focus rings, font fallback stack). */

:root {
    --astra-primary: #113B7A;
    --astra-primary-dark: #0A2652;
    --astra-bg: #F5F7FA;
    --astra-slate-900: #0f172a;
    --astra-slate-700: #334155;
    --astra-slate-500: #64748b;
    --astra-slate-400: #94a3b8;
    --astra-slate-200: #e2e8f0;
    --astra-slate-100: #f1f5f9;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    color: var(--astra-slate-900);
    background-color: #ffffff;
}

/* Anchor targets sit under the fixed header without being hidden by it */
section[id] {
    scroll-margin-top: 104px;
}

@media (min-width: 768px) {
    section[id] {
        scroll-margin-top: 96px;
    }
}

.astra-btn-primary {
    background-color: var(--astra-primary);
}

.astra-btn-primary:hover {
    background-color: var(--astra-primary-dark);
}

.astra-text-primary {
    color: var(--astra-primary);
}

.astra-mobile-nav {
    display: none;
}

.astra-mobile-nav.is-open {
    display: block;
}

/* Prevent any accidental horizontal overflow from long words/urls */
.astra-no-overflow {
    overflow-x: hidden;
}

::selection {
    background-color: var(--astra-primary);
    color: #ffffff;
}

/* Product scope matrix: a semantic table on larger screens, compact cards on mobile. */
.astra-scope-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

.astra-scope-table th,
.astra-scope-table td {
    border-bottom: 1px solid var(--astra-slate-200);
}

.astra-scope-table tbody:last-child tr:last-child td {
    border-bottom: 0;
}

.astra-scope-status {
    display: inline-flex;
    align-items: center;
    border-radius: 9999px;
    padding: 0.25rem 0.625rem;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1rem;
    white-space: nowrap;
}

.astra-scope-status--active {
    background: #ecfdf5;
    color: #065f46;
}

.astra-scope-status--project {
    background: #eff6ff;
    color: #1d4ed8;
}

@media (max-width: 767px) {
    .astra-scope-table,
    .astra-scope-table tbody,
    .astra-scope-table tr,
    .astra-scope-table td {
        display: block;
        width: 100%;
    }

    .astra-scope-table thead {
        display: none;
    }

    .astra-scope-table .astra-scope-group {
        margin-top: 1rem;
    }

    .astra-scope-table .astra-scope-group:first-child {
        margin-top: 0;
    }

    .astra-scope-table .astra-scope-group th {
        display: block;
        border: 0;
        border-radius: 0.75rem 0.75rem 0 0;
    }

    .astra-scope-table .astra-scope-row {
        margin-bottom: 0.75rem;
        overflow: hidden;
        border: 1px solid var(--astra-slate-200);
        border-radius: 0.75rem;
        background: #ffffff;
        box-shadow: 0 1px 2px rgb(15 23 42 / 0.04);
    }

    .astra-scope-table .astra-scope-row td {
        display: grid;
        grid-template-columns: minmax(6.75rem, 38%) 1fr;
        gap: 0.75rem;
        padding: 0.75rem 1rem;
        border: 0;
        border-bottom: 1px solid var(--astra-slate-100);
        text-align: left;
    }

    .astra-scope-table .astra-scope-row td:last-child {
        border-bottom: 0;
    }

    .astra-scope-table .astra-scope-row td::before {
        content: attr(data-label);
        color: var(--astra-slate-500);
        font-size: 0.75rem;
        font-weight: 700;
        line-height: 1rem;
    }
}