/*
 * Webdev Zimbabwe — contact / support hub (v2026)
 * Load AFTER webdev-base.css AND webdev-consult.css.
 *
 * page-architecture "Contact/support hub" locks the channel order:
 *   1 WhatsApp · 2 Phone · 3 Email · 4 Knowledge Base · 5 Client Area/ticket
 *   6 Office visit
 * Every block below appears in that order in contact.html. Do not reorder them.
 *
 * The enquiry form reuses .wd-scope* and .wd-field* from webdev-consult.css —
 * the same component /enterprise-infrastructure and /custom-websites use — so
 * this file adds no form styling of its own.
 */

/*
 * The support-floor photograph: our own agents at their desks, which is what a
 * contact page should front. Replaces the team group shot that sat here before.
 *
 * The JPEG, not the supplied PNG: the original is an INDEXED 256-colour PNG at
 * 509KB. Re-encoded at q82 it is 149KB, in line with the other heroes. The
 * source was already colour-reduced before it reached us, so some smoothness in
 * the blurred background is gone for good — a full-colour original would
 * re-encode better if one exists.
 *
 * Shared with the homepage hero, which declares it on .wd-hero__bg in
 * webdev-home.css rather than through this modifier — different component, same
 * file, so it is one download for a visitor who sees both.
 *
 * Composition: office and window on the left, the agent's face on the right.
 * That is the DEFAULT scrim's direction, so NO --light-art even though the frame
 * reads bright overall. The solid part of the gradient covers the window behind
 * the copy, and the gradient has cleared by the time it reaches her — a
 * light-art floor would only mute the face, which is the point of the shot.
 */
.wd-subhero--contact {
  --wd-subhero-art: url("../img/salessupport.jpg");
  /* Her face sits above the vertical middle; the default `center` crops it. */
  --wd-subhero-art-pos: right 25%;
}

/*
 * A taller band than the other subheroes, and the reason is the crop rather
 * than the copy. The band is far wider than it is tall, so `cover` scales the
 * 1947x808 source to 598px tall at desktop width and shows only a slice — at
 * the standard height that slice cut the top of the agent's head off. Extra
 * vertical padding raises the share of the frame on show to roughly 90%.
 *
 * Keep the band under ~598px at 1440. Past that, `cover` starts scaling on
 * HEIGHT instead of width and the image crops horizontally — she drifts out of
 * frame to the right and the whole point of the change is lost.
 */
.wd-subhero--contact .wd-subhero__inner {
  padding-block: clamp(3rem, 8vw, 7.5rem);
}

/* ---------- channel tiles in the hero ----------
 * Four routes, WhatsApp first and visually promoted, because it is the fastest
 * channel and the architecture puts it at the top.
 */
.wd-channels {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  list-style: none;
  margin: clamp(1.5rem, 3vw, 2.25rem) 0 0;
  padding: 0;
}

.wd-channel {
  background: rgb(255 255 255 / 6%);
  border: 1px solid rgb(255 255 255 / 16%);
  border-radius: var(--wd-card-radius);
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  padding: clamp(0.875rem, 1.8vw, 1.125rem);
  transition:
    background var(--wd-duration) var(--wd-ease),
    border-color var(--wd-duration) var(--wd-ease);
}

/* The promoted first channel. */
.wd-channel--primary {
  background: var(--wd-orange-500);
  border-color: var(--wd-orange-500);
}

.wd-channel__top {
  align-items: center;
  display: flex;
  gap: 0.625rem;
}

.wd-channel__badge {
  align-items: center;
  border: 1px solid rgb(255 255 255 / 45%);
  border-radius: 50%;
  color: var(--wd-white);
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 0.625rem;
  font-weight: 700;
  height: 1.875rem;
  justify-content: center;
  letter-spacing: 0.02em;
  width: 1.875rem;
}

.wd-channel strong {
  color: var(--wd-white);
  font-size: 1rem;
}

.wd-channel span {
  color: var(--wd-grey-200);
  font-size: 0.8125rem;
}

.wd-channel--primary span {
  color: rgb(255 255 255 / 88%);
}

.wd-channel a {
  align-items: center;
  color: var(--wd-orange-500);
  display: inline-flex;
  font-size: 0.875rem;
  font-weight: 700;
  gap: 0.375rem;
  margin-top: auto;
  min-height: 44px;
}

.wd-channel--primary a {
  color: var(--wd-white);
}

.wd-channel a:hover {
  color: var(--wd-white) !important;
  text-decoration: underline !important;
  text-underline-offset: 0.22em;
}

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

@media (max-width: 479.98px) {
  .wd-channels {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---------- WhatsApp team cards ---------- */

.wd-teams {
  display: grid;
  gap: clamp(1rem, 2vw, 1.5rem);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}

.wd-team {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.wd-team__top {
  align-items: center;
  display: flex;
  gap: 0.75rem;
}

.wd-team__badge {
  align-items: center;
  border: 1px solid var(--wd-orange-500);
  border-radius: 50%;
  color: var(--wd-orange-700);
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 0.75rem;
  font-weight: 700;
  height: 2rem;
  justify-content: center;
  width: 2rem;
}

.wd-team h3 {
  font-size: 1.125rem;
}

.wd-team p {
  color: var(--wd-grey-700);
  font-size: 0.9375rem;
  margin: 0;
}

/* The action sits on the card floor so a row keeps its links level. */
.wd-team__go {
  align-items: center;
  border-top: 1px solid var(--wd-grey-100);
  color: var(--wd-orange-700);
  display: flex;
  font-weight: 700;
  gap: 0.75rem;
  justify-content: space-between;
  margin-top: auto;
  min-height: 44px;
  padding-top: 0.875rem;
}

.wd-team__go:hover {
  color: var(--wd-orange-700) !important;
  text-decoration: underline !important;
  text-underline-offset: 0.22em;
}

.wd-team__note {
  color: var(--wd-grey-500);
  font-size: 0.8125rem;
  margin: 0;
}

/*
 * Dark variant for the middle card. Everything the light card sets in a dark ink
 * has to be re-stated — a dark surface does not inherit those.
 */
.wd-team--dark {
  background: var(--wd-charcoal-950);
  color: var(--wd-white);
}

.wd-team--dark h3 {
  color: var(--wd-white);
}

.wd-team--dark p {
  color: var(--wd-grey-200);
}

.wd-team--dark .wd-team__badge {
  border-color: var(--wd-orange-500);
  color: var(--wd-orange-500);
}

.wd-team--dark .wd-team__go {
  border-top-color: rgb(255 255 255 / 14%);
  color: var(--wd-orange-500);
}

.wd-team--dark .wd-team__go:hover {
  color: var(--wd-orange-500) !important;
}

.wd-team--dark .wd-team__note {
  color: var(--wd-grey-200);
}

@media (max-width: 991.98px) {
  .wd-teams {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---------- phone and email panels ---------- */

.wd-reach {
  display: grid;
  gap: clamp(1rem, 2vw, 1.5rem);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.wd-reach__dark {
  background: var(--wd-charcoal-950);
  color: var(--wd-white);
}

.wd-reach__dark h3 {
  color: var(--wd-white);
}

.wd-reach__dark .wd-body {
  color: var(--wd-grey-200);
}

/* Numbered list of who to ask for. */
.wd-reach__list {
  display: grid;
  gap: 0.625rem;
  list-style: none;
  margin: 1.125rem 0 0;
  padding: 0;
}

.wd-reach__list li {
  align-items: center;
  color: var(--wd-grey-200);
  display: grid;
  font-size: 0.9375rem;
  gap: 0.75rem;
  grid-template-columns: auto minmax(0, 1fr);
}

.wd-reach__no {
  align-items: center;
  border: 1px solid var(--wd-orange-500);
  border-radius: 50%;
  color: var(--wd-orange-500);
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 0.6875rem;
  font-weight: 700;
  height: 1.5rem;
  justify-content: center;
  width: 1.5rem;
}

/* Email rows: team, address, what it is for. */
.wd-mails {
  display: grid;
  gap: 0;
  list-style: none;
  margin: 1.125rem 0 0;
  padding: 0;
}

.wd-mails li {
  border-bottom: 1px solid var(--wd-grey-100);
  display: grid;
  gap: 0.125rem 1rem;
  grid-template-columns: 5rem minmax(0, 1fr);
  padding: 0.75rem 0;
}

.wd-mails li:last-child {
  border-bottom: 0;
}

.wd-mails dt {
  color: var(--wd-grey-500);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.wd-mails a {
  color: var(--wd-orange-700);
  font-weight: 700;
  overflow-wrap: anywhere;
}

.wd-mails p {
  color: var(--wd-grey-700);
  font-size: 0.8125rem;
  grid-column: 2;
  margin: 0;
}

@media (max-width: 767.98px) {
  .wd-reach {
    grid-template-columns: minmax(0, 1fr);
  }

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

  .wd-mails p {
    grid-column: 1;
  }
}

/* ---------- knowledge base search ----------
 * A real GET form to the WHMCS knowledge base, not a decorative box. It works
 * without JavaScript because the browser submits it.
 */
.wd-kbsearch {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
  margin: 0 auto clamp(1.5rem, 3vw, 2.5rem);
  max-width: 44rem;
}

.wd-kbsearch input {
  background: var(--wd-white);
  border: 1px solid var(--wd-grey-200);
  border-radius: 999px;
  color: var(--wd-charcoal-900);
  flex: 1 1 16rem;
  font-family: var(--wd-font-sans);
  font-size: 1rem;
  min-height: 52px;
  min-width: 0;
  padding: 0 1.25rem;
}

.wd-kbsearch input:focus-visible {
  border-color: var(--wd-orange-500);
  box-shadow: var(--wd-focus);
  outline: 0;
}

.wd-kbsearch .wd-btn {
  flex: 0 0 auto;
}

/* ---------- guide and action card grids ---------- */

.wd-guides {
  display: grid;
  gap: clamp(0.75rem, 1.5vw, 1.25rem);
  grid-template-columns: repeat(4, minmax(0, 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}

.wd-guide__no {
  color: var(--wd-orange-600);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  margin: 0 0 0.375rem;
}

.wd-guides h3,
.wd-actions h3 {
  font-size: 1rem;
}

.wd-guides p,
.wd-actions p {
  color: var(--wd-grey-700);
  font-size: 0.875rem;
  margin: 0.375rem 0 0.875rem;
}

.wd-guides .wd-link-arrow,
.wd-actions .wd-link-arrow {
  font-size: 0.875rem;
}

/* Account actions, on the dark panel. */
.wd-actions {
  display: grid;
  gap: clamp(0.75rem, 1.5vw, 1.25rem);
  grid-template-columns: repeat(4, minmax(0, 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}

.wd-actions li {
  background: var(--wd-charcoal-950);
  border: 1px solid rgb(255 255 255 / 12%);
  border-radius: var(--wd-card-radius);
  display: flex;
  flex-direction: column;
  padding: clamp(1rem, 2vw, 1.375rem);
}

.wd-actions h3 {
  color: var(--wd-white);
  margin-top: 0.625rem;
}

.wd-actions p {
  color: var(--wd-grey-200);
  margin-bottom: auto;
  padding-bottom: 0.875rem;
}

.wd-actions .wd-link-arrow {
  color: var(--wd-orange-500);
}

.wd-actions .wd-link-arrow:hover {
  color: var(--wd-orange-500) !important;
}

.wd-actions__badge {
  align-items: center;
  border: 1px solid var(--wd-orange-500);
  border-radius: 50%;
  color: var(--wd-orange-500);
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 0.625rem;
  font-weight: 700;
  height: 1.875rem;
  justify-content: center;
  width: 1.875rem;
}

@media (max-width: 991.98px) {
  .wd-guides,
  .wd-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 575.98px) {
  .wd-guides,
  .wd-actions {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---------- office visit cards ---------- */

.wd-visits {
  display: grid;
  gap: clamp(1rem, 2vw, 1.5rem);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.wd-visit__top {
  align-items: center;
  display: flex;
  gap: 0.75rem;
}

.wd-visit__badge {
  align-items: center;
  border: 1px solid var(--wd-orange-500);
  border-radius: 50%;
  color: var(--wd-orange-700);
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 0.875rem;
  font-weight: 700;
  height: 2.25rem;
  justify-content: center;
  width: 2.25rem;
}

.wd-visit__city {
  color: var(--wd-orange-700);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  margin: 0.875rem 0 0;
  text-transform: uppercase;
}

.wd-visit address {
  color: var(--wd-grey-700);
  font-size: 0.9375rem;
  font-style: normal;
  margin: 0.375rem 0 0;
}

.wd-visit address a {
  color: var(--wd-orange-700);
  font-weight: 600;
}

/* Dark variant for the first office. */
.wd-visit--dark {
  background: var(--wd-charcoal-950);
  color: var(--wd-white);
}

.wd-visit--dark h3 {
  color: var(--wd-white);
}

.wd-visit--dark .wd-body,
.wd-visit--dark address {
  color: var(--wd-grey-200);
}

.wd-visit--dark .wd-visit__badge,
.wd-visit--dark .wd-visit__city {
  border-color: var(--wd-orange-500);
  color: var(--wd-orange-500);
}

.wd-visit--dark address a,
.wd-visit--dark .wd-link-arrow {
  color: var(--wd-orange-500);
}

.wd-visit--dark .wd-link-arrow:hover {
  color: var(--wd-orange-500) !important;
}

@media (max-width: 767.98px) {
  .wd-visits {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---------- icon badges ----------
 * The circular badges hold a Lucide-style glyph, not an initialism. `.wd-icon`
 * already supplies fill:none + stroke:currentColor, so each badge only has to
 * size the glyph and inherit its own colour.
 */
.wd-channel__badge .wd-icon,
.wd-team__badge .wd-icon,
.wd-actions__badge .wd-icon,
.wd-visit__badge .wd-icon {
  height: 1rem;
  width: 1rem;
}

.wd-visit__badge .wd-icon {
  height: 1.125rem;
  width: 1.125rem;
}

/* Inline glyph in the who-to-ask and before-you-send lists. */
.wd-reach__no .wd-icon {
  height: 0.875rem;
  width: 0.875rem;
}