/* =========
   One Mac Header (Desktop + Mobile Offcanvas)
   ========= */

:root{
  --om-max: 1400px;
  --om-text: #979797;
  --om-bg-dark: rgba(0,0,0,.35);
  --om-bg-light: rgba(255,255,255,.85);
}

/* Lock scroll when menu open */
body.om-lock{ overflow:hidden; }

/* Header shell */
.om-header{
  position: relative;
  z-index: 50;
  padding: 16px 0;
}

.om-header__inner{
  max-width: var(--om-max);
  margin: 0 auto;
  padding: 0 24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 24px;
}

/* Logo */
.om-header__logo img{
  display:block;
  width: 100px;
  height: auto;
}

/* Light/dark logo switching
   Default: dark header (show dark logo image i.e. white logo)
   If you add body class "om-light-header", it switches.
*/
.om-logo--light{ display:none; }
body.om-light-header .om-logo--dark{ display:none; }
body.om-light-header .om-logo--light{ display:block; }

body.om-light-header .om-nav > li > a::before{
  filter: brightness(0) saturate(100%) invert(10%);
}

/* Desktop Nav */
.om-header__nav{ flex: 1; display:flex; justify-content:center; }
.om-nav{
  list-style:none;
  display:flex;
  gap: 40px;
  margin: 0;
  padding: 0;
  align-items:center;
}

.om-nav > li > a{
  position: relative;
  display:block;
  align-items:center;
  width:120px;
  gap: 10px;
  color: var(--om-text);
  text-decoration:none;
  font-family: Poppins, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1;
  padding: 6px 0 14px;
  text-transform:capitalize;
}

/* underline line 120px */
.om-nav > li > a::after{
  content:"";
  position:absolute;
  left: 0;
  bottom: 0;
  width: 120px;
  height: 1px;
  background: rgba(255,255,255,.16);
}
body.om-light-header .om-nav > li > a::after{
  background: rgba(0,0,0,.16);
}

/* arrow icon after label */
.om-nav > li > a::before{
  content:"";
  position: absolute;
  right: 0;
  top: 10;                 /* aligns with text line */
  width: 10px;
  height: 10px;
  background: url("/wp-content/uploads/2026/01/Header-Arrow-Icon.svg") no-repeat center/contain;
  opacity: .9;
}

.om-nav > li > a{ justify-content: space-between; }
.om-nav > li > a:hover{ color: #b7b7b7; }

/* CTA button */
.om-cta-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 12px 24px;
  border-radius: 100px;
  text-decoration:none;
  font-family: Poppins, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1;
  color: #000;
  background: linear-gradient(180deg,#ffffff 0%, #979797 100%);
}

/* Light header CTA = black gradient */
body.om-light-header .om-cta-btn{
  color:#fff;
  background: linear-gradient(180deg,#000000 0%, #1a1a1a 100%);
}

/* Mobile toggle */
.om-mobile-toggle{
  display:none;
  background: transparent;
  border: 0;
  padding: 6px;
  cursor:pointer;
}

.om-mobile-toggle img{ width: 38px; height: 38px; display:block; }

/* When header is light (white background) = make icon black */
body.om-light-header .om-mobile-toggle img{
  filter: brightness(0) saturate(100%);
}

/* ====== Mobile Offcanvas ====== */
.om-header,
.om-mobile{
  font-family: Poppins, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

.om-mobile{
  position: fixed;
  inset: 0;
  z-index: 999;
  pointer-events: none;
  opacity: 0;
  transition: opacity .25s ease;
}
.om-mobile.is-open{
  pointer-events: auto;
  opacity: 1;
}

.om-mobile__overlay{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.45);
}

/* Panel */
.om-mobile__panel{
  position: absolute;
  top: 0; right: 0;
  width: min(92vw, 420px);
  height: 100%;
  background: #fff;
  color: #111;
  overflow: hidden;
  padding: 0;
}


/* Views (slide system) */
.om-mobile__view {
  position: absolute;
  inset: 0;
  padding: 16px 20px 20px; /* unified padding */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  transform: translateX(100%);
  transition: transform .28s ease;
}

/* MAIN default should be visible only when active */
.om-mobile__view--main.is-active{ transform: translateX(0); }

/* MAIN slides out left when opening categories */
.om-mobile__view--main.is-left{ transform: translateX(-100%); }

/* CATS comes from right */
.om-mobile__view--cats.is-active{ transform: translateX(0); }

/* Top bar */
.om-mobile__top{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 0 14px;
}

.om-mobile__close,
.om-mobile__back{
  background: transparent;
  border: 0;
  padding: 0px;
  margin-bottom:20px;
  cursor: pointer;
  line-height: 0;
}

.om-mobile__close img,
.om-mobile__back img{
  width: 24px;
  height: 24px;
  display: block;
}

/* Section title */
.om-mobile__section-title{
  font-size: 13px;
  font-weight: 500;
  color: rgba(0,0,0,.55);
  margin: 2px 0 8px;
}

/* List */
.om-mobile__list{
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
}

.om-mobile__item{
  margin: 0;
}

.om-mobile__link{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  font-size: 20px;
  font-weight: 600;
  color: #111;
  text-decoration: none;
  background: transparent;
  border: 0;
  cursor: pointer;
  font-family: inherit;
}

/* Remove that ugly focus box */
.om-mobile__link:focus,
.om-mobile__link:focus-visible{
  outline: none;
}

/* Optional subtle hover on desktop */
.om-mobile__link:hover{ opacity: .85; }

.om-mobile__chev{
  opacity: .55;
  font-size: 35px;
  line-height: 0;
}

/* Bottom */
.om-mobile__bottom{
  margin-top: 22px;
  padding-top: 16px;
}


.om-mobile__divider{
  height: 1px;
  background: rgba(0,0,0,.12);
  margin-bottom: 16px;
}

.om-mobile__cta{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 14px 18px;
  border-radius: 999px;
  background: #000;
  color: #fff;
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
  font-family: Poppins, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  box-sizing: border-box; /* CRITICAL */
}

.om-mobile__smalltext{
  margin-top: 12px;
  font-size: 12px;
  color: rgba(0,0,0,.55);
  font-family: inherit;
}

/* Force mobile close & back icons to black */
.om-mobile__close img,
.om-mobile__back img {
  filter: brightness(0) saturate(100%);
}

.om-mobile__overlay{ z-index: 0; }
.om-mobile__panel{ z-index: 1; }


/* Responsive: show hamburger, hide desktop nav at <= 991 */
@media (max-width: 991px){
  .om-header__nav{ display:none; }
  .om-header__cta{ display:none; }
  .om-mobile-toggle{ display:inline-flex; }
	
  .om-header{
    padding: 0;
  }
	
	.om-header__inner{
		padding: 20px 20px 10px 20px;
}
}