/**
 * HBREA Contact Page Styles
 *
 * Contact-specific sections only. Shared inner page styles
 * (header sticky, accent hero) are in inner-shared.css.
 *
 * @package HBREA
 * @since 1.1.0
 */

/* ==========================================================================
   CONTACT GRID — Info left, Form right
   ========================================================================== */

body.hbrea-contact .hbrea-contact__grid { display: grid; grid-template-columns: 1fr; gap: var(--hbrea-space-12); }
@media (min-width: 768px) { body.hbrea-contact .hbrea-contact__grid { grid-template-columns: 2fr 3fr; gap: var(--hbrea-space-16); } }

/* Headings */
body.hbrea-contact .hbrea-contact__info-heading,
body.hbrea-contact .hbrea-contact__form-heading { font-family: var(--hbrea-font-heading); font-size: var(--hbrea-text-2xl); font-weight: var(--hbrea-font-bold); color: var(--hbrea-navy); text-transform: uppercase; letter-spacing: var(--hbrea-tracking-tight); margin: 0 0 var(--hbrea-space-8); }

/* Contact Details */
body.hbrea-contact .hbrea-contact__detail { display: flex; gap: var(--hbrea-space-4); margin-bottom: var(--hbrea-space-6); }
body.hbrea-contact .hbrea-contact__detail-icon { flex-shrink: 0; width: 44px; height: 44px; background: var(--hbrea-off-white); border-radius: 50%; display: flex; align-items: center; justify-content: center; }
body.hbrea-contact .hbrea-contact__detail-icon svg { width: 20px; height: 20px; stroke: var(--hbrea-accent); }
body.hbrea-contact .hbrea-contact__detail-label { font-family: var(--hbrea-font-heading); font-size: var(--hbrea-text-xs); font-weight: var(--hbrea-font-bold); color: var(--hbrea-navy); text-transform: uppercase; letter-spacing: var(--hbrea-tracking-widest); margin: 0 0 var(--hbrea-space-1); }
body.hbrea-contact .hbrea-contact__detail-value { font-size: var(--hbrea-text-base); color: var(--hbrea-gray-600); line-height: var(--hbrea-leading-relaxed); margin: 0; }
body.hbrea-contact .hbrea-contact__detail-value a { color: var(--hbrea-accent); text-decoration: underline; text-underline-offset: 3px; }
body.hbrea-contact .hbrea-contact__detail-value a:hover { color: var(--hbrea-accent-hover); }

/* Office Hours */
body.hbrea-contact .hbrea-contact__hours { margin-top: var(--hbrea-space-8); padding-top: var(--hbrea-space-6); border-top: 1px solid var(--hbrea-gray-200); }

/* Social Links */
body.hbrea-contact .hbrea-contact__social { margin-top: var(--hbrea-space-6); }
body.hbrea-contact .hbrea-contact__social-links { display: flex; gap: var(--hbrea-space-3); margin-top: var(--hbrea-space-3); }
body.hbrea-contact .hbrea-contact__social-links a { width: 44px; height: 44px; background: var(--hbrea-off-white); border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: background var(--hbrea-transition); }
body.hbrea-contact .hbrea-contact__social-links a:hover { background: var(--hbrea-accent); }
body.hbrea-contact .hbrea-contact__social-links svg { width: 18px; height: 18px; fill: var(--hbrea-gray-600); }
body.hbrea-contact .hbrea-contact__social-links a:hover svg { fill: var(--hbrea-white); }

/* Form Wrap */
body.hbrea-contact .hbrea-contact__form-wrap { background: var(--hbrea-off-white); padding: var(--hbrea-space-8); border-radius: 8px; }
body.hbrea-contact .hbrea-contact__form-placeholder { text-align: center; padding: var(--hbrea-space-12) var(--hbrea-space-4); color: var(--hbrea-gray-600); font-size: var(--hbrea-text-lg); line-height: var(--hbrea-leading-relaxed); }
body.hbrea-contact .hbrea-contact__form-placeholder a { color: var(--hbrea-accent); text-decoration: underline; text-underline-offset: 3px; }
body.hbrea-contact .hbrea-contact__form-placeholder a:hover { color: var(--hbrea-accent-hover); }

/* CF7 Styling */
body.hbrea-contact .wpcf7-form label { display: block; font-family: var(--hbrea-font-heading); font-size: var(--hbrea-text-xs); font-weight: var(--hbrea-font-bold); color: var(--hbrea-navy); text-transform: uppercase; letter-spacing: var(--hbrea-tracking-widest); margin-bottom: var(--hbrea-space-2); }
body.hbrea-contact .wpcf7-form input[type="text"],
body.hbrea-contact .wpcf7-form input[type="email"],
body.hbrea-contact .wpcf7-form textarea { width: 100%; padding: 14px 16px; font-family: var(--hbrea-font-body); font-size: var(--hbrea-text-base); color: var(--hbrea-black); background: var(--hbrea-white); border: 1px solid var(--hbrea-gray-200); border-radius: 4px; transition: border-color var(--hbrea-transition); margin-bottom: var(--hbrea-space-4); }
body.hbrea-contact .wpcf7-form input[type="text"]:focus,
body.hbrea-contact .wpcf7-form input[type="email"]:focus,
body.hbrea-contact .wpcf7-form textarea:focus { outline: none; border-color: var(--hbrea-accent); box-shadow: 0 0 0 3px rgba(43, 94, 167, 0.1); }
body.hbrea-contact .wpcf7-form textarea { min-height: 150px; resize: vertical; }
body.hbrea-contact .wpcf7-form input[type="submit"] { display: inline-flex; align-items: center; justify-content: center; padding: 14px 28px; font-family: var(--hbrea-font-heading); font-size: var(--hbrea-text-sm); font-weight: var(--hbrea-font-bold); text-transform: uppercase; letter-spacing: var(--hbrea-tracking-wide); background: var(--hbrea-accent); color: var(--hbrea-white); border: 2px solid var(--hbrea-accent); border-radius: 0; cursor: pointer; transition: background var(--hbrea-transition), border-color var(--hbrea-transition); }
body.hbrea-contact .wpcf7-form input[type="submit"]:hover { background: var(--hbrea-accent-hover); border-color: var(--hbrea-accent-hover); }

/* Map */
body.hbrea-contact .hbrea-contact__map { position: relative; width: 100%; padding-bottom: 40%; min-height: 300px; border-radius: 8px; overflow: hidden; }
body.hbrea-contact .hbrea-contact__map iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; }
body.hbrea-contact .hbrea-contact__map-fallback { text-align: center; padding: var(--hbrea-space-12) var(--hbrea-space-4); }
body.hbrea-contact .hbrea-contact__map-fallback-icon { width: 64px; height: 64px; margin: 0 auto var(--hbrea-space-4); }
body.hbrea-contact .hbrea-contact__map-fallback-icon svg { width: 100%; height: 100%; stroke: var(--hbrea-accent); }
body.hbrea-contact .hbrea-contact__map-fallback-title { font-family: var(--hbrea-font-heading); font-size: var(--hbrea-text-xl); font-weight: var(--hbrea-font-bold); color: var(--hbrea-navy); margin: 0 0 var(--hbrea-space-2); }
body.hbrea-contact .hbrea-contact__map-fallback-address { font-size: var(--hbrea-text-base); color: var(--hbrea-gray-600); margin: 0 0 var(--hbrea-space-6); line-height: var(--hbrea-leading-relaxed); }