/* ============================================================
   FRAMED MINDS — Reflections & Journal System
   
   Requires: fm-tokens.css (brand variables)
   
   Covers:
     1. Page shell (.fm-reflections-page body class)
     2. Writing editor [fm_write]
     3. Journal view [fm_my_journal]
     4. Responsive
   
   Last updated: March 31, 2026
   ============================================================ */


/* ==========================================================
   1. PAGE SHELL
   ========================================================== */

   ============================================ */

.fm-reflections-page {
  background: #F7F5EF;         /* soft neutral like other tools */
}

/* Main content wrapper */
.fm-reflections-page .site-content,
.fm-reflections-page .bb-grid,
.fm-reflections-page .entry-content {
  max-width: 960px;
  margin: 0 auto;
  padding: 72px 16px 90px;
}

/* ---------- Page Heading Area ---------- */

/* Main title "Reflections" */
.fm-reflections-page .entry-title,
.fm-reflections-page h1.entry-title {
  font-size: clamp(1.9rem, 3vw, 2.3rem);
  margin: 0 0 6px;
  letter-spacing: -0.03em;
}

/* First intro paragraph under the title */
.fm-reflections-page .entry-content > p:first-of-type {
  font-size: 0.98rem;
  line-height: 1.6;
  color: #4C5560;
  max-width: 680px;
  margin-bottom: 18px;
}

/* Optional second paragraph (if you keep both lines of copy) */
.fm-reflections-page .entry-content > p:nth-of-type(2) {
  font-size: 0.95rem;
  line-height: 1.6;
  color: #606975;
  max-width: 680px;
  margin-bottom: 26px;
}

/* ---------- "New Post" subheading ---------- */

.fm-reflections-page .entry-content > h2:first-of-type {
  font-size: 1.05rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #8A8F7B;
  margin-top: 10px;
  margin-bottom: 10px;
}

/* Optional subtle divider before the form card */
.fm-reflections-page .entry-content > h2:first-of-type::before {
  content: "";
  display: block;
  height: 1px;
  width: 100%;
  max-width: 120px;
  background: #E3E0D6;
  margin-bottom: 12px;
}

/* ---------- Spacing around the form card ---------- */

/* Whatever wrapper your form lives in – common BuddyBoss/Elementor selectors */
.fm-reflections-page .entry-content .wpuf-form-add,
.fm-reflections-page .entry-content .fluentform,
.fm-reflections-page .entry-content form {
  margin-top: 6px;
}

/* ---------- Mobile tweaks ---------- */

@media (max-width: 640px) {
  .fm-reflections-page .site-content,
  .fm-reflections-page .bb-grid,
  .fm-reflections-page .entry-content {
    padding: 56px 14px 72px;
  }

  .fm-reflections-page .entry-title,
  .fm-reflections-page h1.entry-title {
    font-size: 1.7rem;
  }

  .fm-reflections-page .entry-content > p:first-of-type,
  .fm-reflections-page .entry-content > p:nth-of-type(2) {
    font-size: 0.92rem;
  }

  .fm-reflections-page .entry-content > h2:first-of-type {
    font-size: 0.95rem;
    letter-spacing: 0.14em;
  }
}



/* ============================================================
   FRAMED MINDS — Reflections System
   
   Covers:
     1. Writing Editor [fm_write]
     2. Journal View [fm_my_journal]
   
   Add to custom.css AFTER the dashboard section.
   ============================================================ */


/* ==========================================================
   1. WRITING EDITOR
   ========================================================== */
.fm-write {
    max-width: 720px;
    margin: 0 auto;
    padding: var(--fm-space-2xl) var(--fm-space-md);
}

/* Header */
.fm-write__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--fm-space-xl);
}

.fm-write__heading {
    font-family: var(--fm-font-heading);
    font-size: 28px;
    font-weight: 700;
    color: var(--fm-neutral);
    margin: 0 0 6px 0;
}

.fm-write__prompt {
    font-family: var(--fm-font-body);
    font-size: 14px;
    font-weight: 300;
    color: var(--fm-body-secondary);
    margin: 0;
    line-height: 1.5;
}

.fm-write__prompt em {
    color: var(--fm-heal-teal);
}

.fm-write__journal-link {
    font-family: var(--fm-font-body);
    font-size: 13px;
    font-weight: 600;
    color: var(--fm-heal-teal);
    text-decoration: none !important;
    white-space: nowrap;
    margin-top: 8px;
}

.fm-write__journal-link:hover {
    color: var(--fm-olive);
}

/* Fields */
.fm-write__field {
    margin-bottom: var(--fm-space-md);
}

/* Title input */
.fm-write__title-input {
    width: 100%;
    padding: 16px 20px;
    font-family: var(--fm-font-heading);
    font-size: 20px;
    font-weight: 600;
    color: var(--fm-neutral);
    background: var(--fm-bg-white);
    border: 1.5px solid var(--fm-border);
    border-radius: var(--fm-radius-md);
    outline: none;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.fm-write__title-input::placeholder {
    color: var(--fm-meta);
    font-weight: 400;
}

.fm-write__title-input:focus {
    border-color: var(--fm-heal-teal);
    box-shadow: 0 0 0 3px rgba(58, 90, 64, 0.08);
}

/* Featured image */
.fm-write__image-field {
    position: relative;
}

.fm-write__image-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    background: var(--fm-warm-neutral);
    border: 1.5px dashed var(--fm-border);
    border-radius: var(--fm-radius-sm);
    font-family: var(--fm-font-body);
    font-size: 13px;
    font-weight: 500;
    color: var(--fm-body-secondary);
    cursor: pointer;
    transition: all 0.3s ease;
}

.fm-write__image-btn:hover {
    border-color: var(--fm-heal-teal);
    color: var(--fm-heal-teal);
    background: rgba(58, 90, 64, 0.04);
}

.fm-write__image-btn svg {
    stroke: currentColor;
}

.fm-write__image-preview {
    position: relative;
    margin-bottom: var(--fm-space-sm);
    border-radius: var(--fm-radius-md);
    overflow: hidden;
    max-height: 300px;
}

.fm-write__image-preview img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: var(--fm-radius-md);
    display: block;
}

.fm-write__image-remove {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    border: none;
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease;
}

.fm-write__image-remove:hover {
    background: rgba(0, 0, 0, 0.7);
}

/* Editor wrap — style the TinyMCE container */
.fm-write__editor-wrap {
    border: 1.5px solid var(--fm-border);
    border-radius: var(--fm-radius-md);
    overflow: hidden;
    transition: border-color 0.3s ease;
}

.fm-write__editor-wrap:focus-within {
    border-color: var(--fm-heal-teal);
}

/* Remove default WordPress editor borders */
.fm-write__editor-wrap .wp-editor-container {
    border: none !important;
}

.fm-write__editor-wrap .mce-tinymce {
    border: none !important;
    box-shadow: none !important;
}

.fm-write__editor-wrap .mce-toolbar-grp {
    border-bottom: 1px solid var(--fm-border) !important;
    background: var(--fm-warm-neutral) !important;
}

.fm-write__editor-wrap .quicktags-toolbar {
    border-bottom: 1px solid var(--fm-border) !important;
    background: var(--fm-warm-neutral) !important;
}

/* Footer */
.fm-write__footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: var(--fm-space-lg);
    padding-top: var(--fm-space-lg);
    border-top: 1px solid var(--fm-border);
}

/* Visibility toggle */
.fm-write__visibility {
    display: flex;
    align-items: center;
    gap: var(--fm-space-sm);
}

.fm-write__visibility-label {
    font-family: var(--fm-font-body);
    font-size: 13px;
    font-weight: 500;
    color: var(--fm-body-secondary);
}

.fm-write__visibility-options {
    display: flex;
    gap: 6px;
}

.fm-write__radio {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 8px 14px;
    border: 1.5px solid var(--fm-border);
    border-radius: var(--fm-radius-sm);
    font-family: var(--fm-font-body);
    font-size: 13px;
    font-weight: 500;
    color: var(--fm-body-secondary);
    cursor: pointer;
    transition: all 0.3s ease;
}

.fm-write__radio input {
    display: none;
}

.fm-write__radio svg {
    width: 14px;
    height: 14px;
}

.fm-write__radio.is-active {
    border-color: var(--fm-heal-teal);
    background: rgba(58, 90, 64, 0.06);
    color: var(--fm-heal-teal);
}

/* Submit button */
.fm-write__submit {
    padding: 12px 28px;
    background: var(--fm-cta-green);
    color: var(--fm-neutral);
    border: 1.5px solid var(--fm-cta-green);
    border-radius: 8px;
    font-family: var(--fm-font-body);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.fm-write__submit:hover {
    background: var(--fm-cta-green-hover);
    border-color: var(--fm-cta-green-hover);
    color: var(--fm-bg-white);
}

.fm-write__submit:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Status message */
.fm-write__status {
    margin-top: var(--fm-space-md);
    padding: 12px 18px;
    border-radius: var(--fm-radius-sm);
    font-family: var(--fm-font-body);
    font-size: 14px;
    font-weight: 500;
}

.fm-write__status--success {
    background: rgba(150, 202, 66, 0.12);
    color: var(--fm-heal-teal);
    border: 1px solid rgba(150, 202, 66, 0.3);
}

.fm-write__status--error {
    background: rgba(235, 87, 87, 0.08);
    color: #c0392b;
    border: 1px solid rgba(235, 87, 87, 0.2);
}


/* ==========================================================
   2. JOURNAL VIEW
   ========================================================== */
.fm-journal {
    max-width: 960px;
    margin: 0 auto;
    padding: var(--fm-space-2xl) var(--fm-space-md);
}

/* Header */
.fm-journal__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--fm-space-xl);
}

.fm-journal__eyebrow {
    display: block;
    font-family: var(--fm-font-heading);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--fm-heal-teal);
    margin-bottom: 10px;
}

.fm-journal__heading {
    font-family: var(--fm-font-heading);
    font-size: 32px;
    font-weight: 700;
    color: var(--fm-neutral);
    margin: 0 0 8px 0;
}

.fm-journal__subheading {
    font-family: var(--fm-font-body);
    font-size: 15px;
    font-weight: 300;
    color: var(--fm-body-secondary);
    margin: 0;
    line-height: 1.6;
    max-width: 520px;
}

.fm-journal__write-btn {
    display: inline-flex;
    align-items: center;
    padding: 10px 24px;
    background: var(--fm-cta-green);
    color: var(--fm-neutral);
    border-radius: var(--fm-radius-sm);
    font-family: var(--fm-font-body);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none !important;
    transition: all 0.3s ease;
    white-space: nowrap;
    margin-top: 16px;
}

.fm-journal__write-btn:hover {
    background: var(--fm-cta-green-hover);
    color: var(--fm-bg-white);
}

/* Filter tabs */
.fm-journal__filters {
    display: flex;
    gap: 6px;
    margin-bottom: var(--fm-space-lg);
    border-bottom: 1px solid var(--fm-border);
    padding-bottom: var(--fm-space-sm);
}

.fm-journal__filter {
    padding: 8px 16px;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    font-family: var(--fm-font-body);
    font-size: 14px;
    font-weight: 500;
    color: var(--fm-meta);
    cursor: pointer;
    transition: all 0.3s ease;
}

.fm-journal__filter:hover {
    color: var(--fm-body-secondary);
}

.fm-journal__filter.is-active {
    color: var(--fm-heal-teal);
    border-bottom-color: var(--fm-heal-teal);
    font-weight: 600;
}

/* Entry grid */
.fm-journal__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--fm-space-md);
}

/* Entry card */
.fm-journal-card {
    background: var(--fm-bg-white);
    border: 1px solid var(--fm-border);
    border-radius: var(--fm-radius-md);
    overflow: hidden;
    transition: all 0.3s ease;
}

.fm-journal-card:hover {
    border-color: var(--fm-cta-green);
    box-shadow: 0 4px 16px rgba(188, 207, 151, 0.12);
    transform: translateY(-2px);
}

.fm-journal-card__image img {
    width: 100%;
    height: 160px;
    object-fit: cover;
    display: block;
}

.fm-journal-card__body {
    padding: 16px;
}

/* Meta row */
.fm-journal-card__meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.fm-journal-card__badge {
    font-family: var(--fm-font-body);
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.fm-journal-card__badge--private {
    background: var(--fm-warm-neutral);
    color: var(--fm-body-secondary);
}

.fm-journal-card__badge--public {
    background: rgba(58, 90, 64, 0.08);
    color: var(--fm-heal-teal);
}

.fm-journal-card__date {
    font-family: var(--fm-font-body);
    font-size: 12px;
    color: var(--fm-meta);
}

.fm-journal-card__title {
    font-family: var(--fm-font-heading);
    font-size: 16px;
    font-weight: 700;
    color: var(--fm-neutral);
    margin: 0 0 6px 0;
    line-height: 1.3;
}

.fm-journal-card__excerpt {
    font-family: var(--fm-font-body);
    font-size: 13px;
    font-weight: 300;
    color: var(--fm-body-secondary);
    line-height: 1.5;
    margin: 0 0 12px 0;
}

/* Actions */
.fm-journal-card__actions {
    display: flex;
    gap: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--fm-border);
}

.fm-journal-card__action {
    font-family: var(--fm-font-body);
    font-size: 12px;
    font-weight: 600;
    color: var(--fm-heal-teal);
    text-decoration: none !important;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    transition: color 0.3s ease;
}

.fm-journal-card__action:hover {
    color: var(--fm-olive);
}

.fm-journal-card__delete {
    color: var(--fm-meta) !important;
}

.fm-journal-card__delete:hover {
    color: #EB5757 !important;
}

/* Empty state */
.fm-journal__empty {
    text-align: center;
    padding: var(--fm-space-2xl);
    background: var(--fm-warm-neutral);
    border-radius: var(--fm-radius-lg);
    border: 1px dashed var(--fm-border);
}

.fm-journal__empty p {
    font-family: var(--fm-font-body);
    font-size: 16px;
    font-weight: 300;
    color: var(--fm-body-secondary);
    margin: 0 0 16px 0;
}

.fm-journal__empty-btn {
    display: inline-block;
    padding: 10px 24px;
    background: var(--fm-cta-green);
    color: var(--fm-neutral);
    border-radius: var(--fm-radius-sm);
    font-family: var(--fm-font-body);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none !important;
}

/* Load more */
.fm-journal__load-more-wrap {
    text-align: center;
    margin-top: var(--fm-space-xl);
}

.fm-journal__load-more {
    padding: 10px 28px;
    background: var(--fm-bg-white);
    border: 1.5px solid var(--fm-border);
    border-radius: var(--fm-radius-sm);
    font-family: var(--fm-font-body);
    font-size: 14px;
    font-weight: 500;
    color: var(--fm-body-secondary);
    cursor: pointer;
    transition: all 0.3s ease;
}

.fm-journal__load-more:hover {
    border-color: var(--fm-heal-teal);
    color: var(--fm-heal-teal);
}


/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media (max-width: 478px) {
    .fm-write { padding: var(--fm-space-xl) var(--fm-space-md); }
    .fm-write__header { flex-direction: column; gap: 8px; }
    .fm-write__heading { font-size: 22px; }
    .fm-write__footer { flex-direction: column; gap: 16px; align-items: stretch; }
    .fm-write__visibility { justify-content: center; }
    .fm-write__actions { display: flex; flex-direction: column; align-items: stretch; gap: 10px; }   /* ← display:flex added */
    .fm-write__echo-btn { justify-content: center; align-self: center; }
    .fm-write__submit { width: 100%; text-align: center; }

    .fm-journal { padding: var(--fm-space-xl) var(--fm-space-md); }
    .fm-journal__header { flex-direction: column; gap: 12px; }
    .fm-journal__heading { font-size: 24px; }
    .fm-journal__grid { grid-template-columns: 1fr; }
    .fm-journal__write-btn { width: 100%; text-align: center; justify-content: center; margin-top: 8px; }
}

/* Center the Echo button on anything narrower than a tablet in landscape */
@media (max-width: 767px) {
    .fm-write__actions { display: flex; flex-direction: column; align-items: stretch; gap: 10px; }
    .fm-write__echo-btn { justify-content: center; align-self: center; }
}

@media (min-width: 480px) and (max-width: 767px) {
    .fm-journal__grid { grid-template-columns: repeat(2, 1fr); }
    .fm-journal__heading { font-size: 28px; }
}

@media (min-width: 768px) {
    .fm-write { padding: var(--fm-space-2xl) var(--fm-space-xl); }
    .fm-write__title-input { font-size: 22px; }

    .fm-journal { padding: var(--fm-space-2xl) var(--fm-space-xl); }
}

/* Kill BuddyBoss page header gap on Reflections pages */
.fm-reflections-page .entry-header,
.fm-reflections-page .bb-cover-list-item,
.fm-reflections-page .bs-header-default { display: none !important; }
.fm-reflections-page .entry-content { padding-top: 0 !important; }
.fm-reflections-page .site-content { padding-top: 0 !important; }

/* =============================================
   FM Reflections v1.1.0 — CSS Additions
   Add these rules to your existing Reflections CSS
   ============================================= */

/* --- Public Reflections: Author Row --- */
.fm-journal-card__author {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    margin-bottom: 2px;
}
.fm-journal-card__author-link {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    text-decoration: none;
    color: #2c2c2c;
    font-size: 13px;
    font-weight: 500;
}
.fm-journal-card__author-link:hover {
    color: #6B8F71;
}
.fm-journal-card__avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
}
.fm-journal-card__date {
    font-size: 12px;
    color: #999;
}


/* ============================================================
   PART Z — NARROW VIEWPORT / APP WEBVIEW   (v1.7.3, July 2026)

   WHAT THE SCREENSHOTS SHOWED
   ---------------------------
   Every element began about 10% in from the left and ran flush to
   the right edge. That is not a failure to centre — a centred block
   that is too wide overflows evenly on both sides. A uniform LEFT
   offset with the right edge overflowing means something upstream is
   still reserving space for the BuddyPanel rail. The theme puts that
   offset on .site-content (and siblings) whenever the bb-buddypanel
   body class is present. Inside the app the rail is never drawn, but
   the class and its offset survive, so every card is pushed right by
   the panel width and the right margin disappears.

   WHY THIS VERSION DOES NOT RELY ON body.fm-app-view
   --------------------------------------------------
   v1.7.2 scoped everything to that class. If the class is absent —
   because is_in_app() did not match, or because the old CSS is still
   cached — none of it fires and the page looks untouched, which is
   exactly what happened. So the offset reset below runs on width
   alone. No PHP, no body class, no detection. The fm-app-view rules
   that follow are refinements on top, not the fix itself.
   ============================================================ */

/* ---- 1. Kill the reserved rail on any narrow viewport ---- */
@media (max-width: 900px) {

    .fm-reflections-page #page,
    .fm-reflections-page #content,
    .fm-reflections-page .site-content,
    .fm-reflections-page .site-content-wrap,
    .fm-reflections-page .bb-grid,
    .fm-reflections-page .bb-grid-cell,
    .fm-reflections-page .entry-content,
    .fm-reflections-page .container,
    .fm-reflections-page #primary,
    body.bb-buddypanel .fm-reflections-page .site-content,
    body.buddypanel-open .fm-reflections-page .site-content {
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
        float: none !important;
        left: 0 !important;
        transform: none !important;
    }

    /* The same offset, applied to the document rather than the wrapper.
       BuddyBoss has shipped both over the years. */
    body.fm-reflections-page,
    body.fm-reflections-page #page {
        padding-left: 0 !important;
        margin-left: 0 !important;
    }

    /* One over-wide child is enough to reintroduce the whole problem. */
    .fm-reflections-page {
        overflow-x: hidden;
    }

    /* Cards own their own geometry once the wrappers are neutral. */
    .fm-reflections-page .fm-write,
    .fm-reflections-page .fm-journal {
        max-width: 100% !important;
        width: auto !important;
        margin: 0 12px 16px !important;
        padding: 18px 16px !important;
        border-radius: 14px !important;
    }

    /* Heading block sits on the same gutter as the cards. */
    .fm-reflections-page .entry-title,
    .fm-reflections-page h1.entry-title,
    .fm-reflections-page .entry-content > p:first-of-type,
    .fm-reflections-page .entry-content > p:nth-of-type(2) {
        max-width: 100% !important;
        padding-left: 12px;
        padding-right: 12px;
    }
}

/* ---- 2. App-only refinements (require plugin 1.7.2+) ---- */

body.fm-app-view *,
body.fm-app-view *::before,
body.fm-app-view *::after {
    box-sizing: border-box;
}

/* The app draws its own header and back bar. A second one is lost height. */
body.fm-app-view .fm-reflections-page .entry-header,
body.fm-app-view .fm-reflections-page .bb-breadcrumbs,
body.fm-app-view .fm-reflections-page .site-header {
    display: none !important;
}

body.fm-app-view .fm-reflections-page .site-content,
body.fm-app-view .fm-reflections-page .entry-content {
    padding-top: 8px !important;
    padding-bottom: 32px !important;
}

/* Footer row stacks — Save must never be pushed off-screen. */
body.fm-app-view .fm-write__footer {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
}

body.fm-app-view .fm-write__footer .fm-write__visibility {
    justify-content: flex-start;
    flex-wrap: wrap;
}

body.fm-app-view .fm-write__submit,
body.fm-app-view button.fm-write__submit {
    width: 100% !important;
    text-align: center;
}

body.fm-app-view .fm-write__allowance {
    padding: 0 2px;
}

body.fm-app-view .fm-write__upgrade-nudge,
body.fm-app-view .fm-journal__upgrade-nudge {
    margin-left: 12px;
    margin-right: 12px;
}

body.fm-app-view .fm-write__upgrade-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}

/* ---- 3. Nothing may exceed the viewport ---- */

.fm-reflections-page img,
.fm-reflections-page pre,
.fm-reflections-page table,
.fm-reflections-page .fm-write__title-input,
.fm-reflections-page .fm-write__editor-wrap,
.fm-reflections-page textarea.wp-editor-area {
    max-width: 100% !important;
}

.fm-reflections-page img {
    height: auto;
}