/*
 * MOBILE-RESPONSIVE OVERRIDES
 * Add this to your Hugo theme's custom CSS file.
 *
 * If your theme supports custom CSS, paste this into:
 *   - assets/css/custom.css
 *   - static/css/custom.css
 *   - Or wherever your theme loads custom styles
 *
 * If your theme has no custom CSS hook, create:
 *   layouts/partials/head-custom.html
 * and add:
 *   <link rel="stylesheet" href="/css/mobile-fixes.css">
 * then put this file at static/css/mobile-fixes.css
 */

/* ============================
   RESPONSIVE TABLES
   ============================ */

/* Wrap all tables in a scrollable container */
.content table,
.article table,
.post-content table,
article table,
.markdown table,
main table {
  display: block;
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch; /* smooth scroll on iOS */
  border-collapse: collapse;
  margin: 1.5rem 0;
  font-size: 0.95rem;
}

/* Table cells — prevent crushing */
.content td,
.content th,
article td,
article th,
main td,
main th {
  padding: 0.65rem 0.85rem;
  white-space: nowrap; /* prevent wrapping inside cells */
  border: 1px solid #e2e2e2;
  text-align: left;
}

/* Allow wrapping on cells that need it (first column, descriptions) */
.content td:first-child,
article td:first-child,
main td:first-child {
  white-space: normal;
  min-width: 120px;
}

/* Header row styling */
.content th,
article th,
main th {
  background-color: #f8f9fa;
  font-weight: 600;
  position: sticky;
  top: 0;
}

/* Zebra striping for readability */
.content tr:nth-child(even),
article tr:nth-child(even),
main tr:nth-child(even) {
  background-color: #f8f9fa;
}

/* On small screens, let table scroll horizontally */
@media (max-width: 768px) {
  .content table,
  article table,
  main table {
    font-size: 0.85rem;
  }

  .content td,
  .content th,
  article td,
  article th,
  main td,
  main th {
    padding: 0.5rem 0.65rem;
  }
}

/* ============================
   RESPONSIVE TYPOGRAPHY
   ============================ */

/* Body text — comfortable reading on phone */
@media (max-width: 768px) {
  body {
    font-size: 16px;        /* prevents iOS zoom on input focus */
    line-height: 1.7;
  }

  h1 {
    font-size: 1.6rem;
    line-height: 1.25;
  }

  h2 {
    font-size: 1.3rem;
    line-height: 1.3;
  }

  h3 {
    font-size: 1.1rem;
    line-height: 1.35;
  }

  /* Prevent long words from overflowing on narrow screens */
  p, li, td {
    overflow-wrap: break-word;
    word-wrap: break-word;
  }
}

/* ============================
   CONTENT WIDTH & SPACING
   ============================ */

/* Ensure content doesn't touch screen edges */
@media (max-width: 768px) {
  .content,
  .post-content,
  .article-content,
  article,
  main {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  /* Add breathing room between sections */
  h2 {
    margin-top: 2.5rem;
    margin-bottom: 1rem;
  }

  h3 {
    margin-top: 1.8rem;
    margin-bottom: 0.75rem;
  }

  /* Lists — enough spacing to tap on mobile */
  ol li,
  ul li {
    margin-bottom: 0.75rem;
    line-height: 1.6;
  }

  /* Bold cost numbers — make them pop on small screens */
  strong {
    color: #1a1a1a;
  }
}

/* ============================
   IMAGES (if added later)
   ============================ */

img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 1rem 0;
}

/* ============================
   LINKS — bigger tap targets on mobile
   ============================ */

@media (max-width: 768px) {
  a {
    padding: 2px 0;
    /* Ensures links are easy to tap */
  }
}

/* ============================
   FAQ SECTION — better mobile spacing
   ============================ */

@media (max-width: 768px) {
  /* FAQ questions as H3s need clear separation */
  h3 + p {
    margin-top: 0.5rem;
  }

  /* Extra spacing between FAQ items */
  h3 {
    padding-top: 0.5rem;
    border-top: 1px solid #eee;
  }

  /* First H3 in a section doesn't need top border */
  h2 + h3 {
    border-top: none;
    padding-top: 0;
  }
}

/* ============================
   HORIZONTAL RULES
   ============================ */

hr {
  border: none;
  border-top: 1px solid #e2e2e2;
  margin: 2rem 0;
}

/* ============================
   PRINT STYLES (bonus — for homeowners who print)
   ============================ */

@media print {
  table {
    display: table;
    overflow: visible;
    page-break-inside: avoid;
  }

  h2, h3 {
    page-break-after: avoid;
  }

  a[href]:after {
    content: " (" attr(href) ")";
    font-size: 0.8em;
    color: #666;
  }
}