/*
 * Optimistic Brain App — app-specific component styles.
 *
 * These are components the APP needs that are NOT part of the shared design
 * system (styles.css stays identical to the website theme). Loaded AFTER
 * styles.css by functions.php, so it may extend the shared classes.
 *
 * Exercise page system: the Meditation section and the Micro-Practice section
 * mirror each other — a white card with a coloured top bar (green / terracotta)
 * sitting above a colour-filled "About …" accordion. Same shape, two colours.
 */

/* ---------- Accordions (native Details block) — filled, colour-coded ---------- */
.prose .wp-block-details{
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-6);
  margin: var(--space-4) 0;
}
.prose .wp-block-details > summary{
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-h4);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}
.prose .wp-block-details > summary::-webkit-details-marker{ display: none; }
.prose .wp-block-details > summary::after{
  content: "\25BE";          /* down chevron — rotates up when open */
  font-size: .9em;
  line-height: 1;
  flex: none;
  transition: transform .2s ease;
}
.prose .wp-block-details[open] > summary::after{ transform: rotate(180deg); }
.prose .wp-block-details > summary + *{ margin-top: var(--space-4); }

/* Green variant — "About This Meditation" (pairs with the green-topped player) */
.prose .wp-block-details.details-green{ background: var(--accent-primary); }
.prose .details-green > summary,
.prose .details-green > summary::after,
.prose .details-green p{ color: #fff; }

/* Terracotta variant — "About Micro Practices" (pairs with the terracotta-topped box) */
.prose .wp-block-details.details-terra{ background: var(--accent-terracotta); }
.prose .details-terra > summary,
.prose .details-terra > summary::after,
.prose .details-terra p{ color: #fff; }

/* ---------- Micro Practice — white card with a terracotta top bar ---------- */
.prose .micro-practice{
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-top: 4px solid var(--accent-terracotta);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  margin: 0 0 var(--space-4);
}
.prose .micro-practice > :first-child{ margin-top: 0; }
.prose .micro-practice h3{ color: var(--text-brand); }

/* ---------- Audio player — white card with a green top bar ---------- */
.prose .ex-audio{
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-top: 4px solid var(--accent-primary);
  border-radius: var(--radius-lg);
  padding: var(--space-3);
  margin: var(--space-4) auto;
}
.prose .ex-audio iframe{
  display: block;
  border-radius: var(--radius-md);
}

/* ---------- Favorite / Bookmark button (Favorites plugin) ----------
   The plugin renders <a class="simplefavorite-button active preset"> with INLINE
   green + black-border styling. We override it (with !important) into the site's
   primary green pill so it reads like every other button. */
.prose a.simplefavorite-button,
.prose .simplefavorite-button{
  display: inline-flex !important;
  align-items: center;
  gap: .5em;
  background: var(--accent-primary) !important;
  border: 1px solid var(--accent-primary) !important;
  color: #fff !important;
  border-radius: 999px !important;
  padding: .6em 1.3em !important;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-caption);
  line-height: 1;
  text-decoration: none !important;
  box-shadow: none !important;
  cursor: pointer;
  transition: filter .15s ease;
}
.prose .simplefavorite-button:hover{ filter: brightness(1.08); }
.prose .simplefavorite-button.active{
  background: var(--accent-primary) !important;
  border-color: var(--accent-primary) !important;
  color: #fff !important;
}
.prose .simplefavorite-button i,
.prose .simplefavorite-button .sf-icon-bookmark{
  color: #fff !important;
  font-style: normal;
}

/* ---------- Lists — sit line-to-line, not paragraph-spaced ----------
   styles.css lays lists out as a grid with gap:var(--space-2); this tightens
   both the grid gap and any item margins so grouped list items read as single
   lines rather than separate paragraphs. Applies app-wide. */
.prose ul, .prose ol{ gap: 0; }
.prose ul li, .prose ol li{ margin: 0; }
.prose ul li + li, .prose ol li + li{ margin-top: 0; }

/* ---------- Exercise Process — Writing/Journaling timed steps ----------
   White card with a green top bar (mirrors .ex-audio). Holds the "Exercise
   Process" for writing exercises: an h3 title, then each timed phase as an h4
   sub-heading followed by its own numbered list that restarts at 1. Spacing
   uses the shared tokens so it matches the site's prose rhythm. */
.prose .ex-process{
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-top: 4px solid var(--accent-primary);
  border-radius: var(--radius-lg);
  padding: var(--space-6) var(--space-8);
  margin: 0;
}
.prose .ex-process > :first-child{ margin-top: 0; }
.prose .ex-process h3{ margin: 0 0 var(--space-4); }
.prose .ex-process h4{ color: var(--text-brand); margin: var(--space-6) 0 var(--space-2); }
.prose .ex-process ol{ margin: 0; }

/* ---------- Exercise Library ([ob_exercises]) ----------
   The app's browse screen: a row of filter chips over a card grid. Tapping a
   chip shows/hides cards in place (see the shortcode's inline script). Cards
   are the little exercise icons + a trimmed title. */
.ex-search-wrap{ max-width: 480px; margin: 0 auto var(--space-6); }
.ex-search{
  width: 100%;
  font-family: var(--font-body);
  font-size: var(--text-body);
  color: var(--text-primary);
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill);
  padding: var(--space-3) var(--space-6);
}
.ex-search:focus{ outline: none; border-color: var(--accent-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-primary) 20%, transparent); }
.ex-search::placeholder{ color: var(--text-muted); }
.ex-empty{ text-align: center; color: var(--text-muted); margin: var(--space-8) 0 0; }
.ex-filter{ justify-content: center; margin: 0 auto var(--space-6); max-width: 760px; }
.ex-filter .chip{ font-family: var(--font-body); }
/* Mobile: 3 chips per row (full-width pills were too wide), and 3 exercise
   cards per row with a compact icon + title (the default 150px min collapsed
   to a single column at padded phone widths). */
@media (max-width: 600px){
  .ex-filter{ display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2); max-width: none; }
  .ex-filter .chip{ width: 100%; text-align: center; padding: var(--space-2) var(--space-1); font-size: 13px; white-space: normal; line-height: 1.2; }
  .ex-grid{ grid-template-columns: repeat(3, 1fr); gap: var(--space-2); }
  .ex-card{ padding: var(--space-3) var(--space-1); gap: var(--space-2); }
  .ex-card__icon img{ width: 44px; height: 44px; }
  .ex-card__title{ font-size: 11px; line-height: 1.2; }
}
.ex-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--space-4);
}
.ex-card{
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-3);
  padding: var(--space-6) var(--space-4);
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  text-decoration: none;
  color: var(--text-primary);
  transition: border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard);
}
.ex-card:hover{ border-color: var(--accent-primary); box-shadow: var(--shadow-raised); }
.ex-card__icon{ display: block; }
.ex-card__icon img{ width: 64px; height: 64px; object-fit: contain; display: block; }
.ex-card__title{
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-caption);
  line-height: var(--leading-snug);
  color: var(--text-primary);
}

/* ---------- Bookmarks list ([ob_bookmarks]) ----------
   Saved items grouped into "Practices & Exercises" and "Articles to Read".
   Compact rows: icon + full title on the left, a quiet "Remove" action on the
   right (the Favorites plugin's toggle button, relabelled via ::after). */
.ob-bm-group + .ob-bm-group{ margin-top: var(--space-10); }
.ob-bm-head{ font-family: var(--font-display); font-weight: 700; font-size: var(--text-h4); color: var(--text-brand); margin: 0 0 var(--space-2); }
.ob-bm-list{ display: flex; flex-direction: column; }
.ob-bm-card{
  display: flex; align-items: center; gap: var(--space-4);
  padding: var(--space-3) 0;
  border-top: 1px solid var(--border-subtle);
}
.ob-bm-card:last-child{ border-bottom: 1px solid var(--border-subtle); }
.ob-bm-main{ display: flex; align-items: center; gap: var(--space-4); flex: 1; min-width: 0; text-decoration: none; color: var(--text-primary); }
.ob-bm-icon{ flex: 0 0 auto; }
.ob-bm-icon img{ width: 52px; height: 52px; object-fit: contain; display: block; }
.ob-bm-title{ font-family: var(--font-display); font-weight: 600; font-size: var(--text-body); line-height: 1.3; }
.ob-bm-main:hover .ob-bm-title{ color: var(--text-brand); }
.ob-bm-empty{ text-align: center; color: var(--text-muted); }
/* Remove action — the plugin's toggle button, made into a quiet text button.
   Its font is zeroed (the plugin may re-inject "Bookmarked") and "Remove" is
   painted with ::after so our label always wins. */
.ob-bm-list .simplefavorite-button{
  flex: 0 0 auto;
  display: inline-flex !important; align-items: center;
  background: none !important; border: 0 !important; box-shadow: none !important;
  padding: var(--space-2) !important; margin: 0 !important;
  font-size: 0 !important; line-height: 1; text-decoration: none !important; cursor: pointer;
}
.ob-bm-list .simplefavorite-button i{ display: none !important; }
.ob-bm-list .simplefavorite-button::after{
  content: "Remove"; font-family: var(--font-body); font-weight: 600;
  font-size: var(--text-caption); letter-spacing: .02em; color: var(--accent-terracotta);
}
.ob-bm-list .simplefavorite-button:hover::after{ text-decoration: underline; }
@media (max-width: 600px){
  .ob-bm-icon img{ width: 44px; height: 44px; }
  .ob-bm-title{ font-size: var(--text-caption); }
}

/* ---------- Courses ([ob_courses]) ----------
   One green-topped card per course: icon + title + description, matching the
   exercise cards. Equal padding all round, tight icon-to-title gap, and the
   site's relaxed paragraph line-height on the description. */
.ob-courses-list{ display: grid; gap: var(--space-6); }
.ob-course-card{
  display: flex; align-items: flex-start; gap: var(--space-6);
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-top: 4px solid var(--accent-primary);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  text-decoration: none; color: var(--text-primary);
  transition: border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard);
}
.ob-course-card:hover{ border-color: var(--accent-primary); box-shadow: var(--shadow-raised); }
.ob-course-icon{ flex: 0 0 auto; }
.ob-course-icon img{ width: 72px; height: 72px; object-fit: contain; display: block; }
.ob-course-body{ min-width: 0; }
.ob-course-title{ display: block; font-family: var(--font-display); font-weight: 700; font-size: var(--text-h4); color: var(--text-brand); margin-bottom: var(--space-2); }
.ob-course-desc{ display: block; color: var(--text-secondary); line-height: var(--leading-relaxed); }
@media (max-width: 600px){
  .ob-course-card{ flex-direction: column; align-items: center; text-align: center; gap: var(--space-3); }
  .ob-course-icon img{ width: 64px; height: 64px; }
}

/* ---------- Blog listing ([ob_blog]) ----------
   A category's articles as a compact list: thumbnail + title + excerpt, newest
   first. Used on the Blogs sub-pages. */
.ob-blog-list{ display: grid; gap: 0; }
.ob-blog-card{
  display: flex; align-items: flex-start; gap: var(--space-4);
  padding: var(--space-4) 0;
  border-top: 1px solid var(--border-subtle);
  text-decoration: none; color: var(--text-primary);
}
.ob-blog-card:last-child{ border-bottom: 1px solid var(--border-subtle); }
.ob-blog-thumb{ flex: 0 0 auto; }
.ob-blog-thumb img{ width: 96px; height: 72px; object-fit: cover; border-radius: var(--radius-md); display: block; }
.ob-blog-body{ min-width: 0; }
.ob-blog-title{ display: block; font-family: var(--font-display); font-weight: 700; font-size: var(--text-body); line-height: 1.3; margin-bottom: var(--space-1); }
.ob-blog-card:hover .ob-blog-title{ color: var(--text-brand); }
.ob-blog-excerpt{ display: block; color: var(--text-secondary); font-size: var(--text-caption); line-height: var(--leading-relaxed); }
@media (max-width: 600px){
  .ob-blog-card{ gap: var(--space-3); }
  .ob-blog-thumb img{ width: 80px; height: 60px; }
}