/*-- -------------------------- -->
<---     Mobile Menu: Wet Paint     -->
<--- -------------------------- -*/

/* What sits on the menu's paint. The paint layer itself (.cs-paint, .cs-coat)
   is inlined from src/_includes/nav-critical.html so it exists at first paint,
   and nav.js drives it. Navigation is the documented max-width exception
   (CODESTITCH-STANDARDS §5.1): these rules cannot reach the desktop bar.

   This sheet is linked after every page stylesheet (base.html) because the
   original drop-down menu rules still live in each page's critical CSS and in
   local.css, and this file has to win the ties. Selectors start at
   #navigation .cs-ul-wrapper so they also outrank the old .cs-active rules. */

/* Mobile/Tablet Menu - up to 1023px */
@media only screen and (max-width: 63.9375rem) {
  #navigation .cs-ul-wrapper {
    width: 100%;
    /* the viewport left under the bar; nav.js keeps --cs-menu-h current */
    height: var(--cs-menu-h, 100vh);
    padding: clamp(1.5rem, 6vw, 2.5rem) 1rem 1.25rem;
    background: transparent;
    box-shadow: none;
    opacity: 1;
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: -1;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    visibility: hidden;
    transform: none;
    transition: none;
  }
  #navigation.cs-menu-visible .cs-ul-wrapper {
    visibility: visible;
  }
  /* Closed: collapse so nothing in the fixed header reaches the bottom of the
     viewport. iOS 26 Safari tints its toolbar from fixed content touching the
     bottom edge and keeps that tint while it stays there, hidden or not. */
  #navigation:not(.cs-menu-visible) .cs-ul-wrapper {
    height: 0;
    padding-top: 0;
    padding-bottom: 0;
  }
  #navigation .cs-ul-wrapper .cs-menu-topper {
    font-size: var(--topperFontSize);
    line-height: 1.2em;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin: 0 0 0.75rem 2.25rem;
    color: var(--primaryOnDark);
    display: block;
  }
  #navigation .cs-ul-wrapper .cs-ul {
    width: 100%;
    max-width: 40rem;
    height: auto;
    max-height: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    overflow: visible;
    counter-reset: cs-menu;
  }
  #navigation .cs-ul-wrapper .cs-li {
    text-align: left;
    width: 100%;
    padding: 0.25rem 0;
    display: grid;
    grid-template-columns: 2.25rem 1fr;
    align-items: start;
    position: relative;
    counter-increment: cs-menu;
  }
  /* editorial index number */
  #navigation .cs-ul-wrapper .cs-li:before {
    content: counter(cs-menu, decimal-leading-zero);
    content: counter(cs-menu, decimal-leading-zero) / "";
    font-family: var(--headerFont);
    font-size: 0.75rem;
    line-height: 1;
    font-weight: 700;
    letter-spacing: 0.08em;
    padding-top: 1rem;
    color: var(--primaryOnDark);
    grid-column: 1;
    grid-row: 1;
  }
  /* hairline under each item, drawn in as it arrives */
  #navigation .cs-ul-wrapper .cs-li:after {
    content: "";
    height: 1px;
    background: rgba(250, 251, 252, 0.1);
    display: block;
    position: absolute;
    right: 0;
    bottom: 0;
    left: 2.25rem;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 1.1s cubic-bezier(0.16, 1, 0.3, 1) 0.1s;
  }
  #navigation .cs-ul-wrapper .cs-li.cs-in:after {
    transform: scaleX(1);
  }
  #navigation .cs-ul-wrapper .cs-li-link {
    font-family: var(--headerFont);
    /* 34px - 48px */
    font-size: clamp(2.125rem, 9vw, 3rem);
    line-height: 1.15em;
    font-weight: 700;
    letter-spacing: -0.02em;
    text-align: left;
    margin: 0;
    padding: 0.25rem 0;
    color: var(--bodyTextColorWhite);
    display: inline-block;
    justify-self: start;
    grid-column: 2;
    grid-row: 1;
    position: relative;
    isolation: isolate;
    -webkit-tap-highlight-color: transparent;
  }
  #navigation .cs-ul-wrapper .cs-li-link:focus-visible {
    outline: 2px solid var(--primaryOnDark);
    outline-offset: 0.25rem;
  }
  /* brush stroke under the current page, and under whatever is pressed */
  #navigation .cs-ul-wrapper .cs-li-link:before {
    content: "";
    width: calc(100% + 0.75rem);
    height: 0.38em;
    background: var(--primary);
    opacity: 1;
    display: block;
    position: absolute;
    bottom: 0;
    left: -0.375rem;
    z-index: -1;
    -webkit-mask: url("/assets/images/brush-stroke.svg") center / 100% 100% no-repeat;
    mask: url("/assets/images/brush-stroke.svg") center / 100% 100% no-repeat;
    clip-path: inset(0 100% 0 0);
    transition: clip-path 0.45s cubic-bezier(0.65, 0, 0.35, 1);
  }
  #navigation .cs-ul-wrapper .cs-li.cs-in > .cs-li-link.cs-active:before,
  #navigation .cs-ul-wrapper .cs-li.cs-in > .cs-drop-toggle:has(+ .cs-drop-ul .cs-active):before {
    clip-path: inset(0);
    transition-duration: 0.6s;
    transition-delay: 0.35s;
  }
  #navigation .cs-ul-wrapper .cs-li-link:is(:focus-visible, .is-pressed, :active):before,
  #navigation .cs-ul-wrapper .cs-li.cs-keep > .cs-li-link:before {
    clip-path: inset(0);
    transition-delay: 0s;
  }

  /* Services: the toggle, then a deck of paint chips that fans open */
  #navigation .cs-ul-wrapper .cs-dropdown {
    color: inherit;
  }
  #navigation .cs-ul-wrapper .cs-drop-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
  }
  #navigation .cs-ul-wrapper .cs-drop-icon {
    width: 0.875rem;
    height: auto;
    opacity: 0.7;
    position: relative;
    top: auto;
    right: auto;
    transform: none;
    transition: transform 0.5s cubic-bezier(0.65, 0, 0.35, 1), opacity 0.3s;
  }
  #navigation .cs-ul-wrapper .cs-dropdown.cs-active .cs-drop-icon {
    opacity: 1;
    transform: rotate(180deg);
  }
  #navigation .cs-ul-wrapper .cs-drop-ul,
  #navigation .cs-ul-wrapper .cs-dropdown.cs-active .cs-drop-ul {
    width: 100%;
    /* nav.js animates this between 0 and the deck's height, then lets go */
    height: 0;
    margin: 0;
    padding: 0;
    background: none;
    opacity: 1;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    grid-column: 2;
    grid-row: 2;
    overflow: visible;
    visibility: hidden;
    /* chips are dealt out from under the Services row: anything below the
       list's current (animating) height is hidden, the fan above it is not */
    clip-path: inset(-1rem -1rem 0 -1rem);
    transition: height 0.6s cubic-bezier(0.65, 0, 0.35, 1), visibility 0s 0.6s;
  }
  #navigation .cs-ul-wrapper .cs-dropdown.cs-active .cs-drop-ul {
    height: auto;
    visibility: visible;
    transition: height 0.6s cubic-bezier(0.65, 0, 0.35, 1), visibility 0s;
  }
  /* collapsed, the chips are stacked and fanned around one rivet (like a paint
     fan deck); opening deals them down into a list */
  #navigation .cs-ul-wrapper .cs-drop-li {
    list-style: none;
    width: 100%;
    opacity: 0;
    transform-origin: 1.75rem 50%;
    transform: translate3d(0, calc(var(--cs-i) * (-100% - 0.5rem)), 0) rotate(calc(var(--cs-i) * -3.5deg - 2deg));
    transition: opacity 0.2s ease, transform 0.35s cubic-bezier(0.65, 0, 0.35, 1);
  }
  #navigation .cs-ul-wrapper .cs-dropdown.cs-active .cs-drop-li {
    opacity: 1;
    transform: none;
    transition: opacity 0.25s ease calc(var(--cs-i) * 55ms), transform 0.8s cubic-bezier(0.2, 0.85, 0.25, 1.12) calc(var(--cs-i) * 55ms);
  }
  /* spacing lives on the chips, not the list: height: 0 cannot swallow
     padding, so a sliver of the list would show while it is collapsed */
  #navigation .cs-ul-wrapper .cs-drop-li:first-child {
    margin-top: 0.75rem;
  }
  #navigation .cs-ul-wrapper .cs-drop-li:last-child {
    margin-bottom: 1rem;
  }
  /* one swatch per service, all brand colours */
  #navigation .cs-ul-wrapper .cs-drop-li:nth-of-type(1) {
    --cs-i: 0;
    --cs-swatch: var(--secondaryLight);
  }
  #navigation .cs-ul-wrapper .cs-drop-li:nth-of-type(2) {
    --cs-i: 1;
    --cs-swatch: var(--secondary);
  }
  #navigation .cs-ul-wrapper .cs-drop-li:nth-of-type(3) {
    --cs-i: 2;
    --cs-swatch: var(--primary);
  }
  #navigation .cs-ul-wrapper .cs-drop-li:nth-of-type(4) {
    --cs-i: 3;
    --cs-swatch: var(--primaryDark);
  }
  #navigation .cs-ul-wrapper .cs-drop-li:nth-of-type(5) {
    --cs-i: 4;
    --cs-swatch: var(--accent);
  }
  #navigation .cs-ul-wrapper .cs-li-link.cs-drop-link {
    font-family: var(--headerFont);
    font-size: 1.0625rem;
    line-height: 1.2em;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    white-space: normal;
    width: 100%;
    min-height: 4rem;
    padding: 0.5rem 1rem 0.5rem 0.5rem;
    background-color: var(--light);
    color: var(--headerColor);
    border-radius: 0.5rem;
    box-shadow: 0 1rem 2rem -1rem rgba(0, 0, 0, 0.6);
    opacity: 1;
    display: grid;
    grid-template-columns: 3rem 1fr 1.25rem;
    align-content: center;
    align-items: center;
    column-gap: 0.75rem;
  }
  #navigation .cs-ul-wrapper .cs-li-link.cs-drop-link.cs-active {
    box-shadow: inset 0 0 0 2px var(--primary), 0 1rem 2rem -1rem rgba(0, 0, 0, 0.6);
  }
  #navigation .cs-ul-wrapper .cs-li-link.cs-drop-link:focus-visible {
    outline-offset: 0.125rem;
  }
  /* the swatch, with a little wet sheen */
  #navigation .cs-ul-wrapper .cs-li-link.cs-drop-link:before {
    content: "";
    width: 3rem;
    height: 3rem;
    background-color: var(--cs-swatch);
    background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.32), rgba(255, 255, 255, 0) 55%);
    border-radius: 0.375rem;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
    display: block;
    grid-column: 1;
    grid-row: 1 / span 2;
    position: relative;
    bottom: auto;
    left: auto;
    z-index: auto;
    -webkit-mask: none;
    mask: none;
    clip-path: none;
    transition: transform 0.3s;
  }
  #navigation .cs-ul-wrapper .cs-li-link.cs-drop-link:after {
    content: "";
    width: 1.25rem;
    height: 1.25rem;
    background-color: var(--primary);
    display: block;
    grid-column: 3;
    grid-row: 1 / span 2;
    -webkit-mask: url("/assets/images/08dd196c2db9.svg") center / contain no-repeat;
    mask: url("/assets/images/08dd196c2db9.svg") center / contain no-repeat;
    transition: transform 0.3s;
  }
  #navigation .cs-ul-wrapper .cs-li-link.cs-drop-link:is(:focus-visible, .is-pressed, :active):before {
    transform: scale(0.92) rotate(-4deg);
  }
  #navigation .cs-ul-wrapper .cs-li-link.cs-drop-link:is(:focus-visible, .is-pressed, :active):after {
    transform: translate(0.125rem, -0.125rem);
  }
  #navigation .cs-ul-wrapper .cs-chip-note {
    font-family: var(--bodyFont);
    font-size: 0.8125rem;
    line-height: 1.3em;
    font-weight: 400;
    color: var(--bodyTextColor);
    display: block;
    grid-column: 2;
    grid-row: 2;
  }

  /* Quick actions, down in the thumb zone */
  #navigation .cs-ul-wrapper .cs-menu-actions {
    width: 100%;
    max-width: 40rem;
    margin-top: auto;
    padding-top: 2rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }
  #navigation .cs-ul-wrapper .cs-menu-actions .cs-button-solid {
    /* the actions column stretches its children; keep the brush stroke at its natural width.
       display overrides the header rule that hides the top-bar button on mobile */
    font-size: 1rem;
    margin: 1rem 0 1.5rem;
    display: inline-block;
    align-self: center;
  }
  #navigation .cs-ul-wrapper .cs-menu-actions .cs-button-solid:focus-visible {
    /* white focus ring on the navy coat */
    outline-color: var(--bodyTextColorWhite);
  }
  #navigation .cs-ul-wrapper .cs-menu-quick {
    display: flex;
    gap: 0.75rem;
  }
  #navigation .cs-ul-wrapper .cs-menu-pill {
    font-family: var(--headerFont);
    font-size: 1rem;
    line-height: 1.2em;
    font-weight: 700;
    text-decoration: none;
    /* matches the pill button: 46px - 56px */
    height: clamp(2.875rem, 8vw, 3.5rem);
    margin: 0;
    padding: 0 1rem;
    color: var(--bodyTextColorWhite);
    border: 1px solid rgba(250, 251, 252, 0.3);
    border-radius: 3.75rem;
    display: flex;
    flex: 1;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
  }
  #navigation .cs-ul-wrapper .cs-menu-pill:is(:hover, .is-pressed) {
    background-color: rgba(250, 251, 252, 0.1);
    border-color: rgba(250, 251, 252, 0.6);
  }
  #navigation .cs-ul-wrapper .cs-menu-pill:focus-visible {
    outline: 2px solid var(--primaryOnDark);
    outline-offset: 0.125rem;
  }
  #navigation .cs-ul-wrapper .cs-menu-icon {
    width: 1.25rem;
    height: 1.25rem;
    background-color: currentColor;
    display: block;
    flex: none;
    -webkit-mask: center / contain no-repeat;
    mask: center / contain no-repeat;
  }
  #navigation .cs-ul-wrapper .cs-menu-icon-call {
    -webkit-mask-image: url("/assets/images/cff5e249028d.svg");
    mask-image: url("/assets/images/cff5e249028d.svg");
  }
  #navigation .cs-ul-wrapper .cs-menu-icon-text {
    -webkit-mask-image: url("/assets/images/b9f6eb7061b3.svg");
    mask-image: url("/assets/images/b9f6eb7061b3.svg");
  }
  /* grabber: the paint can be dragged back up to close */
  #navigation .cs-ul-wrapper .cs-menu-grabber {
    width: 2.5rem;
    height: 0.25rem;
    margin: 0.75rem auto 0;
    background: rgba(250, 251, 252, 0.28);
    border-radius: 0.25rem;
    display: block;
  }

  /* Arrival: nav.js adds .cs-in to each item as the navy edge passes it */
  #navigation .cs-ul-wrapper .cs-menu-topper,
  #navigation .cs-ul-wrapper .cs-ul > .cs-li,
  #navigation .cs-ul-wrapper .cs-menu-actions > * {
    opacity: 0;
    transform: translate3d(0, 1.25rem, 0);
    transition: opacity 0.5s ease, transform 0.9s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.3s, border-color 0.3s;
  }
  #navigation .cs-ul-wrapper .cs-menu-topper.cs-in,
  #navigation .cs-ul-wrapper .cs-ul > .cs-li.cs-in,
  #navigation .cs-ul-wrapper .cs-menu-actions > .cs-in {
    opacity: 1;
    transform: none;
  }
  /* Departure: everything lifts off at once, except a tapped link handing off */
  #navigation .cs-ul-wrapper.cs-leaving .cs-menu-topper,
  #navigation .cs-ul-wrapper.cs-leaving .cs-ul > .cs-li,
  #navigation .cs-ul-wrapper.cs-leaving .cs-menu-actions > *,
  #navigation .cs-ul-wrapper.cs-leaving .cs-drop-li {
    opacity: 0;
    transform: none;
    transition: opacity 0.18s ease;
  }
  #navigation .cs-ul-wrapper.cs-leaving .cs-ul > .cs-li.cs-keep,
  #navigation .cs-ul-wrapper.cs-leaving .cs-dropdown.cs-active .cs-drop-li.cs-keep {
    opacity: 1;
  }

}

/* Small Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  /* Services is a button now, so a click (or keyboard) can hold it open */
  #navigation .cs-dropdown.cs-active .cs-drop-ul {
    opacity: 1;
    visibility: visible;
    transform: scaleY(1);
  }
  #navigation .cs-dropdown.cs-active .cs-drop-li {
    opacity: 1;
    transform: translateY(0);
  }
  #navigation .cs-drop-toggle:focus-visible {
    outline: 2px solid var(--primaryOnDark);
    outline-offset: 0.25rem;
  }
}

/* Dark Mode */
@media only screen and (max-width: 63.9375rem) {
  body.dark-mode #navigation .cs-ul-wrapper {
    background-color: transparent;
  }
  body.dark-mode #navigation .cs-ul-wrapper .cs-li-link.cs-drop-link {
    background-color: var(--medium);
    color: var(--bodyTextColorWhite);
  }
  body.dark-mode #navigation .cs-ul-wrapper .cs-li-link.cs-drop-link:after {
    background-color: var(--primaryOnDark);
  }
  body.dark-mode #navigation .cs-ul-wrapper .cs-chip-note {
    color: rgba(250, 251, 252, 0.7);
  }
}

/* Reduced motion: no pour, no dealing; the menu fades in */
@media only screen and (max-width: 63.9375rem) and (prefers-reduced-motion: reduce) {
  #navigation.cs-menu-visible .cs-paint,
  #navigation.cs-menu-visible .cs-ul-wrapper {
    animation: cs-menu-fade 0.2s ease;
  }
  #navigation .cs-ul-wrapper .cs-menu-topper,
  #navigation .cs-ul-wrapper .cs-ul > .cs-li,
  #navigation .cs-ul-wrapper .cs-menu-actions > *,
  #navigation .cs-ul-wrapper .cs-drop-li,
  #navigation .cs-ul-wrapper .cs-dropdown.cs-active .cs-drop-li {
    transform: none;
    transition: opacity 0.2s ease;
  }
  #navigation .cs-ul-wrapper .cs-li:after,
  #navigation .cs-ul-wrapper .cs-li-link:before,
  #navigation .cs-ul-wrapper .cs-drop-ul,
  #navigation .cs-ul-wrapper .cs-dropdown.cs-active .cs-drop-ul {
    transition: none;
  }
  #navigation .cs-toggle,
  #navigation .cs-toggle .cs-line {
    transition: none;
  }
}
@keyframes cs-menu-fade {
  from {
    opacity: 0;
  }
}