/* ============================================================
   Menu Paws — Paws Theme
   Navigation bar: horizontal top-level + half-pill dropdowns
   Colour variants: .mpaws-cobalt  /  .mpaws-green
   Direction:       .mpaws-ltr     /  .mpaws-rtl
   ============================================================ */

/* ---------- Colour tokens ---------- */
.mpaws-cobalt {
  --mpaws-bar: #0050EF;
  --mpaws-bar-hov: #003EC2;
  --mpaws-txt: #ffffff;
  --mpaws-drop-bg: #0050EF;
  --mpaws-drop-hov: #003EC2;
  --mpaws-drop-txt: #ffffff;
  --mpaws-ph-bg: #0050EF;
  --mpaws-ph-hov: #003EC2;
  --mpaws-ph-txt: #ffffff;
  --mpaws-ph-sub-bg: #003EC2;
}

.mpaws-green {
  --mpaws-bar: #1F5C38;
  --mpaws-bar-hov: #174D2F;
  --mpaws-txt: #ffffff;
  --mpaws-drop-bg: #1F5C38;
  --mpaws-drop-hov: #174D2F;
  --mpaws-drop-txt: #ffffff;
  --mpaws-ph-bg: #1F5C38;
  --mpaws-ph-hov: #174D2F;
  --mpaws-ph-txt: #ffffff;
  --mpaws-ph-sub-bg: #174D2F;
}

/* ---------- Shape tokens ---------- */
/* Default radius (rounded-3) is set on .mpaws-wrapper.
   Shape classes override --mpaws-radius for the selected shape.
   Values match NivoCart getShapes() keys exactly.             */
.mpaws-wrapper {
  --mpaws-radius: 3px;
}

.mpaws-shape-rounded-0 { --mpaws-radius: 0px; }
.mpaws-shape-rounded-3 { --mpaws-radius: 3px; }
.mpaws-shape-rounded-5 { --mpaws-radius: 5px; }
.mpaws-shape-rounded-7 { --mpaws-radius: 7px; }
.mpaws-shape-rounded-9 { --mpaws-radius: 9px; }
.mpaws-shape-rounded-11 { --mpaws-radius: 11px; }
.mpaws-shape-rounded-13 { --mpaws-radius: 13px; }
.mpaws-shape-rounded-15 { --mpaws-radius: 15px; }
.mpaws-shape-rounded-17 { --mpaws-radius: 17px; }
.mpaws-shape-rounded-19 { --mpaws-radius: 19px; }
.mpaws-shape-rounded-21 { --mpaws-radius: 21px; }

/* ---------- Wrapper ---------- */
.mpaws-wrapper {
  width: 100%;
  box-sizing: border-box;
  position: relative;
  z-index: 200;
}

.mpaws-holder {
  position: relative;
}

/* ---------- Desktop bar ---------- */
.mpaws-bar {
  display: flex;
  align-items: stretch;
  background-color: var(--mpaws-bar);
  width: 100%;
  box-sizing: border-box;
  min-height: 48px;
  border-radius: var(--mpaws-radius);
}

.mpaws-nav {
  display: flex;
  align-items: stretch;
  list-style: none;
  margin: 0;
  padding: 0;
  flex-wrap: nowrap;
}

/* ---------- Top-level items ---------- */
.mpaws-item {
  position: relative;
  display: flex;
  align-items: stretch;
}

/* Round the first and last link to follow the bar's border-radius */
.mpaws-nav > .mpaws-item:first-child > .mpaws-link {
  border-radius: var(--mpaws-radius) 0 0 var(--mpaws-radius);
}
.mpaws-nav > .mpaws-item:last-child > .mpaws-link {
  border-radius: 0 var(--mpaws-radius) var(--mpaws-radius) 0;
}

.mpaws-link,
.mpaws-link:link,
.mpaws-link:visited,
.mpaws-link:active {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0 18px;
  color: var(--mpaws-txt);
  text-decoration: none;
  font-family: 'Figtree', system-ui, sans-serif;
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.18s;
  line-height: 1;
  border: none;
  background: none;
}

.mpaws-link:hover,
.mpaws-item.mpaws-open > .mpaws-link {
  background-color: var(--mpaws-bar-hov);
  color: var(--mpaws-txt);
  text-decoration: none;
}

.mpaws-nolink {
  cursor: default;
}

/* Home icon */
.mpaws-home-icon {
  font-size: 20px;
  line-height: 1;
}

/* Caret arrow */
.mpaws-caret {
  display: inline-block;
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  vertical-align: middle;
  margin-top: 1px;
  transition: transform 0.18s;
}

.mpaws-item.mpaws-open > .mpaws-link .mpaws-caret {
  transform: rotate(180deg);
}

/* ---------- Dropdown (half-pill: flat top, rounded bottom) ---------- */
.mpaws-drop {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 200px;
  background-color: var(--mpaws-drop-bg);
  border-radius: 0 0 28px 28px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.22);
  z-index: 300;
  overflow: hidden;
}

.mpaws-item.mpaws-open > .mpaws-drop,
.mpaws-item:focus-within > .mpaws-drop {
  display: block;
}

/* CSS hover open for pointer devices */
@media (hover: hover) {
  .mpaws-item.mpaws-has-drop:hover > .mpaws-drop {
    display: block;
  }
  .mpaws-item.mpaws-has-drop:hover > .mpaws-link {
    background-color: var(--mpaws-bar-hov);
  }
  .mpaws-item.mpaws-has-drop:hover > .mpaws-link .mpaws-caret {
    transform: rotate(180deg);
  }
}

.mpaws-drop ul {
  list-style: none;
  margin: 0;
  padding: 6px 0;
}

.mpaws-drop-link,
.mpaws-drop-link:link,
.mpaws-drop-link:visited,
.mpaws-drop-link:active {
  display: block;
  padding: 9px 20px;
  color: var(--mpaws-drop-txt);
  text-decoration: none;
  font-family: 'Figtree', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  transition: background-color 0.15s;
}

.mpaws-drop-link:hover {
  background-color: var(--mpaws-drop-hov);
  color: var(--mpaws-drop-txt);
  text-decoration: none;
}

/* ---------- Burger button (injected by JS) ---------- */
.mpaws-burger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background-color: var(--mpaws-bar);
  color: var(--mpaws-txt);
  border: none;
  cursor: pointer;
  flex-shrink: 0;
  transition: background-color 0.18s;
}

.mpaws-burger:hover {
  background-color: var(--mpaws-bar-hov);
}

/* ---------- Mobile menu ---------- */
.mpaws-phone {
  background-color: var(--mpaws-ph-bg);
  width: 100%;
  box-sizing: border-box;
}

.mpaws-phone > ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.mpaws-ph-item {
  border-bottom: 1px solid rgba(255,255,255,0.12);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.mpaws-ph-link,
.mpaws-ph-link:link,
.mpaws-ph-link:visited,
.mpaws-ph-link:active {
  flex: 1;
  display: block;
  padding: 13px 18px;
  color: var(--mpaws-ph-txt);
  text-decoration: none;
  font-family: 'Figtree', system-ui, sans-serif;
  font-size: 15px;
  font-weight: 600;
}

.mpaws-ph-link:hover {
  background-color: var(--mpaws-ph-hov);
  color: var(--mpaws-ph-txt);
  text-decoration: none;
}

.mpaws-ph-toggle {
  background: none;
  border: none;
  color: var(--mpaws-ph-txt);
  padding: 13px 18px;
  cursor: pointer;
  font-size: 12px;
  transition: transform 0.2s;
  flex-shrink: 0;
}

.mpaws-ph-sub {
  width: 100%;
  list-style: none;
  margin: 0;
  padding: 0;
  background-color: var(--mpaws-ph-sub-bg);
}

.mpaws-ph-sub li {
  border-top: 1px solid rgba(255,255,255,0.08);
}

.mpaws-ph-sublink,
.mpaws-ph-sublink:link,
.mpaws-ph-sublink:visited,
.mpaws-ph-sublink:active {
  display: block;
  padding: 11px 28px;
  color: var(--mpaws-ph-txt);
  text-decoration: none;
  font-family: 'Figtree', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 400;
}

.mpaws-ph-sublink:hover {
  background-color: rgba(255,255,255,0.1);
  color: var(--mpaws-ph-txt);
  text-decoration: none;
}

/* ---------- Responsive breakpoint ---------- */
@media (max-width: 768px) {
  .mpaws-bar {
    display: none;
  }
  .mpaws-burger {
    display: flex;
  }
}

@media (min-width: 769px) {
  .mpaws-phone {
    display: none !important;
  }
  .mpaws-burger {
    display: none !important;
  }
}