/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/*
 * Homepage hero
 *
 * Keep the navigation and artwork in normal layout flow. The illustration is
 * bounded by the space left below the header, so it cannot slide underneath
 * the controls on short landscape screens.
 */
.home-page,
.home-hero {
  min-block-size: 100svh;
}

.home-hero {
  display: flex;
  flex-direction: column;
  block-size: 100svh;
  inline-size: 100%;
  overflow: hidden;
}

@supports (height: 100dvh) {
  .home-page,
  .home-hero {
    min-block-size: 100dvh;
  }

  .home-hero {
    block-size: 100dvh;
  }
}

.home-header {
  position: relative;
  z-index: 1;
  flex: none;
  padding-block-start: clamp(1rem, 5vh, 2.5rem);
  padding-inline: max(0.75rem, env(safe-area-inset-left));
}

.home-nav {
  white-space: nowrap;
}

.home-illustration {
  display: flex;
  flex: 1 1 auto;
  align-items: flex-end;
  justify-content: center;
  min-block-size: 0;
  overflow: hidden;
  padding-block-start: clamp(0.5rem, 2vh, 1.25rem);
}

.home-illustration img {
  block-size: auto;
  inline-size: auto;
  max-block-size: 100%;
  max-inline-size: min(88vw, 53.75rem);
  object-fit: contain;
}

@media (max-width: 30rem) {
  .home-nav {
    gap: 0.5rem;
  }

  .home-nav a {
    font-size: 0.875rem;
    letter-spacing: 0.075em;
  }

  .home-illustration img {
    max-inline-size: 100vw;
  }
}

/*
 * Printed menu.
 *
 * The public menu doubles as the café's printable menu. Tailwind `print:hidden`
 * utilities in the view already drop screen-only chrome (photos, the tr/en
 * toggle, the "call waiter" button); each category card carries
 * `break-inside-avoid` so it never splits across a page. These rules set up the
 * page itself: paper margins and a plain white background.
 */
@media print {
  @page {
    margin: 1.4cm;
  }

  /* Print whatever language is currently toggled on, on plain white. */
  body {
    background: #fff;
  }
}