/*
 * Maliasili Learn typography — same rules on the portal front end and inside the
 * Gutenberg editor canvas, so course leaders see what students see.
 *
 * Font families come from Yabe Webfont's Adobe Fonts project (fonts.css), which
 * defines the --ywf--family-* variables and loads itself into the block editor too.
 *
 * IMPORTANT cascade notes (learned the hard way):
 *  - SureDash sets its global font on EVERYTHING in the portal via
 *    `.portal-content * { font-family: var(--portal-font-family) }`, and loads its
 *    portal CSS at wp_enqueue_scripts priority 999999 — AFTER ours. So our rules
 *    must use !important to win, and we enqueue at an even higher priority.
 *  - The real lesson body wrapper is `.portal-lesson-content` (suredash-pro course
 *    integration), NOT `.suredash-single-content`. Single feed/discussion posts use
 *    `.portal-store-list-post`. We scope to those + the editor so portal UI chrome
 *    (nav, comments, meta) keeps SureDash's own type.
 */

/* The content scopes we style. Kept as a comment for reference:
   front end : .portal-lesson-content, .portal-space-post-content, .portal-store-list-post
   editor    : .editor-styles-wrapper
*/

/* ---- Headings: Barlow Condensed ---- */
.portal-lesson-content h1, .portal-lesson-content h2, .portal-lesson-content h3,
.portal-lesson-content h4, .portal-lesson-content h5, .portal-lesson-content h6,
.portal-store-list-post h1, .portal-store-list-post h2, .portal-store-list-post h3,
.portal-store-list-post h4, .portal-store-list-post h5, .portal-store-list-post h6,
.editor-styles-wrapper h1, .editor-styles-wrapper h2, .editor-styles-wrapper h3,
.editor-styles-wrapper h4, .editor-styles-wrapper h5, .editor-styles-wrapper h6 {
	font-family: var(--ywf--family-barlow-condensed, "barlow-condensed"), sans-serif !important;
}

/* ---- Body copy: Franklin Gothic URW, 18px / 1.3 ---- */
.portal-lesson-content p, .portal-lesson-content li,
.portal-store-list-post p, .portal-store-list-post li,
.editor-styles-wrapper p, .editor-styles-wrapper li {
	font-family: var(--ywf--family-franklin-gothic-urw, "franklin-gothic-urw"), sans-serif !important;
	font-size: 18px !important;
	line-height: 1.3 !important;
}

/* ---- Quotes ----
   On the front end SureDash renders the quote block as a plain <blockquote> with
   <p> children (the wp-block-quote class is stripped), and its `.portal-content *`
   rule sets the font on each <p> directly — so we must target the <p>, not the
   blockquote, to win. Two tiers:
     - every quote paragraph  -> Caveat Brush, 28px, green
     - the citation (last <p>, when there's more than one) -> Barlow, 18px, black
   The quote paragraph's bottom margin is trimmed to tighten the gap to the citation. */
.portal-lesson-content blockquote p,
.portal-store-list-post blockquote p,
.editor-styles-wrapper blockquote p {
	font-family: var(--ywf--family-caveat-brush, "caveat-brush"), cursive !important;
	font-size: 28px !important;
	line-height: 1.3 !important;
	color: #509983 !important;
	margin-bottom: 0.25em !important;
}

.portal-lesson-content blockquote p:last-child:not(:first-child),
.portal-store-list-post blockquote p:last-child:not(:first-child),
.editor-styles-wrapper blockquote p:last-child:not(:first-child) {
	font-family: var(--ywf--family-barlow-condensed, "barlow-condensed"), sans-serif !important;
	font-size: 18px !important;
	line-height: 1.3 !important;
	color: #000000 !important;
	margin-top: 0 !important;
}

/* ---- Content images: no drop shadow ----
   SureDash adds `.portal-content img { box-shadow: 0 0 25px ... }` to all portal
   imagery; drop it inside lesson/post content only (avatars, logos etc. keep theirs). */
.portal-lesson-content img, .portal-lesson-content video,
.portal-store-list-post img, .portal-store-list-post video,
.editor-styles-wrapper img, .editor-styles-wrapper video {
	box-shadow: none !important;
}

/* ---- Slate-blue header bars: white text + icons ---- */

/* Lesson bar: counter, back link and its chevron (Lucide SVG, stroke=currentColor). */
.portal-item-title-area .course-lesson-marker {
	color: #ffffff !important;
}
.portal-item-title-area a.portal-sub-item-link,
.portal-item-title-area a.portal-sub-item-link *,
.portal-item-title-area a.portal-sub-item-link:hover,
.portal-item-title-area a.portal-sub-item-link:hover * {
	color: #ffffff !important;
}

/* Space bar: the space-title icon. This header is rendered as a Gutenberg block
   (.wp-block-suredash-title), so it does NOT use .portal-item-title markup. The icon
   span otherwise inherits `.portal-svg-icon { color: var(--portal-text-color) }` and
   shows dark. Scope white to the title block ONLY — a blanket .portal-svg-icon rule
   would also whiten the sidebar nav icons, which sit on a white background.
   Lucide icons use stroke=currentColor; set color + stroke to be safe. */
.wp-block-suredash-title .portal-svg-icon,
.wp-block-suredash-title .portal-svg-icon svg,
.wp-block-suredash-title .portal-svg-icon svg * {
	color: #ffffff !important;
	stroke: #ffffff !important;
}

/* The PHP-rendered space/lesson header (course pages) uses .portal-item-title. */
.portal-item-title-area .portal-item-title,
.portal-item-title-area .portal-item-title .portal-svg-icon,
.portal-item-title-area .portal-item-title svg,
.portal-item-title-area .portal-item-title svg * {
	color: #ffffff !important;
	stroke: #ffffff !important;
}