/* Ported from the legacy efamily SCSS theme for Propshaft.
   Branding only: retain the shared responsive layouts and dark-mode surfaces. */
body.product-efamily {
  --efamily-green: #1a8466;
  --efamily-green-hover: #12654d;
  --efamily-green-light: #1f8f6f;
  --extra-juice: rgb(255 226 200);
  --efamily-header: rgba(13, 109, 82, .96);
  --customer-message-surface: #e4f2e9;
}

body.product-efamily #header,
body.product-efamily #headerWrap {
  background: var(--efamily-header);
  border-color: var(--efamily-green);
}

body.product-efamily .home-hero-copy-inner h1 {  
  text-shadow: 1px 1px 9px #0b4b24a3; 
}
body.product-efamily .home-hero-copy-inner p span {
  text-shadow: 1px 1px 1px rgb(0 0 0 / 62%);
}

body.product-efamily .logo,
body.product-efamily #headerLogo a {
  background-image: url("/assets/spokt-sprite-new-9edf67af.png");
  background-position: -24px -648px;
  background-size: 1200px 800px;
  background-repeat: no-repeat;
  margin-left: 6px;
}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
  body.product-efamily .logo,
  body.product-efamily #headerLogo a {
    background-image: url("/assets/spokt-sprite-new@2x-ef1c7d5f.png");
  }
}

body.product-efamily .contentBox .profileTabs a { background: var(--efamily-green-hover); color: var(--header); }
body.product-efamily .contentBox .profileTabs a.active { background: var(--efamily-green); color: var(--header); }
body.product-efamily .contentBox .profileTabs a:hover { background: var(--efamily-green-light); color: var(--header); }
body.product-efamily div.alsoPostToHeader { color: var(--efamily-green) }

body.product-efamily .site-nav a { color: #fff; }
body.product-efamily .site-nav a:hover { color: #e0f5eb; }
/* Mobile header Log in | Sign Up links: white on the green/dark header. */
body.product-efamily .flushLinks,
body.product-efamily .flushLinks a {
  color: #fff;
}
body.product-efamily .flushLinks a:hover { color: #e0f5eb; }
body.product-efamily .day.day-name,
body.product-efamily .day.day-name:hover { background: var(--efamily-green); }
body.product-efamily .contentBox a,
body.product-efamily .postText a,
body.product-efamily .faqHolder a { color: var(--efamily-green); }
body.product-efamily .contentBox a:hover,
body.product-efamily .postText a:hover,
body.product-efamily .faqHolder a:hover { color: var(--efamily-green-hover); }
body.product-efamily .seqNav.next a,
body.product-efamily .big-button.green,
body.product-efamily .home-hero-iti-links a.button {
  background: var(--efamily-green);
  color: #fff;
}
body.product-efamily .seqNav.next a:hover,
body.product-efamily .big-button.green:hover,
body.product-efamily .home-hero-iti-links a.button:hover {
  background: var(--efamily-green-hover);
  color: #fff;
}
body.product-efamily .leftNav .linkFull a.mainLink:hover,
body.product-efamily .leftNav .linkPart a.mainLink:hover,
body.product-efamily .leftNav a.linkAdd:hover,
body.product-efamily .no-account-link { color: #70d5a4; }
body.product-efamily .reveal-modal-bg { background: rgba(26, 132, 102, .35); }
body.product-efamily .testimonial-wrapper .testimonial .quote { color: var(--efamily-green); }
body.product-efamily .iti.teal .big.button { color: var(--efamily-green); border-color: var(--efamily-green) }
body.product-efamily .iti.teal .big.button:hover { background-color: var(--efamily-green); color: #fff; }
body.product-efamily .iti.teal p { color: var(--efamily-green) }

/* Override the shared dark palette without turning dark panels white. */
html.dark body.product-efamily {
  --header: #123e32;
  --accent-strong: #19523f;
  --accent: #d1ddd8;
  --accent-hover: #b4e7d1;
  --efamily-green: #2a9476;
  --teal:      #08a991;
  --customer-message-surface: #19523f;
  --footer-surface: var(--header);
  --footer-bottom-surface: var(--header);
  --footer-link-hover: var(--accent-hover);
  --footer-bottom-link-hover: var(--accent-hover);
  --control-focus-border: var(--accent);
  --theme-toggle-hover-border: var(--accent);
  --theme-toggle-hover-text: var(--accent-hover);
}
html.dark body.product-efamily .contentBox a,
html.dark body.product-efamily .postText a,
html.dark body.product-efamily .faqHolder a { color: var(--accent); }
html.dark body.product-efamily .contentBox a:hover,
html.dark body.product-efamily .postText a:hover,
html.dark body.product-efamily .faqHolder a:hover { color: var(--accent-hover); }
html.dark body.product-efamily #header,
html.dark body.product-efamily #headerWrap { background: var(--header); }
html.dark .iti.teal p { color: var(--teal); }
html.dark .iti.teal .big.button { border-color: var(--teal); }
html.dark .iti.teal .big.button:not(.green):hover { background-color: var(--teal); }