/* =========================================================================
   ADS LANDING PAGE — Google Ads paid-traffic template only
   Enqueued conditionally (is_page_template('templates/template-ads-landing.php'))

   Reuses existing sitewide components as-is wherever one already exists —
   never redefines them here:
     .hivelaw-hero.hivelaw-hero--with-form  (hero copy/form 55/45 split)
     .hivelaw-form-cta-block                (parchment copy/form 50/50 split)
     .hivelaw-process                       (homepage "How It Works" steps)
     .hivelaw-container, .hivelaw-section, .hivelaw-section--dark/--parchment
   ========================================================================= */

/* Bare header — logo only, not a link, no nav. Symmetric padding + centered
   flex so the logo sits vertically centered in the bar. */
.hivelaw-ads-landing__bare-header {
  padding: 20px 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hivelaw-ads-landing__bare-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.hivelaw-ads-landing__bare-logo img {
  border-radius: 6px;
  display: block;
}
/* .hivelaw-header__logo-text is a sitewide class built assuming it always
   sits on the dark site header — its base color is white. This bare
   header has no dark background of its own (it sits on the page's own
   background, which is white in light mode), so "The Hive" was rendering
   white-on-white and disappearing entirely. Only the gold "Law" span was
   ever visible. Force a dark color for the non-gold portion here. */
.hivelaw-ads-landing__bare-header .hivelaw-header__logo-text {
  color: var(--color-black);
}

/* Hero — title/subtitle/eyebrow/form-panel styling is fully inherited from
   .hivelaw-hero--with-form. Only the price line below the subtitle is new. */
.hivelaw-ads-landing__hero-price {
  font-family: var(--font-body);
  font-size: 1.125rem;
  color: var(--color-gold);
  font-weight: 600;
  margin: 4px 0 0;
}

/* No section-heading underline decoration anywhere on this page — the
   sitewide auto-underline (.hivelaw-section h2::after, centered on dark
   sections) reads as an odd stray dash under these particular headings.
   Scoped to the whole page via the body class so it also catches the
   hero and final CTA, which sit outside .hivelaw-ads-landing itself. */
body.hivelaw-ads-landing-body h2::after,
body.hivelaw-ads-landing-body h4::after {
  display: none !important;
}

/* The sitewide generic rule `h2 { margin-top: 2.5rem }` only gets reset
   to 0 by a second rule scoped to ".hivelaw-section > .hivelaw-container
   > h2:first-child" — i.e. only when a heading is the DIRECT first child
   of its container. Several headings on this page sit one level deeper
   (inside a grid/column wrapper — team section, final CTA), so they fell
   through to the un-reset 2.5rem and produced an inconsistent, oversized
   gap above just those headings. Reset uniformly here regardless of
   nesting depth, rather than fighting the selector's specificity per
   heading. */
body.hivelaw-ads-landing-body h2 {
  margin-top: 0 !important;
}

/* Gravity Forms' own "*" indicates required fields legend is redundant
   here (every field on this short form is required) and reads as clutter
   on a conversion-focused page. Hidden on every form embed on this page,
   not just the hero. */
body.hivelaw-ads-landing-body .gform_required_legend {
  display: none !important;
}

/* The repeat-cta-note/-call classes were designed for the white mid-page
   CTA card (dark text). Inside the hero's dark, translucent form panel
   they need the same light treatment the panel's own labels use, or they
   disappear against the dark background. */
.hivelaw-hero__form-panel .hivelaw-ads-landing__repeat-cta-note {
  color: rgba(255, 255, 255, 0.55) !important;
}
.hivelaw-hero__form-panel .hivelaw-ads-landing__repeat-cta-call {
  color: rgba(255, 255, 255, 0.85) !important;
}

/* Short version box — screenshot-friendly card. No gold top rail (see
   note on .hivelaw-ads-landing__repeat-cta above — one emphasis rail per
   page, already spent on the bottom form-CTA block). */
.hivelaw-ads-landing__short-version-box {
  background: #fff;
  border: 1px solid rgba(26, 26, 32, 0.08);
  border-radius: 14px;
  padding: 32px 28px;
  box-shadow: 0 2px 12px rgba(26, 26, 32, 0.06);
}
.hivelaw-ads-landing__short-version-box p {
  margin: 0 0 12px;
}
.hivelaw-ads-landing__short-version-box p:last-child {
  margin-bottom: 0;
}
/* The phone number link in this box inherits the sitewide default link
   color (gold), which is legible on the site's usual dark backgrounds
   but reads as low-contrast on this box's white background. Match the
   already-approved treatment used elsewhere on this page for links on
   white (repeat-cta-call): dark text, gold underline. */
.hivelaw-ads-landing__short-version-box a {
  color: var(--color-black);
  text-decoration-color: var(--color-gold);
}

/* Team section — 50/50 photo + copy. Degrades to a centered single column
   (text only) when no photo is set. */
.hivelaw-ads-landing__team-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3xl, 48px);
  align-items: center;
}
.hivelaw-ads-landing__team-grid--no-photo {
  grid-template-columns: 1fr;
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}
.hivelaw-ads-landing__team-photo {
  width: 100%;
  height: auto;
  border-radius: 14px;
  box-shadow: 0 4px 20px rgba(26, 26, 32, 0.08);
  display: block;
}
.hivelaw-ads-landing__team-lead {
  font-size: 1.125rem;
}
@media (max-width: 767px) {
  .hivelaw-ads-landing__team-grid {
    grid-template-columns: 1fr;
  }
  .hivelaw-ads-landing__team-photo {
    max-width: 360px;
    margin: 0 auto;
  }
}

/* Family story card */
.hivelaw-ads-landing__story-card {
  background: #fff;
  border-radius: 14px;
  padding: 32px 28px;
  box-shadow: 0 2px 12px rgba(26, 26, 32, 0.06);
}

/* Mid-page repeat CTA cards (not the hero or final CTA — those use the
   sitewide hero-with-form / form-cta-block components instead). Plain
   border, no gold top rail — the brand system caps gold top rails at one
   "emphasis" card per page, and the bottom form-CTA block (a reused
   sitewide component) already carries one. */
.hivelaw-ads-landing__repeat-cta {
  background: #fff;
  border: 1px solid rgba(26, 26, 32, 0.08);
  border-radius: 14px;
  padding: 32px 28px;
  text-align: center;
  max-width: 560px;
  margin: 0 auto;
}
.hivelaw-ads-landing__repeat-cta-heading {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.375rem;
  color: var(--color-black) !important;
  margin: 0 0 16px;
}
.hivelaw-ads-landing__repeat-cta-note {
  font-size: 0.875rem;
  color: var(--color-charcoal) !important;
  margin: 16px 0 12px;
}
.hivelaw-ads-landing__repeat-cta-call {
  display: inline-block;
  font-weight: 600;
  color: var(--color-black) !important;
  text-decoration: underline;
  text-decoration-color: var(--color-gold);
  text-underline-offset: 3px;
}
/* GF inputs default to a per-form gold-fill theme sitewide (a known,
   pre-existing issue — see CLAUDE.md Rule 32) which reads as unreadable on
   a white card. Force readable light styling for this card specifically,
   without touching the shared GF theme files. */
.hivelaw-ads-landing__repeat-cta .ginput_container input,
.hivelaw-ads-landing__repeat-cta .ginput_container select,
.hivelaw-ads-landing__repeat-cta .ginput_container textarea {
  background: #fff !important;
  border: 1.5px solid rgba(26, 26, 32, 0.15) !important;
  color: var(--color-black) !important;
  border-radius: 5px !important;
  padding: 10px 12px !important;
}
.hivelaw-ads-landing__repeat-cta .ginput_container input::placeholder {
  color: rgba(26, 26, 32, 0.4) !important;
}
.hivelaw-ads-landing__repeat-cta .gform_footer input[type="submit"],
.hivelaw-ads-landing__repeat-cta .gform_button {
  width: 100% !important;
  background: var(--color-gold) !important;
  color: var(--color-black) !important;
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  border: none !important;
  border-radius: 5px !important;
}
/* The card's own heading/note/call-link text is deliberately centered
   (text-align: center on the card), but that cascades into the embedded
   Gravity Form's labels and fields too, centering "Name"/"Phone"/"Email"
   above their inputs — a container is fine to center, but its own content
   (form labels, inputs) should stay left-aligned within it. */
.hivelaw-ads-landing__repeat-cta .gform_body,
.hivelaw-ads-landing__repeat-cta .gform_footer {
  text-align: left;
}

/* Package grid */
.hivelaw-ads-landing__package-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-top: 24px;
}
.hivelaw-ads-landing__package-item {
  background: #fff;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 10px rgba(26, 26, 32, 0.05);
}
.hivelaw-ads-landing__package-item h3 {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  margin: 0 0 6px;
  color: var(--color-black);
}
.hivelaw-ads-landing__package-item p {
  font-size: 0.9375rem;
  margin: 0;
  color: var(--color-charcoal);
}
.hivelaw-ads-landing__addons-lead {
  font-weight: 600;
  margin: 32px 0 0;
}

/* Price line — now sits inline at the top of the repeat-CTA section
   rather than as its own thin section (see template comment). */
.hivelaw-ads-landing__price-line {
  text-align: center;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-black);
  margin: 0 0 24px;
}

/* Reviews — Card/Inline per the brand system: no box/shadow, rule-
   separated. A permanent gold rail is an explicitly retired pattern
   (gold is reserved for CTA accents, one emphasis-card top rail per
   page, and eyebrow labels — not a decorative border on static content),
   so these are separated by a plain neutral divider instead. */
.hivelaw-ads-landing__reviews {
  display: grid;
  gap: 0;
  margin-top: 28px;
}
.hivelaw-ads-landing__review {
  margin: 0;
  padding: 20px 0;
  border-top: 1px solid rgba(26, 26, 32, 0.1);
}
.hivelaw-ads-landing__review:first-child {
  border-top: none;
  padding-top: 0;
}
.hivelaw-ads-landing__review p {
  font-style: italic;
  margin: 0 0 8px;
}
.hivelaw-ads-landing__review cite {
  font-style: normal;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-charcoal);
}
.hivelaw-ads-landing__remote-process .hivelaw-ads-landing__review {
  margin-top: 24px;
}

/* Add-on services table — canonical real-table + horizontal-scroll pattern */
.hivelaw-ads-landing__table-wrap {
  overflow-x: auto;
  margin-top: 24px;
  -webkit-overflow-scrolling: touch;
}
.hivelaw-ads-landing__table {
  width: 100%;
  border-collapse: collapse;
  min-width: 560px;
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(26, 26, 32, 0.06);
}
.hivelaw-ads-landing__table thead th {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-align: left;
  padding: 14px 18px;
  background: var(--color-black);
  color: var(--color-gold);
}
.hivelaw-ads-landing__table tbody td {
  padding: 16px 18px;
  border-top: 1px solid rgba(26, 26, 32, 0.08);
  font-size: 0.9375rem;
  color: var(--color-charcoal);
  vertical-align: top;
}
.hivelaw-ads-landing__table tbody td:nth-child(2) {
  font-weight: 600;
  color: var(--color-black);
  white-space: nowrap;
}

/* Questions to ask */
.hivelaw-ads-landing__qta {
  display: grid;
  gap: 20px;
  margin-top: 24px;
}
.hivelaw-ads-landing__qta-item {
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(26, 26, 32, 0.08);
}
.hivelaw-ads-landing__qta-q {
  font-weight: 600;
  color: var(--color-black);
  margin: 0 0 6px;
}
.hivelaw-ads-landing__qta-a {
  margin: 0;
  color: var(--color-charcoal);
}
.hivelaw-ads-landing__qta-close {
  text-align: center;
  margin-top: 32px;
  font-weight: 600;
}
.hivelaw-ads-landing__qta-close a {
  color: var(--color-gold);
}

/* Bare footer — disclaimer only */
.hivelaw-ads-landing__bare-footer {
  padding: 40px 24px 56px;
  background: var(--color-parchment);
}
.hivelaw-ads-landing__disclaimer {
  font-size: 0.75rem;
  line-height: 1.6;
  color: rgba(44, 44, 52, 0.65);
  text-align: center;
  max-width: 720px;
  margin: 0 auto;
}

/* Bold text inside this page's dark sections (hero copy, guarantee) reads
   as barely-there — the sitewide dark-section text color is already close
   to white, so font-weight alone isn't enough contrast to notice at a
   glance. Gold is the site's own established emphasis color (already used
   for CTAs, rails, eyebrows), so it doubles as a legible bold treatment
   here rather than introducing a new color. */
.hivelaw-ads-landing .hivelaw-hero__copy strong,
.hivelaw-ads-landing .hivelaw-hero__copy b,
.hivelaw-ads-landing__guarantee strong,
.hivelaw-ads-landing__guarantee b {
  color: var(--color-gold);
}

/* Dark-mode overrides — cards that stay light-background need explicit
   overrides per the site's dark-mode-cascade rule (body color !important
   cascades from the global dark-mode block). The hero, final CTA, and How
   It Works sections don't need anything here — they reuse sitewide
   components that already handle dark mode themselves. */
@media (prefers-color-scheme: dark) {
  .hivelaw-ads-landing__short-version-box,
  .hivelaw-ads-landing__story-card,
  .hivelaw-ads-landing__repeat-cta,
  .hivelaw-ads-landing__package-item,
  .hivelaw-ads-landing__table {
    background: #1E1E24 !important;
  }
  .hivelaw-ads-landing__short-version-box p,
  .hivelaw-ads-landing__story-card p,
  .hivelaw-ads-landing__package-item p,
  .hivelaw-ads-landing__qta-a,
  .hivelaw-ads-landing__table tbody td {
    color: rgba(209, 207, 203, 0.85) !important;
  }
  .hivelaw-ads-landing__package-item h3,
  .hivelaw-ads-landing__repeat-cta-heading,
  .hivelaw-ads-landing__qta-q,
  .hivelaw-ads-landing__table tbody td:nth-child(2) {
    color: #F1EEE8 !important;
  }
  .hivelaw-ads-landing__repeat-cta-call {
    color: #F1EEE8 !important;
  }
  /* This was missing before — the mid-page CTA card's reassurance note
     kept its light-mode charcoal color even after the card itself went
     dark, making it nearly invisible (charcoal text on a near-black
     card). The hero's own version of this same note already had its own
     always-light override; this card needs the equivalent for dark mode
     specifically, since in light mode it correctly stays dark-on-white. */
  .hivelaw-ads-landing__repeat-cta-note {
    color: rgba(209, 207, 203, 0.85) !important;
  }
  .hivelaw-ads-landing__price-line {
    color: #F1EEE8 !important;
  }
  .hivelaw-ads-landing__review {
    border-top-color: rgba(255, 255, 255, 0.12) !important;
  }
  .hivelaw-ads-landing__review cite {
    color: rgba(209, 207, 203, 0.85) !important;
  }
  .hivelaw-ads-landing__short-version-box a {
    color: #F1EEE8 !important;
  }
  .hivelaw-ads-landing__bare-footer {
    background: #1A1A20 !important;
  }
  .hivelaw-ads-landing__disclaimer {
    color: rgba(209, 207, 203, 0.6) !important;
  }

  /* Undo the light-mode logo-text fix above — in dark mode the page
     background is dark again, so the sitewide light-gray logo color is
     correct here and forcing black would make it disappear instead. */
  .hivelaw-ads-landing__bare-header .hivelaw-header__logo-text {
    color: rgb(209, 207, 203) !important;
  }

  /* In OS dark mode the sitewide dark-mode block makes every section's
     body text a near-white gray, so font-weight alone stops being enough
     contrast to notice bold text anywhere on the page, not just the two
     sections that are intentionally dark in light mode. Cover the whole
     page here, not just .hivelaw-hero__copy/.guarantee. */
  .hivelaw-ads-landing strong,
  .hivelaw-ads-landing b {
    color: var(--color-gold) !important;
  }
}

/* Mobile */
@media (max-width: 767px) {
  .hivelaw-ads-landing__package-grid {
    grid-template-columns: 1fr;
  }
}