/*** CONTENTS ***


01. CURSOR INTERACTIONS 
02. TEXT LINKS 
03. FOOTER NAVIGATION 
04. NAVIGATION 
05. GRID CLASSES 
06. FLEX CLASSES 
07. SPACING CLASSES
08. FONT SIZES
09. ICONS
10. BLUR OVERLAY
11. FONT COLOURS
12. RESPONSIVE

****/

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

html {
  height: 100%;
}

/** LENIS **/
html.lenis {
  height: auto;
}
.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}
.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}
.lenis.lenis-stopped {
  overflow: visible;
}
.lenis.lenis-scrolling iframe {
  pointer-events: none;
}

body {
  margin: 0;
  min-height: 100%;
  background-color: var(--swatch--cream);
  color: var(--swatch--black);
  font-family: var(--font-family--body);
  font-size: 1.0582vw;
  font-weight: 400;
  line-height: 1.2;
  -webkit-font-smoothing: antialiased;
  /* cursor: none; */

  &.overflow {
    overflow: hidden;
  }

  @media all and (max-width: 768px) {
    font-size: 1rem;
    cursor: auto;
  }
}

.transition_wrap {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: stretch;
  justify-content: stretch;
  pointer-events: none;
}

.transition_inner {
  position: absolute;
  inset: 0;
  background: var(--swatch--cream);
  opacity: 1;
  pointer-events: none;
}

/*** FONT RESET ***/
h1,
.h1,
h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5,
h6,
.h6 {
  margin: 0;
  font-family: var(--font-family--heading);
  font-weight: 400; /*regular*/
}
/*** FONT SIZES ****/
h1,
.h1 {
  font-size: var(--font-size--90);
  line-height: 1;

  @media all and (max-width: 768px) {
    font-size: 48px;
  }
}

h2,
.h2 {
  font-size: var(--font-size--64);
  line-height: 1;

  @media all and (max-width: 768px) {
    font-size: 35px;
  }
}
h3,
.h3 {
  font-size: var(--font-size--55);
  line-height: 1;

  @media all and (max-width: 768px) {
    font-size: var(--font-size--20);
  }
}
h4,
.h4 {
  font-size: var(--font-size--44);

  @media all and (max-width: 768px) {
    font-size: var(--font-size--20);
  }
}
h5,
.h5 {
  font-size: var(--font-size--20);
  text-transform: uppercase;
  line-height: 1.2;

  @media all and (max-width: 768px) {
    font-size: var(--font-size--16);
  }
}

h6,
.h6 {
  font-size: var(--font-size--15);
  text-transform: uppercase;
}

p,
.p {
  margin: 0 0 1em;
  font-size: var(--font-size--20);

  @media all and (max-width: 768px) {
    font-size: var(--font-size--15);
  }
}

.p-sml {
  font-size: var(--font-size--15);

  @media all and (max-width: 768px) {
    font-size: var(--font-size--13);
  }
}

.fineprint {
  font-size: var(--font-size--13);
  margin: 0;
}

.menu .fineprint {
  font-size: var(--font-size--15);
  @media all and (max-width: 768px) {
    font-size: var(--font-size--13);
  }
}

.uppercase {
  text-transform: uppercase;
}

img {
  max-width: 100%;
  vertical-align: middle;
  display: inline-block;
}

svg {
  width: 100%;
  height: auto;
}

a {
  color: currentColor;
  text-decoration: none;
}

/* input {
  -webkit-appearance: none;
  border-radius: 0;
} */

.img-absolute,
.img-absolute img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0%;
}

.relative {
  position: relative;
}

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

/** GRID CLASSES **/
.grid-2,
.grid-3,
.grid-4 {
  display: grid;
  grid-template-rows: auto;
  width: 100%;
}
.grid-2 {
  grid-template-columns: 1fr 1fr;
}

.grid-3 {
  grid-template-columns: 1fr 1fr 1fr;
}

.grid-4 {
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-gap: var(--padd--30);

  @media all and (max-width: 768px) {
    grid-template-columns: 1fr;
  }
}

.container {
  padding-left: var(--padd--side);
  padding-right: var(--padd--side);
}

/*** NAVIGATION **/

.header {
  z-index: 18;

  position: fixed;
  inset: 0% 0% auto;
  transition:
    0.6s padding var(--transition--ease),
    0.6s color var(--transition--ease);
  color: var(--swatch--cream);

  &::before {
    content: "";
    position: absolute;
    width: 100%;
    inset: 0;
    background: var(--swatch--cream);
    opacity: 1;
    z-index: -1;
    pointer-events: none;
    transition: 0.6s all var(--transition--ease);
    transform: translateY(-101%);
  }

  .nav-container {
    padding: var(--padd--40) var(--padd--side);
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: 0.6s padding var(--transition--ease);
    position: relative;
  }

  .btn {
    border-color: var(--swatch--cream);
  }

  &.is-active {
    color: var(--swatch--cream) !important;
    z-index: 23;
  }

  &.solid,
  &.dark {
    color: var(--swatch--black);

    &::before {
      transform: translateY(0%);
    }

    .nav-container {
      padding: var(--padd--25) var(--padd--side);

      &.anniversary {
        padding: 1.1em var(--padd--side);
      }

      @media all and (max-width: 768px) {
        padding: 16px var(--padd--side);
      }
    }

    .btn {
      border-color: var(--swatch--black);
    }
  }

  @media all and (max-width: 768px) {
    .nav-container {
      padding: 25px 30px;
    }
  }
}

.srg-logo {
  width: 6em;
  display: flex;

  &.hide {
    display: none;
  }

  &.anniversary {
    width: 9em;
  }

  @media all and (max-width: 768px) {
    width: 74px;

    &.anniversary {
      width: 100px;
    }
  }
}

.btn-wrapper {
  display: flex;
  align-items: center;
  grid-gap: 0.75em;
  list-style: none;
  padding: 0;
  flex-wrap: wrap;
}
.btn {
  font-size: var(--font-size--20);
  font-family: var(--font-family--heading);
  text-transform: uppercase;
  border: 1px solid var(--swatch--black);
  border-radius: 10em;
  padding: 0.4em 0.7em 0.1em;
  line-height: 1;
  position: relative;
  color: var(--swatch--black);
  background: var(--swatch--cream);
  transition:
    opacity 0.6s ease 1s,
    color 0.3s ease,
    background 0.3s ease,
    border-color 0.3s ease,
    transform 0.3s ease,
    font-size 0s ease;

  &.ghost {
    background-color: transparent;
  }

  &.sml {
    font-size: var(--font-size--18);
    padding: 0.4em 0.6em 0.2em;
    font-family: var(--font-family--body);
    text-transform: none;

    @media all and (max-width: 768px) {
      font-size: var(--font-size--15);
    }
  }

  &.nav {
    font-size: var(--font-size--15);
    padding: 0.35em 0.8em 0.1em;
  }

  &:hover {
    background-color: var(--swatch--red);
    border: 1px solid var(--swatch--black);
    color: var(--swatch--black);
  }
}

.tag {
  font-size: var(--font-size--13);
  line-height: 1;
  position: relative;
  color: var(--swatch--black);
  background: var(--swatch--cream);
  border: 1px solid;
  padding: 0.3em 0.5em;
}

.hamburger_wrap {
  --thickness: 1px;
  --gap: 8px;
  --rotate: 45;
  --width: 55px;
  position: relative;
  display: flex;
  height: 100%;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  row-gap: var(--gap);
  margin-left: var(--padd--40);
  transition: transform 0.3s ease;

  &:hover {
    transform: scale(0.8, 1);
  }

  @media all and (max-width: 768px) {
    --width: 45px;
    margin-left: 1em;
  }
}

.hamburger_line {
  flex: 0 0 auto;
  transition: all 0.6s var(--transition--ease);
  background-color: currentcolor;
  height: var(--thickness);
  width: var(--width);
}

.is-active {
  .hamburger_wrap {
    transform: scale(0.8, 0.8);

    &:hover {
      transform: scale(0.8, 0.8);
    }
  }

  .hamburger_line {
    transform: scaleX(0);
    /* width: 80%; */
  }

  .hamburger_line:first-child {
    transform: translateY(calc(var(--thickness) + var(--gap)))
      rotate(calc(var(--rotate) * 3 * 1deg));
  }

  .hamburger_line:last-child {
    transform: translateY(calc(var(--thickness) * -1 + var(--gap) * -1))
      rotate(calc(var(--rotate) * 1deg));
  }
}

/**** MEGA MENU ****/

.mega-menu {
  position: fixed;
  inset: 0;
  height: 100dvh;
  display: grid;
  grid-template-columns: 1fr 3fr;
  grid-gap: 4em;
  color: var(--swatch--cream);
  padding: var(--padd--200) var(--padd--side);
  visibility: hidden;

  .bg {
    position: absolute;
    z-index: -1;
    background-color: var(--swatch--black);
    inset: 0;
    clip-path: polygon(0 0, 100% 0, 100% 0%, 0% 0%);
    visibility: hidden;
  }
  .col {
    position: relative;
    ul {
      margin: 0;
      padding: 0;
      list-style: none;

      &:has(li a:hover) li a:not(:hover) {
        opacity: 0.5;
      }
    }
    li {
      visibility: hidden;
      opacity: 0;
    }
    li a {
      font-size: var(--font-size--32);
      font-family: var(--font-family--heading);
      margin-bottom: 0.3em;
      transition: ease opacity 0.3s;

      &:hover {
        opacity: 1;
      }
    }
    .announcement {
      width: 100%;
      display: block;
      max-width: 54em;
      visibility: hidden;
      opacity: 0;
      aspect-ratio: 1 / 0.45;
      img {
        width: 100%;
      }
    }
  }
  .social-wrapper {
    position: absolute;
    bottom: var(--padd--side);
    left: var(--padd--side);
    visibility: hidden;
    opacity: 0;
  }

  @media all and (max-width: 768px) {
    grid-gap: 4em;
    display: flex;
    flex-direction: column;

    .col {
      li {
        text-align: center;
      }
    }

    .col:nth-child(3) {
      order: 3;
      display: none;
    }
    .social-wrapper {
      position: relative;
      left: auto;
      bottom: auto;
      justify-content: center;
    }
  }
}

/*** FOOTER ***/

.social-wrapper {
  margin-top: 1.5em;
  display: flex;
  grid-gap: 1em;

  &.mobile-f {
    justify-content: center;
  }

  .social-icon {
    width: 1.75em;
    transition: ease opacity 0.3s;

    &:hover {
      opacity: 0.5;
    }
  }

  @media all and (max-width: 768px) {
  }
}

footer {
  padding: 5em var(--padd--side) 3em;
  overflow: hidden;
  background-color: var(--swatch--black);
  position: relative;
  z-index: 22;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 4em;
  color: var(--swatch--cream);

  .srg-logo {
    width: 7.1em;
  }

  @media all and (max-width: 768px) {
    padding: 3em var(--padd--side) 3em;
    grid-gap: 1em;

    .srg-logo {
      width: 74px;
    }

    .foot-link {
      font-size: 13px;
    }

    .subscribe.mobile {
      overflow: hidden;
      grid-column-start: 1;
      grid-column-end: 3;
      width: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      text-align: center;
      padding: 2em 0;
      grid-gap: 1em;
    }

    .foot-col:last-child,
    .foot-col:nth-child(4) {
      grid-column: span 2;
      text-align: center;
    }
  }
}

.foot-col {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  grid-gap: 3em;

  &.grid-2 {
    flex-direction: row;
    grid-gap: 3em;
  }

  ul {
    display: flex;
    flex-direction: column;
    list-style: none;
    margin: 0;
    padding: 0;
    grid-gap: 0.4em;
  }
  ul li {
  }
  .foot-link {
    transition: ease opacity 0.3s;

    &:hover {
      opacity: 0.6;
    }
  }

  &:last-child {
    text-align: right;
  }

  @media all and (max-width: 768px) {
  }
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.subscribe {
  width: 70%;

  /* Inline <a> wrapping the flex char span splits the pill border */
  &.desktop .btn {
    display: inline-flex;
    margin-top: 0.5em;
  }
}

.subscribe-form {
  display: flex;
  gap: 0;
  align-items: stretch;
  margin-top: 0.65em;

  @media all and (max-width: 768px) {
    max-width: 100%;
    flex-direction: column;
    width: 100%;
  }
}

.subscribe-form input[type="email"] {
  flex: 1;
  padding: 0.6em 0.75em 0.6em;
  line-height: 1;
  border: 1px solid var(--swatch--cream);
  border-right: 0;
  font-weight: 500;
  background: var(--swatch--black);
  color: var(--swatch--cream);

  @media all and (max-width: 768px) {
    border-right: 1px solid var(--swatch--cream);
    border-bottom: 0;
    text-align: center;
  }
}

.subscribe-form input[type="email"]::placeholder {
  color: var(--swatch--cream);
}

.subscribe-form button {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--swatch--black);
  color: var(--swatch--cream);
  padding: 0 0.75em;
  cursor: pointer;
  border: 1px solid var(--swatch--cream);
  border-left: 0;

  @media all and (max-width: 768px) {
    border-left: 1px solid var(--swatch--cream);
    padding: 0.5em;
  }
}

/**** SEVENROOMS WIDGET ****/

.book-now {
  --sel-height: 48px;
  --sel-radius: 12px;
  --sel-padding-x: 14px;
  --sel-font:
    system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --sel-bg: var(--swatch--cream);
  --sel-fg: var(--swatch--black);
  --sel-border: var(--swatch--black);
  --sel-border-hover: var(--swatch--black);
  --sel-border-focus: var(--swatch--black); /* focus ring color */
  --sel-arrow: currentColor; /* uses foreground color for arrow */
  --sel-placeholder: #888;
  position: fixed;
  z-index: 23;
  inset: 0;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  grid-gap: 4em;
  color: var(--swatch--black);
  visibility: hidden;

  .bg {
    position: absolute;
    z-index: -1;
    background-color: var(--swatch--cream);
    inset: 0;
    clip-path: polygon(0 0, 100% 0, 100% 0%, 0% 0%);
    visibility: hidden;
  }

  .close-booking {
    position: absolute;
    width: 2em;
    aspect-ratio: 1;
    right: 4.5em;
    top: var(--padd--40);

    svg {
      opacity: 0.6;
      transition: ease all 0.3s;
    }

    &:hover {
      svg {
        opacity: 1;
        transform: scale(0.9);
      }
    }
    @media all and (max-width: 768px) {
      right: var(--padd--side);
      top: var(--padd--side);
    }
  }
  .wrapper {
    overflow: scroll;
    width: 100%;
    padding: var(--padd--100) var(--padd--side);

    padding: var(--padd--100) var(--padd--side) var(--padd--side);
    height: 100%;

    .inner {
      width: 100%;
      max-width: 800px;
      margin: 0 auto;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: center;
      grid-gap: 2em;

      height: 100%;
    }

    @media all and (max-width: 768px) {
      padding-top: var(--padd--60);
    }
  }
  h2 {
    font-family: var(--font-family--heading) !important;
    font-weight: 400;
  }
}

/* Custom select */
.custom-select {
  position: relative;
  display: inline-block;
  width: min(100%, 28rem);
  font-family: var(--font-family--heading);
  z-index: 3;
  margin-bottom: 1em;
}

/* Trigger button */
.cs-trigger {
  width: 100%;
  text-align: left;
  padding: 0.2em 0;
  border: 0;
  border-bottom: 1px solid var(--swatch--black);
  background: var(--swatch--cream);
  color: var(--swatch--black);
  cursor: pointer;
  position: relative;
  transition:
    border-color 0.18s ease,
    box-shadow 0.18s ease;
  font-size: var(--font-size--24);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cs-trigger:hover {
  border-color: var(--swatch--black);
}
.custom-select:has(.cs-trigger:focus-visible) .cs-trigger,
.custom-select.is-open .cs-trigger {
  border-color: var(--swatch--black);
}

/* Chevron */
.cs-trigger::after {
  content: "";
  position: absolute;
  right: 0em;
  top: 50%;
  width: 0.5em;
  height: 0.5em;
  transform: translateY(-50%);
  background: no-repeat center / contain
    url('data:image/svg+xml;utf8,<svg width="58" height="33" viewBox="0 0 58 33" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M56.3381 2.33805L29 29.6761L1.66195 2.33805" stroke="black" stroke-width="4"/></svg>');
  transition: transform 0.3s ease;
}
.custom-select.is-open .cs-trigger::after {
  transform: translateY(-50%) rotate(180deg);
}

/* Options popover */
.cs-options {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 20;
  margin: 0;
  padding: 6px 0;
  list-style: none;
  border: 1px solid var(--swatch--black);
  background: var(--swatch--cream);
  max-height: 280px;
  overflow: auto;
  display: none;
}
.custom-select.is-open .cs-options {
  display: block;
}

/* Items */
.cs-options [role="option"] {
  padding: 0.5em 1em;
  cursor: pointer;
  outline: none; /* we'll show our own focus */
}
.cs-options [role="option"][aria-selected="true"] {
  background: #f1ecde;
}
.cs-options [role="option"].is-active,
.cs-options [role="option"]:focus {
  background: #f1ecde;
}

/* Placeholder style */
.cs-options .is-placeholder {
  color: #888;
}

.sevenrooms-widget {
  position: relative;
  min-height: 280px;
  min-height: 760px;
  width: 100%;
  max-width: 800px;

  flex-grow: 1;
}

/* --- Loading overlay --- */
.srw-loading {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
}
.srw-spinner {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 3px solid rgba(0, 0, 0, 0.15);
  border-top-color: currentColor;
  animation: srw-spin 0.8s linear infinite;
}
@keyframes srw-spin {
  to {
    transform: rotate(360deg);
  }
}

/* --- Fade in iframe when ready --- */
.srw-iframe {
  width: 100%;
  min-height: 400px;
  border: 0;
  opacity: 0;
  transition: opacity 220ms ease;
  display: block;

  height: 100%;
}
.srw-iframe.is-ready {
  opacity: 1;
}

/*** TRIPLESEAT FORMS ***/

#tripleseat_embed_form input[type="submit"].ts-is-sending,
#tripleseat_embed_form button[type="submit"].ts-is-sending {
  opacity: 0.6;
  cursor: wait;
  pointer-events: none;
}

.enquire-modal {
  position: fixed;
  z-index: 24;
  inset: 0;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  grid-gap: 4em;
  color: var(--swatch--black);
  visibility: hidden;

  @media all and (max-width: 768px) {
    p {
      text-align: center;
    }
  }

  .bg {
    position: absolute;
    z-index: -1;
    background-color: var(--swatch--cream);
    inset: 0;
    clip-path: polygon(0 0, 100% 0, 100% 0%, 0% 0%);
    visibility: hidden;
  }

  .close-embed {
    position: absolute;
    width: 2em;
    aspect-ratio: 1;
    right: 4.5em;
    top: var(--padd--40);
    z-index: 2;

    svg {
      opacity: 0.6;
      transition: ease all 0.3s;
    }

    &:hover {
      svg {
        opacity: 1;
        transform: scale(0.9);
      }
    }

    @media all and (max-width: 768px) {
      right: var(--padd--side);
      top: var(--padd--side);
    }
  }
  .embed {
    overflow: scroll !important;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    grid-gap: 2em;
    padding: var(--padd--100) var(--padd--side);
    width: 100%;
  }

  .embed-form {
    width: 100%;
    max-width: 800px;
    text-align: center;

    #tripleseat_embed_form {
      text-align: left;
    }

    h1 {
      font-size: var(--font-size--24);
      text-transform: uppercase;
    }

    h2 {
      font-size: var(--font-size--20);
      text-transform: uppercase;
    }

    p a {
      text-decoration: underline;
    }
    table,
    #tripleseat_embed_form {
      width: 100%;
    }
    #tripleseat_embed_form table td {
      margin-bottom: 1em;
      padding: 0.5em;
    }
    #tripleseat_embed_form label {
      margin-bottom: 0.5em;
      font-size: 1em;
      font-weight: 400;
    }
    #tripleseat_embed_form input,
    #tripleseat_embed_form textarea,
    #tripleseat_embed_form select {
      border: 0;
      border-bottom: 1px solid currentColor;
      background: transparent;
      color: currentColor;
      width: 100%;
      padding: 0.5em 0;
      font-size: 1em;
      border-radius: 0;
    }

    #tripleseat_embed_form textarea {
      min-height: 9em;
    }

    #tripleseat_embed_form input[type="checkbox"] {
      width: 1em;
      height: auto;
      aspect-ratio: 1;
      margin-right: 0.5em;
      -webkit-appearance: auto;
    }

    #tripleseat_embed_form input.button {
      width: auto;
      padding: 0.65em 1em 0.4em;
      border: 1px solid;
      background-color: transparent;
      border-radius: 4em;
      text-transform: uppercase;
      font-family: var(--font-family--heading);
      line-height: 1;
      transition: ease background-color 0.3s;
      margin-bottom: 2em;

      &:hover {
        background-color: var(--swatch--red);
      }
    }

    #tripleseat_embed_form #lead_form_submit a {
      font-size: 70%;
      opacity: 0.5;
      @media all and (max-width: 768px) {
        float: left;
      }
    }

    #tripleseat_embed_form #lead_phone_number {
      width: 100%;
    }

    .row_details_header {
      margin-top: 3em;
      display: inline-block;
    }
  }

  .tripleseat-dlf-heading-h3,
  .tripleseat-dlf-text,
  .tripleseat-dlf-time-wrapper .tripleseat-dlf-time-icon {
    display: none;
  }
  .tripleseat-dlf-field-group {
    padding-bottom: 2em;
  }
  .tripleseat-dlf-date-wrapper,
  .tripleseat-dlf-time-wrapper .tripleseat-dlf-input,
  .tripleseat-dlf-number {
    max-width: 400px;
  }
  .tripleseat-dlf-checkbox-wrapper,
  .tripleseat-dlf-checkbox-item {
    display: flex;
    align-items: center;
    accent-color: black;
    margin-bottom: 0.2em;

    label {
      margin-bottom: 0 !important;
    }
  }

  .tripleseat-dlf-legend {
    margin-bottom: 0.5em;
  }
  .tripleseat-dlf-checkbox-item {
    input[type="checkbox"] {
      cursor: pointer !important;
    }
    label {
      cursor: default !important;
    }
  }
}

#tripleseat_embed_form #ts-error-box {
  display: none;
  margin: 0 0 1rem;
  padding: 1rem;
  border: 1px solid #cd0a0a;
  border-radius: 0.5rem;
  background: #cd0a0a0f;
}

#tripleseat_embed_form .ts-error-title {
  margin: 0 0 0.5rem;
  font-weight: 600;
  font-size: var(--font-size--16);
}

#tripleseat_embed_form .ts-error-list {
  margin: 0;
  padding-left: 1.2rem;
}

#tripleseat_embed_form .ts-inline-error {
  margin-top: 0.35rem;
  font-size: 0.9em;
  line-height: 1.3;
  color: #cd0a0a;
  text-transform: capitalize;
  font-weight: 600;
}

#tripleseat_embed_form input.ts-field-error,
#tripleseat_embed_form textarea.ts-field-error,
#tripleseat_embed_form select.ts-field-error {
  border-color: currentColor !important;
}

/*** STICKY FOOTER ****/

.sticky-footer {
  position: sticky;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: var(--swatch--cream);
  border-top: 1px solid var(--swatch--black);
  border-bottom: 1px solid var(--swatch--black);
  padding: 0.6em var(--padd--side);
  display: flex;
  justify-content: center;
  align-items: center;
  grid-gap: 1em;
  z-index: 8;
}

/*** LINKS ****/

.underline {
  position: relative;
}

.underline::before,
.underline::after {
  content: "";
  position: absolute;
  bottom: 0em;
  left: 0;
  width: 100%;
  height: 0.0625em;
  background-color: currentColor;
  transition: transform 0.735s cubic-bezier(0.625, 0.05, 0, 1);
  transform-origin: right;
  transform: scaleX(0) rotate(0.001deg);
}

.underline::before {
  transform-origin: left;
  transform: scaleX(1) rotate(0.001deg);
  transition-delay: 0.3s;
}

.underline:hover::before {
  transform-origin: right;
  transform: scaleX(0) rotate(0.001deg);
  transition-delay: 0s;
}

.underline::after {
  transform-origin: right;
  transform: scaleX(0) rotate(0.001deg);
  transition-delay: 0s;
}

.underline:hover::after {
  transform-origin: left;
  transform: scaleX(1) rotate(0.001deg);
  transition-delay: 0.3s;
}

/*** BACKGROUNDS ***/

.black-bg {
  background-color: var(--swatch--black);
  color: var(--swatch--cream);

  .btn {
    color: var(--swatch--cream);
    border-color: var(--swatch--cream);

    &:hover {
      background-color: var(--swatch--red);
      border-color: var(--swatch--red);
      color: var(--swatch--black);
    }
  }

  a.srg-tile {
    &:hover {
      .btn {
        background-color: var(--swatch--red);
        border-color: var(--swatch--red);
        color: var(--swatch--black);
      }
      /* .btn [data-button-animate-chars] span {
        transform: translateY(-1.3em) rotate(0deg);
      } */
    }
  }

  .tag {
    color: var(--swatch--cream);
    background: var(--swatch--black);
  }
}
.cream-bg {
  background-color: var(--swatch--cream);
  color: var(--swatch--black);
}
.gold-bg {
  background-color: var(--swatch--gold);
  color: var(--swatch--black);
}

/*** CURSOR INTERACTIONS ***/

.cursor {
  z-index: 23;
  grid-column-gap: 0.3em;
  grid-row-gap: 0.3em;
  background-color: var(--swatch--black);
  pointer-events: none;
  border-radius: 2.5em;
  flex-flow: row;
  justify-content: center;
  align-items: center;
  width: 0.7em;
  height: auto;
  aspect-ratio: 1;
  will-change: width, height;
  transition:
    padding-top 0.4s cubic-bezier(0.625, 0.05, 0, 1),
    padding-right 0.4s cubic-bezier(0.625, 0.05, 0, 1),
    padding-left 0.4s cubic-bezier(0.625, 0.05, 0, 1),
    padding-bottom 0.4s cubic-bezier(0.625, 0.05, 0, 1),
    opacity 0.2s,
    border-radius 0.4s cubic-bezier(0.625, 0.05, 0, 1),
    background-color 0.4s cubic-bezier(0.625, 0.05, 0, 1),
    height 0.4s cubic-bezier(0.625, 0.05, 0, 1),
    opacity 0.4s cubic-bezier(0.625, 0.05, 0, 1),
    width 0.4s cubic-bezier(0.625, 0.05, 0, 1),
    font-size;
  display: flex;
  position: fixed;
  top: 0%;
  bottom: 0%;
  overflow: hidden;

  &.light {
    background-color: var(--swatch--cream);
  }

  @media all and (max-width: 768px) {
    display: none;
  }
}

body:has(.btn:hover) .cursor {
  width: 0.4em !important;
}

/***** ACCORDION *****/
.accordion-section {
  padding: var(--padd--100) var(--padd--side);

  .heading {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    grid-gap: 4em;
    margin-bottom: var(--padd--100);
  }

  @media all and (max-width: 768px) {
    padding: var(--padd--60) var(--padd--side);

    .heading {
      grid-template-columns: 1fr;
      margin-bottom: var(--padd--40);
    }
  }
}

.accordion {
  border-top: 1px solid;

  .accordion-header {
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    padding: 1em 0.5em 1em 0;
    transition: var(--transition--ease) 0.6s padding;

    svg {
      width: 0.75em;
      transition: var(--transition--ease) 0.6s transform;
    }

    &:hover {
      /* padding: 1em 2em 1em 0.5em; */
    }
  }

  .accordion-body {
    grid-template-rows: 0fr;
    transition: var(--transition--ease) 0.6s all;
    opacity: 0;
    display: grid;

    & > div {
      overflow: hidden;
    }
  }

  &.open {
    .accordion-header {
      svg {
        transform: rotate(-180deg);
      }
    }

    .accordion-body {
      grid-template-rows: 1fr;
      opacity: 1;
      padding: 0.25em 0 2em;
    }
  }
}

/***** HERO SECTION *****/

.hero-section {
  position: relative;
  height: calc(100svh - 1.2em);
  display: flex;
  justify-content: center;
  align-items: center;
  margin: var(--padd--border);
  overflow: hidden;
  color: var(--swatch--cream);
  .bg {
    position: absolute;
    inset: 0;
    background-color: var(--swatch--black);

    &::after {
      content: "";
      background: #000000;
      background: linear-gradient(
        0deg,
        rgba(0, 0, 0, 1) 0%,
        rgba(0, 0, 0, 0) 100%
      );
      position: absolute;
      inset: auto 0% 0%;
      height: 10em;
      opacity: 0.5;
      z-index: 2;
    }

    &::before {
      content: "";
      background: #000000;
      background: linear-gradient(
        180deg,
        rgba(0, 0, 0, 1) 0%,
        rgba(0, 0, 0, 0) 100%
      );
      position: absolute;
      inset: 0% 0% auto;
      height: 10em;
      opacity: 0.5;
      z-index: 2;
    }

    img {
      opacity: 0.8;
    }
  }
  .content {
    position: relative;
    width: 100%;
    max-width: 72em;
    text-align: center;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    z-index: 2;

    &.larger {
      .logo {
        max-height: 12.7em;
        max-width: 60em;

        @media all and (max-width: 768px) {
          max-width: 90%;
        }
      }
    }
  }
  .logo {
    height: 100%;
    max-height: 5.7em;
    max-width: 40em;
    display: flex;
    width: auto;

    img {
      height: auto;
      width: auto;
    }
  }

  h1 {
    font-size: var(--font-size--90);
    line-height: 1;
    margin: 0;

    @media all and (max-width: 768px) {
      font-size: 48px;
    }
  }
  h4 {
    margin: 0.5em 0;
    font-size: var(--font-size--32);
  }

  .h4 {
    position: absolute;
    bottom: 1.75em;
    font-size: var(--font-size--32);
  }

  .extra-gradient {
    background: #000000;
    background: linear-gradient(
      0deg,
      rgba(0, 0, 0, 1) 0%,
      rgba(0, 0, 0, 0) 100%
    );
    position: absolute;
    inset: auto 0% 0%;
    height: 50em;
    opacity: 0.5;
    z-index: 0;
  }
  .filters {
    position: absolute;
    top: 60vh;
    max-width: 62em;
    width: 100%;
  }

  .apply {
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    visibility: hidden;
    position: absolute;
    transition: all 0.3s ease;
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 2em;
    z-index: 2;

    &:before {
      content: "";
      background: #000000;
      background: linear-gradient(
        0deg,
        rgba(0, 0, 0, 1) 21%,
        rgba(0, 0, 0, 0) 100%
      );
      position: absolute;
      inset: auto 0% 0%;
      height: 11em;
      opacity: 0.85;
      z-index: 0;
      pointer-events: none;
    }

    .btn {
      color: var(--swatch--cream);
      border-color: var(--swatch--cream);
      width: 7em;
      text-align: center;
      justify-content: center;
      align-items: center;
      display: flex;
      pointer-events: all;

      transition:
        opacity 0.3s ease 1s,
        color 0.3s ease,
        background 0.3s ease,
        border-color 0.3s ease,
        transform 0.3s ease,
        font-size 0s ease;
      transition-delay: 0s !important;

      &:hover {
        color: var(--swatch--black);
        border-color: var(--swatch--black);
      }
    }

    &.visible {
      opacity: 1;
      visibility: visible;
    }
  }

  @media all and (max-width: 768px) {
    height: calc(100svh - 22px);

    .logo {
      max-width: 80vw;
      max-height: 80px;
    }

    .bg {
      .img {
        opacity: 1;
      }
    }

    .content {
      padding: 0 var(--padd--side);
    }

    h1 {
      font-size: 40px;
    }
    h4,
    .h4 {
      font-size: var(--font-size--20);
    }

    .filters {
      display: none;
    }
    .apply {
      display: none;
    }
  }
}

.hero-text {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: var(--padd--300) var(--padd--100) var(--padd--150);

  h1 {
    font-size: var(--font-size--90);
    line-height: 1;
    margin: 0;

    &.h3 {
      font-size: var(--font-size--55);
      line-height: 1;
    }

    @media all and (max-width: 768px) {
      font-size: 48px;

      &.h3 {
        font-size: var(--font-size--20);
      }
    }
  }

  @media all and (max-width: 768px) {
    padding: var(--padd--150) var(--padd--side) var(--padd--40);
  }
}

/***** TEXT SECTION *****/

.text-section {
  padding: var(--padd--100) var(--padd--200);
  text-align: center;
  display: flex;
  flex-direction: column;
  grid-gap: var(--padd--60);

  &.padd-t-lrg {
    padding-top: var(--padd--300);
  }
  &.padd-b-lrg {
    padding-bottom: var(--padd--300);
  }
  &.padd-n {
    padding-bottom: 0;
  }
  &.first-section {
    padding: var(--padd--200) var(--padd--200) var(--padd--150);

    p {
      max-width: 100%;
      margin: 0;
    }

    @media all and (max-width: 768px) {
      padding: var(--padd--120) var(--padd--side);
    }
  }
  .h4 {
  }
  .h2 {
  }
  p {
    max-width: 80%;
    margin: 0 auto 1.5em;
  }

  &.large {
    .h2 {
      font-size: 2.5em;
    }
  }
  &.medium {
    .h2 {
      font-size: 2.25em;
    }
  }
  &.small {
    .h2 {
      font-size: 1.5em;
    }
  }

  &.allcaps {
    .h2 {
      text-transform: uppercase !important;
    }
  }

  .btn-wrapper {
    margin: 3em auto 0;
    justify-content: center;
  }

  &.sevenrooms-subscribe {
    grid-gap: var(--padd--25);

    .btn-wrapper {
      margin-top: 0;
    }
  }

  @media all and (max-width: 768px) {
    padding: var(--padd--60) var(--padd--side);
    grid-gap: var(--padd--30);

    &.padd-t-lrg {
      padding-top: var(--padd--100);
    }
    &.padd-b-lrg {
      padding-bottom: var(--padd--100);
    }
    &.padd-n {
      padding-bottom: 0;
    }

    p {
      max-width: 100%;
    }

    &.large {
      .h2 {
        font-size: var(--font-size--18);
      }
    }
    &.medium {
      .h2 {
        font-size: var(--font-size--16);
      }
    }
    &.small {
      .h2 {
        font-size: var(--font-size--15);
      }
    }
  }
}

/***** SWIPER COMMON *****/

.swiper-button-next:after,
.swiper-button-prev:after {
  display: none;
}

.swiper-button-disabled {
  opacity: 0 !important;
}
.swiper-button-prev,
.swiper-button-next {
  display: flex;
  place-items: center;
  margin-top: 0;
  z-index: 2;
  width: 9em;
  height: auto;
  aspect-ratio: 1;
  top: 0;
  bottom: 0;
  align-items: center;
  justify-content: center;
  color: currentColor;
  transition:
    transform 0.6s var(--transition--ease),
    opacity 0.6s var(--transition--ease);

  .swiper-btn {
    color: currentColor;
    position: absolute;
    display: grid;
    place-items: center;
    width: 2.5em;
    height: auto;
    aspect-ratio: 1;

    @media all and (max-width: 768px) {
      width: 55px;
    }
  }
  svg {
    position: absolute;
    @media all and (max-width: 768px) {
      width: 20px;
    }
  }

  &:hover {
    .swiper-btn {
    }
  }
  @media all and (max-width: 768px) {
  }
}

.swiper-button-prev {
  left: 0;
  opacity: 0;
  transform: translateX(-30%);
  /* background: #000000;
  background: linear-gradient(
    90deg,
    rgba(0, 0, 0, 1) 0%,
    rgba(0, 0, 0, 0) 100%
  ); */
}
.swiper-button-next {
  right: 0;
  opacity: 0;
  transform: translateX(30%);
  /* background: #000000;
  background: linear-gradient(
    270deg,
    rgba(0, 0, 0, 1) 0%,
    rgba(0, 0, 0, 0) 100%
  ); */
}

.swiper-button-lock {
  display: none !important;
}

/***** TESTIMONIAL SWIPER *****/

.grid-section + .testimonials {
  padding: 0 0 var(--padd--side);
}

.grid-section + .grid-section {
  padding: 0 var(--padd--side) var(--padd--30);
}

.testimonials {
  text-align: center;
  padding: var(--padd--150) 0 var(--padd--side);
  position: relative;
  overflow: hidden;

  .title {
  }

  .testimonial-swiper {
    padding: 3em var(--padd--side);

    .testimonial-slide {
      height: auto;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      .content {
        display: flex;
        flex-direction: column;
        text-align: center;
        align-items: center;
        justify-content: center;
        grid-gap: 0.2em;
        margin-top: 2em;
        margin-bottom: 2em;
      }
      h4 {
        width: 80%;
        max-width: 23em;
        margin: 0 auto;
        font-size: var(--font-size--32);
        @media all and (max-width: 768px) {
          font-size: var(--font-size--20);
        }
      }
      p {
        margin: 0;
      }
    }
  }

  .swiper-nav {
    @media all and (max-width: 768px) {
      display: none;
    }

    .swiper-button-prev,
    .swiper-button-next {
      opacity: 1;
      transform: translateX(0%);
    }
  }

  .swiper-pagination {
    position: relative;
    bottom: 0;

    .swiper-pagination-bullet {
      background: transparent;
      border: 1px solid var(--swatch--black);
      opacity: 1;
    }
    .swiper-pagination-bullet-active {
      background: var(--swatch--black);
      border: 1px solid var(--swatch--black);
    }
  }
}

/***** MAIN SWIPER *****/
.carousel-section {
  text-align: center;
  padding: var(--padd--150) 0 var(--padd--side);
  position: relative;
  overflow: hidden;
  margin-bottom: 0.2em;

  .btn-wrapper {
    padding: 0 var(--padd--side);
  }

  .text {
    .btn-wrapper {
      padding: 0;
    }
  }

  h2 {
    margin-bottom: 0.25em;
  }

  @media all and (max-width: 768px) {
    padding: var(--padd--60) 0 var(--padd--60);
  }
}

.srg-swiper {
  padding: 3em var(--padd--side);
  margin: 0 -0.75em;

  .srg-tile {
    width: 33.33%;
    padding: 0 0.75em;
  }

  &:hover {
    .swiper-button-prev,
    .swiper-button-next {
      transform: translateX(0%);
      opacity: 1;
    }
  }

  @media all and (max-width: 768px) {
    margin: 0 -13px;
    .srg-tile {
      width: 85vw;
      padding: 0 12px;
    }
  }
}

.swiper-nav {
  @media all and (max-width: 768px) {
    display: none;
  }
}

.srg-tile {
  width: 100%;
  padding: 0;
  position: relative;

  .img {
    position: relative;
    height: auto;
    overflow: hidden;
    margin-bottom: 1.25em;
    width: 100%;
    aspect-ratio: 1 / 1.2;

    &.wide {
      aspect-ratio: 1 / 0.6;
    }

    img {
      transition: ease 0.3s transform;
      transform: scale(1.02);
    }

    @media all and (max-width: 768px) {
    }
  }
  .text {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    text-align: left;
    grid-gap: 0.5em;
    h5 {
      margin-bottom: 0.2em;
      @media all and (max-width: 768px) {
        font-size: var(--font-size--20);
      }
    }
    p {
      margin: 0 0 0.5em;
    }
    .btn {
      margin-top: 1em;
      padding: 0.2em 0.6em 0.2em;
    }
  }

  .disclaimer {
    display: none;
    font-size: var(--font-size--15);
    font-weight: bolder;
    flex-direction: column;
    grid-gap: 0.5em;
    position: relative;
    z-index: 3;
    margin-top: 1em;

    p {
      font-size: 1em !important;
    }
    a {
      text-decoration: underline;
    }
  }

  &:hover {
    img {
      transform: scale(1);
    }
  }

  @media all and (max-width: 768px) {
    padding: 2em 3em;
  }

  .available-at {
    margin-top: 2em;
    display: flex;
    flex-wrap: wrap;
    grid-gap: 0.5em;
    font-size: 85%;
    margin-bottom: 3em;
    z-index: 3;
    position: relative;

    @media all and (max-width: 768px) {
      margin-bottom: 0em;
    }
  }

  a.img-absolute {
    z-index: 2;
    width: calc(100% - 1.5em);
    transform: translateX(0.75em);
  }

  a.img-absolute:hover ~ .img img {
    transform: scale(1);
  }

  a.img-absolute:hover ~ .text .btn {
    background-color: var(--swatch--red);
    border: 1px solid var(--swatch--black);
    color: var(--swatch--black);

    /* [data-button-animate-chars] span {
      transform: translateY(-1.3em) rotate(0deg);
    } */
  }
}

.whatson-carousel .srg-tile .description {
  min-height: 2.2em;
}

.page-template-events-corporate .disclaimer {
  display: flex;
}

/* GRID SECTION */

.grid-section {
  padding: var(--padd--100) var(--padd--side);

  .heading {
    margin-bottom: var(--padd--100);
  }

  .grid-3 {
    margin-top: var(--padd--100);
    grid-gap: var(--padd--100) var(--padd--30);
    margin-bottom: var(--padd--100);
  }

  .grid-2 {
    margin-top: var(--padd--100);
    grid-gap: var(--padd--100) var(--padd--30);
    margin-bottom: var(--padd--100);

    .h5 {
      line-height: 1;
      text-transform: none;
      font-size: var(--font-size--55);
      margin: 0.3em 0 0.1em;
    }

    .p-sml {
      width: 100%;
    }

    p {
      max-width: 90%;
    }
  }

  .srg-tile {
    width: 100%;
    padding: 0;

    .btn-wrapper {
      position: relative;
      z-index: 2;
    }

    a.img-absolute {
      z-index: 2;
      width: calc(100% - 0em);
      transform: translateX(0);
    }
  }

  @media all and (max-width: 768px) {
    padding: var(--padd--60) var(--padd--side) var(--padd--30);

    .heading {
      margin-bottom: var(--padd--60);
    }

    .grid-3 {
      grid-template-columns: 1fr;
      grid-gap: var(--padd--60);
      margin-top: var(--padd--60);
    }

    .grid-2 {
      grid-template-columns: 1fr;
      grid-gap: var(--padd--60);
      .h5 {
        font-size: var(--font-size--32);
      }
    }
  }
}

.single-post {
  .grid-section {
    padding: 0 var(--padd--side);
    margin: var(--padd--100) 0;
  }

  .text-section {
    padding: 0 var(--padd--side);
    margin: var(--padd--100) 0;
    grid-gap: var(--padd--25);
    text-align: left;
    display: flex;
    flex-direction: column;

    p {
      margin: 0;
    }
  }
}

.filters {
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: var(--padd--30);
  display: grid;
  align-items: flex-start;

  .accordion {
    border-bottom: 1px solid;

    .accordion-body > div {
      display: flex;
      flex-direction: column;
      grid-gap: 0.4em;
    }
  }

  label {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    user-select: none;
    position: relative;

    &::before {
      content: "";
      width: 0.4em;
      aspect-ratio: 1;
      position: absolute;
      left: 0;
      background: currentColor;
      border-radius: 50%;
      opacity: 0;
      transition: ease all 0.3s;
    }

    span {
      transition: ease 0.3s padding;
    }

    &:hover {
      span {
        padding-left: 0.5em;
      }
    }
    @media all and (max-width: 768px) {
      &:hover {
        span {
          padding-left: 0em;
        }
      }
    }
  }

  input[type="checkbox"] {
    display: none;
  }

  label:has(input[type="checkbox"]:checked)::before {
    opacity: 1;
  }

  input[type="checkbox"]:checked + span {
    padding-left: 0.8em;
  }

  @media all and (max-width: 768px) {
    grid-template-columns: 1fr;
    grid-gap: 0;

    .accordion {
      border-top: 0;
      border-bottom: 1px solid;
    }
  }
}

/* SPLIT SECTION */

.split-section {
  padding: var(--padd--150) var(--padd--side) var(--padd--100);
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: var(--padd--side);

  .srg-tile {
    h2 {
      margin: 0.3em 0 0.1em;
    }
  }
}

/* IMAGE TEXT SPLIT */

.img-text {
  padding: var(--padd--80) var(--padd--side);
  margin: var(--padd--100) 0;
  .grid-2 {
    grid-gap: var(--padd--120);
    margin-bottom: var(--padd--100);
  }
  .content {
    display: flex;
    flex-direction: column;
    grid-gap: var(--padd--25);

    p {
      max-width: 80%;
    }
  }
  .img {
    position: relative;
    height: auto;
    overflow: hidden;
    margin-bottom: 0.75em;
    width: 100%;

    &.wide {
      aspect-ratio: 1 / 0.7;
    }
    &.tall {
      aspect-ratio: 1 / 1.2;
    }
  }

  &.left {
    .img {
      order: 1;
    }
    .content {
      order: 2;
    }
  }

  .image-title {
    width: 100%;
    height: auto;
    max-width: 25em;
    margin-bottom: 1em;

    img {
      height: auto;
    }
  }

  @media all and (max-width: 768px) {
    margin: var(--padd--60) 0;

    .grid-2 {
      grid-template-columns: 1fr;
      grid-gap: var(--padd--30);
      margin-bottom: var(--padd--30);
    }
    .content {
      grid-gap: var(--font-size--13);
      p {
        max-width: 100%;
      }
    }

    .btn-wrapper {
      margin-top: 1em;
    }
  }
}

.list {
  display: flex;
  justify-content: space-between;
  margin-top: var(--padd--100);
  margin-bottom: var(--padd--40);
  grid-gap: 3em;

  .item {
    width: auto;
    padding-right: 1em;

    h5 {
      margin-bottom: 1em;
    }
    ol {
      font-size: var(--font-size--20);
      list-style: none;
      counter-reset: item;
      padding-left: 0;
      li {
        counter-increment: item;
        padding-left: 1.2em;
        position: relative;
        margin-bottom: 0.1em;

        &::before {
          content: counter(item, decimal-leading-zero);
          position: absolute;
          left: 0;
          top: 15%;
          font-size: 65%;
          line-height: 1;
        }
      }
    }
  }

  @media all and (max-width: 768px) {
    margin-top: var(--padd--30);
    .accordion {
      text-align: center;
      h5 {
        font-size: var(--font-size--20);
      }
      .accordion-header {
        padding: 1em var(--padd--side) 1em;
        justify-content: center;
      }
      .accordion-body {
        padding: 0 var(--padd--side);

        ol {
          margin-top: 0;
          list-style: none;
          counter-reset: item;
          padding-left: 0;
          li {
            counter-increment: item;
            padding-left: 1.2em;
            position: relative;
            margin-bottom: 0.1em;

            &::before {
              content: counter(item, decimal-leading-zero);
              position: absolute;
              left: 0;
              top: 15%;
              font-size: 65%;
              line-height: 1;
            }
          }
        }
      }

      &.open {
        .accordion-body {
          padding: 1em var(--padd--side) 1em;
        }
      }
    }
  }
}

/* ANNOUNCEMENT HOME */

.special-cta {
  margin: var(--padd--border);
  aspect-ratio: 1 / 0.34;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  overflow: hidden;

  .bg {
    position: absolute;
    height: 100%;
    width: 100%;
    transition: var(--transition--ease) 0.8s all;
    transform: scale(1.03);

    &:hover {
      transform: scale(1);
    }
  }
  .content {
    position: relative;
    display: flex;
  }
  .btn {
  }

  @media all and (max-width: 768px) {
    aspect-ratio: 1 / 1.1;
  }
}

/* TEXT IMAGE ALT */

.text-image-alt {
  padding: var(--padd--120) 0 var(--padd--120) var(--padd--side);
  display: grid;
  grid-template-columns: 1fr 2fr;
  grid-gap: var(--padd--40);
  overflow: hidden;
  .content {
    display: flex;
    flex-direction: column;
    grid-gap: var(--padd--border);
    h2 {
    }
  }
  .btn-wrapper {
  }
  .img-wrapper {
    display: flex;
    grid-gap: 1em;
    align-items: flex-end;
    justify-content: flex-end;
    margin-right: -4em;
    .img {
      position: relative;
      width: 29em;
      height: auto;
      aspect-ratio: 1 / 1.25;
    }
  }

  @media all and (max-width: 768px) {
    grid-template-columns: 1fr;
    grid-gap: var(--padd--30);
    padding: var(--padd--60) var(--padd--side);

    .img-wrapper {
      width: 100%;
      .img {
        width: 100%;

        &:last-child {
          display: none;
        }
      }
    }
  }
}

/* BUTTON STAGGER */

.btn [data-button-animate-chars] {
  overflow: hidden;
  position: relative;
  display: flex;
}

.btn [data-button-animate-chars] span {
  display: inline-block;
  position: relative;
  text-shadow: 0px 1.3em currentColor;
  transform: translateY(0em) rotate(0deg);
  transition: transform 0.6s cubic-bezier(0.625, 0.05, 0, 1);
}

/* .btn:hover [data-button-animate-chars] span {
  transform: translateY(-1.3em) rotate(0deg);
} */

/* Space glyph for split buttons */
.btn .btn-animate-chars__text .char-space {
  display: inline-block;
  width: 0.5ch;
  line-height: 1;
  white-space: pre;
}

/** SCROLLING GALLERY **/

.gallery-scroll {
  padding: var(--padd--40) 0 var(--padd--120);
  overflow: clip;

  .container {
    width: max-content;
    white-space: nowrap;
    display: flex;
    gap: 1vw;
    padding: 0 1vw 0 0;
    user-select: none;
    cursor: grab;
  }

  .card {
    width: 25em;
    aspect-ratio: 1 / 1.5;
    position: relative;
    margin: 0 calc(var(--padd--side) * 0.25);

    img {
      pointer-events: none;
    }

    @media all and (max-width: 768px) {
      width: 60vw;
      margin: 0 calc(var(--padd--side) * 0.1);
    }
  }
  @media all and (max-width: 768px) {
    padding: var(--padd--40) 0 var(--padd--60);
  }
}

.marquee-advanced {
  width: 100vw;
  position: relative;
  overflow: hidden;
}

.marquee-advanced__scroll {
  will-change: transform;
  width: 100%;
  display: flex;
  position: relative;
}

.marquee-advanced__collection {
  will-change: transform;
  display: flex;
  position: relative;
}

/* VENUE SPECIFIC */

body:not(:has(#whatson))
  .venue-header
  .btn-wrapper
  [data-anchor-target="#whatson"] {
  display: none !important;
}

.venue-header {
  display: grid;
  grid-template-columns: 2fr 1fr 2fr;
  align-items: center;
  position: sticky;
  top: 4.5em;
  border-top: 1px solid;
  border-bottom: 1px solid;
  padding: 1em var(--padd--side);
  z-index: 2;
  margin-bottom: -1px;

  .logo {
    width: auto;
    height: 2em;
    justify-self: center;
    display: flex;

    img {
      width: auto;
      height: auto;
    }
  }
  .btn-wrapper {
    grid-gap: 1.25em;

    &:last-child {
      justify-self: end;
    }
  }

  .social-wrapper {
    margin-top: 0;
  }

  @media all and (max-width: 768px) {
    display: flex;
    grid-gap: 1.25em;
    justify-content: center;
    top: 61px;

    .btn-wrapper {
      flex-shrink: 0;
    }

    .h5 {
      font-size: 13px;
    }
    .logo {
      display: none;
    }
    .social-wrapper {
      display: none;
    }
  }
}
.venue-info {
  padding: var(--padd--60) var(--padd--side);

  .grid-2 {
    grid-gap: 5em;

    .grid-2 {
      grid-gap: 1em;
    }
  }
  .col {
    display: flex;
    flex-direction: column;
    grid-gap: 2em;

    p {
      margin: 0 0 0.75em;
    }

    &:first-child {
      width: 80%;
    }
  }

  @media all and (max-width: 768px) {
    padding: 0;

    .accordion {
      text-align: center;
      .accordion-header {
        padding: 1em var(--padd--side) 1em;
        justify-content: center;
      }
      .accordion-body {
        padding: 0 var(--padd--side);

        /* Inline <a> wrapping the flex char span splits the pill border */
        .btn {
          display: inline-flex;
          margin-top: 1em;
        }
      }

      &.open {
        .accordion-body {
          padding: 1em var(--padd--side) 1em;
        }
      }
    }
  }
}

.sports-calendar {
  padding: var(--padd--100) var(--padd--side);

  .content {
    display: flex;
    flex-direction: column;
    grid-gap: 2em;
    text-align: center;
    max-width: 50em;
    margin: 0 auto 3em;
  }

  .embed {
    max-width: 70em;
    margin: 0 auto;
  }
}

/*** JOB BOARD ****/

.grid-3.job-board {
  grid-template-columns: 1fr;
  margin-top: 4em;

  .accordion-body > div {
    grid-gap: 8em;
  }

  .grid-2 {
    grid-template-columns: 2fr 1fr;
  }
  .col {
    display: flex;
    flex-direction: column;

    > div {
      margin-bottom: 1em;
    }

    h5 {
      margin-bottom: 0.5em;
      font-size: var(--font-size--18);
    }
  }

  .accordion {
    &.open {
      .accordion-body {
        grid-template-rows: 1fr;
        opacity: 1;
        padding: 2em 0 2em;
      }
    }
  }

  @media all and (max-width: 768px) {
    .accordion {
      padding: 0;

      h5 {
        line-height: 1;
        position: relative;
        top: 0.4em;
      }
    }
    .accordion-body > div {
      grid-gap: 2em;
    }

    .grid-2 {
      grid-template-columns: 1fr;
    }
  }
}

/**** CONTACT PAGE *****/

.contact-forms {
  padding: var(--padd--100) var(--padd--side) var(--padd--300);
  display: grid;
  grid-template-columns: 0.5fr 1fr;
  grid-gap: 8em;

  .form-types {
    border-top: 1px solid var(--swatch--black);

    a {
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid var(--swatch--black);
      padding: 0.75em 0.5em 0.75em 0;
    }
    svg {
      width: 0.75em;
      transition: var(--transition--ease) 0.6s transform;
    }

    .item.is-active svg {
      transform: rotate(-90deg);
    }

    @media all and (max-width: 768px) {
      .item {
        transition: opacity ease 0.3s;
        opacity: 0.4;
      }
      .item.is-active {
        opacity: 1;
      }

      .item.is-active svg {
        transform: rotate(0deg);
      }
    }
  }

  .form {
    visibility: hidden;
    opacity: 0;

    &.is-active {
      visibility: visible;
      opacity: 1;
    }
  }

  @media all and (max-width: 768px) {
    padding: var(--padd--60) var(--padd--side) var(--padd--60);
    grid-template-columns: 1fr;
    grid-gap: 3em;
  }
}

.grecaptcha-badge {
  visibility: hidden;
}

.form-wrapper {
  width: 100%;
  h4 {
    margin-bottom: 0.5em;
  }
  h3 {
    margin-bottom: 1em;
  }
  form {
    .field {
      margin-bottom: 1em;
    }

    fieldset label {
      display: block !important;
    }

    label {
      display: none;
    }
    input[type="text"],
    input[type="email"],
    textarea,
    select {
      background: transparent;
      width: 100%;
      border: 0;
      border-bottom: 1px solid var(--swatch--black);
      font-size: 1em;
      padding: 1em 0;

      &::placeholder {
        color: var(--swatch--black);
      }
    }

    select {
      -webkit-appearance: none;
      background-image: url(https://srg.staginglabs.co/wp-content/uploads/2025/10/down.svg);
      background-repeat: no-repeat;
      background-position: right center;
      background-size: 0.6em;
    }

    textarea {
      min-height: 7em;
    }

    .wpforms-field-radio {
      accent-color: black;
      ul {
        list-style: none;
        padding: 0;
        margin-top: 1em;
        display: flex;
        grid-gap: 0.5em;
        flex-direction: column;
      }
      li {
        display: flex;
        align-items: center;
      }
      input {
        width: auto;
      }
      label {
        display: block;
      }
    }

    .wpforms-field-file-upload {
      label {
        display: block;
      }

      .wpforms-uploader {
        border: 1px dashed #000;
        background: transparent;
        padding: 2em;
        margin-top: 1em;
        margin-bottom: 2em;
      }
    }

    .wpforms-field-checkbox {
      accent-color: black;

      ul {
        list-style: none;
        padding: 0;
        margin-top: 1em;
        display: flex;
        grid-gap: 1em;
        flex-direction: column;
      }
      li {
        display: flex;
        align-items: center;
      }
      label {
        display: block;
      }
    }
  }
}

.form-embed {
  padding: 0 var(--padd--side);
  display: grid;
  margin-bottom: var(--padd--100);

  .col {
    h3 {
      margin-bottom: 0.5em;
    }
    p {
    }
  }

  .form-wrapper {
    form {
      .field {
        margin-bottom: 1em;
      }

      label {
        display: none;
      }
      input,
      textarea,
      select {
        background: transparent;
        width: 100%;
        border: 0;
        border-bottom: 1px solid var(--swatch--black);
        font-size: 1em;
        padding: 1em 0;

        &::placeholder {
          color: var(--swatch--black);
        }
      }

      select {
        -webkit-appearance: none;
        background-image: url(https://srg.staginglabs.co/wp-content/uploads/2025/10/down.svg);
        background-repeat: no-repeat;
        background-position: right center;
        background-size: 0.6em;
      }

      textarea {
        min-height: 7em;
      }

      .wpforms-field-radio {
        accent-color: black;
        ul {
          list-style: none;
          padding: 0;
          margin-top: 1em;
          display: flex;
          grid-gap: 0.5em;
          flex-direction: column;
        }
        li {
          display: flex;
          align-items: center;
        }
        input {
          width: auto;
        }
        label {
          display: block;
        }
      }

      .wpforms-field-file-upload {
        label {
          display: block;
        }

        .wpforms-uploader {
          border: 1px dashed #000;
          background: transparent;
          padding: 2em;
          margin-top: 1em;
          margin-bottom: 2em;
        }
      }

      .wpforms-field-checkbox {
        accent-color: black;

        ul {
          list-style: none;
          padding: 0;
          margin-top: 1em;
          display: flex;
          grid-gap: 1em;
          flex-direction: column;
        }
        li {
          display: flex;
          align-items: center;
        }
        label {
          display: block;
        }
      }

      button {
        font-size: var(--font-size--20);
        font-family: var(--font-family--heading);
        text-transform: uppercase;
        border: 1px solid var(--swatch--black);
        border-radius: 10em;
        padding: 0.4em 0.7em 0.1em;
        line-height: 1;
        position: relative;
        color: var(--swatch--black);
        background: var(--swatch--cream);
        transition:
          opacity 0.6s ease 1s,
          color 0.3s ease,
          background 0.3s ease,
          border-color 0.3s ease,
          transform 0.3s ease,
          font-size 0s ease;

        &:hover {
          background-color: var(--swatch--red);
          border: 1px solid var(--swatch--black);
          color: var(--swatch--black);
        }
      }
    }
  }
}

/**** VIDEO PLAYER ****/

.video-player {
  padding: var(--padd--100) var(--padd--200);
  display: flex;
  flex-direction: column;
  grid-gap: 2em;
  .video {
    position: relative;
    overflow: hidden;
  }
  video {
    width: 100%;
  }
  .cover {
    position: absolute;
    width: 100%;
    height: 100%;
    outline: 0;
    background: transparent;
    border: 0;
    inset: 0;
    z-index: 2;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: ease 0.2s opacity;

    &.hide {
      opacity: 0;
      pointer-events: none;
    }

    &:hover {
      .play-icon {
        background: var(--swatch--cream);
        border-color: var(--swatch--cream);
        color: var(--swatch--black);
      }
    }
  }
  .play-icon {
    width: 5em;
    height: 5em;
    position: absolute;
    color: var(--swatch--cream);
    border: 1px solid;
    aspect-ratio: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    transition: ease 0.3s all;
    svg {
      width: 2em;
      position: relative;
      left: 0.25em;
    }
  }
  .video-caption {
  }

  @media all and (max-width: 768px) {
    padding: var(--padd--60) var(--padd--side);
  }
}

/**** HOME SPECIFIC FIXES ****/

.home .text-section .h2 {
  @media all and (max-width: 768px) {
    font-size: 24px;
  }
}

.home .hero-section .h4 {
  @media all and (max-width: 768px) {
    font-size: 32px;
    width: 300px;
  }
}

/**** EVENTS OVERRIDES ****/

#events {
  /* padding-bottom: 0; */
  .h5 {
    line-height: 1.2;
    text-transform: none;
    font-size: var(--font-size--32);
  }
  p {
    font-size: var(--font-size--18);
  }

  .btn.sml {
    font-size: var(--font-size--16);
  }
}
.event-branding {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: var(--padd--30);

  .text {
    grid-column: 2 / 4;
    max-width: 50em;
    a {
      text-decoration: underline;
    }
    p {
      margin: 0;
    }
  }
  .event-logo {
    text-align: center;
    img {
      width: 100%;
      height: auto;
    }
  }
  @media all and (max-width: 768px) {
    grid-template-columns: 1fr;
    .text {
      grid-column: 1;
    }
    .event-logo img {
      width: 70%;
      margin: auto;
    }
  }
}

/**** SUBSCRIBE FORM ****/

footer {
  #sr-subscription-root {
    display: inline-flex;
    margin-top: 0.5em;
    padding: 0;

    button {
      height: auto;
      background: transparent;
      border: 0;
      color: var(--swatch--cream) !important;
      padding: 0.5em 0.7em 0.4em !important;

      .bFwuvt {
        padding: 0;
      }

      i {
        color: currentColor !important;
        transition: color 0.3 ease;
      }

      .ijPuNO {
        font-family: var(--font-family--heading) !important;
        line-height: 1 !important;
        text-transform: uppercase;
        font-size: var(--font-size--18) !important;
        position: relative;
        top: 0.02em;
        color: currentColor !important;
        transition: color 0.3 ease;
      }
    }

    &:hover {
      button {
        color: var(--swatch--black) !important;
      }
    }
  }
}

.single {
  .img-text {
    .content {
      p {
        margin-bottom: 0;
      }
    }
  }

  .accordion-section {
    .heading {
      margin-bottom: var(--padd--40);
    }
  }
}

/****** JOB BOARD ******/
.page-template-job-board,
.single-job-opening {
  padding-top: 6em;
  .header {
    color: var(--swatch--black);
  }

  .grid-section {
    .grid-3 {
      grid-gap: var(--padd--30) var(--padd--30);
    }
  }
}

.job-tile {
  border: 1px solid rgb(0, 0, 0, 0.2);
  padding: 1.25em 3em 1.25em 1.25em !important;
  transition: border-color 0.3s ease;

  .btn-wrapper {
    margin-bottom: 1em;
  }
  .text {
    justify-content: space-between;
    height: 100%;
  }
  p {
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    max-height: calc(1.3em * 5);
  }
  .btn {
    margin-top: auto;
  }

  &:hover {
    border: 1px solid rgb(0, 0, 0, 1);
    .btn {
      background-color: var(--swatch--red);
      border: 1px solid var(--swatch--black);
      color: var(--swatch--black);
    }
  }
}

.job-description {
  max-width: 55em;
  margin: 6em auto 12em;
  padding: 0 var(--padd--side);
  display: flex;
  flex-direction: column;
  grid-gap: 2em;
  align-items: flex-start;

  ul {
    font-size: var(--font-size--20);
    margin: 1em 0;
    padding-left: var(--font-size--20);

    @media (max-width: 768px) {
      font-size: var(--font-size--15);
    }
  }

  .form-wrapper {
    margin-top: 1em;
  }
}

.no-results-eoi {
  max-width: 50em;
}

.default-template {
  h1 {
    margin-bottom: 0.5em;
  }
  .container {
    max-width: 800px;
    margin: 0 auto;
    padding: var(--padd--200) var(--padd--side);

    @media all and (max-width: 768px) {
      padding: var(--padd--150) var(--padd--side);
    }
  }
}

div.timeselect {
  width: 10em !important;
}

div.timeselect a {
  border-color: var(--swatch--black) !important;
}

div.timeselect a.hover {
  border-color: var(--swatch--black) !important;
  background-color: var(--swatch--black) !important;
  color: var(--swatch--cream) !important;
}

.mobile {
  display: none;

  @media all and (max-width: 768px) {
    display: block;
  }
}

.mobile-f {
  display: none;

  @media all and (max-width: 768px) {
    display: flex;
  }
}

.desktop {
  display: block;

  @media all and (max-width: 768px) {
    display: none;
  }
}

.list.desktop {
  display: flex;
  @media all and (max-width: 768px) {
    display: none;
  }
}

body #ui-datepicker-div {
  top: auto !important;
  left: auto !important;
}

.error404 {
  .header {
    color: var(--swatch--black);
  }
  .not-found-section {
    min-height: 50svh;
    margin: var(--padd--200) var(--padd--side);
  }
}