/*
 Theme Name:   Liz Lerman CRP
 Theme URI:    https://learn.lizlerman.com
 Description:  Child theme for Liz Lerman's CRP LMS
 Author:       Beth Sullivan for Liz Lerman
 Template:     Divi
 Version:      1.0.0
 Text Domain:  liz-lerman-crp
*/

/* ── Design Tokens ── */
:root {
  --crp-bg:         #f9f4ee;
  --crp-teal:       #8BB6B2;
  --crp-teal-dark:  #5f8f8b;
  --crp-slate:      #5F7A8A;
  --crp-slate-btn:  #818E94;
  --crp-warm-gray:  #666666;
  --crp-sand-dark:  #5f8f8b;
  --crp-sand:       #bfd2d1;
  --crp-black:      #1a1a1a;
  --crp-muted:      #555555;
  --crp-border:     #d9cfc6;
  --crp-teal-wash-border: #bfd2d1;
  --crp-white:      #ffffff;
  --crp-teal-wash:  #dfe9e8;
  --crp-alert-bg:   #F7F3E8;
  --crp-alert-icon: #969696;
  --crp-alert-btn:  #CFC0B4;
  --crp-alert-text: #2b2b2b;
  --crp-font-head:  'kepler-std-display', serif;
  --crp-font-body:  'europa', sans-serif;
  --crp-radius:     10px;
  --crp-card-shadow: 0 1px 4px rgba(26, 26, 26, 0.06);
}

/* ── Global Base ── */
body {
  background-color: var(--crp-bg);
  font-family: var(--crp-font-body);
  color: var(--crp-black);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--crp-font-head);
  font-weight: 400;
}


/* ── Primary Navigation: show/hide by login state ──
   No PHP/conditional menu logic needed — WordPress adds a "logged-in" class
   to <body> automatically for authenticated users. Items are tagged
   crp-nav-out (logged-out only) or crp-nav-in (logged-in only); untagged
   items (e.g. Resource Library) always show. */
body:not(.logged-in) .crp-nav-in {
  display: none !important;
}

body.logged-in .crp-nav-out {
  display: none !important;
}

#top-menu li {
	font-weight: 400;
	letter-spacing: .3px;
}

/* Active nav item indicator */
#top-menu li.current-menu-item > a {
  color: var(--crp-alert-text);
  text-decoration: underline;
  text-underline-offset: 6px;
}

#main-header {
	background-color: var(--crp-bg);
}

.et_header_style_centered.et_hide_fixed_logo #main-header.et-fixed-header .logo_container {
	height: 25px !important;
}

.et-fixed-header #et-top-navigation {
	margin: -10px 0 -20px;
}

/* CookieYes styling */
.cky-btn-revisit-wrapper,
button.cky-btn-revisit:not(:hover):not(:active) {
	background: var(--crp-teal) !important;
}

.cky-btn-reject,
.cky-btn-preferences,
.cky-btn-accept {
	background: var(--crp-teal) !important;
	border-color: var(--crp-teal) !important;
}

/* ── LearnDash Topic/Lesson Chrome ── */

/* Progress + breadcrumb strip: light teal wash */
.ld-topic-status {
  background-color: var(--crp-teal-wash) !important;
  padding: 20px 0;
}

/* Breadcrumb row itself: no separate background, inherits the wash above */
.learndash-wrapper .ld-breadcrumbs {
  background: none !important;
  background-color: transparent !important;
	padding: 0 1em !important;
}

.learndash-wrapper .ld-progress,
.learndash-wrapper .ld-lesson-status .ld-progress {
    margin: 0 !important;
}

/* "In Progress" status badge */
.ld-status.ld-primary-background {
  background-color: var(--crp-teal-dark) !important;
  color: var(--crp-white) !important;
}

/* "Complete" status badge (shown after Mark Complete is clicked) */
.ld-status-complete {
  background: var(--crp-teal-dark) !important;
}

/* "X% Complete" text */
.ld-progress-percentage.ld-secondary-color {
  color: var(--crp-teal-dark) !important;
}

/* Progress bar fill color, on-brand */
.ld-progress-bar-percentage.ld-secondary-background {
  background-color: var(--crp-teal-dark) !important;
}

/* "Great Job! You've completed this topic" success alert */
.ld-alert-success {
  background: var(--crp-alert-bg) !important;
  border: none !important;
}

.ld-alert-success .ld-alert-icon {
  background: var(--crp-alert-icon) !important;
}

/* "Next Topic" button inside the success alert only — scoped so it doesn't
   also override the Previous/Next ghost buttons in the bottom nav, which
   share the same .ld-button class */
.ld-alert-success .ld-button {
  background-color: var(--crp-alert-btn) !important;
  color: var(--crp-alert-text) !important;
}

/* Keyboard focus outline for all LearnDash buttons — intentionally unscoped,
   accessibility states should be consistent everywhere */
.learndash-wrapper:not(.ld-registration__outer-wrapper):not(.learndash-wrapper--modern) .ld-button:focus {
  outline: 2px solid var(--crp-alert-icon);
}

/* Bottom nav row: constrain to content width, match unit content column */
.ld-content-actions {
  max-width: 1080px;
  margin: 0 auto;
  padding: 10px 20px;
  box-sizing: border-box;
  overflow: visible;
}

.ld-content-action {
  overflow: visible;
  height: auto !important;
}

/* Previous / Next Topic: secondary, ghost/outline style — recede behind Mark Complete.
   Using box-shadow instead of border: it draws inside the box and is immune to
   any parent height/overflow clipping. */
.ld-content-actions .ld-button {
  display: inline-flex !important;
  align-items: center;
  box-sizing: border-box;
  background-color: transparent !important;
  color: var(--crp-teal-dark) !important;
  border: none !important;
  box-shadow: inset 0 0 0 2px var(--crp-teal-dark) !important;
  border-radius: 6px !important;
  font-family: var(--crp-font-body);
  font-weight: 600;
  line-height: normal !important;
  padding: 12px 26px !important;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.ld-content-actions .ld-button:hover {
  background-color: var(--crp-teal-dark) !important;
  color: var(--crp-white) !important;
}

.ld-content-actions .ld-button .ld-icon {
  color: inherit !important;
}

.ld-content-actions .ld-button .ld-text {
	white-space: nowrap;
}

/* "Back to Unit" link: same ghost-pill treatment as Previous/Next */
.ld-content-actions .ld-course-step-back {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  background-color: transparent !important;
  color: var(--crp-teal-dark) !important;
  border: none !important;
  box-shadow: inset 0 0 0 2px var(--crp-teal-dark) !important;
  border-radius: 6px !important;
  font-family: var(--crp-font-body);
  font-weight: 600;
  line-height: normal !important;
  padding: 12px 26px !important;
  text-decoration: none !important;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.ld-content-actions .ld-course-step-back:hover {
  background-color: var(--crp-teal-dark) !important;
  color: var(--crp-white) !important;
}

/* Mark Complete: primary action, solid fill, stands out */
.ld-content-actions .learndash_mark_complete_button {
  box-sizing: border-box;
  background-color: var(--crp-teal-dark) !important;
  color: var(--crp-white) !important;
  border: none !important;
  border-radius: 6px !important;
  font-family: var(--crp-font-body);
  font-weight: 700;
  font-size: 16px;
  line-height: normal !important;
  padding: 14px 32px !important;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(95, 143, 139, 0.35);
  transition: opacity 0.2s ease, box-shadow 0.2s ease;
}

.ld-content-actions .learndash_mark_complete_button:hover {
  opacity: 0.9;
  box-shadow: 0 3px 8px rgba(95, 143, 139, 0.45);
}

/* Mark Complete checkmark icon — confirmed via DevTools: it's a ::after
   pseudo-element on the .sfwd-mark-complete form wrapper (ld-icons font,
   glyph \e906), not on the button itself. No font-size was set in the
   original rule, so it was inheriting a larger size. Setting it explicitly
   shrinks it; "right" offset is in em units so it scales down proportionally. */
.learndash-wrapper:not(.ld-registration__outer-wrapper):not(.learndash-wrapper--modern) .sfwd-mark-complete:after {
  font-size: 11px !important;
  padding-right: 1rem !important;
}

/* ── Login page (MemberPress login form) ── */

#mepr_loginform {
  max-width: 600px;
  margin: 0 auto;
}

#mepr_loginform input[type="submit"],
#mepr_loginform .mepr-submit input {
  background-color: var(--crp-teal-dark) !important;
  color: var(--crp-white) !important;
  border: none !important;
  border-radius: 6px !important;
  transition: background-color 0.2s ease;
}

#mepr_loginform input[type="submit"]:hover,
#mepr_loginform .mepr-submit input:hover {
  background-color: var(--crp-slate) !important;
}

/* "Forgot Password" link — confirmed via DevTools this lives in a sibling
   .mepr-login-actions div, not inside #mepr_loginform itself */
.mepr-login-actions a::after {
  content: "?";
	margin-left: -4px;
}

/* ══════════════════════════════════════════════════════════════════
   Dashboard: MemberPress account area ([mepr-account-form] on page 344)
   Layout: "Option B" — horizontal tab row + card treatment, 10px radius.
   All selectors confirmed live via browser inspection 2026-07-11.
   Rendered structure (classic markup, ReadyLaunch account template OFF):

     <div class="mp_wrapper">
       <nav id="mepr-account-nav">
         <ul>
           <li class="mepr-nav-item mepr-home [mepr-active-nav-tab]"><a>
           <li class="mepr-nav-item mepr-subscriptions"><a>
           <li class="mepr-nav-item mepr-payments"><a>
           <li class="mepr-nav-item"><a>  (Logout)
     <div class="mp_wrapper">
       <div id="mepr-account-welcome-message">
       <form id="mepr_account_form" class="mepr-account-form mepr-form">
       <div class="mepr_spacer">
       <span class="mepr-account-change-password">
     <p class="crp-email-note">  (added in the same code module)

   Divi page sections (page-scoped, stable unless page structure changes):
     .et_pb_section_1 = "Your Course"    .et_pb_section_2 = "Your Account"
   ══════════════════════════════════════════════════════════════════ */

/* Hide the MemberPress welcome message banner */
#mepr-account-welcome-message {
  display: none !important;
}

/* Hide the email field until Erin confirms whether self-service email
   changes conflict with newsletter-sync plans (see client-questions.md).
   Confirmed row markup: .mp-form-row.mepr_email — the earlier
   .mepr-account-form-account ancestor guess was wrong (that class doesn't
   exist; the form's real class is .mepr-account-form), which is why the
   first version of this rule never matched.
   NOTE: address fields are handled by the MemberPress setting
   show_address_on_account=false, not CSS. */
.mepr-account-form .mp-form-row.mepr_email {
  display: none !important;
}

/* ── Account nav: horizontal tab row ── */
#mepr-account-nav ul {
  list-style: none;
  margin: 0 0 28px;
  padding: 0 0 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  border-bottom: 1px solid var(--crp-border);
}

#mepr-account-nav .mepr-nav-item {
  margin: 0;
}

#mepr-account-nav .mepr-nav-item a {
  display: block;
  padding: 10px 20px;
  border-radius: var(--crp-radius);
  color: var(--crp-slate);
  font-family: var(--crp-font-body);
  font-weight: 600;
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease;
}

#mepr-account-nav .mepr-nav-item a:hover {
  background-color: var(--crp-teal-wash);
  color: var(--crp-teal-dark);
}

/* Active tab: solid teal, mirrors primary-action treatment */
#mepr-account-nav .mepr-active-nav-tab a,
#mepr-account-nav .mepr-active-nav-tab a:hover {
  background-color: var(--crp-teal-dark);
  color: var(--crp-white);
}

/* ── Card treatment ── */

/* Account content card: the wrapper that holds the form (Profile view) or
   the tables (Subscriptions/Payments views) — everything except the nav */
.mp_wrapper:not(:has(> #mepr-account-nav)) {
  background-color: var(--crp-white);
  border-radius: var(--crp-radius);
  padding: 36px 40px;
  box-shadow: var(--crp-card-shadow);
}

/* Your Course card: card the row, let the section show the page background */
.page-id-344 .et_pb_section_1 {
  background-color: transparent !important;
}

.page-id-344 .et_pb_section_1 .et_pb_row,
.page-id-344 .et_pb_section_1 .et_block_row {
  background-color: var(--crp-white);
  border-radius: var(--crp-radius);
  padding: 36px 40px;
  box-shadow: var(--crp-card-shadow);
}

/* Account section: transparent so the tab row sits on the page background
   and only the content wrapper reads as a card */
.page-id-344 .et_pb_section_2 {
  background-color: transparent !important;
}

/* ── Buttons ── */

/* Go to Course: THE primary action on the dashboard — solid teal */
.page-id-344 .et_pb_section_1 .et_pb_button {
  background-color: var(--crp-teal-dark) !important;
  color: var(--crp-white) !important;
  border: none !important;
  border-radius: var(--crp-radius) !important;
  font-family: var(--crp-font-body);
  font-weight: 700;
  padding: 12px 28px !important;
  box-shadow: 0 2px 6px rgba(95, 143, 139, 0.35);
  transition: opacity 0.2s ease;
}

.page-id-344 .et_pb_section_1 .et_pb_button:hover {
  opacity: 0.9;
}

/* Save Profile: primary within the form card */
#mepr_account_form input.mepr-submit {
  background-color: var(--crp-teal-dark) !important;
  color: var(--crp-white) !important;
  border: none !important;
  border-radius: var(--crp-radius) !important;
  font-family: var(--crp-font-body);
  font-weight: 700;
  font-size: 15px;
  padding: 12px 28px;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(95, 143, 139, 0.35);
  transition: opacity 0.2s ease;
}

#mepr_account_form input.mepr-submit:hover {
  opacity: 0.9;
}

/* ── Email note under the account card ── */
.crp-email-note {
  margin: 16px 4px 0;
  font-size: 14px;
  color: var(--crp-muted);
}

.crp-email-note a {
  color: var(--crp-teal-dark);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ── Mobile ── */
@media (max-width: 767px) {
  .mp_wrapper:not(:has(> #mepr-account-nav)),
  .page-id-344 .et_pb_section_1 .et_pb_row,
  .page-id-344 .et_pb_section_1 .et_block_row {
    padding: 24px 20px;
  }
}

/* ── Fix: "Your Account" card invisible ──
   The Divi column wrapping the account code module (.et_pb_column_2) has a
   white background set in the builder, so the white card was sitting
   white-on-white — radius/shadow/padding present but invisible. Clear all
   column backgrounds in section 2 so the card reads against the page bg. */
.page-id-344 .et_pb_section_2 .et_pb_column {
  background-color: transparent !important;
}

/* Email note: left-align with the form fields inside the card
   (card padding is 40px desktop / 20px mobile) */
.crp-email-note {
  margin-left: 40px;
}

@media (max-width: 767px) {
  .crp-email-note {
    margin-left: 20px;
  }
}

/* ── Relabel "Home" tab → "Profile" ──
   The tab labels are generated inside MemberPress's [mepr-account-form]
   output and aren't editable from Divi; a proper rename would need a PHP
   filter in functions.php (which Respira can't write). CSS text swap:
   zero out the original text and inject the new label via ::after,
   matching the sibling tabs' metrics (19px/26px, weight 600).
   Note: screen readers will still announce "Home" — swap this for the
   PHP filter approach if that ever matters. */
#mepr-account-nav .mepr-home a {
  font-size: 0;
}

#mepr-account-nav .mepr-home a::after {
  content: "Profile";
  font-size: 19px;
  font-weight: 600;
  line-height: 26px;
}

/* Pin the relabeled tab's line box: font-size:0 collapses the anchor's
   strut, making the Profile tab shorter than its siblings */
#mepr-account-nav .mepr-home a {
  line-height: 26px;
}

/* Final line-box fix for the Profile tab: baseline alignment between the
   zero-font strut and the 19px ::after was inflating the line box (52px vs
   46px siblings). Zero the anchor's own line box and render the label as a
   block so the tab height is exactly padding + 26px, same as siblings. */
#mepr-account-nav .mepr-home a {
  line-height: 0;
}

#mepr-account-nav .mepr-home a::after {
  display: block;
}

/* ── "Your Account": one unified card ──
   Card the whole Divi column (heading + tab row + form + email note)
   instead of just the inner form wrapper, mirroring how the Your Course
   card contains its own heading. Overrides the earlier transparent-column
   and wrapper-card rules by declaration order. */
.page-id-344 .et_pb_section_2 .et_pb_column {
  background-color: var(--crp-white) !important;
  border-radius: var(--crp-radius);
  padding: 36px 40px;
  box-shadow: var(--crp-card-shadow);
}

/* Inner form wrapper: no longer its own card */
.mp_wrapper:not(:has(> #mepr-account-nav)) {
  background-color: transparent;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
}

/* Email note now lives inside the card, already flush with the fields */
.crp-email-note {
  margin-left: 0;
}

@media (max-width: 767px) {
  .page-id-344 .et_pb_section_2 .et_pb_column {
    padding: 24px 20px;
  }

  .crp-email-note {
    margin-left: 0;
  }
}

/* ── Tighten vertical rhythm between sections ──
   Divi defaults: 54px section padding + 27px row padding stack up to
   ~100px+ gaps. Cards carry their own padding now, so pull sections in. */
.page-id-344 .et_pb_section_0 {
  padding-bottom: 12px !important;
}

.page-id-344 .et_pb_section_1 {
  padding-top: 16px !important;
  padding-bottom: 20px !important;
}

.page-id-344 .et_pb_section_2 {
  padding-top: 20px !important;
}

/* Section 2's row: zero its own padding, the column card handles spacing.
   (Section 1's row keeps its padding — it IS the card there.) */
.page-id-344 .et_pb_section_2 .et_pb_row {
  padding: 0 !important;
}

/* ══════════════════════════════════════════════════════════════════
   Unit (LearnDash lesson) landing pages
   Selectors confirmed live on Unit 1 (post 56) 2026-07-11. The status
   strip, breadcrumbs, progress bar, and bottom-nav buttons already
   inherit the topic chrome above — this block covers what's left:
   the topic list, its header row, and the workbook download link.
   Applies to all 9 units via the shared lesson template.
   ══════════════════════════════════════════════════════════════════ */

/* Topic list: card treatment matching the dashboard */
.learndash-wrapper .ld-table-list.ld-topic-list {
  background-color: var(--crp-white);
  border: none;
  border-radius: var(--crp-radius);
  box-shadow: var(--crp-card-shadow);
  overflow: hidden; /* clip the header row to the rounded corners */
}

/* "Unit Content · X% Complete · X/Y Steps" header row: teal wash,
   matching the unit/topic status strip */
.learndash-wrapper .ld-table-list .ld-table-list-header.ld-primary-background {
  background: var(--crp-teal-dark) !important;
  color: #fff !important;
  font-family: var(--crp-font-body);
  font-weight: 600;
  padding: 14px 20px;
}

.learndash-wrapper .ld-table-list .ld-table-list-header a,
.learndash-wrapper .ld-table-list .ld-table-list-header .ld-text {
  color: #fff !important;
}

/* Topic rows: roomier padding, hairline separators, wash on hover */
.learndash-wrapper .ld-table-list .ld-table-list-item {
  border-bottom: 1px solid var(--crp-teal-wash);
}

.learndash-wrapper .ld-table-list .ld-table-list-item:last-child {
  border-bottom: none;
}

.learndash-wrapper .ld-table-list .ld-table-list-item .ld-table-list-item-preview {
  padding: 15px 20px;
  font-family: var(--crp-font-body);
  color: var(--crp-black);
  transition: background-color 0.15s ease;
}

.learndash-wrapper .ld-table-list .ld-table-list-item .ld-table-list-item-preview:hover {
  background-color: var(--crp-teal-wash);
}

/* LearnDash's generic hover-color hook: teal instead of default blue */
.learndash-wrapper .ld-primary-color-hover:hover {
  color: var(--crp-teal-dark) !important;
}

/* Status icons: completed = solid teal check, incomplete = warm-gray ring */
.learndash-wrapper .ld-status-icon.ld-status-complete.ld-secondary-background {
  background-color: var(--crp-teal-dark) !important;
}

.learndash-wrapper .ld-status-icon.ld-status-incomplete {
  border-color: var(--crp-warm-gray) !important;
}

/* Workbook download: slate button treatment (intro-pattern markup gives
   the link a .workbook-link class), matching the topic-sidebar button */
a.workbook-link {
  display: inline-block;
  background-color: var(--crp-slate-btn);
  color: var(--crp-white) !important;
  padding: 12px 26px;
  border-radius: var(--crp-radius);
  font-family: var(--crp-font-body);
  font-weight: 600;
  text-decoration: none !important;
  transition: background-color 0.2s ease;
}

a.workbook-link:hover {
  background-color: var(--crp-slate);
}

/* ══════════════════════════════════════════════════════════════════
   Unit pages: content-area refinements (2026-07-11, round 2)
   ══════════════════════════════════════════════════════════════════ */

/* Warm hover wash derived from --crp-sand */
:root {
  --crp-sand-wash: #bfd2d1;
}

.learndash-wrapper .ld-tabs {
  border-top: 1px solid var(--crp-teal-wash-border);
  margin: 0;
}

/* Lesson status strip background — matches --crp-teal-wash token */
.learndash-wrapper .ld-lesson-status {
  background: var(--crp-teal-wash) !important;
  padding: 20px 0;
}

.et-db #et-boc .et-l .et_pb_column_1 {
  background: transparent !important;
}

/* Topic list: center and match content width */
.ld-lesson-topic-list {
  margin: 0 auto;
  max-width: 1080px;
}

/* Strip LearnDash's default inner padding on the list body */
.learndash-wrapper .ld-table-list .ld-table-list-items {
  padding: 0;
}

/* Unit content rows: warm the hover — overrides the teal-wash hover
   earlier in this file by declaration order */
.learndash-wrapper .ld-table-list .ld-table-list-item .ld-table-list-item-preview:hover {
  background-color: var(--crp-sand-wash);
}

/* Row-title hover color: warm (muted, 4.9:1 on white) instead of teal,
   scoped to the unit topic list so topic-page chrome keeps teal */
.ld-lesson-topic-list .ld-primary-color-hover:hover {
  color: var(--crp-muted) !important;
}

/* Bottom nav: vertically center Back to Course with the Prev/Next pills */
.ld-content-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.ld-content-actions .ld-content-action {
  margin: 0;
  height: auto;
}

#footer-nav a:hover {
	text-decoration: underline !important;
	text-underline-offset: 4px;
}


/* ══════════════════════════════════════════════════════════════════
   Unit pages: fix duplicate title/byline + unstyled resource buttons
   (2026-07-11, round 3)

   Root causes (confirmed via live DOM inspection on Unit 2):
   1. Divi's single.php wraps every non-'page' post type (sfwd-lessons
      included) in a fixed header block — <div class="et_post_meta_wrapper">
      containing h1.entry-title + p.post-meta — printed unconditionally,
      regardless of the et_full_width_page layout setting (that setting
      only ever controlled the sidebar). Our own Divi content already
      includes its own styled H1, so this wrapper is pure duplication.
   2. The resource buttons carry the correct classes (including the shared
      preset class below, used on every unit's buttons) but Divi's
      per-module style overrides are compiled into cached static CSS at
      Visual Builder save time — content pushed via the API bypasses that
      generation step, so the override rules never got compiled. Targeting
      the shared preset class directly sidesteps needing that cache pass.
   ══════════════════════════════════════════════════════════════════ */

/* Hide Divi's default post title + byline on unit (lesson) pages —
   our own Divi content supplies its own title */
body.single-sfwd-lessons .et_post_meta_wrapper {
  display: none !important;
}

/* Unit Resources buttons: explicit fallback so styling doesn't depend on
   Divi's static CSS cache regenerating. All unit buttons share this preset
   class (vsl1vngnai) regardless of which page/unit they're on. */
.preset--group--divi-button--divi-button--h1c8vfa--vsl1vngnai {
  background-color: var(--crp-warm-gray) !important;
  color: var(--crp-white) !important;
  border: none !important;
  border-radius: 6px !important;
  padding: 12px 26px !important;
  display: inline-block !important;
  text-decoration: none !important;
}

.preset--group--divi-button--divi-button--h1c8vfa--vsl1vngnai:hover {
  opacity: 0.9;
}

/* ══════════════════════════════════════════════════════════════════
   Unit pages: remaining style gaps vs. the Unit 1 model (2026-07-11, round 4)

   Same root cause as the button-color fix above — these module-level
   decoration overrides (column divider border, "Unit Resources" heading
   capitalization/size, button full-width sizing) were set correctly in
   the block JSON but never compiled into Divi's static CSS since the
   content was written via API rather than saved through the Visual
   Builder. Selectors below use the column width classes (16_24 / 8_24)
   from our fixed 3_5 / 2_5 split, which is consistent across all 9 units.
   ══════════════════════════════════════════════════════════════════ */

/* Vertical divider between description and resources columns */
body.single-sfwd-lessons .et_flex_column_16_24 {
  border-right: 1px solid rgba(95, 143, 139, 0.2);
}

/* "Unit Resources" heading */
body.single-sfwd-lessons .et_flex_column_8_24 h4.et_pb_module_header {
  font-size: 24px;
  letter-spacing: 2px;
}

/* Resource buttons: full width of their column so both buttons match,
   instead of sizing to their own text content */
body.single-sfwd-lessons .et_flex_column_8_24 .et_pb_button {
  display: block;
  width: 100%;
  box-sizing: border-box;
  text-align: center;
}

/* Divider border only makes sense once columns sit side by side */
@media (max-width: 980px) {
  body.single-sfwd-lessons .et_flex_column_16_24 {
    border-right: none;
  }
}

/* ══════════════════════════════════════════════════════════════════
   Unit pages: button padding fix (2026-07-11, round 5)

   "Unit N Activity Workbook" was wrapping to 2 lines on some units but
   not others.
   ══════════════════════════════════════════════════════════════════ */

.ld-lesson-list.ld-course-content-48 {
	margin: 0 auto;
	max-width: 1080px;
}

#post-48 .et_pb_section_3 {
	max-width: 1080px;
    margin: 3rem auto;
}

#post-48 .et_pb_section_2 {
	max-width: unset;
	margin: 0 auto;
	padding: 80px 0;
}

#post-48 .et_pb_section_2 h2,
#post-48 .et_pb_section_3 h2 {
	margin: 0 0 1rem;
	text-align: center;
}

#post-48 .et_pb_section_2 h2 {
	color: var(--crp-teal);
}

#post-48 .et_pb_section .et_pb_row {
	margin: 0 auto 2rem;
	width: 90%;
}

#post-48 .et_pb_section_3 li,
#post-48 .et_pb_section_2 p {
	font-size: 16px;
	line-height: 1.5;
	margin: 0 0 10px;
}

body.et-db #page-container #et-boc a.unit-resource-btn  {
	background: #969490;
	border: none !important;
    border-radius: 6px !important;	
	color: #ffffff !important;
    font-size: 17px !important;	
	margin-top: 0.5rem;
	max-width: 80%;
    padding-right: 1em !important;
    padding-left: 0.7em !important;
    padding-top: 6px !important;
    padding-bottom: 6px !important;	
    text-align: left;
	width: 100%;	
}

a.unit-resource-btn:hover {
	background: var(--crp-sand);	
}

.sfwd-topic-template-default .et_pb_section_1 {
	padding-top: 0 !important;
}

.learndash-wrapper .ld-item-list.ld-lesson-list .ld-section-heading h2,
#learndash_post_48 h2 {
	font-size: 30px;
}

/* "Expand" / "Expand All" buttons: override LD's hardcoded blue */
.ld-item-list .ld-expand-button.ld-button-alternate,
.ld-item-list-actions .ld-expand-button {
  background-color: var(--crp-teal-dark) !important;
  border-color: var(--crp-teal-dark) !important;
}

.ld-item-list .ld-expand-button.ld-button-alternate:hover,
.ld-item-list-actions .ld-expand-button:hover {
  background-color: var(--crp-slate) !important;
}

.ld-item-list .ld-expand-button.ld-button-alternate {
	padding: 5px;
}

.ld-item-list .ld-expand-button .ld-text,
.ld-item-list-actions .ld-expand-button .ld-text {
  color: var(--crp-white) !important;
}

.ld-item-list .ld-expand-button .ld-icon,
.ld-item-list-actions .ld-expand-button .ld-icon {
  background-color: transparent !important;
  color: var(--crp-white) !important;
}

/* Unit rows: rounded card + warm hover, matching the topic-list treatment */
.ld-item-list .ld-item-list-item {
  border-radius: var(--crp-radius);
  overflow: hidden;
}

.ld-item-list .ld-item-list-item-preview {
  transition: background-color 0.15s ease;
}

.ld-item-list .ld-item-list-item-preview:hover {
  background-color: var(--crp-teal-wash);
}

.ld-item-list .ld-primary-color-hover:hover {
  color: var(--crp-muted) !important;
}

/* Status icons on unit rows: same teal/warm-gray language as topic rows */
.ld-item-list .ld-status-icon.ld-status-complete {
  background-color: var(--crp-teal-dark) !important;
}

.ld-item-list .ld-status-icon.ld-status-in-progress {
  background-color: var(--crp-sand-dark) !important;
}

.learndash-wrapper .ld-status-in-progress {
	border-color: var(--crp-warm-gray) #e2e7ed #e2e7ed var(--crp-warm-gray) !important;
}

.ld-item-list .ld-status-icon.ld-status-incomplete {
  border-color: var(--crp-warm-gray) !important;
}

/* Topic page adjustments */

.learndash-cpt-sfwd-topic #et-boc .et-l .et_flex_column {
	--vertical-gap: 0;
}

/* ══════════════════════════════════════════════════════════════════
   Course page: instructor bios + other items
   ══════════════════════════════════════════════════════════════════ */

.learndash-shortcode-wrap {
	display: none;
}

.logged-in .learndash-shortcode-wrap {
	display: block;
}

.crp-course-cta {
	text-align: center;
}

.crp-course-cta a.crp-register-btn {
	background: #000 !important;
	border-radius: 0 !important;
}

.crp-signin-link a {
	color: #fff !important;
	text-decoration: underline !important; 
	text-underline-offset: 2px;
}


#learndash_post_48 .et_pb_section_1 {
	margin: 0 auto;
	max-width: 1080px;
	padding: 3rem 0;
}

#learndash_post_48 .et_pb_section_1 h2.et_pb_module_header {
	color: var(--crp-teal-dark);
	font-size: 40px;
	margin-bottom: 2rem;
	text-align: center;
}

#learndash_post_48 .et_pb_section_1 .et_pb_text_inner {
	color: var(--crp-soft-text);
	font-size: 17px;
	line-height: 1.4;
}

#learndash_post_48 .et_pb_section_1 .et_pb_row {
	margin: 0 auto;
	width: 90%;
}

.instructor-bio {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;
  gap: 24px;
  margin-bottom: 2rem !important;
}

.instructor-bio .et_pb_column:first-child {
  flex: 0 0 150px;
  width: 150px;
}

.instructor-bio .et_pb_column:last-child {
  flex: 1 1 auto;
  width: auto;
}

.instructor-bio .et_pb_image_wrap {
  display: block;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  overflow: hidden;
}

.instructor-bio .et_pb_image_wrap img {
  width: 150px;
  height: 150px;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}

.instructor-bio h4 {
  margin: 0 0 8px;
}

.instructor-bio p {
  margin: 0;
}

@media (max-width: 767px) {
  .instructor-bio {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .instructor-bio .et_pb_column:first-child,
  .instructor-bio .et_pb_column:last-child {
    width: 100%;
    flex: none;
  }
}

/* ══════════════════════════════════════════════════════════════════
   Unit pages: column class naming fix (2026-07-12, round 6)

   Root cause: the "round 4" divider/heading/button rules below only
   targeted .et_flex_column_16_24 / .et_flex_column_8_24 (Unit 1's
   rendered class names). Divi generates different class suffixes
   depending on how each push set the column's "type" field — Units
   2-9 rendered as .et_flex_column_3_5 / .et_flex_column_2_5 instead,
   same proportions, different class names, so none of those rules
   ever matched outside Unit 1. Extending the same rules to cover both
   naming patterns.
   ══════════════════════════════════════════════════════════════════ */

body.single-sfwd-lessons .et_flex_column_3_5 {
  border-right: 1px solid rgba(95, 143, 139, 0.2);
}

body.single-sfwd-lessons .et_flex_column_2_5 h4.et_pb_module_header {
  font-size: 24px;
  letter-spacing: 2px;
}

body.single-sfwd-lessons .et_flex_column_2_5 .et_pb_button {
  display: block;
  width: 100%;
  box-sizing: border-box;
  text-align: center;
}

@media (max-width: 980px) {
  body.single-sfwd-lessons .et_flex_column_3_5 {
    border-right: none;
  }
}

/* ══════════════════════════════════════════════════════════════════
   Dashboard: "Change Password" ghost button (2026-07-12)
   Markup: <span class="mepr-account-change-password"><a>Change Password</a></span>
   Ghost/outline treatment matching the Previous/Next Topic pattern —
   box-shadow instead of border so it's immune to parent clipping.
   Font size matched to Save Profile's 15px.
   ══════════════════════════════════════════════════════════════════ */

.mepr-account-change-password a {
  display: inline-block;
  background-color: transparent;
  color: var(--crp-teal-dark);
  box-shadow: inset 0 0 0 1px var(--crp-teal-dark);
  border-radius: var(--crp-radius);
  font-family: var(--crp-font-body);
  font-weight: 600;
  font-size: 15px;
  padding: 10px 24px;
  text-decoration: none !important;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.mepr-account-change-password a:hover {
  background-color: var(--crp-teal-dark);
  color: var(--crp-white);
}

/* Gravity Forms styles */

body .gform_wrapper select,
body .gform_wrapper input:not([type=radio]):not([type=checkbox]):not([type=submit]):not([type=button]):not([type=image]):not([type=file]), 
body .gform_wrapper textarea.textarea, 
body div.form_saved_message div.form_saved_message_emailform form input[type=text] {
	background: #fff !important;
	color: #222 !important;
	font-size: 15px !important;
}

body .gform_wrapper select {
	padding: 7px 15px;
}

body .gform_wrapper .ginput_container_select {
	cursor: pointer;
	position: relative;	
}

body .gform_wrapper .ginput_container_select:after {
	font-family: "ETmodules" !important;
    content: '\3b' !important;
    font-weight: 400 !important;
    color: var(--gcid-link-color);
    font-size: 16px;
    line-height: 24px;
    position: absolute;	
	right: 14px;
    top: 12px;
}

body .gform_wrapper .gform_button {
	background: var(--crp-slate-btn) !important;
}

body .gform_wrapper .gform_button:hover {
	background: var(--crp-slate) !important;
}

/* Checkout page */
.mepr-checkout-container .invoice-wrapper .mp-cart-footer {
	margin-left: 0 !important;
}

/* ══════════════════════════════════════════════════════════════════
   Mobile styles
   ══════════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {

  /* 1. Divi's default .container (header/footer/nav) is 80% wide at
     every breakpoint — widen it on mobile so there's less wasted
     side padding on small screens. */
  .container {
    width: 95% !important;
  }

  /* 2. Topic pages: title, description, and Unit Resources buttons
     live inside Divi's default 80%-wide .et_pb_row. Targeting by
     section index (et_pb_section_1) doesn't work sitewide — the 7
     resource-only topics (1.7, 2.7, 3.7, 4.7, 5.7, 6.7, 7.6) have no
     video section ahead of it, so title/description land in
     et_pb_section_0 instead. Targeting the row that actually
     contains the topic's H1 works across all three topic-page
     variants (standard single-video, carousel, resource-only) —
     confirmed live on one page of each type. Let that row go full
     width, with a small inner gutter so text/buttons don't touch the
     screen edge. */
  .sfwd-topic-template-default .et_pb_row:has(h1) {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    box-sizing: border-box;
  }

  /* 2b. Video row: true edge-to-edge, no gutter (unlike the text row
     above — the video should touch both screen edges, confirmed by
     request). Targeted separately via :has(.et_pb_video) so the
     video row's own padding stays at 0 regardless of the text row's
     20px gutter. */
  .sfwd-topic-template-default .et_pb_row:has(.et_pb_video) {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* 2c. Some topics (e.g. the "Deeper Engagement" X.6 pages) use the
     same 3/5 + 2/5 two-column split as the Unit landing pages
     (description | Unit Resources side by side) — confirmed live on
     topic 1.6 (post 68). Divi's markup already carries a phone-
     specific responsive class (et_flex_column_24_24_phone) meant to
     stack these to full width on mobile, but — same root cause
     documented elsewhere in this file — that per-breakpoint CSS was
     never compiled since the content was pushed via API rather than
     saved through the Visual Builder. The row above is already
     full-width and flex-wrap:wrap by default, so forcing each column
     to 100% here is enough to make them stack. */
  .sfwd-topic-template-default .et_flex_column_3_5,
  .sfwd-topic-template-default .et_flex_column_2_5 {
    width: 100% !important;
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }

  /* 3. Unit topic list: no width % was ever set, only a 1080px
     max-width that never engages below that size — so on phones it
     renders edge-to-edge with zero whitespace. Give it real side
     margins, matching the .container mobile width above. */
  .learndash-wrapper .ld-table-list.ld-topic-list {
    width: 95% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* 4. Homepage hero — root cause confirmed via live inspection, not
     a background-position crop issue: with background-size:cover on
     a landscape photo inside a portrait-shaped section, height is
     the constraining dimension, so the ENTIRE image height maps 1:1
     onto the section with zero vertical cropping regardless of
     position value. That means Liz's head (near the top of the
     source photo) always renders near the TOP of the section — which
     is exactly where the intro text block sits today, hiding it. The
     visible area below the text only ever shows the bottom of the
     photo (audience/legs). Moving the text block to the BOTTOM of
     the section instead reveals that same top area, unobstructed —
     confirmed visually before shipping this. */
  body.home .et_pb_section_0 {
    position: relative;
  }

  body.home .et_pb_section_0 .et_pb_row_1 {
    position: absolute !important;
    top: auto !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    margin: 0 !important;
  }

  /* The diagonal shape-divider at the bottom of this section is a
     descendant of the row now pinned to the bottom, and without an
     explicit z-index it painted behind the text block's background.
     Bring it back in front. */
  body.home .et_pb_section_0 .et_pb_bottom_inside_divider {
    z-index: 5 !important;
  }

  /* 5. Tighten default Divi row vertical padding — mobile only, per
     clarification (the earlier version of this rule was unscoped to
     mobile/desktop; corrected). Divi's own default for single-column
     "block" rows (.et_block_row — distinct from multi-column
     .et_flex_row, which already defaults to 0 top/bottom) is
     padding: 30px 0. That's the source of the visible gap above/below
     the video on topic pages, and the same default applies wherever a
     simple single-column row appears sitewide. Tightened to 15px
     (half) rather than removed entirely, per request.

     NOTE on selector: Beth's own selector (.et-db #et-boc .et-l
     .et_block_row) doesn't actually match on LearnDash topic/lesson
     pages — confirmed live via DOM inspection that #et-boc is NOT an
     ancestor there; that content renders inside LearnDash's own tab
     wrapper (#ld-tab-content-N > .ld-tabs-content > .learndash-wrapper
     > .entry-content), not Divi's normal #et-boc flow. .et-l is
     present in both cases, so this drops the #et-boc requirement to
     actually match everywhere.

     Only padding-top/padding-bottom are set (not the shorthand), so
     this doesn't touch left/right padding already set elsewhere in
     this same media query (the video-row edge-to-edge fix in 2b, or
     the topic-row 20px gutter in 2) — those keep whichever value wins
     by their own specificity.

     Excludes .page-id-344 (the dashboard): its "Your Course" card row
     is also .et_block_row, but its 24px/20px mobile padding (set
     above, under the Dashboard section) is deliberate card padding,
     not the default gap this rule is meant to tighten. */
  body:not(.page-id-344) .et-l .et_block_row {
    padding-top: 15px !important;
    padding-bottom: 15px !important;
  }

  /* 6. Tighten Divi's default section padding too (as opposed to row
     padding in item 5 above). Verified live that Beth's literal
     selector (.et-db #et-boc .et-l .et_pb_section) DOES match here —
     unlike the row case in item 5, #et-boc is a genuine ancestor for
     these elements, just further up the tree than the row sits.

     Known effect worth a second look: this has higher specificity
     than #learndash_post_48 .et_pb_section_1's existing padding: 3rem
     0 (48px) on the course landing page, so that section's mobile
     padding drops to 25px too — confirmed live. Flagged to Beth
     rather than excluded, since it wasn't clear whether that page
     should be protected the way the dashboard was in item 5. The
     dashboard itself IS safe here without an exclusion — its section
     padding is already set with !important, which wins regardless. */
  .et-db #et-boc .et-l .et_pb_section {
    padding: 25px 0;
  }

  /* 7. Dashboard (/dashboard/, page 344): the three main content rows
     ("Your Dashboard" heading, "Your Course" card, "Your Account"
     card) were still at Divi's default 80% row width on mobile —
     confirmed live at 330px on a 412px viewport. Widen to 95%, same
     target as .container in item 1. Excludes the shared Theme
     Builder footer (class suffix _tb_footer) via :not() — that
     template is reused on every page, and widening it only on the
     dashboard would make the dashboard's footer render a different
     width than everywhere else. */
  .page-id-344 .et_pb_row:not([class*="_tb_footer"]) {
    width: 95% !important;
  }
	
	.crp-video-gate-note {
		margin: 10px !important;
	}
		
	#crp-personal-use-notice {     
        margin: 1.5rem auto 1rem;
		max-width: 90%;		
        text-align: left;
	}
	
	.crp-carousel__thumbs {
		margin-bottom: 1.5rem;
	}
}

@media (max-width: 640px) {
	.et-db #et-boc .et-l .et_pb_column .et_pb_module.et_pb_heading,
	.learndash-wrapper .ld-breadcrumbs .ld-breadcrumbs-segments {
		padding-bottom: 0;
	}
	
	.et-db #et-boc .et-l .et_pb_section {
		padding: 0;
	}
	
	.learndash-wrapper .ld-breadcrumbs .ld-status {
		margin-bottom: 1rem;
	}
	
	.et-db #et-boc .et-l .et_pb_column .et_pb_module.et_pb_heading,
	.et-db #et-boc .et-l .et_pb_column .et_pb_module.et_pb_button_0_wrapper {
		margin-bottom: 0 !important;
	}
	
	.learndash-wrapper:not(.ld-registration__outer-wrapper):not(.learndash-wrapper--modern) .ld-content-actions .ld-content-action .ld-course-step-back {
		display: block !important;
		margin-top: 1rem;
	}

	.learndash-wrapper .ld-progress .ld-progress-heading, .learndash-wrapper .ld-progress .ld-progress-heading.ld-progress-inline {
		flex-direction: row;
	}
}