/* Pricing page.
 *
 * The page now rides on inner-pages.css -- the same black band / ivory
 * numbered-row system as About, FAQ and Service Area -- so this file only
 * carries what is genuinely specific to pricing: the rate tables, the
 * over-an-acre block, the notes, and the address handoff.
 *
 * This replaces ~1,700 lines that styled a bespoke layout with four
 * hand-built mini-calculators. Those are gone: the calculator lives in one
 * place now, in the second section, exactly as it does on the homepage.
 */
.pricing-page {
  --pricing-pine: #060807;
  --pricing-ivory: #F2EFE6;
  --pricing-rust: #A84B29;
  --pricing-rule: rgba(6, 8, 7, 0.22);
}

/* The contact band on About is a second hero; here it introduces the
   calculator. Same treatment, so the two pages read as one system. */
.pricing-page .inner-content--contact {
  padding-bottom: clamp(58px, 4.8vw, 74px);
  padding-top: 0;
}

/* ---- Rate tables ------------------------------------------------------- */

/* Wide tables scroll inside their own box rather than pushing the page
   sideways -- four money columns do not fit a phone. */
.pr-table-wrap {
  margin-top: 26px;
  overflow-x: auto;
}

.pricing-page table {
  border-collapse: collapse;
  min-width: 460px;
  width: 100%;
}

.pricing-page th,
.pricing-page td {
  border-bottom: 1px solid var(--pricing-rule);
  font-family: var(--home-regular);
  font-size: 0.98rem;
  padding: 11px 16px 11px 0;
  text-align: left;
  vertical-align: top;
}

.pricing-page thead th {
  color: var(--pricing-pine);
  font-family: var(--home-bold);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.pricing-page tbody th {
  font-weight: 400;
  white-space: nowrap;
}

.pricing-page td {
  font-family: var(--home-bold);
  font-weight: 700;
  white-space: nowrap;
}

/* The Landscaping table's last column explains what moves the price, so it is
   prose: it wraps, and it does not shout in bold like a number. No min-width
   -- giving it one pushed the table past its container at 1100px wide and
   clipped the explanations, which are the whole point of that column. */
.pr-table--prose td:last-child {
  font-family: var(--home-regular);
  font-weight: 400;
  white-space: normal;
}

/* ---- Notes ------------------------------------------------------------- */

.pr-note {
  color: var(--pricing-pine);
  font-family: var(--home-regular);
  font-size: 0.95rem;
  line-height: 1.58;
  margin: 16px 0 0;
  max-width: 720px;
}

.pr-note a {
  color: var(--pricing-rust);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---- The address handoff ----------------------------------------------- */

/* Deliberately the same object as the homepage hero box, in ivory rather
   than over a photograph: one calculator handoff on the site, recognisable
   in both places. */
.pr-finder {
  align-items: stretch;
  border: 1px solid var(--pricing-pine);
  display: flex;
  flex-wrap: wrap;
  margin-top: 28px;
  max-width: 620px;
}

.pr-finder__input {
  background: rgba(255, 255, 255, 0.42);
  border: 0;
  color: var(--pricing-pine);
  flex: 1 1 240px;
  font-family: var(--home-sans);
  font-size: 1.02rem;
  min-height: 60px;
  min-width: 0;
  outline: none;
  padding: 14px 18px;
}

.pr-finder__input::placeholder {
  color: #6b6e68;
}

.pr-finder:focus-within {
  box-shadow: 0 0 0 2px var(--pricing-rust);
}

.pr-finder__submit {
  background: var(--pricing-rust);
  border: 0;
  color: var(--pricing-ivory);
  cursor: pointer;
  flex: 0 0 auto;
  font-family: var(--home-narrow);
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  min-height: 60px;
  padding: 14px 26px;
  text-transform: uppercase;
}

.pr-finder__submit:hover {
  background: #8f3f22;
}

.pr-finder__submit:focus-visible {
  outline: 3px solid var(--pricing-pine);
  outline-offset: 2px;
}

@media (max-width: 840px) {
  .pr-finder {
    max-width: none;
  }

  .pr-finder__input,
  .pr-finder__submit {
    flex: 1 1 100%;
  }

}

/* ---- Full-width tables -------------------------------------------------- */

/* The heading and lede keep the site's two-column row; the table breaks out
   underneath both columns. The left column is empty from the heading down, so
   a four-column money table was living in half the page with ~460px of
   nothing next to it -- the same dead space that made the Service Area town
   list look wrong. Prices are what this page is for.

   The gap is closed above the breakout so the table reads as belonging to the
   heading rather than floating between sections. */
.pr-row {
  row-gap: 0;
}

.pr-wide {
  grid-column: 1 / -1;
  margin-top: 4px;
  min-width: 0;
}

/* Row rhythm is set by the section padding, not by a gap the breakout would
   inherit -- without this the lede and the table drift 100px apart. */
.pr-row .inner-row__body {
  margin-bottom: 0;
}

@media (max-width: 840px) {
  .pr-wide {
    margin-top: 10px;
  }
}

/* Auto table layout sized each column to its header text, so the money
   columns came out ragged across the four tables -- "Kept up" got 143px next
   to "Moderately overgrown" at 385px, which reads as a mistake. Fixed layout
   with one width set gives the label its room and shares the rest evenly, so
   every price column is the same width on every table. */
.pricing-page table {
  table-layout: fixed;
}

.pricing-page thead th:first-child {
  width: 28%;
}

/* Landscaping trades price-column width for the explanation column. */
.pr-table--prose thead th:first-child {
  width: 24%;
}

.pr-table--prose thead th:nth-child(2) {
  width: 18%;
}

/* ---- Phones: stop being a table ---------------------------------------- */

/* Checked at 390x844 and the desktop table was genuinely broken, not just
   tight:
   - 460px of table in a 342px box meant the FOURTH column sat off-screen on
     all three mowing tables. It scrolled, but with no visual cue, so a phone
     customer saw three of four rate columns and had no idea "After Feb 28"
     -- the rate most people actually pay -- existed at all.
   - the Landscaping table collapsed into overlapping text: fixed layout with
     a 24%/18% split of 460px left the explanation column no room, so it ran
     straight through the price beside it.

   So below 700px each row becomes a block: the lawn size as its heading, then
   one line per rate carrying its own column label. Nothing is hidden, nothing
   scrolls sideways, and no price depends on the reader discovering a swipe.

   700px, not 840: an iPad in portrait (768) still has 684px of room and reads
   perfectly well as a real table. */
@media (max-width: 700px) {
  .pricing-page table {
    min-width: 0;
    table-layout: auto;
  }

  /* The header row is what the per-cell labels replace. */
  .pricing-page thead {
    display: none;
  }

  .pricing-page table,
  .pricing-page tbody,
  .pricing-page tr,
  .pricing-page tbody th,
  .pricing-page td {
    display: block;
    width: auto;
  }

  .pricing-page tbody tr {
    border-bottom: 1px solid var(--pricing-rule);
    padding: 14px 0 12px;
  }

  .pricing-page tbody tr:first-child {
    border-top: 1px solid var(--pricing-rule);
  }

  /* The row's own heading -- the lawn size, or the service name. */
  .pricing-page tbody th {
    border: 0;
    font-family: var(--home-bold);
    font-size: 1.02rem;
    font-weight: 700;
    padding: 0 0 8px;
    white-space: normal;
  }

  .pricing-page td {
    align-items: baseline;
    border: 0;
    display: flex;
    gap: 16px;
    justify-content: space-between;
    padding: 4px 0;
    white-space: normal;
  }

  .pricing-page td::before {
    color: #5f625d;
    content: attr(data-label);
    font-family: var(--home-bold);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }

  /* An explanation is a sentence, not a value, so it goes under its label
     rather than trying to sit beside it. */
  .pr-table--prose td:last-child {
    display: block;
  }

  .pr-table--prose td:last-child::before {
    display: block;
    margin-bottom: 4px;
  }

  .pr-table-wrap {
    overflow-x: visible;
  }
}

/* ---- Under the table ---------------------------------------------------- */

/* OWNER: "underneath in orange should be a small header that has the reminder
   or things to know about each one." The over-an-acre block that used to live
   here is gone -- those brackets are rows of the table now, where she asked
   for them four times -- so what is left under each table is genuinely just
   the reminders, and they get a label saying so.

   Two columns, because the table is full width and one column of prose beside
   500px of nothing is what made this look sloppy. Two columns fill the width
   and each keeps a readable measure; letting a line run 1,175px would not. */
.pr-under {
  border-top: 1px solid var(--pricing-rule);
  margin-top: 30px;
  padding-top: 20px;
}

.pr-under__label {
  color: var(--pricing-rust);
  font-family: var(--home-bold);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  margin: 0 0 22px;
  text-transform: uppercase;
}

/* A GRID, not CSS columns. `columns: 2` flows the content, so the split
   landed wherever the text happened to run out -- one long note on the left,
   two short ones on the right with a hole between them. It read as leftover
   prose rather than a designed block, which is what the owner kept calling
   sloppy. A grid puts each reminder in its own cell, aligned to the same
   baseline row, and each carries its own rust label so it can be scanned
   instead of read. */
.pr-under__notes {
  display: grid;
  gap: clamp(20px, 2.6vw, 34px) clamp(28px, 4vw, 64px);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Pine, not rust. With both this and "Good to know" in rust they read as the
   same level of heading stacked on each other, which is worse than no label
   at all. The section marker is the orange one, per the owner; these are the
   quieter tier below it. */
.pr-fact__label {
  color: var(--pricing-pine);
  font-family: var(--home-bold);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  margin: 0 0 6px;
  text-transform: uppercase;
}

.pr-fact__text {
  color: var(--pricing-pine);
  font-family: var(--home-regular);
  font-size: 0.94rem;
  line-height: 1.55;
  margin: 0;
}

@media (max-width: 840px) {
  .pr-under__notes {
    grid-template-columns: 1fr;
  }

  .pr-under {
    margin-top: 22px;
  }
}

/* ---- Phones: stop being a table ---------------------------------------- */

/* Checked at 390x844 and the desktop table was genuinely broken, not just
   tight:
   - 460px of table in a 342px box meant the FOURTH column sat off-screen on
     all three mowing tables. It scrolled, but with no visual cue, so a phone
     customer saw three of four rate columns and had no idea "After Feb 28"
     -- the rate most people actually pay -- existed at all.
   - the Landscaping table collapsed into overlapping text: fixed layout with
     a 24%/18% split of 460px left the explanation column no room, so it ran
     straight through the price beside it.

   So below 700px each row becomes a block: the lawn size as its heading, then
   one line per rate carrying its own column label. Nothing is hidden, nothing
   scrolls sideways, and no price depends on the reader discovering a swipe.

   700px, not 840: an iPad in portrait (768) still has 684px of room and reads
   perfectly well as a real table. */
@media (max-width: 700px) {
  .pricing-page table {
    min-width: 0;
    table-layout: auto;
  }

  /* The header row is what the per-cell labels replace. */
  .pricing-page thead {
    display: none;
  }

  .pricing-page table,
  .pricing-page tbody,
  .pricing-page tr,
  .pricing-page tbody th,
  .pricing-page td {
    display: block;
    width: auto;
  }

  .pricing-page tbody tr {
    border-bottom: 1px solid var(--pricing-rule);
    padding: 14px 0 12px;
  }

  .pricing-page tbody tr:first-child {
    border-top: 1px solid var(--pricing-rule);
  }

  /* The row's own heading -- the lawn size, or the service name. */
  .pricing-page tbody th {
    border: 0;
    font-family: var(--home-bold);
    font-size: 1.02rem;
    font-weight: 700;
    padding: 0 0 8px;
    white-space: normal;
  }

  .pricing-page td {
    align-items: baseline;
    border: 0;
    display: flex;
    gap: 16px;
    justify-content: space-between;
    padding: 4px 0;
    white-space: normal;
  }

  .pricing-page td::before {
    color: #5f625d;
    content: attr(data-label);
    font-family: var(--home-bold);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }

  /* An explanation is a sentence, not a value, so it goes under its label
     rather than trying to sit beside it. */
  .pr-table--prose td:last-child {
    display: block;
  }

  .pr-table--prose td:last-child::before {
    display: block;
    margin-bottom: 4px;
  }

  .pr-table-wrap {
    overflow-x: visible;
  }
}