/* ==========================================================================
   Takszu — WordPress additions

   Everything else in css/ is the static build, unchanged. This file only
   covers what a CMS introduces and a fixed mock-up never had to:
   ========================================================================== */

/* The admin bar sits on top of the page for a logged-in editor; the header
   is absolutely positioned from the top, so move it below the bar. */
.admin-bar .site-header {
  inset-block-start: var(--wp-admin--admin-bar--height, 32px);
}

/* Rows of fewer than three cards. The static rows always held exactly three
   and used `flex: 1 1 0`, which would stretch a lone card to full width
   once a piece is sold. Fixing each card at a third of the row gives the
   identical layout for three cards and the right one for one or two. */
@media (min-width: 1025px) {
  .catalogue__row > *,
  .related__row > * {
    flex: 0 0 calc((100% - 2 * var(--space-40)) / 3);
  }
}

/* A sold piece: the status dot goes quiet. */
.product__stock--sold .product__stock-dot {
  background-color: var(--color-muted);
}

/* --------------------------------------------------------------------------
   Plain pages (legal notices, anything created without a TAKSZU template):
   a readable column in the site's own typography, below the navbar.
   -------------------------------------------------------------------------- */
.page--default main {
  padding-block: calc(var(--navbar-height) + var(--space-64)) var(--space-80);
}

.prose {
  max-width: 720px;
}

.prose > * + * {
  margin-block-start: 1em;
}

.prose h1 {
  font-family: var(--font-display);
  font-size: 40px;
  font-weight: var(--weight-regular);
  line-height: 1.2;
  margin-block-end: var(--space-32);
}

.prose h2,
.prose h3 {
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  line-height: 1.3;
  margin-block-start: 1.6em;
}

.prose a {
  text-decoration: underline;
}

.prose ul,
.prose ol {
  padding-inline-start: 1.2em;
  list-style: revert;
}

/* --------------------------------------------------------------------------
   Narrow screens (≤ 860px): the header can wrap, so it cannot overlay.

   On desktop the header is an 80px bar laid over the page, and each page
   reserves exactly that much (--navbar-height / --header-clearance). Once
   the links wrap, the header grows past 80px and covered the top of every
   page — the "Disponibilidad inmediata" kicker, the piece breadcrumbs. This
   was already true of the static build's stacked phone header.

   So below 861px the header joins the document flow and the reserved space
   is released inside <main> (the header keeps its own 80px minimum). It also
   stacks from 860px rather than 640px, which keeps all five links on one
   centred row down to phone width instead of wrapping beside the logo.
   -------------------------------------------------------------------------- */
@media (max-width: 860px) {
  .site-header,
  .admin-bar .site-header {
    position: relative;
    inset-block-start: auto;
  }

  main {
    --navbar-height: 0px;
    --header-clearance: 0px;
  }

  .site-header__inner {
    flex-direction: column;
    align-items: center;
    gap: var(--space-8);
  }

  .site-nav__list { justify-content: center; }

  .site-lang { margin-inline-start: 0; }
}