/* ==========================================================================
   Leyland Disc Golf — Component styles (the brand re-skin)
   Pairs with colors_and_type.css. These are the real, reusable component
   styles for the brand: buttons, chips, cards, forms, facts, timeline,
   callouts, FAQ, nav, footer. Used by preview cards AND the UI kit.
   ========================================================================== */

/* ---- Buttons ------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: .5em;
  cursor: pointer; font-family: var(--font-display); font-weight: 700;
  font-size: .95rem; letter-spacing: .01em; text-decoration: none;
  padding: .72rem 1.2rem; border-radius: var(--radius);
  border: 2px solid transparent; background: #fff; color: var(--ink);
  transition: transform .12s var(--ease), background .15s var(--ease),
              box-shadow .15s var(--ease), border-color .15s var(--ease), color .15s var(--ease);
}
.btn:active { transform: translateY(1px) scale(.99); }
.btn-primary { background: var(--teal); border-color: var(--teal); color: var(--on-teal); }
.btn-primary:hover { background: var(--teal-800); border-color: var(--teal-800); color: #fff; box-shadow: var(--shadow); }
.btn-flight { background: var(--amber); border-color: var(--amber); color: var(--on-flight); }
.btn-flight:hover { background: var(--orange); border-color: var(--orange); color: #fff; box-shadow: var(--shadow-flight); }
.btn-ghost { background: transparent; border-color: var(--border); color: var(--ink); }
.btn-ghost:hover { border-color: var(--teal); color: var(--teal); }
.btn-on-teal { background: var(--amber); border-color: var(--amber); color: var(--on-flight); }
.btn-on-teal:hover { background: #fff; border-color: #fff; color: var(--teal); }
.btn:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.btn-lg { padding: .9rem 1.6rem; font-size: 1.05rem; }

/* ---- Chips / trust-bar --------------------------------------------------- */
.chip {
  display: inline-flex; align-items: center; gap: .4em;
  padding: .34rem .75rem; border-radius: var(--radius-pill);
  background: #fff; border: 1px solid var(--border);
  font-family: var(--font-body); font-size: .82rem; font-weight: 600; color: var(--ink-soft);
}
.chip-accent { background: var(--teal-50); border-color: var(--teal-200); color: var(--teal-800); }
.chip-flight { background: color-mix(in srgb, var(--amber) 20%, #fff); border-color: color-mix(in srgb, var(--amber) 45%, #fff); color: var(--orange); }
.chip-dot::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--amber); flex: none; }

/* ---- Cards --------------------------------------------------------------- */
.card {
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 1.4rem; background: #fff;
}
.card h3 { font-family: var(--font-display); font-weight: 700; margin: 0 0 .4rem; color: var(--ink); }
.card p { margin: 0; color: var(--ink-soft); font-size: .95rem; line-height: 1.55; }
.card--link { transition: box-shadow .18s var(--ease), transform .18s var(--ease), border-color .18s var(--ease); cursor: pointer; }
.card--link:hover { box-shadow: var(--shadow); transform: translateY(-3px); border-color: var(--teal-200); }
.card--accent { border-top: 4px solid var(--amber); }

/* ---- Forms --------------------------------------------------------------- */
.field { display: grid; gap: .4rem; margin-bottom: 1rem; }
.field label { font-family: var(--font-display); font-weight: 600; font-size: .9rem; color: var(--ink); }
.field input, .field textarea, .field select {
  font: inherit; font-family: var(--font-body); padding: .72rem .85rem;
  border: 1.5px solid var(--border); border-radius: var(--radius);
  background: #fff; color: var(--ink); transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.field input:focus-visible, .field textarea:focus-visible {
  outline: none; border-color: var(--teal);
  box-shadow: 0 0 0 3px var(--teal-100);
}
.consent { display: grid; grid-template-columns: auto 1fr; gap: .65rem; align-items: start; font-size: .9rem; color: var(--muted); line-height: 1.45; }
.consent input { margin-top: .2rem; accent-color: var(--teal); width: 18px; height: 18px; }
.form-status { margin: 0; padding: .8rem .95rem; border-radius: var(--radius); font-weight: 600; font-size: .92rem; }
.form-status.is-success { background: var(--success-bg); color: var(--success); }
.form-status.is-error   { background: var(--error-bg);   color: var(--error); }
.form-status.is-note    { background: var(--note-bg);    color: var(--note); }

/* ---- Facts / logistics --------------------------------------------------- */
.facts { list-style: none; padding: 0; margin: 0; display: grid; gap: .6rem; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.facts li { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: .8rem .9rem; }
.facts .k { display: block; font-family: var(--font-display); font-size: .7rem; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); margin-bottom: .15rem; }
.facts .v { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; color: var(--ink); }

/* ---- Timeline / agenda --------------------------------------------------- */
.timeline { list-style: none; padding: 0; margin: 0; border-left: 2px solid var(--teal-200); }
.timeline li { position: relative; padding: 0 0 1.2rem 1.4rem; }
.timeline li:last-child { padding-bottom: 0; }
.timeline li::before { content: ""; position: absolute; left: -8px; top: .25rem; width: 14px; height: 14px; border-radius: 50%; background: var(--amber); border: 2px solid #fff; }
.timeline .t { font-family: var(--font-display); font-weight: 700; color: var(--ink); }
.timeline .when { color: var(--muted); font-size: .85rem; }

/* ---- Callout ------------------------------------------------------------- */
.callout { border-left: 4px solid var(--amber); background: var(--cream); padding: 1rem 1.15rem; border-radius: 0 var(--radius) var(--radius) 0; }
.callout strong { font-family: var(--font-display); }

/* ---- Eyebrow ------------------------------------------------------------- */
.eyebrow { font-family: var(--font-display); text-transform: uppercase; letter-spacing: .14em; font-size: .8rem; font-weight: 700; color: var(--orange); margin: 0 0 .6rem; }

/* ---- FAQ (always-open Q&A — NEVER a collapsible dropdown) ---------------- */
.faq { display: grid; gap: 1.1rem; }
.faq-item { border-top: 2px solid var(--teal-100); padding-top: .9rem; }
.faq-q { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; color: var(--ink); margin: 0 0 .4rem; }
.faq-q::before { content: "Q. "; color: var(--orange); }
.faq-a { margin: 0; color: var(--ink-soft); font-size: .95rem; line-height: 1.6; }