/* ======================================================================
   TEC — forms.css (shared controls + tiny layout helpers)
   - Uses color variables from main.css (:root)
   - Keep styles neutral; pages can layer on top

   FORMS.CSS — INDEX
   01) Honeypot (hp-field)
   02) Base form elements (global)
   03) Focus states
   04) Textareas
   05) Compact checks (checkbox/radio helpers)
   06) Mini form layout helpers (.tec-form)
   07) Actions / button rows
   08) Help text / fineprint
====================================================================== */

/* ======================================================================
   01) Honeypot (hp-field)
   ====================================================================== */

.hp-field,
.hp-field *{
  display:none !important;
  visibility:hidden !important;
  position:absolute !important;
  left:-9999px !important;
  height:0 !important;
  width:0 !important;
  overflow:hidden !important;
}


/* ======================================================================
   02) Base form elements (global)
   ====================================================================== */

label{
  display:block;
  font-weight:900;
  font-size:12px;
  margin:10px 0 6px;
  color:var(--navy);
}

input,
select,
textarea{
  width:100%;
  padding:10px 10px;
  border-radius:12px;
  border:1px solid rgba(0,102,153,.35);
  background:#fff;
  color:var(--ink);
  font-size:13px;
}


/* ======================================================================
   03) Focus states (inputs only)
   ====================================================================== */

input:focus,
select:focus,
textarea:focus{
  outline:none;
  border-color: var(--highlight);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--highlight) 22%, transparent);
}


/* ======================================================================
   04) Textareas
   ====================================================================== */

textarea{
  min-height:92px;
  resize:vertical;
}


/* ======================================================================
   05) Compact checks (checkbox/radio helpers)
   Usage (recommended):
     <div class="check-row">
       <input type="checkbox" id="x">
       <label for="x" class="check-label">Text</label>
     </div>
   ====================================================================== */

.check-row{
  display:flex;
  align-items:center;
  gap:.55rem;
  margin:10px 0 6px;
}

.check-row input[type="checkbox"],
.check-row input[type="radio"]{
  width:auto;
  padding:0;
  margin:0;
  accent-color: var(--logo-blue);
}

.check-label{
  margin:0;
  font-size:13px;
  font-weight:800;
  color:var(--ink);
}


/* ======================================================================
   06) Mini form layout helpers (.tec-form)
   ====================================================================== */

.tec-form .field{ margin-bottom:1rem; }
.tec-form label{ display:block; margin-bottom:.35rem; }
.tec-form .hint{ margin-top:.35rem; font-size:.9em; opacity:.85; }

/* Inputs (optional “semantic” class hook) */
.tec-form .input,
.tec-form select,
.tec-form textarea{
  width:100%;
}


/* ======================================================================
   07) Actions / button rows
   ====================================================================== */

.form-actions{
  display:flex;
  gap:10px;
  margin-top:12px;
  flex-wrap:wrap;
}

.tec-form .btn-row,
.card .btn-row{
  display:flex;
  gap:.75rem;
  justify-content:flex-end;
  flex-wrap:wrap;
}


/* ======================================================================
   08) Help text / fineprint
   ====================================================================== */

.fineprint{
  margin:10px 0 0;
  font-size:11px;
  color:var(--muted);
}