/*
Theme Name: Divi Child
Theme URI: https://www.elegantthemes.com/gallery/divi/
Description: Clean Biochar Club child theme for Divi
Author: Biochar Club
Author URI: https://www.biocharclub.com/
Template: Divi
Version: 14.0.0
*/

/* =========================================================
   V24 - Force hamburger menu on tablet / narrow desktop
   =========================================================
   Divi's default mobile menu breakpoint is too low for this
   header because the logo and large mono navigation text do
   not fit on tablet-width screens. This forces the Divi menu
   module and default Divi header to use the hamburger menu
   before the desktop navigation starts clipping.
   ========================================================= */

@media only screen and (max-width: 1180px) {
  /* Divi Theme Builder / Menu module */
  .et_pb_menu .et_pb_menu__menu,
  .et_pb_fullwidth_menu .et_pb_menu__menu {
    display: none !important;
  }

  .et_pb_menu .et_mobile_nav_menu,
  .et_pb_fullwidth_menu .et_mobile_nav_menu {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    margin-left: auto !important;
  }

  .et_pb_menu .et_pb_menu__wrap,
  .et_pb_fullwidth_menu .et_pb_menu__wrap {
    justify-content: flex-end !important;
  }

  .et_pb_menu .mobile_nav,
  .et_pb_fullwidth_menu .mobile_nav {
    display: block !important;
    line-height: 1 !important;
  }

  .et_pb_menu .mobile_menu_bar,
  .et_pb_fullwidth_menu .mobile_menu_bar {
    display: block !important;
    position: relative !important;
    width: 44px !important;
    height: 44px !important;
    line-height: 44px !important;
    text-align: center !important;
    cursor: pointer !important;
  }

  .et_pb_menu .mobile_menu_bar::before,
  .et_pb_fullwidth_menu .mobile_menu_bar::before {
    color: #ffffff !important;
    font-size: 42px !important;
    line-height: 44px !important;
  }

  .et_pb_menu .et_mobile_menu,
  .et_pb_fullwidth_menu .et_mobile_menu {
    position: absolute !important;
    top: 100% !important;
    left: auto !important;
    right: 0 !important;
    width: min(360px, calc(100vw - 32px)) !important;
    max-width: calc(100vw - 32px) !important;
    padding: 14px 0 !important;
    border-top: 3px solid #ffffff !important;
    background: #000000 !important;
    list-style: none !important;
    z-index: 999999 !important;
  }

  .et_pb_menu .et_mobile_menu li,
  .et_pb_fullwidth_menu .et_mobile_menu li {
    display: block !important;
    width: 100% !important;
    list-style: none !important;
  }

  .et_pb_menu .et_mobile_menu li a,
  .et_pb_fullwidth_menu .et_mobile_menu li a {
    display: block !important;
    width: 100% !important;
    padding: 13px 22px !important;
    color: #ffffff !important;
    font-family: "IBM Plex Mono", monospace !important;
    font-size: 20px !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.18) !important;
    box-sizing: border-box !important;
  }

  .et_pb_menu .et_mobile_menu li:last-child a,
  .et_pb_fullwidth_menu .et_mobile_menu li:last-child a {
    border-bottom: 0 !important;
  }

  /* Default Divi header fallback, if this page is using the normal Divi primary menu. */
  #top-menu-nav,
  #top-menu {
    display: none !important;
  }

  #et_mobile_nav_menu {
    display: block !important;
    float: right !important;
  }

  #main-header #et_mobile_nav_menu .mobile_menu_bar::before {
    color: #ffffff !important;
    font-size: 42px !important;
  }

  #main-header .et_mobile_menu {
    background: #000000 !important;
    border-top: 3px solid #ffffff !important;
    z-index: 999999 !important;
  }

  #main-header .et_mobile_menu li a {
    color: #ffffff !important;
    font-family: "IBM Plex Mono", monospace !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
  }
}

/* =========================================================
   Biochar Club site footer
   ========================================================= */

/* Keep the footer at the bottom of short pages */
html,
body {
  min-height: 100%;
}

body {
  min-height: 100vh;
}

#page-container {
  display: flex !important;
  flex-direction: column !important;
  min-height: 100vh !important;
}

#et-main-area {
  display: flex !important;
  flex: 1 0 auto !important;
  flex-direction: column !important;
  width: 100% !important;
}

#main-content {
  flex: 1 0 auto !important;
}

.et-l--footer {
  flex: 0 0 auto !important;
  margin-top: auto !important;
}

/* Remove Divi spacing around the custom footer */
.bat-footer-section.et_pb_section {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  background: #000000 !important;
}

.bat-footer-row.et_pb_row {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.bat-footer-row .et_pb_column {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

.bat-footer-code.et_pb_module,
.bat-footer-code .et_pb_code_inner {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Footer bar */
.bat-site-footer {
  width: 100%;
  margin: 0;
  padding: 0;
  background: #000000;
  border-top: 2px solid #ffffff;
  color: #ffffff;
  box-sizing: border-box;
}

.bat-site-footer__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 50px;

  width: 100%;
  max-width: 1400px;
  min-height: 62px;

  margin: 0 auto;
  padding: 0 25px;
  box-sizing: border-box;

  font-family: "IBM Plex Sans", Arial, sans-serif;
  font-size: 20px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: none;
}

.bat-site-footer__copyright {
  flex: 0 0 auto;
  margin: 0;
  padding: 0;
  color: #ffffff;
  white-space: nowrap;
}

.bat-site-footer__links {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: flex-end;
  gap: clamp(45px, 6vw, 100px);
  margin: 0;
  padding: 0;
}

.bat-site-footer__links a,
.bat-site-footer__links a:link,
.bat-site-footer__links a:visited,
.bat-site-footer__privacy,
.bat-site-footer__privacy:link,
.bat-site-footer__privacy:visited {
  margin: 0;
  padding: 0;
  color: #ffffff !important;
  font: inherit;
  text-decoration: none !important;
  white-space: nowrap;
}

.bat-site-footer__links a:hover,
.bat-site-footer__links a:focus,
.bat-site-footer__privacy:hover,
.bat-site-footer__privacy:focus {
  color: #ffffff !important;
  opacity: 0.7;
  text-decoration: none !important;
}

/* Tablet */
@media only screen and (max-width: 1100px) {
  .bat-site-footer__inner {
    gap: 30px;
    font-size: 17px;
  }

  .bat-site-footer__links {
    gap: 30px;
  }
}

/* Mobile */
@media only screen and (max-width: 767px) {
  .bat-site-footer__inner {
    flex-direction: column;
    justify-content: center;
    gap: 20px;

    width: 100%;
    min-height: auto;
    padding: 25px 20px;

    font-size: 17px;
    line-height: 1.4;
    text-align: center;
  }

  .bat-site-footer__copyright,
  .bat-site-footer__privacy {
    white-space: normal;
  }

  .bat-site-footer__links {
    width: 100%;
    flex-direction: column;
    justify-content: center;
    gap: 14px;
  }

  .bat-site-footer__links a {
    text-align: center;
    white-space: normal;
  }
}

/* =========================================================
   Biochar Club global header
   Matches the main Biochar Club Wix website header

   Divi Theme Builder structure:
   Section class: bat-global-header
   Row class:     bat-global-header-row
   Image class:   bat-global-header-logo
   Menu class:    bat-global-header-menu
   ========================================================= */

:root {
  --bat-global-header-green: #000000;
  --bat-global-header-height: 72px;
  --bat-global-header-inner-width: 992px;
  --bat-global-header-right-inset: 30px;
  --bat-global-header-menu-gap: 37px;
  --bat-global-header-font: "IBM Plex Sans", Arial, sans-serif;
  --bat-global-header-active: #dec493;
}

/* Header bar */
.bat-global-header.et_pb_section {
  width: 100% !important;
  min-height: var(--bat-global-header-height) !important;
  height: var(--bat-global-header-height) !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  background: var(--bat-global-header-green) !important;
  border: 0 !important;
  border-bottom: 1px solid #ffffff !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
}

/* Wix-width centred row */
.bat-global-header .bat-global-header-row.et_pb_row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;

  width: calc(100% - 48px) !important;
  max-width: var(--bat-global-header-inner-width) !important;
  min-height: calc(var(--bat-global-header-height) - 1px) !important;
  height: calc(var(--bat-global-header-height) - 1px) !important;

  margin: 0 auto !important;
  padding: 0 var(--bat-global-header-right-inset) 0 0 !important;

  box-sizing: border-box !important;
}

/* Remove Divi column sizing and spacing */
.bat-global-header .bat-global-header-row > .et_pb_column {
  display: flex !important;
  align-items: center !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

.bat-global-header .bat-global-header-row > .et_pb_column:first-child {
  flex: 0 0 auto !important;
  width: auto !important;
  justify-content: flex-start !important;
}

.bat-global-header .bat-global-header-row > .et_pb_column:last-child {
  flex: 1 1 auto !important;
  width: auto !important;
  justify-content: flex-end !important;
}

/*
 * Use text for the visible logo so its size and spacing match the
 * Biochar Club site exactly, without being affected by transparent
 * padding inside the uploaded logo image.
 */
.bat-global-header-logo.et_pb_module,
.bat-global-header-logo .et_pb_image_wrap {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  position: relative !important;

  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
}

.bat-global-header-logo .et_pb_image_wrap::after {
  content: "BIOCHAR CLUB";
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;

  color: #ffffff !important;
  font-family: "DIN Bold", "DIN", Arial, sans-serif !important;
  font-size: 40px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
}

/* Keep the original image in the DOM for its alt text/link, but not visually. */
.bat-global-header-logo img {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  max-width: 1px !important;
  max-height: 1px !important;
  margin: 0 !important;
  padding: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Menu module wrappers */
.bat-global-header-menu.et_pb_module,
.bat-global-header-menu .et_pb_menu_inner_container,
.bat-global-header-menu .et_pb_menu__wrap,
.bat-global-header-menu .et_pb_menu__menu,
.bat-global-header-menu .et_pb_menu__menu > nav {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;

  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
}

/* Desktop menu row */
.bat-global-header-menu .et_pb_menu__menu > nav > ul {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: var(--bat-global-header-menu-gap) !important;

  margin: 0 !important;
  padding: 0 !important;
}

/* Remove Divi's default menu-item spacing */
.bat-global-header-menu .et_pb_menu__menu > nav > ul > li {
  margin: 0 !important;
  padding: 0 !important;
}

/* Desktop menu links */
.bat-global-header-menu .et_pb_menu__menu > nav > ul > li > a,
.bat-global-header-menu .et_pb_menu__menu > nav > ul > li > a:link,
.bat-global-header-menu .et_pb_menu__menu > nav > ul > li > a:visited {
  display: block !important;

  margin: 0 !important;
  padding: 0 !important;

  color: #ffffff !important;
  background: transparent !important;

  font-family: var(--bat-global-header-font) !important;
  font-size: 17px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  white-space: nowrap !important;

  border: 0 !important;
  box-shadow: none !important;
  opacity: 1 !important;
  text-decoration: none !important;
  transition: color 0.15s ease !important;
}

/* Hover/focus colour */
.bat-global-header-menu .et_pb_menu__menu > nav > ul > li > a:hover,
.bat-global-header-menu .et_pb_menu__menu > nav > ul > li > a:focus {
  color: var(--bat-global-header-active) !important;
  opacity: 1 !important;
  text-decoration: none !important;
}

/* Current page: gold text, no underline */
.bat-global-header-menu .et_pb_menu__menu > nav > ul > li.current-menu-item > a,
.bat-global-header-menu .et_pb_menu__menu > nav > ul > li.current_page_item > a,
.bat-global-header-menu .et_pb_menu__menu > nav > ul > li.current-menu-ancestor > a,
.bat-global-header-menu .et_pb_menu__menu > nav > ul > li > a[aria-current="page"] {
  color: var(--bat-global-header-active) !important;
  text-decoration: none !important;
}

/* Remove Divi dropdown indicator space where applicable */
.bat-global-header-menu .menu-item-has-children > a:first-child {
  padding-right: 0 !important;
}

.bat-global-header-menu .menu-item-has-children > a:first-child::after {
  display: none !important;
}

/* =========================================================
   Global header tablet/mobile
   ========================================================= */

@media only screen and (max-width: 1180px) {
  :root {
    --bat-global-header-height: 72px;
    --bat-global-header-right-inset: 0px;
  }

  .bat-global-header .bat-global-header-row.et_pb_row {
    width: calc(100% - 48px) !important;
    max-width: none !important;
    padding-right: 0 !important;
  }

  .bat-global-header-logo .et_pb_image_wrap::after {
    font-size: 36px !important;
  }

  .bat-global-header-menu .et_pb_menu__menu {
    display: none !important;
  }

  .bat-global-header-menu .et_mobile_nav_menu {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .bat-global-header-menu .mobile_nav {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
  }

  .bat-global-header-menu .mobile_menu_bar {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
  }

  .bat-global-header-menu .mobile_menu_bar::before {
    color: #ffffff !important;
    font-size: 34px !important;
    line-height: 1 !important;
  }

  .bat-global-header-menu .et_mobile_menu {
    left: auto !important;
    right: 0 !important;
    top: calc(100% + 10px) !important;

    width: 320px !important;
    max-width: calc(100vw - 48px) !important;

    margin: 0 !important;
    padding: 10px 0 !important;

    background: #000000 !important;
    border-top: 1px solid #ffffff !important;
    box-shadow: none !important;
  }

  .bat-global-header-menu .et_mobile_menu li {
    margin: 0 !important;
    padding: 0 !important;
  }

  .bat-global-header-menu .et_mobile_menu li a {
    color: #ffffff !important;
    background: transparent !important;

    font-family: var(--bat-global-header-font) !important;
    font-size: 17px !important;
    font-weight: 400 !important;
    line-height: 1.25 !important;
    text-transform: none !important;
    text-decoration: none !important;

    padding: 14px 20px !important;
  }

  .bat-global-header-menu .et_mobile_menu li.current-menu-item > a,
  .bat-global-header-menu .et_mobile_menu li.current_page_item > a,
  .bat-global-header-menu .et_mobile_menu li a:hover,
  .bat-global-header-menu .et_mobile_menu li a:focus {
    color: var(--bat-global-header-active) !important;
  }
}

@media only screen and (max-width: 767px) {
  :root {
    --bat-global-header-height: 64px;
  }

  .bat-global-header .bat-global-header-row.et_pb_row {
    width: calc(100% - 36px) !important;
  }

  .bat-global-header-logo .et_pb_image_wrap::after {
    font-size: 30px !important;
    letter-spacing: 0.5px !important;
  }

  .bat-global-header-menu .mobile_menu_bar::before {
    font-size: 32px !important;
  }

  .bat-global-header-menu .et_mobile_menu {
    top: calc(100% + 8px) !important;
    max-width: calc(100vw - 36px) !important;
  }
}

/* =========================================================
   V48 - Responsive hamburger alignment
   ========================================================= */

@media only screen and (max-width: 1180px) {
  .et_pb_menu .et_pb_menu_inner_container,
  .et_pb_fullwidth_menu .et_pb_menu_inner_container,
  .et_pb_menu .et_pb_menu__wrap,
  .et_pb_fullwidth_menu .et_pb_menu__wrap {
    width: 100% !important;
    max-width: none !important;
  }

  .et_pb_menu .et_mobile_nav_menu,
  .et_pb_fullwidth_menu .et_mobile_nav_menu {
    margin-right: 0 !important;
    margin-left: auto !important;
  }

  .bat-global-header .bat-global-header-row.et_pb_row {
    position: relative !important;
  }

  .bat-global-header .bat-global-header-row > .et_pb_column:last-child {
    position: static !important;
  }

  .bat-global-header-menu.et_pb_module {
    position: absolute !important;
    top: 50% !important;
    right: 0 !important;
    left: auto !important;
    width: 44px !important;
    max-width: 44px !important;
    margin: 0 !important;
    transform: translateY(-50%) !important;
    z-index: 1000000 !important;
  }

  .bat-global-header-menu .et_pb_menu_inner_container,
  .bat-global-header-menu .et_pb_menu__wrap {
    position: static !important;
    width: 44px !important;
    max-width: 44px !important;
  }

  .bat-global-header-menu .et_mobile_nav_menu {
    position: static !important;
    width: 44px !important;
    max-width: 44px !important;
  }

  #main-header .container {
    position: relative !important;
  }

  #main-header #et_mobile_nav_menu {
    position: absolute !important;
    top: 50% !important;
    right: 0 !important;
    left: auto !important;
    margin: 0 !important;
    transform: translateY(-50%) !important;
  }
}