/*------------------------------------*\
 * #IMPORTS
 * Import external stylesheets here.
\*------------------------------------*/
@import url(/tests/css/all.css);

/*------------------------------------*\
 * #BASE HTML STYLES
 * General styling for core HTML elements.
\*------------------------------------*/

html {
  scroll-padding-top: 80px; /* Adjust based on your fixed header height */
}

/*------------------------------------*\
 * #UTILITY CLASSES
 * Reusable helper classes for various styling needs.
\*------------------------------------*/

/* Heading font weight */
.terms-title-large,
.terms-title-small,
.terms-heading-large,
.terms-heading-small {
  font-weight: 700;
}

/* Paragraph styling */
.section-paragraph {
  line-height: 1.6;
  margin-bottom: 1rem;
}

/* Spacing utilities */
.spacing-bottom {
  margin-bottom: 48px;
}

.margin-top-small {
  margin-top: 0.25rem;
}

/* List item padding */
.list-item-padded {
  padding: 8px;
}

/* Link styling */
.no-underline {
  text-decoration: none;
}

/* Text transformations */
.uppercase-text {
  text-transform: uppercase;
}

/* Font weight utilities */
.bold-text {
  font-weight: bold;
}

/* Color utilities */
.primary-color {
  color: #007bff;
}

/* Heading display toggles (mobile-first) */
.terms-title-large,
.terms-heading-large {
  display: block; /* Visible by default on larger screens via media query */
}

.terms-title-small,
.terms-heading-small {
  display: none; /* Hidden by default on larger screens via media query */
}
/* Table of Contents List specific styles */
.table-of-contents-list {
  list-style: none; /* Removes default bullet points */
  padding-left: 0; /* Removes default left padding */
}

/* For list items in the Table of Contents that should have underlines */
.underlined-link-item {
  text-decoration: underline; /* Adds underline to the list item text */
}

/* For links that should have dark text */
.dark-link {
  color: #212529; /* A common dark grey color, similar to Bootstrap's .text-dark */
}
/*------------------------------------*\
 * #MEDIA QUERIES
 * Styles that apply only to specific screen sizes.
\*------------------------------------*/

/* For screens smaller than lg breakpoint (max-width: 991.98px) */
@media (max-width: 900px) {
  /* Display toggles for headings on small screens */
  .terms-title-large,
  .terms-heading-large {
    display: none;
  }

  .terms-title-small,
  .terms-heading-small {
    display: block;
  }
}

/* For large devices (min-width: 992px) */
@media (min-width: 992px) {
  /* Display toggles for headings on large screens */
  .terms-title-large,
  .terms-heading-large {
    display: block;
  }

  .terms-title-small,
  .terms-heading-small {
    display: none;
  }
}