fix: Astra style conflicts, full-width, responsive hero images, header search

Plugin (viator-collector 1.8.1):
- is_vc_page() now matches any Viator shortcode, so shortcode Pages (home)
  get the full-width no-sidebar canvas
- load vc-design.css after Astra + inline overrides: strip Astra page-builder
  article padding (removes extra gap above hero), full-bleed containers,
  enforce design font inside .vc-app
- vc_hero_img_html(): render hero from the WP media library with responsive
  srcset when the image is an attachment; used in listing + [viator_hero]
  ([viator_hero image_id=".."])

Theme (astra child):
- remove the user/profile header item
- working header search (expands, submits to the tours archive ?vc_q=)
- load chrome.css after Astra + enforce design font inside .hoho
- rebuild installable ZIP

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

astra-child-hoponhopoff/assets/chrome.js

@@ -63,6 +63,31 @@
     }
   }
 
+  /* ---------- header search: expand, then submit ---------- */
+  var search = document.querySelector(".header__search");
+  if (search) {
+    var searchInput = search.querySelector(".header__search-input");
+    var searchBtn = search.querySelector(".header__search-btn");
+    if (searchInput && searchBtn) {
+      searchBtn.addEventListener("click", function (e) {
+        if (!search.classList.contains("is-open")) {
+          e.preventDefault();
+          search.classList.add("is-open");
+          searchInput.focus();
+        } else if (!searchInput.value.trim()) {
+          e.preventDefault();
+          search.classList.remove("is-open"); /* empty → collapse instead of submit */
+        }
+        /* open + has text → let the form submit to the tours archive (?vc_q=) */
+      });
+      document.addEventListener("click", function (e) {
+        if (!search.contains(e.target) && !searchInput.value.trim()) {
+          search.classList.remove("is-open");
+        }
+      });
+    }
+  }
+
   /* ---------- footer: back to top ---------- */
   var toTop = document.querySelector(".ring-badge--top");
   if (toTop) {

astra-child-hoponhopoff/functions.php

@@ -17,19 +17,34 @@ add_action( 'wp_enqueue_scripts', function () {
 	// Design typeface (same as the plugin's pages).
 	wp_enqueue_style( 'hoho-fonts', 'https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;700;800&display=swap', array(), null );
 
-	// Header/footer design, scoped to .hoho so it can't fight Astra.
-	wp_enqueue_style( 'hoho-chrome', get_stylesheet_directory_uri() . '/assets/chrome.css', array( 'astra-parent' ), '1.0.0' );
+	// Header/footer design, scoped to .hoho so it can't fight Astra. Depend on
+	// the Astra stylesheet (when present) so our rules load AFTER it and win ties.
+	$deps = array( 'astra-parent' );
+	if ( wp_style_is( 'astra-theme-css', 'registered' ) ) {
+		$deps[] = 'astra-theme-css';
+	}
+	wp_enqueue_style( 'hoho-chrome', get_stylesheet_directory_uri() . '/assets/chrome.css', $deps, '1.0.1' );
 
-	// Header interactions: burger, submenu, sticky, back-to-top.
-	wp_enqueue_script( 'hoho-chrome', get_stylesheet_directory_uri() . '/assets/chrome.js', array(), '1.0.0', true );
+	// Header interactions: burger, submenu, sticky, back-to-top, search toggle.
+	wp_enqueue_script( 'hoho-chrome', get_stylesheet_directory_uri() . '/assets/chrome.js', array(), '1.0.1', true );
 
-	// On pages without a full-bleed hero to overlay, the header renders solid and
-	// sticky (added by chrome.js as .is-solid) so it stays readable and doesn't
-	// cover content. Hero pages keep the transparent overlay + is-stuck on scroll.
 	wp_add_inline_style(
 		'hoho-chrome',
-		'.hoho .site-header.is-solid{position:sticky;inset-block-start:0;padding-block:var(--sp-2);'
-		. 'background:rgba(0,0,0,.85);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);}'
+		implode(
+			'',
+			array(
+				// Solid, sticky header on pages without a hero to overlay (added by
+				// chrome.js as .is-solid) so it stays readable and doesn't cover content.
+				'.hoho .site-header.is-solid{position:sticky;inset-block-start:0;padding-block:var(--sp-2);background:rgba(0,0,0,.85);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);}',
+				// Force the design font over Astra inside the header/footer.
+				'.hoho,.hoho h1,.hoho h2,.hoho h3,.hoho p,.hoho a,.hoho span,.hoho li,.hoho button,.hoho input{font-family:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;}',
+				// Expanding header search field.
+				'.hoho .header__search{display:flex;align-items:center;gap:.25rem;}',
+				'.hoho .header__search-input{width:0;min-width:0;padding:0;border:0;outline:0;opacity:0;height:var(--control-h);border-radius:var(--r-pill);background:rgba(255,255,255,.15);color:#fff;transition:width .25s var(--ease),opacity .2s var(--ease),padding .25s var(--ease);}',
+				'.hoho .header__search.is-open .header__search-input{width:min(52vw,15rem);padding:0 1rem;opacity:1;}',
+				'.hoho .header__search-input::placeholder{color:rgba(255,255,255,.7);}',
+			)
+		)
 	);
 }, 20 );
 

astra-child-hoponhopoff/inc/header.php

@@ -32,12 +32,12 @@ $hoho_archive = $hoho_archive ? $hoho_archive : home_url( '/' );
 			</div>
 
 			<div class="header__actions">
-				<button class="icon-btn" type="button" aria-label="<?php echo esc_attr__( 'Search', 'hoponhopoff' ); ?>">
-					<?php echo hoho_icon( 'search', 'icon--24' ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
-				</button>
-				<a class="icon-btn" href="<?php echo esc_url( wp_login_url() ); ?>" aria-label="<?php echo esc_attr__( 'Account', 'hoponhopoff' ); ?>">
-					<?php echo hoho_icon( 'user', 'icon--24' ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
-				</a>
+				<form class="header__search" role="search" method="get" action="<?php echo esc_url( $hoho_archive ); ?>">
+					<input class="header__search-input" type="search" name="vc_q" placeholder="<?php echo esc_attr__( 'Search tours…', 'hoponhopoff' ); ?>" aria-label="<?php echo esc_attr__( 'Search tours', 'hoponhopoff' ); ?>">
+					<button class="icon-btn header__search-btn" type="submit" aria-label="<?php echo esc_attr__( 'Search', 'hoponhopoff' ); ?>">
+						<?php echo hoho_icon( 'search', 'icon--24' ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
+					</button>
+				</form>
 				<a class="btn btn--accent header__cta" href="<?php echo esc_url( $hoho_archive ); ?>">
 					<span><?php echo esc_html__( 'Book now', 'hoponhopoff' ); ?></span>
 					<?php echo hoho_icon( 'arrow-right' ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>