/* =========================================================
   KAMBO - ROLLBACK CSS
   Based on the version that was closest to correct.
   Desktop: normal text menu
   Mobile: hamburger only, dropdown aligned right
   ========================================================= */

:root {
  --kambo-header-bg: #faf8f3;
  --kambo-body-bg: #d8cfb8;
  --kambo-breadcrumb-bg: #d3cab2;
  --kambo-footer-bg: #9a8063;
  --kambo-footer-text: #f7f2e8;
  --kambo-text: #6f533c;
  --kambo-text-hover: #4f3a29;
  --kambo-button-border: #a98263;
  --kambo-button-icon: #6a4c33;
}

body,
.site,
.site-grid,
.body-wrapper,
.container-main,
.container-component,
main,
.component-content,
.com-content,
.blog,
.blog-featured {
  background: var(--kambo-body-bg) !important;
}

.container-header,
.container-header.full-width,
.header,
.container-topbar,
.container-below-top {
  background: var(--kambo-header-bg) !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

.container-brand-nav {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: nowrap !important;
  width: 100% !important;
  box-sizing: border-box !important;
  padding: 14px 28px !important;
  background: var(--kambo-header-bg) !important;
  position: relative !important;
  gap: 20px !important;
}

.container-brand-nav .navbar-brand {
  flex: 0 0 auto !important;
  order: 1 !important;
  margin: 0 !important;
  padding: 0 !important;
  position: relative !important;
  z-index: 30 !important;
}

.container-brand-nav .brand-logo,
.container-brand-nav .brand-logo img,
.container-brand-nav .navbar-brand img,
.container-brand-nav .navbar-brand svg,
.container-brand-nav .brand-logo svg {
  display: block !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  text-decoration: none !important;
}

.container-brand-nav .navbar-brand img,
.container-brand-nav .navbar-brand svg,
.container-brand-nav .brand-logo img,
.container-brand-nav .brand-logo svg {
  width: 220px !important;
  max-width: 100% !important;
  height: auto !important;
}

.container-brand-nav .site-description {
  display: none !important;
}

.container-brand-nav .container-nav {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  order: 2 !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  position: relative !important;
  z-index: 30 !important;
}

.container-brand-nav .mod-menu,
.container-brand-nav nav,
.container-brand-nav .navbar,
.container-brand-nav .navbar-collapse,
.container-brand-nav .collapse {
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  transition: none !important;
  animation: none !important;
}

.container-brand-nav .mod-menu a,
.container-brand-nav .mod-menu span,
.container-brand-nav .metismenu a,
.container-brand-nav .metismenu span {
  color: var(--kambo-text) !important;
  text-decoration: none !important;
  opacity: 1 !important;
}

.container-brand-nav .mod-menu a:hover,
.container-brand-nav .mod-menu a:focus,
.container-brand-nav .metismenu a:hover,
.container-brand-nav .metismenu a:focus {
  color: var(--kambo-text-hover) !important;
}

.container-brand-nav .mod-menu > ul,
.container-brand-nav .metismenu {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* DESKTOP */
@media (min-width: 992px) {
  .container-brand-nav .navbar-toggler {
    display: none !important;
  }

  .container-brand-nav .container-nav {
    position: static !important;
    top: auto !important;
    right: auto !important;
    left: auto !important;
    transform: none !important;
    margin-left: auto !important;
    width: auto !important;
  }

  .container-brand-nav .mod-menu > ul,
  .container-brand-nav .metismenu {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    flex-wrap: nowrap !important;
    gap: 28px !important;
    width: auto !important;
  }

  .container-brand-nav .mod-menu > ul > li,
  .container-brand-nav .metismenu > li {
    display: inline-flex !important;
    align-items: center !important;
    width: auto !important;
    margin: 0 !important;
  }

  .container-brand-nav .metismenu .mm-collapse,
  .container-brand-nav .mod-menu .mod-menu__sub {
    position: absolute !important;
    background: var(--kambo-header-bg) !important;
    border: none !important;
    box-shadow: 0 10px 25px rgba(0,0,0,0.08) !important;
    border-radius: 8px !important;
    padding: 10px 0 !important;
    min-width: 220px !important;
  }
}

/* MOBILE / TABLET */
@media (max-width: 991px) {
  .container-brand-nav {
    padding: 12px 18px !important;
    gap: 12px !important;
  }

  .container-brand-nav .navbar-brand img,
  .container-brand-nav .navbar-brand svg,
  .container-brand-nav .brand-logo img,
  .container-brand-nav .brand-logo svg {
    width: 170px !important;
    height: auto !important;
  }

  .container-brand-nav .container-nav {
    flex: 0 0 auto !important;
    width: auto !important;
    margin-left: auto !important;
    justify-content: flex-end !important;
    position: relative !important;
    padding-top: 8px !important; /* small safe vertical adjustment */
  }

  /* hide desktop lists */
  .container-brand-nav .mod-menu > ul,
  .container-brand-nav .metismenu {
    display: none !important;
  }

  .container-brand-nav .navbar-toggler,
  .container-brand-nav button.navbar-toggler {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 52px !important;
    height: 52px !important;
    padding: 0 !important;
    margin: 0 !important;
    background: var(--kambo-header-bg) !important;
    border: 1.5px solid var(--kambo-button-border) !important;
    border-radius: 10px !important;
    box-shadow: none !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    color: transparent !important;
    top: auto !important;
    right: auto !important;
    left: auto !important;
    bottom: auto !important;
    transform: none !important;
  }

  .container-brand-nav .navbar-toggler-icon,
  .container-brand-nav .navbar-toggler span,
  .container-brand-nav .navbar-toggler i {
    display: none !important;
    background: none !important;
    background-image: none !important;
    box-shadow: none !important;
    color: transparent !important;
    width: 0 !important;
    height: 0 !important;
    border: 0 !important;
  }

  .container-brand-nav .navbar-toggler::before,
  .container-brand-nav .navbar-toggler::after {
    content: "" !important;
    position: absolute !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 24px !important;
    height: 3px !important;
    background: var(--kambo-button-icon) !important;
    border-radius: 2px !important;
    opacity: 1 !important;
  }

  .container-brand-nav .navbar-toggler::before {
    top: 16px !important;
    box-shadow: 0 9px 0 var(--kambo-button-icon) !important;
  }

  .container-brand-nav .navbar-toggler::after {
    top: 34px !important;
  }

  .container-brand-nav .navbar-collapse,
  .container-brand-nav .collapse {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
  }

  .container-brand-nav .navbar-collapse.show,
  .container-brand-nav .collapse.show {
    position: absolute !important;
    top: calc(100% + 8px) !important;
    right: 0 !important;
    left: auto !important;
    width: 260px !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    background: var(--kambo-header-bg) !important;
    padding: 16px 18px !important;
    margin: 0 !important;
    z-index: 999 !important;
    box-sizing: border-box !important;
    border: none !important;
    border-radius: 10px !important;
    box-shadow: 0 10px 25px rgba(0,0,0,0.08) !important;
  }

  .container-brand-nav .navbar-collapse.show > ul,
  .container-brand-nav .collapse.show > ul,
  .container-brand-nav .navbar-collapse.show .mod-menu > ul,
  .container-brand-nav .collapse.show .mod-menu > ul,
  .container-brand-nav .navbar-collapse.show .metismenu,
  .container-brand-nav .collapse.show .metismenu {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
  }

  .container-brand-nav .navbar-collapse.show li,
  .container-brand-nav .collapse.show li {
    display: block !important;
    width: 100% !important;
    margin: 0 0 14px 0 !important;
  }

  .container-brand-nav .navbar-collapse.show a,
  .container-brand-nav .collapse.show a,
  .container-brand-nav .navbar-collapse.show span,
  .container-brand-nav .collapse.show span {
    display: block !important;
    width: 100% !important;
  }

  .container-brand-nav .mm-collapse,
  .container-brand-nav .mod-menu__sub {
    position: static !important;
    width: 100% !important;
    margin: 8px 0 0 0 !important;
    padding: 0 0 0 18px !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
  }
}

.breadcrumb,
.mod-breadcrumbs,
.container-breadcrumbs,
nav[aria-label="Breadcrumb"] {
  background: var(--kambo-breadcrumb-bg) !important;
  border: none !important;
  box-shadow: none !important;
}

.mod-custom,
.moduletable,
.card,
.boxed,
.well,
figure,
figure img,
img {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.footer,
.container-footer,
.site-footer,
.footer .grid-child {
  background: var(--kambo-footer-bg) !important;
  color: var(--kambo-footer-text) !important;
  border: none !important;
  box-shadow: none !important;
}

.footer .mod-custom,
.footer .module,
.footer .copyright,
.container-footer .mod-custom,
.container-footer .module {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

.footer,
.footer a,
.container-footer,
.container-footer a {
  color: var(--kambo-footer-text) !important;
}