/* ==========================================================================
   Responsive — breakpoints

   Loaded LAST so these rules can override global.css and components.css
   without needing !important.

   Paid traffic is predominantly mobile, so every funnel step and CTA is
   designed mobile-first and enhanced upward.
   ========================================================================== */

/* ---------------------------------------------------------------
   <= 1080px — small laptop / large tablet
   ---------------------------------------------------------------- */

@media (max-width: 1080px) {
  .bk-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .bk-grid--3 {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ---------------------------------------------------------------
   <= 980px — mobile navigation breakpoint

   Matches the width site.js uses to reset the nav overlay state, so the
   CSS and the JS must stay in agreement.
   ---------------------------------------------------------------- */

@media (max-width: 980px) {
  .bk-header__inner {
    min-height: 60px;
  }

  .bk-nav-toggle {
    display: block;
  }

  .bk-nav-menu {
    position: fixed;
    inset: 60px 0 0;
    z-index: 998;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--bk-space-lg);
    background-color: var(--bk-white);
    overflow-y: auto;

    /* Hidden until aria-expanded is true */
    visibility: hidden;
    opacity: 0;
    transform: translateX(100%);
    transition: transform 220ms ease, opacity 220ms ease, visibility 220ms;
  }

  .bk-nav-menu--open {
    visibility: visible;
    opacity: 1;
    transform: translateX(0);
  }

  .bk-nav-menu li {
    margin: 0;
    border-bottom: 1px solid rgba(23, 50, 77, 0.08);
  }

  .bk-nav-menu a {
    display: block;
    /* Generous tap target. 48px minimum per WCAG 2.5.5 */
    padding: var(--bk-space-md) 0;
    font-size: var(--bk-fs-lg);
  }

  .bk-nav-menu__actions {
    flex-direction: column;
    align-items: stretch;
    gap: var(--bk-space-md);
    margin-top: var(--bk-space-lg);
  }

  /* Primary CTA pinned to the bottom of the overlay, thumb-reachable */
  .bk-nav-menu__actions .bk-btn--primary {
    order: -1;
  }

  .bk-section,
  .bk-section--lg {
    padding-block: var(--bk-space-2xl);
  }

  .bk-hero__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .bk-hero__actions .bk-btn {
    width: 100%;
  }
}

/* ---------------------------------------------------------------
   <= 780px — tablet
   ---------------------------------------------------------------- */

@media (max-width: 780px) {
  .bk-grid--2 {
    grid-template-columns: 1fr;
  }

  /* Comparison table scrolls rather than collapsing. The side-by-side
     adjacency is the entire persuasive mechanism, so stacked cards would
     destroy it. */
  .bk-compare th:first-child {
    min-width: 160px;
  }

  .bk-compare {
    font-size: var(--bk-fs-sm);
  }
}

/* ---------------------------------------------------------------
   <= 600px — phone
   ---------------------------------------------------------------- */

@media (max-width: 600px) {
  .bk-grid,
  .bk-grid--3 {
    grid-template-columns: 1fr;
  }

  /* Full-width buttons are more reliable one-handed than side-by-side */
  .bk-btn {
    width: 100%;
  }

  .bk-hero__meta {
    flex-direction: column;
    gap: var(--bk-space-xs);
  }

  .bk-intake {
    /* Edge-to-edge on phones. The funnel is the primary mobile surface. */
    max-width: 100%;
  }

  .bk-intake__nav {
    flex-direction: column-reverse;
  }

  .bk-intake__nav .bk-btn {
    width: 100%;
  }

  /* Tables scroll horizontally */
  table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }

  th, td {
    white-space: normal;
  }
}

/* ---------------------------------------------------------------
   Coarse pointers — hover styles are unreliable on touch
   ---------------------------------------------------------------- */

@media (hover: none) {
  /* Suppress hover-only affordances that can leave a sticky state */
  .bk-card:hover {
    transform: none;
  }

  .bk-btn:hover {
    transform: none;
  }

  /* Give tiles a permanent selected state instead of a hover preview */
  .bk-tile__label:hover {
    border-color: #cbd5e1;
  }

  .bk-tile input:checked + .bk-tile__label:hover {
    border-color: var(--bk-navy);
  }
}

/* ---------------------------------------------------------------
   Landscape phones — the funnel must not scroll to reach the button
   ---------------------------------------------------------------- */

@media (max-height: 480px) and (orientation: landscape) {
  .bk-hero,
  .bk-section {
    padding-block: var(--bk-space-xl);
  }

  .bk-intake__question {
    font-size: var(--bk-fs-xl);
  }

  .bk-intake__help {
    margin-bottom: var(--bk-space-md);
  }
}

/* ---------------------------------------------------------------
   Wide screens
   ---------------------------------------------------------------- */

@media (min-width: 1400px) {
  :root {
    --bk-section-y: 6rem;
    --bk-section-y-lg: 9rem;
  }
}

/* ---------------------------------------------------------------
   Forced colors / high contrast

   Respect the OS setting. Borders become the only cue, so they must not
   be removed.
   ---------------------------------------------------------------- */

@media (forced-colors: active) {
  .bk-btn,
  .bk-card,
  .bk-tile__label,
  .bk-accordion__trigger {
    border: 1px solid currentColor;
  }

  .bk-tile input:checked + .bk-tile__label {
    outline: 3px solid currentColor;
  }

  .bk-header { border-bottom: 1px solid currentColor; }
}