/* ==========================================================================
   SEOAD "Monochrome Pro" — Kajabi theme custom styles (v3)
   --------------------------------------------------------------------------
   The homepage now carries its own design system inline in
   templates/index.liquid (the approved mockup CSS, verbatim), so this file
   only holds what the rest of the theme needs: header, footer, blog.
   Fonts are set in config/settings_data.json (Space Grotesk / Inter).
   ========================================================================== */

/* ---------- Base type ---------- */
#encore-theme body,
#encore-theme { font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; }
#encore-theme h1, #encore-theme h2, #encore-theme h3, #encore-theme h4, #encore-theme h5,
#encore-theme .h1, #encore-theme .h2, #encore-theme .h3, #encore-theme .h4, #encore-theme .h5 {
  font-family: 'Space Grotesk', system-ui, sans-serif;
  letter-spacing: -0.02em;
}
#encore-theme ::selection { background: #0A0A0B; color: #fff; }

/* ---------- Header: sticky blur + shadow ---------- */
#encore-theme .header { backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
#encore-theme .header.header--fixed { box-shadow: 0 10px 30px rgba(0,0,0,.08); }
#encore-theme .header__block--cta .btn { padding: 11px 24px !important; font-size: 15px !important; }

/* ---------- Announcement / hello bar ---------- */
#encore-theme .hello-bar { font-family: 'Space Mono', ui-monospace, monospace; font-size: 12.5px; letter-spacing: .06em; }
#encore-theme .hello-bar p { margin: 0; padding: 12px 20px; }

/* ---------- Footer: white logo on dark, quiet links ---------- */
#encore-theme .footer .logo__image { filter: invert(1); }
#encore-theme .footer a { color: #C9C9CC; }
#encore-theme .footer a:hover { color: #fff; }

/* ---------- Blog readability ---------- */
#encore-theme .blog-post-body, #encore-theme .post-body { font-size: 18px; line-height: 1.8; color: #2B2B2E; }
#encore-theme .blog-post-body h2, #encore-theme .post-body h2 { margin-top: 2.2em; }
#encore-theme .blog-post-body img, #encore-theme .post-body img { border-radius: 14px; }

/* ---------- Blog: Monochrome Pro congruence (v3.2) ---------- */
/* Borders, radii and shadows live in the section settings; this file
   handles hover, spacing, and the details settings can't express. */

/* Post cards: hover lift + airier padding */
#encore-theme .blog-listing__panel {
  transition: transform .3s ease, box-shadow .3s ease;
}
#encore-theme .blog-listing__panel:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 60px rgba(0,0,0,.08) !important;
}
#encore-theme .blog-listing__panel .blog-listing__data { padding: 28px 30px; }
#encore-theme .blog-listing__title:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}
#encore-theme .blog-listing__content {
  color: #6E6E72;
  font-size: 16.5px;
  line-height: 1.7;
}
#encore-theme .blog-listing__content strong { color: #0A0A0B; }
#encore-theme .blog-listing__more {
  display: inline-flex;
  font-weight: 600;
  color: #0A0A0B;
  text-decoration: none;
}
#encore-theme .blog-listing__more::after { content: " \2192"; }
#encore-theme .blog-listing__more:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}
#encore-theme .blog-listing__date,
#encore-theme .blog-post-body__date {
  font-family: 'Space Mono', ui-monospace, monospace;
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #6E6E72;
}

/* Pagination as pills */
#encore-theme .pag {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-top: 40px;
}
#encore-theme .pag__link {
  border: 1px solid #E9E9E6;
  border-radius: 999px;
  padding: 8px 16px;
  color: #0A0A0B;
  font-weight: 500;
  text-decoration: none;
}
#encore-theme .pag__link:hover { border-color: #0A0A0B; }
#encore-theme .pag__link--current {
  background: #0A0A0B;
  color: #fff !important;
  border-color: #0A0A0B;
}
#encore-theme .pag__link--disabled { color: #A9A9AD; }

/* Sidebar: airier panel, pill search, rounded images, quiet links */
#encore-theme .sidebar__panel { padding: 28px; }
#encore-theme .sidebar-search__form {
  display: flex;
  align-items: center;
  gap: 10px;
}
#encore-theme .sidebar-search__icon { font-size: 18px; color: #6E6E72; margin-right: 0; }
#encore-theme .sidebar-search__input {
  flex: 1;
  min-width: 0;
  border: 1px solid #E9E9E6 !important;
  border-radius: 999px !important;
  padding: 12px 18px !important;
  font-family: 'Inter', system-ui, sans-serif;
  background: #fff;
}
#encore-theme .sidebar-search__input:focus {
  border-color: #0A0A0B !important;
  outline: none !important;
  box-shadow: none !important;
}
#encore-theme .sidebar__block img { border-radius: 14px; display: block; }
#encore-theme .sidebar-categories__link,
#encore-theme .sidebar-categories__tag {
  display: block;
  padding: 6px 0;
  color: #6E6E72;
}
#encore-theme .sidebar-categories__link:hover,
#encore-theme .sidebar-categories__tag:hover { color: #0A0A0B; }
#encore-theme .sidebar-categories__tag--active {
  color: #0A0A0B;
  font-weight: 600;
}

/* Blog post: links, blockquote, rules, code, tables */
#encore-theme .blog-post-body__content a {
  /* Article links are clickable again (v3.18, reversing v3.4). They get
     a visible underline so readers can tell they're links. */
  color: #0A0A0B !important;
  text-decoration: underline !important;
  text-decoration-thickness: 1px !important;
  text-underline-offset: 2px !important;
}
#encore-theme .blog-post-body__content a:hover { text-decoration: underline; }
#encore-theme .blog-post-body__content blockquote {
  border-left: 3px solid #0A0A0B;
  margin: 32px 0;
  padding: 4px 0 4px 24px;
  color: #6E6E72;
  font-size: 1.1em;
}
#encore-theme .blog-post-body__content hr {
  border: none;
  border-top: 1px solid #E9E9E6;
  margin: 40px 0;
}
#encore-theme .blog-post-body__content code {
  background: #F5F5F3;
  padding: 2px 6px;
  border-radius: 6px;
  font-size: .88em;
}
#encore-theme .blog-post-body__content pre {
  background: #0A0A0B;
  color: #fff;
  padding: 24px;
  border-radius: 16px;
  overflow: auto;
}
#encore-theme .blog-post-body__content pre code {
  background: none;
  color: inherit;
  padding: 0;
}
#encore-theme .blog-post-body__content table {
  width: 100%;
  border-collapse: collapse;
  margin: 28px 0;
  font-size: 15px;
}
#encore-theme .blog-post-body__content th,
#encore-theme .blog-post-body__content td {
  padding: 10px 12px;
  border-bottom: 1px solid #E9E9E6;
  text-align: left;
}
#encore-theme .blog-post-body__content th {
  font-family: 'Space Mono', ui-monospace, monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #6E6E72;
}
/* Post CTA / opt-in panels: radius (no setting exists for it) */
#encore-theme .blog-post-cta,
#encore-theme .blog-post-optin { border-radius: 20px; }

/* Post CTA box (v3.3): bold dark panel, matching the homepage's closing CTA */
#encore-theme .blog-post-cta {
  /* v3.5: more air above the box (the article's last paragraph sat too
     close to it), and a tighter panel overall. */
  margin-top: 40px;
  padding: 40px 32px;
}
@media (min-width: 1024px) {
  #encore-theme .blog-post-cta { padding: 48px 56px; }
}
#encore-theme .blog-post-cta h2 {
  color: #fff !important;
  /* v3.5: pin the heading's margins — the eyebrow-to-heading gap read as
     too loose, so the eyebrow now sits tight on the heading. */
  margin-top: 0 !important;
  margin-bottom: 14px !important;
}
#encore-theme .blog-post-cta p { color: #C9C9CC; }
#encore-theme .blog-post-cta .blog-post-cta__eyebrow {
  font-family: 'Space Mono', ui-monospace, monospace;
  font-size: 12px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: #A9A9AD;
  margin-bottom: 14px;
}
#encore-theme .blog-post-cta__content p:not(.blog-post-cta__eyebrow) {
  margin-bottom: 0;
}

/* Post CTA button (v3.7): no hyperlink underline — the theme's .btn never
   sets text-decoration, so the link's default underline showed through on
   the white "Start Building Today" button. The mockup's .btn removes it;
   this does the same for every Kajabi-rendered button (post CTA, header,
   banner) so no button text ever shows a link line.
   (v3.8) font-weight 800 as well — the "Start Building" label read as
   too light, so every button label is now extra-bold. */
#encore-theme a.btn { text-decoration: none !important; font-weight: 800 !important; }

/* Dark-button hover text (v3.9) — the theme's global a:hover turns link
   text black on hover, which makes the black header and blog-banner
   buttons unreadable (black text on black). Pin their hover text to
   white. The post CTA button is white with ink text, so its hover text
   is pinned to ink. */
#encore-theme .header a.btn:hover { color: #fff !important; }
#encore-theme #block-1607887261302_0 a.btn:hover { color: #fff !important; }
#encore-theme .blog-post-cta #cta-btn:hover { color: #0A0A0B !important; }

/* Tablet + mobile polish (v3.12) — spacing and wording on small screens. */
/* Never let the page scroll sideways: when any element was wider than the
   viewport, content was cut off on the right (headline, subtext, hello
   bar). overflow-x: clip prevents that and, unlike overflow-x: hidden,
   does not break the sticky header. */
html { overflow-x: clip; }
#encore-theme { overflow-x: clip; }
/* The header logo is 300px wide, which crowds a phone header and leaves
   no room for the menu on a tablet. Shrink it on smaller screens. */
@media (max-width: 1024px) {
  #encore-theme .header .logo__image { max-width: 220px !important; }
}
@media (max-width: 760px) {
  #encore-theme .header .logo__image { max-width: 178px !important; }
  /* The hello bar wrapped to three lines on a phone with "AI" orphaned
     on its own line. Smaller text and tighter padding so it wraps to
     two balanced lines. */
  #encore-theme .hello-bar { font-size: 13px !important; padding: 10px 0 !important; }
}

/* Social icons (v3.3): no hyperlink underline — a line showed under each
   glyph in the preview. No theme rule underlines them and the live site is
   clean, so this is belt-and-braces for any CSS that does. */
#encore-theme .social-icons,
#encore-theme .social-icons__icons,
#encore-theme .social-icons__icon,
#encore-theme .social-icons__icon i,
#encore-theme .social-icons__icon:hover,
#encore-theme .social-icons__icon:focus {
  text-decoration: none !important;
  border-bottom: none !important;
}

/* Form validation errors (v3.16) — when a required field is left empty
   ("This value is required."), the theme renders a bright red (#ff0000)
   banner with white text, which reads as an alarm. Soften it to a calm,
   on-brand notice: a mist box with ink text, a hairline border, and a
   soft rounded corner. The same colours are also set in the theme
   settings (see build_theme.py); this pins them here too so the soft
   look applies even if a setting does not propagate. */
#encore-theme .parsley-errors-list {
  background-color: #F5F5F3 !important;
  color: #0A0A0B !important;
  border: 1px solid #E9E9E6 !important;
  border-radius: 8px !important;
}

/* Animated hand-drawn underline (v3.17) — the "AI-Powered" word in the
   "Build an AI-Powered Affiliate Income System" heading. The static
   inline underline is replaced by a class (see build_theme.py); the line
   is a thick ink bar with rounded ends that draws itself left-to-right
   shortly after the page loads. Pure CSS (no JS), so it always renders:
   the animation holds its end state, so the underline stays drawn. */
@keyframes drawUnderline {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}
#encore-theme .draw-underline {
  position: relative !important;
  display: inline-block !important;
  text-decoration: none !important;
}
#encore-theme .draw-underline::after {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: -0.06em !important;
  height: 0.14em !important;
  background: #0A0A0B !important;
  border-radius: 0.07em !important;
  transform-origin: left center !important;
  animation: drawUnderline 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.35s both !important;
}