/* ==========================================================================
   Stirred By Grace - mobile / tablet header + menu drawer
   Applies at <=1024px only (Kadence's tablet header container, which is
   also what phones get). Desktop header is untouched.
   Loaded sitewide by wp-content/novamira-sandbox/sbg-mobile-nav.php.
   ========================================================================== */

@media (max-width: 1024px) {

  /* ---------- The bar ---------------------------------------------------- */

  /* Sticky, hides on scroll down, returns on scroll up (see mobile-nav.js).
     Hidden with `top`, never `transform` / `filter` / `backdrop-filter`:
     each of those would make the header the containing block for the
     fixed-position drawer that lives inside it. */
  body header.wp-block-kadence-header {
    position: sticky !important;
    top: 0;
    z-index: 60 !important;
    background: #FFFFFF;
    border-bottom: 1px solid transparent;
    transition: top .3s cubic-bezier(.2, .7, .2, 1), border-color .2s ease, box-shadow .2s ease;
  }
  body.sbg-hdr-scrolled header.wp-block-kadence-header {
    border-bottom-color: #E4DECF;
    box-shadow: 0 6px 18px -14px rgba(33, 30, 25, .35);
  }
  body.sbg-hdr-hidden header.wp-block-kadence-header {
    top: calc(-1 * var(--sbg-hdr-h, 64px) - 8px);
    box-shadow: none;
  }

  .wp-block-kadence-header-row641_fe3482-c9 .kadence-header-row-inner {
    min-height: 76px;
    padding: 6px 16px 6px 14px;
    align-items: center;
  }

  /* Logo: was a 120px square, which made the bar ~140px tall. */
  .kb-identity641_700e1d-95 .wp-block-site-logo { margin-right: 0 !important; line-height: 0; }
  .kb-identity641_700e1d-95 img.custom-logo {
    width: auto !important;
    height: 64px !important;
  }

  /* Menu button: a "Menu" pill with a two-line icon, replacing the grey
     square hamburger. */
  button.wp-block-kadence-off-canvas-trigger641_2e01e3-78,
  button.wp-block-kadence-off-canvas-trigger641_2e01e3-78:hover,
  button.wp-block-kadence-off-canvas-trigger641_2e01e3-78:focus:not([aria-expanded="false"]) {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    height: 44px;
    padding: 0 16px 0 18px;
    border: 1px solid #D9D2C1;
    border-radius: 999px;
    background: #FFFFFF;
    color: #211E19;
    font-family: "Public Sans", system-ui, sans-serif;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .01em;
    line-height: 1;
    cursor: pointer;
    transition: background-color .2s ease, border-color .2s ease, color .2s ease;
  }
  button.wp-block-kadence-off-canvas-trigger641_2e01e3-78:hover {
    border-color: #4B5A2E;
    background: #F1EDE3;
  }
  button.wp-block-kadence-off-canvas-trigger641_2e01e3-78:focus-visible {
    outline: 2px solid #4B5A2E;
    outline-offset: 2px;
  }
  button.wp-block-kadence-off-canvas-trigger641_2e01e3-78 svg { display: none; }
  button.wp-block-kadence-off-canvas-trigger641_2e01e3-78::before {
    content: "Menu";
  }
  button.wp-block-kadence-off-canvas-trigger641_2e01e3-78::after {
    content: "";
    width: 18px;
    height: 10px;
    background:
      linear-gradient(currentColor, currentColor) right top / 18px 2px no-repeat,
      linear-gradient(currentColor, currentColor) right bottom / 11px 2px no-repeat;
    border-radius: 2px;
  }


  /* While the drawer is open the header (its stacking context) must sit
     above everything else on the page, incl. Grow's floating widgets. */
  body.kb-modal-open header.wp-block-kadence-header,
  html.kb-modal-open header.wp-block-kadence-header { z-index: 2147483000 !important; top: 0 !important; }

  /* ---------- Existing sticky bars move down while the header shows ------ */

  body.sbg-hdr-pinned .wp-block-kadence-advancedbtn.kb-btnssbg4-equipment-btns.sbg-chipbar-mobile,
  body.sbg-hdr-pinned .sbg-archive-nav.is-sticky {
    top: var(--sbg-hdr-h, 64px);
  }
  .wp-block-kadence-advancedbtn.kb-btnssbg4-equipment-btns.sbg-chipbar-mobile,
  .sbg-archive-nav.is-sticky {
    transition: top .3s cubic-bezier(.2, .7, .2, 1);
  }

  /* ---------- The drawer ------------------------------------------------- */

  .sbg-mdrawer .kb-off-canvas-inner-wrap {
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100dvh;
    padding: 0 !important;
    background: #F7F3EA;
    overflow: hidden;
    box-shadow: -24px 0 48px -24px rgba(33, 30, 25, .35);
  }

  .sbg-mdrawer .kb-off-canvas-inner {
    position: relative;
    z-index: 1;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    padding: 26px 24px calc(120px + env(safe-area-inset-bottom, 0px));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Rolling waves at the foot of the sheet - the home hero's motif. */
  .sbg-mdrawer .kb-off-canvas-inner-wrap::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 96px;
    background:
      url("/wp-content/uploads/sbg-flair/wave-2.svg") 0 100% / 420px 64px repeat-x,
      url("/wp-content/uploads/sbg-flair/wave-1.svg") -140px 100% / 420px 84px repeat-x;
    opacity: .9;
    pointer-events: none;
    z-index: 0;
  }

  /* Close button */
  .sbg-mdrawer .kb-off-canvas-close {
    position: absolute;
    top: 12px;
    right: 14px;
    z-index: 3;
    width: 44px;
    height: 44px;
    padding: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #D9D2C1;
    border-radius: 999px;
    background: #FFFFFF;
    color: #211E19;
    transition: border-color .2s ease, background-color .2s ease;
  }
  .sbg-mdrawer .kb-off-canvas-close:hover { border-color: #4B5A2E; }
  .sbg-mdrawer .kb-off-canvas-close svg { width: 20px !important; height: 20px !important; }

  /* Eyebrow */
  .sbg-mdrawer p.sbg-mnav-eyebrow {
    margin: 0 60px 16px 0;
    font-family: "Mrs Saint Delafield", "Brush Script MT", cursive;
    font-size: 44px;
    line-height: 1.05;
    color: #4B5A2E;
    /* The script face ships in one weight; a hairline stroke thickens it. */
    -webkit-text-stroke: .7px currentColor;
    paint-order: stroke fill;
  }
  .sbg-mdrawer p.sbg-mnav-eyebrow a,
  .sbg-mdrawer p.sbg-mnav-eyebrow a:hover,
  .sbg-mdrawer p.sbg-mnav-eyebrow a:focus {
    color: inherit;
    text-decoration: none;
    box-shadow: none;
    background: none;
  }
  .sbg-mdrawer p.sbg-mnav-eyebrow a:focus-visible {
    outline: 2px solid #4B5A2E;
    outline-offset: 4px;
    border-radius: 4px;
  }

  /* Links */
  .sbg-mdrawer .wp-block-kadence-navigation,
  .sbg-mdrawer .wp-block-kadence-navigation nav,
  .sbg-mdrawer .wp-block-kadence-navigation .menu-container { width: 100%; }
  .sbg-mdrawer .wp-block-kadence-navigation ul.kb-navigation {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    border-top: 1px solid #D9D2C1;
  }
  .sbg-mdrawer .wp-block-kadence-navigation ul.kb-navigation > li {
    width: 100%;
    margin: 0;
    border-bottom: 1px solid #D9D2C1;
  }
  .sbg-mdrawer .wp-block-kadence-navigation li > .kb-link-wrap { width: 100%; }
  .sbg-mdrawer .wp-block-kadence-navigation li > .kb-link-wrap > a.kb-nav-link-content {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    padding: 18px 2px !important;
    color: #211E19;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
  }
  .sbg-mdrawer .wp-block-kadence-navigation .kb-nav-item-title-wrap {
    display: flex;
    flex-direction: column;
    align-items: flex-start !important;
    gap: 4px;
    min-width: 0;
    flex: 1 1 auto;
    text-align: left !important;
  }
  .sbg-mdrawer .wp-block-kadence-navigation .kb-nav-item-title-wrap > span { align-self: flex-start; text-align: left !important; }
  .sbg-mdrawer .wp-block-kadence-navigation .kb-nav-label-content {
    font-family: "Bricolage Grotesque", system-ui, sans-serif;
    font-size: 29px;
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -.025em;
    color: inherit;
  }
  .sbg-mdrawer .wp-block-kadence-navigation .kb-nav-label-description {
    font-family: "Public Sans", system-ui, sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: 0;
    color: #6B7550;
    margin: 0 !important;
  }
  /* Arrow chip */
  .sbg-mdrawer .wp-block-kadence-navigation li > .kb-link-wrap > a.kb-nav-link-content::after {
    content: "";
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    border-radius: 999px;
    border: 1px solid #D9D2C1;
    background: #FFFFFF url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234B5A2E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / 16px no-repeat;
    transition: transform .25s ease, background-color .2s ease, border-color .2s ease;
  }
  .sbg-mdrawer .wp-block-kadence-navigation li > .kb-link-wrap > a.kb-nav-link-content:hover::after,
  .sbg-mdrawer .wp-block-kadence-navigation li > .kb-link-wrap > a.kb-nav-link-content:active::after {
    transform: translateX(3px);
    border-color: #4B5A2E;
  }
  /* Current page */
  .sbg-mdrawer .wp-block-kadence-navigation li.current-menu-item > .kb-link-wrap > a.kb-nav-link-content { color: #4B5A2E; }
  .sbg-mdrawer .wp-block-kadence-navigation li.current-menu-item > .kb-link-wrap > a.kb-nav-link-content::after {
    border-color: #4B5A2E;
    background-color: #4B5A2E;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F1EDE3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
  }

  /* Search */
  .sbg-mdrawer form.sbg-mnav-search { margin: 26px 0 0; }
  .sbg-mdrawer form.sbg-mnav-search .wp-block-search__inside-wrapper {
    display: flex;
    align-items: center;
    height: 52px;
    padding: 4px 4px 4px 20px !important;
    border: 1px solid #D9D2C1 !important;
    border-radius: 999px;
    background: #FFFFFF;
  }
  .sbg-mdrawer form.sbg-mnav-search .wp-block-search__inside-wrapper:focus-within { border-color: #4B5A2E !important; }
  .sbg-mdrawer form.sbg-mnav-search input.wp-block-search__input {
    flex: 1 1 auto;
    min-width: 0;
    height: 100%;
    padding: 0 !important;
    border: 0 !important;
    background: transparent;
    font-family: "Public Sans", system-ui, sans-serif;
    font-size: 16px; /* 16px stops iOS zooming on focus */
    color: #211E19;
    box-shadow: none !important;
    outline: none;
  }
  .sbg-mdrawer form.sbg-mnav-search input.wp-block-search__input::placeholder { color: #8A8676; }
  .sbg-mdrawer form.sbg-mnav-search button.wp-block-search__button {
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    margin: 0 !important;
    padding: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 999px;
    background: #4B5A2E;
    color: #F1EDE3;
  }
  .sbg-mdrawer form.sbg-mnav-search button.wp-block-search__button svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
  }

  /* Entrance: items settle in once the sheet is open. */
  .sbg-mdrawer p.sbg-mnav-eyebrow,
  .sbg-mdrawer .wp-block-kadence-navigation ul.kb-navigation > li,
  .sbg-mdrawer form.sbg-mnav-search {
    opacity: 0;
    transform: translate3d(14px, 0, 0);
    transition: opacity .38s ease, transform .45s cubic-bezier(.2, .7, .2, 1);
  }
  .sbg-mdrawer.active p.sbg-mnav-eyebrow,
  .sbg-mdrawer.active .wp-block-kadence-navigation ul.kb-navigation > li,
  .sbg-mdrawer.active form.sbg-mnav-search {
    opacity: 1;
    transform: none;
  }
  .sbg-mdrawer.active p.sbg-mnav-eyebrow { transition-delay: .08s; }
  .sbg-mdrawer.active .wp-block-kadence-navigation ul.kb-navigation > li:nth-child(1) { transition-delay: .12s; }
  .sbg-mdrawer.active .wp-block-kadence-navigation ul.kb-navigation > li:nth-child(2) { transition-delay: .16s; }
  .sbg-mdrawer.active .wp-block-kadence-navigation ul.kb-navigation > li:nth-child(3) { transition-delay: .20s; }
  .sbg-mdrawer.active .wp-block-kadence-navigation ul.kb-navigation > li:nth-child(4) { transition-delay: .24s; }
  .sbg-mdrawer.active .wp-block-kadence-navigation ul.kb-navigation > li:nth-child(n+5) { transition-delay: .28s; }
  .sbg-mdrawer.active form.sbg-mnav-search { transition-delay: .30s; }
}

/* Phones: the sheet takes the full width. */
@media (max-width: 767px) {
  .sbg-mdrawer .kb-off-canvas-inner-wrap {
    width: 100% !important;
    max-width: 100% !important;
    box-shadow: none;
  }
  .sbg-mdrawer .kb-off-canvas-inner { padding-top: 22px; padding-left: 22px; padding-right: 22px; }
  .kb-identity641_700e1d-95 img.custom-logo { height: 60px !important; }
  .wp-block-kadence-header-row641_fe3482-c9 .kadence-header-row-inner { min-height: 72px; }
}

/* Logged-in admin bar is fixed above 600px. */
@media (min-width: 601px) and (max-width: 1024px) {
  body.admin-bar header.wp-block-kadence-header { top: var(--wp-admin--admin-bar--height, 32px); }
  body.admin-bar.sbg-hdr-hidden header.wp-block-kadence-header {
    top: calc(var(--wp-admin--admin-bar--height, 32px) - var(--sbg-hdr-h, 64px) - 8px);
  }
}

@media (max-width: 1024px) and (prefers-reduced-motion: reduce) {
  body header.wp-block-kadence-header,
  .sbg-mdrawer p.sbg-mnav-eyebrow,
  .sbg-mdrawer .wp-block-kadence-navigation ul.kb-navigation > li,
  .sbg-mdrawer form.sbg-mnav-search,
  .sbg-mdrawer .wp-block-kadence-navigation a.kb-nav-link-content::after {
    transition: none !important;
  }
  .sbg-mdrawer p.sbg-mnav-eyebrow,
  .sbg-mdrawer .wp-block-kadence-navigation ul.kb-navigation > li,
  .sbg-mdrawer form.sbg-mnav-search {
    opacity: 1;
    transform: none;
  }
}