/* ==========================================================================
   WordPress integration only.

   The design lives in grownav.css, which is the static site's stylesheet
   shipped unchanged so it stays diffable against the source. This file holds
   the handful of rules WordPress needs and the static site never did: the
   admin bar's effect on the sticky header, block-editor alignments inside
   article content, caption and gallery markup, comments, and the form
   honeypot. Nothing here changes the design.
   ========================================================================== */

/* --- Admin bar -----------------------------------------------------------
   The header is position:sticky at top:0. Logged in, WordPress puts a 32px
   bar above it, so the header has to start below that or it hides underneath. */
.admin-bar .hdr { top: 32px; }
.admin-bar .menu { top: 32px; height: calc(100% - 32px); }

@media screen and (max-width: 782px) {
  .admin-bar .hdr { top: 46px; }
  .admin-bar .menu { top: 46px; height: calc(100% - 46px); }
}

/* --- Custom logo ---------------------------------------------------------
   .wordmark is the styled element; a logo image replaces the text inside it. */
.wordmark__img { display: block; height: 28px; width: auto; }

/* --- Article content -----------------------------------------------------
   .article already styles headings, paragraphs, lists, blockquotes and links.
   These are the block-editor constructs it has no rule for. */
.article img,
.article iframe,
.article video { max-width: 100%; height: auto; }

.article figure { margin: clamp(1.8rem, 3vw, 2.6rem) 0; }

.article figcaption,
.article .wp-caption-text {
  margin-top: .7rem;
  font-size: var(--t-small);
  line-height: 1.5;
  color: var(--faint);
}

.article .alignleft,
.article .alignright,
.article .aligncenter,
.article .alignwide,
.article .alignfull { margin-inline: auto; }

/* The article measure is --shell-narrow. Wide and full blocks are allowed to
   break out of it, up to the page shell, which is what the design's own
   full-bleed figures do. */
.article .alignwide { width: min(100vw - (var(--gutter) * 2), 1180px); margin-inline: auto; }
.article .alignfull { width: 100vw; margin-inline: calc(50% - 50vw); max-width: none; }
.article .alignfull img { width: 100%; }

@media (min-width: 900px) {
  .article .alignleft { float: left; margin: .4rem 2rem 1.4rem 0; max-width: 45%; }
  .article .alignright { float: right; margin: .4rem 0 1.4rem 2rem; max-width: 45%; }
}

.article .wp-block-table table { width: 100%; border-collapse: collapse; }
.article .wp-block-table th,
.article .wp-block-table td {
  padding: .7rem .9rem;
  border-bottom: 1px solid var(--line);
  text-align: left;
}
.article .wp-block-table th { font-weight: 700; }

.article .wp-block-pullquote,
.article .wp-block-quote { margin-inline: 0; }

.article .wp-block-code,
.article pre {
  overflow-x: auto;
  padding: 1.2rem 1.4rem;
  background: var(--paper-2);
  border: 1px solid var(--line);
  font-size: var(--t-small);
}

.article .wp-block-separator {
  border: 0;
  border-top: 2px solid var(--line-2);
  margin: clamp(2rem, 4vw, 3rem) 0;
}

.article .wp-block-button__link {
  display: inline-block;
  background: var(--brand);
  color: #FFFFFF;
  padding: .9rem 1.4rem;
  font-weight: 700;
  border-radius: 0;
}

/* --- Sticky-post and protected-post flags -------------------------------- */
.jcard--sticky .jcard__t::before {
  content: "★";
  color: var(--brand);
  margin-right: .4em;
}

/* --- Comments ------------------------------------------------------------
   The design has no comment section; posts ship with comments closed. These
   rules exist so that turning them on produces something legible rather than
   unstyled browser defaults. */
.gn-comments { margin-top: clamp(3rem, 6vw, 5rem); }
.gn-comments h2 { font-size: var(--t-h3); font-weight: 700; margin-bottom: 1.6rem; }
.gn-comments ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.6rem; }
.gn-comments ol ol { margin-top: 1.6rem; padding-left: clamp(1rem, 3vw, 2.4rem); }
.gn-comments article { border-top: 1px solid var(--line); padding-top: 1.2rem; }
.gn-comments .comment-meta { font-size: var(--t-micro); letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }
.gn-comments .comment-content { margin-top: .6rem; }
.gn-comments input[type="text"],
.gn-comments input[type="email"],
.gn-comments input[type="url"],
.gn-comments textarea { width: 100%; }

/* --- Form honeypot -------------------------------------------------------
   Off-screen rather than display:none, because some bots skip hidden fields
   and this one is meant to be filled in by them. */
.gn-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* The form status line already has a style; an error just needs the accent. */
.form__status.is-error { color: var(--signal-ink); }

/* --- Search and 404 ------------------------------------------------------ */
.gn-searchform { display: flex; gap: .6rem; flex-wrap: wrap; max-width: 34rem; }
.gn-searchform input[type="search"] { flex: 1 1 14rem; }
.gn-searchform button { flex: none; }

/* --- Pagination ----------------------------------------------------------
   Journal listings paginate once there are more than nine articles. */
.gn-pagination { margin-top: clamp(2.4rem, 4vw, 3.4rem); }
.gn-pagination .nav-links { display: flex; flex-wrap: wrap; gap: .5rem; }
.gn-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.6rem;
  height: 2.6rem;
  padding: 0 .7rem;
  border: 1px solid var(--line-2);
  font-size: var(--t-small);
  font-weight: 600;
  color: var(--muted);
}
.gn-pagination .page-numbers:hover { background: var(--hover); color: var(--ink); }
.gn-pagination .page-numbers.current { background: var(--ink); border-color: var(--ink); color: var(--paper); }