/* Pipeline page styles. Replaces text3.css for this page only; text3.css stays on the old site
   because other WVGES pages appear to share it. */

:root {
    /* Sizes in rem follow the visitor's browser text-size setting. At the default (16px) these match
       text3.css: 10pt body text and 8pt table text. For larger text, change them to 1rem and 0.875rem. */
    --body-size: 0.8333rem;
    --table-size: 0.6667rem;
    --accent-red: #c00000;    /* 6.5:1 on white; text3.css used #ff0000 (4.0:1) */

    /* WVGES logo colors, sampled from WVGES-logo.png */
    --wvges-navy: #005288;    /* "Geology underlies it all" band; white on navy 8.2:1 */
    --wvges-navy-dark: #003a61;
    --wvges-sky: #4db3d0;     /* sky layer (decorative only) */
    --wvges-sand: #e0c298;    /* sand layer */
    --wvges-green: #649043;   /* thin green layer */
    --wvges-brown: #945403;   /* earth layer */
    --panel-bg: #f3eadb;      /* light sand; black text 17.6:1, navy text 6.9:1 */
    --focus: var(--wvges-navy);
}

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

body {
    margin: 0.5rem;
    font-family: Arial, Helvetica, sans-serif;
    font-size: var(--body-size);
    line-height: 1.4;
    color: #000;
    background: #fff;
}

a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, .table-scroll:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 2px;
}

.skip-link {
    position: absolute;
    left: -9999px;
}
.skip-link:focus {
    left: 0.5rem;
    top: 0.5rem;
    z-index: 10;
    padding: 0.25rem 0.5rem;
    background: #fff;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* Site banner, matching the WVGES site banner (www.wvgs.wvnet.edu):
   a gray top bar, the logo and agency name over a geologic cross-section, a blue rule,
   then a bottom row with the breadcrumb on the left and the Pipeline links on the right. */
.site-banner {
    --banner-bar: #e0e8ea;       /* top bar gray, from the WVGES site */
    --banner-bar-link: #0000ab;  /* 10.6:1 on the bar */
    --banner-rule: #43649d;      /* blue rule under the banner; 5.9:1 on white */
    --banner-crumb: #595959;     /* 7.0:1; the WVGES site uses #808080 (3.95:1) */
    --banner-current: #800000;   /* maroon current-page crumb, 10.9:1 */
    margin-bottom: 0.5rem;
}

.utility-bar {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 0.6rem;
    padding: 0.2rem 0.75rem;
    background: var(--banner-bar);
    font-weight: bold;
}
.utility-bar a { color: var(--banner-bar-link); text-decoration: none; }
.utility-bar a:hover, .utility-bar a:focus-visible { text-decoration: underline; }

.banner-main {
    display: flex;
    align-items: center;
    gap: 1rem;
    min-height: 60px;
    margin-top: 0.4rem;
    border-bottom: 5px solid var(--banner-rule);
}
.banner-logo img { display: block; width: 200px; height: auto; }
.banner-title {
    margin: 0;
    font-family: Georgia, "Times New Roman", serif;
    font-weight: bold;
    line-height: 1.05;
    color: #000;
    white-space: nowrap;
}
.banner-state { display: block; font-size: 1.1rem; }
.banner-agency { display: block; font-size: 1.65rem; }
/* The cross-section image fades to white at its left edge, so it starts right after the title. */
.banner-map {
    flex: 1 1 0;
    align-self: stretch;
    min-width: 0;
    background-repeat: no-repeat;
    background-position: left top;
    background-size: auto 121px;
}

.banner-bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.25rem 1.5rem;
    padding: 0.3rem 0.25rem 0;
}
.breadcrumb ol, nav.links ul {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    margin: 0;
    padding: 0;
}
.breadcrumb { font-size: 0.75rem; font-weight: bold; }
.breadcrumb li + li::before {
    content: ">>";
    padding: 0 0.4rem;
    color: #000;
    font-weight: normal;
}
.breadcrumb a { color: var(--banner-crumb); }
.breadcrumb [aria-current="page"] { color: var(--banner-current); }
/* Spacing rather than divider lines, so links that wrap onto a second line stay tidy. */
nav.links ul { justify-content: flex-end; gap: 0.15rem 1.1rem; }

h1.page-title {
    margin: 0.4rem 0 0.6rem;
    font-size: 1.05rem;
    color: #43649d;   /* same blue as the banner rule; 5.9:1 on white */
}

/* Narrower windows: drop the cross-section image, then stack the bottom row. */
@media (max-width: 52rem) {
    .banner-map { display: none; }
}
@media (max-width: 36rem) {
    .banner-main { flex-wrap: wrap; gap: 0.4rem 0.75rem; padding-bottom: 0.3rem; }
    .banner-logo img { width: 150px; }
    .banner-title { white-space: normal; }
    .banner-state { font-size: 0.95rem; }
    .banner-agency { font-size: 1.2rem; }
    .banner-bottom { flex-direction: column; align-items: flex-start; }
    nav.links ul { justify-content: flex-start; }
}

/* Search form: one compact panel in the WVGES logo colors.
   Wide screens: county and permit on the first row, the data types heading and check boxes on the
   second, and the Get data button and Start over link on the third. Narrow screens (phones): one column. */
form.search {
    position: relative;
    display: grid;
    grid-template-columns: auto auto 1fr;
    grid-template-areas:
        "errors  errors  errors"
        "county  permit  ."
        "types   types   types"
        "actions actions actions";
    gap: 0.2rem 1rem;
    align-items: start;
    width: fit-content;
    max-width: 100%;
    padding: calc(6px + 0.25rem) 0.6rem 0.3rem;
    border: 1px solid var(--wvges-navy);
    border-radius: 4px;
    background: var(--panel-bg);
    overflow: hidden;
}

/* Signature: a thin strata stripe across the top, the logo's layers from sky down to earth. */
form.search::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 6px;
    background: linear-gradient(to bottom,
        var(--wvges-sky) 0 2px,
        var(--wvges-sand) 2px 4px,
        var(--wvges-green) 4px 5px,
        var(--wvges-brown) 5px 6px);
}

.errors { grid-area: errors; }
.field-county { grid-area: county; }
.field-permit { grid-area: permit; }
fieldset.types { grid-area: types; }
.actions { grid-area: actions; }

.field {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.1rem 0.35rem;
}
.field label,
fieldset.types legend {
    font-weight: bold;
    color: var(--wvges-navy);
}

form.search select,
form.search input[type="text"] {
    font: inherit;
    color: #000;
    background: #fff;
    border: 1px solid var(--wvges-navy);
    border-radius: 3px;
    padding: 0 0.25rem;
    min-height: 1.4rem;
}
#Permit {
    width: 7ch;
    font-variant-numeric: tabular-nums;
}

fieldset.types {
    margin: 0;
    padding: 0;
    border: 0;
    min-width: 0;
}
/* The legend floats so the check boxes sit on the same line as "Data types". */
fieldset.types legend {
    float: left;
    padding: 0;
    margin: 0 0.8rem 0 0;
}
fieldset.types .field-error { clear: both; display: block; }
fieldset.types .field-error:empty { display: none; }
.checks {
    display: flex;
    flex-wrap: wrap;
    gap: 0.1rem 0.8rem;
}
.check {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    white-space: nowrap;
}
.check-all label { font-weight: bold; }
form.search input[type="checkbox"] {
    margin: 0;
    width: 0.9rem;
    height: 0.9rem;
    accent-color: var(--wvges-navy);
}

.actions {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    white-space: nowrap;
}
.actions button {
    font: inherit;
    font-weight: bold;
    color: #fff;
    background: var(--wvges-navy);
    border: 1px solid var(--wvges-navy);
    border-radius: 3px;
    padding: 0.1rem 0.8rem;
    cursor: pointer;
}
.actions button:hover { background: var(--wvges-navy-dark); }
.actions a { color: var(--wvges-navy); }

.errors {
    padding: 0.35rem 0.6rem;
    border: 2px solid var(--accent-red);
    background: #fff;
}
.errors h2 { font-size: 0.9rem; margin: 0 0 0.15rem; }
.errors ul { margin: 0; padding-left: 1.1rem; }
.field-error { flex-basis: 100%; color: var(--accent-red); }
.field-error:empty { display: none; }
.error { color: var(--accent-red); font-weight: bold; }

@media (max-width: 36rem) {
    form.search {
        width: auto;
        grid-template-columns: 1fr;
        grid-template-areas: "errors" "county" "permit" "types" "actions";
    }
}

@media print {
    form.search, .utility-bar, .banner-bottom, .banner-map, .skip-link { display: none; }
}

/* Report */
.report { margin-top: 1rem; }
.report h2 { font-size: 1.1rem; margin: 0 0 0.25rem; }
/* Well heading, then the digital-records link 1/4 inch to its right, then the report time
   pushed to the right edge, all on one line. On narrow screens the items wrap. */
.report-heading {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 0.25in;
    row-gap: 0.15rem;
    margin: 0 0 0.5rem;
}
.report-heading h2 { margin: 0; }
.report-heading .report-meta {
    margin: 0 0 0 auto;
    text-align: right;
}
/* Bar between the agency name and the report time, spaced like "Contact Us | WVGES Home" in the banner. */
.report-meta .sep { padding: 0 0.25rem; }
h3 { font-size: 1rem; margin: 1rem 0 0.25rem; }
h4 { font-size: 0.95rem; margin: 0.75rem 0 0.25rem; }
.section-heading {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 0.75rem;
    margin: 1rem 0 0.25rem;
}
.section-heading h3,
.section-heading h4 { margin: 0; }
.section-heading a { color: var(--wvges-navy); }
h5 { font-size: 0.9rem; margin: 0.5rem 0 0.25rem; }
h6 { font-size: 0.85rem; margin: 0.5rem 0 0.25rem; }
.note, .comment, .empty { margin: 0.25rem 0 0.5rem; }

.table-scroll { max-width: 100%; overflow-x: auto; }
table {
    border-collapse: collapse;
    border: 1px solid #000;
    font-size: var(--table-size);
}
th, td {
    padding: 0 0.3rem 0 0.15rem;
    text-align: left;
    vertical-align: top;
    white-space: nowrap;
}
th { font-weight: bold; }
td.num { text-align: right; }

/* Log downloads */
.advice { color: var(--accent-red); }
.downloads { display: flex; flex-wrap: wrap; gap: 0.5rem 2.5rem; }
ul.files { margin: 0; padding-left: 1.2rem; }
.log-guide { max-width: 44rem; }
.log-guide dl { display: grid; grid-template-columns: 1.5rem 1fr; gap: 0 0.5rem; margin: 0; }
.log-guide dt { font-weight: bold; }
.log-guide dd { margin: 0; }
.footnote { font-size: 0.9em; }

/* First visit */
/* Notice, About and Disclaimer stretch with the window, up to 75rem (1,200px at the default text size). */
/* The Pipeline-Plus notice follows About and is set in bold WVGES navy (8.2:1 on white) so it stands out. */
.intro {
    max-width: 75rem;
    margin: 1rem 0 0;
    font-size: 0.9375rem;   /* 15px at the default text size; body text is 13.3px, headings 16px */
    font-weight: bold;
    color: var(--wvges-navy);
}
.intro a { color: inherit; }
.disclaimer { max-width: 75rem; margin-top: 1rem; }
.disclaimer h2 { font-size: 1rem; text-transform: uppercase; }

/* Site footer, matching the WVGES site footer: webmaster line, a blue rule, address / logo / Facebook,
   a second blue rule, then the site Disclaimer and Privacy Statement links and the permission line. */
.site-footer {
    margin-top: 2rem;
    text-align: center;
}
.site-footer .webmaster { margin: 0 0 0.6rem; }
.footer-main {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 0;
    border-top: 5px solid #43649d;
    border-bottom: 5px solid #43649d;
}
.footer-address {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-style: normal;
    line-height: 1.3;
}
.footer-org { display: inline-flex; align-items: flex-end; gap: 0.4rem; }
.footer-org img { display: block; }
.footer-logo a { display: inline-flex; flex-direction: column; align-items: center; gap: 0.1rem; }
.footer-logo img { display: block; }
.footer-social { justify-self: end; margin-right: 3.5rem; }
.footer-social img { display: block; }
.footer-links { margin: 0.5rem 0 0.4rem; }
.footer-links .sep {
    padding: 0 0.35rem;
    color: #43649d;
    font-size: 0.7em;
    vertical-align: 0.15em;
}
.site-footer .permission {
    margin: 0 0 1rem;
    font-size: 0.75rem;
    font-style: italic;
    font-weight: bold;
    color: #595959;   /* 7.0:1 on white; the WVGES site uses #808080 (3.95:1) */
}

@media (max-width: 36rem) {
    .footer-main { grid-template-columns: 1fr; }
    .footer-social { justify-self: center; margin-right: 0; }
}

@media print {
    .footer-social { display: none; }
}