/* Site-wide mobile compatibility layer — 2026-10-06.
   Loaded after legacy/page CSS so desktop presentation is preserved. */
html, body { max-width: 100%; }
img, video { max-width: 100%; height: auto; }
iframe { max-width: 100%; }
.content { min-width: 0; }

@media (max-width: 768px) {
  html, body { width: 100%; overflow-x: hidden; }
  body { -webkit-text-size-adjust: 100%; }
  .app { width: 100% !important; min-width: 0 !important; }
  .content {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 5rem 10px 0 !important;
    overflow-wrap: anywhere;
  }
  .content img, .content video, .content object, .content embed {
    max-width: 100% !important;
    height: auto !important;
  }
  .content iframe {
    max-width: 100% !important;
  }
  .content table {
    max-width: 100% !important;
  }
  .content td, .content th {
    max-width: 100vw;
    overflow-wrap: break-word;
    word-break: normal;
  }
  /* Old pages use spacer columns and large inline padding. */
  .content td[style*="padding-right:100px"],
  .content td[style*="padding-right: 100px"] { padding-right: 10px !important; }
  .content td[style*="padding-left:100px"],
  .content td[style*="padding-left: 100px"] { padding-left: 10px !important; }
  /* Prevent decorative absolutely-positioned art from creating page overflow. */
  .content img[style*="position:absolute"],
  .content img[style*="position: absolute"] { max-width: 35vw !important; }
  input, select, textarea, button { max-width: 100%; box-sizing: border-box; }
  textarea { width: 100%; }
  pre { max-width: 100%; overflow-x: auto; white-space: pre-wrap; }
}

@media (max-width: 480px) {
  .content { padding-left: 7px !important; padding-right: 7px !important; }
  h1 { font-size: clamp(1.65rem, 8vw, 2.25rem); }
  h2 { font-size: clamp(1.35rem, 6.5vw, 1.9rem); }
}

@media (max-width: 768px) {
  .content > div, .content div { box-sizing: border-box; max-width: 100%; }
  .w3-modal-content { width: calc(100% - 24px) !important; max-width: 600px !important; }
  .content table[width] { width: 100% !important; }
  .content iframe[width] { width: 100% !important; }
}

/* Detailed mobile audit additions — 2026-10-07.
   These rules target legacy presentation markup without changing desktop layout. */
@media (max-width: 768px) {
  /* Old editor-generated pages frequently use large paragraph/list indents. */
  .content p[style*="margin-left: 40px"],
  .content p[style*="margin-left:40px"],
  .content ul[style*="margin-left: 40px"],
  .content ul[style*="margin-left:40px"],
  .content ol[style*="margin-left: 40px"],
  .content ol[style*="margin-left:40px"] { margin-left: 1.1rem !important; padding-left: 1rem !important; }
  .content p[style*="margin-left: 80px"],
  .content p[style*="margin-left:80px"],
  .content ul[style*="margin-left: 80px"],
  .content ul[style*="margin-left:80px"],
  .content ol[style*="margin-left: 80px"],
  .content ol[style*="margin-left:80px"] { margin-left: 1.1rem !important; padding-left: 1rem !important; }

  /* Keep useful multi-column reference/data tables intact and make them touch-scrollable. */
  .content table.maintext,
  .content table[border="1"][width],
  .content table[border="5"][width] {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    white-space: normal;
  }
  .content table.maintext > tbody,
  .content table[border="1"][width] > tbody,
  .content table[border="5"][width] > tbody { min-width: max-content; }

  /* Tap targets and form controls on the legacy forms. */
  .content input[type="submit"], .content input[type="button"],
  .content input[type="reset"], .content button, .content select {
    min-height: 40px;
  }
  .content input[type="text"], .content input[type="email"],
  .content input[type="tel"], .content input[type="password"],
  .content input[type="number"], .content textarea, .content select {
    width: 100% !important;
  }

  /* Long external URLs/file names should wrap instead of widening the page. */
  .content a { overflow-wrap: anywhere; }

  /* Embedded media should never force a wider viewport. */
  .content iframe, .content object, .content embed {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* ============================================================
   VERIFIED SITE-WIDE MOBILE CONSISTENCY RULES — 2026-10-07
   Merged here because every standalone public PHP page already
   loads /mobile-fixes.css. This avoids editing 81 working pages.
   ============================================================ */
html, body { max-width: 100%; overflow-x: hidden; }
img, video { max-width: 100%; height: auto; }
iframe, object, embed { max-width: 100%; }
input, select, textarea, button { max-width: 100%; box-sizing: border-box; }

@media (max-width: 768px) {
  body { min-width: 0 !important; }
  table { max-width: 100%; }
  td, th { overflow-wrap: anywhere; }
  pre { white-space: pre-wrap; overflow-wrap: anywhere; }
  iframe { width: 100% !important; }
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="password"],
  input[type="number"],
  select,
  textarea { font-size: 16px; }
}

/* Dog listing cards: preserve the site's intended uniform square mobile thumbnails.
   The general responsive image rule must not override these explicit card dimensions. */
@media (max-width: 768px) {
  .content img[style*="width:140px"][style*="height:140px"],
  .content img[style*="width: 140px"][style*="height: 140px"] {
    width: 140px !important;
    height: 140px !important;
    max-width: 140px !important;
    object-fit: cover !important;
  }
  .content img[style*="width:135px"][style*="height:135px"],
  .content img[style*="width: 135px"][style*="height: 135px"] {
    width: 135px !important;
    height: 135px !important;
    max-width: 135px !important;
    object-fit: cover !important;
  }
}