/* ==========================================================================
   "Symposium 2027" — first item of the main menu (left of "Thema's"), loaded site-wide from chunks/common/head.tpl.
   Markup: chunks/symposium/2027/navItem.tpl (included from chunks/common/header/topNavbar2.tpl). Prefix gm-sym-nav.
   Selectors are anchored on the theme's own `.nav-main > li > a` selector so they win without !important;
   the theme's hover underline (a::before) is reset because ::before is used for the bubble here.
   Idea: a compact pill with a pulsing gold dot ("live"); on hover/focus a gold speech bubble pours out of the
   dot (same "van mond tot mond" bubble as the symposium page header) while the letters run a short wave.
   ========================================================================== */

.header .navbar .navbar-inner .nav-main > li > a.gm-sym-nav {
  --gm-sym-gold: #FDDA24;
  --gm-sym-ink: #101820;
  --gm-sym-origin: .98em;                /* dot centre = bubble origin */
  position: relative; z-index: 0; isolation: isolate;
  display: inline-flex; align-items: center; gap: .6em;           /* dot ↔ text ≈ dot ↔ pill edge */
  padding: 0 .95em 0 .7em;
  font-size: 1.25rem;                    /* explicit rem: the theme sizes the <a>, not the <li>, so em would be off */
  letter-spacing: .04em;
  color: var(--gm-sym-ink);
  white-space: nowrap;
}

/* gold bubble (revealed from the dot) — overrides the theme underline that also lives on ::before */
.header .navbar .navbar-inner .nav-main > li > a.gm-sym-nav::before {
  content: ""; display: block; position: absolute; z-index: -1;
  left: 0; right: 0; top: 50%; bottom: auto; height: 1.9em; margin-top: -.95em;
  opacity: 1; transform: none;
  border-radius: 999px; background: var(--gm-sym-gold);
  box-shadow: inset 0 0 0 1.5px var(--gm-sym-gold);
  clip-path: circle(0 at var(--gm-sym-origin) 50%);
  transition: clip-path .55s cubic-bezier(.22, .61, .36, 1);
}
/* idle outline of the pill so it reads as a badge on white */
.header .navbar .navbar-inner .nav-main > li > a.gm-sym-nav .gm-sym-nav__ring {
  position: absolute; z-index: -2; left: 0; right: 0; top: 50%; height: 1.9em; margin-top: -.95em;
  border-radius: 999px; border: 2px solid var(--gm-sym-gold);
  pointer-events: none;
}
/* speech-bubble tail */
.header .navbar .navbar-inner .nav-main > li > a.gm-sym-nav::after {
  content: ""; display: block; position: absolute; z-index: -1;
  left: calc(var(--gm-sym-origin) + .15em); top: calc(50% + .9em); width: 0; height: 0;
  border-left: .32em solid transparent; border-right: .32em solid transparent; border-top: .5em solid var(--gm-sym-gold);
  transform: scale(0); transform-origin: 50% 0;
  transition: transform .3s cubic-bezier(.34, 1.56, .64, 1) 0s;
}

/* pulsing dot */
.gm-sym-nav__dot {
  position: relative; flex: none;
  width: .55em; height: .55em; border-radius: 50%;
  background: var(--gm-sym-gold);
  box-shadow: 0 0 0 1px rgba(16, 24, 32, .3);     /* visible on white (gold alone is 1.4:1) */
  transition: background-color .3s, transform .3s cubic-bezier(.34, 1.56, .64, 1);
}
.gm-sym-nav__dot::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: var(--gm-sym-gold);
  animation: gm-sym-pulse 2.4s cubic-bezier(.22, .61, .36, 1) infinite;
}

.gm-sym-nav__text { display: inline-flex; white-space: nowrap; }
.gm-sym-nav__text > span { display: inline-block; }

.gm-sym-nav__sr {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* hover / keyboard focus / current page */
.header .navbar .navbar-inner .nav-main > li > a.gm-sym-nav:hover,
.header .navbar .navbar-inner .nav-main > li > a.gm-sym-nav:focus-visible,
.header .navbar .navbar-inner .nav-main > li > a.gm-sym-nav[aria-current="page"] { color: var(--gm-sym-ink); }

.header .navbar .navbar-inner .nav-main > li > a.gm-sym-nav:hover::before,
.header .navbar .navbar-inner .nav-main > li > a.gm-sym-nav:focus-visible::before,
.header .navbar .navbar-inner .nav-main > li > a.gm-sym-nav[aria-current="page"]::before { clip-path: circle(160% at var(--gm-sym-origin) 50%); opacity: 1; transform: none; }

.header .navbar .navbar-inner .nav-main > li > a.gm-sym-nav:hover::after,
.header .navbar .navbar-inner .nav-main > li > a.gm-sym-nav:focus-visible::after,
.header .navbar .navbar-inner .nav-main > li > a.gm-sym-nav[aria-current="page"]::after { transform: scale(1); transition-delay: .22s; }

.gm-sym-nav:hover .gm-sym-nav__dot,
.gm-sym-nav:focus-visible .gm-sym-nav__dot,
.gm-sym-nav[aria-current="page"] .gm-sym-nav__dot { background: var(--gm-sym-ink); box-shadow: none; transform: scale(1.15); }
.gm-sym-nav:hover .gm-sym-nav__dot::after,
.gm-sym-nav:focus-visible .gm-sym-nav__dot::after,
.gm-sym-nav[aria-current="page"] .gm-sym-nav__dot::after { animation: none; opacity: 0; }

.gm-sym-nav:hover .gm-sym-nav__text > span,
.gm-sym-nav:focus-visible .gm-sym-nav__text > span {
  animation: gm-sym-wave .55s cubic-bezier(.34, 1.56, .64, 1) both;
  animation-delay: calc(var(--i, 0) * 28ms + 120ms);
}

.header .navbar .navbar-inner .nav-main > li > a.gm-sym-nav:focus-visible { outline: 2px solid var(--gm-sym-ink); outline-offset: 4px; border-radius: 999px; }

/* Badge size per range. The main row is tight below 1400px (measured: only an 11px badge would fit next to the
   theme's 22.5/26.25px items), so in 992–1399px the other main-menu items are set ~8–9% smaller (and, 992–1199px, their gaps tighter) to make
   room for a legible 14.5px badge. ≥1400px the theme is untouched. Accessible name is always "Symposium 2027". */
@media (min-width: 1400px) {
  .header .navbar .navbar-inner .nav-main > li > a.gm-sym-nav { font-size: 1.125rem; }               /* 18px */
}
@media (min-width: 1200px) and (max-width: 1399.98px) {
  .header .navbar .navbar-inner .nav-main > li > a:not(.gm-sym-nav) { font-size: 1.5rem; }             /* 26.25 → 24px */
  .header .navbar .navbar-inner .nav-main > li > a.gm-sym-nav { font-size: .90625rem; padding: 0 .9em 0 .7em; --gm-sym-origin: .98em; } /* 14.5px */
}
@media (min-width: 992px) and (max-width: 1199.98px) {
  .header .navbar .navbar-inner .nav-main > li > a:not(.gm-sym-nav) { font-size: 1.28125rem; }         /* 22.5 → 20.5px */
  .header .navbar .navbar-inner .nav-main > li > a.gm-sym-nav { font-size: .90625rem; padding: 0 .85em 0 .65em; gap: .5em; --gm-sym-origin: .93em; } /* 14.5px */
  .gm-sym-nav__text > span:nth-child(n+10) { display: none; }                                            /* visible "Symposium" */
  .header .navbar .navbar-inner .nav-main > li { margin-left: 9px; margin-right: 9px; }                  /* theme: 15px */
  .header .navbar .navbar-inner .nav-main > li:first-child { margin-left: 0; }
  .header .navbar .navbar-inner .nav-main > li:last-child { margin-right: 0; }
  .header .navbar .navbar-inner .btn-search { margin-left: 16px; }                                       /* theme: 30px */
}

@keyframes gm-sym-pulse {
  0% { transform: scale(1); opacity: .7; }
  70%, 100% { transform: scale(2.2); opacity: 0; }
}
@keyframes gm-sym-wave {
  0%, 100% { transform: none; }
  45% { transform: translateY(-.28em) rotate(-4deg); }
}

@media (prefers-reduced-motion: reduce) {
  .header .navbar .navbar-inner .nav-main > li > a.gm-sym-nav::before,
  .header .navbar .navbar-inner .nav-main > li > a.gm-sym-nav::after,
  .gm-sym-nav__dot { transition: none; }
  .gm-sym-nav__dot::after { animation: none; opacity: 0; }
  .gm-sym-nav:hover .gm-sym-nav__text > span,
  .gm-sym-nav:focus-visible .gm-sym-nav__text > span { animation: none; }
}