/* ------------------------------------------------------------------
   article.css — blog article polish for 2019washington.com
   Added 2026-09-22. Scoped to .oxy-stock-content-styles so it can only
   affect post body content, never the Oxygen chrome, header or footer.

   Palette taken from the live site, not invented:
     heading   #2a445a  (h1 colour measured in live-baseline.json)
     body      #161619
     accent    #0090a3  (the UserPrefs widget theme already in the pages)
     rule      #d8dee3
   ------------------------------------------------------------------ */

/* Oxygen's article column (#text_block-13-299) is a FLEX ITEM of
   .ct-section-inner-wrap, and a flex item defaults to min-width:auto — it
   refuses to shrink below its content's min-content width. One wide child
   (a data table) therefore drags the whole column past the viewport and the
   entire page scrolls sideways on a phone. min-width:0 releases that floor.
   Measured: without this the document is 439px wide in a 375px viewport. */
#text_block-13-299,
.ct-text-block:has(> .oxy-stock-content-styles) {
  min-width: 0;
}

.oxy-stock-content-styles {
  min-width: 0;
  max-width: 100%;
}

.oxy-stock-content-styles table {
  width: 100%;
  max-width: 100%;
  border-collapse: collapse;
  margin: 28px 0 32px;
  font-family: "Montserrat", sans-serif;
  font-size: 16px;
  line-height: 1.5;
}

.oxy-stock-content-styles table th,
.oxy-stock-content-styles table td {
  padding: 11px 14px;
  border: 1px solid #d8dee3;
  text-align: left;
  vertical-align: top;
}

.oxy-stock-content-styles table thead th {
  background-color: #eef2f5;
  color: #2a445a;
  font-weight: 600;
  letter-spacing: .02em;
}

.oxy-stock-content-styles table tbody th[scope="row"] {
  background-color: #f7f9fa;
  color: #2a445a;
  font-weight: 600;
  white-space: nowrap;
}

.oxy-stock-content-styles table tbody tr:nth-child(even) td {
  background-color: #fafbfc;
}

/* Phones: stack each row into its own card and carry the column heading in
   from data-label, so a 4-column price grid stays readable at 375px instead
   of forcing a horizontal scroll. */
@media (max-width: 640px) {
  .oxy-stock-content-styles table.wd-data-table,
  .oxy-stock-content-styles table.wd-data-table tbody,
  .oxy-stock-content-styles table.wd-data-table tr,
  .oxy-stock-content-styles table.wd-data-table th,
  .oxy-stock-content-styles table.wd-data-table td {
    display: block;
    width: auto;
  }

  .oxy-stock-content-styles table.wd-data-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .oxy-stock-content-styles table.wd-data-table tr {
    border: 1px solid #d8dee3;
    margin-bottom: 14px;
  }

  .oxy-stock-content-styles table.wd-data-table tbody th[scope="row"] {
    border: 0;
    border-bottom: 1px solid #d8dee3;
    font-size: 17px;
  }

  .oxy-stock-content-styles table.wd-data-table td {
    border: 0;
    border-bottom: 1px solid #eef2f5;
    display: flex;
    justify-content: space-between;
    gap: 16px;
    background-color: transparent !important;
  }

  .oxy-stock-content-styles table.wd-data-table td:last-child {
    border-bottom: 0;
  }

  .oxy-stock-content-styles table.wd-data-table td::before {
    content: attr(data-label);
    color: #566d8f;
    font-weight: 600;
  }
}

/* Any table without the wd-data-table class simply scrolls. */
@media (max-width: 640px) {
  .oxy-stock-content-styles table:not(.wd-data-table) {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    font-size: 15px;
  }
}

/* Lists in article bodies — the stock styles leave them cramped. */
.oxy-stock-content-styles ul,
.oxy-stock-content-styles ol {
  margin: 0 0 22px;
  padding-left: 24px;
}

.oxy-stock-content-styles li {
  margin-bottom: 10px;
  line-height: 1.7;
}

.oxy-stock-content-styles li:last-child {
  margin-bottom: 0;
}

/* In-article links: visible without shouting, and clearly interactive. */
.oxy-stock-content-styles a {
  color: #0090a3;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}

.oxy-stock-content-styles a:hover,
.oxy-stock-content-styles a:focus {
  color: #2a445a;
}

/* Give H2/H3 a little more air than the stock spacing allows. */
.oxy-stock-content-styles h2 {
  margin-top: 40px;
}

.oxy-stock-content-styles h3 {
  margin-top: 28px;
}

.oxy-stock-content-styles h2:first-child {
  margin-top: 0;
}