/* ==========================================================================
   Delemhach site overrides
   Ported from the original WordPress custom-css panel.
   Selectors that referenced WordPress-only classes (.wpcf7-form, .wpforms-*)
   have been adapted to the static contact form (.contact-form).
   ========================================================================== */


/* ----- General Styles ----- */

/* Remove border from special-heading first letters */
.special-title.special-heading-letter::first-letter {
  border: none;
}


/* ----- Specific Section Headings (white-on-image) -----
   Originally these were keyed off a handful of shortcode IDs, several of
   which referenced pages that no longer exist. The remaining headings are
   the home "Welcome Home!" hero and the contact-me heading-on-bg pattern. */
#home-welcome-heading .special-title.special-heading-letter::first-letter,
body.page-contact .SpecialHeading .special-heading-letter:first-letter {
  color: #ffffff;
  border: none;
}


/* ----- Hide Login Button ----- */
li.menu-item-has-children.menu-item-login-register a {
  display: none;
}


/* ----- Home Page Specific Styles ----- */
body.page-home .SpecialHeading .special-title.special-heading-letter {
  margin-top: 20rem;
}
body.page-home #home-welcome-heading .special-title.special-heading-letter::first-letter {
  color: #ffffff;
  border: none;
}


/* ----- View Book Button Styles ----- */
a.special-link {
  position: relative;
  display: inline-block;
  cursor: pointer;
  color: #000;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-align: center;
  background: transparent;
  transition: 0.1s;
  border: 1px solid #856d4d;
  padding: 2rem !important;
  border-radius: 0;
}
a.special-link:hover {
  background: #856d4d;
  border: 1px solid #856d4d;
  color: white;
}


/* ===== Book CTA buttons: spacing + emphasis ===== */
/* Homepage book panel — Read a Sample sits above View Book.
   Both live inside .book-panel-info-description (note the singular "book")
   so use that selector. Force each button onto its own line with breathing
   room between, and between the price/excerpt and the action buttons. */
.book-panel-info-description .read-sample-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 8px 0 24px;
}
.book-panel-info-description .read-sample-btn + a.special-link,
.book-panel-info-description a.special-link {
  display: inline-block;
}
/* Force the View Book button to a new row when Read a Sample is present. */
.book-panel-info-description .read-sample-btn {
  display: flex;
  width: max-content;
}
.book-panel-info-description .read-sample-btn ~ a.special-link {
  display: inline-block;
  margin-top: 0;
}

/* Book detail page — primary CTA "Buy Now" (or "Pre-Order Now!").
   Was rendering as plain link text; promote to a filled, prominent button. */
.SingleProduct .single_add_to_cart_button.button {
  display: inline-block;
  background: #856d4d;
  color: #fff !important;
  font-family: 'Cinzel Decorative', Georgia, serif;
  font-size: 16px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 16px 40px;
  border: 1px solid #856d4d;
  border-radius: 2px;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s, transform 0.15s;
  box-shadow: 0 4px 14px rgba(133, 109, 77, 0.25);
}
.SingleProduct .single_add_to_cart_button.button:hover {
  background: #6b5b3e;
  color: #fff !important;
  border-color: #6b5b3e;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(133, 109, 77, 0.35);
}
/* Buy Now button container — give it room before the Read a Sample button
   that follows below, and below before the description text. */
.SingleProduct p:has(> .single_add_to_cart_button) {
  margin: 0 0 28px;
}
.SingleProduct .read-sample-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}
.SingleProduct p:has(> .read-sample-btn) {
  margin: 0 0 32px; /* room between Read a Sample and the description below */
}
.SingleProduct .dh-product-details-short-description {
  margin-top: 8px;
}


/* ----- About Me ----- */
body.page-about h2.special-title.special-heading-letter:first-letter {
  color: #856d4d !important;
}


/* ----- Contact Page ----- */
/* Original WP rules targeted .wpcf7-form / .wpforms-container; the static
   site uses the lightweight .contact-form. Cover both so the styling applies
   regardless of which form is rendered. */
body.page-contact form.wpcf7-form.init label,
body.page-contact .contact-form label,
body.page-contact .wpforms-container .wpforms-form .wpforms-field-label,
body.page-contact .wpforms-container .wpforms-form .wpforms-field-sublabel {
  color: white;
}

body.page-contact input.wpcf7-form-control.wpcf7-submit.has-spinner,
body.page-contact .contact-form button[type="submit"] {
  color: white;
  border: 2px solid white;
}

body.page-contact div.wpforms-container-full button[type="submit"]:not(:hover):not(:active),
body.page-contact .contact-form button[type="submit"]:not(:hover):not(:active) {
  background-color: #856d4d;
  color: #fff;
}

body.page-contact .wpforms-container .wpforms-form .wpforms-field-sublabel {
  min-width: 90px;
}

span#wpforms-1071-field_5-question {
  color: #fff;
}

body.page-about #about-textblock .special-title.special-heading-letter::first-letter,
body.page-contact .SpecialHeading .special-heading-letter:first-letter {
  border: none;
}

h2.special-title.special-heading-letter:first-letter {
  border: none !important;
}


/* ----- Social Footer Styles ----- */
.widget.widget_odrin_social a {
  display: inline-block;
  margin: 0 10px 15px 0;
  background-color: #f8f9fa;
  width: 45px;
  height: 45px;
  font-size: 18px;
  line-height: 45px;
  text-align: center;
  border: none;
  box-shadow: 0px 3px 9px -7px rgba(0, 0, 0, 0.3);
}
.section-light .widget.widget_odrin_social a {
  color: #343a40;
}
.section-light .widget.widget_odrin_social a:hover {
  color: #856d4d;
}


/* ----- Book Sample Headings ----- */
h1.chapter-heading,
span#tblcontents {
  display: none;
}


/* ----- Event Page Text Heading ----- */
body.page-events .SpecialHeading .special-heading-letter:first-letter {
  color: #fff;
}


/* ----- Product (book) Page Buttons ----- */
.woocommerce ul.products li.product .button,
.dh-shop ul.products li.product .button {
  display: inline-block;
  text-wrap: balance;
}


/* ----- About Me featured-books grid -----
   master.css only defines a tablet/mobile rule for .dh-shop ul.products,
   so on desktop the books were stacking vertically. Lay them out as a
   responsive flex grid that wraps to a row on wider screens. */
body.page-about .FeaturedBooks ul.products {
  display: flex;
  flex-wrap: wrap;
  gap: 40px 24px;
  list-style: none;
  margin: 0;
  padding: 0;
  align-items: stretch;
  justify-content: flex-start;
}
body.page-about .FeaturedBooks ul.products > li.product {
  flex: 0 0 calc((100% - 24px * 3) / 4); /* 4-up at desktop */
  margin: 0;
  display: flex;
  flex-direction: column;
  text-align: center;
}
body.page-about .FeaturedBooks ul.products > li.product .loopProduct-image-wrap {
  aspect-ratio: 2 / 3;
  overflow: hidden;
  background: #1a1612;
}
body.page-about .FeaturedBooks ul.products > li.product img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
body.page-about .FeaturedBooks ul.products > li.product .dh-loop-product-title {
  margin-top: 16px;
  font-size: 16px;
  line-height: 1.3;
}
body.page-about .FeaturedBooks ul.products > li.product .price {
  margin-top: 6px;
}
body.page-about .FeaturedBooks ul.products > li.product .button {
  margin-top: auto;
  align-self: center;
}
@media (max-width: 1199px) {
  body.page-about .FeaturedBooks ul.products > li.product {
    flex: 0 0 calc((100% - 24px) / 2); /* 2-up on tablet */
  }
}
@media (max-width: 600px) {
  body.page-about .FeaturedBooks ul.products > li.product {
    flex: 0 0 100%;
  }
}


/* ----- My Books page: uniform cover sizes + spacing -----
   Each book row has a BookImage column. Constrain it to a max width and
   force a fixed aspect ratio so every cover renders at the same size,
   regardless of source-image dimensions. */
body.page-books .BookImage,
body.page-books .book-image-wrapper,
body.page-books .PageFlipBook {
  max-width: 320px;
  margin-left: auto;
  margin-right: auto;
}
body.page-books .PageFlipBook a {
  display: block;
  aspect-ratio: 2 / 3;
  overflow: hidden;
  background: #1a1612;
}
body.page-books .PageFlipBook img,
body.page-books .BookImage img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Add room between each book row */
body.page-books section[data-series] {
  margin-bottom: 100px;
}
body.page-books section[data-series] .fw-row {
  margin-bottom: 80px;
  padding-top: 40px;
  border-top: 1px dotted rgba(133, 109, 77, 0.25);
}
body.page-books section[data-series] .fw-row:first-of-type {
  border-top: none;
  padding-top: 0;
}


/* ----- Coming Soon page: room before the footer ----- */
body.page-coming-soon .fw-page-builder-content {
  padding-bottom: 120px;
}


/* ----- Contact Me page: maze covers the whole page -----
   Originally only the .EventsHeader banner showed garden.webp. Stretch
   the same image across the entire page-contact body so the form sits
   on the maze too. */
body.page-contact {
  background-image: url('/uploads/2024/06/garden.webp');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  background-repeat: no-repeat;
}
body.page-contact .MAIN-CONTENT,
body.page-contact .Header,
body.page-contact .footer {
  position: relative;
  z-index: 1;
}
body.page-contact .MAIN-CONTENT { background-color: transparent; }
/* The contact form section ships with an .overlay-color div which is fully
   opaque. Hide it and apply our own dark reddish-brown tint directly on the
   section so the maze still shows through but the form text/inputs are
   plainly readable. */
body.page-contact #shortcode-contact > .overlay-color { display: none; }
body.page-contact #shortcode-contact {
  background-color: #230e0eab;
}
/* Drop the EventsHeader banner so the maze is presented as one continuous
   image — the duplicated banner image at the top was visually awkward. */
body.page-contact .EventsHeader { display: none; }
/* Give the contact-form section room to breathe on a full-bleed bg. */
body.page-contact #shortcode-contact {
  padding-top: 100px;
  padding-bottom: 120px;
}
/* Drop a soft tint behind the form so the white inputs and labels stay
   readable on top of the busy garden image. */
body.page-contact .TextBlock#shortcode-contact-form,
body.page-contact .SpecialTextBlock#shortcode-contact-heading {
  background-color: rgba(133, 109, 77, 0.72);
  padding: 30px;
  border-radius: 4px;
}
body.page-contact .SpecialTextBlock#shortcode-contact-heading {
  margin-bottom: 20px;
}


/* ----- About Me page: room before the footer + below the menu ----- */
body.page-about .fw-page-builder-content {
  padding-bottom: 120px;
  padding-top: 60px;
}


/* ----- Book detail page: room above and below the content ----- */
body.single-book .SingleProduct {
  padding-bottom: 120px;
  padding-top: 60px;
}


/* ----- Newsletter signup page: same treatment + maze backdrop ----- */
body.page-newsletter .fw-page-builder-content {
  padding-bottom: 120px;
  padding-top: 60px;
}


/* ===== Homepage upcoming-book Pre-Order CTA ===== */
/* Sit it nicely below the description with breathing room and the same
   filled-button look as Buy Now on the detail page. */
.upcoming-book-content .upcoming-book-cta {
  display: inline-block;
  margin: 8px 0 24px;
  padding: 14px 36px;
  background: #856d4d;
  color: #fff !important;
  border: 1px solid #856d4d;
  border-radius: 2px;
  font-family: 'Cinzel Decorative', Georgia, serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s, transform 0.15s, box-shadow 0.15s;
  box-shadow: 0 4px 14px rgba(133, 109, 77, 0.25);
}
.upcoming-book-content .upcoming-book-cta:hover {
  background: #6b5b3e;
  border-color: #6b5b3e;
  color: #fff !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(133, 109, 77, 0.35);
}


/* ===== Reveal-on-scroll animations =====
   Add class="reveal-up", "reveal-fade", or "reveal-zoom" to any element.
   The runner in BaseLayout adds .is-revealed when it enters the viewport.
   Honors prefers-reduced-motion (handled in the JS — reduced motion users get
   the final state immediately, never the transition). */
.reveal-up,
.reveal-fade,
.reveal-zoom {
  opacity: 0;
  will-change: opacity, transform;
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}
.reveal-up { transform: translateY(28px); }
.reveal-zoom { transform: scale(0.96); }

.reveal-up.is-revealed,
.reveal-fade.is-revealed,
.reveal-zoom.is-revealed {
  opacity: 1;
  transform: none;
}

/* Per-element delay helpers, useful for sequencing (e.g. heading first,
   description second). Add data-reveal-delay="120" to defer 120ms. */
[data-reveal-delay="80"] { transition-delay: 0.08s; }
[data-reveal-delay="120"] { transition-delay: 0.12s; }
[data-reveal-delay="200"] { transition-delay: 0.2s; }
[data-reveal-delay="300"] { transition-delay: 0.3s; }
[data-reveal-delay="450"] { transition-delay: 0.45s; }


/* ===== Contact page polish (matches the WP screenshot) ===== */
/* Drop the brown tint behind the form/heading so the maze reads cleanly,
   and let the inputs' white backgrounds carry contrast on their own. */
body.page-contact .TextBlock#shortcode-contact-form,
body.page-contact .SpecialTextBlock#shortcode-contact-heading {
  background: transparent;
  padding: 0;
}
body.page-contact .SpecialTextBlock#shortcode-contact-heading { margin-bottom: 40px; }
body.page-contact .SpecialTextBlock#shortcode-contact-heading .special-title,
body.page-contact .SpecialTextBlock#shortcode-contact-heading .special-subtitle {
  color: #fff;
}
body.page-contact .contact-form { max-width: 720px; margin: 0 auto; }
body.page-contact .contact-form label,
body.page-contact .contact-form .sublabel { color: #fff; }
body.page-contact .contact-form .button {
  background: transparent;
  color: #fff;
  border: 1px solid #fff;
  padding: 12px 28px;
  font-family: 'Cinzel Decorative', Georgia, serif;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s;
}
body.page-contact .contact-form .button:hover {
  background: #fff;
  color: #1c1814;
}
body.page-contact .contact-form .recaptcha-notice { color: rgba(255, 255, 255, 0.85); }