/* ==========================================================================
   Individual post pages

   A restyle only. The markup and the wording are unchanged; every rule here
   targets classes the template already has.

   This is the generic post template, so it covers every article on the site,
   not only the surfing guide.

   The main thing it fixes: the template lays its content out with
   "col-lg-9 offset-lg-3" on nearly every element, which pushes the article a
   quarter of the way across the page and leaves a dead gutter on the left.
   ========================================================================== */

.post-page {
  --po-purple: #7f3f98;
  --po-ink:    #2b2530;
  --po-soft:   #6d6577;
  --po-line:   #e7e2ec;
  --po-sand:   #faf7f2;

  background-color: var(--po-sand);
  padding-bottom: 72px;
  color: var(--po-ink);
  font-family: "Open Sans", -apple-system, BlinkMacSystemFont, sans-serif;
}

/* Undo the offset gutter and let the article sit on its own measure. */
.post-page .col-lg-9.offset-lg-3 {
  margin-left: 0 !important;
  max-width: 100% !important;
  flex: 0 0 100% !important;
  padding-left: 0;
  padding-right: 0;
  text-align: left !important;
}
.post-page .row > .col-lg-9.col-xs-12 > .container { padding: 0; }
.post-page .text-right { text-align: left !important; }

/* --------------------------------------------------------------- title -- */

.post-page h1 {
  margin: 0 0 22px;
  padding: 24px 0 0 !important;
  font-family: "Amatic SC", cursive;
  font-size: clamp(2.75rem, 6vw, 4.5rem);
  font-weight: 700;
  line-height: 1.05;
  color: var(--po-purple);
  text-align: left !important;
}

/* --------------------------------------------------------------- hero --- */

.post-page .post-hero-image,
.post-page .slider-single-view img {
  border-radius: 18px;
  box-shadow: 0 1px 2px rgba(43, 37, 48, .04), 0 8px 20px rgba(43, 37, 48, .05);
  max-height: 520px;
  object-fit: cover;
}
.post-page .slider-single-view { margin-bottom: 8px; }

/* ---------------------------------------------------------------- body -- */

/* A comfortable reading measure. Long-form prose across a full-width column
   is the other reason these pages were hard to read. */
.post-page .col-lg-9.offset-lg-3 > p,
.post-page > .container > .row > .col-lg-9 p {
  max-width: 72ch;
  margin: 0 0 1.15em;
  color: var(--po-ink);
  font-size: 1.0625rem;
  line-height: 1.8;
}

.post-page h2 {
  max-width: 72ch;
  margin: 2em 0 .5em;
  font-size: clamp(1.375rem, 2.6vw, 1.75rem);
  font-weight: 700;
  line-height: 1.3;
  color: var(--po-ink);
}
.post-page h2.sub-heading {
  font-family: "Amatic SC", cursive;
  font-size: clamp(1.9rem, 3.4vw, 2.6rem);
  color: var(--po-purple);
}

.post-page h3 {
  margin: 1.8em 0 .6em;
  font-family: "Amatic SC", cursive;
  font-size: clamp(1.75rem, 3vw, 2.4rem);
  font-weight: 700;
  color: var(--po-purple);
}

.post-page a { color: var(--po-purple); }
.post-page ul.list-unstyled li { font-size: 1rem; line-height: 1.7; }

/* ------------------------------------------------------------ comments -- */

/* Each comment sat in a bare Bootstrap ".well"; give them a card each. */
.post-page .well {
  margin-bottom: 12px;
  padding: 16px 20px;
  border: 1px solid var(--po-line);
  border-radius: 14px;
  background: #fff;
  box-shadow: none;
  font-size: .9375rem;
  line-height: 1.6;
  color: var(--po-soft);
}

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

.post-page .form-group { margin-bottom: 14px; }
.post-page .form-group label {
  display: block;
  margin-bottom: 5px;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--po-soft);
}
.post-page .form-control {
  width: 100%;
  padding: 11px 14px;
  border: 1px solid var(--po-line);
  border-radius: 12px;
  background: #fff;
  color: var(--po-ink);
  font-family: inherit;
  font-size: .9375rem;
}
.post-page .form-control:focus {
  outline: none;
  border-color: var(--po-purple);
  box-shadow: 0 0 0 3px rgba(127, 63, 152, .15);
}
.post-page .btn-primary {
  border-radius: 999px !important;
  padding: 12px 26px !important;
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* --------------------------------------------------------------- aside -- */

.post-page aside h3,
.post-page aside h4 {
  font-family: "Amatic SC", cursive;
  font-size: 1.9rem;
  color: var(--po-purple);
}
.post-page aside img { border-radius: 14px; }

/* ---------------------------------------------------------- responsive -- */

@media (max-width: 768px) {
  .post-page h1 { padding-top: 8px !important; }
  .post-page .post-hero-image { border-radius: 14px; max-height: 300px; }
}