/*
Theme Name:  Hello Elementor Child - JFFD
Description: Hello Elementor child theme for the JFFD blog. Carries the blog redesign design system (tokens + typography, per the Graphite design spec), and the author-component shortcodes (see functions.php).
Template:    hello-elementor
Version:     1.14.0
*/

/* =============================================================
   JFFD DESIGN TOKENS — from the Graphite design spec
   ("JFFD Blog Redesign — Design Framework & Style Reference")
   ============================================================= */
:root {
  --jffd-font: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --jffd-ink: #00263E;         /* headings (ink navy) */
  --jffd-teal: #013E4E;        /* deep teal — subheads, eyebrows, accents */
  --jffd-body: #212121;        /* article body copy */
  --jffd-text-2: #333333;      /* secondary body (author bio) */
  --jffd-muted: #6B7A80;       /* meta, captions, muted labels */
  --jffd-link: #3498DB;        /* link blue */
  --jffd-green: #1A8A5C;       /* green accent */
  --jffd-gold: #FFC658;        /* Harvest (Aug 2026 palette) — button fills */
  --jffd-gold-deep: #DDAD2B;   /* Harvest Deep — hover/deep fill */
  --jffd-midnight: #07272D;    /* Midnight — text on Harvest fills */
  /* Page width is owned by Elementor Site Settings -> Content Width
     (currently 1180px). No CSS width token — see homepage section. */
  --jffd-border: #E0E0E0;      /* card / rule borders */
  --jffd-border-2: #CDD8DD;    /* pagination borders */
  --jffd-teal-tint: #EAF4F6;   /* teal tint surfaces */
  --jffd-chip: #E6EDF0;        /* chip tint */
  --jffd-rule: #F0F3F5;        /* heading underline rule */
  --jffd-radius: 12px;         /* cards / TOC / callouts */
}

/* =============================================================
   BASE — one family does all the work (all pages)
   ============================================================= */
body {
  font-family: var(--jffd-font);
}
body h1, body h2, body h3, body h4 {
  font-family: var(--jffd-font);
  color: var(--jffd-ink);
  font-weight: 800;
  letter-spacing: -0.01em;
}

/* =============================================================
   ARTICLE CONTENT — Elementor post-content widget AND
   Gutenberg block markup (.entry-content), on any page.
   ============================================================= */
.elementor-widget-theme-post-content,
.elementor-widget-theme-post-content p,
.elementor-widget-theme-post-content li,
.entry-content,
.entry-content p,
.entry-content li {
  font-family: var(--jffd-font);
}
.elementor-widget-theme-post-title h1,
h1.entry-title {
  font-size: 42px;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--jffd-ink);
}
.elementor-widget-theme-post-content h2,
.entry-content h2 {
  font-size: 29px;
  font-weight: 800;
  line-height: 1.72; /* demo as-built (airier than the spec sheet's 1.15) */
  letter-spacing: -0.01em;
  color: var(--jffd-ink);
  margin: 44px 0 16px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--jffd-rule);
}
.elementor-widget-theme-post-content h3,
.entry-content h3 {
  font-size: 21px;
  font-weight: 700;
  line-height: 1.72;      /* demo as-built */
  letter-spacing: normal; /* demo H3s carry no tracking */
  color: var(--jffd-teal);
  margin: 30px 0 12px;
}
.elementor-widget-theme-post-content p,
.entry-content p {
  font-size: 18px;
  font-weight: 400;
  line-height: 1.72;
  color: var(--jffd-body);
  margin: 0 0 22px;
}
.elementor-widget-theme-post-content li,
.entry-content li,
.elementor-widget-theme-post-content .wp-block-list li {
  font-size: 16.5px;
  font-weight: 400;
  line-height: 1.55;
  color: var(--jffd-body);
}
.elementor-widget-theme-post-content p a,
.elementor-widget-theme-post-content li a,
.entry-content p a,
.entry-content li a {
  color: var(--jffd-link);
  font-weight: 400;
  text-decoration: underline;
}
.elementor-widget-theme-post-content strong,
.elementor-widget-theme-post-content b,
.entry-content strong,
.entry-content b {
  font-weight: 700;
  color: var(--jffd-body);
}
.elementor-widget-theme-post-content figcaption,
.entry-content figcaption,
.elementor-widget-theme-post-content .wp-element-caption,
.entry-content .wp-element-caption {
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--jffd-muted);
}
/* =============================================================
   PASTED-MARKUP GUARD — headings.

   Content pasted from Google Docs or Word arrives wrapped in
   inline-styled spans, e.g.

     <h2><span style="font-weight: 400;">Are carrots good…</span></h2>

   An inline style beats any stylesheet rule, so the heading
   computes to 800 while the text it contains renders at 400:
   the heading looks like body copy. Measured on
   /blog/can-dogs-eat-carrots, 9 of the 40 most recent posts
   carried this.

   Headings take every type property from the theme, so any span
   inside one is told to inherit. Scoped to span[style] so spans
   that carry a class (anchors, badges) are left alone, and to
   headings only, so inline styling in body copy still works.

   This is a safety net, not the cure. The spans are still in
   post_content and should be stripped there; this keeps the
   next paste from shipping broken.
   ============================================================= */
.elementor-widget-theme-post-content h1 span[style],
.elementor-widget-theme-post-content h2 span[style],
.elementor-widget-theme-post-content h3 span[style],
.elementor-widget-theme-post-content h4 span[style],
.elementor-widget-theme-post-content h5 span[style],
.elementor-widget-theme-post-content h6 span[style],
.entry-content h1 span[style],
.entry-content h2 span[style],
.entry-content h3 span[style],
.entry-content h4 span[style],
.entry-content h5 span[style],
.entry-content h6 span[style] {
  font-weight: inherit !important;
  font-size: inherit !important;
  font-family: inherit !important;
  letter-spacing: inherit !important;
  line-height: inherit !important;
  color: inherit !important;
}

/* Neutralize Gutenberg preset font-size classes inside articles */
.entry-content p[class*="-font-size"],
.elementor-widget-theme-post-content p[class*="-font-size"] {
  font-size: 18px !important;
}

/* =============================================================
   AUTHOR PAGES — Layout B (author archive / bio pages)
   Works with the Elementor Archive template built from
   [publishpress_authors_data] widgets (see handoff brief).
   All colors reference the :root tokens above.
   ============================================================= */
body.author .elementor-location-archive h1 {
  font-size: 40px;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--jffd-ink);
}
body.author .entry-content p {
  font-size: 16px;
  line-height: 1.65;
  color: var(--jffd-text-2);
}

/* Avatar — circular, teal-tint ring (spec: 168px, 10px #EAF4F6 ring),
   white gap between photo and ring, centered */
.jffd-avatar img {
  width: 180px;
  height: 180px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  margin: 0 auto;
  border: 4px solid #fff;
  background: #fff;
  box-shadow: 0 0 0 10px var(--jffd-teal-tint), 0 10px 24px rgba(1, 62, 78, .18);
}

/* Role line — green, uppercase, wide-tracked, centered (spec: 12/700 +0.13em) */
.jffd-role {
  color: var(--jffd-green);
  text-transform: uppercase;
  letter-spacing: .13em;
  font-weight: 700;
  font-size: 12px;
  text-align: center;
}

/* Name — sole H1; inherits the global author-H1 scale set above */
.jffd-name,
h1.jffd-name {
  color: var(--jffd-ink);
  text-align: center;
  line-height: 1.1;
  margin: 0;
}

/* Social icons — PublishPress-rendered; circular light-gray chips,
   brand glyphs, centered. Selectors cover PublishPress's social
   markup; verify class names on the live template. */
body.author .pp-author-boxes-social a,
body.author [class*="ppma"] a[class*="social"],
body.author .pp-author-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--jffd-chip);
  color: var(--jffd-teal);
  text-decoration: none;
  margin: 0 4px;
}

/* Bio — left-aligned, redesign body treatment for author pages */
.jffd-bio,
.jffd-bio p {
  font-size: 16px;
  line-height: 1.65;
  color: var(--jffd-text-2);
  text-align: left;
}

/* Section headings (Education / Experience & focus) — deep teal,
   bold, just above body scale */
.jffd-section-heading,
h3.jffd-section-heading,
h4.jffd-section-heading {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--jffd-teal);
  margin: 1.25em 0 .5em;
}

/* List items — gold bullets, left-aligned */
.jffd-item {
  position: relative;
  padding-left: 1.25em;
  margin-bottom: .5em;
  font-size: 16px;
  line-height: 1.65;
  color: var(--jffd-text-2);
  text-align: left;
}
.jffd-item::before {
  content: "\2022";
  position: absolute;
  left: 0;
  color: var(--jffd-gold-deep);
}

/* =============================================================
   REUSABLE UTILITIES — from the spec's component library.
   Add these classes to Elementor containers / Gutenberg groups.
   ============================================================= */
/* Post card: white, bordered, hover lift */
.jffd-card {
  background: #fff;
  border: 1px solid var(--jffd-border);
  border-radius: var(--jffd-radius);
  overflow: hidden;
  transition: transform 180ms ease, box-shadow 180ms ease;
}
.jffd-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(1, 62, 78, .14);
}
.jffd-card:hover .jffd-card__title,
.jffd-card:hover h3 {
  color: var(--jffd-link);
}
/* Primary button */
.jffd-btn,
a.jffd-btn {
  display: inline-block;
  background: var(--jffd-gold);
  color: var(--jffd-midnight) !important;
  font-family: var(--jffd-font);
  font-size: 14.5px;
  font-weight: 700;
  padding: 12px 22px;
  border-radius: 999px;
  text-decoration: none;
  border: none;
}
.jffd-btn:hover { background: var(--jffd-gold-deep); }
/* Sticky TOC card */
.jffd-toc {
  position: sticky;
  top: 24px;
  background: #fff;
  border: 1px solid var(--jffd-border);
  border-radius: var(--jffd-radius);
  padding: 20px;
}
/* 3-column posts grid */
.jffd-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
/* Author avatar ring */
.jffd-avatar-ring {
  border-radius: 50%;
  box-shadow: 0 0 0 10px var(--jffd-teal-tint), 0 10px 24px rgba(1, 62, 78, .18);
}
/* Section eyebrow */
.jffd-eyebrow {
  display: block;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--jffd-teal);
}

/* =============================================================
   RESPONSIVE — breakpoints from the spec
   ============================================================= */
@media (max-width: 900px) {
  .jffd-grid-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
  .jffd-grid-3 { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .elementor-widget-theme-post-title h1,
  h1.entry-title { font-size: 29px; }
  .elementor-widget-theme-post-content h2,
  .entry-content h2 { font-size: 25px; margin: 34px 0 12px; }
  .elementor-widget-theme-post-content h3,
  .entry-content h3 { font-size: 19px; }
  .elementor-widget-theme-post-content p,
  .entry-content p { font-size: 17px; }
}
@media (max-width: 620px) {
  body.author .elementor-location-archive h1 { font-size: 30px; }
}

/* =============================================================
   BREADCRUMBS — Yoast (#breadcrumbs), styled per the redesign:
   13.5px, blue links, light-gray "/" separators, muted current page.
   The separator text nodes inherit from the container, so the
   container carries the separator color.
   ============================================================= */
#breadcrumbs {
  font-family: var(--jffd-font);
  font-size: 13.5px;
  font-weight: 400;
  color: #B8C4C8; /* separator "/" color */
}
#breadcrumbs a {
  color: var(--jffd-link);
  text-decoration: none;
  font-weight: 400;
}
#breadcrumbs a:hover { text-decoration: underline; }
#breadcrumbs .breadcrumb_last { color: var(--jffd-muted); }

/* =============================================================
   "IN THIS ARTICLE" — Elementor Pro Table of Contents widget,
   restyled as the redesign's sticky TOC card (white, 1px border,
   12px radius, 12/800 uppercase teal title, quiet 14.5px links).
   ============================================================= */
/* !important is deliberate: the live TOC widget carries per-widget
   Elementor styles (.elementor-element-xxxx …) that outrank clean
   selectors — these normalize every TOC to the design system. */
.elementor-widget-table-of-contents > .elementor-widget-container {
  background: #fff !important;
  border: 1px solid var(--jffd-border) !important;
  border-radius: var(--jffd-radius) !important;
  padding: 0 !important;
  font-family: var(--jffd-font);
}
.elementor-widget-table-of-contents { position: sticky; top: 24px; }
.elementor-widget-table-of-contents .elementor-toc__header {
  border-bottom: none !important;
  padding: 20px 20px 12px !important;
  margin: 0 !important;
  background: none !important;
}
.elementor-widget-table-of-contents .elementor-toc__header-title {
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: .07em !important;
  text-transform: uppercase !important;
  color: var(--jffd-teal) !important;
}
.elementor-widget-table-of-contents .elementor-toc__body {
  padding: 0 12px 16px !important;
  background: none !important;
  max-height: none !important;
}
.elementor-widget-table-of-contents .elementor-toc__list-wrapper { list-style: none !important; margin: 0 !important; padding: 0 !important; }
.elementor-widget-table-of-contents .elementor-toc__list-item { margin: 0 !important; }
.elementor-widget-table-of-contents .elementor-toc__number,
.elementor-widget-table-of-contents .elementor-toc__list-item i,
.elementor-widget-table-of-contents .elementor-toc__list-item svg { display: none !important; }
.elementor-widget-table-of-contents a.elementor-toc__list-item-text {
  font-size: 14.5px !important;
  font-weight: 400 !important;
  color: #26424A !important;
  text-decoration: none !important;
  line-height: 1.4 !important;
  display: block;
  padding: 6px 8px !important;
  border-radius: 6px;
}
.elementor-widget-table-of-contents a.elementor-toc__list-item-text:hover {
  background: var(--jffd-teal-tint);
  color: var(--jffd-teal) !important;
  text-decoration: none !important;
}
.elementor-widget-table-of-contents a.elementor-toc__list-item-text.elementor-item-active {
  background: var(--jffd-teal-tint);
  color: var(--jffd-teal) !important;
  font-weight: 600 !important;
}
/* Demo shows the TOC expanded on desktop — neutralize "minimize on
   desktop" above the tablet breakpoint and hide the toggle there. */
@media (min-width: 1025px) {
  .elementor-toc--minimized-on-desktop .elementor-toc__body { display: block !important; }
  .elementor-widget-table-of-contents .elementor-toc__toggle-button { display: none !important; }
}

/* =============================================================
   RELATED POSTS — Graphite AEO snippet (.graphite-related-posts),
   styled as the redesign's post-card grid. Applies site-wide.
   Card = a.gp-link (whole card is the link); the separate
   "Read More" sublinks are hidden as redundant.
   ============================================================= */
.graphite-related-posts {
  font-family: var(--jffd-font);
  margin: 34px 0;
}
.graphite-related-posts .title {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--jffd-ink);
  margin: 0 0 20px;
}
.graphite-related-posts .grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.graphite-related-posts a.gp-link {
  display: block;
  background: #fff;
  border: 1px solid var(--jffd-border);
  border-radius: var(--jffd-radius);
  overflow: hidden;
  text-decoration: none;
  transition: transform 180ms ease, box-shadow 180ms ease;
}
.graphite-related-posts a.gp-link:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(1, 62, 78, .14);
}
.graphite-related-posts a.gp-link:hover .label { color: var(--jffd-link); }
.graphite-related-posts .gp-link .parent { margin: 0; }
.graphite-related-posts .gp-link .img {
  aspect-ratio: 1.45;
  background-size: cover;
  background-position: center;
  display: block;
}
.graphite-related-posts .gp-link .label {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.35;
  color: #1C2B30;
  padding: 16px 18px 20px;
  margin: 0;
}
/* The card itself is the link — the standalone "Read More" is redundant */
.graphite-related-posts a.gp-sublink { display: none; }
@media (max-width: 900px) {
  .graphite-related-posts .grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .graphite-related-posts .grid { grid-template-columns: 1fr; }
}

/* =============================================================
   LEGACY TEMPLATE SAFETY NET — posts rendered by older single
   templates output the title as a Heading widget, not the
   theme-post-title widget. Normalize it to the redesign H1.
   ============================================================= */
body.single-post h1.elementor-heading-title {
  font-family: var(--jffd-font) !important;
  font-size: 42px !important;
  font-weight: 800 !important;
  line-height: 1.15 !important;
  letter-spacing: -0.01em !important;
  color: var(--jffd-ink) !important;
}
@media (max-width: 640px) {
  body.single-post h1.elementor-heading-title { font-size: 29px !important; }
}

/* =============================================================
   TAGS — Elementor Post Info terms item, restyled as the demo's
   pill chips (12.5/700 uppercase teal on #F4F7F9, 999px radius).
   The tag icon and the "Tags" prefix + separator text nodes are
   suppressed (font-size:0 trick); only the chips render.
   ============================================================= */
body.single-post .elementor-icon-list-item:has(.elementor-post-info__item--type-terms) .elementor-icon-list-icon {
  display: none !important;
}
body.single-post .elementor-post-info__item--type-terms {
  font-size: 0 !important; /* hides "Tags" prefix + comma separators */
  line-height: 1 !important;
}
body.single-post .elementor-post-info__terms-list { font-size: 0 !important; }
body.single-post .elementor-post-info__terms-list-item,
body.single-post .elementor-post-info__terms-list a,
body.single-post .tags-links a {
  display: inline-block;
  font-family: var(--jffd-font) !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  letter-spacing: 1.125px !important;
  text-transform: uppercase !important;
  color: var(--jffd-teal) !important;
  background: #F4F7F9 !important;
  padding: 5px 11px !important;
  border-radius: 999px !important;
  text-decoration: none !important;
  margin: 0 6px 6px 0 !important;
  line-height: 1.4 !important;
}
body.single-post .elementor-post-info__terms-list-item:hover,
body.single-post .elementor-post-info__terms-list a:hover,
body.single-post .tags-links a:hover {
  background: var(--jffd-teal-tint) !important;
  color: var(--jffd-teal) !important;
}

/* =============================================================
   SITE CHROME — nav & footer link behavior (moved from the old
   theme's Customizer CSS, which stopped loading on theme switch:
   WordPress stores Additional CSS per-theme). The classes are set
   on the Elementor nav/footer widgets.
   ============================================================= */
.no-underline-menu a {
  text-decoration: none;
}
.no-underline-menu a:hover {
  text-decoration: underline;
}
.no-underline-footer a {
  text-decoration: none;
}
.no-underline-footer a:hover {
  text-decoration: underline;
  color: #ffffff;
}

/* =============================================================
   AUTHOR PAGES — font hardening. The Elementor kit sets
   avenir-lt-pro / Helvetica Now Display at higher specificity
   than clean selectors, so every text element on the archive
   template needs explicit family (and the text-editor widgets
   need the full body treatment). !important beats kit + widget
   level rules for good.
   ============================================================= */
body.author .elementor-location-archive h1,
h1.jffd-name,
.jffd-name {
  font-family: var(--jffd-font) !important;
}
.jffd-bio, .jffd-bio p, .jffd-role, .jffd-item,
.jffd-section-heading {
  font-family: var(--jffd-font) !important;
}
body.author .elementor-location-archive .elementor-widget-text-editor,
body.author .elementor-location-archive .elementor-widget-text-editor p {
  font-family: var(--jffd-font) !important;
  font-size: 16px !important;
  line-height: 1.65 !important;
  color: var(--jffd-text-2) !important;
}
body.author .elementor-location-archive .elementor-heading-title {
  font-family: var(--jffd-font) !important;
  color: var(--jffd-ink) !important;
  letter-spacing: -0.01em;
}
body.author .elementor-location-archive h2.elementor-heading-title {
  font-size: 24px !important; /* spec: "Posts by…" section title */
  font-weight: 800 !important;
}
body.author .elementor-location-archive h3.elementor-heading-title,
body.author .elementor-location-archive h4.elementor-heading-title {
  font-size: 18px !important;
  font-weight: 800 !important;
}

/* =============================================================
   POST LOOP CARDS — the "Blog Posts" Loop Item template (15038),
   rendered site-wide as .e-loop-item. Styled to the demo's
   post-card spec: white bordered card, 1.45 cover image, quiet
   meta row, 16/700 sentence-case title, hover lift + blue title.
   !important beats the template's widget-level avenir/uppercase.
   ============================================================= */
.e-loop-item {
  background: #fff;
  border: 1px solid var(--jffd-border);
  border-radius: var(--jffd-radius);
  overflow: hidden;
  transition: transform 180ms ease, box-shadow 180ms ease;
}
.e-loop-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(1, 62, 78, .14);
}
.e-loop-item .elementor-widget-theme-post-featured-image img {
  width: 100%;
  aspect-ratio: 1.45;
  object-fit: cover;
  display: block;
  border-radius: 0;
}
.e-loop-item .elementor-widget-post-info {
  padding: 14px 18px 0;
}
.e-loop-item .elementor-widget-post-info .elementor-icon-list-item,
.e-loop-item .elementor-widget-post-info .elementor-icon-list-text {
  font-family: var(--jffd-font) !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  color: var(--jffd-muted) !important;
}
.e-loop-item .elementor-widget-post-info a .elementor-icon-list-text {
  color: var(--jffd-teal) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .05em !important;
}
.e-loop-item .elementor-widget-theme-post-title {
  padding: 4px 18px 20px;
}
.e-loop-item .elementor-widget-theme-post-title h1,
.e-loop-item .elementor-widget-theme-post-title h2,
.e-loop-item .elementor-widget-theme-post-title h3,
.e-loop-item .elementor-widget-theme-post-title h4,
.e-loop-item .elementor-widget-theme-post-title h5,
.e-loop-item .elementor-widget-theme-post-title .elementor-heading-title {
  font-family: var(--jffd-font) !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: #1C2B30 !important;
  margin: 0 !important;
}
.e-loop-item .elementor-widget-theme-post-title a {
  color: inherit !important;
  text-decoration: none !important;
}
.e-loop-item:hover .elementor-widget-theme-post-title .elementor-heading-title,
.e-loop-item:hover .elementor-widget-theme-post-title a {
  color: var(--jffd-link) !important;
}

/* =============================================================
   PAGINATION — Elementor Loop Grid / WP page-numbers, styled to
   the design spec (8px cells, #CDD8DD borders, teal active
   square, "Next" pill). Applies wherever numbered pagination is
   enabled on a Loop Grid (author pages, archives, homepage).
   ============================================================= */
.elementor-pagination,
nav.pagination .nav-links {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 34px 0 8px;
}
.elementor-pagination .page-numbers,
nav.pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 48px;
  height: 48px;
  padding: 0 16px;
  background: #fff;
  border: 1px solid var(--jffd-border-2);
  border-radius: 8px;
  font-family: var(--jffd-font) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--jffd-teal) !important;
  text-decoration: none !important;
  transition: background 120ms ease;
}
.elementor-pagination a.page-numbers:hover,
nav.pagination a.page-numbers:hover {
  background: var(--jffd-teal-tint);
}
.elementor-pagination .page-numbers.current,
nav.pagination .page-numbers.current {
  background: var(--jffd-teal);
  border-color: var(--jffd-teal);
  color: #fff !important;
}
.elementor-pagination .page-numbers.dots,
nav.pagination .page-numbers.dots {
  border: none;
  background: none;
  color: var(--jffd-muted) !important;
}

/* =============================================================
   SITE CHROME IMMUNITY — header & footer are shared across every
   template, so no page-scoped rule may reach into them.

   Two guards, both needed:

   1. Page-scoped blocks above (body.author, body.single-post, the
      homepage sections) are scoped to their own Elementor location
      wrapper — .elementor-location-archive and friends — so they
      physically cannot select a footer node. That is the real fix;
      the author rules were forcing footer column headings to
      --jffd-ink (#00263E) and the copyright line to #333 on the
      dark band, which read as broken link formatting.

   2. The color rules below double-select on the footer root
      ([data-elementor-type] AND .elementor-location-footer) so they
      carry enough specificity to survive a future page-scoped rule
      that forgets guard 1. Colors ONLY — never font-family or
      font-size, and never the copyright text-editor (the footer
      template gives it #F4F7F9 / Manrope 13px, which is correct).
      The footer's type is set per-widget in the Elementor footer
      template (avenir-lt-pro / Manrope, 20/16/14/13px), and that
      template stays the source of truth for it.
   ============================================================= */
[data-elementor-type="footer"].elementor-location-footer,
[data-elementor-type="footer"].elementor-location-footer p,
[data-elementor-type="footer"].elementor-location-footer .elementor-icon-list-text,
[data-elementor-type="footer"].elementor-location-footer .elementor-heading-title {
  color: #D7E4E7 !important;
}
[data-elementor-type="footer"].elementor-location-footer a,
[data-elementor-type="footer"].elementor-location-footer a .elementor-icon-list-text {
  color: #FFFFFF !important;
  text-decoration: none !important;
}
[data-elementor-type="footer"].elementor-location-footer a:hover,
[data-elementor-type="footer"].elementor-location-footer a:hover .elementor-icon-list-text {
  text-decoration: underline !important;
}

/* =============================================================
   HOMEPAGE (Concept D template) — section components. The
   Elementor template supplies structure; these classes carry the
   design so the import stays version-proof.
   ============================================================= */
.jffd-alert-bar { background: #FDECEA; margin: 0; }
.jffd-alert-bar a {
  display: block; text-align: center; padding: 10px 16px;
  font-family: var(--jffd-font); font-size: 14px; font-weight: 700;
  color: #C0392B !important; text-decoration: none;
}
.jffd-alert-bar a:hover { text-decoration: underline; }

/* NOTE: never make .jffd-home-hero itself a grid — in Elementor the
   section is the boxed container, and turning it into a grid makes its
   .e-con-inner a grid item, which breaks Elementor's centering (the
   hero drifted ~200px left of the other sections). Grid lives on the
   inner only; see the Elementor container rules further down. */
.jffd-home-hero:not(.e-con) { display: grid; grid-template-columns: minmax(0,1fr) 380px; gap: 24px; align-items: stretch; }
@media (max-width: 900px) { .jffd-home-hero:not(.e-con) { grid-template-columns: 1fr; } }

.jffd-featured-card { background:#fff; border:1px solid var(--jffd-border); border-radius:var(--jffd-radius); overflow:hidden; height:100%; }
.jffd-featured-card__img { aspect-ratio: 2.1; background: linear-gradient(135deg, #EAF4F6, #D7E4E7); display:flex; align-items:center; justify-content:center; color:var(--jffd-muted); font-size:14px; }
.jffd-featured-card__img img { width:100%; height:100%; object-fit:cover; display:block; }
.jffd-featured-card__body { padding: 22px 26px 26px; }
.jffd-featured-card__title { font-size: 30px; font-weight: 800; letter-spacing: -0.01em; line-height: 1.2; color: var(--jffd-ink); margin: 12px 0 10px; }
.jffd-featured-card__title a { color: inherit; text-decoration: none; }
.jffd-featured-card__title a:hover { color: var(--jffd-link); }
.jffd-featured-card__dek { font-size: 17px; line-height: 1.6; color: var(--jffd-text-2); margin: 0 0 16px; }
.jffd-featured-card__byline { font-size: 14px; color: var(--jffd-muted); margin: 0 0 18px; }
.jffd-featured-card__byline a { color: var(--jffd-teal); font-weight: 700; text-decoration: none; }
.jffd-featured-card__byline a:hover { text-decoration: underline; }
.jffd-featured-card__byline .check { color: var(--jffd-green); font-weight: 700; }

.jffd-rail { background:#fff; border:1px solid var(--jffd-border); border-radius:var(--jffd-radius); padding: 18px 18px 14px; height:100%; }
.jffd-rail .jffd-eyebrow { margin-bottom: 4px; }
.jffd-rail h2 { font-size: 22px; margin: 0 0 12px; }
.jffd-rail .e-loop-item { border: none; border-radius: 0; box-shadow: none !important; transform: none !important; border-bottom: 1px solid var(--jffd-rule); margin: 0; }
.jffd-rail .e-loop-item:last-of-type { border-bottom: none; }

.jffd-statbar { background: var(--jffd-teal-tint); border-radius: var(--jffd-radius); display:flex; flex-wrap:wrap; gap: 8px 36px; justify-content:center; padding: 16px 22px; font-family: var(--jffd-font); }
.jffd-statbar span { font-size: 14.5px; color: var(--jffd-text-2); }
.jffd-statbar b { color: var(--jffd-teal); font-weight: 800; }

.jffd-search-band { background: var(--jffd-teal-tint); border-radius: var(--jffd-radius); padding: 44px 24px 36px; text-align: center; }
.jffd-search-band h2 { font-size: 34px; font-weight: 800; letter-spacing: -0.01em; color: var(--jffd-ink); margin: 0 0 8px; }
.jffd-search-band p { font-size: 16px; color: var(--jffd-text-2); margin: 0 0 20px; }
.jffd-search-form { display:flex; max-width: 640px; margin: 0 auto 22px; background:#fff; border:1px solid var(--jffd-border); border-radius:999px; overflow:hidden; }
.jffd-search-form input[type="search"] { flex:1; border:none; outline:none; padding: 14px 22px; font-family: var(--jffd-font); font-size: 16px; color: var(--jffd-body); background:none; }
.jffd-search-form button { border:none; cursor:pointer; background: var(--jffd-gold); color: var(--jffd-midnight); font-family: var(--jffd-font); font-size: 14.5px; font-weight: 700; padding: 0 24px; border-radius: 999px; margin: 4px; }
.jffd-search-form button:hover { background: var(--jffd-gold-deep); }
.jffd-chip-label { display:block; font-size: 12px; font-weight: 800; letter-spacing:.08em; text-transform: uppercase; color: var(--jffd-muted); margin: 18px 0 10px; }
.jffd-chips { display:flex; flex-wrap:wrap; gap:10px; justify-content:center; }
.jffd-chips a {
  font-size: 12.5px; font-weight: 700; letter-spacing:.09em; text-transform: uppercase;
  color: var(--jffd-teal) !important; background:#fff; border:1px solid var(--jffd-border);
  border-radius: 999px; padding: 8px 16px; text-decoration:none !important;
}
.jffd-chips a:hover { background: #fff; border-color: var(--jffd-teal); }

.jffd-experts { display:flex; flex-direction:column; gap: 10px; }
.jffd-expert { display:flex; align-items:center; gap: 14px; background:#fff; border:1px solid var(--jffd-border); border-radius: var(--jffd-radius); padding: 10px 16px; text-decoration:none !important; transition: transform 180ms ease, box-shadow 180ms ease; }
.jffd-expert:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(1,62,78,.12); }
.jffd-expert img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 4px var(--jffd-teal-tint); }
.jffd-expert__meta { display:flex; flex-direction:column; gap:1px; }
.jffd-expert__name { font-family: var(--jffd-font); font-size: 15.5px; font-weight: 700; color: var(--jffd-teal); }
.jffd-expert:hover .jffd-expert__name { text-decoration: underline; }
.jffd-expert__role { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--jffd-green); }

.jffd-home-h2 { font-size: 26px; font-weight: 800; letter-spacing: -0.01em; color: var(--jffd-ink); margin: 0 0 6px; }
.jffd-home-sub { font-size: 15.5px; color: var(--jffd-muted); margin: 0 0 22px; }

.jffd-studies { display:grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
@media (max-width: 900px) { .jffd-studies { grid-template-columns: 1fr; } }
.jffd-study-panel { display:block; background: var(--jffd-teal); border-radius: var(--jffd-radius); padding: 24px 26px; text-decoration:none !important; transition: transform 180ms ease, box-shadow 180ms ease; }
.jffd-study-panel:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(1,62,78,.25); }
.jffd-study-panel .eyebrow { display:block; font-size: 11.5px; font-weight: 700; letter-spacing:.96px; text-transform:uppercase; color:#8FD3C8; margin-bottom: 8px; }
.jffd-study-panel .title { display:block; font-size: 18px; font-weight: 800; color:#fff; line-height:1.35; margin-bottom: 8px; }
.jffd-study-panel .desc { display:block; font-size: 14px; line-height:1.55; color:#D7E4E7; margin-bottom: 12px; }
.jffd-study-panel .go { font-size: 14px; font-weight: 700; color:#8FD3C8; }

.jffd-topic-cards { display:grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
@media (max-width: 1024px) { .jffd-topic-cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .jffd-topic-cards { grid-template-columns: 1fr; } }
.jffd-topic-cards a { display:block; background:#fff; border:1px solid var(--jffd-border); border-radius: var(--jffd-radius); padding: 18px; text-decoration:none !important; transition: transform 180ms ease, box-shadow 180ms ease; }
.jffd-topic-cards a:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(1,62,78,.14); }
.jffd-topic-cards .t { display:block; font-size: 16px; font-weight: 800; color: var(--jffd-ink); margin-bottom: 4px; }
.jffd-topic-cards .d { display:block; font-size: 13.5px; line-height: 1.5; color: var(--jffd-muted); }

.jffd-guides { display:grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
@media (max-width: 900px) { .jffd-guides { grid-template-columns: 1fr; } }
.jffd-guides a { display:block; background:#fff; border:1px solid var(--jffd-border); border-radius: var(--jffd-radius); padding: 22px 24px; text-decoration:none !important; transition: transform 180ms ease, box-shadow 180ms ease; }
.jffd-guides a:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(1,62,78,.14); }
.jffd-guides .eyebrow { display:block; font-size: 11.5px; font-weight: 800; letter-spacing:.08em; text-transform:uppercase; color: var(--jffd-green); margin-bottom: 8px; }
.jffd-guides .t { display:block; font-size: 17px; font-weight: 800; color: var(--jffd-ink); line-height: 1.35; margin-bottom: 6px; }
.jffd-guides .d { display:block; font-size: 14px; line-height: 1.55; color: var(--jffd-text-2); }

.jffd-viewall { font-family: var(--jffd-font); font-size: 15px; font-weight: 700; color: var(--jffd-link) !important; text-decoration: none !important; }
.jffd-viewall:hover { text-decoration: underline !important; }

/* Elementor-container variants of the homepage grids (boxed
   containers wrap children in .e-con-inner) + section rhythm */
.jffd-home-hero > .e-con-inner,
.jffd-experts-band > .e-con-inner { display: grid; gap: 24px; align-items: stretch; }
.jffd-experts-band > .e-con-inner { gap: 36px; align-items: start; }
@media (max-width: 900px) {
  .jffd-home-hero > .e-con-inner,
  .jffd-experts-band > .e-con-inner { grid-template-columns: 1fr; }
}
/* Width/centering is Elementor's job: each section container is
   "boxed", so its .e-con-inner is already capped at the kit's
   Content Width (Site Settings -> Layout, currently 1180px) and
   centered. We only add vertical rhythm here — overriding
   max-width/margins fought that centering and knocked sections
   out of alignment with each other. To change the page width,
   change Site Settings -> Content Width; every section follows. */
.jffd-sec > .e-con-inner,
.jffd-home-hero > .e-con-inner,
.jffd-experts-band > .e-con-inner {
  padding-top: 24px;
  padding-bottom: 24px;
  margin-left: auto;
  margin-right: auto;
}
/* Hero + experts split on the post template's 2:1 rhythm */
.jffd-home-hero > .e-con-inner { grid-template-columns: 2fr 1fr; }
.jffd-experts-band > .e-con-inner { grid-template-columns: 2fr 1fr; }
.jffd-sec-alert, .jffd-sec-alert > .e-con-inner { padding: 0; max-width: none; width: 100%; }
.jffd-sec-alert .elementor-widget-shortcode { width: 100%; }

/* Hero: featured card + rail share height; rail rows distribute */
.jffd-featured-card__img { display:block; }
.jffd-featured-card__img img { width:100%; height:100%; object-fit:cover; display:block; }
.jffd-hero-rail { display:flex; }
.jffd-hero-rail > .elementor-widget, .jffd-hero-rail .jffd-rail { width:100%; }
.jffd-rail { display:flex; flex-direction:column; }
.jffd-rail .elementor-widget-shortcode, .jffd-rail .elementor-widget-shortcode .elementor-widget-container { flex:1; display:flex; }
.jffd-recent-list { flex:1; display:flex; flex-direction:column; justify-content:space-between; gap:0; width:100%; }
.jffd-recent-row { display:flex; align-items:center; gap:12px; padding:10px 0; border-bottom:1px solid var(--jffd-rule); text-decoration:none !important; }
.jffd-recent-list .jffd-recent-row:last-child { border-bottom:none; }
.jffd-recent-row__thumb { width:56px; height:56px; border-radius:8px; overflow:hidden; flex-shrink:0; background:var(--jffd-teal-tint); }
.jffd-recent-row__thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.jffd-recent-row__meta { min-width:0; display:flex; flex-direction:column; gap:2px; }
.jffd-recent-row__title { font-family:var(--jffd-font); font-size:14.5px; font-weight:700; line-height:1.35; color:#1C2B30; }
.jffd-recent-row:hover .jffd-recent-row__title { color:var(--jffd-link); }
.jffd-recent-row__sub { font-size:12px; color:var(--jffd-muted); }

/* Expert rows: avatar fallback + wrap robustness */
.jffd-expert__initials { width:44px; height:44px; border-radius:50%; flex-shrink:0; background:var(--jffd-teal-tint); color:var(--jffd-teal); font-family:var(--jffd-font); font-weight:800; font-size:17px; display:inline-flex; align-items:center; justify-content:center; box-shadow:0 0 0 4px var(--jffd-teal-tint); }
.jffd-expert img { flex-shrink:0; }
.jffd-expert__meta { min-width:0; }
.jffd-expert__name { line-height:1.3; }
.jffd-expert__role { line-height:1.4; letter-spacing:.06em; }

/* Post loop cards — REFERENCE-EXACT. The model site's card contains
   only two elements: a flush edge-to-edge 1.45-ratio image and a
   16/700 title (padding 16px 18px 20px). No date/category/tag row.
   To bring the meta row back, delete the display:none rule below. */
.e-loop-item { row-gap: 0 !important; }
.e-loop-item > .e-con-inner { row-gap: 0 !important; }
.e-loop-item .elementor-widget-theme-post-featured-image,
.e-loop-item .elementor-widget-theme-post-featured-image .elementor-widget-container {
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
}
.e-loop-item .elementor-widget-theme-post-featured-image img {
  border-radius: 0 !important;
  width: 100% !important;
  aspect-ratio: 1.45;
  object-fit: cover;
  display: block;
}
.e-loop-item:not(.jffd-loop-b):not(.jffd-loop-c) .elementor-widget-post-info { display: none !important; }
.e-loop-item .elementor-widget-theme-post-title { padding: 16px 18px 20px !important; margin: 0 !important; }
.e-loop-item .elementor-widget-theme-post-title h1,
.e-loop-item .elementor-widget-theme-post-title h2,
.e-loop-item .elementor-widget-theme-post-title h3,
.e-loop-item .elementor-widget-theme-post-title h4,
.e-loop-item .elementor-widget-theme-post-title h5,
.e-loop-item .elementor-widget-theme-post-title .elementor-heading-title {
  font-size: 16px !important;   /* reference exact */
  line-height: 1.35 !important;
}

/* =============================================================
   LOOP ITEM VARIANTS
   B — author pages (reference: Layout B demo): image, category ·
       date meta row, 16.5/700 title, 14px muted excerpt.
   C — category & search results: horizontal list row for fast
       scanning (JFFD-designed, same system).
   The variant class goes on the loop template's root container.
   ============================================================= */
/* ---- Style B ---- */
.e-loop-item.jffd-loop-b .elementor-widget-post-info {
  padding: 16px 18px 0 !important;
}
.e-loop-item.jffd-loop-b .elementor-widget-post-info .elementor-icon-list-items {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
}
.e-loop-item.jffd-loop-b .elementor-widget-post-info .elementor-icon-list-item,
.e-loop-item.jffd-loop-b .elementor-widget-post-info .elementor-icon-list-text {
  font-size: 12px !important;
  color: var(--jffd-muted) !important;
  font-weight: 400 !important;
}
.e-loop-item.jffd-loop-b .elementor-widget-post-info a .elementor-icon-list-text {
  color: var(--jffd-teal) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .6px !important;
}
.e-loop-item.jffd-loop-b .elementor-widget-theme-post-title { padding: 8px 18px 0 !important; }
.e-loop-item.jffd-loop-b .elementor-widget-theme-post-title .elementor-heading-title,
.e-loop-item.jffd-loop-b .elementor-widget-theme-post-title h1,
.e-loop-item.jffd-loop-b .elementor-widget-theme-post-title h2,
.e-loop-item.jffd-loop-b .elementor-widget-theme-post-title h3,
.e-loop-item.jffd-loop-b .elementor-widget-theme-post-title h4,
.e-loop-item.jffd-loop-b .elementor-widget-theme-post-title h5 {
  font-size: 16.5px !important; /* reference exact */
  line-height: 1.35 !important;
  margin: 0 0 6px !important;
}
.e-loop-item.jffd-loop-b .elementor-widget-theme-post-excerpt {
  padding: 0 18px 20px !important;
}
.e-loop-item.jffd-loop-b .elementor-widget-theme-post-excerpt p {
  font-size: 14px !important;
  line-height: 1.5 !important;
  color: #5A666B !important;   /* reference exact */
  margin: 0 !important;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---- Style C (list row for category / search) ---- */
.e-loop-item.jffd-loop-c {
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch;
}
.e-loop-item.jffd-loop-c > .e-con-inner { display: flex; flex-direction: row; width: 100%; }
.e-loop-item.jffd-loop-c .elementor-widget-theme-post-featured-image {
  width: 280px !important;
  flex-shrink: 0;
}
.e-loop-item.jffd-loop-c .elementor-widget-theme-post-featured-image img {
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: auto;
  min-height: 176px;
  object-fit: cover;
}
.e-loop-item.jffd-loop-c .jffd-loop-c__body,
.e-loop-item.jffd-loop-c > .e-con-inner > :not(.elementor-widget-theme-post-featured-image) {
  padding: 18px 22px;
}
.e-loop-item.jffd-loop-c .elementor-widget-post-info { padding: 18px 22px 0 !important; }
.e-loop-item.jffd-loop-c .elementor-widget-post-info .elementor-icon-list-item,
.e-loop-item.jffd-loop-c .elementor-widget-post-info .elementor-icon-list-text {
  font-size: 12px !important;
  color: var(--jffd-muted) !important;
}
.e-loop-item.jffd-loop-c .elementor-widget-post-info a .elementor-icon-list-text {
  color: var(--jffd-teal) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .6px !important;
}
.e-loop-item.jffd-loop-c .elementor-widget-theme-post-title { padding: 6px 22px 0 !important; }
.e-loop-item.jffd-loop-c .elementor-widget-theme-post-title .elementor-heading-title,
.e-loop-item.jffd-loop-c .elementor-widget-theme-post-title h1,
.e-loop-item.jffd-loop-c .elementor-widget-theme-post-title h2,
.e-loop-item.jffd-loop-c .elementor-widget-theme-post-title h3,
.e-loop-item.jffd-loop-c .elementor-widget-theme-post-title h4,
.e-loop-item.jffd-loop-c .elementor-widget-theme-post-title h5 {
  font-size: 19px !important;
  line-height: 1.35 !important;
  margin: 0 0 6px !important;
}
.e-loop-item.jffd-loop-c .elementor-widget-theme-post-excerpt { padding: 0 22px 18px !important; }
.e-loop-item.jffd-loop-c .elementor-widget-theme-post-excerpt p {
  font-size: 15px !important;
  line-height: 1.55 !important;
  color: #5A666B !important;
  margin: 0 !important;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
@media (max-width: 700px) {
  .e-loop-item.jffd-loop-c, .e-loop-item.jffd-loop-c > .e-con-inner { flex-direction: column !important; }
  .e-loop-item.jffd-loop-c .elementor-widget-theme-post-featured-image { width: 100% !important; }
  .e-loop-item.jffd-loop-c .elementor-widget-theme-post-featured-image img { aspect-ratio: 1.8; min-height: 0; }
}

/* Expert rows: larger retina-backed photos per the curated design */
.jffd-expert img, .jffd-expert__initials { width: 64px; height: 64px; }
.jffd-expert__initials { font-size: 22px; }
.jffd-expert { padding: 12px 18px; }
.jffd-expert__name { font-size: 17px; }
.jffd-expert__role { font-size: 12.5px; }


/* =============================================================
   CONTAINER OVERFLOW SAFETY NET

   One generic rule: an Elementor container may never be wider
   than the thing that holds it.

   This is kept permanently, not as a stopgap. An explicit pixel
   Width set on a container in the Elementor editor is emitted
   with NO media query, so it applies at every breakpoint and the
   page scrolls sideways on anything narrower. That happened on
   the single-post template in Oct 2026: container d905941 had
   `width: 1980px`, which overflowed a 390px phone out to 1980px
   and a 1440px laptop by 270px, clipping the headline and the
   byline. The setting has since been cleared in the template;
   this rule means the next one cannot take the site down.

   max-width:100% does not fight a legitimate Width — it only
   caps one that would otherwise exceed its parent — so it is
   safe to leave in place.

   The companion fix for that incident WAS here too: a
   `flex-wrap: nowrap` on container df1034a, which was a column
   flex container with Wrap enabled. In a wrapping column flex
   box the items stretch to fill, so the byline widget rendered
   435px tall around 100px of content — ~335px of blank space
   between the byline and the first paragraph. That is now fixed
   properly in the template (Layout -> Wrap -> No wrap), so the
   CSS hack has been removed. It was keyed to an Elementor
   element ID and would have broken silently on a rebuild.
   ============================================================= */
.elementor-location-single .e-con,
.elementor-location-single .e-con-full {
  max-width: 100% !important;
}