/**
 * Kraftsmen Portfolio — styles for module-rendered blocks (sidebar spec,
 * scope lists, CTA, transform pair). Sections are laid out by Divi; this
 * file only styles the HTML emitted from our shortcodes.
 *
 * Palette (from homepage):
 *   --kp-navy:      #0C2139
 *   --kp-navy-2:    #0F4F8C
 *   --kp-blue:      #02b2e3
 *   --kp-blue-hover:#008FD5
 *   --kp-border:    #D5DEE8
 *   --kp-muted:     #556A82
 */

:root {
  /* Brand palette */
  --kp-navy:       #0C2139;
  --kp-navy-2:     #0F4F8C;
  --kp-blue:       #02b2e3;
  --kp-blue-hover: #008FD5;
  --kp-border:     #D5DEE8;
  --kp-muted:      #556A82;
  --kp-panel-bg:   #F4F7FB;

  /* Kraftsmen rhythm tokens — use these for all vertical spacing inside
   * a .kp-section so the cadence stays consistent across every
   * component. rem-based so gaps scale if the site's root font-size
   * changes; ratios between tokens stay the same.
   *
   *   H2 → next element          : --kp-gap-h2       ~10px (snug hug)
   *   Distinct block → next      : --kp-gap          ~16px (about one line
   *                                                         of body text)
   *   Linked blocks              : --kp-gap-tight    ~2px  (bold lead-in
   *                                                         + list read as
   *                                                         one unit)
   *   Section → next section     : --kp-gap-section  ~48px (3× the
   *                                                         internal gap;
   *                                                         on this site
   *                                                         set at the
   *                                                         Divi text
   *                                                         module level
   *                                                         to 50px)
   */
  --kp-gap-h2:      0.6rem;
  --kp-gap:         1rem;
  --kp-gap-tight:   0.1rem;
  --kp-gap-section: 3rem;
}

/* Hero copy sits in the left dark-tinted zone of the gradient. Capping its
 * width keeps long titles from wrapping into the gradient's transparent
 * right side where the image shows through. */
.kp-hero__copy {
  max-width: 720px;
}

.kp-hero__meta,
.kp-hero__meta .kp-tax,
.kp-hero__meta .kp-hero__type,
.kp-hero__meta .kp-hero__region {
  color: rgba(255, 255, 255, 0.75) !important;
}
.kp-hero__meta {
  display: block;
  margin: 0.4em 0 1.2em;
  font-family: 'DM Sans', Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.kp-hero__sep {
  display: inline-block;
  margin: 0 0.5em;
  color: rgba(255, 255, 255, 0.4) !important;
}
.kp-hero__tagline {
  color: #ffffff !important;
}

/* Body H2 — matches hero H1 family/weight, sized down and in the brand
 * dark navy so section headings carry real hierarchy on the white body.
 * Scoped to .kp-body (the portfolio body section's module_class) so we
 * don't touch H2s rendered by global header/footer or other sections. */
.kp-body h2 {
  font-family: 'DM Sans', Helvetica, Arial, sans-serif !important;
  font-weight: 700 !important;
  font-size: 36px !important;
  line-height: 1.2 !important;
  letter-spacing: -0.5px !important;
  color: var(--kp-navy) !important;
  margin: 0.6em 0 0.35em !important;
}

/* Section rhythm — tight inside a .kp-section; gap to next section is
 * handled by the Divi text module's custom_margin bottom (50px in the
 * TB template). Divi's own h2/p/ul styles are specific enough that we
 * need the .kp-body prefix + !important on margins that fight its
 * defaults — otherwise Divi's ~1em paragraph bottom margin re-appears
 * and blows the intended rhythm apart.
 *
 * Structure contract from the [kraftsmen_purpose] shortcode:
 *   <section class="kp-section kp-section--purpose">
 *     <h2>Purpose</h2>
 *     <p class="kp-lead">intro…</p>
 *     <p class="kp-lead-in">The objective was to:</p>
 *     <ul class="kp-list"><li>…</li>…</ul>
 *     <p class="kp-closer">closer…</p>
 *   </section>
 */
.kp-body .kp-section { margin: 0 !important; padding: 0 !important; }
/* Divi adds padding-bottom ~17px to every <p> and ~10px to <h2> via its
 * global rules — fighting our tight margin control. Zero all padding
 * on direct section children so margins are the only vertical spacing. */
.kp-body .kp-section > * {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
.kp-body .kp-section > *:first-child { margin-top: 0 !important; }
.kp-body .kp-section > *:last-child  { margin-bottom: 0 !important; }

/* Internal section rhythm — all spacing references the rhythm tokens
 * declared at :root, so the cadence stays proportional if any single
 * value is retuned. See the comment block up top for the mental model. */
.kp-body .kp-section > h2 {
  margin-top: 0 !important;
  margin-bottom: var(--kp-gap-h2) !important;
}
.kp-body .kp-section p,
.kp-body .kp-section .kp-lead,
.kp-body .kp-section .kp-para,
.kp-body .kp-section .kp-strategy-pair {
  margin: 0 0 var(--kp-gap) !important;
  line-height: 1.55 !important;
}
.kp-body .kp-section .kp-lead {
  font-size: 17px !important;
}
.kp-body .kp-section .kp-strategy-pair {
  line-height: 1.5 !important;
}
.kp-body .kp-section .kp-lead-in {
  font-weight: 700 !important;
  margin: 0 0 var(--kp-gap-tight) !important;
}
.kp-body .kp-section .kp-list {
  list-style: disc !important;
  padding-left: 1.4em !important;
  margin: 0 0 var(--kp-gap) 10px !important; /* 10px nudge right for visual indent */
  line-height: 1.55 !important;
}
.kp-body .kp-section .kp-list li {
  margin: 0 0 0.15em !important;
}
.kp-body .kp-section .kp-list li:last-child {
  margin-bottom: 0 !important;
}
.kp-body .kp-section .kp-closer {
  margin: var(--kp-gap) 0 0 !important;
}

/* Brand accent on bullet markers — the cyan picks up the logo's bright
 * blue and breaks the page out of all-navy monotony. ::marker is well
 * supported in modern browsers; the custom bullet still degrades
 * gracefully to the default disc if ::marker isn't honoured. */
.kp-list li::marker {
  color: var(--kp-blue);
  font-size: 1.05em;
}

.kp-body .kp-section .kp-scope__title {
  font-family: 'DM Sans', Helvetica, Arial, sans-serif !important;
  color: var(--kp-navy) !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  margin: 1.5em 0 0 !important; /* gap above (between scope-groups); zero
                                   below so the H3 hugs its bullet list */
  line-height: 1.25 !important;
}
.kp-body .kp-section--scope .kp-scope-group:first-child .kp-scope__title {
  margin-top: 0 !important; /* first scope group sits tight to section H2 */
}

/* Spec block — vertical stack of per-section cards. Each card has a solid
 * navy header and a zebra-striped body of rows. Makes each category
 * (Maintenance Type / Property Type / Service Region / Activities /
 * Trades / Certifications) individually scannable instead of blending
 * into one long grey panel. */
.kp-spec-block {
  display: flex;
  flex-direction: column;
  gap: 18px;
  font-family: 'Open Sans', Helvetica, Arial, sans-serif;
  color: var(--kp-navy);
}

.kp-spec-card {
  background: #ffffff;
  border: 1px solid var(--kp-border);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(12, 33, 57, 0.05);
}

.kp-spec-card__header {
  background: var(--kp-navy-2);
  color: #ffffff;
  font-family: 'DM Sans', Helvetica, Arial, sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 12px 20px;
  line-height: 1.3;
}

.kp-spec-card__list,
.kp-spec-block .kp-spec-card__list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
.kp-spec-card__list .kp-spec-card__row {
  list-style: none !important;
}
.kp-spec-card__list .kp-spec-card__row::marker {
  content: none !important;
}

.kp-spec-card__row {
  padding: 11px 20px;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.45;
  color: var(--kp-navy);
  border-bottom: 1px solid #EEF2F7;
}
.kp-spec-card__row:last-child { border-bottom: 0; }

/* Project Duration — labelled pills. Two chips sit side-by-side on desktop
 * (Contract · Timeframe), wrap on narrow viewports. The label is a small
 * uppercase kicker above the value so the pill reads as a key/value pair
 * rather than a single word. */
.kp-duration {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0.4em 0 1.25em;
}
.kp-duration__pill {
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 18px;
  background: var(--kp-panel-bg);
  border: 1px solid var(--kp-border);
  border-radius: 999px;
  min-width: 160px;
}
.kp-duration__label {
  font-family: 'DM Sans', Helvetica, Arial, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--kp-navy-2);
}
.kp-duration__value {
  font-family: 'DM Sans', Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: var(--kp-navy);
  line-height: 1.3;
}

.kp-cta {
  text-align: center;
  color: #fff;
}
.kp-cta__heading {
  font-family: 'DM Sans', Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-size: 40px;
  line-height: 1.15;
  color: #fff !important;
  margin: 0 0 0.4em;
  letter-spacing: -0.5px;
}
.kp-cta__body,
.kp-cta__partner {
  font-family: 'Open Sans', Helvetica, Arial, sans-serif;
  font-size: 18px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.9);
  margin: 0 auto 1em;
  max-width: 780px;
}
.kp-cta__btnwrap { margin: 1.5em 0 0; }
.kp-cta__btn {
  display: inline-block;
  background: var(--kp-blue);
  color: #fff !important;
  font-family: 'DM Sans', Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-size: 16px;
  text-transform: uppercase;
  text-decoration: none;
  padding: 16px 32px;
  border-radius: 4px;
  letter-spacing: 0.02em;
  transition: background 150ms ease;
}
.kp-cta__btn:hover { background: var(--kp-blue-hover); color: #fff !important; }

@media (max-width: 980px) {
  .kp-cta__heading { font-size: 30px; }
  .kp-spec-block { padding: 22px; }
}