/* ============================================================
   Agriloco Theme: Clean Layout + Orchard Green & Soil Brown
   - Designed to override Bootstrap nicely
   - Light farm-friendly background, modern cards, soft shadows
   ============================================================ */

:root {
    /* Backgrounds */
    --ag-bg: #f3f7f2; /* very light orchard wash */
    --ag-bg2: #eef4ea; /* subtle variation for gradients */
    --ag-card: #ffffff; /* card surface */
    --ag-cream: #fbfbf6; /* warm alt surface */
    /* Text */
    --ag-text: #163022; /* deep green (instead of black) */
    --ag-muted: #4a5f52; /* muted green-gray */
    --ag-subtle: #6b7d72; /* secondary text */
    /* Borders & shadows */
    --ag-border: rgba(22, 48, 34, 0.14);
    --ag-border-soft: rgba(22, 48, 34, 0.10);
    --ag-shadow: 0 10px 28px rgba(16, 24, 16, 0.08);
    --ag-shadow-soft: 0 8px 18px rgba(16, 24, 16, 0.06);
    /* Brand accents */
    --ag-green: #2f7d3b; /* apple leaf */
    --ag-green-2: #3f9a4c; /* brighter apple green */
    --ag-green-soft: rgba(63, 154, 76, 0.14);
    --ag-brown: #7a4f2a; /* soil/wood */
    --ag-brown-2: #9a6a3a; /* warm highlight */
    --ag-brown-soft: rgba(122, 79, 42, 0.14);
    /* Status */
    --ag-success: #2f7d3b;
    --ag-danger: #b63a2b;
    --ag-info: #2c6f61;
    /* Radius & spacing */
    --ag-radius: 16px;
    --ag-radius-sm: 12px;
}

/* ---------- Base page ---------- */

html, body {
    height: 100%;
}

body {
    background: radial-gradient(1000px 520px at 20% 0%, rgba(63,154,76,0.10), transparent 58%), radial-gradient(900px 500px at 85% 10%, rgba(122,79,42,0.08), transparent 55%), linear-gradient(180deg, var(--ag-bg), var(--ag-bg2));
    color: var(--ag-text);
}

a {
    color: var(--ag-green);
    text-underline-offset: 3px;
}

    a:hover {
        color: var(--ag-green-2);
    }

/* Constrain and add comfortable spacing */
main, .container {
    max-width: 1100px;
}

/* Headings */
h1, h2, h3, h4, h5 {
    color: var(--ag-text);
    letter-spacing: 0.2px;
}

h2 {
    font-weight: 800;
    margin-bottom: 0.75rem;
}

h4 {
    font-weight: 750;
    margin-top: 1.25rem;
}

/* Light HR */
hr {
    opacity: 0.14;
}

/* ---------- Card-style surfaces ---------- */

/* Generic "card feel" for common blocks */
.alert,
.table,
#mapWrap {
    border-radius: var(--ag-radius);
}

/* Farm Map wrapper */
#mapWrap {
    background: var(--ag-card);
    border: 1px solid var(--ag-border) !important;
    box-shadow: var(--ag-shadow);
}

/* Basemap image: soften edges */
#basemapImg {
    border-radius: calc(var(--ag-radius) - 4px);
}

/* ---------- Crop list (your <ul><li> on public page) ---------- */

ul {
    margin-top: 0.75rem;
}

/* If you want ONLY the crop list on the farm page to look like cards,
   keep this generic. If it impacts other pages too much, tell me and
   I’ll scope it to a specific container. */
ul {
    list-style: none;
    padding-left: 0;
    background: rgba(255,255,255,0.72);
    border: 1px solid var(--ag-border-soft);
    border-radius: var(--ag-radius);
    box-shadow: var(--ag-shadow-soft);
    overflow: hidden;
}

    ul > li {
        padding: 12px 14px;
        border-bottom: 1px solid rgba(22,48,34,0.08);
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 8px;
    }

        ul > li:last-child {
            border-bottom: none;
        }

        ul > li strong {
            font-weight: 800;
        }

.text-muted {
    color: var(--ag-subtle) !important;
}

/* ---------- Buttons (Bootstrap overrides) ---------- */

.btn {
    border-radius: 999px;
    padding: 7px 12px;
    font-weight: 650;
    letter-spacing: 0.15px;
}

/* Your “Email me when available” uses btn-outline-primary.
   We remap that to orchard green / soil brown accents. */
.btn-outline-primary {
    border-color: rgba(47,125,59,0.55);
    color: var(--ag-green);
    background: transparent;
}

    .btn-outline-primary:hover {
        background: var(--ag-green-soft);
        border-color: rgba(47,125,59,0.75);
        color: var(--ag-text);
    }

/* Optional: if you also use primary buttons elsewhere */
.btn-primary {
    background: linear-gradient(180deg, var(--ag-green-2), var(--ag-green));
    border-color: rgba(47,125,59,0.85);
}

    .btn-primary:hover {
        filter: brightness(1.03);
    }

/* ---------- Alerts ---------- */

.alert {
    border: 1px solid var(--ag-border-soft);
    box-shadow: var(--ag-shadow-soft);
}

.alert-success {
    background: rgba(47,125,59,0.10);
    border-color: rgba(47,125,59,0.22);
    color: var(--ag-text);
}

.alert-danger {
    background: rgba(182,58,43,0.10);
    border-color: rgba(182,58,43,0.22);
    color: var(--ag-text);
}

.alert-info {
    background: rgba(44,111,97,0.10);
    border-color: rgba(44,111,97,0.22);
    color: var(--ag-text);
}

.alert-warning {
    background: rgba(154,106,58,0.12);
    border-color: rgba(154,106,58,0.24);
    color: var(--ag-text);
}

/* ---------- Tables (if you have browse tables elsewhere) ---------- */

.table {
    background: rgba(255,255,255,0.82);
    border: 1px solid var(--ag-border-soft);
    box-shadow: var(--ag-shadow-soft);
    overflow: hidden;
}

    .table thead th {
        background: rgba(47,125,59,0.08);
        color: var(--ag-text);
        border-bottom: 1px solid rgba(22,48,34,0.10);
        font-weight: 750;
    }

    .table tbody tr:hover {
        background: rgba(122,79,42,0.06);
    }

/* ---------- Forms (small uplift if you have inputs) ---------- */

.form-control, .form-select {
    border-radius: 12px;
    border-color: rgba(22,48,34,0.18);
}

    .form-control:focus, .form-select:focus {
        border-color: rgba(47,125,59,0.55);
        box-shadow: 0 0 0 0.2rem rgba(47,125,59,0.12);
    }

/* ---------- Utility spacing polish ---------- */

.mb-2 > div {
    margin-bottom: 4px;
}

/* Prevent overly tight wrapping on narrow screens */
@media (max-width: 576px) {
    ul > li {
        padding: 12px 12px;
    }

    #mapWrap {
        border-radius: 14px;
    }

    #basemapImg {
        border-radius: 12px;
    }
}