/* ---------------------------------------------------------------------
   support.php -- our copy of the support landing page.

   Everything here is built on the tokens already defined in style.css and
   re-skinned in skin-v12.css, so this page picks up the Sonnet purple and
   the shared radii without restating any of them. The only reason it has
   its own file at all is that none of these shapes exist elsewhere: the
   KB page has no cards and no two-column blocks.

   kb.css is also loaded, for the header and the hero band, which are
   shared with kb.php.
   --------------------------------------------------------------------- */

.sup-wrap {
    max-width: var(--content-max, 1200px);
    padding-bottom: 72px;
}

/* ---- the funnel: the form's first step, inline ---------------------- */

/* A panel rather than a row. It used to be text beside a button; it now
   carries a labelled control and three routes out, which is a column. */
.sup-lead {
    background: var(--color-bg-alt);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    padding: 36px 40px 32px;
    margin: 40px 0 56px;
}

/* The masthead is .sim-hero, borrowed whole from the form so the wording
   and the type stay identical on both pages. Only the page-level framing
   is dropped: inside this panel the 56px top padding would double up on
   the panel's own, and the band is already bounded by it. */
.sup-hero {
    padding: 0;
    max-width: 620px;
}

/* Control and button on one line, bottom-aligned so the button sits level
   with the input rather than with the label above it. */
.sup-start {
    display: flex;
    align-items: flex-end;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 26px;
}
.sup-start-field {
    flex: 1 1 440px;
    min-width: 0;
    margin: 0;
}
.sup-start-field label {
    margin-bottom: 8px;
    font-weight: 600;
    color: var(--color-heading);
}
.sup-start-btn { flex: 0 0 auto; }

/* The three ways out, as one quiet row. They are alternatives to the
   control above, not competitors to it, so none of them is a button. */
.sup-routes {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 26px;
    list-style: none;
    margin: 20px 0 0;
    padding: 0;
}
.sup-routes li { margin: 0; }
.sup-routes form { margin: 0; }

.sup-route-btn {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    font-size: 14px;
    color: var(--color-accent);
    text-decoration: underline;
    cursor: pointer;
}
.sup-route-btn:hover { color: var(--color-accent-d); }
.sup-route-link { font-size: 14px; }

/* The fallback shown when the product list cannot be loaded. */
.sup-lead-btn {
    display: inline-flex;
    margin-top: 24px;
    text-decoration: none;
    font-size: 17px;
    padding: 18px 32px;
}

/* ---- headings ------------------------------------------------------- */

.sup-h2 {
    margin: 0 0 16px;
    font-size: 21px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--color-heading);
}

/* Shown by assets/support.js when Continue is pressed with nothing
   chosen. .sim-warn and .sim-presale are the form's own, so only the
   spacing between them belongs here. */
.sup-empty { margin-top: 18px; }
.sup-empty .sim-warn { margin: 0; }
body.v12 .sup-empty .sim-presale { margin-top: 12px; }

/* ---- the three resource cards --------------------------------------- */

.sup-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin: 0 0 56px;
}

.sup-card {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    padding: 28px 28px 30px;
    background: var(--color-bg);
}

/* The icon carries the accent so the card does not need a coloured border
   or a tinted panel to read as one of a set. */
.sup-card-icon {
    display: block;
    width: 40px;
    height: 40px;
    margin-bottom: 18px;
    color: var(--color-accent);
}
.sup-card-icon svg { width: 100%; height: 100%; display: block; }

.sup-card h3 {
    margin: 0 0 8px;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: -0.01em;
}
/* The whole heading is the link, so the target is a line of text rather
   than three words inside one -- the public page makes you hit "Online
   Support Knowledge Base" in the middle of a sentence.

   THE `body.v12` PREFIX IS LOAD-BEARING. skin-v12.css carries
   `body.v12 a:not([class*="btn"])`, which is (0,2,2) -- a plain
   `.sup-card h3 a` is (0,1,2) and loses, so the headings come out purple
   like any other link and the card stops reading as a heading. Matching
   the weight is the fix; !important would work and would leave the next
   person guessing why. */
body.v12 .sup-card h3 a {
    color: var(--color-heading);
    text-decoration: none;
}
body.v12 .sup-card h3 a:hover {
    color: var(--color-accent);
    text-decoration: underline;
}

.sup-card p {
    margin: 0;
    font-size: 15px;
    line-height: 1.55;
    color: var(--color-muted);
}

/* ---- the two lower blocks ------------------------------------------- */

.sup-split,
.sup-foot-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px 56px;
}
.sup-split { margin-bottom: 56px; }

.sup-split p,
.sup-list,
.sup-address {
    font-size: 15px;
    line-height: 1.6;
    color: var(--color-text);
}
.sup-split p { margin: 0 0 12px; max-width: 54ch; }
.sup-split p:last-child { margin-bottom: 0; }

.sup-contact a {
    font-weight: 600;
    font-size: 16px;
}
.sup-split p.sup-muted {
    color: var(--color-muted);
    font-size: 14px;
}

.sup-list { margin: 0; padding-left: 20px; }
.sup-list li { margin-bottom: 7px; }

.sup-address { font-style: normal; color: var(--color-muted); }

/* ---- narrow ---------------------------------------------------------- */

@media (max-width: 860px) {
    .sup-cards { grid-template-columns: 1fr; gap: 16px; }
    .sup-split,
    .sup-foot-grid { grid-template-columns: 1fr; }

    /* Full-width so the one action on the page stays a full-width target
       on a phone rather than a control floating beside nothing. */
    .sup-lead { padding: 28px 24px; }
    .sup-hero h1 { font-size: 28px; }
    .sup-start { gap: 14px; }
    .sup-start-field { flex: 1 1 100%; }
    .sup-start-btn,
    .sup-lead-btn { width: 100%; justify-content: center; }
    .sup-routes { gap: 10px 18px; }
}

/* The corporate address, alone.
 *
 * It shared a two-column grid with "More support resources" until that
 * list was removed on 2 November -- its links duplicated the resource
 * cards above it. One block does not need a grid, and leaving the grid
 * in place would have put the address in a column with an empty one
 * beside it. */
.sup-address-block {
    margin-top: 8px;
}