/*
 * Styles for generated pages only.
 *
 * Typography, colour, buttons and section spacing all come from the site's own
 * stylesheet and the tidalwave theme. This file adds nothing that already
 * exists there: it only lays out the few structures the site has no class for,
 * and it reads the theme's variables so it follows any palette change.
 */

.pseo_crumb {
  font-size: .85rem;
  opacity: .72;
  margin-bottom: 1.25rem;
}
.pseo_crumb a { color: inherit; text-decoration: none; }
.pseo_crumb a:hover { text-decoration: underline; }
.pseo_crumb-sep { margin: 0 .45rem; opacity: .5; }

.pseo_list { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; gap: .6rem; max-width: 68ch; }
.pseo_list li { position: relative; padding-left: 1.6rem; }
.pseo_list li::before {
  content: "";
  position: absolute; left: 0; top: .55em;
  width: .5rem; height: .5rem; border-radius: 50%;
  background: var(--tw-accent, currentColor);
}

.pseo_faq { margin: 1rem 0 0; max-width: 72ch; }
.pseo_faq dt { margin-top: 1.4rem; }
.pseo_faq dd { margin: .4rem 0 0; opacity: .85; }

.pseo_links { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 2rem; margin-top: 1.5rem; }
.pseo_links ul { list-style: none; padding: 0; margin: .75rem 0 0; display: grid; gap: .45rem; }
.pseo_links a { color: var(--tw-primary, currentColor); text-decoration: none; }
.pseo_links a:hover { text-decoration: underline; }

.pseo_citygrid {
  list-style: none; padding: 0; margin: 1rem 0 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: .45rem 1.2rem;
}
.pseo_citygrid a { color: var(--tw-primary, currentColor); text-decoration: none; font-size: .95rem; }
.pseo_citygrid a:hover { text-decoration: underline; }

/* reach-out block: several routes side by side, so no single one is a dead end */
.pseo_reach-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.25rem;
  margin-top: 1.75rem;
  align-items: start;
}
.pseo_reach-card {
  padding: 1.5rem;
  border: 1px solid var(--tw-line, rgba(128, 128, 128, .28));
  border-radius: var(--tw-radius, 6px);
  background: var(--tw-page, transparent);
}
/* The form is the primary route, so it gets the width when there is room. */
.pseo_reach-card:first-child { grid-column: span 2; }
@media (max-width: 700px) { .pseo_reach-card:first-child { grid-column: auto; } }

.pseo_reach-card h3 { margin: 0 0 .5rem; }
.pseo_reach-link {
  display: inline-block;
  margin: .35rem 0 .5rem;
  font-weight: 600;
  color: var(--tw-primary, currentColor);
  text-decoration: none;
  word-break: break-word;
}
.pseo_reach-link:hover { text-decoration: underline; }

.pseo_form { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: .85rem; margin-top: 1rem; }
.pseo_form label { display: grid; gap: .3rem; font-size: .85rem; font-weight: 600; }
.pseo_form-wide { grid-column: 1 / -1; }
.pseo_form input,
.pseo_form textarea {
  font: inherit; font-weight: 400;
  padding: .65rem .8rem;
  border-radius: var(--tw-radius, 6px);
  border: 1px solid var(--tw-line, rgba(128, 128, 128, .35));
  background: var(--tw-page, #fff);
  color: inherit;
}
.pseo_form input:focus,
.pseo_form textarea:focus { outline: 2px solid var(--tw-accent, currentColor); outline-offset: 1px; }
.pseo_form button { grid-column: 1 / -1; justify-self: start; cursor: pointer; }
.pseo_form button[disabled] { opacity: .55; cursor: default; }
.pseo_form-status { grid-column: 1 / -1; margin: 0; min-height: 1.2em; font-size: .9rem; }
.pseo_form-status[data-state="error"] { color: #b3261e; }
.pseo_form-status[data-state="ok"] { color: #0a7d3f; }

.pseo_fit { margin-top: 2rem; }