/*
Theme Name: Zelyth Theme
Theme URI: https://zelyth.com
Author: YTS Commerce
Author URI: https://zelyth.com
Description: Custom, high-end theme for Zelyth featuring framed layouts, bespoke typography, and specialized UI components for aromatherapy and wellness.
Version: 1.0.2026
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: zelyth
Requires at least: 6.0
Tested up to: 6.9
Requires PHP: 7.4
*/

/* --- 0. FONTS --- */
@font-face {
    font-family: 'HeadingNow';
    src: url('/wp-fonts/HeadingNow-93ExtendedBook.eot');
    src: url('/wp-fonts/HeadingNow-93ExtendedBook.eot?#iefix') format('embedded-opentype'),
         url('/wp-fonts/HeadingNow-93ExtendedBook.woff2') format('woff2'),
         url('/wp-fonts/HeadingNow-93ExtendedBook.woff') format('woff'),
         url('/wp-fonts/HeadingNow-93ExtendedBook.ttf') format('truetype'),
         url('/wp-fonts/HeadingNow-93ExtendedBook.svg#HeadingNow') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* --- 1. CORE VARIABLES & FRAMEWORK --- */
:root {
    --bg-color: #EBE8E1;
    --accent-dark: #373C34;
    --text-white: #FFFFFF;
    --frame-padding: 24px;
    --radius-main: 28px;
    
    --font-heading: 'HeadingNow', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

* {
    box-sizing: border-box;
}

body {
    background-color: var(--bg-color);
    margin: 0;
    padding: 0;
    font-family: var(--font-body);
    color: var(--accent-dark);
}

h1, h2, h3, h4, h5, h6,
.hero-title,
.logo-text,
.entry-title,
.page-title,
.product_title {
    font-family: var(--font-heading);
    font-weight: normal;
}

.site-frame {
    padding: var(--frame-padding);
    width: 100%;
    margin: 0 auto;
    position: relative;
}

/* --- 2. HEADER POSITIONERING & MARGES --- */
.custom-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: absolute;
    top: var(--frame-padding);
    left: var(--frame-padding);
    right: var(--frame-padding);
    padding: 24px 32px; /* Binnen-afstand zodat alles netjes binnen het beeld valt */
    z-index: 100;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), background 0.4s ease, opacity 0.4s ease, padding 0.4s ease;
}

/* STICKY HEADER (Glassmorphism) */
.custom-header.is-sticky {
    position: fixed;
    top: 20px;
    left: 40px;
    right: 40px;
    padding: 12px 28px;
    border-radius: 100px;
    background: rgba(235, 232, 225, 0.75);
    backdrop-filter: blur(20px) saturate(160%);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    border: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

.custom-header.header-hidden {
    transform: translateY(-120%);
    opacity: 0;
}

.custom-header.header-visible {
    transform: translateY(0);
    opacity: 1;
}

.header-left, 
.header-right {
    display: flex;
    align-items: center;
    z-index: 2;
}

.header-center {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1;
}

.header-center img,
.custom-logo-link img {
    max-height: 52px;
    width: auto;
    display: block;
    object-fit: contain;
    filter: brightness(0) invert(92%) sepia(8%) saturate(300%) hue-rotate(5deg) brightness(105%);
    transition: filter 0.3s ease, transform 0.3s ease;
}

.header-center a:hover img {
    transform: scale(1.03);
}

.is-sticky .header-center img,
.is-sticky .custom-logo-link img {
    filter: none;
}

.logo-text {
    font-size: 28px;
    color: var(--bg-color);
    text-decoration: none;
    letter-spacing: 1px;
}

/* --- 3. MENU ITEMS, BUTTONS & HOVER STATES --- */
.header-menu {
    list-style: none;
    display: flex;
    gap: 10px;
    padding: 0;
    margin: 0;
}

/* Basis styling voor glazen knoppen */
.header-menu li a,
.header-icon,
.mobile-menu-toggle {
    text-decoration: none;
    color: var(--text-white);
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.25);
    transition: background 0.3s ease, transform 0.2s ease, border-color 0.3s ease, box-shadow 0.3s ease, color 0.3s ease;
    cursor: pointer;
}

/* HOVER EFFECTEN DESKTOP MENU & ICONS */
.header-menu li a:hover,
.header-icon:hover,
.mobile-menu-toggle:hover {
    background: rgba(255, 255, 255, 0.4);
    border-color: rgba(255, 255, 255, 0.5);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.header-menu li a:active,
.header-icon:active,
.mobile-menu-toggle:active {
    transform: translateY(0);
}

/* STICKY HOVER STATES */
.is-sticky .header-menu li a,
.is-sticky .header-icon,
.is-sticky .mobile-menu-toggle {
    color: var(--accent-dark);
    background: rgba(0, 0, 0, 0.05);
    border-color: rgba(0, 0, 0, 0.08);
}

.is-sticky .header-menu li a:hover,
.is-sticky .header-icon:hover,
.is-sticky .mobile-menu-toggle:hover {
    background: rgba(0, 0, 0, 0.12);
    border-color: rgba(0, 0, 0, 0.15);
}

.header-menu li a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 22px;
    border-radius: 40px;
    font-size: 14px;
    font-weight: 400;
    line-height: 1;
}

.header-right {
    gap: 10px;
}

.header-icon {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.cart-count {
    position: absolute;
    top: -2px;
    right: -2px;
    background: var(--accent-dark);
    color: var(--text-white);
    font-size: 11px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* --- 4. RESPONSIVE HAMBURGER & OFF-CANVAS DRAWER --- */
.mobile-menu-toggle {
    display: none;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    padding: 0;
}

.mobile-menu-toggle span {
    display: block;
    width: 18px;
    height: 2px;
    background-color: currentColor;
    border-radius: 2px;
}

.mobile-menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: 998;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
}

.mobile-menu-overlay.is-open {
    opacity: 1;
    pointer-events: auto;
}

.mobile-menu-drawer {
    position: fixed;
    top: 0;
    left: 0;
    width: 80%;
    max-width: 360px;
    height: 100vh;
    background-color: var(--bg-color);
    z-index: 999;
    padding: 40px 28px;
    box-shadow: 10px 0 30px rgba(0,0,0,0.12);
    transform: translateX(-100%);
    opacity: 0;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease;
    display: flex;
    flex-direction: column;
}

.mobile-menu-drawer.is-open {
    transform: translateX(0);
    opacity: 1;
}

.mobile-menu-close {
    align-self: flex-end;
    background: none;
    border: none;
    font-size: 32px;
    color: var(--accent-dark);
    cursor: pointer;
    line-height: 1;
    margin-bottom: 30px;
    transition: transform 0.2s ease;
}

.mobile-menu-close:hover {
    transform: scale(1.15);
}

.mobile-header-menu {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.mobile-header-menu li a {
    text-decoration: none;
    color: var(--accent-dark);
    font-size: 20px;
    font-family: var(--font-heading);
    display: block;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.mobile-header-menu li a:hover {
    transform: translateX(6px);
    opacity: 0.8;
}

/* Breekpunt voor Mobiel */
@media (max-width: 900px) {
    .desktop-nav {
        display: none;
    }
    .mobile-menu-toggle {
        display: flex;
    }
    .custom-header {
        padding: 16px 20px;
    }
}

/* --- 5. HERO CONTAINER & CUTOUT BUTTON --- */
.hero-container {
    position: relative;
    width: 100%;
    height: calc(100vh - (var(--frame-padding) * 2));
    min-height: 600px;
    border-radius: var(--radius-main);
}

.hero-image-wrapper {
    width: 100%;
    height: 100%;
    position: relative;
    border-radius: var(--radius-main);
    overflow: hidden;
}

.hero-bg {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero-overlay-content {
    position: absolute;
    top: 45%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: var(--text-white);
    width: 90%;
}

.hero-title {
    font-size: clamp(3rem, 8vw, 7rem);
    margin: 0;
    letter-spacing: 1px;
    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.hero-subtitle {
    font-size: 16px;
    margin-top: 10px;
    opacity: 0.9;
    letter-spacing: 0.5px;
}

.hero-cutout {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--bg-color);
    padding: 12px 24px 0 24px;
    border-top-left-radius: 28px;
    border-top-right-radius: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
}

/* --- HERO BUTTON & SUBSLE HOVER STATE --- */
.hero-btn {
    display: inline-block;
    background-color: var(--accent-dark);
    color: var(--text-white);
    padding: 16px 36px;
    border-radius: 100px;
    text-decoration: none;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0.3px;
    line-height: 1;
    white-space: nowrap;
    margin-bottom: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    outline: none;
    
    /* Vloeiende overgang net als de menu-items */
    transition: background-color 0.3s ease, transform 0.2s ease, border-color 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
}

/* Zelfde subtiele hover-idee als de menu-knoppen */
.hero-btn:hover {
    background-color: #2a2e28; /* Subtiel lichter/zachter donkergroen */
    border-color: rgba(255, 255, 255, 0.25);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.12);
}

.hero-btn:active {
    transform: translateY(0);
    box-shadow: none;
}

.cutout-corner {
    position: absolute;
    bottom: 0;
    pointer-events: none;
}

.corner-left {
    left: -32px;
}

.corner-right {
    right: -32px;
}
            </a>
        </div>

        <div class="header-right">
            <?php 
            $account_url = class_exists( 'WooCommerce' ) ? get_permalink( get_option('woocommerce_myaccount_page_id') ) : home_url( '/my-account/' ); 
            ?>
            <a href="<?php echo esc_url( $account_url ); ?>" class="header-icon account-icon" title="Account">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg>
            </a>

            <?php if ( class_exists( 'WooCommerce' ) ) : ?>
                <a href="<?php echo esc_url( wc_get_cart_url() ); ?>" class="header-icon cart-icon" title="Cart">
                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M6 2L3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z"></path><line x1="3" y1="6" x2="21" y2="6"></line><path d="M16 10a4 4 0 0 1-8 0"></path></svg>
                    <?php 
                    if ( WC()->cart ) {
                        $count = WC()->cart->get_cart_contents_count(); 
                        if ( $count > 0 ) : ?>
                            <span class="cart-count"><?php echo esc_html( $count ); ?></span>
                        <?php endif;
                    }
                    ?>
                </a>
            <?php else : ?>
                <a href="<?php echo esc_url( home_url( '/cart/' ) ); ?>" class="header-icon cart-icon" title="Cart">
                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M6 2L3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z"></path><line x1="3" y1="6" x2="21" y2="6"></line><path d="M16 10a4 4 0 0 1-8 0"></path></svg>
                </a>
            <?php endif; ?>
        </div>
    </header>

    <!-- MOBIEL OFF-CANVAS MENU -->
    <div class="mobile-menu-overlay" id="menu-overlay"></div>
    <aside class="mobile-menu-drawer" id="mobile-drawer">
        <button class="mobile-menu-close" id="menu-close-btn" aria-label="Sluit Menu">&times;</button>
        <nav class="mobile-nav">
            <?php 
            wp_nav_menu( array(
                'menu'           => 'Main Menu',
                'theme_location' => 'primary',
                'container'      => false,
                'menu_class'     => 'mobile-header-menu',
                'fallback_cb'    => false,
            ) ); 
            ?>
        </nav>
    </aside>

    <script>
    document.addEventListener('DOMContentLoaded', function() {
        let lastScrollTop = 0;
        const header = document.getElementById('site-header');
        
        window.addEventListener('scroll', function() {
            let scrollTop = window.pageYOffset || document.documentElement.scrollTop;
            if (scrollTop > 150) {
                header.classList.add('is-sticky');
                if (scrollTop < lastScrollTop) {
                    header.classList.remove('header-hidden');
                    header.classList.add('header-visible');
                } else {
                    header.classList.remove('header-visible');
                    header.classList.add('header-hidden');
                }
            } else {
                header.classList.remove('is-sticky', 'header-hidden', 'header-visible');
            }
            lastScrollTop = scrollTop <= 0 ? 0 : scrollTop;
        });

        const openBtn = document.getElementById('menu-open-btn');
        const closeBtn = document.getElementById('menu-close-btn');
        const drawer = document.getElementById('mobile-drawer');
        const overlay = document.getElementById('menu-overlay');

        if (openBtn) openBtn.addEventListener('click', () => { drawer.classList.add('is-open'); overlay.classList.add('is-open'); document.body.style.overflow = 'hidden'; });
        if (closeBtn) closeBtn.addEventListener('click', () => { drawer.classList.remove('is-open'); overlay.classList.remove('is-open'); document.body.style.overflow = ''; });
        if (overlay) overlay.addEventListener('click', () => { drawer.classList.remove('is-open'); overlay.classList.remove('is-open'); document.body.style.overflow = ''; });
    });
    </script>