/*
Theme Name: 3Square Market
Description: 3 Square Market Theme
Version: 1.0.0
Author: Robert Dixon
Author URI: leedixon.com
Theme URI: leedixon.com
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Template: Divi
*/

/* ========== Custom CSS from Generator ========== */
/* =========================================================
   .loginx — header login menu item (Divi 5)
   Includes fixed-header overrides + submenu layout fix.
   ========================================================= */

/* Keep the item in the normal nav flow */
#main-header .loginx,
.et-menu .loginx,
.et_pb_menu .loginx {
  display: inline-block !important;
  float: none !important;
  padding-right: 0 !important;
  vertical-align: middle;
}

/* Stop the TOP-LEVEL menu from wrapping — top level only */
#et-top-navigation nav > ul.nav,
.et_pb_menu nav > ul.et-menu {
  flex-wrap: nowrap !important;
  white-space: nowrap;
}

/* Submenus: restore vertical stacking (undo any flex/nowrap leak) */
#et-top-navigation .sub-menu,
.et_pb_menu .sub-menu,
.et-menu .sub-menu {
  display: block !important;
  white-space: normal !important;
}

#et-top-navigation .sub-menu li,
.et_pb_menu .sub-menu li,
.et-menu .sub-menu li {
  display: block !important;
  float: none !important;
  width: 100% !important;
  white-space: normal !important;
}

#et-top-navigation .sub-menu li a,
.et_pb_menu .sub-menu li a,
.et-menu .sub-menu li a {
  display: block !important;
  width: auto !important;
  white-space: normal !important;
}

/* The button — normal AND fixed header states */
#main-header .loginx > a,
.et-menu .loginx > a,
.et_pb_menu .loginx > a,
.et-fixed-header#main-header .loginx > a,
.et-fixed-header .loginx > a,
.et-fixed-header #et-top-navigation .loginx > a,
.et_pb_menu.et-fixed-header .loginx > a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: \"Inter\", sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  letter-spacing: .01em;
  text-transform: none !important;
  color: #FFFFFF !important;
  background-color: #0F4C8C !important;
  border: 2px solid #0F4C8C !important;
  border-radius: 9999px !important;
  padding: 10px 22px !important;
  margin: 0 0 0 14px !important;
  opacity: 1 !important;
  text-decoration: none !important;
  white-space: nowrap;
  transition: background-color .25s ease, border-color .25s ease,
              box-shadow .25s ease, transform .15s ease;
}

/* Hover / keyboard focus — both states */
#main-header .loginx > a:hover,
.et-menu .loginx > a:hover,
.et_pb_menu .loginx > a:hover,
.et-fixed-header#main-header .loginx > a:hover,
.et-fixed-header .loginx > a:hover,
.et-fixed-header #et-top-navigation .loginx > a:hover,
#main-header .loginx > a:focus-visible,
.et-fixed-header .loginx > a:focus-visible {
  background-color: #FF6B1A !important;
  border-color: #FF6B1A !important;
  color: #FFFFFF !important;
  opacity: 1 !important;
  box-shadow: 0 6px 18px rgba(255, 107, 26, .35);
  transform: translateY(-1px);
}

#main-header .loginx > a:active,
.et-fixed-header .loginx > a:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(255, 107, 26, .25);
}

/* Kill Divi\'s underline/bar effect and dropdown arrows on the login item */
.loginx > a:before,
.loginx > a:after,
.et-fixed-header .loginx > a:before,
.et-fixed-header .loginx > a:after {
  display: none !important;
  content: none !important;
}

/* Current-page state — both states */
.loginx.current-menu-item > a,
.loginx.current_page_item > a,
.et-fixed-header .loginx.current-menu-item > a,
.et-fixed-header .loginx.current_page_item > a {
  color: #FFFFFF !important;
  background-color: #0F4C8C !important;
  opacity: 1 !important;
}

/* Slightly smaller in the shrunken fixed header */
.et-fixed-header .loginx > a,
.et-fixed-header #et-top-navigation .loginx > a {
  padding: 8px 20px !important;
  font-size: 13px !important;
}

/* Mobile menu */
@media (max-width: 980px) {
  .et_mobile_menu .loginx {
    display: block !important;
    padding: 0 !important;
    border-top: none !important;
  }
  .et_mobile_menu .loginx > a {
    display: block !important;
    width: calc(100% - 40px);
    margin: 14px 20px 6px !important;
    padding: 14px 24px !important;
    text-align: center;
    color: #FFFFFF !important;
    background-color: #0F4C8C !important;
  }
}



/* =========================================================
   .sm-grid-bg — blueprint grid background (Divi 5)
   Usage: Advanced → Attributes → Attribute Name: class
          Attribute Value: sm-grid-bg
   Combine variants with a space:
          sm-grid-bg sm-grid-bg--glow
   ========================================================= */

/* ---------- Base ---------- */
.sm-grid-bg {
  position: relative;
  background-color: #FFFFFF;
  background-image:
    linear-gradient(to right,  rgba(15, 76, 140, 0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(15, 76, 140, 0.05) 1px, transparent 1px);
  background-size: 40px 40px;
  background-position: 0 0;
  background-repeat: repeat;
}

/* Keep Divi content above any overlay pseudo-elements.
   Required whenever --glow or --fade is used. */
.sm-grid-bg > .et_pb_row,
.sm-grid-bg .et_pb_row,
.sm-grid-bg .et_pb_column,
.sm-grid-bg .et_pb_module {
  position: relative;
  z-index: 2;
}


/* ---------- Grid density ---------- */

/* Tighter grid */
.sm-grid-bg--tight {
  background-size: 20px 20px;
}

/* Looser grid */
.sm-grid-bg--loose {
  background-size: 64px 64px;
}


/* ---------- Grid color / weight ---------- */

/* Stronger blue lines */
.sm-grid-bg--bold {
  background-image:
    linear-gradient(to right,  rgba(15, 76, 140, 0.10) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(15, 76, 140, 0.10) 1px, transparent 1px);
}

/* Green grid on the brand accent */
.sm-grid-bg--brand {
  background-image:
    linear-gradient(to right,  rgba(141, 198, 63, 0.10) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(141, 198, 63, 0.10) 1px, transparent 1px);
}

/* Light grid on dark blue — for footer / dark sections */
.sm-grid-bg--dark {
  background-color: #0F4C8C;
  background-image:
    linear-gradient(to right,  rgba(255, 255, 255, 0.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
}


/* ---------- Overlay: white vignette ----------
   Fades the grid toward the edges. No color added.
   Do NOT combine with --glow (both use :after).      */

.sm-grid-bg--fade {
  overflow: hidden;
}

.sm-grid-bg--fade:after {
  content: \"\";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background: radial-gradient(ellipse 70% 60% at 50% 40%,
    transparent 0%,
    rgba(255, 255, 255, 0.55) 65%,
    #FFFFFF 100%);
}


/* ---------- Overlay: green glow ----------
   Recreates the sage + brand blur blobs from the
   landing page hero. Use instead of --fade.          */

.sm-grid-bg--glow {
  overflow: hidden;
}

/* Sage wash, centered along the top */
.sm-grid-bg--glow:before {
  content: \"\";
  position: absolute;
  top: -20%;
  left: 50%;
  transform: translateX(-50%);
  width: 1000px;
  max-width: 140%;
  height: 600px;
  border-radius: 9999px;
  background: radial-gradient(closest-side,
    rgba(232, 242, 212, 0.85) 0%,
    rgba(232, 242, 212, 0.35) 55%,
    transparent 100%);
  filter: blur(60px);
  pointer-events: none;
  z-index: 0;
}

/* Brand-green blob, offset right */
.sm-grid-bg--glow:after {
  content: \"\";
  position: absolute;
  top: 15%;
  right: -10%;
  width: 500px;
  max-width: 80%;
  height: 500px;
  border-radius: 9999px;
  background: radial-gradient(closest-side,
    rgba(141, 198, 63, 0.22) 0%,
    rgba(141, 198, 63, 0.08) 60%,
    transparent 100%);
  filter: blur(70px);
  pointer-events: none;
  z-index: 0;
}


/* ---------- Responsive ---------- */

@media (max-width: 980px) {
  /* Tighter grid reads better on narrow viewports */
  .sm-grid-bg {
    background-size: 28px 28px;
  }

  .sm-grid-bg--tight { background-size: 16px 16px; }
  .sm-grid-bg--loose { background-size: 44px 44px; }

  /* Scale the blobs down so they don\'t overwhelm the section */
  .sm-grid-bg--glow:before {
    width: 600px;
    height: 360px;
    filter: blur(45px);
  }

  .sm-grid-bg--glow:after {
    width: 320px;
    height: 320px;
    filter: blur(50px);
  }
}

/* Blur is GPU-expensive; drop it for users who opt out of motion/effects */
@media (prefers-reduced-motion: reduce) {
  .sm-grid-bg--glow:before,
  .sm-grid-bg--glow:after {
    filter: none;
  }
}


/* =========================================================
   .sm-form-card — lead capture form (Divi 5 Code module)
   Hardened against Divi\'s theme input styles.
   ========================================================= */

.sm-form-card,
.sm-form-card * {
  box-sizing: border-box !important;
}

.sm-form-card {
  background: #FFFFFF;
  border: 1px solid #F3F4F6;
  border-radius: 24px;
  box-shadow: 0 25px 50px -12px rgba(15, 76, 140, 0.05);
  padding: 40px;
  font-family: \"Inter\", sans-serif;
}

/* ---------- Layout ---------- */

.sm-form-card .sm-form__row--2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.sm-form-card .sm-form__row--tight {
  gap: 12px;
  padding-top: 8px;
}

.sm-form-card .sm-form__group {
  margin-bottom: 24px;
}

.sm-form-card .sm-form__row--2col .sm-form__group {
  margin-bottom: 0;
}

.sm-form-card .sm-form__row.sm-form__row--2col {
  margin-bottom: 24px;
}

/* ---------- Labels ---------- */

.sm-form-card .sm-form__label {
  display: block !important;
  font-family: \"Inter\", sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  color: #1A1A1A !important;
  margin: 0 0 8px 0 !important;
  padding: 0 !important;
}

.sm-form-card .sm-form__optional {
  font-size: 12px !important;
  font-weight: 400 !important;
  color: #5A6470 !important;
}

.sm-form-card .sm-form__req {
  color: #EF4444 !important;
}

.sm-form-card .sm-form__hint {
  font-size: 12px !important;
  color: #5A6470 !important;
  margin: 0 0 4px 0 !important;
  padding: 0 !important;
}

/* ---------- Inputs — hardened vs Divi theme styles ---------- */

.sm-form-card input.sm-form__input,
.sm-form-card select.sm-form__input,
.sm-form-card textarea.sm-form__input,
.sm-form-card .sm-form__input {
  display: block !important;
  width: 100% !important;
  min-height: 50px;
  padding: 13px 16px !important;
  font-family: \"Inter\", sans-serif !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
  color: #1A1A1A !important;
  background-color: #F9FAFB !important;
  border: 1px solid #E5E7EB !important;
  border-radius: 8px !important;
  outline: none !important;
  box-shadow: none;
  margin: 0 !important;
  transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease;
  -webkit-appearance: none !important;
          appearance: none !important;
}

.sm-form-card .sm-form__input::placeholder {
  color: #9CA3AF !important;
  opacity: 1 !important;
}

.sm-form-card input.sm-form__input:focus,
.sm-form-card select.sm-form__input:focus,
.sm-form-card textarea.sm-form__input:focus {
  background-color: #FFFFFF !important;
  border-color: #0F4C8C !important;
  box-shadow: 0 0 0 3px rgba(15, 76, 140, 0.15) !important;
}

.sm-form-card select.sm-form__select {
  background-image: url(\"data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20512%20512%27%3E%3Cpath%20fill%3D%27%235A6470%27%20d%3D%27M233.4%20406.6c12.5%2012.5%2032.8%2012.5%2045.3%200l192-192c12.5-12.5%2012.5-32.8%200-45.3s-32.8-12.5-45.3%200L256%20338.7%2086.6%20169.4c-12.5-12.5-32.8-12.5-45.3%200s-12.5%2032.8%200%2045.3l192%20192z%27%2F%3E%3C%2Fsvg%3E\") !important;
  background-repeat: no-repeat !important;
  background-position: right 16px center !important;
  background-size: 12px !important;
  padding-right: 40px !important;
  cursor: pointer;
}

.sm-form-card textarea.sm-form__textarea {
  resize: vertical;
  min-height: 130px !important;
  line-height: 1.5 !important;
}

/* ---------- Checkbox tiles ---------- */

.sm-form-card label.sm-form__check {
  display: flex !important;
  align-items: center !important;
  gap: 12px;
  padding: 14px !important;
  background-color: #F9FAFB !important;
  border: 1px solid #E5E7EB !important;
  border-radius: 8px !important;
  cursor: pointer;
  transition: border-color .2s ease;
  font-family: \"Inter\", sans-serif !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  color: #1A1A1A !important;
  margin: 0 !important;
}

.sm-form-card label.sm-form__check:hover {
  border-color: #8DC63F !important;
}

.sm-form-card .sm-form__check input[type=\"checkbox\"] {
  flex: 0 0 16px;
  width: 16px !important;
  height: 16px !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  accent-color: #8DC63F;
  cursor: pointer;
  -webkit-appearance: checkbox !important;
          appearance: auto !important;
}

/* ---------- Error ---------- */

.sm-form-card .sm-form__error {
  padding: 16px !important;
  background-color: #FEF2F2 !important;
  border: 1px solid #FECACA !important;
  border-radius: 8px !important;
  color: #B91C1C !important;
  font-size: 14px !important;
  margin-bottom: 24px !important;
}

/* ---------- Submit ---------- */

.sm-form-card button.sm-form__submit {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px;
  width: 100% !important;
  padding: 17px 24px !important;
  font-family: \"Inter\", sans-serif !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  color: #FFFFFF !important;
  background-color: #FF6B1A !important;
  border: none !important;
  border-radius: 12px !important;
  cursor: pointer;
  box-shadow: 0 10px 20px -5px rgba(255, 107, 26, 0.35);
  transition: background-color .25s ease, box-shadow .25s ease, transform .15s ease;
}

.sm-form-card button.sm-form__submit::after {
  content: \"\" !important;
  display: inline-block !important;
  width: 16px;
  height: 16px;
  background-color: #FFFFFF !important;
  -webkit-mask: url(\"data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20448%20512%27%3E%3Cpath%20d%3D%27M438.6%20278.6c12.5-12.5%2012.5-32.8%200-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3%200s-12.5%2032.8%200%2045.3L338.8%20224%2032%20224c-17.7%200-32%2014.3-32%2032s14.3%2032%2032%2032l306.7%200L233.4%20393.4c-12.5%2012.5-12.5%2032.8%200%2045.3s32.8%2012.5%2045.3%200l160-160z%27%2F%3E%3C%2Fsvg%3E\") no-repeat center / contain;
          mask: url(\"data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20448%20512%27%3E%3Cpath%20d%3D%27M438.6%20278.6c12.5-12.5%2012.5-32.8%200-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3%200s-12.5%2032.8%200%2045.3L338.8%20224%2032%20224c-17.7%200-32%2014.3-32%2032s14.3%2032%2032%2032l306.7%200L233.4%20393.4c-12.5%2012.5-12.5%2032.8%200%2045.3s32.8%2012.5%2045.3%200l160-160z%27%2F%3E%3C%2Fsvg%3E\") no-repeat center / contain;
}

.sm-form-card button.sm-form__submit:hover {
  background-color: #E55A0F !important;
  box-shadow: 0 12px 24px -5px rgba(255, 107, 26, 0.45);
  transform: translateY(-1px);
}

.sm-form-card button.sm-form__submit:disabled {
  opacity: .6;
  cursor: not-allowed;
  transform: none;
}

/* ---------- Success state ---------- */

.sm-form-card .sm-form__success {
  text-align: center;
  padding: 32px 0;
}

.sm-form-card .sm-form__success-icon {
  width: 80px;
  height: 80px;
  margin: 0 auto 24px;
  border-radius: 9999px;
  background-color: rgba(141, 198, 63, 0.10);
  background-image: url(\"data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20448%20512%27%3E%3Cpath%20fill%3D%27%238DC63F%27%20d%3D%27M438.6%20105.4c12.5%2012.5%2012.5%2032.8%200%2045.3l-256%20256c-12.5%2012.5-32.8%2012.5-45.3%200l-128-128c-12.5-12.5-12.5-32.8%200-45.3s32.8-12.5%2045.3%200L160%20338.7%20393.4%20105.4c12.5-12.5%2032.8-12.5%2045.3%200z%27%2F%3E%3C%2Fsvg%3E\");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 36px;
}

.sm-form-card .sm-form__success h3 {
  font-family: \"DM Sans\", \"Inter\", sans-serif !important;
  font-size: 24px !important;
  font-weight: 700 !important;
  color: #0F4C8C !important;
  margin: 0 0 12px 0 !important;
}

.sm-form-card .sm-form__success p {
  font-size: 16px !important;
  color: #5A6470 !important;
  margin: 0 0 8px 0 !important;
}

.sm-form-card .sm-form__success-small {
  font-size: 14px !important;
}

.sm-form-card .sm-form__success a {
  color: #0F4C8C !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}

.sm-form-card .sm-form__success a:hover {
  color: #8DC63F !important;
}

/* ---------- Mobile ---------- */

@media (max-width: 767px) {
  .sm-form-card {
    padding: 24px 20px;
    border-radius: 18px;
  }

  .sm-form-card .sm-form__row--2col {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

/* =========================================================
   LinkedIn icon for Divi secondary header / footer
   Pairs with the child theme override at
   includes/social_icons.php (glyph exists in Divi's
   ETmodules font; Divi just doesn't ship a rule for it)
   ========================================================= */

.et-social-linkedin a.icon:before {
  content: "\e09d";
  font-family: "ETmodules" !important;
}
