/* ============================
   Global Site Styles
   ============================ */

/* Header & Footer Logo Sizing */
header img,
footer img {
  height: 48px;
  width: auto;
}

/* Ensure images never overflow containers */
img {
  max-width: 100%;
  height: auto;
}
/* ================================
   MOBILE: Homepage H1 wrap fix
   Prevents "A Personal Injury Lawyer You Can Trust" from being clipped on small screens.
   ================================ */
@media (max-width: 640px) {
  /* Homepage hero only */
  #home h1 {
    white-space: normal !important;
    overflow-wrap: anywhere;
    word-break: break-word;
    max-width: 100%;
  }
}

/* ================================
   MOBILE: Sticky CTA Bar button sizing
   Makes practice-area pages match the larger homepage mobile CTA buttons.
   ================================ */
@media (max-width: 767px) {
  /* Target the sticky bar container used across pages */
  .md\:hidden.fixed.bottom-0.inset-x-0.z-50 a.flex-1 {
    padding: 1rem 1.25rem !important; /* py-4 px-5 */
    font-size: 1rem !important;
    line-height: 1.25rem !important;
    color: #1E3A8A !important; /* navy */
  }
}

/* ================================
   MOBILE: Remove bottom "Free Consultation" text-only CTA on practice pages
   (Prevents the confusing text-only section that has no visible button on mobile)
   ================================ */
@media (max-width: 767px) {
  /* This section contains a desktop-only button (hidden on mobile), leaving only text.
     We hide the entire section on mobile. */
  section.bg-gray-100.py-14:has(a[href="#contact-form-top"].hidden) {
    display: none !important;
  }
}

/* ================================
   HERO IMAGES: Show entire image (no cropping)
   This restores the earlier "no-crop" behavior site-wide.
   ================================ */

/* Practice-area hero images live inside <header class="hero-gradient ..."> */
header.hero-gradient img.object-cover {
  object-fit: contain !important;
  object-position: center !important;
  width: 100% !important;
  height: 100% !important;
}

/* Neutralize any bottom-anchoring that would cut off heads */
header.hero-gradient img.object-bottom {
  object-position: center !important;
}