/*
Theme Name: MBi Child (Hello Elementor)
Template: hello-elementor
Description: Tema-filho do Hello Elementor com os templates de página do site MBi (Formação e Consultoria em Excel). Não altera o tema principal nem o site existente — só fica disponível depois de ativado.
Version: 3.9.0
Text Domain: mbi-child
*/

/* =========================================================================
   1. BASE — evita overflow horizontal em qualquer viewport
   ====================================================================== */
html, body { max-width: 100%; overflow-x: hidden; }
img, svg, video, iframe { max-width: 100%; }

/* Impede que uma palavra longa (URL, e-mail) estoure o layout a 320px */
.mbi-sobre-page h1,
.mbi-sobre-page h2,
.mbi-sobre-page h3,
.mbi-sobre-page p { overflow-wrap: break-word; text-wrap: pretty; }

/* =========================================================================
   2. ACESSIBILIDADE
   ====================================================================== */

/* Skip link: invisível até receber foco por teclado */
.mbi-skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100000;
  background: #0e3e15;
  color: #fff;
  padding: 14px 22px;
  font: 600 14px Montserrat, sans-serif;
  text-decoration: none;
}
.mbi-skip-link:focus {
  left: 12px;
  top: 12px;
  outline: 3px solid #e86a25;
  outline-offset: 2px;
}

/* Foco visível consistente em todos os elementos interativos */
.mbi-sobre-page a:focus-visible,
.mbi-sobre-page button:focus-visible,
.mbi-sobre-page summary:focus-visible,
.mbi-sobre-page input:focus-visible,
.mbi-sobre-page select:focus-visible,
.mbi-sobre-page textarea:focus-visible {
  outline: 3px solid #e86a25;
  outline-offset: 3px;
  border-radius: 2px;
}

/* Alvos de toque: mínimo 44x44 nos controlos dos carrosséis e FAQ */
.mbi-sobre-page .mbi-rail-prev,
.mbi-sobre-page .mbi-rail-next,
.mbi-sobre-page .mbi-testi-prev,
.mbi-sobre-page .mbi-testi-next {
  min-width: 44px;
  min-height: 44px;
}
.mbi-sobre-page summary { min-height: 44px; }

/* Remove animações para quem pediu movimento reduzido no sistema */
@media (prefers-reduced-motion: reduce) {
  .mbi-sobre-page *,
  .mbi-sobre-page *::before,
  .mbi-sobre-page *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* =========================================================================
   3. RESPONSIVO — margens laterais progressivas
   Os templates usam padding lateral de 64px. Abaixo de 768px isso deixa
   pouco espaço útil, por isso é reduzido de forma consistente.
   ====================================================================== */

/* Tablet */
@media (max-width: 1024px) {
  .mbi-sobre-page > div[style*="64px"] { padding-left: 40px !important; padding-right: 40px !important; }
}

/* Telemóvel grande */
@media (max-width: 600px) {
  .mbi-sobre-page > div[style*="64px"] { padding-left: 24px !important; padding-right: 24px !important; }

  /* Reduz o espaçamento vertical exagerado das secções em ecrãs pequenos */
  .mbi-sobre-page > div[style*="padding:150px"],
  .mbi-sobre-page > div[style*="padding:140px"],
  .mbi-sobre-page > div[style*="padding:130px"] {
    padding-top: 70px !important;
    padding-bottom: 70px !important;
  }

  /* CTAs ocupam a largura disponível: mais fáceis de acertar com o dedo */
  .mbi-sobre-page a[style*="background:#e86a25"] {
    display: block !important;
    text-align: center;
  }
}

/* Telemóvel pequeno (320–375px) */
@media (max-width: 400px) {
  .mbi-sobre-page > div[style*="64px"] { padding-left: 18px !important; padding-right: 18px !important; }
  .mbi-sobre-page h1 { font-size: 28px !important; line-height: 1.25 !important; }
  .mbi-sobre-page h2 { font-size: 23px !important; line-height: 1.3 !important; }
  .mbi-sobre-page h3 { font-size: 19px !important; }

  /* Os cartões dos carrosséis não devem ser mais largos que o ecrã */
  .mbi-sobre-page .mbi-testi-scroll > div { flex: 0 0 84vw !important; }
}

/* =========================================================================
   4. BLOG — widget da sidebar
   ====================================================================== */
.mbi-blog-widget {
  background: #f2ece0;
  padding: 28px 26px;
  margin-bottom: 24px;
  font: 400 14px/1.7 Montserrat, sans-serif;
  color: #494539;
}
.mbi-blog-widget a { color: #0e3e15; }

/* =========================================================================
   5. IMPRESSÃO — páginas legíveis em papel
   ====================================================================== */
@media print {
  .mbi-skip-link,
  .mbi-rail-prev, .mbi-rail-next,
  .mbi-testi-prev, .mbi-testi-next,
  iframe { display: none !important; }
  .mbi-sobre-page { background: #fff !important; color: #000 !important; }
  .mbi-sobre-page > div { padding: 20px 0 !important; }
}

/* =========================================================================
   6. FORÇA A TIPOGRAFIA DO TEMA
   Os Estilos Globais do Elementor/WordPress aplicam família, peso, itálico
   e maiúsculas por omissão a h1-h6/p/botões, sobrepondo-se ao design.
   Estas regras, carregadas depois e com !important, restauram exatamente
   o que o design define: Playfair Display nos títulos, Montserrat no
   resto, sem transformação de capitalização, itálico real em i/em, peso
   real em b/strong — e devolvem as maiúsculas apenas onde o próprio
   design as pede inline (eyebrows/legendas), através da regra final.
   ====================================================================== */
#mbi-main h1, #mbi-main h2, #mbi-main h3, #mbi-main h4, #mbi-main h5, #mbi-main h6 {
  font-family: 'Playfair Display', serif !important;
  font-style: normal !important;
  text-transform: none !important;
  letter-spacing: normal !important;
}
#mbi-main p, #mbi-main li, #mbi-main label, #mbi-main a, #mbi-main button,
#mbi-main input, #mbi-main textarea, #mbi-main select, #mbi-main summary {
  font-family: 'Montserrat', sans-serif !important;
  text-transform: none !important;
}
#mbi-main i, #mbi-main em { font-style: italic !important; }
#mbi-main b, #mbi-main strong { font-weight: 700 !important; }
/* Restaura maiúsculas/itálico só onde o próprio inline style do design os pede */
#mbi-main [style*="text-transform:uppercase"],
#mbi-main [style*="text-transform: uppercase"] { text-transform: uppercase !important; }
#mbi-main [style*="font-style:normal"],
#mbi-main [style*="font-style: normal"] { font-style: normal !important; }