/* ==========================================================================
   custom-overrides.css — post-Squarespace UI cleanup
   Loaded last, after all Squarespace CSS, so these rules win without
   editing the generated markup. Layered so specificity stays predictable.
   ========================================================================== */

:root {
  --ss-measure: 74ch;        /* body copy was running ~88ch, too wide to track */
  --ss-gutter: clamp(1.25rem, 5vw, 4rem);
  --ss-accent: #111;
  --ss-rule: rgba(0, 0, 0, 0.12);
}

/* --------------------------------------------------------------------------
   1. Page gutters — content was running flush to the viewport edge (the
      contact page started at x=29px with no breathing room, and collapsed
      badly under ~1100px). Guarantee a gutter everywhere.
   -------------------------------------------------------------------------- */
.fluid-engine,
.sqs-layout .sqs-row {
  padding-left: var(--ss-gutter);
  padding-right: var(--ss-gutter);
  box-sizing: border-box;
}

/* --------------------------------------------------------------------------
   2. Typography — tighten the vertical rhythm and cap the measure so long
      paragraphs don't run to 90+ characters on wide screens.
   -------------------------------------------------------------------------- */
.sqs-html-content p,
.sqs-html-content li {
  line-height: 1.65;
  max-width: var(--ss-measure);
}

.sqs-html-content p + p {
  margin-top: 1.1em;
}

/* NB: deliberately NOT using `text-wrap: balance` here. It re-wrapped the
   homepage hero ("Defending Sales Suppression Assessments") from two lines
   onto three, which reads worse over the banner image. */
.sqs-html-content h1,
.sqs-html-content h2,
.sqs-html-content h3 {
  line-height: 1.2;
  margin-bottom: 0.5em;
}

.sqs-html-content ul li {
  margin-bottom: 0.4em;
}

/* Bulleted "areas of specialization" style lists read better with a hanging
   indent than with the default flush bullets. */
.sqs-html-content ul {
  padding-left: 1.2em;
}

/* --------------------------------------------------------------------------
   3. Links — Squarespace's default underline sits on the baseline and
      collides with descenders. Offset it and give a real hover state.
   -------------------------------------------------------------------------- */
.sqs-html-content a {
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
  transition: opacity 0.15s ease, text-decoration-color 0.15s ease;
}

.sqs-html-content a:hover {
  opacity: 0.62;
}

/* --------------------------------------------------------------------------
   4. Buttons — add hover/active feedback (there was none) and stop them
      floating detached in the right margin.
   -------------------------------------------------------------------------- */
.sqs-block-button-element {
  transition: transform 0.12s ease, opacity 0.15s ease, box-shadow 0.15s ease;
  will-change: transform;
}

.sqs-block-button-element:hover {
  opacity: 0.88;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
}

.sqs-block-button-element:active {
  transform: translateY(0);
  box-shadow: none;
}

/* --------------------------------------------------------------------------
   5. Accessibility — the theme ships with no visible focus indicator, which
      makes the site unusable by keyboard. Restore one.
   -------------------------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
.sqs-block-button-element:focus-visible {
  outline: 2px solid var(--ss-accent);
  outline-offset: 3px;
  border-radius: 2px;
}

/* --------------------------------------------------------------------------
   6. Header — the site title is long ("Sales Suppression Defense - Sales Tax
      Reassessment Defense") and shoved the nav into a ragged two-line wrap.
      Let it breathe, and stack cleanly instead of wrapping mid-list.
   -------------------------------------------------------------------------- */
.header-title-text a {
  line-height: 1.15;
}

/* The title is long enough to squeeze the nav into a ragged two-line wrap at
   common laptop widths. Easing the title down keeps the nav on one line.
   (Do NOT add gap to .header-nav-list — it widens the list and makes the
   wrap worse, not better.) */
@media (max-width: 1400px) {
  .header-title-text a {
    font-size: 0.88em;
  }
}

@media (max-width: 1100px) {
  .header-title-text a {
    font-size: 0.78em;
  }
}

/* --------------------------------------------------------------------------
   7. Team page — headshots. Give them a consistent aspect ratio and a soft
      edge so the three portraits (different crops/sizes) sit as a set.
   -------------------------------------------------------------------------- */
.sqs-block-image .sqs-image-shape-container-element img {
  border-radius: 3px;
}

.sqs-block-image .sqs-image-shape-container-element {
  border-radius: 3px;
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   8. Media — never let an image or embed cause a horizontal scrollbar.
   -------------------------------------------------------------------------- */
img,
iframe,
video {
  max-width: 100%;
}

/* --------------------------------------------------------------------------
   9. Footer — the two columns had no separation from the body content.
   -------------------------------------------------------------------------- */
.sections > footer .fluid-engine,
#footer-sections .fluid-engine {
  border-top: 1px solid var(--ss-rule);
}

/* --------------------------------------------------------------------------
   10. Contact page — read as a mostly-empty page. The copy sits in a 5-of-12
       column and the email CTA in a column to its right, but the ROW spanned
       the full 1416px viewport, stranding both against a huge void. The page
       uses the legacy .sqs-row float grid (not .fluid-engine), so constrain
       and centre the row: the intended two-column composition survives, it
       just stops being lost on the page.
   -------------------------------------------------------------------------- */
body.collection-5dd173971a63bd7bd1a0ee1e main .sqs-row {
  max-width: 620px;
  margin-inline: auto;
}

/* Collapse the 12-col float grid into one stacked column, so the copy and the
   email CTA read as a single centred unit instead of two marooned islands. */
body.collection-5dd173971a63bd7bd1a0ee1e main .sqs-row .col {
  float: none;
  width: 100%;
  margin-left: 0;
  margin-right: 0;
}

/* With the columns stacked, the paragraph no longer needs the global measure
   cap — it is already narrow. */
body.collection-5dd173971a63bd7bd1a0ee1e main .sqs-html-content p {
  max-width: none;
}

/* Section was 628px tall to hold ~250px of content. Trim the dead air. */
body.collection-5dd173971a63bd7bd1a0ee1e main .page-section {
  min-height: 0;
  padding-bottom: 4rem;
}

/* --------------------------------------------------------------------------
   11. News / Publications index (blog list view).
       This page was the roughest on the site. Three separate problems, all
       confined to the LIST view (body.view-list) — the individual article
       pages are already left-aligned and fine, so nothing here touches them:

         a) every paragraph AND bullet list was centre-aligned, which is what
            made it look chaotic (centred bullets especially);
         b) post titles rendered as 68px <h1> — hero size, on a *list*;
         c) the entire article body was dumped inline under each title, so the
            index was a wall of text with a "Read More" link beneath the text
            it was supposedly a preview of.
   -------------------------------------------------------------------------- */

/* (a) Stop centring. The whole post wrapper is text-align:center, which is
   what centres the copy, the bullets, the date and the Read More link alike —
   so fix it at the wrapper rather than chasing each descendant. */
body.view-list .blog-single-column--text,
body.view-list .sqs-html-content,
body.view-list .sqs-html-content p,
body.view-list .sqs-html-content ul,
body.view-list .sqs-html-content ol,
body.view-list .sqs-html-content li {
  text-align: left;
}

/* (b) Titles: hero size on a single article, list size in a list. */
body.view-list .blog-title,
body.view-list h1.blog-title,
body.view-list .blog-title a {
  font-size: clamp(1.75rem, 2.6vw, 2.4rem);
  line-height: 1.2;
  text-align: left;
}

/* The date row and the Read More link are NOT centred by text-align — the post
   wrapper is a flex column that centres its items, and the meta row is itself
   a flex row with justify-content:center. Text alignment can't touch either;
   the flex alignment is what has to change. */
body.view-list .blog-single-column--text {
  align-items: flex-start;
}

body.view-list .blog-meta-section {
  justify-content: flex-start;
}

/* The link additionally sets align-self:center on itself, which beats the
   parent's align-items. It has to be overridden on the item, not the parent —
   and the theme's own rule outranks a plain override here, hence !important. */
body.view-list .blog-more-link {
  align-self: flex-start !important;
}

/* (c) Turn the full-article dump into an actual excerpt. The complete text is
   still one click away via the existing "Read More" link, which sits OUTSIDE
   .sqs-layout and so is deliberately not clamped away with it. */
/* NB: -webkit-line-clamp does NOT work here — the excerpt is a container of
   nested block elements (blocks > rows > text containers), not inline text,
   so the clamp silently no-ops. max-height truncation is what actually bites. */
/* The global page gutter (rule 1) indents the excerpt relative to its own
   title, which sits outside .sqs-row. Zero it so they share a left edge. */
body.view-list .blog-single-column--text .sqs-row {
  padding-left: 0;
  padding-right: 0;
}

body.view-list .blog-single-column--text .sqs-layout {
  max-height: 11em;
  overflow: hidden;
  max-width: var(--ss-measure);
  mask-image: linear-gradient(to bottom, #000 65%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, #000 65%, transparent 100%);
}

/* Headings inside an excerpt shouldn't shout either. */
body.view-list .blog-single-column--text .sqs-layout h1,
body.view-list .blog-single-column--text .sqs-layout h2,
body.view-list .blog-single-column--text .sqs-layout h3 {
  font-size: 1rem;
  margin-bottom: 0.25em;
}

/* Give the "Read More" affordance some air now that it follows an excerpt. */
body.view-list .blog-more-link {
  display: inline-block;
  margin-top: 1rem;
}

/* Separate consecutive posts so the list reads as a list. */
body.view-list .blog-basic-grid--container .blog-item + .blog-item,
body.view-list article.blog-item + article.blog-item {
  border-top: 1px solid var(--ss-rule);
  padding-top: 2.5rem;
  margin-top: 2.5rem;
}

/* Article pages: 68px is a lot even for a single post. Ease it down.
   The theme's .entry-title--large modifier outranks a bare .entry-title
   selector, so it has to be named explicitly or the rule silently no-ops. */
body.view-item .entry-title,
body.view-item h1.entry-title,
body.view-item .entry-title--large,
body.view-item h1.entry-title--large {
  font-size: clamp(2rem, 4vw, 3.25rem) !important;
  line-height: 1.15;
}

/* --------------------------------------------------------------------------
   12. State zapper law table (state-zapper-laws + resources pages).
       Replaced a 35KB Microsoft-Word paste (MsoNormalTable / mso-* / <o:p>)
       with a clean semantic table. Styling lives here.
   -------------------------------------------------------------------------- */
.zapper-table {
  width: 100%;
  border-collapse: collapse;
  margin: 2rem 0 1rem;
  font-size: 0.95rem;
  text-align: left;
}

.zapper-table caption {
  caption-side: top;
  text-align: left;
  font-size: 0.85rem;
  opacity: 0.7;
  padding-bottom: 0.9rem;
  line-height: 1.5;
}

.zapper-table th,
.zapper-table td {
  padding: 0.6rem 0.9rem 0.6rem 0;
  border-bottom: 1px solid var(--ss-rule);
  vertical-align: top;
}

.zapper-table thead th {
  border-bottom: 2px solid currentColor;
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.zapper-table tbody tr:hover {
  background: rgba(0, 0, 0, 0.03);
}

/* States with no statute: present but visibly recessive, so the eye lands on
   the 33 that do have one. */
.zapper-table td.none {
  opacity: 0.45;
}

/* The three statutes that are NOT dedicated criminal laws — flagged so nobody
   reads Virginia's misdemeanor as equivalent to Wisconsin's Class D felony. */
.zapper-table td.qual {
  font-style: italic;
}

.zapper-table td:last-child {
  white-space: nowrap;
  opacity: 0.7;
}

.zapper-key {
  max-width: var(--ss-measure);
  font-size: 0.9rem;
  line-height: 1.6;
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--ss-rule);
}

.zapper-key ul { margin: 0.6rem 0 1rem; padding-left: 1.2em; }
.zapper-key li { margin-bottom: 0.4em; }

.zapper-disclaimer {
  font-size: 0.82rem;
  opacity: 0.65;
  font-style: italic;
  margin-top: 1.2rem;
}

/* The table is the widest thing on the site — let it scroll on its own rather
   than forcing the page body to scroll horizontally on a phone. */
@media (max-width: 640px) {
  .zapper-table { font-size: 0.85rem; }
  .zapper-table th, .zapper-table td { padding-right: 0.5rem; }
}

/* --------------------------------------------------------------------------
   13. Print — people do print tax-defense pages. Drop the chrome.
   -------------------------------------------------------------------------- */
@media print {
  .header, .header-nav, footer, .sqs-block-button-element {
    display: none !important;
  }
  .sqs-html-content p { max-width: none; }
}