/* Reproduces the Obsidian look for articles imported via Help Scout's HTML
   importer. Scoped to #fullArticle so it only touches article content, not
   site chrome (nav, footer, ratings widget, etc.).

   Exo is ChamSys's established brand typeface — it's already used on both
   chamsyslighting.com (main site) and docs.chamsys.co.uk (manuals site, which
   loads it from Google Fonts and pairs it with Roboto Mono for code). This
   file follows that same pairing so Help Scout articles match the rest of
   the ChamSys web presence, not just Obsidian.

   Note: Help Scout's importer strips the data-callout="tip"/"note"/etc.
   attribute from callout divs, so every callout (Source, Note, Tip, Summary)
   becomes an identical <div class="callout"> with no type left in the HTML.
   CSS cannot tell them apart, so all callouts get one uniform accent style
   here rather than the per-type colors/badges seen in Obsidian. */

@import url('https://fonts.googleapis.com/css2?family=Exo:ital,wght@0,100..900;1,100..900&family=Roboto+Mono:wght@400;500;600&display=swap');

#fullArticle {
	font-family: 'Exo', sans-serif !important;
}

/* Backstop in case an article was exported/imported before the Obsidian-side
   chamsys-export-toc.css snippet was enabled: hide the raw YAML frontmatter
   block and the note's own redundant H1 (Help Scout supplies its own <h1
   class="title"> from the article name). !important guards against Help
   Scout's own theme CSS or inline styles winning the cascade. */
#fullArticle pre.frontmatter,
#fullArticle .el-h1:first-of-type {
	display: none !important;
}

#fullArticle .title,
#fullArticle h1,
#fullArticle h2,
#fullArticle h3,
#fullArticle h4,
#fullArticle h5,
#fullArticle h6 {
	font-family: 'Exo', sans-serif !important;
	font-weight: 700;
}

/* Table of Contents (from the Outline feature): reproduces the manually-built
   grey box / monospace / tight-spacing look used on
   info.chamsyslighting.com, since the plugin's own tree-item spacing and
   feature-title bolding don't survive Help Scout's import cleanly. */
#fullArticle #outline {
	background-color: #f4f4f4;
	border-radius: 4px;
	padding: 16px 20px;
	margin: 16px 0;
	font-family: 'Roboto Mono', monospace !important;
	font-size: 0.9em;
	line-height: 1.6;
}

#fullArticle #outline .feature-title {
	font-weight: 700;
	color: #222;
	margin-bottom: 8px;
}

#fullArticle #outline .tree-item-icon,
#fullArticle #outline .tree-collapse-all,
#fullArticle #outline .heading-collapse-indicator {
	display: none !important;
}

#fullArticle #outline .tree-item,
#fullArticle #outline .tree-item-children {
	margin: 0;
	padding: 0;
}

#fullArticle #outline .tree-item-self,
#fullArticle #outline a.tree-item-self {
	display: block;
	padding: 1px 0;
	font-family: 'Roboto Mono', monospace !important;
}

/* Callout box: uniform treatment for Source/Note/Tip/Summary alike */
#fullArticle .callout {
	background-color: #f5f8fd;
	border-left: 4px solid #448aff;
	border-radius: 4px;
	padding: 12px 16px;
	margin: 16px 0;
}

#fullArticle .callout-title {
	display: flex;
	align-items: center;
	font-weight: 700;
	color: #2a5ec2;
	margin-bottom: 6px;
}

/* Callout TYPE badge (NOTE/TIP/WARNING/CAUTION/INFO). Help Scout's importer
   strips the data-callout attribute Obsidian uses to know a callout's type,
   so this label no longer exists anywhere in the imported HTML — it has to
   be added by hand as the first line inside each callout:
   <p class="callout-type">NOTE</p>
   Matches the badge look from the vault's chamsys-callouts.css snippet. */
#fullArticle .callout-type {
	display: inline-block;
	background-color: #007bff;
	color: #fff;
	font-weight: 700;
	font-size: 0.7em;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	padding: 2px 8px;
	border-radius: 3px;
	margin: 0 0 8px 0;
}

#fullArticle .callout-icon {
	display: none;
}

#fullArticle .callout-content p:last-child {
	margin-bottom: 0;
}

#fullArticle .callout-content {
	color: inherit;
}

/* Inline code / keyboard-style badges to match the chamsys code snippet look.
   Uses Roboto Mono, matching code/kbd/pre on docs.chamsys.co.uk, rather than
   Exo (Exo is a display/body sans, not intended for code). */
#fullArticle code {
	background: linear-gradient(to bottom, #ffffff 0%, #d8d8d8 100%);
	color: #222;
	border: 1.5px solid #888;
	border-bottom: 3px solid #555;
	border-radius: 5px;
	padding: 2px 8px;
	font-family: 'Roboto Mono', monospace !important;
	font-size: 0.85em;
	font-weight: 600;
	box-shadow: 0 3px 5px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.8);
}