/* ------------------------------------------------------------------
   The masthead bar and the mobile drawer.

   Loaded from default.hbs AFTER {{ghost_head}}, so these rules sit later
   in the cascade than Code Injection and win at equal specificity. Where
   the injection uses !important, so does this file, and the comment says
   which rule it is answering.

   ALL SIZES IN px ON PURPOSE. The site sets html{font-size:10px}, so a
   rem here renders at 62.5% of its intended value. See AGENTS.md.

   Breakpoints follow the theme's own JS, not a new convention:
   Source's dropdown() treats (max-width:767px) as the drawer and anything
   wider as the horizontal bar, so the bar rules start at 768px.
   ------------------------------------------------------------------ */


/* ==================================================================
   THE BAR  (>= 768px)
   ================================================================== */

@media (min-width: 768px) {

  /* Set the bar as a standing head rather than as body copy.
     Replaces: ul.nav{font-size:1.4em} + the inherited weight 300.

     -webkit-font-smoothing is reset to `auto` deliberately. body sets
     `antialiased`, which on macOS THINS glyphs; that is the wrong
     correction for white type on a black ground, where 300 was already
     rendering as hairlines. */
  .gh-head .nav > li > a {
    padding-bottom: 5px;
    color: #fff;
    font-family: "Work Sans", Arial, sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .14em;
    line-height: 1;
    text-transform: uppercase;
    border-bottom: 2px solid transparent;   /* reserved, so hover cannot shift the type */
    -webkit-font-smoothing: auto;
    transition: border-color .15s ease, color .15s ease;
  }

  /* Retire the hairline pipes. They were #4b3636 on black — about 20%
     contrast, which reads as grime rather than as structure — and they
     were unscoped, so they leaked into the drawer (see below).
     The tracking above now does the separating. */
  .gh-head-menu .nav > li {
    padding: 0;
    margin: 0;
    border-right: 0;
  }

  .gh-head-menu .nav > li + li {
    margin-left: 10px;
  }

  /* Oxblood diamond between sections. The same mark the Collection front
     uses in its rail, and the site's list bullet.

     It has to live on ::after: `.gh-head .nav li::before` is nulled with
     !important in the injection, and that rule is not this file's to
     remove. */
  .gh-head-menu .nav > li:not(:last-child)::after {
    margin-left: 10px;
    color: #9c3e2f;
    font-size: 6px;
    vertical-align: .4em;
    content: "\25C6";
  }

  /* No diamond immediately before the utility divider — one separator,
     not two. :has() is already used in institutional.css. */
  .gh-head-menu .nav > li:has(+ .nav-about)::after {
    content: none;
  }

  /* Utility group. About is a masthead link, not a section, and that is
     the reason it is allowed to look different — a divider and a smaller
     size, not a different typeface.

     Replaces: li.nav-about{font-family:'eb garamond';font-size:82%;...},
     which made About the odd one out and, being the only styled item,
     read as permanently selected. */
  .gh-head-menu .nav > li.nav-about {
    padding-left: 16px;
    margin-left: 16px;
    border-left: 1px solid #3a2c2c;
  }

  .gh-head-menu .nav > li.nav-about > a,
  .gh-head-menu .nav > li.nav-archive > a {
    color: rgba(255, 255, 255, .72);
    font-family: "Work Sans", Arial, sans-serif;
    font-size: 12px;
    letter-spacing: .16em;
    text-transform: uppercase;
  }

  /* Hover and current section share one treatment.
     Replaces: .gh-head-menu a:hover{border-bottom:2px solid #4f1208;
     padding-bottom:.5px} — #4f1208 on black is very nearly invisible,
     and adding the border on hover nudged the type sideways.

     .nav-current is stamped by Ghost on the section front. The body
     tag-* classes carry it through to articles, so reading an essay
     lights Essays. */
  .gh-head-menu .nav > li > a:hover,
  .gh-head-menu .nav > li > a:focus-visible {
    color: #fff;
    border-bottom-color: #b30000;
  }

  .gh-head-menu .nav > li.nav-current > a,
  body.tag-essays     .gh-head-menu .nav > li.nav-essays > a,
  body.tag-featured   .gh-head-menu .nav > li.nav-spotlight > a,
  body.tag-interviews .gh-head-menu .nav > li.nav-interviews > a,
  body.tag-Interviews .gh-head-menu .nav > li.nav-interviews > a,
  body.tag-arts       .gh-head-menu .nav > li.nav-arts > a,
  body.tag-poetry     .gh-head-menu .nav > li.nav-arts > a,
  body.tag-arts-fiction .gh-head-menu .nav > li.nav-arts > a {
    color: #fff;
    border-bottom-color: #b30000;
  }

  /* "Sign in" was 15px Work Sans 300 sitting immediately left of a solid
     white 38px pill: one designed control and one leftover. Same micro
     style as the eyebrows used across the section fronts. */
  .gh-head-actions .gh-head-link {
    color: rgba(255, 255, 255, .72);
    font-family: "Work Sans", Arial, sans-serif;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    -webkit-font-smoothing: auto;
  }

  .gh-head-actions .gh-head-link:hover,
  .gh-head-actions .gh-head-link:focus-visible {
    color: #fff;
  }
}


/* ==================================================================
   ROOM FOR THE BAR  (>= 992px)

   Source's dropdown() hoists items into a ••• menu while
       nav.offsetWidth + 64 > wrapper.offsetWidth
   and the theme separately reserves margin-right:64px on the wrapper.
   Those two reserves stack, so ~128px of clearance was demanded before
   the last item was allowed to stay — which is why About disappeared at
   1100px with the bar visibly half empty.

   Reclaiming the margin is the CSS half of the fix; assets/js/mw-nav.js
   is the other half. Measured at 1100px: five items 430px wide, wrapper
   498px, so 430+64 now clears.
   ================================================================== */

@media (min-width: 992px) {
  .is-head-left-logo .gh-head-menu {
    margin-right: 16px;
  }
}


/* ==================================================================
   THE DRAWER  (<= 767px)
   ================================================================== */

@media (max-width: 767px) {

  /* The drawer was five links floating in the vertical middle of an
     otherwise empty black screen: Source makes the menu the 1fr row of
     a three-row grid and centres it, leaving ~450px of dead space above
     and a gap below. Anchor the list to the top, under the logotype. */
  .is-head-open #gh-head .gh-head-inner {
    gap: 24px;
    grid-template-rows: auto auto 1fr;
  }

  .is-head-open #gh-head .gh-head-menu {
    align-items: stretch;
    justify-content: flex-start;
  }

  .is-head-open #gh-head .nav {
    width: 100%;
    gap: 0;
  }

  /* The pipes are a bar device. They were unscoped, so every item in the
     stacked drawer trailed a stray vertical tick off its right edge.
     Here the separator is a full-width hairline, which is what a stacked
     list actually wants. */
  .is-head-open #gh-head .nav li {
    padding: 0;
    margin: 0;
    text-align: left;
    border-right: 0;
    border-bottom: 1px solid #241c1c;
  }

  .is-head-open #gh-head .nav li:last-child {
    border-bottom: 0;
  }

  .is-head-open #gh-head .nav li::after {
    content: none;   /* the bar's diamond does not belong in the drawer */
  }

  /* 2.6rem/weight 100 was a 26px hairline reversed out of black — the
     thinnest type anywhere on the site. Weight 400 at 24px holds the
     ground and gives a 62px tap target. */
  .is-head-open #gh-head .nav li > a {
    display: block;
    padding: 19px 2px;
    color: #fff;
    font-family: "Work Sans", Arial, sans-serif;
    font-size: 24px;
    font-weight: 400;
    letter-spacing: -.01em;
    line-height: 1.1;
    text-transform: none;
    border: 0;
    -webkit-font-smoothing: auto;
  }

  /* About stays a masthead link here too, just quieter. */
  .is-head-open #gh-head .nav li.nav-about > a,
  .is-head-open #gh-head .nav li.nav-archive > a {
    color: rgba(255, 255, 255, .66);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
  }

  /* Current section, same oxblood as the bar. */
  .is-head-open #gh-head .nav li.nav-current > a {
    color: #fff;
    box-shadow: inset 3px 0 0 #b30000;
    padding-left: 14px;
  }

  /* Optional: one line under each section, in Henri's words rather than
     mine. Uncomment and fill in — these are the only editorial strings
     in this file, so they are left blank on purpose.

  .is-head-open #gh-head .nav li:not(.nav-about) > a::after {
    display: block;
    margin-top: 5px;
    color: rgba(255,255,255,.5);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
  }
  .is-head-open #gh-head .nav-spotlight  > a::after { content: ""; }
  .is-head-open #gh-head .nav-essays     > a::after { content: ""; }
  .is-head-open #gh-head .nav-interviews > a::after { content: ""; }
  .is-head-open #gh-head .nav-arts       > a::after { content: ""; }
  */
}