/* The "צור קשר" page: the form, with the ways to reach the shop beside it.

   Loaded on that page only (inc/contact-form.php). The form itself wears the
   .cancel-* skin from theme.css; what is here is the page's layout and the
   two things the contact form has that the cancellation form does not. */

.contact-layout{
  display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);
  gap:clamp(24px,4vw,48px);align-items:start;margin-top:28px;
}

/* The form's column */
.entry-content .contact-write > h2{margin-top:0}
.entry-content .contact-lede{margin:0 0 18px;color:var(--muted)}
.contact-write .contact-form.cancel-form{max-width:none}

/* "חזרו אליי בטלפון": a choice, so it reads as body text and not as the small
   print the consent line under it is. */
.contact-callback.consent-row{margin:16px 0 8px;font-size:14px;color:var(--ink)}

/* A form with no layout beside it (a page with no headings, or the
   shortcode on another page) keeps a readable width. */
.entry-content > .contact-write{max-width:760px;margin-top:28px}

/* The details' column: the page's own text, set as a quiet panel */
.contact-details{
  padding:24px 26px;border:1px solid var(--line);border-radius:18px;background:#fbfaf8;
}
.entry-content .contact-details h2{margin:22px 0 8px;font-size:18px}
.entry-content .contact-details > h2:first-child{margin-top:0}
.entry-content .contact-details ul{margin:0 0 4px;padding:0;list-style:none}
.entry-content .contact-details li{margin:0 0 6px}
.entry-content .contact-details p{margin:0 0 10px}
.entry-content .contact-details > :last-child{margin-bottom:0}

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

/* The accessibility widget enlarges text by zooming the body, which does not
   move a media query: at 200% on a laptop the two columns stayed two, each a
   hundred pixels wide. Zoomed, the page stacks as it does on a phone. */
html.a11y-zoomed .contact-layout{grid-template-columns:minmax(0,1fr)}