/* ==========================================================================
   CONTENT 
   ========================================================================== */

/* ============================HOME======================================= */
#page--home .section-hero .video-container {
   height: 80vh;
   position: relative;
}

#page--home .section-hero video {
   position: absolute;
   width: 100%;
   height: 100%;
   top: 0;
   left: 0;
   object-fit: cover;
}

#page--home .section-eclub .container {
   padding: 0 3px !important;
   width: 100%;
   margin-right: auto;
   margin-left: auto;
}

#page--home .section-hero .content-wrapper {
   position: absolute;
   width: 100%;
   height: 100%;
   top: 0;
   left: 0;
}

#page--home .section-hero .content-wrapper .section-logo {
   margin-top: 4rem;
}

#page--home .section-eclub {
   background-image: url('https://media.thecapitalburger.com/images/site/responsive/mobile/tcb-black-grain-bg-header-m.jpg');
   background-repeat: no-repeat;
   background-size: cover;
   background-position: center;
   background-color: #252421;
   margin-top: -.5rem;
}

#page--home .section-eclub h2 {
   color: #cec1aa;
   font-family: "Gill Sans", 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
   font-size: 0.93rem;
   letter-spacing: 0.5px;
}

#page--home .section-main {
   background: linear-gradient(to right, #ab9f93, #F4F2EC, #ab9f93);
   color: #4d4d4d;
   padding-top: 3rem;
   padding-bottom: 2rem;
}

#page--home .section-main .separator {
   background-color: #894438;
   height: 2px;
}

#page--home .section-main img {
   width: auto;
}

#page--home .section-main h2 {
   font-family: "Lato", "Lato-Regular", sans-serif;
   font-size: 1rem;
   font-weight: normal;
   letter-spacing: .05em;
   line-height: 1.4rem;
}

#page--home .section-main h1 {
   font-family: "Vendeur Stamp";
   font-weight: normal;
   font-size: 2.5rem;
   line-height: 1;
   margin-bottom: 0;
   color: rgb(89, 82, 82);
}

#page--home .section-main p {
   font-family: "Lato", "Lato-Regular", sans-serif;
   font-size: 1.2rem;
   line-height: 1.7em;
}

#page--home .bottom-separator {
   display: none;
}

@media screen and (min-width: 360px) {
   #page--home .section-eclub h2 {
      font-size: 1rem;
   }

   #page--home .section-main h1 {
      font-size: 3rem;
   }
}

@media screen and (min-width: 390px) {
   #page--home .section-eclub h2 {
      font-size: 1.15rem;
   }
}

@media screen and (min-width: 450px) {
   #page--home .section-main img {
      width: 90px;
   }
}

@media screen and (min-width: 600px) {
   #page--home .section-eclub h2 {
      font-size: 1.5rem;
   }

   #page--home .section-main h2 {
      font-size: 1.5rem;
   }

   #page--home .section-main h1 {
      font-size: 4.5rem;
   }
}

@media screen and (min-width: 768px) {
   #page--home .section-cta {
      display: none;
   }

   #page--home .section-eclub h2 {
      font-size: 1rem;
   }

   #page--home .section-main .bottom-separator {
      display: block;
   }

   #page--home .section-main h1 {
      font-size: 3.5rem;
   }
}

@media screen and (min-width: 992px) {

   .global-alert .global-alert-link a,
   .global-alert .global-alert-link a:visited,
   .global-alert .global-alert-link a:hover {
      display: block;
      margin-left: auto;
      font-size: 0.75rem;
   }

   #page--home .section-hero .video-container {
      height: 90vh;
      position: relative;
   }

   #page--home .section-eclub h2 {
      font-size: 1.15rem;
      margin-bottom: 0;
   }



   #page--home .section-main img {
      width: 100px;
   }

   #page--home .section-main h2 {
      font-size: 1.6rem;
      letter-spacing: .1em;
      margin-bottom: .75em;
   }
}

@media screen and (min-width: 1200px) {
   #page--home .section-eclub .sign-up-wrapper {
      padding-right: 0px;
   }

   #page--home .section-eclub h2 {
      font-size: 1.35rem;
   }
}

@media screen and (min-width: 1400px) {
   #page--home .section-main img {
      width: 140px;
   }

   #page--home .section-eclub .btn.btn-tan-gradient,
   #page--home .section-eclub .btn.btn-tan-gradient:focus,
   #page--home .section-eclub .btn.btn-tan-gradient:hover {
      font-size: 1.25rem;
   }
}

@media screen and (min-width: 1600px) {
   #page--home .section-eclub h2 {
      font-size: 1.5rem;
   }
}

/* NRO (locations/new-locations Page ------------------------------------------------------------ START*/

.locations-page {
   margin: 0;
   padding: 32px 0 32px;
   background: #e2dbcc;
   min-height: calc(100vh - 328px);

   .new-locations.container {
      max-width: 880px;
      border-radius: 12px;
      padding: 24px;
   }

   .new-locations p.no-record {
      text-align: center;
      font-family: 'lato';
      font-weight: bold;
      font-size: 1.125rem;
      line-height: 1.5;
   }

   .new-locations .tabs {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 10px;
      width: 100%;
      max-width: 680px;
      padding: 3px;
      background: #cec1aa;
      border-radius: 40px;
   }

   .new-locations .tab {
      flex: 1;
      padding: 8px 0;
      text-align: center;
      font-family: 'lato';
      font-size: 1rem;
      line-height: 1.5;
      font-weight: 700;
      color: #7d6c59;
      border-radius: 40px;
      cursor: pointer;
      transition: 0.25s ease;
   }

   .new-locations .tab a {
      color: inherit;
      text-decoration: none;
   }

   .new-locations .tab:not(.active):hover {
      background: #e2dbcc;
   }

   .new-locations .tab.active {
      background: #000;
      color: #ffffff;
   }

   .new-locations .tab.active:hover {
      background: #7d6c59;
   }

   .new-locations .tab.active a {
      color: inherit;
   }

   .location-card {
      display: flex;
      gap: 20px;
      min-height: 150px;
      margin-bottom: 16px;
      background: transparent;
      border: 1px solid #855B3C;
      border-radius: 16px;
      overflow: hidden;
   }

   .location-card .card-image {
      flex: 0 0 145px;
      aspect-ratio: 1 / 1;
      overflow: hidden;
   }

   .location-card .card-image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
   }

   .card-content {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;
      padding: 32px;
   }

   .loc-title {
      font-family: 'lato';
      font-size: 1rem;
      line-height: 1.5;
      font-weight: 700;
      color: #7d6c59;
      margin: 0 0 10px;
   }

   a .loc-title:hover {
      color: #000000;
   }

   .card-text a {
      text-decoration: underline !important;
      color: #7d6c59;
   }

   .card-text a:hover {
      text-decoration: none !important;
      color: #000000;
   }

   .address {
      margin: 0;
      font-family: 'lato';
      font-weight: 400;
      font-size: 1rem;
      line-height: 1.5;
      color: #000;
   }

   .card-status {
      display: flex;
      align-items: center;
   }

   .status-pill {
      padding: 8px 32px;
      border: 2px solid #7d6c59;
      border-radius: 30px;
      background: transparent;
      font-family: 'lato';
      font-size: 1rem;
      line-height: 1.5;
      font-weight: 400;
      text-transform: uppercase;
      color: #7d6c59;
   }

   .comingsoon .status-pill {
      background: #cec1aa;
   }
}

@media (max-width: 767px) {

   .locations-page {
      padding: 20px 0 20px;

      .new-locations.container {
         padding: 16px;
      }

      .new-locations .tabs {
         display: grid;
         grid-template-columns: repeat(2, 1fr);
         gap: 8px;
         width: 100%;
         padding: 8px;
         background: transparent;
         border-radius: 16px;
      }


      .new-locations .tab {
         padding: 12px 0;
         background: #cec1aa;
      }

      .new-locations .tab:not(.active):hover {
         background: #cec1aa !important;
      }

      .new-locations .tab.active:hover {
         background: #7d6c59;
      }

      .location-card {
         gap: 10px;
      }

      .card-content {
         display: grid;
         grid-template-rows: auto auto;
         gap: 16px;
         padding: 20px 20px 20px 0;
         justify-content: center;
      }

      .card-text {
         text-align: center;
      }

      .card-status {
         justify-content: center;
         width: 100%;
      }

      .status-pill {
         padding: 6px 14px;
      }

   }

}

/* NRO (locations/new-locations  Page ------------------------------------------------------------END*/

/* accessibility-statement Page ------------------------------------------------------------ START*/
.page--accessibility {
   background: #e2dbcc;
}

.page--accessibility .container--iframe {
   max-width: 960px;
   padding: 48px 0;
}

.page--accessibility h1 {
   font-family: var(--tcb-body-font-family);
   font-size: 2.5rem;
   line-height: normal;
   letter-spacing: 1px;
   color: #000;
   padding: 8px 0 12px;
   margin-bottom: 40px;
}

@media(max-width: 768px) {
   .page--accessibility h1 {
      font-size: 1.5rem;
      padding: 0 40px;
   }
}

/* accessibility-statement Page ------------------------------------------------------------ END*/


/* ============================================================
   FAQ Accordion 
   ============================================================ */

.faq__title {
   margin-bottom: 0.5rem;
   font-family: var(--tcb-headline-accent-font-family);
   font-size: 1.5rem;
   font-weight: normal;
   text-align: center;
   text-transform: uppercase;
}

.faq__accordion {
   .faq__category-title {
      color: var(--cg-charcoal, #282728);
      font-size: 1.25rem;
      font-weight: 600;
      text-transform: uppercase;
   }

   .faq__category-description {
      color: var(--brand-body-default-color, #303030);
      font-size: 1rem;
   }

   .faq__item {
      background: transparent;
      border-bottom: 1px solid var(--tcb-golden-brown, #8e774d);
      transition: border-color 0.3s ease;

      .faq__item-heading {
         margin-bottom: 0;

         .faq__trigger {
            width: 100%;
            background-color: transparent;
            padding: 1rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
            color: var(--cg-charcoal, #282728);
            border: none;
            text-align: left;
            transition: background-color 0.3s ease;
            cursor: pointer;
            text-decoration: none;
            -webkit-transition: background-color 0.3s ease;
            -moz-transition: background-color 0.3s ease;
            -ms-transition: background-color 0.3s ease;
            -o-transition: background-color 0.3s ease;

            &.collapsed {
               background-color: transparent;
            }

            &[aria-expanded="false"] {
               background-color: transparent;
            }

            &[aria-expanded="true"] {
               .faq__icon {
                  &::after {
                     transform: rotate(90deg);
                     opacity: 0;
                  }
               }
            }

            &[aria-expanded="false"]:focus,
            &[aria-expanded="false"]:focus-visible {
               outline: 2px solid #000 !important;
            }

            &[aria-expanded="true"],
            &[aria-expanded="false"]:hover {
               color: #fff;
               background-color: var(--tcb-golden-brown, #8e774d);

               .faq__icon::before,
               .faq__icon::after {
                  background-color: #FFF;
               }
            }

            .faq__icon {
               position: relative;
               width: 10px;
               height: 10px;
               flex-shrink: 0;

               &::before,
               &::after {
                  content: "";
                  position: absolute;
                  background-color: var(--cg-charcoal, #282728);
                  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
               }

               &::before {
                  top: 50%;
                  left: 0;
                  width: 100%;
                  height: 2px;
                  margin-top: -1px;
               }

               /* Vertical line */
               &::after {
                  top: 0;
                  left: 50%;
                  width: 2px;
                  height: 100%;
                  margin-left: -1px;
               }
            }
         }

         .faq__question-text {
            font-size: 1rem;
            padding-right: 15px;
            transition: color 0.3s ease;
            -webkit-transition: color 0.3s ease;
            -moz-transition: color 0.3s ease;
            -ms-transition: color 0.3s ease;
            -o-transition: color 0.3s ease;
            text-transform: uppercase;
         }
      }

      .faq__answer {
         p {
            font-size: 1rem;
            color: var(--cg-charcoal, #282728);
            margin-bottom: 0;

            &+p {
               margin-top: 1rem;
            }
         }

         .faq-section__link:hover {
            text-decoration: underline;
         }

         a {
            font-size: 1rem;
            color: var(--tcb-dark-khaki, #6f644f);
            text-decoration: none;
            font-weight: 600;
         }
      }

      .faq__collapse {
         padding: 1rem;
      }
   }
}

/* .faq__block-container,
.faq__flex-container {
   padding-left: 0;
   flex: 0 0 100%;
   max-width: 100%;
} */

/* ==========================================================================
   CATEGORY NAVIGATION
   ========================================================================== */

.faq__category-nav {
   margin-bottom: 3rem;
   margin: 0 auto;
   padding: 0;

   .faq__category-nav-list {
      display: flex;
      flex-direction: column;
      gap: 12px;
      font-weight: 600;
      padding-left: 0;
      margin-bottom: 2rem;
   }

   .faq__category-nav-list li {
      list-style-type: none;
   }

   .faq__nav-btn {
      display: flex;
      justify-content: center;
      flex-direction: row;
      gap: 20px;
      flex-wrap: wrap;
      padding: 0.25rem 0.75rem;
      text-transform: uppercase;
      color: #efede9;
      font-size: 1rem;
      font-weight: 400;
      text-align: center;
      text-transform: uppercase;
      background-image: linear-gradient(125deg,
            rgb(176, 156, 121) 0%,
            rgb(134, 113, 77) 100%);
   }

   .faq__category-nav-list li:hover {
      text-decoration: underline;
   }
}

/* ==========================================================================
   Right Rail
   ========================================================================== */

.faq__right-rail {
   display: none;
   padding: 1rem 1.5rem;

   .faq__right-rail-list {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 1.25rem;
      padding-left: 0;
      margin-bottom: 1.5rem;
   }

   .faq__right-rail-link {
      color: var(--tcb-dark-khaki, #6f644f);
      font-family: var(--brand-body-font-family);
      text-transform: uppercase;
      line-height: 1.3 !important;
      font-weight: 600;
   }

   .faq__right-rail-link:hover {
      text-decoration: underline;
      text-underline-offset: 3px;
      text-decoration-thickness: 1px;
   }

   .faq__right-rail-contact-us {
      border-top: 3px solid var(--tcb-golden-brown, #8e774d);
      border-bottom: 3px solid var(--tcb-golden-brown, #8e774d);
      padding-top: 1.5rem;
      padding-bottom: 1.5rem;

      p {
         margin-bottom: 0;
      }
   }
}



.most-popular-faq__subtitle {
   font-size: 1rem;
}

@media (min-width: 540px) {
   .faq__accordion {
      .faq__category-title {
         font-size: 1.5rem;
         font-weight: 600;
      }

      .faq__category-description {
         font-size: 1.125rem;
      }

      .faq__item {
         .faq__item-heading {
            .faq__question-text {
               font-size: 1.25rem;
            }
         }

         .faq__answer {

            p,
            a {
               font-size: 1rem;
            }
         }
      }
   }
}

@media (min-width: 768px) {

   .faq__category-title {
      padding: 1rem 0;
   }

   .faq__title {
      margin: 1.5rem 0;
      font-family: var(--tcb-headline-accent-font-family);
      font-size: 2.5rem;
      font-weight: normal;
      text-align: center;
      text-transform: uppercase;
   }



   .faq__category-nav-list li:not(:last-child) {
      display: block;
   }

   .faq__category-nav-list li:not(:last-child)::after {
      content: "";
      margin-left: 20px;
      color: var(--tcb-dark-khaki, #6f644f);
      pointer-events: none;
   }

   /* ==========================================================================
   CATEGORY NAVIGATION
   ========================================================================== */
   .faq__category-nav {
      margin-bottom: 3rem;

      .faq__category-nav-list {
         display: flex;
         justify-content: center;
         gap: 20px;
         font-size: 1.1rem;
         font-weight: 700;
         flex-direction: row;
         flex-wrap: wrap;
      }

      .faq__category-nav-list li {
         list-style-type: none;
      }

      .faq__category-nav-list li:not(:last-child) {
         display: flex;
         align-items: center;
      }

      .faq__category-nav-list li:not(:last-child)::after {
         content: "|";
         margin-left: 20px;
         color: var(--tcb-dark-khaki, #6f644f);
         pointer-events: none;
      }

      .faq__nav-btn {
         color: var(--tcb-dark-khaki, #6f644f);
         font-weight: 700;
         padding: 0 0.75rem;
         font-size: 1.1rem;
         background-color: transparent;
         background-image: none;
         border: none;
      }

      .faq__category-nav-list li:hover {
         text-decoration: underline;
         color: var(--tcb-dark-khaki, #6f644f);
      }
   }

   .faq__right-rail {
      display: none;


      .faq__right-rail-title {
         color: var(--brand-charcoal, #282728);
         font-size: 1.25rem;
         margin-bottom: 1.5rem;
      }
   }

   .faq__accordion {
      .faq__item {
         .faq__item-heading {
            .faq__trigger {
               padding: 1rem;
            }
         }

         .faq__collapse {
            padding: 1rem;
         }
      }
   }
}

@media (min-width: 992px) {


   .faq__right-rail {
      display: flex;
      flex-direction: column;

      .faq__right-rail-title {
         font-size: 1.5rem;
      }
   }
}

@media (min-width: 1200px) {
   .container--faq {
      max-width: 1140px !important;
      margin-left: auto;
      margin-right: auto;
   }

   .faq__accordion {
      .faq__category-title {
         font-size: 1.5rem;
         padding: 1rem 0;
      }

      .faq__category-description {
         font-size: 1.25rem;
      }

      .faq__item {
         .faq__item-heading {
            .faq__question-text {
               font-size: 1.25rem;
            }
         }

         .faq__answer {

            p,
            a {
               font-size: 1.25rem;
            }
         }
      }
   }
}



/* FAQS ------------------------------------------------------------ END*/