/* =========================================================
   GLOBAL DESIGN SYSTEM – Base (no heading sizes here)
   + Global section spacing (top/bottom 100px)
   ========================================================= */

/* ---------- CSS Variables ---------- */
:root{
  /* Brand colors */
  --color-primary: #e67e22;
  --color-secondary: #34495e;
  --color-heading: #34495e;
  --color-body: #2c3e50;
  --color-neutral: #ecf0f1;
  --color-neutral-200: #e6ebee;

  /* Fonts */
  --font-heading: "Montserrat Variable", "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-body: "Open Sans Variable", "Open Sans", system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Rhythm */
  --lh-body: 1.6;
  --lh-heading: 1.2;

  /* Spacing */
  --space-xxs: 0.25rem;
  --space-xs:  0.5rem;
  --space-sm:  0.75rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2rem;

  /* Accent heading layout */
  --accent-border: 6px;
  --accent-padding-x: 20px;
  --accent-padding-y: 6px;

  /* Global section spacing */
  --section-padding-y: 100px;
}

/* ---------- Base ---------- */
html{ font-size: 16px; }
body{
  font-family: var(--font-body);
  color: var(--color-body);
  background-color: var(--color-neutral);
  line-height: var(--lh-body);
  font-size: clamp(1rem, 2.5vw, 1.125rem);
  margin: 0;
}

/* Links */
a, a:link, a:visited{ color: inherit; text-decoration: none; }
a:hover, a:focus{ color: var(--color-primary); text-decoration: none; transition: color .2s ease; }

/* Utilities */
.text-sm{ font-size: clamp(0.875rem, 2vw, 1rem); }
.text-lg{ font-size: clamp(1.125rem, 3vw, 1.25rem); }

/* ---------- Headings ---------- */
h1, h2, h3, h4, h5, h6{
  font-family: var(--font-heading);
  color: var(--color-heading);
  line-height: var(--lh-heading);
  font-weight: 600;
  margin: 0 0 var(--space-md);
  padding-top: 20px;
  padding-bottom: 20px;
}

/* Divi Text Module safety */
.et_pb_text h1,
.et_pb_text h2,
.et_pb_text h3,
.et_pb_text h4,
.et_pb_text h5,
.et_pb_text h6{
  margin: 0 0 var(--space-md);
  line-height: var(--lh-heading);
}

/* ---------- Accent Heading ---------- */
.heading-accent{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  border-left: var(--accent-border) solid var(--color-primary);
  padding: var(--accent-padding-y) 0 var(--accent-padding-y) var(--accent-padding-x);
  color: var(--color-heading);
  font-family: var(--font-heading);
  font-weight: 600;
  line-height: var(--lh-heading);
  margin: 0;
  box-sizing: border-box;
}
.heading-accent h1,
.heading-accent h2,
.heading-accent h3,
.heading-accent h4,
.heading-accent h5,
.heading-accent h6{
  margin: 0;
  line-height: var(--lh-heading);
  padding: 0;
  display: inline-block;
  vertical-align: middle;
}

/* ---------- Divi Fullwidth Menu tweaks ---------- */
.et_pb_fullwidth_menu .fullwidth-menu nav ul li > a{ color: inherit; }
.et_pb_fullwidth_menu .fullwidth_menu .fullwidth-menu nav ul li > a:hover,
.et_pb_fullwidth_menu .fullwidth_menu .fullwidth-menu nav ul li > a:focus{
  color: var(--color-primary);
}
.et_pb_fullwidth_menu .fullwidth-menu nav ul.sub-menu li a{ background-color: #fff; }
.et_pb_fullwidth_menu .fullwidth-menu nav ul.sub-menu li a:hover,
.et_pb_fullwidth_menu .fullwidth-menu nav ul.sub-menu li a:focus{
  background-color: var(--color-neutral-200);
  color: var(--color-primary);
  transition: background-color .2s ease, color .2s ease;
}
.et_pb_fullwidth_menu .fullwidth-menu nav ul.sub-menu{
  border: 1px solid var(--color-neutral-200);
}

/* ---------- Global section vertical spacing (can be overridden in Divi GUI) ---------- */
.et_pb_section {
  padding-top: var(--section-padding-y);
  padding-bottom: var(--section-padding-y);
}

/* Don't apply to fullwidth sections */
.et_pb_section.et_pb_fullwidth_section {
  padding-top: 0;
  padding-bottom: 0;
}

/* ---------- Responsive spacing ---------- */
@media (max-width: 1024px){
  :root{
    --accent-padding-x: 16px;
    --accent-border: 5px;
    --section-padding-y: 80px;
  }
  h1, h2, h3, h4, h5, h6{ padding-top: 16px; padding-bottom: 16px; }
}
@media (max-width: 768px){
  :root{
    --accent-padding-x: 14px;
    --accent-padding-y: 5px;
    --accent-border: 4px;
    --section-padding-y: 60px;
  }
  h1, h2, h3, h4, h5, h6{ padding-top: 12px; padding-bottom: 12px; }
}
@media (max-width: 480px){
  :root{
    --accent-padding-x: 12px;
    --accent-padding-y: 4px;
    --section-padding-y: 40px;
  }
  h1, h2, h3, h4, h5, h6{ padding-top: 10px; padding-bottom: 10px; }
}