/* ============================================================================
 * contact.css — contact.html only.
 * ==========================================================================*/

/* ------------------------------------------------------------- channels
 * Four tappable cards. On a phone these are the primary interface of the
 * whole site, so each is a full link target rather than a link inside a card.
 * ---------------------------------------------------------------------- */
.channel {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: var(--gap-md);
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  height: 100%;
  transition: transform .26s var(--ease-out), box-shadow .26s var(--ease-out),
              border-color .26s var(--ease);
}
.channel:hover {
  color: var(--text);
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--border-strong);
}
.channel .tile { margin-block-end: 16px; }

.tile--wa { background: color-mix(in srgb, var(--wa) 16%, transparent); color: var(--wa-deep); }
:root[data-theme="dark"] .tile--wa { color: var(--wa); }

.channel__label {
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-faint);
}
:root.is-ar .channel__label { letter-spacing: 0; text-transform: none; font-size: .88rem; }

.channel__value {
  font-size: 1.08rem;
  font-weight: 800;
  color: var(--text);
  word-break: break-word;
}
.channel__value--sm { font-size: .95rem; font-weight: 700; line-height: 1.5; }

.channel__note {
  font-size: .84rem;
  color: var(--text-muted);
  margin-block-start: 6px;
}

/* ------------------------------------------------------------------ hours */
.hourscard {
  padding: 4px 22px;
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--border);
  margin-block: var(--gap-md);
}
.datarow__value--accent { color: var(--amber-deep); }
:root[data-theme="dark"] .datarow__value--accent { color: var(--accent); }

.hours__note { margin-block-start: var(--gap); }

/* ---------------------------------------------------------------- address */
.addresscard {
  padding: var(--gap-md);
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--border);
}
.addresscard h3 { font-size: 1.1rem; margin-block-end: 10px; }
.addresscard__value {
  color: var(--text-muted);
  font-size: 1rem;
  line-height: 1.75;
  margin-block-end: 16px;
}
.addresscard__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-block-end: var(--gap);
}
.addresscard .tile { margin-block-end: 16px; }

/* Licence reminder directly under the address, where a client checking the
   company's details is already looking. */
.licencestrip {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-block-start: var(--gap);
  padding: 16px 20px;
  border-radius: var(--r);
  background: var(--navy);
  color: #fff;
}
:root[data-theme="dark"] .licencestrip {
  background: var(--surface-2);
  border: 1px solid var(--border);
}
.licencestrip > .ico { width: 22px; height: 22px; flex: none; color: var(--amber); }
.licencestrip__label {
  display: block;
  font-size: .78rem;
  color: rgba(255, 255, 255, .65);
}
.licencestrip__value {
  display: block;
  font-size: 1.1rem;
  font-weight: 800;
  color: #fff;
}
:root[data-theme="dark"] .licencestrip__label { color: var(--text-muted); }
:root[data-theme="dark"] .licencestrip__value { color: var(--text); }