/* ==========================================================================
   TuneDance frontend — site header.

   Same shape as the funnel's: mark left, links centred, gold CTA right, on a
   dark bar. Two things make it TuneDance's rather than a copy.

   The bar is a deep green-black rather than a neutral one, and it carries a
   thin emerald edge along its bottom. Against eighteen light sections that
   edge is the only place the brand colour touches the top of the page, and it
   is what stops the header reading as a generic dark strip borrowed from
   somewhere else.

   The CTA is the same gold as every other button on the page, at nav scale.
   One warm element up here, one warm element in the hero, and they match.
   ========================================================================== */

.masthead {
  position: relative;
  z-index: 5;
  background: linear-gradient(180deg, #07130f 0%, #0a1a15 100%);
  border-bottom: 1px solid rgba(0, 201, 126, 0.28);
}

.masthead__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 24px;
  max-width: 1280px;
  margin: 0 auto;
  padding: 14px clamp(20px, 3vw, 40px);
}

/* --- Mark ---------------------------------------------------------------- */

.masthead__brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  text-decoration: none;
}

.masthead__logo {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
}

.masthead__name {
  font-size: clamp(17px, 1.8vw, 21px);
  font-weight: 800;
  letter-spacing: -0.028em;
  color: #ffffff;
}

/* --- Links --------------------------------------------------------------- */

.masthead__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px clamp(20px, 2.6vw, 34px);
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

.masthead__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 4px 0;
  font-size: clamp(14px, 1.4vw, 16px);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: rgba(255, 255, 255, 0.74);
  text-decoration: none;
  transition: color 0.18s ease;
}

/* Kept, unlike the decorative hovers stripped elsewhere: these are navigation
   controls and removing every affordance from a link is not restraint. */
.masthead__link:hover { color: #ffffff; }

.masthead__link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 2px;
  border-radius: 2px;
  background: var(--pop-green);
  opacity: 0;
  transition: opacity 0.18s ease;
}

.masthead__link:hover::after { opacity: 1; }

/* --- CTA ----------------------------------------------------------------- */

.masthead__cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  padding: 10px 16px;
  border-radius: 10px;
  background: linear-gradient(90deg, #ffd54d, #f5b820);
  box-shadow: 0 4px 0 #d99a16;
  color: #141414;
  font-size: clamp(14px, 1.4vw, 16px);
  font-weight: 800;
  letter-spacing: -0.01em;
  text-decoration: none;
  white-space: nowrap;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.masthead__cta:hover { transform: translateY(-1px); box-shadow: 0 5px 0 #d99a16; }
.masthead__cta:active { transform: translateY(3px); box-shadow: 0 1px 0 #d99a16; }

.masthead__cta-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  border-radius: 7px;
  background: #141414;
  color: #fff;
}

.masthead__cta-arrow svg { width: 14px; height: 14px; }

@media (max-width: 720px) {
  .masthead__inner { justify-content: space-between; padding: 12px 18px; }
  /* The links drop to their own row rather than being hidden behind a menu:
     three items do not earn a hamburger. */
  .masthead__links { order: 3; width: 100%; justify-content: center; margin: 2px 0 0; }
}