@charset "UTF-8";
/*
 * ==========================================================================
 * Modernisation layer — loaded AFTER style.css.
 * ==========================================================================
 *
 * style.css is the classic theme's CSS, ported verbatim. Nothing in it is
 * edited, so the original design intent stays readable and this whole file can
 * be dropped to return to the 2012 rendering exactly.
 *
 * Scope, deliberately narrow: make the fixed 960px layout fluid, make the type
 * readable, and give touch targets a sensible size. The palette, the three
 * typefaces, the sprite artwork, the page structure and the block markup are
 * all untouched — this changes how the existing design *fits*, not what it is.
 *
 * The classic was desktop-first, so these are max-width overrides layered on
 * top rather than a mobile-first rewrite.
 */

/* --------------------------------------------------------------------------
   1. Fluid foundations
   -------------------------------------------------------------------------- */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    /* Stop iOS Safari inflating text in landscape. */
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

/* The one change that makes the site fit a phone at all: the classic pinned
   this to exactly 960px, so a 390px viewport got 960px of content and a
   horizontal scrollbar. */
#container {
    width: auto;
    max-width: 960px;
    margin: 0 auto;
    padding-inline: 16px;
}

/* Nothing may exceed its column. Content images in posts carry width/height
   attributes from 2012 that are wider than a phone. */
img,
video,
iframe,
embed,
object {
    max-width: 100%;
    height: auto;
}

/* Wide content tables scroll in their own box rather than forcing the page
   sideways — the page body must never scroll horizontally. */
.wp-block-post-content table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
}

/* --------------------------------------------------------------------------
   2. Readable type
   --------------------------------------------------------------------------
   The classic set body copy to 12px with 1.3em leading, which is the single
   biggest reason the site reads as dated — it is well below the ~16px that is
   now the norm and is genuinely hard to read on a phone.

   Heading sizes are deliberately NOT touched: the classic sets them in `em`
   against the browser default (h1 1.7em, h2 1.3em, h3 1.1em), so they already
   compute off 16px and the existing hierarchy is preserved exactly.
   -------------------------------------------------------------------------- */

p,
ol,
ul,
dl,
table {
    font-size: 1rem;
    line-height: 1.55;
}

main {
    font-size: 1rem;
    line-height: 1.55;
}

/* Long words and URLs in 2012 copy should not punch out of a narrow column. */
p,
li,
h1, h2, h3, h4, h5, h6 {
    overflow-wrap: break-word;
}

/* Slightly looser tracking under the display face at large sizes reads better
   than the browser default; the face itself is unchanged. */
.page-product h2 {
    letter-spacing: 0.01em;
}

/* --------------------------------------------------------------------------
   3. Accessibility the classic lacked
   -------------------------------------------------------------------------- */

:where(a, button, input, textarea, summary):focus-visible {
    outline: 2px solid #1982d1;
    outline-offset: 2px;
}

/* The classic removed focus outlines outright (`:focus { outline: 0 }` in
   reset.css), leaving keyboard users with no visible position. Restore it for
   keyboard focus only, so mouse users see no change. */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Visually hidden but available to screen readers. Core only ships this for its
   own skip link (`.skip-link.screen-reader-text`), not as a general utility. */
.screen-reader-text {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* --------------------------------------------------------------------------
   3b. Star ratings
   --------------------------------------------------------------------------
   Replaces Stars.gif, a 77x12 bitmap of five red stars. Emoji carry their own
   colour, so the size is all that needs setting — kept close to the original
   footprint rather than letting five full-size emoji dominate the quote.
   -------------------------------------------------------------------------- */

.dsh-stars {
    font-size: 0.85rem;
    line-height: 1;
    letter-spacing: 0.08em;
    margin: 0 0 0.5em;
}

/* --------------------------------------------------------------------------
   4. Header: wrap instead of overflow
   -------------------------------------------------------------------------- */

@media (max-width: 60em) {
    header.wp-block-template-part {
        flex-wrap: wrap;
        gap: 8px 16px;
        justify-content: center;
        padding-block: 8px;
    }

    header nav {
        align-self: center;
        width: 100%;
    }

    header nav ul.wp-block-navigation__container,
    header .wp-block-navigation__container {
        flex-wrap: wrap;
        justify-content: center;
        margin-bottom: 12px;
        row-gap: 4px;
    }

    header nav ul li {
        margin-left: 0;
    }

    /* Comfortable tap targets — the classic's 2px/4px padding is far below the
       ~44px recommendation. */
    header .wp-block-navigation-item__content.wp-block-navigation-item__content {
        display: inline-block;
        padding: 10px 12px;
        font-size: 1rem;
    }
}

/* --------------------------------------------------------------------------
   5. Section sidebar: a row of links above the content on small screens
   --------------------------------------------------------------------------
   Stacked as a tall vertical list it pushed the actual page content two
   screenfuls down. Core already stacks wp-block-columns below 782px, so this
   only needs to change the list's own direction.
   -------------------------------------------------------------------------- */

@media (max-width: 48em) {
    /* The two-column templates open with a bare <br> as a desktop spacer. With
       the columns stacked it is just dead space above the nav. */
    main > br {
        display: none;
    }

    .section-nav {
        border-bottom: 1px solid #BBB;
        padding-bottom: 4px;
        margin-bottom: 12px;
    }

    /* The spacer heading only existed to align with the title beside it. */
    .section-nav h2 {
        display: none;
    }

    .dsh-section-nav {
        display: flex;
        flex-wrap: wrap;
        gap: 2px 4px;
    }

    .dsh-section-nav__item {
        padding-left: 0;
        margin-bottom: 0;
    }

    .dsh-section-nav__item a {
        display: inline-block;
        padding: 8px 10px;
    }
}

/* --------------------------------------------------------------------------
   6. Footer: floats out, flex in
   --------------------------------------------------------------------------
   The classic footer is four floated blocks with fixed widths (an 800px strip
   and a 100px address), which cannot fit a phone. Same visual order, same
   artwork — just laid out with flex so it can wrap.
   -------------------------------------------------------------------------- */

footer.wp-block-template-part {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 12px 24px;
    padding-top: 15px;
}

.footer-address {
    float: none;
    width: auto;
    min-width: 8em;
    margin-top: 0;
    order: 1;
    text-align: right;
    font-size: 0.75rem;
}

#bottom-product-links {
    float: none;
    width: auto;
    height: auto;
    flex: 1 1 20em;
    order: 2;
    padding-left: 16px;
}

/* The 7-tin sprite is a fixed 724x240 bitmap sliced into 88px tiles, so the
   tiles cannot scale without re-cutting the artwork. They can wrap, though,
   which is enough: 4 across on a phone, all 7 on a desktop. */
#bottom-product-links ul#bottom-links {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

#bottom-product-links ul#bottom-links li {
    display: block;
}

#bottom-product-links ul#bottom-links li a {
    float: none;
    margin-right: 0;
}

.footer-logos {
    order: 4;
    flex: 1 1 100%;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding-top: 16px;
}

/* The Royal Warrant is a detailed heraldic crest, not a flat mark like BETA, X
   and Facebook — at the shared 2em it is illegible and reads as smaller than
   the others even though all four assets are square. Size it up so it carries
   the same visual weight. It is the only direct-child <img> here; the other
   three are wrapped in links. */
.footer-logos > img {
    height: 3.25em;
}

#home-disclaimer,
#disclaimer {
    float: none;
    order: 5;
    flex: 1 1 100%;
    padding-bottom: 16px;
}

@media (max-width: 48em) {
    footer.wp-block-template-part {
        gap: 16px;
    }

    .footer-address {
        order: 3;
        flex: 1 1 100%;
        text-align: left;
    }

    #bottom-product-links {
        flex: 1 1 100%;
        padding-left: 0;
        border-left: 0;
    }

    #bottom-product-links ul#bottom-links {
        justify-content: center;
    }

    .footer-logos {
        justify-content: center;
    }

    #home-disclaimer,
    #disclaimer {
        text-align: left;
        font-size: 0.7rem;
    }
}

/* --------------------------------------------------------------------------
   7. Products landing grid
   --------------------------------------------------------------------------
   Same treatment: a 960x250 sprite in 135px tiles, 945px wide in total. Wrap
   rather than rescale, so the artwork is untouched.
   -------------------------------------------------------------------------- */

#main-product-links ul#product-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
}

#main-product-links ul#product-links li {
    display: block;
}

#main-product-links ul#product-links li a {
    float: none;
}

/* Desktop: the row must NOT wrap.
   The sprite is fixed-width — 7 tins x 135px = 945px, which fitted the classic
   960px container exactly. This layer costs it 47px: 32px to the container's new
   16px side padding (leaving 928px) and 48px to the flex gap above, so the
   seventh tin dropped to a second row.
   Drop the gap and pull the row back out over the container padding, which
   restores the full 960px and reproduces the classic spacing (the original used
   floats with no gap). Below this width wrapping is what we want, so the rules
   above still apply. */
@media (min-width: 60em) {
    #main-product-links ul#product-links {
        gap: 0;
        justify-content: flex-start;
        margin-inline: -16px;
    }
}

/* --------------------------------------------------------------------------
   8. Post content on small screens
   -------------------------------------------------------------------------- */

@media (max-width: 48em) {
    /* 2012 posts float images right at fixed widths; on a phone that leaves a
       two-word-wide column of text beside them. */
    .wp-block-post-content .alignright,
    .wp-block-post-content .alignleft,
    .wp-block-post-content img[align="right"],
    .wp-block-post-content img[align="left"] {
        float: none;
        display: block;
        margin: 1em auto;
    }

    .entry-meta,
    .post-categories-tags {
        font-size: 0.8rem;
    }
}

/* --------------------------------------------------------------------------
   9. Home page columns
   -------------------------------------------------------------------------- */

@media (max-width: 48em) {
    .home-blog-header {
        padding: 10px 0;
    }

    .home-blog-list li a {
        padding: 12px 0;
        font-size: 1rem;
    }
}