/*
 * J.P. Hemp Company — hub.css
 * Hub page stylesheet
 * Design System v3.12 · Charter v3.22 · Updated August 2026
 *
 * August 2026 updates:
 *   — --rule-text applied to .hub-section-label, .hub-entry-tag, .page-footer
 *   — hub-figure classes merged at end of file
 *
 * Covers: hub intro, section labels, hub entries (title, subtitle,
 * tag), hub-level page footer, and any hub-specific layout.
 *
 * Requires: base.css (load first)
 * Link tags:
 *   <link rel="stylesheet" href="/wp-content/themes/jp-hemp-child/base.css">
 *   <link rel="stylesheet" href="/wp-content/themes/jp-hemp-child/hub.css">
 */


/* ─────────────────────────────────────────────────────────────────
   PART 1 — HUB INTRO
   Opening paragraph that contextualizes the pillar.
   ───────────────────────────────────────────────────────────────── */

.hub-intro {
  margin-bottom: 48px;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--rule);
}

.hub-intro p {
  font-size: 19.5px;
  line-height: 1.78;
  color: var(--ink-light);
  margin-bottom: 0;
}


/* ─────────────────────────────────────────────────────────────────
   PART 2 — HUB SECTIONS
   ───────────────────────────────────────────────────────────────── */

.hub-section {
  margin-bottom: 40px;
}

.hub-section-label {
  font-family: 'Courier Prime', monospace;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--rule-text);
  margin-bottom: 20px;
  display: block;
}


/* ─────────────────────────────────────────────────────────────────
   PART 3 — HUB ENTRIES
   Each linked article or sub-pillar listed in the hub.
   ───────────────────────────────────────────────────────────────── */

.hub-entry {
  padding: 18px 0;
  border-bottom: 1px solid var(--parchment-dark);
}

.hub-entry:last-child { border-bottom: none; }

.hub-entry-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 18px;
  font-weight: 400;
  color: var(--olive);
  text-decoration: none;
  display: block;
  margin-bottom: 6px;
  line-height: 1.3;
}

.hub-entry-title:hover { text-decoration: underline; }

.hub-entry-sub {
  font-family: 'Crimson Pro', serif;
  font-size: 16.5px;
  font-style: italic;
  color: var(--ink-light);
  line-height: 1.6;
  display: block;
}

.hub-entry-tag {
  font-family: 'Courier Prime', monospace;
  font-size: 9.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--rule-text);
  margin-top: 6px;
  display: block;
}


/* ─────────────────────────────────────────────────────────────────
   PART 4 — HUB PAGE FOOTER
   ───────────────────────────────────────────────────────────────── */

.page-footer {
  margin-top: 56px;
  padding-top: 18px;
  border-top: 1px solid var(--rule);
  font-family: 'Courier Prime', monospace;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--rule-text);
}


/* ─────────────────────────────────────────────────────────────────
   PART 5 — RESPONSIVE
   ───────────────────────────────────────────────────────────────── */

@media (max-width: 600px) {
  .hub-entry-title { font-size: 17px; }
  .hub-entry-sub   { font-size: 15.5px; }
}


/* ─────────────────────────────────────────────────────────────────
   HUB FIGURE ADDITIONS — hub illustration classes
   ───────────────────────────────────────────────────────────────── */


/* ─────────────────────────────────────────────────────────────────
   HUB FIGURE
   Illustration block displayed between the page header and the
   hub-intro paragraph on every hub page. Illustrations are
   landscape format with white background, engraved line work
   in warm sepia ink. Composition uses full column width.

   HTML structure in hub pages:
     <div class="hub-figure">
       <figure>
         <img src="/wp-content/uploads/[filename].png"
              alt="[alt text]"
              class="hub-figure-img"
              loading="lazy">
         <figcaption class="hub-figure-caption">[caption]</figcaption>
       </figure>
     </div>
   ───────────────────────────────────────────────────────────────── */

.hub-figure {
  margin: 0 0 48px 0;
  width: 100%;
}

.hub-figure figure {
  margin: 0;
  padding: 0;
  display: block;
  width: 100%;
}

.hub-figure-img {
  width: 100%;
  height: auto;
  display: block;
}

.hub-figure-caption {
  font-family: 'Courier Prime', monospace;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rule-text);
  margin-top: 10px;
  line-height: 1.5;
  display: block;
  text-align: center;
}

@media (max-width: 600px) {
  .hub-figure { margin-bottom: 32px; }
}


/* ─────────────────────────────────────────────────────────────────
   END OF hub.css ADDITIONS
   J.P. Hemp Company · July 2026
   ───────────────────────────────────────────────────────────────── */