/**
 * DogTrekker Mobile Usability Fixes
 * Based on March 2026 mobile audit
 * ---------------------------------
 * P1: CTA button heights -> 48px+
 * P3: Nav/footer tap targets -> 44px+
 * P7: Sticky CTA bar on mobile listings
 * P4: Inline email capture styling
 */

/* ================================================================
   P1 -- SPONSOR LISTING CTA BUTTONS (48px minimum)
   ================================================================ */

@media (max-width: 768px) {
  .cell-inner-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0;
    margin: 0;
    list-style: none;
  }

  .cell-inner-list li {
    flex: 1 1 calc(50% - 4px);
    min-width: 0;
  }

  .cell-inner-list li a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 12px 16px;
    font-size: 16px;
    text-align: center;
    text-decoration: none;
    border-radius: 4px;
    background: #66808D;
    color: #fff;
    font-weight: 600;
    transition: background 0.15s;
  }

  .cell-inner-list li a:hover,
  .cell-inner-list li a:active {
    background: #4f6b76;
    color: #fff;
  }

  /* Phone number links in listing info */
  .shetler-listng a[href^="tel:"] {
    display: inline-block;
    min-height: 48px;
    padding: 12px 20px;
    font-size: 16px;
    line-height: 1.5;
  }
}


/* ================================================================
   P3 -- NAV & FOOTER TAP TARGETS (44px minimum)
   ================================================================ */

@media (max-width: 768px) {
  /* Mobile menu drawer links */
  .nav-mobile li a {
    display: block;
    min-height: 44px;
    padding: 12px 20px;
    font-size: 16px;
    line-height: 1.25;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  }

  /* Footer navigation links */
  footer .site-nav li a,
  footer #AccessibleNav li a {
    display: inline-block;
    min-height: 44px;
    padding: 10px 8px;
    font-size: 14px;
    line-height: 1.5;
  }

  /* Footer legal links (Privacy, Accessibility, etc.) */
  .dtk-footer-legal-links a {
    display: inline-block;
    min-height: 44px;
    padding: 10px 6px;
    line-height: 1.5;
  }

  /* Footer social icons -- keep at 44px minimum */
  .social-icons ul li a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
  }

  .social-icons ul li a img,
  .social-icons ul li a svg {
    width: 28px;
    height: 28px;
  }

  /* Mobile search button */
  .search-t_btn {
    min-width: 44px;
    min-height: 44px;
  }

  /* Newsletter signup button */
  .sign-up-btn {
    min-height: 48px;
    padding: 12px 24px;
    font-size: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* Mobile top buttons (Stories, Adopt) */
  .mobile-top-buttons a {
    min-height: 44px;
    padding: 10px 12px;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
  }
}


/* ================================================================
   P7 -- STICKY CTA BAR ON MOBILE SPONSOR LISTINGS
   ================================================================ */

@media (max-width: 768px) {
  .dtk-sticky-cta-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    gap: 8px;
    padding: 8px 16px;
    padding-bottom: calc(8px + env(safe-area-inset-bottom));
    background: #fff;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.12);
    z-index: 10000;
  }

  .dtk-sticky-cta-bar a {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 12px 8px;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    border-radius: 4px;
    text-align: center;
    white-space: nowrap;
  }

  .dtk-sticky-cta-bar .dtk-cta-call {
    background: #66808D;
    color: #fff;
  }

  .dtk-sticky-cta-bar .dtk-cta-book {
    background: #000;
    color: #fff;
  }

  .dtk-sticky-cta-bar .dtk-cta-web {
    background: #E8B74A;
    color: #000;
  }

  /* Bottom padding so sticky bar doesn't cover content */
  body.single-directories {
    padding-bottom: 72px;
  }
}

@media (min-width: 769px) {
  .dtk-sticky-cta-bar {
    display: none;
  }
}


/* ================================================================
   P4 -- INLINE EMAIL CAPTURE FORM
   ================================================================ */

.dtk-email-capture {
  background: #f5f3ee;
  border-radius: 8px;
  padding: 20px 24px;
  margin: 2rem 0;
  text-align: center;
}

.dtk-email-capture h3 {
  margin: 0 0 4px;
  font-size: 1.15rem;
}

.dtk-email-capture p {
  margin: 0 0 12px;
  font-size: 0.9rem;
  color: #555;
}

/* Gravity Forms overrides inside email capture */
.dtk-email-capture .gform_wrapper {
  margin: 0 !important;
  padding: 0 !important;
  max-width: 100% !important;
}
.dtk-email-capture .gform_wrapper form {
  margin: 0 !important;
  padding: 0 !important;
}
.dtk-email-capture .gform_body {
  padding: 0 !important;
  margin: 0 !important;
}
.dtk-email-capture .gform_fields {
  display: flex !important;
  gap: 8px;
  max-width: 680px;
  margin: 0 auto !important;
  padding: 0 !important;
  flex-wrap: nowrap;
  align-items: flex-end;
}
.dtk-email-capture .gfield {
  margin: 0 !important;
  padding: 0 !important;
}
.dtk-email-capture .gfield--type-email {
  flex: 1 !important;
}
.dtk-email-capture .gfield--type-email .gfield_label {
  display: none !important;
}
.dtk-email-capture .gfield--type-email input[type="email"] {
  width: 100% !important;
  min-height: 48px;
  padding: 12px 16px !important;
  font-size: 16px !important;
  border: 1px solid #ccc !important;
  border-radius: 4px !important;
  -webkit-appearance: none;
}
.dtk-email-capture .gfield--type-captcha {
  position: absolute !important;
  left: -9999px !important;
}
.dtk-email-capture .gfield_visibility_hidden,
.dtk-email-capture .gfield--type-honeypot,
.dtk-email-capture .gfield--type-html {
  display: none !important;
}
.dtk-email-capture .gfield--type-name {
  flex: 0 0 180px !important;
}
.dtk-email-capture .gfield--type-name .gfield_label,
.dtk-email-capture .gfield--type-name .ginput_complex label {
  display: none !important;
}
.dtk-email-capture .gfield--type-name input[type="text"] {
  width: 100% !important;
  min-height: 48px;
  padding: 12px 16px !important;
  font-size: 16px !important;
  border: 1px solid #ccc !important;
  border-radius: 4px !important;
  -webkit-appearance: none;
}
.dtk-email-capture .gfield--type-name .ginput_complex {
  display: block !important;
}
.dtk-email-capture .gfield--type-name .name_prefix,
.dtk-email-capture .gfield--type-name .name_middle,
.dtk-email-capture .gfield--type-name .name_last,
.dtk-email-capture .gfield--type-name .name_suffix {
  display: none !important;
}
.dtk-email-capture .gform-footer,
.dtk-email-capture .gform_footer {
  max-width: 680px;
  margin: 0 auto !important;
  padding: 8px 0 0 !important;
}
.dtk-email-capture .gform_footer input[type="submit"] {
  min-height: 48px;
  padding: 12px 28px !important;
  font-size: 16px !important;
  font-weight: 600;
  background: var(--dtk-primary, #66808D) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 4px !important;
  cursor: pointer;
  white-space: nowrap;
  transition: opacity 0.15s;
  width: 100%;
}
.dtk-email-capture .gform_footer input[type="submit"]:hover {
  opacity: 0.85;
}

@media (max-width: 480px) {
  .dtk-email-capture .gform_fields {
    flex-direction: column;
  }
  .dtk-email-capture .gfield--type-name {
    flex: 1 1 100% !important;
  }
}


/* ================================================================
   P6 -- IMAGE LAZY LOADING PLACEHOLDER
   ================================================================ */

img[loading="lazy"] {
  background: #f0f0f0;
}

/* Hide reCAPTCHA badge — required text notice is in email-capture form */
.grecaptcha-badge { visibility: hidden !important; }