/* ═══════════════════════════════════════════════════════════
   Elements of Life Institute — Palette K
   Cloud blue-white · Navy · Gold · Refined typography
   v2.0 — all text passes WCAG AA minimum
═══════════════════════════════════════════════════════════ */

/* ───────────────────────────────────────────────────────────
   ARCHITECTURE NOTES — read before editing
   Last updated: 2026-03-25
   ───────────────────────────────────────────────────────────

   DARK BACKGROUND DETECTION
   block_styles.liquid and section_styles.liquid detect dark
   backgrounds by comparing block/section background_color
   against a hardcoded list:
     #1e2e48 · #253552 · #18202c · #1a2640 · #162338
   When a new dark color is introduced in the page builder or
   a preset, it MUST be added to the dark_bgs / dark_section_bgs
   assign lists in BOTH snippets or it will get no light-text
   treatment.

   HEADING COLOR ON DARK BACKGROUNDS
   The global rule below — h1–h6 { color: var(--k-navy) !important }
   — uses !important and would win over any scoped selector without
   it. The dark-scoped heading rules in block_styles.liquid and
   section_styles.liquid therefore also carry !important so they
   can override this file at block/section scope.

   PARAGRAPH COLOR ON DARK BACKGROUNDS
   The .block p / .section p rule sets color: var(--k-body) WITHOUT
   !important. This is intentional — inline color styles on <p> tags
   written in the rich-text editor (gold overline labels, white
   subtitles, muted captions, stat numbers) must be allowed to win
   via normal cascade. Adding !important here would make every
   inline p color unoverridable. Dark-scoped rules in block_styles
   and section_styles also do not set p color for the same reason.

   OUTLINE BUTTONS
   .btn--primary carries :not(.btn--outline) so filled and outline
   buttons are governed by separate rules. Outline buttons get only
   typographic traits (font, letter-spacing, uppercase) from this
   file — never background-color or color. Those come from
   element_button.liquid's inline <style> block, which reads
   btn_background_color from block settings.

   ANCHOR GOLD ON DARK BACKGROUNDS
   The dark-scoped anchor rule targets a:not(.btn) to avoid
   coloring button text gold when a button sits inside a dark block.

   GLOBAL ANCHOR RULE vs BUTTONS
   The sitewide link color rule is a:not(.btn) { color: var(--k-blue-acc)
   !important }. The :not(.btn) guard is load-bearing: Kajabi renders
   every button as <a class="btn btn--solid|btn--outline">, and each
   button's colors come from a per-button #btn-{id} rule (no !important)
   generated by element_button.liquid from btn_background_color /
   btn_text_color. A bare a { … !important } rule overrides those and
   turns all button labels blue. Note also that Kajabi's btn_style
   produces btn--solid / btn--outline classes — NOT btn--primary — so
   never rely on .btn--primary to style page-builder buttons.

   ─────────────────────────────────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;1,400&family=Mulish:wght@200;300;400;500&display=swap');

/* ── TOKENS ── */
:root {
  --k-cloud:       #f2f4f7;
  --k-card:        #e4e8ee;
  --k-band:        #d6dce6;
  --k-navy:        #1e2e48;
  --k-navy-mid:    #253552;
  --k-gold:        #7a5e18;
  --k-gold-lt:     #c9a650;
  --k-blue-acc:    #1a4898;
  --k-ink:         #18202c;
  --k-body:        #4a5262;
  --k-dim:         #747e90;
  --k-border:      rgba(30,46,72,0.12);
  --k-border-lt:   rgba(30,46,72,0.08);
  --k-gold-border: rgba(122,94,24,0.4);
  --k-break:       3px solid rgba(30,46,72,0.12);
  --k-break-gold:  3px solid rgba(201,166,80,0.4);
}

/* ── BASE ── */
body {
  background-color: var(--k-cloud) !important;
  color: var(--k-body) !important;
  font-family: 'Mulish', sans-serif !important;
  font-weight: 300 !important;
  font-size: 16px !important;
  line-height: 1.7 !important;
  -webkit-font-smoothing: antialiased;
}
h1,h2,h3,h4,h5,h6 {
  font-family: 'Playfair Display', serif !important;
  font-weight: 400 !important;
  color: var(--k-navy) !important;
  line-height: 1.2 !important;
}
/* Dark sections override the navy heading color above via section_styles.liquid */
p, li, td { font-family: 'Mulish', sans-serif !important; }
/* Anchor color — buttons excluded. Kajabi renders every button as an
   <a class="btn btn--solid|btn--outline ..."> whose colors come from a
   per-button #btn-{id} rule in element_button.liquid. A bare
   a { color: … !important } rule overrides those ID rules and turns
   button labels blue. Never remove the :not(.btn) guard. */
a:not(.btn) { color: var(--k-blue-acc) !important; }
a:not(.btn):hover { color: var(--k-navy) !important; }
.block p, .section p {
  font-size: 16px !important;
  line-height: 1.75 !important;
  /* color is intentionally NOT set with !important here —
     inline color styles on <p> tags in dark blocks (gold labels,
     white subtitles, muted captions) must be allowed to win.
     The body default (--k-body) applies via cascade on light blocks. */
  color: var(--k-body);
  margin-bottom: 1em;
}

/* ── NAVIGATION ── */
.header {
  background-color: var(--k-navy) !important;
  border-bottom: var(--k-break-gold) !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 100 !important;
}
.header a,
.header a.link-list__link,
.header .dropdown__trigger {
  color: #d0e4f0 !important;
  font-family: 'Mulish', sans-serif !important;
  font-size: 10px !important;
  font-weight: 400 !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  transition: color 0.2s !important;
}
.header a:hover,
.header a.link-list__link:hover,
.header .dropdown__trigger:hover { color: var(--k-gold-lt) !important; }
.header .logo__text {
  font-family: 'Playfair Display', serif !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  color: var(--k-cloud) !important;
}
.header .btn, .header .button {
  background-color: transparent !important;
  border: 1px solid rgba(201,166,80,0.5) !important;
  color: var(--k-gold-lt) !important;
  font-family: 'Mulish', sans-serif !important;
  font-size: 10px !important;
  font-weight: 400 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  border-radius: 0 !important;
}
.header .btn:hover { background-color: rgba(201,166,80,0.08) !important; }
.hamburger__slice { background-color: #d0e4f0 !important; }
.header__content--mobile {
  background-color: var(--k-navy) !important;
  border-top: 1px solid var(--k-border) !important;
}
.header__content--mobile a {
  color: #d0e4f0 !important;
  border-bottom: 1px solid rgba(30,46,72,0.2) !important;
  padding: 12px 0 !important;
}
.header__content--mobile a:hover { color: var(--k-gold-lt) !important; }

/* ── SECTIONS ── */
.section,
.kajabi-section,
[class*="section--"] {
  background-color: var(--k-cloud) !important;
}
.section { border-bottom: var(--k-break) !important; }

/* ── BUTTONS ── */
/* All buttons — typography only, never color or background.
   Colors come from each button's #btn-{id} rule (btn_background_color /
   btn_text_color settings) in element_button.liquid. Kajabi's btn_style
   values produce btn--solid / btn--outline classes, not btn--primary. */
.btn {
  border-radius: 0 !important;
  font-family: 'Mulish', sans-serif !important;
  font-size: 10px !important;
  font-weight: 400 !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  transition: background 0.2s, color 0.2s !important;
}

/* Solid/filled buttons — navy bg, gold text.
   btn--outline is excluded here so element_button.liquid's
   inline style (transparent bg, border-color from btn_background_color)
   is never overridden. */
.btn--primary:not(.btn--outline),
.kajabi-form__submit,
[class*="btn-primary"]:not(.btn--outline),
.button--primary:not(.btn--outline) {
  background-color: var(--k-navy) !important;
  color: var(--k-gold-lt) !important;
  border: 1px solid rgba(30,46,72,0.3) !important;
  border-radius: 0 !important;
  font-family: 'Mulish', sans-serif !important;
  font-size: 10px !important;
  font-weight: 400 !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  padding: 12px 24px !important;
  transition: background 0.2s, color 0.2s !important;
}
.btn--primary:not(.btn--outline):hover,
.kajabi-form__submit:hover { background-color: #2a3f60 !important; }

/* Outline buttons — transparent bg, border + text color come from
   element_button.liquid's inline <style> block (btn_background_color).
   We only enforce shared typographic traits here, never background or color. */
.btn--outline {
  background: transparent !important;
  border-radius: 0 !important;
  font-family: 'Mulish', sans-serif !important;
  font-size: 10px !important;
  font-weight: 400 !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  transition: background 0.2s, color 0.2s !important;
}
.btn--outline:hover { background-color: rgba(30,46,72,0.06) !important; }

/* Secondary (non-outline) buttons */
.btn--secondary:not(.btn--outline),
.button--secondary:not(.btn--outline) {
  background-color: transparent !important;
  border: 1px solid rgba(30,46,72,0.3) !important;
  color: var(--k-navy) !important;
  border-radius: 0 !important;
  font-family: 'Mulish', sans-serif !important;
  font-size: 10px !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
}
.btn--secondary:not(.btn--outline):hover { background-color: rgba(30,46,72,0.06) !important; }

/* ── CARDS ── */
.card, .kajabi-card, .product-card, .offer-card {
  background-color: var(--k-card) !important;
  border: 1px solid var(--k-border) !important;
  border-top: 2px solid var(--k-gold-border) !important;
  border-radius: 0 !important;
  color: var(--k-body) !important;
  transition: border-top-color 0.2s !important;
}
.card:hover { border-top-color: var(--k-gold) !important; }
.card h2, .card h3, .card h4,
.offer-card h2, .offer-card h3 { color: var(--k-navy) !important; }

/* ── BLOCK CARD ROWS ── */
.row .block-type--text { display: flex !important; flex-direction: column !important; }
.row .block-type--text .block { flex: 1 !important; display: flex !important; flex-direction: column !important; }
.row .block-type--text .block .btn { margin-top: auto !important; align-self: flex-start !important; }

/* ── FORMS ── */
.kajabi-form__input,
input[type="text"],
input[type="email"],
input[type="password"],
textarea, select {
  background-color: #ffffff !important;
  border: 1px solid var(--k-border) !important;
  border-radius: 0 !important;
  color: var(--k-ink) !important;
  font-family: 'Mulish', sans-serif !important;
  font-size: 15px !important;
  font-weight: 300 !important;
}
.kajabi-form__input:focus, input:focus, textarea:focus {
  border-color: var(--k-blue-acc) !important;
  outline: none !important;
  box-shadow: none !important;
}
.kajabi-form__label, label {
  font-family: 'Mulish', sans-serif !important;
  font-size: 10px !important;
  font-weight: 400 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--k-navy) !important;
}

/* ── FOOTER ── */
.footer {
  background-color: var(--k-navy) !important;
  border-top: var(--k-break-gold) !important;
  color: #d0e4f0 !important;
}
.footer a, .footer a.link-list__link {
  color: rgba(208,228,240,0.55) !important;
  font-size: 13px !important;
  font-weight: 300 !important;
  transition: color 0.2s !important;
}
.footer a:hover { color: #d0e4f0 !important; }
.footer h4, .footer h5, .footer .footer__block-title {
  font-family: 'Mulish', sans-serif !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  color: var(--k-gold-lt) !important;
  margin-bottom: 14px !important;
}
.footer .logo__text {
  font-family: 'Playfair Display', serif !important;
  color: var(--k-cloud) !important;
}
.copyright, .powered-by { color: rgba(208,228,240,0.25) !important; font-size: 10px !important; }
.footer .link-list__links { display: flex !important; flex-direction: column !important; gap: 8px !important; }
.footer .link-list__link { font-size: 13px !important; font-weight: 200 !important; color: rgba(208,228,240,0.45) !important; }
.footer .link-list__link:hover { color: #d0e4f0 !important; }

/* ── BLOG ── */
.blog-listing__title, .blog-post__title { color: var(--k-navy) !important; }
.blog-listing__excerpt, .blog-post__body p { color: var(--k-body) !important; font-weight: 300 !important; line-height: 1.8 !important; }
.blog-post__body h2, .blog-post__body h3 { color: var(--k-navy) !important; margin-top: 32px !important; }

/* ── LIBRARY ── */
.library__title, .product-listing__title { color: var(--k-navy) !important; }
.library__description { color: var(--k-body) !important; font-weight: 300 !important; }

/* ── AUTH / LOGIN ── */
.login-page, .forgot-password-page { background-color: var(--k-cloud) !important; }
.login-page .card, .forgot-password-page .card { background: #ffffff !important; border: 1px solid var(--k-border) !important; }

/* ── PRICING ── */
.offer-pricing__price, .pricing__amount {
  font-family: 'Playfair Display', serif !important;
  color: var(--k-navy) !important;
  font-size: 36px !important;
}
.offer-pricing__period { color: var(--k-dim) !important; font-size: 12px !important; }

/* ── COUNTDOWN ── */
.countdown__number { font-family: 'Playfair Display', serif !important; color: var(--k-navy) !important; font-size: 44px !important; }
.countdown__label  { color: var(--k-dim) !important; font-size: 10px !important; letter-spacing: 0.14em !important; text-transform: uppercase !important; }

/* ── PROGRESS ── */
.progress-bar { background-color: var(--k-band) !important; border-radius: 0 !important; }
.progress-bar__fill { background-color: var(--k-navy) !important; }

/* ── MISC ── */
hr, .divider { border-color: var(--k-border) !important; }
.announcement { background-color: var(--k-band) !important; border-bottom: 1px solid var(--k-border) !important; color: var(--k-body) !important; }
.alert--success { background-color: #e8f5ee !important; color: #2d6b44 !important; border: 1px solid #b8ddc8 !important; }
.alert--error   { background-color: #fce8e8 !important; color: #8b2020 !important; border: 1px solid #f0b8b8 !important; }
.alert--warning { background-color: #fdf3e0 !important; color: #7a5a10 !important; border: 1px solid #e8d090 !important; }

/* ── EOLI HEADER/FOOTER TEXT BLOCKS ── */
.header .eoli-header-text__name  { font-family: 'Playfair Display', serif !important; font-size: 14px !important; font-weight: 400 !important; color: var(--k-cloud) !important; line-height: 1.25 !important; }
.header .eoli-header-text__tagline { font-family: 'Mulish', sans-serif !important; font-size: 9px !important; font-weight: 200 !important; letter-spacing: 0.16em !important; text-transform: uppercase !important; color: rgba(208,228,240,0.55) !important; }
.footer .eoli-footer-text__name  { font-family: 'Playfair Display', serif !important; color: var(--k-cloud) !important; font-size: 14px !important; }
.footer .eoli-footer-text__tagline { color: rgba(208,228,240,0.5) !important; font-size: 9px !important; letter-spacing: 0.14em !important; text-transform: uppercase !important; }

/* ── SCROLLBAR ── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--k-band); }
::-webkit-scrollbar-thumb { background: rgba(30,46,72,0.2); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(30,46,72,0.35); }