/* ChattanoogaPestControl.com: the same plain Web 1.0 sheet as pesttechchattanooga.com, in a neutral palette and with
   no Pest Tech branding (spec: "disclosed, but not dressed as a Pest Tech sales page").
   One stylesheet, system fonts only, no shadows, no rounded corners. */

:root {
  --ink: #2a2a2a;
  --muted: #5f5f5c;
  --rule: #c8c8c3;
  --tint: #f5f5f2;
  --band: #ebebe5;
  --link: #1f4f8f;
  --link-hover: #123a6e;
  --visited: #5a3a85;
  --frame: #8a8a85;
  --sans: Verdana, Geneva, Tahoma, sans-serif;
}

* { box-sizing: border-box; }

html { background: #e7e7e2; }

body {
  margin: 0;
  min-height: 100vh;
  padding: 28px 12px;
  background: radial-gradient(#cdcdc6 1px, #e7e7e2 1px) 0 0 / 6px 6px;
  color: var(--ink);
  font: 400 15px/1.7 Georgia, "Times New Roman", serif;
}

a { color: var(--link); }
a:visited { color: var(--visited); }
a:hover { color: var(--link-hover); }

.sheet {
  max-width: 900px;
  margin: 0 auto;
  padding: 34px 30px 28px;
  background: #fff;
  border: 1px solid var(--frame);
}

/* ── Type ─────────────────────────────────────────────── */

h1, h2, h3 { font-family: var(--sans); font-weight: 700; line-height: 1.3; color: #1d1d1d; }
h1 { font-size: 25px; margin: 0 0 14px; text-align: center; }
h2 { font-size: 17px; margin: 34px 0 12px; padding-top: 16px; border-top: 1px solid var(--rule); }
h3 { font-size: 14.5px; margin: 20px 0 6px; }
p { margin: 0 0 14px; }
ul { margin: 0 0 16px; padding-left: 22px; }
li { margin-bottom: 7px; }

.draft { margin: -12px 0 22px; padding: 8px 12px; border: 1px dashed var(--frame); background: var(--tint); font-size: 13px; text-align: center; }
.answer { max-width: 680px; margin: 0 auto 16px; font-size: 17px; line-height: 1.65; text-align: center; }
.disclosure { max-width: 640px; margin: 0 auto 16px; padding: 8px 14px; border: 1px solid var(--rule); background: var(--tint); font-size: 13.5px; line-height: 1.6; text-align: center; }
.toc { font-size: 13px; line-height: 1.9; text-align: center; }
.note { color: var(--muted); font-size: 13.5px; }

/* Read aloud by screen readers, not shown. */
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ── Who owns whom ────────────────────────────────────── */

/* Owner, then any company in between, then the company serving Chattanooga: three equal columns with 36px
   gutters, joined by thin arrows. Companies in the directory are shaded and link to their rows. */
.map { margin: 0 0 10px; font-size: 13px; line-height: 1.35; }
.map b { font: 700 12.5px/1.35 var(--sans); }
.map small { display: block; margin-top: 2px; color: var(--muted); font-size: 11.5px; }
.map-cols { display: flex; gap: 36px; color: var(--muted); font-size: 12px; text-align: center; }
.map-cols span { flex: 1 1 0; }
.map-group { margin: 14px 0 8px; color: var(--muted); font-size: 12.5px; }
.map-row { display: flex; margin: 0 0 10px; }
.map-owner { display: flex; flex: 0 0 calc((100% - 72px) / 3); flex-direction: column; justify-content: center; padding: 8px 10px; border: 1px solid var(--frame); text-align: center; }
.map-chains { display: flex; flex: 1 1 0; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.map-chains li { display: flex; align-items: center; margin: 0; }
.map-chains li::before { content: ""; flex: 0 0 36px; border-top: 1px solid var(--frame); }
.map-via, .map-company { position: relative; flex: 1 1 0; padding: 7px 10px; border: 1px solid var(--frame); color: var(--ink); text-align: center; text-decoration: none; }
.map-company { margin-left: 36px; }
/* Owned directly: the line runs straight through the middle column. (Same side padding and borders as a box, so
   the columns line up.) */
.map-skip { flex: 1 1 0; padding: 0 10px; border: 1px solid transparent; border-top-color: var(--frame); border-bottom: 0; }
/* The line into the right-hand box, and the arrowheads. */
.map-company::before { content: ""; position: absolute; top: 50%; right: 100%; width: 36px; border-top: 1px solid var(--frame); }
.map-via::after, .map-company::after { content: ""; position: absolute; top: 50%; right: 100%; margin-top: -4px; border: 4px solid transparent; border-right: 0; border-left: 6px solid var(--frame); }
.map-in { background: var(--tint); border-color: var(--link); }
a.map-in:visited { color: var(--ink); }
a.map-in:hover { background: var(--band); color: var(--ink); }

/* ── The directory ────────────────────────────────────── */

.directory { width: 100%; margin: 0 0 8px; border-collapse: collapse; font-size: 13.5px; line-height: 1.5; }
.directory caption { padding: 0 0 8px; caption-side: top; color: var(--muted); font-size: 13px; text-align: left; }
.directory th, .directory td { padding: 7px 9px; border: 1px solid var(--rule); text-align: left; vertical-align: top; }
.directory thead th { background: var(--band); font: 700 12px/1.4 var(--sans); }
.directory .group th { padding: 9px; background: var(--tint); font: 700 13px/1.4 var(--sans); }
.directory thead th:nth-child(1) { width: 18%; }
.directory thead th:nth-child(2) { width: 13%; }
.directory thead th:nth-child(5) { width: 22%; }
.directory .details { display: block; margin-top: 3px; color: var(--muted); font-size: 12.5px; }
.directory .since { white-space: nowrap; }
.sources { margin: 0; padding: 0; list-style: none; }
.sources li { margin: 0 0 5px; line-height: 1.35; }
.sources li:last-child { margin-bottom: 0; }
.unknown { color: var(--muted); font-style: italic; }

/* ── Change log, labels, page history ─────────────────── */

.log { padding: 0; list-style: none; }
.log li { margin-bottom: 9px; }
.log time { font-weight: 700; }
.log .src { color: var(--muted); font-size: 12.5px; }
.labels dt { font: 700 14px/1.5 var(--sans); }
.labels dd { margin: 0 0 12px; }

/* ── Footer ───────────────────────────────────────────── */

.site-footer { margin-top: 34px; padding-top: 14px; border-top: 1px solid var(--rule); color: var(--muted); font-size: 12.5px; line-height: 1.7; text-align: center; }
.site-footer p { margin: 0 0 6px; }
.site-footer a { color: var(--muted); }

/* ── Phones ───────────────────────────────────────────── */

/* Each directory row becomes a small card that names its columns. The ARIA roles in the table markup keep it a
   table for screen readers, even though the table layout is turned off here. */
@media (max-width: 720px) {
  body { padding: 16px 8px; }
  .sheet { padding: 24px 16px 20px; }
  h1 { font-size: 22px; }
  .answer { font-size: 16px; }
  .directory, .directory caption, .directory thead, .directory tbody, .directory tr, .directory th, .directory td { display: block; }
  .directory thead tr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .directory .group { margin: 22px 0 8px; }
  .directory .company { margin: 0 0 10px; border: 1px solid var(--rule); }
  .directory th, .directory td { padding: 2px 10px; border: 0; }
  .directory .group th { padding: 7px 10px; border: 1px solid var(--rule); }
  .directory .company th { padding-top: 9px; font-size: 14.5px; }
  .directory .company td:last-child { padding-bottom: 9px; }
  .directory td::before { content: attr(data-label) ": "; color: var(--ink); font-weight: 700; }
  .directory .since { white-space: normal; }
  .sources li { margin-bottom: 3px; }
  /* The map becomes a staircase: owner, then each company below it and one step to the right. Every box is the
     same width, so each level sticks out on both sides. */
  .map { --step: 32px; }
  .map-cols { display: none; }
  .map-row { flex-direction: column; }
  .map-owner, .map-via, .map-company { flex: none; width: calc(100% - 2 * var(--step)); }
  .map-chains { gap: 6px; margin: 6px 0 0; }
  .map-chains li { position: relative; flex-direction: column; align-items: stretch; }
  .map-skip { display: none; }
  .map-via, .map-company { margin-left: var(--step); }
  .map-via + .map-company { margin: 4px 0 0 calc(2 * var(--step)); }
  /* A trunk runs down past every company but the last, and each box hangs off the one above it on an elbow line
     that ends in the same arrowhead as on wide screens. */
  .map-chains li::before { display: none; }
  .map-chains li:not(:last-child)::before { display: block; position: absolute; top: 0; bottom: 0; left: calc(var(--step) / 2); border-top: 0; border-left: 1px solid var(--frame); }
  .map-via::before, .map-company::before { content: ""; position: absolute; top: -7px; bottom: 50%; right: 100%; width: calc(var(--step) / 2); border: 0; border-left: 1px solid var(--frame); border-bottom: 1px solid var(--frame); }
  .map-via + .map-company::before { top: -5px; }
}