/* christiani.com — review fixes, lane L26.
 *
 * This file is loaded after /assets/styles.css and only ever adds to it. It is
 * kept separate on purpose: styles.css is generated by scripts/port.mjs from the
 * captured WordPress pages, so anything typed into it is lost the next time the
 * port runs. These rules survive that.
 *
 * Two faults, both fixed once here rather than page by page.
 */

/* ------------------------------------------------------------------ 1
   On a phone the menu did nothing.

   WordPress hides the navigation below 600px and opens it with its own
   JavaScript. That JavaScript is not part of a static site, so the button was
   there, it looked like a menu, and tapping it did nothing at all — on every
   page. The only link left in the header on a phone was the logo.

   The fix is to stop having a menu that opens. Below 600px the links are simply
   shown, in a row, the same links in the same type as the desktop header: home,
   about, work with me, field notes. The four category links stay off the phone
   header — they sit on every Field Notes card and under every article, and four
   more words in a header this size is clutter. Nothing here needs script.
*/
@media (max-width: 599px) {
  /* show the menu that was hidden waiting for JavaScript
     (the two buttons that used to sit here are gone from the markup itself —
     scripts/l26/fix.mjs, operations L26-6 and L26-7) */
  .wp-block-navigation__responsive-container {
    display: block !important;
    position: static !important;
    background-color: transparent !important;
    width: auto !important;
    z-index: auto !important;
  }
  .wp-block-navigation__responsive-container .wp-block-navigation__responsive-close,
  .wp-block-navigation__responsive-container .wp-block-navigation__responsive-dialog,
  .wp-block-navigation__responsive-container .wp-block-navigation__responsive-container-content {
    display: block !important;
    padding: 0 !important;
    width: auto !important;
  }

  /* one row, wrapping if it must, aligned right like the desktop header */
  .wp-block-navigation__container {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: flex-end !important;
    align-items: center !important;
    gap: 0.9em !important;
    row-gap: 0.35em !important;
  }

  /* the submenu is no longer a dropdown: its links join the row */
  .wp-block-navigation .has-child > .wp-block-navigation__submenu-container {
    position: static !important;
    display: flex !important;
    flex-direction: row !important;
    gap: 0.9em !important;
    height: auto !important;
    width: auto !important;
    min-width: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
    overflow: visible !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
  }
  .wp-block-navigation .has-child > .wp-block-navigation__submenu-container
    > .wp-block-navigation-item > .wp-block-navigation-item__content {
    padding: 0 !important;
  }
  /* the little chevron pointed at a dropdown that no longer exists */
  .wp-block-navigation__submenu-icon { display: none !important; }

  /* the four category links live on the Field Notes cards; not in a phone header */
  .wp-block-navigation__container > .wp-block-navigation-item:nth-child(2)
    > .wp-block-navigation__submenu-container { display: none !important; }

  /* "home" is the logo, three inches to the left. Saying it twice in a header
     this narrow costs a line of wrapping and buys nothing. */
  .wp-block-navigation__container > .wp-block-navigation-item:nth-child(1)
    > .wp-block-navigation-item__content { display: none !important; }

  /* What is left — about · work with me · field notes — gets its own line under
     the logo, on every page.

     It nearly fits beside the logo, and "nearly" was the problem: the page you
     are currently on is marked in the menu, which makes that one word slightly
     wider, which tipped the row over on some pages and not others. The header
     was then 140px tall on Field Notes and 100px tall on Home. A header that
     changes height as you move around the site is the thing Carsten objected to,
     in miniature. One line, always, so it is the same everywhere. */
  header.wp-block-template-part
    .wp-block-group.is-content-justification-space-between { flex-wrap: wrap !important; }
  header.wp-block-template-part
    .wp-block-group.is-content-justification-space-between > *:last-child {
    flex-basis: 100% !important;
    margin-top: 0.55rem;
  }
  .wp-block-navigation__container { flex-wrap: nowrap !important; gap: 1.1em !important; }
  header.wp-block-template-part .wp-block-navigation-item__content { white-space: nowrap; }

  /* the header row itself has to be allowed to grow when the menu wraps */
  header.wp-block-template-part .wp-block-navigation { flex-wrap: wrap; }
}

/* ------------------------------------------------------------------ 2
   Nine pages were laid out differently from the other thirteen.

   The category and tag pages came out of WordPress full width: title and text
   started 104px from the left edge of a 1440px screen and the cards ran nearly
   the whole way across. Every other page on the site is a 620px column, centred,
   starting at 410px. Carsten: "it cannot vary from page to page."

   Measured before and after by scripts/design-grammar.mjs.
*/
main.alignfull > .wp-block-query-title,
main.alignfull > .wp-block-query,
main.alignfull > .wp-block-query > .wp-block-group,
main.alignfull .wp-block-post-template.alignfull {
  max-width: var(--wp--style--global--content-size, 620px) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* "Category: Dispatches" had the second half in italic; no other page title on
   the site is italic. */
main.alignfull > .wp-block-query-title span { font-style: normal; }

/* Two cards side by side, like Field Notes — three in a 620px column left each
   one too narrow to read. One card wide on a phone, again like Field Notes. */
main.alignfull .wp-block-post-template.is-layout-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
@media (max-width: 781px) {
  main.alignfull .wp-block-post-template.is-layout-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* The same card border Field Notes uses, so a category page and the Field Notes
   list are recognisably the same site. */
main.alignfull .wp-block-post-template > li {
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 4px;
  padding: 1.1rem 1.2rem 1.3rem;
  transition: border-color 0.2s ease;
}
main.alignfull .wp-block-post-template > li:hover { border-color: rgba(74, 144, 217, 0.35); }

/* ------------------------------------------------------------------ 3
   The line under the subscribe box saying where an address goes.
   Same size and colour as "stay in touch — rss" above it, so it reads as part
   of the footer rather than as small print bolted on. */
.cc-nl-note {
  margin: 0.6rem auto 0;
  max-width: 30rem;
  font-size: 0.8rem;
  line-height: 1.5;
  text-align: center;
}

/* The date-and-category line under each archive card sat left on one card and
   centred on the next, because WordPress centres a row that is narrower than its
   container. Same line, same place, on every card. */
main.alignfull .wp-block-post-template .wp-block-group.is-content-justification-left {
  margin-left: 0 !important;
  margin-right: auto !important;
  justify-content: flex-start !important;
}
main.alignfull .wp-block-post-template .wp-block-template-part
  > .wp-block-group.is-layout-constrained { padding-left: 0 !important; padding-right: 0 !important; }
/* The card is a vertical stack; WordPress centres the blocks in it, so a short
   date line floated to the middle while a long one filled the width. Stretch
   them all to the card, and every card's date sits in the same place. */
main.alignfull .wp-block-post-template > li .wp-block-group.is-vertical {
  align-items: stretch !important;
}
main.alignfull .wp-block-post-template > li .wp-block-template-part { width: 100%; }