/* ============================================ */
/* MOBILE POLISH + SAFARI FIXES                 */
/* ============================================ */
/* === PRIME TIME MOBILE POLISH === */
@media (max-width: 600px) {
  .page { padding: 16px 12px 36px !important; }

  /* Hero: scale down safely */
  h1 { font-size: 2rem !important; }
  h1 span[style*="font-size:4rem"] { font-size: 2.6rem !important; }
  .hero-subtitle-box { padding: 10px 14px !important; margin: 12px auto 8px !important; }
  .hero-subtitle-box span { font-size: 1.25rem !important; }

  /* Reduce big marketing whitespace */
  .credibility-line { margin: 12px auto 24px !important; }

  /* Cards: single column already, but tighten */
  .cards { gap: 12px !important; }
  .card { padding: 12px 12px 12px !important; }

  /* Household quick links: prevent overlap (absolute -> flow) */
  .card.household { position: static !important; }
  .card.household .house-quick-links{
    position: static !important;
    display: flex !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    margin: 6px 0 10px !important;
    white-space: normal !important;
  }
  .card.household .house-quick-links .link-sep { display:none !important; }

  /* Buttons: easier taps */
  button, .btn, .house-action-calc, .house-action-pdf, .calculate-inline{
    min-height: 48px !important;
  }

  /* : keep usable on phone */
  .table-wrapper { max-height: 320px !important; }
  #resultsCard table { font-size: 0.72rem !important; }
  #resultsCard th, #resultsCard td { padding: 6px 4px !important; }

  /* Share box: inputs full width */
  .share-box input.share-input{
    min-width: 0 !important;
    width: 100% !important;
  }
  .share-box > div[style*="display:flex"]{
    flex-direction: column !important;
    align-items: stretch !important;
  }
}


/* === PRINT POLISH === */
@media print {
  /* Slightly larger bottom margin so fixed footer doesn't overlap content */
  .page { padding-bottom: 18mm !important; }

  /* Keep the contact page nicely centered in print */
  .print-contact-inner{ height: 100vh !important; }
}


/* === iPhone Safari sticky table header improvements === */
/* iOS Safari is flaky with sticky <thead>. Make <th> sticky instead. */
@supports (-webkit-touch-callout: none) {
  .table-wrapper{
    -webkit-overflow-scrolling: touch;
  }
  thead{ position: static !important; }
  #resultsCard thead th,
  #detailResultsCard thead th{
    position: sticky !important;
    top: 0 !important;
    z-index: 5 !important;
    background: #f9fafb !important;
  }
}

/* === Mobile CTA spacing polish (CALCULATE pill + instruction) === */
@media (max-width: 600px) {
  .-heading{ margin: 22px 0 14px !important; }
  .-instruction{
    margin: 10px 0 16px !important;
    line-height: 1.25 !important;
    padding: 0 6px !important;
  }
  .calculate-inline{
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 10px 18px !important;
    margin: 10px auto 0 !important;
  }
  /* Make the instruction feel centered even when line-wrapping */
  .-instruction{ text-align: center !important; }
}


/* === Mobile table swipe hint + edge fade === */
.mobile-swipe-hint{ display:none; font-weight:700; color:#374151; margin: 6px 0 10px; }
@media (max-width: 600px){
  .mobile-swipe-hint{ display:block; text-align:center; font-size:0.9rem; }
  .table-wrapper{ position: relative; }
  .table-wrapper::after{
    content:"";
    position:absolute;
    top:0; right:0;
    width:24px; height:100%;
    pointer-events:none;
    background: linear-gradient(to left, rgba(244,244,247,1), rgba(244,244,247,0));
  }
}

/* === PRINT: Page X of Y in footer === */
@media print{
  .print-footer::after{
    content: "  •  Page " counter(page) " of " counter(pages);
  }
}


/* === PRINT FIX: keep final detailed chart from spilling onto an extra page === */
@media print {
  /* Make sure the last card (detailed view) does NOT force a trailing page */
  #detailResultsCard{
    page-break-after: auto !important;
    break-after: auto !important;
    margin-bottom: 0 !important;
  }

  /* Slightly tighten the detailed table so it fits on the last page */
  #detailResultsCard table{
    font-size: 0.52rem !important;
  }
  #detailResultsCard th,
  #detailResultsCard td{
    padding: 1px 2px !important;
  }

  /* Reduce bottom padding a touch (footer is fixed) */
  .page{
    padding-bottom: 12mm !important;
  }
}