/*
 * The "classic" theme (BrandSetting::THEMES). Colors and fonts come from
 * CSS custom properties set in the public layout's <style> block; this
 * file is for the handful of things Tailwind's utility classes can't
 * express directly, such as body-wide font and background defaults and
 * link/focus treatment that should apply everywhere on the public site.
 */

body[data-layout="public"] {
  background-color: var(--color-background);
  color: var(--color-text);
  font-family: var(--font-body);
}

body[data-layout="public"] a {
  color: inherit;
}

body[data-layout="public"] a:focus-visible,
body[data-layout="public"] button:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/*
 * Hero photo (BrandSetting#hero_image), for every theme: this file is
 * linked on every public page, so these base rules apply to taproom too.
 * The photo fills the hero behind a dark overlay that keeps the text
 * readable; without a photo none of these elements render.
 */
body[data-layout="public"] .site-hero--photo {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: #ffffff;
}

body[data-layout="public"] .site-hero__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}

body[data-layout="public"] .site-hero__overlay {
  position: absolute;
  inset: 0;
  background: rgb(0 0 0 / 0.55);
  z-index: -1;
}

/*
 * Facebook and Instagram icons (SocialLinksComponent), for every theme.
 * The SVGs stroke in currentColor, so they pick up each theme's link color.
 */
body[data-layout="public"] .social-links a {
  display: flex;
  align-items: center;
  justify-content: center;
}

body[data-layout="public"] .social-links svg {
  width: 1.25rem;
  height: 1.25rem;
}

body[data-layout="public"] .social-links a:hover {
  opacity: 0.75;
}

body[data-layout="public"] .social-links--header svg {
  width: 1.1rem;
  height: 1.1rem;
}

/*
 * Header: narrow-screen hamburger nav, for every theme (this file is
 * linked whenever the classic theme is active). The partial only renders
 * the toggle button and data-collapsible on .site-header__links when
 * there is at least one nav link, so the button itself only needs
 * hiding above the phone breakpoint; the collapse below it is scoped to
 * [data-js] (site_header_controller.js sets that on connect) so the
 * links stay visible, wrapped as they always have, without JavaScript.
 */
body[data-layout="public"] .site-header__toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: inherit;
  cursor: pointer;
}

@media (max-width: 639px) {
  body[data-layout="public"] .site-header__toggle {
    display: inline-flex;
    flex-shrink: 0;
  }

  /* No room for the toggle beside the name and logo
     (site_header_controller.js sets data-compact): drop the logo and let
     the name wrap in its own column, rather than the toggle falling to a
     row of its own. */
  body[data-layout="public"] .site-header[data-compact] .site-header__identity {
    flex: 1 1 0;
    min-width: 0;
  }

  body[data-layout="public"] .site-header[data-compact] .site-header__brand {
    overflow-wrap: anywhere;
  }

  body[data-layout="public"] .site-header[data-compact] .site-header__logo {
    display: none;
  }

  body[data-layout="public"] .site-header[data-js] .site-header__links[data-collapsible] {
    display: none;
  }

  body[data-layout="public"] .site-header[data-js][data-open] .site-header__links[data-collapsible] {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: 100%;
    margin-top: 0.5rem;
    padding: 0.5rem 0;
    background: var(--color-background);
    border-top: 1px solid var(--color-accent);
  }

  body[data-layout="public"] .site-header[data-js][data-open] .site-header__links[data-collapsible] a {
    min-height: 44px;
    padding: 0.75rem 0.25rem;
    display: flex;
    align-items: center;
  }

  body[data-layout="public"] .site-header[data-js][data-open] .site-header__links[data-collapsible] .social-links {
    padding: 0.5rem 0.25rem 0;
  }
}

/*
 * Gallery lightbox (Sections::GalleryComponent, lightbox_controller.js),
 * for every theme: a photo opened full screen over a dark backdrop, with
 * its caption under it and previous, next, and close buttons.
 */
body[data-layout="public"] .gallery-lightbox {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 3.5rem 1rem;
  border: 0;
  background: rgb(0 0 0 / 0.92);
  color: #ffffff;
}

body[data-layout="public"] .gallery-lightbox[open] {
  display: flex;
  align-items: center;
  justify-content: center;
}

body[data-layout="public"] .gallery-lightbox__figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  max-width: 100%;
  max-height: 100%;
  margin: 0;
}

body[data-layout="public"] .gallery-lightbox__image {
  max-width: 100%;
  max-height: calc(100vh - 10rem);
  object-fit: contain;
}

body[data-layout="public"] .gallery-lightbox__caption {
  max-width: 40rem;
  text-align: center;
}

body[data-layout="public"] .gallery-lightbox__button {
  position: absolute;
  width: 2.75rem;
  height: 2.75rem;
  border: 0;
  border-radius: 9999px;
  background: rgb(255 255 255 / 0.15);
  color: #ffffff;
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
}

body[data-layout="public"] .gallery-lightbox__button:hover {
  background: rgb(255 255 255 / 0.3);
}

body[data-layout="public"] .gallery-lightbox__button--close {
  top: 0.75rem;
  right: 0.75rem;
}

body[data-layout="public"] .gallery-lightbox__button--previous,
body[data-layout="public"] .gallery-lightbox__button--next {
  top: 50%;
  transform: translateY(-50%);
}

body[data-layout="public"] .gallery-lightbox__button--previous {
  left: 0.75rem;
}

body[data-layout="public"] .gallery-lightbox__button--next {
  right: 0.75rem;
}

/* The header's Menu link already says where you are, and the first menu's
   own title sits right below, so the "Menu" page title stays for screen
   readers and search engines but takes no space (as on taproom). */
body[data-layout="public"][data-theme="classic"] main > section.menu-page > .menu-page__masthead {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* With the page title hidden, each menu's title is the page heading, sized
   like the other pages' titles (text-3xl). */
body[data-layout="public"][data-theme="classic"] .menu-block__title {
  font-size: 1.875rem;
  line-height: 2.25rem;
}

/* Specials photos match the menu item thumbnails (public/menus/_item). */
body[data-layout="public"][data-theme="classic"] .special__photo {
  align-self: center;
  width: 180px;
  height: 180px;
}

body[data-layout="public"][data-theme="classic"] .menu-item__description {
  display: block;
}

/* Honor a reduced-motion preference: no transitions, animations, or smooth scrolling. */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *, *::before, *::after {
    transition: none !important;
    animation: none !important;
  }
}