Adding a global group module (header) to a child theme

# Adding a Global Group Module (Header) to a Child Theme: Why CSS Failed to Load

## Summary
- A developer cloned a global header module in a HubSpot CMS child theme.
- The cloned module was referenced in `base.html` via the module path.
- The header displayed structurally but rendered without CSS styling.
- Debugging revealed missing stylesheet links in compiled HTML.

## Root Cause
- Global group modules require explicit registration in HubSpot's theme configuration.
- The child theme didn't declare the cloned module as a new global group module.
- HubSpot only auto-injects CSS for modules defined as `global` in `theme.json`.
- The cloned module existed as a standard module without global CSS bundling.

## Why This Happens in Real Systems
- HubSpot's "global module" logic differs from standard module reuse:
  - Global modules require admin-level declaration
  - CSS bundling relies on explicit whitelisting in `theme.json`
  - Cloning breaks the original module's global registration
- Developers assume cloned modules inherit all original properties
- Documentation gaps around theme inheritance for global components

## Real-World Impact
- Critical header components render without branding/functionality
- Site navigation becomes unusable on production pages
- Increased bounce rates due to broken UX
- Debugging time diverted from feature development

## Example or Code

Original `base.html` module inclusion:
```jinja
{# Original global module #}
{% module "header" path="@hubspot/header" %}

Child theme attempt:

{# Broken cloned module reference #}
{% module "cloned_header" path="/cloned-modules/new-header" %}

Missing registration in child theme’s theme.json:

{
  "global_modules": [
    // Only contains parent theme's header 
    "@hubspot/header",
    // Missing: "/cloned-modules/new-header"
  ]
}

How Senior Engineers Fix It

1. Declare clone as global:

   // theme.json
   {
     "global_modules": [
       "@hubspot/header",
       "/cloned-modules/new-header" // Explicit registration
     ]
   }

2. Verify bundle injection:
   • Confirm <link> tags appear in rendered HTML
   • Check DevTools Network tab for new CSS bundle
3. Namespace CSS classes:
   • Prevent conflicts by prefixing cloned module classes
4. Theme inheritance audit:
   • Verify all child theme globals exist in theme.json
5. Continuous validation:
   • Add automated checks for global module registration

Why Juniors Miss It

• Assumes module cloning preserves all meta-properties
• Unaware of HubSpot’s CSS bundling dependencies
• Believes template syntax alone controls module behavior
• Doesn’t check compiled HTML for missing resources
• Focuses on HTML structure over CMS configuration
• Overlooks requirement for JS/CSS registration in theme manifests