/**
 * Accessibility Fixes
 * 
 * Correções de acessibilidade para alcançar 95+ no score:
 * - Contraste de cores (WCAG AA)
 * - ARIA attributes
 * - Heading order
 * - Alt attributes
 * 
 * @version 2.6.2
 */

/* ============================================
   CONTRASTE DE CORES - DESKTOP E MOBILE
   ============================================ */

/* Texto em fundo claro - garantir contraste mínimo 4.5:1 */
body,
.container,
.page-section,
.page-section-white {
    color: #1a1a1a; /* Preto quase puro para máximo contraste */
}

/* Texto secundário - contraste 4.5:1 */
p,
span,
li {
    color: #2a2a2a; /* Cinza escuro para legibilidade */
}

/* Títulos - contraste 3:1 (grande texto) */
h1,
h2,
h3,
h4,
h5,
h6 {
    color: #1a1a1a; /* Preto para máximo contraste */
}

/* Links - contraste 4.5:1 */
a:not(.btn):not(.action-btn):not(.btn-candidatar):not(.footer-link):not(.footer-social-link) {
    color: #3a505a; /* Cinza escuro da marca */
    text-decoration: underline;
}

a:not(.btn):not(.action-btn):not(.btn-candidatar):not(.footer-link):not(.footer-social-link):hover {
    color: #2a3a42; /* Mais escuro no hover */
}

/* Cards - fundo branco para melhor contraste */
.vaga-card,
.info-card {
    background: #ffffff;
    border: 1px solid rgba(58, 80, 90, 0.2);
    color: #1a1a1a;
}

.vaga-card p,
.info-card p {
    color: #2a2a2a;
}

/* Ícones - cor mais escura para melhor visibilidade */
.vaga-info-item i,
.vaga-requirements h4 i,
.vaga-description h4 i,
.info-card h3 i {
    color: #3a505a; /* Cinza escuro ao invés de rosa claro */
}

/* ============================================
   ARIA IMPROVEMENTS
   ============================================ */

/* Garantir que elementos interativos tenham aria-label quando necessário */
button:not([aria-label]):not([aria-labelledby]) {
    /* Adicionar aria-label via JS se necessário */
}

/* Carousel - melhorar ARIA */
.carousel {
    position: relative;
}

.carousel-item {
    display: none;
}

.carousel-item.active {
    display: block;
}

/* ============================================
   HEADING ORDER FIXES
   ============================================ */

/* Footer titles - já corrigido para h2 */
.footer-title {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 20px !important; /* Consistent with product.css */
}

/* ============================================
   ALT ATTRIBUTES
   ============================================ */

/* Garantir que imagens sem alt tenham tratamento adequado */
/* Nota: Alt attributes são adicionados via PHP (picture_webp function) */

/* ============================================
   CONTRASTE DARK MODE
   ============================================ */

[data-theme="dark"] body,
[data-theme="dark"] .container,
[data-theme="dark"] .page-section {
    color: #f5f5f5; /* Branco quase puro para máximo contraste */
}

[data-theme="dark"] p,
[data-theme="dark"] span,
[data-theme="dark"] li {
    color: #e0e0e0; /* Cinza claro para legibilidade */
}

[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] h5,
[data-theme="dark"] h6 {
    color: #ffffff; /* Branco para máximo contraste */
}

[data-theme="dark"] a:not(.btn):not(.action-btn):not(.btn-candidatar):not(.footer-link):not(.footer-social-link) {
    color: #ccb7bc; /* Rosa da marca para links */
}

[data-theme="dark"] .vaga-card,
[data-theme="dark"] .info-card {
    background: #2a2a2a;
    color: #f5f5f5;
    border-color: rgba(204, 183, 188, 0.3);
}

[data-theme="dark"] .vaga-card p,
[data-theme="dark"] .info-card p {
    color: #e0e0e0;
}

/* ============================================
   CONTRASTE FOOTER E BACKGROUNDS
   ============================================ */

/* Background Pink - garantir contraste suficiente */
/* REMOVED: This rule was overriding brand pink color - now handled in product.css with brand pink (#d9c2bd) */
/* .backgroundPink {
    background-color: #3a505a;
} */

/* REMOVED: Text color now handled in product.css with brand dark (#31265b) for good contrast on pink */
/* .backgroundPink .text-white {
    color: #ffffff !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
} */

/* Footer links - melhorar contraste */
.site-footer .footer-link {
    color: rgba(255, 255, 255, 0.85) !important; /* Match production: white with 85% opacity */
    opacity: 1; /* Fully opaque */
}

.site-footer .footer-link:hover {
    color: rgb(184, 149, 160) !important; /* Match production: darker pink/beige on hover */
    opacity: 1;
}

/* Footer contact items - melhorar contraste */
.site-footer .footer-contact-item,
.site-footer .footer-contact span,
.site-footer span:not(.footer-social-link) {
    color: #ffffff !important; /* White text */
    opacity: 1; /* Fully opaque */
}

.site-footer .footer-contact-item:hover,
.site-footer .footer-contact span:hover,
.site-footer span:not(.footer-social-link):hover {
    opacity: 1;
    color: #ffffff !important;
}

/* ============================================
   FONT DISPLAY - FONT AWESOME
   ============================================ */

/* Sobrescrever font-display do Font Awesome via CSS */
@font-face {
    font-family: 'Font Awesome 6 Free';
    font-display: swap; /* Usar swap para Font Awesome */
}

@font-face {
    font-family: 'Font Awesome 6 Brands';
    font-display: swap; /* Usar swap para Font Awesome Brands */
}

@font-face {
    font-family: 'Font Awesome 6 Solid';
    font-display: swap; /* Usar swap para Font Awesome Solid */
}

/* ============================================
   SKIP LINKS - KEYBOARD NAVIGATION
   ============================================ */

/* Skip links - hidden by default, visible on focus */
.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: #31265b; /* Brand dark color */
    color: #ffffff;
    padding: 8px 16px;
    text-decoration: none;
    z-index: 1000;
    border-radius: 4px;
    font-weight: 600;
    transition: top 0.2s ease;
}

.skip-link:focus {
    top: 10px;
    outline: 3px solid #d9c2bd; /* Brand pink for focus indicator */
    outline-offset: 2px;
}

/* Ensure skip links are accessible */
.skip-link:focus:not(:focus-visible) {
    outline: none;
}

.skip-link:focus-visible {
    top: 10px;
    outline: 3px solid #d9c2bd;
    outline-offset: 2px;
}

/* ============================================
   NAV PILLS TABS - COLOR CONTRAST & KEYBOARD NAVIGATION
   Aplica a todas as páginas de serviços (FAQ, Esmalteria, etc)
   ============================================ */

/* Active tab: white text on brand pink background */
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link,
.nav-pills a.nav-link.active {
    color: #ffffff !important; /* White for maximum contrast on pink */
    background-color: #d9c2bd !important; /* Brand pink */
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) !important; /* Subtle shadow for depth */
}

/* Inactive tabs: dark gray text on white/transparent background */
.nav-pills .nav-link:not(.active),
.nav-pills a.nav-link:not(.active) {
    color: #31265b !important; /* Brand dark for better contrast (4.5:1+ on white) */
    background-color: transparent !important;
}

/* Hover state for inactive tabs */
.nav-pills .nav-link:hover:not(.active),
.nav-pills a.nav-link:hover:not(.active) {
    color: #1a1a1a !important; /* Darker for better contrast on hover */
    background-color: rgba(217, 194, 189, 0.1) !important; /* Subtle pink background */
}

/* Focus indicator for keyboard navigation */
.nav-pills .nav-link:focus,
.nav-pills a.nav-link:focus {
    outline: 3px solid #31265b !important; /* Brand dark for high visibility */
    outline-offset: 2px !important;
    border-radius: 20px !important;
}

.nav-pills .nav-link:focus-visible,
.nav-pills a.nav-link:focus-visible {
    outline: 3px solid #31265b !important;
    outline-offset: 2px !important;
    border-radius: 20px !important;
}

/* Active tab focus - use lighter outline for better visibility */
.nav-pills .nav-link.active:focus,
.nav-pills .nav-link.active:focus-visible,
.nav-pills a.nav-link.active:focus,
.nav-pills a.nav-link.active:focus-visible {
    outline: 3px solid #ffffff !important; /* White outline on pink background */
    outline-offset: 2px !important;
}

/* Tab content - ensure text contrast */
.tab-content,
#pills-tabContent {
    color: #1a1a1a !important; /* Dark text for 4.5:1+ contrast on white */
}

.tab-content p,
#pills-tabContent p {
    color: #2a2a2a !important; /* Slightly lighter but still 4.5:1+ contrast */
}

.tab-content b,
.tab-content strong,
#pills-tabContent b,
#pills-tabContent strong {
    color: #1a1a1a !important; /* Dark for maximum contrast */
    font-weight: 700 !important;
}

/* ============================================
   ESMALTERIA TABLE - COLOR CONTRAST WCAG AA
   ============================================ */

/* Tabela de preços da esmalteria - garantir contraste adequado */
.tableManicure th {
    background-color: #31265b !important; /* Brand dark para melhor contraste */
    color: #ffffff !important; /* Texto branco para contraste 4.5:1+ */
    font-weight: 600 !important;
}

.tableManicure td {
    color: #1a1a1a !important; /* Texto escuro para contraste 4.5:1+ sobre branco */
    background-color: #ffffff !important;
}

/* Alternar linhas para melhor legibilidade */
.tableManicure tr:nth-child(even) td {
    background-color: #f9f9f9 !important;
    color: #1a1a1a !important; /* Manter texto escuro mesmo em linhas alternadas */
}

/* ============================================
   FAQ PAGE - DARK MODE CONTRAST FIXES (WCAG AA)
   ============================================ */

/* FAQ Tab Content - Dark Mode */
[data-theme="dark"] .tab-content,
[data-theme="dark"] #pills-tabContent,
[data-theme="dark"] .tab-pane {
    background-color: transparent !important;
    color: #f5f5f5 !important; /* Light text for 4.5:1+ contrast on dark background */
}

[data-theme="dark"] .tab-content p,
[data-theme="dark"] #pills-tabContent p,
[data-theme="dark"] .tab-pane p {
    color: #e0e0e0 !important; /* Slightly lighter but still 4.5:1+ contrast */
    line-height: 1.6 !important;
}

[data-theme="dark"] .tab-content b,
[data-theme="dark"] .tab-content strong,
[data-theme="dark"] #pills-tabContent b,
[data-theme="dark"] #pills-tabContent strong,
[data-theme="dark"] .tab-pane b,
[data-theme="dark"] .tab-pane strong {
    color: #ffffff !important; /* White for maximum contrast on dark background */
    font-weight: 700 !important;
}

/* FAQ Text Classes - Dark Mode */
[data-theme="dark"] .textPink {
    color: #e5d1cd !important; /* Lighter brand pink for better contrast on dark */
}

[data-theme="dark"] .textDarkGrey {
    color: #e0e0e0 !important; /* Light gray for better contrast on dark */
}

[data-theme="dark"] .text-center {
    color: #f5f5f5 !important; /* Light text for centered content */
}

/* FAQ Container Sections - Dark Mode */
[data-theme="dark"] .col-md-12.container,
[data-theme="dark"] .col-md-10.m-auto,
[data-theme="dark"] .col-md-12.mt-4 {
    background-color: transparent !important;
    color: #f5f5f5 !important;
}

[data-theme="dark"] .col-md-12.container p,
[data-theme="dark"] .col-md-10.m-auto p {
    color: #e0e0e0 !important;
}

/* FAQ Modal Content - Dark Mode */
[data-theme="dark"] .modal-content {
    background-color: #353535 !important; /* Lighter dark tone for cards */
    color: #f5f5f5 !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
}

[data-theme="dark"] .modal-body {
    background-color: #353535 !important;
    color: #f5f5f5 !important;
}

[data-theme="dark"] .modal-body h3.textPink {
    color: #e5d1cd !important; /* Lighter brand pink for better contrast */
}

[data-theme="dark"] .modal-body p.textDarkGrey {
    color: #e0e0e0 !important; /* Light gray for better contrast */
}

[data-theme="dark"] .modal-body p.textDarkGrey .textPink {
    color: #e5d1cd !important; /* Lighter brand pink for nested text */
}

[data-theme="dark"] .modal-body p.textDarkGrey b,
[data-theme="dark"] .modal-body p.textDarkGrey strong {
    color: #ffffff !important; /* White for maximum contrast */
    font-weight: 700 !important;
}

/* FAQ Hero Section - Dark Mode (already in dark-mode.css but ensuring contrast) */
[data-theme="dark"] .faqheader {
    color: #ffffff !important;
}

[data-theme="dark"] .faq-hero-content h2 {
    color: #ffffff !important;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8) !important; /* Strong shadow for readability */
}

/* FAQ Nav Pills - Dark Mode (already in dark-mode.css but ensuring contrast) */
[data-theme="dark"] .nav-pills .nav-link:not(.active) {
    color: #e0e0e0 !important; /* Light gray for readability on dark background */
    background-color: transparent !important;
}

[data-theme="dark"] .nav-pills .nav-link.active {
    color: #ffffff !important; /* White text on brand pink background */
    background-color: #d9c2bd !important; /* Brand pink background */
}

[data-theme="dark"] .nav-pills .nav-link:hover:not(.active) {
    color: #e5d1cd !important; /* Lighter brand pink on hover */
    background-color: rgba(217, 194, 189, 0.2) !important; /* Subtle brand pink background */
}

/* FAQ List Items - Dark Mode */
[data-theme="dark"] .tab-content li,
[data-theme="dark"] #pills-tabContent li,
[data-theme="dark"] .tab-pane li {
    color: #e0e0e0 !important; /* Light gray for list items */
}

[data-theme="dark"] .tab-content li b,
[data-theme="dark"] .tab-content li strong,
[data-theme="dark"] #pills-tabContent li b,
[data-theme="dark"] #pills-tabContent li strong {
    color: #ffffff !important; /* White for bold text */
}

/* FAQ Links - Dark Mode */
[data-theme="dark"] .tab-content a,
[data-theme="dark"] #pills-tabContent a,
[data-theme="dark"] .tab-pane a {
    color: #ccb7bc !important; /* Brand pink for links */
    text-decoration: underline !important;
}

[data-theme="dark"] .tab-content a:hover,
[data-theme="dark"] #pills-tabContent a:hover,
[data-theme="dark"] .tab-pane a:hover {
    color: #e5d1cd !important; /* Lighter brand pink on hover */
}

/* FAQ Position Relative Sections - Dark Mode */
[data-theme="dark"] .position-relative,
[data-theme="dark"] .col-md-12.position-relative {
    background-color: transparent !important;
    color: #f5f5f5 !important;
}

[data-theme="dark"] .position-relative p,
[data-theme="dark"] .col-md-12.position-relative p {
    color: #e0e0e0 !important;
}

/* FAQ Text Left Sections - Dark Mode */
[data-theme="dark"] .text-left {
    color: #f5f5f5 !important;
}

[data-theme="dark"] .text-left p {
    color: #e0e0e0 !important;
}

[data-theme="dark"] .text-left b,
[data-theme="dark"] .text-left strong {
    color: #ffffff !important;
    font-weight: 700 !important;
}

/* FAQ Container with Margin Auto - Dark Mode */
[data-theme="dark"] .m-auto {
    color: #f5f5f5 !important;
}

[data-theme="dark"] .m-auto p {
    color: #e0e0e0 !important;
}

/* FAQ Font Weight Bold - Dark Mode */
[data-theme="dark"] .font-weight-bold {
    color: #ffffff !important;
    font-weight: 700 !important;
}

/* FAQ Inline Styles Override - Dark Mode */
/* Ensure inline styles don't override dark mode colors */
[data-theme="dark"] [style*="letter-spacing"] {
    color: #e0e0e0 !important;
}

[data-theme="dark"] [style*="letter-spacing"] b,
[data-theme="dark"] [style*="letter-spacing"] strong {
    color: #ffffff !important;
    font-weight: 700 !important;
}

/* FAQ Break Tags - ensure spacing is visible */
[data-theme="dark"] br {
    /* Break tags don't need color, but ensure they create visible spacing */
    display: block;
    content: "";
    margin-top: 0.5em;
}