/*! HTML5 Boilerplate v9.0.1 | MIT License | https://html5boilerplate.com/ */

/* main.css 3.0.0 | MIT License | https://github.com/h5bp/main.css#readme */
/*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

html, body {
   color: #222;
   font-size: 1em;
   line-height: 1.4;
   margin: 0;
   font-family: "Inter", Helvetica, Arial, sans-serif;
   padding: 0;
}

*, ::after, ::before {
   box-sizing: border-box;
}

/*
 * Remove text-shadow in selection highlight:
 * https://twitter.com/miketaylr/status/12228805301
 *
 * Customize the background color to match your design.
 */

::-moz-selection {
   background: #b3d4fc;
   text-shadow: none;
}

::selection {
   background: #b3d4fc;
   text-shadow: none;
}

/*
 * A better looking default horizontal rule
 */

hr {
   display: block;
   height: 1px;
   border: 0;
   border-top: 1px solid #ccc;
   margin: 1em 0;
   padding: 0;
}

/*
 * Remove the gap between audio, canvas, iframes,
 * images, videos and the bottom of their containers:
 * https://github.com/h5bp/html5-boilerplate/issues/440
 */

audio,
canvas,
iframe,
img,
svg,
video {
   vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
   border: 0;
   margin: 0;
   padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
   resize: vertical;
}

/* ROAM SPECIFIC STYLES HERE */
/* ============================================ */
.hero-banner--roam {
   display: flex;
   align-items: center;
   justify-content: center;
   position: relative;


   figure {
      margin: 0;
      max-height: 100svh;
      overflow: hidden;
      position: relative;
      width: 100%;

      &:after {
         content: "";
         background: linear-gradient(180deg, rgba(70, 38, 13, 0.00) 0%, rgba(70, 38, 13, 0.15) 49.52%, rgba(70, 38, 13, 0.00) 100%), linear-gradient(0deg, rgba(61, 34, 19, 0.20) 0%, rgba(61, 34, 19, 0.20) 100%);
         background-blend-mode: multiply, normal;
         position: absolute;
         top: 0;
         left: 0;
         right: 0;
         bottom: 0;
      }

      .vjs-fluid {
         aspect-ratio: 1.77;
         position: relative;
         width: 100%;
         height: 100%;

         video {
            position: absolute;
            height: 100%;
            width: 100%;
            object-fit: cover;
         }
      }
   }

   svg {
      position: absolute;
      width: clamp(250px, 40vw, 500px);
   }

   .hero-banner-scroll--roam {
      position: absolute;
      bottom: 1rem;
      left: 50%;
      transform: translateY(-50%);
      z-index: 1;

      @media (max-width: 991.98px) {
         display: none;
      }

      svg {
         position: relative;
         width: auto;
      }
   }
}

/* intro copy */
.intro-copy--roam {
   display: flex;
   flex-direction: column;
   gap: 3rem;
   font-size: 1.125rem;
   margin: 5rem auto 2rem;
   width: 60%;
   max-width: 900px;
   padding-inline: 1rem;
   text-align: center;

   @media (max-width: 991.98px) {
      width: 100%;
      max-width: 100%;
   }

   /*&:before {*/
   /*   content: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAKCAYAAADGmhxQAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAGKSURBVHgBnZTLTsJAFIYPqAQlGEhkga4wLtS1bFy68xn0BXwHNW41rn0DV0YiJBpdGFayATRKghdMAC9tiFVA7m1DnXMihtC0zPgn02ln5p/vzJzmgNr6Nm5Pd41G+d0QVSF9Qk1UIkznmNsLFfkJzvdX4e5sD5oVCXgVmA1DOrJN3uJ1lNuHTK1VI18qsmXLHNlh0to1KOWu4Os1A1I2DvgdCIW5QM+JQ+jUP0G+j8NHPgUe/wxM+KeHenXGkJinKj+yw8Wgq3fIi3uaAmzXFXjLXNAABqcwEJpwsS84bwsq5RJ/N4B98SYGDdajbxDWLwMckE8e0XtXV4mJlzPIdOLD5Z40bYAwnvR5fEHT2As73LD0uca9XEwncMlhOYM3bjnXsp6zE+6ptev0Pmq1CK96bnmdtTXbVKm/G/VrKrQEiysb1FupWZa4mBRghf2odovsVJUfhALriZUYLiYFqOSTwoGh8GCYDpHAelIKKeqRt8C8lkwslsnjTSqe4oU6Su0/yl4ecBXqHyof72U2wnS5AAAAAElFTkSuQmCC");*/
   /*   display: block;*/
   /*}*/

   h2 {
      font-size: clamp(2rem, 2.309vw + 0.893rem, 2.625rem);
      line-height: 1.2;
      margin: 0;
      letter-spacing: .25em;
      font-weight: 500;
      text-transform: uppercase;

      span {
         display: block;
      }
   }

   figure {
      margin: 0 auto;
      width: 215px;
   }

   p {
      margin: 0;

   }

   a {
      border-bottom: 2px solid black;
      color: black;
      font-weight: bold;
      text-decoration: none;
   }

   ul {
      display: grid;
      grid-gap: 2rem 4rem;
      grid-template-columns: repeat(2, 1fr);
      list-style-type: none;
      margin: 0;
      padding: 0;
      font-size: 1rem;

      @media (max-width: 991.98px) {
         grid-gap: 2rem;
      }

      @media (max-width: 767.99px) {
         grid-gap: 1rem;
         grid-template-columns: 100%;
      }

      li {
         display: inline-flex;
         gap: 1rem;
         position: relative;
         text-align: left;

         &:before {
            content: "";
            background-color: #B87D23;
            flex-shrink: 0;
            height: 8px;
            width: 8px;
            position: relative;
            top: 6px;
            transform: rotate(45deg);
         }
      }
   }
}

/* image container */
.image-container--roam {
   display: grid;
   grid-gap: 1rem;
   grid-template-columns: repeat(4, 1fr);
   margin: 4rem auto 2rem;
   max-width: 1440px;
   padding-inline: 2rem;
   width: 100%;

   @media (max-width: 991.98px) {
      grid-gap: 1rem;
      grid-template-columns: repeat(2, 1fr);
      padding-inline: 1rem;
   }

   @media (max-width: 767.99px) {
      grid-template-columns: 100%;
   }

   h3 {
      grid-column: 1 / -1;
      font-size: 18px;
      font-weight: 700;
      letter-spacing: 3.6px;
      margin: 0;
      text-align: center;
      text-transform: uppercase;
   }

   figure {
      aspect-ratio: 1.7;
      display: flex;
      place-items: center;
      margin: 0;
      position: relative;
      width: 100%;

      img {
         object-fit: cover;
         position: absolute;
         height: 100%;
         width: 100%;
      }

      figcaption {
         color: white;
         font-size: .825rem;
         line-height: 1.4;
         letter-spacing: 3.4px;
         font-weight: 600;
         padding-inline: 1rem;
         position: relative;
         text-align: center;
         text-transform: uppercase;
         z-index: 1;
      }
   }
}

/* form */
.form-component--roam {
   background-color: #EFEFEF;
   background-size: 52px 52px;
   background-image: linear-gradient(to right, #e4e4e4 1px, transparent 1px),
   linear-gradient(to bottom, #e4e4e4 1px, transparent 1px);
   padding-block: 100px;


   .form-container--roam {
      display: flex;
      flex-direction: column;
      gap: 40px;
      min-width: 500px;
      max-width: 42%;
      margin-inline: auto;
      padding-inline: 30px;

      @media (max-width: 991.98px) {
         min-width: unset;
         max-width: 65%;
      }

      @media (max-width: 767.98px) {
         max-width: 100%;
      }
   }

   .form-container-header--roam {
      display: flex;
      gap: 7px;
      flex-direction: column;
      text-align: center;

      .form-component-heading--roam {
         font-size: 24px;
         letter-spacing: 4.8px;
         margin: 0;
         text-transform: uppercase;
         font-weight: 500;
      }

      p {
         margin: 0;
      }
   }
}

.footer--roam {
   background: black;
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 65px;

   figure {
      margin: 0;
   }

   ul {
      display: flex;
      gap: 35px;
      list-style-type: none;
      margin: 0;
      padding: 0;
      text-transform: uppercase;

      li {
         color: #B87D23;
         font-size: 14px;
         font-weight: 700;

         a {
            color: white;
            font-weight: normal;
            text-decoration: none;

            &:hover {
               text-decoration: underline;
            }
         }
      }
   }

   @media (max-width: 767.98px) {
      padding: 30px;

      ul {
         flex-direction: column;
         gap: 10px;

         li {
            text-align: right;
         }
      }
   }
}