/* ==========================================================================
   CONTACT PAGE — contact.css
   Styles for page-contact.php: hero, intro, form section, info strip.
   CF7 field overrides ensure Contact Form 7's generated markup matches
   the GrillApe design system.
   ========================================================================== */

/* ------------------------------------------------------------------
   CONTACT HER */
.contact-hero {
    padding-block: var(--section-pad-lg);
}

.contact-hero__inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
}

.contact-hero__eyebrow {
    color: var(--color-yellow);
}

.contact-hero__heading {
    max-width: 16ch;
}

/* ------------------------------------------------------------------
   CONTACT INTRO
------------------------------------------------------------------ */
.contact-intro {
    padding-block: var(--section-pad);
}

.contact-intro__inner {
    max-width: 60ch;
    /* Centre the prose block */
    margin-inline: auto;
    text-align: left;
    position: relative;
    z-index: 1;
}

.contact-intro__copy {
    font-size: 1.125rem;
    line-height: 1.7;
    color: var(--color-green);
    opacity: 0.9;
    margin-bottom: var(--sp-6);
}

/* ------------------------------------------------------------------
   CONTACT FORM SECTION
------------------------------------------------------------------ */
.contact-form-section {
    padding-block: var(--section-pad-sm);
}

/* Centred, max-width form wrapper */
.contact-form {
    max-width: 40rem;
    margin-inline: auto;
    position: relative;
    z-index: 1;
}

/* Notice shown before CF7 is configured */
.contact-form__notice {
    display: inline-block;
    margin-bottom: var(--sp-6);
    padding: var(--sp-2) var(--sp-4);
    background-color: rgba(26, 92, 58, 0.08);
    border-left: 3px solid var(--color-yellow);
    border-radius: 0 0.25rem 0.25rem 0;
    font-size: 0.8rem;
    color: var(--color-green);
    letter-spacing: 0.04em;
}

/* ------------------------------------------------------------------
   SHARED INPUT TOKENS
   Applied to both the fallback form and the CF7 override layer.
------------------------------------------------------------------ */
:root {
    --input-bg:           #F5F0E8;
    --input-border:       rgba(26, 92, 58, 0.4);
    --input-border-focus: var(--color-green);
    --input-radius:       0.5rem;
    --input-pad-v:        var(--sp-3);
    --input-pad-h:        var(--sp-4);
    --input-font-size:    1rem;
    --input-line-height:  1.5;
}

/* ------------------------------------------------------------------
   CONTACT FORM 7 OVERRIDES
   CF7 generates .wpcf7-form > p wrapping each field. These rules
   target the raw input elements directly for consistent styling.
------------------------------------------------------------------ */

/* Remove CF7's default paragraph spacing */
.wpcf7-form p {
    margin-bottom: var(--sp-6);
}

/* All text-like inputs */
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form input[type="date"],
.wpcf7-form input[type="number"],
.wpcf7-form select,
.wpcf7-form textarea {
    display: block;
    width: 100%;
    background-color: var(--input-bg);
    border: 2px solid var(--input-border);
    border-radius: var(--input-radius);
    padding: var(--input-pad-v) var(--input-pad-h);
    font-family: var(--font-body);
    font-size: var(--input-font-size);
    line-height: var(--input-line-height);
    color: var(--color-green);
    transition: border-color var(--t-fast), outline-color var(--t-fast), box-shadow var(--t-fast);
    outline: 2px solid transparent;
    outline-offset: 2px;
}

.wpcf7-form input[type="text"]:focus,
.wpcf7-form input[type="email"]:focus,
.wpcf7-form input[type="tel"]:focus,
.wpcf7-form input[type="date"]:focus,
.wpcf7-form input[type="number"]:focus,
.wpcf7-form select:focus,
.wpcf7-form textarea:focus {
    border-color: var(--input-border-focus);
    outline-color: var(--color-yellow);
    box-shadow: 0 0 0 3px rgba(245, 183, 49, 0.25);
}

/* Placeholder text */
.wpcf7-form input::placeholder,
.wpcf7-form textarea::placeholder {
    color: rgba(26, 92, 58, 0.4);
}

/* Textarea */
.wpcf7-form textarea {
    resize: vertical;
    min-height: 8rem;
}

/* CF7 submit button — mirrors .btn .btn--yellow */
.wpcf7-submit {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    padding: 0.85em 1.75em;
    border-radius: var(--radius-pill);
    font-family: var(--font-body);
    font-size: 0.875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    line-height: 1;
    background-color: var(--color-yellow);
    color: var(--color-green);
    border: 2px solid var(--color-yellow);
    cursor: pointer;
    transition: background-color var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
    white-space: nowrap;
    width: 100%;
    justify-content: center;
}

.wpcf7-submit:hover {
    background-color: #e5a820;
    border-color: #e5a820;
    transform: translateY(-2px);
}

.wpcf7-submit:active {
    transform: translateY(0);
}

/* CF7 validation states */
.wpcf7-not-valid {
    border-color: #c0392b !important;
}

.wpcf7-not-valid-tip {
    display: block;
    margin-top: var(--sp-1);
    font-size: 0.8rem;
    color: #c0392b;
}

.wpcf7-response-output {
    margin-top: var(--sp-6);
    padding: var(--sp-4);
    border-radius: var(--radius-card);
    font-size: 0.9rem;
    font-weight: 500;
}

/* CF7 success message */
.wpcf7-mail-sent-ok {
    background-color: rgba(26, 92, 58, 0.08);
    border: 1px solid var(--color-green);
    color: var(--color-green);
}

/* CF7 error message */
.wpcf7-mail-sent-ng,
.wpcf7-validation-errors {
    background-color: rgba(192, 57, 43, 0.08);
    border: 1px solid #c0392b;
    color: #c0392b;
}

/* ------------------------------------------------------------------
   FALLBACK ENQUIRY FORM
   Matches CF7 styles using BEM classes on the static HTML form.
------------------------------------------------------------------ */
.enquiry-form {
    display: flex;
    flex-direction: column;
    gap: var(--sp-6);
}

/* Two-column row on wider screens */
.enquiry-form__row {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-6);
}

@media (min-width: 36rem) {
    .enquiry-form__row {
        grid-template-columns: 1fr 1fr;
        gap: var(--sp-4);
    }
}

/* Individual field wrapper */
.enquiry-form__field {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
}

/* Label — eyebrow style */
.enquiry-form__label {
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-green);
    display: flex;
    align-items: center;
    gap: var(--sp-1);
}

.enquiry-form__required {
    color: var(--color-yellow);
    font-size: 0.9em;
}

/* Input, select, textarea */
.enquiry-form__input,
.enquiry-form__select,
.enquiry-form__textarea {
    display: block;
    width: 100%;
    background-color: var(--input-bg);
    border: 2px solid var(--input-border);
    border-radius: var(--input-radius);
    padding: var(--input-pad-v) var(--input-pad-h);
    font-family: var(--font-body);
    font-size: var(--input-font-size);
    line-height: var(--input-line-height);
    color: var(--color-green);
    transition: border-color var(--t-fast), outline-color var(--t-fast), box-shadow var(--t-fast);
    outline: 2px solid transparent;
    outline-offset: 2px;
    /* Disabled styling — still looks polished */
    opacity: 0.75;
    cursor: not-allowed;
}

.enquiry-form__input::placeholder,
.enquiry-form__textarea::placeholder {
    color: rgba(26, 92, 58, 0.4);
}

/* Keep hover/focus styles even when disabled for visual completeness */
.enquiry-form__input:not([disabled]):focus,
.enquiry-form__select:not([disabled]):focus,
.enquiry-form__textarea:not([disabled]):focus {
    border-color: var(--input-border-focus);
    outline-color: var(--color-yellow);
    box-shadow: 0 0 0 3px rgba(245, 183, 49, 0.25);
    opacity: 1;
}

.enquiry-form__select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%231A5C3A' 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");
    background-repeat: no-repeat;
    background-position: right var(--sp-4) center;
    background-size: 1rem;
    padding-right: calc(var(--sp-4) * 2.5);
    cursor: not-allowed;
}

.enquiry-form__textarea {
    resize: vertical;
    min-height: 8rem;
}

/* Submit button area */
.enquiry-form__submit {
    display: flex;
}

/* Full width on mobile, auto on larger screens */
.enquiry-form__submit .btn {
    width: 100%;
    justify-content: center;
}

@media (min-width: 36rem) {
    .enquiry-form__submit .btn {
        width: auto;
    }
}

/* Disabled submit button */
.enquiry-form__submit .btn[disabled] {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

/* ------------------------------------------------------------------
   CONTACT INFO STRIP
------------------------------------------------------------------ */
.contact-info-strip {
    padding-block: var(--section-pad);
}

.contact-info-strip__grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-10);
    text-align: center;
}

@media (min-width: 48rem) {
    .contact-info-strip__grid {
        grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
        gap: var(--sp-8);
        text-align: left;
    }
}

.contact-info-strip__item {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
}

/* Eyebrow heading in yellow */
.contact-info-strip__heading {
    color: var(--color-yellow);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

.contact-info-strip__text {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--color-off-white);
    opacity: 0.85;
}

.contact-info-strip__link {
    color: var(--color-yellow);
    text-decoration: none;
}

.contact-info-strip__link:hover,
.contact-info-strip__link:focus-visible {
    text-decoration: underline;
}