/* Static-build additions on top of the Kirby theme CSS.
   Covers things Kirby rendered from panel images/plugins that a static site
   renders as plain markup: text logo, hero checklist, cost table wrapper,
   footer disclaimer, home services lead. */

.branding a.logo-text {
  font-family: var(--font-title);
  font-weight: var(--font-heavy);
  font-size: var(--text-2xl);
  color: var(--color-menu-text);
  text-decoration: none;
  line-height: var(--leading-tight);
  display: inline-block;
  max-width: var(--logo-width-mobile);
}
@media screen and (min-width: 72rem) {
  .branding a.logo-text { max-width: var(--logo-width); }
}

.leader-text ul.hero-checklist { list-style: none; padding: 0; margin: 0 0 var(--spacing-6) 0; }
.leader-text ul.hero-checklist li {
  font-size: var(--text-xl);
  text-shadow: 2px 2px 2px var(--color-black);
  margin-bottom: var(--spacing-2);
}
.leader-text ul.hero-checklist li:before { content: "\2713"; color: var(--color-highlight); font-weight: var(--font-heavy); margin-right: var(--spacing-3); }
.leader-text .leader-cta { margin-top: var(--spacing-4); }

.btn { border-radius: var(--rounded); }
.prose .table-wrap { overflow-x: auto; margin: var(--spacing-6) 0; }
.prose table { width: 100%; }

.services-lead { max-width: 60ch; margin: 0 auto var(--spacing-10); }
.services-container .service img { width: 100%; height: auto; }

.footer-disclaimer-wrap { max-width: var(--container); margin: 0 auto; padding: 0 var(--container-padding) var(--spacing-6); }
.footer-disclaimer { font-size: var(--text-sm); opacity: .75; }

.leader-text p .wc-phone, .contact .btn--call, .sidebar-offer .btn--call { white-space: normal; }
@media screen and (max-width: 72rem) { body { padding-bottom: 3.5rem; } }

/* Leader: Kirby uses a fixed height, which clips long hero copy on phones and tablets. */
@media screen and (max-width: 72rem) {
  .leader { height: auto; min-height: 420px; }
  .leader figure { position: absolute; inset: 0; }
  .leader img { height: 100%; }
  .leader-text { position: relative; top: auto; transform: none; padding: var(--spacing-10) 0; }
  .leader-text h1 { font-size: var(--text-4xl); }
  .leader-text p { font-size: var(--text-xl); }
}

/* Consent checkbox under the contact form */
.contact-form .form-consent label { font-size: var(--text-sm); font-weight: var(--font-normal); line-height: var(--leading-snug); display: block; }
.contact-form .form-consent input[type="checkbox"] { width: auto; display: inline; margin: 0 var(--spacing-2) 0 0; vertical-align: middle; }
.contact-form .form-consent a { color: inherit; text-decoration: underline; }