/* Poultry landing page: the look of the legacy poultry page, without its libraries.
   Legacy = Bootstrap 4.6 + the Kendo bootstrap-v4 theme + each site's site.css and map.css.
   Sizes and colours below were measured on poultry.guerrillaeconomics.net (legacy) on 2026-10-22
   (Max: "style it exactly as current poultry"; "we don't want to use kendo ... no dependencies"). */

*, *::before, *::after {
    box-sizing: border-box;
}

/* Map colours per site, from each site's legacy map.css. */
body {
    --site: #0060A9;
    --site-stroke: #B22C1B;
}

body[data-site="chicken"] {
    --site: #002D62;
    --site-stroke: #fff;
}

body[data-site="eggs"],
body[data-site="turkey"] {
    --site: #EB1D25;
    --site-stroke: #4671D5;
}

html, body {
    margin: 0;
    padding: 0;
    background: none;
    color: #1240AB;
    font-family: "Lucida Grande", "Lucida Sans Unicode", Lucida, Verdana, sans-serif;
    font-size: 12px;
    font-weight: normal;
    line-height: 1.42857143;
}

/* One centred column, 500 px at most: it fits the clients' iframes. */
.container-fluid {
    max-width: 500px;
    margin: 6px auto 0;
    padding: 0 15px;
}

#logo {
    margin: 0 0 6px;
    font-size: 2.1rem;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
}

p {
    margin: 0 0 12px;
}

a {
    color: #007bff;
    text-decoration: none;
}

a:hover {
    color: #0056b3;
    text-decoration: underline;
}

/* ---- map ---- */

/* 80000 x 50040 is the legacy map's frame; d3map sizes its SVG from this box. */
#map {
    position: relative;
    width: 100%;
    max-width: 500px;
    margin: 6px auto;
    aspect-ratio: 80000 / 50040;
}

#map svg {
    display: block;
}

#map path.feature {
    fill: var(--site);
    stroke: var(--site-stroke);
    stroke-width: 1px;
    cursor: pointer;
}

#map path.feature:hover {
    opacity: 0.7;
}

#map path.feature.active {
    fill-opacity: 0.7;
}

/* A state with its districts or counties drawn: the other states fade, as in legacy. */
#map.is-drilled #layer-1 path.feature {
    fill-opacity: 0.25;
    stroke-opacity: 0.5;
}

#map .state-label text {
    fill: #fff;
    font-family: monospace;
}

#map .state-label circle {
    fill: var(--site);
    stroke: gray;
}

/* Zoomed into a state, the small-state circles would grow into blobs at the edge;
   legacy shows none there. */
#map.is-zoomed .state-label[data-label-position="L"],
#map.is-zoomed .state-label[data-label-position="R"] {
    display: none;
}

/* Legacy shows no names on hover. */
.d3map-tooltip {
    display: none !important;
}

#map .reset-button {
    position: absolute;
    right: 6px;
    bottom: 16px;
    display: block;
    width: 36px;
    height: 36px;
    line-height: 0;
}

/* ---- accordion (legacy: Kendo PanelBar) ---- */

.lp-accordion {
    margin: 0;
    padding: 0;
    list-style: none;
    border: 1px solid rgba(33, 37, 41, 0.125);
    background: #fff;
    color: #212529;
    line-height: 18px;
}

.lp-item + .lp-item {
    border-top: 1px solid #dde2e7;
}

.lp-hdr {
    position: relative;
    display: flex;
    width: 100%;
    margin: 0;
    padding: 9px 15px;
    border: 0;
    border-radius: 0;
    background: #f8f9fa;
    color: #212529;
    font: inherit;
    line-height: 18px;
    text-align: left;
    cursor: pointer;
}

.lp-item.is-active > .lp-hdr {
    background: #007bff;
    color: #fff;
}

.lp-hdr:focus {
    outline: 0;
}

/* Legacy's focus ring: the clicked header keeps a darker inset border. */
.lp-item.is-active > .lp-hdr:focus,
.lp-hdr:focus-visible {
    box-shadow: inset 0 0 0 3px #006adb;
}

/* The small solid triangle at the right: down when closed, up when open. */
.lp-arrow {
    position: absolute;
    top: 50%;
    right: 15px;
    width: 16px;
    height: 16px;
    margin-top: -8px;
}

.lp-arrow::before {
    content: "";
    position: absolute;
    top: 6px;
    left: 4px;
    border-right: 4px solid transparent;
    border-left: 4px solid transparent;
    border-top: 5px solid currentColor;
}

.lp-item.is-active .lp-arrow::before {
    top: 5px;
    border-top: 0;
    border-bottom: 5px solid currentColor;
}

.lp-content {
    display: none;
    padding: 6px;
    background: #fff;
}

.lp-item.is-active > .lp-content {
    display: block;
}

/* ---- the form inside the open section (legacy: Bootstrap rows, Kendo dropdowns) ---- */

.lp-row {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -15px 12px;
}

.lp-col {
    position: relative;
    flex: 0 0 100%;
    max-width: 100%;
    padding: 0 15px;
}

.lp-col[hidden] {
    display: none;
}

/* State + district/county side by side from 768 px, as legacy's col-md-6. */
@media (min-width: 768px) {
    .lp-row.is-pair > .lp-col {
        flex: 0 0 50%;
        max-width: 50%;
    }
}

/* A native <select> under a Kendo-looking face: the face shows the choice, the
   invisible select on top takes the click and opens the browser's own list. */
.lp-dd {
    position: relative;
    display: flex;
    width: 100%;
    height: 29px;
}

.lp-dd-wrap {
    display: flex;
    width: 100%;
    border: 1px solid #ccc;
    border-radius: 3px;
    background: #fff;
    color: #212529;
}

.lp-dd-text {
    flex: 1 1 auto;
    min-width: 0;
    padding: 4.5px 9px;
    overflow: hidden;
    line-height: 18px;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.lp-dd-arrow {
    position: relative;
    flex: 0 0 25px;
}

.lp-dd-arrow::before {
    content: "";
    position: absolute;
    top: 11px;
    left: 8px;
    border-right: 4px solid transparent;
    border-left: 4px solid transparent;
    border-top: 5px solid currentColor;
}

.lp-dd-native {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    font: inherit;
    cursor: pointer;
}

.lp-dd:focus-within .lp-dd-wrap {
    border-color: #80bdff;
    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
}

.lp-dd.is-disabled .lp-dd-wrap {
    opacity: 0.65;
}

.lp-dd.is-disabled .lp-dd-native {
    cursor: default;
}

/* Where the browser supports a customizable select (Chrome and Edge 135+, newer Safari),
   the select itself wears the Kendo look and its open list is capped at 6 rows with a
   scrollbar, as legacy's (Max, 2026-10-22: "limit size of the drop down list to max 5-6
   visable items"; "go with CSS"). Other browsers keep the face above and the browser's
   own list. MDN: Learn_web_development/Extensions/Forms/Customizable_select. */
@supports (appearance: base-select) {
    .lp-dd-wrap {
        visibility: hidden;
    }

    .lp-dd-native,
    .lp-dd-native::picker(select) {
        appearance: base-select;
    }

    .lp-dd-native {
        display: flex;
        align-items: center;
        padding: 0 0 0 9px;
        border: 1px solid #ccc;
        border-radius: 3px;
        background: #fff;
        color: #212529;
        opacity: 1;
        line-height: 18px;
        white-space: nowrap;
    }

    .lp-dd-native:disabled {
        opacity: 0.65;
    }

    .lp-dd-native:focus-visible {
        border-color: #80bdff;
        outline: 0;
        box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
    }

    /* The small solid triangle, as on the face. */
    .lp-dd-native::picker-icon {
        content: "";
        width: 0;
        height: 0;
        margin: 0 8px 0 auto;
        border-right: 4px solid transparent;
        border-left: 4px solid transparent;
        border-top: 5px solid currentColor;
    }

    .lp-dd-native::picker(select) {
        max-height: calc(6 * 27px + 2px);
        overflow-y: auto;
        margin: 1px 0;
        padding: 0;
        border: 1px solid #ccc;
        border-radius: 3px;
        background: #fff;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    }

    .lp-dd-native option {
        min-height: 0;
        padding: 4.5px 9px;
        color: #212529;
        font: inherit;
        line-height: 18px;
    }

    .lp-dd-native option:hover,
    .lp-dd-native option:focus-visible {
        background: #e9ecef;
    }

    .lp-dd-native option:checked {
        background: #007bff;
        color: #fff;
    }

    .lp-dd-native option::checkmark {
        display: none;
    }
}

.lp-group {
    margin-bottom: 12px;
}

.lp-reports {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-evenly;
    align-items: center;
    margin: 0;
    padding: 0;
    list-style: none;
}

.lp-reports li {
    margin: 12px 0;
}

.lp-reports label {
    display: flex;
    align-items: center;
    margin: 0 0 5px;
    font-weight: 700;
    cursor: pointer;
}

.lp-reports input {
    width: 13px;
    height: 13px;
    margin: 0;
}

.lp-reports label span {
    margin-left: 6px;
}

.lp-actions {
    text-align: right;
}

.lp-view {
    display: inline-block;
    padding: 4.5px 9px;
    border: 1px solid #ccc;
    border-radius: 3px;
    background: #fff;
    color: #333;
    font: inherit;
    line-height: 18px;
    text-transform: lowercase;
    cursor: pointer;
}

.lp-view:disabled {
    opacity: 0.65;
    cursor: default;
}

/* Loading, retry and "no districts" messages (new: legacy had none). */
.lp-status {
    margin: 0 0 12px;
    color: #6c757d;
}

/* Floats over the map's bottom-left corner, so showing it never moves the page. */
#map-wrapper {
    position: relative;
}

#lp-map-status {
    position: absolute;
    bottom: 12px;
    left: 6px;
    max-width: calc(100% - 60px);
    margin: 0;
    padding: 2px 6px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.92);
}

.lp-status .lp-retry {
    margin-left: 6px;
    padding: 0 6px;
    border: 1px solid #ccc;
    border-radius: 3px;
    background: #fff;
    color: #333;
    font: inherit;
    cursor: pointer;
}

.lp-debug {
    margin: 12px 0 0;
    padding: 6px;
    background: #f8f9fa;
    color: #212529;
    font-size: 11px;
    white-space: pre-wrap;
}