/* ==========================================================
   responsive.css  (v3)
   Camada de responsividade para o template "Sewing Bobbins".
   Carregar DEPOIS de default.css e fonts.css.
   Acima de 1199px o site continua exatamente como antes.
   ========================================================== */

img { max-width: 100%; height: auto; }
iframe { max-width: 100%; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { overflow-x: hidden; }

/* Botão do menu (hambúrguer): escondido no desktop */
#menu-toggle { display: none; }

/* ---------- Tablets e telas menores que 1200px (largura fixa do template) ---------- */
@media (max-width: 1199px) {

  *, *::before, *::after { box-sizing: border-box; }

  .container {
    width: auto !important;
    max-width: 100% !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  /* Cabeçalho */
  #logo { width: auto !important; padding: 1.2em 0 !important; }
  #logo img { margin: 0 auto; }
  #banner { width: 100% !important; }

  /* Faixa do menu cresce conforme o conteúdo (o original fixa 100px) */
  #menu-wrapper { position: relative; z-index: 100; }
  #menu {
    height: auto !important;
    min-height: 100px;
    overflow: visible !important;
  }
  #menu ul { padding-bottom: 20px !important; }

  /* Conteúdo e menu lateral empilhados */
  #page { padding-top: 2.5em !important; }
  #content,
  #sidebar {
    float: none !important;
    width: 100% !important;
    margin: 0 !important;
  }
  #sidebar { margin-top: 2.5em !important; }

  /* Contato tem um #content dentro de outro #content */
  #content #content { padding: 0 !important; }

  /* Quatro colunas do portfólio viram grade 2 x 2 */
  #portfolio-wrapper { padding: 3em 0 !important; }
  #portfolio {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 30px 20px;
  }
  #column1, #column2, #column3, #column4 {
    float: none !important;
    width: calc(50% - 10px) !important;
    margin: 0 !important;
  }

  /* Mapas do Google */
  #content iframe[src*="google.com/maps"],
  #content iframe[src*="maps.google"] {
    display: block;
    width: 100% !important;
  }
}

/* ---------- Menu hambúrguer (até 960px) ---------- */
@media (max-width: 960px) {

  #menu { min-height: 0; }

  #menu-toggle {
    display: block;
    width: 100%;
    padding: 18px 0;
    background: none;
    border: 0;
    color: #000;
    font: inherit;
    font-size: 0.9em;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-align: center;
    cursor: pointer;
  }

  #menu-toggle:focus-visible { outline: 2px solid #000; outline-offset: -4px; }

  #menu-toggle .bars {
    display: inline-block;
    width: 20px;
    height: 2px;
    margin-right: 12px;
    vertical-align: middle;
    background: currentColor;
    box-shadow: 0 -6px 0 currentColor, 0 6px 0 currentColor;
  }

  #menu ul { display: none; padding: 0 0 12px 0 !important; }
  #menu.open ul { display: block; }

  #menu li {
    display: block;
    border-top: 1px solid rgba(0, 0, 0, 0.12);
  }

  #menu li a { padding: 14px 10px; font-size: 0.85em; }
}

/* ---------- Celulares (até 768px) ---------- */
@media (max-width: 768px) {

  .title h2 { font-size: 1.5em; letter-spacing: 0.1em; }
  .title { margin-bottom: 1.5em; }

  .button { padding-top: 0.7em; padding-bottom: 0.7em; }

  #copyright { padding: 2.5em 20px !important; }
  #copyright p { letter-spacing: 0.05em; }

  /* Formulário de contato: rótulo acima do campo, campo em largura total */
  .form_settings p span {
    float: none;
    display: block;
    width: auto;
    margin-bottom: 4px;
  }
  .form_settings input[type="text"],
  .form_settings textarea {
    display: block;
    width: 100%;
    font-size: 16px; /* evita o zoom automático do iOS ao focar */
  }
  .form_settings input.submit {
    display: block;
    width: auto;
    height: auto;
    min-height: 44px;
    margin: 0;
    padding: 10px 28px;
  }
  /* espaçador vazio que antecede o botão Enviar */
  .form_settings span:has(+ .submit) { display: none; }

  /* Mapas mais baixos para não dominar a tela */
  #content iframe[src*="google.com/maps"],
  #content iframe[src*="maps.google"] { height: 300px; }
}

/* ---------- Celulares pequenos (até 600px) ---------- */
@media (max-width: 600px) {
  #column1, #column2, #column3, #column4 { width: 100% !important; }
}

@media (max-width: 480px) {
  .container { padding-left: 15px !important; padding-right: 15px !important; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ==========================================================
   Botão do WhatsApp (index.html) - substitui o iframe Livance
   ========================================================== */
.whatsapp-cta { margin: 2.5em 0 1em; }

.whatsapp-btn {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  padding: 14px 32px 14px 22px;
  background: #25D366;
  color: #fff;
  text-decoration: none;
  border-radius: 40px;
  box-shadow: 0 4px 14px rgba(37, 211, 102, 0.4);
  transition: background-color .2s ease, transform .2s ease, box-shadow .2s ease;
  -webkit-tap-highlight-color: transparent;
}

.whatsapp-btn .fa { font-size: 40px; line-height: 1; }

.whatsapp-btn-text { display: flex; flex-direction: column; line-height: 1.25; text-align: left; }
.whatsapp-btn-text strong { font-size: 1.05em; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.whatsapp-btn-text small { font-size: .85em; font-weight: 400; letter-spacing: .05em; opacity: .95; }

.whatsapp-btn:hover,
.whatsapp-btn:focus-visible {
  background: #1ebe5a;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(37, 211, 102, 0.5);
}

.whatsapp-btn:active { transform: translateY(0); box-shadow: 0 2px 8px rgba(37, 211, 102, 0.4); }

.whatsapp-btn:focus-visible { outline: 3px solid #171717; outline-offset: 3px; }

/* Pulso discreto no ícone para chamar atenção */
@keyframes whatsapp-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.12); }
}
.whatsapp-btn .fa { animation: whatsapp-pulse 2.4s ease-in-out infinite; }
.whatsapp-btn:hover .fa { animation-play-state: paused; }

@media (max-width: 480px) {
  .whatsapp-cta { text-align: center; }
  .whatsapp-btn { width: 100%; justify-content: center; padding: 16px 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .whatsapp-btn, .whatsapp-btn .fa { transition: none !important; animation: none !important; }
}