/* Guitar Mentor site shell for pages built outside site-v2 (the /chords
   Next.js export). The same Guitar | Keyboard | Schools switcher and the
   Guitar nav as site-v2's header, namespaced gms- so it cannot collide
   with the host page's own styles. Pair with shell.js. */
:root { --gms-bar: 64px; --gms-switch: 48px; --gms-h: calc(var(--gms-bar) + var(--gms-switch)); --nav-h: var(--gms-h); }
.gms-header, .gms-header *, .gms-menu, .gms-menu * { box-sizing: border-box; }
.gms-header {
  position: fixed; inset: 0 0 auto 0; z-index: 1000; height: var(--gms-h);
  font-family: "Bricolage Grotesque", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  background: rgba(18, 14, 31, 0.94); -webkit-backdrop-filter: saturate(140%) blur(16px); backdrop-filter: saturate(140%) blur(16px);
  border-bottom: 1px solid rgba(226, 218, 255, 0.1); color: #f3f0fa; transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1);
  -webkit-font-smoothing: antialiased;
}
.gms-header.gms-tuck { transform: translateY(calc(-1 * var(--gms-switch))); }
.gms-wrap { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 40px); }
.gms-switch-row { height: var(--gms-switch); display: flex; align-items: center; justify-content: center; padding: 0 16px; }
.gms-switcher { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); padding: 4px; border-radius: 999px; background: rgba(10, 8, 20, 0.5); border: 1px solid rgba(255, 255, 255, 0.14); isolation: isolate; }
.gms-tab { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 120px; height: 34px; padding: 0 16px; border-radius: 999px; text-decoration: none !important; font-weight: 680; font-size: 0.94rem; letter-spacing: -0.01em; color: rgba(243, 240, 250, 0.78) !important; transition: color 0.3s; }
.gms-tab:hover { color: #fff !important; }
.gms-tab svg { width: 17px; height: 17px; flex-shrink: 0; }
.gms-tab[aria-selected="true"] { color: #23140a !important; }
.gms-tab:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.gms-pill { position: absolute; z-index: 0; top: 4px; bottom: 4px; left: 4px; width: calc((100% - 8px) / 3); border-radius: 999px; background: linear-gradient(105deg, #ffd796 0%, #f6b865 32%, #e0953a 70%, #f0707c 100%); box-shadow: 0 8px 22px -10px rgba(246, 184, 101, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.35); }
.gms-nav { height: var(--gms-bar); display: flex; align-items: center; gap: 24px; }
.gms-brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none !important; color: #f3f0fa !important; font-weight: 750; font-size: 1.1rem; letter-spacing: -0.03em; flex-shrink: 0; }
.gms-brand img { width: 32px; height: 32px; }
.gms-links { display: flex; gap: 4px; margin: 0 0 0 8px; padding: 0; list-style: none; }
.gms-links a { display: block; padding: 8px 12px; border-radius: 999px; text-decoration: none !important; color: #c2bad8 !important; font-size: 0.96rem; font-weight: 520; transition: color 0.2s, background 0.2s; }
.gms-links a:hover, .gms-links a[aria-current="page"] { color: #f3f0fa !important; background: rgba(255, 255, 255, 0.07); }
.gms-cta { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.gms-btn { display: inline-flex; align-items: center; min-height: 38px; padding: 7px 15px; border-radius: 999px; background: #f3f0fa; color: #160f25 !important; font-weight: 650; font-size: 0.92rem; text-decoration: none !important; white-space: nowrap; }
.gms-btn:hover { background: #fff; }
.gms-toggle { display: none; width: 44px; height: 44px; border-radius: 12px; border: 1px solid rgba(226, 218, 255, 0.18); background: transparent; cursor: pointer; align-items: center; justify-content: center; padding: 0; }
.gms-toggle span, .gms-toggle span::before, .gms-toggle span::after { display: block; width: 18px; height: 2px; background: #f3f0fa; border-radius: 2px; position: relative; transition: transform 0.25s, background 0.2s; }
.gms-toggle span::before, .gms-toggle span::after { content: ""; position: absolute; left: 0; }
.gms-toggle span::before { top: -6px; } .gms-toggle span::after { top: 6px; }
.gms-open .gms-toggle span { background: transparent; }
.gms-open .gms-toggle span::before { transform: translateY(6px) rotate(45deg); }
.gms-open .gms-toggle span::after { transform: translateY(-6px) rotate(-45deg); }
.gms-menu { display: none; }
@media (max-width: 920px) {
  .gms-links { display: none; }
  .gms-toggle { display: inline-flex; }
  .gms-menu { display: block; position: fixed; inset: var(--gms-h) 0 auto 0; z-index: 999; font-family: "Bricolage Grotesque", system-ui, sans-serif; background: rgba(18, 14, 31, 0.98); border-bottom: 1px solid rgba(226, 218, 255, 0.1); padding: 8px clamp(16px, 4vw, 40px) 20px; opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity 0.2s, transform 0.25s, visibility 0.2s; }
  .gms-open .gms-menu { opacity: 1; visibility: visible; transform: none; }
  .gms-menu a { display: block; padding: 14px 4px; font-size: 1.12rem; font-weight: 600; color: #f3f0fa !important; text-decoration: none !important; border-bottom: 1px solid rgba(226, 218, 255, 0.1); }
}
@media (max-width: 640px) {
  :root { --gms-bar: 60px; --gms-switch: 46px; }
  .gms-tab { min-width: 0; width: 100%; height: 32px; padding: 0 10px; gap: 6px; font-size: 0.88rem; }
  .gms-switcher { width: min(100%, 372px); }
}
@media (max-width: 380px) { .gms-tab svg { display: none; } .gms-btn { padding-inline: 12px; font-size: 0.86rem; } .gms-nav { gap: 12px; } }
@media (max-width: 360px) { .gms-btn { display: none; } }
@media (prefers-reduced-motion: reduce) { .gms-header, .gms-menu { transition: none; } }