/* HPG League hub — per-league accent + form styling.
   --league-accent / --league-on-accent are set per page (and per card) by PHP. */

.lg-accent-text   { color: var(--league-accent); }
.lg-accent-bg     { background-color: var(--league-accent); color: var(--league-on-accent); }
.lg-accent-border { border-color: var(--league-accent); }
.lg-hover-accent:hover { color: var(--league-accent); }
.lg-accent-wash {
  background: linear-gradient(180deg, transparent 30%, rgba(19,19,19,.85) 100%),
              linear-gradient(135deg, color-mix(in srgb, var(--league-accent) 35%, transparent), transparent 60%);
}

.lg-btn-accent {
  background-color: var(--league-accent);
  color: var(--league-on-accent);
}
.lg-btn-accent:hover { filter: brightness(1.12); }
.lg-btn-ghost {
  border: 2px solid var(--league-accent);
  color: var(--league-accent);
}
.lg-btn-ghost:hover { background-color: var(--league-accent); color: var(--league-on-accent); }

/* League hero: photo + accent glow */
.lg-hero-glow {
  background:
    radial-gradient(ellipse at 15% 85%, color-mix(in srgb, var(--league-accent) 40%, transparent) 0%, transparent 55%),
    linear-gradient(to bottom, rgba(19,19,19,.35) 0%, rgba(19,19,19,.75) 60%, #131313 100%);
}
.lg-slash {
  background: repeating-linear-gradient(-45deg, var(--league-accent) 0 10px, transparent 10px 20px);
  opacity: .9;
}

/* Scroll animation (same as site pages) */
.float-up { opacity: 0; transform: translateY(32px); transition: opacity .5s ease, transform .5s ease; }
.float-up.in-view { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .float-up { opacity: 1; transform: none; transition: none; }
}

/* Forms — "Technical Entry" inputs from DESIGN.md */
/* element+class selectors so these beat the Tailwind forms plugin ([type='text'] etc.), which loads later */
input.lg-input, select.lg-select, textarea.lg-textarea {
  width: 100%;
  background: #1c1b1b;
  border: 0;
  border-bottom: 2px solid #4e4633;
  border-radius: 0;
  color: #e5e2e1;
  padding: .85rem 1rem;
  font-size: 1rem;
}
input.lg-input:focus, select.lg-select:focus, textarea.lg-textarea:focus {
  outline: none;
  box-shadow: none;
  border-bottom-color: var(--league-accent);
  background: #201f1f;
}
input.lg-input[aria-invalid="true"], select.lg-select[aria-invalid="true"], textarea.lg-textarea[aria-invalid="true"] {
  border-bottom-color: #ffb4ab;
}
.lg-label { display: block; font-family: 'Inter', sans-serif; font-size: .75rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: #d1c5ac; margin-bottom: .5rem; }
.lg-optional { color: #9a9078; font-weight: 400; text-transform: none; letter-spacing: 0; }
.lg-error { color: #ffb4ab; font-size: .8125rem; margin-top: .4rem; }
.lg-check { display: flex; gap: .75rem; align-items: flex-start; cursor: pointer; }
.lg-check input[type="checkbox"], .lg-check input[type="radio"] {
  margin-top: .2rem; width: 1.15rem; height: 1.15rem; flex-shrink: 0;
  background-color: #1c1b1b; border: 2px solid #4e4633; color: var(--league-accent);
}
.lg-check input[type="radio"] { border-radius: 9999px; }
.lg-check input[type="checkbox"] { border-radius: 3px; }
select.lg-select { padding-right: 2.5rem; background-position: right .75rem center; }
select.lg-select option { background: #1c1b1b; }
.lg-check input:focus-visible { outline: 2px solid var(--league-accent); outline-offset: 2px; }
.lg-pill input { position: absolute; opacity: 0; pointer-events: none; }
.lg-pill span {
  display: inline-block; padding: .6rem 1rem; border: 1px solid rgba(78,70,51,.6); border-radius: 7px;
  font-size: .8125rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #d1c5ac;
  cursor: pointer; transition: all .15s ease;
}
.lg-pill input:checked + span { background: var(--league-accent); border-color: var(--league-accent); color: var(--league-on-accent); }
.lg-pill input:focus-visible + span { outline: 2px solid var(--league-accent); outline-offset: 2px; }

.lg-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.lg-status { border-left: 4px solid; padding: 1rem 1.25rem; margin-top: 1rem; }
.lg-status.ok  { border-color: #4ade80; background: rgba(74,222,128,.08); }
.lg-status.err { border-color: #ffb4ab; background: rgba(255,180,171,.08); }

button[disabled] { opacity: .6; cursor: not-allowed; }

/* FAQ accordion */
.lg-faq summary { list-style: none; cursor: pointer; }
.lg-faq summary::-webkit-details-marker { display: none; }
.lg-faq[open] .lg-faq-icon { transform: rotate(45deg); }
.lg-faq-icon { transition: transform .2s ease; }

/* Filter chips */
.lg-chip[aria-pressed="true"] { background: #f58318; color: #3d2f00; border-color: #f58318; }