/* Header-specific styles only. General styles moved to styles.css */
:root {
  --header-bg: #1E1E1E;
  --header-radius: 12px;
  --header-height: 46px;
}

.site-header {
    width: min(100% - 32px, 1340px);
        max-width: 1340px;
  background: transparent;
  margin: 16px auto;
}
.site-header .container{
    padding: 0;
}

.header-inner {
  border-radius: var(--header-radius);
  height: var(--header-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
    padding: 0 ;
        margin: 0 auto;
        width: 100%!important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.header_bg{
    display: flex;
    align-items: center;
    background: #1E1E1E;
    height: 46px;
    border-radius: 12px;
        width: 100%;
            padding-left: 34px;
}

.logo img {
  display: block;
  height: 25px;
  width: auto;
  margin-right: 37px;
}

.nav-block{display:flex;align-items:center;gap:16px}
.header-nav ul{display:flex;gap:28px;list-style:none;margin:0;padding:0;align-items:center}
.header-nav a{font-family:'Rubik',Arial,sans-serif;font-weight:500;font-size:0.98rem;color:#fff;letter-spacing:0.01em;padding:6px 0;transition:color .18s}
.header-nav a:hover,.header-nav a:focus{color:#FF7146}

.nav-cta{width:251px;display:flex;justify-content:center;align-items:center;height:46px;margin-left:10px;background:#fff;color:#000;padding:0;border-radius:12px;font-weight:600;text-decoration:none}
.nav-cta:hover{opacity:0.95}

/* Desktop vs mobile CTA visibility */
.nav-cta.desktop{display:flex}
.nav-cta.btn_mobil{display:none}

@media (max-width: 767px){
  body{
    padding: 15px;
  }
  .desktop-menu,.desktop_head_btn{display: none !important;}
  .nav-cta.btn_mobil{display:block}
  .header_bg{ justify-content: space-between;padding: 10px;}
}

@media (min-width: 768px){
  .nav-cta.desktop{display:flex}
  .nav-cta.btn_mobil{display:none}


}

.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  margin-left: 16px;
}

.hamburger {
  display: block;
  width: 24px;
  height: 2px;
  background: #fff;
  position: relative;
}
.hamburger::before, .hamburger::after {
  content: '';
  display: block;
  width: 24px;
  height: 2px;
  background: #fff;
  position: absolute;
  left: 0;
  transition: transform 0.2s;
}
.hamburger::before {
  top: -7px;
}
.hamburger::after {
  top: 7px;
}


@media (min-width: 769px) and (max-width: 1024px) {
.nav-cta{font-size: 16px;width: 300px!important;}

}
@media (max-width: 768px) {
  .site-header{
    width: 100%;
  }
  .header-inner{padding:0px}
  /* mobile overlay uses accent background when open */
  /* keep nav container transparent; menu-card carries the color */
  .header-nav{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:transparent;padding:0;z-index:120;overflow:visible}
  .header-nav ul{display:flex;flex-direction:column;gap:18px}
  .header-nav a{color:#fff}
  .header-nav a:hover{opacity:0.95}
  /* Mobile CTA inside the overlay should be visible against accent bg */
  .nav-cta{display:block;margin:24px auto 0;max-width:320px}
  .nav-cta.btn_mobil{background:#fff;color:#FF7146}
  .nav-toggle{display:block}
  .nav-block{position:relative}
  .header-nav[data-open="true"]{display:block}
  .hamburger{background:#fff}
  .hamburger::before{background:#fff}
  .hamburger::after{background:#fff}

  /* transform hamburger to an X when menu is open */
  .nav-toggle[aria-expanded="true"] .hamburger{background:transparent}
  .nav-toggle[aria-expanded="true"] .hamburger::before{transform:rotate(45deg);top:0}
  .nav-toggle[aria-expanded="true"] .hamburger::after{transform:rotate(-45deg);top:0}

  /* overlay positioned from the top; height follows the menu-card (auto) */
  .menu-overlay{position:fixed;inset:0;display:block;pointer-events:auto}
  .menu-overlay[aria-hidden="true"]{display:none}

  /* Menu card centered and internal layout flow-based (static/relative) */
  .menu-card{position:absolute;width:345px;left:calc(50% - 345px/2);top:16px;background:#FF7146;border-radius:20px;box-sizing:border-box;padding:16px}

  .menu-header{display:flex;align-items:center;justify-content:space-between;padding:10px}
  .mobile-logo img{width:89px;height:32px;display:block}
  .close-btn{background:none;border:0;font-size:28px;line-height:1;cursor:pointer;color:#000}

  /* Flow content: menu list then CTA; heights are content-driven */
  .menu-content{padding:8px 10px 24px 10px;display:flex;flex-direction:column;gap:24px}
  .mobile-menu-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:24px;}
  .mobile-menu-list li{
    width: 100%;
    text-align: left;
  }
  .mobile-menu-list a{font-family:'Bebas Neue',sans-serif;font-size:46px;color:#000;text-decoration:none;display:block}
  .menu-card .nav-cta{align-self:flex-start;background:#000;color:#fff;width:205px;height:50px;border-radius:12px;display:flex;align-items:center;justify-content:center;text-decoration:none}
}