/* contacts — this component's own styles, loaded where it is drawn ({% put styles %}).
   Colours and sizes only through var(--*), so the design drives these too. */

/* ---------- Contact cards (sections/contacts) ---------- */
.contact-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.4rem;
}

.contact-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.5rem 1.8rem;
  display: flex;
  flex-direction: column;
  gap: .3rem;
}

.contact-label {
  font-size: .76rem;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: var(--muted);
}


.contact-value { font-weight: 600; color: var(--ink); }


a.contact-value:hover { color: var(--mark, var(--primary)); }

@media (max-width: 960px) {
    .contact-cards { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
    .contact-cards { grid-template-columns: 1fr; }
}

/* inline — no card chrome, one row split by hairlines. */
.contact-cards--inline {
  grid-template-columns: 1fr;
  display: flex;
  flex-wrap: wrap;
  gap: 0;
}


.contact-cards--inline .contact-card {
  flex: 1 1 12rem;
  background: none;
  border: 0;
  border-left: 1px solid var(--line);
  border-radius: 0;
  padding: .4rem 1.6rem;
}


.contact-cards--inline .contact-card:first-child { border-left: 0; padding-left: 0; }


.contact-cards--banner {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem 3rem;
}


.contact-cards--banner .contact-card {
  background: none;
  border: 0;
  padding: 0;
  text-align: center;
}

@media (max-width: 640px) {
    .contact-cards--inline .contact-card {
    border-left: 0;
    border-top: 1px solid var(--line);
    padding: .9rem 0;
  }
}

/* banner — one tinted band, details centred: a closing statement rather
   than a list of fields. */
.contacts--banner { background: var(--tint); padding: clamp(2rem, 4vw, 3rem) clamp(1.2rem, 3vw, 2rem); }

/* list — the contact page's: «reach us now» and «for reference». The page
   lays the two parts out around its form; elsewhere they stack. */
.contacts--list { display: grid; gap: 2rem; align-content: start; }
.contact-quick { display: grid; gap: 1rem; align-content: start; }

.open-status { display: flex; align-items: center; gap: .55rem; margin: 0; font-size: .95rem; color: var(--body-text); }
.open-status strong { color: var(--ink); font-weight: 600; }
.open-status__dot { width: .6rem; height: .6rem; border-radius: 999px; background: var(--muted); flex: none; }
.open-status.is-open .open-status__dot { background: var(--success); box-shadow: 0 0 0 4px var(--success-soft); }
.open-status.is-soon .open-status__dot { background: var(--warning); box-shadow: 0 0 0 4px var(--warning-soft); }
.open-status.is-reply svg { width: 1.1rem; height: 1.1rem; color: var(--muted); flex: none; }

.call-card { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.2rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); color: var(--ink); text-decoration: none; transition: border-color .2s ease; }
.call-card:hover, .call-card:focus-visible { border-color: var(--mark, var(--primary)); }
.call-card__icon { display: grid; place-items: center; width: 2.8rem; height: 2.8rem; border-radius: 999px; background: var(--tint); color: var(--mark, var(--primary)); flex: none; }
.call-card__icon svg { width: 1.3rem; height: 1.3rem; }
.call-card__text { display: grid; gap: .1rem; min-width: 0; flex: 1; }
.call-card__label { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.call-card__number { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.25rem, 2.2vw, 1.5rem); font-variant-numeric: tabular-nums; white-space: nowrap; }
.call-card__go { color: var(--mark, var(--primary)); font-weight: 600; font-size: .92rem; }

.social-pills { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.social-pill { display: inline-flex; align-items: center; gap: .45rem; min-height: 2.75rem; padding: 0 1rem; border: 1px solid var(--line); border-radius: 999px; color: var(--ink); text-decoration: none; font-size: .92rem; }
a.social-pill:hover { border-color: var(--mark, var(--primary)); }
.social-pill__icon svg { width: 1.1rem; height: 1.1rem; display: block; color: var(--mark, var(--primary)); }
.social-pill__handle { color: var(--muted); }

.contact-info { margin: 0; display: grid; }
.contact-fact { display: grid; gap: .3rem; padding: 1rem 0; border-bottom: 1px solid var(--line); }
.contact-fact:first-child { border-top: 1px solid var(--line); }
.contact-fact dt { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.contact-fact dd { margin: 0; display: grid; gap: .4rem; }
.contact-fact__value { color: var(--ink); }
a.contact-fact__value { text-decoration: none; }
a.contact-fact__value:hover { color: var(--mark, var(--primary)); }
.contact-fact__acts { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; font-size: .88rem; }
.contact-fact__acts a { color: var(--mark, var(--primary)); text-decoration: none; }
.contact-copy { padding: 0; border: 0; background: none; color: var(--muted); font: inherit; cursor: pointer; }
.contact-copy[hidden] { display: none; }
.contact-copy:hover { color: var(--ink); }

.hours-table { border-collapse: collapse; width: 100%; max-width: 22rem; }
.hours-table th, .hours-table td { padding: .25rem 0; text-align: left; font-weight: 400; color: var(--body-text); }
.hours-table td { text-align: right; font-variant-numeric: tabular-nums; }
.hours-table tr.is-today th, .hours-table tr.is-today td { color: var(--ink); font-weight: 600; }
.hours-table tr.is-off td { color: var(--muted); }
.hours-table__today { color: var(--muted); font-weight: 400; font-size: .85rem; }
.hours-special { margin-top: .6rem; max-width: 22rem; padding: .8rem 1rem; border-radius: var(--radius-small); background: var(--warning-soft); }
.hours-special__title { display: block; margin-bottom: .35rem; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.hours-special ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .25rem; }
.hours-special li { display: flex; justify-content: space-between; gap: 1rem; font-size: .92rem; }

@media (max-width: 559px) {
  .call-card__go { display: none; }
  .social-pills li { flex: 1 1 calc(50% - .5rem); }
  .social-pill { width: 100%; justify-content: center; }
}

.contact-socials { list-style: none; margin: .35rem 0 0; padding: 0; display: grid; gap: .45rem; }
.contact-socials li { display: flex; gap: .75rem; align-items: baseline; }
.contact-socials__network { flex: 0 0 5.5rem; font-size: .8rem; letter-spacing: .04em; text-transform: uppercase; color: var(--muted, var(--body-text)); }
.contact-socials a { text-decoration: underline; text-underline-offset: .2em; }
.contact-hours { list-style: none; margin: .35rem 0 0; padding: 0; display: grid; gap: .3rem; max-width: 20rem; }
.contact-hours__day { display: flex; justify-content: space-between; gap: 1rem; }
.contact-hours__day.is-off { color: var(--muted, var(--body-text)); }