/* Segmented Bar — Sticky + Anchors + Active (hover == active) */
:root{
  --border: #E0E0E0;
  --text: #00282B;
  --gap: 10px;
  --pad: 17.71px;
  --font: clamp(14px, 1.7vw, 17px);
  --barH: clamp(72px, 12vw, 110px);
  --hover-bg: linear-gradient(162.12deg, #456F46 -31.9%, #00282D 100%); /* used for both hover & active */
  --stroke-grad: linear-gradient(217.63deg, #456F46 0%, #FFFFFF 50.45%, #D7E128 99.93%);
  --iconW: 50.19055938720703px;
  --iconH: 50.19055938720703px;
  --stick-top: 200px;
}

html{ scroll-behavior: smooth; }

.sbar-wrap{ position: relative; }
.sbar-ph{ height: 0; }

/* Sticky container */
nav.segment-bar{
  position: sticky;
  top: calc(var(--stick-top, 0px) + env(safe-area-inset-top));
  z-index: var(--stick-z, 1000);
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  border: 1px solid var(--border);
  overflow: hidden;
  background: #fff;
  box-sizing: border-box;
  font-family: "Host Grotesk", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

/* WP admin bar */
.admin-bar nav.segment-bar{
  top: calc(var(--stick-top, 0px) + env(safe-area-inset-top) + 32px);
}
@media (max-width: 782px){
  .admin-bar nav.segment-bar{ top: calc(var(--stick-top, 0px) + env(safe-area-inset-top) + 46px); }
}

.segment-list{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

nav.segment-bar .segment{
  position: relative;
  min-height: var(--barH);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--gap);
  padding: var(--pad);
  box-sizing: border-box;

  font-weight: 700;
  font-size: var(--font);
  color: var(--text);
  text-decoration: none;

  background: #fff;
  min-width: 0;
  border: 1.54px solid transparent;
  background-clip: padding-box;
  transition: background .28s ease, color .2s ease;
  z-index: 0;
}

/* Gradient ring */
nav.segment-bar .segment::after{
  content:"";
  position:absolute; inset:0;
  padding: 1.54px;
  background: var(--stroke-grad);
  pointer-events:none;
  opacity: 0;
  transition: opacity .25s ease;
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
          mask-composite: exclude;
  z-index: 2;
}

/* Dividers */
nav.segment-bar .segment::before{
  content:"";
  position:absolute; top:0; bottom:0; right:0;
  width:1px; background: var(--border);
  z-index: 1;
}
nav.segment-bar .segment:nth-child(3n)::before{ display:none; }

/* Hover / Focus / Active — identical visuals */
nav.segment-bar .segment:hover,
nav.segment-bar .segment:focus-visible,
nav.segment-bar .segment.is-active,
nav.segment-bar .segment[aria-current="page"]{
  background: #00282D !important;       /* fallback */
  background: var(--hover-bg) !important;/* gradient */
  color: #fff !important;
}
nav.segment-bar .segment:hover::after,
nav.segment-bar .segment:focus-visible::after,
nav.segment-bar .segment.is-active::after,
nav.segment-bar .segment[aria-current="page"]::after{ opacity: 1; }

/* hide divider seam when hovered/active */
nav.segment-bar .segment:hover::before,
nav.segment-bar .segment:focus-visible::before,
nav.segment-bar .segment.is-active::before,
nav.segment-bar .segment[aria-current="page"]::before{ opacity: 0; }
nav.segment-bar .segment:hover + .segment::before,
nav.segment-bar .segment:focus-visible + .segment::before,
nav.segment-bar .segment.is-active + .segment::before,
nav.segment-bar .segment[aria-current="page"] + .segment::before{ opacity: 0; }

/* Icon swap */
.segment__iconWrap{
  position: relative;
  width: var(--iconW);
  height: var(--iconH);
  flex: 0 0 auto;
}
.segment__icon{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  display: block;
  transition: opacity .25s ease, transform .25s ease, filter .25s ease;
}
.segment__icon.is-hover{ opacity: 0; filter: brightness(1.05) saturate(1.05); }

nav.segment-bar .segment:hover .segment__icon.is-hover,
nav.segment-bar .segment:focus-visible .segment__icon.is-hover,
nav.segment-bar .segment.is-active .segment__icon.is-hover,
nav.segment-bar .segment[aria-current="page"] .segment__icon.is-hover{ opacity: 1; transform: scale(1.02); }
nav.segment-bar .segment:hover .segment__icon.is-default,
nav.segment-bar .segment:focus-visible .segment__icon.is-default,
nav.segment-bar .segment.is-active .segment__icon.is-default,
nav.segment-bar .segment[aria-current="page"] .segment__icon.is-default{ opacity: 0; transform: scale(0.98); }

/* Label */
nav.segment-bar .segment__label{
  line-height: 1.35;
  letter-spacing: .2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text);
  transition: color .2s ease;
}
nav.segment-bar .segment:hover .segment__label,
nav.segment-bar .segment:focus-visible .segment__label,
nav.segment-bar .segment.is-active .segment__label,
nav.segment-bar .segment[aria-current="page"] .segment__label{ color: #fff; }

/* Responsive */
@media (max-width: 900px){
  .segment-list{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  nav.segment-bar .segment:nth-child(2n)::before{ display:none; }
  nav.segment-bar .segment:nth-child(-n+2){ box-shadow: inset 0 -1px 0 var(--border); }
}
@media (max-width: 560px){
  .segment-list{ grid-template-columns: 1fr; }
  nav.segment-bar .segment::before{ display:none; }
  nav.segment-bar .segment:not(:last-child){ box-shadow: inset 0 -1px 0 var(--border); }
  nav.segment-bar .segment{ justify-content: flex-start; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  nav.segment-bar .segment, .segment__icon{ transition: none !important; }
}

/* Fixed fallback */
nav.segment-bar.is-fixed{ position: fixed !important; left: 0; right: 0; }


/* ==== Mobile override: right-side vertical rail (icons only) ==== */
@media (max-width: 560px){
  /* no spacer needed when we force fixed on mobile */
  .sbar-wrap .sbar-ph{ display:none !important; }

  nav.segment-bar{
    position: fixed !important;               /* override sticky/fallback */
    top: calc(var(--stick-top, 0px) + env(safe-area-inset-top) + 12px);
    right: 12px;
    left: auto;                                /* ensure right-anchored */
    width: 56px;                               /* compact rail width */
    max-width: 56px;
    border-radius: 16px;
    box-shadow: 0 8px 28px rgba(0,0,0,.10);
    overflow: visible;                          /* allow glow on items */
    z-index: var(--stick-z, 1000);
  }

  /* switch from grid to a stacked column */
  .segment-list{
    display: flex !important;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 8px;
  }

  /* compact, square hit area per item */
  nav.segment-bar .segment{
    width: 40px;
    height: 40px;
    min-height: 0;
    padding: 0;
    justify-content: center;
    border-radius: 12px;
    box-shadow: none !important;                /* remove row separators */
  }

  /* hide any grid dividers for this layout */
  nav.segment-bar .segment::before{ display:none !important; }

  /* keep your gradient ring working on the tighter button */
  nav.segment-bar .segment::after{
    padding: 1.2px;                             /* subtle ring on small */
  }

  /* icon size for the compact buttons */
  .segment__iconWrap{
    width: 20px;
    height: 20px;
  }

  /* visually hide labels but keep for a11y/screen readers */
  nav.segment-bar .segment__label{
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0);
    white-space: nowrap; border: 0;
  }
}
@media (max-width:560px){nav.segment-bar .segment::after,.segment__iconWrap::after{display:none!important;}}