/* ==========================================================================
   WordPress + Elementor compatibility for the original stylesheet.
   styles.css is the hand-built design, unchanged; everything WordPress
   needs on top of it lives here.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   1. Elementor wrappers
   Each design section is a widget inside a container. Containers holding a
   P.D. Blackwell widget get no padding, gap or width cap, so the section's
   own .shell controls the layout exactly as in the static build — even if a
   widget is dropped into a brand-new default container.
   ------------------------------------------------------------------------- */

.e-con:has(> .elementor-widget[data-widget_type^="pdb-"]),
.e-con:has(> .e-con-inner > .elementor-widget[data-widget_type^="pdb-"]) {
  --padding-top: 0px;
  --padding-right: 0px;
  --padding-bottom: 0px;
  --padding-left: 0px;
  --gap: 0px;
  --row-gap: 0px;
  --column-gap: 0px;
  --content-width: 100%;
  --container-max-width: 100%;
  --margin-top: 0px;
  --margin-bottom: 0px;
}

/* Legacy section/column layouts. */
.elementor-column:has(> .elementor-widget-wrap > .elementor-widget[data-widget_type^="pdb-"]) > .elementor-widget-wrap {
  padding: 0 !important;
}
.elementor-section:has(.elementor-widget[data-widget_type^="pdb-"]) > .elementor-container {
  max-width: none;
}

.elementor-widget[data-widget_type^="pdb-"] {
  width: 100%;
  margin-block: 0 !important;
  --kit-widget-spacing: 0px;
}

/* Elementor resets every image inside .elementor; restore the design. */
.elementor .guide-list__icon { height: 60px; }
@media (max-width: 1024px) { .elementor .guide-list__icon { height: 48px; } }
.elementor .author__media img,
.elementor .bio__media img { border-radius: var(--radius); }
.elementor .trailer__video { border-radius: var(--radius); }

/* Elementor's own link reset must not undo the design's link colours. */
.elementor .books__footnote a,
.elementor .banner__crumbs a { text-decoration: none; }


/* ---------------------------------------------------------------------------
   2. Editable background images
   Widgets pass the chosen image as --bg so the design's gradients and
   breakpoints still apply; without a chosen image the original art stays.
   ------------------------------------------------------------------------- */

.book__art[style*="--bg"]::before { background-image: var(--bg); }

.bio[style*="--bg"] {
  background-image: linear-gradient(rgb(0 0 0 / 82%), rgb(0 0 0 / 82%)), var(--bg);
}

@media (max-width: 1366px) {
  .author[style*="--bg"] {
    background-image: linear-gradient(rgb(18 18 18 / 89%), rgb(18 18 18 / 89%)), var(--bg);
  }
}


/* ---------------------------------------------------------------------------
   3. Forms
   ------------------------------------------------------------------------- */

/* Spam trap, never visible. */
.pdb-hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  opacity: 0;
  pointer-events: none;
}

.subscribe-form button[disabled],
.contact-form button[disabled] { opacity: .6; cursor: wait; }

/* Newsletter / form plugins rendered through a shortcode: inherit the look. */
.subscribe-plugin input[type="email"],
.subscribe-plugin input[type="text"],
.contact-form--plugin input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
.contact-form--plugin textarea,
.contact-form--plugin select {
  width: 100%;
  padding: 17px 20px;
  border: 1px solid var(--accent);
  border-radius: var(--radius-btn);
  background-color: transparent;
  color: var(--white);
}
.subscribe-plugin input[type="submit"],
.subscribe-plugin button,
.contact-form--plugin input[type="submit"],
.contact-form--plugin button {
  padding: 17px 34px;
  border: 0;
  border-radius: var(--radius-btn);
  background-color: var(--accent);
  color: var(--bg);
  font-family: var(--font-accent);
  font-size: var(--fs-btn);
  font-weight: 500;
  cursor: pointer;
}
.contact-form--plugin p,
.contact-form--plugin label { margin-bottom: 20px; display: block; }


/* ---------------------------------------------------------------------------
   4. News cards: several posts stack with a gap.
   ------------------------------------------------------------------------- */

.post-list { display: grid; gap: 30px; }
.post-list .pagination { margin-top: 20px; }
.post-list .nav-links { display: flex; flex-wrap: wrap; gap: 10px; }
.post-list .page-numbers {
  display: inline-grid; place-items: center;
  min-width: 44px; height: 44px; padding: 0 12px;
  border: 1px solid var(--border); border-radius: 12px;
  font-family: var(--font-accent);
}
.post-list .page-numbers.current,
.post-list a.page-numbers:hover { background: var(--accent); border-color: var(--accent); color: var(--bg); }


/* ---------------------------------------------------------------------------
   5. Plain (non-Elementor) pages, posts and the 404
   The design zeroes every margin, so give long-form text its rhythm back.
   ------------------------------------------------------------------------- */

.page-content { padding-block: 80px 120px; }
.entry { max-width: 820px; margin-inline: auto; font-size: 17px; line-height: 1.75; }
.entry > * + * { margin-top: 1.2em; }
.entry h2, .entry h3, .entry h4 { margin-top: 1.8em; line-height: 1.3em; }
.entry h2 { font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem); }
.entry h3 { font-size: clamp(1.4rem, 1.2rem + .8vw, 1.9rem); }
.entry a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.entry a.btn { text-decoration: none; color: var(--white); }
.entry ul, .entry ol { padding-left: 1.4em; }
.entry ul { list-style: disc; }
.entry ol { list-style: decimal; }
.entry li + li { margin-top: .4em; }
.entry blockquote { padding-left: 20px; border-left: 3px solid var(--accent); color: var(--white); font-style: italic; }
.entry img, .entry .wp-block-image img { border-radius: var(--radius); }
.entry figure { margin-inline: 0; }
.entry .post__meta { margin-bottom: 10px; }
.entry__thumb { width: 100%; border-radius: var(--radius); }
.entry .wp-block-button__link { background: var(--accent); color: var(--bg); border-radius: var(--radius-btn); text-decoration: none; }
.entry input, .entry textarea {
  width: 100%; padding: 14px 18px; border: 1px solid var(--border);
  border-radius: 12px; background: transparent; color: var(--white);
}
.entry .comment-list { list-style: none; padding: 0; }

.alignleft { float: left; margin: 0 1.5em 1em 0; }
.alignright { float: right; margin: 0 0 1em 1.5em; }
.aligncenter { margin-inline: auto; }
.wp-caption-text, figcaption { font-size: 14px; color: var(--text); margin-top: 8px; }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }


/* ---------------------------------------------------------------------------
   6. Admin bar: keep the off-canvas menu below it on mobile.
   ------------------------------------------------------------------------- */

@media (max-width: 1024px) {
  .admin-bar .nav { top: 46px; }
}
@media (min-width: 783px) and (max-width: 1024px) {
  .admin-bar .nav { top: 32px; }
}

/* Home page: the floating header stays below the WordPress admin bar. */
.admin-bar .site-header--overlay { top: 32px; }
@media (max-width: 782px) { .admin-bar .site-header--overlay { top: 46px; } }