/* =========================================================
   M-Works Kft. - Shared base stylesheet
   Truly universal chrome only: variables/reset, header/nav/
   dropdown/mobile nav, scroll progress, reveal-on-scroll,
   back-to-top, footer, corner frame.
   NOTE: .eyebrow, .btn and the body background/font differ
   slightly between the "index/about/contact" family and the
   "service pages" family by original design - those stay in
   each page's own inline <style> block, not here.
   ========================================================= */

:root{
  /* canonical palette - light theme */
  --bg:#F5F7FA;
  --panel:#FFFFFF;
  --panel-2:#EFF2F6;
  --line:#E1E6ED;
  --ink:#161B22;
  --muted:#5B6472;
  --signal:#0A76A0;   /* readable brand blue - text, links, active states, buttons */
  --copper:#8F6407;   /* readable brand gold - secondary text accents */
  --mw-blue:#0AAAE1;  /* bright brand blue - fills, large shapes, buttons w/ dark text */
  --mw-yellow:#FFEB00; /* bright brand yellow - fills, large shapes, decorative */
  --radius:2px;

  /* legacy aliases (kept so the older per-page styles that still
     reference these names keep working without a full rewrite) */
  --bg-panel:var(--panel);
  --bg-panel-2:var(--panel-2);
  --text:var(--ink);
  --text-dim:var(--muted);
  --turkiz:var(--signal);
  --turkiz-dim:rgba(10,118,160,0.12);
  --rez:var(--copper);
  --rez-dim:rgba(143,100,7,0.14);
  --border:rgba(22,27,34,0.08);
  --border-strong:rgba(22,27,34,0.16);
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:'Inter', sans-serif;
  line-height:1.6;
  min-height:100vh;
}
a{color:inherit; text-decoration:none;}
.mono{font-family:'IBM Plex Mono', monospace;}
h1,h2,h3{font-family:'Space Grotesk', sans-serif; font-weight:600; letter-spacing:-0.01em;}

main{padding:0 5vw;}

/* ---------- Layout shell ---------- */
.corner-frame{
  position:fixed; inset:14px; border:1px solid var(--line);
  pointer-events:none; z-index:5;
}
.corner-frame::before,.corner-frame::after,
.corner-frame span::before,.corner-frame span::after{
  content:""; position:absolute; width:10px; height:10px;
  border-color:var(--signal); opacity:0.6;
}
.corner-frame::before{top:-1px; left:-1px; border-top:2px solid var(--signal); border-left:2px solid var(--signal);}
.corner-frame::after{top:-1px; right:-1px; border-top:2px solid var(--signal); border-right:2px solid var(--signal);}

/* ---------- Header / Nav ---------- */
header{
  position:sticky; top:0; z-index:100;
  background:rgba(255,255,255,0.86);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.nav-wrap{
  padding:16px 5vw;
  display:flex; align-items:center; justify-content:space-between;
}
.logo-link{display:inline-flex; align-items:center;}
.logo-img{height:58px; width:auto; display:block;}
nav ul{list-style:none; display:flex; gap:2rem; align-items:center;}
nav a{
  font-family:'IBM Plex Mono', monospace; font-size:0.8rem;
  letter-spacing:0.06em; text-transform:uppercase;
  color:var(--muted); padding:6px 2px; border-bottom:2px solid transparent;
  transition:color .2s, border-color .2s; cursor:pointer;
}
nav a:hover{color:var(--ink);}
nav a.active{color:var(--signal); border-color:var(--signal);}

/* dropdown: Szolgáltatások */
nav li{position:relative;}
nav li.has-dropdown > a{display:inline-flex; align-items:center; gap:6px;}
.caret{font-size:0.6rem; transition:transform .25s ease;}
nav li.has-dropdown:hover .caret,
nav li.has-dropdown:focus-within .caret{transform:rotate(180deg);}
.dropdown{
  position:absolute; top:100%; left:50%; transform:translateX(-50%);
  padding-top:16px; opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .2s ease;
}
.dropdown-inner{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  min-width:250px; padding:8px; box-shadow:0 24px 48px -20px rgba(22,27,34,0.18);
}
nav li.has-dropdown:hover .dropdown,
nav li.has-dropdown:focus-within .dropdown{
  opacity:1; visibility:visible; pointer-events:auto;
}
.dropdown-inner a{
  display:block; font-family:'IBM Plex Mono', monospace; font-size:0.78rem;
  letter-spacing:0.05em; text-transform:uppercase; color:var(--muted);
  padding:11px 14px; border-radius:2px; border-bottom:none;
}
.dropdown-inner a:hover{background:var(--panel-2); color:var(--ink);}
.dropdown-inner a.active{color:var(--signal);}

/* ---------- Hamburger / mobile nav ---------- */
#hamburger{
  display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:6px;
}
#hamburger span{width:22px; height:2px; background:var(--ink); transition:transform .25s ease, opacity .25s ease;}
#hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
#hamburger.open span:nth-child(2){opacity:0;}
#hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

#mobileNavClose{
  display:none;
  position:absolute; top:22px; right:5vw; z-index:5;
  width:40px; height:40px; border-radius:50%;
  background:none; border:1px solid var(--line); color:var(--ink);
  font-size:1rem; line-height:1; cursor:pointer;
  align-items:center; justify-content:center;
  transition:border-color .2s ease, color .2s ease;
}
#mobileNavClose:hover{border-color:var(--signal); color:var(--signal);}

#mobileNav{
  position:fixed; inset:0; z-index:150; background:rgba(255,255,255,0.98);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2rem;
  opacity:0; pointer-events:none; transition:opacity .3s ease;
}
#mobileNav.open{opacity:1; pointer-events:auto;}
#mobileNav a{
  font-family:'IBM Plex Mono', monospace; font-size:1.1rem; letter-spacing:0.08em;
  text-transform:uppercase; color:var(--ink);
}
#mobileNav a.active{color:var(--signal);}
.mobile-nav-label{
  font-family:'IBM Plex Mono', monospace; font-size:0.75rem; letter-spacing:0.12em;
  text-transform:uppercase; color:var(--copper); margin-top:-0.6rem;
}

@media (max-width:520px){
  #hamburger{display:flex;}
  #mobileNavClose{display:flex;}
  nav ul{display:none;}
  .mobile-services{display:flex; flex-direction:column; align-items:center;}
  .mobile-services-toggle{
    appearance:none; border:0; background:none; padding:0; cursor:pointer;
    font-family:'IBM Plex Mono', monospace; font-size:1.1rem; letter-spacing:0.08em;
    text-transform:uppercase; color:var(--ink);
  }
  .mobile-services-toggle.active{color:var(--signal);}
  .mobile-services-toggle .caret{display:inline-block; margin-left:4px;}
  .mobile-services.open .caret{transform:rotate(180deg);}
  .mobile-services-links{
    display:flex; flex-direction:column; align-items:center; gap:.7rem;
    max-height:0; overflow:hidden; opacity:0; margin-top:0;
    transition:max-height .28s ease, opacity .2s ease, margin-top .28s ease;
  }
  .mobile-services.open .mobile-services-links{max-height:150px; opacity:1; margin-top:.85rem;}
  #mobileNav .mobile-services-links a{font-size:.88rem; color:var(--muted);}
  #mobileNav .mobile-services-links a.active{color:var(--signal);}
}

/* ---------- Scroll progress bar ---------- */
#scrollProgress{
  position:fixed; top:0; left:0; height:2px; width:0%;
  background:linear-gradient(90deg, var(--copper), var(--signal));
  z-index:200; transition:width .08s linear;
}

/* ---------- Reveal-on-scroll ---------- */
.reveal{
  opacity:0; transform:translateY(26px);
  transition:opacity .7s cubic-bezier(.2,.7,.3,1), transform .7s cubic-bezier(.2,.7,.3,1);
}
.reveal.visible{opacity:1; transform:translateY(0);}
.reveal.reveal-settled{transition:opacity .7s cubic-bezier(.2,.7,.3,1);}
@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1; transform:none; transition:none;}
}

/* ---------- Back to top ---------- */
#backToTop{
  position:fixed; right:24px; bottom:24px; z-index:140;
  width:44px; height:44px; border-radius:50%;
  background:var(--panel); border:1px solid var(--line); color:var(--signal);
  display:flex; align-items:center; justify-content:center; font-size:1.1rem;
  cursor:pointer; opacity:0; pointer-events:none; transform:translateY(10px);
  box-shadow:0 10px 26px -12px rgba(22,27,34,0.25);
  transition:opacity .3s ease, transform .3s ease, border-color .2s ease;
}
#backToTop.visible{opacity:1; pointer-events:auto; transform:translateY(0);}
#backToTop:hover{border-color:var(--signal);}

/* ---------- Footer ---------- */
footer{border-top:1px solid var(--line); padding:40px 5vw; margin-top:20px;}
.footer-wrap{display:flex; justify-content:space-between; flex-wrap:wrap; gap:20px; color:var(--muted); font-size:0.85rem;}
.footer-wrap,.footer-wrap .mono{font-family:'Inter', sans-serif; color:var(--muted);}
.footer-wrap a:hover{color:var(--signal);}
.footer-logo-img{height:48px; width:auto; display:block; margin-bottom:12px;}
.footer-links-col{display:flex; flex-direction:column; gap:6px;}