/* County pages and the appeals index. Loaded after styles.css, which owns the shell. */

/* PADDING-BLOCK, NOT THE PADDING SHORTHAND. These elements also carry .container, whose whole job
   is padding-inline: clamp(1.1rem, 4vw, 2rem). The shorthand set left and right to 0, and this
   sheet loads after styles.css at equal specificity, so it won. On a desktop the 46rem max-width
   centres the column and leaves whitespace either side, which hid it completely; on a phone the
   column IS the viewport and every line ran edge to edge. */
.appeal-page, .appeal-index { padding-block: 2rem 4rem; max-width: 46rem; }
.appeal-page h1, .appeal-index h1 { line-height: 1.15; text-wrap: balance; }
.appeal-page .lede, .appeal-index .lede { font-size: 1.05rem; opacity: .85; max-width: 38rem; }
.appeal-page section { margin-top: 2.25rem; }
.appeal-page h2 { font-size: 1.25rem; margin-bottom: .6rem; text-wrap: balance; }
.appeal-page p { margin: 0 0 .9rem; }

.appeal-hero { margin: 1.25rem 0 1.75rem; }
.appeal-hero img { width: 100%; height: auto; border-radius: 8px; display: block; }
.appeal-hero figcaption { font-size: .75rem; opacity: .65; margin-top: .4rem; }
.appeal-hero figcaption a { color: inherit; }

.crumbs { font-size: .85rem; opacity: .75; margin-bottom: 1rem; }
.crumbs a { color: inherit; }

.deadline-card { border: 1px solid rgba(128,128,128,.32); border-left-width: 4px; border-radius: 6px; padding: 1rem 1.1rem; margin: 0 0 1rem; }
.deadline-card--known { border-left-color: #2E7D5B; }
.deadline-card--range { border-left-color: #B4791F; }
.deadline-eyebrow { font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; opacity: .7; margin: 0 0 .35rem; }
.deadline-value { font-size: 1.6rem; font-weight: 700; margin: 0 0 .4rem; line-height: 1.2; }
.deadline-range { font-size: 1rem; font-weight: 500; margin: 0 0 .5rem; }
.deadline-cite { font-size: .85rem; opacity: .8; margin: 0; }

/* WHERE TO FILE. The deadline card's sibling: same frame, same cite line, because the two answer one
   question between them. The address element's UA style is italic, so it is reset here. The two
   paragraph classes are qualified by .appeal-page because the page rule above out-specifies a bare
   class and would win the margin. */
.filing-card { border-left-color: #2E7D5B; }
.filing-address { font-style: normal; font-weight: 600; line-height: 1.45; margin: 0 0 .7rem; }
.appeal-page .filing-form, .appeal-page .filing-how { margin: 0 0 .45rem; }

.figure-note { font-size: .88rem; opacity: .82; }
.faq { margin: 0; }
.faq dt { font-weight: 600; margin-top: 1rem; }
.faq dd { margin: .35rem 0 0; opacity: .9; }
.provenance { margin-top: 2.5rem; padding-top: 1rem; border-top: 1px solid rgba(128,128,128,.28); font-size: .8rem; opacity: .72; }

/* ---- index ---- */
.idx-controls { margin: 1.5rem 0 1rem; display: flex; flex-direction: column; gap: .6rem; }
.idx-search-label { font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; opacity: .7; }
.idx-search { width: 100%; min-height: 48px; padding: .7rem .9rem; font: inherit; font-size: 1rem;
  border: 1px solid rgba(128,128,128,.45); border-radius: 8px; background: transparent; color: inherit; }
.idx-filters { display: flex; flex-wrap: wrap; gap: .5rem; }
.idx-filter { min-height: 44px; padding: .5rem 1rem; font: inherit; font-size: .9rem; cursor: pointer;
  border: 1px solid rgba(128,128,128,.45); border-radius: 999px; background: transparent; color: inherit; }
.idx-filter.is-on { border-color: currentColor; font-weight: 600; }
.idx-count { font-size: .85rem; opacity: .7; margin: 0; }

.idx-group { margin-top: 2rem; }
.idx-group-title { font-size: 1.05rem; display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.idx-list { list-style: none; margin: .75rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .4rem; }
.idx-link { display: grid; grid-template-columns: 1fr auto; gap: .15rem .75rem; align-items: baseline;
  min-height: 44px; padding: .7rem .85rem; border: 1px solid rgba(128,128,128,.28); border-radius: 8px;
  text-decoration: none; color: inherit; }
.idx-link:hover, .idx-link:focus-visible { border-color: currentColor; }
.idx-name { font-weight: 600; }
.idx-kind { font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; opacity: .65; }
.idx-desc { grid-column: 1 / -1; font-size: .85rem; opacity: .8; }
.idx-empty { margin-top: 2rem; opacity: .8; }

.badge { display: inline-block; font-size: .65rem; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; padding: .22em .55em; border-radius: 4px; border: 1px solid currentColor; }
.badge--served { color: #2E7D5B; }
.badge--guide { color: #7A7A7A; }

@media (max-width: 720px) {
  /* NO PADDING OVERRIDE HERE ANY MORE. This block used to zero padding-left and padding-right on
     both, to stop the index list being squeezed on a phone (F14). It also applied to .appeal-page,
     so every line of a county guide ran flush to both edges of the screen — Tyler read one on a
     phone and that is the first thing he saw.
     .container's own gutter is clamp(1.1rem, 4vw, 2rem), which resolves to about 17px at 375px:
     narrow enough that the list is not squeezed, wide enough that the text is not touching glass.
     Winning back seventeen pixels was never worth the page having no margin. */
  .idx-link { grid-template-columns: 1fr; }
  .idx-kind { justify-self: start; }
}