/*
 * The copy of the old site at /: what this site adds or changes on top
 * of its stylesheets (legacy.css and each page's). Not in a layer, so it
 * wins over both.
 */

/* The old site was light only, whatever the system's setting; the new
   site's popups follow (their colors are light-dark() pairs). */
:root {
  color-scheme: light;
}

/* Tailwind sizes the new site's popups in rem: 16px, not the old site's
   14px (which nothing on these pages sized by). */
html {
  font-size: 16px;
  -webkit-font-smoothing: auto;
  -moz-osx-font-smoothing: auto;
}

/* The root layout makes <body> a flex column in the new site's colors. */
html body {
  display: block;
  min-height: 0;
  /* Clear, as on the old pages (its <html> is white): the menu pages'
     photo sits under <body>, at z-index -1. */
  background-color: transparent;
  color: #333;
}

/* The cover filled the window: its height: 100% was of <body>, which
   the old pages set to the window's; here it sits in the .legacy
   wrapper. Up to 1024px wide the video sets the height, as it did. */
@media (min-width: 1025px) {
  .legacy.home-page .header {
    height: 100vh;
  }
}

/* Tailwind's collapse utility (visibility: collapse) shares Bootstrap's
   class name, and wins over it; Bootstrap shows and hides by display. */
.legacy .collapse {
  visibility: visible;
}

/* EN | ES in the pink bar, beside the tabs; by the menu button on a
   phone. */
.legacy .current-lang {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  text-transform: uppercase;
  white-space: nowrap;
}
.legacy .current-lang a,
.legacy .current-lang [aria-current] {
  display: inline-block;
  padding: 4px 2px;
  color: inherit;
  text-decoration: none;
}
.legacy .current-lang [aria-current] {
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 5px;
}
.legacy .current-lang a:hover,
.legacy .current-lang a:focus {
  color: #fff;
  text-decoration: none;
  opacity: 0.85;
}
.legacy .current-lang-bar {
  opacity: 0.6;
}
.legacy .navbar-tabs .nav-lang {
  display: inline-flex;
  align-items: center;
  height: 40px;
  margin-left: 10px;
  color: #fff;
  font-size: 17px;
}
/* The old icons' list sits at the bar's right edge, by the menu
   button; EN | ES goes just left of it. */
.legacy .mobile-navigation .current-lang-nav {
  right: 75px;
}
.legacy .mobile-navigation .socialnav .nav-lang {
  display: inline-flex;
  align-items: center;
  color: #fff;
  font-size: 15px;
}

/* On a phone the accessibility bar moves 60px up (room for the bar of
   Order and Catering): over SpotHopper's footer on the old page, which
   is gone, so the contact footer keeps that room. */
@media (max-width: 767px) {
  .legacy.home-page #contact_v3 {
    margin-bottom: 60px;
  }
  /* The columns stack: as much room under it as under Hours had. */
  .legacy .current-powered {
    margin-bottom: 40px;
  }
}

/* Visit Us, where the newsletter sign-up was. */
.legacy .current-visit {
  font-size: 18px;
  line-height: 1.45;
  color: #000;
}
.legacy .current-visit p {
  margin: 0 0 14px;
}
.legacy .current-visit dl {
  margin: 0 0 6px;
}
.legacy .current-visit dl > div {
  display: flex;
  flex-wrap: wrap;
  gap: 0 0.5em;
}
.legacy .current-visit dt {
  font-weight: 600;
}
.legacy .current-visit dd {
  margin: 0;
}
.legacy .current-visit a:not(.custom-temp-btn) {
  color: inherit;
}
.legacy .current-visit .custom-temp-btn {
  margin-top: 10px;
}

/* Powered by Blue Ceiba Labs, under the hours in the pink footer. */
.legacy .current-powered {
  margin: 24px 0 0;
  color: #fff;
}
.legacy .current-powered a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  vertical-align: middle;
}
.legacy .current-powered a:hover span {
  text-decoration: underline;
}
.legacy .current-powered img {
  display: inline-block;
  width: 22px;
  height: 22px;
}

/*
 * The new site's popup and chat bubble (.current-islands), as they look on
 * the new site: the old CSS styles bare elements (h2 in Lobster, margins
 * on p, indented lists), over Tailwind's reset. This layer comes after the
 * old CSS's and before Tailwind's utilities, so it puts the reset back and
 * the islands' own classes still win.
 */
@layer components.islands {
  .current-islands {
    font-family: var(--font-sans), ui-sans-serif, system-ui, sans-serif;
    font-size: 16px;
    line-height: 1.5;
    letter-spacing: normal;
    text-align: left;
    text-transform: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  .current-islands :where(*, ::before, ::after) {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 0 solid;
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    letter-spacing: inherit;
    text-align: inherit;
    text-transform: inherit;
    text-decoration: inherit;
    text-shadow: none;
    color: inherit;
    background-color: transparent;
    list-style: none;
  }
  .current-islands :where(b, strong) {
    font-weight: bolder;
  }
}

/* Copy | Changed at the bar's right edge, level with the logo, from
   768px; under the bar's right edge on a phone, where the bar is full. */
.legacy .navbar-logo {
  position: relative;
}
.legacy .current-version {
  position: absolute;
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
  color: #fff;
  font-size: 15px;
  text-align: right;
}
.legacy .current-version-tab {
  display: none;
}
@media (max-width: 767px) {
  .legacy .current-version-tab {
    display: block;
    position: absolute;
    top: 100%;
    right: 12px;
    padding: 0 12px 4px;
    border-radius: 0 0 12px 12px;
    background-color: rgb(
      213,
      42,
      148
    ); /* the bar's pink, as .navbar-logo has it */
    color: #fff;
    font-size: 14px;
  }
}