/*
Theme Name:   E-Crete Child
Theme URI:    https://e-crete.com
Description:  Divi child theme for E-Crete — B2B AAC manufacturing repositioning. Holds the custom login skin, branded Gravity Forms email styling, and overrides for the Code Module page content.
Author:       E-Crete
Author URI:   https://e-crete.com
Template:     Divi
Version:      1.0.0
Text Domain:  e-crete-child
*/

/* ============================================================
   E-CRETE BRAND TOKENS
   ------------------------------------------------------------
   Deep green   #0f1b13   (near-black backgrounds)
   Green        #2f6b46   (primary actions / links)
   Olive        #6f9a3f   (accent / highlights)
   Light olive  #a8c47a   (eyebrows on dark)
   Cream        #f5f4ef   (light backgrounds)
   Ink          #16201a   (body text)
   Muted        #5b6159   (secondary text)
   Fonts        Archivo (UI), Source Serif 4 (editorial)
   ============================================================ */

:root{
  --ec-deep:#0f1b13;
  --ec-green:#2f6b46;
  --ec-olive:#6f9a3f;
  --ec-olive-lt:#a8c47a;
  --ec-cream:#f5f4ef;
  --ec-ink:#16201a;
  --ec-muted:#5b6159;
}

/* Load brand fonts site-wide */
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;800;900&family=Source+Serif+4:ital,opsz,wght@0,8..60,400;1,8..60,400&display=swap');

/* Site-wide type baseline (Divi will still control module typography) */
body,
.et_pb_text,
.et_pb_module{
  font-family:'Archivo', system-ui, -apple-system, Segoe UI, sans-serif;
}

/* Brand link colors for Code Module content that inherits theme links */
a{ color:var(--ec-green); }
a:hover{ color:var(--ec-olive); }

/* Reusable brand button, usable inside Divi Code Modules: class="ec-btn" */
.ec-btn{
  display:inline-flex;align-items:center;gap:10px;
  font-family:'Archivo',sans-serif;font-weight:700;font-size:15px;
  color:#ffffff;background:var(--ec-green);
  padding:14px 26px;border-radius:2px;text-decoration:none;
  transition:background .2s ease,transform .15s ease;
}
.ec-btn:hover{ background:var(--ec-olive);color:#ffffff; }
.ec-btn:active{ transform:translateY(1px); }

/* ---- Gravity Forms — brand skin ---- */
.gform_wrapper .gfield_label{
  font-family:'Archivo',sans-serif;font-weight:600;font-size:12.5px;
  letter-spacing:.06em;text-transform:uppercase;color:var(--ec-green);
}
.gform_wrapper input[type=text],
.gform_wrapper input[type=email],
.gform_wrapper input[type=tel],
.gform_wrapper select,
.gform_wrapper textarea{
  font-family:'Archivo',sans-serif;font-size:15px;
  border:1px solid rgba(15,27,19,.18);border-radius:2px;padding:13px 15px;
}
.gform_wrapper input:focus,
.gform_wrapper select:focus,
.gform_wrapper textarea:focus{
  outline:none;border-color:var(--ec-olive);box-shadow:0 0 0 2px rgba(111,154,63,.15);
}
/* Submit button — brand green (wins over Gravity Forms "orbital" theme) */
.gform_wrapper .gform_footer input[type=submit],
.gform_wrapper .gform-footer input[type=submit],
.gform_wrapper .gform_footer button,
.gform_wrapper input.gform_button,
.gform_wrapper .gform_button.button,
.gform_wrapper.gravity-theme .gform_footer input[type=submit]{
  font-family:'Archivo',sans-serif !important;font-weight:700 !important;font-size:15px !important;
  color:#fff !important;background:var(--ec-green) !important;
  border:0 !important;border-radius:2px !important;
  padding:15px 30px !important;cursor:pointer;transition:background .2s ease;
}
.gform_wrapper .gform_footer input[type=submit]:hover,
.gform_wrapper .gform-footer input[type=submit]:hover,
.gform_wrapper input.gform_button:hover{ background:var(--ec-olive) !important; }
/* Orbital theme CSS variables (belt-and-suspenders for the button color) */
.gform-theme--orbital,.gform_wrapper.gravity-theme{
  --gf-ctrl-btn-bg-color-primary:#2f6b46;
  --gf-ctrl-btn-bg-color-primary-hover:#6f9a3f;
  --gf-ctrl-btn-border-color-primary:#2f6b46;
  --gf-ctrl-btn-border-color-primary-hover:#6f9a3f;
}
.gform_confirmation_message{
  font-family:'Archivo',sans-serif;color:var(--ec-ink);
  background:var(--ec-cream);border-left:3px solid var(--ec-olive);
  padding:22px 26px;border-radius:0 2px 2px 0;
}

/* ============================================================
   MENU CTA BUTTON
   Add the CSS class  ec-cta  to a menu item (Appearance → Menus →
   Screen Options → enable "CSS Classes", then fill the box on the
   item, e.g. "Start the Conversation"). It renders as the brand
   button from the header mock.
   ============================================================ */
.et-menu li.ec-cta,
#top-menu li.ec-cta,
.et_pb_menu ul li.ec-cta,
li.ec-cta{
  display:flex;align-items:center;padding:0;margin-left:6px;
}
.et-menu li.ec-cta > a,
#top-menu li.ec-cta > a,
.et_pb_menu ul li.ec-cta > a,
li.ec-cta > a{
  display:inline-flex !important;align-items:center;
  font-family:'Archivo',sans-serif;font-weight:700;font-size:14px;line-height:1;
  color:#ffffff !important;opacity:1 !important;
  background:var(--ec-green);
  padding:12px 22px !important;border-radius:2px;
  text-decoration:none;
  transition:background .2s ease,transform .15s ease;
}
.et-menu li.ec-cta > a:hover,
#top-menu li.ec-cta > a:hover,
.et_pb_menu ul li.ec-cta > a:hover,
li.ec-cta > a:hover{
  background:var(--ec-olive);color:#ffffff !important;
}
.et-menu li.ec-cta > a:active,
li.ec-cta > a:active{ transform:translateY(1px); }
/* kill Divi's default hover underline/opacity animation on the CTA */
.et-menu li.ec-cta > a:before,
#top-menu li.ec-cta > a:before{ display:none !important; }

/* ============================================================
   HEADING COLOR — safety net for Divi Code / Text modules
   Divi applies its own default heading color, which overrides the
   section color our pasted content relies on. Restore inheritance
   so headings on dark sections stay cream and headings on light
   sections stay ink. (The modules also carry a scoped copy of this
   rule, so this works even if the child theme is inactive.)
   ============================================================ */
.et_pb_code h1,.et_pb_code h2,.et_pb_code h3,.et_pb_code h4,.et_pb_code h5,.et_pb_code h6,
.et_pb_text h1,.et_pb_text h2,.et_pb_text h3,.et_pb_text h4,.et_pb_text h5,.et_pb_text h6,
.ec-page h1,.ec-page h2,.ec-page h3,.ec-page h4,.ec-page h5,.ec-page h6{
  color:inherit !important;
}