/* =========================================================
   RESPONSIVE — RESPONSIVE ADJUSTMENTS
   =========================================================

   Ajustes de comportamento e apresentação para
   diferentes tamanhos de ecrã.

   Este ficheiro contém:
   - Media queries
   - Ajustes de layout
   - Ajustes de componentes
   - Tipografia responsiva complementar
   - Navegação responsiva
   - Correcções para tablet
   - Correcções para mobile
   - Correcções para ecrãs grandes

   Regra:
   O estilo principal deve permanecer no ficheiro
   correspondente.

   responsive.css deve conter apenas as alterações
   necessárias entre breakpoints.

   Não colocar aqui:
   - Estilos base completos
   - Componentes inteiros
   - Código duplicado sem necessidade
   ========================================================= */

/*
========================================================
01. LARGE DESKTOP
========================================================
*/

@media (max-width: 1366px) {
  /*
  Ajustes para desktops e portáteis de largura reduzida.

  Adicionar apenas quando necessário.
  */
}

/*
========================================================
02. DESKTOP
========================================================
*/

@media (max-width: 1200px) {
}

/*
========================================================
03. TABLET LANDSCAPE
========================================================
*/

@media (max-width: 1024px) {
  /*
    Ajustes para tablets em modo paisagem.
    
    Adicionar apenas quando necessário.
    */
}

/*
========================================================
04. TABLET
========================================================
*/

@media (max-width: 992px) {
  /* ===== 404 ===== */
  .error_404 {
    margin-bottom: 0;
  }

  .error-404 .image_box img {
    max-width: 100%;
    height: auto;
  }

  /* ===== MOBILE MENU ===== */

  .crt_mobile_menu .menu-mobile-cta {
    display: block !important;
  }
}

/*
========================================================
05. MOBILE
========================================================
*/

@media (max-width: 767px) {
  .footer-main {
    padding-top: var(--space-4xl);
    padding-bottom: var(--space-lg);
  }

  .footer-widget {
    margin-bottom: 35px;
  }

  .footer-copyright {
    padding: var(--space-xl) 0;
  }

  .footer-copyright-inner {
    flex-direction: column;
    text-align: center;
    gap: var(--space-xs);
  }
}

/*
========================================================
06. SMALL MOBILE
========================================================
*/

/*
--------------------------------------------------------
BOOTSTRAP — CONTAINERS
--------------------------------------------------------
*/

@media (min-width: 576px) {
  .container,
  .container-sm,
  .container-md {
    max-width: 100%;
  }
}

@media (max-width: 550px) {
  .page_header_default .page_header_content .banner_text_inner p {
    font-size: var(--font-size-16) !important;
  }

  .footer-widget.footer-brand p,
  .footer-widget.footer-contact .footer-contact-content p,
  .footer-copyright p.copyright-text {
    font-size: var(--font-size-15) !important;
  }

  .footer-copyright-inner {
    gap: var(--space-xxs);
  }
}

/*
========================================================
07. EXTRA SMALL MOBILE
========================================================
*/

@media (max-width: 480px) {
  /*
    Ajustes para dispositivos móveis extra pequenos.

    Adicionar apenas quando necessário.
    */
}

/*
========================================================
08. REDUCED MOTION
========================================================
*/

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;

    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/*
========================================================
09. HIGH CONTRAST
========================================================
*/

@media (prefers-contrast: more) {
  :focus-visible {
    outline-width: calc(var(--focus-width) + 1px);
  }
}

/*
========================================================
10. PRINT
========================================================
*/

@media print {
  *,
  *::before,
  *::after {
    box-shadow: none !important;
    text-shadow: none !important;
  }

  body {
    background: var(--color-white);

    color: var(--color-black);
  }

  a {
    color: inherit;

    text-decoration: underline;
  }

  .no-print {
    display: none !important;
  }
}