@charset "UTF-8";

/* ─────────────────────────────   Cookie & Analytics Consent Banner   ───────────────────────── 
*/
 
.checkbox-item input[type="checkbox"] {
  appearance: none;
  width: 17px;
  height: 17px;
  border: 1px solid rgb(var(--anti-flash-white));
  border-radius: 3px;
  /* background-color: rgb(var(--oxford-blue)); */
  position: relative;
  cursor: pointer;
  /* box-shadow: 0 2px 4px rgb(var(--moonstone-gray));
  box-shadow: 0 1px 1px rgb(var(--moonstone-gray)); */
  box-shadow: 0 2px 2px rgb(var(--graphite-mist));
}

/* This targets the pseudo-element ::before of a checkbox only when it’s checked. It’s used to draw the checkmark or any visual indicator of selection. */
.checkbox-item input[type="checkbox"]:checked {
  background-color: rgb(var(--oxford-blue));
  border: 1px solid rgb(var(--graphite-mist));
}

.checkbox-item input[type="checkbox"]:checked::before {
  content: "";
  position: absolute;
  top: 0.5px;
  left: 4px;
  width: 4px;
  height: 10px;
  text-align: center;
  border: solid rgb(var(--lilac-soft));
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.checkbox-item input[type="checkbox"]:not(:checked) {
  background-color: rgb(var(--anti-flash-white)); /* or a subtle gray */
  border:  solid rgb(var(--oxford-blue));
}

/* ensures the label text aligns nicely with the checkbox */
.checkbox-item {
  display: flex;
  align-items: center;
  gap: 8px; 
}

.checkbox-item label {
  cursor: pointer;         /* Makes the label clickable—great for UX */
  user-select: none;       /* Prevents accidental text selection */
  display: flex;           /* Aligns checkbox and label text horizontally */
  align-items: center;     /* Vertically centers checkbox with text */
  gap: 8px;                /* Adds breathing room between checkbox and text */
  line-height: 1.4;        /* Improves vertical rhythm and readability */
}

/* Base layout: stacked by default */
.checkbox-list {
  display: flex;               /* Enables flex layout */
  flex-direction: column;     /* Stacks items vertically */
  gap: 12px;                   /* Adds vertical space between checkboxes; default spacing */
  padding: 0;                  /* Removes default list padding */
  margin: 0;                   /* Removes default list margin */
  list-style: none;           /* Removes bullet points */
}

.checkbox-list .checkbox-item {
  width: 100%;
}


/* XS: Mobile portrait (≤ 480px) — tighter spacing 
   Purpose: Fully stacked layout for narrow screens */
@media (max-width: 480px) {
  .checkbox-list {
    gap: 6px; /* reduced from 12px */
  }

  .checkbox-item {
    padding: 0; /* remove extra vertical padding */
  }

  .checkbox-item label {
    line-height: 1.2; /* slightly tighter text rhythm */
  }
}

/* 2 Breakpoint: Small (SM) - Mobile landscape and small tablets (481px–767px)
   Purpose: Maintain stacked layout with increased spacing */
@media (min-width: 481px) and (max-width: 767px) {
  .checkbox-list {
    flex-direction: column;
    gap: 6px;
  }

  .checkbox-item {
    padding: 0; /* remove extra vertical padding */
  }

  .checkbox-item label {
    line-height: 1.2; /* slightly tighter text rhythm */
  }
}

/* 3 Breakpoint: Medium (MD) - Tablets and small laptops (768px–1023px)
   Purpose: Continue stacked layout with further spacing */
@media (min-width: 768px) and (max-width: 1023px) {
  .checkbox-list {
    flex-direction: column;
    gap: 18px;
  }
}

/* 4 Breakpoint: Large (LG) - Standard desktops and large tablets (1024px–1279px)
   Purpose: Still stacked, but ready for vertical reordering */
@media (min-width: 1024px) and (max-width: 1279px) {
  .checkbox-list {
    flex-direction: column;
    gap: 20px;
  }
}

/* 5 Breakpoint: Extra Large (XL) - Wide desktops and landscape tablets (1280px–1599px)
   Purpose: Transition to horizontal layout */
@media (min-width: 1280px) and (max-width: 1599px) {
  .checkbox-list {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 24px;
  }

  .checkbox-list .checkbox-item {
    flex: 1 1 45%;
  }
}

/* 6 Breakpoint: Ultra Wide (XXL) - 4K monitors and ultra-wide desktops (≥ 1600px)
   Purpose: Maintain two-column layout with expanded spacing */
@media (min-width: 1600px) {
  .checkbox-list {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 32px;
  }

  .checkbox-list .checkbox-item {
    flex: 1 1 40%;
  }
}