@charset "utf-8";

/* Ported verbatim from sahifah-mockup css/main.css, section 7.
   Every value is a token from tokens.css — no raw colours, sizes or magic numbers. */

/* ============================================================
   7. BUTTONS, CHIPS & CONTROLS
   ============================================================ */

.sh-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
  padding: var(--space-xs) var(--space-md);
  border: var(--rule-hairline) solid transparent;
  border-radius: var(--radius-md);
  background-color: var(--burgundy-600);
  color: var(--cream-050);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  line-height: var(--leading-normal);
  cursor: pointer;
  transition: var(--transition-colour);
}

.sh-button:hover {
  background-color: var(--burgundy-800);
  color: var(--cream-050);
}

.sh-button--ghost {
  background-color: transparent;
  border-color: var(--colour-rule-accent);
  color: var(--colour-heading);
}

.sh-button--ghost:hover {
  background-color: var(--colour-bg-wash);
  border-color: var(--burgundy-600);
  color: var(--colour-link-hover);
}

.sh-button--inverse {
  background-color: var(--cream-200);
  color: var(--burgundy-900);
}

.sh-button--inverse:hover {
  background-color: var(--paper);
  color: var(--burgundy-900);
}

.sh-button--block {
  width: 100%;
}

.sh-button--sm {
  padding: var(--space-3xs) var(--space-xs);
  font-size: var(--text-xs);
}

/* -- Chip: a category tag, shaped like a small logo tile ------ */
.chip {
  display: inline-block;
  padding: var(--space-3xs) var(--space-2xs);
  background-color: var(--cream-100);
  border: var(--rule-hairline) solid var(--cream-400);
  border-radius: var(--radius-sm);
  font-family: var(--font-display);
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--colour-text-muted);
  white-space: nowrap;
}

a.chip:hover {
  border-color: var(--colour-rule-accent);
  color: var(--colour-heading);
}

.chip--accent {
  background-color: var(--colour-bg-wash);
  border-color: var(--burgundy-100);
  color: var(--colour-heading);
}

.chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
}

/* -- Category label: Islamic or Academic ----------------------
   Every resource and every publication belongs to exactly one
   of two categories. That is a different kind of fact from a
   subject tag, and it must not be mistaken for one, so it is
   deliberately not chip-shaped: no box, no fill, no border —
   a letterspaced burgundy line preceded by the ornament
   lozenge. A chip is a boxed cream rectangle in muted ink; the
   two cannot be confused at any size.

   The lozenge is solid for Islamic and hollow for Academic, so
   the two categories separate at a glance without introducing
   a second colour into the palette.
   ------------------------------------------------------------ */
.category-label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  font-family: var(--font-display);
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--colour-heading);
  white-space: nowrap;
}

.category-label::before {
  content: '';
  flex-shrink: 0;
  width: var(--space-3xs);
  height: var(--space-3xs);
  background-color: var(--burgundy-400);
  transform: rotate(45deg);
}

.category-label--academic::before {
  background-color: transparent;
  border: var(--rule-hairline) solid var(--burgundy-400);
}