/**
 * SEO & Mobile Fixes - Lumevié
 * Correções de SEO e usabilidade mobile sem quebrar o design
 */

/* ========================================
   SEO: H1 Único (invisível para usuários)
   ======================================== */
.page-h1 {
    position: absolute;
    left: -10000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* ========================================
   Manter estilos visuais do H1 original
   ======================================== */
.header .caption .hero-title {
    position: relative;
    margin-bottom: 20px;
    font-family: 'Gilda Display', serif;
    font-size: 55px;
    text-transform: uppercase;
    line-height: 1.35em;
    -webkit-animation-delay: .6s;
    animation-delay: .6s;
    color: #fff;
    font-weight: 400;
    letter-spacing: 15px;
    text-shadow: 0 2px 1px rgba(0, 0, 0, 0.6);
}

/* ========================================
   Manter estilos do subtitle (h2 menor)
   ======================================== */
.header .caption .subtitle {
    font-family: 'Gilda Display', serif;
    font-size: 30px;
    font-weight: 400;
    color: #fff;
    text-transform: none;
    letter-spacing: normal;
    line-height: 1.25em;
    margin-bottom: 10px;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.6);
}

/* ========================================
   MOBILE: Alvos de toque maiores
   ======================================== */
@media (max-width: 991px) {
    /* Menu lateral - reduzir espaçamento para caber todos os itens */
    #lumevie-aside .lumevie-main-menu > ul > li > a {
        margin: 4px 0 0 0 !important;
        padding: 0 0 4px 0 !important;
    }
    
    /* Submenu - reduzir espaçamento */
    #lumevie-aside .lumevie-main-menu ul ul li a {
        padding: 5px 0 5px 15px !important;
    }
    
    /* Menu lateral - aumentar área de toque */
    .lumevie-main-menu ul li a {
        padding: 14px 20px;
        min-height: 48px;
        display: flex;
        align-items: center;
    }
    
    /* Botões de ação */
    .butn-dark a,
    .butn-light a {
        min-height: 48px;
        padding: 14px 30px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    
    /* Links de redes sociais */
    .footer-about-social-list a {
        min-width: 48px;
        min-height: 48px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 12px;
    }
    
    /* Navegação do carrossel */
    .owl-nav button {
        min-width: 48px;
        min-height: 48px;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
}

/* ========================================
   MOBILE: Texto maior para legibilidade
   ======================================== */
@media (max-width: 767px) {
    /* Menu lateral - garantir scroll e visualização de todos os itens */
    #lumevie-aside {
        overflow-y: auto !important;
        max-height: 100vh !important;
        padding-bottom: 60px !important;
    }
    
    /* Aumentar fonte base */
    body {
        font-size: 16px;
        line-height: 1.6;
    }
    
    /* Avaliações - aumentar de 12px para 14px */
    .testimonials .info span {
        font-size: 14px !important;
    }
    
    /* Hero title mobile */
    .header .caption .hero-title {
        font-size: 30px;
        margin-bottom: 15px;
        letter-spacing: 5px;
    }
    
    /* Subtitle mobile */
    .header .caption .subtitle {
        font-size: 20px;
        margin-bottom: 8px;
    }
}

/* ========================================
   ACESSIBILIDADE: Skip Link
   ======================================== */
.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: #aa8453;
    color: white;
    padding: 8px 16px;
    text-decoration: none;
    z-index: 100;
    font-weight: bold;
}

.skip-link:focus {
    top: 0;
}

/* ========================================
   ACESSIBILIDADE: Estados de foco visíveis
   Apenas para navegação por teclado (não mouse)
   ======================================== */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid #aa8453;
    outline-offset: 2px;
}

/* Remover outline no clique do mouse */
a:focus:not(:focus-visible),
button:focus:not(:focus-visible) {
    outline: none;
}

/* ========================================
   CORREÇÃO: Botões Owl Carousel - Centralizar setas
   ======================================== */
.testimonials .owl-theme .owl-nav button.owl-prev,
.testimonials .owl-theme .owl-nav button.owl-next,
.owl-carousel .owl-nav button.owl-prev,
.owl-carousel .owl-nav button.owl-next {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    padding: 0 !important;
    height: 48px !important;
    width: 48px !important;
    font-size: 20px !important;
}

.testimonials .owl-theme .owl-nav button span,
.owl-carousel .owl-nav button.owl-prev span,
.owl-carousel .owl-nav button.owl-next span {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
    height: 100% !important;
    width: 100% !important;
    font-size: 20px !important;
}

/* Centralizar o ícone dentro do span */
.testimonials .owl-theme .owl-nav button span:before,
.owl-carousel .owl-nav button span:before {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 20px !important;
}

/* ========================================
   Hierarquia de Headings
   ======================================== */
.section-title {
    font-size: 40px;
    line-height: 1.3;
    margin-bottom: 20px;
}

.section-subtitle {
    font-size: 18px;
    color: #aa8453;
    margin-bottom: 10px;
}

@media (max-width: 767px) {
    .section-title {
        font-size: 28px;
    }
    
    .section-subtitle {
        font-size: 16px;
    }
}

/* ========================================
   Placeholder dos inputs - Cor cinza (TODOS OS DISPOSITIVOS)
   ======================================== */
.booking-inner input::placeholder,
.booking-inner textarea::placeholder,
.contact__form input::placeholder,
.contact__form textarea::placeholder,
input[type="text"]::placeholder,
input[type="email"]::placeholder,
input[type="tel"]::placeholder,
textarea::placeholder {
    color: #999999 !important;
    opacity: 1 !important;
}

.booking-inner input::-webkit-input-placeholder,
.booking-inner textarea::-webkit-input-placeholder,
.contact__form input::-webkit-input-placeholder,
.contact__form textarea::-webkit-input-placeholder,
input[type="text"]::-webkit-input-placeholder,
input[type="email"]::-webkit-input-placeholder,
input[type="tel"]::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
    color: #999999 !important;
    opacity: 1 !important;
}

.booking-inner input::-moz-placeholder,
.booking-inner textarea::-moz-placeholder,
.contact__form input::-moz-placeholder,
.contact__form textarea::-moz-placeholder,
input[type="text"]::-moz-placeholder,
input[type="email"]::-moz-placeholder,
input[type="tel"]::-moz-placeholder,
textarea::-moz-placeholder {
    color: #999999 !important;
    opacity: 1 !important;
}

.booking-inner input:-ms-input-placeholder,
.booking-inner textarea:-ms-input-placeholder,
.contact__form input:-ms-input-placeholder,
.contact__form textarea:-ms-input-placeholder,
input[type="text"]:-ms-input-placeholder,
input[type="email"]:-ms-input-placeholder,
input[type="tel"]:-ms-input-placeholder,
textarea:-ms-input-placeholder {
    color: #999999 !important;
    opacity: 1 !important;
}

/* Sobrescrever o CSS do tema que usa #222 */
.input1_inner input::placeholder {
    color: #999999 !important;
}