# 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' );
   ```

## Design pages (About, Contact, FAQ, Blog)

`inc/pages.php` gives these pages the "new front" designs automatically, by
address — no page template to pick:

| Design | Used on | Template |
|---|---|---|
| About | page `about-us` (or `about`) | `templates/about.php` |
| Contact | page `contact-us` (or `contact`) | `templates/contact.php` |
| FAQ | page `faq` (or `faqs`) | `templates/faq.php` |
| Blog list | the Posts page, or page `blogs` / `blog` | `templates/blog.php` |
| Blog post | every single post | `templates/post.php` |

- About/FAQ/Contact text is fixed in the templates (edit the files to change it).
- The contact form emails **Settings → Viator Collector → Contact email**
  (falls back to the site admin email), with the visitor as Reply-To.
- Blog list search/sort/paging use `?q=`, `?sort=` and `?pg=`; post "Review's"
  are WordPress comments.
- Styles: `assets/pages.css` is generated — rebuild after changing the design CSS:
  `VC_SCOPE='.hoho-page.hoho-page' node viator-collector/build/scope-css.js "new front/css/style.css" astra-child-hoponhopoff/assets/pages.css`.
  WordPress-specific fixes live in `assets/pages-wp.css`.

## 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.