/* =======================================
   CLEANED style.css — Husak Garage
   ======================================= */

/* Root variables */
:root{
  --bg:#ffffff;
  --header-bg:#ffffff;
  --text:#111;
  --accent:#007bff;
  --footer-bg:#000;
  --footer-text:#bfc2c6;
}

/* Reset & base */
*{box-sizing:border-box}
html,body{height:100%;margin:0; padding:0; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale}
body{font-family:'Roboto',Arial,sans-serif;background:var(--bg);color:var(--text);display:flex;flex-direction:column;min-height:100vh}
a{color:inherit}

/* Main spacing */
main{flex:1;padding-top:70px} /* space for header */

/* =========================
   HEADER
   ========================= */
header{
  position:fixed;top:0;left:0;width:100%;height:64px;
  display:flex;align-items:center;gap:18px;padding:8px 22px;
  background:var(--header-bg);z-index:1200;box-shadow:0 2px 6px rgba(0,0,0,0.06);
}

/* logo */
.logo img{height:44px;display:block}

/* desktop nav */
.desktop-nav{display:flex;gap:28px;flex:1;justify-content:center;align-items:center}
.desktop-nav a{text-decoration:none;color:var(--text);font-weight:400;font-size:0.95rem;padding:6px 4px;position:relative}
.desktop-nav a::after{content:"";position:absolute;left:0;bottom:-6px;width:0;height:3px;background:var(--accent);border-radius:2px;transition:width .25s}
.desktop-nav a:hover{color:var(--accent);transform:scale(1.03)}
.desktop-nav a:hover::after{width:100%}

/* header-right (phone) */
.header-right{display:flex;align-items:center;gap:10px}
.phone-link{display:flex;align-items:center;gap:8px;text-decoration:none;color:var(--text);font-weight:300;transition:color .25s ease, transform .25s ease;}
.phone-link:hover{color: var(--accent);transform: scale(1.08);}
.phone-link svg{width:18px;height:18px;fill:currentColor}

/* =========================
   MOBILE MENU (checkbox technique)
   ========================= */
   #menu-toggle {display: none;}
    /* hamburger icon */
    .hamburger {display: none;font-size: 28px;cursor: pointer;padding: 8px 10px;user-select: none;z-index: 1250;margin-left: auto; /* hamburger úplne vpravo */}
    /* mobile menu */
    .mobile-menu {position: fixed;top: 64px;left: 0; /* menu sa začne na ľavej strane */background: rgba(255, 255, 255, 0.85); /* jemne priesvitné */width: 260px;max-width: 80vw;height: calc(100vh - 64px);padding: 20px;display: flex;flex-direction: column;gap: 14px;box-shadow: 6px 12px 30px rgba(0,0,0,0.12);transform: translateX(-110%); /* skryté mimo obrazovky vľavo */transition: transform .28s ease;z-index: 1240;align-items: center;  /* centrovanie položiek horizontálne */justify-content: center; /* ak chceš aj vertikálne centrovanie */text-align: center;    /* aby text bol centrovaný */} 
    .mobile-menu a {display: block;text-decoration: none;color: var(--text);font-size: 1.05rem;padding: 8px 0;width: 100%;   /* aby text vyplnil šírku kontajnera */text-align: center; }
    /* open mobile menu */
    #menu-toggle:checked ~ .mobile-menu {transform: translateX(0); /* vysunie sa zľava doprava */}
    /* obrázok v mobile menu */
.mobile-menu-img {display: none; /* defaultne skryté na desktop */max-width: 90%;       /* obrázok nebude širší ako menu */height: auto;margin-top: 20px;     /* medzera pod textom menu */border-radius: 8px;   /* jemné zaoblenie, optional */}
 /* zobrazíme len v mobilnej verzii */
 @media (max-width: 850px) {.mobile-menu-img {display: block;}}

/* =========================
   LOADER
   ========================= */
#page-loader{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:18px;background:rgba(13,13,13,0.88);z-index:1300;visibility:hidden;opacity:0;transition:opacity .2s,visibility .2s}
#page-loader.show{visibility:visible;opacity:1}
.loader-logo img{height:80px}
.loader-bar{width:320px;max-width:calc(100% - 40px);background:rgba(255,255,255,0.12);border-radius:8px;height:10px;overflow:hidden}
.loader-progress{height:100%;width:0;background:linear-gradient(90deg,var(--accent),#4da3ff);transition:width .6s}

/* =========================
   HERO
   ========================= */
.hero-banner{position:relative;width:100vw;left:50%;margin-left:-50vw;height:220px;overflow:hidden}
.hero-banner img{width:100%;height:100%;object-fit:cover;object-position:50% 74%;filter: blur(3px);}
.hero-text{position:absolute;left:5%;bottom:40%;color:#fff}
.hero-text h1{margin:0;font-size:2.4rem;font-weight:500}

/* =========================
   ABOUT / SECTIONS
   ========================= */
.about-section{display:flex;gap:40px;padding:60px 8%;align-items:stretch;background:#fff}
.about-image, .about-text{flex:1}
.about-image img{width:100%;height:100%;object-fit:cover;border-radius:10px}
.about-text{display:flex;flex-direction:column;justify-content:center;line-height:1.7;font-weight:300}
.about-text h2{font-size:2rem;margin-bottom:12px;color:#000}

/* features */
.features{display:flex;gap:12px;padding:0 10px 40px;width:100%;justify-content:space-between}
.feature-box{flex:1;background:#fff;border-radius:10px;padding:26px 28px;box-shadow:0 2px 8px rgba(0,0,0,0.08)}
.feature-box h3{color:var(--accent);font-size:1.4rem;margin-bottom:12px}

/* =========================
   GALLERY (kept minimal)
   ========================= */
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:15px;padding:50px;background:#fff}
.gallery img{width:100%;height:200px;object-fit:cover;border-radius:8px;cursor:pointer;transition:transform .3s}
.gallery img:hover{transform:scale(1.05)}

/* LIGHTBOX (kept) */
.lightbox{position:fixed;inset:0;background:rgba(0,0,0,.85);display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:.25s;z-index:2000}
.lightbox.active{opacity:1;visibility:visible}
.lightbox img{max-width:90%;max-height:80vh;border-radius:10px}

/* =========================
   REVIEWS
   ========================= */
.reviews-section{background:#f8f8f8;padding:80px 5%;display:flex;justify-content:center}
.reviews-container{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:30px;max-width:1300px;width:100%}
.review-box{background:#fff;padding:25px;border-radius:12px;box-shadow:0 4px 14px rgba(0,0,0,0.08)}
.review-text{color:#333;line-height:1.6;margin-bottom:12px}
.stars{color:var(--accent);font-size:1.2rem}

/* =========================
   CONTACT / FORM
   ========================= */
   .contact-page {
      padding: 60px 80px;
      background: #fff;
    }
    
    /* HLAVNÝ LAYOUT */
    .contact-container {
      display: flex;
      gap: 40px;
      align-items: flex-start; /* dôležité */
    }
    
    /* ĽAVÁ STRANA – BOXYY */
    .contact-box {
      background: #f8f8f8;
      padding: 26px;
      border-radius: 14px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.06);
      width: 100%;
    }

    .contact-left {
      display: block;
      flex: 1;
    }
    
    /* Horný box – kontakty (nižší) */
    .contact-box:first-child {
      padding-bottom: 18px;
    }
    
    /* Spodný box – sociálne siete (vyšší) */
    .contact-box.social-box {
      padding-top: 34px;
      padding-bottom: 34px;
    }
    
    /* Ikony IG / FB */
    .social-box .social-links {
      display: flex;
      justify-content: center;
      gap: 60px;
      margin-top: 30px;
    }
    
    .social-box svg {
      width: 90px;
      height: 90px;
    }
    
    /* PRAVÁ STRANA – FORMULÁR */
    .contact-right {
      flex: 1;
      background: #f8f8f8;
      padding: 28px;
      border-radius: 14px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.06);
    }
    
    /* INPUTY */
    .contact-right input,
    .contact-right textarea {
      width: 100%;
      padding: 14px;
      border-radius: 10px;
      border: 1px solid #ccc;
      box-sizing: border-box;
      margin-bottom: 14px;
    }
    
    /* TEXTAREA – zmenšená */
    .contact-right textarea {
      height: 160px;
      resize: none;
    }
    .contact-box h2,
    .contact-right h2 {
      color: #0d6efd; /* modrá ako na obrázku */
    }
    .contact-right button {
      width: 100%;
      padding: 14px;
      background: #0d6efd;
      color: #fff;
      border: none;
      border-radius: 10px;
      font-size: 16px;
      font-weight: 600;
      cursor: pointer;
    }
    
    .contact-right button:hover {
      background: #0b5ed7;
    }
    .contact-box:not(:last-child) {
      margin-bottom: 24px;
    }
    .social-box svg {
      fill: #0d6efd;
    }
    .social-box a:hover svg {
      fill: #0b5ed7;
    }
    @media (max-width: 768px) {
      .contact-container {
        flex-direction: column;
      }
    
      .contact-left,
      .contact-right {
        width: 100%;
      }
    }

/* =========================
   FOOTER
   ========================= */
footer{background:var(--footer-bg);color:var(--footer-text);text-align:center;padding:20px;font-size:1rem;margin-top:40px}

/* =========================
   RESPONSIVE (MOBILE-FIRST tweaks)
   ========================= */

/* general smaller screens */
@media (max-width:1000px){
  .contact-page{padding:40px 30px}
  .contact-right textarea{height:180px}
  .gallery img{height:180px}
}

/* mobile layout */
@media (max-width:850px){
  /* layout */
  .about-section{flex-direction:column;padding:40px 5%}
  .features{flex-direction:column;padding:0 5%}
  .hero-banner{height:160px}
  .hero-text{left:50%;transform:translateX(-50%);text-align:center;bottom:30%}

  /* header changes */
  .desktop-nav{display:none}
  .hamburger{display:block}
  .header-right{display:none}

  /* mobile nav is visible when checked (handled above) */
  .mobile-menu{top:64px}
}

/* Hide mobile menu on large screens */
@media (min-width:851px){
  .mobile-menu{display:none}
}


@media (max-width: 850px) {
   .contact-page {
     padding: 40px 20px; /* menej paddingu na mobile */
   }

 /* =========================
   RESPONSIVE: MOBILE FIX CONTACT
   ========================= */
   .contact-container {
     flex-direction: column; /* položky pod seba */
     gap: 20px; /* menšia medzera medzi boxmi */
   }
 
   .contact-box,
   .contact-right {
     width: 100%; /* aby sa zmestili do obrazovky */
     box-sizing: border-box;
   }
 }