@charset "utf-8";
/* CSS Document */
/* HP4U Menu Shortcode — responsive, AA-accessible, flex-based menu
   Scope is limited to .hp4u-menu-wrap and descendants. */

.hp4u-menu-wrap {
  --hp4u-menu-brand: #d9875c;   
  --hp4u-menu-text:  #4d5259;   
  --hp4u-gap-x: clamp(16px, 6vw, 80px);   /* horizontal gap between columns */
  --hp4u-gap-y: clamp(10px, 10px, 10px); /* vertical gap between rows */
	margin-bottom: var(	--hp4u-margin-default-xlg)!important;
}


.hp4u-menu-nav { display: block; }
.hp4u-menu-wrap--center .hp4u-menu-nav { text-align: center; }
.hp4u-menu-wrap--left   .hp4u-menu-nav { text-align: left; }


.hp4u-menu {
  display: flex;
  flex-wrap: wrap;
  gap: var(--hp4u-gap-y) var(--hp4u-gap-x);
  justify-content: center; 
  padding: 0;
list-style: none!important;
	margin: 0 auto 0 auto!important;
	width:100%;
}



.hp4u-menu--cols-1 > li {
  flex: 0 0 100%;
  max-width: 100%;
}

.hp4u-menu--cols-2 > li {
  flex: 0 0 calc((100% - var(--hp4u-gap-x)) / 2);
  max-width: calc((100% - var(--hp4u-gap-x)) / 2);
}

.hp4u-menu--cols-3 > li {
  /* 2 gaps between 3 columns */
  flex: 0 0 calc((100% - 2 * var(--hp4u-gap-x)) / 3);
  max-width: calc((100% - 2 * var(--hp4u-gap-x)) / 3);
}

.hp4u-menu--cols-4 > li {
  /* 3 gaps between 4 columns */
  flex: 0 0 calc((100% - 3 * var(--hp4u-gap-x)) / 4);
  max-width: calc((100% - 3 * var(--hp4u-gap-x)) / 4);
}


.hp4u-menu-wrap--left .hp4u-menu {
  justify-content: flex-start;
}


@media (max-width: 900px) {
  .hp4u-menu > li, .hp4u-menu--cols-3 > li, .hp4u-menu--cols-4 > li {
  flex: 0 0 calc((100% - var(--hp4u-gap-x)) / 2);
  max-width: calc((100% - var(--hp4u-gap-x)) / 2);
  }
}
@media (max-width: 540px) {
  .hp4u-menu > li {
    flex: 0 0 100%;
    max-width: 100%;
  }
}




.hp4u-menu a {
  display: inline-block;
  text-transform: uppercase;
  letter-spacing: .16em;
  text-decoration: none;
  font-weight: var(--hp4u-main-fontweight-bold);
  color: var(--hp4u-menu-brand);
  text-underline-offset: .18em;
  text-decoration-thickness: .08em;
}


.hp4u-menu .current-menu-item > a,
.hp4u-menu a[aria-current="page"] {
  color: var(--hp4u-menu-text);
}


.hp4u-menu a:hover { color: color-mix(in oklab, var(--hp4u-menu-brand), #000 10%); }
.hp4u-menu .current-menu-item > a:hover,
.hp4u-menu a[aria-current="page"]:hover {
  color: color-mix(in oklab, var(--hp4u-menu-text), #000 12%);
}

/* strong visible keyboard focus (AA)
.hp4u-menu a:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
  text-decoration: underline;
}
 */
/* reduce-motion respect */
@media (prefers-reduced-motion: reduce) {
  .hp4u-menu a { transition: none; }
}