/*
Theme Name: Divi Child
Theme URI: https://www.elegantthemes.com/gallery/divi/
Description: Child theme for Divi
Author: Your Name
Template: Divi
Version: 1.0.0
*/

/* ========== YOUR CUSTOM CSS BELOW THIS LINE ========== */

/* =========================================================
   SITE CSS INDEX

   01. SERMON META ......................... search: .zhl-sermon-meta
   02. SHARE BUTTONS ....................... search: .zhl-share-module
   03. COPY TOAST .......................... search: #copy-toast
   04. DESKTOP MENU UNDERLINE .............. search: .et-menu-nav li.current-menu-item > a
   05. AUDIO PLAYER + MORE WAYS ............ search: .zhl-audio-module
   06. AUDIO PLAYER — TABLET ............... search: @media (max-width: 1024px)
   07. AUDIO PLAYER — PHONE ................ search: @media (max-width: 767px)
   08. BOOKS ARCHIVE — FILTER .............. search: .zhl-books-filter
   09. BOOKS ARCHIVE — GRID CONTAINER ...... search: .zhl-books-archive-loop
   10. BOOKS ARCHIVE — CARD VISUALS ........ search: .zhl-book-card-title
   11. BOOKS ARCHIVE — TABLET .............. search: @media (max-width: 980px)
   12. BOOKS ARCHIVE — PHONE ............... search: .zhl-book-card-cover

========================================================= */





/* =========================================================
   SERMON META — STABLE MOBILE/DESKTOP SIZE
========================================================= */

.zhl-sermon-meta {
  font-family: inherit !important;
  font-size: 18px !important;
  line-height: 1.45 !important;
}

.zhl-sermon-meta p {
  margin: 0 0 8px !important;
  padding-bottom: 0 !important;
}

.zhl-sermon-meta a,
.zhl-sermon-meta strong {
  font-size: inherit !important;
  line-height: inherit !important;
}

.zhl-sermon-meta strong {
  font-weight: 700 !important;
}

@media (max-width: 767px) {
  .zhl-sermon-meta {
    font-size: 18px !important;
    line-height: 1.45 !important;
  }
}





/* =========================================================
   SOCIAL MEDIA BUTTONS — Clean Gray Style
========================================================= */

.zhl-share-module .basic-share-icons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.zhl-share-module .share-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  min-width: 26px;
  min-height: 26px;
  padding: 0;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  border: none;
  border-radius: 7px;
  background-color: #aaaab3;
  box-shadow: none;
  overflow: hidden;
  appearance: none;
  -webkit-appearance: none;
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.zhl-share-module .share-icon:hover,
.zhl-share-module .share-icon:focus-visible {
  background-color: #8e8e98;
  transform: translateY(-1px);
}

.zhl-share-module .share-icon svg {
  display: block;
}

.zhl-share-module .share-icon.facebook svg {
  width: 23px;
  height: 23px;
}

.zhl-share-module .share-icon.share-native svg,
.zhl-share-module .share-icon .share-icon-glyph {
  width: 18px;
  height: 18px;
}

.zhl-share-module .share-icon .share-icon-glyph {
  display: inline-block;
  min-width: 18px;
  min-height: 18px;
  flex: 0 0 18px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 18px 18px;
}

/* X icon */
.zhl-share-module .share-icon.x .share-icon-glyph {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23ffffff' d='M18.24 2H21l-6.56 7.5L22.16 22h-6.04l-4.73-6.18L5.98 22H3.22l7.02-8.02L2.84 2h6.2l4.28 5.6L18.24 2zm-1.06 18h1.53L6.01 3.9H4.37L17.18 20z'/%3E%3C/svg%3E");
}

/* Email icon */
.zhl-share-module .share-icon.email .share-icon-glyph {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23ffffff' d='M3 6.75A1.75 1.75 0 0 1 4.75 5h14.5A1.75 1.75 0 0 1 21 6.75v10.5A1.75 1.75 0 0 1 19.25 19H4.75A1.75 1.75 0 0 1 3 17.25V6.75zm1.57.08L12 12.1l7.43-5.27a.25.25 0 0 0-.18-.08H4.75a.25.25 0 0 0-.18.08zM19.5 8.66l-6.92 4.91a1 1 0 0 1-1.16 0L4.5 8.66v8.59c0 .14.11.25.25.25h14.5c.14 0 .25-.11.25-.25V8.66z'/%3E%3C/svg%3E");
}

#copy-toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  z-index: 999999;
  padding: 9px 16px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  color: #fff;
  background: #1f1f1f;
  border-radius: 9999px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.22);
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(-50%) translateY(10px);
  transition: opacity 0.22s ease, visibility 0.22s ease, transform 0.22s ease;
}

#copy-toast.show {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}


/* =========================================================
   DESKTOP MENU UNDERLINE EFFECT
========================================================= */

.et-menu-nav li.current-menu-item > a {
  position: relative;
  display: inline-block;
}

.et-menu-nav li.current-menu-item > a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -3px;
  width: 100%;
  height: 1px;
  background: #ccc;
}


/* =========================================================
   AUDIO PLAYER + MORE WAYS
========================================================= */

.zhl-audio-module {
  margin-bottom: 0 !important;
}

.zhl-audio-module .zhl-audio-player {
  margin: 0 0 12px !important;
}

.zhl-audio-module .zhl-audio-player audio {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
}

.zhl-audio-module .zhl-more-ways-wrap {
  margin: 0 !important;
  text-align: center !important;
}

.zhl-audio-module .zhl-more-ways-toggle {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  padding: 8px 16px !important;
  box-sizing: border-box !important;
  cursor: pointer !important;
  border: 1px solid #cccccc !important;
  border-radius: 10px !important;
  background: #ffffff !important;
  color: #000 !important;
  font-family: Inter, sans-serif !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
}

.zhl-audio-module .zhl-more-ways-toggle:hover {
  background: #ececec !important;
}

.zhl-audio-module .zhl-more-ways-panel {
  margin-top: 12px !important;
}

.zhl-audio-module .zhl-more-ways-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 240px)) !important;
  justify-content: center !important;
  align-items: start !important;
  gap: 10px !important;
}

.zhl-audio-module .zhl-more-ways-link {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  align-self: start !important;
  gap: 8px !important;
  min-height: auto !important;
  height: auto !important;
  padding: 8px 10px !important;
  box-sizing: border-box !important;
  line-height: 1.2 !important;
  text-decoration: none !important;
  border: 1px solid #d9d9d9 !important;
  border-radius: 8px !important;
  background: #fff !important;
  color: #111 !important;
  font-family: Inter, sans-serif !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
}

.zhl-audio-module .zhl-more-ways-link:hover {
  background: #f5f5f5 !important;
  text-decoration: none !important;
}

.zhl-audio-module .zhl-more-ways-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 20px !important;
  height: 20px !important;
  flex: 0 0 20px !important;
  line-height: 1 !important;
}

.zhl-audio-module .zhl-more-ways-icon svg {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
}

/* YouTube icon only */
.zhl-audio-module .zhl-more-ways-youtube .zhl-more-ways-icon {
  color: #ff0000 !important;
}

.zhl-audio-module .zhl-more-ways-youtube:hover .zhl-more-ways-icon {
  color: #cc0000 !important;
}

.zhl-audio-module .zhl-more-ways-youtube .zhl-more-ways-icon svg {
  fill: currentColor !important;
}

/* tighten the gap under the media block */
.zhl-post-content-after-media {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

.zhl-post-content-after-media .et_pb_text_0 {
  margin-bottom: 0 !important;
}

.zhl-post-content-after-media .et_pb_text_1 {
  margin-top: 4px !important;
}


/* =========================================================
   AUDIO PLAYER — TABLET
========================================================= */

@media (max-width: 1024px) {
  .zhl-audio-module .zhl-audio-player {
    margin: 0 0 16px !important;
    padding: 10px !important;
    box-sizing: border-box !important;
    border: 1px solid #e3e3e3 !important;
    border-radius: 12px !important;
    background: #f7f7f7 !important;
  }

  .zhl-audio-module .zhl-audio-player audio {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .zhl-audio-module .zhl-more-ways-toggle {
    padding: 10px 18px !important;
    font-size: 17px !important;
  }

  .zhl-audio-module .zhl-more-ways-link {
    padding: 10px 14px !important;
    font-size: 15px !important;
  }

  .zhl-audio-module .zhl-more-ways-icon {
    width: 20px !important;
    height: 20px !important;
    flex: 0 0 20px !important;
  }
}


/* =========================================================
   AUDIO PLAYER — PHONE
========================================================= */

@media (max-width: 767px) {
  .zhl-audio-module .zhl-more-ways-grid {
    grid-template-columns: 1fr !important;
    justify-content: stretch !important;
  }

  .zhl-audio-module .zhl-more-ways-toggle {
    padding: 10px 18px !important;
    font-size: 16px !important;
  }

  .zhl-audio-module .zhl-more-ways-link {
    padding: 10px 14px !important;
    font-size: 15px !important;
  }

  .zhl-audio-module .zhl-more-ways-icon {
    width: 20px !important;
    height: 20px !important;
    flex: 0 0 20px !important;
  }
}


/* =========================================================
   BOOKS ARCHIVE
   Structural CSS for Divi 5 loops
========================================================= */

.zhl-books-filter-section {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.zhl-books-filter-row {
  width: 80% !important;
  max-width: 1080px !important;
  margin: 0 auto !important;
  padding: 0 !important;
}

.zhl-books-filter {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 22px !important;
  margin: 6px 0 22px !important;
}

.zhl-books-filter a {
  display: inline-block !important;
  text-decoration: none !important;
}

.zhl-books-filter a:hover {
  text-decoration: underline !important;
}

.zhl-books-filter a.is-active {
  color: #111827 !important;
  font-weight: 600 !important;
  text-decoration: underline !important;
  text-underline-offset: 4px;
}

.zhl-books-filter-context {
  display: inline-block;
  color: #6b7280;
  font-family: Inter, sans-serif;
  font-size: 14px;
  line-height: 1.5;
}


/* =========================================================
   BOOKS ARCHIVE — GRID CONTAINER
========================================================= */

.zhl-books-archive-loop,
.zhl-books-archive-loop.et_pb_section,
.zhl-books-archive-loop.et_flex_section {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  column-gap: 32px !important;
  row-gap: 34px !important;
  align-items: start !important;
  width: 80% !important;
  max-width: 1080px !important;
  margin: 0 auto !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.zhl-books-archive-loop > .zhl-books-archive-grid,
.zhl-books-archive-loop > .zhl-books-archive-grid.et_pb_row,
.zhl-books-archive-loop > .zhl-books-archive-grid.et_flex_row {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

.zhl-books-archive-loop > .zhl-books-archive-grid > .et_pb_column {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}


/* =========================================================
   BOOKS ARCHIVE — CARD VISUALS
========================================================= */

.zhl-book-card-cover {
  margin-bottom: 16px !important;
}

.zhl-book-card-cover a,
.zhl-book-card-cover .et_pb_image_wrap {
  display: block !important;
}

.zhl-book-card-cover img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  box-shadow: 6px 6px 18px rgba(0, 0, 0, 0.06) !important;
}

.zhl-book-card-title {
  margin-bottom: 18px !important;
  text-align: left !important;
}

.zhl-book-card-title .et_pb_text_inner p {
  margin: 0 !important;
  padding-bottom: 0 !important;
  color: #374151 !important;
  font-family: Inter, sans-serif !important;
  font-size: 17px !important;
  font-weight: 500 !important;
  line-height: 1.45 !important;
}

.zhl-book-card-edition {
  margin-bottom: 0 !important;
  text-align: left !important;
}

.zhl-book-card-edition .et_pb_text_inner p {
  margin: 0 !important;
  padding-bottom: 0 !important;
  color: #4b5563 !important;
  font-family: Inter, sans-serif !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
}


/* =========================================================
   BOOKS ARCHIVE — TABLET
========================================================= */

@media (max-width: 980px) {
  .zhl-books-filter-row {
    width: 84% !important;
    max-width: 920px !important;
  }

  .zhl-books-archive-loop,
  .zhl-books-archive-loop.et_pb_section,
  .zhl-books-archive-loop.et_flex_section {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    column-gap: 24px !important;
    row-gap: 32px !important;
    width: 84% !important;
    max-width: 920px !important;
  }

  .zhl-book-card-title .et_pb_text_inner p {
    font-size: 16px !important;
  }
}

/* =========================================================
   BOOKS ARCHIVE — PHONE
========================================================= */

@media (max-width: 767px) {
  .zhl-books-filter-row {
    width: 84% !important;
    max-width: 640px !important;
  }

  .zhl-books-filter {
    gap: 14px !important;
    margin: 0 0 18px !important;
  }

  .zhl-books-filter-context {
    font-size: 13px;
  }

  .zhl-books-archive-loop,
  .zhl-books-archive-loop.et_pb_section,
  .zhl-books-archive-loop.et_flex_section {
    grid-template-columns: 1fr !important;
    row-gap: 28px !important;
    width: 84% !important;
    max-width: 640px !important;
  }

  .zhl-book-card-cover {
    max-width: 180px !important;
    margin: 0 auto 12px !important;
  }

  .zhl-book-card-title,
  .zhl-book-card-edition {
    text-align: center !important;
  }

  .zhl-book-card-title .et_pb_text_inner p {
    font-size: 18px !important;
    line-height: 1.35 !important;
  }
}

/* =========================================================
   HEADER / MENU FIX
   Keeps header and dropdowns above everything
   Restores normal mobile menu width
   Centers hamburger and mobile menu text
========================================================= */

header.et-l.et-l--header {
    position: relative !important;
    z-index: 99999 !important;
}

/* Desktop dropdown above page content */
.et_pb_menu .et-menu li ul.sub-menu,
.et_pb_menu .et_pb_menu_inner .sub-menu {
    z-index: 100000 !important;
}

/* Mobile dropdown menu */
.et_mobile_menu {
    z-index: 100001 !important;
    width: 100% !important;
    max-width: 100% !important;
    left: 0 !important;
    right: 0 !important;
    box-sizing: border-box !important;
    text-align: center !important;
}

/* Mobile nav wrapper */
.et_mobile_nav_menu {
    z-index: 100001 !important;
    text-align: center !important;
}

/* Hamburger icon */
.et_mobile_nav_menu .mobile_menu_bar {
    display: block !important;
    margin: 0 auto !important;
    text-align: center !important;
    float: none !important;
}

/* Hamburger icon lines */
.et_mobile_nav_menu .mobile_menu_bar:before {
    display: block !important;
    text-align: center !important;
}

/* Center mobile menu items */
.et_mobile_menu li,
.et_mobile_menu li a {
    text-align: center !important;
}

/* Optional: remove left padding/indent from menu links */
.et_mobile_menu li a {
    padding-left: 0 !important;
    padding-right: 0 !important;
}