/* ==========================================================================
   Utility Classes
   ========================================================================== */

/* Font Sizes */
.fs-small { font-size: small; }
.fs-smaller { font-size: smaller; }
.fs-x-small { font-size: x-small; }
.fs-xx-small { font-size: xx-small; }
.fs-medium { font-size: medium; }
.fs-large { font-size: large; }
.fs-larger { font-size: larger; }
.fs-x-large { font-size: x-large; }
.fs-xx-large { font-size: xx-large; }

/* Text Wrap */
.text-pretty { text-wrap-style: pretty; }
.text-balance { text-wrap-style: balance; }

/* Font Families */
.font-alt { font-family: var(--font-ui) !important; }
.font-base { font-family: var(--font-body) !important; }
.font-heading { font-family: var(--font-heading) !important; }

/* Width Utilities */
.w-300px { width: 300px !important; }
.w-40 { width: 40% !important; }
.w-q { width: 50% !important; }
.w-calc5 { width: calc(100% / 5 - 2rem); }
.w-calc4 { width: calc(100% / 4 - 2rem); }
.w-calc3 { width: calc(100% / 3 - 2rem); }

/* Line Clamp */
.line-clamp-2,
.line-clamp-2 a.post-link {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.line-clamp-3,
.line-clamp-3 a.post-link {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.line-clamp-4,
.line-clamp-4 a.post-link {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Background Colors */
.bg-text-color { background-color: var(--color-text-base); }
.bg-white-color { background-color: var(--color-text-inverse) !important; }
.bg-primary-color { background-color: var(--color-action); }
.bg-primary-light-color { background-color: var(--color-action); }
.bg-primary-shade-color { background-color: var(--color-bg-tint); }
.bg-primary-muted-color {
  background-color: var(--color-action-dark) !important;
  color: var(--color-text-inverse);
}
.bg-primary-muted-light-color { background-color: var(--color-action-dark); }
.bg-primary-dark-color {
  background-color: var(--color-action-dark);
  color: var(--color-border);
}
.bg-secondary-color { background-color: var(--color-surface-dark); }
.bg-secondary-dark-color { background-color: var(--color-surface-dark-deep); }
.bg-tertiary-color { background-color: var(--color-accent-purple); }
.bg-quaternary-color { background-color: var(--color-highlight-warm); }
.bg-shade { background-color: var(--color-bg-tint); }
.bg-offshade { background-color: var(--color-border); }
.bg-gradient-dark {
  background: linear-gradient(180deg, var(--color-surface-dark-deep), var(--color-surface-dark-deep) 80%, var(--color-text-base));
  color: var(--color-text-inverse);
}

/* Text Colors */
.text-primary-color { color: var(--color-action) !important; }
.text-secondary-color { color: var(--color-surface-dark) !important; }
.text-tertiary-color { color: var(--color-accent-purple) !important; }
.text-quaternary-color { color: var(--color-highlight-warm) !important; }

/* Screen Reader Text */
.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  word-wrap: normal !important;
}

/* Palette List */
ul.palette-list > li {
  width: calc(100% / 9 - 4px);
  aspect-ratio: 1;
  margin: 2px;
}

/* Display */
@media (min-width: 992px) {
  .d-lg-contents { display: contents !important; }
}

/* Dividers */
.vr {
  background-color: var(--color-border);
  opacity: 1;
}

hr {
  color: var(--color-border);
  opacity: 1;
}