Rebuild header to match Holland America Line

blocks/header/header.js

@@ -124,14 +124,16 @@ export default async function decorate(block) {
   nav.id = 'nav';
   while (fragment.firstElementChild) nav.append(fragment.firstElementChild);
 
-  const classes = ['brand', 'sections', 'tools'];
+  // Region classes, in fragment section order:
+  // 1 brand, 2 sections (primary menu), 3 tools (utility), 4 announcement
+  const classes = ['brand', 'sections', 'tools', 'announcement'];
   classes.forEach((c, i) => {
     const section = nav.children[i];
     if (section) section.classList.add(`nav-${c}`);
   });
 
   const navBrand = nav.querySelector('.nav-brand');
-  const brandLink = navBrand.querySelector('.button');
+  const brandLink = navBrand?.querySelector('.button');
   if (brandLink) {
     brandLink.className = '';
     brandLink.closest('.button-container').className = '';

head.html

@@ -7,3 +7,6 @@
 <script nonce="aem" src="/scripts/aem.js" type="module"></script>
 <script nonce="aem" src="/scripts/scripts.js" type="module"></script>
 <link rel="stylesheet" href="/styles/styles.css"/>
+<!-- Adobe Fonts (quasimoda) for the nav -->
+<link rel="stylesheet" href="https://use.typekit.net/mvi1kov.css"/>
+

styles/styles.css

@@ -31,6 +31,10 @@
   --body-font-family: roboto, roboto-fallback, sans-serif;
   --heading-font-family: roboto-condensed, roboto-condensed-fallback, sans-serif;
 
+  /* nav font — matches hollandamerica.com; upgrades to quasimoda once the
+     Adobe Fonts kit <link> is added to head.html (see placeholder there) */
+  --nav-font: quasimoda, var(--body-font-family);
+
   /* body sizes */
   --body-font-size-m: 22px;
   --body-font-size-s: 19px;