/* ==========================================================================
   DEALCENTRAL — layout & alignment corrections
   --------------------------------------------------------------------------
   Loaded last. Fixes concrete alignment defects found by rendering the pages
   and inspecting them, rather than by reading the markup.

   Each block below records what was wrong, so these can be folded back into
   the source templates later instead of living as corrections.
   ========================================================================== */

/* 1. CATEGORY CARDS =======================================================
   Rendered as a cramped left-aligned row with the icon and label on
   different baselines, despite the markup asking for a centred column.
   Force the intended layout and give every card the same height.
   ========================================================================= */
.home-categories .cat-card,
a.cat-card {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center;
  gap: 12px;
  min-height: 132px;
  padding: 26px 18px !important;
  border-radius: 12px !important;
  border: 1px solid var(--dc-rule, #28506D) !important;
  background: var(--dc-paper, #132A40) !important;
  color: #FFFFFF !important;
  line-height: 1.3;
}

.home-categories .cat-card svg,
a.cat-card svg {
  width: 32px !important;
  height: 32px !important;
  margin: 0 !important;              /* gap handles the spacing now */
  stroke: #F97316 !important;
  flex: 0 0 auto;
}

.home-categories .cat-card:hover,
a.cat-card:hover {
  border-color: #F97316 !important;
  background: #1A3854 !important;
  color: #FFFFFF !important;
}

/* Equal-height cards across the row */
.home-categories .container > div[style*="grid"] { align-items: stretch; }


/* 2. PRIMARY CALL TO ACTION ===============================================
   The trial button rendered forest-green on a forest-green hero — the single
   most important control on the site was nearly invisible. The accent exists
   precisely for this: one loud element per screen.
   ========================================================================= */
.split-hero-actions .btn,
.split-hero-actions .btn-animated {
  background: var(--dc-signal, #E4622E) !important;
  border: 1px solid var(--dc-signal, #E4622E) !important;
  color: #FFFFFF !important;
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: .01em;
  height: 52px !important;
  padding: 0 30px !important;
  border-radius: 6px !important;
  box-shadow: 0 6px 18px rgba(228, 98, 46, .28);
}
.split-hero-actions .btn:hover,
.split-hero-actions .btn-animated:hover {
  background: var(--dc-signal-deep, #C44E1F) !important;
  border-color: var(--dc-signal-deep, #C44E1F) !important;
}

/* 3. HERO ================================================================
   Left column copy sat too wide and the right-hand product shot was clipped
   at the bottom edge of the section.
   ========================================================================= */
.split-hero-content { max-width: 620px; }

.split-hero-content h1 {
  font-size: clamp(2.4rem, 4.4vw, 3.6rem);
  line-height: 1.07;
  margin-bottom: 18px;
}
.split-hero-content > p {
  font-size: 1.06rem;
  line-height: 1.62;
  max-width: 54ch;
  margin-bottom: 30px;
}

.split-hero-section {
  align-items: center;
  padding-top: 64px;
  padding-bottom: 64px;
}

/* Let the product shot finish instead of being cut off */
.split-hero-visual,
.split-hero-media,
.split-hero-section > div:last-child { overflow: visible; }

/* Trust row: avatars and stars were on different baselines */
.split-hero-trust {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 26px;
}
.trust-avatars { display: flex; align-items: center; }
.trust-stars { line-height: 1; margin-bottom: 3px; letter-spacing: 2px; }

/* 4. SECTION RHYTHM ======================================================
   Sections used 80px+ of padding regardless of content weight, which left
   large dead bands between blocks. One consistent scale instead.
   ========================================================================= */
.home-categories,
.home-how-it-works,
.home-testimonials,
.home-trust,
.home-featured,
.home-faq,
.home-pillars,
.home-pricing { padding-top: 58px !important; padding-bottom: 58px !important; }

/* Section heads: tighten the gap between title and its standfirst */
.home-categories h2,
.home-how-it-works h2,
.home-testimonials h2,
.home-trust h2,
.home-featured h2 {
  font-size: clamp(1.7rem, 2.6vw, 2.1rem) !important;
  margin-bottom: 8px !important;
}
.home-categories .container > div:first-child,
.home-how-it-works .container > div:first-child,
.home-testimonials .container > div:first-child { margin-bottom: 30px !important; }

/* 5. EQUAL-HEIGHT CARD GRIDS =============================================
   Testimonial and step cards had ragged bottoms because content length
   differed. Stretch them and push the meta row to the bottom.
   ========================================================================= */
.testimonial-card, .review-card, .step-card, .how-step, .trust-badge {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.testimonial-card .stars,
.testimonial-card > *:last-child { margin-top: auto; }

/* 6. CONTAINER CONSISTENCY ===============================================
   Several sections set their own max-width, so section edges did not line
   up down the page. One measure for all of them.
   ========================================================================= */
.container { max-width: 1200px; margin-inline: auto; padding-inline: 24px; }

/* 7. LIVE ACTIVITY TOAST =================================================
   app.js builds these inline with `border-left: 4px solid var(--primary)`.
   In this token set --primary resolves to WHITE, so the accent stripe was
   invisible against the white card and the toast read as an empty box.
   Give it a real accent, and tighten the type so it reads at a glance.
   ========================================================================= */
#activity-feed { max-width: 320px; }

#activity-feed > div {
  border-left: 3px solid var(--dc-verdant, #374151) !important;
  border-radius: 6px !important;
  border-top-left-radius: 2px !important;
  border-bottom-left-radius: 2px !important;
  background: var(--dc-paper, #FFFFFF) !important;
  color: var(--dc-text, #24312B) !important;
  box-shadow: 0 8px 24px rgba(14, 33, 25, .16) !important;
  font-size: .82rem !important;
  line-height: 1.4;
}

/* 8. MOBILE ==============================================================
   The hero grid did not collapse cleanly below the tablet breakpoint.
   ========================================================================= */
@media (max-width: 900px) {
  .split-hero-section {
    display: block !important;
    padding-top: 40px;
    padding-bottom: 40px;
  }
  .split-hero-content { max-width: none; }
  .split-hero-content h1 { font-size: clamp(2rem, 7vw, 2.6rem); }
  .split-hero-visual, .split-hero-media { margin-top: 34px; }
  .split-hero-actions .btn,
  .split-hero-actions .btn-animated { width: 100%; max-width: 380px; }
}

@media (max-width: 560px) {
  .home-categories .cat-card, a.cat-card { min-height: 112px; padding: 20px 14px !important; }
  .container { padding-inline: 18px; }
}

/* 9. PRICING CARD ALIGNMENT ==============================================
   The featured card sat 3px lower than its neighbour because its accent
   border-top added to the box height. Compensate so the tops line up, and
   equalise the card heights so both CTAs sit on the same line.
   ========================================================================= */
.pricing-grid { align-items: stretch; }
.pricing-card { display: flex; flex-direction: column; }
.pricing-card.featured { margin-top: -3px; }
.pricing-features { flex: 1 1 auto; }
.pricing-card .pricing-cta,
.pricing-card > a:last-child,
.pricing-card > button:last-child { margin-top: auto; }

/* 10. MOBILE OVERFLOW ====================================================
   The hero never collapsed to a single column at ANY width: the
   `@media (max-width: 1024px)` block in index.css re-declares
   `grid-template-columns: 1fr 1fr`, undoing its own responsive intent. The
   dashboard mockup then pushed the whole page wider than the viewport, so
   the headline and card were cut off on phones.

   Grid and flex children default to `min-width: auto`, which lets wide
   content force a track wider than its container — that is the actual
   mechanism here, so min-width:0 is the real fix rather than a hidden
   overflow band-aid.
   ========================================================================= */
@media (max-width: 1024px) {
  .split-hero-section {
    grid-template-columns: 1fr !important;
    padding: 56px 20px !important;
    gap: 36px !important;
  }
  .split-hero-section > * { min-width: 0 !important; max-width: 100% !important; }
  .split-hero-content h1 { overflow-wrap: break-word; hyphens: auto; }
  .css-dashboard-mockup {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

@media (max-width: 900px) {
  .css-dashboard-mockup { flex-direction: column !important; }
  .dash-sidebar { width: 100% !important; height: auto !important; flex-direction: row !important; padding: 12px !important; gap: 10px; }
  .dash-main { width: 100% !important; min-width: 0 !important; }
  /* Inner stat/table grids must also stop forcing width */
  .dash-main > *, .dash-header, .dash-stats { min-width: 0 !important; max-width: 100% !important; }
  .dash-stats { grid-template-columns: 1fr 1fr !important; }
}

/* Final guard: nothing may scroll the page sideways. */
html, body { max-width: 100%; overflow-x: hidden; }

/* 11. MOBILE HEADER ======================================================
   THE actual cause of the horizontal overflow. `.brand-logo` carries
   `min-width: 250px`, and the nav menu never collapsed, so the header row
   alone was wider than a phone viewport and dragged the whole page with it.
   Collapse the nav to the existing hamburger and free the logo's width.
   ========================================================================= */
@media (max-width: 900px) {
  .header .navbar,
  .container.navbar {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-width: 0 !important;
    padding-inline: 16px !important;
  }

  .brand-logo { min-width: 0 !important; flex: 0 1 auto; overflow: hidden; }
  .brand-tagline { display: none !important; }   /* too small to read anyway */

  /* The hamburger already exists in the markup — it was simply never shown. */
  .nav-menu { display: none !important; }
  .nav-menu.open { display: flex !important; }
  .mobile-toggle {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid rgba(255,255,255,.28);
    border-radius: 6px;
    color: #FFFFFF;
    width: 42px; height: 42px;
    flex: 0 0 auto;
  }

  /* Account button keeps its icon but drops the long label */
  .nav-account-actions { flex: 0 0 auto; min-width: 0; }
  #nav-profile-label { font-size: 0; }
  #nav-profile-label::after { content: 'Sign in'; font-size: .82rem; }

  /* Open state: full-width stacked menu under the header */
  .nav-menu.open {
    position: absolute;
    top: 100%; left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--dc-ink, #0B1120);
    border-top: 1px solid rgba(255,255,255,.1);
    padding: 8px 0 14px;
    z-index: 999;
  }
  .nav-menu.open .nav-link,
  .nav-menu.open .nav-dropdown { padding: 12px 18px; width: 100%; }
  .nav-menu.open .nav-dropdown-content { position: static; box-shadow: none; border: 0; background: transparent; padding: 0 0 0 12px; }
  .nav-menu.open .nav-dropdown-item { color: rgba(244,248,245,.8); }
  .header { position: relative; }
}

/* 12. STRUCTURAL CONTAINMENT (mobile) ====================================
   Belt-and-braces: force every structural wrapper between <body> and the
   hero copy to respect the viewport. One of these carries an intrinsic
   width from the original stylesheet; constraining the chain is more robust
   than chasing whichever single rule it is.
   ========================================================================= */
@media (max-width: 1024px) {
  .app-container,
  .main-content,
  .view-panel,
  #home-view,
  .container,
  .split-hero-section,
  .split-hero-content,
  .split-hero-visual {
    width: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
  .split-hero-content h1,
  .split-hero-content p,
  .split-hero-content > div {
    max-width: 100% !important;
    overflow-wrap: break-word;
  }
  .split-hero-content h1 { font-size: clamp(1.9rem, 8vw, 2.6rem) !important; }
  /* The ticker marquee is intentionally wider than the screen — it must clip
     inside its own viewport rather than stretch the page. */
  .live-deal-ticker, .ticker-shell, .ticker-viewport { max-width: 100% !important; overflow: hidden !important; }
}

/* 13. THE ACTUAL OVERFLOW SOURCE =========================================
   `.map-panel` and `.dc-hero-grid` use grid tracks of minmax(520px, …) and
   minmax(420px, …). A minmax() lower bound is a HARD floor — those grids
   simply cannot render narrower than ~520-940px, so on any phone they forced
   the document wider than the viewport and every sibling got clipped with
   them. Verified by bisecting viewport widths: the page composes correctly at
   500px and breaks below it.

   Collapse both to a single fluid column on small screens.
   ========================================================================= */
@media (max-width: 1024px) {
  .map-panel,
  .dc-hero-grid {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
    min-height: 0 !important;
  }
  .map-panel > *,
  .dc-hero-grid > * { min-width: 0 !important; max-width: 100% !important; }
}

/* Any remaining grid whose track floor exceeds a phone viewport. */
@media (max-width: 560px) {
  [class*="grid"] { grid-template-columns: 1fr !important; }
  .dash-stats { grid-template-columns: 1fr 1fr !important; }
}

/* 14. DEAD SPACE ABOVE THE DASHBOARD =====================================
   `.main-content` is padded down by --dc-shell-offset, which is
   calc(--dc-live-height + --dc-promo-height + --dc-header-height).

   Those first two reserve room for the live deal ticker and a promo bar.
   index.php contains NEITHER (zero .live-deal-ticker elements), so the page
   pushed its content down by ~70px of padding for bars that do not exist —
   the empty band above the Buyer Dashboard.

   Zero them out on any page that has no ticker, so the offset equals the real
   header height. :has() keeps this automatic: add a ticker back to a page and
   the reservation returns by itself.
   ========================================================================= */
body:not(:has(.live-deal-ticker)) {
  --dc-live-height: 0px !important;
  --dc-promo-height: 0px !important;
}

/* Pages that DO show the ticker keep their offset; nothing to do there. */

/* The dashboard shell also carried a large fixed min-height from an older
   layout, which left a second gap under short content. Let it size to content
   while still filling the viewport. */
.pro-dashboard {
  min-height: auto !important;
  padding-top: 0 !important;
}
.dc-dashboard-frame {
  min-height: 0 !important;
  margin-top: 18px !important;
}

/* 15. THE GAP, PROPERLY ==================================================
   Zeroing --dc-live-height was not enough: --dc-shell-offset still contributes
   the header height, and on index.php the header is in NORMAL FLOW (no
   position:fixed anywhere in index.css for it). It therefore already occupies
   its own height, and padding .main-content by that amount again produces an
   empty band exactly one header tall — plus whatever the ticker/promo vars add.

   Pages whose header IS fixed (acquisitions.php, dispositions.php — they set
   position:fixed inline and carry a .live-deal-ticker) still need the offset,
   so key off the ticker to tell the two layouts apart.
   ========================================================================= */
body:not(:has(.live-deal-ticker)) .main-content {
  padding-top: 0 !important;
}

/* Sticky bars inside those pages referenced the offset for their own `top`;
   with no fixed header there is nothing to clear. */
body:not(:has(.live-deal-ticker)) [style*="--dc-shell-offset"] {
  top: 0 !important;
}

/* 16. ONE PANEL AT A TIME (belt and braces) ==============================
   dc-viewguard.js stands down extra .active panels, but CSS should not depend
   on JavaScript to avoid a blank screen. Only the LAST active panel in the
   document renders, so a stale one earlier in the DOM cannot push the real
   content down behind an empty band.
   ========================================================================= */
/* Hide an active panel that is FOLLOWED by another active panel, i.e. keep the
   LAST one. Using `~` the other way round would keep the first, which in the
   observed bug is #favorites-view — precisely the empty band we are removing. */
.view-panel.active:has(~ .view-panel.active) { display: none !important; }