/* ══════════════════════════════════════════════════════════════════════
   Shared pill header — mirrors fieldvio.com's floating navy pill.

   Two variants:
     .fvpill-header                 → solid navy-dark, for app shell + most
                                       public pages (default)
     .fvpill-header.fvpill--glass   → translucent 55% bg, for pages that
                                       sit over a photographic hero (public
                                       event / artist portal)

   Works on mobile (≤640px) by default. Desktop uses `.fvpill-show-all` to
   force display (public pages want the pill on every viewport; the
   logged-in app shell keeps its left sidebar on desktop so it hides the
   pill via the base layout).
   ══════════════════════════════════════════════════════════════════════ */
.fvpill-header {
  display: none;
  /* Mobile shell: bone-glass surface (linq Brand Kit). Translucent
     bone (rgba(242,237,226,0.78)) at 18px backdrop-blur — matches
     `.lq-header` from linq-marketing.css. Hairline ink border on the
     bottom edge replaces the old dark halo so the bar reads as a
     proper editorial slab on the new bone paper background.

     Stretched via `left:0; right:0;` (no explicit width) so the bar
     spans the actual viewport edges even when the html element is
     narrower than 100vw because of a vertical scrollbar gutter — the
     `width: 100%` form was inheriting that shrink and showed up as
     visible right-side padding on Samsung Internet. */
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  z-index: 100;
  background: rgba(242, 237, 226, 0.78);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 0;
  border-bottom: 1px solid var(--border);
  border-radius: 0 0 22px 22px;
  box-shadow: none;
  transition: background 250ms ease;
}
/* Public pages (.fvpill-show-all) keep the centered floating pill on
   desktop where there's room for the air around it to look intentional. */
@media (min-width: 1024px) {
  .fvpill-header.fvpill-show-all {
    left: 50%;
    top: 12px;
    width: calc(100% - 24px);
    max-width: 1100px;
    transform: translateX(-50%);
    border-radius: 100px;
    /* Bone surface + thin ink hairline on desktop floating pill
       replaces the heavy dark spread shadow. Tiny ink-tinted shadow
       so the pill still floats off the paper without reading as a
       brand-defying dark slab. */
    border: 1px solid var(--border);
    box-shadow: 0 4px 12px rgba(15,22,35, 0.06);
  }
}
.fvpill-header.fvpill--glass {
  /* Over-photo variant — keeps a translucent INK surface because
     photographic heroes behind it usually need a dark scrim for
     contrast. White text + light icons stay only in this variant
     (see the .fvpill--glass overrides below if added). */
  background: rgba(15,22,35, 0.55);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border: 0;
  border-bottom: 0;
}
.fvpill-header.is-scrolled {
  /* Same bone-glass, slightly more opaque (0.92) once scrolled so the
     bar reads more solid against busy content underneath. */
  background: rgba(242, 237, 226, 0.92);
}
@media (min-width: 1024px) {
  .fvpill-header.fvpill-show-all.is-scrolled {
    box-shadow: 0 6px 16px rgba(15,22,35, 0.08);
  }
}
.fvpill-header.fvpill--glass.is-scrolled {
  background: rgba(15,22,35, 0.72);
}

/* ── .fvpill--glass over-photo overrides ─────────────────────────────
   The default pill is now bone glass with ink text. The glass variant
   sits over photographic heroes (public event / artist portal pages),
   so we keep the legacy white-on-translucent-ink treatment for that
   one variant only — otherwise links / buttons / wordmark / hamburger
   would render dark-on-dark and become invisible. Signal-orange CTA
   stays signal so calls-to-action still pop on photos. */
.fvpill-header.fvpill--glass .fvpill-logo-text { color: #fff; }
.fvpill-header.fvpill--glass .fvpill-logo-text .field-part { color: #fff; }
.fvpill-header.fvpill--glass .fvpill-logo-text .vio-part {
  color: var(--brand-light, #EA6A2C);
}
.fvpill-header.fvpill--glass .fvpill-link {
  color: rgba(255, 255, 255, 0.78);
}
.fvpill-header.fvpill--glass .fvpill-link:hover { color: #fff; }
.fvpill-header.fvpill--glass .fvpill-btn {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.10);
  color: rgba(255, 255, 255, 0.88);
}
.fvpill-header.fvpill--glass .fvpill-btn:hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.22);
  color: #fff;
}
.fvpill-header.fvpill--glass .fvpill-burger span { background: #fff; }
.fvpill-header.fvpill--glass .fvpill-cta {
  background: var(--signal, #EA6A2C);
  color: var(--text, #0F1623);
}
.fvpill-header.fvpill--glass .fvpill-badge {
  border-color: rgba(0, 0, 0, 0.55);
}

.fvpill-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 auto;
  height: 56px;
  padding: 0 18px;
  gap: 0.75rem;
}
.fvpill-logo {
  display: flex;
  align-items: center;
  text-decoration: none;
  min-width: 0;
  color: inherit;
}
.fvpill-logo-img {
  /* Bigger logo + a generous ~3px downward nudge so the wordmark's
     visual centre lines up with the pill's vertical midline (most
     uploaded brand wordmarks ship with extra whitespace baked into
     the bottom of the image, which leaves a visible gap below the
     logo when the img is centred by flexbox alone — pushing the box
     down compensates so the visible-content gaps balance). */
  height: 36px;
  max-width: 220px;
  width: auto;
  object-fit: contain;
  display: block;
  position: relative;
  top: 3px;
}
.fvpill-logo-text {
  font-family: 'Public Sans', 'Public Sans', sans-serif;
  font-weight: 900;
  font-size: 1.1rem;
  letter-spacing: -0.02em;
  color: var(--text);
  white-space: nowrap;
}
.fvpill-logo-text .field-part { color: var(--text); }
.fvpill-logo-text .vio-part { color: var(--brand-light, #EA6A2C); }

.fvpill-actions {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-shrink: 0;
}

/* Round-chip social / utility buttons (portal social icons, bell, etc.) */
.fvpill-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 1rem;
  cursor: pointer;
  text-decoration: none;
  line-height: 1;
  padding: 0;
  transition: color 0.15s, background 0.15s, border-color 0.15s;
  position: relative;
}
.fvpill-btn:hover {
  color: var(--on-text);
  background: var(--text);
  border-color: transparent;
}

/* Badge bubble for counts (notifications, cart) */
.fvpill-badge {
  display: none;
  position: absolute;
  top: -2px;
  right: -2px;
  min-width: 16px;
  height: 16px;
  border-radius: 8px;
  background: #ef4444;
  color: #fff;
  font-size: 0.6rem;
  font-weight: 700;
  text-align: center;
  line-height: 16px;
  padding: 0 3px;
  /* Ring matches the bone paper so the badge cleanly punches out of
     the lighter pill surface (was a near-black ring sized to the old
     navy pill). */
  border: 2px solid var(--bg);
}

/* Editorial CTA (Register / Contact / etc.) — flat ink chip on bone.
   Picked the flat `var(--text)` (ink) variant over the Ocean→Signal
   gradient because the gradient on the orange end fights the bone
   surface and makes the bar feel busy. The flat ink chip reads as a
   clean editorial CTA against the bone-glass pill, matches the
   `.lq-header` reference, and keeps contrast safe across both the
   bone and over-photo (.fvpill--glass) variants without per-variant
   overrides. The `--brand-gradient` token is intentionally NOT used
   here so per-company brand gradients don't reintroduce the old
   navy/teal feel. */
.fvpill-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: var(--text);
  color: var(--on-text);
  border-radius: 999px;
  padding: 0.45rem 1rem;
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  border: 0;
  cursor: pointer;
  white-space: nowrap;
  transition: transform 0.15s ease, opacity 0.15s ease;
}
.fvpill-cta:hover { opacity: 0.92; transform: translateY(-1px); }

/* Text link action (sign-in, simple menu items) */
.fvpill-link {
  color: var(--text-muted);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
  padding: 0.35rem 0.6rem;
  transition: color 0.15s;
}
.fvpill-link:hover { color: var(--text); }

/* Hamburger (3 bars → X when .fvpill-burger.open) */
.fvpill-burger {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 36px;
  height: 36px;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.fvpill-burger span {
  display: block;
  width: 20px;
  height: 2px;
  border-radius: 2px;
  background: var(--text);
  transition: transform 300ms ease, opacity 300ms ease;
}
.fvpill-burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.fvpill-burger.open span:nth-child(2) { opacity: 0; }
.fvpill-burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── Visibility ──
   .fvpill-show-all: force the pill on every viewport (public pages).
   Default: mobile only (≤640px) — app shell uses this to keep its sidebar
   on desktop. */
@media (max-width: 1023px) {
  .fvpill-header { display: block; }
}
.fvpill-header.fvpill-show-all { display: block; }

/* Reserve breathing room below the pill so page content doesn't slide
   under it. Opt-in via .fvpill-push so pages with their own hero-first
   layout aren't forced into an extra gap. */
.fvpill-push { padding-top: 76px; }
@media (min-width: 641px) {
  .fvpill-push-desktop { padding-top: 76px; }
}

/* ══════════════════════════════════════════════════════════════════════
   Brand wordmark — `Linq`
   --------------------------------------------------------------------
   Single source of truth for the Linq wordmark across every surface
   that loads pill-header.css (which is everything extending base.html).
   Tight bold Manrope, with a teal accent on the `q`. Capitalization is
   preserved as written (capital `L`, lowercase `inq`).

   Templates render: <span class="brand-linq">Lin<span class="q">q</span></span>

   When the SVG / @font-face wordmark logo lands, swap the body of this
   rule for an inline SVG mask or font-face declaration once — every
   "Linq" instance updates at the same time, no template churn.
   ══════════════════════════════════════════════════════════════════════ */
/* linq Brand Kit wordmark (v3 chain): lowercase Space Grotesk,
   weight 600, with an offset orange CIRCLE on the q's bottom-right
   corner — the same "signal" as the chain mark's circle accent and
   the SVG wordmark's orange period. The pre-rebrand markup
   `<span class="brand-linq">Lin<span class="q">q</span><span
   class="brand-linq-dot">.</span></span>` is preserved for back-compat
   — `text-transform: lowercase` flips the casing and the dot is
   restyled from a period glyph to a positioned circle via
   `font-size: 0` + box-styled ::before. */
.brand-linq {
  font-family: 'Public Sans', 'Public Sans', system-ui, sans-serif;
  font-weight: 600;
  letter-spacing: -0.04em;
  text-transform: lowercase;
}
.brand-linq .q { color: inherit; } /* the q is no longer accent-coloured
                                      — the offset circle does the work */
/* Brand mark stamp — replaces the legacy period glyph with a small
   orange circle hanging just past the wordmark's bottom-right corner.
   The original `.` text node is hidden via font-size:0 so screen
   readers still hear "Linq." with the inline period. */
.brand-linq-dot {
  position: relative;
  display: inline-block;
  width: 0; height: 0;
  margin-left: 4px;
  font-size: 0;
  color: transparent;
}
.brand-linq-dot::before {
  content: '';
  position: absolute;
  left: 0; bottom: 0.05em;
  width: 0.2em; height: 0.2em;
  border-radius: 50%;
  background: #EA6A2C; /* Signal */
}