/* 
 * Enhanced Maturity Model Results CSS
 * A modern, clean UI for displaying maturity model assessment results
 * With improved responsive design for all device sizes
 */

/* Root variables for consistent styling */
:root {
  /* Primary color palette */
  --primary-color: #1d7a85;
  --primary-dark: #16606a;
  --primary-light: #e6f1f2;
  --secondary-color: #23282d;
  --primary-red: #BB3200;
  --light-red: #feeee9;
  --off-white-bg: #FAFAFA;
  --dark-grey: #313131;
  
  /* Bar chart colors - distinctive but harmonious palette */
  --bar1: #FFDB5D;
  --bar1-border: #937E35;
  --bar2: #A1D76D;
  --bar2-border: #5A793D;
  --bar3: #04CAA8;
  --bar3-border: #007D68;
  --bar4: #06B0CC;
  --bar4-border: #047386;
  --bar5: #007FA7;
  --bar5-border: #00475D;
  --bar6: #06B0CC;
  --bar6-border: #047386;
  --bar7: #FFDB5D;
  --bar7-border: #937E35;
  
  /* Neutral colors */
  --light-gray: #f5f7f9;
  --mid-gray: #e0e5e9;
  --dark-gray: #718096;
  --text-color: #2d3748;
  --text-light: #718096;
  
  /* Status colors */
  --success: #38a169;
  --warning: #e9b949;
  --danger: #e53e3e;
  
  /* Layout variables */
  --border-radius: 8px;
  --box-shadow: 0 4px 6px rgba(0, 0, 0, 0.07);
  --card-padding: 24px;
  --content-width: 1000px;
  --content-width-xl: 1200px;

  /* Accordion Colors */
  --accordion-color: #FAFAFA;
  --accordion-border-color: #DDDBDB;
  --accordion-button-text-color: #313131;
  
  /* Standardized Breakpoints (for reference) */
  --breakpoint-xs: 576px;   /* Extra small devices (phones) */
  --breakpoint-sm: 768px;   /* Small devices (landscape phones) */
  --breakpoint-md: 992px;   /* Medium devices (tablets) */
  --breakpoint-lg: 1200px;  /* Large devices (desktops) */
  --breakpoint-xl: 1400px;  /* Extra large devices (large desktops) */
}

/* Debug Styles */
.mmrm-debug-panel {
	background: #f5f5f5;
	border: 1px solid #ddd;
	padding: 15px;
	margin: 20px 0;
	font-family: monospace;
}
.mmrm-debug-settings {
	background: #fff;
	border: 1px solid #ccc;
	padding: 10px 15px;
	margin-bottom: 20px;
	border-radius: 4px;
}
.mmrm-debug-dimension {
	border: 1px solid #ccc;
	padding: 10px;
	margin-bottom: 15px;
	background: #fff;
}
.mmrm-debug-statements {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: 15px;
}
.mmrm-debug-statements th, 
.mmrm-debug-statements td {
	border: 1px solid #ddd;
	padding: 5px;
	text-align: left;
}
.mmrm-debug-statements th {
	background: #eee;
}
.mmrm-debug-panel h4 {
	margin-top: 15px;
	margin-bottom: 10px;
	color: #333;
}
.mmrm-debug-panel h5 {
	margin-top: 10px;
	margin-bottom: 5px;
}
.mmrm-debug-panel ul {
	list-style-type: disc;
	margin-left: 20px;
}

/* Bar colors for dimension scores */
.bar-1 { background: var(--bar1); border: 2px solid var(--bar1-border);}
.bar-2 { background: var(--bar2); border: 2px solid var(--bar2-border); }
.bar-3 { background: var(--bar3); border: 2px solid var(--bar3-border); }
.bar-4 { background: var(--bar4); border: 2px solid var(--bar4-border); }
.bar-5 { background: var(--bar5); border: 2px solid var(--bar5-border); }
.bar-6 { background: var(--bar6); border: 2px solid var(--bar6-border); }
.bar-7 { background: var(--bar7); border: 2px solid var(--bar7-border); }

.page-template-maturity-model-results-template .page-content
{
	padding-bottom:0;
}

  .mobile-only
  {
	  display:none;
  }

/* Reset and base styles */
.maturity-results {
  max-width: 100%;
  width: var(--content-width);
  margin: 0 auto;
  padding: 20px;
  color: var(--text-color);
  font-family: 'Work Sans';
  line-height: 1.6;
  background-color: #F9F9F9;
  padding-top: 0px;
  box-sizing: border-box;
}

.maturity-results * {
  box-sizing: border-box;
}

/* Full-width section wrappers */
.mmrm-section-wrapper {
  width: 100vw;
  margin: 0;
  padding: 40px 0;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

/* Different background colors for different sections */
.mmrm-section-wrapper.overall-section {
  background-color: #F9F9F9;
  padding-top:0;
}

.mmrm-section-wrapper.snapshot-section-table,
.mmrm-section-wrapper.snapshot-section-results, .mmrm-section-wrapper.second-editor {
  background-color: #ffffff;
}

.mmrm-section-wrapper.details-section {
  background-color: #F9F9F9;
}

.mmrm-section-wrapper.commentaries-section {
  background-color: #eef5f7;
}

.mmrm-section-wrapper.dimension-description-section
{
	padding-top:0;
}

/* Container for content inside the full-width wrapper */
.mmrm-section-content {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 0 20px;
  width: 100%;
}

.snapshot-section-table .mmrm-section-content {
  overflow: auto;
}

/* Callout box styling */
.callout-box {
  margin: 1em 0 2em;
  padding: 1.5em;
  border-radius: 10px;
}
.callout-box h2, .callout-box h3, .callout-box h4, .callout-box h5, .callout-box h6 {
  margin: 0 0 10px; 
}

.callout-box-pink {
  background: #fdeaef;
}
.callout-box-blue {
  background: #ecf9fb;
}
.callout-box-orange {
  background: #feeee9;
}

.callout-box-pink h2, .callout-box-pink h3, .callout-box-pink h4, .callout-box-pink h5, .callout-box-pink h6 {
  color: #c11040;
}
.callout-box-blue h2, .callout-box-blue h3, .callout-box-blue h4, .callout-box-blue h5, .callout-box-blue h6 {
  color: #1d7a85;
}
.callout-box-orange h2, .callout-box-orange h3, .callout-box-orange h4, .callout-box-orange h5, .callout-box-orange h6 {
  color: #BB3200;
}

a.callout-cta-blue {
  font-size: 16px; 
  background: #1d7a85;
  color: white;
  text-decoration: none;
  padding: 6px;
  border-radius: 5px;
}

a.callout-cta-pink {
  font-size: 16px; 
  background: #c11040;
  color: white;
  text-decoration: none;
  padding: 6px;
  border-radius: 5px;
}
a.callout-cta-orange {
  font-size: 16px;
  color: white;
  text-decoration: none;
  padding: 6px;
  border-radius: 5px;
  background: #BB3200;
}

/* CTA Box Styling */
.mmrm-cta.callout-box {
  background-color: #FEE8E1;
  border-radius: 12px;
  padding: 20px 30px;
  margin: 30px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  width: 80%;
  max-width: 100%;
}

/* CTA content container */
.mmrm-cta .mmrm-cta-content {
  flex: 1;
  min-width: 300px;
}

/* CTA heading - first h2/h3 in the content */
.mmrm-cta .mmrm-cta-content h2,
.mmrm-cta .mmrm-cta-content h3 {
  color: #BB3200;
  margin-top: 0;
  margin-bottom: 10px;
  font-weight: 600;
}

/* CTA paragraph text */
.mmrm-cta .mmrm-cta-content p {
  margin-bottom: 0;
  color: #333;
  font-size: 16px;
  line-height: 1.5;
}

/* CTA button container */
.mmrm-cta .mmrm-cta-button {
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  margin-left: 30px;
}

/* CTA button link */
.mmrm-cta .mmrm-cta-button a.callout-cta-orange {
  background-color: #BB3200;
  color: white;
  text-decoration: none;
  padding: 12px 20px;
  border-radius: 4px;
  font-weight: 500;
  white-space: nowrap;
  transition: background-color 0.2s ease-in-out;
}

.mmrm-cta .mmrm-cta-button a.callout-cta-orange:hover {
  background-color: #9A2800;
}

.callout-message-link {
  display: inline-flex;
}
.message-para
{
	max-width:450px;
}

.callout-link.link-orange {
  display: block;
}

/* Blue variant */
.mmrm-cta.callout-box-blue {
  background-color: #ECF9FB;
}

.mmrm-cta.callout-box-blue .mmrm-cta-content h2,
.mmrm-cta.callout-box-blue .mmrm-cta-content h3 {
  color: #1D7A85;
}

.mmrm-cta .mmrm-cta-button a.callout-cta-blue {
  background-color: #1D7A85;
  text-decoration: none;
  padding: 12px 20px;
  border-radius: 4px;
  font-weight: 500;
  white-space: nowrap;
  transition: background-color 0.2s ease-in-out;
}

.mmrm-cta .mmrm-cta-button a.callout-cta-blue:hover {
  background-color: #16606A;
}

/* Pink variant */
.mmrm-cta.callout-box-pink {
  background-color: #FDEAEF;
}

.mmrm-cta.callout-box-pink .mmrm-cta-content h2,
.mmrm-cta.callout-box-pink .mmrm-cta-content h3 {
  color: #C11040;
}

.mmrm-cta .mmrm-cta-button a.callout-cta-pink {
  background-color: #C11040;
  text-decoration: none;
  padding: 12px 20px;
  border-radius: 4px;
  font-weight: 500;
  white-space: nowrap;
  transition: background-color 0.2s ease-in-out;
}

.mmrm-cta .mmrm-cta-button a.callout-cta-pink:hover {
  background-color: #A00D35;
}

/* Typography */
.maturity-results h1 {
  font-size: 2.5rem;
  font-weight: 700;
  margin: 1.5rem 0;
  color: var(--primary-color);
  text-align: center;
  line-height: 1.2;
}

.maturity-results h2 {
  font-size: 1.75rem;
  font-weight: 600;
  margin: 1.5rem 0 1rem;
  color: var(--secondary-color);
}

.maturity-results h3 {
  font-size: 1.35rem;
  font-weight: 600;
  margin: 1.25rem 0 0.75rem;
  color: var(--secondary-color);
}

.maturity-results h4 {
  font-size: 1.1rem;
  font-weight: 600;
  margin: 1rem 0 0.5rem;
  color: var(--text-color);
}

.maturity-results p {
  margin: 0 0 1rem;
}

.maturity-results strong {
  font-weight: 600;
  color: var(--secondary-color);
}

/* Overall Score Section */
.overall-score-section {
  background: var(--light-gray);
  border-radius: var(--border-radius);
  padding: var(--card-padding);
  margin-bottom: 2rem;
  box-shadow: var(--box-shadow);
  text-align: center;
}

.overall-score-section h2 {
  margin-top: 0;
  font-size: 1.3rem;
  color: var(--text-light);
}

.overall-score-value {
  font-size: 3rem;
  font-weight: 700;
  color: var(--primary-color);
  margin: 1rem 0;
}

.overall-score-label {
  display: inline-block;
  padding: 0.4rem 0.8rem;
  background: var(--primary-color);
  color: white;
  border-radius: 20px;
  font-weight: 600;
  margin: 0.5rem 0;
}

/* Persistent Results URL */
.persistent-url {
  background: #fff;
  border: 1px solid var(--mid-gray);
  border-radius: var(--border-radius);
  padding: 15px;
  margin: 1.5rem 0;
  font-size: 0.9rem;
  color: var(--text-light);
}

.persistent-url a {
  color: var(--primary-color);
  word-break: break-all;
  text-decoration: none;
}

.persistent-url a:hover {
  text-decoration: underline;
}

/* Snapshot Table Styling */
.snapshot-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin: 2rem 0;
  border-radius: 0;
  overflow: hidden;
  box-shadow: none;
}

.snapshot-table thead th {
  padding: 12px 15px;
  font-weight: 600;
  text-align: left;
  font-size: 1rem;
  background-color: var(--off-white-bg);
  color: var(--dark-grey);
  font-size: 18px;
  font-family: "Work Sans";
}

.snapshot-table thead tr:first-child th:first-child {
  border-top-left-radius: var(--border-radius);
}

.snapshot-table thead tr:last-child th:first-child {
  border-bottom-left-radius: 0;
}

.snapshot-table thead tr.levels-header th {
  padding: 8px 15px;
  text-align: center;
  min-width: 120px;
}

.snapshot-table thead tr.levels-descriptions td {
  background: var(--primary-light);
  font-size: 0.8rem;
  padding: 8px 10px;
  text-align: center;
  color: var(--text-color);
}

.snapshot-table tbody tr {
  transition: background-color 0.2s;
}

.snapshot-table tbody tr:nth-child(odd) th {
  background-color: #fcfdfe;
}

.snapshot-table tbody tr:nth-child(even) th {
  background-color: #f8fafc;
}

.snapshot-table tbody tr:nth-child(odd) {
  background-color: #fcfdfe;
}

.snapshot-table tbody tr:nth-child(even) {
  background-color: #f8fafc;
}

.snapshot-table tbody th {
  border-top: 1px solid var(--mid-gray);
  font-size: 18px;
  font-family: "Work Sans";
}

.snapshot-table tbody td {
  padding: 12px 15px;
  vertical-align: middle;
  border-top: 1px solid var(--mid-gray);
}

/* Dimension Column Styling */
.dimension-col {
  width: 35%;
  background-color: #fff;
  vertical-align: middle;
  text-align: left;
  padding: 15px 0 15px 0;
}

.dim-icon {
  display: inline-block;
  width: 28px;
  height: 28px;
  margin-right: 5px;
  vertical-align: middle;
}

.dim-icon img {
  max-width: 100%;
  height: auto;
  display: block;
}

.dim-name {
  font-weight: 600;
  display: inline-block;
  vertical-align: middle;
  margin-bottom: 4px;
  color: var(--secondary-color);
}

.dim-desc {
  font-size: 16px;
  color: var(--text-color);
  margin-top: 5px;
  display: block;
  font-weight: 400;
  width: 85%;
  padding-right: 20px;
}

/* Bars Cell and Score Visualization */
.bars-cell {
  position: relative;
  padding-top: 25px !important;
  padding-bottom: 25px !important;
}

.dim-bar {
  height: 43.18px;
  border-radius: 0;
  transition: width 0.8s cubic-bezier(0.23, 1, 0.32, 1);
  position: relative;
  overflow: hidden;
}

.dim-bar::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.2) 50%, rgba(255,255,255,0.1) 100%);
  background-size: 200% 100%;
  animation: shine 2s infinite;
}

@keyframes shine {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* Chart Bar Container and Rating Labels */
.chart-bar-container {
  width: 100%;
  position: relative;
  margin-top: 10px;
}

.chart-bar {
  background: var(--mid-gray);
  border-radius: 12px;
  height: 24px;
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.1);
}

.bar-fill {
  height: 100%;
  border-radius: 12px;
  position: relative;
  transition: width 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}

.chart-rating-labels {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  font-size: 0.75rem;
  color: var(--text-light);
}

.chart-rating-labels span {
  flex: 1;
  text-align: center;
  padding: 0 5px;
}

/* Label descriptions */
/* Dimension Scores List */
.mmrm-level-descriptions, .mmrm-dimension-descriptions {
  list-style: none;
  padding: 0;
  margin: 2rem 0;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

li.mmrm-level-description, .mmrm-dimension-description  {
  flex: 1 1 calc(33.333% - 20px);
  background: #fff;
  padding: 15px;
  box-shadow: var(--box-shadow);
  border: 1px solid var(--mid-gray);
  transition: transform 0.2s, box-shadow 0.2s;
}

li.mmrm-level-description:hover {

}

li.mmrm-level-description strong, li.mmrm-dimension-description strong {
  display: block;
  margin-bottom: 5px;
  color: var(--secondary-color);
}

li.mmrm-level-description.level-1 {border-top: 3px solid var(--bar1);}
li.mmrm-level-description.level-2 {border-top: 3px solid var(--bar2); }
li.mmrm-level-description.level-3 {border-top: 3px solid var(--bar3); }
li.mmrm-level-description.level-4 {border-top: 3px solid var(--bar4); }
li.mmrm-level-description.level-5 {border-top: 3px solid var(--bar5); }

/* Dimension Scores List */
.dimension-scores {
  list-style: none;
  padding: 0;
  margin: 2rem 0;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.dimension-scores li {
  flex: 1 1 calc(33.333% - 20px);
  background: #fff;
  padding: 15px;
  border-radius: var(--border-radius);
  box-shadow: var(--box-shadow);
  border: 1px solid var(--mid-gray);
  transition: transform 0.2s, box-shadow 0.2s;
}

.dimension-scores li:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.09);
}

.dimension-scores li strong {
  display: block;
  margin-bottom: 5px;
  color: var(--secondary-color);
}

/* Result Item Styling */
.result-item {
  /* Basic styling for result items */
}

.result-item h2 {
  margin-top: 0;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--mid-gray);
  color: var(--primary-color);
}

.result-content {
  margin-bottom: 1.5rem;
}

.result-image {
  margin: 1.5rem 0;
  text-align: center;
}

.result-image img {
  max-width: 100%;
  height: auto;
  border-radius: var(--border-radius);
  box-shadow: var(--box-shadow);
}

div.maturity-results :nth-child(1 of div.accordion-result) {
  margin-top: 20px;
}

/* How can intopia help */
/* Two-column layout for recommendations section */
.result-recommendations-flex {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 30px;
}

.result-recommendations-content {
  flex: 1;
  /*min-width: 300px;*/
}

.result-recommendations-image {
  flex: 0 0 auto;
  max-width: 40%;
}

.intopia-help-image {
  max-width: 100%;
  height: auto;
  border-radius: var(--border-radius);
}

/* Commentaries Header */
.commentaries-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  border-bottom: 1px solid var(--mid-gray);
  margin-bottom: 15px;
}

.commentaries-header h3 {
  margin-top: 0;
  margin-bottom: 0;
}

/* Statement Commentaries */
.statement-commentaries {
  margin: 1.5rem 0;
  padding: 15px;
  background: var(--light-gray);
  border-radius: var(--border-radius);
}

.statement-commentaries h3 {
  margin-top: 0;
  color: var(--secondary-color);
  padding-bottom: 10px;
}

.statement-commentary {
  background: #fff;
  padding: 15px;
  margin-bottom: 15px;
  border-radius: var(--border-radius);
  box-shadow: var(--box-shadow);
}

.statement-commentary h4 {
  margin-top: 0;
  color: var(--primary-color);
}

.statement-commentary-content {
  font-size: 0.95rem;
}

/* Recommendations Section */
.result-recommendations {
  margin-top: 1.5rem;
  padding: 20px;
  background: var(--off-white-bg);
  border-radius: var(--border-radius);
  position: relative;
}

.result-recommendations h3 {
  margin-top: 0;
  color: var(--primary-red);
  padding-bottom: 10px;
}

.result-recommendations p {
  color: var(--text-color);
}

/* Call to Action Button */
.cta-container {
  text-align: center;
  margin: 2rem 0;
}

.cta-button {
  display: inline-block;
  padding: 12px 24px;
  background: var(--primary-color);
  color: white;
  font-weight: 600;
  text-decoration: none;
  border-radius: 30px;
  transition: all 0.2s;
  box-shadow: 0 4px 6px rgba(0, 115, 170, 0.2);
}

.cta-button:hover {
  background: var(--primary-dark);
  transform: translateY(-2px);
  box-shadow: 0 6px 8px rgba(0, 115, 170, 0.25);
}

/* 
 * Pill Component Styles
 */

/* Base Pill Style */
.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.4em 0.9em;
  margin-bottom: 0.5em;
  border-radius: 1.5em;
  font-size: 0.875em;
  font-weight: 600;
  line-height: 1.4;
  white-space: break-spaces;
  transition: all 0.2s ease;
  font-family: "Open Sans", sans-serif;
}

/* Primary Pill - using your maturity-teal color */
.pill-primary {
  background-color: var(--primary-color);
  color: #fff;
}

.pill-primary:hover {
  background-color: #166770;
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Secondary Pill */
.pill-secondary {
  background-color: var(--dark-gray);
  color: #fff;
}

.pill-secondary:hover {
  background-color: #65606a;
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Outlined Pill Variants */
.pill-outline-primary {
  background-color: transparent;
  color: var(--primary-color);
  border: 1px solid var(--primary-color);
}

.pill-outline-primary:hover {
  background-color: rgba(29, 122, 133, 0.1);
  transform: translateY(-1px);
}

.pill-outline-secondary {
  background-color: transparent;
  color: var(--dark-gray);
  border: 1px solid var(--dark-gray);
}

.pill-outline-secondary:hover {
  background-color: rgba(123, 116, 117, 0.1);
  transform: translateY(-1px);
}

/* Status Pills */
.pill-success {
  background-color: #38a169;
  color: #fff;
}

.pill-success:hover {
  background-color: #2f855a;
}

.pill-warning {
  background-color: #e9b949;
  color: #fff;
}

.pill-warning:hover {
  background-color: #d69e2e;
}

.pill-danger {
  background-color: var(--primary-red);
  color: #fff;
}

.pill-danger:hover {
  background-color: #a11d02;
}

.pill-info {
  background-color: var(--primary-color);
  color: #fff;
}

.pill-info:hover {
  background-color: #00659c;
}

/* Light Variants - with colored text and light backgrounds */
.pill-light-primary {
  background-color: rgba(29, 122, 133, 0.1);
  color: var(--primary-color);
}

.pill-light-primary:hover {
  background-color: rgba(29, 122, 133, 0.2);
}

.pill-light-danger {
  background-color: rgba(195, 35, 7, 0.1);
  color: var(--primary-red);
}

.pill-light-danger:hover {
  background-color: rgba(195, 35, 7, 0.2);
}

.pill-light-info {
  background-color: rgba(1, 119, 169, 0.1);
  color: var(--primary-color);
}

.pill-light-info:hover {
  background-color: rgba(1, 119, 169, 0.2);
}

/* Size Variations */
.pill-sm {
  padding: 0.4em 0.75em;
  margin-bottom: 0.5em;
  font-size: 0.75em;
}

.pill-lg {
  padding: 0.6em 1.15em;
  font-size: 1em;
}

/* Pill with icon */
.pill-with-icon {
  display: inline-flex;
  align-items: center;
}

.pill-with-icon .icon {
  margin-right: 0.35em;
  font-size: 0.85em;
}

.pill-with-icon .icon-right {
  margin-left: 0.35em;
  margin-right: 0;
}

/* Pills can be links */
a.pill {
  text-decoration: none;
}

a.pill:focus {
  outline: 2px solid #000;
  outline-offset: 2px;
}

/* Pill group/container (for multiple pills) */
.pill-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em;
}

/* Remove pills - can be used for dismissible labels */
.pill-removable {
  padding-right: 0.5em;
}

.pill-removable .remove {
  margin-left: 0.35em;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7em;
  cursor: pointer;
  transition: background 0.2s;
}

.pill-removable .remove:hover {
  background: rgba(255, 255, 255, 0.5);
}

/* For pills on dark backgrounds */
.dark-mode .pill, 
.dark-bg .pill {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

/* Screen Reader Text */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* Loading Animation */
.loading-bar {
  width: 100%;
  height: 4px;
  background: var(--mid-gray);
  position: relative;
  margin: 20px 0;
  overflow: hidden;
  border-radius: 2px;
}

.loading-bar::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 30%;
  background: var(--primary-color);
  animation: loading 1.5s infinite ease-in-out;
  border-radius: 2px;
}

@keyframes loading {
  0% {
    left: -30%;
  }
  100% {
    left: 130%;
  }
}

/* Gauge chart for overall score visualization */
.gauge-chart {
  position: relative;
  width: 200px;
  height: 100px;
  margin: 0 auto 1rem;
  overflow: hidden;
}

.gauge-background {
  position: absolute;
  width: 200px;
  height: 200px;
  border-radius: 100px;
  background: linear-gradient(90deg, var(--danger) 0%, var(--warning) 50%, var(--success) 100%);
  clip-path: polygon(0 100%, 100% 100%, 100% 50%, 0 50%);
}

.gauge-center {
  position: absolute;
  width: 170px;
  height: 170px;
  border-radius: 85px;
  background: white;
  top: 15px;
  left: 15px;
  clip-path: polygon(0 100%, 100% 100%, 100% 50%, 0 50%);
}

.gauge-needle {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 4px;
  background: var(--secondary-color);
  transform-origin: bottom center;
  transition: transform 1.5s cubic-bezier(0.23, 1, 0.32, 1);
  border-top-left-radius: 2px;
  border-top-right-radius: 2px;
}

.gauge-value {
  position: absolute;
  bottom: 20px;
  width: 100%;
  text-align: center;
  font-size: 1.5rem;
  font-weight: bold;
  color: var(--secondary-color);
}

/* Enhanced Tables for Dimension Scores */
.enhanced-dimension-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin: 1.5rem 0;
  border-radius: var(--border-radius);
  overflow: hidden;
  box-shadow: var(--box-shadow);
}

.enhanced-dimension-table th,
.enhanced-dimension-table td {
  padding: 12px 15px;
  text-align: left;
}

.enhanced-dimension-table thead th {
  background: var(--primary-color);
  color: white;
  font-weight: 600;
}

.enhanced-dimension-table tbody tr:nth-child(odd) {
  background-color: #fcfdfe;
}

.enhanced-dimension-table tbody tr:nth-child(even) {
  background-color: #f8fafc;
}

.enhanced-dimension-table tbody tr:hover {
  background-color: var(--primary-light);
}

.enhanced-dimension-table .score-cell {
  font-weight: 600;
  text-align: center;
}

.enhanced-dimension-table .progress-column {
  width: 40%;
}

.enhanced-dimension-table .progress-bar-bg {
  width: 100%;
  height: 8px;
  background-color: var(--mid-gray);
  border-radius: 4px;
  overflow: hidden;
}

.enhanced-dimension-table .progress-bar-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}

/* Animations */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.result-item {
  animation: fadeIn 0.5s ease-out forwards;
}

.dimension-scores li {
  opacity: 0;
  animation: fadeIn 0.5s ease-out forwards;
}

.dimension-scores li:nth-child(1) { animation-delay: 0.1s; }
.dimension-scores li:nth-child(2) { animation-delay: 0.2s; }
.dimension-scores li:nth-child(3) { animation-delay: 0.3s; }
.dimension-scores li:nth-child(4) { animation-delay: 0.4s; }
.dimension-scores li:nth-child(5) { animation-delay: 0.5s; }
.dimension-scores li:nth-child(6) { animation-delay: 0.6s; }
.dimension-scores li:nth-child(7) { animation-delay: 0.7s; }

/* Accordion Styles */
.result-item.accordion-result .accordion-heading button {
  background-color: var(--accordion-color);
  color: var(--accordion-button-text-color);
  font-size: 26px;
  line-height: 154%;
  font-family: 'Signika';
  border-top: 1px solid var(--accordion-border-color);
  border-left: 0;
  border-right: 0;
  border-bottom: 0;
}

.result-item.accordion-result .accordion-heading button span.icon {
  color: var(--primary-color);
}

.accordion-result h2 {
  border: 0;
}

.result-item.accordion-result .accordion-content {
  background-color: var(--accordion-color);
}

.accordion-content.result-content {
  margin-bottom: 0;
}

/* Rating adjustment styling */
.rating-adjusted {
  color: var(--text-color);
  font-weight: bold;
  cursor: help;
}

.rating-adjustment-note {
  font-size: 0.8rem;
  color: var(--text-color);
  margin-top: 0.2rem;
  font-style: italic;
}

.gauge-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 300px;
}

.gauge-wrapper {
  position: relative;
  width: 100%;
}

.gauge-container.overall-gauge {
  margin: 30px 30px;
}

.score-display {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 67px;
  font-weight: 700;
  font-family: 'Signika';
}

.gauge-title {
  font-size: 24px;
  margin-top: -40px;
  font-family: 'Work Sans';
  font-weight: 500;
}

.of-level {
  position: absolute;
  top: 65%;
  left: 40%;
}

/* Dimension Gauges Styling */
.dimension-gauges {
  margin: 2rem 0;
  padding: 1.5rem;
  background: var(--light-gray, #f5f7f9);
  border-radius: var(--border-radius, 8px);
  box-shadow: var(--box-shadow, 0 4px 6px rgba(0, 0, 0, 0.07));
}

.dimension-gauges h2 {
  text-align: center;
  margin-bottom: 1.5rem;
  color: var(--primary-color, #1d7a85);
}

.dimension-gauges-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2rem;
}

.dimension-gauges-container .gauge-container {
  flex: 0 0 auto;
  max-width: 290px;
  transition: transform 0.3s ease;
}

.dimension-gauges-container .gauge-container:hover {
  transform: translateY(-5px);
}

/* Simple CSS Column Banding */
/* Reset existing row banding */
.snapshot-table tbody tr:nth-child(odd) th,
.snapshot-table tbody tr:nth-child(even) th,
.snapshot-table tbody tr:nth-child(odd),
.snapshot-table tbody tr:nth-child(even) {
  background-color: transparent;
}

/* Style the header levels with alternating colors */
.snapshot-table thead tr.levels-header th:nth-child(1) {
  background-color: #FFF;
}

.snapshot-table thead tr.levels-header th:nth-child(2),
.snapshot-table thead tr.levels-header th:nth-child(4),
.snapshot-table thead tr.levels-header th:nth-child(6) {
  background-color: #f8fafc;
}

.snapshot-table thead tr.levels-header th:nth-child(3),
.snapshot-table thead tr.levels-header th:nth-child(5) {
  background-color: #FFF;
}

/* Create column bands for the bars cell using repeating-linear-gradient */
.snapshot-table .bars-cell {
  position: relative;
  /* Add borders to separate the columns */
  background-image: 
    repeating-linear-gradient(
      to right,
      #f8fafc 0%,
      #f8fafc 20%,
      #FFF 20%,
      #FFF 40%,
      #f8fafc 40%,
      #f8fafc 60%,
      #FFF 60%,
      #FFF 80%,
      #f8fafc 80%,
      #f8fafc 100%
    ),
    /* Vertical lines */
    linear-gradient(to right, transparent 20%, #e0e5e9 20%, #e0e5e9 calc(20% + 1px), transparent calc(20% + 1px)),
    linear-gradient(to right, transparent 40%, #e0e5e9 40%, #e0e5e9 calc(40% + 1px), transparent calc(40% + 1px)),
    linear-gradient(to right, transparent 60%, #e0e5e9 60%, #e0e5e9 calc(60% + 1px), transparent calc(60% + 1px)),
    linear-gradient(to right, transparent 80%, #e0e5e9 80%, #e0e5e9 calc(80% + 1px), transparent calc(80% + 1px));
  background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%;
  background-repeat: no-repeat;
  padding: 0px;
}

/* Keep dim-bar and rating note above the background */
.snapshot-table .dim-bar,
.snapshot-table .rating-adjustment-note {
  position: relative;
  z-index: 1;
}

/* Add proper wrapping to all cells */
.snapshot-table th,
.snapshot-table td {
  word-break: break-word;
  hyphens: auto;
}

/* Rating labels should wrap properly */
.chart-rating-labels span {
  word-break: break-word;
  font-size: 0.75rem;
  line-height: 1.2;
}

/* Fix the bar charts to ensure they don't cause overflow */
.bars-cell {
  min-width: 100px; /* Ensure minimum width for the bar cell */
}

/* Add a nice border to the overall results section */
.maturity-results > .overall-score {
  background: #fff;
  border-radius: var(--border-radius);
  padding: var(--card-padding);
  box-shadow: var(--box-shadow);
  margin-bottom: 2rem;
  border: 1px solid var(--mid-gray);
}

/* Print button styling */
.print-results-button {
  background: var(--primary-color);
  color: white;
  border: none;
  padding: 10px 15px;
  margin: 20px 0;
  border-radius: 4px;
  cursor: pointer;
  font-weight: bold;
  transition: background 0.2s ease;
}

.print-results-button:hover {
  background: var(--primary-dark);
}

/* Hide print-only elements when not printing */
.print-only {
  display: none;
}

/* ENHANCED RESPONSIVE STYLES */
/* ============================ */

/* Extra Large Screens */
@media (min-width: 1200px) {
  .mmrm-section-content {
    max-width: var(--content-width-xl);
  }
  
  .maturity-results, .page-content {
    max-width: var(--content-width-xl);
  }
  
  /* Larger gauge display on big screens */
  .gauge-container.overall-gauge {

  }
  
  /* Better spaced dimensions on bigger screens */
  .dimension-gauges-container {
    gap: 3rem;
  }
  
  /* Larger font sizes for better readability on larger screens */
  .maturity-results h1 {
    font-size: 2.75rem;
  }
  
  .maturity-results h2 {
    font-size: 2rem;
  }
  
  .overall-score-value {
    font-size: 3.5rem;
  }
  .mmrm-return-to-results .mmrm-cta.callout-box {
    
}
	p, li {
		max-width: 70ch;
	}
}

/* Large Screens (Desktops) */
@media (max-width: 1200px) {
  .mmrm-section-content {
    max-width: 90%;
  }
  
  .maturity-results {
    max-width: 90%;
  }
  
  /* Adjust dimensions display for large screens */
  .dimension-scores li {
    flex: 1 1 calc(33.333% - 20px);
  }
  
  /* Adjust level descriptions for large screens */
  li.mmrm-level-description, li.mmrm-dimension-description {
    flex: 1 1 calc(33.333% - 20px);
  }
}

/* Medium Screens (Tablets) */
@media (max-width: 992px) {
  .maturity-results {
    padding: 15px;
    max-width: 95%;
  }
  
  .mmrm-section-content {
    max-width: 95%;
    padding: 0 15px;
  }
  
  /* Adjust dimensions display for medium screens */
  .dimension-scores li {
    flex: 1 1 calc(50% - 15px);
  }
  
  /* Adjust level descriptions for medium screens */
  li.mmrm-level-description, li.mmrm-dimension-description {
    flex: 1 1 calc(50% - 15px);
  }
  
  /* Reduce padding on section wrappers */
  .mmrm-section-wrapper {
    padding: 30px 0;
  }
  
  /* Adjust CTA box for better fit on tablets */
  .mmrm-cta.callout-box {
    width: 90%;
  }
  
  /* Better fit for overall score section */
  .overall-score-value {
    font-size: 2.75rem;
  }
  
  /* Adjust gauge sizes for medium screens */
  .dimension-gauges-container .gauge-container {
    max-width: 250px;
  }
  
  /* Adjust table column widths for tablets */
  .snapshot-table .dimension-col {
    width: 35%;
  }
  
  /* Table adjustments for better spacing */
  .snapshot-table thead th,
  .snapshot-table tbody td {
    padding: 10px 12px;
  }
  
  /* Typography adjustments */
  .maturity-results h1 {
    font-size: 2.25rem;
  }
  
  .maturity-results h2 {
    font-size: 1.6rem;
  }
  
  .maturity-results h3 {
    font-size: 1.3rem;
  }
}

/* Small Screens (Landscape Phones) */
@media (max-width: 768px) {
  .maturity-results {
    padding: 12px;
    max-width: 100%;
  }
  
  .mmrm-section-content {
    max-width: 100%;
    padding: 0 12px;
  }
  
  /* Section padding adjustments */
  .mmrm-section-wrapper {
    padding: 25px 0;
  }
  
  /* Adjust dimensions display for small screens */
  .dimension-scores {
    gap: 15px;
  }
  
  .dimension-scores li {
    flex: 1 1 100%;
  }
  
  /* Adjust level descriptions for small screens */
  .mmrm-level-descriptions, .mmrm-dimension-descriptions {
    gap: 15px;
  }
  
  li.mmrm-level-description {
    flex: 1 1 100%;
  }
  
  /* Adjust CTA box for smaller screens */
  .mmrm-cta.callout-box {
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    padding: 20px;
  }
  
  .mmrm-cta .mmrm-cta-button {
    margin-left: 0;
    margin-top: 15px;
  }
  
  /* Table and visualization adjustments */
  .snapshot-table-container {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 1.5rem;
  }
  
  .snapshot-table {
    width: auto;
    min-width: 100%;
  }
  
  .snapshot-table .dimension-col {
    width: 150px;
    max-width: 150px;
  }
  
  .snapshot-table th, 
  .snapshot-table td {
    white-space: normal;
    font-size: 0.95rem;
  }
  
  .snapshot-table thead th {
    padding: 8px 8px;
    font-size: 0.95rem;
  }
  
  .snapshot-table tbody td {
    padding: 8px 8px;
  }
  
  /* Improve bar display */
  .dim-bar {
    height: 25px;
  }
  
  /* Typography adjustments */
  .maturity-results h1 {
    font-size: 2rem;
    margin: 1rem 0;
  }
  
  .maturity-results h2 {
    font-size: 1.5rem;
    margin: 1.25rem 0 0.75rem;
  }
  
  .maturity-results h3 {
    font-size: 1.25rem;
  }
  
  .maturity-results h4 {
    font-size: 1.1rem;
  }
  
  .overall-score-value {
    font-size: 2.5rem;
  }
  
  /* Adjust gauge containers for small screens */
  .dimension-gauges-container {
    gap: 1.5rem;
  }
  
  .dimension-gauges-container .gauge-container {
    max-width: 180px;
  }
  
  /* Recommendations layout adjustments */
  .result-recommendations-flex {
    flex-direction: column;
  }
  
  .result-recommendations-image {
    max-width: 100%;
    order: -1;
  }
  
  /* Handle long URLs better */
  .persistent-url {
    word-break: break-all;
  }
  
  /* Reduce padding on accordion buttons */
  .result-item.accordion-result .accordion-heading button {
    font-size: 22px;
    padding: 10px;
  }
}

/*Hacky Fix*/

@media (max-width: 701px) {
	.callout-message-link
	{
		display: flex; 
		flex-direction: column
	}
}

/* Extra Small Screens (Phones) */
@media (max-width: 576px) {
  .maturity-results {
    padding: 10px;
  }
  
  .snapshot-table
  {
	  display:table;
  }
  
  .mmrm-section-content {
    padding: 0 10px;
  }
  
  /* Section padding adjustments */
  .mmrm-section-wrapper {
    padding: 20px 0;
  }
  
  /* Adjust CTA button for better touch targets */
  .mmrm-cta .mmrm-cta-button a.callout-cta-orange,
  .mmrm-cta .mmrm-cta-button a.callout-cta-blue,
  .mmrm-cta .mmrm-cta-button a.callout-cta-pink {
    padding: 12px 15px;
    width: 100%;
    text-align: center;
    display: block;
  }
  
  .mmrm-cta .mmrm-cta-button {
    width: 100%;
  }
  
  /* Table handling for very small screens */
  .snapshot-table .dimension-col {
    width: 160px;
    max-width: 160px;
  }
  
  .snapshot-table thead th, 
  .snapshot-table tbody td {
    padding: 6px 4px;
    font-size: 0.85rem;
  }
  
  .snapshot-table thead tr.levels-header th {
    padding: 6px 4px;
    min-width: 60px;
    font-size: 0.8rem;
  }
  
  /* Hide description text on phones */
  .dim-desc {
    display: none;
  }
  
  /* Improve bar display on small screens */
  .dim-bar {
    height: 20px;
  }
  
  /* Typography adjustments for small screens */
  .maturity-results h1 {
    font-size: 1.75rem;
  }
  
  .maturity-results h2 {
    font-size: 1.35rem;
  }
  
  .maturity-results h3 {
    font-size: 1.2rem;
  }
  
  .maturity-results p {
    font-size: 0.95rem;
  }
  
  .overall-score-value {
    font-size: 2.25rem;
  }
  
  /* Adjust gauge containers for extra small screens */
  .dimension-gauges-container {
    flex-direction: column;
    align-items: center;
    gap: 2rem;
  }
  
  .dimension-gauges-container .gauge-container {
    max-width: 220px;
    width: 100%;
  }
  
  /* Make gauges more compact */
  .gauge-title {
    font-size: 18px;
    margin-top: -30px;
  }
  
  .score-display {
    font-size: 48px;
  }
  
  /* Better pill layout on small screens */
  .pill-group {
    justify-content: center;
  }
  
  /* Reduce margin on headings */
  .maturity-results h1, .maturity-results h2, 
  .maturity-results h3, .maturity-results h4 {
    margin-top: 1rem;
    margin-bottom: 0.5rem;
  }
  .accordion h2.accordion-heading
  {
	  margin-top:0;
  }
  
  /* Improve accordion readability */
  .result-item.accordion-result .accordion-heading button {
    font-size: 20px;
    line-height: 140%;
    padding: 8px;
  }
  
  /* Improve touch targets */
  .cta-button, 
  .print-results-button,
  a.callout-cta-blue,
  a.callout-cta-pink,
  a.callout-cta-orange {
    padding: 12px 15px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  
  /* Reduce animation complexity on small devices */
  .dimension-scores li {
    opacity: 1;
    animation: none;
  }
  
  .snapshot-table tbody th.dimension-col
  {
	  font-size: 0.8rem;
  }  
  
  .snapshot-table tbody th.dimension-col .dim-name
  {
	  display:block;
  }
}

/*Hacky Fix*/

@media (max-width: 551px) {
	.copy-url-button{ 
		width: 100%;
	}
}

/* Very Small Screens (Small Phones) */
@media (max-width: 380px) {
  /* Further reduce padding */
  .maturity-results {
    padding: 8px;
  }
  
  .mmrm-section-content {
    padding: 0 8px;
  }
  
  /* Smaller font sizes */
  .maturity-results h1 {
    font-size: 1.5rem;
  }
  
  .maturity-results h2 {
    font-size: 1.25rem;
  }
  
    .snapshot-table
  {
	  display:table;
  }
  
  .snapshot-table thead th, 
  .snapshot-table tbody td {
    font-size: 0.8rem;
    padding: 5px 3px;
  }
  
  
  .snapshot-table .dimension-col {
    width: 100px;
    max-width: 100px;
	
  }
  
  /* Smaller bars */
  .dim-bar {
    height: 18px;
  }
  
  /* Simplify gauge display */
  .gauge-title {
    font-size: 16px;
  }
  
  .score-display {
    font-size: 40px;
  }
  
  /* Shorten dimension names */
  .dim-name {
    max-width: 90px;
    overflow: hidden;
  }
  
  .mobile-only
  {
	  display:block;
  }
}

/* Touch-friendly adjustments for all mobile devices */
@media (hover: none) {
  /* Larger touch targets */
  .cta-button, 
  .print-results-button,
  a.callout-cta-blue,
  a.callout-cta-pink,
  a.callout-cta-orange,
  .pill,
  button {
    min-height: 44px;
  }
  
  /* Remove hover effects that don't work well on touch */
  .dimension-scores li:hover,
  li.mmrm-level-description:hover,
  .dimension-gauges-container .gauge-container:hover {
    transform: none;
    box-shadow: var(--box-shadow);
  }
}

.link-orange
{
	font-weight:600;
	color:#BB3200;
	font-family:"Manrope";
	
}

.mmrm-return-to-results h2, .mmrm-return-to-results h3, .mmrm-return-to-results h4
{
	color: var(--secondary-color);
	font-size:1.1rem;
} 

.mmrm-return-to-results p
{
	font-size: 16px;
}

.copy-url-button
{
background-color: transparent;
color: var(--maturity-teal);
padding: var(--button-padding);
border-radius:3px;
font-size: 1rem;
font-family:"Manrope";
font-weight: 600;
cursor: pointer;
}
.copy-url-button:hover, .copy-url-button:focus
{
	background-color: var(--maturity-teal);
	color:white;
}

.second-editor h2
{
	margin-top:0;
}
.second-editor .frm_forms input
{
	border:1px solid #827D7D;
	border-radius:0;
	background:#FAFAFA;
	width:60%;
}

.second-editor .frm_forms label
{
	font-family: "Manrope";
	font-weight: 600;
	font-size:17px;
	padding:0;
}

.second-editor .frm_button_submit
{
	background-color: var(--maturity-teal);
	color:white;
	border: 2px solid var(--maturity-teal);
	margin:0;
}

.second-editor .frm_opt_container {
    display: flex;
    align-items: center;
}

/* Style the checkbox container */
.second-editor .frm_checkbox {
    display: flex;
    align-items: center;
}

/* Style the checkbox label */
.second-editor .frm_checkbox label {
    display: flex;
    align-items: center;
    font-size: 17px;
    cursor: pointer;
	font-family: "Manrope";
	font-weight: 600;
}

/* Style the checkbox input */
.second-editor .frm_checkbox input[type="checkbox"] {
    margin-right: 10px;
    cursor: pointer;
	width: 2.5em;
    height: 2.5em;
    border: 1px solid #827D7D;
    border-radius: 3px;
	background:#FAFAFA;
	margin-left:0;
}

/* Optional: style the checkbox when checked */
.second-editor .frm_checkbox input[type="checkbox"]:checked {
    background-color: #0078d7;
    border-color: #827D7D;
}
.second-editor .frm_none_container .frm_primary_label
{
	display:none;
}
.second-editor .frm_none_container.vertical_radio {
  padding: 0;
}