/*
 * Bankruptcy landings — polish (2026-10-27).
 * Enqueued only on the Bankruptcy Landing template, after bk-landing.css
 * and the theme stylesheet (see lib/bk-polish.php), so no other page is
 * affected. The probate page shares bk-landing.css but never loads this file.
 */

/* --- A. Clear the fixed header --------------------------------------------
   The site header is 66px tall on phones and tablets and 145px from 1024px
   up, but the hero only allowed for 66px, so on desktop the first line of
   the headline sat under the header. --bk-header follows the real header
   height (set by a small script in lib/bk-polish.php; these defaults cover
   the first paint). Anchor jumps clear it too. */
:root {
  --bk-header: 66px;
}

@media (min-width: 1024px) {
  :root {
    --bk-header: 145px;
  }
}

.bk-landing .bk-hero {
  padding-top: calc(var(--bk-header) - 66px + 40px);
}

.bk-landing #consult,
.bk-landing #which-chapter,
.bk-landing #compare,
.bk-landing #faq {
  scroll-margin-top: calc(var(--bk-header) + 20px);
}

@media (min-width: 1000px) {
  .bk-landing .bk-left,
  .bk-landing .bk-result {
    top: calc(var(--bk-header) + 16px);
  }
}

/* --- B. Hero aligned to the page column, photo on the right ----------------
   The hero text had no container, so it sat against the left edge of the
   screen while everything below sat in the 1240px column. It now shares
   that column, and the form/quiz row lines up with it.
   With a photo (body class bk-has-photo, set only when the page's image
   exists), the hero block becomes two columns: its text on the left and
   the photo, drawn here from --bk-hero-photo, on the right. The photo is
   decorative; the template's markup is unchanged. On tablets and phones
   it moves under the call buttons. */
.bk-landing .bk-hero .bk-hero__block {
  max-width: 1192px;
  margin-left: auto;
  margin-right: auto;
}

.bk-landing .bk-hero .bk-row {
  max-width: 1192px;
}

.bk-has-photo .bk-landing .bk-hero__block {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 480px);
  column-gap: 48px;
  align-content: start;
}

.bk-has-photo .bk-landing .bk-hero__block > * {
  grid-column: 1;
}

.bk-has-photo .bk-landing .bk-hero__block::after {
  content: "";
  grid-column: 2;
  grid-row: 1 / span 6;
  align-self: center;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 18px;
  background: var(--bk-hero-photo) center / cover no-repeat;
}

@media (max-width: 960px) {
  .bk-has-photo .bk-landing .bk-hero__block {
    grid-template-columns: 1fr;
  }

  .bk-has-photo .bk-landing .bk-hero__block::after {
    grid-column: 1;
    grid-row: auto;
    margin-top: 16px;
  }
}

@media (max-width: 640px) {
  .bk-has-photo .bk-landing .bk-hero__block::after {
    border-radius: 14px;
  }
}

/* --- C. Form: "(Required)" spaced and muted ------------------------------- */
.bk-landing .bk-form-card .gform_wrapper.gravity-theme .gfield_required {
  margin-left: 4px;
  font-weight: 400;
  color: var(--bk-muted);
}

/* --- D. Site navy, type and logo -------------------------------------------
   The progress bar and closing band use the site's header-strip and footer
   navy (#002241); text colors are unchanged. Header and footer text use
   the page's typefaces, and the pale header logo becomes the crisp
   one-color footer logo filled navy (the <img> stays for size, link and
   alt; skipped while the phone menu is open). Same as the estate and
   probate pages. */
.bk-landing {
  --bk-navy: #002241;
  --bk-navy-rule: #29496A;
}

.page-template-template-bankruptcy-landing .footer,
.page-template-template-bankruptcy-landing .footer p,
.page-template-template-bankruptcy-landing .footer a,
.page-template-template-bankruptcy-landing .footer li,
.page-template-template-bankruptcy-landing .footer h2,
.page-template-template-bankruptcy-landing .footer h3,
.page-template-template-bankruptcy-landing .footer h4,
.page-template-template-bankruptcy-landing .footer h5,
.page-template-template-bankruptcy-landing .footer input,
.page-template-template-bankruptcy-landing .footer label,
.page-template-template-bankruptcy-landing .footer .gfield_label,
.page-template-template-bankruptcy-landing .navbar .aux-nav,
.page-template-template-bankruptcy-landing .navbar .nav-button {
  font-family: "Familjen Grotesk", "Helvetica Neue", Arial, sans-serif;
}

.page-template-template-bankruptcy-landing .navbar .nav-logo:not(.is-open),
.page-template-template-bankruptcy-landing .navbar .mobile-nav-logo:not(.is-open) {
  background-color: #1C2A39;
  -webkit-mask: url("/wp-content/uploads/2021/11/mack-footer.png") center / contain no-repeat;
  mask: url("/wp-content/uploads/2021/11/mack-footer.png") center / contain no-repeat;
}

.page-template-template-bankruptcy-landing .navbar .nav-logo:not(.is-open) img,
.page-template-template-bankruptcy-landing .navbar .mobile-nav-logo:not(.is-open) img {
  opacity: 0;
}

/* --- E. Phone call bar -----------------------------------------------------
   Fixed to the bottom of the screen on phones only (lib/bk-polish.php prints
   it), so calling is one tap from anywhere on the page. The page gets bottom
   padding so the bar never covers the footer. */
.bk-callbar {
  display: none;
}

@media (max-width: 760px) {
  .page-template-template-bankruptcy-landing .bk-callbar {
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 900;
    padding: 14px 16px calc(14px + env(safe-area-inset-bottom, 0px));
    background: var(--bk-accent, #E9A820);
    color: #1C2A39;
    font-family: "Familjen Grotesk", "Helvetica Neue", Arial, sans-serif;
    font-size: 18px;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.15);
  }

  .page-template-template-bankruptcy-landing {
    padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px));
  }
}