/* ================================================================
   COMPONENTS — Reusable UI elements
   Buttons, cards, badges, forms, kente divider, modals
   WP equivalent: block styles / theme block styles
   ================================================================ */

/* ── Container ── */
.container {
  width: 100%;
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: var(--container-px);
}

/* ── Kente + Trini Heritage Divider ── */
.kente-stripe {
  width: 100%;
  height: 10px;
  background: repeating-linear-gradient(
    90deg,
    var(--c-gold)            0,   var(--c-gold)            10px,
    var(--c-trini-red)       10px,var(--c-trini-red)       20px,
    var(--c-kente-black)     20px,var(--c-kente-black)     28px,
    var(--c-hummingbird)     28px,var(--c-hummingbird)     36px,
    var(--c-carnival-orange) 36px,var(--c-carnival-orange) 44px,
    var(--c-kente-black)     44px,var(--c-kente-black)     52px,
    var(--c-steelpan)        52px,var(--c-steelpan)        60px,
    var(--c-kente-black)     60px,var(--c-kente-black)     68px,
    var(--c-trini-red)       68px,var(--c-trini-red)       76px,
    var(--c-gold)            76px,var(--c-gold)            86px
  );
  flex-shrink: 0;
  animation: kente-shimmer 4s linear infinite;
}

/* ── Section wrapper ── */
.section {
  padding: var(--section-py) 0;
}
.section--dark {
  background-color: var(--color-bg-dark);
  color: var(--color-text-light);
}
.section--mid {
  background-color: var(--c-dark-3);
  color: var(--color-text-light);
}
.section--cream {
  background-color: var(--color-bg-light);
  color: var(--color-text-dark);
}
.section--white {
  background-color: var(--color-bg-white);
  color: var(--color-text-dark);
}

/* ── Section header ── */
.section-header {
  text-align: center;
  margin-bottom: var(--sp-9);
}
.section-header .eyebrow {
  display: inline-block;
  font-family: var(--font-sub);
  font-size: var(--fs-label);
  font-weight: var(--fw-bold);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-secondary);
  margin-bottom: var(--sp-3);
}
.section-header h2 {
  font-family: var(--font-heading);
  color: inherit;
  margin-bottom: var(--sp-4);
}
.section-header h2 .accent {
  color: var(--color-secondary);
  font-style: italic;
}
.section-header p {
  max-width: 60ch;
  margin-inline: auto;
  color: inherit;
  opacity: .85;
}
.section-header .gold-line {
  width: 60px;
  height: 3px;
  background: var(--color-secondary);
  margin: var(--sp-5) auto 0;
  border-radius: var(--r-full);
}

/* ── Buttons ── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 0.85em 2em;
  font-family: var(--font-sub);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
  border: 2px solid transparent;
  border-radius: var(--r-full);
  cursor: pointer;
  transition: background var(--t-base), color var(--t-base), border-color var(--t-base), transform var(--t-fast), box-shadow var(--t-base);
  user-select: none;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); text-decoration: none; }
.btn:active { transform: translateY(0); }

.btn--primary {
  background: linear-gradient(135deg, var(--c-terra) 0%, var(--c-carnival-orange) 100%);
  color: var(--c-cream-1);
  border-color: var(--c-terra);
  box-shadow: var(--sh-terra);
}
.btn--primary:hover {
  background: linear-gradient(135deg, var(--c-terra-deep) 0%, var(--c-terra) 100%);
  border-color: var(--c-terra-deep);
  color: var(--c-cream-1);
  box-shadow: 0 6px 28px rgba(192,96,48,.5);
}

.btn--secondary {
  background: transparent;
  color: var(--color-secondary);
  border-color: var(--color-secondary);
}
.btn--secondary:hover {
  background: var(--color-secondary);
  color: var(--c-dark-1);
}

.btn--gold {
  background: var(--color-secondary);
  color: var(--c-dark-1);
  border-color: var(--color-secondary);
  box-shadow: var(--sh-gold);
}
.btn--gold:hover {
  background: var(--c-gold-light);
  border-color: var(--c-gold-light);
}

.btn--ghost {
  background: transparent;
  color: var(--c-cream-1);
  border-color: var(--c-cream-3);
}
.btn--ghost:hover {
  background: rgba(255,255,255,.08);
  border-color: var(--c-cream-1);
  color: var(--c-cream-1);
}

.btn-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  align-items: center;
}

/* ── Cards ── */
.card {
  background: var(--color-bg-white);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--sh-sm);
  transition: transform var(--t-base), box-shadow var(--t-base);
}
.card:hover {
  transform: translateY(-6px);
  box-shadow: var(--sh-md);
}
.card--dark {
  background: var(--c-dark-3);
  color: var(--c-cream-1);
}
.card--bordered {
  border: 1px solid var(--color-border);
  box-shadow: none;
}
.card--accent-left {
  border-left: 4px solid var(--color-primary);
}
.card--accent-gold {
  border-left: 4px solid var(--color-secondary);
}
.card__body {
  padding: var(--sp-6);
}
.card__title {
  font-family: var(--font-heading);
  font-size: var(--fs-h4);
  font-weight: var(--fw-bold);
  color: inherit;
  margin-bottom: var(--sp-3);
}
.card__meta {
  font-family: var(--font-sub);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-secondary);
  margin-bottom: var(--sp-2);
}
.card__text { font-size: var(--fs-sm); opacity: .85; }

/* ── Badge ── */
.badge {
  display: inline-block;
  padding: .25em .8em;
  font-family: var(--font-sub);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: .08em;
  text-transform: uppercase;
  border-radius: var(--r-full);
}
.badge--gold  { background: var(--c-gold-bright); color: var(--c-dark-2); }
.badge--terra { background: var(--c-terra-light); color: var(--c-dark-2); }
.badge--dark  { background: var(--c-dark-3); color: var(--c-cream-1); }

/* ── Stat block ── */
.stat-block { text-align: center; }
.stat-block__number {
  display: block;
  font-family: var(--font-heading);
  font-size: clamp(2.2rem, 4vw, 3.5rem);
  font-weight: var(--fw-black);
  color: var(--color-secondary);
  line-height: 1;
  margin-bottom: var(--sp-2);
}
.stat-block__label {
  font-family: var(--font-sub);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  text-transform: uppercase;
  letter-spacing: .1em;
  opacity: .8;
}

/* ── Quote block ── */
.quote-block {
  position: relative;
  padding: var(--sp-8) var(--sp-7);
  text-align: center;
}
.quote-block__mark {
  display: block;
  font-family: var(--font-heading);
  font-size: 8rem;
  line-height: .5;
  color: var(--color-secondary);
  opacity: .25;
  margin-bottom: var(--sp-4);
  user-select: none;
}
.quote-block__text {
  font-family: var(--font-heading);
  font-size: clamp(1.1rem, 2.5vw, 1.5rem);
  font-style: italic;
  line-height: var(--lh-snug);
  max-width: 70ch;
  margin: 0 auto var(--sp-5);
}
.quote-block__author {
  font-family: var(--font-sub);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--color-secondary);
}
.quote-block__pub {
  font-family: var(--font-sub);
  font-size: var(--fs-xs);
  opacity: .6;
  margin-top: var(--sp-1);
}

/* ── Form elements ── */
.form-group { margin-bottom: var(--sp-5); }
.form-label {
  display: block;
  font-family: var(--font-sub);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  margin-bottom: var(--sp-2);
  color: inherit;
}
.form-control {
  width: 100%;
  padding: .8em 1.1em;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  color: var(--color-text-dark);
  background: var(--c-cream-1);
  border: 2px solid var(--color-border);
  border-radius: var(--r-md);
  outline: none;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
  -webkit-appearance: none;
}
.form-control:focus {
  border-color: var(--color-secondary);
  box-shadow: 0 0 0 4px rgba(212,168,83,.2);
}
.form-control::placeholder { color: var(--c-brown-2); opacity: .7; }
textarea.form-control { resize: vertical; min-height: 120px; }
select.form-control { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%237A4A25' d='M8 11L2 5h12z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .8em center; background-size: 14px; padding-right: 2.5em; cursor: pointer; }

/* ── Tag row ── */
.tag-row { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.tag {
  display: inline-block;
  padding: .3em .9em;
  font-size: var(--fs-xs);
  font-family: var(--font-sub);
  font-weight: var(--fw-medium);
  border: 1px solid var(--c-gold);
  border-radius: var(--r-full);
  color: var(--c-gold);
  background: transparent;
  letter-spacing: .06em;
}

/* ── African geometric pattern overlay (CSS-only) ── */
.pattern-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(212,168,83,.07) 0%, transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(200,98,42,.07) 0%, transparent 40%),
    repeating-linear-gradient(45deg, rgba(212,168,83,.04) 0px, rgba(212,168,83,.04) 1px, transparent 1px, transparent 30px),
    repeating-linear-gradient(-45deg, rgba(212,168,83,.04) 0px, rgba(212,168,83,.04) 1px, transparent 1px, transparent 30px);
}

/* ── Arch frame (African architecture motif) ── */
.arch-frame {
  position: relative;
  display: inline-block;
  border-radius: 50% 50% 0 0 / 60% 60% 0 0;
  overflow: hidden;
  border: 4px solid var(--color-secondary);
}

/* ── Stars ── */
.stars { color: var(--c-gold); letter-spacing: .1em; }

/* ── Toast notification ── */
.toast {
  position: fixed;
  bottom: var(--sp-6);
  right: var(--sp-6);
  background: var(--c-dark-3);
  color: var(--c-cream-1);
  padding: var(--sp-4) var(--sp-6);
  border-radius: var(--r-md);
  border-left: 4px solid var(--color-secondary);
  box-shadow: var(--sh-lg);
  z-index: var(--z-toast);
  font-size: var(--fs-sm);
  transform: translateX(120%);
  transition: transform var(--t-base);
}
.toast.show { transform: translateX(0); }
.toast.success { border-color: #4CAF50; }
.toast.error   { border-color: var(--c-terra); }