/* ===================================================== */
/* ===== Header ======================================== */
/* ===================================================== */

.rob-mh-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 99;
    background: linear-gradient(to bottom, rgba(0, 0, 0, .4) 0%, rgba(0, 0, 0, .4) 40px, rgba(0, 0, 0, 0) 115px);

    @media(min-width: 960px) {
        padding-inline: 50px;
    }

    .rob-mh-header__bar {
        box-shadow: 0 5px 8px rgba(0, 0, 0, 0.1);

        @media(min-width: 960px) {
            border-radius: 6px;
            box-shadow: 0 8px 16px rgba(46, 41, 37, 0.58);
        }

        @media(min-width: 1280px) {
            padding-left: 24px !important;
            padding-right: 32px !important;
        }
    }

    .rob-mh-header__logo-column {
        
        @media( max-width: 1279px) {
            flex-basis: 100% !important;
            text-align: center;
        }
    }

    .rob-mh-header__nav-column {
        display: flex;
        align-items: center;
        justify-content: flex-end;

        @media( max-width: 1279px) {
            position: absolute;
            right: 74px;

            nav {
                display: none;
            }

            .wp-block-robinsons-pubs-overlay-toggle {
                margin-left: 0;
            }
        }

        @media(max-width: 959px) {
            right: 24px;
        }
    }
}

header[data-menu-active="true"] {

    .overlay-toggle__menu {
        visibility: hidden;
        opacity: 0;
        display: none;
    }
}

header[data-menu-active="false"] {

    .overlay-toggle__close {
        visibility: hidden;
        opacity: 0;
        display: none;
    }
}

.menu-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  height: 100vh;
  align-items: flex-start;
  visibility: hidden;
  opacity: 0;

  &[data-active="true"] {
    display: block;
    visibility: visible;
    opacity: 1;
  }

  @media (max-width: 959px) {
    padding-top: 24px !important;
  }

  .wp-block-cover__inner-container {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: -webkit-fill-available;

    &::after {
      content: "";
      display: block;
    }

    @media (max-width: 959px) {
      max-height: calc(100vh - 24px);
      overflow-x: scroll;
    }
  }

  .menu-overlay__logo-row {
    @media (min-width: 960px) {
      margin-inline: 50px;
    }

    @media (max-width: 959px) {
      flex-direction: column-reverse;

      .wp-block-column {
        width: 100%;

        .wp-block-site-logo {
          text-align: center;
        }
      }
    }
  }

  .wp-block-robinsons-pubs-overlay-toggle {
    display: block;
    margin-left: auto;
  }

  .wp-block-columns:not(.menu-overlay__logo-row) {
    width: 100%;
    max-width: 900px;
    margin-inline: auto;
    padding-top: var(--wp--preset--spacing--large);
    justify-content: space-between;
  }

  .menu-overlay__info-column {
    @media (max-width: 959px) {
      display: flex;
      flex-direction: column;
      border-top: 1px solid currentColor;

      hr {
        display: none;
      }

      .business-phone {
        order: 1;
      }

      .business-email {
        order: 2;
      }

      .business-name {
        order: 3;
      }

      .business-address {
        order: 4;
        max-width: 280px;
        margin-inline: auto;
      }

      .wp-block-social-links {
        order: 5;
      }

      .brand-logo {
        order: 6;
        max-width: 180px;
        margin-bottom: 24px;
      }

      .business-phone,
      .business-email {
        a {
          position: relative;
          display: block;
          box-sizing: border-box;
          width: calc(100% - 48px);
          margin-inline: 24px;
          padding: 12px;
          padding-left: 48px;

          background-color: var(--wp--preset--color--on-primary);
          color: var(--wp--preset--color--primary);

          font-family: var(--site-h1);
          text-decoration: none;
          border-radius: 4px;

          &::before {
            content: "";
            position: absolute;
            inset: 0;
            left: 0;
            width: 48px;
            height: 48px;

            background-color: var(--wp--preset--color--primary);
            mask-repeat: no-repeat;
          }
        }
      }

      .business-email a::before {
        -webkit-mask-image: url(https://rob-cdn.ams3.digitaloceanspaces.com/website-26/email-mask.png);
        mask-image: url(https://rob-cdn.ams3.digitaloceanspaces.com/website-26/email-mask.png);
      }

      .business-phone a::before {
        -webkit-mask-image: url(https://rob-cdn.ams3.digitaloceanspaces.com/website-26/phone-mask.png);
        mask-image: url(https://rob-cdn.ams3.digitaloceanspaces.com/website-26/phone-mask.png);
      }
    }
  }

  @media (max-width: 959px) {
    .wp-block-navigation__container {
      margin-inline: 24px;

      a {
        font-size: 18px;
      }
    }
  }

  .main-nav {
    @media (max-width: 959px) {
      margin-bottom: 12px;

      .wp-block-navigation__container {
        margin-inline: auto;
        align-items: center;

        a {
          font-size: 24px;
        }
      }
    }
  }
}

/* ===================================================== */
/* ===== Footer ======================================== */
/* ===================================================== */

.rob-mh-footer {
    padding-inline: 1rem;
    position: relative;

    &::before {
        content: '';
        background-color: var(--wp--preset--color--primary);
        background-image: var(--theme-texture);
        background-position: center;
        position: absolute;
        height: 24px;
        left: 0;
        right: 0;
        top: 0;
    }

    @media(min-width: 960px) {
        padding-inline: 50px;
    }
    
    &.rob-mh-footer--ii {
        background-image: url('https://rob-cdn.ams3.digitaloceanspaces.com/website-26/footer-ii-background.png');
        background-position: center bottom;
        background-repeat: no-repeat;
        background-size: auto 550px;

        @media(min-width: 960px) {
            background-size: contain;
        }

        .rob-mh-footer__brand {
            padding-top: 220px !important;
        }
    }
}

/* ===================================================== */
/* ===== Blocks ======================================== */
/* ===================================================== */

section.brew-callout-cta {
    margin-block: 24px;
    overflow: visible;
    position: relative;
    padding-block: var(--wp--preset--spacing--x-large);

    @media(min-width: 782px) {
        padding-block: var(--wp--preset--spacing--xxxx-large);
    }

    &::before {
        content: '';
        background-color: var(--wp--preset--color--primary);
        background-image: var(--theme-texture);
        background-position: center;
        position: absolute;
        display: block;
        left: 0;
        right: 0;
        top: -24px;
        bottom: -24px;
        z-index: -1;
    }

    .wp-block-columns {
        gap: var(--wp--preset--spacing--x-large);
        justify-content: space-between;

        >.wp-block-column:first-of-type {

            @media(min-width: 782px) {
                flex-basis: 58.333% !important;
            }

            @media(max-width: 781px) {

                >* {
                    text-align: left;
                }
            }
        }

        .wp-block-buttons {

            .wp-block-button {
                width: 100%;
            }
        }
    }
}

section.brew-clustered-gallery-intro {

    .wp-block-column {

        .wp-block-create-block-clustered-gallery {
            @media(max-width: 959px) {
                margin-inline: calc(0px - var(--wp--preset--spacing--medium));
            }
        }
    }
}

section.brew-fancy-list {
  background-color: var(--wp--preset--color--primary) !important;
  background-image: var(--theme-texture);
}

section.brew-full-screen-banner {
  padding-bottom: var(--wp--preset--spacing--x-large) !important;
  
  &::after {
      content: '';
      background-color: var(--wp--preset--color--primary);
      background-image: var(--theme-texture);
      background-position: center;
      position: absolute;
      height: 24px;
      left: 0;
      right: 0;
      bottom: 0;
  }
}

section.brew-snaked-gallery-intro {

    .wp-block-column {

        .wp-block-create-block-snaked-gallery {
            @media(max-width: 959px) {
                margin-inline: calc(0px - var(--wp--preset--spacing--medium));
            }
        }
    }
}

section.rob-other-rooms {

    .rob-other-rooms__scrollable {
        width: 100%;
        height: 400px;
        overflow: hidden;

        .rob-other-rooms__scroll-inner {
            height: 540px;
            width: 100%;
            overflow: auto;

            .wp-block-query {
                white-space: nowrap;
                display: flex;
                flex-wrap: nowrap;

                ul {
                    width: fit-content;
                }

                ul li,
                .rob-other-rooms__all-rooms {
                    position: relative;
                    width: fit-content;
                    margin-right: var(--wp--preset--spacing--medium);

                    figure,
                    img {
                        width: 320px;
                        height: 400px;
                        object-fit: cover;
                    }

                    .wp-block-group {
                        position: absolute;
                        bottom: var(--wp--preset--spacing--large);
                        left: var(--wp--preset--spacing--large);
                        right: var(--wp--preset--spacing--large);
                    }
                }
            }
        }
    }
}

section.rob-room-listing {

    &::before,
    &::after {
        content: '';
        background-color: var(--wp--preset--color--primary);
        background-image: var(--theme-texture);
        background-position: center;
        position: absolute;
        height: 24px;
        left: 0;
        right: 0;
        z-index:1
    }

    &::before {
        top: 0;
    }

    &::after {
        bottom: 0;
    }

    ul.wp-block-post-template {

        li.wp-block-post:nth-of-type(odd) {

            .wp-block-columns.rob-room-listing__item {
                flex-direction: row-reverse;
            }
        }
    }
}