/* ============================================================
   forms.css — styles for the external JS form widget
   ------------------------------------------------------------
   Kept separate from style.css on purpose: the contact form is
   rendered by a third-party JS widget, not hand-written markup,
   so its CSS hooks need to live independently and target the
   generic field structure the widget outputs.

   Expected widget markup (adjust selectors below if the real
   widget differs):

   <form class="form-widget form-widget--hero">   (or --aside)
     <div class="form-row">
       <div class="form-floating">
         <input type="text" class="form-control" id="fname" placeholder=" " required>
         <label for="fname">Full Name</label>
       </div>
       ...
     </div>
     <div class="form-floating">
       <textarea class="form-control" id="comments" placeholder=" "></textarea>
       <label for="comments">Comments</label>
     </div>
     <button type="submit"><i class="fa-solid fa-paper-plane"></i> Send My Request</button>
   </form>

   Two presentation contexts, applied on the root .form-widget:
     .form-widget--hero   -> form placed inside the Home/Landing hero card
     .form-widget--aside  -> form placed as a sidebar/aside on inner pages
   ============================================================ */

:root{
  --form-radius: 10px;
  --form-border: #e3e3e3;
  --form-border-focus: var(--red, #da0000);
  --form-label: #8a8a8e;
  --form-bg: #fbfbfb;
}

.form-widget{ width:100%; }
.form-widget .form-row{ display:flex; flex-wrap:wrap; gap:14px; margin-bottom:0; }
.form-widget .form-row > .form-floating{ flex:1 1 150px; }

/* ---------- floating label fields ---------- */
.form-floating{ position:relative; margin-bottom:14px; }

.form-floating > .form-control,
.form-floating > .form-select,
.form-floating > textarea{
  width:100%;
  height:54px;
  padding:1.15rem .95rem .35rem;
  border:1.5px solid var(--form-border);
  border-radius:var(--form-radius);
  background:var(--form-bg);
  font-family:var(--font-body, inherit);
  font-size:.95rem;
  color:#222;
  appearance:none;
  transition:border-color .25s ease, box-shadow .25s ease, background .25s ease;
}
.form-floating > textarea{
  height:112px;
  padding-top:1.4rem;
  resize:vertical;
  min-height:90px;
}
.form-floating > .form-select{
  background-image:url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='%238a8a8e' d='M4 6l4 4 4-4'/%3e%3c/svg%3e");
  background-repeat:no-repeat;
  background-position:right .9rem center;
  background-size:14px;
  padding-right:2.2rem;
}

.form-floating > .form-control:focus,
.form-floating > .form-select:focus,
.form-floating > textarea:focus{
  outline:none;
  border-color:var(--form-border-focus);
  background:#fff;
  box-shadow:0 0 0 4px rgba(218,0,0,.1);
}

.form-floating > label{
  position:absolute; top:0; left:0; height:100%;
  display:flex; align-items:center;
  padding:0 .95rem;
  margin:0;
  color:var(--form-label);
  font-size:.95rem;
  pointer-events:none;
  transform-origin:0 0;
  transition:transform .18s ease, color .18s ease, opacity .18s ease;
}
.form-floating > textarea ~ label{ align-items:flex-start; padding-top:1rem; }

/* float the label up when filled or focused (placeholder=" " required on inputs) */
.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label,
.form-floating > textarea:focus ~ label,
.form-floating > textarea:not(:placeholder-shown) ~ label,
.form-floating > .form-select ~ label{
  transform:translateY(-.65rem) translateX(.1rem) scale(.76);
  color:var(--form-border-focus);
  background:linear-gradient(var(--form-bg) 45%, transparent 45%);
}
.form-floating > .form-control:focus ~ label,
.form-floating > textarea:focus ~ label{ color:var(--form-border-focus); }

/* checkbox / consent row (optional use) */
.form-check{ display:flex; align-items:flex-start; gap:10px; margin:4px 0 14px; }
.form-check input{ margin-top:4px; accent-color:var(--red, #da0000); width:16px; height:16px; flex-shrink:0; }
.form-check label{ font-size:.82rem; color:var(--form-label); }

/* submit button */
.form-widget button[type="submit"]{
  width:100%; border:none; border-radius:50px;
  padding:16px 20px;
  font-family:var(--font-accent, inherit);
  text-transform:uppercase; letter-spacing:.5px; font-weight:600; font-size:.88rem;
  background:var(--red, #da0000); color:#fff;
  display:flex; align-items:center; justify-content:center; gap:10px;
  transition:background .25s ease, transform .25s ease, box-shadow .25s ease;
  box-shadow:0 10px 22px rgba(218,0,0,.3);
}
.form-widget button[type="submit"]:hover{ background:#000; transform:translateY(-2px); }

.form-widget-note{ font-size:.76rem; color:var(--form-label); text-align:center; margin-top:12px; }

/* ---------- variant: hero form (Home / Landing) ---------- */
.form-widget--hero .form-floating > .form-control,
.form-widget--hero .form-floating > .form-select,
.form-widget--hero .form-floating > textarea{
  background:#fbfbfb; border-color:#ececec;
}
.form-widget--hero .form-floating > .form-control:focus ~ label,
.form-widget--hero .form-floating > textarea:focus ~ label,
.form-widget--hero .form-floating > .form-control:not(:placeholder-shown) ~ label,
.form-widget--hero .form-floating > textarea:not(:placeholder-shown) ~ label{
  background:linear-gradient(#fff 45%, transparent 45%);
}

/* ---------- variant: aside form (inner pages / sidebar) ---------- */
.form-widget--aside{
  background:#fff;
  border:1px solid #ececec;
  border-radius:16px;
  padding:30px 26px;
  box-shadow:0 20px 50px rgba(0,0,0,.08);
}
.form-widget--aside .form-row{ flex-direction:column; }
.form-widget--aside .form-floating{ margin-bottom:16px; }
.form-widget--aside button[type="submit"]{ padding:15px 20px; }

/* ---------- responsive ---------- */
@media(max-width:420px){
  .form-widget .form-row{ flex-direction:column; gap:0; }
  .form-widget .form-row > .form-floating{ flex:1 1 100%; }
}