/*
 * Site adjustments — documented client-ordered deviations from strict legacy
 * parity (see docs/specs/12-Design-System-Parity.md §7).
 * Loaded AFTER the legacy stylesheet sets; each rule is scoped narrowly and
 * justified here. Nothing in this file may re-theme the site.
 *
 * [2026-09-27] /books/ grid equalization (client: "perfectly aligned and
 * equal"): the legacy hand-built rows mix cover art with different natural
 * aspect ratios, so covers render at different heights and titles sit high/low
 * side by side. Normalize every cover to the dominant 642:1024 portrait box,
 * letterboxing the outliers invisibly on the dark card background.
 */

body.page-id-1354 main .elementor-widget-image img {
    aspect-ratio: 642 / 1024;
    width: 100%;
    height: auto;
    object-fit: contain;
    object-position: center;
}

/* Equalize the image-widget box too (padding some hand-built widgets carry),
   so the text block below starts at the same y in every card of a row. */
body.page-id-1354 main .elementor-widget-image .elementor-widget-container {
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

/*
 * [2026-09-27] Perfect grid: books.php groups each rail's (cover, title, blurb)
 * triple into .book-card divs. Each rail becomes a 3-row grid (equal rows),
 * each card a flex column with the blurb filling the remainder — so all 12
 * cards come out identical: covers top-aligned, titles on one line, equal
 * card heights across all four rails.
 */
body.page-id-1354 main .book-card {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    height: 100%;
}

body.page-id-1354 main .e-con-inner:has(> .book-card) {
    display: grid;
    grid-template-rows: repeat(3, 1fr);
    align-items: stretch;
}

body.page-id-1354 main .book-card .elementor-widget-text-editor {
    flex: 1 0 auto;
}

body.page-id-1354 main .book-card .elementor-widget-image {
    flex: 0 0 auto;
}

body.page-id-1354 main .book-card .elementor-widget-heading {
    flex: 0 0 auto;
}

/*
 * [2026-09-27] Never collapse the header menu into the auto-generated
 * "More ˅" entry: at common window widths that button lands right after
 * Books and reads as a second dropdown icon (client report). The collapse is
 * done by a Blocksy chunk lazy-loaded from the legacy server (can't be patched
 * locally), so neutralize its output: lay the wrapped items out as normal
 * top-level items and hide the More button itself. Pure CSS — no JS race.
 */
#menu-main-menu > li.more-items-container {
    display: contents !important;
}
#menu-main-menu > li.more-items-container > a,
#menu-main-menu > li.more-items-container > button,
#menu-main-menu > li.more-items-container > .ct-menu-link {
    display: none !important;
}
#menu-main-menu > li.more-items-container > ul.sub-menu {
    display: contents !important;
}

/*
 * [2026-09-27] Footer/inline newsletter form: match the live site's computed
 * layout exactly. Blocksy's `div.ct-wpforms-inline-fields form {display:flex}`
 * rule (wpforms.min.css) applies on our copy but is overridden to `block` on
 * the live site by a later server-side rule we cannot replicate (verified by
 * computed-style comparison, 2026-09-28). In block flow the carried WPForms
 * rules produce live's exact layout: .wpforms-field-container (flex) lays
 * Name/Email/consent side-by-side in one row, then the full-width
 * recaptcha-container (`clear:both`), then the submit container.
 */
div.ct-wpforms-inline-fields form.wpforms-form {
    display: block;
}

/*
 * [2026-09-27] Hover for yellow-at-rest buttons (client directive 2026-09-27,
 * documented in docs/specs/12-Design-System-Parity.md §7). On the live site
 * these buttons have NO hover change (rest #FFCC00; several widgets even
 * carry an explicit yellow→yellow :hover rule in the frozen per-post CSS).
 * The client asked for hover feedback mirroring the site's existing
 * dark→yellow hover language in reverse: yellow→#292929 (the legacy dark
 * button color used by "View All Books" et al.) with white text.
 *
 * Scope is exactly the widgets the frozen legacy CSS paints #FFCC00 at rest
 * (grep of post-*.css / loop css: Audio, Ebook, Paperback, Hardback,
 * "PURCHASE BOOK ON AMAZON" + "PAPER BACK" on book pages, "Get It On Google
 * Play", the yellow Contact buttons) plus every WPForms submit (Get Free
 * Book / Send Message — themed yellow via the Blocksy button palette).
 * !important is required: four of these widgets have their own
 * yellow→yellow :hover/:focus rules at higher specificity (.elementor-{post}
 * .elementor-element.elementor-element-{id} .elementor-button:hover).
 * Dark-at-rest buttons (View All Books, View All Poetry, …) keep their
 * legacy dark→yellow hover — untouched, higher-specificity per-post rules.
 * The transparent-at-rest blog-card "Read More" (loop-2616 751bcee) is
 * deliberately NOT included: it is not yellow at rest and already has its
 * own legacy icon hover.
 */
.elementor-element-8759810 .elementor-button:hover,
.elementor-element-8759810 .elementor-button:focus,
.elementor-element-868450c .elementor-button:hover,
.elementor-element-868450c .elementor-button:focus,
.elementor-element-80f1f99 .elementor-button:hover,
.elementor-element-80f1f99 .elementor-button:focus,
.elementor-element-b51b30b .elementor-button:hover,
.elementor-element-b51b30b .elementor-button:focus,
.elementor-element-a1a7a91 .elementor-button:hover,
.elementor-element-a1a7a91 .elementor-button:focus,
.elementor-element-93c4281 .elementor-button:hover,
.elementor-element-93c4281 .elementor-button:focus,
.elementor-element-82fdc5d .elementor-button:hover,
.elementor-element-82fdc5d .elementor-button:focus,
.elementor-element-80f87e7 .elementor-button:hover,
.elementor-element-80f87e7 .elementor-button:focus,
.elementor-element-5de2680 .elementor-button:hover,
.elementor-element-5de2680 .elementor-button:focus,
.elementor-element-4692c24 .elementor-button:hover,
.elementor-element-4692c24 .elementor-button:focus,
.elementor-element-18eccac .elementor-button:hover,
.elementor-element-18eccac .elementor-button:focus {
    background-color: #292929 !important;
    color: #ffffff !important;
    fill: #ffffff !important;
}

div.wpforms-container .wpforms-submit:hover,
div.wpforms-container .wpforms-submit:focus {
    background-color: #292929 !important;
    color: #ffffff !important;
}