/*
 * The Timeless Capture Booth Co.: light polish on top of the site's own style sheet.
 * Loaded on every page after the Tailwind sheet (added by improve.py). Same fonts, same colours,
 * same layout family: nothing here changes the look a visitor knows, only spacing, legibility
 * and a few layout faults.
 */

/* A phone number never breaks across two lines ("Call 215-392-" / "3642"). */
a[href^="tel:"] { white-space: nowrap; }

/* The request form: the "Which booth?" box sat alone in a two-column row with an empty half
   beside it. From tablet width up it takes the full row, like the email and message boxes. */
@media (min-width: 40rem) {
  form.grid select[name="booth"] { grid-column: span 2 / span 2; }
}

/* Keyboard users see where they are. */
a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 2px solid var(--color-champagne);
  outline-offset: 3px;
}

/* Open-and-close questions: the whole row reads as clickable. */
details > summary { -webkit-tap-highlight-color: transparent; }
details > summary:hover > span { color: #fff; }

/* Phones: footer links and social icons get a finger-sized target. */
@media (max-width: 39.99rem) {
  footer ul.space-y-2\.5 > li > a { display: inline-block; padding: .3rem 0; }
  footer ul.space-y-2\.5 > :not(:last-child) { margin-bottom: .25rem; }
  footer ul.flex.gap-5 > li > a { padding: .6rem; margin: -.6rem; }
}

/* Long reading text on wide screens: a touch more size and air. */
@media (min-width: 80rem) {
  main p.text-sm.leading-7.text-mist { font-size: .9375rem; line-height: 1.85rem; }
}

/* Two-column checklist used by the added sections (one column on a phone). */
.tcb-list { list-style: none; margin: 2.5rem auto 0; padding: 0; display: grid; gap: .9rem 3rem; max-width: 56rem; }
@media (min-width: 48rem) { .tcb-list.tcb-two { grid-template-columns: 1fr 1fr; } }
.tcb-list li {
  position: relative; padding: 0 0 .9rem 1.6rem; border-bottom: 1px solid var(--color-hairline);
  font-size: .875rem; line-height: 1.6; color: var(--color-linen);
}
.tcb-list li::before {
  content: ""; position: absolute; left: 0; top: .7em; width: .75rem; height: 1px; background: var(--color-champagne);
}

/* Booth facts in the comparison cards on /pricing. */
.tcb-facts { margin: 1.5rem 0 0; }
.tcb-facts > div {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  border-top: 1px solid var(--color-hairline); padding: .75rem 0; font-size: .8125rem; line-height: 1.5;
}
.tcb-facts dt { color: var(--color-mist); flex: none; }
.tcb-facts dd { margin: 0; color: var(--color-linen); text-align: right; }

/* Comparison cards: the link sits at the foot of every card, level across the row. */
.tcb-card { display: flex; flex-direction: column; }
.tcb-card > a:last-child { margin-top: auto; padding-top: 1.5rem; align-self: flex-start; }

/* Eight linked tags sit in two even rows of four, not six and a stranded two. */
@media (min-width: 48rem) {
  .tcb-grid4 { display: grid; grid-template-columns: repeat(4, auto); justify-content: center; }
  .tcb-grid4 > li > a { text-align: center; }
}