/* ==========================
   Global Styles
========================== */
body {margin: 0; font-family: system-ui, sans-serif; background: #f7f7f7;}
a {text-decoration: none;}
ul {list-style: none; padding: 0; margin: 0;}

/* ==========================
   Header Styles
========================== */
.header {display: flex; align-items: center; justify-content: space-between; padding: 10px 20px; -webkit-box-shadow: box-shadow: 0 2px 5px rgba(0,0,0,0.1); position: relative; flex-wrap: wrap;}

/* Logo */
.header .logo {display: flex; align-items: center; gap: 10px; cursor: pointer;}
.header .logo img {height: 50px; max-height: 60px;}
.header .logo h2 {margin: 0;}

/* Menu Items */
.header .menu-items {display: flex; gap: 20px; align-items: center; margin-left: -10px;}
.header .menu-items li {position: relative;}
.header .menu-items li.has-sub > a::after {content: " ▼"; font-size: 0.7em; margin-left: 5px;}
.header .menu-items a {font-weight: bold; padding: 5px 8px; display: block; -webkit-transition: -o-transition: transition: color 0.3s, background 0.3s;}
.header .menu-items a:hover {background: rgba(0, 0, 0, 0.1); -webkit-border-radius: border-radius: 4px;}

/* Submenu */
.header .submenu {display: none; position: absolute; top: 100%; left: 0; padding: 0; border: none; min-width: 180px; max-width: 250px; max-height: 400px; overflow-y: auto; z-index: 10;}
.header .submenu li {margin: 0;}
.header .submenu li a {padding: 8px 15px; display: block; white-space: nowrap;}
.header .submenu li a:hover {background: rgba(0, 0, 0, 0.2); border-radius: 4px;}
.header .menu-items li:hover > .submenu {display: block;}

/* Responsive */
.header .menu-toggle {display: none; cursor: pointer; font-size: 28px; padding: 5px 10px;}
@media (max-width: 768px) {display: block;}
    .header .menu-items {display: none; flex-direction: column; width: 100%; padding: 15px; gap: 10px; margin-left: 0;}
    .header .menu-items li.has-sub > .submenu {position: static; display: none; padding-left: 15px; max-height: none; overflow: visible;}
    .header .menu-items li.has-sub > a::after {content: " ▼"; float: right;}
    .header .menu-items li.has-sub.active > .submenu {display: flex; flex-direction: column;}
    .header .menu-items li.has-sub > .submenu li a {}
    .header .menu-items a:hover {background: rgba(0, 0, 0, 0.1);}
    .header .menu-items.active {display: flex;}
}