/* ==========================================================================
   SKIIN - CONTACT US page only  (contact-page/contact.css)
   Banner, .sk-title, .sk-field, .sk-btn, .sk-form-msg, .sk-hp and the CF7
   input/submit look are GLOBAL (style.css + skiin-components.css) and are NOT
   repeated here. Only Contact-specific layout lives in this file.
   Sections: 1 form card | 2 checkboxes | 3 details + map | 4 service area | 5 policy cards
   ========================================================================== */

/* ---------- 1. form card (cream panel, centered heading) ---------- */
.sk-contact__card {
  padding: clamp(28px, 4vw, 64px) clamp(20px, 3vw, 40px);
  background: var(--color-bg-cream);
  border-radius: var(--sk-radius-lg);
}
.sk-contact__head { margin-bottom: 28px; }
.sk-contact__head .sk-title { margin-bottom: 10px; }
.sk-contact__head p { font-size: 14px; color: var(--sk-dark); }

/* built-in form: 2-column inputs, then checkboxes, message, button */
.sk-contact__form { display: grid; gap: 18px; }
.sk-contact__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 20px; }
.sk-contact__form .sk-btn { justify-self: start; }

/* Contact Form 7 inside the card: same 2-column top row without Bootstrap.
   Wrap the first four fields in <div class="sk-contact__grid"> in the CF7 template. */
.sk-contact__card .wpcf7-form > p, .sk-contact__card .sk-contact__grid p { margin: 0 0 16px; }
.sk-contact__card .sk-contact__grid p { margin: 0; }
.sk-contact__card .wpcf7-form br { display: none; }
.sk-contact__card .wpcf7 input[type="text"], .sk-contact__card .wpcf7 input[type="email"],
.sk-contact__card .wpcf7 input[type="tel"], .sk-contact__card .wpcf7 textarea { margin-bottom: 0; }
.sk-contact__card .wpcf7 textarea { min-height: 88px; resize: vertical; }
.sk-contact__card .wpcf7-form-control-wrap { display: block; }

/* ---------- 2. "Procedure For" checkboxes (built-in + CF7 markup) ---------- */
.sk-contact__procedures { margin: 0; padding: 0; border: 0; min-width: 0; }
.sk-contact__procedures legend, .sk-contact__card .sk-legend { padding: 0; margin-bottom: 8px; font-size: 14px; color: var(--sk-dark); }

/* 4 columns desktop | 3 laptop | 2 tablet | 1 phone - same flow as the live design */
.sk-check-grid,
.sk-contact__card .wpcf7-checkbox { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px 24px; }
.sk-contact__card .wpcf7-list-item { margin: 0; }

.sk-check,
.sk-contact__card .wpcf7-list-item label { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; line-height: 1.5; color: var(--sk-dark); cursor: pointer; }

/* square box, fills dark with a white tick when checked (style.css removes native appearance only for text inputs) */
.sk-check input,
.sk-contact__card .wpcf7-list-item input[type="checkbox"] {
  -webkit-appearance: none; appearance: none; flex: none; position: relative;
  width: 16px; height: 16px; margin: 3px 0 0;
  background: var(--color-white); border: 1.5px solid var(--sk-dark); border-radius: 2px; cursor: pointer;
}
.sk-check input:checked,
.sk-contact__card .wpcf7-list-item input[type="checkbox"]:checked { background: var(--sk-dark); }
.sk-check input:checked::after,
.sk-contact__card .wpcf7-list-item input[type="checkbox"]:checked::after {
  content: ""; position: absolute; left: 4px; top: 0; width: 5px; height: 9px;
  border: solid var(--color-white); border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.sk-check input:focus-visible,
.sk-contact__card .wpcf7-list-item input[type="checkbox"]:focus-visible { outline: 2px solid var(--color-rose-accent); outline-offset: 2px; }

/* ---------- 3. contact details + map ---------- */
.sk-contact__find { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 20px; align-items: stretch; }

.sk-contact__list { margin: 0; padding: 0; list-style: none; border-top: 1px solid #EBD5D5; }
.sk-contact__list li { display: flex; align-items: center; gap: 14px; padding: 16px 0; border-bottom: 1px solid #EBD5D5; }
.sk-contact__icon {
  display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 50%;
  background: var(--color-bg-blush); color: #9C6F6F;   /* soft rose circle, deeper rose icon (contrast) */
}
.sk-contact__label {
  margin: 0 0 2px !important; font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--color-rose-accent);
}
.sk-contact__value { margin: 0 !important; font-size: 15px; font-weight: 500; line-height: 1.5; color: var(--sk-dark); }
/* global .sk-page a is rose - details stay dark like the design, rose only on hover */
.sk-page .sk-contact__value a { color: var(--sk-dark); }
.sk-page .sk-contact__value a:hover { color: var(--color-rose-accent); }

.sk-contact__map { min-height: 368px; border-radius: 20px; overflow: hidden; background: var(--color-bg-cream); }
.sk-contact__map iframe { display: block; width: 100%; height: 100%; min-height: 368px; border: 0; }

/* ---------- 4. service area (dark band + suburb chips) ---------- */
.sk-contact__area { padding: clamp(28px, 3vw, 40px) 0; background: var(--sk-dark); }
.sk-contact__area p { margin: 0 0 18px; font-size: 14px; color: var(--color-white); }
.sk-chips { display: flex; flex-wrap: wrap; gap: 10px 6px; margin: 0; padding: 0; list-style: none; }
.sk-chip {
  display: inline-block; padding: 7px 15px; font-size: 12px; font-weight: 600; line-height: 1.4;
  color: var(--color-white); border: 1px solid rgba(255, 255, 255, .45); border-radius: 999px;
  transition: background .25s ease, border-color .25s ease, color .25s ease;
}
.sk-page a.sk-chip { color: var(--color-white); }
.sk-page a.sk-chip:hover, .sk-page a.sk-chip:focus-visible { background: var(--color-rose-accent); border-color: var(--color-rose-accent); color: var(--color-white); }

/* ---------- 5. policy cards ---------- */
.sk-policies { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.sk-policy {
  padding: 36px 30px 40px;
  background: var(--color-bg-cream);
  border-top: 2px solid var(--color-rose-accent);
  border-radius: 0 0 var(--sk-radius-lg) var(--sk-radius-lg);   /* square top (rose line), rounded bottom */
}
.sk-policy__icon {
  display: grid; place-items: center; width: 46px; height: 46px; margin-bottom: 30px;
  border-radius: 50%; background: var(--sk-dark); color: var(--color-rose-accent);
}
.sk-policy h2 { margin: 0 0 14px; font-size: 20px; font-weight: 500; line-height: 1.3; }
.sk-policy p { font-size: 14px; line-height: 1.75; color: var(--sk-dark); }
.sk-policy strong { font-weight: 700; }

/* ======================= RESPONSIVE ======================= */
@media (max-width: 1199px) {
  .sk-check-grid, .sk-contact__card .wpcf7-checkbox { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 991px) {
  .sk-contact__find, .sk-policies { grid-template-columns: 1fr; }
  .sk-check-grid, .sk-contact__card .wpcf7-checkbox { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sk-contact__map, .sk-contact__map iframe { min-height: 320px; }
}
@media (max-width: 575px) {
  .sk-contact__grid, .sk-check-grid, .sk-contact__card .wpcf7-checkbox { grid-template-columns: 1fr; }
  .sk-contact__form .sk-btn { justify-self: stretch; }
  .sk-policy { padding: 28px 22px 32px; }
}