/* ---------------------------------------------------------------------------
   Correcções de compatibilidade em ecrãs pequenos e tablets.
   Criado a 13/10/2026.

   Fica num ficheiro à parte e é carregado depois do halloween.css, por duas
   razões: não se perde entre as regras sazonais, e apaga-se de uma vez se
   alguma coisa correr mal.

   Cada bloco diz o problema que resolve. Nenhuma regra muda a aparência em
   ecrãs grandes.
--------------------------------------------------------------------------- */

/* ---------------------------------------------------------------------------
   1. Scroll horizontal no telemóvel

   A causa estava em `.hero-copy > .hw-countdown { width: 410px }`. A regra de
   600px ajustava as colunas desse contador mas não a largura, por isso ele
   continuava com 410px fixos. Como o hero é uma grelha de `1fr`, a coluna
   cresce até caber o filho mais largo: ficava com 410px e arrastava o título
   e tudo o resto para fora do ecrã.
--------------------------------------------------------------------------- */
@media (max-width: 760px) {
  .hero { grid-template-columns: minmax(0, 1fr); }

  /* Sem isto, `1fr` nunca encolhe abaixo do conteúdo mais largo. */
  .hero > *,
  .hero-copy > *,
  .hero-visual > * { min-width: 0; }

  .hero-copy > .hw-countdown,
  .hw-season-strip > .hw-countdown {
    width: 100%;
    max-width: 100%;
    flex: 0 1 auto;
  }
}

/* ---------------------------------------------------------------------------
   2. Títulos grandes a sair do ecrã

   `clamp(46px, 6.2vw, 104px)` nunca desce dos 46px. Num telemóvel de 375px,
   uma palavra como "Network" a 46px não cabe. Aqui o mínimo acompanha a
   largura real do ecrã.
--------------------------------------------------------------------------- */
@media (max-width: 520px) {
  .hero-title { font-size: clamp(30px, 8.6vw, 46px); }
  .hero-title .line { display: block; }
}

/* Tudo neste ficheiro vive dentro de uma media query. Acima de 1180px o site
   fica exactamente como estava, byte a byte. */
@media (max-width: 1180px) {
  h1, h2, h3, .hero-title { overflow-wrap: break-word; }

  /* Emails, moradas e identificadores de tag são longos e sem espaços. Sem
     isto esticam o contentor e trazem o scroll horizontal de volta. */
  .pet-contact a,
  .pet-contact span,
  [class*="email"],
  [class*="tag-id"],
  code { overflow-wrap: anywhere; }
}

/* ---------------------------------------------------------------------------
   3. Imagens e vídeos nunca mais largos do que o ecrã

   As decorações do Halloween ficam de fora: muitas são maiores do que o
   contentor de propósito, e limitá-las partia a animação.
--------------------------------------------------------------------------- */
@media (max-width: 1180px) {
  img:not([class*="hw-"]),
  video,
  iframe,
  table { max-width: 100%; }

  img:not([class*="hw-"]) { height: auto; }
}

/* Tabelas largas passam a deslizar dentro da própria caixa, em vez de
   empurrarem a página inteira. */
@media (max-width: 760px) {
  .table-wrap, .orders-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* ---------------------------------------------------------------------------
   4. Alvos de toque

   A recomendação da Apple e da Google é 44px. Aplicado só onde é seguro: menus
   e rodapé. Links dentro de parágrafos ficam como estão, porque aí o tamanho
   mínimo partiria o alinhamento do texto.
--------------------------------------------------------------------------- */
@media (max-width: 760px) {
  .mobile-menu a,
  .mobile-menu button,
  .topbar nav a,
  footer nav a,
  .footer-col a {
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  .burger, .to-top { min-width: 44px; min-height: 44px; }
}

/* ---------------------------------------------------------------------------
   5. Campos de formulário

   Abaixo de 16px, o Safari no iPhone dá zoom automático ao tocar no campo e
   deixa a página desalinhada. Os 16px evitam esse salto.
--------------------------------------------------------------------------- */
@media (max-width: 760px) {
  input, select, textarea { font-size: 16px; }
  input, select, textarea, button { max-width: 100%; }
}

/* ---------------------------------------------------------------------------
   6. Controlos flutuantes

   O mascote e os botões de pausa ficam por cima do conteúdo no fundo do ecrã.
   Em vez de os esconder, a página ganha espaço no fim para se poder ler tudo.
--------------------------------------------------------------------------- */
@media (max-width: 760px) {
  body { padding-bottom: env(safe-area-inset-bottom, 0px); }
  footer { padding-bottom: 96px; }
}

/* ---------------------------------------------------------------------------
   7. Tablets

   Entre 760px e 1180px o hero já passa a uma coluna, mas o conteúdo fica
   esticado de margem a margem. Um limite de largura torna as linhas legíveis.
--------------------------------------------------------------------------- */
@media (min-width: 761px) and (max-width: 1180px) {
  .hero-copy { max-width: 620px; }
}

/* ---------------------------------------------------------------------------
   8. Ecrãs com recorte

   Em iPhones com Dynamic Island e em Android com furo, o conteúdo encostado à
   margem fica debaixo do recorte quando o telemóvel está deitado.
--------------------------------------------------------------------------- */
@media (max-width: 1180px) and (orientation: landscape) {
  .page, main, footer {
    padding-left: max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
  }
}

/* Account and pet creation: specific rules override the legacy form selectors.
   Keep pinch zoom available; avoid Safari focus zoom with 16px input text. */
@media (max-width:760px){
 body:is([data-halloween-page="register"],[data-halloween-page="login"],[data-halloween-page="profile"]) :is(.field input,.field select,textarea),
 body[data-halloween-page="pet"] :is(.edit-input-wrap input,.textarea-field,.breed-search-input,.pet-icon-search,.owner-input input,.owner-input textarea,.modal input,.modal select,.modal textarea){font-size:16px;min-width:0;max-width:100%}
 body[data-halloween-page="pet"] .modal{width:100%;padding:12px;overscroll-behavior:contain}
 body[data-halloween-page="pet"] .modal-box{box-sizing:border-box;min-width:0;max-width:100%;width:min(660px,100%)}
 body[data-halloween-page="pet"] .modal-box :is(.form-section,.two-col,.edit-input-wrap,.upload-row){min-width:0;max-width:100%}
 body[data-halloween-page="pet"] .modal-box .two-col{grid-template-columns:minmax(0,1fr)}
 body[data-halloween-page="pet"] .modal-box :is(h2,p,label){overflow-wrap:break-word}
 body[data-halloween-page="pet"] .modal-title-icon{flex-shrink:0}
 body[data-halloween-page="pet"] .modal-box .upload-row{gap:10px;padding:12px}
 body[data-halloween-page="pet"] .modal-box .upload-button,
 body[data-halloween-page="pet"] .modal-box .choose-icon{min-height:44px;display:inline-flex;align-items:center;justify-content:center;white-space:normal}
 body[data-halloween-page="register"] :is(.page,.auth-shell,.auth-panel,.auth-visual,.form-box){min-width:0;max-width:100%}
 body[data-halloween-page="register"] .auth-shell{grid-template-columns:minmax(0,1fr)}
 body[data-halloween-page="register"] .field input{min-height:48px}
}
@media(max-width:640px){
 body[data-halloween-page="register"] .auth-visual{padding:20px;min-height:0;gap:0}
 body[data-halloween-page="register"] .auth-visual :is(.visual-center,.dots,.particle,.hw-countdown,.hw-season-kicker){display:none}
 body[data-halloween-page="register"] .auth-panel{padding:24px 20px 30px}
 body[data-halloween-page="register"] .form-box h3{font-size:28px}
 body[data-halloween-page="register"] .form-box>p{margin-bottom:18px}
 body[data-halloween-page="register"] .password-rules{font-size:12px;line-height:1.6;padding:10px 12px}
 body[data-halloween-page="register"] .terms-box{overflow-wrap:break-word}
}

@media(max-width:760px){
 html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
 body[data-halloween-page="pet"] .modal-box p.form-hint{font-size:13px;line-height:1.6;font-weight:500;letter-spacing:0;text-transform:none}
}