/*
 * Base layer for the migrated surface.
 *
 * Scoped to #content, the wrapper layout.html puts around page output. The site
 * header, navigation and footer render outside it and style themselves (their
 * own component files, loaded on every page), so nothing here reaches them or
 * the unmigrated pages' content.
 *
 * Specificity is deliberate throughout. Foundation is loaded before this file
 * and still applies here, so each rule below matches the specificity of the
 * Foundation rule it displaces and wins on load order. Matching rather than
 * exceeding is what keeps a single component class able to override anything
 * here. Where a comment gives a number it is (id, class, type).
 */

/* Typeface -------------------------------------------------------------------
   Foundation hard-codes its Helvetica stack on body, h1-h6, button/.button and
   a handful of components; `select` falls back to the system font. Everything
   else inherits, so those are the only elements that need naming.

   :where() contributes nothing and :is() takes its most specific argument, so
   the second rule is (0,0,1) — a tie with Foundation's own `h1,...,h6`, won on
   order, and beaten by any component class. Verified in the browser. */
/* Every migrated box sizes by its border box. Foundation sets this site-wide
   (`*, *:before, *:after`), and components (a padded image at 100% width, say)
   rely on it; stated here so the design system does not depend on Foundation
   for it. Zero specificity, the same value: nothing changes today. */
:where(#content) :where(*, *::before, *::after) {
    box-sizing: border-box;
}

/* Tts\Ui\Image\ResponsiveImage wraps an <img> in <picture> for its WebP source.
   display: contents lets the <img> lay out exactly as it did without the wrapper (a
   grid or flex item, aspect-ratio boxes). Selectors still see the <picture>: write
   `.x img`, not `.x > img`. */
:where(#content) picture {
    display: contents;
}

:where(#content) {
    font-family: var(--shop-font);
    color: var(--shop-text);
}

/* On a large screen the content area gets a faint grey page background; only the
   area itself (the header stays as it is, the footer is dark). Zero specificity, so
   anything with its own background - cards, panels, the hero - keeps it. */
@media (min-width: 1440px) {
    :where(#content) {
        background-color: var(--shop-page-background-wide);
    }

    /* layout.html's resizePageContainer() gives #pageContainer a min-height of the
       viewport minus the footer, so the footer sits at the bottom of the screen. On a
       short page (an error page) that left a white strip between #content and the
       footer. Stretching #page and #content into that space carries the grey down to
       the footer; above 1440px only, the one place the strip shows. */
    :where(#pageContainer) {
        display: flex;
        flex-direction: column;
    }

    :where(#page) {
        display: flex;
        flex: 1 0 auto;
        flex-direction: column;
    }

    :where(#content) {
        flex: 1 0 auto;
    }
}

:where(#content) :is(h1, h2, h3, h4, h5, h6, button, select) {
    font-family: var(--shop-font);
}

/* Foundation also gives every heading margin-top: .2rem, margin-bottom: .5rem,
   line-height: 1.4 and color: #222. Neutralising them here, at the same (0,0,1),
   stops each component having to unpick the same four declarations. */
:where(#content) :is(h1, h2, h3, h4, h5, h6) {
    margin: 0;
    color: inherit;
    line-height: var(--shop-leading-tight);
}

:where(#content) :is(p, ul, ol) {
    margin: 0;
}

/* Buttons --------------------------------------------------------------------
   Foundation paints every <button> as a blue block and, at (0,1,1), its
   :hover/:focus outrank any single component class — so a clicked section
   header would stay Foundation blue, since :focus persists after a mouse click.
   Handing the properties back to the UA once here means components only have to
   describe what they want, not undo what they inherited.

   The answer below is (0,1,1) too, so — exactly as for the form fields — a
   component that gives a button its own colour has to match it: write
   `button.thing`, not `.thing`. Without that the colour is correct until the
   button is clicked and then reverts for as long as focus stays on it, which is
   how the checked colour swatch came to show a dark tick until you clicked
   somewhere else. */
:where(#content) button {
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font-size: inherit;
    line-height: inherit;
    text-align: inherit;
    cursor: pointer;
}

:where(#content) button:hover,
:where(#content) button:focus {
    background: none;
    color: inherit;
}

/* Form controls --------------------------------------------------------------
   Foundation styles fields by attribute — input[type="text"], ... , textarea —
   which is (0,1,1) and beats a component class. It sets border, box-shadow,
   height, padding, margin, font-size and width, so a component that only says
   `border-radius` inherits a 2.3125rem tall grey box. Reset it here at the same
   (0,1,1) and let components describe the field they want.

   Because this rule is (0,1,1), a component styling a form control has to match
   it: write `input.thing`, not `.thing`. That is the one place on this surface
   where a component selector names an element, and it is why. */
:where(#content) :is(input[type="text"], input[type="search"], input[type="number"], textarea) {
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
    border: 0;
    box-shadow: none;
    background: none;
    color: inherit;
    font-family: var(--shop-font);
    font-size: inherit;
    line-height: inherit;
}

:where(#content) select {
    margin: 0;
    color: inherit;
}

/* Focus ----------------------------------------------------------------------
   Foundation's field :focus rule is (0,2,1) and ends in `outline: none`, so
   without an equally specific answer the search and quantity fields would have
   no visible focus at all. This rule matches that specificity, and the
   :focus-visible ring below then applies to everything.

   Keyboard users get a ring; pointer users do not, which is why this is
   :focus-visible rather than :focus. */
:where(#content) :is(input[type="text"], input[type="search"], input[type="number"], textarea):focus {
    box-shadow: none;
    background: none;
    border-color: currentColor;
}

/* Foundation's `outline: none` sits at (0,2,1), so the generic :focus-visible
   ring below - a single pseudo-class - never reached a text field. Restated at
   matching specificity so every control on this surface focuses alike. */
:where(#content) :is(input[type="text"], input[type="search"], input[type="number"], textarea):focus-visible {
    outline: 2px solid var(--shop-accent);
    outline-offset: 2px;
}

:where(#content) :focus-visible {
    outline: 2px solid var(--shop-accent);
    outline-offset: 2px;
    /* Cards and swatches clip their own contents; without this the ring is
       drawn underneath the neighbouring element. */
    position: relative;
    z-index: 1;
}

/* Range thumbs cannot be reached by the rule above: the ring has to go on the
   pseudo-element that draws the handle. The two vendor forms must stay in
   separate rules — a selector list containing one unknown pseudo-element is
   dropped whole by every browser. */
:where(#content) input[type="range"]:focus-visible::-webkit-slider-thumb {
    outline: 2px solid var(--shop-accent);
    outline-offset: 2px;
}

:where(#content) input[type="range"]:focus-visible::-moz-range-thumb {
    outline: 2px solid var(--shop-accent);
    outline-offset: 2px;
}

/* Media ---------------------------------------------------------------------- */
:where(#content) :is(img, svg) {
    display: block;
    max-width: 100%;
}

/* Only ever announced through visible text elsewhere; see the product card,
   where the link already carries the product name as a heading. */
.shop-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* Motion ---------------------------------------------------------------------
   Covers the inline transform/transition the filter sheet's drag handler writes
   onto the element, which no static rule can reach. */
@media (prefers-reduced-motion: reduce) {
    /* combined.css sets `html { scroll-behavior: smooth }`, which the scoped
       rule below cannot reach - and smooth scrolling is this page's main
       navigation gesture, since the hero and all six category cards jump to
       #webshop-inventory. Unscoped on purpose; this file loads on one page. */
    html {
        scroll-behavior: auto;
    }

    :where(#content) *,
    :where(#content) *::before,
    :where(#content) *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}