/* ==========================================================================
   BAKKAR PRINTING — THEME "INDUSTRIAL PRECISION"
   pages/contact.css — contact.html ONLY.
   --------------------------------------------------------------------------
   Everything reusable (buttons, crumbs, page-head--slim, sec-head, spec
   table, form controls, badge, iconrow, hgrid, brackets, micro, cta-band)
   lives in components.css / base.css and is used AS-IS. This file holds only
   what is genuinely unique to the contact page:

     · the message form ⇄ aside split (form + hours + follow-us + RFQ steer)
     · the submit loading state
     · the four "talk to the factory" channel plates
     · the closing CTA's mono mail line

   THERE IS NO MAP SECTION and no third-party map script: the plant plate
   prints the exact coordinates and opens Google Maps in a new tab.

   MODES: every colour below resolves through a token, so the sheet is right
   on GRAPHITE (data-theme="dark") and on PAPER (data-theme="light"). The two
   places that cannot be expressed as one token — the 45° hatch behind a
   channel icon — are switched explicitly, light default + dark override.

   DIRECTION: logical properties only. No physical left/right anywhere.
   ========================================================================== */


/* ==========================================================================
   01. THE WORK AREA — message form + the three-plate aside
   --------------------------------------------------------------------------
   The slim page head is the shared .page-head--slim component, used as-is:
   ~123px at 390, ~138px at 1440. Nothing to add here.
   ========================================================================== */
.contact-work {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: var(--s-9) var(--s-7);
  align-items: start;
}
@media (max-width: 979px) {
  .contact-work { grid-template-columns: minmax(0, 1fr); gap: var(--s-8); }
}
.contact-work__main { min-inline-size: 0; }


/* -- The form ------------------------------------------------------------- */
.contact-form .fieldset { background-color: var(--surface); }

/* The required-marker legend sits in mono, like every technical label here. */
.contact-form__req-note {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin-block-start: var(--s-2);
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  text-transform: uppercase;
  letter-spacing: var(--track-wide);
  color: var(--fg-subtle);
}
[dir="rtl"] .contact-form__req-note { text-transform: none; }
.contact-form__req-note b { color: var(--accent); font-weight: var(--fw-medium); }

.contact-form__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
  flex-wrap: wrap;
}
.contact-form__foot .btn { flex: 0 1 auto; }

.contact-form__meta {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  min-inline-size: 0;
  flex: 1 1 16rem;
}
.contact-form__reply {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  line-height: 1.5;
  color: var(--fg);
}
.contact-form__reply svg {
  inline-size: 13px;
  block-size: 13px;
  flex: none;
  color: var(--accent);
}
.contact-form__hint {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  line-height: 1.6;
  text-transform: uppercase;
  letter-spacing: var(--track-wide);
  color: var(--fg-subtle);
}
[dir="rtl"] .contact-form__hint { text-transform: none; }

/* Live region: it must occupy no space until it has something to say. */
.contact-form__status:empty { display: none; }
.contact-form__status {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-4) var(--s-5);
  background-color: var(--ok-tint);
  border: var(--bw-hair) solid var(--ok);
  border-inline-start-width: var(--bw-slab);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--track-wide);
  color: var(--fg);
}
[dir="rtl"] .contact-form__status { text-transform: none; }

/* -- Submit loading state (scoped to this page's form) -------------------- */
.contact-form .btn.is-loading {
  pointer-events: none;
  opacity: 1;
}
.contact-form .btn.is-loading::before { transform: scaleX(0); }
.contact-spin {
  inline-size: 14px;
  block-size: 14px;
  flex: none;
  border: 2px solid currentColor;
  border-block-start-color: transparent;
  border-radius: 50%;              /* the ONE circle in the theme: a bearing. */
  animation: contact-spin 640ms var(--ease-lin) infinite;
}
@keyframes contact-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .contact-spin { animation-duration: 2.4s; }
}


/* ==========================================================================
   03. THE ASIDE — three plates: hours · follow us · the RFQ steer
   ========================================================================== */
.contact-rail {
  display: flex;
  flex-direction: column;
  gap: var(--s-6);
  min-inline-size: 0;
}

/* -- 1. Business hours ----------------------------------------------------
   The three aside plates title themselves with real <h3>s, so the aside is
   navigable by heading. The shared .spec__head-title does not pin a leading,
   so as an h3 it would inherit --lh-tight (1.02) and shave the head's box —
   pin it back. Page-scoped: the shared component is untouched. */
.contact-hours .spec__head-title { line-height: 1; }

.contact-hours__table th {
  inline-size: 58%;
  white-space: normal;
}
.contact-hours__table td {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
  color: var(--fg);
  text-align: end;
}
.contact-hours__table tr.is-closed td { color: var(--accent); }
.contact-hours__table tr.is-closed th { color: var(--fg-subtle); }

/* -- 2. Follow us --------------------------------------------------------- */
.contact-social {
  padding: var(--s-6);
  background-color: var(--surface);
  border: var(--bw-hair) solid var(--line);
}
/* FLEX, not block: .micro--tick draws its red rule as a sized ::before, and a
   sized ::before inside a *block* box lays out as an INLINE box — where
   inline-size/block-size do not apply, so the tick silently collapses to
   nothing. Keeping the box flex preserves the tick that the hours plate above
   also carries. */
.contact-social__k {
  display: flex;
  margin-block-end: var(--s-4);
}
.contact-social__body {
  margin-block-end: var(--s-5);
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
  color: var(--fg-muted);
}

/* -- 3. The steer: a pack or a machine enquiry belongs on the RFQ. --------
   The one plate on the page that flags itself with a red rule across the
   top edge. Still hairline, still square, still mono — surgical, not a fill. */
.contact-steer {
  position: relative;
  padding: var(--s-6);
  background-color: var(--surface-inset);
  border: var(--bw-hair) solid var(--line);
  border-block-start: var(--bw-slab) solid var(--accent-brand);
}
/* The count-badge component is a bare numeric chip; here it carries an icon
   and a label, so this page widens it into a proper mono tag. Scoped 0,2,0. */
.contact-steer .contact-steer__badge {
  gap: var(--s-2);
  padding: 5px var(--s-3);
  text-transform: uppercase;
  letter-spacing: var(--track-wide);
  margin-block-end: var(--s-5);
}
[dir="rtl"] .contact-steer .contact-steer__badge { text-transform: none; }
.contact-steer__badge svg { inline-size: 12px; block-size: 12px; flex: none; }

.contact-steer__title {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: var(--track-tight);
  color: var(--fg-strong);
}
[dir="rtl"] .contact-steer__title { text-transform: none; line-height: 1.4; }

.contact-steer__body {
  margin-block-start: var(--s-3);
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
  color: var(--fg-muted);
}
.contact-steer__cta { margin-block-start: var(--s-5); }
.contact-steer__fine {
  margin-block-start: var(--s-4);
  padding-block-start: var(--s-4);
  border-block-start: var(--bw-hair) solid var(--line);
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  line-height: 1.6;
  text-transform: uppercase;
  letter-spacing: var(--track-wide);
  color: var(--fg-subtle);
}
[dir="rtl"] .contact-steer__fine { text-transform: none; }


/* ==========================================================================
   04. TALK TO THE FACTORY — the four channel plates (shared hairline: .hgrid)
   ========================================================================== */
.contact-chan {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-6);
  background-color: var(--surface);
  transition: background-color var(--dur-2) var(--ease);
}
.contact-chan:hover { background-color: var(--surface-3); }
/* The red rule that runs out along the top edge on hover. */
.contact-chan::after {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  inline-size: 0;
  block-size: var(--bw-rule);
  background-color: var(--accent);
  transition: inline-size var(--dur-3) var(--ease);
}
.contact-chan:hover::after,
.contact-chan:focus-within::after { inline-size: 64px; }

.contact-chan__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  margin-block-end: var(--s-1);
}
.contact-chan__icon {
  display: grid;
  place-items: center;
  inline-size: 42px;
  block-size: 42px;
  flex: none;
  color: var(--accent);
  background-color: var(--surface-inset);
  border: var(--bw-hair) solid var(--line);
  /* The 45° machined hatch. It is drawn in ink on paper and in light on
     graphite, so it cannot be one token — switch it explicitly. */
  background-image: repeating-linear-gradient(45deg, var(--alpha-k-04) 0 1px, transparent 1px 6px);
}
:root[data-theme="dark"] .contact-chan__icon {
  background-image: repeating-linear-gradient(45deg, var(--alpha-w-04) 0 1px, transparent 1px 6px);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .contact-chan__icon {
    background-image: repeating-linear-gradient(45deg, var(--alpha-w-04) 0 1px, transparent 1px 6px);
  }
}
.contact-chan__icon svg { inline-size: 17px; block-size: 17px; }

.contact-chan__idx {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  letter-spacing: var(--track-wide);
  color: var(--fg-subtle);
  font-variant-numeric: tabular-nums;
}

.contact-chan__k {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  line-height: 1.08;
  text-transform: uppercase;
  color: var(--fg-strong);
}
[dir="rtl"] .contact-chan__k { text-transform: none; line-height: 1.4; }

/* Clamped to three lines AND floored at three lines, so the hairline under it
   lands on the SAME baseline across all four plates — this is a spec sheet. */
.contact-chan__sub {
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
  color: var(--fg-muted);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
@media (min-width: 640px) {
  .contact-chan__sub { min-block-size: calc(var(--lh-body) * 3em); }
}

.contact-chan__list {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  flex: 1;
  margin-block-start: var(--s-2);
  padding-block-start: var(--s-4);
  border-block-start: var(--bw-hair) solid var(--line);
}
.contact-chan__v {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--fg);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
a.contact-chan__v { transition: var(--t-color); }
a.contact-chan__v:hover { color: var(--accent); }

/* A keyed row (inbox label above the address). */
.contact-chan__row {
  display: flex;
  flex-direction: column;
  gap: 2px;
  transition: var(--t-color);
}
.contact-chan__row:hover .contact-chan__v { color: var(--accent); }
.contact-chan__rk {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  text-transform: uppercase;
  letter-spacing: var(--track-wide);
  color: var(--fg-subtle);
}
[dir="rtl"] .contact-chan__rk { text-transform: none; }

/* The bilingual address is prose, not a code — it reads in the body face. */
.contact-chan__v--prose {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
  color: var(--fg-muted);
}
.contact-chan__coords {
  font-size: var(--fs-xs);
  letter-spacing: var(--track-none);
  color: var(--fg-subtle);
}

.contact-chan__act {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  margin-block-start: auto;
  padding-block-start: var(--s-4);
  border-block-start: var(--bw-hair) solid var(--line);
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  text-transform: uppercase;
  letter-spacing: var(--track-wide);
  color: var(--accent);
  transition: var(--t-color);
}
[dir="rtl"] .contact-chan__act { text-transform: none; }
.contact-chan__act svg { inline-size: 12px; block-size: 12px; flex: none; }
.contact-chan__act:hover { color: var(--fg-strong); }


/* ==========================================================================
   05. CLOSING CTA
   ========================================================================== */
.contact-cta { padding-block: var(--section-y); }
.contact-cta__meta { margin-block-end: var(--s-5); }
.contact-cta .cta-band__actions .btn { inline-size: 100%; }
.contact-cta__mail {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--fg-muted);
  text-transform: none;
  letter-spacing: var(--track-none);
  transition: var(--t-color);
}
.contact-cta__mail svg { inline-size: 14px; block-size: 14px; color: var(--accent); flex: none; }
.contact-cta__mail:hover { color: var(--accent); }


/* ==========================================================================
   06. PRINT — a contact sheet should print like one.
   ========================================================================== */
@media print {
  .contact-cta { display: none !important; }
  .contact-work { display: block; }
  .contact-rail { margin-block-start: var(--s-6); }
  .contact-chan { break-inside: avoid; }
}