/*
Theme Name: Mirovi
Description: Child theme for Salient — mirovi.com.au
Template: salient
Version: 1.0
*/

/* ── Contact Page: "Let's Create" form ── */
.page-template-default.page-id-1132 #ajax-content-wrap,
.page-slug-contact #ajax-content-wrap {
    background-color: #f5f0eb;
}

.contact-heading {
    font-family: 'Playfair Display', serif !important;
    font-weight: 900 !important;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: clamp(2rem, 5vw, 3.5rem);
    margin-bottom: 0.25rem;
    color: #1a1a1a;
}

.contact-hours {
    color: #888 !important;
    font-size: 0.95rem;
    margin-bottom: 2.5rem !important;
}

/* Form container */
.fluentform_wrapper_3 {
    max-width: 900px;
    margin: 0 auto;
}

/* Input & select styling */
.fluentform_wrapper_3 .ff-el-form-control {
    background-color: #c8c8c8 !important;
    border: none !important;
    border-radius: 6px !important;
    padding: 12px 16px !important;
    font-size: 0.95rem;
    color: #1a1a1a !important;
    height: auto !important;
    min-height: 44px;
}

.fluentform_wrapper_3 .ff-el-form-control::placeholder {
    color: #555 !important;
    opacity: 1;
}

.fluentform_wrapper_3 .ff-el-form-control:focus {
    background-color: #b8b8b8 !important;
    outline: 2px solid #888 !important;
    outline-offset: 1px;
}

/* Textarea */
.fluentform_wrapper_3 textarea.ff-el-form-control {
    min-height: 120px;
    resize: vertical;
}

/* Labels */
.fluentform_wrapper_3 .ff-el-input--label label {
    font-weight: 500;
    font-size: 0.9rem;
    color: #1a1a1a;
    margin-bottom: 6px;
}

/* Select dropdown arrow */
.fluentform_wrapper_3 select.ff-el-form-control {
    appearance: none;
    -webkit-appearance: none;
    background-image: 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='%23555' stroke-width='2' fill='none'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 36px !important;
}

/* Submit button */
.fluentform_wrapper_3 .ff-btn-submit {
    background-color: #1a1a1a !important;
    color: #fff !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 12px 40px !important;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.fluentform_wrapper_3 .ff-btn-submit:hover {
    background-color: #333 !important;
}

/* Column gaps */
.fluentform_wrapper_3 .ff-t-container {
    gap: 20px;
}

.fluentform_wrapper_3 .ff-el-group {
    margin-bottom: 16px;
}

/* ── Footer Contact Form: dropdown fix ── */
.contact-form-footer select.ff-el-form-control {
    border-color: #121213 !important;
    -webkit-appearance: none;
    appearance: none;
    background-image: 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='%23555' stroke-width='2' fill='none'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 15px center;
    padding-right: 36px !important;
    padding-left: 15px !important;
}

/* ── Hamburger icon: white on transparent header over dark sections ──
   Salient's dynamic CSS sets the icon to accent-color (#121213) which
   overrides the header-transparent-dark-color theme option. This
   corrects the specificity so the icon is visible on dark backgrounds. */
#header-outer[data-permanent-transparent="1"].transparent #top .slide-out-widget-area-toggle a .lines::before,
#header-outer[data-permanent-transparent="1"].transparent #top .slide-out-widget-area-toggle a .lines::after {
    background-color: #ffffff !important;
}