/* PublicationsWeb styles. The banner and footer rules are PipelineWeb's (pipeline.css), unchanged, so all WVGES
   .NET applications look the same; the menu, search panels and result lists below use the same WVGES logo colors. */

:root {
    /* Sizes in rem follow the visitor's browser text-size setting. Body text is 14px at the default size
       (PipelineWeb uses 13.3px; the catalog pages are mostly reading text). */
    --body-size: 0.875rem;
    --accent-red: #c00000;    /* 6.5:1 on white, 5.6:1 on the sand panel; the old pages used #ff0000 (4.0:1) */

    /* WVGES logo colors, sampled from WVGES-logo.png (same as PipelineWeb) */
    --wvges-navy: #005288;    /* white on navy 8.2:1 */
    --wvges-navy-dark: #003a61;
    --wvges-sky: #4db3d0;     /* decorative only */
    --wvges-sand: #e0c298;
    --wvges-green: #649043;
    --wvges-brown: #945403;
    --panel-bg: #f3eadb;      /* light sand; black text 17.6:1, navy text 6.9:1 */
    --row-alt: #e8f4f8;       /* light sky for alternate result rows (the old pages used light cyan #d3f8fb) */
    --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, main:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 2px;
}
main:focus { outline: none; }

.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); }
nav.links a[aria-current="page"] { color: var(--banner-current); font-weight: bold; text-decoration: none; }
/* 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; }
}

/* Page body: the Publications menu on the left (as on the old pages), the page on the right. */
.page-body {
    display: grid;
    grid-template-columns: 15rem minmax(0, 1fr);
    gap: 0 1.25rem;
    align-items: start;
}
main { min-width: 0; }
main h1.page-title { margin-top: 0.2rem; font-size: 1.15rem; }

/* Publications menu: a sand panel with the strata stripe of the PipelineWeb search form, navy section headings. */
.side-menu {
    position: relative;
    padding: calc(6px + 0.35rem) 0 0.35rem;
    border: 1px solid var(--wvges-navy);
    border-radius: 4px;
    background: var(--panel-bg);
    overflow: hidden;
}
.side-menu::before, .search-panel::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);
}
.menu-section + .menu-section { margin-top: 0.4rem; }
.menu-heading {
    margin: 0;
    padding: 0.2rem 0.6rem;
    font-size: 0.95rem;
    color: #fff;
    background: var(--wvges-navy);
}
.menu-section-toggle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0;
    border: 0;
    font: inherit;
    font-weight: bold;
    color: inherit;
    text-align: left;
    background: none;
    cursor: pointer;
}
.menu-section-toggle:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }
.menu-section-toggle .toggle-icon::before { content: "+"; font-size: 1.1rem; line-height: 1; }
.menu-section-toggle[aria-expanded="true"] .toggle-icon::before { content: "\2212"; }
.menu-section ul {
    list-style: none;
    margin: 0;
    padding: 0.3rem 0.6rem 0.1rem;
}
.menu-section li { margin: 0 0 0.3rem; line-height: 1.3; }
.menu-section a { color: var(--wvges-navy-dark); }
.menu-section a:hover { color: #000; }
.menu-section a[aria-current="page"] { color: #800000; font-weight: bold; text-decoration: none; }
.file-info img { vertical-align: -3px; }
.menu-toggle {
    display: none;
    width: 100%;
    margin: 0;
    padding: 0.3rem 0.6rem;
    border: 0;
    font: inherit;
    font-weight: bold;
    color: #fff;
    background: var(--wvges-navy-dark);
    text-align: left;
    cursor: pointer;
}
.menu-toggle::after { content: " +"; }
.menu-toggle[aria-expanded="true"]::after { content: " \2212"; }

/* Search panels (Main Search and Advanced Search): the PipelineWeb search form's sand panel.
   Vertical spacing on the search and details pages was cut by about 25% on November 11, 2026 (John's request);
   the banner, menu and footer keep the spacing of the other WVGES applications. */
.search-panel {
    position: relative;
    width: fit-content;
    max-width: 100%;
    margin: 0 0 0.6rem;
    padding: calc(6px + 0.375rem) 0.8rem 0.45rem;
    border: 1px solid var(--wvges-navy);
    border-radius: 4px;
    background: var(--panel-bg);
    overflow: hidden;
}
.search-panel label { font-weight: bold; color: var(--wvges-navy); }
.search-panel input[type="text"], .search-panel select {
    font: inherit;
    color: #000;
    background: #fff;
    border: 1px solid var(--wvges-navy);
    border-radius: 3px;
    padding: 0.1rem 0.3rem;
    min-height: 1.6rem;
    max-width: 100%;
}
.main-search label { display: block; margin-bottom: 0.225rem; }
.main-search-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; }
.main-search input[type="text"] { width: 30rem; }

.advanced-search .field {
    display: grid;
    grid-template-columns: 9.5rem minmax(0, 1fr);
    align-items: center;
    gap: 0.75rem;
    margin: 0 0 0.26rem;
}
.advanced-search .field > label { text-align: right; white-space: nowrap; }
.advanced-search .field-option > label { color: var(--accent-red); }   /* Results/Page and Order By, red on the old page */
.advanced-search .field-input { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.75rem; }
.advanced-search input[type="text"] { width: 16rem; }
.advanced-search input.year { width: 6rem; }
.advanced-search select { max-width: 26rem; }
.advanced-search .actions { margin: 0.375rem 0 0 10.25rem; }
.field-error { color: var(--accent-red); font-weight: bold; }

.actions { display: inline-flex; align-items: center; gap: 0.6rem; white-space: nowrap; }
button, a.button {
    display: inline-block;
    font: inherit;
    font-weight: bold;
    line-height: 1.3;
    color: #fff;
    background: var(--wvges-navy);
    border: 1px solid var(--wvges-navy);
    border-radius: 3px;
    padding: 0.15rem 0.8rem;
    text-decoration: none;
    cursor: pointer;
}
button:hover, a.button:hover { background: var(--wvges-navy-dark); color: #fff; }
a.button.secondary { color: var(--wvges-navy); background: #fff; }
a.button.secondary:hover { color: #fff; background: var(--wvges-navy-dark); }

.search-message { margin: 0.3rem 0; color: var(--accent-red); font-weight: bold; }
.results-message { margin: 0.45rem 0 0.3rem; font-weight: bold; }

/* Result list: the bar of page controls and downloads, then ID and summary rows on alternating backgrounds. */
.results-bar {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 0.3rem 1.5rem;
    padding: 0.26rem 0.6rem;
    border-top: 1px dashed var(--wvges-navy);
    border-bottom: 1px dashed var(--wvges-navy);
    background: var(--row-alt);
}
.pager { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 1rem; }
.pager-step { font-weight: bold; }
.pager-step.disabled { color: #595959; font-weight: normal; }
.pager-go { display: inline-flex; align-items: center; gap: 0.4rem; }
.pager-go select { font: inherit; min-height: 1.5rem; border: 1px solid var(--wvges-navy); border-radius: 3px; }
.pager-go button { padding: 0 0.6rem; }
.exports { display: flex; flex-wrap: wrap; gap: 0.4rem 0.6rem; }

table.results {
    width: 100%;
    border-collapse: collapse;
    margin-top: 0.225rem;
    line-height: 1.3;
}
table.results th {
    padding: 0.26rem 0.5rem;
    text-align: left;
    font-size: 1.05em;
}
table.results td {
    padding: 0.41rem 0.5rem;
    text-align: left;
    vertical-align: top;
}
table.results tr.odd td { background: var(--row-alt); }
table.results .col-id { width: 8rem; white-space: nowrap; }
table.results .pub-title { color: #000; }
table.results .summary { overflow-wrap: anywhere; }

/* Publication details */
table.details { border-collapse: collapse; width: 100%; max-width: 70rem; line-height: 1.3; }
table.details > tbody > tr > th {
    width: 11rem;
    padding: 0.15rem 0.75rem 0.15rem 0;
    text-align: right;
    vertical-align: top;
    white-space: nowrap;
    color: var(--wvges-navy);
}
table.details > tbody > tr > td { padding: 0.15rem 0; vertical-align: top; overflow-wrap: anywhere; }
table.details tr.prices > th, table.details tr.prices > td { padding-top: 0.56rem; }
.warning { color: var(--accent-red); font-size: 1.1em; }
.table-scroll { max-width: 100%; overflow-x: auto; }
table.price-table, table.type-table { border-collapse: collapse; }
table.price-table th, table.price-table td,
table.type-table th, table.type-table td {
    padding: 0.25rem 0.6rem 0.25rem 0.4rem;
    border: 1px solid var(--wvges-navy);
    text-align: left;
    vertical-align: top;
}
table.price-table { line-height: 1.3; }
table.price-table th, table.price-table td { padding-top: 0.19rem; padding-bottom: 0.19rem; }   /* 25% tighter on the details page */
table.price-table th, table.type-table th { background: var(--panel-bg); }
table.type-table td:first-child { white-space: nowrap; }
.pub-image img { display: block; width: 720px; max-width: 100%; height: auto; border: 5px solid #000; margin: 0.375rem 0; }

/* FAQs, Help and Free Downloadable Publications */
.content-page { max-width: 62rem; }
.content-page p, .content-page li { line-height: 1.45; overflow-wrap: anywhere; }
.content-page h2 { margin: 1rem 0 0.2rem; font-size: 1rem; font-style: italic; }
.content-page.downloads h2 { font-style: normal; font-size: 1.05rem; color: var(--wvges-navy); }
.faq h2 + p { margin-top: 0; }
.pub-list { list-style: none; margin: 0; padding: 0; }
.pub-list li { margin: 0 0 0.9rem; }
.pub-list p { margin: 0; }
.pub-heading { font-style: italic; font-weight: bold; }
.go-main { margin-top: 1.25rem; }
.linkgone { font-style: italic; font-weight: normal; color: #595959; }   /* same marker as UticaWeb's dead links */
.note { color: #595959; }

/* Narrow windows and phones: the menu goes above the page and opens with its button. */
@media (max-width: 48rem) {
    .page-body { display: block; }
    .side-menu { margin-bottom: 0.75rem; }
    .menu-toggle { display: block; }
    .side-menu { padding-top: 6px; }
    .main-search input[type="text"] { width: 100%; }
    .main-search-row { display: block; }
    .main-search-row .actions { margin-top: 0.375rem; }
    .search-panel { width: auto; }
    .advanced-search .field { grid-template-columns: 1fr; gap: 0.11rem; }
    .advanced-search .field > label { text-align: left; }
    .advanced-search .actions { margin-left: 0; }
    .advanced-search input[type="text"] { width: 100%; }
    /* Long lists (Publication Type) stay inside the panel, also when a visitor widens letter spacing (WCAG 1.4.12). */
    .advanced-search .field > *, .advanced-search .field-input > * { min-width: 0; }
    .advanced-search select { width: 100%; max-width: 100%; }
    table.details > tbody > tr > th { width: auto; white-space: normal; }
    table.results .col-id { width: 5.5rem; white-space: normal; }
}
@media (max-width: 30rem) {
    table.details, table.details > tbody, table.details > tbody > tr, table.details > tbody > tr > th, table.details > tbody > tr > td { display: block; }
    table.details > tbody > tr > th { text-align: left; padding: 0.3rem 0 0; }
}
@media (min-width: 48.01rem) {
    .menu-body[hidden] { display: block; }
}

@media print {
    .side-menu, .utility-bar, .banner-bottom, .banner-map, .skip-link, .search-panel, .results-bar { display: none; }
    .page-body { display: block; }
}

/* 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; }
}