Add Astra child theme for Hop On Hop Off header & footer

- disables Astra header/footer via astra_header/astra_footer hooks and renders
  custom design markup (logo, nav dropdown, footer columns, socials, support)
- chrome.css scoped to .hoho (generated from the design source); chrome.js for
  burger/submenu/sticky/back-to-top; bundled icon sprite (reuses plugin's)
- parameterize scope-css.js scope via VC_SCOPE env

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01J4hNL1PSHxXbu94SCenpKj

astra-child-hoponhopoff/README.md

@@ -0,0 +1,84 @@
+# Hop On Hop Off — Astra Child Theme (header & footer)
+
+This child theme replaces **Astra's** default header and footer with the
+"Hop On Hop Off" design (the same look as `new front/index.html`), while leaving
+the rest of Astra untouched. It pairs with the **Viator Collector** plugin, which
+styles the page content (listing / single / homepage sections).
+
+## What it does
+
+- Disables Astra's header/footer markup and renders custom ones via the
+  `astra_header` / `astra_footer` hooks.
+- Loads the design CSS **scoped to `.hoho`** (`assets/chrome.css`) so it can't
+  collide with Astra or other plugins.
+- Prints the SVG icon sprite site-wide (reusing the plugin's copy when active).
+- Header nav is a real WordPress menu (with a Tours dropdown); footer columns,
+  logo, socials and copyright are dynamic.
+
+## Install (step by step)
+
+1. **Astra must be installed.** Appearance → Themes → make sure the *Astra*
+   parent theme is present (it can stay inactive; the child needs it as a base).
+2. **Copy this folder** `astra-child-hoponhopoff/` into
+   `wp-content/themes/` on your site.
+3. **Activate** it: Appearance → Themes → *Hop On Hop Off (Astra Child)* → Activate.
+4. **Create the menus:** Appearance → Menus. Create and assign menus to these
+   locations (Manage Locations tab):
+   - **HoHo — Header Menu** → your top nav. To get the *Tours* dropdown, add a
+     top-level item named "Tours" and drag destination/tour links **underneath**
+     it (indented) as sub-items.
+   - **HoHo — Footer: Quick Access**
+   - **HoHo — Footer: Tours**
+   - **HoHo — Footer: User Account**
+   (Footer columns with no assigned menu simply render their heading only.)
+5. **Logo (optional):** Appearance → Customize → Site Identity → Select Logo.
+   If none is set, the bundled "Hop On Hop Off" SVG wordmark is used.
+6. **Social links (optional):** they default to `#`. Set real URLs with a snippet
+   in this theme's `functions.php`:
+   ```php
+   add_filter( 'hoho_socials', function ( $s ) {
+       $s['instagram'] = 'https://instagram.com/yourpage';
+       $s['facebook']  = 'https://facebook.com/yourpage';
+       $s['whatsapp']  = 'https://wa.me/…';
+       $s['telegram']  = 'https://t.me/…';
+       return $s;
+   } );
+   ```
+7. **Footer blurb & support link (optional):**
+   ```php
+   add_filter( 'hoho_footer_about', fn() => 'Your footer paragraph.' );
+   add_filter( 'hoho_support_url',  fn() => 'https://example.com/contact' );
+   ```
+
+## Header behavior
+
+The header is **transparent and overlays a full-bleed hero** (homepage, and the
+plugin's listing/single pages), then turns solid on scroll — exactly like the
+mockup. On pages that have **no hero**, `chrome.js` adds `.is-solid`, so the
+header renders as a solid, sticky bar that stays readable and doesn't cover
+content.
+
+If on your site the transparent overlay ever sits wrong on a hero page (theme
+wrappers differ between setups), force the solid style everywhere by changing the
+top of `assets/chrome.js` so it always adds `is-solid`, or add this CSS:
+
+```css
+.hoho .site-header { position: sticky; inset-block-start: 0;
+  background: rgba(0,0,0,.85); backdrop-filter: blur(12px); }
+```
+
+## Regenerating the CSS
+
+`assets/chrome.css` is generated from the design source with the plugin's scoper:
+
+```bash
+VC_SCOPE=.hoho node ../viator-collector/build/scope-css.js "../new front/css/style.css" assets/chrome.css
+```
+
+## Notes
+
+- Requires the **Astra** parent theme. Tested against Astra's
+  `astra_header_markup` / `astra_footer_markup` hooks; if a future Astra version
+  renames those, update the `remove_action()` calls in `functions.php`.
+- Icons come from `assets/sprite.svg` (`<use href="#i-…">`). When the Viator
+  Collector plugin is active, its identical sprite is reused to avoid duplication.