/*
 Theme Name:   J.P. Hemp Company Child
 Theme URI:    https://jphemp.com
 Description:  Child theme for J.P. Hemp Company — Divi parent.
               Loads all Design System v3.1 CSS variables, typography,
               and global overrides. All visual decisions governed by
               JP_Hemp_DesignSystem_v3.html. Do not alter CSS variable
               names or font stack without a Design System governance review.
 Author:       J.P. Hemp Company
 Template:     Divi
 Version:      1.0.0
 Last Updated: March 2026
 Cross-ref:    Design System v3.1 · Charter v3.2 · Architecture v1.4
*/

/* ─────────────────────────────────────────────────────────────────
   PART 1 — CSS CUSTOM PROPERTIES (Design System v3.1 Color Palette)
   ───────────────────────────────────────────────────────────────── */

:root {
  /* Parchment family — backgrounds */
  --parchment:      #f5f0e8;   /* Primary background — all pages */
  --parchment-dark: #ede6d6;   /* Panels, field notes, callout boxes */
  --parchment-mid:  #e8e0ce;   /* Secondary panels, study panel bodies */

  /* Ink family — text */
  --ink:            #2a2318;   /* Primary text — headlines, strong labels */
  --ink-light:      #4a3f30;   /* Body text — all running prose */

  /* Plant tones — navigation, accents */
  --olive:          #5c6340;   /* Navigation links, section labels, tags */
  --olive-light:    #7a8555;   /* Subtitles, hover state for olive elements */
  --charcoal:       #3a3530;   /* H1 headlines, panel cell titles */

  /* Document tones — borders, meta */
  --rule:           #b8a882;   /* All borders, dividers, meta text */
  --accent:         #8b6914;   /* Field note labels, warning markers */

  /* CBG identity — restricted use only */
  --cbg-green:      #3a5220;   /* CBG compound cards, tier badges, CBG hub */
  --cbg-light:      #e8edd8;   /* CBG panel backgrounds */
}


/* ─────────────────────────────────────────────────────────────────
   PART 2 — TYPOGRAPHY (Design System v3.1 Font Stack)
   ───────────────────────────────────────────────────────────────── */

/* Google Fonts import — three fonts, no substitutions */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;1,400;1,500&family=Crimson+Pro:ital,wght@0,300;0,400;0,500;1,300;1,400&family=Courier+Prime:ital,wght@0,400;1,400&display=swap');

/* Global body — Crimson Pro 19px / 1.78 (resolved conflict: NOT 17px/1.6) */
body {
  font-family: 'Crimson Pro', Georgia, 'Times New Roman', serif;
  font-size: 19px;
  line-height: 1.78;
  font-weight: 300;
  color: var(--ink-light);
  background-color: var(--parchment);
}

/* Headlines — Playfair Display */
h1, h2, h3, h4, h5, h6,
.et_pb_module h1,
.et_pb_module h2,
.et_pb_module h3 {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 400;
  color: var(--charcoal);
  line-height: 1.2;
}

/* Monospace labels — Courier Prime */
.et_pb_text .label,
.breadcrumb,
.article-meta,
.page-label,
.hub-section-label,
code,
pre {
  font-family: 'Courier Prime', 'Courier New', monospace;
}

/* Body text in Divi text modules */
.et_pb_text,
.et_pb_text p {
  font-family: 'Crimson Pro', Georgia, serif;
  font-size: 19px;
  line-height: 1.78;
  font-weight: 300;
  color: var(--ink-light);
}

/* Type scale — mirrors Design System Part Four */
h1, .et_pb_slide_title { font-size: clamp(26px, 3.8vw, 48px); }
h2                      { font-size: clamp(20px, 2.6vw, 28px); }
h3                      { font-size: clamp(18px, 2.2vw, 22px); }


/* ─────────────────────────────────────────────────────────────────
   PART 3 — GLOBAL BACKGROUND & NOISE TEXTURE
   ───────────────────────────────────────────────────────────────── */

html,
body,
#page-container,
.et_pb_section,
.et-l--body {
  background-color: var(--parchment);
}

/* Noise texture overlay — applied to body, sits above background */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='400' height='400' filter='url(%23noise)' opacity='0.035'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 0;
}

/* Ensure all page content sits above the texture */
#main-content,
#page-container .et_pb_row,
.et_pb_section > .et_pb_row {
  position: relative;
  z-index: 1;
}


/* ─────────────────────────────────────────────────────────────────
   PART 4 — BUTTONS (Design System v3.1 Part Eleven)
   ───────────────────────────────────────────────────────────────── */

/* Global button — square corners, charcoal background, Courier Prime */
.et_pb_button,
.et_pb_button_0,
a.et_pb_button,
input[type="submit"] {
  font-family: 'Courier Prime', monospace !important;
  font-size: 10.5px !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  background-color: var(--charcoal) !important;
  color: var(--parchment) !important;
  border: 1px solid var(--charcoal) !important;
  border-radius: 0 !important;           /* Square corners — no rounding */
  padding: 12px 28px !important;
  transition: background-color 200ms ease !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

.et_pb_button:hover,
a.et_pb_button:hover,
input[type="submit"]:hover {
  background-color: var(--ink) !important;
  color: var(--parchment) !important;
  border-color: var(--ink) !important;
  box-shadow: none !important;
}

.et_pb_button:active,
a.et_pb_button:active {
  background-color: var(--olive) !important;
  transition: background-color 80ms ease !important;
}

.et_pb_button:focus-visible,
a.et_pb_button:focus-visible {
  outline: 2px solid var(--olive) !important;
  outline-offset: 3px !important;
}


/* ─────────────────────────────────────────────────────────────────
   PART 5 — LINKS
   ───────────────────────────────────────────────────────────────── */

a {
  color: var(--olive);
  text-decoration: underline;
  transition: color 150ms ease;
}

a:hover {
  color: var(--olive-light);
  text-decoration: underline;
}

/* Navigation links — no underline in resting state */
#top-header a,
#main-header a,
.et_pb_menu a,
#et-secondary-nav a,
#et-top-navigation a {
  text-decoration: none;
  transition: color 150ms ease;
}

#top-header a:hover,
#main-header a:hover,
.et_pb_menu a:hover,
#et-secondary-nav a:hover,
#et-top-navigation a:hover {
  color: var(--ink);
  text-decoration: none;
}


/* ─────────────────────────────────────────────────────────────────
   PART 6 — DIVI STRUCTURAL OVERRIDES
   ───────────────────────────────────────────────────────────────── */

/* No section color bands — all sections inherit parchment background */
.et_pb_section {
  background-color: var(--parchment) !important;
}

/* Override any Divi default white backgrounds on rows/columns */
.et_pb_row,
.et_pb_column {
  background-color: transparent !important;
}

/* Remove Divi's default box shadows on modules */
.et_pb_module {
  box-shadow: none !important;
}

/* No hover lift effects on any module */
.et_pb_module:hover {
  transform: none !important;
  box-shadow: none !important;
}

/* Content width — 740px reading column (Design System Part Five) */
.et_pb_row {
  max-width: 740px;
}

/* Wider rows permitted for hub pages and full-width sections */
.et_pb_row.wide-row {
  max-width: 1200px;
}

/* Header — no shrink on scroll */
#main-header.et-fixed-header {
  height: auto !important;
  padding: inherit !important;
}

.et-fixed-header #logo {
  max-height: none !important;
}

/* Remove Divi's default sticky header transformation */
.et_header_style_centered.et-fixed-header #main-header,
.et_header_style_left.et-fixed-header #main-header {
  padding-top: inherit !important;
  padding-bottom: inherit !important;
}


/* ─────────────────────────────────────────────────────────────────
   PART 7 — SCROLL & MOTION OVERRIDES (Design System v3.1 Part Eleven)
   ───────────────────────────────────────────────────────────────── */

/* Disable ALL Divi scroll animations globally */
.et_pb_module.et_animated,
[data-et-multi-view] {
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
  transition: none !important;
}

/* No entrance animations — elements appear immediately */
.et-waypoint,
.et-waypoint.et_pb_animation_top,
.et-waypoint.et_pb_animation_bottom,
.et-waypoint.et_pb_animation_left,
.et-waypoint.et_pb_animation_right,
.et-waypoint.et_pb_animation_fade {
  opacity: 1 !important;
  transform: none !important;
}

/* No image hover overlays */
.et_pb_image .et_pb_image_wrap:hover::after,
.et_overlay {
  display: none !important;
}

/* Smooth scroll for anchor links only */
html {
  scroll-behavior: smooth;
}


/* ─────────────────────────────────────────────────────────────────
   PART 8 — ACCESSIBILITY: REDUCED MOTION
   ───────────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}


/* ─────────────────────────────────────────────────────────────────
   PART 9 — MOBILE RESPONSIVE OVERRIDES
   ───────────────────────────────────────────────────────────────── */

@media (max-width: 767px) {
  body {
    font-size: 17px;
    line-height: 1.72;
  }

  .et_pb_text,
  .et_pb_text p {
    font-size: 17px;
    line-height: 1.72;
  }

  .et_pb_row {
    max-width: 100%;
    padding-left: 24px;
    padding-right: 24px;
  }
}

@media (max-width: 479px) {
  body {
    font-size: 16px;
  }
}


/* ─────────────────────────────────────────────────────────────────
   PART 10 — RESEARCH ARCHIVE ARTICLE CLASSES
   These classes are used in the HTML article files and must be
   available as global styles for any Divi Custom HTML modules.
   ───────────────────────────────────────────────────────────────── */

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

.subtitle {
  font-family: 'Crimson Pro', Georgia, serif;
  font-size: clamp(16px, 2vw, 19px);
  font-weight: 300;
  font-style: italic;
  color: var(--olive-light);
  margin-bottom: 20px;
  line-height: 1.5;
}

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

.breadcrumb {
  font-family: 'Courier Prime', monospace;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--olive);
  margin-bottom: 48px;
}

.breadcrumb a {
  color: var(--olive);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 150ms ease;
}

.breadcrumb a:hover {
  border-bottom-color: var(--olive-light);
}

.breadcrumb span {
  margin: 0 8px;
  color: var(--rule);
}

/*
 END OF CHILD THEME STYLESHEET
 Design System v3.1 — J.P. Hemp Company — March 2026
*/