/* ============================================================
   statewide-blog: the bridge between the blog and the site CSS.

   The main site's stylesheet is loaded first and supplies everything the
   header, the footer, the grid and the brand components need. What it does
   not carry are the Bootstrap classes the blog's own templates are written
   in, because the site's markup never used them: cards, pagination, badges
   and a handful of utilities.

   So this file does two things and nothing else:
     1. Clears the site's fixed header, which the blog has no banner to do.
     2. Redraws the blog's Bootstrap classes in the site's own tokens.

   Tokens repeated here as literals because this file is plain CSS, outside
   the site's Sass build:
     brand red      #ab0211   hover #8a010e
     charcoal       #232428   mid #434448
     body grey      #575e60   (4.9:1 on the stone band, 6.6:1 on white)
     stone / cloud  #dddddd / #eeeeee
     display face   Poppins   body face Manrope
     corner         square. The site has no rounded corners anywhere.
   ============================================================ */

/* ------------------------------------------------------------
   Clearing the fixed header

   .site-header is position: fixed, and on the static site an interior page
   opens with a banner tall enough to sit under it. The blog has no banner,
   so main does the clearing itself.

   --nav-h is the measured height of the menu row. _header.scss defines the
   fallback and js/script.js replaces it with the real value on load and on
   resize, so this stays right when the logo or the menu reflows.
   ------------------------------------------------------------ */
.blog-main {
  padding-top: calc(var(--nav-h, 9.5rem) + 1.5rem);
  padding-bottom: 3rem;
}

@media (min-width: 768px) {
  .blog-main {
    padding-top: calc(var(--nav-h, 9.5rem) + 2.5rem);
    padding-bottom: 4.5rem;
  }
}

/* ------------------------------------------------------------
   Type
   ------------------------------------------------------------ */
.display-6 {
  font-family: "Poppins", "Helvetica Neue", Arial, sans-serif;
  font-size: clamp(1.75rem, 1.3rem + 1.8vw, 2.5rem);
  font-weight: 800;
  line-height: 1.3;
  color: #ab0211;
}

.h5 {
  font-size: clamp(1.125rem, 1.05rem + 0.35vw, 1.25rem);
  font-weight: 800;
  line-height: 1.3;
}

.lead {
  font-size: 1rem;
  line-height: 1.875;
}

.fw-bold { font-weight: 700; }
.small { font-size: 0.75rem; }

/* The site's own AA body grey. Bootstrap's default here is too light to
   clear 4.5:1 on white. */
.text-body-secondary { color: #575e60; }

.link-dark { color: #232428; }
.link-dark:hover,
.link-dark:focus { color: #ab0211; }

.link-secondary { color: #575e60; }
.link-secondary:hover,
.link-secondary:focus { color: #ab0211; }

/* ------------------------------------------------------------
   Post cards

   Styled through .post-card rather than .card, so there is no fight with the
   border-0 and shadow-sm the template also sets. The site separates cards
   with a hairline and space rather than a drop shadow, so that is what these
   get too.
   ------------------------------------------------------------ */
/* article.post-card, not .post-card: the template also sets .border-0 and
   .shadow-sm, and at equal specificity whichever is written later in this
   file would win. The element selector settles it regardless of order. */
article.post-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: #ffffff;
  border: 1px solid #dddddd;
  border-radius: 0;
  box-shadow: none;
  transition: border-color 0.2s ease-in-out;
}

article.post-card:hover,
article.post-card:focus-within { border-color: #ab0211; }

.post-card__image,
.post-card__placeholder {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 0;
}

/* The initial shown when a post has no featured image. */
.post-card__placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #232428;
}

.post-card__placeholder span {
  font-family: "Poppins", "Helvetica Neue", Arial, sans-serif;
  font-size: 3rem;
  font-weight: 800;
  color: #ffffff;
}

.card-body {
  padding: 1.25rem 1.25rem 1.5rem;
}

.card-title {
  margin-bottom: 0.625rem;
  font-family: "Poppins", "Helvetica Neue", Arial, sans-serif;
  color: #ab0211;
}

.card-title a { color: inherit; }
.card-title a:hover,
.card-title a:focus { color: #8a010e; text-decoration: underline; text-underline-offset: 0.25em; }

.card-text { margin-bottom: 0.75rem; }

/* ------------------------------------------------------------
   Category badges
   Drawn like the site's eyebrow: squared, uppercase, tracked.
   ------------------------------------------------------------ */
.badge,
.badge.text-bg-light {
  display: inline-block;
  padding: 0.375rem 0.625rem;
  font-family: "Manrope", "Helvetica Neue", Arial, sans-serif;
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1;
  color: #232428;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  background-color: #eeeeee;
  border: 0;
  border-radius: 0;
}

a.badge:hover,
a.badge:focus { color: #ffffff; background-color: #ab0211; }

/* ------------------------------------------------------------
   Pagination
   ------------------------------------------------------------ */
.pagination {
  display: flex;
  gap: 0.375rem;
  padding-left: 0;
  margin-bottom: 0;
  list-style: none;
}

.page-item { display: block; }

.page-link {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 2.75rem;
  min-height: 2.75rem;
  padding: 0 0.75rem;
  font-family: "Manrope", "Helvetica Neue", Arial, sans-serif;
  font-size: 0.875rem;
  font-weight: 700;
  color: #232428;
  text-decoration: none;
  background-color: #ffffff;
  border: 1px solid #dddddd;
  border-radius: 0;
}

.page-link:hover,
.page-link:focus { color: #ffffff; background-color: #ab0211; border-color: #ab0211; }

.page-item.active .page-link {
  color: #ffffff;
  background-color: #ab0211;
  border-color: #ab0211;
}

.page-item.disabled .page-link {
  color: #575e60;
  pointer-events: none;
  background-color: #eeeeee;
  border-color: #dddddd;
}

/* ------------------------------------------------------------
   Alerts
   ------------------------------------------------------------ */
.alert-light {
  padding: 1.25rem;
  color: #232428;
  background-color: #f8f7f4;
  border: 1px solid #dddddd;
  border-radius: 0;
}

.alert-link { font-weight: 700; color: #ab0211; }

/* ------------------------------------------------------------
   Single post body

   The site sets its long form copy through .prose. The blog's post content
   comes out of the editor as bare tags, so the same treatment is applied to
   the article wrapper instead.
   ------------------------------------------------------------ */
.post h2,
.post h3 {
  margin-top: 2rem;
  margin-bottom: 0.75rem;
  font-family: "Poppins", "Helvetica Neue", Arial, sans-serif;
  font-weight: 800;
  line-height: 1.3;
  color: #ab0211;
}

.post h2 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 1.875rem); }
.post h3 { font-size: clamp(1.125rem, 1.05rem + 0.35vw, 1.25rem); }

.post p,
.post li { margin-bottom: 1rem; }

.post a { color: #ab0211; font-weight: 700; text-decoration: underline; }
.post a:hover,
.post a:focus { color: #8a010e; text-decoration: none; }

.post img {
  max-width: 100%;
  height: auto;
  margin-block: 1.5rem;
}

.post blockquote {
  padding: 1rem 1.25rem;
  margin: 1.5rem 0;
  border-left: 4px solid #ab0211;
  background-color: #f8f7f4;
}

.post blockquote p:last-child { margin-bottom: 0; }

/* ------------------------------------------------------------
   Utilities the site's stylesheet does not generate
   ------------------------------------------------------------ */
.h-100 { height: 100%; }
.flex-column { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.mt-auto { margin-top: auto; }
.ms-auto { margin-left: auto; }
.me-auto { margin-right: auto; }
.me-1 { margin-right: 0.25rem; }
.border { border: 1px solid #dddddd; }
.border-0 { border: 0; }
.border-top { border-top: 1px solid #dddddd; }
.bg-white { background-color: #ffffff; }
.shadow-sm { box-shadow: none; }

.nav {
  display: flex;
  flex-wrap: wrap;
  padding-left: 0;
  margin-bottom: 0;
  list-style: none;
}

.nav-item { display: block; }