/* ==========================================================================
   ShopFront — Contact page
   --------------------------------------------------------------------------
   Loaded by contact.html only. The chrome shared with about.html and
   faq.html — breadcrumb, page hero, page nav, media placeholders, CTA band
   — lives in page.css and is not re-implemented here.

   This page carried the first real form on the site, and the form system it
   was written against — field, label, control, hint, error, error summary,
   success panel — now lives in `forms.css`, loaded by this page ahead of
   this file. It moved the moment the second and third callers arrived, as
   the note here always said it would: the checkout and the account pages
   want exactly that system and should not invent a second one.

   Same rules as styles.css, and they are not negotiable:
     · no raw colour, no raw shadow, no off-grid spacing — tokens only;
     · logical properties throughout (dir="rtl", so inline-start = right);
     · the design is FLAT. Surfaces separate by border and tone.

   Contents
     01 · CHANNEL CARDS
     02 · CONTACT LAYOUT
     03 · — moved to forms.css
     04 · — moved to forms.css
     05 · SIDEBAR
     06 · DEPARTMENTS
     07 · QUICK ANSWERS
     08 · SHOWROOM
     09 · RESPONSIVE
     10 · MOTION, CONTRAST, PRINT
   ========================================================================== */


/* ==========================================================================
   01 · CHANNEL CARDS
   ========================================================================== */

.channel-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap-grid);
}

.channel {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--gap-inline-md);
  padding: var(--card-pad);
  border: var(--border-hairline) solid var(--card-border);
  border-radius: var(--card-radius);
  background: var(--card-bg);
  transition: var(--transition-elevate), var(--transition-colors);
}
.channel:hover {
  transform: translateY(var(--card-lift));
  border-color: var(--card-border-hover);
}

.channel__body {
  min-inline-size: 0;
}

.channel__label {
  display: block;
  color: var(--fg-subtle);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
}

/* The value is the reason the card exists — a phone number or an address —
   so it takes the weight, and it must never be the thing that wraps. */
.channel__value {
  display: block;
  margin-block-start: var(--space-0-5);
  color: var(--fg-default);
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  overflow-wrap: anywhere;
}

.channel__meta {
  display: block;
  margin-block-start: var(--space-1);
  color: var(--fg-muted);
  font-size: var(--text-sm);
}

.channel > .icon {
  color: var(--fg-subtle);
  transition: var(--transition-transform);
}
.channel:hover > .icon {
  transform: translateX(-4px);
  color: var(--brand);
}


/* ==========================================================================
   02 · CONTACT LAYOUT
   ========================================================================== */

.contact {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: var(--space-8);
  align-items: start;
}

.contact__form {
  padding: var(--space-8);
  border: var(--border-hairline) solid var(--card-border);
  border-radius: var(--card-radius);
  background: var(--card-bg);
}

.contact__form-head {
  margin-block-end: var(--space-7);
  padding-block-end: var(--space-5);
  border-block-end: var(--border-hairline) solid var(--border-subtle);
}

.contact__form-title {
  color: var(--fg-default);
  font-size: var(--text-4xl);
  font-weight: var(--weight-black);
}

.contact__form-lede {
  margin-block-start: var(--space-2);
  color: var(--fg-muted);
  font-size: var(--text-lg);
  line-height: var(--leading-normal);
}


/* ==========================================================================
   05 · SIDEBAR
   ========================================================================== */

.contact__aside {
  position: sticky;
  inset-block-start: calc(var(--header-height-compact) + var(--space-6));
  display: grid;
  gap: var(--gap-grid);
  min-inline-size: 0;
}

.info-card {
  padding: var(--space-6);
  border: var(--border-hairline) solid var(--card-border);
  border-radius: var(--card-radius);
  background: var(--card-bg);
}

.info-card__title {
  display: flex;
  align-items: center;
  gap: var(--gap-inline-md);
  margin-block-end: var(--space-4);
  color: var(--fg-default);
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
}

.info-list {
  display: grid;
  gap: var(--space-3);
}

.info-list > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--gap-inline-md);
  padding-block-end: var(--space-3);
  border-block-end: var(--border-hairline) solid var(--border-subtle);
  color: var(--fg-muted);
  font-size: var(--text-md);
}
.info-list > div:last-child {
  padding-block-end: 0;
  border-block-end: 0;
}

.info-list b {
  color: var(--fg-default);
  font-weight: var(--weight-bold);
  white-space: nowrap;
}

/* Today's row, marked by the script. A dot rather than a fill: the row is
   inside a list of six and a filled band would read as a heading. */
.info-list > div[data-today] b::after {
  content: "";
  display: inline-block;
  inline-size: var(--space-2);
  block-size: var(--space-2);
  margin-inline-start: var(--space-2);
  border-radius: var(--radius-circle);
  background: var(--success);
  vertical-align: middle;
}

.info-note {
  display: flex;
  align-items: flex-start;
  gap: var(--gap-inline-md);
  margin-block-start: var(--space-4);
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  background: var(--bg-brand-subtle);
  color: var(--fg-body);
  font-size: var(--text-md);
  line-height: var(--leading-normal);
}
.info-note .icon {
  flex: none;
  margin-block-start: 0.15em;
  color: var(--brand);
}

.social-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.social-row a {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-inline-sm);
  padding: var(--space-2-5) var(--space-4);
  border: var(--border-hairline) solid var(--border-default);
  border-radius: var(--radius-pill);
  color: var(--fg-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  transition: var(--transition-colors);
}
.social-row a:hover {
  border-color: var(--border-brand);
  background: var(--bg-brand-subtle);
  color: var(--brand-text);
}
.social-row .icon {
  color: var(--brand);
}


/* ==========================================================================
   06 · DEPARTMENTS
   ========================================================================== */

.dept-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--gap-grid);
}

.dept {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--card-pad);
  border: var(--border-hairline) solid var(--card-border);
  border-radius: var(--card-radius);
  background: var(--card-bg);
  transition: var(--transition-colors);
}
.dept:hover {
  border-color: var(--card-border-hover);
}

.dept__name {
  color: var(--fg-default);
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
}

.dept__text {
  color: var(--fg-muted);
  font-size: var(--text-md);
  line-height: var(--leading-normal);
}

.dept__mail {
  color: var(--brand-text);
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
  direction: ltr;
  text-align: start;
  overflow-wrap: anywhere;
}
.dept__mail:hover {
  text-decoration: underline;
  text-underline-offset: 0.25em;
}

.dept__sla {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-inline-xs);
  margin-block-start: auto;
  padding-block-start: var(--space-3);
  border-block-start: var(--border-hairline) solid var(--border-subtle);
  color: var(--fg-subtle);
  font-size: var(--text-sm);
}
.dept__sla .icon {
  color: var(--brand);
  font-size: var(--icon-sm);
}


/* ==========================================================================
   07 · QUICK ANSWERS
   --------------------------------------------------------------------------
   Deflection, and it is meant to be: most enquiries that reach a support
   desk already have a written answer. Each row deep-links straight to the
   matching accordion item on faq.html.
   ========================================================================== */

.quick-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap-inline-lg) var(--gap-grid);
}

.quick {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--gap-inline-md);
  padding: var(--space-4) var(--space-5);
  border: var(--border-hairline) solid var(--card-border);
  border-radius: var(--radius-xl);
  background: var(--card-bg);
  color: var(--fg-default);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  transition: var(--transition-colors), var(--transition-transform);
}
.quick:hover {
  border-color: var(--card-border-hover);
  background: var(--bg-brand-subtle);
  color: var(--brand-text);
  transform: translateX(-4px);
}

.quick > .icon:first-child {
  color: var(--brand);
  font-size: var(--icon-md);
}
.quick > .icon:last-child {
  color: var(--fg-subtle);
}


/* ==========================================================================
   08 · SHOWROOM
   ========================================================================== */

.showroom {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: var(--space-8);
  align-items: stretch;
}

.showroom__panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding: var(--space-8);
  border: var(--border-hairline) solid var(--card-border);
  border-radius: var(--card-radius);
  background: var(--card-bg);
}

.showroom__title {
  color: var(--fg-default);
  font-size: var(--text-3xl);
  font-weight: var(--weight-black);
}

.showroom__text {
  color: var(--fg-muted);
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
}

.showroom__list {
  display: grid;
  gap: var(--space-3);
}

.showroom__list li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--gap-inline-md);
  align-items: start;
  color: var(--fg-body);
  font-size: var(--text-md);
  line-height: var(--leading-normal);
}
.showroom__list .icon {
  margin-block-start: 0.15em;
  color: var(--brand);
  font-size: var(--icon-md);
}

.showroom__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-inline-md);
  margin-block-start: auto;
  padding-block-start: var(--space-2);
}

.showroom__map {
  min-inline-size: 0;
}
.showroom__map .ph,
.showroom__map .ph__frame {
  block-size: 100%;
}


/* ==========================================================================
   09 · RESPONSIVE
   ========================================================================== */

@media (max-width: 1240px) {
  .dept-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1150px) {
  .channel-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* The aside stops being a sidebar and becomes the block under the form;
     sticky on a full-width block would pin it over the page. */
  .contact,
  .showroom { grid-template-columns: minmax(0, 1fr); }
  .contact__aside { position: static; }

  .quick-grid { grid-template-columns: minmax(0, 1fr); }
}

/* The form's own breakpoints — one column, full-width buttons — travelled
   with it into forms.css. */
@media (max-width: 800px) {
  .contact__form { padding: var(--space-6); }
  .showroom__panel { padding: var(--space-6); }
}

@media (max-width: 540px) {
  .channel-grid,
  .dept-grid { grid-template-columns: minmax(0, 1fr); }
  .channel { grid-template-columns: auto minmax(0, 1fr); }
  .channel > .icon { display: none; }
}


/* ==========================================================================
   10 · MOTION, CONTRAST, PRINT
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .channel,
  .quick,
  .dept {
    transition: none;
  }
  .channel:hover,
  .quick:hover {
    transform: none;
  }
  .channel:hover > .icon {
    transform: none;
  }
}

@media (prefers-contrast: more) {
  .channel,
  .contact__form,
  .info-card,
  .dept,
  .quick,
  .showroom__panel {
    border-color: var(--fg-muted);
  }
}

@media print {
  /* A printed contact page is a reference card: the addresses and hours
     matter, the form does not. */
  .contact__form,
  .showroom__actions,
  .social-row {
    display: none;
  }
  .contact { grid-template-columns: minmax(0, 1fr); }
  .contact__aside { position: static; }
}