/* =====================================================================
   Drop Us A Line — view.css

   Per-target CSS variables (set inline by view.php from controller):
     Heading      : --dul-h-ff, --dul-h-fs, --dul-h-fw, --dul-h-fc, --dul-h-tt
     Placeholders : --dul-p-ff, --dul-p-fs, --dul-p-fw, --dul-p-fc, --dul-p-tt
     Values       : --dul-v-ff, --dul-v-fs, --dul-v-fw, --dul-v-fc, --dul-v-tt
     Layout       : --dul-mt/--dul-mr/--dul-mb/--dul-ml,
                    --dul-pt/--dul-pr/--dul-pb/--dul-pl,
                    --dul-bg, --dul-radius, --dul-mw, --dul-w

   SPECIFICITY: themes routinely target `#page-wrapper #main h2`,
   `#main input`, etc., which beats a plain `.drop-us-a-line-*` selector.
   To make user-set typography / spacing actually win, every rule that
   competes with a theme primitive is duplicated under the
   `#page-wrapper #main X, X` pattern (the same trick the submit button
   already uses). The bare selector still applies when the block is
   used outside #main (e.g. in a global area).

   Every var() falls back to the historic default when the user leaves
   the field blank. The .dul-has-custom-layout modifier on the root
   simply enables a clearer mental model — the variables themselves are
   only emitted when set, so there's no observable change otherwise.
   ===================================================================== */

/* ---- Outer wrapper (margin → padding translation) -------------------
 * The outer ONLY provides vertical "margin" via padding (which can't
 * collapse with the parent's margin). All other --dul-* variables set
 * inline on the outer cascade to the block via custom-property
 * inheritance, so the block's CSS can keep using `var(--dul-h-fc, ...)`
 * etc. without changes.
 *
 * Default padding-bottom of 40px preserves the historic "40px gap below
 * the form" behavior even when the user hasn't enabled custom layout.
 */
#page-wrapper #main .drop-us-a-line-outer,
.drop-us-a-line-outer {
    padding-top: var(--dul-mt, 0);
    padding-bottom: var(--dul-mb, 40px);
    /* Horizontal margins on the outer would collide with the block's own
       horizontal-centering margins, so we leave them at 0 here and let
       the block handle horizontal alignment itself. */
    margin: 0;
}

#page-wrapper #main .drop-us-a-line-block,
.drop-us-a-line-block {
    box-sizing: border-box;
    width: var(--dul-w, 50vw);
    max-width: var(--dul-mw, 720px);
    /* margin-top / margin-bottom are handled by the OUTER wrapper as
       padding, to bypass margin collapse. Horizontal margins remain
       here so the alignment classes below can override them. */
    margin-top: 0;
    margin-bottom: 0;
    margin-right: var(--dul-mr, auto);
    margin-left: var(--dul-ml, auto);
    padding-top: var(--dul-pt, 0);
    padding-right: var(--dul-pr, 0);
    padding-bottom: var(--dul-pb, 0);
    padding-left: var(--dul-pl, 0);
    background: var(--dul-bg, transparent);
    border-radius: var(--dul-radius, 0);
}

@media (max-width: 900px) {
    #page-wrapper #main .drop-us-a-line-block,
    .drop-us-a-line-block {
        width: 92vw;
        max-width: none;
    }
}

/* Alignment overrides — applied AFTER the default centered-margin rule. */
#page-wrapper #main .drop-us-a-line-block.dul-align-left,
.drop-us-a-line-block.dul-align-left {
    margin-left: var(--dul-ml, 0);
    margin-right: var(--dul-mr, auto);
}
#page-wrapper #main .drop-us-a-line-block.dul-align-right,
.drop-us-a-line-block.dul-align-right {
    margin-left: var(--dul-ml, auto);
    margin-right: var(--dul-mr, 0);
}
#page-wrapper #main .drop-us-a-line-block.dul-align-center,
.drop-us-a-line-block.dul-align-center {
    margin-left: var(--dul-ml, auto);
    margin-right: var(--dul-mr, auto);
}

.drop-us-a-line-anchor {
    display: block;
    position: relative;
    top: -80px;
    visibility: hidden;
}

/* ---- Heading typography (--dul-h-*) -------------------------------- *
 * Themes commonly style `#main h2 { ... }` (font-family, color, size,
 * font-style). We need at least equal specificity AND we have to win on
 * properties that the theme sets (so we use the same #page-wrapper #main
 * h2 prefix). `font-style: normal` is included as an explicit reset so
 * theme italic h2 styles don't bleed through.                           */
#page-wrapper #main h2.drop-us-a-line-heading,
#page-wrapper #main .drop-us-a-line-heading,
.drop-us-a-line-block h2.drop-us-a-line-heading,
.drop-us-a-line-heading {
    text-align: left;
    margin: 0 0 30px;
    font-family: var(--dul-h-ff, inherit);
    font-size: var(--dul-h-fs, inherit);
    font-weight: var(--dul-h-fw, 700);
    font-style: normal;
    color: var(--dul-h-fc, inherit);
    text-transform: var(--dul-h-tt, none);
    line-height: 1.15;
}

/* Flash messages keep theme defaults; not user-configurable. */
.drop-us-a-line-messages {
    margin-bottom: 16px;
}
.drop-us-a-line-messages .alert {
    border: none !important;
    padding: 10px 14px;
    margin-bottom: 10px;
    border-radius: 4px;
    font-family: inherit;
    font-size: 14px;
}
.drop-us-a-line-messages .alert-success {
    background-color: #B5ECB445 !important;
    color: #2c5e2a;
}
.drop-us-a-line-messages .alert-danger {
    background-color: #E4B5B536 !important;
    color: #7a2f2f;
}

.drop-us-a-line-form .drop-us-a-line-row {
    margin: 0 0 30px 0;
}

/* ---- Typed values (--dul-v-*) -------------------------------------- *
 * Themes very often target `#main input[type=text]` for fonts/colors.
 * Dual-selector to win regardless of where the block is rendered.       */
#page-wrapper #main .drop-us-a-line-form input[type="text"],
#page-wrapper #main .drop-us-a-line-form input[type="email"],
#page-wrapper #main .drop-us-a-line-form input[type="tel"],
.drop-us-a-line-form input[type="text"],
.drop-us-a-line-form input[type="email"],
.drop-us-a-line-form input[type="tel"] {
    display: block;
    width: 100%;
    border: 0;
    border-bottom: 1px solid #cfcfcf;
    padding: 6px 4px;
    margin: 0;
    background: transparent;
    letter-spacing: 0.02em;
    box-shadow: none;
    border-radius: 0;
    outline: none;
    transition: border-color 0.2s ease;
    font-family: var(--dul-v-ff, inherit);
    font-size: var(--dul-v-fs, 14px);
    font-weight: var(--dul-v-fw, normal);
    color: var(--dul-v-fc, inherit);
    text-transform: var(--dul-v-tt, none);
}

/* Legacy ALLCAPS toggle (Form tab): only applies when user did NOT pick a
   per-target text-transform. The var() fallback wins here so the explicit
   user choice always overrides "allcaps mode". */
#page-wrapper #main .drop-us-a-line-block[data-dul-case="allcaps"] .drop-us-a-line-form input[type="text"],
#page-wrapper #main .drop-us-a-line-block[data-dul-case="allcaps"] .drop-us-a-line-form input[type="email"],
#page-wrapper #main .drop-us-a-line-block[data-dul-case="allcaps"] .drop-us-a-line-form input[type="tel"],
.drop-us-a-line-block[data-dul-case="allcaps"] .drop-us-a-line-form input[type="text"],
.drop-us-a-line-block[data-dul-case="allcaps"] .drop-us-a-line-form input[type="email"],
.drop-us-a-line-block[data-dul-case="allcaps"] .drop-us-a-line-form input[type="tel"] {
    text-transform: var(--dul-v-tt, uppercase);
    letter-spacing: 0.04em;
}

/* ---- Placeholders (--dul-p-*) -------------------------------------- */
#page-wrapper #main .drop-us-a-line-form input::placeholder,
#page-wrapper #main .drop-us-a-line-form input::-webkit-input-placeholder,
#page-wrapper #main .drop-us-a-line-form input::-moz-placeholder,
#page-wrapper #main .drop-us-a-line-form input:-ms-input-placeholder,
.drop-us-a-line-form input::placeholder,
.drop-us-a-line-form input::-webkit-input-placeholder,
.drop-us-a-line-form input::-moz-placeholder,
.drop-us-a-line-form input:-ms-input-placeholder {
    opacity: 1;
    font-family: var(--dul-p-ff, inherit);
    font-size: var(--dul-p-fs, inherit);
    font-weight: var(--dul-p-fw, normal);
    color: var(--dul-p-fc, #888);
    text-transform: var(--dul-p-tt, none);
}
#page-wrapper #main .drop-us-a-line-block[data-dul-case="allcaps"] .drop-us-a-line-form input::placeholder,
#page-wrapper #main .drop-us-a-line-block[data-dul-case="allcaps"] .drop-us-a-line-form input::-webkit-input-placeholder,
#page-wrapper #main .drop-us-a-line-block[data-dul-case="allcaps"] .drop-us-a-line-form input::-moz-placeholder,
#page-wrapper #main .drop-us-a-line-block[data-dul-case="allcaps"] .drop-us-a-line-form input:-ms-input-placeholder,
.drop-us-a-line-block[data-dul-case="allcaps"] .drop-us-a-line-form input::placeholder,
.drop-us-a-line-block[data-dul-case="allcaps"] .drop-us-a-line-form input::-webkit-input-placeholder,
.drop-us-a-line-block[data-dul-case="allcaps"] .drop-us-a-line-form input::-moz-placeholder,
.drop-us-a-line-block[data-dul-case="allcaps"] .drop-us-a-line-form input:-ms-input-placeholder {
    text-transform: var(--dul-p-tt, uppercase);
}

#page-wrapper #main .drop-us-a-line-form input:focus,
.drop-us-a-line-form input:focus {
    border-bottom-color: #333;
}

.drop-us-a-line-form input:-webkit-autofill,
.drop-us-a-line-form input:-webkit-autofill:hover,
.drop-us-a-line-form input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px transparent inset;
    box-shadow: 0 0 0 1000px transparent inset;
    -webkit-text-fill-color: inherit;
    transition: background-color 5000s ease-in-out 0s;
}
.drop-us-a-line-form input:autofill {
    background: transparent !important;
    color: inherit !important;
}

.drop-us-a-line-honey {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.drop-us-a-line-actions {
    margin-top: 12px;
}

/* Submit button uses the Value typography (it's a typed-text-equivalent). */
#page-wrapper #main .drop-us-a-line-submit,
.drop-us-a-line-submit {
    background: #333;
    color: #ffffff !important;
    border: 0;
    border-radius: 20px;
    padding: 10px 30px;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.1s ease;
    font-family: var(--dul-v-ff, inherit);
    font-size: var(--dul-v-fs, 14px);
    font-weight: var(--dul-v-fw, normal);
    text-transform: var(--dul-v-tt, none);
}
#page-wrapper #main .drop-us-a-line-block[data-dul-case="allcaps"] .drop-us-a-line-submit,
.drop-us-a-line-block[data-dul-case="allcaps"] .drop-us-a-line-submit {
    text-transform: var(--dul-v-tt, uppercase);
    letter-spacing: 0.08em;
}
#page-wrapper #main .drop-us-a-line-submit:hover,
#page-wrapper #main .drop-us-a-line-submit:focus,
.drop-us-a-line-submit:hover,
.drop-us-a-line-submit:focus {
    background: #000;
    color: #ffffff !important;
    transform: translateY(-1px);
    outline: none;
}

/* CAPTCHA */
.drop-us-a-line-captcha {
    margin: 8px 0 24px;
}
.drop-us-a-line-captcha .form-label,
.drop-us-a-line-captcha label {
    display: block;
    font-size: 12px;
    text-transform: none;
    letter-spacing: 0.04em;
    color: #888;
    margin-bottom: 6px;
}
.drop-us-a-line-block[data-dul-case="allcaps"] .drop-us-a-line-captcha .form-label,
.drop-us-a-line-block[data-dul-case="allcaps"] .drop-us-a-line-captcha label {
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.drop-us-a-line-captcha .drop-us-a-line-captcha-img img {
    max-width: 100%;
    height: auto;
    display: block;
    margin-bottom: 8px;
}
#page-wrapper #main .drop-us-a-line-captcha .drop-us-a-line-captcha-input input[type="text"],
.drop-us-a-line-captcha .drop-us-a-line-captcha-input input[type="text"] {
    display: block;
    width: 100%;
    border: 0;
    border-bottom: 1px solid #cfcfcf;
    padding: 6px 4px;
    background: transparent;
    letter-spacing: 0.02em;
    box-shadow: none;
    border-radius: 0;
    outline: none;
    font-family: var(--dul-v-ff, inherit);
    font-size: var(--dul-v-fs, 14px);
    color: var(--dul-v-fc, inherit);
    text-transform: var(--dul-v-tt, none);
}
.drop-us-a-line-block[data-dul-case="allcaps"] .drop-us-a-line-captcha .drop-us-a-line-captcha-input input[type="text"] {
    text-transform: var(--dul-v-tt, uppercase);
    letter-spacing: 0.04em;
}
.drop-us-a-line-captcha .drop-us-a-line-captcha-input input[type="text"]::placeholder,
.drop-us-a-line-captcha .drop-us-a-line-captcha-input input[type="text"]::-webkit-input-placeholder,
.drop-us-a-line-captcha .drop-us-a-line-captcha-input input[type="text"]::-moz-placeholder,
.drop-us-a-line-captcha .drop-us-a-line-captcha-input input[type="text"]:-ms-input-placeholder {
    font-family: var(--dul-p-ff, inherit);
    color: var(--dul-p-fc, #888);
    text-transform: var(--dul-p-tt, none);
}
.drop-us-a-line-block[data-dul-case="allcaps"] .drop-us-a-line-captcha .drop-us-a-line-captcha-input input[type="text"]::placeholder,
.drop-us-a-line-block[data-dul-case="allcaps"] .drop-us-a-line-captcha .drop-us-a-line-captcha-input input[type="text"]::-webkit-input-placeholder,
.drop-us-a-line-block[data-dul-case="allcaps"] .drop-us-a-line-captcha .drop-us-a-line-captcha-input input[type="text"]::-moz-placeholder,
.drop-us-a-line-block[data-dul-case="allcaps"] .drop-us-a-line-captcha .drop-us-a-line-captcha-input input[type="text"]:-ms-input-placeholder {
    text-transform: var(--dul-p-tt, uppercase);
}

/* ---- Admin "View submissions" pill ---------------------------------
 * This pill is only rendered for logged-in admins (it never appears for
 * site visitors). It must remain readable regardless of the block's
 * user-configured typography / background, so every property here is a
 * fixed value (no `var(--dul-*)` references) and uses `!important` to
 * win against any future per-target typography rules. The white pill on
 * a subtle border + dark text reads cleanly on any background — light,
 * dark, photographic, etc.                                              */
.drop-us-a-line-admin-link {
    margin-top: 14px;
    text-align: right;
    font-size: 12px !important;
    line-height: 1.2 !important;
    letter-spacing: 0.04em !important;
    text-transform: none !important;
}
#page-wrapper #main .drop-us-a-line-admin-link a,
.drop-us-a-line-admin-link a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border: 1px solid #2c3e50 !important;
    border-radius: 999px;
    background: #ffffff !important;
    color: #2c3e50 !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    font-style: normal !important;
    text-transform: none !important;
    letter-spacing: 0.02em !important;
    text-decoration: none !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
    text-shadow: none;
}
#page-wrapper #main .drop-us-a-line-admin-link a:hover,
#page-wrapper #main .drop-us-a-line-admin-link a:focus,
.drop-us-a-line-admin-link a:hover,
.drop-us-a-line-admin-link a:focus {
    background: #c30000 !important;
    color: #ffffff !important;
    border-color: #c30000 !important;
    outline: none;
}
/* Explicitly defeat the legacy ALLCAPS data-attribute (the admin link
   is always sentence-case for readability). */
.drop-us-a-line-block[data-dul-case="allcaps"] .drop-us-a-line-admin-link a,
.drop-us-a-line-block[data-dul-case="allcaps"] #page-wrapper #main .drop-us-a-line-admin-link a {
    text-transform: none !important;
    letter-spacing: 0.02em !important;
}
/* The leading icon stays the same color as the label. */
.drop-us-a-line-admin-link .dual-line-admin-link-icon {
    font-size: 14px;
    line-height: 1;
}

.drop-us-a-line-block .visually-hidden {
    position: absolute !important;
    height: 1px;
    width: 1px;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px);
    white-space: nowrap;
}