/* ============================================================
   Dev Pods — Brand Overrides for Kajabi Encore
   Layers on top of styles.scss.liquid via Kajabi's asset pipeline.
   All brand tokens are defined as CSS custom properties in :root.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&family=Space+Grotesk:wght@400;500;700&family=Space+Mono:wght@400;700&display=swap');

/* ------------------------------------------------------------
   1. BRAND TOKENS
   ------------------------------------------------------------ */
:root {
  --dp-bg:          #0C1B2A;
  --dp-surface:     #0F2238;
  --dp-surface-2:   #122848;
  --dp-border:      #1E3A5A;
  --dp-border-2:    #24395A;
  --dp-accent:      #FF6B2B;
  --dp-accent-dark: #E55A1F;
  --dp-accent-muted:#50312A;
  --dp-text:        #F4F7FB;
  --dp-text-muted:  #94B8D0;
  --dp-placeholder: #5A7593;
  --dp-font-head:   'Space Grotesk', sans-serif;
  --dp-font-body:   'Nunito', sans-serif;
  --dp-font-mono:   'Space Mono', monospace;
  --dp-radius-btn:  6px;
  --dp-radius-card: 10px;
  --dp-shadow-cta:  rgba(255, 107, 43, 0.35) 0px 4px 24px 0px;
}


/* ------------------------------------------------------------
   2. GLOBAL — dark theme base
   ------------------------------------------------------------ */
html,
body,
#encore-theme {
  background-color: var(--dp-bg) !important;
  color: var(--dp-text);
  font-family: var(--dp-font-body);
  font-size: 18px;
}

/* Kajabi background utility classes — catch-all for any element */
.background-dark {
  background-color: var(--dp-bg) !important;
  color: var(--dp-text) !important;
}

.background-light {
  background-color: var(--dp-surface) !important;
  color: var(--dp-text) !important;
}

/* Ensure headings inside background utility classes stay light */
.background-light h1, .background-light h2, .background-light h3,
.background-light h4, .background-light h5, .background-light h6,
.background-dark h1, .background-dark h2, .background-dark h3,
.background-dark h4, .background-dark h5, .background-dark h6 {
  color: var(--dp-text) !important;
}

.background-light a, .background-dark a {
  color: var(--dp-text-muted) !important;
}
.background-light a:hover, .background-dark a:hover {
  color: var(--dp-accent) !important;
}

/* Default section background */
.section {
  background-color: var(--dp-bg);
}

/* Global links */
a {
  color: var(--dp-text-muted);
  transition: color 0.2s ease;
}
a:hover {
  color: var(--dp-accent);
  text-decoration: none;
}

/* Text selection */
::selection {
  background: var(--dp-accent);
  color: #fff;
}

/* Scrollbar — subtle dark, no brand orange */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--dp-bg); }
::-webkit-scrollbar-thumb { background: var(--dp-border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--dp-border-2); }

/* Max-width container */
.container {
  max-width: 1200px;
}

/* Dividers */
hr {
  border-color: var(--dp-border);
}


/* ------------------------------------------------------------
   3. TYPOGRAPHY
   ------------------------------------------------------------ */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--dp-font-head) !important;
  color: var(--dp-text) !important;
  font-weight: 700;
  line-height: 1.15;
  text-transform: none !important;
  letter-spacing: -0.01em;
}

h1, .h1 {
  font-size: clamp(2.5rem, 5vw, 4.8rem);
}
h2, .h2 {
  font-size: clamp(1.8rem, 3.5vw, 3.25rem);
}
h3, .h3 {
  font-size: clamp(1.3rem, 2.5vw, 2rem);
}
h4, .h4 { font-size: 1.25rem; }
h5, .h5 { font-size: 1rem; }
h6, .h6 { font-size: 0.875rem; }

p, li, span, label, .nav-item {
  font-family: var(--dp-font-body);
}

/* Monospace accent — pricing, code, labels */
.block-pricing,
.offer-pricing,
.price,
.price-amount,
code,
pre,
.mono {
  font-family: var(--dp-font-mono) !important;
}


/* ------------------------------------------------------------
   4. BUTTONS
   ------------------------------------------------------------ */

/* Primary button */
.btn,
.form-btn,
a.btn,
button.btn {
  font-family: var(--dp-font-body);
  font-weight: 700;
  border-radius: var(--dp-radius-btn) !important;
  text-transform: none !important;
  letter-spacing: 0.01em;
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

.btn:not(.btn--outline):not(.btn--ghost),
.form-btn {
  background-color: var(--dp-accent) !important;
  color: #ffffff !important;
  border-color: var(--dp-accent) !important;
  box-shadow: var(--dp-shadow-cta) !important;
}

.btn:not(.btn--outline):not(.btn--ghost):hover,
.form-btn:hover {
  background-color: var(--dp-accent-dark) !important;
  border-color: var(--dp-accent-dark) !important;
  box-shadow: rgba(255, 107, 43, 0.5) 0px 6px 28px 0px !important;
}

/* Outline / ghost buttons become secondary */
.btn--outline,
.btn--ghost {
  background-color: var(--dp-surface-2) !important;
  color: var(--dp-accent) !important;
  border: 1px solid var(--dp-accent-muted) !important;
  box-shadow: none !important;
}

.btn--outline:hover,
.btn--ghost:hover {
  border-color: var(--dp-accent) !important;
  color: var(--dp-accent) !important;
}


/* ------------------------------------------------------------
   5. HEADER
   ------------------------------------------------------------ */

/* Match the homepage: deep navy, blends with page background */
.header,
.header.header--static,
.header.header--fixed,
.header.header--overlay {
  background-color: #0A1628 !important;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

/* Slim header — matches homepage compact nav height */
.header__content--desktop {
  padding: 10px 0 !important;
}

.header__content--mobile {
  background-color: #0A1628 !important;
}

/* Nav links */
.header a,
.header a.link-list__link,
.header a.social-icons__icon,
.header .user__login a,
.header .dropdown__item a,
.header .dropdown__trigger,
.header .dropdown__trigger:hover {
  color: var(--dp-text) !important;
  font-size: 0.9rem;
  font-weight: 500;
  font-family: var(--dp-font-body);
  letter-spacing: 0.01em;
}

.header a.link-list__link:hover,
.header a:hover {
  color: var(--dp-accent) !important;
  text-decoration: none;
}

/* Logo */
.logo__image {
  max-height: 36px;
  width: auto !important;
}

/* ---- Dropdown menu ---- */
.dropdown__menu {
  background-color: #0A1628 !important;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
  min-width: 160px;
  padding: 6px 0;
}

.dropdown__item a {
  color: var(--dp-text-muted) !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  font-family: var(--dp-font-body) !important;
  letter-spacing: 0.02em;
  padding: 9px 18px !important;
  display: block;
  text-transform: none !important;
  transition: color 0.15s ease, background-color 0.15s ease;
}

.dropdown__item a:hover,
.dropdown__item a:focus {
  background-color: rgba(255, 107, 43, 0.08) !important;
  color: var(--dp-text) !important;
  text-decoration: none;
}

/* Highlight the current/active item with accent color only — no big bg block */
.dropdown__item.active a,
.dropdown__item--active a,
.dropdown__item.current a {
  color: var(--dp-accent) !important;
  background-color: transparent !important;
}

/* Hamburger lines */
.hamburger__slice {
  background-color: var(--dp-text) !important;
  height: 2px !important;
}


/* ------------------------------------------------------------
   6. FOOTER
   ------------------------------------------------------------ */
.footer {
  background-color: #0A1628 !important;
  border-top: 1px solid rgba(255,255,255,0.06);
  color: var(--dp-placeholder) !important;
}

.footer__content {
  padding: 20px 0 !important;
}

.footer__block,
.footer p,
.footer span,
.footer li {
  color: var(--dp-placeholder) !important;
  font-family: var(--dp-font-body);
  font-size: 0.8rem !important;
  line-height: 1.6;
}

.footer a,
.footer a.link-list__link {
  color: var(--dp-placeholder) !important;
  font-size: 0.8rem;
  transition: color 0.15s ease;
}

.footer a:hover,
.footer a.link-list__link:hover {
  color: var(--dp-text-muted) !important;
  text-decoration: none;
}

.copyright,
.footer .copyright {
  color: var(--dp-placeholder) !important;
  font-size: 0.8rem !important;
}

.powered-by {
  color: rgba(255,255,255,0.2) !important;
  font-size: 0.75rem;
}

.powered-by a {
  color: rgba(255,255,255,0.2) !important;
}

.powered-by a:hover {
  color: rgba(255,255,255,0.35) !important;
}


/* ------------------------------------------------------------
   7. FORMS
   ------------------------------------------------------------ */
input,
input.form-control,
textarea,
select,
.auth__field {
  background-color: var(--dp-surface) !important;
  border: 1px solid var(--dp-border-2) !important;
  color: var(--dp-text) !important;
  border-radius: var(--dp-radius-btn) !important;
  font-family: var(--dp-font-body) !important;
  padding: 10px 14px !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

input:focus,
input.form-control:focus,
textarea:focus,
select:focus,
.auth__field:focus {
  border-color: var(--dp-accent) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(255, 107, 43, 0.2) !important;
}

input::placeholder,
textarea::placeholder {
  color: var(--dp-placeholder) !important;
}

label,
.auth__label {
  color: var(--dp-text-muted);
  font-family: var(--dp-font-body);
  font-size: 0.9rem;
  margin-bottom: 4px;
}

/* Checkbox */
input[type="checkbox"] {
  accent-color: var(--dp-accent);
}

/* Form groups */
.form-group {
  margin-bottom: 16px;
}


/* ------------------------------------------------------------
   8. CARDS & BLOCKS
   ------------------------------------------------------------ */

/* Only style actual card containers — NOT .block (used on every text/heading block) */
.card,
.product__card,
.kjb-card,
.custom-card {
  background-color: var(--dp-surface) !important;
  border: 1px solid var(--dp-border) !important;
  border-radius: var(--dp-radius-card) !important;
  color: var(--dp-text);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.card:hover,
.product__card:hover {
  border-color: var(--dp-accent) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

/* Product / course cards */
.product__thumbnail {
  border-radius: var(--dp-radius-card) var(--dp-radius-card) 0 0;
  overflow: hidden;
}

.product__title,
.card__title {
  font-family: var(--dp-font-head) !important;
  color: var(--dp-text) !important;
}

.product__description,
.card__description {
  color: var(--dp-text-muted);
  font-size: 0.95rem;
}


/* ------------------------------------------------------------
   9. LOGIN / AUTH PAGE
   ------------------------------------------------------------ */

/* Expand the col-6 wrapper to full width so the card centers correctly */
.col-6.text-center {
  width: 100% !important;
  max-width: 100% !important;
  flex: 0 0 100% !important;
}

.auth__content {
  background-color: #0F2238 !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 12px !important;
  padding: 40px !important;
  max-width: 420px;
  width: 100%;
  margin: 0 auto !important;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5);
}

.auth__title {
  font-family: var(--dp-font-head) !important;
  color: var(--dp-text) !important;
  font-size: 1.75rem !important;
  text-transform: none !important;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-bottom: 20px;
}

/* Required field asterisk */
abbr[title],
.required abbr {
  color: var(--dp-accent);
  text-decoration: none;
  border: none;
}

.auth__link {
  margin-top: 16px;
  text-align: center;
}

.auth__link a {
  color: var(--dp-text-muted);
  font-size: 0.9rem;
}

.auth__link a:hover {
  color: var(--dp-accent);
}

/* "Not a member?" line */
.auth__join {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--dp-border);
  text-align: center;
  font-size: 0.9rem;
  color: var(--dp-text-muted);
}

.auth__join a {
  color: var(--dp-accent);
  font-weight: 600;
}

.auth__join a:hover {
  color: var(--dp-accent-dark);
}

/* Login message (errors) */
.auth__message {
  border-radius: var(--dp-radius-btn);
}


/* ------------------------------------------------------------
   10. ALERTS
   ------------------------------------------------------------ */
.alert {
  background-color: var(--dp-surface-2);
  border-radius: var(--dp-radius-btn);
  color: var(--dp-text);
  border: 1px solid var(--dp-border);
}

.alert--danger {
  border-color: #c0392b;
  background-color: rgba(192, 57, 43, 0.15);
  color: #ff8a80;
}

.alert--success {
  border-color: #27ae60;
  background-color: rgba(39, 174, 96, 0.15);
  color: #69f0ae;
}


/* ------------------------------------------------------------
   11. LIBRARY / PRODUCTS PAGE
   ------------------------------------------------------------ */
.library,
.products,
.section--products {
  background-color: var(--dp-bg) !important;
  padding: 60px 0;
}

.products__title,
.library__title {
  font-family: var(--dp-font-head) !important;
  color: var(--dp-text) !important;
  text-transform: none !important;
}

/* Product cards — Kajabi uses .product, not .block/.card */
.product {
  background-color: var(--dp-surface) !important;
  border: 1px solid var(--dp-border) !important;
  border-radius: var(--dp-radius-card) !important;
  overflow: hidden;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.product:hover {
  border-color: var(--dp-accent) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
}

/* Override background-light/dark on product cards */
.product.background-light,
.product.background-dark {
  background-color: var(--dp-surface) !important;
  color: var(--dp-text) !important;
}

.product__content {
  background-color: var(--dp-surface) !important;
  padding: 16px;
}

.product__title {
  font-family: var(--dp-font-head) !important;
  color: var(--dp-text) !important;
  font-size: 1rem;
  font-weight: 700;
  text-transform: none !important;
}

.product__title a {
  color: var(--dp-text) !important;
}

.product__title a:hover {
  color: var(--dp-accent) !important;
}

.product__body {
  color: var(--dp-text-muted) !important;
  font-size: 0.9rem;
  line-height: 1.5;
}

.product__button {
  padding: 0 16px 16px;
  background-color: var(--dp-surface) !important;
}

/* Progress bar */
.progress {
  background-color: var(--dp-border) !important;
  border-radius: 4px;
}

.progress__inner {
  background-color: var(--dp-accent) !important;
}

/* Resume course bar */
.resume-course {
  background-color: var(--dp-surface);
  border: 1px solid var(--dp-border);
  border-radius: var(--dp-radius-card);
  color: var(--dp-text);
}


/* ------------------------------------------------------------
   12. SALES PAGE
   ------------------------------------------------------------ */
.sales-page-body__title {
  font-family: var(--dp-font-head) !important;
  color: var(--dp-text) !important;
}

.sidebar--sales-page {
  background-color: var(--dp-surface);
  border: 1px solid var(--dp-border);
  border-radius: var(--dp-radius-card);
  padding: 24px;
}


/* ------------------------------------------------------------
   13. THANK YOU PAGE
   ------------------------------------------------------------ */
.thank-you {
  background-color: var(--dp-bg);
  text-align: center;
  padding: 80px 0;
}


/* ------------------------------------------------------------
   14. FORGOT PASSWORD PAGE
   ------------------------------------------------------------ */
.forgot-password .auth__content,
.forgot-password-edit .auth__content {
  /* Inherits login card styles above */
  max-width: 440px;
}


/* ------------------------------------------------------------
   15. BLOG
   ------------------------------------------------------------ */
.blog-post__body,
.blog__body {
  color: var(--dp-text);
  line-height: 1.8;
}

.blog__body h1,
.blog__body h2,
.blog__body h3,
.blog-post__body h1,
.blog-post__body h2,
.blog-post__body h3 {
  color: var(--dp-text) !important;
}

.sidebar {
  background-color: var(--dp-surface);
  border: 1px solid var(--dp-border);
  border-radius: var(--dp-radius-card);
  padding: 20px;
}


/* ------------------------------------------------------------
   16. PAGINATION
   ------------------------------------------------------------ */
.pagination .page-link {
  background-color: var(--dp-surface);
  border-color: var(--dp-border);
  color: var(--dp-text-muted);
}

.pagination .page-link:hover {
  background-color: var(--dp-surface-2);
  color: var(--dp-accent);
}

.pagination .page-item.active .page-link {
  background-color: var(--dp-accent);
  border-color: var(--dp-accent);
  color: #fff;
}


/* ------------------------------------------------------------
   17. MEMBER DIRECTORY
   ------------------------------------------------------------ */
.member-directory {
  background-color: var(--dp-bg);
}

.member-directory__title {
  font-family: var(--dp-font-head) !important;
  color: var(--dp-text) !important;
}


/* ------------------------------------------------------------
   18. SECTION OVERLAY (hero bg tint)
   ------------------------------------------------------------ */
.section__overlay {
  background: transparent;
}


/* ------------------------------------------------------------
   19. RESPONSIVE TWEAKS
   ------------------------------------------------------------ */
@media (max-width: 767px) {
  .auth__content {
    padding: 28px !important;
    border-radius: 10px !important;
  }

  h1, .h1 {
    font-size: clamp(2rem, 8vw, 2.8rem);
  }

  h2, .h2 {
    font-size: clamp(1.5rem, 6vw, 2rem);
  }
}