@iamproperty/components 7.7.1--beta6 → 7.7.1--beta7

package/assets/sass/components/nav.global.scss

@@ -1,870 +1,870 @@
-@use 'sass:math';
-@use '../_func' as *;
-
-
-
-/*  Default colour  */
-iam-nav {
-
-  > :not([slot="logo"],[slot="secondary"]) {
-    color-scheme: light;
-  }
-
-  > [slot="secondary"] {
-    color-scheme: light;
-  }
-
-  > .nav--menu {
-    --colour-heading: var(--colour-primary-theme);
-    color-scheme: light;
-  }
-}
-
-iam-nav:is(.bg-primary, .bg-danger, .bg-dark) {
-
-  > :not([slot="logo"],[slot="secondary"]) {
-    color-scheme: light;
-  }
-}
-
-.dark-theme iam-nav {
-
-  > :not([slot="logo"],[slot="secondary"]) {
-    color-scheme: dark;
-  }
-  
-  > .nav--menu {
-    --colour-heading: var(--colour-white);
-    color-scheme: dark;
-  }
-}
-
-.dark-theme iam-nav:is(.bg-primary, .bg-danger, .bg-dark) {
-
-  --menu-btn-colour: var(--colour-white);
-}
-  
-  @media (prefers-color-scheme: dark) {
-    html:not(.light-theme) iam-nav:is(.bg-primary, .bg-danger, .bg-dark) {
-
-      --menu-btn-colour: var(--colour-heading);
-    }
-  }
-
-
-@media screen and (min-width: 62em) {
-  iam-nav:is(.bg-primary, .bg-danger, .bg-dark) {
-    > :not([slot="logo"],[slot="secondary"],[slot="menus"]) {
-      color-scheme: dark;
-    }
-
-    > details > div {
-      color-scheme: light;
-    }
-  }
-
-  .dark-theme iam-nav:is(.bg-primary, .bg-danger, .bg-dark) {
-
-    > :not([slot="logo"],[slot="secondary"],[slot="menus"]) {
-      color-scheme: light;
-    }
-
-    
-    > details > div {
-      color-scheme: dark;
-    }
-
-  }
-
-  @media (prefers-color-scheme: dark) {
-    html:not(.light-theme) iam-nav:is(.bg-primary, .bg-danger, .bg-dark) {
-      > :not([slot="logo"],[slot="secondary"],[slot="menus"]) {
-        color-scheme: light;
-      }
-
-        
-      > details > div {
-        color-scheme: dark;
-      }
-    }
-  }
-
-}
-
-body:has(iam-nav.open:not(.nav--sticky,.demo-open):not(.nav--xs-sticky)) {
-  max-height: 100vh;
-  overflow: hidden;
-}
-
-body {
-  --nav-height: 6rem; /* 96 */
-  --sticky-padding: 0px;
-
-  &:has(iam-nav a[slot='secondary']) {
-    --nav-height: 8.5rem; /* 96 + 40 */
-  }
-
-  &:has(iam-nav.nav--sticky) {
-    --sticky-padding: var(--nav-height);
-  }
-}
-
-/* #region Create the correct padding top of the page */
-nav:has(iam-nav) {
-  min-height: 6rem; /* 96 */
-  display: block;
-  position: relative;
-
-  iam-nav {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    z-index: var(--index-menu);
-  }
-}
-
-@media screen and (min-width: 62em) {
-  nav:has(iam-nav a[slot='secondary']) {
-    min-height: 8.5rem; /* 96 + 40 */
-  }
-}
-
-nav:has(iam-nav.nav--sticky) {
-  position: sticky;
-  top: 0;
-  left: 0;
-  right: 0;
-  z-index: 9999;
-
-  iam-nav {
-    position: fixed;
-    outline: 2px solid #eeeeee;
-  transition: margin 1s;
-  }
-}
-
-@media screen and (max-width: 36em) {
-  body:has(iam-nav.open:not(.nav--xs-sticky,.demo-open)) {
-    max-height: 100vh;
-    overflow: hidden;
-    margin-top: 0rem;
-  }
-
-  nav:has(iam-nav.nav--xs-sticky) {
-    position: sticky;
-    top: 0;
-    left: 0;
-    right: 0;
-    z-index: 9999;
-    transition: margin 1s;
-
-    iam-nav {
-      position: fixed;
-    }
-  }
-
-  body[data-direction='down'].past100 nav:has(.nav--xs-sticky) {
-    
-  margin-top: -8rem;
-  }
-}
-
-@media screen and (min-width: 36em) {
-  body:has(iam-nav.open:not(.nav--sticky)) {
-    max-height: 100vh;
-    overflow: hidden;
-  }
-}
-
-body[data-direction='down'].past100 nav:has(.nav--sticky) .nav--sticky{
-  /* transform: translate(0, -100%); */
-
-  margin-top: -8rem;
-}
-
-/* #endregion */
-
-/* #region General styles */
-iam-nav {
-  --nav-height: 6rem; /* 96 */
-
-  &:has(a[slot='secondary']) {
-    --nav-height: 8.5rem; /* 96 + 40 */
-  }
-
-  overscroll-behavior: contain !important;
-  background-color: var(--colour-canvas);
-  display: block;
-  margin-left: auto;
-  margin-right: auto;
-  padding: var(--container-padding);
-  padding-top: 1.5rem;
-  padding-bottom: 1.5rem;
-  width: 100%;
-
-  .brand {
-    font-size: 3rem;
-    height: 3rem;
-    padding: 0;
-    text-decoration: none;
-    min-width: min(var(--svg-width), 14rem);
-    margin-right: auto;
-
-    img {
-      height: 100%;
-      width: auto;
-    }
-  }
-
-  a:not([slot='logo']):not(.btn):not(:has(iam-card)) {
-    text-decoration: none;
-
-    .badge {
-      position: absolute;
-      right: 0;
-      top: 50%;
-      margin-top: -0.8rem;
-    }
-
-    &:where(:hover, :focus, .selected, [aria-current='page']) {
-      text-decoration: underline;
-      text-underline-offset: 0.3em;
-      text-decoration-thickness: 2px;
-      text-decoration-color: var(--colour-underline);
-    }
-    &:active {
-      text-decoration-color: #a2d393 !important;
-    }
-
-    &.active,
-    &.selected,
-    &[aria-current='page'] {
-      text-decoration-color: var(--colour-info) !important;
-    }
-  }
-
-
-}
-
-@container style(--body-theme: dark) {
-  iam-nav.bg-primary [slot="secondary"] {
-    --colour-link: white;
-  }
-}
-
-iam-nav details {
-  padding-bottom: 0;
-
-  > summary {
-    text-decoration: none;
-
-    &:where(:hover, :focus, .selected) {
-      text-decoration: underline;
-      text-underline-offset: 0.3em;
-      text-decoration-thickness: 2px;
-      text-decoration-color: var(--colour-underline);
-    }
-    &:active {
-      text-decoration-color: #a2d393 !important;
-    }
-  }
-
-  &[open] > summary {
-    text-decoration: underline;
-    text-underline-offset: 0.3em;
-    text-decoration-thickness: 2px;
-    text-decoration-color: var(--colour-success);
-  }
-
-  &:has([aria-current='page']:not([data-duplicate])) > summary {
-    text-decoration: underline;
-    text-underline-offset: 0.3em;
-    text-decoration-thickness: 2px;
-    text-decoration-color: var(--colour-info);
-  }
-}
-
-/* #endregion */
-
-/* #region mobile and tablet mega menu */
-iam-nav details {
-  @container style(--mobDetails) {
-
-    margin-left: -1.5rem;
-    margin-right: -1.5rem;
-    padding-inline: 1.5rem;
-    width: auto;
-    position: relative;
-
-    summary {
-      background-color: var(--colour-canvas-2);
-
-      /*
-      @container style(--theme: dark) {
-        background-color: var(--colour-canvas-2);
-      }
-        */
-      display: block;
-      border: none;
-      color: var(--colour-link);
-      margin: 0;
-
-      margin-left: -1.5rem;
-      margin-right: -1.5rem;
-      padding: 1.5rem 4rem 1.5rem 1.5rem;
-      font-size: 1rem;
-      line-height: 1.5rem;
-      min-height: 1.5rem;
-      position: relative;
-      font-weight: normal;
-
-      &:after {
-        content: '\f055';
-        display: block;
-        font-size: 1.5rem;
-        font-weight: 300;
-        position: absolute;
-        top: 1.5rem;
-        right: 1.5rem;
-        font-family: 'Font Awesome 7 Pro';
-        line-height: 1em;
-      }
-    }
-
-    &[open] > summary:after {
-      content: '\f056';
-      font-weight: bold;
-    }
-
-    a {
-      text-decoration: none;
-      display: block;
-      border: none;
-      color: var(--colour-link);
-      margin: 0;
-      margin-left: 3rem;
-      padding: 1.5rem 0 1.5rem 0;
-      font-size: 1rem;
-      line-height: 1.5rem;
-      min-height: 1.5rem;
-      position: relative;
-      font-weight: normal;
-
-      &:after {
-        background: var(--colour-border) !important;
-        top: calc(100% - 2px) !important;
-        width: 100% !important;
-      }
-    }
-
-    /*  Hide cards */
-    a:has(iam-card) {
-      display: none !important;
-    }
-
-    > div a:last-child {
-      margin-bottom: 0 !important;
-    }
-
-    > div a:last-child:after {
-      display: none;
-    }
-
-    &:after {
-      content: '';
-      position: absolute;
-      top: calc(100% - 2px);
-      left: 1.5rem;
-      height: 2px;
-      width: calc(100% - 3rem);
-      display: block;
-      height: 2px;
-      background-color: var(--colour-border) !important;
-    }
-  }
-}
-@media screen and (max-width: 62em) {
-
-  iam-nav details {
-
-    background-color: #eeeeee;
-  }
-  iam-nav {
-    --mobDetails: 'true';
-
-    /*  Sub details */
-    details details {
-      &:after {
-        display: none;
-      }
-
-      summary {
-        padding: 0 1.5rem 1.5rem 3.5rem;
-        position: relative;
-      }
-
-      summary:after {
-        left: 1.5rem;
-        font-size: 1rem;
-        top: 0.1875rem; /* 3 */
-        transform: none;
-        font-weight: 400;
-      }
-
-      > div {
-        color-scheme: light;
-      }
-    }
-
-    details a + details > summary {
-      padding-top: 1.5rem;
-
-      &:after {
-        margin-top: 1.5rem;
-      }
-    }
-
-    details details[open] + details:before {
-      content: '';
-      display: block;
-      background: var(--colour-canvas-2);
-      padding-top: 1.5rem;
-      margin-left: -1.5rem;
-      margin-right: -1.5rem;
-    }
-  }
-}
-
-/* #endregion */
-
-/* #region tablet mega menu tweaks */
-iam-nav details {
-
-  @container style(--tabletDetails) {
-    padding-right: 2.5rem;
-    margin-right: -2.5rem;
-
-    &:after {
-      width: calc(100% - 4rem);
-    }
-
-    summary {
-      padding-right: 2.5rem;
-      margin-right: -2.5rem;
-
-      &:after {
-        right: 2.5rem;
-      }
-    }
-  }
-}
-
-@media screen and (max-width: 62em) and (min-width: 36em) {
-  iam-nav {
-    --tabletDetails: 'true';
-  }
-
-  iam-nav details details[open] + details:before {
-    padding-right: 2.5rem;
-    margin-right: -2.5rem; /* -40 */
-  }
-}
-
-@media screen and (min-width: 62em) {
-  iam-nav .nav--menu {
-    --mobDetails: 'true';
-    --tabletDetails: 'true';
-  }
-}
-
-/* #endregion */
-
-/* #region Desktop mega menu */
-@media screen and (min-width: 62em) {
-  iam-nav > details,
-  iam-nav *:not(.nav--menu) > details {
-    width: auto;
-
-    > summary {
-      display: block;
-      border: none;
-      color: var(--colour-link);
-      margin: 0;
-      font-size: 1rem;
-      line-height: 6rem; /* 96 */
-      min-height: 6rem; /* 96 */
-      margin-block: -1.5rem;
-      position: relative;
-      font-weight: normal;
-      white-space: nowrap;
-      padding-right: 1.5rem;
-
-      &:after {
-        content: '\f078';
-        display: block;
-        font-size: 1rem;
-        font-weight: 300;
-        position: absolute;
-        top: 50%;
-        transform: translate(0, -50%);
-        right: 0;
-        font-family: 'Font Awesome 7 Pro';
-        line-height: 1em;
-      }
-    }
-
-    &:not(:first-child) > summary {
-      margin-left: 1.5rem;
-    }
-
-    div {
-      display: none;
-    }
-
-    &[open] > div {
-      position: absolute;
-      display: block;
-      top: 100%;
-      left: 0;
-      width: 100%;
-      padding-inline: max(
-        var(--padding-inline),
-        calc((100% - var(--container-max-width)) / 2 + var(--padding-inline))
-      ) !important;
-      box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.11);
-
-    }
-
-    &[open] > div:has(details) {
-      background: var(--colour-canvas-2);
-
-      > a {
-        display: inline-block !important;
-        margin-right: 2rem !important;
-
-        &:first-child {
-          margin-right: 0;
-        }
-
-        &:after {
-          display: none !important;
-        }
-      }
-
-      a:has(iam-card) {
-        display: none;
-      }
-      details {
-        display: inline-block;
-
-        summary {
-          display: inline-block;
-          margin-left: 0 !important;
-          margin-right: 2rem;
-        }
-
-        &:first-child summary {
-          margin-left: 0;
-        }
-      }
-    }
-
-    &[open] > div:not(:has(details)) {
-      background: var(--colour-canvas);
-
-
-      padding-top: 8rem; /* (40 + 88); */
-      padding-bottom: 4rem; /* 64 */
-      columns: 3;
-      column-gap: 6.875rem;
-
-      > a {
-        margin-right: 0 !important;
-        display: block;
-        max-height: 6rem;
-
-        &.double-height {
-          min-height: 6rem;
-        }
-      }
-
-      a:has(iam-card) {
-        display: inline-block;
-      }
-
-      &:before {
-        content: attr(data-title);
-        display: block;
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: 100%;
-        color: var(--colour-white);
-        padding-inline: max(
-          var(--padding-inline),
-          calc((100% - var(--container-max-width)) / 2 + var(--padding-inline))
-        ) !important;
-        font-size: 2rem;
-        font-weight: bold;
-        line-height: 5.5rem;
-
-        --gradient-direction: 90deg;
-        background-color: var(--colour-info-theme);
-        background-image: linear-gradient(
-          var(--gradient-direction),
-          var(--colour-primary-theme) 0,
-          transparent 100%
-        ) !important;
-      }
-
-      &:has(iam-card) {
-        column-gap: 1rem;
-
-        a:not(:has(iam-card)) {
-          margin-right: 5.875rem !important;
-        }
-
-        a:has(iam-card) {
-          &:after {
-            display: none;
-          }
-        }
-        a:not(:has(iam-card)) + a:has(iam-card) {
-          break-before: column;
-        }
-      }
-    }
-
-    a:not([slot='logo']):not(.btn):not(:has(iam-card)) {
-      font-size: 1rem;
-      line-height: 1.5rem;
-      padding-block: 1.5rem;
-      position: relative;
-      font-weight: normal;
-      display: block;
-      margin: 0;
-
-      &:where(:hover, :focus, .selected, [aria-current='page']) {
-        text-decoration: underline;
-        text-underline-offset: 0.3em;
-        text-decoration-thickness: 2px;
-        text-decoration-color: var(--colour-underline);
-      }
-      &:active {
-        text-decoration-color: #a2d393 !important;
-      }
-      &.selected,
-      &[aria-current='page'] {
-        text-decoration-color: var(--colour-info);
-      }
-
-      &:after {
-        content: '';
-        display: block;
-        height: 2px;
-        width: 100% !important;
-        top: calc(100% - 2px);
-        background-color: var(--colour-border) !important;
-      }
-    }
-
-    details > summary {
-      padding-right: 0;
-      background: transparent;
-
-      &:after {
-        display: none;
-      }
-    }
-
-    details:not(:first-child) > summary {
-      margin-left: 2rem;
-    }
-  }
-
-  nav:has(iam-nav.open) {
-    min-height: 100vh !important;
-    max-height: 100vh;
-    overflow: auto;
-
-    margin-bottom: calc((100vh - var(--nav-height)) * -1);
-  }
-
-  html:has(iam-nav.open:not(.demo-open)) {
-    overflow: hidden;
-  }
-}
-
-/*  4 columns on large screens */
-@media screen and (min-width: 80em) {
-  /*  1280 */
-  iam-nav.nav--large *:not(.nav--menu) > details {
-    &[open] > div:not(:has(details)) {
-      columns: 4;
-      column-gap: 6.875rem;
-    }
-  }
-}
-
-/* #endregion */
-
-/* #region Search */
-@media screen and (min-width: 62em) {
-  iam-nav {
-    &.search-open {
-      > *:not([slot='logo']):not([slot='secondary']):not([slot='search']) {
-        display: none !important;
-      }
-    }
-  }
-}
-/* #endregion */
-
-/* #region Dual navbar in desktop */
-@media screen and (min-width: 62em) {
-  iam-nav:has([slot='dual']) {
-    .brand:has(~ [slot='dual']) {
-      margin-right: 1.5rem !important;
-    }
-
-    *:not([slot='dual']):has(+ [slot='dual']) + [slot='dual'] {
-      margin-left: auto !important;
-    }
-
-    .btn[slot='dual'] {
-      margin-left: 0;
-    }
-
-    &::part(btn-menu) {
-      margin-left: 1rem !important;
-    }
-  }
-}
-/* #endregion */
-
-/* #region compact menus on mobile */
-iam-nav > .dialog__wrapper {
-  .dialog--list {
-    a {
-      font-size: 1rem;
-    }
-  }
-}
-
-@media screen and (max-width: 62em) {
-  iam-nav > .dialog__wrapper:not(.dialog--xs) {
-    width: 100%;
-
-    .btn-compact {
-      display: none !important;
-    }
-    .dialog--list {
-      display: contents !important;
-
-      a {
-        font-size: 1rem;
-      }
-    }
-  }
-
-  iam-nav > .dialog__wrapper:not(.dialog--xs) .dialog--list a,
-  iam-nav .btn-compact {
-    --compact-size: 2rem;
-    all: unset;
-    display: block !important;
-    font-size: 0.875rem !important;
-    line-height: 2rem !important;
-    height: 2rem !important;
-    min-height: 2rem !important;
-    max-height: 2rem !important;
-    width: 100% !important;
-    margin: 0 !important;
-    cursor: pointer;
-    color: var(--colour-link);
-    font-weight: normal !important;
-
-    &:where(:hover, :focus, .selected, [aria-current='page']) {
-      text-decoration: underline;
-      text-underline-offset: 0.3em;
-      text-decoration-thickness: 2px;
-      text-decoration-color: var(--colour-underline);
-    }
-
-    &:before {
-      display: inline-block;
-      width: auto;
-      position: static;
-      margin-right: 0.5rem;
-      font-size: 0.875rem !important;
-      text-decoration: none !important;
-    }
-
-    &:after {
-      display: none;
-    }
-  }
-}
-/* #endregion */
-
-/* #region navbar additional menus */
-
-iam-nav .nav--menu {
-  outline: none !important;
-
-  &::-webkit-scrollbar {
-    width: 6px;
-  }
-
-  &::-webkit-scrollbar-track {
-    border: 0 !important;
-  }
-
-  &::-webkit-scrollbar-thumb {
-    border: 0 !important;
-  }
-
-  hr {
-    width: 100% !important;
-    border-top: 2px solid var(--colour-border) !important;
-  }
-  a {
-    display: block !important;
-    line-height: 1.25rem !important;
-    padding: 1.5rem 0 !important;
-    margin: 0 !important;
-
-    &:not(.mb-0):not(:has(+ a)) {
-      margin: 0 0 2.25rem 0 !important;
-    }
-
-    flex-shrink: 0;
-    font-size: 1rem !important;
-    font-weight: normal !important;
-
-    &:has(+ a) {
-      margin-bottom: 0 !important;
-    }
-
-    &:after {
-      content: '';
-      display: block;
-      height: 2px;
-      width: 100% !important;
-      background-color: var(--colour-border) !important;
-      top: calc(100% - 2px) !important;
-    }
-  }
-
-  > button {
-    min-width: 100%;
-    text-align: center;
-  }
-
-  &.closed * {
-    display: none !important;
-  }
-}
-
-
-/* #endregion */
+@use 'sass:math';
+@use '../_func' as *;
+
+
+
+/*  Default colour  */
+iam-nav {
+
+  > :not([slot="logo"],[slot="secondary"]) {
+    color-scheme: light;
+  }
+
+  > [slot="secondary"] {
+    color-scheme: light;
+  }
+
+  > .nav--menu {
+    --colour-heading: var(--colour-primary-theme);
+    color-scheme: light;
+  }
+}
+
+iam-nav:is(.bg-primary, .bg-danger, .bg-dark) {
+
+  > :not([slot="logo"],[slot="secondary"]) {
+    color-scheme: light;
+  }
+}
+
+.dark-theme iam-nav {
+
+  > :not([slot="logo"],[slot="secondary"]) {
+    color-scheme: dark;
+  }
+  
+  > .nav--menu {
+    --colour-heading: var(--colour-white);
+    color-scheme: dark;
+  }
+}
+
+.dark-theme iam-nav:is(.bg-primary, .bg-danger, .bg-dark) {
+
+  --menu-btn-colour: var(--colour-white);
+}
+  
+  @media (prefers-color-scheme: dark) {
+    html:not(.light-theme) iam-nav:is(.bg-primary, .bg-danger, .bg-dark) {
+
+      --menu-btn-colour: var(--colour-heading);
+    }
+  }
+
+
+@media screen and (min-width: 62em) {
+  iam-nav:is(.bg-primary, .bg-danger, .bg-dark) {
+    > :not([slot="logo"],[slot="secondary"],[slot="menus"]) {
+      color-scheme: dark;
+    }
+
+    > details > div {
+      color-scheme: light;
+    }
+  }
+
+  .dark-theme iam-nav:is(.bg-primary, .bg-danger, .bg-dark) {
+
+    > :not([slot="logo"],[slot="secondary"],[slot="menus"]) {
+      color-scheme: light;
+    }
+
+    
+    > details > div {
+      color-scheme: dark;
+    }
+
+  }
+
+  @media (prefers-color-scheme: dark) {
+    html:not(.light-theme) iam-nav:is(.bg-primary, .bg-danger, .bg-dark) {
+      > :not([slot="logo"],[slot="secondary"],[slot="menus"]) {
+        color-scheme: light;
+      }
+
+        
+      > details > div {
+        color-scheme: dark;
+      }
+    }
+  }
+
+}
+
+body:has(iam-nav.open:not(.nav--sticky,.demo-open):not(.nav--xs-sticky)) {
+  max-height: 100vh;
+  overflow: hidden;
+}
+
+body {
+  --nav-height: 6rem; /* 96 */
+  --sticky-padding: 0px;
+
+  &:has(iam-nav a[slot='secondary']) {
+    --nav-height: 8.5rem; /* 96 + 40 */
+  }
+
+  &:has(iam-nav.nav--sticky) {
+    --sticky-padding: var(--nav-height);
+  }
+}
+
+/* #region Create the correct padding top of the page */
+nav:has(iam-nav) {
+  min-height: 6rem; /* 96 */
+  display: block;
+  position: relative;
+
+  iam-nav {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    z-index: var(--index-menu);
+  }
+}
+
+@media screen and (min-width: 62em) {
+  nav:has(iam-nav a[slot='secondary']) {
+    min-height: 8.5rem; /* 96 + 40 */
+  }
+}
+
+nav:has(iam-nav.nav--sticky) {
+  position: sticky;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 9999;
+
+  iam-nav {
+    position: fixed;
+    outline: 2px solid #eeeeee;
+  transition: margin 1s;
+  }
+}
+
+@media screen and (max-width: 36em) {
+  body:has(iam-nav.open:not(.nav--xs-sticky,.demo-open)) {
+    max-height: 100vh;
+    overflow: hidden;
+    margin-top: 0rem;
+  }
+
+  nav:has(iam-nav.nav--xs-sticky) {
+    position: sticky;
+    top: 0;
+    left: 0;
+    right: 0;
+    z-index: 9999;
+    transition: margin 1s;
+
+    iam-nav {
+      position: fixed;
+    }
+  }
+
+  body[data-direction='down'].past100 nav:has(.nav--xs-sticky) {
+    
+  margin-top: -8rem;
+  }
+}
+
+@media screen and (min-width: 36em) {
+  body:has(iam-nav.open:not(.nav--sticky)) {
+    max-height: 100vh;
+    overflow: hidden;
+  }
+}
+
+body[data-direction='down'].past100 nav:has(.nav--sticky) .nav--sticky{
+  /* transform: translate(0, -100%); */
+
+  margin-top: -8rem;
+}
+
+/* #endregion */
+
+/* #region General styles */
+iam-nav {
+  --nav-height: 6rem; /* 96 */
+
+  &:has(a[slot='secondary']) {
+    --nav-height: 8.5rem; /* 96 + 40 */
+  }
+
+  overscroll-behavior: contain !important;
+  background-color: var(--colour-canvas);
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+  padding: var(--container-padding);
+  padding-top: 1.5rem;
+  padding-bottom: 1.5rem;
+  width: 100%;
+
+  .brand {
+    font-size: 3rem;
+    height: 3rem;
+    padding: 0;
+    text-decoration: none;
+    min-width: min(var(--svg-width), 14rem);
+    margin-right: auto;
+
+    img {
+      height: 100%;
+      width: auto;
+    }
+  }
+
+  a:not([slot='logo']):not(.btn):not(:has(iam-card)) {
+    text-decoration: none;
+
+    .badge {
+      position: absolute;
+      right: 0;
+      top: 50%;
+      margin-top: -0.8rem;
+    }
+
+    &:where(:hover, :focus, .selected, [aria-current='page']) {
+      text-decoration: underline;
+      text-underline-offset: 0.3em;
+      text-decoration-thickness: 2px;
+      text-decoration-color: var(--colour-underline);
+    }
+    &:active {
+      text-decoration-color: #a2d393 !important;
+    }
+
+    &.active,
+    &.selected,
+    &[aria-current='page'] {
+      text-decoration-color: var(--colour-info) !important;
+    }
+  }
+
+
+}
+
+@container style(--body-theme: dark) {
+  iam-nav.bg-primary [slot="secondary"] {
+    --colour-link: white;
+  }
+}
+
+iam-nav details {
+  padding-bottom: 0;
+
+  > summary {
+    text-decoration: none;
+
+    &:where(:hover, :focus, .selected) {
+      text-decoration: underline;
+      text-underline-offset: 0.3em;
+      text-decoration-thickness: 2px;
+      text-decoration-color: var(--colour-underline);
+    }
+    &:active {
+      text-decoration-color: #a2d393 !important;
+    }
+  }
+
+  &[open] > summary {
+    text-decoration: underline;
+    text-underline-offset: 0.3em;
+    text-decoration-thickness: 2px;
+    text-decoration-color: var(--colour-success);
+  }
+
+  &:has([aria-current='page']:not([data-duplicate])) > summary {
+    text-decoration: underline;
+    text-underline-offset: 0.3em;
+    text-decoration-thickness: 2px;
+    text-decoration-color: var(--colour-info);
+  }
+}
+
+/* #endregion */
+
+/* #region mobile and tablet mega menu */
+iam-nav details {
+  @container style(--mobDetails) {
+
+    margin-left: -1.5rem;
+    margin-right: -1.5rem;
+    padding-inline: 1.5rem;
+    width: auto;
+    position: relative;
+
+    summary {
+      background-color: var(--colour-canvas-2);
+
+      /*
+      @container style(--theme: dark) {
+        background-color: var(--colour-canvas-2);
+      }
+        */
+      display: block;
+      border: none;
+      color: var(--colour-link);
+      margin: 0;
+
+      margin-left: -1.5rem;
+      margin-right: -1.5rem;
+      padding: 1.5rem 4rem 1.5rem 1.5rem;
+      font-size: 1rem;
+      line-height: 1.5rem;
+      min-height: 1.5rem;
+      position: relative;
+      font-weight: normal;
+
+      &:after {
+        content: '\f055';
+        display: block;
+        font-size: 1.5rem;
+        font-weight: 300;
+        position: absolute;
+        top: 1.5rem;
+        right: 1.5rem;
+        font-family: 'Font Awesome 7 Pro';
+        line-height: 1em;
+      }
+    }
+
+    &[open] > summary:after {
+      content: '\f056';
+      font-weight: bold;
+    }
+
+    a {
+      text-decoration: none;
+      display: block;
+      border: none;
+      color: var(--colour-link);
+      margin: 0;
+      margin-left: 3rem;
+      padding: 1.5rem 0 1.5rem 0;
+      font-size: 1rem;
+      line-height: 1.5rem;
+      min-height: 1.5rem;
+      position: relative;
+      font-weight: normal;
+
+      &:after {
+        background: var(--colour-border) !important;
+        top: calc(100% - 2px) !important;
+        width: 100% !important;
+      }
+    }
+
+    /*  Hide cards */
+    a:has(iam-card) {
+      display: none !important;
+    }
+
+    > div a:last-child {
+      margin-bottom: 0 !important;
+    }
+
+    > div a:last-child:after {
+      display: none;
+    }
+
+    &:after {
+      content: '';
+      position: absolute;
+      top: calc(100% - 2px);
+      left: 1.5rem;
+      height: 2px;
+      width: calc(100% - 3rem);
+      display: block;
+      height: 2px;
+      background-color: var(--colour-border) !important;
+    }
+  }
+}
+@media screen and (max-width: 62em) {
+
+  iam-nav details {
+
+    background-color: #eeeeee;
+  }
+  iam-nav {
+    --mobDetails: 'true';
+
+    /*  Sub details */
+    details details {
+      &:after {
+        display: none;
+      }
+
+      summary {
+        padding: 0 1.5rem 1.5rem 3.5rem;
+        position: relative;
+      }
+
+      summary:after {
+        left: 1.5rem;
+        font-size: 1rem;
+        top: 0.1875rem; /* 3 */
+        transform: none;
+        font-weight: 400;
+      }
+
+      > div {
+        color-scheme: light;
+      }
+    }
+
+    details a + details > summary {
+      padding-top: 1.5rem;
+
+      &:after {
+        margin-top: 1.5rem;
+      }
+    }
+
+    details details[open] + details:before {
+      content: '';
+      display: block;
+      background: var(--colour-canvas-2);
+      padding-top: 1.5rem;
+      margin-left: -1.5rem;
+      margin-right: -1.5rem;
+    }
+  }
+}
+
+/* #endregion */
+
+/* #region tablet mega menu tweaks */
+iam-nav details {
+
+  @container style(--tabletDetails) {
+    padding-right: 2.5rem;
+    margin-right: -2.5rem;
+
+    &:after {
+      width: calc(100% - 4rem);
+    }
+
+    summary {
+      padding-right: 2.5rem;
+      margin-right: -2.5rem;
+
+      &:after {
+        right: 2.5rem;
+      }
+    }
+  }
+}
+
+@media screen and (max-width: 62em) and (min-width: 36em) {
+  iam-nav {
+    --tabletDetails: 'true';
+  }
+
+  iam-nav details details[open] + details:before {
+    padding-right: 2.5rem;
+    margin-right: -2.5rem; /* -40 */
+  }
+}
+
+@media screen and (min-width: 62em) {
+  iam-nav .nav--menu {
+    --mobDetails: 'true';
+    --tabletDetails: 'true';
+  }
+}
+
+/* #endregion */
+
+/* #region Desktop mega menu */
+@media screen and (min-width: 62em) {
+  iam-nav > details,
+  iam-nav *:not(.nav--menu) > details {
+    width: auto;
+
+    > summary {
+      display: block;
+      border: none;
+      color: var(--colour-link);
+      margin: 0;
+      font-size: 1rem;
+      line-height: 6rem; /* 96 */
+      min-height: 6rem; /* 96 */
+      margin-block: -1.5rem;
+      position: relative;
+      font-weight: normal;
+      white-space: nowrap;
+      padding-right: 1.5rem;
+
+      &:after {
+        content: '\f078';
+        display: block;
+        font-size: 1rem;
+        font-weight: 300;
+        position: absolute;
+        top: 50%;
+        transform: translate(0, -50%);
+        right: 0;
+        font-family: 'Font Awesome 7 Pro';
+        line-height: 1em;
+      }
+    }
+
+    &:not(:first-child) > summary {
+      margin-left: 1.5rem;
+    }
+
+    div {
+      display: none;
+    }
+
+    &[open] > div {
+      position: absolute;
+      display: block;
+      top: 100%;
+      left: 0;
+      width: 100%;
+      padding-inline: max(
+        var(--padding-inline),
+        calc((100% - var(--container-max-width)) / 2 + var(--padding-inline))
+      ) !important;
+      box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.11);
+
+    }
+
+    &[open] > div:has(details) {
+      background: var(--colour-canvas-2);
+
+      > a {
+        display: inline-block !important;
+        margin-right: 2rem !important;
+
+        &:first-child {
+          margin-right: 0;
+        }
+
+        &:after {
+          display: none !important;
+        }
+      }
+
+      a:has(iam-card) {
+        display: none;
+      }
+      details {
+        display: inline-block;
+
+        summary {
+          display: inline-block;
+          margin-left: 0 !important;
+          margin-right: 2rem;
+        }
+
+        &:first-child summary {
+          margin-left: 0;
+        }
+      }
+    }
+
+    &[open] > div:not(:has(details)) {
+      background: var(--colour-canvas);
+
+
+      padding-top: 8rem; /* (40 + 88); */
+      padding-bottom: 4rem; /* 64 */
+      columns: 3;
+      column-gap: 6.875rem;
+
+      > a {
+        margin-right: 0 !important;
+        display: block;
+        max-height: 6rem;
+
+        &.double-height {
+          min-height: 6rem;
+        }
+      }
+
+      a:has(iam-card) {
+        display: inline-block;
+      }
+
+      &:before {
+        content: attr(data-title);
+        display: block;
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        color: var(--colour-white);
+        padding-inline: max(
+          var(--padding-inline),
+          calc((100% - var(--container-max-width)) / 2 + var(--padding-inline))
+        ) !important;
+        font-size: 2rem;
+        font-weight: bold;
+        line-height: 5.5rem;
+
+        --gradient-direction: 90deg;
+        background-color: var(--colour-info-theme);
+        background-image: linear-gradient(
+          var(--gradient-direction),
+          var(--colour-primary-theme) 0,
+          transparent 100%
+        ) !important;
+      }
+
+      &:has(iam-card) {
+        column-gap: 1rem;
+
+        a:not(:has(iam-card)) {
+          margin-right: 5.875rem !important;
+        }
+
+        a:has(iam-card) {
+          &:after {
+            display: none;
+          }
+        }
+        a:not(:has(iam-card)) + a:has(iam-card) {
+          break-before: column;
+        }
+      }
+    }
+
+    a:not([slot='logo']):not(.btn):not(:has(iam-card)) {
+      font-size: 1rem;
+      line-height: 1.5rem;
+      padding-block: 1.5rem;
+      position: relative;
+      font-weight: normal;
+      display: block;
+      margin: 0;
+
+      &:where(:hover, :focus, .selected, [aria-current='page']) {
+        text-decoration: underline;
+        text-underline-offset: 0.3em;
+        text-decoration-thickness: 2px;
+        text-decoration-color: var(--colour-underline);
+      }
+      &:active {
+        text-decoration-color: #a2d393 !important;
+      }
+      &.selected,
+      &[aria-current='page'] {
+        text-decoration-color: var(--colour-info);
+      }
+
+      &:after {
+        content: '';
+        display: block;
+        height: 2px;
+        width: 100% !important;
+        top: calc(100% - 2px);
+        background-color: var(--colour-border) !important;
+      }
+    }
+
+    details > summary {
+      padding-right: 0;
+      background: transparent;
+
+      &:after {
+        display: none;
+      }
+    }
+
+    details:not(:first-child) > summary {
+      margin-left: 2rem;
+    }
+  }
+
+  nav:has(iam-nav.open) {
+    min-height: 100vh !important;
+    max-height: 100vh;
+    overflow: auto;
+
+    margin-bottom: calc((100vh - var(--nav-height)) * -1);
+  }
+
+  html:has(iam-nav.open:not(.demo-open)) {
+    overflow: hidden;
+  }
+}
+
+/*  4 columns on large screens */
+@media screen and (min-width: 80em) {
+  /*  1280 */
+  iam-nav.nav--large *:not(.nav--menu) > details {
+    &[open] > div:not(:has(details)) {
+      columns: 4;
+      column-gap: 6.875rem;
+    }
+  }
+}
+
+/* #endregion */
+
+/* #region Search */
+@media screen and (min-width: 62em) {
+  iam-nav {
+    &.search-open {
+      > *:not([slot='logo']):not([slot='secondary']):not([slot='search']) {
+        display: none !important;
+      }
+    }
+  }
+}
+/* #endregion */
+
+/* #region Dual navbar in desktop */
+@media screen and (min-width: 62em) {
+  iam-nav:has([slot='dual']) {
+    .brand:has(~ [slot='dual']) {
+      margin-right: 1.5rem !important;
+    }
+
+    *:not([slot='dual']):has(+ [slot='dual']) + [slot='dual'] {
+      margin-left: auto !important;
+    }
+
+    .btn[slot='dual'] {
+      margin-left: 0;
+    }
+
+    &::part(btn-menu) {
+      margin-left: 1rem !important;
+    }
+  }
+}
+/* #endregion */
+
+/* #region compact menus on mobile */
+iam-nav > .dialog__wrapper {
+  .dialog--list {
+    a {
+      font-size: 1rem;
+    }
+  }
+}
+
+@media screen and (max-width: 62em) {
+  iam-nav > .dialog__wrapper:not(.dialog--xs) {
+    width: 100%;
+
+    .btn-compact {
+      display: none !important;
+    }
+    .dialog--list {
+      display: contents !important;
+
+      a {
+        font-size: 1rem;
+      }
+    }
+  }
+
+  iam-nav > .dialog__wrapper:not(.dialog--xs) .dialog--list a,
+  iam-nav .btn-compact {
+    --compact-size: 2rem;
+    all: unset;
+    display: block !important;
+    font-size: 0.875rem !important;
+    line-height: 2rem !important;
+    height: 2rem !important;
+    min-height: 2rem !important;
+    max-height: 2rem !important;
+    width: 100% !important;
+    margin: 0 !important;
+    cursor: pointer;
+    color: var(--colour-link);
+    font-weight: normal !important;
+
+    &:where(:hover, :focus, .selected, [aria-current='page']) {
+      text-decoration: underline;
+      text-underline-offset: 0.3em;
+      text-decoration-thickness: 2px;
+      text-decoration-color: var(--colour-underline);
+    }
+
+    &:before {
+      display: inline-block;
+      width: auto;
+      position: static;
+      margin-right: 0.5rem;
+      font-size: 0.875rem !important;
+      text-decoration: none !important;
+    }
+
+    &:after {
+      display: none;
+    }
+  }
+}
+/* #endregion */
+
+/* #region navbar additional menus */
+
+iam-nav .nav--menu {
+  outline: none !important;
+
+  &::-webkit-scrollbar {
+    width: 6px;
+  }
+
+  &::-webkit-scrollbar-track {
+    border: 0 !important;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    border: 0 !important;
+  }
+
+  hr {
+    width: 100% !important;
+    border-top: 2px solid var(--colour-border) !important;
+  }
+  a {
+    display: block !important;
+    line-height: 1.25rem !important;
+    padding: 1.5rem 0 !important;
+    margin: 0 !important;
+
+    &:not(.mb-0):not(:has(+ a)) {
+      margin: 0 0 2.25rem 0 !important;
+    }
+
+    flex-shrink: 0;
+    font-size: 1rem !important;
+    font-weight: normal !important;
+
+    &:has(+ a) {
+      margin-bottom: 0 !important;
+    }
+
+    &:after {
+      content: '';
+      display: block;
+      height: 2px;
+      width: 100% !important;
+      background-color: var(--colour-border) !important;
+      top: calc(100% - 2px) !important;
+    }
+  }
+
+  > button {
+    min-width: 100%;
+    text-align: center;
+  }
+
+  &.closed * {
+    display: none !important;
+  }
+}
+
+
+/* #endregion */