/**
 * Mobile UX Fixes - 15/02/2026
 * sousaadvogados.adv.br
 */

/* ============================================
   MOBILE (max-width: 740px)
   ============================================ */
@media screen and (max-width: 740px) {

  /* FIX 1: Hero H1 overflow */
  .banner .banner-txt .h1 {
    font-size: 1.875rem !important;
    line-height: 115% !important;
    word-break: break-word;
  }

  /* FIX 2: Banner text container */
  .banner .banner-txt {
    padding-right: 20px !important;
    max-width: 100%;
    overflow: hidden;
  }
  .banner .banner-txt p {
    font-size: 1rem !important;
    line-height: 150% !important;
    word-break: break-word;
  }

  /* FIX 3: Logo - icon + "Sousa" text */
  .header-logo {
    max-width: 120px !important;
    max-height: 40px !important;
    overflow: hidden;
  }
  .header-logo img {
    width: auto;
    height: 38px;
    object-fit: contain;
    object-position: left center;
  }

  /* FIX 4: Hide video button on mobile */
  .hero .btn-video,
  .btn-video.video-lightbox__activate {
    display: none !important;
  }

  /* FIX 5: Hide social icons in hero (reduce gap) */
  .hero .icons {
    display: none !important;
  }

  /* FIX 6: Reduce hero bottom gap */
  .hero {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
  }

  /* FIX 7: Reduce section spacing */
  .secao {
    margin-top: 40px !important;
  }
  .cta-med.secao {
    margin-top: 60px !important;
  }
  .hero + .ajudar {
    margin-top: 40px !important;
  }

  /* FIX 8: Reduce internal gaps */
  .secao h2 {
    margin-bottom: 1rem !important;
  }
  .secao p {
    margin-bottom: 0.75rem !important;
  }

  /* FIX 9: Card images height - "Como Podemos Ajudar" */
  .cards-coloridos-foto-img {
    max-height: 200px !important;
    overflow: hidden !important;
  }
  .cards-coloridos-foto-img img {
    object-fit: cover !important;
    object-position: top center !important;
    max-height: 200px !important;
  }

  /* FIX 10: Experiencia/Premio section */
  .experiencia__img-wrapper .span-card {
    max-width: 60%;
  }
  .experiencia__img::after {
    width: 95%;
  }
  .experiencia img,
  #experiencia img {
    max-width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
  }

  /* FIX 11: Logos "Na Midia" */
  #midia img {
    max-width: 100%;
    height: auto;
    object-fit: contain;
  }
  #midia .grid-5 {
    grid-template-columns: 1fr 1fr !important;
    gap: 30px 15px !important;
    padding: 0 10px;
  }
  #midia ul {
    margin-top: 40px;
  }

  /* FIX 12: CTA MED */
  .cta-med .cta-med-txt p {
    font-size: 1.25rem !important;
    line-height: 130% !important;
  }
  .cta-med .cta-med-img img {
    max-width: 100%;
    height: auto;
  }

  /* FIX 13: CTA Final */
  .cta-final__txt {
    padding: 40px 20px !important;
  }
  .cta-final__txt p {
    margin: 15px 0 !important;
  }

  /* FIX 14: Footer - 2 columns */
  .footer-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 1.5rem !important;
  }
  .footer-grid__logo {
    grid-column: 1 / -1 !important;
  }
  .footer-grid__social {
    grid-column: 1 / -1 !important;
  }

  /* FIX 15: Blog excerpts - limit to 3 lines */
  .card-blog p,
  .card-post p {
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }
}

/* ============================================
   TABLET (max-width: 1140px)
   ============================================ */
@media screen and (max-width: 1140px) {
  .banner .banner-txt .h1 {
    word-break: break-word;
  }
  .banner .banner-txt {
    padding-right: 20px;
  }
}

/* ============================================
   ALL SCREENS
   ============================================ */

/* WhatsApp Floating Button */
.whatsapp-float {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 56px;
  height: 56px;
  background: #25D366;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
  z-index: 9999;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  text-decoration: none;
}
.whatsapp-float:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 16px rgba(0,0,0,0.3);
}
.whatsapp-float svg {
  width: 28px;
  height: 28px;
}

/* ============================================
   BLOG / SINGLE POST — MOBILE FIXES (15/02/2026)
   ============================================ */

@media (max-width: 740px) {

  /* FIX 1: H1 muito grande nos posts — reduzir para 28px */
  .single-post h1,
  .single-post .entry-title,
  .single-post .post-title,
  article h1,
  .blog-content h1 {
    font-size: 28px !important;
    line-height: 1.25 !important;
    margin-bottom: 12px !important;
  }

  /* FIX 2: H2 proporcionais */
  .single-post h2,
  article h2,
  .blog-content h2 {
    font-size: 22px !important;
    line-height: 1.3 !important;
  }

  /* FIX 3: H3 proporcionais */
  .single-post h3,
  article h3,
  .blog-content h3 {
    font-size: 19px !important;
    line-height: 1.3 !important;
  }

  /* FIX 4: Hero/banner image altura máxima */
  .single-post .post-thumbnail img,
  .single-post .entry-thumbnail img,
  .single-post .wp-post-image,
  .page .post-thumbnail img,
  .page .wp-post-image,
  .banner-single img,
  .hero-blog img {
    max-height: 250px !important;
    object-fit: cover !important;
    width: 100% !important;
  }

  /* FIX 5: Tap targets mínimo 44px */
  .single-post a,
  .blog-content a,
  .entry-content a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    padding: 4px 0;
  }

  /* FIX 5b: Não aplicar inline-flex em imagens/blocos */
  .single-post a img,
  .entry-content a img,
  .entry-content a.wp-block-button__link {
    display: inline;
    min-height: auto;
    padding: 0;
  }

  /* FIX 6: Espaçamento entre header e conteúdo */
  .single-post .entry-header,
  .single-post .post-header,
  article header {
    padding-top: 16px !important;
    margin-bottom: 16px !important;
  }

  /* FIX 7: Reduzir gap entre elementos do post */
  .single-post .entry-content p,
  .blog-content p {
    margin-bottom: 0.8rem !important;
    font-size: 16px !important;
    line-height: 1.6 !important;
  }

  /* FIX 8: Tabelas responsivas */
  .single-post table,
  .entry-content table {
    display: block !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    font-size: 14px !important;
    width: 100% !important;
  }

  .single-post table th,
  .single-post table td,
  .entry-content table th,
  .entry-content table td {
    padding: 8px 10px !important;
    white-space: nowrap !important;
  }

  /* FIX 9: Listas (ul/ol) com espaço adequado */
  .single-post .entry-content li,
  .blog-content li {
    margin-bottom: 6px !important;
    font-size: 16px !important;
    line-height: 1.5 !important;
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  /* FIX 10: Breadcrumbs legíveis */
  .breadcrumb,
  .breadcrumbs,
  .yoast-breadcrumb {
    font-size: 13px !important;
    padding: 8px 0 !important;
    color: #666 !important;
  }

  /* FIX 11: Quem Somos - hero menor */
  .page-template-page-quem-somos .banner-single img,
  .page-template-page-quem-somos .wp-post-image,
  .page-id-73 .wp-post-image {
    max-height: 200px !important;
  }

  /* FIX 12: WhatsApp float não sobrepor conteúdo */
  .whatsapp-float {
    bottom: 20px !important;
    right: 15px !important;
    z-index: 999 !important;
  }

  /* FIX 13: Botões CTA dentro dos posts */
  .entry-content .wp-block-button__link,
  .entry-content .btn,
  .blog-content .btn {
    min-height: 48px !important;
    font-size: 16px !important;
    padding: 12px 24px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* FIX 14: Imagens dentro do post 100% width */
  .entry-content img,
  .blog-content img {
    max-width: 100% !important;
    height: auto !important;
  }

  /* FIX 15: Autor/meta compacto */
  .author-box,
  .post-meta,
  .entry-meta {
    font-size: 14px !important;
    padding: 8px 0 !important;
  }
}

/* Tablet (741px - 1024px) */
@media (min-width: 741px) and (max-width: 1024px) {
  .single-post h1,
  article h1 {
    font-size: 32px !important;
    line-height: 1.3 !important;
  }

  .single-post .post-thumbnail img,
  .single-post .wp-post-image {
    max-height: 350px !important;
    object-fit: cover !important;
  }
}

/* FIX 16: Título do post usa H2.single-post__title (não H1) */
@media (max-width: 740px) {
  .single-post__title,
  h2.single-post__title,
  .single-post .single-post__title {
    font-size: 26px !important;
    line-height: 1.25 !important;
    margin-bottom: 12px !important;
    margin-top: 8px !important;
  }

  /* H2 dentro do conteúdo do post */
  .single-post .entry-content h2,
  .single-post .wp-block-heading:is(h2) {
    font-size: 22px !important;
    line-height: 1.3 !important;
  }
}

@media (min-width: 741px) and (max-width: 1024px) {
  .single-post__title,
  h2.single-post__title {
    font-size: 30px !important;
    line-height: 1.3 !important;
  }
}

/* FIX 7: Focus states for accessibility (16/02/2026) */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid #800f0f; outline-offset: 2px; }
.btn:focus-visible { outline-color: #fff; box-shadow: 0 0 0 4px #800f0f; }