/* ============================================================
   The Lobby Kitchen & Bar — site-specific additions on top of
   lobby-style.css (the reference theme).

   What lives here:
     1. the Order Online CTA, which the reference theme has no
        slot for, styled to read as native to it
     2. small bridges for markup this site has and the reference
        does not (SEO breadcrumb fallback)
     3. small visual polish (nav spacing, hero CTAs, hero image
        scrim) layered on top without touching the reference file
   ============================================================ */

/* breadcrumbs are a fallback nav — hidden once the real header loads */
body.header-loaded .breadcrumb-container {
  display: none;
}

/* ------------------------------------------------------------
   Typeface — Oswald (display/headings/nav/buttons) + Work Sans
   (body copy), replacing the reference theme's Pathway Gothic
   One + Raleway. Same bold-condensed-headline, clean-body
   pairing the theme is built around, just a sturdier cut with a
   real weight range instead of a single regular-only face.
   Selectors below mirror every place lobby-style.css sets
   "Pathway Gothic One" or "Raleway" directly.
   ------------------------------------------------------------ */
body {
  font-family: "Work Sans", Arial, Helvetica, sans-serif;
}

h1, .header-1, h2, .header-2, h3, .header-3, h4, .header-4, h5, .header-5,
.nav, .nav a,
button, input[type="submit"], a.button, .button,
.restaurant-name, .restaurant-name-font, .navigation-font, .header-font,
#utility li, #utility .nav-multiple-locations,
#redundant-nav li, #small-screen-footer-nav a, .footer-navigation a,
#logo-overlay .restaurant-info, .featured-call-out a .button {
  font-family: "Oswald", "Pathway Gothic One", Arial, Helvetica, sans-serif !important;
}

/* ------------------------------------------------------------
   Order Online — temporarily disabled (online ordering hasn't
   launched yet). Every real order link is commented out beside
   its markup so the site can be flipped back on in one pass.
   ------------------------------------------------------------ */
.is-coming-soon {
  opacity: 0.55;
  cursor: default;
  pointer-events: none;
}

/* ------------------------------------------------------------
   Homepage-style callout cards — consistent image size
   The reference theme lets each .call-out-image size itself to
   its source image's natural aspect ratio, which only looked
   consistent because the original 3 images happened to share
   one. Force the same 4:3 crop (matching the untouched Brunch
   photo) so any image dropped in lines up with its neighbours.
   ------------------------------------------------------------ */
.call-out-image img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* ------------------------------------------------------------
   Order Online CTA — desktop
   Sits opposite the primary nav, matching the theme's outline
   button treatment (see .button-find-us in the footer).
   ------------------------------------------------------------ */
.order-online-cta {
  display: none;
}

.order-online-button {
  font-family: "Oswald", "Pathway Gothic One", Arial, Helvetica, sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
  border: 1px solid #ffffff;
  background-color: transparent;
  color: #ffffff;
  text-decoration: none;
  transition: background-color 0.3s ease, color 0.3s ease,
    border-color 0.3s ease;
}

.order-online-button:link,
.order-online-button:visited {
  color: #ffffff;
}

.order-online-button:hover,
.order-online-button:focus {
  background-color: #ffffff;
  border-color: #ffffff;
  color: #000000;
}

.order-online-button .order-arrow {
  display: inline-block;
  margin-left: 4px;
  transition: transform 0.3s ease;
}

.order-online-button:hover .order-arrow,
.order-online-button:focus .order-arrow {
  transform: translate(2px, -2px);
}

/* The theme hides the desktop nav below its breakpoint; the CTA
   follows the same rule so the two never appear at once. */
@media (min-width: 992px) {
  .order-online-cta {
    display: block;
    position: absolute;
    top: 50%;
    right: 30px;
    transform: translateY(-50%);
    z-index: 30;
  }
}

/* ------------------------------------------------------------
   Order Online CTA — inside the off-canvas drawer (mobile)
   #utility is the theme's own drawer footer slot.
   ------------------------------------------------------------ */
#utility .order-online-link {
  display: block;
  margin: 20px 0 0;
  padding: 12px 16px;
  border: 1px solid #ffffff;
  font-family: "Oswald", "Pathway Gothic One", Arial, Helvetica, sans-serif;
  font-size: 18px;
  font-size: 1.8rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-align: center;
  color: #ffffff;
  text-decoration: none;
  transition: background-color 0.3s ease, color 0.3s ease;
}

#utility .order-online-link:hover,
#utility .order-online-link:focus {
  background-color: #ffffff;
  color: #000000;
}

/* ------------------------------------------------------------
   Sticky header fix
   The reference theme puts position:sticky on <header> itself,
   but #header-container (the slot components.js injects it
   into) is only as tall as the header, so the header has no
   room to stick and just scrolls away with the page. Moving the
   sticky positioning to #header-container fixes it, since that
   div's actual parent (.modern-browser-wrapper) spans the full
   page height.
   ------------------------------------------------------------ */
header[role="banner"] {
  position: static;
}

#header-container {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 1000;
}

/* ------------------------------------------------------------
   Primary nav — breathing room between links
   The reference theme packs Home/Menus/Photos/Contact Us at
   only 7.5px padding per side; widen it slightly for legibility.
   ------------------------------------------------------------ */
@media (min-width: 1250px) {
  .nav ul.primary > li > a {
    padding-left: 18px;
    padding-right: 18px;
  }
}

/* ------------------------------------------------------------
   Home hero — Order Online / View Menu buttons
   Reuses the theme's own .button pill (see footer's
   .button-find-us for the outline variant this mirrors) so the
   CTAs read as native to the theme, not a new component.
   ------------------------------------------------------------ */
.hero-cta-group {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 24px;
  position: relative;
  z-index: 2;
}

.hero-cta-group a.hero-cta-outline {
  background-color: transparent;
  border-color: #ffffff;
  color: #ffffff;
}

.hero-cta-group a.hero-cta-outline:hover,
.hero-cta-group a.hero-cta-outline:focus {
  background-color: #ffffff;
  border-color: #ffffff;
  color: #000000;
}

/* ------------------------------------------------------------
   Home hero — gradient scrim
   The reference theme darkens the whole photo evenly with a
   flat grey multiply tint. Layering a gradient on top keeps the
   nav/title legible at the edges while letting more of the
   actual room show through in the middle of the frame.
   ------------------------------------------------------------ */
.homepage .slideshow-wrapper::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.55) 0%,
    rgba(0, 0, 0, 0.15) 28%,
    rgba(0, 0, 0, 0.12) 58%,
    rgba(0, 0, 0, 0.6) 100%
  );
  pointer-events: none;
}

/* ------------------------------------------------------------
   Photo gallery — consistent tile crop
   The gallery grid float-wraps its <li> tiles, so tiles need
   matching heights or gaps open up between rows. The theme's
   own thumbs are pre-cropped to 300x250 (6:5); photos added
   without a pre-cropped thumb variant keep their native aspect
   ratio otherwise, so force the same 6:5 crop on every tile.
   ------------------------------------------------------------ */
.gallery-thumbs li img.fullsize,
#lightgallery li img.fullsize {
  width: 100%;
  aspect-ratio: 6 / 5;
  object-fit: cover;
}

/* ------------------------------------------------------------
   Home — "More Than Just A Meal" community section
   Continues the black home-intro band below the callouts;
   matches .home-intro's centred, max-900px treatment.
   ------------------------------------------------------------ */
#community-section {
  background-color: #000000;
  padding: 10px 30px 70px;
}

.community-intro {
  float: none;
  max-width: 700px;
  margin: 0 auto;
  text-align: center;
}

.community-intro p {
  font-size: 18px;
  font-size: 1.8rem;
  line-height: 1.5;
  color: #d9d9d9;
}

/* ------------------------------------------------------------
   Service option cards — reused on Contact Us (and available
   anywhere else that wants a quick "how to visit us" summary).
   ------------------------------------------------------------ */
.service-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
}

.service-card {
  flex: 1 1 220px;
  max-width: 260px;
  padding: 28px 20px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 4px;
  text-align: center;
  background-color: rgba(255, 255, 255, 0.02);
}

.service-card .icon {
  font-size: 30px;
  font-size: 3rem;
  color: #a38954;
}

.service-card h3 {
  margin: 14px 0 8px;
  font-size: 21px;
  font-size: 2.1rem;
}

.service-card p {
  font-size: 15px;
  font-size: 1.5rem;
  line-height: 1.4;
  color: #c2c2c2;
  margin: 0;
}

.service-cards-section {
  padding-top: 40px;
  text-align: center;
}

.service-cards-section h2 {
  margin-bottom: 24px;
}

/* ------------------------------------------------------------
   Contact Us — map
   ------------------------------------------------------------ */
.contact-map {
  margin-top: 20px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  line-height: 0;
}

.contact-map iframe {
  display: block;
  width: 100%;
}

/* ============================================================
   2026 redesign — Footer, Menu page, Contact page, Photos page
   Rebuilt from the "Lobby Kitchen and Bar Redesign" Claude
   Design mockup. Scoped under .lobby2 so it never touches the
   reference theme's header or the untouched homepage — only the
   footer component and the <main> body of our-menus-list.html,
   contact-us.html and photos.html opt into it.
   ============================================================ */
.lobby2 {
  --l2-bg: oklch(0.13 0.006 75);
  --l2-bg-elevated: oklch(0.18 0.008 75);
  --l2-bg-nav: oklch(0.10 0.005 80);
  --l2-bg-footer: oklch(0.09 0.004 80);
  --l2-gold: oklch(0.78 0.14 84);
  --l2-gold-hover: oklch(0.85 0.12 84);
  --l2-gold-ink: oklch(0.09 0.004 80);
  --l2-text: oklch(0.97 0.005 85);
  --l2-text-2: oklch(0.94 0.005 85);
  --l2-text-3: oklch(0.80 0.01 80);
  --l2-text-muted: oklch(0.70 0.01 80);
  --l2-text-dim: oklch(0.65 0.01 80);
  --l2-text-dimmer: oklch(0.58 0.01 80);
  --l2-text-faint: oklch(0.50 0.01 80);
  --l2-text-faintest: oklch(0.45 0.01 80);
  --l2-text-off: oklch(0.38 0.01 80);
  --l2-border: oklch(1 0 0 / 0.08);
  --l2-border-2: oklch(1 0 0 / 0.10);
  --l2-border-3: oklch(1 0 0 / 0.15);
  font-family: "Manrope", Arial, Helvetica, sans-serif;
  color: var(--l2-text-3);
}

.lobby2 h1, .lobby2 h2, .lobby2 h3, .lobby2 h4 {
  font-family: "Oswald", Arial, Helvetica, sans-serif;
}

.l2-eyebrow {
  font-family: "Oswald", Arial, Helvetica, sans-serif;
  font-size: 13px;
  font-size: 1.3rem;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--l2-gold);
  margin-bottom: 16px;
}

.l2-badge {
  border: 2px solid var(--l2-gold);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Oswald", Arial, Helvetica, sans-serif;
  font-weight: 700;
  color: var(--l2-gold);
  flex-shrink: 0;
}

.l2-button {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: "Oswald", Arial, Helvetica, sans-serif;
  font-size: 15px;
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  background: var(--l2-gold);
  color: var(--l2-gold-ink) !important;
  padding: 16px 26px;
  border-radius: 4px;
  text-decoration: none !important;
  transition: background-color 0.25s ease;
  width: fit-content;
}

.l2-button:hover, .l2-button:focus {
  background: var(--l2-gold-hover);
}

.l2-ordering-note {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 20px;
  border-top: 1px solid var(--l2-border);
  font-family: "Oswald", Arial, Helvetica, sans-serif;
  font-size: 13.5px;
  font-size: 1.35rem;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--l2-text-faint);
}

.l2-ordering-note .l2-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--l2-gold);
  flex-shrink: 0;
}

/* ------------------------------------------------------------
   Footer
   ------------------------------------------------------------ */
.lobby2.l2-footer {
  border-top: 1px solid var(--l2-border);
  background: var(--l2-bg-footer);
  padding: 56px 30px 24px;
}

.l2-footer-inner {
  max-width: 1200px;
  margin: 0 auto;
}

.l2-footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 40px;
}

@media (max-width: 900px) {
  .l2-footer-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 560px) {
  .l2-footer-grid {
    grid-template-columns: 1fr;
  }
}

.l2-footer-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}

.l2-footer-brand .l2-badge {
  width: 34px;
  height: 34px;
  font-size: 13px;
}

.l2-footer-brand span {
  font-family: "Oswald", Arial, Helvetica, sans-serif;
  font-weight: 600;
  font-size: 16px;
  color: var(--l2-text-2);
}

.l2-footer p.l2-tagline {
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--l2-text-faintest);
  max-width: 280px;
  margin: 0 0 20px;
}

.l2-social {
  display: flex;
  gap: 12px;
}

.l2-social a {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--l2-border-3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Oswald", Arial, Helvetica, sans-serif;
  font-size: 14px;
  color: var(--l2-text-muted) !important;
  text-decoration: none !important;
  transition: border-color 0.2s ease, color 0.2s ease;
}

.l2-social a:hover, .l2-social a:focus {
  border-color: var(--l2-gold);
  color: var(--l2-gold) !important;
}

.l2-footer h4 {
  font-family: "Oswald", Arial, Helvetica, sans-serif;
  font-size: 12px;
  font-size: 1.2rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--l2-text-faint);
  margin: 0 0 20px;
}

.l2-footer-col div {
  font-size: 14.5px;
  line-height: 1.8;
  color: var(--l2-text-dim);
}

.l2-footer-hours-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 12.5px;
  line-height: 2;
  color: var(--l2-text-faint);
}

.l2-footer-hours-row span:last-child {
  color: var(--l2-text-dim);
}

.l2-footer-explore {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.l2-footer-explore a {
  font-size: 14.5px;
  color: var(--l2-text-dim) !important;
  text-decoration: none !important;
}

.l2-footer-explore a:hover, .l2-footer-explore a:focus {
  color: var(--l2-gold) !important;
}

.l2-footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 24px;
  border-top: 1px solid var(--l2-border);
  font-size: 13px;
  color: var(--l2-text-off);
  flex-wrap: wrap;
  gap: 10px;
}

.l2-footer-bottom a {
  color: var(--l2-text-off) !important;
  text-decoration: underline !important;
}

.l2-footer-bottom a:hover, .l2-footer-bottom a:focus {
  color: var(--l2-gold) !important;
}

.l2-footer-legal {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

/* ------------------------------------------------------------
   Shared page-body shell (Menu / Contact / Photos)
   ------------------------------------------------------------ */
.l2-page {
  background: var(--l2-bg);
  padding: 64px 30px 96px;
}

.l2-page-inner {
  max-width: 1200px;
  margin: 0 auto;
}

.l2-page h1 {
  font-weight: 700;
  font-size: clamp(36px, 5vw, 58px);
  color: var(--l2-text);
  margin: 0 0 16px;
}

.l2-page-sub {
  font-size: 16px;
  color: var(--l2-text-faint);
  margin: 0 0 48px;
}

/* ------------------------------------------------------------
   Menu page (our-menus-list.html)
   A single page showcasing links out to the real, separate menu
   pages (food/brunch/drinks-specials/catering.html) — each card
   is a plain link to its existing page, no JS tab state.
   ------------------------------------------------------------ */
.l2-menu-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

@media (max-width: 700px) {
  .l2-menu-grid {
    grid-template-columns: 1fr;
  }
}

.l2-menu-card-link {
  display: block;
  border-radius: 10px;
  overflow: hidden;
  position: relative;
  min-height: 300px;
  border: 1px solid var(--l2-border-2);
  text-decoration: none !important;
}

.l2-menu-card-link img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  inset: 0;
  transition: transform 0.4s ease;
}

.l2-menu-card-link:hover img, .l2-menu-card-link:focus img {
  transform: scale(1.04);
}

.l2-menu-card-link::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, oklch(0.09 0.004 80 / 0.92) 0%, oklch(0.09 0.004 80 / 0.15) 65%);
}

.l2-menu-card-text {
  position: absolute;
  left: 28px;
  bottom: 24px;
  right: 28px;
  z-index: 1;
}

.l2-menu-card-text .l2-card-name {
  font-family: "Oswald", Arial, Helvetica, sans-serif;
  font-weight: 600;
  font-size: 26px;
  color: var(--l2-text);
  margin-bottom: 6px;
}

.l2-menu-card-text .l2-card-desc {
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--l2-text-muted);
}

.l2-menu-card-text .l2-card-cta {
  margin-top: 12px;
  font-family: "Oswald", Arial, Helvetica, sans-serif;
  font-size: 12.5px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--l2-gold);
}

/* ------------------------------------------------------------
   Contact page (contact-us.html)
   ------------------------------------------------------------ */
.l2-contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
}

@media (max-width: 800px) {
  .l2-contact-grid {
    grid-template-columns: 1fr;
  }
}

.l2-contact-block {
  margin-bottom: 40px;
}

.l2-contact-block h3 {
  font-family: "Oswald", Arial, Helvetica, sans-serif;
  font-size: 13px;
  font-size: 1.3rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--l2-text-2);
  margin: 0 0 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--l2-border-2);
}

.l2-contact-block address, .l2-contact-block p {
  font-size: 16px;
  line-height: 1.7;
  color: var(--l2-text-muted);
  font-style: normal;
  margin: 0;
}

.l2-contact-block address strong {
  color: var(--l2-text-2);
}

.l2-contact-block a {
  color: var(--l2-gold);
}

.l2-hours-row {
  display: flex;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid var(--l2-border);
  font-size: 14.5px;
}

.l2-hours-row span:first-child {
  color: var(--l2-text-muted);
}

.l2-hours-row span:last-child {
  color: var(--l2-text-2);
  font-variant-numeric: tabular-nums;
}

.l2-contact-map {
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--l2-border-2);
  line-height: 0;
  margin-bottom: 24px;
}

.l2-contact-map iframe {
  display: block;
  width: 100%;
}

.l2-touch-card {
  background: var(--l2-bg-elevated);
  border: 1px solid var(--l2-border-2);
  border-radius: 10px;
  padding: 30px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.l2-touch-card h3 {
  font-family: "Oswald", Arial, Helvetica, sans-serif;
  font-size: 13px;
  font-size: 1.3rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--l2-text-2);
  margin: 0;
}

.l2-touch-card a {
  font-size: 15px;
  font-weight: 600;
  color: var(--l2-gold) !important;
  text-decoration: none !important;
}

.l2-touch-card a:hover, .l2-touch-card a:focus {
  text-decoration: underline !important;
}

.l2-touch-card span.is-coming-soon {
  font-size: 15px;
  color: var(--l2-text-faint);
}

/* ------------------------------------------------------------
   Photos page (photos.html) — true masonry via CSS columns
   ------------------------------------------------------------ */
.l2-masonry {
  column-count: 4;
  column-gap: 18px;
}

@media (max-width: 1000px) {
  .l2-masonry { column-count: 3; }
}

@media (max-width: 700px) {
  .l2-masonry { column-count: 2; }
}

@media (max-width: 460px) {
  .l2-masonry { column-count: 1; }
}

.l2-masonry-item {
  break-inside: avoid;
  margin-bottom: 18px;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid var(--l2-border);
}

.l2-masonry-item a {
  display: block;
}

.l2-masonry-item img {
  width: 100%;
  display: block;
  transition: transform 0.4s ease, filter 0.4s ease;
}

.l2-masonry-item a:hover img, .l2-masonry-item a:focus img {
  transform: scale(1.04);
  filter: brightness(1.08);
}