/* ============================================================
   CORE SITE STYLES
   Global rules, typography, layout, navigation, and utilities
============================================================ */

/* =========================================
   GLOBAL RESET / BACKGROUND
========================================= */

:root {
  --global--color-background: #ffffff;
  --cliengage-nav-bg: #ffffff;
  --global--spacing-vertical: 0px !important;
  --cl-content-max: 1160px;
  --cl-page-gutter: 24px;
}


/* Prevent horizontal layout shifts between pages */
html {
    overflow-y: scroll;
}


html,
body,
#page,
.site,
.site-content,
.site-footer {
  background-color: #ffffff;
}

body {
  margin: 0;
  font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: #222222;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

img {
  max-width: 100%;
  height: auto;
}

/* =========================================
   MONTSERRAT DESIGN SYSTEM TYPOGRAPHY
========================================= */

html,
body,
button,
input,
select,
textarea,
optgroup {
  font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

body,
p,
li,
td,
th,
label,
input,
select,
textarea,
button {
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

/* H1 / Page title */

h1,
.entry-title,
.page-title,
.singular .entry-title {
  margin-top: 0;
  margin-bottom: 30px !important;
  font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  font-size: 3rem !important;
  font-weight: 300 !important;
  line-height: 50px !important;
  letter-spacing: normal;
  text-transform: uppercase;
}

/* H2 / Major section heading */

h2 {
  margin-top: 0;
  margin-bottom: 20px !important;
  font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  font-size: 24px !important;
  font-weight: 700 !important;
  line-height: 32px !important;
  letter-spacing: normal;
}

/* H3 / Subsection heading */

h3 {
  font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  font-size: 20px !important;
  font-weight: 600 !important;
  line-height: 28px !important;
  letter-spacing: normal;
  margin-bottom: 10px !important;
}

/* H4 / Small section or card heading */

h4 {
  font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  line-height: 24px !important;
  letter-spacing: normal;
  margin-bottom: 10px !important;
}

/* H5 and H6 */

h5 {
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
}

h6 {
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
}

/* Teaser / introductory copy */

.teaser,
.is-style-teaser,
.hero-subtitle {
  font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 17px !important;
  font-weight: 400 !important;
  line-height: 28px !important;
}

/* Standard body copy */

p {
  font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 24px !important;
}

/*
 * Paragraph spacing for standard page content.
 * Direct-child selectors prevent these rules from changing
 * paragraph spacing inside Cooter components.
 */

.cl-content-inner > p,
.entry-content > p,
.cl-main-content > p {
  margin-top: 0;
  margin-bottom: 20px;
}

.cl-content-inner > p:last-child,
.entry-content > p:last-child,
.cl-main-content > p:last-child {
  margin-bottom: 0;
}

.cl-content-inner > p:empty,
.entry-content > p:empty,
.cl-main-content > p:empty {
  display: none;
}

/* Preserve bold UI elements while using Montserrat */

strong,
b,
.btn {
  font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}


/* =========================================
   LINKS - GLOBAL STYLING
========================================= */

/* Standard hyperlinks */
a,
a:link,
a:visited {
    color: #1f1f1f;
    text-decoration: underline;
    text-underline-offset: 3px;

    transition: color 0.2s ease;
}

/* Hover, focus, and click */
a:hover,
a:focus,
a:active {
    color: #1f1f1f;
    text-decoration: underline;
}

/* Keyboard accessibility */
a:focus-visible,
button:focus-visible,
.btn:focus-visible {
    outline: 3px solid #2563eb;
    outline-offset: 3px;
}

.cli-report-link {
	padding-left: 25px;
	padding-right: 25px;
}

/* =========================================
   STANDARD CONTENT HYPERLINKS
   Fix black background on right-click
========================================= */

:is(
    .entry-content,
    .cl-content-inner,
    .cl-main-content,
    .cli-flex-content,
    .cli-web-pdf__intro,
    .cli-report-link,
    .cli-web-pdf__chapter-content
) :is(p, li, blockquote, td) a:not(.btn):is(
    :link,
    :visited,
    :hover,
    :focus,
    :active
) {
    color: #1f1f1f !important;
    background: transparent !important;
    box-shadow: none !important;

    text-decoration: underline !important;
    text-underline-offset: 3px;
}

/* =========================================
   GLOBAL CONTENT LIST TYPOGRAPHY & SPACING
========================================= */

.entry-content ul li,
.entry-content ol li,
.cli-flex-content ul li,
.cli-flex-content ol li,
.cl-content-inner ul li,
.cl-content-inner ol li {
    font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    font-size: 16px !important;
    font-weight: 400;
    line-height: 1.65 !important;

    margin-top: 6px !important;
    margin-bottom: 6px !important;
    padding-bottom: 0;
}




/* Keep bold years bold */
.entry-content li strong,
.cli-flex-content li strong,
.cl-content-inner li strong {
    font-family: inherit;
    font-weight: 700;
}

/* Spacing below final bullet */
.entry-content ul li:last-child,
.entry-content ol li:last-child,
.cli-flex-content ul li:last-child,
.cli-flex-content ol li:last-child,
.cl-content-inner ul li:last-child,
.cl-content-inner ol li:last-child {
    margin-bottom: 10px !important;
}


.arrow-link:link {
  color: black;
  font-weight: 700;
  font-size: 16px !important;
  text-decoration: none;
}

.arrow-link:visited {
  color: black;
  text-decoration: none;
}

.arrow-link:hover {
  color: black;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.arrow-link:focus {
  color: #black;
  text-decoration: underline;
  text-underline-offset: 3px;
  outline: 3px solid rgba(37, 99, 235, 0.35);
  outline-offset: 3px;
}

.arrow-link:active {
  color: black;
  text-decoration: underline;
}

/* =========================================
   HEADER / NAV LAYOUT
========================================= */

.site-header,
.primary-navigation,
#masthead,
#site-navigation {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}

.site-branding {
  width: 100%;
}

.primary-navigation > div,
.primary-navigation .menu-primary-container,
.primary-navigation .main-nav,
.primary-navigation .mega-menu-wrap,
.primary-navigation .mega-menu-toggle,
.primary-navigation ul {
  width: 100%;
  max-width: none;
}

/* =========================================
   LAYOUT UTILITIES
========================================= */

/* One shared 1160px content grid */

.container,
.cl-site-container,
.site-header-inner,
.cl-two-col-wrap {
  width: min(
    var(--cl-content-max),
    calc(100% - (var(--cl-page-gutter) * 2))
  );
  max-width: var(--cl-content-max);
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

/* Prevent inner wrappers from creating a second left edge */

.cl-content-inner,
.cl-section-inner,
.entry-content,
.cl-main-content,
.cl-sidebar-inner {
  width: 100%;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
  box-sizing: border-box;
}



/* Page title lines up with all page content */

.singular .entry-header,
.entry-header {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 32px 0;
  border-bottom: none !important;
  box-sizing: border-box;
}

.entry-title {
    width: 100%;
    max-width: 100%;
    margin: 0;
}

/* Full-width background sections keep content on the same grid */

.cl-content-section,
.cl-full-section,
.cl-two-col-section {
  width: 100%;
}

/* Two-column content uses the exact same outer edges */

.cl-two-column-layout {
  display: grid;
  width: 100%;
  grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
  column-gap: 48px;
  align-items: start;
}

@media (max-width: 767px) {
  :root {
    --cl-page-gutter: 18px;
  }

  .singular .entry-header,
  .entry-header {
    padding: 24px 0;
  }
}

/* =========================================
   GENERIC CONTENT SECTIONS
========================================= */

.cl-content-section {
  position: relative;
}

.cl-pad-large {
  padding: 72px 0;
}

.cl-content-inner > *:last-child {
  margin-bottom: 0;
}

.cl-content-section[style*="background-image"] {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* =========================================
   TWO-COLUMN SECTION
========================================= */

.cl-two-col-section {
  padding: 72px 0;
}

.main-column,
.sidebar-column {
  min-width: 0;
}

/* Sidebar styling */

.cl-sidebar-inner > *:last-child {
  margin-bottom: 0;
}

.cl-sidebar-column {
  padding: 28px;
  border-radius: 0px;
  box-sizing: border-box;
}

.cl-sidebar-column h1,
.cl-sidebar-column h2,
.cl-sidebar-column h3,
.cl-sidebar-column h4,
.cl-sidebar-column h5,
.cl-sidebar-column h6 {
  color: #111827;
}

.cl-sidebar-column p,
.cl-sidebar-column li {
  color: #374151;
}

.cl-sidebar-column p:last-child,
.cl-sidebar-column ul:last-child,
.cl-sidebar-column ol:last-child {
  margin-bottom: 0;
}

@media (max-width: 900px) {
  .cl-two-column-layout {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .cl-sidebar-column {
    padding: 22px;
  }
}

/* =========================================
   GRID SYSTEM
========================================= */

.grid {
  display: grid;
  gap: 2rem;
}

.grid-1 {
  grid-template-columns: repeat(1, 1fr);
}

.grid-2 {
  grid-template-columns: repeat(2, 1fr);
}

.grid-3 {
  grid-template-columns: repeat(3, 1fr);
}

.grid-4 {
  grid-template-columns: repeat(4, 1fr);
}

.grid-5 {
  grid-template-columns: repeat(5, 1fr);
}

.grid-6 {
  grid-template-columns: repeat(6, 1fr);
}

.grid-7-3 {
  grid-template-columns: 7fr 3fr;
}

@media (max-width: 1024px) {
  .grid-3,
  .grid-4,
  .grid-5,
  .grid-6 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .grid-2,
  .grid-3,
  .grid-4,
  .grid-5,
  .grid-6,
  .grid-7-3 {
    grid-template-columns: 1fr;
  }
}

/* =========================================
   BUTTONS
========================================= */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 22px;
  border: 1px solid #51545a;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease;
}

/* Keep the original secondary hero styling for older components. */
.hero-btn-secondary {
  color: #ffffff;
  background: #51545a;
  border-color: #51545a;
}

.hero-btn-secondary:hover,
.hero-btn-secondary:focus {
  color: #51545a;
  background: #ffffff;
  border-color: #51545a;
  text-decoration: none;
}

/* Shared WYSIWYG hyperlink button (Gray / Primary / Secondary).
   .btn provides sizing; the variant classes can be used without
   repeating style rules because all three look the same. */
a.btn,
a.btn:link,
a.btn:visited {
  color: #51545a !important;
  background: #ffffff !important;
  border: 1px solid #51545a;
  border-radius: 0;
  text-decoration: none !important;
  box-shadow: none !important;
}

a.btn:hover,
a.btn:focus,
a.btn:active {
  color: #ffffff !important;
  background: #51545a !important;
  border-color: #51545a;
  text-decoration: none !important;
  box-shadow: none !important;
}


/* ============================================================
   ACCENT COLOR BUTTONS
   Reuse .btn for sizing and the existing .accent-* variables.

   Example: <a class="btn accent-blue" href="...">Blue Button</a>

   Normal: --card-accent background
   Hover:  --card-faded background
   Gray / Primary / Secondary stay unchanged unless combined
   with one of these accent classes.
============================================================ */

a.btn:is(
  .accent-blue,
  .accent-purple,
  .accent-red,
  .accent-green,
  .accent-gray,
  .accent-yellow
) {
  color: #1f1f1f !important;
  background-color: var(--card-accent) !important;
  border-color: var(--card-accent) !important;
  text-decoration: none !important;
}

a.btn:is(
  .accent-blue,
  .accent-purple,
  .accent-red,
  .accent-green,
  .accent-gray,
  .accent-yellow
):is(:hover, :focus, :active) {
  color: #1f1f1f !important;
  background-color: var(--card-faded) !important;
  border-color: var(--card-accent) !important;
  text-decoration: none !important;
}


/* =========================================
   CLI SIMPLE FOOTER
========================================= */

.site-footer {
  margin-top: 10px;
  padding: 60px 0 50px;
  background: #ffffff;
  font-size: 14px;
  text-align: center;
}

.cl-footer-main {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 36px 52px 24px;
  box-sizing: border-box;
  color: #1f1f1f;
  text-align: left;
}

.cl-footer-main *,
.cl-footer-main *::before,
.cl-footer-main *::after {
  box-sizing: border-box;
}

.cl-footer-main a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.cl-footer-main a:hover,
.cl-footer-main a:focus {
  text-decoration-thickness: 2px;
}

.cl-footer-top {
  display: grid;
  grid-template-columns: 520px minmax(0, 1fr);
  gap: 74px;
  padding-bottom: 36px;
  text-align: left;
}

.cl-footer-about {
  width: 100%;
  max-width: 480px;
  margin: 0;
  padding: 0;
  justify-self: start;
  text-align: left;
}

.cl-footer-logo-link {
  display: inline-block;
  margin: 0;
  padding: 0;
  text-decoration: none;
}

.cl-footer-logo-link:hover,
.cl-footer-logo-link:focus {
  text-decoration: none;
}

.cl-footer-logo {
  display: block;
  width: 100%;
  max-width: 480px;
  height: auto;
  margin: 0;
}

.cl-footer-description {
  width: 100%;
  max-width: 470px;
  margin: 24px 0 0;
  padding: 0;
  font-size: 15px !important;
  line-height: 1.5;
  text-align: left;
}

.cl-footer-navigation {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));

  gap: 50px;
  width: 100%;
  margin: 24px 0 0;
  padding: 0;
  align-items: start;
  justify-items: start;
  text-align: left;
}

.cl-footer-navigation-column {
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0;
}

.cl-footer-heading {
  margin: 0 0 16px;
  padding: 0;

  font-size: 18px;
  font-weight: 700;
  line-height: 1.2;
  text-align: left;
}

.cl-footer-links {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: left;
}

.cl-footer-links li {
  width: 100%;
  margin: 0;
  padding: 0;
  text-align: left;
}

.cl-footer-links a {
  display: inline;
  font-size: 15px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.cl-footer-bottom {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  width: 100%;
  margin: 0;
  padding-top: 24px;
  border-top: 1px solid #cccccc;
  text-align: left;
}

.cl-footer-information {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  padding: 0;
  text-align: left;
}

.cl-footer-details {
  width: 100%;
  margin: 0 0 8px;
  padding: 0;
  font-size: 14px !important;
  line-height: 1.3;
  text-align: left;
}

.cl-footer-details:last-child {
  margin-bottom: 0;
}

.cl-footer-back-to-top {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 138px;
  min-height: 54px;
  margin: 0;
  padding: 10px 24px;
  border: 1px solid #1f1f1f;
  border-radius: 999px;
  background-color: transparent;
  color: #1f1f1f;
  font-size: 15px;
  line-height: 1.2;
  text-align: center;
  text-decoration: none !important;
  white-space: nowrap;
  transition:
    background-color 0.2s ease,
    color 0.2s ease;
}

.cl-footer-back-to-top:hover,
.cl-footer-back-to-top:focus {
  color: #ffffff;
  background-color: #1f1f1f;
  text-decoration: none !important;
}

@media screen and (max-width: 1100px) {
  .cl-footer-main {
    padding: 32px 30px 24px;
  }

  .cl-footer-top {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .cl-footer-about {
    max-width: 100%;
  }

  .cl-footer-logo {
    max-width: 480px;
  }

  .cl-footer-description {
    max-width: 520px;
  }

  .cl-footer-navigation {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 36px;
    margin-top: 0;
  }
}

@media screen and (max-width: 700px) {
  .cl-footer-main {
    padding: 28px 20px 22px;
  }

  .cl-footer-top {
    gap: 28px;
    padding-bottom: 30px;
  }

  .cl-footer-navigation {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .cl-footer-heading {
    margin-bottom: 12px;
  }

  .cl-footer-links {
    gap: 12px;
  }

  .cl-footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
  }

  .cl-footer-back-to-top {
    align-self: flex-start;
  }
}

/* ============================================================
   COMPONENT STYLES
   Reusable and page-specific sections begin below this line
============================================================ */

/* =========================================
   HERO SECTION
========================================= */

.hero-grid {
  align-items: center;
}

.hero {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
}

.hero-grid > div:last-child {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  height: 100%;
}

.hero-grid > div:last-child img {
  display: block;
  width: 100%;
  max-width: 525px;
  height: auto;
}

.hero-title {
  margin-top: 0;
}

.hero-subtitle {
  width: 100%;
  max-width: none;
  margin: 0 0 30px;
  color: #222222 !important;
}

.hero-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

/* ============================================================
   RESPONSIVE OVERRIDES Hero
============================================================ */

@media (max-width: 767px) {
  .hero-grid {
    grid-template-columns: 1fr;
  }

  .hero-grid > div:last-child {
    justify-content: flex-start;
    margin-top: 32px;
  }

  .hero-grid > div:last-child img {
    max-width: 100%;
  }

  .cl-pad-large {
    padding: 48px 0;
  }
}




/* ============================================================
   CONTENT HERO
   Reusable hero for content_sections background images
============================================================ */

.content-hero {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 520px;
  padding: 60px 30px;
  box-sizing: border-box;
}

.content-hero-overlay {
  width: 100%;
  max-width: 900px;
  padding: 50px 60px;
  background: rgba(255, 255, 255, 0.70);
  box-sizing: border-box;
}

.content-hero-box {
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}

.content-hero-box > *:first-child {
  margin-top: 0;
}

.content-hero-box > *:last-child {
  margin-bottom: 0;
}

.content-hero-box h1 {
  margin-bottom: 24px !important;
}

.content-hero-box p {
  margin-left: auto;
  margin-right: auto;
}

.content-hero-box .btn {
  margin-top: 20px;
}

@media (max-width: 767px) {
  .content-hero {
    min-height: 420px;
    padding: 30px 20px;
  }

  .content-hero-overlay {
    padding: 36px 24px;
  }
}

/* ============================================================
   ACCENT CARDS
============================================================ */

.accent-card {
  --card-accent: #b1e1f1;
  --card-background: #ffffff;

  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  padding: 24px 28px 24px 44px;
  background: var(--card-background);
  border: 1px solid #e5e7eb;
  box-sizing: border-box;
}


/* Vertical accent */
.accent-card::before {
  content: "";
  position: absolute;
  top: 16px;
  bottom: 16px;
  left: 14px;
  width: 7px;
  background: var(--card-accent);
}


/* Card content */
.accent-content {
  display: flex;
  flex-direction: column;
  flex: 1;
}


/* Card title */
.accent-title {
  margin: 0 0 16px;
  padding: 0;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.35;
  color: #51545a;
}


/* Paragraphs */
.accent-content p {
  margin: 0 0 16px;
}


/* Button area */
.accent-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 4px;
}


/* Prevent extra button spacing */
.accent-actions .btn {
  margin: 0;
}


/* ============================================================
   CARD BACKGROUNDS
============================================================ */

/* Plain white card, shared with Flexible Cards and Tiles. */
.accent-white {
  --card-background: #ffffff;
  --card-accent: #ffffff;
  --card-faded: #ffffff;
}


/* Faded color card */
.accent-color {
  --card-background: var(--card-faded, #f6f8f9);
}


/* ============================================================
   CARD COLORS
   Matching color families
============================================================ */


/* BLUE */
.accent-blue {
  --card-accent: #b1e1f1;
  --card-faded: #eff8fd;
}


/* PURPLE */
.accent-purple {
  --card-accent: #dfcde4;
  --card-faded: #fbf5f9;
}


/* RED / PINK */
.accent-red {
  --card-accent: #f8b2b3;
  --card-faded: #fce8ea;
}


/* GREEN */
.accent-green {
  --card-accent: #e1eecb;
  --card-faded: #fcfbee;
}


/* GRAY */
.accent-gray {
  --card-accent: #e0e2e5;
  --card-faded: #f6f8f9;
}


/* YELLOW */
.accent-yellow {
  --card-accent: #f7ffa9;
  --card-faded: #fcfcf5;
}

/* ============================================================
   CARD GRID
============================================================ */

.accent-grid {
  display: grid;
  gap: 28px;
  width: 100%;
}


/* 1 card per row */
.accent-grid-1 {
  grid-template-columns: 1fr;
}


/* 2 cards per row */
.accent-grid-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}


/* 3 cards per row */
.accent-grid-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}


/* 4 cards per row */
.accent-grid-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}


/* ============================================================
   RESPONSIVE
============================================================ */

@media (max-width: 1000px) {

  .accent-grid-3,
  .accent-grid-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

}


@media (max-width: 700px) {

  .accent-grid-1,
  .accent-grid-2,
  .accent-grid-3,
  .accent-grid-4 {
    grid-template-columns: 1fr;
  }

  .accent-card {
    padding: 22px 22px 22px 40px;
  }

  .accent-title {
    font-size: 21px;
  }

}


/* ============================================================
   CLI PILLS
   Reusable site-wide pill/tag component
   Matches the Toolkit template styling
============================================================ */

.cli-pill-list,
.cli-pill-group__items {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
}

.cli-pill-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.cli-pill-group__label {
  margin-right: 2px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
  color: #111827;
}

.cli-pill {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 5px 12px;
  border: 1px solid #d5e6ea;
  border-radius: 999px;
  background: #eef7f8;
  color: #1f4f5b;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.25;
  white-space: nowrap;
}

.cli-pill-group--category .cli-pill {
  border-color: #c7e7ed;
  background: #edf8fa;
  color: #17657a;
}

.cli-pill-group--toolkit .cli-pill {
  border-color: #d8d1ef;
  background: #f3f0fa;
  color: #5a4685;
}

.cli-pill-group--users .cli-pill {
  border-color: #ead6d6;
  background: #fbf1f1;
  color: #7a4747;
}

/* Reusable direct pill colors */

.cli-pill--blue {
  border-color: #c7e7ed;
  background: #edf8fa;
  color: #17657a;
}

.cli-pill--purple {
  border-color: #d8d1ef;
  background: #f3f0fa;
  color: #5a4685;
}

.cli-pill--red {
  border-color: #ead6d6;
  background: #fbf1f1;
  color: #7a4747;
}

.cli-pill--green {
  border-color: #dbe8c8;
  background: #f8faee;
  color: #52633e;
}

.cli-pill--gray {
  border-color: #dfe3e7;
  background: #f6f8f9;
  color: #51545a;
}

.cli-pill--yellow {
  border-color: #ece7a6;
  background: #fcfcf5;
  color: #625f31;
}

/* Page-title pill row */

.toolkit-page-header {
  padding-top: 24px;
  padding-bottom: 24px;
}

.toolkit-page-pills {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 18px;
  margin-bottom: 18px;
}

.toolkit-page-pills .cli-pill-group {
  display: inline-flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 8px;
  margin: 0;
}

.toolkit-page-pills .cli-pill-group__items {
  display: inline-flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 8px;
}

@media (max-width: 768px) {
  .toolkit-page-pills {
    flex-wrap: wrap;
    gap: 10px 16px;
  }

  .toolkit-page-pills .cli-pill-group,
  .toolkit-page-pills .cli-pill-group__items {
    flex-wrap: wrap;
  }
}

@media (max-width: 700px) {
  .cli-pill-group {
    align-items: flex-start;
  }

  .cli-pill-group__label {
    width: 100%;
  }
}

/* ============================================================
   TOOLS TEMPLATE
============================================================ */

.tools-template {
  width: 100%;
}


/* ============================================================
   TOOL INFORMATION
   Best Fit For / Eligibility / Related Resources
============================================================ */

.tools-info-section {
  padding: 32px 0 56px;
}

.tools-info-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.tools-info-card {
  background: #f5f6f7;
  padding: 28px 30px;
  min-width: 0;
}

.tools-info-card__title {
  margin: 0 0 16px;
  padding: 0;
  font-size: 20px !important;
  line-height: 28px !important;
  font-weight: 700 !important;
}

.tools-info-card__content {
  font-size: 16px;
  line-height: 1.6;
}

.tools-info-card__content > *:first-child {
  margin-top: 0;
}

.tools-info-card__content > *:last-child {
  margin-bottom: 0;
}

.tools-best-fit {
  margin: 0;
}


/* ============================================================
   REPEATER CONTENT SECTIONS
============================================================ */

.cl-content-section {
  position: relative;
  width: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.cl-content-section__inner {
  position: relative;
  z-index: 2;
}

.cl-content-section__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(0, 0, 0, 0.45);
}

.cl-content-section--overlay {
  color: #ffffff;
}

.cl-pad-normal {
  padding-top: 32px;
  padding-bottom: 32px;
}

.cl-pad-large {
  padding-top: 64px;
  padding-bottom: 64px;
}


/* ============================================================
   COURSES / WEBINARS
============================================================ */

.tools-training-section {
  padding: 56px 0 72px;
}

.tools-training-title {
  margin: 0 0 28px;
}

.tools-training-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}


/* ============================================================
   TOOLKIT RESOURCE CARDS
   Uses global .accent-* card colors from custom.css
============================================================ */

:is(.toolkits-template, .tools-template) .tools-training-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: 100%;
  padding: 28px 30px 28px 46px;
  color: #111827;

  /* Color comes from the global .accent-* class */
  background-color: var(--card-faded, #f6f8f9) !important;

  border: 1px solid rgba(17, 24, 39, 0.08);
  box-sizing: border-box;
  text-decoration: none !important;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

:is(.toolkits-template, .tools-template) .tools-training-card::before {
  content: "";
  position: absolute;
  top: 16px;
  bottom: 16px;
  left: 14px;
  width: 7px;

  /* Color comes from the global .accent-* class */
  background-color: var(--card-accent, #e0e2e5) !important;
}

/* Explicit support for all global ACF card colors */

:is(.toolkits-template, .tools-template) .tools-training-card.accent-blue,
:is(.toolkits-template, .tools-template) .tools-training-card.accent-purple,
:is(.toolkits-template, .tools-template) .tools-training-card.accent-red,
:is(.toolkits-template, .tools-template) .tools-training-card.accent-green,
:is(.toolkits-template, .tools-template) .tools-training-card.accent-gray,
:is(.toolkits-template, .tools-template) .tools-training-card.accent-yellow {
  background-color: var(--card-faded) !important;
}

:is(.toolkits-template, .tools-template) .tools-training-card.accent-blue::before,
:is(.toolkits-template, .tools-template) .tools-training-card.accent-purple::before,
:is(.toolkits-template, .tools-template) .tools-training-card.accent-red::before,
:is(.toolkits-template, .tools-template) .tools-training-card.accent-green::before,
:is(.toolkits-template, .tools-template) .tools-training-card.accent-gray::before,
:is(.toolkits-template, .tools-template) .tools-training-card.accent-yellow::before {
  background-color: var(--card-accent) !important;
}

:is(.toolkits-template, .tools-template) a.tools-training-card:hover,
:is(.toolkits-template, .tools-template) a.tools-training-card:focus {
  color: #111827;
  text-decoration: none !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(17, 24, 39, 0.10);
}

:is(.toolkits-template, .tools-template) .tools-training-card__inner {
  display: flex;
  flex-direction: column;
  flex: 1;
}

:is(.toolkits-template, .tools-template) .tools-training-card__title {
  margin: 0 0 14px;
  padding: 0;
  color: #111827;
  font-size: 20px !important;
  line-height: 28px !important;
  font-weight: 700 !important;
}

:is(.toolkits-template, .tools-template) .tools-training-card__content {
  flex: 1;
  color: #374151;
  font-size: 16px;
  line-height: 1.6;
}

:is(.toolkits-template, .tools-template) .tools-training-card__content p:first-child {
  margin-top: 0;
}

:is(.toolkits-template, .tools-template) .tools-training-card__content p:last-child {
  margin-bottom: 0;
}

:is(.toolkits-template, .tools-template) .tools-training-card__link {
  display: inline-block;
  margin-top: 20px;
  color: #111827;
  font-weight: 700;
}


/* ============================================================


   RESPONSIVE
============================================================ */

@media (max-width: 900px) {

  .tools-info-grid,
  :is(.toolkits-template, .tools-template) .tools-training-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

}

@media (max-width: 650px) {

  .tools-info-grid,
  :is(.toolkits-template, .tools-template) .tools-training-grid {
    grid-template-columns: 1fr;
  }

  .tools-info-card,
  :is(.toolkits-template, .tools-template) .tools-training-card {
    padding: 24px 24px 24px 42px;
  }

  .cl-pad-large {
    padding-top: 48px;
    padding-bottom: 48px;
  }

}


/* ============================================================
   CLI NEWS + NEWS & UPDATE
   CLEAN BASELINE
============================================================ */

.cli-news,
.cli-news-single {
  --cli-news-blue: #1d64a6;
  --cli-news-blue-dark: #164f84;
  --cli-news-purple: #6f5bd3;
  --cli-news-purple-light: #e1deff;
  --cli-news-text: #1f2937;
  --cli-news-muted: #5f6772;
  --cli-news-border: #d9dee5;
  --cli-news-surface: #ffffff;
  --cli-news-surface-soft: #f7f9fb;
}

/* ============================================================
   CLI NEWS LANDING PAGE
============================================================ */

.cli-news {
  width: 100%;
  color: var(--cli-news-text);
}

.cli-news-inner {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 24px 0 64px;
}

/* Featured carousel */
.cli-news-feature-carousel {
  position: relative;
  width: 100%;
  margin: 0 0 34px;
}

.cli-news-feature-stage {
  position: relative;
  display: grid;
}

.cli-news-feature-slide {
  grid-area: 1 / 1;
  position: relative;
  z-index: 1;
  background: transparent;
  border: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(18px);
  transition:
    opacity 0.55s ease,
    transform 0.55s ease,
    visibility 0.55s ease;
}

.cli-news-feature-slide.is-active {
  z-index: 2;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(0);
}

.cli-news-feature-slide[hidden] {
  display: block !important;
}

.cli-news-feature-link,
.cli-news-feature-link:link,
.cli-news-feature-link:visited,
.cli-news-feature-link:hover,
.cli-news-feature-link:focus,
.cli-news-feature-link:focus-visible,
.cli-news-feature-link:active {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(340px, 0.85fr);
  align-items: center;
  min-height: 320px;
  background: transparent !important;
  color: var(--cli-news-text) !important;
  text-decoration: none;
  box-shadow: none !important;
}

.cli-news-feature-link:focus {
  outline: none;
}

.cli-news-feature-link:focus-visible {
  outline: 3px solid #2563eb;
  outline-offset: 4px;
}

.cli-news-feature-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  padding: 26px 36px 26px 0;
}

.cli-news-feature-eyebrow {
  width: fit-content;
  margin: 0 0 18px;
  color: var(--cli-news-purple);
  font-size: 14px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.cli-news-feature-categories,
.cli-news-card-categories {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 18px;
}

.cli-news-feature-categories {
  margin: 0 0 16px;
}

/* Category accent-line treatment */
.cli-news-category {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 2px 0 2px 12px;
  border: 0;
  border-radius: 0;
  background: transparent !important;
  color: var(--cli-news-text) !important;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.35;
  text-decoration: none;
}

.cli-news-category::before {
  content: "";
  position: absolute;
  top: 1px;
  bottom: 1px;
  left: 0;
  width: 3px;
  background: var(--card-accent, #e0e2e5);
}

.cli-news-feature-title {
  max-width: 100%;
  margin: 0;
  font-size: 40px !important;
  font-weight: 700;
  line-height: 1.2 !important;
  overflow-wrap: break-word;
  word-break: normal;
}

.cli-news-feature-date,
.cli-news-card-date {
  margin: 10px 0 0;
  color: var(--cli-news-muted);
  font-size: 14px;
  font-weight: 600;
}

.cli-news-feature-blurb {
  margin-top: 18px;
  font-size: 16px;
  line-height: 1.6;
}

.cli-news-feature-cta {
  width: fit-content;
  margin-top: 20px;
}

.cli-news-feature-image-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 280px;
  padding: 18px 0 18px 24px;
  overflow: hidden;
  background: transparent;
}

.cli-news-feature-image {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  max-height: 380px;
  object-fit: contain;
}

/* Carousel controls */
/* Filters — no outer box or tinted panel */
.cli-news-controls {
  display: grid;
  grid-template-columns:
    minmax(180px, 0.8fr)
    minmax(180px, 0.8fr)
    minmax(280px, 1.4fr)
    auto;
  gap: 16px;
  align-items: end;
  width: 100%;
  padding: 10px 0 18px;
  margin: 0 0 14px;

  border: 0;
  background: transparent;
}

.cli-news-control {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.cli-news-control label,
.cli-news-per-page label {
  margin: 0;
  font-size: 12px;
  font-weight: 800;
}

.cli-news-control select,
.cli-news-control input[type="search"],
.cli-news-per-page select {
  width: 100%;
  min-height: 44px;
  margin: 0;
  padding: 8px 12px;
  border: 1px solid #b8c0ca;
  border-radius: 0;
  background: #ffffff;
  color: var(--cli-news-text);
  font: inherit;
  font-size: 14px;
}

.cli-news-control-actions {
  display: flex;
  gap: 10px;
  align-items: center;
}

.cli-news-control-actions .btn {
  white-space: nowrap;
}

/* Results toolbar */
.cli-news-results-toolbar {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: center;
  width: 100%;
  margin: 0 0 18px;
}

.cli-news-results-count {
  margin: 0;
  color: var(--cli-news-muted);
  font-size: 14px;
  font-weight: 700;
}

.cli-news-per-page {
  display: flex;
  align-items: center;
  gap: 10px;
}

.cli-news-per-page select {
  width: auto;
  min-width: 76px;
}

/* Cards */
.cli-news-grid {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 24px;
  row-gap: 56px;
}

.cli-news-card {
  display: flex;
  min-width: 0;
  height: 100%;
  background: #ffffff;
  border: 0;
}

.cli-news-card-link,
.cli-news-card-link:link,
.cli-news-card-link:visited,
.cli-news-card-link:hover,
.cli-news-card-link:focus,
.cli-news-card-link:focus-visible,
.cli-news-card-link:active {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #ffffff !important;
  color: var(--cli-news-text) !important;
  text-decoration: none;
  box-shadow: none !important;
}

.cli-news-card-link:focus {
  outline: none;
}

.cli-news-card-link:focus-visible {
  outline: 3px solid #2563eb;
  outline-offset: 3px;
}

.cli-news-card-categories {
  padding: 0 0 12px;
}

.cli-news-card-image-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  overflow: hidden;
  background: #ffffff;
}

.cli-news-card-image {
  display: block;
  width: 100%;
  height: auto;
  max-height: 280px;
  object-fit: contain;
}

.cli-news-card-body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
  padding: 18px 0 0;
}

.cli-news-card-title {
  margin: 0;
  font-size: 22px;
  line-height: 1.25;
}

.cli-news-card-blurb {
  margin-top: 14px;
  margin-bottom: 24px;
  color: #3f4751;
  font-size: 15px;
  line-height: 1.55;
}

.cli-news-card-cta {
  width: fit-content;
  margin-top: auto;
}

.cli-news-empty {
  grid-column: 1 / -1;
  padding: 36px 0;
  text-align: center;
}

.cli-news-pagination {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 34px;
}

.cli-news-page-button {
  min-width: 42px;
  min-height: 42px;
  padding: 7px 12px;
  border: 1px solid var(--cli-news-border);
  background: #ffffff;
  color: var(--cli-news-text);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.cli-news-page-button.is-current {
  border-color: var(--cli-news-purple);
  background: var(--cli-news-purple-light);
}

/* ============================================================
   SINGLE NEWS PAGE
============================================================ */

.cli-news-single {
  width: 100%;
}

.cli-news-single-article {
  width: min(1000px, calc(100% - 40px));
  margin: 0 auto;
  padding: 48px 0 64px;
}

.cli-news-single-header {
  margin: 0 0 32px;
  padding: 0;
  border: 0;
}

.cli-news-single-categories {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 18px;
  margin: 0 0 18px;
}

.cli-news-single-category {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 2px 0 2px 12px;
  color: var(--cli-news-text);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.35;
}

.cli-news-single-category::before {
  content: "";
  position: absolute;
  top: 1px;
  bottom: 1px;
  left: 0;
  width: 3px;
  background: var(--card-accent, #e0e2e5);
}

.cli-news-single-title {
  max-width: 900px;
  margin: 0;
  font-size: clamp(40px, 5vw, 58px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  overflow-wrap: break-word;
}

.cli-news-single-title-rule {
  width: 40px;
  height: 2px;
  margin: 24px 0 18px;
  background: var(--cli-news-blue);
}

.cli-news-single-date {
  margin: 0;
  color: var(--cli-news-muted);
  font-size: 14px;
  font-weight: 500;
}

.cli-news-single-content {
  width: min(760px, 100%);
  max-width: 760px;
  margin: 0;
  padding: 0;
  color: var(--cli-news-text);
}

.cli-news-single-content > :first-child {
  margin-top: 0;
}

.cli-news-single-content img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  margin-left: 0 !important;
  margin-right: auto !important;
}

.cli-news-single-content figure,
.cli-news-single-content .wp-caption,
.cli-news-single-content .alignleft,
.cli-news-single-content .aligncenter,
.cli-news-single-content .alignright {
  max-width: 100%;
  margin-left: 0 !important;
  margin-right: auto !important;
}

@media (prefers-reduced-motion: reduce) {
  .cli-news-feature-slide {
    transition: none;
    transform: none;
  }
}

@media (max-width: 1000px) {
  .cli-news-feature-link {
    grid-template-columns: 1fr;
  }

  .cli-news-feature-image-wrap {
    order: -1;





    min-height: 0;
    padding: 14px 0 18px;
  }

  .cli-news-controls {
    grid-template-columns: 1fr 1fr;
  }

  .cli-news-control-actions {
    grid-column: 1 / -1;
  }

  .cli-news-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .cli-news-feature-content {
    padding: 24px 0;
  }

  .cli-news-feature-title {
    font-size: 30px !important;
    line-height: 1.2 !important;
  }

  .cli-news-controls,
  .cli-news-grid {
    grid-template-columns: 1fr;
  }

  .cli-news-control-actions,
  .cli-news-results-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .cli-news-control-actions .btn {
  white-space: nowrap;
}

.cli-news-per-page {
    width: 100%;
    justify-content: space-between;
  }

  .cli-news-category,
  .cli-news-single-category {
    font-size: 14px;
  }

  .cli-news-single-article {
    width: min(100% - 28px, 1000px);
    padding-top: 32px;
  }

  .cli-news-single-title {
    font-size: 36px;
    line-height: 1.15;
  }

  .cli-news-single-content {
    width: 100%;
    max-width: 100%;
  }
}


/* ============================================================
   SINGLE NEWS: ALIGN WITH CLI ENGAGE LOGO / SITE CONTAINER
============================================================ */

.cli-news-single {
  width: 100%;
  max-width: none;
  margin: 0;
}

/* Match the same 1160px container used by .site-header-inner / .container */
.cli-news-single-article {
  width: min(
    var(--cl-content-max),
    calc(100% - (var(--cl-page-gutter) * 2))
  );
  max-width: var(--cl-content-max);
  margin-left: auto;
  margin-right: auto;
  padding: 48px 0 64px;
  box-sizing: border-box;
}

/* All single-news content starts from the article container's left edge */
.cli-news-single-header,
.cli-news-single-content {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Keep article copy readable while staying anchored to the logo's left edge */
.cli-news-single-content {
  width: min(760px, 100%);
  max-width: 760px;
}

/* Prevent WordPress alignment classes from re-centering inner content */
.cli-news-single-content > *,
.cli-news-single-content .alignleft,
.cli-news-single-content .aligncenter,
.cli-news-single-content .alignright,
.cli-news-single-content .alignwide,
.cli-news-single-content .alignfull {
  margin-left: 0 !important;
}

@media (max-width: 767px) {
  .cli-news-single-article {
    width: min(
      var(--cl-content-max),
      calc(100% - (var(--cl-page-gutter) * 2))
    );
    padding-top: 32px;
  }

  .cli-news-single-content {
    width: 100%;
    max-width: 100%;
  }
}


/* ============================================================
   SINGLE NEWS: USE FULL CONTENT WIDTH
   Keep the left edge aligned with the CLI Engage logo while
   allowing article content to use the full site container width.
============================================================ */

.cli-news-single-content {
  width: 100%;
  max-width: none;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Let WYSIWYG content use the full article width */
.cli-news-single-content > *,
.cli-news-single-content p,
.cli-news-single-content ul,
.cli-news-single-content ol,
.cli-news-single-content blockquote,
.cli-news-single-content h2,
.cli-news-single-content h3,
.cli-news-single-content h4,
.cli-news-single-content figure,
.cli-news-single-content .wp-caption,
.cli-news-single-content .alignwide,
.cli-news-single-content .alignfull {
  width: 100%;
  max-width: none;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Images can expand across the available article width */
.cli-news-single-content img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  margin-left: 0 !important;
  margin-right: 0 !important;
}


/* ============================================================
   SINGLE NEWS: OVERRIDE TWENTY TWENTY-ONE CONTENT WIDTH
   Force direct WYSIWYG children to use the full site container.
============================================================ */

.cli-news-single .cli-news-single-content.entry-content {
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.cli-news-single .cli-news-single-content.entry-content > * {
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Paragraphs and text blocks may use the full available width */
.cli-news-single .cli-news-single-content.entry-content p,
.cli-news-single .cli-news-single-content.entry-content ul,
.cli-news-single .cli-news-single-content.entry-content ol,
.cli-news-single .cli-news-single-content.entry-content blockquote,
.cli-news-single .cli-news-single-content.entry-content h2,
.cli-news-single .cli-news-single-content.entry-content h3,
.cli-news-single .cli-news-single-content.entry-content h4 {
  width: 100% !important;
  max-width: none !important;
}

/* Images and their wrappers can also expand across the article width */
.cli-news-single .cli-news-single-content.entry-content figure,
.cli-news-single .cli-news-single-content.entry-content .wp-caption,
.cli-news-single .cli-news-single-content.entry-content .wp-block-image {
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.cli-news-single .cli-news-single-content.entry-content img {
  display: block;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* ============================================================
   CLI NEWS FEATURE CAROUSEL CONTROLS
   Replace the existing carousel nav / dots / arrow rules with this.
============================================================ */

.cli-news-feature-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 36px;
  padding: 10px 0 0;
  margin: 0;
}

.cli-news-feature-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin: 0;
  padding: 0;
}

.cli-news-feature-dot {
  display: block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #d7dbe0;
  transition:
    background-color 0.2s ease,
    transform 0.2s ease;
}

.cli-news-feature-dot.is-active {
  width: 7px;
  height: 7px;

  background: var(--cli-news-purple);
  transform: scale(1.15);
}

.cli-news-feature-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  min-width: 28px;
  min-height: 28px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--cli-news-text);
  font-family: inherit;
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  box-shadow: none;
}

.cli-news-feature-arrow:hover,
.cli-news-feature-arrow:focus {
  border: 0;
  background: transparent;
  color: var(--cli-news-purple);
}

.cli-news-feature-arrow:focus-visible {
  outline: 2px solid var(--cli-news-purple);
  outline-offset: 2px;
}

@media (max-width: 640px) {
  .cli-news-feature-nav {
    gap: 10px;
    padding-top: 8px;
  }

  .cli-news-feature-arrow {
    width: 30px;
    height: 30px;
    min-width: 30px;
    min-height: 30px;
  }
}


/* More separation between News card rows */
@media (max-width: 1000px) {
  .cli-news-grid {
    row-gap: 48px;
  }
}

@media (max-width: 640px) {
  .cli-news-grid {
    row-gap: 40px;
  }
}


/* Fix Image and Button Issues with Iphone and mobile extending pass viewport */
@media (max-width: 768px) {

  #content img,
  .site-content img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
  }

}

/* BANGS FLEXY TEMPLY */

/* ============================================================
   FLEXIBLE PAGE
============================================================ */

.cli-flex-page {
	width: 100%;
	overflow: hidden;
}


/* ============================================================
   SECTIONS
============================================================ */

.cli-flex-section {
	position: relative;
	width: 100%;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}


/* Section Padding */

.cli-flex-pad-normal {
	padding: clamp(2rem, 4vw, 4rem) 0;
}

.cli-flex-pad-small {
	padding: 16px 0;
}

.cli-flex-pad-large {
	padding: clamp(4rem, 7vw, 7rem) 0;
}

.cli-flex-pad-none {
	padding: 0;
}


/* Section Inner Container */

.cli-flex-inner {
	position: relative;
	z-index: 2;
	width: min(
		var(--cl-content-max),
		calc(100% - (var(--cl-page-gutter) * 2))
	);
	max-width: var(--cl-content-max);
	margin-left: auto;
	margin-right: auto;
	box-sizing: border-box;
}


/* Background Image Overlay */

.cli-flex-has-overlay::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: rgba(255, 255, 255, 0.45);
}


/* Content Margin Cleanup */

.cli-flex-content > :first-child,
.cli-flex-card-content > :first-child {
	margin-top: 0;
}

.cli-flex-content > :last-child,
.cli-flex-card-content > :last-child {
	margin-bottom: 0;
}


/* Optional introduction shared across Flexible Content layouts. */
.cli-flex-page .cli-flex-section-intro {
	width: 100%;
	margin: 0 0 28px;
}

.cli-flex-page .cli-flex-section-intro > :first-child {
	margin-top: 0;
}

.cli-flex-page .cli-flex-section-intro > :last-child {
	margin-bottom: 0;
}

/* ============================================================
   FLEXIBLE CONTENT — WYSIWYG PARAGRAPH SPACING
   Direct-child selectors leave Cooter/FacetWP shortcode UI untouched.
============================================================ */

.cli-flex-page .cli-flex-content > p,
.cli-flex-page .cli-flex-card-content > p,
.cli-flex-page .cli-acf-hero-copy > p {
    margin-top: 0;
    margin-bottom: 1.25em;
}

.cli-flex-page .cli-flex-content > p:last-child,
.cli-flex-page .cli-flex-card-content > p:last-child,
.cli-flex-page .cli-acf-hero-copy > p:last-child {
    margin-bottom: 0;
}

/* ============================================================
   SPLIT HERO
============================================================ */

.cli-flex-split {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(2rem, 5vw, 5rem);
	align-items: center;
}


.cli-flex-split-image img {
	display: block;
	width: 100%;
	height: auto;
}


/* Image Left */

.cli-flex-image-left .cli-flex-split-image {
	order: 1;
}

.cli-flex-image-left .cli-flex-split-content {
	order: 2;
}


/* Image Right */

.cli-flex-image-right .cli-flex-split-content {
	order: 1;
}

.cli-flex-image-right .cli-flex-split-image {
	order: 2;
}


/* ============================================================
   CENTERED HERO
============================================================ */

.cli-flex-centered-hero {
	min-height: clamp(360px, 48vw, 620px);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}


.cli-flex-centered-box {
	width: min(850px, 100%);
	margin: 0 auto;
	padding: clamp(2rem, 4vw, 3.5rem);
	text-align: center;
}


/* ============================================================
   CARDS
   Colors come from existing accent-* CSS.
============================================================ */

.cli-flex-card-grid {
	display: grid;
	grid-template-columns: repeat(var(--cli-grid-columns, 3), minmax(0, 1fr));
	gap: 22px;
}


/* ACF column selection, shared by Cards and Tiles.
   Cards support 1-5 columns; Tiles currently support 3-5. */
.cli-flex-page .cli-flex-cards-columns-1 {
	--cli-grid-columns: 1;
}

.cli-flex-page .cli-flex-cards-columns-2 {
	--cli-grid-columns: 2;
}

.cli-flex-page .cli-flex-cards-columns-3,
.cli-flex-page .cli-flex-tiles-columns-3 {
	--cli-grid-columns: 3;
}

.cli-flex-page .cli-flex-cards-columns-4,
.cli-flex-page .cli-flex-tiles-columns-4 {
	--cli-grid-columns: 4;
}

.cli-flex-page .cli-flex-cards-columns-5,
.cli-flex-page .cli-flex-tiles-columns-5 {
	--cli-grid-columns: 5;
}

/* A single card always occupies the full row. */
.cli-flex-page .cli-flex-card-grid[data-card-count="1"] {
	grid-template-columns: minmax(0, 1fr);
}

/* Card */

.cli-flex-card {
	position: relative;
	padding: 28px;
	min-width: 0;
	background: var(--card-faded);
}


/* Optional Cards Section Title */

.cli-flex-cards-title {
	margin: 0 0 24px;
}


/* Card Headings */

.cli-flex-card h2,
.cli-flex-card h3 {
	margin: 0 0 16px;
}


/* Card Content — match standard site typography */

.cli-flex-card-content,
.cli-flex-card-content p,
.cli-flex-card-content ul,
.cli-flex-card-content ol,
.cli-flex-card-content li {
    font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 16px !important;
    font-weight: 400;
    line-height: 24px !important;
}

.cli-flex-card-content p:first-child {
	margin-top: 0;
}


/* Optional Accent Line */

.cli-flex-card-has-accent {
	padding-left: 42px;
}


.cli-flex-card-accent {
	position: absolute;
	top: 16px;
	bottom: 16px;
	left: 14px;
	width: 6px;
	background: var(--card-accent);
}


/* ============================================================
   FLEXIBLE CONTENT — SPLIT HERO MOBILE
============================================================ */

@media (max-width: 768px) {


	/* Stack Split Hero */

	.cli-flex-split {
		grid-template-columns: 1fr;
	}


	.cli-flex-split-content {
		order: 1 !important;
	}

	.cli-flex-split-image {
		order: 2 !important;
	}


	/* Responsive Images */

	.cli-flex-section img {
		max-width: 100%;
		height: auto;
	}

}


/* Full-width decorative footer divider */
.cl-footer-decorative-line {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    line-height: 0;
    overflow: hidden;
}

.cl-footer-decorative-line img {
    display: block;
    width: 100%;
    height: auto;
    margin: 0;
    padding: 0;
}

/* Remove any gap between divider and footer */
#colophon.site-footer {
    margin-top: 0;
}




/* ============================================================
   CLI ENGAGE - TOOLS FACETWP LISTING
   Shared across all Tools landing pages

   Desktop: 3 columns
   Tablet:  2 columns
   Mobile:  1 column

   Reuses existing:
   - cli-flex-card
   - cli-flex-card-accent
   - accent-blue / accent-purple / accent-green
   - bluebar

   Card background uses existing --card-faded variable.
============================================================ */


/* ============================================================
   TOOLS GRID
============================================================ */

.cli-tools-listing.cli-flex-card-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 20px;
    row-gap: 20px;
    width: 100%;
    margin: 0;
}


/* ============================================================
   TOOLKIT TYPE HEADINGS
============================================================ */

.cli-tools-listing .cli-tools-group {
    grid-column: 1 / -1;
    min-width: 0;
    margin: 12px 0 0;
}

.cli-tools-listing .cli-tools-group:first-child {
    margin-top: 0;
}

/* Reuse Existing Blue Bar */
.cli-tools-listing .cli-tools-group .bluebar {
    font-size: 16px;
    margin: 0;
}


/* ============================================================
   CARD STRUCTURE
============================================================ */

.cli-tools-listing a.cli-tools-card-link,
.cli-tools-listing a.cli-tools-card-link:link,
.cli-tools-listing a.cli-tools-card-link:visited {
    display: flex;
    flex-direction: column;
    position: relative;
    width: 100%;
    min-width: 0;
    height: 100%;
    box-sizing: border-box;

    /* Reuse existing accent background */
    background: var(--card-faded, #f6f8f9) !important;

    color: #0a0a0a;
    text-decoration: none !important;
    cursor: pointer;
    border-radius: 0;

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        filter 0.25s ease;
}

/* Preserve text color in every link state */
.cli-tools-listing a.cli-tools-card-link:hover,
.cli-tools-listing a.cli-tools-card-link:focus,
.cli-tools-listing a.cli-tools-card-link:active {
    background: var(--card-faded, #f6f8f9) !important;
    color: #0a0a0a !important;
    text-decoration: none !important;
}


/* ============================================================
   HOVER EFFECT
   Subtle Lift + Shadow + Brightness
============================================================ */

@media (hover: hover) and (pointer: fine) {

    .cli-tools-listing a.cli-tools-card-link:hover {
        transform: translateY(-4px);

        box-shadow:
            0 8px 20px rgba(0, 0, 0, 0.10),
            0 2px 6px rgba(0, 0, 0, 0.04);

        filter: brightness(1.025);
    }

}

/* Accent Line Animation */
.cli-tools-listing .cli-flex-card-accent {
    transition:
        transform 0.25s ease,
        opacity 0.25s ease;
}

@media (hover: hover) and (pointer: fine) {

    .cli-tools-listing a.cli-tools-card-link:hover
    .cli-flex-card-accent {
        transform: scaleY(1.03);
    }

}


/* ============================================================
   CLICK / ACTIVE STATE
   Preserve Existing Accent Background
============================================================ */

.cli-tools-listing a.cli-tools-card-link:active,
.cli-tools-listing a.cli-tools-card-link:focus {
    background: var(--card-faded, #f6f8f9) !important;
    color: #0a0a0a !important;
    text-decoration: none !important;
}

/* Click and hold feedback */
.cli-tools-listing a.cli-tools-card-link:active {
    transform: translateY(-1px);
    filter: brightness(0.98);

    box-shadow:
        0 2px 6px rgba(0, 0, 0, 0.08);
}


/* ============================================================
   KEYBOARD ACCESSIBILITY
============================================================ */

.cli-tools-listing a.cli-tools-card-link:focus-visible {
    outline: 3px solid #2563eb;
    outline-offset: 3px;
}


/* ============================================================
   CARD TITLE
   20px - Primary Visual Hierarchy
============================================================ */

.cli-tools-listing .cli-tools-card-title {
    font-size: 20px;
    font-weight: 600;
    line-height: 1.35;
    color: #111827;
    margin: 0 0 16px;
    overflow-wrap: break-word;
}


/* ============================================================
   CARD DESCRIPTION
   14px - Secondary Information
============================================================ */

.cli-tools-listing .cli-tools-card-description {
    font-size: 14px;
    font-weight: 400;
    line-height: 1.6;
    color: #475569;
    margin: 0 0 20px;
}

.cli-tools-listing .cli-tools-card-description p {
    font-size: 14px !important;
    font-weight: 400;
    line-height: 1.6 !important;
    color: #475569;
    margin: 0;
}


/* ============================================================
   CARD METADATA
   Best Fit For / Age Group
============================================================ */

.cli-tools-listing .cli-tools-card-meta {
    margin-top: auto;
    padding-top: 15px;
    border-top: 1px solid rgba(0, 0, 0, 0.12);
    font-size: 13px;
    line-height: 1.5;
    color: #334155;
}

/* Metadata Values */
.cli-tools-listing .cli-tools-card-meta p {
    font-size: 13px !important;
    font-weight: 400;
    line-height: 1.5 !important;
    color: #334155;
    margin: 0 0 5px;
}

/* Remove extra spacing after final field */
.cli-tools-listing .cli-tools-card-meta p:last-child {
    margin-bottom: 0;
}

/* Metadata Labels */
.cli-tools-listing .cli-tools-card-meta strong {
    font-size: inherit;
    font-weight: 600;
    color: #334155;
}


/* ============================================================
   TABLET - TWO CARDS PER ROW
============================================================ */

@media (max-width: 1023px) {

    .cli-tools-listing.cli-flex-card-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

}


/* ============================================================
   MOBILE - ONE CARD PER ROW
============================================================ */

@media (max-width: 639px) {

    .cli-tools-listing.cli-flex-card-grid {
        grid-template-columns: minmax(0, 1fr);
    }

}


/* ============================================================
   REDUCED MOTION ACCESSIBILITY
============================================================ */

@media (prefers-reduced-motion: reduce) {

    .cli-tools-listing a.cli-tools-card-link,
    .cli-tools-listing .cli-flex-card-accent {
        transition: none;
    }

    .cli-tools-listing a.cli-tools-card-link:hover,
    .cli-tools-listing a.cli-tools-card-link:active {
        transform: none;
    }

}

/* New accordion only; uses existing .accent-* variables from your global CSS. */
.cli-flex-accordion-section .cli-flex-accordion {
  width: 100%;
  max-width: 100%;
  display: grid;
  gap: 12px;
}
.cli-flex-accordion-section .cli-flex-accordion-intro {
  margin-bottom: 22px;
}
.cli-flex-accordion-section .cli-flex-accordion-item {
  position: relative;
  margin: 0;
  border: 0;
  border-left: 4px solid var(--card-accent, #b1e1f1);
  border-radius: 0;
  background: var(--cli-accordion-surface, var(--card-faded, #eff8fd));
  overflow: visible;

}
/* Set a single per-item surface for the tab heading and expanded content. */
.cli-flex-accordion-section .cli-flex-accordion-item.cli-flex-accordion-bg-matching {
  --cli-accordion-surface: var(--card-faded, #eff8fd);
}
.cli-flex-accordion-section .cli-flex-accordion-item.cli-flex-accordion-bg-white {
  --cli-accordion-surface: #ffffff;
  border-top: 1px solid var(--card-accent, #b1e1f1);
  border-right: 1px solid var(--card-accent, #b1e1f1);
  border-bottom: 1px solid var(--card-accent, #b1e1f1);
  /* Retains the existing 4px left accent line. */
}

/* Scoped override for global .accent-* or theme accordion backgrounds.
   This applies to both collapsed and expanded states without changing the accent line. */
.cli-flex-accordion-section .cli-flex-accordion-item.cli-flex-accordion-bg-white,
.cli-flex-accordion-section .cli-flex-accordion-item.cli-flex-accordion-bg-white > .cli-flex-accordion-summary,
.cli-flex-accordion-section .cli-flex-accordion-item.cli-flex-accordion-bg-white > .cli-flex-accordion-panel {
  background-color: #ffffff !important;
  background-image: none !important;
}

.cli-flex-accordion-section .cli-flex-accordion-summary {
  display: block;
  cursor: pointer;
  list-style: none;
  padding: 18px 22px;
  color: #202831;
  background: var(--cli-accordion-surface, var(--card-faded, #eff8fd));
}
.cli-flex-accordion-section .cli-flex-accordion-summary::-webkit-details-marker { display: none; }
.cli-flex-accordion-section .cli-flex-accordion-summary::marker { content: ''; }
.cli-flex-accordion-section .cli-flex-accordion-heading {
  display: flex;
  align-items: center;
  gap: 15px;
  margin: 0;
  padding: 0;
  color: inherit;
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.18rem);
  font-weight: 650;
  line-height: 1.45;
}
.cli-flex-accordion-section .cli-flex-accordion-icon {
  display: inline-block;
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  position: relative;
}
.cli-flex-accordion-section .cli-flex-accordion-icon::before,
.cli-flex-accordion-section .cli-flex-accordion-icon::after {
  content: '';
  position: absolute;
  background: currentColor;
  left: 2px;
  right: 2px;
  top: 8px;
  height: 2px;
}
.cli-flex-accordion-section .cli-flex-accordion-icon::after {
  transform: rotate(90deg);
}
.cli-flex-accordion-section .cli-flex-accordion-item[open] .cli-flex-accordion-icon::after {
  transform: rotate(0deg);
}
.cli-flex-accordion-section .cli-flex-accordion-summary:focus-visible {
  outline: 3px solid #174f84;
  outline-offset: 3px;
}
.cli-flex-accordion-section .cli-flex-accordion-panel {
  padding: 0 22px 22px 55px;
  color: #202831;
  overflow-wrap: anywhere;
  background: var(--cli-accordion-surface, var(--card-faded, #eff8fd));
}
.cli-flex-accordion-section .cli-flex-accordion-panel > :last-child { margin-bottom: 0; }
@media (max-width: 600px) {
  .cli-flex-accordion-section .cli-flex-accordion-summary { padding: 16px; }
  .cli-flex-accordion-section .cli-flex-accordion-panel { padding: 0 16px 18px 49px; }
}
@media (prefers-reduced-motion: reduce) {
  .cli-flex-accordion-section *,
  .cli-flex-accordion-section *::before,
  .cli-flex-accordion-section *::after { transition: none !important; animation: none !important; }
}

/* ============================================================

   HORIZONTAL TABS — TOP ACCENT / WHITE CONTENT
   Tab backgrounds use per-item ACF selection.
   Panel backgrounds are always white.
   No gap between tab headers and panel.
   Vertical accordion styling above is unchanged.
============================================================ */
.cli-flex-accordion-section .cli-flex-tabs {
  width: 100%;
  min-width: 0;
}


.cli-flex-accordion-section .cli-flex-tablist {
  display: flex;
  align-items: stretch;
  gap: 0;
  width: 100%;
  margin: 0;
  padding: 0;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-inline: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

/* Important: override the site's generic button colors, including states. */
.cli-flex-accordion-section .cli-flex-tab,
.cli-flex-accordion-section .cli-flex-tab:hover,
.cli-flex-accordion-section .cli-flex-tab:focus,
.cli-flex-accordion-section .cli-flex-tab:active,
.cli-flex-accordion-section .cli-flex-tab[aria-selected="true"] {
  flex: 1 0 145px;
  min-width: 145px;
  min-height: 64px;
  margin: 0;
  padding: 14px 16px;
  border: 1px solid #dbe1e5;
  border-top: 4px solid var(--card-accent, #b1e1f1);
  border-radius: 0;
  box-shadow: none;
  background-color: var(--cli-tab-surface, var(--card-faded, #eff8fd)) !important;
  background-image: none !important;
  color: #202831 !important;
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
  text-align: center;
  text-decoration: none;
  white-space: normal;
  cursor: pointer;
  transition: none;
}

.cli-flex-accordion-section .cli-flex-tab + .cli-flex-tab {
  border-left: 0;
}

.cli-flex-accordion-section .cli-flex-tab.cli-flex-accordion-bg-white {
  --cli-tab-surface: #ffffff;
}

.cli-flex-accordion-section .cli-flex-tab.cli-flex-accordion-bg-matching {
  --cli-tab-surface: var(--card-faded, #eff8fd);
}

/* Selected tab: replace the gray side outlines with the tab's
   assigned background color. Keep its colored top accent bar,
   and the white bottom edge connected to the white panel. */
.cli-flex-accordion-section .cli-flex-tab[aria-selected="true"] {
  position: relative;
  z-index: 1;
  font-weight: 700;
  border-left-color: var(--cli-tab-surface, var(--card-faded, #eff8fd));
  border-right-color: var(--cli-tab-surface, var(--card-faded, #eff8fd));
  border-bottom-color: #ffffff;
}

/* Restore the selected tab's left border if it follows another tab. */
.cli-flex-accordion-section .cli-flex-tab + .cli-flex-tab[aria-selected="true"] {
  border-left: 1px solid var(--cli-tab-surface, var(--card-faded, #eff8fd));
}

.cli-flex-accordion-section .cli-flex-tab:focus-visible,
.cli-flex-accordion-section .cli-flex-tab-panel:focus-visible {
  outline: 3px solid #174f84;
  outline-offset: -3px;
  z-index: 2;
}

/* Panel is always white and unaccented, independent of tab color. */
.cli-flex-accordion-section .cli-flex-tab-panel,
.cli-flex-accordion-section .cli-flex-tab-panel.cli-flex-accordion-bg-white,
.cli-flex-accordion-section .cli-flex-tab-panel.cli-flex-accordion-bg-matching {
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 28px;
  border: 1px solid #dbe1e5;
  border-top: 0;
  border-radius: 0;
  background: #ffffff !important;
  color: #202831;
  overflow-wrap: anywhere;
}

.cli-flex-accordion-section .cli-flex-tab-panel[hidden] {
  display: none !important;
}
.cli-flex-accordion-section .cli-flex-tab-panel > :first-child { margin-top: 0; }
.cli-flex-accordion-section .cli-flex-tab-panel > :last-child { margin-bottom: 0; }

@media (max-width: 600px) {
  .cli-flex-accordion-section .cli-flex-tab { flex: 0 0 165px; max-width: 220px; }
  .cli-flex-accordion-section .cli-flex-tab-panel { padding: 20px; }
}


/* ============================================================
   ACTIVE TAB + CONTENT PANEL: STRONG ACCENT BORDERS
   - Keep all tab backgrounds (including selected) unchanged.
   - Active tab: 1px assigned accent on LEFT and RIGHT.
   - White content panel: 1px assigned accent on LEFT, RIGHT, BOTTOM.
   - No upper panel border / no gap.
   - All 6 existing accent colors supported.
============================================================ */
.cli-flex-accordion-section .cli-flex-tabs {
  --cli-active-panel-border: #b1e1f1;
}

.cli-flex-accordion-section .cli-flex-tabs:has(.cli-flex-tab.accent-blue[aria-selected="true"])   { --cli-active-panel-border: #b1e1f1; }
.cli-flex-accordion-section .cli-flex-tabs:has(.cli-flex-tab.accent-purple[aria-selected="true"]) { --cli-active-panel-border: #dfcde4; }
.cli-flex-accordion-section .cli-flex-tabs:has(.cli-flex-tab.accent-red[aria-selected="true"])    { --cli-active-panel-border: #f8b2b3; }
.cli-flex-accordion-section .cli-flex-tabs:has(.cli-flex-tab.accent-green[aria-selected="true"])  { --cli-active-panel-border: #e1eecb; }
.cli-flex-accordion-section .cli-flex-tabs:has(.cli-flex-tab.accent-gray[aria-selected="true"])   { --cli-active-panel-border: #e0e2e5; }
.cli-flex-accordion-section .cli-flex-tabs:has(.cli-flex-tab.accent-yellow[aria-selected="true"]) { --cli-active-panel-border: #f7ffa9; }

/* Do not change the selected tab's assigned background. */
.cli-flex-accordion-section .cli-flex-tabs .cli-flex-tab[aria-selected="true"],
.cli-flex-accordion-section .cli-flex-tabs .cli-flex-tab + .cli-flex-tab[aria-selected="true"] {
  border-left: 1px solid var(--cli-active-panel-border);
  border-right: 1px solid var(--cli-active-panel-border);
  border-top: 4px solid var(--card-accent, #b1e1f1);
  border-bottom-color: #ffffff;
  background-color: var(--cli-tab-surface, var(--card-faded, #eff8fd)) !important;
}

/* All panel content stays plain white; borders follow active tab. */
.cli-flex-accordion-section .cli-flex-tabs .cli-flex-tab-panel,
.cli-flex-accordion-section .cli-flex-tabs .cli-flex-tab-panel.cli-flex-accordion-bg-white,
.cli-flex-accordion-section .cli-flex-tabs .cli-flex-tab-panel.cli-flex-accordion-bg-matching {
  border-left: 1px solid var(--cli-active-panel-border);
  border-right: 1px solid var(--cli-active-panel-border);
  border-bottom: 1px solid var(--cli-active-panel-border);
  border-top: 0;
  background: #ffffff !important;
}

/* ============================================================
   CONTINUOUS ACTIVE-COLOR DIVIDER UNDER INACTIVE TABS
   Example: when Pink is active, the bottom edges of Blue and
   Green tabs become Pink, visually connecting to the Pink
   left/right/bottom outline of the white content panel.
   Active tab keeps its own background and has no bottom border.
============================================================ */
.cli-flex-accordion-section .cli-flex-tabs .cli-flex-tab[aria-selected="false"] {
  border-bottom: 1px solid var(--cli-active-panel-border, #b1e1f1);
}

.cli-flex-accordion-section .cli-flex-tabs .cli-flex-tab[aria-selected="true"] {
  border-bottom: 1px solid transparent;
}



/* ============================================================
   FOOTER SOCIAL MEDIA
============================================================ */

.cl-footer-social {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 18px;
    padding: 0;
}

/* NORMAL STATE */
.cl-footer-social a,
.cl-footer-social a:link,
.cl-footer-social a:visited {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 38px;
    height: 38px;
    padding: 9px;

    box-sizing: border-box;
    background-color: #f3f3f3 !important;
    border: 1px solid #dddddd !important;
    border-radius: 0 !important;

    color: #000000 !important;
    text-decoration: none !important;
    box-shadow: none !important;

    transition:
        background-color 0.2s ease,
        border-color 0.2s ease;
}

/* ICONS - ALWAYS BLACK */
.cl-footer-social a img {
    display: block;
    width: 20px;
    height: 20px;
    max-width: 100%;
    object-fit: contain;
    filter: none !important;
    opacity: 1 !important;
}

/* HOVER AND CLICK - SUBTLE DARKER GRAY */
.cl-footer-social a:hover,
.cl-footer-social a:active {
    background-color: #e5e5e5 !important;
    border-color: #888888 !important;
    color: #000000 !important;
    box-shadow: none !important;
}

/* KEEP ICONS BLACK ON HOVER */
.cl-footer-social a:hover img,
.cl-footer-social a:active img {
    filter: none !important;
    opacity: 1 !important;
}

/* KEYBOARD ACCESSIBILITY */
.cl-footer-social a:focus-visible {
    outline: 2px solid #000000;
    outline-offset: 3px;
}

/* MOBILE */
@media (max-width: 768px) {
    .cl-footer-social {
        gap: 10px;
        margin-top: 16px;
    }
}



/* ============================================================
   CLI ENGAGE — ACF HERO COMPONENT
   Uses existing CLI accent colors and site width variables.
   Add after the global .accent-* definitions.
============================================================ */


/* ============================================================
   1. HERO CONTAINER / PAGE WIDTH
============================================================ */

.tools-template .cli-acf-hero-container {
    width: min(
        var(--cl-content-max, 1160px),
        calc(100% - (var(--cl-page-gutter, 24px) * 2))
    );

    max-width: var(--cl-content-max, 1160px);

    margin: 0 auto 28px;
    padding: 0;

    box-sizing: border-box;
}

/* The existing .container class owns page width and gutters. */

.cli-acf-hero,
.cli-acf-hero * {
    box-sizing: border-box;
}


/* ============================================================
   2. HERO BASE
============================================================ */

.cli-acf-hero {
    position: relative;
    isolation: isolate;

    width: 100%;

    display: flex;
    align-items: center;

    overflow: hidden;

    background-color: #f6f8f9;
    background-image: var(--cli-hero-image, none);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}


/* ============================================================
   3. HERO HEIGHT OPTIONS
============================================================ */

.cli-acf-hero--short {
    min-height: 360px;
}

.cli-acf-hero--medium {
    min-height: 460px;
}

.cli-acf-hero--tall {
    min-height: 580px;
}


/* ============================================================
   4. CONTENT POSITION OPTIONS
============================================================ */

.cli-acf-hero--left {
    justify-content: flex-start;
}

.cli-acf-hero--center {
    justify-content: center;
}

.cli-acf-hero--right {
    justify-content: flex-end;
}


/* ============================================================
   5. FLOATING CONTENT CARD
============================================================ */

.cli-acf-hero-card {
    position: relative;

    width: min(47%, 570px);

    margin: 30px clamp(22px, 5%, 70px);
    padding: clamp(22px, 3vw, 42px);

    /* Color and opacity are rendered by the ::before layer below. */
    background: transparent;

    border-radius: 0;
}



/* ============================================================
   7. OPACITY BACKGROUND FALLBACK
   Uses a pseudo-layer for browser compatibility.
============================================================ */

.cli-acf-hero-card::before {
    content: "";

    position: absolute;
    inset: 0;
    z-index: -1;

    background: var(--card-faded, #f6f8f9);

    opacity: var(--cli-hero-opacity, 0.95);

    pointer-events: none;
}


/* ============================================================
   8. INNER CONTENT / VERTICAL ACCENT LINE
============================================================ */

.cli-acf-hero-inner {
    position: relative;

    padding:
        8px
        0
        8px
        clamp(20px, 2.4vw, 34px);

    border-left: 7px solid var(--card-accent, #e0e2e5);
}


/* ============================================================
   9. EYEBROW TEXT
============================================================ */

.cli-acf-hero-eyebrow {
    display: block;

    margin-bottom: 15px;

    font-size: 12px;
    line-height: 1.3;
    letter-spacing: 0.09em;
    font-weight: 800;

    text-transform: uppercase;

    color: var(--cli-hero-eyebrow, #555555);
}


/* ============================================================
   10. HERO TITLE
============================================================ */

.cli-acf-hero .cli-acf-hero-title {
    margin: 0 0 18px;

    font-size: clamp(26px, 2.8vw, 44px);
    line-height: 1.1;
    letter-spacing: -0.025em;
    font-weight: 800;

    color: #1f1f1f;
}


/* ============================================================
   11. HERO BODY CONTENT
============================================================ */

.cli-acf-hero-copy {
    font-size: clamp(14px, 1.15vw, 17px);
    line-height: 1.6;

    color: #1f1f1f;
}

.cli-acf-hero-copy p {
    margin: 0 0 16px;
}


/* ============================================================
   12. HERO HYPERLINK
============================================================ */

.cli-acf-hero-link {
    display: inline-flex;
    align-items: center;

    gap: 12px;

    margin-top: 8px;

    font-size: 17px;
    line-height: 1.3;
    font-weight: 800;

    color: #1f1f1f !important;

    text-decoration: none !important;
}

.cli-acf-hero-link:hover,
.cli-acf-hero-link:focus-visible {
    text-decoration: underline !important;
}


/* ============================================================
   13. FULL PANEL LAYOUT
   Content panel is flush with the hero edge.
============================================================ */

.cli-acf-hero--panel .cli-acf-hero-card {
    align-self: stretch;

    width: 50%;
    max-width: none;

    margin: 0;

    padding: clamp(25px, 4vw, 62px);

    display: flex;
    align-items: center;
}

.cli-acf-hero--panel .cli-acf-hero-inner {
    width: 100%;
}


/* ============================================================
   14. CENTER FULL PANEL
   Leaves photography visible on both sides.
============================================================ */

.cli-acf-hero--center.cli-acf-hero--panel .cli-acf-hero-card {
    width: 58%;
}


/* ============================================================
   15. ACCENT EYEBROW COLORS
   Based on approved CLI hero prototypes.
============================================================ */

.cli-acf-hero {
    --cli-hero-eyebrow: #555555;
}

/* BLUE */

.cli-acf-hero.accent-blue {
    --cli-hero-eyebrow: #525960;
}

/* PURPLE */

.cli-acf-hero.accent-purple {
    --cli-hero-eyebrow: #525960;
}

/* RED / PINK */

.cli-acf-hero.accent-red {
    --cli-hero-eyebrow: #525960;
}

/* GREEN */

.cli-acf-hero.accent-green {
    --cli-hero-eyebrow: #525960;
}

/* GRAY */

.cli-acf-hero.accent-gray {
    --cli-hero-eyebrow: #525960;
}

/* YELLOW */

.cli-acf-hero.accent-yellow {
    --cli-hero-eyebrow: #525960;
}


/* ============================================================
   16. SCOPED TEXT COLOR OVERRIDES
============================================================ */

.cli-acf-hero .cli-acf-hero-title,
.cli-acf-hero .cli-acf-hero-copy,
.cli-acf-hero .cli-acf-hero-copy p,
.cli-acf-hero .cli-acf-hero-copy li {
    color: #1f1f1f;
}


/* ============================================================
   17. SCOPED HYPERLINK COLOR OVERRIDES
============================================================ */

.cli-acf-hero .cli-acf-hero-link,
.cli-acf-hero .cli-acf-hero-link:visited,
.cli-acf-hero .cli-acf-hero-link:hover,
.cli-acf-hero .cli-acf-hero-link:focus {
    color: #1f1f1f !important;
}


/* ============================================================
   18. EYEBROW COLOR OVERRIDE
============================================================ */

.cli-acf-hero .cli-acf-hero-eyebrow {
    color: var(--cli-hero-eyebrow);
}


/* ============================================================
   19. HERO WIDTH OVERRIDES
============================================================ */

.cli-acf-hero-container .cli-acf-hero {
    max-width: 100%;
}

/* Keep hero artwork aligned with page title and cards. */

.tools-template .cli-acf-hero-container > .cli-acf-hero {
    width: 100%;
    max-width: 100%;

    margin: 0;
}


/* ============================================================
   20. TABLET RESPONSIVE
============================================================ */

@media (max-width: 900px) {

    .cli-acf-hero-card {
        width: 55%;

        margin: 20px;
        padding: 24px;
    }

    .cli-acf-hero--panel .cli-acf-hero-card {

        width: 55%;
    }

    .cli-acf-hero--center.cli-acf-hero--panel .cli-acf-hero-card {
        width: 66%;
    }

}


/* ============================================================
   21. MOBILE RESPONSIVE
============================================================ */

@media (max-width: 650px) {

    .cli-acf-hero {
        min-height: 0 !important;

        padding-top: 240px;

        display: block;

        background-position: center top;
        background-size: auto 300px;
        background-color: #f6f8f9;
    }

    .cli-acf-hero-card,
    .cli-acf-hero--panel .cli-acf-hero-card,
    .cli-acf-hero--center.cli-acf-hero--panel .cli-acf-hero-card {
        display: block;

        width: auto;
        max-width: none;

        margin: 0 14px 14px;
        padding: 22px 18px;
    }

    .cli-acf-hero-inner {
        padding-left: 20px;

        border-left-width: 5px;
    }

    .cli-acf-hero .cli-acf-hero-title {
        font-size: clamp(28px, 8vw, 40px);
    }

    .cli-acf-hero-copy {
        font-size: 15px;
    }

}


/* ============================================================
   22. MOBILE PAGE WIDTH
   Uses existing CLI site gutters.
============================================================ */

@media (max-width: 767px) {

    .tools-template .cli-acf-hero-container {
        width: min(
            var(--cl-content-max, 1160px),
            calc(100% - (var(--cl-page-gutter, 18px) * 2))
        );
    }

}

/* ============================================================
   CLI ENGAGE — FLEXIBLE CONTENT HERO BANNER
   Shared with the Tools Template's existing .cli-acf-hero CSS.
   Add AFTER the main CLI ACF Hero CSS and existing accent colors.
   Does not modify Split Hero or Centered Hero.
============================================================ */

.cli-flex-page .cli-flex-hero-banner-container {
    width: min(
        var(--cl-content-max, 1160px),
        calc(100% - (var(--cl-page-gutter, 24px) * 2))
    );
    max-width: var(--cl-content-max, 1160px);
    margin: 0 auto 28px;
    padding: 0;
    box-sizing: border-box;
}

.cli-flex-page .cli-flex-hero-banner-container > .cli-acf-hero {
    width: 100%;
    max-width: 100%;
    margin: 0;
}

/* Global site H2 rules use !important; keep banner headings prominent. */
.cli-flex-page .cli-acf-hero .cli-acf-hero-title {
    font-size: clamp(26px, 2.8vw, 44px) !important;
    line-height: 1.1 !important;
    color: #1f1f1f !important;
}

.cli-flex-page .cli-acf-hero .cli-acf-hero-copy,
.cli-flex-page .cli-acf-hero .cli-acf-hero-copy p,
.cli-flex-page .cli-acf-hero .cli-acf-hero-copy li {
    color: #1f1f1f;
}

@media (max-width: 650px) {
    .cli-flex-page .cli-acf-hero .cli-acf-hero-title {
        font-size: clamp(28px, 8vw, 40px) !important;
    }
}


/* ============================================================
   CLI ENGAGE — FLEXIBLE CONTENT TILES
   Uses existing CLI Engage Cards/Bento Boxes styling.

   Desktop: 3 columns
   Tablet:  2 columns
   Mobile:  1 column

   Hover matches the existing FacetWP Tools listing.

   Reuses:
   - .cli-flex-card
   - .cli-flex-card-has-accent
   - .cli-flex-card-accent
   - .accent-blue / purple / red / green / gray / yellow
============================================================ */


/* ============================================================
   1. TILE GRID
============================================================ */

.cli-flex-tiles-section .cli-flex-tiles-grid {
    display: grid;
    grid-template-columns: repeat(var(--cli-grid-columns, 3), minmax(0, 1fr));
    column-gap: 24px;
    row-gap: 0;
    width: 100%;
    margin: 0;
    align-items: stretch;
    /* Every tile occupies the same three grid rows as its neighbors. */
}


/* ============================================================
   2. TILE STRUCTURE
============================================================ */

.cli-flex-tiles-section .cli-flex-tile {
    position: relative;
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 3;
    row-gap: 0;
    margin-bottom: 24px;

    width: 100%;
    min-width: 0;
    height: 100%;

    box-sizing: border-box;

    background: var(--card-faded, #f6f8f9);
    border-radius: 0;

    color: #111827;
}


/* ============================================================
   3. TILE TITLE
============================================================ */

.cli-flex-tiles-section .cli-flex-tile-title {
    position: relative;

    margin: 0;
    padding: 0;

    color: #111827;
    font-weight: 600;
    line-height: 1.35;

    overflow-wrap: break-word;
}


/* ============================================================
   4. TILE CONTENT
============================================================ */

.cli-flex-tiles-section .cli-flex-tile-content {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;

    color: #475569;
    line-height: 1.6;
}

.cli-flex-tiles-section .cli-flex-tile-content p {
    margin: 0 0 16px;

    color: #475569;
    line-height: 1.6;
}

.cli-flex-tiles-section .cli-flex-tile-content > :first-child {
    margin-top: 0;
}

.cli-flex-tiles-section .cli-flex-tile-content > :last-child {
    margin-bottom: 0;
}


/* The title slot and content start at matching heights per grid row. */
.cli-flex-tiles-section .cli-flex-tile-heading-slot {
    min-width: 0;
    padding-bottom: 20px;
}

/* Keep WYSIWYG media and WordPress-generated wrappers inside the tile. */
.cli-flex-tiles-section .cli-flex-tile-content :is(figure, .wp-caption, .wp-block-image, .wp-block-gallery, p) {
    max-width: 100%;
    min-width: 0;
}

.cli-flex-tiles-section .cli-flex-tile-content :is(img, svg, video, iframe) {
    display: block;
    max-width: 100% !important;
    height: auto;
}

/* Keep WYSIWYG images the same maximum display width in every row. */
.cli-flex-tiles-section .cli-flex-tile-content img {
    width: 100% !important;
    max-width: 280px !important;
    height: auto !important;
    margin-left: auto;
    margin-right: auto;
    object-fit: contain;
}

.cli-flex-tiles-section .cli-flex-tile-content :is(figure, .wp-caption) {
    width: auto !important;
    margin-left: 0;
    margin-right: 0;
}

.cli-flex-tiles-section .cli-flex-tile-content :is(figure, .wp-caption) img {
    margin-inline: auto;
}

/* ============================================================
   5. ACCENT LINE
   Uses the existing CLI accent color variables.
============================================================ */

.cli-flex-tiles-section .cli-flex-card-accent {
    transition:
        transform 0.25s ease,

        opacity 0.25s ease;
}


/* ============================================================
   6. TILE FOOTER / CTA
============================================================ */

.cli-flex-tiles-section .cli-flex-tile-footer {
    margin-top: 20px;
}

.cli-flex-tiles-section .cli-flex-tile-cta,
.cli-flex-tiles-section .cli-flex-tile-cta:link,
.cli-flex-tiles-section .cli-flex-tile-cta:visited {
    display: inline-block;
	font-size: 16px !important;
    color: #111827;
    font-weight: 700;
    text-decoration: none;
}

.cli-flex-tiles-section .cli-flex-tile-cta:hover,
.cli-flex-tiles-section .cli-flex-tile-cta:focus-visible {
    color: #111827;
    text-decoration: underline;
    text-underline-offset: 3px;
	font-size: 16px !important;
}


/* ============================================================
   7. DIVIDER CTA APPEARANCE
   Adds a divider above the CTA area.
============================================================ */

.cli-flex-tiles-section
.cli-flex-tile-style-divider
.cli-flex-tile-footer {
    margin-top: 20px;
    padding-top: 16px;

    border-top: 1px solid rgba(0, 0, 0, 0.15);
}


/* ============================================================
   8. WHOLE TILE CLICKABLE
   Uses a stretched hyperlink overlay.
============================================================ */

/* Nonclickable tiles have no hover animation. */
.cli-flex-tiles-section .cli-flex-tile-clickable {
    cursor: pointer;
    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        filter 0.25s ease;
}

/* The stretched hyperlink must never paint over the tile's color.
   Twenty Twenty-One may add a dark background to focused links,
   which otherwise fills the entire tile on right-click/press-and-hold. */
.cli-flex-tiles-section a.cli-flex-tile-overlay-link,
.cli-flex-tiles-section a.cli-flex-tile-overlay-link:link,
.cli-flex-tiles-section a.cli-flex-tile-overlay-link:visited,
.cli-flex-tiles-section a.cli-flex-tile-overlay-link:hover,
.cli-flex-tiles-section a.cli-flex-tile-overlay-link:focus,
.cli-flex-tiles-section a.cli-flex-tile-overlay-link:active,
.cli-flex-tiles-section a.cli-flex-tile-overlay-link:focus-visible {
    position: absolute;
    inset: 0;
    z-index: 2;
    background: transparent !important;
    box-shadow: none !important;
    text-decoration: none !important;
}

/* Do not show a mouse-click focus ring. The :focus-visible rule below
   still supplies a strong blue outline for keyboard navigation. */
.cli-flex-tiles-section a.cli-flex-tile-overlay-link:focus:not(:focus-visible) {
    outline: none;
}


/* ============================================================
   9. HOVER EFFECT — ENTIRE TILE CLICKABLE ONLY
   CTA Link Only tiles remain visually static.
   Matches FacetWP Tools listing on clickable tiles.
============================================================ */

@media (hover: hover) and (pointer: fine) {

    .cli-flex-tiles-section .cli-flex-tile-clickable:hover {
        transform: translateY(-4px);

        box-shadow:
            0 8px 20px rgba(0, 0, 0, 0.10),
            0 2px 6px rgba(0, 0, 0, 0.04);

        filter: brightness(1.025);
    }

    .cli-flex-tiles-section
    .cli-flex-tile-clickable:hover
    .cli-flex-card-accent {
        transform: scaleY(1.03);
    }
}


/* ============================================================
   10. CLICK / ACTIVE STATE — ENTIRE TILE CLICKABLE ONLY
============================================================ */

.cli-flex-tiles-section .cli-flex-tile-clickable:active {
    transform: translateY(-1px);
    filter: brightness(0.98);

    box-shadow:
        0 2px 6px rgba(0, 0, 0, 0.08);
}


/* ============================================================
   11. KEYBOARD ACCESSIBILITY
============================================================ */

.cli-flex-tiles-section
.cli-flex-tile-overlay-link:focus-visible {
    outline: 3px solid #2563eb;
    outline-offset: -3px;
}

.cli-flex-tiles-section
.cli-flex-tile-cta:focus-visible {
    outline: 3px solid #2563eb;
    outline-offset: 3px;
}


/* ============================================================
   12. TABLET — TWO COLUMNS
============================================================ */

@media (max-width: 1023px) {

    /* Preserve explicitly chosen 1- and 2-column card layouts.
       Reduce 3-, 4-, and 5-column layouts to 2 at tablet widths. */
    .cli-flex-page .cli-flex-card-grid:is(
        .cli-flex-cards-columns-3,
        .cli-flex-cards-columns-4,
        .cli-flex-cards-columns-5
    ) {
        --cli-grid-columns: 2;
    }

    .cli-flex-tiles-section .cli-flex-tiles-grid {
        --cli-grid-columns: 2;
    }

}


/* ============================================================
   13. MOBILE — ONE COLUMN
============================================================ */

@media (max-width: 639px) {

    .cli-flex-page .cli-flex-card-grid {
        --cli-grid-columns: 1;
    }

    .cli-flex-tiles-section .cli-flex-tiles-grid {
        --cli-grid-columns: 1;
    }

    .cli-flex-tiles-section .cli-flex-tile {
        padding: 24px;
    }

    .cli-flex-tiles-section
    .cli-flex-tile.cli-flex-card-has-accent {
        padding-left: 42px;
    }

}


/* ============================================================
   14. REDUCED MOTION ACCESSIBILITY
============================================================ */

@media (prefers-reduced-motion: reduce) {

    .cli-flex-tiles-section .cli-flex-tile,
    .cli-flex-tiles-section .cli-flex-card-accent {
        transition: none;
    }

    .cli-flex-tiles-section .cli-flex-tile-clickable:hover,
    .cli-flex-tiles-section .cli-flex-tile-clickable:active,
    .cli-flex-tiles-section
    .cli-flex-tile-clickable:hover
    .cli-flex-card-accent {
        transform: none;
    }

}



/* ============================================================
   CLI ENGAGE - TOOLS FACETWP FILTERS
   Horizontal labels and fields
   Shared across all Tools landing pages
============================================================ */

/* Main Horizontal Row */
.cli-tools-filters {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 20px;
    width: 100%;
    max-width: 100%;
    margin: 32px 0 36px;
    padding: 0;
    box-sizing: border-box;
}

/* Each Label + Field Pair */
.cli-tools-filter-field {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

/* Labels */
.cli-tools-filter-field > label {
    display: inline-block;
    flex: 0 0 auto;
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    color: #222222;
    white-space: nowrap;
}

/* Age Group Field */
.cli-tools-filter-age {
    flex: 0 0 auto;
}

/* Search Field */
.cli-tools-filter-search {
    flex: 0 0 auto;
}

/* Reset Button Wrapper */
.cli-tools-filter-reset {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    margin: 0;
    padding: 0;
}

/* Remove Default FacetWP Spacing */
.cli-tools-filters .facetwp-facet {
    margin: 0;
    padding: 0;
}

/* Dropdown */
.cli-tools-filters .facetwp-dropdown {
    width: 220px;
    min-height: 48px;
    margin: 0;
    padding: 10px 14px;
    border: 1px solid #9ca3af;
    border-radius: 0;
    background-color: #ffffff;
    color: #222222;
    font-family: inherit;
    font-size: 15px;
    box-sizing: border-box;
}

/* Search Wrapper */
.cli-tools-filters .facetwp-input-wrap {
    display: block;
    width: 300px;
    max-width: 100%;
    margin: 0;
    padding: 0;
}

/* Search Input */
.cli-tools-filters .facetwp-search {
    width: 100%;
    min-height: 48px;
    margin: 0;
    padding: 10px 42px 10px 14px;
    border: 1px solid #9ca3af;
    border-radius: 0;
    background-color: #ffffff;
    color: #222222;
    font-family: inherit;
    font-size: 15px;
    box-sizing: border-box;
}

/* Reset Button */
.cli-tools-filter-reset .facetwp-reset {
    min-height: 48px;
    margin: 0;
    padding: 10px 24px;
    border: 1px solid #51545a;
    border-radius: 0;
    background-color: #51545a;
    color: #ffffff;
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
    cursor: pointer;
    transition:
        background-color 0.2s ease,
        color 0.2s ease;
}

/* Reset Hover */
.cli-tools-filter-reset .facetwp-reset:hover,
.cli-tools-filter-reset .facetwp-reset:focus {
    background-color: #ffffff;
    color: #51545a;
    border-color: #51545a;
}

/* Keyboard Accessibility */
.cli-tools-filters .facetwp-dropdown:focus-visible,
.cli-tools-filters .facetwp-search:focus-visible,
.cli-tools-filter-reset .facetwp-reset:focus-visible {
    outline: 3px solid #2563eb;
    outline-offset: 2px;
}

/* ============================================================
   TABLET
============================================================ */

@media (max-width: 1023px) {

    .cli-tools-filters {
        gap: 16px;
    }

    .cli-tools-filters .facetwp-dropdown {
        width: 180px;
    }

    .cli-tools-filters .facetwp-input-wrap {
        width: 240px;
    }

}

/* ============================================================
   MOBILE
============================================================ */

@media (max-width: 639px) {

    .cli-tools-filters {
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
        margin: 24px 0 30px;
    }

    .cli-tools-filter-field {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

    .cli-tools-filter-age,
    .cli-tools-filter-search {
        width: 100%;
    }

    .cli-tools-filters .facetwp-dropdown,
    .cli-tools-filters .facetwp-input-wrap,
    .cli-tools-filters .facetwp-search {
        width: 100%;
        max-width: 100%;
    }

    .cli-tools-filter-reset,
    .cli-tools-filter-reset .facetwp-reset {
        width: 100%;
    }

}


/* ============================================================
   WEB VERSION OF PDF — COMPLETE COMPONENT STYLES
   Scoped to .cli-web-pdf; reuses the shared accordion/tab visuals.
   This is the only PDF-specific section in custom.css.
============================================================ */

/* Main 1160px page container and document header */
.cli-web-pdf {
    width: 100%;
}

.cli-web-pdf .cli-web-pdf__inner {
    width: min(
        var(--cl-content-max, 1160px),
        calc(100% - (var(--cl-page-gutter, 24px) * 2))
    );
    max-width: var(--cl-content-max, 1160px);
    margin-inline: auto;
    padding: 48px 0 56px;
    box-sizing: border-box;
}

.cli-web-pdf__pills {
    margin-bottom: 18px;
}

.cli-web-pdf .cli-web-pdf__header {
    width: 100%;
    max-width: none;
    min-width: 0;
    margin-bottom: 28px;
    box-sizing: border-box;
}

.cli-web-pdf .cli-web-pdf__header .entry-title {
    display: block;
    width: 100%;
    max-width: none !important;
    margin: 0;
    box-sizing: border-box;
    white-space: normal;
    overflow-wrap: break-word;
}

/* Vertical bookmarks: introduction left, bookmark box right */
.cli-web-pdf__top {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(220px, 1fr);
    gap: 40px;
    align-items: start;
    margin-bottom: 48px;
}

.cli-web-pdf .cli-web-pdf__top > *,
.cli-web-pdf .cli-web-pdf__chapters,
.cli-web-pdf .cli-web-pdf__chapter-content {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}

.cli-web-pdf__intro > :first-child {
    margin-top: 0;
}

.cli-web-pdf__intro > :last-child {
    margin-bottom: 0;
}

/* Introduction sections: vertical padding only, no extra left inset */
.cli-web-pdf .cli-web-pdf__intro,
.cli-web-pdf .cli-web-pdf__intro > .cli-web-pdf__content-section {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
    box-sizing: border-box;
}

.cli-web-pdf .cli-web-pdf__content-section {
    position: relative;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.cli-web-pdf .cli-web-pdf__content-section--padding-none {
    padding-top: 0;
    padding-bottom: 0;
}

.cli-web-pdf .cli-web-pdf__content-section--padding-small {
    padding-top: 16px;
    padding-bottom: 16px;
}

.cli-web-pdf .cli-web-pdf__content-section--padding-medium {
    padding-top: 28px;
    padding-bottom: 28px;
}

.cli-web-pdf .cli-web-pdf__content-section--padding-large {
    padding-top: 44px;
    padding-bottom: 44px;
}

.cli-web-pdf .cli-web-pdf__content-overlay {
    width: 100%;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    background: rgba(255, 255, 255, 0.82);
}

/* Bookmarks common to vertical sidebar and horizontal bar */
.cli-web-pdf__bookmarks {
    padding: 24px;

    background: #eff8fd;
    border-radius: 0px;
}

.cli-web-pdf__bookmarks-title {
    margin: 0 0 14px;
    font-size: 1.1rem;
}

.cli-web-pdf__bookmarks-list {
    margin: 0;
    padding-left: 20px;
}

.cli-web-pdf__bookmarks-list li + li {
    margin-top: 6px;
}

.cli-web-pdf__bookmarks-list a {
    text-decoration: underline;
}

/* Horizontal layout: full-width bookmark bar beneath introduction */
.cli-web-pdf .cli-web-pdf__top--horizontal {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
}

.cli-web-pdf .cli-web-pdf__top--horizontal .cli-web-pdf__intro,
.cli-web-pdf .cli-web-pdf__top--horizontal .cli-web-pdf__bookmarks {
    min-width: 0;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.cli-web-pdf .cli-web-pdf__top--horizontal .cli-web-pdf__bookmarks {
    order: 0;
    margin: 0;
    padding: 20px 26px 10px 26px;
}

.cli-web-pdf .cli-web-pdf__top--horizontal .cli-web-pdf__bookmarks-title {
    margin: 0 0 14px;
}

.cli-web-pdf .cli-web-pdf__top--horizontal .cli-web-pdf__bookmarks-list {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0px 26px;
    align-items: baseline;
    list-style: none;
    margin: 0;
    padding: 0;
}

.cli-web-pdf .cli-web-pdf__top--horizontal .cli-web-pdf__bookmarks-list li {
    flex: 0 1 auto;
    width: auto;
    margin: 0;
    padding: 0;
    list-style: none;
}

.cli-web-pdf .cli-web-pdf__top--horizontal .cli-web-pdf__bookmarks-list li + li {
    margin-top: 0;
}

.cli-web-pdf .cli-web-pdf__top--horizontal .cli-web-pdf__bookmarks-list a {
    display: inline-block;
    max-width: 100%;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.cli-web-pdf .cli-web-pdf__top--horizontal .cli-web-pdf__bookmarks-list a:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 4px;
}

/* Chapters: full document width, matching the title and introduction */
.cli-web-pdf__chapters {
    width: 100%;
}

.cli-web-pdf__chapter {
    margin-bottom: 48px;
}

.cli-web-pdf__chapter-title {
    margin: 0;
}

.cli-web-pdf__chapter-rule {
    height: 1px;
    margin: 12px 0 20px;
    background: #d9d9d9;
}

.cli-web-pdf__chapter-content {
    width: 100%;
    overflow-x: auto;
}

.cli-web-pdf__chapter-content > :first-child {
    margin-top: 0;
}

.cli-web-pdf__chapter-content > :last-child {
    margin-bottom: 0;
}

.cli-web-pdf__chapter-content table {
    width: 100%;
    border-collapse: collapse;
}

.cli-web-pdf .cli-web-pdf__chapters,
.cli-web-pdf .cli-web-pdf__chapter,
.cli-web-pdf .cli-web-pdf__chapter-title,
.cli-web-pdf .cli-web-pdf__chapter-rule,
.cli-web-pdf .cli-web-pdf__chapter-content {
    padding-left: 0;
    padding-right: 0;
    margin-left: 0;
    margin-right: 0;
    box-sizing: border-box;
}

/* Only immediate editor paragraphs; do not affect shortcode markup. */
.cli-web-pdf .cli-web-pdf__content-section > p,
.cli-web-pdf .cli-web-pdf__content-overlay > p,
.cli-web-pdf .cli-web-pdf__chapter-content > p {
    margin-top: 0;
    margin-bottom: 1em;
    padding-left: 0;
    padding-right: 0;
}

.cli-web-pdf .cli-web-pdf__content-section > p:last-child,
.cli-web-pdf .cli-web-pdf__content-overlay > p:last-child,
.cli-web-pdf .cli-web-pdf__chapter-content > p:last-child {
    margin-bottom: 0;
}

/* Shortcodes Ultimate: restore Visual Editor paragraph spacing inside spoilers.
   Existing site rules intentionally target direct-child paragraphs to avoid
   modifying generated Cooter/FacetWP markup. SU paragraphs are nested.
   Scope this rule to PDF chapter spoilers only. */
.cli-web-pdf .cli-web-pdf__chapter-content .su-spoiler-content > p {
    margin-top: 0 !important;
    margin-bottom: 20px !important;
}

.cli-web-pdf .cli-web-pdf__chapter-content .su-spoiler-content > p:last-of-type {
    margin-bottom: 0 !important;
}

/* Chapter text and accordion blocks retain a shared left edge. */
.cli-web-pdf .cli-web-pdf-accordion-section,
.cli-web-pdf .cli-web-pdf-accordion-section .cli-flex-inner {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
}

.cli-web-pdf .cli-web-pdf-accordion-section {
    margin-top: 0;
    margin-bottom: 0;
    background: transparent;
}

.cli-web-pdf .cli-web-pdf-accordion-section .cli-flex-inner {
    position: relative;
}

.cli-web-pdf .cli-web-pdf__chapter-block {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin-top: 24px;
}

.cli-web-pdf .cli-web-pdf__chapter-block--text > :first-child,
.cli-web-pdf .cli-web-pdf-accordion-section .cli-flex-accordion-intro > :first-child {
    margin-top: 0;
}

.cli-web-pdf .cli-web-pdf__chapter-block--text > :last-child,
.cli-web-pdf .cli-web-pdf-accordion-section .cli-flex-accordion-intro > :last-child {
    margin-bottom: 0;
}

.cli-web-pdf .cli-web-pdf-accordion-section .cli-flex-accordion,
.cli-web-pdf .cli-web-pdf-accordion-section .cli-flex-tabs,
.cli-web-pdf .cli-web-pdf-accordion-section .cli-flex-tablist,
.cli-web-pdf .cli-web-pdf-accordion-section .cli-flex-tab-panel {
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

/* Chapter anchors and deep-linked items clear a sticky header. */
.cli-web-pdf .cli-web-pdf__chapter,
.cli-web-pdf .cli-web-pdf-accordion-section .cli-flex-accordion-item,
.cli-web-pdf .cli-web-pdf-accordion-section .cli-flex-tab,
.cli-web-pdf .cli-web-pdf-accordion-section .cli-flex-tab-panel,
.cli-web-pdf #cli-web-pdf-top {
    scroll-margin-top: 100px;
}

/* Right-aligned Return to Top; prevents the theme's black active background. */
.cli-web-pdf .cli-web-pdf__return-top {
    clear: both;
    display: block;
    width: 100%;
    box-sizing: border-box;
    margin: 28px 0 0;
    padding: 0;
    text-align: right;
}

.cli-web-pdf .cli-web-pdf__return-top a,
.cli-web-pdf .cli-web-pdf__return-top a:link,
.cli-web-pdf .cli-web-pdf__return-top a:visited,
.cli-web-pdf .cli-web-pdf__return-top a:hover,
.cli-web-pdf .cli-web-pdf__return-top a:focus,
.cli-web-pdf .cli-web-pdf__return-top a:active {
    display: inline-block;
    color: #1f1f1f !important;
    background: transparent !important;
    box-shadow: none !important;
    text-decoration: underline !important;
    text-underline-offset: 3px;
}

.cli-web-pdf__modified {
    margin: 32px 0 0;
    text-align: right;
    font-size: 0.82rem;
}

/* Tablet / mobile */
@media (max-width: 782px) {
    .cli-web-pdf .cli-web-pdf__inner {
        padding-top: 32px;
    }

    .cli-web-pdf__top {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .cli-web-pdf__bookmarks {
        order: 2;
    }

    .cli-web-pdf .cli-web-pdf__top--horizontal .cli-web-pdf__bookmarks {
        padding: 20px;
    }

    .cli-web-pdf .cli-web-pdf__top--horizontal .cli-web-pdf__bookmarks-list {
        gap: 10px 18px;
    }

    .cli-web-pdf__modified {
        text-align: left;
    }
}

@media (max-width: 767px) {
    .cli-web-pdf .cli-web-pdf__chapter-block {
        margin-top: 20px;
    }
}

/* ============================================================
   CLI FLEXIBLE VIDEO SECTION — ALIGNED VIDEO GRID
   Subgrid shares title, description, and player row heights.
============================================================ */

.cli-flex-video-section {
    margin: 0 0 24px !important;
    font-weight: 400 !important;
}

.cli-flex-video-grid {
    display: grid;
    grid-template-columns: repeat(var(--cli-video-columns, 3), minmax(0, 1fr));
    column-gap: 28px;
    row-gap: 0;
    width: 100%;
}

.cli-flex-video-columns-3 { --cli-video-columns: 3; }
.cli-flex-video-columns-4 { --cli-video-columns: 4; }
.cli-flex-video-columns-5 { --cli-video-columns: 5; }

.cli-flex-video-card {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 3;
    row-gap: 0;
    min-width: 0;
    min-height: 0;
    margin-bottom: 44px;
    align-content: start;
}

.cli-flex-video-section .cli-flex-video-title {
    min-height: 0;
    margin: 0 !important;
    padding: 0 0 12px;
    border-bottom: 1px solid #cccccc;
    color: #222222;
    font-size: clamp(16px, 1.35vw, 20px) !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
    align-self: stretch;
}

.cli-flex-video-section .cli-flex-video-description {
    min-height: 0;
    margin: 0 !important;
    padding: 12px 0 18px;
    color: #222222;
    font-size: 15px !important;
    line-height: 1.5 !important;
    align-self: start;
}

.cli-flex-video-embed {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #17243b;
    align-self: start;
}

.cli-flex-video-embed-empty {
    background: transparent;
}

.cli-flex-video-embed iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

@media (max-width: 1023px) {
    .cli-flex-video-grid { --cli-video-columns: 2; }
}

@media (max-width: 639px) {
    .cli-flex-video-grid { --cli-video-columns: 1; }
    .cli-flex-video-card { margin-bottom: 32px; }
}


/* ============================================================
   CLI ENGAGE - BULLETED AND NUMBERED LISTS
   Scoped to page content only
   Does NOT affect WordPress admin bar or navigation
============================================================ */

/* List containers */
main ul,
main ol {
    font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    font-size: 16px !important;
    font-weight: 400;
    line-height: 1.65 !important;

    margin-top: 16px !important;
    margin-bottom: 16px !important;
    padding-left: 24px;
    padding-bottom: 0;
}

/* Individual list items */
main ul li,
main ol li {
    font-family: inherit !important;
    font-size: inherit !important;
    font-weight: inherit;
    line-height: inherit !important;

    margin-top: 0 !important;
    margin-bottom: 8px !important;
    padding-bottom: 0;
}

/* Remove extra spacing after last bullet */
main ul li:last-child,
main ol li:last-child {
    margin-bottom: 0 !important;
}

/* Per-tile title alignment */
.cli-flex-tiles-section .cli-flex-tile-title.cli-flex-tile-title--left { text-align: left; }
.cli-flex-tiles-section .cli-flex-tile-title.cli-flex-tile-title--center { text-align: center; }

/* Dotted underline on hover forces all hyperlinks to have a dotted line*/
a:hover,
:is(
    .entry-content,
    .cl-content-inner,
    .cl-main-content,
    .cli-flex-content,
    .cli-web-pdf__intro,
    .cli-web-pdf__chapter-content
) :is(p, li, blockquote, td) a:not(.btn):hover {
    text-decoration: underline dotted !important;
    text-underline-offset: 3px;
}



/* ============================================
   CLI ENGAGE - GLOBAL TABLE STYLING
   ============================================ */

table {
    width: 100%;
    max-width: 100%;
    table-layout: fixed;
}

table th,
table td {
    box-sizing: border-box;
    overflow-wrap: break-word;
    vertical-align: top;
}

/* Mobile */
@media (max-width: 600px) {
    table th,
    table td {
        padding: 8px;
        overflow-wrap: anywhere;
    }
}