/* =========================================================================
   FEC Blog post — modern editorial redesign (ISOLATED copy: page 3628 only).
   Every selector is scoped to body.page-id-3628 + the .fec-blogpost-* prefix,
   so this file cannot affect any other page. Enqueued only on is_page(3628).
   Tokens verbatim from FEC-DESIGN-SYSTEM.md (navy #283582 / cyan #3ca3dd /
   cool-white #ecf0f7 / Avenir-Black + Rubik + Fraunces). 2026-06-11.
   ========================================================================= */

/* ---- HERO BANNER (standard .head-container, page 3628 only) ------------- */
/* The theme sets the featured image to object-fit:fill -> a 4:3 photo gets
   stretched in the 1440x550 banner. Use cover, and lay a navy tint over it so
   the white header menu + hero title stay readable on this bright photo
   (David: "see the image, but blue-coloured"). Scoped so other heroes are
   untouched. */
body.page-id-3628 .head-container .head-image {
  position: relative;
  overflow: hidden;
}
body.page-id-3628 .head-container .head-image img {
  object-fit: cover;
  object-position: center center; /* show the true middle of the photo, not the top */
  position: relative;
  z-index: 0;
}
/* Layer 1 — navy MULTIPLY tint. Multiply keeps every bit of the photo's texture
   but recolours it FEC navy: the bright glass dome / cream walls turn into navy
   while their shapes still read through. This is the "see the image, but blue"
   look David asked for (not an opaque cover-up). z-index lifts it above the img
   so the multiply blends against the photo underneath. */
body.page-id-3628 .head-container .head-image::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: #283582;
  mix-blend-mode: multiply;
  opacity: 0.9;
  pointer-events: none;
}
/* Layer 2 — legibility wash ON TOP of the tint (normal blend). Darker band at the
   very top so the white header nav reads, a soft lift at the bottom for the H1
   title, and near-transparent through the middle so the tinted photo shows. */
body.page-id-3628 .head-container .head-image::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(180deg,
    rgba(13, 20, 54, 0.58) 0%,
    rgba(13, 20, 54, 0.18) 24%,
    rgba(13, 20, 54, 0.04) 48%,
    rgba(13, 20, 54, 0.30) 100%);
  pointer-events: none;
}

/* ---- (legacy custom hero CSS below — unused since the standard hero took over) */
body.page-id-3628 .fec-blogpost-eyebrow p {
  font-family: "Rubik", "Helvetica Neue", sans-serif;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #5fb8e8;
  margin: 0;
}
body.page-id-3628 .fec-blogpost-title h1 {
  font-family: "Avenir-Black", "Avenir", "Helvetica Neue", sans-serif;
  font-weight: 900;
  font-size: clamp(36px, 5.2vw, 68px);
  line-height: 1.06;
  letter-spacing: -0.01em;
  text-transform: none; /* override the theme's uppercase h1 so the Fraunces accent reads as an elegant mixed-case italic */
  color: #283582;
  margin: 0;
}
body.page-id-3628 .fec-blogpost-title h1 em {
  font-family: "Fraunces", Georgia, serif;
  font-style: italic;
  font-weight: 400;
  color: #3ca3dd;
}
body.page-id-3628 .fec-blogpost-meta p {
  font-family: "Rubik", "Helvetica Neue", sans-serif;
  font-weight: 500;
  font-size: 13.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #4a5568;
  margin: 0;
}

/* ---- FEATURED IMAGE ----------------------------------------------------- */
body.page-id-3628 .fec-blogpost-img img {
  width: 100%;
  border-radius: 12px;
  box-shadow: 0 30px 60px rgba(40, 53, 130, 0.18);
  display: block;
}

/* ---- BODY --------------------------------------------------------------- */
body.page-id-3628 .fec-blogpost-lead p {
  font-family: "Rubik", "Helvetica Neue", sans-serif;
  font-weight: 400;
  font-size: clamp(20px, 2.2vw, 23px);
  line-height: 1.55;
  color: #2a2e3f;
  margin: 0;
}
/* drop-cap removed 2026-06-11 — Stefanie disliked the ornate big cyan initial. */
body.page-id-3628 .fec-blogpost-body p {
  font-family: "Rubik", "Helvetica Neue", sans-serif;
  font-weight: 400;
  font-size: 17.5px;
  line-height: 1.78;
  color: #2a2e3f;
  margin: 0 0 1.35em;
}
body.page-id-3628 .fec-blogpost-body p:last-child {
  margin-bottom: 0;
}

/* ---- BYLINE (end of the article, on white) ----------------------------- */
body.page-id-3628 .fec-blogpost-byline {
  border-top: 1px solid #e3e6ec;
  padding-top: 34px;
}
body.page-id-3628 .fec-blogpost-byline-inner {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 26px;
}
body.page-id-3628 .fec-blogpost-byline-avatar {
  width: 52px;
  height: 52px;
  flex: none;
  border-radius: 999px;
  background: linear-gradient(135deg, #3ca3dd 0%, #5fb8e8 100%);
}
body.page-id-3628 .fec-blogpost-byline-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
body.page-id-3628 .fec-blogpost-byline-name {
  font-family: "Rubik", "Helvetica Neue", sans-serif;
  font-weight: 600;
  font-size: 17px;
  color: #283582;
}
body.page-id-3628 .fec-blogpost-byline-role {
  font-family: "Rubik", "Helvetica Neue", sans-serif;
  font-weight: 400;
  font-size: 13.5px;
  color: #4a5568;
}
/* LinkedIn pill — navy fill (locked FEC button DNA) on the white article */
body.page-id-3628 a.fec-blogpost-linkedin {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  font-family: "Rubik", "Helvetica Neue", sans-serif;
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #ffffff;
  text-decoration: none;
  background: #283582;
  border-radius: 999px;
  padding: 15px 34px;
  transition: box-shadow 240ms cubic-bezier(.4, 0, .2, 1),
              transform 240ms cubic-bezier(.4, 0, .2, 1);
}
body.page-id-3628 a.fec-blogpost-linkedin::before {
  content: "";
  width: 19px;
  height: 19px;
  flex: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M4.98 3.5C4.98 4.88 3.87 6 2.5 6S0 4.88 0 3.5 1.12 1 2.5 1s2.48 1.12 2.48 2.5zM.2 8h4.6v14H.2V8zm7.4 0h4.4v1.9h.06c.6-1.1 2.08-2.26 4.28-2.26 4.58 0 5.42 3 5.42 6.92V22h-4.6v-6.2c0-1.48-.03-3.38-2.06-3.38-2.06 0-2.38 1.6-2.38 3.27V22h-4.6V8z'/%3E%3C/svg%3E") center/contain no-repeat;
}
body.page-id-3628 a.fec-blogpost-linkedin:hover {
  transform: scale(1.03);
  box-shadow: 0 0 0 2px rgba(60, 163, 221, 0.55), 0 8px 28px rgba(60, 163, 221, 0.45);
}

/* The theme floats the global footer/contact form UP into the last section by
   ~260px (#main-content margin-bottom -150 + .formular position:relative -110).
   So the body section needs ~260px + clearance of bottom padding for the form
   to land in empty white below the byline (visible gap = padding - 260). */
body.page-id-3628 .fec-blogpost-bodysec {
  padding-bottom: 340px !important;
}