/* ==========================================================================
   Ninja Forms — Theme Override
   Maps NF-generated markup to match the original static contact form design.

   Actual NF DOM (rendered client-side via Backbone/Marionette):
   ─────────────────────────────────────────────────────────────
   .nf-contact-wrap                                     ← template wrapper
     #nf-form-2-cont.nf-form-cont                       ← plugin outer
       .nf-form-wrap.ninja-forms-form-wrap
         .nf-form-layout
           <form>
             <div>
               .nf-form-content                          ← ★ GRID CONTAINER
                 .nf-form-fields-required                ← hidden
                 #nf-field-5-container.nf-field-container.textbox-container   ← ★ GRID CHILD
                   .nf-field
                     #nf-field-5-wrap.field-wrap.textbox-wrap
                       .nf-field-label > label
                       .nf-field-element > input.ninja-forms-field.nf-element
                 #nf-field-6-container  …
                 …

   Form #2 field mapping (grid children are -container IDs):
   ─────────────────────────────────────────────────────────
   ID  5  → Full Name           (textbox)   ─┐ Row 1 (2-col)
   ID  6  → Email Address       (email)     ─┘
   ID  7  → Phone Number        (phone)     → Row 2 full width
   ID  8  → Service             (listselect)─┐
   ID  9  → Budget              (listselect) │ Row 3 (3-col)
   ID 10  → Timeline            (listselect)─┘
   ID 11  → Project Description (textarea)  → Row 4 full width
   ID 12  → How did you hear?   (textbox)   → Row 5 full width
   ID 13  → Send Message        (submit)    → Row 6 full width
   ID 14–21 → Duplicate/junk fields          → HIDDEN
   ========================================================================== */


/* ===== 1. Reset ===== */
.nf-form-cont,
.nf-form-cont *,
.nf-form-cont *::before,
.nf-form-cont *::after {
    box-sizing: border-box;
}


/* ===== 2. Hide NF chrome ===== */
.nf-form-cont .nf-form-title,
.nf-form-cont .nf-form-fields-required,
.nf-form-cont .nf-before-form,
.nf-form-cont .nf-after-form,
.nf-form-cont .nf-before-form-content,
.nf-form-cont .nf-after-form-content,
.nf-form-cont .nf-debug-msg,
.nf-form-cont .nf-response-msg:empty,
.nf-form-cont .nf-form-hp,
.nf-form-cont .nf-before-field,
.nf-form-cont .nf-after-field {
    display: none !important;
}


/* ===== 3. Wrapper card ===== */
.nf-contact-wrap {
    border-radius: var(--htl-radius);
    border: 1px solid var(--htl-border);
    background-color: var(--htl-card);
    padding: 2rem;
}

/* Override .contact-form flex when NF is active */
.contact-form.nf-contact-wrap {
    display: block !important;
}

/* Strip NF internal padding/margins */
.nf-contact-wrap .nf-form-cont,
.nf-contact-wrap .nf-form-wrap,
.nf-contact-wrap .nf-form-layout,
.nf-contact-wrap .nf-form-layout form,
.nf-contact-wrap .nf-form-layout form > div,
.nf-contact-wrap .nf-form-content {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
}


/* ===== 4. Make NF custom elements transparent so containers join grid ===== */
.nf-contact-wrap nf-fields-wrap,
.nf-contact-wrap nf-field,
.nf-contact-wrap nf-section,
.nf-contact-wrap nf-errors {
    display: contents !important;
}

/* ===== 5. CSS Grid on .nf-form-content ===== */
.nf-contact-wrap .nf-form-content {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 1.25rem !important;
}

@media (min-width: 768px) {
    .nf-contact-wrap .nf-form-content {
        grid-template-columns: repeat(6, 1fr) !important;
    }

    /* Default: every field container spans full width */
    .nf-contact-wrap .nf-field-container {
        grid-column: 1 / -1 !important;
    }

    /* Row 1 — Name (3 cols) + Email (3 cols) */
    .nf-contact-wrap #nf-field-5-container {
        grid-column: span 3 !important;
    }
    .nf-contact-wrap #nf-field-6-container {
        grid-column: span 3 !important;
    }

    /* Row 2 — Phone — full width */
    .nf-contact-wrap #nf-field-7-container {
        grid-column: 1 / -1 !important;
    }

    /* Row 3 — 2 columns */
    .nf-contact-wrap #nf-field-8-container {
        grid-column: span 3 !important;
    }
    .nf-contact-wrap #nf-field-9-container {
        grid-column: span 3 !important;
    }
    .nf-contact-wrap #nf-field-10-container {
        grid-column: span 3 !important;
    }

    /* Row 4–6 — Full width */
    .nf-contact-wrap #nf-field-11-container,
    .nf-contact-wrap #nf-field-12-container,
    .nf-contact-wrap #nf-field-13-container {
        grid-column: 1 / -1 !important;
    }
}


/* ===== 5. Hide duplicate/junk fields (IDs 14–21) ===== */
.nf-contact-wrap #nf-field-14-container,
.nf-contact-wrap #nf-field-15-container,
.nf-contact-wrap #nf-field-16-container,
.nf-contact-wrap #nf-field-17-container,
.nf-contact-wrap #nf-field-18-container,
.nf-contact-wrap #nf-field-19-container,
.nf-contact-wrap #nf-field-20-container,
.nf-contact-wrap #nf-field-21-container {
    display: none !important;
}


/* ===== 6. Field container / wrapper reset ===== */
.nf-form-cont .nf-field-container {
    padding: 0 !important;
    margin: 0 !important;
}

.nf-form-cont .nf-field {
    padding: 0 !important;
    margin: 0 !important;
}

.nf-form-cont .field-wrap {
    padding: 0 !important;
    margin: 0 !important;
}

.nf-form-cont .nf-field-label {
    margin-bottom: 0 !important;
    padding: 0 !important;
}

.nf-form-cont .nf-field-element {
    position: relative;
    margin: 0 !important;
    padding: 0 !important;
}


/* ===== 7. Labels — match .form-label ===== */
.nf-form-cont .nf-field-label label {
    display: block !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    color: var(--htl-muted-fg) !important;
    margin-bottom: 0.25rem !important;
    font-family: var(--htl-font-sans) !important;
    line-height: 1.4 !important;
}

/* Required asterisk */
.nf-form-cont .ninja-forms-req-symbol {
    color: var(--htl-destructive) !important;
    margin-left: 0.125rem !important;
    font-weight: 700 !important;
}


/* ===== 8. Inputs / Selects / Textareas — match .form-input ===== */
.nf-form-cont .ninja-forms-field,
.nf-form-cont .nf-element {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0.625rem 1rem !important;
    border-radius: 0.5rem !important;
    background-color: var(--htl-bg) !important;
    border: 1px solid var(--htl-border) !important;
    color: var(--htl-fg) !important;
    font-family: var(--htl-font-sans) !important;
    font-size: 0.875rem !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
    outline: none !important;
    box-sizing: border-box !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}

.nf-form-cont .ninja-forms-field:focus,
.nf-form-cont .nf-element:focus {
    border-color: var(--htl-primary) !important;
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--htl-primary) 15%, transparent) !important;
}


/* ===== 9. Select custom arrow ===== */
.nf-form-cont select.ninja-forms-field,
.nf-form-cont select.nf-element {
    cursor: pointer !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 0.75rem center !important;
    background-size: 1rem !important;
    padding-right: 2.5rem !important;
}

/* Hide the empty div NF puts after <select> */
.nf-form-cont .listselect-wrap .nf-field-element > div:empty {
    display: none !important;
}


/* ===== 10. Textarea ===== */
.nf-form-cont textarea.ninja-forms-field,
.nf-form-cont textarea.nf-element {
    resize: vertical !important;
    min-height: 7.5rem !important;
}


/* ===== 11. Placeholder text ===== */
.nf-form-cont .ninja-forms-field::placeholder,
.nf-form-cont .nf-element::placeholder {
    color: var(--htl-muted-fg) !important;
    opacity: 0.6 !important;
}


/* ===== 12. Submit button — match .btn .btn-primary ===== */
.nf-form-cont .submit-container .ninja-forms-field,
.nf-form-cont .submit-container .nf-element,
.nf-form-cont .submit-wrap .ninja-forms-field,
.nf-form-cont .submit-wrap .nf-element {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.5rem !important;
    padding: 0.75rem 1.5rem !important;
    border-radius: 0.5rem !important;
    font-weight: 600 !important;
    font-size: 0.875rem !important;
    font-family: var(--htl-font-sans) !important;
    cursor: pointer !important;
    border: none !important;
    transition: opacity 0.2s ease, transform 0.15s ease !important;
    text-decoration: none !important;
    line-height: 1.4 !important;
    background-color: var(--htl-primary) !important;
    color: var(--htl-primary-fg) !important;
    width: auto !important;
    max-width: 100% !important;
}

.nf-form-cont .submit-container .ninja-forms-field:hover,
.nf-form-cont .submit-container .nf-element:hover,
.nf-form-cont .submit-wrap .ninja-forms-field:hover,
.nf-form-cont .submit-wrap .nf-element:hover {
    opacity: 0.9 !important;
    transform: translateY(-1px) !important;
}

.nf-form-cont .submit-container .ninja-forms-field:active,
.nf-form-cont .submit-container .nf-element:active,
.nf-form-cont .submit-wrap .ninja-forms-field:active,
.nf-form-cont .submit-wrap .nf-element:active {
    transform: translateY(0) !important;
}

.nf-form-cont .submit-wrap,
.nf-form-cont .submit-container {
    margin-top: 0.25rem;
}


/* ===== 13. Validation / Error states ===== */
.nf-form-cont .nf-error .ninja-forms-field,
.nf-form-cont .nf-error .nf-element {
    border-color: var(--htl-destructive) !important;
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--htl-destructive) 12%, transparent) !important;
}

.nf-form-cont .nf-error-msg {
    color: var(--htl-destructive) !important;
    font-size: 0.75rem !important;
    margin-top: 0.25rem !important;
    font-family: var(--htl-font-sans) !important;
    font-weight: 500 !important;
}


/* ===== 14. Success message ===== */
.nf-form-cont .nf-response-msg {
    padding: 1rem 1.25rem;
    border-radius: 0.5rem;
    background: color-mix(in oklab, var(--htl-primary) 15%, transparent);
    color: var(--htl-primary);
    font-size: 0.875rem;
    font-weight: 500;
    font-family: var(--htl-font-sans);
    text-align: center;
}


/* ===== 15. Field description ===== */
.nf-form-cont .nf-field-description p {
    font-size: 0.6875rem;
    color: var(--htl-muted-fg);
    margin-top: 0.25rem;
    margin-bottom: 0;
    opacity: 0.8;
}


/* ===== 16. Honeypot ===== */
.nf-form-cont .nf-form-hp input {
    position: absolute !important;
    left: -9999px !important;
}


/* ===== 17. Loading spinner ===== */
.nf-form-cont .nf-loading-spinner {
    display: inline-block;
    width: 1.25rem;
    height: 1.25rem;
    border: 2px solid var(--htl-primary-fg);
    border-top-color: transparent;
    border-radius: 50%;
    animation: nf-spin 0.6s linear infinite;
    margin-left: 0.5rem;
}

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


/* ===== 18. Entrance animation ===== */
.nf-form-cont .nf-field-container {
    animation: nf-field-appear 0.35s ease both;
}
.nf-form-cont .nf-field-container:nth-child(2) { animation-delay: 0.04s; }
.nf-form-cont .nf-field-container:nth-child(3) { animation-delay: 0.08s; }
.nf-form-cont .nf-field-container:nth-child(4) { animation-delay: 0.12s; }
.nf-form-cont .nf-field-container:nth-child(5) { animation-delay: 0.16s; }
.nf-form-cont .nf-field-container:nth-child(6) { animation-delay: 0.20s; }
.nf-form-cont .nf-field-container:nth-child(7) { animation-delay: 0.24s; }
.nf-form-cont .nf-field-container:nth-child(8) { animation-delay: 0.28s; }
.nf-form-cont .nf-field-container:nth-child(9) { animation-delay: 0.32s; }

@keyframes nf-field-appear {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* ===== 19. Mobile polishing ===== */
@media (max-width: 767px) {
    .nf-contact-wrap {
        padding: 1.25rem;
    }
}


/* ==========================================================================
   20. Footer Newsletter Form overrides (Form #3)
   ========================================================================== */

/* Transparent NF elements inside footer */
.footer-newsletter-wrap nf-fields-wrap,
.footer-newsletter-wrap nf-field,
.footer-newsletter-wrap nf-section,
.footer-newsletter-wrap nf-errors {
    display: contents !important;
}

/* Hide labels in newsletter */
.footer-newsletter-wrap .nf-field-label {
    display: none !important;
}

/* Remove default wrapper card background/border/padding in footer */
.footer-newsletter-wrap .nf-form-cont,
.footer-newsletter-wrap .nf-form-wrap,
.footer-newsletter-wrap .nf-form-layout,
.footer-newsletter-wrap .nf-form-layout form,
.footer-newsletter-wrap .nf-form-layout form > div,
.footer-newsletter-wrap .nf-form-content {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
    width: 100% !important;
}

/* Align inputs and submit button */
.footer-newsletter-wrap .nf-form-content {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.5rem !important;
    width: 100% !important;
    margin-top: 1.25rem !important;
}

@media (min-width: 768px) {
    .footer-newsletter-wrap .nf-form-content {
        flex-direction: row !important;
        align-items: flex-start !important;
    }
}

/* Email field container expands */
.footer-newsletter-wrap .email-container,
.footer-newsletter-wrap .textbox-container {
    flex: 1 !important;
    width: 100% !important;
    margin: 0 !important;
}

/* Submit field container is auto width */
.footer-newsletter-wrap .submit-container,
.footer-newsletter-wrap .submit-wrap {
    flex: 0 0 auto !important;
    width: auto !important;
    margin: 0 !important;
}

/* Spacing and sizing overrides for input and button in footer */
.footer-newsletter-wrap .ninja-forms-field,
.footer-newsletter-wrap .nf-element {
    padding: 0.5rem 0.75rem !important;
    font-size: 0.875rem !important;
    height: 2.5rem !important;
    line-height: 1.5 !important;
    background-color: var(--htl-bg) !important;
    border: 1px solid var(--htl-border) !important;
    color: var(--htl-fg) !important;
    border-radius: 0.5rem !important;
}

.footer-newsletter-wrap .submit-container .ninja-forms-field,
.footer-newsletter-wrap .submit-container .nf-element,
.footer-newsletter-wrap .submit-wrap .ninja-forms-field,
.footer-newsletter-wrap .submit-wrap .nf-element {
    padding: 0.5rem 1rem !important;
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    background-color: var(--htl-primary) !important;
    color: var(--htl-primary-fg) !important;
    border-radius: 0.5rem !important;
    border: none !important;
    cursor: pointer !important;
    height: 2.5rem !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
}

.footer-newsletter-wrap .submit-container .ninja-forms-field:hover,
.footer-newsletter-wrap .submit-wrap .nf-element:hover {
    background-color: var(--htl-primary-hover) !important;
    opacity: 0.9 !important;
}