/*

Theme Name: Iz Lesa Custom

Theme URI: https://izlesa.si

Description: A high-performance, custom-built theme for Iz Lesa Carpentry.

Author: Website Dev

Version: 3.4

*/



/* 1. ROOT VARIABLES */

:root {

    --wood-dark: #3d2b1f;

    --wood-mid: #5c4033;

    --wood-light: #fdfaf7;

    --accent-gold: #c5a059;

    --text-main: #333333;

    --white: #ffffff;

    --section-padding: 100px 0;

}



/* 2. BASE RESET */

body { 

    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; 

    margin: 0; 

    line-height: 1.6; 

    color: var(--text-main); 

    -webkit-font-smoothing: antialiased;

    overflow-x: hidden;

}



.container { 

    max-width: 1200px; 

    margin: 0 auto; 

    padding: 0 20px; 

}



/* 3. HEADER & NAVIGATION */

.site-header { 

    background: var(--white); 

    padding: 15px 0; 

    position: sticky; 

    top: 0; 

    z-index: 1000; 

    box-shadow: 0 2px 10px rgba(0,0,0,0.05); 

    overflow: visible; 

}



.logo { 

    font-size: 28px; 

    font-weight: 900; 

    text-decoration: none; 

    color: var(--wood-dark); 

    text-transform: uppercase; 

    letter-spacing: -1px;

}



.menu-toggle {

    display: none;

    background: transparent;

    border: none;

    padding: 10px;

    cursor: pointer;

    border-radius: 4px;

}




/* Desktop Menu Layout */

.main-navigation > ul,

.main-navigation > div > ul { 

    list-style: none !important; 

    margin: 0 !important; 

    padding: 0 !important; 

    display: flex !important; 

    flex-direction: row !important;

    gap: 30px; 

    align-items: center;

}



.main-navigation li { 

    position: relative; 

    list-style: none !important;

    margin: 0 !important;

}



.main-navigation a { 

    text-decoration: none; 

    color: var(--wood-dark); 

    font-weight: 600; 

    font-size: 14px; 

    text-transform: uppercase; 

    transition: 0.3s;

    display: block;

    padding: 15px 0;

}



.main-navigation a:hover,

.main-navigation li.active > a,

.main-navigation li.current-menu-item > a { 

    color: var(--accent-gold); 

}



/* Dropdown Sub-menu */

.main-navigation ul ul {

    position: absolute;

    top: 100%;

    left: 0;

    background: var(--white);

    min-width: 220px;

    box-shadow: 0 10px 30px rgba(0,0,0,0.1);

    padding: 10px 0 !important;

    display: none !important; 

    flex-direction: column !important; 

    gap: 0 !important;

    z-index: 999;

    border-top: 3px solid var(--accent-gold);

}



.main-navigation li:hover > ul {

    display: flex !important; 

}



.main-navigation ul ul a {

    padding: 12px 20px;

    text-transform: none; 

    font-size: 13px;

    border-bottom: 1px solid #f9f9f9;

}



/* 4. BUTTONS */

.btn {

    display: inline-block;

    padding: 18px 40px;

    text-decoration: none;

    border-radius: 4px;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 1.5px;

    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);

}



.btn-primary { background: var(--accent-gold); color: white; border: none; }

.btn-outline { background: transparent; border: 2px solid white; color: white; }

.btn:hover { transform: translateY(-5px); box-shadow: 0 15px 30px rgba(0,0,0,0.3); }



/* 5. SERVICE & ABOUT PAGE COMPONENTS */

.feature-card {

    background: white;

    padding: 40px;

    border-radius: 8px;

    box-shadow: 0 10px 30px rgba(0,0,0,0.05);

    transition: transform 0.3s ease;

    height: 100%;

    text-align: center;

}



.feature-card:hover { transform: translateY(-10px); }



.step-item {

    display: flex;

    gap: 30px;

    margin-bottom: 40px;

    align-items: flex-start;

}



.step-number {

    background: var(--accent-gold);

    color: white;

    width: 50px;

    height: 50px;

    min-width: 50px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    font-weight: 900;

    font-size: 1.2rem;

}



/* About Page Specific Styles */

.about-image-frame {

    position: relative;

    padding-bottom: 20px;

    padding-right: 20px;

}



.about-image-frame img {

    display: block;

    width: 100%;

    height: auto;

    border-radius: 12px;

    box-shadow: 20px 20px 0 var(--wood-light);

}



/* 6. GALLERY & LIGHTBOX */

.project-gallery {

    display: grid;

    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));

    gap: 20px;

}



.gallery-link {

    cursor: zoom-in;

    border-radius: 8px;

    overflow: hidden;

    aspect-ratio: 1/1;

    transition: transform 0.3s ease;

}



.gallery-link:hover { transform: scale(1.03); }



.lightbox {

    display: none;

    position: fixed;

    z-index: 2000;

    top: 0; left: 0;

    width: 100%; height: 100%;

    background: rgba(0, 0, 0, 0.9);

    padding: 40px;

    box-sizing: border-box;

    cursor: zoom-out;

    justify-content: center;

    align-items: center;

}



.lightbox.active { display: flex; }



.lightbox img {

    max-width: 100%;

    max-height: 100%;

    box-shadow: 0 0 30px rgba(0,0,0,0.5);

    border-radius: 4px;

}



.lightbox-close {

    position: absolute;

    top: 20px; right: 20px;

    color: white; font-size: 40px; font-weight: 300;

    cursor: pointer;

}



/* 7. MOBILE NAVIGATION */

@media (max-width: 992px) {

    .menu-toggle {

        display: block !important;

        position: relative;

        z-index: 1001;

        width: 45px;

        height: 45px;

    }



    .hamburger, .hamburger::before, .hamburger::after {

        content: "";

        display: block; width: 25px; height: 3px;

        background: var(--wood-dark);

        position: absolute; left: 0; transition: 0.3s;

    }

    .hamburger { top: 50%; left: 50%; transform: translate(-50%, -50%); }

    .hamburger::before { top: -8px; }

    .hamburger::after { bottom: -8px; }



    .menu-toggle[aria-expanded="true"] .hamburger { background: transparent; }

    .menu-toggle[aria-expanded="true"] .hamburger::before { transform: rotate(45deg); top: 0; }

    .menu-toggle[aria-expanded="true"] .hamburger::after { transform: rotate(-45deg); bottom: 0; }



    .main-navigation {

        display: none;

        position: absolute;

        top: 100%; left: 0; width: 100%;

        background: var(--white);

        box-shadow: 0 10px 20px rgba(0,0,0,0.1);

        z-index: 999;

    }



    .main-navigation.toggled { display: block !important; }



    .main-navigation ul, .main-navigation div > ul {

        flex-direction: column !important;

        align-items: stretch !important;

        gap: 0 !important;

    }



    .main-navigation li { width: 100%; border-bottom: 1px solid #eee; }

    .main-navigation a { padding: 15px 20px; }



    .main-navigation ul ul {

        position: static;

        display: block !important;

        box-shadow: none;

        padding-left: 20px !important;

        border-top: none;

        background: var(--wood-light);

    }

}