/* td-home */
.td-hero-h1 { font-size: 100px !important; max-width: 12ch; }
.home .fusion-tb-header { position: absolute; top: 0; left: 0; right: 0; z-index: 100; }
.home .fusion-tb-header .td-header:not(.fusion-sticky-transition) { background-color: transparent !important; }
.td-hero-p { max-width: 56ch; }
.td-h2 { font-size: 72px !important; }
.td-final-h2 { font-size: 96px !important; }
.td-kick p { text-transform: uppercase; letter-spacing: .14em; }
.td-card { transition: transform .2s ease; } .td-card:hover { transform: translateY(-3px); }
/* Both inner columns are given an explicit transparent ground in the shortcode above. Left to itself Avada filled
   the second one with gold, which put a gold link on a gold slab - unreadable, and nothing in the markup asked for
   it. An empty background attribute is not the same as a transparent one.

   The lead ticket band carries copy on the left and the link on the right. The link is set on the middle of the
   band rather than at the top of an otherwise empty column, so it reads as the band's action. Below 800px the two
   inner columns stack and it returns to the left, under the copy. */
.td-card--lead .fusion-builder-row-inner { align-items: center !important; }
/* and the gold is taken off here as well as in the shortcode. Setting the column's background to transparent in the
   shortcode did reach the page - the element carries --awb-bg-color:rgba(0,0,0,0) - and something in Avada paints it
   gold anyway, by a route that does not read that variable. Rather than keep hunting for it: the column is
   transparent, said plainly, in the one place that cannot be overruled. */
.td-card--lead .td-card__go { background-color: transparent !important; }
.td-card--lead .td-card__go > .fusion-column-wrapper { display: flex; justify-content: flex-end; }
/* Stacked, the link goes back under the copy and has to line up with it. Two things were in the way: Avada centres
   a text element's content at small sizes by default, and it insets a nested column by a percentage of its own -
   so the link sat centred, and starting 24px right of the paragraph above it. Both are undone here. */
@media (max-width: 800px) {
  .td-card--lead .td-card__go { padding-left: 0 !important; padding-right: 0 !important; margin-left: 0 !important; margin-right: 0 !important; }
  .td-card--lead .td-card__go > .fusion-column-wrapper { justify-content: flex-start; }
  .td-card--lead .td-card__go .fusion-text, .td-card--lead .td-card__go p { text-align: left !important; }
}
.td-photo img { box-shadow: 16px 16px 0 #b48630; }
.td-counties { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 24px; }
.td-counties li { padding: 9px 0; border-bottom: 1px solid rgba(255,255,255,.12); }
.td-counties a { color: #dfe3ec; text-decoration: none; display: flex; justify-content: space-between; } .td-counties a:hover { color: #d9a441; }
.td-court-search .searchform input.s { font: 500 17px Barlow, sans-serif; padding-left: 18px; }
.td-court-search .searchform .fusion-search-button, .td-court-search .searchform input[type=submit] { background: #b48630 !important; color: #0a1226 !important; }
.td-hero-form .fusion-form-field { margin-bottom: 0; }
.td-hero-form input.fusion-form-input:not([type=file]) { height: 50px !important; padding-top: 0; padding-bottom: 0; }
.td-hero-form .fusion-form-field label { color: #dfe3ec !important; font: 500 13px Barlow, sans-serif; letter-spacing: .02em; }
.td-hero-form .fusion-form-field label .fusion-form-element-required { color: #d9a441; text-decoration: none; }
.td-hero-form .awb-uploads-preview:empty { display: none; }
/* the hero form's own styling lives in tools/css-tweaks.php, which owns the panel, both fields and the upload
   control. The rules that used to sit here fought it: a second dashed box inside the upload control, and a fixed
   50px button that broke the label onto two lines. Only the margin is left. */
.td-hero-form .fusion-form-submit-field { margin: 0; }
.td-hero-form .fusion-form-field:not(.fusion-form-submit-field) { margin-bottom: 6px; }
@media (max-width: 1024px) { .td-hero-h1 { font-size: 76px !important; } .td-h2 { font-size: 56px !important; } .td-final-h2 { font-size: 72px !important; } }
@media (max-width: 640px) { .td-hero-h1 { font-size: 54px !important; } .td-h2 { font-size: 42px !important; } .td-final-h2 { font-size: 52px !important; } .td-counties { grid-template-columns: 1fr; } }