/*
 * Readerly for Ghost: what Ghost needs beyond the shared stylesheet (readerly.css).
 * The shared stylesheet is generated from design/; this file is not.
 *   1. Ghost settings (custom fonts)
 *   2. Theme glue (logo, feature without a cover, pagination total)
 *   3. Koenig editor cards
 *   4. Members forms and Portal
 */

/* 1. Ghost settings --------------------------------------------- */

/* Design > Typography in Ghost Admin sets these two variables. */
:root {
  --font-heading: var(--gh-font-heading, "Fraunces", "Iowan Old Style", "Palatino Linotype", Georgia, serif);
  --font-body: var(--gh-font-body, "Literata", "Iowan Old Style", "Palatino Linotype", Georgia, serif);
}

/* 2. Theme glue -------------------------------------------------- */

.site-title--logo img { display: block; max-height: 3rem; width: auto; }

.feature:not(:has(> .cover-link)) { grid-template-columns: minmax(0, 1fr); }

.pagination .pagination__total { border: 0; color: var(--color-muted); padding-inline: 0; }

/* A book's cover sits in the book panel, so the post's feature image would repeat it. */
.book-panel ~ .entry-figure { display: none; }
.entry-figure { margin-block: var(--space-50) 0; }
.entry-figure img { display: block; width: 100%; height: auto; border-radius: var(--radius); }
.entry-figure figcaption {
  margin-top: var(--space-20);
  color: var(--color-muted);
  font-size: var(--size-small);
  text-align: center;
}

/* Without pagination, a list would end against the footer. */
main > .wrap > .book-grid--list:last-child { margin-bottom: var(--space-70); }

.error-details { margin-top: var(--space-50); color: var(--color-muted); font-size: var(--size-small); }

/* 3. Koenig editor cards ----------------------------------------- */

.entry-content .kg-image { display: block; margin-inline: auto; max-width: 100%; height: auto; }

/* 100vw includes a classic scrollbar, so a full-width card would scroll the page sideways. */
main { overflow-x: clip; }
.kg-width-wide,
.kg-width-full { position: relative; }
.kg-width-wide {
  width: min(var(--width-wide), 100vw - 2 * var(--space-40));
  margin-inline: calc(50% - min(var(--width-wide), 100vw - 2 * var(--space-40)) / 2);
}
.kg-width-full {
  width: 100vw;
  margin-inline: calc(50% - 50vw);
}
.kg-width-full img,
.entry-content .kg-width-full figure img { border-radius: 0; }
.kg-width-full figcaption { padding-inline: var(--space-40); }

.kg-gallery-image img { border-radius: var(--radius); }

.entry-content > blockquote:not([class]) {
  padding-left: var(--space-40);
  border-left: 2px solid var(--color-accent);
  font-style: italic;
}
.entry-content > blockquote.kg-blockquote-alt {
  margin-block: var(--space-60);
  padding-block: var(--space-40);
  border-block: var(--border-width) solid var(--color-contrast);
  font-family: var(--font-heading);
  font-size: var(--size-x-large);
  font-style: italic;
  line-height: 1.3;
  text-align: center;
  text-wrap: balance;
}

.entry-content pre {
  overflow-x: auto;
  padding: var(--space-40);
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius);
  font-size: var(--size-small);
}
.entry-content :not(pre) > code {
  padding: 0.1em 0.3em;
  background: var(--color-surface);
  border-radius: 3px;
  font-size: 0.9em;
}

.kg-bookmark-card a.kg-bookmark-container,
.kg-product-card .kg-product-card-container,
.kg-file-card .kg-file-card-container,
.kg-audio-card,
.kg-toggle-card,
.kg-cta-card {
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: none;
  color: var(--color-contrast);
}
.kg-bookmark-title,
.kg-product-card-title,
.kg-file-card-title,
.kg-toggle-heading-text,
.kg-header-card-heading,
.kg-signup-card-heading,
.kg-cta-heading {
  font-family: var(--font-heading);
}
.kg-bookmark-description,
.kg-bookmark-metadata,
.kg-file-card-caption,
.kg-file-card-metadata { color: var(--color-muted); }

.kg-product-card-rating-active.kg-product-card-rating-star svg { fill: var(--color-accent); }
.kg-product-card .kg-product-card-button,
.kg-button-card a.kg-btn,
.kg-header-card .kg-header-card-button,
.kg-signup-card .kg-signup-card-button,
.kg-cta-card .kg-cta-button {
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-weight: 600;
}
.kg-button-card a.kg-btn-accent,
.kg-product-card a.kg-product-card-btn-accent {
  background: var(--color-accent);
  color: var(--color-base);
}

.kg-callout-card { border-radius: var(--radius); }
.kg-callout-card-grey,
.kg-callout-card-white { background: var(--color-surface); }
.kg-callout-card-grey { border: var(--border-width) solid var(--color-border); }
.kg-callout-text { color: inherit; }

.kg-toggle-card h4.kg-toggle-heading-text { font-size: var(--size-medium); }

.kg-embed-card { display: flex; flex-direction: column; align-items: center; }
.kg-embed-card > :is(iframe, video) { max-width: 100%; }

/* 4. Members forms and Portal ------------------------------------ */

/* Ghost adds .loading, .success or .error to a form with data-members-form. */
.newsletter__form .form-status > span { display: none; }
.newsletter__form.success .form-status__success,
.newsletter__form.error .form-status__error { display: inline; }
.newsletter__form.error .form-status { color: var(--color-accent); }
.newsletter__form.success .newsletter__row,
.newsletter__form.success label { display: none; }
.newsletter__form.loading button[type="submit"] { opacity: 0.6; pointer-events: none; }