/* slicknav button styles - creates the hamburger menu button that appears on mobile devices */
/* positioned relatively so it can be placed in the layout and floated to the right side */
.slicknav_btn {
  position: relative;
  display: block;
  float: right;
  padding: 0.438em 0.625em 0.438em 0.625em;
  line-height: 1.125em;
  cursor: pointer;
}

/* adds spacing between the hamburger icon bars for visual separation */
.slicknav_btn .slicknav_icon-bar + .slicknav_icon-bar {
  margin-top: 0.188em;
}

/* main menu container - uses clearfix technique to contain floated elements */
/* this ensures the menu container properly wraps around its floated children */
.slicknav_menu {
  zoom: 1;
}

.slicknav_menu:before {
  content: " ";
  display: table;
}

.slicknav_menu:after {
  content: " ";
  display: table;
  clear: both;
}

/* menu text label - displays "MENU" text next to the hamburger icon */
.slicknav_menu .slicknav_menutxt {
  display: block;
  line-height: 1.188em;
  float: left;
}

/* hamburger icon container - holds the three horizontal bars */
.slicknav_menu .slicknav_icon {
  float: left;
  width: 1.125em;
  height: 0.875em;
  margin: 0.188em 0 0 0.438em;
}

/* icon pseudo-element - creates transparent background for the icon */
.slicknav_menu .slicknav_icon:before {
  background: transparent;
  width: 1.125em;
  height: 0.875em;
  display: block;
  content: "";
  position: absolute;
}

/* removes margin when no text is displayed with the menu button */
.slicknav_menu .slicknav_no-text {
  margin: 0;
}

/* individual bars of the hamburger icon - creates the three horizontal lines */
/* rounded corners and shadow give it a modern, raised appearance */
.slicknav_menu .slicknav_icon-bar {
  display: block;
  width: 1.125em;
  height: 0.125em;
  -webkit-border-radius: 1px;
  -moz-border-radius: 1px;
  border-radius: 1px;
  -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
  -moz-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
}

/* navigation container - ensures menu clears any floated elements above it */
.slicknav_nav {
  clear: both;
}

/* lists within navigation - displayed as block for vertical stacking */
.slicknav_nav ul {
  display: block;
}

/* list items - each menu item displays as a block for full-width clickability */
.slicknav_nav li {
  display: block;
}

/* arrow indicator for parent menus - shows which items have submenus */
.slicknav_nav .slicknav_arrow {
  font-size: 0.8em;
  margin: 0 0 0 0.4em;
}

/* clickable menu items - gives pointer cursor to indicate interactivity */
.slicknav_nav .slicknav_item {
  cursor: pointer;
}

/* links within menu items - displayed inline to fit with parent link */
.slicknav_nav .slicknav_item a {
  display: inline;
}

/* menu row container - each menu item is a row that spans full width */
.slicknav_nav .slicknav_row {
  display: block;
}

/* default link display - block level for full-width tap targets on mobile */
.slicknav_nav a {
  display: block;
}

/* parent links that contain submenus - inline display for proper alignment */
.slicknav_nav .slicknav_parent-link a {
  display: inline;
}

/* brand/logo area - floated left to appear before the menu button */
.slicknav_brand {
  float: left;
}

/* theme styles for the menu container - sets colors, sizing, and spacing */
/* dark background (#4c4c4c) provides good contrast for white text and icons */
.slicknav_menu {
  font-size: 16px;
  box-sizing: border-box;
  background: #4c4c4c;
  padding: 5px;
}

/* ensures all child elements use box-sizing for consistent sizing */
.slicknav_menu * {
  box-sizing: border-box;
}

/* menu text styling - bold white text with shadow for readability */
.slicknav_menu .slicknav_menutxt {
  color: #fff;
  font-weight: bold;
  text-shadow: 0 1px 3px #000;
}

/* hamburger icon bars - white color stands out against dark background */
.slicknav_menu .slicknav_icon-bar {
  background-color: #fff;
}

/* button theme - dark background with rounded corners for modern look */
.slicknav_btn {
  margin: 5px 5px 6px;
  text-decoration: none;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  background-color: #222;
}

/* navigation menu theme - large font size for easy tapping on mobile devices */
/* white text on dark background provides excellent readability */
.slicknav_nav {
  color: #fff;
  margin: 0;
  padding: 0;
  font-size: 1.8em;
  list-style: none;
  overflow: hidden;
}

/* nested lists - indented with left margin to show hierarchy */
.slicknav_nav ul {
  list-style: none;
  overflow: hidden;
  padding: 0;
  margin: 0 0 0 20px;
}

/* menu row spacing - padding creates comfortable tap targets */
.slicknav_nav .slicknav_row {
  padding: 5px 10px;
  margin: 2px 5px;
}

/* hover effect for menu rows - light background shows interactivity */
.slicknav_nav .slicknav_row:hover {
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
  background: #ccc;
  color: #fff;
}

/* link styling - white text with no underline for clean appearance */
.slicknav_nav a {
  padding: 5px 10px;
  margin: 2px 5px;
  text-decoration: none;
  color: #fff;
}

/* link hover effect - light gray background with dark text for contrast */
.slicknav_nav a:hover {
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
  background: #ccc;
  color: #222;
}

/* text-only menu items - indented for visual hierarchy */
.slicknav_nav .slicknav_txtnode {
  margin-left: 15px;
}

/* removes padding/margin from links within clickable items */
.slicknav_nav .slicknav_item a {
  padding: 0;
  margin: 0;
}

/* removes padding/margin from parent links for proper alignment */
.slicknav_nav .slicknav_parent-link a {
  padding: 0;
  margin: 0;
}

/* brand/logo theme - white text sized appropriately for the menu height */
.slicknav_brand {
  color: #fff;
  font-size: 18px;
  line-height: 30px;
  padding: 7px 12px;
  height: 44px;
}