/* ══════════════════════════════════════════════════════════════════════
   WordPress-only corrections.

   Everything above this file is the prototype's stylesheet, kept close to
   byte-for-byte so the theme can be diffed against it. This file holds the
   rules the static prototype could not have needed — the admin bar, and the
   markup WordPress generates that the design never saw.
   ══════════════════════════════════════════════════════════════════════ */

/* The header is position:fixed, so the admin bar sits on top of it and cuts
   the logo in half. Only logged-in users see this, which is exactly why it
   goes unnoticed: the owner reviews the site logged in. */
body.admin-bar .site-head{top:32px}
body.admin-bar .menu{top:32px}

@media screen and (max-width:782px){
  /* 🔴 Below 782px WordPress switches the admin bar to position:absolute, so it scrolls away with
     the document — but the header stays pinned at top:46px, and that 46px then becomes a window
     showing the page sliding past ABOVE the header. It reads as a broken hero: the first thing in
     the hero, the kicker pill, appears as a sliver over the top of the site header.

     Only logged-in users on a phone see it, which is precisely the case that goes unreported — and
     precisely how the owner reviews the site. Pinning the bar back is one line and costs a visitor
     nothing, because a visitor has no admin bar and none of these rules apply to them. The
     alternative, dropping the header to top:0, hides the admin bar entirely below 46px of scroll. */
  #wpadminbar{position:fixed}
  body.admin-bar .site-head{top:46px}
  body.admin-bar .menu{top:46px}
}

/* Two bands of the SAME tone in a row read as one block, so their padding must
   not stack into a hole in the page.

   The prototype had one "what we repair" section holding two grids; in the
   builder that is two card sections, each with its own band padding. The join
   is marked in PHP rather than with `.band + .band`, because `band-light` also
   carries `band` — that selector collapses the gap between *different* bands
   too, which is exactly the spacing the design relies on. */
   Both sides of the join are collapsed. What is left between the two grids is
   the 1.4rem that .feature-pair already carries as its own margin-bottom —
   exactly the spacing the prototype had inside its single section. Collapsing
   only one side leaves a full band of empty page, which still reads as a seam. */
.band-join{padding-top:0}
.band-join-next{padding-bottom:0}

/* A heading right after a join still needs air above it. */
.band-join > .wrap > .sec-head{padding-top:clamp(2rem,1.4rem + 2vw,3rem)}

/* The card grids are lists now, because that is what they are. The prototype
   used a div of articles, so the list's own styling has to be undone. */
ul.feature-pair{list-style:none;margin-left:0;padding-left:0}
ul.feature-pair > li{margin:0}

/* One link per card, stretched over the whole card.

   The alternative — wrapping the card in an <a> — nests links and makes a
   screen reader announce the entire card as one link name. Linking the heading
   instead puts two links to the same page in one card and underlines a heading
   the design leaves plain. */
.feature-card{position:relative}
.card-link::after{content:"";position:absolute;inset:0;z-index:1}
.feature-card:focus-within{border-color:var(--brass)}

/* Anything genuinely interactive inside a card must stay above the stretched
   area, or it becomes unclickable. */
.feature-card a:not(.card-link),
.feature-card button{position:relative;z-index:2}

/* Attachment images: the prototype hand-wrote <picture> with fixed dimensions;
   WordPress prints <img> with width/height attributes and its own classes. */
.hero-media img,
.showcase-media img{width:100%;height:100%;object-fit:cover;display:block}

.feature-card figure img{width:100%;height:auto;display:block}

/* Editor content inside archives and singles. The design has no long-form
   prose block yet, so this is the readable minimum until the article
   templates land in Ф4. */
.entry{max-width:72ch;color:var(--text-70);font-size:var(--step-0);line-height:1.7}
.entry > * + *{margin-top:1.1em}
.entry h2,
.entry h3{color:var(--text);font-family:var(--display);line-height:1.2;margin-top:1.8em}
.entry a{color:var(--brass)}
.entry img{max-width:100%;height:auto;border-radius:var(--r)}
.entry ul,
.entry ol{padding-left:1.3em;list-style:revert}

/* Pagination on archive templates. */
.pagination{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:2.5rem}
.pagination .page-numbers{
  padding:.5rem .9rem;border:1px solid var(--line);border-radius:100px;
  text-decoration:none;color:var(--text-70);font-size:var(--step--1);
  /* It is a pill and it is a link: it takes the pill recipe like every other one. */
  transition:color .2s,border-color .2s,background .2s,transform .2s;
}
.pagination a.page-numbers:hover{
  color:var(--text);border-color:var(--brass);background:var(--brass-soft);transform:translateY(-2px);
}
.pagination .current{background:var(--brass);color:var(--night);border-color:transparent}