/* backend/src/main/resources/static/modules_styles/pikiner_sites/components/site-shell.css */

/* ==============================================
   THE SHELL SITS ON THE SHEET'S OWN EDGES

   The header and the footer are drawn inside the starter's .container,
   which is a LAYOUT width — 1200px — while a sheet of text is the
   measure, 736px. Both centred, so neither edge of the header met either
   edge of the page's text: measured at 1440, the logotype started 208px
   outside the sheet's left edge and the theme toggle ended 216px outside
   its right.

   On a drawing that is the one thing the eye does not forgive, because
   the grid behind it publishes every vertical. The frame and the sheet
   have to share their margins.

   Which of the two moves is decided by the reading, not by taste. Widening
   the sheet to the header would put running text at about 110 characters a
   line, against the 66-75 the measure exists to hold; narrowing the header
   to the sheet costs nothing but room the navigation was not using — its
   five links come to 536px inside the 980px it had.

   The arithmetic: .container pads itself by --gb-spacing-md, and a section
   pads itself by the same, so a container whose max-width is the sheet width
   PLUS both paddings puts its content box exactly on the sheet. Stated as
   a calculation rather than a number so it follows the sheet whenever the
   sheet moves — and it moves, from the rhythm panel.

   Only the two sites are affected. The account, admin and sign-in pages
   use the same .container and never load this file — delivery confines
   the rule, so the selector does not have to.
   ============================================== */

.container {
  max-width: calc(var(--rh-sheet) + 2 * var(--gb-spacing-md));
}

/* ==============================================
   AND THE TWO ENDS OF THE HEADER SIT ON IT

   Putting the container on the sheet's edges is not enough on its own:
   the header's own children hold offsets that were invisible inside a
   1200px container and are not inside a 736px one.

   The logotype carried a left margin of its own, which pushed the mark
   8px inside the line every heading below it starts on. The desktop
   navigation carried a 32px left margin and flex-grow, and in the
   narrower shell that margin was 4px more than there was room for — the
   theme toggle was pushed just past the right edge it is supposed to
   land on. Both are stated here rather than in the starter, because the
   starter's own container is wide enough that neither is wrong there.
   ============================================== */

@media screen and (min-width: 1024px) {
  .header > .logotype {
    margin-left: 0;
  }

  .nav--desktop {
    margin-left: var(--gb-spacing-md);
  }
}

/* ==============================================
   MOBILE MENU — the mark stands where the links stand

   The links in the slide-in menu are centred by a side effect: the
   desktop list's align-items: center, which in the column layout of the
   menu centres horizontally. The logotype above them is a flex row of
   its own and stayed on the left, one item off the axis of five. It is
   stated here for these pages, not in the starter, because the cabinets
   keep the starter's menu as it is.
   ============================================== */

.mobile-menu .logotype {
  justify-content: center;
}