/* =============================================
   DAARTS — Header & Navigation (Mobile-First)
   ============================================= */

/* --- Header wrapper --- */
.site-header {
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   z-index: 7777;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* --- Top red bar (nav + logo) --- */
.header-top {
   background: #F24242;
}

.header-top .container {
   display: flex;
   align-items: center;
   gap: 12px;
   padding-top: 12px;
   padding-bottom: 12px;
   flex-wrap: wrap;
   overflow-x: visible;
}

/* --- Logo --- */
.header-logo {
   flex-shrink: 0;
   position: relative;
   z-index: 7779;
}

.header-logo img {
   width: 56px;
   height: 56px;
   border: 1px solid #FFFFFF;
   border-radius: 2px;
   box-sizing: border-box;
}

/* --- Contact info bar (below red bar) --- */
.header-contacts {
   display: block;
   background: var(--color-white);
   border-bottom: 1px solid var(--color-border-light);
}

.header-contacts .container {
   font-family: Arial, sans-serif;
   font-size: 12px;
   font-weight: normal;
   color: var(--color-text);
   text-align: center;
   padding-top: 4px;
   padding-bottom: 4px;
}

.header-contacts a {
   color: var(--color-text);
   white-space: nowrap;
}

.header-contacts a:hover {
   color: var(--color-primary);
}

/* --- Hamburger Button --- */
.hamburger {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 44px;
   height: 44px;
   background: none;
   border: none;
   cursor: pointer;
   padding: 8px;
   margin-left: auto;
   -webkit-tap-highlight-color: transparent;
}

.hamburger svg {
   width: 24px;
   height: 24px;
   fill: #FFFFFF;
}

.hamburger:hover svg {
   fill: rgba(255, 255, 255, 0.7);
}

/* --- Main Navigation --- */
.main-nav {
   display: none;
   width: 100%;
   order: 2;
}

.main-nav.is-open {
   display: block;
}

.main-nav ul {
   list-style: none;
   margin: 0;
   padding: 0;
}

.main-nav > ul > li {
   border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.main-nav a {
   display: block;
   padding: 12px 16px;
   color: #FFFFFF;
   font-family: var(--font-condensed);
   font-size: 16px;
   text-decoration: none;
   transition: background var(--transition);
}

.main-nav a:hover {
   background: rgba(255, 255, 255, 0.15);
   color: #FFFFFF;
}

.main-nav a.active {
   background: #CC0000;
   color: #FFFFFF;
}

/* --- Dropdown (Products submenu) --- */
.nav-dropdown {
   display: none;
   background: #E6403C;
}

.nav-dropdown.is-open {
   display: block;
}

.nav-dropdown a {
   padding-left: 32px;
   font-size: 14px;
}

.nav-dropdown a.active {
   font-weight: bold;
   border-left: 3px solid #FFFFFF;
   padding-left: 29px;
}

.nav-has-dropdown > a::after {
   content: "\f078"; /* fa-chevron-down */
   font-family: "Font Awesome 6 Free";
   font-weight: 900;
   font-size: 10px;
   float: right;
   transition: transform var(--transition);
}

.nav-has-dropdown.is-open > a::after {
   transform: rotate(180deg);
}

/* --- Mobile overlay drawer (optional) --- */
.nav-overlay {
   display: none;
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background: rgba(0, 0, 0, 0.5);
   z-index: 7776;
}

.nav-overlay.is-visible {
   display: block;
}

/* Nav must be above overlay */
.main-nav {
   z-index: 7778;
}

.hamburger {
   z-index: 7778;
}

/* ======================
   DESKTOP (>=992px)
   ====================== */
@media (min-width: 992px) {
   .header-top .container {
      flex-wrap: nowrap;
      padding-top: 0;
      padding-bottom: 0;
      min-height: 50px;
   }

   .header-logo {
      margin-top: 10px;
      margin-bottom: -26px;
   }

   .header-logo img {
      width: 76px;
      height: 76px;
      border: 1px solid #FFFFFF;
   }

   .hamburger {
      display: none;
   }

   .main-nav {
      display: block;
      width: auto;
      flex: 1;
      order: 1;
      margin-left: 24px;
   }

   .main-nav > ul {
      display: flex;
      align-items: center;
      gap: 4px;
   }

   .main-nav > ul > li {
      border-bottom: none;
      position: relative;
   }

   .main-nav > ul > li > a.active {
      background: #CC0000;
      color: #FFFFFF;
   }

   .main-nav > ul > li > a {
      padding: 14px 12px;
      font-size: 14px;
      white-space: nowrap;
      border-radius: 0;
      color: #FFFFFF;
   }

   .main-nav > ul > li > a:hover {
      background: rgba(255, 255, 255, 0.15);
      color: #FFFFFF;
   }

   /* Desktop dropdown on hover */
   .nav-has-dropdown > a::after {
      margin-left: 6px;
      float: none;
   }

   .nav-dropdown {
      position: absolute;
      top: 100%;
      left: 0;
      min-width: 280px;
      background: #F24242;
      border: 1px solid #EB6864;
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
      border-radius: 0;
      z-index: 9999;
      padding: 8px 0;
   }

   .nav-dropdown a {
      padding: 8px 16px;
      font-size: 13px;
      color: #FFFFFF;
   }

   .nav-dropdown a:hover {
      background: #E6403C;
      color: #FFFFFF;
   }

   .nav-dropdown a.active {
      border-left: 3px solid #FFFFFF;
      background: #CC0000;
      color: #FFFFFF;
   }

   .nav-has-dropdown:hover > .nav-dropdown,
   .nav-dropdown.is-open {
      display: block;
   }

   /* Contacts bar */
   .header-contacts {
      display: block;
   }

   .header-contacts .container {
      font-size: 15px;
      padding-top: 6px;
      padding-bottom: 6px;
   }
}

/* ======================
   LARGE DESKTOP (>=1200px)
   ====================== */
@media (min-width: 1200px) {
   .main-nav > ul > li > a {
      padding: 14px 14px;
      font-size: 15px;
   }
}