/* ============================================================
   07. COMPONENTS
   ============================================================ */

/* --- Eyebrow: numbered editorial section label --- */
.eyebrow {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-block-end: var(--space-4);
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--color-gold-600);
}

.eyebrow::after {
  content: "";
  inline-size: 3.5rem;
  block-size: 1px;
  background: var(--gradient-gold);
  opacity: 0.9;
}

.eyebrow-num {
  font-weight: 700;
  color: var(--color-navy-800);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  border-radius: var(--radius-sm);
  padding: 0.1rem 0.55rem;
  font-variant-numeric: tabular-nums;
}

.on-dark .eyebrow {
  color: var(--color-gold-400);
}

.on-dark .eyebrow-num {
  color: var(--color-gold-300);
  background: transparent;
  border-color: var(--color-border-navy);
}

/* --- Ghost numerals: oversized editorial section numbers --- */
main {
  counter-reset: section-num;
}

.section-head:has(.eyebrow-num) {
  position: relative;
  counter-increment: section-num;
}

.section-head:has(.eyebrow-num)::before {
  content: counter(section-num, decimal-leading-zero) / "";
  position: absolute;
  inset-block-start: -3rem;
  inset-inline-start: -1.5rem;
  z-index: -1;
  font-family: var(--font-heading);
  font-size: clamp(6rem, 12vw, 9.5rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--color-navy-900);
  opacity: 0.05;
  pointer-events: none;
  user-select: none;
}

.on-dark .section-head:has(.eyebrow-num)::before,
.wakaed .section-head:has(.eyebrow-num)::before {
  color: var(--color-ivory-100);
}

/* --- Gilded section openers: hairline + centered diamond --- */
#governance,
#earlier {
  position: relative;
}

#governance::before,
#earlier::before,
#contact::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  margin-inline: auto;
  inline-size: min(22rem, 62vw);
  block-size: 0.65rem;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Crect x='2.6' y='2.6' width='4.8' height='4.8' fill='%23b08a3e' transform='rotate(45 5 5)'/%3E%3C/svg%3E") center / 0.65rem 0.65rem no-repeat,
    linear-gradient(90deg, transparent, rgba(176, 138, 62, 0.65) 18%, rgba(176, 138, 62, 0.65) 82%, transparent) center / 100% 1px no-repeat;
  pointer-events: none;
}

/* --- Buttons --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-block-size: 2.9rem; /* ≥44px touch target */
  padding: 0.65rem 1.5rem;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: var(--fs-small);
  line-height: 1.2;
  border: 1px solid transparent;
  transition: background-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out);
}

.btn:active {
  transform: translateY(1px);
}

/* English buttons: couture-style spaced capitals */
html[lang="en"] .btn {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.8125rem;
}

.btn svg {
  inline-size: 1.05rem;
  block-size: 1.05rem;
  flex: none;
}

.btn--primary {
  background: var(--color-navy-800);
  color: var(--color-ivory-100);
}

.btn--primary:hover {
  background: var(--color-navy-700);
  color: var(--color-ivory-100);
}

.btn--outline {
  border-color: var(--color-navy-800);
  color: var(--color-navy-900);
  background: transparent;
}

.btn--outline:hover {
  border-color: var(--color-gold-600);
  color: var(--color-gold-600);
}

.btn--gold {
  background: transparent;
  border-color: var(--color-gold-500);
  color: var(--color-gold-300);
}

.btn--gold:hover {
  background: var(--color-gold-500);
  color: var(--color-navy-950);
}

.btn--icon {
  inline-size: 2.9rem;
  padding-inline: 0;
}

/* --- Generic card --- */
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
}

/* --- Chips --- */
.chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
}

.chip {
  display: inline-flex;
  align-items: center;
  padding: 0.45rem 1rem;
  border-radius: 999px;
  border: 1px solid var(--color-border-navy);
  color: var(--color-text-inverse);
  font-size: var(--fs-small);
  background: rgba(255, 255, 255, 0.03);
}

/* --- Badge --- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.8rem;
  border-radius: 999px;
  font-size: var(--fs-xs);
  font-weight: 600;
  background: var(--color-ivory-200);
  color: var(--color-gold-700);
  border: 1px solid var(--color-border);
}

.badge svg {
  inline-size: 0.85rem;
  block-size: 0.85rem;
}

/* ============================================================
   07b. DECORATIVE CALLIGRAPHY MOTIF
   The "بن تركي" line-art pattern, laid very faintly behind
   selected sections — gold on dark surfaces, navy on light ones.
   ============================================================ */
.hero::after,
.wakaed::after,
.site-footer::after,
#profile::after,
#contact::after {
  content: "";
  position: absolute;
  inline-size: clamp(18rem, 34vw, 30rem);
  aspect-ratio: 365 / 558;
  background-repeat: no-repeat;
  background-size: contain;
  pointer-events: none;
  z-index: 0;
}

.wakaed,
.site-footer,
#profile,
#contact {
  position: relative;
  overflow: clip;
}

/* Dark surfaces — gold motif */
.hero::after {
  background-image: url("../images/pattern-gold.svg");
  inset-block-start: -3rem;
  inset-inline-end: -5rem;
  opacity: 0.18;
}

.wakaed::after {
  background-image: url("../images/pattern-gold.svg");
  inset-block-end: -7rem;
  inset-inline-end: -6rem;
  opacity: 0.15;
}

.site-footer::after {
  background-image: url("../images/pattern-gold.svg");
  inset-block-start: -2rem;
  inset-inline-start: -3rem;
  inline-size: clamp(20rem, 38vw, 34rem);
  opacity: 0.16;
}

/* Light surfaces — navy motif, softer */
#profile::after {
  background-image: url("../images/pattern-navy.svg");
  inset-block-start: -5rem;
  inset-inline-end: -7rem;
  opacity: 0.1;
}

#contact::after {
  background-image: url("../images/pattern-navy.svg");
  inset-block-end: -8rem;
  inset-inline-start: -7rem;
  opacity: 0.1;
}