/* ============================================
   MOBILE RESPONSIVE FIXES
   Cándido Ramírez & Asesores Jurídicos
   ============================================ */

/* ---- GLOBAL MOBILE FIXES (max-width: 768px) ---- */
@media (max-width: 768px) {

  /* Prevent horizontal overflow on all pages */
  html, body {
    max-width: 100vw;
    overflow-x: hidden;
  }

  /* ---- NAVBAR ---- */
  /* Hide desktop nav links on mobile (hamburger menu is shown) */
  nav .hidden.md\:flex {
    display: none !important;
  }

  /* Make logo smaller on mobile */
  nav a[href="/"] > div {
    height: 3.5rem !important;
    width: 10rem !important;
  }

  /* Mobile menu logo - match navbar logo size */
  #premium-mobile-menu img[alt*="Cándido"],
  #premium-mobile-menu img[alt*="Candido"],
  #premium-mobile-menu img[src*="logo"] {
    height: 3.5rem !important;
    width: auto !important;
    object-fit: contain !important;
  }

  /* ---- HERO SECTIONS ---- */
  /* Reduce hero padding on mobile */
  section[style*="padding-top: 10rem"] {
    padding-top: 7rem !important;
    padding-bottom: 3rem !important;
  }

  /* Scale down hero titles */
  h1.text-5xl,
  h1.text-6xl,
  h1.text-7xl,
  .text-5xl,
  .text-6xl,
  .text-7xl {
    font-size: clamp(1.8rem, 8vw, 2.5rem) !important;
    line-height: 1.15 !important;
  }

  /* Scale down section titles */
  h2.text-4xl,
  h2.text-5xl,
  .text-4xl {
    font-size: clamp(1.5rem, 6vw, 2rem) !important;
    line-height: 1.2 !important;
  }

  h3.text-2xl,
  h3.text-3xl,
  .text-3xl {
    font-size: clamp(1.2rem, 5vw, 1.7rem) !important;
  }

  /* ---- HOMEPAGE: Hero navigation links ---- */
  /* The large numbered links (LA FIRMA, EQUIPO, etc.) - make smaller on mobile */
  section .text-4xl.md\:text-6xl,
  section .text-3xl.md\:text-5xl {
    font-size: 1.3rem !important;
    line-height: 1.4 !important;
  }

  /* ---- CONTAINERS & PADDING ---- */
  /* Reduce excessive padding on mobile */
  .p-12 {
    padding: 1.5rem !important;
  }
  .p-20, .lg\:p-20, .xl\:p-24 {
    padding: 1.5rem !important;
  }
  .px-8 {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
  .px-16, .md\:px-16 {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
  .py-24 {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
  }

  /* ---- GRIDS ---- */
  /* Force single column on mobile */
  .grid.md\:grid-cols-2,
  .grid.md\:grid-cols-3,
  .grid.md\:grid-cols-4 {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }

  /* ---- CONTACT FORM ---- */
  /* Make contact form full width on mobile (no white side gaps) */
  section.flex.justify-center > div.max-w-3xl {
    max-width: 100% !important;
  }

  /* ---- TOUCH TARGETS ---- */
  /* Ensure minimum 44px touch targets for links/buttons */
  nav a, 
  footer a,
  button,
  a.inline-flex {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  /* News category tabs - bigger touch targets */
  .flex.gap-3 > button,
  .flex.gap-4 > button,
  .flex.gap-2 > button {
    min-height: 44px !important;
    padding: 0.5rem 1rem !important;
  }

  /* ---- FOOTER ---- */
  /* Stack footer columns - 2 cols on tablet, 1 on phone */
  footer .grid.md\:grid-cols-4 {
    grid-template-columns: 1fr 1fr !important;
    gap: 2.5rem !important;
  }

  /* Footer logo section takes full width */
  footer .grid.md\:grid-cols-4 > div:first-child {
    grid-column: 1 / -1 !important;
    text-align: center !important;
  }

  /* Constrain footer logo */
  footer a[href="/"] {
    display: flex !important;
    justify-content: center !important;
  }
  footer a[href="/"] > img,
  footer a[href="/"] {
    max-width: 220px !important;
    height: auto !important;
    max-height: 80px !important;
  }
  footer a[href="/"].block.relative {
    width: 220px !important;
    height: 80px !important;
  }

  /* Center footer description */
  footer p.text-gray-400.max-w-xs {
    max-width: 100% !important;
    text-align: center !important;
    margin: 0 auto !important;
  }

  /* Footer copyright bar - stack vertically */
  footer .flex.md\:flex-row {
    flex-direction: column !important;
    text-align: center !important;
    gap: 0.75rem;
  }

  /* Social icons centered */
  footer .flex.space-x-4 {
    justify-content: flex-start;
  }

  /* Footer section titles */
  footer h4 {
    font-size: 0.75rem !important;
  }

  /* ---- TEAM PAGE ---- */
  /* Constrain hero images */
  section img[alt*="Cándido"],
  section img[alt*="equipo"] {
    max-height: 60vh !important;
    object-fit: cover !important;
  }

  /* ---- PRACTICE AREAS ---- */
  /* Cards need full width on mobile */
  .lg\:w-1\/2,
  .lg\:w-1\/3 {
    width: 100% !important;
  }

  /* ---- SPACING REDUCTIONS ---- */
  .mb-16 {
    margin-bottom: 2rem !important;
  }
  .mb-12 {
    margin-bottom: 1.5rem !important;
  }
  .space-x-10 > * + * {
    margin-left: 1rem !important;
  }

  /* ---- OFFICE INFO SECTION ---- */
  /* Horario card padding */
  .p-10 {
    padding: 1.5rem !important;
  }

  /* ---- IMAGES ---- */
  /* Prevent images from overflowing */
  img {
    max-width: 100%;
    height: auto;
  }

  /* ---- TEXT READABILITY ---- */
  /* Base text slightly larger for mobile readability */
  .text-sm {
    font-size: 0.875rem !important;
  }
  .text-xs {
    font-size: 0.75rem !important;
  }

  /* Tracking adjustments for small screens */
  .tracking-\[0\.3em\] {
    letter-spacing: 0.15em !important;
  }
  .tracking-\[0\.2em\] {
    letter-spacing: 0.1em !important;
  }
}

/* ---- SMALL PHONES (max-width: 380px) ---- */
@media (max-width: 380px) {
  h1 {
    font-size: 1.6rem !important;
  }

  .p-12, .p-20 {
    padding: 1rem !important;
  }

  nav a[href="/"] > div {
    height: 3rem !important;
    width: 8rem !important;
  }
}

/* ---- PHONES FOOTER (max-width: 480px) ---- */
@media (max-width: 480px) {
  footer .grid.md\:grid-cols-4 {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
    text-align: center !important;
  }

  footer .flex.space-x-4 {
    justify-content: center !important;
  }

  footer ul {
    text-align: center !important;
  }

  footer li.flex {
    justify-content: center !important;
  }
}