/*
Theme Name: Tur SancheMTK Theme
Theme URI: https://sanche.org
Author: SANCHE MARKETING INTELIGENTE
Author URI: https://sanche.org
Description: Tema de alta performance focado em conversão, desenvolvido sob medida para Biu Tur.
Version: 1.0.0
License: Proprietary
Text Domain: tur-sanchemtk
*/

:root {
    --primary-color: #004aad;
    --secondary-color: #d4af37;
    /* Premium Gold */
    --text-color: #333;
    --bg-light: #f4f4f4;
    --footer-bg: #021024;
    /* Premium Dark Blue */
    --white: #ffffff;
    --transition: all 0.3s ease;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    line-height: 1.6;
    color: var(--text-color);
    background-color: var(--bg-light);
}

a {
    text-decoration: none;
    color: inherit;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Utilities */
.container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px;
}

.text-center {
    text-align: center;
}

.btn {
    display: inline-block;
    padding: 15px 40px;
    background: var(--secondary-color);
    color: #000;
    font-weight: 800;
    /* Bolder font */
    border-radius: 50px;
    text-transform: uppercase;
    transition: var(--transition);
    cursor: pointer;
    border: none;
    letter-spacing: 1px;
}

.btn:hover {
    transform: scale(1.05);
    /* Grow effect */
    box-shadow: 0 4px 15px rgba(255, 193, 7, 0.4);
}

/* Sections */
.section-padding {
    padding: 80px 0;
    /* More spacing */
}

/* Floating WhatsApp */
.floating-whatsapp {
    position: fixed;
    bottom: 25px;
    right: 25px;
    background: #25D366;
    color: white;
    width: 65px;
    height: 65px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    z-index: 1000;
    font-size: 35px;
    transition: all 0.3s;
}

.floating-whatsapp:hover {
    background: #128C7E;
}

/* License Overlay */
.license-expired-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.95);
    z-index: 9999;
    color: white;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

/* Navigation Styles */
.main-nav ul {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 20px;
    align-items: center;
}

.main-nav a {
    color: white;
    font-weight: 500;
    text-transform: uppercase;
    font-size: 14px;
    padding: 10px;
    transition: var(--transition);
}

.main-nav a:hover {
    color: var(--secondary-color);
}

.btn-menu-highlight {
    background: var(--secondary-color);
    border-radius: 5px;
    color: #000 !important;
    padding: 10px 20px !important;
}

.btn-menu-highlight:hover {
    background: white;
    color: var(--primary-color) !important;
}

/* Mobile Menu Button */
.menu-toggle {
    display: none;
    /* Hidden on desktop */
    background: none;
    border: none;
    color: white;
    font-size: 24px;
    cursor: pointer;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .menu-toggle {
        display: block;
    }

    .main-nav {
        position: absolute;
        top: 100%;
        /* Below header */
        left: 0;
        width: 100%;
        background: var(--primary-color);
        padding: 20px;
        flex-direction: column;
        transform: translateY(-200%);
        /* Start hidden above */
        transition: transform 0.4s ease-in-out;
        z-index: 100;
        opacity: 0;
        pointer-events: none;
    }

    .main-nav.active {
        transform: translateY(0);
        opacity: 1;
        pointer-events: all;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    }

    .main-nav ul {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 15px;
    }

    header.site-header {
        position: relative;
        /* For absolute positioning context */
    }
}

/* Dropdown Menu Styles */
.main-nav ul li {
    position: relative;
}

.main-nav ul.sub-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    /* Transparent Primary Color (approx #004aad at 90%) */
    background: rgba(0, 74, 173, 0.9);
    min-width: 200px;
    flex-direction: column;
    gap: 0;
    padding: 10px 0;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    z-index: 1000;
    margin-top: 15px;
    /* Move down */
    border-radius: 8px;
    /* Soften edges */
}

/* Invisible bridge to prevent menu from closing when moving mouse down */
.main-nav ul.sub-menu::before {
    content: "";
    position: absolute;
    top: -15px;
    left: 0;
    width: 100%;
    height: 15px;
    background: transparent;
}

.main-nav ul li:hover>ul.sub-menu {
    display: flex;
}

.main-nav ul.sub-menu li a {
    padding: 10px 20px;
    display: block;
    white-space: nowrap;
    font-size: 13px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.main-nav ul.sub-menu li:last-child a {
    border-bottom: none;
}

.main-nav ul.sub-menu li a:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--secondary-color);
}

/* Mobile Sub-menu adjustment */
@media (max-width: 768px) {
    .main-nav ul.sub-menu {
        position: static;
        background: rgba(0, 0, 0, 0.1);
        box-shadow: none;
        display: none;
        /* Hidden by default matching JS or CSS helper needed usually, but basic hover on mobile is tricky. */
        /* For simple implementation, let's make it visible if parent is clicked?
           Or just list them differently.
           Let's just make it block for now if desktop hover logic doesn't apply nicely.
           Actually, simple CSS hover on mobile often requires double tap.
           Let's ensure it flows in the column.
        */
        width: 100%;
    }

    .main-nav ul li:hover>ul.sub-menu {
        display: flex;
        /* works for basic touch */
    }
}

/* Hero Slider */
.hero-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 1.5s ease-in-out;
}

.hero-slide.active {
    opacity: 1;
}

/* Footer Styles */
.site-footer {
    background-color: var(--footer-bg);
    color: white;
    padding: 60px 0 20px;
    margin-top: 0;
}

/* Transparent Header Styles */
.site-header {
    background: transparent;
    padding: 15px 0;
    color: white;
    position: absolute;
    /* Overlay */
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    /* Above hero overlay (which is -1) */
}

.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Ensure mobile menu still pushes down or overlays properly */
@media (max-width: 768px) {
    .site-header {
        background: transparent;
        /* Keep transparent */
    }

    /* When menu is open, maybe we want a background? 
       For now, let's keep it transparent over the hero. 
       The menu itself (.main-nav) has a background color set previously.
    */
    .main-nav {
        /* It was var(--primary-color) which is blue, so the menu dropdown is readable. */
        top: 100%;
        /* Below the transparent header */
    }
}

/* Custom Logo Styles */
.custom-logo-link img {
    max-height: 80px;
    width: auto;
    transition: var(--transition);
}

.footer-logo .custom-logo-link img {
    max-height: 100px;
    /* Slightly larger in footer */
    margin: 0 auto;
}

@media (max-width: 768px) {
    .custom-logo-link img {
        max-height: 60px;
        /* Smaller on mobile */
    }
}

/* Footer Grid Layout */
.footer-grid {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 30px;
    padding: 20px 0;
}

.footer-column {
    flex: 1;
    min-width: 250px;
}

.footer-column h3 {
    margin-bottom: 15px;
    font-size: 18px;
    text-transform: uppercase;
    border-bottom: 2px solid var(--secondary-color);
    display: inline-block;
    padding-bottom: 5px;
}

.footer-nav ul,
.footer-menu {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-nav li a {
    color: #ccc;
    text-decoration: none;
    display: block;
    margin-bottom: 8px;
    transition: var(--transition);
}

.footer-nav li a:hover {
    color: var(--secondary-color);
    padding-left: 5px;
}

/* Mobile Footer: Centered & Stacked */
@media (max-width: 768px) {
    .footer-grid {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .footer-column {
        width: 100%;
        margin-bottom: 30px;
    }

    .footer-logo .custom-logo-link img {
        margin: 0 auto;
    }

    .footer-nav li a:hover {
        padding-left: 0;
        /* Remove shift on mobile center */
    }
}

/* Footer Grid Layout */
.footer-grid {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 30px;
    padding: 20px 0;
}

.footer-column {
    flex: 1;
    min-width: 250px;
}

.footer-column h3 {
    margin-bottom: 15px;
    font-size: 18px;
    text-transform: uppercase;
    border-bottom: 2px solid var(--secondary-color);
    display: inline-block;
    padding-bottom: 5px;
}

.footer-nav ul,
.footer-menu {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-nav li a {
    color: #ccc;
    text-decoration: none;
    display: block;
    margin-bottom: 8px;
    transition: var(--transition);
}

.footer-nav li a:hover {
    color: var(--secondary-color);
    padding-left: 5px;
}

/* Mobile Footer: Centered & Stacked */
@media (max-width: 768px) {
    .footer-grid {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .footer-column {
        width: 100%;
    }

    .footer-logo .custom-logo-link img {
        margin: 0 auto;
    }

    .footer-nav li a:hover {
        padding-left: 0;
        /* Remove shift on mobile center */
    }
}

/* Footer Bottom Bar */
.footer-bottom-bar {
    background-color: rgba(0, 0, 0, 0.4);
    /* Darker overlay */
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-top: 20px;
    font-size: 9px;
    /* Smaller text as requested */
}

.footer-bottom-bar .developer-credit {
    margin: 0;
    color: rgba(255, 255, 255, 0.7);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.footer-bottom-bar a {
    color: white;
    font-weight: bold;
}

.footer-bottom-bar a:hover {
    color: var(--secondary-color);
}

/* Lightbox Gallery Styles */
.lightbox-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    z-index: 2000;
    display: none;
    /* Hidden by default */
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.lightbox-overlay.active {
    opacity: 1;
}

.lightbox-content {
    max-width: 90%;
    max-height: 90%;
    position: relative;
}

.lightbox-content img {
    max-width: 100%;
    max-height: 90vh;
    /* Viewport height limit */
    border-radius: 4px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
}

.lightbox-close {
    position: absolute;
    top: 20px;
    right: 30px;
    font-size: 40px;
    color: white;
    cursor: pointer;
    z-index: 2001;
    transition: 0.3s;
}

.lightbox-close:hover {
    color: var(--secondary-color);
}

.lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.5);
    color: white;
    padding: 15px;
    cursor: pointer;
    font-size: 24px;
    z-index: 2001;
    transition: 0.3s;
    border-radius: 50%;
}

.lightbox-nav:hover {
    background: var(--secondary-color);
    color: black;
}

.lightbox-prev {
    left: 20px;
}

.lightbox-next {
    right: 20px;
}

/* Hide Nav on Single Image if needed, handled by JS usually */