/**
 * Section pill navigation for the Conferință page.
 *
 * Split out of conferinta.css: the host truncates FTP uploads over roughly
 * 15 KB to zero bytes, so each stylesheet is kept well under that. Enqueued
 * alongside the others by guru_conferinta_styles() in functions.php.
 *
 * GuruMedia - https://gurumedia.ro
 */

/* ==========================================================================
   Section pill navigation

   Fixed to the bottom of the viewport, revealed once the hero scrolls out.
   Frosted rather than solid so it stays legible over all three grounds this
   page uses - white, ivory and navy - while the hairline border and shadow
   keep the rounded edge readable on every one of them.

   Markup and the reveal/scrollspy script live in the HTML widget at the foot
   of the page.
   ========================================================================== */

.gm-pillnav {
  position: fixed;
  left: 50%;
  bottom: 26px;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  backdrop-filter: blur(16px) saturate(150%);
  border: 1px solid rgba(34, 58, 123, 0.14);
  box-shadow: 0 10px 34px rgba(23, 32, 60, 0.16);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 26px);
  transition: opacity .35s ease, transform .35s ease, visibility .35s;
}

.gm-pillnav.is-on {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}

.gm-pillnav a {
  font-family: Inter, sans-serif;
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1;
  color: #223A7B;
  text-decoration: none;
  padding: 12px 22px;
  border-radius: 999px;
  white-space: nowrap;
  transition: background-color .2s ease, color .2s ease;
}

.gm-pillnav a:hover { background: rgba(34, 58, 123, 0.08); }

.gm-pillnav a:focus-visible {
  outline: 2px solid #62A545;
  outline-offset: 2px;
}

.gm-pillnav a.is-current {
  background: #223A7B;
  color: #ffffff;
}

/* The sticky header is 101px tall - keep anchor targets clear of it. */
#invitati,
#program,
#particip {
  scroll-margin-top: 120px;
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

@media (max-width: 767px) {
  /*
   * Sits higher than on desktop. env() adds the home-indicator inset on
   * iPhones, where the browser chrome would otherwise crowd the bar; it
   * resolves to 0 everywhere else, so the fallback is a plain 28px.
   */
  .gm-pillnav {
    left: 16px;
    right: 16px;
    bottom: calc(28px + env(safe-area-inset-bottom, 0px));
    justify-content: space-between;
    transform: translateY(26px);
  }

  .gm-pillnav.is-on { transform: translateY(0); }

  .gm-pillnav a {
    flex: 1;
    text-align: center;
    padding: 12px 8px;
    font-size: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .gm-pillnav,
  .gm-pillnav a { transition: none; }
}