/*
 * Webdev Zimbabwe — umbrella / router template (v2026)
 * Load AFTER webdev-base.css. Shared by the category umbrella pages:
 *   /email-office · /websites · /hosting · /vps-server-hosting
 *
 * Block order follows page-architecture "Umbrella/router":
 *   1 category framing · 2 choice grid · 3 existing-customer intercept
 *   4 compact trust · 5 human fallback
 *
 * The routing cards are the principal CTAs — everything else on the page is
 * subordinate to getting the visitor into the right child page.
 *
 * Hero, chips, pillars, FAQ and the .wd-final banner all come from
 * webdev-base.css.
 */

/* ---------- choice grid ---------- */

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

.wd-choice {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}

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

/*
 * Brand mark. Height is fixed but width is free: these are supplied logos with
 * very different aspect ratios — Zoho and Microsoft are near-square, the Google
 * Workspace file is a wide lockup. A square box shrank the wide one to a
 * fraction of the others, so only the height is constrained.
 *
 * `height` is !important because custom.css carries a global
 * `li img { height: 42px !important }` above 768px that would otherwise clamp
 * any logo placed inside a list.
 */
.wd-choice__logo {
  align-items: center;
  display: inline-flex;
  flex: 0 0 auto;
  height: 2.25rem;
  justify-content: flex-start;
  max-width: 8rem;
}

.wd-choice__logo img {
  height: 100% !important;
  max-width: 100%;
  object-fit: contain;
  width: auto;
}

/*
 * Tag always sits on its own row, so cards with longer names don't put it
 * inline while the others push it down. `flex-basis: 100%` forces the break;
 * `max-width: max-content` stops it stretching into a full-width bar.
 */
.wd-choice__top .wd-tag {
  flex-basis: 100%;
  max-width: max-content;
}

.wd-choice h3 {
  font-size: clamp(1.0625rem, 1.4vw, 1.1875rem);
  margin-right: auto;
}

.wd-choice .wd-body {
  margin-top: 0;
}

/* Price anchor — dynamic token only, never a remembered value. */
.wd-choice__price {
  border-top: 1px solid var(--wd-grey-100);
  margin: 0;
  padding-top: 0.875rem;
}

.wd-choice__price span {
  color: var(--wd-grey-500);
  display: block;
  font-size: 0.8125rem;
}

.wd-choice__price b {
  color: var(--wd-charcoal-900);
  font-size: 1.0625rem;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.wd-choice__price em {
  color: var(--wd-grey-500);
  font-size: 0.8125rem;
  font-style: normal;
}

.wd-choice__includes {
  display: grid;
  gap: 0.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.wd-choice__includes li {
  align-items: center;
  color: var(--wd-grey-700);
  display: flex;
  font-size: 0.875rem;
  gap: 0.5rem;
}

.wd-choice__includes .wd-icon {
  color: var(--wd-success-600);
  height: 1.0625rem;
  width: 1.0625rem;
}

/*
 * One action per card — the routing decision, nothing competing with it.
 *
 * It is a SPAN, not an anchor: the whole card is already the link, so a nested
 * <a> would be invalid and would split the click target. It therefore has to
 * reproduce the .wd-btn--primary look by hand rather than take the class, and
 * the values below are copied from that component so the two stay identical.
 */
.wd-choice__go {
  align-items: center;
  background: var(--wd-orange-500);
  border: 1px solid var(--wd-orange-500);
  border-radius: var(--wd-radius-pill);
  box-shadow: var(--wd-shadow-xs);
  color: var(--wd-white);
  display: flex;
  font: 600 0.94rem/1 var(--wd-font-sans);
  gap: 0.5rem;
  justify-content: center;
  margin-top: auto;
  min-height: 44px;
  padding: 0.75rem 1.25rem;
  text-decoration: none;
  transition:
    background-color var(--wd-duration) var(--wd-ease),
    border-color var(--wd-duration) var(--wd-ease),
    box-shadow var(--wd-duration) var(--wd-ease);
}

.wd-choice__go .wd-icon {
  transition: transform var(--wd-duration) var(--wd-ease);
}

@media (hover: hover) and (pointer: fine) {
  /* Matches .wd-btn--primary:hover. The !important answers custom.css, which
     carries a global `a:hover { text-decoration: none }` and colour rules. */
  .wd-choice__go:hover {
    background: var(--wd-orange-600);
    border-color: var(--wd-orange-600);
    box-shadow: var(--wd-shadow-sm);
    color: var(--wd-white) !important;
  }

  /* The whole card is the link, so hovering anywhere on it must move the
     button too — not only a direct hover on the pill itself. */
  .wd-choice:hover .wd-choice__go {
    background: var(--wd-orange-600);
    border-color: var(--wd-orange-600);
    box-shadow: var(--wd-shadow-sm);
    color: var(--wd-white) !important;
  }

  .wd-choice__go:hover .wd-icon,
  .wd-choice:hover .wd-choice__go .wd-icon {
    transform: translateX(4px);
  }
}

.wd-choice__go:focus-visible {
  border-radius: var(--wd-radius-sm);
  box-shadow: var(--wd-focus);
  outline: 0;
}

/* Comparison table lives in webdev-base.css — shared with the product pages. */

/* ---------- "still not sure" chooser ---------- */

.wd-chooser {
  align-items: center;
  display: grid;
  gap: clamp(1.25rem, 3vw, 2.5rem);
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.3fr) auto;
}

.wd-chooser h2 {
  font-size: clamp(1.375rem, 2.2vw, 1.75rem);
}

.wd-chooser__options {
  display: grid;
  gap: 0.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.wd-chooser__options a {
  align-items: center;
  background: var(--wd-white);
  border: 1px solid var(--wd-grey-200);
  border-radius: var(--wd-radius-sm);
  color: var(--wd-charcoal-900);
  display: flex;
  font-size: 0.9375rem;
  font-weight: 600;
  gap: 0.75rem;
  justify-content: space-between;
  min-height: 52px;
  padding: 0.625rem 1rem;
  text-decoration: none;
  transition:
    border-color var(--wd-duration) var(--wd-ease),
    box-shadow var(--wd-duration) var(--wd-ease);
}

@media (hover: hover) and (pointer: fine) {
  .wd-chooser__options a:hover {
    border-color: var(--wd-orange-500);
    box-shadow: var(--wd-shadow-sm);
  }
}

.wd-chooser__options a:focus-visible {
  box-shadow: var(--wd-focus);
  outline: 0;
}

.wd-chooser__options .wd-icon {
  color: var(--wd-orange-600);
}

/* ---------- responsive ---------- */

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

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

/*
 * Behavioural question above the product name, as on the /upgrades router.
 * Buyers scan for the description of their own situation, not the SKU.
 */
.wd-choice__q {
  color: var(--wd-orange-700);
  font-size: 0.9375rem;
  font-weight: 600;
  margin: 0;
}

/*
 * Who manages it — the axis this router splits on. Sits under the product name
 * so the visitor reads the name, then immediately the commitment it implies.
 */
.wd-choice__kind {
  color: var(--wd-orange-700);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  margin: -0.375rem 0 0;
  text-transform: uppercase;
}

/* ---------- consultative choice card ----------
 * The enterprise route is a conversation, not a checkout, so this variant made
 * its card dark: a different KIND of option rather than a more expensive tier.
 * Everything the light card sets in a dark ink is re-stated here.
 *
 * NOTHING OPTS IN ANY MORE. The client asked for the consultative card to match
 * its siblings, so /vps-server-hosting, /websites and /website-builder dropped
 * the class and all three router cards are now white. Kept as a hook, like
 * .wd-route--lead in webdev-upgrades.css, in case the distinction is wanted
 * back — but if you are hunting a dark card on a router page, it is not this.
 */
.wd-choice--dark {
  background: var(--wd-charcoal-950);
  color: var(--wd-white);
}

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

.wd-choice--dark .wd-choice__kind {
  color: var(--wd-orange-500);
}

.wd-choice--dark .wd-choice__q {
  color: var(--wd-orange-500);
}

/*
 * .wd-body and the includes list both carry their own dark colour, which beats
 * the white inherited from the card — a direct rule always wins over an
 * inherited one. Without both of these the copy renders dark-grey on near-black,
 * which is a contrast failure rather than a cosmetic one.
 */
.wd-choice--dark .wd-body,
.wd-choice--dark .wd-choice__includes li {
  color: var(--wd-grey-200);
}

/* The dark card takes the same filled pill — no override needed beyond the
   inherited colour, which the button already sets to white. */

.wd-choice--dark .wd-icon-plate {
  color: var(--wd-orange-500);
}

/* ---------- three-across trust row ----------
 * Breakpoints mirror base's .wd-pillars exactly so its `li:nth-child(odd)` and
 * `li + li` divider resets still line up. router.css loads after base, so these
 * win the source-order tie inside those media queries.
 */
.wd-pillars--three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 1099.98px) {
  .wd-pillars--three {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 2rem;
  }
}

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

/*
 * Icon beside the copy rather than above it. With only three items the row is
 * wide enough for a horizontal pairing, which reads faster than a stacked one.
 * The icon spans both text rows so the heading and its line-up stay level.
 */
.wd-pillars--inline li {
  align-items: start;
  column-gap: 1rem;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
}

.wd-pillars--inline .wd-icon {
  grid-row: 1 / span 2;
  margin-bottom: 0;
}

/*
 * Banner with no icon. The base three-column grid is `auto | 1fr | auto` and
 * expects an art element first — drop it and the copy would be sized `auto`
 * while the buttons took the flexible column.
 */
.wd-final--noart {
  grid-template-columns: minmax(0, 1fr) auto;
}

/* Trailing secondary link under the intercept's main action. */
.wd-final__link {
  align-items: center;
  color: var(--wd-orange-700);
  display: inline-flex;
  font-weight: 600;
  gap: 0.5rem;
  justify-content: center;
  min-height: 44px;
}

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

/*
 * A supplied brand logo standing in for the outline mark, in the same 2.75rem
 * box so headings stay on one baseline across the row. The logo keeps its own
 * brand colour — it identifies a third-party product, so it is not recoloured
 * into the palette.
 *
 * `height` is !important for the same reason as .wd-choice__logo img:
 * custom.css carries a global `li img { height: 42px !important }` above 768px
 * that clamps any image placed inside a list.
 */
.wd-icon-plate--logo img {
  height: 100% !important;
  max-width: 100%;
  object-fit: contain;
  width: auto;
}

/* ---------- per-page hero artwork ----------
 * .wd-subhero--servers MOVED to webdev-base.css — /hosting (this template) and
 * /web-hosting (the product template) share the same artwork, and base is the
 * only layer both pages load.
 */

/* Stacks the intercept's two actions. */
.wd-final__actions--stack {
  display: grid;
  gap: 0.25rem;
  justify-items: stretch;
}

/* ---------- feature card grid ----------
 * The "what's included" inventory. A card grid rather than the bare icon rows
 * the product template uses: there are twelve items here, and without a surface
 * per item the block reads as one undifferentiated wall of text.
 */
.wd-featgrid {
  display: grid;
  gap: clamp(0.75rem, 1.5vw, 1rem);
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.wd-featgrid .wd-icon {
  color: var(--wd-orange-600);
  margin-bottom: 0.625rem;
}

.wd-featgrid h3 {
  font-size: 0.9375rem;
}

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

/* Two across, for the four "what we can build" cards. */
.wd-featgrid--two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.wd-featgrid--two h3 {
  font-size: 1.0625rem;
}

.wd-featgrid--two p {
  font-size: 0.9375rem;
}

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

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

/* ---------- local payment methods ----------
 * Client-supplied brand lockups for EcoCash, O'mari, InnBucks and Zimswitch
 * Online, replacing the wordmark tiles this section used before the assets were
 * cleared. Used only by /websites.
 */
/* Copy on the left, the method tiles on the right. */
.wd-paysplit {
  align-items: center;
  display: grid;
  gap: clamp(1.5rem, 3vw, 3rem);
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
}

.wd-paysplit h2 {
  font-size: clamp(1.375rem, 2.2vw, 1.75rem);
}

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

.wd-paylist {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}

/*
 * Orange-edged tile on the black panel. The border is the brand orange rather
 * than the old white hairline so the group reads as one deliberate component
 * against .wd-panel--black instead of four faint outlines.
 */
.wd-paylist li {
  align-items: center;
  background: rgb(255 255 255 / 4%);
  border: 1px solid rgb(244 124 32 / 55%);
  border-radius: var(--wd-radius-md);
  box-shadow: 0 6px 20px rgb(0 0 0 / 30%);
  display: flex;
  justify-content: center;
  padding: clamp(0.75rem, 1.5vw, 1rem);
}

/*
 * The white plate is not decoration — it is what makes the marks legible. All
 * four lockups carry dark elements that vanish on a black panel: InnBucks' navy
 * wordmark, the black field behind Zimswitch's yellow type, and the grey "member
 * of the Old Mutual Group" line under O'mari. Recolouring a brand asset is not
 * an option, so the plate goes behind it — the standard partner-wall treatment
 * on a dark section, and it keeps every brand colour exact.
 *
 * Fixed height plus a full-width box makes all four plates identical, which is
 * what stops a 3.5:1 wordmark (EcoCash) and a 1:1 mark (Zimswitch) from looking
 * like two different components. `object-fit: contain` then sizes each lockup
 * inside its plate without distorting any of them.
 */
/*
 * The `!important` on height is NOT defensive noise. Antler's custom.css ships
 * `li img { height: 42px !important }` above 768px, which silently clamps every
 * image inside a list item — these plates rendered at 42px tall with 18px of
 * usable space, shrinking all four lockups to illegible specks. Re-asserting in
 * our own scope is the documented fix; the vendor file stays untouched. If this
 * component is ever moved out of a <ul>, the `!important` can go.
 */
/*
 * Optical balance. `object-fit: contain` fits each file's CANVAS, and the four
 * assets carry very different amounts of built-in transparent margin, so equal
 * plates give visibly unequal logos. Measured ink as a share of canvas height:
 *
 *   EcoCash   58%      O'mari    56%      Zimswitch 53%      InnBucks  43%
 *
 * Those numbers are a starting point, not the answer: for O'mari and Zimswitch
 * the ink box also contains SMALL PRINT — the "member of the Old Mutual Group"
 * endorsement line and the "ONLINE" bar — which inflates the measurement while
 * contributing almost nothing to how big the logo reads. Three of the four
 * therefore want the tight default, and only EcoCash, whose bold wordmark runs
 * nearly edge to edge with no secondary text, needs to be held back.
 *
 * Re-measure and re-judge by eye before swapping any asset.
 */
.wd-paylist__mark {
  background: var(--wd-white);
  border-radius: 10px;
  display: block;
  height: 5rem !important;
  object-fit: contain;
  padding: 0.5rem 0.75rem;
  width: 100%;
}

.wd-paylist__mark--inset {
  padding: 1rem 1.25rem;
}

@media (max-width: 575.98px) {
  /* Horizontal padding drops faster than vertical here: in a half-width tile at
     390px the widest lockup (EcoCash, 3.5:1) becomes width-bound rather than
     height-bound, and side padding is the only thing left to give back. */
  .wd-paylist__mark {
    height: 4.25rem !important;
    padding: 0.375rem 0.5rem;
  }

  .wd-paylist__mark--inset {
    padding: 0.625rem 0.5rem;
  }
}

/* .wd-steps__list--six MOVED to webdev-base.css -- the consultative template
 * needed it too. */

/* ---------- operating-model use cases ---------- */

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

/* The orange rule reads as a tab on top of the card. */
.wd-usecard {
  border-top: 3px solid var(--wd-orange-500);
}

.wd-usecard__label {
  color: var(--wd-grey-500);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  margin: 0;
  text-transform: uppercase;
}

.wd-usecard h3 {
  font-size: 1.125rem;
  margin-top: 0.375rem;
}

.wd-usecard > p {
  color: var(--wd-grey-700);
  font-size: 0.9375rem;
}

.wd-usecard ul {
  display: grid;
  gap: 0.5rem;
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
}

.wd-usecard li {
  align-items: start;
  color: var(--wd-grey-700);
  display: grid;
  font-size: 0.9375rem;
  gap: 0.625rem;
  grid-template-columns: 1.125rem 1fr;
}

.wd-usecard li .wd-icon {
  color: var(--wd-success-600);
  height: 1.125rem;
  margin-top: 0.1875rem;
  width: 1.125rem;
}

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

/* ---------- two-route choice grid ----------
 * .wd-choices is three across. Where a page routes between exactly two options
 * they should fill the row rather than leaving a third of it empty.
 */
.wd-choices--two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

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

/* Short code badge beside a route name, e.g. ZS / ZC. */
.wd-choice__code {
  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.6875rem;
  font-weight: 700;
  height: 2rem;
  justify-content: center;
  letter-spacing: 0.02em;
  width: 2rem;
}

.wd-choice--dark .wd-choice__code {
  color: var(--wd-orange-500);
}

/* ---------- three-across feature grid ----------
 * MUST come after the .wd-featgrid @media blocks above: media queries add no
 * specificity, so --three (0,1,0) and .wd-featgrid (0,1,0) tie and source order
 * decides. Breakpoints mirror the base ones so nothing is left half-applied.
 */
.wd-featgrid--three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

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

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

/* Sequence label on a feature card. Content, not ornament, so it is in the
   markup rather than a ::before counter. */
.wd-featgrid__no {
  color: var(--wd-orange-600);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  margin: 0 0 0.375rem;
}

/* ---------- connected-app tiles ----------
 * Named apps in circles. Text, not logos: we hold no cleared brand assets for
 * the individual Zoho applications, and unlicensed marks on a commercial page
 * are a risk a wordmark avoids (content-guardrails §4).
 */
.wd-apptiles {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}

.wd-apptiles li {
  align-items: center;
  border: 1px solid rgb(255 255 255 / 16%);
  border-radius: var(--wd-card-radius);
  display: grid;
  gap: 0.625rem;
  justify-items: center;
  padding: 1.125rem 0.75rem;
  text-align: center;
}

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

.wd-apptiles span {
  font-size: 0.875rem;
  font-weight: 600;
}

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

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

/* ---------- /email-office hero ----------
 * Client-supplied artwork. Defined here rather than in webdev-product.css,
 * where the other mail heroes live, because /email-office loads the router
 * layer and not the product one — putting it there would silently do nothing.
 *
 * The JPEG, not the supplied PNG: the original was an indexed 256-colour PNG at
 * 307KB. Re-encoded it is 145KB with full colour, so it is both smaller and
 * cleaner across the large flat wall area where indexed palettes band. The PNG
 * is left in place untouched.
 *
 * Composition suits the default `right center` focal point: the laptop and
 * hands sit right, the desk and wall on the left are empty, which is where the
 * heading and the scrim land.
 */
.wd-subhero--office {
  --wd-subhero-art: url("../img/emailandoffice.jpg");
}

/* .wd-subhero--websites MOVED to webdev-base.css — /websites (this template),
 * /managed-websites (product) and /custom-websites (consult) all share the art,
 * and base is the only layer all three load. */