/* The single post's header (STYLING.md › The single post's header): a
   full-width band at the top of a single, on its post type's card hue, the
   same ground as the section's archive strip and cards. The inner row keeps
   the content column's width. */
.pp-single-header {
  --pp-single-header-ground: var(--pp-steel-1);
  background: var(--pp-single-header-ground);
  border-bottom: 1px solid rgba(var(--pp-steel-7-rgb), 0.12);
}

.pp-single-header--listen { --pp-single-header-ground: var(--pp-card-bg-listen); }
.pp-single-header--worksheets { --pp-single-header-ground: var(--pp-card-bg-worksheets); }
.pp-single-header--dips { --pp-single-header-ground: var(--pp-card-bg-dips); }
.pp-single-header--post { --pp-single-header-ground: var(--pp-card-bg-post); }
.pp-single-header--lessons { --pp-single-header-ground: var(--pp-card-bg-lessons); }

/* One gap owns the rhythm (STYLING.md › Spacing). 20px above, the archive
   strip's figure; 12px below, because the controls row's 44px boxes already
   hold 11px of air under their glyphs, which brings the visible space to
   about the same 20px. */
.pp-single-header__inner {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  margin-inline: auto;
  padding: 20px 0 12px;
}

.pp-single-header__inner:not(:has(> .pp-single-header__controls)) {
  padding-bottom: 20px;
}

/* The content column's width: Blocksy's narrow or normal container. With a
   sidebar (a Reads post for a guest) the row sits in the first column of the
   same grid Blocksy lays the post out on, so it needs no width of its own. */
.pp-single-header__inner[data-width="narrow"] {
  max-width: var(--theme-narrow-container-max-width);
}

.pp-single-header__inner[data-width="normal"] {
  max-width: var(--theme-normal-container-max-width);
}

[data-sidebar] > .pp-single-header__inner {
  margin-inline: 0;
}

/* Breadcrumbs, quiet: the band already says the section. Blocksy's own
   markup (and its BreadcrumbList microdata), set through its own properties.
   --pp-steel-6 rather than -5: the archive strip found -5 too faint on the
   hues. */
.pp-single-header .ct-breadcrumbs {
  --theme-font-size: 0.85rem;
  --theme-font-weight: 400;
  --theme-text-transform: none;
  --theme-line-height: 1.3;
  --theme-text-color: var(--pp-steel-6);
  --theme-link-initial-color: var(--pp-steel-6);
  --theme-link-hover-color: var(--pp-steel-7);
  margin: 0;
  color: var(--pp-steel-6);
}

/* A link in a label row takes the 24px floor (STYLING.md › Touch Targets);
   44px would reach into the title below. */
.pp-single-header .ct-breadcrumbs a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  color: var(--pp-steel-6);
  text-decoration: none;
}

.pp-single-header .ct-breadcrumbs a:hover {
  color: var(--pp-steel-7);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.pp-single-header .ct-breadcrumbs .ct-separator {
  color: var(--pp-steel-5);
}

/* The title is right below, so the trail stops at the section. The item
   stays in the markup, so the structured data still ends on this page. */
.pp-single-header .ct-breadcrumbs .last-item,
.pp-single-header .ct-breadcrumbs > :has(+ .last-item) .ct-separator {
  display: none;
}

/* In the app the bottom nav and the back gesture do the breadcrumbs' job, and
   their first item leads to the site root, the one page the app never loads.
   html.pp-in-app, because a guest single is page-cached. */
html.pp-in-app .pp-single-header .ct-breadcrumbs {
  display: none;
}

.pp-single-header__row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

/* The page's <h1>, at the archive strip's title size. Its top padding centres
   one line on the 44px level disc beside it, and a longer title wraps
   downward from there. */
.pp-single-header__title {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  padding-top: calc((44px - 1.2em) / 2);
  font-size: 1.38rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--pp-steel-7);
  text-wrap: balance;
}

.pp-single-header__title:only-child {
  padding-top: 0;
}

.pp-single-header__meta > * {
  margin: 0;
}

/* The band takes the place of the hero, so the content under it takes
   32px instead of Blocksy's content spacing (50px, 60px on desktop). */
body.pp-has-single-header #main > .pp-single-header ~ [data-vertical-spacing*="top"] {
  padding-top: 32px;
}