/**
 * CSS-only Slide Menu + Header
 * WordPress Main Menu with pure CSS checkbox approach
 */

/* CSS Variables */
:root {
  --header-bg: #ffffff;
  --header-text: #333333;
  --header-accent: #0060a9;
  --header-border: #e0e0e0;
  --sidebar-bg: #ffffff;
  --sidebar-width: 400px;
  --button-primary: #000000;
  --button-secondary: #ffffff;
  --button-border: #333333;
  --transition: 0.3s ease-in-out;
}

/* New Header Structure */
.site-header-new {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  background: var(--header-bg);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

/* Main Header */
.header-main {
  padding: 15px 0;
}

.header-main .container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Menu Toggle Button */
.menu-toggle-new {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: var(--transition);
  background-color: #fff;
  min-width: 40px;
  min-height: 40px;
  padding: 8px 16px;
  border-radius: 9999px;
  border: 1px solid #c0c0be;
  color: var(--foreground, #2a2927);
  text-align: center;
  font-family: "Trade Gothic W01 Roman", sans-serif;
  font-size: var(--font-size-sm, 14px);
  font-style: normal;
  font-weight: var(--type-role-weight-label, 600);
  line-height: 100%;
}

.menu-toggle-new:hover {
  background: #f8f9fa;
}

.menu-toggle-new i {
  font-size: 16px;
}

/* Logo */
.logo-new {
  flex: 1;
  text-align: left;
  margin-left: 24px;
}
.logo-new svg {
  height: 50px;
  margin-top: 10px;
}
.logo-text {
  font-size: 24px;
  font-weight: bold;
  color: var(--header-accent);
  font-family: "Trade Gothic W01 Bold", sans-serif;
}

.logo-new a {
  text-decoration: none;
  color: inherit;
}

/* Header Actions */
.header-actions {
  display: flex;
  align-items: center;
  gap: 15px;
}

.search-toggle {
	display:none;
}
@media (min-width:948px){
	.search-toggle { display:block; }
}
/* Search Button */
.search-toggle {
  background: none;
  border: none;
  color: var(--header-text);
  font-size: 18px;
  cursor: pointer;
  padding: 8px;
  border-radius: 50%;
  transition: var(--transition);
}

.search-toggle:hover {
  background: #f8f9fa;
}

/* Find Location Button */
.btn-find-location {
  display: flex;
  align-items: center;
  gap: 5px;
  background: var(--button-secondary);
  border: 1px solid var(--button-border);
  color: #000;
  padding: 8px 16px;
  border-radius: 20px;
  text-decoration: none;
  font-size: 14px;
  transition: var(--transition);
  text-align: center;
  font-style: normal;
  font-weight: var(--type-role-weight-label, 500);
  line-height: 100%; /* 14px */
  min-height: 38px;
}

.btn-find-location:hover {
  background: #f8f9fa;
  text-decoration: none;
  color: var(--button-border);
}

/* Contact Us Button */
.btn-contact-us {
  min-height: 38px;
  display: flex;
  align-items: center;
  gap: 5px;
  background: var(--button-primary);
  border: 1px solid var(--button-primary);
  color: var(--button-secondary);
  padding: 8px 16px;
  border-radius: 20px;
  text-decoration: none;
  font-size: 14px;
  transition: var(--transition);
  text-align: center;
  font-style: normal;
  font-weight: var(--type-role-weight-label, 500);
  line-height: 100%;
}

.btn-contact-us:hover {
  background: #333333;
  text-decoration: none;
  color: var(--button-secondary);
}

/* Content Adjustment */
.site-wrapper {
  padding-top: 80px;
}

/* Responsive Design */
@media (max-width: 768px) {
  .header-main .container {
    padding: 0 15px;
  }

  .header-actions {
    gap: 10px;
  }

  .btn-contact-us {
    display: none;
  }

  .btn-find-location,
  .btn-contact-us {
    padding: 8px 12px;
  }

  .logo-text {
    font-size: 20px;
  }
}

@media (max-width: 480px) {
  .header-main .container {
    padding: 0 10px;
  }

  .menu-toggle-new span {
    display: none;
  }

  .logo-text {
    font-size: 18px;
  }
}

@media (max-width: 600px){
	.btn-find-location {display:none;}
}
/* Hide checkboxes */
.menu-checkbox {
  display: none !important;
}

/* Main slide menu */
.slide-menu {
  position: fixed;
  top: 100px;
  left: 0;
  background: #fff;
  width: var(--sidebar-width);
  height: 100vh;
  transform: translate3d(-100%, 0, 0);
  transition: transform 0.35s ease;
  z-index: 1000;
  box-shadow: none;
  padding: 20px;
  overflow-y: auto;
}

/* Toggle button inside slide menu */
.slide-menu .menu-toggle {
  position: absolute;
  right: -60px;
  width: 60px;
  height: 60px;
  line-height: 60px;
  display: block;
  padding: 0;
  text-indent: -9999px;
  background: #fff
    url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none"><path d="M7.5 4.16665L13.3333 9.99998L7.5 15.8333" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>')
    50% 50% / 25px 25px no-repeat;
  cursor: pointer;
}

/* WordPress menu list styling */
.main-menu-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.main-menu-list .menu-item {
  margin: 0;
}

/* Menu item labels (parent items with submenus) */
.menu-item-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 15px 20px;
  cursor: pointer;
  text-decoration: none;
  color: #000;
  font-size: 16px;
  font-weight: 600;
  line-height: 140%;
  transition: all 0.2s;
  background-color: transparent;
  border: none;
  text-align: left;
  box-sizing: border-box;
}

.menu-item-label:hover {
  color: var(--header-accent);
  background: #f8f9fa;
}

.menu-item-label svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

/* Menu item links (regular items) */
.main-menu-list .menu-item a,
.submenu .menu-item a {
  display: block;
  padding: 15px 20px;
  text-decoration: none;
  color: #000;
  font-size: 16px;
  font-weight: 600;
  line-height: 140%;
  transition: all 0.2s;
  background-color: transparent;
  border: none;
  width: 100%;
  text-align: left;
  box-sizing: border-box;
}

.main-menu-list .menu-item a:hover,
.submenu .menu-item a:hover {
  color: var(--header-accent);
  background: #f8f9fa;
  text-decoration: none;
}

/* Menu item labels in submenus (tier 2 and 3) */
.submenu .menu-item-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 15px 20px;
  cursor: pointer;
  text-decoration: none;
  color: #000;
  font-size: 16px;
  font-weight: 600;
  line-height: 140%;
  transition: all 0.2s;
  background-color: transparent;
  border: none;
  text-align: left;
  box-sizing: border-box;
}

.submenu .menu-item-label:hover {
  text-decoration: underline;
}

.submenu .menu-item-label svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

/* Submenus */
.submenu {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  transform: translate3d(100%, 0, 0);
  transition: transform 0.35s ease;
  z-index: 10;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Back button */
.back-btn {
  background: #fff;
  color: white;

  margin: 0;
  padding: 0;
}

.back-btn .back-button {
  background: #fff;
  padding: 15px 20px;
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  height: auto;
  line-height: normal;
  cursor: pointer;
  border: none;
  text-decoration: none;
  color: #000;
  /* Label/md */
  font-size: var(--font-size-base, 16px);
  font-style: normal;
  font-weight: var(--type-role-weight-label, 600);
  line-height: 140%;
}

.back-btn .back-button:hover {
  text-decoration: underline;
}

.back-btn .icon-chevron-left {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.back-btn .back-button span {
  color: #000;
  border-bottom: none;
}

/* Show menu when checkbox is checked */
#menu:checked + .slide-menu {
  transform: translate3d(0, 0, 0);
}

/* Show submenus when their checkboxes are checked - use attribute selector for flexibility */
input[id^="submenu-"]:checked + .submenu {
  transform: translate3d(0, 0, 0);
}

/* Sidebar Actions */
.sidebar-actions {
  margin-top: 30px;
  padding-top: 20px;
  border-top: 1px solid var(--header-border);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.btn-find-location-sidebar {
  display: flex;
  align-items: center;
  gap: 5px;
  background: var(--button-secondary);
  border: 1px solid var(--button-border);
  color: var(--button-border);
  padding: 12px 15px;
  border-radius: 20px;
  text-decoration: none;
  font-size: 14px;
  transition: var(--transition);
  justify-content: center;	
}

.btn-find-location-sidebar:hover {
  background: #f8f9fa;
  text-decoration: none;
  color: var(--button-border);
}

.btn-contact-us-sidebar {
  display: flex;
  align-items: center;
  gap: 5px;
  background: var(--button-primary);
  border: 1px solid var(--button-primary);
  color: var(--button-secondary);
  padding: 12px 15px;
  border-radius: 20px;
  text-decoration: none;
  font-size: 14px;
  transition: var(--transition);
  justify-content: center;
}

.btn-contact-us-sidebar:hover {
  background: #333333;
  text-decoration: none;
  color: var(--button-secondary);
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .slide-menu {
    width: 100%;
    transform: translate3d(-100%, 0, 0);
  }

  #menu:checked + .slide-menu {
    transform: translate3d(0, 0, 0);
  }
}

/* External link icon for menu items - right aligned like chevron arrows */
.main-menu-list .menu-item.external-link a,
.submenu .menu-item.external-link a {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.main-menu-list .menu-item.external-link a::after,
.submenu .menu-item.external-link a::after {
  content: "";
  display: inline-block;
  width: 13px;
  height: 13px;
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 16 16" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M3.33301 4.66666C3.1562 4.66666 2.98663 4.7369 2.8616 4.86192C2.73658 4.98695 2.66634 5.15652 2.66634 5.33333V12.6667C2.66634 12.8435 2.73658 13.013 2.8616 13.1381C2.98663 13.2631 3.1562 13.3333 3.33301 13.3333H10.6663C10.8432 13.3333 11.0127 13.2631 11.1377 13.1381C11.2628 13.013 11.333 12.8435 11.333 12.6667V8.66666C11.333 8.29847 11.6315 8 11.9997 8C12.3679 8 12.6663 8.29847 12.6663 8.66666V12.6667C12.6663 13.1971 12.4556 13.7058 12.0806 14.0809C11.7055 14.4559 11.1968 14.6667 10.6663 14.6667H3.33301C2.80257 14.6667 2.29387 14.4559 1.91879 14.0809C1.54372 13.7058 1.33301 13.1971 1.33301 12.6667V5.33333C1.33301 4.8029 1.54372 4.29419 1.91879 3.91911C2.29387 3.54404 2.80257 3.33333 3.33301 3.33333H7.33301C7.7012 3.33333 7.99967 3.63181 7.99967 3.99999C7.99967 4.36818 7.7012 4.66666 7.33301 4.66666H3.33301Z" fill="%230B2E59"/><path fill-rule="evenodd" clip-rule="evenodd" d="M9.33301 1.99999C9.33301 1.63181 9.63148 1.33333 9.99967 1.33333H13.9997C14.3679 1.33333 14.6663 1.63181 14.6663 1.99999V5.99999C14.6663 6.36818 14.3679 6.66666 13.9997 6.66666C13.6315 6.66666 13.333 6.36818 13.333 5.99999V2.66666H9.99967C9.63148 2.66666 9.33301 2.36818 9.33301 1.99999Z" fill="%232A2927"/><path fill-rule="evenodd" clip-rule="evenodd" d="M14.4714 1.52859C14.7318 1.78894 14.7318 2.21105 14.4714 2.4714L7.13807 9.80473C6.87772 10.0651 6.45561 10.0651 6.19526 9.80473C5.93491 9.54438 5.93491 9.12227 6.19526 8.86192L13.5286 1.52859C13.7889 1.26824 14.2111 1.26824 14.4714 1.52859Z" fill="%232A2927"/></svg>');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  flex-shrink: 0;
}

/* Search Functionality */
.search-checkbox {
  display: none !important;
}

.search-input-container {
  position: absolute;
  top: 50%;
  right: 320px;
  transform: translateY(-50%) translateX(100%);
  width: 0;
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 20px;

  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  z-index: 1000;
  padding: 0;
  overflow: hidden;
}

.search-checkbox:checked + .search-toggle + .search-input-container {
  width: 250px;
  transform: translateY(-50%) translateX(calc(100% - 250px));
  opacity: 1;
  visibility: visible;
  padding: 8px 16px;
}

.search-input-container form {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 100%;
}

.search-field {
  flex: 1;
  padding: 0;
  border: none;
  background: transparent;
  font-size: 14px;
  outline: none;
  color: #333;
}

.search-field::placeholder {
  color: #999;
}

.search-submit {
  padding: 4px;
  background: transparent;
  border: none;
  color: #666;
  cursor: pointer;
  transition: color 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.search-submit:hover {
  color: var(--primary-color, #0060a9);
}

.search-submit i {
  font-size: 14px;
}
/* Menu light styling for tier 2 and 3 items */
.menu-light a,
.menu-light .menu-item-label,
.main-menu-list .menu-item .menu-light a,
.submenu .menu-item .menu-light a {
  font-family: "Trade Gothic W01 Roman", sans-serif;
  color: #5d5c5a;
  text-align: left;
  font-size: var(--font-size-sm, 14px);
  font-style: normal;
  font-weight: var(--type-role-weight-label, 400);
  line-height: 100%; /* 14px */
}

.main-menu-list .menu-item .menu-parent.menu-light a,
.main-menu-list .menu-item .menu-state.menu-light a {
  color: var(--Gray-400, #97a3b7) !important;
  font-family: "Trade Gothic W01 Roman", sans-serif !important;
  font-size: var(--font-size-xs, 12px) !important;
  font-style: normal;
  font-weight: var(--type-role-weight-label, 600) !important;
  line-height: 140% !important;
}