/**
 * @file theme.css
 * shadcn/ui-compatible theme variables for Byte Theme.
 *
 * You can customize these values without rebuilding the compiled CSS.
 * Tools like https://tweakcn.com can help generate these values.
 */

:root {
  --background: oklch(0.13 0.043 265.132);
  --foreground: oklch(1 0 89.876);
  --card: oklch(0.208 0.042 266.359);
  --card-foreground: var(--foreground);
  /* Byte color was --primary: oklch(0.547 0.246 262.866); */
  --primary: oklch(0.6737 0.1203 74.0472);
  --primary-foreground: var(--foreground);
  --secondary: oklch(0.704 0.04 256.993);
  --secondary-foreground: oklch(0.13 0.043 265.132);
  --muted: oklch(0.28 0.041 260.329);
  --muted-foreground: oklch(0.967 0.003 264.542);
  --accent: oklch(0.932 0.032 255.585);
  --accent-foreground: oklch(0.13 0.043 265.132);
  --destructive: oklch(0.6368 0.2078 25.3313);
  --destructive-foreground: oklch(1 0 0);
  --border: oklch(0.373 0.031 259.733);
  --input: oklch(0.373 0.031 259.733);
  --font-sans: "Roboto", "Helvetica Neue", Arial, Helvetica, sans-serif;
  --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
  --font-mono: "Fira Mono", "Menlo", "Consolas", "Liberation Mono", monospace;
  --radius: 0.5rem;
  --shadow-x: 0;
  --shadow-y: 1px;
  --shadow-blur: 3px;
  --shadow-spread: 0px;
  --shadow-opacity: 0.1;
  --shadow-color: oklch(0 0 0);
  --shadow-2xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
  --shadow-xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
  --shadow-sm: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1);
  --shadow: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1);
  --shadow-md: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 2px 4px -1px hsl(0 0% 0% / 0.1);
  --shadow-lg: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 4px 6px -1px hsl(0 0% 0% / 0.1);
  --shadow-xl: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 8px 10px -1px hsl(0 0% 0% / 0.1);
  --shadow-2xl: 0 1px 3px 0px hsl(0 0% 0% / 0.25);

  /* Set navbar height for hero billboard overlay */
  --navbar-height: calc(var(--spacing) * 15);
}

/* -------------------------------------------------------------------------- */
/* COMPONENT STYLES                                                           */
/* -------------------------------------------------------------------------- */

/* Set the logo size */
.navbar--logo img {
  height: 60px !important;
  max-height: 60px !important;
  border: 1px solid white;
}

.hero-image-wrapper {
  height: 100%;
  width: 100%;
}

/* Use focal point for the hero images */
.hero-image-wrapper > img.hero-image-focal {
  object-position:
    var(--hero-focal-x, 50%)
    var(--hero-focal-y, 50%) !important;
}

/* JKG questionnaire styling - Base/Mobile - Container for the radio row */
fieldset.jkg-questionnaire {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 1rem; /* Adjust this value to control spacing between input, label, and description */
  margin-bottom: 1rem; /* Spacing between each radio option */
}

/* Reset default Drupal margins to prevent flexbox alignment issues */
fieldset.jkg-questionnaire input,
fieldset.jkg-questionnaire .webform-element-description {
  margin: 0;
}

/* Let the description take up the remaining horizontal space if text wraps */
fieldset.jkg-questionnaire .webform-element-description {
  flex: 1; 
  font-size: 0.875rem;
  line-height: 1.5;
}

/* Style the radio button */
fieldset.jkg-questionnaire .js-webform-type-radio input {
  border: 1px solid red;
  accent-color: var(--primary);
  width: 1.25rem;
  height: 1.25rem;
  cursor: pointer;
  /* Force the radio button to stay exactly 1.25rem and never squish */
  flex-shrink: 0;
}

/* Force the flex container to never wrap to a new line */
fieldset.jkg-questionnaire .js-webform-type-radio {
  position: relative; /* Add relative positioning, extend the container for clickability */
  flex-wrap: nowrap;
}
/* Turn the label into an invisible, full-row clickable overlay */
fieldset.jkg-questionnaire .js-webform-type-radio label.option {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0; /* Hides the "Ad hoc" text but keeps the element physically present */
  cursor: pointer;
  z-index: 1; /* Pushes the label on top of the description text */
  margin: 0;
}
/* Override Drupal's mobile widths and fix flexbox text wrapping */
fieldset.jkg-questionnaire .js-webform-type-radio .description {
  flex: 1 1 auto; /* Allow the container to grow and shrink properly */
  width: auto;    /* Strip away any 100% width inherited from core styles */
  min-width: 0;   /* This is the magic flexbox property that forces long text to wrap inside the div instead of pushing the div to a new row */
}

/* Make the description bold when the radio button is selected */
fieldset.jkg-questionnaire .js-webform-type-radio input[type="radio"]:checked ~ .description {
  font-weight: bold;
}

/* JKG questionnaire results - bordered card container */
section.jkg-questionnaire-results {
  background-color: var(--card);
  color: var(--card-foreground);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 2rem; 
  width: 100%;
  box-sizing: border-box;
}
/* Center the title and add spacing */
section.jkg-questionnaire-results .webform-section-title {
  text-align: center;
  margin-bottom:calc(var(--spacing) * 6);
}
/* Add spacing to the form elements */
section.jkg-questionnaire-results div {
  margin-bottom:calc(var(--spacing) * 6);
}

/* Optional: Ensure inputs don't overflow the centered card */
section.jkg-questionnaire-results input {
  max-width: 100%;
}
/* Reduce text size of policy check checkbox label */
section.jkg-questionnaire-results .form-item-privacy-policy-check label {
  font-size: 0.75rem !important;
  line-height: 1.5 !important;
}

/* Apply primary color ONLY to the active step (default and hover states) */
.webform-progress-tracker .progress-step.is-active .progress-marker::before,
.webform-progress-tracker .progress-step.is-active:hover .progress-marker::before {
  background-color: var(--primary);
}

/* -------------------------------------------------------------------------- */
/* MEDIA QUERIES                                                              */
/* -------------------------------------------------------------------------- */

@media (min-width: 768px) {
  :root {
    --navbar-height: calc(var(--spacing) * 18);
  }
  
  /* Set the logo size for tablet/desktop */
  .navbar--logo img {
    height: 80px !important;
    max-height: 80px !important;
  }
  /* JKG questionnaire styling - Tablet/Desktop - typography for label and description */
  fieldset.jkg-questionnaire label.option,
  fieldset.jkg-questionnaire .webform-element-description {
    font-size: 1rem !important;
    line-height: 1.5 !important;
    margin-top: 0;
  }
  /* JKG questionnaire webform styling - Scale down to 60% width and center horizontally */
  form.jkg-webform {
    width: 60vw;
    margin-left: auto;
    margin-right: auto;
  }
  /* JKG questionnaire results styling - Scale down to 1/3 width and center the card itself horizontally */
  section.jkg-questionnaire-results {
    width: 33.333333vw;
    margin-left: auto;
    margin-right: auto;
  }
}