/*
 Theme Name:  Divi Child Theme
 Theme URI:    https://divilife.com
 Description:  Child Theme for Divi
 Author:       Tim Strifler
 Author URI:   https://divilife.com
 Template:     Divi
 Version:      1.0.0
*/

/***** Add any custom CSS below this line *****/


/* === Make Divi Text Module toolbar sticky === */
/* In Visual Builder modal */
.et-fb-modal .mce-top-part,
.et-fb-modal .mce-toolbar-grp,
.et-fb-modal .wp-editor-tools {
  position: sticky !important;
  top: 0;                 /* sticks to top of modal */
  z-index: 9999;          /* ensure above editor body */
  background: #fff;       /* white background so it doesn’t overlap text */
  box-shadow: 0 1px 2px rgba(0,0,0,0.08);
}

/* In backend builder (classic mode) */
.et-db #et_pb_tiny_mce_buttons .mce-top-part,
.et-db #et_pb_tiny_mce_buttons .mce-toolbar-grp,
.et-db #et_pb_tiny_mce_buttons .wp-editor-tools {
  position: sticky !important;
  top: 32px;              /* accounts for WP admin bar */
  z-index: 9999;
  background: #fff;
}

/* =========================================
   MOOV Global Buttons
   Small + Large, Light + Dark
   No underline, arrow included, color swap
========================================= */

/* Reset link text-decoration */
.moov-btn,
.moov-btn:link,
.moov-btn:visited,
.moov-btn:hover,
.moov-btn:focus,
.moov-btn:active {
  text-decoration: none !important;
}

/* Base button */
.moov-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 16px;                      /* space between label and arrow */
  height: 40px;
  padding: 0 16px;
  border-radius: 8px;
  border: 0;
  font-family: "CaseLocal", sans-serif !important;
  font-size: 16px;
  line-height: 1.45;              /* 145% */
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease, box-shadow .2s ease;
}

/* Large size */
.moov-btn.btn--lg {
  height: 56px;
  padding: 0 24px;
}

/* Light variant */
.moov-btn.btn--light {
  background: #00FFE1;
  color: #000D1A;
}
.moov-btn.btn--light:hover,
.moov-btn.btn--light:focus-visible {
  background: #000D1A;
  color: #00FFE1;
}

/* Dark variant */
.moov-btn.btn--dark {
  background: #000D1A;
  color: #00FFE1;
}
.moov-btn.btn--dark:hover,
.moov-btn.btn--dark:focus-visible {
  background: #00FFE1;
  color: #000D1A;
}

/* Arrow icon (inline SVG) */
.moov-btn__icon {
  width: 12px;
  height: 12px;
  flex: 0 0 12px;
  display: inline-block;
}

/* Accessible focus ring */
.moov-btn:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* Fallback if mask isn’t supported */
@supports not ((mask: url("")) or (-webkit-mask: url(""))) {
  .moov-btn__icon {
    background: none;
    position: relative;
  }
  .moov-btn__icon::before {
    content: "›";
    font-size: 14px;
    line-height: 1;
  }
}

/* --- Marketo submit: scoped, exact tokens, body type --- */
/* Normalize wrappers and provide positioning context for overlay arrow */
.mktoForm.mkto-moov .mktoButtonRow,
.mktoForm.mkto-moov .mktoButtonWrap{
  display:block !important;
  width:100% !important;
  margin:0 !important;
  padding:0 !important;
  text-align:left !important;    /* left on desktop/tablet */
}
.mktoForm.mkto-moov .mktoButtonWrap{
  position:relative !important;  /* anchor for overlay arrow */
  color:#000D1A !important;      /* arrow follows currentColor */
}

/* Submit control: auto width by default (desktop/tablet) */
.mktoForm.mkto-moov button.mktoButton,
.mktoForm.mktoMoov input.mktoButton, /* graceful typo guard */
.mktoForm.mkto-moov input.mktoButton{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:16px !important;
  height:56px !important;              /* Large */
  padding:0 24px !important;           /* Large */
  box-sizing:border-box !important;
  border-radius:8px !important;
  border:0 !important;
  -webkit-appearance:none !important;

  /* Body typography (override .moov-btn default font/size) */
  font:var(--body-font, var(--body-w) var(--body-fs)/100% var(--body-family)) !important;

  background-color:#00FFE1 !important; /* Light default */
  color:#000D1A !important;
  background-image:none !important;     /* kill Marketo gradient */
}

/* Hover/focus palette on the control itself */
.mktoForm.mkto-moov button.mktoButton:hover,
.mktoForm.mkto-moov button.mktoButton:focus-visible,
.mktoForm.mkto-moov input.mktoButton:hover,
.mktoForm.mkto-moov input.mktoButton:focus-visible{
  background-color:#000D1A !important;
  color:#00FFE1 !important;
}

/* Wrapper-driven color for overlay arrow (no :has — use :focus-within) */
.mktoForm.mkto-moov .mktoButtonWrap:hover,
.mktoForm.mkto-moov .mktoButtonWrap:focus-within{
  color:#00FFE1 !important; /* overlay arrow stroke = currentColor */
}

/* BUTTONS: inline icon from JS must be 12×12 */
.mktoForm.mkto-moov button.mktoButton .moov-btn__icon{
  width:12px; height:12px; flex:0 0 12px; display:inline-block;
}

/* INPUTS: center text and create space for overlay arrow */
.mktoForm.mkto-moov input.mktoButton{
  text-align:center !important;
  padding-right:40px !important; /* room for overlay arrow */
}

/* Overlay arrow (for inputs; JS injects <span.moov-arrow-overlay><svg>…) */
.mktoForm.mkto-moov .moov-arrow-overlay{
  position:absolute; z-index:1; pointer-events:none;
  right:24px; top:50%; transform:translateY(-50%);
  width:12px; height:12px; display:block;
  color:currentColor; /* follows wrapper color */
}
.mktoForm.mkto-moov .moov-arrow-overlay svg{
  width:12px; height:12px; display:block;
}

/* Mobile only: full-width submit + tuck the arrow in */
@media (max-width:767px){
  .mktoForm.mkto-moov .mktoButtonWrap{ text-align:center !important; }
  .mktoForm.mkto-moov button.mktoButton,
  .mktoForm.mkto-moov input.mktoButton{ width:100% !important; }
  .mktoForm.mkto-moov .moov-arrow-overlay{ right:16px; }
}

/* Clamp the Marketo submit arrow to EXACTLY 12×12 on all breakpoints */
.mktoForm.mkto-moov button.mktoButton .moov-btn__icon{
  width:12px !important;
  height:12px !important;
  flex:0 0 12px !important;
  display:inline-block !important;
}

/* Ensure the inline SVG path keeps the square/miter 3px stroke */
.mktoForm.mkto-moov button.mktoButton svg.moov-btn__icon path{
  stroke-width:3 !important;
  stroke-linecap:square !important;
  stroke-linejoin:miter !important;
}

/* If you’re also using the input overlay arrow, lock that too */
.mktoForm.mkto-moov .moov-arrow-overlay svg{
  width:12px !important;
  height:12px !important;
  display:block !important;
}

/* Prevent the icon from being cropped on tiny viewports */
.mktoForm.mkto-moov button.mktoButton{ overflow:visible !important; }

/* Mobile (≤767px): remove arrow, re-center label, restore normal padding */
@media (max-width:767px){
  /* Hide any arrow variants */
  .mktoForm.mkto-moov .moov-arrow-overlay{ display:none !important; }           /* overlay for <input> */
  .mktoForm.mkto-moov button.mktoButton .moov-btn__icon{ display:none !important; } /* inline SVG in <button> */
  .mktoForm.mkto-moov input.mktoButton{ background-image:none !important; }     /* in case bg-image arrow exists */

  /* Put padding back to token value since no arrow space is needed */
  .mktoForm.mkto-moov button.mktoButton,
  .mktoForm.mkto-moov input.mktoButton{
    padding-right:24px !important;   /* same as left (0 24px) */
    justify-content:center !important;
    width:100% !important;           /* per your mobile full-width rule */
  }

  /* Center within the row */
  .mktoForm.mkto-moov .mktoButtonWrap{ text-align:center !important; }
}


/* ======================= */
/*  SITE-WIDE CONTAINERS   */
/* ======================= */

/* Desktop cap across site (normal rows only, not fullwidth specials) */
@media (min-width:1272px){
  .et_pb_section .et_pb_row:not(.et_pb_row_fullwidth):not(.et_pb_fullwidth_header):not(.et_pb_fullwidth_menu):not(.et_pb_fullwidth_portfolio){
    max-width:1272px !important;
    width:100% !important;
    margin-left:auto !important;
    margin-right:auto !important;
    padding-left:0 !important;
    padding-right:0 !important;
  }
}

/* Desktop between 1271px-981px): full width with 84px gutters */
@media (max-width:1271px) and (min-width:981px){
  .et_pb_row{
    width:100% !important;
    max-width:100% !important;
    margin-left:0 !important;
    margin-right:0 !important;
    padding-left:84px !important;
    padding-right:84px !important;
    box-sizing:border-box !important;
  }
}

/* Tablet (768px–980px): full width with 48px gutters */
@media (max-width:980px) and (min-width:768px){
  .et_pb_row{
    width:100% !important;
    max-width:100% !important;
    margin-left:0 !important;
    margin-right:0 !important;
    padding-left:48px !important;
    padding-right:48px !important;
    box-sizing:border-box !important;
  }
}

/* Mobile (≤767px): full width with 16px gutters */
@media (max-width:767px){
  .et_pb_row{
    width:100% !important;
    max-width:100% !important;
    margin-left:0 !important;
    margin-right:0 !important;
    padding-left:16px !important;
    padding-right:16px !important;
    box-sizing:border-box !important;
  }
}

/* ======================= */
/*   DESKTOP HEADER ONLY   */
/* ======================= */

@media (min-width:981px){
  /* Lock header container to 1272px and center it */
  .site-header .et_pb_row{
    max-width:1272px !important;
    margin-left:auto !important;
    margin-right:auto !important;
    padding-left:0 !important;
    padding-right:0 !important;
    display:flex !important;
    align-items:center !important;
    gap:0 !important;
  }

  /* Stop Divi's default 50/50 columns + remove internal padding */
  .site-header .et_pb_row > .et_pb_column,
  .site-header .et_pb_row > .et_pb_column_1_2{
    float:none !important;
    width:auto !important;
    max-width:none !important;
    padding:0 !important;
    margin:0 !important;
  }

  /* Left column (logo) = shrink to content */
  .site-header .et_pb_row > .et_pb_column:first-child{
    flex:0 0 auto !important;
  }

  /* Right column = flush right inside the 1272px container */
  .site-header .et_pb_row > .et_pb_column.hdr-right{
    flex:1 1 auto !important;
    margin-left:auto !important;
    padding-right:0 !important; /* set to 16/24 if you want a gutter */
    display:flex !important;
    align-items:center !important;
    justify-content:flex-end !important;
    gap:12px !important;
  }

  /* Kill hidden paddings/margins inside right cluster */
  .hdr-right .et_pb_module,
  .hdr-right .et_pb_button,
  .hdr-right .hdr-toggle{
    margin:0 !important;
    padding:0 !important;
  }

  /* Remove padding from Code modules (logo code block), if any */
  .site-header .et_pb_code .et_pb_code_inner{ padding:0 !important; }
}

/* ======================= */
/*   HEADER GUTTERS MATCH  */
/* ======================= */
/* Desktop (1271px–981px): header row with 84px gutters */
@media (max-width:980px) and (min-width:768px){
  .site-header .et_pb_row{
    width:100% !important;
    max-width:100% !important;
    margin-left:0 !important;
    margin-right:0 !important;
    padding-left:84px !important;
    padding-right:84px !important;
    box-sizing:border-box !important;

    display:flex !important;
    justify-content:space-between !important;
    align-items:center !important;
  }
  .site-header .et_pb_row .et_pb_column{
    display:flex !important;
    align-items:center !important;
    margin:0 !important;
    padding:0 !important;
  }
  .site-header .et_pb_row > .et_pb_column:first-child{ flex:0 0 auto !important; }
  .hdr-right{ flex:1 1 auto !important; justify-content:flex-end !important; }
}

    /* Safety: if any module styles try to fight width/position in the desktop band */
    @media (min-width:981px) and (max-width:1271px){
      .hero-img img{
      max-width:100% !important;
      position:static !important;
      transform:none !important;
      left:auto !important; right:auto !important;
      }
    }

/* Tablet (768px–980px): header row with 48px gutters */
@media (max-width:980px) and (min-width:768px){
  .site-header .et_pb_row{
    width:100% !important;
    max-width:100% !important;
    margin-left:0 !important;
    margin-right:0 !important;
    padding-left:48px !important;
    padding-right:48px !important;
    box-sizing:border-box !important;

    display:flex !important;
    justify-content:space-between !important;
    align-items:center !important;
  }
  .site-header .et_pb_row .et_pb_column{
    display:flex !important;
    align-items:center !important;
    margin:0 !important;
    padding:0 !important;
  }
  .site-header .et_pb_row > .et_pb_column:first-child{ flex:0 0 auto !important; }
  .hdr-right{ flex:1 1 auto !important; justify-content:flex-end !important; }
}

/* Mobile (≤767px): header row with 16px gutters */
@media (max-width:767px){
  .site-header .et_pb_row{
    width:100% !important;
    max-width:100% !important;
    margin-left:0 !important;
    margin-right:0 !important;
    padding-left:16px !important;
    padding-right:16px !important;
    box-sizing:border-box !important;

    display:flex !important;
    justify-content:space-between !important;
    align-items:center !important;
  }
  .site-header .et_pb_row .et_pb_column{
    display:flex !important;
    align-items:center !important;
    margin:0 !important;
    padding:0 !important;
  }
  .site-header .et_pb_row > .et_pb_column:first-child{ flex:0 0 auto !important; }
  .hdr-right{ flex:1 1 auto !important; justify-content:flex-end !important; }
}

/* ========= FORCE HEADER GUTTERS ON DESKTOP BELOW 1272 ========= */
@media (max-width:1271px) and (min-width:981px){
  /* Hit the Theme Builder header wrapper + your site-header */
  .et-l--header .site-header .et_pb_row,
  .et-l--header .et_pb_section.site-header .et_pb_row,
  .site-header .et_pb_row{
    width:100% !important;
    max-width:100% !important;
    margin-left:0 !important;
    margin-right:0 !important;
    padding-left:84px !important;
    padding-right:84px !important;
    box-sizing:border-box !important;

    display:flex !important;
    justify-content:space-between !important;
    align-items:center !important;
  }
  .site-header .et_pb_row .et_pb_column{
    display:flex !important;
    align-items:center !important;
    margin:0 !important;
    padding:0 !important;
  }
  .site-header .et_pb_row > .et_pb_column:first-child{ flex:0 0 auto !important; }
  .hdr-right{ flex:1 1 auto !important; justify-content:flex-end !important; }
}

/* ========= FORCE HEADER GUTTERS ON TABLET ========= */
@media (max-width:980px) and (min-width:768px){
  /* Hit the Theme Builder header wrapper + your site-header */
  .et-l--header .site-header .et_pb_row,
  .et-l--header .et_pb_section.site-header .et_pb_row,
  .site-header .et_pb_row{
    width:100% !important;
    max-width:100% !important;
    margin-left:0 !important;
    margin-right:0 !important;
    padding-left:48px !important;
    padding-right:48px !important;
    box-sizing:border-box !important;

    display:flex !important;
    justify-content:space-between !important;
    align-items:center !important;
  }
  .site-header .et_pb_row .et_pb_column{
    display:flex !important;
    align-items:center !important;
    margin:0 !important;
    padding:0 !important;
  }
  .site-header .et_pb_row > .et_pb_column:first-child{ flex:0 0 auto !important; }
  .hdr-right{ flex:1 1 auto !important; justify-content:flex-end !important; }
}

/* ========= FORCE HEADER GUTTERS ON MOBILE ========= */
@media (max-width:767px){
  .et-l--header .site-header .et_pb_row,
  .et-l--header .et_pb_section.site-header .et_pb_row,
  .site-header .et_pb_row{
    width:100% !important;
    max-width:100% !important;
    margin-left:0 !important;
    margin-right:0 !important;
    padding-left:16px !important;
    padding-right:16px !important;
    box-sizing:border-box !important;

    display:flex !important;
    justify-content:space-between !important;
    align-items:center !important;
  }
  .site-header .et_pb_row .et_pb_column{
    display:flex !important;
    align-items:center !important;
    margin:0 !important;
    padding:0 !important;
  }
  .site-header .et_pb_row > .et_pb_column:first-child{ flex:0 0 auto !important; }
  .hdr-right{ flex:1 1 auto !important; justify-content:flex-end !important; }
}