/* ==========================================================================
   The Waffle Taco — Contact Us Page (contact.php)
   ========================================================================== */

.contact-us-grid { display:grid; grid-template-columns:1.4fr 1fr; gap:var(--space-2xl); align-items:start; }
.contact-form-card { background:var(--color-white); border-radius:var(--radius-lg); padding:var(--space-2xl); box-shadow:var(--shadow-md); }
.contact-form-card h2 { margin-bottom:var(--space-sm); }
.form-intro { color:var(--color-brown-light); margin-bottom:var(--space-xl); }
.contact-form { display:flex; flex-direction:column; gap:var(--space-lg); }
.form-group { display:flex; flex-direction:column; gap:var(--space-xs); }
.form-group label { font-family:var(--font-display); font-weight:600; font-size:0.9rem; color:var(--color-charcoal); }
.form-group .optional { font-weight:400; color:var(--color-stone); font-size:0.8rem; }
.form-group input,
.form-group select,
.form-group textarea {
    padding:0.75rem 1rem;
    border:2px solid var(--color-stone-light);
    border-radius:var(--radius);
    font-family:var(--font-body);
    font-size:0.95rem;
    color:var(--color-dark);
    background:var(--color-white);
    transition:border-color 0.2s ease, box-shadow 0.2s ease;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline:none;
    border-color:var(--color-taco-orange);
    box-shadow:0 0 0 3px rgba(236,106,54,0.12);
}
.form-group textarea { resize:vertical; min-height:120px; }
.form-submit { align-self:flex-start; }

/* T&C Checkbox */
.form-checkbox-group { margin-top:0; }
.form-checkbox {
    display:flex;
    align-items:flex-start;
    gap:8px;
    cursor:pointer;
    font-size:0.9rem;
    color:var(--color-brown);
    line-height:1.4;
    user-select:none;
}

.form-checkbox input[type="checkbox"] {
    width:18px;
    height:18px;
    accent-color:var(--color-taco-orange);
    cursor:pointer;
    margin:0;
    flex-shrink:0;
    margin-top:2px;
}

.form-terms-link {
    color:var(--color-taco-orange);
    font-weight:600;
    text-decoration:underline;
    text-underline-offset:2px;
}

.form-terms-link:hover {
    color:var(--color-waffle-red);
}

/* reCAPTCHA Notice */
.recaptcha-notice {
    margin-top:var(--space-lg);
    padding-top:var(--space-md);
    border-top:1px solid var(--color-stone-light);
    font-size:0.75rem;
    color:var(--color-stone);
    line-height:1.5;
}

.recaptcha-notice a {
    color:var(--color-brown-light);
    text-decoration:underline;
    text-underline-offset:1px;
}

.recaptcha-notice a:hover {
    color:var(--color-taco-orange);
}

.contact-sidebar { display:flex; flex-direction:column; gap:var(--space-lg); }
.sidebar-card { background:var(--color-white); border-radius:var(--radius-lg); padding:var(--space-xl); box-shadow:var(--shadow-sm); border:1px solid var(--color-stone-light); }
.sidebar-card h3 { color:var(--color-charcoal); margin-bottom:var(--space-md); font-size:1.05rem; }
.sidebar-item { display:flex; gap:var(--space-md); margin-bottom:var(--space-md); }
.sidebar-item:last-child { margin-bottom:0; }
.sidebar-icon { font-size:1.3rem; flex-shrink:0; margin-top:2px; }
.sidebar-item strong { display:block; font-size:0.85rem; color:var(--color-charcoal); margin-bottom:2px; }
.sidebar-item p { font-size:0.9rem; color:var(--color-brown-light); line-height:1.5; }
.sidebar-item a { color:var(--color-brown-light); transition:color 0.2s ease; }
.sidebar-item a:hover { color:var(--color-taco-orange); }
.contact-social-links { display:flex; flex-direction:column; gap:var(--space-sm); }
.social-link-row { display:flex; align-items:center; gap:var(--space-sm); color:var(--color-brown-light); font-size:0.95rem; font-weight:500; padding:var(--space-sm); border-radius:var(--radius); transition:all 0.2s ease; }
.social-link-row:hover { background:var(--color-cream); color:var(--color-taco-orange); }


/* ==========================================================================
   Responsive — Contact
   ========================================================================== */

@media (max-width:900px) {
    .contact-us-grid { grid-template-columns:1fr; }
}