/* ============================================================
   Inner pages — blog, single, page, search, 404, and the brand pages.

   Until this file existed, index.php, single.php, page.php, search.php and
   404.php emitted gps-list, gps-entry, gps-single, gps-page and gps-none and
   NOTHING in the theme styled any of them. Every one of those templates
   rendered as unformatted text on a site whose front page is fully designed.
   It became urgent rather than merely untidy the moment Partner Brands were
   made public, because that turned every brand into a real page.

   Scope: this file styles only the inside of a content column. The header,
   the footer, .section and .container are already owned by base.css and
   header.css, and every template here nests inside those -- so nothing below
   redefines page furniture, and there is no rule here that can leak onto the
   front page.

   A note on the prose block. the_content() emits whatever the editor
   produced, so the selectors under .gps-single__body / .gps-page__body are
   deliberately element-level rather than class-level: the site owner will
   never add a class, and a heading they type in the block editor has to look
   right without one.
   ============================================================ */

/* ---- Shared content column ---------------------------------
   Long-form text wants a measure. 68ch is about 75 characters at this body
   size, the upper end of what is comfortable to read; wider than that and
   the eye loses the line it is returning to. Centred rather than left-bound
   because these templates have no sidebar. */
.gps-single__body,
.gps-page__body,
.gps-entry__excerpt,
.gps-none{
  max-inline-size:68ch;
}

.gps-single__body,
.gps-page__body{
  font-size:var(--fs-base);
  line-height:var(--lh-body);
  color:var(--gps-black);
}

/* ---- Prose ------------------------------------------------- */
.gps-single__body > :first-child,
.gps-page__body > :first-child{margin-block-start:0}
.gps-single__body > :last-child,
.gps-page__body > :last-child{margin-block-end:0}

.gps-single__body p,
.gps-page__body p{margin:0 0 var(--sp-5)}

.gps-single__body h2, .gps-page__body h2,
.gps-single__body h3, .gps-page__body h3,
.gps-single__body h4, .gps-page__body h4{
  margin:var(--sp-8) 0 var(--sp-3);
  font-family:var(--font-head);
  font-weight:var(--fw-bold);
  letter-spacing:var(--tr-snug);
  line-height:var(--lh-head);
  color:var(--gps-black);
}
.gps-single__body h2, .gps-page__body h2{font-size:var(--fs-2xl)}
.gps-single__body h3, .gps-page__body h3{font-size:var(--fs-xl)}
.gps-single__body h4, .gps-page__body h4{font-size:var(--fs-lg)}

.gps-single__body ul, .gps-page__body ul,
.gps-single__body ol, .gps-page__body ol{
  margin:0 0 var(--sp-5);
  padding-inline-start:var(--sp-5);
}
/* base.css clears list markers site-wide for navigation lists. Prose is the
   one place they carry meaning, so they come back here. */
.gps-single__body ul, .gps-page__body ul{list-style:disc}
.gps-single__body ol, .gps-page__body ol{list-style:decimal}
.gps-single__body li, .gps-page__body li{margin-block-end:var(--sp-2)}

.gps-single__body a, .gps-page__body a{
  color:var(--gps-red);
  text-decoration:underline;
  /* Underlines are the only non-colour signal a link has in running text.
     Removing them and relying on red alone would fail WCAG 1.4.1. */
  text-underline-offset:.15em;
}
.gps-single__body a:hover, .gps-page__body a:hover{color:var(--gps-black)}

.gps-single__body blockquote, .gps-page__body blockquote{
  margin:var(--sp-6) 0;
  padding:var(--sp-2) 0 var(--sp-2) var(--sp-5);
  border-inline-start:3px solid var(--gps-red);
  font-size:var(--fs-lg);
}

.gps-single__body img, .gps-page__body img,
.gps-single__media img, .gps-page__media img{
  max-inline-size:100%;
  block-size:auto;
  border-radius:var(--radius-tile);
}

.gps-single__body figure, .gps-page__body figure{margin:var(--sp-6) 0}
.gps-single__body figcaption, .gps-page__body figcaption{
  margin-block-start:var(--sp-2);
  font-size:var(--fs-sm);
  color:var(--grey-600);
}

.gps-single__body code, .gps-page__body code{
  padding:.1em .35em;
  background:var(--grey-100);
  border-radius:var(--radius-tile);
  font-size:.9em;
}
.gps-single__body pre, .gps-page__body pre{
  margin:0 0 var(--sp-5);
  padding:var(--sp-4);
  background:var(--grey-100);
  border-radius:var(--radius-tile);
  /* Code does not wrap; it scrolls inside its own box rather than pushing
     the page sideways. */
  overflow-x:auto;
}

/* A table wider than the column scrolls in its own right, for the same
   reason. Without this one rule a three-column price table is the single
   most common cause of a horizontally scrolling phone page. */
.gps-single__body table, .gps-page__body table{
  inline-size:100%;
  margin:0 0 var(--sp-5);
  border-collapse:collapse;
  font-size:var(--fs-sm);
}
.gps-single__body th, .gps-page__body th,
.gps-single__body td, .gps-page__body td{
  padding:var(--sp-3);
  border:1px solid var(--grey-300);
  text-align:start;
}
.gps-single__body th, .gps-page__body th{background:var(--grey-100);font-weight:var(--fw-bold)}

/* ---- Single / page furniture -------------------------------- */
.gps-single__meta{
  margin-block-start:var(--sp-3);
  font-size:var(--fs-sm);
  color:var(--grey-600);
}
.gps-single__media,
.gps-page__media{margin-block-end:var(--sp-7)}

.gps-single__foot{
  margin-block-start:var(--sp-8);
  padding-block-start:var(--sp-5);
  border-block-start:1px solid var(--grey-300);
  font-size:var(--fs-sm);
  color:var(--grey-600);
}

.gps-single__pages,
.gps-page__pages{
  margin-block-start:var(--sp-5);
  display:flex;
  flex-wrap:wrap;
  gap:var(--sp-3);
  font-size:var(--fs-sm);
}

/* ---------- Paged archives ----------
   the_posts_pagination() emits <nav class="navigation pagination"> with a
   <div class="nav-links"> of <a|span class="page-numbers">. Four templates
   call it -- index, search, archive and taxonomy-gps_product_cat -- and
   until now nothing matched any of those classes, so every paginated archive
   printed "1 2 Next" as run-together unstyled text with the current page
   indistinguishable from the links.

   Unscoped on purpose. The .gps-nav rules below are scoped because that
   wrapper is ours and only single posts emit it; this markup is core's and
   appears on four different templates, so a scoped copy would have to be
   repeated four times and would be forgotten on the fifth.

   content.css loads on every one of those templates (inc/enqueue.php), which
   is why this lives here rather than in product-archive.css. */
.pagination{
  margin-block:var(--sp-8);
  padding-block-start:var(--sp-5);
  border-block-start:1px solid var(--grey-300);
}
.pagination .nav-links{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:var(--sp-2);
}
.pagination .page-numbers{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:2.75rem;
  min-height:2.75rem;          /* a 44px touch target, per WCAG 2.5.8 */
  padding-inline:var(--sp-3);
  border:1px solid var(--grey-300);
  border-radius:var(--radius-tile);
  font-family:var(--font-head);
  font-weight:var(--fw-bold);
  color:var(--gps-black);
  transition:background var(--dur) var(--ease),
             border-color var(--dur) var(--ease),
             color var(--dur) var(--ease);
}
/* The current page is not a link, so colour alone would be the only thing
   distinguishing it. It gets the filled treatment and, being a <span>, is
   already out of the tab order. */
.pagination .page-numbers.current{
  background:var(--gps-red);
  border-color:var(--gps-red);
  color:var(--gps-white);
}
.pagination .page-numbers.dots{
  border-color:transparent;
  color:var(--grey-600);
}
.pagination a.page-numbers:hover,
.pagination a.page-numbers:focus-visible{
  background:var(--gps-black);
  border-color:var(--gps-black);
  color:var(--gps-white);
}
@media (prefers-reduced-motion:reduce){
  .pagination .page-numbers{transition:none}
}

/* Post navigation. WordPress emits .nav-links inside .gps-nav. */
.gps-nav{
  margin-block-start:var(--sp-8);
  padding-block-start:var(--sp-5);
  border-block-start:1px solid var(--grey-300);
}
.gps-nav .nav-links{
  display:grid;
  gap:var(--sp-4);
}
@media (width >= 48rem){
  .gps-nav .nav-links{grid-template-columns:1fr 1fr}
  .gps-nav .nav-next{text-align:end}
}
.gps-nav a{font-weight:var(--fw-med);color:var(--gps-black)}
.gps-nav a:hover{color:var(--gps-red)}
.gps-nav__label{
  display:block;
  font-size:var(--fs-xs);
  letter-spacing:var(--tr-caps);
  text-transform:uppercase;
  color:var(--grey-600);
}

/* ---- Listings ----------------------------------------------
   auto-fit with a floor, so the same rule serves one result and twenty
   without a count anywhere. */
.gps-list{
  display:grid;
  gap:var(--sp-6);
  grid-template-columns:repeat(auto-fit,minmax(min(20rem,100%),1fr));
}

.gps-entry{
  display:flex;
  flex-direction:column;
  background:var(--gps-white);
  border:1px solid var(--grey-300);
  border-radius:var(--radius-card);
  overflow:hidden;
  transition:
    transform var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease),
    border-color var(--dur) var(--ease);
}
.gps-entry:hover,
.gps-entry:focus-within{
  transform:translateY(-4px);
  border-color:var(--grey-600);
  box-shadow:0 .75rem 1.5rem rgb(0 0 0 / 8%);
}

.gps-entry__media{display:block;background:var(--grey-100)}
.gps-entry__media img{
  display:block;
  inline-size:100%;
  block-size:auto;
  aspect-ratio:16/10;
  object-fit:cover;
}

.gps-entry__head{padding:var(--sp-5) var(--sp-5) 0}
.gps-entry__title{
  margin:0;
  font-family:var(--font-head);
  font-size:var(--fs-xl);
  font-weight:var(--fw-bold);
  letter-spacing:var(--tr-snug);
  line-height:var(--lh-head);
}
.gps-entry__title a{color:var(--gps-black)}
.gps-entry__title a:hover{color:var(--gps-red)}

.gps-entry__meta{
  margin-block-start:var(--sp-2);
  font-size:var(--fs-xs);
  color:var(--grey-600);
}

.gps-entry__excerpt{
  padding:var(--sp-3) var(--sp-5) 0;
  font-size:var(--fs-sm);
  line-height:var(--lh-body);
  color:var(--grey-600);
}
.gps-entry__excerpt p{margin:0}

/* margin-block-start:auto pins the link to the card's bottom edge, so a row
   of cards with uneven titles still lines its links up. */
.gps-entry__more{
  margin:auto 0 0;
  padding:var(--sp-4) var(--sp-5) var(--sp-5);
  font-size:var(--fs-sm);
  font-weight:var(--fw-med);
}
.gps-entry__more a{color:var(--gps-red)}
.gps-entry__more a:hover{color:var(--gps-black)}

/* ---- Empty states and 404 ----------------------------------- */
.gps-none__title{
  margin:0 0 var(--sp-3);
  font-family:var(--font-head);
  font-size:var(--fs-2xl);
  font-weight:var(--fw-bold);
  letter-spacing:var(--tr-snug);
}
.gps-none__lede{
  margin:0 0 var(--sp-5);
  font-size:var(--fs-lg);
  line-height:var(--lh-body);
  color:var(--grey-600);
}
.gps-none__back{margin:var(--sp-4) 0 0}
.gps-none__back a{font-weight:var(--fw-med);color:var(--gps-red)}
.gps-none__back a:hover{color:var(--gps-black)}

/* ---- The brand page -----------------------------------------
   single-gps_brand.php. A partner brand is not a blog post: it has a logo
   rather than a hero image, and no author or date worth printing. */
.gps-brandpage__logo{
  display:grid;
  place-items:center;
  max-inline-size:14rem;
  margin-block-end:var(--sp-6);
  padding:var(--sp-5);
  background:var(--grey-100);
  border:1px solid var(--grey-300);
  border-radius:var(--radius-panel);
}
.gps-brandpage__logo img{max-inline-size:100%;block-size:auto}
.gps-brandpage__logo .brand__mark{inline-size:100%;block-size:auto;color:var(--gps-black)}

.gps-brandpage__tagline{
  margin:0 0 var(--sp-6);
  font-size:var(--fs-sm);
  letter-spacing:var(--tr-caps);
  text-transform:uppercase;
  color:var(--grey-600);
}

.gps-brandpage__lines{
  margin:var(--sp-7) 0 0;
  padding:var(--sp-5);
  background:var(--grey-100);
  border-radius:var(--radius-panel);
  max-inline-size:68ch;
}
.gps-brandpage__lines ul{margin:0;padding:0;display:grid;gap:var(--sp-2)}
.gps-brandpage__lines li{
  padding-block-end:var(--sp-2);
  border-block-end:1px solid var(--grey-300);
  font-size:var(--fs-sm);
}
.gps-brandpage__lines li:last-child{border-block-end:0;padding-block-end:0}

.gps-brandpage__actions{
  margin-block-start:var(--sp-7);
  display:flex;
  flex-wrap:wrap;
  gap:var(--sp-4);
  align-items:center;
}

/* ---- The "being prepared" panel ------------------------------
   template-parts/content-preparing.php, rendered by page.php whenever a
   published page still has an empty body. gps-core publishes Careers, the
   four policies and the legal pages on activation so the footer and legal
   menus resolve; this is what fills them until the client writes one.

   It borrows the enquiry panel's shape deliberately -- muted ground, red
   top rule -- so it reads as a designed part of the site rather than as an
   error state. The 6px rule is the same weight product-single.css uses, and
   the panel sits inside .gps-page__body, which already caps its own measure. */
.gps-prep{
  margin:0;
  padding:var(--sp-6) var(--sp-5);
  background:var(--grey-100);
  border-top:6px solid var(--gps-red);
}

.gps-prep__body{
  margin:0 0 var(--sp-5);
  font-size:var(--fs-lg);
  line-height:var(--lh-body);
  color:var(--grey-600);
}

/* Wrap rather than scroll. Two uppercase buttons at --fs-sm need about 30rem
   side by side, which is wider than a 320px viewport's content box, so on the
   narrowest phones they stack instead of forcing the page to scroll sideways. */
.gps-prep__actions{
  display:flex;
  flex-wrap:wrap;
  gap:var(--sp-3);
}

/* .btn is white-space:nowrap by default, which is right in a fixed-width bar
   and wrong here: these labels are client-editable and one long translation
   would push the button past the panel. */
.gps-prep__actions .btn{
  white-space:normal;
  overflow-wrap:anywhere;
  text-align:center;
}

@media (width < 30rem){
  .gps-prep{padding:var(--sp-5) var(--sp-4)}
  .gps-prep__actions{flex-direction:column;align-items:stretch}
}

.gps-prep__contact{
  margin:var(--sp-5) 0 0;
  font-size:var(--fs-sm);
  line-height:var(--lh-body);
  color:var(--grey-600);
}
.gps-prep__contact a{
  color:var(--gps-red);
  font-weight:var(--fw-bold);
  text-decoration:underline;
  text-underline-offset:.2em;
}
.gps-prep__contact a:hover{color:var(--gps-black)}
.gps-prep__sep{margin-inline:var(--sp-2);color:var(--grey-300)}

/* Phones. An email address and a phone number do not fit on one line at 375,
   and the middle dot was being left stranded at the end of the first line with
   the number wrapped under it. Stacking the two and dropping the separator is
   what the dot was standing in for anyway -- it only ever existed to separate
   them when they shared a line. */
@media (width < 30rem){
  .gps-prep__contact a{display:block}
  .gps-prep__sep{display:none}
}