/*
 * The frame of every page: where the regions go on each screen. The markup has the regions of all the layouts (see
 * templates/base.html.twig); CSS, never the user agent, decides which of them are on the screen and where. A region
 * that does not belong to the screen is display: none, so assistive technology meets one navigation. Each region
 * (components/tabbar.css, tabs-top.css, sidebar.css, site-header.css, site-footer.css, cart-panel.css) says on which
 * screens it shows itself; this file arranges them.
 *
 * Size classes, written the same way in every stylesheet (a test lists the queries that are allowed):
 *
 *   compact        under 600px                      phone: title bar on top, tab bar at the bottom, one column
 *   phone landscape (pointer: coarse) and (max-height: 500px)   keeps the chrome of the compact class, uses two columns
 *   medium         600 - 1023px                     tablet in portrait: title bar and tabs on top, two columns
 *   expanded       1024px and wider
 *     touch        any input but a mouse            tablet in landscape: sidebar, cart panel, no title bar
 *     mouse        (hover: hover) and (pointer: fine)   desktop browser: website header and footer, categories, cart panel
 *
 * The bars that stay on top while the page scrolls are measured by --chrome-h, which the anchors and the keyboard
 * focus use to land below them (base.css).
 */

@layer layout {
  .app {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
    padding-inline: env(safe-area-inset-left) env(safe-area-inset-right);
    background: var(--bg);
    /*
     * The page is the container of the few decisions that depend on how wide it is in rem (the header of the website
     * keeps to one row at large text): rem in a container query is the font size of the page, which large text and
     * Dynamic Type change, where a media query would not notice. Only the width is contained (see site-header.css).
     */
    container: app / inline-size;
  }

  .frame {
    display: flex;
    flex: 1 0 auto;
    flex-direction: column;
  }

  .content {
    display: flex;
    flex: 1 0 auto;
    flex-direction: column;
    min-width: 0;
  }

  .content > main {
    flex: 1 0 auto;
  }

  /* The bars on top of the page: the title bar and, on a tablet in portrait, the tabs under it. */
  .chrome {
    position: sticky;
    top: 0;
    z-index: 20;
  }

  /*
   * The title of the page is its h1, in the content. Where there is a title bar it shows the title as well and the h1
   * is for assistive technology only; without a title bar (a tablet in landscape, the desktop) the h1 is the title.
   */
  .page-heading {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  /* Content that is not a list of rows: forms, text, empty states. */
  .page {
    padding: var(--s-4);
  }

  .page > * + * {
    margin-top: var(--s-4);
  }

  .page-title {
    font-size: 1.5rem;
  }

  .lead {
    color: var(--muted);
    font-size: 1rem;
    line-height: 1.5;
  }

  .flash {
    margin: var(--s-3) var(--s-4) 0;
    padding: var(--s-3) var(--s-4);
    border-radius: var(--r-md);
    background: var(--veg-soft);
    color: var(--veg);
    font-weight: 600;
  }

  /* A notice that something is not as the customer expected (a dish that was switched off while its sheet was open). */
  .flash--warning {
    background: var(--closed-soft);
    color: var(--closed);
  }

  /* ---- Wider than a phone: a page that is a centred column (forms, text, the account) keeps to a readable width. ---- */
  @media (min-width: 600px) {
    main.narrow {
      width: 100%;
      max-width: var(--narrow);
      margin-inline: auto;
    }
  }

  /* ---- Medium: the tablet in portrait. Title bar and tabs on top, no tab bar at the bottom. ---- */
  @media (min-width: 600px) and (min-height: 501px), (min-width: 600px) and (pointer: fine) {
    :root {
      --chrome-h: calc(var(--topbar-h) + var(--tabs-h) + env(safe-area-inset-top));
      --bottom-bars: env(safe-area-inset-bottom);
    }
  }

  /* ---- Expanded: 1024px and wider. The title bar and the tabs give way to a sidebar or to the header of the website. ---- */
  @media (min-width: 1024px) {
    :root {
      --chrome-h: 0px;
      --bottom-bars: env(safe-area-inset-bottom);
    }

    .chrome {
      display: none;
    }

    .page-heading {
      position: static;
      width: auto;
      height: auto;
      /* Where there is no title bar the heading is the top of the page: clear of the status bar of the tablet. */
      margin: calc(env(safe-area-inset-top) + var(--s-5)) var(--s-4) var(--s-4);
      overflow: visible;
      clip-path: none;
      white-space: normal;
      font-family: var(--font-display);
      font-style: var(--display-style);
      font-weight: var(--display-weight);
      font-size: 2rem;
      line-height: 1.2;
    }

    /* The tablet in landscape: the sidebar on the left (sections, and on the menu the categories), the cart panel on the right. */
    .frame {
      display: grid;
      grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
      align-items: start;
    }

    .frame--panel {
      grid-template-columns: var(--sidebar-w) minmax(0, 1fr) var(--panel-w);
    }

    .sidebar {
      position: sticky;
      top: 0;
      z-index: 15;
      flex-direction: column;
      height: 100vh;
      height: 100dvh;
      overflow-y: auto;
      overscroll-behavior: contain;
      background: var(--surface);
      border-right: 1px solid var(--border);
    }

    /* --panel-room is how high the box of the panel may be: the screen, less what is above and below it (components/cart-panel.css) */
    .cart-panel {
      --panel-room: calc(100vh - env(safe-area-inset-top) - var(--s-4) * 2);
      --panel-room: calc(100dvh - env(safe-area-inset-top) - var(--s-4) * 2);
      box-sizing: content-box;
      height: var(--panel-room);
      position: sticky;
      top: 0;
      padding: calc(env(safe-area-inset-top) + var(--s-4)) var(--s-4) var(--s-4) 0;
    }

    .content > main {
      min-height: 100vh;
      min-height: 100dvh;
    }
  }

  /* ---- Expanded with a mouse: the website. Header on top, footer at the bottom, no sidebar of the app. ---- */
  @media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
    :root {
      --chrome-h: var(--header-h);
    }

    .frame {
      width: 100%;
      max-width: var(--frame-max);
      margin-inline: auto;
      padding-inline: var(--s-6);
      column-gap: var(--s-6);
      grid-template-columns: minmax(0, 1fr);
    }

    .frame--categories {
      grid-template-columns: var(--categories-w) minmax(0, 1fr);
    }

    /* The list of categories scrolls, so it clips: it has room around it for the focus rings of its links (padding), which a negative margin takes back. */
    .sidebar {
      top: calc(var(--header-h) + var(--s-4));
      height: auto;
      max-height: calc(100vh - var(--header-h) - var(--s-6));
      max-height: calc(100dvh - var(--header-h) - var(--s-6));
      margin: calc(var(--s-5) - var(--s-2)) calc(var(--s-2) * -1) 0;
      padding: var(--s-2);
      background: transparent;
      border-right: 0;
    }

    .content > main {
      min-height: 0;
      padding-top: var(--s-5);
    }

    /* The page already starts below the header of the website. */
    .page-heading {
      margin-top: 0;
    }
  }

  /* The cart panel is part of the menu from 1200px on the desktop; below that the cart is the button in the header. */
  @media (min-width: 1200px) and (hover: hover) and (pointer: fine) {
    .frame--panel {
      grid-template-columns: minmax(0, 1fr) var(--panel-w);
    }

    .frame--categories.frame--panel {
      grid-template-columns: var(--categories-w) minmax(0, 1fr) var(--panel-w);
    }

    .cart-panel {
      --panel-room: calc(100vh - var(--header-h) - var(--s-4) * 2 - var(--s-5));
      --panel-room: calc(100dvh - var(--header-h) - var(--s-4) * 2 - var(--s-5));
      box-sizing: content-box;
      height: var(--panel-room);
      top: calc(var(--header-h) + var(--s-4));
      padding: var(--s-5) 0 0;
    }
  }
}