/* ===================================================
   RESPONSIVE DESIGN - Mobile & Desktop Optimization
   Breakpoints:
     Mobile   : max-width 767px
     Tablet   : 768px - 991px
     Desktop  : 992px+
     Large    : 1200px+
   =================================================== */

/* ---- Desktop Horizontal Navigation ---- */
.desktop-nav {
    display: none; /* hidden by default (mobile-first) */
}

.desktop-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: 2px;
}

.desktop-nav ul li a {
    display: block;
    padding: 10px 14px;
    color: #555;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    text-decoration: none;
    letter-spacing: 0.5px;
    border-radius: 3px;
    transition: color 0.25s, background-color 0.25s;
}

.desktop-nav ul li a:hover {
    color: #000;
    background-color: #ffcc00;
    text-decoration: none;
}

.desktop-nav ul li a.small-link {
    font-size: 10px;
    color: #aaa;
    padding: 8px 10px;
    font-weight: 400;
}

.desktop-nav ul li a.small-link:hover {
    color: #555;
    background-color: #f0f0f0;
}

/* =====================
   VERY SMALL MOBILE (< 400px)
   ===================== */
@media (max-width: 399px) {
    /* Products: 1 column on very small screens */
    .templatemo_portfolio .col-xs-6 {
        width: 100% !important;
        float: none !important;
    }

    .slideshow-container {
        max-height: 180px !important;
    }

    .mySlides {
        margin-top: 62px !important;
    }

    .logo {
        width: 130px !important;
    }

    .logo img {
        max-width: 130px;
    }
}

/* =====================
   MOBILE (max 767px)
   ===================== */
@media (max-width: 767px) {
    /* --- Navigation --- */
    /* Hamburger button stays visible on mobile */
    #main .openbtn {
        display: inline-block;
        font-size: 22px;
        padding: 8px 14px;
        min-height: 44px;
    }

    /* --- Slideshow --- */
    /* Offset for fixed header height on mobile (~60-70px) */
    .mySlides {
        margin-top: 65px !important;
    }

    .slideshow-container {
        max-height: 220px !important;
        overflow: hidden;
    }

    /* --- Logo --- */
    .logo {
        width: 150px !important;
        padding: 0 0 0 10px !important;
    }

    /* --- Typography --- */
    h2 {
        font-size: 20px;
    }

    [id="#prinziptext"] {
        font-size: 15px !important;
        padding: 0 15px;
        line-height: 1.5;
    }

    /* --- Portfolio/Products --- */
    .templatemo_portfolio {
        padding: 30px 0;
    }

    .templatemo_portfolio p {
        padding-bottom: 25px;
    }

    /* Products: 2 columns on mobile (col-xs-6 keeps this) */
    .templatemo_portfolio .col-xs-6 {
        padding: 4px;
    }

    .portfolio-item {
        margin-bottom: 20px;
    }

    /* --- About Section --- */
    .templatemo_lightgrey_about {
        padding: 20px 0 25px;
    }

    .templatemo_lightgrey_about .col-xs-6 {
        margin-bottom: 10px;
    }

    /* --- References Section --- */
    .templatemo_reasonbg {
        padding: 20px 15px;
    }

    /* --- Footer --- */
    .templatemo_footer .col-xs-6,
    .templatemo_footer .col-sm-6,
    .templatemo_footer .col-md-3 {
        width: 100% !important;
        float: none !important;
        margin-bottom: 25px;
        padding: 0 10px;
    }

    .templatemo_footer h2 {
        font-size: 18px;
        margin-top: 10px;
    }

    /* Product thumbnails in footer */
    .footer_gallery li {
        display: inline-block;
        margin: 3px;
    }

    .footer_gallery li img {
        width: 60px !important;
        height: 60px !important;
    }

    /* --- Cookie Notice --- */
    #Cookiesinfo {
        font-size: 13px;
        line-height: 1.6;
    }

    /* --- Modal (Product Detail) --- */
    .modal-content {
        width: 96% !important;
        margin: 5% auto !important;
        padding: 15px !important;
        max-height: 85vh;
        overflow-y: auto;
    }

    /* --- Touch-friendly tap targets --- */
    .btn,
    .btn-primary,
    .btn-large {
        min-height: 44px;
        padding: 10px 18px;
        font-size: 14px;
    }

    /* Sidebar links touch-friendly */
    .sidebar a {
        padding: 14px 8px 14px 32px;
        font-size: 22px;
        min-height: 50px;
    }

    /* --- Header table fix on mobile --- */
    .templatemo_top table {
        margin-right: 0 !important;
    }
}

/* =====================
   TABLET (768px - 991px)
   ===================== */
@media (min-width: 768px) and (max-width: 991px) {
    /* Show desktop nav, hide hamburger */
    .desktop-nav {
        display: block;
    }

    #main .openbtn {
        display: none !important;
    }

    /* Slideshow offset for taller header on tablet */
    .mySlides {
        margin-top: 100px !important;
    }

    .slideshow-container {
        max-height: 380px !important;
    }

    .logo {
        width: 180px;
    }

    /* Footer 2 columns on tablet */
    .templatemo_footer .col-xs-6 {
        margin-bottom: 20px;
    }
}

/* =====================
   DESKTOP (>= 992px)
   ===================== */
@media (min-width: 992px) {
    /* Show desktop nav, hide hamburger */
    .desktop-nav {
        display: block;
    }

    #main .openbtn {
        display: none !important;
    }

    /* Slideshow offset */
    .mySlides {
        margin-top: 90px !important;
    }

    .slideshow-container {
        max-height: 580px !important;
    }

    /* Wider logo on desktop */
    .logo {
        width: 210px;
    }
}

/* =====================
   LARGE DESKTOP (>= 1200px)
   ===================== */
@media (min-width: 1200px) {
    .mySlides {
        margin-top: 85px !important;
    }

    .slideshow-container {
        max-height: 680px !important;
    }

    .desktop-nav ul li a {
        padding: 12px 18px;
        font-size: 14px;
    }
}

/* =====================
   TOUCH DEVICE OPTIMIZATIONS
   (targets devices with coarse pointer = touchscreen)
   ===================== */
@media (hover: none) and (pointer: coarse) {
    /* Larger tap targets */
    a {
        min-height: 40px;
        display: inline-flex;
        align-items: center;
    }

    /* Instant hover effect for touch (no delay) */
    .portfolio-item .overlay-p {
        /* On touch: show overlay on tap, not hover */
        transition: none;
    }

    /* Larger close button in modal */
    .close {
        font-size: 30px;
        padding: 5px 10px;
    }
}

/* =====================
   GENERAL IMPROVEMENTS
   ===================== */

/* Images always fluid */
img {
    max-width: 100%;
    height: auto;
}

/* Portfolio thumb images cover their container */
.portfolio-thumb img {
    object-fit: cover;
    width: 100%;
}

/* Reference images responsive */
.templatemo_clientimage img {
    max-width: 200px;
    height: auto;
    margin: 0 auto;
    display: block;
}

/* Smooth font rendering on all devices */
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}