/*
 * 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;
}

/* Deck 12Oct26: the main menu grew to 8 items (Movie added, slide 4). At the
   legacy 50px spacing Contact overflowed into Blocksy's hidden "More" item on
   1280px laptops. Tighter spacing fits all 8 from ~1250px up; narrower desktop
   widths keep Blocksy's own "More" overflow as before. */
[data-header*="type-1"] .ct-header [data-id="menu"] {
    --menu-items-spacing: clamp(24px, calc((100vw - 1000px) / 8), 34px);
}

/* Owner 2026-10-17: "Subscribe Newsletter?" on ONE line in every newsletter
   form (home section + footer). The migrated WPForms <ul> kept its disc bullet
   + 40px indent and the field shrank to ~90px in the footer, so the label
   wrapped onto 2–3 lines. Checkbox + label now sit on one line and the field
   takes its natural width; if a row is too narrow it moves below as a whole. */
.newsletter-form .wpforms-field-container {
    flex-wrap: wrap;
}

div.wpforms-container .newsletter-form .wpforms-field-container > .wpforms-field.wpforms-field-mailchimp {
    flex: 0 0 auto;
    width: auto;
    max-width: 100%;
}

.newsletter-form .wpforms-field-mailchimp ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.newsletter-form .wpforms-field-mailchimp li {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    white-space: nowrap;
}

.newsletter-form .wpforms-field-mailchimp input[type="checkbox"] {
    flex: 0 0 auto;
    margin: 0;
}

.newsletter-form .wpforms-field-mailchimp label {
    margin: 0;
    white-space: nowrap;
}

/* …and Name / Email never squash below a usable width: in narrow columns
   (free-book page, footer) the consent line wraps under them instead. */
div.wpforms-container .newsletter-form .wpforms-field-container > .wpforms-field.wpforms-field-text,
div.wpforms-container .newsletter-form .wpforms-field-container > .wpforms-field.wpforms-field-email {
    min-width: 150px;
}

/* Client deck 12Oct26 slides 4 + 5 (Ferdouse, comment 2026-10-17: "All bread
   crumbs under the logo … check slide 5"): on every page with a title hero the
   breadcrumb sits LEFT-aligned directly under the logo (same left edge — the
   hero container and the header share it), the big gap between the header and
   the hero is cut, and the page title stays centred below the breadcrumb. */
.ct-container-full:has(> article > .hero-section),
.ct-container-full:has(> .hero-section),
.ct-container:has(> section > .entry-header > .ct-breadcrumbs),
.ct-container:has(> section > .hero-section .ct-breadcrumbs) {
    padding-top: 16px;
}

/* Full site-container width, centred on the hero: lines up with the logo even
   inside the narrow (750px) blog-post column; a no-op on full-width heroes. */
.entry-header .ct-breadcrumbs {
    display: block;
    width: min(var(--theme-normal-container-max-width, 1290px), var(--theme-container-edge-spacing, 90vw));
    max-width: none;
    margin: 0 0 0 calc(50% - min(var(--theme-normal-container-max-width, 1290px), var(--theme-container-edge-spacing, 90vw)) / 2);
    text-align: left;
}

.entry-header .page-title {
    margin-top: 28px;
}