/* ========================================
   THEME MAPPING TEMPLATE - MODULE LABELS
   ======================================== */

/* ========================================
   LOAD THIS CSS FILE LAST TO OVERRIDE main.hubl.css
   Import live-site-base.css first, then add aggressive overrides
   ======================================== */
/* Temporarily disabled for testing @import url("./live-site-base.css"); */

/* ========================================
   FONT-FAMILY OVERRIDES
   Use Gordita font like live site
   ======================================== */
:root {
  --font-family--gordita: "Gordita", Arial, sans-serif;
  --theme-heading-font-family: "Gordita", Arial, sans-serif !important;
  --theme-body-font-family: "Gordita", Arial, sans-serif !important;
}

/* Apply Gordita font globally - override ALL serif fonts */
/* Priority: Gordita -> Arial -> sans-serif */
/* This must override main.hubl.css, theme-overrides.hubl.css, and any HubSpot theme settings */
/*
html,
body,
*,
.theme-mapping-wrapper,
.theme-mapping-wrapper *:not(code):not(pre):not(kbd):not(samp),
h1, h2, h3, h4, h5, h6,
p, span, div, a, li, td, th,
.w-richtext,
.w-richtext *,
.text-rich-text,
.text-rich-text * {
  font-family: "Gordita", Arial, sans-serif !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
}
*/
/* Override any CSS variable-based font declarations 
* {
  font-family: "Gordita", Arial, sans-serif !important;
}
*/
/* Let modules handle their own colors - don't force gray everywhere */

/* Template-specific wrapper */
.theme-mapping-wrapper {
  /* Inherit all styles from live-site-base.css */
}

/* ========================================
   PRESERVE MODULE-SPECIFIC COLORS
   Hero carousel has white text - ensure it stays white
   Match live site where hero carousel text is white
   ======================================== */
.hero-carousel,
.hero-carousel *,
.hero-carousel h1,
.hero-carousel .hero-heading,
.hero-carousel .hero-subtext,
.hero-carousel .hero-subtext p,
.hero-textblock,
.hero-textblock *,
.hero-textblock h1,
.hero-textblock p,
/* Target specific selectors user mentioned */
#hs_cos_wrapper_dnd_area-module-12 .hero-heading,
#hs_cos_wrapper_dnd_area-module-12 .hero-subtext,
#hs_cos_wrapper_dnd_area-module-12 .hero-subtext p,
#hs_cos_wrapper_dnd_area-module-12 article h1,
#hs_cos_wrapper_dnd_area-module-12 > section > div > div > article .hero-heading,
#hs_cos_wrapper_dnd_area-module-12 > section > div > div > article .hero-subtext p,
#hs_cos_wrapper_dnd_area-module-12 > section > div > div > article h1 {
  color: #ffffff !important;
}

/* ========================================
   MODULE LABEL BANNER
   Thin blue banner with white text above each module
   ======================================== */
.module-label-banner {
  width: 100%;
  background-color: #0f68f8; /* Cisive blue */
  padding: 8px 20px;
  margin: 60px 0 20px 0;
  border: none;
}

.module-label-text {
  color: #ffffff !important; /* Keep white text for module labels */
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  line-height: 1.5;
  margin: 0; /* Remove default h2 margins */
  font-family: "Gordita", Arial, sans-serif !important;
}

/* Ensure module label h2 headings are semantic but styled as labels */
.module-label-banner h2.module-label-text {
  color: #ffffff !important;
  margin: 0;
  padding: 0;
}

/* First module banner - reduce top margin */
.theme-mapping-wrapper .dnd-section:first-of-type .module-label-banner {
  margin-top: 40px;
}

/* Remove default margins from banner's parent row */
.theme-mapping-wrapper .dnd-row:has(.module-label-banner) {
  margin-bottom: 0;
}

/* Add spacing between module label and module content */
.theme-mapping-wrapper .dnd-row:has(.module-label-banner) + .dnd-row {
  margin-top: 0;
}

/* Fallback for browsers that don't support :has() selector */
@supports not selector(:has(*)) {
  .theme-mapping-wrapper .dnd-row:first-child .module-label-banner {
    margin-top: 40px;
  }
}

/* ========================================
   CONTAINER WRAPPING FOR TYPOGRAPHY SECTION
   Note: Header/navigation uses 72rem, content uses 64rem
   Apply padding-global via CSS
   Target first dnd-section in theme-mapping-wrapper
   ======================================== */
.theme-mapping-wrapper .dnd-section:first-of-type {
  padding-left: 5% !important;
  padding-right: 5% !important;
}

.theme-mapping-wrapper .dnd-section:first-of-type .dnd-column {
  max-width: 64rem; /* 1152px - matches header .nav_container max-width */
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 479px) {
  .theme-mapping-wrapper .dnd-section:first-of-type {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

/* ========================================
   CONTAINER WRAPPING FOR MODULE SECTIONS
   Ensure sections are properly centered and have padding
   But allow modules to override with their own container classes
   Exclude FAQ modules and Stats Cards 2 that handle their own padding/centering
   ======================================== */
.theme-mapping-wrapper .dnd-section:not([class*="full-width"]):not(:first-of-type) .dnd-column:not(:has(.section-accordion)):not(:has(.section_faq)):not(:has(.section_stats)) {
  max-width: 64rem; /* 1152px - matches mirror site */
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: 5%;
  padding-right: 5%;
}

@media (max-width: 479px) {
  .theme-mapping-wrapper .dnd-section:not([class*="full-width"]):not(:first-of-type) .dnd-column:not(:has(.section-accordion)):not(:has(.section_faq)):not(:has(.section_stats)) {
    padding-left: 16px;
    padding-right: 16px;
  }
}

/* Allow modules with their own container classes to override on desktop */
/* BUT: Don't break FAQ module which needs its own padding-global and container-large */
/* On desktop, containers handle their own padding; on mobile, ensure minimum padding */
.theme-mapping-wrapper .dnd-section:not([class*="full-width"]):not(:first-of-type) .dnd-column .container-large:not(.section-accordion .container-large),
.theme-mapping-wrapper .dnd-section:not([class*="full-width"]):not(:first-of-type) .dnd-column .padding-global:not(.section-accordion .padding-global) {
  padding-left: 0;
  padding-right: 0;
  max-width: 100%;
}

/* Container-medium keeps its own padding - just constrain width */
.theme-mapping-wrapper .dnd-section:not([class*="full-width"]):not(:first-of-type) .dnd-column .container-medium {
  max-width: 100%;
}

/* MOBILE: Ensure all containers have minimum padding on small screens */
@media (max-width: 767px) {
  .theme-mapping-wrapper .dnd-section .dnd-column .container-large,
  .theme-mapping-wrapper .dnd-section .dnd-column .padding-global,
  .theme-mapping-wrapper .dnd-section .dnd-column .container-medium {
    padding-left: 5% !important;
    padding-right: 5% !important;
  }
}

@media (max-width: 479px) {
  .theme-mapping-wrapper .dnd-section .dnd-column .container-large,
  .theme-mapping-wrapper .dnd-section .dnd-column .padding-global,
  .theme-mapping-wrapper .dnd-section .dnd-column .container-medium {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
}

/* Single Column FAQ (dropdown-faq) - ensure it gets its full container-medium width */
/* Remove outer column padding to allow module to control its own padding */
.theme-mapping-wrapper .dnd-section .dnd-column:has(.section_faq) {
  padding-left: 0 !important;
  padding-right: 0 !important;
  max-width: 100% !important;
}

.theme-mapping-wrapper .section_faq {
  width: 100% !important;
  max-width: 100% !important;
}

.theme-mapping-wrapper .section_faq .container-medium {
  max-width: 64rem !important; /* 1024px - allow it to use full width */
  width: 100%;
  margin-left: auto !important;
  margin-right: auto !important;
}

.theme-mapping-wrapper .section_faq .padding-global {
  padding-left: 1rem !important;
  padding-right: 1rem !important;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

/* Ensure container-medium reaches its full width on desktop */
@media (min-width: 1024px) {
  .theme-mapping-wrapper .section_faq .container-medium {
    max-width: 64rem !important; /* 1024px */
  }
}

/* FAQ module - ensure it doesn't get double padding and centers properly */
/* Remove padding and max-width constraints from dnd-section and dnd-column when they contain the FAQ module */
.theme-mapping-wrapper .dnd-section:has(.section-accordion) {
  padding-left: 0 !important;
  padding-right: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.theme-mapping-wrapper .dnd-section .dnd-column:has(.section-accordion) {
  padding-left: 0 !important;
  padding-right: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Ensure the FAQ module section itself is full-width */
.theme-mapping-wrapper .section-accordion {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  display: block !important;
  position: relative !important;
}

/* Hide gradient background completely */
.theme-mapping-wrapper .section-accordion .gradient_underlay,
.theme-mapping-wrapper .section-accordion .gradient_image-right {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

/* Simplify padding-global - just full width with padding, no auto margins */
.theme-mapping-wrapper .section-accordion .padding-global {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 5% !important;
  padding-right: 5% !important;
  box-sizing: border-box !important;
  display: block !important;
}

@media (max-width: 479px) {
  .theme-mapping-wrapper .section-accordion .padding-global {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

/* Center container-large - this is the main centering mechanism */
/* Base max-width for standard screens */
.theme-mapping-wrapper .section-accordion .padding-global .container-large {
  max-width: 64rem !important; /* 1152px - matches other centered sections */
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  box-sizing: border-box !important;
  display: block !important;
}

/* Increase max-width on wider screens for better centering */
/* Add asymmetric padding (more on right) to help center content visually */
@media (min-width: 1360px) {
  .theme-mapping-wrapper .section-accordion .padding-global .container-large {
    max-width: 76rem !important; /* 1216px - slightly wider for 1360px+ */
    padding-left: 2rem !important;
    padding-right: 4rem !important; /* More padding on right to balance */
  }
}

@media (min-width: 1400px) {
  .theme-mapping-wrapper .section-accordion .padding-global .container-large {
    max-width: 80rem !important; /* 1280px - wider for large monitors */
    padding-left: 2rem !important;
    padding-right: 5rem !important;
  }
}

@media (min-width: 1600px) {
  .theme-mapping-wrapper .section-accordion .padding-global .container-large {
    max-width: 90rem !important; /* 1440px - even wider for very large monitors */
    padding-left: 2rem !important;
    padding-right: 6rem !important;
  }
}

/* Also ensure the direct container-large rule doesn't conflict */
.theme-mapping-wrapper .section-accordion .container-large {
  max-width: 64rem !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  box-sizing: border-box !important;
}

@media (min-width: 1360px) {
  .theme-mapping-wrapper .section-accordion .container-large {
    max-width: 76rem !important;
    padding-left: 2rem !important;
    padding-right: 4rem !important;
  }
}

@media (min-width: 1400px) {
  .theme-mapping-wrapper .section-accordion .container-large {
    max-width: 80rem !important;
    padding-left: 2rem !important;
    padding-right: 5rem !important;
  }
}

@media (min-width: 1600px) {
  .theme-mapping-wrapper .section-accordion .container-large {
    max-width: 90rem !important;
    padding-left: 2rem !important;
    padding-right: 6rem !important;
  }
}

/* Ensure padding-section-large doesn't interfere */
.theme-mapping-wrapper .section-accordion .padding-section-large {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  box-sizing: border-box !important;
}

/* Ensure accordion_component fills container-large and is centered */
.theme-mapping-wrapper .section-accordion .accordion_component {
  max-width: 100% !important;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  box-sizing: border-box !important;
}

/* Adjust grid column proportions on wider screens to help center content */
/* Make left column slightly wider and right column narrower to balance visual weight */
@media (min-width: 1360px) {
  .theme-mapping-wrapper .section-accordion .accordion_component {
    grid-template-columns: 1.1fr 0.9fr !important; /* Slightly favor left column */
  }
}

@media (min-width: 1400px) {
  .theme-mapping-wrapper .section-accordion .accordion_component {
    grid-template-columns: 1.15fr 0.85fr !important; /* More balance for larger screens */
  }
}

@media (min-width: 1600px) {
  .theme-mapping-wrapper .section-accordion .accordion_component {
    grid-template-columns: 1.2fr 0.8fr !important; /* Even more balance for very large screens */
  }
}

/* Stats Cards 2 (stats-section) - ensure it can go full-width like Stats Cards 1 */
/* Remove outer column padding to allow module to control its own width */
.theme-mapping-wrapper .dnd-section .dnd-column:has(.section_stats) {
  padding-left: 0 !important;
  padding-right: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Ensure the stats-section can go full-width */
.theme-mapping-wrapper .section_stats {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Ensure the stats_animation-component goes full-width (it uses 100vw) */
.theme-mapping-wrapper .stats_animation-component {
  width: 100vw !important;
}

/* Ensure container-large inside stats-section properly constrains content */
.theme-mapping-wrapper .section_stats .container-large {
  max-width: 64rem !important; /* 1152px - matches other centered sections */
  width: 100%;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ========================================
   SIMPLE HERO - EDGE-TO-EDGE BACKGROUND
   Make Simple Hero background bleed to edge like other banner sections
   ======================================== */
/* Remove outer column padding to allow module to control its own width */
.theme-mapping-wrapper .dnd-section:has(.section_hero) {
  padding-left: 0 !important;
  padding-right: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Ensure the section_hero can go full-width and bleed to edge */
.theme-mapping-wrapper .section_hero {
  width: 100vw !important;
  margin-inline: calc(50% - 50vw) !important;
  position: relative;
  overflow: visible;
}

/* Ensure the dnd-column doesn't constrain the hero */
.theme-mapping-wrapper .dnd-section:has(.section_hero) .dnd-column {
  padding-left: 0 !important;
  padding-right: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* ========================================
   TYPOGRAPHY SECTION - HEADING STYLES
   Match live site heading colors and line spacing
   Source: Live site CSS and module styles
   ======================================== */
/* Target headings in the first dnd-section (typography section) */
/* These rules now work because we removed the blocking inherit rules from live-site-base.css */
.theme-mapping-wrapper .dnd-section:first-of-type h1,
.theme-mapping-wrapper .dnd-section:first-of-type h2,
.theme-mapping-wrapper .dnd-section:first-of-type h3,
.theme-mapping-wrapper .dnd-section:first-of-type h4,
.theme-mapping-wrapper .dnd-section:first-of-type h5,
.theme-mapping-wrapper .dnd-section:first-of-type h6 {
  font-family: "Gordita", Arial, sans-serif !important;
  color: #0a337c !important; /* Dark blue - matches live site heading color */
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* Ensure all paragraph text in typography section uses proper colors and sizing */
.theme-mapping-wrapper .dnd-section:first-of-type p {
  color: #494A52 !important; /* Primary text color - matches live site */
  font-family: "Gordita", Arial, sans-serif !important;
  font-size: 1rem !important; /* 16px - standard body text size */
  line-height: 1.6 !important; /* Readable line height */
  margin-bottom: 1rem !important; /* Standard paragraph spacing */
}

/* Links in typography section use blue */
.theme-mapping-wrapper .dnd-section:first-of-type a:not(.button-primary):not(.button-secondary):not(.button-tertiary) {
  color: #0f68f8 !important; /* Cisive blue for links */
  text-decoration: none;
}

.theme-mapping-wrapper .dnd-section:first-of-type a:not(.button-primary):not(.button-secondary):not(.button-tertiary):hover {
  text-decoration: underline;
}

/* List items use proper color */
.theme-mapping-wrapper .dnd-section:first-of-type ul,
.theme-mapping-wrapper .dnd-section:first-of-type ol {
  color: #494A52 !important;
}

.theme-mapping-wrapper .dnd-section:first-of-type li {
  color: #494A52 !important;
}

/* H1 - Large heading for hero sections - responsive sizing like hero carousel */
.theme-mapping-wrapper .dnd-section:first-of-type h1 {
  font-size: clamp(28px, 4vw, 46px) !important; /* Responsive - scales from 28px to 46px, matches hero carousel */
  font-weight: 700 !important;
  line-height: 1.25 !important;
  margin-bottom: 2rem !important; /* Add space below Typography heading */
}

/* H2 - Section headings */
.theme-mapping-wrapper .dnd-section:first-of-type h2 {
  font-size: 2rem !important; /* 32px */
  font-weight: 500 !important;
  line-height: 1.37 !important;
  margin-top: 2rem !important; /* Add spacing between sections */
  margin-bottom: 1rem !important;
}

/* H3 - Subsection headings */
.theme-mapping-wrapper .dnd-section:first-of-type h3 {
  font-size: 1.5rem !important; /* 24px */
  font-weight: 500 !important;
  line-height: 1.25 !important;
  margin-top: 1.5rem !important;
  margin-bottom: 1rem !important;
}

/* H4 - Smaller headings */
.theme-mapping-wrapper .dnd-section:first-of-type h4 {
  font-size: 2rem !important; /* 32px */
  font-weight: 700 !important;
  line-height: 1.3 !important;
  margin-top: 1.5rem !important;
  margin-bottom: 1rem !important;
}

/* H5 - Minor headings */
.theme-mapping-wrapper .dnd-section:first-of-type h5 {
  font-size: 1.5rem !important; /* 24px */
  font-weight: 700 !important;
  line-height: 1.4 !important;
  margin-top: 1.25rem !important;
  margin-bottom: 1rem !important;
}

/* H6 - Smallest headings */
.theme-mapping-wrapper .dnd-section:first-of-type h6 {
  font-size: 1.25rem !important; /* 20px */
  font-weight: 700 !important;
  line-height: 1.4 !important;
  margin-top: 1.25rem !important;
  margin-bottom: 1rem !important;
}

/* First h1 should have no top margin */
.theme-mapping-wrapper .dnd-section:first-of-type h1:first-child {
  margin-top: 0;
}

/* ========================================
   BUTTON VARIANTS STYLING (Button Module)
   All buttons use the Button module with variant selector
   ======================================== */

/* Primary Button (button-secondary from live site - exact match) */
/* Source: https://cdn.prod.website-files.com/65cf010a22aa72c96c77d22e/css/cisive-dev.shared.273643dd8.min.css */
.theme-mapping-wrapper .button-primary {
  background-color: var(--color-neutral--white, #ffffff);
  color: var(--color-brand--cisive-blue, #0f68f8);
  text-align: center;
  border-radius: 2.5rem; /* 40px */
  padding: 0.75rem 1.5rem; /* 12px 24px */
  font-size: 0.875rem; /* 14px */
  font-weight: 500;
  font-family: "Gordita", Arial, sans-serif !important;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s cubic-bezier(0.215, 0.61, 0.355, 1), box-shadow 0.2s cubic-bezier(0.215, 0.61, 0.355, 1);
  border: none;
  cursor: pointer;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin: 0.5rem 0.5rem 0.5rem 0;
}

.theme-mapping-wrapper .button-primary:hover,
.theme-mapping-wrapper .button-primary:focus {
  background-image: linear-gradient(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05));
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  color: var(--color-brand--cisive-blue, #0f68f8) !important; /* Ensure text stays blue on hover */
  -webkit-text-fill-color: var(--color-brand--cisive-blue, #0f68f8) !important; /* Override webkit text fill */
}

/* Secondary Button (button-nav from live site navigation - exact match) */
/* Used in top navigation - matches .button-nav from live site CSS exactly */
/* Source: https://cdn.prod.website-files.com/65cf010a22aa72c96c77d22e/css/cisive-dev.shared.273643dd8.min.css */
.theme-mapping-wrapper .button-secondary {
  background-color: var(--color-brand--cisive-blue, #0f68f8);
  color: var(--color-neutral--white, #ffffff);
  text-align: center;
  border-radius: 2.5rem; /* 40px */
  padding: 0.75rem 1.5rem; /* 12px 24px */
  font-size: 0.875rem; /* 14px */
  font-weight: 500;
  font-family: "Gordita", Arial, sans-serif !important;
  text-decoration: none;
  display: inline-block;
  cursor: pointer;
  border: 0;
  outline: 0;
  transition: background-color 0.2s cubic-bezier(0.215, 0.61, 0.355, 1), box-shadow 0.2s cubic-bezier(0.215, 0.61, 0.355, 1);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin: 0.5rem 0.5rem 0.5rem 0;
  box-sizing: border-box;
  line-height: inherit;
  -webkit-text-fill-color: inherit;
}

.theme-mapping-wrapper .button-secondary:hover,
.theme-mapping-wrapper .button-secondary:focus {
  background-color: var(--color-brand--cisive-blue, #0f68f8) !important; /* Keep blue background on hover */
  background-image: linear-gradient(#0000000d, #0000000d) !important; /* Exact match: rgba(0,0,0,0.05) overlay */
  box-shadow: 0 2px 6px #0003 !important; /* Exact match: rgba(0,0,0,0.2) */
  color: var(--color-neutral--white, #ffffff) !important; /* Ensure text stays white on hover */
  -webkit-text-fill-color: var(--color-neutral--white, #ffffff) !important; /* Override webkit text fill */
}

/* Mobile responsiveness - smaller padding and font size on mobile */
@media screen and (max-width: 479px) {
  .theme-mapping-wrapper .button-secondary {
    padding: 0.5rem 1rem;
    font-size: 0.85rem;
  }
}

/* Tertiary Button (White button with blue border - for white backgrounds) */
/* Source: https://cdn.prod.website-files.com/65cf010a22aa72c96c77d22e/css/cisive-dev.shared.273643dd8.min.css */
.theme-mapping-wrapper .button-tertiary {
  border: 2px solid var(--color-brand--cisive-blue, #0f68f8);
  background-color: var(--color-neutral--white, #ffffff);
  color: var(--color-brand--cisive-blue, #0f68f8);
  text-align: center;
  border-radius: 2.5rem; /* 40px */
  align-self: flex-start;
  padding: 0.75rem 1.5rem; /* 12px 24px */
  font-size: 0.875rem; /* 14px */
  font-weight: 500;
  font-family: "Gordita", Arial, sans-serif !important;
  text-decoration: none;
  display: inline-block;
  cursor: pointer;
  transition: background-color 0.2s cubic-bezier(0.215, 0.61, 0.355, 1), box-shadow 0.2s cubic-bezier(0.215, 0.61, 0.355, 1);
  box-shadow: rgba(0, 0, 0, 0.04) 0px 0.376796px 1.13039px 0px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin: 0.5rem 0.5rem 0.5rem 0;
  box-sizing: border-box;
  line-height: inherit;
  -webkit-text-fill-color: inherit;
}

.theme-mapping-wrapper .button-tertiary:hover,
.theme-mapping-wrapper .button-tertiary:focus {
  background-image: linear-gradient(rgba(0, 0, 0, 0.031), rgba(0, 0, 0, 0.031));
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  color: var(--color-brand--cisive-blue, #0f68f8) !important; /* Ensure text stays blue on hover */
  -webkit-text-fill-color: var(--color-brand--cisive-blue, #0f68f8) !important; /* Override webkit text fill */
}

/* ========================================
   HORIZONTAL RULES (HR)
   Thin, light gray horizontal dividers matching mirror site
   ======================================== */
.theme-mapping-wrapper hr {
  border: none;
  border-top: 1px solid #e3e3e3;
  height: 0;
  margin: 2rem 0;
  width: 100%;
  box-sizing: content-box;
}

/* Horizontal rules in typography section */
.theme-mapping-wrapper .dnd-section:first-of-type hr {
  border-top: 1px solid #e3e3e3;
  margin: 2rem 0;
  height: 0;
  width: 100%;
}

/* ========================================
   CODE BLOCK STYLING
   Monospace font, light gray background, indented
   ======================================== */
.theme-mapping-wrapper pre {
  background-color: #f5f5f5;
  border-radius: 0.25rem;
  padding: 1rem 1.5rem;
  margin: 1rem 0;
  overflow-x: auto;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace !important;
  font-size: 0.875rem;
  line-height: 1.6;
  color: #333;
  border: 1px solid #e0e0e0;
}

.theme-mapping-wrapper pre code {
  background-color: transparent;
  padding: 0;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace !important;
  font-size: inherit;
  color: inherit;
  border: none;
  white-space: pre;
  word-wrap: normal;
}

/* Inline code - different from code inside pre blocks */
.theme-mapping-wrapper code:not(pre code) {
  background-color: #f5f5f5;
  padding: 0.125rem 0.375rem;
  border-radius: 0.125rem;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace !important;
  font-size: 0.875rem;
  color: #d73a49;
  border: 1px solid #e0e0e0;
  display: inline;
  vertical-align: baseline;
}

/* ========================================
   TABLE STYLING
   Pretty table with blue colors matching site theme
   ======================================== */
.theme-mapping-wrapper .dnd-section:first-of-type table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5rem 0;
  font-family: "Gordita", Arial, sans-serif !important;
  border: 1px solid #e0e0e0;
  border-radius: 0.5rem;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* Table header styling */
.theme-mapping-wrapper .dnd-section:first-of-type thead {
  background-color: #f5f7fa;
}

.theme-mapping-wrapper .dnd-section:first-of-type th {
  color: #0a337c !important; /* Dark blue matching headings */
  font-weight: 600;
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 1rem 1.25rem;
  text-align: left;
  border-bottom: 2px solid #0f68f8; /* Cisive blue accent */
  font-family: "Gordita", Arial, sans-serif !important;
}

/* Table body styling */
.theme-mapping-wrapper .dnd-section:first-of-type tbody tr {
  border-bottom: 1px solid #e0e0e0;
  transition: background-color 0.2s ease;
}

.theme-mapping-wrapper .dnd-section:first-of-type tbody tr:hover {
  background-color: #f8f9fa;
}

.theme-mapping-wrapper .dnd-section:first-of-type tbody tr:last-child {
  border-bottom: none;
}

.theme-mapping-wrapper .dnd-section:first-of-type td {
  color: #0a337c !important; /* Dark blue for table cells */
  padding: 1rem 1.25rem;
  font-size: 0.875rem;
  line-height: 1.5;
  font-family: "Gordita", Arial, sans-serif !important;
}

/* Table footer styling */
.theme-mapping-wrapper .dnd-section:first-of-type tfoot {
  background-color: #f5f7fa;
  border-top: 2px solid #e0e0e0;
}

.theme-mapping-wrapper .dnd-section:first-of-type tfoot td {
  color: #0a337c !important; /* Dark blue for footer */
  font-weight: 500;
  padding: 1rem 1.25rem;
  font-size: 0.875rem;
  font-family: "Gordita", Arial, sans-serif !important;
}

/* ========================================
   BUTTON SHOWCASE - ALL VARIANTS SIDE-BY-SIDE
   Center and display all button variants in a row
   Module 22 is the button showcase section
   ======================================== */
/* Center the row containing the button variants */
.theme-mapping-wrapper .dnd-section:nth-of-type(22) .dnd-row:nth-of-type(2) {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 2rem;
  padding: 2rem 0;
  max-width: 64rem;
  margin-left: auto;
  margin-right: auto;
}

/* Ensure columns within button row maintain their width but are centered */
.theme-mapping-wrapper .dnd-section:nth-of-type(22) .dnd-row:nth-of-type(2) .dnd-column {
  flex: 1;
  min-width: 250px;
  max-width: 350px;
  text-align: left; /* Text inside columns should be left-aligned */
}

/* ========================================
   CENTER MODULES WITHIN THEIR SECTIONS
   Ensure Services Icons, Two Column modules are centered
   ======================================== */
/* Services Icons module - ensure it's centered */
.theme-mapping-wrapper .services-icons,
.theme-mapping-wrapper .services-icons__inner {
  margin-left: auto !important;
  margin-right: auto !important;
  max-width: 64rem !important;
}

/* Two Column - Badge Image and Text module */
.theme-mapping-wrapper .movement-badge,
.theme-mapping-wrapper .movement-badge__inner {
  margin-left: auto !important;
  margin-right: auto !important;
  max-width: 64rem !important;
}

/* Two Column - Text and Image module */
.theme-mapping-wrapper .movement-mission,
.theme-mapping-wrapper .movement-mission__inner {
  margin-left: auto !important;
  margin-right: auto !important;
  max-width: 64rem !important;
}