/*
  Lokey Contact Us — page-specific sections.
  Design tokens, nav, footer, buttons, section/heading rhythm and the auth
  modal live in css/lokey-theme.css.
*/

/* HERO */
.contact-hero{position:relative; overflow:hidden; padding:70px 0 60px; text-align:center;}
.contact-hero-bg{position:absolute; inset:0; z-index:0; pointer-events:none;}
.contact-hero .wrap{position:relative; z-index:1;}
.contact-hero .sub2{margin:14px auto 0;}

/* CONTACT INFO CARD */
.contact-card{background:#fff; border:1.5px solid var(--line); border-radius:var(--r-l); padding:44px; box-shadow:0 30px 60px -34px rgba(30,43,60,0.2);}
.contact-card-grid{display:grid; grid-template-columns:1fr 1fr; gap:48px;}
.contact-card h3{font-size:1.3rem; margin-bottom:20px;}
.contact-info-item{display:flex; gap:14px; align-items:flex-start; margin-bottom:20px;}
.contact-info-item:last-child{margin-bottom:0;}
.contact-icon{width:44px; height:44px; border-radius:50%; background:var(--blue-tint); color:var(--blue); display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:1rem;}
.contact-info-item p{font-weight:700; margin-bottom:2px;}
.contact-info-item a{color:var(--blue); text-decoration:none; font-weight:600;}
.contact-info-item a:hover{text-decoration:underline;}
.contact-info-item .addr{color:var(--grey); font-size:0.92rem; line-height:1.6; font-weight:400;}

.social-row{display:flex; gap:10px; margin-top:16px;}
.social-row a{width:40px; height:40px; border-radius:50%; background:var(--blue-tint); color:var(--blue); display:flex; align-items:center; justify-content:center; transition:background .15s, color .15s;}
.social-row a:hover{background:var(--blue); color:#fff;}

.office-hours{margin-top:32px; padding-top:24px; border-top:1px solid var(--line);}
.office-hours h4{font-size:1.05rem; margin-bottom:12px;}
.office-hours-row{display:flex; justify-content:space-between; font-size:0.92rem;}
.office-hours-row span:last-child{font-weight:700; color:var(--ink);}

/* FAQ accordion */
.faq-item{border:1.5px solid var(--line); border-radius:var(--r-m); margin-bottom:14px; overflow:hidden; background:#fff;}
.faq-q{width:100%; text-align:left; background:none; border:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; padding:20px 24px; font-family:'Bricolage Grotesque',sans-serif; font-size:1.05rem; font-weight:700; color:var(--ink);}
.faq-icon{width:28px; height:28px; border-radius:50%; background:var(--blue-tint); color:var(--blue); display:flex; align-items:center; justify-content:center; font-weight:800; flex-shrink:0; margin-left:16px; transition:transform .2s;}
.faq-item.open .faq-icon{transform:rotate(45deg); background:var(--navy); color:#fff;}
.faq-a{max-height:0; overflow:hidden; transition:max-height .3s ease;}
.faq-a p{padding:0 24px 22px; color:var(--grey); font-size:0.95rem;}

/* CTA band — same pattern as the homepage's closing band */
.cta-band{background:linear-gradient(90deg, var(--green), #293039); border-radius:var(--r-l); padding:70px 48px; text-align:center; color:#fff; position:relative; overflow:hidden;}
.cta-band h2{font-size:clamp(1.9rem,3.4vw,2.7rem); font-weight:800;}
.cta-band p{margin-top:14px; color:#CFE6FF; font-size:1.05rem;}

.contact-form-card{background:#fff; border:1.5px solid var(--line); border-radius:var(--r-l); overflow:hidden;}
.contact-form-grid{display:grid; grid-template-columns:1fr 1fr; gap:48px; padding:44px;}
.contact-form-info p{margin-top:14px;}
.contact-form-illustration{max-width:220px; width:100%; margin-top:28px;}
.contact-form-card .form-group{margin-bottom:14px;}
.contact-form-card label{display:block; font-size:0.8rem; font-weight:700; margin-bottom:6px; color:var(--ink);}
.contact-form-card input, .contact-form-card select, .contact-form-card textarea{width:100%; padding:13px 15px; border:1.5px solid var(--line); border-radius:12px; font-family:'Inter',sans-serif; font-size:0.95rem; background:#fff; color:var(--ink);}
.contact-form-card input:focus, .contact-form-card select:focus, .contact-form-card textarea:focus{outline:none; border-color:var(--blue);}
.contact-form-card textarea.input-invalid{border-color:#B3261E;}
.contact-form-card textarea.input-invalid:focus{box-shadow:0 0 0 3px rgba(179,38,30,0.12);}

/* map is kept hidden (see markup comment) but styled defensively in case
   it's ever unhidden without a redesign pass */
.map-card{border-radius:var(--r-l); overflow:hidden; border:1.5px solid var(--line);}
.map-card iframe{display:block; width:100%; height:450px; border:0;}

/* Responsive overrides */
@media (max-width:900px){
  .contact-card-grid{grid-template-columns:1fr; gap:36px;}
  .contact-form-grid{grid-template-columns:1fr; gap:28px; padding:32px;}
  .contact-form-grid > div{min-width:0;}
}
@media (max-width:560px){
  .contact-card{padding:28px 22px;}
  .contact-form-grid{padding:28px 22px;}
  /* Keep the illustration on tablet (561-900px), drop it on phone widths to
     save vertical space for the actual form. */
  .contact-form-illustration{display:none!important;}
  .cta-band{padding: 60px 25px;}
}