/* Correções de Acessibilidade - Contraste de Cores */
/* Fix para problemas de contraste específicos identificados pela auditoria */
/*
  Problema 1: <p>Home</p> - Links de navegação no cta-Menu com contraste insuficiente
  Problema 2: <p>Registreer</p> - Botão de registro com contraste insuficiente
  WCAG 2.1 AA: Contraste 4.5:1 para texto normal, 7:1 para texto otimizado
*/

/* Links de navegação "Home" e outros menus - melhoria de contraste */
.cta-Menu p,
.cta-Menu,
nav .cta-Menu,
.headerNavBar .moveIziMenu .cta-Menu {
    color: #1A1C1E !important; /* Preto quase puro para contraste máximo */
    font-weight: 600 !important; /* Peso de fonte mais pesado para melhor legibilidade */
}

/* Botão de registro "Registreer" - melhoria de contraste */
.cta-Register,
.cta-Register p,
a.cta-Register {
    background-color: #D65027 !important; /* Laranja escuro para contraste com texto branco */
    color: #FFFFFF !important; /* Branco puro para máximo contraste */
    border: none !important;
    font-weight: 600 !important; /* Peso de fonte mais pesado */
}

.cta-Register:hover {
    background-color: #B8441F !important; /* Ainda mais escuro no hover */
}

/* Fix para elementos <li> órfãos - listas de navegação do footer e header */
.footer-menu-list,
.navigation-menu {
    list-style: none;
    margin: 0;
    padding: 0;
}

.footer-menu-list li,
.navigation-menu li {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Fix para IZI-1.F29: Ajustar cor laranja dos títulos para melhor contraste */

/* 
  Problema: #FF7346 tem apenas 2.6:1 de contraste com fundo #F9F9FB
  Solução: Usar #EE6539 que já existe no projeto e tem contraste adequado (>4.5:1)
*/

/*
  Problema 3: <span>MOVE-IZI</span> - Título principal no hero com contraste insuficiente
  Localização: .iziHero .iziHeroTitle span
*/
.iziHero .iziHeroTitle span {
    color: #D65027 !important; /* Laranja escuro em vez de #FF7346 para melhor contraste */
}

/*
  Problema 4: <p>Lees meer over wagenparkbeheer</p> - Link "leia mais" com contraste insuficiente
  Localização: Links "lees meer" em seções de conteúdo
*/
.cta-TER03,
a.cta-TER03,
.cta-TER03 p {
    color: #1A1C1E !important; /* Preto quase puro para máximo contraste */
    font-weight: 600 !important; /* Peso de fonte aumentado */
}

.cta-TER03:hover {
    color: #D65027 !important; /* Cor destacada no hover */
    text-decoration: underline !important; /* Sublinhado para melhor identificação */
}

/*
  Problema 5: <h3 class="contentMediaItensSubtitle">A24 Blankenburgverbinding</h3>
  Já corrigido anteriormente na linha 26-28, mas reforçando especificidade
*/
.contentMedia .contentMediaItensSubtitle,
h3.contentMediaItensSubtitle {
    color: #D65027 !important; /* Laranja escuro para melhor contraste que #FF7346 */
    font-weight: 700 !important; /* Peso bold para melhor legibilidade */
}

/* Títulos e subtítulos laranjas que aparecem em fundos claros - atualizado para melhor contraste */
.iziHero .iziHeroTitle span,
.contentMedia .contentMediaItensSubtitle,
.iziHeroInside .iziHeroInsideTitle {
    color: #D65027 !important; /* Mudança de #EE6539 para #D65027 - contraste ainda melhor */
}

/* Status dos accordions */
.accordionList .accordionStatus--closed,
.accordionList .accordionStatus--open,
.accordionTab .accordionStatus--closed,
.accordionTab .accordionStatus--open {
    color: #EE6539 !important;
}

/* Elementos de dropdown */
.headerNavBar .dropdownContainer .dropdownLanguage-button span:hover {
    color: #EE6539 !important;
}

/* Bordas e elementos decorativos que usam a cor laranja em contextos de baixo contraste */
.accordionList .accordionItem--active,
.accordionTab .accordionItem--active {
    border-color: #EE6539 !important;
}

/* Fix para IZI-1.F41: Link "Lees meer" com contraste insuficiente no banner verde */
/* 
  Problema: Cor laranja #FF7346 tem apenas 3.6:1 contraste com fundo verde #044E48
  Requisito: Para texto menor que 18pt, necessário 4.5:1 contraste mínimo
  Solução: Usar cor mais clara que garanta contraste adequado
*/
.iziBanner .iziBannerTextContainer .cta-TER03 {
    color: #FFB380 !important; /* Cor laranja clara com contraste 4.5:1+ sobre fundo verde */
}

/* Fix para IZI-1.F40: Indicador de foco "Lees meer" no banner verde com contraste insuficiente */
/* 
  Problema: Indicador de foco no banner verde (#044E48) tem cor #366B69 com apenas 1.6:1 contraste
  Solução: Usar cor com contraste adequado (3.0:1+) e melhorar visibilidade do foco
*/
.iziBanner .iziBannerTextContainer .cta-TER03:focus {
    background: rgba(255, 255, 255, 0.9) !important; /* Background branco quase opaco */
    color: #2C3E50 !important; /* Texto escuro sobre fundo claro para máximo contraste */
    outline: 2px solid #ffffff !important; /* Outline branco adicional */
    outline-offset: 2px !important;
    border-radius: 4px !important;
    box-shadow: 0 0 0 1px #044E48 !important; /* Shadow para delimitar melhor o elemento */
    margin-left: -16px !important; /* Manter o posicionamento original */
    padding: 8px 16px !important; /* Manter o padding original */
}

/* Elementos de pricing e termos que aparecem em fundos claros */
.termsBlock .termsBlockContainerTitle,
.termsBlock .termsBlocknumber,
.tollsPricingCard .tollsMinimumContainer .tollsMinimumSubtitle {
    color: #EE6539 !important;
}

/* Números de preços nos cards de tolls em fundo claro */
.tollsPricingCard .tollsMinimumContainer .tollsMinimumContent .tollsMinimumNumber,
.tollsPricingCard .tollsMinimumContainer .tollsMinimumContent .euro {
    color: #EE6539 !important;
}

/* 
  Nota: Mantivemos #FF7346 para backgrounds de botões onde há contraste adequado com texto branco,
  mas alteramos apenas onde o texto/elemento laranja aparece sobre fundo claro
*/

/* Fix para IZI-1.F28: Botões laranjas com texto branco - melhorar contraste */
/* 
  Problema: #FF7346 com texto branco #FFFFFF tem apenas 2.7:1 de contraste
  Solução: Usar cor mais escura #CD4B21 que garante contraste 4.5:1+ com texto branco
*/

/* Botões principais com background laranja */
.cta-PRI01,
.cta-PRI02,
.cta-Register,
button.cta-Register,
a.cta-Register,
.btn-primary,
.orange-button,
button[style*="background:#FF7346"],
button[style*="background-color:#FF7346"],
a[style*="background:#FF7346"],
a[style*="background-color:#FF7346"] {
    background-color: #CD4B21 !important; /* Cor mais escura para contraste adequado */
    border-color: #CD4B21 !important;
    color: #FFFFFF !important; /* Garantir texto branco */
}

/* Estados de hover para melhor feedback visual */
.cta-PRI01:hover,
.cta-PRI02:hover,
.cta-Register:hover,
button.cta-Register:hover,
a.cta-Register:hover,
.btn-primary:hover,
.orange-button:hover {
    background-color: #CD4B21 !important; /* Ainda mais escuro no hover */
    border-color: #CD4B21 !important;
}

/* Estados de focus para acessibilidade de teclado */
.cta-PRI01:focus,
.cta-PRI02:focus,
.cta-Register:focus,
button.cta-Register:focus,
a.cta-Register:focus,
.btn-primary:focus,
.orange-button:focus {
    outline: 3px solid #0066CC !important; /* Outline azul para foco */
    outline-offset: 2px !important;
    background-color: #CD4B21 !important;
}

/* Estados ativos/pressed */
.cta-PRI01:active,
.cta-PRI02:active,
.cta-Register:active,
button.cta-Register:active,
a.cta-Register:active,
.btn-primary:active,
.orange-button:active {
    background-color: #8B3212 !important;
    border-color: #8B3212 !important;
}

/* Fix para botão de menu mobile com cor laranja antiga */
/* 
  Problema: .cta-Mobile usa #ff7346 com apenas 2.7:1 de contraste com texto branco
  Solução: Usar cor mais escura #CD4B21 que garante contraste 4.5:1+ com texto branco
*/
.cta-Mobile {
    background-color: #CD4B21 !important;
    border-color: #CD4B21 !important;
    padding: 12px !important; /* Padding igual em todos os lados para desktop */
}

@media (min-width:0) and (max-width:1335px) {
    .cta-Mobile {
        padding: 10px 12px !important; /* Proporção ajustada para mobile */
    }
}

.cta-Mobile:hover {
    background-color: #8B3212 !important; /* Mais escuro no hover */
}

.cta-Mobile:focus {
    background-color: #CD4B21 !important;
    outline: 2px solid #0066CC !important;
    outline-offset: 2px !important;
}

.cta-Mobile:active {
    background-color: #8B3212 !important;
}

/* Fix para padding do menu principal desktop */
.headerNavBar .logoMenuLoginContainer .moveIziMenu {
    padding: 0 12px !important; /* Reduzir padding lateral de 16px para 12px */
}

/* Fix para IZI-1.F31: Tabs ativos de FAQ com contraste insuficiente */
/* 
  Problema: .accordionTab .tab-button.active tem background #E0E5EB com apenas 1.3:1 de contraste
  Solução: Usar cor mais escura que garanta contraste 3.0:1+ e adicionar indicador visual alternativo
*/

/* Melhorar contraste do tab ativo */
.accordionTab .tab-button.active {
    background-color: #B8C4CF !important; /* Cor mais escura para melhor contraste */
    border-bottom: 3px solid #EE6539 !important; /* Adicionar borda laranja como indicador adicional */
    color: #2C3E50 !important; /* Texto mais escuro para garantir contraste */
    font-weight: 700 !important; /* Texto em negrito como indicador adicional */
}

/* Adicionar indicador textual para screen readers */
.accordionTab .tab-button.active::after {
    content: " (ativo)" !important;
    font-size: 0 !important; /* Invisível visualmente */
    position: absolute !important;
    left: -9999px !important;
}

/* Estados de hover e focus para tabs */
.accordionTab .tab-button:hover {
    background-color: #D6E3F0 !important;
    border-bottom: 2px solid #EE6539 !important;
}

.accordionTab .tab-button:focus {
    outline: 3px solid #0066CC !important;
    outline-offset: 2px !important;
    background-color: #E8F4F8 !important;
}

/* Fix para formulário de contato: Campos de input com contraste insuficiente */
/* 
  Problema: input:focus têm outline #FF906B com apenas 2.3:1 de contraste
  Solução: Usar cor mais escura que garanta contraste 3.0:1+ 
*/

/* Melhorar contraste dos campos de formulário ativos/focus */
.izicontactForm .iziContactFormContainer input:focus,
.izicontactForm .iziContactFormContainer select:focus,
.izicontactForm .iziContactFormContainer textarea:focus {
    outline: 2px solid #CD4B21 !important; /* Cor mais escura para melhor contraste */
    outline-offset: 1px !important;
    border: 2px solid #CD4B21 !important; /* Adicionar borda como indicador adicional */
    background-color: #FFF8F5 !important; /* Fundo levemente colorido mas com contraste adequado */
    box-shadow: 0 0 0 1px #CD4B21 !important; /* Shadow adicional para maior visibilidade */
}

/* Estados de hover para melhor feedback */
.izicontactForm .iziContactFormContainer input:hover,
.izicontactForm .iziContactFormContainer select:hover,
.izicontactForm .iziContactFormContainer textarea:hover {
    border-color: #EE6539 !important;
    background-color: #FFFAF8 !important;
}

/* Garantir que campos inválidos também tenham contraste adequado */
.izicontactForm .iziContactFormContainer input:invalid:focus,
.izicontactForm .iziContactFormContainer select:invalid:focus,
.izicontactForm .iziContactFormContainer textarea:invalid:focus {
    outline: 2px solid #DC3545 !important; /* Vermelho para campos inválidos */
    border: 2px solid #DC3545 !important;
    box-shadow: 0 0 0 1px #DC3545 !important;
}

/* Melhorar visibilidade dos placeholders */
.izicontactForm .iziContactFormContainer input::placeholder,
.izicontactForm .iziContactFormContainer textarea::placeholder {
    color: #6C757D !important; /* Cor com melhor contraste para placeholders */
    opacity: 1 !important;
}

/* Fix para IZI-1.F30: Contador de caracteres com contraste insuficiente */
/* 
  Problema: #charCount tem cor #8a929a com apenas 3.2:1 de contraste
  Solução: Usar cor mais escura que garanta contraste 4.5:1+ para texto pequeno
*/

/* Melhorar contraste do contador de caracteres */
.izicontactForm .iziContactFormContainer #charCount {
    color: #495057 !important; /* Cor mais escura para contraste adequado (4.5:1+) */
    font-weight: 600 !important; /* Deixar mais visível */
}

/* Estado quando se aproxima do limite (exemplo: acima de 200 caracteres) */
.izicontactForm .iziContactFormContainer #charCount.warning {
    color: #F57C00 !important; /* Laranja para aviso */
    font-weight: 700 !important;
}

/* Estado quando excede o limite */
.izicontactForm .iziContactFormContainer #charCount.error {
    color: #DC3545 !important; /* Vermelho para erro */
    font-weight: 700 !important;
}

/* Fix para IZI-1.F39: Footer focus indicators com contraste insuficiente */
/* 
  Problema: .cta-TER03:focus no footer tem background rgba(255,240,235,.2) sobre #495057 
  com apenas 1.6:1 de contraste
  Solução: Usar background mais opaco e cores com contraste adequado (3.0:1+)
*/

/* Melhorar contraste dos links no footer quando em foco */
.footer .cta-TER03:focus {
    background: rgba(255, 255, 255, 0.9) !important; /* Background branco quase opaco */
    color: #2C3E50 !important; /* Texto escuro sobre fundo claro para máximo contraste */
    outline: 2px solid #ffffff !important; /* Outline branco adicional */
    outline-offset: 2px !important;
    border-radius: 4px !important;
    box-shadow: 0 0 0 1px #495057 !important; /* Shadow para delimitar melhor o elemento */
}

/* Estado de hover no footer para melhor feedback visual */
.footer .cta-TER03:hover {
    background: rgba(255, 255, 255, 0.15) !important; /* Hover mais sutil */
    border-radius: 4px !important;
    transition: all 0.2s ease !important;
}

/* Fix para IZI-1.F70: Footer links hover com contraste insuficiente */
/* 
  Problema: Links no footer em hover mudam para #31363A sobre fundo #495057
  Contraste atual: 1,51:1 (insuficiente)
  Contraste necessário: 4,5:1 para WCAG AA
*/

/* Corrigir contraste dos links do footer em hover */
.footer .cta-TER03:hover {
    color: #FFFFFF !important; /* Branco sobre #495057 = contraste 9.35:1 (excelente) */
}

/* Fix para IZI-1.F46: Uso semântico correto de elementos HTML */
/* 
  Problema: Uso incorreto de <strong> apenas para fins visuais
  Solução: Classe .bold para estilização visual sem significado semântico
  
  IMPORTANTE: Use <strong> apenas para ênfase semântica importante!
  Para texto em negrito apenas visual, use: <span class="bold">
*/

/* Classe para texto em negrito sem significado semântico */
.bold {
    font-weight: 700 !important;
}

/* Classe para texto com ênfase visual moderada */
.medium-bold {
    font-weight: 600 !important;
}

/* Classe para texto em negrito com cor específica (para substituir strong laranja) */
.bold-accent {
    font-weight: 700 !important;
    color: #EE6539 !important; /* Cor de destaque acessível */
}

/* 
  ORIENTAÇÃO PARA DESENVOLVEDORES:
  
  ❌ INCORRETO - usar <strong> apenas para negrito visual:
  <p>Este é um <strong>texto em negrito</strong> apenas visual.</p>
  
  ✅ CORRETO - usar classes CSS para estilização:
  <p>Este é um <span class="bold">texto em negrito</span> apenas visual.</p>
  
  ✅ CORRETO - usar <strong> para ênfase semântica:
  <p>Esta informação é <strong>muito importante</strong> para o usuário.</p>
  
  Elementos semânticos devem ser usados conforme seu significado:
  - <strong>: ênfase importante (significado semântico)
  - <em>: ênfase (significado semântico) 
  - <span class="bold">: apenas aparência em negrito
  - <h1>-<h6>: títulos hierárquicos, não para fazer texto maior
*/

/* F70: IZI-1.F70 Footer link hover state for 9.35:1 contrast ratio */
.footer .footerItens a:hover {
    color: #FFFFFF !important;
}

/* F60: IZI-1.F60 Disable automatic image scaling animation to prevent seizures and vestibular disorders */
/* 
  Problema: Animação automática de imagem que faz zoom in/out continuamente sem interação do usuário
  WCAG 2.1 AA Guideline 2.3.3: Animation from Interactions
  Solução: Desativar animação automática infinita que pode causar convulsões ou distúrbios vestibulares
*/
.iziHero .iziHeroContainerImage img {
    animation: none !important;
}

/* F66: IZI-1.F66 Accordion accessibility improvements */
/*
  Problema: Botões de accordion sem atributo aria-expanded para indicar estado
  WCAG 2.1 AA Guideline 4.1.2: Name, Role, Value
  Solução: Adicionados aria-expanded="false" e aria-controls nos botões de accordion
  
  NOTA IMPORTANTE PARA DESENVOLVIMENTO:
  O JavaScript da aplicação deve alterar o valor de aria-expanded para "true" quando
  o accordion for expandido e voltar para "false" quando for recolhido.
  
  Exemplo de JavaScript necessário:
  - Quando expandir: button.setAttribute('aria-expanded', 'true');
  - Quando recolher: button.setAttribute('aria-expanded', 'false');
*/

/* 
 * F27 - Keyboard Focus Trapped Behind Popup
 * WCAG 2.1 AA: Success Criterion 2.4.4 Link Purpose (In Context)
 * 
 * Problema: Quando o popup de sucesso do formulário de contacto é exibido,
 * o foco do teclado fica preso atrás do popup, confundindo utilizadores
 * que dependem apenas do teclado para navegação.
 * 
 * Solução: Implementar gestão de foco que:
 * 1. Move o foco para dentro do popup quando aberto
 * 2. Mantém o foco dentro do popup (focus trap)
 * 3. Retorna o foco ao elemento original quando fechado
 */

/* Ensure popup content is focusable */
.izicontactFormSucesso .izicontactFormSucessoTitle,
.izicontactFormErro .izicontactFormErroTitle {
    outline: none !important;
}

.izicontactFormSucesso .izicontactFormSucessoTitle:focus,
.izicontactFormErro .izicontactFormErroTitle:focus {
    outline: 2px solid #044e48 !important;
    outline-offset: 2px !important;
}

/* Ensure close buttons are clearly focusable */
.izicontactFormSucesso .closejs:focus,
.izicontactFormErro .closejs:focus {
    outline: 2px solid #044e48 !important;
    outline-offset: 2px !important;
    background-color: rgba(4, 78, 72, 0.1) !important;
}

/* Fix para menu de navegação ativo - Melhorar contraste da página atual */
/*
  Problema: .cta-Menu.select tem background #ffe4db (laranja claro) que pode causar problemas de contraste
  WCAG 2.1 AA: Success Criterion 1.4.3 Contrast (Minimum) - 4.5:1 para texto normal
  Solução: Usar fundo branco com borda colorida para indicar página ativa com melhor contraste
*/

/* Corrigir fundo da página ativa no menu de navegação */
.cta-Menu.select,
a.cta-Menu.select,
.headerNavBar .moveIziMenu .cta-Menu.select {
    background-color: #ffffff !important; /* Fundo branco para melhor contraste */
    color: #CD4B21 !important; /* Texto na cor acessível do projeto */
    border: 1px solid #CD4B21 !important; /* Borda colorida para indicar estado ativo */
    font-weight: 700 !important; /* Texto em negrito como indicador adicional */
    box-shadow: 0 0 0 1px #CD4B21 !important; /* Shadow adicional para garantir visibilidade */
}

/* Estados de hover e focus para páginas não ativas */
.cta-Menu:hover:not(.select) {
    background-color: #F8F9FA !important; /* Hover mais sutil em fundo claro */
    color: #CD4B21 !important;
}

/* Garantir que a página ativa sempre tenha fundo branco - regra de alta especificidade */
.headerNavBar .moveIziMenu a.cta-Menu.select,
.moveIziMenu a.cta-Menu.select {
    background-color: #ffffff !important;
    background: #ffffff !important;
}

.cta-Menu:focus:not(.select) {
    background-color: #ffffff !important;
    border: 2px solid #CD4B21 !important;
    color: #495057 !important;
    outline: 2px solid #0066CC !important; /* Outline azul para foco de teclado */
    outline-offset: 2px !important;
}

/* Fix para H42: Hierarquia de cabeçalhos - Garantir estrutura correta */
/*
  WCAG 2.1 AA: Success Criterion 1.3.1 Info and Relationships
  H42: Using h1-h6 to identify headings
  
  Problema: Garantir que existe apenas um h1 por página e hierarquia correta
  Solução: Garantir que componentes secundários usem h2 em vez de h1
*/

/* Garantir que h1 principais tenham os estilos corretos */
.iziHero h1.iziHeroTitle {
    /* Título principal da página deve manter o estilo original */
    font-family: straybold !important;
    font-size: 64px !important;
    line-height: 80px !important;
    letter-spacing: 0 !important;
    font-weight: 700 !important;
    color: #044e48 !important;
    margin-bottom: 16px !important;
}

@media (min-width: 0) and (max-width: 1335px) {
    .iziHero h1.iziHeroTitle {
        font-size: 40px !important;
        line-height: 50px !important;
    }
}

/* Garantir que outros cabeçalhos mantenham hierarquia correta */
.iziSimpleHeader h2.iziSimpleHeaderContainerTitle,
.iziHeroInside h2.iziHeroInsideTitle {
    /* Cabeçalhos secundários devem usar h2 */
    font-family: straybold !important;
    font-size: 46px !important;
    line-height: 60px !important;
    letter-spacing: 0 !important;
    font-weight: 700 !important;
    color: #044e48 !important;
    margin-bottom: 16px !important;
}

@media (min-width: 0) and (max-width: 1335px) {
    .iziSimpleHeader h2.iziSimpleHeaderContainerTitle,
    .iziHeroInside h2.iziHeroInsideTitle {
        font-size: 40px !important;
        line-height: 50px !important;
    }
}

/* 
  ORIENTAÇÃO PARA DESENVOLVEDORES:
  
  Estrutura correta de cabeçalhos:
  - h1: Título principal da página (apenas UM por página)
  - h2: Seções principais
  - h3: Subseções das seções h2
  - h4-h6: Subseções subsequentes
  
  ✅ CORRETO:
  <h1>Título Principal da Página</h1>
  <h2>Seção Principal</h2>
  <h3>Subseção</h3>
  <h2>Outra Seção Principal</h2>
  
  ❌ INCORRETO:
  <h1>Título Principal</h1>
  <h1>Outro Título</h1> <!-- Múltiplos h1 na mesma página -->
  <h3>Seção</h3> <!-- Pular do h1 para h3 -->
*/