/*
Theme Name:   Divi Child for HDX Marketing
Theme URI:    https://hdxmarketing.com
Description:  Child theme of Divi 5 for hdxmarketing.com. All custom CSS, templates, and PHP belong here so Divi can be updated safely. Tested against Divi 5.9.0.
Author:       HDX Marketing
Author URI:   https://hdxmarketing.com
Template:     Divi
Version:      1.2.0
License:      GNU General Public License v2 or later
License URI:  https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  hdx-divi-child
*/

/* ==========================================================================
   HDX Marketing - design system
   Palette taken from the brand mark: deep hull navy with brass hardware.
   Type: Archivo (display) / IBM Plex Sans (body) / IBM Plex Mono (figures).
   Divi 5 loads this file automatically - do not @import or re-enqueue it.
   ========================================================================== */

:root {
  --ink:        #001830;
  --ink-soft:   #0E2942;
  --ink-mute:   #52708A;
  --brass:      #B4863C;
  --brass-lift: #D8A860;
  --paper:      #F2F5F7;
  --card:       #FFFFFF;
  --rule:       #D5DEE4;
  --rule-soft:  #E7EDF1;

  --font-display: 'Archivo', system-ui, sans-serif;
  --font-body:    'IBM Plex Sans', system-ui, sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, monospace;

  --step-0: clamp(1.02rem, 0.99rem + 0.14vw, 1.12rem);
  --step-1: clamp(1.18rem, 1.10rem + 0.32vw, 1.38rem);
  --step-2: clamp(1.45rem, 1.28rem + 0.72vw, 2.00rem);
  --step-3: clamp(2.00rem, 1.55rem + 2.10vw, 3.30rem);

  --gap:   clamp(1.6rem, 1.2rem + 1.4vw, 2.6rem);
  --bleed: clamp(1.15rem, 0.7rem + 2.2vw, 2.5rem);
}

/* ---------- Page frame ---------- */

body, #page-container { background: var(--paper); }

body {
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.66;
  color: var(--ink-soft);
  -webkit-font-smoothing: antialiased;
}

body:not(.et_pb_pagebuilder_layout) #main-content .container {
  width: min(100% - (var(--bleed) * 2), 1180px);
  margin-inline: auto;
  padding-inline: 0;
}

#left-area { width: 100%; padding-right: 0; padding-bottom: 0; }
#sidebar { display: none; }

body:not(.et_pb_pagebuilder_layout) #main-content article {
  background: var(--card);
  border: 1px solid var(--rule-soft);
  padding: clamp(1.5rem, 1rem + 3.2vw, 4.5rem);
  margin-block: clamp(1.5rem, 1rem + 2vw, 3.25rem);
  box-shadow: 0 1px 2px rgba(0,24,48,.04), 0 14px 34px -20px rgba(0,24,48,.20);
}

/* ---------- Masthead ---------- */

.entry-title, h1.entry-title {
  font-family: var(--font-display);
  font-size: var(--step-3);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -.022em;
  color: var(--ink);
  margin: 0 0 1.4rem;
  max-width: 20ch;
  text-wrap: balance;
}

/* Brass waterline - the single piece of ornament on the page */
.entry-title::after {
  content: "";
  display: block;
  width: 3.5rem;
  height: 3px;
  margin-top: clamp(1rem, .8rem + .6vw, 1.5rem);
  background: linear-gradient(90deg, var(--brass) 0%, var(--brass-lift) 100%);
}

/* ---------- Reading column ---------- */

body:not(.et_pb_pagebuilder_layout) .entry-content { max-width: 68ch; }

.entry-content > p { margin: 0 0 1.15em; }

.entry-content > p:first-of-type {
  font-size: var(--step-1);
  line-height: 1.52;
  color: var(--ink);
  margin-bottom: 1.5em;
}

.entry-content h2 {
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 700;
  line-height: 1.16;
  letter-spacing: -.014em;
  color: var(--ink);
  margin: calc(var(--gap) * 1.2) 0 .7em;
  padding-top: calc(var(--gap) * .55);
  border-top: 1px solid var(--rule);
  max-width: 24ch;
  text-wrap: balance;
}

.entry-content h3 {
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 600;
  line-height: 1.28;
  color: var(--ink);
  margin: 2em 0 .45em;
}

.entry-content strong { font-weight: 600; color: var(--ink); }

/* ---------- Lists ---------- */

.entry-content ul, .entry-content ol {
  max-width: 68ch;
  margin: 0 0 1.4em;
  padding-left: 0;
  list-style: none;
}

.entry-content ul > li,
.entry-content ol > li {
  position: relative;
  padding-left: 1.6rem;
  margin-bottom: .6em;
}

.entry-content ul > li::before {
  content: "";
  position: absolute;
  left: .1rem;
  top: .72em;
  width: .45rem;
  height: .45rem;
  background: var(--brass);
}

.entry-content ol { counter-reset: hdx-step; }

.entry-content ol > li { padding-left: 2.4rem; }

.entry-content ol > li::before {
  counter-increment: hdx-step;
  content: counter(hdx-step, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: .18em;
  font-family: var(--font-mono);
  font-size: .8em;
  font-weight: 500;
  color: var(--brass);
}