/* =========================================================================
   www.ishelters.com — mobile responsive layer for the marketing shell.
   Desktop (> 768px) is completely untouched. Brand red #BB141B unchanged.
   ========================================================================= */

/* ---- quality floor: visible keyboard focus (all viewports) ---- */
#sections li a:focus-visible,
#content form#form input:focus-visible,
#content form#form textarea:focus-visible {
  outline: 3px solid #BB141B;
  outline-offset: 2px;
}

/* ---- quality floor: respect reduced-motion ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

@media only screen and (max-width: 768px) {

  html, body { max-width: 100%; overflow-x: hidden; }
  body { font-size: 15px; line-height: 1.5; }

  /* fixed 800px shell -> fluid, drop the desktop background images */
  div#container {
    width: auto !important;
    max-width: 100% !important;
    margin: 0 !important;
    background-image: none !important;
    box-sizing: border-box;
  }

  /* header: centred, logo scales to the viewport */
  div#header {
    width: auto !important;
    height: auto !important;
    text-align: center;
    padding: 8px 0 !important;
  }
  div#header img { max-width: 90vw !important; height: auto !important; }

  /* hide the half-built overlay hamburger; we use a clean top nav instead */
  .button, #button, .overlay, .buttonDC { display: none !important; }

  /* left sidebar nav -> full-width row of tappable red pills under the header.
     The site's own JS adds .divsectionsDC (display:none) + shows a full-screen
     overlay menu on mobile; we override that and keep this clean inline nav. */
  div#sections,
  div#sections.divsectionsDC {
    display: block !important;
    float: none !important;
    width: 100% !important;
    box-sizing: border-box;
    font-weight: 600;
  }
  div#sections ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    margin: 6px 8px 10px !important;
    padding: 0 !important;
  }
  div#sections li {
    list-style: none !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  div#sections li a {
    display: block;
    padding: 9px 13px !important;
    background: #BB141B;
    color: #ffffff !important;
    border-radius: 6px;
    font-size: 14px;
    text-decoration: none !important;
    background-image: none !important;   /* kill the house.jpg hover images */
  }
  div#sections li a:active { background: #8f0f14; }

  /* main content: drop the 150px sidebar offset + bg image, breathe full-width */
  div#content {
    margin: 8px !important;
    padding: 10px !important;
    background-image: none !important;
    border-left: none !important;
    box-sizing: border-box;
  }

  /* headings: remove the desktop right-margin that reserved space for images */
  #content h1, h1 { margin: 0 0 10px 0 !important; font-size: 24px; }
  #content h2, h2 { margin: 14px 0 8px 0 !important; font-size: 20px; }

  /* any inline marketing images (cat/dog) stay inside the column */
  #content img { max-width: 100% !important; height: auto !important; float: none !important; }

  /* footer validation badges wrap instead of overflowing */
  div#footer { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
  div#footer a img { max-width: 100%; height: auto; }

  /* ---------- signup / contact forms -> stacked, full-width, tappable ---------- */
  div#content form#form { width: auto !important; }
  div#content form#form label.field {
    display: block !important;
    width: auto !important;
    float: none !important;
    text-align: left !important;
    font-weight: 600;
    margin: 12px 0 5px !important;
  }
  div#content form#form input,
  div#content form#form textarea {
    width: 100% !important;
    box-sizing: border-box !important;
    font-size: 16px !important;   /* >=16px stops iOS zoom-on-focus */
    padding: 11px 12px !important;
    border: 1px solid #cfcfcf;
    border-radius: 6px;
  }
  div#content form#form textarea { min-height: 120px; }
  div#content form#form div#g-recaptcha-outer { transform: scale(0.86); transform-origin: 0 0; }
  div#content form#form input#submit {
    width: 100% !important;
    background: #BB141B !important;
    color: #fff !important;
    border: none !important;
    border-radius: 6px;
    padding: 13px !important;
    font-size: 17px !important;
    font-weight: 600;
    cursor: pointer;
    margin-top: 14px !important;
  }
  div#content form#form input#submit:active { background: #8f0f14 !important; }

  /* ---------- login portal: the iShelter / adminShelter logo links ---------- */
  #content div#login { text-align: center; margin-bottom: 18px; }
  #content div#login a { display: block; }
  #content img#ishelter,
  #content img#admin {
    display: block;
    max-width: 100% !important;
    height: auto !important;
    margin: 14px auto !important;   /* drop the desktop 200px left margin, stack + centre */
    padding: 0 !important;
  }

  /* ---------- generic tables (e.g. prices) scroll instead of breaking ---------- */
  #content table { max-width: 100% !important; display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}