/* ==========================================================================
   ProntaMano — pages app (home, about, legal pages, error pages)

   1. Service area block (includes/service_area.html)
   2. About page
   3. Legal pages (table of contents + prose)
   4. Error pages (404 / 403 / 400 / 500)
   5. Print

   Home-only styles live in home.css. Colours come from the design tokens
   in static/css/main.css.
   ========================================================================== */

/* 1. Service area -------------------------------------------------------------- */
.pm-area-list {
  display: grid;
  gap: 0.9rem 1.5rem;
  margin: 0;
}
@media (min-width: 576px) {
  .pm-area-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.pm-area-list__item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
  background: var(--pm-white);
  border: 1px solid var(--pm-border);
  border-radius: var(--pm-radius-sm);
}
.pm-area-list__item--request { border-style: dashed; }
.pm-area-list__pin {
  flex-shrink: 0;
  margin-top: 0.1rem;
  font-size: 1.2rem;
  color: var(--pm-accent-dark);
}
.pm-area-map {
  width: 100%;
  max-width: 22rem;
  height: auto;
}
@media (max-width: 575.98px) {
  .pm-area-map { max-width: 15rem; }
}

/* 2. About page ------------------------------------------------------------------ */
.pm-about-promise {
  position: relative;
  padding: clamp(1.5rem, 4vw, 2.5rem);
  color: var(--pm-white);
  background: linear-gradient(140deg, var(--pm-primary-dark), var(--pm-primary));
  border-radius: calc(var(--pm-radius) * 1.5);
  box-shadow: var(--pm-shadow);
}
.pm-about-promise blockquote { font-size: 1.25rem; font-weight: 600; line-height: 1.5; }
.pm-about-promise .bi-quote { color: var(--pm-accent); }

.pm-about-mission {
  max-width: 52rem;
  margin-inline: auto;
  text-align: center;
}
.pm-about-mission p { font-size: clamp(1.2rem, 1rem + 0.8vw, 1.6rem); font-weight: 600; line-height: 1.45; }

/* Value cards (.pm-card) fill their grid cell, so every card in a row is equally tall. */
.pm-about-value {
  height: 100%;
  padding: 1.5rem;
  text-align: center;
}
.pm-about-value p { color: var(--pm-muted); margin-bottom: 0; }

/* Numbered "how we work" list with large counters. */
.pm-about-steps {
  counter-reset: pm-about-step;
  display: grid;
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.pm-about-steps li {
  counter-increment: pm-about-step;
  position: relative;
  padding: 1.25rem 1.25rem 1.25rem 4.75rem;
  background: var(--pm-white);
  border: 1px solid var(--pm-border);
  border-radius: var(--pm-radius);
}
.pm-about-steps li::before {
  content: counter(pm-about-step);
  position: absolute;
  top: 1.1rem;
  left: 1.25rem;
  width: 2.5rem;
  height: 2.5rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--pm-primary);
  color: var(--pm-white);
  font-weight: 700;
}
.pm-about-steps h3 { font-size: 1.1rem; margin-bottom: 0.25rem; }
.pm-about-steps p { margin-bottom: 0; color: var(--pm-muted); }

/* "What we don't do" — honest limits. */
.pm-limits {
  height: 100%;
  padding: clamp(1.25rem, 3vw, 2rem);
  border-radius: var(--pm-radius);
}
.pm-limits--no { background: var(--pm-accent-soft); border: 1px solid rgba(var(--pm-accent-rgb), 0.45); }
.pm-limits--yes { background: var(--pm-primary-soft); border: 1px solid rgba(var(--pm-primary-rgb), 0.2); }
.pm-limits ul { margin: 0; padding: 0; list-style: none; }
.pm-limits li {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  margin-bottom: 0.75rem;
}
.pm-limits li:last-child { margin-bottom: 0; }
.pm-limits li .bi { flex-shrink: 0; margin-top: 0.3rem; }
.pm-limits--no li .bi { color: var(--pm-accent-dark); }
.pm-limits--yes li .bi { color: var(--pm-primary); }

/* 3. Legal pages ------------------------------------------------------------------- */
.pm-legal-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding-bottom: 1rem;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid var(--pm-border);
  color: var(--pm-muted);
  font-size: 0.95rem;
}

.pm-toc {
  background: var(--pm-surface);
  border: 1px solid var(--pm-border);
  border-radius: var(--pm-radius);
  padding: 0.75rem 1rem;
}
.pm-toc summary {
  cursor: pointer;
  font-weight: 700;
  list-style-position: inside;
  padding-block: 0.25rem;
}
/* The shared focus outline (main.css), with rounded corners. */
.pm-toc summary:focus-visible { border-radius: 0.25rem; }
.pm-toc__list {
  margin: 0.5rem 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.925rem;
}
.pm-toc__list .nav-link {
  padding: 0.35rem 0.6rem;
  color: var(--pm-ink);
  border-left: 3px solid transparent;
  border-radius: 0 0.35rem 0.35rem 0;
}
.pm-toc__list .nav-link:hover { color: var(--pm-primary); background: var(--pm-white); }
/* Set by js/legal.js for the section currently being read. */
.pm-toc__list .nav-link.active {
  color: var(--pm-primary-dark);
  font-weight: 600;
  background: var(--pm-white);
  border-left-color: var(--pm-primary);
}
/* Desktop: the table of contents follows the reader. The sticky element must be
   the direct child of the tall column (a sticky element only moves inside its
   parent, and the <details> alone fills its <nav>). The header offset keeps it
   clear of the sticky navbar; long lists scroll inside their own box. */
@media (min-width: 992px) {
  .pm-toc-nav {
    position: sticky;
    top: var(--pm-header-offset);
  }
  .pm-toc {
    max-height: calc(100vh - var(--pm-header-offset) - 1.5rem);
    overflow-y: auto;
  }
}

/* Table-of-contents links are plain anchors: the browser jumps to the section
   (main.css keeps its heading clear of the sticky navbar) and updates the address bar. */
@media (prefers-reduced-motion: no-preference) {
  html:has(.pm-legal) { scroll-behavior: smooth; }
}
.pm-legal section + section { margin-top: 0.5rem; }
.pm-legal h2 { font-size: 1.4rem; }
.pm-legal ul,
.pm-legal ol { padding-left: 1.25rem; }
.pm-legal li { margin-bottom: 0.4rem; }
.pm-legal dl { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.25rem 1.5rem; }
.pm-legal dt { font-weight: 600; }
.pm-legal dd { margin-bottom: 0.75rem; }
@media (min-width: 768px) {
  .pm-legal dl { grid-template-columns: 14rem minmax(0, 1fr); }
  .pm-legal dd { margin-bottom: 0.4rem; }
}
.pm-legal address { font-style: normal; }

.pm-legal-callout {
  padding: 1rem 1.25rem;
  margin-block: 1.25rem;
  background: var(--pm-primary-soft);
  border-left: 4px solid var(--pm-primary);
  border-radius: 0 var(--pm-radius-sm) var(--pm-radius-sm) 0;
}
.pm-legal-callout p:last-child { margin-bottom: 0; }

/* 4. Error pages -------------------------------------------------------------------- */
.pm-error { padding-block: clamp(2.5rem, 7vw, 5rem); }
.pm-error__code {
  display: inline-block;
  margin-bottom: 0.75rem;
  padding: 0.3rem 0.9rem;
  border-radius: 999px;
  background: var(--pm-accent-soft);
  color: var(--pm-ink);
  font-weight: 700;
  letter-spacing: 0.08em;
}
.pm-error__art { width: 100%; max-width: 30rem; height: auto; }
/* Link cards (.pm-card) fill their grid cell: equal heights when a label wraps. */
.pm-error-links a {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  height: 100%;
  padding: 1rem;
  color: inherit;
  font-weight: 600;
  text-decoration: none;
}
.pm-error-links a:hover,
.pm-error-links a:focus-visible { color: var(--pm-primary); }
/* Standalone 500 page (no header/footer). */
.pm-error--standalone { min-height: 100vh; display: flex; align-items: center; }
.pm-error--standalone .pm-logo { height: 40px; width: auto; }

/* 5. Print ---------------------------------------------------------------------------- */
@media print {
  /* Only the page content: no header, footer, floating buttons or cookie banner. */
  body > :not(main) { display: none !important; }
  /* The page hero drops its band, plate and buttons (main.css). */
  .pm-page-hero img,
  .pm-breadcrumb,
  .pm-legal-actions,
  .pm-toc-column { display: none !important; }
  .pm-prose { font-size: 11pt; line-height: 1.5; }
  .pm-legal h2 { break-after: avoid; }
  .pm-legal a[href^="http"]::after,
  .pm-legal a[href^="mailto:"]::after { content: " (" attr(href) ")"; font-size: 90%; }
  .pm-reveal { opacity: 1 !important; transform: none !important; }
}