/* ==========================================================================
   UPC Style Guide components — see docs/STYLE_GUIDE.md
   Opt-in stylesheet: load via {% block styles %} on pages being migrated to
   the guide. Loads after general-pages.css/theme-system.css so these
   definitions win by source order without needing extra specificity.
   ========================================================================== */

/* ── Typography (§3) ── */
.sg-heading {
  font-family: 'Bebas Neue', cursive;
  font-style: italic;
  letter-spacing: .03em;
}

.gradient-text {
  background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary));
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  padding-right: .15em; /* prevents clipping the last italic letter */
}

/* ── Buttons (§4) — square, not pill ── */
.btn-primary {
  background: var(--accent-primary); color: #0a0a0a;
  padding: .75rem 1.75rem; font-size: .85rem; font-weight: 700;
  border: none; border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  transition: background .2s, transform .15s;
  text-decoration: none;
}
.btn-primary:hover { background: #d4ff1a; transform: translateY(-2px); }
.btn-primary:disabled { opacity: .5; cursor: not-allowed; transform: none; }

.btn-secondary {
  background: transparent; color: #fff;
  padding: .75rem 1.75rem; font-size: .85rem; font-weight: 600;
  border: 1px solid rgba(255,255,255,.15); border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  transition: border-color .2s, background .2s;
  text-decoration: none;
}
.btn-secondary:hover { border-color: rgba(255,255,255,.4); background: rgba(255,255,255,.05); }
.btn-secondary:disabled { opacity: .5; cursor: not-allowed; }

/* ── Cards (§5) ── */
.sg-card {
  background: var(--bg-secondary); border-radius: 14px;
  border: 1px solid var(--border-primary); padding: 1.5rem;
}

/* Card variant for content that manages its own section padding
   (e.g. a header block + a form block stacked inside one card). */
.sg-card-flush {
  background: var(--bg-secondary); border-radius: 14px;
  border: 1px solid var(--border-primary); overflow: hidden;
}

/* ── Forms (§7) ── */
.form-label {
  display: block; font-size: .68rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  color: rgba(255,255,255,.4); margin-bottom: .5rem;
}
.form-input, .form-select {
  width: 100%; padding: .75rem 1rem;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.1); border-radius: 10px;
  color: #fff; font-size: .9rem; font-family: 'Inter', sans-serif;
  outline: none; transition: border-color .2s, box-shadow .2s;
}
.form-input:focus, .form-select:focus {
  border-color: rgba(203,252,2,.4);
  box-shadow: 0 0 0 3px rgba(203,252,2,.08);
}
.form-input::placeholder { color: rgba(255,255,255,.2); }
.field-hint {
  font-size: .72rem; color: rgba(255,255,255,.3);
  margin-top: .35rem; display: flex; gap: .3rem; line-height: 1.45;
}

/* ── Icon badges (solid-lime circle, e.g. contact info icons — §10 avatar language) ── */
.sg-icon-badge {
  width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
  background: var(--accent-primary); color: #0a0a0a;
  display: flex; align-items: center; justify-content: center;
}

/* ── Social icons (§11) — circular, transparent, lime border on hover ── */
.sg-social-icon {
  width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid rgba(203,252,2,.2);
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,.5);
  transition: all .25s;
}
.sg-social-icon:hover { border-color: #CBFC02; color: #CBFC02; transform: translateY(-2px); }

/* ── Semantic alerts (§6 palette, banner form instead of pill) ── */
.alert-success { background: rgba(52,211,153,.12); color: #34d399; border: 1px solid rgba(52,211,153,.3); }
.alert-error   { background: rgba(248,113,113,.12); color: #f87171; border: 1px solid rgba(248,113,113,.3); }

/* ── Section header (§8) ── */
.upc-sec-hdr { display: flex; align-items: baseline; gap: 1.25rem; margin-bottom: 2rem; position: relative; overflow: hidden; flex-wrap: wrap; }
.upc-sec-num { font-family: 'Bebas Neue', cursive; font-size: .82rem; color: rgba(203,252,2,.52); letter-spacing: .2em; font-style: italic; }
h2.upc-sec-t { font-family: 'Bebas Neue', cursive; font-size: 1.7rem; color: #fff; letter-spacing: .04em; font-style: italic; margin: 0; }
.upc-sec-div { flex: 1; height: 1px; background: rgba(255,255,255,.08); min-width: 40px; }