/* contact page sections */
/* ════════════════════════════════════════
   CONTACT PAGE
════════════════════════════════════════ */

/* Hero */
.contact-hero{
  background:linear-gradient(135deg,var(--navy) 0%,var(--navy-light) 50%,var(--color-dark-tint) 100%);
  padding:clamp(48px,6vw,72px) 0;color:var(--white);text-align:center;position:relative;overflow:hidden
}
.contact-hero::before{content:'';position:absolute;top:-100px;right:-100px;width:500px;height:500px;background:radial-gradient(circle,var(--primary-08) 0%,transparent 60%);border-radius:50%}
.contact-hero .container{position:relative;z-index:2;max-width:640px}
.contact-hero h1{font-size:clamp(28px,4vw,44px);color:var(--white);margin-bottom:12px}
.contact-hero h1 em{font-style:normal;color:var(--teal)}
.contact-hero p{font-size:16px;color:var(--on-dark-65);line-height:1.7}

/* Contact methods strip */
.contact-methods{background:var(--white);border-bottom:1px solid var(--grey-200);padding:0}
.contact-methods .container{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.contact-method{display:flex;align-items:center;gap:14px;padding:24px;border-right:1px solid var(--grey-200);transition:all var(--transition);cursor:pointer}
.contact-method:last-child{border-right:none}
.contact-method:hover{background:var(--teal-subtle)}
.cm-icon{width:44px;height:44px;background:var(--teal-subtle);border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all var(--transition)}
.contact-method:hover .cm-icon{background:var(--teal-glow)}
.cm-icon svg{width:20px;height:20px;color:var(--teal)}
.cm-icon i{font-size:20px;color:var(--teal)}
.cm-text h4{font-family:'DM Sans',sans-serif;font-size:14px;font-weight:600;margin-bottom:2px}
.cm-text p{font-size:12px;color:var(--grey-500);margin:0}
.cm-text a{color:var(--teal);font-weight:600;font-size:13px}

/* Main layout */
.contact-layout{padding:var(--section-pad) 0;background:var(--off-white)}
.contact-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:40px;align-items:start}

/* Contact form */
.contact-form-card{background:var(--white);border:1px solid var(--grey-200);border-radius:var(--radius-lg);padding:36px}
.contact-form-card h2{font-size:22px;margin-bottom:8px}
.contact-form-card>p{font-size:14px;color:var(--grey-500);margin-bottom:24px}
.cf-group{margin-bottom:16px}
.cf-group label{display:block;font-size:13px;font-weight:600;color:var(--grey-700);margin-bottom:6px}
.cf-group label .req{color:var(--coral)}
.cf-group input,.cf-group select,.cf-group textarea{
  width:100%;padding:12px 16px;border:1.5px solid var(--grey-200);border-radius:var(--radius);
  font-family:'DM Sans',sans-serif;font-size:14px;color:var(--navy);background:var(--white);
  transition:border-color var(--transition);outline:none
}
.cf-group input:focus,.cf-group select:focus,.cf-group textarea:focus{border-color:var(--teal)}
.cf-group textarea{min-height:120px;resize:vertical}
.cf-group select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%237A8495' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;cursor:pointer}
.cf-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.cf-submit{margin-top:8px}
.cf-submit .btn-primary{padding:14px 36px;font-size:15px}
.cf-privacy{font-size:11px;color:var(--grey-500);margin-top:12px}
.cf-privacy a{color:var(--teal)}

/* Contact Form 7 output styled to match design */
.contact-form-generated .wpcf7{margin:0}
.contact-form-generated .wpcf7-form{margin:0}
.contact-form-generated .cf-group{margin-bottom:16px}
.contact-form-generated .cf-group label{display:block;font-size:13px;font-weight:600;color:var(--grey-700);margin-bottom:6px}
.contact-form-generated .cf-group label .req{color:var(--coral)}
.contact-form-generated .wpcf7 input[type="text"],
.contact-form-generated .wpcf7 input[type="email"],
.contact-form-generated .wpcf7 input[type="tel"],
.contact-form-generated .wpcf7 select,
.contact-form-generated .wpcf7 textarea{
  width:100%;padding:12px 16px;border:1.5px solid var(--grey-200);border-radius:var(--radius);
  font-family:'DM Sans',sans-serif;font-size:14px;color:var(--navy);background:var(--white);
  transition:border-color var(--transition);outline:none
}
.contact-form-generated .wpcf7 input:focus,
.contact-form-generated .wpcf7 select:focus,
.contact-form-generated .wpcf7 textarea:focus{border-color:var(--teal)}
.contact-form-generated .wpcf7 textarea{min-height:120px;resize:vertical}
.contact-form-generated .wpcf7 select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%237A8495' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;cursor:pointer}
.contact-form-generated .wpcf7 .wpcf7-submit{
  display:inline-flex;align-items:center;justify-content:center;
  padding:14px 36px;background:var(--teal);color:var(--white);
  font-size:15px;font-weight:600;border-radius:var(--radius-pill);
  border:none;cursor:pointer;transition:all var(--transition);
  font-family:'DM Sans',sans-serif
}
.contact-form-generated .wpcf7 .wpcf7-submit:hover{background:var(--teal-dark);transform:translateY(-1px);box-shadow:0 4px 16px var(--primary-30)}
.contact-form-generated .wpcf7 .wpcf7-spinner{vertical-align:middle}
.contact-form-generated .wpcf7-not-valid-tip{font-size:12px;margin-top:6px}
.contact-form-generated .wpcf7-response-output{margin:14px 0 0;padding:10px 12px;font-size:13px}

/* Right column */
.contact-sidebar{}

/* Info cards */
.contact-info-card{background:var(--white);border:1px solid var(--grey-200);border-radius:var(--radius-lg);padding:24px;margin-bottom:16px}
.contact-info-card h3{font-family:'DM Sans',sans-serif;font-size:16px;font-weight:600;margin-bottom:16px;display:flex;align-items:center;gap:8px}
.contact-info-card h3 svg{width:18px;height:18px;color:var(--teal)}
.contact-info-card h3 i{font-size:18px;color:var(--teal)}
.ci-item{display:flex;align-items:flex-start;gap:10px;padding:10px 0;border-bottom:1px solid var(--grey-100);font-size:14px;color:var(--grey-700)}
.ci-item:last-child{border-bottom:none}
.ci-item svg{width:16px;height:16px;color:var(--teal);flex-shrink:0;margin-top:2px}
.ci-item i{font-size:16px;color:var(--teal);flex-shrink:0;margin-top:2px}
.ci-item a{color:var(--teal);font-weight:600}
.ci-item strong{color:var(--navy)}

/* Opening hours */
.hours-table{width:100%}
.hours-table tr{border-bottom:1px solid var(--grey-100)}
.hours-table tr:last-child{border-bottom:none}
.hours-table td{padding:8px 0;font-size:13px;color:var(--grey-700)}
.hours-table td:first-child{font-weight:600;color:var(--navy)}
.hours-table td:last-child{text-align:right}
.hours-today{background:var(--teal-subtle);border-radius:6px}
.hours-today td{padding:8px 10px}

/* Map embed */
.map-card{background:var(--white);border:1px solid var(--grey-200);border-radius:var(--radius-lg);overflow:hidden;margin-bottom:16px}
.map-embed{height:220px;background:var(--grey-100);display:flex;align-items:center;justify-content:center}
.map-embed svg{width:48px;height:48px;color:var(--grey-300)}
.map-address{padding:16px 20px;font-size:13px;color:var(--grey-700);line-height:1.6}
.map-address strong{display:block;color:var(--navy);margin-bottom:4px}
.map-address a{color:var(--teal);font-weight:600;font-size:12px}

/* FAQ quick links */
.faq-quick{background:var(--navy);border-radius:var(--radius-lg);padding:24px;color:var(--white)}
.faq-quick h4{font-family:'DM Sans',sans-serif;font-size:15px;font-weight:600;color:var(--white);margin-bottom:12px}
.faq-quick-links{display:flex;flex-direction:column;gap:6px}
.faq-quick-links a{display:flex;align-items:center;gap:8px;padding:8px 12px;font-size:13px;color:var(--on-dark-70);border-radius:6px;transition:all var(--transition)}
.faq-quick-links a:hover{background:var(--on-dark-08);color:var(--white)}
.faq-quick-links a svg{width:14px;height:14px;color:var(--teal)}

/* Responsive */
@media(max-width:1024px){.contact-grid{grid-template-columns:1fr}.contact-methods .container{grid-template-columns:repeat(2,1fr)}.contact-method:nth-child(2){border-right:none}}
@media(max-width:768px){.contact-methods .container{grid-template-columns:1fr}.contact-method{border-right:none;border-bottom:1px solid var(--grey-200)}.contact-method:last-child{border-bottom:none}.cf-row{grid-template-columns:1fr}}
\n