/*
 * Base layer.
 *
 * Reset, page rhythm and the two things every section reuses: the .wrap container and the
 * .section head. Also the primary button, because it appears in the hero, in the offer
 * section and in the sticky bar, so it does not belong to any one of them.
 *
 * Storefront's own stylesheet still loads on shop pages, so a handful of rules here exist
 * only to win against it. They are marked.
 *
 * Enqueue after tokens.css, before every other sheet.
 */

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

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--step-0);
  line-height: 1.6;
  color: var(--ink);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  display: block;
  height: auto;
}

button {
  font: inherit;
  color: inherit;
}

.wrap {
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: 20px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---------- Generic section ---------- */

.section {
  padding-block: 88px;
}

.section--alt {
  background: var(--bg-light);
}

.section__head {
  max-width: 640px;
  margin: 0 auto 48px;
  text-align: center;
}

.section__title {
  font-size: var(--step-4);
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-weight: 600;
  margin: 0 0 12px;
}

.section__lead {
  margin: 0;
  color: var(--ink-soft);
  font-size: var(--step-1);
}

/* ---------- Primary button ---------- */

.btn-primary {
  width: 100%;
  border: 0;
  border-radius: var(--radius-btn);
  background: var(--ink);
  color: #fff;
  font-size: var(--step-1);
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 18px 20px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: background 0.15s ease, transform 0.05s ease;
}

.btn-primary:hover {
  background: #333;
  color: #fff;
}

.btn-primary:active {
  transform: translateY(1px);
}

/* The add to cart button lives in a form so it still works without JavaScript. The form
   is layout neutral, it must not introduce a box of its own. */
.add-to-cart-form {
  margin: 0;
  display: block;
}

/* ---------- Payment badges ---------- */

.pay {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 4px;
}

.pay span {
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 4px 9px;
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
  color: var(--ink-muted);
  background: var(--surface);
}

.pay img {
  height: 20px;
  width: auto;
}

/* ---------- Logo ---------- */

/* The <symbol> definition is markup, not a picture. It must take up no space and it must
   not be the first thing a screen reader meets. The prototype did this with a style
   attribute, which is not allowed in the theme. */
.leis-logo-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.logo {
  display: block;
  height: 34px;
  width: auto;
  aspect-ratio: 444.48 / 338.28;
}

/*
 * Anchor targets clear the sticky header.
 *
 * The header is position: sticky and 73 px tall. Sections carried no scroll-margin and the
 * document no scroll-padding, so every in page link landed with the section title underneath
 * the header. On phones the gap is worse: section padding drops to 56 px there, which put the
 * heading 17 px behind the header and sliced it in half. The footer's Shop column links to
 * six of these, so it was the normal way to move around the page on a phone.
 *
 * scroll-padding-top on the root rather than scroll-margin-top on each section, so it also
 * covers :target, the browser's find in page, and any anchor added later without anyone
 * remembering this rule exists.
 */
html {
  scroll-padding-top: 88px;
}

/*
 * Wide tables scroll inside themselves instead of pushing the page sideways.
 *
 * The cookie policy lists cookie, provider, purpose and duration in four columns. At 320 px
 * that table wants 621 px, so the whole document scrolled horizontally: every paragraph on
 * the page moved when the reader dragged, and the right hand edge of the body text sat off
 * screen. The legal pages were not in the design review, which is how a page that is 621 px
 * wide on a 320 px phone went unnoticed.
 *
 * The wrapper is added server side by leis_wrap_content_tables in inc/setup.php, so it exists
 * only around tables in page content. The order summary on the checkout is laid out to fit
 * and never gets one.
 */
.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
  margin-bottom: 24px;
}

/*
 * The table keeps its own layout inside the box. Setting display: block on the table itself
 * was the first attempt and it does not work: thead and tbody stay table-header-group and
 * table-row-group, keep their intrinsic width, and the overflow reappears one level down.
 * The wrapper comes from leis_wrap_content_tables in inc/setup.php.
 */
.table-scroll > table {
  min-width: max-content;
  margin-bottom: 0;
}

/* Only visible when the box is focused from the keyboard, which is the point of tabindex. */
.table-scroll:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

/*
 * Long web addresses break rather than push the page sideways.
 *
 * The privacy and cookie documents quote full URLs, and three of them are longer than a
 * 280 px column: the Google Analytics opt out add on, the Meta ad preferences page and the
 * Meta privacy policy. A URL has no space in it, so the line could not break and the
 * document scrolled horizontally at 320 px because of three links.
 *
 * anywhere rather than break-word, because break-word only breaks when the word is alone on
 * its line. These sit mid sentence after a label and a colon, which is exactly the case
 * break-word leaves overflowing.
 */
.entry-content p,
.entry-content li,
.entry-content dd,
.entry-content td,
.entry-content th {
  overflow-wrap: anywhere;
}

/* ---------- Focus ---------- */

:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

@media (max-width: 720px) {
  .section {
    padding-block: 56px;
  }

  .section__head {
    margin-bottom: 32px;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
  }
}