/*
 Theme Name:   Literary
 Template:     twentytwentyfive
 Version:      1.0.0
 Description:  Styles for child theme; installed via script assets.
 Text Domain:  literary
 Domain Path:  /languages
 Requires at least: 6.5
 Requires PHP: 7.4
*/

:root {
  --link-transition: .35s ease;
  --literary-font-size-adjust-roman: 0.402;
  --literary-separator-thickness: 1px;
  --literary-separator-color: color-mix(in srgb, var(--wp--preset--color--contrast) 30%, transparent);
  --literary-cover-radius: 8px;
  --literary-rail-thumb-radius: 8px;
  /* Configurable font sizes (scale with theme.json presets) */
  --literary-card-title-size: 1.25rem;
  --literary-section-heading-size: 1.35rem;
  --literary-about-heading-size: 1.3rem;
  --literary-publicist-name-scale: 1.1;
  --literary-label-letter-spacing: 0.05em;
  --literary-attribution-size: 0.8em;
  /* Scroll rail dimensions (desktop) - wider for clickable interaction */
  --literary-rail-track-width: 4px;
  --literary-rail-thumb-width: 4px;
  /* Scroll rail dimensions (mobile/narrow - thicker for touch) */
  --literary-rail-track-width-mobile: 3px;
  --literary-rail-thumb-width-mobile: 7px;
  /* Contact page layout */
  --literary-contact-content-max: 115ch;
  --literary-contact-section-max: 60ch;
  /* About page inset (matching values for balance) */
  --literary-about-bio-inset: 2rem;
  --literary-about-photo-inset: 2rem;
  /* Interview bullets (set to 'none' to hide) */
  --literary-interviews-bullets: none;
  /* Writing page content width (listing and single posts) */
  --literary-writing-content-max: 100ch;
}

html {
  font-size-adjust: var(--literary-font-size-adjust-roman);
}

*, *::before, *::after {
  font-size-adjust: inherit;
}

em,
i,
cite,
dfn {
  font-size-adjust: 0.376;
}

:lang(ar) { font-family: var(--wp--preset--font-family--noto-kufi-arabic); }

/* Non-theme.json styles can go here, e.g. complex transitions or selectors. */

/* Do not color book titles like links; keep them inheriting text color */
.single-book .entry-title a {
  color: inherit;
  text-decoration: none;
}
/* Hover color for book title links (list view and any linked titles) */
.single-book .entry-title a:hover,
.single-book .entry-title a:focus-visible {
  color: var(--wp--preset--color--primary);
}

/* Header padding is set in parts/header.html via theme.json presets */

/* Navigation font-size comes from theme.json (single source) */

/* Site title sizing comes from theme.json (core/site-title) */

/* Alignment widths are handled by theme.json layout and core wrappers. */

.wp-block-navigation .wp-block-navigation-item__content {
  letter-spacing: var(--literary-label-letter-spacing, 0.05em);
  transition: color var(--link-transition);
  text-decoration: none;
}

.wp-block-navigation .wp-block-navigation-item__content:hover,
.wp-block-navigation .wp-block-navigation-item__content:focus-visible {
  color: var(--wp--preset--color--primary);
  text-decoration: none;
}

.wp-block-navigation .wp-block-navigation-item__content:focus,
.wp-block-navigation .wp-block-navigation-item__content:active {
  text-decoration: none;
}

.wp-block-site-title a,
.wp-block-site-title a:hover,
.wp-block-site-title a:focus,
.wp-block-site-title a:focus-visible {
  text-decoration: none;
}

body.literary-pointer-navigation .wp-block-navigation .wp-block-navigation-item__content:focus {
  outline: none;
}

.wp-block-navigation .wp-block-navigation-item__content[aria-current="page"]:hover,
.wp-block-navigation-item.current-menu-item > a:hover,
.wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content:hover {
  color: var(--wp--preset--color--primary);
}


/* Contact page tweaks */
/* Center and constrain the contact form within content space */
.contact-form .wpforms-container {
  max-width: var(--literary-contact-section-max, 60ch);
  margin-left: auto;
  margin-right: auto;
}

/* Make inputs and textarea share the same width */
.wpforms-container .wpforms-field input[type="text"],
.wpforms-container .wpforms-field input[type="email"],
.wpforms-container .wpforms-field textarea {
  width: 100%;
  box-sizing: border-box;
}

/* Optional: space between fields for readability */
.wpforms-container .wpforms-field {
  margin-bottom: 0.85rem;
}

/* WPForms baseline (moved from critical.css to reduce inline CSS)
   Keep neutral baseline styles for WPForms markup; theme-specific overrides
   remain scoped in contact-form rules below. */
div.wpforms-container-full,
div.wpforms-container-full .wpforms-form * {
  background: none;
  border: 0 none;
  border-radius: 0;
  box-shadow: none;
  box-sizing: border-box;
  float: none;
  font-size: 100%;
  height: auto;
  letter-spacing: normal;
  list-style: none;
  margin: 0;
  outline: none;
  overflow: visible;
  padding: 0;
  position: static;
  text-decoration: none;
  text-transform: none;
  text-indent: 0;
  text-shadow: none;
  visibility: visible;
  width: auto;
}

div.wpforms-container,
div.wpforms-container-full {
  width: 100%;
  max-width: 520px;
  margin: 24px auto;
}

div.wpforms-container .wpforms-form,
div.wpforms-container-full .wpforms-form {
  margin: 0;
  display: block;
  font-size: inherit;
}

div.wpforms-container .wpforms-form fieldset,
div.wpforms-container-full .wpforms-form fieldset {
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
}

div.wpforms-container .wpforms-form input,
div.wpforms-container .wpforms-form label,
div.wpforms-container .wpforms-form select,
div.wpforms-container .wpforms-form button,
div.wpforms-container .wpforms-form textarea,
div.wpforms-container-full .wpforms-form input,
div.wpforms-container-full .wpforms-form label,
div.wpforms-container-full .wpforms-form select,
div.wpforms-container-full .wpforms-form button,
div.wpforms-container-full .wpforms-form textarea {
  margin: 0;
  border: 0;
  padding: 0;
  display: inline-block;
  vertical-align: middle;
  background: none;
  height: auto;
  box-sizing: border-box;
  font-family: inherit;
}

.wpforms-container .wpforms-field-hp,
.wpforms-container-full .wpforms-field-hp {
  display: none !important;
  position: absolute !important;
  left: -9000px !important;
  top: auto !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}
div.wpforms-container .wpforms-form textarea,
div.wpforms-container-full .wpforms-form textarea {
  max-width: 100%;
  width: 100%;
}

div.wpforms-container-full .wpforms-form ul,
div.wpforms-container-full .wpforms-form ul li {
  background: none;
  border: 0;
  list-style: none;
  margin: 0;
  padding: 0;
}

div.wpforms-container-full .wpforms-form ul li {
  margin-bottom: 5px;
}

div.wpforms-container-full .wpforms-form ul li:last-of-type {
  margin-bottom: 0;
}

div.wpforms-container-full .wpforms-field-container,
div.wpforms-container-full .wpforms-submit-container {
  margin: 0;
  padding: 0;
}

div.wpforms-container-full .wpforms-form .wpforms-field {
  padding: 10px 0;
  margin: 0 0 10px;
  clear: both;
}

div.wpforms-container-full .wpforms-form .wpforms-field-label {
  display: block;
  font-weight: 700;
  font-size: inherit;
  line-height: 1.3;
  margin: 0 0 4px;
  padding: 0;
}

div.wpforms-container-full .wpforms-form .wpforms-field-sublabel {
  display: block;
  font-size: var(--wp--preset--font-size--small);
  font-weight: 400;
  line-height: 1.3;
  margin: 4px 0 0;
  padding: 0;
}

div.wpforms-container-full .wpforms-form .wpforms-field-row {
  margin-bottom: 8px;
  position: relative;
}

div.wpforms-container-full .wpforms-form .wpforms-field-row:before,
div.wpforms-container-full .wpforms-form .wpforms-field-row:after {
  content: "";
  display: table;
}

div.wpforms-container-full .wpforms-form .wpforms-field-row:after {
  clear: both;
}

div.wpforms-container-full .wpforms-form .wpforms-field-row .wpforms-field-column {
  flex: 1 1 220px;
  min-width: 0;
}

div.wpforms-container-full .wpforms-form .wpforms-submit-container {
  padding: 10px 0 0;
  clear: both;
  position: relative;
}

div.wpforms-container-full .wpforms-form input[type=text],
div.wpforms-container-full .wpforms-form input[type=email],
div.wpforms-container-full .wpforms-form input[type=tel],
div.wpforms-container-full .wpforms-form input[type=url],
div.wpforms-container-full .wpforms-form input[type=password],
div.wpforms-container-full .wpforms-form input[type=search],
div.wpforms-container-full .wpforms-form input[type=number],
div.wpforms-container-full .wpforms-form input[type=datetime],
div.wpforms-container-full .wpforms-form input[type=datetime-local],
div.wpforms-container-full .wpforms-form input[type=date],
div.wpforms-container-full .wpforms-form input[type=time],
div.wpforms-container-full .wpforms-form input[type=week],
div.wpforms-container-full .wpforms-form input[type=month],
div.wpforms-container-full .wpforms-form select,
div.wpforms-container-full .wpforms-form textarea {
  background-color: var(--wp--preset--color--paper);
  border: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 20%, transparent);
  border-radius: 2px;
  box-sizing: border-box;
  color: var(--wp--preset--color--contrast);
  display: block;
  float: none;
  height: 38px;
  line-height: 1.3;
  padding: 6px 10px;
  width: 100%;
}

div.wpforms-container-full .wpforms-form textarea {
  min-height: 38px;
  resize: vertical;
}

div.wpforms-container-full .wpforms-form input.wpforms-field-medium,
div.wpforms-container-full .wpforms-form select.wpforms-field-medium,
div.wpforms-container-full .wpforms-form .wpforms-field-row.wpforms-field-medium {
  max-width: 60%;
}

div.wpforms-container-full .wpforms-form textarea.wpforms-field-medium {
  height: 120px;
}

div.wpforms-container-full .wpforms-form input.wpforms-field-small,
div.wpforms-container-full .wpforms-form select.wpforms-field-small,
div.wpforms-container-full .wpforms-form .wpforms-field-row.wpforms-field-small {
  max-width: 25%;
}

div.wpforms-container-full .wpforms-form textarea.wpforms-field-small {
  height: 70px;
}

div.wpforms-container-full .wpforms-form input.wpforms-field-large,
div.wpforms-container-full .wpforms-form select.wpforms-field-large,
div.wpforms-container-full .wpforms-form .wpforms-field-row.wpforms-field-large {
  max-width: 100%;
}

div.wpforms-container-full .wpforms-form textarea.wpforms-field-large {
  height: 220px;
}

div.wpforms-container-full .wpforms-form .wpforms-required-label {
  color: var(--wp--preset--color--primary);
  font-weight: 400;
}

div.wpforms-container-full .wpforms-form input[type=submit],
div.wpforms-container-full .wpforms-form button[type=submit],
div.wpforms-container-full .wpforms-form .wpforms-page-button {
  background-color: var(--wp--preset--color--surface);
  border: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 20%, var(--wp--preset--color--paper));
  color: color-mix(in srgb, var(--wp--preset--color--contrast) 70%, var(--wp--preset--color--paper));
  font-family: inherit;
  font-size: 1em;
  padding: 10px 15px;
  display: inline-block;
}

div.wpforms-container-full .wpforms-form input[type=submit]:hover,
div.wpforms-container-full .wpforms-form input[type=submit]:focus-visible,
div.wpforms-container-full .wpforms-form input[type=submit]:active,
div.wpforms-container-full .wpforms-form button[type=submit]:hover,
div.wpforms-container-full .wpforms-form button[type=submit]:focus-visible,
div.wpforms-container-full .wpforms-form button[type=submit]:active {
  background-color: color-mix(in srgb, var(--wp--preset--color--contrast) 10%, var(--wp--preset--color--paper));
  border-color: color-mix(in srgb, var(--wp--preset--color--contrast) 25%, transparent);
  cursor: pointer;
}

div.wpforms-container-full .wpforms-form input:focus-visible,
div.wpforms-container-full .wpforms-form textarea:focus-visible,
div.wpforms-container-full .wpforms-form select:focus-visible {
  border: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 35%, transparent);
  box-shadow: none;
}

div.wpforms-container-full .wpforms-form input:disabled,
div.wpforms-container-full .wpforms-form textarea:disabled,
div.wpforms-container-full .wpforms-form select:disabled {
  background-color: color-mix(in srgb, var(--wp--preset--color--paper) 90%, var(--wp--preset--color--contrast));
  border-color: color-mix(in srgb, var(--wp--preset--color--contrast) 20%, transparent);
  color: color-mix(in srgb, var(--wp--preset--color--contrast) 60%, transparent);
  cursor: not-allowed;
}

/* Stylize region labels with midline rules */
.about-content h4.region-label {
  display: flex;
  align-items: center;
  gap: .75rem;
  font-weight: 600;
  letter-spacing: var(--literary-label-letter-spacing, 0.05em);
}

.about-content h4.region-label::before,
.about-content h4.region-label::after {
  content: "";
  height: var(--literary-separator-thickness);
  background: var(--literary-separator-color);
  flex: 1 1 auto;
}

/* Ensure center text utility class works reliably */
.has-text-align-center {
  text-align: center;
}

/* Contact form section heading spacing */
.contact-form .form-section-title {
  margin-top: 0;
  margin-bottom: .5rem;
}

/* WPForms submit button in Rust red */
/* Base button styling for WPForms */
.wpforms-container .wpforms-submit,
.wpforms-container button[type="submit"],
.wpforms-container input[type="submit"] {
  background-color: var(--wp--preset--color--primary);
  color: var(--wp--preset--color--paper);
  border: 0;
  border-radius: 2px;
  padding: .6rem 1rem;
  line-height: 1.2;
  cursor: pointer;
}

.wpforms-container .wpforms-submit:hover,
.wpforms-container button[type="submit"]:hover,
.wpforms-container input[type="submit"]:hover {
  background-color: var(--wp--preset--color--primary-dark);
}

.wpforms-container .wpforms-submit:focus-visible,
.wpforms-container button[type="submit"]:focus-visible,
.wpforms-container input[type="submit"]:focus-visible {
  outline: 2px solid var(--wp--preset--color--gunmetal);
  outline-offset: 2px;
}

/* Increase specificity to override WPForms default blue rule */
.contact-form div.wpforms-container-full button[type="submit"],
.contact-form div.wpforms-container-full input[type="submit"],
.contact-form div.wpforms-container-full .wpforms-submit,
.contact-form div.wpforms-container-full button[type="submit"]:not(:hover):not(:active),
.contact-form div.wpforms-container-full input[type="submit"]:not(:hover):not(:active) {
  background-color: var(--wp--preset--color--primary) !important;
  color: var(--wp--preset--color--paper) !important;
  border-color: var(--wp--preset--color--primary) !important;
  box-shadow: none !important;
}

.contact-form div.wpforms-container-full button[type="submit"]:hover,
.contact-form div.wpforms-container-full input[type="submit"]:hover {
  background-color: var(--wp--preset--color--primary-dark) !important;
}

.single-book .book-section-title {
  margin: .5rem 0 .35rem;
}

/* Remove separator line; keep spacing above full-width blurbs/reviews */
.single-book .book-section.book-blurbs {
  border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 12%, transparent);
  padding-top: 2rem;
}

/* Center the hero↔reviews divider by trimming trailing hero spacing and tightening the top margin
   on the first full-width reviews section. (Needs higher specificity than critical.css.) */
body.single-book .single-book .book-overview > :last-child {
  margin-bottom: 0;
}

body.single-book .single-book .book-overview > :last-child > :last-child {
  margin-bottom: 0;
}

body.single-book .single-book .book-overview > :last-child p:last-child {
  margin-bottom: 0;
}

body.single-book .single-book .book-hero + .book-section.book-blurbs {
  margin-top: 2rem;
}

/* Clean up empty paragraphs and extra spacing */
.single-book p:empty,
.single-book .book-overview p:empty,
.single-book .book-reviews-wrap p:empty {
  display: none;
}

.single-book .book-overview {
  margin-bottom: 0;
}

/* Reviews: collapsed gradient + divider + toggle styling */
.single-book .book-reviews-wrap {
  position: relative;
}

/* Smooth expand/collapse animation for reviews grid */
.single-book .book-reviews-grid {
  transition: max-height 0.3s ease-out, opacity 0.2s ease-out;
  will-change: max-height;
}

.single-book .book-reviews-grid.is-collapsed {
  position: relative;
}

/* Subtle gradient fade at the bottom of the grid when collapsed.
   This hints that more reviews exist just below. */
.single-book .book-reviews-grid.is-collapsed::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 4em;
  pointer-events: none;
  /* Fade from transparent to the site background (Surface) color.
     Match the Books list synopsis fade behavior. */
  background: linear-gradient(
    to bottom,
    transparent 0%,
    var(--wp--preset--color--surface, #fff) 75%
  );
}

/* Divider + spacing above the toggle */
.single-book .book-reviews-toggle {
  margin-top: 0;
  padding-top: 1rem;
  text-align: center;
  border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 12%, transparent);
  background: var(--wp--preset--color--surface, #fff);
  position: relative;
  z-index: 1;
}

/* Make the control read as a textual affordance, not a heavy button */
.single-book .book-reviews-toggle .reviews-toggle-btn {
  appearance: none;
  -webkit-appearance: none;
  background: none;
  border: 0;
  padding: .25rem .5rem;
  margin: 0;
  color: var(--wp--preset--color--primary);
  font: inherit;
  font-weight: 600;
  text-decoration: none; /* link-like but without underline */
  cursor: pointer;
  font-size: var(--wp--preset--font-size--medium);
}

.single-book .book-reviews-toggle .reviews-toggle-btn:hover,
.single-book .book-reviews-toggle .reviews-toggle-btn:focus-visible {
  color: var(--wp--preset--color--primary-dark);
}

/* Ensure a visible focus indicator when not underlined */
.single-book .book-reviews-toggle .reviews-toggle-btn:focus-visible {
  outline: 2px solid var(--wp--preset--color--gunmetal);
  outline-offset: 2px;
}

/* Book Excerpt section: styled to match list page */
.single-book .book-excerpt-inline {
  /* Prevent the border/background from painting underneath the floated cover */
  display: flow-root;
  font-size: var(--wp--preset--font-size--x-large);
  font-weight: 500;
  font-style: normal;
  line-height: 1.6;
  margin: 2.5rem auto 0.75rem;
  max-width: 70ch;
  padding: 1rem 2rem;
  border-width: 1px;
  border-style: solid;
  border-color: color-mix(in srgb, var(--wp--preset--color--contrast) 8%, transparent);
  border-radius: 10px;
  border-top-style: none;
  border-bottom-style: none;
}

.single-book .book-excerpt-inline p {
  margin: 0 0 0.5em;
  text-indent: 2rem;
}

.single-book .book-excerpt-inline p:last-child {
  margin-bottom: 0;
}

/* Single book synopsis paragraphs: indent first line */
.single-book .book-synopsis p {
  text-indent: 2rem;
}

/* Mid widths: collapse in stages under the cover.
   Stage 1: synopsis clears the cover for a full measure.
   Stage 2: excerpt clears once narrower still. */
@media (min-width: 50em) and (max-width: 70em) {
  .single-book .book-synopsis {
    clear: both;
  }
}

@media (min-width: 50em) and (max-width: 56.25em) {
  .single-book .book-excerpt-inline {
    clear: both;
  }
}

/* Remove legacy global padding helper; editor adds its own wrapper. */

/* Ensure rounding applies within About and gallery too */
.about-content .wp-block-image img,
.about-content .wp-block-gallery img {
  border-radius: 8px;
}

.about-content figure.wp-block-image {
  overflow: hidden;
  border-radius: 8px;
}

/* Purchase links: match single-book look explicitly (override core link rules) */
.single-book .book-links .book-purchase-link {
  display: inline-block;
  margin-right: .75rem;
  margin-bottom: .25rem;
  color: var(--wp--preset--color--primary);
  text-decoration: underline;
  text-underline-offset: .15em;
  text-decoration-thickness: from-font;
}

.single-book .book-links .book-purchase-link:last-child {
  margin-right: 0;
}

/* About page image behavior */
/*
 * At wide widths (>1280px/80rem), use grid layout similar to book-hero for consistent alignment.
 * At medium widths, float is used to allow the author bio to wrap around the portrait.
 * At narrow widths, stack the image above the text.
 */

.about-content .about-intro {
  max-width: var(--literary-writing-content-max, 100ch);
  margin-inline: auto;
}

/* Wide viewports: grid layout (no wrap) */
@media (min-width: 80.0625em) {
  .about-intro {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(340px, 520px);
    column-gap: 2rem;
    row-gap: 0.35rem;
    align-items: start;
    grid-template-areas:
      "bio-label bio-label"
      "bio grid-top"
      "bio grid-bottom";
  }

  /* Photo Left Variation */
  .about-intro.is-style-photo-left {
    grid-template-columns: minmax(340px, 520px) minmax(0, 1fr);
    grid-template-areas:
      "bio-label bio-label"
      "grid-top bio"
      "grid-bottom bio";
  }

  .about-intro > .about-bio-label {
    grid-area: bio-label;
  }

  .about-bio {
    min-width: 0; /* Prevent grid blowout */
    grid-area: bio;
    margin-block-start: 0;
    padding-inline: var(--literary-about-bio-inset, 1.5rem);
  }

  .about-content .about-intro > .wp-block-image.alignright {
    /* Override float for grid layout */
    float: none;
    margin: 0;
    grid-area: grid-top;
    padding-inline: var(--literary-about-photo-inset, 0.75rem);
  }

  .about-intro .wp-block-image.alignright img {
    max-width: 340px;
    width: 100%;
    height: auto;
  }

  .has-about-photo-grid .about-intro .about-author-grid-wrapper {
    /* Prevent core "block gap" margins inside this wrapper; we control spacing explicitly. */
    --wp--style--block-gap: 0px;
    grid-area: grid-top;
    display: flex;
    flex-direction: column;
    gap: 0.35rem; /* Match .about-author-grid gap for a unified 2x2 look */
    margin: 0;
  }

  /* Back-compat (older About content): top/bottom rows were direct children of .about-intro. */
  .has-about-photo-grid .about-intro > .about-author-grid--top {
    grid-area: grid-top;
  }

  .has-about-photo-grid .about-intro > .about-author-grid--bottom {
    grid-area: grid-bottom;
  }

  .has-about-photo-grid .about-intro .about-author-grid--top,
  .has-about-photo-grid .about-intro .about-author-grid--bottom {
    padding-inline: var(--literary-about-photo-inset, 0.75rem);
  }

  /* Grid mode: book-like wrap on wide screens (requires grid wrapper before bio in markup). */
  .has-about-photo-grid .about-intro:has(> .about-author-grid-wrapper + .about-bio) {
    display: flow-root;
  }

  .has-about-photo-grid .about-intro:has(> .about-author-grid-wrapper + .about-bio) > .about-author-grid-wrapper {
    --literary-about-photo-inset: 0.75rem;
    float: right;
    width: min(30rem, 48%);
    margin: 0 0 var(--wp--preset--spacing--50) var(--wp--preset--spacing--50);
  }

  .has-about-photo-grid .about-intro:has(> .about-author-grid-wrapper + .about-bio) > .about-bio {
    padding-inline: 0;
  }

  /* Subtle widow control for the wrapped bio text (progressive enhancement). */
  .has-about-photo-grid .about-intro:has(> .about-author-grid-wrapper + .about-bio) > .about-bio p {
    hyphens: auto;
    text-wrap: pretty;
  }

  .has-about-photo-grid .about-intro.is-style-photo-left:has(> .about-author-grid-wrapper + .about-bio) > .about-author-grid-wrapper {
    float: left;
    margin: 0 var(--wp--preset--spacing--50) var(--wp--preset--spacing--50) 0;
  }

  .has-about-photo-grid .about-intro.is-style-photo-left:has(> .about-author-grid-wrapper + .about-bio) > .about-bio {
    padding-inline-start: 0;
    padding-inline-end: var(--literary-about-bio-inset, 1.5rem);
  }
}

/* Medium viewports: float layout (text wraps) */
@media (min-width: 47.5625em) and (max-width: 80em) {
  .about-content .about-intro > .wp-block-image.alignright {
    float: right;
    margin: 0 0 1.5rem 1rem;
  }

  .about-intro .wp-block-image.alignright img {
    max-width: 340px;
    height: auto;
  }
  /* Grid stays inline with content on medium; no float needed when layout is grid. */
  .has-about-photo-grid .about-intro {
    display: flex;
    flex-direction: column;
  }

  .has-about-photo-grid .about-intro .about-author-grid-wrapper {
    display: contents;
  }

  .has-about-photo-grid .about-intro .about-author-grid--top {
    order: 1;
  }

  .has-about-photo-grid .about-intro .about-bio {
    order: 2;
  }

  .has-about-photo-grid .about-intro .about-author-grid--bottom {
    order: 3;
  }
}

@media (max-width: 47.5em) {
  /* Center the author photo figure and override logical margins from core */
  .about-content .about-intro > .wp-block-image.alignright {
    float: none;
    /* physical and logical margins to out-prioritize core logical margins */
    margin: 0 auto 1.5rem;
    margin-inline: auto;
    /* shrink-wrap around image for reliable centering */
    display: table;
    width: auto;
    max-width: 100%;
    padding-top: 1.25rem;
  }

  /* Ensure the image itself is centered within the figure */
  .about-content .about-intro > .wp-block-image.alignright img {
    display: block;
    margin: 0 auto;
    max-width: 360px;
    height: auto;
  }

  /* Reorder: bio paragraphs above photo */
  .about-intro {
    display: flex;
    flex-direction: column;
    gap: 0.75rem; /* Add spacing between elements in the flex column */
  }

  .about-bio {
    display: contents;
  }

  .about-bio > * {
    order: 3;
  }

  .about-bio > p:first-of-type {
    order: 1;
  }

  /* Ensure the image (figure) centers between the first and remaining paragraphs */
  .about-intro > .wp-block-image.alignright {
    align-self: center;
    order: 2;
  }

  /* Grid-specific ordering on narrow: top row → bio → bottom row */
  .has-about-photo-grid .about-intro .about-author-grid-wrapper {
    display: contents;
  }

  .has-about-photo-grid .about-intro .about-author-grid--top {
    order: 1;
    margin-bottom: 1rem; /* Space between top photo row and bio text */
  }

  .has-about-photo-grid .about-intro .about-bio > p:first-of-type {
    order: 2;
  }

  .has-about-photo-grid .about-intro .about-bio > *:not(p:first-of-type) {
    order: 3;
  }

  .has-about-photo-grid .about-intro .about-author-grid--bottom {
    order: 4;
    margin-top: 1rem; /* Space between bio text and bottom photo row */
  }
}

/* Slightly larger section titles on About */
.about-content h3.wp-block-heading {
  font-size: var(--literary-about-heading-size);
}

/* Emphasize section labels in About and Contact (standardized) */
.about-content h3.about-section-title {
  font-size: var(--wp--preset--font-size--x-large) !important;
  line-height: 1.25;
  letter-spacing: var(--literary-label-letter-spacing, 0.05em);
}

.about-content h3.about-section-title.has-section-separator:has(+ * .author-interviews) {
  /* The Interviews list uses content-fit columns; keep its heading rule a bit narrower. */
  --literary-section-separator-max: var(--literary-contact-section-max, 60ch);
}

.about-content h3.about-section-title.has-section-separator::after {
  content: "";
  display: block;
  height: var(--literary-separator-thickness, 1px);
  background: var(--literary-separator-color, color-mix(in srgb, var(--wp--preset--color--contrast) 30%, transparent));
  width: 100%;
  max-width: var(--literary-section-separator-max, 60ch);
  margin: var(--wp--preset--spacing--50) auto var(--wp--preset--spacing--40);
}

/* Add slight top spacing to author photo (only for float layout) */
@media (min-width: 47.5625em) and (max-width: 80em) {
  .about-intro .wp-block-image.alignright {
    margin-top: .5rem;
  }
}

@media (max-width: 47.5em) {
.about-content .wp-block-image.alignright {
  padding-top: .5rem;
}
}

/* About page typography: inherit global body size; avoid Large preset */
.about-content {
  --literary-section-separator-max: var(--literary-writing-content-max, 100ch);
  font-size: inherit;
}

.about-content p,
.about-content li {
  font-size: inherit;
  line-height: 1.8;
}

/* About bio paragraphs: indent first line */
.about-bio p {
  text-indent: 2rem;
}

.about-intro > .about-bio-label {
  margin-block-start: 0;
  margin-block-end: var(--wp--preset--spacing--40);
}

.about-content .has-large-font-size,
.about-content .has-x-large-font-size,
.about-content .has-medium-font-size {
  font-size: var(--wp--preset--font-size--medium) !important;
}

/* Widescreen: match awards/featured review text to synopsis size */
@media (min-width: 80em) {
  /* Single book featured reviews */
  .single-book .book-featured-reviews,
  .single-book .book-featured-reviews .book-review-quote {
    font-size: inherit;
  }

  /* Single book awards (block and inline variants) */
  .single-book .book-awards,
  .single-book .book-awards .book-review-quote,
  .single-book .book-awards-inline,
  .single-book .book-awards-inline .book-review-quote {
    font-size: inherit;
  }

  /* Attribution/source uses smaller configurable size */
  .single-book .book-featured-reviews .book-review-source,
  .single-book .book-awards .book-review-source,
  .single-book .book-awards-inline .book-review-source {
    font-size: var(--literary-attribution-size, 0.8em);
  }
}

/* Interviews columns: remove extra row gap when stacking on mobile */
@media (max-width: 47.5em) {
  .about-content .wp-block-columns {
    gap: 0 !important;
    row-gap: 0 !important;
  }

  .about-content .wp-block-column {
    margin-bottom: 0;
  }
}

.about-content .about-photo-gallery-heading {
  display: block;
}

/* About page Interviews: match About intro measure (100ch) */
.about-content .author-interviews {
  max-width: var(--literary-writing-content-max, 100ch);
  margin-inline: auto;
  width: 100%;
}

/* Add spacing between Interviews section heading and list */
.about-content .author-interviews > h3,
.about-content .author-interviews > .wp-block-heading {
  margin-bottom: 1rem;
}

.about-content .author-interviews-list {
  /* Increased row spacing using site-wide preset (M = 1rem) */
  gap: var(--wp--preset--spacing--40) 1.25rem;
}

/* About page Interviews: match About bio inset on wide layout */
@media (min-width: 80.0625em) {
  .about-content .author-interviews-list {
    box-sizing: border-box;
    padding-inline: var(--literary-about-bio-inset, 1.5rem);
  }
}

.about-content .author-interview,
.about-content .wp-block-author-interview {
  /* Match row gap for bottom margin on items */
  margin-bottom: var(--wp--preset--spacing--40);
}

/* Hide interview bullets and remove left padding (configurable via --literary-interviews-bullets) */
.about-content .author-interview::before,
.about-content .wp-block-author-interview::before {
  display: var(--literary-interviews-bullets, none);
}

.about-content .author-interview,
.about-content .wp-block-author-interview {
  padding-left: 0;
}

/* Trim top spacing: first paragraph inside about-intro */
.about-content .about-intro>p:first-of-type {
  margin-block-start: 0 !important;
}



/* About photo gallery: responsive row-first grid (4-up on wide, wrap on smaller) */
.about-content .wp-block-gallery.about-photo-gallery,
.about-content .about-photo-gallery {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.35rem 0.35rem;
  width: 100%;
}

@media (min-width: 70em) {
  .about-content .wp-block-gallery.about-photo-gallery,
  .about-content .about-photo-gallery {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.about-content .wp-block-gallery.about-photo-gallery > .wp-block-image,
.about-content .about-photo-gallery > .wp-block-image {
  margin: 0 !important;
  width: 100% !important;
  box-sizing: border-box;
}

.about-content .about-photo-gallery .wp-block-image img,
.wp-block-gallery.has-nested-images figure.wp-block-image img {
  width: 100%;
  max-width: none;
  height: auto;
  display: block;
}

/* Publicists responsive grid */
.about-content .publicists-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem 2rem;
  align-items: start;
  width: 100%;
  box-sizing: border-box;
}

.about-content .publicists-grid .publicist {
  margin: 0 !important;
}

.about-content .publicists-grid .publicist>p {
  margin: 0;
}

.about-content .publicists-grid .publicist>p+p {
  margin-top: .2rem;
}

.about-content .publicists-grid .publicist>p:first-child {
  font-weight: 700;
  font-size: calc(1em * var(--literary-publicist-name-scale));
  margin-block-start: 0 !important;
}

@media (max-width: 47.5em) {
  .about-content .publicists-grid {
    margin-bottom: 2.5rem;
  }
}

/* UK publicist single block should be full width */
.about-content .publicists-single {
  display: block;
}

.about-content .publicists-single .publicist>p {
  margin: 0;
}

.about-content .publicists-single .publicist>p+p {
  margin-top: .2rem;
}

.about-content .publicists-single .publicist>p:first-child {
  font-weight: 700;
  font-size: calc(1em * var(--literary-publicist-name-scale));
  margin-block-start: 0 !important;
}

/* Reduced motion: neutralize non-essential transitions */
@media (prefers-reduced-motion: reduce) {
  /* Avoid color fade on nav links */
  .wp-block-navigation .wp-block-navigation-item__content {
    transition: none !important;
  }
}

/* Contact page layout - single column, centered */
.about-content.contact-sections {
  --literary-section-separator-max: var(--literary-contact-section-max, 60ch);
}

.about-content.contact-sections .contact-sections__grid {
  display: grid;
  gap: 4rem;
  grid-template-columns: 1fr;
  /* Control visual order independent of DOM using grid areas */
  grid-template-areas:
    "agent"
    "publicists"
    "skolay"
    "form";
  align-items: start;
  max-width: var(--literary-contact-content-max, 115ch);
  margin-inline: auto;
}

/* Contact page: constrain text-heavy sections for readability */
.about-content.contact-sections .contact-sections__agent,
.about-content.contact-sections .contact-sections__publicists {
  width: 100%;
  max-width: var(--literary-contact-section-max, 60ch);
  justify-self: center;
}

/* Pre-launch: hide Skolay section without leaving a "double gap" in the grid */
.about-content.contact-sections .contact-sections__grid.is-skolay-hidden {
  grid-template-areas:
    "agent"
    "publicists"
    "form";
}

.about-content.contact-sections .contact-sections__grid.is-skolay-hidden .contact-sections__skolay {
  display: none;
}

.about-content.contact-sections .contact-sections__skolay,
.about-content.contact-sections .contact-sections__form {
  margin: 0;
}

@media (max-width: 47.5em) {
  .about-content.contact-sections .contact-sections__grid {
    gap: 3rem;
  }
}

/* Contact page: Publicists section - single column layout */
.about-content.contact-sections .contact-sections__publicists {
  display: grid;
  gap: 2.5rem;
  grid-template-columns: 1fr;
}

.about-content.contact-sections .contact-sections__publicists > .about-section-title {
  grid-column: 1 / -1;
}

/* Ensure the regional blocks stretch nicely */
.about-content.contact-sections .contact-sections__publicists .publicists-region {
  margin: 0;
}

/* Constrain Skolay photo width */
.about-content.contact-sections .contact-sections__skolay .wp-block-image {
  max-width: min(720px, 90%);
  margin-inline: auto;
}

/* Map sections to grid areas to enforce order */
.about-content.contact-sections .contact-sections__agent     { grid-area: agent; }
.about-content.contact-sections .contact-sections__publicists { grid-area: publicists; }
.about-content.contact-sections .contact-sections__skolay     { grid-area: skolay; }
.about-content.contact-sections .contact-sections__form       { grid-area: form; }

/* Increase vertical rhythm between sections (explicit row-gap for robustness) */
.about-content.contact-sections .contact-sections__grid {
  row-gap: 6rem;
}

/* About Author Photo Grid (layout controlled by site setting) */
.about-author-grid {
  display: grid; /* Default: Visible */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.35rem;
  margin: 0;
}

/* In stacked/column modes, keep each grid row from getting too wide or tall */
@media (max-width: 80em) {
  /* 4-grid (split) mode: allow wider containers for the 2x2 photo grid */
  .has-about-photo-grid .about-author-grid--top,
  .has-about-photo-grid .about-author-grid--bottom {
    max-width: min(520px, 100%);
    margin-inline: auto;
  }
  /* Single photo mode: narrower to limit portrait height */
  .has-about-photo-single .about-intro > .wp-block-image.alignright {
    max-width: 70%;
  }
}

/*
   Hide Single Photo ONLY if Grid is present and layout is "grid".
   This prevents a blank space if the grid block is missing from DOM.
   Uses :has() which is supported in all modern browsers.
   Fallback: if grid missing, this rule won't apply, so single photo shows.
*/
.has-about-photo-grid .about-intro:has(.about-author-grid) > .wp-block-image {
  display: none;
}

/* Gallery: Hidden when layout is "grid" and grid is present; visible otherwise. */
.has-about-photo-grid .about-content:has(.about-author-grid) .about-photo-gallery,
.has-about-photo-grid .about-content:has(.about-author-grid) .about-photo-gallery-heading {
  display: none;
}

/* Grid items */
.about-author-grid .grid-item,
.about-author-grid .wp-block-image {
  aspect-ratio: 1 / 1.4;
  overflow: hidden;
  margin: 0 !important; /* Override potential global figure margins */
  border-radius: 8px;
}

/* Target the image directly for both frontend (.grid-item img) and editor (.wp-block-image img) */
.about-author-grid .grid-item img,
.about-author-grid .wp-block-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Adjust cropping as requested ("right side cropped off" implies left anchor) */
  object-position: 20% center;
  display: block;
}

/* When layout is "single photo + gallery": hide grid, show single and gallery. */
.has-about-photo-single .about-author-grid {
  display: none !important;
}

.has-about-photo-single .about-author-grid-wrapper {
  display: none;
}

.has-about-photo-single .about-intro > .wp-block-image {
  display: block;
}

/* Ensure the grid takes the place of the single photo in the wide layout */
@media (min-width: 80.0625em) {
  .about-content .about-intro > .about-author-grid-wrapper {
    grid-column: 2;
    grid-row: 1;
  }
}

/* ============================================
   Dark/Light Mode Toggle Button
   ============================================ */

:root {
  --literary-toggle-size: 28px;
  --literary-toggle-icon-size: 20px;
}

/* Base toggle button styles */
.literary-theme-toggle {
  background: transparent;
  border: none;
  border-radius: 4px;
  width: var(--literary-toggle-size);
  height: var(--literary-toggle-size);
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: opacity var(--link-transition);
  opacity: 0.7;
}

.literary-theme-toggle:hover,
.literary-theme-toggle:focus-visible {
  opacity: 1;
}

.literary-theme-toggle:focus-visible {
  outline: 2px solid var(--wp--preset--color--gunmetal);
  outline-offset: 4px;
}

.literary-theme-toggle svg {
  width: var(--literary-toggle-icon-size);
  height: var(--literary-toggle-icon-size);
  fill: none;
  stroke: var(--wp--preset--color--contrast);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke var(--link-transition);
}

.literary-theme-toggle:hover svg {
  stroke: var(--wp--preset--color--contrast);
}

/* Desktop: toggle in footer (right side, next to social icons) */
.footer-theme-toggle {
  margin-left: 1rem;
}

.literary-built-by {
  display: none;
}

/* Mobile: toggle in navigation overlay (below nav links) */
.nav-overlay-theme-toggle {
  display: block;
  margin-top: 2rem;
  margin-left: 0;
  width: var(--literary-toggle-size);
  height: var(--literary-toggle-size);
}

/* Ensure toggle doesn't show focus ring in pointer navigation mode */
body.literary-pointer-navigation .literary-theme-toggle:focus {
  outline: none;
}

/* Hide desktop toggle on mobile, show mobile toggle only in overlay */
@media (max-width: 600px) {
  .footer-theme-toggle {
    display: none;
  }
}

@media (min-width: 601px) {
  .nav-overlay-theme-toggle {
    display: none;
  }
}

/* ============================================
   Writing Post Content Width
   ============================================
   Single essay/anthology/short_story pages use the same
   max-width as the Writing listing page for consistency.
   Controlled via --literary-writing-content-max (default 100ch).

   WordPress's constrained layout uses --wp--style--global--content-size
   for child element max-width, so we override that variable here.
   ============================================ */
.single-essay main > .wp-block-group.alignfull.is-layout-constrained,
.single-anthology main > .wp-block-group.alignfull.is-layout-constrained,
.single-short_story main > .wp-block-group.alignfull.is-layout-constrained {
  --wp--style--global--content-size: var(--literary-writing-content-max, 100ch);
}

.single-essay .wp-block-post-content.is-layout-constrained,
.single-anthology .wp-block-post-content.is-layout-constrained,
.single-short_story .wp-block-post-content.is-layout-constrained {
  --wp--style--global--content-size: var(--literary-writing-content-max, 100ch);
}

/* Writing singles: header cluster shrink-wraps to the longer of title/original-publication lines. */
.single-essay .literary-writing-header,
.single-anthology .literary-writing-header,
.single-short_story .literary-writing-header {
  margin: .25rem auto 0;
  max-width: var(--literary-writing-content-max, 100ch);
  text-align: center;
  width: fit-content;
}

.single-essay .literary-writing-header .wp-block-post-title,
.single-anthology .literary-writing-header .wp-block-post-title,
.single-short_story .literary-writing-header .wp-block-post-title {
  font-size: var(--title-size);
  line-height: 1.15;
  margin: 0;
  max-width: 100%;
}

/* Writing singles: optional original publication note */
.single-essay .literary-writing-header .literary-original-publication,
.single-anthology .literary-writing-header .literary-original-publication,
.single-short_story .literary-writing-header .literary-original-publication {
  font-size: var(--wp--preset--font-size--small);
  margin: 0;
  max-width: 100%;
  opacity: .75;
  text-align: center;
}

.single-essay .literary-writing-header .literary-original-publication::before,
.single-anthology .literary-writing-header .literary-original-publication::before,
.single-short_story .literary-writing-header .literary-original-publication::before {
  content: "";
  display: block;
  height: var(--literary-separator-thickness, 1px);
  background: var(--literary-separator-color, color-mix(in srgb, var(--wp--preset--color--contrast) 30%, transparent));
  width: 100%;
  margin: var(--wp--preset--spacing--30) auto var(--wp--preset--spacing--20);
  transform: scaleX(1.04);
  transform-origin: center;
}

.single-essay .literary-writing-header .literary-original-publication a,
.single-anthology .literary-writing-header .literary-original-publication a,
.single-short_story .literary-writing-header .literary-original-publication a {
  color: inherit;
}

/* Writing singles: post-navigation separator line should match site separator tokens. */
.single-essay .wp-block-group:has(> .wp-block-post-navigation-link),
.single-anthology .wp-block-group:has(> .wp-block-post-navigation-link),
.single-short_story .wp-block-group:has(> .wp-block-post-navigation-link) {
  border-top-width: var(--literary-separator-thickness, 1px) !important;
  border-top-style: solid !important;
  border-top-color: var(--literary-separator-color, color-mix(in srgb, var(--wp--preset--color--contrast) 30%, transparent)) !important;
}

/* Writing singles: center in-content images by default */
.single-essay .wp-block-post-content .wp-block-image:not(.alignleft):not(.alignright),
.single-anthology .wp-block-post-content .wp-block-image:not(.alignleft):not(.alignright),
.single-short_story .wp-block-post-content .wp-block-image:not(.alignleft):not(.alignright) {
  text-align: center;
}

.single-essay .wp-block-post-content .wp-block-image:not(.alignleft):not(.alignright) img,
.single-anthology .wp-block-post-content .wp-block-image:not(.alignleft):not(.alignright) img,
.single-short_story .wp-block-post-content .wp-block-image:not(.alignleft):not(.alignright) img {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/* Writing singles: prose paragraphs indent like Books synopsis/excerpt. */
.single-essay .wp-block-post-content > p:not(.has-text-align-center),
.single-anthology .wp-block-post-content > p:not(.has-text-align-center),
.single-short_story .wp-block-post-content > p:not(.has-text-align-center) {
  text-indent: 2rem;
}