/* 
Styles of AI PAGES
--------------------------------------------*/
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=Inter:wght@400;500;600;700;800&display=swap');
:root {
  --navy: #1B5E24;
  --navy-light: #2E8636;
  --teal: #3FA34D;
  --teal-dark: #2C7A38;
  --coral: #FF6B4A;
  --coral-dark: #E5502F;
  --blush: #FBE9E4;
  --bg: #FAF8F4;
  --bg-alt: #F2F1EA;
  --card: #FFFFFF;
  --border: #E6E2D8;
  --text: #1D2530;
  --muted: #5D6672;
  --success: #1F8A4C;
  --radius: 16px;
  --radius-sm: 10px;
  --shadow: 0 4px 20px rgba(27, 94, 36, 0.07);
  --shadow-lg: 0 20px 50px rgba(27, 94, 36, 0.16);
  --maxw: 1200px;
  --serif: 'Fraunces', Georgia, 'Times New Roman', serif;
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
/** 
* Woo commerce overrides 
*/
#header .cart-contents::before {
  margin-right: 0;
}
/** 
* Definition overrides
*/
body {
  padding: 0;
}
.gform_wrapper.gravity-theme .ezceus-contact-form .gform_footer button,
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 15px 28px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.97rem;
  font-family: var(--sans);
  cursor: pointer;
  border: 1.5px solid transparent;
  transition: 0.22s cubic-bezier(0.2, 0.8, 0.2, 1);
  white-space: nowrap;
}
.gform_wrapper.gravity-theme .ezceus-contact-form .gform_footer button,
.btn-primary {
  background: var(--coral);
  color: #fff;
  box-shadow: 0 10px 24px -8px rgba(255, 107, 74, 0.55);
}
.btn-sm {
  padding: 10px 20px;
  font-size: 0.85rem;
}
/** 
*    !! Important because it conflicts with existing styles !! 
**/
html.landing-page {
  scroll-behavior: smooth;
}
.container {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 24px;
}
#header {
  margin: 0;
  padding: 0;
  border-bottom: 0;
  background: inherit;
}
/**** ------ /compatibility styles **/
/* ===========================================================
   EZceus.net — Header component styles
   FULLY SELF-CONTAINED COMPONENT SCOPE.

   Every single selector below is anchored to #ezc-header — an id
   that exists nowhere else on the site (verified against every
   page and partial). Nothing in this file can match, style, or
   otherwise affect any element outside <header id="ezc-header">,
   and every class name used inside it (ezc-header__...) is unique
   to this component, not reused by main.css, footer.css, or any
   page content — chosen specifically to avoid collisions with
   WordPress/WooCommerce theme or plugin CSS if this markup is
   ever reused in that context.

   This file also does NOT rely on the sitewide base reset in
   main.css (box-sizing, a/ul/button/img defaults, body font-family)
   — those are redeclared locally under #ezc-header below, so this
   component renders identically even if main.css's reset ever
   changes, and so it never depends on cascade order to look right.

   The ONE intentional shared dependency is main.css's `:root`
   custom properties (--navy, --border, --radius-sm, --shadow-lg,
   --muted, --bg-alt, --text, --serif, --sans, --maxw). Those are
   brand design tokens (colors/fonts/spacing), not component styles
   — sharing them is what keeps the header visually consistent with
   the rest of the site. Load order doesn't matter for them (custom
   properties resolve at paint time).
   =========================================================== */
#ezc-header,
#ezc-header *,
#ezc-header *::before,
#ezc-header *::after {
  box-sizing: border-box;
}
#ezc-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(250, 248, 244, 0.78);
  backdrop-filter: blur(14px) saturate(160%);
  border-bottom: 1px solid rgba(27, 94, 36, 0.08);
  font-family: var(--sans);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/* ---------- Local element defaults (do not rely on main.css's reset) ---------- */
#ezc-header a {
  color: inherit;
  text-decoration: none;
}
#ezc-header ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
#ezc-header button {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}
#ezc-header img {
  max-width: 100%;
  display: block;
}
/* ---------- Layout ---------- */
#ezc-header .ezc-header__inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 82px;
}
/* ---------- Logo ---------- */
#ezc-header .ezc-header__logo {
  display: flex;
  align-items: center;
  font-weight: 600;
  font-size: 1.42rem;
  color: var(--navy);
  font-family: var(--serif);
}
#ezc-header .ezc-header__logo-img {
  height: 58px;
  width: auto;
  display: block;
}
#ezc-header .ezc-header__logo-sub {
  display: block;
  font-size: 0.6rem;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  margin-top: 1px;
  font-family: var(--sans);
}
/* ---------- Nav ---------- */
#ezc-header .ezc-header__nav {
  display: flex;
  align-items: center;
  gap: 4px;
}
#ezc-header .ezc-header__nav a {
  padding: 10px 15px;
  border-radius: 9px;
  font-weight: 600;
  font-size: 0.93rem;
  color: var(--navy);
  position: relative;
  transition: 0.15s ease;
}
#ezc-header .ezc-header__nav a:hover {
  background: rgba(27, 94, 36, 0.06);
}
#ezc-header .ezc-header__dropdown-wrap {
  position: relative;
}
#ezc-header .ezc-header__dropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
  min-width: 250px;
  padding: 10px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
}
#ezc-header .ezc-header__dropdown-wrap:hover .ezc-header__dropdown,
#ezc-header .ezc-header__dropdown-wrap:focus-within .ezc-header__dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
#ezc-header .ezc-header__dropdown a {
  display: block;
  padding: 11px 13px;
  border-radius: 7px;
  font-size: 0.9rem;
}
#ezc-header .ezc-header__dropdown a:hover {
  background: var(--bg-alt);
}
#ezc-header .ezc-header__dropdown-note {
  font-size: 0.7rem;
  color: var(--muted);
  padding: 6px 13px 4px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}
/* ---------- Actions (cart icon, My Account, mobile toggle) ---------- */
#ezc-header .ezc-header__actions {
  display: flex;
  align-items: center;
  gap: 10px;
}
#ezc-header .ezc-header__cart-count {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--navy);
}
#ezc-header .ezc-header__icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 57px;
  height: 40px;
  border-radius: 50%;
  color: var(--navy);
  flex-shrink: 0;
  transition: 0.15s ease;
}
#ezc-header .ezc-header__icon-btn:hover {
  background: rgba(27, 94, 36, 0.08);
}
#ezc-header .ezc-header__icon-btn svg {
  width: 20px;
  height: 20px;
  flex-shrink: inherit;
}
/* Standalone button style — does not reuse main.css's .btn/.btn-outline/.btn-sm,
   so this component has no dependency on that shared utility class. */
#ezc-header .ezc-header__account-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 10px 20px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.85rem;
  font-family: var(--sans);
  cursor: pointer;
  border: 1.5px solid var(--navy);
  background: transparent;
  color: var(--navy);
  transition: 0.22s cubic-bezier(0.2, 0.8, 0.2, 1);
  white-space: nowrap;
}
#ezc-header .ezc-header__account-btn:hover {
  background: var(--navy);
  color: #fff;
}
#ezc-header .ezc-header__account-link-mobile {
  display: none;
}
#ezc-header .ezc-header__menu-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
}
#ezc-header .ezc-header__menu-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--navy);
  margin: 5px 0;
  border-radius: 2px;
  transition: 0.2s ease;
}
/* ---------- Header — responsive (scoped to the same #ezc-header root) ---------- */
@media (max-width: 760px) {
  #ezc-header .ezc-header__nav {
    position: fixed;
    top: 82px;
    left: 0;
    right: 0;
    height: calc(100vh - 82px);
    height: calc(100dvh - 82px);
    background: #fff;
    flex-direction: column;
    align-items: stretch;
    padding: 18px;
    gap: 2px;
    transform: translateX(100%);
    transition: 0.2s ease;
    overflow: auto;
    z-index: 1;
  }
  #ezc-header .ezc-header__nav.is-open {
    transform: translateX(0);
  }
  #ezc-header .ezc-header__dropdown {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    border: none;
    padding: 0 0 0 14px;
    display: none;
  }
  #ezc-header .ezc-header__dropdown-wrap.is-open .ezc-header__dropdown {
    display: block;
  }
  #ezc-header .ezc-header__menu-toggle {
    display: block;
  }
  #ezc-header .ezc-header__actions .ezc-header__account-btn {
    display: none;
  }
  #ezc-header .ezc-header__account-link-mobile {
    display: block;
  }
}
/* ===========================================================
   EZceus.net — Footer component styles
   Depends on: src/styles/main.css (CSS custom properties: --navy,
   --teal, --border, --sans, etc.)
   =========================================================== */
/* ---------- Footer ---------- */
footer {
  background: var(--navy);
  color: rgba(255, 255, 255, 0.75);
  padding: 64px 0 28px;
  margin-top: 40px;
  position: relative;
  overflow: hidden;
}
footer::before {
  content: "";
  position: absolute;
  top: -140px;
  left: 50%;
  transform: translateX(-50%);
  width: 600px;
  height: 280px;
  background: radial-gradient(ellipse, rgba(44, 122, 56, 0.35), transparent 70%);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: 32px;
  padding-bottom: 36px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  position: relative;
  z-index: 1;
}
.footer-grid h5 {
  color: #fff;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin-bottom: 17px;
  font-family: var(--sans);
  font-weight: 700;
}
.footer-grid a {
  display: block;
  padding: 6px 0;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.68);
  font-family: var(--sans);
  transition: 0.15s ease;
}
.footer-grid a:hover {
  color: #fff;
  padding-left: 3px;
}
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 24px;
  font-size: 0.82rem;
  flex-wrap: wrap;
  gap: 10px;
  position: relative;
  z-index: 1;
  font-family: var(--sans);
}
.footer-logo {
  display: flex;
  align-items: center;
  margin-bottom: 14px;
}
.footer-logo-img {
  height: 46px;
  width: auto;
  display: block;
}
/* ---------- Footer — responsive ---------- */
@media (max-width: 980px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 760px) {
  .footer-grid {
    grid-template-columns: 1fr;
  }
}
/** 
* contacts us pages 
**/
form.ezceus-contact-form {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 30px;
}
/* Gravity Forms' confirmation anchor disrupts the page grid after submission. */
.gform_anchor {
  display: none;
}
/* Contact form confirmation shown after a successful submission. */
.gform_confirmation_wrapper.ezceus-contact-form {
  grid-column: 2;
  align-self: start;
  box-sizing: border-box;
  width: 100%;
  padding: 18px 24px;
  display: flex;
  align-items: center;
  background: #fffef0;
  border: 2px solid #b7cbb2;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(27, 94, 36, 0.18);
}
.gform_confirmation_wrapper.ezceus-contact-form .gform_confirmation_message {
  margin: 0;
  color: #485b09;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: 0.01em;
  text-align: left;
}
@media (max-width: 760px) {
  .gform_confirmation_wrapper.ezceus-contact-form {
    grid-column: 1;
    padding: 16px 20px;
  }
}
.gform_wrapper.gravity-theme .ezceus-contact-form .gform-field-label .gform-field-label__text {
  display: block;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 7px;
  font-family: var(--sans);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.gform_wrapper.gravity-theme .ezceus-contact-form .gfield input,
.gform_wrapper.gravity-theme .ezceus-contact-form .gfield textarea {
  width: 100%;
  padding: 13px 15px;
  border-radius: 10px;
  border: 1.5px solid var(--border);
  font-size: 0.94rem;
  font-family: var(--sans);
  background: var(--bg);
  transition: 0.15s ease;
}
.gform_wrapper.gravity-theme .ezceus-contact-form .gform-field-label > .gfield_required,
.gform_wrapper.gravity-theme .gform_heading {
  display: none;
}
/** submit **/
.gform_wrapper.gravity-theme .ezceus-contact-form .gform_footer button {
  width: 100%;
}
/** 
* We need this to print the icons in the header. 
* The base style includes it but we don't want it on landing pages 
*/
@font-face {
  font-family: 'FontAwesome';
  src: url('../fonts/fontawesome-webfont.eot');
  src: url('../fonts/fontawesome-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff') format('woff'), url('../fonts/fontawesome-webfont.ttf') format('truetype'), url('../fonts/fontawesome-webfont.svg#FontAwesome') format('svg');
  font-weight: normal;
  font-style: normal;
}