/* Form kit for contact, newsletter and comment forms (loaded on singular views). Base controls are in style.css. */
.df-form{display:grid;gap:20px;max-width:var(--content)}
.df-form > .df-btn{justify-self:start}
.df-field{display:grid;gap:6px;align-content:start}
.df-field > label{font-weight:600}
.df-optional{font-weight:400;color:var(--mute)}
.df-hint{font-size:var(--fs-s);color:var(--mute)}
textarea.df-input{min-height:140px;resize:vertical}
select.df-input{appearance:none;padding-inline-end:36px;background:var(--df-surface) linear-gradient(45deg,transparent 50%,currentColor 50%) right 18px top 50% / 5px 5px no-repeat}
.df-input:disabled{opacity:.55}
.df-fields-2{display:grid;gap:20px}
@media (min-width:560px){.df-fields-2{grid-template-columns:1fr 1fr}}
.df-affix{display:flex}
.df-affix > span{display:inline-flex;align-items:center;padding-inline:12px;border:1px solid var(--df-field);color:var(--mute);background:var(--bg)}
.df-affix > span:first-child{border-inline-end:0}
.df-affix > span:last-child{border-inline-start:0}
.df-check{display:flex;gap:12px;align-items:flex-start;padding-block:8px}
.df-check input{flex:none;width:24px;height:24px;margin:1px 0 0;accent-color:var(--acc)}
.df-check label{cursor:pointer}
.df-check .df-hint{display:block}
fieldset{border:0;padding:0;margin:0;min-width:0}
legend{padding:0}