/**
 * Header Component Styles
 * Desktop-first approach matching legacy theme
 *
 * Note: Mobile menu toggle functionality requires JavaScript
 * to toggle the 'open' class on menu items with dropdowns.
 */

/* Main header container - fixed position */
.header-main {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10;
  width: 100%;
  background: #ffffff;
  color: #111111;
}

.header-main .layout-container {
  display: flex;
  justify-content: space-between;
}


.header-main__inner > .layout-container {
  display: block;
}

.header-main__inner ul {
  margin: 0;
}

/* Logo / Brand */
.header-main .brand {
  display: block;
  text-decoration: none;
  margin: 18px 0;
}

.header-main .brand img {
  display: block;
  width: 200px;
}

/* Social icons in header */
.social-icons {
  display: flex;
  align-items: center;
  margin-left: auto;
  margin-right: 5%;
}

.social-icons a {
  padding: 0 6px;
}

.social-icons img {
  height: 30px;
  width: 30px;
}

/* Login link */
.loginlink {
  display: flex;
  position: relative;
  align-items: center;
  align-content: center;
  text-decoration: none;
  font-weight: 500;
  color: #111111;
}

.loginlink .icon {
  color: #B83288;
}

/* Mobile header container (Branding Bar)
 * Visible on desktop as the main branding area.
 * Becomes the fixed mobile header on smaller screens.
 */
.header-branding {
  display: block;
}

.header-branding .layout-container {
  display: flex;
  align-items: center;
}

/* Mobile-specific buttons - hidden on desktop */
.header-branding__controls {
  display: none;
}


.foldout-toggle {
  display: none;
}

/* Navigation container */
.nav-primary {
  background: #E98C00;
  box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.2);
}

.nav-primary .layout-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nav-primary .nav {
  display: flex;
  margin: 0 -1em;
  list-style: none;
}

.nav-primary .menu-item {
  position: relative;
  z-index: 1;
}

.nav-primary .sub-menu {
  display: none;
  list-style: none;
}

.nav-primary a {
  color: #ffffff;
  display: block;
  font-size: 16px;
  font-weight: 500;
  padding: 1em;
  text-decoration: none;
}

.nav-primary a:hover {
  text-decoration: none;
  color: #E98C00;
}

.nav-primary a:focus {
  text-decoration: none;
  outline: none;
}

.nav-primary a:hover,
.nav-primary a:active {
  outline: none;
  color: #B83288;
  text-decoration: none;
}

.nav-primary a:not([href]):hover,
.nav-primary a:not([href]):active {
  color: #E98C00;
}

/* Top-level menu items - consistent padding */
.nav-primary > .layout-container > .nav > .menu-item > a {
  padding: 1em;
}

/* Dropdown on hover */
.nav-primary .menu-item-has-children:hover > .sub-menu {
  display: block;
  z-index: 5;
}

/* Primary navigation - level 2 (dropdown) */
.nav-primary .sub-menu {
  position: absolute;
  left: 0;
  background: #ffffff;
  box-shadow: 0 2px 3px 0 rgba(17, 17, 17, 0.2);
}

.nav-primary .sub-menu a {
  white-space: inherit;
}

.nav-primary .sub-menu .menu-item > a {
  position: relative;
  padding: 10px 2em 10px 1em;
  width: 270px;
  color: #E98C00;
  font-weight: 400;
  font-size: 15px;
}

.nav-primary .sub-menu .current-menu-item > a,
.nav-primary .sub-menu .current_page_item > a,
.nav-primary .sub-menu .menu-item:hover > a {
  color: #B83288;
  background: #ffffff;
}

.nav-primary .sub-menu .menu-item-has-children > a::after {
  content: '';
  display: block;
  width: 15px;
  height: 15px;
  margin: 0;
  position: absolute;
  right: 1em;
  top: 50%;
  transform: translateY(-50%);
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23E98C00" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="8.5 5 15.5 12 8.5 19"></polyline></svg>');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.nav-primary .sub-menu .current-menu-item.menu-item-has-children > a::after,
.nav-primary .sub-menu .current_page_item.menu-item-has-children > a::after,
.nav-primary .sub-menu .menu-item-has-children:hover > a::after {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23B83288" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="8.5 5 15.5 12 8.5 19"></polyline></svg>');
}

.nav-primary > .layout-container > .nav > .menu-item:nth-last-child(2) .sub-menu,
.nav-primary > .layout-container > .nav > .menu-item:last-child .sub-menu {
  left: 0;
  right: auto;
}

/* Primary navigation - level 3 (sub-dropdown) */
.nav-primary .sub-menu .sub-menu {
  background: #ffffff;
  top: 0;
  min-height: 100%;
  left: 97%;
  margin-top: 0;
}

.nav-primary > .layout-container > .nav > .menu-item:nth-last-child(2) .sub-menu .sub-menu,
.nav-primary > .layout-container > .nav > .menu-item:last-child .sub-menu .sub-menu {
  left: auto;
  right: 100%;
}

/* Listen button in navigation */
.nav-primary .btn.listen {
  margin: 8px 0;
  padding: 20px 20px;
  background: #B83288;
  color: #ffffff;
  height: 16px;
  text-transform: none;
  font-weight: bold;
  text-align: center;
  border-radius: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.nav-primary .btn.listen:hover,
.nav-primary .btn.listen:focus {
  background-color: #a02976;
  color: #ffffff;
}

/* Compensate for fixed header in body */
body {
  padding-top: 120px;
}