/* ============================================================
   M&S Asphalt Paving blog bridge stylesheet.

   Goes to blog/themes/msasphalt/assets/css/style.css, loaded LAST, after
   Bootstrap and after the site's own /css/style.css.

   The main site already loads Bootstrap 5.3.3 from the CDN, so the blog's
   Bootstrap utilities (container, row-cols-*, d-flex, mb-*, card, badge,
   pagination) all resolve on their own. This file does three things and
   nothing else:

     1. Takes the site header out of the absolute positioning it uses to float
        over a hero photo. The blog has no hero.
     2. Redraws the blog's own classes (post-card, post-body, badges,
        pagination, alerts) in the site's tokens.
     3. Raises the blog's body copy off the site's 12px base, which is a
        starting point the site's own components each override.

   Tokens are copied from css/sass/variables.scss. Keep them in step.
   ============================================================ */

:root {
  --ms-navy: #07274d;
  --ms-navy-dark: #141520;
  --ms-ink: #1b1d2c;
  --ms-gold: #be9028;
  --ms-gold-aa: #856519;     /* 5.42:1 on white, the AA safe gold */
  --ms-gold-light: #dbb682;
  --ms-cream: #f6f1eb;
  --ms-muted-aa: #6b6b6b;    /* 5.33:1 on white */
  --ms-line: #dcd9d4;
  --ms-fill: #eeeeee;
  --ms-tint: #f8f7f4;
  --ms-display: "Passion One", "Arial Black", Arial, sans-serif;
  --ms-body: "Manrope", "Helvetica Neue", Arial, sans-serif;
}

/* ------------------------------------------------------------
   Header

   The site pins <header> absolutely so it floats over each page's hero photo,
   and the desktop nav links are dark because that photo is light behind them.
   There is no photo here, so the header becomes a normal white bar in the flow
   and the same dark links keep working.
   ------------------------------------------------------------ */
.blog-body header {
  position: relative;
  background-color: #fff;
  border-bottom: 1px solid var(--ms-line);
}

@media (min-width: 992px) {
  .blog-body header {
    padding-bottom: 4px;
  }
}

.blog-main {
  padding-top: 2.25rem;
  padding-bottom: 3rem;
}

@media (min-width: 768px) {
  .blog-main {
    padding-top: 3.5rem;
    padding-bottom: 4.5rem;
  }
}

/* ------------------------------------------------------------
   Type

   The site's base font-size is 12px because every one of its components sets
   its own. Blog copy comes out of the editor as bare tags, so it needs a real
   reading size set here.
   ------------------------------------------------------------ */
.blog-body {
  font-size: 15px;
  line-height: 28px;
}

.display-6 {
  font-family: var(--ms-display);
  font-weight: 700;
  font-size: clamp(2rem, 1.4rem + 2.4vw, 3.25rem);
  line-height: 1.05;
  color: var(--ms-navy);
}

.lead {
  font-family: var(--ms-body);
  font-size: 1rem;
  line-height: 1.75;
  color: var(--ms-muted-aa);
}

.card-text,
.blog-main p,
.blog-main li {
  font-family: var(--ms-body);
}

.small { font-size: 0.8125rem; }

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

.link-dark { color: var(--ms-ink); }
.link-dark:hover,
.link-dark:focus { color: var(--ms-gold-aa); }

.link-secondary { color: var(--ms-muted-aa); }
.link-secondary:hover,
.link-secondary:focus { color: var(--ms-gold-aa); }

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

   article.post-card, not .post-card: the template also sets .border-0 and
   .shadow-sm, and at equal specificity whichever rule is written later would
   win. The element selector settles it whatever the load order turns out to be.
   ------------------------------------------------------------ */
article.post-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: #fff;
  border: 1px solid var(--ms-line);
  border-radius: 0;
  box-shadow: none;
  transition: border-color .2s ease-in-out;
}

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

.post-card__image,
.post-card__placeholder {
  display: block;
  width: 100%;
  /* content-card.php ships width="640" height="360" on the img. Those
     attributes resolve to a used height and beat aspect-ratio, so the photo
     cards came out 360px tall while the placeholder cards were 200px and the
     row's card bodies no longer lined up. height:auto hands control back. */
  height: auto;
  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: var(--ms-navy);
}

.post-card__placeholder span {
  font-family: var(--ms-display);
  font-size: 3.5rem;
  font-weight: 700;
  line-height: 1;
  color: var(--ms-gold-light);
}

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

.card-title {
  margin-bottom: .625rem;
  font-family: var(--ms-display);
  font-weight: 700;
  line-height: 1.05;
}

.card-title a { color: var(--ms-navy); }

.card-title a:hover,
.card-title a:focus {
  color: var(--ms-gold-aa);
  text-decoration: underline;
  text-underline-offset: .25em;
}

.card-text { margin-bottom: .75rem; font-size: .9375rem; line-height: 1.65; }

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

a.badge:hover,
a.badge:focus {
  /* Ink on gold is 5.73:1; white on it is 2.91:1 and fails. */
  color: var(--ms-ink);
  background-color: var(--ms-gold);
}

/* ------------------------------------------------------------
   Pagination. 2.75rem minimum keeps the WCAG tap target.
   ------------------------------------------------------------ */
.pagination {
  display: flex;
  gap: .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 .75rem;
  font-family: var(--ms-body);
  font-size: .8125rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--ms-ink);
  text-decoration: none;
  background-color: #fff;
  border: 1px solid var(--ms-line);
  border-radius: 0;
}

.page-link:hover,
.page-link:focus {
  color: #fff;
  background-color: var(--ms-navy);
  border-color: var(--ms-navy);
}

.page-item.active .page-link {
  color: #fff;
  background-color: var(--ms-navy);
  border-color: var(--ms-navy);
}

.page-item.disabled .page-link {
  color: var(--ms-muted-aa);
  pointer-events: none;
  background-color: var(--ms-fill);
  border-color: var(--ms-line);
}

/* ------------------------------------------------------------
   Alerts
   ------------------------------------------------------------ */
.alert-light {
  padding: 1.25rem;
  color: var(--ms-ink);
  background-color: var(--ms-tint);
  border: 1px solid var(--ms-line);
  border-radius: 0;
}

.alert-link { font-weight: 700; color: var(--ms-gold-aa); }

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

   The site sets long form copy through its own .copy class. Post content comes
   out of the editor as bare tags, so the same treatment goes on the article
   wrapper instead.
   ------------------------------------------------------------ */
.post-body {
  font-family: var(--ms-body);
  font-size: 1rem;
  line-height: 1.75;
  color: var(--ms-ink);
}

.post-body h2,
.post-body h3 {
  font-family: var(--ms-display);
  font-weight: 700;
  line-height: 1.05;
  color: var(--ms-navy);
}

.post-body h2 { margin: 2.25rem 0 .75rem; font-size: clamp(1.625rem, 1.3rem + 1.3vw, 2rem); }
.post-body h3 { margin: 1.75rem 0 .625rem; font-size: clamp(1.25rem, 1.1rem + .6vw, 1.4rem); }

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

.post-body ul,
.post-body ol { padding-left: 1.35rem; margin-bottom: 1.25rem; }

.post-body a {
  color: var(--ms-gold-aa);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: .2em;
}

.post-body a:hover,
.post-body a:focus { 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(--ms-gold);
  background-color: var(--ms-tint);
}

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

/* The category links and the date line above the post body. */
.post .badge { text-decoration: none; }

/* ------------------------------------------------------------
   404 inside the blog
   ------------------------------------------------------------ */
.btn-primary {
  background-color: var(--ms-gold);
  border-color: var(--ms-gold);
  /* Ink on gold, matching the site's own .btn-gold. */
  color: var(--ms-ink);
  font-family: var(--ms-body);
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
  border-radius: 0;
  min-width: 184px;
  height: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
  background-color: #a67c1e;
  border-color: #a67c1e;
  color: var(--ms-ink);
}