/* ==========================================================================
   JADRO STEEL — Enquiry form refresh (Sep 2026)
   Applies to every .wform card: footer "Request a Free Quote" (sitewide),
   /contact-us and /brochure. Loaded LAST in jadro_steel.libraries.yml.
   Design only — no field, label or text changes.
   ========================================================================== */

.wform{
  --jf-o:#FF6600;
  --jf-od:#DD5500;
  --jf-ink:#16181b;
  --jf-mut:#6b7078;
  --jf-line:#dfe2e6;
  --jf-field:#f6f7f9;
  --jf-err:#d93025;
  position:relative;
  padding:32px 30px 24px;
  border-radius:16px;
  overflow:hidden;
  isolation:isolate;
  box-shadow:0 30px 70px -24px rgba(0,0,0,.55),0 0 0 1px rgba(255,102,0,.22);
}
/* orange flange along the top edge of the card */
.wform::before{
  content:"";position:absolute;left:0;right:0;top:0;height:5px;z-index:2;
  background:linear-gradient(90deg,var(--jf-od) 0%,var(--jf-o) 45%,#ff8c40 100%);
}
/* softer shadow when the card sits on a light page (/contact-us, /brochure) */
.sec .wform{box-shadow:0 22px 55px -24px rgba(22,24,27,.35),0 0 0 1px var(--jf-line)}

/* ---- Card title (block label, e.g. "Request a Free Quote") ---- */
.wform #block-jadro-steel-webform > h2,
.wform #block-jadro-steel-webform-2 > h2,
.wform #block-jadro-steel-webform-3 > h2,
.wform .block-webform-block > h2{
  display:flex;align-items:center;gap:12px;
  margin:0 0 20px;
  font-size:22px;font-weight:800;line-height:1.2;letter-spacing:-.01em;
  color:var(--jf-ink);
}
.wform #block-jadro-steel-webform > h2::before,
.wform #block-jadro-steel-webform-2 > h2::before,
.wform #block-jadro-steel-webform-3 > h2::before,
.wform .block-webform-block > h2::before{
  content:"";flex:none;width:5px;height:24px;border-radius:2px;background:var(--jf-o);
}

/* ---- Form flow: fields -> button -> note -> hidden inputs ---- */
.wform form{display:flex;flex-direction:column}
.wform form > *{order:9}
.wform form > .jf-fields{order:1}
.wform form > .jf-submit{order:3}
.wform form > .jf-note{order:4}

.wform .form-item,
.wform .form-wrapper,
.wform .form-actions{margin:0}

/* ---- Grid ---- */
.wform .fg{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.wform .fp{display:flex;flex-direction:column;gap:6px;min-width:0}
.wform .fp.full{grid-column:1/-1}

.wform .fp > label{
  font-size:12.5px;font-weight:700;line-height:1.3;letter-spacing:.005em;
  color:#2b2e33;
}

/* ---- Fields ---- */
.wform .fp input:where(:not([type=submit],[type=hidden],[type=checkbox],[type=radio])),
.wform .fp select,
.wform .fp textarea{
  display:block;width:100%;height:48px;margin:0;
  padding:0 14px;
  border:1.5px solid var(--jf-line);border-radius:10px;
  background-color:var(--jf-field);
  font-family:'Montserrat',sans-serif;font-size:14.5px;font-weight:500;line-height:1.2;
  color:var(--jf-ink);
  -webkit-appearance:none;appearance:none;
  transition:border-color .2s ease,box-shadow .2s ease,background-color .2s ease;
}
.wform .fp textarea{
  height:112px;min-height:96px;padding:12px 14px;line-height:1.5;resize:vertical;
}
.wform .fp select{
  padding-right:42px;cursor:pointer;text-overflow:ellipsis;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23FF6600' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 15px center;background-size:12px 8px;
}
.wform .fp input::placeholder,
.wform .fp textarea::placeholder{color:#9ba1a8;opacity:1}

.wform .fp input:where(:not([type=submit])):hover,
.wform .fp select:hover,
.wform .fp textarea:hover{border-color:#c6cbd1}

.wform .fp input:where(:not([type=submit])):focus,
.wform .fp select:focus,
.wform .fp textarea:focus{
  outline:none;border-color:var(--jf-o);background-color:#fff;
  box-shadow:0 0 0 4px rgba(255,102,0,.14);
}

/* errors (Drupal inline errors + browser validation after interaction) */
.wform .fp .error,
.wform .fp input:user-invalid,
.wform .fp select:user-invalid,
.wform .fp textarea:user-invalid{border-color:var(--jf-err);background-color:#fff7f6}
.wform .form-item--error-message{margin-top:5px;font-size:12px;font-weight:600;color:var(--jf-err)}

/* ---- Submit: the one loud element ---- */
.wform .jf-submit{margin-top:18px}
.wform .jf-submit .form-actions,
.wform #edit-actions{
  position:relative;width:100%;border-radius:12px;overflow:hidden;text-align:center;
}
.wform .jf-submit input[type=submit],
.wform #edit-actions-submit{
  display:block;width:100%;height:56px;margin:0;
  padding:0 20px!important;
  border:0;border-radius:12px;
  background:linear-gradient(180deg,#ff7d24 0%,#FF6600 55%,#e85b00 100%);
  color:#fff;
  font-family:'Montserrat',sans-serif;font-size:16px!important;font-weight:800;letter-spacing:.01em;line-height:1;
  white-space:normal;cursor:pointer;
  -webkit-appearance:none;appearance:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),inset 0 -3px 0 rgba(0,0,0,.14),0 14px 30px -10px rgba(255,102,0,.7);
  transition:transform .15s ease,box-shadow .2s ease,filter .2s ease;
}
.wform .jf-submit input[type=submit]:hover,
.wform #edit-actions-submit:hover{
  transform:translateY(-2px);filter:saturate(1.08) brightness(1.03);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),inset 0 -3px 0 rgba(0,0,0,.14),0 20px 36px -12px rgba(255,102,0,.8);
}
.wform .jf-submit input[type=submit]:active,
.wform #edit-actions-submit:active{transform:translateY(1px);box-shadow:inset 0 2px 4px rgba(0,0,0,.18)}
.wform .jf-submit input[type=submit]:focus-visible,
.wform #edit-actions-submit:focus-visible{outline:3px solid var(--jf-ink);outline-offset:3px}
.wform .jf-submit input[type=submit]:disabled{filter:grayscale(.3);opacity:.75;cursor:progress}

/* light sweep across the button to pull the eye */
.wform .jf-submit .form-actions::after{
  content:"";position:absolute;top:0;bottom:0;left:-60%;width:38%;
  background:linear-gradient(100deg,transparent 0%,rgba(255,255,255,.38) 50%,transparent 100%);
  transform:skewX(-18deg);pointer-events:none;
  animation:jfSheen 4.5s ease-in-out 1.5s infinite;
}
@keyframes jfSheen{0%{left:-60%}30%,100%{left:135%}}

/* ---- Reassurance line ---- */
.wform .jf-note{
  display:block;margin:12px 0 0;
  font-size:12.5px;line-height:1.5!important;text-align:center;color:var(--jf-mut);
}
.wform .jf-note::before{
  content:"";display:inline-block;width:13px;height:13px;margin:0 6px 0 0;vertical-align:-2px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FF6600' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3Cpath d='M9 12l2 2 4-4'/%3E%3C/svg%3E") center/contain no-repeat;
}
.wform .jf-note strong{color:var(--jf-ink);font-weight:700}

/* ---- Dark CTA band around the footer form ---- */
.csec .cg{align-items:center}
.csec .cg > *,
.wform .fg > *{min-width:0}

/* ==========================================================================
   Tablet / mobile
   ========================================================================== */
@media (max-width:980px){
  .csec .cg{gap:28px}
}

@media (max-width:820px){
  /* band */
  .csec{padding:38px 0}
  .csec .cg{padding:0 16px;gap:20px}
  .csec .ct h2{font-size:1.4rem!important;line-height:1.25!important;margin:6px 0 8px}
  .csec .ct p{margin-bottom:14px;font-size:14px}
  .csec .ct .lbl{margin-bottom:4px}

  /* 9 benefit lines become one swipeable row instead of a tall list */
  .csec .cfs{
    flex-direction:row;flex-wrap:nowrap;gap:8px;
    margin:0 -16px;padding:2px 16px 4px;
    overflow-x:auto;scroll-snap-type:x proximity;scroll-padding:0 16px;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    -webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);
            mask-image:linear-gradient(90deg,#000 88%,transparent);
  }
  .csec .cfs::-webkit-scrollbar{display:none}
  .csec .cf{
    flex:0 0 auto;max-width:220px;scroll-snap-align:start;
    gap:8px;padding:8px 12px 8px 8px;
    border:1px solid rgba(255,255,255,.12);border-radius:10px;background:rgba(255,255,255,.06);
    font-size:12.5px;line-height:1.35;
  }
  .csec .cf strong{font-weight:600}
  .csec .cck{width:18px;height:18px;font-size:10px}

  /* card */
  .wform{padding:22px 16px 16px;border-radius:14px}
  .wform::before{height:4px}
  .wform #block-jadro-steel-webform > h2,
  .wform #block-jadro-steel-webform-2 > h2,
  .wform #block-jadro-steel-webform-3 > h2,
  .wform .block-webform-block > h2{font-size:18px!important;margin-bottom:14px;gap:10px}
  .wform #block-jadro-steel-webform > h2::before,
  .wform #block-jadro-steel-webform-2 > h2::before,
  .wform #block-jadro-steel-webform-3 > h2::before,
  .wform .block-webform-block > h2::before{height:19px;width:4px}

  /* keep two columns for short fields -> much shorter form */
  .wform .fg{grid-template-columns:1fr 1fr!important;gap:10px!important}
  .wform .fp.full{grid-column:1/-1!important}
  .wform .fp{gap:4px}
  .wform .fp > label{font-size:12px}

  .wform .fp input:where(:not([type=submit],[type=hidden],[type=checkbox],[type=radio])),
  .wform .fp select{height:44px;padding:0 12px;font-size:16px;border-radius:9px}
  .wform .fp select{padding-right:34px;background-position:right 12px center}
  .wform .fp textarea{height:78px;min-height:70px;padding:10px 12px;font-size:16px;border-radius:9px}
  .wform .fp input::placeholder,
  .wform .fp textarea::placeholder{font-size:13.5px}

  .wform .jf-submit{margin-top:14px}
  .wform .jf-submit input[type=submit],
  .wform #edit-actions-submit{height:52px;font-size:15.5px!important;min-height:52px}

  .wform .jf-note{font-size:12px;margin-top:10px}
}

/* very narrow phones: stack everything */
@media (max-width:359px){
  .wform .fg{grid-template-columns:1fr!important}
}

@media (prefers-reduced-motion:reduce){
  .wform .jf-submit .form-actions::after{animation:none;display:none}
  .wform .jf-submit input[type=submit],
  .wform #edit-actions-submit{transition:none}
}