/* ==========================================================================
   Barari Gold — contact page (GET /contacts)
   --------------------------------------------------------------------------
   The message form on a white panel, and beside it the umber card the
   checkout uses for its locked price, here carrying the direct lines and
   the collection counters. The one large thing is the phone number, set in
   the display serif the way prices are. Everything else stays on the
   account pages' field and panel vocabulary, restated here because this
   page does not load account.css.

   Pushed on `barari_css` (FE-06). RTL: logical properties throughout; the
   phone numbers and opening times are marked dir="ltr" in the view.
   ========================================================================== */

.barari-contact {
  max-width: var(--barari-measure);
  margin-inline: auto;
  padding-inline: var(--barari-space-5);
  padding-block: var(--barari-space-7) var(--barari-space-10);
}

/* -- Head -- */

.barari-contact__head { margin-block-end: var(--barari-space-7); }

.barari-contact__title {
  font-family: var(--barari-font-display);
  font-size: clamp(32px, 4vw, 44px);
  font-weight: 400;
  line-height: var(--barari-leading-tight);
  color: var(--barari-ink);
  margin-block-end: var(--barari-space-3);
}

.barari-contact__sub {
  font-size: var(--barari-text-body);
  line-height: var(--barari-leading-body);
  color: var(--barari-ink-60);
  max-width: 60ch;
}

/* -- Two columns: the form, then the direct card -- */

.barari-contact__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(300px, 1fr);
  gap: var(--barari-space-7);
  align-items: start;
}

/* On a phone the card leads: tapping a number beats typing a message. */
@media (max-width: 900px) {
  .barari-contact__grid { grid-template-columns: minmax(0, 1fr); gap: var(--barari-space-5); }
  .barari-contact__direct { order: -1; }
}

/* -- The form panel -- */

.barari-contact__panel {
  background: var(--barari-surface-field);
  border: 1px solid var(--barari-rule);
  border-radius: var(--barari-radius-card);
  padding: var(--barari-space-7);
}

.barari-contact__panel-title {
  font-family: var(--barari-font-display);
  font-size: 26px;
  font-weight: 400;
  line-height: var(--barari-leading-tight);
  color: var(--barari-ink);
  margin-block-end: var(--barari-space-5);
}

.barari-contact__two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 var(--barari-space-3);
}

@media (max-width: 575px) {
  .barari-contact__panel { padding-block: var(--barari-space-5); padding-inline: var(--barari-space-4); }
  .barari-contact__two { grid-template-columns: 1fr; }
}

.barari-contact__field { margin-block-end: var(--barari-space-4); min-inline-size: 0; }

.barari-contact__field > label {
  display: block;
  font-size: var(--barari-text-meta);
  color: var(--barari-ink-60);
  margin-block-end: 5px;
}

.barari-contact__field input,
.barari-contact__field textarea {
  inline-size: 100%;
  font-family: var(--barari-font-body);
  font-size: var(--barari-text-ui);
  line-height: var(--barari-leading-body);
  padding-block: 10px;
  padding-inline: 13px;
  border: 1px solid var(--barari-rule);
  border-radius: var(--barari-radius-sharp);
  background: var(--barari-surface-field);
  color: var(--barari-ink);
}

.barari-contact__field textarea { min-block-size: 150px; resize: vertical; }

.barari-contact__field input:focus,
.barari-contact__field textarea:focus {
  outline: none;
  border-color: var(--barari-bronze);
  box-shadow: 0 0 0 3px var(--barari-gold-wash);
}

.barari-contact__field [aria-invalid="true"] { border-color: var(--barari-alarm); }

.barari-contact__error {
  font-size: var(--barari-text-fine);
  color: var(--barari-alarm);
  margin-block-start: 4px;
}

/* intl-tel-input wraps the phone field; without this it shrinks to content. */
.barari-contact .iti { display: block; inline-size: 100%; }

/* The default (non-Google) captcha paints an input and an image into this
   container. The vendor sheet borders the container, fixes it at 50px and
   caps it at 500px; strip it to a wrapper so the input carries the only
   border, with the image set inside the field's end. */
.barari-contact .default-captcha-container {
  border: 0;
  border-radius: 0;
  block-size: auto;
  max-width: none;
  overflow: visible;
  margin-block: 0 var(--barari-space-5);
  margin-inline: 0;
}

.barari-contact .default-captcha-container input {
  inline-size: 100%;
  block-size: auto;
  font-family: var(--barari-font-body);
  font-size: var(--barari-text-ui);
  padding-block: 11px;
  padding-inline: 13px 156px;
  border: 1px solid var(--barari-rule);
  border-radius: var(--barari-radius-sharp);
  background: var(--barari-surface-field);
  color: var(--barari-ink);
}

.barari-contact .default-captcha-container input:focus {
  outline: none;
  border-color: var(--barari-bronze);
  box-shadow: 0 0 0 3px var(--barari-gold-wash);
}

.barari-contact .default-captcha-container .captcha-image-container {
  inset-block: 5px;
  inset-inline-end: 5px;
  block-size: auto;
  background: var(--barari-surface-sunken);
  border-radius: var(--barari-radius-sharp);
}

.barari-contact .default-captcha-container .captcha-image-container img {
  block-size: 100%;
  border-inline-end-color: var(--barari-rule);
}

.barari-contact .default-captcha-container .refresh-icon { min-block-size: 0; block-size: 100%; }

.barari-contact .default-captcha-container .refresh-icon path { fill: var(--barari-ink-70); }

.barari-contact__send { min-inline-size: 220px; }

@media (max-width: 575px) {
  .barari-contact__send { inline-size: 100%; }
}

/* -- The direct card -- */

.barari-contact__direct {
  display: flex;
  flex-direction: column;
  gap: var(--barari-space-6);
  background: var(--barari-brown);
  color: var(--barari-ink-on-dark);
  border-radius: var(--barari-radius-card);
  padding: var(--barari-space-7);
}

@media (max-width: 575px) {
  .barari-contact__direct { padding-block: var(--barari-space-6); padding-inline: var(--barari-space-5); }
}

.barari-contact__line-label {
  font-size: var(--barari-text-meta);
  color: var(--barari-ink-on-dark-56);
  margin-block-end: 2px;
}

.barari-contact__line--quiet .barari-contact__link + .barari-contact__line-label { margin-block-start: var(--barari-space-4); }

/* The page's one large element: the number, in the serif the prices use. */
.barari-contact__phone {
  display: inline-block;
  font-family: var(--barari-font-display);
  font-size: clamp(30px, 3vw, 38px);
  line-height: var(--barari-leading-tight);
  color: var(--barari-ink-on-dark);
  text-decoration: none;
  transition: color var(--barari-duration) var(--barari-ease);
}

.barari-contact__phone:hover { color: var(--barari-gold); }

.barari-contact__link {
  font-size: var(--barari-text-body);
  color: var(--barari-ink-on-dark);
  text-decoration: underline;
  text-decoration-color: var(--barari-rule-dark);
  text-underline-offset: 4px;
  overflow-wrap: anywhere;
  transition: color var(--barari-duration) var(--barari-ease), text-decoration-color var(--barari-duration) var(--barari-ease);
}

.barari-contact__link:hover { color: var(--barari-gold); text-decoration-color: currentColor; }

/* Bronze, the light-ground focus colour, disappears on umber. */
.barari-contact__direct a:focus-visible { outline-color: var(--barari-gold); }

/* -- Counters -- */

.barari-contact__counters {
  border-block-start: 1px solid var(--barari-rule-dark);
  padding-block-start: var(--barari-space-6);
}

.barari-contact__counters-title {
  font-family: var(--barari-font-display);
  font-size: 24px;
  font-weight: 400;
  line-height: var(--barari-leading-tight);
  color: var(--barari-ink-on-dark);
}

.barari-contact__counters-note {
  font-size: var(--barari-text-meta);
  line-height: var(--barari-leading-body);
  color: var(--barari-ink-on-dark-56);
  margin-block: var(--barari-space-1) var(--barari-space-2);
}

.barari-contact__counter { padding-block: var(--barari-space-4); }

.barari-contact__counter + .barari-contact__counter { border-block-start: 1px solid var(--barari-rule-dark); }

.barari-contact__counter:last-child { padding-block-end: 0; }

.barari-contact__counter-name {
  font-size: var(--barari-text-body);
  font-weight: 500;
  color: var(--barari-ink-on-dark);
}

.barari-contact__counter-address {
  font-size: var(--barari-text-ui);
  line-height: var(--barari-leading-body);
  color: var(--barari-ink-on-dark-72);
  margin-block-start: 2px;
}

.barari-contact__hours { max-width: 300px; margin-block: var(--barari-space-3) 0; }

.barari-contact__hours-row {
  display: flex;
  justify-content: space-between;
  gap: var(--barari-space-4);
  font-size: var(--barari-text-meta);
  padding-block: 3px;
}

.barari-contact__hours-row dt { color: var(--barari-ink-on-dark-56); font-weight: 300; }

.barari-contact__hours-row dd { color: var(--barari-ink-on-dark); }

.barari-contact__hours-row .barari-contact__closed { color: var(--barari-ink-on-dark-56); }

.barari-contact__counter-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--barari-space-1) var(--barari-space-5);
  margin-block-start: var(--barari-space-3);
}

.barari-contact__counter-links .barari-contact__link { font-size: var(--barari-text-ui); }