/* Define custom fonts from the assets folder */
@font-face {
  font-family: 'ND';
  src: url('./assets/ND_R.TTF') format('truetype'); /* Regular font */
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'ND';
  src: url('./assets/ND_B.TTF') format('truetype'); /* Bold font */
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: 'ND-CB';
  src: url('./assets/ND_CB.TTF') format('truetype'); /* Custom bold font for heading-sub */
  font-weight: bold;
  font-style: normal;
}

/* Global styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'ND', Arial, sans-serif; /* Apply the default font */
}

body {
  background-color: white;
  color: #333;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Dark mode if user’s OS/browser is set to dark */
@media (prefers-color-scheme: dark) {
  body {
    background-color: #333;
    color: #fff;
  }
}

/* Normal mode link styles */
a {
  color: #333;
  text-decoration: underline;
}

/* Dark mode overrides */
@media (prefers-color-scheme: dark) {
  a {
    color: #fff;
  }
}

header {
  width: 100%;               /* Set width to 60% for both header and main */
  max-width: 800px;         /* Limit max width for larger screens */
  min-width: 600px;         /* Ensure it doesn't get too narrow */
  text-align: center;       /* Center-align content in header */
  margin-top: 20px;
}

main {
  width: 90%;               /* Set width to 60% for both header and main */
  max-width: 800px;         /* Limit max width for larger screens */
  min-width: 300px;         /* Ensure it doesn't get too narrow */
  text-align: center;       /* Center-align content in header */
  margin-top: 20px;
}

.logo {
  width: 100%;
  height: auto;
  margin-bottom: 0;
  min-width: 300px; /* Ensure it doesn't shrink below this size */
}

/* Style for the survey name (<strong>{survey_longname}</strong>) */
.heading-main {
  font-family: 'ND-CB', Arial, sans-serif; /* Use custom bold font for this heading */
  font-size: 2.5em;         /* Slightly smaller than main heading */
  font-weight: bold;        /* Bold font */
  margin-top: 1.5rem;
  margin-bottom: 2.5rem;    /* Add more spacing below */
}

/* Style for the main heading (#NDRfragt-Auswertung für {area}) */
.heading-sub {
  font-size: 1.5em;           /* Larger font size */
  font-weight: normal; 
  margin-bottom: 2.5rem;      /* Add spacing below */
}

.report-date {
    font-size: 0.9rem;
    text-align: left;
    margin-top: -1rem;
    margin-bottom: 2rem;
}

/* Left-align the text for survey info */
.left-align {
  text-align: left;         /* Ensure the text is left-aligned */
  margin-left: 0;           /* Remove any auto-centering margin */
  margin-right: 0;          /* Ensure no right margin for alignment */
  line-height: 1.3;         /* Improve readability with proper line spacing */
}

header p {
  font-size: 1em;
  margin: 10px 0;
}

/* General h4 styles */
h3 {
  font-size: 1.75em; /* Adjust font size as needed */
  margin-top: 1.5em; /* Increase the top margin */
  margin-bottom: 0.5em; /* Reduce the bottom margin */
  font-weight: bold;
}

/* Specific adjustment for h4 near the disclaimer */
h3 + .disclaimer {
  margin-top: 0.25em; /* Close the gap between h4 and disclaimer */
}

.survey-info {
  display: grid;
  grid-template-columns: auto 1fr; /* Two columns: one for the category, one for the value */
  column-gap: 1rem; /* Add spacing between category and value */
  row-gap: 0.5rem; /* Add spacing between rows */
  text-align: left; /* Align text to the left */
}

.survey-info p {
  display: contents; /* Use `contents` so <span> behaves as part of the grid */
}

.survey-info span {
  font-weight: normal; /* Normal weight for the category text */
}

.survey-info strong {
  font-weight: bold; /* Bold weight for the values */
}


.disclaimer {
  font-size: 1em;           /* Ensure text is readable */
  margin-top: 3rem;         /* Add some spacing from other elements */
  text-align: justify;      /* Justify text for a cleaner block layout */
  line-height: 1.5;         /* Improve line spacing for readability */
  white-space: normal;      /* Allow normal wrapping of long lines */
}

/* Style for the "Ergebnisse" heading */
.results-heading {
  font-size: 1.75em; /* Adjust size as needed */
  margin-top: 1.5em; /* Add spacing above the heading */
  margin-bottom: 1.5em; /* Add spacing below the heading */
  font-weight: bold;
  text-align: left; /* Align the heading */
}

main {
  margin-top: 20px;
}

.chart-container {
  width: 100%;
  max-width: 800px; /* Ensure charts do not grow too large */
  margin: 20px auto; /* Center-align the container */
  overflow: visible; /* Prevent clipping */
  display: flex;
  justify-content: center; /* Center-align the iframe inside the container */
}

.chart-container iframe {
  width: 100%; /* Ensure the iframe spans the container width */
  height: auto; /* Allow the height to be adjusted dynamically */
  border: none;
  display: block;
  margin-bottom: 4rem;
}