body {
    font-size: clamp(1em, 1.3vw, 1.3em);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-weight: 300;
    }
    .uk-text-lead {
      font-size:1.5em;
    }
    header h1 {
        text-shadow: 2px 2px 9px rgba(0,0,0,0.5);
    }
  /* Custom styling for the radio buttons */
  #question-page {
    padding: 20px 20px;
  }
  #question-page h2 {
    margin-top: 0px;
  }
  .options-head {
    display: flex;
    min-height: 2rem;
  }
  .option-label {
    width: 2rem;
    text-align:center;
  }
  .radio-group {
    display: flex;        /* Use flexbox for layout */
    align-items: flex-start;  /* Align items to the top */
    margin-bottom: 0.5rem;  /* Space between option groups */
    position: relative;     /* For relative positioning within */
  }

  /* Style the radio buttons (hide default appearance) */
  .radio-group input[type="radio"] {
    appearance: none;
    min-width: 1.25rem;
    height: 1.25rem;
    border-radius: 0.25rem; /*  Square with rounded corners */
    border: 2px solid #cbd5e0; /* Default gray border */
    margin-right: 0.5rem;
    cursor: pointer;
    position: relative; /* For the checked indicator */
  }

   /* "Most" styling (checked state) - Green outline */
  .radio-group input[type="radio"][data-type="most"]:checked {
    border-color: #22c55e; /* Green border */
  }

  /* "Least" styling (checked state) - Red outline */
  .radio-group input[type="radio"][data-type="least"]:checked {
    border-color: #ef4444; /* Red border */
  }
  /* Inner circle (checked indicator) */
    .radio-group input[type="radio"]:checked::before {
        content: "";
        display: block;
        width: 0.7rem;  /*  adjust as needed */
        height: 0.7rem; /* adjust as needed */
        border-radius: 0.25rem;
        background-color: #fff; /* Filled circle for checked state */
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
/* "Most" styling (checked state) */
  .radio-group input[type="radio"][data-type="most"]:checked::before {
    background-color: #22c55e;
  }

  /* "Least" styling (checked state) */
  .radio-group input[type="radio"][data-type="least"]:checked::before {
    background-color: #ef4444;
  }

  #langSwitch .uk-dropdown {
    padding: 10px 0px;
  }

    /* Visually hide the labels, keep them for screen readers */
    .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;
    }
  /* Ensure options text wraps correctly */
    .radio-group label {
        display: block;       /* Make labels block-level */
        flex-grow: 1;          /* Allow text to take up remaining space */
        margin-left: 0.5rem; /* Space between radio buttons and text */
    }
    /* Add some space between the radio buttons */
    .radio-group input[type="radio"] + input[type="radio"] {
        margin-left: 1.5rem;
    }

/* Disabled radio button styling */
.radio-group input[type="radio"]:disabled + label {
    color: #999; /* Gray out the text */
    cursor: default; /* Change cursor to default */
}
.radio-group input[type="radio"]:disabled{
    border-color:#999;
}

/* Results Page Styles */
    .results-profile {
      /* Use UIkit card classes */
      background-color: #f8f8f8; /* Keep a light background */
      border: 1px solid #ddd;
      padding: 1rem;
      margin-bottom: 1rem;
      line-height: 1.2;
    }

    .results-name {
        font-size: 1.5rem;
        font-weight: bold;
        margin-right: 1rem; /* Increased space */
        display: inline-block;
        vertical-align: middle;
    }

    .results-style {
        font-size: 2rem;
        font-weight: bold;
        color: white;
        border: none;
        vertical-align: middle;
        border-radius: 0.5rem; /* Rounded corners */
        padding: 0.25rem 0.75rem; /* Add some padding */
    }

    /* Normal font weight for score lines */
    #resultspage p {
        font-weight: 300;
        margin-bottom: 0.1rem;
    }
    #resultspage p strong{
      font-weight: bold; /*Keep this bold*/
    }
/* Style for the chart legend items - remove top margin */
.chart-legend-item {
    display: inline-block; /* Display items horizontally */
    margin-right: 1rem;    /* Space between items */
    align-items: center;     /* Vertical alignment */
}

.chart-legend-color {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    border-radius: 50%; /* Circular color swatch */
    margin-right: 0.5rem;
    vertical-align: middle; /* Align with text */
}
.uk-list {
  padding-left: 0;
  list-style: none;
}

/* Style the dropdown container */
.language-switcher {
position: relative; /* Important for positioning the dropdown list */
display: inline-block; /* Or block, depending on your layout */
}

/* Style the dropdown button */
.language-button {
background-color: #f8f8f8; /* Light gray background */
color: #333; /* Dark text */
padding: 0.5rem 1rem;
border: 1px solid #ccc;
border-radius: 0.25rem;
cursor: pointer;
width: 150px; /* Set a width */
text-align: left; /* Align text to the left */
}

/* Style the down arrow */
.arrow-down {
display: inline-block;
width: 0;
height: 0;
margin-left: 0.5rem;
vertical-align: middle;
border-top: 0.4em solid;
border-right: 0.3em solid transparent;
border-left: 0.3em solid transparent;
}

/* Style the dropdown list (initially hidden) */
.language-list {
display: none; /* Hide by default */
position: absolute; /* Position it below the button */
top: 100%; /* Position right below the button */
left: 0;
z-index: 1000; /* Make sure it appears above other content */
background-color: #fff; /* White background */
border: 1px solid #ccc;
border-radius: 0.25rem;
min-width: 150px; /* Same as the button */
padding: 0; /* Remove default padding */
margin: 0;  /* Remove default margin */
list-style: none; /* Remove bullet points */
box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* Optional subtle shadow */
}

/* Style the individual language options */
.language-list li a {
display: block;
justify-content: center;
padding: 0.5rem 1rem;
color: #333;
text-decoration: none; /* Remove underlines */
}

#langSwitch .uk-nav li>a {
  justify-content: center;
} 

/* Hover effect for the language options */
.language-list li a:hover {
background-color: #f0f0f0; /* Light gray on hover */
}

/* Show the dropdown list when the 'open' class is added */
.language-switcher.open .language-list {
display: block;
}

.uk-accordion-content {
  font-size: 90%;
}

@media print {
header, #print-button, #show-partner2-button, #langSwitch { /* Hide header, print button, and partner 2 button */
    display: none;
}

body {
    font-size: 10pt; /* Reduced font size for printing */
    margin: 0.2in;    /* Reduced margins */
}

#resultspage {
    border: none;
    box-shadow: none;
    padding: 0;
    margin: 0;
    /* Prevent page breaks *inside* the results page */
    page-break-inside: avoid;
}
 /* Container for partner profiles */
 .uk-grid-match {
    page-break-inside: avoid; /* Prevent breaks within the grid */
 }

/* Individual partner profiles */
.results-profile {
    page-break-inside: avoid; /* Prevent breaks within a profile */
    margin-bottom: 0.5rem; /* Reduce bottom margin */
}
/*Reduce space between paragraphs*/
#resultspage p {
    margin-bottom: 0.05rem;
}

#disc-chart {
    max-width: 80%;   /* Ensure chart fits within page width - Further reduced */
    height: auto;       /* Maintain aspect ratio */
/*  max-height: 250px;*/
}
h1, h2, h3, p {
    page-break-inside: avoid; /* Avoid page breaks inside headings/paragraphs */
    page-break-after: avoid;  /* Avoid breaks immediately after headings */
}

/* Optional:  Hide the chart legend on print (if it's causing issues) 
#chart-legend {
    display: none;
}*/

/* Optional: More aggressive scaling (use with caution!) */
/* body {
    transform: scale(0.8);  Scale down the entire body content 
    transform-origin: top left;  Ensure scaling starts from the top-left 
} */
}