/* Trace Elements in West Virginia Coals (/www/datastat/te/).
   The banner, left menu and footer rules are PublicationsWeb's (publications.css, the same as PipelineWeb's
   banner and footer), so these pages look like the other WVGES pages. Page content rules are at the end. */

: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, .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 site 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-image: url("/www/images/moore-cross-green.jpg");
    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 Trace Elements menu on the left (where the old frame menu was), 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; }

/* Trace Elements menu: the Publications menu's sand panel with the strata stripe, 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, .note-box::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"; }

/* 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; }
}
@media (min-width: 48.01rem) {
    .menu-body[hidden] { display: block; }
}

@media print {
    .side-menu, .utility-bar, .banner-bottom, .banner-map, .skip-link, .element-nav { 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; }
}

/* ---- Page content ---- */

main { max-width: 62rem; overflow-wrap: break-word; }   /* long web addresses wrap on phones (WCAG 1.4.10) */
main p, main li, main dd { line-height: 1.45; }
main img { max-width: 100%; height: auto; }
.series {
    margin: 0.2rem 0 0;
    font-size: 0.8rem;
    font-weight: bold;
    color: #595959;   /* 7.0:1 on white */
}
main h1.page-title { margin-top: 0.1rem; }
main h2 {
    margin: 1.4rem 0 0.4rem;
    padding-top: 0.4rem;
    border-top: 2px solid #43649d;
    font-size: 1.05rem;
    color: var(--wvges-navy);
}
/* A heading that follows another heading directly (stathap.htm): no second rule, little space between them. */
main h2.follow { margin-top: 0.3rem; padding-top: 0; border-top: 0; }
main h3 { margin: 1rem 0 0.3rem; font-size: 0.95rem; color: var(--wvges-navy); }
.center { text-align: center; }
.alert { color: var(--accent-red); font-weight: bold; }   /* the old pages' red notes (#ff0000, 4.0:1) */
.nowrap { white-space: nowrap; }

/* Links that used to be picture buttons ("Stratigraphic Distribution" and so on) are text buttons (WCAG 1.4.5). */
.button-row { display: flex; flex-wrap: wrap; gap: 0.4rem 0.6rem; margin: 0.6rem 0; padding: 0; list-style: none; }
.button-row a, .element-nav a {
    display: inline-block;
    padding: 0.2rem 0.7rem;
    border: 1px solid var(--wvges-navy);
    border-radius: 3px;
    font-weight: bold;
    line-height: 1.3;
    text-decoration: none;
    color: var(--wvges-navy);
    background: #fff;
}
.button-row a:hover, .element-nav a:hover { color: #fff; background: var(--wvges-navy-dark); }

/* The four pages of one element: overview, stratigraphic, geographic, statistics. */
.element-nav ul { display: flex; flex-wrap: wrap; gap: 0.4rem 0.5rem; margin: 0 0 0.8rem; padding: 0; list-style: none; }
.element-nav a[aria-current="page"] { color: #fff; background: var(--wvges-navy); }

/* Charts and maps: a small image that opens the full-size image. */
.figure { margin: 0.2rem 0 0.8rem; }
.figure img { display: block; border: 1px solid #595959; }
.figure figcaption { margin-top: 0.25rem; font-size: 0.8rem; color: #595959; }
@media (min-width: 40rem) {
    .figure.fig-left { float: left; margin: 0.2rem 1.25rem 0.8rem 0; }
    .figure.fig-right { float: right; margin: 0.2rem 0 0.8rem 1.25rem; }
    img.fig-left { float: left; margin: 0.2rem 1.25rem 0.6rem 0; }
    img.fig-right { float: right; margin: 0.2rem 0 0.6rem 1.25rem; }
}
.clear { clear: both; }

/* The old yellow "To request specific information" box, as a sand note. */
.note-box {
    position: relative;
    clear: both;
    width: fit-content;
    max-width: 100%;
    margin: 1.25rem 0 0.75rem;
    padding: calc(6px + 0.4rem) 0.8rem 0.45rem;
    border: 1px solid var(--wvges-navy);
    border-radius: 4px;
    background: var(--panel-bg);
    overflow: hidden;
}
.note-box p { margin: 0; }

/* The welcome page's six main pages. */
.link-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: 0.5rem;
    margin: 0.6rem 0 1rem;
    padding: 0;
    list-style: none;
}
.link-grid a {
    display: block;
    height: 100%;
    padding: 0.5rem 0.7rem;
    border: 1px solid var(--wvges-navy);
    border-radius: 4px;
    font-weight: bold;
    color: var(--wvges-navy-dark);
    background: var(--panel-bg);
}
.link-grid a:hover { color: #000; }

/* Reference lists */
.refs { margin: 0 0 0 1.25rem; }
.refs p { margin: 0 0 0.6rem; }
.ref-notes { margin: 0.4rem 0 0; padding-left: 1.5rem; }

/* Data tables keep their columns and scroll sideways inside the page on narrow windows (WCAG 1.4.10). */
.table-scroll { max-width: 100%; overflow-x: auto; margin: 0.6rem 0; }
table.data { border-collapse: collapse; line-height: 1.3; }
table.data th, table.data td { padding: 0.2rem 0.45rem; border: 1px solid #595959; vertical-align: top; }
table.data th { background: var(--panel-bg); text-align: center; }
table.data caption { padding: 0.2rem 0; font-weight: bold; text-align: left; }

/* Photos side by side (SEM views) and the coal production graphs */
.photo-row { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 0.6rem 0; }
.photo-row img { border: 1px solid #595959; }
.figure-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); gap: 1rem; margin: 0.6rem 0 1rem; }
.figure-grid .figure { margin: 0; }

/* General Trace Element Page: the element list, in columns as on the old page */
.element-list { columns: 4 11rem; column-gap: 1.5rem; margin: 0.6rem 0 1rem; padding: 0; list-style: none; }
.element-list li { margin: 0 0 0.3rem; break-inside: avoid; font-weight: bold; }

/* Individual Coal Bed HAP table: one column of coal beds for each rock unit */
.unit-columns { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 12rem), 1fr)); gap: 1rem; margin: 0.6rem 0 1rem; }
.unit h2 { margin-top: 0; font-size: 0.95rem; }
.unit ul { margin: 0; padding-left: 1.1rem; }
.unit li { margin: 0 0 0.2rem; }

/* Periodic table (Periodic.htm). The old page's colors: a main table, then the lanthanide (57-71) and
   actinide (89-103) tables. All three tables are the same width with 18 equal columns (table-layout:
   fixed), so every cell is the same width and the three tables start and end at the same place. The
   bottom tables' elements sit under columns 3 to 17, with blank gray cells under columns 1-2 and 18.
   All three share one scroll box on phones, so they stay lined up when scrolled.
   Text contrast: black text 13:1 or more on every color; blue links 5.9:1 or more on green, cyan, yellow,
   gray and white. The old blue on orange is 3.2:1, so links on orange are black (7.2:1) and underlined. */
.pt-scroll { margin: 0.6rem 0 0.9rem; }
.pt-wrap { min-width: 46rem; }
table.periodic {
    width: 100%;
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 2px;
    border: 4px outset #969696;
    background: #fff;
    margin: 0;
}
table.periodic + table.periodic { margin-top: 0.4rem; }
table.periodic td {
    position: relative;
    padding: 0.2rem 0.1rem;
    border: 1px inset #9a9a9a;
    background: #fff;
    color: #000;
    text-align: center;
    vertical-align: middle;
    line-height: 1.25;
    font-size: 1rem;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}
table.periodic .pt-num, table.periodic .pt-sym { display: block; }
table.periodic td.pt-key { font-weight: bold; font-size: 0.9rem; padding: 0.3rem; }
table.periodic td.pt-title { font-size: 1.4rem; }
table.periodic td.pt-tech { background: #66ffff; }   /* Elements of Technological Concern */
table.periodic td.pt-hap  { background: #ff6600; }   /* Hazardous Air Pollutant Element Data */
table.periodic td.pt-gen  { background: #99ff99; }   /* General Trace Elements */
table.periodic td.pt-env  { background: #ffff00; }   /* Elements of Environmental Concern */
table.periodic td.pt-gray { background: #cccccc; }   /* title cell and the empty space beside Fr and Ra */
table.periodic a { color: #0000ee; }
table.periodic a:visited { color: #551a8b; }
table.periodic td.pt-hap a, table.periodic td.pt-hap a:visited { color: #000; }
table.periodic a:focus-visible { outline: 2px solid #000; outline-offset: 1px; }

main img.block { display: block; margin: 0.4rem 0 0.6rem; }
.lead { font-weight: bold; }   /* a mineral's name and formula, under the page heading */
.revised { clear: both; margin: 1.5rem 0 0; font-size: 0.8rem; font-style: italic; color: #595959; }
.linkgone { font-style: italic; font-weight: normal; color: #595959; }   /* same marker as UticaWeb and PublicationsWeb */