/*
Theme Name: HTML Website Builder
Theme URI: https://example.com/
Author: OpenAI
Description: A lightweight code-first WordPress theme for custom HTML pages using WPForms and Yoast SEO.
Version: 4.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: html-website-builder
*/

html, body { margin: 0; padding: 0; }
*, *::before, *::after { box-sizing: border-box; }
img { max-width: 100%; height: auto; }

/* Shared defaults. A page may override these variables on .hwb-page or :root. */
:root,
.hwb-page {
    --hwb-primary: #163a5f;
    --hwb-primary-hover: #102c49;
    --hwb-accent: #d4a548;
    --hwb-text: #26313b;
    --hwb-muted: #667085;
    --hwb-border: #d0d5dd;
    --hwb-form-background: #ffffff;
    --hwb-error: #b42318;
    --hwb-success: #067647;
    --hwb-form-width: 780px;
    --hwb-radius: 14px;
    color: var(--hwb-text);
}

/*
 * WPForms presentation
 *
 * WPForms continues to own form creation, validation, entries, confirmations,
 * notifications, and anti-spam. The theme only supplies a consistent visual
 * treatment. These rules intentionally exclude radio buttons and checkboxes
 * from full-width input styling.
 */
.site-main .wpforms-container {
    width: calc(100% - 36px);
    max-width: var(--hwb-form-width);
    margin: clamp(24px, 5vw, 56px) auto !important;
    padding: clamp(22px, 4vw, 36px);
    background: var(--hwb-form-background);
    border: 1px solid color-mix(in srgb, var(--hwb-primary) 14%, transparent);
    border-radius: var(--hwb-radius);
    box-shadow: 0 16px 45px rgba(16, 24, 40, 0.12);
}

.site-main .wpforms-container .wpforms-field {
    padding: 0 0 20px !important;
}
.site-main .wpforms-container .wpforms-field:last-of-type {
    padding-bottom: 24px !important;
}
.site-main .wpforms-container .wpforms-field-label,
.site-main .wpforms-container .wpforms-field-label-inline,
.site-main .wpforms-container legend {
    display: block;
    margin: 0 0 7px;
    color: var(--hwb-text);
    font: inherit;
    font-weight: 700;
}
.site-main .wpforms-container fieldset {
    min-width: 0;
}

.site-main .wpforms-container input:not([type="radio"]):not([type="checkbox"]):not([type="submit"]):not([type="button"]):not([type="hidden"]),
.site-main .wpforms-container select,
.site-main .wpforms-container textarea {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 48px;
    padding: 11px 13px !important;
    color: var(--hwb-text) !important;
    background: #fff !important;
    border: 1px solid var(--hwb-border) !important;
    border-radius: 8px !important;
    font: inherit !important;
    line-height: 1.4;
}
.site-main .wpforms-container textarea {
    min-height: 125px;
    resize: vertical;
}
.site-main .wpforms-container input:focus,
.site-main .wpforms-container select:focus,
.site-main .wpforms-container textarea:focus {
    outline: 3px solid color-mix(in srgb, var(--hwb-primary) 22%, transparent);
    outline-offset: 1px;
    border-color: var(--hwb-primary) !important;
}
.site-main .wpforms-container input[type="radio"],
.site-main .wpforms-container input[type="checkbox"] {
    width: 18px !important;
    height: 18px !important;
    min-height: 0 !important;
    margin: 2px 9px 0 0 !important;
    padding: 0 !important;
    flex: 0 0 auto;
    accent-color: var(--hwb-primary);
}
.site-main .wpforms-container .wpforms-field-radio li,
.site-main .wpforms-container .wpforms-field-checkbox li {
    margin: 9px 0 !important;
}
.site-main .wpforms-container .wpforms-field-description {
    margin: 6px 0 0;
    color: var(--hwb-muted);
    font-size: 0.9em;
}
.site-main .wpforms-container .wpforms-required-label,
.site-main .wpforms-container label.wpforms-error {
    color: var(--hwb-error);
}
.site-main .wpforms-container button[type="submit"],
.site-main .wpforms-container input[type="submit"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 12px 22px !important;
    color: #fff !important;
    background: var(--hwb-primary) !important;
    border: 0 !important;
    border-radius: 8px !important;
    cursor: pointer;
    font: inherit !important;
    font-weight: 800 !important;
    line-height: 1.2;
    transition: background-color .2s ease, transform .2s ease;
}
.site-main .wpforms-container button[type="submit"]:hover,
.site-main .wpforms-container input[type="submit"]:hover {
    background: var(--hwb-primary-hover) !important;
    transform: translateY(-1px);
}
.site-main .wpforms-container button[type="submit"]:disabled,
.site-main .wpforms-container input[type="submit"]:disabled {
    opacity: .65;
    cursor: wait;
    transform: none;
}
.site-main .wpforms-confirmation-container-full {
    width: calc(100% - 36px);
    max-width: var(--hwb-form-width);
    margin: clamp(24px, 5vw, 56px) auto !important;
    padding: 14px 16px !important;
    color: var(--hwb-success) !important;
    background: #ecfdf3 !important;
    border: 1px solid #abefc6 !important;
    border-radius: 8px !important;
}
.site-main .wpforms-container input.wpforms-error,
.site-main .wpforms-container select.wpforms-error,
.site-main .wpforms-container textarea.wpforms-error,
.site-main .wpforms-container [aria-invalid="true"] {
    border-color: var(--hwb-error) !important;
}

@media (max-width: 640px) {
    .site-main .wpforms-container {
        width: calc(100% - 28px);
        padding: 22px 18px;
    }
    .site-main .wpforms-container .wpforms-field-row-block {
        float: none !important;
        width: 100% !important;
        margin-left: 0 !important;
    }
    .site-main .wpforms-container button[type="submit"],
    .site-main .wpforms-container input[type="submit"] {
        width: 100%;
    }
}