/* The warranty page.
 *
 * Layered on style.css / support.css rather than replacing them: every
 * colour, radius and font here comes from the same custom properties
 * the rest of the support site uses, so the page follows the site when
 * the site changes. The old page shipped its own 2010 stylesheet, which
 * is most of why it looked like it belonged to a different company.
 *
 * What this file actually does is one thing: make a long legal document
 * READABLE. Measure, rhythm, and headings you can find -- nothing
 * decorative.
 */

/* The content column matches the hero banner, edge for edge.
 *
   Julia, 2 November: "Support home" should line up with the banner's
   left, and the text should end at the banner's right.
 *
   The banner is laid out from exactly two numbers, --kb-max and
   --kb-gutter on .kb-page, and kb.css says why: "the hero is laid out
   from the same two numbers, which is what keeps its left edge on the
   same line as the panels below it." So this column is laid out from
   those same two numbers rather than from the 1136px they happen to
   compute to. Matching the pixel would line the two up on a desktop
   and lose them everywhere else -- the first attempt did exactly that,
   and on a phone the text sat 12px proud of the banner on both sides,
   because .sup-wrap pads by 20px where the hero's gutter is 32px.
 *
   The honest trade-off at this width: a line of body text runs to
   roughly 140 characters, about twice what typography guidance
   recommends, and the eye can lose the start of the next line. The
   compensation is extra leading below, which is what actually makes a
   long measure readable. If it ever reads badly the fix is to narrow
   this one value, not to rework the page. */
.wty-wrap {
    max-width: var(--kb-max);
    padding-inline: var(--kb-gutter);
}

/* The children fill that column rather than constraining themselves,
   so there is one source of width on the page and not three. */
.wty-back,
.wty-hero,
.wty-doc {
    max-width: none;
    margin-inline: 0;
}

.wty-back {
    margin-top: 28px;
    font-size: 14px;
}

.wty-back a {
    color: var(--color-muted, #666);
    text-decoration: none;
}

.wty-back a:hover,
.wty-back a:focus-visible {
    color: var(--color-accent, #5b3bb8);
    text-decoration: underline;
}

.wty-hero {
    margin-top: 12px;
}

.wty-hero h1 {
    text-wrap: balance;
}

/* The summary sentence carries the only thing most visitors came for --
   how long the warranty lasts -- so it is set larger than body copy and
   the two periods are bold in the markup. */
/* The masthead.
 *
   The kicker, the title and the two warranty periods. The title is the
   document's own name and is set as the page's one large thing; nothing
   below it competes. */
.wty-hero h1 {
    text-wrap: balance;
    letter-spacing: -0.02em;
}

/* The two periods, as a pair of facts.
 *
   Not cards: a tinted panel with a dividing rule, so it reads as one
   summary of one document rather than two separate offers. The term is
   small and muted, the period is the thing being stated. */
.wty-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 0;
    margin: 28px 0 0;
    padding: 0;
    border: 1px solid var(--color-border, #d2d2d7);
    border-radius: var(--radius-card, 12px);
    background: var(--color-bg-alt, #f5f5f7);
    overflow: hidden;
}

.wty-summary-item {
    padding: 20px 24px;
}

/* The rule between them, only when they are side by side. */
.wty-summary-item + .wty-summary-item {
    border-top: 1px solid var(--color-border, #d2d2d7);
}

@media (min-width: 620px) {
    .wty-summary-item + .wty-summary-item {
        border-top: 0;
        border-left: 1px solid var(--color-border, #d2d2d7);
    }
}

.wty-summary dt {
    margin: 0 0 6px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-muted, #6e6e73);
}

.wty-summary dd {
    margin: 0;
    font-size: 19px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--color-heading, #1d1d1f);
}

/* Each section is a heading rail and a prose column.
 *
   This is the shape a specification or a contract is set in, and it
   does three things at once. It gives the headings a column of their
   own, so the document can be scanned by running down the left edge
   instead of reading it. It brings the line length down -- the full
   banner width ran to about 140 characters and this is nearer 95,
   which is still long but readable with the leading below. And it
   fills the width Julia asked the content to span without inventing
   anything to put there.
 *
   The rail is wide on purpose. A narrower one left the prose at 124
   characters, barely better than where it started; most of the gain
   here comes from the rail taking real width rather than from the
   headings needing it.
 *
   Sections are divided by space and a hairline rather than by boxes.
   Ten cards down a page of legal text would read as ten unrelated
   things; this is one document. */
.wty-sec {
    display: grid;
    grid-template-columns: minmax(190px, 320px) minmax(0, 1fr);
    gap: 0 80px;
    padding-top: 40px;
    margin-top: 40px;
    border-top: 1px solid var(--color-border, #d2d2d7);
}

.wty-sec > .sup-h2 {
    /* The heading follows you down a long section rather than
       scrolling away -- the Exclusions list is twenty lines, and
       "which section am I in" should not need a scroll back. */
    position: sticky;
    top: 24px;
    align-self: start;
    margin: 0;
    font-size: 18px;
    line-height: 1.35;
    text-wrap: balance;
}

/* No rule or mark above the heading.
 *
   There was one -- 28px of accent purple, meant to give the rail a
   spine. Julia asked what it was, which is the answer: a mark that
   makes a reader stop and wonder is not working, and it was the only
   purely ornamental thing on the page. The hairline between sections
   already does the separating, and the structure is carrying the
   professionalism here. A legal document is better slightly
   under-decorated than over. */

.wty-body > :first-child {
    margin-top: 0;
}

/* 16px, not the site's 14px default.
 *
   This is a legal document somebody reads to find out whether their
   enclosure is covered, not interface text they glance at. 14px set at
   this measure was genuinely hard work. The larger size also shortens
   every line by about a seventh, which is the cheapest readability fix
   available here. */
.wty-sec p,
.wty-list li,
.wty-alpha li {
    font-size: 16px;
    line-height: 1.75;
}

.wty-sec p {
    margin: 0 0 16px;
}

.wty-sec p:last-child {
    margin-bottom: 0;
}

.wty-h3 {
    margin: 28px 0 10px;
    font-size: 16px;
    font-weight: 600;
    color: var(--color-heading, #1a1a22);
}

/* Lists carry most of the substance in this document -- the remedies,
   the exclusions, the damages -- so they get room rather than being
   squeezed against the paragraph above. */
.wty-list,
.wty-alpha {
    margin: 0 0 16px;
    padding-left: 24px;
}

.wty-list li,
.wty-alpha li {
    margin-bottom: 10px;
    line-height: 1.8;
}

/* (a), (b), (c) -- the source document numbers its exclusions that way
   and they are referred to by letter, so the letters have to be real
   rather than decorative bullets. */
.wty-alpha {
    list-style: none;
    counter-reset: wty-alpha;
    padding-left: 0;
}

.wty-alpha > li {
    counter-increment: wty-alpha;
    padding-left: 34px;
    position: relative;
}

.wty-alpha > li::before {
    content: "(" counter(wty-alpha, lower-alpha) ")";
    position: absolute;
    left: 0;
    top: 0;
    font-variant-numeric: tabular-nums;
    color: var(--color-muted, #666);
}

/* The capitalised clauses.
 *
 * The source sets these in full capitals, which is a legal convention
 * for conspicuousness, and they stay that way -- recasing a warranty
 * for looks is editing it. But a solid block of capitals is genuinely
 * hard to read, so the capitals come from CSS text-transform while the
 * markup holds normal sentence case: a screen reader is then not
 * spelling out words letter by letter, and copy-paste gives sentence
 * case. The extra letter-spacing is what makes the block scannable. */
.wty-legal {
    text-transform: uppercase;
    letter-spacing: 0.02em;
    font-size: 14.5px;
    line-height: 1.85;
    color: var(--color-text, #2a2a33);
}

/* Japanese needs its own line height: the glyphs are taller and denser
   than Latin text, and the body rhythm set for English runs them
   together. */
.wty-sec[lang="ja"] p {
    line-height: 1.95;
}

/* The warrantor block closes the document, so it is set apart rather
   than running on from the Japanese section above it. */
.wty-warrantor .wty-body {
    padding: 20px 24px;
    border: 1px solid var(--color-border, #d2d2d7);
    border-radius: var(--radius-card, 12px);
    background: var(--color-bg-alt, #f5f5f7);
}

.wty-warrantor .sup-address {
    margin: 0 0 10px;
    font-style: normal;
    line-height: 1.7;
}

.wty-cta {
    margin: 28px 0 0;
}

/* Below the breakpoint the rail has nowhere to go, so the heading
   returns to sitting above its own text and stops being sticky --
   a heading pinned to the top of a phone screen eats the reading area. */
@media (max-width: 860px) {
    .wty-sec {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .wty-sec > .sup-h2 {
        position: static;
        margin-bottom: 16px;
    }
}

@media (max-width: 640px) {
    .wty-sec {
        padding-top: 28px;
        margin-top: 28px;
    }

    .wty-legal {
        font-size: 13px;
    }
}

/* Printed warranties are a real thing -- people file them with the
   receipt. Drop the site chrome and the call to action, which are
   useless on paper, and let the document run full width. */
@media print {
    .site-header,
    .kb-hero,
    .wty-back,
    .wty-cta,
    .site-footer {
        display: none !important;
    }

    .wty-wrap {
        max-width: none;
        padding-inline: 0;
    }

    .wty-sec {
        break-inside: avoid;
    }
}