/* ============================================================
   Herrell Plumbing blog bridge stylesheet.

   Goes to blog/themes/herrell/assets/css/style.css, loaded AFTER the site's
   css/bootstrap.custom.css and css/style.css (set that order in the blog's
   Appearance > Stylesheets field).

   Two jobs and nothing else:
     1. Clear the site's fixed header, which the blog has no banner to do.
     2. Redraw the blog's Bootstrap classes the site's stripped custom build
        does not ship (cards, badges, pagination, alerts), in Herrell's own
        tokens. Header, footer, grid and utilities already come from the site
        sheets.
   ============================================================ */

:root {
  --brand-primary: #0b2572;      /* navy-600: headings, links, active states */
  --brand-primary-dark: #16337f; /* navy-500: hover */
  --brand-ink: #040c21;          /* navy-900: darkest surface */
  --brand-muted: #6f6f6f;        /* gray-500: secondary text, clears 4.5:1 on white */
  --brand-line: #dddddd;         /* hairline borders */
  --brand-fill: #eeeeee;         /* badge and disabled fills */
  --brand-tint: #f8f7f4;         /* alert and blockquote surface (cream-100) */
  --brand-display: "Josefin Sans", "Helvetica Neue", Arial, sans-serif;
  --brand-body: "Lato", "Helvetica Neue", Arial, sans-serif;
  --brand-radius: 0;             /* the site is squared off throughout */
}

/* ------------------------------------------------------------
   Clearing the fixed header. The site's own JS maintains --header-h
   (reserved.offsetHeight), so the padding follows the real measured height.
   No py-* utility is on <main> in header.php, so nothing fights this.
   ------------------------------------------------------------ */
.blog-main {
  padding-top: calc(var(--header-h, 8rem) + 1.5rem);
  padding-bottom: 3rem;
}

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

/* ------------------------------------------------------------
   List header type. display-6 and lead ship in the site build; only the
   brand colour and display font need asserting here.
   ------------------------------------------------------------ */
.display-6 {
  font-family: var(--brand-display);
  font-weight: 700;
  color: var(--brand-primary);
}

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

/* Bootstrap's own value here is too light to clear 4.5:1 on white. */
.text-body-secondary { color: var(--brand-muted); }

.link-dark { color: var(--brand-ink); }
.link-dark:hover, .link-dark:focus { color: var(--brand-primary); }
.link-secondary { color: var(--brand-muted); }
.link-secondary:hover, .link-secondary:focus { color: var(--brand-primary); }

/* ------------------------------------------------------------
   Post cards. article.post-card, not .post-card: the template also sets
   .border-0 and .shadow-sm, and the element selector beats them regardless of
   source order.
   ------------------------------------------------------------ */
article.post-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: #ffffff;
  border: 1px solid var(--brand-line);
  border-radius: var(--brand-radius);
  box-shadow: none;
  transition: border-color 0.2s ease-in-out;
}

article.post-card:hover,
article.post-card:focus-within { border-color: var(--brand-primary); }

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

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

.post-card__placeholder span {
  font-family: var(--brand-display);
  font-size: 3rem;
  font-weight: 700;
  color: #ffffff;
}

.card { background-color: #ffffff; }
.card-body { padding: 1.25rem 1.25rem 1.5rem; }

.card-title {
  margin-bottom: 0.625rem;
  font-family: var(--brand-display);
  text-transform: none;      /* post titles read as sentences, not shouted */
  color: var(--brand-primary);
}

.card-title a { color: inherit; }
.card-title a:hover,
.card-title a:focus { color: var(--brand-primary-dark); text-decoration: underline; text-underline-offset: 0.25em; }

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

/* ------------------------------------------------------------
   Category badges, drawn like the site's eyebrow label.
   ------------------------------------------------------------ */
.badge,
.badge.text-bg-light {
  display: inline-block;
  padding: 0.375rem 0.625rem;
  font-family: var(--brand-body);
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1;
  color: var(--brand-ink);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  background-color: var(--brand-fill);
  border: 0;
  border-radius: var(--brand-radius);
}

a.badge:hover, a.badge:focus { color: #ffffff; background-color: var(--brand-primary); }

/* ------------------------------------------------------------
   Pagination. 2.75rem minimum keeps the WCAG tap target.
   ------------------------------------------------------------ */
.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: var(--brand-body);
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--brand-ink);
  text-decoration: none;
  background-color: #ffffff;
  border: 1px solid var(--brand-line);
  border-radius: var(--brand-radius);
}

.page-link:hover,
.page-link:focus { color: #ffffff; background-color: var(--brand-primary); border-color: var(--brand-primary); }

.page-item.active .page-link { color: #ffffff; background-color: var(--brand-primary); border-color: var(--brand-primary); }
.page-item.disabled .page-link { color: var(--brand-muted); pointer-events: none; background-color: var(--brand-fill); border-color: var(--brand-line); }

/* ------------------------------------------------------------
   Alerts (the empty-list notice).
   ------------------------------------------------------------ */
.alert-light {
  padding: 1.25rem;
  color: var(--brand-ink);
  background-color: var(--brand-tint);
  border: 1px solid var(--brand-line);
  border-radius: var(--brand-radius);
}

.alert-link { font-weight: 700; color: var(--brand-primary); }

/* ------------------------------------------------------------
   Single post body. The editor emits bare tags, so the site's .prose
   treatment is reproduced on .post-body here. Headings drop the site's
   global uppercase so long question headings stay readable.
   ------------------------------------------------------------ */
.post-body h2,
.post-body h3 {
  margin-top: 2rem;
  margin-bottom: 0.75rem;
  font-family: var(--brand-display);
  font-weight: 700;
  line-height: 1.3;
  text-transform: none;
  color: var(--brand-primary);
}

.post-body h2 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 1.875rem); }
.post-body h3 { font-size: clamp(1.25rem, 1.15rem + 0.4vw, 1.5625rem); }
.post-body p, .post-body li { margin-bottom: 1rem; }
.post-body a { color: var(--brand-primary); font-weight: 700; text-decoration: underline; }
.post-body a:hover, .post-body a:focus { color: var(--brand-primary-dark); text-decoration: none; }
.post-body img { max-width: 100%; height: auto; margin-block: 1.5rem; }

.post-body blockquote {
  padding: 1rem 1.25rem;
  margin: 1.5rem 0;
  border-left: 4px solid var(--brand-primary);
  background-color: var(--brand-tint);
}

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

/* ------------------------------------------------------------
   Utilities the site's hand-written build does not generate. Delete any the
   site CSS already provides if a future audit shows an overlap.
   ------------------------------------------------------------ */
.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-1 { margin-right: 0.25rem; }
.border { border: 1px solid var(--brand-line); }
.border-0 { border: 0; }
.border-top { border-top: 1px solid var(--brand-line); }
.border-bottom { border-bottom: 1px solid var(--brand-line); }
.bg-white { background-color: #ffffff; }
.shadow-sm { box-shadow: none; }