/*
Theme Name: Kadence Child — TFP
Template: kadence
Version: 1.0
*/

/* ═══════════════════════════════════════════════
   TOKENS
═══════════════════════════════════════════════ */
:root {
  --tfp-bg:           #0a0a18;
  --tfp-surface:      #161628;
  --tfp-surface-2:    #1c1c32;
  --tfp-surface-3:    #24243c;
  --tfp-teal:         #00baae;
  --tfp-teal-dim:     rgba(0,186,174,0.12);
  --tfp-text:         #e0e0e6;
  --tfp-text-muted:   #b0b0bc;
  --tfp-text-dim:     #7a7a8a;
  --tfp-border:       rgba(255,255,255,0.07);
  --tfp-sidebar-w:    280px;
  --tfp-content-max:  880px;
  --tfp-gap:          32px;
  --tfp-navbar-h:     64px;
  --tfp-copyright-h:  32px;
}

/* ═══════════════════════════════════════════════
   TFP LOGO LOCKUP (shared — course sidebar header +
   the "Full Page" template header both render the
   [tfp_logo] shortcode; this is its only CSS source)
═══════════════════════════════════════════════ */
.tfp-logo{
  --tfp-logo-teal:#00baae;
  --tfp-logo-mute:#7a7a8a;
  --tfp-logo-ink:#ffffff;          /* dark bg default; course + full-page templates are both dark */
  display:inline-flex; align-items:baseline; gap:1px;
  font-family:Satoshi,-apple-system,'Helvetica Neue',sans-serif;
  font-size:20px; line-height:1; letter-spacing:-.035em;
  text-decoration:none; white-space:nowrap;
}
.tfp-logo__the{ font-weight:500; color:var(--tfp-logo-mute); }
.tfp-logo__freelance{ font-weight:700; color:var(--tfp-logo-ink); }
.tfp-logo__pro{ font-weight:900; color:var(--tfp-logo-ink); }
.tfp-logo__dot{
  width:.29em; height:.29em; border-radius:.06em;
  background:var(--tfp-logo-teal); margin:0 .15em; flex:none;
}

/* ═══════════════════════════════════════════════
   BASE
═══════════════════════════════════════════════ */
body { background: var(--tfp-bg); color: var(--tfp-text); }

/* Default browser focus rings are often too dark to read against the
   site's dark backgrounds — make focus visible everywhere without
   relying on each page's inline styles to do it. */
.wp-block-button__link:focus-visible,
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--tfp-teal);
  outline-offset: 2px;
}

/* Remove Kadence default content padding on course pages */
body.page-template-page-lesson .content-container,
body.page-template-page-course .content-container,
body.page-template-page-module .content-container {
  max-width: 100%;
  padding: 0;
}

/* ═══════════════════════════════════════════════
   TWO-COLUMN COURSE LAYOUT
═══════════════════════════════════════════════ */
.tfp-layout {
  display: flex;
  min-height: 100vh;
  align-items: flex-start;
}

/* Sidebar */
.tfp-sidebar {
  width: var(--tfp-sidebar-w);
  flex-shrink: 0;
  background: var(--tfp-surface);
  border-right: 1px solid var(--tfp-border);
  min-height: 100vh;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--tfp-surface-3) transparent;
}

.tfp-sidebar-inner {
  padding: 24px 0 40px;
}

/* Sidebar logo/site name — wraps the shared .tfp-logo lockup (see TFP LOGO
   LOCKUP below); this div just handles the sidebar-specific padding/border. */
.tfp-sidebar-logo {
  padding: 0 20px 20px;
  border-bottom: 1px solid var(--tfp-border);
  margin-bottom: 16px;
}

/* Main content */
.tfp-main {
  flex: 1;
  min-width: 0;
  padding: 48px 48px 80px;
}

.tfp-content-inner {
  max-width: var(--tfp-content-max);
  margin: 0 auto;
}

/* ═══════════════════════════════════════════════
   COURSE NAV — SIDEBAR
═══════════════════════════════════════════════ */
.tfp-course-nav { font-size: 13px; }

.tfp-nav-module { margin-bottom: 4px; }

.tfp-nav-module__link {
  display: block;
  padding: 8px 20px;
  color: var(--tfp-text-muted);
  text-decoration: none;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: color 0.15s;
}
.tfp-nav-module__link:hover { color: var(--tfp-teal); }
.tfp-nav-module.is-open .tfp-nav-module__link { color: var(--tfp-teal); }

.tfp-nav-lessons {
  list-style: none;
  padding: 0;
  margin: 0 0 8px;
  display: none;
}
.tfp-nav-module.is-open .tfp-nav-lessons { display: block; }

.tfp-nav-lesson a {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 7px 20px 7px 20px;
  color: var(--tfp-text-muted);
  text-decoration: none;
  line-height: 1.4;
  transition: color 0.15s, background 0.15s;
  border-radius: 0;
}
.tfp-nav-lesson a:hover {
  color: var(--tfp-text);
  background: var(--tfp-teal-dim);
}
.tfp-nav-lesson.is-current a {
  color: var(--tfp-text);
  background: var(--tfp-teal-dim);
  border-left: 2px solid var(--tfp-teal);
  padding-left: 18px;
}
.tfp-nav-lesson.is-done a { color: var(--tfp-text-dim); }
.tfp-nav-lesson.is-done.is-current a { color: var(--tfp-text); }

.tfp-nav-check {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  border: 1.5px solid var(--tfp-surface-3);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  margin-top: 1px;
  color: transparent;
  background: transparent;
}
.tfp-nav-lesson.is-done .tfp-nav-check {
  background: var(--tfp-teal);
  border-color: var(--tfp-teal);
  color: #0a0a18;
  font-size: 10px;
}
.tfp-nav-label { flex: 1; }

/* ═══════════════════════════════════════════════
   LESSON PAGE CONTENT
═══════════════════════════════════════════════ */

/* Teal overline above page title */
.tfp-overline {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tfp-teal);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.tfp-overline::before {
  content: '';
  display: inline-block;
  width: 20px;
  height: 2px;
  background: var(--tfp-teal);
  border-radius: 2px;
}

/* Page title */
.tfp-main h1 {
  font-family: 'Satoshi', sans-serif;
  font-weight: 700;
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  letter-spacing: -0.03em;
  line-height: 1.15;
  color: var(--tfp-text);
  margin: 0 0 32px;
}

/* Video block */
.tfp-video {
  background: var(--tfp-surface);
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 40px;
  aspect-ratio: 16/9;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tfp-video iframe,
.tfp-video video { width: 100%; height: 100%; }

/* Content sections */
.tfp-section {
  border-top: 1px solid var(--tfp-border);
  padding-top: 32px;
  margin-top: 32px;
}
.tfp-section-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tfp-text-dim);
  margin-bottom: 20px;
}

/* Activity box */
.tfp-activity {
  background: var(--tfp-surface);
  border: 1px solid var(--tfp-border);
  border-radius: 8px;
  padding: 24px 28px;
}

/* Downloads */
.tfp-downloads { display: flex; flex-wrap: wrap; gap: 12px; }
.tfp-download-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  background: transparent;
  border: 1px solid var(--tfp-teal);
  border-radius: 6px;
  color: var(--tfp-teal);
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  transition: background 0.15s;
}
.tfp-download-btn:hover { background: var(--tfp-teal-dim); }
.tfp-download-btn::before { content: '⬇'; font-size: 12px; }

/* Prev/Next navigation */
.tfp-lesson-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 32px;
  margin-top: 32px;
  border-top: 1px solid var(--tfp-border);
  gap: 16px;
}
.tfp-lesson-nav a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--tfp-teal);
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  padding: 8px 16px;
  border: 1px solid var(--tfp-surface-3);
  border-radius: 6px;
  transition: border-color 0.15s, background 0.15s;
}
.tfp-lesson-nav a:hover { border-color: var(--tfp-teal); background: var(--tfp-teal-dim); }
.tfp-lesson-nav .tfp-nav-spacer { flex: 1; }

/* ═══════════════════════════════════════════════
   COURSE DASHBOARD PAGE
═══════════════════════════════════════════════ */
.tfp-dashboard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
  margin-top: 32px;
}
.tfp-module-card {
  background: var(--tfp-surface);
  border: 1px solid var(--tfp-border);
  border-radius: 10px;
  padding: 20px;
  text-decoration: none;
  color: var(--tfp-text);
  transition: border-color 0.15s;
  display: block;
}
.tfp-module-card:hover { border-color: var(--tfp-teal); }
.tfp-module-card__num {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tfp-teal);
  margin-bottom: 6px;
}
.tfp-module-card__title {
  font-family: 'Satoshi', sans-serif;
  font-weight: 600;
  font-size: 15px;
  margin-bottom: 8px;
}
.tfp-module-card__progress {
  font-size: 12px;
  color: var(--tfp-text-dim);
}

/* ═══════════════════════════════════════════════
   WP BLOCK CONTENT OVERRIDES
═══════════════════════════════════════════════ */
.tfp-main .wp-block-heading { color: var(--tfp-text); }
.tfp-main .wp-block-separator { border-color: var(--tfp-border); }
.tfp-main a { color: var(--tfp-teal); }
.tfp-main a:hover { opacity: 0.8; }
.tfp-main .wp-block-quote {
  border-left: 3px solid var(--tfp-teal);
  background: var(--tfp-surface);
  padding: 16px 20px;
  border-radius: 0 6px 6px 0;
}
.tfp-main .wp-block-table table {
  border-collapse: collapse;
  width: 100%;
}
.tfp-main .wp-block-table th,
.tfp-main .wp-block-table td {
  border: 1px solid var(--tfp-surface-3);
  padding: 10px 14px;
  text-align: left;
  color: var(--tfp-text);
}
.tfp-main .wp-block-table thead th {
  background: var(--tfp-surface);
  color: var(--tfp-teal);
}
.tfp-main .wp-block-table tbody tr:nth-child(even) {
  background: var(--tfp-surface);
}

/* ═══════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════ */
@media (max-width: 900px) {
  .tfp-layout { flex-direction: column; }
  .tfp-sidebar {
    width: 100%;
    height: auto;
    position: relative;
    min-height: auto;
  }
  .tfp-main { padding: 24px 20px 60px; }
}

/* ═══════════════════════════════════════════════
   HIDE KADENCE TOP HEADER ON COURSE PAGES
   (sidebar carries branding + auth links instead)
═══════════════════════════════════════════════ */
body.page-template-page-lesson #masthead,
body.page-template-page-lesson .site-header,
body.page-template-page-course #masthead,
body.page-template-page-course .site-header {
  display: none;
}

/* ═══════════════════════════════════════════════
   "FULL PAGE" BLOCK TEMPLATE
   Content width/margins matched to katebagoy.com's
   .container--content (900px, 5% side padding) —
   see ~/Dropbox/Website/katebagoy/css/base.css and
   tokens.css (--width-content).
═══════════════════════════════════════════════ */
.tfp-fullpage-header {
  padding: 32px 5% 0;
}
/* The group block's actual children live one level deeper, inside its own
   inner-container div — the flex layout has to go there, not on the
   outer .tfp-fullpage-header, or the two shortcodes just stack normally. */
.tfp-fullpage-header .wp-block-group__inner-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.tfp-fullpage-header .wp-block-group__inner-container > p {
  margin: 0;
}
.tfp-fullpage-auth__link {
  font-size: 14px;
  color: var(--tfp-text-muted);
  text-decoration: none;
  transition: color 0.15s;
}
.tfp-fullpage-auth__link:hover { color: var(--tfp-teal); }

.tfp-fullpage-content {
  max-width: 900px;
  margin: 0 auto;
  padding: 32px 5% 80px;
}

/* ═══════════════════════════════════════════════
   COMING SOON (logged-out home)
   Type scale, colors, gradient and button styling
   matched to katebagoy.com's real hero pattern —
   see css/tokens.css (--text-7xl, gradient stops)
   and _includes/hero.html (eyebrow/h1 span/btn).
═══════════════════════════════════════════════ */
.tfp-comingsoon {
  /* Not flex: the group block's real children live one level deeper, inside
     its own .wp-block-group__inner-container, so flex properties here would
     only ever apply to that single wrapper — not to each block individually
     (that's what was leaving the narrower subtitle box off-center). Plain
     text-align + margin:auto on each constrained-width block instead. */
  text-align: center;
  padding: 100px 5% 60px;
}
.tfp-comingsoon-eyebrow {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tfp-teal);
  margin: 0 0 20px;
}
.tfp-comingsoon-title {
  font-family: Satoshi, -apple-system, 'Helvetica Neue', sans-serif;
  font-size: 72px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--tfp-text);
  max-width: 720px;
  margin: 0 auto 24px;
}
.tfp-comingsoon-title__gradient {
  background-image: linear-gradient(90deg, var(--tfp-teal) 20%, #8030C7 70%, #ED4A9B 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.tfp-comingsoon-subtitle {
  font-size: 20px;
  line-height: 1.65;
  color: var(--tfp-text);
  max-width: 560px;
  margin: 0 auto 40px;
}
.tfp-comingsoon-cta {
  display: inline-flex;
  align-items: center;
  background: var(--tfp-teal);
  color: #0a0a18;
  font-family: 'Inter', sans-serif;
  font-size: 18px;
  font-weight: 600;
  text-decoration: none;
  padding: 12px 32px;
  border-radius: 9999px;
  transition: background 0.15s;
}
.tfp-comingsoon-cta:hover { background: #63cabf; }

@media (max-width: 600px) {
  .tfp-comingsoon-title { font-size: 40px; }
  .tfp-comingsoon-subtitle { font-size: 18px; }
}

/* ═══════════════════════════════════════════════
   COURSE DASHBOARD
   Grouped module/lesson reference list — same
   check/done visual language as the sidebar nav
   (.tfp-nav-check etc.), deliberately not a 1:1
   clone of it (no accordion, no sticky sidebar).
═══════════════════════════════════════════════ */
.tfp-dashboard-module { margin-bottom: 32px; }
.tfp-dashboard-module__title {
  font-size: 20px;
  margin: 0 0 8px;
}
.tfp-dashboard-module__title a {
  color: var(--tfp-text);
  text-decoration: none;
}
.tfp-dashboard-module__title a:hover { color: var(--tfp-teal); }

.tfp-dashboard-lessons {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--tfp-border);
}
.tfp-dashboard-lesson a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 4px;
  color: var(--tfp-text-muted);
  text-decoration: none;
  border-bottom: 1px solid var(--tfp-border);
  transition: color 0.15s, background 0.15s;
}
.tfp-dashboard-lesson a:hover {
  color: var(--tfp-text);
  background: var(--tfp-teal-dim);
}
.tfp-dashboard-lesson.is-done a { color: var(--tfp-text-dim); }

.tfp-dashboard-check {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border: 1.5px solid var(--tfp-surface-3);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  color: transparent;
  background: transparent;
}
.tfp-dashboard-lesson.is-done .tfp-dashboard-check {
  background: var(--tfp-teal);
  border-color: var(--tfp-teal);
  color: #0a0a18;
}
.tfp-dashboard-label { flex: 1; }

/* ═══════════════════════════════════════════════
   SIDEBAR — MODULE OVERVIEW ENTRY
   Renders identically to a regular lesson row (see
   .tfp-nav-lesson rules above) — no special-casing.
═══════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════
   SIDEBAR — AUTH LINKS (Login / Logout)
═══════════════════════════════════════════════ */
.tfp-sidebar-auth {
  margin-top: 24px;
  padding: 16px 20px 0;
  border-top: 1px solid var(--tfp-border);
}
.tfp-sidebar-auth__link {
  display: inline-block;
  font-size: 13px;
  color: var(--tfp-text-muted);
  text-decoration: none;
  transition: color 0.15s;
}
.tfp-sidebar-auth__link:hover { color: var(--tfp-teal); }

/* Module header acts as an accordion toggle */
.tfp-nav-module__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
}
.tfp-nav-module__link::after {
  content: '\25B8'; /* ▸ */
  font-size: 10px;
  opacity: 0.6;
  transition: transform 0.15s;
}
.tfp-nav-module.is-open .tfp-nav-module__link::after { transform: rotate(90deg); }

/* ═══════════════════════════════════════════════
   DESIGN UPDATE 2026-06-30
   Tabs · Fixed bottom bar · 20px font · Course root
═══════════════════════════════════════════════ */

/* --- Font: 20px body, sidebar scaled proportionally (×1.25) --- */
.tfp-lesson-body {
  font-size: 20px;
  line-height: 1.75;
}
.tfp-lesson-body p,
.tfp-lesson-body li,
.tfp-lesson-body td { font-size: inherit; }

.tfp-course-nav    { font-size: 16px; }
.tfp-nav-module__link { font-size: 13px; }
.tfp-nav-lesson a  { font-size: 16px; }
.tfp-section-label { font-size: 14px; }
.tfp-overline      { font-size: 14px; }
.tfp-download-btn  { font-size: 16px; padding: 12px 20px; }

/* --- Tabs (Lesson | Activity | Downloads) --- */
.tfp-tab-bar {
  display: flex;
  border-bottom: 1px solid var(--tfp-border);
  margin: 0 0 32px;
}
.tfp-tab {
  padding: 14px 24px;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--tfp-text-muted);
  font-family: 'Inter', sans-serif;
  font-size: 17px;
  font-weight: 500;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
  margin-bottom: -1px;
}
.tfp-tab:hover { color: var(--tfp-text); }
.tfp-tab.is-active {
  color: var(--tfp-teal);
  border-bottom-color: var(--tfp-teal);
}
.tfp-tab-panel { display: none; }
.tfp-tab-panel.is-active { display: block; }

.tfp-muted {
  color: var(--tfp-text-dim);
  font-style: italic;
  font-size: 17px;
}

/* --- Fixed bottom bar (Prev · Complete · Next) --- */
.tfp-bottom-bar {
  position: fixed;
  bottom: var(--tfp-copyright-h);
  left: var(--tfp-sidebar-w);
  right: 0;
  height: var(--tfp-navbar-h);
  display: flex;
  align-items: center;
  background: var(--tfp-surface);
  border-top: 1px solid var(--tfp-border);
  padding: 0 48px;
  z-index: 200;
  box-sizing: border-box;
}
.tfp-bar-inner {
  width: 100%;
  max-width: var(--tfp-content-max);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.tfp-bar-left,
.tfp-bar-right {
  display: flex;
  align-items: center;
  gap: 12px;
}
.tfp-bottom-bar .tfp-bar-nav {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--tfp-teal);
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
  padding: 8px 16px;
  border: 1px solid var(--tfp-surface-3);
  border-radius: 6px;
  transition: border-color 0.15s, background 0.15s;
  white-space: nowrap;
}
.tfp-bottom-bar .tfp-bar-nav:hover {
  border-color: var(--tfp-teal);
  background: var(--tfp-teal-dim);
}
.tfp-bottom-bar .tfp-bar-spacer { flex: 1; }
.tfp-complete-wrap { flex: 0 0 auto; }

/* WPcomplete button styling inside bottom bar */
.tfp-complete-wrap .wpc-button,
.tfp-complete-wrap input[type="submit"],
.tfp-complete-wrap button {
  background: var(--tfp-teal) !important;
  color: #0a0a18 !important;
  border: none !important;
  border-radius: 6px !important;
  padding: 8px 20px !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
}

/* Copyright strip — sits at viewport bottom, below the nav bar */
.tfp-copyright-bar {
  position: fixed;
  bottom: 0;
  left: var(--tfp-sidebar-w);
  right: 0;
  height: var(--tfp-copyright-h);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--tfp-surface);
  border-top: 1px solid var(--tfp-border-strong, rgba(255,255,255,0.18));
  font-size: 12px;
  color: var(--tfp-text-dim);
  z-index: 199;
  line-height: 1;
  box-sizing: border-box;
}

/* Reserve exactly the stacked-bar height, plus breathing room, so real
   content can never peek out from underneath the fixed bars. */
.tfp-main {
  padding-bottom: calc(var(--tfp-navbar-h) + var(--tfp-copyright-h) + 40px);
}

/* Suppress Kadence site footer — replaced by .tfp-copyright-bar */
body.page-template-page-lesson #colophon,
body.page-template-page-course #colophon { display: none; }

@media (max-width: 900px) {
  .tfp-bottom-bar { left: 0; padding: 10px 16px; }
  .tfp-copyright-bar { left: 0; }
  .tfp-tab { padding: 12px 16px; font-size: 15px; }
}

/* ═══════════════════════════════════════════════
   6FF LIVE CALL ARCHIVE
═══════════════════════════════════════════════ */
.tfp-archive-note {
  font-size: 14px;
  color: var(--tfp-text-dim);
  margin: 0 0 24px;
}

.tfp-archive-list {
  border-top: 1px solid var(--tfp-border);
}
.tfp-archive-row {
  display: flex;
  align-items: center;
  gap: 20px;
  width: 100%;
  background: none;
  border: none;
  border-bottom: 1px solid var(--tfp-border);
  padding: 16px 4px;
  font-family: inherit;
  text-align: left;
  color: var(--tfp-text);
  cursor: pointer;
  transition: background 0.15s;
}
/* Kadence's parent theme has a global `button:hover{color:...}` rule that
   out-specifies a plain `.tfp-archive-row{color:...}` base rule (element+
   pseudo-class beats a lone class for that property) — it was resolving to
   the site's near-black navy. Set explicitly here instead of relying on
   inheritance from the base rule. */
.tfp-archive-row:hover,
.tfp-archive-row:focus {
  background: var(--tfp-teal-dim);
  color: var(--tfp-teal);
}
.tfp-archive-date {
  flex: 0 0 110px;
  font-size: 14px;
  color: var(--tfp-text-dim);
}
.tfp-archive-title {
  flex: 1;
  font-size: 17px;
}
.tfp-archive-play {
  flex: 0 0 auto;
  color: var(--tfp-teal);
  font-size: 13px;
}

.tfp-archive-modal {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.tfp-archive-modal[hidden] { display: none; }
.tfp-archive-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10, 10, 24, 0.85);
}
.tfp-archive-modal__panel {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 900px;
  background: var(--tfp-surface);
  border-radius: 8px;
  padding: 20px;
  box-sizing: border-box;
}
.tfp-archive-modal__close {
  position: absolute;
  top: 12px;
  right: 12px;
  background: none;
  border: none;
  color: var(--tfp-text-muted);
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 8px;
}
.tfp-archive-modal__close:hover { color: var(--tfp-text); }
.tfp-archive-modal__title {
  font-size: 18px;
  margin: 0 40px 16px 0;
}
.tfp-archive-modal__video {
  display: block;
  width: 100%;
  border-radius: 4px;
  background: #000;
}

@media (max-width: 600px) {
  .tfp-archive-date { flex-basis: 80px; font-size: 13px; }
  .tfp-archive-title { font-size: 15px; }
}

/* ═══════════════════════════════════════════════
   BLOCK RESETS
═══════════════════════════════════════════════ */
/* Browser default <figure> margin collapses through a zero-padding
   parent block, showing a sliver of the body background between
   sections. Reset it so full-width groups sit flush. */
.wp-block-video {
  margin-top: 0;
}

/* ═══════════════════════════════════════════════
   TFP SALES PAGE — katebagoy.com-aligned typography/UI
   Scoped to page-id-289 only so it doesn't affect the
   course/lesson templates elsewhere on the site.
═══════════════════════════════════════════════ */
body.page-id-289 {
  --tfp-gradient-purple: #6702AB;
  --tfp-gradient-pink: #ED4A9B;
  /* .tfp-fullpage-header and .tfp-fullpage-content are both transparent
     wrappers with their own padding, so the body background shows through
     in the gaps (e.g. between the header and the hero). Match it to the
     hero background so those gaps are invisible instead of a lighter stripe. */
  background-color: var(--tfp-bg);
}

body.page-id-289 .entry-content h1,
body.page-id-289 .entry-content h2,
body.page-id-289 .entry-content h3,
body.page-id-289 .entry-content h4 {
  font-family: 'Satoshi', sans-serif;
  letter-spacing: -0.02em;
}

body.page-id-289 .entry-content h1 { font-size: 56px; line-height: 1.1; }
body.page-id-289 .entry-content h2 { font-size: 40px; line-height: 1.15; }
body.page-id-289 .entry-content h3 { font-size: 28px; line-height: 1.25; }
body.page-id-289 .entry-content h4 { font-size: 22px; line-height: 1.3; }

body.page-id-289 .entry-content p,
body.page-id-289 .entry-content li {
  font-family: 'Inter', sans-serif;
  font-size: 21px;
  line-height: 1.6;
}

/* Gradient text — same recipe as katebagoy.com's .gradient-text */
body.page-id-289 .tfp-gradient-text {
  background-image: linear-gradient(90deg, var(--tfp-teal) 20%, var(--tfp-gradient-purple) 70%, var(--tfp-gradient-pink) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Pill buttons, matching katebagoy.com's .btn */
body.page-id-289 .wp-block-button__link {
  border-radius: 9999px !important;
  font-weight: 600;
  padding: 14px 32px;
}

/* Glass card wrapper for the enrollment/pricing block */
body.page-id-289 .tfp-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 16px;
  padding: 40px 32px;
}

/* "As seen in" press-logo strip, above the intro video */
body.page-id-289 .tfp-press-strip {
  text-align: center;
}
body.page-id-289 .tfp-press-strip img {
  max-width: 480px;
  width: 100%;
  height: auto;
  opacity: 0.85;
}

/* Header is transparent by default (.tfp-fullpage-header), so it shows
   the body background (--tfp-surface) through it. On this page it should
   read as part of the hero, so give it the hero's own background instead. */
body.page-id-289 .tfp-fullpage-header {
  background-color: var(--tfp-bg);
}


/* ============================================================
   WishList Member registration form — dark theme
   Added 2026-09-07. Styles [wlm_register] output so it matches
   the course UI without needing a light background wrapper.
   ============================================================ */

.wlm3-theme-styled-reg-form {
  max-width: 460px;
  margin: 40px auto 64px;
  background: var(--tfp-surface);
  border: 1px solid var(--tfp-border);
  border-radius: 12px;
  padding: 32px;
  text-align: left;
}

/* Create Account / Existing Account tabs */
.wlm3-theme-styled-reg-form-toggle {
  list-style: none;
  display: flex;
  gap: 4px;
  margin: 0 0 28px;
  padding: 0;
  border-bottom: 1px solid var(--tfp-border);
}
.wlm3-theme-styled-reg-form-toggle li { margin: 0; }
.wlm3-theme-styled-reg-form-toggle li a {
  display: block;
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 600;
  color: var(--tfp-text-dim);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color .15s ease, border-color .15s ease;
}
.wlm3-theme-styled-reg-form-toggle li a:hover { color: var(--tfp-text); }
.wlm3-show-new-regform .wlm3-new-account a,
.wlm3-show-existing-regform .wlm3-existing-account a {
  color: var(--tfp-teal);
  border-bottom-color: var(--tfp-teal);
}

/* Field groups */
.wlm3-theme-styled-reg-form .wlm3-form-group { margin-bottom: 18px; }

.wlm3-theme-styled-reg-form .wlm3-form-group label {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--tfp-text-muted);
}

/* Inputs — explicit colors so nothing is inherited from the theme */
.wlm3-theme-styled-reg-form .wlm3-form-field,
.wlm3-theme-styled-reg-form input[type="text"],
.wlm3-theme-styled-reg-form input[type="email"],
.wlm3-theme-styled-reg-form input[type="password"] {
  width: 100%;
  box-sizing: border-box;
  padding: 11px 14px;
  font-size: 15px;
  line-height: 1.4;
  color: var(--tfp-text);
  background: var(--tfp-surface-2);
  border: 1px solid var(--tfp-border);
  border-radius: 8px;
  outline: none;
  transition: border-color .15s ease, background .15s ease;
  -webkit-text-fill-color: var(--tfp-text);
}
.wlm3-theme-styled-reg-form .wlm3-form-field::placeholder { color: var(--tfp-text-dim); }
.wlm3-theme-styled-reg-form .wlm3-form-field:hover { border-color: rgba(255,255,255,0.14); }
.wlm3-theme-styled-reg-form .wlm3-form-field:focus {
  border-color: var(--tfp-teal);
  background: var(--tfp-surface-3);
  box-shadow: 0 0 0 3px var(--tfp-teal-dim);
}

/* Chrome/Safari autofill would otherwise paint the field pale blue */
.wlm3-theme-styled-reg-form input:-webkit-autofill,
.wlm3-theme-styled-reg-form input:-webkit-autofill:hover,
.wlm3-theme-styled-reg-form input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--tfp-text);
  -webkit-box-shadow: 0 0 0 1000px var(--tfp-surface-2) inset;
  caret-color: var(--tfp-text);
}

/* Password show/hide + strength meter */
.wlm3-theme-styled-reg-form [id^="wlm3-password-generator-buttons"] { float: right; }
.wlm3-theme-styled-reg-form [id^="wlm3-password-generator-toggle"] {
  background: none;
  border: none;
  padding: 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--tfp-teal);
  cursor: pointer;
}
.wlm3-theme-styled-reg-form [id^="wlm3-password-generator-strength"] {
  margin-top: 6px;
  font-size: 12px;
  color: var(--tfp-text-dim);
}

/* Submit */
.wlm3-theme-styled-reg-form input[type="submit"] {
  width: 100%;
  margin-top: 8px;
  padding: 13px 20px;
  font-size: 15px;
  font-weight: 700;
  color: #06121a;
  background: var(--tfp-teal);
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: filter .15s ease, transform .05s ease;
}
.wlm3-theme-styled-reg-form input[type="submit"]:hover { filter: brightness(1.08); }
.wlm3-theme-styled-reg-form input[type="submit"]:active { transform: translateY(1px); }
.wlm3-theme-styled-reg-form input[type="submit"][disabled] { opacity: .55; cursor: default; }
.wlm3-theme-styled-reg-form .wlm3-form p { margin: 0; }

/* Forgot password link */
.wlm3-theme-styled-reg-form .wlm3-form-group a {
  font-size: 13px;
  color: var(--tfp-text-muted);
  text-decoration: none;
}
.wlm3-theme-styled-reg-form .wlm3-form-group a:hover { color: var(--tfp-teal); }

/* Validation / error messages */
.wlm3-theme-styled-reg-form .wlm3-new-account-error:not(:empty) {
  margin-bottom: 20px;
  padding: 12px 14px;
  font-size: 14px;
  color: #ffb4b4;
  background: rgba(255,80,80,0.10);
  border: 1px solid rgba(255,80,80,0.30);
  border-radius: 8px;
}

@media (max-width: 540px) {
  .wlm3-theme-styled-reg-form { padding: 24px 20px; margin: 28px auto 48px; }
}

/* Override WishList's own #888 tab borders (frontend_form.css) */
.wlm3-show-new-regform .wlm3-theme-styled-reg-form-toggle li.wlm3-new-account,
.wlm3-show-new-regform .wlm3-theme-styled-reg-form-toggle li.wlm3-existing-account,
.wlm3-show-existing-regform .wlm3-theme-styled-reg-form-toggle li.wlm3-new-account,
.wlm3-show-existing-regform .wlm3-theme-styled-reg-form-toggle li.wlm3-existing-account {
  border: none;
}
.wlm3-show-new-regform ul.wlm3-theme-styled-reg-form-toggle > li,
.wlm3-show-existing-regform ul.wlm3-theme-styled-reg-form-toggle > li {
  padding: 0;
  width: auto;
  text-align: left;
}

/* Username field is auto-filled from email by the tfp-email-as-username mu-plugin,
   so hide it on the CREATE ACCOUNT form only. The Existing Account / login form
   still needs its username field, hence the .wlm3-new-account-form scope. */
.wlm3-new-account-form .wlm3-form-group:has(#wlm_form_field_username) {
  display: none;
}

/* Terms of Service checkbox row */
.wlm3-theme-styled-reg-form .wlm3-form-group label:has(input[type="checkbox"]) {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.45;
  color: var(--tfp-text-muted);
  cursor: pointer;
}
.wlm3-theme-styled-reg-form input[type="checkbox"] {
  width: 17px;
  height: 17px;
  flex: none;
  margin: 1px 0 0;
  accent-color: var(--tfp-teal);
  cursor: pointer;
}
.wlm3-theme-styled-reg-form .wlm3-tos-fancybox {
  color: var(--tfp-teal);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.wlm3-theme-styled-reg-form .wlm3-tos-fancybox:hover { filter: brightness(1.15); }

/* Consent checkbox — override the earlier flex rule. Flex turns each inline
   <a> into a flex item, which shatters the sentence into columns. Absolute-
   positioning the box keeps the label as normal inline text with real links. */
.wlm3-theme-styled-reg-form .wlm3-form-group label:has(input[type="checkbox"]) {
  display: block;
  position: relative;
  padding-left: 28px;
  gap: 0;
  margin: 4px 0 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--tfp-text-muted);
  cursor: pointer;
}
.wlm3-theme-styled-reg-form .wlm3-form-group label input[type="checkbox"] {
  position: absolute;
  left: 0;
  top: 2px;
  margin: 0;
}
.wlm3-theme-styled-reg-form .wlm3-form-group label a {
  color: var(--tfp-teal);
  font-size: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.wlm3-theme-styled-reg-form .wlm3-form-group label a:hover { filter: brightness(1.15); }

/* The logo ink defaults to white for the dark course + full-page templates.
   The stock Kadence page template (used by /terms/ and /privacy-policy/) has a
   light header, where white-on-white made the logo invisible. */
body.page-template-default .tfp-logo { --tfp-logo-ink: #1a1a2e; }

/* ═══════════════════════════════════════════════
   SIDEBAR AUTH LINKS — override
   Were inline-block at 13px, so Account / Log out ran together on one line and
   read as fine print rather than navigation. Match the lesson links instead.
═══════════════════════════════════════════════ */
.tfp-sidebar-auth {
  display: flex;
  flex-direction: column;
  margin-top: 24px;
  padding: 12px 0 12px;
  border-top: 1px solid var(--tfp-border);
}
.tfp-sidebar-auth__link {
  display: block;
  padding: 8px 20px;
  font-size: 15px;
  line-height: 1.4;
  color: var(--tfp-text-muted);
  text-decoration: none;
  transition: color 0.15s, background 0.15s;
}
.tfp-sidebar-auth__link:hover {
  color: var(--tfp-text);
  background: var(--tfp-teal-dim);
}

/* ═══════════════════════════════════════════════
   ACCOUNT PAGE ([tfp_account])
   Deliberately mirrors the WishList registration card above so the two
   password experiences look like the same product.
═══════════════════════════════════════════════ */
.tfp-account {
  max-width: 460px;
  margin: 40px auto 64px;
  padding: 32px;
  background: var(--tfp-surface);
  border: 1px solid var(--tfp-border);
  border-radius: 12px;
  text-align: left;
}
.tfp-account__title {
  margin: 0 0 20px;
  font-size: 24px;
  line-height: 1.2;
  color: var(--tfp-text);
}
.tfp-account__meta {
  margin: 0 0 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--tfp-border);
  font-size: 14px;
  line-height: 1.5;
  color: var(--tfp-text-muted);
  word-break: break-word;
}
.tfp-account__meta strong { color: var(--tfp-text); font-weight: 600; }

.tfp-account__form p { margin: 0 0 18px; }
.tfp-account__form label {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--tfp-text-muted);
}
.tfp-account__form input[type="password"] {
  width: 100%;
  box-sizing: border-box;
  padding: 11px 14px;
  font-size: 15px;
  line-height: 1.4;
  color: var(--tfp-text);
  background: var(--tfp-surface-2);
  border: 1px solid var(--tfp-border);
  border-radius: 8px;
  outline: none;
  -webkit-text-fill-color: var(--tfp-text);
  transition: border-color 0.15s, background 0.15s;
}
.tfp-account__form input[type="password"]:hover { border-color: rgba(255,255,255,0.14); }
.tfp-account__form input[type="password"]:focus {
  border-color: var(--tfp-teal);
  background: var(--tfp-surface-3);
  box-shadow: 0 0 0 3px var(--tfp-teal-dim);
}
.tfp-account__form input:-webkit-autofill,
.tfp-account__form input:-webkit-autofill:hover,
.tfp-account__form input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--tfp-text);
  -webkit-box-shadow: 0 0 0 1000px var(--tfp-surface-2) inset;
  caret-color: var(--tfp-text);
}

/* .tfp-btn had no CSS at all — it was rendering as a raw browser button. */
.tfp-btn {
  width: 100%;
  margin-top: 8px;
  padding: 13px 20px;
  font-size: 15px;
  font-weight: 700;
  color: #06121a;
  background: var(--tfp-teal);
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: filter 0.15s ease, transform 0.05s ease;
}
.tfp-btn:hover  { filter: brightness(1.08); }
.tfp-btn:active { transform: translateY(1px); }

/* .tfp-notice likewise — success/error feedback was unstyled body text. */
.tfp-notice {
  margin: 0 0 20px;
  padding: 12px 14px;
  font-size: 14px;
  line-height: 1.45;
  border-radius: 8px;
  border: 1px solid;
}
.tfp-notice.is-success {
  color: #9be8c8;
  background: rgba(0,186,174,0.10);
  border-color: rgba(0,186,174,0.35);
}
.tfp-notice.is-error {
  color: #ffb4b4;
  background: rgba(255,80,80,0.10);
  border-color: rgba(255,80,80,0.30);
}

@media (max-width: 540px) {
  .tfp-account { padding: 24px 20px; margin: 28px auto 48px; }
}