/* ============================================================
   POW Studio - system.css
   Global design system. Single source for shared components.

   v1 - Buttons (new 8px shape).
   Linked after each page's inline <style> so it wins on EQUAL specificity
   by source order. Note: higher-specificity inline rules (e.g.
   .nav.scrolled .nav-cta, state/!important overrides) still win - those
   set colour/state, not radius, so the shape is consistent regardless.
   Additive: it overrides, removes nothing, so reverting is just deleting
   the <link>. Inline button backgrounds (white nav variant, btn-primary,
   nav state flips) are untouched - this only changes shape + dark-CTA glass.

   Once reviewed and live, the now-redundant inline button radius/
   padding can be removed page-by-page so this file is the sole owner.
   ============================================================ */

/* Dark call-to-action buttons: rounder, taller, translucent + blur */
.hero-cta-btn,
.mid-cta-btn {
  border-radius: 8px;
  padding: 13px 22px;
  background: rgba(0, 0, 0, 0.9);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* Footer primary CTA: new shape + taller (roomy context) */
.btn-primary {
  border-radius: 8px;
  padding: 12px 20px;
}

/* Nav container pill: match the CTA corner (was 4px). Scrolled / over-dark
   variants don't set radius, so this base override carries everywhere. */
.nav-inner {
  border-radius: 8px;
}

/* Nav dark-mode flip (over dark sections / footer). Most pages only had this
   inside a mobile media query and only for the logo, so the desktop nav never
   flipped its pill. Defining it here means it lands on every page and, being
   linked after the inline .nav.scrolled rules, wins the equal-specificity tie
   so it holds even when the nav is scrolled + over-dark at once.
   Case studies (body[data-theme="dark"]) keep their own higher-specificity
   rules, so they're unaffected. */
.nav.nav-over-dark .nav-inner {
  background: rgba(0, 0, 0, 0.45) !important;
  box-shadow: none !important;
}
.nav.nav-over-dark .nav-logo svg path { fill: var(--white) !important; }
.nav.nav-over-dark .nav-links a { color: var(--white) !important; }
.nav.nav-over-dark .nav-cta { background: var(--white) !important; }
.nav.nav-over-dark .nav-cta span { color: #09090B !important; }
.nav.nav-over-dark .nav-hamburger line { stroke: var(--white) !important; }

/* Nav CTA: 8px corner, height matched to the nav-inner pill (41px). */
.nav-cta {
  border-radius: 8px;
  height: 41px;
  padding-top: 0;
  padding-bottom: 0;
  align-items: center;
}

/* Mobile-menu CTA: rounder corner only, native height kept. */
.mobile-menu-cta {
  border-radius: 8px;
}

/* Ghost / outline CTA: new shape + glass */
.btn-ghost {
  border-radius: 8px;
  padding: 12px 20px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* ---- v1.1 components ---- */

/* Form selection chips (service + budget) - match the button corner.
   Was 2px; round to 8px for consistency with the button system. */
.service-pill {
  border-radius: 8px;
}

/* Every remaining CTA / submit button -> 8px, so the whole site is
   consistent. Deliberately excludes non-buttons (footer image/video
   wrappers, mid-cta-inner container, logo-pill) and the intentional
   100px sticky pill. Done as a sweep to stop one-at-a-time misses. */
.form-submit button,
.bda-form-submit,
.bda-tier-cta,
.error-cta,
.ghost-button,
.work-card-cta,
.pow-paid-form-thanks-cta,
.hero-play-btn {
  border-radius: 8px;
}

/* Form chip selection animation - premium, cohesive.
   Was: background 0.15s only, so the text colour snapped black<->white
   while the bg faded = janky. Now bg + border + text ease together. */
.service-pill {
  transition: background 0.28s cubic-bezier(0.4, 0, 0.2, 1),
              border-color 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}
.service-pill span {
  transition: color 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}
.service-pill:active {
  transform: scale(0.97);
}

/* Case-study sidebar headline metric - the proof, up top in the side nav.
   Dark case-study theme: white number, muted label. */
.sidebar-metric {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-top: 32px;
  border-top: 1px solid #FFFFFF1A;
}
.sidebar-metric-number {
  font-size: 21px;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: var(--text-white);
}
.sidebar-metric-label {
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  line-height: 1.5;
  color: #FFFFFF66;
}

/* Codex-audit catches: paid-ad submit + work-page filter pills were missed. */
.pow-form-submit button,
.work-pill {
  border-radius: 8px;
}

/* Case-study tag chips - inconsistent per page (2px hemi, 4px others) and
   reading angular. Soften to 6px: clearly a ghost chip, not a button (8px). */
.case-tag {
  border-radius: 6px;
}