From fd687356c1827ef4179bdc14759aaff4ac969ef2 Mon Sep 17 00:00:00 2001
From: kailasnadh790 <53608019+kailasnadh790@users.noreply.github.com>
Date: Wed, 20 Dec 2023 14:55:33 -0500
Subject: [PATCH 01/24] initial

---
 cigaradvisor/blocks/header/header.css  | 306 +++++--------------------
 cigaradvisor/blocks/header/header1.css | 275 ++++++++++++++++++++++
 2 files changed, 331 insertions(+), 250 deletions(-)
 create mode 100644 cigaradvisor/blocks/header/header1.css

diff --git a/cigaradvisor/blocks/header/header.css b/cigaradvisor/blocks/header/header.css
index 11a1b696..6b40fd67 100644
--- a/cigaradvisor/blocks/header/header.css
+++ b/cigaradvisor/blocks/header/header.css
@@ -1,275 +1,81 @@
-/* header and nav layout */
-header .nav-wrapper {
-  background-color: var(--background-color);
-  width: 100%;
-  z-index: 2;
-  position: fixed;
-}
+/* using flex arrange items horizontally and give a black background */
+.nav-wrapper {
+    background-color:#141414;
+    min-height: 60px;
+}   
 
-header nav {
-  box-sizing: border-box;
-  display: grid;
-  grid-template:
-    'hamburger brand tools' var(--nav-height)
-    'sections sections sections' 1fr / auto 1fr auto;
-  align-items: center;
-  gap: 0 2em;
+#nav { 
+  display: flex;
+  flex-direction: row;
   margin: auto;
-  max-width: 1264px;
-  height: var(--nav-height);
-  padding: 0 1rem;
-  font-family: var(--body-font-family);
+  max-width: 1080px;
 }
 
-header nav[aria-expanded="true"] {
-  grid-template:
-    'hamburger brand' var(--nav-height)
-    'sections sections' 1fr
-    'tools tools' var(--nav-height) / auto 1fr;
-  overflow-y: auto;
-  min-height: 100vh;
+.nav-wrapper p {
+    color: #8e7b5c;
+    text-transform: uppercase;
+    margin: 0 auto;
+    font-size: 12px;
 }
 
-@media (min-width: 600px) {
-  header nav {
-    padding: 0 2rem;
-  }
+.default-content-wrapper{
+    display: block;
+    width: 100%;
 }
 
-@media (min-width: 900px) {
-  header nav {
+.heder-primary-left {
+    width: calc(50% - 80px);
+    padding: 0 10px;
+    height: 60px;
+    float: left;
     display: flex;
-    justify-content: space-between;
-  }
-
-  header nav[aria-expanded="true"] {
-    min-height: 0;
-    overflow: visible;
-  }
-}
-
-header nav p {
-  margin: 0;
-  line-height: 1;
-}
-
-header nav a:any-link {
-  color: currentcolor;
-}
-
-/* hamburger */
-header nav .nav-hamburger {
-  grid-area: hamburger;
-  height: 22px;
-  display: flex;
-  align-items: center;
+    justify-content: center;
+    align-items: center;
 }
 
-header nav .nav-hamburger button {
-  height: 22px;
-  margin: 0;
-  border: 0;
-  border-radius: 0;
-  padding: 0;
-  background-color: var(--background-color);
-  color: inherit;
-  overflow: initial;
-  text-overflow: initial;
-  white-space: initial;
-}
-
-header nav .nav-hamburger-icon,
-header nav .nav-hamburger-icon::before,
-header nav .nav-hamburger-icon::after {
-  box-sizing: border-box;
-  display: block;
-  position: relative;
-  width: 20px;
-}
 
-header nav .nav-hamburger-icon::before,
-header nav .nav-hamburger-icon::after {
-  content: '';
-  position: absolute;
-  background: currentcolor;
-}
-
-header nav[aria-expanded="false"] .nav-hamburger-icon,
-header nav[aria-expanded="false"] .nav-hamburger-icon::before,
-header nav[aria-expanded="false"] .nav-hamburger-icon::after {
-  height: 2px;
-  border-radius: 2px;
-  background: currentcolor;
-}
-
-header nav[aria-expanded="false"] .nav-hamburger-icon::before {
-  top: -6px;
-}
-
-header nav[aria-expanded="false"] .nav-hamburger-icon::after {
-  top: 6px;
-}
-
-header nav[aria-expanded="true"] .nav-hamburger-icon {
-  height: 22px;
-}
-
-header nav[aria-expanded="true"] .nav-hamburger-icon::before,
-header nav[aria-expanded="true"] .nav-hamburger-icon::after {
-  top: 3px;
-  left: 1px;
-  transform: rotate(45deg);
-  transform-origin: 2px 1px;
-  width: 24px;
-  height: 2px;
-  border-radius: 2px;
-}
-
-header nav[aria-expanded="true"] .nav-hamburger-icon::after {
-  top: unset;
-  bottom: 3px;
-  transform: rotate(-45deg);
-}
-
-@media (min-width: 900px) {
-  header nav .nav-hamburger {
-    display: none;
-    visibility: hidden;
-  }
-}
-
-/* brand */
-header .nav-brand {
-  grid-area: brand;
-  flex-basis: 128px;
-  font-size: var(--heading-font-size-s);
-  font-weight: 700;
-  line-height: 1;
-}
-
-header nav .nav-brand img {
-  width: 128px;
-  height: auto;
-}
-
-/* sections */
-header nav .nav-sections {
-  grid-area: sections;
-  flex: 1 1 auto;
-  display: none;
-  visibility: hidden;
-  background-color: var(--overlay-color);
+/* arrange li items horizontally under .default-content-wrapper ul */
+.default-content-wrapper ul{
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    list-style-type: none;
+    padding: 0;
+    margin: 0;
 }
 
-header nav[aria-expanded="true"] .nav-sections {
-  display: block;
-  visibility: visible;
-  align-self: start;
+.default-content-wrapper picture {
+    display: block;
+    position: absolute;
 }
 
-header nav .nav-sections ul  {
-  list-style: none;
-  padding-left: 0;
-  font-size: var(--body-font-size-s);
-  font-weight: 500;
+.default-content-wrapper ul a{
+    text-transform: uppercase;
+    color: #fff;
+    font-size: 14px;
+    font-weight: 400;
 }
 
-header nav .nav-sections ul > li {
-  font-weight: 700;
+.default-content-wrapper ul li a::before{
+    content: 'ico';
+    color: transparent;
+    background-image: url('/cigaradvisor/images/header/famous.png');
+    background-position: center;
+    background-size: contain;
+    background-repeat: no-repeat;
+    margin-right: 5px;
+    font-size: 16px;
 }
 
-header nav .nav-sections ul > li > ul {
-  margin-top: 0;
+/* style the second a under default-content-wrapper ul */
+.default-content-wrapper ul li:nth-last-child(2) a::before{
+    background-image: url('/cigaradvisor/images/header/auctioneer.png');
 }
 
-header nav .nav-sections ul > li > ul > li {
-  font-weight: 500;
+.default-content-wrapper ul li:last-child a::before{
+    background-image: url('/cigaradvisor/images/header/monster.png');
 }
 
-@media (min-width: 900px) {
-  header nav .nav-sections {
-    display: block;
-    visibility: visible;
-    white-space: nowrap;
-  }
-
-  header nav[aria-expanded="true"] .nav-sections {
-    align-self: unset;
-  }
-
-  header nav .nav-sections .nav-drop {
-    position: relative;
-    padding-right: 16px;
-    cursor: pointer;
-  }
-
-  header nav .nav-sections .nav-drop::after {
-    content: '';
-    display: inline-block;
-    position: absolute;
-    top: .5em;
-    right: 2px;
-    transform: rotate(135deg);
-    width: 6px;
-    height: 6px;
-    border: 2px solid currentcolor;
-    border-radius: 0 1px 0 0;
-    border-width: 2px 2px 0 0;
-  }
-
-  header nav .nav-sections .nav-drop[aria-expanded="true"]::after {
-    top: unset;
-    bottom: .5em;
-    transform: rotate(315deg);
-  }
-
-  header nav .nav-sections ul {
-    display: flex;
-    gap: 2em;
-    margin: 0;
-    font-size: var(--body-font-size-xs);
-  }
-
-  header nav .nav-sections .default-content-wrapper > ul > li {
-    flex: 0 1 auto;
-    position: relative;
-    font-weight: 500;
-  }
-
-  header nav .nav-sections .default-content-wrapper > ul > li > ul {
+.nav-hamburger {
     display: none;
-    position: relative;
-  }
-
-  header nav .nav-sections .default-content-wrapper > ul > li[aria-expanded="true"] > ul {
-    display: block;
-    position: absolute;
-    left: -1em;
-    width: 200px;
-    margin-top: 12px;
-    padding: 1em;
-    background-color: var(--highlight-background-color);
-    white-space: initial;
-  }
-
-  header nav .nav-sections .default-content-wrapper > ul > li > ul::before {
-    content: '';
-    position: absolute;
-    top: -8px;
-    left: 8px;
-    width: 0;
-    height: 0;
-    border-left: 8px solid transparent;
-    border-right: 8px solid transparent;
-    border-bottom: 8px solid var(--highlight-background-color);
-  }
-
-  header nav .nav-sections .default-content-wrapper > ul > li > ul > li {
-    padding: 8px 0;
-  }
-}
-
-/* tools */
-header nav .nav-tools {
-  grid-area: tools;
-}
+}
\ No newline at end of file
diff --git a/cigaradvisor/blocks/header/header1.css b/cigaradvisor/blocks/header/header1.css
new file mode 100644
index 00000000..11a1b696
--- /dev/null
+++ b/cigaradvisor/blocks/header/header1.css
@@ -0,0 +1,275 @@
+/* header and nav layout */
+header .nav-wrapper {
+  background-color: var(--background-color);
+  width: 100%;
+  z-index: 2;
+  position: fixed;
+}
+
+header nav {
+  box-sizing: border-box;
+  display: grid;
+  grid-template:
+    'hamburger brand tools' var(--nav-height)
+    'sections sections sections' 1fr / auto 1fr auto;
+  align-items: center;
+  gap: 0 2em;
+  margin: auto;
+  max-width: 1264px;
+  height: var(--nav-height);
+  padding: 0 1rem;
+  font-family: var(--body-font-family);
+}
+
+header nav[aria-expanded="true"] {
+  grid-template:
+    'hamburger brand' var(--nav-height)
+    'sections sections' 1fr
+    'tools tools' var(--nav-height) / auto 1fr;
+  overflow-y: auto;
+  min-height: 100vh;
+}
+
+@media (min-width: 600px) {
+  header nav {
+    padding: 0 2rem;
+  }
+}
+
+@media (min-width: 900px) {
+  header nav {
+    display: flex;
+    justify-content: space-between;
+  }
+
+  header nav[aria-expanded="true"] {
+    min-height: 0;
+    overflow: visible;
+  }
+}
+
+header nav p {
+  margin: 0;
+  line-height: 1;
+}
+
+header nav a:any-link {
+  color: currentcolor;
+}
+
+/* hamburger */
+header nav .nav-hamburger {
+  grid-area: hamburger;
+  height: 22px;
+  display: flex;
+  align-items: center;
+}
+
+header nav .nav-hamburger button {
+  height: 22px;
+  margin: 0;
+  border: 0;
+  border-radius: 0;
+  padding: 0;
+  background-color: var(--background-color);
+  color: inherit;
+  overflow: initial;
+  text-overflow: initial;
+  white-space: initial;
+}
+
+header nav .nav-hamburger-icon,
+header nav .nav-hamburger-icon::before,
+header nav .nav-hamburger-icon::after {
+  box-sizing: border-box;
+  display: block;
+  position: relative;
+  width: 20px;
+}
+
+header nav .nav-hamburger-icon::before,
+header nav .nav-hamburger-icon::after {
+  content: '';
+  position: absolute;
+  background: currentcolor;
+}
+
+header nav[aria-expanded="false"] .nav-hamburger-icon,
+header nav[aria-expanded="false"] .nav-hamburger-icon::before,
+header nav[aria-expanded="false"] .nav-hamburger-icon::after {
+  height: 2px;
+  border-radius: 2px;
+  background: currentcolor;
+}
+
+header nav[aria-expanded="false"] .nav-hamburger-icon::before {
+  top: -6px;
+}
+
+header nav[aria-expanded="false"] .nav-hamburger-icon::after {
+  top: 6px;
+}
+
+header nav[aria-expanded="true"] .nav-hamburger-icon {
+  height: 22px;
+}
+
+header nav[aria-expanded="true"] .nav-hamburger-icon::before,
+header nav[aria-expanded="true"] .nav-hamburger-icon::after {
+  top: 3px;
+  left: 1px;
+  transform: rotate(45deg);
+  transform-origin: 2px 1px;
+  width: 24px;
+  height: 2px;
+  border-radius: 2px;
+}
+
+header nav[aria-expanded="true"] .nav-hamburger-icon::after {
+  top: unset;
+  bottom: 3px;
+  transform: rotate(-45deg);
+}
+
+@media (min-width: 900px) {
+  header nav .nav-hamburger {
+    display: none;
+    visibility: hidden;
+  }
+}
+
+/* brand */
+header .nav-brand {
+  grid-area: brand;
+  flex-basis: 128px;
+  font-size: var(--heading-font-size-s);
+  font-weight: 700;
+  line-height: 1;
+}
+
+header nav .nav-brand img {
+  width: 128px;
+  height: auto;
+}
+
+/* sections */
+header nav .nav-sections {
+  grid-area: sections;
+  flex: 1 1 auto;
+  display: none;
+  visibility: hidden;
+  background-color: var(--overlay-color);
+}
+
+header nav[aria-expanded="true"] .nav-sections {
+  display: block;
+  visibility: visible;
+  align-self: start;
+}
+
+header nav .nav-sections ul  {
+  list-style: none;
+  padding-left: 0;
+  font-size: var(--body-font-size-s);
+  font-weight: 500;
+}
+
+header nav .nav-sections ul > li {
+  font-weight: 700;
+}
+
+header nav .nav-sections ul > li > ul {
+  margin-top: 0;
+}
+
+header nav .nav-sections ul > li > ul > li {
+  font-weight: 500;
+}
+
+@media (min-width: 900px) {
+  header nav .nav-sections {
+    display: block;
+    visibility: visible;
+    white-space: nowrap;
+  }
+
+  header nav[aria-expanded="true"] .nav-sections {
+    align-self: unset;
+  }
+
+  header nav .nav-sections .nav-drop {
+    position: relative;
+    padding-right: 16px;
+    cursor: pointer;
+  }
+
+  header nav .nav-sections .nav-drop::after {
+    content: '';
+    display: inline-block;
+    position: absolute;
+    top: .5em;
+    right: 2px;
+    transform: rotate(135deg);
+    width: 6px;
+    height: 6px;
+    border: 2px solid currentcolor;
+    border-radius: 0 1px 0 0;
+    border-width: 2px 2px 0 0;
+  }
+
+  header nav .nav-sections .nav-drop[aria-expanded="true"]::after {
+    top: unset;
+    bottom: .5em;
+    transform: rotate(315deg);
+  }
+
+  header nav .nav-sections ul {
+    display: flex;
+    gap: 2em;
+    margin: 0;
+    font-size: var(--body-font-size-xs);
+  }
+
+  header nav .nav-sections .default-content-wrapper > ul > li {
+    flex: 0 1 auto;
+    position: relative;
+    font-weight: 500;
+  }
+
+  header nav .nav-sections .default-content-wrapper > ul > li > ul {
+    display: none;
+    position: relative;
+  }
+
+  header nav .nav-sections .default-content-wrapper > ul > li[aria-expanded="true"] > ul {
+    display: block;
+    position: absolute;
+    left: -1em;
+    width: 200px;
+    margin-top: 12px;
+    padding: 1em;
+    background-color: var(--highlight-background-color);
+    white-space: initial;
+  }
+
+  header nav .nav-sections .default-content-wrapper > ul > li > ul::before {
+    content: '';
+    position: absolute;
+    top: -8px;
+    left: 8px;
+    width: 0;
+    height: 0;
+    border-left: 8px solid transparent;
+    border-right: 8px solid transparent;
+    border-bottom: 8px solid var(--highlight-background-color);
+  }
+
+  header nav .nav-sections .default-content-wrapper > ul > li > ul > li {
+    padding: 8px 0;
+  }
+}
+
+/* tools */
+header nav .nav-tools {
+  grid-area: tools;
+}

From 510b07d8029c2a1578a98db6ea087e6b9aff885e Mon Sep 17 00:00:00 2001
From: kailasnadh790 <53608019+kailasnadh790@users.noreply.github.com>
Date: Mon, 1 Jan 2024 13:43:30 -0500
Subject: [PATCH 02/24] header

---
 cigaradvisor/blocks/header/header.css | 121 ++++++++++++++++++++++----
 cigaradvisor/blocks/header/header.js  |  62 ++++---------
 cigaradvisor/icons/auctioneer.png     | Bin 0 -> 1336 bytes
 cigaradvisor/icons/famous.png         | Bin 0 -> 1862 bytes
 cigaradvisor/icons/monster.png        | Bin 0 -> 1640 bytes
 cigaradvisor/styles/styles.css        |   5 ++
 6 files changed, 129 insertions(+), 59 deletions(-)
 create mode 100644 cigaradvisor/icons/auctioneer.png
 create mode 100644 cigaradvisor/icons/famous.png
 create mode 100644 cigaradvisor/icons/monster.png

diff --git a/cigaradvisor/blocks/header/header.css b/cigaradvisor/blocks/header/header.css
index 6b40fd67..c2cc5630 100644
--- a/cigaradvisor/blocks/header/header.css
+++ b/cigaradvisor/blocks/header/header.css
@@ -1,14 +1,11 @@
 /* using flex arrange items horizontally and give a black background */
 .nav-wrapper {
-    background-color:#141414;
-    min-height: 60px;
 }   
 
 #nav { 
   display: flex;
-  flex-direction: row;
+  flex-direction: column;
   margin: auto;
-  max-width: 1080px;
 }
 
 .nav-wrapper p {
@@ -23,32 +20,111 @@
     width: 100%;
 }
 
-.heder-primary-left {
-    width: calc(50% - 80px);
-    padding: 0 10px;
+.top-nav{
+    background-color:#141414;
+    min-height: 60px;
+    align-items: center;
     height: 60px;
+}
+
+/* .brand-logo{
+    position: absolute;
+    left: calc(50% - 80px);
+    top: 0;
+    width: auto;
+    z-index: 1000;
     float: left;
+    text-align: left;
+    line-height: normal;
+    margin: 0 2em 0 0;
+    height: 42px;
+    max-width: 100%;
+    font-size: 0;
+} */
+
+
+/* arrange top-nav-content horizontally centered */
+.top-nav .top-nav-content{
     display: flex;
+    max-width: 1080px;
+    margin: 0 auto;
+    height: 100%;
+}
+
+.top-nav-left, .top-nav-right {
+    width: calc(50% - 80px);
+    padding: 0 10px;
+    display: flex;
+    justify-content: center;
+    
+}
+
+.top-nav-left{
+    float: left;
     justify-content: center;
     align-items: center;
 }
 
+.top-nav-right{
+    float: right;
+    justify-content: center;
+    align-items: flex-end;
+    padding: 10px;
+}
+
 
 /* arrange li items horizontally under .default-content-wrapper ul */
-.default-content-wrapper ul{
+.top-nav-left ul{
     display: flex;
     flex-direction: row;
     justify-content: space-between;
     list-style-type: none;
     padding: 0;
     margin: 0;
+    padding-right: 30px;
 }
 
-.default-content-wrapper picture {
+.top-nav-left ul li{
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    list-style-type: none;
+    padding: 0;
+    margin: 0;
+}
+
+.top-nav-left ul li span{
     display: block;
-    position: absolute;
+    width: 20px;
+    height: 20px;
+    margin-right: 5px;
+}
+
+.top-nav-right ul{
+    display: flex;
+    margin: 0;
+    padding: 0;
+    position: relative;
+    top: 5px;
+}
+
+.top-nav-right ul li{
+    flex: 0 0 auto;
+    margin: 0 8px;
+    font-weight: 400;
+    font-size: 14px;
+}
+
+.top-nav-right ul li a span {
+    color: #8e7b5c;
+    font-size: 24px;
+}
+
+.top-nav-right .default-content-wrapper{
+    width: auto;
 }
 
+
 .default-content-wrapper ul a{
     text-transform: uppercase;
     color: #fff;
@@ -56,7 +132,12 @@
     font-weight: 400;
 }
 
-.default-content-wrapper ul li a::before{
+.top-nav-right ul li img{
+    width: 25px;
+    height: 25px;
+}
+
+/* .default-content-wrapper ul li a::before{
     content: 'ico';
     color: transparent;
     background-image: url('/cigaradvisor/images/header/famous.png');
@@ -65,17 +146,25 @@
     background-repeat: no-repeat;
     margin-right: 5px;
     font-size: 16px;
-}
+} */
 
 /* style the second a under default-content-wrapper ul */
-.default-content-wrapper ul li:nth-last-child(2) a::before{
+/* .default-content-wrapper ul li:nth-last-child(2) a::before{
     background-image: url('/cigaradvisor/images/header/auctioneer.png');
-}
+} */
 
-.default-content-wrapper ul li:last-child a::before{
+/* .default-content-wrapper ul li:last-child a::before{
     background-image: url('/cigaradvisor/images/header/monster.png');
-}
+} */
 
 .nav-hamburger {
     display: none;
+}
+
+.nav-primary-nav {
+    display: none;
+}
+
+.nav-social-links {
+    display: none;
 }
\ No newline at end of file
diff --git a/cigaradvisor/blocks/header/header.js b/cigaradvisor/blocks/header/header.js
index 775c5138..7607454f 100644
--- a/cigaradvisor/blocks/header/header.js
+++ b/cigaradvisor/blocks/header/header.js
@@ -95,52 +95,28 @@ export default async function decorate(block) {
   const navMeta = getMetadata('nav');
   const navPath = navMeta ? new URL(navMeta).pathname : '/cigaradvisor/nav';
   const fragment = await loadFragment(navPath);
-
   // decorate nav DOM
   const nav = document.createElement('nav');
   nav.id = 'nav';
-  while (fragment.firstElementChild) nav.append(fragment.firstElementChild);
-
-  const classes = ['brand', 'sections', 'tools'];
-  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');
-  if (brandLink) {
-    brandLink.className = '';
-    brandLink.closest('.button-container').className = '';
-  }
-
-  const navSections = nav.querySelector('.nav-sections');
-  if (navSections) {
-    navSections.querySelectorAll(':scope .default-content-wrapper > ul > li').forEach((navSection) => {
-      if (navSection.querySelector('ul')) navSection.classList.add('nav-drop');
-      navSection.addEventListener('click', () => {
-        if (isDesktop.matches) {
-          const expanded = navSection.getAttribute('aria-expanded') === 'true';
-          toggleAllNavSections(navSections);
-          navSection.setAttribute('aria-expanded', expanded ? 'false' : 'true');
-        }
-      });
-    });
-  }
-
-  // hamburger for mobile
-  const hamburger = document.createElement('div');
-  hamburger.classList.add('nav-hamburger');
-  hamburger.innerHTML = `<button type="button" aria-controls="nav" aria-label="Open navigation">
-      <span class="nav-hamburger-icon"></span>
-    </button>`;
-  hamburger.addEventListener('click', () => toggleMenu(nav, navSections));
-  nav.prepend(hamburger);
-  nav.setAttribute('aria-expanded', 'false');
-  // prevent mobile nav behavior on window resize
-  toggleMenu(nav, navSections, isDesktop.matches);
-  isDesktop.addEventListener('change', () => toggleMenu(nav, navSections, isDesktop.matches));
-
+  const topNav = document.createElement('div');
+  topNav.className = 'top-nav';
+  const topNavContent = document.createElement('div');
+  topNavContent.className = 'top-nav-content';
+  const topNavLeft = fragment.children[0];
+  topNavLeft.classList.add('top-nav-left');
+  topNavContent.append(topNavLeft);
+  const brand = document.createElement('div');
+  brand.innerHTML = `<a href="https://www.famous-smoke.com/cigaradvisor" rel="home" class="layout__logo lg-andUp" title="Cigar Advisor Homepage">
+  <img src="https://www.famous-smoke.com/cigaradvisor/wp-content/themes/CigarAdvisor/assets/images/logo.png?w=160" alt="Cigar Advisor Logo">
+  </a>`;
+  brand.className = 'brand-logo';
+  topNavContent.append(brand);
+  const topNavRight = fragment.children[0];
+  topNavRight.classList.add('top-nav-right');
+  topNavContent.append(topNavRight);
+  topNav.append(topNavContent);
+  nav.append(topNav);
+  nav.append(fragment.children[0]);
   const navWrapper = document.createElement('div');
   navWrapper.className = 'nav-wrapper';
   navWrapper.append(nav);
diff --git a/cigaradvisor/icons/auctioneer.png b/cigaradvisor/icons/auctioneer.png
new file mode 100644
index 0000000000000000000000000000000000000000..4042d18c932bd975a66fde653379ec80b8764c48
GIT binary patch
literal 1336
zcmV-81;_e{P)<h;3K|Lk000e1NJLTq002w?002A)1^@s6%(YzV000F4Nkl<Zc-rlo
z32YTb7{^~Z0s+JVQb2CX8RQHR0%%H#+=MG35<svi$PIFsXp|yy$z>oMZ73pF6i6UY
z406SUa40Ak#mIf5p+*o51_M(6U-&;AHoNcbZngV5JCpp<_qsE)GygX`@B6;_UL<0Q
zDW;fWN?;{>=AbrUFE|K31=~P2$OILPLQjfS8q5Z(KnKto^Z;347dQq!0j-Q$j|D3g
z=lb(tJNN_a1gS<fcfz&>KY|C~?H~rwQ+ZtzyaXnI8DJu4mw=-61O?=XjJqgr{uB5W
ztmFHNpamGf{bLi@0^R`02_o1FieSRepmtH+yc4*}8xMA<(--9MTk9QABVfVmSOgOe
z6!jop12@27Fw~(=itHO;fz$!D0uro}jbL|!7)Tkg7+eAQ;4?55v;<`>b?bsgGWY<-
zIW_PVW*JZkFd1C34C);BGg)B+L4VL4G_mR9DY32ohq3ju5ld*ADBnoUD9|;BfeLrP
zcVM*A?qzTq`~vbouR@F=8Ki>^c8?<Hn8>b+Z2CvRBb&ibRqB=lUBMboO0Itm8uEG-
zuoRr6pd!XcAQ!9!8^LaHoF9nY2laz|0TdSlvL1MalRL`^G>Nl6z9p*=l&34yjecW+
z4`jP2Uz{!Q3<_A!;gPCO_hyc~wp^EMi@<FUf~D)=wzTHs^9|Sm_Ja%HzGbo%9okn0
z)4&-Qf;ElkP%x3#<4knC%YKH??Q!boIh`EjKH!kUM0<JcOI)-sZTe}XV`QN*7y;(f
zt@@smmA{if0}p+PFZ)mttWQ|NGntmn{X9*N88k}MBtjy#6{8XoF<AjV2Y<1Rm^RhI
z7T4-s2$Leb!9&@+!E$iVgJ7LZBz5MX>fk-_dmOQDfszqZ{t>PQSRF&K?nWhh;d=1E
zqkw*^IRC?pGO<OwtE{Y+VVQKY&vq>=kK(Ig5NnRpIf09|xvE&=XX-9iUpmoG`*f|M
zVs+M4pd<+nN??%h<#c+a$37%RHeC^GfsR6@(@)&bP<Aw;x(+PkNp*cjSS5&<q=-{h
zf{r{Nka*Z-MXW!izHVZD$glfso^K{8*E-t7-fuEedXep78L8WK6HENS>#|B>)LHG*
zR}{wRBvuM1mF1$YU(wp@B-kQOO0sC0yQn{mr|NFSdJt>n7B{g<aZ*cpA}*q(xM(LQ
zMQ>U*b|<drw7NFS3Q*oJ<RmM25WGLn9d9}ac2yU#s&GQxEdM{j|JU`{pO_i#!6@)P
zKMYCBoT!UnvYLK#xE4M17-GT(|B52H5~pHZ|A3<H4PDILK@c%G^W)S>Q*t4eM_r|`
z3bx+u29G+klui8O(8RMWA~d4_c`oZq2G2Z2I58=vNc`U8eXGVxOHX9c)^hUWJhmIb
zJy6ZQSxLt`)h6<h$~Kai+@;tGW-%i&e6)R*X`lz`kUt`~xJQ1={IlJ3t9tA3XqIFm
zoQU>rA^Um;yvQWuOs=Z5AaZAmLbz=d?XXv))yKWc>LS_{WnaqrFS7!<m&vL-;3w3b
z$f7moDvJuYM3U<q>LxSVAxS7-aIf0R9M@b%Y9&*9AJgBZzZ_l7jsX-RD%^EC*>h=L
zZ1tFyS-=#h(h;2tlYR3F5p7k;iG-!lgvj9U9P@pMbw8+|=Olu7<#;eMfu~7(n2LFh
u9)Khdf5o5cNN{p^XvH$c6jMxbQT_((y&&`*4>Jb<0000<MNUMnLSTZ%%xoM0

literal 0
HcmV?d00001

diff --git a/cigaradvisor/icons/famous.png b/cigaradvisor/icons/famous.png
new file mode 100644
index 0000000000000000000000000000000000000000..89a37b47199b1c13ad3302f24cd087316abd9886
GIT binary patch
literal 1862
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
AuK)l5

literal 0
HcmV?d00001

diff --git a/cigaradvisor/icons/monster.png b/cigaradvisor/icons/monster.png
new file mode 100644
index 0000000000000000000000000000000000000000..c278e7a9da4b190b458e5afde693d32e36811fa7
GIT binary patch
literal 1640
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

literal 0
HcmV?d00001

diff --git a/cigaradvisor/styles/styles.css b/cigaradvisor/styles/styles.css
index 48340bb9..295b5fe8 100644
--- a/cigaradvisor/styles/styles.css
+++ b/cigaradvisor/styles/styles.css
@@ -141,6 +141,7 @@
 body {
   display: none;
   color: #333;
+  margin: 0;
 }
 
 body.appear {
@@ -195,6 +196,10 @@ a:active, a:hover {
   outline-width: 0;
 }
 
+ul{
+  list-style-type: none;
+}
+
 /* Two-column grid */
 main .section[data-layout="50/50"]{
   padding-left: 0;

From c36ffa227030f36ea014cb63c979823dc71211d8 Mon Sep 17 00:00:00 2001
From: kailasnadh790 <53608019+kailasnadh790@users.noreply.github.com>
Date: Tue, 2 Jan 2024 10:20:21 -0500
Subject: [PATCH 03/24] progress

---
 cigaradvisor/blocks/header/header.css | 72 ++++++++++++++++++---------
 cigaradvisor/blocks/header/header.js  |  4 +-
 2 files changed, 52 insertions(+), 24 deletions(-)

diff --git a/cigaradvisor/blocks/header/header.css b/cigaradvisor/blocks/header/header.css
index c2cc5630..d50c02c6 100644
--- a/cigaradvisor/blocks/header/header.css
+++ b/cigaradvisor/blocks/header/header.css
@@ -42,6 +42,10 @@
     font-size: 0;
 } */
 
+.brand-logo{
+    z-index: 1000;
+}
+
 
 /* arrange top-nav-content horizontally centered */
 .top-nav .top-nav-content{
@@ -81,7 +85,7 @@
     list-style-type: none;
     padding: 0;
     margin: 0;
-    padding-right: 30px;
+    padding-right: 25px;
 }
 
 .top-nav-left ul li{
@@ -95,8 +99,8 @@
 
 .top-nav-left ul li span{
     display: block;
-    width: 20px;
-    height: 20px;
+    width: 25px;
+    height: 25px;
     margin-right: 5px;
 }
 
@@ -137,26 +141,6 @@
     height: 25px;
 }
 
-/* .default-content-wrapper ul li a::before{
-    content: 'ico';
-    color: transparent;
-    background-image: url('/cigaradvisor/images/header/famous.png');
-    background-position: center;
-    background-size: contain;
-    background-repeat: no-repeat;
-    margin-right: 5px;
-    font-size: 16px;
-} */
-
-/* style the second a under default-content-wrapper ul */
-/* .default-content-wrapper ul li:nth-last-child(2) a::before{
-    background-image: url('/cigaradvisor/images/header/auctioneer.png');
-} */
-
-/* .default-content-wrapper ul li:last-child a::before{
-    background-image: url('/cigaradvisor/images/header/monster.png');
-} */
-
 .nav-hamburger {
     display: none;
 }
@@ -167,4 +151,46 @@
 
 .nav-social-links {
     display: none;
+}
+
+/* Primary navigation */
+.primary-nav {
+    display: flex;
+}
+
+/* hide all nested second level ul elements under .primary-nav */
+.primary-nav ul > li > ul {
+    display: none;
+}
+
+.primary-nav ul{
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    list-style-type: none;
+    padding: 0;
+    margin: 0;
+}
+
+/*apply white transparent background to .primary-nav */
+.primary-nav{
+    background-color: rgba(255, 255, 255, 0.7);
+    border: none;
+    position: static;
+    top: auto;
+    bottom: auto;
+    right: auto;
+    overflow: visible;
+    width: auto;
+    max-width: none;
+    padding-top: 15px;
+    transform: none;
+    transition: none;
+    z-index: auto;
+}
+
+.primary-nav ul{
+    display: flex;
+    max-width: 1080px;
+    margin: 0 auto;
 }
\ No newline at end of file
diff --git a/cigaradvisor/blocks/header/header.js b/cigaradvisor/blocks/header/header.js
index 7607454f..ee7b254e 100644
--- a/cigaradvisor/blocks/header/header.js
+++ b/cigaradvisor/blocks/header/header.js
@@ -116,7 +116,9 @@ export default async function decorate(block) {
   topNavContent.append(topNavRight);
   topNav.append(topNavContent);
   nav.append(topNav);
-  nav.append(fragment.children[0]);
+  const primaryNav = fragment.children[0];
+  primaryNav.className = 'primary-nav';
+  nav.append(primaryNav);
   const navWrapper = document.createElement('div');
   navWrapper.className = 'nav-wrapper';
   navWrapper.append(nav);

From 5b6ce00a635fb27c21f5f84032c784bca9a82adf Mon Sep 17 00:00:00 2001
From: kailasnadh790 <53608019+kailasnadh790@users.noreply.github.com>
Date: Tue, 2 Jan 2024 12:08:19 -0500
Subject: [PATCH 04/24] fixing gap between primary nav and top-nav

---
 cigaradvisor/blocks/header/header.css | 62 +++++++++++++++++++--------
 cigaradvisor/styles/styles.css        |  4 +-
 2 files changed, 45 insertions(+), 21 deletions(-)

diff --git a/cigaradvisor/blocks/header/header.css b/cigaradvisor/blocks/header/header.css
index d50c02c6..63b19a04 100644
--- a/cigaradvisor/blocks/header/header.css
+++ b/cigaradvisor/blocks/header/header.css
@@ -1,7 +1,4 @@
 /* using flex arrange items horizontally and give a black background */
-.nav-wrapper {
-}   
-
 #nav { 
   display: flex;
   flex-direction: column;
@@ -27,21 +24,6 @@
     height: 60px;
 }
 
-/* .brand-logo{
-    position: absolute;
-    left: calc(50% - 80px);
-    top: 0;
-    width: auto;
-    z-index: 1000;
-    float: left;
-    text-align: left;
-    line-height: normal;
-    margin: 0 2em 0 0;
-    height: 42px;
-    max-width: 100%;
-    font-size: 0;
-} */
-
 .brand-logo{
     z-index: 1000;
 }
@@ -156,8 +138,10 @@
 /* Primary navigation */
 .primary-nav {
     display: flex;
+    flex-grow: 1; /* Added flex-grow property */
 }
 
+
 /* hide all nested second level ul elements under .primary-nav */
 .primary-nav ul > li > ul {
     display: none;
@@ -172,7 +156,6 @@
     margin: 0;
 }
 
-/*apply white transparent background to .primary-nav */
 .primary-nav{
     background-color: rgba(255, 255, 255, 0.7);
     border: none;
@@ -193,4 +176,45 @@
     display: flex;
     max-width: 1080px;
     margin: 0 auto;
+    align-items: center;
+    width: 100%;
+    text-align: center;
+}
+
+.primary-nav ul li{
+    display: flex;
+    flex: 0 0 auto;
+    margin-top: 0;
+    font-size: 14px;
+    font-family: open sans,sans-serif;
+    font-weight: 600;
+    color: #141414;
+    cursor: default;
+}
+
+.primary-nav ul li, .primary-nav ul li a{
+    font-family: montserrat,sans-serif;
+  font-weight: 700;
+  text-transform: uppercase;
+  background-color: transparent;
+  border-color: transparent;
+  color: #141414;
+  padding: .65em 0;
+  margin: 0;
+    cursor: pointer;
+    font-size: 14px;
+    position: relative;
+    z-index: 111;
+}
+
+.primary-nav ul li a::after{
+    display: none;
+    content: "";
+    position: absolute;
+    visibility: hidden;
+    bottom: -1px;
+    left: 0;
+    right: 0;
+    height: 1px;
+    background-color: #fff;
 }
\ No newline at end of file
diff --git a/cigaradvisor/styles/styles.css b/cigaradvisor/styles/styles.css
index 295b5fe8..9752719b 100644
--- a/cigaradvisor/styles/styles.css
+++ b/cigaradvisor/styles/styles.css
@@ -135,7 +135,7 @@
   /* heading sizes */
 
   /* nav height */
-  --nav-height: 64px;
+  --nav-height: 60px;
  }
 
 body {
@@ -150,7 +150,7 @@ body.appear {
 
 header {
   height: var(--nav-height);
-}
+} 
 
 html {
   font-size: 100%;

From 2ffe6ccea6e4f5b7a1086e8fdaf5280b4a5718ff Mon Sep 17 00:00:00 2001
From: kailasnadh790 <53608019+kailasnadh790@users.noreply.github.com>
Date: Tue, 2 Jan 2024 17:18:19 -0500
Subject: [PATCH 05/24] desktop

---
 cigaradvisor/blocks/header/header.css | 154 +++++++++++++++++++-------
 cigaradvisor/blocks/header/header.js  |  28 +++++
 2 files changed, 143 insertions(+), 39 deletions(-)

diff --git a/cigaradvisor/blocks/header/header.css b/cigaradvisor/blocks/header/header.css
index 63b19a04..2892a7a4 100644
--- a/cigaradvisor/blocks/header/header.css
+++ b/cigaradvisor/blocks/header/header.css
@@ -1,8 +1,8 @@
 /* using flex arrange items horizontally and give a black background */
-#nav { 
-  display: flex;
-  flex-direction: column;
-  margin: auto;
+#nav {
+    display: flex;
+    flex-direction: column;
+    margin: auto;
 }
 
 .nav-wrapper p {
@@ -12,46 +12,47 @@
     font-size: 12px;
 }
 
-.default-content-wrapper{
+.default-content-wrapper {
     display: block;
     width: 100%;
 }
 
-.top-nav{
-    background-color:#141414;
+.top-nav {
+    background-color: #141414;
     min-height: 60px;
     align-items: center;
     height: 60px;
 }
 
-.brand-logo{
+.brand-logo {
     z-index: 1000;
 }
 
 
 /* arrange top-nav-content horizontally centered */
-.top-nav .top-nav-content{
+.top-nav .top-nav-content {
     display: flex;
     max-width: 1080px;
     margin: 0 auto;
     height: 100%;
 }
 
-.top-nav-left, .top-nav-right {
+.top-nav-left,
+.top-nav-right {
     width: calc(50% - 80px);
     padding: 0 10px;
     display: flex;
     justify-content: center;
-    
+
 }
 
-.top-nav-left{
+.top-nav-left {
     float: left;
     justify-content: center;
     align-items: center;
 }
 
-.top-nav-right{
+.top-nav-right {
     float: right;
     justify-content: center;
     align-items: flex-end;
@@ -60,7 +61,7 @@
 
 
 /* arrange li items horizontally under .default-content-wrapper ul */
-.top-nav-left ul{
+.top-nav-left ul {
     display: flex;
     flex-direction: row;
     justify-content: space-between;
@@ -70,7 +71,7 @@
     padding-right: 25px;
 }
 
-.top-nav-left ul li{
+.top-nav-left ul li {
     display: flex;
     flex-direction: row;
     justify-content: space-between;
@@ -79,14 +80,14 @@
     margin: 0;
 }
 
-.top-nav-left ul li span{
+.top-nav-left ul li span {
     display: block;
     width: 25px;
     height: 25px;
     margin-right: 5px;
 }
 
-.top-nav-right ul{
+.top-nav-right ul {
     display: flex;
     margin: 0;
     padding: 0;
@@ -94,7 +95,7 @@
     top: 5px;
 }
 
-.top-nav-right ul li{
+.top-nav-right ul li {
     flex: 0 0 auto;
     margin: 0 8px;
     font-weight: 400;
@@ -106,19 +107,19 @@
     font-size: 24px;
 }
 
-.top-nav-right .default-content-wrapper{
+.top-nav-right .default-content-wrapper {
     width: auto;
 }
 
 
-.default-content-wrapper ul a{
+.default-content-wrapper ul a {
     text-transform: uppercase;
     color: #fff;
     font-size: 14px;
     font-weight: 400;
 }
 
-.top-nav-right ul li img{
+.top-nav-right ul li img {
     width: 25px;
     height: 25px;
 }
@@ -138,25 +139,26 @@
 /* Primary navigation */
 .primary-nav {
     display: flex;
-    flex-grow: 1; /* Added flex-grow property */
+    flex-grow: 1;
+    /* Added flex-grow property */
 }
 
 
 /* hide all nested second level ul elements under .primary-nav */
-.primary-nav ul > li > ul {
+.primary-nav ul>li>ul {
     display: none;
 }
 
-.primary-nav ul{
+.primary-nav ul {
     display: flex;
     flex-direction: row;
-    justify-content: space-between;
+    justify-content: center;
     list-style-type: none;
     padding: 0;
     margin: 0;
 }
 
-.primary-nav{
+.primary-nav {
     background-color: rgba(255, 255, 255, 0.7);
     border: none;
     position: static;
@@ -172,7 +174,7 @@
     z-index: auto;
 }
 
-.primary-nav ul{
+.primary-nav ul {
     display: flex;
     max-width: 1080px;
     margin: 0 auto;
@@ -181,33 +183,43 @@
     text-align: center;
 }
 
-.primary-nav ul li{
+.primary-nav ul li {
     display: flex;
     flex: 0 0 auto;
     margin-top: 0;
     font-size: 14px;
-    font-family: open sans,sans-serif;
+    font-family: open sans, sans-serif;
     font-weight: 600;
     color: #141414;
     cursor: default;
 }
 
-.primary-nav ul li, .primary-nav ul li a{
-    font-family: montserrat,sans-serif;
-  font-weight: 700;
-  text-transform: uppercase;
-  background-color: transparent;
-  border-color: transparent;
-  color: #141414;
-  padding: .65em 0;
-  margin: 0;
+.primary-nav ul li,
+.primary-nav ul li a {
+    padding: 10px 15px;
+    font-family: montserrat, sans-serif;
+    font-weight: 700;
+    text-transform: uppercase;
+    background-color: transparent;
+    border: 2px solid transparent;
+    color: #141414;
+    margin: 0;
     cursor: pointer;
     font-size: 14px;
     position: relative;
     z-index: 111;
 }
 
-.primary-nav ul li a::after{
+.primary-nav ul li>a:hover,
+.nav-drop:hover {
+    border-color: #8e7b5c;
+}
+
+.primary-nav ul li:last-child a:hover {
+    border: 2px solid transparent;
+}
+
+.primary-nav ul li a::after {
     display: none;
     content: "";
     position: absolute;
@@ -217,4 +229,68 @@
     right: 0;
     height: 1px;
     background-color: #fff;
+}
+
+.nav-drop::after {
+    font-size: 16px;
+    content: '\f107';
+    font-family: FontAwesome, Arial, sans-serif;
+    /* Added Arial and sans-serif as fallback options */
+    margin-left: 10px;
+}
+
+/* Secondary navigation */
+.secondary-nav-box{
+    display: none;
+    background-color: #fff;
+    border: 2px solid #8e7b5c;
+    left: 0;
+    right: 0;
+    width: 100%;
+    max-width: 1080px;
+    margin-left: auto;
+    margin-right: auto;
+    z-index: 110;
+}
+
+.secondary-nav-box ul {
+    column-count: 3;
+    width: 100%;
+    padding: 3em;
+}
+
+.secondary-nav-box.browse-categories ul li {
+    line-height: 2;
+    font-size: 14px;
+    font-family: open sans, sans-serif;
+    font-weight: 600;
+    color: #141414;
+    cursor: default;
+}
+
+.secondary-nav-box.browse-categories ul li a {
+    color: #8e7b5c;
+    font-size: 16px;
+    text-transform: uppercase;
+    font-family: montserrat, sans-serif;
+    font-weight: 600;
+}
+
+/* when li has a 'span with img' and 'a' as children, arrange them vertically left aligned*/
+.secondary-nav-box ul li span img,  .secondary-nav-box.shop-cigars ul li a {
+    display: block;
+    text-align: center;
+}
+
+.secondary-nav-box.shop-cigars ul li a {
+    margin: 14px 0;
+}
+
+.secondary-nav-box.shop-cigars ul {
+    padding: 16px;
+}
+
+/* make above img centered */
+.secondary-nav-box ul li span img {
+    margin: 0 auto;
 }
\ No newline at end of file
diff --git a/cigaradvisor/blocks/header/header.js b/cigaradvisor/blocks/header/header.js
index ee7b254e..4380ded6 100644
--- a/cigaradvisor/blocks/header/header.js
+++ b/cigaradvisor/blocks/header/header.js
@@ -119,8 +119,36 @@ export default async function decorate(block) {
   const primaryNav = fragment.children[0];
   primaryNav.className = 'primary-nav';
   nav.append(primaryNav);
+  // add nav-drop class to nav items with dropdowns
+  primaryNav.querySelectorAll('li').forEach((li) => {
+    if (li.querySelector('ul')) {
+      const secondaryNavBox = document.createElement('div');
+      const text = li.childNodes[0].textContent;
+      const textToClass = text.trim().toLowerCase().replace(/\s/g, '-');
+      secondaryNavBox.className = `secondary-nav-box ${textToClass}`;
+      secondaryNavBox.append(li.querySelector('ul'));
+      li.className = 'nav-drop';
+      li.setAttribute('data-secondarynav', textToClass);
+      nav.append(secondaryNavBox);
+    }
+  });
   const navWrapper = document.createElement('div');
   navWrapper.className = 'nav-wrapper';
   navWrapper.append(nav);
   block.append(navWrapper);
+
+  // create a click event to show secondaynavbox based on textToClass
+  const navDrops = nav.querySelectorAll('.nav-drop');
+  navDrops.forEach((drop) => {
+    drop.addEventListener('click', () => {
+      const secondaryNavBox = document.querySelectorAll('.secondary-nav-box');
+      // hide all secondary nav boxes
+      secondaryNavBox.forEach((box) => {
+        box.style.display = 'none';
+      });
+      const targetSecondaryNavClass = drop.dataset.secondarynav;
+      const targetSecondaryNavBox = document.querySelector(`.${targetSecondaryNavClass}`);
+      targetSecondaryNavBox.style.display = 'block';
+    });
+  });
 }

From 4d71e99629b742a274be0fc34732d412f8958f96 Mon Sep 17 00:00:00 2001
From: kailasnadh790 <53608019+kailasnadh790@users.noreply.github.com>
Date: Tue, 2 Jan 2024 21:40:20 -0500
Subject: [PATCH 06/24] Update header.js

---
 cigaradvisor/blocks/header/header.js | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/cigaradvisor/blocks/header/header.js b/cigaradvisor/blocks/header/header.js
index 4380ded6..4d2d40c7 100644
--- a/cigaradvisor/blocks/header/header.js
+++ b/cigaradvisor/blocks/header/header.js
@@ -128,6 +128,7 @@ export default async function decorate(block) {
       secondaryNavBox.className = `secondary-nav-box ${textToClass}`;
       secondaryNavBox.append(li.querySelector('ul'));
       li.className = 'nav-drop';
+      li.setAttribute('aria-expanded', 'false');
       li.setAttribute('data-secondarynav', textToClass);
       nav.append(secondaryNavBox);
     }
@@ -137,18 +138,25 @@ export default async function decorate(block) {
   navWrapper.append(nav);
   block.append(navWrapper);
 
-  // create a click event to show secondaynavbox based on textToClass
   const navDrops = nav.querySelectorAll('.nav-drop');
   navDrops.forEach((drop) => {
     drop.addEventListener('click', () => {
       const secondaryNavBox = document.querySelectorAll('.secondary-nav-box');
-      // hide all secondary nav boxes
       secondaryNavBox.forEach((box) => {
         box.style.display = 'none';
       });
+      navDrops.forEach((d) => {
+        d.setAttribute('aria-expanded', 'false');
+      });
       const targetSecondaryNavClass = drop.dataset.secondarynav;
       const targetSecondaryNavBox = document.querySelector(`.${targetSecondaryNavClass}`);
-      targetSecondaryNavBox.style.display = 'block';
+      if (drop.getAttribute('aria-expanded') === 'false') {
+        targetSecondaryNavBox.style.display = 'block';
+        drop.setAttribute('aria-expanded', 'true');
+      } else {
+        targetSecondaryNavBox.style.display = 'none';
+        drop.setAttribute('aria-expanded', 'false');
+      }
     });
   });
 }

From a73f41d16db188b00e895932b0dad529613b4929 Mon Sep 17 00:00:00 2001
From: kailasnadh790 <53608019+kailasnadh790@users.noreply.github.com>
Date: Wed, 3 Jan 2024 07:53:35 -0500
Subject: [PATCH 07/24] Secondary nav toggle

---
 cigaradvisor/blocks/header/header.js | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/cigaradvisor/blocks/header/header.js b/cigaradvisor/blocks/header/header.js
index 4d2d40c7..8232510d 100644
--- a/cigaradvisor/blocks/header/header.js
+++ b/cigaradvisor/blocks/header/header.js
@@ -146,7 +146,9 @@ export default async function decorate(block) {
         box.style.display = 'none';
       });
       navDrops.forEach((d) => {
-        d.setAttribute('aria-expanded', 'false');
+        if (d !== drop && d.getAttribute('aria-expanded') === 'true') {
+          d.setAttribute('aria-expanded', 'false');
+        }
       });
       const targetSecondaryNavClass = drop.dataset.secondarynav;
       const targetSecondaryNavBox = document.querySelector(`.${targetSecondaryNavClass}`);

From 4961020300b1efeaffcad72bffd675d68771531b Mon Sep 17 00:00:00 2001
From: kailasnadh790 <53608019+kailasnadh790@users.noreply.github.com>
Date: Wed, 3 Jan 2024 12:47:26 -0500
Subject: [PATCH 08/24] desktop complete

---
 .../blocks/article-teaser/article-teaser.css  |   2 +-
 cigaradvisor/blocks/header/header.css         |  85 +++++++++-
 cigaradvisor/blocks/header/header.js          | 106 +++----------
 cigaradvisor/blocks/header/header1.js         | 148 ++++++++++++++++++
 cigaradvisor/styles/styles.css                |  74 ++++++---
 5 files changed, 308 insertions(+), 107 deletions(-)
 create mode 100644 cigaradvisor/blocks/header/header1.js

diff --git a/cigaradvisor/blocks/article-teaser/article-teaser.css b/cigaradvisor/blocks/article-teaser/article-teaser.css
index dd1e6c6e..addeb5c2 100644
--- a/cigaradvisor/blocks/article-teaser/article-teaser.css
+++ b/cigaradvisor/blocks/article-teaser/article-teaser.css
@@ -45,7 +45,7 @@
   font-weight: 600;
   background-color: #3c3a3b;
   font-size: 12px;
-  z-index: 9999;
+  z-index: 999;
   text-decoration: none;
 }
 
diff --git a/cigaradvisor/blocks/header/header.css b/cigaradvisor/blocks/header/header.css
index 2892a7a4..978f6095 100644
--- a/cigaradvisor/blocks/header/header.css
+++ b/cigaradvisor/blocks/header/header.css
@@ -3,6 +3,11 @@
     display: flex;
     flex-direction: column;
     margin: auto;
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    z-index: 1000;
 }
 
 .nav-wrapper p {
@@ -174,6 +179,10 @@
     z-index: auto;
 }
 
+.solid-nav {
+    background-color: #ccc;
+  }
+
 .primary-nav ul {
     display: flex;
     max-width: 1080px;
@@ -231,16 +240,15 @@
     background-color: #fff;
 }
 
-.nav-drop::after {
+.nav-drop:not([data-secondarynav='search-box'])::after {
     font-size: 16px;
     content: '\f107';
     font-family: FontAwesome, Arial, sans-serif;
-    /* Added Arial and sans-serif as fallback options */
     margin-left: 10px;
 }
 
 /* Secondary navigation */
-.secondary-nav-box{
+.secondary-nav-box {
     display: none;
     background-color: #fff;
     border: 2px solid #8e7b5c;
@@ -277,7 +285,8 @@
 }
 
 /* when li has a 'span with img' and 'a' as children, arrange them vertically left aligned*/
-.secondary-nav-box ul li span img,  .secondary-nav-box.shop-cigars ul li a {
+.secondary-nav-box ul li span img,
+.secondary-nav-box.shop-cigars ul li a {
     display: block;
     text-align: center;
 }
@@ -293,4 +302,72 @@
 /* make above img centered */
 .secondary-nav-box ul li span img {
     margin: 0 auto;
+}
+
+.secondary-nav-box.search-box {
+    border: none;
+    left: calc(60%);
+    padding: 0;
+    background-color: transparent;
+    margin-right: 25%;
+}
+
+.secondary-nav-box.search-box form::before {
+    display: none;
+    line-height: 2.5em;
+}
+
+.secondary-nav-box.search-box form::placeholder {
+    color: #141414;
+}
+
+.secondary-nav-box.search-box form {
+    margin-right: 0;
+    float: right;
+    position: relative;
+    top: auto;
+    left: auto;
+    width: 20em;
+    height: auto;
+    font-size: .875em;
+    box-sizing: content-box;
+}
+
+.secondary-nav-box.search-box form label {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border-width: 0;
+    border: 0;
+    display: inline-block;
+}
+
+.secondary-nav-box.search-box form input {
+    width: 100%;
+    padding-left: .8em;
+    padding-right: 2.571em;
+    border-radius: 0;
+    text-transform: capitalize;
+    border: 1px solid #8e7b5c;
+}
+
+.secondary-nav-box.search-box form button {
+    color: #fff;
+    width: auto;
+    background-color: #141414;
+    padding-left: 10px;
+    padding-right: 10px;
+    position: absolute;
+    top: 0;
+    right: 0;
+    height: 2.85rem;
+    line-height: 2.85rem;
+    margin: 0;
+    border: none;
+    border-radius: 0;
 }
\ No newline at end of file
diff --git a/cigaradvisor/blocks/header/header.js b/cigaradvisor/blocks/header/header.js
index 8232510d..f0df97c6 100644
--- a/cigaradvisor/blocks/header/header.js
+++ b/cigaradvisor/blocks/header/header.js
@@ -4,88 +4,6 @@ import { loadFragment } from '../fragment/fragment.js';
 // media query match that indicates mobile/tablet width
 const isDesktop = window.matchMedia('(min-width: 900px)');
 
-function closeOnEscape(e) {
-  if (e.code === 'Escape') {
-    const nav = document.getElementById('nav');
-    const navSections = nav.querySelector('.nav-sections');
-    const navSectionExpanded = navSections.querySelector('[aria-expanded="true"]');
-    if (navSectionExpanded && isDesktop.matches) {
-      // eslint-disable-next-line no-use-before-define
-      toggleAllNavSections(navSections);
-      navSectionExpanded.focus();
-    } else if (!isDesktop.matches) {
-      // eslint-disable-next-line no-use-before-define
-      toggleMenu(nav, navSections);
-      nav.querySelector('button').focus();
-    }
-  }
-}
-
-function openOnKeydown(e) {
-  const focused = document.activeElement;
-  const isNavDrop = focused.className === 'nav-drop';
-  if (isNavDrop && (e.code === 'Enter' || e.code === 'Space')) {
-    const dropExpanded = focused.getAttribute('aria-expanded') === 'true';
-    // eslint-disable-next-line no-use-before-define
-    toggleAllNavSections(focused.closest('.nav-sections'));
-    focused.setAttribute('aria-expanded', dropExpanded ? 'false' : 'true');
-  }
-}
-
-function focusNavSection() {
-  document.activeElement.addEventListener('keydown', openOnKeydown);
-}
-
-/**
- * Toggles all nav sections
- * @param {Element} sections The container element
- * @param {Boolean} expanded Whether the element should be expanded or collapsed
- */
-function toggleAllNavSections(sections, expanded = false) {
-  sections.querySelectorAll('.nav-sections .default-content-wrapper > ul > li').forEach((section) => {
-    section.setAttribute('aria-expanded', expanded);
-  });
-}
-
-/**
- * Toggles the entire nav
- * @param {Element} nav The container element
- * @param {Element} navSections The nav sections within the container element
- * @param {*} forceExpanded Optional param to force nav expand behavior when not null
- */
-function toggleMenu(nav, navSections, forceExpanded = null) {
-  const expanded = forceExpanded !== null ? !forceExpanded : nav.getAttribute('aria-expanded') === 'true';
-  const button = nav.querySelector('.nav-hamburger button');
-  document.body.style.overflowY = (expanded || isDesktop.matches) ? '' : 'hidden';
-  nav.setAttribute('aria-expanded', expanded ? 'false' : 'true');
-  toggleAllNavSections(navSections, expanded || isDesktop.matches ? 'false' : 'true');
-  button.setAttribute('aria-label', expanded ? 'Open navigation' : 'Close navigation');
-  // enable nav dropdown keyboard accessibility
-  const navDrops = navSections.querySelectorAll('.nav-drop');
-  if (isDesktop.matches) {
-    navDrops.forEach((drop) => {
-      if (!drop.hasAttribute('tabindex')) {
-        drop.setAttribute('role', 'button');
-        drop.setAttribute('tabindex', 0);
-        drop.addEventListener('focus', focusNavSection);
-      }
-    });
-  } else {
-    navDrops.forEach((drop) => {
-      drop.removeAttribute('role');
-      drop.removeAttribute('tabindex');
-      drop.removeEventListener('focus', focusNavSection);
-    });
-  }
-  // enable menu collapse on escape keypress
-  if (!expanded || isDesktop.matches) {
-    // collapse menu on escape press
-    window.addEventListener('keydown', closeOnEscape);
-  } else {
-    window.removeEventListener('keydown', closeOnEscape);
-  }
-}
-
 /**
  * decorates the header, mainly the nav
  * @param {Element} block The header block element
@@ -100,6 +18,7 @@ export default async function decorate(block) {
   nav.id = 'nav';
   const topNav = document.createElement('div');
   topNav.className = 'top-nav';
+
   const topNavContent = document.createElement('div');
   topNavContent.className = 'top-nav-content';
   const topNavLeft = fragment.children[0];
@@ -119,6 +38,17 @@ export default async function decorate(block) {
   const primaryNav = fragment.children[0];
   primaryNav.className = 'primary-nav';
   nav.append(primaryNav);
+
+  // on scroll down equal to primaryNav height, set class "solid-nav" to primaryNav
+  const navHeight = 60;
+  window.addEventListener('scroll', () => {
+    if (window.scrollY > navHeight) {
+      primaryNav.classList.add('solid-nav');
+    } else {
+      primaryNav.classList.remove('solid-nav');
+    }
+  });
+
   // add nav-drop class to nav items with dropdowns
   primaryNav.querySelectorAll('li').forEach((li) => {
     if (li.querySelector('ul')) {
@@ -133,6 +63,18 @@ export default async function decorate(block) {
       nav.append(secondaryNavBox);
     }
   });
+  const lastChild = primaryNav.querySelector('li:last-child');
+  lastChild.className = 'nav-drop';
+  lastChild.setAttribute('data-secondarynav', 'search-box');
+  lastChild.setAttribute('aria-expanded', 'false');
+  const searchBox = document.createElement('div');
+  searchBox.className = 'secondary-nav-box search-box';
+  searchBox.innerHTML = `<form action="https://www.famous-smoke.com/cigaradvisor/" class="search search--header lg-andUp">
+  <label class="sr-only" for="header-search-term">Search</label>
+  <input type="search" class="search__input predictiveSearch" id="header-search-term" maxlength="255" placeholder="Search here" name="s" autocomplete="off">
+  <button type="submit" class="search__submit" value="Submit" title="Submit">Submit</button>
+  </form>`;
+  nav.append(searchBox);
   const navWrapper = document.createElement('div');
   navWrapper.className = 'nav-wrapper';
   navWrapper.append(nav);
diff --git a/cigaradvisor/blocks/header/header1.js b/cigaradvisor/blocks/header/header1.js
new file mode 100644
index 00000000..26739a0b
--- /dev/null
+++ b/cigaradvisor/blocks/header/header1.js
@@ -0,0 +1,148 @@
+import { getMetadata } from '../../scripts/aem.js';
+import { loadFragment } from '../fragment/fragment.js';
+
+// media query match that indicates mobile/tablet width
+const isDesktop = window.matchMedia('(min-width: 900px)');
+
+function closeOnEscape(e) {
+  if (e.code === 'Escape') {
+    const nav = document.getElementById('nav');
+    const navSections = nav.querySelector('.nav-sections');
+    const navSectionExpanded = navSections.querySelector('[aria-expanded="true"]');
+    if (navSectionExpanded && isDesktop.matches) {
+      // eslint-disable-next-line no-use-before-define
+      toggleAllNavSections(navSections);
+      navSectionExpanded.focus();
+    } else if (!isDesktop.matches) {
+      // eslint-disable-next-line no-use-before-define
+      toggleMenu(nav, navSections);
+      nav.querySelector('button').focus();
+    }
+  }
+}
+
+function openOnKeydown(e) {
+  const focused = document.activeElement;
+  const isNavDrop = focused.className === 'nav-drop';
+  if (isNavDrop && (e.code === 'Enter' || e.code === 'Space')) {
+    const dropExpanded = focused.getAttribute('aria-expanded') === 'true';
+    // eslint-disable-next-line no-use-before-define
+    toggleAllNavSections(focused.closest('.nav-sections'));
+    focused.setAttribute('aria-expanded', dropExpanded ? 'false' : 'true');
+  }
+}
+
+function focusNavSection() {
+  document.activeElement.addEventListener('keydown', openOnKeydown);
+}
+
+/**
+ * Toggles all nav sections
+ * @param {Element} sections The container element
+ * @param {Boolean} expanded Whether the element should be expanded or collapsed
+ */
+function toggleAllNavSections(sections, expanded = false) {
+  sections.querySelectorAll('.nav-sections .default-content-wrapper > ul > li').forEach((section) => {
+    section.setAttribute('aria-expanded', expanded);
+  });
+}
+
+/**
+ * Toggles the entire nav
+ * @param {Element} nav The container element
+ * @param {Element} navSections The nav sections within the container element
+ * @param {*} forceExpanded Optional param to force nav expand behavior when not null
+ */
+function toggleMenu(nav, navSections, forceExpanded = null) {
+  const expanded = forceExpanded !== null ? !forceExpanded : nav.getAttribute('aria-expanded') === 'true';
+  const button = nav.querySelector('.nav-hamburger button');
+  document.body.style.overflowY = (expanded || isDesktop.matches) ? '' : 'hidden';
+  nav.setAttribute('aria-expanded', expanded ? 'false' : 'true');
+  toggleAllNavSections(navSections, expanded || isDesktop.matches ? 'false' : 'true');
+  button.setAttribute('aria-label', expanded ? 'Open navigation' : 'Close navigation');
+  // enable nav dropdown keyboard accessibility
+  const navDrops = navSections.querySelectorAll('.nav-drop');
+  if (isDesktop.matches) {
+    navDrops.forEach((drop) => {
+      if (!drop.hasAttribute('tabindex')) {
+        drop.setAttribute('role', 'button');
+        drop.setAttribute('tabindex', 0);
+        drop.addEventListener('focus', focusNavSection);
+      }
+    });
+  } else {
+    navDrops.forEach((drop) => {
+      drop.removeAttribute('role');
+      drop.removeAttribute('tabindex');
+      drop.removeEventListener('focus', focusNavSection);
+    });
+  }
+  // enable menu collapse on escape keypress
+  if (!expanded || isDesktop.matches) {
+    // collapse menu on escape press
+    window.addEventListener('keydown', closeOnEscape);
+  } else {
+    window.removeEventListener('keydown', closeOnEscape);
+  }
+}
+
+/**
+ * decorates the header, mainly the nav
+ * @param {Element} block The header block element
+ */
+export default async function decorate(block) {
+  // load nav as fragment
+  const navMeta = getMetadata('nav');
+  const navPath = navMeta ? new URL(navMeta).pathname : '/cigaradvisor/nav';
+  const fragment = await loadFragment(navPath);
+
+  // decorate nav DOM
+  const nav = document.createElement('nav');
+  nav.id = 'nav';
+  while (fragment.firstElementChild) nav.append(fragment.firstElementChild);
+
+  const classes = ['brand', 'sections', 'tools'];
+  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');
+  if (brandLink) {
+    brandLink.className = '';
+    brandLink.closest('.button-container').className = '';
+  }
+
+  const navSections = nav.querySelector('.nav-sections');
+  if (navSections) {
+    navSections.querySelectorAll(':scope .default-content-wrapper > ul > li').forEach((navSection) => {
+      if (navSection.querySelector('ul')) navSection.classList.add('nav-drop');
+      navSection.addEventListener('click', () => {
+        if (isDesktop.matches) {
+          const expanded = navSection.getAttribute('aria-expanded') === 'true';
+          toggleAllNavSections(navSections);
+          navSection.setAttribute('aria-expanded', expanded ? 'false' : 'true');
+        }
+      });
+    });
+  }
+
+  // hamburger for mobile
+  const hamburger = document.createElement('div');
+  hamburger.classList.add('nav-hamburger');
+  hamburger.innerHTML = `<button type="button" aria-controls="nav" aria-label="Open navigation">
+      <span class="nav-hamburger-icon"></span>
+    </button>`;
+  hamburger.addEventListener('click', () => toggleMenu(nav, navSections));
+  nav.prepend(hamburger);
+  nav.setAttribute('aria-expanded', 'false');
+  // prevent mobile nav behavior on window resize
+  toggleMenu(nav, navSections, isDesktop.matches);
+  isDesktop.addEventListener('change', () => toggleMenu(nav, navSections, isDesktop.matches));
+
+  const navWrapper = document.createElement('div');
+  navWrapper.className = 'nav-wrapper';
+  navWrapper.append(nav);
+  block.append(navWrapper);
+}
\ No newline at end of file
diff --git a/cigaradvisor/styles/styles.css b/cigaradvisor/styles/styles.css
index 9752719b..b64ab8f8 100644
--- a/cigaradvisor/styles/styles.css
+++ b/cigaradvisor/styles/styles.css
@@ -121,14 +121,14 @@
 }
 
 
- :root {
+:root {
   /* colors */
 
   /* fonts */
-   --ff-arial: 'Arial', sans-serif;
-   --ff-opensans: 'Open Sans', 'Open Sans Fallback', sans-serif;
-   --ff-montserrat: 'Montserrat', 'Montserrat Fallback', sans-serif;
-   --ff-alfaslabone: 'Alfa Slab One', 'Alfa Slab One Fallback', cursive;
+  --ff-arial: 'Arial', sans-serif;
+  --ff-opensans: 'Open Sans', 'Open Sans Fallback', sans-serif;
+  --ff-montserrat: 'Montserrat', 'Montserrat Fallback', sans-serif;
+  --ff-alfaslabone: 'Alfa Slab One', 'Alfa Slab One Fallback', cursive;
 
   /* body sizes */
 
@@ -136,7 +136,7 @@
 
   /* nav height */
   --nav-height: 60px;
- }
+}
 
 body {
   display: none;
@@ -150,14 +150,16 @@ body.appear {
 
 header {
   height: var(--nav-height);
-} 
+}
 
 html {
   font-size: 100%;
   line-height: 1.5
 }
 
-*, ::before, ::after{
+*,
+::before,
+::after {
   box-sizing: border-box;
 }
 
@@ -177,13 +179,13 @@ h2 {
   font-size: 12px;
 }
 
-a{
+a {
   font-family: var(--ff-montserrat);
   font-weight: 600;
   color: #141414;
   font-size: 12px;
   background-color: transparent;
-  text-decoration:none
+  text-decoration: none
 }
 
 a:hover {
@@ -192,16 +194,49 @@ a:hover {
   outline-width: 0;
 }
 
-a:active, a:hover {
+a:active,
+a:hover {
   outline-width: 0;
 }
 
-ul{
+ul {
   list-style-type: none;
 }
 
+input {
+  font-size: 1em;
+  font-family: var(--ff-arial);
+  height: 2.85rem;
+  padding: 0 .5em;
+  padding-right: 0.5em;
+  padding-left: 0.5em;
+  outline: none;
+  border: 1px solid;
+  width: 100%;
+  max-width: 100%;
+  vertical-align: middle;
+  background-color: #fff;
+  border-color: #ddd;
+  margin: 0;
+}
+
+button {
+  font-family: montserrat, sans-serif;
+  font-weight: 700;
+  color: #fff;
+  text-transform: uppercase;
+  background-color: #8e7b5c;
+  border-color: #8e7b5c;
+  display: inline-block;
+  line-height: 26px;
+  height: 50px;
+  width: 250px;
+  max-height: 50px;
+  max-width: 250px;
+}
+
 /* Two-column grid */
-main .section[data-layout="50/50"]{
+main .section[data-layout="50/50"] {
   padding-left: 0;
   padding-right: 0;
   width: 100%;
@@ -212,24 +247,23 @@ main .section[data-layout="50/50"]{
   display: flex;
 }
 
-@media screen and (max-width: 600px){
-  main .section[data-layout="50/50"]{
+@media screen and (max-width: 600px) {
+  main .section[data-layout="50/50"] {
     width: 100%;
     flex-direction: column;
   }
 }
 
-main .section[data-layout="50/50"] > div {
+main .section[data-layout="50/50"]>div {
   display: flex;
   flex-basis: 100%;
   flex-direction: column;
 }
 
-main .section[data-layout="50/50"] .left-grid > div{
+main .section[data-layout="50/50"] .left-grid>div {
   padding: 10px;
 }
 
-main .section[data-layout="50/50"] .right-grid > div{
+main .section[data-layout="50/50"] .right-grid>div {
   padding: 10px;
-}
-
+}
\ No newline at end of file

From 5ae78404d4013a08ff44fc4b19c61a372e7d870a Mon Sep 17 00:00:00 2001
From: kailasnadh790 <53608019+kailasnadh790@users.noreply.github.com>
Date: Thu, 4 Jan 2024 11:08:45 -0500
Subject: [PATCH 09/24] mobile initial

---
 cigaradvisor/blocks/header/header.css | 206 ++++++++++++++++++++++++--
 cigaradvisor/blocks/header/header.js  |  79 +++++++++-
 cigaradvisor/styles/lazy-styles.css   |   2 +-
 cigaradvisor/styles/styles.css        |   8 +
 4 files changed, 277 insertions(+), 18 deletions(-)

diff --git a/cigaradvisor/blocks/header/header.css b/cigaradvisor/blocks/header/header.css
index 978f6095..fb8fc69d 100644
--- a/cigaradvisor/blocks/header/header.css
+++ b/cigaradvisor/blocks/header/header.css
@@ -1,13 +1,6 @@
 /* using flex arrange items horizontally and give a black background */
-#nav {
-    display: flex;
-    flex-direction: column;
-    margin: auto;
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    z-index: 1000;
+nav {
+    display: none;
 }
 
 .nav-wrapper p {
@@ -129,10 +122,6 @@
     height: 25px;
 }
 
-.nav-hamburger {
-    display: none;
-}
-
 .nav-primary-nav {
     display: none;
 }
@@ -181,7 +170,7 @@
 
 .solid-nav {
     background-color: #ccc;
-  }
+}
 
 .primary-nav ul {
     display: flex;
@@ -203,7 +192,6 @@
     cursor: default;
 }
 
-.primary-nav ul li,
 .primary-nav ul li a {
     padding: 10px 15px;
     font-family: montserrat, sans-serif;
@@ -240,7 +228,7 @@
     background-color: #fff;
 }
 
-.nav-drop:not([data-secondarynav='search-box'])::after {
+.nav-drop:not([data-secondarynav='search-box']) span::after {
     font-size: 16px;
     content: '\f107';
     font-family: FontAwesome, Arial, sans-serif;
@@ -370,4 +358,190 @@
     margin: 0;
     border: none;
     border-radius: 0;
+}
+
+/* Mobile navigation */
+.mobile-nav {
+    height: 100%;
+}
+/* set white solid background for .mobile-primary-nav-wrapper */
+.mobile-primary-nav-wrapper {
+    background-color: #fff;
+    width: 100%;
+    height: 100%;
+    margin-left: auto;
+    margin-right: auto;
+    z-index: 110;
+    padding: 10px;
+    display: flex;
+    flex-direction: column;
+    top: 6em;
+    border-right: 1px solid #ddd;
+    bottom: 0;
+    right: 100%;
+    overflow: auto;
+    transition: transform .3s ease-in-out,-webkit-transform .3s ease-in-out;
+}
+
+.mobile-primary-nav-wrapper.nav-content-open{
+    transform: translate3d(-100%,0,0);}
+
+.mobile-primary-nav-wrapper > * {
+    flex: 0 0 auto;
+}
+
+.mobile-nav{
+    display: flex;
+        flex-direction: column;
+        margin: auto;
+        position: fixed;
+        top: 0;
+        left: 0;
+        right: 0;
+        z-index: 1000;
+}
+
+.mobile-top-nav {
+    padding: 0 10px;
+    overflow: hidden;
+    background-color: #141414;
+}
+
+.mobile-top-nav .default-content-wrapper {
+    display: flex;
+}
+
+.mobile-top-nav .default-content-wrapper ul {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    list-style-type: none;
+    padding: 0;
+    margin: 0;
+    width: 65%;
+    min-height: 30px;
+}
+
+.mobile-top-nav .default-content-wrapper p {
+   width: 35%;
+}
+
+.mobile-top-nav .default-content-wrapper ul li {
+  margin: 2px;
+  flex: 1 1 auto;
+  border-left: 1px solid #8e7b5c;
+  justify-content: center;
+  display: flex;
+}
+
+.mobile-top-nav .default-content-wrapper ul li a{
+    margin: 0 auto;
+    width: 30px;
+    height: 25px;
+}
+
+.mobile-primary-nav {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    list-style-type: none;
+    margin: 0;
+    width: 100%;
+    background-color: rgb(255, 255, 255);
+    padding: 20px 0 5px;
+}
+
+.mobile-primary-nav .nav-hamburger, .search{
+    width: 1.25em;
+    height: 1.25em;
+    font-size: 2em;
+    text-align: center;
+    color: #333;
+}
+
+.nav-hamburger i::before {
+    content: "\f0c9"; 
+    color: #8e7b5c;
+}
+
+.fa-search::before {
+    content: "\f002";
+    color: #8e7b5c;
+}
+
+/* mobile primary nav */
+.mobile-primary-nav-content{
+    display: flex;
+    flex: 0 0 auto;
+    flex-direction: row;
+    justify-content: space-between;
+    list-style-type: none;
+    margin: 0;
+    width: 100%;
+    padding-top: 15px;
+}
+
+.mobile-primary-nav-content ul{
+    list-style: none;
+    margin: 5px auto;
+    width: 100%;
+    background-color: rgb(255, 255, 255);
+    padding: 0 15px;
+}
+
+.mobile-primary-nav-content ul li{
+    display: block;
+    align-items: center;
+    border-bottom: 1px solid #d3d3d3;
+    min-height: 3.5rem;
+    font-family: --var(ff-open-sans);
+    font-weight: 600;
+    color: #141414;
+    font-size: 12px;
+    cursor: default;
+}
+
+/* align the a tag in the above li vertically centered */
+.mobile-primary-nav-content ul li a{
+    background-color: transparent;
+    align-items: center;
+    border: none;
+    text-transform: uppercase;
+    position: relative;
+    color: #141414;
+    line-height: 2.5em;
+    padding: 0 .3em 0 0;
+    text-align: left;
+    font-weight: 700;
+    cursor: pointer;
+    margin: 0 auto;
+}
+
+.mobile-primary-nav-content ul li:last-child {
+    display: none;
+}
+
+.mobile-primary-nav-content ul>li>ul {
+    display: none;
+}
+
+.mobile-primary-nav-wrapper .mobile-social-nav ul {
+    display: flex;
+}
+
+@media screen and (min-width: 900px) {
+    nav {
+        display: flex;
+        flex-direction: column;
+        margin: auto;
+        position: fixed;
+        top: 0;
+        left: 0;
+        right: 0;
+        z-index: 1000;
+    }
+
+    .mobile-nav {
+        display: none;
+    }
 }
\ No newline at end of file
diff --git a/cigaradvisor/blocks/header/header.js b/cigaradvisor/blocks/header/header.js
index f0df97c6..2c3819c6 100644
--- a/cigaradvisor/blocks/header/header.js
+++ b/cigaradvisor/blocks/header/header.js
@@ -16,12 +16,61 @@ export default async function decorate(block) {
   // decorate nav DOM
   const nav = document.createElement('nav');
   nav.id = 'nav';
+
+  // add a separate div for mobile nav
+  const mobileNav = document.createElement('div');
+  mobileNav.className = 'mobile-nav';
+
   const topNav = document.createElement('div');
   topNav.className = 'top-nav';
 
+  const mobileTopNav = document.createElement('div');
+  mobileTopNav.className = 'mobile-top-nav';
+
+  mobileNav.append(mobileTopNav);
+
   const topNavContent = document.createElement('div');
   topNavContent.className = 'top-nav-content';
   const topNavLeft = fragment.children[0];
+
+  //make a copy of topNavLeft for mobile
+  const mobileTopNavContent = topNavLeft.cloneNode(true);
+
+  mobileTopNavContent.querySelectorAll('li').forEach((li) => {
+    const link = li.querySelector('a').getAttribute('href');
+    li.querySelector('a').remove();
+    const a = document.createElement('a');
+    a.setAttribute('href', link);
+    a.innerHTML = li.innerHTML;
+    li.innerHTML = '';
+    li.append(a);
+  });
+
+  mobileTopNavContent.class = "mobile-top-nav-content";
+  mobileTopNav.append(mobileTopNavContent);
+
+  const mobilePrimaryNav = document.createElement('div');
+  mobilePrimaryNav.className = 'mobile-primary-nav';
+  const hamburger = document.createElement('a');
+  hamburger.classList.add('nav-hamburger');
+  hamburger.setAttribute('href', '#');
+  hamburger.setAttribute('title', 'Toggle navigation');
+  hamburger.innerHTML = `<i class="fa fa-bars"></i>`;
+  mobilePrimaryNav.append(hamburger);
+  const mobileLogo = document.createElement('a');
+  mobileLogo.className = 'mobile-logo';
+  mobileLogo.setAttribute('href', 'https://www.famous-smoke.com/cigaradvisor');
+  mobileLogo.setAttribute('title', 'Cigar Advisor Homepage');
+  mobileLogo.innerHTML = `<img src="https://www.famous-smoke.com/cigaradvisor/wp-content/themes/CigarAdvisor/assets/images/logo1.png" alt="Cigar Advisor Logo">`;
+  mobilePrimaryNav.append(mobileLogo);
+  const search = document.createElement('a');
+  search.className = 'search';
+  search.setAttribute('href', 'https://www.famous-smoke.com/cigaradvisor/?s=');
+  search.setAttribute('title', 'Search');
+  search.innerHTML = `<i class="fa fa-search"></i>`;
+  mobilePrimaryNav.append(search);
+  mobileNav.append(mobilePrimaryNav);
+
   topNavLeft.classList.add('top-nav-left');
   topNavContent.append(topNavLeft);
   const brand = document.createElement('div');
@@ -31,6 +80,9 @@ export default async function decorate(block) {
   brand.className = 'brand-logo';
   topNavContent.append(brand);
   const topNavRight = fragment.children[0];
+  //create a clone of topNavRight for mobile
+  const socialNavMobile = topNavRight.cloneNode(true);
+  socialNavMobile.className = 'mobile-social-nav';
   topNavRight.classList.add('top-nav-right');
   topNavContent.append(topNavRight);
   topNav.append(topNavContent);
@@ -39,6 +91,11 @@ export default async function decorate(block) {
   primaryNav.className = 'primary-nav';
   nav.append(primaryNav);
 
+  //toggle nav-content-open class on mobilePrimaryNavWrapper when hamburger is clicked default is with class nav-content-open
+  hamburger.addEventListener('click', () => {
+    mobilePrimaryNavWrapper.classList.toggle('nav-content-open');
+  });
+
   // on scroll down equal to primaryNav height, set class "solid-nav" to primaryNav
   const navHeight = 60;
   window.addEventListener('scroll', () => {
@@ -49,11 +106,18 @@ export default async function decorate(block) {
     }
   });
 
+  const mobilePrimaryNavContent = document.createElement('div');
+  mobilePrimaryNavContent.className = 'mobile-primary-nav-content';
+
   // add nav-drop class to nav items with dropdowns
-  primaryNav.querySelectorAll('li').forEach((li) => {
+  primaryNav.querySelectorAll('.default-content-wrapper > ul > li').forEach((li) => {
     if (li.querySelector('ul')) {
+      const a = document.createElement('a');
+      a.setAttribute('href', '#');
       const secondaryNavBox = document.createElement('div');
       const text = li.childNodes[0].textContent;
+      a.innerHTML = `<span> ${text} </span>`;
+      li.childNodes[0].textContent = '';
       const textToClass = text.trim().toLowerCase().replace(/\s/g, '-');
       secondaryNavBox.className = `secondary-nav-box ${textToClass}`;
       secondaryNavBox.append(li.querySelector('ul'));
@@ -61,8 +125,20 @@ export default async function decorate(block) {
       li.setAttribute('aria-expanded', 'false');
       li.setAttribute('data-secondarynav', textToClass);
       nav.append(secondaryNavBox);
+      li.append(a);
+      mobilePrimaryNavContent.append(li.cloneNode(true));
+      mobilePrimaryNavContent.append(secondaryNavBox.cloneNode(true));
+    } else {
+      mobilePrimaryNavContent.append(li.cloneNode(true));
     }
   });
+
+  const mobilePrimaryNavWrapper = document.createElement('div');
+  mobilePrimaryNavWrapper.className = 'mobile-primary-nav-wrapper nav-content-open';
+  mobilePrimaryNavWrapper.append(mobilePrimaryNavContent);
+  mobilePrimaryNavWrapper.append(socialNavMobile);
+  mobileNav.append(mobilePrimaryNavWrapper);
+
   const lastChild = primaryNav.querySelector('li:last-child');
   lastChild.className = 'nav-drop';
   lastChild.setAttribute('data-secondarynav', 'search-box');
@@ -78,6 +154,7 @@ export default async function decorate(block) {
   const navWrapper = document.createElement('div');
   navWrapper.className = 'nav-wrapper';
   navWrapper.append(nav);
+  navWrapper.append(mobileNav);
   block.append(navWrapper);
 
   const navDrops = nav.querySelectorAll('.nav-drop');
diff --git a/cigaradvisor/styles/lazy-styles.css b/cigaradvisor/styles/lazy-styles.css
index 3cb30e9c..bd0ef008 100644
--- a/cigaradvisor/styles/lazy-styles.css
+++ b/cigaradvisor/styles/lazy-styles.css
@@ -1 +1 @@
-/* add global styles that can be loaded post LCP here */
\ No newline at end of file
+@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css?ver=5.5.1');
\ No newline at end of file
diff --git a/cigaradvisor/styles/styles.css b/cigaradvisor/styles/styles.css
index b64ab8f8..17f1ded8 100644
--- a/cigaradvisor/styles/styles.css
+++ b/cigaradvisor/styles/styles.css
@@ -203,6 +203,14 @@ ul {
   list-style-type: none;
 }
 
+li {
+  font-family: var(--ff-opensans);
+  font-weight: 600;
+  color: #141414;
+  font-size: 12px;
+  cursor: default;
+}
+
 input {
   font-size: 1em;
   font-family: var(--ff-arial);

From cbb2e24d218868067dc646d391de7370b56e468b Mon Sep 17 00:00:00 2001
From: kailasnadh790 <53608019+kailasnadh790@users.noreply.github.com>
Date: Thu, 4 Jan 2024 14:04:36 -0500
Subject: [PATCH 10/24] mobile complete

---
 cigaradvisor/blocks/header/header.css | 100 ++++++++++++++++++++------
 cigaradvisor/blocks/header/header.js  |  42 +++++++++--
 2 files changed, 115 insertions(+), 27 deletions(-)

diff --git a/cigaradvisor/blocks/header/header.css b/cigaradvisor/blocks/header/header.css
index fb8fc69d..9d0c9264 100644
--- a/cigaradvisor/blocks/header/header.css
+++ b/cigaradvisor/blocks/header/header.css
@@ -207,8 +207,7 @@ nav {
     z-index: 111;
 }
 
-.primary-nav ul li>a:hover,
-.nav-drop:hover {
+.primary-nav ul li>a:hover{
     border-color: #8e7b5c;
 }
 
@@ -236,7 +235,7 @@ nav {
 }
 
 /* Secondary navigation */
-.secondary-nav-box {
+nav .secondary-nav-box {
     display: none;
     background-color: #fff;
     border: 2px solid #8e7b5c;
@@ -249,13 +248,13 @@ nav {
     z-index: 110;
 }
 
-.secondary-nav-box ul {
+nav .secondary-nav-box ul {
     column-count: 3;
     width: 100%;
     padding: 3em;
 }
 
-.secondary-nav-box.browse-categories ul li {
+nav .secondary-nav-box.browse-categories ul li {
     line-height: 2;
     font-size: 14px;
     font-family: open sans, sans-serif;
@@ -264,7 +263,7 @@ nav {
     cursor: default;
 }
 
-.secondary-nav-box.browse-categories ul li a {
+nav .secondary-nav-box.browse-categories ul li a {
     color: #8e7b5c;
     font-size: 16px;
     text-transform: uppercase;
@@ -273,26 +272,26 @@ nav {
 }
 
 /* when li has a 'span with img' and 'a' as children, arrange them vertically left aligned*/
-.secondary-nav-box ul li span img,
-.secondary-nav-box.shop-cigars ul li a {
+nav .secondary-nav-box ul li span img,
+nav .secondary-nav-box.shop-cigars ul li a {
     display: block;
     text-align: center;
 }
 
-.secondary-nav-box.shop-cigars ul li a {
+nav .secondary-nav-box.shop-cigars ul li a {
     margin: 14px 0;
 }
 
-.secondary-nav-box.shop-cigars ul {
+nav .secondary-nav-box.shop-cigars ul {
     padding: 16px;
 }
 
 /* make above img centered */
-.secondary-nav-box ul li span img {
+nav .secondary-nav-box ul li span img {
     margin: 0 auto;
 }
 
-.secondary-nav-box.search-box {
+nav .secondary-nav-box.search-box {
     border: none;
     left: calc(60%);
     padding: 0;
@@ -300,16 +299,16 @@ nav {
     margin-right: 25%;
 }
 
-.secondary-nav-box.search-box form::before {
+nav .secondary-nav-box.search-box form::before {
     display: none;
     line-height: 2.5em;
 }
 
-.secondary-nav-box.search-box form::placeholder {
+nav .secondary-nav-box.search-box form::placeholder {
     color: #141414;
 }
 
-.secondary-nav-box.search-box form {
+nav .secondary-nav-box.search-box form {
     margin-right: 0;
     float: right;
     position: relative;
@@ -321,7 +320,7 @@ nav {
     box-sizing: content-box;
 }
 
-.secondary-nav-box.search-box form label {
+nav .secondary-nav-box.search-box form label {
     position: absolute;
     width: 1px;
     height: 1px;
@@ -335,7 +334,7 @@ nav {
     display: inline-block;
 }
 
-.secondary-nav-box.search-box form input {
+nav .secondary-nav-box.search-box form input {
     width: 100%;
     padding-left: .8em;
     padding-right: 2.571em;
@@ -344,7 +343,7 @@ nav {
     border: 1px solid #8e7b5c;
 }
 
-.secondary-nav-box.search-box form button {
+nav .secondary-nav-box.search-box form button {
     color: #fff;
     width: auto;
     background-color: #141414;
@@ -403,8 +402,8 @@ nav {
 
 .mobile-top-nav {
     padding: 0 10px;
-    overflow: hidden;
     background-color: #141414;
+    height: auto;
 }
 
 .mobile-top-nav .default-content-wrapper {
@@ -500,6 +499,17 @@ nav {
     font-size: 12px;
     cursor: default;
 }
+/* div inside above li is not visible. fix it */
+.mobile-primary-nav-content ul li div{
+    display: flex;
+    flex-direction: column;
+    align-items: left;
+    min-height: 3.5rem;
+    font-family: --var(ff-open-sans);
+    font-weight: 600;
+    color: #141414;
+    font-size: 12px;
+}
 
 /* align the a tag in the above li vertically centered */
 .mobile-primary-nav-content ul li a{
@@ -517,11 +527,17 @@ nav {
     margin: 0 auto;
 }
 
-.mobile-primary-nav-content ul li:last-child {
-    display: none;
+.mobile-primary-nav-content ul li a{
+    position: relative;
+    top: 10px;
+    font-size: 16px;
+}
+
+.mobile-primary-nav-content .nav-drop:not([data-secondarynav='search-box']) span::after {
+    float: right;
 }
 
-.mobile-primary-nav-content ul>li>ul {
+.mobile-primary-nav-content>ul>li:last-child {
     display: none;
 }
 
@@ -529,6 +545,46 @@ nav {
     display: flex;
 }
 
+.mobile-nav .secondary-nav-box ul{
+    padding: 12px 0;
+    margin: 0;
+    border: none;
+}
+
+.mobile-nav .secondary-nav-box ul li{
+    border: none;
+}
+
+.mobile-nav .secondary-nav-box ul li a{
+    border: none;
+    padding: 0.65em 0;
+    color: rgb(20, 20, 20);
+    font-size: 12px;
+}
+
+.mobile-nav .secondary-nav-box ul li span{
+    display: none;
+}
+
+.mobile-social-nav {
+    margin-top: 20px;
+    padding-top: 24px;
+}
+
+.mobile-social-nav ul{
+    display: flex;
+}
+
+.mobile-social-nav ul li{
+    flex: 1 1 auto;
+    margin-right: 10px;
+}
+
+.mobile-social-nav ul li img{
+    height: 36px;
+    width: 36px;
+}
+
 @media screen and (min-width: 900px) {
     nav {
         display: flex;
diff --git a/cigaradvisor/blocks/header/header.js b/cigaradvisor/blocks/header/header.js
index 2c3819c6..3c6ff0e3 100644
--- a/cigaradvisor/blocks/header/header.js
+++ b/cigaradvisor/blocks/header/header.js
@@ -108,9 +108,11 @@ export default async function decorate(block) {
 
   const mobilePrimaryNavContent = document.createElement('div');
   mobilePrimaryNavContent.className = 'mobile-primary-nav-content';
+  const ul = document.createElement('ul');
 
   // add nav-drop class to nav items with dropdowns
   primaryNav.querySelectorAll('.default-content-wrapper > ul > li').forEach((li) => {
+    let mobileLi;
     if (li.querySelector('ul')) {
       const a = document.createElement('a');
       a.setAttribute('href', '#');
@@ -126,13 +128,16 @@ export default async function decorate(block) {
       li.setAttribute('data-secondarynav', textToClass);
       nav.append(secondaryNavBox);
       li.append(a);
-      mobilePrimaryNavContent.append(li.cloneNode(true));
-      mobilePrimaryNavContent.append(secondaryNavBox.cloneNode(true));
+      mobileLi = li.cloneNode(true);
+      mobileLi.append(secondaryNavBox.cloneNode(true));
+      ul.append(mobileLi);
     } else {
-      mobilePrimaryNavContent.append(li.cloneNode(true));
+      mobileLi = li.cloneNode(true);
+      ul.append(mobileLi);
     }
   });
 
+  mobilePrimaryNavContent.append(ul);
   const mobilePrimaryNavWrapper = document.createElement('div');
   mobilePrimaryNavWrapper.className = 'mobile-primary-nav-wrapper nav-content-open';
   mobilePrimaryNavWrapper.append(mobilePrimaryNavContent);
@@ -158,9 +163,10 @@ export default async function decorate(block) {
   block.append(navWrapper);
 
   const navDrops = nav.querySelectorAll('.nav-drop');
+  console.log(navDrops);
   navDrops.forEach((drop) => {
     drop.addEventListener('click', () => {
-      const secondaryNavBox = document.querySelectorAll('.secondary-nav-box');
+      const secondaryNavBox = nav.querySelectorAll('.secondary-nav-box');
       secondaryNavBox.forEach((box) => {
         box.style.display = 'none';
       });
@@ -170,7 +176,33 @@ export default async function decorate(block) {
         }
       });
       const targetSecondaryNavClass = drop.dataset.secondarynav;
-      const targetSecondaryNavBox = document.querySelector(`.${targetSecondaryNavClass}`);
+      const targetSecondaryNavBox = nav.querySelector(`.${targetSecondaryNavClass}`);
+      console.log(targetSecondaryNavBox);
+      if (drop.getAttribute('aria-expanded') === 'false') {
+        targetSecondaryNavBox.style.display = 'block';
+        drop.setAttribute('aria-expanded', 'true');
+      } else {
+        targetSecondaryNavBox.style.display = 'none';
+        drop.setAttribute('aria-expanded', 'false');
+      }
+    });
+  });
+  // do the above for mobile
+  const mobileNavDrops = mobileNav.querySelectorAll('.nav-drop');
+  mobileNavDrops.forEach((drop) => {
+    drop.addEventListener('click', () => {
+      const secondaryNavBox = mobileNav.querySelectorAll('.secondary-nav-box');
+      secondaryNavBox.forEach((box) => {
+        box.style.display = 'none';
+      });
+      mobileNavDrops.forEach((d) => {
+        if (d !== drop && d.getAttribute('aria-expanded') === 'true') {
+          d.setAttribute('aria-expanded', 'false');
+        }
+      });
+      const targetSecondaryNavClass = drop.dataset.secondarynav;
+      const targetSecondaryNavBox = mobileNav.querySelector(`.${targetSecondaryNavClass}`);
+      console.log(targetSecondaryNavBox);
       if (drop.getAttribute('aria-expanded') === 'false') {
         targetSecondaryNavBox.style.display = 'block';
         drop.setAttribute('aria-expanded', 'true');

From c6808ab1072dd8698160ad4bb0c893992effaf79 Mon Sep 17 00:00:00 2001
From: kailasnadh790 <53608019+kailasnadh790@users.noreply.github.com>
Date: Thu, 4 Jan 2024 14:40:47 -0500
Subject: [PATCH 11/24] social icons

---
 cigaradvisor/blocks/header/header.css | 88 +++++++++++++++++++++------
 cigaradvisor/blocks/header/header.js  |  6 +-
 cigaradvisor/scripts/scripts.js       | 19 ++++++
 3 files changed, 91 insertions(+), 22 deletions(-)

diff --git a/cigaradvisor/blocks/header/header.css b/cigaradvisor/blocks/header/header.css
index 9d0c9264..94661736 100644
--- a/cigaradvisor/blocks/header/header.css
+++ b/cigaradvisor/blocks/header/header.css
@@ -57,6 +57,41 @@ nav {
     padding: 10px;
 }
 
+nav .top-nav-right .twitter::before{
+    content: '\e61b';
+    font-family: 'FontAwesome';
+    color: #8e7b5c;
+    font-size: 24px;
+}
+
+nav .top-nav-right .facebook::before{
+    content: '\f39e';
+    font-family: 'FontAwesome';
+    color: #8e7b5c;
+    font-size: 24px;
+}
+
+nav .top-nav-right .instagram::before{
+    content: '\f16d';
+    font-family: 'FontAwesome';
+    color: #8e7b5c;
+    font-size: 24px;
+}
+
+nav .top-nav-right .youtube::before{
+    content: '\f167';
+    font-family: 'FontAwesome';
+    color: #8e7b5c;
+    font-size: 24px;
+}
+
+nav .top-nav-right .pinterest::before{
+    content: '\f231';
+    font-family: 'FontAwesome';
+    color: #8e7b5c;
+    font-size: 24px;
+}
+
 
 /* arrange li items horizontally under .default-content-wrapper ul */
 .top-nav-left ul {
@@ -100,16 +135,10 @@ nav {
     font-size: 14px;
 }
 
-.top-nav-right ul li a span {
-    color: #8e7b5c;
-    font-size: 24px;
-}
-
 .top-nav-right .default-content-wrapper {
     width: auto;
 }
 
-
 .default-content-wrapper ul a {
     text-transform: uppercase;
     color: #fff;
@@ -117,18 +146,6 @@ nav {
     font-weight: 400;
 }
 
-.top-nav-right ul li img {
-    width: 25px;
-    height: 25px;
-}
-
-.nav-primary-nav {
-    display: none;
-}
-
-.nav-social-links {
-    display: none;
-}
 
 /* Primary navigation */
 .primary-nav {
@@ -585,6 +602,41 @@ nav .secondary-nav-box.search-box form button {
     width: 36px;
 }
 
+.mobile-nav .mobile-social-nav .twitter::before{
+    content: '\e61b';
+    font-family: 'FontAwesome';
+    color: #3c3a3b;
+    font-size: 36px;
+}
+
+.mobile-nav .mobile-social-nav .facebook::before{
+    content: '\f39e';
+    font-family: 'FontAwesome';
+    color: #3c3a3b;
+    font-size: 36px;
+}
+
+.mobile-nav .mobile-social-nav .instagram::before{
+    content: '\f16d';
+    font-family: 'FontAwesome';
+    color: #3c3a3b;
+    font-size: 36px;
+}
+
+.mobile-nav .mobile-social-nav .youtube::before{
+    content: '\f167';
+    font-family: 'FontAwesome';
+    color: #3c3a3b;
+    font-size: 36px;
+}
+
+.mobile-nav .mobile-social-nav .pinterest::before{
+    content: '\f231';
+    font-family: 'FontAwesome';
+    color: #3c3a3b;
+    font-size: 36px;
+}
+
 @media screen and (min-width: 900px) {
     nav {
         display: flex;
diff --git a/cigaradvisor/blocks/header/header.js b/cigaradvisor/blocks/header/header.js
index 3c6ff0e3..482f52ef 100644
--- a/cigaradvisor/blocks/header/header.js
+++ b/cigaradvisor/blocks/header/header.js
@@ -1,8 +1,6 @@
 import { getMetadata } from '../../scripts/aem.js';
 import { loadFragment } from '../fragment/fragment.js';
-
-// media query match that indicates mobile/tablet width
-const isDesktop = window.matchMedia('(min-width: 900px)');
+import { decorateSocialLinks } from '../../scripts/scripts.js';
 
 /**
  * decorates the header, mainly the nav
@@ -33,7 +31,6 @@ export default async function decorate(block) {
   topNavContent.className = 'top-nav-content';
   const topNavLeft = fragment.children[0];
 
-  //make a copy of topNavLeft for mobile
   const mobileTopNavContent = topNavLeft.cloneNode(true);
 
   mobileTopNavContent.querySelectorAll('li').forEach((li) => {
@@ -80,6 +77,7 @@ export default async function decorate(block) {
   brand.className = 'brand-logo';
   topNavContent.append(brand);
   const topNavRight = fragment.children[0];
+  decorateSocialLinks(topNavRight);
   //create a clone of topNavRight for mobile
   const socialNavMobile = topNavRight.cloneNode(true);
   socialNavMobile.className = 'mobile-social-nav';
diff --git a/cigaradvisor/scripts/scripts.js b/cigaradvisor/scripts/scripts.js
index fa44ccdb..50069c77 100644
--- a/cigaradvisor/scripts/scripts.js
+++ b/cigaradvisor/scripts/scripts.js
@@ -93,6 +93,11 @@ export function decorateMain(main) {
   buildTwoColumnGrid(main);
 }
 
+/**
+ * Checks if the given path is an external URL.
+ * @param {string} path - The path to be checked.
+ * @returns {boolean} - Returns true if the path is an external URL, false otherwise.
+ */
 export function isExternal(path) {
   try {
     const url = new URL(path);
@@ -102,6 +107,20 @@ export function isExternal(path) {
   }
 }
 
+/**
+ * Decorates social links by adding classes based on their text content.
+ * @param {HTMLElement} element - The element containing the social links.
+ */
+export function decorateSocialLinks(element) {
+  const socialLinks = element.querySelectorAll('a');
+  socialLinks.forEach((link) => {
+    const text = link.textContent;
+    const textToClass = text.trim().toLowerCase().replace(/\s/g, '-');
+    link.classList.add(textToClass);
+    link.textContent = '';
+  });
+}
+
 /**
  * Loads everything needed to get to LCP.
  * @param {Element} doc The container element

From d212dcea08ff4fd4ef32c023b362b6cbbe5e686f Mon Sep 17 00:00:00 2001
From: kailasnadh790 <53608019+kailasnadh790@users.noreply.github.com>
Date: Fri, 5 Jan 2024 08:45:14 -0500
Subject: [PATCH 12/24] impl

---
 cigaradvisor/blocks/header/header.css | 12 ++----------
 cigaradvisor/styles/styles.css        | 10 ++++++++++
 2 files changed, 12 insertions(+), 10 deletions(-)

diff --git a/cigaradvisor/blocks/header/header.css b/cigaradvisor/blocks/header/header.css
index 94661736..d6bd75f2 100644
--- a/cigaradvisor/blocks/header/header.css
+++ b/cigaradvisor/blocks/header/header.css
@@ -160,15 +160,6 @@ nav .top-nav-right .pinterest::before{
     display: none;
 }
 
-.primary-nav ul {
-    display: flex;
-    flex-direction: row;
-    justify-content: center;
-    list-style-type: none;
-    padding: 0;
-    margin: 0;
-}
-
 .primary-nav {
     background-color: rgba(255, 255, 255, 0.7);
     border: none;
@@ -192,7 +183,7 @@ nav .top-nav-right .pinterest::before{
 .primary-nav ul {
     display: flex;
     max-width: 1080px;
-    margin: 0 auto;
+    margin: 10px 0 0;
     align-items: center;
     width: 100%;
     text-align: center;
@@ -207,6 +198,7 @@ nav .top-nav-right .pinterest::before{
     font-weight: 600;
     color: #141414;
     cursor: default;
+    padding-bottom: 0.65em;
 }
 
 .primary-nav ul li a {
diff --git a/cigaradvisor/styles/styles.css b/cigaradvisor/styles/styles.css
index 17f1ded8..f2ce069a 100644
--- a/cigaradvisor/styles/styles.css
+++ b/cigaradvisor/styles/styles.css
@@ -121,6 +121,15 @@
 }
 
 
+@font-face {
+  font-family: "fontawesome-normal-400-fallback";
+  size-adjust: 137.621%;
+  src: local("Arial");
+}
+
+
+
+
 :root {
   /* colors */
 
@@ -129,6 +138,7 @@
   --ff-opensans: 'Open Sans', 'Open Sans Fallback', sans-serif;
   --ff-montserrat: 'Montserrat', 'Montserrat Fallback', sans-serif;
   --ff-alfaslabone: 'Alfa Slab One', 'Alfa Slab One Fallback', cursive;
+  --ff-fontawesome: 'fontawesome-normal-400-fallback', 'fontawesome-normal-400-fallback', sans-serif;
 
   /* body sizes */
 

From a98250add170091a7aa726b1f0853574bc52cd2d Mon Sep 17 00:00:00 2001
From: kailasnadh790 <53608019+kailasnadh790@users.noreply.github.com>
Date: Fri, 5 Jan 2024 11:09:47 -0500
Subject: [PATCH 13/24] desktop refractor

---
 cigaradvisor/blocks/header/header.css | 153 +++++++++++++-------------
 cigaradvisor/styles/styles.css        |   2 +-
 2 files changed, 76 insertions(+), 79 deletions(-)

diff --git a/cigaradvisor/blocks/header/header.css b/cigaradvisor/blocks/header/header.css
index d6bd75f2..4fb5e25d 100644
--- a/cigaradvisor/blocks/header/header.css
+++ b/cigaradvisor/blocks/header/header.css
@@ -1,41 +1,40 @@
 /* using flex arrange items horizontally and give a black background */
-nav {
+.header.block nav {
     display: none;
 }
 
-.nav-wrapper p {
+.header.block .nav-wrapper p {
     color: #8e7b5c;
     text-transform: uppercase;
     margin: 0 auto;
     font-size: 12px;
 }
 
-.default-content-wrapper {
+.header.block nav .default-content-wrapper {
     display: block;
     width: 100%;
 }
 
-.top-nav {
+.header.block nav .top-nav {
     background-color: #141414;
     min-height: 60px;
     align-items: center;
     height: 60px;
 }
 
-.brand-logo {
+.header.block nav .brand-logo {
     z-index: 1000;
 }
 
 
-/* arrange top-nav-content horizontally centered */
-.top-nav .top-nav-content {
+.header.block nav .top-nav .top-nav-content {
     display: flex;
     max-width: 1080px;
     margin: 0 auto;
     height: 100%;
 }
 
-.top-nav-left,
+.header.block nav .top-nav-left,
 .top-nav-right {
     width: calc(50% - 80px);
     padding: 0 10px;
@@ -44,57 +43,56 @@ nav {
 
 }
 
-.top-nav-left {
+.header.block nav .top-nav-left {
     float: left;
     justify-content: center;
     align-items: center;
 }
 
-.top-nav-right {
+.header.block nav .top-nav-right {
     float: right;
     justify-content: center;
     align-items: flex-end;
     padding: 10px;
 }
 
-nav .top-nav-right .twitter::before{
+.header.block nav .top-nav-right .twitter::before{
     content: '\e61b';
-    font-family: 'FontAwesome';
+    font-family: var(--ff-fontawesome);
     color: #8e7b5c;
     font-size: 24px;
 }
 
-nav .top-nav-right .facebook::before{
+.header.block nav .top-nav-right .facebook::before{
     content: '\f39e';
-    font-family: 'FontAwesome';
+    font-family: var(--ff-fontawesome);
     color: #8e7b5c;
     font-size: 24px;
 }
 
-nav .top-nav-right .instagram::before{
+.header.block nav .top-nav-right .instagram::before{
     content: '\f16d';
-    font-family: 'FontAwesome';
+    font-family: var(--ff-fontawesome);
     color: #8e7b5c;
     font-size: 24px;
 }
 
-nav .top-nav-right .youtube::before{
+.header.block nav .top-nav-right .youtube::before{
     content: '\f167';
-    font-family: 'FontAwesome';
+    font-family: var(--ff-fontawesome);
     color: #8e7b5c;
     font-size: 24px;
 }
 
-nav .top-nav-right .pinterest::before{
+.header.block nav .top-nav-right .pinterest::before{
     content: '\f231';
-    font-family: 'FontAwesome';
+    font-family: var(--ff-fontawesome);
     color: #8e7b5c;
     font-size: 24px;
 }
 
 
-/* arrange li items horizontally under .default-content-wrapper ul */
-.top-nav-left ul {
+.header.block nav .top-nav-left ul {
     display: flex;
     flex-direction: row;
     justify-content: space-between;
@@ -104,7 +102,7 @@ nav .top-nav-right .pinterest::before{
     padding-right: 25px;
 }
 
-.top-nav-left ul li {
+.header.block nav .top-nav-left ul li {
     display: flex;
     flex-direction: row;
     justify-content: space-between;
@@ -113,14 +111,14 @@ nav .top-nav-right .pinterest::before{
     margin: 0;
 }
 
-.top-nav-left ul li span {
+.header.block nav .top-nav-left ul li span {
     display: block;
     width: 25px;
     height: 25px;
     margin-right: 5px;
 }
 
-.top-nav-right ul {
+.header.block nav .top-nav-right ul {
     display: flex;
     margin: 0;
     padding: 0;
@@ -128,18 +126,18 @@ nav .top-nav-right .pinterest::before{
     top: 5px;
 }
 
-.top-nav-right ul li {
+.header.block nav .top-nav-right ul li {
     flex: 0 0 auto;
     margin: 0 8px;
     font-weight: 400;
     font-size: 14px;
 }
 
-.top-nav-right .default-content-wrapper {
+.header.block nav .top-nav-right .default-content-wrapper {
     width: auto;
 }
 
-.default-content-wrapper ul a {
+.header.block nav .default-content-wrapper ul a {
     text-transform: uppercase;
     color: #fff;
     font-size: 14px;
@@ -148,19 +146,9 @@ nav .top-nav-right .pinterest::before{
 
 
 /* Primary navigation */
-.primary-nav {
+.header.block nav .primary-nav {
     display: flex;
     flex-grow: 1;
-    /* Added flex-grow property */
-}
-
-
-/* hide all nested second level ul elements under .primary-nav */
-.primary-nav ul>li>ul {
-    display: none;
-}
-
-.primary-nav {
     background-color: rgba(255, 255, 255, 0.7);
     border: none;
     position: static;
@@ -170,38 +158,42 @@ nav .top-nav-right .pinterest::before{
     overflow: visible;
     width: auto;
     max-width: none;
-    padding-top: 15px;
+    padding-top: 10px;
     transform: none;
     transition: none;
     z-index: auto;
 }
 
-.solid-nav {
-    background-color: #ccc;
-}
-
-.primary-nav ul {
+.header.block nav .primary-nav ul {
     display: flex;
+    flex-direction: row;
+    justify-content: center;
+    list-style-type: none;
+    padding: 0;
     max-width: 1080px;
-    margin: 10px 0 0;
+    margin: 10px auto 0;
     align-items: center;
     width: 100%;
     text-align: center;
 }
 
-.primary-nav ul li {
+.header.block nav .primary-nav ul li {
     display: flex;
     flex: 0 0 auto;
     margin-top: 0;
     font-size: 14px;
-    font-family: open sans, sans-serif;
+    font-family: var(--ff-open-sans);
     font-weight: 600;
     color: #141414;
     cursor: default;
     padding-bottom: 0.65em;
 }
 
-.primary-nav ul li a {
+.header.block nav .primary-nav.solid-nav {
+    background-color: #ccc;
+}
+
+.header.block nav .primary-nav ul li a {
     padding: 10px 15px;
     font-family: montserrat, sans-serif;
     font-weight: 700;
@@ -216,15 +208,15 @@ nav .top-nav-right .pinterest::before{
     z-index: 111;
 }
 
-.primary-nav ul li>a:hover{
-    border-color: #8e7b5c;
+.icon-search{
+    padding: 0 20px;
 }
 
-.primary-nav ul li:last-child a:hover {
-    border: 2px solid transparent;
+.header.block nav .primary-nav ul li>a:hover{
+    border-color: #8e7b5c;
 }
 
-.primary-nav ul li a::after {
+.header.block nav .primary-nav ul li a::after {
     display: none;
     content: "";
     position: absolute;
@@ -236,7 +228,7 @@ nav .top-nav-right .pinterest::before{
     background-color: #fff;
 }
 
-.nav-drop:not([data-secondarynav='search-box']) span::after {
+.header.block nav .primary-nav .nav-drop:not([data-secondarynav='search-box']) span::after {
     font-size: 16px;
     content: '\f107';
     font-family: FontAwesome, Arial, sans-serif;
@@ -244,7 +236,7 @@ nav .top-nav-right .pinterest::before{
 }
 
 /* Secondary navigation */
-nav .secondary-nav-box {
+.header.block nav .secondary-nav-box {
     display: none;
     background-color: #fff;
     border: 2px solid #8e7b5c;
@@ -257,13 +249,13 @@ nav .secondary-nav-box {
     z-index: 110;
 }
 
-nav .secondary-nav-box ul {
+.header.block nav .secondary-nav-box>ul {
     column-count: 3;
     width: 100%;
     padding: 3em;
 }
 
-nav .secondary-nav-box.browse-categories ul li {
+.header.block nav .secondary-nav-box.browse-categories ul li {
     line-height: 2;
     font-size: 14px;
     font-family: open sans, sans-serif;
@@ -272,7 +264,7 @@ nav .secondary-nav-box.browse-categories ul li {
     cursor: default;
 }
 
-nav .secondary-nav-box.browse-categories ul li a {
+.header.block nav .secondary-nav-box.browse-categories ul li a {
     color: #8e7b5c;
     font-size: 16px;
     text-transform: uppercase;
@@ -281,26 +273,26 @@ nav .secondary-nav-box.browse-categories ul li a {
 }
 
 /* when li has a 'span with img' and 'a' as children, arrange them vertically left aligned*/
-nav .secondary-nav-box ul li span img,
-nav .secondary-nav-box.shop-cigars ul li a {
+.header.block nav .secondary-nav-box ul li span img,
+.header.block nav .secondary-nav-box.shop-cigars ul li a {
     display: block;
     text-align: center;
 }
 
-nav .secondary-nav-box.shop-cigars ul li a {
+.header.block nav .secondary-nav-box.shop-cigars ul li a {
     margin: 14px 0;
 }
 
-nav .secondary-nav-box.shop-cigars ul {
+.header.block nav .secondary-nav-box.shop-cigars ul {
     padding: 16px;
 }
 
 /* make above img centered */
-nav .secondary-nav-box ul li span img {
+.header.block nav .secondary-nav-box ul li span img {
     margin: 0 auto;
 }
 
-nav .secondary-nav-box.search-box {
+.header.block nav .secondary-nav-box.search-box {
     border: none;
     left: calc(60%);
     padding: 0;
@@ -308,16 +300,16 @@ nav .secondary-nav-box.search-box {
     margin-right: 25%;
 }
 
-nav .secondary-nav-box.search-box form::before {
+.header.block nav .secondary-nav-box.search-box form::before {
     display: none;
     line-height: 2.5em;
 }
 
-nav .secondary-nav-box.search-box form::placeholder {
+.header.block nav .secondary-nav-box.search-box form::placeholder {
     color: #141414;
 }
 
-nav .secondary-nav-box.search-box form {
+.header.block nav .secondary-nav-box.search-box form {
     margin-right: 0;
     float: right;
     position: relative;
@@ -329,7 +321,7 @@ nav .secondary-nav-box.search-box form {
     box-sizing: content-box;
 }
 
-nav .secondary-nav-box.search-box form label {
+.header.block nav .secondary-nav-box.search-box form label {
     position: absolute;
     width: 1px;
     height: 1px;
@@ -343,7 +335,7 @@ nav .secondary-nav-box.search-box form label {
     display: inline-block;
 }
 
-nav .secondary-nav-box.search-box form input {
+.header.block nav .secondary-nav-box.search-box form input {
     width: 100%;
     padding-left: .8em;
     padding-right: 2.571em;
@@ -352,7 +344,7 @@ nav .secondary-nav-box.search-box form input {
     border: 1px solid #8e7b5c;
 }
 
-nav .secondary-nav-box.search-box form button {
+.header.block nav .secondary-nav-box.search-box form button {
     color: #fff;
     width: auto;
     background-color: #141414;
@@ -368,6 +360,11 @@ nav .secondary-nav-box.search-box form button {
     border-radius: 0;
 }
 
+.header.block nav .primary-nav ul li:last-child {
+    border: 2px solid transparent;
+    cursor: pointer;
+}
+
 /* Mobile navigation */
 .mobile-nav {
     height: 100%;
@@ -596,41 +593,41 @@ nav .secondary-nav-box.search-box form button {
 
 .mobile-nav .mobile-social-nav .twitter::before{
     content: '\e61b';
-    font-family: 'FontAwesome';
+    font-family: var(--ff-fontawesome);
     color: #3c3a3b;
     font-size: 36px;
 }
 
 .mobile-nav .mobile-social-nav .facebook::before{
     content: '\f39e';
-    font-family: 'FontAwesome';
+    font-family: var(--ff-fontawesome);
     color: #3c3a3b;
     font-size: 36px;
 }
 
 .mobile-nav .mobile-social-nav .instagram::before{
     content: '\f16d';
-    font-family: 'FontAwesome';
+    font-family: var(--ff-fontawesome);
     color: #3c3a3b;
     font-size: 36px;
 }
 
 .mobile-nav .mobile-social-nav .youtube::before{
     content: '\f167';
-    font-family: 'FontAwesome';
+    font-family: var(--ff-fontawesome);
     color: #3c3a3b;
     font-size: 36px;
 }
 
 .mobile-nav .mobile-social-nav .pinterest::before{
     content: '\f231';
-    font-family: 'FontAwesome';
+    font-family: var(--ff-fontawesome);
     color: #3c3a3b;
     font-size: 36px;
 }
 
 @media screen and (min-width: 900px) {
-    nav {
+    .header.block nav {
         display: flex;
         flex-direction: column;
         margin: auto;
@@ -641,7 +638,7 @@ nav .secondary-nav-box.search-box form button {
         z-index: 1000;
     }
 
-    .mobile-nav {
+    .header.block .mobile-nav {
         display: none;
     }
 }
\ No newline at end of file
diff --git a/cigaradvisor/styles/styles.css b/cigaradvisor/styles/styles.css
index f2ce069a..1a452c4f 100644
--- a/cigaradvisor/styles/styles.css
+++ b/cigaradvisor/styles/styles.css
@@ -138,7 +138,7 @@
   --ff-opensans: 'Open Sans', 'Open Sans Fallback', sans-serif;
   --ff-montserrat: 'Montserrat', 'Montserrat Fallback', sans-serif;
   --ff-alfaslabone: 'Alfa Slab One', 'Alfa Slab One Fallback', cursive;
-  --ff-fontawesome: 'fontawesome-normal-400-fallback', 'fontawesome-normal-400-fallback', sans-serif;
+  --ff-fontawesome: 'FontAwesome';
 
   /* body sizes */
 

From b8c8d5cde5de23d91d3176df8f3bd96912548821 Mon Sep 17 00:00:00 2001
From: kailasnadh790 <53608019+kailasnadh790@users.noreply.github.com>
Date: Fri, 5 Jan 2024 11:31:12 -0500
Subject: [PATCH 14/24] mobile

---
 cigaradvisor/blocks/header/header.css | 114 +++++++++++++-------------
 1 file changed, 56 insertions(+), 58 deletions(-)

diff --git a/cigaradvisor/blocks/header/header.css b/cigaradvisor/blocks/header/header.css
index 4fb5e25d..18355579 100644
--- a/cigaradvisor/blocks/header/header.css
+++ b/cigaradvisor/blocks/header/header.css
@@ -1,4 +1,4 @@
-/* using flex arrange items horizontally and give a black background */
+/* stylelint-disable no-descending-specificity */
 .header.block nav {
     display: none;
 }
@@ -149,8 +149,7 @@
 .header.block nav .primary-nav {
     display: flex;
     flex-grow: 1;
-    background-color: rgba(255, 255, 255, 0.7);
-    border: none;
+    background-color: rgb(255 255 255 / 70%);    border: none;
     position: static;
     top: auto;
     bottom: auto;
@@ -208,7 +207,7 @@
     z-index: 111;
 }
 
-.icon-search{
+.header.block nav .icon-search{
     padding: 0 20px;
 }
 
@@ -258,7 +257,7 @@
 .header.block nav .secondary-nav-box.browse-categories ul li {
     line-height: 2;
     font-size: 14px;
-    font-family: open sans, sans-serif;
+    font-family: var(--ff-open-sans);
     font-weight: 600;
     color: #141414;
     cursor: default;
@@ -366,11 +365,19 @@
 }
 
 /* Mobile navigation */
-.mobile-nav {
+.header.block .mobile-nav {
     height: 100%;
+    display: flex;
+        flex-direction: column;
+        margin: auto;
+        position: fixed;
+        top: 0;
+        left: 0;
+        right: 0;
+        z-index: 1000;
 }
-/* set white solid background for .mobile-primary-nav-wrapper */
-.mobile-primary-nav-wrapper {
+
+.header.block .mobile-nav .mobile-primary-nav-wrapper {
     background-color: #fff;
     width: 100%;
     height: 100%;
@@ -388,35 +395,24 @@
     transition: transform .3s ease-in-out,-webkit-transform .3s ease-in-out;
 }
 
-.mobile-primary-nav-wrapper.nav-content-open{
+.header.block .mobile-nav .mobile-primary-nav-wrapper.nav-content-open{
     transform: translate3d(-100%,0,0);}
 
-.mobile-primary-nav-wrapper > * {
+.header.block .mobile-nav .mobile-primary-nav-wrapper > * {
     flex: 0 0 auto;
 }
 
-.mobile-nav{
-    display: flex;
-        flex-direction: column;
-        margin: auto;
-        position: fixed;
-        top: 0;
-        left: 0;
-        right: 0;
-        z-index: 1000;
-}
-
-.mobile-top-nav {
+.header.block .mobile-nav .mobile-top-nav {
     padding: 0 10px;
     background-color: #141414;
     height: auto;
 }
 
-.mobile-top-nav .default-content-wrapper {
+.header.block .mobile-nav .mobile-top-nav .default-content-wrapper {
     display: flex;
 }
 
-.mobile-top-nav .default-content-wrapper ul {
+.header.block .mobile-nav .mobile-top-nav .default-content-wrapper ul {
     display: flex;
     flex-direction: row;
     justify-content: space-between;
@@ -427,11 +423,11 @@
     min-height: 30px;
 }
 
-.mobile-top-nav .default-content-wrapper p {
+.header.block .mobile-nav .mobile-top-nav .default-content-wrapper p {
    width: 35%;
 }
 
-.mobile-top-nav .default-content-wrapper ul li {
+.header.block .mobile-nav .mobile-top-nav .default-content-wrapper ul li {
   margin: 2px;
   flex: 1 1 auto;
   border-left: 1px solid #8e7b5c;
@@ -439,13 +435,13 @@
   display: flex;
 }
 
-.mobile-top-nav .default-content-wrapper ul li a{
+.header.block .mobile-nav .mobile-top-nav .default-content-wrapper ul li a{
     margin: 0 auto;
     width: 30px;
     height: 25px;
 }
 
-.mobile-primary-nav {
+.header.block .mobile-nav .mobile-primary-nav {
     display: flex;
     flex-direction: row;
     justify-content: space-between;
@@ -456,7 +452,7 @@
     padding: 20px 0 5px;
 }
 
-.mobile-primary-nav .nav-hamburger, .search{
+.header.block .mobile-nav .mobile-primary-nav .nav-hamburger, .search{
     width: 1.25em;
     height: 1.25em;
     font-size: 2em;
@@ -464,18 +460,18 @@
     color: #333;
 }
 
-.nav-hamburger i::before {
+.header.block .mobile-nav .nav-hamburger i::before {
     content: "\f0c9"; 
     color: #8e7b5c;
 }
 
-.fa-search::before {
+.header.block .mobile-nav .fa-search::before {
     content: "\f002";
     color: #8e7b5c;
 }
 
 /* mobile primary nav */
-.mobile-primary-nav-content{
+.header.block .mobile-nav .mobile-primary-nav-content{
     display: flex;
     flex: 0 0 auto;
     flex-direction: row;
@@ -486,7 +482,7 @@
     padding-top: 15px;
 }
 
-.mobile-primary-nav-content ul{
+.header.block .mobile-nav .mobile-primary-nav-content ul{
     list-style: none;
     margin: 5px auto;
     width: 100%;
@@ -494,7 +490,7 @@
     padding: 0 15px;
 }
 
-.mobile-primary-nav-content ul li{
+.header.block .mobile-nav .mobile-primary-nav-content ul li{
     display: block;
     align-items: center;
     border-bottom: 1px solid #d3d3d3;
@@ -505,8 +501,8 @@
     font-size: 12px;
     cursor: default;
 }
-/* div inside above li is not visible. fix it */
-.mobile-primary-nav-content ul li div{
+
+.header.block .mobile-nav .mobile-primary-nav-content ul li div{
     display: flex;
     flex-direction: column;
     align-items: left;
@@ -517,8 +513,7 @@
     font-size: 12px;
 }
 
-/* align the a tag in the above li vertically centered */
-.mobile-primary-nav-content ul li a{
+.header.block .mobile-nav .mobile-primary-nav-content ul li a{
     background-color: transparent;
     align-items: center;
     border: none;
@@ -531,95 +526,98 @@
     font-weight: 700;
     cursor: pointer;
     margin: 0 auto;
-}
-
-.mobile-primary-nav-content ul li a{
-    position: relative;
     top: 10px;
     font-size: 16px;
 }
 
-.mobile-primary-nav-content .nav-drop:not([data-secondarynav='search-box']) span::after {
+.header.block .mobile-nav .mobile-primary-nav-content .nav-drop:not([data-secondarynav='search-box']) span::after {
     float: right;
 }
 
-.mobile-primary-nav-content>ul>li:last-child {
+.header.block .mobile-nav .mobile-primary-nav-content>ul>li:last-child {
     display: none;
 }
 
-.mobile-primary-nav-wrapper .mobile-social-nav ul {
+.header.block .mobile-nav .mobile-primary-nav-wrapper .mobile-social-nav ul {
     display: flex;
 }
 
-.mobile-nav .secondary-nav-box ul{
+.header.block .mobile-nav .secondary-nav-box ul{
     padding: 12px 0;
     margin: 0;
     border: none;
 }
 
-.mobile-nav .secondary-nav-box ul li{
+.header.block .mobile-nav .nav-drop:not([data-secondarynav='search-box']) span::after {
+    font-size: 16px;
+    content: '\f107';
+    font-family: FontAwesome, Arial, sans-serif;
+    margin-left: 10px;
+}
+
+.header.block .mobile-nav .secondary-nav-box ul li{
     border: none;
 }
 
-.mobile-nav .secondary-nav-box ul li a{
+.header.block .mobile-nav .secondary-nav-box ul li a{
     border: none;
     padding: 0.65em 0;
     color: rgb(20, 20, 20);
     font-size: 12px;
 }
 
-.mobile-nav .secondary-nav-box ul li span{
+.header.block .mobile-nav .secondary-nav-box ul li span{
     display: none;
 }
 
-.mobile-social-nav {
+.header.block .mobile-nav .mobile-social-nav {
     margin-top: 20px;
     padding-top: 24px;
 }
 
-.mobile-social-nav ul{
+.header.block .mobile-nav .mobile-social-nav ul{
     display: flex;
 }
 
-.mobile-social-nav ul li{
+.header.block .mobile-nav .mobile-social-nav ul li{
     flex: 1 1 auto;
     margin-right: 10px;
 }
 
-.mobile-social-nav ul li img{
+.header.block .mobile-nav .mobile-social-nav ul li img{
     height: 36px;
     width: 36px;
 }
 
-.mobile-nav .mobile-social-nav .twitter::before{
+.header.block .mobile-nav .mobile-social-nav .twitter::before{
     content: '\e61b';
     font-family: var(--ff-fontawesome);
     color: #3c3a3b;
     font-size: 36px;
 }
 
-.mobile-nav .mobile-social-nav .facebook::before{
+.header.block .mobile-nav .mobile-social-nav .facebook::before{
     content: '\f39e';
     font-family: var(--ff-fontawesome);
     color: #3c3a3b;
     font-size: 36px;
 }
 
-.mobile-nav .mobile-social-nav .instagram::before{
+.header.block .mobile-nav .mobile-social-nav .instagram::before{
     content: '\f16d';
     font-family: var(--ff-fontawesome);
     color: #3c3a3b;
     font-size: 36px;
 }
 
-.mobile-nav .mobile-social-nav .youtube::before{
+.header.block .mobile-nav .mobile-social-nav .youtube::before{
     content: '\f167';
     font-family: var(--ff-fontawesome);
     color: #3c3a3b;
     font-size: 36px;
 }
 
-.mobile-nav .mobile-social-nav .pinterest::before{
+.header.block .mobile-nav .mobile-social-nav .pinterest::before{
     content: '\f231';
     font-family: var(--ff-fontawesome);
     color: #3c3a3b;

From 561efc6ec2571612cc23b3074ae461702e406e2f Mon Sep 17 00:00:00 2001
From: kailasnadh790 <53608019+kailasnadh790@users.noreply.github.com>
Date: Fri, 5 Jan 2024 11:44:42 -0500
Subject: [PATCH 15/24] refactor

---
 cigaradvisor/blocks/header/header.css |  4 ++--
 cigaradvisor/blocks/header/header.js  | 29 +++++++++++----------------
 2 files changed, 14 insertions(+), 19 deletions(-)

diff --git a/cigaradvisor/blocks/header/header.css b/cigaradvisor/blocks/header/header.css
index 18355579..4a66d0fd 100644
--- a/cigaradvisor/blocks/header/header.css
+++ b/cigaradvisor/blocks/header/header.css
@@ -448,7 +448,7 @@
     list-style-type: none;
     margin: 0;
     width: 100%;
-    background-color: rgb(255, 255, 255);
+    background-color: rgb(255 255 255);
     padding: 20px 0 5px;
 }
 
@@ -562,7 +562,7 @@
 .header.block .mobile-nav .secondary-nav-box ul li a{
     border: none;
     padding: 0.65em 0;
-    color: rgb(20, 20, 20);
+    color: rgb(20 20 20);
     font-size: 12px;
 }
 
diff --git a/cigaradvisor/blocks/header/header.js b/cigaradvisor/blocks/header/header.js
index 482f52ef..876e4680 100644
--- a/cigaradvisor/blocks/header/header.js
+++ b/cigaradvisor/blocks/header/header.js
@@ -3,8 +3,9 @@ import { loadFragment } from '../fragment/fragment.js';
 import { decorateSocialLinks } from '../../scripts/scripts.js';
 
 /**
- * decorates the header, mainly the nav
- * @param {Element} block The header block element
+ * Decorates the header block with navigation elements.
+ * @param {HTMLElement} block - The header block element.
+ * @returns {Promise<void>} - A promise that resolves once the decoration is complete.
  */
 export default async function decorate(block) {
   // load nav as fragment
@@ -43,7 +44,7 @@ export default async function decorate(block) {
     li.append(a);
   });
 
-  mobileTopNavContent.class = "mobile-top-nav-content";
+  mobileTopNavContent.class = 'mobile-top-nav-content';
   mobileTopNav.append(mobileTopNavContent);
 
   const mobilePrimaryNav = document.createElement('div');
@@ -52,19 +53,19 @@ export default async function decorate(block) {
   hamburger.classList.add('nav-hamburger');
   hamburger.setAttribute('href', '#');
   hamburger.setAttribute('title', 'Toggle navigation');
-  hamburger.innerHTML = `<i class="fa fa-bars"></i>`;
+  hamburger.innerHTML = '<i class="fa fa-bars"></i>';
   mobilePrimaryNav.append(hamburger);
   const mobileLogo = document.createElement('a');
   mobileLogo.className = 'mobile-logo';
   mobileLogo.setAttribute('href', 'https://www.famous-smoke.com/cigaradvisor');
   mobileLogo.setAttribute('title', 'Cigar Advisor Homepage');
-  mobileLogo.innerHTML = `<img src="https://www.famous-smoke.com/cigaradvisor/wp-content/themes/CigarAdvisor/assets/images/logo1.png" alt="Cigar Advisor Logo">`;
+  mobileLogo.innerHTML = '<img src="https://www.famous-smoke.com/cigaradvisor/wp-content/themes/CigarAdvisor/assets/images/logo1.png" alt="Cigar Advisor Logo">';
   mobilePrimaryNav.append(mobileLogo);
   const search = document.createElement('a');
   search.className = 'search';
   search.setAttribute('href', 'https://www.famous-smoke.com/cigaradvisor/?s=');
   search.setAttribute('title', 'Search');
-  search.innerHTML = `<i class="fa fa-search"></i>`;
+  search.innerHTML = '<i class="fa fa-search"></i>';
   mobilePrimaryNav.append(search);
   mobileNav.append(mobilePrimaryNav);
 
@@ -78,7 +79,6 @@ export default async function decorate(block) {
   topNavContent.append(brand);
   const topNavRight = fragment.children[0];
   decorateSocialLinks(topNavRight);
-  //create a clone of topNavRight for mobile
   const socialNavMobile = topNavRight.cloneNode(true);
   socialNavMobile.className = 'mobile-social-nav';
   topNavRight.classList.add('top-nav-right');
@@ -89,12 +89,6 @@ export default async function decorate(block) {
   primaryNav.className = 'primary-nav';
   nav.append(primaryNav);
 
-  //toggle nav-content-open class on mobilePrimaryNavWrapper when hamburger is clicked default is with class nav-content-open
-  hamburger.addEventListener('click', () => {
-    mobilePrimaryNavWrapper.classList.toggle('nav-content-open');
-  });
-
-  // on scroll down equal to primaryNav height, set class "solid-nav" to primaryNav
   const navHeight = 60;
   window.addEventListener('scroll', () => {
     if (window.scrollY > navHeight) {
@@ -142,6 +136,10 @@ export default async function decorate(block) {
   mobilePrimaryNavWrapper.append(socialNavMobile);
   mobileNav.append(mobilePrimaryNavWrapper);
 
+  hamburger.addEventListener('click', () => {
+    mobilePrimaryNavWrapper.classList.toggle('nav-content-open');
+  });
+
   const lastChild = primaryNav.querySelector('li:last-child');
   lastChild.className = 'nav-drop';
   lastChild.setAttribute('data-secondarynav', 'search-box');
@@ -161,7 +159,6 @@ export default async function decorate(block) {
   block.append(navWrapper);
 
   const navDrops = nav.querySelectorAll('.nav-drop');
-  console.log(navDrops);
   navDrops.forEach((drop) => {
     drop.addEventListener('click', () => {
       const secondaryNavBox = nav.querySelectorAll('.secondary-nav-box');
@@ -175,7 +172,6 @@ export default async function decorate(block) {
       });
       const targetSecondaryNavClass = drop.dataset.secondarynav;
       const targetSecondaryNavBox = nav.querySelector(`.${targetSecondaryNavClass}`);
-      console.log(targetSecondaryNavBox);
       if (drop.getAttribute('aria-expanded') === 'false') {
         targetSecondaryNavBox.style.display = 'block';
         drop.setAttribute('aria-expanded', 'true');
@@ -185,7 +181,7 @@ export default async function decorate(block) {
       }
     });
   });
-  // do the above for mobile
+
   const mobileNavDrops = mobileNav.querySelectorAll('.nav-drop');
   mobileNavDrops.forEach((drop) => {
     drop.addEventListener('click', () => {
@@ -200,7 +196,6 @@ export default async function decorate(block) {
       });
       const targetSecondaryNavClass = drop.dataset.secondarynav;
       const targetSecondaryNavBox = mobileNav.querySelector(`.${targetSecondaryNavClass}`);
-      console.log(targetSecondaryNavBox);
       if (drop.getAttribute('aria-expanded') === 'false') {
         targetSecondaryNavBox.style.display = 'block';
         drop.setAttribute('aria-expanded', 'true');

From 3458ed2b42e1df720c88b9e1c34aba4d003d6f97 Mon Sep 17 00:00:00 2001
From: kailasnadh790 <53608019+kailasnadh790@users.noreply.github.com>
Date: Fri, 5 Jan 2024 11:51:49 -0500
Subject: [PATCH 16/24] Update header.js

---
 cigaradvisor/blocks/header/header.js | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/cigaradvisor/blocks/header/header.js b/cigaradvisor/blocks/header/header.js
index 876e4680..40c67aeb 100644
--- a/cigaradvisor/blocks/header/header.js
+++ b/cigaradvisor/blocks/header/header.js
@@ -57,13 +57,13 @@ export default async function decorate(block) {
   mobilePrimaryNav.append(hamburger);
   const mobileLogo = document.createElement('a');
   mobileLogo.className = 'mobile-logo';
-  mobileLogo.setAttribute('href', 'https://www.famous-smoke.com/cigaradvisor');
+  mobileLogo.setAttribute('href', '/cigaradvisor');
   mobileLogo.setAttribute('title', 'Cigar Advisor Homepage');
-  mobileLogo.innerHTML = '<img src="https://www.famous-smoke.com/cigaradvisor/wp-content/themes/CigarAdvisor/assets/images/logo1.png" alt="Cigar Advisor Logo">';
+  mobileLogo.innerHTML = '<img src="/cigaradvisor/images/header/mobile-logo.png" alt="Cigar Advisor Logo">';
   mobilePrimaryNav.append(mobileLogo);
   const search = document.createElement('a');
   search.className = 'search';
-  search.setAttribute('href', 'https://www.famous-smoke.com/cigaradvisor/?s=');
+  search.setAttribute('href', '/cigaradvisor/?s=');
   search.setAttribute('title', 'Search');
   search.innerHTML = '<i class="fa fa-search"></i>';
   mobilePrimaryNav.append(search);
@@ -72,8 +72,8 @@ export default async function decorate(block) {
   topNavLeft.classList.add('top-nav-left');
   topNavContent.append(topNavLeft);
   const brand = document.createElement('div');
-  brand.innerHTML = `<a href="https://www.famous-smoke.com/cigaradvisor" rel="home" class="layout__logo lg-andUp" title="Cigar Advisor Homepage">
-  <img src="https://www.famous-smoke.com/cigaradvisor/wp-content/themes/CigarAdvisor/assets/images/logo.png?w=160" alt="Cigar Advisor Logo">
+  brand.innerHTML = `<a href="/cigaradvisor" rel="home" class="layout__logo lg-andUp" title="Cigar Advisor Homepage">
+  <img src="/cigaradvisor/images/header/desktop-logo.png" alt="Cigar Advisor Logo">
   </a>`;
   brand.className = 'brand-logo';
   topNavContent.append(brand);
@@ -146,7 +146,7 @@ export default async function decorate(block) {
   lastChild.setAttribute('aria-expanded', 'false');
   const searchBox = document.createElement('div');
   searchBox.className = 'secondary-nav-box search-box';
-  searchBox.innerHTML = `<form action="https://www.famous-smoke.com/cigaradvisor/" class="search search--header lg-andUp">
+  searchBox.innerHTML = `<form action="/cigaradvisor/" class="search search--header lg-andUp">
   <label class="sr-only" for="header-search-term">Search</label>
   <input type="search" class="search__input predictiveSearch" id="header-search-term" maxlength="255" placeholder="Search here" name="s" autocomplete="off">
   <button type="submit" class="search__submit" value="Submit" title="Submit">Submit</button>

From 06060df6fd07b5f7fc71796b2d7cfa8189b63968 Mon Sep 17 00:00:00 2001
From: kailasnadh790 <53608019+kailasnadh790@users.noreply.github.com>
Date: Fri, 5 Jan 2024 11:56:38 -0500
Subject: [PATCH 17/24] linting

---
 cigaradvisor/blocks/header/header.css  |   4 +-
 cigaradvisor/blocks/header/header1.css | 275 -------------------------
 cigaradvisor/blocks/header/header1.js  | 148 -------------
 3 files changed, 2 insertions(+), 425 deletions(-)
 delete mode 100644 cigaradvisor/blocks/header/header1.css
 delete mode 100644 cigaradvisor/blocks/header/header1.js

diff --git a/cigaradvisor/blocks/header/header.css b/cigaradvisor/blocks/header/header.css
index 4a66d0fd..358e611e 100644
--- a/cigaradvisor/blocks/header/header.css
+++ b/cigaradvisor/blocks/header/header.css
@@ -271,7 +271,7 @@
     font-weight: 600;
 }
 
-/* when li has a 'span with img' and 'a' as children, arrange them vertically left aligned*/
+/* when li has a 'span with img' and 'a' as children, arrange them vertically left aligned */
 .header.block nav .secondary-nav-box ul li span img,
 .header.block nav .secondary-nav-box.shop-cigars ul li a {
     display: block;
@@ -486,7 +486,7 @@
     list-style: none;
     margin: 5px auto;
     width: 100%;
-    background-color: rgb(255, 255, 255);
+    background-color: rgb(255 255 255);
     padding: 0 15px;
 }
 
diff --git a/cigaradvisor/blocks/header/header1.css b/cigaradvisor/blocks/header/header1.css
deleted file mode 100644
index 11a1b696..00000000
--- a/cigaradvisor/blocks/header/header1.css
+++ /dev/null
@@ -1,275 +0,0 @@
-/* header and nav layout */
-header .nav-wrapper {
-  background-color: var(--background-color);
-  width: 100%;
-  z-index: 2;
-  position: fixed;
-}
-
-header nav {
-  box-sizing: border-box;
-  display: grid;
-  grid-template:
-    'hamburger brand tools' var(--nav-height)
-    'sections sections sections' 1fr / auto 1fr auto;
-  align-items: center;
-  gap: 0 2em;
-  margin: auto;
-  max-width: 1264px;
-  height: var(--nav-height);
-  padding: 0 1rem;
-  font-family: var(--body-font-family);
-}
-
-header nav[aria-expanded="true"] {
-  grid-template:
-    'hamburger brand' var(--nav-height)
-    'sections sections' 1fr
-    'tools tools' var(--nav-height) / auto 1fr;
-  overflow-y: auto;
-  min-height: 100vh;
-}
-
-@media (min-width: 600px) {
-  header nav {
-    padding: 0 2rem;
-  }
-}
-
-@media (min-width: 900px) {
-  header nav {
-    display: flex;
-    justify-content: space-between;
-  }
-
-  header nav[aria-expanded="true"] {
-    min-height: 0;
-    overflow: visible;
-  }
-}
-
-header nav p {
-  margin: 0;
-  line-height: 1;
-}
-
-header nav a:any-link {
-  color: currentcolor;
-}
-
-/* hamburger */
-header nav .nav-hamburger {
-  grid-area: hamburger;
-  height: 22px;
-  display: flex;
-  align-items: center;
-}
-
-header nav .nav-hamburger button {
-  height: 22px;
-  margin: 0;
-  border: 0;
-  border-radius: 0;
-  padding: 0;
-  background-color: var(--background-color);
-  color: inherit;
-  overflow: initial;
-  text-overflow: initial;
-  white-space: initial;
-}
-
-header nav .nav-hamburger-icon,
-header nav .nav-hamburger-icon::before,
-header nav .nav-hamburger-icon::after {
-  box-sizing: border-box;
-  display: block;
-  position: relative;
-  width: 20px;
-}
-
-header nav .nav-hamburger-icon::before,
-header nav .nav-hamburger-icon::after {
-  content: '';
-  position: absolute;
-  background: currentcolor;
-}
-
-header nav[aria-expanded="false"] .nav-hamburger-icon,
-header nav[aria-expanded="false"] .nav-hamburger-icon::before,
-header nav[aria-expanded="false"] .nav-hamburger-icon::after {
-  height: 2px;
-  border-radius: 2px;
-  background: currentcolor;
-}
-
-header nav[aria-expanded="false"] .nav-hamburger-icon::before {
-  top: -6px;
-}
-
-header nav[aria-expanded="false"] .nav-hamburger-icon::after {
-  top: 6px;
-}
-
-header nav[aria-expanded="true"] .nav-hamburger-icon {
-  height: 22px;
-}
-
-header nav[aria-expanded="true"] .nav-hamburger-icon::before,
-header nav[aria-expanded="true"] .nav-hamburger-icon::after {
-  top: 3px;
-  left: 1px;
-  transform: rotate(45deg);
-  transform-origin: 2px 1px;
-  width: 24px;
-  height: 2px;
-  border-radius: 2px;
-}
-
-header nav[aria-expanded="true"] .nav-hamburger-icon::after {
-  top: unset;
-  bottom: 3px;
-  transform: rotate(-45deg);
-}
-
-@media (min-width: 900px) {
-  header nav .nav-hamburger {
-    display: none;
-    visibility: hidden;
-  }
-}
-
-/* brand */
-header .nav-brand {
-  grid-area: brand;
-  flex-basis: 128px;
-  font-size: var(--heading-font-size-s);
-  font-weight: 700;
-  line-height: 1;
-}
-
-header nav .nav-brand img {
-  width: 128px;
-  height: auto;
-}
-
-/* sections */
-header nav .nav-sections {
-  grid-area: sections;
-  flex: 1 1 auto;
-  display: none;
-  visibility: hidden;
-  background-color: var(--overlay-color);
-}
-
-header nav[aria-expanded="true"] .nav-sections {
-  display: block;
-  visibility: visible;
-  align-self: start;
-}
-
-header nav .nav-sections ul  {
-  list-style: none;
-  padding-left: 0;
-  font-size: var(--body-font-size-s);
-  font-weight: 500;
-}
-
-header nav .nav-sections ul > li {
-  font-weight: 700;
-}
-
-header nav .nav-sections ul > li > ul {
-  margin-top: 0;
-}
-
-header nav .nav-sections ul > li > ul > li {
-  font-weight: 500;
-}
-
-@media (min-width: 900px) {
-  header nav .nav-sections {
-    display: block;
-    visibility: visible;
-    white-space: nowrap;
-  }
-
-  header nav[aria-expanded="true"] .nav-sections {
-    align-self: unset;
-  }
-
-  header nav .nav-sections .nav-drop {
-    position: relative;
-    padding-right: 16px;
-    cursor: pointer;
-  }
-
-  header nav .nav-sections .nav-drop::after {
-    content: '';
-    display: inline-block;
-    position: absolute;
-    top: .5em;
-    right: 2px;
-    transform: rotate(135deg);
-    width: 6px;
-    height: 6px;
-    border: 2px solid currentcolor;
-    border-radius: 0 1px 0 0;
-    border-width: 2px 2px 0 0;
-  }
-
-  header nav .nav-sections .nav-drop[aria-expanded="true"]::after {
-    top: unset;
-    bottom: .5em;
-    transform: rotate(315deg);
-  }
-
-  header nav .nav-sections ul {
-    display: flex;
-    gap: 2em;
-    margin: 0;
-    font-size: var(--body-font-size-xs);
-  }
-
-  header nav .nav-sections .default-content-wrapper > ul > li {
-    flex: 0 1 auto;
-    position: relative;
-    font-weight: 500;
-  }
-
-  header nav .nav-sections .default-content-wrapper > ul > li > ul {
-    display: none;
-    position: relative;
-  }
-
-  header nav .nav-sections .default-content-wrapper > ul > li[aria-expanded="true"] > ul {
-    display: block;
-    position: absolute;
-    left: -1em;
-    width: 200px;
-    margin-top: 12px;
-    padding: 1em;
-    background-color: var(--highlight-background-color);
-    white-space: initial;
-  }
-
-  header nav .nav-sections .default-content-wrapper > ul > li > ul::before {
-    content: '';
-    position: absolute;
-    top: -8px;
-    left: 8px;
-    width: 0;
-    height: 0;
-    border-left: 8px solid transparent;
-    border-right: 8px solid transparent;
-    border-bottom: 8px solid var(--highlight-background-color);
-  }
-
-  header nav .nav-sections .default-content-wrapper > ul > li > ul > li {
-    padding: 8px 0;
-  }
-}
-
-/* tools */
-header nav .nav-tools {
-  grid-area: tools;
-}
diff --git a/cigaradvisor/blocks/header/header1.js b/cigaradvisor/blocks/header/header1.js
deleted file mode 100644
index 26739a0b..00000000
--- a/cigaradvisor/blocks/header/header1.js
+++ /dev/null
@@ -1,148 +0,0 @@
-import { getMetadata } from '../../scripts/aem.js';
-import { loadFragment } from '../fragment/fragment.js';
-
-// media query match that indicates mobile/tablet width
-const isDesktop = window.matchMedia('(min-width: 900px)');
-
-function closeOnEscape(e) {
-  if (e.code === 'Escape') {
-    const nav = document.getElementById('nav');
-    const navSections = nav.querySelector('.nav-sections');
-    const navSectionExpanded = navSections.querySelector('[aria-expanded="true"]');
-    if (navSectionExpanded && isDesktop.matches) {
-      // eslint-disable-next-line no-use-before-define
-      toggleAllNavSections(navSections);
-      navSectionExpanded.focus();
-    } else if (!isDesktop.matches) {
-      // eslint-disable-next-line no-use-before-define
-      toggleMenu(nav, navSections);
-      nav.querySelector('button').focus();
-    }
-  }
-}
-
-function openOnKeydown(e) {
-  const focused = document.activeElement;
-  const isNavDrop = focused.className === 'nav-drop';
-  if (isNavDrop && (e.code === 'Enter' || e.code === 'Space')) {
-    const dropExpanded = focused.getAttribute('aria-expanded') === 'true';
-    // eslint-disable-next-line no-use-before-define
-    toggleAllNavSections(focused.closest('.nav-sections'));
-    focused.setAttribute('aria-expanded', dropExpanded ? 'false' : 'true');
-  }
-}
-
-function focusNavSection() {
-  document.activeElement.addEventListener('keydown', openOnKeydown);
-}
-
-/**
- * Toggles all nav sections
- * @param {Element} sections The container element
- * @param {Boolean} expanded Whether the element should be expanded or collapsed
- */
-function toggleAllNavSections(sections, expanded = false) {
-  sections.querySelectorAll('.nav-sections .default-content-wrapper > ul > li').forEach((section) => {
-    section.setAttribute('aria-expanded', expanded);
-  });
-}
-
-/**
- * Toggles the entire nav
- * @param {Element} nav The container element
- * @param {Element} navSections The nav sections within the container element
- * @param {*} forceExpanded Optional param to force nav expand behavior when not null
- */
-function toggleMenu(nav, navSections, forceExpanded = null) {
-  const expanded = forceExpanded !== null ? !forceExpanded : nav.getAttribute('aria-expanded') === 'true';
-  const button = nav.querySelector('.nav-hamburger button');
-  document.body.style.overflowY = (expanded || isDesktop.matches) ? '' : 'hidden';
-  nav.setAttribute('aria-expanded', expanded ? 'false' : 'true');
-  toggleAllNavSections(navSections, expanded || isDesktop.matches ? 'false' : 'true');
-  button.setAttribute('aria-label', expanded ? 'Open navigation' : 'Close navigation');
-  // enable nav dropdown keyboard accessibility
-  const navDrops = navSections.querySelectorAll('.nav-drop');
-  if (isDesktop.matches) {
-    navDrops.forEach((drop) => {
-      if (!drop.hasAttribute('tabindex')) {
-        drop.setAttribute('role', 'button');
-        drop.setAttribute('tabindex', 0);
-        drop.addEventListener('focus', focusNavSection);
-      }
-    });
-  } else {
-    navDrops.forEach((drop) => {
-      drop.removeAttribute('role');
-      drop.removeAttribute('tabindex');
-      drop.removeEventListener('focus', focusNavSection);
-    });
-  }
-  // enable menu collapse on escape keypress
-  if (!expanded || isDesktop.matches) {
-    // collapse menu on escape press
-    window.addEventListener('keydown', closeOnEscape);
-  } else {
-    window.removeEventListener('keydown', closeOnEscape);
-  }
-}
-
-/**
- * decorates the header, mainly the nav
- * @param {Element} block The header block element
- */
-export default async function decorate(block) {
-  // load nav as fragment
-  const navMeta = getMetadata('nav');
-  const navPath = navMeta ? new URL(navMeta).pathname : '/cigaradvisor/nav';
-  const fragment = await loadFragment(navPath);
-
-  // decorate nav DOM
-  const nav = document.createElement('nav');
-  nav.id = 'nav';
-  while (fragment.firstElementChild) nav.append(fragment.firstElementChild);
-
-  const classes = ['brand', 'sections', 'tools'];
-  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');
-  if (brandLink) {
-    brandLink.className = '';
-    brandLink.closest('.button-container').className = '';
-  }
-
-  const navSections = nav.querySelector('.nav-sections');
-  if (navSections) {
-    navSections.querySelectorAll(':scope .default-content-wrapper > ul > li').forEach((navSection) => {
-      if (navSection.querySelector('ul')) navSection.classList.add('nav-drop');
-      navSection.addEventListener('click', () => {
-        if (isDesktop.matches) {
-          const expanded = navSection.getAttribute('aria-expanded') === 'true';
-          toggleAllNavSections(navSections);
-          navSection.setAttribute('aria-expanded', expanded ? 'false' : 'true');
-        }
-      });
-    });
-  }
-
-  // hamburger for mobile
-  const hamburger = document.createElement('div');
-  hamburger.classList.add('nav-hamburger');
-  hamburger.innerHTML = `<button type="button" aria-controls="nav" aria-label="Open navigation">
-      <span class="nav-hamburger-icon"></span>
-    </button>`;
-  hamburger.addEventListener('click', () => toggleMenu(nav, navSections));
-  nav.prepend(hamburger);
-  nav.setAttribute('aria-expanded', 'false');
-  // prevent mobile nav behavior on window resize
-  toggleMenu(nav, navSections, isDesktop.matches);
-  isDesktop.addEventListener('change', () => toggleMenu(nav, navSections, isDesktop.matches));
-
-  const navWrapper = document.createElement('div');
-  navWrapper.className = 'nav-wrapper';
-  navWrapper.append(nav);
-  block.append(navWrapper);
-}
\ No newline at end of file

From 6670bce1828095f6a404024601594136e8676f0e Mon Sep 17 00:00:00 2001
From: kailasnadh790 <53608019+kailasnadh790@users.noreply.github.com>
Date: Fri, 5 Jan 2024 12:20:10 -0500
Subject: [PATCH 18/24] deleting unwanted files

---
 cigaradvisor/icons/auctioneer.png | Bin 1336 -> 0 bytes
 cigaradvisor/icons/famous.png     | Bin 1862 -> 0 bytes
 cigaradvisor/icons/monster.png    | Bin 1640 -> 0 bytes
 cigaradvisor/icons/search.svg     |   6 ------
 4 files changed, 6 deletions(-)
 delete mode 100644 cigaradvisor/icons/auctioneer.png
 delete mode 100644 cigaradvisor/icons/famous.png
 delete mode 100644 cigaradvisor/icons/monster.png
 delete mode 100644 cigaradvisor/icons/search.svg

diff --git a/cigaradvisor/icons/auctioneer.png b/cigaradvisor/icons/auctioneer.png
deleted file mode 100644
index 4042d18c932bd975a66fde653379ec80b8764c48..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 1336
zcmV-81;_e{P)<h;3K|Lk000e1NJLTq002w?002A)1^@s6%(YzV000F4Nkl<Zc-rlo
z32YTb7{^~Z0s+JVQb2CX8RQHR0%%H#+=MG35<svi$PIFsXp|yy$z>oMZ73pF6i6UY
z406SUa40Ak#mIf5p+*o51_M(6U-&;AHoNcbZngV5JCpp<_qsE)GygX`@B6;_UL<0Q
zDW;fWN?;{>=AbrUFE|K31=~P2$OILPLQjfS8q5Z(KnKto^Z;347dQq!0j-Q$j|D3g
z=lb(tJNN_a1gS<fcfz&>KY|C~?H~rwQ+ZtzyaXnI8DJu4mw=-61O?=XjJqgr{uB5W
ztmFHNpamGf{bLi@0^R`02_o1FieSRepmtH+yc4*}8xMA<(--9MTk9QABVfVmSOgOe
z6!jop12@27Fw~(=itHO;fz$!D0uro}jbL|!7)Tkg7+eAQ;4?55v;<`>b?bsgGWY<-
zIW_PVW*JZkFd1C34C);BGg)B+L4VL4G_mR9DY32ohq3ju5ld*ADBnoUD9|;BfeLrP
zcVM*A?qzTq`~vbouR@F=8Ki>^c8?<Hn8>b+Z2CvRBb&ibRqB=lUBMboO0Itm8uEG-
zuoRr6pd!XcAQ!9!8^LaHoF9nY2laz|0TdSlvL1MalRL`^G>Nl6z9p*=l&34yjecW+
z4`jP2Uz{!Q3<_A!;gPCO_hyc~wp^EMi@<FUf~D)=wzTHs^9|Sm_Ja%HzGbo%9okn0
z)4&-Qf;ElkP%x3#<4knC%YKH??Q!boIh`EjKH!kUM0<JcOI)-sZTe}XV`QN*7y;(f
zt@@smmA{if0}p+PFZ)mttWQ|NGntmn{X9*N88k}MBtjy#6{8XoF<AjV2Y<1Rm^RhI
z7T4-s2$Leb!9&@+!E$iVgJ7LZBz5MX>fk-_dmOQDfszqZ{t>PQSRF&K?nWhh;d=1E
zqkw*^IRC?pGO<OwtE{Y+VVQKY&vq>=kK(Ig5NnRpIf09|xvE&=XX-9iUpmoG`*f|M
zVs+M4pd<+nN??%h<#c+a$37%RHeC^GfsR6@(@)&bP<Aw;x(+PkNp*cjSS5&<q=-{h
zf{r{Nka*Z-MXW!izHVZD$glfso^K{8*E-t7-fuEedXep78L8WK6HENS>#|B>)LHG*
zR}{wRBvuM1mF1$YU(wp@B-kQOO0sC0yQn{mr|NFSdJt>n7B{g<aZ*cpA}*q(xM(LQ
zMQ>U*b|<drw7NFS3Q*oJ<RmM25WGLn9d9}ac2yU#s&GQxEdM{j|JU`{pO_i#!6@)P
zKMYCBoT!UnvYLK#xE4M17-GT(|B52H5~pHZ|A3<H4PDILK@c%G^W)S>Q*t4eM_r|`
z3bx+u29G+klui8O(8RMWA~d4_c`oZq2G2Z2I58=vNc`U8eXGVxOHX9c)^hUWJhmIb
zJy6ZQSxLt`)h6<h$~Kai+@;tGW-%i&e6)R*X`lz`kUt`~xJQ1={IlJ3t9tA3XqIFm
zoQU>rA^Um;yvQWuOs=Z5AaZAmLbz=d?XXv))yKWc>LS_{WnaqrFS7!<m&vL-;3w3b
z$f7moDvJuYM3U<q>LxSVAxS7-aIf0R9M@b%Y9&*9AJgBZzZ_l7jsX-RD%^EC*>h=L
zZ1tFyS-=#h(h;2tlYR3F5p7k;iG-!lgvj9U9P@pMbw8+|=Olu7<#;eMfu~7(n2LFh
u9)Khdf5o5cNN{p^XvH$c6jMxbQT_((y&&`*4>Jb<0000<MNUMnLSTZ%%xoM0

diff --git a/cigaradvisor/icons/famous.png b/cigaradvisor/icons/famous.png
deleted file mode 100644
index 89a37b47199b1c13ad3302f24cd087316abd9886..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 1862
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
AuK)l5

diff --git a/cigaradvisor/icons/monster.png b/cigaradvisor/icons/monster.png
deleted file mode 100644
index c278e7a9da4b190b458e5afde693d32e36811fa7..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 1640
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

diff --git a/cigaradvisor/icons/search.svg b/cigaradvisor/icons/search.svg
deleted file mode 100644
index 637c677b..00000000
--- a/cigaradvisor/icons/search.svg
+++ /dev/null
@@ -1,6 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
-  <path d="M16.9,15.5c2.4-3.2,2.2-7.7-0.7-10.6c-3.1-3.1-8.1-3.1-11.3,0c-3.1,3.2-3.1,8.3,0,11.4
-    c2.9,2.9,7.5,3.1,10.6,0.6c0,0.1,0,0.1,0,0.1l4.2,4.2c0.5,0.4,1.1,0.4,1.5,0c0.4-0.4,0.4-1,0-1.4L16.9,15.5
-    C16.9,15.5,16.9,15.5,16.9,15.5L16.9,15.5z M14.8,6.3c2.3,2.3,2.3,6.1,0,8.5c-2.3,2.3-6.1,2.3-8.5,0C4,12.5,4,8.7,6.3,6.3
-    C8.7,4,12.5,4,14.8,6.3z"/>
-</svg>

From a6287a89014e40951d82ab37b53fa9e5acacf003 Mon Sep 17 00:00:00 2001
From: kailasnadh790 <53608019+kailasnadh790@users.noreply.github.com>
Date: Fri, 5 Jan 2024 12:31:05 -0500
Subject: [PATCH 19/24] Update header.css

---
 cigaradvisor/blocks/header/header.css | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/cigaradvisor/blocks/header/header.css b/cigaradvisor/blocks/header/header.css
index 358e611e..2f779538 100644
--- a/cigaradvisor/blocks/header/header.css
+++ b/cigaradvisor/blocks/header/header.css
@@ -211,6 +211,11 @@
     padding: 0 20px;
 }
 
+.header.block nav .icon-search img{
+    width: 18px;
+    height: 18px;
+}
+
 .header.block nav .primary-nav ul li>a:hover{
     border-color: #8e7b5c;
 }

From 68a58e0f6a66bbbad05692fe5e4389ea7df06c35 Mon Sep 17 00:00:00 2001
From: kailasnadh790 <53608019+kailasnadh790@users.noreply.github.com>
Date: Fri, 5 Jan 2024 12:56:55 -0500
Subject: [PATCH 20/24] refractor

---
 cigaradvisor/blocks/header/header.css |  2 +-
 cigaradvisor/styles/styles.css        | 11 ++++++++---
 2 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/cigaradvisor/blocks/header/header.css b/cigaradvisor/blocks/header/header.css
index 2f779538..704218f9 100644
--- a/cigaradvisor/blocks/header/header.css
+++ b/cigaradvisor/blocks/header/header.css
@@ -193,7 +193,7 @@
 }
 
 .header.block nav .primary-nav ul li a {
-    padding: 10px 15px;
+    padding: 10px 20px;
     font-family: montserrat, sans-serif;
     font-weight: 700;
     text-transform: uppercase;
diff --git a/cigaradvisor/styles/styles.css b/cigaradvisor/styles/styles.css
index 1a452c4f..f8d81224 100644
--- a/cigaradvisor/styles/styles.css
+++ b/cigaradvisor/styles/styles.css
@@ -127,9 +127,6 @@
   src: local("Arial");
 }
 
-
-
-
 :root {
   /* colors */
 
@@ -198,6 +195,14 @@ a {
   text-decoration: none
 }
 
+p {
+  font-family: var(--ff-opensans);
+  font-weight: 600;
+  color: #141414;
+  font-size: 12px;
+  cursor: default
+}
+
 a:hover {
   transition: .8s;
   text-decoration: none;

From 09b9a2232449ca8bbecd03072c23315bf890fed8 Mon Sep 17 00:00:00 2001
From: kailasnadh790 <53608019+kailasnadh790@users.noreply.github.com>
Date: Fri, 5 Jan 2024 15:52:45 -0500
Subject: [PATCH 21/24] variable declarations

---
 cigaradvisor/blocks/header/header.css | 76 +++++++++++++--------------
 cigaradvisor/blocks/header/header.js  |  2 +-
 cigaradvisor/styles/styles.css        | 44 ++++++++++++++--
 3 files changed, 78 insertions(+), 44 deletions(-)

diff --git a/cigaradvisor/blocks/header/header.css b/cigaradvisor/blocks/header/header.css
index 704218f9..37e44b9d 100644
--- a/cigaradvisor/blocks/header/header.css
+++ b/cigaradvisor/blocks/header/header.css
@@ -4,7 +4,7 @@
 }
 
 .header.block .nav-wrapper p {
-    color: #8e7b5c;
+    color: var(--tan);
     text-transform: uppercase;
     margin: 0 auto;
     font-size: 12px;
@@ -16,7 +16,7 @@
 }
 
 .header.block nav .top-nav {
-    background-color: #141414;
+    background-color: var(--very-dark-grey);
     min-height: 60px;
     align-items: center;
     height: 60px;
@@ -59,35 +59,35 @@
 .header.block nav .top-nav-right .twitter::before{
     content: '\e61b';
     font-family: var(--ff-fontawesome);
-    color: #8e7b5c;
+    color: var(--tan);
     font-size: 24px;
 }
 
 .header.block nav .top-nav-right .facebook::before{
     content: '\f39e';
     font-family: var(--ff-fontawesome);
-    color: #8e7b5c;
+    color: var(--tan);
     font-size: 24px;
 }
 
 .header.block nav .top-nav-right .instagram::before{
     content: '\f16d';
     font-family: var(--ff-fontawesome);
-    color: #8e7b5c;
+    color: var(--tan);
     font-size: 24px;
 }
 
 .header.block nav .top-nav-right .youtube::before{
     content: '\f167';
     font-family: var(--ff-fontawesome);
-    color: #8e7b5c;
+    color: var(--tan);
     font-size: 24px;
 }
 
 .header.block nav .top-nav-right .pinterest::before{
     content: '\f231';
     font-family: var(--ff-fontawesome);
-    color: #8e7b5c;
+    color: var(--tan);
     font-size: 24px;
 }
 
@@ -139,7 +139,7 @@
 
 .header.block nav .default-content-wrapper ul a {
     text-transform: uppercase;
-    color: #fff;
+    color: var(--white);
     font-size: 14px;
     font-weight: 400;
 }
@@ -183,13 +183,13 @@
     font-size: 14px;
     font-family: var(--ff-open-sans);
     font-weight: 600;
-    color: #141414;
+    color: var(--very-dark-grey);
     cursor: default;
     padding-bottom: 0.65em;
 }
 
 .header.block nav .primary-nav.solid-nav {
-    background-color: #ccc;
+    background-color: var(--silver);
 }
 
 .header.block nav .primary-nav ul li a {
@@ -199,7 +199,7 @@
     text-transform: uppercase;
     background-color: transparent;
     border: 2px solid transparent;
-    color: #141414;
+    color: var(--very-dark-grey);
     margin: 0;
     cursor: pointer;
     font-size: 14px;
@@ -217,7 +217,7 @@
 }
 
 .header.block nav .primary-nav ul li>a:hover{
-    border-color: #8e7b5c;
+    border-color: var(--tan);
 }
 
 .header.block nav .primary-nav ul li a::after {
@@ -229,7 +229,7 @@
     left: 0;
     right: 0;
     height: 1px;
-    background-color: #fff;
+    background-color: var(--white);
 }
 
 .header.block nav .primary-nav .nav-drop:not([data-secondarynav='search-box']) span::after {
@@ -242,8 +242,8 @@
 /* Secondary navigation */
 .header.block nav .secondary-nav-box {
     display: none;
-    background-color: #fff;
-    border: 2px solid #8e7b5c;
+    background-color: var(--white);
+    border: 2px solid var(--tan);
     left: 0;
     right: 0;
     width: 100%;
@@ -264,12 +264,12 @@
     font-size: 14px;
     font-family: var(--ff-open-sans);
     font-weight: 600;
-    color: #141414;
+    color: var(--very-dark-grey);
     cursor: default;
 }
 
 .header.block nav .secondary-nav-box.browse-categories ul li a {
-    color: #8e7b5c;
+    color: var(--tan);
     font-size: 16px;
     text-transform: uppercase;
     font-family: montserrat, sans-serif;
@@ -310,7 +310,7 @@
 }
 
 .header.block nav .secondary-nav-box.search-box form::placeholder {
-    color: #141414;
+    color: var(--very-dark-grey);
 }
 
 .header.block nav .secondary-nav-box.search-box form {
@@ -345,13 +345,13 @@
     padding-right: 2.571em;
     border-radius: 0;
     text-transform: capitalize;
-    border: 1px solid #8e7b5c;
+    border: 1px solid var(--tan);
 }
 
 .header.block nav .secondary-nav-box.search-box form button {
-    color: #fff;
+    color: var(--white);
     width: auto;
-    background-color: #141414;
+    background-color: var(--very-dark-grey);
     padding-left: 10px;
     padding-right: 10px;
     position: absolute;
@@ -383,7 +383,7 @@
 }
 
 .header.block .mobile-nav .mobile-primary-nav-wrapper {
-    background-color: #fff;
+    background-color: var(--white);
     width: 100%;
     height: 100%;
     margin-left: auto;
@@ -393,7 +393,7 @@
     display: flex;
     flex-direction: column;
     top: 6em;
-    border-right: 1px solid #ddd;
+    border-right: 1px solid var(--very-light-grey);
     bottom: 0;
     right: 100%;
     overflow: auto;
@@ -409,7 +409,7 @@
 
 .header.block .mobile-nav .mobile-top-nav {
     padding: 0 10px;
-    background-color: #141414;
+    background-color: var(--very-dark-grey);
     height: auto;
 }
 
@@ -435,7 +435,7 @@
 .header.block .mobile-nav .mobile-top-nav .default-content-wrapper ul li {
   margin: 2px;
   flex: 1 1 auto;
-  border-left: 1px solid #8e7b5c;
+  border-left: 1px solid var(--tan);
   justify-content: center;
   display: flex;
 }
@@ -462,17 +462,17 @@
     height: 1.25em;
     font-size: 2em;
     text-align: center;
-    color: #333;
+    color: var(--grey);
 }
 
 .header.block .mobile-nav .nav-hamburger i::before {
     content: "\f0c9"; 
-    color: #8e7b5c;
+    color: var(--tan);
 }
 
 .header.block .mobile-nav .fa-search::before {
     content: "\f002";
-    color: #8e7b5c;
+    color: var(--tan);
 }
 
 /* mobile primary nav */
@@ -498,23 +498,23 @@
 .header.block .mobile-nav .mobile-primary-nav-content ul li{
     display: block;
     align-items: center;
-    border-bottom: 1px solid #d3d3d3;
+    border-bottom: 1px solid var(--light-grey);
     min-height: 3.5rem;
     font-family: --var(ff-open-sans);
     font-weight: 600;
-    color: #141414;
+    color: var(--very-dark-grey);
     font-size: 12px;
     cursor: default;
 }
 
 .header.block .mobile-nav .mobile-primary-nav-content ul li div{
-    display: flex;
+    display: none;
     flex-direction: column;
     align-items: left;
     min-height: 3.5rem;
     font-family: --var(ff-open-sans);
     font-weight: 600;
-    color: #141414;
+    color: var(--very-dark-grey);
     font-size: 12px;
 }
 
@@ -524,7 +524,7 @@
     border: none;
     text-transform: uppercase;
     position: relative;
-    color: #141414;
+    color: var(--very-dark-grey);
     line-height: 2.5em;
     padding: 0 .3em 0 0;
     text-align: left;
@@ -597,35 +597,35 @@
 .header.block .mobile-nav .mobile-social-nav .twitter::before{
     content: '\e61b';
     font-family: var(--ff-fontawesome);
-    color: #3c3a3b;
+    color: var(--dark-grey);
     font-size: 36px;
 }
 
 .header.block .mobile-nav .mobile-social-nav .facebook::before{
     content: '\f39e';
     font-family: var(--ff-fontawesome);
-    color: #3c3a3b;
+    color: var(--dark-grey);
     font-size: 36px;
 }
 
 .header.block .mobile-nav .mobile-social-nav .instagram::before{
     content: '\f16d';
     font-family: var(--ff-fontawesome);
-    color: #3c3a3b;
+    color: var(--dark-grey);
     font-size: 36px;
 }
 
 .header.block .mobile-nav .mobile-social-nav .youtube::before{
     content: '\f167';
     font-family: var(--ff-fontawesome);
-    color: #3c3a3b;
+    color: var(--dark-grey);
     font-size: 36px;
 }
 
 .header.block .mobile-nav .mobile-social-nav .pinterest::before{
     content: '\f231';
     font-family: var(--ff-fontawesome);
-    color: #3c3a3b;
+    color: var(--dark-grey);
     font-size: 36px;
 }
 
diff --git a/cigaradvisor/blocks/header/header.js b/cigaradvisor/blocks/header/header.js
index 40c67aeb..6b15c478 100644
--- a/cigaradvisor/blocks/header/header.js
+++ b/cigaradvisor/blocks/header/header.js
@@ -197,7 +197,7 @@ export default async function decorate(block) {
       const targetSecondaryNavClass = drop.dataset.secondarynav;
       const targetSecondaryNavBox = mobileNav.querySelector(`.${targetSecondaryNavClass}`);
       if (drop.getAttribute('aria-expanded') === 'false') {
-        targetSecondaryNavBox.style.display = 'block';
+        targetSecondaryNavBox.style.display = 'flex';
         drop.setAttribute('aria-expanded', 'true');
       } else {
         targetSecondaryNavBox.style.display = 'none';
diff --git a/cigaradvisor/styles/styles.css b/cigaradvisor/styles/styles.css
index f8d81224..71ed99a3 100644
--- a/cigaradvisor/styles/styles.css
+++ b/cigaradvisor/styles/styles.css
@@ -129,17 +129,51 @@
 
 :root {
   /* colors */
+  --deep-reddish-brown: #673841;
+  --very-dark-grey: #141414;
+  --black: #000;
+  --white: #fff;
+  --tan: #8e7b5c;
+  --subdued-gold: #b19b5e;
+  --silver: #ccc;
+  --very-light-grey: #ddd;
+  --grey: #333;
+  --light-grey: #d3d3d3;
+  --dark-grey: #3c3a3b;
 
   /* fonts */
-  --ff-arial: 'Arial', sans-serif;
-  --ff-opensans: 'Open Sans', 'Open Sans Fallback', sans-serif;
-  --ff-montserrat: 'Montserrat', 'Montserrat Fallback', sans-serif;
-  --ff-alfaslabone: 'Alfa Slab One', 'Alfa Slab One Fallback', cursive;
-  --ff-fontawesome: 'FontAwesome';
+   --ff-arial: 'Arial', sans-serif;
+   --ff-opensans: 'Open Sans', 'Open Sans Fallback', sans-serif;
+   --ff-montserrat: 'Montserrat', 'Montserrat Fallback', sans-serif;
+   --ff-alfaslabone: 'Alfa Slab One', 'Alfa Slab One Fallback', cursive;
+   --ff-fontawesome: 'FontAwesome';
 
   /* body sizes */
 
   /* heading sizes */
+  --heading-font-size-xxs: 18px;
+  --heading-font-size-xs: 20px;
+  --heading-font-size-s: 24px;
+  --heading-font-size-m: 26px;
+  --heading-font-size-l: 35px;
+  --heading-font-size-xl: 40px;
+
+  /* Font Weights */
+  --font-weight-extrabold: 700;
+  --font-weight-bold: 700;
+  --font-weight-semibold: 600;
+  --font-weight-normal: 400;
+  --font-weight-light: 300;
+  --font-weight-thin: 100;
+
+   /* Body */
+   --body-font-size-xxs: 10px;
+   --body-font-size-xs: 12px;
+   --body-font-size-s: 14px;
+   --body-font-size-m: 16px;
+   --body-font-size-l: 18px;
+   --body-font-size-xl: 20px;
+   --body-font-size-xxl: 24px;
 
   /* nav height */
   --nav-height: 60px;

From 03994aa8a4ef0040a09f3fec02c8f98125590e60 Mon Sep 17 00:00:00 2001
From: kailasnadh790 <53608019+kailasnadh790@users.noreply.github.com>
Date: Fri, 5 Jan 2024 15:59:15 -0500
Subject: [PATCH 22/24] Update styles.css

---
 cigaradvisor/styles/styles.css | 20 ++++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/cigaradvisor/styles/styles.css b/cigaradvisor/styles/styles.css
index 71ed99a3..57cdfed9 100644
--- a/cigaradvisor/styles/styles.css
+++ b/cigaradvisor/styles/styles.css
@@ -181,7 +181,7 @@
 
 body {
   display: none;
-  color: #333;
+  color: var(--grey);
   margin: 0;
 }
 
@@ -215,7 +215,7 @@ h2 {
   font-family: var(--ff-montserrat);
   font-weight: 900;
   text-transform: uppercase;
-  color: #141414;
+  color: var(--very-dark-grey);
   margin: 0 auto;
   font-size: 12px;
 }
@@ -223,7 +223,7 @@ h2 {
 a {
   font-family: var(--ff-montserrat);
   font-weight: 600;
-  color: #141414;
+  color: var(--very-dark-grey);
   font-size: 12px;
   background-color: transparent;
   text-decoration: none
@@ -232,7 +232,7 @@ a {
 p {
   font-family: var(--ff-opensans);
   font-weight: 600;
-  color: #141414;
+  color: var(--very-dark-grey);
   font-size: 12px;
   cursor: default
 }
@@ -255,7 +255,7 @@ ul {
 li {
   font-family: var(--ff-opensans);
   font-weight: 600;
-  color: #141414;
+  color: var(--very-dark-grey);
   font-size: 12px;
   cursor: default;
 }
@@ -272,18 +272,18 @@ input {
   width: 100%;
   max-width: 100%;
   vertical-align: middle;
-  background-color: #fff;
-  border-color: #ddd;
+  background-color: var(--white);
+  border-color: var(--very-light-grey);
   margin: 0;
 }
 
 button {
   font-family: montserrat, sans-serif;
   font-weight: 700;
-  color: #fff;
+  color: var(--white);
   text-transform: uppercase;
-  background-color: #8e7b5c;
-  border-color: #8e7b5c;
+  background-color: var(--tan);
+  border-color: var(--tan);
   display: inline-block;
   line-height: 26px;
   height: 50px;

From de40f3ecf53f07a524003692a5168b561a905170 Mon Sep 17 00:00:00 2001
From: kailasnadh790 <53608019+kailasnadh790@users.noreply.github.com>
Date: Fri, 5 Jan 2024 16:13:18 -0500
Subject: [PATCH 23/24] decorateExternalLink

---
 cigaradvisor/blocks/header/header.js |  3 ++-
 cigaradvisor/scripts/scripts.js      | 14 ++++++++++++++
 2 files changed, 16 insertions(+), 1 deletion(-)

diff --git a/cigaradvisor/blocks/header/header.js b/cigaradvisor/blocks/header/header.js
index 6b15c478..1e8ac8a0 100644
--- a/cigaradvisor/blocks/header/header.js
+++ b/cigaradvisor/blocks/header/header.js
@@ -1,6 +1,6 @@
 import { getMetadata } from '../../scripts/aem.js';
 import { loadFragment } from '../fragment/fragment.js';
-import { decorateSocialLinks } from '../../scripts/scripts.js';
+import { decorateSocialLinks, decorateExternalLink } from '../../scripts/scripts.js';
 
 /**
  * Decorates the header block with navigation elements.
@@ -157,6 +157,7 @@ export default async function decorate(block) {
   navWrapper.append(nav);
   navWrapper.append(mobileNav);
   block.append(navWrapper);
+  decorateExternalLink(block);
 
   const navDrops = nav.querySelectorAll('.nav-drop');
   navDrops.forEach((drop) => {
diff --git a/cigaradvisor/scripts/scripts.js b/cigaradvisor/scripts/scripts.js
index 50069c77..d79b0da3 100644
--- a/cigaradvisor/scripts/scripts.js
+++ b/cigaradvisor/scripts/scripts.js
@@ -107,6 +107,20 @@ export function isExternal(path) {
   }
 }
 
+/**
+ * Decorates external links by adding target="_blank" and rel="noopener".
+ * @param {HTMLElement} element - The element containing the external links.
+ */
+export function decorateExternalLink(element) {
+  const anchors = element.querySelectorAll('a');
+  anchors.forEach((a) => {
+    if (isExternal(a.getAttribute('href'))) {
+      a.setAttribute('target', '_blank');
+      a.setAttribute('rel', 'noopener');
+    }
+  });
+}
+
 /**
  * Decorates social links by adding classes based on their text content.
  * @param {HTMLElement} element - The element containing the social links.

From a6b55d7feff478b70c43a4e184680b21c6a6b114 Mon Sep 17 00:00:00 2001
From: kailasnadh790 <53608019+kailasnadh790@users.noreply.github.com>
Date: Mon, 8 Jan 2024 15:07:02 -0500
Subject: [PATCH 24/24] Update header.css

---
 cigaradvisor/blocks/header/header.css | 1 +
 1 file changed, 1 insertion(+)

diff --git a/cigaradvisor/blocks/header/header.css b/cigaradvisor/blocks/header/header.css
index 37e44b9d..ce944be6 100644
--- a/cigaradvisor/blocks/header/header.css
+++ b/cigaradvisor/blocks/header/header.css
@@ -430,6 +430,7 @@
 
 .header.block .mobile-nav .mobile-top-nav .default-content-wrapper p {
    width: 35%;
+   font-size: 10px;
 }
 
 .header.block .mobile-nav .mobile-top-nav .default-content-wrapper ul li {