/* --- /styles/hea_menu.css (clean layout, dark-mode ready) --- */

/* i18n no-flash gate on non-English static routes:
   hide by default, reveal only when translations are applied */
html[lang="fr"] .hea-header .hea-menu,
html[lang="nl"] .hea-header .hea-menu,
html[lang="es"] .hea-header .hea-menu,
html[lang="de"] .hea-header .hea-menu {
  opacity: 0;
  pointer-events: none;
}

/* Generic no-flash gate (covers query/localStorage locale before i18n init). */
html.hea-i18n-pending .hea-header .hea-menu {
  opacity: 0;
  pointer-events: none;
}

html[lang="fr"].hea-menu-i18n-ready .hea-header .hea-menu,
html[lang="nl"].hea-menu-i18n-ready .hea-header .hea-menu,
html[lang="es"].hea-menu-i18n-ready .hea-header .hea-menu,
html[lang="de"].hea-menu-i18n-ready .hea-header .hea-menu {
  opacity: 1;
  pointer-events: auto;
}

html.hea-i18n-ready .hea-header .hea-menu {
  opacity: 1;
  pointer-events: auto;
}

/* First-paint boot gate:
   suppress static nav before JS applies grouped + localized structure. */
html:not(.hea-menu-booted) .hea-header .hea-menu{
  opacity: 0;
  pointer-events: none;
}

html.hea-menu-booted .hea-header .hea-menu{
  opacity: 1;
  pointer-events: auto;
}

/* Public nav upgrade gate:
   keep menu hidden until grouped layout is applied to avoid visual flash. */
html.hea-public-nav-upgrading .hea-header .hea-menu{
  opacity: 0;
  pointer-events: none;
}

html.hea-public-nav-ready .hea-header .hea-menu{
  opacity: 1;
  pointer-events: auto;
}

/* =========================
   Header (L1)
   ========================= */

.hea-header{
  width: 100%;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 1000;
  box-shadow: 0 1px 6px rgba(0,0,0,.08);
  border-top: 4px solid var(--brand-color-primary);
}

.hea-header-inner{
  max-width: var(--page-w);
  margin-inline: auto;
  padding: 10px var(--app-pad);
  box-sizing: border-box;

  display: flex;
  align-items: center;
  gap: 14px;
}

/* Logo */
.hea-logo-link{ display:flex; align-items:center; }
.hea-logo{ height: 52px; flex: 0 0 auto; }
@media (max-width: 600px){
  .hea-logo{ height: 40px; }
}

/* L1 nav */
.hea-menu{
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

/* Main links centered */
.hea-nav-main{
  flex: 1 1 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  min-width: 0;
}

/* Utilities on the right */
.hea-nav-util{
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

/* Links */
.hea-menu a{
  text-decoration: none;
  font-weight: 500;
  color: var(--ink);
  padding: 6px 2px;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: color .2s ease, border-color .2s ease, background .15s ease;
}

.hea-menu a:hover{
  color: var(--brand-color-primary);
}

.hea-menu a.active{
  color: var(--brand-color-primary);
  font-weight: 700;
  border-bottom-color: var(--brand-color-primary);
}

/* Icon links */
.icon-link{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid transparent;
}

.icon-link:hover{
  background: color-mix(in oklab, var(--surface-2) 70%, transparent);
  border-color: var(--line);
}

.ico{
  filter: grayscale(100%) brightness(.9);
  opacity: .85;
}
.icon-link:hover .ico{
  filter: none;
  opacity: 1;
}

/* Utility icon active state (notif/account) */
.icon-link.active,
.icon-link[aria-current="page"]{
  border-color: color-mix(in oklab, var(--brand-color-primary) 55%, var(--line));
  background: color-mix(in oklab, var(--brand-color-primary) 10%, var(--surface));
}

.icon-link.active .ico,
.icon-link[aria-current="page"] .ico{
  filter: none;
  opacity: 1;
}

/* Optional: small underline accent (matches your screenshot vibe) */
.icon-link.active::after,
.icon-link[aria-current="page"]::after{
  content:"";
  position:absolute;
  inset-inline: 10px;
  inset-block-end: -6px;
  height: 2px;
  border-radius: 999px;
  background: var(--brand-color-primary);
}

/* Ensure icon-link can host ::after */
.icon-link{
  position: relative;
}

/* Admin pill */
.util-link{
  padding: 6px 10px !important;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface);
}
.util-link:hover{
  border-color: color-mix(in oklab, var(--brand-color-primary) 55%, var(--line));
}

.hea-feedback-trigger{
  display:inline-flex;
  align-items:center;
  gap:7px;
  min-height:36px;
  font-weight:700;
  color:var(--ink);
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.06);
}

.hea-feedback-trigger-icon{
  display:inline-grid;
  place-items:center;
  width:18px;
  height:18px;
  font-size:.9rem;
  line-height:1;
  border-radius:999px;
  background: color-mix(in srgb, var(--brand-color-primary) 14%, var(--surface));
  color: var(--brand-color-primary);
}

.hea-feedback-trigger-label{
  white-space:nowrap;
}

/* Public language switcher: compact globe + dropdown */
.hea-lang-switch{
  display: inline-flex;
  align-items: center;
}
.hea-lang-picker{
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 2px 7px;
  background: var(--surface);
}
.hea-lang-picker-icon{
  font-size: 12px;
  line-height: 1;
}
.hea-lang-picker select{
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ink);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .02em;
  max-width: 56px;
  cursor: pointer;
}

/* Responsive: allow wrap, but keep utilities aligned */
@media (max-width: 980px){
  .hea-header-inner{ flex-wrap: wrap; }
  /* Let menu share the first row with the logo instead of forcing a new line */
  .hea-menu{
    flex: 1 1 0%;
    flex-wrap: wrap;
    justify-content: flex-end;
  }
  /* Put util (lang + login) first so it stays on the logo row */
  .hea-nav-util{ order: -1; }
  /* Nav links wrap to the next line(s) */
  .hea-nav-main{
    width: 100%;
    order: 1;
    justify-content: flex-start;
    gap: 14px;
  }
}

/* Public: keep center truly centered even with right util */
.hea-public-nav .hea-nav-main{
  flex: 1 1 auto;
  justify-content: center;
}
.hea-public-nav .hea-nav-util{
  flex: 0 0 auto;
  margin-left: auto;
}

/* Public mobile: keep nav on one line and scroll horizontally */
@media (max-width: 520px){
  .hea-public-nav .hea-nav-main{
    justify-content: flex-start;
    flex-wrap: nowrap;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    gap: 14px;
    padding-bottom: 4px;
  }
  .hea-public-nav .hea-nav-main > a{
    flex: 0 0 auto;
  }
}


/* =========================
   Sub menu placeholder (L2 container)
   ========================= */

#sub-menu-placeholder{ width: 100%; }

.hea-subnav-stack{
  width:100%;
}


/* =========================
   L2 tabs (your existing style)
   ========================= */

.hea-menu-l2{
  padding-block:8px;
  padding-inline:0;
  background:var(--card, #fff);
  border-block-end:1px solid var(--line, #eee);
}

.hea-menu-l2-shell{
  max-width:var(--page-w);
  margin-inline:auto;
  padding-inline:var(--app-pad);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.hea-menu-l2.is-badge-only{
  padding-block:6px;
}

.hea-menu-l2.is-badge-only .hea-menu-l2-shell{
  justify-content:flex-end;
}

.hea-menu-l2.is-badge-only .hea-menu-l2-left{
  display:none;
}

.hea-menu-l2-left{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  min-height:40px;
}

.hea-menu-l2-right{
  margin-inline-start:auto;
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  min-height:40px;
}

.hea-user-badge{
  display:inline-flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  min-width:0;
}

.hea-user-login-pill,
.hea-user-pill,
.hea-user-logout-btn{
  border:1px solid var(--line);
  background: color-mix(in srgb, var(--surface) 92%, var(--surface-2) 8%);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
}

.hea-user-login-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:36px;
  padding: 0 14px !important;
  border-radius:999px;
  color:var(--ink);
  font-weight:600;
}

.hea-user-login-pill:hover{
  border-color: color-mix(in oklab, var(--brand-color-primary) 45%, var(--line));
  color: var(--brand-color-primary);
}

.hea-user-pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:36px;
  max-width:min(36vw, 320px);
  padding: 0 12px;
  border-radius:999px;
  min-width:0;
}

.hea-user-pill-prefix{
  color:var(--muted);
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
  flex:0 0 auto;
}

.hea-user-pill-name{
  color:var(--ink);
  font-weight:600;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  min-width:0;
}

.hea-user-logout-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:36px;
  height:36px;
  padding:0 !important;
  border-radius:999px;
  flex:0 0 auto;
}

.hea-user-logout-btn:hover{
  border-color: color-mix(in oklab, var(--brand-color-primary) 45%, var(--line));
  background: color-mix(in srgb, var(--surface-2) 84%, var(--surface) 16%);
}

.hea-user-logout-icon{
  width:15px;
  height:15px;
  display:block;
  background: var(--muted);
  -webkit-mask: url("/images/logout.svg") center / contain no-repeat;
  mask: url("/images/logout.svg") center / contain no-repeat;
  opacity:.82;
}

.hea-user-logout-btn:hover .hea-user-logout-icon{
  opacity:1;
  background: var(--brand-color-primary);
}

.hea-menu-l2-tab{
  background: var(--surface);
  padding: 0.4rem 0.75rem;
  color: var(--ink);
  text-decoration: none;
  border-radius: 8px;
  transition: background-color .15s ease, color .15s ease, box-shadow .15s ease;
}

.hea-menu-l2-tab:hover{
  background-color: var(--surface-2);
}

.hea-menu-l2-tab.active{
  background-color: var(--brand-color-primary);
  color: #fff;
  box-shadow: 0 2px 10px rgba(0,0,0,.12);
}

.hea-menu-l3{
  padding: 12px 0 18px;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--surface) 82%, var(--surface-2) 18%) 0%,
    color-mix(in srgb, var(--surface) 92%, var(--bg) 8%) 100%
  );
  border-block-end:1px solid color-mix(in srgb, var(--line) 86%, transparent 14%);
}

.hea-menu-l3.is-hidden{
  display:none;
}

.hea-menu-l3[data-phase="master"]{
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--surface) 84%, #effaf8 16%) 0%,
    color-mix(in srgb, var(--surface) 92%, var(--bg) 8%) 100%
  );
}

.celebration-overlay {
  position: fixed;
  inset: 0;
  z-index: 1600;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(15, 23, 42, 0.46);
  backdrop-filter: blur(5px);
}

.celebration-overlay.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.hea-feedback-overlay {
  position: fixed;
  inset: 0;
  z-index: 1600;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(15, 23, 42, 0.56);
  backdrop-filter: blur(6px);
}

.hea-feedback-overlay.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.hea-feedback-card {
  width: min(760px, 100%);
  max-height: min(90vh, 920px);
  overflow: auto;
  border-radius: 24px;
  border: 1px solid color-mix(in srgb, var(--line) 78%, var(--brand-color-primary) 22%);
  background:
    radial-gradient(circle at top right, color-mix(in srgb, var(--brand-color-primary) 10%, transparent 90%) 0%, transparent 34%),
    linear-gradient(150deg, color-mix(in srgb, var(--surface) 96%, var(--bg) 4%) 0%, color-mix(in srgb, var(--surface) 88%, var(--surface-2) 12%) 100%);
  box-shadow: 0 28px 64px rgba(15, 23, 42, 0.36);
  padding: 24px 24px 20px;
}

.hea-feedback-head {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  margin-bottom:16px;
}

.hea-feedback-kicker {
  margin:0;
  font-size:.8rem;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  color: color-mix(in srgb, var(--ink) 52%, var(--link) 48%);
}

.hea-feedback-tablist {
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:5px;
  border-radius:999px;
  border:1px solid color-mix(in srgb, var(--line) 82%, transparent 18%);
  background: color-mix(in srgb, var(--surface) 86%, var(--surface-2) 14%);
}

.hea-feedback-tab {
  appearance:none;
  border:0;
  background:transparent;
  color:var(--muted);
  border-radius:999px;
  padding:10px 15px;
  font:inherit;
  font-weight:700;
  cursor:pointer;
  transition: background-color .18s ease, color .18s ease, box-shadow .18s ease;
}

.hea-feedback-tab:hover{
  color:var(--ink);
}

.hea-feedback-tab.is-active{
  color:#fff;
  background: linear-gradient(90deg, var(--brand-color-primary), var(--brand-color-secondary));
  box-shadow: 0 10px 22px color-mix(in srgb, var(--brand-color-primary) 22%, transparent 78%);
}

.hea-feedback-copy{
  display:grid;
  gap:8px;
}

.hea-feedback-title{
  margin:0;
  font-size: clamp(1.35rem, 2.8vw, 1.8rem);
  line-height:1.08;
}

.hea-feedback-intro{
  margin:0;
  color:var(--muted);
  line-height:1.52;
}

.hea-feedback-context{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:16px 0 18px;
}

.hea-feedback-chip{
  display:inline-flex;
  align-items:center;
  gap:7px;
  min-height:34px;
  padding:7px 11px;
  border-radius:999px;
  border:1px solid color-mix(in srgb, var(--line) 86%, var(--brand-color-primary) 14%);
  background: color-mix(in srgb, var(--surface) 94%, var(--surface-2) 6%);
}

.hea-feedback-chip-label{
  font-size:.72rem;
  font-weight:800;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:var(--muted);
}

.hea-feedback-chip-value{
  font-size:.88rem;
  font-weight:700;
  color:var(--ink);
}

.hea-feedback-form{
  display:grid;
  gap:16px;
}

.hea-feedback-contact{
  display:grid;
  gap:12px;
  padding:14px 15px;
  border-radius:18px;
  border:1px solid color-mix(in srgb, var(--line) 82%, var(--brand-color-primary) 18%);
  background: color-mix(in srgb, var(--surface) 95%, var(--surface-2) 5%);
}

.hea-feedback-contact-copy{
  display:grid;
  gap:4px;
}

.hea-feedback-contact-title{
  font-size:.96rem;
  font-weight:800;
  color:var(--ink);
}

.hea-feedback-contact-note{
  margin:0;
  color:var(--muted);
  line-height:1.45;
}

.hea-feedback-contact-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:12px;
}

.hea-feedback-panel{
  display:grid;
  gap:12px;
}

.hea-feedback-panel.is-hidden{
  display:none;
}

.hea-feedback-field{
  display:grid;
  gap:6px;
}

.hea-feedback-label{
  font-size:.78rem;
  font-weight:800;
  letter-spacing:.05em;
  text-transform:uppercase;
  color: color-mix(in srgb, var(--muted) 88%, var(--ink) 12%);
}

.hea-feedback-field textarea,
.hea-feedback-field input{
  width:100%;
  min-width:0;
  border-radius:16px;
  border:1px solid color-mix(in srgb, var(--line) 78%, var(--brand-color-primary) 22%);
  background: color-mix(in srgb, var(--surface) 94%, var(--surface-2) 6%);
  color:var(--ink);
  padding:14px 15px;
  font:inherit;
  line-height:1.48;
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.04);
}

.hea-feedback-field textarea{
  min-height:110px;
  resize:vertical;
}

.hea-feedback-field textarea::placeholder{
  color: color-mix(in srgb, var(--muted) 84%, transparent 16%);
}

.hea-feedback-field input::placeholder{
  color: color-mix(in srgb, var(--muted) 84%, transparent 16%);
}

.hea-feedback-field textarea:focus,
.hea-feedback-field input:focus{
  outline:none;
  border-color: color-mix(in srgb, var(--brand-color-primary) 56%, var(--line) 44%);
  box-shadow:
    0 0 0 4px color-mix(in srgb, var(--brand-color-primary) 16%, transparent 84%),
    inset 0 1px 2px rgba(15, 23, 42, 0.04);
}

.hea-feedback-reactions{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.hea-feedback-reaction{
  appearance:none;
  border:1px solid color-mix(in srgb, var(--line) 84%, var(--brand-color-primary) 16%);
  background: color-mix(in srgb, var(--surface) 94%, var(--surface-2) 6%);
  color:var(--ink);
  border-radius:999px;
  padding:10px 14px;
  font:inherit;
  font-weight:700;
  cursor:pointer;
  transition: border-color .18s ease, background-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.hea-feedback-reaction:hover{
  border-color: color-mix(in srgb, var(--brand-color-primary) 48%, var(--line));
  transform: translateY(-1px);
}

.hea-feedback-reaction.is-active{
  border-color: color-mix(in srgb, var(--brand-color-primary) 60%, var(--line));
  background: color-mix(in srgb, var(--brand-color-primary) 12%, var(--surface));
  box-shadow: 0 8px 18px color-mix(in srgb, var(--brand-color-primary) 14%, transparent 86%);
}

.hea-feedback-permissions{
  display:grid;
  gap:10px;
  padding:13px 14px;
  border-radius:16px;
  border:1px solid color-mix(in srgb, var(--line) 82%, var(--brand-color-primary) 18%);
  background: color-mix(in srgb, var(--surface) 94%, var(--surface-2) 6%);
}

.hea-feedback-check{
  display:flex;
  align-items:flex-start;
  gap:10px;
  font-size:.95rem;
  color:var(--ink);
  line-height:1.45;
}

.hea-feedback-check input{
  margin-top:2px;
  accent-color: var(--brand-color-primary);
}

.hea-feedback-status{
  border-radius:14px;
  padding:12px 14px;
  font-size:.94rem;
  font-weight:600;
}

.hea-feedback-status.is-hidden{
  display:none;
}

.hea-feedback-status.is-info{
  background: color-mix(in srgb, var(--surface) 78%, #dbeafe 22%);
  border:1px solid color-mix(in srgb, #60a5fa 34%, var(--line) 66%);
  color: color-mix(in srgb, var(--ink) 84%, #2563eb 16%);
}

.hea-feedback-status.is-success{
  background: color-mix(in srgb, var(--surface) 78%, #dcfce7 22%);
  border:1px solid color-mix(in srgb, #22c55e 34%, var(--line) 66%);
  color: color-mix(in srgb, var(--ink) 82%, #166534 18%);
}

.hea-feedback-status.is-error{
  background: color-mix(in srgb, var(--surface) 76%, #fee2e2 24%);
  border:1px solid color-mix(in srgb, #ef4444 34%, var(--line) 66%);
  color: color-mix(in srgb, var(--ink) 82%, #b91c1c 18%);
}

.hea-feedback-actions{
  display:flex;
  justify-content:flex-end;
  gap:10px;
}

.celebration-card {
  width: min(560px, 100%);
  border: 1px solid color-mix(in srgb, var(--line) 72%, #ffd6a5 28%);
  border-radius: 22px;
  background:
    radial-gradient(circle at top right, rgba(255, 210, 120, 0.2), transparent 32%),
    radial-gradient(circle at top left, rgba(47, 128, 255, 0.12), transparent 28%),
    linear-gradient(145deg, color-mix(in srgb, var(--surface) 96%, var(--bg) 4%) 6%, color-mix(in srgb, var(--surface) 82%, #fff6ea 18%) 94%);
  box-shadow: 0 28px 60px rgba(15, 23, 42, 0.3);
  padding: 26px 24px 20px;
  position: relative;
  overflow: hidden;
}

.celebration-card::before,
.celebration-card::after {
  content: "";
  position: absolute;
  width: 160px;
  height: 160px;
  border-radius: 999px;
  pointer-events: none;
  opacity: 0.26;
}

.celebration-card::before {
  top: -68px;
  right: -56px;
  background: radial-gradient(circle, rgba(255, 183, 77, 0.7), transparent 68%);
}

.celebration-card::after {
  bottom: -88px;
  left: -42px;
  background: radial-gradient(circle, rgba(47, 128, 255, 0.4), transparent 70%);
}

.celebration-kicker {
  margin: 0 0 8px;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: color-mix(in srgb, var(--ink) 62%, var(--link) 38%);
}

.celebration-hero {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 14px;
}

.celebration-emoji {
  width: 76px;
  height: 76px;
  flex: 0 0 76px;
  border-radius: 22px;
  display: grid;
  place-items: center;
  font-size: 2rem;
  background: linear-gradient(145deg, rgba(255, 191, 105, 0.28), color-mix(in srgb, var(--surface) 84%, #fff5e9 16%));
  border: 1px solid rgba(255, 183, 77, 0.35);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.6);
}

.celebration-title {
  margin: 0 0 6px;
  font-size: clamp(1.35rem, 3vw, 1.8rem);
  line-height: 1.08;
}

.celebration-subtitle {
  margin: 0;
  color: var(--muted);
  font-size: 0.96rem;
  line-height: 1.45;
}

.celebration-list {
  display: grid;
  gap: 10px;
  margin: 18px 0 0;
}

.celebration-item {
  border: 1px solid color-mix(in srgb, var(--line) 78%, #ffd6a5 22%);
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface) 84%, #fff7ef 16%);
  padding: 12px 13px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.celebration-item-emoji {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface-2) 84%, var(--surface) 16%);
  font-size: 1.25rem;
  border: 1px solid rgba(255, 214, 165, 0.6);
}

.celebration-item-title {
  margin: 0 0 2px;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--ink);
}

.celebration-item-meta {
  margin: 0;
  font-size: 0.82rem;
  color: var(--muted);
}

.celebration-actions {
  margin-top: 18px;
  display: flex;
  justify-content: flex-end;
}

.hea-journey-shell{
  max-width:var(--page-w);
  margin-inline:auto;
  padding-inline:var(--app-pad);
}

.hea-journey-panel{
  position:relative;
  padding: 16px 18px 18px;
  border-radius:22px;
  border:1px solid color-mix(in srgb, var(--line) 86%, var(--brand-color-primary) 14%);
  background:
    radial-gradient(circle at top left, color-mix(in srgb, var(--brand-color-primary) 11%, transparent 89%) 0%, transparent 42%),
    linear-gradient(145deg, var(--surface) 0%, color-mix(in srgb, var(--surface) 86%, var(--surface-2) 14%) 100%);
  box-shadow:
    0 18px 44px rgba(15, 23, 42, 0.06),
    0 3px 10px rgba(15, 23, 42, 0.04);
  overflow:hidden;
}

.hea-journey-panel::before{
  content:"";
  position:absolute;
  inset:0 auto auto 0;
  width:100%;
  height:4px;
  background:linear-gradient(90deg, var(--brand-color-primary) 0%, color-mix(in srgb, var(--brand-color-primary) 52%, var(--brand-color-secondary) 48%) 100%);
  opacity:.9;
}

.hea-menu-l3[data-phase="master"] .hea-journey-panel{
  border-color: color-mix(in srgb, var(--line) 82%, #0f766e 18%);
  background:
    radial-gradient(circle at top left, color-mix(in srgb, #0f766e 10%, transparent 90%) 0%, transparent 42%),
    linear-gradient(145deg, var(--surface) 0%, color-mix(in srgb, var(--surface) 82%, #effaf8 18%) 100%);
}

.hea-menu-l3[data-phase="master"] .hea-journey-panel::before{
  background:linear-gradient(90deg, #0f766e 0%, #14b8a6 100%);
}

.hea-journey-head{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0, 1fr) auto auto;
  gap:14px 18px;
  align-items:start;
}

.hea-journey-dismiss{
  width:28px;
  height:28px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--line);
  border-radius:999px;
  background:var(--surface);
  color:var(--muted);
  font-size:18px;
  line-height:1;
  cursor:pointer;
  z-index:1;
  transition:background .15s, color .15s;
  flex-shrink:0;
  margin-top:2px;
}
.hea-journey-dismiss:hover{
  background:var(--fail,#dc2626);
  color:#fff;
  border-color:transparent;
}

.hea-journey-copyblock{
  min-width:0;
}

.hea-journey-title{
  color:var(--ink);
  font-size:clamp(1.05rem, 0.96rem + 0.35vw, 1.32rem);
  font-weight:800;
  line-height:1.15;
}

.hea-journey-copy{
  color:var(--muted);
  line-height:1.5;
}

.hea-journey-copy{
  margin-top:4px;
  font-size:.94rem;
  max-width:44ch;
}

.hea-journey-side{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:8px;
}

.hea-journey-meta{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  flex-wrap:wrap;
  max-width:420px;
}

.hea-journey-chip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:30px;
  padding: 0 11px;
  border-radius:999px;
  border:1px solid color-mix(in srgb, var(--line) 90%, var(--brand-color-primary) 10%);
  background: color-mix(in srgb, var(--surface) 94%, var(--surface-2) 6%);
  color:var(--ink);
  font-size:.76rem;
  font-weight:700;
  text-decoration:none;
}

.hea-journey-launchpad{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:36px;
  padding: 0 13px;
  border-radius:10px;
  text-decoration:none;
  font-weight:700;
  color:#fff;
  background: linear-gradient(90deg, var(--brand-color-primary) 0%, color-mix(in srgb, var(--brand-color-primary) 56%, var(--brand-color-secondary) 44%) 100%);
  box-shadow: 0 10px 20px rgba(255, 95, 109, 0.16);
  font-size:.82rem;
}

.hea-journey-launchpad:hover{
  transform: translateY(-1px);
  filter: saturate(1.03);
}

.hea-menu-l3[data-phase="master"] .hea-journey-launchpad{
  background: linear-gradient(90deg, #0f766e 0%, #14b8a6 100%);
  box-shadow: 0 12px 24px rgba(15, 118, 110, 0.16);
}

.hea-journey-progress-row{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:10px;
  align-items:center;
  margin-top:12px;
}

.hea-journey-progress-copy{
  min-width:0;
}

.hea-journey-progress-label{
  color:var(--muted);
  font-size:.74rem;
  font-weight:700;
  letter-spacing:.05em;
  text-transform:uppercase;
}

.hea-journey-progress{
  position:relative;
  width:100%;
  height:10px;
  border-radius:999px;
  overflow:hidden;
  background: color-mix(in srgb, var(--surface-2) 78%, var(--surface) 22%);
}

.hea-journey-progress > span{
  display:block;
  height:100%;
  width:0;
  border-radius:inherit;
  background: linear-gradient(90deg, var(--brand-color-primary) 0%, color-mix(in srgb, var(--brand-color-primary) 62%, #0ea5e9 38%) 100%);
}

.hea-menu-l3[data-phase="master"] .hea-journey-progress > span{
  background: linear-gradient(90deg, #0f766e 0%, #14b8a6 100%);
}

.hea-journey-links{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  gap:8px;
  margin-top:12px;
}

.hea-journey-step{
  display:flex;
  flex-direction:column;
  gap:8px;
  min-height:96px;
  padding: 12px;
  border-radius:16px;
  border:1px solid color-mix(in srgb, var(--line) 90%, var(--brand-color-primary) 10%);
  background: color-mix(in srgb, var(--surface) 96%, var(--surface-2) 4%);
  color:var(--ink);
  text-decoration:none;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.04);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease, background-color .15s ease;
}

.hea-journey-step:hover{
  transform: translateY(-1px);
  box-shadow: 0 12px 24px rgba(15, 23, 42, 0.07);
}

.hea-journey-step.is-current{
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand-color-primary) 30%, transparent);
}

.hea-journey-step.is-next{
  border-color: color-mix(in srgb, var(--brand-color-primary) 54%, var(--line));
  background: color-mix(in srgb, var(--brand-color-primary) 10%, var(--surface));
}

.hea-journey-step.is-done{
  border-color: color-mix(in srgb, #16a34a 42%, var(--line));
  background: color-mix(in srgb, #16a34a 10%, var(--surface));
}

.hea-journey-step.is-upcoming{
  opacity:.72;
}

.hea-journey-step-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.hea-journey-step-top-right{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
}

.hea-journey-step-index{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:34px;
  height:28px;
  padding: 0 9px;
  border-radius:999px;
  background: color-mix(in srgb, var(--surface-2) 74%, var(--surface) 26%);
  color:var(--ink);
  font-size:.74rem;
  font-weight:800;
  flex:0 0 auto;
}

.hea-journey-step-state-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:24px;
  padding: 0 8px;
  border-radius:999px;
  border:1px solid color-mix(in srgb, var(--line) 92%, transparent 8%);
  background: color-mix(in srgb, var(--surface) 94%, var(--surface-2) 6%);
  color:var(--muted);
  font-size:.68rem;
  font-weight:800;
  letter-spacing:.03em;
  text-transform:uppercase;
}

.hea-journey-complete-btn{
  position:relative;
  width:28px;
  height:28px;
  flex:0 0 28px;
  border:1px solid color-mix(in srgb, var(--line) 84%, #16a34a 16%);
  border-radius:999px;
  background:var(--surface);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.05);
}

.hea-journey-complete-btn:hover{
  border-color: color-mix(in srgb, #16a34a 44%, var(--line));
  background: color-mix(in srgb, #16a34a 10%, var(--surface));
}

.hea-journey-complete-btn:disabled{
  opacity:.55;
  cursor:wait;
}

.hea-journey-complete-btn.is-static{
  cursor:default;
  border-color: color-mix(in srgb, #16a34a 42%, var(--line));
  background: color-mix(in srgb, #16a34a 10%, var(--surface));
}

.hea-journey-complete-glyph{
  width:10px;
  height:6px;
  border-inline-start:2px solid #15803d;
  border-block-end:2px solid #15803d;
  transform: rotate(-45deg) translateY(-1px);
}

.hea-journey-step.is-next .hea-journey-step-index{
  background: var(--brand-color-primary);
  color:#fff;
}

.hea-menu-l3[data-phase="master"] .hea-journey-step.is-ready{
  border-color: color-mix(in srgb, #0f766e 34%, var(--line));
}

.hea-menu-l3[data-phase="master"] .hea-journey-step.is-next{
  border-color: color-mix(in srgb, #0f766e 48%, var(--line));
  background: color-mix(in srgb, #0f766e 10%, var(--surface));
}

.hea-menu-l3[data-phase="master"] .hea-journey-step.is-ready .hea-journey-step-index{
  background:#0f766e;
}

.hea-menu-l3[data-phase="master"] .hea-journey-step.is-next .hea-journey-step-index{
  background:#0f766e;
}

.hea-journey-step.is-done .hea-journey-step-index{
  background:#16a34a;
  color:#fff;
}

.hea-journey-step-title{
  color:var(--ink);
  font-weight:700;
  line-height:1.25;
  font-size:.95rem;
}

.hea-journey-step-actions{
  margin-top:auto;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:8px;
}

.hea-journey-open-link{
  display:inline-flex;
  align-items:center;
  min-height:28px;
  color:var(--brand-color-primary);
  font-size:.8rem;
  font-weight:700;
  text-decoration:none;
}

.hea-journey-open-link.is-muted{
  color:var(--muted);
}

:root.dark .hea-journey-panel,
:root.dark .celebration-card{
  box-shadow:
    0 24px 60px rgba(0, 0, 0, 0.34),
    0 8px 18px rgba(0, 0, 0, 0.2);
}

:root.dark .hea-feedback-card{
  box-shadow:
    0 30px 68px rgba(0, 0, 0, 0.42),
    0 8px 18px rgba(0, 0, 0, 0.24);
}

:root.dark .hea-feedback-tablist,
:root.dark .hea-feedback-chip,
:root.dark .hea-feedback-contact,
:root.dark .hea-feedback-field textarea,
:root.dark .hea-feedback-field input,
:root.dark .hea-feedback-reaction,
:root.dark .hea-feedback-permissions{
  background: color-mix(in srgb, var(--surface) 80%, rgba(255,255,255,0.05) 20%);
}

:root.dark .hea-feedback-field textarea,
:root.dark .hea-feedback-field input{
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.22);
}

:root.dark .hea-journey-step{
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.22);
}

:root.dark .hea-journey-step:hover{
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.28);
}

@media (prefers-color-scheme: dark){
  :root:not(.light) .hea-journey-panel,
  :root:not(.light) .celebration-card{
    box-shadow:
      0 24px 60px rgba(0, 0, 0, 0.34),
      0 8px 18px rgba(0, 0, 0, 0.2);
  }

  :root:not(.light) .hea-journey-step{
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.22);
  }

  :root:not(.light) .hea-journey-step:hover{
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.28);
  }

  :root:not(.light) .hea-feedback-card{
    box-shadow:
      0 30px 68px rgba(0, 0, 0, 0.42),
      0 8px 18px rgba(0, 0, 0, 0.24);
  }

  :root:not(.light) .hea-feedback-tablist,
  :root:not(.light) .hea-feedback-chip,
  :root:not(.light) .hea-feedback-contact,
  :root:not(.light) .hea-feedback-field textarea,
  :root:not(.light) .hea-feedback-field input,
  :root:not(.light) .hea-feedback-reaction,
  :root:not(.light) .hea-feedback-permissions{
    background: color-mix(in srgb, var(--surface) 80%, rgba(255,255,255,0.05) 20%);
  }

  :root:not(.light) .hea-feedback-field textarea,
  :root:not(.light) .hea-feedback-field input{
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.22);
  }
}

@media (max-width: 980px){
  .hea-nav-util{
    margin-left: auto; /* keeps icons pushed right even when wrapped */
  }
}

/* ==========================================================
   IN-APP MOBILE COMPACT MODE
   Reduces header vertical footprint on iPhone
   ========================================================== */

body.hea-compact-nav .hea-header-inner{
  padding-block: 8px !important;
}
body.hea-compact-nav .hea-logo{
  height: 38px !important;
}
body.hea-compact-nav .hea-menu a{
  padding-block: 4px !important;
  padding-inline: 2px !important;
  font-size: .98rem;
}

/* ==========================================================
   APP MOBILE: reduce L2 height
   ========================================================== */
@media (max-width: 520px){
  /* shrink L2 paddings */
  .hea-menu-l2{
    padding-block: 6px;
  }

  .hea-menu-l2-shell{
    padding-inline:12px;
  }

  /* ✅ hide the user badge on very small screens to save space */
  .hea-menu-l2-right{
    display: none !important;
  }

  /* (optional) tighter L2 tabs */
  .hea-menu-l2-left{
    gap: 8px;
  }
  .hea-menu-l2-tab{
    padding: 0.35rem 0.6rem;
    border-radius: 999px;
    font-size: 0.92rem;
  }

  .hea-menu-l3{
    padding: 10px 0 14px;
  }

  .hea-journey-shell{
    padding-inline:12px;
  }

  .hea-journey-panel{
    padding:14px;
  }
}

@media (max-width: 860px){
  .hea-user-pill-prefix{
    display:none;
  }

  .hea-user-pill{
    max-width:min(44vw, 240px);
  }

  .hea-journey-head{
    grid-template-columns:1fr;
  }

  .hea-journey-side{
    align-items:flex-start;
  }

  .hea-journey-meta{
    justify-content:flex-start;
    max-width:none;
  }

  .hea-journey-progress-row{
    grid-template-columns:1fr;
    gap:8px;
  }

  .hea-journey-links{
    grid-template-columns:1fr;
  }
}

/* Make Admin smaller (so L1 is more likely to stay on one line)*/
@media (max-width: 520px){
  .hea-nav-util .util-link{
    padding: 5px 8px !important;
    font-size: 12px;
  }
  .hea-nav-util .icon-link{
    width: 32px;
    height: 32px;
    border-radius: 10px;
  }
}

/* In compact mode: prefer horizontal scroll for the main nav instead of wrapping */
@media (max-width: 520px){
  body.hea-compact-nav .hea-menu{
    width: 100%;
  }
  body.hea-compact-nav .hea-nav-main{
    justify-content:flex-start !important;
    flex-wrap:nowrap !important;
    overflow:auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    padding-bottom: 4px;
    gap: 14px !important;
  }
  body.hea-compact-nav .hea-nav-main > a{
    flex: 0 0 auto;
  }
}

/* ==========================================================
   PUBLIC NAV (new structure)
   - .hea-logo-link left
   - .hea-nav-main centered
   - .hea-nav-util right
   ========================================================== */

/* Ensure true centering even with util block on the right */
.hea-public-nav .hea-nav-main{
  justify-content: center;
}

.hea-public-nav .hea-nav-util{
  margin-left: auto;
}

/* Safety: public header must never expand viewport width. */
.hea-public-nav .hea-menu,
.hea-public-nav .hea-nav-main,
.hea-public-nav .hea-nav-util,
.hea-public-nav .hea-nav-util .util-link,
.hea-public-nav .hea-lang-switch{
  min-width: 0;
  max-width: 100%;
}

/* Public mobile: nav-main becomes horizontal scroll */
@media (max-width: 520px){
  .hea-public-nav .hea-nav-main{
    justify-content: flex-start;
    flex-wrap: nowrap;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    gap: 14px;
    padding-bottom: 4px;
  }
  .hea-public-nav .hea-nav-main > a{
    flex: 0 0 auto;
  }

  /* Optional: active tab pill on tiny screens */
  .hea-public-nav .hea-nav-main a.active{
    background: color-mix(in oklab, var(--brand-color-primary) 10%, transparent);
    border-radius: 999px;
    padding-inline: 10px;
    border-bottom-color: transparent;
  }

  /* Optional subtle fades */
  .hea-public-nav .hea-header-inner{
    position: relative;
  }
  .hea-public-nav .hea-header-inner::before,
  .hea-public-nav .hea-header-inner::after{
    content:"";
    position:absolute;
    top: 0;
    bottom: 0;
    width: 22px;
    pointer-events:none;
    z-index: 2;
  }
  .hea-public-nav .hea-header-inner::before{
    left: 0;
    background: linear-gradient(90deg, var(--surface), transparent);
    opacity: .9;
  }
  .hea-public-nav .hea-header-inner::after{
    right: 0;
    background: linear-gradient(270deg, var(--surface), transparent);
    opacity: .9;
  }
}

/* ==========================================================
   PUBLIC NAV DROPDOWN GROUPS + BETTER TWO-LINE MOBILE LAYOUT
   ========================================================== */

.hea-nav-group{
  position: relative;
}

.hea-nav-group > summary{
  list-style: none;
  cursor: pointer;
  color: var(--ink);
  font-weight: 500;
  padding: 6px 2px;
  border-bottom: 2px solid transparent;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
  transition: color .2s ease, border-color .2s ease;
}

.hea-nav-group > summary::-webkit-details-marker{
  display: none;
}

.hea-nav-group > summary:hover{
  color: var(--brand-color-primary);
}

.hea-nav-group.is-active > summary,
.hea-nav-group[open] > summary{
  color: var(--brand-color-primary);
  border-bottom-color: var(--brand-color-primary);
  font-weight: 700;
}

.hea-nav-group > summary i{
  font-style: normal;
  font-size: .7em;
  opacity: .8;
  transform: translateY(1px);
}

.hea-nav-group-menu{
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 220px;
  padding: 8px;
  display: grid;
  gap: 3px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: color-mix(in oklab, var(--surface) 92%, #000 8%);
  box-shadow: 0 16px 30px rgba(0,0,0,.24);
  z-index: 50;
}

.hea-nav-group:not([open]) .hea-nav-group-menu{
  display: none;
}

.hea-nav-group-menu a{
  border-bottom: 0 !important;
  border-radius: 8px;
  padding: 8px 10px;
  display: block;
}

.hea-nav-group-menu a:hover{
  background: color-mix(in oklab, var(--brand-color-primary) 14%, transparent);
}

.hea-nav-group-sep{
  display: block;
  padding: 6px 10px 4px;
  margin-top: 4px;
  border-top: 1px solid var(--line);
  font-size: .68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted);
  pointer-events: none;
}

@media (max-width: 900px){
  .hea-public-nav .hea-header-inner{
    align-items: center;
  }

  .hea-public-nav .hea-menu{
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    width: 100%;
  }

  .hea-public-nav .hea-nav-util{
    order: 1;
    width: 100%;
    justify-content: flex-end;
    gap: 8px;
  }

  .hea-public-nav .hea-nav-main{
    order: 2;
    width: 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
    overflow: visible;
    gap: 8px 12px;
    padding-bottom: 0;
    align-items: center;
  }

  .hea-public-nav .hea-nav-main > a,
  .hea-public-nav .hea-nav-main > .hea-nav-group{
    flex: 0 0 auto;
  }

  /* --- mobile dropdown: full-width panel relative to nav row --- */
  .hea-public-nav .hea-nav-main{
    position: relative;
  }

  .hea-public-nav .hea-nav-group{
    position: static;
  }

  .hea-nav-group-menu{
    left: 0;
    right: 0;
    min-width: 0;
    width: auto;
    padding: 6px;
  }

  .hea-nav-group-menu a{
    font-size: 0.88rem;
    padding: 10px 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

@media (max-width: 640px){
  .hea-feedback-trigger{
    min-width:36px;
    width:36px;
    justify-content:center;
    padding:0 !important;
  }

  .hea-feedback-trigger-label{
    display:none;
  }

  .hea-feedback-overlay{
    padding:14px;
  }

  .hea-feedback-card{
    width:100%;
    max-height: calc(100vh - 28px);
    padding:18px 16px 16px;
    border-radius:20px;
  }

  .hea-feedback-head{
    flex-direction:column;
    align-items:stretch;
  }

  .hea-feedback-tablist{
    width:100%;
    justify-content:space-between;
  }

  .hea-feedback-tab{
    flex:1 1 0;
    text-align:center;
    padding:10px 12px;
  }

  .hea-feedback-context{
    gap:7px;
  }

  .hea-feedback-chip{
    width:100%;
    justify-content:space-between;
  }

  .hea-feedback-reaction{
    flex:1 1 100%;
    text-align:center;
  }

  .hea-feedback-contact-grid{
    grid-template-columns: 1fr;
  }

  .hea-feedback-field textarea{
    min-height:92px;
  }

  .hea-feedback-actions{
    flex-direction:column-reverse;
    align-items:stretch;
  }

  .hea-feedback-actions .btn{
    width:100%;
  }

  .hea-public-nav .hea-header-inner{
    overflow-x: clip;
  }

  .hea-public-nav .hea-menu{
    overflow-x: clip;
  }

  .hea-public-nav .hea-logo{
    height: 34px;
  }

  .hea-public-nav .hea-nav-util{
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 6px;
  }

  .hea-public-nav .hea-nav-main{
    gap: 7px 10px;
  }

  .hea-public-nav .hea-menu a,
  .hea-public-nav .hea-nav-group > summary{
    font-size: .98rem;
  }

  .hea-nav-util .util-link{
    padding: 5px 9px !important;
    font-size: .95rem;
    white-space: nowrap;
  }

  .hea-lang-picker{
    padding: 1px 6px;
  }

  .hea-lang-picker select{
    max-width: 58px;
    font-size: 10px;
  }
}

body.is-feedback-open{
  overflow:hidden;
}

/* ==========================================================
   FINAL OVERRIDES — PUBLIC NAV DENSITY / BALANCE
   Keep main links on one line on desktop by stacking util items.
   ========================================================== */

@media (min-width: 901px){
  .hea-public-nav .hea-menu{
    align-items: flex-start;
    gap: 10px;
  }

  /* Language + Login/Join stacked vertically on desktop */
  .hea-public-nav .hea-nav-util{
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-start;
    gap: 6px;
    margin-left: auto;
    padding-top: 2px;
    min-width: 138px;
  }

  .hea-public-nav .hea-lang-switch,
  .hea-public-nav .hea-nav-util .util-link{
    line-height: 1;
  }

  .hea-public-nav .hea-nav-util .util-link{
    padding: 5px 10px !important;
    font-size: .96rem;
  }

  /* Keep main nav on one visual line */
  .hea-public-nav .hea-nav-main{
    flex-wrap: nowrap !important;
    /* Keep one line but allow dropdown panels to render outside the row. */
    overflow: visible;
    align-items: center;
    gap: clamp(10px, 1.25vw, 18px);
    padding-bottom: 0;
  }

  .hea-public-nav .hea-nav-main > a,
  .hea-public-nav .hea-nav-main > .hea-nav-group{
    flex: 0 1 auto;
  }
}

@media (min-width: 901px) and (max-width: 1320px){
  .hea-public-nav .hea-menu a,
  .hea-public-nav .hea-nav-group > summary{
    font-size: 1.02rem;
  }

  .hea-public-nav .hea-nav-main{
    gap: clamp(8px, 1.05vw, 14px);
  }
}