/* =========================================================================
   Henkst Contact Form — hcf-style.css v1.0
   Clean, minimal. Matches Henkst site aesthetic.
   ========================================================================= */

.hcf-form {
    max-width:  560px;
    width:      100%;
}

/* ── Honeypot — completely hidden from humans ───────────────────────────── */
.hcf-pot {
    position:   absolute;
    left:       -9999px;
    top:        -9999px;
    width:      1px;
    height:     1px;
    overflow:   hidden;
    opacity:    0;
    pointer-events: none;
    tab-index:  -1;
}

/* ── Layout ─────────────────────────────────────────────────────────────── */
.hcf-row-half {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.hcf-field {
    display:        flex;
    flex-direction: column;
    margin-bottom:  20px;
}

/* ── Labels ─────────────────────────────────────────────────────────────── */
.hcf-field label {
    font-size:      0.78rem;
    font-weight:    600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color:          #555;
    margin-bottom:  6px;
}

.hcf-req {
    color:      #c00;
    font-style: normal;
}

/* ── Inputs & textarea ──────────────────────────────────────────────────── */
.hcf-form input[type="text"],
.hcf-form input[type="email"],
.hcf-form input[type="tel"],
.hcf-form textarea {
    width:         100%;
    padding:       10px 14px;
    border:        1px solid #ddd;
    border-radius: 4px;
    font-size:     0.95rem;
    font-family:   inherit;
    color:         #222;
    background:    #fff;
    box-sizing:    border-box;
    transition:    border-color 180ms, box-shadow 180ms;
    appearance:    none;
    -webkit-appearance: none;
}

.hcf-form input[type="text"]:focus,
.hcf-form input[type="email"]:focus,
.hcf-form input[type="tel"]:focus,
.hcf-form textarea:focus {
    outline:      none;
    border-color: #111;
    box-shadow:   0 0 0 3px rgba(0, 0, 0, 0.06);
}

.hcf-form textarea {
    resize:     vertical;
    min-height: 140px;
    line-height: 1.6;
}

/* ── Submit button ──────────────────────────────────────────────────────── */
.hcf-submit-row {
    margin-top: 8px;
}

.hcf-submit {
    display:        inline-flex;
    align-items:    center;
    padding:        11px 32px;
    background:     var(--hcf-btn-bg,   #111111);
    color:          var(--hcf-btn-text, #ffffff);
    border:         none;
    border-radius:  4px;
    font-size:      0.88rem;
    font-weight:    600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor:         pointer;
    transition:     opacity 180ms, transform 180ms;
}

.hcf-submit:hover   { opacity: 0.82; transform: translateY(-1px); }
.hcf-submit:active  { transform: translateY(0); }
.hcf-submit:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

/* ── Success message ────────────────────────────────────────────────────── */
.hcf-success {
    display:       flex;
    align-items:   flex-start;
    gap:           12px;
    padding:       20px 24px;
    border:        1px solid #b8ddb8;
    border-radius: 6px;
    background:    #f2fbf2;
    color:         #2a6e2a;
    font-size:     0.95rem;
    line-height:   1.6;
    max-width:     560px;
}

.hcf-success svg {
    flex-shrink: 0;
    width:       22px;
    height:      22px;
    margin-top:  1px;
    stroke:      #2a6e2a;
}

/* ── Error message ──────────────────────────────────────────────────────── */
.hcf-error {
    padding:       12px 18px;
    border:        1px solid #f0b8b8;
    border-radius: 6px;
    background:    #fff5f5;
    color:         #b00;
    font-size:     0.9rem;
    margin-bottom: 20px;
    max-width:     560px;
}

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
    .hcf-row-half {
        grid-template-columns: 1fr;
        gap: 0;
    }
}

/* ── Dropdown ────────────────────────────────────────────────────────────── */
.hcf-select {
    width:         100%;
    padding:       10px 14px;
    border:        1px solid #ddd;
    border-radius: 4px;
    font-size:     0.95rem;
    font-family:   inherit;
    color:         #222;
    background:    #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23666' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 14px center;
    appearance:    none;
    -webkit-appearance: none;
    cursor:        pointer;
    box-sizing:    border-box;
    transition:    border-color 180ms, box-shadow 180ms;
}

.hcf-select:focus {
    outline:      none;
    border-color: #111;
    box-shadow:   0 0 0 3px rgba(0,0,0,0.06);
}

/* ── Checkbox field (copy to sender) ────────────────────────────────────── */
.hcf-field-check {
    margin-bottom: 20px;
}

.hcf-check-label {
    display:     flex;
    align-items: center;
    gap:         10px;
    font-size:   0.9rem;
    color:       #444;
    cursor:      pointer;
    font-weight: normal !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}

.hcf-check-label input[type="checkbox"] {
    width:         17px;
    height:        17px;
    flex-shrink:   0;
    accent-color:  #111;
    cursor:        pointer;
}

/* ── Photo + form layout ────────────────────────────────────────────────── */
.hcf-layout {
    width: 100%;
}

.hcf-layout-with-photo {
    display:               grid;
    grid-template-columns: 1fr 2fr;
    gap:                   40px;
    align-items:           start;
}

.hcf-photo-col {
    position: sticky;
    top:      120px; /* clears fixed header */
}

.hcf-photo {
    width:         100%;
    height:        auto;
    display:       block;
    border-radius: 4px;
    object-fit:    cover;
}

.hcf-form-col {
    min-width: 0;
}

/* Override max-width on form when inside layout */
.hcf-layout-with-photo .hcf-form {
    max-width: none;
}

@media (max-width: 640px) {
    .hcf-layout-with-photo {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .hcf-photo-col {
        position: static;
    }

    .hcf-photo {
        width: 40%;
        max-width: 160px;
        height: auto;
        object-fit: contain;
        border-radius: 8px;
        display: block;
        margin-left: 0;      /* Ensures left alignment */
        margin-right: auto;  /* Pushes potential right margin away */
    }
}