/**
 * SOLID Mailings - Forms
 *
 * The form inherits from the theme by default: the font, the text colour
 * and the link colour come from the page it sits on, so it looks like it
 * belongs there without anyone setting anything.
 *
 * Everything a customer can set in wp-admin is written as a custom
 * property on that one form, so it overrides the values below without
 * affecting any other form.
 *
 * @package SolidMailings
 */

.solidmailings-form
{
   /* Defaults that follow the theme. */
   --solidmailings-text: inherit;
   --solidmailings-background: transparent;

   /*
    * A muted version of the surrounding text colour, so the border stays
    * visible on a light and on a dark theme without turning into a hard
    * line that shifts every time the text colour is changed. Browsers
    * without color-mix fall back to the rule below this block.
    */
   --solidmailings-border: color-mix(in srgb, currentColor 30%, transparent);

   --solidmailings-button-text: #ffffff;
   --solidmailings-button-background: currentColor;
   --solidmailings-button-border: transparent;
   --solidmailings-button-text-hover: var(--solidmailings-button-text);
   --solidmailings-button-background-hover: var(--solidmailings-button-background);
   --solidmailings-button-border-hover: var(--solidmailings-button-border);
   --solidmailings-width: 100%;
   --solidmailings-radius: 4px;
   --solidmailings-padding: 0.6em 0.8em;
   --solidmailings-font-size: inherit;
   --solidmailings-gap: 0.9em;

   box-sizing: border-box;
   max-width: var(--solidmailings-width);
   width: 100%;
   margin: 0;
   font-family: inherit;
   font-size: var(--solidmailings-font-size);
   color: var(--solidmailings-text);
}

@supports not (color: color-mix(in srgb, currentColor 30%, transparent))
{
   .solidmailings-form
   {
      --solidmailings-border: currentColor;
   }
}

.solidmailings-form *,
.solidmailings-form *::before,
.solidmailings-form *::after
{
   box-sizing: inherit;
}

/* ---------------------------------------------------------------- */
/* Fields                                                            */
/* ---------------------------------------------------------------- */

.solidmailings-fields
{
   display: flex;
   flex-direction: column;
   gap: var(--solidmailings-gap);
}

.solidmailings-field
{
   display: flex;
   flex-direction: column;
   gap: 0.3em;
   min-width: 0;
}

.solidmailings-label
{
   font-size: 0.95em;
   line-height: 1.3;
}

.solidmailings-required
{
   opacity: 0.7;
}

.solidmailings-form .solidmailings-input,
.solidmailings-form input.solidmailings-input,
.solidmailings-form select.solidmailings-select
{
   width: 100%;
   max-width: 100%;
   padding: var(--solidmailings-padding);
   font-family: inherit;
   font-size: inherit;
   line-height: 1.4;
   color: var(--solidmailings-text);
   background: var(--solidmailings-background);
   border: 1px solid var(--solidmailings-border);
   border-radius: var(--solidmailings-radius);
}

.solidmailings-form .solidmailings-input:focus-visible
{
   outline: 2px solid currentColor;
   outline-offset: 2px;
}

/* ---------------------------------------------------------------- */
/* Blocks of fields                                                  */
/* ---------------------------------------------------------------- */

.solidmailings-group
{
   margin: var(--solidmailings-heading-above, 16px) 0 0;
   padding: 0;
   border: 0;
}

/* A block right at the top of the form needs no space above it */
.solidmailings-fields > .solidmailings-group:first-child
{
   margin-top: 0;
}

.solidmailings-group-title
{
   padding: 0;
   margin: 0 0 var(--solidmailings-heading-below, 18px);
   font-size: 1em;
   font-weight: 600;
   line-height: 1.3;
}

.solidmailings-group-fields
{
   display: flex;
   flex-direction: column;
   gap: var(--solidmailings-gap);
}

.solidmailings-form--inline .solidmailings-group-fields
{
   flex-direction: row;
   flex-wrap: wrap;
   align-items: flex-end;
}

/* ---------------------------------------------------------------- */
/* Checkboxes                                                        */
/* ---------------------------------------------------------------- */

.solidmailings-checkbox
{
   display: flex;
   align-items: flex-start;
   gap: 0.5em;
   font-size: 0.95em;
   line-height: 1.4;
   cursor: pointer;
}

.solidmailings-checkbox input[type="checkbox"]
{
   flex: 0 0 auto;
   margin-top: 0.2em;
}

.solidmailings-field--consent,
.solidmailings-field--newsletter
{
   margin-top: var(--solidmailings-gap);
}

/* ---------------------------------------------------------------- */
/* Captcha                                                           */
/* ---------------------------------------------------------------- */

/* Dezelfde marge als tussen de velden, zodat het widget niet tegen het
   vinkje erboven komt te staan. Het widget zelf is een iframe van
   Cloudflare of Google en wordt hier verder niet aangeraakt. */
.solidmailings-captcha
{
   margin-top: var(--solidmailings-gap);
}

/* De onzichtbare variant van reCAPTCHA v2 toont niets; een marge zou daar
   een lege ruimte opleveren. */
.solidmailings-captcha--invisible
{
   margin-top: 0;
}

/* ---------------------------------------------------------------- */
/* Button                                                            */
/* ---------------------------------------------------------------- */

.solidmailings-actions
{
   margin-top: var(--solidmailings-gap);
}

/*
 * By default the button gets no styling at all from the plugin: colours,
 * shape, padding, font size and hover all come from the theme, exactly
 * like the other buttons on the website. Only the cursor is set, which
 * never clashes with a theme.
 */
.solidmailings-form .solidmailings-button
{
   cursor: pointer;
}

/*
 * With "Use my own settings" the plugin styles the button itself, with
 * the values from wp-admin and the defaults at the top of this file.
 */
.solidmailings-form--styled .solidmailings-button
{
   display: inline-block;
   padding: var(--solidmailings-padding);
   font-family: inherit;
   font-size: inherit;
   line-height: 1.4;
   color: var(--solidmailings-button-text);
   background: var(--solidmailings-button-background);
   border: 1px solid var(--solidmailings-button-border);
   border-radius: var(--solidmailings-radius);
   transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}

.solidmailings-form--styled .solidmailings-button:hover,
.solidmailings-form--styled .solidmailings-button:focus-visible
{
   color: var(--solidmailings-button-text-hover);
   background: var(--solidmailings-button-background-hover);
   border-color: var(--solidmailings-button-border-hover);
}

/*
 * Without chosen hover colours the button brightens a little, which is
 * enough of a hint on most themes. As soon as the customer sets a hover
 * colour that brightening has to stop, otherwise their colour is shifted
 * again and can disappear against the background.
 */
.solidmailings-form--styled:not(.solidmailings-form--hover-set) .solidmailings-button:hover
{
   filter: brightness(1.1);
}

.solidmailings-form--styled .solidmailings-button:focus-visible
{
   outline: 2px solid currentColor;
   outline-offset: 2px;
}

.solidmailings-form.is-busy .solidmailings-button
{
   cursor: progress;
}

/*
 * While the form is being sent, a small spinning circle appears next to
 * the text of the button. It takes the text colour of the button, so it
 * fits the theme or the colours set in wp-admin without any setting.
 */
.solidmailings-form.is-busy .solidmailings-button::after
{
   content: "";
   display: inline-block;
   flex: 0 0 auto;
   width: 0.9em;
   height: 0.9em;
   margin-left: 0.6em;
   vertical-align: -0.12em;
   border: 2px solid currentColor;
   border-right-color: transparent;
   border-radius: 50%;
   animation: solidmailings-spin 0.7s linear infinite;
}

@keyframes solidmailings-spin
{
   to
   {
      transform: rotate(360deg);
   }
}

/* Visitors who asked their system for less motion get a slower turn. */
@media (prefers-reduced-motion: reduce)
{
   .solidmailings-form.is-busy .solidmailings-button::after
   {
      animation-duration: 2s;
   }
}

/* ---------------------------------------------------------------- */
/* Side by side, for a footer                                        */
/* ---------------------------------------------------------------- */

.solidmailings-form--inline .solidmailings-fields
{
   flex-direction: row;
   flex-wrap: wrap;
   align-items: flex-end;
}

.solidmailings-form--inline .solidmailings-field
{
   flex: 1 1 14em;
}

.solidmailings-form--inline .solidmailings-actions
{
   margin-top: 0;
   display: inline-flex;
   align-items: flex-end;
}

@media (max-width: 480px)
{
   .solidmailings-form--inline .solidmailings-fields
   {
      flex-direction: column;
      align-items: stretch;
   }

   .solidmailings-form--inline .solidmailings-button
   {
      width: 100%;
   }
}

/* ---------------------------------------------------------------- */
/* Messages                                                          */
/* ---------------------------------------------------------------- */

.solidmailings-message
{
   margin-top: var(--solidmailings-gap);
   line-height: 1.5;
}

.solidmailings-message:empty
{
   margin-top: 0;
}

.solidmailings-message--success
{
   padding: 0.8em 1em;
   border-left: 3px solid currentColor;
}

.solidmailings-message--error
{
   padding: 0.8em 1em;
   border-left: 3px solid currentColor;
   opacity: 0.9;
}

.solidmailings-message--standalone
{
   margin-bottom: var(--solidmailings-gap, 0.9em);
}

/* The form is replaced by its message once it has been sent. */
.solidmailings-form.is-done .solidmailings-fields,
.solidmailings-form.is-done .solidmailings-actions,
.solidmailings-form.is-done .solidmailings-field--consent,
.solidmailings-form.is-done .solidmailings-field--newsletter,
.solidmailings-form.is-done .solidmailings-captcha
{
   display: none;
}

/* ---------------------------------------------------------------- */
/* Notices for the site editor                                       */
/* ---------------------------------------------------------------- */

.solidmailings-notice
{
   padding: 0.8em 1em;
   margin: 0 0 1em;
   border: 1px dashed currentColor;
   border-radius: 4px;
   font-size: 0.95em;
   opacity: 0.85;
}

/* The honeypot, for the rare case where inline styles are stripped. */
.solidmailings-hp
{
   position: absolute !important;
   left: -9999px !important;
   width: 1px !important;
   height: 1px !important;
   overflow: hidden !important;
}


/* A field the visitor picks an answer from */
.solidmailings-choices
{
   display: flex;
   flex-wrap: wrap;
   gap: 4px 18px;
   padding-top: 4px;
}

.solidmailings-choice
{
   display: inline-flex;
   align-items: center;
   gap: 6px;
   font-weight: normal;
}

.solidmailings-choice input
{
   margin: 0;
}

/* Longer answers are easier to read one per line */
.solidmailings-choices--stacked
{
   flex-direction: column;
   gap: 4px;
}