/* ==========================================================================
   forms.css - Ninja Forms styling, kept apart from custom.css on purpose
   ==========================================================================
   WHY THIS FILE EXISTS
   LiteSpeed Cache replaces the theme stylesheets with one generated "UCSS"
   file that keeps only the selectors found in the page HTML when the file
   is built. Ninja Forms draws its form with JavaScript after the page has
   loaded, so its fields, labels, honeypot and submit button are not in the
   HTML at that moment. Every rule below was being stripped from the UCSS
   file, leaving visitors with browser-default inputs and a visible honeypot.

   This file is enqueued in inc/enqueue.php (handle: hypestudio-forms, after
   hypestudio-custom) and its link tag carries data-no-optimize="1", so
   LiteSpeed leaves it as a normal, complete stylesheet.

   RULE FOR THIS FILE
   Any rule that targets markup Ninja Forms renders with JavaScript (.nf-*
   classes, or inputs, labels, textareas and buttons inside .cta-form-wrap,
   .contact-form-card or .letstalk-form-fallback) belongs here, not in
   custom.css. Rules were moved from custom.css unchanged and in their
   original order. Buttons follow the two approved button styles in
   CLAUDE.md.
   ========================================================================== */

/* --- Section 1: CTA form (.cta-form-wrap) and honeypot. Moved from custom.css, "CTA form" section. --- */

/* Hide honeypot field - NF's own CSS may not load on cached pages for logged-out users */
.nf-field-container.spam-container,
.nf-form-cont .spam-container,
.cta-form-wrap .spam-container {
    display: none !important;
    visibility: hidden !important;
    position: absolute !important;
    left: -9999px !important;
}

.cta-form-wrap .nf-form-cont .nf-field-container {
    margin-bottom: 1rem !important;
}

.cta-form-wrap .nf-form-cont input[type="text"],
.cta-form-wrap .nf-form-cont input[type="email"],
.cta-form-wrap .nf-form-cont select,
.cta-form-wrap .nf-form-cont textarea {
    width: 100% !important;
    padding: 0.625rem 0.875rem !important;
    border: 1px solid var(--border) !important;
    /* border-radius: 8px !important; */
    background: var(--bg-surface) !important;
    color: var(--text-primary) !important;
    font-family: var(--font-primary) !important;
    font-size: 0.875rem !important;
}

.cta-form-wrap .nf-form-cont input[type="submit"],
.cta-form-wrap .nf-form-cont button[type="submit"] {
    background: var(--btn-gradient) !important;
    color: #fff !important;
    border: none !important;
    border-radius: var(--radius-sm) !important;
    padding: 0.5625rem 1.25rem !important;
    font-weight: 600 !important;
    font-size: 0.875rem !important;
    font-family: var(--font-primary) !important;
    line-height: 1 !important;
    cursor: pointer !important;
    transition: background var(--transition), box-shadow var(--transition), transform var(--transition-fast) !important;
}

.cta-form-wrap .nf-form-cont input[type="submit"]:hover,
.cta-form-wrap .nf-form-cont button[type="submit"]:hover {
    background-color: var(--brand-hover) !important;
    box-shadow: var(--shadow-btn) !important;
    transform: translateY(-0.0625rem) !important;
}

/* --- Section 2: contact form card, form title. Moved from custom.css, "Form card" section. --- */

/* Hide Ninja Forms form title */
.contact-form-card .nf-form-title,
.contact-form-card h3.nf-form-title,
.contact-form-card .nf-form-wrap > h3,
.contact-form-card .nf-form-wrap > h2,
.contact-form-card .nf-form > h3,
.contact-form-card .nf-form > h2 {
    display: none !important;
}

/* --- Section 3: contact form card, labels, fields and submit button. Moved from custom.css. --- */

/* Ninja Forms overrides inside contact form card */
/* NF labels */
.contact-form-card label {
    font-size: 0.8125rem !important;
    font-weight: 600 !important;
    color: var(--text-heading) !important;
    margin-bottom: 0.25rem !important;
}

/* NF fields: broad selectors to override NF defaults */
.contact-form-card input[type="text"],
.contact-form-card input[type="email"],
.contact-form-card input[type="tel"],
.contact-form-card textarea,
.contact-form-card select {
    background: var(--bg-primary) !important;
    border: 1px solid var(--border) !important;
    border-radius: 0.375rem !important;
    color: var(--text-heading) !important;
    font-size: 0.8125rem !important;
    font-family: var(--font-primary) !important;
    padding: 0.4375rem 0.6875rem !important;
    height: auto !important;
    line-height: 1.5 !important;
    width: 100% !important;
    box-shadow: none !important;
    transition: border-color 0.2s ease !important;
}

.contact-form-card input[type="text"]:focus,
.contact-form-card input[type="email"]:focus,
.contact-form-card input[type="tel"]:focus,
.contact-form-card textarea:focus,
.contact-form-card select:focus {
    border-color: var(--brand-blue) !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(37,99,235,0.12) !important;
}

.contact-form-card textarea {
    min-height: 6.25rem !important;
    resize: vertical !important;
}

/* NF submit button: catch all button variants */
.contact-form-card input[type="button"],
.contact-form-card input[type="submit"],
.contact-form-card button[type="submit"],
.contact-form-card .nf-field-submit input,
.contact-form-card .submit-container input {
    background: var(--btn-gradient) !important;
    background-color: var(--brand-blue) !important;
    color: #fff !important;
    border: none !important;
    border-radius: var(--radius-sm) !important;
    padding: 0.5625rem 1.25rem !important;
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    font-family: var(--font-primary) !important;
    letter-spacing: 0.01em !important;
    cursor: pointer !important;
    box-shadow: var(--shadow-btn) !important;
    transition: background 0.2s ease, box-shadow 0.2s ease !important;
    width: auto !important;
    height: auto !important;
    display: inline-block !important;
}

.contact-form-card input[type="button"]:hover,
.contact-form-card input[type="submit"]:hover,
.contact-form-card button[type="submit"]:hover,
.contact-form-card .nf-field-submit input:hover,
.contact-form-card .submit-container input:hover {
    background: var(--btn-gradient-hover) !important;
    box-shadow: 0 12px 28px rgba(37, 99, 235, 0.45) !important;
}

/* --- Section 4: Let's Talk form card (.letstalk-form-fallback). Moved from custom.css. --- */

/* Override for NF fields inside fallback */
.letstalk-form-fallback input[type="text"],
.letstalk-form-fallback input[type="email"],
.letstalk-form-fallback textarea {
    background: var(--bg-primary) !important;
    border: 1px solid var(--border) !important;
    border-radius: 0.375rem !important;
    font-size: 0.8125rem !important;
    padding: 0.4375rem 0.6875rem !important;
    height: auto !important;
    color: var(--text-heading) !important;
}

.letstalk-form-fallback input[type="button"],
.letstalk-form-fallback input[type="submit"],
.letstalk-form-fallback button[type="submit"],
.letstalk-form-fallback .nf-field-submit input {
    background: var(--btn-gradient) !important;
    background-color: var(--brand-primary) !important;
    color: #fff !important;
    border: none !important;
    border-radius: var(--radius-sm) !important;
    padding: 0.5625rem 1.25rem !important;
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    cursor: pointer !important;
    box-shadow: var(--shadow-btn) !important;
}

/* --- Section 5: touch-target height for form controls. Moved from custom.css, "touch targets" section. --- */

/* Form inputs and buttons - Ninja Forms, CF7, and any other plugin forms */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="search"],
input[type="password"],
input[type="submit"],
input[type="button"],
select,
textarea {
    min-height: 44px;
}

/* --- Section 6: Bootstrap reboot rules for form controls. COPIED from css/bootstrap5.min.css (5.3.3), not moved. ---
   UCSS drops these bare element selectors too when the page has no label,
   input or textarea in its HTML, which left Ninja Forms fields in the
   browser default font. :where() keeps the specificity at element level,
   the same as Bootstrap's own rules, so nothing else is overridden. */

:where(.nf-form-cont) label {
    display: inline-block;
}

:where(.nf-form-cont) button,
:where(.nf-form-cont) input,
:where(.nf-form-cont) optgroup,
:where(.nf-form-cont) select,
:where(.nf-form-cont) textarea {
    margin: 0;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
}

:where(.nf-form-cont) textarea {
    resize: vertical;
}

:where(.nf-form-cont) [type="button"],
:where(.nf-form-cont) [type="reset"],
:where(.nf-form-cont) [type="submit"],
:where(.nf-form-cont) button {
    -webkit-appearance: button;
}

:where(.nf-form-cont) [type="button"]:not(:disabled),
:where(.nf-form-cont) [type="reset"]:not(:disabled),
:where(.nf-form-cont) [type="submit"]:not(:disabled),
:where(.nf-form-cont) button:not(:disabled) {
    cursor: pointer;
}