/* Additions on top of theme.css. Kept separate so the exported theme stays untouched. */

/* Keyboard skip link — the export had no way past the nav. */
.ps-skiplink {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  z-index: 1080;
  padding: 0.6rem 1rem;
  background: #fff;
  border-radius: 0.5rem;
  box-shadow: 0 0.25rem 1rem rgba(0, 0, 0, 0.2);
  font-weight: 600;
  text-decoration: none;
}

.ps-footer-blurb {
  max-width: 34rem;
  opacity: 0.75;
  font-size: 0.95rem;
  line-height: 1.6;
}

/* City page ------------------------------------------------------------- */

.ps-city-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  margin: 0 0 1.5rem;
  padding: 0;
  list-style: none;
  font-size: 0.95rem;
}

.ps-city-meta li {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.ps-city-meta strong {
  font-weight: 600;
}

.ps-city-body > p {
  margin-bottom: 1.1rem;
  line-height: 1.75;
}

.ps-city-body > p:last-child {
  margin-bottom: 0;
}

/* Contact form ---------------------------------------------------------- */

.ps-form {
  display: grid;
  gap: 1.1rem;
}

.ps-form-row {
  display: grid;
  gap: 1.1rem;
}

@media (min-width: 576px) {
  .ps-form-row-2 {
    grid-template-columns: 1fr 1fr;
  }
}

.ps-form label {
  display: block;
  margin-bottom: 0.35rem;
  font-weight: 600;
  font-size: 0.95rem;
}

.ps-form .form-control:focus,
.ps-form .form-select:focus {
  border-color: var(--bs-primary);
  box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.25);
}

.ps-form-hint {
  font-size: 0.875rem;
  opacity: 0.7;
}

.ps-form-error {
  color: #b02a37;
  font-size: 0.875rem;
  margin-top: 0.3rem;
}

.ps-form .is-invalid {
  border-color: #b02a37;
}

/* Honeypot: hidden from people, visible to bots. Deliberately not display:none,
   which some bots detect and skip. */
.ps-hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.ps-alert {
  padding: 1rem 1.25rem;
  border-radius: 0.75rem;
  margin-bottom: 1.5rem;
}

.ps-alert-success {
  background: rgb(53 112 74 / 0.10);
  border: 1px solid rgb(53 112 74 / 0.35);
}

.ps-alert-error {
  background: rgba(176, 42, 55, 0.08);
  border: 1px solid rgba(176, 42, 55, 0.35);
}

/* Legal pages ----------------------------------------------------------- */

.ps-legal {
  max-width: 46rem;
}

.ps-legal h2 {
  margin-top: 2.25rem;
  margin-bottom: 0.75rem;
  font-size: 1.35rem;
  font-weight: 700;
}

.ps-legal p,
.ps-legal li {
  line-height: 1.75;
}

.ps-legal ul,
.ps-legal ol {
  margin-bottom: 1.25rem;
}

/* Empty states ---------------------------------------------------------- */

.ps-empty {
  padding: 3rem 1.5rem;
  text-align: center;
  border: 1px dashed var(--ps-line, #E2DCCD);
  border-radius: 1rem;
}

.ps-empty p {
  margin: 0;
  opacity: 0.7;
}

/* Footer brand: the circular crest.
   112px is a legibility floor, not a taste call — the ring lettering ("THE
   DOGMAN", "EST. 2023") is fine line art that turns to mush below about 100px.
   Do not shrink this without checking the type still reads. */
.ps-footer-brand img {
  height: 112px;
  width: auto;
  max-width: 100%;
  display: block;
}

@media (max-width: 575.98px) {
  .ps-footer-brand img {
    height: 96px;
  }
}

/* Coverage list ---------------------------------------------------------- */

.ps-coverage-map {
  /* Capped so the map illustrates the area rather than dominating the page. */
  max-width: 44rem;
  margin: 0 auto;
}

.ps-coverage-map img {
  width: 100%;
  height: auto;
  border-radius: 1rem;
  display: block;
}

.ps-coverage-map figcaption {
  margin-top: 0.75rem;
  font-size: 0.875rem;
  text-align: center;
  opacity: 0.7;
}

.ps-coverage-list {
  display: grid;
  gap: 1.75rem;
}

@media (min-width: 768px) {
  .ps-coverage-list {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.75rem 2.5rem;
  }
}

.ps-coverage-county h3 {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 0.4rem;
}

/* Running text rather than a bulleted keyword dump: this is a reference list,
   not a set of promises about pages that exist. */
.ps-coverage-county p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.8;
  opacity: 0.85;
}

.ps-coverage-note {
  font-size: 0.95rem;
  line-height: 1.8;
  opacity: 0.85;
}

/* Certification badges --------------------------------------------------- */

.ps-credentials {
  background: var(--bs-light, #FAF7F1);
  padding: 2.25rem 0;
  border-top: 1px solid var(--ps-line, #E2DCCD);
}

.ps-credentials-label {
  margin: 0 0 1.25rem;
  text-align: center;
  color: var(--ps-gold-text, #96600F);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.ps-credentials-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1.5rem 3rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Normalised by height: the trimmed marks are a wide oval, a landscape mark and
   a circle, so matching heights is what makes them read as a set. 84px rather
   than the 72px this started at — the Master Course mark carries three lines of
   caption where the other two carry a word or two, and at 72px that caption
   stopped resolving as text at all. */
.ps-credentials-list img {
  height: 84px;
  width: auto;
  display: block;
}

@media (max-width: 575.98px) {
  .ps-credentials-list {
    gap: 1.25rem 2rem;
  }

  .ps-credentials-list img {
    height: 64px;
  }
}

/* Call-to-action band ---------------------------------------------------- */

/* theme.css styles .ps-cta with background and colour only, no padding — the
   original export supplied it via Bootstrap's `py-5` utility in the markup.
   Setting it here means the band cannot lose its spacing again if the utility
   class is dropped. Slightly tighter than .ps-section, since this is a short
   band rather than a full content section. */
.ps-cta {
  padding: clamp(64px, 7vw, 96px) 0;
}

/* The heading carries the gap to the button on its own — the supporting line
   that used to sit between them was removed, and 0.75rem left the button
   crowding the heading. */
.ps-cta h2 {
  margin-bottom: 2rem;
}

.ps-cta p {
  margin-bottom: 2rem;
}

/* Service detail pages ---------------------------------------------------- */

/* These classes were emitted by services/detail.php from the day it was
   written, but never styled — .ps-svc-aside-media in particular resolved to
   761x0px, so the service photo was loaded and then rendered at zero height on
   every service page. That, plus a sidebar barely a third the height of the
   body column, is what made the pages read as empty. */

.ps-svc-sidebar {
  position: sticky;
  top: calc(var(--ps-header-h) + 24px);
}

@media (max-width: 991.98px) {
  /* Below the two-column breakpoint the sidebar is just the next block down,
     and sticky would pin it over the content behind it. */
  .ps-svc-sidebar {
    position: static;
  }
}

.ps-svc-aside {
  overflow: hidden;
  border: 1px solid var(--ps-line);
  border-radius: 18px;
  background: var(--ps-surface-raised);
  box-shadow: var(--ps-shadow-sm);
}

/* The fix: an aspect-ratio box gives the background image somewhere to render. */
.ps-svc-aside-media {
  aspect-ratio: 4 / 3;
  background-color: var(--ps-ink-strong);
  background-position: center;
  background-size: cover;
}

.ps-svc-aside-body {
  padding: 26px 26px 28px;
}

.ps-svc-aside-body p {
  margin: 0 0 1rem;
  color: var(--ps-muted);
  font-size: 0.95rem;
  line-height: 1.6;
}

/* Definition lists in the body column, hung off a gold rule. */
.ps-svc-points {
  margin: 1.5rem 0 0;
  padding-left: 1.25rem;
  border-left: 2px solid var(--ps-gold-ui);
}

.ps-svc-points dt {
  color: var(--ps-ink-strong);
  font-weight: 750;
  font-size: 1.02rem;
}

.ps-svc-points dd {
  margin: 0.25rem 0 1.15rem;
  color: var(--ps-muted);
  line-height: 1.7;
}

.ps-svc-points dd:last-child {
  margin-bottom: 0;
}

.ps-svc-bullets {
  margin: 1.25rem 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.85rem;
}

.ps-svc-bullets li {
  position: relative;
  padding-left: 1.9rem;
  line-height: 1.7;
}

/* A gold tick drawn in CSS — one rule beats shipping an icon for four bullets. */
.ps-svc-bullets li::before {
  content: "";
  position: absolute;
  top: 0.42em;
  left: 0.25rem;
  width: 0.46rem;
  height: 0.82rem;
  border: solid var(--ps-gold-ui);
  border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg);
}

.ps-svc-other {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.5rem;
}

.ps-svc-other a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.85rem 1.1rem;
  border: 1px solid var(--ps-line);
  border-radius: 12px;
  background: var(--ps-surface-raised);
  color: var(--ps-ink-strong);
  font-weight: 650;
  font-size: 0.95rem;
  text-decoration: none;
  transition: border-color 0.18s ease, color 0.18s ease, transform 0.18s var(--ps-ease);
}

.ps-svc-other a svg {
  width: 15px;
  height: 15px;
  flex: none;
  color: var(--ps-gold-ui);
  transition: transform 0.18s var(--ps-ease);
}

.ps-svc-other a:hover {
  border-color: var(--ps-accent);
  color: var(--ps-accent);
  transform: translateX(2px);
}

.ps-svc-other a:hover svg {
  transform: translateX(3px);
}

/* Sidebar trust panel ----------------------------------------------------- */

.ps-svc-trust {
  margin-top: 1.5rem;
  padding: 22px 24px 24px;
  border-radius: 18px;
  background: var(--ps-ink-strong);
  color: var(--ps-on-dark-body);
}

.ps-svc-trust-label {
  margin: 0 0 0.9rem;
  color: var(--ps-gold);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.ps-svc-trust ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.7rem;
}

.ps-svc-trust li {
  position: relative;
  padding-left: 1.6rem;
  font-size: 0.93rem;
  line-height: 1.55;
}

.ps-svc-trust li::before {
  content: "";
  position: absolute;
  top: 0.36em;
  left: 0.2rem;
  width: 0.4rem;
  height: 0.72rem;
  border: solid var(--ps-gold);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* Sidebar review ---------------------------------------------------------- */

.ps-svc-quote {
  margin: 0;
  padding: 24px 26px 26px;
  border-radius: 18px;
  border: 1px solid var(--ps-line);
  background: var(--ps-surface-raised);
  box-shadow: var(--ps-shadow-sm);
}

.ps-svc-quote .ps-stars {
  display: block;
  margin-bottom: 0.75rem;
  font-size: 1rem;
}

.ps-svc-quote blockquote {
  margin: 0 0 0.9rem;
  font-size: 0.95rem;
}

.ps-svc-quote figcaption {
  color: var(--ps-ink-strong);
  font-size: 0.9rem;
  font-weight: 800;
}

/* Numbered process band --------------------------------------------------- */

.ps-svc-steps {
  background: var(--ps-surface);
}

.ps-svc-step {
  height: 100%;
  padding: 28px 26px 30px;
  border-radius: 18px;
  border: 1px solid var(--ps-line);
  background: var(--ps-surface-raised);
  box-shadow: var(--ps-shadow-sm);
}

.ps-svc-step-num {
  display: block;
  margin-bottom: 0.6rem;
  color: var(--ps-gold-ui);
  font-size: 2rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

.ps-svc-step h3 {
  margin: 0 0 0.5rem;
  font-size: 1.1rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.ps-svc-step p {
  margin: 0;
  color: var(--ps-muted);
  font-size: 0.95rem;
  line-height: 1.65;
}

/* Photo band -------------------------------------------------------------- */

/* The supplied photos are nearly all portrait phone shots, so the tiles crop to
   a shared 4:5 and let object-fit do the work — mixing native ratios in a row
   made the band look like an accident rather than a set. */
.ps-svc-shot {
  margin: 0;
  overflow: hidden;
  border-radius: 18px;
  box-shadow: var(--ps-shadow-sm);
}

.ps-svc-shot img {
  display: block;
  width: 100%;
  /* height:auto is load-bearing, not tidiness. The width/height attributes on
     the tag are presentational hints, so without it the used height is the
     file's own pixel height (1440px) and aspect-ratio never applies — both
     dimensions being definite makes the browser ignore the ratio entirely. */
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  transition: transform 0.5s var(--ps-ease);
}

.ps-svc-shot:hover img {
  transform: scale(1.04);
}

/* The aggression page's third tile is a certificate, not a photograph —
   cropping it to 4:5 would cut the wording off, so it is contained and
   padded on a white card instead. */
.ps-svc-shot-doc img {
  object-fit: contain;
  padding: 9%;
  background: var(--ps-surface-raised);
}

.ps-svc-shot-doc {
  border: 1px solid var(--ps-line);
}

.ps-svc-shot-doc:hover img {
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .ps-svc-shot img,
  .ps-svc-shot:hover img {
    transition: none;
    transform: none;
  }
}

/* Full-bleed photo band --------------------------------------------------- */

.ps-svc-wide {
  position: relative;
  isolation: isolate;
  display: grid;
  align-items: center;
  min-height: clamp(360px, 46vw, 560px);
  background: var(--ps-ink-strong);
}

.ps-svc-wide-img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Veil weighted to the left, where the copy sits, so the picture stays visible
   on the right instead of being flattened under a uniform wash. */
.ps-svc-wide::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg,
    rgb(var(--ps-veil-rgb) / 0.94) 0%,
    rgb(var(--ps-veil-rgb) / 0.82) 42%,
    rgb(var(--ps-veil-rgb) / 0.34) 100%);
}

.ps-svc-wide-inner {
  padding-top: clamp(48px, 6vw, 88px);
  padding-bottom: clamp(48px, 6vw, 88px);
}

.ps-svc-wide-copy {
  max-width: 34rem;
}

.ps-svc-wide-copy h2 {
  margin: 0 0 1rem;
  color: #FBF8F1;
  font-size: clamp(28px, 3.4vw, 44px);
  line-height: 1.1;
}

.ps-svc-wide-copy p {
  margin: 0 0 1.75rem;
  color: var(--ps-on-dark-body);
  font-size: 1.05rem;
  line-height: 1.65;
}

/* Service comparison table ------------------------------------------------ */

/* Wide content scrolls inside its own box rather than pushing the page sideways. */
.ps-svc-compare {
  width: 100%;
  overflow-x: auto;
}

.ps-svc-compare table {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
}

.ps-svc-compare th,
.ps-svc-compare td {
  padding: 1rem 1.1rem;
  border-bottom: 1px solid var(--ps-line);
  text-align: left;
  vertical-align: top;
  font-size: 0.95rem;
  line-height: 1.6;
}

.ps-svc-compare thead th {
  border-bottom: 2px solid var(--ps-gold-ui);
  color: var(--ps-ink-strong);
  font-size: 1rem;
  font-weight: 800;
}

.ps-svc-compare tbody th {
  width: 12rem;
  color: var(--ps-gold-text);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.ps-svc-compare td {
  color: var(--ps-muted);
}

.ps-svc-compare tbody tr:last-child th,
.ps-svc-compare tbody tr:last-child td {
  border-bottom: 0;
}

/* Wide-gutter rows on narrow screens ------------------------------------- */

/* Bootstrap's .row carries negative side margins of half its gutter, and the
   .container is expected to absorb them with its own padding. `g-5` raises the
   gutter to 3rem (-24px a side) but does not touch the container's 12px, so
   every `row g-5` hung 12px past the viewport and gave the whole page a 13px
   horizontal scroll on a 375px screen. It affects the five two-column pages —
   services, contact, about, checkin entries, city pages.

   Below the lg breakpoint those columns are stacked full width, so the
   horizontal gutter buys nothing; dropping it there removes the overflow.
   --bs-gutter-y is untouched, so the vertical spacing between the stacked
   columns stays as it was. */
@media (max-width: 991.98px) {
  .container > .row.g-5,
  .container > .row.gx-5 {
    --bs-gutter-x: 1.5rem;
  }
}

/* Service-area page ------------------------------------------------------- */

/* The page used to run 7,476px for a fairly small amount of content. Two causes:
   six counties each got a full-width heading plus a three-column grid, and four
   of them hold one or two cities — so most of that section was empty row. And
   every band was a full .ps-section on the same white ground, stacking 112px of
   padding against 112px with nothing to separate them. */

/* Multi-column, not grid. The cards are wildly uneven — Kane holds ten cities
   and three counties hold one — so a grid either stretches them all to the
   tallest (rebuilding the empty space) or leaves ragged holes under the short
   ones. Columns pack them vertically with no gaps, which is the whole point. */
.ps-county-grid {
  /* Three, not four: Kane alone is 392px and indivisible, so four columns
     leave a stray short card in the last one. Three balance to ~380px each. */
  columns: 3 280px;
  column-gap: 1.25rem;
}

@media (max-width: 991.98px) {
  .ps-county-grid { columns: 2 230px; }
}

@media (max-width: 575.98px) {
  .ps-county-grid { columns: 1; }
}

.ps-county-card {
  /* Without this a card splits across a column boundary mid-list. */
  break-inside: avoid;
  margin-bottom: 1.25rem;
  padding: 22px 24px 24px;
  border: 1px solid var(--ps-line);
  border-radius: 16px;
  background: var(--ps-surface-raised);
  box-shadow: var(--ps-shadow-sm);
}

.ps-county-card h3 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin: 0 0 0.9rem;
  padding-bottom: 0.7rem;
  border-bottom: 2px solid var(--ps-gold-ui);
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}

/* City count, so a one-city county reads as deliberate rather than unfinished. */
.ps-county-card h3 span {
  flex: none;
  min-width: 1.55rem;
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  background: var(--ps-gold-soft);
  color: var(--ps-gold-text);
  font-size: 0.78rem;
  font-weight: 800;
  text-align: center;
}

.ps-county-card ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.4rem;
}

.ps-county-card a {
  color: var(--ps-ink-strong);
  font-size: 0.95rem;
  font-weight: 500;
  text-decoration: none;
}

.ps-county-card a::after {
  content: "\00a0+";
  color: var(--ps-gold-ui);
  font-weight: 700;
}

.ps-county-card a:hover {
  color: var(--ps-accent);
}

/* Coverage closing notes, two-up instead of a section of their own. */
.ps-coverage-foot {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.75rem 2.5rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--ps-line);
}

.ps-coverage-foot h3 {
  margin: 0 0 0.5rem;
  font-size: 1rem;
  font-weight: 800;
}

.ps-coverage-foot .ps-coverage-note {
  margin: 0;
}

/* The map panel is a fixed 4:3 in the theme; inside .ps-area-band it should
   fill the column it is given rather than dictate its own height. */
.ps-area-band .ps-area-map iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.ps-area-band .ps-coverage-map {
  max-width: none;
  margin: 0;
}

/* Band rhythm ------------------------------------------------------------- */

/* Consecutive .ps-section bands on the same ground read as one long scroll of
   nothing. Tinting alternate bands turns the gaps into structure. */
.ps-area {
  background: var(--ps-surface);
}

/* Where two same-ground sections do still meet, collapse the doubled padding
   rather than paying 112px twice for one visual gap. */
.ps-section + .ps-section:not(.ps-area):not(.ps-reviews):not(.ps-coverage) {
  padding-top: clamp(40px, 5vw, 72px);
}

/* Shop ------------------------------------------------------------------- */

/* Books are sold on Amazon, so each row is really one big outbound link with a
   cover beside it. Laid out as rows rather than a card grid: the blurb is the
   part that sells the book, and a three-up grid squeezes it down to two lines. */
.ps-shop-list {
  display: grid;
  gap: clamp(20px, 3vw, 32px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.ps-shop-item {
  display: grid;
  grid-template-columns: minmax(0, 200px) minmax(0, 1fr);
  gap: clamp(20px, 3vw, 36px);
  align-items: start;
  padding: clamp(20px, 3vw, 30px);
  border: 1px solid var(--ps-line);
  border-radius: 18px;
  background: var(--ps-surface-raised);
  box-shadow: var(--ps-shadow-sm);
}

/* The cover repeats the title link that follows it, so it is hidden from
   assistive tech and taken out of the tab order rather than read twice. */
.ps-shop-cover img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
  /* Print covers carry their own white margin; a hairline stops the pale ones
     from bleeding into the card behind them. */
  border: 1px solid var(--ps-line);
  box-shadow: 0 10px 30px rgb(11 31 18 / 0.13);
}

.ps-shop-format {
  margin: 0 0 0.35rem;
  color: var(--ps-gold-text);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.ps-shop-title {
  margin: 0 0 0.2rem;
  font-size: clamp(1.2rem, 2.2vw, 1.5rem);
  font-weight: 800;
  color: var(--ps-ink-strong);
}

.ps-shop-sub {
  margin: 0 0 0.9rem;
  color: var(--ps-muted);
  font-weight: 600;
}

.ps-shop-blurb {
  margin: 0 0 1.25rem;
}

.ps-shop-store {
  color: var(--ps-muted);
}

@media (max-width: 575.98px) {
  /* Single column, and the cover shrinks to a thumbnail rather than eating the
     top half of the screen before any words arrive. */
  .ps-shop-item {
    grid-template-columns: minmax(0, 1fr);
    justify-items: start;
  }

  .ps-shop-cover {
    max-width: 150px;
  }
}