/* ── Display utilities ─────────────────────────────────────────────────────── */
/* !important: component rules (e.g. .article-metadata) can set an explicit
   display and appear later in the file with equal specificity, overriding these.
   Utilities must win regardless of where they fall in the cascade. */

.d-flex         { display: flex !important; }
.d-block        { display: block !important; }
.d-inline-block { display: inline-block !important; }

@media print {
  .d-print-none { display: none !important; }
}

/* ── Flex utilities ────────────────────────────────────────────────────────── */

.flex-column         { flex-direction: column; }
.flex-grow-1         { flex-grow: 1; }
.flex-shrink-0       { flex-shrink: 0; }
.align-items-center  { align-items: center; }
.align-items-stretch { align-items: stretch; }
.align-self-center   { align-self: center; }
.justify-content-center { justify-content: center; }
.justify-content-end    { justify-content: flex-end; }
.justify-self-center    { justify-self: center; }
.gap-2 { gap: 0.5rem; }
.gap-3 { gap: 1rem; }

@media (min-width: 440px) {
  .flex-sm-lite-row { flex-direction: row; }
}

/* ── Spacing utilities ─────────────────────────────────────────────────────── */
/* !important: component rules that pair a class with an element selector
   (e.g. .typography h2 { margin-bottom }) have specificity (0,2,1), which beats
   these single-class utilities (0,1,0). !important ensures utilities win. */

.mx-auto { margin-left: auto !important;  margin-right: auto !important; }
.mx-0    { margin-left: 0 !important;    margin-right: 0 !important; }
.mx-3    { margin-left: 1rem !important; margin-right: 1rem !important; }
.m-3     { margin: 1rem !important; }
.mb-3    { margin-bottom: 1rem !important; }
.mb-4    { margin-bottom: 1.5rem !important; }
.my-2    { margin-top: 0.5rem !important;  margin-bottom: 0.5rem !important; }
.my-3    { margin-top: 1rem !important;    margin-bottom: 1rem !important; }
.my-4    { margin-top: 1.5rem !important;  margin-bottom: 1.5rem !important; }
.my-5    { margin-top: 3rem !important;    margin-bottom: 3rem !important; }
.mt-5    { margin-top: 3rem !important; }
.mb-6    { margin-bottom: 6rem !important; }

.p-0  { padding: 0 !important; }
.p-2  { padding: 0.5rem !important; }
.p-3  { padding: 1rem !important; }
.pt-3 { padding-top: 1rem !important; }
.pb-3 { padding-bottom: 1rem !important; }
.px-3 { padding-left: 1rem !important; padding-right: 1rem !important; }

@media (min-width: 440px) {
  .mx-sm-lite-auto { margin-left: auto !important;   margin-right: auto !important; }
  .mx-sm-lite-3    { margin-left: 1rem !important;   margin-right: 1rem !important; }
  .mr-sm-lite-1    { margin-right: 0.25rem !important; }
  .my-sm-lite-0    { margin-top: 0 !important;       margin-bottom: 0 !important; }
  .px-sm-lite-1    { padding-left: 0.25rem !important; padding-right: 0.25rem !important; }
  .p-sm-lite-0     { padding: 0 !important; }
  .p-sm-lite-3     { padding: 1rem !important; }
  .ps-sm-lite-4    { padding-left: 1.5rem !important; }
  .pe-sm-lite-4    { padding-right: 1.5rem !important; }
}

@media (min-width: 768px) {
  .p-md-3  { padding: 1rem !important; }
  .px-md-5 { padding-left: 3rem !important; padding-right: 3rem !important; }
  .pe-md-5 { padding-right: 3rem !important; }
  .ps-md-5 { padding-left: 3rem !important; }
}

@media (min-width: 992px) {
  .p-lg-2 { padding: 0.5rem !important; }
}

/* ── Sizing utilities ──────────────────────────────────────────────────────── */

.w-100 { width: 100%; }
.w-80  { width: 80%; }

/* ── Typography utilities ──────────────────────────────────────────────────── */

.text-center { text-align: center; }
.text-left   { text-align: left; }
.fw-normal   { font-weight: normal; }
.fs-3        { font-size: 1.5625rem; }

.serif-font { font-family: "Alegreya", serif; }
.sans-font  { font-family: "Alegreya Sans", sans-serif; }

/* ── Border utilities ──────────────────────────────────────────────────────── */

.border        { border: 1px solid var(--color-ui-border); }
.border-top    { border-top: 1px solid var(--color-ui-border); }
.border-bottom { border-bottom: 1px solid var(--color-ui-border); }
.border-2      { border-width: 2px; }
.border-dashed { border-style: dashed !important; }

@media (min-width: 440px) {
  .border-sm-lite-0            { border: 0 !important; }
  .border-end-sm-lite-dashed   { border-right: dashed 1px #ddd; }
  .border-start-sm-lite-dashed { border-left:  dashed 1px #ddd; }
}

@media (min-width: 768px) {
  .border-end-md-dashed   { border-right: dashed 2px #ddd; }
  .border-start-md-dashed { border-left:  dashed 2px #ddd; }
}

/* ── Width constraints ─────────────────────────────────────────────────────── */

.max-width-medium { max-width: 32rem; }
.max-width-large  { max-width: 42rem; }

@media (min-width: 440px) and (max-width: 767px) {
  .max-width-small-md { max-width: 60%; }
}

/* ── Link utilities ────────────────────────────────────────────────────────── */

.simple-link:link,
.simple-link:visited { color: #333; text-decoration: none; }
.simple-link:hover   { text-decoration: underline; }

.simple-link-underline:link,
.simple-link-underline:visited { color: #333; text-decoration: underline; }
.simple-link-underline:hover   { color: #8bac3f; }

/* ── Background utilities ──────────────────────────────────────────────────── */

.bg-white { background-color: #fff; }

/* ── Button (consent notice) ───────────────────────────────────────────────── */

.btn {
  display: inline-block;
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  font-weight: 400;
  cursor: pointer;
  border: 1px solid transparent;
  border-radius: 0.25rem;
  text-decoration: none;
}
.btn-primary { background-color: #8bac3f; color: #fff; border-color: #8bac3f; }
.btn-sm      { padding: 0.25rem 0.5rem; font-size: 0.875rem; }