/* ================================================
   EEIC – Compat layer for .container/.page-content
   Extends existing rules to raw Gutenberg markup
   ================================================= */

/* Scope primary text styles to .container/.page-content too */
.container.container-xxl,
.page-content .container {
  color: var(--eeic-text) !important;
  font-size: clamp(16px, 1.05vw + 12px, 18px) !important;
  line-height: 1.7 !important;
}

/* Ensure children don't stretch edge-to-edge */
.container.container-xxl>*,
.page-content .container>* {
  max-width: var(--eeic-max) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Headings (Gutenberg outputs .wp-block-heading) */
.container.container-xxl :where(h1, h2, h3, h4, h5).wp-block-heading,
.page-content .container :where(h1, h2, h3, h4, h5).wp-block-heading {
  line-height: 1.25 !important;
  letter-spacing: .2px !important;
  margin-block: clamp(1.25rem, 1.5vw, 2rem) .75rem !important;
  color: var(--eeic-text) !important;
  text-wrap: balance !important;
}

/* H1 */
.container.container-xxl h1.wp-block-heading,
.page-content .container h1.wp-block-heading {
  font-size: clamp(34px, 3.2vw + 12px, 52px) !important;
}

/* H2 (keep brand bar) */
.container.container-xxl h2.wp-block-heading,
.page-content .container h2.wp-block-heading {
  font-size: clamp(26px, 2vw + 10px, 36px) !important;
  border-left: 6px solid var(--eeic-brand) !important;
  padding-left: 14px !important;
}

/* H3–H5 */
.container.container-xxl h3.wp-block-heading,
.page-content .container h3.wp-block-heading {
  font-size: clamp(22px, 1.3vw + 10px, 28px) !important;
  color: color-mix(in oklab, var(--eeic-text) 85%, var(--eeic-brand)) !important;
}

.container.container-xxl h4.wp-block-heading,
.page-content .container h4.wp-block-heading {
  font-size: clamp(19px, 1vw + 10px, 24px) !important;
  font-weight: 600 !important;
}

.container.container-xxl h5.wp-block-heading,
.page-content .container h5.wp-block-heading {
  font-size: clamp(17px, .8vw + 10px, 20px) !important;
  font-weight: 600 !important;
}

/* Lead/kicker directly under H1 */
.container.container-xxl h1.wp-block-heading+h5.wp-block-heading,
.page-content .container h1.wp-block-heading+h5.wp-block-heading {
  color: color-mix(in oklab, var(--eeic-text) 30%, white) !important;
  font-weight: 500 !important;
  margin-top: .5rem !important;
}

/* Body copy + links */
.container.container-xxl p,
.page-content .container p {
  margin-block: .8rem 1rem !important;
  text-wrap: pretty !important;
}

.container.container-xxl a,
.page-content .container a {
  text-decoration: none !important;
  border-bottom: 1px solid transparent !important;
  transition: border-color .15s ease, color .15s ease !important;
}

.container.container-xxl a:hover,
.page-content .container a:hover {
  border-bottom-color: currentColor !important;
}

/* Lists */
.container.container-xxl :where(ul, ol),
.page-content .container :where(ul, ol) {
  padding-left: 1.2rem !important;
  margin-block: 1rem 1.25rem !important;
  display: grid !important;
  gap: .35rem !important;
}

.container.container-xxl li,
.page-content .container li {
  margin-block: .2rem !important;
}

/* Blockquotes */
.container.container-xxl blockquote,
.page-content .container blockquote {
  border-left: 6px solid var(--eeic-accent) !important;
  background: color-mix(in oklab, var(--eeic-accent) 12%, white) !important;
  padding: 1rem 1.25rem !important;
  margin-block: 1.5rem !important;
  font-style: italic !important;
  border-radius: 10px !important;
}

/* Figures & images (matches your Gutenberg markup) */
.container.container-xxl figure,
.page-content .container figure {
  margin-block: 1.5rem !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .06) !important;
}

.container.container-xxl img,
.page-content .container img {
  border-radius: 14px !important;
  height: auto !important;
  max-width: 100% !important;
  display: block !important;
}

.container.container-xxl figcaption,
.page-content .container figcaption {
  font-size: .9em !important;
  color: color-mix(in oklab, var(--eeic-text) 30%, white) !important;
  padding: .6rem .9rem .9rem !important;
}

/* Tables */
.container.container-xxl table,
.page-content .container table {
  width: 100% !important;
  border-collapse: collapse !important;
  margin-block: 1.25rem 1.75rem !important;
  border: 1px solid color-mix(in oklab, var(--eeic-text) 12%, white) !important;
  border-radius: 10px !important;
  overflow: hidden !important;
}

.container.container-xxl th,
.container.container-xxl td,
.page-content .container th,
.page-content .container td {
  padding: .75rem .9rem !important;
  border-bottom: 1px solid color-mix(in oklab, var(--eeic-text) 10%, white) !important;
}

.container.container-xxl thead th,
.page-content .container thead th {
  background: color-mix(in oklab, var(--eeic-accent) 18%, white) !important;
  text-align: left !important;
}

/* Gutenberg buttons inside these containers */
.container.container-xxl .wp-block-button__link,
.page-content .container .wp-block-button__link {
  background: var(--eeic-brand) !important;
  color: #fff !important;
  padding: .75rem 1.1rem !important;
  border-radius: 999px !important;
  font-weight: 600 !important;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .12) !important;
  transition: transform .12s ease, box-shadow .12s ease, opacity .2s ease !important;
}

.container.container-xxl .wp-block-button__link:hover,
.page-content .container .wp-block-button__link:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 14px 28px rgba(0, 0, 0, .16) !important;
}

/* Section title variant (your second snippet) */
.page-content .section-title .title {
  line-height: 1.25 !important;
  letter-spacing: .2px !important;
  color: var(--eeic-text) !important;
  font-size: clamp(34px, 3.2vw + 12px, 52px) !important;
  /* match H1 scale */
  text-wrap: balance !important;
}

/* Mobile tweaks */
@media (max-width: 768px) {

  .container.container-xxl,
  .page-content .container {
    font-size: 16px !important;
  }

  .container.container-xxl h2.wp-block-heading,
  .page-content .container h2.wp-block-heading {
    border-left-width: 4px !important;
    padding-left: 10px !important;
  }

  .container.container-xxl figure,
  .page-content .container figure {
    margin-block: 1rem !important;
  }
}


.container.container-xxl a,
.page-content .container a {
  color: var(--stroke-color);
}